/* ============================================================================
   AILoopbaancoaching.nl — Main CSS
   ============================================================================
   Versie:   1.1
   Datum:    2026-04-01

   Doel:
     Platform-breed fundament. Eén bron van waarheid voor kleuren,
     typografie en herbruikbare waarden.

     Tailwind CDN verzorgt layout, spacing en utilities.
     Dit bestand vult aan waar Tailwind tekortschiet:
     — CSS custom properties voor kleurwaarden
     — Module-overschrijdende herbruikbare stijlen

   Laadvolgorde in base.html:
     1. Tailwind CDN
     2. Google Fonts (Open Sans + Poppins)
     3. Dit bestand (main.css)
     4. Module CSS via {% block extra_css %}

   Herkomst:
     Gebaseerd op AIBeroepenzoeker main.css (zelfde familie)
     en het design-system van de Hugo-versie van AILoopbaancoaching.
   ============================================================================ */


/* ============================================================================
   1. CSS Custom Properties — alle platformkleuren op één plek
   ============================================================================ */

:root {

  /* ── Primaire actiekleuren ──────────────────────────────────────────── */
  --kleur-primair:              #F97316;   /* orange-500 — primaire CTA */
  --kleur-primair-hover:        #EA580C;   /* orange-600 */
  --kleur-primair-licht:        #FFF7ED;   /* orange-50 — subtiele achtergrond */

  --kleur-link:                 #2563EB;   /* blue-600 — links en accenten */
  --kleur-link-hover:           #1D4ED8;   /* blue-700 */
  --kleur-link-licht:           #EFF6FF;   /* blue-50 */

  --kleur-destructief:          #EF4444;   /* red-500 — uitloggen, verwijderen */
  --kleur-destructief-hover:    #DC2626;   /* red-600 */

  --kleur-admin:                #9333EA;   /* purple-600 — admin-only */

  /* ── Route-kleuren (toekomstig: testenmodule) ───────────────────────── */
  /* Kleur volgt betekenis, niet smaak. Zie stijlgids.md voor rationale. */
  --color-testen:               #2563eb;   /* blauw — ontdekken, meten */
  --color-rapporten:            #16a34a;   /* groen — resultaat, groei */
  --color-dashboard:            #d97706;   /* amber — persoonlijk, overzicht */

  /* Default accent (fallback) */
  --accent-color:               var(--kleur-link);

  /* ── Achtergronden ──────────────────────────────────────────────────── */
  --achtergrond-pagina:         #F3F4F6;   /* gray-100 */
  --achtergrond-card:           #FFFFFF;   /* white */
  --achtergrond-subtiel:        #EFF6FF;   /* blue-50 */

  /* ── Tekst ──────────────────────────────────────────────────────────── */
  --tekst-primair:              #111827;   /* gray-900 */
  --tekst-secundair:            #4B5563;   /* gray-600 */
  --tekst-meta:                 #6B7280;   /* gray-500 */
  --tekst-placeholder:          #9CA3AF;   /* gray-400 */

  /* ── Borders ────────────────────────────────────────────────────────── */
  --border-standaard:           #E5E7EB;   /* gray-200 */
  --border-focus-primair:       #FB923C;   /* orange-400 */
  --border-focus-link:          #60A5FA;   /* blue-400 */

  /* ── Feedback / flash ───────────────────────────────────────────────── */
  --flash-succes-bg:            #F0FDF4;   /* green-50 */
  --flash-succes-border:        #BBF7D0;   /* green-200 */
  --flash-succes-tekst:         #166534;   /* green-800 */

  --flash-fout-bg:              #FEF2F2;   /* red-50 */
  --flash-fout-border:          #FECACA;   /* red-200 */
  --flash-fout-tekst:           #991B1B;   /* red-800 */

  --flash-waarschuwing-bg:      #FFFBEB;   /* amber-50 */
  --flash-waarschuwing-border:  #FDE68A;   /* amber-200 */
  --flash-waarschuwing-tekst:   #92400E;   /* amber-800 */

  --flash-info-bg:              #EFF6FF;   /* blue-50 */
  --flash-info-border:          #BFDBFE;   /* blue-200 */
  --flash-info-tekst:           #1E40AF;   /* blue-800 */

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --spacing-sectie:             4rem;      /* mb-16 equivalent */
  --spacing-card:               1.5rem;    /* p-6 equivalent */
  --spacing-gap:                1.5rem;    /* gap-6 equivalent */

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --radius-card:                0.75rem;   /* rounded-xl */
  --radius-knop:                0.5rem;    /* rounded-lg */
  --radius-badge:               9999px;    /* rounded-full */

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-card:                0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-card-hover:          0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}


/* ============================================================================
   2. Basis — aanvullingen op Tailwind reset
   ============================================================================ */

html {
  scroll-behavior: smooth;
}

:focus-visible {
  outline: 2px solid var(--kleur-link);
  outline-offset: 2px;
}

::selection {
  background-color: #BFDBFE;  /* blue-200 */
  color: var(--tekst-primair);
}


/* ============================================================================
   3. Typografie
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  color: var(--tekst-primair);
  line-height: 1.2;
}

p {
  line-height: 1.6;
}


/* ============================================================================
   4. Componenten
   ============================================================================ */

/* Card */
.card {
  background-color: var(--achtergrond-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-card);
  border: 1px solid var(--border-standaard);
  animation: fade-in 0.3s ease forwards;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Primaire knop */
.knop-primair {
  display: inline-block;
  background-color: var(--kleur-primair);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: var(--radius-knop);
  transition: background-color 0.2s ease;
  text-align: center;
}

.knop-primair:hover {
  background-color: var(--kleur-primair-hover);
  color: #FFFFFF;
}

/* Secundaire knop */
.knop-secundair {
  display: inline-block;
  border: 1px solid var(--kleur-link);
  color: var(--kleur-link);
  font-weight: 600;
  border-radius: var(--radius-knop);
  transition: background-color 0.2s ease;
  text-align: center;
}

.knop-secundair:hover {
  background-color: var(--kleur-link-licht);
}


/* ============================================================================
   5. Flash berichten
   ============================================================================ */

.flash-succes {
  background-color: var(--flash-succes-bg);
  border: 1px solid var(--flash-succes-border);
  color: var(--flash-succes-tekst);
}

.flash-fout {
  background-color: var(--flash-fout-bg);
  border: 1px solid var(--flash-fout-border);
  color: var(--flash-fout-tekst);
}

.flash-waarschuwing {
  background-color: var(--flash-waarschuwing-bg);
  border: 1px solid var(--flash-waarschuwing-border);
  color: var(--flash-waarschuwing-tekst);
}

.flash-info {
  background-color: var(--flash-info-bg);
  border: 1px solid var(--flash-info-border);
  color: var(--flash-info-tekst);
}


/* ============================================================================
   6. Animaties — sober en functioneel
   ============================================================================ */

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

.fade-in {
  animation: fade-in 0.3s ease forwards;
}


/* ============================================================================
   7. Hulpklassen — Tailwind aanvullingen
   ============================================================================ */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================================
   8. Route-wrappers (klaar voor testenmodule)
   ============================================================================
   Wanneer de testenmodule gebouwd wordt, zetten route-wrappers de
   accentkleur automatisch. Componenten lezen dan uit --accent-color.

   .route-testen     { --accent-color: var(--color-testen); }
   .route-rapporten  { --accent-color: var(--color-rapporten); }
   .route-dashboard  { --accent-color: var(--color-dashboard); }
   ============================================================================ */


/* ============================================================================
   9. Gedeelde pagina-componenten (platformbreed herbruikbaar)
   ============================================================================ */

/* ── Hero sectie ── */
.hero-section {
    text-align: center;
    padding: 4rem 1rem 3rem;
    background: linear-gradient(180deg, var(--kleur-link-licht) 0%, var(--achtergrond-pagina) 100%);
}

.hero-inner { max-width: 42rem; margin: 0 auto; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.25rem 0.875rem; border-radius: var(--radius-badge);
    font-size: 0.75rem; font-weight: 600; margin-bottom: 1.25rem;
    background: rgba(37,99,235,0.08); color: #1e40af; border: 1px solid rgba(37,99,235,0.18);
}

.hero-titel {
    font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 800;
    color: var(--tekst-primair); margin: 0 0 1rem; line-height: 1.15;
}

.hero-subtitel {
    font-size: 1.125rem; line-height: 1.7; color: var(--tekst-secundair);
    margin-bottom: 0.75rem;
}

.hero-meta { font-size: 0.8125rem; color: var(--tekst-meta); margin-bottom: 2rem; }

.hero-ctas {
    display: flex; flex-direction: column; gap: 0.75rem;
    align-items: center; justify-content: center;
}

.hero-knop { padding: 0.875rem 2rem; font-size: 1rem; border-radius: var(--radius-knop); }

@media (min-width: 640px) {
    .hero-titel { font-size: 3rem; }
    .hero-ctas { flex-direction: row; }
}

/* ── Sectie layout ── */
.home-sectie { padding: 3rem 0; }

.home-kop {
    font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700;
    color: var(--tekst-primair); text-align: center; margin-bottom: 0.5rem;
}

.home-subtekst {
    font-size: 0.875rem; color: var(--tekst-secundair); text-align: center;
    margin-bottom: 2rem;
}

/* ── Categorie-kaarten ── */
.categorie-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
    max-width: 64rem; margin: 0 auto;
}

@media (min-width: 768px) { .categorie-grid { grid-template-columns: repeat(4, 1fr); } }

.categorie-kaart {
    display: block; text-decoration: none;
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.25rem; text-align: center;
    transition: box-shadow 0.15s, transform 0.1s;
}

.categorie-kaart:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.categorie-icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; }
.categorie-naam { font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem; }
.categorie-count { font-size: 0.75rem; color: var(--tekst-meta); }

/* ── Stappen (hoe werkt het) ── */
.stappen-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.25rem;
    max-width: 52rem; margin: 0 auto;
}

@media (min-width: 768px) { .stappen-grid { grid-template-columns: repeat(3, 1fr); } }

.stap-kaart {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.5rem; text-align: center;
}

.stap-nr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700;
    color: white; margin-bottom: 0.75rem;
}

.stap-nr-blauw  { background: #2563EB; }
.stap-nr-paars  { background: #7C3AED; }
.stap-nr-oranje { background: #EA580C; }

.stap-titel {
    font-family: 'Poppins', sans-serif; font-size: 0.9375rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 0.375rem;
}

.stap-tekst { font-size: 0.8125rem; line-height: 1.6; color: var(--tekst-secundair); }

/* ── Wel/niet kaart ── */
.wel-niet-kaart {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 2rem; max-width: 48rem; margin: 0 auto;
}

.wel-niet-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }

@media (min-width: 640px) { .wel-niet-grid { grid-template-columns: 1fr 1fr; } }

.wel-niet-kop {
    font-family: 'Poppins', sans-serif; font-size: 0.9375rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 0.75rem;
}

.wel-niet-lijst { display: flex; flex-direction: column; gap: 0.5rem; }

.wel-item, .niet-item {
    display: flex; align-items: flex-start; gap: 0.625rem;
    font-size: 0.8125rem; line-height: 1.5; color: var(--tekst-secundair);
    padding: 0.5rem 0.75rem; border-radius: var(--radius-knop);
}

.wel-item { background: #F0FDF4; }
.niet-item { background: #FEF2F2; }

.wel-icon { color: var(--flash-succes-tekst); font-weight: 700; flex-shrink: 0; }
.niet-icon { color: var(--flash-fout-tekst); font-weight: 700; flex-shrink: 0; }

/* ── Trust signals ── */
.trust-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
    max-width: 52rem; margin: 0 auto;
}

@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

.trust-item {
    text-align: center; padding: 1.25rem 0.75rem;
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}

.trust-icon { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.trust-titel { font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--tekst-primair); margin-bottom: 0.125rem; }
.trust-tekst { font-size: 0.75rem; color: var(--tekst-meta); }

/* ── CTA sectie ── */
.cta-sectie {
    text-align: center; padding: 3rem 1rem;
    background: linear-gradient(180deg, var(--achtergrond-pagina) 0%, var(--kleur-primair-licht) 100%);
    border-radius: var(--radius-card); margin-bottom: 2rem;
}

.cta-titel {
    font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 0.5rem;
}

.cta-tekst { font-size: 0.9375rem; color: var(--tekst-secundair); margin-bottom: 1.5rem; }
.cta-meta { font-size: 0.75rem; color: var(--tekst-meta); margin-top: 0.75rem; }

/* ── Filter pills ── */
.filter-pill {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.875rem; border-radius: var(--radius-badge);
    font-size: 0.75rem; font-weight: 600; text-decoration: none;
    background: var(--achtergrond-card); color: var(--tekst-secundair);
    border: 1px solid var(--border-standaard);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-pill:hover { border-color: var(--kleur-link); color: var(--kleur-link); }

.filter-pill-actief {
    background: var(--kleur-link); color: white; border-color: var(--kleur-link);
}

.filter-pill-actief:hover { opacity: 0.9; color: white; }

/* ── Test-kaarten (overzicht) ── */
.test-kaart {
    display: block; text-decoration: none;
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.25rem; transition: box-shadow 0.15s, transform 0.1s;
}

.test-kaart:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.test-kaart-gedaan { opacity: 0.65; }

.test-kaart-inner { display: flex; align-items: flex-start; gap: 0.875rem; }

.test-kaart-icon { font-size: 1.75rem; flex-shrink: 0; margin-top: 0.125rem; }

.test-kaart-titel {
    font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 0.25rem; line-height: 1.3;
}

.test-kaart-badge-gedaan {
    display: inline-block; font-size: 0.6875rem; font-weight: 600;
    padding: 0.0625rem 0.5rem; border-radius: var(--radius-badge); margin-left: 0.375rem;
    background: var(--flash-succes-bg); color: var(--flash-succes-tekst);
    border: 1px solid var(--flash-succes-border);
}

.test-kaart-beschrijving {
    font-size: 0.8125rem; line-height: 1.5; color: var(--tekst-secundair);
    margin-bottom: 0.5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.test-kaart-meta { font-size: 0.75rem; color: var(--tekst-meta); display: flex; gap: 0.375rem; }

/* ── Test intro pagina ── */
.intro-hero {
    background: linear-gradient(135deg, var(--kleur-link-licht), white 60%);
    border: 1px solid var(--border-standaard); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); padding: 2.5rem; text-align: center;
}

.intro-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }

.intro-titel {
    font-family: 'Poppins', sans-serif; font-size: 1.75rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 0.75rem;
}

.intro-tekst {
    font-size: 0.9375rem; line-height: 1.7; color: var(--tekst-secundair);
    margin-bottom: 1rem; max-width: 36rem; margin-left: auto; margin-right: auto;
}

.intro-meta {
    display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
    font-size: 0.8125rem; color: var(--tekst-meta); margin-bottom: 1.5rem;
}

.intro-cta {
    display: inline-block; color: white; padding: 0.875rem 2.5rem;
    font-size: 1.0625rem; border-radius: var(--radius-knop); font-weight: 700;
}

.intro-categorie {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1rem 1.25rem;
}

.intro-categorie-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
}

.intro-categorie-tekst { font-size: 0.8125rem; color: var(--tekst-secundair); }
.intro-categorie-link { font-size: 0.8125rem; font-weight: 600; text-decoration: none; }

/* ── Dashboard ── */
.dash-header {
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;
}

.dash-titel {
    font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 0.375rem;
}

.dash-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.75rem; color: var(--tekst-meta); }

.dash-badge {
    padding: 0.125rem 0.625rem; border-radius: var(--radius-badge);
    background: var(--flash-info-bg); color: var(--flash-info-tekst);
    font-weight: 600; font-size: 0.6875rem;
}

.dash-cta {
    display: none; color: white; padding: 0.5rem 1.25rem;
    font-size: 0.875rem; border-radius: var(--radius-knop);
}

@media (min-width: 768px) { .dash-cta { display: inline-block; } }

.dash-gekocht-badge {
    display: inline-block; margin-top: 0.375rem; font-size: 0.6875rem; font-weight: 600;
    padding: 0.125rem 0.5rem; border-radius: var(--radius-badge);
    background: var(--flash-succes-bg); color: var(--flash-succes-tekst);
    border: 1px solid var(--flash-succes-border);
}

.dash-eindrapport-link {
    display: block; margin-top: 0.5rem; font-size: 0.75rem; font-weight: 700;
    text-decoration: none;
}
.dash-eindrapport-link:hover { text-decoration: underline; }

.dash-progress-track { height: 6px; background: var(--border-standaard); border-radius: 9999px; overflow: hidden; }
.dash-progress-fill { height: 100%; border-radius: 9999px; transition: width 0.5s ease; }

.dash-uitslag-kaart {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1rem 1.25rem; text-decoration: none;
    transition: box-shadow 0.15s, transform 0.1s;
}

.dash-uitslag-kaart:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }

.dash-uitslag-titel { font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--tekst-primair); margin-bottom: 0.125rem; }
.dash-uitslag-datum { font-size: 0.75rem; color: var(--tekst-meta); }
.dash-uitslag-link { font-size: 0.8125rem; font-weight: 600; color: var(--kleur-link); white-space: nowrap; }

.dash-leeg {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 3rem; text-align: center;
}

.dash-leeg-titel { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: var(--tekst-primair); margin-bottom: 0.375rem; }
.dash-leeg-tekst { font-size: 0.875rem; color: var(--tekst-secundair); margin-bottom: 1rem; }
.dash-leeg-cta { color: white; padding: 0.625rem 1.5rem; font-size: 0.875rem; border-radius: var(--radius-knop); }

/* ── Formulier-inputs (auth, profiel) ── */
.form-input {
    width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border-standaard);
    border-radius: var(--radius-knop); font-size: 0.875rem; color: var(--tekst-primair);
    transition: border-color 0.15s;
}

.form-input:focus { outline: none; border-color: var(--kleur-link); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

.form-label {
    display: block; font-size: 0.8125rem; font-weight: 600;
    color: var(--tekst-primair); margin-bottom: 0.25rem;
}

/* ── Error pagina's ── */
.error-pagina {
    text-align: center; padding: 4rem 1rem; max-width: 28rem; margin: 0 auto;
}

.error-code {
    font-family: 'Poppins', sans-serif; font-size: 4rem; font-weight: 800;
    color: var(--border-standaard); margin-bottom: 0.5rem;
}

.error-titel {
    font-family: 'Poppins', sans-serif; font-size: 1.25rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 0.5rem;
}

.error-tekst { font-size: 0.875rem; color: var(--tekst-secundair); margin-bottom: 1.5rem; }

.error-link {
    display: inline-block; color: var(--kleur-link); font-size: 0.875rem;
    font-weight: 600; text-decoration: none;
}

.error-link:hover { text-decoration: underline; }

/* ── Admin module ── */
.admin-titel {
    font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700;
    color: var(--kleur-admin); margin-bottom: 1.5rem;
}

.admin-sectie-kop {
    font-family: 'Poppins', sans-serif; font-size: 1.125rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 1rem;
}

.admin-stat-card {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.25rem; border-top: 3px solid var(--kleur-admin);
}

.admin-stat-label {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--tekst-meta); margin-bottom: 0.25rem;
}

.admin-stat-waarde {
    font-family: 'Poppins', sans-serif; font-size: 1.75rem; font-weight: 800;
    color: var(--tekst-primair); margin-bottom: 0.5rem;
}

.admin-stat-detail { font-size: 0.75rem; color: var(--tekst-secundair); line-height: 1.6; }

.admin-nav-kaart {
    display: flex; align-items: center; gap: 1rem; text-decoration: none;
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.25rem; transition: box-shadow 0.15s, transform 0.1s;
}

.admin-nav-kaart:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.admin-nav-icon { font-size: 1.5rem; flex-shrink: 0; }

.admin-nav-titel {
    font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 700;
    color: var(--kleur-admin); margin-bottom: 0.125rem;
}

.admin-nav-sub { font-size: 0.75rem; color: var(--tekst-meta); }

/* Admin tabellen */
.admin-tabel { width: 100%; font-size: 0.8125rem; }
.admin-tabel th {
    text-align: left; padding: 0.75rem 1rem; font-weight: 600;
    color: var(--tekst-meta); font-size: 0.6875rem; text-transform: uppercase;
    letter-spacing: 0.05em; border-bottom: 2px solid var(--border-standaard);
    background: var(--achtergrond-pagina);
}
.admin-tabel td {
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-standaard);
    color: var(--tekst-secundair);
}
.admin-tabel td:first-child { color: var(--tekst-primair); font-weight: 500; }
.admin-tabel tr:hover { background: var(--achtergrond-subtiel); }
.admin-tabel .cel-link { color: var(--kleur-link); text-decoration: none; }
.admin-tabel .cel-link:hover { text-decoration: underline; }
.admin-tabel .cel-meta { color: var(--tekst-meta); font-size: 0.75rem; }
.admin-tabel .cel-mono { font-family: monospace; font-size: 0.75rem; color: var(--tekst-meta); }
.admin-tabel .cel-succes { color: var(--flash-succes-tekst); font-size: 0.75rem; font-weight: 600; }
.admin-tabel .cel-fout { color: var(--flash-fout-tekst); font-size: 0.75rem; font-weight: 600; }

/* Admin badge/status */
.admin-badge-succes {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-badge);
    background: var(--flash-succes-bg); color: var(--flash-succes-tekst);
    font-size: 0.6875rem; font-weight: 600;
}
.admin-badge-waarschuwing {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-badge);
    background: var(--flash-waarschuwing-bg); color: var(--flash-waarschuwing-tekst);
    font-size: 0.6875rem; font-weight: 600;
}
.admin-badge-fout {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-badge);
    background: var(--flash-fout-bg); color: var(--flash-fout-tekst);
    font-size: 0.6875rem; font-weight: 600;
}

/* Admin detail grid */
.admin-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.admin-detail-label { font-size: 0.8125rem; color: var(--tekst-meta); }
.admin-detail-waarde { font-size: 0.8125rem; color: var(--tekst-primair); font-weight: 500; }

/* Knop destructief */
.knop-destructief {
    display: inline-block; padding: 0.375rem 0.75rem; border-radius: var(--radius-knop);
    font-size: 0.75rem; font-weight: 600; text-decoration: none;
    color: var(--kleur-destructief); border: 1px solid var(--kleur-destructief);
    background: none; cursor: pointer; transition: background 0.15s;
}
.knop-destructief:hover { background: var(--flash-fout-bg); }

/* Laadscherm overlay (test vragen + admin prompt) */
.laadscherm-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s;
    display: flex; align-items: center; justify-content: center;
}

.laadscherm-spinner {
    width: 48px; height: 48px; border: 4px solid var(--border-standaard);
    border-top-color: var(--kleur-primair); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.laadscherm-spinner-admin { border-top-color: var(--kleur-admin); }

@keyframes spin { to { transform: rotate(360deg); } }

.laadscherm-progress-track { height: 4px; background: var(--border-standaard); border-radius: 9999px; overflow: hidden; }
.laadscherm-progress-fill { height: 100%; width: 0%; background: var(--kleur-primair); border-radius: 9999px; transition: width 0.5s; }

/* ── Vervolg-kaarten (dashboard, uitslag, etc.) ── */
.vervolg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

@media (max-width: 767px) { .vervolg-grid { grid-template-columns: 1fr; } }

.vervolg-kaart {
    display: block; text-decoration: none; text-align: center;
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.5rem; transition: box-shadow 0.15s, transform 0.1s;
}

.vervolg-kaart:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.vervolg-icon { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.vervolg-titel { font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--tekst-primair); margin-bottom: 0.25rem; }
.vervolg-sub { font-size: 0.75rem; color: var(--tekst-meta); }

/* ── Platformbrede herbruikbare classes ── */

/* Terug-link (alle pagina's) */
.terug-link,
.uitslag-terug {
    display: inline-block; font-size: 0.875rem; margin-bottom: 1.5rem;
    color: var(--kleur-link); text-decoration: none;
}
.terug-link:hover,
.uitslag-terug:hover { text-decoration: underline; }

/* Kader-disclaimer (platformbreed) */
.kader-disclaimer {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #EFF6FF, #F0F9FF);
    border: 1px solid #BFDBFE;
    border-left: 4px solid #2563EB;
    border-radius: var(--radius-knop);
    font-size: 0.8125rem; line-height: 1.6; color: #1E40AF;
}

.kader-disclaimer-icon { font-size: 1.125rem; flex-shrink: 0; margin-top: 0.125rem; }

/* Kader-varianten (zelfde structuur, andere betekenis) */
.kader-succes {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    border: 1px solid #BBF7D0;
    border-left: 4px solid #16A34A;
    border-radius: var(--radius-knop);
    font-size: 0.8125rem; line-height: 1.6; color: #166534;
}

.kader-waarschuwing {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #FFFBEB, #FEF9C3);
    border: 1px solid #FDE68A;
    border-left: 4px solid #D97706;
    border-radius: var(--radius-knop);
    font-size: 0.8125rem; line-height: 1.6; color: #92400E;
}

/* Sectie-iconen (emoji voor h2 titels) */
.sectie-icoon { margin-right: 0.5rem; }

/* Pagina-titels */
.pagina-titel {
    font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700;
    color: var(--tekst-primair); margin-bottom: 0.5rem;
}

.pagina-subtitel {
    font-size: 0.875rem; color: var(--tekst-secundair); margin-bottom: 1.5rem;
}

/* Content containers */
.content-card {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 2rem;
}

.content-card-sm { padding: 1.5rem; }

/* Formulier classes */
.form-card {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.5rem;
}

.form-group { margin-bottom: 1rem; }

.form-link { color: var(--kleur-link); text-decoration: none; font-size: 0.875rem; }
.form-link:hover { text-decoration: underline; }

.form-hint { font-size: 0.75rem; color: var(--tekst-meta); margin-top: 0.25rem; }

.form-footer {
    text-align: center; font-size: 0.875rem; color: var(--tekst-secundair); margin-top: 1rem;
}

/* Succes/fout containers */
.status-succes {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 3rem; text-align: center;
}

.status-succes-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.status-succes-titel { font-family: 'Poppins', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--flash-succes-tekst); margin-bottom: 0.5rem; }
.status-succes-tekst { font-size: 0.875rem; color: var(--tekst-secundair); margin-bottom: 1.5rem; line-height: 1.6; }

.status-fout-titel { font-family: 'Poppins', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--flash-fout-tekst); margin-bottom: 0.5rem; }

/* Prose (lange tekst, juridisch, over-ons etc) */
.prose { font-size: 0.9375rem; color: var(--tekst-secundair); line-height: 1.7; }
.prose h2 { font-family: 'Poppins', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--tekst-primair); margin: 2rem 0 0.75rem; }
.prose h3 { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; color: var(--tekst-primair); margin: 1.5rem 0 0.5rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.375rem; }
.prose ul li { list-style-type: disc; }
.prose ol li { list-style-type: decimal; }
.prose a { color: var(--kleur-link); text-decoration: underline; }
.prose a:hover { color: var(--kleur-link-hover); }
.prose strong { color: var(--tekst-primair); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.8125rem; }
.prose th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border-standaard); color: var(--tekst-primair); font-weight: 600; }
.prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-standaard); }

/* ── Pricing kaarten ── */
.prijs-kaart {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.75rem; text-align: center; display: flex; flex-direction: column;
}

.prijs-kaart-populair { border: 2px solid var(--kleur-primair); position: relative; }

.prijs-badge {
    display: inline-block; font-size: 0.6875rem; font-weight: 700;
    padding: 0.125rem 0.75rem; border-radius: var(--radius-badge);
    background: var(--kleur-primair); color: white; margin-bottom: 0.5rem;
}

.prijs-label {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--tekst-meta); margin-bottom: 0.5rem;
}

.prijs-bedrag {
    font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 800;
    color: var(--tekst-primair); line-height: 1;
}

.prijs-bedrag-wrap { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-bottom: 0.25rem; }

.prijs-oud { font-size: 0.875rem; text-decoration: line-through; color: var(--tekst-meta); }

.prijs-sub { font-size: 0.75rem; color: var(--tekst-secundair); margin-bottom: 1rem; }

.prijs-bespaar { font-size: 0.75rem; font-weight: 600; color: var(--flash-succes-tekst); margin-bottom: 1rem; }

.prijs-features {
    list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: left;
    display: flex; flex-direction: column; gap: 0.375rem; flex-grow: 1;
}

.prijs-features li {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.8125rem; color: var(--tekst-secundair);
}

.prijs-knop {
    display: block; width: 100%; padding: 0.625rem; font-size: 0.875rem;
    font-weight: 600; border-radius: var(--radius-knop); text-align: center;
}

/* ── FAQ ── */
.faq-item {
    background: var(--achtergrond-card); border: 1px solid var(--border-standaard);
    border-radius: var(--radius-card); overflow: hidden;
}

.faq-vraag {
    padding: 1rem 1.25rem; cursor: pointer; list-style: none;
    font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 600;
    color: var(--tekst-primair);
}

.faq-vraag::-webkit-details-marker { display: none; }

.faq-antwoord {
    padding: 0 1.25rem 1rem; font-size: 0.8125rem; line-height: 1.6;
    color: var(--tekst-secundair);
}