/* ==========================================================================
   Dunkelmodus der Website-Vorschau

   Die Farbwerte selbst kommen aus tokens.css, jede Rolle behält ihre
   Bedeutung. Hier stehen nur die Stellen, an denen eine Regel eine helle
   Umgebung voraussetzt: weiße Schrift auf der Markenfarbe zum Beispiel
   funktioniert nachts nicht mehr, weil Primary dann die helle Farbe ist.

   Wird nach allen Sprachdateien geladen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schaltflächen: nachts ist Primary hell, also braucht die Schrift den
   tiefen Grund statt Weiß.
   -------------------------------------------------------------------------- */
[data-modus="dunkel"] .gf .gf-btn--primaer { --btn-fg: var(--inverse); }
[data-modus="dunkel"] .gf .gf-btn--primaer:hover,
[data-modus="dunkel"] .gf .gf-btn--primaer.ist-hover { --btn-bg: var(--primary-light); --btn-rand: var(--primary-light); --btn-fg: var(--inverse); }
[data-modus="dunkel"] .gf .on-dark .gf-btn--primaer { --btn-bg: var(--primary); --btn-fg: var(--inverse); --btn-rand: var(--primary); }
[data-modus="dunkel"] .gf .on-dark .gf-btn--primaer:hover { --btn-bg: var(--primary-light); --btn-rand: var(--primary-light); }

/* Design 02 setzt die Tintenfarbe als Schaltfläche, nachts ist sie hell */
[data-modus="dunkel"] .gf[data-design="2"] .gf-btn--primaer { --btn-bg: var(--text); --btn-rand: var(--text); --btn-fg: var(--bg); }
[data-modus="dunkel"] .gf[data-design="2"] .gf-btn--primaer:hover { --btn-bg: var(--primary); --btn-rand: var(--primary); --btn-fg: var(--inverse); }
/* Design 03 arbeitet mit dem tiefen Block, der bleibt auch nachts richtig */
[data-modus="dunkel"] .gf[data-design="3"] .gf-btn--primaer { --btn-bg: var(--primary-dark); --btn-rand: var(--primary-dark); --btn-fg: var(--text-inverse); }
[data-modus="dunkel"] .gf[data-design="3"] .gf-btn--primaer:hover { --btn-fg: var(--text-inverse); --btn-bg: var(--primary-dark); }
[data-modus="dunkel"] .gf[data-design="3"] .gf-btn--sekundaer:hover { --btn-bg: var(--primary-dark); --btn-fg: var(--text-inverse); }
[data-modus="dunkel"] .gf[data-design="5"] .gf-btn--primaer .gf-btn__pfeil { background: color-mix(in oklab, var(--inverse) 22%, transparent); }

/* Gefüllte Zustände, die bisher Weiß annahmen */
[data-modus="dunkel"] .gf .gf-segment button[aria-pressed="true"],
[data-modus="dunkel"] .gf .gf-chip input:checked + span,
[data-modus="dunkel"] .gf .gf-struktur__ebene:nth-child(1),
[data-modus="dunkel"] .gf[data-design="4"] .gf-tab[aria-selected="true"],
[data-modus="dunkel"] .gf[data-design="5"] .gf-tab[aria-selected="true"] { color: var(--inverse); }
[data-modus="dunkel"] .gf[data-design="4"] .gf-tab[aria-selected="true"] .gf-ikonfeld,
[data-modus="dunkel"] .gf[data-design="5"] .gf-tab[aria-selected="true"] .gf-ikonfeld {
  --ikonfeld-bg: color-mix(in oklab, var(--inverse) 18%, transparent); --ikonfeld-farbe: var(--inverse);
}
[data-modus="dunkel"] .gf .gf-check__box .ikon { color: var(--inverse); }
[data-modus="dunkel"] .gf .gf-schalter__bahn::after { background: var(--text); }
[data-modus="dunkel"] .gf[data-design="3"] .gf-struktur__ebene:nth-child(1) { color: var(--inverse); }

/* --------------------------------------------------------------------------
   Flächen und Linien
   -------------------------------------------------------------------------- */
/* Design 01: das Raster liegt nachts als Lichtlinie auf dem Grund */
[data-modus="dunkel"] .gf[data-design="1"] { --raster: color-mix(in oklab, var(--text) 6%, transparent); --raster-haupt: color-mix(in oklab, var(--text) 11%, transparent); }
/* Design 03: die Kennziffer war eine Kontur in Primary Dark */
[data-modus="dunkel"] .gf[data-design="3"] .gf-karte__id { -webkit-text-stroke-color: var(--primary-light); }
[data-modus="dunkel"] .gf[data-design="3"][data-karten="b"] .gf-karte:hover { box-shadow: 6px 6px 0 var(--primary); }
[data-modus="dunkel"] .gf[data-design="3"] .gf-fuss__riese { -webkit-text-stroke-color: color-mix(in oklab, var(--text-inverse) 20%, transparent); }
/* Design 04: Panels brauchen nachts eine sichtbare Kante statt eines Schattens */
[data-modus="dunkel"] .gf[data-design="4"] {
  --schatten-karte: 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent), 0 18px 40px -30px #000;
  --schatten-hover: 0 1px 0 color-mix(in oklab, var(--text) 9%, transparent), 0 26px 50px -28px #000;
}
[data-modus="dunkel"] .gf[data-design="4"] .gf-karte,
[data-modus="dunkel"] .gf[data-design="4"] .gf-prozess,
[data-modus="dunkel"] .gf[data-design="4"] .gf-tabs__liste,
[data-modus="dunkel"] .gf[data-design="4"] .gf-tabs__text,
[data-modus="dunkel"] .gf[data-design="4"] .gf-kpi,
[data-modus="dunkel"] .gf[data-design="4"] .gf-module,
[data-modus="dunkel"] .gf[data-design="4"] .gf-cta__form { border: 1px solid var(--c-linie); }
/* Design 05: weiche Schatten verschwinden nachts, die Kante übernimmt */
[data-modus="dunkel"] .gf[data-design="5"] {
  --schatten-karte: 0 0 0 1px color-mix(in oklab, var(--text) 9%, transparent);
  --schatten-hover: 0 0 0 1px color-mix(in oklab, var(--primary) 45%, transparent);
}
[data-modus="dunkel"] .gf[data-design="5"] .gf-kopf__innen { box-shadow: 0 0 0 1px var(--c-linie); }

/* Bilder etwas zurücknehmen, damit sie nicht aus der dunklen Fläche springen */
[data-modus="dunkel"] .gf .gf-karte__medien img { filter: brightness(0.85) contrast(1.02) saturate(0.95); }
[data-modus="dunkel"] .gf .gf-bild__rahmen img { filter: brightness(0.8) contrast(1.04) saturate(0.94); }
[data-modus="dunkel"] .gf[data-design="1"] .gf-bild__rahmen img { filter: grayscale(1) contrast(1.02) brightness(0.8); }
[data-modus="dunkel"] .gf .gf-hero__foto { filter: brightness(0.82) contrast(1.04); }
[data-modus="dunkel"] .gf[data-design="1"] .gf-hero__foto { filter: grayscale(1) brightness(0.72) contrast(1.05); }
[data-modus="dunkel"] .gf[data-design="3"] .gf-hero__foto { filter: grayscale(1) contrast(1.2) brightness(0.7); mix-blend-mode: screen; }
[data-modus="dunkel"] .gf[data-design="3"] .gf-bild__rahmen img,
[data-modus="dunkel"] .gf[data-design="3"] .gf-karte__medien img { mix-blend-mode: screen; filter: grayscale(1) contrast(1.1) brightness(0.62); }

/* Formularfelder heben sich nachts über die Fläche, nicht über den Rahmen */
[data-modus="dunkel"] .gf .gf-input { background: color-mix(in oklab, var(--surface) 70%, var(--inverse)); }
[data-modus="dunkel"] .gf .gf-input:focus { background: var(--surface-elevated); }