/* Dakdekker Midden-Nederland: aanvullingen op de template van zilver-volledige-website-1.
   De template (assets/zilver/css/style.css) levert de vorm; hier staan alleen onze eigen
   onderdelen: de funnel met radioknoppen, leesblokken, tabellen, Kort samengevat,
   de conversieband en de leesbaarheid van tekst op het oker accent. */
[hidden]{display:none!important}
:root{--dmn-ink:#1D3A34;--dmn-oker:#B23A48;--dmn-oker-diep:#8C2836;--dmn-groen:#2E9E5B}
.dmn-sprong{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--dmn-ink);color:#fff;padding:10px 14px}
.dmn-sprong:focus{left:12px;top:12px}

/* tekst op oker: altijd donker indigo (wit op oker is onleesbaar) */
.rucalc-pill.on,.rucalc-next,.rucalc-submit,.dps-cta-gold,.btn.dps-cta-gold,.hp-hs-btn{color:var(--dmn-ink)!important}
.rucalc-next svg,.rucalc-submit svg,.dps-cta-gold svg,.hp-hs-btn svg{stroke:var(--dmn-ink)!important}
.rucalc-card.on .rucalc-card-ic svg,.rucalc-card-check svg{stroke:var(--dmn-ink)!important}
.dps-cta-gold{background:linear-gradient(135deg,#C9505E,var(--dmn-oker))!important;border:0;box-shadow:0 12px 26px -10px rgba(178,58,72,.6)}

/* ---------- funnel in de stijl van de offertecalculator ---------- */
.dmn-contact{padding-top:48px}
.dmn-calc{max-width:760px;margin:0 auto}
.dmn-calc .stap{border:0;margin:0;padding:0;min-width:0;display:none}
.dmn-calc .stap.actief{display:block}
.dmn-calc legend.rucalc-q{padding:0;display:block;width:100%}
.hp-contact .dmn-calc .dmn-calc-kop{font-size:clamp(24px,3vw,32px);margin:6px 0 8px;color:var(--brand-dark)!important}
.dmn-calc .keuze{position:relative}
.dmn-calc .keuze input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.dmn-calc .keuze:focus-within{outline:3px solid rgba(178,58,72,.55);outline-offset:2px}
.dmn-calc .rucalc-card.aan{border-color:var(--bronze);background:color-mix(in srgb,var(--bronze) 6%,#fff)}
.dmn-calc .rucalc-card.aan .rucalc-card-ic{background:var(--bronze)}
.dmn-calc .rucalc-card.aan .rucalc-card-check{opacity:1;transform:scale(1)}
.dmn-calc .rucalc-pill.aan{background:var(--bronze);border-color:var(--bronze);color:var(--dmn-ink)}
.dmn-calc .rucalc-pill{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3}
.dmn-calc .rucalc-prog-track span{display:block;height:100%;width:17%;background:linear-gradient(90deg,var(--bronze),var(--bronze-light));border-radius:999px;transition:width .6s cubic-bezier(.22,.61,.36,1)}
.dmn-calc .rucalc-steps-lbl span{text-transform:none;letter-spacing:0;font-size:12.5px}
.dmn-calc .rucalc-nav:has(>[data-terug][hidden]) .rucalc-next{margin-left:auto}
.dmn-calc .rucalc-ta{width:100%;border:1.5px solid #e3eaf2;border-radius:13px;padding:13px 15px;font:inherit;font-size:14.5px;box-sizing:border-box;resize:vertical}
.dmn-toelichting{margin-top:14px}
.dmn-fout{background:#FCEBEB;color:#7A1C1C;border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:12px}
.dmn-fout a{color:#7A1C1C}
.dmn-gerust{text-align:center;margin:14px 0 0}
.honing{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.dmn-calc-usps{list-style:none;padding:0;margin:22px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:760px}
.dmn-calc-usps li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--dmn-ink);font-size:14.5px}
.dmn-calc-usps .check svg,.feature-list .check svg{stroke:var(--dmn-groen)}
html.no-js .dmn-calc .stap{display:block;margin-bottom:18px}
html.no-js .dmn-calc [data-volgende],html.no-js .dmn-calc [data-terug],html.no-js .dmn-calc [data-overslaan],html.no-js .dmn-calc .rucalc-progress{display:none}
html.no-js .dmn-calc .keuze input{position:static;opacity:1;width:auto;height:auto;pointer-events:auto;margin-right:8px}

/* ---------- subhero ---------- */
.subhero span.eyebrow.dmn-subhero-eyebrow:not(.hp-hs-eyebrow){display:inline-block;border:1px solid var(--dmn-oker)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;background:rgba(0,0,0,.28)!important;border-radius:999px;padding:6px 16px;letter-spacing:.12em;font-size:12.5px;margin:10px 0 12px}
.subhero .subhero-sub{max-width:760px;margin-left:auto;margin-right:auto}
.dmn-subhero-kaal{background:var(--brand-dark)}

/* ---------- leesblokken ---------- */
.dmn-smal{max-width:860px}
.dmn-intro{padding:44px 0 8px;background:var(--bg)}
.dmn-kort{background:#fff;border:1px solid var(--border);border-left:5px solid var(--dmn-oker);border-radius:16px;padding:22px 26px;margin-bottom:22px;box-shadow:var(--shadow-sm)}
.dmn-kort .eyebrow{margin-bottom:8px}
.dmn-kort p{margin:0 0 8px;font-size:17px;line-height:1.7;color:var(--text)}
.dmn-bijgewerkt{font-size:13px!important;color:var(--text-muted)!important;margin:0!important}
.dmn-lead{font-size:18.5px;line-height:1.75;color:var(--text-soft);margin:0}
.dmn-tekst h2{margin:0 0 16px}
.dmn-tekst p,.content-text p{font-size:16.5px;line-height:1.8;color:var(--text-soft)}
.dmn-tekst ul,.dmn-tekst ol,.content-text ul,.content-text ol{padding-left:1.2em;margin:0 0 16px;color:var(--text-soft);line-height:1.75}
.dmn-tekst li,.content-text li{margin-bottom:6px}
.dmn-tekst a,.content-text a,.dmn-kort a,.faq-a-inner a,.dmn-lead a{color:var(--dmn-oker-diep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.content-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
.tabelwrap{overflow-x:auto;margin:16px 0 22px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(29,58,52,.16),rgba(29,58,52,0)),radial-gradient(farthest-side at 100% 50%,rgba(29,58,52,.16),rgba(29,58,52,0)) 100% 0;background-repeat:no-repeat;background-size:44px 100%,44px 100%,15px 100%,15px 100%;background-attachment:local,local,scroll,scroll;background-color:#fff}  /* schaduwrand die meeschuift: laat op een smal scherm zien dat de tabel verder loopt (BOUWSPEC 12c) */
.tabelwrap table{width:100%;border-collapse:collapse;font-size:15px}
.tabelwrap th{background:var(--brand-dark);color:#fff;text-align:left;padding:11px 14px;font-weight:700;font-size:14px}
.tabelwrap td{padding:10px 14px;border-top:1px solid var(--border);vertical-align:top;color:var(--text)}
.tabelwrap tr:nth-child(even) td{background:#FBF8F1}
.tabelwrap td.getal,.tabelwrap th.getal{text-align:right;white-space:nowrap}
.tabelwrap table:has(td.getal:last-child) tr:first-child th:last-child{text-align:right}
.tabelwrap caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--text-muted);padding:8px 14px}
.faq-a-inner p{margin:0 0 8px}

/* ---------- conversieband midden in de pagina ---------- */
.dmn-tussen{padding:34px 0}
.dmn-tussen-in{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--brand-dark);border-radius:24px;padding:30px 36px;box-shadow:var(--shadow-lg)}
.dmn-tussen h2{color:#fff!important;font-size:clamp(22px,2.4vw,28px);margin:0 0 6px}
.dmn-tussen p{color:rgba(255,255,255,.8);margin:0;font-size:15px}
.dmn-tussen .btn{flex:none}

/* ---------- slot en links ---------- */
section.cta-band.dmn-slot{background:var(--bg-soft,#FAF7F0)}
section.cta-band.dmn-slot h2{color:var(--brand-dark)!important;font-size:clamp(26px,3vw,36px)}
section.cta-band.dmn-slot .cta-band-inner{background:#fff;border-radius:24px;padding:40px 44px;box-shadow:0 24px 60px -30px rgba(29,58,52,.35);border-top:4px solid var(--dmn-oker)}
.dmn-slot .dmn-slot-knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.dmn-verder{padding:72px 0;background:var(--bg-alt)}
.dmn-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dmn-links .seo-related-card h4{font-size:15px;margin:0}
/* kaartgrids: flex en gecentreerd, zodat een onvolledige laatste rij in het midden staat en er nooit een gat valt */
.hp-tips-grid.dmn-grid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:22px}
.hp-tips-grid.dmn-grid>*{flex:0 0 calc((100% - 44px)/3);max-width:calc((100% - 44px)/3)}
.hp-tips-grid.dmn-grid.k2>*{flex-basis:calc((100% - 22px)/2);max-width:calc((100% - 22px)/2)}
.hp-tips-grid.dmn-grid.k4>*{flex-basis:calc((100% - 66px)/4);max-width:calc((100% - 66px)/4)}
.dmn-hubgroep{padding:72px 0}
.dmn-hubgroep .container:first-child{text-align:center;margin-bottom:28px}
.dmn-juridisch h2{font-size:22px;margin:28px 0 10px}
.dmn-lijst{columns:3;list-style:none;padding:0}
.dmn-lijst li{break-inside:avoid;margin-bottom:6px}
.dmn-lijst a{color:var(--brand-dark);font-weight:600}
.dmn-steden{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1180px}
.dmn-steden li{flex:0 0 176px}
.dmn-steden a{display:block;text-align:center;padding:14px 10px;border-radius:14px;background:#fff;border:1px solid var(--border);color:var(--brand-dark);font-weight:700;text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s}
.dmn-steden a:hover{border-color:var(--dmn-oker);transform:translateY(-2px);box-shadow:var(--shadow)}
.dmn-steden small{display:block;font-weight:500;font-size:12.5px;color:var(--text-muted)}

/* ---------- vaste knoppen ---------- */
.dmn-aanvraag .agbot-launch{text-decoration:none}

/* ---------- homepage ---------- */
/* template-fout: section.hp-waarom h3 staat op wit, maar de kaarten zijn wit */
section.hp-waarom .hp-waarom-card h3{color:var(--dmn-ink)!important;-webkit-text-fill-color:var(--dmn-ink)!important}
section.hp-waarom .hp-waarom-head span.eyebrow:not(.hp-hs-eyebrow):not(.ig-eyebrow){background:rgba(201,80,94,.94)!important;border:1px solid var(--dmn-oker)!important;color:var(--dmn-ink)!important;-webkit-text-fill-color:var(--dmn-ink)!important}

.dmn-hero-spoed{display:inline-block;align-self:center;margin:0 0 0 24px;color:#fff;font-weight:600;font-size:15px;text-decoration:underline;text-decoration-color:var(--dmn-oker);text-underline-offset:5px}
.dmn-hero-spoed:hover{color:#C9505E}
.dmn-sectie-onder{max-width:680px;margin:0 auto 34px;text-align:center;color:var(--text-soft);font-size:17px}
.dmn-meer{text-align:center;margin-top:40px}
.dmn-duo-sec{padding:88px 0;background:var(--bg-alt)}
.dmn-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1040px;margin:0 auto}
.dmn-duo-kaart{background:#fff;border:1px solid var(--border);border-radius:24px;padding:38px 32px;text-align:center;box-shadow:0 24px 60px -34px rgba(29,58,52,.35)}
.dmn-duo-kaart h3{font-size:clamp(20px,2vw,24px);margin:0 0 18px;color:var(--brand-dark)}
.dmn-duo-kaart ul{list-style:none;padding:0;margin:0 auto 26px;width:fit-content;text-align:left}
.dmn-duo-kaart li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;color:var(--text);font-size:15.5px}
.dmn-duo-kaart .check{flex:none;display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:rgba(46,158,91,.12)}
.dmn-duo-kaart .check svg{width:13px;height:13px;stroke:var(--dmn-groen)}
.dmn-duo-kaart .btn{display:inline-flex}
.dmn-duo-link{display:block;margin-top:14px;font-size:14.5px;color:var(--dmn-oker-diep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.dmn-duo-kaart.dmn-duo-spoed{background:var(--brand-dark);border-color:var(--brand-dark)}
.dmn-duo-kaart.dmn-duo-spoed h3{color:#fff!important}
.dmn-duo-kaart.dmn-duo-spoed li{color:rgba(255,255,255,.9)}
.dmn-duo-kaart.dmn-duo-spoed .check{background:rgba(46,158,91,.25)}
.dmn-duo-kaart.dmn-duo-spoed .dmn-duo-link{color:#C9505E}
.dmn-plaatsen{padding:88px 0}
.dmn-regio{text-align:center;margin-top:24px;color:var(--text-soft)}
.dmn-regio a{color:var(--dmn-oker-diep);font-weight:600}
.dmn-tekst>.eyebrow{margin-bottom:10px}
.dmn-bedankt-usps{list-style:none;padding:0;margin:0 0 28px}
.dmn-bedankt-usps li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--dmn-ink)}
.dmn-overzicht h2{font-size:22px;margin:34px 0 12px}
.hp-tips-tag{background:rgba(178,58,72,.14)!important;color:var(--dmn-oker-diep)!important}
/* ---------- hero met het formulier rechts (alleen desktop, vanaf 1024px) ----------
   De HTML blijft hero + formulierblok onder elkaar, zodat mobiel en tablet exact
   blijven zoals ze waren. Op desktop leggen we beide in dezelfde gridcel: de foto
   vult de hele hero, het formulier staat als strakke kaart rechts bovenin. */
.dmn-hero-usps{display:none}
.rucalc-card-lbl .dmn-lbl-kort{display:none}
@media (min-width:1024px){
  html body .nav::before{height:calc(100% + 34px)}
  .dmn-hero{display:grid;grid-template-columns:minmax(0,1fr);position:relative;background:#122520}
  .dmn-hero>section{grid-area:1/1;min-width:0}
  .dmn-hero>.subhero,.dmn-hero>.hp-hero-slider{position:relative;z-index:1}
  .dmn-hero>.dmn-contact{position:relative;z-index:3;background:none!important;padding:164px 0 72px!important;display:flex;align-items:center;pointer-events:none}
  .dmn-hero>.dmn-contact::before,.dmn-hero>.dmn-contact::after{display:none!important}
  .dmn-hero>.dmn-contact>.container.container{width:100%;max-width:1264px!important;margin:0 auto;padding:0 32px;display:flex;justify-content:flex-end}
  .dmn-hero .hp-calc-v2{width:470px;flex:0 0 470px;padding:26px 28px 22px;border-radius:24px;pointer-events:auto;
    box-shadow:0 40px 90px -28px rgba(8,6,20,.7),0 0 0 1px rgba(255,255,255,.06)}
  .dmn-hero .dmn-calc-usps{display:none}

  /* tekst links */
  .dmn-hero>.subhero{min-height:0;height:auto!important;max-height:none!important;padding:164px 0 72px;align-items:center}
  .dmn-hero .subhero-content{width:100%;max-width:1264px;margin:0 auto;padding:0 540px 0 32px;text-align:left}
  .dmn-hero .subhero-content .breadcrumb{justify-content:flex-start}
  .dmn-hero .subhero h1{text-align:left!important;margin-left:0!important;margin-right:0!important;max-width:640px;font-size:clamp(40px,3.9vw,58px)}
  .dmn-hero .subhero-sub{text-align:left;margin-left:0!important;max-width:600px;font-size:18px}
  .dmn-hero .dmn-subhero-eyebrow{margin-left:0}
  .dmn-hero-usps{display:grid;gap:12px;list-style:none;padding:0;margin:26px 0 0}
  .dmn-hero-usps li{display:flex;align-items:center;gap:12px;color:#fff;font-weight:600;font-size:16px;text-align:left}
  .dmn-hero-usps .check{flex:none;display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;background:rgba(46,158,91,.22)}
  .dmn-hero-usps .check svg{width:14px;height:14px;stroke:#5FD08E}

  /* homepage */
  .dmn-hero-home>.hp-hero-slider{min-height:min(100svh,940px)}
  .dmn-hero-home .hp-hs-static-content.hp-hs-static-content{position:relative!important;left:auto!important;top:auto!important;transform:none!important;max-width:1264px!important;width:100%;padding:164px 540px 72px 32px!important;margin:0 auto!important;align-self:center}
  .dmn-hero-home .hp-hs-title{font-size:clamp(40px,3.9vw,58px)!important;max-width:660px}
  .dmn-hero-home .hp-hs-desc{max-width:600px}
  .dmn-hero-home .hp-hs-btn,.dmn-hero-home .hp-hero-usps{display:none!important}
  .dmn-hero-home .dmn-hero-spoed{margin:0}
  .dmn-hero-home .dmn-hero-usps{flex-basis:100%;margin-top:24px}

  /* de kaart zelf: compact en rustig */
  .dmn-hero .rucalc-head{margin-bottom:16px;text-align:center}
  .dmn-hero .rucalc-head .eyebrow{margin-bottom:10px}
  .dmn-hero .dmn-calc .dmn-calc-kop{font-size:27px!important;margin:0 0 6px}
  .dmn-hero .hp-calc-sub{font-size:14px;line-height:1.5;margin:0}
  .dmn-hero .rucalc-progress{margin-bottom:16px}
  .dmn-hero .rucalc-q{font-size:17px;margin-bottom:12px}
  .dmn-hero .rucalc-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .dmn-hero .rucalc-card{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;padding:14px 6px 12px;min-height:96px}
  .dmn-hero .rucalc-card-lbl{font-size:13.5px;line-height:1.3}
  .dmn-hero .rucalc-card-lbl .dmn-lbl-lang{display:none}
  .dmn-hero .rucalc-card-lbl .dmn-lbl-kort{display:inline}
  .dmn-hero .rucalc-card-check{position:absolute;top:8px;right:8px}
  .dmn-hero .rucalc-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dmn-hero .rucalc-pill{padding:12px 10px;font-size:14px;min-height:60px}
  .dmn-hero .rucalc-pills>.keuze:last-child:nth-child(odd){grid-column:1/-1}
  .dmn-hero .rucalc-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dmn-hero .rucalc-nav{margin-top:16px}
  .dmn-hero .dmn-toelichting{margin-top:10px}
  .dmn-hero .rucalc-ta{min-height:64px}
  .dmn-hero .dmn-gerust{font-size:12.5px;margin-top:10px}
  /* alle vraagstappen even hoog, de knoppen onderaan op dezelfde plek: de kaart verspringt niet */
  .dmn-hero .dmn-calc .stap .keuzes{min-height:219px;align-content:center}
  /* de laatste stap zo kort mogelijk: de toelichting is niet verplicht en valt op desktop weg */
  .dmn-hero .dmn-toelichting{display:none}
}
/* zachte overgang tussen de stappen, alleen doorzichtigheid, geen verspringing */
@keyframes dmn-stap-in{from{opacity:0}to{opacity:1}}
.dmn-calc .stap.actief{animation:dmn-stap-in .32s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){.dmn-calc .stap.actief{animation:none}}

@media (max-width:900px){.dmn-duo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  /* lange leestekst en tabellen blijven links, net als op desktop */
  .dmn-tekst,.dmn-tekst p,.dmn-tekst h2,.dmn-tekst li,.content-text,.content-text p,.content-text h2,.dmn-kort,.dmn-kort p,.dmn-lead{text-align:left!important}
  .tabelwrap table{min-width:600px}
  .tabelwrap td,.tabelwrap th{text-align:left;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important}
  .tabelwrap td.getal,.tabelwrap th.getal{text-align:right}
  .dmn-steden li{flex:0 0 calc(50% - 6px)}
  .dmn-steden li:last-child:nth-child(odd){flex-basis:100%}
  .dmn-hero-spoed{margin:16px 0 0}
  .dmn-home-hero .hp-hs-img{background-image:url(/assets/foto/hero-home-mobiel.webp)!important}
  .dmn-duo-sec,.dmn-plaatsen{padding:64px 0}
  .dmn-duo-kaart{padding:30px 22px}
}

@media (max-width:900px){
  .dmn-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-tips-grid.dmn-grid>*,.hp-tips-grid.dmn-grid.k4>*{flex-basis:calc((100% - 22px)/2);max-width:calc((100% - 22px)/2)}
  .dmn-tussen-in{flex-direction:column;align-items:flex-start;padding:26px 22px}
  .dmn-slot .dmn-slot-knoppen{justify-content:flex-start}
  .dmn-lijst{columns:2}
}
@media (max-width:640px){
  .dmn-links{grid-template-columns:minmax(0,1fr)}
  .hp-tips-grid.dmn-grid>*,.hp-tips-grid.dmn-grid.k2>*,.hp-tips-grid.dmn-grid.k4>*{flex-basis:100%;max-width:100%}
  .dmn-lijst{columns:1}
  .dmn-kort{padding:18px}
}
@media print{
  .hp-topbar,.nav,.mobile-menu,.hp-contact,.sticky-cta,.agbot,.footer,.dmn-tussen,.cta-band{display:none!important}
}

/* ---------- scroll-animaties uit de template ---------- */

/* === {{BEDRIJFSNAAM}} animatie v3, schone slide, woord-reveal, geen flip === */
html.agx .agf{opacity:0;will-change:transform,opacity}
html.agx .agf.in{opacity:1}
/* tekst van links, rust naar plek, iets trager zodat het goed zichtbaar is */
html.agx .agf-l{transform:translateX(-34px);transition:opacity .75s cubic-bezier(.33,.05,.2,1),transform .85s cubic-bezier(.33,.05,.2,1)}
html.agx .agf-l.in{transform:none}
/* beeld van rechts */
html.agx .agf-r{transform:translateX(34px);transition:opacity .78s cubic-bezier(.33,.05,.2,1),transform .88s cubic-bezier(.33,.05,.2,1)}
html.agx .agf-r.in{transform:none}html.agx .agf-up{transform:translateY(26px);transition:opacity .75s cubic-bezier(.33,.05,.2,1),transform .85s cubic-bezier(.33,.05,.2,1)}html.agx .agf-up.in{transform:none}
/* grids/kolommen: kinderen glijden clean van links na elkaar (GEEN 3D-flip) */
html.agx .agf-flip > *{opacity:0;transform:translateX(-26px);will-change:transform,opacity}
html.agx .agf-flip.in > *{opacity:1;transform:none;transition:opacity .72s cubic-bezier(.33,.05,.2,1),transform .8s cubic-bezier(.33,.05,.2,1)}
html.agx .agf-flip.in > *:nth-child(1){transition-delay:0s}
html.agx .agf-flip.in > *:nth-child(2){transition-delay:.09s}
html.agx .agf-flip.in > *:nth-child(3){transition-delay:.18s}
html.agx .agf-flip.in > *:nth-child(4){transition-delay:.27s}
html.agx .agf-flip.in > *:nth-child(5){transition-delay:.36s}
html.agx .agf-flip.in > *:nth-child(6){transition-delay:.45s}
html.agx .agf-flip.in > *:nth-child(7){transition-delay:.54s}
html.agx .agf-flip.in > *:nth-child(8){transition-delay:.63s}
html.agx .agf-flip.in > *:nth-child(n+9){transition-delay:.72s}
/* PROJECTEN-BENTO: keyframe-glide regelt richting + timing (zie hieronder).
 Reset de algemene stagger-transform zodat alleen de keyframe telt. */
html.agx .hp-port-grid.agf-flip > *{opacity:0;transform:none;transition:none}
html.agx .hp-port-grid.agf-flip.in > *{opacity:1}
/* Keyframe-glide: links-materialen van links, rechts-materialen van rechts.
 Animatie wint van de hover-transition (geen 0.35s-snap meer). */
@keyframes portGlideL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes portGlideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
html.agx .hp-port-grid.agf-flip.in > *:nth-child(1){animation:portGlideL .85s cubic-bezier(.33,.05,.2,1) 0s both}
html.agx .hp-port-grid.agf-flip.in > *:nth-child(3){animation:portGlideL .85s cubic-bezier(.33,.05,.2,1) .18s both}
html.agx .hp-port-grid.agf-flip.in > *:nth-child(5){animation:portGlideL .85s cubic-bezier(.33,.05,.2,1) .36s both}
html.agx .hp-port-grid.agf-flip.in > *:nth-child(2){animation:portGlideR .85s cubic-bezier(.33,.05,.2,1) .09s both}
html.agx .hp-port-grid.agf-flip.in > *:nth-child(4){animation:portGlideR .85s cubic-bezier(.33,.05,.2,1) .27s both}
html.agx .hp-port-grid.agf-flip.in > *:nth-child(6){animation:portGlideR .85s cubic-bezier(.33,.05,.2,1) .45s both}
/* WOORD-REVEAL, losse woorden in koppen zweven los in */
html.agx .agf-words{opacity:1}
html.agx .agf-words .agf-word{display:inline-block;opacity:0;transform:translateY(.5em) translateX(-10px);transition:opacity .5s cubic-bezier(.33,.05,.2,1),transform .6s cubic-bezier(.33,.05,.2,1);will-change:transform,opacity}
html.agx .agf-words.in .agf-word{opacity:1;transform:none}
/* Header smooth inladen */
@keyframes agNavDrop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@keyframes agFade{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
html.agx .nav{animation:agNavDrop .85s cubic-bezier(.19,1,.22,1) both}
html.agx .nav .nav-logo{animation:agFade .7s cubic-bezier(.19,1,.22,1) .25s both}
html.agx .nav .nav-links>li{animation:agFade .6s cubic-bezier(.19,1,.22,1) both}
html.agx .nav .nav-links>li:nth-child(1){animation-delay:.30s}
html.agx .nav .nav-links>li:nth-child(2){animation-delay:.37s}
html.agx .nav .nav-links>li:nth-child(3){animation-delay:.44s}
html.agx .nav .nav-links>li:nth-child(4){animation-delay:.51s}
html.agx .nav .nav-links>li:nth-child(5){animation-delay:.58s}
html.agx .nav .nav-cta{animation:agFade .7s cubic-bezier(.19,1,.22,1) .6s both}
/* Hero entree wordt class-based geregeld in style.css?v213 (hero-line-in) */
@media (prefers-reduced-motion: reduce){
 html.agx .agf,html.agx .agf-l,html.agx .agf-r,html.agx .agf-flip>*,
 html.agx .nav,html.agx .nav *,html.agx .hp-hs-static-content>*{animation:none!important}
}

/* nav: de template zet een gradient van 150px op een balk van 93px, dat gaf een harde rand */
html body nav.nav.nav:not(.dmn-x):not(.dmn-y){background:none!important}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;background:linear-gradient(to bottom,rgba(18,37,32,.62),rgba(18,37,32,0));pointer-events:none;z-index:-1}
/* Adresaanvulling en foto's in het offerteformulier (bij adres-foto.js) */
.veld,.rucalc-f,.foto-veld{position:relative}
.adres-suggesties{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;padding:6px 0;list-style:none;background:#fff;border:1px solid var(--lijn,#e5e0d8);border-radius:10px;box-shadow:0 10px 26px -8px rgba(0,0,0,.25);max-height:240px;overflow:auto}
.adres-suggesties li{padding:10px 14px;font-size:15px;cursor:pointer;color:var(--ink,#17211C)}
.adres-suggesties li:hover{background:var(--accent-licht,#f6efe6)}
.veld input[type="file"]{padding:10px 0;font-size:14px}
.foto-rij{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.foto-kaart{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--lijn,#e5e0d8);background:#f6f6f6}
.foto-kaart img{width:100%;height:100%;object-fit:cover;display:block}
.foto-weg{position:absolute;top:2px;right:2px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:16px;line-height:22px;cursor:pointer;padding:0}
.foto-melding{margin:6px 0 0;font-size:13px;color:var(--ink-zacht,#6b6259)}
.foto-melding:empty{display:none}
.foto-knop{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1.5px dashed var(--accent,#8C2836);border-radius:10px;background:#fff;color:var(--accent-diep,var(--accent,#8C2836));font-size:15px;font-weight:700;cursor:pointer}
.foto-knop:hover{background:var(--accent-licht,#f6efe6)}
.foto-knop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.foto-knop:focus-within{outline:2px solid var(--accent,#8C2836);outline-offset:2px}

/* Lange samenstellingen (Dakonderhoudskalender, Schoorsteenrenovatie) braken op
   375px midden in het woord af. Koppen schalen daarom mee met de schermbreedte
   en mogen netjes afbreken met een streepje in plaats van zomaar midden in een
   lettergreep (22-09-2026). */
@media (max-width: 640px) {
  .subhero h1, .dmn-hero h1 { font-size: clamp(25px, 7.2vw, 34px); line-height: 1.16; }
  h1, h2, h3, .hp-hs-title { overflow-wrap: break-word; hyphens: auto; }
  .dmn-tekst h2, .section-header h2 { font-size: clamp(22px, 6.2vw, 28px); }
}

/* De hero-pill met vier segmenten liep op 390px over drie regels en werd daardoor
   een groot vlak. Kleiner lettertype en strakkere letterafstand houdt hem op twee
   regels, zonder de tekst zelf te veranderen (22-09-2026). */
@media (max-width: 480px) {
  .hp-hs-eyebrow { font-size: 11px; letter-spacing: .10em; padding: 10px 16px; line-height: 1.5; }
}

/* 16-10-2026: adreslijst loopt mee in de pagina in plaats van over knoppen te zweven */
.adres-suggesties{position:static!important;margin:6px 0 0!important;max-height:none!important;box-shadow:none!important;text-align:left}
.adres-suggesties li{min-height:44px;display:flex;align-items:center}
.adres-suggesties li:nth-child(n+5){display:none}