/*
 * Grundlage: Token, Grundelemente, Seitengeruest.
 *
 * Hier steht, was auf jeder Seite gilt. Wer etwas gestaltet, das nur eine
 * Seite betrifft, schreibt es nicht hierher - dafuer gibt es
 * `verwaltung.css`, und fuer alles, was ein Spiel zeigt, `spiel.css`.
 *
 * **Abstaende und Schriftgroessen kommen aus der Skala unten, nicht aus
 * dem Gefuehl.** Vorher standen in dieser Datei 57 verschiedene
 * Pixelwerte und 16 Schriftgroessen in zwei Einheiten nebeneinander -
 * 11,5 px neben 12 px neben .78rem. Keine dieser Zahlen war falsch, aber
 * zusammen ergaben sie kein Bild: jede Flaeche sah anders gesetzt aus als
 * die daneben, und genau das war der Eindruck von zusammengebastelt.
 *
 * Eine Zahl, die nicht in der Skala steht, gehoert nur dann ins
 * Stylesheet, wenn sie keine Rhythmusfrage ist: die Breite eines
 * Spielfelds, die Hoehe einer Leiste, eine optische Korrektur um ein
 * Haar. Solche Stellen tragen einen Satz daneben, warum.
 */

:root {
    /* ---- Farben --------------------------------------------------------
     * **Jede Farbe steht genau einmal da**, mit beiden Werten nebeneinander:
     * `light-dark(hell, dunkel)`. Der Browser nimmt den passenden, abhaengig
     * von `color-scheme` - und das setzt entweder die Systemeinstellung oder
     * der Umschalter im Seitenkopf ueber `data-theme` am `<html>`.
     *
     * Die uebliche Loesung waere ein zweiter Block unter
     * `@media (prefers-color-scheme: light)`. Dann stuende jede Farbe
     * zweimal da, und beim naechsten Mal haette jemand nur eine der beiden
     * geaendert. Genau diese Sorte Doppelung hat diese Datei schon einmal
     * auseinanderlaufen lassen.
     *
     * Der Hellmodus ist kein umgedrehter Dunkelmodus: Flaechen werden heller
     * *und* Akzente dunkler, sonst leuchten sie auf Weiss.
     */
    color-scheme: light dark;

    /* Der Rasen bleibt gruen - ein Spielfeld hat keinen Hellmodus. */
    --rasen: #2f7a3e;
    --rasen-hell: #35873f;
    --linie: rgba(255, 255, 255, 0.78);

    --flaeche: light-dark(#f3f5f9, #15181c);
    --karte: light-dark(#ffffff, #1d2127);
    --rahmen: light-dark(#d8dee7, #2c323b);
    --text: light-dark(#14181d, #e8ebef);
    --text-leise: light-dark(#5b6573, #9aa3ae);
    --akzent: light-dark(#1b6fd4, #58a6ff);
    --warnung: light-dark(#8a6200, #e5c07b);
    --gefahr: light-dark(#c23321, #e06c75);

    /* Flaechen unterhalb der Karte: Tabellenzeilen, Einbettungen. */
    --karte-tief: light-dark(#f6f8fb, #20252c);
    --reihe: light-dark(#f1f4f8, #23282f);
    --flaeche-tief: light-dark(#e8ecf2, #0d1117);

    /* Gelungenes: ein erreichter Platz, ein gewonnenes Duell. */
    --erfolg: light-dark(#2d7a33, #98c379);
    --erfolg-hell: light-dark(#1f8a3d, #7bd88f);
    --erfolg-satt: light-dark(#2d7a33, #8fd98f);
    --erfolg-grund: light-dark(#e4f3e6, #1c2a22);

    /* Weitere Abstufungen zwischen Karte und Hintergrund. */
    --rahmen-hell: light-dark(#e2e7ef, #2b313a);
    --flaeche-hoch: light-dark(#e7ebf2, #2a2f38);
    --flaeche-mittel: light-dark(#eef1f6, #22272f);
    --flaeche-dunkel: light-dark(#dde3ec, #12161b);

    /* Der Hinweisstreifen ganz oben: gedaempft warnend, nie schreiend. */
    --hinweis-grund: light-dark(#fdf4dd, #3a2f17);
    --hinweis-rahmen: light-dark(#e8d49a, #5a4a22);
    --hinweis-text: light-dark(#6b4e05, #e8d9b0);

    /* Der Schleier hinter einem Dialog und die Farbe darauf. */
    --schleier: light-dark(rgba(18, 24, 33, 0.45), rgba(6, 8, 11, 0.74));
    --auf-farbe: #ffffff;

    /* Der Aufblitzer, wenn in der Konferenz ein Tor faellt. */
    --tor-grund: light-dark(#cdeccf, #2f5d33);

    /* Tiefe: im Hellmodus ein Schatten, im Dunkelmodus fast nichts - dort
       traegt der Rahmen die Abgrenzung, ein Schatten waere unsichtbar. */
    --schatten: light-dark(0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(0, 0, 0, 0.35));
    --schatten-hoch: light-dark(0 8px 24px rgba(16, 24, 40, 0.12), 0 8px 24px rgba(0, 0, 0, 0.5));
    --fokus: light-dark(rgba(27, 111, 212, 0.30), rgba(88, 166, 255, 0.38));

    /* ---- Abstaende -----------------------------------------------------
     * Acht Stufen, und nichts dazwischen. Jede Stufe ist rund ein Drittel
     * bis die Haelfte groesser als die vorige - nah genug beieinander, um
     * immer eine passende zu haben, weit genug auseinander, dass der
     * Unterschied zu sehen ist.
     */
    --raum-1: 2px;
    --raum-2: 4px;
    --raum-3: 6px;
    --raum-4: 8px;
    --raum-5: 12px;
    --raum-6: 16px;
    --raum-7: 24px;
    --raum-8: 32px;

    /* ---- Schrift -------------------------------------------------------
     * In rem statt in px: wer im Browser eine groessere Schrift einstellt,
     * bekommt sie hier auch. In px haette die Einstellung keine Wirkung.
     * Die Kommentare nennen die Groesse bei Normaleinstellung.
     *
     * Jede Stufe ist mindestens ein Zwoelftel groesser als die vorige.
     * Vorher gab es 11, 11.5, 12, 12.5, 13, 13.5, 14 und 15 - acht
     * Groessen auf vier Pixeln, viele davon keine drei Prozent
     * auseinander. Ein Unterschied, den man nicht sieht, ist keine
     * Stufe: die Kartenueberschrift war genau ein Pixel groesser als ihr
     * Text und wirkte dadurch nicht wie eine Ueberschrift, sondern wie
     * ein Versehen.
     *
     * Dass 11 und 12 trotzdem beide bleiben, hat einen Grund: zwischen
     * ihnen liegen neun Prozent, und die 11 traegt die dichten Raster -
     * die Positionsmatrix mit dreizehn Spalten. Sie waere die erste, die
     * umbricht.
     *
     * **Oben fehlte die Rangordnung.** Eine Zeit lang war `--schrift-gross`
     * zugleich Seitentitel, Kartenueberschrift und grosse Kennzahl - alle
     * drei 17px, alle drei halbfett. Damit behauptete jedes Element
     * dasselbe wie jedes andere, und das Auge fand keinen Einstieg. Jetzt
     * hat der Seitentitel eine eigene Stufe, die Kartenueberschrift eine,
     * und 17px bleiben den hervorgehobenen Werten.
     */
    --schrift-winzig: 0.6875rem;      /* 11px - Beschriftungen, Positionsmatrix */
    --schrift-klein: 0.75rem;         /* 12px - dichte Tabellen, Hilfstext */
    --schrift-grund: 0.875rem;        /* 14px - die Grundschrift der Seite */
    --schrift-gross: 1.0625rem;       /* 17px - hervorgehobene Werte */
    --schrift-ueberschrift: 1.25rem;  /* 20px - Ueberschrift einer Karte */
    --schrift-seite: 1.625rem;        /* 26px - der Seitentitel, genau einer */
    --schrift-riesig: 1.875rem;       /* 30px - Spielstand und Wartehinweis */

    /* ---- Schriftgewichte -----------------------------------------------
     * Vier Stufen statt zweier. Gewicht traegt Rangordnung dort, wo die
     * Groesse schon festliegt - in einer Tabellenzeile etwa, die nicht
     * groesser werden darf, in der aber die Punktzahl zaehlt und nicht die
     * Spalte daneben.
     */
    --fett-normal: 400;
    --fett-mittel: 500;
    --fett-halb: 600;
    --fett-voll: 700;

    /* ---- Radien --------------------------------------------------------
     * Drei Abstufungen und eine Pille. Vorher waren es elf.
     */
    --rund-klein: 4px;
    --rund: 6px;
    --rund-gross: 8px;
    --rund-voll: 999px;
}

/* ---- Hell oder dunkel ---------------------------------------------------
 *
 * Ohne Angabe entscheidet das Betriebssystem - `color-scheme: light dark`
 * oben sorgt dafuer, dass `light-dark()` dessen Wunsch folgt. Wer den
 * Schalter benutzt, setzt `data-modus` am `<html>`, und dann gilt dieser
 * eine Wert, bis er ihn wieder aendert. Gespeichert wird das im Browser.
 *
 * Mehr braucht es nicht: weil jede Farbe ein Token ist, haengt die ganze
 * Oberflaeche an diesen zwei Zeilen.
 */

:root[data-modus="hell"] {
    color-scheme: light;
}

:root[data-modus="dunkel"] {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

/* Jede eigene display-Regel schlaegt sonst das hidden-Attribut. Das ist eine
   verlaessliche Fehlerquelle: ein Element mit hidden steht trotzdem da. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--flaeche);
    color: var(--text);
    /* Einzeln statt als `font:`-Kurzschreibweise: die Kurzform haette die
       Groesse an der Skala vorbeigeschmuggelt, und genau so ist sie
       vorher auch dort gelandet. */
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: var(--schrift-grund);
    line-height: 1.45;
}

h1 {
    margin: 0;
    font-size: var(--schrift-seite);
    font-weight: var(--fett-voll);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--schrift-ueberschrift);
    font-weight: var(--fett-halb);
    line-height: 1.3;
}

h3 {
    font-size: var(--schrift-gross);
    font-weight: var(--fett-halb);
}

/* ---- Die Leiste ganz oben -----------------------------------------------
 *
 * Sie trug einmal alles gleichzeitig: Seitentitel, acht Navigationspunkte
 * und die Meldungszeile, alles in derselben Groesse. Dadurch behauptete
 * jedes Element dasselbe wie jedes andere.
 *
 * Jetzt ist sie reine Navigation - Marke links, Wege in der Mitte, der
 * Modusschalter rechts. Worauf man gerade schaut, steht darunter im
 * Seitenkopf und darf dort gross sein.
 */

.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-5);
    padding: var(--raum-4) var(--raum-7);
    background: var(--karte);
    border-bottom: 1px solid var(--rahmen);
}

.marke {
    color: var(--text);
    font-size: var(--schrift-grund);
    font-weight: var(--fett-voll);
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.marke span {
    color: var(--text-leise);
    font-weight: var(--fett-normal);
}

/* Schiebt den Modusschalter ans rechte Ende, egal wie viele Wege es gibt. */
.kopf-nav {
    margin-right: auto;
}

.modus {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-3);
    background: transparent;
    border-color: transparent;
    color: var(--text-leise);
    padding: var(--raum-2) var(--raum-4);
}

.modus:hover:not(:disabled) {
    background: var(--flaeche-mittel);
    border-color: var(--rahmen);
    color: var(--text);
}

/* ---- Der Seitenkopf ------------------------------------------------------
 * Eine Zeile Luft, dann der Titel - das Erste, was man liest.
 */

.seitenkopf {
    max-width: 1500px;
    margin: 0 auto;
    padding: var(--raum-7) var(--raum-7) 0;
}

.seitenkopf .meldung {
    margin-top: var(--raum-2);
}
/* ---- Eingaben und Knoepfe ------------------------------------------------
 *
 * Gestaltet war hier lange nur `input[type="number"]`. Textfelder,
 * Passwortfelder, Datumsfelder, Haken und Farbwaehler - zusammen fuenfund-
 * dreissig Stueck - standen in der Grundausstattung des Browsers da. Im
 * Dunkelmodus faellt ein weisses Kaestchen schon auf; sobald es einen
 * Hellmodus gibt, sieht man gar nichts anderes mehr.
 */

select,
textarea,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="email"],
button {
    background: var(--flaeche-mittel);
    color: var(--text);
    border: 1px solid var(--rahmen);
    border-radius: var(--rund);
    padding: var(--raum-3) var(--raum-5);
    font: inherit;
    font-size: var(--schrift-grund);
    line-height: 1.4;
}

select,
textarea,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="email"] {
    background: var(--karte-tief);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-leise);
    opacity: 0.8;
}

input[type="number"] {
    width: 108px;
}

/* Ein sichtbarer Fokusring, und zwar nur bei Tastaturbedienung - mit der
   Maus stoert er, ohne ihn findet man sich mit der Tastatur nicht zurecht. */
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px var(--fokus);
}

/* Haken und Regler in der Akzentfarbe - ein Browserstandard, der hier
   endlich zum Rest passt. */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--akzent);
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

input[type="color"] {
    width: 44px;
    height: 32px;
    padding: var(--raum-1);
    background: var(--karte-tief);
    border: 1px solid var(--rahmen);
    border-radius: var(--rund);
    cursor: pointer;
}

button,
input[type="submit"] {
    cursor: pointer;
    font-weight: var(--fett-mittel);
}

button:hover:not(:disabled),
input[type="submit"]:hover {
    background: var(--flaeche-hoch);
    border-color: var(--rahmen-hell);
}

button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Genau ein Knopf je Bereich darf so aussehen: der, den man meistens
   will. Alles andere bleibt zurueckgenommen, sonst ruft wieder alles
   gleich laut. */
.primaer,
input[type="submit"] {
    padding: var(--raum-4) var(--raum-6);
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--karte);
    font-weight: var(--fett-halb);
}

.primaer:hover:not(:disabled),
input[type="submit"]:hover {
    background: var(--akzent);
    border-color: var(--akzent);
    filter: brightness(1.08);
}

.meldung {
    margin: 0;
    flex: 1 1 100%;
    min-height: 18px;
    color: var(--text-leise);
    font-size: var(--schrift-klein);
}

.meldung.fehler {
    color: var(--gefahr);
}
.banner {
    margin: 0;
    padding: var(--raum-4) var(--raum-6);
    background: var(--hinweis-grund);
    border-bottom: 1px solid var(--hinweis-rahmen);
    color: var(--hinweis-text);
    font-size: var(--schrift-klein);
}

.banner a {
    color: var(--akzent);
    margin-left: var(--raum-4);
}

/* Die Wege sind Text, kein Kasten. Vorher trug jeder Punkt einen eigenen
   Rahmen - acht Kaesten nebeneinander, und der, auf dem man stand, sah aus
   wie die sieben anderen. Die aktive Seite hatte naemlich gar keine Regel. */
.kopf-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-1);
}

.kopf-nav a {
    color: var(--text-leise);
    font-size: var(--schrift-grund);
    text-decoration: none;
    border-radius: var(--rund);
    padding: var(--raum-3) var(--raum-5);
}

.kopf-nav a:hover {
    color: var(--text);
    background: var(--flaeche-mittel);
}

.kopf-nav a.aktiv {
    color: var(--text);
    background: var(--flaeche-hoch);
    font-weight: var(--fett-halb);
}

.manager {
    display: flex;
    flex-direction: column;
    gap: var(--raum-6);
    padding: var(--raum-6) var(--raum-7) var(--raum-8);
    max-width: 1500px;
    margin: 0 auto;
}

.karte {
    background: var(--karte);
    border: 1px solid var(--rahmen);
    border-radius: var(--rund-gross);
    padding: var(--raum-7);
    box-shadow: var(--schatten);
}

.karte h2 {
    display: flex;
    align-items: center;
    gap: var(--raum-4);
    margin: 0 0 var(--raum-6);
    font-size: var(--schrift-ueberschrift);
    font-weight: var(--fett-halb);
    letter-spacing: -0.01em;
}

.karte h2:not(:first-child) {
    margin-top: var(--raum-7);
}

.schritt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--akzent);
    color: var(--flaeche-tief);
    font-size: var(--schrift-klein);
    font-weight: 700;
}

.feldgruppe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-5) var(--raum-6);
}

.feldgruppe label {
    display: flex;
    flex-direction: column;
    gap: var(--raum-2);
    color: var(--text-leise);
    font-size: var(--schrift-klein);
}

.feldgruppe select,
.feldgruppe input {
    min-width: 170px;
}

.aktionen {
    display: flex;
    align-items: center;
    gap: var(--raum-5);
    margin-top: var(--raum-6);
    padding-top: var(--raum-6);
    border-top: 1px solid var(--rahmen);
}



/* ---- Textfarben, die ueberall gelten ------------------------------------
 *
 * `.leise` stand bis eben in `spiel.css`, wird aber auf jeder Seite
 * benutzt - von der Anmeldung bis zur Pokalverwaltung. Dass es trotzdem
 * funktionierte, lag nur daran, dass alle drei Vorlagen ueberall geladen
 * werden. Auffindbar war es dort nicht.
 */

.leise {
    color: var(--text-leise);
    font-size: var(--schrift-klein);
}

/* Fuer Zahlen, deren Vorzeichen zaehlt: ein Saldo, eine Buchung. Die
   Farbe haengt am Betrag, nie an der Bezeichnung - eine Abloese ist je
   nach Richtung Einnahme oder Ausgabe. */
.erfolgreich {
    color: var(--erfolg);
}

.fehler {
    color: var(--gefahr);
}

/* ---- Responsiv -----------------------------------------------------------
 *
 * Die Seite lief vorher unter etwa 470 Pixeln waagerecht ueber - man musste
 * schieben, um die rechte Haelfte zu sehen. Schuld waren feste Breiten:
 * Zahlenfelder mit 108 Pixeln, Auswahlfelder mit 170 Pixeln Mindestbreite
 * und Tabellen, die ihre Spalten nicht aufgeben.
 *
 * Die Reihenfolge der Mittel ist Absicht: erst dafuer sorgen, dass nichts
 * breiter sein *kann* als sein Platz, dann dem wirklich Breiten einen
 * eigenen Rollbereich geben, und erst zuletzt Abstaende verkleinern.
 */

img,
canvas,
svg,
video {
    max-width: 100%;
}

/* Eine breite Tabelle schiebt nicht mehr die ganze Seite, sondern rollt in
   ihrem eigenen Kasten. `:has` trifft genau die Behaelter, in denen wirklich
   eine Tabelle steckt - ohne dass im HTML dafuer eine Klasse noetig waere. */
div:has(> table) {
    overflow-x: auto;
}

/* Gilt fuer alle Eingaben, nicht nur fuer Zahlen: ein Datumsfeld bringt
   seine eigene Wunschbreite mit, und die ist auf einem Telefon zu gross. */
input {
    max-width: 100%;
}

@media (max-width: 700px) {
    .kopf {
        gap: var(--raum-4);
        padding: var(--raum-4) var(--raum-5);
    }

    .seitenkopf {
        padding: var(--raum-6) var(--raum-5) 0;
    }

    .manager {
        gap: var(--raum-5);
        padding: var(--raum-5) var(--raum-5) var(--raum-7);
    }

    .karte {
        padding: var(--raum-5);
    }

    .karte h2 {
        margin-bottom: var(--raum-5);
    }

    /* Ein Feld je Zeile. Nebeneinander waeren es zwei halbe, in die nichts
       mehr hineinpasst - und die Beschriftung bricht dann auch noch um. */
    .feldgruppe {
        gap: var(--raum-4);
    }

    .feldgruppe label {
        flex: 1 1 100%;
    }

    .feldgruppe select,
    .feldgruppe input {
        width: 100%;
        min-width: 0;
    }

    input[type="number"] {
        width: 100%;
    }
}

/* Auf dem Telefon ist der Platz zu knapp, um die Leiste oben festzuhalten -
   sie naehme ein Viertel des Bildschirms. */
@media (max-width: 700px), (max-height: 520px) {
    .kopf {
        position: static;
    }
}