/* Thema wit — proefversie. Draait de kleurvariabelen om: wit papier, zwarte inkt.
   Terug naar het donkere origineel: zet THEMA = "" in build.py en draai build.py. */

:root {
  --zwart: #FFFFFF;          /* achtergrond */
  --nacht: #F5F5F2;
  --krijt: #0A0A0A;          /* inkt */
  --wit: #1A1A19;
  --grijs-licht: #4D4D49;
  --grijs: #76766F;
  --grijs-donker: #E6E5E0;
  --lijn-donker: rgba(10, 10, 10, 0.12);
  --papier-zacht: #F4F4F1;   /* afwisselende band */
}

/* donkere ankers en lichte banden houden de originele variabelen */
.band-licht, .slot .slot__kaart, .hero .hero__video, .kop .kop__menu, .kop .kop__zweef,
.overzicht .mc, .werkwijze .werkwijze__stap, .diensten .diensten__stapel {
  --zwart: #0A0A0A; --nacht: #14110F; --krijt: #E9E8E3; --wit: #F2F2F2;
  --grijs-licht: #CFCFCF; --grijs: #8A8A86; --grijs-donker: #2A2A28;
  --lijn-donker: rgba(233, 232, 227, 0.12);
}
.band-licht { background: var(--papier-zacht); }
.reviews.band-licht, .werk.band-licht, .voorwie.band-licht { background: var(--papier-zacht); }

/* knoppen: zwart met witte tekst op wit, licht op de donkere ankers */
.knop { color: #fff; }
.band-licht .knop, .slot .knop, .hero__video .knop { color: #111; }
/* hover: zwarte knop wordt iets lichter zwart, lichte knoppen worden wit */
.knop:hover { background: #2A2A28; }
.band-licht .knop:hover, .slot .knop:hover, .hero__video .knop:hover, .kop .kop__menu .knop:hover { background: #fff; }


/* kop: donkere inkt, witte leesbaarheidsschaduw */
.kop .kop__rij { --kop-krijt: #0A0A0A; --kop-grijs: #5E5D59; --kop-rand: rgba(10, 10, 10, .16); }
.kop .kop__merk img { filter: invert(1); }
.kop .kop__balk::before { /* strakke witte balk met haarlijn in plaats van een verloop */
  inset: 0; background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(10, 10, 10, .07);
}
.kop .kop__menuknop { color: #fff; }
.kop .kop__badge-tekst strong { color: #0A0A0A; }
.kop .kop__menuknop:hover { background: #2a2a28; }

/* hero */
.hero::before { display: none; }
.hero .hero__regel > span { background: linear-gradient(180deg, #2a2a28 0%, #0A0A0A 55%, #000 100%); -webkit-background-clip: text; background-clip: text; }
.hero .hero__wie:hover { background: rgba(10,10,10,.05); }
.hero .hero__knop { box-shadow: none; }
.hero .hero__video { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px -32px rgba(0,0,0,.28); }

/* klanten: witte logo's zwart maken */
.klanten img[src*="-licht"] { filter: invert(1); }

/* klanten */
.klanten { --k-dim: rgba(10, 10, 10, .45); --k-lijn: rgba(10, 10, 10, .1); }
.klanten .klanten__reeks span { color: rgba(10, 10, 10, .85); }

/* Mission Control: wit dashboard met zachte rand */
.overzicht .mc { background: #fff; border-color: #E6E5E0; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 40px 90px -50px rgba(0,0,0,.25); }
.overzicht .mc__zij { background: #FAFAF8; }

/* diensten */
.diensten { --d-lijn: rgba(10, 10, 10, 0.12); --d-dim: rgba(10, 10, 10, 0.38); }
.diensten .diensten__stapel { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .35); }

/* werkwijze: sectie licht, de fotokaarten blijven donker */
.werkwijze { --ww-lijn: rgba(10, 10, 10, 0.12); --ww-dim: rgba(10, 10, 10, 0.2); }
.werkwijze .werkwijze__stap { --ww-dim: rgba(233, 232, 227, 0.28); }


/* Mission Control-kop: tweede regel gedimd grijs op wit */
.overzicht { --o-lijn: rgba(10, 10, 10, 0.12); }
.overzicht .overzicht__dim { color: rgba(10, 10, 10, .28); }

/* mobiel menu: knop blijft licht met donkere tekst */
.kop .kop__menu .knop { color: #111; }

/* kopbalk verschijnt direct en snel, zodat de hero-kop nooit door het logo schuift */
.kop .kop__balk::before { transition: opacity .18s ease; }

/* zwevende knop: effen zwart in plaats van grijs glas */
.kop .kop__zweef { background: #0A0A0A; color: #fff; border-color: #0A0A0A; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
.kop .kop__zweef:hover { background: #2A2A28; }
.kop .kop__zweef .kop__zweef-pijl { background: #fff; color: #0A0A0A; }
.kop .kop__zweef:hover .kop__zweef-pijl { transform: translateX(2px); }
/* kopbalk ondoorzichtig: geen wazige tekst erachter */
.kop .kop__balk::before { background: #F5F4F2; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* balk verschijnt meteen, zonder infaden */
.kop .kop__balk::before { transition: none; }