/* Stazio — stylesheet van de site.
   Bron: het design system "Stazio" (tokens.json, bundle.css, merkboek). Alle kleuren, maten en
   radii zijn tokens uit dat systeem; de componentklassen (stz-*) volgen bundle.css.
   Wijzig kleuren nooit hier maar in het design system, en neem ze dan hier over.
   Herzien 29 september 2026: formulier eruit, rekensom en rekenhulp erin, foto's in plaats van lijntekeningen. */

/* ---------- Lettertypen (lokaal, woff2-subsets van de TTF's uit het design system) ---------- */
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/Archivo-Bold.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal; font-display: swap; src: url("assets/fonts/Archivo-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/JetBrainsMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Grafiet (carrosserie) */
  --grafiet-900: #1b1e21; --grafiet-850: #222629; --grafiet-800: #2a2e32; --grafiet-700: #3c4247;
  --grafiet-500: #6e7479; --grafiet-300: #a9aeb3; --grafiet-200: #cfd3d6; --grafiet-100: #e6e8ea;
  /* Oranje (spiegelkappen) */
  --oranje-700: #a63a17; --oranje-600: #c4491f; --oranje-500: #db5a2b; --oranje-400: #f07c4a;
  --oranje-300: #ffb27a; --oranje-100: #fbe8de;
  /* Neutraal en status */
  --beton: #f4f3f1; --wit: #ffffff; --lijn: #dcd9d4;
  --rood-700: #9b1c2e; --rood-300: #f28b8b;
  --groen-700: #186047; --groen-300: #5ec297;

  /* Semantisch — licht (op beton) */
  --grond: var(--beton); --vlak: var(--wit); --vlak-subtiel: var(--grafiet-100);
  --kop: var(--grafiet-900); --tekst: var(--grafiet-700); --gedempt: var(--grafiet-500);
  --rand: var(--lijn); --rand-bedienbaar: var(--grafiet-500); --scheiding: var(--lijn);
  --fout: var(--rood-700);
  --accent-tekst: var(--oranje-700); --kern: var(--oranje-600); --merk: var(--grafiet-900);
  --knop: var(--oranje-600); --knop-hover: var(--oranje-500); --knop-tekst: var(--wit);
  --accentbalk: var(--grafiet-200); --accentbalk-actief: var(--oranje-600);
  --getint: var(--oranje-100); --cijfer-groot: var(--grafiet-900);
  --icoon: var(--oranje-400); --icoon-tegel: var(--grafiet-900); --icoon-tegel-rand: rgba(240,124,74,.25);
  --puntraster: rgba(255,255,255,.075); --gloed-vlak: rgba(240,124,74,.22); --ai-blokje: var(--oranje-600);
  --focus: var(--oranje-700);

  /* Typografie */
  --font-kop: "Archivo", "Arial Black", Arial, sans-serif;
  --font-tekst: "Inter", Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

  /* Ruimte en maten */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --maat-raster-punt: 26px; --maat-streepje-breedte: 22px; --maat-streepje-hoogte: 2px;
  --maat-kopstreep-breedte: 26px; --maat-tegel: 44px; --maat-ai-blokje: 18px; --maat-gloed-doorsnede: 900px;
  --maat-bedienbaar: 44px;
  --radius-knop: 8px; --radius-kaart: 10px; --radius-ui-kaart: 12px; --radius-pill: 20px; --radius-geen: 0px;
  --dikte-rand: 1px; --dikte-icoon: 1.8px; --dikte-accentbalk: 4px;

  /* Schaduw en beweging */
  --gloed-knop: 0 0 28px rgba(240,124,74,.4); --gloed-eyebrow: 0 0 10px rgba(240,124,74,.6);
  --lift-kaart: 0 8px 24px rgba(27,30,33,.08); --geen: none;
  --signaal-interval: 3.2s; --kern-groei: 1.22; --scroll-duur: .6s; --scroll-verspringing: 70ms; --scroll-afstand: 18px; --hover-duur: .18s;

  --pagina-breedte: 1160px; --goot: var(--space-6);
}

/* Semantisch — donker (op grafiet). Elk donker vlak zet data-theme="donker" op zichzelf. */
[data-theme="donker"] {
  --grond: var(--grafiet-900); --vlak: var(--grafiet-800); --vlak-subtiel: var(--grafiet-850);
  --kop: var(--beton); --tekst: var(--beton); --gedempt: var(--grafiet-300);
  --rand: rgba(255,255,255,.12); --rand-bedienbaar: var(--grafiet-300); --scheiding: var(--grafiet-200);
  --fout: var(--rood-300);
  --accent-tekst: var(--oranje-400); --kern: var(--oranje-400); --merk: var(--beton);
  --accentbalk: var(--grafiet-500); --accentbalk-actief: var(--oranje-400);
  --getint: var(--grafiet-800); --cijfer-groot: var(--oranje-300);
  --focus: var(--oranje-400);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--grond); color: var(--tekst);
  font-family: var(--font-tekst); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--accent-tekst); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-kop); color: var(--kop); letter-spacing: -.02em; line-height: 1.12; }
[hidden] { display: none !important; }
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Focus: effen ring van 2 px in `focus`, 2 px van de rand af, om elk bedienbaar element. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.skiplink { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--wit); color: var(--grafiet-900); border-radius: var(--radius-knop); font-weight: 600; text-decoration: none; }
.skiplink:focus { top: var(--space-4); }

/* ---------- Pagina-indeling ---------- */
.binnen { width: 100%; max-width: var(--pagina-breedte); margin: 0 auto; padding-left: var(--goot); padding-right: var(--goot); }
.sectie { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.sectie--wit { background: var(--wit); }
.sectie--beton { background: var(--beton); }
.sectie--getint { background: var(--oranje-100); }
.sectie__kop { margin-bottom: var(--space-7); }
.kolommen-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); align-items: start; }
.kolommen-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.kolommen-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.raster-kenmerken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }
.tekstblok { max-width: 640px; }
.tekstblok p { font-size: 17px; }
.tekstblok .stz-opsomming { margin: var(--space-5) 0; }
.afsluiter { margin-top: var(--space-7); max-width: 720px; }
.afsluiter p { font-size: 17px; color: var(--tekst); }
.afsluiter__slot { margin-top: var(--space-5); font-weight: 600; color: var(--kop); }
/* Label in mono (fictieve gegevens, uitkomst) */
.stz-label { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--gedempt); }

/* Feitenstrip — drie cijfers, elk met een regel tekst en een bronregel. Geen cijfer zonder bron. */
.stz-feitenstrip { margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--dikte-rand) solid var(--scheiding); }
.stz-feitenstrip__feit { margin: 0; }
.stz-feitenstrip__cijfer { margin: 0; font-family: var(--font-kop); font-weight: 800; font-size: 48px; line-height: 1.12; letter-spacing: -.02em; color: var(--cijfer-groot); }
.stz-feitenstrip__tekst { margin: var(--space-2) 0 0; font-size: 16px; line-height: 1.6; color: var(--tekst); }
.stz-feitenstrip__bron { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; line-height: 1.5; color: var(--gedempt); font-style: normal; }
@media (max-width: 960px) { .stz-feitenstrip__cijfer { font-size: 40px; } }
.lees-de-naam { margin-top: var(--space-6); }

@media (max-width: 960px) {
  .kolommen-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kolommen-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --goot: var(--space-4); }
  .sectie { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .kolommen-2, .raster-kenmerken { grid-template-columns: 1fr; gap: var(--space-6); }
  .sectie__kop { margin-bottom: var(--space-6); }
}
@media (max-width: 560px) { .kolommen-4 { grid-template-columns: 1fr; } }

/* ---------- Knop (minimaal 44 px hoog, ook de kleine) ---------- */
.stz-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--maat-bedienbaar); padding: var(--space-3) var(--space-5);
  font-family: var(--font-tekst); font-size: 15px; font-weight: 600; line-height: 1.2;
  border-radius: var(--radius-knop); border: var(--dikte-rand) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--hover-duur), box-shadow var(--hover-duur), border-color var(--hover-duur);
  box-shadow: var(--geen);
}
.stz-knop--primair { background: var(--knop); color: var(--knop-tekst); border-color: var(--knop); }
.stz-knop--primair:hover { background: var(--knop-hover); border-color: var(--knop-hover); }
[data-theme="donker"] .stz-knop--primair:hover { box-shadow: var(--gloed-knop); }
.stz-knop--secundair { background: transparent; color: var(--kop); border-color: var(--rand-bedienbaar); }
.stz-knop--secundair:hover { border-color: var(--kop); }
.stz-knop--klein { padding: var(--space-2) var(--space-4); font-size: 14px; }

/* ---------- Eyebrow en Sectiekop ---------- */
.stz-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2); margin: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--accent-tekst);
}
.stz-eyebrow::before { content: ""; display: block; width: var(--maat-streepje-breedte); height: var(--maat-streepje-hoogte); background: var(--accent-tekst); flex: none; }
[data-theme="donker"] .stz-eyebrow::before { box-shadow: var(--gloed-eyebrow); }

.stz-sectiekop { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; }
.stz-sectiekop__kop { font-weight: 700; }
.stz-sectiekop__kop--h1 { font-size: clamp(33px, 5vw, 57px); font-weight: 800; }
.stz-sectiekop__kop--h2 { font-size: clamp(27px, 3.4vw, 39px); }
.stz-sectiekop__kop--h3 { font-size: 21px; font-weight: 700; }
.stz-sectiekop__intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tekst); }

/* Bronregel (design system: cijfers alleen met bron, in mono en --gedempt). --lang: lange bronregels in gewone letters. */
.stz-bron { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--gedempt); font-style: normal; }
.stz-bron--lang { text-transform: none; letter-spacing: .02em; font-size: 12px; }

/* ---------- Kaart ---------- */
.stz-kaart {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--vlak); color: var(--tekst);
  border: var(--dikte-rand) solid var(--rand); border-radius: var(--radius-kaart);
  padding: var(--space-5); overflow: hidden; box-shadow: var(--geen);
  transition: transform var(--hover-duur), box-shadow var(--hover-duur);
}
.stz-kaart::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--dikte-accentbalk); background: var(--accentbalk); }
.stz-kaart--aanbevolen::before { background: var(--accentbalk-actief); }
.stz-kaart:hover { transform: translateY(-2px); box-shadow: var(--lift-kaart); }
[data-theme="donker"] .stz-kaart:hover { box-shadow: var(--geen); border-color: var(--scheiding); }
.stz-kaart__kop { font-size: 21px; font-weight: 700; }
.stz-kaart__tekst { margin: 0; font-size: 15px; line-height: 1.6; }
.stz-kaart__tekst strong { color: var(--kop); font-weight: 600; }
.stz-kaart__voet { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.stz-kaart__beslis { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; color: var(--accent-tekst); }
.stz-kaart > .stz-tegel { margin-bottom: var(--space-1); }

/* ---------- Pill-tag ---------- */
.stz-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px var(--space-3); border-radius: var(--radius-pill);
  font-family: var(--font-tekst); font-size: 13px; font-weight: 600; line-height: 1.4;
  border: var(--dikte-rand) solid var(--rand-bedienbaar); color: var(--kop); background: transparent;
}
.stz-pill__stip { width: 6px; height: 6px; border-radius: 3px; background: var(--kern); flex: none; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* ---------- Iconentegel en Kenmerk ---------- */
.stz-tegel {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--maat-tegel); height: var(--maat-tegel); flex: none;
  background: var(--icoon-tegel); border-radius: var(--radius-kaart); color: var(--icoon);
}
.stz-tegel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--dikte-rand) solid var(--icoon-tegel-rand); pointer-events: none; }
.stz-tegel svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stz-kenmerk { display: flex; gap: var(--space-4); align-items: flex-start; }
.stz-kenmerk__kop { margin: 0 0 var(--space-1); font-size: 18px; font-weight: 700; }
.stz-kenmerk__tekst { margin: 0; font-size: 15px; line-height: 1.6; }

/* ---------- Donker vlak (technische laag: puntraster + één gloed) ---------- */
.stz-donker { position: relative; isolation: isolate; overflow: hidden; background: var(--grond); color: var(--tekst); }
.stz-donker--850 { background: var(--grafiet-850); }
.stz-donker--800 { background: var(--grafiet-800); }
.stz-donker::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--puntraster) 1px, transparent 1.5px);
  background-size: var(--maat-raster-punt) var(--maat-raster-punt);
}
.stz-donker::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: var(--maat-gloed-doorsnede); height: var(--maat-gloed-doorsnede);
  right: -35%; bottom: -60%;
  background: radial-gradient(circle at center, var(--gloed-vlak) 0%, rgba(240,124,74,0) 60%);
}
.stz-donker--glow-left::after { right: auto; bottom: auto; left: -35%; top: -60%; }
.stz-donker--geen-gloed::after { display: none; }
.stz-donker > * { position: relative; }

/* ---------- UI-kaart als illustratie ---------- */
.stz-uikaart {
  width: 100%; max-width: 380px;
  background: color-mix(in srgb, var(--grafiet-850) 90%, transparent);
  border: var(--dikte-rand) solid rgba(255,255,255,.12);
  border-radius: var(--radius-ui-kaart); padding: var(--space-4) var(--space-5);
  color: var(--beton); font-family: var(--font-tekst);
}
.stz-uikaart__kop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255,255,255,.12); }
.stz-uikaart__nr { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--beton); }
.stz-uikaart__status { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--oranje-400); }
.stz-uikaart__rijen { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; margin: 0; }
.stz-uikaart__rijen dt { font-size: 12px; color: var(--grafiet-300); margin: 0; }
.stz-uikaart__rijen dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--beton); overflow-wrap: anywhere; }
.stz-uikaart__ai { display: flex; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; line-height: 1.5; color: var(--beton); }
.stz-uikaart__ai-blok {
  flex: none; width: var(--maat-ai-blokje); height: var(--maat-ai-blokje); border-radius: 4px;
  background: var(--ai-blokje); color: var(--knop-tekst);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}

/* ---------- Kader ---------- */
.stz-kader { display: flex; flex-direction: column; gap: var(--space-2); background: var(--vlak); border: var(--dikte-rand) solid var(--rand); border-radius: var(--radius-kaart); padding: var(--space-4) var(--space-5); }
.stz-kader--getint { background: var(--getint); border-color: transparent; }
.stz-kader__kop { margin: 0; font-family: var(--font-kop); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--kop); }
.stz-kader__tekst { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst); }
.stz-kader__tekst p + p { margin-top: var(--space-2); }

/* ---------- Slotblok ---------- */
.stz-slot { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.stz-slot__merk { height: 56px; width: auto; flex: none; }
.stz-slot__kop { margin: 0 0 var(--space-2); font-family: var(--font-kop); font-size: clamp(27px, 3.4vw, 39px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--kop); }
.stz-slot__contact { margin: 0; font-size: 15px; line-height: 1.6; color: var(--accent-tekst); }
.stz-slot__contact a { color: inherit; text-decoration: none; }
.stz-slot__contact a:hover { text-decoration: underline; }

/* ---------- Hero: het signaal loopt door het station ---------- */
.hero { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.stz-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-7); }
.stz-hero__tekst { display: flex; flex-direction: column; gap: var(--space-4); max-width: 560px; }
.stz-hero__kop { font-size: clamp(33px, 5vw, 57px); font-weight: 800; }
.stz-hero__kop em { font-style: normal; background: linear-gradient(90deg, var(--oranje-300), var(--oranje-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stz-hero__intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--grafiet-300); }
.stz-hero__acties { display: flex; gap: var(--space-3) var(--space-5); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.stz-hero__link { display: inline-flex; align-items: center; min-height: var(--maat-bedienbaar); font-size: 15px; font-weight: 600; color: var(--beton); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--oranje-400); }
.stz-hero__link:hover { color: var(--oranje-300); }
.stz-hero__regel { margin: 0; font-size: 15px; font-weight: 500; color: var(--beton); }
.stz-hero__positie { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--grafiet-300); }
.stz-hero__merk { justify-self: end; }
.knooppunt-hero { display: block; width: min(62vw, 520px); height: auto; }
.knooppunt-hero #sig-in  { animation: stz-sig-in  var(--signaal-interval) cubic-bezier(.4,0,.2,1) infinite; }
.knooppunt-hero #sig-uit { animation: stz-sig-uit var(--signaal-interval) cubic-bezier(.4,0,.2,1) infinite; }
.knooppunt-hero #kern    { animation: stz-kern var(--signaal-interval) ease-in-out infinite; transform-origin: 360px 150px; }
@keyframes stz-sig-in  { 0% { transform: translateX(0); opacity: 0 } 6% { opacity: 1 } 40% { transform: translateX(289px); opacity: 1 } 44%, 100% { opacity: 0 } }
@keyframes stz-sig-uit { 0%, 52% { transform: translateX(0); opacity: 0 } 56% { opacity: 1 } 90% { transform: translateX(299px); opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes stz-kern    { 0%, 38% { transform: scale(1) } 48% { transform: scale(var(--kern-groei)) } 58%, 100% { transform: scale(1) } }
.hero__foto { margin-top: var(--space-8); }
.hero__video { margin: var(--space-6) 0 0; }
.hero__video video { display: block; width: 100%; max-width: 720px; border-radius: var(--radius-kaart); background: var(--grafiet-850); }
.hero__video-onderschrift { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grafiet-300); }
@media (max-width: 860px) {
  .stz-hero { grid-template-columns: 1fr; gap: var(--space-6); }
  .stz-hero__merk { justify-self: center; }
  .knooppunt-hero { width: min(88vw, 520px); }
  .hero__foto { margin-top: var(--space-6); }
}

/* ---------- Sitekop (header) ---------- */
/* De balk blijft bovenaan staan bij het scrollen, zodat u overal in het verhaal kunt springen. */
.stz-sitekop { position: sticky; top: 0; z-index: 50; background: var(--grond); border-bottom: var(--dikte-rand) solid var(--rand); }
section[id], main[id] { scroll-margin-top: 72px; }
.stz-sitekop__menu { display: none; align-items: center; justify-content: center; width: var(--maat-bedienbaar); height: var(--maat-bedienbaar); flex: none; padding: 0; background: transparent; border: var(--dikte-rand) solid var(--rand-bedienbaar); border-radius: var(--radius-knop); color: var(--kop); cursor: pointer; }
.stz-sitekop__menu svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stz-sitekop__menu-dicht, .stz-sitekop.is-open .stz-sitekop__menu-open { display: none; }
.stz-sitekop.is-open .stz-sitekop__menu-dicht { display: block; }
.stz-sitekop__binnen { display: flex; align-items: center; gap: var(--space-6); max-width: var(--pagina-breedte); margin: 0 auto; padding: var(--space-3) var(--goot); }
.stz-sitekop__merk { display: inline-flex; align-items: center; flex: none; min-height: var(--maat-bedienbaar); text-decoration: none; }
.stz-sitekop__merk img { display: block; height: 22px; width: auto; }
.stz-sitekop__nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-right: auto; }
.stz-sitekop__link { display: inline-flex; align-items: center; min-height: var(--maat-bedienbaar); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--tekst); text-decoration: none; border-bottom: 2px solid transparent; }
.stz-sitekop__link:hover { color: var(--kop); border-bottom-color: var(--rand); }
.stz-sitekop__link--actief, .stz-sitekop__link[aria-current="location"] { color: var(--kop); font-weight: 600; border-bottom-color: var(--accentbalk-actief); }
.stz-sitekop__actie { flex: none; }
/* Mobiel: woordmerk en knop in de balk, de links eronder op één regel die zijwaarts schuift. */
@media (max-width: 720px) {
  .stz-sitekop__binnen { flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .stz-sitekop__nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-4); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .stz-sitekop__nav::-webkit-scrollbar { display: none; }
  .stz-sitekop__link { white-space: nowrap; flex: none; min-height: 40px; }
  .stz-sitekop__actie { margin-left: auto; }
  .stz-sitekop__actie .stz-knop--klein { padding: var(--space-2) var(--space-3); font-size: 13px; }
  /* Met JavaScript: de links achter de menuknop, als lijst onder de balk. */
  .js .stz-sitekop__menu { display: inline-flex; }
  .js .stz-sitekop__nav { display: none; }
  .js .stz-sitekop.is-open .stz-sitekop__nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) 0 var(--space-3); border-top: var(--dikte-rand) solid var(--rand); margin-top: var(--space-2); }
  .js .stz-sitekop.is-open .stz-sitekop__link { min-height: var(--maat-bedienbaar); padding: var(--space-2) 0; border-bottom: 0; font-size: 17px; }
}

/* ---------- Sitevoet (footer) ---------- */
.stz-sitevoet { padding: var(--space-8) var(--goot) var(--space-6); }
.stz-sitevoet__binnen { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(150px, .8fr) minmax(240px, 1.2fr); gap: var(--space-6); max-width: var(--pagina-breedte); margin: 0 auto; }
.stz-sitevoet__merk { display: flex; flex-direction: column; gap: var(--space-3); max-width: 340px; }
.stz-sitevoet__knooppunt { height: 40px; width: auto; align-self: flex-start; }
.stz-sitevoet__belofte { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gedempt); }
.stz-sitevoet__contact { margin: 0; font-size: 15px; line-height: 1.6; color: var(--accent-tekst); }
.stz-sitevoet__contact a { color: inherit; text-decoration: none; }
.stz-sitevoet__contact a:hover { text-decoration: underline; }
.stz-sitevoet__kolomkop { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kop); }
.stz-sitevoet__kolom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.stz-sitevoet__kolom a { font-size: 15px; line-height: 1.5; color: var(--tekst); text-decoration: none; }
.stz-sitevoet__kolom a:hover { color: var(--kop); text-decoration: underline; }
.stz-sitevoet__gegevens { font-style: normal; font-size: 15px; line-height: 1.7; color: var(--tekst); }
.stz-sitevoet__onder { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; max-width: var(--pagina-breedte); margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: var(--dikte-rand) solid var(--scheiding); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--gedempt); }
/* Registergegevens die er nog niet zijn: zichtbaar leeg, met een gestippeld vakje. Nooit invullen met een gok. */
.nog-invullen { display: inline-block; min-width: 6.5em; padding: 0 var(--space-2); border: 1px dashed var(--grafiet-300); border-radius: 3px; color: var(--grafiet-300); text-align: center; }
@media (max-width: 760px) {
  .stz-sitevoet__binnen { grid-template-columns: 1fr; }
  .stz-sitevoet__onder { flex-direction: column; }
}

/* ---------- Veld (alleen nog voor de rekenhulp) ---------- */
.stz-veld { display: flex; flex-direction: column; gap: var(--space-2); }
.stz-veld__label { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--kop); }
.stz-veld__invoer { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); font-family: var(--font-tekst); font-size: 16px; line-height: 1.5; color: var(--kop); background: var(--vlak); border: var(--dikte-rand) solid var(--rand-bedienbaar); border-radius: var(--radius-knop); transition: border-color var(--hover-duur); }
.stz-veld__invoer:hover { border-color: var(--kop); }
.stz-veld__invoer:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.stz-veld__invoer[aria-invalid="true"] { border: 2px solid var(--fout); }
.stz-veld__hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tekst); }
.stz-veld__melding { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--fout); }
.stz-veld__melding:empty { display: none; }
.stz-veld__eenheid { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--gedempt); white-space: nowrap; }

/* ---------- Opsomming ---------- */
.stz-opsomming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: stz-op; }
.stz-opsomming li { position: relative; padding-left: var(--space-6); font-size: 15px; line-height: 1.6; color: var(--tekst); }
.stz-opsomming li::before { content: ""; position: absolute; left: 0; top: .6em; width: var(--maat-streepje-breedte); height: var(--maat-streepje-hoogte); background: var(--accent-tekst); }
.stz-opsomming--genummerd li { padding-left: var(--space-7); }
.stz-opsomming--genummerd li::before { counter-increment: stz-op; content: counter(stz-op, decimal-leading-zero); width: auto; height: auto; top: 0; background: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--accent-tekst); }
.stz-opsomming--groot li { font-size: 17px; }
.stz-opsomming__kop { font-weight: 600; color: var(--kop); }

/* ---------- Tabel ---------- */
.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stz-tabel { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; border: var(--dikte-rand) solid var(--rand); border-radius: var(--radius-kaart); overflow: hidden; background: var(--vlak); }
.stz-tabel th { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--beton); background: var(--grafiet-900); padding: var(--space-3) var(--space-4); }
.stz-tabel td { padding: var(--space-3) var(--space-4); vertical-align: top; font-size: 15px; line-height: 1.5; color: var(--tekst); border-top: var(--dikte-rand) solid var(--scheiding); }
.stz-tabel td:first-child { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-tekst); white-space: nowrap; }
.stz-tabel tbody tr:first-child td { border-top: 0; }
/* Tweekolomstabel met lopende tekst in beide kolommen (wél/níét) */
.stz-tabel--tekst { min-width: 0; }
.stz-tabel--tekst td:first-child { font-family: var(--font-tekst); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tekst); white-space: normal; width: 50%; }

/* ---------- Twee ingangen in de dienstensectie ---------- */
.ingang { margin-top: var(--space-7); }
.ingang + .ingang { margin-top: var(--space-8); padding-top: var(--space-7); border-top: var(--dikte-rand) solid var(--scheiding); }
.ingang__kop { margin-bottom: var(--space-5); }
.ingang__noot { margin-top: var(--space-5); max-width: 760px; font-size: 15px; color: var(--tekst); }
.ingang__noot + .ingang__noot { margin-top: var(--space-3); }
.ingang__noot strong { color: var(--kop); font-weight: 600; }

/* ---------- Foto-kader ---------- */
/* Foto's staan in assets/foto/ (Pexels, bewerkt; zie CREDITS.md). Laadt een foto niet, dan verbergt stazio.js het hele kader
   (.foto--leeg), zodat er nooit een kapot plaatje op de site komt. */
.foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-kaart); background: var(--grafiet-850); isolation: isolate; }
.foto img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.foto--16x10 { aspect-ratio: 16 / 10; }
.foto--21x9 { aspect-ratio: 21 / 9; }
.foto--3x1 { aspect-ratio: 3 / 1.2; }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--4x5 { aspect-ratio: 4 / 5; }
.foto--breed { aspect-ratio: 21 / 8; }
.foto--leeg { display: none; }
.naast-mockup:has(> .foto--leeg) { grid-template-columns: 1fr; }
.foto__bijschrift { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--beton); background: linear-gradient(to top, rgba(27,30,33,.85), rgba(27,30,33,0)); }
.voor-na { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
@media (max-width: 640px) { .voor-na { grid-template-columns: 1fr; } .foto--breed { aspect-ratio: 16 / 10; } .foto--4x5 { aspect-ratio: 4 / 3; } }

/* Portret in "Over Erik" (uitsnede met zachte rand). */
.portret-groot { margin: 0 0 var(--space-5); display: flex; align-items: flex-end; gap: var(--space-4); }
.portret-groot img { width: 200px; height: auto; flex: none; }
.portret-groot figcaption { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--space-4); }
.portret__naam { margin: 0; font-family: var(--font-kop); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--kop); }
.portret__rol { margin: 2px 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); }
.certificaten { margin: var(--space-7) 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gedempt); }

/* ---------- Mockups van de gebouwde systemen ---------- */
/* UI-kaarten als illustratie (design system), in een apparaatkader. Uitsluitend fictieve maar geloofwaardige gegevens.
   Bewegen alleen subtiel en alleen zonder prefers-reduced-motion: een status die omslaat, een balk die vult, een spraakgolf. */
.mock { position: relative; width: 100%; background: var(--grafiet-900); border: var(--dikte-rand) solid rgba(255,255,255,.12); border-radius: 18px; padding: 10px; color: var(--beton); font-family: var(--font-tekst); box-shadow: var(--geen); }
.mock--tablet { max-width: 560px; }
.mock--tablet-breed { max-width: 820px; }
.mock--telefoon { max-width: 300px; border-radius: 26px; padding: 12px; }
.mock--compact { max-width: none; }
.mock__scherm { background: color-mix(in srgb, var(--grafiet-850) 90%, transparent); border: var(--dikte-rand) solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; }
.mock--telefoon .mock__scherm { border-radius: 16px; }
.mock__balk { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(255,255,255,.12); }
.mock__app { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--beton); }
.mock__tijd { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--grafiet-300); white-space: nowrap; }
.mock__inhoud { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.mock__kop { margin: 0; font-family: var(--font-kop); font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--beton); }
.mock__label { margin: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grafiet-300); }
.mock__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mock__rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid rgba(255,255,255,.08); }
.mock__rij:first-child { border-top: 0; }
.mock__nr { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--beton); white-space: nowrap; }
.mock__tekst { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--beton); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__tekst small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--grafiet-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__status { position: relative; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oranje-400); white-space: nowrap; }
.mock__status--ok { color: var(--groen-300); }
.mock__status--rust { color: var(--grafiet-300); }
.mock__stip { width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex: none; }
.mock__wissel { display: inline-grid; }
.mock__wissel > span { grid-area: 1 / 1; }
.mock__wissel > span:last-child { opacity: 0; }
.mock__golf { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.mock__golf i { display: block; width: 2px; height: 6px; border-radius: 1px; background: var(--oranje-400); }
.mock__golf i:nth-child(2) { height: 11px; } .mock__golf i:nth-child(3) { height: 14px; } .mock__golf i:nth-child(4) { height: 9px; }
.mock__balkje { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.mock__balkje i { position: absolute; inset: 0 auto 0 0; width: var(--vul, 60%); border-radius: 3px; background: var(--oranje-400); }
.mock__balkje--ok i { background: var(--groen-300); }
.mock__scores { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; font-size: 12.5px; }
.mock__scores .mock__nr { font-weight: 500; }
.mock__ai { display: flex; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; line-height: 1.5; color: var(--beton); }
.mock__ai .stz-uikaart__ai-blok { margin-top: 2px; }
.mock__stappen { display: flex; flex-direction: column; gap: var(--space-2); }
.mock__stap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; font-size: 12.5px; line-height: 1.4; }
.mock__stap--actief { color: var(--beton); }
.mock__stap--klaar { color: var(--grafiet-300); }
.mock__stapnr { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--oranje-400); padding-top: 2px; }
.mock__stap--klaar .mock__stapnr { color: var(--grafiet-300); }
.mock__beeld { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--grafiet-800); border: 1px dashed rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: var(--grafiet-300); }
.mock__beeld svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mock__talen { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: rgba(255,255,255,.08); }
.mock__talen span { padding: 2px 8px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--grafiet-300); }
.mock__talen span[aria-current] { background: var(--oranje-600); color: var(--knop-tekst); }
.mock__tweekolom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-4); }
.mock__tweekolom .stz-uikaart { max-width: none; padding: var(--space-3) var(--space-4); background: rgba(255,255,255,.04); }
.mock__tweekolom .stz-uikaart__nr { white-space: nowrap; }
@media (max-width: 640px) { .mock__tweekolom { grid-template-columns: 1fr; } }
/* Onderschrift bij een mockup: naam van het systeem en dat de gegevens fictief zijn (JetBrains Mono). */
.mock-blok { display: flex; flex-direction: column; gap: var(--space-3); }
.mock-blok__onderschrift { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--gedempt); }
.mock-blok--midden { align-items: center; }
.mock-blok--midden .mock-blok__onderschrift { text-align: center; }

/* Bewijs: de vier gebouwde systemen naast elkaar (sectie op grafiet 900). */
.bewijs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.bewijs__item { display: flex; flex-direction: column; gap: var(--space-3); }
.bewijs__kop { margin: var(--space-2) 0 0; font-family: var(--font-kop); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--kop); }
.bewijs__tekst { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tekst); }
.bewijs__tekst strong { color: var(--oranje-400); font-weight: 600; }
@media (max-width: 1000px) { .bewijs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bewijs { grid-template-columns: 1fr; } }

/* Subtiele beweging in de mockups — alleen zonder prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .mock__wissel > span:first-child { animation: stz-wissel-uit 12s ease-in-out infinite; }
  .mock__wissel > span:last-child { animation: stz-wissel-in 12s ease-in-out infinite; }
  .mock__golf i { animation: stz-golf 1.6s ease-in-out infinite; transform-origin: center; }
  .mock__golf i:nth-child(2) { animation-delay: .2s; } .mock__golf i:nth-child(3) { animation-delay: .4s; }
  .mock__golf i:nth-child(4) { animation-delay: .1s; } .mock__golf i:nth-child(5) { animation-delay: .3s; }
  .mock__balkje--vult i { animation: stz-vult 10s ease-in-out infinite; }
  .mock__stip--puls { animation: stz-puls 3.2s ease-in-out infinite; }
}
@keyframes stz-wissel-uit { 0%, 30% { opacity: 1 } 38%, 100% { opacity: 0 } }
@keyframes stz-wissel-in  { 0%, 34% { opacity: 0 } 42%, 100% { opacity: 1 } }
@keyframes stz-golf { 0%, 100% { transform: scaleY(.5) } 50% { transform: scaleY(1) } }
@keyframes stz-vult { 0%, 15% { width: 0 } 45%, 100% { width: var(--vul, 60%) } }
@keyframes stz-puls { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* Tweekoloms blokken die een foto of mockup naast tekst zetten. */
.naast-mockup { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.naast-mockup--smal { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.naast-mockup > .stz-kader { align-self: center; }
@media (max-width: 860px) { .naast-mockup, .naast-mockup--smal { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- Rekensom (klantblok 1): grote cijfers in oranje-300 op grafiet-800 ---------- */
.rekensom { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); background: var(--grafiet-800); border: var(--dikte-rand) solid var(--rand); border-radius: var(--radius-kaart); padding: var(--space-6); }
.rekensom__kop { margin: 0; font-family: var(--font-kop); font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--kop); max-width: 720px; }
.rekensom__posten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
.rekensom__post { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--dikte-rand) solid var(--rand); }
.rekensom__naam { margin: 0; font-family: var(--font-kop); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--kop); }
.rekensom__tekst { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst); }
.rekensom__som { margin: 0; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; line-height: 1.5; color: var(--grafiet-300); }
.rekensom__bedrag { margin: 0; font-family: var(--font-kop); font-weight: 800; font-size: 40px; line-height: 1.12; letter-spacing: -.02em; color: var(--oranje-300); }
.rekensom__bedrag span { display: inline-block; margin-left: var(--space-2); font-family: var(--font-tekst); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--grafiet-300); }
.rekensom .stz-bron { margin-top: 0; }
.rekensom__totaal { display: flex; align-items: baseline; gap: var(--space-4) var(--space-6); flex-wrap: wrap; padding-top: var(--space-5); border-top: 2px solid var(--grafiet-200); }
.rekensom__totaal .rekensom__naam { font-size: 21px; }
.rekensom__bedrag--totaal { font-size: clamp(40px, 5vw, 56px); }
.rekensom__noot { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst); max-width: 760px; }
.rekensom__haak { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 600; color: var(--kop); max-width: 760px; }
@media (max-width: 760px) {
  .rekensom { padding: var(--space-5); }
  .rekensom__posten { grid-template-columns: 1fr; }
  .rekensom__bedrag { font-size: 33px; }
}

/* ---------- Rekenhulp (klantblok 2): alleen zichtbaar met JavaScript ---------- */
.rekenhulp { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); background: var(--grafiet-800); border: var(--dikte-rand) solid var(--rand); border-radius: var(--radius-kaart); padding: var(--space-6); }
.rekenhulp__kop { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; }
.rekenhulp__titel { font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; }
.rekenhulp__intro { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst); }
.rekenhulp__velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
.rekenhulp__rij { display: flex; align-items: center; gap: var(--space-3); }
.rekenhulp .stz-veld__invoer { max-width: 180px; background: var(--grafiet-900); color: var(--beton); border-color: var(--grafiet-300); }
.rekenhulp .stz-veld__invoer:hover { border-color: var(--beton); }
.rekenhulp .stz-veld__hint { color: var(--grafiet-300); }
.rekenhulp__uitkomst { display: block; background: var(--grafiet-900); border: var(--dikte-rand) solid var(--rand); border-radius: var(--radius-kaart); padding: var(--space-5); }
.rekenhulp__regels { margin: var(--space-3) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-5); align-items: baseline; }
.rekenhulp__regels dt { font-size: 15px; line-height: 1.5; color: var(--tekst); }
.rekenhulp__regels dt small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--grafiet-300); }
.rekenhulp__regels dd { margin: 0; font-family: var(--font-mono); font-size: 16px; font-weight: 600; text-align: right; white-space: nowrap; color: var(--beton); }
.rekenhulp__regels .rekenhulp__totaal { padding-top: var(--space-3); border-top: var(--dikte-rand) solid var(--rand); }
.rekenhulp__regels dt.rekenhulp__totaal { font-family: var(--font-kop); font-size: 18px; font-weight: 700; color: var(--kop); }
.rekenhulp__regels dd.rekenhulp__totaal { font-family: var(--font-kop); font-size: clamp(27px, 3vw, 33px); font-weight: 800; letter-spacing: -.02em; color: var(--oranje-300); }
.rekenhulp__slot { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tekst); max-width: 760px; }
.oplevert__knop { margin: var(--space-6) 0 0; }
/* Zodra de rekenhulp zichtbaar is (met JavaScript), staat de knop al in de rekenhulp; de losse knop is dan dubbel. */
.js .rekenhulp:not([hidden]) + .oplevert__knop { display: none; }
@media (max-width: 760px) {
  .rekenhulp { padding: var(--space-5); }
  .rekenhulp__velden { grid-template-columns: 1fr; gap: var(--space-5); }
  .rekenhulp__regels { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .rekenhulp__regels dd { text-align: left; margin-bottom: var(--space-2); }
}

/* ---------- Keten over de "na"-foto: de monteur spreekt in, de stappen erachter lopen vanzelf door ---------- */
/* HTML/CSS-illustratie in de stijl van de UI-kaart. Beweegt alleen zonder prefers-reduced-motion; anders staan alle stappen op groen. */
.keten { position: absolute; z-index: 2; top: var(--space-3); right: var(--space-3); width: min(340px, 64%); display: flex; flex-direction: column; gap: var(--space-2); background: rgba(27,30,33,.9); border: var(--dikte-rand) solid rgba(255,255,255,.12); border-radius: var(--radius-ui-kaart); padding: var(--space-3) var(--space-4); color: var(--beton); font-family: var(--font-tekst); }
.keten__spraak { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid rgba(255,255,255,.12); }
.keten__mic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--oranje-600); color: var(--knop-tekst); }
.keten__mic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.keten__zin { font-size: 12px; line-height: 1.4; color: var(--beton); }
.keten__stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.keten__stappen li { --stip: var(--groen-300); position: relative; padding-left: 16px; font-size: 11px; line-height: 1.3; color: var(--beton); }
.keten__stappen li::before { content: ""; position: absolute; left: 0; top: .42em; width: 6px; height: 6px; border-radius: 3px; background: var(--stip); }
/* Stappen waar een mens afvinkt: vierkant vinkvakje in plaats van een stip, kop in oranje. */
.keten__mens::before { width: 8px; height: 8px; border-radius: 2px; left: -1px; top: .35em; }
.keten__mens strong { font-weight: 600; color: var(--oranje-400); }
@media (prefers-reduced-motion: no-preference) {
  .keten__stappen li { animation-duration: 24s; animation-timing-function: linear; animation-iteration-count: infinite; }
  .keten__stappen li:nth-child(1) { animation-name: stz-keten-1; }
  .keten__stappen li:nth-child(2) { animation-name: stz-keten-2; }
  .keten__stappen li:nth-child(3) { animation-name: stz-keten-3; }
  .keten__stappen li:nth-child(4) { animation-name: stz-keten-4; }
  .keten__stappen li:nth-child(5) { animation-name: stz-keten-5; }
  .keten__stappen li:nth-child(6) { animation-name: stz-keten-6; }
  .keten__stappen li:nth-child(7) { animation-name: stz-keten-7; }
  .keten__stappen li:nth-child(8) { animation-name: stz-keten-8; }
  .keten__stappen li:nth-child(9) { animation-name: stz-keten-9; }
  .keten__stappen li:nth-child(10) { animation-name: stz-keten-10; }
}
@keyframes stz-keten-1 { 0%, 3% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 4%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-2 { 0%, 11% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 12%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-3 { 0%, 19% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 20%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-4 { 0%, 27% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 28%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-5 { 0%, 35% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 36%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-6 { 0%, 43% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 44%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-7 { 0%, 51% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 52%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-8 { 0%, 59% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 60%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-9 { 0%, 67% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 68%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@keyframes stz-keten-10 { 0%, 75% { color: var(--grafiet-300); --stip: var(--grafiet-500); } 76%, 90% { color: var(--beton); --stip: var(--groen-300); } 94%, 100% { color: var(--grafiet-300); --stip: var(--grafiet-500); } }
@media (max-width: 860px) {
  .foto--keten { aspect-ratio: auto; }
  .foto--keten picture { display: block; aspect-ratio: 16 / 10; }
  .keten { position: static; width: auto; margin: 0; border-radius: 0; border-width: 1px 0 0; }
  .foto--keten .foto__bijschrift { position: static; background: none; padding-top: var(--space-2); }
}

/* ---------- Contact: drie grote knoppen, geen formulier ---------- */
.contact-knoppen { display: grid; grid-template-columns: 1fr; gap: var(--space-3); max-width: 520px; }
.contact-knop { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; padding: var(--space-4) var(--space-5); background: var(--vlak); color: var(--kop); border: var(--dikte-rand) solid var(--rand-bedienbaar); border-radius: var(--radius-kaart); text-decoration: none; transition: border-color var(--hover-duur), background-color var(--hover-duur); }
.contact-knop:hover { border-color: var(--kop); }
.contact-knop--primair { background: var(--knop); color: var(--knop-tekst); border-color: var(--knop); }
.contact-knop--primair:hover { background: var(--knop-hover); border-color: var(--knop-hover); }
.contact-knop__icoon { display: inline-flex; align-items: center; justify-content: center; width: var(--maat-tegel); height: var(--maat-tegel); flex: none; border-radius: var(--radius-kaart); background: var(--icoon-tegel); color: var(--icoon); }
.contact-knop--primair .contact-knop__icoon { background: rgba(27,30,33,.25); color: var(--knop-tekst); }
.contact-knop__icoon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-knop__label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; opacity: .85; }
.contact-knop__waarde { display: block; font-family: var(--font-kop); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.contact__regel { margin: var(--space-5) 0 0; max-width: 520px; font-size: 15px; color: var(--tekst); }
.contact__regel + .contact__regel { margin-top: var(--space-3); }

/* ---------- Scroll-animatie: 18 px omhoog en infaden, 70 ms verspringing per kolom. Uit bij reduced motion. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .verschijnt { opacity: 0; transform: translateY(var(--scroll-afstand)); transition: opacity var(--scroll-duur) ease-out, transform var(--scroll-duur) ease-out; transition-delay: calc(var(--verspring, 0) * var(--scroll-verspringing)); }
  .js .verschijnt.is-zichtbaar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .knooppunt-hero #sig-in, .knooppunt-hero #sig-uit, .knooppunt-hero #kern { animation: none; }
  .knooppunt-hero #sig-in, .knooppunt-hero #sig-uit { display: none; }
  .stz-knop, .stz-kaart, .stz-veld__invoer, .contact-knop { transition: none; }
  .stz-kaart:hover { transform: none; }
}

/* ---------- Kleine pagina's (privacy) ---------- */
.pagina-klein { min-height: 60vh; }
.pagina-klein .tekstblok { max-width: 720px; }
.pagina-klein h2 { font-size: 21px; font-weight: 700; margin: var(--space-6) 0 var(--space-3); }
.pagina-klein .stz-opsomming { margin: 0 0 var(--space-4); }