@charset "UTF-8";
/* ==========================================================================
   LustrumMoment — stylesheet
   --------------------------------------------------------------------------
   Eén bestand, geen build-stap, geen framework. Bewerk gerust met de hand.

   Opbouw van dit bestand:
     1.  Variabelen (kleur, typografie, ruimte)   — hier pas je het meeste aan
     2.  Lettertypen (lokaal, geen externe bron)
     3.  Basis en reset
     4.  Typografie
     5.  Layout
     6.  Header en navigatie
     7.  Knoppen en links
     8.  Componenten
     9.  Formulier
    10.  Footer
    11.  Hulpklassen
    12.  Beweging en print

   Twee harde kleurregels, uit de brandgids:
     A. --teal (#009f8c) haalt 3,31:1 op wit. Dat is genoeg voor grote tekst
        (vanaf ~24px) en voor vlakken, maar NOOIT voor lopende of kleine tekst.
        Witte tekst op --teal mag evenmin. Knoppen krijgen daarom --teal-600.
     B. Op --gold (#ebc346) staat altijd --ink. Wit haalt daar 1,69:1.
   ========================================================================== */


/* ==========================================================================
   1. Variabelen
   ========================================================================== */

:root {

  /* --- Kleur: turquoise-familie en neutraal ------------------------------ */
  --teal:     #009f8c;  /* merkkleur: grote koppen, vlakken, accenten        */
  --teal-600: #007063;  /* links, knopvulling met witte tekst   — 6,00:1     */
  --teal-700: #00584d;  /* hover, active, focus-ring           — 8,39:1     */
  --tint:     #e9f5f3;  /* lichte sectievlakken en kaarten                   */
  --ink:      #14201e;  /* lopende tekst en koppen             — 16,73:1    */
  --ink-soft: #4d5c59;  /* secundaire tekst, bijschriften      — 7,02:1     */
  --paper:    #faf9f6;  /* warme paginakleur                                 */
  --white:    #ffffff;
  --line:     #dfe5e3;  /* randen en hairlines — decoratief, nooit tekst     */

  /* --- Kleur: de vier schildthemas --------------------------------------- */
  --green: #367431;     /* sport   — witte tekst mag, 5,68:1                 */
  --rust:  #953421;     /* muziek  — witte tekst mag, 7,52:1                 */
  --gold:  #ebc346;     /* lustrum — ALLEEN --ink erop, 9,90:1               */
  /* --teal dient als vierde thema (vieren), zie regel A hierboven.          */

  /* --- Typografie -------------------------------------------------------- */
  --font-kop:   "Fraunces", Georgia, "Times New Roman", serif;
  --font-tekst: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Basis is 18px. Niets in de site zakt daaronder.                         */
  --tekst:    1.125rem;   /* 18px                                            */
  --tekst-l:  1.25rem;    /* 20px — introzinnen en H4                        */
  --tekst-xl: 1.375rem;   /* 22px — hero-onderkop                            */

  --h1: clamp(2.125rem, 1.45rem + 2.9vw, 2.75rem);  /* 34px -> 44px          */
  --h2: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);     /* 26px -> 32px          */
  --h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);   /* 22px -> 24px          */

  --regelhoogte:     1.6;
  --regelhoogte-kop: 1.2;

  /* --- Ruimte ------------------------------------------------------------ */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* --- Maten ------------------------------------------------------------- */
  --breedte:  72rem;    /* maximale paginabreedte                            */
  --meetlat:  34rem;    /* leesregel: ongeveer 70 tekens bij 18px            */
  --radius:   10px;
  --radius-s: 6px;
  --raak:     44px;     /* minimale maat van een klikdoel                    */

  --schaduw: 0 1px 2px rgba(20, 32, 30, 0.04), 0 4px 16px rgba(20, 32, 30, 0.05);
}


/* ==========================================================================
   2. Lettertypen — lokaal geserveerd uit /fonts/
   Geen Google Fonts-CDN en geen enkele externe aanvraag. Daardoor blijft de
   site AVG-schoon en is er geen cookiebanner nodig.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-600-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: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-600-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;
}

/* Source Sans 3 is een variabel lettertype: één bestand dekt 400 én 600. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/sourcesans3-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/sourcesans3-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;
}


/* ==========================================================================
   3. Basis en reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: var(--tekst);
  line-height: var(--regelhoogte);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

/* Een element met het hidden-attribuut blijft verborgen, ook als een klasse
   verderop een display-waarde meegeeft. Zonder deze regel wint bijvoorbeeld
   .fout { display: block } van het hidden-attribuut. */
[hidden] { display: none !important; }

/* Zichtbare focus op elk bedienbaar element. De eerste regel bedient browsers
   zonder :focus-visible; de tweede haalt de ring weer weg bij een muisklik. */
:focus {
  outline: 3px solid var(--teal-700);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid var(--teal-700);
  outline-offset: 3px;
}

/* Sla-over-link: onzichtbaar tot hij focus krijgt.
   position: fixed, niet absolute — anders staat de link vast aan de bovenkant
   van het document en blijft hij buiten beeld zodra de pagina is gescrold. */
.skip-link {
  position: fixed;
  left: var(--s4);
  top: -100%;
  z-index: 100;
  background: var(--teal-700);
  color: var(--white);
  padding: var(--s3) var(--s5);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: underline;
  font-weight: 600;
}
/* De kleur moet hier herhaald worden: de algemene regel a:focus-visible
   verderop is specifieker dan .skip-link en zou de tekst anders --teal-700
   maken op een --teal-700 vlak. Dan is de link onleesbaar op het moment dat
   hij juist zichtbaar wordt. */
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  color: var(--white);
  outline-color: var(--white);
}

::selection { background: var(--tint); color: var(--ink); }


/* ==========================================================================
   4. Typografie
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 600;
  line-height: var(--regelhoogte-kop);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

/* H1 staat in de merkkleur. Dat mag: vanaf 34px geldt de AA-eis voor grote
   tekst (3,0:1) en --teal haalt 3,15:1 op --paper. Gebruik deze kleur
   nergens anders voor tekst. */
h1 {
  font-size: var(--h1);
  color: var(--teal);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

/* Kopblok: een korte kleurstreep boven de belangrijkste kop van een sectie,
   zodat elk blok ook visueel een eigen, herkenbare start heeft. Alleen
   handmatig op sectiekoppen gezet — niet op koppen in de footer, de FAQ-
   accordeon of de rekenhulp/Quick Scan, die al hun eigen context hebben. */
.kop-blok::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 999px;
  background: var(--teal-600);
  margin-bottom: var(--s3);
}
.kop-blok { letter-spacing: -0.01em; }

h4 {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: var(--tekst-l);
  line-height: 1.3;
  margin: 0 0 var(--s3);
}

p, ul, ol, dl, table { margin: 0 0 var(--s5); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.35em; }
li { margin-bottom: var(--s3); }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--teal-600); }

strong, b { font-weight: 600; }

abbr[title] { text-decoration-color: var(--ink-soft); }

blockquote {
  margin: 0 0 var(--s5);
  padding-left: var(--s5);
  border-left: 4px solid var(--teal);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s7) 0;
}

/* Introzin onder een kop. */
.intro {
  font-size: var(--tekst-l);
  color: var(--ink-soft);
  max-width: var(--meetlat);
}

/* Bijschrift of terzijde. Kleur draagt hier het onderscheid, niet de maat —
   niets in deze site zakt onder 18px. */
.klein { color: var(--ink-soft); }


/* ==========================================================================
   5. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: var(--s5);
}

main { flex: 1 0 auto; }

/* Verticaal ritme van de secties. */
.sectie { padding-block: var(--s7); }
.sectie--ruim { padding-block: var(--s8); }
.sectie--tint { background: var(--tint); }
.sectie--wit  { background: var(--white); }

@media (min-width: 48rem) {
  .sectie       { padding-block: var(--s8); }
  .sectie--ruim { padding-block: var(--s9); }
}

/* Een leesbare tekstkolom: nooit breder dan ongeveer 70 tekens. */
.prose { max-width: var(--meetlat); }
.prose > * + h2 { margin-top: var(--s7); }
.prose > * + h3 { margin-top: var(--s6); }

/* Eenvoudige kolomrasters. Ze klappen vanzelf naar één kolom op smal. */
.raster {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Tekst naast beeld. */
.duo { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 56rem) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .duo--smal-links { grid-template-columns: 20rem 1fr; align-items: start; }
}

/* De vier schildkleuren als rustige accentband. Puur decoratief. */
.kwadrantband { display: flex; height: 6px; }
.kwadrantband span { flex: 1; }
.kwadrantband span:nth-child(1) { background: var(--green); }
.kwadrantband span:nth-child(2) { background: var(--rust); }
.kwadrantband span:nth-child(3) { background: var(--teal); }
.kwadrantband span:nth-child(4) { background: var(--gold); }


/* ==========================================================================
   6. Header en navigatie
   ========================================================================== */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

/* Plakkende kop: schuift weg bij omlaag scrollen en komt direct terug bij een
   beweging omhoog (js/site.js zet de klasse "is-verborgen"). Alleen met JS;
   zonder JS blijft de kop gewoon bovenaan de pagina staan. */
/* Kruimelpad: tweede regel in dezelfde kop. Per pagina anders, dus niet
   meegenomen in de byte-identiek-controle (zie CLAUDE.md). */
.kruimelpad { border-top: 1px solid var(--line); background: var(--paper); }
.kruimelpad ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem;
}
.kruimelpad li { display: inline-flex; align-items: center; min-height: var(--raak); font-size: 1.125rem; color: var(--ink-soft); }
.kruimelpad li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ink-soft); }
.kruimelpad a { display: inline-flex; align-items: center; min-height: var(--raak); color: var(--teal-700); }
.kruimelpad [aria-current] { color: var(--ink); font-weight: 600; }

.js .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform 0.25s ease;
}
.js .site-header.is-verborgen { transform: translateY(-100%); }
.js .site-header:focus-within { transform: none; }
 (prefers-reduced-motion: reduce) {
  .js .site-header { transition: none; }
}

.site-header__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
  flex-wrap: wrap;
}

/* Logo: het schild als beeld, het woordmerk als tekst. De brandgids schrijft
   voor dat een klein woordmerk niet in #009f8c maar in --teal-700 of --ink
   staat; als tekst blijft het bovendien scherp op elk scherm. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--teal-700);
  min-height: var(--raak);
  padding: var(--s1) var(--s1) var(--s1) 0;
}
.logo img { width: 36px; height: auto; }
.logo__woord {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo:hover .logo__woord,
.logo:focus-visible .logo__woord { text-decoration: underline; }

@media (min-width: 26rem) {
  .logo img { width: 42px; }
  .logo__woord { font-size: 1.375rem; }
}
@media (min-width: 40rem) {
  .logo img { width: 52px; }
  .logo__woord { font-size: 1.5rem; }
}

/* De menuknop bestaat alleen als JavaScript aanstaat. Zonder JavaScript
   blijft de lijst gewoon zichtbaar en werkt de navigatie volledig. */
.nav-knop { display: none; }

.site-nav__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
}
.site-nav__lijst li { margin: 0; }

.site-nav__lijst a {
  display: flex;
  align-items: center;
  min-height: var(--raak);
  padding: var(--s2) var(--s1);
  color: var(--teal-600);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav__lijst a:hover,
.site-nav__lijst a:focus-visible {
  color: var(--teal-700);
  text-decoration: underline;
}

/* De huidige pagina wordt door twee dingen gemarkeerd — een streep en vettere
   tekst — zodat kleur nooit de enige drager is. Het aria-current-attribuut
   vertelt hetzelfde aan een schermlezer. */
.site-nav__lijst a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--teal);
}

@media (max-width: 61.99rem) {
  .js .nav-knop {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: var(--raak);
    padding: var(--s2) var(--s4);
    background: var(--white);
    border: 2px solid var(--teal-600);
    border-radius: var(--radius-s);
    color: var(--teal-600);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .js .nav-knop:hover { background: var(--tint); }
  .js .site-nav { flex-basis: 100%; }
  .js .site-nav[hidden] { display: none; }
  .js .site-nav__lijst {
    flex-direction: column;
    gap: 0;
    padding-block: var(--s2);
    border-top: 1px solid var(--line);
  }
  .js .site-nav__lijst a {
    padding-inline: var(--s2);
    border-bottom: 1px solid var(--line);
    border-left: 4px solid transparent;
  }
  .js .site-nav__lijst a[aria-current="page"] {
    border-bottom-color: var(--line);
    border-left-color: var(--teal);
    background: var(--tint);
  }
  .js .site-nav__lijst li:last-child a { border-bottom: 0; }
}


/* ==========================================================================
   7. Knoppen en links
   ========================================================================== */

a {
  color: var(--teal-600);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:hover, a:focus-visible { color: var(--teal-700); }

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--raak);
  padding: var(--s3) var(--s5);
  border-radius: var(--radius-s);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Vulling --teal-600 met witte tekst: 6,00:1. Nooit --teal met wit. */
.knop--primair {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: var(--white);
}
.knop--primair:hover,
.knop--primair:focus-visible {
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: var(--white);
}

.knop--secundair {
  background: transparent;
  border-color: var(--teal-600);
  color: var(--teal-600);
}
.knop--secundair:hover,
.knop--secundair:focus-visible {
  background: var(--tint);
  border-color: var(--teal-700);
  color: var(--teal-700);
}

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s6);
}


/* ==========================================================================
   8. Componenten
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: var(--s7) var(--s6); }
.hero__kop { max-width: 20ch; }
.hero__onderkop {
  font-size: var(--tekst-xl);
  line-height: 1.45;
  max-width: 40ch;
  margin-bottom: 0;
}
@media (min-width: 48rem) {
  .hero { padding-block: var(--s8) var(--s7); }
}

/* Beeldband over de volle breedte. */
.beeldband img { width: 100%; object-fit: cover; }
.beeldband--hoog img { aspect-ratio: 16 / 9; }
.beeldband--laag img { aspect-ratio: 21 / 9; }
.beeldband--rond img { border-radius: var(--radius); }
@media (max-width: 40rem) {
  .beeldband--laag img { aspect-ratio: 3 / 2; }
}

/* --- Kaart --------------------------------------------------------------- */
.kaart {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--schaduw);
  display: flex;
  flex-direction: column;
}
.kaart h3 { margin-bottom: var(--s3); }
.kaart__slot { margin-top: auto; padding-top: var(--s4); }
.sectie--wit .kaart { background: var(--paper); }

.kaart--beeld { padding: 0; overflow: hidden; }
.kaart--beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kaart--beeld .kaart__tekst {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kaart--link:hover { border-color: var(--teal); }

/* --- Categorielabel ------------------------------------------------------ */
.label {
  display: inline-block;
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--s3);
}
.label--sport   { background: var(--green); color: var(--white); }
.label--muziek  { background: var(--rust);  color: var(--white); }
.label--lustrum { background: var(--gold);  color: var(--ink);   } /* nooit wit */
.label--vieren  { background: var(--tint);  color: var(--teal-700); }

/* --- Stap (genummerde fase) ---------------------------------------------- */
.stap__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--tint);
  color: var(--teal-700);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: var(--tekst-l);
  margin-bottom: var(--s4);
}

/* --- Uitgelicht blok ----------------------------------------------------- */
.uitgelicht {
  background: var(--tint);
  border-radius: var(--radius);
  padding: var(--s5);
}
@media (min-width: 48rem) {
  .uitgelicht { padding: var(--s6); }
}

/* --- Melding: concept, in afwachting van toetsing ------------------------ */
.melding {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold);
  border-radius: var(--radius-s);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s6);
  color: var(--ink);
  max-width: 48rem;
}
.melding__titel {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: var(--tekst);
  margin: 0 0 var(--s2);
}

/* Zichtbare markering van gegevens die nog ingevuld moeten worden. */
.invullen {
  background: var(--gold);
  color: var(--ink);
  padding: 0 var(--s2);
  border-radius: var(--radius-s);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Accordeon (veelgestelde vragen) ------------------------------------- */
/* Gebouwd op details/summary: werkt zonder JavaScript en is met het
   toetsenbord te bedienen. */
.vraag {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--s4);
}
.vraag[open] { border-color: var(--teal); }

.vraag > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--raak);
  padding: var(--s4) var(--s5);
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: var(--tekst-l);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary:hover { background: var(--tint); }

/* De vraag staat in een kop, zodat een schermlezer van vraag naar vraag kan
   springen. Visueel blijft het de tekst van de samenvatting. */
.vraag > summary h2 {
  font: inherit;
  color: inherit;
  margin: 0;
  text-wrap: pretty;
}

/* Het teken is tekst, geen kleurverschil — zo blijft de staat leesbaar. */
.vraag > summary::after {
  content: "+";
  font-family: var(--font-tekst);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--teal-700);
  flex: none;
}
.vraag[open] > summary::after { content: "\2212"; }

.vraag__antwoord {
  padding: 0 var(--s5) var(--s5);
  max-width: var(--meetlat);
}

/* --- Definitielijst voor korte feiten ------------------------------------ */
.feiten { margin: 0; }
.feiten div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.feiten dt { font-weight: 600; min-width: 12rem; }
.feiten dd { margin: 0; color: var(--ink-soft); }


/* ==========================================================================
   9. Formulier
   ========================================================================== */

.formulier {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  max-width: 40rem;
}
@media (min-width: 48rem) {
  .formulier { padding: var(--s6); }
}

.veld { margin-bottom: var(--s5); }

/* Labels staan altijd zichtbaar boven het veld. Een placeholder is nooit het
   enige label. */
.veld > label,
.veld legend {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s2);
  padding: 0;
}

.veld__hint {
  display: block;
  color: var(--ink-soft);
  margin-bottom: var(--s2);
}

/* "verplicht" staat er voluit bij; een asterisk alleen zou te weinig zijn. */
.verplicht { font-weight: 400; color: var(--ink-soft); }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: var(--raak);
  padding: var(--s3) var(--s4);
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
}
textarea { min-height: 9rem; resize: vertical; }

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover { border-color: var(--ink-soft); }

input:focus, select:focus, textarea:focus { border-color: var(--teal-700); }

input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--rust); }

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--s4);
  margin: 0 0 var(--s5);
}
fieldset legend { padding-inline: var(--s2); }

/* Keuzerondjes en vinkje: ruime raakvlakken, label naast het bolletje.
   Het label staat naast het invoerveld en omsluit het niet — anders zet een
   link binnen dat label in sommige browsers het vinkje om. */
.keuze {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--raak);
}
.keuze input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  flex: none;
  accent-color: var(--teal-600);
}
/* Het vakje zelf is 22px; het label maakt er samen met de padding een
   klikdoel van ten minste 44px hoog van. */
.keuze label {
  display: block;
  font-weight: 400;
  margin: 0;
  padding-block: var(--s3);
  min-height: var(--raak);
  cursor: pointer;
}

/* Foutmelding: staat in tekst, niet alleen in kleur, en is aan het veld
   gekoppeld via aria-describedby. */
.fout {
  display: block;
  color: var(--rust);
  font-weight: 600;
  margin-top: var(--s2);
}
.fout::before { content: "Let op: "; }


/* --- Quick Scan ----------------------------------------------------------
   Progressief verbeterd: zonder JavaScript blijven alle drie de vragen
   gewoon zichtbaar (geen hidden-attributen in de HTML zelf; die zet
   js/quick-scan.js pas na het laden). --------------------------------- */
.qs { max-width: var(--meetlat); }

.qs__voortgang {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.qs__voortgang span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}
.qs__voortgang span.on { background: var(--teal-600); }

.qs__stap { border: 0; padding: 0; margin: 0 0 var(--s7); }
.qs__stap[hidden] { display: none; }
.qs__stap p.klein { margin-top: var(--s2); }

.qs__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s6);
}

.qs__resultaat[hidden] { display: none; }
.qs__resultaat h2 { margin-top: var(--s4); }

.qs__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.qs__icoon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--white);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qs__icoon--ok  { background: var(--teal-600); }
.qs__icoon--nee { background: var(--ink-soft); }

.qs__opnieuw {
  display: inline-block;
  margin-top: var(--s5);
  padding: 0;
  min-height: var(--raak);
  background: none;
  border: 0;
  color: var(--teal-600);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.qs__opnieuw:hover, .qs__opnieuw:focus-visible { color: var(--teal-700); }


/* ==========================================================================
   10. Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--s7);
  margin-top: var(--s8);
}
/* Footerlinks zijn niet onderstreept; bij hover/focus lichten ze op in goud
   (--gold op --ink haalt 9,9:1). De lijsten staan onder eigen koppen, zodat
   ze ook zonder streep als links herkenbaar zijn; losse links in lopende
   tekst (e-mail) krijgen vetgewicht. */
.site-footer a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer address a { font-weight: 600; }
.site-footer a:hover, .site-footer a:focus-visible {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(235, 195, 70, 0.45);
}
.site-footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.site-footer__raster {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .site-footer__raster { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s7); }
}

.site-footer h2 {
  font-family: var(--font-tekst);
  font-size: var(--tekst);
  font-weight: 600;
  margin-bottom: var(--s3);
  color: var(--white);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--s3); }

.site-footer__merk {
  font-family: var(--font-kop);
  font-size: var(--tekst-l);
  font-weight: 600;
  margin-bottom: var(--s3);
}
.site-footer address { font-style: normal; }

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--raak);
  padding-block: var(--s2);
  margin-top: var(--s1);
}
.footer-social svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

.site-footer__slot {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/* De juridische links in de onderste balk zijn bewust niet onderstreept.
   Vetgewicht blijft dan de niet-kleur-drager die ze van de lopende tekst
   ernaast onderscheidt; bij hover/focus lichten ze op (zie .site-footer a). */
.site-footer__juridisch { margin-top: var(--s3); }
.site-footer__juridisch a {
  font-weight: 600;
  text-decoration: none;
}


/* ==========================================================================
   11. Hulpklassen
   ========================================================================== */

/* Alleen voor schermlezers — blijft leesbaar voor hulpsoftware. */
.alleen-schermlezer {
  position: absolute;
  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;
}

.midden      { text-align: center; }
.geen-marge  { margin: 0; }
.marge-boven { margin-top: var(--s6); }


/* ==========================================================================
   12. Beweging en print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, .site-nav, .nav-knop, .beeldband, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-footer { background: #fff; color: #000; border-top: 1px solid #999; }
  .site-footer a { color: #000; }
  .vraag { border: 0; }
  /* Op papier staan alle antwoorden open. */
  .vraag:not([open]) > .vraag__antwoord { display: block; }
  .vraag > summary::after { content: ""; }
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}


/* ==========================================================================
   13. Rekenhulp (embed op wat-is-een-steunstichting-sbbi.html)
   --------------------------------------------------------------------------
   Los, in zichzelf gescoped blok onder #lm-rekenhulp — door Mathieu
   aangeleverd en op de site zelf niet letterlijk brontekst. Gebruikt eigen
   lokale kleurvariabelen (--tq, --geel, --roodbruin, --groen …) die
   overeenkomen met de bestaande merkkleuren uit sectie 1, zodat er geen
   dubbele definities in :root nodig zijn. Bijschriften die in de aanlevering
   0,9375rem (15px) waren, zijn hier op 1,125rem (18px) gezet: niets op deze
   site gaat onder de minimale tekstgrootte, ook geen bijschrift.
   ========================================================================== */

#lm-rekenhulp {
  --tq: #009f8c; --tq-i: #007063; --tq-d: #00584d; --tq-t: #e9f5f3;
  --ink: #14201e; --ink-z: #4d5c59; --paper: #faf9f6; --line: #dfe5e3;
  --geel: #ebc346; --roodbruin: #953421; --groen: #367431;
  --display: var(--font-kop); --text: var(--font-tekst);
  font-family: var(--text); font-size: 1.125rem; line-height: 1.6; color: var(--ink);
  max-width: 72rem; margin: 0 auto; padding: 3rem 0 3rem; box-sizing: border-box;
}
#lm-rekenhulp *, #lm-rekenhulp *::before, #lm-rekenhulp *::after { box-sizing: inherit; }

#lm-rekenhulp .rh-kop { max-width: 40rem; margin-bottom: 2.5rem; }
#lm-rekenhulp h2#rh-titel {
  font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1.2;
  margin: 0 0 1rem; letter-spacing: -0.01em;
}
#lm-rekenhulp h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.25; margin: 0; }
#lm-rekenhulp .rh-kop > p { margin: 0; color: var(--ink); }

#lm-rekenhulp .rh-moment { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
#lm-rekenhulp .rh-moment .rh-vraag {
  display: block; font-family: var(--display); font-weight: 600; font-size: 1.25rem; margin-bottom: 0.625rem;
}
#lm-rekenhulp .rh-jubileum-opslag { margin-top: 1rem; max-width: 28rem; }
#lm-rekenhulp .rh-jubileum-opslag[hidden] { display: none; }
#lm-rekenhulp .rh-jubileum-opslag label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

#lm-rekenhulp .rh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 3rem; align-items: start; }

/* Vragen */
#lm-rekenhulp fieldset { border: 0; margin: 0 0 2.5rem; padding: 0 0 2.5rem; border-bottom: 1px solid var(--line); }
#lm-rekenhulp fieldset:last-of-type { border-bottom: 0; margin-bottom: 0; }
#lm-rekenhulp legend {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.25;
  padding: 0; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.75rem;
}
#lm-rekenhulp .rh-stip { width: 0.875rem; height: 0.875rem; border-radius: 50%; flex: none; }
#lm-rekenhulp .rh-groep-uitleg { color: var(--ink-z); margin: 0 0 1.25rem; font-size: 1.125rem; }

#lm-rekenhulp .rh-veld { margin-top: 1.25rem; }
#lm-rekenhulp .rh-veld label, #lm-rekenhulp .rh-vraag { display: block; font-weight: 600; margin-bottom: 0.375rem; }
#lm-rekenhulp .rh-hint { display: block; font-size: 1.125rem; line-height: 1.5; color: var(--ink-z); margin: -0.125rem 0 0.5rem; }

#lm-rekenhulp .rh-invoer { position: relative; max-width: 14rem; }
#lm-rekenhulp .rh-invoer.is-euro .rh-prefix {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--ink-z); pointer-events: none;
}
#lm-rekenhulp input[type="text"] {
  width: 100%; min-height: 2.875rem; padding: 0.5rem 0.875rem; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid #b9c4c1; border-radius: 0.375rem;
  font-variant-numeric: tabular-nums;
}
#lm-rekenhulp .rh-invoer.is-euro input { padding-left: 2rem; }
#lm-rekenhulp input[type="text"]:focus { outline: 2px solid var(--tq-d); outline-offset: 2px; border-color: var(--tq-d); }
#lm-rekenhulp input[aria-invalid="true"] { border-color: var(--roodbruin); }
#lm-rekenhulp .rh-fout { display: none; font-size: 1.125rem; color: var(--roodbruin); margin-top: 0.375rem; font-weight: 600; }
#lm-rekenhulp .rh-fout.is-zichtbaar { display: block; }

#lm-rekenhulp .rh-schuif { display: flex; align-items: center; gap: 1rem; max-width: 26rem; }
#lm-rekenhulp input[type="range"] { flex: 1; min-height: 2.75rem; accent-color: var(--tq-i); cursor: pointer; }
#lm-rekenhulp input[type="range"]:focus-visible { outline: 2px solid var(--tq-d); outline-offset: 4px; border-radius: 0.25rem; }
#lm-rekenhulp .rh-schuif output { min-width: 3.5rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
#lm-rekenhulp .rh-signaal { display: none; font-size: 1.125rem; color: var(--ink); background: #fbf3d6; border-left: 3px solid var(--geel); padding: 0.375rem 0.75rem; margin-top: 0.5rem; max-width: 26rem; }
#lm-rekenhulp .rh-signaal.is-zichtbaar { display: block; }

#lm-rekenhulp .rh-keuze { display: flex; gap: 0.75rem; flex-wrap: wrap; }
#lm-rekenhulp .rh-keuze label {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 1.125rem 0.375rem 0.875rem;
  border: 1px solid #b9c4c1; border-radius: 999px; background: #fff; font-weight: 400; margin: 0; cursor: pointer;
}
#lm-rekenhulp .rh-keuze input { accent-color: var(--tq-i); width: 1.125rem; height: 1.125rem; margin: 0; flex: none; }
#lm-rekenhulp .rh-keuze label:has(input:checked) { border-color: var(--tq-i); background: var(--tq-t); font-weight: 600; }
#lm-rekenhulp .rh-keuze label:has(input:focus-visible) { outline: 2px solid var(--tq-d); outline-offset: 2px; }
#lm-rekenhulp .rh-nieuw[hidden] { display: none; }

/* Extra activiteiten */
#lm-rekenhulp .rh-activiteiten-lijst { display: flex; flex-direction: column; gap: 0.75rem; }
#lm-rekenhulp .rh-activiteit { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.875rem 1rem; background: #fff; }
#lm-rekenhulp .rh-activiteit > label { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 600; cursor: pointer; margin: 0; }
#lm-rekenhulp .rh-activiteit input[type="checkbox"] { margin-top: 0.2rem; width: 1.125rem; height: 1.125rem; accent-color: var(--tq-i); flex: none; }
#lm-rekenhulp .rh-activiteit .rh-hint-inline { display: block; font-weight: 400; color: var(--ink-z); font-size: 1.125rem; margin-top: 0.125rem; }
#lm-rekenhulp .rh-activiteit:has(input:checked) { border-color: var(--tq-i); background: var(--tq-t); }
#lm-rekenhulp .rh-activiteit-bedrag { margin: 0.875rem 0 0 1.875rem; }
#lm-rekenhulp .rh-activiteit-bedrag[hidden] { display: none; }
#lm-rekenhulp .rh-activiteit-bedrag label { display: block; font-weight: 600; margin-bottom: 0.375rem; font-size: 1rem; }
#lm-rekenhulp .rh-anders-tekst {
  width: 100%; max-width: 22rem; min-height: 2.75rem; padding: 0.5rem 0.875rem; font: inherit;
  border: 1px solid #b9c4c1; border-radius: 0.375rem; margin-bottom: 0.75rem; display: block;
}
#lm-rekenhulp .rh-anders-tekst:focus { outline: 2px solid var(--tq-d); outline-offset: 2px; border-color: var(--tq-d); }

/* Uitkomst */
#lm-rekenhulp .rh-uitkomst {
  position: sticky; top: 1.5rem; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--tq);
  border-radius: 0.5rem; padding: 1.75rem 1.5rem 1.5rem;
}
#lm-rekenhulp .rh-totaal {
  font-family: var(--display); font-weight: 600; font-size: 3.25rem; line-height: 1.05; margin: 0.75rem 0 0.25rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; overflow-wrap: anywhere;
}
#lm-rekenhulp .rh-totaal-sub { color: var(--ink-z); margin: 0; font-size: 1.125rem; }
#lm-rekenhulp .rh-leeg { margin: 1.25rem 0 0; color: var(--ink-z); }

#lm-rekenhulp .rh-balk { display: flex; height: 1.25rem; border-radius: 0.25rem; overflow: hidden; background: var(--tq-t); margin: 1.5rem 0 1rem; }
#lm-rekenhulp .rh-balk span { display: block; height: 100%; transition: width 0.25s ease; }
#lm-rekenhulp .rh-balk span + span { box-shadow: inset 2px 0 0 #fff; }

#lm-rekenhulp .rh-opbouw { list-style: none; margin: 0; padding: 0; }
#lm-rekenhulp .rh-opbouw li {
  display: grid; grid-template-columns: 0.875rem 1fr auto; gap: 0 0.625rem; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line);
}
#lm-rekenhulp .rh-opbouw li:last-child { border-bottom: 0; }
#lm-rekenhulp .rh-opbouw .rh-stip { align-self: center; }
#lm-rekenhulp .rh-opbouw .rh-naam { font-weight: 600; }
#lm-rekenhulp .rh-opbouw .rh-detail { grid-column: 2 / 4; font-size: 1.125rem; color: var(--ink-z); line-height: 1.4; }
#lm-rekenhulp .rh-opbouw .rh-bedrag { font-variant-numeric: tabular-nums; font-weight: 600; }
#lm-rekenhulp .rh-opbouw li.is-opslag .rh-naam { font-style: italic; font-weight: 600; }

#lm-rekenhulp .rh-knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
#lm-rekenhulp .rh-knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.875rem; padding: 0.5rem 1.25rem;
  font: inherit; font-weight: 600; border-radius: 0.375rem; text-decoration: none; cursor: pointer;
}
#lm-rekenhulp .rh-knop-primair { background: var(--tq-i); color: #fff; border: 1px solid var(--tq-i); }
#lm-rekenhulp .rh-knop-primair:hover, #lm-rekenhulp .rh-knop-primair:active { background: var(--tq-d); border-color: var(--tq-d); }
#lm-rekenhulp .rh-knop-secundair { background: transparent; color: var(--tq-i); border: 1px solid var(--tq-i); }
#lm-rekenhulp .rh-knop-secundair:hover { background: var(--tq-t); }
#lm-rekenhulp .rh-knop:focus-visible { outline: 2px solid var(--tq-d); outline-offset: 3px; }

#lm-rekenhulp .rh-noten { margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
#lm-rekenhulp .rh-noten p { font-size: 1.125rem; line-height: 1.5; color: var(--ink-z); margin: 0 0 0.75rem; }
#lm-rekenhulp .rh-noten p:last-child { margin-bottom: 0; }

#lm-rekenhulp .rh-mobielbalk { display: none; }

@media (max-width: 60rem) {
  #lm-rekenhulp { padding-bottom: 6rem; }
  #lm-rekenhulp .rh-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  #lm-rekenhulp .rh-uitkomst { position: static; }
  #lm-rekenhulp .rh-mobielbalk {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    align-items: center; justify-content: space-between; gap: 1rem;
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(20, 32, 30, 0.08);
    padding: 0.625rem 1.25rem calc(0.625rem + env(safe-area-inset-bottom));
    transition: transform 0.2s ease;
  }
  #lm-rekenhulp .rh-mobielbalk.is-weg { transform: translateY(110%); }
  #lm-rekenhulp .rh-mobielbalk strong { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
  #lm-rekenhulp .rh-mobielbalk a { color: var(--tq-i); font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center; }
}
@media (max-width: 30rem) {
  #lm-rekenhulp .rh-totaal { font-size: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  #lm-rekenhulp .rh-balk span, #lm-rekenhulp .rh-mobielbalk { transition: none; }
}

/* --- Bandbreedte-tabel (drie scenario's) --------------------------------- */
#lm-rekenhulp .rh-bandbreedte { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
#lm-rekenhulp .rh-bandbreedte h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
#lm-rekenhulp .rh-bandbreedte > p { max-width: 48rem; color: var(--ink-z); margin: 0 0 1.5rem; }

#lm-rekenhulp .rh-tabel-wrap { overflow-x: auto; border-radius: 0.5rem; border: 1px solid var(--line); }
#lm-rekenhulp table {
  width: 100%; border-collapse: collapse; background: #fff; min-width: 34rem;
}
#lm-rekenhulp th, #lm-rekenhulp td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
#lm-rekenhulp thead th {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  color: var(--ink-z); background: var(--paper);
}
#lm-rekenhulp td.rh-num, #lm-rekenhulp th.rh-num { text-align: right; font-variant-numeric: tabular-nums; }
#lm-rekenhulp tbody tr:last-child td { border-bottom: 0; }
#lm-rekenhulp tbody tr.rh-scenario-huidig td { background: var(--tq-t); font-weight: 700; }
#lm-rekenhulp .rh-scenario-noot { font-size: 1.125rem; line-height: 1.5; color: var(--ink-z); margin: 1rem 0 0; }
#lm-rekenhulp .rh-scenario-noot[hidden] { display: none; }

@media (max-width: 30rem) {
  #lm-rekenhulp .rh-bandbreedte h2 { font-size: 1.5rem; }
}


/* --- Tally-formulier (pas geladen na een klik, js/tally.js) -------------- */
.tally-blok { max-width: var(--meetlat); }
.tally-blok[hidden] { display: none; }
#tally-houder iframe { display: block; width: 100%; border: 0; min-height: 36rem; }

/* --- Voorbeeldtabellen (voorbeelden.html) -------------------------------- */
.vb-tabel-wrap { overflow-x: auto; border-radius: 0.5rem; border: 1px solid var(--line); margin: 0 0 var(--s5); background: #fff; }
.vb-tabel { width: 100%; border-collapse: collapse; margin: 0; min-width: 34rem; }
.vb-tabel th, .vb-tabel td { text-align: left; vertical-align: top; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.vb-tabel thead th { font-size: 1.125rem; font-weight: 700; color: var(--ink-soft); background: var(--paper); }
.vb-tabel tbody tr:last-child td { border-bottom: 0; }
.vb-tabel td:first-child { font-weight: 600; width: 45%; }
.vb-tabel td:nth-child(2) { width: 15%; }
.vb-tabel td:nth-child(3) { color: var(--ink-soft); }
.vb-tabel-wrap:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 2px; }