/* Rijschool Blinker · demopagina voor zelfstandige instructeurs (TAQQLE, 12 november 2026).
   Eigen stijl, niet die van TAQQLE: diep marineblauw, amber als enig accent (de kleur van een knipperlicht), lichte grond.
   Eén motief: de pijl van het knipperlicht. Hij zit in het woordmerk, de afgesneden hoek van elke foto, de punt in de knop,
   de opsommingstekens, de weg bij "Zo gaat het" en het grote amber vlak in de kop. Geen randjes om blokken: vlakken en ruimte. */

/* ---------- letter: Archivo (OFL), zelf gehost, variabel in breedte en gewicht ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/font/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  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: "Archivo";
  src: url("/assets/font/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Terugval met dezelfde maten, zodat er niets verspringt als de letter later binnenkomt */
@font-face {
  font-family: "Archivo terugval";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 103%;
  ascent-override: 86%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- tokens ---------- */
:root {
  --inkt: #0f1e3d;          /* marineblauw: tekst en de donkere vlakken */
  --inkt-diep: #0a1530;     /* voet */
  --inkt-mid: #1d3160;      /* vlak op marineblauw */
  --amber: #ffa31a;         /* het knipperlicht: enig accent. Marineblauw erop: 8,2:1 */
  --amber-donker: #f08a00;  /* knop bij aanwijzen */
  --grond: #f2f4f7;         /* lichte grond */
  --vlak: #e4e9f1;          /* een stap donkerder dan de grond */
  --wit: #ffffff;
  --zacht: #4b5675;         /* tweede tekstkleur op licht: 6,6:1 */
  --licht-op-inkt: #c9d1e1; /* tweede tekstkleur op marineblauw: 10:1 */
  --rand-veld: #6a748c;     /* rand van invoervelden: 4,7:1 op wit */
  --fout: #b42318;          /* 6,5:1 op wit */
  --goed: #1e6b45;

  --letter: "Archivo", "Archivo terugval", Arial, sans-serif;
  --t-klein: 0.9375rem;                                   /* 15 */
  --t-tekst: 1.0625rem;                                   /* 17 */
  --t-groot: 1.25rem;                                     /* 20 */
  --t-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);      /* 22–28 */
  --t-h2: clamp(2.125rem, 1.35rem + 3.2vw, 3.75rem);      /* 34–60 */
  --t-h1: clamp(2.5rem, 1.1rem + 5.2vw, 5.5rem);          /* 40–88 */

  --goot: clamp(16px, 4vw, 48px);
  --breed: 1280px;
  --blok: clamp(80px, 10vw, 160px);  /* ruimte tussen blokken */
  --snit: clamp(28px, 4vw, 64px);    /* afgesneden hoek van foto's: de pijlpunt */
  --schaduw: 0 24px 60px -24px rgba(10, 21, 48, 0.35), 0 2px 6px rgba(10, 21, 48, 0.06);
  --snel: 160ms;
  --rustig: 420ms;
  --uit: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--letter);
  font-size: var(--t-tekst);
  line-height: 1.55;
  color: var(--inkt);
  background: var(--grond);
  font-kerning: normal;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 800; font-stretch: 112%; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.bedrag, .reken__rijen dd { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }
.waarom :focus-visible, .ruben__paneel :focus-visible, .aanvraag__tekst :focus-visible, .voet :focus-visible, .pakket--vol :focus-visible, .reken__uitkomst :focus-visible { outline-color: var(--amber); }

.binnen { width: min(100% - 2 * var(--goot), var(--breed)); margin-inline: auto; }

.overslaan {
  position: absolute; left: var(--goot); top: 8px; z-index: 10;
  padding: 12px 18px; background: var(--inkt); color: var(--wit); font-weight: 700;
  transform: translateY(-160%);
}
.overslaan:focus { transform: none; outline-color: var(--amber); }

/* ---------- de pijl: woordmerk en teken ---------- */
.merk { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--inkt); }
.merk__teken { width: 30px; height: 21px; fill: var(--amber); flex: none; }
.merk__naam { font-size: 1.625rem; font-weight: 800; font-stretch: 118%; letter-spacing: -0.03em; line-height: 1; }

/* het knipperlicht bij binnenkomst: drie keer, daarna staat het stil */
@media (prefers-reduced-motion: no-preference) {
  .js .merk .pijl { animation: knipper 640ms steps(1, end) 3; }
  .js .merk .pijl--2 { animation-delay: 120ms; }
}
@keyframes knipper { 0% { opacity: 1; } 55% { opacity: 0.18; } }

/* ---------- balk ---------- */
.balk { background: var(--grond); }
.balk__binnen { width: min(100% - 2 * var(--goot), var(--breed)); margin-inline: auto; min-height: 80px; display: flex; align-items: center; gap: 24px; }
.menu { margin-left: auto; display: none; }
.menu ul { list-style: none; display: flex; gap: 4px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 600; text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.balk__actie {
  margin-left: auto; display: inline-block; min-height: 44px; padding: 10px 4px; line-height: 24px;
  color: var(--inkt); font-weight: 700; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 3px; text-underline-offset: 0.3em;
  transition: text-decoration-color var(--snel);
}
.balk__actie:hover { text-decoration-color: var(--inkt); }
.alleen-breed { display: none; }
@media (min-width: 960px) {
  .alleen-breed { display: inline; }
  .menu { display: block; }
  .balk__actie { margin-left: 16px; }
}

/* ---------- knop: amber, met de pijlpunt ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 26px;
  background: var(--amber); color: var(--inkt);
  font: inherit; font-size: 1.125rem; font-weight: 800; font-stretch: 108%; letter-spacing: -0.01em;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color var(--snel), transform var(--snel) var(--uit);
}
.knop::after {
  content: ""; width: 12px; height: 16px; flex: none; background: currentColor;
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
  transition: transform var(--snel) var(--uit);
}
.knop:hover { background: var(--amber-donker); }
.knop:hover::after { transform: translateX(4px); }
.knop:active { transform: translateY(1px); }
.knop[disabled] { cursor: not-allowed; }
.knop[aria-busy="true"] { cursor: progress; }
.knop--vol { width: 100%; }
@media (max-width: 480px) {
  .knop { font-size: 1.0625rem; font-stretch: 100%; padding: 0 18px; gap: 10px; text-align: center; }
}

/* ---------- foto's: afgesneden hoek rechtsboven, de punt van de pijl ---------- */
.snit { width: 100%; height: auto; clip-path: polygon(0 0, calc(100% - var(--snit)) 0, 100% var(--snit), 100% 100%, 0 100%); background: var(--vlak); }

/* ---------- kop ---------- */
.kop { position: relative; overflow: hidden; padding-bottom: var(--blok); }
.kop__binnen { width: min(100% - 2 * var(--goot), var(--breed)); margin-inline: auto; display: grid; gap: 40px; padding-top: clamp(24px, 4vw, 56px); }
.kop__titel { font-size: var(--t-h1); line-height: 0.98; letter-spacing: -0.035em; max-width: 12ch; }
.kop__intro { margin-top: 24px; font-size: var(--t-groot); line-height: 1.5; max-width: 34ch; }
.kop__actie { margin-top: 32px; }
.kop__klein { margin-top: 14px; color: var(--zacht); font-size: var(--t-klein); }
.kop__beeld { position: relative; }
/* het grote amber vlak: een pijl die naar rechts wijst, achter de foto en afgesneden door de rand van het scherm */
.kop__beeld::before {
  content: ""; position: absolute; z-index: 0;
  top: 14%; bottom: -10%; left: 30%; right: calc(-1 * var(--goot) - 40vw);
  background: var(--amber);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--snit) * 2) 100%, 0 calc(100% - var(--snit) * 2));
}
.kop__beeld picture { position: relative; z-index: 1; display: block; width: 82%; }
.kop__beeld .snit { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 960px) {
  .kop__binnen { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: 48px; min-height: min(calc(100svh - 80px), 860px); padding-top: 0; }
  .kop { padding-bottom: clamp(64px, 6vw, 112px); }
  .kop__beeld picture { width: 86%; }
  .kop__beeld::before { top: 12%; bottom: -14%; left: 34%; }
}

/* ---------- waarom: de reden, op marineblauw ---------- */
.waarom { background: var(--inkt); color: var(--wit); padding-block: var(--blok); }
.waarom__binnen { display: grid; gap: 28px; }
.waarom__titel { max-width: 16ch; }
.waarom__tekst { font-size: var(--t-groot); max-width: 40ch; color: var(--licht-op-inkt); }
.waarom__feit { color: var(--amber); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; }
.waarom__beeld { width: min(100% - 2 * var(--goot), var(--breed)); margin: clamp(48px, 6vw, 88px) auto 0; }
.waarom__beeld .snit { aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 960px) {
  .waarom__binnen { grid-template-columns: 7fr 5fr; align-items: end; gap: 64px; }
}

/* ---------- vinken: opsomming met de pijl ---------- */
.vinken { list-style: none; display: grid; gap: 14px; margin-top: 28px; }
.vinken li { position: relative; padding-left: 36px; font-size: var(--t-groot); line-height: 1.4; }
.vinken li::before {
  content: ""; position: absolute; left: 2px; top: 0.3em; width: 14px; height: 18px; background: var(--inkt);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.vinken--licht li::before { background: var(--amber); }

/* ---------- voor wie ---------- */
.voorwie { padding-block: var(--blok); }
.voorwie__binnen { display: grid; gap: 40px; }
.voorwie__tekst > p { margin-top: 18px; font-size: var(--t-groot); color: var(--zacht); max-width: 36ch; }
.voorwie__beeld .snit { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 960px) {
  .voorwie__binnen { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(48px, 6vw, 112px); }
}

/* ---------- wat je krijgt: wit, foto tot de rand ---------- */
.krijgen { background: var(--wit); padding-block: var(--blok); overflow: hidden; }
.krijgen__binnen { display: grid; gap: 48px; }
.krijgen__intro { margin-top: 18px; font-size: var(--t-groot); color: var(--zacht); }
.krijgen__lijst { margin: 36px 0 0; display: grid; gap: 28px; }
.krijgen__lijst dt { font-size: var(--t-groot); font-weight: 700; line-height: 1.3; position: relative; padding-left: 30px; }
.krijgen__lijst dt::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 12px; height: 16px; background: var(--inkt);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.krijgen__lijst dd { margin: 6px 0 0 30px; color: var(--zacht); max-width: 34ch; }
.krijgen__beeld .snit { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 700px) {
  .krijgen__lijst { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}
@media (min-width: 960px) {
  .krijgen__binnen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 64px; }
  .krijgen__lijst { grid-template-columns: 1fr; }
  /* de foto loopt rechts door tot de rand van het scherm */
  .krijgen__beeld { margin-right: calc(-1 * max(var(--goot), (100vw - var(--breed)) / 2)); }
  .krijgen__beeld .snit { aspect-ratio: 4 / 3; }
}

/* ---------- pakketten ---------- */
.pakketten { padding-block: var(--blok); }
.pakketten__kop { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.pakketten__kop p { font-size: var(--t-groot); color: var(--zacht); max-width: 40ch; }
.pakketten__rij { list-style: none; display: grid; gap: 16px; }
.pakket { background: var(--wit); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.pakket__wie { margin-top: 10px; color: var(--zacht); }
.pakket__prijs { margin-top: 28px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pakket__prijs .bedrag { font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.pakket__per { font-weight: 600; }
.pakket__maand { margin-top: 8px; color: var(--zacht); font-size: var(--t-klein); }
.pakket__inhoud { list-style: none; margin-top: 28px; padding-top: 24px; display: grid; gap: 10px; position: relative; }
.pakket__inhoud::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--vlak); }
.pakket__inhoud li { position: relative; padding-left: 24px; }
.pakket__inhoud li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 9px; height: 12px; background: currentColor;
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.pakket--vol { background: var(--inkt); color: var(--wit); }
.pakket--vol .pakket__wie, .pakket--vol .pakket__maand { color: var(--licht-op-inkt); }
.pakket--vol .bedrag { color: var(--amber); }
.pakket--vol .pakket__inhoud::before { background: var(--amber); }
.pakket--vol .pakket__inhoud li::before { background: var(--amber); }
@media (min-width: 960px) {
  .pakketten__kop { grid-template-columns: 7fr 5fr; align-items: end; gap: 64px; }
  .pakketten__rij { grid-template-columns: 1fr 1.18fr 1fr; align-items: stretch; gap: 12px; }
  .pakket--vol { margin-block: -24px; padding-block: calc(clamp(28px, 3vw, 44px) + 24px); }
}

/* ---------- rekenvoorbeeld: het ene amber vlak ---------- */
.reken { background: var(--amber); padding-block: var(--blok); }
.reken__binnen { display: grid; gap: 40px; }
.reken__tekst > p { margin-top: 18px; font-size: var(--t-groot); max-width: 36ch; }
.reken__keuze { margin-top: 36px; display: grid; gap: 28px; max-width: 520px; }
.reken__pakket { margin: 0; padding: 0; border: 0; min-width: 0; }
.reken__pakket legend, .reken__uren label { font-weight: 700; padding: 0; margin-bottom: 10px; display: block; }
.schuif-keuze { display: flex; flex-wrap: wrap; gap: 6px; }
.schuif-keuze label { position: relative; flex: 1 1 auto; }
.schuif-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schuif-keuze span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px;
  background: rgba(255, 255, 255, 0.55); font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background-color var(--snel), color var(--snel);
}
.schuif-keuze span::before { content: ""; width: 0; height: 12px; margin-right: 0; background: var(--amber); clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); transition: width var(--snel), margin var(--snel); }
.schuif-keuze label:hover span { background: rgba(255, 255, 255, 0.85); }
.schuif-keuze input:checked + span { background: var(--inkt); color: var(--wit); }
.schuif-keuze input:checked + span::before { width: 9px; margin-right: 10px; }
.schuif-keuze input:focus-visible + span { outline: 3px solid var(--inkt); outline-offset: 3px; }
.reken__uren output { font-weight: 800; }
.reken__uren input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--inkt); cursor: pointer; background: transparent; }
.reken__schaal { display: flex; justify-content: space-between; font-size: var(--t-klein); font-weight: 600; }

.reken__uitkomst { background: var(--inkt); color: var(--wit); padding: clamp(28px, 4vw, 48px); align-self: start; box-shadow: var(--schaduw); /* taste-skill-ignore: de zachte diepte uit de brief, alleen hier en bij het formulier */ }
.reken__label { display: inline-block; background: var(--amber); color: var(--inkt); font-weight: 800; padding: 4px 12px; margin-bottom: 20px; }
.reken__rijen { margin: 0; }
.reken__rijen > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 12px; }
.reken__rijen dt { color: var(--licht-op-inkt); }
.reken__rijen dd { margin: 0; font-weight: 700; white-space: nowrap; }
.reken__totaal { margin-top: 8px; padding-top: 20px !important; position: relative; }
.reken__totaal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--inkt-mid); }
.reken__totaal dt, .reken__week dt { color: var(--wit); font-weight: 700; }
.reken__totaal dd { font-size: var(--t-h3); color: var(--amber); }
.reken__week dd { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; color: var(--amber); line-height: 1; }
.reken__week { flex-wrap: wrap; }
.reken__noot { margin-top: 20px; font-size: var(--t-klein); color: var(--licht-op-inkt); }
@media (min-width: 960px) {
  .reken__binnen { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 112px); align-items: center; }
}

/* ---------- zo gaat het: de weg ---------- */
.stappen { background: var(--wit); padding-block: var(--blok); }
.stappen__kop { display: grid; gap: 16px; margin-bottom: 48px; }
.stappen__kop p { font-size: var(--t-groot); color: var(--zacht); max-width: 40ch; }
.weg { display: none; }
.stappen__lijst { list-style: none; position: relative; display: grid; gap: 36px; padding-left: 76px; }
/* de weg: asfalt met een witte middenstreep, van boven naar beneden op de telefoon */
.stappen__lijst::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 52px; background-color: var(--inkt);
  background-image: repeating-linear-gradient(to bottom, var(--wit) 0 18px, transparent 18px 36px); /* taste-skill-ignore: middenstreep van de weg, harde stappen */
  background-size: 4px 100%; background-repeat: no-repeat; background-position: center;
}
.stappen__lijst li { position: relative; min-height: 52px; }
.stappen__lijst li::before {
  content: ""; position: absolute; left: -64px; top: 2px; width: 28px; height: 32px; background: var(--amber);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
  transform: rotate(90deg);
}
.stappen__lijst h3 { font-size: var(--t-h3); }
.stappen__lijst p { margin-top: 10px; color: var(--zacht); max-width: 34ch; }
@media (min-width: 960px) {
  .stappen__kop { grid-template-columns: 7fr 5fr; align-items: end; gap: 64px; margin-bottom: 0; }
  .stappen__lijst { grid-template-columns: repeat(4, 1fr); gap: 40px; padding-left: 0; padding-top: 120px; }
  .stappen__lijst::before {
    left: calc(-1 * max(var(--goot), (100vw - var(--breed)) / 2)); right: calc(-1 * max(var(--goot), (100vw - var(--breed)) / 2));
    top: 32px; bottom: auto; width: auto; height: 56px;
    background-image: repeating-linear-gradient(to right, var(--wit) 0 28px, transparent 28px 56px); /* taste-skill-ignore: middenstreep van de weg */
    background-size: 100% 4px;
  }
  .stappen__lijst li::before { left: 0; top: -76px; transform: none; width: 26px; height: 32px; }
}

/* ---------- Ruben ---------- */
.ruben { padding-block: clamp(48px, 6vw, 96px) 0; }
.ruben__paneel {
  width: min(100% - 2 * var(--goot), var(--breed)); margin-inline: auto;
  background: var(--inkt); color: var(--wit); display: grid; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--snit)) 0, 100% var(--snit), 100% 100%, 0 100%);
}
.ruben__beeld .snit { clip-path: none; }
.ruben__beeld .snit { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.ruben__tekst { padding: clamp(28px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.ruben__tekst h2 { font-size: var(--t-h3); color: var(--amber); }
.ruben__citaat { margin: 20px 0 0; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; max-width: 32ch; }
@media (min-width: 760px) {
  .ruben__paneel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ruben__beeld, .ruben__beeld picture { height: 100%; }
  .ruben__beeld .snit { height: 100%; }
}

/* ---------- vragen ---------- */
.vragen { padding-block: var(--blok); }
.vragen__binnen { display: grid; gap: 36px; }
.vragen__kop p { margin-top: 16px; color: var(--zacht); font-size: var(--t-groot); max-width: 28ch; }
.vragen__lijst { display: grid; gap: 8px; }
.vragen details { background: var(--wit); }
.vragen summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 64px; padding: 18px 24px; font-size: var(--t-groot); font-weight: 700; line-height: 1.3;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after {
  content: ""; flex: none; width: 12px; height: 16px; background: var(--inkt);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
  transform: rotate(90deg); transition: transform var(--snel) var(--uit);
}
.vragen details[open] summary::after { transform: rotate(-90deg); background: var(--amber-donker); }
.vragen summary:hover { background: var(--vlak); }
.vragen summary:focus-visible { outline-offset: -3px; }
.vragen details p { padding: 0 24px 24px; max-width: 60ch; color: var(--zacht); }
@media (min-width: 960px) {
  .vragen__binnen { grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
}

/* ---------- aanvraag ---------- */
.aanvraag { background: var(--inkt); color: var(--wit); padding-block: var(--blok); }
.aanvraag__binnen { display: grid; gap: 40px; }
.aanvraag__tekst > p { margin-top: 18px; font-size: var(--t-groot); color: var(--licht-op-inkt); max-width: 34ch; }
.aanvraag__blad { min-width: 0; }
.formulier { background: var(--wit); color: var(--inkt); padding: clamp(22px, 4vw, 48px); box-shadow: var(--schaduw); display: grid; gap: 24px; } /* taste-skill-ignore: zachte diepte uit de brief */
.aanvraag__noot { margin-top: 20px; font-size: var(--t-klein); color: var(--licht-op-inkt); max-width: 60ch; }
.aanvraag__noot a { color: var(--wit); }
@media (min-width: 960px) {
  .aanvraag__binnen { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .aanvraag__tekst h2 { font-size: clamp(2.5rem, 1.2rem + 2.4vw, 3.25rem); }
}

.veld { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.veld__label { font-weight: 700; padding: 0; line-height: 1.3; }
.veld__optie { font-weight: 400; color: var(--zacht); }
.veld__hulp { color: var(--zacht); font-size: var(--t-klein); margin-top: -4px; }
.veld__invoer {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: var(--t-tekst); color: var(--inkt);
  background: var(--wit); border: 2px solid var(--rand-veld); border-radius: 0;
  transition: border-color var(--snel), box-shadow var(--snel);
}
.veld__invoer:hover { border-color: var(--inkt); }
.veld__invoer:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; border-color: var(--inkt); }
.veld__invoer--tekst { min-height: 104px; resize: vertical; }
.veld__invoer[aria-invalid="true"] { border-color: var(--fout); }
.veld__fout { color: var(--fout); font-weight: 600; font-size: var(--t-klein); display: flex; gap: 8px; align-items: baseline; }
.veld__fout::before { content: "!"; flex: none; width: 18px; height: 18px; display: inline-grid; place-items: center; background: var(--fout); color: var(--wit); font-size: 0.75rem; font-weight: 800; border-radius: 50%; transform: translateY(2px); }
.veld__fout[hidden] { display: none; }
.keuzes { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.keuzes--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.keuze {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; cursor: pointer;
  border: 2px solid var(--rand-veld); font-weight: 600; line-height: 1.2;
  transition: background-color var(--snel), border-color var(--snel);
}
.keuze input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--inkt); }
.keuze:hover { border-color: var(--inkt); }
.keuze:has(input:checked) { background: var(--vlak); border-color: var(--inkt); }
.keuze:has(input:focus-visible) { outline: 3px solid var(--inkt); outline-offset: 2px; }
.keuze input:focus-visible { outline: none; }
.veld--keuze[aria-invalid="true"] .keuze, .keuzes[data-fout] .keuze { border-color: var(--fout); }
@media (max-width: 359px) {
  .keuzes { grid-template-columns: 1fr; }
}
.formulier__fout { background: #fdecea; color: var(--fout); padding: 16px 18px; font-weight: 600; }
.formulier__fout ul { margin-top: 8px; padding-left: 20px; font-weight: 400; }
.formulier__fout a { color: var(--fout); }
.formulier__fout[data-soort="info"] { background: var(--vlak); color: var(--inkt); }
.formulier__fout:focus { outline: 3px solid var(--fout); outline-offset: 2px; }
.formulier__geenjs { color: var(--fout); font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- voet ---------- */
.voet { background: var(--inkt-diep); color: var(--wit); padding-block: clamp(64px, 8vw, 120px) 40px; }
.voet__merk { display: flex; align-items: center; gap: 0.18em; font-size: min(17vw, 15rem); font-weight: 800; font-stretch: 118%; letter-spacing: -0.045em; line-height: 0.85; margin: 0; }
.voet__teken { width: 0.62em; height: 0.44em; fill: var(--amber); flex: none; }
.voet__rij { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 28px; }
.voet__plek { color: var(--licht-op-inkt); }
.voet__plek strong { color: var(--wit); }
.voet__links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.voet__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px 0 0; font-weight: 600; text-decoration: none; }
.voet__links a:hover { text-decoration: underline; }
.voet__regel { margin-top: 40px; padding-top: 28px; font-size: var(--t-klein); color: var(--licht-op-inkt); position: relative; }
.voet__regel::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--amber); }
.voet__regel a { color: var(--wit); }
@media (min-width: 960px) {
  .voet__rij { grid-template-columns: 1fr auto; align-items: center; }
}

/* alleen voor schermlezers */
.sr { /* taste-skill-ignore: alleen voor schermlezers */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- enkele losse pagina's ---------- */
.los { min-height: calc(100svh - 80px); display: grid; align-content: center; padding-block: var(--blok); }
.los h1 { font-size: var(--t-h2); max-width: 16ch; }
.los p { margin-top: 20px; font-size: var(--t-groot); max-width: 40ch; }
.los .knop { margin-top: 32px; }
.los__noot { color: var(--zacht); font-size: var(--t-klein) !important; }

/* ---------- beweging bij binnenkomen: alleen met JavaScript en zonder voorkeur voor minder beweging ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .kop__tekst > * { animation: op var(--rustig) var(--uit) both; }
  .js .kop__tekst > :nth-child(2) { animation-delay: 70ms; }
  .js .kop__tekst > :nth-child(3) { animation-delay: 140ms; }
  .js .kop__tekst > :nth-child(4) { animation-delay: 210ms; }
  .js .kop__beeld::before { animation: schuif 640ms var(--uit) 80ms both; }
  .js .kop__beeld picture { animation: op 520ms var(--uit) 160ms both; }
  .js [data-in] { opacity: 0; transform: translateY(24px); transition: opacity var(--rustig) var(--uit), transform var(--rustig) var(--uit); transition-delay: var(--wacht, 0ms); }
  .js [data-in].is-in { opacity: 1; transform: none; }
}
@keyframes op { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes schuif { from { transform: translateX(40%); } to { transform: none; } }