/* ==========================================================================
   Babyslaapje — app.css
   Eén stylesheet voor de hele site. Alles begint bij de tokens hieronder:
   pas daar iets aan en het werkt overal door, ook op pagina's die we later
   nog bouwen. Componenten hebben nooit eigen kleuren of maten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Kleur — afgeleid van het ontwerp. Dit blok is de enige plek waar
     kleuren staan; verander hier iets en de hele site verandert mee. */
  --ink:#4B3BCC;       /* merkkleur: koppen, knoppen, accenten */
  --tekst:#221D40;     /* gewone tekst: bijna zwart, niet paars */
  --ink-soft:#6E5DE7;
  --paper:#F7F6FD;
  --surface:#FFFFFF;
  --mist:#EFECFC;
  --line:#E5E1F5;
  --muted:#6C6A85;
  --amber:#E9A23B;
  --rose:#E0748C;
  --sage:#4CAF87;

  --r-xl:18px; --r-lg:14px; --r-md:11px; --r-sm:8px;
  --shadow:0 2px 3px rgba(75,59,204,.03), 0 10px 24px -14px rgba(75,59,204,.28);
  --ring:0 0 0 3px rgba(108,93,231,.32);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:44px;

  --display:'Fraunces',Georgia,serif;
  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --t-hero:clamp(28px,8vw,34px);
  --t-h2:21px; --t-h3:16px; --t-body:15px; --t-sm:13px; --t-micro:11px;

  --donker:#3A2CA8;     /* blijft in beide standen donker */
  --breedte:430px;      /* de app: smal, als een telefoonscherm */
  --publiek:640px;      /* de publieke site */
}

/* Nachtmodus. Dezelfde componenten, andere tokens — voor ouders die om
   drie uur 's nachts loggen met een baby op de arm. */
html[data-modus="nacht"]{
  --ink:#EDE9FE; --tekst:#E7E3F7; --ink-soft:#B5A6F5; --paper:#120E24; --surface:#1C1734;
  --mist:#272049; --line:#2F2758; --muted:#9C96BC;
  --shadow:0 10px 24px -14px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(181,166,245,.3);
}

/* --------------------------------------------------------------------------
   2. BASIS
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--tekst);
  font-family:var(--ui);font-size:var(--t-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.01em;line-height:1.15;
  color:var(--ink)}
p{margin:0}
img,video,table,pre,iframe{max-width:100%}
body{overflow-wrap:break-word}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--breedte);margin:0 auto;padding:var(--s5) var(--s5) 120px}
.visueel-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   3. APPBAR
   -------------------------------------------------------------------------- */
.appbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0 var(--s6)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--mist);display:grid;place-items:center;
  font-family:var(--display);font-size:18px;flex:none;text-decoration:none;color:var(--ink)}
.appbar__meta{flex:1;min-width:0}
.appbar__naam{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink)}
.appbar__sub{font-size:var(--t-sm);color:var(--muted)}
.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;flex:none;text-decoration:none;color:var(--ink-soft)}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   4. BOUWSTENEN
   -------------------------------------------------------------------------- */
.eyebrow{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s5);box-shadow:var(--shadow);margin-bottom:var(--s4)}
.kaart--vlak{box-shadow:none;background:var(--mist);border-color:transparent}

.knop{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
  min-height:52px;padding:0 var(--s5);border-radius:var(--r-lg);border:1px solid transparent;
  font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,filter .2s ease}
.knop:active{transform:scale(.985)}
.knop--primair{background:var(--ink);color:var(--paper)}
.knop--ghost{background:transparent;border-color:var(--line);color:var(--ink);min-height:46px;font-size:15px}
.knop--gevaar{background:transparent;border-color:var(--line);color:var(--rose);min-height:44px;font-size:14px}
.knop-rij{display:flex;gap:var(--s3);margin-bottom:var(--s3)}
.knop-rij:last-of-type{margin-bottom:var(--s6)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;
  font-size:var(--t-micro);font-weight:600;white-space:nowrap}
.badge--sage{background:color-mix(in srgb,var(--sage) 15%,transparent);color:var(--sage)}
.badge--amber{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.badge--rose{background:color-mix(in srgb,var(--rose) 16%,transparent);color:var(--rose)}
.badge--mist{background:var(--mist);color:var(--ink-soft)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s2);text-align:center}
.stat__v{font-family:var(--display);font-size:19px;font-variant-numeric:tabular-nums;
  display:block;white-space:nowrap}
.stat__l{font-size:var(--t-micro);color:var(--muted);margin-top:2px;display:block}

.sechead{display:flex;justify-content:space-between;align-items:baseline;margin:var(--s7) 0 var(--s3);gap:var(--s3)}
.sechead h2{font-size:var(--t-h2)}
.sechead a{font-size:var(--t-sm);color:var(--muted);text-decoration:none;font-weight:500}

.regel{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.regel:first-child{padding-top:0}
.regel:last-child{border-bottom:none;padding-bottom:0}
/* Een tijdsbereik als "20:22 – 06:50" moet altijd op één regel passen; twee
   regels leest als twee losse tijden. De kolom is daarom breed genoeg voor het
   langst mogelijke bereik en breekt nooit af. */
.regel__tijd{font-family:var(--display);font-size:15px;font-variant-numeric:tabular-nums;
  width:112px;flex:none;white-space:nowrap}
.regel__body{flex:1;min-width:0}
.regel__titel{font-size:var(--t-body);font-weight:500}
.regel__sub{font-size:var(--t-sm);color:var(--muted)}
.regel--plan .regel__tijd{color:var(--muted)}
.regel__acties{display:flex;gap:var(--s1);flex:none}
.regel__actie{border:none;background:none;color:var(--muted);cursor:pointer;padding:8px;
  border-radius:10px;display:grid;place-items:center;text-decoration:none}
.regel__actie svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.regel__actie:active{background:var(--mist)}

/* --------------------------------------------------------------------------
   5. DAGRITME-LINT
   -------------------------------------------------------------------------- */
.lint{margin-bottom:var(--s2)}
.lint__spoor{position:relative;height:70px;border-radius:var(--r-md);background:var(--mist);overflow:hidden}
.lint__blok{position:absolute;top:0;bottom:0;background:var(--ink);opacity:.92}
.lint__blok--nacht{background:var(--ink-soft)}
.lint__blok--voorspeld{background:transparent;border:1.5px dashed var(--ink);opacity:.5;border-radius:4px}
.lint__nu{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--rose)}
.lint__nu::before{content:"";position:absolute;top:0;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--rose)}
.lint__schaal{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--t-micro);
  color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lint__legenda{display:flex;gap:var(--s4);margin-top:var(--s3);font-size:var(--t-micro);color:var(--muted);flex-wrap:wrap}
.lint__legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;
  vertical-align:-1px}
.lint__legenda i.is-geslapen{background:var(--ink)}
.lint__legenda i.is-voorspeld{background:transparent;border:1.5px dashed var(--ink)}
.lint__legenda i.is-nu{background:var(--rose)}

/* --------------------------------------------------------------------------
   6. STATUS EN SLAAPDRUK
   -------------------------------------------------------------------------- */
.status__kop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s2)}
.status__groot{font-family:var(--display);font-size:var(--t-hero);line-height:1;margin:var(--s1) 0 var(--s4);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.meter{height:8px;border-radius:99px;background:var(--mist);overflow:hidden}
.meter__vul{height:100%;border-radius:99px;background:var(--ink);transition:width .8s cubic-bezier(.4,0,.2,1)}
.meter__vul[data-toon="nadert"]{background:var(--amber)}
.meter__vul[data-toon="optimaal"]{background:var(--sage)}
.meter__vul[data-toon="laat"]{background:var(--rose)}
.status__voet{display:flex;justify-content:space-between;margin-top:var(--s3);font-size:var(--t-micro);color:var(--muted)}
.venster{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.venster--kaal{border-top:none;padding-top:0;margin-top:0}
.venster__tijd{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.venster__badge{display:inline-flex;margin-left:auto}
.advies{margin-top:var(--s3);font-size:var(--t-sm);color:var(--muted)}

/* --------------------------------------------------------------------------
   7. INZICHT EN ZON
   -------------------------------------------------------------------------- */
.inzicht{display:flex;gap:var(--s4)}
.inzicht__mark{font-family:var(--display);font-size:34px;line-height:.8;color:var(--ink-soft);flex:none}
.inzicht__meta{font-size:var(--t-micro);color:var(--muted);margin-top:var(--s3);display:flex;align-items:center;gap:6px}
.zon{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);
  background:var(--mist);font-size:var(--t-sm);margin-bottom:var(--s4)}
.zon__teken{flex:none;color:var(--amber);display:grid;place-items:center}
.zon__teken svg{width:22px;height:22px}

/* --------------------------------------------------------------------------
   8. FORMULIER
   -------------------------------------------------------------------------- */
.veld{margin-bottom:var(--s4)}
.veld label{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.veld input,.veld select,.veld textarea{width:100%;min-height:48px;padding:0 var(--s3);
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--paper);
  font-size:16px;font-family:inherit;color:inherit}
.veld textarea{padding:var(--s3);min-height:120px;line-height:1.5;resize:vertical}

/* Datum- en tijdvelden krijgen op iOS een eigen breedte en gecentreerde tekst,
   waardoor ze net buiten de kaart vielen. Deze regels zetten ze gelijk aan de
   gewone invoervelden. */
.veld input[type="date"],
.veld input[type="time"]{
  -webkit-appearance:none;appearance:none;
  min-width:0;max-width:100%;text-align:left;
  display:block;line-height:normal;
}
.veld input[type="date"]::-webkit-date-and-time-value,
.veld input[type="time"]::-webkit-date-and-time-value{text-align:left}
.veld input[type="date"]::-webkit-calendar-picker-indicator,
.veld input[type="time"]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.5}

/* Nummervelden: geen pijltjes die de breedte beïnvloeden. */
.veld input[type="number"]{-moz-appearance:textfield}
.veld input[type="number"]::-webkit-outer-spin-button,
.veld input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Twee velden naast elkaar mogen elkaar niet uit de kaart duwen. */
.veld-rij > .veld{min-width:0}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.keuze{display:flex;gap:var(--s2)}
.keuze input{position:absolute;opacity:0;width:0}
.keuze label{flex:1;text-align:center;padding:var(--s3) 0;border:1px solid var(--line);border-radius:var(--r-md);
  cursor:pointer;font-size:20px;text-transform:none;letter-spacing:0;margin:0}
.keuze input:checked+label{border-color:var(--ink);background:var(--mist)}
details.uitklap{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:var(--s4) var(--s5);margin-bottom:var(--s4)}
details.uitklap summary{cursor:pointer;font-weight:600;list-style:none}
details.uitklap summary::-webkit-details-marker{display:none}
details.uitklap summary::after{content:"+";float:right;color:var(--muted)}
details.uitklap[open] summary::after{content:"–"}
details.uitklap[open] summary{margin-bottom:var(--s4)}

.melding{padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--mist);
  font-size:var(--t-sm);margin-bottom:var(--s4)}

/* --------------------------------------------------------------------------
   9. TABBAR
   -------------------------------------------------------------------------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;overflow:visible;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 0 max(8px,env(safe-area-inset-bottom))}
.tabbar__in{position:relative;max-width:var(--breedte);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr 72px 1fr 1fr;align-items:center}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:var(--t-micro);
  color:var(--muted);text-decoration:none;padding:4px}
.tab[aria-current]{color:var(--ink);font-weight:600}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   10. PUBLIEKE SITE
   -------------------------------------------------------------------------- */
.publiek{max-width:var(--publiek);margin:0 auto;padding:0 var(--s5) var(--s8)}
.publiek--breed{max-width:var(--publiek)}

.siteheader{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  max-width:var(--publiek);margin:0 auto;padding:var(--s4) var(--s5)}
.merk{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--ink)}
.merk__teken{font-size:20px;line-height:1}
.merk__naam{font-family:var(--display);font-size:19px;font-weight:600}
.sitenav{display:flex;align-items:center;gap:var(--s4);font-size:var(--t-sm);font-weight:500}
.sitenav a{text-decoration:none;color:var(--muted)}
.sitenav a:hover{color:var(--ink)}
/* Een knop in de navigatie is een knop, geen navigatielink. Zonder deze regel
   wint .sitenav a en wordt de tekst grijs op paars: 1,6:1 contrast. */
.sitenav a.knop--primair,.sitenav a.knop--primair:hover{color:#fff}
.sitenav a.knop--ghost,.sitenav a.knop--ghost:hover{color:var(--ink)}
.sitenav .inloglink{font-weight:600;color:var(--ink)}
.knop--klein{display:inline-flex;width:auto;min-height:40px;padding:0 var(--s4);
  border-radius:var(--r-md);font-size:14px;
  white-space:nowrap;line-height:1;text-align:center}
@media (max-width:520px){
  /* Alleen de inhoudslinks wijken; inloggen en aanmelden blijven altijd staan,
     want dat zijn de twee dingen waar bezoekers naar zoeken. Voor wie ingelogd
     is loopt de weg naar de hulpmiddelen via de tab Meer onderin. */
  .sitenav a[data-inhoud]{display:none}
  /* Horizontale ruimte gelijk houden aan de inhoud eronder, anders staat het
     logo net iets anders dan de tekst. */
  .siteheader{padding:var(--s3) var(--s5);gap:var(--s3)}
  .sitenav{gap:var(--s3)}
  /* Logo, inloglink en knop moeten samen op één regel passen. Het logo levert
     als eerste in; dat blijft ook klein goed leesbaar. */
  .merk__logo{height:26px}
  .knop--klein{padding:0 var(--s3);font-size:13px;min-height:38px}
  .sitenav .inloglink{font-size:var(--t-sm)}
}

.hero{padding:var(--s7) 0 var(--s6)}
.hero h1{font-size:clamp(30px,9vw,42px);line-height:1.05;margin-bottom:var(--s4)}
.hero__intro{font-size:17px;color:var(--muted);margin-bottom:var(--s6)}
.hero__acties{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5)}
.hero__bewijs{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--muted)}

.uitleg{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.uitleg__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5) var(--s4) var(--s4);position:relative}
.uitleg__item::before{content:"";position:absolute;left:0;top:var(--s5);bottom:var(--s5);
  width:3px;border-radius:0 3px 3px 0;background:var(--ink-soft)}
.uitleg__item strong{display:block;margin-bottom:2px}
.uitleg__item p{font-size:var(--t-sm);color:var(--muted)}
.uitleg__nr{font-family:var(--display);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:var(--s1);font-weight:600}

.regel--link{text-decoration:none;color:inherit}
.regel__mini{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none;background:var(--mist)}
.regel__pijl{color:var(--muted);flex:none}

.oproep{background:var(--donker);color:#fff;border-radius:var(--r-xl);
  padding:var(--s6) var(--s5);margin:var(--s7) 0}
.oproep h2{font-size:var(--t-h2);margin-bottom:var(--s2);color:#fff}
.oproep p{font-size:var(--t-sm);opacity:.85;margin-bottom:var(--s5);max-width:44ch}
.oproep .knop--primair{background:#fff;color:var(--donker)}
.oproep__klein{font-size:var(--t-micro);opacity:.7;margin-top:var(--s3)!important;margin-bottom:0!important}

.sitevoet{border-top:1px solid var(--line);margin-top:var(--s8);padding:var(--s7) var(--s5) var(--s6)}
.sitevoet__in{max-width:var(--publiek);margin:0 auto;display:grid;gap:var(--s6)}
.sitevoet__tekst{font-size:var(--t-sm);color:var(--muted);margin-top:var(--s3);max-width:44ch}
.sitevoet__kolommen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.sitevoet__kolommen a{display:block;font-size:var(--t-sm);color:var(--muted);
  text-decoration:none;margin-top:var(--s2)}
.sitevoet__klein{max-width:var(--publiek);margin:var(--s6) auto 0;font-size:var(--t-micro);color:var(--muted)}

/* Artikelinhoud uit de database */
.artikel{max-width:var(--publiek);margin:0 auto;padding:0 var(--s5)}
.artikel h1{font-size:clamp(26px,7vw,34px);line-height:1.1;margin-bottom:var(--s3)}
.artikel__meta{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s5)}
.artikel__hero{width:100%;height:auto;border-radius:var(--r-lg);margin-bottom:var(--s6)}
.artikel__samenvatting{background:var(--mist);border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s6)}
.artikel__inhoud{font-size:16px;line-height:1.65}
.artikel__inhoud h2{font-size:22px;margin:var(--s7) 0 var(--s3)}
.artikel__inhoud h3{font-size:18px;margin:var(--s6) 0 var(--s2)}
.artikel__inhoud p{margin-bottom:var(--s4)}
.artikel__inhoud ul,.artikel__inhoud ol{margin:0 0 var(--s4) var(--s5);padding:0}
.artikel__inhoud li{margin-bottom:var(--s2)}
.artikel__inhoud img{max-width:100%;height:auto;border-radius:var(--r-md)}
.artikel__inhoud a{color:var(--ink-soft)}

/* Tabel voor de wakkertijden-gids */
.tabel{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin-bottom:var(--s5)}
.tabel th,.tabel td{text-align:left;padding:var(--s3) var(--s2);border-bottom:1px solid var(--line)}
.tabel th{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.tabel td:first-child{font-weight:600}
.tabel tr[data-nu]{background:var(--mist)}

/* Historie */
.dagbalk{display:flex;align-items:flex-end;gap:3px;height:90px;margin:var(--s4) 0 var(--s2)}
.dagbalk__staaf{flex:1;background:var(--mist);border-radius:4px 4px 0 0;position:relative;overflow:hidden;min-height:3px}
.dagbalk__deel{position:absolute;left:0;right:0;bottom:0;background:var(--ink)}
.dagbalk__deel--dag{background:var(--ink-soft)}
.dagbalk__labels{display:flex;gap:3px;font-size:var(--t-micro);color:var(--muted)}
.dagbalk__labels span{flex:1;text-align:center}
.dagkop{display:flex;justify-content:space-between;align-items:baseline;
  margin:var(--s6) 0 var(--s2);font-size:var(--t-sm)}
.dagkop b{font-family:var(--display);font-size:16px;font-weight:600}
.dagkop span{color:var(--muted);font-size:var(--t-micro)}

/* --------------------------------------------------------------------------
   11. SNELLOGKNOP
   Loggen is de kernactie, dus die hoort vanaf elk scherm één duimtik weg.
   -------------------------------------------------------------------------- */
/* De knop hangt aan de onderrand van de balk en steekt aan de bovenkant uit.
   Eerder rekende hij vanaf zijn plek in de rij, waardoor de onderste helft
   buiten beeld viel achter de browserbalk van de telefoon. */
.tab--plus{position:static}
.plusknop{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;border:3px solid var(--paper);cursor:pointer;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 20px -6px rgba(75,59,204,.5);transition:transform .12s ease}
.plusknop svg{width:26px;height:26px;stroke-width:2.2}
.plusknop:active{transform:translateX(-50%) scale(.94)}

/* Blad dat vanaf onderen opkomt met de logopties. */
.blad{position:fixed;inset:0;z-index:30;display:none}
.blad[open]{display:block}
.blad__waas{position:absolute;inset:0;background:rgba(18,14,36,.45)}
.blad__paneel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s5) var(--s5) max(var(--s6),env(safe-area-inset-bottom));
  max-width:var(--breedte);margin:0 auto;box-shadow:0 -10px 40px -20px rgba(18,14,36,.6);
  /* Niet hoger dan het scherm, en anders scrollen. Zonder deze twee regels
     groeide het paneel bij "achteraf invullen" buiten beeld: de knop was
     onbereikbaar en scrollen werkte niet, omdat een vast geplaatst element
     zonder maximumhoogte gewoon doorloopt. 88% laat de bovenkant van de
     pagina zichtbaar zodat je ziet dat het een paneel is. */
  max-height:88vh;max-height:88dvh;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* De greep blijft staan tijdens het scrollen, zodat je altijd ziet waar de
   bovenkant van het paneel zit. */
.blad__greep{width:38px;height:4px;border-radius:99px;background:var(--line);
  margin:0 auto var(--s4)}

/* Verschil tegenover de vorige periode, zoals in het ontwerp. */
.delta{font-size:var(--t-micro);font-weight:600;display:block;margin-top:2px}
.delta--op{color:var(--sage)}
.delta--af{color:var(--rose)}

/* --------------------------------------------------------------------------
   12. PRIJS
   -------------------------------------------------------------------------- */
.prijs{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:var(--s5);box-shadow:var(--shadow);margin-bottom:var(--s4)}
.prijs__label{display:inline-block;margin-bottom:var(--s3)}
.prijs__bedrag{font-family:var(--display);font-size:38px;line-height:1;display:block;color:var(--ink)}
.prijs__bij{font-size:var(--t-sm);color:var(--muted);display:block;
  margin:var(--s2) 0 var(--s5)}
.prijs__lijst{margin:var(--s5) 0;display:grid;gap:var(--s3)}
.prijs__lijst div{display:flex;gap:var(--s3);font-size:var(--t-sm);align-items:flex-start}
.prijs__vink{color:var(--sage);flex:none;font-weight:700}
.prijs__streep{text-decoration:line-through;color:var(--muted);font-size:20px;margin-right:var(--s2)}

/* --------------------------------------------------------------------------
   13. SLOT — proefperiode voorbij
   De cijfers blijven zichtbaar maar onleesbaar: je ziet dat je gegevens er nog
   zijn, en dat is eerlijker dan een leeg scherm achter een betaalmuur.
   -------------------------------------------------------------------------- */
.vergrendeld{filter:blur(7px);pointer-events:none;user-select:none;opacity:.75}
.slot{position:fixed;inset:0;z-index:40;display:grid;place-items:end center;padding:var(--s4);
  background:linear-gradient(to bottom,rgba(247,246,253,.2),rgba(247,246,253,.85) 55%)}
html[data-modus="nacht"] .slot{background:linear-gradient(to bottom,rgba(18,14,36,.2),rgba(18,14,36,.9) 55%)}
.slot__kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s5);box-shadow:0 20px 50px -24px rgba(75,59,204,.55);
  max-width:var(--breedte);width:100%;margin-bottom:96px}
.slot__kaart h2{font-size:var(--t-h2);margin-bottom:var(--s2)}
.slot__kaart p{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s5)}
.slot__klein{font-size:var(--t-micro);color:var(--muted);margin-top:var(--s3)}
.slot__klein a{color:var(--muted)}

/* --------------------------------------------------------------------------
   14. HOMEPAGE
   Meer ritme: een beeld bovenaan, tegels, liggende kaarten en een donker
   blok. Zonder dat verschil in vorm wordt elke pagina één stapel witte kaders.
   -------------------------------------------------------------------------- */
.kop{padding:var(--s6) 0 var(--s5)}
.kop h1{font-size:clamp(30px,8.5vw,40px);line-height:1.06;margin-bottom:var(--s4)}
.kop__intro{font-size:16px;color:var(--muted);margin-bottom:var(--s5)}
.kop__beeld{width:100%;height:auto;display:block;border-radius:var(--r-xl);margin-bottom:var(--s6)}
.kop__acties{display:grid;gap:var(--s3)}
.kop__klein{font-size:var(--t-micro);color:var(--muted);text-align:center;margin-top:var(--s3)}
/* Terugkerende bezoekers hebben één regel nodig, geen tweede knop die met de
   hoofdactie concurreert. */
.kop__terug{font-size:var(--t-sm);color:var(--muted);text-align:center;margin-top:var(--s4)}
.kop__terug a{color:var(--ink);font-weight:600}

/* vier snelkoppelingen, zoals in het ontwerp */
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin:var(--s6) 0}
.tegel{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-decoration:none;
  color:inherit;text-align:center;font-size:var(--t-micro);font-weight:600}
.tegel__vak{width:52px;height:52px;border-radius:16px;background:var(--mist);display:grid;
  place-items:center;color:var(--ink-soft)}
.tegel__vak svg{width:24px;height:24px}
.tegel:active .tegel__vak{transform:scale(.94)}

/* liggende kaarten die je opzij schuift */
.spoor{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 calc(var(--s5) * -1);padding:0 var(--s5) var(--s3);-webkit-overflow-scrolling:touch}
.spoor::-webkit-scrollbar{display:none}
.spoorkaart{flex:0 0 208px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.spoorkaart img{width:100%;height:118px;object-fit:cover;display:block;background:var(--mist)}
.spoorkaart__tekst{padding:var(--s4)}
.spoorkaart__titel{font-weight:600;font-size:var(--t-body);line-height:1.25;margin-bottom:var(--s2)}
.spoorkaart__sub{font-size:var(--t-micro);color:var(--muted)}

/* uitdagingen: de ingang op probleem in plaats van op categorie */
.uitdaging{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.uitdaging:last-child{border-bottom:none}
.uitdaging__vak{width:44px;height:44px;border-radius:14px;background:var(--mist);
  display:grid;place-items:center;color:var(--ink-soft);flex:none}
.uitdaging__vak svg{width:22px;height:22px}
.uitdaging__body{flex:1;min-width:0;display:block}
.uitdaging__titel{display:block;font-weight:600;font-size:var(--t-body);line-height:1.3}
.uitdaging__sub{display:block;font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.uitdaging__pijl{color:var(--muted);flex:none}

/* donker blok met een eigen vorm, als rustpunt tussen de witte kaarten */
.paneel{background:var(--donker);color:#fff;border-radius:var(--r-xl);padding:var(--s6) var(--s5);
  margin:var(--s7) 0;position:relative;overflow:hidden}
.paneel h2{font-size:var(--t-h2);margin-bottom:var(--s3);color:#fff}
.paneel p{font-size:var(--t-sm);opacity:.82;margin-bottom:var(--s5)}
.paneel .knop--primair{background:#fff;color:var(--donker)}
.paneel__sier{position:absolute;right:-40px;bottom:-40px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.08)}

/* --------------------------------------------------------------------------
   15. OUDE ARTIKELINHOUD
   De teksten in de database komen uit de vorige site en bevatten tabellen,
   secties en citaten zonder opmaak. Zonder deze regels loopt een tabel op een
   telefoon buiten het scherm, en dan schuift de hele pagina opzij.
   -------------------------------------------------------------------------- */
.artikel__inhoud section,.artikel__inhoud article,.artikel__inhoud header,
.artikel__inhoud footer,.artikel__inhoud div{max-width:100%}
.artikel__inhoud table{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin:0 0 var(--s5)}
.artikel__inhoud thead th{text-align:left;font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);padding:var(--s2)}
.artikel__inhoud td,.artikel__inhoud th{padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);
  vertical-align:top}
.artikel__inhoud blockquote{margin:0 0 var(--s5);padding:var(--s4) var(--s5);background:var(--mist);
  border-radius:var(--r-md);font-size:var(--t-body)}
.artikel__inhoud blockquote p:last-child{margin-bottom:0}
.artikel__inhoud hr{border:none;border-top:1px solid var(--line);margin:var(--s6) 0}
.artikel__inhoud footer{font-size:var(--t-sm);color:var(--muted);border-top:1px solid var(--line);
  padding-top:var(--s4);margin-top:var(--s6)}
.artikel__inhoud strong{font-weight:600}

/* Past een tabel toch niet, dan schuift alleen die tabel opzij. */
@media (max-width:360px){
  /* Op de smalste telefoons levert de tijdkolom een beetje in, zodat de titel
     ernaast leesbaar blijft. Afbreken doet hij nog steeds niet. */
  .regel__tijd{width:100px;font-size:14px}
}

@media (max-width:520px){
  .artikel__inhoud table{display:block;overflow-x:auto;white-space:nowrap}
  .artikel__inhoud td,.artikel__inhoud th{white-space:normal;min-width:110px}
}

/* --------------------------------------------------------------------------
   16. WAT JE KRIJGT
   -------------------------------------------------------------------------- */
.krijg{display:grid;gap:var(--s4);margin-bottom:var(--s5)}
.krijg__item{display:flex;gap:var(--s4);align-items:flex-start}
.krijg__vak{width:40px;height:40px;border-radius:12px;background:var(--mist);flex:none;
  display:grid;place-items:center;color:var(--ink-soft)}
.krijg__vak svg{width:20px;height:20px}
.krijg__item strong{display:block;font-size:var(--t-body);margin-bottom:2px}
.krijg__item p{font-size:var(--t-sm);color:var(--muted)}

/* Werkend voorbeeld van het dashboard op de publieke pagina's. */
.voorbeeld{background:var(--mist);border-radius:var(--r-xl);padding:var(--s4);margin-bottom:var(--s5)}
.voorbeeld__balk{display:flex;justify-content:space-between;align-items:baseline;
  padding:0 var(--s2) var(--s3)}
.voorbeeld__tijd{font-family:var(--display);font-size:var(--t-sm);color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.voorbeeld .kaart{box-shadow:none}

/* Prijs: bedrag en voorwaarden uit elkaar getrokken. */
.prijs__kop{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.voorwaarden{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s2)}
.voorwaarden li{position:relative;padding-left:var(--s5);font-size:var(--t-sm);color:var(--muted)}
.voorwaarden li::before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:700}

/* Ruimte onder de voettekst wanneer de onderbalk van de app meeloopt. */
.tabbar-ruimte{height:86px}

/* --------------------------------------------------------------------------
   17. KLEUR EN BEELD
   De tegels en pictogramvakken krijgen elk een eigen tint, zoals in het
   ontwerp. De kleuren zijn afgeleid van de tokens, dus ze bewegen mee.
   -------------------------------------------------------------------------- */
.vak--lavendel{background:#EFECFC;color:#5B49D8}
.vak--mint{background:#E4F3EC;color:#3E8E6C}
.vak--perzik{background:#FCEFE2;color:#C57C2C}
.vak--roze{background:#FBEAEE;color:#C46379}
html[data-modus="nacht"] .vak--lavendel{background:#272049;color:#B5A6F5}
html[data-modus="nacht"] .vak--mint{background:#1B3830;color:#7FCCA8}
html[data-modus="nacht"] .vak--perzik{background:#3A2C1C;color:#E4B173}
html[data-modus="nacht"] .vak--roze{background:#3A2029;color:#E39BAC}

.tegel__vak,.uitdaging__vak,.krijg__vak{transition:transform .12s ease}

/* Illustratie in een lege of feestelijke toestand. */
.illu{display:block;width:100%;max-width:320px;height:auto;margin:0 auto var(--s5)}
.illu--klein{max-width:220px}

/* Compacte weekgrafiek op het dashboard. */
.week{display:flex;align-items:flex-end;gap:5px;height:78px;margin:var(--s4) 0 var(--s2)}
.week__staaf{flex:1;border-radius:5px 5px 0 0;background:var(--mist);position:relative;
  overflow:hidden;min-height:4px}
.week__deel{position:absolute;left:0;right:0;bottom:0;background:var(--ink-soft)}
.week__staaf[data-vandaag] .week__deel{background:var(--ink)}
.week__labels{display:flex;gap:5px;font-size:var(--t-micro);color:var(--muted)}
.week__labels span{flex:1;text-align:center}

/* Aanvinkvakje met uitleg eronder, bijvoorbeeld ingelogd blijven. */
.vinkje{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s5);cursor:pointer}
.vinkje input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--ink)}
.vinkje strong{display:block;font-size:var(--t-body);font-weight:600}
.vinkje small{display:block;font-size:var(--t-sm);color:var(--muted);margin-top:2px}

/* --------------------------------------------------------------------------
   18. KEUZELIJST
   Antwoordopties in de slaapcheck: grote raakvlakken, duidelijk aangevinkt.
   -------------------------------------------------------------------------- */
.keuzelijst{display:grid;gap:var(--s2)}
.keuzelijst input{position:absolute;opacity:0;width:0;height:0}
.keuzelijst label{display:block;padding:var(--s4);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper);cursor:pointer;font-size:var(--t-body);
  transition:border-color .12s ease,background .12s ease}
.keuzelijst input:checked + label{border-color:var(--ink);background:var(--mist);font-weight:600}
.keuzelijst input:focus-visible + label{box-shadow:var(--ring)}

/* --------------------------------------------------------------------------
   19. GRAFIEKEN
   Getekend als SVG door PHP. De kleuren komen uit de tokens, dus nachtmodus
   gaat vanzelf goed en er is geen grafiekbibliotheek nodig.
   -------------------------------------------------------------------------- */
.kompas,.donut{max-width:260px;margin:var(--s4) auto var(--s3)}
.kompas svg,.donut svg{width:100%;height:auto;display:block}
.kompas__grond{fill:none;stroke:var(--mist);stroke-width:28}
.kompas__deel{fill:var(--ink)}
.kompas__deel.is-nacht{fill:var(--ink-soft)}
.kompas__uur{fill:var(--muted);font-size:9px;text-anchor:middle;font-family:var(--ui)}
.kompas__nu{stroke:var(--rose);stroke-width:2;stroke-linecap:round}
.lint__legenda i.is-nachtdeel{background:var(--ink-soft)}

.spreiding{width:100%;height:auto;display:block;margin-top:var(--s3)}
.spreiding__band{fill:var(--mist)}
.spreiding__lijn{stroke:var(--line);stroke-width:1}
.spreiding__label{fill:var(--muted);font-size:8px;font-family:var(--ui)}
.spreiding__pad{fill:none;stroke:var(--ink-soft);stroke-width:1.5;opacity:.5}
.spreiding__punt{fill:var(--ink)}
.spreiding__punt.is-afwijkend{fill:var(--amber)}

.verdeling{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  align-items:end;margin:var(--s5) 0 var(--s4)}
.verdeling__bak{display:flex;flex-direction:column;align-items:center;text-align:center}
.verdeling__staaf{width:100%;border-radius:6px 6px 0 0;margin-bottom:var(--s2)}
.verdeling__staaf.is-rose{background:var(--rose)}
.verdeling__staaf.is-amber{background:var(--amber)}
.verdeling__staaf.is-sage{background:var(--sage)}
.verdeling__aantal{font-family:var(--display);font-size:19px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.verdeling__label{font-size:var(--t-micro);font-weight:600;margin-top:2px}
.verdeling__sub{font-size:var(--t-micro);color:var(--muted);line-height:1.3;margin-top:2px}

.donut__deel.is-nacht{fill:var(--ink)}
.donut__deel.is-dag{fill:var(--ink-soft)}
.donut__deel.is-wakker{fill:var(--mist)}
.donut__groot{fill:var(--ink);font-family:var(--display);font-size:20px;text-anchor:middle}
.donut__klein{fill:var(--muted);font-size:9px;text-anchor:middle;font-family:var(--ui)}
.donut__legenda{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);text-align:center}
.donut__legenda strong{display:block;font-size:var(--t-sm);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.donut__legenda span:last-child{display:block;font-size:var(--t-micro);color:var(--muted)}
.donut__stip{display:inline-block;width:9px;height:9px;border-radius:3px;margin-bottom:3px}
.donut__stip.is-nacht{background:var(--ink)}
.donut__stip.is-dag{background:var(--ink-soft)}
.donut__stip.is-wakker{background:var(--mist);border:1px solid var(--line)}

/* Ritmescore en voorspelnauwkeurigheid */
.score__grond{fill:none;stroke:var(--mist);stroke-width:14}
.score__vul{fill:none;stroke:var(--ink);stroke-width:14;stroke-linecap:round;
  transition:stroke-dasharray .8s cubic-bezier(.4,0,.2,1)}
.score__getal{fill:var(--ink);font-family:var(--display);font-size:34px;text-anchor:middle}
.scoredeel{margin-top:var(--s4)}
.scoredeel__kop{display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-sm);margin-bottom:6px}
.scoredeel__kop span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.scoredeel__uitleg{font-size:var(--t-micro);color:var(--muted);margin-top:5px}
.donut__deel.is-raak{fill:var(--sage)}
.donut__deel.is-bijna{fill:var(--amber)}
.donut__deel.is-mis{fill:var(--mist)}
.donut__stip.is-raak{background:var(--sage)}
.donut__stip.is-bijna{background:var(--amber)}
.donut__stip.is-mis{background:var(--mist);border:1px solid var(--line)}

/* Lokaasveld tegen robots: onzichtbaar, maar niet voor schermlezers verborgen
   met display:none — sommige robots slaan dat juist over. */
.lokaas{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Veld dat pas openklapt als je het nodig hebt, zoals de koppelcode. */
details.stilveld{margin-bottom:var(--s5)}
details.stilveld summary{cursor:pointer;font-size:var(--t-sm);color:var(--muted);
  list-style:none;text-decoration:underline}
details.stilveld summary::-webkit-details-marker{display:none}

/* Wachtwoord tijdelijk tonen. */
.wachtwoordveld{position:relative}
.wachtwoordveld input{padding-right:76px}
.wachtwoordveld__knop{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:none;background:none;color:var(--ink-soft);font-size:var(--t-sm);font-weight:600;
  cursor:pointer;padding:8px 10px;border-radius:8px}

/* Logo zodra het bestand er staat; anders blijft de tekstversie staan. */
.merk__logo{height:32px;width:auto;display:block}

/* Kindwisselaar in de balk bovenaan. */
.kindwissel select{appearance:none;-webkit-appearance:none;border:none;background:transparent;
  font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);
  padding:0 20px 0 0;margin:0;min-height:0;cursor:pointer;max-width:100%;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 8px) 12px,calc(100% - 4px) 12px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.kindwissel select:focus-visible{box-shadow:var(--ring)}

/* --------------------------------------------------------------------------
   20. WEEKOVERZICHT
   De klasse heet .a4 en niet .blad: dat laatste is het uitschuifpaneel voor
   het loggen, en dat staat op display:none tot je het opent. Door die
   naambotsing was het hele weekoverzicht onzichtbaar — een witte pagina.

   Opgemaakt op A4. Op het scherm leest het als een gewone pagina; bij printen
   of opslaan als pdf valt alles weg wat er niet op papier hoort.
   -------------------------------------------------------------------------- */
.a4{max-width:760px;margin:0 auto;padding:var(--s5);background:var(--surface);
  color:var(--tekst)}
.a4__kop{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);
  padding-bottom:var(--s4);border-bottom:2px solid var(--ink);margin-bottom:var(--s5)}
.a4__merk{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--ink)}
.a4__merk .merk__naam{font-family:var(--display);font-size:20px;font-weight:600}
.a4__merk .merk__teken{font-size:20px}
.a4__periode{text-align:right;font-size:var(--t-sm)}
.a4__periode strong{display:block;font-family:var(--display);font-size:17px;color:var(--ink)}
.a4__periode span{color:var(--muted)}

.a4__kind{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-bottom:var(--s5)}
.a4__kind strong{display:block;font-family:var(--display);font-size:18px;color:var(--ink);margin:2px 0}
.a4__kind span:last-child{font-size:var(--t-sm);color:var(--muted)}

.a4__cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
  padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:var(--s5);text-align:center}
.a4__cijfers > div span:nth-child(2){display:block;font-size:var(--t-micro);color:var(--muted)}
.a4__cijfers small{display:block;font-size:var(--t-micro);color:var(--muted);opacity:.75;margin-top:2px}
.a4__groot{font-family:var(--display);font-size:22px;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.a4__blok{margin-bottom:var(--s6)}
.a4__blok h2{font-size:var(--t-h3);margin-bottom:var(--s3)}
.a4__blok--twee{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.a4__blok .kaart{border:none;box-shadow:none;padding:0;margin:0}
.a4__inzicht{font-size:var(--t-sm);margin-bottom:var(--s3);line-height:1.5}

.a4__voet{border-top:1px solid var(--line);padding-top:var(--s4);font-size:var(--t-micro);
  color:var(--muted)}
.a4__voet p{margin-bottom:var(--s2)}
.a4__acties{padding-top:var(--s5)}

@media (max-width:600px){
  .a4__blok--twee,.a4__kind{grid-template-columns:1fr}
  .a4__cijfers{grid-template-columns:1fr 1fr;gap:var(--s4)}
}

/* Wat er op papier niet hoort te staan. */
@media print{
  .tabbar,.a4__acties,.siteheader,.sitevoet,.tabbar-ruimte{display:none!important}
  body{background:#fff}
  .a4{max-width:100%;padding:0;box-shadow:none}
  .a4__blok{break-inside:avoid}
  .tabel tr{break-inside:avoid}
  a{text-decoration:none;color:inherit}
  @page{margin:14mm}
}

/* Verwijzingen onderaan een artikel. */
.artikel__inhoud .leesverder{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.artikel__inhoud .leesverder li{padding:var(--s4);background:var(--mist);border-radius:var(--r-md);
  font-size:var(--t-sm)}
.artikel__inhoud .leesverder a{font-weight:600;color:var(--ink)}

/* Bijzonderheden aanvinken: chips die je aantikt. */
.vinkjes{display:flex;flex-wrap:wrap;gap:var(--s2)}
.vinkjes input{position:absolute;opacity:0;width:0;height:0}
.vinkjes label{display:inline-block;padding:8px 14px;border:1px solid var(--line);
  border-radius:99px;background:var(--paper);cursor:pointer;font-size:var(--t-sm);
  transition:border-color .12s ease,background .12s ease}
.vinkjes input:checked + label{border-color:var(--ink);background:var(--mist);font-weight:600}
.vinkjes input:focus-visible + label{box-shadow:var(--ring)}
/* Eén keuze uit een rij, zoals "hoe lang geleden". */
.vinkjes--een label{min-width:0}

/* Bijzonderheden bij een slaapje in een lijst. */
.regel__context{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.regel__context span{font-size:var(--t-micro);background:var(--mist);color:var(--ink-soft);
  padding:2px 8px;border-radius:99px}

/* --------------------------------------------------------------------------
   21. VERGELIJKEN
   Twee kinderen naast elkaar op dezelfde leeftijd. Het huidige kind links en
   volledig zwart, het andere kind rechts en gedempt: dit is geen wedstrijd.
   -------------------------------------------------------------------------- */
.vergelijk{display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);
  align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.vergelijk--kop{border-bottom:2px solid var(--line);padding-bottom:var(--s2);
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.vergelijk--kop strong{color:var(--ink);font-size:var(--t-sm);text-transform:none;
  letter-spacing:0;min-width:64px;text-align:right}
.vergelijk__naam{font-size:var(--t-sm)}
.vergelijk__waarde{font-variant-numeric:tabular-nums;min-width:64px;text-align:right;
  font-weight:600;white-space:nowrap}
.vergelijk__waarde--dof{color:var(--muted);font-weight:400}
.vergelijk__verschil{font-size:var(--t-micro);color:var(--muted);margin:-4px 0 var(--s2)}

/* Snelkeuzes onder de grote wakkerknop. Bewust klein en rustig: de hoofdactie
   blijft de knop erboven. */
.wakker__eerder{text-align:center;font-size:var(--t-sm);color:var(--muted);
  margin:var(--s3) 0 var(--s5)}
.wakker__keuze{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:var(--t-sm);font-weight:600;padding:6px 12px;border-radius:99px;margin:0 2px;
  cursor:pointer;font-family:inherit}
.wakker__keuze:hover{border-color:var(--ink)}
.wakker__keuze:focus-visible{box-shadow:var(--ring)}

/* "Anders": een tijdveld dat pas verschijnt als je erom vraagt. Werkt zonder
   scripts, met een verborgen schakelaar. */
.wakker__schakel{position:absolute;opacity:0;width:0;height:0}
.wakker__anders{display:none;margin:0 auto var(--s5);max-width:340px;
  background:var(--mist);border-radius:var(--r-lg);padding:var(--s4)}
.wakker__schakel:checked ~ .wakker__anders{display:block}
.wakker__anders label{display:block;font-size:var(--t-sm);color:var(--tekst);
  font-weight:600;margin-bottom:var(--s3)}
.wakker__anders-rij{display:flex;gap:var(--s2);align-items:stretch}
.wakker__anders-rij input{flex:1;min-height:48px;padding:0 var(--s3);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);font-size:17px;font-family:inherit;
  text-align:center;font-variant-numeric:tabular-nums}
/* De bevestiging is een echte knop met tekst erin, geen leeg vakje. */
.wakker__anders-rij .knop{flex:none;width:auto;padding:0 var(--s5);min-height:48px}
label.wakker__keuze{display:inline-block;cursor:pointer}

/* --------------------------------------------------------------------------
   DE NACHT: LOPENDE ONDERBREKING EN DE URENSTRIP
   -------------------------------------------------------------------------- */

/* De kaart die verschijnt zodra het kind 's nachts wakker is. Eén stand, één
   hoofdknop. De reden staat eronder en verandert niets aan die stand — dat was
   in de oude opzet juist de val: "voeding" aantikken sloot de onderbreking af
   terwijl je dacht dat je alleen een reden koos. */
.onderbreking{background:var(--mist);border-radius:var(--r-xl);padding:var(--s5);
  margin:0 0 var(--s5);text-align:center}
.onderbreking__wakker{font-size:var(--t-micro);color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 var(--s1)}
/* Op één regel: "03:14 · 14 min" over twee regels leest als twee losse tijden. */
.onderbreking__sinds{font-family:var(--display);font-size:var(--t-h2);color:var(--tekst);
  margin:0 0 var(--s4);font-variant-numeric:tabular-nums;white-space:nowrap}
.onderbreking__sinds b{font-weight:600}
.onderbreking__label{font-size:var(--t-micro);color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin:var(--s5) 0 var(--s2)}
/* De gekozen reden blijft zichtbaar: je moet kunnen zien wat er al staat,
   want de reden mag je later nog aanpassen zonder dat er iets afsluit. */
.wakker__keuze--aan{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.onderbreking__terug{margin:var(--s3) 0 0;font-size:var(--t-sm)}
.onderbreking__terug button{background:none;border:none;color:var(--muted);
  font-size:var(--t-sm);font-family:inherit;text-decoration:underline;cursor:pointer;padding:6px}

/* Een tweede actie onder de hoofdknop: zelfde breedte, rustiger toon, zodat
   niemand zich hoeft af te vragen waar hij staat. */
.nachtkeuze{margin:calc(var(--s3) * -1) 0 var(--s5)}
.nachtkeuze .knop{width:100%}

/* De urenstrip. Twaalf vakjes die je aantikt; verder niets. */
.nachtstrip{margin:0}
.nachtstrip__vraag{font-size:var(--t-sm);font-weight:600;color:var(--tekst);
  margin:var(--s5) 0 var(--s3)}
.nachtstrip__vraag:first-of-type{margin-top:0}
.nachtstrip__uren{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.nachtstrip__uren input{position:absolute;opacity:0;width:0;height:0}
.nachtstrip__uren label{display:flex;align-items:center;justify-content:center;
  min-height:46px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);color:var(--muted);font-size:var(--t-body);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;user-select:none}
.nachtstrip__uren input:checked + label{background:var(--ink);border-color:var(--ink);
  color:var(--surface)}
.nachtstrip__uren input:focus-visible + label{box-shadow:var(--ring)}
.nachtstrip__uren label:active{transform:scale(.96)}
.nachtstrip__hint{font-size:var(--t-sm);color:var(--muted);margin:var(--s3) 0 var(--s4)}
.nachtstrip .knop{width:100%}

/* Het vouwblok waarin de strip zit als de app er 's ochtends zelf naar vraagt,
   en het blok met precieze tijden voor wie die wél paraat heeft. */
.nachtstrip__vouw{margin:var(--s3) 0 0}
.nachtstrip__vouw > summary{list-style:none;cursor:pointer;min-height:48px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-weight:600;font-size:var(--t-body)}
.nachtstrip__vouw > summary::-webkit-details-marker{display:none}
.nachtstrip__vouw[open] > summary{margin-bottom:var(--s4);background:var(--mist);
  border-color:transparent;color:var(--muted);font-weight:500}

/* De ochtendvraag zelf: de enige kaart op Vandaag die om een antwoord vraagt,
   dus mag hij eruit springen. */
.kaart--vraag{border-color:var(--ink-soft)}
.kaart--vraag .kaart__kop{font-family:var(--display);font-size:var(--t-h2);
  margin:0 0 var(--s2)}
.kaart--vraag .kaart__tekst{font-size:var(--t-sm);color:var(--muted);margin:0 0 var(--s4)}
.kaart--vraag .knop--primair{width:100%}
.kaart__later{display:block;width:100%;background:none;border:none;color:var(--muted);
  font-size:var(--t-sm);font-family:inherit;cursor:pointer;padding:var(--s3) 0 0}

/* Melding als het kind langer slaapt dan voorspeld. Rustig van toon: dit is
   informatie, geen waarschuwing. */
.status__over{font-size:var(--t-sm);color:var(--muted);background:var(--mist);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:var(--s3) 0 0}

/* --------------------------------------------------------------------------
   22. OCHTENDBERICHT
   Donker paneel, want dit is het eerste wat je ziet en het mag zich
   onderscheiden van de kaarten eronder.
   -------------------------------------------------------------------------- */
.ochtend{background:var(--donker);color:#fff;border-radius:var(--r-xl);
  padding:var(--s5);margin-bottom:var(--s5)}
.ochtend__kop{display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:var(--s3)}
.ochtend__kop .eyebrow{color:#B9AEF2}
.ochtend__sluit{border:none;background:none;color:#B9AEF2;font-size:22px;line-height:1;
  cursor:pointer;padding:0 4px;font-family:inherit}
.ochtend__kern{font-family:var(--display);font-size:20px;line-height:1.35;margin-bottom:var(--s4)}
.ochtend__regels{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.ochtend__regels span{font-size:var(--t-sm);background:rgba(255,255,255,.14);
  padding:5px 12px;border-radius:99px;white-space:nowrap}
.ochtend__advies{font-size:var(--t-sm);color:#CFC6FF;margin:0}

/* Genummerde stap in een instructie. */
.stap{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--mist);color:var(--ink);font-family:var(--ui);
  font-size:13px;font-weight:700}

/* --------------------------------------------------------------------------
   23. KRUIMELPAD
   Klein en rustig: het is oriëntatie, geen navigatie waar je op moet mikken.
   -------------------------------------------------------------------------- */
.kruimels{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--t-micro);
  color:var(--muted);margin-bottom:var(--s4)}
.kruimels a{color:var(--muted);text-decoration:none}
.kruimels a:hover{color:var(--ink);text-decoration:underline}
.kruimels span[aria-current]{color:var(--tekst);font-weight:600}

/* Aantal gidsen op een categorietegel. */
.tegel small{display:block;font-size:var(--t-micro);color:var(--muted);font-weight:400;margin-top:2px}

/* Eigen tijd invullen onder de snelkeuzes. */
.eigentijd{margin:0 0 var(--s4)}
.eigentijd label{display:block;font-size:var(--t-sm);color:var(--muted);margin-bottom:6px}
.eigentijd input{width:100%;min-height:48px;padding:0 var(--s3);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--paper);font-size:17px;font-family:inherit;
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   24. APP-UITLEG
   Verdwijnt zodra de app al vanaf het beginscherm draait; dan is de uitleg
   overbodig en zou hij alleen maar in de weg staan.
   -------------------------------------------------------------------------- */
.appuitleg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s5);margin-bottom:var(--s5)}
.appuitleg__kop{font-family:var(--display);font-size:var(--t-h2);margin:var(--s2) 0 var(--s2)}
.appuitleg__intro{color:var(--muted);font-size:var(--t-sm);margin-bottom:var(--s4)}
.appuitleg__voordelen{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.appuitleg__voordelen div{background:var(--mist);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.appuitleg__voordelen strong{display:block;font-size:var(--t-sm);margin-bottom:2px}
.appuitleg__voordelen span{font-size:var(--t-sm);color:var(--muted)}
.appuitleg__apparaat{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--s2)}
.appuitleg__apparaat summary{padding:var(--s3) var(--s4);cursor:pointer;font-weight:600;
  font-size:var(--t-sm);list-style:none}
.appuitleg__apparaat summary::-webkit-details-marker{display:none}
.appuitleg__apparaat summary::after{content:"+";float:right;color:var(--ink);font-weight:700}
.appuitleg__apparaat[open] summary::after{content:"–"}
.appuitleg__apparaat ol{margin:0;padding:0 var(--s4) var(--s3) calc(var(--s4) + 20px);
  font-size:var(--t-sm);color:var(--tekst)}
.appuitleg__apparaat li{margin-bottom:6px}
.appuitleg__let{font-size:var(--t-micro);color:var(--muted);padding:0 var(--s4) var(--s3);margin:0}
.appuitleg__voet{font-size:var(--t-sm);color:var(--muted);margin:var(--s4) 0 0}

@media (min-width:560px){
  .appuitleg__voordelen{grid-template-columns:1fr 1fr}
}

/* Draait de app al vanaf het beginscherm? Dan is deze uitleg overbodig. */
@media (display-mode: standalone), (display-mode: fullscreen){
  .appuitleg{display:none}
}

/* --------------------------------------------------------------------------
   25. WAT NU
   Eén actie, groot. De randkleur verschilt per situatie zodat je in één blik
   ziet of er iets moet gebeuren.
   -------------------------------------------------------------------------- */
.nudoen{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--r-xl);padding:var(--s5);margin-bottom:var(--s4)}
.nudoen--optimaal{border-left-color:var(--sage)}
.nudoen--nadert{border-left-color:var(--amber)}
.nudoen--laat{border-left-color:var(--rose)}
.nudoen--rustig{border-left-color:var(--ink-soft)}
.nudoen__actie{font-family:var(--display);font-size:var(--t-h1);line-height:1.15;
  margin:var(--s2) 0 var(--s2)}
.nudoen__wanneer{font-family:var(--display);font-size:22px;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;margin:0 0 var(--s3)}
.nudoen__toelichting{color:var(--tekst);margin:0}
.nudoen__waarom{font-size:var(--t-sm);color:var(--muted);background:var(--mist);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:var(--s4) 0 0}
.nudoen__zeker{margin:var(--s3) 0 0}

/* --------------------------------------------------------------------------
   26. WAT WE WETEN
   Elke uitspraak met het aantal metingen ernaast. Die badge is geen sieraad:
   hij laat zien hoeveel gewicht een zin verdient.
   -------------------------------------------------------------------------- */
.weten{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.weten:last-of-type{border-bottom:none;padding-bottom:0}
.weten:first-of-type{padding-top:0}
.weten__kop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  margin-bottom:6px}
.weten__kop strong{font-size:var(--t-body);font-weight:600}
.weten p{margin:0;color:var(--muted);font-size:var(--t-sm)}

/* Conclusie boven een grafiek. Een ring zonder zin erboven leest als "mooi",
   met zin erboven als "aha". */
.conclusie{font-size:var(--t-body);color:var(--tekst);background:var(--mist);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:0 0 var(--s3)}

/* --------------------------------------------------------------------------
   27. VERVOLGVRAAG
   Verschijnt alleen vlak na een snelle registratie, en is met één tik weg.
   -------------------------------------------------------------------------- */
.navraag{background:var(--mist);border-radius:var(--r-lg);padding:var(--s4);
  margin-bottom:var(--s4)}
.navraag__vraag{font-size:var(--t-sm);font-weight:600;margin:0 0 var(--s3)}
.navraag__keuzes{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.navraag__over{border:none;background:none;color:var(--muted);font-size:var(--t-sm);
  cursor:pointer;font-family:inherit;text-decoration:underline;padding:6px 4px}
.navraag__waarom{font-size:var(--t-micro);color:var(--muted);margin:var(--s3) 0 0}

/* Eén bevinding over dit kind, op het dashboard. */
.bevinding{font-family:var(--display);font-size:var(--t-h3);line-height:1.3;margin:0}
.bevinding__bron{font-size:var(--t-micro);color:var(--muted);margin:var(--s3) 0 0}

/* Compacte keuzerij onder een grote knop: optioneel, dus rustig van toon. */
.keuzerij__label{font-size:var(--t-micro);color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin:0 0 8px;text-align:center}
.keuzerij{justify-content:center;margin-bottom:var(--s4)}
.keuzerij label{font-size:var(--t-sm);padding:7px 13px}

/* De link naar het volledige beeld, achter de onderbouwing. */
.nudoen__waarom a{display:inline-block;margin-top:6px;color:var(--ink);font-weight:600;
  text-decoration:underline}

/* Drempelverlagers onder de kop, en de belofte onder de knop. */
.geruststelling{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  font-size:var(--t-sm);color:var(--muted);margin:var(--s4) 0 0}
.geruststelling span[aria-hidden]{opacity:.5}
.drempel{font-size:var(--t-sm);color:var(--muted);text-align:center;margin:var(--s3) 0 0}

/* Slaapplek: dichtgeklapt tot je hem nodig hebt. De hoofdactie blijft
   daarmee één tik. */
.plek{text-align:center;margin:0 0 var(--s4)}
.plek__opener{font-size:var(--t-sm);color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.plek__opener:hover{color:var(--ink)}
.plek__keuzes{display:none}
.wakker__schakel:checked ~ .plek__keuzes{display:block}

/* --------------------------------------------------------------------------
   27. MELDINGEN AANZETTEN
   Verschijnt één keer, pas als de app iets te melden heeft. Verdwijnt zodra
   je kiest — ook bij "nu even niet", want doorvragen is precies de manier om
   een nee te krijgen die je niet meer kunt terugdraaien.
   -------------------------------------------------------------------------- */
.melding-vraag{background:var(--mist);border-radius:var(--r-xl);padding:var(--s5);
  margin-bottom:var(--s4)}
.melding-vraag__kop{font-family:var(--display);font-size:var(--t-h2);margin:var(--s2) 0}
.melding-vraag p{color:var(--muted);font-size:var(--t-sm);margin:0}
.melding-vraag .knop-rij{margin-top:var(--s4)}
.melding-vraag__later{text-align:center;margin-top:var(--s3)}
.melding-vraag__fout{margin-top:var(--s3);color:var(--tekst)}

/* Schuifje voor een instelling. Het aankruisvakje zelf is verborgen; het
   label eromheen is de knop. */
.schuif{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--line)}
.schuif:last-of-type{border-bottom:none}
.schuif__tekst{flex:1;min-width:0}
.schuif__tekst strong{display:block;font-size:var(--t-body);font-weight:600}
.schuif__tekst span{font-size:var(--t-sm);color:var(--muted)}
.schuif input{position:absolute;opacity:0;width:0;height:0}
.schuif__knop{flex:none;width:52px;height:30px;border-radius:99px;background:var(--line);
  position:relative;cursor:pointer;transition:background .15s}
.schuif__knop::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;transition:transform .15s;
  box-shadow:0 1px 3px rgba(26,16,64,.25)}
.schuif input:checked + .schuif__knop{background:var(--sage)}
.schuif input:checked + .schuif__knop::after{transform:translateX(22px)}
.schuif input:focus-visible + .schuif__knop{box-shadow:var(--ring)}