/*
Theme Name: Draagmuur Verwijderen Eindhoven
Theme URI: https://draagmuurverwijdereneindhoven.nl
Author: Draagmuur Verwijderen Eindhoven
Description: Licht, snel en conversiegericht maatwerkthema voor draagmuur verwijderen in Eindhoven en omstreken. Geoptimaliseerd voor Core Web Vitals, leesbaarheid en lokale SEO.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: draagmuureindhoven
*/

/* Lettertype van de eigen server, zodat er geen verzoek naar Google nodig is
   en de tekst niet verspringt zodra het lettertype binnen is. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}



/* ==========================================================================
   DRAAGMUUR VERWIJDEREN EINDHOVEN — gedeelde stylesheet
   Stijl: strak & professioneel · slate + bouworanje · veel witruimte
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:      #14202e;
  --ink-2:    #45566a;
  --ink-3:    #7c8ba0;
  --bg:       #ffffff;
  --bg-soft:  #f4f7fb;
  --line:     #e4eaf1;
  --accent:   #ec6a1e;   /* bouworanje */
  --accent-d: #cf560f;
  --accent-soft:#fdefe4;
  --navy:     #14202e;
  --green:    #1a9e5f;
  --radius:   16px;
  --shadow:   0 10px 30px -12px rgba(20,32,46,.14);
  --shadow-lg:0 24px 60px -20px rgba(20,32,46,.22);
  --maxw:     1140px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink-2);background:var(--bg);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-d)}
h1,h2,h3,h4{color:var(--ink);line-height:1.18;font-weight:800;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(30px,5vw,46px)}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:20px}
p{margin:0 0 16px}
strong{color:var(--ink);font-weight:700}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container-narrow{max-width:820px}
.section{padding:76px 0}
.section-soft{background:var(--bg-soft)}
.section-head{max-width:680px;margin:0 auto 46px;text-align:center}
.section-head.left{text-align:left;margin-left:0}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:6px 14px;border-radius:99px;margin-bottom:14px}
.section-head p{font-size:17px;color:var(--ink-2)}
.lead{font-size:18px;color:var(--ink-2)}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s,box-shadow .18s,color .18s;line-height:1}
.btn-lg{padding:17px 30px;font-size:16px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -8px rgba(236,106,30,.6)}
.btn-primary:hover{background:var(--accent-d);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-white{background:#fff;color:var(--accent)}
.btn-white:hover{background:#fff;color:var(--accent-d);transform:translateY(-2px)}

/* Topbar — mail + telefoon staan hier zodat de hoofdheader rustig blijft */
.topbar{background:var(--navy);color:#c3cede;font-size:13.5px;line-height:1.4}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:8px;padding-bottom:8px}
.topbar-usp{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#c3cede;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-contact{display:inline-flex;align-items:center;gap:22px;flex:0 0 auto}
.topbar-contact a{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;white-space:nowrap}
.topbar-contact a:hover{color:var(--accent)}
.topbar-contact svg{flex:0 0 auto;opacity:.75}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17.5px;color:var(--ink);letter-spacing:-.02em;flex:0 0 auto}
/* Plaatsnaam op een tweede regel: houdt het logo smal genoeg zodat het
   hoofdmenu op desktop op één regel past. */
.logo .logo-text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.logo:hover{color:var(--ink)}
.logo .brand-accent{color:var(--accent)}
.logo-mark{flex:0 0 auto}
.main-nav{display:flex;gap:18px;align-items:center}
.main-nav a{color:var(--ink);font-weight:600;font-size:14.5px;white-space:nowrap}
.main-nav .sub-toggle{white-space:nowrap;font-size:14.5px}
.main-nav a:hover{color:var(--accent)}
.header-cta{display:flex;align-items:center;gap:14px}
.header-phone{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:16px;white-space:nowrap}
.header-phone .ico{color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* Hero */
.hero{background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:70px 0 84px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:22px;box-shadow:var(--shadow)}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.hero h1{margin-bottom:16px}
.hero .lead{margin-bottom:26px;max-width:540px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-usps{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.hero-usps li{display:flex;align-items:flex-start;gap:10px;font-weight:600;color:var(--ink)}
.hero-usps .check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:1px}
.hero-visual{position:relative}
.hero-visual img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;object-fit:cover;aspect-ratio:4/3}
.hero-float{position:absolute;left:-18px;bottom:-18px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:12px;border:1px solid var(--line)}
.hero-float .num{font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.hero-float .lbl{font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.3}

/* Trust strip */
.trust-strip{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding:22px 24px;border-top:1px solid var(--line)}
.trust-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink-2)}
.trust-item .ico{color:var(--accent)}

/* USP-cards / grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ic{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card h3{margin-bottom:8px}
.card p{margin:0;font-size:15px}

/* Kostentabel */
.kosten-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:15.5px}
.kosten-table th,.kosten-table td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line)}
.kosten-table thead th{background:var(--navy);color:#fff;font-weight:700}
.kosten-table td:last-child,.kosten-table th:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--ink)}
.kosten-table tbody tr:last-child td{border-bottom:0}
.kosten-table tbody tr:nth-child(even){background:var(--bg-soft)}
.kosten-table .totaal td{background:var(--accent-soft);font-weight:800;color:var(--ink)}
.kosten-note{font-size:13.5px;color:var(--ink-3);margin-top:14px}

/* Proces stappen */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px 22px}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:20px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 6px 14px -4px rgba(236,106,30,.6)}
.step h3{font-size:16px;margin:10px 0 6px}
.step p{font-size:14px;margin:0}

/* Projecten */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.project-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.project-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.project-card .body{padding:20px 22px}
.project-card .tag{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:8px;margin-bottom:10px}
.project-card h3{font-size:17px;margin-bottom:8px}
.project-card p{font-size:14.5px;margin:0}

/* Split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3;object-fit:cover}
.checklist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.checklist li{display:flex;align-items:flex-start;gap:11px;color:var(--ink)}
.checklist .check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:1px}

/* Reviews */
.reviews-wrap{max-width:960px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2px 22px;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--accent);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq .answer{padding:0 0 20px;color:var(--ink-2);font-size:15.5px}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--navy),#243a52);border-radius:24px;padding:56px 44px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 26px;font-size:17px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-phone{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:19px}

/* Contactformulier */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.form-row{margin-bottom:16px}
.form-row label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:14.5px}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .15s}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent)}
.form-row textarea{min-height:120px;resize:vertical}
.hp-field{position:absolute;left:-9999px;top:-9999px}
.form-note{font-size:13px;color:var(--ink-3);margin-top:4px}
.lbl-opt{font-weight:500;color:var(--ink-3);font-size:13.5px}
.form-row input[type=file]{padding:10px 12px;cursor:pointer;font-size:14.5px;color:var(--ink-2)}
.form-row input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg-soft);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.form-row input[type=file]:hover::file-selector-button{border-color:var(--accent);background:var(--accent-soft)}
.field-hint{margin:6px 0 0;font-size:13px;color:var(--ink-3);line-height:1.55}
.upload-msg{margin:8px 0 0;font-size:13.5px;font-weight:600;line-height:1.5}
.upload-msg.err{color:#c0392b}
.upload-msg.ok{color:var(--green)}
.form-alert{padding:14px 18px;border-radius:10px;margin-bottom:18px;font-weight:600;font-size:15px}
.form-alert.ok{background:#e6f7ef;color:#0f7a49;border:1px solid #b6e6cf}
.form-alert.err{background:#fdecec;color:#c0392b;border:1px solid #f4c4c0}
.form-alert.warn{background:#fff6e6;color:#9a6206;border:1px solid #f3ddb0}
.form-alert.warn a{color:#9a6206;text-decoration:underline}
.contact-info .info-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.contact-info .info-item:last-child{border-bottom:0}
.contact-info .ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.contact-info .info-item strong{display:block;color:var(--ink);margin-bottom:2px}
.contact-info .info-item a{color:var(--ink-2)}
.contact-info .info-item a:hover{color:var(--accent)}

/* Artikel/pagina */
.page-article{padding:60px 0}
.entry-content h2{margin-top:36px}
.entry-content ul{margin:0 0 16px 20px}
.entry-content li{margin-bottom:7px}

/* Footer */
.site-footer{background:var(--navy);color:#c3cedd;padding:60px 0 26px;font-size:14.5px}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em}
.site-footer a{color:#c3cedd}
.site-footer a:hover{color:#fff}
.footer-brand .logo{color:#fff;margin-bottom:14px}
.footer-brand .logo .brand-accent{color:var(--accent)}
.footer-brand p{max-width:340px}
.footer-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer-contact{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.footer-contact li{display:flex;gap:10px;align-items:flex-start}
.footer-contact .ico{color:var(--accent);flex:0 0 auto;margin-top:2px}
/* Tweede kop binnen een footerkolom: met scheidingslijn, zodat de links
   niet los onder de NAW-gegevens lijken te zweven. */
.site-footer h4.footer-sub{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:#8ea0b5}
.footer-bottom a{color:#8ea0b5}

/* Zwevende belknop */
.call-float{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:14px 20px;border-radius:99px;font-weight:800;box-shadow:0 12px 28px -6px rgba(236,106,30,.6)}
.call-float:hover{color:#fff;background:var(--accent-d);transform:translateY(-2px)}

/* Responsive */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:48px 0 60px}
  .hero-visual{order:-1}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:26px}
  .split,.contact-grid{grid-template-columns:1fr;gap:32px}
  .split .split-media{order:-1}
  .project-grid{grid-template-columns:1fr 1fr}
  .footer-main{grid-template-columns:1fr;gap:28px}
}
@media(max-width:680px){
  .section{padding:52px 0}
  .main-nav,.header-phone{display:none}
  .nav-toggle{display:flex}
  .main-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px;gap:14px;box-shadow:var(--shadow)}
  .grid-4,.grid-2,.project-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .cta-band{padding:40px 24px}
  .call-float{padding:12px 16px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   SEO-pagina's (template-seo.php)
   ========================================================================== */

/* Kruimelpad */
.breadcrumb{border-bottom:1px solid var(--line);background:#fff;font-size:13.5px;color:var(--ink-3)}
.breadcrumb .container{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;padding-bottom:12px}
.breadcrumb a{color:var(--ink-2);font-weight:600}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span[aria-hidden]{color:var(--ink-3)}

/* Pagina-hero */
.page-hero{background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);padding:56px 0 60px}
.page-hero h1{margin-bottom:14px}
.page-hero .lead{max-width:760px;margin-bottom:0}

/* Lopende tekst */
.prose{max-width:820px}
.prose h2{margin-bottom:16px}
.prose p{font-size:16.5px}
.prose p:last-child{margin-bottom:0}
.prose .checklist{margin-top:22px}

/* Feitenkader */
.factbox{background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);padding:32px 34px;box-shadow:var(--shadow);max-width:900px}
.factbox h2{font-size:clamp(21px,2.6vw,27px);margin-bottom:14px}
.factbox p{font-size:16px}
.factbox p:last-child{margin-bottom:0}
.factbox .checklist{margin-top:20px}

/* Tabel: horizontaal scrollbaar op mobiel */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.table-wrap .kosten-table{min-width:560px}

/* Lees verder */
.related-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.rc-title{font-weight:700;color:var(--ink);font-size:16px;line-height:1.35}
.related-card:hover .rc-title{color:var(--accent)}
.rc-arrow{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800}

/* Stappen: flexibel aantal kolommen */
.steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Werkgebied-links */
.regio-links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.regio-links a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-weight:600;font-size:14.5px;color:var(--ink)}
.regio-links a:hover{border-color:var(--accent);color:var(--accent)}

@media(max-width:960px){
  .steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
}
@media(max-width:680px){
  .page-hero{padding:38px 0 44px}
  .factbox{padding:26px 22px}
  .steps{grid-template-columns:1fr}
}

/* Dropdown in hoofdmenu */
.has-sub{position:relative}
.sub-toggle{background:none;border:0;padding:0;font:inherit;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sub-toggle:hover,.has-sub:hover .sub-toggle{color:var(--accent)}
.sub-toggle .caret{font-size:11px;transition:transform .18s}
.sub-menu{position:absolute;top:100%;left:-14px;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;display:none;flex-direction:column;gap:2px;margin-top:12px}
.sub-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink)}
.sub-menu a:hover{background:var(--bg-soft);color:var(--accent)}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu,.sub-menu.open{display:flex}
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}

@media(max-width:680px){
  .has-sub{width:100%}
  .sub-menu{position:static;display:flex;border:0;box-shadow:none;padding:4px 0 4px 12px;margin-top:6px;min-width:0;border-left:2px solid var(--line);border-radius:0}
  .sub-toggle{width:100%;justify-content:space-between}
}

/* Footer met 4 kolommen */
.footer-main-4{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:960px){.footer-main-4{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.footer-main-4{grid-template-columns:1fr}}

/* ==========================================================================
   Mobiel: geen horizontale scroll (out-of-scroll fix)
   ========================================================================== */

/* Vangnet: niets mag buiten de viewport uitsteken (clip breekt position:sticky niet) */
body{overflow-x:clip;max-width:100%}
img,video,svg,iframe,table,pre{max-width:100%}
img,video{height:auto}
/* Let op: hier NOOIT max-width:100% zetten zonder min(), anders verliest de
   .container zijn leesbare breedte van 1140px en loopt de site op desktop
   van rand tot rand. */
.container{max-width:min(var(--maxw),100%)}
.container-narrow{max-width:min(820px,100%)}

/* Compacte CTA-label voor smalle schermen */
.cta-short{display:none}

/* Topbar responsive: USP valt weg, contactgegevens blijven */
@media(max-width:1080px){
  .topbar-usp{display:none}
  .topbar-inner{justify-content:center}
}
@media(max-width:680px){
  .topbar{font-size:13px}
  .topbar-inner{padding-top:7px;padding-bottom:7px;gap:0}
  .topbar-contact{gap:0;width:100%;justify-content:space-between;min-width:0}
  .topbar-contact a{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
/* Op smalle schermen past het volledige e-mailadres niet naast het nummer.
   Het nummer blijft bereikbaar via de bel-knop in de header en de call-float,
   dus tonen we hier alleen het e-mailadres — volledig, niet afgekapt. */
@media(max-width:560px){
  .topbar{font-size:12.5px}
  .topbar-contact{justify-content:center}
  .topbar-contact a:last-child{display:none}
  .topbar-contact a:first-child{overflow:visible;text-overflow:clip}
}

@media(max-width:680px){
  .header-inner{gap:10px;padding:12px 16px}
  .logo{font-size:15.5px;line-height:1.18;gap:9px;min-width:0}
  .logo .logo-text{overflow-wrap:anywhere;white-space:normal}
  .logo-mark{width:34px;height:34px}
  .header-cta{gap:8px;flex:0 0 auto}
  .header-cta .btn{padding:11px 14px;font-size:14px;white-space:nowrap}
  .cta-full{display:none}
  .cta-short{display:inline}
  .nav-toggle{padding:6px;flex:0 0 auto}
  .container{padding-left:18px;padding-right:18px}
  .kosten-table th,.kosten-table td{padding:12px 12px;font-size:14.5px}
  .breadcrumb .container{padding-top:10px;padding-bottom:10px}
  .regio-links a{font-size:13.5px;padding:8px 14px}
  .related-card{padding:18px 18px;gap:12px}
  .rc-title{font-size:15px}
  .prose h2{overflow-wrap:break-word}
  .hero-badge{max-width:100%}
  /* badge niet half buiten beeld hangen op mobiel */
  .hero-float{left:10px;bottom:-14px;padding:12px 15px}
  .hero-float .num{font-size:22px}
}

@media(max-width:420px){
  .logo{font-size:14px}
  .logo-mark{width:30px;height:30px}
  .header-cta .btn{padding:10px 12px;font-size:13.5px}
  .call-float{padding:11px 14px;font-size:13.5px}
}

/* Projectkaart: technische kenmerken */
.project-meta{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #e6eaef;display:grid;gap:7px}
.project-meta li{display:flex;gap:10px;font-size:14px;line-height:1.45}
.project-meta .pm-k{flex:0 0 108px;color:#6b7684;font-weight:600}
.project-meta .pm-v{color:#14202e;font-weight:600}
@media(max-width:420px){
  .project-meta li{flex-direction:column;gap:1px}
  .project-meta .pm-k{flex:none}
}

/* Contactformulier: mag krimpen op zeer smalle schermen (geen afgeknelde velden) */
.contact-grid > *{min-width:0}
.form-card{min-width:0}
.form-card form{min-width:0}
.form-row{min-width:0}
.form-row input,.form-row textarea,.form-row select{min-width:0;max-width:100%}
.hp-field{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;left:auto;top:auto}
@media(max-width:520px){
  .form-card{padding:22px 18px}
}

/* ==========================================================================
   Mobiel, laatste restjes op 320px
   Op de smalste telefoons zijn twee dingen breder dan hun kolom: een enkel
   lang woord in de H1 en het volledige e-mailadres. Afbreken alleen helpt
   niet als de kolom zelf op zijn min-content meegroeit, dus zetten we daar
   ook min-width en overflow-wrap: anywhere op.
   ========================================================================== */

h1,h2,h3,h4{overflow-wrap:break-word}

.contact-grid,.contact-info,.info-item,.info-item > div,
.factbox,.checklist li,.checklist li > span:not(.check){min-width:0}

.checklist{grid-template-columns:minmax(0,1fr)}

.info-item a,.info-item strong,
.checklist li > span:not(.check),
.footer-contact a,
a[href^="mailto:"]{overflow-wrap:anywhere}

@media(max-width:400px){
  h1{font-size:25px;line-height:1.22}
}

/* ==========================================================================
   Tablet en liggende telefoon: hamburger tot 1080px
   Het volledige menu past pas vanaf ongeveer 1085px naast het logo en de
   knop. Daaronder werd de hele kopregel breder dan het scherm, waardoor de
   pagina op tablets opzij te schuiven was.
   ========================================================================== */
@media(max-width:1080px){
  .main-nav,.header-phone{display:none}
  .nav-toggle{display:flex}
  .main-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px;gap:14px;box-shadow:var(--shadow);z-index:60}
  .has-sub{width:100%}
  .sub-menu{position:static;display:flex;border:0;box-shadow:none;padding:4px 0 4px 12px;margin-top:6px;min-width:0;border-left:2px solid var(--line);border-radius:0}
  .sub-toggle{width:100%;justify-content:space-between}
}

/* Hero: zelfde zijmarge als de rest van de pagina.
   .hero-grid zette met de padding-korthand de linker en rechter marge op nul,
   waardoor de hero op tablets tegen de schermrand plakte. */
.container.hero-grid{padding-left:24px;padding-right:24px}
@media(max-width:680px){
  .container.hero-grid{padding-left:18px;padding-right:18px}
}

/* Uitgeklapt menu links uitlijnen. In kolomrichting zorgde align-items:center
   ervoor dat de hoofditems gecentreerd stonden en de subitems links. */
.main-nav.open{align-items:stretch;text-align:left}

/* Lange woorden, e-mailadressen en URL's mogen afbreken i.p.v. buiten beeld lopen */
p,li,dd,dt,a,span,strong,em,b,i,h1,h2,h3,h4,h5,figcaption,label,blockquote{overflow-wrap:anywhere}
.checklist li,.checklist li > span,.factbox li,.prose li{min-width:0}
.checklist li > span:not(.check){min-width:0;flex:1 1 auto}
.contact-item,.contact-item > div,.contact-item a{min-width:0}
.table-wrap{max-width:100%}

/* ==========================================================================
   Out-of-scroll definitief onmogelijk
   overflow-x:clip op html EN body. clip maakt geen scroll-container, dus
   position:sticky van de header blijft gewoon werken.
   ========================================================================== */
html{overflow-x:clip}
html,body{max-width:100%}
body.nav-open{overflow-y:hidden}

/* ==========================================================================
   Mobiel menu: echte accordeon, scrollbaar, met CTA onderin
   Het submenu stond onder 1080px hard op display:flex, waardoor alle 18
   links altijd open stonden en het paneel langer werd dan het scherm.
   ========================================================================== */
@media(max-width:1080px){
  .main-nav.open{padding:10px 18px 18px;gap:0;align-items:stretch;text-align:left;box-shadow:var(--shadow-lg);
    max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .main-nav.open > a{display:block;padding:14px 2px;font-size:16px;border-bottom:1px solid var(--line)}
  .has-sub{width:100%;border-bottom:1px solid var(--line)}
  .has-sub::after{display:none}
  .sub-toggle{width:100%;justify-content:space-between;padding:14px 2px;font-size:16px}
  .sub-toggle .caret{transition:transform .18s}
  .sub-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .sub-menu{display:none;padding:0 0 10px 14px;margin:0 0 4px;gap:0;background:transparent}
  .has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu{display:none}
  .sub-menu.open,.has-sub:hover .sub-menu.open,.has-sub:focus-within .sub-menu.open{display:flex}
  .sub-menu a{padding:11px 10px;font-size:15px}
  .main-nav.open .nav-mobile-cta{display:flex;gap:10px;margin-top:16px}
  .main-nav.open .nav-mobile-cta .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding:13px 10px;font-size:14.5px}
  .nav-toggle span{transition:transform .2s,opacity .2s}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
.nav-mobile-cta{display:none}
@media(max-width:380px){
  .main-nav.open .nav-mobile-cta{flex-direction:column}
}


/* ==========================================================================
   Prijstabellen op mobiel
   Op smalle schermen moest je vroeger horizontaal scrollen om de prijs te
   zien — dat ziet lang niet iedereen. Onder 680px wordt daarom elke rij een
   kaartje: onderwerp als donkere kop, daaronder label/waarde-paren.
   Geen zijwaartse scroll meer nodig.
   ========================================================================== */
@media(max-width:680px){
  .table-wrap{overflow-x:visible;border-radius:0}
  .table-wrap .kosten-table{min-width:0}
  .kosten-table{display:block;width:100%;background:transparent;box-shadow:none;border-radius:0;font-size:15px}
  /* koprij visueel verbergen maar wel leesbaar houden voor screenreaders */
  .kosten-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .kosten-table tbody,.kosten-table tr,.kosten-table td{display:block;width:auto}
  .kosten-table tbody tr,
  .kosten-table tbody tr:nth-child(even){
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);margin:0 0 14px;overflow:hidden;
  }
  .kosten-table tbody tr:last-child{margin-bottom:0}
  .kosten-table td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:11px 16px;border-bottom:1px solid var(--line);text-align:left;
    white-space:normal;font-size:15px;
  }
  .kosten-table td::before{
    content:attr(data-label);flex:0 0 40%;min-width:0;
    font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-3);line-height:1.6;
  }
  .kosten-table td[data-label=""]::before,
  .kosten-table td:not([data-label])::before{display:none}
  .kosten-table td:first-child{
    display:block;background:var(--navy);color:#fff;font-weight:700;
    padding:13px 16px;border-bottom:0;font-size:15.5px;
  }
  .kosten-table td:first-child::before{display:none}
  .kosten-table td:last-child{border-bottom:0;text-align:right;font-weight:800;color:var(--ink)}
  .kosten-table .totaal td{background:var(--accent-soft)}
  .kosten-table .totaal td:first-child{background:var(--accent);color:#fff}
  .kosten-table td strong{font-weight:800}
}

/* Werkgebied: zones op de hubpagina */
.zone-blok{margin-bottom:34px}
.zone-blok:last-child{margin-bottom:0}
.zone-blok h3{font-size:20px;margin:0 0 6px}
.zone-blok .zone-intro{margin:0 0 14px;color:var(--ink-2);max-width:760px}
.zone-blok .regio-links{margin:0}
@media (max-width:640px){.zone-blok h3{font-size:18px}}