/*
 * theme-4diget.css — Corporate Design 4digEt
 *
 * Diese Datei enthaelt AUSSCHLIESSLICH Werte. Kein Aufbau, keine Regeln.
 * Wer das Aussehen aendern will, aendert hier — und nur hier.
 *
 * Die Namen sind funktional, nicht nach Farbe benannt: Ein Theme in Gruen
 * setzt --color-primary auf Gruen, ohne dass irgendwo "dunkelblau" steht.
 *
 * -------------------------------
 * Autor:   Martin Kornmüller
 * Projekt: 4digEt
 * Version: 1.0.0
 */

:root {
    /* ── Farben ─────────────────────────────────────────────────────── */
    --color-primary:        #1C3959;   /* Kopf, Fuss, Ueberschriften */
    --color-primary-dark:   #173876;   /* Hover auf Primaerflaechen */
    --color-on-primary:     #F0F7F4;   /* Text auf Primaerflaeche */

    /* ── Der Knopf, nachgerechnet ────────────────────────────────────
       Bis zum 06.10.2026 stand hier #E67E22. Mit der Schrift #1C3959
       darauf sind das 4,14:1, und damit reicht es nur fuer grossen
       Text. WCAG verlangt 4,5:1 fuer normalen.

       #FF8C1A ist heller und greller, wie die Tester es wollten, und
       kommt mit derselben Schrift auf 5,07:1. Das ist AA fuer jede
       Textgroesse.

       Dafuer sinkt der Abstand zum Seitengrund von 2,62:1 auf 2,14:1.
       WCAG 1.4.11 will fuer ein Bedienelement 3:1. Deshalb bekommt der
       Knopf eine Umrandung in --color-accent-dark: #D35400 auf #F0F7F4
       sind 3,83:1.

       Nachgerechnet mit python3 _tools/farbkontrast.py --paare */
    --color-accent:         #FF8C1A;   /* Handlungsaufforderung, Sterne */
    --color-accent-dark:    #D35400;   /* Hover und Umrandung */
    --color-on-accent:      #FFFFFF;   /* Text auf Akzentflaeche */

    --color-page-bg:        #F0F7F4;   /* Seitenhintergrund */
    --color-surface:        #FFFFFF;   /* Inhaltsflaeche, Karten */
    --color-surface-alt:    #E5EFEC;   /* Boxkopf, abgesetzte Zeile */

    --color-text:           #1F2933;   /* Fliesstext */
    --color-heading:        #1C3959;   /* Ueberschriften */
    --color-muted:          #CCCCCC;   /* Nebentext, Pfeile, Deko */

    --color-border:         #F0F0F0;   /* feine Trennlinien */
    --color-border-strong:  #C9D6E2;   /* sichtbare Rahmen */

    --color-success:        #15803D;   /* Vorteile, Bestaetigung */
    --color-danger:         #B91C1C;   /* Nachteile, Fehler */

    /* ── Schrift ────────────────────────────────────────────────────── */
    /* Systemschriften: laden sofort und uebertragen nichts an Dritte.
       Eigene Schriften nur selbst gehostet aus assets/fonts/. */
    --font-body:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      Helvetica, Arial, sans-serif;
    --font-heading:   var(--font-body);
    --font-size-base: 1rem;      /* = 16px. Vorher standen hier 18px,
                                   die Bf aber ueberschrieben hat —
                                   gerendert wurden immer 16px. */
    --font-size-h1:   2rem;
    --font-size-h2:   1.5rem;

    /* ── Abstand und Form ───────────────────────────────────────────── */
    --container-max: 65em;
    --gap:           1.5rem;
    --gap-sm:        0.75rem;
    --radius:        0.5rem;
    --radius-lg:     0.75rem;
    --shadow:        0 0.25rem 1.5rem rgba(0, 0, 0, .08);

    /* ── Bewegung ───────────────────────────────────────────────────── */
    --transition: 0.18s ease;

    /* ── Nur in diesem Layout gebraucht ─────────────────────────────── */
    --color-focus-bg: #444444;   /* Fokus im Untermenue */

    /* ── Damit dieses Theme auch im Review-Layout traegt ──────────────
       Diese beiden benutzt das 4digEt-Layout selbst nicht. Sie stehen
       hier, weil ein Theme sonst nur auf seinem eigenen Layout laeuft —
       und genau das soll die Auswahl im Admin ja aufheben. Werte aus
       der 4digEt-Palette, nicht aus dem Review-Layout uebernommen. */
    --color-box-header-bg: #E5EFEC;   /* Kopfzeile der Kaesten */
    --color-soft-text:     #4B5563;   /* zweite Textstufe */

    /* ── Zwei Rollen, die vorher an --color-primary hingen ───────────
       --color-primary ist in style.css BEIDES: Hintergrund der
       Balken (header, footer, Menues) und Textfarbe im Inhalt. Hell
       geht das auf, dunkel nicht: Ein Balken braucht dunkel, Text auf
       dunklem Grund braucht hell. Deshalb bekommt der Balken eine
       eigene Marke, und oberflaeche.css setzt sie dort ein.
       In der hellen Fassung bleibt alles, wie es war. */
    --color-bar:         #1C3959;   /* Balken: Kopf, Fuss, Menues */
    --color-button-text: #1C3959;   /* Schrift auf dem Akzentknopf */
    --color-content-bg:  #F0F7F4;   /* Grund des Inhalts */
}

/* ====================================================================
 * Dunkel
 *
 * ZUERST die Einstellung des Geraets, DANN die Wahl des Menschen.
 *
 * Der Anlass war handfest: Zwei Tester, 12 und 18 Jahre alt, beide nur
 * mit dem Telefon unterwegs, hatten als Erstes angemerkt, dass die Seite
 * der Systemeinstellung nicht folgt. Wer sein Telefon auf dunkel
 * gestellt hat, erwartet das ueberall.
 *
 * Drei Zustaende:
 *
 *   kein data-theme       wie das Geraet es sagt
 *   data-theme="light"    hell, egal was das Geraet sagt
 *   data-theme="dark"     dunkel, egal was das Geraet sagt
 *
 * Die Klammer :not([data-theme="light"]) sorgt dafuer, dass eine
 * ausdrueckliche Wahl die Geraeteeinstellung schlaegt.
 * ================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary:       #9EC2E8;   /* jetzt Textfarbe, nicht Balken */
        --color-primary-dark:  #BFD8F0;
        --color-on-primary:    #E6EDF3;   /* Schrift auf den Balken, bleibt hell */

        --color-accent:        #FF8C1A;
        --color-accent-dark:   #F0913C;
        --color-on-accent:     #10171F;

        --color-page-bg:       #0E151C;
        --color-surface:       #1B2530;
        --color-surface-alt:   #22303D;

        --color-text:          #E6EDF3;
        --color-heading:       #9EC2E8;
        --color-muted:         #8A98A6;

        --color-border:        #263341;
        --color-border-strong: #3A4A5B;

        --color-success:       #4ADE80;
        --color-danger:        #F87171;

        --color-focus-bg:      #2A3845;
        --color-box-header-bg: #22303D;
        --color-soft-text:     #AEBAC6;

        --color-bar:           #16212C;
        --color-button-text:   #10171F;
        --color-content-bg:    #121A22;

        --shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    --color-primary:       #9EC2E8;
    --color-primary-dark:  #BFD8F0;
    --color-on-primary:    #E6EDF3;

    --color-accent:        #FF8C1A;
    --color-accent-dark:   #F0913C;
    --color-on-accent:     #10171F;

    --color-page-bg:       #0E151C;
    --color-surface:       #1B2530;
    --color-surface-alt:   #22303D;

    --color-text:          #E6EDF3;
    --color-heading:       #9EC2E8;
    --color-muted:         #8A98A6;

    --color-border:        #263341;
    --color-border-strong: #3A4A5B;

    --color-success:       #4ADE80;
    --color-danger:        #F87171;

    --color-focus-bg:      #2A3845;
    --color-box-header-bg: #22303D;
    --color-soft-text:     #AEBAC6;

    --color-bar:           #16212C;
    --color-button-text:   #10171F;
    --color-content-bg:    #121A22;

    --shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, .55);
}