/*
 * diddle, de site. Licht en helder: papier als ondergrond, marine als inkt,
 * het blauw en cyaan van didiet.nl als actie en kleurvlak. Eén letter (Work Sans),
 * licht en groot voor koppen. Vlakken scheiden met een stap in toon, niet met lijnen.
 */

/* Work Sans (SIL Open Font License), zelf aangeboden: geen verzoek naar Google. */
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/work-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/assets/fonts/work-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --papier: #f4f8fb;
  --wolk: #e4eef6;
  --ijs: #d3f3f6;
  --wit: #ffffff;
  --inkt: #0b1b2b;
  --inkt-zacht: #3a5064;
  --nacht: #0b1b2b;
  --nacht-2: #14304a;
  --blauw: #1369a3;
  --blauw-helder: #2e94d8;
  --cyaan: #34d6e2;
  --mint: #7fdcb0;
  --zon: #f4c86a;
  --mist: #c6d6e4;

  --font: "Work Sans", system-ui, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-xl: clamp(2.75rem, 1.6rem + 5.4vw, 6.5rem);

  --m: clamp(16px, 2.6vw, 40px);
  --hoek: 14px;
  --sectie: clamp(120px, 14vw, 220px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--font); font-size: var(--step-body); line-height: 1.55; font-weight: 400; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--cyaan); color: var(--inkt); }
:focus-visible { outline: 3px solid var(--blauw-helder); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sla-over { position: absolute; left: var(--m); top: 12px; z-index: 50; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; background: var(--inkt); color: var(--wit); border-radius: 8px; }
.sla-over:focus { width: auto; height: auto; clip: auto; padding: 10px 16px; }

/* ---------- type ---------- */
h1, .kop-xl { font-weight: 300; font-size: var(--step-xl); line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.4rem + 3.8vw, 4.75rem); max-width: 16ch; }
.kop-l { font-weight: 300; font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; max-width: 18ch; }
.kop-m { font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; }
.lead, .held-zin { font-size: var(--step-lead); line-height: 1.4; letter-spacing: -0.01em; max-width: 34ch; }
b { font-weight: 600; }

/* ---------- knoppen en links ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--blauw); color: var(--wit); font-weight: 500; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.knop:hover { background: var(--nacht); transform: translateY(-2px); }
.knop:active { transform: translateY(0) scale(.98); }
.knop-klein { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.knop-licht { background: var(--wit); color: var(--inkt); }
.knop-licht:hover { background: var(--ijs); color: var(--inkt); }
.tekstlink { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--cyaan); transition: text-decoration-color .2s, text-underline-offset .2s; }
.tekstlink:hover { text-decoration-color: var(--blauw); text-underline-offset: 4px; }

/* ---------- kopbalk ---------- */
.kopbalk { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 14px var(--m); background: color-mix(in srgb, var(--papier) 92%, transparent); transition: background .3s; }
.kopbalk.gescrold { background: var(--papier); }
.woordlogo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.03em; text-decoration: none; margin-right: auto; }
.merkteken { width: 30px; height: 30px; fill: var(--inkt); }
.merkteken .laatste { fill: var(--cyaan); }
.menu { display: flex; gap: 26px; font-size: .9375rem; }
.menu a { position: relative; text-decoration: none; padding: 6px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cyaan); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.vlag { width: 22px; height: 15px; flex: none; border-radius: 3px; }
.taalkeuze { position: relative; font-size: .875rem; }
.taalkeuze summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--wolk); cursor: pointer; list-style: none; transition: background .2s; }
.taalkeuze summary::-webkit-details-marker { display: none; }
.taalkeuze summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 2px solid var(--inkt); border-bottom: 2px solid var(--inkt); transform: rotate(45deg); transition: transform .25s var(--ease); } /* taste-skill-ignore: pijltje van het uitklapmenu */
.taalkeuze[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.taalkeuze summary:hover { background: var(--ijs); }
.taalkeuze ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: grid; gap: 2px; min-width: 190px; padding: 8px; background: var(--wit); border-radius: var(--hoek); box-shadow: 0 20px 50px -18px rgba(11, 27, 43, .35); animation: openklap .25s var(--ease); } /* taste-skill-ignore: het menu zweeft boven de pagina */
.taalkeuze a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.taalkeuze a:hover { background: var(--papier); }
.taalkeuze a[aria-current] { background: var(--ijs); font-weight: 600; }
@keyframes openklap { from { opacity: 0; transform: translateY(-6px); } }
.mobiel-talen { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 8px 4px; }
.mobiel-talen a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--papier); font-size: .875rem; }
.mobiel-talen a[aria-current] { background: var(--ijs); font-weight: 600; }
.menuknop { display: none; border: 0; background: var(--wolk); border-radius: 999px; padding: 10px 18px; font-size: .9375rem; cursor: pointer; }
.mobielmenu { position: fixed; inset: 64px 12px auto; z-index: 29; display: grid; gap: 4px; padding: 16px; background: var(--wit); border-radius: var(--hoek); box-shadow: 0 20px 60px -20px rgba(11, 27, 43, .35); } /* taste-skill-ignore: het menu zweeft boven de pagina */
.mobielmenu a { padding: 12px 8px; font-size: 1.125rem; text-decoration: none; }
.mobielmenu .knop { margin-top: 8px; }
.mobielmenu[hidden] { display: none; }

/* ---------- de week (een stuk van de app) ---------- */
.wk { display: grid; grid-template-rows: auto 1fr; height: 100%; padding: 20px; background: var(--wit); border-radius: var(--hoek); font-size: 13px; letter-spacing: 0; color: var(--inkt); }
.wk-kop { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 12px; }
.wk-kop b { font-size: 15px; font-weight: 600; }
.wk-kop span { color: var(--inkt-zacht); }
.wk-druk { margin-left: auto; }
.wk-raster { display: grid; grid-template-columns: 38px repeat(5, minmax(0, 1fr)); gap: 6px; min-height: 0; }
.wk-uren { display: grid; grid-template-rows: 24px 1fr; color: var(--inkt-zacht); font-size: 12px; }
.wk-schaal { position: relative; }
.wk-schaal span { position: absolute; top: calc(var(--s) / 540 * 100%); right: 4px; line-height: 1; }
.wk-dag { display: grid; grid-template-rows: 24px 1fr; min-width: 0; }
.wk-dn { font-weight: 600; font-size: 13px; }
.wk-kol { position: relative; background: var(--papier); border-radius: 8px; }
.blk { position: absolute; left: 3px; right: 3px; top: calc(var(--s) / 540 * 100%); height: calc(var(--d) / 540 * 100% - 3px); border-radius: 7px; padding: 5px 7px; font-size: 12.5px; line-height: 1.15; font-weight: 500; overflow: hidden; }
.k-a { background: #1a72b2; color: var(--wit); fill: #1a72b2; }
.k-b { background: var(--cyaan); color: var(--inkt); fill: var(--cyaan); }
.k-c { background: var(--mint); color: var(--inkt); fill: var(--mint); }
.k-d { background: var(--zon); color: var(--inkt); fill: var(--zon); }
.k-e { background: var(--mist); color: var(--inkt); fill: var(--mist); }
.afs { background: var(--nacht); color: var(--wit); font-weight: 400; }
.vrij { background: var(--wolk); color: var(--inkt-zacht); font-weight: 400; }
.blk.nieuw { box-shadow: 0 0 0 3px var(--inkt); animation: plof .5s var(--ease); } /* taste-skill-ignore: markering van het nieuwe blok in de app */
@keyframes plof { from { transform: scale(.9); opacity: 0; } }
.stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; flex: none; }

/* ---------- hero: de week staat stil, de tekst scrolt ---------- */
.podiumbaan { position: relative; display: grid; grid-template-columns: 47fr 53fr; gap: 0 clamp(32px, 5vw, 88px); padding: 8px var(--m) 0; }
.podium { position: sticky; top: 76px; height: calc(100svh - 96px); min-height: 520px; padding: clamp(16px, 2vw, 28px); background: var(--ijs); border-radius: calc(var(--hoek) + 8px); align-self: start; overflow: hidden; }
.leeskolom { padding: clamp(48px, 9vh, 120px) 0 clamp(200px, 22vw, 320px); max-width: 720px; }
.held { min-height: calc(100svh - 260px); display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.held-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.intro { display: grid; gap: 22px; margin-top: clamp(96px, 12vw, 180px); max-width: 46ch; }
.intro .kop-m { margin-bottom: 8px; }
.intro p b { font-weight: 600; }
.woordmerk { position: absolute; left: calc(var(--m) + 47% - 9vw); right: var(--m); bottom: 8px; z-index: 2; margin: 0; font-weight: 300; font-size: clamp(120px, 15vw, 248px); line-height: .8; letter-spacing: -0.06em; text-align: right; color: var(--inkt); pointer-events: none; transform-origin: right bottom; }

/* ---------- loop: taken die voorbijkomen ---------- */
.loop { display: grid; gap: 12px; margin: clamp(56px, 7vw, 96px) var(--m) 0; overflow: hidden; border-radius: var(--hoek); }
.loop-rij { display: flex; gap: 12px; width: max-content; animation: loop 60s linear infinite; }
.loop-rij.omgekeerd { animation-direction: reverse; animation-duration: 72s; }
.loop:hover .loop-rij { animation-play-state: paused; }
.taakkaart { display: grid; grid-template-columns: auto 1fr; gap: 2px 0; padding: 16px 20px; min-width: 260px; background: var(--wit); border-radius: var(--hoek); font-size: .9375rem; }
.taakkaart b { font-weight: 500; }
.taakkaart span { grid-column: 2; color: var(--inkt-zacht); font-size: .875rem; }
.taakkaart .stip { margin-top: 7px; }
@keyframes loop { to { transform: translateX(-50%); } }

/* ---------- secties ---------- */
main > section, .functies, .probeer { margin-top: var(--sectie); }

/* ---------- hoe het werkt: één schuif drijft twee velden ---------- */
.stappen { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-left: var(--m); margin-right: var(--m); min-height: 88svh; border-radius: calc(var(--hoek) + 8px); overflow: hidden; }
.stappen-woord { position: relative; background: var(--wolk); padding: clamp(32px, 5vw, 72px); padding-bottom: 180px; }
.stappen-woord .kop-l { margin-bottom: 40px; }
.clausule { position: absolute; left: clamp(32px, 5vw, 72px); right: clamp(32px, 5vw, 72px); top: clamp(170px, 18vw, 260px); font-weight: 300; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .35s, transform .45s var(--ease), visibility 0s .35s; }
.stappen-beeld { position: relative; background: var(--ijs); display: grid; place-items: center; padding: 40px 40px 160px; }
.stappen-beeld > .kaart { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(20px) scale(.98); transition: opacity .35s, transform .5s var(--ease), visibility 0s .35s; }
.stappen[data-stap="0"] [data-voor="0"], .stappen[data-stap="1"] [data-voor="1"], .stappen[data-stap="2"] [data-voor="2"], .stappen[data-stap="3"] [data-voor="3"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stappen-schuif { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 14px; }
.schuif-spoor { position: relative; display: grid; align-items: center; }
.schuif-spoor::before, .schuif-spoor::after { content: ""; position: absolute; left: 0; height: 8px; border-radius: 4px; pointer-events: none; }
.schuif-spoor::before { right: 0; background: var(--wit); }
.schuif-spoor::after { width: var(--vol, 0%); background: var(--inkt); transition: width .3s var(--ease); }
.stappen-schuif input { position: relative; z-index: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.stappen-schuif input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 8px; background: var(--blauw); border: 0; cursor: grab; transition: transform .2s var(--ease); }
.stappen-schuif input::-moz-range-thumb { width: 32px; height: 32px; border-radius: 8px; background: var(--blauw); border: 0; cursor: grab; }
.stappen-schuif input:active::-webkit-slider-thumb { transform: scale(1.12); }
.stappen-namen { display: grid; grid-template-columns: repeat(4, 1fr); }
.stappen-namen button { border: 0; background: none; padding: 4px 0; text-align: left; font-size: 1rem; color: var(--inkt-zacht); cursor: pointer; }
.stappen-namen button[aria-current] { color: var(--inkt); font-weight: 600; }

/* de kaart: een taak in de app */
.kaart { width: min(440px, 100%); background: var(--wit); border-radius: var(--hoek); padding: 26px 28px; font-size: 15px; display: grid; gap: 16px; }
.kaart-invoer { display: flex; align-items: center; gap: 6px; padding: 14px 16px; background: var(--papier); border-radius: 10px; font-size: 16px; }
.cursor { width: 2px; height: 20px; background: var(--blauw); animation: knipper 1s steps(2) infinite; }
.mic { display: inline-flex; gap: 3px; align-items: center; margin-left: auto; height: 20px; }
.mic i { width: 3px; border-radius: 2px; background: var(--blauw-helder); animation: golf 1.1s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .15s); height: 8px; }
.mic i:nth-child(2) { --n: 1; } .mic i:nth-child(3) { --n: 2; }
@keyframes knipper { to { opacity: 0; } }
@keyframes golf { 50% { height: 20px; } }
.kaart-knop { justify-self: start; padding: 10px 18px; border-radius: 999px; background: var(--inkt); color: var(--wit); font-size: 14px; font-weight: 500; }
.kaart-titel { font-size: 18px; font-weight: 600; }
.kaart-feiten { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; }
.kaart-feiten dt { color: var(--inkt-zacht); }
.kaart-feiten dd { margin: 0; font-weight: 500; }
.kaart-blokken { display: grid; gap: 8px; }
.kaart-blokken li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; background: var(--ijs); border-radius: 10px; }
.kaart-blokken li:nth-child(even) { background: var(--wolk); }
.kaart-noot { color: var(--inkt-zacht); font-size: 14px; }
.kaart-klaar { font-size: 22px; font-weight: 300; letter-spacing: -0.02em; color: var(--blauw); }
.melding { width: min(420px, 100%); display: grid; gap: 6px; padding: 18px 20px; background: var(--wit); border-radius: 18px; font-size: 15px; box-shadow: 0 24px 60px -24px rgba(11, 27, 43, .35); } /* taste-skill-ignore: een melding zweeft boven het scherm */
.melding-app { font-size: 12px; color: var(--inkt-zacht); }
.melding p { color: var(--inkt-zacht); }

/* ---------- functies: blokken van verschillende maat ---------- */
.functies { padding: 0 var(--m); }
.functies > .kop-l { margin-bottom: clamp(40px, 5vw, 72px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.blok { grid-column: span 5; display: grid; align-content: space-between; gap: 32px; padding: clamp(24px, 3vw, 40px); border-radius: calc(var(--hoek) + 6px); min-height: 380px; transition: transform .45s var(--ease); }
.blok-breed { grid-column: span 7; }
.blok:hover { transform: translateY(-6px); }
.blok-wolk { background: var(--wolk); }
.blok-ijs { background: var(--ijs); }
.blok-wit { background: var(--wit); }
.blok-nacht { background: var(--nacht); color: var(--wit); }
.blok-tekst { display: grid; gap: 10px; max-width: 42ch; }
.blok-tekst p { color: var(--inkt-zacht); }
.blok-nacht .blok-tekst p { color: var(--mist); }
.frag { background: var(--wit); border-radius: var(--hoek); padding: 20px 22px; font-size: 14px; color: var(--inkt); }
.blok-wit .frag { background: var(--papier); }
.frag-noot { margin-top: 12px; color: var(--inkt-zacht); font-size: 13px; }
.frag-uren table { width: 100%; border-collapse: collapse; }
.frag-uren th { text-align: left; font-weight: 500; color: var(--inkt-zacht); font-size: 12.5px; padding: 0 8px 10px 0; }
.frag-uren td { padding: 9px 8px 9px 0; white-space: nowrap; }
.frag-uren tr.let td { color: var(--blauw); font-weight: 500; }
.meter { position: relative; display: flex; width: 120px; height: 10px; background: var(--wolk); border-radius: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); background: var(--inkt); transition: width 1.1s var(--ease); }
.meter i.gepland { background: var(--cyaan); }
.js .bento:not(.zichtbaar) .meter i, .js .helpt:not(.zichtbaar) .meter i { width: 0; }
.frag-terug ul { display: grid; gap: 8px; }
.frag-terug li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; background: var(--papier); border-radius: 10px; }
.frag-terug li span { color: var(--inkt-zacht); font-size: 13px; }
.frag-terug li em { grid-column: 1 / -1; font-style: normal; color: var(--blauw); font-size: 13px; }
.frag-terug li.feest em { color: var(--inkt-zacht); }
.frag-focus { display: grid; gap: 14px; }
.toestand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toestand span { margin-right: 4px; color: var(--inkt-zacht); }
.toestand button, .advies-knoppen button { border: 0; padding: 8px 14px; border-radius: 999px; background: var(--wolk); cursor: pointer; font-size: 13px; transition: background .2s; }
.toestand button.aan, .advies-knoppen .prim { background: var(--inkt); color: var(--wit); }
.advies { display: grid; gap: 6px; padding: 14px; background: var(--ijs); border-radius: 10px; }
.advies p { color: var(--inkt-zacht); }
.advies-knoppen { display: flex; gap: 8px; margin-top: 4px; }
.frag-kies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.keuze { display: grid; gap: 6px; align-content: start; text-align: left; padding: 16px; border: 0; background: var(--wit); border-radius: 12px; cursor: pointer; transition: background .2s, transform .3s var(--ease); }
.keuze span { font-size: 12.5px; color: var(--inkt-zacht); }
.keuze b { font-weight: 500; }
.keuze em { font-style: normal; font-size: 13px; color: var(--inkt-zacht); }
.keuze:hover { transform: translateY(-3px); }
.keuze.aan { background: var(--inkt); color: var(--wit); }
.keuze.aan span, .keuze.aan em { color: var(--mist); }
.frag-offerte { display: grid; gap: 10px; }
.fase { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.fase span { color: var(--inkt-zacht); }
.fase i { position: relative; grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--wolk); overflow: hidden; }
.fase i::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--van) * 1%); width: calc((var(--tot) - var(--van)) * 1%); border-radius: 5px; background: var(--blauw-helder); }
.frag-balans { display: grid; gap: 14px; }
.balans-score { display: flex; align-items: baseline; gap: 10px; }
.balans-score b { font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.balans-score span { color: var(--inkt-zacht); }
.balans-rij { display: grid; gap: 10px; }
.balans-rij li { display: grid; grid-template-columns: 7em 1fr auto; align-items: center; gap: 12px; }
.balans-rij i { height: 10px; border-radius: 5px; background: var(--blauw-helder); width: var(--w); }
.balans-rij i.sport { background: var(--mint); }
.balans-rij i.vrij { background: var(--cyaan); }
.balans-rij em { font-style: normal; color: var(--inkt-zacht); font-size: 13px; }

/* ---------- probeer: de demo op een donker vlak ---------- */
.probeer { background: var(--nacht); color: var(--wit); padding: clamp(72px, 9vw, 140px) var(--m); }
.probeer-kop { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 48px; }
.probeer-kop .lead { color: var(--mist); }
.paneel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.demo-week { min-height: 600px; height: 600px; }
.demo-geen { padding: 24px; color: var(--inkt); background: var(--wit); border-radius: var(--hoek); }
.demo-knoppen { display: grid; align-content: start; gap: 10px; padding: 22px; background: var(--nacht-2); border-radius: var(--hoek); font-size: 15px; }
.rij { display: grid; gap: 6px; }
.rij span { color: var(--mist); font-size: 13.5px; }
.rij input[type="text"], .rij select { width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--wit); color: var(--inkt); }
.schakel { grid-template-columns: 1fr auto; align-items: center; }
.schakel input { -webkit-appearance: none; appearance: none; width: 46px; height: 26px; border-radius: 13px; background: var(--inkt-zacht); position: relative; cursor: pointer; transition: background .2s; }
.schakel input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--wit); transition: transform .25s var(--ease); }
.schakel input:checked { background: var(--cyaan); }
.schakel input:checked::after { transform: translateX(20px); }
.demo-knoppen .knop { margin: 6px 0 8px; }
.demo-melding { min-height: 3em; color: var(--cyaan); font-size: 14px; }
.legenda { display: grid; gap: 6px; font-size: 13px; color: var(--mist); }
.legenda .stip.afs { box-shadow: inset 0 0 0 2px var(--mist); } /* taste-skill-ignore: stip voor een afspraak in de legenda */
.probeer-onder { margin-top: 28px; color: var(--mist); }
.probeer-onder a { color: var(--wit); }

/* ---------- voor wie: drie blokken met een tekening ---------- */
.voorwie { padding: 0 var(--m); }
.voorwie-kop { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.voorwie-blokken, .anderen-blokken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.anderen-blokken { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voorwie-blokken.groot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doel-zzp .t-vlak { fill: var(--ijs); }
.doelblok { display: grid; align-content: start; gap: 14px; padding: 18px 18px 30px; border-radius: calc(var(--hoek) + 6px); background: var(--wit); text-decoration: none; transition: transform .45s var(--ease), background .3s; }
.doelblok .tekening { border-radius: var(--hoek); margin-bottom: 10px; }
.doelblok h3, .doelblok p, .doelblok .tekstlink { margin: 0 8px; }
.doelblok p { color: var(--inkt-zacht); }
.doelblok .tekstlink { justify-self: start; }
a.doelblok:hover { transform: translateY(-8px); background: var(--ijs); }
.voorwie-blokken.groot .doelblok { padding-bottom: 36px; }

/* tekeningen */
.tekening { width: 100%; height: auto; }
.t-vlak { fill: var(--wolk); }
.doel-bureau .t-vlak { fill: var(--ijs); }
.t-wit { fill: var(--wit); }
.t-inkt { fill: var(--nacht); }
.t-zacht { fill: var(--mist); }
.t-spoor { fill: var(--papier); }
.t-raster rect { fill: var(--papier); }
.t-lijn, .t-damp { stroke: var(--inkt-zacht); stroke-width: 3; stroke-linecap: round; }
.t-damp { stroke: var(--mist); }
.beweeg-val rect { transform-box: fill-box; transform-origin: 50% 0; }
.js .zichtbaar .beweeg-val rect, .js .zichtbaar.beweeg-val rect { animation: valt .7s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * 80ms); }
.beweeg-golf rect { transform-box: fill-box; transform-origin: 50% 50%; animation: golfje 1.2s ease-in-out infinite; }
.beweeg-golf rect:nth-child(2) { animation-delay: .15s; } .beweeg-golf rect:nth-child(3) { animation-delay: .3s; } .beweeg-golf rect:nth-child(4) { animation-delay: .45s; }
.beweeg-damp { animation: damp 3s ease-in-out infinite; }
.beweeg-groei, .beweeg-staaf rect { transform-box: fill-box; }
.beweeg-groei { transform-origin: 0 50%; }
.beweeg-staaf rect { transform-origin: 50% 100%; }
.js .zichtbaar .beweeg-groei { animation: groei 1.1s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * 120ms); }
.js .zichtbaar .beweeg-staaf rect { animation: staaf .9s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * 90ms); }
.beweeg-stip rect { transform-box: fill-box; transform-origin: center; }
.js .zichtbaar .beweeg-stip rect { animation: plop .5s var(--ease) both; animation-delay: calc(.8s + var(--i, 0) * 160ms); }
.beweeg-cursor { animation: knipper 1s steps(2) infinite; }
@keyframes valt { from { opacity: 0; transform: translateY(-18px) scaleY(.6); } }
@keyframes golfje { 50% { transform: scaleY(1.8); } }
@keyframes damp { 50% { transform: translateY(-4px); opacity: .5; } }
@keyframes groei { from { transform: scaleX(0); } }
@keyframes staaf { from { transform: scaleY(0); } }
@keyframes plop { from { transform: scale(.6); opacity: 0; } }

/* ---------- vergelijk: tabbladen en gevulde banden ---------- */
.vergelijk { padding: 0 var(--m); }
.vergelijk-kop { margin-bottom: 40px; }
.vergelijk-bord { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.tabs { display: grid; gap: 6px; position: sticky; top: 90px; }
.tab { display: grid; gap: 2px; text-align: left; padding: 14px 18px; border: 0; border-radius: 12px; background: var(--wolk); cursor: pointer; transition: background .2s, transform .3s var(--ease); }
.tab span { color: var(--inkt-zacht); font-size: 13.5px; }
.tab:hover { transform: translateX(4px); }
.tab[aria-selected="true"] { background: var(--inkt); color: var(--wit); }
.tab[aria-selected="true"] span { color: var(--mist); }
.banden { display: grid; gap: 6px; }
.band { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 20px; background: var(--wit); border-radius: 12px; }
.band.kop-band { background: transparent; padding-top: 0; padding-bottom: 4px; font-weight: 600; }
.vraag { font-weight: 500; }
.antw { display: grid; gap: 2px; font-size: 15px; }
.antw b { font-weight: 600; }
.antw span { color: var(--inkt-zacht); font-size: 13.5px; }
.antw.ja b { color: var(--blauw); }
.antw.deels b { color: #8a6a12; }
.antw.nee b { color: var(--inkt-zacht); }
.kies-als { padding: 20px; background: var(--ijs); border-radius: 12px; }
.banden.wissel > * { animation: band .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes band { from { opacity: 0; transform: translateY(10px); } }
.voetnoot { margin-top: 20px; font-size: var(--step-small); color: var(--inkt-zacht); max-width: 70ch; }

/* ---------- tempo: de metronoom ---------- */
.tempo { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); padding: 0 var(--m); align-items: center; }
.tempo-foto { border-radius: calc(var(--hoek) + 8px); overflow: hidden; aspect-ratio: 4 / 5; background: var(--wolk); }
.tempo-foto video { width: 100%; height: 100%; object-fit: cover; }
.tempo-tekst { display: grid; gap: 28px; }
.tempo-regels { display: grid; gap: 8px; }
.tempo-regels li { padding: 18px 22px; background: var(--wolk); border-radius: 12px; }
.tempo-regels li:nth-child(2) { background: var(--ijs); }

/* ---------- vragen: antwoorden als leestekst ---------- */
.vragen { display: grid; grid-template-columns: 3fr 9fr; gap: 32px; padding: 0 var(--m); }
.vragen-tekst { columns: 2; column-gap: 56px; }
.vragen-tekst p { break-inside: avoid; margin-bottom: 22px; color: var(--inkt-zacht); }
.vragen-tekst b { color: var(--inkt); font-weight: 600; }

/* ---------- slot: de eerste stap, al open ---------- */
.slot { display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: end; min-height: 90svh; margin: var(--sectie) var(--m) 0; padding: clamp(40px, 6vw, 88px); background: var(--blauw); color: var(--wit); border-radius: calc(var(--hoek) + 8px); }
.slot-woord { display: grid; gap: 24px; align-self: end; }
.slot-woord .kop-xl { max-width: 12ch; }
.slot-woord p { max-width: 40ch; color: #d8ecf8; }
.slot-stappen { display: grid; gap: 6px; counter-reset: s; }
.slot-stappen li { color: #d8ecf8; }
.slot-stappen b { color: var(--wit); }
.dialoog { align-self: center; justify-self: end; width: min(440px, 100%); display: grid; gap: 18px; padding: 28px; background: var(--wit); color: var(--inkt); border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(5, 14, 25, .55); } /* taste-skill-ignore: een open dialoog van de app */
.dialoog-titel { font-size: 20px; font-weight: 600; }
.dialoog-veld { display: grid; gap: 6px; font-size: 14px; color: var(--inkt-zacht); }
.dialoog-veld input { min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--papier); color: var(--inkt); font-size: 16px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--papier); border-radius: 12px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: 10px; border-radius: 9px; font-size: 14px; transition: background .2s; }
.seg input:checked + span { background: var(--inkt); color: var(--wit); }
.seg input:focus-visible + span { outline: 3px solid var(--blauw-helder); }
.dialoog .knop { width: 100%; }

/* ---------- vervolgpagina's ---------- */
.subheld { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(32px, 6vw, 88px) var(--m) 0; }
.subheld-smal { grid-template-columns: 1fr; }
.subheld-tekst { display: grid; gap: 28px; }
.subheld h1 { max-width: 15ch; }
.subheld-beeld .tekening { border-radius: calc(var(--hoek) + 8px); }
.kruimelpad ol { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--step-small); color: var(--inkt-zacht); }
.kruimelpad li + li::before { content: "/"; margin-right: 14px; color: var(--mist); }
.kruimelpad a { text-decoration: none; }
.kruimelpad a:hover { text-decoration: underline; }

/* hoe het werkt: het beeld staat stil, de stappen scrollen */
.verhaal { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); padding: 0 var(--m); }
.verhaal-podium { position: sticky; top: 90px; height: calc(100svh - 120px); display: grid; place-items: center; background: var(--ijs); border-radius: calc(var(--hoek) + 8px); overflow: hidden; }
.verhaal-beeld { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; padding: 32px; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .4s, transform .55s var(--ease); }
.verhaal-beeld.aan { opacity: 1; transform: none; }
.verhaal-stappen { display: grid; }
.verhaal-stap { min-height: 80svh; display: grid; align-content: center; gap: 20px; max-width: 46ch; opacity: .35; transition: opacity .4s; }
.verhaal-stap.aan { opacity: 1; }
.verhaal-stap p { color: var(--inkt-zacht); }
.verhaal-mobiel { display: none; }

.regels, .situaties, .pijn, .helpt, .niet, .voorbeeldweek, .anderen { padding: 0 var(--m); }
.regels > .kop-l, .situaties > .kop-l, .pijn > .kop-l, .helpt > .kop-l, .niet > .kop-l { margin-bottom: clamp(32px, 4vw, 56px); }
.regel-blokken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.regelblok { display: grid; gap: 10px; align-content: start; min-height: 200px; padding: clamp(24px, 3vw, 36px); border-radius: calc(var(--hoek) + 6px); background: var(--wolk); }
.regelblok h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.regelblok p { color: var(--inkt-zacht); }
a.regelblok { text-decoration: none; transition: transform .4s var(--ease); }
a.regelblok:hover { transform: translateY(-6px); }
.regel-1, .regel-5 { background: var(--ijs); }
.regel-3 { background: var(--nacht); color: var(--wit); }
.regel-3 p { color: var(--mist); }
.niet-lijst { display: grid; gap: 8px; max-width: 900px; }
.niet-lijst li { padding: 22px 26px; background: var(--wit); border-radius: 12px; font-size: var(--step-lead); line-height: 1.35; }
.niet-lijst b { font-weight: 500; }

.pijn-blokken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pijnblok { display: grid; gap: 12px; align-content: start; min-height: 240px; padding: clamp(24px, 3vw, 36px); border-radius: calc(var(--hoek) + 6px); background: var(--wit); }
.pijnblok h3 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.15; }
.pijnblok p { color: var(--inkt-zacht); }
.pijn-1 { background: var(--nacht); color: var(--wit); }
.pijn-1 p { color: var(--mist); }

.helpt-rijen { display: grid; gap: 16px; }
.helptrij { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); background: var(--wolk); border-radius: calc(var(--hoek) + 8px); }
.helptrij.om { background: var(--ijs); }
.helptrij.om .helpt-tekst { order: 2; }
.helpt-tekst { display: grid; gap: 14px; max-width: 42ch; }
.helpt-tekst p { color: var(--inkt-zacht); }
.helpt-beeld { display: grid; justify-items: center; }
.helpt-beeld .frag { width: min(480px, 100%); }

.voorbeeldweek { display: grid; gap: 24px; }
.voorbeeldweek-podium { height: 560px; padding: clamp(16px, 2vw, 28px); background: var(--ijs); border-radius: calc(var(--hoek) + 8px); }

.slotband { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin: var(--sectie) var(--m) 0; padding: clamp(40px, 6vw, 88px); background: var(--blauw); color: var(--wit); border-radius: calc(var(--hoek) + 8px); min-height: 56svh; }
.slotband .kop-xl { max-width: 12ch; }
.slotband div { display: grid; gap: 24px; justify-items: start; }
.slotband p { color: #d8ecf8; max-width: 40ch; }

/* ---------- voet: de naam over de volle breedte ---------- */
.voet { padding: clamp(140px, 16vw, 240px) var(--m) 28px; }
.merkblok { width: 100%; height: auto; overflow: visible; }
.merkblok rect { fill: var(--wolk); }
.merkblok rect.laatste { fill: var(--cyaan); }
.merkblok text { font-family: var(--font); font-weight: 400; font-size: 112px; fill: var(--inkt); letter-spacing: -0.04em; }
.merkblok g { transform-box: fill-box; transform-origin: 50% 100%; }
.js .merkblok g { transform: scaleY(.15); transition: transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .merkblok.zichtbaar g { transform: none; }
.voet-regel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px 24px; align-items: baseline; margin-top: 36px; font-size: .9375rem; color: var(--inkt-zacht); }
.voet-regel nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.voet-regel nav a { color: var(--inkt); text-decoration: none; }
.voet-regel nav a:hover { text-decoration: underline; }
.voet-regel p:last-child { text-align: right; }
.voet-regel p:last-child a { margin-left: 12px; color: var(--inkt); }
.credits { margin-top: 20px; font-size: 13px; color: var(--inkt-zacht); max-width: 90ch; }

/* ---------- binnenkomen ---------- */
.js .opkomst > * { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .opkomst.zichtbaar > * { opacity: 1; transform: none; }
.js .podium .blk { animation: valt .7s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * 70ms); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .menu { gap: 18px; }

  .bento .blok, .bento .blok-breed { grid-column: span 6; }
  .paneel { grid-template-columns: 1fr; }
  .demo-week { min-height: 0; height: 560px; }
  .vragen { grid-template-columns: 1fr; }
}

/* ---------- telefoon ---------- */
@media (max-width: 820px) {
  .menu, .kopbalk > .knop, .kopbalk > .taalkeuze { display: none; }
  .menuknop { display: inline-flex; }
  .kopbalk { gap: 12px; }

  .podiumbaan { grid-template-columns: 1fr; padding: 4px 12px 0; }
  .podium { position: relative; top: 0; height: 58svh; min-height: 400px; }
  .podium .wk-dag:nth-child(n+5) { display: none; }
  .podium .wk-raster { grid-template-columns: 30px repeat(3, minmax(0, 1fr)); }
  .woordmerk { position: relative; left: auto; right: auto; bottom: auto; order: -1; margin: -3vw 0 0; text-align: left; font-size: 25vw; grid-row: 2; padding-left: 4px; }
  .leeskolom { grid-row: 3; padding: 32px 8px 0; }
  .held { min-height: 0; gap: 24px; }
  .intro { margin-top: 96px; }

  .stappen { grid-template-columns: 1fr; margin: var(--sectie) 12px 0; }
  .stappen-beeld { order: -1; min-height: 46svh; padding: 24px 16px 120px; }
  .stappen-schuif { position: absolute; top: calc(46svh - 96px); bottom: auto; left: 16px; right: 16px; }
  .stappen-schuif input::-webkit-slider-thumb { width: 40px; height: 40px; }
  .stappen-woord { padding: 32px 20px 40px; min-height: 340px; }
  .clausule { top: 120px; left: 20px; right: 20px; font-size: 1.375rem; }
  .stappen-namen { grid-template-columns: 1fr 1fr; gap: 4px; }

  .bento { grid-template-columns: 1fr; }
  .bento .blok, .bento .blok-breed { grid-column: auto; min-height: 0; }
  .frag-kies { grid-template-columns: 1fr; }
  .frag-uren td:nth-child(3), .frag-uren th:nth-child(3) { display: none; }

  .probeer-kop, .voorwie-kop { grid-template-columns: 1fr; }
  .demo-week .wk-raster { grid-template-columns: 26px repeat(5, minmax(0, 1fr)); gap: 3px; }
  .demo-week .blk { font-size: 0; padding: 0; }
  .demo-week .wk { padding: 12px; }

  .voorwie-blokken, .anderen-blokken, .regel-blokken, .pijn-blokken { grid-template-columns: 1fr; }
  .vergelijk-bord { grid-template-columns: 1fr; }
  .tabs { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab { padding: 12px; }
  .band { grid-template-columns: 1fr 1fr; }
  .band .vraag { grid-column: 1 / -1; }
  .band.kop-band span:first-child { display: none; }

  .tempo { grid-template-columns: 1fr; }
  .tempo-foto { aspect-ratio: 4 / 3; }
  .vragen-tekst { columns: 1; }
  .slot, .slotband { grid-template-columns: 1fr; margin-left: 12px; margin-right: 12px; padding: 32px 20px; min-height: 84svh; }
  .slot-woord .kop-xl { font-size: 13vw; }
  .dialoog { justify-self: stretch; }
  .dialoog .knop { min-height: 52px; }

  .subheld { grid-template-columns: 1fr; }
  .verhaal { grid-template-columns: 1fr; }
  .verhaal-podium { display: none; }
  .verhaal-stap { min-height: 0; opacity: 1; padding: 40px 0; }
  .verhaal-mobiel { display: grid; justify-items: center; padding: 24px 12px; background: var(--ijs); border-radius: var(--hoek); }
  .helptrij { grid-template-columns: 1fr; }
  .helptrij.om .helpt-tekst { order: 0; }
  .voorbeeldweek-podium { height: 520px; padding: 10px; }
  .voorbeeldweek .wk-dag:nth-child(n+5) { display: none; }
  .voorbeeldweek .wk-raster { grid-template-columns: 30px repeat(3, minmax(0, 1fr)); }

  .voet-regel { grid-template-columns: 1fr; }
  .voet-regel nav { justify-content: flex-start; }
  .voet-regel p:last-child { text-align: left; }
}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .loop-rij { animation: none; }
  .js .opkomst > * { opacity: 1; transform: none; }
  .js .merkblok g { transform: none; }
  .woordmerk { transform: none !important; }
}

/* ---------- foto's: de tijd waar een week uit bestaat ---------- */
.fotoband { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 16px; padding: 0 var(--m); }
.fotoband figure { overflow: hidden; border-radius: calc(var(--hoek) + 6px); aspect-ratio: 3 / 4; background: var(--wolk); }
.fotoband .foto-breed, .fotoband figure:last-child { aspect-ratio: auto; }
.fotoband img, .subheld-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.subheld-foto { overflow: hidden; border-radius: calc(var(--hoek) + 8px); aspect-ratio: 4 / 3; }
@media (max-width: 820px) {
  .fotoband { grid-template-columns: 1fr 1fr; }
  .fotoband .foto-breed, .fotoband figure:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}

/* ---------- het logo veert mee als je erover gaat ---------- */
.merkteken rect { transform-box: fill-box; transform-origin: 50% 100%; }
.woordlogo:hover .merkteken rect, .woordlogo:focus-visible .merkteken rect { animation: veer .7s var(--ease) both; }
.merkteken rect:nth-child(2) { animation-delay: 60ms !important; }
.merkteken rect:nth-child(3) { animation-delay: 120ms !important; }
.merkteken rect:nth-child(4) { animation-delay: 180ms !important; }
.merkteken rect:nth-child(5) { animation-delay: 240ms !important; }
.woordlogo span { display: inline-block; transition: transform .35s var(--ease); }
.woordlogo:hover span { transform: translateX(2px); }
@keyframes veer { 0% { transform: scaleY(1); } 35% { transform: scaleY(.45); } 65% { transform: scaleY(1.18); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .woordlogo:hover .merkteken rect { animation: none; } }

/* ---------- wat het oplevert: vier uitkomsten ---------- */
.oplevert { padding: 0 var(--m); }
.oplevert > .kop-l { margin-bottom: clamp(32px, 4vw, 56px); }
.oplevert-blokken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.opblok { display: grid; align-content: start; gap: 14px; min-height: 280px; padding: clamp(24px, 2.6vw, 36px); border-radius: calc(var(--hoek) + 6px); background: var(--wit); }
.opblok h3 { font-weight: 300; font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); line-height: 1.15; letter-spacing: -0.025em; }
.opblok p { color: var(--inkt-zacht); }
.op-1 { background: var(--ijs); }
.op-2 { background: var(--nacht); color: var(--wit); }
.op-2 p { color: var(--mist); }
.op-3 { background: var(--wolk); }

/* ---------- zo ziet het eruit: echte schermen ---------- */
.schermen { padding: 0 var(--m); }
.schermen-kop { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.schermen-baan { display: grid; grid-template-columns: minmax(260px, 4fr) 9fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.schermen-tabs { display: grid; gap: 8px; position: sticky; top: 96px; }
.schermen-tabs button { position: relative; display: grid; gap: 4px; text-align: left; padding: 18px 20px; border: 0; border-radius: 14px; background: var(--wolk); cursor: pointer; overflow: hidden; transition: background .25s, transform .3s var(--ease); }
.schermen-tabs button:hover { transform: translateX(4px); }
.schermen-tabs button span { color: var(--inkt-zacht); font-size: .9375rem; line-height: 1.45; }
.schermen-tabs button[aria-selected="true"] { background: var(--nacht); color: var(--wit); }
.schermen-tabs button[aria-selected="true"] span { color: var(--mist); }
.voortgang { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--cyaan); transform: scaleX(0); transform-origin: left; }
.schermen-tabs button[aria-selected="true"] .voortgang { animation: vul 6s linear both; }
.schermen.vast .voortgang { display: none; }
@keyframes vul { to { transform: scaleX(1); } }
.schermen-beeld { position: relative; display: grid; padding: clamp(14px, 1.6vw, 24px); background: var(--ijs); border-radius: calc(var(--hoek) + 8px); }
.scherm { grid-area: 1 / 1; overflow: hidden; border-radius: var(--hoek); background: var(--wit); opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .45s, transform .6s var(--ease); }
.scherm img { width: 100%; height: auto; }
.schermen[data-scherm="0"] .scherm[data-voor="0"], .schermen[data-scherm="1"] .scherm[data-voor="1"], .schermen[data-scherm="2"] .scherm[data-voor="2"], .schermen[data-scherm="3"] .scherm[data-voor="3"] { opacity: 1; transform: none; }
.scherm-telefoon { position: absolute; right: clamp(-12px, -1vw, 0px); bottom: -48px; width: clamp(140px, 16%, 200px); border-radius: 26px; overflow: hidden; border: 6px solid var(--nacht); background: var(--nacht); }
.scherm-telefoon img { width: 100%; height: auto; }

/* ---------- prijs in het kort ---------- */
.prijsband { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-left: var(--m); margin-right: var(--m); padding: clamp(36px, 5vw, 72px); background: var(--ijs); border-radius: calc(var(--hoek) + 8px); }
.prijsband div { display: grid; gap: 18px; justify-items: start; }

/* ---------- prijzenpagina ---------- */
.plannen { padding: 0 var(--m); }
.plan-blokken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.planblok { display: grid; align-content: start; gap: 14px; padding: clamp(28px, 3vw, 40px); border-radius: calc(var(--hoek) + 8px); transition: transform .45s var(--ease); }
.planblok:hover { transform: translateY(-6px); }
.plan-wolk { background: var(--wit); }
.plan-nacht { background: var(--nacht); color: var(--wit); }
.plan-ijs { background: var(--ijs); }
.plan-noot { font-size: .875rem; color: var(--inkt-zacht); }
.plan-nacht .plan-noot, .planblok.plan-nacht li { color: var(--mist); }
.planblok h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 400; letter-spacing: -0.03em; }
.plan-prijs b { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 300; letter-spacing: -0.04em; }
.plan-prijs span { color: var(--inkt-zacht); }
.plan-nacht .plan-prijs span { color: var(--mist); }
.planblok ul { display: grid; gap: 10px; margin-top: 8px; }
.planblok li { padding-left: 26px; position: relative; color: var(--inkt-zacht); }
.planblok li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--blauw-helder); border-bottom: 2px solid var(--blauw-helder); transform: rotate(-45deg); } /* taste-skill-ignore: vinkje bij wat in een plan zit */
.plan-nacht li::before { border-color: var(--cyaan); }
.plannen-onder { margin-top: 24px; color: var(--inkt-zacht); }

/* ---------- vergelijken ---------- */
.banden.los { max-width: 1100px; }
.keuze2 { padding: 0 var(--m); }
.keuze2 > .kop-l { margin-bottom: clamp(32px, 4vw, 56px); }
.keuze2-blokken { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.keuzeblok { display: grid; align-content: start; gap: 16px; padding: clamp(28px, 3.4vw, 48px); border-radius: calc(var(--hoek) + 8px); min-height: 280px; }
.keuzeblok p { font-size: var(--step-lead); line-height: 1.4; letter-spacing: -0.01em; }
.keuze-zij { background: var(--wolk); }
.keuze-wij { background: var(--blauw); color: var(--wit); justify-items: start; }
.toollinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 24px; }
.toollinks a { display: grid; gap: 4px; padding: 18px 20px; background: var(--wit); border-radius: 12px; text-decoration: none; transition: background .2s, transform .3s var(--ease); }
.toollinks a:hover { background: var(--ijs); transform: translateY(-3px); }
.toollinks span { color: var(--inkt-zacht); font-size: .9375rem; }
.vergelijk-tools { padding: 0 var(--m); }
.tool-blokken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-blokken.artikelen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.toolblok { display: grid; align-content: start; gap: 12px; min-height: 280px; padding: clamp(24px, 3vw, 36px); border-radius: calc(var(--hoek) + 6px); background: var(--wit); text-decoration: none; transition: transform .45s var(--ease), background .3s; }
.toolblok > span:first-child { font-size: .875rem; color: var(--inkt-zacht); }
.toolblok p { color: var(--inkt-zacht); }
.toolblok .tekstlink { justify-self: start; margin-top: auto; }
.toolblok:hover { transform: translateY(-6px); background: var(--ijs); }
.tool-1, .tool-4 { background: var(--wolk); }

/* ---------- kennisbank ---------- */
.artikel-baan { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); padding: 0 var(--m); margin-top: var(--sectie); align-items: start; }
.kort { position: sticky; top: 96px; padding: clamp(24px, 3vw, 36px); background: var(--ijs); border-radius: calc(var(--hoek) + 6px); display: grid; gap: 16px; }
.kort ul { display: grid; gap: 12px; }
.kort li { padding-left: 22px; position: relative; }
.kort li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 3px; background: var(--blauw-helder); }
.artikel { max-width: 68ch; }
.artikel h2 { font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; margin: 48px 0 16px; }
.artikel h2:first-child { margin-top: 0; }
.artikel p { margin: 0 0 16px; }
.artikel-diddle { margin-top: 56px; padding: clamp(24px, 3vw, 36px); background: var(--wolk); border-radius: calc(var(--hoek) + 6px); }
.artikel-diddle h2 { margin-top: 0; }

@media (max-width: 1100px) {
  .oplevert-blokken { grid-template-columns: 1fr 1fr; }
  .tool-blokken, .tool-blokken.artikelen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .oplevert-blokken, .plan-blokken, .keuze2-blokken, .tool-blokken, .tool-blokken.artikelen { grid-template-columns: 1fr; }
  .opblok, .toolblok, .keuzeblok { min-height: 0; }
  .schermen-kop, .prijsband { grid-template-columns: 1fr; }
  .schermen-baan { grid-template-columns: 1fr; }
  .schermen-tabs { position: static; grid-template-columns: 1fr 1fr; }
  .schermen-tabs button span { display: none; }
  .schermen-beeld { order: -1; }
  .scherm-telefoon { display: none; }
  .prijsband { margin-left: 12px; margin-right: 12px; padding: 32px 20px; }
  .artikel-baan { grid-template-columns: 1fr; }
  .kort { position: static; }
}

/* ---------- echte schermen op de vervolgpagina's ---------- */
.subheld-scherm { padding: clamp(10px, 1.2vw, 18px); background: var(--ijs); border-radius: calc(var(--hoek) + 8px); }
.subheld-scherm img { width: 100%; height: auto; border-radius: var(--hoek); }
.schermrij { padding: 0 var(--m); }
.schermrij > .kop-m { margin-bottom: 24px; }
.schermrij-beelden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.schermrij figure { display: grid; gap: 12px; }
.schermrij img { width: 100%; height: auto; border-radius: var(--hoek); background: var(--wit); padding: 8px; transition: transform .45s var(--ease); }
.schermrij figure:hover img { transform: translateY(-6px); }
.schermrij figcaption { color: var(--inkt-zacht); font-size: .9375rem; }
@media (max-width: 820px) { .schermrij-beelden { grid-template-columns: 1fr; } }

/* ---------- menuknop met icoon ---------- */
.menuknop { align-items: center; gap: 10px; }
.menu-icoon { display: grid; gap: 4px; width: 18px; }
.menu-icoon i { display: block; height: 2px; border-radius: 1px; background: var(--inkt); transition: transform .3s var(--ease), opacity .2s; }
.menuknop[aria-expanded="true"] .menu-icoon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menu-icoon i:nth-child(2) { opacity: 0; }
.menuknop[aria-expanded="true"] .menu-icoon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- telefoon: eerst wat het is, dan de week ---------- */
@media (max-width: 820px) {
  /* Het taalmenu met vlaggen staat ook op de telefoon in de kopbalk. */
  .kopbalk > .taalkeuze { display: block; margin-left: auto; }
  .kopbalk .woordlogo { margin-right: 0; }
  .taalkeuze summary { padding: 8px 10px; gap: 6px; }
  .taalkeuze summary span { display: none; }
  .taalkeuze ul { right: -56px; }

  .podiumbaan { display: flex; flex-direction: column; padding: 0 16px; }
  .leeskolom { display: contents; }
  .woordmerk { order: 1; position: static; margin: 8px 0 0; padding: 0; font-size: 22vw; line-height: .85; text-align: left; transform: none !important; }
  .held { order: 2; min-height: 0; gap: 20px; padding: 20px 0 32px; }
  .held h1 { font-size: clamp(2.125rem, 9vw, 2.75rem); }
  .podium { order: 3; height: 62svh; min-height: 420px; margin: 0 -4px; }
  .intro { order: 4; margin-top: 72px; padding-bottom: 8px; }

  /* Hoe het werkt: kop, dan het beeld, dan de schuif, dan de zin. */
  .stappen { display: flex; flex-direction: column; min-height: 0; margin: var(--sectie) 12px 0; }
  .stappen-woord { display: contents; }
  .stappen-woord .kop-l { order: 1; margin: 0; padding: 28px 20px 20px; background: var(--wolk); }
  .stappen-beeld { order: 2; min-height: 0; padding: 20px 16px; }
  .stappen-beeld > .kaart { transition: opacity .3s; }
  .stappen-schuif { order: 3; position: static; padding: 4px 20px 16px; background: var(--ijs); }
  .clausule { order: 4; position: static; display: none; max-width: none; padding: 20px 20px 28px; background: var(--wolk); font-size: 1.375rem; opacity: 1; visibility: visible; transform: none; }
  .stappen[data-stap="0"] .clausule[data-voor="0"], .stappen[data-stap="1"] .clausule[data-voor="1"], .stappen[data-stap="2"] .clausule[data-voor="2"], .stappen[data-stap="3"] .clausule[data-voor="3"] { display: block; }

  /* Echte schermen: op de telefoon het telefoonscherm, op leesbare grootte. */
  .schermen-beeld { justify-items: center; padding: 16px; }
  .scherm { width: min(300px, 100%); border-radius: 20px; }
  .subheld-scherm { justify-self: center; width: min(280px, 100%); }
  .subheld-scherm img { border-radius: 18px; }
  .schermrij-beelden { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--m)); padding: 0 var(--m) 8px; scrollbar-width: none; }
  .schermrij figure { flex: 0 0 68%; scroll-snap-align: start; }
  .schermrij img { border-radius: 18px; padding: 6px; }
}

/* ---------- telefoon: minder tekst, kortere pagina ---------- */
@media (max-width: 820px) {
  :root { --sectie: 88px; }
  /* Intro: alleen de inleiding; de vier alinea's staan verderop al in het kort. */
  .intro > p:not(.lead) { display: none; }
  .intro { margin-top: 56px; }
  /* Functies: de kop en het voorbeeld uit de app vertellen het al. */
  .blok-tekst p { display: none; }
  .blok { gap: 16px; padding: 20px; }
  /* De demo is te klein om op een telefoon te gebruiken; de knop onderaan blijft. */
  .probeer { display: none; }
  /* Voor wie: kleinere tekening, kortere kaart. */
  .doelblok { grid-template-columns: 96px 1fr; align-items: center; gap: 4px 14px; padding: 12px 12px 16px; }
  .doelblok .tekening { grid-row: span 3; margin: 0; border-radius: 12px; }
  .doelblok h3, .doelblok p, .doelblok .tekstlink { margin: 0; }
  .doelblok p { font-size: .9375rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Vergelijk: alleen ja, deels of nee. */
  .antw span { display: none; }
  .band { padding: 12px 14px; gap: 6px 12px; }
  /* Tempo: de regels zeggen het al. */
  .tempo-tekst > .lead { display: none; }
  .tempo-foto { aspect-ratio: 16 / 10; }
  /* Vragen: eerst vier, de rest achter een knop. */
  .vragen-tekst:not(.alles) > p:nth-child(n+5) { display: none; }
  .vragen-meer { justify-self: start; margin-top: 4px; }
  /* Vervolgpagina's: de regels zeggen het in hun kop; minder foto's. */
  .regelblok { min-height: 0; padding: 20px; }
  .regelblok p { display: none; }
  a.regelblok p { display: block; }
  .fotoband figure:nth-child(n+3) { display: none; }
  .fotoband .foto-breed { grid-column: 1 / -1; }
  .pijnblok { min-height: 0; padding: 22px; }
  .helptrij { padding: 22px; gap: 16px; }
  .opblok { padding: 22px; gap: 8px; }
  .voet { padding-top: 96px; }
}
@media (min-width: 821px) { .vragen-meer { display: none; } }
@media (max-width: 820px) {
  .frag-noot { display: none; }
  .frag-terug li:nth-child(n+3) { display: none; }
  .bento .blok:has(.frag-kies) { display: none; }
  .frag { padding: 16px; }
}

/* ---------- herkenning, wat het anders maakt, de maker ---------- */
.held-gratis { margin-top: -12px; color: var(--inkt-zacht); font-size: var(--step-small); }
.held-gratis::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--mint); vertical-align: 1px; }

.herken { display: grid; grid-template-columns: 5fr 7fr; gap: 24px clamp(32px, 6vw, 96px); padding: 0 var(--m); align-items: start; }
.herken-lijst { list-style: none; margin: 0; padding: 0; counter-reset: herken; display: grid; gap: 10px; }
.herken-lijst li { counter-increment: herken; display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; padding: 24px 28px; border-radius: calc(var(--hoek) + 4px); background: var(--wolk); }
.herken-lijst li::before { content: "0" counter(herken); grid-row: span 2; font-weight: 300; font-size: 1.75rem; line-height: 1; color: var(--blauw-helder); font-variant-numeric: tabular-nums; }
.herken-lijst b { font-weight: 500; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; }
.herken-lijst span { color: var(--inkt-zacht); max-width: 52ch; }
.herken-brug { grid-column: 2; font-size: var(--step-lead); line-height: 1.3; color: var(--blauw); }

.anders { display: grid; grid-template-columns: 5fr 7fr; gap: 32px clamp(32px, 6vw, 96px); margin-left: var(--m); margin-right: var(--m); padding: clamp(36px, 5vw, 72px); background: var(--nacht); color: var(--wit); border-radius: calc(var(--hoek) + 8px); }
.anders-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.anders-lijst li { position: relative; padding-top: 18px; color: var(--mist); }
.anders-lijst li::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--cyaan); }
.anders-lijst b { display: block; margin-bottom: 6px; color: var(--wit); font-weight: 500; font-size: 1.1875rem; }

.maker { display: grid; grid-template-columns: 5fr 7fr; gap: 20px clamp(32px, 6vw, 96px); padding: 0 var(--m); align-items: baseline; }
.maker .lead { max-width: 40ch; padding-left: 24px; border-left: 3px solid var(--zon); }

@media (max-width: 820px) {
  .herken, .anders, .maker { grid-template-columns: 1fr; }
  .herken-brug { grid-column: 1; }
  .herken-lijst li { grid-template-columns: 36px 1fr; padding: 16px 18px; }
  .herken-lijst li::before { font-size: 1.375rem; }
  .anders { margin-left: 12px; margin-right: 12px; padding: 32px 20px; }
  .anders-lijst { grid-template-columns: 1fr; gap: 22px; }
  .maker .lead { font-size: 1.125rem; padding-left: 16px; }
  /* Minder tekst: de kopjes van de herkenning zeggen het al. */
  .herken-lijst span { display: none; }
  .herken-lijst li { align-items: center; }
}
@media (max-width: 1100px) { .voorwie-blokken.groot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .voorwie-blokken.groot, .anderen-blokken { grid-template-columns: 1fr; } }

/* ---------- stappenplan en kennisbank ---------- */
.artikel-verder { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.tool-blokken.artikelen .tool-gids { grid-column: 1 / -1; min-height: 0; background: var(--nacht); color: var(--wit); }
.tool-gids p, .tool-blokken.artikelen .tool-gids > span:first-child { color: var(--mist); }
.tool-gids .tekstlink { color: var(--wit); }
.tool-blokken.artikelen .tool-gids:hover { background: var(--nacht-2); }
@media (max-width: 820px) {
  .gids-stappen span { display: block; grid-column: 2; }
  .gids-stappen li { align-items: start; }
}