:root{
  --oranje:#d93600;
  --oranje-donker:#c52f00;
  --oranje-licht:#fff0eb;
  --tekst:#222;
  --tekst-zacht:#475467;
  --lijn:#e6e6e6;
  --vlak:#fafafa;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--tekst);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1080px;margin:0 auto;padding:0 24px}

header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn);z-index:50;transition:box-shadow .25s}
header.gescrold{box-shadow:0 6px 24px rgba(34,34,34,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;position:relative}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:.02em}
.logo-dot{width:28px;height:28px;border-radius:50%;background:var(--oranje);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14.5px;color:var(--tekst-zacht)}
.nav-links a{white-space:nowrap}
.nav-links a:hover{color:var(--tekst)}
.nav-links a.actief{color:var(--oranje-donker);font-weight:600}
.knop{display:inline-block;background:var(--oranje);color:#fff;font-weight:600;font-size:15px;padding:13px 28px;border-radius:10px;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 6px 18px rgba(255,70,0,.22)}
.knop:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,70,0,.3)}
.knop:hover{background:var(--oranje-donker)}
.knop-klein{padding:10px 20px;font-size:14px;white-space:nowrap;flex-shrink:0}
.knop-wit{background:#fff;color:var(--oranje-donker)}
.knop-wit:hover{background:var(--oranje-licht)}
.knop-rand{display:inline-block;border:1.5px solid #ddd;color:var(--tekst);font-weight:600;font-size:15px;padding:12px 26px;border-radius:9px;transition:border-color .15s}
.knop-rand:hover{border-color:var(--tekst-zacht)}
.menu-knop{display:none;background:none;border:none;font-size:26px;cursor:pointer;color:var(--tekst)}

.hero{text-align:center;padding:64px 0 44px;max-width:720px;margin:0 auto;position:relative}
.hero::before{content:"";position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:min(760px,96vw);height:420px;background:radial-gradient(ellipse at center,rgba(255,70,0,.055),transparent 65%);pointer-events:none;z-index:-1}
.badge{display:inline-block;background:var(--oranje);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:8px 18px;border-radius:999px;margin-bottom:22px}
h1{font-size:clamp(30px,5vw,46px);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.sub{font-size:18px;color:var(--tekst-zacht);margin-bottom:32px}
.hero-knoppen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.trust{display:flex;justify-content:center;gap:42px;flex-wrap:wrap;padding:18px 0 40px;font-size:14px;color:var(--tekst-zacht)}
.trust span{display:flex;align-items:center;gap:8px}
.trust b{color:var(--oranje);font-size:17px;font-weight:400}

h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.sectie{padding:60px 0}
.sectie-kop{text-align:center;max-width:640px;margin:0 auto 38px}
.sectie-kop p{color:var(--tekst-zacht);font-size:16.5px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--oranje-donker);margin-bottom:10px}

.kaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;max-width:960px;margin:0 auto}
.kaarten.kaarten-compact{max-width:640px;gap:0 56px}
.lijst-wrap-center{text-align:center}
.lijst-wrap-center .lijst{display:inline-block;text-align:left}
.center-stack{max-width:420px;margin:0 auto;text-align:center;display:grid;gap:36px}
.center-stack h3{font-size:18.5px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em}
.center-stack h3::before{content:"";display:block;width:24px;height:3px;background:var(--oranje);border-radius:2px;margin:0 auto 14px}
.center-stack .lijst{display:inline-block;text-align:left}
@media (max-width:760px){.kaarten{grid-template-columns:1fr;gap:0}}
.kaart{padding:30px 0 26px;border-top:1px solid var(--lijn);background:none}
.kaart h3::before{content:"";display:block;width:24px;height:3px;background:var(--oranje);border-radius:2px;margin-bottom:14px}
.kaart .icoon{font-size:26px;color:var(--oranje);margin-bottom:14px;display:block}
.kaart h3{font-size:18.5px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.kaart p{font-size:15px;color:var(--tekst-zacht);line-height:1.65}

.vlak-sectie{background:var(--vlak);border-top:1px solid #eee;border-bottom:1px solid #eee}
.rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.rol{background:none;border-top:1px solid #d8d4d0;padding:24px 36px 24px 4px;text-align:left;position:relative;transition:border-color .2s}
.rol::after{content:"\2192";position:absolute;right:6px;top:24px;font-size:20px;color:var(--oranje);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.rol:hover::after{opacity:1;transform:none}
.rol:hover h3{color:var(--oranje-donker)}
.rol h3{font-size:17.5px;font-weight:700;margin-bottom:4px;transition:color .2s}
.rol p{font-size:13.5px;color:var(--tekst-zacht)}

.stappen{display:grid;gap:0;max-width:780px;margin:0 auto}
.stap{display:grid;grid-template-columns:96px 1fr;column-gap:30px;row-gap:8px;align-items:start;padding:34px 0;border-bottom:1px solid var(--lijn);text-align:left}
.stap-nr{grid-column:1;grid-row:1/span 2}
.stap h3{grid-column:2;margin-bottom:0}
.stap p{grid-column:2}
.stap:last-child{border-bottom:0}
.stap-nr{font-size:64px;font-weight:800;line-height:1;color:var(--oranje);opacity:.22;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stap h3{font-size:19px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.stap p{font-size:15.5px;color:var(--tekst-zacht);max-width:560px}
.stap-vb{background:#fff5f0;border-left:3px solid var(--oranje);padding:12px 16px;border-radius:8px;margin-top:12px!important;font-size:14.5px!important;color:#5a3a28!important}
.stap-vb strong{color:var(--oranje);font-weight:700}

.sectie-smal{padding-top:32px;padding-bottom:32px}
.uitleg-blok{background:linear-gradient(135deg,#fff5f0 0%,#ffeadd 100%);border-radius:16px;padding:28px 32px;max-width:820px;margin:0 auto 36px;text-align:left}
.uitleg-blok h2{font-size:22px;margin:0 0 12px;color:var(--oranje)}
.uitleg-blok p{font-size:16px;line-height:1.6;margin:0;color:var(--tekst)}

.wie-doet-wat{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.wdw-kolom{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:24px 26px}
.wdw-kolom.wdw-drop{border-color:var(--oranje);background:#fffaf6}
.wdw-kolom h3{font-size:17px;margin:0 0 14px;font-weight:700}
.wdw-kolom.wdw-drop h3{color:var(--oranje)}
.wdw-kolom ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.wdw-kolom li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.45;color:var(--tekst-zacht)}
.wdw-kolom li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:#cbd5d1}
.wdw-kolom.wdw-drop li::before{background:var(--oranje)}
@media (max-width:760px){.wie-doet-wat{grid-template-columns:1fr}.uitleg-blok{padding:22px 22px}}

.lijst{list-style:none;display:grid;gap:14px;max-width:640px;margin:0 auto}
.lijst li{position:relative;padding-left:22px;font-size:15.5px}
.lijst li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--oranje)}
.lijst b{font-weight:700}
.case-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;max-width:1040px;margin:0 auto 44px}
.case-foto.foto-enkel{max-width:620px;margin-left:auto;margin-right:auto;margin-bottom:44px}
.case-foto{margin:0}
.case-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;display:block;box-shadow:0 18px 40px rgba(0,0,0,.16)}
.case-foto figcaption{margin-top:12px;font-size:13px;color:var(--tekst-zacht);text-align:center}
@media(max-width:760px){.case-fotos{grid-template-columns:1fr;gap:28px}}

/* Opbrengstcalculator */
.calc{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;max-width:1040px;margin:0 auto;background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:34px;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.calc-row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px 0;border-bottom:1px solid #f0eeeb;font-size:14.5px;color:var(--tekst)}
.calc-row:last-child{border-bottom:0}
.calc-row span:first-child{font-weight:600}
.calc-row .calc-val{color:var(--oranje-donker);font-weight:700;font-variant-numeric:tabular-nums}
.calc-row input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--oranje);margin-top:4px}
.calc-output{background:linear-gradient(180deg,#fff5f0 0%,#ffeadd 100%);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:8px}
.calc-output-label{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--tekst-zacht);font-weight:700;margin:0}
.calc-output-bedrag{font-size:44px;font-weight:800;color:var(--oranje-donker);letter-spacing:-.02em;line-height:1.05;margin:2px 0 14px;font-variant-numeric:tabular-nums}
.calc-detail{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px;font-size:14px}
.calc-detail li{display:flex;justify-content:space-between;gap:12px;color:var(--tekst)}
.calc-detail li span:last-child{font-weight:700;font-variant-numeric:tabular-nums}
.calc-detail li.calc-kost{padding-top:8px;border-top:1px dashed var(--lijn);color:var(--tekst-zacht)}
.calc-detail li.calc-kost span:last-child{color:#c44}
.calc-noot{font-size:12.5px;color:var(--tekst-zacht);line-height:1.55;margin:0 0 14px}
.calc-output .knop{align-self:flex-start;font-size:14.5px}
@media(max-width:760px){.calc{grid-template-columns:1fr;gap:24px;padding:22px}.calc-output-bedrag{font-size:36px}}

.cta-band{background:#211d1b;color:#fff;padding:52px 0}
.cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta-band .container>div{flex:1 1 0;min-width:300px;max-width:700px}
.cta-band .knop,.cta-band .knop-wit{flex:0 0 auto;white-space:nowrap}
.cta-band h2{font-size:clamp(22px,2.6vw,30px)}
.cta-band h2{color:#fff;margin-bottom:6px}
.cta-band p{color:#b8b1ac;font-size:15.5px}

footer{padding:72px 0 32px;background:var(--oranje);font-size:14.5px;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.35fr .7fr .85fr;gap:56px;margin-bottom:44px;align-items:start}
.footer-grid h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer-intro{font-size:21px;font-weight:800;color:#fff;line-height:1.35;margin-bottom:14px;letter-spacing:-.01em}
.footer-grid a{display:block;padding:3px 0}
.footer-grid a{color:#fff}
.footer-grid a:hover{color:#fff;text-decoration:underline}
.footer-onder{border-top:1px solid rgba(255,255,255,.28);padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
.footer-onder a{color:#fff;text-decoration:underline}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.contact-kaart{border:1px solid var(--lijn);border-radius:14px;padding:30px}
.contact-kaart h3{font-size:17px;font-weight:700;margin-bottom:14px}
.contact-kaart p{font-size:15px;color:var(--tekst-zacht);margin-bottom:10px}
.contact-kaart a{color:var(--oranje-donker);font-weight:600}
.contact-kaart a.knop,a.knop{color:#fff}
a.knop.knop-wit{color:var(--oranje-donker)}
a.knop.knop-wit:hover{color:var(--oranje-donker)}

@media (max-width:1150px){
  /* Links uitlijnen, niet centreren. Het uitklapmenu is volle breedte en
     staat dus links, terwijl de losse items zonder deze regel door
     align-items:center in het midden belandden. Dat gaf een menu waarvan de
     bovenste helft links stond en de onderste helft gecentreerd. */
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--lijn);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px 24px 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 0}
  .menu-knop{display:block}
}
@media (max-width:760px){
  .nav .knop{display:none}
  .footer-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-onder{flex-direction:column;align-items:center;text-align:center}
  .cta-band .container{flex-direction:column;text-align:center}
}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--oranje);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--oranje);color:#fff;padding:10px 18px;z-index:100;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}

.faq{max-width:680px;margin:0 auto}
.faq details{border-bottom:1px solid var(--lijn);background:none}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;padding:22px 4px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--oranje);font-weight:400;flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 4px 22px;font-size:15px;color:var(--tekst-zacht);max-width:600px}

.mobiel-balk{display:none}
@media (max-width:760px){
  .mobiel-balk{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--lijn);border-top:1px solid var(--lijn)}
  .mobiel-balk a{background:#fff;color:var(--tekst);font-weight:600;font-size:14px;text-align:center;padding:14px 8px}
  .mobiel-balk a.primair{background:var(--oranje);color:#fff}
  .mobiel-balk a:only-child{grid-column:1 / -1}
  body{padding-bottom:50px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.telefoons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;max-width:760px;margin:0 auto}
.telefoon{text-align:center}
.telefoon img{border-radius:22px;border:1px solid var(--lijn);box-shadow:0 8px 28px rgba(0,0,0,.08);width:100%;max-width:230px;margin:0 auto}
.telefoon p{font-size:13.5px;color:var(--tekst-zacht);margin-top:12px}

.trust span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oranje);flex:0 0 auto}

.sectie-kop .eyebrow::before{content:"";display:block;width:38px;height:4px;background:var(--oranje);border-radius:2px;margin:0 auto 14px}


.nav-links a.nav-hot{background:var(--oranje);color:#fff;font-weight:600;padding:7px 15px;border-radius:999px;line-height:1;transition:background .15s}
.nav-links a.nav-hot:hover{background:var(--oranje-donker);color:#fff}
@media (max-width:1150px){.nav-links a.nav-hot{align-self:center;margin:8px 0;padding:8px 18px}}

#hero-rotator{transition:opacity .4s ease;min-height:2.3em}
#hero-rotator.hero-fade{opacity:0}

/* Het volledige menu (9 items sinds de Kerstmarkt-knop) past pas boven 1150px
   naast logo en knop, en dan alleen in de compacte maat: op de ruimere maat
   (font 14.5, gap 22) liep het menu zelfs op 1440px nog over logo en knop heen.
   Daarom geldt onder 1151px het uitklapmenu en daarboven overal de compacte
   maat, met het menu in de flow gecentreerd zodat niets kan overlappen. */
@media (min-width:1151px){
  .nav-links{flex:1 1 auto;justify-content:center;margin:0 16px;min-width:0;gap:15px;font-size:13.8px}
  .nav-links a.nav-hot{padding:6px 12px}
  header .knop-klein{padding:9px 15px;font-size:13.5px}
}



.contact-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.contact-blok{background:var(--vlak);border-radius:20px;padding:38px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .2s}
.contact-blok:hover{transform:translateY(-3px)}
.contact-blok .knop,.contact-blok .knop-rand{margin-top:auto}
.contact-icoon{width:54px;height:54px;border-radius:50%;background:var(--oranje-licht);color:var(--oranje-donker);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.contact-blok h2,.contact-blok h3{font-size:17.5px;font-weight:700}
.contact-blok p{font-size:14.5px;color:var(--tekst-zacht);margin-bottom:14px}
.knop-vol{width:100%;text-align:center}
a.knop{color:#fff}
a.knop.knop-wit{color:var(--oranje-donker)}
a.knop.knop-wit:hover{color:var(--oranje-donker)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Stagger: kaarten en stappen komen na elkaar binnen */
.kaarten .kaart:nth-child(2),.stappen .stap:nth-child(2){transition-delay:.09s}
.kaarten .kaart:nth-child(3),.stappen .stap:nth-child(3){transition-delay:.18s}
.kaarten .kaart:nth-child(4){transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.kaarten .kaart,.stappen .stap{transition-delay:0s}}

/* Loopband: doorlopende USP-balk */
.loopband{overflow:hidden;background:linear-gradient(135deg,#fff5f0 0%,#ffeadd 100%);border:1px solid #ffd9c5;border-radius:14px;padding:16px 0;margin:20px 0 40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.loopband-baan{display:flex;width:max-content}
.loopband-groep{display:flex;align-items:center;gap:46px;padding-right:46px;animation:loopband 30s linear infinite}
.loopband span{display:flex;align-items:center;gap:12px;font-size:14.5px;color:#7c5138;white-space:nowrap}
@media (max-width:760px){.loopband{display:none}}
.loopband svg{flex:none}
@keyframes loopband{to{transform:translateX(-100%)}}
.loopband:hover .loopband-groep{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.loopband-groep{animation:none}.loopband{mask-image:none;-webkit-mask-image:none}}

/* Rollen-showcase: verschuivende panelen */
.rollen-show{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:stretch}
.rollen-tabs{display:flex;flex-direction:column;gap:2px}
.rollen-tab{background:none;border:none;border-left:2px solid var(--lijn);padding:13px 18px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.3;color:var(--tekst-zacht);text-align:left;cursor:pointer;transition:color .2s,border-color .2s}
.rollen-tab:hover{color:var(--tekst)}
.rollen-tab.actief{color:var(--oranje-donker);border-left-color:var(--oranje)}
.rollen-venster{overflow:hidden;border-radius:14px;background:#fff;border:1px solid var(--lijn)}
.rollen-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.rollen-paneel{flex:0 0 100%;box-sizing:border-box;padding:40px 44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.rollen-paneel .eyebrow{margin-bottom:6px}
.rollen-paneel h3{font-size:25px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.rollen-paneel p{font-size:16px;color:var(--tekst-zacht);margin-bottom:24px}
@media (prefers-reduced-motion:reduce){.rollen-track{transition:none}}
@media (max-width:760px){
  .rollen-show{grid-template-columns:1fr;gap:0}
  .rollen-tabs{flex-direction:row;overflow-x:auto;gap:0;border-bottom:1px solid var(--lijn);margin-bottom:18px}
  .rollen-tab{border-left:none;border-bottom:2px solid transparent;padding:10px 14px;white-space:nowrap;font-size:14.5px}
  .rollen-tab.actief{border-bottom-color:var(--oranje)}
  .rollen-paneel{padding:28px 24px}
}

/* Parallax-doelen */
[data-parallax]{will-change:transform}

/* Rolkaarten: fotokaarten per rol, omlijning bij hover en klik */
.rolkaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.rolkaart{display:block;text-align:center}
.rolkaart .foto{border-radius:12px;overflow:hidden;aspect-ratio:16/10;transition:transform .2s,box-shadow .2s}
.rolkaart .foto img{width:100%;height:100%;object-fit:cover;display:block}
.rolkaart:hover .foto,.rolkaart:focus-visible .foto,.rolkaart:active .foto{outline:2.5px solid var(--oranje);outline-offset:4px;transform:translateY(-3px);box-shadow:0 14px 32px rgba(255,70,0,.18)}
.rolkaart:active .foto{transform:translateY(-1px)}
.rolkaart span{display:inline-block;margin-top:13px;font-weight:700;font-size:15.5px;color:var(--tekst);transition:color .2s}
.rolkaart:hover span,.rolkaart:focus-visible span,.rolkaart:active span{color:var(--oranje-donker)}
@media (max-width:760px){.rolkaarten{grid-template-columns:repeat(2,1fr);gap:16px}}
/* Rolkaarten met SVG-iconen in plaats van foto's: schaalt scherp mee, geen
   licentie- of representatievraag zoals bij stockbeeld van personen. */
.rolkaart .rol-icoon{display:flex;align-items:center;justify-content:center;
  background:var(--oranje-licht);border:1px solid #ffe0d5;color:var(--oranje)}
.rolkaart .rol-icoon svg{width:44%;max-width:62px;height:auto}
.rolkaart:hover .rol-icoon,.rolkaart:focus-visible .rol-icoon,.rolkaart:active .rol-icoon{background:#ffe6dc}
@media (max-width:760px){.rolkaart .rol-icoon svg{width:40%;max-width:48px}}

/* Videoblok: een video op paginabreedte met afgeronde hoeken, zwart als
   achtergrond voor de balken bij een afwijkende verhouding. */
.video-blok{max-width:1000px;margin:0 auto}
.video-blok video{width:100%;height:auto;border-radius:18px;display:block;background:#000}
.video-noot{margin:14px 0 0;text-align:center;font-size:13.5px;color:var(--tekst-zacht)}

/* Prijshulp: invoerveld links, twee uitkomsten rechts. Bewust klein gehouden,
   het is een indicatie en geen offertetool. */
.prijshulp{display:grid;grid-template-columns:minmax(220px,1fr) 1.4fr;gap:28px;align-items:center;
  max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--lijn);border-radius:18px;
  padding:26px 28px}
.prijshulp-invoer{display:grid;gap:9px}
.prijshulp-invoer label{font-size:14.5px;font-weight:700;color:var(--tekst)}
.prijshulp-invoer input{font:inherit;font-size:19px;font-weight:700;padding:12px 14px;
  border:1px solid var(--lijn);border-radius:12px;background:#fff;color:var(--tekst);width:100%}
.prijshulp-invoer input:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:transparent}
/* Eén uitkomst sinds de stuksprijs eruit is, dus geen twee kolommen meer.
   En bewust rustiger gezet: dit is een indicatie waarop iemand verder rekent,
   geen aanbieding die om aandacht schreeuwt. */
.prijshulp-uit{display:grid;gap:22px}
.prijshulp-uit span{display:block;font-size:13.5px;color:var(--tekst-zacht)}
.prijshulp-uit strong{display:block;margin-top:6px;font-size:clamp(22px,2.4vw,26px);font-weight:700;
  letter-spacing:-.02em;color:var(--oranje-donker);line-height:1.1}
/* De zin onder de uitkomst en de uitklapbare onderbouwing daaronder. */
.prijshulp-korting{grid-column:1/-1;margin:0;text-align:center;font-size:13.5px;
  color:var(--tekst-zacht)}
.prijshulp-korting:empty{display:none}

.prijsopbouw{grid-column:1/-1;margin:0 auto;max-width:520px;width:100%;font-size:13.5px}
.prijsopbouw[hidden]{display:none}
.prijsopbouw summary{cursor:pointer;text-align:center;color:var(--oranje-donker);
  font-weight:600;padding:6px 0;list-style:none}
.prijsopbouw summary::-webkit-details-marker{display:none}
/* Eigen pijltje, dat meedraait bij het openen. Het standaardpijltje staat links
   en breekt de gecentreerde regel. */
.prijsopbouw summary::after{content:"";display:inline-block;width:6px;height:6px;
  margin-left:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.prijsopbouw[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.prijsopbouw summary:focus-visible{outline:2px solid var(--oranje);outline-offset:3px;
  border-radius:6px}
.prijsopbouw table{width:100%;border-collapse:collapse;margin-top:8px}
.prijsopbouw td{padding:7px 0;color:var(--tekst-zacht);
  border-bottom:1px solid var(--lijn);font-variant-numeric:tabular-nums;vertical-align:top}
/* Middenkolom is de berekening, rechterkolom het bedrag. Allebei zonder
   afbreken, want een tarief dat over twee regels valt leest als twee getallen. */
.prijsopbouw td:nth-child(2){text-align:right;white-space:nowrap;padding-left:14px}
.prijsopbouw td:last-child{text-align:right;white-space:nowrap;padding-left:14px}
.prijsopbouw tr:last-child td{border-bottom:0}
.prijsopbouw-totaal td{padding-top:10px;font-weight:700;color:var(--tekst)}
@media (max-width:640px){.prijshulp{grid-template-columns:1fr;gap:22px;padding:22px}}

/* Statements: de harde samenvatting. Vier claims op een rij, groot gezet, met
   hooguit een regel eronder. Bewust geen kaders of iconen: het moet lezen als
   vier uitspraken, niet als nog een blok met features. */
/* Aantal kolommen volgt het aantal items. Vier smalle kolommen dwingen
   langere koppen over twee regels terwijl kortere op een regel blijven, en
   dan staat de rij scheef. Bij twee items zijn de kolommen breed genoeg voor
   een hele zin en valt dat probleem weg. */
.statements{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;max-width:1100px;margin:0 auto}
.statements-2{grid-template-columns:1fr 1fr;gap:56px;max-width:940px}
.statements-3{grid-template-columns:repeat(3,1fr)}
.statement-kop{font-size:clamp(24px,2.9vw,32px);font-weight:800;letter-spacing:-.025em;
  line-height:1.15;color:var(--oranje-donker);margin:0 0 10px;
  /* "Kosten eruit." past op een regel, "Minder organisatie." niet. Zonder
     vaste hoogte beginnen de subteksten dan op verschillende hoogtes en oogt
     de rij rommelig. Twee regels reserveren zet alles op een lijn. */
  min-height:2.3em;display:flex;align-items:flex-end;text-wrap:balance}
.statement-tekst{margin:0;font-size:15.5px;line-height:1.6;color:var(--tekst-zacht)}
@media (max-width:900px){.statements{grid-template-columns:1fr 1fr;gap:28px}
  .statements-2{gap:32px}}
@media (max-width:640px){.statements-2{grid-template-columns:1fr;gap:26px}
  .statements-2 .statement-kop{min-height:0;display:block}}
@media (max-width:520px){.statements{grid-template-columns:1fr;gap:22px}
  .statement-kop{min-height:0;display:block}}

/* Betaalflow: vier stappen op een rij, met een pijl ertussen. Bewust geen
   infographic met iconen; een organisator moet in een oogopslag zien dat er
   geen betaalterminal in de keten zit. */
.betaalflow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:920px;margin:0 auto;
  text-align:center}
.betaalflow-vijf{grid-template-columns:repeat(5,1fr);max-width:1080px}
@media (max-width:900px){.betaalflow-vijf{grid-template-columns:1fr;max-width:340px}}
.betaalflow div{position:relative;padding:22px 14px}
.betaalflow div+div::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:14px;
  border-top:2px solid var(--oranje);border-right:2px solid var(--oranje);
  transform:translateY(-50%) rotate(45deg)}
.betaalflow strong{display:block;font-size:18px;font-weight:800;color:var(--oranje-donker);
  letter-spacing:-.01em}
.betaalflow span{display:block;margin-top:6px;font-size:14.5px;color:var(--tekst-zacht);line-height:1.5}
@media (max-width:700px){.betaalflow{grid-template-columns:1fr;max-width:340px}
  .betaalflow div+div::before{left:50%;top:-4px;transform:translateX(-50%) rotate(135deg)}}

/* Keuzekaarten: de twee proposities op de voordeur. Bewust groot en met veel
   rust eromheen, want dit is de enige beslissing die de homepage vraagt.
   Twee kolommen op desktop, onder elkaar zodra de kaart smaller wordt dan
   waarop de foto nog iets uitlegt. */
.keuzekaarten{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:1060px;margin:0 auto}
.keuzekaart{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--lijn);border-radius:20px;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.keuzekaart:hover,.keuzekaart:focus-visible{transform:translateY(-4px);border-color:var(--oranje);
  box-shadow:0 20px 46px rgba(255,70,0,.16)}
.keuzekaart img{width:100%;aspect-ratio:8/5;object-fit:cover;display:block}
.keuzekaart-tekst{padding:30px 30px 34px;display:flex;flex-direction:column;flex:1}
.keuzekaart-tekst h2{font-size:clamp(24px,2.6vw,29px);margin:0 0 12px;letter-spacing:-.02em}
.keuzekaart-tekst p{margin:0 0 14px;color:var(--tekst-zacht);line-height:1.6}
.keuzekaart-voorbeelden{font-size:14.5px;color:var(--tekst-zacht);opacity:.85}
.keuzekaart .knop{margin-top:auto;align-self:flex-start}
.slotregel{max-width:640px;margin:30px auto 0;text-align:center;font-size:17px;
  color:var(--tekst-zacht);line-height:1.6}
@media (max-width:820px){.keuzekaarten{grid-template-columns:1fr;gap:24px}
  .keuzekaart-tekst{padding:24px 24px 28px}}

/* Rolkiezer: vier fototegels met de rolnaam als echte tekst eronder.
   De kop staat bewust niet in de foto, zodat een zoekmachine hem leest. */
.rolkiezer{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1080px;margin:0 auto}
.roltegel{display:block;text-align:center;text-decoration:none;color:inherit}
.roltegel img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:14px;
  border:3px solid transparent;transition:border-color .2s,transform .2s,box-shadow .2s}
.roltegel:hover img,.roltegel:focus-visible img,.roltegel:active img{border-color:var(--oranje);
  transform:translateY(-3px);box-shadow:0 14px 32px rgba(255,70,0,.18)}
.roltegel-kop{display:block;margin-top:15px;font-weight:800;font-size:20px;letter-spacing:-.01em;
  color:var(--oranje)}
.roltegel-tekst{display:block;margin-top:5px;font-size:14.5px;color:var(--tekst-zacht)}
@media (max-width:860px){.rolkiezer{grid-template-columns:repeat(2,1fr);gap:20px}
  .roltegel-kop{font-size:18px}}
@media (max-width:420px){.rolkiezer{grid-template-columns:1fr}}

/* Beeldstappen: de kaartafbeelding naast dezelfde tekst als leesbare HTML.
   De kaarten hebben hun tekst in het beeld staan; die tekst staat hier
   daarnaast, anders vindt een zoekmachine er niets van terug. */
.beeldstappen{display:grid;gap:46px;max-width:1000px;margin:0 auto}
.beeldstap{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center}
.beeldstap:nth-child(even){grid-template-columns:420px 1fr}
.beeldstap:nth-child(even) img{order:-1}
.beeldstap img{width:100%;height:auto;border-radius:18px;display:block}
.beeldstap-tekst .stap-nr{display:block;font-size:52px;font-weight:800;line-height:1;
  color:var(--oranje);opacity:.22;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  margin-bottom:10px}
.beeldstap-tekst h3{font-size:21px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.beeldstap-tekst p{font-size:15.5px;color:var(--tekst-zacht)}
@media (max-width:760px){
  .beeldstappen{gap:34px}
  .beeldstap,.beeldstap:nth-child(even){grid-template-columns:1fr;gap:18px}
  .beeldstap img,.beeldstap:nth-child(even) img{order:0;max-width:100%;margin:0 auto}
  .beeldstap-tekst .stap-nr{font-size:40px}
}

/* Stapelkaarten: liggende stappenkaarten onder elkaar */
.stapelkaarten{display:grid;gap:32px;max-width:860px;margin:0 auto}
.stapelkaarten img{border-radius:22px;width:100%;height:auto}

/* Zigzag: stappenkaarten in twee kolommen, om en om verspringend */
.zigzag{display:grid;grid-template-columns:1fr 1fr;gap:36px 44px;max-width:920px;margin:0 auto}
.zigzag img{border-radius:22px;width:100%;height:auto}
.zigzag img:nth-child(even){margin-top:96px}
@media (max-width:760px){.zigzag{grid-template-columns:1fr;gap:24px}.zigzag img:nth-child(even){margin-top:0}}
.h2-oranje{color:var(--oranje)}

/* Cijferband: tellers die oplopen zodra ze in beeld komen */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px;text-align:center;padding:10px 0}
.cijfer b{display:block;font-size:clamp(38px,5vw,52px);font-weight:800;line-height:1.1;color:var(--oranje);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cijfer span{font-size:14.5px;color:var(--tekst-zacht)}
::selection{background:var(--oranje);color:#fff}
section{scroll-margin-top:80px}
.faq details[open] summary{color:var(--oranje-donker)}
.cta-band{padding:64px 0}
.footer-logo{height:46px;width:auto;margin-bottom:18px}
.footer-badges{display:flex;gap:10px;margin-top:14px}
.footer-badges img{height:42px;width:auto}
.quote-band{max-width:760px;margin:0 auto;text-align:center;padding:8px 0}
.quote-band blockquote{font-size:clamp(19px,2.6vw,25px);font-weight:600;line-height:1.45;letter-spacing:-.01em}
.quote-band blockquote::before{content:"\201C";display:block;font-size:64px;line-height:.6;color:var(--oranje);font-weight:800;margin-bottom:16px}
.quote-band cite{display:block;margin-top:18px;font-style:normal;font-size:14.5px;color:var(--tekst-zacht)}
.banner-kader{border-radius:20px;box-shadow:0 24px 60px rgba(34,34,34,.14);margin:0 auto 8px}

/* Hero-fotocarrousel: foto's vloeien in elkaar over */
.hero-fotos{position:relative;aspect-ratio:1600/528;overflow:hidden;border-radius:20px;box-shadow:0 24px 60px rgba(34,34,34,.14);margin:0 auto 8px}
.hero-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero-fotos img.actief{opacity:1}
.hero-fotos{margin-bottom:26px}
@media (max-width:760px){.hero-fotos{aspect-ratio:4/3}.hero{padding:52px 0 34px}}
@media (prefers-reduced-motion:reduce){.hero-fotos img{transition:none}}

@media (max-width:640px){.stap{grid-template-columns:56px 1fr;gap:18px;padding:26px 0}.stap-nr{font-size:40px}}


/* ---------- Vergelijking Drop tegenover muntjes ----------
   Was twee losse kolommen waarvan de rijen niet uitlijnden; nu een
   echte tabel-grid zodat elk kenmerk op één regel staat. */
.vgl-tabel{display:grid;grid-template-columns:1fr 132px 132px;max-width:900px;margin:0 auto;
  background:#fff;border:1px solid var(--lijn);border-radius:20px;overflow:hidden;
  box-shadow:0 22px 54px rgba(34,34,34,.07)}
.vgl-kop{font-size:14.5px;font-weight:700;padding:18px 16px;text-align:center;background:var(--vlak);border-bottom:1px solid var(--lijn)}
.vgl-kop-leeg{background:var(--vlak);border-bottom:1px solid var(--lijn)}
.vgl-kop-drop{color:var(--oranje-donker);background:#fff6f2}
.vgl-kop-munt{color:var(--tekst-zacht)}
.vgl-kenmerk{padding:15px 20px;border-bottom:1px solid var(--lijn);display:flex;flex-direction:column;gap:3px;justify-content:center}
.vgl-kenmerk b{font-size:15px;font-weight:700;line-height:1.35}
.vgl-kenmerk span{font-size:13.5px;color:var(--tekst-zacht);line-height:1.5}
.vgl-cel{display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--lijn);padding:15px 10px}
.vgl-cel-drop{background:#fff9f7}
.vgl-tabel > *:nth-last-child(-n+3){border-bottom:0}
.vgl-actie{text-align:center;margin-top:26px}
@media (max-width:760px){
  .vgl-tabel{grid-template-columns:1fr 68px 68px;border-radius:16px}
  .vgl-kop{font-size:12px;padding:12px 6px;line-height:1.25}
  .vgl-kenmerk{padding:13px 14px}
  .vgl-kenmerk b{font-size:14px}
  .vgl-kenmerk span{font-size:12.5px}
  .vgl-cel{padding:13px 4px}
}

h1,h2,h3,.footer-intro,.sectie-kop p,.vgl-titel{text-wrap:balance}
p,.sub,.kaart p,.stap p,.faq details p{text-wrap:pretty}

.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);color:#fff;transition:background .2s,border-color .2s;padding:0}
.footer-social a:hover{background:rgba(255,255,255,.15);border-color:#fff;text-decoration:none}

.kaarten-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;max-width:1080px}
@media (max-width:860px){.kaarten-3{grid-template-columns:1fr;gap:0}}

/* Hero-banner: tekst over de wisselende foto's heen */
.hero-banner{position:relative;border-radius:22px;overflow:hidden;margin:18px auto 8px;box-shadow:0 24px 60px rgba(34,34,34,.16)}
.hero-banner .hero-fotos{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none;margin:0}
/* Twee lagen: een egale verdonkering over de hele foto en daar bovenop een
   zachte donkere kern achter de tekst. Een enkele verloopwaas liet het midden
   te licht, waardoor witte tekst over een lichte foto wegviel. */
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,11,7,.54) 0%,rgba(18,11,7,.46) 50%,rgba(18,11,7,.58) 100%),
    radial-gradient(ellipse 70% 62% at 50% 48%,rgba(12,7,4,.32) 0%,rgba(12,7,4,0) 100%)}
.hero-inhoud{position:relative;z-index:2;text-align:center;max-width:780px;margin:0 auto;padding:84px 28px 72px;color:#fff}
.hero-inhoud h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero-inhoud .sub{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-inhoud .knop-rand{border-color:rgba(255,255,255,.65);color:#fff}
.hero-inhoud .knop-rand:hover{border-color:#fff}
@media (max-width:760px){.h2-tweeregels{font-size:23px}}

.nav-tagline{display:none}
@media (max-width:760px){
  .nav-tagline{display:block;position:absolute;left:50%;transform:translateX(-50%);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--tekst-zacht);white-space:nowrap;pointer-events:none}
}

.sub-mobiel{display:none}
@media (max-width:760px){
  .hero-inhoud{padding:54px 18px 46px}
  .hero-inhoud .sub-desktop{display:none}
  .hero-inhoud .sub-mobiel{display:inline}
  .hero-inhoud .badge{font-size:11px;padding:7px 14px;letter-spacing:.03em}
}

/* Minder witruimte tussen secties op telefoons */
@media (max-width:760px){
  .sectie{padding:44px 0}
  .sectie-smal{padding:26px 0}
  .sectie-kop{margin-bottom:28px}
  .trust{padding:14px 0 30px}
  .cta-band{padding:40px 0}
  footer{padding:48px 0 28px}
}

/* ---------- Formulieren (contact en aanvraag) ---------- */
.site-form{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-veld{display:flex;flex-direction:column;gap:6px}
.form-veld label{font-size:13.5px;font-weight:600;color:var(--tekst)}
.form-optioneel{font-weight:400;color:var(--tekst-zacht)}
.site-form input,.site-form textarea{
  font:inherit;font-size:15px;color:var(--tekst);background:#fff;
  border:1px solid var(--lijn);border-radius:11px;padding:12px 14px;width:100%;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s}
.site-form textarea{resize:vertical;min-height:120px}
.site-form input:focus,.site-form textarea:focus{outline:none;border-color:var(--oranje);box-shadow:0 0 0 3px rgba(255,70,0,.14)}
.site-form input:user-invalid,.site-form textarea:user-invalid{border-color:#e06a45}
.site-form .knop{align-self:flex-start;border:none;cursor:pointer}
.site-form .knop:disabled{opacity:.6;cursor:default}
.form-vangnet{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-melding{margin:0;padding:11px 14px;border-radius:10px;background:#fff2ee;border:1px solid #ffd2c4;color:#a12800;font-size:14px;line-height:1.5}
.form-klein{margin:0;font-size:12.5px;color:var(--tekst-zacht);line-height:1.5}
.form-bedankt{max-width:640px;margin:0 auto;background:var(--vlak);border-radius:18px;padding:32px 28px;text-align:center}
.form-bedankt h3{margin:0 0 8px;font-size:21px}
.form-bedankt p{margin:0;color:var(--tekst-zacht)}
@media (max-width:640px){.form-rij{grid-template-columns:1fr}}

/* ---------- Alles-in-1 blok (verving een JPG met tekst erin) ---------- */
.platform-blok{margin-top:36px;background:linear-gradient(135deg,#ff4600 0%,#f23c00 55%,#e03500 100%);
  border-radius:22px;padding:52px 40px;text-align:center;color:#fff;box-shadow:0 24px 60px rgba(255,70,0,.22)}
.platform-kop{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 14px;color:#fff}
.platform-sub{max-width:640px;margin:0 auto 26px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.92)}
.platform-tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0 0 30px;padding:0}
.platform-tags li{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:600;line-height:1;color:#fff}
.platform-blok .knop-wit{background:#fff;color:var(--oranje-donker);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.platform-blok .knop-wit:hover{background:#fff5f1;color:var(--oranje-donker)}
@media (max-width:760px){
  .platform-blok{padding:38px 22px;border-radius:18px}
  .platform-tags{gap:7px;margin-bottom:24px}
  .platform-tags li{padding:6px 12px;font-size:12.5px}
  .platform-sub{font-size:15px}
}

/* ---------- Echte foto's van evenementen ---------- */
.echt-fotos{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:0 auto}
.echt-fotos figure{margin:0;background:var(--vlak);border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.echt-fotos img{width:100%;height:260px;object-fit:cover;display:block}
.echt-fotos .echt-groot{grid-column:1/-1}
.echt-fotos .echt-groot img{height:360px}
.echt-fotos figcaption{padding:11px 16px 14px;font-size:13.5px;color:var(--tekst-zacht);line-height:1.5}
@media (max-width:760px){
  .echt-fotos{grid-template-columns:1fr;gap:14px}
  .echt-fotos img{height:210px}
  .echt-fotos .echt-groot img{height:230px}
}

/* --- kerstmarkt-sectie (beslisdocument v1.5) --- */
.kruimels{font-size:13.5px;color:var(--tekst-zacht);padding:14px 0 0}
.kruimels a{color:var(--tekst-zacht)}
.kruimels a:hover{color:var(--tekst)}
.kruimels span[aria-current]{color:var(--tekst);font-weight:600}
.artikel h2{margin:28px 0 8px;font-size:22px}
.artikel p{margin:12px 0}
.artikel .sub{font-size:17.5px;color:var(--tekst-zacht);line-height:1.65}
.artikel .lijst{margin:10px 0 16px}
.calc-row input[type="number"]{width:100%;padding:11px 12px;border:1.5px solid var(--lijn);border-radius:9px;font:inherit;background:#fff}
.calc-row input[type="number"]:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:var(--oranje)}
.site-form select{width:100%;padding:11px 12px;border:1.5px solid var(--lijn);border-radius:9px;font:inherit;background:#fff}
.site-form select:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:var(--oranje)}

/* --- Compacte prijsindicatie (v1.6 hoofdstuk 15): een invoerveld, een resultaat --- */
.prijsindicatie{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:28px 26px}
.prijsindicatie .calc-row{display:block;margin:0 0 18px}
.prijsindicatie .calc-row span{display:block;font-size:14.5px;font-weight:600;margin-bottom:8px}
.prijsindicatie input[type="number"]{width:100%;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:10px;font:inherit;font-size:17px;background:#fff}
.prijsindicatie input[type="number"]:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:var(--oranje)}
.prijs-uitkomst{border-top:1px solid var(--lijn);padding-top:20px;text-align:center}
.prijs-uitkomst .calc-output-label{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-zacht);margin:0 0 6px}
/* Ingetogen bedrag: een indicatie, geen aanbieding. Donkere tekst in plaats van
   oranje, en "exclusief btw" duidelijk ondergeschikt aan het getal. */
.prijs-uitkomst .calc-output-bedrag{font-size:clamp(23px,2.9vw,29px);font-weight:700;color:var(--tekst);letter-spacing:-.01em;line-height:1.25;margin:0 0 14px;font-variant-numeric:tabular-nums}
.prijs-uitkomst .btw{font-size:14px;font-weight:500;color:var(--tekst-zacht);letter-spacing:0;white-space:nowrap}
.prijs-uitkomst .calc-noot{font-size:13.5px;color:var(--tekst-zacht);line-height:1.6;margin:0 auto 20px;max-width:520px}
@media (max-width:640px){.prijsindicatie{padding:22px 18px;border-radius:14px}}

/* ============================================================
   Uitvoeringsspecificatie v2.0
   Componenten voor de twee organisatorenroutes.
   ============================================================ */

/* Oplossingen-dropdown in het hoofdmenu */
.nav-drop{position:relative}
.nav-drop>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav-drop-menu{position:absolute;top:100%;left:-14px;min-width:290px;background:#fff;border:1px solid var(--lijn);border-radius:12px;box-shadow:0 14px 34px rgba(28,28,28,.12);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:8px;white-space:normal;line-height:1.35;color:var(--tekst)}
.nav-drop-menu a:hover{background:var(--vlak);color:var(--tekst)}
/* Groepslabel boven de toepassingen. Geen link: Besloten evenementen is een
   verzameling van de drie items eronder, niet zelf een pagina.
   Twee keer is gevraagd waarom dit vet is. Eerst stond het op 700, daarna op
   600, en het bleef die vraag oproepen. Hoofdletters met spatiering wegen nu
   eenmaal zwaarder dan hun getal doet vermoeden. Daarom draagt de scheiding nu
   een streep en niet de letterdikte: gewicht 500, een maat kleiner, en een
   haarlijn erboven die laat zien dat het een kopje is en geen menu-item. */
.nav-drop-kop{display:block;margin-top:8px;padding:11px 12px 5px;font-size:11px;
  font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-zacht);
  border-top:1px solid var(--lijn)}
.nav-drop-menu .nav-drop-kop + a,
.nav-drop-menu .nav-drop-kop ~ a{padding-left:12px}
.nav-links a.nav-drop-top{white-space:nowrap}

/* Zodra het hamburgermenu verschijnt is de navigatie een uitgeklapte kolom.
   Het uitklapmenu moet dan mee plat, en op precies dezelfde breedte: hoveren
   bestaat niet op een aanraakscherm, dus een submenu dat alleen op hover
   opengaat is daar onbereikbaar.

   Dit blok staat bewust hier en niet bij de andere regels voor 1150px, want
   media queries verhogen de specificiteit niet. Zou het hierboven staan, dan
   wint de basisregel .nav-drop-menu een paar regels terug gewoon omdat die
   later in het bestand komt, en blijft het submenu op een tablet dicht. */
@media (max-width:1150px){
  .nav-drop{width:100%}
  .nav-drop-menu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:0 0 6px 14px;min-width:0;background:transparent}
  /* 9px in plaats van 6px: dat brengt het raakvlak van 31 naar 37 pixels.
     Nog geen 44, maar in een uitgeklapte lijst met ruimte eromheen is dat
     genoeg, en de vier items passen zo nog steeds op een klein scherm. */
  .nav-drop-menu a{padding:9px 0;font-size:14px}
  .nav-drop>a::after{display:none}
  .nav-drop-kop{margin-top:6px;padding:10px 0 2px}
}

/* Hero-varianten */
.hero-claim{font-weight:700;color:var(--oranje-donker);margin:-6px 0 18px}
.hero-noot{font-size:14.5px;color:var(--tekst-zacht);max-width:640px;margin:0 auto 22px;line-height:1.6}

/* Losse toelichtingen onder een blok */
.noot{font-size:13.5px;color:var(--tekst-zacht);line-height:1.65;max-width:680px;margin:18px auto 0;text-align:center}
.tabel-noot{font-size:13.5px;color:var(--tekst-zacht);margin:14px 0 0;text-align:center}
.lijst-breed{max-width:760px}

/* Vaste productregel */
.drop-waarde{text-align:center;font-weight:700;font-size:clamp(18px,2.2vw,22px);color:var(--oranje-donker);margin:0 0 24px}

/* Neutrale vergelijkingstabel */
.tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.vergelijk{width:100%;min-width:620px;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
table.vergelijk th,table.vergelijk td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top}
table.vergelijk thead th{background:var(--vlak);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--tekst-zacht)}
table.vergelijk tbody th{font-weight:600;color:var(--tekst);width:34%}
table.vergelijk tbody tr:last-child th,table.vergelijk tbody tr:last-child td{border-bottom:0}
table.vergelijk td:last-child{font-weight:600;color:var(--oranje-donker)}

/* Intakeformulier */
.intake{max-width:720px;margin:0 auto}
.intake .form-veld{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.intake label{font-size:14px;font-weight:600;color:var(--tekst)}
.intake input,.intake select{font:inherit;font-size:16px;padding:13px 15px;border:1.5px solid var(--lijn);border-radius:11px;background:#fff;color:var(--tekst);width:100%}
.intake input:focus,.intake select:focus{outline:none;border-color:var(--oranje);box-shadow:0 0 0 3px rgba(255,70,0,.14)}
.intake input[aria-invalid="true"],.intake select[aria-invalid="true"]{border-color:#a12800;box-shadow:0 0 0 2px rgba(161,40,0,.12)}
.veld-fout{font-size:13px;line-height:1.45;color:#8f2500;margin:0}
.intake button[disabled]{cursor:wait;opacity:.72}
.intake .form-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.intake button[type=submit]{width:100%;margin-top:6px}
.intake .honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-melding{min-height:20px;font-size:14px;color:var(--oranje-donker);margin:10px 0 0;text-align:center}
.form-dank{text-align:center;font-size:17px;font-weight:600;margin:0 auto 22px;max-width:560px}
#in-vervolg{max-width:720px;margin:0 auto}

/* Footer met vijf kolommen */
.footer-grid{grid-template-columns:1.5fr .9fr .9fr 1.05fr .8fr;gap:40px}
.footer-app{font-size:14px;color:#fff;margin:14px 0 10px;line-height:1.5}

@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:760px){
}
@media (max-width:560px){
  /* De tagline staat absoluut gecentreerd en botst op smalle schermen
     tegen het logo. Onder 560px laten we hem weg. */
  .nav-tagline{display:none}
  .intake .form-rij{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  table.vergelijk{font-size:13.5px}
}

/* Twee scanrichtingen naast elkaar (hoofdstuk 8.4) */
.scanbeeld{margin:0;background:#fff;border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.scanbeeld img{display:block;width:100%;height:230px;object-fit:cover}
.scanbeeld figcaption{padding:14px 18px;font-size:14px;color:var(--tekst-zacht);line-height:1.5}

/* ============================================================
   Mobiel leesbaarder maken.
   Op desktop werkt gecentreerde tekst prima, op 390 pixels breed
   breekt iedere kop in drie of vier regels en valt het ritme weg.
   Onder 760px: links uitlijnen, koppen kleiner, secties compacter.
   ============================================================ */
@media (max-width:760px){
  .sectie{padding:44px 0}
  .sectie-kop{text-align:left;margin-bottom:26px}
  .sectie-kop h2{font-size:clamp(23px,6.2vw,28px);line-height:1.2;text-wrap:balance}
  .sectie-kop p{text-align:left;margin-left:0;margin-right:0;max-width:none}
  .sectie-kop .eyebrow{margin-bottom:8px}
  .sectie-kop .eyebrow::before{margin:0 0 10px}
  .lijst,.lijst-breed{margin-left:0;max-width:none}
  .noot,.tabel-noot{text-align:left;margin-left:0;max-width:none}
  .drop-waarde{text-align:left}
  .stap h3{font-size:17px}
  .stap p{font-size:15px}
  .kaart h3{font-size:17px}
  .hero{padding:34px 0 26px}
  .hero h1{font-size:clamp(27px,7.4vw,34px);line-height:1.15}
  .hero .sub{font-size:16.5px}
  .hero-knoppen{flex-direction:column;align-items:stretch}
  .hero-knoppen .knop,.hero-knoppen .knop-rand{width:100%;text-align:center}
  /* De zwevende knoppen moeten boven de vaste onderbalk blijven. Die balk is
     51px hoog zolang "Bespreek mijn evenement" op een regel past, en 74px
     zodra dat label afbreekt, wat gebeurt onder ongeveer 380px breed. Op 64px
     dekte de chatknop daar de primaire CTA af. 92px houdt in beide gevallen
     ruimte vrij. De oude selector [id$="-btn"] gold voor elk element waarvan
     de id op -btn eindigt, dus die is vervangen door de twee echte knoppen. */
  #d4e-chat-btn,#d4e-fb-btn{bottom:92px!important}
  /* Met het menu open heeft de chatknop geen functie en dekt hij de knop in
     de hero af. Browsers zonder :has() laten hem gewoon staan. */
  body:has(.nav-links.open) #d4e-chat-btn{display:none}
}

/* Dropdownlabel is geen link meer: het gaat nergens naartoe */
.nav-drop-knop{font:inherit;background:none;border:0;padding:0;cursor:default;color:var(--tekst-zacht);white-space:nowrap}
.nav-drop:hover .nav-drop-knop,.nav-drop-knop.actief{color:var(--oranje-donker)}
.nav-drop-knop.actief{font-weight:600}

/* Bewijsstrook direct onder de routekeuze */
.bewijsstrook{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;background:var(--lijn);border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.bewijsstrook div{background:#fff;padding:22px 18px;text-align:center;
  display:flex;flex-direction:column;justify-content:space-between}
/* Met subgrid liggen kop en onderregel op dezelfde twee rijen, ook als de
   ene kop over twee regels loopt en de andere over een. Zonder subgrid doet
   de flexregel hierboven hetzelfde: de onderregels zakken naar dezelfde
   onderkant. */
@supports (grid-template-rows:subgrid){
  .bewijsstrook{grid-template-rows:auto auto}
  .bewijsstrook div{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start}
}
.bewijsstrook strong{display:block;font-size:clamp(24px,3.2vw,31px);font-weight:800;color:var(--oranje-donker);letter-spacing:-.01em;line-height:1.15}
.bewijsstrook span{display:block;margin-top:6px;font-size:13.5px;color:var(--tekst-zacht);line-height:1.45}

/* Uitklapbare verdieping onder een verkoopblok */
.uitklap{border:1px solid var(--lijn);border-radius:14px;background:#fff;margin-bottom:14px}
.uitklap summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:16px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.uitklap summary::-webkit-details-marker{display:none}
.uitklap summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--tekst-zacht);border-bottom:2px solid var(--tekst-zacht);transform:rotate(45deg) translateY(-2px);flex:0 0 auto;transition:transform .18s}
.uitklap[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.uitklap-inhoud{padding:0 18px 18px}
.uitklap-inhoud .kaarten{gap:14px}
.uitklap-inhoud .kaart{border:0;padding:6px 4px 0;background:transparent}

@media (max-width:760px){
  .bewijsstrook div{padding:16px 12px}
  .uitklap summary{padding:15px 16px;font-size:15.5px}
}

/* Bewijsstrook met drie in plaats van vier cellen */
.bewijsstrook.drie{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){
  .bewijsstrook.drie{grid-template-columns:1fr}
  .bewijsstrook.drie div{display:flex;align-items:baseline;gap:10px;text-align:left}
  .bewijsstrook.drie strong{font-size:19px}
  .bewijsstrook.drie span{margin-top:0}
}

/* ============================================================
   Marketingcarrousel (segmentatie-instructie, hoofdstuk 5 tot 9)
   ============================================================ */
.carrousel{padding:0 0 56px}
.car-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.car-tab{font:inherit;font-size:14px;font-weight:600;color:var(--tekst-zacht);background:transparent;
  border:1px solid var(--lijn);border-radius:999px;padding:9px 18px;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;white-space:nowrap}
.car-tab:hover{color:var(--tekst);border-color:var(--tekst-zacht)}
.car-tab.actief{background:var(--tekst);border-color:var(--tekst);color:#fff}

.car-venster{position:relative}
.car-slide{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
  animation:carIn .32s ease both}
.car-slide[hidden]{display:none}
@keyframes carIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.car-slide .car-tekst{min-width:0}
.car-label{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--oranje-donker);background:rgba(255,70,0,.09);border-radius:999px;padding:5px 13px;margin-bottom:16px}
.car-slide h2{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.02em;margin-bottom:16px;text-wrap:balance}
.car-sub{font-size:17px;color:var(--tekst-zacht);line-height:1.65;margin-bottom:20px;max-width:52ch}
.car-punten{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 26px;padding:0}
.car-punten li{font-size:14.5px;font-weight:600;color:var(--tekst);position:relative;padding-left:20px}
.car-punten li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--oranje)}
.car-beeld{border-radius:16px;overflow:hidden;background:var(--vlak)}
.car-beeld img{display:block;width:100%;height:100%;max-height:420px;object-fit:cover}
/* Een slide zonder beeld gebruikt de volle breedte */
.car-slide:not(:has(.car-beeld)){grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center}
.car-slide:not(:has(.car-beeld)) .car-sub{margin-left:auto;margin-right:auto}
.car-slide:not(:has(.car-beeld)) .car-punten{justify-content:center}

.car-bediening{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px}
.car-pijl,.car-pauze{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--lijn);
  background:#fff;border-radius:50%;cursor:pointer;color:var(--tekst-zacht);transition:border-color .16s,color .16s}
.car-pijl:hover,.car-pauze:hover{border-color:var(--tekst);color:var(--tekst)}
.car-pauze[aria-pressed="true"]{background:var(--vlak)}

@media (max-width:900px){
  .car-slide{grid-template-columns:1fr;gap:24px}
  .car-beeld img{max-height:230px}
}
@media (max-width:760px){
  .carrousel{padding-bottom:40px}
  .car-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -22px 20px;padding:0 22px 4px}
  .car-tabs::-webkit-scrollbar{display:none}
  /* Op mobiel eerst de tekst, dan pas het beeld: geen schermvullende foto
     voordat de belofte zichtbaar is. */
  .car-slide{display:flex;flex-direction:column}
  .car-slide .car-tekst{order:1}
  .car-slide .car-beeld{order:2}
  .car-slide h2{font-size:clamp(24px,6.4vw,30px)}
  .car-sub{font-size:16px}
  .car-slide .knop{width:100%;text-align:center}
  .car-bediening{margin-top:20px}
}

/* Sponsorblok op de homepage, herkenbaar als publieksevenement-functionaliteit */
.sponsorblok{background:linear-gradient(180deg,#fff7f3,#fff)}
.sponsorblok .sectie-kop .eyebrow{color:var(--oranje-donker)}
.groot-slot{text-align:center;font-size:clamp(19px,2.6vw,26px);font-weight:700;line-height:1.3;
  letter-spacing:-.01em;margin:6px auto 26px;max-width:24ch;color:var(--tekst)}
@media (max-width:760px){.groot-slot{text-align:left;margin-left:0}}

/* Wat een sponsor kan kopen, en de vergelijking traditioneel tegenover Drop */
.verkoopbaar{display:grid;gap:2px;background:var(--lijn);border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.verkoopbaar div{background:#fff;padding:20px 22px;display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:8px 28px;align-items:baseline}
.verkoopbaar strong{font-size:16px;color:var(--tekst)}
.verkoopbaar span{font-size:15px;color:var(--tekst-zacht);line-height:1.55}

/* Twee sponsorroutes naast elkaar */
.stroom{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.stroom-kolom{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:22px 24px}
.stroom-kop{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-zacht);margin-bottom:14px}
.stroom-kolom ol{list-style:none;counter-reset:s;margin:0;padding:0}
.stroom-kolom li{counter-increment:s;position:relative;padding:9px 0 9px 30px;font-size:15px;line-height:1.5;border-bottom:1px solid var(--lijn)}
.stroom-kolom li:last-child{border-bottom:0}
.stroom-kolom li::before{content:counter(s);position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:50%;background:var(--vlak);color:var(--tekst-zacht);font-size:11px;font-weight:700;display:grid;place-items:center}
.stroom-drop{border-color:var(--oranje);box-shadow:0 0 0 3px rgba(255,70,0,.08)}
.stroom-drop .stroom-kop{color:var(--oranje-donker)}
.stroom-drop li::before{background:var(--oranje);color:#fff}

/* Categorieën op de kerstmarktpagina */
.categorieen{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.categorieen span{font-size:14.5px;font-weight:600;color:var(--tekst);background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:9px 17px}

/* Kaart met een doelgroeplabel */
.kaart-label{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oranje-donker);background:rgba(255,70,0,.09);border-radius:999px;padding:4px 11px;margin-bottom:12px}
.kaart-publiek{border-color:rgba(255,70,0,.35)}

@media (max-width:760px){
  .verkoopbaar div{grid-template-columns:1fr;padding:16px 18px;gap:5px}
  .categorieen{justify-content:flex-start}
}

/* Productschermen op de homepage. Telefoonschermen zijn staand en veel hoger
   dan breed; ze krijgen daarom een eigen maat en niet de 3/2 van .case-foto.
   Het aantal kolommen volgt het aantal beschikbare schermen vanzelf, zodat
   twee schermen niet als een halfleeg rooster van vier ogen. */
.schermen{display:flex;flex-wrap:wrap;justify-content:center;gap:32px;max-width:1040px;margin:0 auto}
.schermen .scherm{margin:0;flex:0 1 260px;max-width:260px}
.schermen .scherm img{width:100%;height:auto;display:block;border-radius:20px;
  border:1px solid var(--lijn);box-shadow:0 18px 40px rgba(0,0,0,.16)}
.schermen .scherm figcaption{margin-top:14px;font-size:14px;line-height:1.5;
  color:var(--tekst-zacht);text-align:center}
.schermen .scherm figcaption strong{display:block;color:var(--tekst);font-weight:700}
@media(max-width:760px){
  .schermen{gap:28px}
  .schermen .scherm{flex:0 1 220px;max-width:220px}
}

/* Overzicht van kennisartikelen. Dit stond eerder in .kaarten met een h2 erin,
   maar .kaart stijlt alleen h3. Daardoor viel iedere titel terug op het
   paginaformaat en werd het overzicht een muur van koppen zonder beeld.
   Hier staat een echte artikelkaart: beeld, label, titel op leesformaat. */
.artikelkaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:30px;max-width:1080px;margin:0 auto}
.artikelkaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.artikelkaart:hover,.artikelkaart:focus-visible{transform:translateY(-3px);
  border-color:rgba(255,70,0,.35);box-shadow:0 16px 34px rgba(0,0,0,.10)}
.artikelkaart-beeld{display:block;background:var(--lijn)}
.artikelkaart-beeld img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.artikelkaart-tekst{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.artikelkaart .kaart-label{align-self:flex-start}
.artikelkaart h2{font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-.01em;
  margin:0 0 10px;color:var(--tekst)}
.artikelkaart p{font-size:14.5px;line-height:1.6;color:var(--tekst-zacht);margin:0 0 18px}
.artikelkaart-lees{margin-top:auto;font-size:14px;font-weight:700;color:var(--oranje-donker)}
.artikelkaart-lees::after{content:" \203A";font-weight:700}
@media(max-width:760px){
  .artikelkaarten{grid-template-columns:1fr;gap:22px}
  .artikelkaart h2{font-size:18px}
}

/* Ondersteunende slogan laag op de homepage (briefing 3.9). Geen hero, dus
   bewust kleiner dan een h1, maar wel groter dan lopende tekst zodat hij als
   uitspraak leest en niet als alinea. */
.slogan-sectie{padding-top:44px;padding-bottom:44px}
.slogan{margin:0;text-align:center;font-weight:700;line-height:1.25;
  font-size:clamp(22px,3.4vw,32px);color:var(--tekst)}