/* ============================================================
   4DWARE dark mode — volgt de systeeminstelling van desktop/smartphone
   Licht thema (huisstijl v1.5) blijft de basis en het default.
   Dit bestand voegt een donker thema toe dat automatisch actief
   wordt zodra het besturingssysteem op "donker" staat
   (prefers-color-scheme: dark). Off Black bg · Off White tekst ·
   Active Red accent — dezelfde drie huisstijlkleuren.
   ============================================================ */
:root{color-scheme:light}

@media (prefers-color-scheme: dark){

  :root{
    color-scheme:dark;
    --black:#f5f5f5;              /* was: donkere tekst → nu lichte tekst */
    --white:#0a0a0a;              /* was: lichte achtergrond → nu donkere achtergrond */
    --surface:#161616;
    --surface-2:#1d1d1d;
    --border:rgba(245,245,245,.13);
    --text:#f5f5f5;
    --text-muted:rgba(245,245,245,.62);
    --red-soft:rgba(255,80,0,.16);
  }

  html{background:#0a0a0a}       /* voorkomt witte rand bij overscroll */

  /* Header — donker glas, logo geïnverteerd (zelfde truc als de footer) */
  .site-header{background:rgba(10,10,10,.92);border-bottom:1px solid var(--border)}
  .brand-img{mix-blend-mode:normal;filter:invert(1) hue-rotate(180deg) brightness(1.04)}

  /* Partnerlogo's — al grijs, nu ook geïnverteerd voor donkere achtergrond */
  .trust-strip .container img{filter:grayscale(1) invert(1) hue-rotate(180deg)}
  .trust-strip .container img:hover{filter:grayscale(1) invert(1) hue-rotate(180deg)}
  .trust-strip span{color:rgba(245,245,245,.45)}
  .trust-strip{border-bottom-color:rgba(245,245,245,.08)}

  /* Tekst- en lijstaccenten die in de basisstijl hardcoded donker waren */
  .lead{color:rgba(245,245,245,.60)}
  .checks li::before{color:rgba(245,245,245,.50)}
  .hero-meta{border-top-color:rgba(245,245,245,.10)}
  .card,.step,.info-tile{border-color:rgba(245,245,245,.10)}
  .faq details{border-top-color:rgba(245,245,245,.12)}
  .video-play{color:#f5f5f5}

  /* Knoppen en formulieren */
  .btn-ghost{border-color:rgba(245,245,245,.35)}
  input,select,textarea{background:#161616;border-color:rgba(245,245,245,.28)}
  .form-error{background:rgba(230,57,70,.12);border-color:#e63946;color:#ff9aa4}
  .form-card{box-shadow:0 1px 3px rgba(0,0,0,.4)}

  /* Donkere banden (CTA + footer) blijven Off Black — huisstijl */
  .cta-band{background:#0a0a0a;color:#f5f5f5}
  .cta-band h2{color:#f5f5f5}
  .cta-band .btn-ghost:hover{background:#f5f5f5;border-color:#f5f5f5;color:#0a0a0a}
  .site-footer{background:#0a0a0a}
  .footer-grid h4{color:#f5f5f5}
  .footer-brand{color:#f5f5f5 !important}

  /* Beelden — schaduw naar zwart, rand iets lichter */
  .hero-img{border-color:rgba(245,245,245,.10);box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .section-img{box-shadow:0 6px 20px rgba(0,0,0,.40)}
}