/* De Bouwtekening: de vragen, de wachtpagina en de kleine pagina's. Huisstijl timmybouwt (context/design-tokens.json van de
   site: nacht #060608, krijt #f5f2ec, groen #3fbf7a met donkere tekst erop) op het blauwdrukpapier van de tekening.
   Telefoon eerst: tikdoelen van 48 px, tekst in invulvelden 18 px (geen inzoomen op de iPhone), de knoppen onderin. */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
:root { color-scheme: dark;
  --nacht:#060608; --blad:#0c2236; --blad-diep:#081a2a; --lijn:rgba(196,226,255,.10); --lijn-sterk:rgba(196,226,255,.30);
  --krijt:#f5f2ec; --krijt-zacht:#b9c6d2; --groen:#3fbf7a; --groen-hover:#4fd08a; --groen-op:#07140d; --rood:#ff8a7a;
  --display:"Instrument Serif",Georgia,serif; --body:"Schibsted Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --balk:76px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; min-height:100dvh; background:var(--nacht); color:var(--krijt); font-family:var(--body); font-size:17px; line-height:1.5;
  overflow-wrap:break-word; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--groen); outline-offset:3px; border-radius:6px; }
.verborgen { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
[hidden] { display:none !important; }

/* het papier */
.papier { min-height:100vh; min-height:100dvh; background-color:var(--blad);
  background-image:linear-gradient(var(--lijn) 1px,transparent 1px),linear-gradient(90deg,var(--lijn) 1px,transparent 1px),linear-gradient(rgba(196,226,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(196,226,255,.04) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px; background-attachment:fixed; display:flex; flex-direction:column; }
.boven { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:12px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background:linear-gradient(var(--blad) 70%, rgba(12,34,54,0)); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--krijt-zacht); }
.boven b { color:var(--krijt); font-weight:500; }
.boven .stap { margin-left:auto; font-variant-numeric:tabular-nums; }
.voortgang { position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--lijn); }
.voortgang i { display:block; height:100%; width:0; background:var(--groen); transition:width .4s var(--ease); }

.scherm { flex:1; width:100%; max-width:720px; margin:0 auto; padding:18px max(16px, env(safe-area-inset-right)) calc(var(--balk) + 28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:18px; }
.scherm:focus, h1[tabindex="-1"]:focus, .vraag[tabindex="-1"]:focus { outline:none; }
@media (prefers-reduced-motion:no-preference) { .scherm[data-nieuw] { animation:in .38s var(--ease) both; } @keyframes in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } }
.oog { margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--krijt-zacht); }
h1, .vraag { margin:0; font-family:var(--display); font-weight:400; font-size:clamp(2rem,8.4vw,3.1rem); line-height:1.02; letter-spacing:-.005em; text-wrap:balance; }
h1 em { color:var(--krijt-zacht); }
.hulp { margin:-6px 0 0; color:var(--krijt-zacht); font-size:16px; max-width:52ch; }
.tekst { margin:0; max-width:56ch; }

/* invullen */
.veld { display:grid; gap:8px; }
.veld label, .label { font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--krijt-zacht); }
input[type=text], input[type=email], textarea { width:100%; font:inherit; font-size:18px; line-height:1.4; color:var(--krijt); background:rgba(6,6,8,.42);
  border:1.5px solid var(--lijn-sterk); border-radius:12px; padding:14px 16px; min-height:54px; transition:border-color .15s; }
textarea { min-height:120px; resize:vertical; }
input::placeholder, textarea::placeholder { color:rgba(185,198,210,.55); }
input:focus, textarea:focus { border-color:var(--groen); outline:none; box-shadow:0 0 0 3px rgba(63,191,122,.22); }
.teller { justify-self:end; font-family:var(--mono); font-size:11px; color:var(--krijt-zacht); }
.fout { margin:0; color:var(--rood); font-size:15px; }
.fout:empty { display:none; }
.drie { display:grid; gap:10px; }
.drie .rij { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:center; }
.drie .nr { font-family:var(--mono); font-size:13px; color:var(--krijt-zacht); text-align:center; }

/* keuzes: grote kaarten, tegels, pillen */
.keuzes { display:grid; gap:10px; }
.keuzes--twee { grid-template-columns:repeat(2,minmax(0,1fr)); }
.optie { position:relative; display:flex; align-items:center; gap:12px; min-height:58px; padding:14px 16px; border-radius:12px; border:1.5px solid var(--lijn-sterk);
  background:rgba(6,6,8,.34); cursor:pointer; font-size:17px; line-height:1.25; transition:border-color .15s, background .15s; -webkit-tap-highlight-color:transparent; }
.optie input { position:absolute; opacity:0; pointer-events:none; }
.optie:hover { border-color:var(--krijt-zacht); }
.optie:has(input:checked) { border-color:var(--groen); background:rgba(63,191,122,.12); }
.optie:has(input:focus-visible) { outline:3px solid var(--groen); outline-offset:3px; }
.optie .vink { flex:none; margin-left:auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--lijn-sterk); display:grid; place-items:center; }
.optie:has(input:checked) .vink { background:var(--groen); border-color:var(--groen); }
.optie:has(input:checked) .vink::after { content:""; width:9px; height:5px; border-left:2px solid var(--groen-op); border-bottom:2px solid var(--groen-op); transform:translateY(-1px) rotate(-45deg); }
.optie--groot { min-height:76px; font-size:18px; }
.optie small { display:block; color:var(--krijt-zacht); font-size:14px; margin-top:2px; }
.pillen { display:flex; flex-wrap:wrap; gap:8px; }
.pil { position:relative; display:inline-flex; align-items:center; min-height:46px; padding:10px 16px; border-radius:999px; border:1.5px solid var(--lijn-sterk); background:rgba(6,6,8,.34);
  cursor:pointer; font-size:16px; -webkit-tap-highlight-color:transparent; }
.pil input { position:absolute; opacity:0; pointer-events:none; }
.pil:has(input:checked) { border-color:var(--groen); background:rgba(63,191,122,.14); }
.pil:has(input:focus-visible) { outline:3px solid var(--groen); outline-offset:3px; }
.pil:has(input:checked)::before { content:"✓"; margin-right:7px; color:var(--groen); font-weight:700; }
.tweede { display:grid; gap:10px; padding-top:6px; border-top:1px dashed var(--lijn-sterk); }
.tweede .vraag-klein { margin:8px 0 0; font-family:var(--display); font-size:1.6rem; line-height:1.1; }

/* de sfeer: tegels in hun eigen kleuren en letter (uit de motor) */
.sferen { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sfeer { position:relative; display:grid; gap:6px; align-content:start; min-height:128px; padding:14px; border-radius:12px; cursor:pointer;
  background:var(--s-bg); color:var(--s-ink); border:2px solid rgba(255,255,255,.08); box-shadow:0 8px 24px rgba(0,0,0,.25); -webkit-tap-highlight-color:transparent; }
.sfeer input { position:absolute; opacity:0; pointer-events:none; }
.sfeer .aa { font-family:var(--s-font); font-size:34px; line-height:1; font-weight:600; letter-spacing:-.01em; }
.sfeer .naam { font-family:var(--s-font); font-size:16px; font-weight:600; line-height:1.15; }
.sfeer .wat { font-size:12.5px; line-height:1.3; opacity:.78; }
.sfeer .stip { position:absolute; right:12px; top:12px; width:18px; height:18px; border-radius:50%; background:var(--s-accent); box-shadow:0 0 0 2px var(--s-bg), 0 0 0 3px rgba(0,0,0,.15); }
.sfeer:has(input:checked) { border-color:var(--groen); box-shadow:0 0 0 3px var(--groen), 0 8px 24px rgba(0,0,0,.3); }
.sfeer:has(input:focus-visible) { outline:3px solid var(--groen); outline-offset:3px; }

/* de foto */
.foto-kies { display:grid; gap:12px; }
.foto-voorbeeld { width:100%; max-height:300px; object-fit:cover; border-radius:12px; border:1.5px solid var(--lijn-sterk); }

/* knoppen */
.knop { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:52px; padding:12px 22px; border-radius:999px; border:0; cursor:pointer;
  font:inherit; font-weight:700; font-size:17px; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background .15s, transform .1s; }
.knop:active { transform:translateY(1px); }
.knop--hoofd { background:var(--groen); color:var(--groen-op); }
.knop--hoofd:hover { background:var(--groen-hover); }
.knop--hoofd[disabled] { opacity:.6; cursor:progress; }
.knop--lijn { background:transparent; color:var(--krijt); box-shadow:inset 0 0 0 1.5px var(--lijn-sterk); }
.knop--stil { background:transparent; color:var(--krijt-zacht); padding-inline:10px; font-weight:500; }
.balk { position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; gap:10px; align-items:center;
  padding:12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:linear-gradient(rgba(8,26,42,0), var(--blad-diep) 26%); }
.balk .knop--hoofd { flex:1; }
.balk-binnen { width:100%; max-width:720px; margin:0 auto; display:flex; gap:10px; align-items:center; }
.balk-binnen .knop--hoofd { flex:1; }

/* het welkom */
.welkom { gap:22px; }
.welkom-tekst { display:grid; gap:20px; align-content:start; }
.welkom h1 { font-size:clamp(2.35rem,10vw,3.9rem); }
.krijg { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.krijg li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:start; }
.krijg .letter { width:28px; height:28px; border:1.5px solid var(--krijt); border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:12px; margin-top:1px; }
.krijg b { font-weight:600; }
.voorbeeld { margin:0; display:grid; gap:8px; }
.voorbeeld img { width:100%; height:auto; border-radius:12px; border:1px solid var(--lijn-sterk); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.voorbeeld figcaption { font-family:var(--mono); font-size:11.5px; color:var(--krijt-zacht); }
.van-tim { margin:0; font-size:14.5px; color:var(--krijt-zacht); }

/* de opt-in-pagina (C6b deel 3): drie echte voorbeelden, wat je krijgt, daarna zelf bouwen, wie Tim is, en nog een knop */
.welkom-blok { display:grid; gap:14px; padding-top:28px; border-top:1px dashed var(--lijn-sterk); }
.welkom-blok h2, .welkom-slot h2 { margin:0; font-family:var(--display); font-weight:400; font-size:clamp(1.85rem,6.4vw,2.6rem); line-height:1.04; text-wrap:balance; }
.voorbeelden { margin:4px 0 0; padding:0; list-style:none; display:grid; gap:14px; }
.vb { display:grid; gap:8px; align-content:start; height:100%; padding:12px 12px 14px; border-radius:14px; border:1.5px solid var(--lijn-sterk); background:rgba(6,6,8,.34);
  color:inherit; text-decoration:none; transition:border-color .15s, transform .15s var(--ease); -webkit-tap-highlight-color:transparent; }
.vb:hover { border-color:var(--krijt-zacht); }
.vb img { display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--lijn); background:var(--blad-diep); }
.vb-wie { font-size:14.5px; color:var(--krijt-zacht); line-height:1.35; }
.vb-wie b { display:block; color:var(--krijt); font-size:17px; font-weight:600; }
.vb-kop { font-family:var(--display); font-size:1.4rem; line-height:1.12; quotes:"„" "”"; }
.vb-meta { font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--krijt-zacht); }
.vb-open { margin-top:2px; font-weight:700; color:var(--groen); }
.vb-open::after { content:" →"; }
.tim-blok { grid-template-columns:96px minmax(0,1fr); align-items:center; gap:16px; }
.tim-blok > div { display:grid; gap:10px; }
.tim-blok video { width:96px; height:auto; aspect-ratio:9/16; border-radius:10px; background:#000; object-fit:cover; }
.welkom-slot { display:grid; gap:12px; justify-items:start; padding:28px 0 4px; border-top:1px dashed var(--lijn-sterk); }
.welkom-slot p { margin:0; }
.voet--welkom { display:none; padding-top:8px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
/* op het welkom is de balk onderin er niet: geen ruimte ervoor vrijhouden */
.scherm.welkom { padding-bottom:28px; }
body.op-welkom .voet--welkom { display:block; }

/* contact */
/* de zin over de mails, het laatste wat je leest vóór de knop (Tims besluit 20-10: geen vinkje, wel eerlijk in beeld);
   margin-top:auto zet hem onderaan het scherm, direct boven de knop in de balk */
.mailzin { margin:auto 0 0; padding:12px 14px; border-left:2px solid var(--groen); background:rgba(6,6,8,.34); border-radius:0 10px 10px 0; font-size:15.5px; line-height:1.45; color:var(--krijt); }
.klein { margin:0; font-size:14px; color:var(--krijt-zacht); }
.melding { margin:0; padding:14px 16px; border-radius:12px; border:1.5px solid var(--rood); background:rgba(255,138,122,.08); font-size:16px; }
.melding:empty { display:none; }

/* de wachtpagina */
.stappen { margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.stappen li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:start; padding:10px 0; border-bottom:1px dashed var(--lijn-sterk); color:var(--krijt-zacht); }
.stappen .ic { width:24px; height:24px; border-radius:50%; border:1.5px solid var(--lijn-sterk); display:grid; place-items:center; margin-top:1px; }
.stappen li[data-bezig] { color:var(--krijt); }
.stappen li[data-bezig] .ic { border-color:var(--groen); border-top-color:transparent; animation:draai .9s linear infinite; }
.stappen li[data-klaar] { color:var(--krijt); }
.stappen li[data-klaar] .ic { background:var(--groen); border-color:var(--groen); }
.stappen li[data-klaar] .ic::after { content:""; width:9px; height:5px; border-left:2px solid var(--groen-op); border-bottom:2px solid var(--groen-op); transform:translateY(-1px) rotate(-45deg); }
@keyframes draai { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .stappen li[data-bezig] .ic { animation:none; border-top-color:var(--groen); } }
.stappen .wat { font-weight:600; }
.stappen .info { display:block; font-size:15px; color:var(--krijt-zacht); margin-top:2px; }
.stappen .info q { color:var(--krijt); font-family:var(--display); font-size:1.25rem; line-height:1.2; quotes:"„" "”"; }
.dots { display:inline-flex; gap:6px; vertical-align:middle; margin-left:6px; }
.dots i { width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.25); background:var(--d); }
.klok { font-family:var(--mono); font-size:13px; color:var(--krijt-zacht); font-variant-numeric:tabular-nums; }

/* kleine pagina's (privacy, verwijderen, afmelden) */
body.los { background:var(--blad); }
.los-blok { max-width:680px; margin:0 auto; padding:40px max(16px, env(safe-area-inset-right)) 60px max(16px, env(safe-area-inset-left)); display:grid; gap:16px; }
.los-blok h1 { font-size:clamp(2rem,7vw,2.8rem); }
.los-blok h2 { margin:18px 0 0; font-family:var(--display); font-weight:400; font-size:1.6rem; }
.los-blok p, .los-blok li { color:var(--krijt-zacht); }
.los-blok strong { color:var(--krijt); }
.voet { font-family:var(--mono); font-size:11.5px; color:var(--krijt-zacht); padding:20px max(16px, env(safe-area-inset-right)) calc(var(--balk) + 24px) max(16px, env(safe-area-inset-left)); text-align:center; }
.voet a { color:var(--krijt-zacht); }

@media (min-width:760px) {
  .scherm { padding-top:46px; gap:22px; }
  .keuzes--zes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sferen { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .welkom-raster { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:34px; align-items:center; }
  .voorbeelden { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tim-blok { grid-template-columns:132px minmax(0,1fr); gap:24px; } .tim-blok video { width:132px; }
  .welkom-blok { padding-top:40px; }
  .scherm.breed { max-width:1080px; }
}

/* Meten met toestemming (C8, Tims trein): de vraag van meten.js onderaan, boven de balk met Terug/Verder als die er is
   (meten.js schuift hem omhoog). Ja en Nee even groot: nee zeggen is net zo makkelijk als ja. */
.koekjes { background:none; border:0; padding:0 2px; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; min-height:44px; }
.meten { position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; gap:12px; padding:16px 16px max(16px, env(safe-area-inset-bottom));
  background:var(--blad-diep, #081a2a); border-top:1px solid var(--lijn-sterk, rgba(196,226,255,.34)); color:var(--krijt); font-family:var(--body); }
@media (min-width:760px) { .meten { grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:24px; padding:16px 24px; } }
.meten__tekst { margin:0; font-size:15px; line-height:1.5; color:var(--krijt-zacht); }
.meten__tekst b { color:var(--krijt); }
.meten__tekst a { color:var(--krijt); }
.meten__knoppen { display:flex; flex-wrap:wrap; gap:10px; }
.meten__knop { min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--lijn-sterk, rgba(196,226,255,.34)); background:transparent;
  color:var(--krijt); font:inherit; font-weight:700; cursor:pointer; }
.meten__knop:hover { border-color:var(--krijt); }
/* Zolang de vraag open is (meten.js zet html.meten-vraagt en --meten-hoogte: de vraag plus de balk eronder), krijgt de pagina
   onderaan evenveel ruimte. Anders verdween er van alles onder de vraag: de keuzes van vraag 1 op een kleine telefoon, de
   tweede vraag van vraag 6, de foutmeldingen, de zin over de mails boven "Teken mijn site" en de voet (QA-nacht 21-10).
   scroll-padding: wat in beeld schuift (de tweede vraag van vraag 6), schuift tot boven de balk en de vraag. */
html { scroll-padding-bottom:calc(var(--balk) + 16px + env(safe-area-inset-bottom)); }
html.meten-vraagt { scroll-padding-bottom:calc(var(--meten-hoogte, 0px) + 16px); }
html.meten-vraagt .scherm:not(.welkom) { padding-bottom:calc(var(--meten-hoogte, 0px) + 28px); }
html.meten-vraagt .voet--welkom { padding-bottom:calc(var(--meten-hoogte, 0px) + 28px); }