/* Ontwerp 5 · Zwart — donkere versie in de kleuren van het logo.
   Zwart met een vleugje navy (#07284E) als ondergrond, het logoblauw (#1453DB)
   voor knoppen en keuzes, goud (#E6A726) alleen als klein accent, net als in
   het logo. Werkt op d.html (class="thema-zwart" op <html>) en op boeken,
   offerte en vacatures als je uit ontwerp 5 komt (js/thema.js zet de class). */

.thema-zwart {
  color-scheme: dark;
  --z-bg: #04070D;
  --z-diep: #020409;
  --z-vlak: #0A1424;
  --z-veld: #0F1C30;
  --z-rand: #1A2A44;
  --z-rand-sterk: #2A3D5C;
  --z-tekst: #F1F5F9;
  --z-zacht: #9DAEC6;
  --z-blauw: #1453DB;
  --z-blauw-licht: #2A66F0;
  --z-blauw-tekst: #7FA4FF;
  --z-blauw-vlak: #0E2550;
  --z-goud: #E6A726;
}
.thema-zwart body { background: var(--z-bg); color: var(--z-tekst); }
.thema-zwart h1, .thema-zwart h2, .thema-zwart h3 { color: #FFFFFF; }
.thema-zwart a { color: var(--z-blauw-tekst); }
.thema-zwart a:hover { color: #FFFFFF; }

/* Knoppen: logoblauw is de hoofdknop */
.thema-zwart .knop--blauw { background: var(--z-blauw); color: #FFFFFF; }
.thema-zwart .knop--blauw:hover { background: var(--z-blauw-licht); color: #FFFFFF; }
.thema-zwart .knop--navy { background: var(--z-veld); color: #FFFFFF; border-color: var(--z-rand-sterk); }
.thema-zwart .knop--navy:hover { background: #142642; color: #FFFFFF; }
.thema-zwart .knop--wit { background: #FFFFFF; color: #07284E; }
.thema-zwart .knop--wit:hover { background: #E3EBFF; color: #07284E; }
.thema-zwart .knop--terug { background: transparent; color: #FFFFFF; border-color: var(--z-rand-sterk); }
.thema-zwart .knop--terug:hover { border-color: #FFFFFF; color: #FFFFFF; }

/* Kop en menu */
.thema-zwart .kop { background: var(--z-bg); border-bottom-color: var(--z-rand); }
.thema-zwart .kop__menu a { color: #E2E8F0; }
.thema-zwart .kop__menu a:hover { color: var(--z-blauw-tekst); }
.thema-zwart .menuknop { background: var(--z-vlak); border-color: var(--z-rand); }
.thema-zwart .menuknop svg { stroke: #FFFFFF; }
@media (max-width: 860px) {
  .thema-zwart .kop__menu { background: var(--z-bg); border-bottom-color: var(--z-rand); }
  .thema-zwart .kop__menu a { border-bottom-color: var(--z-rand); }
}

/* Hero en calculator */
.thema-zwart .hero { background: radial-gradient(110% 90% at 78% 12%, #0C2A5E 0%, #061632 32%, #02050B 70%); }
.thema-zwart .hero__intro { color: var(--z-zacht); }
.thema-zwart .kaart { background: var(--z-vlak); border: 1px solid var(--z-rand); box-shadow: 0 24px 56px rgba(0, 0, 0, .6); }
.thema-zwart .veld, .thema-zwart .veld > label, .thema-zwart .segment-groep legend { color: #E2E8F0; }
.thema-zwart .veld input, .thema-zwart .veld select, .thema-zwart .veld textarea { background-color: var(--z-veld); border-color: var(--z-rand-sterk); color: #FFFFFF; }
.thema-zwart .veld input::placeholder, .thema-zwart .veld textarea::placeholder { color: #6B7E9C; }
.thema-zwart .veld select { background-image: url('../img/pijl-wit.svg'); }
.thema-zwart .veld select:hover, .thema-zwart .veld input:hover, .thema-zwart .veld textarea:hover { border-color: #4A6188; }
.thema-zwart .veld select:focus, .thema-zwart .veld input:focus, .thema-zwart .veld textarea:focus { border-color: var(--z-blauw-licht); box-shadow: 0 0 0 3px rgba(42, 102, 240, .3); }
.thema-zwart .veld--fout input, .thema-zwart .veld--fout select, .thema-zwart .veld--fout textarea { border-color: #F87171; }
.thema-zwart .veld__fout { color: #F87171; }
.thema-zwart .postcode svg { color: var(--z-blauw-tekst); }
.thema-zwart .postcode__plaats { color: var(--z-zacht); }
.thema-zwart .postcode__plaats.gevonden { color: #34D399; }
.thema-zwart .postcode__plaats.onbekend { color: #F87171; }
.thema-zwart .calc__pijl { background: var(--z-veld); color: var(--z-blauw-tekst); }
.thema-zwart .segment { background: var(--z-veld); border-color: var(--z-rand); }
.thema-zwart .segment span { color: #E2E8F0; }
.thema-zwart .segment label:hover span { background: #142642; }
.thema-zwart .segment input:checked + span { background: var(--z-blauw); color: #FFFFFF; box-shadow: 0 2px 10px rgba(20, 83, 219, .45); }
.thema-zwart .calc__uitkomst { background: var(--z-veld); }
.thema-zwart .calc__prijs { color: #FFFFFF; }
.thema-zwart .calc__uitleg, .thema-zwart .klein { color: var(--z-zacht); }

/* Secties */
.thema-zwart .vertrouwen li { color: #E2E8F0; }
.thema-zwart .vertrouwen svg { color: var(--z-blauw-tekst); }
.thema-zwart .sectie__kop p { color: var(--z-zacht); }
.thema-zwart .blok { background: var(--z-vlak); border-color: var(--z-rand); }
.thema-zwart .blok p { color: var(--z-zacht); }
.thema-zwart .blok svg.icoon { color: var(--z-blauw-tekst); }
.thema-zwart .stappen { background: #071021; }
.thema-zwart .stappenlijst p { color: var(--z-zacht); }
.thema-zwart .buskaart { background: var(--z-vlak); border-color: var(--z-rand); }
.thema-zwart .buskaart__beeld { background: var(--z-veld); }
.thema-zwart .buskaart__tekst p { color: var(--z-zacht); }
.thema-zwart .buskaart__prijs { color: var(--z-blauw-tekst) !important; }
.thema-zwart .zakelijk { background: linear-gradient(135deg, #1453DB 0%, #0C4090 100%); }
.thema-zwart .zakelijk p { color: #DCE6FF; }
.thema-zwart .contact__info p { color: var(--z-zacht); }
.thema-zwart .melding { background: #052E1F; border-color: #065F46; color: #6EE7B7; }
.thema-zwart .voet { background: var(--z-diep); border-top: 1px solid var(--z-rand); }
.thema-zwart .voet__onder { border-top-color: var(--z-rand); }
.thema-zwart .voet a { color: #E2E8F0; }
.thema-zwart .voet a:hover { color: var(--z-blauw-tekst); }
.thema-zwart .belbalk { background: var(--z-bg); border-top-color: var(--z-rand); box-shadow: 0 -8px 20px rgba(0, 0, 0, .5); }
.thema-zwart .demovenster { background: var(--z-vlak); color: var(--z-tekst); }
.thema-zwart .demovenster p { color: var(--z-zacht); }

/* Boeken, offerte, vacatures */
.thema-zwart .boekkop { background: var(--z-diep); border-bottom: 1px solid var(--z-rand); }
.thema-zwart .boekkop__terug a { color: var(--z-goud); }
.thema-zwart .boeken { background: var(--z-bg); }
.thema-zwart .pagina-intro { color: var(--z-zacht); }
.thema-zwart .stapbalk li { background: var(--z-veld); color: var(--z-zacht); }
.thema-zwart .stapbalk li.actief { background: var(--z-blauw); color: #FFFFFF; }
.thema-zwart .stapbalk li.klaar { background: var(--z-rand-sterk); color: #FFFFFF; }
.thema-zwart .boeken legend { color: #FFFFFF; }
.thema-zwart .keuze span.keuze__vak { background: var(--z-veld); border-color: var(--z-rand-sterk); }
.thema-zwart .keuze strong { color: #FFFFFF; }
.thema-zwart .keuze small { color: var(--z-zacht); }
.thema-zwart .keuze input:checked + .keuze__vak { border-color: var(--z-blauw-licht); box-shadow: inset 0 0 0 1px var(--z-blauw-licht); background: var(--z-blauw-vlak); }
.thema-zwart .overzicht { background: var(--z-diep); border: 1px solid var(--z-rand); }
.thema-zwart .overzicht__totaal { border-top-color: var(--z-rand); }
.thema-zwart .overzicht a { color: var(--z-goud); }
.thema-zwart .samenvatting dt { color: var(--z-zacht); }
.thema-zwart .bevestiging svg { color: var(--z-blauw-tekst); }
.thema-zwart .bevestiging p { color: var(--z-zacht); }
.thema-zwart .akkoord input, .thema-zwart .rijbewijzen input { accent-color: var(--z-blauw-licht); }
.thema-zwart .offerte-stappen { color: var(--z-zacht); }
.thema-zwart .vacature { background: var(--z-vlak); border: 1px solid var(--z-rand); }
.thema-zwart .vacature p { color: var(--z-zacht); }
.thema-zwart .vacature ul { color: #E2E8F0; }
.thema-zwart .vacature__labels span { background: var(--z-blauw-vlak); color: var(--z-blauw-tekst); }
.thema-zwart .vacature--open { background: transparent; border-color: var(--z-rand-sterk); }

/* Chat en schakelaar */
.thema-zwart .mxchat__knop { background: var(--z-blauw); color: #FFFFFF; box-shadow: 0 10px 24px rgba(20, 83, 219, .5); }
.thema-zwart .mxchat__knop:hover { background: var(--z-blauw-licht); }
.thema-zwart .mxchat__venster { background: var(--z-vlak); box-shadow: 0 18px 44px rgba(0, 0, 0, .6); border: 1px solid var(--z-rand); }
.thema-zwart .mxchat__kop { background: var(--z-diep); }
.thema-zwart .mxchat__log, .thema-zwart .mxchat__snel, .thema-zwart .mxchat__invoer { background: #060C18; }
.thema-zwart .mxchat__invoer { border-top-color: var(--z-rand); }
.thema-zwart .mxchat__invoer input { background: var(--z-veld); border-color: var(--z-rand-sterk); color: #FFFFFF; }
.thema-zwart .mxchat__snel button { background: transparent; color: var(--z-blauw-tekst); border-color: var(--z-blauw-tekst); }
.thema-zwart .mxchat__snel button:hover { background: var(--z-blauw); border-color: var(--z-blauw); color: #FFFFFF; }
.thema-zwart .chat__bericht--bot { background: var(--z-veld); color: #FFFFFF; border-color: var(--z-rand); }
.thema-zwart .mxw, .thema-zwart .mxw__open { background: #0A1424; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }

/* Ontwerp 6 · Nachtblauw: dezelfde donkere stijl, maar in het navy van het logo
   in plaats van bijna zwart (html class="thema-zwart thema-nacht"). */
.thema-nacht {
  --z-bg: #050F1F;
  --z-diep: #030A16;
  --z-vlak: #0B1B33;
  --z-veld: #10233F;
  --z-rand: #1C3355;
  --z-rand-sterk: #2B4670;
  --z-zacht: #A3B4CC;
}
.thema-nacht .boekkop, .thema-nacht .mxchat__kop { background: #07284E; }

/* Tussenstops op de boekpagina */
.thema-zwart .boeken .tussenstop { border-left-color: var(--z-rand-sterk); }
.thema-zwart .tussenstop__weg { color: var(--z-zacht); }
.thema-zwart .tussenstop__weg:hover { color: #F87171; }
.thema-zwart .tussenstop-knop { border-color: var(--z-blauw-tekst); color: var(--z-blauw-tekst); }
.thema-zwart .tussenstop-knop:hover { background: var(--z-blauw-vlak); color: #FFFFFF; }
.thema-zwart .tussenstop-uitleg { color: var(--z-zacht); }

/* Lading op de boekpagina */
.thema-zwart .lading__uitleg, .thema-zwart .colli-kop small, .thema-zwart .colli-snel, .thema-zwart .colli__veld, .thema-zwart .colli__keer { color: var(--z-zacht); }
.thema-zwart .ladingsoort span, .thema-zwart .extra span { background: var(--z-veld); border-color: var(--z-rand-sterk); }
.thema-zwart .ladingsoort svg { color: var(--z-blauw-tekst); }
.thema-zwart .ladingsoort strong, .thema-zwart .extra span, .thema-zwart .colli-totaal { color: #FFFFFF; }
.thema-zwart .ladingsoort input:checked + span, .thema-zwart .extra input:checked + span { border-color: var(--z-blauw-licht); box-shadow: inset 0 0 0 1px var(--z-blauw-licht); background: var(--z-blauw-vlak); }
.thema-zwart .extra input:checked + span::before { color: var(--z-blauw-tekst); }
.thema-zwart .colli__veld input { background: var(--z-veld); border-color: var(--z-rand-sterk); color: #FFFFFF; }
.thema-zwart .colli__veld input::placeholder { color: #6B7E9C; }
.thema-zwart .colli__veld input:focus { border-color: var(--z-blauw-licht); box-shadow: 0 0 0 3px rgba(42, 102, 240, .3); }
.thema-zwart .colli__veld input.colli__fout { border-color: #F87171; }
.thema-zwart .colli__weg { color: var(--z-zacht); }
.thema-zwart .colli__weg:hover { background: var(--z-veld); color: #F87171; }
.thema-zwart .colli-snel button { background: var(--z-veld); border-color: var(--z-rand-sterk); color: var(--z-blauw-tekst); }
.thema-zwart .colli-knop { border-color: var(--z-blauw-tekst); color: var(--z-blauw-tekst); }
.thema-zwart .colli-knop:hover { background: var(--z-blauw-vlak); color: #FFFFFF; }
.thema-zwart .lading__tip { color: #FCD34D; }
.thema-zwart .colli { border-bottom-color: var(--z-rand); }

/* Live-site: foutmelding na versturen (geen verbinding, server weigert). */
.melding--fout { background: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }
.thema-zwart .melding--fout { background: #3B0D0D; border-color: #7F1D1D; color: #FCA5A5; }
.formulier__val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }