/* ==========================================================================
   Woszidlo Website: Dunkler Modus (Umschalter in der Navigation)
   --------------------------------------------------------------------------
   Seit 30.09.2026: Statt einer eigenen dunklen Website (woszidlo-dunkel-valueate,
   abgeschaltet) schaltet ein Knopf in der Navigation um. Alle Regeln greifen nur,
   wenn <html data-modus="dunkel"> gesetzt ist; das setzt ein kleines Skript im
   <head> (aus baue-nav.py) vor dem ersten Bild, damit nichts hell aufblitzt.
   Standard bleibt hell (Ollis Entscheidung 17.06.), die Wahl merkt sich der
   Browser.

   Herkunft: dunkel.css vom 29./30.07. (reine Farbumkehr über der hellen Basis),
   ergänzt um die Bausteine seit Juli (Projektseiten, farbige Logowand, Team,
   Video). Wer einen neuen Baustein baut, prüft ihn in beiden Modi.
   ========================================================================== */

html[data-modus="dunkel"] {
  color-scheme: dark;
  --anthrazit:#EDEDEA;    /* war die dunkle Textfarbe, jetzt hell */
  --grau:#A6A6A0;         /* Sekundärtext */
  --silber:#3A3A36;       /* Rahmen */
  --hellgrau:#212120;     /* Sektionsflächen */
  --rot-text:#DEA6AE;     /* Markenrot hat auf dunkel nur 1,7:1, deshalb Rosé */
  --rot-tint:#2C1C1E;
}
html[data-modus="dunkel"] body { background:#1B1B19; }

/* ---------- Startseite: weiße Karten und Flächen ---------- */
html[data-modus="dunkel"] :is(.band, .leistung, .uvv .karte, .produkt, details.aufklapp, .team .person,
  .ref, input, select, textarea, .ref .bild) { background:#262623; }
html[data-modus="dunkel"] :is(input, select, textarea) { color:#EDEDEA; }

/* Produktfotos sind auf weißen Grund aufbereitet: Fläche bleibt hell (Lichtkasten) */
html[data-modus="dunkel"] .produkt .foto { background:#fff; }

/* Lieferantenlogos sind seit 28.09. farbig (Ollis Wunsch, die Kunden erkennen die
   Markenfarben). Auf dunkler Kachel verschwänden schwarze Logos wie Beissbarth,
   deshalb bleibt die Kachel hell und wirkt wie ein Schild; nur die Beschriftung dunkelt. */
html[data-modus="dunkel"] .kachel { background:#F4F4F2; border-color:#F4F4F2; }
html[data-modus="dunkel"] .kachel .zu { color:#5B5B5B; }
html[data-modus="dunkel"] .partner a { background:#F4F4F2; padding:6px 10px; display:inline-flex; }
/* die hellen Logo-Felder kosten 20px Breite je Logo; kleinerer Abstand hält vier Logos in einer Zeile (Balzer, 22.10.2026) */
html[data-modus="dunkel"] .partner .wrap { gap:28px; }

/* ---------- Navigation und Aufklappmenü (alle Seiten) ---------- */
html[data-modus="dunkel"] nav { background:rgba(27,27,25,.88); border-bottom-color:rgba(58,58,54,.6); }
html[data-modus="dunkel"] nav .gruppe .menue { background:rgba(38,38,35,.97); border-color:rgba(58,58,54,.8); }
html[data-modus="dunkel"] .mobil-menue { background:rgba(27,27,25,.98) !important; }
html[data-modus="dunkel"] .burger span { background:#EDEDEA; }

/* Das Nav-Logo gibt es für dunklen Grund (sonst verschwindet die Unterzeile).
   Pfad relativ zu dieser Datei, stimmt dadurch auch in den Unterordnern. */
html[data-modus="dunkel"] nav .marke img { content:url("assets/logo-auf-dunkel.png"); }

/* ---------- Hero: der weiße Verlauf über dem Video dreht auf dunkel ---------- */
html[data-modus="dunkel"] .hero .scrim { background:linear-gradient(90deg,
    rgba(27,27,25,.97) 0%, rgba(27,27,25,.90) 26%,
    rgba(27,27,25,.60) 48%, rgba(27,27,25,0) 78%); }
html[data-modus="dunkel"] .hero h1 { text-shadow:0 2px 26px rgba(0,0,0,.55); }

/* Laufband-Kanten, die waren hart auf Weiß gerechnet */
html[data-modus="dunkel"] .band::before { background:linear-gradient(90deg,#262623,rgba(38,38,35,0)); }
html[data-modus="dunkel"] .band::after  { background:linear-gradient(270deg,#262623,rgba(38,38,35,0)); }

/* Buttons */
html[data-modus="dunkel"] .btn-hell { background:transparent; color:#EDEDEA; border:1px solid #6E6E67; }
html[data-modus="dunkel"] .btn-hell:hover { border-color:#DEA6AE; color:#DEA6AE; }
html[data-modus="dunkel"] .btn-dunkel { background:#EDEDEA; color:#1B1B19; }
html[data-modus="dunkel"] .btn-dunkel:hover { background:#fff; color:#1B1B19; }

/* ---------- Unterseiten: hart auf #fff gesetzte Kartenflächen ---------- */
html[data-modus="dunkel"] :is(.schritt .karte, .weiter a.schritt-karte, a.anleitung,
  .hero-band .rahmen, .bauart, .serie, .box) { background:#262623; }
/* Serien- und Freisteller-Fotos sind auf weißem Grund aufbereitet */
html[data-modus="dunkel"] :is(.serie .foto, .hero-band .rahmen.freisteller) { background:#fff; }

/* ---------- Referenz-Projektseiten (baue-referenzseiten.py) ---------- */
html[data-modus="dunkel"] .rp-pfeile button { background:#262623; color:#EDEDEA; border-color:#6E6E67; }
html[data-modus="dunkel"] .rp-pfeile button:hover { background:#EDEDEA; color:#1B1B19; }
html[data-modus="dunkel"] :is(.rp-text, .rp-cta) { background:#262623; }

/* ---------- Nachzieher aus der Sichtprüfung 30.09.2026 ---------- */
/* Markenrot #A4091E hat auf #1B1B19 nur 1,7:1. Für Überschriften und Knöpfe im
   dunklen Modus eine hellere Stufe desselben Rots (weiße Schrift darauf bleibt lesbar). */
html[data-modus="dunkel"] { --rot:#D0283F; --rot-hover:#E0445A; }
/* Bilderzahl auf den Referenzkarten: weiße Plakette mit (jetzt heller) Schrift */
html[data-modus="dunkel"] .ref .anzahl { background:rgba(27,27,25,.88); color:#EDEDEA; }
/* Vereinslogos (Sponsoring) sind für hellen Grund gestaltet */
html[data-modus="dunkel"] .sponsoring .vereinslogo:not(.leer) { background:#F4F4F2; padding:3px 5px; }
/* Karriere-Block (30.09.2026): Die helle Rot-Stufe ist für Schrift und Knöpfe gedacht.
   Als große Fläche wirkt sie grell, deshalb dort das Original-Markenrot wie im hellen Modus. */
html[data-modus="dunkel"] .karriere { background:#A4091E; }