@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   PointZ — design system v2
   ------------------------------------------------------------
   Eén tokenset, twee sferen:
   - body.thema-kind  : speels, mobiel-first, harde offset-schaduw
                        (de "sticker"-signatuur blijft), grote tekst.
   - body.rustig      : zakelijk, datadicht, zachte elevatie en
                        haarlijnen i.p.v. 2px inktranden.
   Klassennamen en oude tokennamen blijven bestaan (aliassen
   onderaan :root) zodat bestaande pagina's blijven werken.
   ============================================================ */

:root {
    /* ---- Kleur: basis ---- */
    --ink:            #10302A;   /* donkergroen, hoofdinkt */
    --ink-2:          #2E4F48;   /* secundaire inkt */
    --cream:          #FFF8EE;
    --cream-2:        #F6ECDC;
    --wit:            #FFFFFF;

    /* ---- Kleur: accenten ---- */
    --oranje:         #FF6A3D;   /* vlakken, iconen, graphics */
    --oranje-diep:    #E9541F;   /* hover/pressed */
    --oranje-ink:     #A83A14;   /* oranje ALS TEKST op licht (AA) */
    --oranje-zacht:   #FFE9E0;
    --teal:           #12707C;   /* tweede accent: data, level, admin */
    --teal-zacht:     #DCEFF1;
    --paars:          #6B4FD8;   /* challenges / avatar */
    --paars-zacht:    #ECE7FD;

    /* ---- Kleur: semantisch ---- */
    --success:        #167A52;
    --success-text:   #0F5C3D;
    --success-bg:     #DFF2E8;
    --success-border: #9FD3BB;
    --danger:         #C42F14;
    --danger-text:    #A22610;
    --danger-bg:      #FBE4DE;
    --danger-border:  #EDB3A4;
    --warning:        #8A5A0B;
    --warning-bg:     #FBEDD2;
    --warning-border: #E6C88A;
    --info:           #115E77;
    --info-bg:        #DDEEF4;
    --info-border:    #A6CEDD;

    /* ---- Rollen-tokens (worden per thema overschreven) ---- */
    --bg-deep:        var(--cream);
    --surface:        var(--wit);
    --surface-2:      #FDF6EA;      /* subtiel gevulde rijen/velden */
    --surface-ink:    linear-gradient(140deg, #17453D 0%, #10302A 60%, #133A33 100%);
    --input-bg:       #FFFCF6;
    --input-bg-deep:  var(--cream-2);

    --border:         #10302A;      /* "inkt"-rand, kind-thema */
    --border-subtle:  #E4DACA;
    --border-hair:    #E9E1D4;
    --border-w:       2px;          /* randdikte, per thema anders */

    --text:           #10302A;
    --text-2:         #3E5B54;
    --muted:          #6A6257;
    --muted-on-dark:  #C8D6D1;
    --on-accent:      #FFFFFF;
    --on-ink:         #FFF8EE;

    /* ---- Elevatie (per thema anders) ---- */
    --shadow-card:    2px 2px 0 var(--ink);
    --shadow-accent:  3px 3px 0 var(--oranje);
    --shadow-ink:     3px 3px 0 var(--ink);
    --shadow-pop:     0 18px 40px -18px rgba(16, 48, 42, .45);

    /* ---- Vorm ---- */
    --radius-sm:      10px;
    --radius-md:      14px;
    --radius-lg:      20px;
    --radius-xl:      28px;
    --radius-pill:    999px;
    --radius-card:    var(--radius-lg);
    --radius-card-lg: var(--radius-xl);
    --radius-input:   var(--radius-md);
    --radius-btn:     var(--radius-md);
    --radius-btn-sm:  var(--radius-sm);

    /* ---- Ruimte (4px-schaal) ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

    /* ---- Type ---- */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
    --font-text:    'Plus Jakarta Sans', system-ui, sans-serif;
    --fs-root:      15px;
    --fs-xs:        0.75rem;
    --fs-sm:        0.85rem;
    --fs-md:        0.95rem;
    --fs-lg:        1.15rem;
    --fs-xl:        1.5rem;
    --fs-2xl:       2rem;
    --fs-hero:      3rem;

    /* ---- Motion ---- */
    --dur-snel:   120ms;
    --dur-mid:    220ms;
    --dur-traag:  420ms;
    --ease-uit:   cubic-bezier(.2, .8, .3, 1);
    --ease-veer:  cubic-bezier(.34, 1.56, .64, 1);

    /* ---- Layout ---- */
    --sidebar-w:  248px;
    --tabbar-h:   64px;
    --veilig-onder: env(safe-area-inset-bottom, 0px);
    --veilig-boven: env(safe-area-inset-top, 0px);

    /* ---- Legacy-aliassen (niet verwijderen: pagina's gebruiken deze) ---- */
    --bg-flat: var(--bg-deep);
    --bg-gradient: var(--bg-deep);
    --surface-raised-start: #17453D;
    --surface-raised-end: #10302A;
    --border-strong: var(--ink);
    --sidebar-border: var(--border-subtle);
    --lime: var(--oranje);
    --lime-grad: linear-gradient(135deg, #FF8154, var(--oranje));
    --mint: #FFB495;
    --logo-grad: var(--ink);
    --muted-2: var(--muted);
}

/* ============================================================
   Thema's — dezelfde klassen, andere tokens
   ============================================================ */

/* De typeschaal hangt aan <html>: een --fs-root op body cascadeert niet omhoog,
   dus zetten we hem via :has() op :root. Zo blijft de thema-klasse op <body>
   staan (geen pagina-aanpassingen nodig) en werkt rem-scaling wél. */
:root:has(body.thema-kind) { --fs-root: 16.5px; }
:root:has(body.rustig)     { --fs-root: 14.5px; }
/* Begeleider: kalme sfeer, maar in het veld op een telefoon — dan gelden
   de duim-maten van de app-modus, niet de muis-dichtheid van admin. */
:root:has(body.rustig.mobiel-app) { --fs-root: 15.5px; }

/* Kind: warm, chunky, groot. Signatuur-schaduw blijft. */
body.thema-kind {
    /* Gedempte "salie & klei" stijl (mockup): warme beige, salie-groen als actie,
       terracotta als beloning/punten, zachte schaduwen i.p.v. harde inktranden. */
    --bg-deep: #F2ECE1;
    --cream: #F2ECE1;
    --cream-2: #F3EDE2;
    --surface: #FBF9F3;
    --surface-2: #F3EDE2;
    --input-bg: #FBF9F3;
    --input-bg-deep: #EFE8DB;

    --ink: #413B33;
    --text: #413B33;
    --text-2: #5A5347;
    /* Donkerder dan het oude #8C867B: haalt nu ~4,5:1 op de beige achtergrond (WCAG AA). */
    --muted: #6B6459;

    --border: #E8E0D2;
    --border-subtle: #E8E0D2;
    --border-hair: #EAE3D6;
    --border-w: 1px;

    --actie: #93A47C;
    --actie-diep: #82946B;
    --oranje: #C27A4C;
    --oranje-diep: #A45E33;
    --oranje-ink: #A45E33;
    --oranje-zacht: #F0E2D3;
    --teal: #7A8B63;
    --teal-zacht: #E4E9D8;

    --radius-card: var(--radius-lg);
    --radius-card-lg: var(--radius-xl);
    --shadow-card: 0 4px 16px rgba(120, 105, 80, .09);
    --shadow-ink: 0 5px 18px rgba(120, 105, 80, .11);
    --shadow-accent: 0 6px 18px rgba(120, 105, 80, .13);
}

/* Kind-thema: salie-groene acties + voortgang; terracotta blijft voor punten/beloning. */
body.thema-kind .btn-accent,
body.thema-kind .btn-goud,
body.thema-kind .btn-teal,
body.thema-kind .btn-primair { background: var(--actie); color: #fff; box-shadow: 0 4px 12px rgba(120, 105, 80, .16); }
body.thema-kind .btn-accent:hover:not(:disabled),
body.thema-kind .btn-goud:hover:not(:disabled),
body.thema-kind .btn-teal:hover:not(:disabled),
body.thema-kind .btn-primair:hover:not(:disabled) { background: var(--actie-diep); }
body.thema-kind .btn-accent:active:not(:disabled),
body.thema-kind .btn-goud:active:not(:disabled),
body.thema-kind .btn-teal:active:not(:disabled),
body.thema-kind .btn-primair:active:not(:disabled) { transform: none; box-shadow: 0 2px 8px rgba(120, 105, 80, .16); }
body.thema-kind .voortgang-balk > div { background: var(--actie); }
body.thema-kind .tab-knop.actief { background: var(--surface); color: var(--oranje-ink); box-shadow: var(--shadow-card); }
body.thema-kind .tabbar a.actief { color: var(--actie-diep); }
body.thema-kind .tabbar a.actief::before { background: var(--actie); }

/* Puntensaldo-hero: in het kind-thema een lichte kaart met groene ring i.p.v. donkere tegel. */
body.thema-kind .punten-tile { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
body.thema-kind .punten-tile::after { display: none; }
body.thema-kind .punten-tile .label,
body.thema-kind .punten-tile .subtekst { color: var(--muted); }
body.thema-kind .punten-tile .waarde { color: var(--text); }
body.thema-kind .punten-tile .waarde .eenheid { color: var(--oranje-ink); }
body.thema-kind .punten-tile .voortgang-balk { background: var(--input-bg-deep); }
body.thema-kind .punten-tile .punten-acties .btn-outline { background: var(--surface); border-color: var(--border-subtle); color: var(--text); }

/* Admin/kalme schermen: rustig, dicht, zachte elevatie i.p.v. inktranden. */
body.rustig {
    --bg-deep: #F7F5F1;
    --surface-2: #FAF8F5;
    --border: #DCD5CA;
    --border-w: 1px;
    --radius-card: var(--radius-md);
    --radius-card-lg: var(--radius-lg);
    --shadow-card: 0 1px 2px rgba(16, 48, 42, .06), 0 6px 16px -12px rgba(16, 48, 42, .28);
    --shadow-ink: 0 1px 2px rgba(16, 48, 42, .08), 0 8px 20px -14px rgba(16, 48, 42, .4);
    --shadow-accent: 0 1px 2px rgba(16, 48, 42, .08), 0 8px 20px -14px rgba(233, 84, 31, .5);
}

/* Toegankelijkheidsmodus: maximaal contrast, geen zachte grijzen. */
body.hoog-contrast {
    --bg-deep: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #FFFFFF;
    --input-bg: #FFFFFF;
    --input-bg-deep: #F0F0F0;
    --border: #000000;
    --border-subtle: #000000;
    --border-hair: #000000;
    --border-w: 2px;
    --text: #000000;
    --text-2: #000000;
    --muted: #26221C;
    --oranje: #C43C0F;
    --oranje-ink: #8E2B08;
    --teal: #0A4F58;
    --success-text: #0A4A30;
    --danger-text: #8A1E0A;
    --warning: #5E3D05;
    --shadow-card: 3px 3px 0 #000;
    --shadow-ink: 3px 3px 0 #000;
    --shadow-accent: 3px 3px 0 #000;
}

/* ============================================================
   Reset & basis
   ============================================================ */

* { box-sizing: border-box; }

html {
    font-size: var(--fs-root);
    -webkit-text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background: var(--bg-deep);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    min-width: 320px;
    overscroll-behavior-y: none;
}

body { font-size: var(--fs-md); line-height: 1.5; }

a { color: var(--oranje-ink); text-decoration: none; font-weight: 600; }
a:hover { color: var(--oranje-diep); text-decoration: underline; }

h1, h2, h3, h4 {
    margin: 0 0 .4em;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

p { line-height: 1.55; font-family: var(--font-text); text-wrap: pretty; }

/* Focus: altijd zichtbaar, ook in het kind-thema. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--oranje);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
body.rustig :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--teal); }

/* Sla-over-link voor toetsenbord/screenreader (in bouwLayout gerenderd). */
.sla-over {
    position: absolute; left: -9999px; top: 0; z-index: 3000;
    background: var(--ink); color: var(--on-ink);
    padding: 10px 16px; border-radius: 0 0 var(--radius-md) 0; font-weight: 700;
}
.sla-over:focus { left: 0; }

.logo-mark svg path { fill: var(--on-ink); }

.container { max-width: 1160px; margin: 0 auto; padding: var(--sp-6); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Auth (login / registreer)
   ============================================================ */

.auth-scherm {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-6);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 45% at 15% 0%, var(--oranje-zacht) 0%, transparent 70%),
        radial-gradient(50% 40% at 100% 100%, var(--teal-zacht) 0%, transparent 70%),
        var(--bg-deep);
}
.auth-glow { display: none; }

.auth-kaart {
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card-lg);
    box-shadow: var(--shadow-card);
    padding: var(--sp-10) var(--sp-8);
    width: 100%;
    max-width: 430px;
    position: relative;
    z-index: 1;
}

.auth-logo { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.auth-logo .logo-mark {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    background: var(--logo-grad);
    display: flex; align-items: center; justify-content: center; flex: none;
    box-shadow: var(--shadow-accent);
}
.auth-logo .wordmark { font: 700 28px var(--font-display); color: var(--text); letter-spacing: -0.03em; }
.auth-logo .wordmark .punt { color: var(--oranje); }

.auth-subtekst { text-align: center; color: var(--muted); margin-bottom: var(--sp-6); font-size: var(--fs-sm); font-weight: 600; }
.auth-footer { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--muted); }
.auth-footer a { color: var(--oranje-ink); font-weight: 700; }

/* ============================================================
   Formulieren
   ============================================================ */

.form-veld { margin-bottom: var(--sp-4); }

.form-veld label {
    display: block;
    font: 700 var(--fs-sm) var(--font-body);
    letter-spacing: 0;
    text-transform: none;          /* was uppercase — leesbaarder, ook voor 8-jarigen */
    margin-bottom: var(--sp-2);
    color: var(--text);
}
.form-veld .hulptekst { font: 500 var(--fs-xs) var(--font-text); color: var(--muted); margin: -4px 0 6px; }

.form-veld input,
.form-veld select,
.form-veld textarea {
    width: 100%;
    height: 48px;
    padding: 0 var(--sp-4);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-input);
    font: 600 var(--fs-md) var(--font-body);
    background: var(--input-bg);
    color: var(--text);
    transition: border-color var(--dur-snel) var(--ease-uit), box-shadow var(--dur-snel) var(--ease-uit);
}
body.rustig .form-veld input,
body.rustig .form-veld select,
body.rustig .form-veld textarea { height: 40px; font-weight: 500; }
body.rustig.mobiel-app .form-veld input,
body.rustig.mobiel-app .form-veld select,
body.rustig.mobiel-app .form-veld textarea { height: 50px; }

.form-veld textarea { height: auto; min-height: 100px; padding: var(--sp-3) var(--sp-4); line-height: 1.5; }
.form-veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }

.form-veld input::placeholder, .form-veld textarea::placeholder { color: var(--muted); opacity: .6; }

.form-veld input:focus, .form-veld select:focus, .form-veld textarea:focus {
    outline: none;
    border-color: var(--oranje);
    box-shadow: 0 0 0 3px rgba(255, 106, 61, .22);
}
.form-veld input[aria-invalid="true"], .form-veld .fout-veld { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(196, 47, 20, .16); }
.form-veld .veld-fout { display: flex; gap: 6px; align-items: center; font: 700 var(--fs-xs) var(--font-body); color: var(--danger-text); margin-top: 6px; }

.form-rij { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.form-rij > .form-veld { flex: 1 1 180px; }

.wachtwoord-veld { position: relative; display: flex; align-items: center; }
.wachtwoord-veld input { padding-right: 48px; }
.wachtwoord-toggle {
    position: absolute; right: 12px;
    background: none; border: none; padding: 8px; cursor: pointer;
    color: var(--muted); display: flex; align-items: center; border-radius: var(--radius-sm);
}
.wachtwoord-toggle svg { display: block; }

.sterkte-meter { display: flex; gap: var(--sp-2); align-items: center; margin: -6px 0 var(--sp-4); }
.sterkte-balk { height: 6px; flex: 1; border-radius: var(--radius-pill); background: var(--input-bg-deep); overflow: hidden; }
.sterkte-balk > div { height: 100%; border-radius: var(--radius-pill); background: var(--oranje); transition: width var(--dur-mid) var(--ease-uit); }
.sterkte-label { font: 700 var(--fs-xs) var(--font-body); color: var(--muted); flex: none; }

/* ============================================================
   Knoppen
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border: none;
    border-radius: var(--radius-btn);
    padding: 12px var(--sp-5);
    font: 700 var(--fs-md) var(--font-body);
    cursor: pointer;
    min-height: 48px;                 /* duim-doel; 44px is het minimum */
    transition: transform var(--dur-snel) var(--ease-uit),
                box-shadow var(--dur-snel) var(--ease-uit),
                background var(--dur-snel) var(--ease-uit),
                color var(--dur-snel) var(--ease-uit);
    text-decoration: none;
    white-space: nowrap;
}
body.rustig .btn { min-height: 38px; padding: 8px var(--sp-4); font-size: var(--fs-sm); }
body.rustig.mobiel-app .btn { min-height: 48px; padding: 12px var(--sp-5); font-size: var(--fs-md); }
body.rustig.mobiel-app .btn-klein { min-height: 40px; font-size: var(--fs-sm); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:hover:not(:disabled) { text-decoration: none; }

/* Primair = inkt-blok met oranje offset (hoofdactie van een scherm) */
.btn-primair {
    background: var(--ink);
    color: var(--on-ink);
    width: 100%;
    min-height: 54px;
    font: 700 var(--fs-lg) var(--font-display);
    box-shadow: var(--shadow-accent);
}
.btn-primair:hover:not(:disabled) { background: #163C35; }
.btn-primair:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--oranje); }
body.rustig .btn-primair { width: auto; min-height: 38px; font: 700 var(--fs-sm) var(--font-body); background: var(--ink); }

/* Accent = oranje blok (de "doen"-actie in een lijst/kaart) */
.btn-goud, .btn-teal, .btn-accent {
    background: var(--oranje);
    color: var(--on-accent);
    box-shadow: var(--shadow-ink);
}
.btn-goud:hover:not(:disabled), .btn-teal:hover:not(:disabled), .btn-accent:hover:not(:disabled) { background: var(--oranje-diep); }
.btn-goud:active:not(:disabled), .btn-teal:active:not(:disabled), .btn-accent:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

.btn-blauw { background: var(--teal); color: #fff; box-shadow: var(--shadow-ink); }
.btn-blauw:hover:not(:disabled) { background: #0D5B65; }
.btn-pink { background: var(--paars); color: #fff; box-shadow: var(--shadow-ink); }
.btn-paars { background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border); }

.btn-outline {
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    color: var(--text);
    font-weight: 700;
}
.btn-outline:hover:not(:disabled) { background: var(--input-bg-deep); }

.btn-stil { background: transparent; color: var(--text-2); border: none; font-weight: 600; }
.btn-stil:hover:not(:disabled) { background: var(--input-bg-deep); color: var(--text); }

.btn-rood { background: transparent; color: var(--danger-text); border: var(--border-w) solid var(--danger-border); }
.btn-rood:hover:not(:disabled) { background: var(--danger-bg); }

.btn-klein { padding: 6px var(--sp-3); font-size: var(--fs-sm); min-height: 36px; border-radius: var(--radius-btn-sm); box-shadow: none; }
.btn-klein:active:not(:disabled) { transform: translate(1px, 1px); }
.btn-vol { width: 100%; }
.btn-groot { min-height: 60px; font-size: var(--fs-lg); border-radius: var(--radius-lg); }

/* Icoonknop: krijgt altijd een aria-label in de HTML. */
.btn-icoon {
    width: 44px; height: 44px; min-height: 44px; padding: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text);
}
.btn-icoon:hover { background: var(--input-bg-deep); }

/* Laad-status op een knop */
.btn.laadt { position: relative; color: transparent !important; pointer-events: none; }
.btn.laadt::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    border: 2.5px solid currentColor; border-top-color: transparent; border-radius: 50%;
    color: var(--on-accent);
    animation: pz-spin .7s linear infinite;
}
.btn-outline.laadt::after, .btn-paars.laadt::after { color: var(--text); }
@keyframes pz-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Meldingen & utilities
   ============================================================ */

.fout-melding, .succes-melding, .info-melding {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    font: 600 var(--fs-sm) var(--font-body);
    margin-bottom: var(--sp-4);
    border: 1.5px solid;
}
.fout-melding { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.succes-melding { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.info-melding { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }

.verborgen { display: none !important; }
.alleen-screenreader {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tekst-klein { font-size: var(--fs-sm); color: var(--muted); }
.tekst-centreren { text-align: center; }
.stapel { display: flex; flex-direction: column; gap: var(--sp-4); }
.rij { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rij-uit-elkaar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.groei { flex: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D9CDB5; border-radius: var(--radius-pill); }
body.rustig ::-webkit-scrollbar-thumb { background: #D3CCC1; }