/* 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:#231E3A;--dmn-oker:#D9A21B;--dmn-oker-diep:#8A6207;--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,#EDBE45,var(--dmn-oker))!important;border:0;box-shadow:0 12px 26px -10px rgba(217,162,27,.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(217,162,27,.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:#fff}
.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(35,30,58,.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(237,190,69,.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:#EDBE45}
.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(35,30,58,.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:#EDBE45}
.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(217,162,27,.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:#16122A}
  .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(22,18,42,.62),rgba(22,18,42,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,#1f1a15)}
.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,#B5762F);border-radius:10px;background:#fff;color:var(--accent-diep,var(--accent,#B5762F));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,#B5762F);outline-offset:2px}

/* 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}
/* KNOP EN TIKMAAT (06-11-2026): Volgende gecentreerd, keuzes minimaal 44px */
.dmn-calc .rucalc-nav{justify-content:center}
.dmn-calc .rucalc-nav:has(>[data-terug][hidden]) .rucalc-next{margin-left:0}
.dmn-calc label:has(input[type=radio]){min-height:44px}