/* Ludendo, website "Eén schooldag".
   Eén stylesheet voor index.html, privacy.html en 404.html. Niets van buiten: systeemletter, geen afbeeldingen.
   Volgorde: tokens · basis · kop · held · toestellen en schermen · dagbalk · momenten · speel-mechaniek ·
   per moment · na de dag · oude klassen (privacy/404) · breekpunten · minder beweging. */

/* ============================================================ tokens */
:root {
  --papier: #faf8f5; --vlak: #ffffff; --zand: #f3efe9;
  --inkt: #0e1424; --grijs: #565e6c; --lijn: #e6e1d9;
  --accent: #1d4ed8; --accent-tekst: #1d4ed8; --accent-zacht: #e8eefc; --op-accent: #ffffff;
  --rood: #b42318; --rood-zacht: #fdecea; --oranje: #a74d08;
  --stip: #1d4ed8; --toestel: #1b2130; --focus: #1d4ed8;
  --draad: var(--accent); /* draadteken, baan en ring: in donker de lichtere accenttekst */

  --breed: 1200px; --gutter: clamp(16px, 4vw, 40px);
  --sectie: clamp(88px, 10vw, 136px);
  --kop-h: 64px; --balk-h: 52px;

  --schaduw-kaart: 0 1px 2px rgba(14,20,36,.05), 0 12px 32px -8px rgba(14,20,36,.12);
  --schaduw-toestel: 0 2px 4px rgba(14,20,36,.04), 0 30px 70px -16px rgba(14,20,36,.22), 0 70px 140px -50px rgba(14,20,36,.25);

  --zacht: cubic-bezier(.22, .61, .36, 1);
  --veer: cubic-bezier(.34, 1.36, .64, 1);
  --stroom: cubic-bezier(.65, 0, .35, 1);
  --t-kort: 240ms; --t: 480ms; --t-lang: 720ms; --t-sfeer: 1200ms;

  /* Kleuren binnen de nagebouwde schermen: de productstijl, los van de site */
  --s-grond: #f3f4f6; --s-paneel: #ffffff; --s-tekst: #0f172a; --s-grijs: #556070; --s-lijn: #e5e7eb;
  --s-label: #eef0f3; --s-accent: #1d4ed8; --s-accent-tekst: #1d4ed8; --s-accent-zacht: #e8eefc;
  --s-zand: #f3efe9; --s-rood: #b42318; --s-rood-zacht: #fdecea; --s-oranje: #a74d08;
  --s-donker: #0f172a; --s-op-donker: #ffffff; --s-schaduw: 0 1px 2px rgba(15,23,42,.05), 0 6px 18px -8px rgba(15,23,42,.12);

  --voet-a: #d6d9df; --voet-b: #b9bec7;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0b0f1a; --vlak: #141b2b; --zand: #111725;
    --inkt: #eef1f6; --grijs: #a3acbb; --lijn: #252e42;
    --accent-tekst: #7aa2ff; --accent-zacht: #1a2650;
    --rood: #ff8a80; --rood-zacht: #3a1513; --oranje: #f2a65a;
    --stip: #7aa2ff; --toestel: #05070c; --focus: #7aa2ff;
    --draad: var(--accent-tekst);
    --schaduw-kaart: 0 1px 2px rgba(0,0,0,.25), 0 12px 32px -8px rgba(0,0,0,.45);
    --schaduw-toestel: 0 2px 4px rgba(0,0,0,.08), 0 30px 70px -16px rgba(0,0,0,.44), 0 70px 140px -50px rgba(0,0,0,.5);
    --s-grond: #0f141d; --s-paneel: #1a2234; --s-tekst: #eef1f6; --s-grijs: #a3acbb; --s-lijn: #2a3347;
    --s-label: #252f45; --s-accent-tekst: #7aa2ff; --s-accent-zacht: #1a2650;
    --s-zand: #222a3b; --s-rood: #ff8a80; --s-rood-zacht: #3a1513; --s-oranje: #f2a65a;
    --s-donker: #eef1f6; --s-op-donker: #0f141d; --s-schaduw: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -8px rgba(0,0,0,.5);
    --voet-a: #2a3142; --voet-b: #1b2130;
  }
}

/* ============================================================ basis */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip; /* vangnet tegen horizontaal scrollen; 'clip' en niet 'hidden', want dat breekt sticky */
  scroll-padding-top: 132px; /* kop 64 + dagbalk 52 + 16: ankers en focus nooit onder de sticky lagen */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; overflow-x: clip;
  background: var(--papier); color: var(--inkt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-tekst); text-underline-offset: .18em; }
ul, ol { margin: 0; padding: 0; }
svg { display: block; }
time, .tijdstempel, .klok { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.zacht { color: var(--grijs); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--breed)); margin-inline: auto; }
[hidden] { display: none !important; }
/* Volgorde voor vertragingen en plaatsen: klassen in plaats van style="--i:N", zodat de CSP geen inline stijl hoeft toe te staan */
.i0 { --i: 0; } .i1 { --i: 1; } .i2 { --i: 2; } .i3 { --i: 3; } .i4 { --i: 4; }
.i5 { --i: 5; } .i6 { --i: 6; } .i7 { --i: 7; } .i8 { --i: 8; } .i9 { --i: 9; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--accent); color: var(--op-accent); padding: 10px 18px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ============================================================ daglicht */
/* site.js zet --dag (0 = 07:45, 1 = 16:00), --avond (0..1, bij 20:15) en --na (0..1, na de avond) alleen hier,
   zodat de browser niet bij elke scrollstap de stijl van het hele document opnieuw berekent. */
.daglicht { --dag: 0; --avond: 0; --na: 0; --dag-uit: calc((1 - var(--avond)) * (1 - var(--na))); position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.daglicht span { position: absolute; inset: 0; }
.daglicht span:nth-child(1) { background: radial-gradient(60% 50% at 20% 0%, rgba(191,211,255,.70), transparent 70%); opacity: max(calc(clamp(0, 1 - var(--dag) * 2.2, 1) * var(--dag-uit)), calc(var(--na) * .22)); }
.daglicht span:nth-child(2) { background: radial-gradient(45% 40% at 85% 5%, rgba(255,226,196,.55), transparent 70%); opacity: calc(clamp(0, 1 - max(var(--dag) - .25, .25 - var(--dag)) * 4, 1) * var(--dag-uit)); }
.daglicht span:nth-child(3) { background: radial-gradient(70% 55% at 50% 0%, rgba(255,244,228,.70), transparent 72%); opacity: calc(clamp(0, 1 - max(var(--dag) - .55, .55 - var(--dag)) * 3.5, 1) * var(--dag-uit)); }
.daglicht span:nth-child(4) { background: radial-gradient(65% 55% at 90% 10%, rgba(255,196,140,.35), transparent 70%); opacity: calc(clamp(0, (var(--dag) - .6) * 2.5, 1) * var(--dag-uit)); }
.daglicht span:nth-child(5) { background: radial-gradient(70% 50% at 50% 0%, rgba(150,160,215,.30), transparent 70%); opacity: calc(var(--avond) * (1 - var(--na))); }
@media (prefers-color-scheme: dark) {
  .daglicht span:nth-child(1) { background: radial-gradient(60% 50% at 20% 0%, rgba(70,100,200,.40), transparent 70%); }
  .daglicht span:nth-child(2) { background: radial-gradient(45% 40% at 85% 5%, rgba(90,110,200,.16), transparent 70%); }
  .daglicht span:nth-child(3) { background: radial-gradient(70% 55% at 50% 0%, rgba(90,110,160,.26), transparent 72%); }
  .daglicht span:nth-child(4) { background: radial-gradient(65% 55% at 90% 10%, rgba(29,78,216,.16), transparent 70%); }
  .daglicht span:nth-child(5) { background: radial-gradient(70% 50% at 50% 0%, rgba(80,90,170,.32), transparent 70%); }
}

/* ============================================================ knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform 120ms var(--zacht);
}
.knop:active { transform: scale(.98); }
.knop-hoofd { background: var(--accent); color: var(--op-accent); }
.knop-hoofd:hover { filter: brightness(1.08); }
.knop-rustig { background: var(--vlak); color: var(--inkt); border-color: var(--lijn); }
.knop-rustig:hover { border-color: color-mix(in srgb, var(--inkt) 25%, var(--lijn)); }
.knop-klein { height: 40px; padding: 0 18px; font-size: 15px; }
.knop-pijl svg { width: 16px; height: 16px; transition: transform var(--t-kort) var(--zacht); }
.knop-pijl:hover svg { transform: translateY(3px); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================ kop */
.kop {
  position: sticky; top: 0; z-index: 50; height: var(--kop-h);
  /* Bijna dekkend: met 92% bleven de rand van de heldtelefoon en grote koppen als vorm door het glas te zien */
  background: color-mix(in srgb, var(--papier) 98%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .kop, .dagbalk { background: var(--papier); } }
/* De onderrand: zonder JS altijd, met JS pas na 8 px scrollen (site.js zet .kop--los) */
.kop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lijn); transition: opacity var(--t-kort) linear; }
html.js .kop:not(.kop--los)::after { opacity: 0; }
.kop .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.merk { display: inline-flex; align-items: center; gap: 10px; color: var(--inkt); text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; min-height: 44px; }
.merk svg { width: 28px; height: 28px; flex: none; }
.kop nav ul { list-style: none; display: flex; align-items: center; gap: 4px; }
.kop nav li > a:not(.knop):not(.taal) {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--inkt); text-decoration: none; font-size: 15px; font-weight: 600;
}
.kop nav li > a:not(.knop):not(.taal)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-kort) var(--zacht);
}
.kop nav li > a[aria-current="true"]::after { transform: scaleX(1); }
.kop nav li > a:not(.knop):not(.taal):hover { color: var(--accent-tekst); }
.kop nav li:last-child { margin-left: 8px; }
/* Taalschakelaar: een rustige pil; het raakvlak is 44 px hoog, ook al ziet de pil er kleiner uit */
.kop nav a.taal { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; margin-left: 4px; color: var(--grijs); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-decoration: none; transition: color var(--t-kort) var(--zacht); }
/* de pil is 28 px hoog, het raakvlak (de link zelf) 44 bij 44 */
.kop nav a.taal::before { content: ""; position: absolute; inset: 8px 0; border: 1px solid var(--lijn); border-radius: 999px; transition: border-color var(--t-kort) var(--zacht); }
.kop nav a.taal:hover { color: var(--inkt); }
.kop nav a.taal:hover::before { border-color: color-mix(in srgb, var(--inkt) 30%, var(--lijn)); }
.alleen-breed { display: none; }
@media (min-width: 960px) { .alleen-breed { display: list-item; } }

/* ============================================================ typografie */
.display, .held h1 { font-size: clamp(44px, 6.4vw + 12px, 96px); line-height: 1.02; letter-spacing: -0.035em; }
.moment h2, .sectie h2, .avond h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -0.03em; }
.sectie h2.display, .bel h2.display { font-size: clamp(44px, 5vw + 12px, 88px); line-height: 1.03; letter-spacing: -0.035em; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.tijdstempel, .eyebrow { font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; }
.tijdstempel { color: var(--grijs); }
.eyebrow { color: var(--accent-tekst); margin-bottom: 16px; }
.intro, .moment-intro { font-size: clamp(17px, 0.6vw + 14px, 20px); line-height: 1.55; color: var(--grijs); max-width: 34em; }
.sectie-noot, .figuur-noot { font-size: 15px; line-height: 1.5; color: var(--grijs); }

/* ============================================================ held */
.held { padding-top: clamp(32px, 4.2vw, 60px); text-align: center; }
.held-tekst { display: flex; flex-direction: column; align-items: center; }
.statuspil {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 100%; padding: 4px 14px;
  border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn);
  font-size: 13px; font-weight: 600; line-height: 1.35; text-wrap: balance;
}
.statuspil .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.held-boven { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.statuspil { white-space: nowrap; }
.tekst-kort { display: none; }
@media (max-width: 559px) { .tekst-lang { display: none; } .tekst-kort { display: inline; } }
.held h1 { margin-top: 20px; max-width: 18ch; font-size: clamp(44px, 5vw + 12px, 84px); }
.h-regel { display: inline-block; }
.held-intro { max-width: 40em; margin-top: 20px; }
.held-knoppen { justify-content: center; margin-top: 32px; }
.held-noot { margin-top: 16px; font-size: 15px; color: var(--grijs); }
.held-beeld { margin: 44px auto 0; max-width: 1100px; }
.held-compositie { display: grid; grid-template: 1fr / 1fr; align-items: end; padding-bottom: 6%; }
.held-laptop, .held-telefoon { grid-area: 1 / 1; }
.held-laptop .toestel--laptop { max-width: 880px; width: 79%; margin: 0; }
.held-telefoon { justify-self: end; align-self: end; width: 25%; margin-bottom: -6%; position: relative; z-index: 2; }
.held-telefoon .toestel--telefoon { width: 100%; }
.s-extra { gap: .25em; }
/* Kleine telefoon (smal scherm): de tekst blijft minstens 10 px, dus er past minder op. Dan valt de extra kaart van
   08:20 weg en heeft de tabbalk vier tabs in plaats van vijf; liever dat dan afgesneden tekst. */
@container (max-width: 300px) {
  .toneel--0820 .s-extra { display: none; }
  .s-tabbalk span:nth-child(3):nth-last-child(3):not(.is-actief) { display: none; }
}
.held-beeld figcaption { margin: 0; }
@media (max-width: 719px) {
  .held-laptop { display: none; }
  .held-compositie { padding-bottom: 0; }
  .held-telefoon { justify-self: center; width: min(300px, 100%); margin: 0; }
  .held-beeld { margin-top: 32px; }
}

/* Openingschoreografie: eenmalig, alleen met beweging. site.js zet .held--start op de volgende frame. */
html.beweeg .held .h-in, html.beweeg .held .h-regel, html.beweeg .held .h-toestel, html.beweeg .held .h-rij {
  transition-property: opacity, transform, clip-path; transition-timing-function: var(--zacht);
  transition-duration: 600ms; transition-delay: var(--hw, 0ms);
}
html.beweeg .held-intro { --hw: 0ms; transition-duration: 480ms; }
html.beweeg .held-knoppen .knop-hoofd { --hw: 380ms; }
html.beweeg .held-knoppen .knop-rustig { --hw: 440ms; }
html.beweeg .held-noot { --hw: 500ms; }
html.beweeg .held .h-regel { transition-duration: 600ms; --hw: 0ms; }
html.beweeg .held .h-regel.zacht { --hw: 60ms; }
html.beweeg .held .held-laptop .h-toestel { transition-duration: 1200ms; --hw: 400ms; }
html.beweeg .held .held-telefoon .h-toestel { transition-duration: 1200ms; --hw: 660ms; }
html.beweeg .held .s-dagkaart.h-rij { transition-duration: 480ms; --hw: calc(1300ms + var(--i, 0) * 60ms); }
html.beweeg .held .s-lijst .h-rij, html.beweeg .held .s-extra.h-rij { transition-duration: 480ms; --hw: calc(1500ms + var(--i, 0) * 60ms); }
html.beweeg .held:not(.held--start) .h-in { opacity: 0; transform: translateY(12px); }
/* geen opacity 0 op de kop: dan telt hij meteen als grootste zichtbare element (snelle LCP) */
html.beweeg .held:not(.held--start) .h-regel { transform: translateY(28px); clip-path: inset(0 0 40% 0); }
html.beweeg .held:not(.held--start) .held-laptop .h-toestel { opacity: 0; transform: translateY(48px) scale(.97); }
html.beweeg .held:not(.held--start) .held-telefoon .h-toestel { opacity: 0; transform: translateY(80px); }
html.beweeg .held:not(.held--start) .h-rij { opacity: 0; transform: translateY(.6em); }
.held .h-regel { clip-path: inset(-10% -5% -20% -5%); }
/* Lichte diepte bij scrollen: alleen met scroll-tijdlijnen, zonder JS. 'translate' botst niet met 'transform'. */
@supports (animation-timeline: scroll()) {
  html.beweeg .held-telefoon { animation: diepte-tel linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  html.beweeg .held-laptop { animation: diepte-lap linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
}
@keyframes diepte-tel { to { translate: 0 -60px; } }
@keyframes diepte-lap { to { translate: 0 -20px; } }

/* ============================================================ toestellen */
.toestel { position: relative; max-width: 100%; }
.toestel-rand { position: relative; background: var(--toestel); padding: 10px; container-type: inline-size; box-shadow: var(--schaduw-toestel); }
@media (prefers-color-scheme: dark) { .toestel-rand { box-shadow: inset 0 0 0 1px #2a3142, var(--schaduw-toestel); } }
.toestel--laptop { width: 100%; max-width: 760px; margin-inline: auto; }
.toestel--laptop .toestel-rand { border-radius: 22px; }
.toestel-voet {
  position: relative; width: 106%; margin-left: -3%; height: 14px; border-radius: 0 0 14px 14px;
  background: linear-gradient(var(--voet-a), var(--voet-b));
}
.toestel-voet::after { content: ""; position: absolute; left: 41%; width: 18%; top: 0; height: 6px; border-radius: 0 0 8px 8px; background: color-mix(in srgb, var(--voet-b) 70%, #000); opacity: .5; }
.toestel--telefoon { width: clamp(260px, 26vw, 340px); margin-inline: auto; }
.toestel--telefoon .toestel-rand { border-radius: 46px; }
.toestel--telefoon .toestel-rand::before { content: ""; position: absolute; z-index: 9; top: 20px; left: 35%; width: 30%; height: 22px; border-radius: 999px; background: var(--toestel); }

/* ============================================================ schermen (productstijl, alles in em) */
.scherm {
  position: relative; overflow: hidden; background: var(--s-grond); color: var(--s-tekst);
  line-height: 1.35; text-align: left; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.scherm p { margin: 0; text-wrap: wrap; }
.scherm--laptop { aspect-ratio: 16 / 10; border-radius: 12px; font-size: calc(100cqi / 60); padding: 1.5em; display: flex; flex-direction: column; gap: 1.125em; }
.scherm--telefoon { aspect-ratio: 390 / 810; border-radius: 36px; font-size: max(10.5px, calc(100cqi / 24.375)); padding: 3.6em 1.125em 5.5em; display: flex; flex-direction: column; gap: .875em; }
@supports not (width: 1cqi) { .scherm--laptop { font-size: 11px; } .scherm--telefoon { font-size: 13px; } }
.scherm--los { font-size: 14px; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--lijn); box-shadow: var(--schaduw-kaart); }

.s-balk { display: flex; align-items: center; gap: 1em; justify-content: space-between; }
.s-merk { display: flex; align-items: center; gap: .625em; min-width: 0; }
.s-merk > span:last-child { display: flex; flex-direction: column; }
.s-merk b { font-size: 1em; letter-spacing: -.01em; }
.s-merk small { font-size: .8125em; color: var(--s-grijs); }
.s-teken { width: 2em; height: 2em; border-radius: .55em; background: #1d4ed8; flex: none; position: relative; }
.s-teken::before { content: ""; position: absolute; left: 31%; top: 25%; width: 37%; height: 48%; border-left: .22em solid #fff; border-bottom: .22em solid #fff; border-bottom-left-radius: .12em; }
.s-teken::after { content: ""; position: absolute; left: 51%; top: 26%; width: 23%; height: 23%; background: #fff; border-radius: .12em; }
.s-menu { display: flex; gap: .25em; padding: .25em; border-radius: 999px; background: var(--s-paneel); box-shadow: var(--s-schaduw); }
.s-menu span { padding: .5em 1em; border-radius: 999px; font-size: .875em; font-weight: 600; color: var(--s-grijs); white-space: nowrap; }
.s-menu .is-actief { background: var(--s-donker); color: var(--s-op-donker); }
.s-avatar { width: 2.25em; height: 2.25em; border-radius: 50%; display: grid; place-items: center; background: #f0d9c4; color: #5a3a1c; font-size: .875em; font-weight: 700; flex: none; }
.s-paneel { background: var(--s-paneel); border-radius: 1.375em; padding: 1.25em 1.375em; box-shadow: var(--s-schaduw); display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.s-kop { font-size: 1.0625em; font-weight: 700; letter-spacing: -.01em; }
.s-titel { font-size: 2.5em; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.s-meta { color: var(--s-grijs); font-size: .9375em; }
.s-klein { color: var(--s-grijs); font-size: .8125em; }
.s-nu { display: flex; align-items: center; gap: .5em; color: var(--s-accent-tekst); font-weight: 600; font-size: .9375em; }
.s-nu::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--s-accent-tekst); flex: none; }
.s-labels { display: flex; flex-wrap: wrap; gap: .4em; }
.s-label { display: inline-block; background: var(--s-label); color: var(--s-tekst); border-radius: .5em; padding: .3em .65em; font-size: .8125em; font-weight: 600; white-space: nowrap; }
.s-knoppen { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }
.s-knoppen--stapel { flex-direction: column; align-items: stretch; }
.s-knop { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: 2.75em; padding: 0 1.25em; border-radius: 999px; background: var(--s-paneel); border: 1px solid var(--s-lijn); font-size: .9375em; font-weight: 600; white-space: nowrap; }
.s-knop--hoofd { background: var(--s-accent); color: #fff; border-color: transparent; }
.s-knop--klein { height: 2.25em; padding: 0 .9em; font-size: .8125em; }
.s-knop--vol { width: 100%; }
.s-speel { width: .8em; height: .8em; }
.vs { display: inline-block; width: .5em; height: .5em; border-radius: 50%; margin-right: .45em; flex: none; vertical-align: .1em; }
.v-wi { background: #7c83d9; } .v-sk { background: #2b9fd0; } .v-en { background: #d0568f; }
.v-gs { background: #9a6a2f; } .v-ne { background: #d9952b; } .v-na { background: #3fa37a; }
.s-nieuw { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--s-accent-tekst); margin-right: .4em; flex: none; vertical-align: .1em; }
.rood { color: var(--s-rood); }
.oranje { color: var(--s-oranje); }
.s-eerlijk, .s-schoolregel { font-size: .8125em; color: var(--s-grijs); }
.s-schoolregel b { color: var(--s-tekst); }

/* Held-laptop */
.s-grid { display: grid; gap: 1.125em; min-height: 0; }
.s-grid--held { grid-template-columns: minmax(0, 1fr) 19em; grid-template-areas: "groot wacht" "dag dag"; flex: 1; align-content: start; }
.s-grid--held .s-groot { grid-area: groot; gap: .75em; padding: 1.5em 1.75em; }
.s-grid--held .s-wacht { grid-area: wacht; }
.s-grid--held .s-dag { grid-area: dag; }
.s-groot .s-titel { margin-top: .1em; }
.s-groot .s-knoppen { margin-top: .5em; }
.s-taak { display: flex; align-items: center; gap: .75em; justify-content: space-between; padding: .75em 0; border-top: 1px solid var(--s-lijn); }
.s-taak b { display: block; font-size: .9375em; }
.s-taak small { color: var(--s-grijs); font-size: .8125em; }
.s-dag { display: flex; flex-direction: column; gap: .6em; }
.s-dagkaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75em; }
.s-dagkaart { background: var(--s-paneel); border-radius: .875em; padding: .8em 1em; display: flex; flex-direction: column; gap: .1em; box-shadow: var(--s-schaduw); }
.s-dagkaart b { font-size: .8125em; color: var(--s-accent-tekst); }
.s-dagkaart span { font-weight: 700; font-size: .9375em; }
.s-dagkaart small { color: var(--s-grijs); font-size: .8125em; }
.s-dagkaart.is-nu { box-shadow: inset 0 0 0 1px var(--s-accent), var(--s-schaduw); }
.s-dagkaart.is-geweest { opacity: .6; }
.s-view--vandaag { display: flex; flex-direction: column; gap: 1.125em; }
.s-label--nu { background: var(--s-accent-zacht); color: var(--s-accent-tekst); }

/* Telefoon */
.s-telkop { display: flex; flex-direction: column; gap: .1em; position: relative; }
.s-telkop small { color: var(--s-grijs); font-size: max(10px, .8125em); }
/* 07:45: het scherm van de ouder; het kind staat als keuze onder de groet */
.s-kind { display: flex; align-items: center; gap: .6em; padding: .4em .9em .4em .4em; align-self: flex-start; border-radius: 999px; background: var(--s-paneel); box-shadow: var(--s-schaduw); font-size: .875em; color: var(--s-grijs); }
.s-kind b { color: var(--s-tekst); }
.s-kindteken { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent-zacht); color: var(--s-accent-tekst); font-weight: 700; flex: none; }
.s-telkop b { font-size: 1.75em; letter-spacing: -.02em; line-height: 1.15; }
.s-belicoon { position: absolute; right: 0; top: .5em; width: 1.5em; height: 1.5em; color: var(--s-tekst); }
.s-nukaart { gap: .3em; }
.s-vaktitel { font-size: 1.375em; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; }
.s-vaktitel .vs { width: .4em; height: .4em; }
.s-balkje { display: block; height: .3em; border-radius: 999px; background: var(--s-label); margin-top: .5em; overflow: hidden; }
.s-balkje i { display: block; height: 100%; width: 0; background: var(--s-accent); }
.s-hierna { font-size: .8125em; color: var(--s-grijs); margin-top: .3em; }
.s-lijst { list-style: none; display: flex; flex-direction: column; gap: .375em; }
.s-lijst li { position: relative; display: grid; grid-template-columns: 3.1em minmax(0, 1fr) auto; align-items: center; column-gap: .5em; background: var(--s-paneel); border-radius: .875em; padding: .7em .875em; font-size: .9375em; box-shadow: var(--s-schaduw); }
.s-lijst time { color: var(--s-grijs); font-size: .9375em; }
.s-lijst span { display: flex; align-items: center; font-weight: 600; min-width: 0; white-space: nowrap; overflow-wrap: normal; }
.s-lijst--cijfers span { white-space: normal; }
.s-lijst em { font-style: normal; color: var(--s-grijs); font-size: .9375em; text-align: right; }
.s-wissel { display: inline-grid !important; justify-items: end; align-items: center; }
.s-wissel > * { grid-area: 1 / 1; }
.s-wissel b { font-weight: 600; }
.s-lijst .s-wissel small { grid-area: 2 / 1; font-size: .875em; font-weight: 600; }
.s-wissel > .oud { grid-row: 1 / span 2; align-self: center; } /* het oude lokaal staat midden in de rij, net als de andere */
.s-pil-uit { background: var(--s-rood-zacht); color: var(--s-rood) !important; border-radius: 999px; padding: .15em .6em; font-size: .9em; }
.rij-uit { background: var(--s-zand) !important; transition: background-color 480ms var(--zacht); }
.s-vouw { grid-column: 1 / -1; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 480ms var(--zacht), opacity 480ms var(--zacht); }
.s-vouw > p { overflow: hidden; min-height: 0; font-size: .8125em; color: var(--s-grijs); padding-left: 3.6em; }
.s-tabbalk { position: absolute; left: .75em; right: .75em; bottom: 1em; overflow: hidden; display: flex; justify-content: space-between; padding: .55em .3em; border-radius: 999px; background: var(--s-paneel); box-shadow: var(--s-schaduw); }
.s-tabbalk span { font-size: max(9px, .8em); font-weight: 600; color: var(--s-grijs); padding: .4em .4em; border-radius: 999px; white-space: nowrap; overflow-wrap: normal; }
.s-tabbalk .is-actief { background: var(--s-accent-zacht); color: var(--s-accent-tekst); }
.s-vakregel { display: flex; align-items: center; font-weight: 600; }
.s-segment { display: flex; gap: .25em; padding: .25em; background: var(--s-paneel); border-radius: 999px; box-shadow: var(--s-schaduw); }
.s-segment span { flex: 1; text-align: center; padding: .45em; border-radius: 999px; font-weight: 600; font-size: .875em; color: var(--s-grijs); }
.s-segment .is-actief { background: var(--s-donker); color: var(--s-op-donker); }
.s-regels { list-style: none; display: flex; flex-direction: column; gap: .3em; font-size: .9375em; }
.s-leeg { text-align: center; color: var(--s-grijs); font-size: .875em; margin-top: .5em; }

/* Overlays in schermen: blad, laag, melding, zijpaneel */
.s-laag { position: absolute; inset: 0; background: rgba(14,20,36,.18); z-index: 4; pointer-events: none; }
.s-laag--licht { background: rgba(14,20,36,.12); }
@media (prefers-color-scheme: dark) { .s-laag { background: rgba(0,0,0,.45); } .s-laag--licht { background: rgba(0,0,0,.35); } }
.s-blad { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--s-paneel); border-radius: 1.75em 1.75em 0 0; padding: 1.25em 1.25em 3.75em; display: grid; box-shadow: 0 -10px 30px -10px rgba(0,0,0,.25); }
.s-blad > * { grid-area: 1 / 1; }
.blad-vraag, .blad-klaar { display: flex; flex-direction: column; gap: .875em; }
.blad-klaar { align-items: center; text-align: center; justify-content: center; }
.s-bladkop { display: flex; align-items: center; justify-content: space-between; gap: .75em; }
.s-bladkop b { font-size: 1.125em; display: flex; align-items: center; }
.s-sluit { width: 2.25em; height: 2.25em; border-radius: 50%; background: var(--s-label); position: relative; flex: none; }
.s-sluit::before, .s-sluit::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9em; height: 2px; margin: -1px 0 0 -.45em; background: var(--s-tekst); transform: rotate(45deg); border-radius: 2px; }
.s-sluit::after { transform: rotate(-45deg); }
.s-pillen { display: flex; gap: .5em; }
.s-pil { padding: .5em 1em; border-radius: 999px; border: 1px solid var(--s-lijn); font-weight: 600; font-size: .875em; transition: background-color 240ms var(--zacht), color 240ms var(--zacht), border-color 240ms var(--zacht); }
.s-pil--gekozen { background: var(--s-accent-zacht); color: var(--s-accent-tekst); border-color: transparent; }
.s-veld { display: block; padding: .8em 1em; border-radius: .875em; border: 1px solid var(--s-lijn); color: var(--s-grijs); font-size: .875em; }
.s-vink { width: 3em; height: 3em; border-radius: 50%; background: var(--s-accent-zacht); display: grid; place-items: center; }
.s-vink svg, .s-bestandvink { width: 1.6em; height: 1.6em; }
.vink { fill: none; stroke: var(--s-accent-tekst); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--zacht) 260ms; }
.s-bladtitel { font-size: 1.25em; }
.s-tekstknop { color: var(--s-accent-tekst); font-weight: 600; font-size: .9375em; }
.s-melding { position: absolute; z-index: 10; /* boven het eiland, zodat dat de tekst nooit afdekt */ left: .625em; right: .625em; top: 3.2em; display: flex; gap: .7em; align-items: flex-start; padding: .8em .9em; border-radius: 1.125em; background: var(--s-paneel); box-shadow: 0 10px 30px -8px rgba(0,0,0,.3), 0 0 0 1px var(--s-lijn); --van: translateY(calc(-100% - 3.2em - 48px)); transform: var(--van); }
.speel .s-melding { opacity: 1 !important; } /* alleen schuiven, nooit doorschijnen */
.s-melding .s-teken { width: 1.5em; height: 1.5em; border-radius: .4em; }
.s-melding div { display: flex; flex-direction: column; gap: .1em; font-size: .875em; }
.s-melding small { color: var(--s-grijs); font-size: .8571em; }
.s-melding span { color: var(--s-grijs); }

/* 10:00 lesscherm */
.s-stapel { display: grid; flex: 1; min-height: 0; }
.s-stapel > .s-view { grid-area: 1 / 1; min-height: 0; }
.s-view--vandaag .s-groot { gap: .75em; padding: 1.75em 2em; }
.s-view--les { display: grid; grid-template-columns: minmax(0, 1fr) 19em; grid-template-areas: "balk balk" "dia aanw" "plan hw"; grid-template-rows: auto auto 1fr; gap: 1em; align-content: start; }
.s-lesbalk { grid-area: balk; } .s-dia-paneel { grid-area: dia; } .s-aanwezig { grid-area: aanw; } .s-hw { grid-area: hw; } .s-lesplan { grid-area: plan; }
.s-lesbalk { display: flex; align-items: center; gap: 1em; background: var(--s-paneel); border-radius: 999px; padding: .5em .5em .5em 1.25em; box-shadow: var(--s-schaduw); }
.s-lesbalk .s-nu b { color: var(--s-tekst); font-size: 1.0667em; }
.s-lesbalk .s-meta { white-space: nowrap; font-size: .875em; }
.s-voortgang { flex: 1; height: .3em; border-radius: 999px; background: var(--s-label); overflow: hidden; display: block; min-width: 3em; }
.s-voortgang i { display: block; height: 100%; background: var(--s-accent); transform-origin: left; transform: scaleX(.02); }
.s-dia-paneel { flex-direction: row; gap: 1.25em; align-items: center; }
.s-dia { position: relative; flex: 0 0 50%; aspect-ratio: 16 / 10; background: var(--s-zand); border-radius: .875em; padding: 1.1em; display: flex; flex-direction: column; justify-content: flex-end; gap: .2em; box-shadow: 0 0 0 2px var(--s-accent); transition: box-shadow 480ms var(--zacht); }
.s-dia small { font-size: .8125em; font-weight: 600; color: var(--s-grijs); }
.s-dia b { font-size: 1.5em; letter-spacing: -.02em; line-height: 1.1; }
.s-dia span { color: var(--s-grijs); font-size: .875em; }
.s-opbord { position: absolute; top: .75em; left: .75em; font-style: normal; background: var(--s-accent); color: #fff; font-size: .8125em; font-weight: 600; padding: .25em .6em; border-radius: 999px; }
.s-dia-tekst { display: flex; flex-direction: column; gap: .6em; align-items: flex-start; }
.s-dia-tekst > b { font-size: 1.0625em; }
.s-wisselknop { display: inline-grid; }
.s-wisselknop > span { grid-area: 1 / 1; text-align: center; transition: opacity 240ms var(--zacht); }
.s-dia-tekst .s-wisselknop { background: var(--s-accent-zacht); color: var(--s-accent-tekst); transition: background-color 240ms var(--zacht), color 240ms var(--zacht); }
.s-aanwezig .s-telregel { font-size: .9375em; }
.s-persoon { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; padding: .65em .75em; border-radius: .875em; background: var(--s-grond); }
.s-persoon > span:first-child { font-weight: 600; font-size: .9375em; }
.s-lesplan ol { list-style: none; display: flex; flex-direction: column; gap: .35em; }
.s-lesplan li { display: flex; gap: .6em; align-items: center; font-size: .875em; background: var(--s-grond); border-radius: .875em; padding: .45em .6em; }
.s-lesplan li b { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: var(--s-paneel); font-size: .85em; flex: none; }
.s-hw p:not(.s-kop):not(.s-meta) { font-size: .9375em; }

/* 13:30 cijfers */
.s-toetsen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75em; }
.s-toets { background: var(--s-paneel); border-radius: .875em; padding: .7em .9em; display: flex; flex-direction: column; gap: .2em; align-items: flex-start; box-shadow: var(--s-schaduw); min-width: 0; }
.s-toets small { color: var(--s-grijs); font-size: .8125em; }
.s-toets b { font-size: .9375em; }
.s-toets .s-label { font-size: .8125em; white-space: normal; }
.s-toets.is-gekozen { box-shadow: inset 0 0 0 2px var(--s-accent), var(--s-schaduw); }
.s-toets .s-wissel { justify-items: start; }
.s-cijfers { gap: .45em; padding: 1em 1.375em; flex: 1; min-height: 0; }
.s-cijferkop { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; }
.s-cijferkop .s-knop { height: 2.4em; font-size: .875em; }
.s-cijferkop .s-wisselknop > .na2 { color: var(--s-accent-tekst); }
.s-cijfers .s-wisselknop { transition: background-color 240ms var(--zacht); }
.s-tabel { width: 100%; border-collapse: collapse; font-size: .875em; overflow-wrap: normal; }
.s-tabel th { white-space: nowrap; }
.s-tabel th { text-align: left; font-weight: 600; color: var(--s-grijs); font-size: .9em; padding: .3em .5em; border-bottom: 1px solid var(--s-lijn); }
.s-tabel td { padding: .24em .5em; border-bottom: 1px solid var(--s-lijn); vertical-align: middle; }
.s-tabel td:first-child { font-weight: 600; }
.s-tabel td small { display: inline; margin-left: .6em; color: var(--s-grijs); font-weight: 400; font-size: .9em; }
.s-tabel tr:last-child td { border-bottom: 0; }
.s-in1, .s-in2 { position: relative; display: inline-block; min-width: 2em; padding: .05em .35em; margin-left: -.35em; border-radius: .4em; }
.s-in1::after, .s-in2::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--s-accent); opacity: 0; pointer-events: none; }
.s-tabelvoet { font-size: .8125em; color: var(--s-grijs); }
.s-tabelvoet u { color: var(--s-accent-tekst); text-decoration: none; font-weight: 600; }
.s-lijst--cijfers li { grid-template-columns: minmax(0, 1fr) auto; }
.s-lijst--cijfers span { flex-wrap: wrap; }
.s-lijst--cijfers small { flex-basis: 100%; padding-left: .95em; font-weight: 400; color: var(--s-grijs); font-size: .875em; }
.s-lijst--cijfers em { font-size: 1.125em; font-weight: 700; color: var(--s-tekst); }
.s-cijferblad { gap: .4em; padding-bottom: 6em; }
.s-cijferblad > * { grid-area: auto; }
.s-groot-cijfer { font-size: 3em; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: .1em; }
.s-zin { font-size: .9375em; font-weight: 600; }

/* 15:30 mentor */
.s-grid--mentor { grid-template-columns: minmax(0, 1fr) 16em; align-items: start; flex: 1; }
.s-opvallend { gap: .6em; }
.s-signaal { display: flex; align-items: center; justify-content: space-between; gap: .75em; padding: .8em .9em; border-radius: .875em; background: var(--s-grond); }
.s-signaal > div { display: flex; flex-direction: column; gap: .4em; align-items: flex-start; min-width: 0; }
.s-signaal b { font-size: .9375em; }
.s-signaal .s-knoppen { flex-wrap: nowrap; }
.s-signaal--stapel { flex-direction: column; align-items: flex-start; } /* knoppen onder de labels: die hebben dan de hele breedte */
.s-klasvandaag p:not(.s-kop) { font-size: .9375em; }
.s-zijpaneel { position: absolute; z-index: 6; top: 1em; right: 1em; width: 22em; background: var(--s-paneel); border-radius: 1.375em; padding: 1.25em; display: flex; flex-direction: column; gap: .9em; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 24px 60px -16px rgba(15,23,42,.35), 0 0 0 1px var(--s-lijn); }
.s-vinkje { display: flex; align-items: center; gap: .6em; font-weight: 600; font-size: .9375em; }
.s-vinkje i { width: 1.25em; height: 1.25em; border-radius: .35em; background: var(--s-accent); position: relative; }
.s-vinkje i::after { content: ""; position: absolute; left: .38em; top: .18em; width: .35em; height: .65em; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.s-zijpaneel .s-knop--vol { margin-top: .4em; }

/* 16:00 bel */
.s-grid--bel { grid-template-columns: 21em minmax(0, 1fr); align-items: start; align-content: start; flex: 1; }
.bel .scherm--laptop { aspect-ratio: auto; } /* de bel groeit met zijn inhoud mee: geen leeg vlak onderin */
.s-export { gap: .75em; align-items: flex-start; }
.s-voortgang--export { width: 100%; flex: none; margin-top: .25em; }
.s-voortgang--export i { transform: scaleX(1); }
.s-bestand { display: flex; align-items: center; gap: .6em; padding: .7em .8em; border-radius: .875em; background: var(--s-grond); width: 100%; }
.s-bestand > svg:first-child { width: 1.5em; height: 1.5em; color: var(--s-grijs); flex: none; }
.s-bestand span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.s-bestand b { font-size: .8125em; }
.s-bestand small { font-size: .8125em; color: var(--s-grijs); }
.s-tabel--log td:first-child { font-weight: 600; color: var(--s-grijs); white-space: nowrap; }
.s-tabel--log td:nth-child(2) { white-space: nowrap; font-weight: 600; }
.s-tabel--log td { padding: .55em .5em; }
.s-tabel--log .draad { margin-left: .3em; vertical-align: middle; }
/* Rechten per rol: vult het beheerscherm over de volle breedte, zodat er onderaan geen leeg vlak staat */
.s-rechten { grid-column: 1 / -1; }
.s-rechten ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.s-rechten li { display: flex; flex-direction: column; gap: .15em; padding: .65em .85em; border-radius: .875em; background: var(--s-grond); }
.s-rechten b { font-size: .9375em; }
.s-rechten span { font-size: .8125em; color: var(--s-grijs); }
/* Smal: het logboek als lijst (tijd links, daarnaast wie en wat), de kolomkoppen alleen voor schermlezers */
@media (max-width: 519px) {
  .s-tabel--log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .s-tabel--log, .s-tabel--log tbody { display: block; }
  .s-tabel--log tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--s-lijn); }
  .s-tabel--log tr:last-child { border-bottom: 0; }
  .s-tabel--log td { padding: 0; border: 0; white-space: normal !important; }
  .s-tabel--log td:first-child { grid-row: span 2; }
  .s-tabel--log td:nth-child(3) { color: var(--s-grijs); }
}

/* ============================================================ het draadteken (alleen bij de ziekmelding van 07:46) */
.draad { display: inline-flex; align-items: center; gap: .45em; vertical-align: middle; padding: .3em .65em .3em .55em; border-radius: .5em; background: var(--s-accent-zacht); color: var(--s-accent-tekst); font-size: .8125em; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.draad-teken { position: relative; display: inline-block; width: 1.15em; height: .45em; flex: none; }
.draad-teken::before { content: ""; position: absolute; left: 0; top: 50%; width: .8em; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--draad); transform-origin: left; transform: scaleX(var(--teken, 1)); transition: transform 360ms var(--stroom) var(--dw, 0ms); }
.draad-teken::after { content: ""; position: absolute; right: 0; top: 0; width: .4em; height: .4em; border-radius: 50%; background: var(--draad); transform: scale(var(--teken, 1)); transition: transform 240ms var(--veer) calc(var(--dw, 0ms) + 300ms); }
.scherm .draad-teken { --draad: var(--s-accent-tekst); }
/* Buiten de schermen (bij de school, en de uitleg bij 07:45) in de kleuren van de site */
.bijschool .draad, .draad--uitleg { background: var(--accent-zacht); color: var(--accent-tekst); font-size: 13px; --draad: var(--accent-tekst); }
.draad--uitleg { vertical-align: .05em; padding: .15em .55em .15em .5em; }
.draad--uitleg .draad-teken { --draad: var(--accent-tekst); }
.s-tabel .draad { font-size: .9em; }

/* ============================================================ dagbalk */
.dag { position: relative; } /* zelfde breedte als .wrap elders: het logo, de dag en de secties staan op één lijn */
.dagbalk {
  --loper: 0; --dag: 0; /* site.js: --loper = plek op de baan (0..1, per stuk tussen twee punten), --dag = tijd */
  position: sticky; top: var(--kop-h); z-index: 40; height: var(--balk-h);
  background: color-mix(in srgb, var(--papier) 98%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
  border-bottom: 1px solid var(--lijn);
  transition: opacity var(--t) var(--zacht), transform var(--t) var(--zacht);
}
/* Na de bel trekt de balk zich terug, zodat hij niet '16:00' zegt terwijl de avond al in beeld komt */
/* Bewust zonder visibility: hidden, anders slaat Shift+Tab de hele dag over. Krijgt iets in de balk focus, dan komt hij terug. */
.dagbalk.klaar { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.dagbalk.klaar:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.dagbalk-in { height: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 32px; }
.dagbalk-datum { font-size: 13px; font-weight: 600; color: var(--grijs); line-height: 1.2; }
.klok { display: inline-flex; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: var(--inkt); margin-top: 3px; }
.klok-vast { font-size: 15px; }
.klok > span:not(.klok-vast) { display: inline-block; min-width: .62em; text-align: center; }
.klok > span:nth-child(3) { min-width: .3em; }
.klok.klok-tik { animation: kloktik 240ms var(--veer); }
@keyframes kloktik { from { transform: translateY(-2px); } to { transform: none; } }
.klok .rol { animation: rol 240ms var(--zacht); }
[data-rol].rol { display: inline-block; animation: rol 240ms var(--zacht); }
@keyframes rol { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
/* De baan: zes momenten op gelijke afstand (een rustig ritme), de vulling loopt per stuk mee met de klok */
.baan { --lijn-y: 50%; position: relative; height: 100%; min-width: 0; margin-inline: 8px; }
.baan-lijn { position: absolute; left: 0; right: 0; top: var(--lijn-y); height: 2px; margin-top: -1px; border-radius: 999px; background: var(--lijn); overflow: hidden; }
.baan-vol { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--loper)); background: var(--draad); }
html:not(.js) .baan-vol { transform: none; }
/* De bel: één lichte golf over de baan (alleen transform en opacity) */
.baan-lijn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--draad) 55%, #fff), transparent); opacity: 0; transform: translateX(-100%); }
html.beweeg .dagbalk.golf .momenten .eind .m-stip { animation: klink 600ms var(--veer); }
@keyframes klink { 50% { transform: scale(1.35); } }
.dagbalk.golf .baan-lijn::after { animation: golf 1200ms var(--stroom); }
@keyframes golf { from { opacity: 1; transform: translateX(-100%); } to { opacity: 1; transform: translateX(340%); } }
.loper-houder { position: absolute; left: 0; right: 0; top: var(--lijn-y); height: 0; pointer-events: none; z-index: 4; }
/* Eén aanwijzer: de loper schuift over de stippen heen */
.loper { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--draad); border: 3px solid var(--vlak); box-shadow: 0 1px 3px rgba(14,20,36,.25); transform: translateX(calc(var(--loper) * var(--baan-breed, 0px))); }
html:not(.js) .loper { display: none; }
.momenten { list-style: none; position: absolute; inset: 0; }
.momenten li { position: absolute; left: calc(var(--i) * 20%); top: var(--lijn-y); transform: translate(-50%, -50%); z-index: 3; }
.momenten a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--grijs); text-decoration: none; border-radius: 50%; }
.momenten a:focus-visible { outline: none; }
.m-stip { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--draad); background: var(--vlak); transition: background-color var(--t-kort) var(--zacht); }
.momenten a:focus-visible .m-stip { outline: 3px solid var(--focus); outline-offset: 3px; }
.momenten .geweest .m-stip, .momenten a[aria-current="step"] .m-stip, html:not(.js) .m-stip { background: var(--draad); }
.m-label { display: none; position: absolute; top: calc(50% + 10px); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--grijs); }
.momenten a:is(:hover, :focus-visible) .m-label, .momenten a[aria-current="step"] .m-label { color: var(--inkt); }
.momenten li:first-child .m-label { left: 15px; transform: none; }
.momenten .eind .m-label { left: auto; right: 15px; transform: none; }
.dagbalk-nu { display: none; }
.dagbalk-rechts { display: flex; align-items: center; gap: 20px; }
.sla-over { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sla-over:focus { position: absolute; left: var(--gutter); top: calc(100% + 8px); width: auto; height: 40px; clip-path: none; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--vlak); color: var(--inkt); box-shadow: var(--schaduw-kaart); font-size: 15px; font-weight: 600; z-index: 5; }
@media (max-width: 1199px) {
  /* Zonder labels onder de baan: het huidige moment in woorden rechts van de baan */
  .dagbalk-nu { display: block; width: 6.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 13px; font-weight: 600; color: var(--grijs); }
  html:not(.js) .dagbalk-nu { display: none; }
  .dagbalk-rechts { position: absolute; }
}
@media (min-width: 1200px) {
  .baan { --lijn-y: 19px; }
  .m-label { display: block; }
  .sla-over, .sla-over:focus { position: static; width: auto; height: auto; clip-path: none; overflow: visible; background: none; box-shadow: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--grijs); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
  .sla-over:hover { text-decoration: underline; color: var(--inkt); }
}

/* ============================================================ momenten
   Elk moment: een kop (tijd, titel, intro) en daaronder een 'spoor'. In het spoor staat de 'bühne' met de stappen
   en het toneel. Met beweging blijft de bühne stilstaan (sticky) terwijl je door het spoor scrolt; site.js zet
   per stukje scroll de volgende stap. Zonder beweging staat alles gewoon onder elkaar, in de eindtoestand. */
.moment { padding-top: var(--sectie); --buhne-rest: 176px; }
.moment-kop { max-width: 50em; }
.moment h2 { margin-top: 14px; }
.moment-intro { margin-top: 18px; }
.moment-noot { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--grijs); max-width: 40em; }
.moment-noot strong { font-weight: 600; color: var(--inkt); }
/* Statusnotitie: het teken in een eigen kolom, zodat een tweede regel onder de tekst begint en niet onder het teken.
   Half gevuld = zo werkt het in het prototype; een vinkje = werkt al in de echte versie (zoals in 'Hoe ver we zijn'). */
.noot-proto, .noot-echt { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.noot-proto::before, .noot-echt::before { content: ""; width: 12px; height: 12px; margin-top: calc((1.5em - 12px) / 2); border-radius: 50%; box-sizing: border-box; }
.noot-proto::before { border: 1.5px solid var(--grijs); background: linear-gradient(90deg, var(--grijs) 50%, transparent 50%); }
.noot-echt::before { width: 14px; height: 14px; margin-top: calc((1.5em - 14px) / 2); background: var(--accent); }
.noot-echt::after { content: ""; position: absolute; left: 4.5px; top: calc((1.5em - 14px) / 2 + 3px); width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.bel-noot { grid-template-columns: 16px auto; justify-content: center; text-align: left; }
.sla-klein { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--grijs); text-underline-offset: .25em; }
.sla-klein:hover { color: var(--inkt); }
@media (min-width: 1200px) { .sla-klein { display: none; } }
.spoor { margin-top: 36px; }
.buhne { display: flex; flex-direction: column; gap: 28px; }
.stappen { list-style: none; counter-reset: stap; display: flex; flex-direction: column; gap: 4px; }
.stappen li { position: relative; counter-increment: stap; padding: 12px 0 12px 48px; color: var(--grijs); font-size: 17px; max-width: 30em; transition: color var(--t-kort) var(--zacht), opacity var(--t) var(--zacht); }
.stappen li strong { color: var(--inkt); font-weight: 600; }
.stappen li::before { content: counter(stap); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--lijn); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--grijs); background: var(--papier); transition: background-color var(--t-kort) var(--zacht), color var(--t-kort) var(--zacht), border-color var(--t-kort) var(--zacht); }
.stappen li::after { content: ""; position: absolute; left: 13px; top: 46px; bottom: -6px; width: 2px; border-radius: 2px; background: var(--lijn); transition: background-color var(--t-kort) var(--zacht); }
.stappen li:last-child::after { display: none; }
.stappen li.actief { color: var(--inkt); }
.stappen li.gedaan::before { background: var(--accent-zacht); border-color: var(--draad); color: var(--accent-tekst); }
.stappen li.gedaan::after { background: color-mix(in srgb, var(--draad) 40%, var(--lijn)); }
.stappen li.actief::before { background: var(--accent); border-color: var(--accent); color: #fff; }
.stappen li.actief::after { background: var(--draad); }
.toneel { margin: 0; min-width: 0; position: relative; }
.podium { position: relative; }
.toneel figcaption, .held-beeld figcaption, .avond-beeld figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 28px; text-align: center; }
.moment .toneel figcaption, .bel .toneel figcaption { margin-top: 24px; }
.dagbalk .dagbalk-label { display: none; white-space: nowrap; }
@media (min-width: 1200px) {
  .dagbalk .dagbalk-label { display: inline-flex; }
  .dag .toneel figcaption .label-verzonnen { display: none; }
  .dag .toneel figcaption { margin-top: 0; }
}
/* Het eerlijkheidslabel staat op een eigen vlak: in de slagschaduw van een toestel blijft het zo goed leesbaar */
.label-verzonnen { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--grijs); background: var(--vlak); border: 1px solid var(--lijn); padding: 3px 10px; border-radius: 999px; line-height: 1.4; }
.label-verzonnen::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--grijs); opacity: .6; }
.figuur-noot { flex-basis: 100%; }
.opnieuw { display: flex; align-items: center; gap: 8px; margin: 12px auto 0; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--accent-tekst); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.opnieuw svg { width: 16px; height: 16px; }
.opnieuw { transition: opacity 320ms var(--zacht); }
.opnieuw.wacht { visibility: hidden; opacity: 0; pointer-events: none; }
.opnieuw:hover { background: var(--accent-zacht); }

/* Toestellen in een moment: nooit hoger dan wat er naast kop, dagbalk, stappen en onderschrift in beeld past */
.moment .toestel--telefoon { width: min(340px, 78vw, calc((100vh - var(--kop-h) - var(--balk-h) - var(--buhne-rest)) * .462)); width: min(340px, 78vw, calc((100svh - var(--kop-h) - var(--balk-h) - var(--buhne-rest)) * .462)); }
.moment .toestel--laptop { max-width: min(94%, 820px, calc((100svh - var(--kop-h) - var(--balk-h) - var(--buhne-rest)) * 1.6)); }
/* Leesbare schermtekst: de laptop rekent met 54 em per breedte, maar nooit onder 12 px */
@media (min-width: 640px) { .moment .scherm--laptop, .bel .scherm--laptop { font-size: clamp(12px, 100cqi / 57, 14.5px); } }
.podium--naast { display: flex; align-items: center; justify-content: center; }
/* Breed: de telefoon staat midden op de bühne, net als bij de andere momenten; de kaart schuift rechts over de rand */
@media (min-width: 960px) {
  .podium--naast { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; }
  .podium--naast > * { grid-area: 1 / 1; }
  /* z-index boven de lagen in het scherm (blad 5, eiland 9): de kaart ligt echt bovenop */
  .podium--naast > .bijschool { justify-self: end; align-self: end; margin: 0 0 10%; z-index: 12; }
}
/* Met de stappen ernaast is de bühne smaller: de telefoon schuift 70 px naar links, zodat de kaart alleen over de
   rand van het toestel valt en nooit over de tekst van de bevestiging (gemeten 37–63 px overlap zonder deze regel) */
@media (min-width: 1200px) { .podium--naast > .toestel { translate: -70px 0; } }
.bijschool { position: relative; z-index: 3; width: 300px; max-width: 100%; background: var(--vlak); border-radius: 22px; padding: 22px; box-shadow: var(--schaduw-kaart), 0 0 0 1px var(--lijn); display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.bijschool-kop { font-weight: 700; font-size: 17px; }
.bijschool-kop span { font-weight: 600; font-size: 13px; color: var(--grijs); }
.bijschool-rij { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 12px; border-top: 1px solid var(--lijn); }
.bijschool-rij > span:first-child { font-weight: 600; }

/* Breed: stappen links, toneel rechts; met beweging staat de hele bühne stil in het midden van het beeld */
@media (min-width: 1200px) {
  .moment { --buhne-rest: 72px; }
  .buhne { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; }
  .podium--duo { display: grid; grid-template: 1fr / 1fr; align-items: center; padding-bottom: 5%; }
  .podium--duo > .toestel { grid-area: 1 / 1; }
  .podium--duo > .toestel--laptop { width: 100%; margin: 0 auto; justify-self: center; } /* dezelfde plek als de laptop bij 10:00 en 15:30 */
  .podium--duo > .telefoon-1330 { justify-self: end; align-self: end; width: min(34%, calc((100svh - var(--kop-h) - var(--balk-h) - var(--buhne-rest)) * .462)); margin: 0 0 -6% 0; z-index: 2; }
  html.beweeg .buhne { position: sticky; top: calc(var(--kop-h) + var(--balk-h) + max(16px, (100svh - var(--kop-h) - var(--balk-h) - var(--buhne-h, 640px)) / 2)); }
  /* 13:30: zodra Lotte bericht krijgt, wijkt het docentscherm naar achteren; de telefoon is dan het verhaal */
  /* Alleen kleiner, niet doorzichtiger: met opacity .55 zakte alle laptoptekst onder 4,5:1, en stap 3 is de eindstand */
  .podium--duo > .toestel--laptop { transform-origin: left center; transition: transform 500ms var(--zacht) 300ms; }
  html.beweeg .toneel--1330:is([data-stap="2"], [data-stap="3"]) .podium--duo > .toestel--laptop { transform: scale(.97); }
  /* De telefoon van Lotte schuift dicht binnen, zonder door te schijnen: eerst de tik, dan het gevolg */
  .toneel--1330 .telefoon-1330 { --van: translateX(3em); --d: 600ms; --do: 160ms; --e: var(--stroom); --w: 450ms; }
  /* Langer spoor: per stap ruim een derde scherm scrollen, en daarna rust op het eindbeeld */
  html.beweeg .spoor::after { content: ""; display: block; height: 150vh; height: 150svh; }
  /* niet-actief: gewone tekst in grijs, kop in grijs; actief: alles in inkt. Beide ruim boven 4,5:1. */
  html.beweeg .stappen li, html.beweeg .stappen li strong { color: var(--grijs); }
  html.beweeg .stappen li.actief, html.beweeg .stappen li.actief strong { color: var(--inkt); }
  .buhne { align-items: start; }
  .buhne > .stappen { padding-top: 24px; }
}
/* Smal: één bijschrift boven het toestel dat met de stap meewisselt; de stappen liggen gestapeld op dezelfde plek
   (geen verspringen), alleen de huidige is zichtbaar. Het toestel blijft daarbij helemaal in beeld. */
@media (max-width: 1199px) {
  .podium--duo { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .podium--duo > .toestel--laptop { width: 100%; }
  .podium--duo > .telefoon-1330 { margin: 0; }
  html.beweeg .buhne { position: sticky; top: calc(var(--kop-h) + var(--balk-h) + 12px); gap: 16px; }
  html.beweeg .spoor::after { content: ""; display: block; height: 150vh; height: 150svh; }
  html.beweeg .stappen { display: grid; }
  /* Na elkaar, niet tegelijk: de oude zin is weg voordat de nieuwe opkomt, nooit twee zinnen door elkaar */
  html.beweeg .stappen li { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); padding: 1px 0 1px 40px; font-size: 15px; line-height: 1.45; max-width: 40em; transition: opacity 140ms var(--zacht), transform 140ms var(--zacht); }
  html.beweeg .stappen li::before { top: 0; width: 26px; height: 26px; font-size: 12px; }
  html.beweeg .stappen li::after { display: none; }
  html.beweeg .stappen li.zicht { opacity: 1; transform: none; transition: opacity 280ms var(--zacht) 140ms, transform 280ms var(--zacht) 140ms; }
  /* 13:30: de telefoon van Lotte komt over het docentscherm heen; zo zie je tik en gevolg in één beeld */
  html.beweeg .podium--duo { display: grid; }
  html.beweeg .podium--duo > .toestel { grid-area: 1 / 1; }
  html.beweeg .podium--duo > .toestel--laptop { align-self: start; transition: opacity 600ms var(--zacht), transform 600ms var(--zacht); }
  html.beweeg .podium--duo > .telefoon-1330 { justify-self: center; align-self: end; z-index: 2; }
  html.beweeg .toneel--1330:is([data-stap="2"], [data-stap="3"]) .podium--duo > .toestel--laptop { opacity: 0; transform: translateY(-12px) scale(.96); transition-duration: 360ms; transition-delay: 450ms; }
  /* eerst de tik op de knop en 'Zichtbaar voor leerlingen en ouders', dan pas de telefoon van Lotte */
  html.beweeg .toneel--1330 .telefoon-1330 { --w: 600ms; --d: 480ms; }
  html.beweeg .toneel--1330[data-stap="2"] .melding-1330 { --w: 900ms; }
}
@media (max-width: 959px) {
  .podium--naast { flex-direction: column; gap: 20px; }
  .bijschool { margin: 0; }
  /* 07:45: de telefoon van de ouder stapt iets terug en 'Bij de school' komt eronder binnen, als ander scherm:
     de melding komt aan bij ándere mensen, niet op de telefoon van de vader */
  html.beweeg .podium--naast { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  html.beweeg .podium--naast > * { grid-area: 1 / 1; }
  html.beweeg .podium--naast .bijschool { align-self: end; width: min(320px, 94%); z-index: 12; padding: 14px 16px; gap: 8px; }
  html.beweeg .podium--naast .bijschool-rij { padding-top: 8px; }
  html.beweeg .toneel--0745 .podium--naast > .toestel { transform-origin: top center; transition: transform 600ms var(--zacht); }
  html.beweeg .toneel--0745[data-stap="3"] .podium--naast > .toestel { transform: scale(.66); }
  html.beweeg .toneel--0745 .bijschool { --van: translateY(32px); --w: 300ms; }
}

/* ============================================================ speel-mechaniek
   De HTML bevat de eindtoestand (data-stap="3", demo's "1"). Alleen onder html.beweeg zet site.js een toneel op
   stap 0 en speelt het af. Klassen: naN = zichtbaar vanaf stap N; totN = zichtbaar tot stap N; alleen2 = alleen
   in stap 2. Elk element kiest met --van/--weg zijn beweging, met --d/--e/--w duur, easing en vertraging. */
.speel :is(.na1, .na2, .na3, .tot1, .tot2, .tot3, .alleen2) {
  transition: opacity var(--do, var(--d, 480ms)) var(--zacht) var(--w, 0ms), transform var(--d, 480ms) var(--e, var(--zacht)) var(--w, 0ms);
}
.speel:not([data-stap="0"]) .tot1,
.speel:is([data-stap="2"], [data-stap="3"]) .tot2,
.speel[data-stap="3"] .tot3 { opacity: 0; transform: var(--weg, none); pointer-events: none; }
html.beweeg .speel[data-stap="0"] :is(.na1, .na2, .na3, .alleen2),
html.beweeg .speel[data-stap="1"] :is(.na2, .na3, .alleen2),
html.beweeg .speel[data-stap="2"] .na3,
.speel[data-stap="3"] .alleen2 { opacity: 0; transform: var(--van, translateY(.6em)); pointer-events: none; }
html.beweeg .speel[data-stap="0"] :is(.d1, .d2, .d3),
html.beweeg .speel[data-stap="1"] :is(.d2, .d3),
html.beweeg .speel[data-stap="2"] .d3 { --teken: 0; }
html.beweeg .speel :is(.na1, .na2, .na3).later { --w: 380ms; }
html.beweeg .speel :is(.na1, .na2, .na3).laatst { --w: 900ms; --d: 240ms; }
/* Wie tijdens een overgang beweegt, krijgt even will-change (site.js zet .speelt) */
.speel.speelt .toestel, .speel.speelt .s-blad { will-change: transform, opacity; }

/* De tik-ring: zo zie je waar 'getikt' wordt, zonder nagebootste muisaanwijzer */
.tik { position: absolute; left: 50%; top: 50%; width: 2.5em; height: 2.5em; margin: -1.25em 0 0 -1.25em; border-radius: 50%; background: color-mix(in srgb, var(--s-accent) 22%, transparent); opacity: 0; pointer-events: none; }
@media (prefers-color-scheme: dark) { .tik { background: color-mix(in srgb, #7aa2ff 30%, transparent); } }
html.beweeg .speel[data-stap="1"] .tik1, html.beweeg .speel[data-stap="2"] .tik2, html.beweeg .speel[data-stap="3"] .tik3 { animation: tik 600ms var(--zacht) both; }
html.beweeg .toneel--1530[data-stap="3"] .tik-later { animation: tik 600ms var(--zacht) 1500ms both; }
html.beweeg .speel[data-stap="1"] .druk1, html.beweeg .speel[data-stap="2"] .druk2, html.beweeg .speel[data-stap="3"] .druk3 { animation: druk 320ms var(--veer); }
@keyframes tik { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes druk { 0% { transform: none; } 38% { transform: scale(.96); } 100% { transform: none; } }

/* 07:45 */
.toneel--0745 .s-laag { --van: none; --d: 400ms; --w: 160ms; }
.toneel--0745 .s-blad { --van: translateY(105%); --d: 600ms; --e: var(--stroom); --w: 160ms; }
.toneel--0745 .blad-vraag { --weg: none; --d: 120ms; }
.toneel--0745 .blad-klaar { --van: translateY(.3em) scale(.98); --w: 140ms; --d: 240ms; }
.toneel--0745 .blad-klaar .s-meta { --van: translateY(.4em); --d: 360ms; }
html.beweeg .toneel--0745[data-stap="1"] .kies1 { animation: kies 240ms var(--zacht) 420ms both; }
@keyframes kies { from { background-color: transparent; } }
html.beweeg .toneel--0745:is([data-stap="0"], [data-stap="1"]) .vink { stroke-dashoffset: 24; transition: none; }
.toneel--0745 .bijschool { --van: translateX(24px); --d: 600ms; }
.toneel--0745 .bijschool .draad { --dw: calc(300ms + var(--i, 0) * 120ms); }

/* 08:20 */
/* De melding hoort bij stap 2 (ander lokaal): eerst komt hij binnen, daarna wisselt de rij Engels */
html.beweeg .toneel--0820[data-stap="2"] .melding-0820 { animation: melding-in-uit 1900ms both; }
@keyframes melding-in-uit {
  0% { transform: var(--van); animation-timing-function: var(--veer); }
  31% { transform: none; }
  79% { transform: none; animation-timing-function: var(--zacht); }
  100% { transform: var(--van); }
}
.toneel--0820 .s-nieuw { --van: scale(0); --weg: scale(0); --e: var(--veer); }
.toneel--0820 .s-nieuw.later { --w: 80ms; }
.toneel--0820 .rij-engels .s-nieuw { --w: 700ms; --d: 240ms; }
html.beweeg .toneel--0820[data-stap="1"] .rij-engels .s-nieuw { --w: 0ms; --d: 480ms; }
/* Kort na de melding (niet pas na 600 ms): anders loopt de wissel A108→A112 bij gewoon scrollen door de wissel van stap 3 heen */
.toneel--0820 .oud.tot2 { --weg: translateY(-100%); --w: 200ms; }
.toneel--0820 .nieuw.na2, .toneel--0820 small.na2 { --van: translateY(100%); --w: 200ms; }
.toneel--0820 .tot3.oud { --weg: none; }
.toneel--0820 .s-pil-uit { --van: scale(.8); --e: var(--veer); }
html.beweeg .toneel--0820[data-stap="2"] .rij-engels { animation: markeer 1200ms var(--zacht) 200ms both; }
@keyframes markeer { from { background-color: color-mix(in srgb, var(--s-oranje) 10%, var(--s-paneel)); } }
html.beweeg .toneel--0820:not([data-stap="3"]) .rij-uit { background: var(--s-paneel) !important; }
html.beweeg .toneel--0820:not([data-stap="3"]) .s-vouw { grid-template-rows: 0fr; opacity: 0; transform: none; }
.toneel--0820 .s-vouw { --van: none; }

/* 10:00 */
.toneel--1000 .s-view--vandaag { --weg: scale(.96); --d: 320ms; }
.toneel--1000 .s-lesbalk { --van: translateY(-.75em); --w: 200ms; }
.toneel--1000 .s-view--les > .na1:not(.s-lesbalk) { --van: translateY(1em); --w: calc(260ms + var(--i, 1) * 70ms); }
.toneel--1000 .s-voortgang i { --van: scaleX(0); --d: 720ms; --e: var(--stroom); --w: 300ms; }
.toneel--1000 .s-persoon { --van: translateY(.5em); --w: 650ms; }
.toneel--1000 .s-persoon .draad { --dw: 900ms; }
.toneel--1000 .s-opbord { --van: scale(.8); --e: var(--veer); --w: 200ms; }
html.beweeg .toneel--1000:not([data-stap="3"]) .s-dia { box-shadow: 0 0 0 0 var(--s-accent); }
html.beweeg .toneel--1000:not([data-stap="3"]) .s-dia-tekst .s-wisselknop { background: var(--s-accent); color: #fff; }
/* Tekstwissel op dezelfde plek: eerst weg, dan pas de nieuwe tekst */
.toneel--1000 .s-wisselknop > .tot3 { --weg: none; --d: 120ms; --w: 180ms; }
.toneel--1000 .s-wisselknop > .na3 { --van: translateY(.3em); --d: 240ms; --w: 320ms; }

/* 13:30 */
/* Eerst de tik-ring, dan wisselt de staat: de oude tekst is weg voordat de nieuwe komt */
.toneel--1330 :is(.s-wisselknop, .s-wissel) > .tot2, .toneel--1330 .s-cijferkop .tot2 { --weg: none; --d: 120ms; --w: 180ms; }
.toneel--1330 :is(.s-wisselknop, .s-wissel) > .na2 { --van: translateY(.3em); --d: 240ms; --w: 320ms; }
html.beweeg .toneel--1330:is([data-stap="0"], [data-stap="1"]) .s-cijfers .s-wisselknop { background: var(--s-accent); color: #fff; }
.toneel--1330 .s-cijfers .s-wisselknop { background: var(--s-accent-zacht); }
.toneel--1330 .telefoon-1330 { --van: translateY(2em); --d: 720ms; --w: 200ms; }
.toneel--1330 .melding-1330 { --d: 400ms; --van: translateY(calc(-100% - 3.2em - 48px)); }
html.beweeg .toneel--1330[data-stap="2"] .melding-1330 { opacity: 1; transform: none; --w: 420ms; --d: 600ms; --e: var(--veer); }
.toneel--1330 .s-nieuw { --van: scale(0); --weg: scale(0); --e: var(--veer); }
html.beweeg .toneel--1330 .s-nieuw.later { --w: 420ms; }
html.beweeg .toneel--1330[data-stap="3"] .s-nieuw { --w: 300ms; --d: 240ms; }
.toneel--1330 .s-cijferblad { --van: translateY(1em); }
.toneel--1330 .s-laag { --van: none; }
.toneel--1330 .s-groot-cijfer { --van: scale(.85); --d: 600ms; --e: var(--veer); --w: 120ms; transform-origin: left center; }
html.beweeg .toneel--1330[data-stap="1"] .s-in1::after { animation: veld 480ms var(--zacht) both; }
html.beweeg .toneel--1330[data-stap="1"] .s-in2::after { animation: veld 480ms var(--zacht) 640ms both; }
@keyframes veld { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* 15:30 */
.toneel--1530 .s-signaal .s-label { --van: scale(.9); --e: var(--veer); --d: 360ms; transform-origin: left center; }
.toneel--1530 .s-signaal .s-label.later { --w: 140ms; }
.toneel--1530 .s-signaal .draad.na2 { --van: translateY(.4em); }
.toneel--1530 .s-signaal > div > b { transition: color 360ms var(--zacht); }
html.beweeg .toneel--1530[data-stap="0"] .s-signaal > div > b { color: var(--s-grijs); }
/* Vóór de signalen staan er stille grijze balkjes op hun plek: het scherm is nooit leeg, en er verspringt niets */
.toneel--1530 .s-signaal :is(.s-label, .draad) { transition: opacity var(--d, 480ms) var(--zacht) var(--w, 0ms), transform var(--d, 480ms) var(--e, var(--zacht)) var(--w, 0ms), color 300ms var(--zacht) var(--w, 0ms), background-color 300ms var(--zacht) var(--w, 0ms); }
html.beweeg .toneel--1530[data-stap="0"] .s-signaal .s-label.na1,
html.beweeg .toneel--1530:is([data-stap="0"], [data-stap="1"]) .s-signaal .s-label.na2,
html.beweeg .toneel--1530:is([data-stap="0"], [data-stap="1"]) .s-signaal .draad.na2 { opacity: 1; transform: none; }
html.beweeg .toneel--1530[data-stap="0"] .s-signaal .s-label.na1,
html.beweeg .toneel--1530:is([data-stap="0"], [data-stap="1"]) .s-signaal .s-label.na2,
html.beweeg .toneel--1530:is([data-stap="0"], [data-stap="1"]) .s-signaal .draad.na2 { color: transparent; background: color-mix(in srgb, var(--s-label) 70%, transparent); }
html.beweeg .toneel--1530[data-stap="0"] .s-signaal .s-label.na1 *,
html.beweeg .toneel--1530:is([data-stap="0"], [data-stap="1"]) .s-signaal .s-label.na2 * { color: transparent; }
.toneel--1530 .s-signaal .draad { --dw: 200ms; }
.toneel--1530 .tijdelijk { opacity: 0; visibility: hidden; }
html.beweeg .toneel--1530[data-stap="3"] .s-zijpaneel { animation: venster 2300ms var(--zacht) 200ms both; }
html.beweeg .toneel--1530[data-stap="3"] .s-laag { animation: laag 2300ms var(--zacht) 200ms both; }
@keyframes venster { 0% { opacity: 0; transform: translateX(2em); visibility: visible; } 16%, 82% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: translateX(2em); visibility: hidden; } }
@keyframes laag { 0% { opacity: 0; visibility: visible; } 16%, 82% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.toneel--1530 .s-label.gepland { --van: scale(.9); --e: var(--veer); --d: 420ms; }
html.beweeg .toneel--1530[data-stap="3"] .s-label.gepland { --w: 2350ms; } /* alleen de vertraging bij het verschijnen */

/* 16:00 */
.toneel--bel > .podium > .toestel { --van: translateY(48px) scale(.97); --d: 1200ms; }
.toneel--bel .s-voortgang--export i { --van: scaleX(0); --d: 1400ms; --e: var(--stroom); }
.toneel--bel .s-bestand { --van: translateY(.5em); }
html.beweeg .toneel--bel:not([data-stap="3"]) .vink { stroke-dashoffset: 24; transition: none; }
.toneel--bel tr.na3 { --van: translateY(.6em); --w: calc(300ms + var(--i, 0) * 120ms); }
.toneel--bel tr .draad { --dw: calc(500ms + var(--i, 0) * 120ms); }
.toneel--bel tr.na3:nth-child(2) .draad { --dw: 860ms; }
.toneel--bel tr.na3:nth-child(4) .draad { --dw: 500ms; }

/* ============================================================ bel en avond */
.bel { padding-block: var(--sectie) 48px; text-align: center; }
.bel-tekst { display: flex; flex-direction: column; align-items: center; }
.bel h2 { margin-top: 14px; }
.bel .intro { max-width: 40em; margin-top: 24px; }
.bel .toneel { margin-top: 64px; }
.bel .toestel--laptop { max-width: 960px; }
.avond { padding-block: var(--sectie) 0; text-align: center; } /* hetzelfde ritme als de andere secties */
.avond h2 { margin-top: 14px; }
.avond-zin { margin-top: 16px; font-size: 15px; color: var(--grijs); }
.avond-beeld { margin: 48px auto 0; }
.avond-beeld .toestel--telefoon { width: min(300px, 100%); }
/* Alleen het bovenste deel van de telefoon, met een zachte uitloop: rust, geen half leeg scherm */
/* Het beeld heeft een vaste hoogte en knipt af: zo eindigt het toestel precies op de sectierand, met een zachte
   uitloop die al vóór de rand helemaal weg is. Het label staat erboven, op het papier, goed leesbaar. */
.avond-beeld { height: 500px; overflow: clip; -webkit-mask-image: linear-gradient(#000 62%, transparent 96%); mask-image: linear-gradient(#000 62%, transparent 96%); }
.avond-beeld figcaption { margin: 0 0 24px; }

/* ============================================================ secties na de dag */
.sectie { padding-block: var(--sectie); }
.sectie--zand { background: var(--zand); }
.sectie--midden { text-align: center; }
.sectie--midden .intro { margin-inline: auto; max-width: 40em; }
.sectie h2 + .intro, .sectie h2 + .kaarten { margin-top: 24px; }
.sectie h2 + .drie { margin-top: 56px; }
.sectie .intro { margin-top: 24px; }

/* Voor wie: tabs */
.tabs { margin-top: 48px; }
.tablijst { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tablijst::-webkit-scrollbar { display: none; }
.tablijst button { flex: none; scroll-snap-align: start; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--grijs); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color var(--t-kort) var(--zacht), color var(--t-kort) var(--zacht); }
.tablijst button:hover { color: var(--inkt); }
.tablijst button[aria-selected="true"] { background: var(--inkt); color: var(--papier); }
.tablijst button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--papier); }
.tabpaneel { display: grid; gap: 32px 64px; align-items: center; margin-top: 40px; border-radius: 22px; }
.tabpaneel + .tabpaneel { margin-top: 56px; }
html.js .tabpaneel + .tabpaneel { margin-top: 40px; }
@media (min-width: 640px) { .tabpaneel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tabrol { font-size: 13px; font-weight: 600; color: var(--grijs); margin-bottom: 8px; }
html.js .tabrol { display: none; } /* met tabs staat de rol al in de tab */
.tabtekst h3 { font-size: clamp(24px, 1.6vw + 14px, 32px); letter-spacing: -0.02em; }
.punten { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.punten li { position: relative; padding-left: 22px; color: var(--grijs); }
.punten li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pijllink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 16px; font-weight: 600; text-decoration: none; }
.pijllink::after { content: "→"; content: "→" / ""; transition: transform var(--t-kort) var(--zacht); }
.pijllink:hover::after { transform: translateX(3px); }
.fragment { max-width: 440px; width: 100%; justify-self: center; }
.fragment .scherm--los { background: var(--s-grond); }
html.beweeg .tabpaneel.wissel { animation: tabin 320ms var(--zacht); }
@media (forced-colors: active) {
  .tablijst button { border: 1px solid transparent; }
  .tablijst [aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
/* Focus door de link 'Sla de schooldag over': de kop krijgt de focus (schermlezer), zonder rand */
[tabindex="-1"]:focus { outline: none; }
@keyframes tabin { from { opacity: 0; transform: translateY(8px); } }

/* Waarom: kaarten met mini-demo */
.kaarten { display: grid; gap: 20px; margin-top: 48px; }
@media (min-width: 640px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .kaarten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kaarten > .kaart { grid-column: span 2; }
  .kaarten > .kaart:nth-child(4) { grid-column: 2 / span 2; }
  .kaarten > .kaart:nth-child(5) { grid-column: 4 / span 2; }
}
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kaart p:not(.demo-onder):not(.ring-onder):not(.kaart-echt) { color: var(--grijs); }
.kaart-echt { position: relative; padding-left: 22px; font-size: 14px; font-weight: 600; color: var(--inkt); }
.kaart-echt::before { content: ""; position: absolute; left: 0; top: calc((1.6em - 14px) / 2); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.kaart-echt::after { content: ""; position: absolute; left: 4.5px; top: calc((1.6em - 14px) / 2 + 3px); width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.kaart h3 { margin-top: 8px; }
.kaarten .kaart > .demo, .kaarten .kaart > .demo-onder { order: -1; }
.demo { height: 96px; display: flex; align-items: center; justify-content: center; position: relative; font-size: 14px; }
.demo-onder, .ring-onder { font-size: 13px; color: var(--grijs); text-align: center; }
.nog { display: flex; align-items: center; gap: 8px; margin: 28px auto 0; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--accent-tekst); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.nog svg { width: 16px; height: 16px; }
.nog:hover { background: var(--accent-zacht); }
.d-cijfers { display: grid; grid-template-columns: repeat(5, 34px); grid-auto-rows: 34px; gap: 6px; }
.d-cijfers > span { position: relative; display: grid; place-items: center; border-radius: 9px; background: var(--vlak); border: 1px solid var(--lijn); font-weight: 600; font-size: 13px; color: var(--inkt); font-variant-numeric: tabular-nums; }
.d-cijfers > span > i { position: absolute; inset: -1px; border-radius: 9px; z-index: -0; }
.d-cijfers > span { isolation: isolate; }
.d-cijfers > span > i { z-index: -1; }
.d-cijfers > span:nth-child(5n+1) > i { background: #dfe3ff; } .d-cijfers > span:nth-child(5n+2) > i { background: #d6f0e4; }
.d-cijfers > span:nth-child(5n+3) > i { background: #ffe6cc; } .d-cijfers > span:nth-child(5n+4) > i { background: #ffd9e6; }
.d-cijfers > span:nth-child(5n) > i { background: #fff2b8; }
.d-cijfers > span > i { --weg: none; --w: calc(var(--i, 0) * 60ms); --d: 400ms; }
.d-cijfers > span:nth-child(1) > i { --w: 0ms; } .d-cijfers > span:nth-child(2) > i { --w: 60ms; } .d-cijfers > span:nth-child(3) > i { --w: 120ms; }
.d-cijfers > span:nth-child(4) > i { --w: 180ms; } .d-cijfers > span:nth-child(5) > i { --w: 240ms; } .d-cijfers > span:nth-child(6) > i { --w: 300ms; }
.d-cijfers > span:nth-child(7) > i { --w: 360ms; } .d-cijfers > span:nth-child(8) > i { --w: 420ms; } .d-cijfers > span:nth-child(9) > i { --w: 480ms; }
.d-cijfers > span:nth-child(10) > i { --w: 540ms; }
/* De onvoldoende heeft vanaf het begin zijn rode rand en tekst: alleen de kleurtjes eromheen verdwijnen */
.d-cijfers .d-rood { color: var(--rood); border-color: color-mix(in srgb, var(--rood) 45%, var(--lijn)); }
@media (prefers-color-scheme: dark) {
  /* In donker een donkere tint met lichte tekst, anders staat wit op lichtgeel */
  .d-cijfers > span:nth-child(5n+1) > i { background: color-mix(in srgb, #8f9cff 26%, var(--vlak)); }
  .d-cijfers > span:nth-child(5n+2) > i { background: color-mix(in srgb, #5fcf9f 22%, var(--vlak)); }
  .d-cijfers > span:nth-child(5n+3) > i { background: color-mix(in srgb, #ffb066 22%, var(--vlak)); }
  .d-cijfers > span:nth-child(5n+4) > i { background: color-mix(in srgb, #ff7aa8 20%, var(--vlak)); }
  .d-cijfers > span:nth-child(5n) > i { background: color-mix(in srgb, #ffd84d 18%, var(--vlak)); }
}
.d-onv { grid-column: 4; grid-row: 3; text-align: center; font-size: 11px; font-weight: 600; color: var(--rood); line-height: 1; margin-top: -2px; --w: 800ms; --d: 240ms; --van: translateY(-4px); white-space: nowrap; justify-self: center; }
.d-cijfers { grid-template-rows: 34px 34px 12px; }
.d-rijen { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 260px; }
.d-rijen > span { display: flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 10px; background: var(--zand); font-size: 13px; font-weight: 600; transition: background-color 240ms var(--zacht); }
.d-rijen .s-nieuw { --s-accent-tekst: var(--stip); width: 8px; height: 8px; margin-right: 10px; --weg: scale(0); --van: scale(0); --d: 240ms; }
.d-rijen .d-r1 .s-nieuw { --w: 240ms; }
.d-rijen .d-r2 .s-nieuw { --w: 1080ms; }
.d-rijen .d-geen { visibility: hidden; }
html.beweeg .demo--stip[data-stap="1"] .d-r1 { animation: flits 480ms var(--zacht); }
html.beweeg .demo--stip[data-stap="1"] .d-r2 { animation: flits 480ms var(--zacht) 840ms; }
@keyframes flits { 0%, 50% { background-color: var(--accent-zacht); } }
.demo--antwoord { flex-direction: column; gap: 6px; }
.d-groot { font-size: 40px; line-height: 1; letter-spacing: -0.03em; --van: scale(.85); --d: 600ms; --e: var(--veer); }
.d-zin { font-size: 14px; color: var(--grijs); }
.demo--knop { gap: 6px; }
.d-knop { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color 480ms var(--zacht), color 480ms var(--zacht), border-color 480ms var(--zacht); }
.d-hoofd { background: var(--accent); color: #fff; border-color: transparent; }
html.beweeg .demo--knop[data-stap="0"] .d-hoofd { background: var(--vlak); color: var(--inkt); border-color: var(--lijn); }
.demo--knop .tik { --s-accent: var(--accent); }
.d-thema { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 16px; min-width: 210px; background: var(--vlak); color: var(--inkt); border: 1px solid var(--lijn); box-shadow: var(--schaduw-kaart); transition: background-color 1200ms var(--zacht), color 1200ms var(--zacht), border-color 1200ms var(--zacht); }
.d-thema small { font-size: 12px; color: var(--grijs); transition: color 1200ms var(--zacht); }
.d-thema b { font-size: 18px; }
.d-thema span { font-size: 13px; display: flex; align-items: center; }
/* Begin: het omgekeerde thema van de bezoeker; eind: zijn eigen thema */
html.beweeg .demo--thema[data-stap="0"] .d-thema { background: #141b2b; color: #eef1f6; border-color: #252e42; }
html.beweeg .demo--thema[data-stap="0"] .d-thema small { color: #a3acbb; }
@media (prefers-color-scheme: dark) {
  html.beweeg .demo--thema[data-stap="0"] .d-thema { background: #ffffff; color: #0e1424; border-color: #e6e1d9; }
  html.beweeg .demo--thema[data-stap="0"] .d-thema small { color: #565e6c; }
}

/* De regels: ring en koppelingen */
.regels-raster { display: grid; gap: 20px; margin-top: 48px; }
@media (min-width: 960px) { .regels-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kaart--regel > .regel-beeld, .kaart--regel > .ring-onder { order: -1; }
.regel-beeld { display: grid; place-items: center; min-height: 196px; }
.regel-beeld .mini { width: 100%; }
.kaart--regel .ring-onder { text-align: left; margin-bottom: 8px; }
.ring { position: relative; width: 140px; height: 140px; }
.ring svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring-baan { stroke: var(--lijn); }
.ring-vul { stroke: var(--draad); stroke-linecap: round; stroke-dasharray: 16; stroke-dashoffset: 5; transition: stroke-dashoffset 1200ms cubic-bezier(.22, 1, .36, 1); }
html.beweeg .ring[data-stap="0"] .ring-vul { stroke-dashoffset: 16; opacity: 1; transform: none; }
.ring .ring-vul.na1 { --van: none; }
.ring-getal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-getal b { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ring-getal small { font-size: 13px; color: var(--grijs); margin-top: 4px; }
.koppelingen { margin-top: 64px; max-width: 760px; }
.koppelingen ul { list-style: none; margin-top: 16px; border-top: 1px solid var(--lijn); }
.koppelingen li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--lijn); }
.koppelingen strong { font-size: 17px; font-weight: 600; }
.status-label { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--vlak); border: 1px solid var(--lijn); font-size: 13px; font-weight: 600; color: var(--inkt); }
.status-label svg { width: 12px; height: 12px; color: var(--grijs); }
.koppelingen .sectie-noot { margin-top: 16px; }

/* Privacy en keuze: drie kolommen */
.drie { display: grid; gap: 32px 48px; margin-top: 48px; }
@media (min-width: 960px) { .drie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.drie p { color: var(--grijs); margin-top: 8px; }
#privacy .sectie-noot { margin-top: 48px; }
/* Privacy: drie gelijke kolommen, elk met één klein voorbeeld van dezelfde hoogte en dezelfde bovenkant */
.priv-beeld { height: 44px; display: flex; align-items: center; margin-bottom: 20px; }
.priv-chip { display: inline-flex; align-items: center; gap: 10px; height: 44px; max-width: 100%; padding: 0 16px; border-radius: 14px; background: var(--vlak); border: 1px solid var(--lijn); box-shadow: var(--schaduw-kaart); font-size: 14px; white-space: nowrap; overflow: hidden; }
.priv-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.priv-chip span { color: var(--grijs); overflow: hidden; text-overflow: ellipsis; }
.priv-chip svg { width: 18px; height: 18px; color: var(--grijs); flex: none; }
.drie--lijn { text-align: left; margin-top: 64px; }
.drie--lijn > div { position: relative; padding-top: 24px; }
.drie--lijn > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--grijs); opacity: .35; transform-origin: left; }
@supports (animation-timeline: view()) {
  html.beweeg .drie--lijn > div::before { animation: lijn linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
}
@keyframes lijn { from { transform: scaleX(0); } }

/* Hoe ver: tijdlijn en bouwstand */
.stand-raster { display: grid; gap: 56px; margin-top: 56px; }
@media (min-width: 960px) { .stand-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: start; } }
.tijdlijn { list-style: none; }
.tijdlijn li { position: relative; padding: 0 0 36px 40px; }
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--lijn); background: var(--papier); box-sizing: border-box; z-index: 1; }
.tijdlijn li::after { content: ""; position: absolute; left: 5px; top: 20px; bottom: -2px; width: 2px; border-radius: 2px; background: var(--lijn); }
.tijdlijn li:last-child::after { display: none; }
.tijdlijn li.gedaan::before { background: var(--draad); border-color: var(--draad); }
.tijdlijn li.gedaan::after { background: var(--draad); transform-origin: top; }
.tijdlijn li.nu::before { background: var(--draad); border-color: var(--draad); box-shadow: 0 0 0 4px var(--accent-zacht); }
@supports (animation-timeline: view()) {
  html.beweeg .tijdlijn li.gedaan::after { animation: vul-y linear both; animation-timeline: view(); animation-range: entry 60% cover 50%; }
}
@keyframes vul-y { from { transform: scaleY(0); } }
.tl-wanneer { font-size: 13px; font-weight: 600; color: var(--grijs); line-height: 1.4; }
.nu-pil { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent-zacht); color: var(--accent-tekst); }
.tijdlijn h3 { margin-top: 4px; }
.tijdlijn p:not(.tl-wanneer) { color: var(--grijs); margin-top: 4px; }
.bouwstand-kop { font-size: 17px; }
.bouwstand { display: grid; gap: 28px; margin-top: 20px; }
.bouwgroep-kop { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--grijs); letter-spacing: .01em; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); }
.bouwgroep ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bouwgroep li { font-size: 15px; line-height: 1.4; }
.bouwgroep li small { margin-left: 6px; font-size: 13px; color: var(--grijs); }
.bouwstand svg { width: 14px; height: 14px; flex: none; }
.bs-staat { color: var(--accent-tekst); }
.bs-half, .bs-open { color: var(--grijs); }

/* Vragen */
.vragen { margin-top: 40px; border-top: 1px solid var(--lijn); max-width: 860px; }
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 4px; font-size: 18px; font-weight: 600; border-radius: 14px; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--grijs); border-bottom: 2px solid var(--grijs); transform: translateY(-3px) rotate(45deg); transition: transform var(--t-kort) var(--zacht); }
.vragen details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.vragen details p { padding: 0 4px 22px; color: var(--grijs); max-width: 40em; }
html.beweeg .vragen details[open] p { animation: open 240ms var(--zacht); }
@keyframes open { from { opacity: 0; } }

/* Kennismaken: het donkere vlak (in beide thema's) */
.contact {
  position: relative; isolation: isolate; border-radius: 32px; padding: clamp(48px, 8vw, 112px); color: #eef1f6; text-align: center;
  display: flex; flex-direction: column; align-items: center; view-timeline: --contact;
}
/* Het vlak zelf is een laag eronder: die groeit bij het binnenscrollen (alleen transform), zodat rand en hoeken
   altijd scherp blijven; een clip-path gaf een trapje van een pixel aan de onderkant */
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(60% 60% at 85% 0%, rgba(29,78,216,.24), transparent 70%), #0e1424;
}
@media (prefers-color-scheme: dark) {
  .contact::before { background: radial-gradient(60% 50% at 50% 0%, rgba(29,78,216,.22), transparent 70%), linear-gradient(180deg, #141b2b, #0f1626); box-shadow: inset 0 0 0 1px #2a3142, 0 40px 120px -40px rgba(29,78,216,.35); }
}
.contact .eyebrow { color: #a9b1c0; }
.contact h2 { color: #fff; }
.zacht-donker { color: #a9b1c0; }
.contact .intro { color: rgba(238,241,246,.78); max-width: 34em; margin-top: 24px; }
.contact .knoppen { justify-content: center; margin-top: 40px; }
.contact .knop-hoofd { background: #1d4ed8; color: #fff; }
.knop-donker { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.knop-donker:hover { border-color: rgba(255,255,255,.6); }
.contact :focus-visible { outline-color: #fff; }
.contact-klein { font-size: 15px; color: rgba(238,241,246,.78); margin-top: 16px; max-width: 34em; }
.contact-klein:first-of-type { margin-top: 32px; }
@supports (animation-timeline: view()) {
  html.beweeg .contact::before { animation: contactin linear both; animation-timeline: --contact; animation-range: entry 0% cover 30%; }
}
@keyframes contactin { from { transform: scale(.94, .9); } to { transform: none; } }

/* Voet */
.voet { padding: 56px 0 64px; border-top: 1px solid var(--lijn); }
.voet-boven { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.voet .merk { font-size: 17px; }
.voet .merk svg { width: 24px; height: 24px; }
.voet-regel { color: var(--grijs); font-size: 15px; }
.voet ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; }
/* De voet is de rustigste plek: gedempte links, alleen het mailadres in accent */
.voet ul a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--grijs); }
.voet ul a[href^="mailto:"] { color: var(--accent-tekst); }
.voet ul a:is(:hover, :focus-visible) { color: var(--inkt); text-decoration: underline; }
.voet-klein { margin-top: 20px; font-size: 13px; color: var(--grijs); max-width: 60em; }

/* Kleine levende schermpjes in de kaarten na de dag (PTA, onderwijstijd, logboek, export): statisch in de HTML */
.mini { background: var(--s-grond); color: var(--s-tekst); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; border: 1px solid var(--lijn); }
.mini-kop { font-weight: 700; font-size: 14px; }
.mini-rijen { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mini-rijen li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; background: var(--s-paneel); border-radius: 10px; padding: 7px 10px; box-shadow: var(--s-schaduw); font-variant-numeric: tabular-nums; }
.mini-rijen li > :first-child { font-weight: 600; min-width: 0; }
.mini-rijen li > :last-child { color: var(--s-grijs); text-align: right; }
.mini-rijen b { font-weight: 600; }
.mini-rijen .mini-klaar { color: var(--s-accent-tekst); }
.mini-balk { display: block; height: 8px; border-radius: 999px; background: var(--s-label); overflow: hidden; }
.mini-balk i { display: block; height: 100%; width: 93%; border-radius: inherit; background: var(--s-accent); transform-origin: left; }
@supports (animation-timeline: view()) {
  html.beweeg .mini-balk i { animation: balkvul linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
}
@keyframes balkvul { from { transform: scaleX(0); } }
.mini-zin { color: var(--s-grijs); font-size: 14px; }
.mini-zin b { color: var(--s-tekst); font-size: 22px; letter-spacing: -.02em; margin-right: 4px; }
.mini--log { margin-top: 18px; max-width: 380px; }
.mini--log .mini-rijen li > :first-child { font-weight: 400; }
.mini--log .mini-rijen li b { color: var(--s-grijs); margin-right: 6px; }
.mini-voet { font-size: 13px; color: var(--grijs); }
.keuze-bestand { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; padding: 14px 18px 14px 14px; border-radius: 16px; background: var(--vlak); border: 1px solid var(--lijn); box-shadow: var(--schaduw-kaart); text-align: left; max-width: 100%; }
.keuze-bestand svg { width: 28px; height: 28px; color: var(--grijs); flex: none; }
.keuze-bestand span { display: flex; flex-direction: column; min-width: 0; }
.keuze-bestand b { font-size: 15px; overflow-wrap: anywhere; }
.keuze-bestand small { font-size: 13px; color: var(--grijs); }
.bouwstand-noot { margin-top: 20px; }

/* ============================================================ opkomst bij in beeld komen */
@supports (animation-timeline: view()) {
  html.beweeg .opkomst { animation: opkomst linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 5%) entry calc(45% + var(--i, 0) * 5%); }
}
@keyframes opkomst { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Zonder scroll-tijdlijnen: site.js zet .io-opkomst op html en .zichtbaar op elk element */
html.beweeg.io-opkomst .opkomst { transition: opacity 720ms var(--zacht), transform 720ms var(--zacht); transition-delay: calc(var(--i, 0) * 80ms); }
html.beweeg.io-opkomst .opkomst:not(.zichtbaar) { opacity: 0; transform: translateY(24px); }

/* ============================================================ oude klassen voor privacy.html en 404.html */
.tekst { max-width: 40em; padding-block: clamp(48px, 8vw, 96px); }
.tekst h1 { font-size: clamp(36px, 4vw + 16px, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.tekst h2 { font-size: 24px; letter-spacing: -0.015em; margin-top: 40px; }
.tekst p, .tekst ul { margin-top: 14px; }
.tekst ul { padding-left: 1.2em; }
.tekst li + li { margin-top: 6px; }
.tekst .intro { margin-top: 20px; }
.tekst .knoppen { margin-top: 32px; }
.klein { font-size: 15px; color: var(--grijs); }
.status { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
main.wrap .tekst + * { margin-top: 0; }

/* ============================================================ breekpunten */
@media (max-width: 959px) {
  :root { --kop-h: 56px; --balk-h: 48px; }
  html { scroll-padding-top: 116px; }
  .dagbalk-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .dagbalk-datum { display: none; }
  .klok { font-size: 17px; margin: 0; }
  .klok-vast { font-size: 13px; }
  .m-stip { width: 8px; height: 8px; }
  /* vaste breedte, zodat de baan (en dus de plek van de loper) niet meeschuift met de lengte van het label */
  .dagbalk-nu { display: block; width: 6.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 13px; font-weight: 600; color: var(--grijs); }
  html:not(.js) .dagbalk-nu { display: none; }
  .dagbalk-rechts { position: absolute; }
  .kop nav li:last-child { margin-left: 4px; }
  .taal { margin-left: 0; }
}
@media (max-width: 639px) {
  /* Kaartvorm: een laptopscherm wordt een leesbare uitsnede met alleen de kernpanelen, op 14 px */
  .toestel--laptop .toestel-rand { background: var(--s-grond); padding: 0; border-radius: 22px; container-type: normal; box-shadow: var(--schaduw-toestel), 0 0 0 1px var(--lijn); }
  .toestel--laptop .toestel-voet { display: none; }
  .scherm--laptop { aspect-ratio: auto; font-size: 14px; border-radius: 22px; padding: 16px; gap: 12px; }
  .scherm--laptop > :not(.kern):not(.s-grid):not(.s-stapel):not(.s-balk):not(.s-laag):not(.s-zijpaneel):not(.s-schoolregel) { display: none; }
  .scherm--laptop .s-grid > :not(.kern), .scherm--laptop .s-view--les > :not(.kern) { display: none; }
  .scherm--laptop .s-grid, .scherm--laptop .s-view--les { display: flex; flex-direction: column; gap: 12px; }
  .scherm--laptop .s-menu, .scherm--laptop .s-avatar { display: none; }
  .scherm--laptop .s-paneel { padding: 16px; }
  .s-cijferkop { flex-direction: column; align-items: flex-start; }
  .s-lesbalk { flex-wrap: wrap; border-radius: 18px; padding: 12px 14px; }
  .s-lesbalk .s-knop, .s-lesbalk .s-voortgang { display: none; }
  .s-lesbalk .s-meta { white-space: normal; }
  .s-signaal { flex-direction: column; align-items: flex-start; }
  .s-signaal .s-knoppen { flex-wrap: wrap; }
  .s-label { white-space: normal; }
  .s-zijpaneel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; }
  .s-tabel { font-size: 13px; }
  .scherm .alleen-groot { display: none; }
  .s-tabel td:first-child { white-space: nowrap; }
  .s-tabel td small { display: block; margin: 0; font-size: 12px; }
  .s-tabel td .draad { margin: 2px 0 0 .3em; }
  .s-tabel--log td:nth-child(2) { white-space: normal; }
  .s-view--vandaag .s-groot { padding: 16px; }
  .scherm--laptop .s-view--vandaag .s-dag { display: none; }
  .s-view--vandaag .s-titel { font-size: 28px; }
  .knop { height: 48px; }
  .knop-klein { height: 40px; }
  .held-knoppen { flex-direction: column; align-items: stretch; width: 100%; }
  .contact { border-radius: 22px; padding: 48px 20px; }
  .kaart { padding: 24px; }
  /* Alle vijf rollen in beeld: de tabs lopen over twee regels door in plaats van onzichtbaar opzij te scrollen */
  .tablijst { display: flex; flex-wrap: wrap; overflow: visible; scroll-snap-type: none; border-radius: 24px; }
  .voet ul { margin-left: 0; }
}
@media (max-width: 419px) {
  /* Smalle telefoons (320–419 px): merk en hoofdknop passen naast elkaar, met de gewone marge rechts */
  .kop .wrap { gap: 8px; }
  .kop .merk { font-size: 18px; gap: 8px; }
  .kop nav li:last-child { margin-left: 0; }
  .kop .knop-klein { padding: 0 14px; }
}

/* ============================================================ minder beweging */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* Voet van privacy.html en 404.html: één regel met de links rechts */
.voet > .wrap:has(> ul) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; color: var(--grijs); font-size: 15px; }

/* Lange labels mogen in een smal paneel over twee regels */
.s-persoon .s-label, .s-signaal .s-label { white-space: normal; }
.tekst .terug { margin-top: 40px; }
/* Het staartje 'leerlingen en ouders zien het nog niet' neemt na het zichtbaar maken geen ruimte meer in */
.toneel--1330:is([data-stap="2"], [data-stap="3"]) .s-meta .tot2 { display: none; }
/* ... behalve in de kaartvorm tijdens het afspelen: daar blijft het (onzichtbaar) staan, anders springen knop en tabel
   bij de wissel omhoog. Een vaste min-height past niet, want het staartje is in het Nederlands één regel langer. */
@media (max-width: 639px) { html.beweeg .toneel--1330:is([data-stap="2"], [data-stap="3"]) .s-meta .tot2 { display: inline; } }