/* ===========================================================================
   theme.css - ALLES KUNDENSPEZIFISCHE AN EINER STELLE

   Beim naechsten Kundenprojekt werden nur diese Datei, site.config.json und
   assets/img/ angefasst. Wenn irgendwo sonst ein Farbwert oder eine
   Schriftgroesse auftaucht, gehoert sie hierher zurueck.

   Pruefprobe (Phase 2, Schritt 3): grep -rn "#[0-9a-f]\{3,6\}" assets/css/layout.css
   darf nichts finden.

   Dark Mode ueberschreibt AUSSCHLIESSLICH Variablen, niemals einzelne Regeln -
   sonst driften Light und Dark mit jeder Aenderung weiter auseinander.
   =========================================================================== */

:root {
  /* --- Farben: Light Mode ------------------------------------------------ */
  --farbe-grund: #ffffff;
  --farbe-flaeche: #f4f4f5;
  --farbe-text: #1a1a1a;
  --farbe-text-leise: #5c5c5e;
  --farbe-linie: #e0e0e2;

  /* Akzent: dunkles Ziegelrot, gewaehlt am 08.09.2026 (Variante C aus der
     Vergleichsseite). Der Kunde ist ein eigenstaendiger Reporter - es gibt
     keine Vereinsfarben, das war eine freie Entscheidung.

     Merkregel fuer spaetere Aenderungen: Ein Rot mit mehr Blau als Gruen
     kippt ins Magenta. Hier ist Blau (31) kleiner als Gruen (35) - warm. */
  --farbe-akzent: #a4231f;
  --farbe-akzent-text: #ffffff;
  --farbe-akzent-leise: #8c1d1a;

  /* --- Schrift ----------------------------------------------------------- */
  --schrift-titel: 'Archivo Narrow', 'Liberation Sans Narrow', 'Arial Narrow', system-ui, sans-serif;
  --schrift-text: 'Source Serif 4', 'Liberation Serif', Georgia, 'Times New Roman', serif;

  --groesse-basis: 1.125rem;      /* 18px - Lesetext, bewusst gross */
  --groesse-klein: 0.875rem;      /* Datum, Kategorie, Bildunterschrift */
  --groesse-h1: clamp(2.25rem, 6vw, 4rem);
  --groesse-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --groesse-h3: 1.25rem;

  --zeilenhoehe-text: 1.65;       /* fuer lange Texte bewusst luftig */
  --zeilenhoehe-titel: 1.08;

  /* --- Mass und Abstand -------------------------------------------------- */
  --breite-lese: 38rem;           /* ca. 70 Zeichen - wichtigster Lesbarkeitshebel */
  --breite-inhalt: 72rem;         /* Kopfzeile, Uebersicht, breite Bilder */

  --abstand-xs: 0.375rem;
  --abstand-s: 0.75rem;
  --abstand-m: 1.5rem;
  --abstand-l: 3rem;
  --abstand-xl: 5rem;

  --radius: 2px;                  /* fast eckig - nuechtern, siehe Transfermarkt */
}

/* --- Farben: Dark Mode ---------------------------------------------------
   Ueber prefers-color-scheme, ohne Umschalter. Begruendung in docs/design.md:
   ein Umschalter braeuchte JS, localStorage und einen Button auf jeder Seite.
   Nachruestbar, weil hier nur Variablen stehen.                            */

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-grund: #1c1c1e;
    --farbe-flaeche: #2c2c2e;
    --farbe-text: #e8e8e8;
    --farbe-text-leise: #a0a0a4;
    --farbe-linie: #3a3a3c;

    /* Das Ziegelrot des Light Mode ist auf Dunkel zu dumpf - aufgehellt,
       damit der Kontrast zum Hintergrund erhalten bleibt. Warm gehalten:
       Blau (74) bleibt unter Gruen (86). */
    --farbe-akzent: #e5564a;
    --farbe-akzent-text: #1c1c1e;
    --farbe-akzent-leise: #f07a70;
  }
}