/* =====================================================================
   Nederlands B1 Examentrainer – ontwerpsysteem
   Rustig, grote knoppen, veel witruimte. Licht en donker. Mobiel en desktop.
   ===================================================================== */

/* ---------- 1. Variabelen (licht) ---------- */
:root {
  color-scheme: light;

  /* kleuren */
  --primair: #0e7490;
  --primair-hover: #155e75;
  --primair-zacht: #e0f2f7;
  --primair-tekst: #ffffff;
  --goed: #15803d;
  --goed-zacht: #dcfce7;
  --fout: #b91c1c;
  --fout-zacht: #fee2e2;
  --waarschuw: #b45309;
  --waarschuw-zacht: #fef3c7;
  --lamp: #c27803;
  --info: #0e7490;
  --info-zacht: #e0f2f7;
  --neutraal: #64748b;
  --neutraal-zacht: #e2e8f0;

  /* vlakken, tekst en lijnen: docs/ONTWERP.md §2 */
  --achtergrond: #eef1f6;                  /* koel grijsblauw: de witte kaarten krijgen zo diepte */
  --kaart: #ffffff;
  --kaart-2: #f2f4f8;
  --papier: #fffdf8;
  --tekst: #111827;
  --tekst-zacht: #4b5563;
  --tekst-zwak: #5f6875;                   /* 5:1 op de achtergrond, 5.6:1 op een kaart */
  --rand: #e1e5ed;
  --rand-sterk: #c9d0dc;
  --veld-rand: #8a929e;                    /* rand van invoervelden: 3:1 tegen het vlak (WCAG 1.4.11) */
  --balk-bg: rgba(238, 241, 246, 0.80);   /* topbalk en onderbalk: half doorzichtig, met blur */
  --markeer: #fde68a;
  --markeer-tekst: #111827;
  --focus: #0e7490;
  --focus-ring: rgba(14, 116, 144, 0.35);
  --overlay: rgba(15, 23, 42, 0.45);
  --accent-tekst: #ffffff;   /* tekst op een gekleurde achtergrond (goed, fout, primair) */
  --select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  /* schaduwen */
  --schaduw-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  --schaduw-2: 0 10px 30px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
  --schaduw-3: 0 24px 60px rgba(16, 24, 40, 0.18);
  /* vaste balken onderaan (onderbalk, sticky-onder): licht een schaduw, donker een lichte bovenrand */
  --balk-rand: var(--rand);
  --balk-schaduw: 0 -2px 10px rgba(16, 24, 40, 0.05);
  /* hoofdknop (docs/ONTWERP.md §5): licht een donker vlak, donker een licht vlak, allebei vlak en zonder glans.
     Het streepje onder de knop en de zachte knop op een overzicht nemen de kleur van het onderdeel;
     die staan daarom bij de knop zelf (sectie 7). */
  --knop-bg: #111827;
  --knop-bg-hover: #2b3648;
  --knop-tekst: #ffffff;
  --knop-schaduw: 0 1px 2px rgba(15, 23, 42, 0.18);
  --knop-zacht-hover: rgba(15, 23, 42, 0.07);   /* laagje over de zachte knop bij aanwijzen: licht iets donkerder, donker iets lichter */
  /* alleen in de lichte modus (de donkere blokken zetten ze uit): kleurzweem bovenaan de pagina
     en een licht verloop in de startkaart */
  --zweem: 0.8;
  --hero-bg: linear-gradient(135deg, #ffffff 0%, #ffffff 42%, #edf5ff 100%);
  --hero-gloed: 0.34;
  --kop-tegel: #ffffff;
  --kop-tegel-schaduw: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.06);

  /* vorm */
  --radius: 16px;
  --radius-klein: 12px;
  --radius-groot: 20px;
  --radius-rond: 999px;

  /* ruimte-schaal */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-6: 32px;
  --r-7: 48px;

  /* typografie */
  --font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-tekst: Charter, 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  --fs-xs: 0.8rem;
  --fs-s: 0.9rem;
  --fs-m: 1rem;
  --fs-l: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-xxl: 1.75rem;
  --fs-xxxl: 2.1rem;

  /* lay-out */
  --zijbalk-breedte: 248px;
  --topbalk-hoogte: 56px;
  --onderbalk-hoogte: 64px;
  --inhoud-breedte: 1040px;
  --inhoud-padding: 16px;
  --veilig-onder: env(safe-area-inset-bottom, 0px);
  --onder-ruimte: calc(var(--onderbalk-hoogte) + var(--veilig-onder));

  --overgang: 160ms ease;
}

/* ---------- 2. Donker ---------- */
html[data-thema="donker"] {
  color-scheme: dark;
  --primair: #38bdf8;
  --primair-hover: #7dd3fc;
  --primair-zacht: rgba(56, 189, 248, 0.14);
  --primair-tekst: #0b1620;
  --goed: #4ade80;
  --goed-zacht: rgba(74, 222, 128, 0.16);
  --fout: #f87171;
  --fout-zacht: rgba(248, 113, 113, 0.16);
  --waarschuw: #fbbf24;
  --waarschuw-zacht: rgba(251, 191, 36, 0.16);
  --lamp: #fbbf24;
  --info: #38bdf8;
  --info-zacht: rgba(56, 189, 248, 0.14);
  --neutraal: #94a3b8;
  --neutraal-zacht: rgba(148, 163, 184, 0.18);
  --achtergrond: #0b0d10;
  --kaart: #13161a;
  --kaart-2: #1a1e23;
  --papier: #171a1f;
  --tekst: #edeff2;
  --tekst-zacht: #b4bac4;
  --tekst-zwak: #8a919c;
  --rand: #24282f;
  --rand-sterk: #343a43;
  --veld-rand: #6b7280;
  --balk-bg: rgba(11, 13, 16, 0.78);
  --markeer: rgba(250, 204, 21, 0.3);
  --markeer-tekst: #fef3c7;
  --focus: #38bdf8;
  --focus-ring: rgba(56, 189, 248, 0.4);
  --overlay: rgba(0, 0, 0, 0.6);
  --accent-tekst: #0b1620;
  --select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23b4bac4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --schaduw-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --schaduw-3: 0 24px 60px rgba(0, 0, 0, 0.65);
  --balk-rand: rgba(255, 255, 255, 0.14);
  --balk-schaduw: none;
  /* hoofdknop in donker: een licht vlak met donkere tekst (sectie 7) */
  --knop-bg: #edeff2;
  --knop-bg-hover: #d6dae1;
  --knop-tekst: #0b0d10;
  --knop-schaduw: 0 1px 2px rgba(0, 0, 0, 0.4);
  --knop-zacht-hover: rgba(255, 255, 255, 0.09);
  --zweem: 0;
  --nav-actief-vast: var(--kaart-2);
  --hero-bg: var(--kaart);
  --hero-gloed: 0.2;
  --kop-tegel: initial;
  --kop-tegel-schaduw: none;
}

@media (prefers-color-scheme: dark) {
  html[data-thema="auto"],
  html:not([data-thema]) {
    color-scheme: dark;
    --primair: #38bdf8;
    --primair-hover: #7dd3fc;
    --primair-zacht: rgba(56, 189, 248, 0.14);
    --primair-tekst: #0b1620;
    --goed: #4ade80;
    --goed-zacht: rgba(74, 222, 128, 0.16);
    --fout: #f87171;
    --fout-zacht: rgba(248, 113, 113, 0.16);
    --waarschuw: #fbbf24;
    --waarschuw-zacht: rgba(251, 191, 36, 0.16);
    --lamp: #fbbf24;
    --info: #38bdf8;
    --info-zacht: rgba(56, 189, 248, 0.14);
    --neutraal: #94a3b8;
    --neutraal-zacht: rgba(148, 163, 184, 0.18);
    --achtergrond: #0b0d10;
    --kaart: #13161a;
    --kaart-2: #1a1e23;
    --papier: #171a1f;
    --tekst: #edeff2;
    --tekst-zacht: #b4bac4;
    --tekst-zwak: #8a919c;
    --rand: #24282f;
    --rand-sterk: #343a43;
    --veld-rand: #6b7280;
    --balk-bg: rgba(11, 13, 16, 0.78);
    --markeer: rgba(250, 204, 21, 0.3);
    --markeer-tekst: #fef3c7;
    --focus: #38bdf8;
    --focus-ring: rgba(56, 189, 248, 0.4);
    --overlay: rgba(0, 0, 0, 0.6);
    --accent-tekst: #0b1620;
    --select-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23b4bac4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --schaduw-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --schaduw-3: 0 24px 60px rgba(0, 0, 0, 0.65);
    --balk-rand: rgba(255, 255, 255, 0.14);
    --balk-schaduw: none;
    /* hoofdknop in donker: een licht vlak met donkere tekst (sectie 7) */
    --knop-bg: #edeff2;
    --knop-bg-hover: #d6dae1;
    --knop-tekst: #0b0d10;
    --knop-schaduw: 0 1px 2px rgba(0, 0, 0, 0.4);
    --knop-zacht-hover: rgba(255, 255, 255, 0.09);
    --zweem: 0;
    --nav-actief-vast: var(--kaart-2);
    --hero-bg: var(--kaart);
    --hero-gloed: 0.2;
    --kop-tegel: initial;
    --kop-tegel-schaduw: none;
  }
}

/* ---------- 2b. Kleur per onderdeel (docs/ONTWERP.md §3) ----------
   Elk onderdeel heeft één eigen kleur voor het icoon, de voortgangsbalk en accenten.
   Een element met data-kleur="lezen" krijgt --k (de kleur), --k-zacht (de zachte tint) en --k-fel
   (de felle variant, alleen voor het streepje onder de sterke hoofdknop). */
:root {
  --kleur-dashboard: #0e7490;    --kleur-dashboard-zacht: #d8eff5;
  --kleur-intake: #4f46e5;       --kleur-intake-zacht: #e2e4fd;
  --kleur-themas: #b45309;       --kleur-themas-zacht: #fbe8c2;
  --kleur-grammatica: #15803d;   --kleur-grammatica-zacht: #d6f2df;
  --kleur-lezen: #2563eb;        --kleur-lezen-zacht: #dbe8fe;
  --kleur-luisteren: #7c3aed;    --kleur-luisteren-zacht: #e9e1fe;
  --kleur-schrijven: #c2410c;    --kleur-schrijven-zacht: #fde2d2;
  --kleur-spreken: #be185d;      --kleur-spreken-zacht: #fbdcea;
  --kleur-examen: #b91c1c;       --kleur-examen-zacht: #fcdede;
  --kleur-leaderboard: #a16207;  --kleur-leaderboard-zacht: #f9edba;
  --kleur-tips: #0f766e;         --kleur-tips-zacht: #d2f2ec;
  --kleur-instellingen: #475569; --kleur-instellingen-zacht: #e5e9f0;
  --kleur-plan: #4f46e5;         --kleur-plan-zacht: #e2e4fd;
  --kleur-fouten: #c2410c;       --kleur-fouten-zacht: #fde2d2;
  --kleur-streak: #d9480f;       --kleur-streak-zacht: #ffe2c4;
  --kleur-toets: #b45309;        --kleur-toets-zacht: #fbe8c2;
}
html[data-thema="donker"] {
  --kleur-dashboard: #38bdf8;    --kleur-dashboard-zacht: rgba(56, 189, 248, 0.16);
  --kleur-intake: #818cf8;       --kleur-intake-zacht: rgba(129, 140, 248, 0.18);
  --kleur-themas: #fbbf24;       --kleur-themas-zacht: rgba(251, 191, 36, 0.16);
  --kleur-grammatica: #4ade80;   --kleur-grammatica-zacht: rgba(74, 222, 128, 0.16);
  --kleur-lezen: #60a5fa;        --kleur-lezen-zacht: rgba(96, 165, 250, 0.18);
  --kleur-luisteren: #a78bfa;    --kleur-luisteren-zacht: rgba(167, 139, 250, 0.18);
  --kleur-schrijven: #fb923c;    --kleur-schrijven-zacht: rgba(251, 146, 60, 0.18);
  --kleur-spreken: #f472b6;      --kleur-spreken-zacht: rgba(244, 114, 182, 0.18);
  --kleur-examen: #f87171;       --kleur-examen-zacht: rgba(248, 113, 113, 0.18);
  --kleur-leaderboard: #facc15;  --kleur-leaderboard-zacht: rgba(250, 204, 21, 0.16);
  --kleur-tips: #2dd4bf;         --kleur-tips-zacht: rgba(45, 212, 191, 0.16);
  --kleur-instellingen: #94a3b8; --kleur-instellingen-zacht: rgba(148, 163, 184, 0.18);
  --kleur-plan: #818cf8;         --kleur-plan-zacht: rgba(129, 140, 248, 0.18);
  --kleur-fouten: #fb923c;       --kleur-fouten-zacht: rgba(251, 146, 60, 0.18);
  --kleur-streak: #fb923c;       --kleur-streak-zacht: rgba(251, 146, 60, 0.18);
  --kleur-toets: #fbbf24;        --kleur-toets-zacht: rgba(251, 191, 36, 0.16);
}
@media (prefers-color-scheme: dark) {
  html[data-thema="auto"],
  html:not([data-thema]) {
    --kleur-dashboard: #38bdf8;    --kleur-dashboard-zacht: rgba(56, 189, 248, 0.16);
    --kleur-intake: #818cf8;       --kleur-intake-zacht: rgba(129, 140, 248, 0.18);
    --kleur-themas: #fbbf24;       --kleur-themas-zacht: rgba(251, 191, 36, 0.16);
    --kleur-grammatica: #4ade80;   --kleur-grammatica-zacht: rgba(74, 222, 128, 0.16);
    --kleur-lezen: #60a5fa;        --kleur-lezen-zacht: rgba(96, 165, 250, 0.18);
    --kleur-luisteren: #a78bfa;    --kleur-luisteren-zacht: rgba(167, 139, 250, 0.18);
    --kleur-schrijven: #fb923c;    --kleur-schrijven-zacht: rgba(251, 146, 60, 0.18);
    --kleur-spreken: #f472b6;      --kleur-spreken-zacht: rgba(244, 114, 182, 0.18);
    --kleur-examen: #f87171;       --kleur-examen-zacht: rgba(248, 113, 113, 0.18);
    --kleur-leaderboard: #facc15;  --kleur-leaderboard-zacht: rgba(250, 204, 21, 0.16);
    --kleur-tips: #2dd4bf;         --kleur-tips-zacht: rgba(45, 212, 191, 0.16);
    --kleur-instellingen: #94a3b8; --kleur-instellingen-zacht: rgba(148, 163, 184, 0.18);
    --kleur-plan: #818cf8;         --kleur-plan-zacht: rgba(129, 140, 248, 0.18);
    --kleur-fouten: #fb923c;       --kleur-fouten-zacht: rgba(251, 146, 60, 0.18);
    --kleur-streak: #fb923c;       --kleur-streak-zacht: rgba(251, 146, 60, 0.18);
    --kleur-toets: #fbbf24;        --kleur-toets-zacht: rgba(251, 191, 36, 0.16);
  }
}
/* de felle variant van elke kleur: het streepje onder de sterke hoofdknop (sectie 7), in licht en donker
   dezelfde waarde. Niet voor tekst of iconen op een licht vlak: daarvoor is hij te licht. */
:root {
  --kleur-dashboard-fel: #38bdf8;    --kleur-intake-fel: #818cf8;
  --kleur-themas-fel: #fbbf24;       --kleur-grammatica-fel: #4ade80;
  --kleur-lezen-fel: #60a5fa;        --kleur-luisteren-fel: #a78bfa;
  --kleur-schrijven-fel: #fb923c;    --kleur-spreken-fel: #f472b6;
  --kleur-examen-fel: #f87171;       --kleur-leaderboard-fel: #facc15;
  --kleur-tips-fel: #2dd4bf;         --kleur-instellingen-fel: #94a3b8;
  --kleur-plan-fel: #818cf8;         --kleur-fouten-fel: #fb923c;
  --kleur-streak-fel: #fb923c;       --kleur-toets-fel: #fbbf24;
}
[data-kleur="dashboard"],
[data-kleur="progressie"]   { --k: var(--kleur-dashboard);    --k-zacht: var(--kleur-dashboard-zacht);    --k-fel: var(--kleur-dashboard-fel); }
[data-kleur="intake"]       { --k: var(--kleur-intake);       --k-zacht: var(--kleur-intake-zacht);       --k-fel: var(--kleur-intake-fel); }
[data-kleur="themas"]       { --k: var(--kleur-themas);       --k-zacht: var(--kleur-themas-zacht);       --k-fel: var(--kleur-themas-fel); }
[data-kleur="grammatica"]   { --k: var(--kleur-grammatica);   --k-zacht: var(--kleur-grammatica-zacht);   --k-fel: var(--kleur-grammatica-fel); }
[data-kleur="lezen"]        { --k: var(--kleur-lezen);        --k-zacht: var(--kleur-lezen-zacht);        --k-fel: var(--kleur-lezen-fel); }
[data-kleur="luisteren"]    { --k: var(--kleur-luisteren);    --k-zacht: var(--kleur-luisteren-zacht);    --k-fel: var(--kleur-luisteren-fel); }
[data-kleur="schrijven"]    { --k: var(--kleur-schrijven);    --k-zacht: var(--kleur-schrijven-zacht);    --k-fel: var(--kleur-schrijven-fel); }
[data-kleur="spreken"]      { --k: var(--kleur-spreken);      --k-zacht: var(--kleur-spreken-zacht);      --k-fel: var(--kleur-spreken-fel); }
[data-kleur="examen"]       { --k: var(--kleur-examen);       --k-zacht: var(--kleur-examen-zacht);       --k-fel: var(--kleur-examen-fel); }
[data-kleur="leaderboard"]  { --k: var(--kleur-leaderboard);  --k-zacht: var(--kleur-leaderboard-zacht);  --k-fel: var(--kleur-leaderboard-fel); }
[data-kleur="tips"]         { --k: var(--kleur-tips);         --k-zacht: var(--kleur-tips-zacht);         --k-fel: var(--kleur-tips-fel); }
[data-kleur="instellingen"] { --k: var(--kleur-instellingen); --k-zacht: var(--kleur-instellingen-zacht); --k-fel: var(--kleur-instellingen-fel); }
[data-kleur="plan"]         { --k: var(--kleur-plan);         --k-zacht: var(--kleur-plan-zacht);         --k-fel: var(--kleur-plan-fel); }
[data-kleur="fouten"]       { --k: var(--kleur-fouten);       --k-zacht: var(--kleur-fouten-zacht);       --k-fel: var(--kleur-fouten-fel); }
[data-kleur="streak"]       { --k: var(--kleur-streak);       --k-zacht: var(--kleur-streak-zacht);       --k-fel: var(--kleur-streak-fel); }
[data-kleur="toets"]        { --k: var(--kleur-toets);        --k-zacht: var(--kleur-toets-zacht);        --k-fel: var(--kleur-toets-fel); }


/* Openbare site. De kleuren komen uit css/style.css van de app (het bouwscript zet secties 1, 2 en 2b hierboven),
 * zodat site en app er als één product uitzien. Vormgeving volgens docs/ONTWERP.md: rustig, netjes, met kleur per onderdeel. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
main { flex: 1; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
a { color: var(--primair-hover); }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-ring); border-radius: 4px; }
[hidden] { display: none !important; }

.s-overslaan { position: absolute; left: -9999px; top: 8px; background: var(--kaart); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.s-overslaan:focus { left: 8px; }

.s-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.s-wrap--smal { max-width: 760px; }
.s-wrap--midden { max-width: 900px; }
@media (min-width: 720px) { .s-wrap { padding: 0 28px; } }

/* ---------- icoontegels ---------- */
.s-tegel {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--k-zacht, var(--kaart-2)); color: var(--k, var(--tekst-zacht));
}
.s-tegel svg { width: 22px; height: 22px; }
.s-tegel--goed { background: var(--goed-zacht); color: var(--goed); width: 48px; height: 48px; border-radius: 14px; margin-bottom: var(--r-3); }
.s-check { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--goed); margin-top: 3px; }
.s-check svg { width: 20px; height: 20px; }
svg.s-icoon, .s-tegel svg, .s-check svg, .s-rondknop svg, .s-kop__icoon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- knoppen (hoofdknop: docs/ONTWERP.md §5) ---------- */
.s-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--overgang), border-color var(--overgang), transform 80ms ease;
}
.s-knop:active { transform: scale(0.98); }
.s-knop--sterk { background: var(--knop-bg); color: var(--knop-tekst); box-shadow: inset 0 -3px 0 var(--k-fel, #38bdf8), var(--knop-schaduw); }
.s-knop--sterk:hover { background: var(--knop-bg-hover); color: var(--knop-tekst); }
.s-knop--rustig { background: var(--kaart); border-color: var(--rand-sterk); color: var(--tekst); box-shadow: var(--schaduw-1); }
.s-knop--rustig:hover { background: var(--kaart-2); }
.s-knop--zacht { background: var(--kleur-dashboard-zacht); color: var(--tekst); box-shadow: inset 0 0 0 1px var(--kleur-dashboard); }
.s-knop--zacht:hover { box-shadow: inset 0 0 0 2px var(--kleur-dashboard); }
.s-knop--groot { min-height: 52px; padding: 12px 24px; font-size: 1.05rem; }
.s-knop--klein { min-height: 40px; padding: 7px 14px; font-size: 0.92rem; }
.s-knop--breed { width: 100%; }
.s-knop[disabled] { opacity: 0.6; cursor: default; }
.s-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.s-link { background: none; border: 0; padding: 8px 0; font: inherit; color: var(--primair-hover); text-decoration: underline; cursor: pointer; text-align: left; }

/* ---------- kop ---------- */
.s-kop { position: sticky; top: 0; z-index: 20; background: var(--balk-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rand); }
.s-kop__rij { display: flex; align-items: center; gap: 8px; min-height: 60px; }
.s-kop__ruimte { flex: 1; }
.s-merk { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; min-width: 0; }
.s-merk__logo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0;
  background: linear-gradient(135deg, #0e7490, #0891b2 60%, #22d3ee); color: #fff;
}
.s-merk__naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-nav { display: none; gap: 4px; margin-left: 20px; }
.s-nav a { padding: 8px 12px; border-radius: 10px; color: var(--tekst-zacht); text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.s-nav a:hover { background: var(--kaart-2); color: var(--tekst); }
.s-kop__inloggen { flex: none; white-space: nowrap; gap: 6px; }
.s-kop__icoon { display: inline-flex; color: var(--tekst-zacht); }
.s-kop__icoon svg { width: 18px; height: 18px; }
.s-kop__start { display: none; white-space: nowrap; }
.s-rondknop { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 10px; color: var(--tekst-zacht); cursor: pointer; }
.s-rondknop:hover { background: var(--kaart-2); color: var(--tekst); }
.s-rondknop svg { width: 20px; height: 20px; }
html[data-thema-effect="donker"] .s-toon-licht, html:not([data-thema-effect="donker"]) .s-toon-donker { display: none; }
@media (min-width: 880px) { .s-nav { display: flex; } }
@media (min-width: 1120px) { .s-kop__start { display: inline-flex; } }
@media (max-width: 480px) {
  .s-merk__naam { white-space: normal; font-size: 0.84rem; line-height: 1.15; max-width: 110px; }
  .s-kop__icoon { display: none; }
}

/* ---------- held ---------- */
.s-held { position: relative; overflow: hidden; padding: 40px 0 0; }
.s-held__gloed {
  position: absolute; inset: -120px 0 auto auto; width: min(900px, 120%); height: 620px; pointer-events: none;
  background:
    radial-gradient(420px 300px at 75% 30%, var(--kleur-lezen-zacht), transparent 70%),
    radial-gradient(380px 300px at 45% 15%, var(--kleur-luisteren-zacht), transparent 70%),
    radial-gradient(360px 280px at 90% 70%, var(--kleur-themas-zacht), transparent 70%);
  opacity: 0.9;
}
.s-held__binnen { position: relative; }
.s-held__tekst { max-width: 760px; }
.s-label { color: var(--kleur-dashboard); font-weight: 600; font-size: 0.92rem; margin-bottom: 12px; }
.s-held h1 { font-size: clamp(2.15rem, 6.4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.08; }
.s-held__zin { margin-top: 16px; font-size: clamp(1.08rem, 2.4vw, 1.25rem); color: var(--tekst-zacht); max-width: 34em; }
.s-held .s-knoppen { margin-top: 24px; }
.s-held__klein { display: flex; gap: 8px; margin-top: 14px; color: var(--tekst-zacht); font-size: 0.97rem; }
@media (min-width: 900px) { .s-held { padding-top: 64px; } }
@media (max-width: 520px) { .s-held .s-knop { width: 100%; } }

/* ---------- schermbeelden van de app: een venster, een telefoon of een kader ---------- */
picture { display: block; }
picture img { width: 100%; height: auto; }
.s-venster { background: var(--kaart); border: 1px solid var(--rand-sterk); border-radius: 14px; box-shadow: var(--schaduw-3); overflow: hidden; }
.s-venster__balk { display: flex; gap: 6px; padding: 10px 14px; background: var(--kaart-2); border-bottom: 1px solid var(--rand); }
.s-venster__balk span { width: 10px; height: 10px; border-radius: 50%; background: var(--rand-sterk); }
.s-telefoon { padding: 5px; background: #0b0d10; border-radius: 30px; box-shadow: 0 0 0 1px var(--rand-sterk), var(--schaduw-3); }
.s-telefoon img { border-radius: 25px; }
.s-kader { background: var(--kaart); border: 1px solid var(--rand-sterk); border-radius: var(--radius-groot); box-shadow: var(--schaduw-2); overflow: hidden; }

.s-held__beeld { position: relative; margin-top: 36px; padding-bottom: 56px; }
@media (min-width: 641px) {
  .s-held__beeld { padding-bottom: 72px; }
  .s-held__beeld .s-venster { width: calc(100% - 64px); }
  .s-held__beeld .s-telefoon { position: absolute; right: 0; bottom: 32px; width: 23%; max-width: 236px; }
}
/* op een telefoon past geen computerscherm: dan staat er een telefoon, afgesneden zodat de knoppen onder de tekst dichtbij blijven */
@media (max-width: 640px) {
  .s-held__beeld .s-telefoon { display: none; }
  .s-held__beeld .s-venster { width: min(280px, 78vw); margin: 0 auto; padding: 5px 5px 0; background: #0b0d10; border: 0; border-radius: 30px 30px 0 0; box-shadow: 0 0 0 1px var(--rand-sterk), var(--schaduw-3); max-height: 440px; }
  .s-held__beeld .s-venster__balk { display: none; }
  .s-held__beeld .s-venster img { border-radius: 25px 25px 0 0; }
  .s-held__beeld { padding-bottom: 0; margin-bottom: -1px; }
}

/* ---------- strook met zekerheden onder de held ---------- */
.s-strook { position: relative; background: var(--kaart); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); padding: 20px 0; }
.s-strook__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-strook__lijst li { display: flex; gap: 10px; }
.s-strook__lijst strong { display: block; line-height: 1.3; }
.s-strook__lijst span:not(.s-check) { display: block; margin-top: 2px; font-size: 0.92rem; line-height: 1.35; color: var(--tekst-zacht); }
@media (min-width: 900px) { .s-strook__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- zo werkt het: tekst naast een echt scherm ---------- */
.s-rijen { display: grid; gap: 56px; margin-top: 36px; }
.s-rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.s-rij__label { display: block; margin-top: 12px; font-size: 0.86rem; font-weight: 600; color: var(--k); }
.s-rij h3 { margin-top: 2px; font-size: clamp(1.35rem, 3vw, 1.7rem); }
.s-rij__zin { margin-top: 10px; color: var(--tekst-zacht); }
@media (min-width: 900px) {
  .s-rijen { gap: 88px; margin-top: 48px; }
  .s-rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .s-rij:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .s-rij:nth-child(even) .s-rij__tekst { order: 2; }
}
/* op een telefoon een schermvullend beeld: afgesneden, anders scrol je er lang langs */
@media (max-width: 640px) {
  .s-rij .s-kader { max-width: 340px; width: 100%; justify-self: center; max-height: 480px; -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
}

/* ---------- op je telefoon: op een smal scherm veeg je, de pagina zelf schuift niet ---------- */
.s-telefoons { display: flex; gap: 20px; margin: 28px -16px 0; padding: 4px 16px 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.s-telefoons__item { flex: 0 0 min(70vw, 280px); margin: 0; scroll-snap-align: center; }
.s-telefoons figcaption { margin-top: 16px; }
.s-telefoons strong { display: block; color: var(--k); }
.s-telefoons figcaption span { display: block; margin-top: 2px; color: var(--tekst-zacht); font-size: 0.97rem; }
@media (min-width: 900px) {
  .s-telefoons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 40px 0 0; padding: 4px 24px 0; overflow: visible; }
  .s-telefoons__item { width: 100%; max-width: 280px; justify-self: center; }
}

/* ---------- blokken ---------- */
.s-blok { padding: 48px 0; }
.s-blok--wit { background: var(--kaart); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.s-blok--bovenaan { padding-top: 36px; }
.s-blok__kop { font-size: clamp(1.55rem, 4vw, 2.1rem); }
.s-blok__zin { margin-top: 10px; color: var(--tekst-zacht); max-width: 42em; font-size: 1.05rem; }
.s-paginakop { font-size: clamp(1.8rem, 5vw, 2.5rem); letter-spacing: -0.03em; }
@media (min-width: 900px) { .s-blok { padding: 72px 0; } .s-blok--bovenaan { padding-top: 56px; } }

.s-balk { height: 8px; border-radius: 999px; background: var(--kaart-2); overflow: hidden; }
.s-balk span { display: block; height: 100%; border-radius: 999px; background: var(--k, var(--primair)); }
.s-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.s-cijfers__slot { margin-top: 20px; }
.s-cijfer { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw-1); padding: 16px; }
.s-cijfer__getal { margin-top: 12px; font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.s-cijfer__naam { color: var(--tekst-zacht); margin-bottom: 10px; }
.s-bron { margin-top: 14px; font-size: 0.88rem; }
.s-bron a { color: var(--tekst-zwak); }
@media (min-width: 720px) { .s-cijfers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .s-cijfer { padding: 20px; } }

.s-tegels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.s-inhoud { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw-1); padding: 18px; }
.s-inhoud h3 { margin-top: 12px; font-size: 1.1rem; }
.s-inhoud p { margin-top: 6px; color: var(--tekst-zacht); font-size: 0.97rem; }
/* op een telefoon het icoon naast de tekst: negen tegels onder elkaar zijn anders heel lang */
@media (max-width: 559px) {
  .s-inhoud { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .s-inhoud .s-tegel { grid-row: 1 / span 3; }
  .s-inhoud h3 { margin-top: 0; }
  .s-inhoud p { grid-column: 2; }
}
@media (min-width: 560px) { .s-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 960px) { .s-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- prijzen ---------- */
.s-passen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.s-pas { position: relative; display: flex; flex-direction: column; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius-groot); box-shadow: var(--schaduw-1); padding: 24px; }
.s-blok--wit .s-pas { background: var(--kaart); box-shadow: var(--schaduw-2); }
.s-pas--hoofd { border-color: var(--kleur-dashboard); box-shadow: inset 0 0 0 1px var(--kleur-dashboard), var(--schaduw-2); }
.s-pas__badge { align-self: flex-start; margin-bottom: 10px; background: var(--kleur-dashboard-zacht); color: var(--kleur-dashboard); border-radius: 999px; padding: 2px 12px; font-size: 0.84rem; font-weight: 700; }
.s-pas__naam { font-size: 1.15rem; }
.s-pas__prijs { margin-top: 8px; font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.s-pas__euro { font-size: 1.5rem; font-weight: 600; }
.s-pas__klein { margin-top: 4px; font-size: 0.9rem; color: var(--tekst-zwak); }
.s-pas__voor { margin: 14px 0 20px; color: var(--tekst-zacht); flex: 1; }
.s-punten { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.s-punten li { display: flex; gap: 10px; }
.s-punten--kolom { margin: 16px 0; grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 760px) {
  .s-passen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .s-punten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
}

.s-tabel-schuif { overflow-x: auto; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
thead th { font-size: 0.86rem; font-weight: 600; color: var(--tekst-zwak); }
.s-vergelijk tbody th { font-weight: 500; }
/* op een telefoon past de tabel zo zonder opzij te schuiven: lange woorden als "proefexamens" bepalen de breedte */
@media (max-width: 480px) {
  .s-vergelijk { font-size: 0.9rem; }
  .s-vergelijk th, .s-vergelijk td { padding: 10px 6px; }
}
@media (max-width: 359px) {
  .s-vergelijk { font-size: 0.84rem; }
  .s-vergelijk th, .s-vergelijk td { padding: 8px 4px; }
}

/* ---------- vragen ---------- */
.s-vragen { margin-top: 20px; border-top: 1px solid var(--rand); }
.s-vragen details { border-bottom: 1px solid var(--rand); }
.s-vragen summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 600; list-style: none; position: relative; }
.s-vragen summary::-webkit-details-marker { display: none; }
.s-vragen summary::after { content: ''; position: absolute; right: 6px; top: 24px; width: 9px; height: 9px; border-right: 2px solid var(--tekst-zwak); border-bottom: 2px solid var(--tekst-zwak); transform: rotate(45deg); transition: transform var(--overgang); }
.s-vragen details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.s-vragen details > div { padding: 0 0 18px; color: var(--tekst-zacht); }

/* ---------- eind ---------- */
.s-eind { background: var(--kaart); border-top: 1px solid var(--rand); padding: 40px 0; }
.s-eind__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.s-eind h2 { font-size: clamp(1.45rem, 4vw, 1.9rem); }
.s-eind p { margin-top: 6px; color: var(--tekst-zacht); }
@media (max-width: 520px) { .s-eind .s-knop { width: 100%; } }

/* ---------- voet ---------- */
.s-voet { border-top: 1px solid var(--rand); padding: 36px 0 28px; color: var(--tekst-zacht); font-size: 0.95rem; }
.s-voet__rij { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-voet__merk { grid-column: 1 / -1; }
.s-voet__merk p { margin-top: 10px; max-width: 26em; }
.s-voet h2 { font-size: 0.86rem; font-weight: 600; color: var(--tekst-zwak); letter-spacing: 0; margin-bottom: 8px; }
.s-voet nav a { display: block; padding: 5px 0; color: var(--tekst-zacht); text-decoration: none; }
.s-voet nav a:hover { color: var(--tekst); text-decoration: underline; }
.s-voet .s-voet__herroep { color: var(--tekst); font-weight: 600; text-decoration: underline; }
.s-voet__los { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rand); font-size: 0.88rem; color: var(--tekst-zwak); }
@media (min-width: 760px) { .s-voet__rij { grid-template-columns: 2fr 1fr 1fr; } .s-voet__merk { grid-column: auto; } }

/* ---------- formulieren ---------- */
.s-formulierblok { padding: 32px 16px 56px; display: flex; justify-content: center; }
.s-kaart { width: 100%; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius-groot); box-shadow: var(--schaduw-2); padding: 24px; }
.s-kaart--smal { max-width: 460px; }
.s-kaart h1 { font-size: 1.65rem; }
.s-kaart h1 + p { margin-top: 8px; color: var(--tekst-zacht); }
.s-kaart > div > p, .s-kaart > form > p { margin-top: 12px; }
.s-kaart .s-knop { margin-top: 16px; }
.s-veld { margin-top: 18px; }
.s-veld label { display: block; font-weight: 600; margin-bottom: 6px; }
.s-veld__hulp { margin-top: 6px; font-size: 0.9rem; color: var(--tekst-zacht); }
input[type="email"], input[type="text"], input[type="password"] {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--tekst);
  background: var(--kaart); border: 1px solid var(--veld-rand); border-radius: 12px;
}
input:focus { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: 0 0 0 5px var(--focus-ring); }
.s-code { text-align: center; font-size: 1.6rem !important; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; font-weight: 600; }
.s-vinkje { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; cursor: pointer; }
.s-vinkje input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--primair); }
.s-veld .s-vinkje--klein, .s-vinkje--klein { display: flex; gap: 10px; font-weight: 400; margin-top: 10px; font-size: 0.95rem; color: var(--tekst-zacht); align-items: center; }
.s-vinkje--klein input { width: 20px; height: 20px; margin: 0; }
#formKies { margin: 18px 0 8px; padding-top: 18px; border-top: 1px solid var(--rand); }
#formKies h2 { font-size: 1.2rem; margin: 0 0 6px; }
#knopApp { margin-top: 16px; }
.s-klein { font-size: 0.92rem; color: var(--tekst-zacht); }
.s-klein--midden { text-align: center; }
.s-groot { font-size: 1.2rem; font-weight: 700; word-break: break-all; margin-top: 2px !important; }
.s-acties { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; }
#metAccount, #zonderAccount { margin-top: 18px; }

.s-melding { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 0.97rem; }
.s-melding--fout { background: var(--fout-zacht); color: var(--tekst); box-shadow: inset 3px 0 0 var(--fout); }
.s-melding--goed { background: var(--goed-zacht); color: var(--tekst); box-shadow: inset 3px 0 0 var(--goed); }
.s-melding--info { background: var(--info-zacht); color: var(--tekst); box-shadow: inset 3px 0 0 var(--info); }
.s-melding--waarschuw { background: var(--waarschuw-zacht); color: var(--tekst); box-shadow: inset 3px 0 0 var(--waarschuw); margin-bottom: 20px; }

.s-bon { margin-top: 16px; padding: 14px 16px; background: var(--kaart-2); border-radius: 12px; }
.s-bon__regel { display: flex; justify-content: space-between; gap: 16px; font-weight: 500; }
.s-bon__regel strong { font-variant-numeric: tabular-nums; }
.s-bon__regel--klein { font-size: 0.86rem; color: var(--tekst-zwak); font-weight: 400; margin-top: 2px; }

.s-laden { display: block; width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--rand); border-top-color: var(--primair); margin-bottom: 16px; animation: s-draai 800ms linear infinite; }
@keyframes s-draai { to { transform: rotate(360deg); } }

/* ---------- tekstpagina's ---------- */
.s-tekst h2 { font-size: 1.25rem; margin-top: 28px; }
.s-tekst p, .s-tekst ul, .s-tekst blockquote { margin: 10px 0 0; color: var(--tekst-zacht); }
.s-tekst ul { padding-left: 20px; }
.s-tekst blockquote { padding: 12px 16px; background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px; }
.s-tekst .s-paginakop + p { margin-top: 14px; }
.s-tekst td { color: var(--tekst-zacht); }
.s-gegevens { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 12px 0 0; }
.s-gegevens dt { color: var(--tekst-zwak); }
.s-gegevens dd { margin: 0; }

/* ---------- beheer ---------- */
.s-beheer__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; max-width: 520px; }
.s-beheer__form .s-veld { flex: 1; min-width: 220px; margin: 12px 0 0; }
.s-beheer__form .s-beheer__kort { flex: 0 1 150px; min-width: 120px; }
.s-beheer__kop { font-size: 1.15rem; margin-top: 32px; }
#beheerUit h2 { font-size: 1.15rem; margin-top: 28px; }
#beheerUit td, #beheerUit th { font-size: 0.92rem; padding: 7px 8px; }
.s-beheer__cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.s-beheer__cijfers div { background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; }
.s-beheer__cijfers strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }