/* Wiederverwendbare Bausteine: Schaltflächen, Karten, Formulare, Hinweise. */

/* ------------------------------------------------------------ Schaltflächen */

/*
 * Alle Knöpfe sind geschmiedetes Eisen.
 *
 * Der Unterschied zwischen einem gewöhnlichen und dem Hauptknopf ist nicht
 * mehr die Farbe, sondern die **Hitze**: Beide sind aus demselben dunklen
 * Metall, aber im Hauptknopf steckt noch die Glut. Das ist näher am Spiel als
 * ein oranges Rechteck — und es ordnet besser, weil ein Blick über die Seite
 * sofort zeigt, wo das Glühen sitzt.
 *
 * Der Verlauf geht von oben nach unten und nicht diagonal: Licht fällt von
 * oben, Masse sammelt sich unten. Genau das lässt ein flaches Rechteck wie
 * einen Körper aussehen.
 */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: var(--tippziel);
    padding: var(--s3) var(--s5);
    border: 1px solid var(--eisen-hoch);
    border-radius: var(--r-rund);

    /*
     * Zwei Schichten: die gerenderte Schmiedehaut über dem Farbverlauf.
     *
     * ── Eine Platte, viele Ausschnitte ──────────────────────────────
     *
     * Das gerenderte Eisen IST der Hintergrund — schlicht als Bild, ohne
     * Mischart. Die Glut liegt darüber: Rand, Schein und Schriftschatten sind
     * eigene Schichten und decken das Bild nicht zu.
     *
     * Alle Knöpfe zeigen dieselbe Datei, aber jeder eine ANDERE STELLE davon
     * (den Ausschnitt vergibt `core/eisen.js`). Damit sieht kein Knopf aus
     * wie sein Nachbar, obwohl es nur ein Bild gibt — als wäre die Oberfläche
     * aus einem Stück geschmiedet und dann zerteilt worden.
     *
     * **Nichts wird gedehnt.** Der Knopf zeigt seinen Ausschnitt in
     * Originalgröße; wird er breiter, sieht man mehr Platte statt derselben
     * Stelle in die Länge gezogen. Genau daran wäre ein fertiges Knopfbild
     * gescheitert — dessen runde Enden hätte man mitziehen müssen.
     *
     * Der Farbverlauf bleibt als zweite Schicht darunter stehen: Er trägt,
     * falls das Bild einmal nicht lädt, und er kostet nichts.
     *
     * **Keine Mischart.** Ein erster Versuch mischte die Platte mit `overlay`
     * und `soft-light` über den Verlauf. Beide rechnen relativ zur Helligkeit
     * des Untergrunds — auf fast schwarzem Eisen (#1c1e24) blieb davon
     * nichts übrig, die Maserung war schlicht unsichtbar. Das Bild direkt als
     * Hintergrund zu nehmen ist nicht nur einfacher, es ist auch das Einzige,
     * was auf dunklem Grund überhaupt sichtbar ist.
     */
    /* Wie groß die Platte erscheint — und damit, wie fein die Straffierung
       wirkt. Kleiner heißt: dasselbe Bild gedrängter, also feineres Korn.
       `werkzeuge/knopf-vorschau.html` schaltet diesen Wert durch.

       **Gewählt am 2026-08-03: `geschmiedet-3` bei 420px („mittel").** In Originalgröße
       (768px) sah dieselbe Platte auf einem Knopf aus wie Mondoberfläche —
       man sieht dann einen einzigen Krater statt einer Fläche. Erst
       zusammengedrängt wird daraus Schmiedehaut.

       Die Platte ist zusätzlich abgedunkelt worden: Aus dem Rendering kam sie
       mit Helligkeit 59, das CSS-Eisen liegt bei 30. Ungedämpft waren die
       Knöpfe hellgrauer Stein statt dunklem Metall. Multiplikativ abgedunkelt
       und nicht durch Abziehen — so bleibt die Struktur im Verhältnis
       erhalten, statt ins Schwarz abzusaufen. */
    --korn: 420px;
    /* Den Ausschnitt vergibt `core/eisen.js` je Knopf — CSS kann das nicht,
       siehe die Begründung dort. `0 0` ist nur der Rückfall, falls das Modul
       einmal nicht läuft. */
    --versatz: 0 0;
    background-image:
        var(--platte),
        linear-gradient(180deg, var(--eisen-hoch), var(--eisen) 55%, var(--eisen-tief));
    background-position: var(--versatz), 0 0;
    background-size: var(--korn) var(--korn), auto;
    background-repeat: repeat, no-repeat;
    color: var(--knopf-schrift);
    font-weight: 600;
    cursor: pointer;
    /* Die obere Kante fängt Licht — eine Linie, die aus Blech Metall macht. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
                var(--schatten-klein);
    transition: transform var(--zeit-kurz) var(--kurve),
                border-color var(--zeit-kurz) var(--kurve),
                box-shadow var(--zeit-kurz) var(--kurve),
                color var(--zeit-kurz) var(--kurve);
    /* Verhindert, dass ein Doppeltipp auf Mobilgeräten hineinzoomt. */
    touch-action: manipulation;
    user-select: none;
}
/*
 * Beim Überfahren glimmt das Eisen an, statt die Farbe zu wechseln. Deshalb
 * ändert sich hier NICHT der Hintergrund: Ein Farbwechsel unter dem Finger
 * wirkt wie ein anderer Knopf, ein Aufglimmen wie derselbe, der antwortet.
 */
@media (hover: hover) {
    .knopf:hover:not(:disabled) {
        border-color: color-mix(in srgb, var(--eisen-glut) 45%, var(--eisen-hoch));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
                    0 0 14px color-mix(in srgb, var(--eisen-glut) 18%, transparent),
                    var(--schatten-klein);
    }
}

.knopf:active:not(:disabled) {
    transform: scale(.97);
    /* Beim Drücken kehrt sich das Licht um: oben Schatten, als sänke der
       Knopf in seine Fassung. */
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.knopf:disabled { opacity: .45; cursor: not-allowed; }
/* Zug unterwegs: bleibt lesbar, zeigt den Kreisel — siehe bestaetigungsKnopf() */
.knopf--schwebt:disabled { opacity: .8; cursor: progress; }
.knopf .laedt { margin-right: .45em; vertical-align: -.15em; }

/*
 * Auf Holz braucht die Schrift eine Kerbe.
 *
 * Die Maserung schwankt um rund 19 Helligkeitsstufen — an den hellsten
 * Stellen fällt der Kontrast der warmen Schrift von 5,9:1 auf etwa 3,8:1.
 * Der dunkle Schatten fängt genau diese Stellen ab, ohne die Fläche
 * anzufassen: Was gemessen zu knapp wurde, ist damit überall lesbar, und es
 * sieht aus wie eingeschnitzt statt aufgedruckt.
 */
:root[data-theme="light"] .knopf {
    text-shadow: 0 1px 2px rgba(20, 12, 6, .65);
}
/* Der stille Knopf hat kein Holz unter sich, sondern die Seite — dort wäre
   ein dunkler Schatten unter dunkler Schrift nur Matsch. */
:root[data-theme="light"] .knopf--still { text-shadow: none; }


/*
 * Ansage überspringen — schwebt unter der Kopfzeile, nur solange gesprochen
 * wird (`ui/ansageknopf.js`).
 *
 * `--kopf-hoehe` wird gemessen und nicht geschätzt: Auf schmalen Geräten
 * bricht die Kopfzeile um. Der Rückfallwert greift nur in der Lücke, bevor
 * die erste Seite steht.
 *
 * Ebene 30: über dem Inhalt, aber unter Dialogen (60/70) und Meldungen —
 * ein Dialog hat seine eigene Bedienung, und der Knopf soll ihm nicht ins
 * Bild ragen.
 */
.ansageknopf {
    /* Kein Warten auf einen möglichen Doppeltipp — siehe .knopf. */
    touch-action: manipulation;
    position: fixed;
    top: calc(var(--kopf-hoehe, 3.25rem) + var(--s2));
    right: var(--s4);
    z-index: 30;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    /* Auch als reines Symbol bleibt er ein volles Tippziel — sonst wäre er
       genau dort zu klein, wo er am meisten gebraucht wird: auf dem Handy. */
    min-height: var(--tippziel);
    min-width: var(--tippziel);
    padding: var(--s2) var(--s3);
    border: 1px solid var(--eisen-hoch);
    border-radius: var(--r-rund);
    background-color: color-mix(in srgb, var(--eisen) 92%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--knopf-schrift);
    font: inherit;
    font-size: var(--f-klein);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--schatten-klein);
    /* Kommt herein, statt aufzublitzen — ein Knopf, der mitten im Satz
       erscheint, soll nicht erschrecken. */
    animation: ansage-herein var(--zeit-kurz) var(--kurve);
}
.ansageknopf[hidden] { display: none; }

/* Am Spieltisch nicht: Dort steht der eigene „überspringen" unten in der
   Seite (pages/tisch.js) — leise, ohne Bedienklang und dort, wo die Hand
   liegt, wenn das Gerät in der Mitte des Tisches steht. Zwei Knöpfe für
   dieselbe Sache wären einer zu viel. */
:root[data-tisch] .ansageknopf { display: none; }
@media (hover: hover) {
    .ansageknopf:hover {
        border-color: color-mix(in srgb, var(--eisen-glut) 45%, var(--eisen-hoch));
    }
}

.ansageknopf:active { transform: scale(.97); }

@keyframes ansage-herein {
    from { opacity: 0; transform: translateY(-.4rem); }
    to   { opacity: 1; transform: none; }
}

/* Auf schmalen Geräten bleibt das Lautsprechersymbol allein stehen —
   daneben ist die Kopfzeile ohnehin schon eng. */
@media (max-width: 34rem) {
    .ansageknopf__wort { display: none; }
    .ansageknopf { padding: var(--s2); }
}

:root[data-theme="light"] .ansageknopf { text-shadow: 0 1px 2px rgba(20, 12, 6, .65); }


/*
 * Der Hauptknopf: dasselbe Eisen, aber die Hitze steckt noch darin.
 *
 * Drei Schichten machen die Glut aus, und alle drei werden gebraucht:
 *   • außen ein weicher Schein, als striche die Wärme über die Seite
 *   • innen unten ein Aufglühen — dort, wo das Metall am dicksten ist
 *   • oben eine helle Kante, die das Ganze als Körper begrenzt
 *
 * Die Schrift ist warmes Licht (`--eisen-schrift`) und **nie Schwarz**.
 * Schwarz auf Orange war ein Warnschild; helle Schrift auf dunklem Metall ist
 * eine Gravur. Gemessen liegt der Kontrast bei rund 12:1 — deutlich über der
 * Anforderung, obwohl der Knopf jetzt dunkel ist.
 */
.knopf--haupt {
    background-image:
        var(--platte),
        linear-gradient(180deg,
            color-mix(in srgb, var(--eisen-glut) 10%, var(--eisen-hoch)),
            var(--eisen) 52%,
            color-mix(in srgb, var(--eisen-glut) 16%, var(--eisen-tief)));
    border-color: var(--eisen-hoch);
    border-bottom-color: var(--eisen-glut);
    color: var(--eisen-schrift);
    box-shadow:
        /* Das Licht, das die Naht nach unten wirft — kurz und tief, wie eine
           Fuge, die noch nicht ausgekühlt ist. Kein Ring rundherum: Die Hitze
           sitzt an einer Stelle, nicht überall. */
        0 2px 14px -4px color-mix(in srgb, var(--eisen-glut) 55%, transparent),
        inset 0 -2px 0 -1px color-mix(in srgb, var(--eisen-glut) 70%, transparent),
        var(--schatten-klein);
}
@media (hover: hover) {
    .knopf--haupt:hover:not(:disabled) {
        /* Beim Überfahren zieht sich die Hitze den Rand hinauf, statt heller zu
           werden: Die Naht wandert, der Knopf bleibt derselbe. */
        border-color: color-mix(in srgb, var(--eisen-glut) 45%, var(--eisen-hoch));
        border-bottom-color: var(--eisen-glut);
        color: #fff1dc;
        box-shadow:
            0 3px 20px -4px color-mix(in srgb, var(--eisen-glut) 75%, transparent),
            inset 0 -2px 0 -1px var(--eisen-glut),
            var(--schatten-klein);
    }
}


.knopf--haupt:active:not(:disabled) {
    transform: scale(.97);
    /* Gedrückt sinkt der Knopf in seine Fassung — und die Naht darunter
       verschwindet dabei fast. */
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55),
                inset 0 -2px 0 -1px color-mix(in srgb, var(--eisen-glut) 45%, transparent);
}

/* Dasselbe Eisen, aber die Glut ist Blut statt Bernstein. Der Unterschied
   liegt allein in der Hitze — so bleibt „gefährlich" eine Eigenschaft des
   Knopfes und nicht ein anderer Werkstoff. */
.knopf--gefahr {
    background-image:
        var(--platte),
        linear-gradient(180deg,
            color-mix(in srgb, var(--blut) 10%, var(--eisen-hoch)),
            var(--eisen) 52%,
            color-mix(in srgb, var(--blut) 18%, var(--eisen-tief)));
    border-color: var(--eisen-hoch);
    border-bottom-color: var(--blut);
    color: #ffd9d9;
    box-shadow:
        0 2px 14px -4px color-mix(in srgb, var(--blut) 55%, transparent),
        inset 0 -2px 0 -1px color-mix(in srgb, var(--blut) 75%, transparent),
        var(--schatten-klein);
}
@media (hover: hover) {
    .knopf--gefahr:hover:not(:disabled) {
        border-color: color-mix(in srgb, var(--blut) 45%, var(--eisen-hoch));
        border-bottom-color: var(--blut);
        color: #fff;
        box-shadow:
            0 3px 20px -4px color-mix(in srgb, var(--blut) 80%, transparent),
            inset 0 -2px 0 -1px var(--blut),
            var(--schatten-klein);
    }
}


/* Kaltes Eisen: kein Verlauf, keine Glut. Für alles, was nebenherläuft —
   „Abbrechen", „Später". Es soll da sein, ohne mitzuglühen. */
.knopf--still {
    /* **Einzeln und nicht als `background: transparent`.** Die Kurzschreibweise
       setzt ALLE Hintergrund-Eigenschaften zurück, auch `background-position` —
       damit fiel der Ausschnitt der Platte auf 0% zurück, und die Kopfzeilen-
       knöpfe zeigten alle dieselbe Stelle. Ein Kurzschreiber löscht immer mehr,
       als dasteht. */
    background-image: none;
    background-color: transparent;
    border-color: var(--rand);
    color: var(--text-leise);
    box-shadow: none;
}
@media (hover: hover) {
    .knopf--still:hover:not(:disabled) {
        color: var(--text);
        border-color: var(--rand-hell);
        box-shadow: none;
    }
}


.knopf--breit { width: 100%; }
.knopf--klein { min-height: 2.25rem; padding: var(--s2) var(--s3); font-size: var(--f-klein); }

/* Halte-Knopf (z. B. das Blinzeln des Mädchens): kein Scrollen beim
   Gedrückthalten auf Touch-Geräten, sichtbare Rückmeldung solange er hält. */
.knopf--halten { touch-action: none; }

/* Gehalten heißt: durchgeglüht. Das ist der heißeste Zustand der ganzen
   Oberfläche — und er soll es sein, denn er dauert nur, solange ein Finger
   darauf liegt. */
.knopf--aktiv {
    /* Gehalten heißt: durchgeglüht. Die Naht ist dann nicht mehr eine Fuge,
       sondern läuft rundherum — das ist der einzige Zustand der Oberfläche,
       in dem das Eisen wirklich hell wird. Er dauert nur, solange ein Finger
       darauf liegt. */
    border-color: var(--eisen-glut);
    color: #fff6e6;
    transform: scale(.97);
    box-shadow:
        0 0 28px color-mix(in srgb, var(--eisen-glut) 55%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--eisen-glut) 45%, transparent),
        inset 0 -16px 26px -12px var(--eisen-glut);
}

/* ------------------------------------------------------------------ Karten */

/*
 * Karten sind leicht durchscheinend, damit die Kulisse dahinter erahnbar
 * bleibt — aber nur leicht: Der Text muss auf jedem Bildschirm lesbar sein,
 * auch draußen bei Sonne. Die Weichzeichnung verhindert, dass Äste und
 * Nebelschwaden durch die Schrift stören.
 *
 * Darauf liegt eine Holzfläche — dunkle, rauhe Bretter, wie die Wand eines
 * Dorfhauses. Holz und nicht Mauerwerk, weil eine Karte Fließtext trägt:
 * Maserung läuft in EINE Richtung, das Auge liest quer darüber hinweg.
 * Mörtelfugen laufen in beide und liegen genau im Größenbereich der
 * Buchstaben — sie kämpfen gegen jedes Wort.
 *
 * Der Schleier davor ist die Kartenfarbe selbst: Er nimmt der Fläche so viel
 * Kraft, dass der Text vorn bleibt (gewählt: 35 % Schleier, also 65 % Holz).
 * Gerendert mit werkzeuge/karte-textur.py, Wurf `brett-1`.
 */
.karte {
    /* url() wird gegen DIESES Stilblatt aufgelöst, nicht gegen die Seite. */
    --karte-flaeche: url("../assets/textur/karte.webp");
    --karte-korn: 520px;
    --karte-schleier: color-mix(in srgb, var(--flaeche) 35%, transparent);

    background-color: color-mix(in srgb, var(--flaeche) 88%, transparent);
    background-image:
        linear-gradient(var(--karte-schleier), var(--karte-schleier)),
        var(--karte-flaeche);
    background-size: auto, var(--karte-korn) var(--karte-korn);
    background-repeat: repeat;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--rand);
    border-radius: var(--r-gross);
    padding: var(--s5);
    box-shadow: var(--schatten-klein);
}

/* Wo die Weichzeichnung fehlt, bleibt die Fläche deckend. */
@supports not (backdrop-filter: blur(1px)) {
    .karte { background-color: var(--flaeche); }
}

/* Im Hellen dasselbe Brett, nur anders belichtet — die dunkle Platte würde
   auf einer weißen Karte wie ein Loch wirken. Der Schleier darf schwächer
   sein, weil helles Holz von sich aus weniger gegen die Schrift arbeitet. */
:root[data-theme="light"] .karte {
    --karte-flaeche: var(--karte-holz);
    --karte-schleier: color-mix(in srgb, var(--flaeche) 22%, transparent);
}
.karte--flach { padding: var(--s4); border-radius: var(--r-mittel); }

/*
 * Die Lichtkante — das Bernstein-Gesetz der Bilder, auf die Bedienung
 * übertragen: Genau EINE Karte pro Ansicht trägt sie, immer die, die
 * gerade Aufmerksamkeit braucht (vergibt spiel.js/lichtSetzen bzw. die
 * Lobby an ihrer Startkarte). Ruhig und statisch — kein Blinken.
 */
.karte--licht {
    position: relative;
    border-top-color: color-mix(in srgb, var(--mond) 65%, var(--rand));
    box-shadow:
        0 -14px 34px -18px color-mix(in srgb, var(--mond) 45%, transparent),
        var(--schatten-klein);
}
.karte--licht::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3.5rem;
    border-radius: inherit;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mond) 12%, transparent), transparent);
    pointer-events: none;
}

/*
 * Die Tafel — eine Veranstaltung auf der Startseite („Sonntagsrunde ·
 * Sonntag 20:00 · noch 2 Tage"). Sie trägt die Lichtkante, weil sie das
 * ist, was auf dieser Seite Aufmerksamkeit braucht, wenn gerade keine
 * Runde läuft. Die Zahl ist groß und in Tabellenziffern: Sie tickt jede
 * Sekunde, und mit Proportionalziffern zappelte die ganze Zeile.
 */
.tafel { gap: var(--s3); }
.tafel__kopf {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3);
}
.tafel__titel { font-family: var(--schrift-display); font-size: var(--f-gross); }
.tafel__wann  { color: var(--text-leise); }
.tafel__zaehler {
    font-size: var(--f-titel);
    font-variant-numeric: tabular-nums;
    color: var(--mond);
    line-height: 1.15;
}
.tafel__zaehler--jetzt { color: var(--gruen); }
/* Schlichte Zahlentabelle der Verwaltung (Partienbuch): Linien statt Kästen. */
.tabelle { border-collapse: collapse; }
.tabelle th, .tabelle td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--rand); }
.tabelle th { color: var(--text-leise); font-weight: 600; font-size: var(--f-klein); }
/* Bild links, Text rechts — auf schmalen Schirmen untereinander. Feste
   Größe (3:2), weil der Verwalter es auf genau dieses Maß zuschneidet. */
.tafel__leib { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; }
.tafel__text { display: flex; flex-direction: column; gap: var(--s3); flex: 1 1 16rem; min-width: 0; }
.tafel__bild {
    width: 9rem; height: 6rem; flex: 0 0 auto;
    object-fit: cover; border-radius: var(--r-klein);
    border: 1px solid var(--rand);
}

.karte__kopf {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    margin-bottom: var(--s4);
}
.karte__kopf h3 { margin: 0; }

/* --------------------------------------------------------------- Formulare */

.feld { display: flex; flex-direction: column; gap: var(--s2); }
.feld__name { font-size: var(--f-klein); font-weight: 600; color: var(--text-leise); }

.feld__erklaerung {
    font-size: var(--f-klein);
    color: var(--text-still);
    line-height: 1.45;
}

/*
 * Ein Feld, bei dem die Bedienung VOR dem Text steht statt darüber — für
 * Häkchen. Das Kästchen bleibt oben bündig, damit es bei zwei Textzeilen
 * nicht in der Mitte schwebt, und bekommt seine eigene Größe: Ein
 * Zustimmungshäkchen, das man dreimal antippen muss, ist keine Zustimmung,
 * sondern ein Geduldsspiel.
 */
.feld--zeile {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s3);
    cursor: pointer;
    font-size: var(--f-klein);
    color: var(--text-leise);
    line-height: 1.45;
}
.feld--zeile input[type="checkbox"] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
    accent-color: var(--mond);
    cursor: pointer;
}
.feld--zeile a { color: var(--mond); }

/* `.feld__eingabe` ist die Eingabe INNERHALB eines `.feld` (Meldeformular,
   Profil, Verwaltung) und trägt dieselbe Haut. Ohne diese Regel fiel sie auf
   den Browser-Standard zurück: weißer Kasten, geerbte helle Schrift — im
   Dunkeln unlesbar (gemeldet 2026-09-05). Die Farbe steht ausdrücklich da,
   weil `color: inherit` aus base.css in einem Select/Textarea sonst vom
   Systemschema überstimmt werden kann. */
.eingabe, .feld__eingabe {
    width: 100%;
    min-height: var(--tippziel);
    padding: var(--s3) var(--s4);
    background: var(--grund-erhoben);
    color: var(--text);
    border: 1px solid var(--rand);
    border-radius: var(--r-mittel);
    transition: border-color var(--zeit-kurz) var(--kurve);
    /* 16px verhindert das automatische Hineinzoomen auf iOS. */
    font-size: max(16px, var(--f-normal));
}
.eingabe:focus, .feld__eingabe:focus { border-color: var(--mond); outline: none; }
.eingabe::placeholder, .feld__eingabe::placeholder { color: var(--text-still); }
/* Die aufgeklappte Liste eines Select malt der Browser selbst — die Optionen
   bekommen Fläche und Schrift ausdrücklich, sonst stehen sie hell auf weiß. */
.eingabe option, .feld__eingabe option { background: var(--grund-erhoben); color: var(--text); }
textarea.feld__eingabe { resize: vertical; line-height: 1.45; }

/* Passwortfeld mit Auge (2026-09-06): Das Feld füllt die Zeile, der Knopf
   sitzt rechts darin — als echter Knopf, mit Tippziel. */
.passwort { position: relative; }
.passwort .eingabe { padding-right: calc(var(--tippziel) + var(--s2)); }
.passwort__auge {
    position: absolute;
    top: 50%;
    right: var(--s1);
    transform: translateY(-50%);
    width: var(--tippziel);
    height: var(--tippziel);
    border: 0;
    background: none;
    color: var(--text-leise);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--r-klein);
    touch-action: manipulation;
}
.passwort__auge .symbol, .passwort__auge img { width: 1.5rem; height: 1.5rem; }
.passwort__auge[aria-pressed="true"] { color: var(--mond); }
@media (hover: hover) { .passwort__auge:hover { color: var(--text); } }

.eingabe--code {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: 1.5rem;
    font-weight: 700;
    padding-inline: var(--s3);
}

.schalter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) 0;
    cursor: pointer;
}
.schalter input { width: 1.15rem; height: 1.15rem; accent-color: var(--mond); flex: none; }

.regler { display: flex; align-items: center; gap: var(--s3); }
.regler input[type="range"] { flex: 1; accent-color: var(--mond); min-height: var(--tippziel); }
.regler__wert {
    min-width: 4.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mond);
    font-weight: 650;
}

/* ------------------------------------------------------------------ Marken */

.marke {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: .18em .7em;
    border-radius: var(--r-rund);
    font-size: var(--f-winzig);
    font-weight: 650;
    letter-spacing: .02em;
    background: var(--flaeche-hoch);
    color: var(--text-leise);
    border: 1px solid var(--rand);
}
.marke--dorf  { color: var(--dorf);  border-color: color-mix(in srgb, var(--dorf) 45%, transparent); }
/* Dunklerer Grund nur für den Wolf: Auf dem hellen Marken-Grund käme selbst
   das Schrift-Rot nur auf 3,7:1 — auf --grund-erhoben sind es 4,6:1. Ein
   dunkleres Abzeichen passt dem Wolf ohnehin. */
.marke--wolf  { color: var(--blut-schrift);  border-color: color-mix(in srgb, var(--blut) 45%, transparent);
                background: var(--grund-erhoben); }
.marke--liebe { color: var(--liebe); border-color: color-mix(in srgb, var(--liebe) 45%, transparent); }
.marke--gut   { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 45%, transparent); }

/* --------------------------------------------------------------- Meldungen */

.meldung {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-mittel);
    border: 1px solid var(--rand);
    background: var(--flaeche);
    font-size: var(--f-klein);
}
.meldung--fehler {
    border-color: color-mix(in srgb, var(--blut) 55%, transparent);
    background: color-mix(in srgb, var(--blut) 12%, var(--flaeche));
    color: #ffd9db;
}
.meldung--gut {
    border-color: color-mix(in srgb, var(--gruen) 55%, transparent);
    background: color-mix(in srgb, var(--gruen) 12%, var(--flaeche));
}

/* ------------------------------------------------------------ Kurzmeldungen */

/* --------------------------------------------------------------- Rufband

   Ein offener Tisch, in den man könnte. Es sitzt OBEN und die Kurzmeldungen
   unten: Beides gleichzeitig am selben Rand hieße, dass eines das andere
   verdeckt — und die Kurzmeldung ist die flüchtigere von beiden.

   `position: fixed` und nicht im Fluss: Es soll auch dann sichtbar sein,
   wenn jemand mitten auf einer langen Seite steht. */
.ruf {
    position: fixed;
    top: calc(var(--s3) + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    width: min(34rem, calc(100vw - 1.5rem));
    /* Zwei Bänder untereinander (Tisch und Anfrage), mit Luft dazwischen.
       Der Behälter selbst fängt keine Tipps: Leer ist er unsichtbar, aber
       er läge sonst über der Kopfzeile. */
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    pointer-events: none;
}
.ruf > * { pointer-events: auto; }
.ruf [hidden] { display: none; }

/* Das Anfrageband trägt ein Gesicht statt des Mondes. */
.ruf__zeichen.spieler__bild { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; }

.ruf__band {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s3) var(--s3) var(--s4);
    background: var(--flaeche-hoch);
    border: 1px solid var(--mond);
    border-radius: var(--r-mittel);
    box-shadow: var(--schatten), var(--schatten-mond);
    animation: ruf-herein .32s var(--kurve);
}

@keyframes ruf-herein {
    from { opacity: 0; transform: translateY(-.75rem); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ruf__band { animation: none; }
}

.ruf__zeichen { flex: none; display: flex; }
.ruf__zeichen img,
.ruf__zeichen .symbol { width: 1.75rem; height: 1.75rem; }

.ruf__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1.3;
}
.ruf__text strong { color: var(--text); }
.ruf__leise {
    color: var(--text-leise);
    font-size: var(--f-klein);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ruf__zu {
    flex: none;
    background: none;
    border: 0;
    color: var(--text-still);
    font-size: var(--f-gross);
    line-height: 1;
    padding: var(--s2);
    cursor: pointer;
    border-radius: var(--r-klein);
}
.ruf__zu:hover { color: var(--text); background: var(--flaeche); }

/* Auf schmalen Schirmen bricht der Text um, statt den Knopf zu quetschen. */
@media (max-width: 26rem) {
    .ruf__band { flex-wrap: wrap; }
    .ruf__text { flex-basis: 100%; order: -1; }
}

/* Das Anfrageband: die beiden Antworten als Gruppe. */
.ruf__knoepfe { display: flex; gap: var(--s2); flex: none; }

/* Solange ein Dialog offen ist (etwa der Freunde-Dialog, der die Anfragen
   selbst zeigt), haben die Bänder Pause — sie lägen sonst gedimmt über dem
   Dialog und wären weder lesbar noch bedienbar (6.9.2026). */
body:has(.modals:not([hidden])) .ruf { display: none; }

/* Handy (6.9.2026): Die Bänder rutschen UNTER die Kopfzeile statt darüber —
   dort blieb der Freundesknopf verdeckt, solange ein Band stand. Das
   Anfrageband ordnet sich zweizeilig: Gesicht, Text und ✕ oben, darunter
   Annehmen und Ablehnen in voller Breite, mit Tippziel für den Daumen. */
@media (max-width: 40rem) {
    .ruf {
        top: calc(4rem + env(safe-area-inset-top));
        width: calc(100vw - 1rem);
    }
    .ruf__band--anfrage { flex-wrap: wrap; padding: var(--s3); }
    .ruf__band--anfrage .ruf__text { flex: 1 1 0; flex-basis: 0; order: 0; }
    .ruf__band--anfrage .ruf__zu { order: 1; }
    .ruf__band--anfrage .ruf__knoepfe { order: 2; flex-basis: 100%; }
    .ruf__band--anfrage .ruf__knoepfe .knopf { flex: 1; min-height: var(--tippziel); font-size: var(--f-normal); }

    /* Reiter „Anfragen": beide Antworten füllen die Zeile. */
    .anfrage__knoepfe .knopf { flex: 1; min-height: var(--tippziel); }
}

.toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--s5) + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    /*
     * Ganz oben — über Dialogen (78) und der Endsequenz (80), unter der
     * Erstwahl (220), die vor allem anderen kommt und keine Meldungen kennt.
     *
     * Bis zum 2026-08-31 stand hier 60, und das war schon immer UNTER dem
     * Dialogvorhang — nur fiel es nie auf, weil Meldungen erst nach dem
     * Schließen kamen. Seit das Profil Reiter hat, bleibt es bei
     * „Bilderwelt gewechselt", „Nur hören …" und dem Stimme-Hinweis OFFEN:
     * Die Meldung erschien hinter dem Blur des Vorhangs als trübe Fläche.
     * Eine Meldung ist eine Statuszeile an den Menschen; es gibt keine
     * Schicht, hinter der sie richtig aufgehoben wäre. `pointer-events:
     * none` bleibt — sie verdeckt nie einen Knopf.
     */
    z-index: 90;
    width: min(30rem, calc(100vw - 2rem));
    pointer-events: none;
}
.toast {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-mittel);
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand-hell);
    box-shadow: var(--schatten);
    font-size: var(--f-klein);
    animation: toast-auf var(--zeit) var(--kurve);
}
.toast--fehler { border-color: var(--blut); background: color-mix(in srgb, var(--blut) 20%, var(--flaeche-hoch)); }
.toast--gut    { border-color: var(--gruen); }
@keyframes toast-auf {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Dialoge */

/*
 * Dialoge liegen ÜBER den Bühnen (2026-08-30: 70 → 78).
 *
 * Der Grund ist die Erkenntnis der Seherin: Ihr Fenster mit Rollenbild und
 * Satz ist ein Dialog, die Morgenbühne eine Schicht auf 75 — war die
 * Seherin die letzte Nachtrolle, stieg der Morgen über ihre Karte, während
 * sie noch las. Ein Dialog wartet auf eine Antwort; was auf ihn steigt,
 * nimmt sie ihm weg. Deshalb steht er jetzt oben.
 *
 * Über allem bleibt die Endsequenz (80): Ist die Partie vorbei, ist auch
 * jede offene Frage vorbei.
 */
.modals {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--s4);
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    z-index: 78;
    /* Wischen im Vorhang bewegt nicht die Seite darunter. Ohne das reicht
       eine Bewegung, die am Rand des Dialogs beginnt, an den Körper durch —
       und beim Schließen steht man ganz woanders als vorher. */
    overscroll-behavior: contain;
}
.modals[hidden] { display: none; }

.dialog {
    width: min(34rem, 100%);
    max-height: 85svh;
    overflow-y: auto;
    /*
     * **Der Dialog scrollt für sich, nicht für die Seite.**
     *
     * Das Profil ist der längste Dialog der Anwendung — Darstellung, Ton,
     * Bilanz, Auszeichnungen. Auf dem Handy wird darin viel gewischt, und
     * ohne diese Zeile läuft jede Bewegung, die oben oder unten anschlägt,
     * an den Körper darunter weiter: Man stellt etwas ein, und die Seite
     * hinter dem Vorhang ist danach ganz oben. Genau so wurde es gemeldet.
     */
    overscroll-behavior: contain;
    background: var(--grund-erhoben);
    border: 1px solid var(--rand-hell);
    border-radius: var(--r-gross);
    padding: var(--s5);
    box-shadow: var(--schatten);
    animation: dialog-auf var(--zeit) var(--kurve);
}
@keyframes dialog-auf {
    from { opacity: 0; transform: translateY(1.5rem) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Sinnbildwahl */

.sinnbildwahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: var(--s2);
}

.sinnbildwahl__knopf {
    /* Kein Warten auf einen möglichen Doppeltipp — siehe .knopf. */
    touch-action: manipulation;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: var(--flaeche-hoch);
    border: 2px solid var(--rand);
    border-radius: var(--r-mittel);
    cursor: pointer;
    transition: border-color var(--zeit-kurz) var(--kurve),
                transform var(--zeit-kurz) var(--kurve);
    /* Auch auf kleinen Bildschirmen sicher zu treffen */
    min-height: var(--tippziel);
}
@media (hover: hover) {
    .sinnbildwahl__knopf:hover { border-color: var(--rand-hell); }
}

.sinnbildwahl__knopf:active { transform: scale(.94); }
.sinnbildwahl__knopf--aktiv {
    border-color: var(--mond);
    background: color-mix(in srgb, var(--mond) 18%, var(--flaeche-hoch));
}

/* Das eigene Bild als Auslöser der Auswahl — sieht aus wie eine Anzeige,
   verhält sich wie ein Knopf. Deshalb nur ein Hauch Rückmeldung: Der Ring
   erscheint beim Zeigen, der Hinweistext darunter sagt, was passiert. */
.eigenbild {
    display: block;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.eigenbild .spieler__bild {
    transition: box-shadow var(--zeit-kurz) var(--kurve),
                transform var(--zeit-kurz) var(--kurve);
}
@media (hover: hover) {
    .eigenbild:hover .spieler__bild,
    .eigenbild:focus-visible .spieler__bild {
        box-shadow: 0 0 0 3px var(--mond);
    }
}

.eigenbild:active .spieler__bild { transform: scale(.96); }
.eigenbild__hinweis {
    display: block;
    margin-top: var(--s2);
    font-size: var(--f-klein);
    color: var(--text-leise);
}
.eigenbild[aria-expanded="true"] .eigenbild__hinweis { color: var(--mond); }

/* Gezeichnete Gesichter: das Bild füllt den Knopf, rund beschnitten. */
.sinnbildwahl--bilder {
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}
.sinnbildwahl__knopf--bild { padding: 0; overflow: hidden; border-radius: 50%; }
.sinnbildwahl__knopf--bild .sinnbild-traeger { width: 100%; height: 100%; }

/* ----------------------------------------------------------- Auszeichnungen */

/*
 * Verdientes. Zwei Orte, ein Aussehen: frisch verliehen im Schlussbild,
 * gesammelt im Profil und auf der Spielerkarte.
 *
 * Der Bernstein-Rand ist bewusst dieselbe Farbe wie die Lichtkante der
 * Karten — im ganzen Spiel heißt Bernstein „hierher sehen".
 */
.auszeichnungen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--s3);
}

/*
 * Zwei Spalten: das Zeichen links, Name und Text rechts. Das Zeichen zieht
 * sich über beide Zeilen — es gehört zur ganzen Kachel, nicht zur Überschrift.
 */
.auszeichnung {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--s3);
    align-items: start;
    padding: var(--s3) var(--s4);
    border: 1px solid color-mix(in srgb, var(--mond) 45%, var(--rand));
    border-radius: var(--r-mittel);
    background: color-mix(in srgb, var(--mond) 8%, var(--flaeche-hoch));
    text-align: left;
}

.auszeichnung__zeichen {
    grid-row: 1 / span 2;
    font-size: 1.7rem;
    line-height: 1.1;
}

.auszeichnung__name {
    font-weight: 650;
    color: var(--mond);
}

/* Die Sterne stehen für die Stufe: Stammgast ★, Alteingesessen ★★. In der
   Ehrenhalle stehen die noch offenen hohl daneben (★☆☆). */
.auszeichnung__stufe { letter-spacing: .1em; }

/*
 * Noch nicht verdient. Sie stehen sichtbar dabei, aber grau und ohne
 * Bernstein: Der Blick soll auf dem Erspielten hängen bleiben und daneben
 * sehen, was es noch gibt — nicht umgekehrt.
 */
.auszeichnung--verschlossen {
    border-color: var(--rand);
    background: var(--flaeche);
    opacity: .72;
}
.auszeichnung--verschlossen .auszeichnung__zeichen { filter: grayscale(1); }
.auszeichnung--verschlossen .auszeichnung__name    { color: var(--text-leise); }

.auszeichnung__text {
    font-size: var(--f-klein);
    color: var(--text-leise);
    margin-top: var(--s1);
    line-height: 1.4;
}

/* Im Schlussbild kommen sie nacheinander herein — dieselbe Taktung wie die
   Rollenkarten daneben. Wer Bewegung abbestellt hat, sieht sie sofort. */
.endsequenz .auszeichnung {
    opacity: 0;
    animation: auszeichnung-auf var(--zeit) var(--kurve) forwards;
}
.endsequenz--sparsam .auszeichnung { opacity: 1; animation: none; }

@keyframes auszeichnung-auf {
    from { opacity: 0; transform: translateY(.5rem) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .endsequenz .auszeichnung { opacity: 1; animation: none; }
}

/*
 * Die Ehrungen der Mitspieler — eine Zeile je Person.
 *
 * Bewusst KEINE Kacheln wie oben: Die eigene Auszeichnung ist der Anlass,
 * die der anderen sind die Nachricht. Sähen beide gleich aus, verlöre die
 * eigene ihren Rang. Der Name steht in Bernstein, die Titel dahinter leise —
 * das ist dieselbe Aufteilung wie auf den Rollenkarten des Schlussbilds.
 */
.ehrungen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    text-align: left;
}

.ehrung {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s2);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-mittel);
    background: color-mix(in srgb, var(--mond) 6%, var(--flaeche-hoch));
}

.ehrung__wer {
    font-weight: 650;
    color: var(--mond);
}

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

/* --------------------------------------------------------------- Kennzahlen */

/*
 * Die Mindestbreite ist gemessen, nicht geraten: „Niederlagen" braucht bei
 * --f-winzig rund 68 px. Bei 4.5rem blieben davon 57 px übrig, und weil die
 * Seite global `overflow-wrap: break-word` setzt (lange Spielernamen), brach
 * das Wort mitten im Stamm um: „Niederlag / en". `hyphens: auto` half nicht —
 * es braucht ein Trennwörterbuch, das nicht überall vorhanden ist.
 */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: var(--s3);
}

.kennzahl {
    text-align: center;
    padding: var(--s3) var(--s2);
    border-radius: var(--r-mittel);
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
}
.kennzahl__wert {
    font-size: var(--f-gross);
    font-weight: 700;
    color: var(--mond);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.kennzahl__name {
    font-size: var(--f-winzig);
    color: var(--text-leise);
    margin-top: var(--s1);
}

/* ------------------------------------------------------------------ Reiter */

/*
 * Zwei bis drei Ansichten in einem Dialog (Ehrenhalle: „Deine Halle" und
 * „Rangliste"). Die Reiter sitzen unter der Überschrift und tragen die Wahl
 * als Unterstrich — nicht als Fläche: Ein gefüllter Reiter sähe aus wie ein
 * Knopf, und ein Knopf, der nach dem Drücken gedrückt bleibt, verwirrt.
 */
.reiter {
    display: flex;
    /*
     * Umbruch und mitwachsender Abstand — beides wegen der Schriftgröße.
     *
     * Seit dem Profil vier Reiter hat (Profil · Kulisse · Bild · Ton) und
     * sich die Schrift vergrößern lässt, wächst diese Zeile mit: gemessen
     * 238 px bei Normal, 252 bei Groß, 274 bei Sehr groß — während im Dialog
     * auf einem 320er Handy nur 238 px stehen. Der engere Abstand holt Groß
     * zurück in eine Zeile; für Sehr groß bricht sie um. Zwei Zeilen sind
     * hässlicher als eine, aber ein Reiter, den man nicht sieht, ist
     * schlimmer als beides — und wer die Schrift vergrößert hat, hat dafür
     * seine Gründe.
     */
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: clamp(var(--s2), 2vw, var(--s4));
    border-bottom: 1px solid var(--rand);
}

.reiter__knopf {
    /* Kein Warten auf einen möglichen Doppeltipp — siehe .knopf. */
    touch-action: manipulation;
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-leise);
    font: inherit;
    font-weight: 600;
    padding: var(--s3) var(--s1);
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--zeit-kurz) var(--kurve),
                border-color var(--zeit-kurz) var(--kurve);
}
@media (hover: hover) {
    .reiter__knopf:hover { color: var(--text); }
}


.reiter__knopf--aktiv {
    color: var(--mond);
    border-bottom-color: var(--mond);
}

/*
 * Der Abschnitt, den ein Link gerufen hat.
 *
 * Wer aus einer Benachrichtigungsmail kommt, landet mitten in einem Dialog.
 * Richtig gescrollt zu sein genügt nicht — der Blick braucht einen
 * Anhaltspunkt, wo das Gesuchte anfängt. Zwei Sekunden Bernstein, dann ist
 * es wieder eine Einstellung wie jede andere.
 */
.abschnitt--gerufen {
    animation: abschnitt-gerufen 2.4s var(--kurve);
    border-radius: var(--r-mittel);
}

@keyframes abschnitt-gerufen {
    0%, 60% { box-shadow: 0 0 0 2px var(--mond), var(--schatten-mond); }
    100%    { box-shadow: 0 0 0 2px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .abschnitt--gerufen { animation: none; box-shadow: 0 0 0 2px var(--mond); }
}

/* -------------------------------------------------------------- Fortschritt */

/*
 * Wie viel der Sammlung schon steht. Bewusst schmal und ohne Zahl im Balken:
 * Die Zahl steht in der Überschrift darüber („6 von 19"), der Balken macht
 * daraus ein Bild.
 */
.fortschritt {
    height: .45rem;
    border-radius: var(--r-rund);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    overflow: hidden;
}
.fortschritt__balken {
    height: 100%;
    background: linear-gradient(90deg, var(--mond-tief), var(--mond));
    transition: width var(--zeit) var(--kurve);
}

/* --------------------------------------------------------------- Rangliste */

.rangliste {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
}

/*
 * Jede Zeile ist ein Knopf: Ein Tipp öffnet das Blatt des Spielers. Deshalb
 * ein echtes <button> — mit der Tabulatortaste erreichbar, mit der
 * Eingabetaste auslösbar, und Vorleseprogramme kündigen es als Schaltfläche
 * an statt als Text.
 */
.rangliste__zeile {
    display: flex;
    align-items: center;
    gap: var(--s3);
    width: 100%;
    padding: var(--s2) var(--s3);
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
    border-radius: var(--r-mittel);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--zeit-kurz) var(--kurve),
                background var(--zeit-kurz) var(--kurve);
}
@media (hover: hover) {
    .rangliste__zeile:hover { border-color: var(--rand-hell); }
}


/* Die eigene Zeile in Bernstein — man sucht in einer Rangliste zuerst sich. */
.rangliste__zeile--ich {
    border-color: color-mix(in srgb, var(--mond) 55%, var(--rand));
    background: color-mix(in srgb, var(--mond) 10%, var(--flaeche-hoch));
}

.rangliste__platz {
    flex: none;
    width: 2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text-leise);
}

.rangliste__bild {
    flex: none;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--flaeche);
}

.rangliste__name {
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rangliste__zahlen {
    flex: none;
    font-size: var(--f-klein);
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}
.rangliste__ausz { white-space: nowrap; }

/* Schmale Geräte: Die Zahlen rutschen unter den Namen, statt ihn zu quetschen. */
@media (max-width: 26rem) {
    .rangliste__zeile { flex-wrap: wrap; }
    .rangliste__zahlen { width: 100%; padding-left: 2.75rem; }
}

/* ------------------------------------------------------------- Prüfpunkte */

.pruefpunkt {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--rand);
    font-size: var(--f-klein);
}
.pruefpunkt:last-child { border-bottom: none; }

/*
 * Häkchen und Kreuz tragen die Aussage selbst — die Farbe unterstützt sie nur.
 * Wer Farben nicht unterscheiden kann, erkennt ✓ und ✕ trotzdem.
 */
.pruefpunkt__zeichen {
    flex: none;
    width: 1.4rem;
    text-align: center;
    font-weight: 700;
}
.pruefpunkt__zeichen--gut    { color: var(--gruen); }
.pruefpunkt__zeichen--schlecht { color: var(--blut-schrift); }

/* -------------------------------------------------------------- Ladezustand */

.laedt {
    display: inline-block;
    width: 1.1em; height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- Leerlauf */

.leer {
    text-align: center;
    padding: var(--s7) var(--s4);
    color: var(--text-still);
}

/* ------------------------------------------------- Einstellungen im Profil */

/*
 * Alles, was man einmal einstellt und dann in Ruhe lässt, sitzt im Profil:
 * Name, Sinnbild, Darstellung, Lautstärken. Diese Abschnitte gliedern den
 * Dialog, damit er trotz seiner Länge lesbar bleibt.
 */
.abschnitt {
    padding-top: var(--s4);
    border-top: 1px solid var(--rand);
}
.abschnitt__titel {
    font-size: var(--f-winzig);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-still);
    margin: 0 0 var(--s3);
}

/* ---- Wahlgruppe: mehrere Knöpfe, von denen genau einer gilt */

.wahlgruppe {
    display: flex;
    /* Umbrechen statt überstehen: Die Stimmenwahl hat vier Knöpfe, und
       „Junger Mann" passt neben den drei anderen auf kein Telefon. Ohne das
       schob die Gruppe den ganzen Dialog seitlich hinaus. */
    flex-wrap: wrap;
    gap: var(--s1);
    padding: var(--s1);
    border-radius: var(--r-rund);
    background: var(--grund-erhoben);
    border: 1px solid var(--rand);
}
/* Für Gruppen mit langen Beschriftungen: Die Knöpfe messen sich am Text
   (flex-basis auto) statt alle gleich breit zu sein — nur so weiß der
   Umbruch oben, wann eine Zeile voll ist. Bei flex-basis 0 ist die
   gedachte Breite jedes Knopfes null, die Zeile also nie voll, und die
   Gruppe steht über den Rand hinaus. */
.wahlgruppe--breit .wahlgruppe__knopf { flex: 1 1 auto; }

/* Der Stapel: drei einzelne Knöpfe untereinander, gleich breit, ohne die
   gemeinsame Hülle. Für die Sichtbarkeit einer Runde (Startseite und Raum):
   Als gebündelte Pille sah das in einer schmalen Karte gedrungen aus —
   drei Zeilen Text in einem Oval. Hier ist jeder Knopf ein Knopf, und der
   gedrückte trägt den Bernsteinrand. */
.wahlgruppe--stapel {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--s2);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
.wahlgruppe--stapel .wahlgruppe__knopf {
    flex: none;
    width: 100%;
    white-space: normal;
    font-size: var(--f-normal);
    background: var(--grund-erhoben);
    border: 1px solid var(--rand);
    border-radius: var(--r-mittel);
}
.wahlgruppe--stapel .wahlgruppe__knopf--aktiv {
    background: var(--flaeche-hoch);
    border-color: var(--mond);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--schatten-mond);
}

.wahlgruppe__knopf {
    /* Kein Warten auf einen möglichen Doppeltipp — siehe .knopf. */
    touch-action: manipulation;
    flex: 1;
    min-height: var(--tippziel);
    padding: var(--s2) var(--s3);
    border: none;
    border-radius: var(--r-rund);
    background: transparent;
    color: var(--text-leise);
    font: inherit;
    font-size: var(--f-klein);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--zeit-kurz) var(--kurve),
                color var(--zeit-kurz) var(--kurve);
}
@media (hover: hover) {
    .wahlgruppe__knopf:hover { color: var(--text); }
}

.wahlgruppe__knopf--aktiv {
    background: var(--flaeche-hoch);
    color: var(--text);
    font-weight: 650;
    box-shadow: var(--schatten-klein);
}

/* ---- Regler */

.regler__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
}
.regler__wert {
    font-variant-numeric: tabular-nums;
    font-size: var(--f-klein);
    color: var(--mond);
    font-weight: 650;
}

/*
 * Der Schieber wird von Hand gezeichnet. Die Vorgabe der Browser fällt in
 * dieser Umgebung sonst aus dem Rahmen — und die Bahn muss auf dem Handy
 * dick genug sein, um sie zu treffen.
 */
.regler__schieber {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--tippziel);
    background: transparent;
    cursor: pointer;
}
.regler__schieber::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--r-rund);
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
}
.regler__schieber::-moz-range-track {
    height: 6px;
    border-radius: var(--r-rund);
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
}
.regler__schieber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: calc((6px - 1.35rem) / 2);
    border-radius: 50%;
    background: var(--mond);
    border: 2px solid var(--grund);
    box-shadow: var(--schatten-klein);
}
.regler__schieber::-moz-range-thumb {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--mond);
    border: 2px solid var(--grund);
    box-shadow: var(--schatten-klein);
}
.regler__schieber:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--mond);
    outline-offset: 2px;
}

/* Rollen-Spickzettel: Miniaturbild neben dem Rollennamen im Dialog. */
.spickzettel__kopf {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-bottom: var(--s3);
}
.spickzettel__bild {
    flex: none;
    width: 4.5rem;
    aspect-ratio: 640 / 936;
    border-radius: var(--r-klein);
    overflow: hidden;
    background: var(--flaeche-hoch);
}
.spickzettel__bild-img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ Freunde, Post */

/*
 * Zwei Reihen-Spielarten, die es vorher nur als Stilangabe am Element gab:
 * enger Abstand für „Bild und Name gehören zusammen", und die Verteilung auf
 * beide Ränder für „links wer, rechts was damit ist".
 */
.reihe--eng      { gap: var(--s2); }
.reihe--verteilt { justify-content: space-between; width: 100%; }

/* Grüner Punkt hinter dem Namen: „ist gerade da". Bewusst klein und ohne
   Beschriftung — daneben steht der Name, und mehr will die Angabe nicht
   sein. Für Vorleseprogramme trägt das Element ein aria-label. */
.punkt {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-left: var(--s2);
    border-radius: 50%;
    background: var(--rand);
    vertical-align: middle;
}
.punkt--an {
    background: var(--gruen);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen) 22%, transparent);
}

/* Eine Marke, die auf sich aufmerksam macht — „3 neu". */
.marke--wichtig {
    color: var(--grund);
    background: var(--mond);
    border-color: var(--mond);
}

/* Ein Reiter mit offenen Anfragen. Nur die Farbe, kein Punkt: Die Zahl steht
   ohnehin in der Beschriftung. */
.reiter__knopf--wichtig { color: var(--mond); }

/* .spieler__bild--klein steht in game.css, nicht hier: Dort steht auch
   .spieler__bild mit `width: 100%`, und game.css wird NACH dieser Datei
   geladen. Bei gleicher Spezifität gewinnt die spätere Regel — die
   Verkleinerung hätte hier keine Wirkung, und das Sinnbild wäre in der
   Freundesliste über die ganze Zeile flach gezogen. */

/*
 * Die Kopfzeile einer Freundeskarte ist ein Knopf über die volle Breite:
 * Antippen öffnet das Gespräch. Name links, Marke („2 neu") und Zeichen
 * rechts — deshalb space-between statt der Knopf-Mitte.
 */
/* Der Rudelruf an einer Freundeskarte: das Wolfszeichen, das sagt, ob
   dieser Freund mich ruft, wenn er eröffnet. Abgeschaltet wird es blass
   und durchgestrichen — nicht versteckt, denn dann wüsste niemand, dass es
   sich wieder einschalten lässt. */
.freunde__ruf {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-rund);
    padding: var(--s1) var(--s2);
    color: var(--text-leise);
    font-size: var(--f-klein);
    cursor: pointer;
    min-height: var(--tippziel);
}
.freunde__ruf .symbol { width: 1.1rem; height: 1.1rem; }
.freunde__ruf--an { color: var(--mond); border-color: color-mix(in srgb, var(--mond) 35%, transparent); }
.freunde__ruf--aus { opacity: .55; text-decoration: line-through; }
@media (hover: hover) {
    .freunde__ruf:hover { background: var(--flaeche); color: var(--text); }
}

.freunde__auf {
    width: 100%;
    justify-content: space-between;
    text-align: left;
    padding-inline: var(--s2);
}

/*
 * Der Nachrichtenverlauf.
 *
 * Feste Höhe mit eigenem Rollbereich: Der Dialog rollt als Ganzes, und ohne
 * eigenen Bereich wanderte das Eingabefeld beim dritten Satz aus dem Bild.
 */
.pn {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    max-height: 22rem;
    overflow-y: auto;
    padding: var(--s3);
    border: 1px solid var(--rand);
    border-radius: var(--r-mittel);
    background: var(--flaeche);
}

.pn__zeile {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    max-width: 85%;
    padding: var(--s3);
    border-radius: var(--r-mittel);
    background: var(--flaeche-hoch);
}
.pn__zeile--ich {
    align-self: flex-end;
    background: color-mix(in srgb, var(--mond) 18%, var(--flaeche-hoch));
}
.pn__zeile--du { align-self: flex-start; }

.pn__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.pn__wann { font-size: var(--f-winzig); color: var(--text-leise); }

/*
 * Hinweisband für ein Konto, dessen Adresse noch nicht bestätigt ist.
 *
 * Es steht oben auf der Startseite und nicht als Kurzmeldung: Eine Meldung
 * verschwindet nach vier Sekunden, dieser Zustand aber bleibt, bis jemand
 * etwas tut — und solange kommt man an keinen Tisch.
 */
.hinweisband {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4);
    margin-bottom: var(--s5);
    border-radius: var(--r-mittel);
    border: 1px solid color-mix(in srgb, var(--mond) 45%, transparent);
    background: color-mix(in srgb, var(--mond) 10%, var(--flaeche));
}
.hinweisband__text { flex: 1 1 16rem; margin: 0; }

/*
 * Der Unterstützungsaufruf über dem Sinnbild im Profil (ui/paket.js).
 *
 * Gegenstück zum Hinweisband und darum absichtlich anders gebaut: Das Band
 * ist eine Zeile mit einem Knopf am Rand — es soll wenig Platz kosten, weil
 * es ungefragt kommt. Dieser Kasten steht mittig, mit Wolf, Spruch und Text
 * untereinander. Er darf sich Zeit nehmen: Wer im Profil ist, ist freiwillig
 * dort und hat gerade nichts anderes vor.
 *
 * Der Rand bleibt sehr zurückhaltend (18 % Bernstein). Ein kräftiger Kasten
 * über dem eigenen Gesicht sähe aus wie eine Warnung, und das ist das Letzte,
 * was eine Bitte sein soll.
 */
.aufruf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    text-align: center;
    padding: var(--s5) var(--s4);
    margin-bottom: var(--s5);
    border-radius: var(--r-mittel);
    border: 1px solid color-mix(in srgb, var(--mond) 18%, transparent);
    background: color-mix(in srgb, var(--mond) 6%, var(--flaeche));
}

.aufruf__spruch {
    margin: 0;
    font-family: var(--schrift-display);
    font-size: var(--f-gross);
    line-height: 1.3;
    color: var(--mond);
}

/* Die Breite begrenzt, damit der Satz in Zeilen bricht, die man am Stück
   liest — über die volle Dialogbreite gezogen wäre er mühsam. */
.aufruf__text {
    margin: 0;
    max-width: 30rem;
    font-size: var(--f-klein);
    line-height: 1.5;
    color: var(--text-leise);
}

/* Das Zeichen der Wolfrunde über dem Spruch. Etwas kleiner als auf der
   Startseite: Hier steht es in einem Dialog, nicht auf einer leeren Seite. */
.aufruf__zeichen {
    width: 4.5rem;
    height: auto;
    filter: drop-shadow(0 0 16px rgba(240, 163, 92, .25));
}

.aufruf .knopf { margin-top: var(--s2); }

/*
 * Der kurze Aufruf nach einer beendeten Runde (ui/paket.js → nachRundeAufruf).
 *
 * **Er darf das Spiel nicht stören** — daraus folgt jede Entscheidung hier:
 *
 *   • `position: fixed` unten rechts statt in der Mitte: Er liegt neben dem
 *     Geschehen, nicht davor. Die Knöpfe „Noch eine Runde" und „Gleiche Runde
 *     weiter" bleiben frei.
 *   • Kein dunkler Grund dahinter, kein Fokusfang: Man kann ihn schlicht
 *     ignorieren und weiterspielen.
 *   • Er geht nach 14 Sekunden von allein. Wer nichts tut, hat nichts zu tun.
 *
 * Auf dem Handy sitzt er unten über die volle Breite — dort ist „unten
 * rechts" kein Ort, sondern ein Zufall.
 */
.rundenaufruf {
    position: fixed;
    right: var(--s4);
    bottom: var(--s4);
    z-index: 60;
    width: min(22rem, calc(100vw - 2 * var(--s4)));

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
    padding: var(--s4);
    padding-bottom: calc(var(--s4) + 3px);      /* Platz für den Balken */

    border-radius: var(--r-mittel);
    border: 1px solid color-mix(in srgb, var(--mond) 35%, transparent);
    background: color-mix(in srgb, var(--mond) 8%, var(--flaeche-hoch));
    box-shadow: 0 10px 30px rgb(0 0 0 / .45);
    overflow: hidden;

    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .3s ease, transform .3s ease;
}
.rundenaufruf--da { opacity: 1; transform: none; }
.rundenaufruf--zu { opacity: 0; transform: translateY(1rem); }

.rundenaufruf__zeichen { width: 1.75rem; height: 1.75rem; flex: none; }

.rundenaufruf__kopf {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-right: var(--s5);                   /* nicht unters Kreuz laufen */
}

.rundenaufruf__text {
    margin: 0;
    font-size: var(--f-klein);
    line-height: 1.45;
    color: var(--text-leise);
}

.rundenaufruf__zu {
    /* Kein Warten auf einen möglichen Doppeltipp — siehe .knopf. */
    touch-action: manipulation;
    position: absolute;
    top: var(--s2);
    right: var(--s2);
    width: 2rem; height: 2rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-rund);
    background: transparent;
    color: var(--text-leise);
    font-size: var(--f-klein);
    cursor: pointer;
}
@media (hover: hover) {
    .rundenaufruf__zu:hover { background: var(--flaeche); color: var(--text); }
}


/* Die verbleibende Zeit als schmaler Streifen am Fuß. Reines CSS: Die Dauer
   kommt als `--dauer` vom Element, die Animation zählt sie herunter. Kein
   Intervall, das man aufzuräumen vergessen könnte. */
.rundenaufruf__balken {
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    background: var(--mond);
    animation: rundenaufruf-ablauf var(--dauer, 14s) linear forwards;
}
@keyframes rundenaufruf-ablauf {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 34rem) {
    .rundenaufruf {
        right: var(--s3);
        left: var(--s3);
        bottom: var(--s3);
        width: auto;
    }
}

/* Ohne Bewegung: kein Einschweben, kein Ablaufbalken in Bewegung. Der Kasten
   ist trotzdem nach 14 Sekunden weg — die Uhr in JS läuft unabhängig. */
@media (prefers-reduced-motion: reduce) {
    .rundenaufruf { transition: none; opacity: 1; transform: none; }
    .rundenaufruf--zu { opacity: 0; }
    .rundenaufruf__balken { animation: none; transform: scaleX(1); opacity: .35; }
}

/* ------------------------------------------------------------------ Symbole */

/*
 * Ein Bedienungssymbol: Emoji als Rückfall, darüber das gezeichnete Bild der
 * gewählten Bilderwelt (core/bilder.js → symbolElement).
 *
 * Die Größe folgt der Schrift (`1em`), nicht einer festen Pixelzahl: Das
 * Symbol sitzt in Knöpfen, Überschriften und Fließtext, und überall soll es
 * zur Zeile passen. Ein bisschen größer als die Schrift darf es sein —
 * gezeichnete Symbole wirken bei gleicher Kantenlänge kleiner als ein Emoji,
 * weil sie Rand mitbringen.
 */
.symbol {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.22em;
    flex: none;
}

.symbol__zeichen {
    font-size: 0.9em;
    line-height: 1;

    /*
     * Der Emoji-Rückfall ist STANDARDMÄSSIG UNSICHTBAR.
     *
     * Bei den Avataren liegt das Emoji einfach unter dem Bild — die sind
     * deckend, es ist nie zu sehen. Symbole haben aber absichtlich
     * durchsichtige Stellen, und durch die schaute das Emoji hindurch: ein
     * Messingpokal mit einem Emoji-Pokal darin.
     *
     * `visibility` und nicht `display: none`: Das Zeichen behält seinen
     * Platz, das Symbol springt beim Umschalten also nicht.
     */
    visibility: hidden;
}
.symbol__zeichen--sichtbar { visibility: visible; }

.symbol__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Für Stellen, an denen das Symbol die Aussage trägt und nicht bloß
   begleitet: der Kasten nach der Bestätigung, leere Listen. */
.symbol--gross { width: 3em; height: 3em; }

/* Eine Wahl, die das Jahrespaket voraussetzt.
   Sichtbar, aber zurückgenommen — und anklickbar: Der Klick führt zum
   Paketdialog. Einen gesperrten Punkt ganz zu verstecken hieße, dass
   niemand erfährt, dass es ihn gibt. */
.wahlgruppe__knopf--zu {
    opacity: .55;
    font-style: italic;
}
@media (hover: hover) {
    .wahlgruppe__knopf--zu:hover { opacity: .8; }
}


/* ------------------------------------------------------------ Vorführrunde
 *
 * Das Band über dem Schaustück. Es bleibt die ganze Vorführung stehen, und
 * das ist Absicht: Niemand soll auch nur kurz glauben, er spiele gegen
 * Menschen. Deshalb klebt es oben (sticky) statt mitzuscrollen.
 *
 * Die Farbe ist die des Mondes, nicht die des Blutes — es ist ein Hinweis,
 * keine Warnung.
 */
.vorfuehrung__band {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--s3, .75rem);
    flex-wrap: wrap;
    padding: var(--s2, .5rem) var(--s3, .75rem);
    background: var(--grund-erhoben);
    border-bottom: 1px solid var(--mond-tief);
    box-shadow: 0 2px 12px rgb(0 0 0 / .35);
}

.vorfuehrung__band .knopf {
    margin-left: auto;
    flex: none;
}

.vorfuehrung__text {
    font-size: var(--f-klein);
    color: var(--text-leise);
    min-width: 12rem;
    flex: 1 1 18rem;
}

.vorfuehrung__text strong {
    color: var(--mond);
}


/* =====================================================================
   Die Besetzung: Waage, Vorlagen, Rollen-Chips (ui/besetzung.js, 13.09.2026)
   ===================================================================== */

.besetzung__titel {
    font-size: var(--f-klein);
    font-weight: 650;
    color: var(--text-leise);
    letter-spacing: .02em;
}

/* --- Die Waage: Mitte ist das Grundspiel, der grüne Korridor ist gut. --- */
.waage {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-mittel);
    border: 1px solid var(--rand);
    background: var(--flaeche);
    display: grid;
    gap: var(--s2);
}
.waage__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.waage__wort { font-weight: 650; }
.waage--kippt .waage__wort { color: var(--blut-schrift); }
.waage__bei, .waage__enden, .waage__topf { font-size: var(--f-winzig); color: var(--text-leise); }
/* Die dritte Partei: gehört nicht auf die Achse, sondern unter sie. Eigene
   Farbe, damit man sie nicht für einen Teil der Topf-Beschreibung hält. */
.waage__dritte {
    font-size: var(--f-winzig);
    color: var(--eigen);
    border-top: 1px solid var(--rand);
    padding-top: var(--s2);
}
.waage__dritte-marke {
    display: inline-block;
    font-weight: 650;
    margin-right: .4em;
}
.waage__balken {
    position: relative;
    height: .75rem;
    border-radius: var(--r-rund);
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
    overflow: visible;
}
.waage__korridor {
    position: absolute; top: 0; bottom: 0;
    background: color-mix(in srgb, var(--gruen) 28%, transparent);
    border-radius: var(--r-rund);
}
.waage__mitte {
    position: absolute; top: -.2rem; bottom: -.2rem; left: 50%;
    width: 2px; margin-left: -1px;
    background: var(--rand-hell);
}
.waage__zeiger {
    position: absolute; top: 50%;
    width: 1.1rem; height: 1.1rem;
    margin: -.55rem 0 0 -.55rem;
    border-radius: 50%;
    background: var(--gruen);
    border: 2px solid var(--flaeche);
    box-shadow: 0 1px 6px -1px rgba(0, 0, 0, .6);
    transition: left .35s ease, background-color .35s ease;
}
.waage--kippt .waage__zeiger { background: var(--blut); }
.waage__enden { display: flex; justify-content: space-between; }
.waage--leer { color: var(--text-leise); }

/* --- Vorlagen: Karten mit Satz, keine Rollenknöpfe. --- */
.vorlagen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--s2);
}
.vorlage {
    display: grid;
    gap: .15rem;
    text-align: left;
    padding: var(--s3);
    border-radius: var(--r-mittel);
    border: 1px solid var(--rand);
    background: var(--flaeche);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vorlage:hover { border-color: var(--rand-hell); }
.vorlage--aktiv {
    border-color: var(--mond);
    box-shadow: inset 0 0 0 1px var(--mond);
}
.vorlage--fern { opacity: .62; }
.vorlage__name { font-weight: 650; padding-right: 2.4rem; }
.vorlage__kurz { font-size: var(--f-klein); color: var(--text-leise); }
.vorlage__rollen { font-size: var(--f-winzig); color: var(--text-leise); }
.vorlage__ab {
    position: absolute; top: var(--s2); right: var(--s2);
    font-size: var(--f-winzig);
    padding: .1em .5em;
    border-radius: var(--r-rund);
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
    color: var(--text-leise);
}
.vorlage--fern .vorlage__ab { color: var(--blut-schrift); }

/* --- Rollen als Chips in Gruppen. --- */
.rollengruppe { display: grid; gap: var(--s2); }
.rollengruppe__kopf { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.rollengruppe__name { font-size: var(--f-klein); font-weight: 650; }
.rollengruppe__satz { font-size: var(--f-winzig); color: var(--text-leise); }

.chip {
    display: inline-flex;
    align-items: stretch;
    min-height: 2.25rem;
    border-radius: var(--r-rund);
    border: 1px solid var(--rand);
    background: transparent;
    color: var(--text-leise);
    font-size: var(--f-klein);
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip__name {
    display: inline-flex; align-items: center; gap: var(--s1);
    padding: 0 var(--s3);
    background: none; border: 0; color: inherit; font: inherit; cursor: default;
}
button.chip__name { cursor: pointer; }
.chip--an {
    color: var(--text);
    background: var(--flaeche-hoch);
    border-color: var(--rand-hell);
}
.chip--fest { border-color: var(--mond); }
.chip--los { border-style: dashed; }
.chip--weg { border-color: var(--blut); color: var(--blut-schrift); }
.chip__neu { margin-right: var(--s2); align-self: center; }
.chip__nadel {
    display: inline-flex; align-items: center;
    padding: 0 var(--s2) 0 var(--s1);
    border: 0; border-left: 1px solid var(--rand);
    background: none; color: var(--text-leise); cursor: pointer;
}
.chip--fest .chip__nadel { color: var(--mond); }
.chip__nadel .nadel { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.chip--fest .chip__nadel .nadel { fill: currentColor; }
@media (hover: hover) {
    .chip__nadel:hover { color: var(--text); }
}

/* Vorschlagsleuchten und Auffüllung (13.09.2026, Schritt 3 und 5). */
.chip--passt {
    border-color: color-mix(in srgb, var(--gruen) 70%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gruen) 35%, transparent), 0 0 10px -2px color-mix(in srgb, var(--gruen) 50%, transparent);
    color: var(--text);
}
.chip--kippt { opacity: .55; }
.chip--gefuellt {
    color: var(--text);
    border-style: dotted;
    border-color: var(--rand-hell);
    background: color-mix(in srgb, var(--flaeche-hoch) 60%, transparent);
}

/* Die Waage bleibt beim Scrollen durch die Rollen oben stehen (Elmar 13.09.);
   der Ring ist die Ziehung, der Punkt die Auswahl. */
.waage {
    position: sticky;
    top: calc(var(--kopf-hoehe, 3.25rem) + var(--s2));
    z-index: 5;
    box-shadow: var(--schatten-klein, 0 2px 8px -2px rgba(0, 0, 0, .5));
}
/* Nur beim Gastgeber, der Rollen antippt. Für Mitspieler ist die Waage ein
   Abschnitt wie jeder andere, der mitscrollt (Elmar 18.09.): Festgeklebt
   schob sie sich über Hinweise und Rollenliste, ohne dass dort etwas zu
   wählen wäre (ui/besetzung.js, `bearbeitbar`). */
.besetzung--still .waage {
    position: static;
    box-shadow: none;
}
/* Das Band: aus so vielen Zusammenstellungen wird gelost, so weit können
   sie auseinanderliegen. Es löst den hohlen Ring der Ziehung ab
   (13.09.2026, siehe ui/besetzung.js) — ein Punkt und ein Ring nebeneinander
   waren nicht zu lesen. Kräftiger als der Korridor, auf dem es liegt, und
   mit denselben runden Enden wie der Zeiger. */
.waage__band {
    position: absolute; top: 50%;
    height: 1.1rem;
    margin-top: -.55rem;
    min-width: 1.1rem;
    border-radius: var(--r-rund);
    background: var(--gruen);
    border: 2px solid var(--flaeche);
    box-shadow: 0 1px 6px -1px rgba(0, 0, 0, .6);
    transition: left .35s ease, width .35s ease, background-color .35s ease;
}
.waage--kippt .waage__band { background: var(--blut); }

/* Die Rückfrage am Partieende (ui/umfrage.js). Leise, bis jemand antippt. */
.umfrage__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.umfrage__frage { display: flex; flex-direction: column; gap: var(--s1); }
.umfrage__sterne { display: flex; gap: var(--s1); }
.umfrage__stern {
    min-width: 2.75rem; min-height: 2.75rem; padding: 0;
    background: none; border: 0; cursor: pointer;
    font-size: 1.9rem; line-height: 1; color: var(--text-still);
    transition: color .15s, transform .15s;
}
.umfrage__stern:hover { transform: scale(1.1); }
.umfrage__stern--an { color: var(--mond); }
.umfrage__stern:focus-visible { outline: 2px solid var(--mond); outline-offset: 2px; border-radius: var(--r-klein, 4px); }
.umfrage__ampel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s3); }
.umfrage__wahl { display: flex; gap: var(--s2); }