/*
 * Der Stationsrahmen und die Comic-Bühne.
 *
 * Hier steht, was JEDE Hürde bekommt – Plakette, Kopf, Auftrag, Eingangsfach,
 * Funk, Lehrkasten, Bescheid, Amtshilfe, Sprechregeln, Reiterleiste – dazu die
 * Bausteine aus `js/spiel/bausteine.js`, weil sie in mehr als einer Hürde
 * vorkommen. Was nur EINE Hürde braucht, steht in `css/stationen/<key>.css`.
 *
 * KEIN GEMEINSAMER ANKER: Die Rollenfarbe hängt an der Station selbst, und der
 * Schmierfink sitzt vor Papier, während die drei anderen vor Blech sitzen. Die
 * lokalen Eigenschaften `--role-*`, `--schirm-*` und `--schrift-*` tragen diesen
 * Unterschied. Sie stehen nicht in `tokens.css`, weil sie keinen Wert halten,
 * sondern eine Zuordnung – und weil sie pro Station ANDERS lauten müssen.
 */

/* ============================================== DIE STATION UND IHRE ROLLE == */

.station {
    --role-accent: var(--wr-stahl);
    --role-tief: var(--wr-ink-2);
    /* Auch der rollenlose Rückfall trägt Tinte: blankes Blechgrau käme auf
       3.57:1, die Blechfassung auf 5.37:1. */
    --role-licht: var(--wr-stahl-blech);
    --role-schrift: var(--wr-stahl-blech);
    --schirm: var(--wr-ink-2);
    --schirm-text: var(--wr-paper);
    --schirm-still: var(--wr-paper-dim);
    --schirm-stumm: var(--wr-stahl-blech);
    --schirm-signal: var(--wr-signal-blech);
    --schirm-kante: var(--wr-ink-3);
    --schirm-feld: var(--wr-feld-dunkel);

    /*
     * DIE VIER FREMDEN ROLLENFARBEN, umgeschaltet auf den Schirm, auf dem sie
     * landen. Zwei Stellen zeigen die Farbe eines ANDEREN Sitzes – der Ruf auf
     * der Personalakte und der Name über der Sprechblase –, und welche Fassung
     * dort richtig ist, entscheidet nicht die Rolle, sondern der Grund darunter.
     *
     * Deshalb steht die Tabelle hier oben und nicht bei den Blöcken selbst: Wer
     * unten eine neue Regel in einer fremden Rollenfarbe aufmacht, greift nach
     * `--schrift-<rolle>` und hängt damit im Netz, ohne die Umschaltung noch
     * einmal zu schreiben.
     *
     * Selma und Nuri stehen ohne eigene Blechfassung da – Blattgold und
     * Registergrün tragen auf dem dunkelsten Grund dieses Hauses schon 5.80:1
     * und 5.13:1. Ein zweiter Token mit demselben Wert liefe beim nächsten
     * Umbau still auseinander.
     */
    --schrift-schrauber: var(--wr-role-schrauber-blech);
    --schrift-schmierfink: var(--wr-role-schmierfink-blech);
    --schrift-faelscher: var(--wr-role-faelscher);
    --schrift-codeknacker: var(--wr-role-codeknacker);

    padding: var(--wr-gap-4);
    color: var(--schirm-text);
    background: var(--schirm);
    border: var(--wr-border-fat) solid var(--wr-ink);
    box-shadow: var(--wr-shadow);
}

.station[data-rolle='schrauber'] {
    --role-accent: var(--wr-role-schrauber);
    --role-tief: var(--wr-role-schrauber-tief);
    --role-licht: var(--wr-role-schrauber-licht);
    --role-schrift: var(--schrift-schrauber);
    --schirm: var(--wr-blech);

    /* Die Sicken eines Schaltschranks: ein Raster, keine Fläche. */
    background-image: repeating-linear-gradient(90deg, transparent 0 46px, rgba(60, 110, 155, 0.07) 46px 47px);
    border-color: var(--wr-role-schrauber);
}

.station[data-rolle='schmierfink'] {
    --role-accent: var(--wr-role-schmierfink);
    --role-tief: var(--wr-role-schmierfink-tief);
    --role-licht: var(--wr-role-schmierfink-licht);
    --role-schrift: var(--schrift-schmierfink);
    --schirm: var(--wr-paper);
    --schirm-text: var(--wr-ink);
    --schirm-still: var(--wr-signal-deep);
    --schirm-stumm: var(--wr-stahl-papier);
    --schirm-signal: var(--wr-signal-deep);
    --schirm-kante: var(--wr-paper-aged);
    --schirm-feld: var(--wr-feld-papier);

    /* Auf Papier kehrt die Tabelle sich um. Ansgar ist der einzige, der vier
       fremde Farben auf hellem Grund liest – deshalb steht die Umkehrung genau
       hier und nirgends sonst. */
    --schrift-schrauber: var(--wr-role-schrauber-papier);
    --schrift-schmierfink: var(--wr-role-schmierfink-papier);
    --schrift-faelscher: var(--wr-role-faelscher-papier);
    --schrift-codeknacker: var(--wr-role-codeknacker-papier);

    background-image: var(--wr-grain);
    background-size: 140px 140px;
}

.station[data-rolle='faelscher'] {
    --role-accent: var(--wr-role-faelscher);
    --role-tief: var(--wr-role-faelscher-tief);
    --role-licht: var(--wr-role-faelscher);
    --role-schrift: var(--schrift-faelscher);

    border-color: var(--wr-role-faelscher);
}

.station[data-rolle='codeknacker'] {
    --role-accent: var(--wr-role-codeknacker);
    --role-tief: var(--wr-role-codeknacker-tief);
    --role-licht: var(--wr-role-codeknacker);
    --role-schrift: var(--schrift-codeknacker);
    --schirm: var(--wr-ink);

    border-color: var(--wr-role-codeknacker);
}

/*
 * DIE AMTSSCHRIFT DER STATION steht einmal. Jede Marke, jedes Label und jede
 * Beschriftung dieses Hauses ist dieselbe Versalzeile; verschieden sind Grösse
 * und Farbe, und die stehen unten bei ihrem Block.
 */
.station__akt, .amtshilfe__preis, .wartet, .sprechregeln summary,
.reiter__knopf, .wechsel__satz, .reiter__dran, .einsatz,
.fach__art, .fach__von, .fach__sperre, .fach__fehl, .fach__quittung,
.bank__marke, .tafel caption, .tafel th, .blatt__nr,
.lehrkasten__kopf, .bescheid__kopf, .bescheid__gebuehr, .bescheid__label,
.buehne__ort, .buehne__wartet, .blase__wer, .wahl__fremd, .akte__grund {
    font-family: var(--wr-font-amt);
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
}

/* Und was einen SATZ trägt, bleibt gemischt: Versalien sind eine Marke, kein
   Fliesstext – und der Lehrkasten ist der eine Satz, der gelesen werden muss. */
.rueckfrage, .lehrkasten__satz, .lehrkasten__grund, .bescheid__satz,
.wahl__frage {
    font-family: var(--wr-font-amt);
    letter-spacing: var(--wr-tracking-amt);
}

/* ================================================== DIE ROLLENPLAKETTE ===== */

.plakette {
    display: flex;
    align-items: center;
    gap: var(--wr-gap-2);
    padding: var(--wr-gap-2);
    background: var(--role-tief);
    border-left: 4px solid var(--role-accent);
}

.station[data-rolle='schmierfink'] .plakette,
.station[data-rolle='schmierfink'] .station__kopf {
    background: var(--schirm-feld);
}

.plakette__portraet {
    display: block;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    background-color: var(--wr-ink-2);
    background-image: var(--art-src);
    background-size: cover;
    background-position: center 20%;
    border: 2px solid var(--role-accent);
}

.plakette__wappen {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    color: var(--role-accent);
}

.plakette__wappen svg,
.raste svg,
.hebel svg,
.akte__siegel svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.plakette__namen {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.plakette__namen strong {
    font-family: var(--wr-font-display);
    font-size: 1.02rem;
    overflow-wrap: anywhere;
    color: var(--schirm-text);
}

.plakette__namen span {
    font-family: var(--wr-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--role-schrift);
}

/* Nur das eigene Stück des Leimkreises: von wem etwas kommt, an wen es geht.
   Ein Bild des GANZEN Kreises stünde auf allen vier Schirmen gleich da. */
.plakette__kreis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-left: auto;
    font-family: var(--wr-font-amt);
    font-size: 0.68rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--schirm-still);
}

/*
 * „du" steht in Tinte auf der eigenen Rollenfarbe, und zwei der vier Flächen
 * trugen sie nicht: Maschinenblau kam auf 3.50:1, der Rotstift auf 3.83:1.
 * Papier statt Tinte half nicht (3.95 und 3.61) – bei diesen beiden ist die
 * FLÄCHE das Problem und nicht die Schrift.
 *
 * Die ertränkte Fassung mit heller Schrift hätte 11.9:1 gebracht und den Chip
 * abgeschafft: Die Plakette darunter steht selbst auf `--role-tief`, das Feld
 * wäre auf drei von vier Schirmen unsichtbar geworden. Also wandert die Fläche
 * in die andere Richtung, gerade so weit, dass Tinte darauf hält. Der
 * Farbabstand ist ein Hauch (#3c6e9b auf #4782b7) – das Bild bleibt dasselbe,
 * die Marke bleibt eine Marke.
 */
.plakette__ich {
    padding: 0.1rem 0.35rem;
    color: var(--wr-ink);
    background: var(--role-licht);
}

/*
  DER CHIP BEKOMMT AUF PAPIER EINE HAARLINIE.

  Die Aufhellung von --role-licht hat die SCHRIFT im Chip gerettet (3.83 →
  4.63) und dabei die MARKE als Marke verschlechtert: Auf Ansgars Papierschirm
  steht die Flaeche jetzt bei 2.62:1 gegen das Blatt, unter den 3.0, die
  WCAG 1.4.11 fuer Nichttext verlangt — vorher waren es 3.18. Der Chip hat
  keinen Rand; seine Kante IST die Flaeche.

  Auf den drei Blechschirmen zieht dieselbe Aufhellung beide Richtungen nach
  oben (3.00 → 3.96). Deshalb steht die Linie NUR hier: Sie kostet zwei Pixel,
  und zwei Pixel auf drei Schirmen ohne Not sind zwei Pixel zu viel.
*/
.station[data-rolle='schmierfink'] .plakette__ich {
    border: 1px solid var(--wr-ink);
}

.plakette__kreis b {
    color: var(--role-schrift);
}

/* ================================================ KOPF, AKT UND AUFTRAG ==== */

.station__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wr-gap-2);
    margin-bottom: var(--wr-gap-3);
    padding: var(--wr-gap-2);
    background: var(--role-tief);
    border-left: 4px solid var(--role-accent);
    border-bottom: 2px solid var(--role-accent);
}

/* Ohne `min-width: 0` gilt für ein Flex-Kind die Breite seines längsten
   Wortes – REGISTERWAHRHEIT schob den Kaffeeknopf mitten in den Kopf. */
.station__kopf h2 {
    min-width: 0;
    hyphens: auto;
    overflow-wrap: anywhere;
    color: var(--schirm-text);
}

/* Akt und Auftrag bekommen eine eigene Zeile im Kopf; ohne `flex-basis`
   stünden sie neben dem Titel. */
.station__akt {
    flex-basis: 100%;
    font-size: 0.68rem;
    color: var(--role-schrift);
}

.station__auftrag {
    flex-basis: 100%;
    margin: var(--wr-gap-1) 0 0;
    max-width: var(--wr-mass);
    font-family: var(--wr-font-doc);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--schirm-still);
}

/*
 * `align-self: center` ist Pflicht: Der Kopf richtet an der Grundlinie aus,
 * und eine 44 px hohe Fläche hat keine, die zu einer Überschrift passt. Seine
 * Farbe kommt NICHT aus der Rolle – er hält den ganzen Tisch an.
 */
.station__pause {
    align-self: center;
    margin-left: auto;
    padding: 0.4em 0.9em;
    font-size: 0.78rem;
}

/* Sie zählt hoch, wird nie knapp, hängt an keinem `data-ts`: eine Uhr, keine
   Frist. Sie steht ausserhalb der Station. */
.einsatz {
    display: flex;
    gap: var(--wr-gap-2);
    align-items: baseline;
    justify-content: flex-end;
    margin-bottom: var(--wr-gap-2);
    font-size: 0.7rem;
    color: var(--wr-stahl);
}

.einsatz__wert {
    font-family: var(--wr-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--wr-paper-dim);
}

/* ======================================== RÜCKFRAGE, LEHRKASTEN, BESCHEID == */

/*
 * Ein Fernschreiberstreifen quer im Bild. Er kommt bei allen gleichzeitig an –
 * wer gemeint ist, muss die Gruppe selbst herausfinden.
 *
 * SEIN KASTEN BLEIBT AM ZEILENMASS, und das ist NICHT derselbe Fall wie beim
 * Blatt daneben. Dort trug eine Fläche das Mass, das dem Satz darin gehörte —
 * hier sind Fläche und Satz dasselbe Element, und das Mass greift zu Recht.
 *
 * Ein Anlauf, ihn über die volle Spalte zu ziehen, ist zurückgenommen: Der
 * Streifen stand danach 1145 Pixel breit da und trug eine Textspalte von 450.
 * Der Grund ist die Amtsschrift — sie ist so schmal, dass fünfundsiebzig
 * Zeichen darin 450 Pixel messen. Eine Zeile, die den Streifen wirklich füllt,
 * trüge hundertneunzig Zeichen, und die liest niemand. Was nach einer
 * ausgefransten Kante aussah, ist ein Mass, das seine Arbeit tut.
 */
.rueckfrage {
    margin-bottom: var(--wr-gap-2);
    padding: var(--wr-gap-3);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--wr-ink);
    background: var(--wr-bernstein);
    border-left: 6px solid var(--wr-ink);
}

/*
 * DER LEHRKASTEN steht bei allen vier und bleibt, bis der Vorgang weiterrückt:
 * Vorher war ein Fehlgriff ein Toast von vier Sekunden, und nur bei dem, der
 * geklickt hatte – die anderen drei wiederholten dieselbe falsche Ansage.
 * Die Kopfzeile sagt in Worten, was die Farbe meint.
 *
 * UND ER TRÄGT MIT DER RÜCKFRAGE UND DEM BESCHEID DIE WICHTIGSTEN SÄTZE DER
 * STATION – auf einem VU-Meter-Ton. Eine Signalfläche ist kein Lesegrund: Alle
 * drei bekommen deshalb Luft auf allen vier Seiten und eine Zeilenhöhe von 1,5.
 * Der Grund bleibt Bernstein, damit der Kasten auf allen vier Schirmen ein
 * Kasten bleibt (die Rechnung dazu steht bei --wr-signal-bernstein).
 */
.lehrkasten,
.bescheid {
    margin-bottom: var(--wr-gap-3);
    padding: var(--wr-gap-3);
    color: var(--wr-ink);
    background: var(--wr-bernstein);
}

.lehrkasten {
    border-left: 10px solid var(--wr-signal);
    border-right: 10px solid var(--wr-signal);
}

/* Doppelt angerissen: Diesen Kasten hat jemand bezahlt. */
.bescheid {
    border-left: 10px double var(--wr-signal);
}

/*
 * Elf Pixel, Versalien, gesperrt, in der schmalen Amtsschrift – und das in
 * --wr-signal-deep, das auf Bernstein nur 4.57:1 trägt. Beides zusammen war
 * der Kasten, den niemand zu Ende las. Ein Grad mehr und der tiefere Stempel:
 * 12,8 px bei 7.47:1.
 */
.lehrkasten__kopf,
.bescheid__kopf,
.bescheid__gebuehr,
.bescheid__label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wr-signal-bernstein);
}

/* Der eine Satz, der wirklich gelesen werden muss. Deshalb der grösste. */
.lehrkasten__satz {
    margin: var(--wr-gap-1) 0 0;
    max-width: var(--wr-mass);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Und darunter, kleiner: WORAN es lag. Nie, welcher Wert richtig wäre. */
.lehrkasten__grund {
    margin: var(--wr-gap-1) 0 0;
    max-width: var(--wr-mass);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--wr-signal-bernstein);
}

/* Die Trennlinie ist eine FLÄCHE und trägt kein Zeilenmass: Als Absatz erbte
   sie --wr-mass aus base.css und endete mitten im Kasten – ein Strich, der auf
   halber Breite abbricht, sieht nach kaputtem Rahmen aus. Der Satz darunter
   passt bei jeder Breite in eine Zeile. */
.bescheid__gebuehr {
    margin-top: var(--wr-gap-2);
    padding-top: var(--wr-gap-1);
    max-width: none;
    border-top: 1px solid var(--wr-ink);
}

.bescheid__zeile {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: var(--wr-gap-1) var(--wr-gap-2);
    margin: var(--wr-gap-2) 0 0;
}

.bescheid__satz {
    max-width: var(--wr-mass);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Die gekaufte Zeile trägt die Zahlen und steht deshalb am schwersten da. */
[data-testid='bescheid-loesung'] .bescheid__satz {
    font-size: 1rem;
    font-weight: 700;
    hyphens: none;
}

/* Ein Knopf, den man suchen muss, wird seltener gedrückt. */
.amtshilfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wr-gap-2);
    margin-top: var(--wr-gap-4);
}

.amtshilfe__preis {
    font-size: 0.7rem;
    color: var(--schirm-still);
}

/* ================================== GESCHAFFT, WARTEN, HINWEIS, FUNK ======= */

.geschafft {
    padding: var(--wr-gap-2) var(--wr-gap-3);
    font-family: var(--wr-font-display);
    font-size: 1.05rem;
    color: var(--wr-phosphor);
    background: var(--wr-phosphor-tief);
    border: var(--wr-border) solid var(--wr-phosphor);
}

.wartet {
    padding: var(--wr-gap-2) var(--wr-gap-3);
    font-size: 0.78rem;
    color: var(--schirm-still);
    border: 1px dashed var(--schirm-still);
}

.hinweis {
    margin-bottom: var(--wr-gap-4);
    font-family: var(--wr-font-letter);
    font-size: 1.15rem;
    color: var(--schirm-still);
}

.funk {
    margin-top: var(--wr-gap-4);
    padding-top: var(--wr-gap-2);
    font-family: var(--wr-font-doc);
    font-size: 0.82rem;
    color: var(--schirm-still);
    border-top: 1px dashed var(--schirm-kante);
}

/* Signalrot ist eine Lampe und kein Lesetext: Auf dem Blech stand die Zeile bei
   3.24:1, auf Ansgars Papier bei 3.92:1. `--schirm-signal` hält beide Enden. */
.funk li[data-von='kartell'] {
    color: var(--schirm-signal);
}

.sprechregeln {
    margin-top: var(--wr-gap-4);
    padding: var(--wr-gap-2);
    border-top: 1px solid var(--schirm-kante);
}

/* Die Tippfläche kommt aus der Polsterung, nicht aus der Schriftgrösse. */
.sprechregeln summary {
    padding-block: 0.85rem;
    font-size: 0.7rem;
    color: var(--schirm-still);
    cursor: pointer;
}

.sprechregeln ol {
    margin: var(--wr-gap-1) 0 0;
    padding-left: 1.4rem;
    font-family: var(--wr-font-letter);
    font-size: 0.95rem;
    color: var(--schirm-still);
}

/* ======================================================= DIE REITERLEISTE == */

.reiter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wr-gap-1);
    margin-bottom: var(--wr-gap-3);
    padding-bottom: var(--wr-gap-1);
    border-bottom: 2px solid var(--schirm-kante);
}

.reiter__knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--wr-gap-1);
    min-height: 44px;
    min-width: 44px;
    padding: 0.4em 0.9em;
    font-size: 0.78rem;
    color: var(--schirm-still);
    background: transparent;
    border: var(--wr-border) solid var(--schirm-kante);
    border-bottom-color: transparent;
    cursor: pointer;
}

.reiter__knopf[aria-selected='true'] {
    color: var(--schirm-text);
    background: var(--role-tief);
    border-color: var(--role-accent);
}

.reiter__punkt {
    width: 10px;
    height: 10px;
    background: currentColor;
}

.reiter__knopf[aria-selected='true'] .reiter__punkt {
    background: var(--role-accent);
}

/*
 * Das Abzeichen (dran) steht ausschliesslich auf der Comic-Bühne. In einer
 * Hürde wäre es die Auskunft, die die Amtshilfe einen Aktenvermerk kostet.
 *
 * ES IST EIN CHIP UND KEIN WORT. Hier stand blankes Bernstein auf dem Grund
 * der Station – auf Ansgars Papier waren das 1.65:1, der schlechteste Wert des
 * ganzen Hauses. Fall 01 zeichnet dasselbe Abzeichen seit jeher als Chip, Tinte
 * auf Senf, und kommt damit auf 8.76:1; hier sind es 8.40:1. Das ist keine neue
 * Idee, sondern die,
 * die auf dem Weg hierher verlorengegangen ist. Eckig, wie alles hier.
 */
.reiter__dran {
    padding: 0.1rem 0.35rem;
    font-size: 0.68rem;
    color: var(--wr-ink);
    background: var(--wr-bernstein);
}

/* ======================================================= DAS WECHSELBAND === */

/*
 * DER PLATZWECHSEL ALS VORGANG, QUER ÜBER DEM PULT.
 *
 * Er stand als Zeile am rechten Rand der Reiterleiste — „Hände frei in 4 s",
 * 0,68 rem, in --schirm-still — und dort hat ihn niemand gelesen: Wer den
 * Reiter zieht, schaut auf die neue Station. Vier Sekunden lang lag also ein
 * vollständiger Schaltschrank da, an dem kein Griff ging, und das ist von einer
 * abgerissenen Leitung nicht zu unterscheiden.
 *
 * ES SCHREIBT IN DEN TÖNEN SEINES EIGENEN SCHIRMS und braucht deshalb keine
 * zweite Regel für Ansgars Papier: --schirm-text und --schirm-kante kehren sich
 * dort von selbst um. Kein Signalton — Rot heißt in diesem Haus „etwas ist
 * schiefgegangen", und hier geht nichts schief.
 *
 * DER BALKEN FÄLLT IN STUFEN und hat mit Absicht keine `transition`: Die
 * eisernen Verbote lassen 120 ms zu, und vier Sekunden weiches Auslaufen wären
 * ein Ladebalken aus einer anderen Welt. Seinen Anteil setzt `fristen()` im
 * Sekundentakt.
 */
.wechsel {
    display: grid;
    gap: var(--wr-gap-2);
    margin-bottom: var(--wr-gap-3);
    padding: var(--wr-gap-2);
    color: var(--schirm-text);
    border: var(--wr-border) solid var(--schirm-kante);
}

/* Schrift, Sperrung und Versalien stehen oben in der Amtsschrift-Sammelregel
   der Station — hier steht nur, wie der Satz liegt. */
.wechsel__satz {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wr-gap-2);
    margin: 0;
    font-size: 0.78rem;
}

/* Die Ziffer in der Maschinenschrift, wie jede Zahl, die über den Tisch geht —
   und ohne Bindestrich-Trennung, damit aus einer 4 nie eine Falle wird. */
.wechsel__rest {
    font-family: var(--wr-font-mono);
    hyphens: none;
}

/*
 * DIE SCHIENE TRÄGT IHRE DECKKRAFT IM PSEUDOELEMENT UND NICHT AN SICH SELBST.
 *
 * `opacity` macht einen Stapelkontext und gilt für den ganzen Teilbaum: Stünde
 * sie am Kasten, liefe der Balken DARIN ebenfalls auf 22 Prozent und wäre von
 * seiner eigenen Schiene nicht mehr zu unterscheiden.
 */
.wechsel__bahn {
    position: relative;
    height: 6px;
}

.wechsel__bahn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.22;
}

.wechsel__fuellung {
    position: relative;
    display: block;
    height: 100%;
    background: currentColor;
    /* Ohne Nenner (Cockpit, Neuladen mitten in der Sperre) steht er voll da. */
    transform: scaleX(var(--wechsel-anteil, 1));
    transform-origin: left center;
}

/* ====================================================== DAS EINGANGSFACH === */

.fach {
    display: grid;
    gap: var(--wr-gap-2);
    margin-bottom: var(--wr-gap-3);
    padding: var(--wr-gap-2);
    border: 1px dashed var(--schirm-kante);
}

.fach__zettel,
.fach__quittung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wr-gap-1) var(--wr-gap-2);
    margin: 0;
}

/* Die ART gehört in die Ansage: Laufen zwei Zettel gleichzeitig, kostet
   „der Wortlaut ist 13" einen gesperrten Vorgang. */
.fach__art {
    font-size: 0.72rem;
    color: var(--role-schrift);
}

.fach__schwarz {
    padding: 0 0.3em;
    font-family: var(--wr-font-mono);
    letter-spacing: -0.08em;
    color: var(--wr-ink);
    background: var(--wr-ink);
}

.fach__von,
.fach__quittung {
    font-size: 0.7rem;
    color: var(--schirm-still);
}

.fach__sperre,
.fach__fehl {
    font-size: 0.7rem;
    color: var(--schirm-signal);
}

.fach__zettel input {
    flex: 1 1 8rem;
    min-width: 6rem;
    min-height: 44px;
}

/* ================================================ SCHRAUBER: DIE WERKBANK == */

/*
 * DIE SPALTE MUSS DIE SKALA TRAGEN. 22rem ist die Untergrenze aus dem Cockpit
 * selbst; das `min(…, 100%)` hält sie auf 375 px im Bild – sonst scrollt die
 * ganze Station seitwärts.
 */
.bank {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--wr-gap-4);
    align-items: start;
}

.bank__marke {
    display: block;
    margin-top: var(--wr-gap-1);
    font-size: 0.66rem;
    color: var(--schirm-still);
}

/* Jede Bank liegt in ihrem eigenen Kasten. Ohne ihn stünden drei Geräte ohne
   Grenze nebeneinander, und auf welche Skala ein Knopf gehört, stünde nirgends. */
.bank__handrad,
.bank__hebel,
.bank__freigabe {
    padding: var(--wr-gap-2);
    background: var(--wr-blech);
    border: var(--wr-border) solid var(--wr-ink-3);
}

.bank__hebel,
.bank__freigabe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wr-gap-2);
}

.bank__hebel .bank__marke,
.bank__freigabe .bank__marke {
    flex-basis: 100%;
}

.nonius {
    position: relative;
    /* Platz für die Ziffernreihe am Kopf der Skala. */
    height: 4.2rem;
    background: var(--wr-ink);
    border: 2px solid var(--wr-ink-3);
}

/* Ein Strich ist eine Stufe, und wie viele es sind, sagt die Bank selbst.
   Stünde hier eine feste Zahl, wäre an einer Skala bis vierzig ein Strich
   eine halbe Stufe. */
.nonius__skala {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg, var(--wr-stahl) 0 1px, transparent 1px calc(100% / var(--stufen, 80))),
        repeating-linear-gradient(90deg, var(--wr-paper-dim) 0 2px, transparent 2px calc(100% / calc(var(--stufen, 80) / 10)));
    background-size: 100% 30%, 100% 55%;
    background-position: bottom left;
    background-repeat: repeat-x;
}

.nonius__ziffern {
    position: absolute;
    top: 0.15rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-family: var(--wr-font-mono);
    font-size: 0.62rem;
    color: var(--wr-paper-dim);
}

/* Ohne Verschiebung stünde jede Ziffer neben ihrem Strich, nicht darüber –
   die erste linksbündig, die letzte rechtsbündig, sonst hinge sie über. */
.nonius__ziffern span {
    transform: translateX(-50%);
}

.nonius__ziffern span:first-child {
    transform: none;
}

.nonius__ziffern span:last-child {
    transform: translateX(-100%);
}

.nonius__zeiger {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--pos, 0%);
    width: 3px;
    background: var(--wr-signal);
}

/*
 * DIE SKALA HAT IHRE EIGENE ZEILE, IMMER – auf dem Telefon wie am
 * Schreibtisch. In einer Reihe mit Zählwerk und vier Rastknöpfen blieben auf
 * 375 px neununddreissig Pixel für achtzig Stufen: ein halber Pixel je Stufe.
 */
.nonius__regler {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: var(--wr-gap-1);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.nonius__regler::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--wr-ink-3);
}

.nonius__regler::-webkit-slider-thumb {
    width: 22px;
    height: 34px;
    margin-top: -14px;
    background: var(--wr-paper);
    border: 2px solid var(--wr-ink);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.nonius__regler::-moz-range-track {
    height: 6px;
    background: var(--wr-ink-3);
}

.nonius__regler::-moz-range-thumb {
    width: 22px;
    height: 34px;
    background: var(--wr-paper);
    border: 2px solid var(--wr-ink);
    border-radius: 0;
}

/* [−10] [−1] [ 26 ] [+1] [+10] – wer eine Stufe zurück will, greift nach
   innen; wer weit will, nach aussen. Beides einhändig. */
.nonius__stand {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--wr-gap-1);
    margin-top: var(--wr-gap-2);
}

/*
 * DAS ZÄHLWERK IST DAS EINGABEFELD. Zwei Anzeigen desselben Werts, die
 * auseinanderlaufen können, sind schlimmer als eine. Die Spinner-Pfeile sind
 * weg: neun Pixel breit neben vier Knöpfen von achtundvierzig.
 */
.nonius__zahl {
    flex: 1 1 auto;
    min-width: 3.5ch;
    max-width: 7ch;
    min-height: 48px;
    padding: 0 var(--wr-gap-1);
    font-family: var(--wr-font-mono);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wr-tracking-mono);
    text-align: center;
    hyphens: none;
    color: var(--wr-phosphor);
    background: var(--wr-ink);
    border: var(--wr-border) solid var(--wr-ink-3);
    box-shadow: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.nonius__zahl::-webkit-outer-spin-button,
.nonius__zahl::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

/*
  KEIN `outline: none`. Hier stand es, und damit war der einzige
  Tastaturhinweis am Zaehlwerk ein Rahmenfarbwechsel unter 3:1 — auf dem
  Schirm, an dem eine Zahl eingetippt wird, die anschliessend ueber den Tisch
  gerufen wird. Der Rahmen bleibt, der Ring des Hauses kommt dazu.
*/
.nonius__zahl:focus-visible {
    border-color: var(--role-accent);
}

.nonius__arretieren {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: var(--wr-gap-2);
}

/*
 * DIE VIER RASTKNÖPFE. Achtzig Stufen sind mit der Maus nicht zu treffen: Wer
 * zog, sprang von achtundzwanzig auf neununddreissig. Achtundvierzig Pixel in
 * beide Richtungen – vierundvierzig ist das Minimum des Handytests, und ein
 * Minimum ist kein Mass für den Knopf, der hier am häufigsten trifft.
 */
.raste {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0.6rem;
    color: var(--wr-paper);
    background: var(--wr-ink-2);
    border: 2px solid var(--wr-ink-3);
    cursor: pointer;
}

.raste--zehn {
    color: var(--wr-paper-dim);
}

.hebel {
    width: 56px;
    height: 56px;
    padding: 0.55rem;
    color: var(--wr-paper-dim);
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
    cursor: pointer;
    transition: transform var(--wr-schnell);
}

.hebel[data-gelegt='1'] {
    color: var(--wr-ink);
    background: var(--role-licht);
    border-color: var(--wr-ink);
    transform: translateY(2px);
}

/* ================================================ SCHMIERFINK: KLARTEXT ==== */

/*
 * Ein Laufzettel, kein Gesetz: Jede Zeile trägt eine Nummer und einen Satz mit
 * einem Verb. Die Nummer steht in einer eigenen Spalte, damit der Vorleser die
 * Reihe nicht verliert.
 *
 * DER KASTEN IST EINE FLÄCHE, DER SATZ DARIN TRÄGT DAS MASS.
 *
 * Das Zeilenmass stand am KASTEN, und damit endete das Blatt auf 1440 px bei
 * 825 Pixeln, während Tafel und Eingangsfach darunter auf 1145 liefen: drei
 * linksbündige Breiten übereinander, rechts ausgefranst, und der Kasten sah
 * nach Fehler aus statt nach Dokument.
 *
 * Die Bibel trennt beides (Abschnitt 7) – wer eine Fläche baut, nimmt
 * --wr-shell, wer Text setzt, --wr-mass. Gestrichen ist das Mass deshalb
 * nicht; es ist eine Zeile tiefer gewandert, an .blatt__satz, wo der Satz
 * wirklich steht. Auf 375 px ändert das nichts: Dort war 75ch ohnehin breiter
 * als der Schirm.
 */
.blatt {
    padding: var(--wr-gap-3);
    background: var(--schirm-feld);
    border-left: var(--wr-border-fat) solid var(--wr-signal-deep);
}

/*
 * Jede Zeile ist ihr EIGENES Raster, und die Nummernspalte muss deshalb zwei
 * Dinge zugleich können: 1, 2 und 3 bündig untereinander halten – dafür die
 * Untergrenze – und wachsen, wenn statt einer Ziffer ein Wort darin steht.
 * „Achtung" misst 42 px und sprengte die festen 2.6rem: Auf dem Schirm stand
 * „ACHTUNGDer Kontakt …" ohne Fuge.
 */
.blatt__zeile {
    display: grid;
    grid-template-columns: minmax(2.6rem, max-content) 1fr;
    gap: var(--wr-gap-1) var(--wr-gap-2);
    margin: 0 0 var(--wr-gap-2);
    max-width: none;
}

/* An der ERSTEN Textzeile, nicht mittig neben einem dreizeiligen Satz: Die
   Grundlinie bindet die Marke an den Satz, den sie bezeichnet. */
.blatt__nr {
    align-self: baseline;
    font-size: 0.78rem;
    color: var(--wr-signal-deep);
}

.blatt__satz {
    max-width: var(--wr-mass);
    overflow-wrap: anywhere;
}

.blatt__zeile--titel .blatt__satz {
    font-family: var(--wr-font-display);
    font-size: 1.05rem;
    text-transform: uppercase;
}

.blatt__zeile--schritt .blatt__satz {
    font-size: 1.02rem;
    line-height: 1.45;
}

/* Die Falle ist das Gegenteil eines Schrittes und darf nie als vierter
   gelesen werden. */
.blatt__zeile--achtung {
    padding: var(--wr-gap-1) var(--wr-gap-2);
    background: rgba(200, 50, 31, 0.09);
    border-left: 5px solid var(--wr-signal);
}

.blatt__marke {
    padding: 0 0.2em;
    font-weight: 700;
    color: var(--wr-ink);
    background: var(--wr-bernstein);
}

/* Die Trennlinie IST die Fläche und muss deshalb den Kasten queren. Als <p>
   erbte die Fussleiste `max-width: 75ch` aus der base.css, und der Strich brach
   auf halber Kastenbreite ab – derselbe Griff wie beim Blatt darüber, nur eine
   Regel tiefer. Ein Satz, eine Zeile: Ein Mass braucht sie nicht. */
.blatt__fuss {
    max-width: none;
    margin: var(--wr-gap-3) 0 0;
    padding-top: var(--wr-gap-2);
    font-size: 0.82rem;
    color: var(--wr-signal-deep);
    border-top: 1px dashed var(--wr-paper-aged);
}

/* Eine Zeile rein, eine Zeile raus. Wer eine breitere Tafel setzt, legt sie in
   einen `.tafel-wrap` – der Rumpf scrollt nie seitwärts, auch nicht auf 375 px. */
.tafel-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.tafel {
    width: 100%;
    margin: var(--wr-gap-2) 0;
    font-size: 0.88rem;
    border-collapse: collapse;
}

.tafel caption {
    margin-bottom: var(--wr-gap-1);
    font-size: 0.72rem;
    text-align: left;
    color: var(--schirm-still);
}

.tafel th,
.tafel td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    vertical-align: top;
    hyphens: auto;
    overflow-wrap: anywhere;
    border: 1px solid var(--schirm-kante);
}

.tafel th {
    font-size: 0.68rem;
    color: var(--schirm-still);
}

/*
 * Eine Kennzahl wird über den Tisch gerufen: `hyphens: none`, denn ein
 * Trennstrich in einer Zahl ist eine Falle. Was hier NICHT stehen darf, ist
 * `white-space: nowrap` – ein einziger langer Schlüssel schöbe die Tafel dann
 * über die Kante der Station, und der Rumpf scrollte seitwärts. Umbrochen wird
 * ohne Strich, über das `overflow-wrap: anywhere` der Zelle darüber.
 */
.tafel__schluessel {
    font-family: var(--wr-font-mono);
    font-variant-numeric: tabular-nums;
    hyphens: none;
}

.tafel tr[data-gesteckt='1'] {
    color: var(--wr-ink);
    background: var(--wr-bernstein);
}

/* ====================================== FÄLSCHER UND VERMERKBOGEN ========== */

.leuchtkasten__werkzeuge {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-1);
    margin-bottom: var(--wr-gap-2);
}

.leuchtkasten__werkzeuge button[aria-selected='true'] {
    color: var(--wr-ink);
    background: var(--role-licht);
    border-color: var(--wr-ink);
}

.leuchtkasten__sicht {
    max-width: var(--wr-mass);
    margin: 0;
    padding: var(--wr-gap-3);
    font-family: var(--wr-font-doc);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--schirm-text);
    background: var(--schirm-feld);
    border-left: var(--wr-border-fat) solid var(--role-accent);
}

.vermerkbogen__zeile {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--wr-gap-1) var(--wr-gap-2);
    align-items: end;
    margin-bottom: var(--wr-gap-2);
}

.vermerkbogen__zeile label {
    grid-column: 1 / -1;
    margin-bottom: 0;
    color: var(--schirm-still);
}

.vermerkbogen__zeile input {
    min-height: 44px;
}

/* ====================================================== DIE COMIC-BÜHNE ==== */

/* Der EINE gemeinsame Anker dieses Spiels, und er ist gewollt: dasselbe Panel,
   derselbe Ort, dieselbe Erzählerstimme bei allen vier. */
.buehne {
    display: grid;
    gap: var(--wr-gap-3);
    max-width: var(--wr-buehne);
}

/* Zwei Spalten, sobald das FENSTER sie hergibt – nicht das Gerät.
   Untereinander schob die Blase das Panel aus dem Bild, und wer scrollte,
   hatte entweder die Zeichnung oder den Text. */
@media (min-width: 62rem) {
    .buehne {
        grid-template-columns: minmax(0, 3fr) minmax(21rem, 2fr);
        grid-template-areas:
            'takt   takt'
            'panel  stimme'
            'fuss   fuss';
        align-items: start;
    }

    /*
     * DIE VIER BEREICHE GELTEN NUR ALS KIND DER BÜHNE. Ohne Kindselektor traf
     * `grid-area: takt` jedes gleichnamige Element im Haus – auch das der
     * Personalakten, die ihr eigenes Raster ohne benannte Bereiche führen. Ein
     * benannter Bereich in einem fremden Raster reisst eine zweite Spalte auf.
     */
    .buehne > .buehne__takt {
        grid-area: takt;
    }

    .buehne > .buehne__panel {
        grid-area: panel;
    }

    .buehne > .buehne__stimme {
        grid-area: stimme;
    }

    .buehne > .buehne__fuss {
        grid-area: fuss;
    }

    /* In der Spalte gilt die Spaltenbreite als Zeilenmass – 75ch wären hier
       eine Breite, die es nicht gibt. */
    .buehne__stimme .buehne__erzaehler,
    .buehne__stimme .buehne__folge,
    .buehne__stimme .blase {
        max-width: none;
    }
}

.buehne__stimme {
    display: grid;
    gap: var(--wr-gap-3);
    align-content: start;
    min-width: 0;
}

.buehne__stimme .blase {
    margin-top: 0;
}

.buehne__fuss {
    display: grid;
    gap: var(--wr-gap-2);
    justify-items: start;
}

.buehne__takt {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-1);
}

.buehne__marke {
    width: 2.2rem;
    height: 4px;
    background: var(--schirm-kante);
}

.buehne__marke[data-voll='1'] {
    background: var(--role-accent);
}

.buehne__panel,
.akte__panel {
    position: relative;
    /* Hält eine Bewegtschleife im Rahmen – siehe .art__schleife. */
    overflow: hidden;
    margin: 0;
    aspect-ratio: 16 / 9;
    background-color: var(--wr-ink-2);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center;
    border: var(--wr-border) solid var(--wr-ink);
}

.buehne__panel {
    display: grid;
    place-items: end start;
    border-width: var(--wr-border-fat);
    box-shadow: var(--wr-shadow);
}

/*
 * Solange kein Bild da ist, steht hier kein leeres Rechteck, sondern ein
 * Storyboard-Rahmen. Ein leeres dunkles Feld sieht aus wie ein Ladefehler, und
 * wer einen Ladefehler sieht, wartet – auf der Bühne wartet dann eine Crew.
 */
.buehne__panel:not([data-loaded='1'])::before,
.akte__panel:not([data-loaded='1'])::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--wr-ink-3) 1.2px, transparent 1.3px);
    background-size: var(--wr-halftone-size) var(--wr-halftone-size);
}

.buehne__panel:not([data-loaded='1'])::after,
.akte__panel:not([data-loaded='1'])::after {
    content: attr(data-marke);
    position: absolute;
    inset: 20% 12%;
    display: grid;
    place-items: center;
    padding: var(--wr-gap-2);
    font-family: var(--wr-font-amt);
    font-size: 0.76rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    text-align: center;
    color: var(--wr-paper-dim);
    border: 2px dashed var(--wr-ink-3);
}

/* Die Ortsmarke sitzt IM Panel und darf nie über dessen Kante laufen. */
.buehne__ort {
    position: relative;
    max-width: 100%;
    padding: 0.35rem 0.6rem;
    font-size: 0.68rem;
    overflow-wrap: anywhere;
    color: var(--wr-paper);
    background: var(--wr-ink);
}

.buehne__erzaehler {
    max-width: var(--wr-mass);
    margin: 0;
    padding: var(--wr-gap-2) var(--wr-gap-3);
    font-family: var(--wr-font-doc);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--wr-ink);
    background: var(--wr-paper-aged);
    border: 3px solid var(--wr-ink);
    box-shadow: var(--wr-shadow-sm);
}

.buehne__folge {
    max-width: var(--wr-mass);
    margin: 0;
    padding: var(--wr-gap-2) var(--wr-gap-3);
    font-family: var(--wr-font-doc);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--schirm-text);
    background: var(--schirm-feld);
    border-left: 4px solid var(--wr-bernstein);
}

.buehne__wartet,
.wahl__fremd {
    margin: 0;
    font-size: 0.78rem;
    color: var(--schirm-still);
}

/*
 * Die eine Bibel-Ausnahme vom Radius null: Eine Sprechblase ist rund, sonst
 * ist sie ein Kasten. Der Wortlaut steht nur beim Halter – die anderen drei
 * sehen an derselben Stelle, DASS gesprochen wird.
 */
.blase {
    position: relative;
    max-width: 54ch;
    margin: var(--wr-gap-3) 0 0 var(--wr-gap-4);
    padding: var(--wr-gap-3);
    font-family: var(--wr-font-letter);
    /* Halbfett: Comic-Lettering ist nie dünn, und auf hellem Grund franst es
       sonst aus. */
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--wr-ink);
    background: var(--wr-paper);
    border: 3px solid var(--wr-ink);
    border-left-width: 8px;
    border-left-color: var(--blase-farbe, var(--wr-ink));
    border-radius: 1.6rem;
}

.blase::before {
    content: '';
    position: absolute;
    top: -0.75rem;
    left: 2.4rem;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--wr-paper);
    border-top: 3px solid var(--wr-ink);
    border-left: 3px solid var(--wr-ink);
    transform: rotate(45deg);
}

/*
 * Wer spricht, steht als Marke über der Blase, und zwar in SEINER Farbe: Alle
 * vier sehen dieselbe Blase und sollen dieselbe Figur darin erkennen.
 *
 * Sie steht dabei immer auf Papier – die Blase ist auf jedem der vier Schirme
 * hell, auch auf dem Blech. Deshalb greift hier nicht die Umschaltung der
 * Station, sondern die Papierfassung direkt: Die Kante daneben bleibt die
 * Identität, die Schrift darüber wird gelesen.
 */
.blase__wer {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-style: normal;
    color: var(--blase-schrift, var(--wr-ink));
}

.blase--schrauber {
    --blase-farbe: var(--wr-role-schrauber);
    --blase-schrift: var(--wr-role-schrauber-papier);
}

.blase--schmierfink {
    --blase-farbe: var(--wr-role-schmierfink);
    --blase-schrift: var(--wr-role-schmierfink-papier);
}

.blase--faelscher {
    --blase-farbe: var(--wr-role-faelscher);
    --blase-schrift: var(--wr-role-faelscher-papier);
}

.blase--codeknacker {
    --blase-farbe: var(--wr-role-codeknacker);
    --blase-schrift: var(--wr-role-codeknacker-papier);
}

.blase--stumm {
    font-family: var(--wr-font-amt);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    /* Auf dem vergilbten Fax stand das Blechgrau bei 2.78:1 – die stumme Blase
       ist still, aber nicht abgeschaltet, und wird gelesen wie jede andere. */
    color: var(--wr-stahl-papier);
    background: var(--wr-paper-aged);
    border-style: dashed;
}

.blase--stumm::before {
    background: var(--wr-paper-aged);
    border-style: dashed;
}

/* Keine Option ist falsch. Die anderen drei sehen die Knöpfe, kommen nicht
   dran und dürfen reinreden. */
.wahl {
    display: grid;
    gap: var(--wr-gap-2);
    padding: var(--wr-gap-3);
    background: var(--schirm-feld);
    border-left: var(--wr-border-fat) solid var(--wr-bernstein);
}

.wahl__frage {
    margin: 0;
    font-size: 0.95rem;
    color: var(--schirm-text);
}

.wahl__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-2);
}

/* ================================================ DIE VORSTELLUNGSRUNDE ==== */

.vorstellung {
    display: grid;
    gap: var(--wr-gap-3);
}

/*
 * DER SCHEINWERFER: wer gerade verliest, steht groß im Licht.
 *
 * Er ist der gemeinsame Anker dieses Schritts, genau wie das Panel der Bühne
 * (CLAUDE.md, Abschnitt 4): dasselbe Bild auf allen vier Schirmen, dieselbe
 * Person, dieselbe Bildunterschrift. Was verschieden bleibt, ist allein der
 * TEXT darunter — bei einem sein eigener, bei den drei anderen die stumme
 * Blase.
 *
 * Gedeckelt auf 28rem und nicht auf die Bühnenbreite: Ein Passbild von
 * achthundert Pixeln über die ganze Bühne wäre ein Plakat.
 */
.scheinwerfer {
    justify-self: center;
    width: 100%;
    max-width: min(100%, 28rem);
    margin: 0;
}

/*
 * DAS LICHT IST EIN RAND UND KEIN SCHEIN.
 *
 * Ein Scheinwerfer wäre in einem Comic-Noir-Panel die naheliegende Stelle für
 * einen `box-shadow` mit Unschärfe — und genau die ist verboten (Abschnitt 7,
 * eiserne Verbote: kein Glow, kein weicher Schatten als Gestaltungsmittel).
 * Was hier leuchtet, leuchtet durch KONTRAST: ein heller Rahmen in der
 * Rollenfarbe auf dem dunkelsten Grund des Spiels, und darunter Papier.
 */
.scheinwerfer__portraet {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--wr-ink);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center top;
    border: var(--wr-border-fat) solid var(--licht-farbe, var(--wr-stahl));
    border-bottom: 0;
}

/* Ohne Bild ein Halbtonraster und kein schwarzes Loch – dasselbe wie an der
   Karte darunter. Es braucht keine Aufschrift: Der Name steht als Text
   unmittelbar darunter im Kasten. */
.scheinwerfer__portraet:not([data-loaded='1'])::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--wr-ink-3) 1.2px, transparent 1.3px);
    background-size: var(--wr-halftone-size) var(--wr-halftone-size);
}

.scheinwerfer[data-rolle='schrauber'] {
    --licht-farbe: var(--wr-role-schrauber);
}

.scheinwerfer[data-rolle='schmierfink'] {
    --licht-farbe: var(--wr-role-schmierfink);
}

.scheinwerfer[data-rolle='faelscher'] {
    --licht-farbe: var(--wr-role-faelscher);
}

.scheinwerfer[data-rolle='codeknacker'] {
    --licht-farbe: var(--wr-role-codeknacker);
}

/*
 * DER KASTEN: dieselbe Bildunterschrift wie drüben in Fall 01.
 *
 * Papier, Serife, Goldkante oben. Er liegt auf JEDEM der vier Schirme auf
 * Papier, auch auf den drei Blechschirmen, und greift deshalb direkt nach der
 * Papiertinte statt nach der Stationstabelle `--schrift-<rolle>`: Dieselbe
 * Ausnahme und derselbe Grund wie bei der Sprechblase (Abschnitt 7).
 *
 * Die Goldkante ist Prägung und keine Auskunft. Gemessen ist sie gegen den
 * Grund, auf dem sie liegt (5.59:1 auf --wr-ink), nicht gegen ihre eigene
 * Fläche — die Begründung steht bei --wr-comic-papier in tokens.css.
 */
.scheinwerfer__kasten {
    display: grid;
    gap: 0.15rem;
    padding: var(--wr-gap-2) var(--wr-gap-3);
    background: var(--wr-comic-papier);
    border: var(--wr-border) solid var(--wr-ink);
    border-top: 2px solid var(--wr-gold);
    color: var(--wr-ink);
    font-family: var(--wr-font-comic);
    text-align: center;
}

.scheinwerfer__figur {
    font-size: 1.25rem;
    line-height: 1.15;
}

.scheinwerfer__ruf {
    color: var(--wr-stahl-papier);
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.3;
}

/*
 * DIE KARTEI IM HALBDUNKEL — und sie steht seit dem Scheinwerfer UNTER dem
 * Gesprochenen.
 *
 * Sie stand darüber: Wer dran war, las oben „Deine Akte steht nur bei dir",
 * scrollte an drei fremden Karten vorbei und fand seinen Text samt dem einzigen
 * Knopf dieses Schritts ganz unten. Oben steht jetzt, wer spricht und was
 * gesagt wird; darunter die Kartei, in der man nachschlägt, neben wem man sitzt.
 */
.vorstellung__akten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--wr-gap-3);
}

.akte {
    position: relative;
    display: grid;
    gap: var(--wr-gap-1);
    align-content: start;
    padding: var(--wr-gap-2);
    background: var(--schirm-feld);
    border: var(--wr-border) solid var(--schirm-kante);
}

/* Die Kante der Akte trägt die Identität, der Ruf darin die Schrift – und
   welche Fassung das ist, hat die Station oben schon entschieden. */
.akte[data-rolle='schrauber'] {
    --akte-farbe: var(--wr-role-schrauber);
    --akte-schrift: var(--schrift-schrauber);
}

.akte[data-rolle='schmierfink'] {
    --akte-farbe: var(--wr-role-schmierfink);
    --akte-schrift: var(--schrift-schmierfink);
}

.akte[data-rolle='faelscher'] {
    --akte-farbe: var(--wr-role-faelscher);
    --akte-schrift: var(--schrift-faelscher);
}

.akte[data-rolle='codeknacker'] {
    --akte-farbe: var(--wr-role-codeknacker);
    --akte-schrift: var(--schrift-codeknacker);
}

.akte[data-zustand='verlesen'] {
    opacity: 0.72;
}

.akte[data-spot='1'] {
    opacity: 1;
    border-width: var(--wr-border-fat);
    border-color: var(--akte-farbe);
}

/* Das Dienstsiegel bricht, wenn die Akte verlesen ist. Verschlossen ist der
   Inhalt, nie der Deckel: Bild, Name und Rauswurfjahr bleiben lesbar. */
.akte__siegel {
    position: absolute;
    top: calc(var(--wr-gap-2) * -1);
    right: calc(var(--wr-gap-2) * -1);
    width: 3rem;
    height: 3rem;
    color: var(--wr-signal);
}

.akte__siegel[data-gebrochen='1'] {
    color: var(--wr-stahl);
}

.akte__figur {
    margin: var(--wr-gap-1) 0 0;
    font-family: var(--wr-font-display);
    font-size: 1.02rem;
    line-height: 1.15;
    color: var(--schirm-text);
}

.akte__ruf {
    margin: 0;
    font-family: var(--wr-font-letter);
    font-size: 1.05rem;
    color: var(--akte-schrift, var(--schirm-still));
}

.akte__grund {
    margin: 0;
    font-size: 0.72rem;
    color: var(--schirm-still);
}

.akte__notiz {
    margin: 0;
    font-family: var(--wr-font-doc);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--schirm-still);
}

/* Der Vermerk steht als ZEILE unter Verschluss, nicht als Balken: Drei
   Streifen Druckerschwärze waren als Zensur gemeint und wurden als kaputter
   Schirm gelesen. */
.akte__notiz--zu {
    font-style: italic;
    color: var(--schirm-stumm);
}

/* Der Pfeil gehört ins Stilblatt und nicht in den Wortlaut: Die Konstante wird
   im Amtshilfe-Bescheid mitten in einem Satz zitiert. */
[data-testid='vorstellung-vorlesen']::after {
    content: '\2192';
}

/* ==================================================== AUF SCHMALEN GERÄTEN = */

@media (max-width: 46rem) {
    /*
     * Die Station gibt ihre Polsterung ab, damit die Skala bleibt: Der
     * Handytest misst auf 375 px Pixel je Stufe (mindestens drei) und den
     * Anteil des Reglers an seiner Bank (mindestens neunzig Prozent). Mit der
     * breiten Polsterung fehlten beide Male ein paar Pixel.
     */
    .station {
        padding: var(--wr-gap-2);
    }

    .bank__handrad {
        padding: var(--wr-gap-1);
    }

    .bank {
        gap: var(--wr-gap-3);
    }

    .blatt {
        padding: var(--wr-gap-2);
    }

    /*
     * UND DAS PANEL HOLT SICH BEIDES ZURÜCK: die Polsterung und das Format.
     *
     * Sonst steht ausgerechnet die eine Ansicht, die groß sein soll, am
     * stärksten eingerückt da: 16/9 auf 375 Pixeln sind 211 Pixel Höhe, und
     * der Rest sind Ränder. Ein Comic-Panel, das ein Viertel des Schirms an
     * Luft verliert, ist kein Großformat mehr.
     *
     * Der negative Rand nennt `--wr-gap-2`, weil DIESE Anfrage direkt darüber
     * genau diese Polsterung an `.station` setzt. Beide Zeilen stehen deshalb
     * im selben Block: Ein Rand, der eine Polsterung von woanders zurückholt,
     * läuft beim nächsten Umbau über die Kante der Station hinaus.
     */
    .buehne__panel {
        aspect-ratio: 4 / 3;
        margin-inline: calc(var(--wr-gap-2) * -1);
    }
}

@media (max-width: 34rem) {
    /* Für „So geht es weiter" blieben sonst vier Zeichen Spalte. */
    .bescheid__zeile,
    .vermerkbogen__zeile {
        grid-template-columns: 1fr;
    }

    .blatt__zeile {
        grid-template-columns: minmax(2rem, max-content) 1fr;
    }
}