/* De letters staan in fonts/ en komen niet van Google (stap 2, 21-10-2026): dan gaat bij het openen geen IP-adres naar Google.
   Quicksand staat hier alleen in 500; de labels die 600 of 700 vragen, krijgen dezelfde letter zonder nagemaakt vet. Zet quicksand-600 en -700 erbij om dat te herstellen. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/opensans-400.ttf) format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/opensans-700.ttf) format('truetype')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/quicksand-500.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sourcesanspro-400.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sourcesanspro-600.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sourcesanspro-700.woff2) format('woff2')}
/* App van de Online Opvoed Uni, de web-app voor fase 1 (stap 2, 21-10-2026). Gebouwd uit het goedgekeurde prototype (prototype/bouw/1-stijl.css, versie 26):
   dezelfde look en dezelfde tokens, zonder het demopaneel en zonder het telefoonkader. De app vult het scherm; op een breed scherm staat hij in het midden. */
:root{
  color-scheme:light;
  --tekst:#333333;
  --tekst-zacht:#5a6664;
  --wit:#ffffff;
  --creme:#f8f7f1;
  --groen:#46837d;
  --groen-diep:#3a6c67;
  --groen-nacht:#2b4f4b;
  --lichtgroen:#c4d7d3;
  --lichtgroen-zacht:#e3eeeb;
  --blauw:#6F8FB0;
  --blauw-diep:#3f5d80;
  --lila:#d3c6fe;
  --lila-diep:#5b4a9a;
  --lila-zacht:#ece7ff;
  --lavendel:#a1aad7;
  --lavendel-diep:#4e5a8c;
  --zeegroen:#5a8996;
  --zeegroen-diep:#3a5f6b;
  --oranje:#f57c00;
  --oranje-diep:#d96d00;
  --oranje-licht:#ffb366;
  --apricot:#f8b27a;
  --fout:#9a3c2e;
  --mist:#b9b3c9;
  --glas:rgba(255,255,255,.74);
  --glas-dicht:rgba(255,255,255,.9);
  --glas-rand:rgba(255,255,255,.85);
  --schaduw:0 1px 2px rgba(43,79,75,.07),0 8px 18px -8px rgba(43,79,75,.22),0 26px 48px -22px rgba(43,79,75,.3);
  --schaduw-hoog:0 2px 4px rgba(43,79,75,.08),0 16px 32px -10px rgba(43,79,75,.3),0 40px 70px -24px rgba(43,79,75,.38);
  --schaduw-laag:0 1px 2px rgba(43,79,75,.08),0 4px 10px -6px rgba(43,79,75,.22);
  --knop-schaduw:0 2px 6px rgba(0,0,0,.18);
  --dim:rgba(43,79,75,.34);
  --kop:'Source Sans 3','Source Sans Pro','Segoe UI',Helvetica,Arial,sans-serif;
  --lees:'Open Sans','Segoe UI',Helvetica,Arial,sans-serif;
  --label:'Quicksand','Trebuchet MS',Helvetica,Arial,sans-serif;
  --tekst-maat:17px;
  --tekst-gewicht:400;
  /* besluit Lara 21-10-2026 ("b"): in de app is de lopende tekst Open Sans 400 op 17 px, overal dezelfde maat */
  --r-knop:3px;
  --r-kaart:6px;
  --r-tegel:14px;
  --tab-h:calc(78px + env(safe-area-inset-bottom,0px));
  --status-h:calc(env(safe-area-inset-top,0px) + 8px);
  --strook-h:100px;
  --veer:cubic-bezier(.32,1.2,.5,1);
  --zacht:cubic-bezier(.2,.8,.2,1);
  /* leeftijd, wordt per stand op .app overschreven */
  --l:var(--lavendel);
  --l-diep:var(--lavendel-diep);
  --l-tint:#eceefa;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;color:var(--tekst);font-family:var(--lees);font-size:var(--tekst-maat);font-weight:var(--tekst-gewicht);line-height:1.6;overflow-x:hidden;background:var(--creme);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:0;background:none;padding:0}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--kop);font-weight:700;line-height:1.2;text-wrap:balance}
h1{font-size:26px}
h2{font-size:21px;line-height:1.25}
h3{font-size:18px}
a{color:var(--groen-diep)}
img{display:block;max-width:100%}
::selection{background:var(--lichtgroen);color:var(--tekst)}
:focus-visible{outline:3px solid var(--groen-diep);outline-offset:2px}
svg{display:block}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.klein{width:18px;height:18px}
.label{font-family:var(--label);font-weight:600;font-size:13px;color:var(--groen-diep);letter-spacing:.01em}
.klein{font-family:var(--label);font-weight:500;font-size:13px;color:var(--tekst-zacht);line-height:1.45}
.vet{font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* De app vult het scherm van de telefoon; op een breed scherm staat hij als smalle kolom in het midden */
.app{position:fixed;inset:0;margin:0 auto;max-width:520px;overflow:hidden;overflow:clip;background:var(--creme);isolation:isolate;z-index:1;color:var(--tekst)}

/* Leeftijd: schoen, kleur en tint (letterlijk uit prototype/bouw/1-stijl.css; bij het weghalen van het telefoonkader per ongeluk meegegaan, terug sinds de nakijkronde van 21-10-2026) */
.app[data-leeftijd="0-2"]{--l:var(--lila);--l-diep:var(--lila-diep);--l-tint:#efeaff}
.app[data-leeftijd="2-4"]{--l:var(--lavendel);--l-diep:var(--lavendel-diep);--l-tint:#eceefa}
.app[data-leeftijd="4-6"]{--l:var(--blauw);--l-diep:var(--blauw-diep);--l-tint:#e6edf5}
.app[data-leeftijd="6-12"]{--l:var(--zeegroen);--l-diep:var(--zeegroen-diep);--l-tint:#e3eef0}
.app[data-leeftijd="12-18"]{--l:var(--groen);--l-diep:var(--groen-nacht);--l-tint:#e0ebe9}
@media (min-width:560px){
  body{background:#dfe9e6;background-image:linear-gradient(135deg,#cfe0dc 0%,#d6e2e6 40%,#dcd8f3 75%,#e6dcff 100%)}
  .app{box-shadow:0 0 0 1px rgba(255,255,255,.6),0 30px 80px -30px rgba(20,40,38,.45)}
}
.tabbalk{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}


/* Zachte kleurvlekken achter alles in de app */
.achter{position:absolute;inset:0;z-index:0;background:linear-gradient(175deg,#f3f6f4 0%,var(--creme) 60%);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(44px);pointer-events:none;will-change:transform}
.b1{width:300px;height:300px;left:-90px;top:30%;background:var(--l-tint);opacity:.9;animation:drijf1 46s ease-in-out infinite alternate}
.b2{width:340px;height:340px;right:-120px;top:50%;background:var(--lila-zacht);opacity:.7;animation:drijf2 58s ease-in-out infinite alternate}
.b3{width:260px;height:260px;left:30px;bottom:-40px;background:var(--lichtgroen-zacht);opacity:.8;animation:drijf3 52s ease-in-out infinite alternate}

/* Schermen */
.scherm{position:absolute;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scherm::-webkit-scrollbar{display:none}
.scherm.actief{display:block}
.scherm.in{animation:kom-in .42s var(--zacht)}
@keyframes kom-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.inhoud{display:flex;flex-direction:column;gap:16px;padding:calc(var(--status-h) + 10px) 18px calc(var(--tab-h) + 40px)}
.band+.inhoud,.lucht+.inhoud,.kopband+.inhoud{padding-top:16px}
.sectie{display:flex;flex-direction:column;gap:10px}
.rij{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.groei{flex:1;min-width:0}
.kopregel{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-right:62px}
.kopregel h1{font-size:28px}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:var(--r-knop);font-family:var(--kop);font-weight:400;font-size:18px;line-height:1.2;text-align:center;background:var(--glas-dicht);color:var(--tekst);box-shadow:var(--knop-schaduw),inset 0 1px 0 rgba(255,255,255,.9);border:1px solid rgba(58,108,103,.14);transition:transform .22s var(--veer),box-shadow .22s,background .2s;text-decoration:none}
.knop:active{transform:translateY(1px) scale(.975);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.knop.oranje{background:linear-gradient(180deg,#ffa347 0%,var(--oranje) 55%,var(--oranje-diep) 100%);color:#fff;font-weight:700;border-color:rgba(217,109,0,.5);text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 22px -8px rgba(245,124,0,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.knop.diep{background:linear-gradient(180deg,#4f8f88,var(--groen-diep));color:#fff;border-color:var(--groen-nacht)}
.knop.breed{width:100%}
.knop.uit{opacity:.5;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;background:var(--glas-dicht);border:1px solid rgba(58,108,103,.2);font-family:var(--kop);font-size:17px;color:var(--tekst);box-shadow:var(--schaduw-laag),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .22s var(--veer),background .2s,color .2s;text-align:left}
.chip:active{transform:scale(.96)}
.chip.aan{background:linear-gradient(180deg,#4f8f88,var(--groen-diep));color:#fff;border-color:var(--groen-nacht)}
.tekstlink{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-family:var(--label);font-weight:600;font-size:15px;color:var(--groen-diep);text-decoration:underline;text-underline-offset:3px;border-radius:var(--r-knop);align-self:flex-start}
.ronde{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--groen-diep);background:var(--glas-dicht);box-shadow:var(--schaduw-laag);flex:none;transition:transform .22s var(--veer)}
.ronde:active{transform:scale(.92)}
.ronde.op-kleur{background:rgba(255,255,255,.85);color:var(--groen-nacht)}

/* Glas en kaarten */
.glas{background:linear-gradient(160deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 100%);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);border:1px solid var(--glas-rand);border-radius:var(--r-tegel);box-shadow:var(--schaduw),inset 0 1px 0 rgba(255,255,255,.95)}
.kaart{background:var(--glas-dicht);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-tegel);box-shadow:var(--schaduw-laag),inset 0 1px 0 rgba(255,255,255,.9);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.drukt{transition:transform .22s var(--veer),box-shadow .22s}
.drukt:active{transform:scale(.97)}
.kantel{transition:transform .35s var(--zacht);transform-style:preserve-3d;will-change:transform}

/* Hulp, altijd rechtsboven */
.hulp{position:absolute;top:calc(var(--status-h) + 6px);right:14px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:2px;width:54px;min-height:54px;transition:transform .22s var(--veer)}
.hulp:active{transform:scale(.94)}
.hulp .boei{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff}
.hulp .boei svg{width:26px;height:26px}
.hulp span{font-family:var(--label);font-weight:700;font-size:11px;color:var(--groen-nacht);background:rgba(255,255,255,.88);padding:0 7px;border-radius:999px;line-height:16px}
.app[data-scherm="kennismaking"] .hulp{display:none}

/* Chip met schoen en leeftijd */
.chip-leeftijd{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:999px;background:var(--l-tint);color:var(--l-diep);font-family:var(--label);font-weight:700;font-size:14px;box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff;border:1px solid rgba(255,255,255,.9);min-height:40px;flex:none;transition:transform .22s var(--veer)}
.chip-leeftijd:active{transform:scale(.95)}
.chip-leeftijd img{width:30px;height:30px;filter:drop-shadow(0 2px 3px rgba(43,79,75,.25))}

/* Invoer "Vertel het maar" */
.vertel{display:flex;align-items:center;gap:6px;min-height:56px;padding:6px 6px 6px 18px;border-radius:999px;background:var(--glas-dicht);border:1px solid rgba(255,255,255,.9);box-shadow:var(--schaduw),inset 0 1px 0 #fff;color:var(--tekst-zacht);font-family:var(--kop);font-size:18px;text-align:left;width:100%}
.vertel .groei{display:flex;align-items:center;min-height:44px}
.vertel input{flex:1;min-width:0;background:none;border:0;outline:none;font-family:var(--kop);font-size:18px;color:var(--tekst);min-height:44px}
.vertel input::placeholder{color:var(--tekst-zacht);opacity:1}
.vertel .ronde{background:rgba(58,108,103,.08);box-shadow:none}
.vertel .ronde.oranje{background:linear-gradient(180deg,#ffa347,var(--oranje-diep));color:#fff;box-shadow:0 6px 14px -6px rgba(245,124,0,.7)}

/* Kennismaking: 5 schoenen van klein naar groot */
#s-kennismaking .kennis,#s-kennisnaam .kennis,#s-kennisgeslacht .kennis{position:relative;min-height:100%;display:grid;grid-template-rows:40% 1fr;align-items:center;padding:0 18px 60px;background:linear-gradient(180deg,var(--l-tint) 0%,var(--creme) 70%);transition:background 1s}
#s-kennismaking .lucht-leeg,#s-kennisnaam .lucht-leeg,#s-kennisgeslacht .lucht-leeg{position:absolute;z-index:1;left:0;right:0;top:0;height:40%;background:linear-gradient(160deg,#46837D 0%,#46837D 32%,#6F8FB0 70%,#D3C6FE 100%);background-size:130% 130%;animation:lucht-drijf 36s ease-in-out infinite alternate;border-radius:0 0 36px 36px;box-shadow:0 18px 40px -24px rgba(43,79,75,.5)}
#s-kennismaking h1,#s-kennisnaam h1,#s-kennisgeslacht h1{position:relative;z-index:2;font-size:30px;text-align:center;color:#fff;text-shadow:1px 1px 10px rgba(0,0,0,.35);padding-top:var(--status-h)}
.app[data-scherm="kennismaking"] .tabbalk,.app[data-scherm="kennisnaam"] .tabbalk,.app[data-scherm="kennisgeslacht"] .tabbalk{display:none}
/* Kennismaking, de naam: per kind het schoentje en een veld, Nog een kind, de pijl en Liever geen naam (20-10-2026) */
.kennis-onder{display:flex;flex-direction:column;align-items:center;gap:10px}
.kennis-onder .tekstlink{align-self:center}
.kennis-namen{display:flex;flex-direction:column;gap:14px;align-self:start;padding-top:40px}
.kennis-kinderen{display:flex;flex-direction:column;gap:10px}
.kennis-kind{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;background:var(--glas-dicht);border:1px solid rgba(255,255,255,.9);box-shadow:var(--schaduw),inset 0 1px 0 #fff;cursor:text}
.kennis-kind input{flex:1;min-width:0;background:none;border:0;outline:none;font-family:var(--kop);font-weight:600;font-size:21px;color:var(--tekst);min-height:48px}
.kennis-kind input::placeholder{color:var(--tekst-zacht);font-weight:400;opacity:1}
.kennis-kind:focus-within{box-shadow:var(--schaduw),0 0 0 3px var(--l)}
.kennis-rij{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kennis-rij .knop{min-height:48px;padding:8px 18px;font-size:17px}
.ronde.oranje{background:linear-gradient(180deg,#ffa347,var(--oranje-diep));color:#fff;box-shadow:0 6px 14px -6px rgba(245,124,0,.7)}
.ronde.groot{width:58px;height:58px}
.tekstlink.klein-link{align-self:center;font-size:14px;color:var(--tekst-zacht)}
.schoenrond{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--l-tint));display:grid;place-items:center;box-shadow:var(--schaduw-laag);flex:none}
.schoenrond img{width:48px;height:48px;filter:drop-shadow(0 4px 5px rgba(43,79,75,.25))}
.kennis-kind .schoenrond{width:52px;height:52px}
.kennis-kind .schoenrond img{width:40px;height:40px}
.schoen[aria-pressed="true"]{background:rgba(255,255,255,.85);box-shadow:var(--schaduw-laag)}
.schoen[aria-pressed="true"] .stip{transform:scale(1.4)}
.schoen[aria-pressed="true"] .lab{color:var(--oranje-diep)}
.schoenen.klein .schoen img{width:calc(var(--w) * .8);height:calc(var(--w) * .8)}
.schoenen{display:flex;align-items:flex-end;justify-content:center;gap:2px;position:relative}
.schoen{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:60px;padding:6px 2px;border-radius:12px;transition:transform .3s var(--veer)}
.schoen img{width:var(--w);height:var(--w);filter:drop-shadow(0 10px 12px rgba(43,79,75,.28))}
.schoen .stip{width:12px;height:12px;border-radius:50%;background:var(--kleur);box-shadow:0 0 0 3px rgba(255,255,255,.9),var(--schaduw-laag)}
.schoen .lab{font-family:var(--label);font-weight:700;font-size:14px;color:var(--groen-nacht)}
.schoen.hup img{animation:hup .6s var(--veer)}
@keyframes hup{0%{transform:none}40%{transform:translateY(-16px) rotate(-7deg)}70%{transform:translateY(2px)}100%{transform:none}}

/* Startscherm: de lucht */
.lucht{position:relative;height:45%;min-height:340px;overflow:hidden;border-radius:0 0 36px 36px;box-shadow:0 18px 40px -24px rgba(43,79,75,.5);transition:height .75s var(--zacht);color:#fff;isolation:isolate}
.lucht.gekozen{height:68%}
.lucht.klein{height:27%;min-height:210px}
.lucht-veld{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#46837D 0%,#46837D 28%,#6F8FB0 66%,#D3C6FE 100%);background-size:170% 170%;animation:lucht-drijf 36s ease-in-out infinite alternate;transition:opacity 1.2s}
.lucht-veld.laag2{opacity:0}
.lucht.gekozen .lucht-veld.laag1,.lucht.klein .lucht-veld.laag1{opacity:0}
.lucht.gekozen .lucht-veld.laag2,.lucht.klein .lucht-veld.laag2{opacity:1}
.app[data-weer="goed"] .laag2{background:linear-gradient(160deg,#fff6ea 0%,#f8f7f1 55%,#fbe9d4 100%)}
.app[data-weer="gaatwel"] .laag2{background:linear-gradient(160deg,#c4d7d3 0%,#dfe9e6 55%,#f8f7f1 100%)}
.app[data-weer="zorgen"] .laag2{background:linear-gradient(160deg,#c4d7d3 0%,#d9d6ee 55%,#d3c6fe 100%)}
.app[data-weer="verdrietig"] .laag2{background:linear-gradient(160deg,#6F8FB0 0%,#9aa6d4 55%,#d3c6fe 100%)}
.app[data-weer="boos"] .laag2{background:linear-gradient(160deg,#46837d 0%,#5c8aa0 55%,#6F8FB0 100%)}
.app[data-weer="op"] .laag2{background:linear-gradient(160deg,#d3c6fe 0%,#c6bfd9 55%,#b9b3c9 100%)}
.app[data-weer="goed"] .lucht,.app[data-weer="gaatwel"] .lucht,.app[data-weer="zorgen"] .lucht,.app[data-weer="op"] .lucht{--lucht-tekst:var(--groen-nacht)}
.app[data-weer="verdrietig"] .lucht,.app[data-weer="boos"] .lucht{--lucht-tekst:#fff}
@keyframes lucht-drijf{from{background-position:0% 0%}to{background-position:100% 100%}}
.gloed{position:absolute;z-index:1;width:260px;height:260px;border-radius:50%;filter:blur(40px);opacity:0;transition:opacity 1.2s;pointer-events:none}
.gloed.warm{right:-60px;top:-40px;background:var(--apricot)}
.gloed.flits{left:10%;top:10%;background:var(--oranje);width:200px;height:200px}
.app[data-weer="goed"] .gloed.warm{opacity:.75}
.app[data-weer="boos"] .lucht.gekozen .gloed.flits{animation:flits 2s ease-out 1}
@keyframes flits{0%{opacity:0}18%{opacity:.8}30%{opacity:.1}44%{opacity:.6}100%{opacity:0}}
.sluier{position:absolute;inset:-20px;z-index:1;opacity:0;transition:opacity 1.2s;background:radial-gradient(ellipse 70% 22% at 30% 38%,rgba(255,255,255,.55),rgba(255,255,255,0) 100%),radial-gradient(ellipse 80% 20% at 70% 62%,rgba(255,255,255,.5),rgba(255,255,255,0) 100%),radial-gradient(ellipse 60% 18% at 40% 84%,rgba(255,255,255,.45),rgba(255,255,255,0) 100%),linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.18));filter:blur(6px);pointer-events:none}
.app[data-weer="op"] .lucht.gekozen .sluier{opacity:1;animation:mist-schuif 2s ease-in-out 1}
@keyframes mist-schuif{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
.lucht-kop{position:absolute;z-index:3;left:18px;top:calc(var(--status-h) + 8px);right:70px;font-size:24px;color:#fff;text-shadow:1px 1px 10px rgba(0,0,0,.35);transition:opacity .4s}
.lucht.gekozen .lucht-kop,.lucht.klein .lucht-kop{opacity:0;pointer-events:none}
.bol{position:absolute;z-index:2;left:258px;top:calc(var(--status-h) + 4px);width:48px;height:48px;filter:drop-shadow(0 6px 10px rgba(43,79,75,.3));animation:adem-bol 10s ease-in-out infinite;transition:opacity .5s}
.lucht.gekozen .bol{opacity:0}
.lucht.klein .bol{left:auto;right:76px;top:calc(var(--status-h) + 10px);width:40px;height:40px}
@keyframes adem-bol{0%{transform:scale(.92)}40%{transform:scale(1.08)}100%{transform:scale(.92)}}
.weertje{position:absolute;z-index:4;width:96px;display:flex;flex-direction:column;align-items:center;gap:1px;left:var(--x);top:var(--y);transition:transform .9s var(--veer),opacity .55s,left .9s var(--veer),top .9s var(--veer);animation:zweef 7s ease-in-out infinite alternate;animation-delay:var(--d)}
.weertje img{width:80px;height:80px;filter:drop-shadow(0 12px 14px rgba(43,79,75,.32));transition:transform .5s var(--veer)}
.weertje .woord{font-family:var(--label);font-weight:700;font-size:13px;background:rgba(255,255,255,.86);color:var(--groen-nacht);padding:2px 11px;border-radius:999px;line-height:18px;box-shadow:var(--schaduw-laag)}
.weertje:active img{transform:scale(1.1)}
@keyframes zweef{from{margin-top:0}to{margin-top:-9px}}
.lucht.gekozen .weertje{opacity:0;transform:scale(.4);pointer-events:none;animation:none}
.lucht.gekozen .weertje.aan{opacity:1;left:calc(50% - 48px);top:calc((100% - 190px) / 2 - 40px);transform:scale(1.9);z-index:5}
.lucht.gekozen .weertje.aan .woord{opacity:0}
.lucht.klein .weertje{display:none}
.lucht.klein .weertje.aan{display:flex;flex-direction:row;gap:6px;width:auto;left:18px;top:calc(var(--status-h) + 12px);transform:none;animation:none;align-items:center;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:var(--schaduw-laag)}
.lucht.klein .weertje.aan img{width:36px;height:36px;filter:drop-shadow(0 3px 4px rgba(43,79,75,.25))}
.lucht.klein .weertje.aan .woord{background:none;box-shadow:none;padding:0}
.lucht.gekozen .weertje.aan[data-weer="regen"] img{animation:speel-regen 2s ease-in-out 1}
.lucht.gekozen .weertje.aan[data-weer="mist"] img{animation:speel-mist 2s ease-in-out 1}
.lucht.gekozen .weertje.aan[data-weer="goed"] img{animation:speel-zon 2s ease-in-out 1}
.lucht.gekozen .weertje.aan[data-weer="gaatwel"] img{animation:speel-zon 2s ease-in-out 1}
.lucht.gekozen .weertje.aan[data-weer="zorgen"] img{animation:speel-wind 2s ease-in-out 1}
.lucht.gekozen .weertje.aan[data-weer="boos"] img{animation:speel-onweer 2s ease-in-out 1}
@keyframes speel-regen{0%{transform:translateY(0)}25%{transform:translateY(8px)}50%{transform:translateY(0)}75%{transform:translateY(8px)}100%{transform:translateY(0)}}
@keyframes speel-mist{0%{transform:translateX(-10px);filter:drop-shadow(0 12px 14px rgba(43,79,75,.32)) blur(0)}50%{transform:translateX(10px);filter:drop-shadow(0 12px 14px rgba(43,79,75,.32)) blur(1px)}100%{transform:translateX(0)}}
@keyframes speel-zon{0%{filter:drop-shadow(0 12px 14px rgba(43,79,75,.32))}50%{filter:drop-shadow(0 0 28px rgba(245,124,0,.75))}100%{filter:drop-shadow(0 12px 14px rgba(43,79,75,.32))}}
@keyframes speel-wind{0%{transform:rotate(0)}30%{transform:rotate(-8deg) translateX(-6px)}65%{transform:rotate(7deg) translateX(6px)}100%{transform:rotate(0)}}
@keyframes speel-onweer{0%{filter:brightness(1)}15%{filter:brightness(1.6)}25%{filter:brightness(1)}45%{filter:brightness(1.5)}100%{filter:brightness(1)}}
.reactie{position:absolute;z-index:6;left:18px;right:18px;bottom:18px;padding:18px 18px 16px;border-radius:var(--r-tegel);background:rgba(255,255,255,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--schaduw-hoog),inset 0 1px 0 #fff;color:var(--tekst);display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .5s .9s,transform .6s .9s var(--veer);pointer-events:none}
.lucht.gekozen .reactie{opacity:1;transform:none;pointer-events:auto}
.reactie .zin{font-family:var(--kop);font-weight:700;font-size:20px;line-height:1.3;color:var(--tekst)}
.reactie .rij{flex-wrap:nowrap}
.reactie .knop{flex:1 1 auto;padding:10px 12px;font-size:17px}
.verder-luisteren{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 8px;border-radius:999px;background:var(--glas-dicht);box-shadow:var(--schaduw-laag);font-family:var(--label);font-weight:600;font-size:14px;color:var(--groen-nacht);width:100%;text-align:left}
.verder-luisteren .ronde{width:36px;height:36px;background:var(--lichtgroen-zacht);box-shadow:none}
.verder-luisteren .titel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 3 tegels op het startscherm */
.tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tegel{position:relative;aspect-ratio:1/1.32;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:10px 6px 10px;border-radius:var(--r-tegel);background:linear-gradient(170deg,#fff 0%,var(--l-tint) 100%);border:1px solid rgba(255,255,255,.95);box-shadow:var(--schaduw),inset 0 1px 0 #fff;text-align:center;overflow:hidden}
.tegel .beeld{flex:1;width:100%;display:grid;place-items:center;min-height:0}
.tegel .beeld img{width:70px;height:70px;filter:drop-shadow(0 10px 12px rgba(43,79,75,.28))}
.tegel .lab{font-family:var(--label);font-weight:700;font-size:13px;line-height:1.25;color:var(--groen-nacht);min-height:2.5em;display:flex;align-items:center;text-wrap:balance}

/* Tabbalk met 4 tabs */
.tabbalk{position:absolute;left:0;right:0;bottom:0;height:var(--tab-h);z-index:20;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;padding:0 8px 10px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.94));backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border-top:1px solid rgba(255,255,255,.9);box-shadow:0 -10px 30px -20px rgba(43,79,75,.3)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:54px;padding:6px 0 4px;font-family:var(--label);font-weight:600;font-size:12px;color:var(--tekst-zacht);border-radius:16px;transition:color .2s,transform .2s var(--veer)}
.tab .ico{width:24px;height:24px;stroke-width:1.6}
.tab[aria-current]{color:var(--groen-diep)}
.tab[aria-current]::before{content:"";position:absolute;inset:2px 6px;border-radius:16px;background:rgba(70,131,125,.13);z-index:-1}
.tab:active{transform:scale(.94)}

/* Lessen: 12 werelden als beeldtegels */
.werelden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wereld-tegel{position:relative;aspect-ratio:1/1.02;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:12px 10px 12px;border-radius:var(--r-tegel);background:linear-gradient(170deg,#fff 0%,var(--l-tint) 100%);border:1px solid rgba(255,255,255,.95);box-shadow:var(--schaduw),inset 0 1px 0 #fff;text-align:center;overflow:hidden}
.wereld-tegel .beeld{position:relative;flex:1;width:100%;display:grid;place-items:center;min-height:0}
.wereld-tegel .beeld::before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(255,179,102,.75) 0%,rgba(255,179,102,0) 70%);opacity:0;transition:opacity .8s;filter:blur(6px)}
.wereld-tegel.luisterde .beeld::before{opacity:1}
.wereld-tegel .beeld img{position:relative;width:96px;height:96px;filter:drop-shadow(0 12px 14px rgba(43,79,75,.3))}
.wereld-tegel .lab{font-family:var(--label);font-weight:700;font-size:15px;line-height:1.25;color:var(--groen-nacht);text-wrap:balance}
.wereld-tegel .seizoen{position:absolute;top:10px;left:10px;font-family:var(--label);font-weight:700;font-size:11px;color:var(--oranje-diep);background:rgba(255,255,255,.85);padding:1px 8px;border-radius:999px}

/* Een wereld: kopband in de kleur van de leeftijd */
.kopband{position:relative;height:238px;flex:none;background:linear-gradient(180deg,var(--l) 0%,var(--l-diep) 100%);border-radius:0 0 36px 36px;overflow:hidden;padding:calc(var(--status-h) + 8px) 18px 20px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;box-shadow:0 18px 40px -24px rgba(43,79,75,.55)}
.kopband::before{content:"";position:absolute;left:-40px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 70%)}
.kopband .groot{position:absolute;right:22px;top:calc(var(--status-h) + 40px);width:140px;height:140px;filter:drop-shadow(0 16px 18px rgba(0,0,0,.28));transform:translateY(calc(var(--scroll,0px) * .35));transition:transform .1s linear}
.kopband .terug-knop{position:absolute;left:14px;top:calc(var(--status-h) + 6px)}
.kopband h1{position:relative;font-size:28px;text-shadow:1px 1px 10px rgba(0,0,0,.3)}
.kopband .naam{position:relative;font-family:var(--label);font-weight:600;font-size:14px;opacity:.95}
.kopband.laag{height:150px}
#s-wereld .kopband{height:460px;padding:0;justify-content:flex-start}
#wereld-inhoud>.sectie{margin-top:58px}
/* het beeld van de wereld staat op de top van de aanloop (top op x 331 en y 281 van de band van 390 bij 460) */
#s-wereld .kopband .groot{width:118px;height:118px;right:2px;top:166px;z-index:3}
.kopband.laag .naam,.kopband.laag h1{max-width:60%}
.audiokaart{display:flex;align-items:center;gap:16px;padding:18px 18px;min-height:140px}
.audiokaart .speel{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#ffa347,var(--oranje-diep));box-shadow:0 8px 18px -6px rgba(245,124,0,.7),inset 0 1px 0 rgba(255,255,255,.4);flex:none;transition:transform .22s var(--veer)}
.audiokaart .speel:active{transform:scale(.92)}
.audiokaart .speel .ico{width:32px;height:32px}
.audiokaart .titel{font-family:var(--kop);font-weight:700;font-size:22px;line-height:1.2}
.audiokaart .duur{font-family:var(--label);font-weight:600;font-size:13px;color:var(--tekst-zacht)}
.audiokaart .golf{display:flex;align-items:center;gap:3px;height:26px;margin-top:8px}
.audiokaart .golf i{display:block;width:3px;height:var(--h);border-radius:2px;background:var(--l);opacity:.7}
.pillen{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -18px;padding:2px 18px 8px;scrollbar-width:none}
.pillen::-webkit-scrollbar{display:none}
.pillen .chip{flex:none;scroll-snap-align:start;white-space:nowrap;min-height:52px;font-size:18px;padding:8px 18px}
.leskaart{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-tegel);text-align:left;width:100%}
.leskaart .boek{width:44px;height:54px;border-radius:3px 8px 8px 3px;background:linear-gradient(100deg,var(--l-diep) 0 8px,var(--l) 8px 100%);box-shadow:var(--schaduw-laag);flex:none;position:relative}
.leskaart .boek::after{content:"";position:absolute;left:14px;right:8px;top:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.7);box-shadow:0 8px 0 rgba(255,255,255,.55)}
.leskaart .titel{font-family:var(--kop);font-weight:700;font-size:17px;line-height:1.2}
.leskaart .tag{font-family:var(--label);font-weight:700;font-size:12px;color:var(--lila-diep);background:var(--lila-zacht);padding:1px 8px;border-radius:999px;display:inline-block;margin-top:4px}
.leskaart .ico{color:var(--groen-diep)}

/* De stapel kaarten (vel) */
.stippen{display:flex;gap:6px;justify-content:center}
.stippen i{width:8px;height:8px;border-radius:50%;background:rgba(58,108,103,.25);transition:background .3s,transform .3s}
.stippen i.aan{background:var(--groen-diep);transform:scale(1.25)}
.stapel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -18px;padding:8px 18px 14px;scrollbar-width:none}
.stapel::-webkit-scrollbar{display:none}
.kaart-st{flex:0 0 100%;scroll-snap-align:center;min-height:400px;border-radius:18px;padding:28px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;background:linear-gradient(170deg,#fff 0%,var(--l-tint) 100%);border:1px solid rgba(255,255,255,.95);box-shadow:var(--schaduw)}
.kaart-st img{width:170px;height:170px;filter:drop-shadow(0 14px 16px rgba(43,79,75,.3))}
.kaart-st p{font-family:var(--kop);font-weight:600;font-size:22px;line-height:1.3;text-wrap:pretty}
.vel-onder{display:flex;gap:8px;align-items:center}
.vel-onder .knop{flex:1}

/* Pauze */
.rij3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pauze-tegel{position:relative;aspect-ratio:1/1.15;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:10px 8px;border-radius:var(--r-tegel);background:linear-gradient(170deg,#fff 0%,var(--l-tint) 100%);border:1px solid rgba(255,255,255,.95);box-shadow:var(--schaduw),inset 0 1px 0 #fff;text-align:center;overflow:hidden}
.pauze-tegel .beeld{flex:1;width:100%;display:grid;place-items:center;min-height:0}
.pauze-tegel .beeld img{width:66px;height:66px;filter:drop-shadow(0 10px 12px rgba(43,79,75,.28))}
.rij2 .pauze-tegel .beeld img{width:86px;height:86px}
.pauze-tegel .lab{font-family:var(--label);font-weight:700;font-size:13px;line-height:1.25;color:var(--groen-nacht)}
.rij2 .pauze-tegel .lab{font-size:15px}
.pauze-tegel.tekst{justify-content:center}
.pauze-tegel.tekst .lab{font-family:var(--kop);font-size:19px;font-weight:700;color:var(--l-diep)}
.pauze-tegel .beeld .adem-mini{width:70px;height:70px;animation:adem-bol 10s ease-in-out infinite}

/* Ademen: 4 tellen in, 6 uit */
#s-adem .inhoud{min-height:100%;align-items:center;text-align:center;justify-content:flex-start;gap:18px;padding-top:calc(var(--status-h) + 70px)}
.adem-vlak{position:relative;width:260px;height:260px;display:grid;place-items:center}
.adem-gloed{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(211,198,254,.9),rgba(196,215,211,.4) 55%,rgba(255,255,255,0) 72%);filter:blur(10px);transform:scale(.7);transition:transform 4s ease-in-out}
.cirkel{position:relative;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.98),rgba(227,238,235,.9) 55%,rgba(185,207,202,.9));box-shadow:var(--schaduw-hoog),inset 0 2px 8px rgba(255,255,255,.9),inset 0 -8px 20px rgba(58,108,103,.12);transform:scale(.72);transition:transform 4s ease-in-out;display:grid;place-items:center}
.adem-vlak.in .cirkel{transform:scale(1.2)}
.adem-vlak.in .adem-gloed{transform:scale(1.25)}
.adem-vlak.uit .cirkel,.adem-vlak.uit .adem-gloed{transform:scale(.72);transition-duration:6s}
.adem-vlak.klaar .cirkel{transform:scale(1);transition-duration:1s}
.adem-woord{font-family:var(--kop);font-weight:700;font-size:26px;color:var(--groen-nacht)}
#s-adem h1{font-size:26px}

/* Jij */
.kindrij{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px 10px}
.kind-rij{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:4px;border-radius:var(--r-tegel);text-align:left}
.kind-rij:active{transform:scale(.985)}
.kind-rij .groei{display:flex;flex-direction:column;gap:2px}
.kind-rij .naam{font-family:var(--kop);font-weight:700;font-size:20px;line-height:1.2}
.kind-rij .lft{font-family:var(--label);font-weight:600;font-size:14px;color:var(--tekst-zacht)}
.kind-rij .ico{color:var(--groen-diep);margin-left:auto}
.kindrij .onder{display:flex;justify-content:flex-end;padding:2px 4px 4px}
.kind-keus[aria-current="true"]{border-color:var(--l);box-shadow:var(--schaduw-laag),0 0 0 2px var(--l)}
.kind-keus .klein{font-family:var(--label);font-weight:600;font-size:14px;color:var(--tekst-zacht)}
.vel-onder.kind-onder{justify-content:space-between}
.vel-onder.kind-onder .knop{flex:0 1 auto}
.kindrij .schoenrond{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--l-tint));display:grid;place-items:center;box-shadow:var(--schaduw-laag);flex:none}
.kindrij .schoenrond img{width:48px;height:48px;filter:drop-shadow(0 4px 5px rgba(43,79,75,.25))}
.kindrij .leeftijd{font-family:var(--kop);font-weight:700;font-size:20px}
.kindrij .knop{min-height:40px;padding:6px 14px;font-size:16px}
.normaalkaart{display:flex;align-items:center;gap:14px;padding:16px 16px;text-align:left;width:100%}
.normaalkaart img{width:84px;height:84px;filter:drop-shadow(0 8px 10px rgba(43,79,75,.28));flex:none}
.normaalkaart .titel{font-family:var(--kop);font-weight:700;font-size:21px;line-height:1.2}
.lijst{display:flex;flex-direction:column;gap:8px}
.lijstrij{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:var(--r-tegel);background:var(--glas-dicht);border:1px solid rgba(255,255,255,.9);box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff;width:100%;text-align:left;min-height:62px}
.lijstrij .beeldje{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--l-tint);flex:none}
.lijstrij .beeldje svg{width:34px;height:34px}
.lijstrij .beeldje img{width:34px;height:34px;filter:drop-shadow(0 3px 4px rgba(43,79,75,.25))}
.lijstrij .titel{font-family:var(--kop);font-weight:700;font-size:18px;flex:1}
.lijstrij .ico{color:var(--groen-diep)}
.plant{position:relative;width:30px;height:30px}
.plant .pot{position:absolute;left:7px;right:7px;bottom:0;height:12px;border-radius:2px 2px 6px 6px;background:linear-gradient(180deg,#f3a05a,var(--oranje-diep))}
.plant .steel{position:absolute;left:14px;bottom:11px;width:2px;height:12px;background:var(--groen-diep);border-radius:1px}
.plant .blad{position:absolute;width:11px;height:7px;border-radius:50% 0;background:linear-gradient(135deg,#8fbcb5,var(--groen));bottom:16px}
.plant .blad.l{left:4px;transform:rotate(-30deg)}
.plant .blad.r{right:4px;transform:scaleX(-1) rotate(-30deg)}
.plant .blad.n{left:9px;bottom:22px;width:9px;height:6px;transform:rotate(-70deg);transform-origin:bottom right;animation:blad-groei .8s var(--veer)}
@keyframes blad-groei{from{transform:rotate(-70deg) scale(0)}to{transform:rotate(-70deg) scale(1)}}
.plant.groot{width:120px;height:120px;margin:0 auto}
.plant.groot .pot{left:30px;right:30px;height:46px;border-radius:4px 4px 18px 18px}
.plant.groot .steel{left:58px;bottom:44px;width:5px;height:46px}
.plant.groot .blad{width:44px;height:28px;bottom:66px}
.plant.groot .blad.l{left:18px}
.plant.groot .blad.r{right:18px}
.plant.groot .blad.n{left:40px;bottom:92px;width:34px;height:22px}

/* Meedenken: het gesprek */
#s-gesprek{display:none;flex-direction:column}
#s-gesprek.actief{display:flex}
.gesprek-top{position:absolute;z-index:10;top:0;left:0;right:0;display:flex;flex-direction:column;gap:14px;padding:calc(var(--status-h) + 4px) 12px 10px;background:linear-gradient(180deg,rgba(248,247,241,1) 82%,rgba(248,247,241,0))}
.gesprek-topregel{display:flex;align-items:center;gap:8px;padding-right:60px;min-height:44px}
.weerchip{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 4px;border-radius:999px;background:var(--glas-dicht);box-shadow:var(--schaduw-laag);font-family:var(--label);font-weight:700;font-size:13px;color:var(--groen-nacht);min-height:40px}
.weerchip img{width:32px;height:32px;filter:drop-shadow(0 3px 4px rgba(43,79,75,.25))}
.weerchip.open{gap:8px}
.weerchip .weg{color:var(--groen-diep);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.gesprek-lijst{position:absolute;top:0;bottom:calc(var(--tab-h) + var(--onder-h,74px));left:0;right:0;overflow-y:auto;overflow-x:hidden;padding:calc(var(--status-h) + 66px + var(--strook-h) + 10px) 18px 20px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none;scroll-behavior:smooth}
.gesprek-lijst::-webkit-scrollbar{display:none}
.vergis{font-family:var(--label);font-weight:500;font-size:13px;color:var(--tekst-zacht);text-align:center;padding:4px 10px}
.ballon{align-self:flex-end;max-width:84%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:linear-gradient(180deg,#4f8f88,var(--groen-diep));color:#fff;font-weight:400;box-shadow:var(--schaduw-laag)}
.ballon.knopje-antwoord{background:var(--glas-dicht);color:var(--tekst);border:1px solid rgba(58,108,103,.2)}
.systeem{font-family:var(--label);font-weight:600;font-size:13px;color:var(--tekst-zacht);text-align:center}
.antwoord{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.ai-label{display:flex;align-items:center;gap:8px;font-family:var(--label);font-weight:700;font-size:12px;color:var(--groen-diep);letter-spacing:.04em}
.ai-label img{width:28px;height:28px;filter:drop-shadow(0 3px 4px rgba(43,79,75,.25))}
.wacht{display:flex;align-items:center;gap:14px;padding:6px 0}
.wacht img{width:64px;height:64px;animation:adem-bol 5s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(43,79,75,.3))}
.wacht strong{font-family:var(--kop);font-size:17px}
.alineas p{margin-bottom:10px;text-wrap:pretty}
.alineas p:last-child{margin-bottom:0}
.kaarten{display:flex;flex-direction:column;gap:12px}
.zegkaart{padding:16px 18px 10px;display:flex;flex-direction:column;gap:10px}
.zegkaart .zin{font-family:var(--kop);font-weight:700;font-size:20px;line-height:1.3;text-wrap:pretty}
.zegkaart .zin+.zin{padding-top:8px;border-top:1px solid rgba(58,108,103,.14)}
.ikonen{display:flex;gap:2px;margin:0 -6px}
.ikonen .ronde{background:rgba(58,108,103,.07);box-shadow:none}
.vraagblok{display:flex;flex-direction:column;gap:10px}
.vraagblok p{font-family:var(--kop);font-weight:700;font-size:18px}
.duimen{display:flex;gap:4px;align-items:center}
/* Sparren met een orthopedagoog (23-10-2026): de kleine link onder een antwoord waarin Uni het opvoedconsult noemt, rustig en klein, met een tikvlak van 44px */
.consult-link{margin:-4px 0 -8px}
.consult-link .tekstlink{min-height:44px;font-size:14px;color:var(--tekst-zacht)}
.duim{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tekst-zacht);transition:background .2s,color .2s,transform .22s var(--veer)}
.duim[aria-pressed="true"]{background:rgba(70,131,125,.14);color:var(--groen-diep)}
.duim:active{transform:scale(.9)}
.fout{font-family:var(--label);font-weight:600;font-size:14px;color:var(--fout);background:rgba(154,60,46,.08);border-radius:var(--r-kaart);padding:8px 12px}
.afgebroken{font-family:var(--label);font-weight:600;font-size:13px;color:var(--tekst-zacht)}
.hulpkaart{padding:14px 16px;display:flex;flex-direction:column;gap:10px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag)}
.belknop{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;border-radius:var(--r-knop);background:linear-gradient(180deg,#4f8f88,var(--groen-diep));color:#fff;font-family:var(--kop);font-size:17px;text-decoration:none;box-shadow:var(--knop-schaduw)}
.belknop.tweede{background:var(--glas-dicht);color:var(--groen-diep);border:1px solid rgba(58,108,103,.3)}
.gesprek-onder{position:absolute;z-index:10;left:0;right:0;bottom:var(--tab-h);padding:8px 14px 10px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(0deg,rgba(248,247,241,1) 60%,rgba(248,247,241,0))}
.gesprek-onder .vertel{align-items:flex-end;padding:6px 6px 6px 16px}
.gesprek-onder textarea{flex:1;min-width:0;resize:none;background:none;border:0;outline:none;font-family:var(--kop);font-size:18px;color:var(--tekst);line-height:24px;min-height:44px;max-height:84px;padding:10px 0}
.gesprek-onder textarea::placeholder{color:var(--tekst-zacht);opacity:1}
.gesprek-onder .ronde.verbleekt{opacity:.45}
.gesprek-onder .ronde.stop{background:var(--fout);color:#fff}
.gesprek-grens{padding:12px 14px;display:flex;flex-direction:column;gap:8px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag)}
.gesprek-grens p{text-wrap:pretty}
.gesprek-teller{font-family:var(--label);font-weight:600;font-size:13px;color:var(--tekst-zacht);text-align:center}

/* Vellen die van onder omhoog schuiven */
.vel{position:absolute;inset:0;z-index:40;pointer-events:none}
.vel .dimlaag{position:absolute;inset:0;background:var(--dim);opacity:0;transition:opacity .4s}
.vel .paneel{position:absolute;left:0;right:0;bottom:0;max-height:92%;overflow:auto;background:var(--creme);border-radius:22px 22px 0 0;box-shadow:0 -12px 40px -16px rgba(43,79,75,.45),inset 0 1px 0 #fff;padding:12px 18px 30px;display:flex;flex-direction:column;gap:14px;transform:translateY(104%);transition:transform .58s var(--veer);scrollbar-width:none}
.vel .paneel::-webkit-scrollbar{display:none}
.vel.open{pointer-events:auto}
.vel.open .dimlaag{opacity:1}
.vel.open .paneel{transform:none}
.vel.hoog .paneel{height:92%}
.vel .greep{width:40px;height:5px;border-radius:3px;background:rgba(58,108,103,.25);margin:0 auto}
.velkop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:58px}
.velkop h2{font-size:22px}
.vel .kopband{margin:-12px -18px 4px;border-radius:22px 22px 36px 36px;height:200px;padding-top:54px}
.vel .kopband .terug-knop{top:14px}
.vel .kopband .groot{top:44px;width:118px;height:118px;right:70px}
.vel .kopband .groot img{width:100%;height:100%}
.les-product{font-family:var(--label);font-weight:600;font-size:14px;color:var(--tekst-zacht)}
.luisterknop{width:120px;height:120px;border-radius:50%;margin:10px auto;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#ffa347,var(--oranje-diep));box-shadow:0 16px 30px -10px rgba(245,124,0,.8),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .22s var(--veer)}
.luisterknop:active{transform:scale(.94)}
.luisterknop .ico{width:48px;height:48px;stroke-width:1.4}
.luisterknop.speelt .ico{stroke-width:2.2}
.lees-mee{display:flex;flex-direction:column;gap:10px}
.lees-mee .tekst{display:none}
.lees-mee.open .tekst{display:block}
.lees-mee .tekst p{margin-bottom:10px;text-wrap:pretty}
.lees-mee .tekst .kern{background:var(--lichtgroen);padding:2px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.normaal-lijst{display:flex;flex-direction:column;gap:6px}
.normaal-lijst button{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag);font-family:var(--kop);font-size:17px;text-align:left;width:100%}
.normaal-lijst button .ico{margin-left:auto;color:var(--groen-diep)}
.normaalkaart-open{padding:18px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(170deg,#fff,var(--l-tint));border-radius:18px;box-shadow:var(--schaduw)}
.normaalkaart-open .zin{font-family:var(--kop);font-weight:600;font-size:21px;line-height:1.3}
.bewaardrij{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag)}
.bewaardrij .zin{font-family:var(--kop);font-weight:700;font-size:17px;flex:1;line-height:1.3}
.bewaardrij .bron{font-family:var(--label);font-weight:600;font-size:12px;color:var(--tekst-zacht)}
.leeg{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;text-align:center}
.leeg img{width:110px;height:110px;filter:drop-shadow(0 10px 12px rgba(43,79,75,.28))}
.leeg p{font-family:var(--kop);font-weight:600;font-size:19px;color:var(--tekst-zacht)}
.schakel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag);font-family:var(--kop);font-size:17px;width:100%;text-align:left}
.schakelaar{width:52px;height:30px;border-radius:15px;background:rgba(58,108,103,.25);position:relative;flex:none;transition:background .25s}
.schakelaar::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:var(--knop-schaduw);transition:transform .25s var(--veer)}
.schakelaar[aria-checked="true"]{background:var(--groen)}
.schakelaar[aria-checked="true"]::after{transform:translateX(22px)}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-family:var(--label);font-weight:600;font-size:13px;color:var(--groen-diep)}
.veld input{min-height:48px;padding:8px 14px;border-radius:var(--r-knop);border:1px solid rgba(58,108,103,.3);background:#fff;font-family:var(--kop);font-size:18px;width:100%}
.landkeuze{display:flex;gap:8px}
.klapkop{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;font-family:var(--kop);font-weight:700;font-size:18px;text-align:left}
.klap .klapvlak{display:none;padding-top:10px}
.klap.open .klapvlak{display:flex;flex-direction:column;gap:10px}
.klap.open .klapkop .ico{transform:rotate(180deg)}

/* Speler boven de tabbalk */
.speler{position:absolute;left:12px;right:12px;bottom:calc(var(--tab-h) + 8px);z-index:25;display:none;align-items:center;gap:10px;padding:8px 10px 8px 8px;border-radius:999px;background:var(--glas-dicht);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--schaduw-hoog),inset 0 1px 0 #fff;transform:translateY(20px);opacity:0;transition:transform .4s var(--veer),opacity .3s}
.speler.aan{display:flex;transform:none;opacity:1}
.speler .ronde{background:linear-gradient(180deg,#4f8f88,var(--groen-diep));color:#fff;box-shadow:var(--knop-schaduw)}
.speler .titel{flex:1;min-width:0;font-family:var(--label);font-weight:700;font-size:14px;color:var(--groen-nacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.speler .balk{position:absolute;left:58px;right:58px;bottom:4px;height:3px;border-radius:2px;background:rgba(58,108,103,.15);overflow:hidden}
.speler .balk i{display:block;height:100%;width:100%;background:var(--groen);transform-origin:left;transform:scaleX(0);transition:transform .3s linear}

/* Toast en vouw-animatie */
.toast{position:absolute;left:50%;bottom:calc(var(--tab-h) + 20px);transform:translate(-50%,20px);z-index:70;background:var(--groen-nacht);color:#fff;font-family:var(--label);font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px;box-shadow:var(--schaduw-hoog);opacity:0;transition:opacity .3s,transform .4s var(--veer);pointer-events:none;max-width:88%;text-align:center}
.toast.zichtbaar{opacity:1;transform:translate(-50%,0)}
.vouw-zin{position:absolute;z-index:65;max-width:220px;padding:8px 12px;border-radius:12px;background:var(--glas-dicht);box-shadow:var(--schaduw-hoog);font-family:var(--kop);font-weight:700;font-size:15px;pointer-events:none;transition:transform .9s var(--zacht),opacity .9s}

/* De aanloop, het vaste beeld van de Online Opvoed Uni (handtekening, 19-10-2026): één lijn in 3 treden naar een korte top, een dunnere lijn voor de ouder, 3 lagen landschap erachter */
.aanloop{display:block;width:100%;height:100%;overflow:visible}
.aanloop .obj{transform-box:fill-box;transform-origin:50% 100%}
.aanloop .obj.nieuw{animation:obj-val .75s var(--veer)}
@keyframes obj-val{0%{opacity:0;transform:translateY(-22px) scale(.5)}60%{opacity:1;transform:translateY(2px) scale(1.05)}100%{opacity:1;transform:none}}
.aanloop .laag{transition:opacity .8s,filter .8s}
.aanloop .laag-jaren.op{animation:jaren-op 2.4s ease-in-out 1}
@keyframes jaren-op{0%{filter:url(#a-vaag) brightness(1)}30%{filter:url(#a-vaag) brightness(1.35)}100%{filter:url(#a-vaag) brightness(1)}}
.aanloop .erna{opacity:0;transition:opacity 1.2s}
.aanloop .erna.op{opacity:1}
.aanloop[data-laag="patroon"] .laag-weken{filter:url(#a-zacht) brightness(1.18) saturate(1.1)}
.aanloop[data-laag="patroon"] .laag-jaren,.aanloop[data-laag="patroon"] .laag-uur{opacity:.55}
.aanloop[data-laag="vooraf"] .laag-jaren,.aanloop[data-laag="vooraf"] .laag-weken{opacity:.5}
.aanloop[data-laag="nog"] .lijn-kind{opacity:.45}
.aanloop[data-laag="nog"] .laag-jaren,.aanloop[data-laag="nog"] .laag-weken{opacity:.5}
.aanloop[data-laag="nog"] .lijn-ouder{stroke-width:6}
.aanloop[data-laag="mis"] .laag-jaren,.aanloop[data-laag="mis"] .laag-weken{opacity:.6}
.aanloop-klein{height:112px;border-radius:var(--r-tegel);overflow:hidden;background:linear-gradient(180deg,var(--l-tint),#fff 60%);box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff;flex:none}
.aanloop-klein.handtekening{height:120px;background:linear-gradient(180deg,#e6edf3,#fff 60%)}
.kaart-st .aanloop-klein{width:100%;height:118px;box-shadow:none;background:none;margin:-6px 0 -4px}

/* Horizon op het startscherm: de lijn ligt vlak waar de lucht ophoudt */
.horizon{position:absolute;z-index:3;left:0;right:0;bottom:4px;height:40px;opacity:.9;transition:bottom .75s var(--zacht),opacity .5s;animation:zweef 9s ease-in-out infinite alternate;pointer-events:none}
.lucht.gekozen .horizon{bottom:148px}
.lucht.klein .horizon{bottom:0;height:26px}
.horizon .lijn-trek{stroke-dasharray:1;stroke-dashoffset:0}
.app[data-weer="boos"] .lucht.gekozen .horizon .lijn-trek{animation:trek 2.2s cubic-bezier(.25,.8,.25,1) .3s both}
@keyframes trek{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* De kop van een wereld: landschap, lijn, het beeld op de top en de 3 vragen op de lijn */
.aanloop-kop .aanloop-vlak{position:absolute;inset:0;z-index:0}
.aanloop-kop .kop-tekst{position:absolute;z-index:2;left:66px;right:140px;top:calc(var(--status-h) + 6px);display:flex;flex-direction:column;gap:2px}
.aanloop-kop h1{font-size:24px;line-height:1.15}
.vraag-pillen{position:absolute;inset:0;z-index:4;pointer-events:none}
.vraag-pil{position:absolute;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px 4px 6px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--groen-nacht);font-family:var(--label);font-weight:700;font-size:13px;line-height:1.15;box-shadow:0 1px 2px rgba(43,79,75,.1),0 10px 20px -10px rgba(43,79,75,.5),inset 0 1px 0 #fff;pointer-events:auto;white-space:nowrap;transition:transform .22s var(--veer),background .2s;--pil-x:0px;--pil-y:0px;left:var(--pil-x);top:var(--pil-y)}
.vraag-pil:active{transform:scale(.95)}
.vraag-pil .pil-ico{width:26px;height:26px;border-radius:50%;background:var(--l-tint);display:grid;place-items:center;flex:none}
.vraag-pil .pil-ico svg{width:20px;height:20px}
.vraag-pil .pil-ico img{width:24px;height:24px;filter:drop-shadow(0 2px 2px rgba(43,79,75,.25))}
.vraag-pil.mis{background:linear-gradient(180deg,#fff,#fff5ea)}
.vraag-pil.mis .pil-ico{background:#fde7cf}

/* Meedenken: de strook die meegroeit terwijl de ouder vertelt */
.strook{position:relative;height:var(--strook-h);border-radius:var(--r-tegel);overflow:hidden;background:linear-gradient(180deg,#eef2f7 0%,#f6f3ff 100%);border:1px solid rgba(255,255,255,.95);box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff}
.strook-svg{position:absolute;inset:0}
.strook-zin{position:absolute;z-index:3;left:12px;top:10px;font-family:var(--kop);font-weight:700;font-size:16px;color:var(--groen-nacht);background:rgba(255,255,255,.9);padding:3px 12px;border-radius:999px;box-shadow:var(--schaduw-laag);animation:zin-in .5s var(--veer)}
@keyframes zin-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* De knop Kan het kleiner? en de streep onder een advies zijn eruit (zesde ronde, Lara 20-10-2026) */

/* Het ging mis: de route in 3 kaarten */
#vel-hulp{z-index:45}
.kaart-st.route{justify-content:flex-start;gap:14px;padding:22px 20px 18px;min-height:0}
.kaart-st.route .label{font-size:14px}
.kaart-st.route .zin{font-family:var(--kop);font-weight:600;font-size:21px;line-height:1.3;text-wrap:pretty}
.kaart-st.route .zegkaart{width:100%;text-align:left;padding:14px 16px 8px}
.kaart-st.route .zegkaart .zin{font-size:18px;font-weight:700}
.kaart-st.route .knop{align-self:stretch}
.kaart-st.route .klein{text-wrap:pretty}
.kaart-st.route p.klein{font-family:var(--label);font-weight:500;font-size:15px;line-height:1.45;color:var(--tekst-zacht)}
.kaart-st.route .tekstlink.inline{display:inline;min-height:0;font-size:15px}
.aanloop-klein.mis{background:linear-gradient(180deg,#fff5ea,#fff 60%)}

/* Klei-iconen in SVG waar nog geen kleibeeld is */
.klei{width:34px;height:34px}

/* Minder beweging: alles staat stil, alles blijft zichtbaar */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;scroll-behavior:auto!important}
  .bol,.weertje,.ai-label img,.wacht img,.wacht .uni-rond,.adem-mini{animation:none!important}
  .adem-vlak .cirkel,.adem-vlak .adem-gloed{transition-duration:.01s!important}
  .kopband .groot{transform:none!important}
  .obj.nieuw,.horizon,.strook-zin{animation:none!important}
  .aanloop .lijn-trek{stroke-dashoffset:0!important}
}
/* 19 oktober 2026 (via Bas, nakijkronde): lucht van de kennismaking weer zichtbaar, gekozen weertje groot in het midden van een hogere lucht, gesprekslijst eindigt boven het onderblok, grotere 3 vragen, hogere kopband in een wereld met lessen onder de vouw, productnaam in het lesvel naast het beeld. */
/* 19 oktober 2026 (via Bas, vierde bouwronde): de aanloop als vast beeld (horizon, kop van een wereld met 4 pillen op de lijn, strook in Meedenken, stapelkaart, Het ging mis), de dinsdagavondtoets, de route in 3 kaarten, De andere ouder, scenario's in een veegrij, en alle lijniconen vervangen door kleibeelden of klei in SVG. */
/* 19 oktober 2026 (via Bas, nakijkronde na de vierde bouwronde): horizon 40 px hoog voor de lage aanloop met treden, het beeld van een wereld op de top van de aanloop, knoppen in de reactie op het weer naar hun eigen breedte, de regel naar Hulp op kaart 1 van Het ging mis in één kleine lettermaat, en tegellabels die gelijkmatig afbreken. */

/* Lara als mens achter de app (20-10-2026): het welkom bij de eerste keer en het briefje bij Wie maakt dit? */
.vel.welkom .paneel{align-items:center;text-align:center;gap:10px;background:linear-gradient(180deg,var(--lila-zacht) 0%,var(--creme) 46%);padding-bottom:26px}
/* lijst volgende ronde (Lara 20-10-2026, "alleen mijn gezicht uit die foto met hetzelfde vierkanten blokje als op de andere icoontjes" en "precies hetzelfde kleurtje"):
   Lara zonder achtergrond in het blokje van de kleibeelden in Jij, in dezelfde tint (--l-tint) en met dezelfde verhouding van de hoeken (12 px op 44 px), zonder rond kader, witte rand of schaduw.
   De foto staat onderaan op de rand van het blokje, zoals in prototype/beeld/lara-vrij-op-tegel.jpg; klein (Lara ziet zichzelf liever klein). */
.lara-tegel{position:relative;display:block;overflow:hidden;border-radius:27%;background:var(--l-tint);flex:none}
.lara-tegel img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:none}
.welkom-beeld{width:144px;height:144px;margin:6px 0 4px}
/* in een vel ligt het blokje op lila, dus daar de zachte schaduw van de tegels erbij, anders lost de tint op in de achtergrond */
.vel .lara-tegel{box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff}
.brief{display:flex;flex-direction:column;gap:10px}
.brief p{font-family:var(--kop);font-size:19px;line-height:1.42;color:var(--tekst);text-wrap:pretty}
.brief .groet{font-family:var(--label);font-weight:700;font-size:17px;line-height:1.35;color:var(--groen-diep)}
.vel.welkom .brief{max-width:330px;margin-bottom:6px}
/* de foto staat links in het briefje en de tekst loopt er in een boog omheen (shape-outside) */
.lara-brief{display:flow-root;padding:16px 16px 16px 14px;border-radius:18px;background:linear-gradient(170deg,#fff,var(--lila-zacht));box-shadow:var(--schaduw-laag)}
.lara-brief .lara-tegel{float:left;width:124px;height:124px;margin:2px 14px 6px 0}
/* in lila staat Lara iets links in de foto, dus haar gezicht schuift naar het midden van het blokje */
.lara-brief .lara-tegel img{transform:translateX(6%)}
.lara-brief .brief{display:block}
.lara-brief .brief p+p{margin-top:10px}
/* in de leesletter, net als de alinea eronder: één letter en maat voor lopende tekst op een scherm (nakijkronde 20-10-2026) */
.lara-brief .brief p:not(.groet){font-family:var(--lees);font-size:var(--tekst-maat);font-weight:var(--tekst-gewicht);line-height:1.6}
.lara-brief .brief .groet{font-size:15px}

/* Uni de uil (vijfde ronde 20-10-2026, Lara: "Doe maar A (uiltje b)"): altijd in een crèmekleurig rondje, zodat de groene uil ook op groen en op de tint van 12-18 goed staat */
.uni-rond{display:inline-grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0%,var(--creme) 62%);box-shadow:0 1px 2px rgba(43,79,75,.12),0 4px 10px -4px rgba(43,79,75,.32),inset 0 0 0 1px rgba(255,255,255,.95);flex:none;overflow:hidden}
.uni-rond img{width:82%;height:82%;margin-top:4%;filter:none;animation:none}
.ai-label .uni-rond{width:32px;height:32px}
.ai-label .uni-rond img{width:84%;height:84%;filter:none}
.wacht .uni-rond{width:64px;height:64px;animation:adem-bol 5s ease-in-out infinite;box-shadow:0 2px 4px rgba(43,79,75,.12),0 10px 18px -8px rgba(43,79,75,.4),inset 0 0 0 1px rgba(255,255,255,.95)}
.wacht .uni-rond img{width:82%;height:82%;animation:none;filter:none}
.lijstrij .beeldje.uni-rond{border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0%,var(--creme) 62%)}
.lijstrij .beeldje.uni-rond img{width:36px;height:36px;filter:none}
/* Wie maakt dit? in Jij heeft hetzelfde blokje als de rijen erboven, met Lara iets groter zodat haar gezicht ook op 44 px te zien is */
.lijstrij .beeldje.lara-tegel{display:block;border-radius:12px}
.lijstrij .beeldje.lara-tegel img{width:100%;height:100%;filter:none;transform:translateX(6%) scale(1.3);transform-origin:44% 0}
/* het chipje bij meer kinderen samen: de schoentjes naast elkaar, een beetje over elkaar heen */
.chip-leeftijd.samen .schoentjes{display:inline-flex}
.chip-leeftijd.samen .schoentjes img{width:26px;height:26px}
.chip-leeftijd.samen .schoentjes img+img{margin-left:-9px}
/* 20 oktober 2026 (via Bas, vijfde ronde): Uni als uil in een crèmekleurig rondje, echte ronde foto's van Lara bij het welkom en bij Wie maakt dit?, het chipje met meer schoentjes bij een gesprek over meer kinderen samen. */
/* nakijkronde 20-10-2026: na een antwoord blijft de gekozen knop onder Ging het om ...? gevuld staan en gaan de andere uit; in Je gesprekken staat de onderregel onder de titel, zodat 2 of 3 namen de titel niet wegdrukken */
.vraagblok .chip:disabled{cursor:default}
.vraagblok .chip:disabled:not(.aan){opacity:.45;box-shadow:none}
.vraagblok .chip:disabled:active{transform:none}
.lijstrij .groei.stapel{display:flex;flex-direction:column;gap:1px}
.lijstrij .groei.stapel .titel{flex:none;line-height:1.25}

/* ===== Zesde ronde, 20 oktober 2026 (via Bas, besluiten Lara van 20-10) ===== */
/* Jongen of meisje in de kennismaking en bij wijzigen in Jij */
.kennis-g{cursor:default;gap:10px;padding:8px 8px 8px 8px}
.kennis-g .naam{flex:1;min-width:0;font-family:var(--kop);font-weight:600;font-size:20px;color:var(--tekst);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kennis-g .keus{display:flex;gap:6px;flex:none}
.kennis-g .chip{min-height:44px;padding:8px 14px;font-size:16px}
.kennis-g .chip[aria-pressed="true"],#kindwijzig-g .chip[aria-pressed="true"]{background:linear-gradient(180deg,#4f8f88,var(--groen-diep));color:#fff;border-color:var(--groen-nacht)}
.kennis-rij.eind{justify-content:flex-end}
#kindwijzig-g{gap:6px}
#kindwijzig-g .chip{font-size:16px}

/* Er lukte iets op het startscherm: een lichte pil met het plantje */
.lukte-knop{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:48px;padding:6px 18px 6px 10px;border-radius:999px;background:linear-gradient(170deg,#fff,#fff4e8);border:1px solid rgba(255,255,255,.95);box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff;font-family:var(--kop);font-weight:700;font-size:17px;color:var(--groen-nacht)}
.lukte-knop .plant{transform:scale(.95)}

/* Zo gaat het met jullie: de kaart op het startscherm */
.vg-kaart{display:flex;align-items:center;gap:12px;width:100%;padding:14px 14px 14px 18px;text-align:left}
.vg-kaart .groei{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.vg-kaart .titel{font-family:var(--kop);font-weight:700;font-size:18px;color:var(--groen-nacht)}
.vg-kaart .zin{font-family:var(--lees);font-size:15px;line-height:1.45;color:var(--tekst);text-wrap:pretty}
.vg-kaart.signaal{background:linear-gradient(160deg,#fff 0%,#fff3e6 100%)}
.vg-mini{width:112px;height:54px;flex:none}
.vg-lijn{display:block;width:100%;height:118px;overflow:visible}
.vg-lijn.klein{height:54px}

/* Zo gaat het met jullie: het vel */
.voortgang{display:flex;flex-direction:column;gap:18px}
.vg-kinderen{gap:6px}
.vg-kinderen .chip{min-height:40px;padding:6px 14px;font-size:16px}
.vg-blok{display:flex;flex-direction:column;gap:10px}
.vg-blok h3{font-size:19px;color:var(--groen-nacht)}
.vg-blok>p{text-wrap:pretty}
.vg-grafiek{position:relative;padding:12px 10px 4px;border-radius:18px;background:linear-gradient(180deg,#fff 0%,var(--l-tint) 100%);box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff}
.vg-maanden{position:relative;height:22px;margin:4px 12px 0}
.vg-maanden span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--label);font-weight:600;font-size:12px;color:var(--tekst-zacht)}
.vg-maanden span:first-child{transform:none}
.vg-maanden span:last-child:not(:first-child){transform:translateX(-100%)}
.vg-zin{font-family:var(--kop);font-weight:600;font-size:19px;line-height:1.38;color:var(--tekst);text-wrap:pretty}
.vg-weken{display:flex;flex-direction:column;gap:6px}
.vg-rij{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.vg-week{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:var(--glas-dicht);box-shadow:var(--schaduw-laag)}
.vg-week img{width:80%;height:80%;filter:drop-shadow(0 4px 5px rgba(43,79,75,.25))}
.vg-week.leeg{background:rgba(255,255,255,.45);box-shadow:none}
.vg-week:last-child{box-shadow:var(--schaduw-laag),0 0 0 2px var(--oranje-licht)}
.vg-signaal{display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;border-radius:18px;background:linear-gradient(170deg,#fff 0%,#fff3e6 100%);box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff}
.vg-signaal .zin{font-family:var(--kop);font-weight:600;font-size:19px;line-height:1.35;text-wrap:pretty}
.vg-signaal p:not(.zin){font-size:15px;line-height:1.5;text-wrap:pretty}
.vg-lichtpuntjes{display:flex;flex-direction:column;gap:8px}
.vg-licht{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag)}
.vg-licht .stip{width:12px;height:12px;margin-top:8px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#ffd199,var(--oranje));box-shadow:0 0 0 4px rgba(245,124,0,.14)}
.vg-licht p{font-family:var(--kop);font-weight:600;font-size:17px;line-height:1.35}
.vg-ontdekt{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag)}
.vg-ontdekt p{flex:1;font-size:16px;line-height:1.45;text-wrap:pretty}
.vg-ontdekt.jij{background:linear-gradient(170deg,#fff,var(--lila-zacht))}
/* wat de ouder zelf herkende tussen haar of hem en een kind (wisselwerking, Lara 20-10-2026), in de tint van de leeftijd, met de naam erboven als die niet in de zin staat */
.vg-ontdekt.herkend{background:linear-gradient(170deg,#fff,var(--l-tint))}
.vg-tekst{flex:1;display:flex;flex-direction:column;gap:2px}
.vg-wie{font-family:var(--label);font-weight:600;font-size:13px;color:var(--groen-diep)}
.vg-obj{display:flex;flex:none}
.vg-obj svg{width:32px;height:32px;filter:drop-shadow(0 3px 3px rgba(43,79,75,.3))}
.vg-obj img{width:32px;height:32px;filter:drop-shadow(0 3px 3px rgba(43,79,75,.3))}
.vg-obj>*+*{margin-left:-6px}
/* de beelden bij de patronen even breed, zodat de zinnen onder elkaar beginnen (lijst volgende ronde) */
.vg-ontdekt:not(.jij) .vg-obj{width:58px;justify-content:center}
.vg-sub{margin-top:4px}
.vg-terugblik{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:18px;background:linear-gradient(170deg,#fff 0%,var(--lila-zacht) 100%);box-shadow:var(--schaduw-laag)}
.vg-terugblik p{text-wrap:pretty}

/* In het gesprek: wat er lukte, en de vraag of Uni iets mag onthouden */
.antwoord.opening .duimen{display:none}
.lukte-kaart{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-tegel);background:linear-gradient(170deg,#fff,#fff4e8);box-shadow:var(--schaduw-laag)}
.lukte-kaart .groei{display:flex;flex-direction:column;gap:2px}
.lukte-kaart .zin{font-family:var(--kop);font-weight:700;font-size:17px;line-height:1.3}
.onthoud-kaart{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.onthoud-kaart .zin{font-family:var(--kop);font-weight:700;font-size:18px;line-height:1.3;text-wrap:pretty}
.onthoud-kaart .rij .knop{min-height:44px;padding:8px 16px;font-size:16px}
.klein-zin{font-family:var(--kop);font-weight:600;font-size:16px;line-height:1.4;color:var(--groen-diep)}

/* Toestemming: 2 vinkjes die leeg beginnen */
.vinkje{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff;text-align:left;font-size:16px;line-height:1.45}
.vinkje .vak{width:28px;height:28px;flex:none;border-radius:8px;border:2px solid var(--groen);display:grid;place-items:center;background:#fff;transition:background .2s}
.vinkje .vak .ico{width:20px;height:20px;color:#fff;opacity:0;stroke-width:2.6;transition:opacity .2s}
.vinkje[aria-checked="true"] .vak{background:var(--groen)}
.vinkje[aria-checked="true"] .vak .ico{opacity:1}
#vel-toestemming .knop.uit{opacity:.45}
#gegevens-toestemming .tekstlink{min-height:36px}
/* zevende ronde (Lara 20-10-2026): de details van de toestemming achter een rustig linkje */
.meer-uitleg{align-self:center;text-align:center;display:flex;flex-direction:column;align-items:center}
.meer-uitleg summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px;font-family:var(--label);font-weight:600;font-size:14px;color:var(--tekst-zacht);text-decoration:underline;text-underline-offset:3px}
.meer-uitleg summary::-webkit-details-marker{display:none}
.meer-uitleg summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.meer-uitleg[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.meer-uitleg[open]{align-self:stretch}
#toestemming-uitleg{display:flex;flex-direction:column;gap:8px;text-align:left;margin:2px 0 4px}
#toestemming-uitleg p.klein{margin:0;text-wrap:pretty}
#toestemming-uitleg p.uitleg-kern{font-family:var(--lees);font-size:var(--tekst-maat);font-weight:var(--tekst-gewicht);color:var(--tekst);line-height:1.5;margin-bottom:6px}
/* route 3 (21-10-2026, via Bas): de intro in 3 alinea's, tussenkoppen achter het linkje, en de vraag, het vinkje en de regel over terugdraaien samen in één kaart */
#toestemming-intro{display:flex;flex-direction:column;gap:10px}
#toestemming-intro p{text-wrap:pretty}
#toestemming-uitleg h3{font-family:var(--label);font-size:14px;font-weight:700;color:var(--groen-diep);line-height:1.3;margin:8px 0 -2px}
#toestemming-uitleg h3:first-child{margin-top:0}
.toestemming-keus{display:flex;flex-direction:column;gap:8px;padding:14px 14px 12px;border-radius:var(--r-tegel);background:var(--glas-dicht);box-shadow:var(--schaduw-laag),inset 0 1px 0 #fff}
#toestemming-vraag{line-height:1.5;text-wrap:pretty}
.toestemming-keus .vinkje{padding:8px 0;background:none;box-shadow:none;border-radius:0;align-items:center;font-weight:400}
#toestemming-terug{padding-left:40px}

/* Bewaar al je gesprekken: 3 stappen */
.stappen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.stappen li{display:flex;gap:12px;align-items:flex-start}
.stappen .nr{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#4f8f88,var(--groen-diep));color:#fff;font-family:var(--kop);font-weight:700;font-size:16px}
.stappen p{padding-top:2px;text-wrap:pretty}

/* De dag erna (besluit Lara 21-10-2026): de vraag onder een advies, de kaart van Uni bovenaan Meedenken */
.pols-kaart{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px}
.pols-kaart .zin{font-family:var(--lees);font-size:var(--tekst-maat);font-weight:var(--tekst-gewicht);line-height:1.5;color:var(--tekst);text-wrap:pretty}
.pols-kaart .rij{flex-wrap:nowrap}
/* Jouw zin (Lara 21-10-2026) */
.zin-kaart{display:flex;gap:10px;align-items:flex-start;padding:14px 12px 14px 16px}
.zin-kaart .groei{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.zin-kaart .zin{font-family:var(--lees);font-size:var(--tekst-maat);font-weight:var(--tekst-gewicht);line-height:1.5;color:var(--tekst);text-wrap:pretty}
.zin-kaart .ronde{flex:none;width:36px;height:36px}
.zin-kaart .ronde .ico{width:16px;height:16px}
.pols-kaart .rij .knop{flex:1 1 auto;min-height:46px;padding:8px 14px;font-size:17px}
.pols-kaart.net{animation:pols-in .7s var(--zacht) both}
@keyframes pols-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pols-vraag .rij .knop{flex:0 1 auto}
@media (prefers-reduced-motion: reduce){.pols-kaart.net{animation:none}}

/* ===== Nieuw in de echte app (stap 2, 21-10-2026) ===== */
/* De poort: eerst de tip voor het beginscherm, dan inloggen met een code per mail (besluiten Lara 21-10-2026). Dezelfde lucht als de kennismaking. */
.app[data-scherm="beginscherm"] .tabbalk,.app[data-scherm="login"] .tabbalk,.app[data-scherm="laden"] .tabbalk{display:none}
.app[data-scherm="laden"] .hulp{display:none}
.poort-lucht{position:absolute;z-index:0;left:0;right:0;top:0;height:calc(var(--status-h) + 190px);background:linear-gradient(160deg,#46837D 0%,#46837D 32%,#6F8FB0 70%,#D3C6FE 100%);background-size:130% 130%;animation:lucht-drijf 36s ease-in-out infinite alternate;border-radius:0 0 36px 36px;box-shadow:0 18px 40px -24px rgba(43,79,75,.5)}
.poort{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;padding:calc(var(--status-h) + 22px) 18px calc(env(safe-area-inset-bottom,0px) + 36px);min-height:100%}
.poort-kop{display:flex;align-items:center;gap:14px;padding-right:60px;min-height:120px}
.poort-kop .uni-rond{width:76px;height:76px}
.poort-kop h1{color:#fff;font-size:27px;text-shadow:1px 1px 10px rgba(0,0,0,.3)}
.poort-kaart{gap:14px}
.poort-kaart>p{text-wrap:pretty}
.poort .onder{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.poort .onder .tekstlink{align-self:center}
.poort .onder .klein{max-width:320px}
/* de 3 plaatjes met de stappen, plaatje links en de zin rechts */
.bs-stappen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bs-stappen li{display:flex;gap:14px;align-items:center}
.bs-stappen img{width:112px;height:112px;flex:none;border-radius:18px;box-shadow:var(--schaduw-laag)}
.bs-stappen .stap{display:flex;gap:10px;align-items:flex-start}
.bs-stappen .nr{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#4f8f88,var(--groen-diep));color:#fff;font-family:var(--kop);font-weight:700;font-size:15px}
.bs-stappen p{padding-top:1px;text-wrap:pretty}
.bs-let-op{font-family:var(--label);font-weight:600;font-size:14px;color:var(--lila-diep);background:rgba(211,198,254,.35);border-radius:var(--r-kaart);padding:10px 12px;line-height:1.45}
/* inloggen */
#login-form .veld input{font-size:18px}
#login-code{letter-spacing:.3em;font-variant-numeric:tabular-nums}
.login-gestuurd{font-family:var(--lees);font-size:var(--tekst-maat);line-height:1.5;background:rgba(196,215,211,.4);border-radius:var(--r-kaart);padding:10px 12px}
#login-form .rij .tekstlink{min-height:40px}
.knop.bezig{opacity:.7;pointer-events:none}
/* laden: alleen het rondje van Uni, tot de opslag gelezen is */
#s-laden{display:none;place-items:center}
#s-laden.actief{display:grid}
#s-laden .uni-rond{width:84px;height:84px;animation:adem-bol 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#s-laden .uni-rond,.poort-lucht{animation:none}}
/* Bewaar al je gesprekken: het verborgen bestandsveld voor overzetten */
.bestand-veld{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* Een dicht vel staat ver genoeg onder het scherm, zodat zijn schaduw niet als donkere band onderaan blijft hangen (zat ook in het prototype) */
.vel .paneel{transform:translateY(calc(100% + 56px))}
/* De andere ouder (besluit Lara 21-10-2026, "a", via Bas): uitnodigen met een mailadres, het berichtje om te delen, en de kaart bij Je gegevens */
#andere-ouder-form .veld input{font-size:18px}
.andere-ouder-klaar{display:flex;flex-direction:column;gap:12px}
.andere-ouder-klaar .rij .knop{flex:1 1 auto;padding:10px 16px;font-size:17px}
.bericht-tekst{white-space:pre-line;font-family:var(--lees);font-size:var(--tekst-maat);font-weight:var(--tekst-gewicht);line-height:1.6;overflow-wrap:anywhere}
#gegevens-andere-ouder .tekstlink{min-height:36px}
#gegevens-andere-ouder p{overflow-wrap:anywhere}

/* Labels en zorgen (Lara 22-10-2026, via Bas). Kennismaking, de omschrijving: een lagere lucht dan de andere stappen, want onder de vraag staat per kind een veld */
#s-kennisomschrijving .lucht-leeg{position:absolute;z-index:1;left:0;right:0;top:0;height:210px;background:linear-gradient(160deg,#46837D 0%,#46837D 32%,#6F8FB0 70%,#D3C6FE 100%);background-size:130% 130%;animation:lucht-drijf 36s ease-in-out infinite alternate;border-radius:0 0 36px 36px;box-shadow:0 18px 40px -24px rgba(43,79,75,.5)}
#s-kennisomschrijving .kennis{position:relative;min-height:100%;padding:0 18px 60px;background:linear-gradient(180deg,var(--l-tint) 0%,var(--creme) 70%)}
#s-kennisomschrijving h1{position:relative;z-index:2;margin:0;min-height:210px;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1.2;text-align:center;color:#fff;text-shadow:1px 1px 10px rgba(0,0,0,.35);padding-top:var(--status-h)}
#s-kennisomschrijving .kennis-namen{padding-top:22px}
.app[data-scherm="kennisomschrijving"] .tabbalk{display:none}
.kennis-tekst{margin:0;font-family:var(--lees);font-size:16px;line-height:1.5;color:var(--tekst);text-wrap:pretty}
.kennis-kind.kennis-omschrijving{flex-direction:column;align-items:stretch;gap:6px;border-radius:18px;padding:10px 14px 12px}
.kennis-omschrijving .wie{display:flex;align-items:center;gap:10px;min-width:0}
.kennis-omschrijving .wie .naam{min-width:0;font-family:var(--kop);font-weight:600;font-size:18px;color:var(--tekst);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kennis-omschrijving .schoenrond{width:40px;height:40px}
.kennis-omschrijving .schoenrond img{width:30px;height:30px}
.kennis-omschrijving textarea{display:block;width:100%;min-height:84px;resize:vertical;background:none;border:0;outline:none;font-family:var(--kop);font-size:17px;line-height:1.4;color:var(--tekst);padding:4px 2px}
/* Jij, het vel van een kind: de omschrijving om te lezen en aan te passen */
.veld textarea{width:100%;min-height:104px;padding:10px 14px;border-radius:var(--r-knop);border:1px solid rgba(58,108,103,.3);background:#fff;font-family:var(--kop);font-size:17px;line-height:1.4;resize:vertical}
/* Waarom? onder een kaart bij de 3 vragen: een kleine tekstknop, en de uitleg in de lopende letter, kleiner en rustiger dan de kaart */
/* 44px hoog, net als de andere tekstlinks om op te tikken; de negatieve marge houdt hem even dicht bij de kaart als bij 36px (nakijkronde 22-10-2026) */
.kaart-st .tekstlink.waarom{align-self:center;min-height:44px;margin-top:-16px;font-size:14px;color:var(--tekst-zacht)}
.kaart-st p.waarom-zin{margin:-16px 0 0;max-width:30em;font-family:var(--lees);font-weight:var(--tekst-gewicht);font-size:15px;line-height:1.5;color:var(--tekst-zacht);text-wrap:pretty}
/* Is dit normaal?: de tegels lopen om in plaats van te schuiven, zodat Speelt er misschien meer? als laatste op een telefoon van 390 breed in beeld staat (22-10-2026, via Bas).
   Alleen in die wereld; een tegel die langer is dan de rij, breekt af in plaats van buiten beeld te vallen. */
.pillen.omloop{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none}
.pillen.omloop .chip{white-space:normal;max-width:100%}
/* De leeromgeving in de app, de eerste proef (23-10-2026, via Bas): een masterclass als leskaart met een speelknopje in plaats van een boek, en het vel met de
   speler. Het vlak is 16:9 in het groen van de kopband, met de oranje speelknop (de actie) tot de video speelt; daarna de eigen bediening van de telefoon. */
.leskaart .boek.speel{display:grid;place-items:center;color:#fff}
.leskaart .boek.speel::after{content:none}
.leskaart .boek.speel .ico{width:22px;height:22px;margin-left:5px}
.leskaart .duur{display:block;font-family:var(--label);font-weight:600;font-size:13px;color:var(--tekst-zacht);margin-top:3px}
.videovlak{position:relative;flex:none;width:100%;aspect-ratio:16/9;border-radius:var(--r-tegel);overflow:hidden;background:linear-gradient(180deg,var(--groen-diep),var(--groen-nacht));box-shadow:var(--schaduw)}
.videovlak video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;visibility:hidden}
.videovlak.speelt video{visibility:visible}
.videovlak .video-start{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#ffa347,var(--oranje-diep));box-shadow:0 12px 26px -8px rgba(245,124,0,.8),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .22s var(--veer),opacity .2s}
.videovlak .video-start:active{transform:scale(.94)}
.videovlak .video-start .ico{width:36px;height:36px;margin-left:5px}
.videovlak.laadt .video-start{opacity:.6;pointer-events:none}
.videovlak.speelt .video-start{display:none}
#video-kop h1{font-size:24px;line-height:1.2}
/* nakijkronde bibliotheek 23-10-2026: met de naam van een product als label en een lange lestitel liep het label onder het beeld en, bij 3 regels titel,
   achter de sluitknop. De kop groeit nu mee, begint onder de sluitknop, en de tekst blijft links van het beeld. */
#video-kop{height:auto;min-height:200px;padding-top:66px}
#video-kop .groot{right:16px}
#video-kop .naam,#video-kop h1{max-width:calc(100% - 128px)}
.video-duur{font-family:var(--label);font-weight:600;font-size:14px;color:var(--tekst-zacht);text-align:center;margin-top:-4px}
.video-opties{justify-content:center}
.video-omschrijving{text-wrap:pretty}
/* De bibliotheek (23-10-2026, onderzoek 15, stap 7, via Bas): dezelfde onderdelen als de rest van de app. De soorten en de producten zijn leskaarten met een boek,
   de lessen van een product zijn lijstrijen (zoals bij Jij) met een icoon voor kijken, luisteren of lezen, en een groen vinkje als de ouder de les deed.
   In het vel: Kijken en Luisteren als 2 chips, de audio in een glazen kaart met dezelfde oranje speelknop als de video, de werkbladen als lijstrijen en de
   lestekst in de leesmaat van de app. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#product-kop,#bieb-kop{height:auto;min-height:150px;padding-top:calc(var(--status-h) + 58px)}
#product-kop h1,#bieb-kop h1{font-size:24px;line-height:1.2}
#product-kop .groot{width:96px;height:96px;top:auto;bottom:12px;right:16px;transform:none}
.product-stand{margin-top:-4px}
.product-omschrijving{text-wrap:pretty;margin-top:6px}
.lijstrij .beeldje .ico{width:24px;height:24px;color:var(--l-diep)}
.lijstrij.gedaan .titel{color:var(--tekst-zacht)}
.lijstrij .gedaan-vink{color:var(--groen);width:24px;height:24px;flex:none}
a.lijstrij{color:var(--tekst);text-decoration:none}
a.lijstrij[aria-disabled="true"]{opacity:.55;pointer-events:none}
.video-vormen{justify-content:center}
.video-vormen .chip{min-width:118px;justify-content:center}
.audiovlak{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 16px}
.audiovlak .audio-start{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#ffa347,var(--oranje-diep));box-shadow:0 12px 26px -8px rgba(245,124,0,.8),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .22s var(--veer),opacity .2s}
.audiovlak .audio-start:active{transform:scale(.94)}
.audiovlak .audio-start .ico{width:32px;height:32px;margin-left:4px}
.audiovlak audio{display:none;width:100%}
.audiovlak.speelt audio{display:block}
.audiovlak.speelt .audio-start{display:none}
.audiovlak.laadt .audio-start{opacity:.6;pointer-events:none}
/* de app uit de winkels (26-10-2026): een les als audio speelt native; dan geen audio-element maar de eigen balk (app.js, NATIEF_AUDIO) */
.audio-balk{display:none;align-items:center;gap:12px;width:100%}
.natief .audiovlak audio{display:none!important}
.natief .audiovlak.speelt .audio-balk{display:flex}
.audio-balk input[type=range]{flex:1;min-width:0;accent-color:var(--oranje-diep)}
.audio-balk .audio-tijd{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.8}
.les-bijlagen{margin-top:2px}
.les-tekst-blok{display:flex;flex-direction:column;gap:10px}
.les-tekst-blok .les-tekst{display:none}
.les-tekst-blok.open .les-tekst{display:block}
.les-tekst p,.les-tekst ul,.les-tekst ol,.les-tekst blockquote{margin:0 0 10px;text-wrap:pretty}
.les-tekst ul,.les-tekst ol{padding-left:22px}
.les-tekst h2,.les-tekst h3,.les-tekst h4{font-size:19px;margin:16px 0 6px}
.les-tekst blockquote{padding-left:12px;border-left:3px solid var(--lichtgroen)}
.les-gedaan-rij{justify-content:center}
.les-gedaan-rij .chip{gap:6px}
.les-gedaan-rij .chip .ico{width:18px;height:18px;color:var(--groen-diep)}
.les-gedaan-rij .chip.aan .ico{color:#fff}

/* De winkelversie (25-10-2026, via Bas; alleen in beeld als de schakelaar WINKEL in de app aan staat): de kaart van de gratis kennismaking op het startscherm,
   de voorproef van de kaarten, de keuze voor de gratis les, de betaalmuur, het abonnement en Verwijder je account bij Je gegevens */
.proef-kaart{display:flex;flex-direction:column;gap:6px;padding:14px 16px 12px}
.proef-kaart p{font-family:var(--lees);font-size:var(--tekst-maat);font-weight:var(--tekst-gewicht);line-height:1.5;color:var(--tekst);text-wrap:pretty}
.proef-kaart .knop{align-self:stretch;margin-top:4px}
.bieb-proef{margin:-4px 0 4px;text-wrap:pretty}
.kaart-st.voorproef{gap:18px}
.kaart-st.voorproef .voorproef-zin{font-size:19px;line-height:1.35}
.kaart-st.voorproef .knop{align-self:stretch}
.slot-ico{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;color:var(--groen-diep);opacity:.75}
.slot-ico .ico{width:17px;height:17px}
.betaalmuur-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.betaalmuur-lijst li{display:flex;align-items:flex-start;gap:12px;line-height:1.45;text-wrap:pretty}
.betaalmuur-lijst .beeldje{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--l-tint);flex:none;color:var(--groen-diep)}
.betaalmuur-lijst .beeldje .ico{width:20px;height:20px}
.betaalmuur-knoppen{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.betaal-knop{flex-direction:column;gap:2px;min-height:62px;padding:8px 18px}
.betaal-knop .prijs{font-size:21px;font-weight:700;line-height:1.15}
.betaal-knop .per{font-family:var(--label);font-size:14px;font-weight:600;opacity:.95}
.betaal-knop[disabled]{opacity:.7}
.betaalmuur-links{gap:18px}
#vel-betaalmuur .tekstlink{min-height:40px}
#gegevens-abonnement .tekstlink,#account-weg{min-height:40px}