/* site.css — Layout en design-systeem Valenti website v2.
   Kleurtokens: assets/css/tokens.css (zie markdown/design-tokens.md voor de
   contrastvalidatie). Merkfonts (Jura/Quicksand) en Atkinson Hyperlegible
   (leesbaarheidsmodus): assets/css/fonts.css. */

/* === Basis & box-model === */
*, *::before, *::after { box-sizing: border-box; }
/* Springt de pagina naar een anker, dan mag de titel niet onder de vastgezette
   kopbalk verdwijnen. 8rem dekt de hoogste variant (uitgeklapt mobiel menu telt
   niet mee: dat klapt bij een klik dicht). */
html { scroll-padding-top: 8rem; }

html { scroll-behavior: smooth; }
@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; }
}

body {
    margin: 0;
    font-family: 'Quicksand', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font-size: 1.125rem; /* 18px basis — leesbaarheid boven de browser-default */
    line-height: 1.5;
    /* Nederlandse samenstellingen worden lang: "beroepsaansprakelijkheids-
       verzekering" (36 tekens) is op een 320px-scherm breder dan de kolom en
       duwde de pagina in horizontale scroll (WCAG 1.4.10 Reflow). `break-word`
       breekt uitsluitend woorden die anders zouden overlopen — normale tekst
       en de kolombreedte-berekening blijven ongemoeid. */
    overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-family: 'Jura', sans-serif; font-weight: 600; line-height: 1.25; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

a { color: var(--kleur-accent); }
a:hover { text-decoration-thickness: 2px; }

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

/* === Focus-states (WCAG 2.4.7) === */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--kleur-focus-ring);
    outline-offset: 2px;
}

/* === Skip-link (toetsenbordnavigatie: main direct bereikbaar) === */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--kleur-accent-fill);
    color: var(--kleur-accent-fill-tekst);
    padding: 0.75rem 1.25rem;
    z-index: 1000;
    border-radius: 0 0 6px 0;
}
.skip-link:focus {
    left: 0;
}

/* === Header & merk === */
/* De kopbalk blijft in beeld tijdens het scrollen (verzoek Wilco 2026-09-23).
   `sticky` en niet `fixed`: een sticky element houdt zijn plek in de pagina, dus
   de inhoud eronder schuift niet onder de balk door en er is geen compenserende
   marge nodig die bij elke hoogtewijziging opnieuw fout gaat.

   De z-index moet boven de submenu's (20) en boven de sfeerlaag op de
   voorpagina (5) liggen, anders scrollt de pagina-inhoud erdoorheen. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--kleur-surface);
    /* Huisstijlbalk onder de kop (2026-09-22). Bewust het rauwe paletkleur
       --paars-600 en geen semantisch token: dit is een merkaccent dat in élke
       weergave dezelfde kleur hoort te hebben. De semantische tokens wisselen
       juist mee met donker/licht (--kleur-accent is daar roze respectievelijk
       bijna zwart), en dat is hier niet de bedoeling. */
    border-bottom: 3px solid var(--paars-600);
    flex-wrap: wrap;
}
.site-header__brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.site-header__brand img { height: 44px; width: auto; }

/* Kopbalk-gereedschap. Sinds 2026-09-22 staat hier alleen nog de hamburger:
   de twee weergaveschakelaars zijn naar de navigatierij verhuisd, omdat hun
   lange labels de menubalk naar een tweede regel duwden (verzoek Wilco).
   `flex-wrap: wrap` blijft staan als vangnet voor WCAG 1.4.10 (Reflow) — met de
   oude drie knoppen duwden die samen de pagina 57px breed op een 320px-viewport
   (400% zoom op 1280), en die fout wil je niet opnieuw introduceren. */
.site-header__tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Compacte icoon-variant van een schakelaar (zonnetje/maantje, letter-A).
   Stond tot 2026-09-22 in intranet.css; nu gedeeld, want de publieke kop
   gebruikt hem ook. site.js vult het icoon in — zonder JS blijft de volledige
   tekst staan, en dan is deze compacte maatvoering juist ongewenst. Daarom
   grijpt hij pas aan zodra de knop het `data-icoon`-kenmerk van site.js heeft.
   In leesbaarheidsmodus haalt site.js dat kenmerk weg en valt de knop vanzelf
   terug op zijn normale maat mét tekst: wie die modus nodig heeft, is juist
   niet geholpen met symbolen. */
.toggle-btn--icoon[data-icoon] { padding: 0.3rem 0.55rem; font-size: 1.15rem; line-height: 1; }
.toggle-btn {
    background: transparent;
    border: 1px solid var(--zilver-300);
    color: var(--kleur-tekst);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.toggle-btn[aria-pressed="true"] {
    background: var(--kleur-accent-fill);
    border-color: var(--kleur-accent-fill);
    color: var(--kleur-accent-fill-tekst);
}

/* === Navigatie === */
.site-nav { width: 100%; }
.site-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* Krap gehouden (2026-09-22): het menu groeide met Aanmelden en de twee
       weergaveschakelaars, en moet op een gewone desktopbreedte op één regel
       passen. Elke tiende rem telt hier mee maal acht tussenruimtes. */
    gap: 0.15rem;
    /* Geen bovenmarge (2026-09-22): die kwam bovenop de 0.75rem padding van
       .site-header, waardoor er boven de menubalk 1.25rem ruimte stond en
       eronder 0.75rem. De onderruimte is de maat; nu is het symmetrisch.
       Op mobiel komt de marge wél terug — daar staat de uitgeklapte lijst
       ónder de hamburger en is scheiding juist nodig (zie de 900px-media). */
    margin: 0;
    padding: 0;
}
.site-nav__list > li { position: relative; }
.site-nav__list a {
    display: block;
    /* Horizontale ruimte teruggebracht van 0.9rem (2026-09-22): zeven
       menu-items met lange labels plus de schakelaars en Medewerkers pasten
       anders pas vanaf ±1150px op één regel. De verticale ruimte blijft, want
       die bepaalt het aanraakoppervlak op een telefoon. */
    padding: 0.6rem 0.7rem;
    color: var(--kleur-tekst);
    text-decoration: none;
    font-family: 'Jura', sans-serif;
    border-radius: 6px;
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
    background: var(--kleur-accent-fill);
    color: var(--kleur-accent-fill-tekst);
}

/* Dropdown-submenu (desktop: hover/focus; toetsenbord: focus-within) */
.site-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--kleur-surface);
    border: 1px solid var(--antraciet-700);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 20;
    /* Verbergen via opacity/visibility i.p.v. display: zo kan het sluiten
       vertraagd worden. Het menu klapte eerder meteen dicht zodra de muis
       ook maar even buiten het item kwam, wat het lastig bedienbaar maakte. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
        opacity 0.18s ease 0.35s,
        transform 0.18s ease 0.35s,
        visibility 0s linear 0.53s;   /* pas ná de fade echt onbereikbaar */
}
/* Onzichtbare 'brug' over de ruimte tussen het menu-item en het submenu, zodat
   de muis onderweg naar beneden niet buiten het hover-gebied valt. */
.site-nav__submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}
.site-nav__list > li:hover > .site-nav__submenu,
.site-nav__list > li:focus-within > .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Openen gebeurt direct; alleen het sluiten kent een uitstel. */
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
/* Via de uitklapknop geopend (2026-09-23): dat heeft voorrang op de
   hover-logica, en geldt op elk schermformaat. Hover bleek te precies -- het
   menu viel dicht terwijl je ernaartoe bewoog. */
.site-nav__submenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}

.site-nav__submenu a { font-family: 'Quicksand', sans-serif; padding: 0.5rem 0.75rem; }

/* De uitklapknop hoort bij het menu-item en staat er strak tegenaan. */
.site-nav__submenu-toggle {
    background: transparent;
    border: none;
    color: var(--kleur-tekst);
    font-size: 1rem;
    line-height: 1;
    padding: 0.6rem 0.4rem;
    cursor: pointer;
}

/* Mobiele hamburger — verborgen op desktop */
.site-nav__toggle { display: none; }

/* === Footer ===
   Compact gehouden (klantfeedback 2026-08-15): twee korte tekstregels
   rechtvaardigen geen hoge balk. Krappe padding en geen extra alinea-marges. */
.site-footer {
    padding: 0.75rem 1.5rem;
    background: var(--kleur-surface);
    border-top: 1px solid var(--antraciet-700);
    font-size: 0.9rem;
    color: var(--kleur-tekst-gedempt);
    text-align: center;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--kleur-tekst-gedempt); }

/* === Content-container === */
main { padding: 1.5rem; max-width: 72rem; margin: 0 auto; }

/* === Responsive: mobiel/tablet === */
@media (max-width: 900px) {
    .site-nav__toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: transparent;
        border: 1px solid var(--zilver-300);
        color: var(--kleur-tekst);
        border-radius: 6px;
        padding: 0.5rem 0.9rem;
        font-family: inherit;
        cursor: pointer;
    }
    .site-nav__list {
        display: none;
        flex-direction: column;
        width: 100%;
        /* Hier wél ruimte boven: de uitgeklapte lijst staat onder de
           hamburgerknop en moet daar zichtbaar van losstaan. */
        margin-top: 0.5rem;
    }
    .site-nav__list.is-open { display: flex; }
    .site-nav__list > li { width: 100%; }
    .site-nav__submenu {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        background: var(--kleur-surface-verhoogd);
        margin-top: 0.25rem;
        /* Op mobiel stuurt de uitklap-knop het menu via display; de
           desktop-hoverlogica (opacity/vertraging/brug) wordt hier
           teruggezet zodat het submenu gewoon zichtbaar is als het openstaat. */
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .site-nav__submenu::before { display: none; }  /* geen hover-brug bij tap-bediening */
    .site-nav__submenu.is-open { display: block; }
    main { padding: 1rem; }

    /* Submenu-uitklap-knop (alleen zichtbaar/relevant op mobiel) */
    .site-nav__item--has-children { display: flex; flex-wrap: wrap; align-items: center; }
    .site-nav__item--has-children > a { flex: 1; }
    .site-nav__submenu-toggle {
        background: transparent;
        border: none;
        color: var(--kleur-tekst);
        font-size: 1.1rem;
        padding: 0.6rem 0.9rem;
        cursor: pointer;
    }
}
@media (min-width: 901px) {
    /* De uitklapknop stond hier verborgen (tot 2026-09-23). Hij is nu ook op
       desktop de betrouwbare manier om een submenu te openen. */
    .site-nav__item--has-children { display: flex; align-items: center; }
    /* De gereedschapsbalk bevat op desktop alleen nog de hamburgerknop, en die
       is daar verborgen. Bleef het lege blok staan, dan telde het als eerste
       flex-item van .site-header en kostte de `gap: 1rem` nog 16px ruimte bóven
       de menubalk — terwijl eronder alleen de 0.75rem padding stond. Dát was de
       asymmetrie (28px boven tegen 12px onder), niet de marge van de lijst. */
    .site-header__tools { display: none; }
}

/* === Leesbaarheidsmodus (dyslexievriendelijk, groter/ruimer leesbeeld) ===
   Onafhankelijk van licht/donker; via [data-readable="true"] op <html>. */
:root[data-readable="true"] body {
    font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
    font-size: 1.25rem;
    line-height: 1.8;
    letter-spacing: 0.01em;
}
:root[data-readable="true"] h1,
:root[data-readable="true"] h2,
:root[data-readable="true"] h3,
:root[data-readable="true"] h4 {
    font-family: 'Atkinson Hyperlegible', sans-serif;
}
:root[data-readable="true"] .site-nav__list a,
:root[data-readable="true"] .site-nav__submenu a {
    font-family: 'Atkinson Hyperlegible', sans-serif;
}
:root[data-readable="true"] main a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
:root[data-readable="true"] main p {
    max-width: 68ch;
}

/* === Windows Forced Colors: laat de OS-modus overnemen zonder conflicten === */
@media (forced-colors: active) {
    .toggle-btn { border: 1px solid ButtonText; }
}

/* ============================================================
   Content-componenten (fase 3b) — gebruikt door de overgezette
   pagina's uit de bron-site. Zelfde tokens als hierboven.
   ============================================================ */

/* === Basis paginastructuur: .page > .container > .page__title + .prose === */
.page { padding: 2rem 0; }
.container { max-width: 64rem; margin: 0 auto; padding: 0 0.5rem; }
.page__title { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; font-family: 'Jura', sans-serif; }
.prose ul { padding-left: 1.5rem; }
.prose li { margin-bottom: 0.4rem; }
.lead-center { text-align: center; font-size: 1.2rem; }
.muted { color: var(--kleur-tekst-gedempt); font-size: 0.9rem; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === Knoppen === */
.knop, .btn {
    display: inline-block;
    background: var(--kleur-accent-fill);
    color: var(--kleur-accent-fill-tekst);
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Jura', sans-serif;
}
.knop:hover, .btn:hover { text-decoration: underline; }
.btn--ghost {
    background: transparent;
    border: 1px solid var(--kleur-accent);
    color: var(--kleur-tekst);
}
.knoppen-rij { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0; }

/* === Icoon-lijst (wat-is-ergotherapie, afspraak-maken) === */
/* Icoon-lijst: maximaal twee kolommen naast elkaar, daaronder verticaal
   stapelen (klantwens — een auto-fit-raster gaf een rommelige indeling). */
.icoon-lijst { list-style: none; padding: 0; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .icoon-lijst { grid-template-columns: 1fr; } }
.icoon-item { display: flex; align-items: center; gap: 0.75rem; }
/* De bron-iconen hebben sterk uiteenlopende afmetingen (45×66 t/m 85×57).
   Een vast vierkant kader met object-fit schaalt ze proportioneel binnen
   dezelfde voetafdruk, zodat ze optisch even groot ogen zonder vervorming. */
.icoon-item img { flex-shrink: 0; width: 64px; height: 64px; object-fit: contain; }

/* === Home: hero === */
/* Een kwart minder lucht boven en onder het logo (verzoek Wilco 2026-09-23):
   2rem -> 1.5rem hier, 1.5rem -> 1.125rem bij de afbeelding zelf en bovenaan
   de intro eronder. De tekst komt daarmee dichter bij het beeld te staan. */
.hero { padding: 1.5rem 0; text-align: center; }
.hero__center { display: flex; flex-direction: column; align-items: center; }
.hero__title { margin-bottom: 0.5rem; }
.hero__subtitle { color: var(--kleur-tekst-gedempt); font-size: 1.2rem; max-width: 40rem; }
.hero__foto { border-radius: 12px; margin-top: 1.125rem; max-width: 100%; }
/* Logo per thema (besluit Wilco 2026-09-01): donker thema (standaard) toont de
   donker-variant met eigen paarse plaat; het lichte thema de transparante
   variant, zodat die opgaat in de lichte achtergrond. CSS kan een img-src niet
   wisselen, dus er staan twee imgs waarvan er altijd precies één zichtbaar is. */
.hero__foto--logo-donker,
.hero__foto--logo-licht { max-width: min(100%, 34rem); height: auto; }
.hero__foto--logo-licht { display: none; }
:root[data-theme="light"] .hero__foto--logo-donker { display: none; }
:root[data-theme="light"] .hero__foto--logo-licht { display: block; }

/* === Home: intro === */
.intro { padding: 1.125rem 0 1.5rem; }
.intro__center { text-align: center; max-width: 44rem; margin: 0 auto; }

/* === Home: diensten === */
.diensten { padding: 2rem 0; }
.section-title { text-align: center; margin-bottom: 2rem; }
.dienst { display: flex; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; align-items: flex-start; }
.dienst__zij { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: 0 0 140px; }
/* De bron-iconen verschillen in maat (95x87, 80x106, 100x113); zonder deze regel
   perst het width/height-attribuut elk icoon anders vervormd in 80x80. Een vast
   vierkant kader met object-fit schaalt ze proportioneel binnen dezelfde
   voetafdruk — zelfde oplossing als bij de icoon-lijst op "Wat is ergotherapie". */
.dienst__icoon { width: 88px; height: 88px; object-fit: contain; }
/* Het arbeidsicoon is een drukke scene (persoon aan bureau + klok): binnen
   dezelfde 88px-doos oogt het kleiner dan de losse figuren erboven. Een
   optische correctie via transform vergroot de tekening zonder de layout of
   de uitlijning met de knop eronder te verschuiven. */
.dienst__icoon--arbeid { transform: scale(1.22); transform-origin: center; }
.dienst__knop {
    display: inline-block;
    background: var(--kleur-accent-fill);
    color: var(--kleur-accent-fill-tekst);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Jura', sans-serif;
    white-space: nowrap;
}
.dienst__tekst { flex: 1; min-width: 220px; }
.diensten__vw { text-align: center; margin-top: 1.5rem; }

/* === Split-layout (eds/index, contact, afspraak-maken) === */
.page--split { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
.page--split-contact { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) {
    .page--split, .page--split-contact { grid-template-columns: 1fr; }
}

/* === EDS-index: foto-grid + zijbalk + podcast-blok === */
.foto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
.foto-grid img { border-radius: 8px; }
.eds-aside {
    background: var(--kleur-surface);
    border: 1px solid var(--antraciet-700);
    border-radius: 10px;
    padding: 1.25rem;
}
.eds-aside__kop { margin-top: 0; font-size: 1.1rem; }
.eds-aside__links { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.eds-aside__links li { margin-bottom: 0.5rem; }
.podcast-blok { border-top: 1px solid var(--antraciet-700); padding-top: 1.25rem; }
.podcast-blok img { border-radius: 8px; margin-bottom: 0.75rem; }
.podcast-blok__social { list-style: none; padding: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.eds-bronnen { font-size: 0.9rem; color: var(--kleur-tekst-gedempt); }

/* === Contact & afspraak-maken === */
.contact-sub { margin-top: 1.5rem; margin-bottom: 0.25rem; font-size: 1.1rem; }
.contact-adres { font-style: normal; margin-bottom: 1rem; }
.contact-form {
    background: var(--kleur-surface);
    border: 1px solid var(--antraciet-700);
    border-radius: 10px;
    padding: 1.5rem;
}

/* === Praktijk === */
.praktijk-foto { margin: 1.5rem 0; }
.praktijk-foto img { border-radius: 10px; }
.praktijk-foto figcaption { color: var(--kleur-tekst-gedempt); font-size: 0.9rem; margin-top: 0.5rem; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.team-card {
    background: var(--kleur-surface);
    border: 1px solid var(--antraciet-700);
    border-radius: 10px;
    padding: 1.25rem;
}
/* De foto is 206px breed en de kaart is dat zelden; zonder auto-marges plakt
   hij links tegen de rand (melding Wilco 2026-09-23). De tekst blijft
   links uitgelijnd -- die leest anders slechter. `max-width` zodat de foto op
   een smalle kaart meekrimpt in plaats van uit te steken. */
.team-card__photo {
    display: block;
    margin: 0 auto 0.75rem;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.team-card__name { margin: 0 0 0.15rem; }
.team-card__role { color: var(--kleur-tekst-gedempt); font-size: 0.9rem; margin-top: 0; }
/* Horizontaal scrollbare wikkel om brede tabellen (WCAG 1.4.10 Reflow).
   Tabellen zijn van de reflow-eis uitgezonderd, maar de PAGINA mag niet mee
   scrollen — daarom scrollt alleen deze container. Met `tabindex="0"` in de view
   is hij ook per toetsenbord te scrollen; die focus moet dan wel zichtbaar zijn. */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--kleur-accent); outline-offset: 2px; }

.hours-table { border-collapse: collapse; margin: 1rem 0; }
.hours-table th, .hours-table td { text-align: left; padding: 0.4rem 1.2rem 0.4rem 0; border-bottom: 1px solid var(--antraciet-700); }

/* === Contactformulier (fase 3c) === */
.hp-field {
    /* Honeypot: onzichtbaar voor mensen, wél aanwezig voor eenvoudige bots.
       Geen display:none/visibility:hidden (sommige bots filteren daarop). */
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contactform { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: flex; flex-direction: column; gap: 0.3rem; }
.form-row label, .contactform legend { font-weight: 600; }
.form-row input, .form-row textarea {
    font: inherit;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--zilver-300);
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
}
.form-row input:focus-visible, .form-row textarea:focus-visible {
    outline: 3px solid var(--kleur-focus-ring);
    outline-offset: 1px;
}
.req { color: var(--kleur-accent); }
.form-error { color: var(--paars-400); font-size: 0.9rem; }
.form-radio { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1rem; font-weight: 400; }
.form-note { font-size: 0.85rem; color: var(--kleur-tekst-gedempt); }
.form-flash { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.form-flash--success { background: var(--kleur-accent-fill); color: var(--kleur-accent-fill-tekst); }
.form-flash--error { background: var(--kleur-surface-verhoogd); border: 1px solid var(--paars-400); }
.btn--primary { border: none; cursor: pointer; align-self: flex-start; }

/* === Scraper-beschermde contactgegevens (zie functions.php: protected_contact()) ===
   .protected-contact__fallback draait de opgeslagen omgekeerde tekst weer om tot
   leesbare volgorde. Deze regel stond eerst INLINE op het element, maar de CSP
   (style-src zonder unsafe-inline) blokkeerde dat attribuut — no-JS-bezoekers
   zagen het nummer achterstevoren (bug 2026-08-19). Vandaar hier, in de sheet. */
.protected-contact__fallback { unicode-bidi: bidi-override; direction: rtl; }
.protected-contact__link { color: var(--kleur-accent); }
/* Een e-mailadres als `info@ergotherapievalenti.nl` is één onbreekbaar woord van
   27 tekens. In een smalle kolom (320px-viewport, WCAG 1.4.10 Reflow) dwong dat
   de grid-kolom naar 305px en daarmee de pagina in horizontale scroll. `anywhere`
   laat het adres afbreken; het blijft volledig leesbaar en klikbaar. Bewust
   beperkt tot deze contactgegevens — lopende tekst mag niet midden in een woord
   breken. */
.protected-contact,
.protected-contact__link { overflow-wrap: anywhere; }

/* === Ravicom-credit in de footer (framework-regel) === */
.site-footer__credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--kleur-tekst-gedempt);
}
.site-footer__credit img { display: block; border-radius: 3px; }

/* === Versie/datum-regel op juridische pagina's (framework-regel) === */
.document-meta {
    color: var(--kleur-tekst-gedempt);
    font-size: 0.9rem;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

/* === WebGL-achtergrondeffecten (flow / fluid) ===
   Het canvas wordt door effects-webgl.js aangemaakt en achter de inhoud gelegd.
   Nooit klikbaar (de effecten luisteren op window-niveau), nooit in de weg. */
.fx-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* Inhoud staat altijd bóven het effect. De kopbalk staat er bewust NIET bij:
   die is sticky (zie boven), en `position: relative` hier overschreef dat --
   het is dezelfde specificiteit en deze regel staat later in het bestand. Een
   sticky element maakt zelf al een stapelcontext, dus hij ligt sowieso boven
   het canvas op z-index 0. */
main,
.site-footer { position: relative; z-index: 1; }

/* Geen effect in lichte weergave (ontworpen voor een donkere ondergrond),
   niet in de leesbaarheidsmodus (rust en maximaal contrast gaan voor), en
   niet wanneer de bezoeker beweging wil beperken. */
:root[data-theme="light"] .fx-canvas,
:root[data-readable="true"] .fx-canvas { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-canvas { display: none; } }

/* === Podcast-teaser === */
.podcast-teaser { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; }
.podcast-teaser__media img { width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 800px) {
    .podcast-teaser { grid-template-columns: 1fr; }
    .podcast-teaser__media { max-width: 320px; }
}
/* Kanaalknoppen op de podcastpagina */
.kanaal-lijst { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kanaal {
    display: inline-block; padding: 0.6rem 1.2rem; border-radius: 999px;
    background: var(--kleur-accent-fill); color: var(--kleur-accent-fill-tekst);
    text-decoration: none; font-weight: 600;
}
.kanaal:hover { text-decoration: underline; }
.kanaal--ghost { background: transparent; color: var(--kleur-accent); border: 2px solid var(--antraciet-700); }

/* === Prikkelpauze (speelpagina met vloeistofeffect) === */
.prikkelpauze { text-align: center; max-width: 60ch; margin: 0 auto; }
.prikkelpauze__acties { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; }
.prikkelpauze__hint { color: var(--kleur-tekst-gedempt); font-size: 0.95rem; }


/* Het HTML-attribuut `hidden` moet altijd winnen: knopklassen zetten zelf een
   display-waarde, die anders de standaard `display: none` van de browser
   overschrijft (zichtbaar geworden bij de rustknop op de Prikkelpauze-pagina). */
[hidden] { display: none !important; }

/* === Prikkelpauze: speelmodus ===
   Tijdens het spelen verdwijnt alle chrome. Reden: bij klikken-en-slepen wordt
   tekst geselecteerd (blauwe vlakken over het beeld) en dat vervuilt het effect.
   Wat overblijft is een terug-knopje en een instructie die vanzelf wegvaagt. */
:root[data-fx-spelen="true"] .site-header,
:root[data-fx-spelen="true"] .site-footer,
:root[data-fx-spelen="true"] #prikkelpauze-intro { display: none; }

/* Geen tekstselectie tijdens het slepen. */
:root[data-fx-spelen="true"] body {
    user-select: none;
    -webkit-user-select: none;
    cursor: crosshair;
}
/* Volledig scherm vrijmaken voor het canvas. */
:root[data-fx-spelen="true"] main { padding: 0; max-width: none; }

/* Terug-knop linksboven; blijft boven het canvas en is wél klikbaar. */
.fx-terug {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 5;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    /* Comfortabel raakdoel: dit effect werkt ook met een vinger, en 44px is de
       gangbare ondergrens daarvoor (WCAG 2.5.8 eist 24px, dit is ruimer). */
    min-height: 44px;
    min-width: 44px;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.fx-terug:hover { background: rgba(0, 0, 0, 0.75); }

/* Tijdelijke instructie: half transparant, gecentreerd, vaagt weg. */
.fx-melding {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;          /* nooit in de weg bij het slepen */
    opacity: 1;
    transition: opacity 0.8s ease;
}
.fx-melding.is-vervaagd { opacity: 0; }
.fx-melding__tekst {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (prefers-reduced-motion: reduce) { .fx-melding { transition: none; } }

/* === Prikkelpauze: canvas van de vloeistofsimulatie ===
   Dit canvas MOET klikbaar zijn (het originele script hangt zijn mouse- en
   touch-listeners eraan), dus géén pointer-events: none zoals bij de
   sfeerachtergrond. Het terug-knopje ligt er met een hogere z-index bovenop. */
#fluid-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    touch-action: none;   /* voorkomt scrollen/zoomen tijdens het slepen op tablet */
}
#fluid-canvas[hidden] { display: none; }

/* Credit aan de maker van het vloeistofeffect. Bescheiden maar leesbaar
   (gedempte tekst haalt op deze achtergrond nog 9,5:1 — ruim AAA). */
.prikkelpauze__credit {
    margin-top: 2.5rem;
    font-size: 0.85rem;
    color: var(--kleur-tekst-gedempt);
}

/* === Prikkelpauze op touchapparaten ===
   Tijdens het spelen mag de pagina zelf niet meebewegen. `touch-action: none`
   op het canvas vangt het slepen af, maar zonder deze twee regels kan de pagina
   er in mobiele browsers alsnog omheen scrollen of doorveren (rubber-banding). */
:root[data-fx-spelen="true"],
:root[data-fx-spelen="true"] body {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Geen tekstselectie-popup of blauwe tap-flits op het speelvlak. */
#fluid-canvas {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Terug-knop uit de weg van een notch/afgeronde hoek houden. */
.fx-terug {
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px));
}

/* === Medewerkers-login in de menubalk (2026-08-17) ===
   Rechts uitgelijnd op desktop (margin-left: auto duwt hem naar de rand);
   in het mobiele uitklapmenu gewoon het laatste item, met een scheidingslijn
   erboven zodat hij herkenbaar losstaat van de publieke navigatie. */
@media (min-width: 901px) {
    /* De rechtergroep begint bij de weergaveschakelaars: die duwen zichzelf én
       het Medewerkers-item naar de rechterrand, zodat ze precies in de ruimte
       staan die vóór 2026-09-22 leeg bleef tussen het laatste menu-item en
       Medewerkers. Staan de schakelaars er niet, dan neemt het login-item die
       rol over (vangnet, bv. als de knoppen ooit verdwijnen). */
    .site-nav__item--schakelaars { margin-left: auto; }
    .site-nav__item--login { margin-left: auto; }
    .site-nav__item--schakelaars ~ .site-nav__item--login { margin-left: 0; }
}
@media (max-width: 900px) {
    .site-nav__item--login { border-top: 1px solid var(--antraciet-700); margin-top: 0.25rem; padding-top: 0.25rem; }
    /* In het uitklapmenu staan de schakelaars naast elkaar op één regel in
       plaats van onder elkaar over de volle breedte. */
    .site-nav__item--schakelaars { display: flex; gap: 0.5rem; padding: 0.25rem 0; }
}

/* De schakelaars zitten in een <li> van een flex-lijst; zonder deze regel
   rekken ze mee met de rij. */
.site-nav__item--schakelaars { display: flex; align-items: center; gap: 0.35rem; }


/* === Sitebuilder-blokken (2026-08-20) ===
   Opmaak voor de pagina's die Kajanda zelf samenstelt. Alle kleuren komen uit
   de semantische tokens, zodat donker, licht en de leesbaarheidsmodus vanzelf
   meeschakelen (les uit 2026-08-18: rauwe paletkleuren doen dat niet). */

/* Afbeeldingsblok: nooit breder dan de kolom, hoogte volgt de verhouding uit
   het width/height-paar in de markup (voorkomt layout shift bij het laden). */
.cms-afbeelding {
    margin: 1.5rem 0;
}

/* Uitlijning (2026-08-21, naar het Jimdo-model): links of rechts laat de tekst
   van het volgende blok ernaast lopen, midden en breed zetten de afbeelding op
   een eigen regel. Onder 700 px vervalt de omloop: op een telefoon is een
   halve kolom tekst naast een foto onleesbaar. */
/* Geen vaste bovengrens meer (2026-08-21): de gebruiker stelt de breedte nu
   zelf traploos in via het width-attribuut. Een harde max-width van 45% maakte
   dat percentage een leugen -- 40% werd op het scherm alsnog 45% van de kolom.
   max-width: 100% blijft als vangnet zodat een grote foto nooit buiten de kolom
   valt; die regel staat op .cms-afbeelding__beeld. */
.cms-afbeelding--links,
.cms-afbeelding--rechts {
    max-width: 100%;
}

@media (min-width: 701px) {
    .cms-afbeelding--links {
        float: left;
        margin: 0.5rem 1.5rem 1rem 0;
    }

    .cms-afbeelding--rechts {
        float: right;
        margin: 0.5rem 0 1rem 1.5rem;
    }
}

@media (max-width: 700px) {
    /* Volle breedte en geen zwevende afbeeldingen meer. */
    .cms-afbeelding--links,
    .cms-afbeelding--rechts {
        float: none;
        max-width: 100%;
        margin: 1.5rem 0;
    }
}

.cms-afbeelding--midden {
    /* auto-marges centreren het figure zelf; het beeld volgt vanzelf. */
    margin-left: auto;
    margin-right: auto;
    max-width: 70%;
    text-align: center;
}

.cms-afbeelding--breed {
    max-width: 100%;
}

/* Een zwevende afbeelding mag niet uit zijn tekstblok lopen: het volgende
   niet-tekstelement begint weer op een schone regel. */
.cms-afbeelding + .cms-knop,
.cms-afbeelding + .cms-citaat,
.section-title {
    clear: both;
}

.cms-afbeelding__beeld {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.cms-afbeelding__bijschrift {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--kleur-tekst-gedempt);
}

/* Citaat: herkenbaar aan een accentrand links, niet alleen aan kleur. */
.cms-citaat {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--kleur-accent);
    /* --kleur-surface en niet --kleur-surface-verhoogd: die laatste is in de
       lichte weergave gelijk aan de pagina-achtergrond, waardoor het citaat
       alleen aan zijn linkerrand te herkennen was (gemeten 2026-08-20). */
    background: var(--kleur-surface);
}

.cms-citaat p {
    margin: 0;
}

.cms-citaat__bron {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    color: var(--kleur-tekst-gedempt);
}

.cms-knop {
    margin: 1.5rem 0;
}

/* "(opent in een nieuw venster)" hoort erbij voor schermlezers, maar hoeft
   visueel niet te schreeuwen. Bewust niet verborgen: ook ziende bezoekers
   mogen weten dat er een tabblad bijkomt. */
.cms-knop__extern {
    font-size: 0.85em;
    font-weight: 400;
}

/* Conceptbanner in de voorbeeldweergave: alleen zichtbaar voor een ingelogde
   beheerder. Rand + tekstlabel, dus niet uitsluitend kleur als drager. */
.cms-conceptbanner {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border: 2px dashed var(--kleur-accent);
    border-radius: 6px;
    background: var(--kleur-surface);
}

/* Afbeelding met tekst ernaast (2026-08-21): de omhullende div sluit de
   zwevende afbeelding in, zodat het volgende blok er niet omheen kruipt. */
.cms-beeldtekst::after {
    content: "";
    display: table;
    clear: both;
}

/* Binnen dit blok mogen de eerste alinea en de afbeelding op dezelfde hoogte
   beginnen; anders duwt de standaardmarge van de alinea de tekst omlaag. */
.cms-beeldtekst > .prose > :first-child {
    margin-top: 0;
}

/* === Openingsstatus (2026-08-21) ===
   "Wij zijn nu open / gesloten" op de contact- en openingstijdenpagina. De stip
   is decoratief: de status staat er altijd óók in woorden, want kleur mag nooit
   de enige informatiedrager zijn (WCAG 1.4.1). */
.openingsstatus {
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--kleur-rand);
    border-left: 4px solid var(--kleur-accent);
    border-radius: 6px;
    background: var(--kleur-surface);
}

.openingsstatus__regel {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}

/* Eén letterformaat in het hele blok (2026-09-23): de regel over de
   administratie stond op 0,95rem en dat viel op naast de regels erboven -- vier
   zinnen in drie formaten leest als een fout, niet als rangorde. Het verschil
   in belang zit nu alleen nog in de kleur en in het vette kopje. */
.openingsstatus__regel--klein {
    margin-top: 0.4rem;
    color: var(--kleur-tekst-gedempt);
}

.openingsstatus__stip {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.openingsstatus__stip--open { background: var(--kleur-succes); }
.openingsstatus__stip--dicht { background: var(--kleur-fout); }

.openingsstatus__reden {
    color: var(--kleur-tekst-gedempt);
}

/* === Aanmeldformulier (2026-08-21) ===
   Lang formulier, dus opgedeeld in blokken met een duidelijke kop. Velden staan
   onder elkaar: op een telefoon is dat de enige leesbare vorm, en op een groot
   scherm blijft het rustig. */
.aanmeldformulier {
    max-width: 40rem;
    margin-top: 1.5rem;
}

.form-blok {
    margin: 0 0 2rem;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--kleur-rand);
    border-radius: 8px;
    background: var(--kleur-surface);
}

/* De kop van een blok staat BINNEN het kader, niet op de kaderlijn.
   Voorgeschiedenis (2026-09-22/23): als `<legend>` hing hij standaard over de
   rand heen. Dat is met padding en marges naar binnen te duwen, maar dan vecht
   je tegen het element -- en met kaders in kaders blijft het rommelig. Nu een
   gewone kop; de groep houdt zijn toegankelijke naam via `aria-labelledby`. */
.form-blok__kop {
    margin: 0 0 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
}

/* Een radiogroep is een groep, geen kader. De browser geeft elke <fieldset>
   standaard een randje met de <legend> er dwars doorheen -- precies de rommel
   die bij de blokkoppen al is weggehaald (2026-09-23). Hier dus hetzelfde:
   geen rand, en de legend leest als een gewoon opschrift boven de keuzes.
   De <fieldset> blijft staan, want die koppelt de vraag aan de antwoorden
   voor een schermlezer; alleen zijn uiterlijk gaat weg. */
.aanmeldformulier fieldset.form-row {
    border: none;
    padding: 0;
    margin-inline: 0;
}

.aanmeldformulier fieldset.form-row > legend {
    padding: 0;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.aanmeldformulier .form-row {
    margin-bottom: 1rem;
}

.aanmeldformulier label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.aanmeldformulier input[type="text"],
.aanmeldformulier input[type="tel"],
.aanmeldformulier input[type="email"],
.aanmeldformulier textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--kleur-rand);
    border-radius: 5px;
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font: inherit;
}

/* Korte velden (huisnummer, postcode) hoeven niet de volle breedte. */
.form-row--kort input {
    max-width: 12rem;
}

/* Radio's en vinkjes: label niet vet en op één regel met het rondje. */
.aanmeldformulier .form-radio,
/* Aanvinkregel met tekst erachter. Bewust GEEN flexbox: in een flexcontainer
   wordt elke link en elk stuk tekst een eigen flex-item, waardoor een zin met
   twee links niet meer kan afbreken en op smalle schermen buiten beeld loopt.
   Met een uitgelijnde inspringing (hangende indent) blijft het vinkje links
   staan terwijl de tekst gewoon doorloopt en afbreekt. */
.aanmeldformulier .form-checkbox {
    display: block;
    position: relative;
    padding-inline-start: 2rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
}

/* Het vinkje en het rondje uit de tekststroom halen en optisch op de eerste
   regel zetten (2026-09-23). Het standaardvinkje van de browser is klein -- naast
   een zin van twee regels ziet dat er verloren uit -- en het gaat uit van een
   regelhoogte die deze site niet heeft. Daarom een eigen maat, en `top` in em
   zodat het meeschaalt met de leesbaarheidsmodus.

   De maat: 1,15rem is ongeveer 18px, ruim boven de 44px-tikzone die het label
   zelf al biedt, en groot genoeg om aangevinkt of niet in een oogopslag te
   zien. `accent-color` verft het in de huisstijl zonder het element na te
   bouwen -- een nagebouwd vinkje verliest zijn toetsenbordgedrag. */
.aanmeldformulier .form-checkbox > input[type="checkbox"],
.aanmeldformulier .form-radio > input[type="radio"] {
    position: absolute;
    inset-inline-start: 0;
    top: 0.28em;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--paars-600);
}

/* Een radiokeuze met een lange tekst breekt af onder zichzelf, niet onder het
   rondje: dezelfde hangende inspringing als bij het vinkje. */
.aanmeldformulier .form-radio {
    display: block;
    position: relative;
    padding-inline-start: 2rem;
    margin-right: 0;
    margin-bottom: 0.35rem;
}

/* Een veld met een fout krijgt rand én tekst — nooit alleen kleur. */
.aanmeldformulier [aria-invalid="true"] {
    border-color: var(--kleur-fout);
    border-width: 2px;
}

.form-checkbox--fout {
    outline: 2px solid var(--kleur-fout);
    outline-offset: 4px;
}

.verplicht {
    color: var(--kleur-accent);
}

/* Aanmeldknop op de contactpagina: knop en toelichting naast elkaar, en onder
   elkaar zodra de ruimte op is. */
.contact-aanmelden {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* === Sitebuilder: twee kolommen en scheiding (2026-08-21) ===
   Naast elkaar vanaf 700px; daaronder onder elkaar, want twee smalle kolommen
   tekst zijn op een telefoon onleesbaar. */
.cms-kolommen {
    display: grid;
    gap: 0 2rem;
    margin: 1.5rem 0;
}

@media (min-width: 701px) {
    .cms-kolommen {
        grid-template-columns: 1fr 1fr;
    }
}

.cms-kolommen__kolom > :first-child {
    margin-top: 0;
}

.cms-scheiding {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--kleur-rand);
}

.cms-scheiding--ruimte {
    border-top: 0;
    height: 2rem;
}

/* === Aanmeldformulier: routeblokken, AGB-hokjes en planningshorizon (2026-09-22) === */

/* Een routeblok is een genest fieldset binnen een blok. Zonder JavaScript staan
   ze allebei open; dan maakt de lichtere achtergrond duidelijk dat het om een
   keuzeblok gaat en niet om nóg een vragenlijst. */
.form-blok--route {
    margin: 1rem 0 0;
    padding: 0.75rem 0 0.25rem 1rem;
    /* Geen tweede kader binnen het kader, maar een streep opzij: dat markeert
       "dit hoort bij de keuze hierboven" zonder een eigen omlijsting te
       suggereren. Rechte hoeken -- een rand aan een kant met ronde hoeken
       ziet er kapot uit. */
    border: none;
    border-inline-start: 3px solid var(--paars-600);
    border-radius: 0;
    background: transparent;
}

.form-blok--route > legend {
    padding: 0;
    font-weight: 600;
}

/* De acht AGB-hokjes. `flex-wrap` zodat ze op een smal scherm afbreken in
   plaats van de pagina open te duwen — dezelfde les als bij de kopbalk. */
/* Een fieldset is standaard nooit smaller dan zijn inhoud (min-inline-size:
   min-content). Daardoor duwt hij zichzelf buiten het scherm zodra er iets
   breeds in staat -- zoals acht hokjes op een rij. Met 0 volgt hij gewoon de
   breedte van de pagina en krimpt de inhoud mee. */
.aanmeldformulier fieldset {
    min-inline-size: 0;
}

/* De acht hokjes blijven op EEN regel, ook op een telefoon van 320 px. Laat je
   ze afbreken, dan staat de code over drie regels verdeeld en is niet meer te
   zien welk cijfer waar hoort. Ze krimpen liever mee dan dat ze afbreken. */
.cijferhokjes {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(0.15rem, 1.2vw, 0.35rem);
    margin-bottom: 0.35rem;
}
/* De selector moet die van `.aanmeldformulier input[type="text"]` verslaan: die
   zet álle tekstvelden op 100% breed, waardoor de acht hokjes bij de eerste
   browsercontrole onder elkaar stonden in plaats van naast elkaar. */
.aanmeldformulier input[type="text"].cijferhokje {
    /* Krimpen mag (smal scherm), groeien niet: op een ruim scherm blijft het
       hokje 2,25 rem. `min-width: 0` heft de flex-standaard op die een item
       nooit onder zijn eigen minimumbreedte laat zakken. */
    flex: 0 1 2.25rem;
    min-width: 0;
    width: 2.25rem;
    padding: 0.5rem 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* Iets groter dan de gewone velden: één cijfer per hokje moet in één
       oogopslag te controleren zijn tegen de brief. */
    font-size: 1.05rem;
}
/* Op een smal scherm is de binnenruimte van de (geneste) kaders het verschil
   tussen acht leesbare hokjes en acht streepjes. Daar mag de marge dus smaller:
   de inhoud heeft hem harder nodig dan de vormgeving. */
@media (max-width: 480px) {
    .aanmeldformulier .form-blok { padding-inline: 0.6rem; }
    .aanmeldformulier .form-blok--route { padding-inline: 0.5rem; }
    .aanmeldformulier .cijfergroep { padding-inline: 0.35rem; }
    /* Onder deze breedte is een cijfer niet meer te lezen; liever iets minder
       marge eromheen dan een hokje waarin niets past. */
    .aanmeldformulier input[type="text"].cijferhokje {
        min-width: 1.7rem;
        padding-inline: 0;
        font-size: 1rem;
    }
}

/* Fout hangt aan de groep, niet aan één hokje: de code klopt als geheel niet. */
.cijfergroep--fout .cijferhokje {
    border-color: var(--kleur-fout);
}

/* === Bevestiging na een geslaagde aanmelding ===================== */
/* De vragenlijst is dan weg; dit blok is wat er overblijft. Het moet dus zelf
   duidelijk maken dat het gelukt is -- vandaar de kop, de groene rand en de
   weg terug. */
.bedankt {
    background: var(--kleur-surface-verhoogd);
    /* Rand in de huisstijl, niet in "geslaagd-groen": een groen kader valt uit
       de toon van de site en leest als een systeemmelding. Dat het gelukt is,
       zegt de kop -- kleur is hier niet de drager van de boodschap. */
    border: 1px solid var(--paars-600);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    max-width: 44rem;
}

.bedankt__kop {
    margin-top: 0;
}

/* De twee knoppen onder elkaar zodra de ruimte op is. */
.bedankt .btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* === Confetti ==================================================== */
/* Puur CSS: de site heeft een strikte CSP zonder inline script, en voor een
   knipoog van twee seconden hoort geen JavaScript geladen te worden. De strook
   staat in de tekststroom (geen `fixed`), valt eenmalig en blijft daarna staan
   waar hij is -- `animation-fill-mode: forwards` met een eindstand buiten beeld
   van de strook zelf. */
.confetti {
    position: relative;
    height: 0;                 /* neemt geen ruimte in de layout in */
    overflow: visible;
    pointer-events: none;
}

.confetti__snipper {
    position: absolute;
    top: 0;
    width: 8px;
    height: 12px;
    opacity: 0;
    border-radius: 2px;
    animation: confetti-val 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

/* Vallen, draaien, en aan het eind uitdoven: geen snippers die blijven hangen. */
@keyframes confetti-val {
    0%   { opacity: 0; transform: translateY(-10px) rotate(0deg); }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(190px) rotate(540deg); }
}

/* Verdeling over de breedte, met per snipper een eigen vertraging en kleur uit
   de huisstijl -- willekeurig ogend zonder willekeur, dus zonder JavaScript. */
.confetti__snipper--1  { left:  4%; animation-delay: 0.00s; background: var(--paars-600); }
.confetti__snipper--2  { left: 11%; animation-delay: 0.18s; background: var(--kleur-accent); }
.confetti__snipper--3  { left: 19%; animation-delay: 0.06s; background: var(--paars-400); }
.confetti__snipper--4  { left: 26%; animation-delay: 0.31s; background: var(--kleur-accent); }
.confetti__snipper--5  { left: 33%; animation-delay: 0.12s; background: var(--paars-600); }
.confetti__snipper--6  { left: 41%; animation-delay: 0.44s; background: var(--paars-400); }
.confetti__snipper--7  { left: 48%; animation-delay: 0.22s; background: var(--kleur-accent); }
.confetti__snipper--8  { left: 56%; animation-delay: 0.09s; background: var(--paars-600); }
.confetti__snipper--9  { left: 63%; animation-delay: 0.37s; background: var(--paars-400); }
.confetti__snipper--10 { left: 70%; animation-delay: 0.15s; background: var(--kleur-accent); }
.confetti__snipper--11 { left: 78%; animation-delay: 0.27s; background: var(--paars-600); }
.confetti__snipper--12 { left: 85%; animation-delay: 0.03s; background: var(--paars-400); }
.confetti__snipper--13 { left: 91%; animation-delay: 0.40s; background: var(--kleur-accent); }
.confetti__snipper--14 { left: 96%; animation-delay: 0.20s; background: var(--paars-600); }

/* Wie beweging liever niet ziet, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
    .confetti { display: none; }
}

/* Planningshorizon op de aanmeldpagina (2026-09-23).
   Stond eerst als zin tussen de lopende tekst; daar las niemand hem. Nu een
   eigen kaart boven de inleiding: dit is wat een nieuwe client als eerste wil
   weten. Opvallend genoeg om niet te missen, rustig genoeg om geen alarmbel te
   zijn -- vandaar een gevulde kaart in plaats van een rode rand. */
.planning-kaart {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--paars-600);
    border-radius: 10px;
    background: var(--kleur-surface-verhoogd);
    max-width: 44rem;
}

.planning-kaart__kop {
    margin: 0 0 0.35rem;
    font-weight: 600;
    font-size: 1.05rem;
}

/* De kernzin mag groter: wie alleen dit leest, weet genoeg. */
.planning-kaart__hoofd {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    line-height: 1.45;
}

.planning-kaart__periode {
    margin: 0 0 0.5rem;
}

.planning-kaart__voet {
    margin: 0;
    font-size: 0.9rem;
    color: var(--kleur-tekst-gedempt);
}

/* Smal veld voor het aantal weken in het beheerscherm. */
.planning-veld { width: 4rem; text-align: center; }

/* === Aanmeldformulier in stappen (2026-09-23) ===========================
   De indicator en de knoppen worden door site.js aangemaakt; zonder
   JavaScript bestaan ze niet en staan de blokken gewoon onder elkaar. Deze
   stijlen doen dus niets op een pagina zonder script. */

.stappen {
    margin: 0 0 1.25rem;
}

.stappen__tel {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    color: var(--kleur-tekst-gedempt);
}

/* De balk: dunner dan een knop, dikker dan een lijn. Hij vult zich per stap. */
.stappen__balk {
    height: 6px;
    border-radius: 999px;
    background: var(--kleur-surface-verhoogd);
    overflow: hidden;
}

.stappen__vulling {
    height: 100%;
    width: 20%;
    background: var(--paars-600);
    transition: width 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .stappen__vulling { transition: none; }
}

/* De namen van de stappen. Een genummerde lijst, want dat is het ook. */
.stappen__namen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.stappen__naam {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--kleur-rand);
    border-radius: 999px;
    background: transparent;
    color: var(--kleur-tekst);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Een stap waar je nog niet mag komen is uit, en zegt dat ook zonder kleur:
   de muisaanwijzer verandert niet en de rand blijft weg. */
.stappen__naam[disabled] {
    opacity: 0.55;
    cursor: default;
}

.stappen__naam.is-gedaan {
    border-color: var(--paars-600);
}

.stappen__naam.is-huidig {
    background: var(--paars-600);
    border-color: var(--paars-600);
    color: #fff;
    font-weight: 600;
}

/* Op een telefoon passen vijf namen niet naast elkaar zonder te verschrompelen;
   de tekst en de balk vertellen daar het verhaal. */
@media (max-width: 600px) {
    .stappen__namen { display: none; }
}

.stappen__navigatie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

/* Staat "Vorige" verborgen (stap 1), dan hoort "Volgende" niet links te
   plakken: de knop houdt zijn plek rechts. */
.stappen__navigatie .btn--primary {
    margin-inline-start: auto;
}

/* === Samenvatting op de laatste stap =================================== */

.samenvatting {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    background: var(--kleur-surface-verhoogd);
}

.samenvatting__kop {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.samenvatting__blok + .samenvatting__blok {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kleur-rand);
}

.samenvatting__titel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.3rem;
    font-weight: 600;
}

/* "wijzigen" is een knop en geen link: hij springt binnen de pagina en
   verandert niets aan het adres. Wel de vorm van een link, want dat is wat
   mensen hier verwachten. */
.samenvatting__wijzig {
    border: none;
    background: none;
    padding: 0;
    color: var(--kleur-accent);
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Naam links, waarde rechts; op een smal scherm onder elkaar. */
.samenvatting__lijst {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 0.15rem 1rem;
    margin: 0;
    font-size: 0.95rem;
}

.samenvatting__lijst dt {
    color: var(--kleur-tekst-gedempt);
}

.samenvatting__lijst dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .samenvatting__lijst { grid-template-columns: minmax(0, 1fr); }
    .samenvatting__lijst dd { margin-bottom: 0.4rem; font-weight: 600; }
}

/* === Keuzelijsten in de huisstijl (2026-09-23) ==========================
   Een onbewerkte <select> pakt de opmaak van het besturingssysteem: grijs,
   hoekig, en naast de eigen velden van deze site een vreemde eend. Hij krijgt
   nu dezelfde rand, achtergrond en ronding als de tekstvelden.

   Het pijltje hangt aan een omhulsel en niet aan de select zelf: een <select>
   is een vervangen element en laat geen ::after toe. Het is een gedraaid
   vierkantje met twee randen -- geen achtergrondafbeelding, want dan zou er
   een data-URI in de CSS staan en die hoort niet thuis in een stylesheet die
   onder een strikte CSP draait. */
/* Het omhulsel loopt niet verder dan de keuzelijst zelf: anders zweeft het
   pijltje los aan de rechterkant van de pagina in plaats van in het veld. */
.keuzelijst {
    position: relative;
    display: block;
    width: 100%;
    max-width: 30rem;
}

.aanmeldformulier select,
.keuzelijst select {
    width: 100%;
    padding: 0.5rem 2.2rem 0.5rem 0.6rem;
    border: 1px solid var(--kleur-rand);
    border-radius: 5px;
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font: inherit;
    /* Het eigen pijltje van de browser weg; het onze staat ernaast. */
    appearance: none;
    -webkit-appearance: none;
}

.keuzelijst::after {
    content: "";
    position: absolute;
    inset-inline-end: 0.9rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--paars-600);
    border-bottom: 2px solid var(--paars-600);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* Smalle keuzelijsten (zoals "van wie is dit nummer") hoeven niet de volle
   breedte, maar wel genoeg ruimte voor de langste optie. */
.aanmeldformulier select {
    max-width: 30rem;
}

/* === Annuleren of verplaatsen (contactpagina, 2026-09-23) ===============
   Stond als alinea halverwege de pagina. Dit is echter de handeling waarvoor
   mensen met haast langskomen, en de regels eromheen kosten geld als ze te
   laat gelezen worden -- vandaar een eigen kader, hoog op de pagina. */
.annuleren {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--paars-600);
    border-radius: 10px;
    background: var(--kleur-surface-verhoogd);
}

.annuleren__kop {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
}

.annuleren__hoofd { margin: 0 0 0.6rem; }

/* De twee manieren als lijst: dat is wat iemand zoekt, en een lijst vindt het
   oog sneller dan een zin met twee links erin. */
.annuleren__wegen {
    margin: 0 0 0.75rem;
    padding-inline-start: 1.1rem;
}

.annuleren__wegen li { margin-bottom: 0.2rem; }

.annuleren__let-op { margin: 0 0 0.5rem; }

.annuleren__voet {
    margin: 0;
    font-size: 0.9rem;
    color: var(--kleur-tekst-gedempt);
}