/*
 * Gestaltungsgrundlagen.
 *
 * Alle Farben, Abstände und Schriftgrößen stehen hier und nirgendwo sonst.
 * Wer das Erscheinungsbild ändern will, ändert diese Datei — nicht die
 * einzelnen Bausteine.
 *
 * Die Grundstimmung ist Nacht: tiefes Blau statt Schwarz, warmes
 * Bernsteinlicht als Akzent, Blutrot ausschließlich für die Werwölfe.
 *
 * Das Bernstein folgt den generierten Bildern (design/prompts.md): Alle
 * Grafiken sind fast-monochromes Mitternachtsblau mit genau EINEM
 * glutorangen Lichtakzent — der UI-Akzent erzählt dieselbe Lichtquelle.
 */

:root {
    /* ---------- Flächen ---------- */
    --grund:        #0d0f16;
    --grund-erhoben:#151925;
    --flaeche:      #1b2030;
    --flaeche-hoch: #232a3d;
    --rand:         #2c3448;
    --rand-hell:    #3a4460;

    /* ---------- Schrift ---------- */
    --text:         #e8ecf6;
    --text-leise:   #9aa5bf;
    /* Nachgemessen (2026-08-15): #6b7590 kam auf erhobenen Flächen nur auf
       3,8:1 — unter den 4,5:1, die Fließtext braucht. Der Wert hier schafft
       5,2:1 auf --grund-erhoben und bleibt hörbar leiser als --text-leise. */
    --text-still:   #828ca7;

    /* ---------- Akzente ---------- */
    --mond:         #f0a35c;   /* Bernsteinlicht, Hauptakzent */
    --mond-tief:    #d17f3a;
    --blut:         #c8434a;   /* nur für Werwölfe und Gefahr */
    /* Für ROTE SCHRIFT auf dunklem Grund. --blut selbst ist als Fläche und
       Zeichen richtig, kommt als Text aber nur auf 3,6:1 — dieser hellere
       Bruder liest sich (4,6:1 und mehr), ohne die Warnfarbe zu verlassen. */
    --blut-schrift: #d9575e;
    --blut-tief:    #9e2f35;
    --dorf:         #5aa9d6;   /* Fraktion Dorf */
    --liebe:        #d97aa8;   /* Fraktion Liebespaar */
    /* Fraktion „für sich": Flötenspieler, Engel, Weißer Wolf. Sie gewinnen
       gegen Dorf UND Rudel, gehören also auf keine der beiden Farben —
       gemessen nimmt der Flötenspieler 31 % aller Partien für sich
       (Balance::DRITTE, 15.09.2026). */
    --eigen:        #e0a53c;
    --gruen:        #5fb87a;   /* Bestätigung, lebendig */
    /* Die Markierung des Rudels am Tisch (17.10.2026): kräftiges Orange,
       deutlich wärmer und lauter als das Bernstein der eigenen Auswahl. */
    --wolfswahl:    #ff8a1f;

    /* ---------- Glühendes Eisen ----------
     *
     * Der Werkstoff des Logos: dunkles, geschmiedetes Metall, in dem die Hitze
     * noch steckt. Alles Handelnde in der Oberfläche ist daraus — Knöpfe vor
     * allem.
     *
     * **Warum das die massiv orangen Knöpfe abgelöst hat.** Eine volle
     * bernsteinfarbene Fläche mit schwarzer Schrift ist ein Warnschild, kein
     * Werkzeug: Sie schreit auf einer Seite, die sonst aus Nacht besteht, und
     * sie hat mit den Wölfen im Ring nichts gemein. Eisen mit Glut sagt
     * dasselbe („hier drücken"), aber im Ton des Spiels.
     *
     * Drei Werte statt eines: Das Metall ist nicht einfarbig. Oben fängt es
     * Licht (`--eisen-hoch`), unten sammelt sich die Hitze (`--eisen-glut`) —
     * daraus entsteht der Eindruck von Masse statt von Farbe.
     */
    /* Die gerenderte Schmiedehaut. **Als Variable und nicht als fester Pfad**,
     * damit sie an einer Stelle steht: Sie liegt auf drei Knopfarten, und
     * `werkzeuge/knopf-vorschau.html` tauscht sie zeilenweise aus, um
     * verschiedene Eisen zu vergleichen. Ohne Variable müsste die Vorschau in
     * der Bildliste herumschneiden — und daran ist sie beim ersten Versuch
     * gescheitert, weil ein Farbverlauf selbst Kommas enthält. */
    --platte:       url("../assets/textur/eisen.webp");

    --eisen:        #1c1e24;   /* der Körper, kühl und dunkel */
    --eisen-hoch:   #2b2f38;   /* die Kante, die Licht fängt */
    --eisen-tief:   #131418;   /* der Schatten unten */
    --eisen-glut:   #f0a35c;   /* die Hitze — dasselbe Bernstein wie --mond */
    --eisen-schrift:#f8ddb8;   /* Schrift auf Eisen: warmes Licht, nie Schwarz */
    /* Was auf einem Knopf steht. Im Dunkeln ist das die normale Textfarbe —
       hell genug für dunkles Eisen. Im Hellen wird der Werkstoff Holz und
       `--text` fast schwarz; dort tritt `--eisen-schrift` an diese Stelle. */
    --knopf-schrift: var(--text);

    /* ---------- Zustände ---------- */
    --tot-schleier: rgba(13, 15, 22, .72);

    /* ---------- Abstände ---------- */
    --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
    --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

    /* ---------- Radien ---------- */
    --r-klein: 8px;
    --r-mittel: 14px;
    --r-gross: 22px;
    --r-rund: 999px;

    /* ---------- Schriftgrößen ----------
     *
     * Sie hängen an --f-skala, damit die Wahl im Profil (Reiter „Bild")
     * sie gemeinsam anhebt. Skaliert wird ausdrücklich NUR die Schrift und
     * nicht die Wurzelgröße: An `rem` hängt in diesem Spiel auch Geometrie
     * — die Plätze am Ring, die Namensschilder, die Handkante —, und die
     * soll sich nicht mitverschieben. Größerer Text in gleich großen
     * Behältern kürzt Namen früher mit Auslassungspunkten; das ist der
     * gewollte Preis.
     *
     * --f-riesig bleibt außen vor: Die Überschrift der Startseite rechnet
     * schon in vw und würde sonst zweimal wachsen.
     */
    --f-skala: 1;
    --f-winzig: calc(.75rem  * var(--f-skala));
    --f-klein:  calc(.875rem * var(--f-skala));
    --f-normal: calc(1rem    * var(--f-skala));
    --f-gross:  calc(1.25rem * var(--f-skala));
    --f-titel:  calc(1.75rem * var(--f-skala));
    --f-riesig: clamp(2rem, 7vw, 3.25rem);

    /* ---------- Schatten ---------- */
    --schatten-klein: 0 2px 8px rgba(0, 0, 0, .35);
    --schatten:       0 8px 28px rgba(0, 0, 0, .45);
    --schatten-mond:  0 0 32px rgba(240, 163, 92, .22);

    /* ---------- Bewegung ---------- */
    --zeit-kurz: .16s;
    --zeit:      .28s;
    --kurve:     cubic-bezier(.4, 0, .2, 1);

    /* ---------- Maße ---------- */
    --breite-inhalt: 68rem;
    --breite-schmal: 26rem;
    /* Touch-Ziele nach Empfehlung mindestens 44px */
    --tippziel: 2.9rem;

    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    /* Überschriften und Rollennamen — charaktervolle Serif, lokal gehostet
       (assets/schrift/); fällt ohne Datei auf System-Serifen zurück. */
    --schrift-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
}

/*
 * Helles Erscheinungsbild. Das Spiel ist auf die Nacht ausgelegt, deshalb ist
 * Dunkel die Voreinstellung — wer es hell mag, bekommt hier eine gedämpfte,
 * kontrastgeprüfte Variante.
 */
:root[data-theme="light"] {
    --grund:        #f4f5f9;
    --grund-erhoben:#ffffff;
    --flaeche:      #ffffff;
    --flaeche-hoch: #eceef5;
    --rand:         #d8dce7;
    --rand-hell:    #c2c8d8;

    --text:         #171c28;
    --text-leise:   #4d566d;
    /* Wie im Dunklen nachgemessen und angehoben: vorher 4,1:1 auf Weiß,
       jetzt 5,2:1. */
    --text-still:   #646d83;

    --mond:         #a2591d;
    --mond-tief:    #8a4a16;
    --blut:         #b2353c;
    /* Im Hellen ist --blut als Schrift schon kräftig genug (6:1). */
    --blut-schrift: #b2353c;
    --dorf:         #2c7ba8;
    --eigen:        #9a6a12;   /* auf hellem Grund muss das Gold dunkeln */
    --wolfswahl:    #c45a00;

    /*
     * Im Hellen ist der Werkstoff **Holz**, nicht Eisen.
     *
     * Das ist keine Laune: Eisen ist fast schwarz, und ein fast schwarzes
     * Rechteck auf beinahe weißem Grund liest sich als Loch in der Seite,
     * nicht als Knopf. Holz trägt dieselbe Rolle wärmer — und die Kulisse
     * dahinter ist ohnehin eine Lehmwand, also steht das ganze helle
     * Erscheinungsbild im Fachwerk statt in der Schmiede.
     *
     * Die Glut bleibt trotzdem. Auf Holz ist sie kein Widerspruch, sondern
     * ein **Brandzeichen** — glühendes Eisen, das ins Brett gedrückt wurde.
     * Der Hauptknopf heißt weiter „Glühende Naht".
     *
     * Die Töne sind der Rückfall unter der Platte (siehe `--platte`); liegt
     * das Bild einmal nicht vor, bleibt ein Knopf aus Nussbaum übrig.
     */
    --platte:       url("../assets/textur/holz-hell.webp");
    --eisen:        #3b2c1f;   /* der Körper: dunkles, warmes Holz */
    --eisen-hoch:   #57422e;   /* die Kante, die Licht fängt */
    --eisen-tief:   #241a12;   /* der Schatten unten */
    --eisen-glut:   #e08a3c;   /* das Brandzeichen */
    --eisen-schrift:#fbe6c8;
    /* Auf dunklem Holz ist `--text` (fast schwarz) unlesbar — hier gilt
       dieselbe warme Schrift wie auf dem Eisen im Dunkeln. */
    --knopf-schrift: var(--eisen-schrift);

    /* Die Flächen des hellen Modus: Lehmwand hinter allem, helles Holz in
       den Karten. Erzeugt von `werkzeuge/hell-textur.py`. */
    --wand:         url("../assets/textur/wand-hell.webp");
    --karte-holz:   url("../assets/textur/karte-hell.webp");

    --tot-schleier: rgba(244, 245, 249, .74);
    --schatten-klein: 0 2px 8px rgba(23, 28, 40, .10);
    --schatten:       0 8px 28px rgba(23, 28, 40, .14);
    --schatten-mond:  0 0 28px rgba(162, 89, 29, .18);
}

/*
 * Die Schriftgröße, gewählt im Profil unter „Bild".
 *
 * Drei Stufen und keine kleinere: Wer die Schrift verkleinern will, hat das
 * Gerät dafür — wer sie vergrößern muss, findet es dort oft nicht. Ohne
 * Wahl steht kein Attribut da und --f-skala bleibt 1.
 */
:root[data-schrift="gross"]      { --f-skala: 1.15; }
:root[data-schrift="sehr-gross"] { --f-skala: 1.3; }

/* Wer Bewegung reduziert haben möchte, bekommt sie auch nicht. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}