/* ============================================================================
   OPPITZHAUSER — DONKER THEMA + GLAS  (16-09-2026)
   Louis: "I want the whole background to be black, and then every text should
   be readable ... wherever you can use the glass design do that."
   Dit bestand ligt BOVENOP oh-schauraum.css en oh-chat.css (wordt als laatste
   geladen) en zet de tokens om plus elke plek waar een kleur los in een pagina
   staat. Eén regel weghalen in de <head> = de lichte site terug.
   ⛔ Schrijf hier geen nieuwe losse kleuren; alles wat kan loopt via de tokens.
   ========================================================================== */
:root{
  --paper:#0a0b0d; --paper-2:#121417;
  /* De derde kleur (Louis, 22-09-2026: "everything looks too black and white, one 3rd
     accent … light gray and dark blue from the logo"). Beide GEMETEN in opp-logo.png:
     het marineblauw #0a1432 van het woordmerk (op zwart iets opgelicht, anders is het
     zwart op zwart) en het lichte blauwgrijs #b8c8d0 van de ringen en "autohaus".
     Blauw = de belangrijke knop en alles wat dringt; blauwgrijs = labels, pijlen, de
     menumarkering, eenheden. ⛔ Geen derde tint erbij. */
  --blau:#1c2f6e; --blau-op:#28408c; --blau-rand:rgba(160,190,255,.36);
  --grau:#c2cfd8; --grau-zacht:rgba(194,207,216,.1);
  /* de kaartvulling is glas: doorschijnend wit; de blur staat op de kaarten zelf */
  --card:rgba(255,255,255,.05);
  --ink:#f5f5f3; --ink-2:#b6bbc3; --ink-3:#8a919b;
  --hair:rgba(255,255,255,.1);
  /* de donkere band wordt het marineblauw uit hun logo */
  --night:#0a1432; --night-2:#111c3f;
  /* zwarte knop op wit wordt witte knop op zwart */
  /* --marke voedt labels, pijlen, eenheden en de menumarkering: het blauwgrijs uit het logo */
  --marke:var(--grau); --marke-zacht:var(--grau-zacht); --marke-tekst:#0a1432; --marke-op:#e2e9ee;
  --glas:rgba(255,255,255,.05); --glas-rand:rgba(255,255,255,.11); --glas-op:rgba(255,255,255,.09);
}
/* ⚠️ oh-schauraum.css zet per merk --marke op het merkblauw (#002c5f / #0a1432): op zwart
   is dat onzichtbaar. Daarom hier per merk opnieuw het blauwgrijs; alleen het knopblauw
   volgt het merk (Hyundai iets helderder, dat is hun eigen #002c5f opgelicht). */
[data-marke="hyundai"]{ --marke:var(--grau); --marke-zacht:var(--grau-zacht); --marke-op:#e2e9ee; --marke-tekst:#002c5f;
  --night:#002c5f; --night-2:#00376f; --blau:#0f3f80; --blau-op:#164f9a; }
[data-marke="chery"]{ --marke:var(--grau); --marke-zacht:var(--grau-zacht); --marke-op:#e2e9ee; --marke-tekst:#0a1432; }
html{color-scheme:dark}
body{background:var(--paper);color:var(--ink)}
::selection{background:rgba(255,255,255,.25)}

/* ── het glas ──────────────────────────────────────────────────────────────
   Eén recept: doorschijnend wit, blur op wat eronder ligt, een dunne lichte
   rand en een lichtvangertje bovenaan. De blur alleen op een bureaublad: op
   een telefoon kost hij batterij en er ligt zelden iets onder om te vervagen. */
.kaart,.aanb>article,.werkdrie figure,.gw-prijs,.gw-snel div,.nu3 div,.melding,.belofte>div,
.maat div,.lijn>article,.eer>div,.trio article,.waarborg>div,.accu article,.hulp>div,.bag article,
.zub article,.weg__prijs,.weg__stap,.dienst>div,.ort>div,.mens>article,.plan,.gabel a,.stap,
.leist article,.regime li,.werkpaar figure,.reken__knop,.reken__uit,.slot>div,.verg__uit,.staat,
.ex__pil,.reken__vast,.jaar__band,.detbaan,.bouw button,.ovz a,.tijd__pil,.cheryaktie__fig{
  background:var(--glas);border-color:var(--glas-rand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
@media(min-width:761px){
  .kaart,.aanb>article,.gw-prijs,.gw-snel div,.nu3 div,.melding,.belofte>div,.maat div,.lijn>article,
  .eer>div,.trio article,.waarborg>div,.accu article,.hulp>div,.bag article,.zub article,.weg__prijs,
  .weg__stap,.dienst>div,.ort>div,.mens>article,.plan,.gabel a,.stap,.leist article,.regime li,
  .reken__knop,.reken__uit,.slot>div,.verg__uit,.staat,.reken__vast,.detbaan,.bouw button,.ovz a{
    backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
}
.kaart:hover,.ovz a:hover,.bouw button:hover{background:var(--glas-op)}
.reken__uit{background:rgba(255,255,255,.03)}
.reken,.slot,.dienst,.eer,.maat,.hulp,.waarborg,.regime,.gw-snel,.nu3,.belofte,.lijn{background:var(--hair)}
.mens__k--vlak,.plan__balk{background:rgba(255,255,255,.03)}
.stap.hier{border-color:rgba(255,255,255,.55);box-shadow:0 8px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}

/* balk, ankerbalk, mobiel menu */
/* ⚠️ Geen backdrop-filter op het mobiele menu: dat staat als position:fixed IN de
   balk, die zelf al een blur draagt, en een blur binnen een blur laat Chromium de
   eigen achtergrond van het menu niet tekenen (de pagina scheen erdoorheen, gemeten
   16-09). Het menu is daarom een dekkend vlak; de balk houdt zijn glas. */
.balk{background:rgba(10,11,13,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:1199px){.menu{background:#0d0e11;box-shadow:0 30px 60px rgba(0,0,0,.6)}}
/* ⛔ het woordmerk blijft hun eigen bestand: opp-logo-wit.png in de balk (hun witte
   variant, met de blauwe ringen in het embleem). Geen filter, geen omkleuring. */

/* knoppen: de volle knop (Termin vereinbaren, Anfragen, Buchen, Modelle ansehen) is het
   logoblauw met een lichte rand, zodat hij op zwart een eigen vlak is en niet het
   zoveelste witte blok. .knop--licht blijft wit: die draagt de donkere merklogo's. */
.knop--vol{background:linear-gradient(180deg,var(--blau-op),var(--blau));color:#fff;border-color:var(--blau-rand);
  box-shadow:0 8px 24px rgba(10,20,50,.45),inset 0 1px 0 rgba(255,255,255,.14)}
.knop--vol:hover{background:linear-gradient(180deg,#2f4aa0,var(--blau-op));border-color:rgba(160,190,255,.55);color:#fff}
.knop--licht{background:#fff;color:#0a0b0d;border-color:#fff}
.knop--licht:hover{background:#e6e6e6;border-color:#e6e6e6}
.knop--lijn{background:var(--glas);border-color:rgba(255,255,255,.38);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.knop--lijn:hover{background:#fff;color:#0a1432;border-color:#fff}
.knop--glas{background:var(--glas);border-color:rgba(255,255,255,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.balk .knop--vol,.film .knop--vol{box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14)}
.spring:focus{background:#fff;color:#0a0b0d}
/* de vlag op een kaart (NEUWAGEN, VORFÜHRWAGEN …): blauwgrijs met marine tekst */
.wagen__vlag,.kaart__vlag{background:var(--grau);color:#0a1432}
/* de pil boven een kop (sofort verfügbar, 0 % Leasing): blauw glas, dringend maar rustig */
.nu{background:rgba(28,47,110,.6);border-color:var(--blau-rand);color:#fff}
a.nu:hover{background:rgba(40,64,140,.7);border-color:rgba(160,190,255,.6)}
/* de pil op de startpagina zet zichzelf op gefrost zwart; ook die wordt blauw glas */
html .film--start .film__in .nu{background:rgba(28,47,110,.55);border-color:var(--blau-rand)}
html .film--start .film__in a.nu:hover{background:rgba(40,64,140,.7)}
/* de gekozen stap in een reeks */
.stap.hier{border-color:var(--blau-rand);background:rgba(28,47,110,.35)}

/* groen "sofort verfügbar" op zwart */
.staat--hier b,.kaart__staat--hier,.wagen__staat--hier,.ex__pil{color:#7fe0a6}
.staat--hier{border-color:rgba(95,208,138,.35);background:rgba(95,208,138,.08)}
.ex__pil{background:rgba(95,208,138,.1);border-color:rgba(95,208,138,.35)}

/* keuzelijsten en invoervelden */
.zeef select,.reken select,.verg__kies select{background:var(--glas);color:var(--ink);border-color:var(--glas-rand)}
select option{background:#121417;color:#f5f5f3}
.reken__raming{background:rgba(255,255,255,.04)}
.reken__staaf{background:rgba(255,255,255,.12)}

/* ── plekken waar een PAGINA zijn eigen kleur zet (die <style> staat ná dit bestand
   en wint dan op gelijke specificiteit); daarom hier met html ervoor ─────────── */
/* de oranje werkplaatskaart (termin): het token --sein-zacht was licht crème */
html body{--sein-zacht:rgba(210,105,27,.14)}
html .gabel a.gabel--werk{border-color:rgba(210,105,27,.55)}
html .gabel a.gabel--werk .gabel__ken i{background:rgba(255,255,255,.9)}
html .melding--let{border-left-color:#e8853a}
/* "Jetzt geöffnet" op de contactpagina: het lichte groen zet #166b40, op glas 2,1:1 */
html .nu3 .open{color:#7fe0a6}
/* de werkbank-tegel op het overzicht: was --marke (nu wit) met witte tekst erop */
html .ovz--werk a{background:#0a1432;color:#fff}
html .ovz--werk a:hover{background:#111c3f}
/* de vlag op een kaart (startpagina zet hem zelf op wit) */
html .kaart__vlag,html .wagen__vlag{background:var(--grau);color:#0a1432}
/* de planner (termin): de gekozen leistung en de gekozen dag in het logoblauw */
html .dienst button.aan,html .dag.aan{background:linear-gradient(180deg,var(--blau-op),var(--blau));color:#fff;border-color:var(--blau-rand)}
html .dienst button.aan span,html .dienst button.aan i,html .dag.aan em,html .dag.aan span{color:rgba(255,255,255,.78)}
html .dienst button.aan em{background:#fff;color:var(--blau)}
/* de "heute"-lijn op de jaarband van de servicepagina */
html .jaar__nu{background:#fff}
html .jaar__nu span{background:#17191d;color:#f5f5f3;border-color:rgba(255,255,255,.25)}

/* de donkere band: tekst iets helderder dan op de lichte site */
.blok--nacht .lood,.blok--nacht .merk{color:rgba(255,255,255,.8)}
.voet{background:#000}

/* productbeelden staan op het LICHTE huisdoek (#f6f8fa → #e7e9eb). Op zwart worden
   dat lichte tegels, zoals "product op wit" op de zwarte pagina's van Apple.
   Optie B (alle 65 vrijstellen op een donker doek) staat open op de nakijkpagina.
   Een dunne rand laat de tegel op het glas landen. */
.kaart__beeld,.wagen__beeld,.gal figure,.paar__fig,.zub figure,.tekening img,.aanb__beeld,.gw-beeld,
.lak__beeld,.trio figure,.bag figure,.detbaan figure,.leist figure,.tijd__fig{
  background:#e9ebee;border:1px solid rgba(255,255,255,.06)}
.lakgroot,.draai{background:linear-gradient(168deg,#e9ebee,#d9dcdf)}

/* ── secties met een beeld of een stille lus erachter (om en om) ─────────── */
.blok--beeld{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.blok--beeld>.mid{position:relative;z-index:2}
.blok--beeld .achter{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:70% 50%;transform:scale(1.04)}
/* geen vlak over het hele beeld maar een verloop van links dat de tekst draagt;
   rechts blijft het beeld vrij. Wit op de tekstkolom: rekenkundig minstens 11:1 */
.blok--beeld::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,.8) 38%,rgba(10,11,13,.3) 62%,rgba(10,11,13,.05) 100%)}
.blok--beeld h2,.blok--beeld h3{color:#fff}
.blok--beeld .lood,.blok--beeld p{color:rgba(255,255,255,.82)}
.blok--beeld .merk{color:rgba(255,255,255,.72)}
.blok--beeld .tab td{border-color:rgba(255,255,255,.14)}
.blok--beeld .tab td:first-child{color:rgba(255,255,255,.64)}
@media(max-width:760px){
  .blok--beeld .achter{object-position:60% 50%;opacity:.5}
  .blok--beeld::before{background:linear-gradient(180deg,rgba(10,11,13,.65),rgba(10,11,13,.93))}
}
@media(prefers-reduced-motion:reduce){.blok--beeld video.achter{display:none}}
/* koppen die woord voor woord komen (oh-beweging.js) */
.w-in{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.w-in.aan{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.w-in{opacity:1;transform:none;transition:none}}

/* ── de livechat ─────────────────────────────────────────────────────────── */
.ch-bel{background:rgba(22,24,29,.72);color:#fff;border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.35)}
.ch-bel:hover{background:rgba(40,43,50,.85)}
.ch-bel:focus-visible{outline-color:#fff}
.ch-paneel{background:rgba(18,20,23,.94);color:var(--ink);border-color:var(--glas-rand);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 12px 30px rgba(0,0,0,.5),0 30px 80px rgba(0,0,0,.5)}
.ch-kop{background:#0a1432;color:#fff}
.ch-stroom{background:transparent}
.ch-r--haus{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--ink)}
.ch-r--gast{background:var(--blau-op);color:#fff}
.ch-tippt span{background:rgba(255,255,255,.55)}
.ch-wagen{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.ch-wagen__b{background:#e9ebee}
.ch-wagen__t small,.ch-wagen__w{color:var(--ink-2)}
.ch-wagen__p,.ch-wagen__t a{color:#fff}
.ch-keuze{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.ch-keuze:hover{background:#fff;color:#0a1432}
.ch-invoer{background:transparent;border-top-color:rgba(255,255,255,.1)}
.ch-invoer input{background:rgba(255,255,255,.06);color:var(--ink);border-color:rgba(255,255,255,.14)}
.ch-invoer input::placeholder{color:var(--ink-3)}
.ch-invoer input:focus{outline-color:#fff}
.ch-stuur{background:linear-gradient(180deg,var(--blau-op),var(--blau));color:#fff;border:1px solid var(--blau-rand)}
.ch-voet{background:transparent;color:var(--ink-3)}
.ch-voet a{color:#fff}
.ch-poort{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.ch-poort__t{color:var(--ink)}
.ch-poort__v{background:rgba(0,0,0,.35);color:var(--ink);border-color:rgba(255,255,255,.2)}
.ch-poort__v:focus{outline-color:#fff;border-color:#fff}
.ch-poort__v.is-fout{background:rgba(192,57,43,.15);border-color:#e0705f}
.ch-poort__ok{color:var(--ink-2)}
.ch-poort__ok input{accent-color:var(--blau-op)}
.ch-poort__ok a,.ch-poort__k2 a{color:#fff}
.ch-poort__f{color:#f08a7a}
.ch-poort__k{background:linear-gradient(180deg,var(--blau-op),var(--blau));color:#fff;border:1px solid var(--blau-rand)}
.ch-poort__k:hover{background:var(--blau-op)}
.ch-poort__k2{color:var(--ink-3)}

/* ── de filterbalk (Louis, 24-09-2026: "in a light grey-ish so it highlights a bit more") ──
   Een licht blauwgrijs vlak uit het logo (--grau) op de zwarte pagina, met marine tekst en
   witte keuzelijsten. Alleen de balk met keuzelijsten (oh-lager, oh-start); de knoppenbalk op
   oh-fahrzeuge is een andere vorm. html ervoor: de <style> van de pagina staat ná dit bestand. */
html .zeef:has(select){background:linear-gradient(180deg,#dfe6ec,#cbd6de);border:1px solid rgba(255,255,255,.5);
  border-radius:14px;padding:1.1rem 1.2rem 1.2rem;box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7)}
html .zeef:has(select) label{color:#1c2f6e}
html .zeef:has(select) select{background:#fff;color:#0a1432;border-color:rgba(10,20,50,.18)}
html .zeef:has(select) select:focus{border-color:#28408c;box-shadow:0 0 0 3px rgba(40,64,140,.22)}
html .zeef:has(select) select option{background:#fff;color:#0a1432}
html .zeef:has(select) .zeef__tel{color:#0a1432}
html .zeef:has(select) .zeef__wis{color:#28408c;text-decoration:underline;text-underline-offset:3px}
html .zeef:has(select) .zeef__wis:hover{color:#0a1432}