/* =========================================================================
   theme-dark.css — Korrekturen fuer den Dunkelmodus.
   Laedt ZULETZT, deshalb gewinnt hier alles ohne !important.
   Nur Farb-/Kontrastfragen: Geometrie gehoert in main.css bzw. pages.css.

   Jeder Block unten nennt den GEMESSENEN Wert vorher und nachher.
   Nachgemessen wird mit:
     NODE_PATH=/opt/homebrew/lib/node_modules/@playwright/mcp/node_modules \
       node tools/verify-contrast.js
   Grenzwerte: 4.5:1 Fliesstext, 3:1 grosse Schrift (>=24px bzw. >=19px fett)
   und 3:1 fuer die Kontur von Bedienelementen und den Fokusring.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Schutznetz gegen fest verdrahtete Textfarben im Markup.
      Die Rechtstextseiten (Impressum/Datenschutz/AGB/Barrierefreiheit)
      trugen ein inline gesetztes color:rgba(11,13,16,.75) — im Dunkelmodus
      Schwarz auf Schwarz, gemessen 1.00:1, der komplette Fliesstext war
      UNSICHTBAR. Die Templates sind inzwischen bereinigt; die Regel bleibt
      als Netz stehen, weil eine Inline-Farbe jede Stylesheet-Regel schlaegt
      und der Fehler damit unbemerkt zurueckkommen kann.
      Noch offen: templates/pages/guide.php und events.php tragen dieselbe
      Konstruktion (beide Seiten sind derzeit nicht geroutet, 404).
      1.00:1 -> 12.9:1
   ---------------------------------------------------------------------- */
html.site-dark [style*="color:rgba(11,13,16"],
html.site-dark [style*="color: rgba(11,13,16"],
html.site-dark [style*="color:rgba(11, 13, 16"],
html.site-dark .site-prose[style*="color:"] { color: rgba(242, 242, 243, .88) !important; }
html.site-dark .site-prose[style*="color:"] :is(h1, h2, h3, h4, strong, b) { color: var(--ink); }
html.site-dark .site-prose[style*="color:"] a { color: var(--accent); }

/* -------------------------------------------------------------------------
   2. Kursticker — das Minuszeichen lief in --s8 (#AE3160): 3.17:1.
      Der Farbton bleibt (gleiche Familie wie im Portfolio-Kreis), nur die
      Helligkeit steigt.  3.17:1 -> 5.1:1
      Das Pluszeichen (--s3 #3F84B2) misst dunkel 4.73:1 und bleibt.
   ---------------------------------------------------------------------- */
html.site-dark .ticker__chg.is-down { color: #D9557E; }

/* Pflichtfeld-Stern im Kontaktformular, gleiche Ursache. 3.17:1 -> 5.1:1 */
html.site-dark .field-label span { color: #D9557E; }

/* -------------------------------------------------------------------------
   3. KI-Hinweis in der Fusszeile — --ink-mute zusaetzlich auf opacity .8
      gedimmt: 3.87:1. Ohne die Zusatzdaempfung sitzt er bei 5.4:1 und ist
      immer noch unauffaellig.
   ---------------------------------------------------------------------- */
html.site-dark .site-footer__ai-note { opacity: 1; }

/* -------------------------------------------------------------------------
   4. Formularfelder — der Rahmen lief ueber --line (11 % Weiss) und war
      gegen den Seitengrund praktisch unsichtbar: 1.28:1. Die Fuellung
      (--surface) hebt sich mit 1.15:1 ebenfalls nicht ab, der Rahmen ist
      also das einzige, was das Feld ueberhaupt als Feld ausweist.
      1.28:1 -> 3.7:1
   ---------------------------------------------------------------------- */
html.site-dark .contact__form :is(input[type="text"], input[type="email"],
                                  input[type="tel"], input[type="number"],
                                  select, textarea) {
  border-color: rgba(242, 242, 243, .42);
}

/* Fokus im Formular: main.css schaltet die Umrandung ab und ersetzt sie
   durch einen 18-%-Schimmer (1.43:1). Textfelder sind ueber die auf --accent
   umspringende Rahmenfarbe noch erkennbar, die Ankreuzfelder haben gar
   keinen Rahmen und blieben damit ohne jeden Fokushinweis.
   1.43:1 -> 11.3:1 */
html.site-dark .contact__form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html.site-dark .contact__form :is(input, select, textarea):focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* Platzhaltertexte bleiben lesbar, nicht nur angedeutet. */
html.site-dark .contact__form ::placeholder { color: var(--ink-mute); opacity: 1; }

/* -------------------------------------------------------------------------
   5. Umrissknoepfe — Kontur aus --line-strong (24 % Weiss): 1.99:1. Sie
      haben keine Fuellung, die Kontur ist die ganze Schaltflaeche.
      Das Token selbst bleibt unangetastet: es zeichnet auch Trennlinien
      und Zierstriche, die ruhig sein sollen und keinen Grenzwert haben.
      1.99:1 -> 3.7:1
   ---------------------------------------------------------------------- */
html.site-dark :is(.btn--ghost, .site-btn--ghost, .site-btn-ghost, .site-nav__cta) {
  border-color: rgba(242, 242, 243, .42);
}

/* -------------------------------------------------------------------------
   6. Cookie-Karte — der Knopf "Ablehnen" traegt seine Kontur inline
      (rgba(255,255,255,.22) aus consent.js) und misst auf dem Glasgrund
      1.99:1. Auch hier ist !important der einzige Hebel.
      1.99:1 -> 4.2:1
   ---------------------------------------------------------------------- */
html.site-dark .site-consent-banner [data-site-consent-reject] {
  border-color: rgba(255, 255, 255, .45) !important;
}

/* -------------------------------------------------------------------------
   7. Portfolio-Kreis — die acht Segmente sind Links. main.css nimmt ihnen
      die Umrandung (.ring__seg { outline: none }) und zeigt den Fokus nur
      ueber brightness(1.08); gemessen 0.00:1, also gar kein Hinweis.
      Der Kreis ist auf der Startseite der Haupteinstieg in die acht Felder.
      0.00:1 -> 11.3:1
   ---------------------------------------------------------------------- */
html.site-dark .ring__link:focus-visible,
html.site-dark .ring__seg:focus-visible,
html.site-dark .ring__link:focus-within .ring__seg {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html.site-dark .ring__link:focus-visible .ring__seg,
html.site-dark .ring__seg:focus-visible {
  filter: brightness(1.45);
  opacity: 1;
}

/* -------------------------------------------------------------------------
   8. Seitenleiste (Spine) — die Gruppenueberschriften laufen auf
      opacity .62 und messen damit 2.77:1. Die Farbe bleibt, nur die
      Zusatzdaempfung faellt weg.  2.77:1 -> 5.4:1
   ---------------------------------------------------------------------- */
html.site-dark .spine__cap { opacity: 1; }

/* Der Aufwaertspfeil im Kursband. In main.css wurde er fuer den hellen Grund
   auf #2E6A93 abgedunkelt (dort waren es nur 3,8:1) — auf dunklem Grund ist
   genau das zu dunkel. Gemessen: 3,35:1 vorher, 5,1:1 jetzt. */
html.site-dark .ticker__chg.is-up { color: #6FB6D8; }