/* ==========================================================================
   Zonote — gedeelde stijl van www.zonote.nl (ontwerp: variant A "Opbouw met schermuitsnedes",
   gekozen door de opdrachtgever, okt 2026). Bron: de mockups a-schermen-*.html (map mockups, niet uitgerold).

   Eén bestand voor alle pagina's. Een pagina mag daarnaast een klein eigen <style>-blok hebben,
   maar alles wat op meer dan één pagina terugkomt, hoort hier.

   Merk (assets/LEESMIJ.txt): nachtblauw #0C2C47 primair, mint #34C6AE alleen op nachtblauw en
   in het logo, papier #F4F6F8 als vlak. Lettertype Figtree, lokaal (geen Google Fonts).

   CONTRAST (WCAG 2.x, relatieve luminantie; nagerekend 17 okt 2026 met scripts in de kladmap):
     nacht #0C2C47 op wit ...................... 14,32:1  koppen, tekst, knoptekst, focusring
     wit op nacht (gevulde knop, voet) .......... 14,32:1
     wit op nacht-diep #081F33 (hover) .......... 16,74:1
     nacht op papier / mint-pastel / warm ....... 13,21 / 13,03 / 13,21:1
     nacht op hover-vlak #EEF2F6 ................ 12,73:1
     zacht #4A5D70 op wit / papier / mint / warm  6,79 / 6,27 / 6,18 / 6,27:1  bijtekst
     zacht op hover-vlak #EEF2F6 ................ 6,04:1
     mint-diep #0E7A69 op mint-pastel ........... 4,77:1   vinkjes (niet-tekst, eis 3:1)
     lijn-sterk #7A8DA0 op wit .................. 3,42:1   rand van invoervelden, hamburger, schuif
     fout #B42318 op wit ........................ 6,57:1   foutmelding formulier
     op-nacht #C3D0DC op nacht .................. 9,12:1   tekst en links in de voet
     mint #34C6AE op nacht ...................... 6,70:1   focusring in de voet (eis 3:1)
     lijn #DCE3E9 op wit ........................ 1,30:1   alleen decoratieve haarlijnen
   De merkmint haalt op wit maar 2,14:1 en staat daarom nergens als tekst of rand op licht.
   Geen tweekleurige koppen: alle koppen in nachtblauw.
   ========================================================================== */

/* Figtree lokaal (variabel font, 300–900) */
@font-face{
  font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/assets/fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/assets/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --nacht:#0C2C47;        /* merk: primair, koppen en knoppen */
  --nacht-diep:#081F33;   /* hover van de gevulde knop */
  --mint:#34C6AE;         /* merk: accent, alleen op nachtblauw en in het logo */
  --mint-diep:#0E7A69;    /* mint die op licht zichtbaar is (vinkjes, hamburgericoon) */
  --papier:#F4F6F8;       /* merk: achtergrondvlak */
  --pastel-mint:#EAF7F4;  /* zacht vlak in de mint */
  --pastel-warm:#FBF5EC;  /* zacht vlak in het warme accent (#E8A33D van de statusstip) */
  --wit:#FFFFFF;
  --zacht:#4A5D70;        /* bijtekst */
  --lijn:#DCE3E9;         /* haarlijnen (decoratief) */
  --lijn-sterk:#7A8DA0;   /* randen van bedieningselementen */
  --hover:#EEF2F6;
  --fout:#B42318;
  --op-nacht:#C3D0DC;     /* tekst in de voet */
  --lijn-op-nacht:#33506A;
  --schaduw:0 1px 2px rgba(12,44,71,.05), 0 14px 34px -18px rgba(12,44,71,.22);
  --schaduw-paneel:0 28px 48px -28px rgba(12,44,71,.30);
  --maat:1240px;
  --rand:clamp(16px, 4vw, 32px);
  --vlak:clamp(3rem, 1.5rem + 4.5vw, 5.75rem);
}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* De kopbalk plakt (77 px breed, 65 px smal): de browser houdt ankers en gefocuste elementen eronder vandaan. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:92px;}
@media (max-width:1239.98px){ html{scroll-padding-top:80px;} }
body{
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.6;color:var(--nacht);background:var(--wit);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
ul,ol{list-style:none;}
.omvat{max-width:var(--maat);margin:0 auto;padding:0 var(--rand);}
h1,h2,h3{color:var(--nacht);letter-spacing:-.02em;line-height:1.15;text-wrap:balance;}
h1{font-size:clamp(2.25rem,1.4rem + 2.7vw,3.5rem);font-weight:700;line-height:1.08;letter-spacing:-.03em;}
h2{font-size:clamp(1.75rem,1.3rem + 1.5vw,2.5rem);font-weight:700;}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;}
p{max-width:64ch;text-wrap:pretty;}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
:focus-visible{outline:3px solid var(--nacht);outline-offset:3px;border-radius:8px;}
.voet :focus-visible{outline-color:var(--mint);}
.overslaan{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--wit);color:var(--nacht);
  padding:.7rem 1.1rem;border-radius:999px;font-weight:600;text-decoration:none;box-shadow:var(--schaduw);}
.overslaan:focus{left:var(--rand);}
main:focus{outline:none;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none !important;animation:none !important;}}

/* ---------- knoppen: pilvorm, één gevuld en één omlijnd ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.7rem 1.45rem;border-radius:999px;border:1.5px solid var(--nacht);
  font:inherit;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.knop-vol{background:var(--nacht);color:var(--wit);}
.knop-vol:hover{background:var(--nacht-diep);border-color:var(--nacht-diep);}
.knop-rand{background:transparent;color:var(--nacht);}
.knop-rand:hover{background:var(--hover);}
.knop-klein{min-height:44px;padding:.5rem 1.1rem;font-size:.95rem;}
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;}

/* ==========================================================================
   KOPBALK met uitklappers (breed) en telefoonmenu (smal, onder 1240 px)
   ========================================================================== */
.kop{position:sticky;top:0;z-index:50;background:var(--wit);border-bottom:1px solid var(--lijn);}
.kop-rij{display:flex;align-items:center;gap:1.25rem;min-height:76px;}
.merk{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none;flex:none;order:0;}
.merk img{width:34px;height:34px;}
.woordmerk{font-size:1.45rem;font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--nacht);padding-bottom:.1em;}
.hoofdmenu{flex:1;display:flex;align-items:center;min-width:0;order:1;}
.menu-lijst{display:flex;align-items:center;gap:.1rem;}
.menu-knop,.menu-link{
  display:inline-flex;align-items:center;gap:.3rem;min-height:44px;padding:.5rem .7rem;
  border:0;border-radius:999px;background:none;font:inherit;font-size:.97rem;font-weight:500;
  color:var(--nacht);text-decoration:none;cursor:pointer;white-space:nowrap;
}
.menu-knop:hover,.menu-link:hover,.menu-knop[aria-expanded="true"]{background:var(--hover);}
.menu-link[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;}
.menu-knop svg{flex:none;transition:transform .15s ease;}
.menu-knop[aria-expanded="true"] svg{transform:rotate(180deg);}
.kop-acties{display:flex;align-items:center;gap:.6rem;flex:none;margin-left:auto;order:2;}
.zoek-knop,.hamburger{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border-radius:999px;border:0;background:none;color:var(--nacht);text-decoration:none;cursor:pointer;
}
.zoek-knop:hover,.hamburger:hover{background:var(--hover);}
/* De hamburger staat in de DOM direct vóór het menu (focusvolgorde: knop → menu-items),
   maar wordt met order rechts in de balk getoond. Op breed is hij verborgen. */
.hamburger{display:none;order:3;border:1.5px solid var(--lijn-sterk);}
.hamburger .ic-dicht{display:none;}
.hamburger[aria-expanded="true"] .ic-open{display:none;}
.hamburger[aria-expanded="true"] .ic-dicht{display:block;}
.menu-acties-mobiel{display:none;}
/* aria-current (regel: zie KOPBALK:BEGIN) ook zichtbaar op de knoppen: Inloggen op /inloggen en de
   zoekknop op /support. De knop heeft al een rand, dus de tekst wordt onderstreept zoals een menu-item;
   de zoekknop (alleen een icoon) krijgt de rand van de hamburger (--lijn-sterk, 3,42:1 op wit). */
.kop-acties .knop[aria-current="page"],.menu-acties-mobiel .knop[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.zoek-knop[aria-current="page"]{box-shadow:inset 0 0 0 1.5px var(--lijn-sterk);}

/* uitklappanelen: over de volle breedte onder de kopbalk */
.paneel{position:absolute;left:0;right:0;top:100%;background:var(--wit);
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw-paneel);}
@media (min-width:1240px){
  /* een laag venster (laptop op 150 %): het paneel scrolt zelf, de onderste links blijven bereikbaar.
     scroll-padding: de focusring (3 px dik, 3 px buiten het element) valt bij het meescrollen met Tab
     niet buiten de scrollrand en wordt dus niet afgeknipt. */
  .paneel{max-height:calc(100dvh - 77px);overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:.5rem;}
}
.paneel[hidden]{display:none;}
.paneel-binnen{display:grid;gap:1.75rem 2.5rem;padding-top:2rem;padding-bottom:2rem;}
.paneel-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.paneel-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.paneel-kop{font-weight:700;font-size:1rem;line-height:1.3;min-height:44px;display:flex;align-items:center;}
.paneel-kop a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;}
.paneel-kop a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;}
.paneel-kop a:hover{text-decoration:underline;text-underline-offset:3px;}
.paneel-item{display:block;padding:.6rem .75rem;margin:0 -.75rem;border-radius:12px;text-decoration:none;}
.paneel-item:hover{background:var(--hover);}
.paneel-item b{display:block;font-weight:600;}
.paneel-item span{display:block;font-size:.9rem;color:var(--zacht);line-height:1.45;}
.paneel-item[aria-current="page"] b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.paneel-uitgelicht{display:grid;gap:.75rem;align-content:start;}
.paneel-kaart{display:block;background:var(--papier);border-radius:14px;padding:1rem 1.15rem;text-decoration:none;}
.paneel-kaart:hover{background:var(--hover);}
.paneel-kaart b{display:block;font-weight:700;}
.paneel-kaart span{display:block;font-size:.9rem;color:var(--zacht);line-height:1.45;margin-top:.15rem;}
.paneel-kaart[aria-current="page"] b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.kop .paneel-noot{font-size:.9rem;color:var(--zacht);background:var(--papier);border-radius:14px;padding:1rem 1.15rem;align-self:start;}
.kop .paneel-noot b{color:var(--nacht);}

@media (max-width:1239.98px){
  .kop-rij{min-height:64px;gap:.75rem;}
  .hamburger{display:inline-flex;}
  .kop-inlog{display:none;}
  .hoofdmenu{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw-paneel);
    max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;
    padding:.4rem var(--rand) 1.5rem;flex-direction:column;align-items:stretch;
    /* het menu scrolt: zonder deze ruimte schoof de browser een gefocust item net tot de rand in beeld
       en knipte die de onderkant van de focusring (6 px buiten het element) af. De .4rem bovenaan
       (6,4 px) houdt de ring van het eerste item vrij. */
    scroll-padding-block:.5rem;
  }
  .hoofdmenu.open{display:flex;}
  .menu-lijst{flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:var(--maat);margin:0 auto;}
  .menu-knop,.menu-link{width:100%;justify-content:space-between;min-height:54px;padding:.5rem 0;border-radius:0;
    border-bottom:1px solid var(--lijn);font-size:1.05rem;font-weight:600;}
  .menu-knop:hover,.menu-link:hover,.menu-knop[aria-expanded="true"]{background:none;}
  .paneel{position:static;border:0;box-shadow:none;}
  .paneel .omvat{padding:0;}
  .paneel-binnen,.paneel-3,.paneel-4{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding:1rem 0 1.5rem;max-width:none;}
  .paneel-item{margin-left:0;margin-right:0;padding-left:.75rem;}
  .menu-acties-mobiel{display:flex;flex-wrap:wrap;gap:.75rem;width:100%;max-width:var(--maat);margin:1.25rem auto 0;}
  .menu-acties-mobiel .knop{flex:1 1 150px;}
}
@media (max-width:559.98px){ .kop-demo{display:none;} }
/* vanaf 560 px staat Demo aanvragen al in de balk: in het uitklapmenu dan alleen Inloggen (nooit dubbel) */
@media (min-width:560px) and (max-width:1239.98px){ .menu-acties-mobiel .knop-vol{display:none;} }

/* ==========================================================================
   VLAKKEN, SECTIEKOPPEN, KAARTEN
   ========================================================================== */
.vlak{padding:var(--vlak) 0;}
.vlak-papier{background:var(--papier);}
.vlak-mint{background:var(--pastel-mint);}
.vlak-warm{background:var(--pastel-warm);}
.sectie-kop{max-width:720px;margin-bottom:clamp(2rem,4vw,3rem);}
.sectie-kop p{margin-top:.9rem;color:var(--zacht);font-size:1.08rem;}
.sectie-kop-rij{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem;flex-wrap:wrap;max-width:none;}
.sectie-kop-rij > div{max-width:720px;}
/* kleine regel onder een sectiekop, bv. over de herkomst van de schermen */
.sectie-kop .noot{margin-top:.6rem;font-size:.95rem;}

.kaarten{display:grid;gap:clamp(1rem,2vw,1.5rem);}
.kaarten-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.kaarten-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.kaarten-4{grid-template-columns:repeat(4,minmax(0,1fr));}
/* kaarten-modules: het productraster (drie breed, twee op een tablet, één op de telefoon) */
.kaarten-modules{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1099.98px){ .kaarten-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:979.98px){ .kaarten-modules{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:899.98px){ .kaarten-3{grid-template-columns:minmax(0,1fr);} }
@media (max-width:639.98px){ .kaarten-2,.kaarten-modules,.kaarten-4{grid-template-columns:minmax(0,1fr);} }
.kaart{background:var(--wit);border-radius:20px;padding:clamp(1.4rem,2.2vw,1.9rem);box-shadow:var(--schaduw);
  display:flex;flex-direction:column;gap:.6rem;}
.kaart p{color:var(--zacht);font-size:.98rem;}
.kaart-rand{box-shadow:none;border:1px solid var(--lijn);}
.kaart .kaart-groep{font-size:.9rem;font-weight:600;color:var(--zacht);}
@media (max-width:559.98px){ .kaart{padding:1.25rem 1.25rem .9rem;gap:.45rem;border-radius:18px;} }
.lees-meer{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  font-weight:600;color:var(--nacht);text-decoration:none;}
.lees-meer:hover{text-decoration:underline;text-underline-offset:4px;}
.lees-meer svg{flex:none;transition:transform .15s ease;}
.lees-meer:hover svg{transform:translateX(2px);}

/* lijst met doorverwijzingen in een kaart ("Ook in het dossier") */
.ook-kop{font-weight:700;color:var(--nacht) !important;font-size:1rem !important;margin-top:.4rem;}
.ook-lijst li + li{border-top:1px solid var(--lijn);}
.ook-lijst a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;
  font-weight:500;text-decoration:none;color:var(--nacht);}
.ook-lijst a:hover{text-decoration:underline;text-underline-offset:3px;}
.ook-lijst svg{flex:none;color:var(--zacht);}

/* ==========================================================================
   ECHTE SCHERMEN — één naast de kop van een pagina, kleine uitsnedes in hooguit drie kaarten.
   Alleen assets/schermen/*.webp (demo-omgeving, verzonnen personen). Uitsnijden met custom
   properties op het kader: --w (breedte van het beeld als % van het kader), --x en --y
   (verschuiving als % van het beeld zelf), --ratio (verhouding van het kader).
   Rekenvoorbeeld: beeld 2880×1800, gewenste uitsnede x 705–2150, y 385–1560 (1445×1175):
     --ratio:1445/1175; --w:calc(2880/1445*100%) = 199.31%; --x:-705/2880 = -24.48%; --y:-385/1800 = -21.39%.
   Smaller dan 900 px kan een tweede uitsnede gelden: --ratio-m, --w-m, --x-m, --y-m.
   Laat nooit de cliëntband (naam, geboortedatum, label Niet reanimeren, BSN) in beeld komen.
   ========================================================================== */
.kopbeeld{background:var(--pastel-mint);border-radius:28px;padding:clamp(14px,2vw,26px);}
.kopbeeld-venster{position:relative;aspect-ratio:var(--ratio,16/10);overflow:hidden;border-radius:14px;background:#EEF1F5;
  box-shadow:0 0 0 1px rgba(12,44,71,.08), 0 24px 48px -28px rgba(12,44,71,.45);}
.kopbeeld-venster img{position:absolute;left:0;top:0;max-width:none;width:var(--w,100%);height:auto;
  transform:translate(var(--x,0),var(--y,0));}
.kopbeeld figcaption{margin-top:.85rem;font-size:.88rem;line-height:1.45;color:var(--zacht);}
@media (max-width:899.98px){
  .kopbeeld-venster{aspect-ratio:var(--ratio-m,var(--ratio,16/10));}
  .kopbeeld-venster img{width:var(--w-m,var(--w,100%));transform:translate(var(--x-m,var(--x,0)),var(--y-m,var(--y,0)));}
}

/* kleine schermuitsnede bovenaan een kaart; tekst in het beeld op ±12 px (±370 css-px van het scherm op ±320 px) */
.uitsnede{position:relative;aspect-ratio:var(--ratio,16/10);overflow:hidden;border-radius:12px;background:var(--papier);margin-bottom:.6rem;}
.uitsnede::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(12,44,71,.10);pointer-events:none;}
.uitsnede img{position:absolute;left:0;top:0;width:var(--w);max-width:none;height:auto;transform:translate(var(--x),var(--y));}
/* Bij twee kolommen zou een tweede uitsnede naast een kaart zonder beeld staan (scheve rij); daar valt hij weg. */
@media (min-width:640px) and (max-width:979.98px){ .uitsnede-niet-bij-twee{display:none;} }

/* ==========================================================================
   KOP VAN DE STARTPAGINA
   ========================================================================== */
.held{padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem);}
.held-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(2rem,4.5vw,4rem);align-items:center;}
.held-boven{font-weight:600;color:var(--zacht);margin-bottom:1rem;}
.held h1{margin-bottom:1.25rem;max-width:15ch;}
.held-intro{font-size:1.15rem;color:var(--zacht);max-width:42ch;margin-bottom:2rem;}
@media (max-width:899.98px){
  .held-grid{grid-template-columns:minmax(0,1fr);}
  .held h1{max-width:18ch;}
}

/* ==========================================================================
   KRUIMELPAD en KOP VAN EEN GEWONE PAGINA
   (.kruimelpad, niet .kruimel: die naam gebruikt support.html al voor zijn artikellezer)
   ========================================================================== */
.kruimelpad{padding-top:clamp(1rem,2.4vw,1.75rem);}
.kruimelpad ol{display:flex;flex-wrap:wrap;align-items:center;font-size:.92rem;color:var(--zacht);}
.kruimelpad li{display:inline-flex;align-items:center;}
.kruimelpad li + li::before{content:"";width:7px;height:7px;margin:0 .75rem 0 .5rem;
  border-top:1.5px solid var(--lijn-sterk);border-right:1.5px solid var(--lijn-sterk);transform:rotate(45deg);}
.kruimelpad a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--zacht);text-decoration:none;}
.kruimelpad a:hover{color:var(--nacht);text-decoration:underline;text-underline-offset:3px;}
.kruimelpad [aria-current="page"]{color:var(--nacht);font-weight:600;}

.product-kop{padding:clamp(.75rem,2vw,1.5rem) 0 clamp(3rem,6vw,4.5rem);}
.product-kop-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start;}
.product-kop h1{margin-bottom:1.25rem;}
.product-intro{font-size:1.15rem;color:var(--zacht);max-width:52ch;margin-bottom:2rem;}
/* een kop zonder rechterkolom (bv. een tekstpagina) */
.product-kop-smal .product-intro{margin-bottom:0;}
.product-kop-smal .knoppen{margin-top:2rem;}

/* "In dit onderdeel": vult de rechterkant met wat er op de pagina staat, in plaats van een beeld. */
.in-dit-onderdeel{background:var(--papier);border-radius:20px;padding:1.25rem 1.5rem 1rem;}
.ido-kop{font-weight:700;font-size:1rem;margin-bottom:.25rem;}
.in-dit-onderdeel li + li{border-top:1px solid var(--lijn);}
.in-dit-onderdeel a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;
  text-decoration:none;font-weight:500;}
.in-dit-onderdeel a:hover{text-decoration:underline;text-underline-offset:3px;}
.in-dit-onderdeel svg{flex:none;color:var(--zacht);}
@media (max-width:899.98px){
  .product-kop-grid{grid-template-columns:minmax(0,1fr);}
  .in-dit-onderdeel{display:none;} /* op de telefoon volgen de kaarten direct; de lijst zou alleen lengte toevoegen */
  .in-dit-onderdeel.ook-smal{display:block;} /* wel tonen als de pagina lang is en de lijst echt de weg wijst */
}

/* ==========================================================================
   FEITENSTROOK, VINKLIJST, DOELGROEPEN, NIEUWS
   ========================================================================== */
.feiten{background:var(--papier);padding:clamp(2rem,4vw,2.75rem) 0;}
.feiten-kop{font-size:1rem;font-weight:600;color:var(--zacht);letter-spacing:0;text-align:center;margin-bottom:1.25rem;}
.feiten-lijst{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.feiten-lijst li{padding:.2rem .9rem;border-left:1px solid var(--lijn);text-align:center;}
.feiten-lijst li:first-child{border-left:0;}
.feiten-lijst b{display:block;font-size:1.12rem;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;}
.feiten-lijst span{display:block;margin-top:.25rem;font-size:.88rem;line-height:1.45;color:var(--zacht);}
@media (max-width:1099.98px){
  .feiten-lijst{grid-template-columns:repeat(2,minmax(0,1fr));}
  .feiten-lijst li{text-align:left;border-left:0;border-top:1px solid var(--lijn);padding:.9rem 1rem .9rem 0;}
  .feiten-lijst li:nth-child(-n+2){border-top:0;}
  .feiten-lijst li:last-child{grid-column:1 / -1;}
}
@media (max-width:559.98px){
  .feiten-kop{text-align:left;}
  .feiten-lijst li{padding:.7rem .75rem .7rem 0;}
  .feiten-lijst b{font-size:1.02rem;}
}
@media (max-width:359.98px){
  .feiten-lijst{grid-template-columns:minmax(0,1fr);}
  .feiten-lijst li:nth-child(2){border-top:1px solid var(--lijn);}
}

/* twee kolommen: links een sectiekop met knoppen, rechts een lijst (vinklijst of iets anders) */
.voordelen-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5.5rem);align-items:start;}
.voordelen-grid .sectie-kop{margin-bottom:0;}
.voordelen-grid .knoppen{margin-top:2rem;}
@media (max-width:899.98px){ .voordelen-grid{grid-template-columns:minmax(0,1fr);} }
.vink-lijst li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1.1rem;padding:1.35rem 0;border-top:1px solid var(--lijn);}
.vink-lijst li:first-child{padding-top:.25rem;border-top:0;}
.vink{width:40px;height:40px;border-radius:999px;background:var(--pastel-mint);color:var(--mint-diep);display:grid;place-items:center;}
.vink-lijst h3{margin:.35rem 0 .3rem;}
.vink-lijst p{color:var(--zacht);}

.doelgroepen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);}
.doelgroep{border-top:1px solid var(--lijn);padding-top:1.25rem;display:flex;flex-direction:column;gap:.5rem;}
.doelgroep p{color:var(--zacht);font-size:.98rem;}
.doelgroep .wet{color:var(--nacht);font-weight:600;font-size:.92rem;margin-top:auto;}
@media (max-width:899.98px){ .doelgroepen{grid-template-columns:minmax(0,1fr);} }

/* In de DOM staat de kop vóór nummer en datum (wie van kop naar kop springt, hoort eerst de titel);
   zichtbaar staat de meta erboven. */
.nieuws-meta{order:-1;display:flex;flex-wrap:wrap;gap:.15rem .6rem;font-size:.9rem;color:var(--zacht);}
.nieuws-meta b{color:var(--nacht);font-weight:700;font-variant-numeric:tabular-nums;}
.nieuws-kaart h3{font-size:1.12rem;line-height:1.3;}

/* ==========================================================================
   OVERSTAPPEN, PRIJS, DEMOFORMULIER, AFSLUITENDE BAND
   ========================================================================== */
.starten-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.starten-grid .sectie-kop{margin-bottom:0;}
@media (max-width:899.98px){ .starten-grid{grid-template-columns:minmax(0,1fr);} }
.prijs-blok{background:var(--wit);border-radius:20px;padding:1.2rem 1.4rem;box-shadow:var(--schaduw);margin:1.5rem 0 1.75rem;max-width:none;}
.prijs-blok b{display:block;color:var(--nacht);font-size:clamp(1.25rem,1rem + 1vw,1.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;}
.prijs-blok span{display:block;color:var(--zacht);font-size:.98rem;margin-top:.2rem;}
.stappen-kop{font-size:1.05rem;margin-bottom:.4rem;}
.stappen li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:.9rem;padding:.75rem 0;border-top:1px solid var(--lijn);}
.stappen li:first-child{border-top:0;}
.stap-nr{width:36px;height:36px;border-radius:999px;border:1.5px solid var(--nacht);display:grid;place-items:center;
  font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;}
.stappen b{display:block;font-weight:700;margin-top:.15rem;line-height:1.35;}
.stappen p{color:var(--zacht);font-size:.98rem;}

.demo-kaart{background:var(--wit);border-radius:24px;padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--schaduw);}
.demo-kaart h2,.demo-kaart h3{font-size:1.4rem;}
.demo-kaart > p{color:var(--zacht);margin-top:.4rem;}
@media (max-width:559.98px){ .demo-kaart{padding:1.35rem 1.25rem;} }

.formulier{display:grid;gap:1rem;margin-top:1.5rem;}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.veld{display:grid;gap:.35rem;}
.veld label{font-size:.92rem;font-weight:600;}
.veld input,.veld textarea{font:inherit;font-size:1rem;color:var(--nacht);background:var(--wit);
  border:1.5px solid var(--lijn-sterk);border-radius:12px;padding:.65rem .85rem;min-height:48px;width:100%;}
.veld input::placeholder,.veld textarea::placeholder{color:var(--zacht);opacity:1;}
.veld input:focus-visible,.veld textarea:focus-visible{outline:3px solid var(--nacht);outline-offset:2px;border-radius:12px;}
.veld textarea{resize:vertical;min-height:92px;}
.veld [aria-invalid="true"]{border-color:var(--fout);}
.form-fout{color:var(--fout);font-weight:600;font-size:.92rem;}
.form-noot{font-size:.85rem;color:var(--zacht);}
.formulier .knop{justify-self:start;}
@media (max-width:559.98px){ .formulier .knop{justify-self:stretch;} }
@media (max-width:359.98px){ .veld-rij{grid-template-columns:minmax(0,1fr);} }

/* invoerveld met een vast achtervoegsel, bv. [jouwnaam].zonote.nl */
.adres{display:flex;align-items:stretch;border:1.5px solid var(--lijn-sterk);border-radius:12px;overflow:hidden;background:var(--wit);}
.adres:focus-within{outline:3px solid var(--nacht);outline-offset:2px;}
.veld .adres input{flex:1;min-width:0;border:0;border-radius:0;min-height:48px;}
.veld .adres input:focus-visible{outline:0;}
.adres span{display:flex;align-items:center;padding:0 .9rem;background:var(--papier);color:var(--zacht);font-weight:600;
  border-left:1px solid var(--lijn);white-space:nowrap;}
.adres:has([aria-invalid="true"]){border-color:var(--fout);}

/* rekenvoorbeeld bij de prijs: n × € 29,50 (site.js vult het in; zonder script staat er een vast voorbeeld) */
.rekenaar{background:var(--wit);border-radius:20px;padding:1.2rem 1.4rem;box-shadow:var(--schaduw);display:grid;gap:.6rem;}
.rekenaar label{font-weight:600;}
.rekenaar input[type="range"]{width:100%;min-height:44px;accent-color:var(--nacht);cursor:pointer;}
.rekenaar .reken-som{font-size:1.1rem;}
.rekenaar .reken-som b{font-variant-numeric:tabular-nums;}

/* afsluitende band onderaan een pagina */
.band{padding:clamp(2.5rem,5vw,3.75rem) 0;}
.band-grid{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap;}
.band h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);}
.band p{color:var(--zacht);margin-top:.5rem;}
.band p b{color:var(--nacht);font-variant-numeric:tabular-nums;}

/* ==========================================================================
   LIJSTEN EN TEKST: functielijst, veelgestelde vragen, lopende tekst
   ========================================================================== */
/* functielijst: per functie een h3 en een alinea, twee kolommen met haarlijnen (bv. /functies) */
.functielijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,3.5rem);}
.functielijst > *{padding:1.1rem 0 1.2rem;border-top:1px solid var(--lijn);}
.functielijst h3{font-size:1.05rem;margin-bottom:.3rem;}
.functielijst p{color:var(--zacht);font-size:.98rem;}
@media (max-width:759.98px){ .functielijst{grid-template-columns:minmax(0,1fr);} }
.module-voet{margin-top:1.25rem;font-size:.95rem;color:var(--zacht);}
.module-voet a{color:var(--nacht);font-weight:600;text-underline-offset:3px;}

/* veelgestelde vragen: <details class="vraag"><summary>…</summary><div class="antwoord">…</div></details> */
.vragen{max-width:820px;border-top:1px solid var(--lijn);}
.vraag{border-bottom:1px solid var(--lijn);}
.vraag summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.75rem 0;
  font-weight:600;font-size:1.05rem;cursor:pointer;list-style:none;}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary::after{content:"";flex:none;width:9px;height:9px;margin-right:.35rem;border-right:2px solid var(--nacht);
  border-bottom:2px solid var(--nacht);transform:rotate(45deg) translateY(-3px);transition:transform .15s ease;}
.vraag[open] summary::after{transform:rotate(-135deg) translateY(-3px);}
.vraag summary:hover{text-decoration:underline;text-underline-offset:4px;}
.vraag .antwoord{padding:0 0 1.25rem;color:var(--zacht);}
.vraag .antwoord a{color:var(--nacht);font-weight:600;}

/* lopende tekst (bv. /security): koppen, alinea's en lijsten met opsommingstekens */
.tekst{max-width:720px;}
.tekst h2{font-size:clamp(1.4rem,1.15rem + .9vw,1.85rem);margin:2.5rem 0 .75rem;}
.tekst h2:first-child{margin-top:0;}
.tekst p,.tekst ul,.tekst ol{margin-bottom:1rem;}
.tekst ul{list-style:disc;padding-left:1.4rem;}
.tekst ol{list-style:decimal;padding-left:1.4rem;}
.tekst li{margin-bottom:.4rem;padding-left:.2rem;}
.tekst a{font-weight:600;text-underline-offset:3px;}
.tekst .stil{color:var(--zacht);}
/* .kader alleen binnen .tekst: support.html gebruikt in zijn artikelen een eigen .kader */
.tekst .kader{background:var(--pastel-warm);border-radius:16px;padding:1rem 1.25rem;margin:1.25rem 0 1.5rem;}
.tekst .kader p{margin:0;}

/* ==========================================================================
   VOET
   ========================================================================== */
.voet{background:var(--nacht);color:var(--op-nacht);padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.95rem;}
.voet-kolommen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem;}
.voet-kop{font-size:1rem;font-weight:700;color:var(--wit);letter-spacing:0;margin-bottom:.35rem;}
/* Een lang woord mag de kolom niet uit (WCAG 1.4.10, 320 px; ook bij vijf kolommen op 980–1024 px):
   in de HTML staat een &shy; op de mooiste plek (Verwerkers-/overeenkomst), overflow-wrap:anywhere
   is het vangnet voor een woord zonder afbreekpunt. */
.voet-kolommen a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--op-nacht);text-decoration:none;
  overflow-wrap:anywhere;}
.voet-kolommen a:hover{color:var(--wit);text-decoration:underline;text-underline-offset:3px;}
.voet-kolommen a[aria-current="page"]{color:var(--wit);text-decoration:underline;text-underline-offset:3px;}
/* toelichting onder een link (bv. "demo en vragen vooraf"): geen negatieve marge, anders ligt hij over
   de onderkant van de link en is maar ±34 van de 44 px tikbaar */
.voet-kolommen .klein{display:block;font-size:.85rem;line-height:1.4;margin-bottom:.6rem;}
.voet-onder{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--lijn-op-nacht);}
.voet-merk{display:inline-flex;align-items:center;gap:.6rem;}
.voet-merk img{width:30px;height:30px;}
.voet-merk .woordmerk{color:var(--wit);font-size:1.3rem;}
.voet-regels{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:center;}
.voet-regels a{display:inline-flex;align-items:center;min-height:44px;color:var(--op-nacht);text-decoration:none;}
.voet-regels a:hover{color:var(--wit);text-decoration:underline;text-underline-offset:3px;}
/* "security.txt en meldbeleid" op /security; wit op nacht 14,32:1 */
.voet-regels a[aria-current="page"]{color:var(--wit);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:979.98px){ .voet-kolommen{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1.5rem;} }