/* ==========================================================================
   Schrijfmaatje — stylesheet (v2)
   Ontwerpbelofte: "Een warme brief, modern bezorgd."
   Richting: aards & gekleurd, knus-nostalgisch (niet pastel), kaartje/poster-look.
   Platte vlakken, RECHTE hoeken, stevige hoog-contrast kaders i.p.v. zachte schaduw.
   Forse, strakke schreefloze typografie — warmte komt uit kleur, niet uit serif.
   Volle kleurbanden (terracotta/olijf/bruin) afgewisseld met crème + korrel.

   Toegankelijkheid (persoonlijke eis Rutger, slechtziend):
   lopende tekst AAA (~8:1+), basis 19px, zichtbare focus, raakdoelen >=48px,
   prefers-reduced-motion, mobiel-eerst. Witte tekst alleen op de diepe banden.
   Geen JavaScript nodig; beweging is progressieve verfraaiing.
   Geen externe fonts (AVG) — gecureerde systeem-sans-stack.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Inkt & tekst — donker warm bruin, hoog contrast op crème */
  --inkt:        #2b1c10;   /* hoofdtekst ~13:1 op crème */
  --zacht:       #4a3825;   /* gedempt, ~8:1 (AAA) op crème */

  /* Papier / lichte vlakken (warm, met korrel) */
  --papier:      #faf3e2;   /* lichtste crème (forms/faq) */
  --creme:       #f3e7cb;   /* warme basis-band */
  --zand:        #ecdcb4;   /* zand-band (CTA) */
  --kaart:       #fffaf0;   /* kaart-vlak op donkere banden */
  --lijn:        #d8c39a;   /* warme lijn op licht */

  /* Aardse kleuren — volle banden */
  --terracotta:      #b6502c;
  --terracotta-diep: #8a3a1e;   /* wit erop ~8.7:1 (AAA) */
  --oker:            #c1881d;
  --oker-diep:       #7e5609;   /* op crème ~4.6:1 (AA) — donkerder gemaakt voor 1.4.3 */
  --olijf:           #5d6b34;
  --olijf-diep:      #434f25;   /* wit erop ~8.5:1 (AAA) */
  --bruin-diep:      #33241a;   /* wit erop ~12:1 (AAA) */

  /* Vonk — spaarzaam, decoratief */
  --goud-licht:  #e6b850;

  /* Wereld-accent: terracotta = Meedoen (standaard), oker = Ik kreeg post.
     Een taakpagina kan binnen .wereld-post de accentkleur omzetten, zodat de
     gekozen wereld doorleeft in de knop, de voortgang en de focus, niet alleen
     in de kicker. Standaard verandert er niets aan de rest van de site. */
  --wereld:       #8a3a1e;   /* = --terracotta-diep */
  --wereld-hover: #b6502c;   /* = --terracotta */

  /* Status */
  --fout-tekst:  #8c1c29;   /* op licht ~7:1 */
  --fout-bg:     #f7e2df;
  --fout-rand:   #b5302a;
  --ok-tekst:    #15602f;
  --ok-bg:       #e0efdf;

  /* Typografie — geen externe fonts (AVG). Modern-strak schreefloos. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable",
          Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Vorm & ruimte — recht & stevig */
  --rand:       2px;
  --rand-dik:   3px;
  --radius:     0px;        /* rechte hoeken */
  --radius-klein: 2px;

  --inhoud:      1600px;   /* ruime grens: op normale schermen géén zichtbare kolom */
  --inhoud-smal: 880px;
  --inhoud-mid:  1100px;
  --tekst:       72ch;     /* alleen lopende tekst — leesbaar blijven (AAA/slechtziend) */

  /* Subtiele papierkorrel (data-URI, geen extern bestand) */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset & basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Geen overflow-x: hidden op html: dat verstopt te brede inhoud geruisloos buiten
   beeld, juist bij sterk inzoomen (reflow 1.4.10). Te brede elementen lossen we
   lokaal op (zie .beeldvlak-kader en overflow-wrap hieronder). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: 6rem; }  /* houdt focus/ankers onder de sticky header vandaan (WCAG 2.4.11) */

/* Tekstgrootte-regelaar: schaal de root, zodat alle rem-maten meeschalen. */
html[data-tekst="groot"]  { font-size: 112.5%; }
html[data-tekst="groter"] { font-size: 125%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 1.1875rem;   /* ~19px */
  line-height: 1.6;
  color: var(--inkt);
  background: var(--creme);
  background-image: var(--korrel);
  -webkit-font-smoothing: antialiased;
  /* Vangnet tegen horizontale overloop: laat overal een te lang woord afbreken in plaats van
     de pagina breder dan het scherm te duwen (vooral bij tekstgrootte A++ op smal scherm). */
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

/* --------------------------------------------------------------------------
   3. Typografie — fors & strak
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--inkt);
  line-height: 1.08;
  margin: 0 0 .6rem;
  letter-spacing: -.022em;
  font-weight: 800;
  text-wrap: balance;
  /* Een lang woord (zoals "Schrijfmaatje") mag afbreken als het écht niet in zijn kolom past.
     Dat gebeurt alleen op heel smal scherm of met tekstgrootte A++; zonder die nood verandert
     er niets. Voorkomt dat zo'n woord de pagina breder dan het scherm duwt (horizontale
     overloop), waardoor rechts de taalchip en de hamburger buiten beeld zouden vallen. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 3.8rem); font-weight: 900; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
p  { margin: .8rem 0; }

a { color: var(--terracotta-diep); font-weight: 700; text-decoration: underline;
    text-underline-offset: .16em; text-decoration-thickness: .09em; }
/* Eén consistente hover/focus voor alle links: kleur verschuift en de onderlijn
   wordt duidelijk dikker. Werkt overal hetzelfde. */
a:hover, a:focus-visible { color: var(--terracotta); text-decoration-thickness: .2em; }

/* Tekstlinks in alinea's op donkere banden: leesbaar wit met gouden onderlijn,
   op hover wordt de tekst goud. */
.band--terracotta p a, .band--olijf p a, .band--bruin p a, .band--teal p a {
  color: #fff; text-decoration-color: var(--goud-licht); text-decoration-thickness: .12em;
}
.band--terracotta p a:hover, .band--olijf p a:hover,
.band--bruin p a:hover, .band--teal p a:hover { color: var(--goud-licht); }

strong { font-weight: 800; }

.inhoud > h1, .inhoud > h2, .inhoud > h3,
.inhoud > p, .inhoud > ul, .inhoud > ol,
.band-kop, .inhoud > .veld { max-width: var(--tekst); }
.inhoud--smal > * { max-width: 100%; }
/* Grids zijn géén lopende tekst: laat ze de volle breedte vullen */
.inhoud > .stappen, .inhoud > .privacy-lijst { max-width: none; }

/* --------------------------------------------------------------------------
   4. Full-bleed band-systeem  (kern van "full screen", knus & gevuld)
   -------------------------------------------------------------------------- */
main.hoofd { flex: 1 0 auto; width: 100%; }

.band {
  width: 100%;
  padding-block: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);
}
.band > .inhoud {
  width: 100%;
  max-width: var(--inhoud);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 4.5rem);   /* vloeiende marges: schalen mee met het scherm */
}
.band > .inhoud--smal { max-width: var(--inhoud-smal); }
.band > .inhoud--mid  { max-width: var(--inhoud-mid); }

.inhoud--mid > h1, .inhoud--mid > h2, .inhoud--mid > h3,
.inhoud--mid > p, .inhoud--mid > ul, .inhoud--mid > ol,
.inhoud--mid > .veld { max-width: var(--tekst); }
.inhoud--mid > * { max-width: 100%; }

/* Lichte banden (donkere inkt) */
.band--wit   { background: var(--papier); background-image: var(--korrel); }
.band--creme { background: var(--creme); background-image: var(--korrel); }
.band--zand  { background: var(--zand);  background-image: var(--korrel); }

/* Volle kleurbanden (witte tekst, AAA) */
.band--terracotta { background: var(--terracotta-diep); color: #fff; }
.band--olijf      { background: var(--olijf-diep);      color: #fff; }
.band--bruin      { background: var(--bruin-diep);      color: #fff; }
.band--terracotta h1, .band--terracotta h2, .band--terracotta h3,
.band--olijf h1, .band--olijf h2, .band--olijf h3,
.band--bruin h1, .band--bruin h2, .band--bruin h3 { color: #fff; }
.band--terracotta a, .band--olijf a, .band--bruin a { color: var(--goud-licht); }

/* Aliassen voor bestaande templateklassen */
.band--teal { background: var(--olijf-diep); color: #fff; }
.band--teal h2 { color: #fff; }
.band--teal a  { color: var(--goud-licht); }
.band--hero { /* zie hero */ }
.band--cta  { background: var(--zand); background-image: var(--korrel); }

.band-kop { margin-bottom: 1.6rem; }
.band-kop h2 { margin-bottom: .35rem; }
.band-kop-icoon {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; margin-bottom: .8rem;
  border: var(--rand) solid rgba(255,255,255,.55);
  color: var(--goud-licht);
}
.band-kop-icoon .vlak-icoon { width: 1.7rem; height: 1.7rem; }

/* Dunne postale streep-scheiding (subtiele hint) */
.perforatie {
  border: 0; height: 0;
  border-top: 2px dashed var(--lijn);
  margin: 2.5rem 0;
}

/* --------------------------------------------------------------------------
   5. Skip-link & schermlezer-utilities
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--bruin-diep); color: #fff;
  padding: .8rem 1.2rem; font-weight: 800;
  text-decoration: underline;
}
.skip-link:focus, .skip-link:focus-visible {
  left: 0; outline: var(--rand-dik) solid var(--goud-licht); outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Honeypot — NOOIT verwijderen */
.hp {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   6. Header & navigatie — stevig, kaartje-rand
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: var(--rand-dik) solid var(--inkt);
  /* De balk-chrome (merk, nav, knoppen) staat op een VASTE basisgrootte, los van de
     leesgrootteknop (A/A+/A++). Die knop is bedoeld om de lopende tekst te vergroten, niet
     om de balk zelf op te blazen: vroeger groeide alles in rem zo hard mee dat de knoppen
     enorm werden en "Schrijfmaatje" niet meer paste en afgekapt werd. Px hier (in plaats van
     rem) ontkoppelt de balk van die keuze; browser-zoom schaalt px wél mee, dus inzoomen
     vergroot de balk gewoon (WCAG 1.4.4). Binnen de header zijn alle maten daarom in em,
     relatief aan deze 18px, zodat ze stabiel blijven. */
  font-size: 18px;
  --balk-knop: 2.5em;   /* 45px: ruim boven de 44px-richtlijn voor tikdoelen (WCAG 2.5.8) */
}
/* Bij een laag venster (sterk ingezoomd of liggend telefoontje) eet een plakkende
   header te veel leesruimte op; dan scrolt hij gewoon mee. */
@media (max-height: 30rem) {
  .site-header { position: static; }
  html { scroll-padding-top: 1rem; }
}
.balk {
  position: relative;
  width: 100%; max-width: var(--inhoud); margin-inline: auto;
  /* Verticale ruimte in em (mee met de balk-basis); horizontale marge in rem zodat de balk
     netjes uitlijnt met de inhoud eronder. */
  padding: .55em clamp(1.15rem, 5vw, 4.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em;
}

.merk { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; color: var(--inkt); }
.merk-logo { display: inline-flex; flex: none; }
.merk-logo img { width: 3.1em; height: 3.1em; object-fit: contain; display: block; }
.merk-mark { width: 2.7em; height: 2.7em; }
.merk-mark-tegel { fill: var(--terracotta); stroke: var(--inkt); stroke-width: 2; }
.merk-mark-route { fill: none; stroke: var(--kaart); stroke-width: 3.4; stroke-linecap: round; }
.merk-mark-stip  { fill: var(--goud-licht); stroke: var(--inkt); stroke-width: 1.5; }

.merk-tekst { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; min-width: 0; }
.merk-naam { font-size: 1.45em; font-weight: 900; letter-spacing: -.02em; color: var(--inkt); white-space: nowrap; }
.strapline { margin: 0; color: var(--zacht); font-size: .82em; line-height: 1.2; }

/* Standaard knophoogte voor .hoofdnav-links. De header overschrijft dit met een em-waarde
   (zie .site-header), zodat de balk niet meeschaalt met de leesgrootteknop. Deze rem-waarde
   geldt daarmee vooral voor de footer-nav, die wél gewoon met de root mee mag schalen. */
:root { --balk-knop: 2.75rem; }   /* 44px (WCAG 2.5.8) */

.hoofdnav { display: flex; flex-wrap: wrap; gap: .35rem; }
.hoofdnav a {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--balk-knop); min-height: var(--balk-knop);
  text-decoration: none; color: var(--inkt);
  padding: 0 .85rem;
  border: var(--rand) solid transparent;
  font-weight: 800; line-height: 1;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.hoofdnav a:hover { background: var(--terracotta-diep); color: #fff; border-color: var(--terracotta-diep); }

/* Tekstgrootte-regelaar (toegankelijkheid) — drie losse, even grote knoppen A / A+ / A++. */
.tekstregelaar {
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: .3em;
}
.tekstregelaar-label {
  display: inline-flex; align-items: center;
  height: var(--balk-knop);
  margin-right: .2em;
  white-space: nowrap;
  font-weight: 800; font-size: .95em; color: var(--zacht);
}
.tekstknop {
  align-self: center; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  /* Alle drie de knoppen identiek: een vaste, gelijke doos (breed genoeg dat ook "A++" er
     ruim in past, zodat geen enkele knop opduwt) en dezelfde lettergrootte. Niets groeit,
     ook niet wanneer A++ is gekozen, want de balk staat op een vaste basis (zie .site-header).
     De betekenis van elke knop zit in zijn toegankelijke naam (aria-label). */
  width: 2.7em; height: var(--balk-knop);
  padding: 0;
  background: var(--kaart); color: var(--inkt);
  border: var(--rand) solid var(--inkt);
  font-family: var(--sans); font-weight: 900; font-size: 1em; line-height: 1; cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.tekstknop:hover { background: var(--zand); }
.tekstknop[aria-pressed="true"] {
  background: var(--terracotta-diep); color: #fff; border-color: var(--terracotta-diep);
}
.tekstknop:focus-visible {
  outline: var(--rand-dik) solid var(--terracotta); outline-offset: 2px;
}

/* Header-indeling. Van breed naar smal verdwijnt stap voor stap: de strapline (< 80rem), de
   inline-nav schuift achter de hamburger (< 72rem) en ten slotte valt de wordmark
   "Schrijfmaatje" netjes weg (< 30rem). Het logo blijft altijd staan. Omdat de balk niet meer
   met de leesgrootteknop opblaast (zie .site-header), past boven elke breakpoint de inhoud
   echt, dus afkappen is nergens nodig.
   De balk mag wrappen (flex-wrap: wrap, de standaard). Wordt het tóch krap (bijvoorbeeld bij
   sterk inzoomen, waarbij alles fysiek groter wordt), dan zakt de bediening netjes als geheel
   naar een tweede regel in plaats van van het scherm af te lopen. Het acties-blok blijft één
   geheel (zie .balk-acties), dus de A/A+/A++-knoppen splitsen daarbij nooit op.
   De uitklap-nav hangt los onder de balk (position: absolute), zodat hij geen regel opbreekt. */

.balk .merk { order: 1; flex: 0 1 auto; }
/* "Schrijfmaatje" wordt NOOIT afgekapt. Geen overflow-clip, geen ellipsis: boven de
   breakpoint past de naam altijd (de balk blaast niet meer op, zie .site-header), en eronder
   valt de wordmark netjes weg en blijft alleen het logo. De merk-link houdt zijn aria-label,
   dus een schermlezer hoort "Schrijfmaatje" ook als de tekst visueel weg is. De strapline
   mag desnoods naar een tweede regel wrappen, maar clipt nooit. */

/* Acties-blok: tekstgrootte-knoppen + hamburger, altijd samen, op één rij en niet krimpend. */
.balk-acties {
  order: 3; margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; flex-wrap: nowrap; gap: .5em;
}

/* Hamburger-knop: alleen op smal scherm en alleen met JS (anders een dode knop).
   Vaste vierkante maat (net als de tekstknoppen) zodat de knop niet kan "uitlopen": zonder
   expliciete breedte rekt zijn intrinsieke breedte onverwacht op, waardoor de knop de balk
   uit de pagina duwde en het icoon buiten beeld viel. font-size: 1em zodat hij de 18px van de
   balk erft in plaats van de kleinere UA-knoplettergrootte. */
.hamburger {
  flex: 0 0 auto; display: none;
  align-items: center; justify-content: center;
  width: var(--balk-knop); height: var(--balk-knop); padding: 0;
  font-size: 1em;
  background: transparent; color: var(--inkt);
  border: var(--rand) solid var(--inkt); cursor: pointer;
  transition: background-color .12s ease;
}
.has-js .hamburger { display: inline-flex; }
.hamburger:hover { background: var(--zand); }
.hamburger:focus-visible { outline: var(--rand-dik) solid var(--terracotta); outline-offset: 2px; }

/* Drie-streepjes-icoon via CSS (geen afbeelding nodig). Maten in hele pixels (niet in em),
   zodat de drie balken allemaal even dik en even scherp renderen; de middelste balk is de
   span zelf, de buitenste twee zijn de pseudo's, allemaal 22x2px en links uitgelijnd. */
.hamburger-icoon { position: relative; display: block; width: 22px; height: 2px; background: currentColor; transition: background-color .15s ease; }
.hamburger-icoon::before,
.hamburger-icoon::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 2px; background: currentColor;
  transition: top .15s ease, transform .15s ease;
}
.hamburger-icoon::before { top: -7px; }
.hamburger-icoon::after  { top:  7px; }
/* Open = een net, recht kruis: middelste balk weg, de buitenste twee schuiven naar het midden
   (top: 0) en draaien daar om hun eigen middelpunt. Geen extra translate na het draaien, dus
   geen scheve/verschoven X meer. */
.hamburger[aria-expanded="true"] .hamburger-icoon { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger-icoon::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-icoon::after  { top: 0; transform: rotate(-45deg); }

/* Nav zonder JS (fallback): in-flow kolom onder de balk; .balk mag dan wrappen. */
.balk .hoofdnav {
  order: 4; flex: 1 0 100%;
  flex-direction: column; gap: 0; align-items: stretch;
  border-top: var(--rand) solid var(--lijn); margin-top: .25em;
}
/* Nav met JS op smal scherm: een uitklap-paneel dat LOS onder de balk hangt, zodat de
   balk zelf één regel blijft. Verborgen tot de hamburger het opent. */
.has-js .balk .hoofdnav {
  display: none; order: 0; margin-top: 0; border-top: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  background: var(--papier);
  border-bottom: var(--rand-dik) solid var(--inkt);
  padding: .25em clamp(1.15rem, 5vw, 4.5rem) .5em;
  box-shadow: 0 10px 16px rgba(43,28,16,.12);
}
.has-js .balk .hoofdnav.menu-open { display: flex; }

/* Nav-links in de uitklap */
.balk .hoofdnav a {
  justify-content: flex-start; border: none;
  border-bottom: 1px solid var(--lijn);
  padding: .7em 0; height: auto;
}
.balk .hoofdnav a:last-of-type { border-bottom: none; }

/* Zonder JavaScript doet de tekstvergroter niets; verberg hem dan (browserzoom blijft). */
html:not(.has-js) .tekstregelaar { display: none; }

/* Het woordlabel "Tekstgrootte" staat naast de knoppen zodra er ruimte voor is (>= 48rem):
   dat maakt de regelaar vindbaar (uit onderzoek: nu vaak een "verborgen schat"). Op smal
   scherm valt het label weg en dragen de A/A+/A++-knoppen de betekenis zelf; de groep houdt
   sowieso zijn aria-label voor de schermlezer. */
.tekstregelaar-label { display: none; }
@media (min-width: 48rem) {
  .tekstregelaar-label { display: inline-flex; }
}

/* De strapline verschijnt pas op heel breed scherm (>= 80rem), waar er royaal plek voor
   is. Daaronder is hij gewoon weg, nooit half afgekapt. */
@media (max-width: 79.99rem) { .strapline { display: none; } }

/* Onder 30rem valt de wordmark "Schrijfmaatje" netjes weg (nooit afgekapt); alleen het logo
   blijft (de merk-link houdt zijn aria-label voor de schermlezer). De grens ligt op 30rem
   omdat logo + wordmark + knoppen + hamburger daarboven nog ruim op één regel passen (gemeten:
   bij 480px is er nog speling tussen merk en bediening; pas rond 450px gaan ze overlappen).
   Zo blijft "Schrijfmaatje" zo lang mogelijk staan en valt het pas op smalle telefoons weg. */
@media (max-width: 29.99rem) {
  .merk-naam { display: none; }
}
/* Echt smal (telefoon): logo en knoppen wat compacter en krappere tussenruimtes, zodat logo
   + A/A+/A++ + hamburger ook op een smalle telefoon mét scrollbalk ruim passen. De knophoogte
   blijft 45px (>= 44px, WCAG 2.5.8). */
@media (max-width: 33.99rem) {
  .merk { gap: .4em; }
  .merk-logo img { width: 2.5em; height: 2.5em; }
  .tekstknop { width: 2.5em; }
  .tekstregelaar { gap: .2em; }
  .balk-acties { gap: .35em; }
}

/* Breed scherm (>= 72rem): de nav staat inline als rij rechts, de hamburger gaat weg. */
@media (min-width: 72rem) {
  .has-js .hamburger { display: none; }
  .has-js .balk .hoofdnav,
  .balk .hoofdnav {
    display: flex; order: 2;
    position: static; flex: 1 1 auto; min-width: 0;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-end; gap: .3em;
    background: none; border-bottom: none; box-shadow: none; padding: 0;
  }
  .balk .hoofdnav a {
    justify-content: center; border-bottom: none;
    padding: 0 .8em; height: var(--balk-knop); min-height: var(--balk-knop);
  }
  /* De nav (flex-grow) vult de ruimte en lijnt zijn links rechts uit; het acties-blok
     sluit er met de balk-gap rechts op aan (dus hier geen auto-marge). */
  .balk-acties { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   6b. Taalbalk — smal strookje bovenaan, boven de header
   -------------------------------------------------------------------------- */
/* Een dun strookje met de taalwissel, helemaal bovenaan. Bewust NIET sticky: het scrolt
   mee weg zodat het op de telefoon de inhoud maar een regel naar beneden duwt, terwijl de
   header eronder wel blijft plakken. Donkere bruin-tint, zelfde als de footer, zodat de
   twee samen de boven- en onderrand vormen en het strookje duidelijk niet de header is.
   De chips staan rechts; de taal is een echte link (werkt zonder JavaScript). */
/* De taalbalk staat, net als de header, op een vaste basisgrootte: de NL/EN-chips horen niet
   mee op te blazen met de leesgrootteknop (browser-zoom vergroot ze nog gewoon). */
.taalbalk { background: var(--bruin-diep); border-bottom: var(--rand) solid var(--inkt); font-size: 16px; }
.taalbalk-binnen {
  width: 100%; max-width: var(--inhoud); margin-inline: auto;
  padding: .3em clamp(1.15rem, 5vw, 4.5rem);
  display: flex; align-items: center; justify-content: flex-end; gap: .45em;
}

.taalchip {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .35em .6em; min-height: 2.1em;
  background: transparent; color: #fff;
  border: var(--rand) solid rgba(255,255,255,.7);
  font-weight: 800; font-size: .95em; line-height: 1; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
/* De vlag-tegel is op de donkere band lichter omrand dan de standaard inkt-rand. */
.taalchip .vlag-svg { display: block; width: 1.1em; height: 1.1em; border: var(--rand) solid rgba(255,255,255,.85); }
.taalchip:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.taalchip:focus-visible { outline: var(--rand-dik) solid var(--goud-licht); outline-offset: 2px; }
/* Actieve taal: gevuld zand met donkere inkt, onmiskenbaar anders dan de open chip
   (verschil zit in meer dan kleur: vulling plus donkere tekst). Geen link. */
.taalchip--actief {
  background: var(--zand); color: var(--inkt);
  border-color: var(--zand); cursor: default;
}
.taalchip--actief .vlag-svg { border-color: var(--inkt); }

/* --------------------------------------------------------------------------
   7. Hero — tekst links + foto rechts
   -------------------------------------------------------------------------- */
.band--hero {
  background:
    linear-gradient(180deg, rgba(193,136,29,.10), transparent 40%),
    var(--creme);
  background-image: var(--korrel);
  border-bottom: var(--rand-dik) solid var(--inkt);
}
.hero {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
}
@media (min-width: 860px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
}
.hero-tekst { max-width: none; }
.hero .lead { max-width: 46ch; }

/* Woordmerk in de hero — niet meer nodig: de merknaam staat nu altijd in de
   balk (die klapt niet meer in). We laten het element staan maar verborgen. */
.hero-wordmark {
  display: none;
  margin: 0 0 .9rem;
  font-weight: 900; font-size: 1.55rem; line-height: 1;
  color: var(--inkt); letter-spacing: -.02em;
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
  padding: .4rem .9rem;
  background: var(--terracotta-diep); color: #fff;
  font-size: .9rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.hero-kicker::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--goud-licht); flex: none;
}
.hero-titel { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.4rem); letter-spacing: -.03em; margin: 0 0 .7rem; }
.lead { font-size: clamp(1.12rem, 1.02rem + .5vw, 1.3rem); line-height: 1.5; color: var(--zacht); max-width: 48ch; }
.lead--midden { margin-inline: auto; }

.intro { color: var(--zacht); font-size: 1.1rem; line-height: 1.55; }
.intro--licht { color: rgba(255,255,255,.92); }

/* --------------------------------------------------------------------------
   8. Tweesprong — twee gelijkwaardige keuze-deuren (op kleurband)
   -------------------------------------------------------------------------- */
.tweesprong { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 720px) { .tweesprong { grid-template-columns: 1fr 1fr; } }
/* Panelen als grid-kaart: geen eigen top-marge, gelijke hoogte per rij. */
.tweesprong > .paneel { margin-top: 0; height: 100%; }

.deur {
  display: flex; flex-direction: column; gap: .8rem;
  background: var(--kaart);
  border: var(--rand-dik) solid var(--inkt);
  border-left: 9px solid var(--terracotta);
  padding: 1.7rem 1.6rem;
  text-decoration: none; color: var(--inkt);
  transition: transform .12s ease, background-color .12s ease;
}
.deur:hover { transform: translateY(-3px); background: #fff; }
.deur:focus-visible { outline: var(--rand-dik) solid var(--goud-licht); outline-offset: 3px; }
/* Eén regel voor de hele site: elke deur houdt zijn eigen accentkleur, op ELKE band
   (H6). Schrijven/terugschrijven (pen) = terracotta, post ontvangen/bevestigen
   (brievenbus) = oker. Zo blijven de twee deuren binnen een hub altijd van elkaar te
   onderscheiden; de kicker en de bandkleur vertellen al in welke wereld je zit. Eerder
   forceerden losse band-regels beide deuren naar één kleur, waardoor het onderscheid
   tussen de deuren wegviel. */
.deur--schrijven { border-left-color: var(--terracotta); }
.deur--ontvangen { border-left-color: var(--oker); }

.deur-icoon {
  display: inline-grid; place-items: center;
  width: 3.2rem; height: 3.2rem; flex: none;
  border: var(--rand) solid var(--inkt);
  background: var(--terracotta); color: #fff;
}
.deur-icoon .vlak-icoon { width: 1.8rem; height: 1.8rem; }
.deur--ontvangen .deur-icoon { background: var(--oker); }

.deur-tekst { display: flex; flex-direction: column; gap: .3rem; }
.deur-titel { font-size: 1.5rem; font-weight: 900; color: var(--inkt); letter-spacing: -.02em; }
.deur-uitleg { color: var(--zacht); font-size: 1.04rem; line-height: 1.45; }

.deur-actie { margin-top: .2rem; font-weight: 900; color: var(--terracotta-diep);
  display: inline-flex; align-items: center; gap: .45rem; }
.deur--ontvangen .deur-actie { color: var(--oker-diep); }
.deur-actie::after { content: "→"; transition: transform .12s ease; }
.deur:hover .deur-actie::after { transform: translateX(5px); }

/* Zelfservice-acties (accountcode kwijt, verhuizen, afmelden): scanbare kaarten in
   plaats van linkjes verstopt in lopende tekst. Elke kaart heeft een duidelijke kop,
   één regel uitleg en een echte knop met een groot klikvlak. Lichter dan de grote
   .deur-kaarten, want dit zijn onderhouds-acties, geen hoofdkeuzes. */
.zelfservice { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.4rem; }
@media (min-width: 720px) { .zelfservice { grid-template-columns: repeat(3, 1fr); } }
.zelfservice-kaart {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--kaart);
  border: var(--rand) solid var(--inkt);
  border-top: 6px solid var(--oker);
  padding: 1.3rem 1.3rem 1.4rem;
}
.zelfservice-kaart h3 { font-size: 1.2rem; font-weight: 900; color: var(--inkt);
  letter-spacing: -.01em; margin: 0; }
.zelfservice-kaart p { color: var(--zacht); font-size: 1rem; line-height: 1.45;
  margin: 0; flex: 1; }
.zelfservice-kaart .knop-secundair { margin-top: .3rem; align-self: flex-start; }

/* --------------------------------------------------------------------------
   9. Knoppen — vlak, recht, stevig
   -------------------------------------------------------------------------- */
.knoppen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.3rem; }
.knoppen--midden { justify-content: center; }

.knop, .knop-secundair {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .8rem 1.7rem;
  border: var(--rand-dik) solid var(--inkt);
  font-family: var(--sans); font-size: 1.05rem; font-weight: 800; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .1s ease, background-color .12s ease, color .12s ease;
}
.knop { background: var(--wereld); color: #fff; }
.knop:hover { background: var(--wereld-hover); color: #fff; }
.knop:active { transform: translateY(2px); }

.knop-secundair { background: var(--kaart); color: var(--inkt); }
.knop-secundair:hover { background: var(--oker); color: var(--inkt); }
.knop-secundair:active { transform: translateY(2px); }

/* Zichtbare hover-lift voor alle knoppen, zodat de hover-staat onmiskenbaar is en
   niet alleen op kleur leunt. De reduced-motion-regel onderaan zet dit automatisch
   uit voor wie geen beweging wil. */
.knop:hover, .knop-secundair:hover { transform: translateY(-2px); }
/* Indrukken gaat omlaag; staat ná de hover-regel zodat 'active' wint tijdens de klik. */
.knop:active, .knop-secundair:active { transform: translateY(2px); }

/* Op donkere banden */
.band--terracotta .knop, .band--olijf .knop, .band--bruin .knop, .band--teal .knop {
  background: var(--goud-licht); color: var(--bruin-diep); border-color: var(--bruin-diep);
}
.band--terracotta .knop:hover, .band--olijf .knop:hover, .band--bruin .knop:hover, .band--teal .knop:hover {
  background: #f3c96a;
}
.band--terracotta .knop-secundair, .band--olijf .knop-secundair,
.band--bruin .knop-secundair, .band--teal .knop-secundair {
  background: transparent; color: #fff; border-color: #fff;
}
/* Op donkere banden: hover keert de outline-knop om naar een vol wit vlak met
   donkere tekst. Onmiskenbaar zichtbaar en ruim hoog contrast (~12:1), in plaats van
   de oude nauwelijks zichtbare doorschijnende laag. */
.band--terracotta .knop-secundair:hover, .band--olijf .knop-secundair:hover,
.band--bruin .knop-secundair:hover, .band--teal .knop-secundair:hover {
  background: #fff; color: var(--bruin-diep); border-color: #fff;
}

/* --------------------------------------------------------------------------
   10. Voortgangsindicator
   -------------------------------------------------------------------------- */
.voortgang-kop { font-weight: 900; color: var(--wereld); margin: 0 0 .6rem;
  font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; }
.voortgang { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem 0; padding: 0; margin: 0 0 1.3rem; }
.voortgang-stap { display: flex; align-items: center; gap: .55rem; color: var(--zacht); font-size: 1rem; }
.voortgang-stap:not(:last-child)::after {
  content: ""; display: inline-block; width: 1.6rem; height: 2px;
  background: var(--lijn); margin: 0 .35rem; flex: none;
}
.voortgang-stap.gedaan:not(:last-child)::after { background: var(--ok-tekst); }
.voortgang-nr {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; flex: none;
  border: var(--rand) solid var(--lijn);
  background: var(--kaart); color: var(--zacht);
  font-weight: 900; font-size: .95rem;
}
/* Labels mogen afbreken: op een smal scherm met grote tekst (A++) zou nowrap
   horizontale scroll veroorzaken (reflow 1.4.10). */
.voortgang-label { overflow-wrap: break-word; }
.voortgang-stap.nu { color: var(--inkt); font-weight: 900; }
.voortgang-stap.nu .voortgang-nr { background: var(--wereld); border-color: var(--wereld); color: #fff; }
.voortgang-stap.gedaan { color: var(--ok-tekst); font-weight: 800; }
.voortgang-stap.gedaan .voortgang-nr { background: var(--ok-bg); border-color: var(--ok-tekst); color: var(--ok-tekst); }

/* --------------------------------------------------------------------------
   11. Stappen-grid (Hoe het werkt) — kaarten op kleurband
   -------------------------------------------------------------------------- */
.stappen { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 760px) { .stappen { grid-template-columns: repeat(3, 1fr); } }

.stap { background: var(--kaart); border: var(--rand) solid var(--inkt); padding: 1.6rem 1.5rem; }
.band--terracotta .stap, .band--olijf .stap, .band--bruin .stap, .band--teal .stap { color: var(--inkt); }
.stap-kop { display: flex; align-items: center; gap: .85rem; margin-bottom: .7rem; }
.stap-nummer {
  display: inline-grid; place-items: center;
  width: 2.7rem; height: 2.7rem; flex: none;
  background: var(--terracotta-diep); color: #fff;
  border: var(--rand) solid var(--inkt);
  font-size: 1.3rem; font-weight: 900;
}
.stap .vlak-icoon { width: 2rem; height: 2rem; color: var(--oker-diep); flex: none; }
.stap h3 { margin: 0 0 .35rem; color: var(--inkt); }
.stap p  { margin: 0; color: var(--zacht); }

/* --------------------------------------------------------------------------
   12. Twee-koloms tekst + beeld
   -------------------------------------------------------------------------- */
.twee-kolom { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: center; }
.twee-kolom-tekst { max-width: var(--tekst); }
@media (min-width: 820px) { .twee-kolom { grid-template-columns: 1fr 1fr; gap: 2.6rem; } }

/* --------------------------------------------------------------------------
   13. Paneel
   -------------------------------------------------------------------------- */
.paneel {
  background: var(--kaart); border: var(--rand-dik) solid var(--inkt);
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.2rem); margin-top: 1.4rem;
}
.paneel > :first-child { margin-top: 0; }
.paneel > :last-child  { margin-bottom: 0; }
.paneel p, .paneel ul, .paneel ol { max-width: var(--tekst); }
/* Op een donkere band wordt alle tekst wit. Een paneel houdt zijn lichte kaart-
   achtergrond, dus de tekst daarin moet donker blijven (anders wit-op-licht). De
   container vangt de alinea's; de kop heeft op donkere banden een eigen wit-regel en
   moet daarom apart teruggezet worden. Zelfde aanpak als .stap en .stap h3. */
.band--terracotta .paneel, .band--olijf .paneel,
.band--bruin .paneel, .band--teal .paneel,
.band--terracotta .paneel h3, .band--olijf .paneel h3,
.band--bruin .paneel h3, .band--teal .paneel h3 { color: var(--inkt); }
.paneel-accent { background: var(--zand); }
.link-blok { word-break: break-all; font-weight: 700; }

/* --------------------------------------------------------------------------
   14. Privacy-lijst (op kleurband)
   -------------------------------------------------------------------------- */
.privacy-lijst { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: .85rem; }
@media (min-width: 760px) { .privacy-lijst { grid-template-columns: 1fr 1fr; gap: 1rem 2rem; } }
.privacy-lijst li { position: relative; padding-left: 2.1rem; color: rgba(255,255,255,.94); line-height: 1.5; }
.privacy-lijst li::before {
  content: "✓"; position: absolute; left: 0; top: .05rem;
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  background: var(--goud-licht); color: var(--bruin-diep);
  font-weight: 900; font-size: .95rem;
}
.privacy-lijst strong { color: #fff; }

/* --------------------------------------------------------------------------
   15. Beeld-vlak — mobile-first, responsive per context
   -------------------------------------------------------------------------- */
.beeldvlak { margin: 1.3rem 0 0; }
.twee-kolom .beeldvlak, .hero .beeldvlak { margin: 0; }

.beeldvlak-kader {
  display: grid; place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;          /* mobiel: standaard landschap */
  border: var(--rand-dik) solid var(--inkt);
  background:
    repeating-linear-gradient(45deg, rgba(43,28,16,.03) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--oker), var(--terracotta));
  color: #fff;
  overflow: hidden;               /* voorkomt dat box-shadow horizontaal scrollt */
  box-shadow: 10px 10px 0 rgba(43,28,16,.18);
}

/* Afbeelding vult het kader altijd volledig */
.beeldvlak-kader img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beeldvlak-kader svg { width: 3rem; height: 3rem; opacity: .9; }

/* Breed: 4/3 op mobiel (ruimte voor het beeld), 16/9 op desktop */
.beeldvlak--breed .beeldvlak-kader { aspect-ratio: 4 / 3; }
@media (min-width: 820px) {
  .beeldvlak--breed .beeldvlak-kader { aspect-ratio: 16 / 9; }
}

/* Staand: 3/4 op mobiel, 2/3 (portret) op desktop — volgt de beeldoriëntatie */
.beeldvlak--staand .beeldvlak-kader { aspect-ratio: 3 / 4; }
.beeldvlak--staand .beeldvlak-kader img { object-position: left 55%; }
@media (min-width: 820px) {
  .beeldvlak--staand .beeldvlak-kader { aspect-ratio: 2 / 3; max-width: 340px; margin-inline: auto; }
}

/* Hero: op mobiel standaard ratio, op desktop vult het de volledige kolomhoogte */
@media (min-width: 860px) {
  .hero .beeldvlak { align-self: stretch; display: flex; flex-direction: column; }
  .hero .beeldvlak-kader { aspect-ratio: unset; flex: 1; min-height: 340px; }
}

/* --------------------------------------------------------------------------
   15b. Post-elementen — een kleine, rustige set
   Decoratief beeld dat de site rustig post-gevoel geeft. Subtiel en WCAG-/LVB-
   vriendelijk: geen beweging, weinig chroma, rechte hoeken (huisstijl), geen
   aandachttrekkende rotatie of harde slagschaduw. Decoratieve delen zijn
   aria-hidden; het mag de taak nooit overstemmen.
   -------------------------------------------------------------------------- */
/* Geen eigen max-breedte: het kaartje vult zijn container, net als .beeldvlak. In de
   tweekoloms-hero is dat de kolom; in één kolom (smal/mobiel) de volle breedte. */
.kaartje { position: relative; width: 100%; margin: 0 auto; }
.twee-kolom .kaartje { margin: 0; }
.kaartje-vlak, .kaartje-foto {
  display: block; width: 100%;
  background: var(--kaart);
  border: var(--rand-dik) solid var(--inkt);
  box-shadow: 3px 3px 0 rgba(43,28,16,.12);
}
.kaartje-vlak { aspect-ratio: 320 / 230; }
/* De foto vult het kader rand-tot-rand, net als .beeldvlak (geen witte papieren binnenrand);
   zelfde diepe slagschaduw zodat het beeld er hetzelfde uitziet als de andere afbeeldingen. */
.kaartje-foto { padding: 0; box-shadow: 10px 10px 0 rgba(43,28,16,.18); }
.kaartje-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kaartje-schrift { display: block; width: 100%; height: 100%; }

.postzegel { display: inline-block; line-height: 0; width: 64px; }
.postzegel svg { display: block; width: 100%; height: auto; }
.poststempel { display: inline-block; line-height: 0; width: 96px; color: var(--terracotta-diep); }
.poststempel svg { display: block; width: 100%; height: auto; opacity: .5; }
.envelop { display: inline-block; line-height: 0; width: 120px; }
.envelop svg { display: block; width: 100%; height: auto; }

/* Losse plaatsing: één rustig post-element boven een band, of een afstempeling
   bij een succesmoment. Recht, niet gedraaid. */
/* Postzegel-CTA-band (home): tekst links, postzegel als beeld rechts; op telefoon weg,
   zodat de stempel niet zwevend boven de tekst hangt en geen ruimte vreet op mobiel. */
.leeft { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: center; }
.leeft-beeld { display: none; justify-content: center; }
@media (min-width: 760px) {
  .leeft { grid-template-columns: 1fr auto; gap: 2.6rem; }
  .leeft-beeld { display: flex; }
  .leeft-beeld .postzegel { width: 118px; }
}
/* Postzegel alsof hij op de pagina (het papier) is geplakt: licht gekanteld met een
   zachte slagschaduw. Op hover komt hij iets recht en tilt hij op, het opgeplakt-gevoel.
   De reduced-motion-regel onderaan zet de overgang automatisch uit. */
.leeft-beeld .postzegel { transform: rotate(-6deg); transform-origin: center;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(2px 4px 3px rgba(43,28,16,.32)); }
.leeft-beeld .postzegel:hover { transform: rotate(-1.5deg) scale(1.06);
  filter: drop-shadow(3px 7px 6px rgba(43,28,16,.36)); }
.post-stempel-sier { text-align: right; margin: -.5rem 0 .25rem; }
.post-stempel-sier .poststempel { width: 104px; }

/* Bandnaad — de rustigste band-tot-band-overgang: één warme haarlijn die naar de
   randen uitvaagt. De bandkleur-wissel blijft de echte scheiding; deze lijn is
   alleen sfeer (decoratief, aria-hidden). Vervangt de drukke postroute/luchtpostrand. */
.bandnaad {
  width: 100%; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--lijn) 18%, var(--lijn) 82%, transparent);
}

/* Zegeltekst — een stempel met LEESBARE woorden (gratis, anoniem, met de hand). De
   tekst is echte inhoud, dus geen opacity en geen rotatie. Kies de kleur uitsluitend
   uit de diepe tokens: --terracotta-diep (7,46:1 op --kaart) en --olijf-diep (8,47:1)
   halen ruim 4.5:1 (AA); de rand in dezelfde kleur haalt ruim 3:1 (1.4.11). */
.zegeltekst {
  display: inline-block; padding: .4rem .85rem;
  background: var(--kaart);
  border: var(--rand-dik) solid var(--zegel-kleur, var(--terracotta-diep));
  color: var(--zegel-kleur, var(--terracotta-diep));
  font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; line-height: 1.1; border-radius: var(--radius);
}

/* Kofferlabel — rustig labeltje (zacht op zand, geen rotatie). Ruime linker-padding
   zodat de punt nooit tekst afsnijdt bij inzoomen. Spaarzaam gebruiken. */
.kofferlabel { position: relative; display: inline-block; padding: .7rem 1.1rem .7rem 2rem; background: var(--zand); border: 2px solid var(--zacht); color: var(--zacht); font-weight: 700; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
.kofferlabel-gat { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--creme); box-shadow: 0 0 0 2px var(--zacht); }

/* Knip-hier-lijn met schaartje — functioneel voor het printbare A4. */
.kniplijn { position: relative; border-top: 2px dashed var(--zacht); margin: 1.6rem 0; }
.kniplijn-schaar { position: absolute; top: -13px; left: 6px; width: 24px; height: 24px; color: var(--zacht); }

/* Geperforeerde scheidingslijn. */
.perforatielijn { height: 0; border-top: 4px dotted var(--lijn); margin: 1.5rem 0; }

/* Papier-texturen voor blokken (lopende tekst houdt altijd vol --inkt-contrast). */
.papier-lijntjes { background-color: var(--kaart); background-image: repeating-linear-gradient(var(--kaart), var(--kaart) 27px, var(--lijn) 27px, var(--lijn) 28px); }
.papier-ruitjes { background-color: var(--kaart); background-image: linear-gradient(var(--lijn) 1px, transparent 1px), linear-gradient(90deg, var(--lijn) 1px, transparent 1px); background-size: 22px 22px; }

/* Schrijfkaart — het tekstvak in een rustig kaartkader (geen stempel naast het
   actieve veld). Het warme tekstvak houdt zijn eigen --kaart-vulling. */
.schrijfkaart { position: relative; background: var(--kaart); border: var(--rand-dik) solid var(--inkt); box-shadow: 3px 3px 0 rgba(43,28,16,.12); padding: 1.1rem; }
.schrijfkaart .invoer-bericht { border: none; box-shadow: none; }

/* Penstreep — een rustige, bijna rechte handonderstreping onder een kop. Spaarzaam. */
.penstreep { display: block; width: 170px; color: var(--terracotta); line-height: 0; }
.penstreep svg { display: block; width: 100%; height: auto; }

/* Hoekstempel — een fluisterzachte afdruk in de hoek van een succesblok. Geen tekst,
   geen opacity-truc (de zachtheid komt uit de --lijn-kleur), geen rotatie. Strikt
   betekenisloos houden (nooit een datum of "verzonden"). */
.hoekstempel { display: block; width: 64px; line-height: 0; pointer-events: none; }
.hoekstempel svg { display: block; width: 100%; height: auto; }
.heeft-hoekstempel { position: relative; }
.heeft-hoekstempel .hoekstempel { position: absolute; top: 14px; right: 14px; }

/* Kaarthoek — vier korte hoeklijntjes laten een vlak als kaart lezen, zonder volle
   rand, schaduw of rotatie. Alleen op decoratieve, niet-interactieve blokken (op iets
   focusbaars worden de hoeken een schijn-grens en geldt 1.4.11). */
.kaarthoek { position: relative; }
.kaarthoek::before,
.kaarthoek::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  pointer-events: none; border: var(--rand) solid var(--lijn);
}
.kaarthoek::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.kaarthoek::after  { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }
.kaarthoek-extra { position: absolute; inset: 0; pointer-events: none; }
.kaarthoek-extra::before,
.kaarthoek-extra::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: var(--rand) solid var(--lijn);
}
.kaarthoek-extra::before { top: -4px; right: -4px; border-left: 0; border-bottom: 0; }
.kaarthoek-extra::after  { bottom: -4px; left: -4px; border-right: 0; border-top: 0; }

/* Brievenbus, vriendelijke oranje bus met eigen envelop-merkje (zie _beeld.html).
   Platte offset-schaduw zoals de andere beelden. `--flip` spiegelt voor de andere wereld. */
.brievenbus { display: inline-block; line-height: 0; width: min(200px, 100%); }
.brievenbus svg { display: block; width: 100%; height: auto;
  filter: drop-shadow(6px 6px 0 rgba(43,28,16,.18)); }
.brievenbus--flip svg { transform: scaleX(-1); }
/* Hub-hero: tekst en bus naast elkaar (vult de breedte i.p.v. een hoge lege band).
   Op smal scherm stapelt het, met een kleinere bus. De --flip-variant zet de bus aan
   de andere kant, zodat Meedoen en Ik kreeg post elkaars spiegelbeeld zijn. */
.hub-hero { display: grid; grid-template-columns: 1fr; gap: 1rem 2.4rem; align-items: center; }
/* Decoratieve bus: op telefoon weg (bespaart ruimte), op breder scherm naast de tekst. */
.hub-beeld { display: none; justify-content: center; }
@media (min-width: 760px) {
  .hub-hero { grid-template-columns: 1fr auto; }
  .hub-hero .band-kop { margin-bottom: 0; }
  .hub-hero .hub-beeld { display: flex; margin: 0; }
  .hub-hero .brievenbus { width: 150px; }
  .hub-hero--flip .band-kop { order: 2; }
  .hub-hero--flip .hub-beeld { order: 1; }
}

/* Waslijn met kaartjes, knusse sfeer-rij (zie _beeld.html). De lichte kanteling per
   kaartje komt uit nth-child, niet uit inline-styles. Kaartjes wrappen op smal scherm. */
.waslijn { position: relative; width: 100%; max-width: 1120px; margin: 1.6rem auto 0; }
/* Doorhangend touw als SVG-curve (gelijkblijvende lijndikte via non-scaling-stroke),
   met een knoop aan elk uiteinde. */
.waslijn-touw { position: relative; height: 36px; margin: 20px 8px 0; }
.waslijn-touw svg { display: block; width: 100%; height: 36px; overflow: visible; }
.waslijn-knoop { position: absolute; top: 3px; width: 12px; height: 12px;
  background: var(--bruin-diep); border-radius: 50%; z-index: 1; }
.waslijn-knoop--l { left: -6px; }
.waslijn-knoop--r { right: -6px; }
/* De rij hangt onder het touw; de pins overlappen het touw zodat ze er echt op zitten.
   De middelste kaartjes hangen iets lager (nth-child), zodat ze de doorzak volgen. */
.waslijn-rij { display: flex; justify-content: space-around; align-items: flex-start;
  gap: .8rem; flex-wrap: wrap; margin-top: -27px; }
.waslijn-hang { display: flex; flex-direction: column; align-items: center; width: 150px; }
.waslijn-hang:nth-child(1), .waslijn-hang:nth-child(5) { margin-top: 4px; }
.waslijn-hang:nth-child(2), .waslijn-hang:nth-child(4) { margin-top: 10px; }
.waslijn-hang:nth-child(3) { margin-top: 12px; }
.waslijn-knijper { position: relative; z-index: 2; width: 14px; height: 26px;
  background: linear-gradient(var(--oker) 0 55%, var(--oker-diep) 55% 100%);
  border: 1px solid var(--bruin-diep); }
.waslijn-knijper::after { content: ""; position: absolute; left: 50%; top: 6px;
  transform: translateX(-50%); width: 1px; height: 14px; background: var(--bruin-diep); }
.waslijn-kaartje { margin-top: -3px; width: 100%; min-height: 92px; padding: .6rem .65rem;
  background: var(--kaart); border: var(--rand) solid var(--inkt);
  box-shadow: 3px 3px 0 rgba(43,28,16,.12); }
.waslijn-hang:nth-child(odd)  .waslijn-kaartje { transform: rotate(-2.6deg); }
.waslijn-hang:nth-child(even) .waslijn-kaartje { transform: rotate(3deg); }
.waslijn-woord { font-weight: 800; font-size: .98rem; color: var(--inkt); margin: 0 0 .4rem; }
.waslijn-lijn { height: 0; border-bottom: 1.5px solid var(--lijn); margin: .34rem 0; }
.waslijn-lijn:last-child { width: 62%; }
.waslijn-plant { display: none; }
/* Tussenmaat: vijf kaartjes naast elkaar passen niet meer, maar het is nog te breed
   voor de verticale stapel. Dan liever vier rustige kaartjes in een rij (geen wrap
   met een half kaartje eronder) dan een rommelige knik in het touw. */
@media (max-width: 900px) and (min-width: 621px) {
  .waslijn-rij { flex-wrap: nowrap; justify-content: center; gap: 1rem; }
  .waslijn-hang { width: 130px; }
  .waslijn-hang:nth-child(5) { display: none; }
}
/* Op smal scherm past een waslijn met kaartjes naast elkaar niet meer: dan gaan de
   kaartjes onder elkaar hangen, elk aan zijn eigen knijper. De doorlopende touw-curve
   hoort bij een rij naast elkaar, dus die valt weg (elk kaartje houdt zijn eigen
   knijper uit de macro, dus het blijft een waslijn-motief, alleen verticaal). Een
   rankje achter de rij vult de kale ruimte waar het touw stond. */
@media (max-width: 620px) {
  .waslijn-touw { display: none; }
  .waslijn-rij { position: relative; z-index: 1; flex-direction: column; align-items: center;
    margin-top: 0; padding-top: 1.4rem; gap: 1.1rem; }
  .waslijn-hang { width: 100%; max-width: 280px; margin-top: 0 !important; }
  .waslijn-plant { display: block; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 60px; transform: translateX(-50%); z-index: 0; pointer-events: none; }
  .waslijn-plant svg { display: block; width: 100%; height: 100%; overflow: visible; }
}

/* --------------------------------------------------------------------------
   16. Formulieren
   -------------------------------------------------------------------------- */
form { display: flex; flex-direction: column; gap: 1.25rem; }
.paneel form { margin-top: 0; }
.veld { display: flex; flex-direction: column; gap: .4rem; }
/* Twee velden naast elkaar (bijv. postcode + plaats); stapelt op smal scherm. */
.veld-rij { display: grid; grid-template-columns: 1fr; gap: 1.05rem; align-items: end; }
@media (min-width: 520px) { .veld-rij { grid-template-columns: 1fr 2fr; } }
.veld-rij .veld { margin: 0; }
label { font-weight: 800; color: var(--inkt); cursor: pointer; }

.veldgroep {
  display: flex; flex-direction: column; gap: 1.05rem;
  margin: 0; padding: 1.4rem;
  border: var(--rand) solid var(--inkt); background: var(--zand);
}
.veldgroep legend { font-weight: 900; color: var(--inkt); padding: 0 .5rem; font-size: 1.08rem; }
.hint { font-weight: 400; color: var(--zacht); font-size: 1rem; line-height: 1.5; }

/* Taalkeuze-veld (taalvoorkeur): radiogroep met vlaggetjes, als schone keuze-chips. Elke
   chip blijft op één regel (white-space: nowrap) en krimpt nooit onder z'n inhoud
   (flex: none), zodat de tekst niet rommelig afbreekt en het radioknopje niet los komt
   te hangen. Op smal scherm valt een chip netjes naar de volgende regel.
   De gekozen chip is herkenbaar aan méér dan kleur: dikkere rand + zand-vulling, plus de
   ingevulde native radioknop (WCAG 1.4.1). Werkt zonder JavaScript. */
.taalvoorkeur { border: none; padding: 0; margin: 0; }
.taalvoorkeur legend { font-weight: 800; color: var(--inkt); margin-bottom: .45rem; padding: 0; }
.taalvoorkeur-opties { display: flex; flex-wrap: wrap; gap: .5rem; }
.taalvoorkeur-optie {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; min-height: var(--balk-knop);
  border: var(--rand) solid var(--inkt); background: var(--kaart);
  font-weight: 700; line-height: 1; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.taalvoorkeur-optie:hover { background: var(--zand); }
.taalvoorkeur-optie:has(input:checked) {
  border: var(--rand-dik) solid var(--terracotta-diep); background: var(--zand);
}
.taalvoorkeur-optie:focus-within {
  outline: var(--rand-dik) solid var(--terracotta); outline-offset: 2px;
}
/* Vlaggetje/wereldbol in de chip: vast formaat, vierkante vlaggen met huisstijlrand;
   de wereldbol heeft z'n eigen ronde rand, dus geen kader. */
.taalvoorkeur-optie .vlag-svg {
  display: block; width: 1.5rem; height: 1.5rem; flex: none;
  border: var(--rand) solid var(--inkt);
}
.taalvoorkeur-optie .vlag-svg--wereld { border: none; }

/* Antwoord-ontvangen op /schrijven: het adres is de gewone route (voor wie voor het
   eerst meedoet). De accountcode is de korte route voor wie al eens meedeed: een klein,
   secundair blok ONDER het adres, met een scheidingslijntje erboven. De kop is lichter
   aangezet (de --zacht tint haalt ruim AA op zand), maar het invoerveld blijft op vol
   contrast en volle grootte, zodat het goed bruikbaar en toegankelijk blijft. Het
   onderscheid primair/secundair zit ook in de tekst ('in plaats van je adres'), niet
   alleen in de opmaak (WCAG 1.4.1). */
.antwoord-account { display: flex; flex-direction: column; gap: .6rem;
  margin-top: .3rem; padding-top: 1.1rem; border-top: var(--rand) solid var(--lijn); }
.antwoord-account-kop { font-weight: 800; color: var(--zacht); margin: 0; }

/* Samengevoegde schrijfpagina: de keuze 'nieuw kaartje vs antwoord' bovenaan, en binnen
   het nieuwe kaartje de keuze 'anoniem / al meegedaan / nieuw'. Deze radio-keuzes werken
   alleen met JavaScript (ze tonen/verbergen een formulier of een veldblok). Zonder
   JavaScript staan ze verborgen: dan bepaalt de URL welk formulier je ziet (/schrijven of
   /reageren), en binnen het nieuwe kaartje toont de pagina gewoon alle velden, waarna de
   backend de route afleidt uit wat je invult. */
.soort-keuze, .antwoord-keuze { display: none; border: 0; padding: 0; margin: 0 0 1.5rem; }
.has-js .soort-keuze, .has-js .antwoord-keuze { display: block; }
/* Extra uitleg alleen voor wie GEEN JavaScript heeft: dan zijn de keuzeknoppen verborgen
   en staan alle velden tegelijk open, dus leggen we even uit wat je invult. Met JavaScript
   zijn de keuzeknoppen er wel en is deze regel overbodig. */
.has-js .nojs-uitleg { display: none; }
.soort-keuze > legend, .antwoord-keuze > legend {
  font-weight: 900; color: var(--inkt); padding: 0; margin-bottom: .7rem; font-size: 1.1rem; }
.antwoord-keuze { margin: .3rem 0 1.1rem; }

.keuze-lijst { display: grid; gap: .7rem; }
@media (min-width: 620px) { .soort-keuze .keuze-lijst { grid-template-columns: 1fr 1fr; } }

.keuze {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1rem; background: var(--kaart);
  border: var(--rand) solid var(--inkt); border-radius: var(--radius-klein);
  cursor: pointer;
}
.keuze:hover { background: #fff; }
.keuze:focus-within { outline: var(--rand-dik) solid var(--goud-licht); outline-offset: 2px; }
/* De gekozen keuzekaart valt op door meer dan het kleine radioknopje: dikkere rand plus
   zand-vulling, gelijk aan de taalkeuze-chip (WCAG 1.4.1). */
.keuze:has(input:checked) { border: var(--rand-dik) solid var(--terracotta-diep); background: var(--zand); }
.keuze input { width: auto; margin: .25rem 0 0; flex: none; }
.keuze-tekst { display: flex; flex-direction: column; gap: .15rem; }
.keuze-titel { font-weight: 800; color: var(--inkt); }
.keuze-uitleg { color: var(--zacht); font-size: .98rem; line-height: 1.4; }
.keuze--klein { padding: .7rem .8rem; }

/* Het actieve formulier of veldblok; JavaScript zet 'hidden' op wat verborgen moet. */
.soort-paneel[hidden], .antwoord-blok[hidden] { display: none; }
.soort-kop { margin-top: 0; }
.antwoord-blok { margin-top: 1.05rem; }

input, textarea, select {
  font: inherit; width: 100%;
  color: var(--inkt); background: var(--kaart);
  padding: .8rem .9rem;
  border: var(--rand) solid var(--inkt);
  border-radius: var(--radius-klein);
}
/* Iets donkerder dan voorheen: de placeholder draagt hier informatie (het voorbeeld
   "bijv. ..."), dus verdient hij comfortabel contrast, ook voor wie minder scherp ziet. */
input::placeholder, textarea::placeholder { color: #574328; }
textarea { resize: vertical; min-height: 11rem; line-height: 1.6; }
/* Grote, dikgedrukte invoervelden — prettig leesbaar en je ziet meteen wat er
   kan staan (voorbeeld als placeholder). Drie smaken:
     .invoer-code    : korte codes en de postcode (met letterafstand voor losse tekens)
     .invoer-tekst   : gewone tekstvelden (naam, straat, plaats, e-mail) — zonder
                       letterafstand, anders worden woorden uit elkaar getrokken
     .invoer-bericht : grote tekstvakken (iets groter, normaal gewicht om in te typen) */
.invoer-code { font-size: 1.35rem; letter-spacing: .14em; font-weight: 800; }
.invoer-tekst { font-size: 1.2rem; font-weight: 700; }
/* Het grote tekstvak houdt de warme --kaart-vulling uit de veld-basis hierboven.
   Bewust geen schrijflijntjes achter de getypte tekst: zelfs netjes uitgelijnd
   lopen vaste regels al snel als een doorhaling door de letters, en ze geven
   leesruis precies waar rust telt (LVB, ouderen). Warm papier is genoeg
   kaart-gevoel; lijntjes horen op een decoratief kaartje, niet in het invoerveld. */
.invoer-bericht { font-size: 1.12rem; }
input:hover, textarea:hover, select:hover { border-color: var(--terracotta-diep); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: var(--rand-dik) solid var(--terracotta); outline-offset: 2px; border-color: var(--terracotta-diep);
}
/* Veld met een fout: een duidelijke rand wijst aan welk veld aandacht nodig heeft.
   Niet op kleur alleen: de rand wordt ook dikker (box-shadow), en de foutmelding
   bovenaan het formulier (role="alert") vertelt in woorden wat er aan de hand is. */
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--fout-rand); box-shadow: 0 0 0 2px var(--fout-rand);
}

button, button[type="submit"] {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .8rem 1.8rem;
  background: var(--wereld); color: #fff;
  border: var(--rand-dik) solid var(--inkt);
  font-family: var(--sans); font-size: 1.05rem; font-weight: 800; line-height: 1.2;
  cursor: pointer; transition: transform .1s ease, background-color .12s ease;
}
button:hover { background: var(--wereld-hover); }
button:active { transform: translateY(2px); }

.fout {
  margin: 1.2rem 0 0; padding: .95rem 1.1rem;
  background: var(--fout-bg); border: var(--rand) solid var(--fout-rand);
  border-left: 7px solid var(--fout-rand);
  color: var(--fout-tekst); font-weight: 700; max-width: var(--tekst);
}
/* Een vast waarschuwingspictogram naast de rode kleur, zodat een fout ook zonder
   kleurwaarneming herkenbaar is en van een gelukt-melding verschilt (WCAG 1.4.1).
   De generated content is decoratief; de tekst zelf vertelt al wat er mis is. */
.fout::before { content: "\26A0"; font-weight: 900; margin-right: .5em; }
.geslaagd {
  background: var(--ok-bg); border: var(--rand) solid var(--ok-tekst);
  border-left: 7px solid var(--ok-tekst);
  padding: 1rem 1.1rem; color: var(--ok-tekst); font-weight: 700; max-width: var(--tekst);
}

/* 'Even vol'-melding op /schrijven: meer kaartjes dan adressen. Bewust géén
   fout-rood maar een rustige oker toon, want er ging niets mis: het kaartje
   wacht alleen even op een adres. */
.melding {
  margin: 1.2rem 0 0; padding: 1rem 1.2rem;
  background: var(--creme); border: var(--rand) solid var(--oker-diep);
  border-left: 7px solid var(--oker-diep);
  color: var(--inkt);
}
.melding p { margin: 0 0 .5rem; }
.melding p:last-child { margin-bottom: 0; }
.melding-kop { font-weight: 800; }
.melding-extra { font-size: .95rem; }
/* Rustige losse-regel variant (bijv. de reageer-poort): zelfde kalme oker toon,
   geen kop, één regel. Geen alarmrood, want er ging niets mis. */
.melding--rustig { font-size: 1rem; }

.bevestiging-vink {
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem; margin: 0 0 1rem;
  background: var(--ok-bg); color: var(--ok-tekst);
  border: var(--rand-dik) solid var(--ok-tekst);
  font-size: 1.9rem; font-weight: 900; line-height: 1;
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 820px) { .faq { grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem; align-items: start; } }
.faq-item { background: var(--kaart); border: var(--rand) solid var(--inkt); }
.faq-item summary {
  cursor: pointer; padding: 1.05rem 1.2rem; font-weight: 800; color: var(--inkt);
  list-style: none; display: flex; align-items: center; gap: .7rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+"; flex: none;
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem;
  background: var(--terracotta-diep); color: #fff;
  font-weight: 900; line-height: 1; font-size: 1.2rem;
}
.faq-item[open] summary::before { content: "−"; }
.faq-item summary:hover { background: var(--zand); }
.faq-item summary:focus-visible { outline: var(--rand-dik) solid var(--terracotta); outline-offset: -3px; }
.faq-item > p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--zacht); line-height: 1.55; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  flex-shrink: 0; background: var(--bruin-diep); color: rgba(255,255,255,.85);
  border-top: var(--rand-dik) solid var(--inkt); padding-block: 1.6rem;
}
.site-footer .inhoud {
  max-width: var(--inhoud); margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 4.5rem);
  display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center;
}
.site-footer p { margin: 0; max-width: 62ch; font-size: .92rem; line-height: 1.45; }
/* Inline-links in de voettekst (contact, afmelden): goud-licht op bruin-diep haalt
   ruim het AA-contrast, met een duidelijke onderlijn. */
.site-footer p a {
  color: var(--goud-licht); text-decoration: underline;
  text-decoration-thickness: .08em; text-underline-offset: .15em;
  transition: color .15s ease;
}
.site-footer p a:hover, .site-footer p a:focus-visible { color: #fff; }

/* Taalwissel in de voet: rustige tekstlinks met een ruim tikdoel (min-height ~44px).
   De taalnaam staat in de eigen taal. De actieve taal is geen link en valt op door méér
   dan kleur (vet + onderstreept), zodat de keuze ook zonder kleurwaarneming duidelijk is. */
.taalkeuze {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .1rem .5rem; margin-top: .1rem;
}
.taalkeuze-label { font-size: .9rem; color: rgba(255,255,255,.7); margin-right: .15rem; }
.taalkeuze-knop {
  display: inline-flex; align-items: center; min-height: var(--balk-knop); padding: 0 .5rem;
  font-size: .95rem; font-weight: 700; line-height: 1;
}
a.taalkeuze-knop {
  color: var(--goud-licht); text-decoration: underline;
  text-decoration-thickness: .08em; text-underline-offset: .2em; transition: color .15s ease;
}
a.taalkeuze-knop:hover, a.taalkeuze-knop:focus-visible { color: #fff; }
.taalkeuze-actief {
  color: #fff; font-weight: 800; text-decoration: underline;
  text-decoration-thickness: .14em; text-underline-offset: .2em;
  text-decoration-color: var(--goud-licht);
}

.merk--voet { color: #fff; }
.merk--voet .merk-naam { color: #fff; }
.site-footer .hoofdnav { margin-left: 0; justify-content: center; }
.site-footer .hoofdnav a {
  position: relative;
  color: #fff;
  text-decoration: none;
  border-color: transparent;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
/* Goud-licht onderlijn die vanaf links insluift */
.site-footer .hoofdnav a::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .3rem;
  height: 2px;
  background: var(--goud-licht);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.site-footer .hoofdnav a:hover,
.site-footer .hoofdnav a:focus-visible {
  background: var(--terracotta-diep); color: #fff; border-color: var(--terracotta-diep);
  transform: translateY(-2px);
}
.site-footer .hoofdnav a:hover::after,
.site-footer .hoofdnav a:focus-visible::after {
  transform: scaleX(1);
}
/* Footer-merk: subtiele lift + goud-onderlijning */
.site-footer .merk--voet {
  transition: transform .18s ease, opacity .12s ease;
}
.site-footer .merk--voet:hover,
.site-footer .merk--voet:focus-visible {
  transform: translateY(-2px);
}
.site-footer .merk--voet:hover .merk-naam,
.site-footer .merk--voet:focus-visible .merk-naam {
  text-decoration: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .16em;
  text-decoration-color: var(--goud-licht);
}
.site-footer .merk--voet .merk-mark-tegel {
  transition: fill .2s ease;
}
.site-footer .merk--voet:hover .merk-mark-tegel,
.site-footer .merk--voet:focus-visible .merk-mark-tegel {
  fill: var(--oker);
}

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.klein  { font-size: 1rem; color: var(--zacht); margin-top: 1.3rem; }
.muted  { color: var(--zacht); font-size: 1rem; }
.nowrap { white-space: nowrap; }
.tekst-midden { text-align: center; }
.icoon { width: 1.5rem; height: 1.5rem; vertical-align: middle; }

/* --------------------------------------------------------------------------
   19b. Gedeelde layout-utilities (publiek + admin) — vervangen losse inline-styles
   -------------------------------------------------------------------------- */
/* Horizontale rij die afbreekt: knoppen, mini-formulieren, links naast elkaar.
   Royale tussenruimte (ook verticaal bij afbreken) zodat knoppen niet plakken. */
.rij { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.rij--tussen { justify-content: space-between; }
.rij--eind   { justify-content: flex-end; }
.rij--top    { align-items: flex-start; }
.rij form    { margin: 0; }

/* Paginakop: titel links, acties rechts (component `kop` uit _ui.html). */
.kop-balk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .9rem 1.2rem; margin-bottom: 1.2rem;
}
.kop-balk h1 { margin: 0; }
.kop-acties { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Kicker: klein gekleurd labeltje boven een paginatitel, geeft de 'wereld' aan. */
.kicker {
  display: inline-block; margin: 0 0 .5rem;
  font-size: .85rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  color: var(--terracotta-diep);
}
/* Iets donkerder dan --oker-diep: deze kleine vette hoofdletters staan ook op de
   witte band (band--wit), waar --oker-diep net onder 4.5:1 zou vallen (1.4.3 AA). */
.kicker--post { color: #6f4c08; }
/* Expliciet naast --post, zodat de twee werelden symmetrisch en zelf-documenterend zijn
   (gelijk aan de basis-.kicker, maar niet langer een stille fallback). */
.kicker--meedoen { color: var(--terracotta-diep); }
/* Lichte kicker voor op de diepe (donkere) banden, waar terracotta te dof zou zijn. */
.kicker--licht { color: var(--goud-licht); }
/* Neutrale rubriek-kicker voor info- en foutpagina's (over, privacy, toegankelijkheid,
   404, 500). Zo blijven terracotta (Meedoen) en oker (Ik kreeg post) gereserveerd voor
   de twee taak-werelden en vertroebelt een rubriek de kleurtaal niet (M11). */
.kicker--neutraal { color: var(--zacht); }
/* Eén component, dat zich aan zijn band aanpast: op de diepe (donkere) banden lichten
   ALLE kickers vanzelf op naar goud, ongeacht hun wereld-modifier. Nieuwe pagina's
   gebruiken dus gewoon kicker--meedoen of kicker--post en hoeven geen aparte
   licht-variant te kiezen (M11). De kicker-tekst zelf benoemt al welke wereld het is. */
.band--olijf .kicker, .band--terracotta .kicker,
.band--bruin .kicker, .band--teal .kicker { color: var(--goud-licht); }

/* Wereld-scope: zet de accentkleur om voor een hele taakpagina. */
.wereld-post    { --wereld: var(--oker-diep); --wereld-hover: #6f4c08; }
.wereld-meedoen { --wereld: var(--terracotta-diep); --wereld-hover: var(--terracotta); }
.wereld-post a:focus-visible, .wereld-post button:focus-visible,
.wereld-post .knop:focus-visible, .wereld-post .knop-secundair:focus-visible {
  outline-color: var(--oker-diep);
}

/* Twee codes als zichtbaar paar, met een beeldmerk per code (kaartje vs brief),
   zodat herkennen sneller gaat dan lezen. Het merk volgt de wereldkleur. */
.code-paar { border: var(--rand) solid var(--lijn); padding: 1rem 1.1rem .3rem; margin: 0 0 1.2rem; }
.code-paar legend { font-weight: 800; padding: 0 .4rem; font-size: 1rem; }
/* Zet de twee codevelden zichtbaar uit elkaar, zodat ze niet verwisseld worden:
   ruimte plus een gestreepte scheiding tussen de eerste en de tweede code. */
.code-paar .veld + .veld { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px dashed var(--lijn); }
.veld-merk { display: inline-flex; vertical-align: -.18em; margin-right: .45rem; color: var(--wereld); }
.veld-merk .vlak-icoon { width: 1.3rem; height: 1.3rem; }

/* Vervolgstap op de bedankt-schermen: een zachte deel-/doorvertel-uitnodiging,
   visueel losgemaakt van de hoofdtekst met een rustige bovenlijn. */
.vervolg { margin-top: 1.8rem; padding-top: 1.4rem; border-top: var(--rand) solid var(--lijn); }
.vervolg-lead { font-weight: 700; margin: 0 0 .2rem; }

/* Kleine, voorspelbare marge-helpers (vervangen losse inline margin-styles). */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.25rem; }

/* Inklapbaar uitleg-blok op het dashboard (bouwt op .intake). */
.uitleg-blok ol { margin: .4rem 0 .4rem 1.2rem; }
.uitleg-blok li { margin: .3rem 0; }

/* --------------------------------------------------------------------------
   20. Zichtbare focus — overal
   -------------------------------------------------------------------------- */
/* Fallback voor oude browsers zonder :focus-visible: één onbekende selector maakt
   daar de hele selectorlijst ongeldig, dus deze :focus-regel staat bewust apart.
   Moderne browsers dempen hem hieronder weer voor muisgebruik. */
a:focus, .knop:focus, .knop-secundair:focus, button:focus,
.hoofdnav a:focus, .merk:focus, .faq-item summary:focus {
  outline: var(--rand-dik) solid var(--terracotta); outline-offset: 2px;
}
a:focus:not(:focus-visible), .knop:focus:not(:focus-visible),
.knop-secundair:focus:not(:focus-visible), button:focus:not(:focus-visible),
.hoofdnav a:focus:not(:focus-visible), .merk:focus:not(:focus-visible),
.faq-item summary:focus:not(:focus-visible) { outline: none; }

a:focus-visible, .knop:focus-visible, .knop-secundair:focus-visible,
button:focus-visible, .hoofdnav a:focus-visible, .merk:focus-visible,
.faq-item summary:focus-visible {
  outline: var(--rand-dik) solid var(--terracotta); outline-offset: 2px;
}
.band--terracotta a:focus-visible, .band--olijf a:focus-visible,
.band--bruin a:focus-visible, .band--teal a:focus-visible,
.site-footer a:focus-visible, .knop:focus-visible, button:focus-visible { outline-color: var(--goud-licht); }

/* --------------------------------------------------------------------------
   21. Beweging / voorkeur
   -------------------------------------------------------------------------- */
/* De vonk is een statische gouden ster naast succes-titels. Bewust geen animatie:
   bewegende, oneindig lussende decoratie leidt af (LVB) en raakt WCAG 2.2.2. */
.vonk { display: inline-block; color: var(--goud-licht); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

.schrijftip-voorbeeld { font-size: .95rem; color: var(--zacht); margin-top: .25rem; }
.schrijftip-adres { font-size: .95rem; color: var(--zacht); padding: .6rem .8rem;
  border-left: 3px solid var(--goud-licht); margin-top: .5rem; }

/* --------------------------------------------------------------------------
   22. Responsive — fijnafstemming klein scherm
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  /* (De headerbalk regelt zijn eigen wrap; zie 'Header-indeling' hierboven.) */
  .knoppen { flex-direction: column; }
  .knop, .knop-secundair, button { width: 100%; align-self: stretch; }
  .voortgang-stap:not(:last-child)::after { width: .8rem; }
  .beeldvlak-kader { box-shadow: 4px 4px 0 rgba(43,28,16,.18); }

  /* Codevelden: op smal scherm de letterafstand en grootte temperen, zodat een code met
     streepje plus het voorbeeld ook bij de grootste tekststand (A++) binnen het veld past
     en niet horizontaal hoeft te scrollen (reflow 1.4.10). */
  .invoer-code { font-size: 1.2rem; letter-spacing: .06em; }

  /* Box-in-box op de telefoon lichter maken: het paneel houdt zijn zachte kaart en wat
     padding, zodat bij elkaar horende inhoud een groepje blijft, maar de dikke rand
     wordt een dun lijntje. Het harde kistje-in-een-kistje verdwijnt zonder dat de
     tekstkleur hoeft te wisselen: de kaart blijft licht, dus de tekst blijft donker. */
  .paneel { border-width: 1px; padding: 1.1rem 1.15rem; }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
  /* Marge 0 op het vel haalt de browser-kopregels (titel/url/datum) weg; de witruimte
     zetten we zelf terug met padding op de body, zodat de inhoud niet tegen de rand plakt. */
  @page { margin: 0; }
  .site-header, .site-footer, .hoofdnav, .skip-link, .noprint { display: none !important; }
  body { background: #fff; color: #000; background-image: none; padding: 14mm 13mm; }
  .band { padding-block: 0; }
  .paneel, .deur, .stap, .faq-item, .beeldvlak-kader { box-shadow: none; }

  /* Bewaar-je-accountcode-pagina rustig en gericht printen: weg met de schermdecoratie
     (kicker, voortgangsbalk, het grote vinkje), zodat het blad alleen de code en de
     uitleg toont. De code zelf zetten we groot en in een stevig kader, als bewaarvel. */
  .kicker, .voortgang, .voortgang-kop, .bevestiging-vink, .vonk { display: none !important; }
  .inhoud { max-width: 100%; margin: 0; padding: 0; }
  h1 { font-size: 1.6rem; margin-bottom: .6rem; }

  .bewaarkaartje { border: 3px solid #000 !important; background: #fff !important;
    page-break-inside: avoid; margin: 1rem 0; padding: 1.2rem 1.4rem; }
  .bewaarkaartje-label { color: #000 !important; }
  .bewaarkaartje-code { font-size: 2.4rem; color: #000 !important; }
  .bewaarkaartje-uitleg { color: #000 !important; }

  /* Links niet als kale URL erachter printen: dat leidt af op een bewaarvel. */
  a { text-decoration: none; color: #000; }
}

/* --------------------------------------------------------------------------
   24. Schrijfhulp, sessiebanner en bewaarkaartje
   -------------------------------------------------------------------------- */
/* Schrijfhulp: 'Even vastgelopen?' onder het tekstvak. */
.schrijfhulp { margin-top: .8rem; border: 1px solid var(--lijn);
  background: var(--papier); }
.schrijfhulp > summary { cursor: pointer; padding: .7rem .9rem; font-weight: 800;
  color: var(--terracotta-diep); }
.schrijfhulp[open] > summary { border-bottom: 1px solid var(--lijn); }
.schrijfhulp-binnen { padding: .9rem; }
.schrijfhulp-binnen .veld { margin-bottom: .7rem; }
/* De invoeg-knop werkt alleen met JS; verberg hem als JS uit staat. */
.schrijfhulp-invoegen { display: none; }
.has-js .schrijfhulp-invoegen { display: inline-flex; }

/* Zelfde patroon voor de printknop op de bedankt-schermen: zonder JS is het een dode
   knop, dus dan staat hij er niet (WCAG-principe 4, robuust). De deelknoppen zijn nu
   echte links (WhatsApp/e-mail), die werken ook zonder JS en blijven dus altijd staan. */
.js-print, .js-kopieer { display: none; }
.has-js .js-print, .has-js .js-kopieer { display: inline-flex; }

/* Sessiebanner boven het schrijfformulier. Leent het rustige melding-uiterlijk
   (crème vlak, oker rand-links), zodat 'let op'-blokken één familie vormen. */
.sessie-banner { background: var(--creme); color: var(--inkt);
  border: var(--rand) solid var(--oker-diep); border-left: 7px solid var(--oker-diep);
  padding: 1rem 1.2rem; font-weight: 600; margin-bottom: 1rem; }

/* Kaartje-preview op de bedankt-pagina: laat de net geschreven tekst nog even zien
   als klein trots-moment, opgemaakt als een warme kaart. */
.kaartje-preview { margin: 1.2rem 0; padding: 1.1rem 1.3rem;
  border: var(--rand-dik) solid var(--bruin-diep);
  background: var(--kaart); border-radius: 2px; }
/* overflow-wrap: gebruikerstekst kan één lange ononderbroken reeks bevatten
   (een link, herhaalde tekens); die mag het kader niet uit duwen. */
.kaartje-preview blockquote { margin: 0; font-size: 1.1rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.kaartje-preview figcaption { margin: .7rem 0 0; font-size: .9rem; font-weight: 700;
  color: var(--terracotta-diep); }

/* Bewaarkaartje met de accountcode op het bevestigd-scherm (en bij printen). */
.bewaarkaartje { border: var(--rand-dik) solid var(--bruin-diep);
  background: var(--kaart); padding: 1rem 1.2rem; margin: 1.2rem 0 .6rem;
  text-align: center; }
.bewaarkaartje-label { font-size: .95rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--terracotta-diep); margin: 0 0 .3rem; }
.bewaarkaartje-code { font-family: monospace; font-size: 2rem; font-weight: 800;
  letter-spacing: .12em; color: var(--inkt); margin: .1rem 0 .5rem; }
.bewaarkaartje-uitleg { font-size: 1rem; color: var(--zacht); margin: 0; }