/* =====================================================
   Studio Meubelle Administratieportaal — Stijlen
   Design tokens: rood / roze huisstijl
   Mobile-first, geen extern framework
   ===================================================== */

/* --- Dreamboat font (speciaal display font) --- */
@font-face {
    font-family: 'dreamboat';
    src: url('/assets/fonts/dreamboat.woff2') format('woff2'),
         url('/assets/fonts/dreamboat.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- Design Tokens — Studio Meubelle huisstijl (afgestemd op logo) --- */
:root {
    /* Huisstijl kleuren */
    --kleur-rood-700:      #A82E25;   /* primair — dieprood uit het logo */
    --kleur-rood-600:      #C43D31;   /* secundair / hover */
    --kleur-roze-200:      #FBC9BB;   /* body achtergrond — zalmroze uit het logo */
    --kleur-wit-50:        #FDF4F0;   /* kaarten — warme ivoor */
    --kleur-zwart-950:     #1A0907;   /* hoofdtekst */
    --kleur-roze-licht:    #FCE0D6;   /* extra achtergrond — zacht zalm */

    /* Semantische mapping */
    --kleur-achtergrond:   var(--kleur-roze-200);
    --kleur-oppervlak:     var(--kleur-wit-50);
    --kleur-primair:       var(--kleur-rood-700);
    --kleur-primair-licht: var(--kleur-rood-600);
    --kleur-accent:        var(--kleur-rood-600);
    --kleur-accent-licht:  #E37364;
    --kleur-tekst:         var(--kleur-zwart-950);
    --kleur-tekst-licht:   #5C1A11;
    --kleur-tekst-subtiel: #A1554A;
    --kleur-rand:          #EFC0B4;
    --kleur-rand-donker:   #D6978C;

    /* Status kleuren */
    --kleur-succes:        #2D6A4F;
    --kleur-succes-achter: #D8F3DC;
    --kleur-fout:          #9B2226;
    --kleur-fout-achter:   #FFCCD5;
    --kleur-waarschuwing:  #CA6702;
    --kleur-waarschuwing-achter: #FFF3CD;
    --kleur-info-achter:   #F8E8E7;
    --kleur-info:          var(--kleur-rood-700);

    /* Typografie */
    --lettertype-basis:    Helvetica, Arial, sans-serif;
    --lettertype-kop:      Helvetica, Arial, sans-serif;
    --lettertype-display:  'dreamboat', Helvetica, Arial, sans-serif;

    /* Ruimte */
    --ruimte-xs:  0.25rem;
    --ruimte-s:   0.5rem;
    --ruimte-m:   1rem;
    --ruimte-l:   1.5rem;
    --ruimte-xl:  2rem;
    --ruimte-xxl: 3rem;

    /* Overige */
    --rand-radius:    6px;
    --rand-radius-lg: 10px;
    --schaduw:        0 1px 4px rgba(176,49,37,0.08);
    --schaduw-md:     0 2px 12px rgba(176,49,37,0.14);

    --nav-hoogte: 60px;
    --container-breedte: 1200px;
}

/* --- Reset & Basis --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; scroll-behavior: smooth; }

body {
    font-family: var(--lettertype-basis);
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-weight: 400;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--kleur-primair); text-decoration: underline; }
a:hover { color: var(--kleur-primair-licht); }

/* --- Typografie hulpklassen --- */
.tekst-small       { font-size: 0.778rem; font-weight: 400; }   /* 14px @ 18px base */
.tekst-small-bold  { font-size: 0.778rem; font-weight: 700; }
.nieuw-woord       { font-family: var(--lettertype-display); font-size: 4.22rem; font-weight: 700; } /* 76px */

/* --- Navigatie --- */
.nav {
    background: var(--kleur-primair);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--schaduw-md);
}

.nav__container {
    display: flex;
    align-items: center;
    gap: var(--ruimte-m);
    max-width: var(--container-breedte);
    margin: 0 auto;
    padding: 0 var(--ruimte-m);
    height: var(--nav-hoogte);
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: var(--ruimte-s);
    text-decoration: none;
    color: white;
    flex-shrink: 0;
}

.nav__logo-icon { font-size: 1.4rem; color: var(--kleur-wit-50); width: 32px; height: 32px; display: block; }
.nav__logo-text { font-family: var(--lettertype-kop); font-size: 1.1rem; letter-spacing: 0.02em; }

.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--ruimte-s);
    margin-left: auto;
}
.nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    transition: transform 0.2s, opacity 0.2s;
}

.nav__menu {
    display: flex;
    list-style: none;
    gap: 0;
    flex: 1;
}

.nav__link {
    display: block;
    padding: 0.5rem var(--ruimte-m);
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s, background 0.15s;
    border-bottom: 2px solid transparent;
}

.nav__link:hover,
.nav__link--actief {
    color: white;
    border-bottom-color: var(--kleur-wit-50);
}

.nav__gebruiker {
    display: flex;
    align-items: center;
    gap: var(--ruimte-s);
    margin-left: auto;
    flex-shrink: 0;
}

.nav__naam { font-size: 0.85rem; color: rgba(255,255,255,0.7); }

.nav__uitloggen {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.15s;
}
.nav__uitloggen:hover { color: var(--kleur-wit-50); }

/* --- Nav dropdown --- */
.nav__item--dropdown { position: relative; }

.nav__dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    white-space: nowrap;
}

.nav__dropdown-pijl { font-size: 0.65rem; margin-left: 0.2rem; transition: transform 0.15s; }
.nav__item--dropdown.open .nav__dropdown-pijl { transform: rotate(180deg); }

.nav__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rand-radius);
    box-shadow: var(--schaduw-md);
    list-style: none;
    min-width: 200px;
    z-index: 200;
    padding: 0.35rem 0;
}
.nav__item--dropdown.open .nav__dropdown { display: block; }

.nav__dropdown-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--kleur-tekst);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.12s;
}
.nav__dropdown-link:hover { background: var(--kleur-roze-licht); color: var(--kleur-primair); }
.nav__dropdown-link--straks { color: var(--kleur-tekst-subtiel); pointer-events: none; }

.nav__dropdown-divider {
    height: 1px;
    background: var(--kleur-rand);
    margin: 0.35rem 0;
}

/* --- Container --- */
.container {
    max-width: var(--container-breedte);
    margin: 0 auto;
    padding: 0 var(--ruimte-m);
}

/* --- Hoofdinhoud --- */
.hoofd { flex: 1; padding: var(--ruimte-xl) 0 var(--ruimte-xxl); }

/* --- Voettekst --- */
.voettekst {
    background: var(--kleur-primair);
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
    padding: var(--ruimte-m) 0;
    text-align: center;
}

/* --- Auth pagina --- */
.lichaam--auth { background: var(--kleur-primair); }

.auth-pagina {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--ruimte-m);
}

.auth-kaart {
    background: var(--kleur-oppervlak);
    border-radius: var(--rand-radius-lg);
    padding: var(--ruimte-xl) var(--ruimte-xl);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--schaduw-md);
}

.auth-kaart__logo { text-align: center; margin-bottom: var(--ruimte-xl); }
.auth-kaart__logo-icon { width: 64px; height: 64px; display: block; margin: 0 auto var(--ruimte-s); }
.auth-kaart__naam { font-family: var(--lettertype-kop); font-size: 1.6rem; color: var(--kleur-primair); margin-top: var(--ruimte-s); }
.auth-kaart__sub { color: var(--kleur-tekst-subtiel); font-size: 0.889rem; }

/* --- Kaart --- */
.kaart {
    background: var(--kleur-oppervlak);
    border-radius: var(--rand-radius);
    box-shadow: var(--schaduw);
    border: 1px solid var(--kleur-rand);
    margin-bottom: var(--ruimte-l);
    overflow: hidden;
}

.kaart--compact .kaart__inhoud { padding: var(--ruimte-m); }
.kaart--info { border-left: 4px solid var(--kleur-primair); }

.kaart__hoofd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ruimte-m) var(--ruimte-l);
    border-bottom: 1px solid var(--kleur-rand);
    background: var(--kleur-roze-licht);
}

.kaart__titel {
    font-family: var(--lettertype-kop);
    font-size: 1.05rem;
    color: var(--kleur-primair);
}

.kaart__sub-titel { font-size: 0.95rem; color: var(--kleur-tekst-licht); margin-bottom: var(--ruimte-m); }
.kaart__link { font-size: 0.889rem; color: var(--kleur-primair); text-decoration: underline; }
.kaart__link:hover { color: var(--kleur-primair-licht); }

.kaart__inhoud { padding: var(--ruimte-l); }
.kaart__inhoud--centreer { text-align: center; }

/* --- Pagina hoofd --- */
.pagina-hoofd {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ruimte-m);
    margin-bottom: var(--ruimte-l);
}

.pagina-hoofd__titel {
    font-family: var(--lettertype-kop);
    font-size: 1.778rem;  /* ~32px @ 18px base — H5-equivalent voor admin */
    font-weight: 400;
    color: var(--kleur-primair);
    flex: 1;
    min-width: 0;
}

.pagina-hoofd__acties {
    display: flex;
    gap: var(--ruimte-s);
    flex-wrap: wrap;
}

.broodkruimel {
    width: 100%;
    font-size: 0.85rem;
    color: var(--kleur-tekst-subtiel);
}

.broodkruimel a {
    color: var(--kleur-primair);
    text-decoration: underline;
}

/* --- Knoppen --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--rand-radius);
    font-size: 1rem;        /* 18px */
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.2;
    font-family: var(--lettertype-basis);
}

.btn--primair {
    background: var(--kleur-primair);
    color: var(--kleur-wit-50);
    border-color: var(--kleur-primair);
}
.btn--primair:hover {
    background: var(--kleur-primair-licht);
    border-color: var(--kleur-primair-licht);
    color: var(--kleur-wit-50);
    text-decoration: none;
}

.btn--secundair {
    background: transparent;
    color: var(--kleur-primair);
    border-color: var(--kleur-rand-donker);
}
.btn--secundair:hover {
    background: var(--kleur-roze-licht);
    border-color: var(--kleur-primair);
    color: var(--kleur-primair);
    text-decoration: none;
}

.btn--klein {
    padding: 0.3rem 0.7rem;
    font-size: 0.778rem;    /* 14px */
}

.btn--volledig { width: 100%; justify-content: center; }

.btn--accent {
    background: var(--kleur-primair);
    color: var(--kleur-wit-50);
    border-color: var(--kleur-primair);
}

/* Danger/waarschuwing knoppen */
.btn--gevaar {
    background: #9B2226;
    color: var(--kleur-wit-50);
    border-color: #9B2226;
}
.btn--gevaar:hover {
    background: #7A1A1D;
    border-color: #7A1A1D;
    color: var(--kleur-wit-50);
    text-decoration: none;
}

.btn--waarschuwing {
    background: #CA6702;
    color: var(--kleur-wit-50);
    border-color: #CA6702;
}
.btn--waarschuwing:hover {
    background: #A85302;
    border-color: #A85302;
    color: var(--kleur-wit-50);
    text-decoration: none;
}

/* --- Flash meldingen --- */
.flash {
    display: flex;
    align-items: center;
    gap: var(--ruimte-s);
    padding: var(--ruimte-m) var(--ruimte-l);
    border-radius: var(--rand-radius);
    margin-bottom: var(--ruimte-m);
    font-size: 0.9rem;
    position: relative;
}

.flash--succes { background: var(--kleur-succes-achter); color: var(--kleur-succes); border-left: 4px solid var(--kleur-succes); }
.flash--fout   { background: var(--kleur-fout-achter); color: var(--kleur-fout); border-left: 4px solid var(--kleur-fout); }
.flash--info   { background: var(--kleur-info-achter); color: var(--kleur-info); border-left: 4px solid var(--kleur-info); }

.flash__sluiten {
    position: absolute;
    right: var(--ruimte-m);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: inherit;
    opacity: 0.6;
    line-height: 1;
}

/* --- Formulieren --- */
.formulier { }
.formulier-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ruimte-m);
    margin-bottom: var(--ruimte-m);
}

.formulier-raster--drie { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.formulier-raster--smal { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-width: 500px; }

.formulier-groep { display: flex; flex-direction: column; gap: 0.3rem; }
.formulier-groep--vol { grid-column: 1 / -1; }
.formulier-groep--uitbreidend { flex: 1; }
.formulier-groep--knop { justify-content: flex-end; flex-direction: row; align-items: flex-end; gap: var(--ruimte-s); }

.formulier-groep__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kleur-tekst-licht);
}

.formulier-groep__invoer {
    padding: 0.6rem 0.8rem;
    border: 1.5px solid var(--kleur-rand-donker);
    border-radius: var(--rand-radius);
    font-size: 0.95rem;
    font-family: var(--lettertype-basis);
    background: white;
    color: var(--kleur-tekst);
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.formulier-groep__invoer:focus {
    outline: none;
    border-color: var(--kleur-primair);
    box-shadow: 0 0 0 3px rgba(176,49,37,0.18);
}

.formulier-groep__invoer--tekstvak { resize: vertical; min-height: 80px; }
.formulier-groep__invoer--bestand { padding: 0.45rem; }

.formulier-groep--fout .formulier-groep__invoer {
    border-color: var(--kleur-fout);
}

.formulier-groep__fout { font-size: 0.8rem; color: var(--kleur-fout); }
.formulier-groep__hulp { font-size: 0.8rem; color: var(--kleur-tekst-subtiel); }

.formulier-knoppen {
    display: flex;
    gap: var(--ruimte-s);
    flex-wrap: wrap;
    margin-top: var(--ruimte-l);
    padding-top: var(--ruimte-l);
    border-top: 1px solid var(--kleur-rand);
}

.verplicht { color: var(--kleur-fout); }

/* --- Filter formulier --- */
.filter-formulier { }
.filter-rij {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-m);
    align-items: flex-end;
}

/* --- Tabel --- */
.tabel-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tabel th {
    text-align: left;
    padding: 0.6rem var(--ruimte-m);
    background: var(--kleur-achtergrond);
    border-bottom: 2px solid var(--kleur-rand-donker);
    color: var(--kleur-tekst-licht);
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tabel td {
    padding: 0.7rem var(--ruimte-m);
    border-bottom: 1px solid var(--kleur-rand);
    vertical-align: middle;
}

.tabel tr:last-child td { border-bottom: none; }
.tabel tr:hover td { background: var(--kleur-achtergrond); }

.tabel__acties { white-space: nowrap; }
.tabel__foto { width: 56px; padding: 0.4rem var(--ruimte-s); }

.tabel-miniatuur {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--rand-radius);
    border: 1px solid var(--kleur-rand);
}

.geen-foto { color: var(--kleur-tekst-subtiel); font-size: 1.2rem; }
.link-numm { font-family: monospace; font-size: 0.875rem; color: var(--kleur-primair); font-weight: 600; }

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge--blauw  { background: #E3F0FF; color: #1A5FA8; }
.badge--groen  { background: var(--kleur-succes-achter); color: var(--kleur-succes); }
.badge--oranje { background: #FFF0E0; color: #B45309; }
.badge--rood   { background: var(--kleur-fout-achter); color: var(--kleur-fout); }
.badge--grijs  { background: #F0EDE8; color: var(--kleur-tekst-licht); }
.badge--paars  { background: #F3E8FF; color: #7C3AED; }
.badge--goud   { background: #FEF9C3; color: #92400E; }

/* --- Kaart detail raster --- */
.kaart__subtitel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kleur-primair);
    margin-bottom: var(--ruimte-m);
}

.kaart-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--ruimte-m);
}

.kaart-raster__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kleur-tekst-licht);
    margin-bottom: 0.2rem;
}

.kaart-raster__waarde {
    font-size: 0.9rem;
    color: var(--kleur-tekst);
}

/* --- Statistieken raster (dashboard) --- */
.statistieken-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ruimte-m);
    margin-bottom: var(--ruimte-l);
}

.stat-kaart {
    background: var(--kleur-oppervlak);
    border-radius: var(--rand-radius);
    padding: var(--ruimte-l);
    box-shadow: var(--schaduw);
    border-top: 4px solid;
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-xs);
}

.stat-kaart--blauw   { border-color: var(--kleur-primair); }
.stat-kaart--groen   { border-color: var(--kleur-succes); }
.stat-kaart--oranje  { border-color: #D97706; }
.stat-kaart--grijs   { border-color: var(--kleur-rand-donker); }

.stat-kaart__getal {
    font-size: 2.2rem;
    font-weight: 700;
    font-family: var(--lettertype-kop);
    color: var(--kleur-primair);
    line-height: 1;
}

.stat-kaart__label { font-size: 0.85rem; color: var(--kleur-tekst-subtiel); }
.stat-kaart__link { font-size: 0.8rem; color: var(--kleur-accent); text-decoration: none; margin-top: auto; }

/* --- Activiteitenlijst --- */
.activiteit-lijst { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }

.activiteit-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--kleur-rand);
    font-size: 0.875rem;
}

.activiteit-item:last-child { border-bottom: none; }
.activiteit-item__actie { font-weight: 600; color: var(--kleur-primair); }
.activiteit-item__entiteit { color: var(--kleur-primair-licht); }
.activiteit-item__gebruiker { color: var(--kleur-tekst-licht); }
.activiteit-item__tijd { margin-left: auto; color: var(--kleur-tekst-subtiel); font-size: 0.778rem; }

/* --- Beschrijvingslijst (detail) --- */
.beschrijving-lijst {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem var(--ruimte-l);
    align-items: baseline;
}

.beschrijving-lijst dt {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kleur-tekst-subtiel);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.beschrijving-lijst dd { color: var(--kleur-tekst); }

/* --- Info blok --- */
.info-blok {
    background: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rand-radius);
    padding: var(--ruimte-m);
    margin-bottom: var(--ruimte-l);
    font-size: 0.9rem;
}

.info-blok__label { color: var(--kleur-tekst-subtiel); font-weight: 600; }

/* --- Waarschuwing --- */
.waarschuwing {
    background: var(--kleur-waarschuwing-achter);
    border: 1px solid #FBBF24;
    border-left: 4px solid var(--kleur-waarschuwing);
    padding: var(--ruimte-m) var(--ruimte-l);
    border-radius: var(--rand-radius);
    margin-bottom: var(--ruimte-l);
    font-size: 0.9rem;
    color: #92400E;
}

/* --- Foto preview & raster --- */
.foto-preview {
    margin-top: var(--ruimte-s);
}

.foto-preview img, .huidig-bestand__preview {
    max-height: 150px;
    border-radius: var(--rand-radius);
    border: 1px solid var(--kleur-rand);
}

.foto-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--ruimte-s);
    margin-top: var(--ruimte-s);
}

.foto-raster__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--rand-radius);
    border: 1px solid var(--kleur-rand);
    transition: transform 0.15s;
}
.foto-raster__item img:hover { transform: scale(1.03); }
.foto-raster__item { text-decoration: none; }

.foto-preview-raster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-s);
    margin-top: var(--ruimte-s);
}

.foto-preview-raster img {
    height: 80px;
    width: 80px;
    object-fit: cover;
    border-radius: var(--rand-radius);
    border: 1px solid var(--kleur-rand);
}

.huidig-bestand { display: flex; align-items: center; gap: var(--ruimte-s); margin-bottom: var(--ruimte-s); }
.huidig-bestand__tekst { font-size: 0.8rem; color: var(--kleur-tekst-subtiel); }

/* --- Kaart foto --- */
.kaart-foto {
    max-height: 250px;
    border-radius: var(--rand-radius);
    margin: 0 auto;
}

/* --- Rasters --- */
.raster-twee-kolommen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ruimte-m);
}

/* --- Paginering --- */
.paginering {
    display: flex;
    gap: var(--ruimte-xs);
    justify-content: center;
    margin-top: var(--ruimte-l);
    flex-wrap: wrap;
}

.paginering__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rand-radius);
    text-decoration: none;
    font-size: 0.875rem;
    color: var(--kleur-tekst);
    border: 1px solid var(--kleur-rand);
    background: var(--kleur-oppervlak);
    transition: all 0.15s;
}

.paginering__item:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); text-decoration: none; }
.paginering__item--actief {
    background: var(--kleur-primair);
    color: var(--kleur-wit-50);
    border-color: var(--kleur-primair);
}

/* --- Leeg staat --- */
.leeg-staat {
    text-align: center;
    padding: var(--ruimte-xl) 0;
    color: var(--kleur-tekst-subtiel);
}

.leeg-staat a { color: var(--kleur-primair); }

/* --- Diverse hulpklassen --- */
.tekst-klein { font-size: 0.8rem; color: var(--kleur-tekst-subtiel); }
.tekst-intro { color: var(--kleur-tekst-licht); margin-bottom: var(--ruimte-l); }

.kolom-lijst {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ruimte-xs) var(--ruimte-l);
    list-style: disc;
    padding-left: var(--ruimte-l);
    font-size: 0.875rem;
    color: var(--kleur-tekst-licht);
}

/* --- Print knopbalk --- */
.print-balk {
    background: var(--kleur-primair);
    color: white;
    padding: var(--ruimte-m) 0;
    display: flex;
    align-items: center;
}

.print-balk .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.print-balk__knoppen { display: flex; gap: var(--ruimte-s); }

/* =====================================================
   Mobiel (max 768px)
   ===================================================== */
@media (max-width: 768px) {
    html { font-size: 16px; }

    .pagina-hoofd__titel { font-size: 1.563rem; }
    .nieuw-woord { font-size: 3.063rem; }

    /* --- Nav hamburger --- */
    .nav__toggle { display: flex; }

    .nav__menu {
        display: none;
        position: absolute;
        top: var(--nav-hoogte);
        left: 0;
        right: 0;
        background: var(--kleur-primair);
        flex-direction: column;
        padding: var(--ruimte-s) 0;
        box-shadow: var(--schaduw-md);
        z-index: 150;
    }
    .nav__menu--open { display: flex; }

    .nav__link {
        padding: 0.9rem var(--ruimte-l);
        border-bottom: 1px solid rgba(255,255,255,0.07);
        border-bottom-color: rgba(255,255,255,0.07);
    }

    /* --- Nav dropdown: inline in mobiel menu --- */
    .nav__item--dropdown { position: static; }

    .nav__dropdown {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0,0,0,0.18);
        min-width: 0;
        padding: 0.25rem 0;
    }
    .nav__item--dropdown.open .nav__dropdown { display: block; }

    .nav__dropdown-toggle {
        width: 100%;
        text-align: left;
        padding: 0.9rem var(--ruimte-l);
        color: rgba(255,255,255,0.8);
    }
    .nav__dropdown-toggle:hover { color: white; }

    .nav__dropdown-link {
        color: rgba(255,255,255,0.75);
        padding: 0.65rem 2.5rem;
        border-radius: 0;
    }
    .nav__dropdown-link:hover { background: rgba(0,0,0,0.15); color: white; }
    .nav__dropdown-link--straks { color: rgba(255,255,255,0.35); }
    .nav__dropdown-divider { background: rgba(255,255,255,0.1); margin: 0.25rem 0; }

    /* --- Nav gebruiker --- */
    .nav__naam { display: none; }
    .nav__gebruiker { margin-left: auto; }

    /* --- Layout --- */
    .hoofd { padding: var(--ruimte-m) 0 var(--ruimte-xl); }

    .pagina-hoofd { flex-direction: column; align-items: flex-start; }
    .pagina-hoofd__acties { width: 100%; }

    .raster-twee-kolommen { grid-template-columns: 1fr; }
    .statistieken-raster { grid-template-columns: repeat(2, 1fr); }

    .formulier-raster { grid-template-columns: 1fr; }
    .formulier-raster--drie { grid-template-columns: 1fr; }

    .filter-rij { flex-direction: column; }
    .filter-rij .formulier-groep--knop { flex-direction: row; }

    .beschrijving-lijst { grid-template-columns: 1fr; }
    .beschrijving-lijst dt { margin-top: var(--ruimte-s); }

    .tabel th:nth-child(n+5),
    .tabel td:nth-child(n+5) { display: none; }

    .auth-kaart { padding: var(--ruimte-l); }
}

@media (max-width: 480px) {
    .statistieken-raster { grid-template-columns: 1fr; }
    .btn--volledig { width: 100%; }
    .nav__uitloggen { font-size: 1.3rem; padding: 0.5rem; }
}

/* ============================================================
   Calculaties
   ============================================================ */

.calc-stap-titel {
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kleur-tekst-subtiel);
    margin-bottom: 0.75rem;
}

.calc-keuze-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.calc-keuze {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1.5px solid var(--kleur-rand-donker);
    border-radius: var(--rand-radius);
    cursor: pointer;
    font-size: 0.9rem;
    background: var(--kleur-oppervlak);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.calc-keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.calc-keuze:hover { border-color: var(--kleur-primair); background: var(--kleur-roze-licht); }
.calc-keuze--actief {
    border-color: var(--kleur-primair);
    background: var(--kleur-roze-licht);
    color: var(--kleur-primair);
    font-weight: 600;
}

.calc-schuim-optie {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--kleur-rand);
    border-radius: var(--rand-radius);
    cursor: pointer;
    background: var(--kleur-oppervlak);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.calc-schuim-optie input[type="radio"] { flex-shrink: 0; accent-color: var(--kleur-primair); }
.calc-schuim-optie input[type="checkbox"] { flex-shrink: 0; accent-color: var(--kleur-primair); }
.calc-schuim-optie:hover { border-color: var(--kleur-primair); background: var(--kleur-roze-licht); }
.calc-schuim-optie:has(input:checked) {
    border-color: var(--kleur-primair);
    background: var(--kleur-roze-licht);
    font-weight: 600;
}
.calc-schuim-naam { font-size: 0.9rem; }

.invoer--waarschuwing {
    border-color: var(--kleur-waarschuwing) !important;
    background: var(--kleur-waarschuwing-achter);
}

/* --- Modal (gebruikt door calculatie-opslaan) --- */
.calc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--ruimte-m);
}

.calc-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(19, 7, 6, 0.55);
    backdrop-filter: blur(2px);
}

.calc-modal__dialog {
    position: relative;
    background: var(--kleur-oppervlak);
    border-radius: var(--rand-radius-lg);
    box-shadow: var(--schaduw-md);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    animation: calcModalIn 0.15s ease-out;
}

@keyframes calcModalIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.calc-modal__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--kleur-rand);
    background: var(--kleur-roze-licht);
    border-radius: var(--rand-radius-lg) var(--rand-radius-lg) 0 0;
}

.calc-modal__titel {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kleur-primair);
    margin: 0;
}

.calc-modal__sluiten {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--kleur-tekst-subtiel);
    padding: 0.25rem 0.5rem;
    border-radius: var(--rand-radius);
}
.calc-modal__sluiten:hover { background: rgba(0,0,0,0.06); color: var(--kleur-primair); }

.calc-modal__inhoud { padding: 1.25rem; }

.calc-modal__acties {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--kleur-rand);
    margin-top: 0.5rem;
}

@media (max-width: 480px) {
    .calc-modal__acties { flex-direction: column-reverse; }
    .calc-modal__acties .btn { width: 100%; justify-content: center; }
}

#resultaat-kaart { padding: 1.25rem; }

/* Calculator responsive */
.calc-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

.calc-resultaat-wrapper {
    position: sticky;
    top: calc(var(--nav-hoogte) + 1rem);
}

@media (max-width: 900px) {
    .calc-layout-grid { grid-template-columns: 1fr !important; }
    .calc-resultaat-wrapper { position: static !important; top: auto !important; }
    #resultaat-kaart { position: static !important; }
}

@media (max-width: 768px) {
    /* Calculator: toon resultaat bovenaan op mobiel (order trick) */
    .calc-layout-grid { display: flex; flex-direction: column; }
    .calc-resultaat-wrapper { order: -1; }  /* resultaat boven de invoer */

    /* Kaart padding verkleinen op mobiel */
    .kaart { margin-bottom: var(--ruimte-m); }
    .kaart__inhoud { padding: var(--ruimte-m); }

    /* Calc keuze rij: scrollbaar op kleine schermen */
    .calc-keuze-rij { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; }
    .calc-keuze { flex-shrink: 0; }
}

/* ============================================================
   Wizard
   ============================================================ */
.wizard {
    max-width: 640px;
    margin: 0 auto;
}

.wizard__indicator {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    list-style: none;
    padding: 0;
    counter-reset: wizardstap;
}

.wizard__indicator-stap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--kleur-tekst-subtiel);
    text-align: center;
    counter-increment: wizardstap;
    position: relative;
}

.wizard__indicator-stap::before {
    content: counter(wizardstap);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--kleur-roze-licht);
    border: 2px solid var(--kleur-rand);
    color: var(--kleur-tekst-subtiel);
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.15s;
    z-index: 1;
}

.wizard__indicator-stap:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: var(--kleur-rand);
    z-index: 0;
}

.wizard__indicator-stap--gedaan::before {
    background: var(--kleur-primair);
    border-color: var(--kleur-primair);
    color: var(--kleur-wit-50);
    content: '✓';
}
.wizard__indicator-stap--gedaan:not(:last-child)::after { background: var(--kleur-primair); }

.wizard__indicator-stap--actief::before {
    background: var(--kleur-wit-50);
    border-color: var(--kleur-primair);
    color: var(--kleur-primair);
    box-shadow: 0 0 0 4px rgba(168, 46, 37, 0.15);
}
.wizard__indicator-stap--actief { color: var(--kleur-primair); font-weight: 600; }

.wizard__stap {
    display: none;
    background: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--rand-radius);
    padding: 1.5rem;
    box-shadow: var(--schaduw);
}
.wizard__stap--actief { display: block; animation: wizardFadeIn 0.2s ease-out; }

@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wizard__stap-titel {
    font-family: var(--lettertype-kop);
    font-size: 1.4rem;
    color: var(--kleur-primair);
    margin: 0 0 0.35rem;
}
.wizard__stap-sub {
    font-size: 0.88rem;
    color: var(--kleur-tekst-subtiel);
    margin-bottom: 1.25rem;
}

.wizard__verplicht-pil {
    display: inline-block;
    background: var(--kleur-primair);
    color: var(--kleur-wit-50);
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.wizard__optioneel-pil {
    display: inline-block;
    background: var(--kleur-roze-licht);
    color: var(--kleur-tekst-subtiel);
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.wizard__nav {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kleur-rand);
    align-items: center;
}
.wizard__nav-spacer { flex: 1; }

.wizard__fout {
    background: var(--kleur-fout-achter);
    color: var(--kleur-fout);
    padding: 0.5rem 0.75rem;
    border-radius: var(--rand-radius);
    margin-bottom: 1rem;
    font-size: 0.85rem;
    display: none;
}
.wizard__fout--zichtbaar { display: block; }

@media (max-width: 600px) {
    .wizard__indicator { gap: 0.25rem; }
    .wizard__indicator-stap { font-size: 0.7rem; }
    .wizard__indicator-stap::before { width: 28px; height: 28px; font-size: 0.82rem; }
    .wizard__indicator-stap:not(:last-child)::after { top: 14px; left: calc(50% + 14px); right: calc(-50% + 14px); }
    .wizard__stap { padding: 1rem; }
    .wizard__stap-titel { font-size: 1.15rem; }
    .wizard__nav { flex-wrap: wrap; }
    .wizard__nav-spacer { flex-basis: 100%; height: 0.25rem; }
}