/* ============================================
   Depeterpost Verhalen Club — Betoverd Woud Thema
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Grandstander:wght@700;900&family=Baloo+2:wght@400;700;800&family=Lora:ital,wght@0,400;1,400&display=swap');

/* ══ KLEUREN ══ */
:root {
  --groen:       #4CC97A;
  --groen-donker:#1B4D2E;
  --groen-mid:   #2D6A4F;
  --geel:        #F7C948;
  --geel-licht:  rgba(247,201,72,0.15);
  --oranje:      #F28C38;
  --paars:       #8B5CF6;
  --paars-licht: rgba(139,92,246,0.15);
  --roze:        #F472B6;
  --roze-licht:  rgba(244,114,182,0.15);
  --mint:        #34D399;
  --blauw:       #38BDF8;
  --blauw-licht: rgba(56,189,248,0.15);
  --rood:        #F87171;

  --tekst:       #F0FDF4;
  --tekst-zacht: #A7C4B5;

  --pagina-bg:   #1B4D2E;
  --kaart-bg:    #22633A;

  --rand:        rgba(76,201,122,0.3);
  --rand-licht:  rgba(255,255,255,0.1);

  --schaduw:       0 4px 16px rgba(0,0,0,0.25);
  --schaduw-hover: 0 8px 32px rgba(0,0,0,0.35);
  --radius:     24px;
  --radius-btn: 50px;
}

/* ══ GROEP-THEMA'S (leeftijdsadaptief — kleurpsychologie onderzoek 2022-2025) ══ */

/* Groep A: 6-8 jaar — "Warme Papierwereld"
   Wetenschappelijk: warme ivoor achtergrond = max leesbaarheid + emotionele veiligheid
   Nooit donkere achtergrond voor deze groep (ScienceDirect 2025) */
[data-groep="A"] {
  --groep-kleur:        #F28C38;
  --groep-licht:        rgba(242,140,56, 0.15);
  --groep-rand:         rgba(242,140,56, 0.35);
  --groep-focus:        rgba(242,140,56, 0.18);
  --schrijf-bg:         #FFFBF0;
  --schrijf-kaart:      #FFF8E1;
  --schrijf-tekst:      #3D2B1F;
  --schrijf-placeholder:#A89080;
  --schrijf-rand:       rgba(242,140,56, 0.35);
  --schrijf-focus-glow: rgba(242,140,56, 0.18);
  --schrijf-radius:     18px;
  --schrijf-fontsize:   1.1rem;
  --schrijf-lineheight: 1.9;
}

/* Groep B: 9-11 jaar — "Nachtelijk Atelier"
   Wetenschappelijk: donker marineblauw + paars stimuleert divergent denken
   Paars = "dromerig, creatief" bij deze groep (Lyu 2022) */
[data-groep="B"] {
  --groep-kleur:        #8B5CF6;
  --groep-licht:        rgba(139,92,246, 0.15);
  --groep-rand:         rgba(139,92,246, 0.3);
  --groep-focus:        rgba(139,92,246, 0.14);
  --schrijf-bg:         #141b2d;
  --schrijf-kaart:      #1e2a4a;
  --schrijf-tekst:      #e2e0ff;
  --schrijf-placeholder:#6b6b8a;
  --schrijf-rand:       rgba(139,92,246, 0.3);
  --schrijf-focus-glow: rgba(139,92,246, 0.14);
  --schrijf-radius:     16px;
  --schrijf-fontsize:   1rem;
  --schrijf-lineheight: 1.75;
}

/* Groep C: 12+ jaar — "Gefocuste Studio"
   Wetenschappelijk: dark mode verhoogt sessieduur bij adolescenten
   Tieners verwerpen actief kinderlijk design (Nielsen Norman 2024) */
[data-groep="C"] {
  --groep-kleur:        #4CC97A;
  --groep-licht:        rgba(76,201,122, 0.1);
  --groep-rand:         rgba(76,201,122, 0.2);
  --groep-focus:        rgba(76,201,122, 0.09);
  --schrijf-bg:         #0d1117;
  --schrijf-kaart:      #161b22;
  --schrijf-tekst:      #e6edf3;
  --schrijf-placeholder:#484f58;
  --schrijf-rand:       rgba(76,201,122, 0.18);
  --schrijf-focus-glow: rgba(76,201,122, 0.09);
  --schrijf-radius:     12px;
  --schrijf-fontsize:   0.95rem;
  --schrijf-lineheight: 1.7;
}

/* Groep-adaptieve hulpklassen */
[data-groep] .groep-accent        { color: var(--groep-kleur); }
[data-groep] .groep-bg            { background: var(--groep-licht); border-color: var(--groep-rand); }
[data-groep] .groep-rand          { border-color: var(--groep-rand) !important; }
[data-groep] .groep-voortgang     { background: var(--groep-kleur) !important; }

/* Groep A: Warme achtergrond voor schrijfvelden — WCAG 7:1 contrast (#3D2B1F op #FFFBF0) */
[data-groep="A"] .schrijf-kaart  { background: var(--schrijf-kaart); }
[data-groep="A"] .schrijf-veld,
[data-groep="A"] textarea.verhaal-textarea { background: var(--schrijf-bg); color: var(--schrijf-tekst); }

/* Groep B & C: Donkere schrijfomgeving */
[data-groep="B"] .schrijf-kaart,
[data-groep="C"] .schrijf-kaart  { background: var(--schrijf-kaart); }

/* ══ HOMEPAGE LANDING THEMA'S ══ */

body[data-pagina="landing"] {
  --landing-bg: #1B4D2E;
  --landing-accent: #4CC97A;
  --landing-accent-licht: rgba(76,201,122,0.15);
  --landing-accent-rand: rgba(76,201,122,0.3);
  --landing-glass-bg: rgba(255,255,255,0.06);
  --landing-glass-rand: rgba(255,255,255,0.12);
  --landing-tekst: #F0FDF4;
  --landing-tekst-zacht: rgba(167,196,181,0.75);
  --landing-orb-1: rgba(76,201,122,0.12);
  --landing-orb-2: rgba(247,201,72,0.08);
  --landing-stroke: #4CC97A;
  background-color: var(--landing-bg);
}

body[data-pagina="landing"][data-groep="A"] {
  --landing-bg: #FFFBF0;
  --landing-accent: #F28C38;
  --landing-accent-licht: rgba(242,140,56,0.15);
  --landing-accent-rand: rgba(242,140,56,0.35);
  --landing-glass-bg: rgba(0,0,0,0.04);
  --landing-glass-rand: rgba(242,140,56,0.25);
  --landing-tekst: #3D2B1F;
  --landing-tekst-zacht: rgba(61,43,31,0.7);
  --landing-orb-1: rgba(242,140,56,0.1);
  --landing-orb-2: rgba(247,201,72,0.08);
  --landing-stroke: #F28C38;
}

body[data-pagina="landing"][data-groep="B"] {
  --landing-bg: #141b2d;
  --landing-accent: #8B5CF6;
  --landing-accent-licht: rgba(139,92,246,0.15);
  --landing-accent-rand: rgba(139,92,246,0.3);
  --landing-glass-bg: rgba(255,255,255,0.06);
  --landing-glass-rand: rgba(139,92,246,0.3);
  --landing-tekst: #e2e0ff;
  --landing-tekst-zacht: rgba(226,224,255,0.7);
  --landing-orb-1: rgba(139,92,246,0.12);
  --landing-orb-2: rgba(99,102,241,0.08);
  --landing-stroke: #8B5CF6;
}

body[data-pagina="landing"][data-groep="C"] {
  --landing-bg: #0d1117;
  --landing-accent: #38BDF8;
  --landing-accent-licht: rgba(56,189,248,0.1);
  --landing-accent-rand: rgba(56,189,248,0.2);
  --landing-glass-bg: rgba(255,255,255,0.05);
  --landing-glass-rand: rgba(56,189,248,0.2);
  --landing-tekst: #e6edf3;
  --landing-tekst-zacht: rgba(230,237,243,0.7);
  --landing-orb-1: rgba(56,189,248,0.08);
  --landing-orb-2: rgba(76,201,122,0.06);
  --landing-stroke: #38BDF8;
}

/* ══ HOMEPAGE GRID (3-koloms voor spelmodi) ══ */

.homepage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

@media (max-width: 900px) {
  .homepage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Landing glass — uses landing vars */
body[data-pagina="landing"] .glass {
  background: var(--landing-glass-bg);
  border-color: var(--landing-glass-rand);
}

body[data-pagina="landing"] .glass:hover {
  background: var(--landing-glass-bg);
  border-color: var(--landing-accent-rand);
  filter: brightness(1.15);
}

/* Landing typografie per groep — family + sizing (spec Sectie 4) */

/* Groep A: Baloo 2, larger sizes (default font, only size overrides needed) */
body[data-pagina="landing"][data-groep="A"] .hero-titel { font-size: 2.2rem; font-weight: 900; }
body[data-pagina="landing"][data-groep="A"] .bento-naam { font-size: 1.4rem; font-weight: 800; }
body[data-pagina="landing"][data-groep="A"] .bento-tekst,
body[data-pagina="landing"][data-groep="A"] .hero-tekst { font-size: 1rem; line-height: 1.8; }

/* Groep B: Grandstander titels, medium sizes */
body[data-pagina="landing"][data-groep="B"] .hero-titel,
body[data-pagina="landing"][data-groep="B"] .bento-naam {
  font-family: 'Grandstander', cursive;
}
body[data-pagina="landing"][data-groep="B"] .hero-titel { font-size: 2rem; font-weight: 900; }
body[data-pagina="landing"][data-groep="B"] .bento-naam { font-size: 1.3rem; font-weight: 700; }
body[data-pagina="landing"][data-groep="B"] .bento-tekst,
body[data-pagina="landing"][data-groep="B"] .hero-tekst { font-size: 0.95rem; line-height: 1.75; }

/* Groep C: Grandstander titels + Lora body, compact sizes */
body[data-pagina="landing"][data-groep="C"] .hero-titel,
body[data-pagina="landing"][data-groep="C"] .bento-naam {
  font-family: 'Grandstander', cursive;
}
body[data-pagina="landing"][data-groep="C"] .hero-titel { font-size: 1.8rem; font-weight: 700; }
body[data-pagina="landing"][data-groep="C"] .bento-naam { font-size: 1.2rem; font-weight: 700; }
body[data-pagina="landing"][data-groep="C"] .bento-tekst,
body[data-pagina="landing"][data-groep="C"] .hero-tekst {
  font-family: 'Lora', serif;
  font-size: 0.9rem; line-height: 1.7;
}

/* ══ GLASSMORPHISM UTILITIES ══ */

/* Donker thema (standaard + Groep B + C) */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* Licht thema (Groep A) */
[data-groep="A"] .glass {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(242, 140, 56, 0.25);
}

.glass:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

[data-groep="A"] .glass:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(242, 140, 56, 0.4);
}

/* ══ BENTO-GRID SYSTEEM ══ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
}

/* Bento cel groottes */
.bento-1 { grid-column: span 1; }
.bento-2 { grid-column: span 2; }
.bento-3 { grid-column: span 3; }
.bento-4 { grid-column: span 4; }
.bento-6 { grid-column: span 6; }
.bento-tall { grid-row: span 2; }

/* Mobiel: alles op 1 kolom */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bento-1, .bento-2, .bento-3,
  .bento-4, .bento-6 { grid-column: span 1; }
  .bento-tall { grid-row: span 1; }
}

/* Bento kaart basis */
.bento-card {
  border-radius: var(--radius);
  padding: 24px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--schaduw-hover);
}

/* ══ SCROLL-ENTRANCE ANIMATIES ══ */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: geen animaties */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bento-card:hover,
  .glass:hover {
    transform: none;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ FONT PER LEEFTIJDSGROEP ══ */

/* Standaard (niet ingelogd) */
h1, h2, h3 { font-family: 'Grandstander', cursive; }

/* Groep A: Baloo 2 — rond en vrolijk */
[data-groep="A"] h1,
[data-groep="A"] h2,
[data-groep="A"] h3 {
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
}

/* Groep B: Grandstander — speels maar stoerder */
[data-groep="B"] h1,
[data-groep="B"] h2,
[data-groep="B"] h3 {
  font-family: 'Grandstander', cursive;
  font-weight: 700;
}

/* Groep C: Grandstander titels + Lora body */
[data-groep="C"] h1,
[data-groep="C"] h2,
[data-groep="C"] h3 {
  font-family: 'Grandstander', cursive;
  font-weight: 700;
}

[data-groep="C"] p,
[data-groep="C"] li,
[data-groep="C"] .body-text {
  font-family: 'Lora', serif;
  font-weight: 400;
}

/* ══ PAGINA-THEMA'S ══ */

/* LANDING (index.html): Betoverd Woud — behoud bestaande groene sfeer, geen overrides nodig */

/* LOGIN / TOESTEMMING: Kalm, vertrouwenwekkend — diep marineblauw/indigo
   Doel: ook ouders gerust stellen, geen groene speelsheid, serieus en veilig */
body[data-pagina="login"] {
  background-color: #0D1B3E;
}
body[data-pagina="login"]::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(99,102,241,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139,92,246,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(13,27,62,0.75) 0%, transparent 70%);
}
body[data-pagina="login"] header {
  background: linear-gradient(135deg, #060E24, #0D1B3E, #060E24);
  border-bottom-color: rgba(99,102,241,0.2);
}
body[data-pagina="login"] nav {
  background: rgba(6,14,36,0.96);
  border-bottom-color: rgba(99,102,241,0.12);
}
body[data-pagina="login"] nav a:hover  { background: rgba(99,102,241,0.15); color: #818CF8; }
body[data-pagina="login"] nav a.actief { background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; }
body[data-pagina="login"] .sectie {
  background: rgba(22,32,68,0.65);
  border-image: linear-gradient(90deg, #6366F1, #8B5CF6) 1;
}
body[data-pagina="login"] input[type="text"],
body[data-pagina="login"] input[type="email"],
body[data-pagina="login"] input[type="password"] {
  background: rgba(6,14,36,0.8);
  border-color: rgba(99,102,241,0.3);
  color: #E0E7FF;
}
body[data-pagina="login"] input[type="text"]:focus,
body[data-pagina="login"] input[type="email"]:focus,
body[data-pagina="login"] input[type="password"]:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}
body[data-pagina="login"] footer {
  background: linear-gradient(135deg, #04090F, #060E24);
  border-top-color: rgba(99,102,241,0.1);
}

/* ADMIN: Zakelijk dashboard — donker charcoal/slate, functioneel
   Doelgroep: volwassen beheerder, geen kinderpalet */
body[data-pagina="admin"] {
  background-color: #0F1117;
}
body[data-pagina="admin"]::before {
  background:
    radial-gradient(ellipse at 25% 25%, rgba(59,130,246,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(75,85,99,0.07) 0%, transparent 50%);
}
body[data-pagina="admin"] header {
  background: linear-gradient(135deg, #070B12, #0F1117, #070B12);
  border-bottom-color: rgba(59,130,246,0.2);
}
body[data-pagina="admin"] nav {
  background: rgba(7,11,18,0.97);
  border-bottom-color: rgba(59,130,246,0.12);
}
body[data-pagina="admin"] nav a:hover  { background: rgba(59,130,246,0.12); color: #60A5FA; }
body[data-pagina="admin"] nav a.actief { background: linear-gradient(135deg, #1D4ED8, #3B82F6); color: #fff; }
body[data-pagina="admin"] .sectie {
  background: rgba(22,27,37,0.75);
  border-image: linear-gradient(90deg, #3B82F6, #6366F1) 1;
}
body[data-pagina="admin"] .verhaal-kaart,
body[data-pagina="admin"] .pending-kaart { background: rgba(22,27,37,0.7); }
body[data-pagina="admin"] footer {
  background: linear-gradient(135deg, #030508, #070B12);
  border-top-color: rgba(59,130,246,0.08);
}

/* SESSIE: Samen schrijven — warmer groen + sociaal energie
   Cyan accent voor samenwerking, oranje warmte, meer levendig */
body[data-pagina="sessie"] {
  background-color: #152219;
}
body[data-pagina="sessie"]::before {
  background:
    radial-gradient(ellipse at 10% 15%, rgba(56,189,248,0.14) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(242,140,56,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(21,34,25,0.65) 0%, transparent 70%);
}
body[data-pagina="sessie"] header {
  background: linear-gradient(135deg, #091510, #152219, #091510);
  border-bottom-color: rgba(56,189,248,0.22);
}
body[data-pagina="sessie"] nav {
  background: rgba(9,21,16,0.96);
  border-bottom-color: rgba(56,189,248,0.15);
}
body[data-pagina="sessie"] nav a:hover  { background: rgba(56,189,248,0.12); color: #38BDF8; }
body[data-pagina="sessie"] nav a.actief { background: linear-gradient(135deg, #0EA5E9, #38BDF8); color: #072330; }
body[data-pagina="sessie"] .sectie {
  background: rgba(21,34,25,0.65);
  border-image: linear-gradient(90deg, #38BDF8, #4CC97A, #F7C948) 1;
}
body[data-pagina="sessie"] footer {
  background: linear-gradient(135deg, #040C07, #091510);
  border-top-color: rgba(56,189,248,0.1);
}

/* GALERIJ: Verhalebibliotheek — amber/goud dominant, serene bibliotheeksfeer
   Inspiratie, trots op eigen werk, donker amber-groen */
body[data-pagina="galerij"] {
  background-color: #1A1C10;
}
body[data-pagina="galerij"]::before {
  background:
    radial-gradient(ellipse at 5% 10%, rgba(247,201,72,0.13) 0%, transparent 45%),
    radial-gradient(ellipse at 95% 90%, rgba(76,201,122,0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(26,28,16,0.70) 0%, transparent 70%);
}
body[data-pagina="galerij"] header {
  background: linear-gradient(135deg, #0D0F07, #1A1C10, #0D0F07);
  border-bottom-color: rgba(247,201,72,0.25);
}
body[data-pagina="galerij"] nav {
  background: rgba(13,15,7,0.96);
  border-bottom-color: rgba(247,201,72,0.12);
}
body[data-pagina="galerij"] nav a:hover  { background: rgba(247,201,72,0.12); color: #F7C948; }
body[data-pagina="galerij"] nav a.actief { background: linear-gradient(135deg, #D4A017, #F7C948); color: #1A1600; }
body[data-pagina="galerij"] .sectie {
  background: rgba(26,28,16,0.65);
  border-image: linear-gradient(90deg, #F7C948, #4CC97A) 1;
}
body[data-pagina="galerij"] .verhaal-kaart {
  background: rgba(26,28,16,0.6);
  border-top-color: var(--geel);
}
body[data-pagina="galerij"] .verhaal-kaart:nth-child(2n) { border-top-color: var(--groen); }
body[data-pagina="galerij"] .verhaal-kaart:nth-child(3n) { border-top-color: var(--oranje); }
body[data-pagina="galerij"] .verhaal-kaart:nth-child(4n) { border-top-color: var(--paars); }
body[data-pagina="galerij"] footer {
  background: linear-gradient(135deg, #060603, #0D0F07);
  border-top-color: rgba(247,201,72,0.1);
}

/* DOSSIER: Persoonlijk, groepskleur prominent
   Achtergrond via data-groep, kaarten persoonlijker */
body[data-pagina="dossier"] .sectie {
  border-image: linear-gradient(90deg, var(--groep-kleur, #4CC97A), var(--geel)) 1;
}
body[data-pagina="dossier"] header {
  border-bottom-color: rgba(var(--groep-kleur, 76,201,122), 0.25);
}

/* SCHRIJF: Schrijfomgeving — achtergrond per groep via data-groep
   Pagina-bg past zich aan de groep aan */
body[data-pagina="schrijf"][data-groep="A"] { background-color: #F5F0E8; }
body[data-pagina="schrijf"][data-groep="B"] { background-color: #0E1525; }
body[data-pagina="schrijf"][data-groep="C"] { background-color: #090D14; }
body[data-pagina="schrijf"][data-groep="A"]::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(242,140,56,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(247,201,72,0.08) 0%, transparent 50%);
}
body[data-pagina="schrijf"][data-groep="B"]::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(139,92,246,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(56,73,126,0.10) 0%, transparent 50%);
}
body[data-pagina="schrijf"][data-groep="C"]::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(76,201,122,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(30,50,30,0.08) 0%, transparent 50%);
}
body[data-pagina="schrijf"][data-groep="A"] header {
  background: linear-gradient(135deg, #2C1A0E, #4A2E18, #2C1A0E);
  border-bottom-color: rgba(242,140,56,0.3);
}
body[data-pagina="schrijf"][data-groep="B"] header {
  background: linear-gradient(135deg, #0A0F1E, #141b2d, #0A0F1E);
  border-bottom-color: rgba(139,92,246,0.25);
}
body[data-pagina="schrijf"][data-groep="C"] header {
  background: linear-gradient(135deg, #060809, #0d1117, #060809);
  border-bottom-color: rgba(76,201,122,0.15);
}
body[data-pagina="schrijf"][data-groep="A"] nav { background: rgba(44,26,14,0.97); border-bottom-color: rgba(242,140,56,0.2); }
body[data-pagina="schrijf"][data-groep="B"] nav { background: rgba(10,15,30,0.97); border-bottom-color: rgba(139,92,246,0.15); }
body[data-pagina="schrijf"][data-groep="C"] nav { background: rgba(6,8,9,0.97); border-bottom-color: rgba(76,201,122,0.1); }

/* OPDRACHT: Schrijfopdracht bekijken — groep-adaptief accent */
body[data-pagina="opdracht"] .sectie {
  border-image: linear-gradient(90deg, var(--groep-kleur, #4CC97A), var(--geel)) 1;
}

/* ══ RESET ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══ BODY ══ */
body {
  font-family: 'Baloo 2', sans-serif;
  background-color: var(--groen-donker);
  color: var(--tekst);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Subtiele decoratie achtergrond */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 5% 10%, rgba(76,201,122,0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 95% 90%, rgba(247,201,72,0.10) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(27,77,46,0.6) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ══ CONTAINER ══ */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* ══ HEADER ══ */
header {
  background: linear-gradient(135deg, #0D2B1A, #1B4D2E, #0D2B1A);
  padding: 36px 20px 28px;
  text-align: center;
  position: relative;
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  border-bottom: 2px solid rgba(76,201,122,0.2);
}
header::before {
  content: '🌿 🍃 🌲 🦋 ✨';
  position: absolute;
  font-size: 60px;
  opacity: 0.06;
  top: 0; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.site-title {
  font-family: 'Grandstander', cursive;
  font-size: clamp(2rem, 6vw, 3.5rem);
  background: linear-gradient(135deg, #F7C948, #F28C38, #F7C948);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(247,201,72,0.4));
  letter-spacing: 1px;
  line-height: 1.2;
  position: relative; z-index: 1;
  animation: logoGlow 4s ease-in-out infinite;
}
@keyframes logoGlow {
  0%,100% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(247,201,72,0.4)); }
  50%      { background-position: 100% 50%; filter: drop-shadow(0 0 32px rgba(242,140,56,0.6)); }
}
.site-subtitle {
  font-size: 1rem;
  color: rgba(76,201,122,0.85);
  font-weight: 700;
  margin-top: 6px;
  position: relative; z-index: 1;
}

/* ══ NAVIGATIE ══ */
nav {
  background: rgba(13,43,26,0.95);
  backdrop-filter: blur(12px);
  padding: 10px 20px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(76,201,122,0.15);
}
nav a {
  color: rgba(167,196,181,0.8);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.88rem;
  margin: 0 4px;
  padding: 7px 16px;
  border-radius: var(--radius-btn);
  transition: all 0.2s ease;
  display: inline-block;
}
nav a:hover {
  background: rgba(76,201,122,0.15);
  color: var(--groen);
  transform: translateY(-2px);
}
nav a.actief {
  background: linear-gradient(135deg, var(--groen), var(--mint));
  color: #0D2B1A;
  font-weight: 900;
  box-shadow: 0 3px 12px rgba(76,201,122,0.35);
}
.nav-login {
  float: right; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px !important;
  background: rgba(76,201,122,0.1) !important;
  border: 1px solid rgba(76,201,122,0.25) !important;
  border-radius: 50px !important;
  margin: 8px 0 !important;
}
.nav-agent {
  float: right; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px !important;
  background: rgba(247,201,72,0.1) !important;
  border: 1px solid rgba(247,201,72,0.25) !important;
  border-radius: 50px !important;
  margin: 8px 0 !important;
  cursor: default; color: #F7C948 !important;
  font-weight: 800; font-size: 0.9rem;
}
.nav-agent-uitloggen {
  float: right; display: inline-flex; align-items: center;
  padding: 6px 14px !important;
  background: rgba(248,113,113,0.08) !important;
  border: 1px solid rgba(248,113,113,0.2) !important;
  border-radius: 50px !important;
  margin: 8px 4px 8px 0 !important;
  color: rgba(248,113,113,0.7) !important;
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
}
.nav-agent-uitloggen:hover {
  background: rgba(248,113,113,0.15) !important;
  color: #F87171 !important;
}

/* ══ MAIN ══ */
main { padding: 36px 0 60px; position: relative; z-index: 1; }

/* ══ SECTIES ══ */
.sectie {
  background: rgba(34,99,58,0.6);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 22px;
  box-shadow: var(--schaduw);
  border: 2px solid var(--rand-licht);
  border-top: 4px solid;
  border-image: linear-gradient(90deg, var(--groen), var(--geel)) 1;
  border-image-slice: 1;
  transition: box-shadow 0.3s, transform 0.2s;
  position: relative; z-index: 1;
}
.sectie:hover {
  box-shadow: var(--schaduw-hover);
  transform: translateY(-4px);
}
.sectie-titel {
  font-family: 'Grandstander', cursive;
  font-size: 1.55rem;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  line-height: 1.2;
}
.sectie-titel.geel  { color: var(--geel); }
.sectie-titel.blauw { color: var(--blauw); }
.sectie-titel.roze  { color: var(--roze); }
.sectie-titel.paars { color: var(--paars); }
.sectie-titel.groen { color: var(--groen); }

/* ══ FORMULIEREN ══ */
.formulier { display: flex; flex-direction: column; gap: 14px; }

label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tekst-zacht);
  margin-bottom: 4px;
  display: block;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(76,201,122,0.25);
  border-radius: 14px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.95rem;
  color: var(--tekst);
  background: rgba(13,43,26,0.6);
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
  outline: none;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: rgba(167,196,181,0.5);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(76,201,122,0.2);
}
textarea { min-height: 120px; line-height: 1.7; }

/* ══ KNOPPEN ══ */
.knop {
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--radius-btn);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  text-align: center;
  line-height: 1.4;
}
.knop:hover  { transform: translateY(-3px); box-shadow: var(--schaduw-hover); }
.knop:active { transform: translateY(0); }
.knop:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Cursor-glow effect (HoverButton) */
.knop::before {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 65%);
  transform: translate(calc(var(--mx, -9999px) - 110px), calc(var(--my, -9999px) - 110px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 0;
}
.knop:hover::before { opacity: 1; }
.knop > * { position: relative; z-index: 1; }

/* Click-ripple effect (RippleButton) */
.knop-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: knopRipple 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 0;
}
@keyframes knopRipple {
  to { transform: scale(1); opacity: 0; }
}

.knop-geel   { background: var(--geel);   color: #1B2E05; }
.knop-oranje { background: var(--oranje);  color: #FFFFFF; }
.knop-roze   { background: var(--roze);   color: #FFFFFF; }
.knop-paars  { background: var(--paars);  color: #FFFFFF; }
.knop-blauw  { background: var(--blauw);  color: #0C2F44; }
.knop-groen  { background: var(--groen);  color: #0D2B1A; }
.knop-rood   { background: var(--rood);   color: #FFFFFF; }
.knop-gradient {
  background: linear-gradient(135deg, var(--groen), var(--mint), var(--geel));
  background-size: 200%;
  color: #0D2B1A;
  font-weight: 900;
  box-shadow: 0 4px 16px rgba(76,201,122,0.35);
  position: relative; overflow: hidden;
  animation: btnGrad 3s ease infinite;
}
@keyframes btnGrad { 0%,100%{background-position:0%} 50%{background-position:100%} }
.knop-gradient::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: glans 2.5s ease-in-out infinite;
}
@keyframes glans { 0%{left:-100%} 40%{left:150%} 100%{left:150%} }

/* ══ MELDINGEN ══ */
.melding-badge {
  background: var(--geel-licht);
  border: 2px dashed rgba(247,201,72,0.4);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--geel);
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.melding-succes {
  background: rgba(76,201,122,0.12);
  border: 2px solid rgba(76,201,122,0.3);
  border-radius: 14px;
  padding: 14px 18px;
  color: var(--groen);
  font-weight: 700;
  display: none;
  animation: popIn 0.3s ease;
}
.melding-fout {
  background: rgba(248,113,113,0.1);
  border: 2px solid rgba(248,113,113,0.3);
  border-radius: 14px;
  padding: 14px 18px;
  color: var(--rood);
  font-weight: 700;
  display: none;
  animation: popIn 0.3s ease;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══ VERHALEN KAARTEN ══ */
.verhaal-kaart {
  background: rgba(34,99,58,0.5);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: var(--schaduw);
  border: 2px solid var(--rand-licht);
  border-top: 4px solid var(--groen);
  transition: box-shadow 0.3s, transform 0.2s;
  position: relative; z-index: 1;
}
.verhaal-kaart:nth-child(2n) { border-top-color: var(--roze); }
.verhaal-kaart:nth-child(3n) { border-top-color: var(--geel); }
.verhaal-kaart:nth-child(4n) { border-top-color: var(--paars); }
.verhaal-kaart:hover { box-shadow: var(--schaduw-hover); transform: translateY(-4px); }
.verhaal-auteur { font-size: 0.85rem; color: var(--tekst-zacht); font-weight: 700; margin-bottom: 8px; }
.verhaal-tekst  { font-family: 'Lora', serif; font-size: 0.98rem; line-height: 1.85; color: var(--tekst); margin-bottom: 14px; }

/* ══ VERSIES ══ */
.versies-sectie { margin-top: 20px; padding-top: 18px; border-top: 2px dashed rgba(76,201,122,0.2); }
.versies-titel  { font-family: 'Grandstander', cursive; font-size: 1.1rem; color: var(--groen); margin-bottom: 12px; }
.versie-kaart   { background: var(--paars-licht); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; border-left: 4px solid var(--paars); }
.versie-naam    { font-weight: 800; font-size: 0.9rem; color: var(--paars); margin-bottom: 2px; }
.versie-datum   { font-size: 0.78rem; color: var(--tekst-zacht); margin-bottom: 6px; }
.versie-tekst   { font-size: 0.93rem; color: var(--tekst); line-height: 1.7; }
.versie-formulier {
  margin-top: 14px; padding: 20px;
  background: rgba(139,92,246,0.1); border-radius: 14px;
  border: 2px dashed rgba(139,92,246,0.3); display: none;
  animation: slideDown 0.3s ease;
}
.versie-formulier.zichtbaar { display: block; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.geen-versies { color: var(--tekst-zacht); font-style: italic; text-align: center; padding: 14px; }

/* ══ VIDEO ══ */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: var(--schaduw);
  margin-bottom: 8px;
  max-width: 420px;
}
.video-wrapper iframe,
.video-wrapper video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: none;
}
.video-stats { margin-top: 14px; font-size: 0.95rem; color: var(--tekst); }
.stars span  { font-size: 24px; cursor: pointer; transition: transform 0.2s; }
.stars span:hover { transform: scale(1.25); }

/* ══ BOLLETJES CHECKER ══ */
.checker-sectie { margin: 18px 0; }
.checker-titel  { font-weight: 800; color: var(--tekst-zacht); font-size: 0.9rem; margin-bottom: 10px; }
.bolletjes      { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bolletje-rij {
  display: flex; align-items: center; gap: 12px;
  background: rgba(13,43,26,0.4); border-radius: 12px;
  padding: 10px 14px; border: 2px solid var(--rand-licht);
  transition: all 0.3s ease;
}
.bolletje-rij.groen-rij { background: rgba(76,201,122,0.12); border-color: rgba(76,201,122,0.3); }
.bolletje-rij.rood-rij  { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); }
.bolletje {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2); flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); position: relative;
}
.bolletje.groen { background: var(--groen); border-color: #2f9e44; box-shadow: 0 0 10px rgba(76,201,122,0.5); }
.bolletje.groen::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #0D2B1A; font-size: 0.78rem; font-weight: 900; }
.bolletje.rood  { background: var(--rood); border-color: #c62828; }
.bolletje.rood::after  { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.78rem; font-weight: 900; }
.bolletje-label { font-size: 0.9rem; color: var(--tekst); font-weight: 700; }
.feedback-tekst {
  background: rgba(76,201,122,0.1); border-left: 4px solid var(--groen);
  padding: 10px 14px; border-radius: 10px; font-size: 0.9rem;
  color: var(--groen); margin-top: 8px; display: none;
}

/* ══ SCHRIJF TEXTAREA ══ */
.verhaal-textarea {
  width: 100%;
  min-height: 200px;
  padding: 16px;
  border: 2px solid var(--schrijf-rand, rgba(76,201,122,0.25));
  border-radius: var(--schrijf-radius, 16px);
  font-size: var(--schrijf-fontsize, 1rem);
  font-family: 'Baloo 2', sans-serif;
  line-height: var(--schrijf-lineheight, 1.7);
  resize: vertical;
  color: var(--schrijf-tekst, var(--tekst));
  background: var(--schrijf-bg, rgba(13,43,26,0.6));
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.verhaal-textarea:focus {
  border-color: var(--groep-kleur, var(--groen));
  box-shadow: 0 0 0 4px var(--schrijf-focus-glow, rgba(76,201,122,0.2));
}
.verhaal-textarea::placeholder { color: var(--schrijf-placeholder, rgba(167,196,181,0.5)); }
.teller { text-align: right; font-size: 0.82rem; color: var(--tekst-zacht); margin-top: 4px; font-weight: 700; }
.teller.bijna-vol { color: var(--oranje); }
.teller.vol       { color: var(--rood); }

/* ══ OPDRACHT KAART ══ */
.opdracht-kaart {
  background: linear-gradient(135deg, #0D2B1A, #1B4D2E);
  border: 2px solid rgba(247,201,72,0.25);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.opdracht-kaart h2 { color: var(--geel); margin-bottom: 14px; font-family: 'Grandstander', cursive; }
.opdracht-rij {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px;
  background: rgba(13,43,26,0.5); border-radius: 12px; padding: 11px 15px;
}
.opdracht-rij .label  { font-weight: 800; color: var(--tekst-zacht); font-size: 0.75rem; min-width: 90px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.opdracht-rij .waarde { font-size: 0.95rem; color: var(--tekst); font-weight: 700; }
.opdracht-tekst-vak   { background: rgba(76,201,122,0.1); border: 2px solid rgba(76,201,122,0.25); border-radius: 14px; padding: 16px 18px; margin: 14px 0; font-size: 1.05rem; color: var(--groen); line-height: 1.65; font-weight: 700; }

/* ══ ADMIN ══ */
.admin-header { background: linear-gradient(135deg, #0D2B1A, #1B4D2E); color: white; padding: 24px; border-radius: var(--radius); margin-bottom: 24px; text-align: center; border: 2px solid rgba(76,201,122,0.2); }
.admin-header h1 { font-family: 'Grandstander', cursive; font-size: 2rem; color: var(--geel); }
.teller-badge { display: inline-block; background: var(--roze); color: white; font-weight: 800; font-size: 0.82rem; padding: 3px 12px; border-radius: 20px; margin-left: 6px; }
.pending-kaart { background: rgba(34,99,58,0.5); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; box-shadow: var(--schaduw); border: 2px solid var(--rand-licht); border-top: 4px solid var(--oranje); }
.pending-kaart.type-verhaal { border-top-color: var(--groen); }
.pending-meta  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.pending-naam  { font-weight: 800; font-size: 1rem; color: var(--tekst); }
.pending-datum { font-size: 0.8rem; color: var(--tekst-zacht); margin-bottom: 8px; }
.type-label    { font-size: 0.78rem; padding: 3px 10px; border-radius: 20px; font-weight: 700; }
.type-label.idee    { background: var(--geel-licht); color: var(--geel); }
.type-label.verhaal { background: rgba(76,201,122,0.15); color: var(--groen); }
.pending-tekst { background: rgba(13,43,26,0.5); border-radius: 10px; padding: 12px 14px; font-size: 0.93rem; line-height: 1.7; color: var(--tekst); margin-bottom: 14px; border-left: 3px solid var(--groen); }
.actie-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.leeg-melding  { text-align: center; padding: 50px 20px; }
.leeg-melding .emoji { font-size: 3.5rem; display: block; margin-bottom: 10px; }
.leeg-melding p { font-size: 1rem; font-weight: 700; color: var(--tekst-zacht); }

/* ══ WINNAAR ══ */
.winnaar-badge { display: inline-block; background: linear-gradient(135deg, var(--geel), var(--oranje)); color: #1B2E05; font-weight: 900; font-size: 0.78rem; padding: 3px 12px; border-radius: 20px; }

/* ══ SPINNER ══ */
.laad-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(76,201,122,0.3); border-top-color: var(--groen); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ VOORTGANG ══ */
.voortgang-wrapper { background: rgba(255,255,255,0.08); border-radius: 10px; height: 10px; overflow: hidden; margin: 8px 0; }
.voortgang-balk    { height: 100%; background: linear-gradient(90deg, var(--groen), var(--mint), var(--geel)); border-radius: 10px; transition: width 0.5s ease; }

/* ══ FOOTER ══ */
footer {
  background: linear-gradient(135deg, #0A1F11, #0D2B1A);
  color: rgba(167,196,181,0.7);
  text-align: center;
  padding: 28px 20px;
  font-size: 0.9rem;
  margin-top: 40px;
  position: relative; z-index: 1;
  border-top: 1px solid rgba(76,201,122,0.1);
}
footer .quote        { font-family: 'Lora', serif; font-style: italic; font-size: 1.05rem; color: var(--geel); margin-bottom: 6px; }
footer .quote-auteur { font-size: 0.78rem; color: var(--groen); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
footer p { color: rgba(167,196,181,0.7); }
footer span { color: var(--roze); }
footer a { color: var(--geel); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ══ RESPONSIVE ══ */
@media (max-width: 600px) {
  .sectie        { padding: 18px; }
  .verhaal-kaart { padding: 18px; }
  nav a          { margin: 0 2px; font-size: 0.8rem; padding: 6px 10px; }
  .actie-knoppen { flex-direction: column; }
  .knop          { width: 100%; text-align: center; }
  .video-wrapper { max-width: 100%; }
}

/* ══ HULP KLASSEN ══ */
.tekst-midden { text-align: center; }
.tekst-zacht  { color: var(--tekst-zacht); }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.verborgen { display: none !important; }