/*
 * Die vier Stationen des Prologs.
 *
 * Regel aus der Art-Bibel: KEIN gemeinsamer visueller Anker. Kein geteiltes
 * Layout, keine identische Statusleiste. Wer über die Schulter des Nachbarn
 * schaut, soll nicht einmal wiedererkennen, dass es dasselbe Spiel ist.
 */

.station {
    /*
     * 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.
     * Selmas Blattgold stand auf Ansgars Handbuchseite bei 1.56:1.
     *
     * Die Tabelle steht 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 hellsten dunklen Grund dieses Hauses schon
     * 6.50:1 und 4.99:1. Ein zweiter Token mit demselben Wert liefe beim
     * nächsten Umbau still auseinander.
     */
    --schrift-schrauber: var(--bm-role-schrauber-blech);
    --schrift-schmierfink: var(--bm-role-schmierfink-blech);
    --schrift-faelscher: var(--bm-role-faelscher);
    --schrift-codeknacker: var(--bm-role-codeknacker);

    padding: var(--bm-gap-4);
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

/*
 * Die Farbe der Rolle hängt an der Station selbst. Damit trägt jeder der vier
 * Schirme eine andere Kopfleiste, ohne dass eine einzige Regel sie sich teilen
 * müsste – das Gegenteil eines gemeinsamen Ankers.
 *
 * VIER EIGENSCHAFTEN, VIER AUFGABEN, und das ist der Kern der Reparatur:
 * `--role-accent` ist die Identität und steht auf Kante, Balken und Ring;
 * `--role-tief` ist die ertränkte Fläche unter heller Schrift;
 * `--role-licht` ist die Fläche unter Druckerschwärze; `--role-schrift` ist
 * die eigene Farbe als WORT, umgeschaltet auf den eigenen Schirm. Vorher trug
 * `--role-accent` die zweite und die vierte Aufgabe gleichzeitig, und jede
 * Aufhellung, die das Wort rettete, verdarb die Fläche.
 */
.station[data-rolle='schrauber'] {
    --role-accent: var(--bm-role-schrauber);
    --role-tief: var(--bm-role-schrauber-tief);
    --role-licht: var(--bm-role-schrauber-licht);
    --role-schrift: var(--schrift-schrauber);
}

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

    /* 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(--bm-role-schrauber-papier);
    --schrift-schmierfink: var(--bm-role-schmierfink-papier);
    --schrift-faelscher: var(--bm-role-faelscher-papier);
    --schrift-codeknacker: var(--bm-role-codeknacker-papier);
}

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

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

/*
 * Die Rollenplakette.
 *
 * Sie ist ausdrücklich KEIN gemeinsamer Anker: Wappen, Farbe, Figur und
 * Rollenname sind bei jedem anders, und der Farbbalken links macht jede
 * Station auf einen Blick unterscheidbar – auch von der Seite, auch verwackelt
 * über eine Videoleitung. Vorher trugen alle vier denselben grauen Kopf.
 */
.plakette {
    display: flex;
    align-items: center;
    gap: var(--bm-gap-2);
    padding: var(--bm-gap-2);
    border-left: 4px solid var(--role-accent);
    background: var(--role-tief);
}

/*
 * Das Porträt. Quadratisch wie alles hier, mit der Rollenfarbe als Kante –
 * ohne Bilddatei bleibt die leere Fläche stehen und stört niemanden.
 */
.plakette__portraet {
    display: block;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    background-color: var(--bm-ink-2);
    background-image: var(--art-src);
    background-size: cover;
    background-position: center 20%;
    border: 2px solid var(--role-accent);
}

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

.plakette__wappen svg {
    display: block;
    width: 100%;
    height: 100%;
}

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

.plakette__namen strong {
    font-family: var(--bm-font-display);
    font-size: 1.05rem;
    color: var(--bm-paper);
}

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

/*
 * Der Leimkreis, aber nur das eigene Stück davon: von wem etwas kommt, an wen
 * es geht. R2 und R3 des Spiels stehen und fallen damit, dass jeder das weiß.
 *
 * Ausdrücklich KEIN Kreisdiagramm: Ein Bild des ganzen Kreises wäre auf allen
 * vier Schirmen dasselbe – genau der gemeinsame Anker, den es nicht geben darf.
 * Diese drei Wörter sind bei jedem andere.
 */
.plakette__kreis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-left: auto;
    font-family: var(--bm-font-amt);
    font-size: 0.68rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-soot);
}

/*
 * „du" steht in Druckerschwärze auf der eigenen Rollenfarbe, und zwei der vier
 * Flächen trugen sie nicht: Maschinenblau kam auf 3.65:1, der Rotstift auf
 * 3.99:1. Papier statt Schwärze half nicht – bei diesen beiden ist die FLÄCHE
 * das Problem und nicht die Schrift.
 *
 * Die ertränkte Fassung mit heller Schrift hätte 11.6: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 Schwärze darauf hält – ein Hauch
 * (#3c6e9b auf #457fb3). Das Bild bleibt dasselbe, die Marke bleibt eine Marke.
 */
.plakette__ich {
    padding: 0.1rem 0.35rem;
    color: var(--bm-ink);
    background: var(--role-licht);
}

/*
  DER CHIP BEKOMMT AUF PAPIER EINE HAARLINIE.

  Die Aufhellung von --role-licht hat die SCHRIFT im Chip gerettet (3.99 →
  4.61) und dabei die MARKE als Marke verschlechtert: Auf Ansgars Papierschirm
  steht die Flaeche jetzt bei 2.76: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(--bm-ink);
}

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

/*
 * Auf Papier bleibt Papier. Der Schmierfink liest eine Handbuchseite; ein
 * dunkler Kasten mitten darin sähe aus wie ein Druckfehler.
 */
.station[data-rolle='schmierfink'] .plakette,
.station[data-rolle='schmierfink'] .station__kopf {
    background: var(--bm-feld-papier);
}

.station[data-rolle='schmierfink'] .station__kopf h2 {
    color: var(--bm-ink);
}

.station[data-rolle='schmierfink'] .plakette__namen strong {
    color: var(--bm-ink);
}

/*
 * Die Titelleiste sitzt unter der Plakette und trägt denselben Grund: Zusammen
 * sind sie EIN Block in der Farbe der Rolle. Wer über die Schulter schaut,
 * erkennt die Station daran, bevor er ein Wort gelesen hat – und keine zwei
 * Schirme sehen mehr gleich aus.
 */
.station__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bm-gap-2);
    margin-bottom: var(--bm-gap-3);
    padding: var(--bm-gap-2);
    background: var(--role-tief);
    border-left: 4px solid var(--role-accent);
    border-bottom: 2px solid var(--role-accent);
}

/*
 * Der Titel ist ein Flex-Kind und darf schrumpfen.
 *
 * Ohne `min-width: 0` gilt für ihn `min-width: auto`, und das ist die Breite
 * seines längsten Wortes. AUSSTATTUNGSREGISTER und FARBKONTROLLSTREIFEN messen
 * in Versalien rund 200 von 284 verfügbaren Pixeln; zusammen mit dem
 * Kaffeeknopf des Wirts (rund 112) und einem Stempel passt das nicht mehr in
 * eine Zeile. Der Knopf brach dann auf eine eigene Zeile um und landete
 * zwischen Stempeln und Auftragszeile — mitten im Kopf statt oben rechts, wo
 * ihn sucht, wer aufstehen will.
 *
 * Jetzt schrumpft der Titel zuerst, und die Trennung hält ihn lesbar. Der Knopf
 * bleibt, wo er hingehört: neben der Uhr.
 */
.station__kopf h2 {
    min-width: 0;
    hyphens: auto;
    overflow-wrap: break-word;
    color: var(--bm-paper);
}

/*
 * Der Kaffeeknopf des Wirts. Leise, aber greifbar.
 *
 * `align-self: center` ist Pflicht: Der Kopf richtet seine Kinder an der
 * GRUNDLINIE aus, und eine 44 px hohe Fläche hat keine, die zu einer
 * Überschrift passt — der Titel rutschte sonst gegen den Knopf.
 *
 * Die Farbe kommt NICHT aus --role-accent: Der Kopf färbt sich pro Rolle, und
 * ein Knopf in Rollenfarbe sähe auf vier Schirmen viermal anders aus. Er soll
 * überall derselbe Knopf sein — er hält den ganzen Tisch an.
 */
.station__pause {
    align-self: center;
    margin-left: auto;
    font-size: 0.78rem;
    padding: 0.4em 0.9em;
}

/*
 * In welchem Kapitel man sitzt. Kein gemeinsamer Anker: Der Akt steht in der
 * Farbe der eigenen Rolle und neben einem Titel, den keine andere Station
 * trägt – er verortet die Szene, statt vier Schirme anzugleichen.
 */
.station__akt {
    flex-basis: 100%;
    font-family: var(--bm-font-amt);
    font-size: 0.68rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--role-schrift);
}

.station[data-rolle='schmierfink'] .station__akt {
    color: var(--bm-signal-deep);
}

/*
 * Der Auftrag: wozu die Crew an dieser Hürde überhaupt steht.
 *
 * Schreibmaschine, weil es ein Einsatzbefehl ist und keine Erzählerstimme, und
 * in Papierfarbe statt in Ruß – wer nach zwanzig Minuten Leimtemperatur
 * hochschaut, soll ihn finden, ohne ihn zu suchen. Er steht bei allen vier
 * gleich; das ist der zweite gemeinsame Anker der Hürden nach den Sprechregeln.
 */
.station__auftrag {
    /* Eigene Zeile im Kopf, wie die Akt-Angabe darüber: Der Kopf ist eine
       flex-Reihe, und ohne diese Basis stünde der Satz neben dem Titel. */
    flex-basis: 100%;
    margin-top: var(--bm-gap-1);
    max-width: var(--bm-mass);
    font-family: var(--bm-font-doc);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bm-paper-aged);
}

.station[data-rolle='schmierfink'] .station__auftrag {
    color: var(--bm-signal-deep);
}

/*
 * Die Einsatzzeit. Oben rechts, klein, Ruß auf Nacht: Sie beantwortet eine
 * Frage, die alle halbe Stunde einmal gestellt wird, und drängt sich sonst
 * nicht auf. Kein Rot, kein Fettdruck, kein data-ts – sie ist keine Frist.
 */
.einsatz {
    display: flex;
    gap: var(--bm-gap-2);
    align-items: baseline;
    justify-content: flex-end;
    margin-bottom: var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-soot);
}

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

/*
 * Die Rückfrage der Treuhand. Ein Aktenzettel, der quer im Bild klebt: gelb
 * wie ein Warnband, ohne Rundung, ohne Verlauf. Er kommt bei allen gleichzeitig
 * an, denn wer gemeint ist, muss die Gruppe selbst herausfinden.
 */
.rueckfrage {
    padding: var(--bm-gap-2) var(--bm-gap-3);
    margin-bottom: var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.8rem;
    letter-spacing: var(--bm-tracking-amt);
    color: var(--bm-ink);
    background: var(--bm-mustard);
    border-left: 6px solid var(--bm-ink);
}

/*
 * DER LEHRKASTEN. Was gerade schiefgegangen ist – groß, rot angerissen, bei
 * allen vier, und er bleibt stehen, bis der Vorgang weiterrückt.
 *
 * Er ist mit Absicht der lauteste Kasten der Station und größer als jeder
 * andere Text auf dem Schirm: Ein Fehlgriff war vorher ein Toast am unteren
 * Rand, vier Komma zwei Sekunden lang, und nur bei dem, der geklickt hatte.
 * Die anderen drei wiederholten danach dieselbe falsche Ansage.
 *
 * Kein Weichzeichner, kein Verlauf, keine Rundung – das Signalrot trägt die
 * Fläche allein, und die Kopfzeile sagt in Worten, was die Farbe meint
 * (CLAUDE.md: keine Farbe als einziger Informationsträger).
 */
.lehrkasten {
    padding: var(--bm-gap-2) var(--bm-gap-3);
    margin-bottom: var(--bm-gap-3);
    color: var(--bm-ink);
    background: var(--bm-mustard);
    border-left: 10px solid var(--bm-signal);
    border-right: 10px solid var(--bm-signal);
}

.lehrkasten__kopf {
    margin: 0 0 var(--bm-gap-1);
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-signal-mustard);
}

/* Der eine Satz, der wirklich gelesen werden muss. Deshalb der größte. */
.lehrkasten__satz {
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 1.05rem;
    line-height: 1.3;
    max-width: var(--bm-mass);
}

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

/*
 * DER BESCHEID auf beantragte Amtshilfe. Derselbe Aktenzettel wie die
 * Rückfrage, aber doppelt angerissen und in beschriftete Stufen zerlegt:
 * Diesen Kasten hat jemand bezahlt, und die letzte seiner Zeilen ist die
 * einzige Stelle im Spiel, an der eine Lösung mit Zahlen dasteht.
 */
.bescheid {
    padding: var(--bm-gap-2) var(--bm-gap-3);
    margin-bottom: var(--bm-gap-2);
    color: var(--bm-ink);
    background: var(--bm-mustard);
    border-left: 10px double var(--bm-signal);
}

.bescheid__kopf,
.bescheid__gebuehr {
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-signal-mustard);
}

.bescheid__gebuehr {
    margin-top: var(--bm-gap-2);
    padding-top: var(--bm-gap-1);
    border-top: 1px solid var(--bm-ink);
}

/*
 * Label links, Satz rechts. Unter 34rem klappt es auf eine Spalte – auf 375 px
 * bliebe für "So geht es weiter" sonst eine Spalte von vier Zeichen.
 */
.bescheid__zeile {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: var(--bm-gap-1) var(--bm-gap-2);
    margin: var(--bm-gap-2) 0 0;
}

@media (max-width: 34rem) {
    .bescheid__zeile {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.bescheid__label {
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-signal-mustard);
}

.bescheid__satz {
    font-family: var(--bm-font-amt);
    font-size: 0.9rem;
    line-height: 1.35;
    max-width: var(--bm-mass);
}

/* 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;
}

/*
 * Der Antrag. Steht ganz unten beim Aushang, in Rußgrau, ohne Rahmen um die
 * Fläche – ein Knopf, den man suchen muss, wird seltener gedrückt.
 */
.amtshilfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bm-gap-2);
    align-items: center;
    margin-top: var(--bm-gap-4);
}

.amtshilfe__preis {
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
}

.station[data-rolle='schmierfink'] .amtshilfe__preis {
    color: var(--bm-soot);
}

/* Wer nicht der Wirt ist, wartet – und soll wissen, auf wen. */
.wartet {
    padding: var(--bm-gap-2) var(--bm-gap-3);
    font-family: var(--bm-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
    border: 1px dashed var(--bm-paper-dim);
}

/*
 * Der Aushang mit den Sprechregeln. Steht ganz unten, klein, und ist der
 * einzige Text, den alle vier Schirme gleich zeigen – so will es die Bibel.
 */
.sprechregeln {
    margin-top: var(--bm-gap-4);
    padding: var(--bm-gap-2);
    border-top: 1px solid var(--bm-paper-dim);
}

.sprechregeln summary {
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
    cursor: pointer;
    /* 44px Tippfläche, ohne den Text größer zu machen. */
    padding-block: 0.85rem;
}

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

.station[data-rolle='schmierfink'] .sprechregeln summary,
.station[data-rolle='schmierfink'] .sprechregeln ol,
.station[data-rolle='schmierfink'] .wartet {
    color: var(--bm-soot);
    border-color: var(--bm-soot);
}

.hinweis {
    font-family: var(--bm-font-letter);
    font-size: 1.15rem;
    color: var(--bm-paper-dim);
    margin-bottom: var(--bm-gap-4);
}

.geschafft {
    padding: var(--bm-gap-2) var(--bm-gap-3);
    font-family: var(--bm-font-display);
    color: var(--bm-ink);
    background: var(--bm-role-codeknacker);
    border: var(--bm-border) solid var(--bm-ink);
}

.funk {
    margin-top: var(--bm-gap-4);
    padding-top: var(--bm-gap-2);
    border-top: 1px dashed var(--bm-ink-3);
    font-family: var(--bm-font-doc);
    font-size: 0.82rem;
    color: var(--bm-soot);
}

/*
 * Lektoratsrot ist eine Lampe und kein Lesetext: Auf dem Blech stand die Zeile
 * bei 3.56:1.
 *
 * UND AUF PAPIER GALT SIE GAR NICHT ERST. Die Umkehrung des Schmierfinks steht
 * auf `.funk` und färbt damit den Kasten; die Zeile darin ist ein eigenes
 * Element und holt sich ihre Farbe aus dieser Regel statt aus der Vererbung.
 * Der Satz „Signalrot ist auf Papier kein Lesetext" stand also im Haus und galt
 * für alles ausser der einen Zeile, für die er geschrieben war – die stand bei
 * 3.74:1. Repariert wird das an der Spezifität und nicht an der Farbe: Die
 * zweite Regel greift dasselbe Element.
 */
.funk li[data-von='kartell'] {
    color: var(--bm-signal-blech);
}

.station[data-rolle='schmierfink'] .funk li[data-von='kartell'] {
    color: var(--bm-signal-deep);
}

/* ======================================================= SCHRAUBER: Hebelbank */

.station[data-rolle='schrauber'] {
    color: var(--bm-paper);
    background: #14161a;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0 46px,
        rgba(60, 110, 155, 0.07) 46px 47px
    );
    border-color: var(--bm-role-schrauber);
}

/*
 * DIE SPALTE MUSS DIE SKALA TRAGEN.
 *
 * Sie war einmal minmax(13rem, 1fr) — 208 Pixel für eine Bank, in der achtzig
 * Stufen unterzubringen sind. Auf einem breiten Schirm stellte das Raster
 * daneben eine zweite Spalte, und der Regler bekam die Hälfte: ein Viertelpixel
 * je Stufe, während rechts Platz war.
 *
 * 22rem ist die Untergrenze aus dem Cockpit selbst (vier Rastknöpfe, Zählwerk,
 * Zwischenräume). Das `min(…, 100%)` ist kein Zierat: Ohne es wäre die Spalte
 * auf einem 375-px-Schirm breiter als der Schirm, und die ganze Station
 * scrollte seitlich.
 */
.bank {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--bm-gap-4);
    align-items: start;
}

.bank__marke {
    display: block;
    margin-top: var(--bm-gap-1);
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-soot);
}

.manometer {
    width: 100%;
    max-width: 11rem;
    color: var(--bm-role-schrauber);
}

/* Nonius ohne eine einzige Ziffer: Der Wert ist ausschließlich Grafik.
   Jeder zehnte Strich ist länger – mehr Orientierung gibt das Kartell nicht her. */
.nonius {
    position: relative;
    height: 3.4rem;
    border: 2px solid var(--bm-ink-3);
    background: #0e1013;
}

.nonius {
    /* Platz für die Ziffernreihe am Kopf der Skala. */
    height: 4.2rem;
}

.nonius__skala {
    position: absolute;
    inset: 0;
    /*
     * Ein Strich ist eine Stufe, und die Zahl der Striche kommt vom Handrad
     * selbst (--stufen). Vorher standen hier fest achtzig — an der Schleuse,
     * deren Rad nur bis vierzig zählt, war ein Strich damit eine halbe Stufe.
     * Ausgerechnet in dem Spiel, dessen teuerste Falle eine Verdopplung war.
     */
    background-image:
        repeating-linear-gradient(90deg, var(--bm-soot) 0 1px, transparent 1px calc(100% / var(--stufen, 80))),
        repeating-linear-gradient(90deg, var(--bm-paper-dim) 0 2px, transparent 2px calc(100% / calc(var(--stufen, 80) / 10)));
    background-size: 100% 30%, 100% 55%;
    background-position: bottom left, bottom left;
    background-repeat: repeat-x;
}

/*
 * Die Ziffern der Skala. Sie sitzen genau über den langen Strichen, weil beide
 * dasselbe Achtel teilen – der erste linksbündig, der letzte rechtsbündig, denn
 * sonst hinge die 80 über den Rand hinaus.
 */
.nonius__ziffern {
    position: absolute;
    top: 0.15rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-family: var(--bm-font-mono);
    font-size: 0.62rem;
    color: var(--bm-paper-dim);
}

.nonius__ziffern span {
    /* Ohne Verschiebung stünde jede Ziffer neben ihrem Strich, nicht darüber. */
    transform: translateX(-50%);
}

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

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

/*
 * DAS COCKPIT: ein Blech, auf dem gestellt wird.
 *
 * Der Rahmen um Skala und Bedienzeile hatte bis hierher keine einzige Regel –
 * `.bank__handrad` war ein nackter Anker im DOM. Drei Geräte lagen deshalb
 * ohne Kante nebeneinander, und auf welche Skala ein Knopf gehört, stand
 * nirgends. Jetzt liegt jede Bank in ihrem eigenen Kasten: Blech, harte Kante,
 * kein Radius, kein Schatten.
 */
.bank__handrad {
    padding: var(--bm-gap-2);
    background: var(--bm-blech);
    border: var(--bm-border) solid var(--bm-ink-3);
}

/*
 * DIE SKALA HAT IHRE EIGENE ZEILE, IMMER.
 *
 * In einer Reihe standen fünf Dinge: die Ziffer, zwei Rastknöpfe von je
 * vierundvierzig Pixeln, das Zahlenfeld – und dazwischen der Regler, der nahm,
 * was übrig blieb. Auf 375 px waren das NEUNUNDDREISSIG PIXEL für achtzig
 * Stufen: ein halber Pixel je Stufe. Wer zog, sprang um zehn.
 *
 * Es gab dafür einmal einen Umbruch bei 34rem. Der hat das Telefon geheilt und
 * den Schreibtisch übersehen: Dort teilte sich der Regler die Zeile weiter mit
 * vier anderen Dingen. Eine Skala, die auf einem Schirm anders bedient wird als
 * auf dem nächsten, ist zwei Werkzeuge – und über eines davon redet am Tisch
 * dann jemand, der es nicht vor sich hat.
 */
.nonius__regler {
    display: block;
    width: 100%;
    margin-top: var(--bm-gap-1);
    accent-color: var(--bm-role-schrauber);
}

/*
 * Die Bedienzeile: grob nach außen, fein nach innen, die Zahl in der Mitte.
 *
 * [-10] [-1] [ 26 ] [+1] [+10] — die Anordnung ist kein Geschmack. Wer eine
 * Stufe zurück will, greift nach innen; wer weit will, nach außen. Beides
 * einhändig, beides ohne hinzusehen, nachdem man es einmal getan hat.
 */
.nonius__stand {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--bm-gap-1);
    margin-top: var(--bm-gap-2);
}

/*
 * DAS ZÄHLWERK IST DAS EINGABEFELD.
 *
 * Es waren einmal zwei Dinge nebeneinander – eine große rote Ziffer und ein
 * kleines Zahlenfeld –, und drei Stellen im Code hielten sie synchron. Wer die
 * Ansage hört, tippt sie hier hinein; wer sucht, schiebt oder klickt. Danach
 * steht beides an derselben Stelle, weil es dieselbe Stelle IST.
 *
 * Die Spinner-Pfeile, die ein Zahlenfeld von Haus aus mitbringt, sind weg: Sie
 * sind neun Pixel breit und stünden 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(--bm-gap-1);
    font-family: var(--bm-font-mono);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--bm-signal);
    background: var(--bm-ink);
    border: var(--bm-border) solid var(--bm-ink-3);
    border-radius: 0;
    -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(--bm-role-schrauber);
}

/*
 * Der Arretierhebel. Was am Zählwerk steht, gilt ab jetzt.
 *
 * Ohne ihn wäre die einzige Quittung eine halbe Sekunde Nichtstun – und wer
 * eine Zahl angesagt bekommt, will sie festmachen und nicht abwarten, ob die
 * Maschine sie schon bemerkt hat.
 */
.nonius__arretieren {
    display: block;
    width: 100%;
    margin-top: var(--bm-gap-2);
    min-height: 48px;
}

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

/*
 * DIE VIER RASTKNÖPFE des Cockpits.
 *
 * Achtzig Stufen auf einem Zoll Blech sind mit der Maus nicht zu treffen: Wer
 * zog, sprang von achtundzwanzig auf neununddreißig, und die angesagte Zahl lag
 * dazwischen. Ein Klick ist genau eine Stufe — der schmale Pfeil eine, der
 * doppelte zehn.
 *
 * Sie sehen aus wie die Kipphebel derselben Bank — quadratisch, Blech auf
 * Blech, keine Rundung —, nur kleiner: Sie stellen etwas ein, sie lösen nichts
 * aus. Achtundvierzig Pixel in beide Richtungen; vierundvierzig war das
 * Minimum, das der Handytest gerade noch durchlässt, und ein Minimum ist kein
 * Maß für den Knopf, der an dieser Bank am häufigsten getroffen werden muss.
 */
.raste {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0.6rem;
    color: var(--bm-paper);
    background: var(--bm-ink-2);
    border: var(--bm-border) solid var(--bm-ink-3);
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--bm-schnell), border-color var(--bm-schnell);
}

/*
 * Der Zehnerschritt steht weiter außen und ist deutlich als der grobe Griff zu
 * erkennen: zwei Spitzen statt einer. Die Farbe allein täte es nicht — sie ist
 * in diesem Spiel nie der einzige Informationsträger.
 */
.raste--zehn {
    color: var(--bm-paper-dim);
    padding: 0.5rem;
}

.raste svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: square;
}

.raste:hover {
    border-color: var(--bm-role-schrauber);
}

/* Ein Druckpunkt, kein Federn: 120 ms linear, wie jeder Übergang hier. */
.raste:active {
    transform: translateY(1px);
    background: var(--bm-ink-3);
}

.raste:disabled {
    color: var(--bm-soot);
    border-style: dashed;
    cursor: not-allowed;
}

.bank__hebel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bm-gap-2);
}

.hebel {
    width: 4.2rem;
    height: 4.2rem;
    padding: 0.5rem;
    color: var(--bm-paper);
    background: var(--bm-ink-2);
    border: var(--bm-border) solid var(--bm-ink-3);
    cursor: pointer;
    transition: transform var(--bm-schnell), border-color var(--bm-schnell);
}

.hebel svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}

.hebel:hover {
    border-color: var(--bm-role-schrauber);
}

/*
 * Der Druckpunkt. Ein Kipphebel ohne Quittung sieht bis zur Serverantwort
 * unverändert aus — wer den Ton abgeschaltet hat, tippt ein zweites Mal, weil
 * er glaubt, danebengetroffen zu haben. Derselbe Versatz wie am .btn, linear
 * und unter 120 ms; die .raste hat ihn seit ihrem ersten Tag.
 */
.hebel:active:not(:disabled) {
    transform: translateY(1px);
    background: var(--bm-ink-3);
}

.hebel[data-gelegt='1'] {
    color: var(--bm-ink);
    background: var(--bm-mustard);
    border-color: var(--bm-ink);
}

/*
 * Ein Hebel, an dem gerade nichts zu holen ist.
 *
 * Ohne diese Regel sah ein gesperrter Knopf genauso aus wie ein bedienbarer,
 * und der Unterschied stand nur als Wort daneben. Die Strichart ändert sich
 * mit — Farbe allein wäre hier der einzige Informationsträger, und das ist
 * verboten.
 */
.hebel:disabled {
    color: var(--bm-soot);
    border-style: dashed;
    cursor: not-allowed;
}

/*
 * Zwei Knöpfe als Paar, mit einer Ziffer darunter. Ohne die feste Breite
 * drückt der Flexumbruch die Gruppe unter ihre Inhaltsbreite, und die zwei
 * Knöpfe brechen untereinander um — dann steht die Ziffer neben statt unter
 * ihrem Paar.
 */
.bank__hebel .bank__geraet {
    flex: 0 0 auto;
}

.bank__hebel .bank__geraet .bank__marke {
    text-align: center;
}

.nocke {
    display: block;
    font-family: var(--bm-font-mono);
    font-size: 3rem;
    font-variant-numeric: tabular-nums;
    color: var(--bm-mustard);
}

/*
 * Das Freigabewerk: zwei Ziffern in einem Blechrahmen und ein Hebel darunter.
 *
 * Es hat die Nockenzahl abgelöst. Die zählte mit der Uhr, und wer sie ansagte,
 * hatte acht Sekunden, bis sie falsch war – am Tisch ein Reaktionstest gegen
 * die eigene Crew. Das Zählwerk springt nur, wenn jemand den Hebel schlägt.
 *
 * Die Ziffern stehen in getrennten Fenstern wie an einem Zählwerk aus Blech:
 * Wer sie über den Tisch ruft, liest sie einzeln ab, und dann verhört sich
 * niemand mehr zwischen siebenundvierzig und siebzehn.
 */
.bank__freigabe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bm-gap-2);
}

.zaehlwerk {
    display: inline-block;
    padding: var(--bm-gap-1) var(--bm-gap-2);
    font-family: var(--bm-font-mono);
    font-size: 2.6rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.22em;
    color: var(--bm-mustard);
    background: var(--bm-ink);
    border: var(--bm-border) solid var(--bm-ink-3);
}

/* Steht in Blei und spiegelverkehrt – lesen muss die Gruppe selbst. */
.praegung {
    display: inline-block;
    padding: 0.3em 0.6em;
    font-family: var(--bm-font-display);
    font-size: 1.5rem;
    color: #8a8a92;
    background: #1b1d21;
    border: 2px solid #2c2f35;
}

/*
 * Gespiegelt wird die einzelne Glyphe, nicht die Zeile: Die Reihenfolge kommt
 * schon rueckwaerts vom Server. Zusammen ergibt das echten Bleisatz - und im
 * DOM steht nirgends die Plombennummer.
 */
/*
 * DIE GLYPHE WIRD NICHT MEHR GESPIEGELT, und das ist der erste Handgriff des
 * ganzen Spiels.
 *
 * Vorher lief beides gleichzeitig: Der Server drehte die Reihenfolge um, das
 * CSS zusätzlich jedes einzelne Zeichen. Aus "PB 4-18-637" wurde "736-81-4 BP"
 * in Spiegelschrift, und Ruth musste elf Zeichen rückwärts lesen UND jede
 * Ziffer im Kopf zurückdrehen, bevor im Prolog überhaupt etwas passierte.
 *
 * Die Umkehrung der Reihenfolge bleibt – sie hält den Klartext aus dem DOM und
 * damit aus jedem Screenreader. Was fällt, ist der zweite Arbeitsschritt. Die
 * Bleisatz-Optik trägt jetzt die Schrift und der Rahmen, und unter dem Blech
 * steht in Worten, was zu tun ist: von rechts nach links lesen.
 */
.praegung i {
    display: inline-block;
    font-style: normal;
}

/*
 * Der Kartenschacht der Presse.
 *
 * Er sagt genau eines: ob eine Karte steckt. Welche, steht beim Schmierfink –
 * stünde die Nummer hier, brauchte die Schrauberin seine Ansage nicht mehr, und
 * die vierte Kante des Leimkreises wäre eine Zierleiste.
 *
 * Der Stand steht als WORT im Blech und nicht nur als Farbe: Farbe trägt in
 * diesem Spiel nie allein eine Auskunft.
 */
.bank__kartenschacht {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bm-gap-1);
}

.schacht__blende {
    display: inline-block;
    padding: 0.55em 0.9em;
    font-family: var(--bm-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--bm-tracking-amt);
    color: var(--bm-soot);
    background: #14161a;
    border: var(--bm-border) solid #2c2f35;
}

.bank__kartenschacht[data-steckt='1'] .schacht__blende {
    color: var(--bm-ink);
    background: var(--bm-mustard);
    border-color: var(--bm-ink);
}

/* ==================================================== SCHMIERFINK: Handbuch */

.station[data-rolle='schmierfink'] {
    color: var(--bm-ink);
    background: var(--bm-paper);
    background-image: var(--bm-grain);
    background-size: 140px 140px;
    border-color: var(--bm-ink);
}

.station[data-rolle='schmierfink'] .hinweis,
.station[data-rolle='schmierfink'] .funk {
    color: var(--bm-signal-deep);
}

.station[data-rolle='schmierfink'] h2 {
    color: var(--bm-ink);
}

.blatt {
    max-width: var(--bm-mass);
    font-family: var(--bm-font-doc);
    line-height: 1.75;
}

/*
 * `minmax(0, 1fr)` und nicht `1fr`.
 *
 * Eine 1fr-Spur ist von Haus aus mindestens so breit wie ihr längstes
 * unteilbares Wort. Im Handbuch des Schmierfinks stehen Rückerfassungsmengen,
 * Anforderungsscheine und Zersetzungssiegel — auf 375 px füllt das längste
 * davon drei Viertel der Spur. Es reicht heute; es reicht nicht mehr, sobald
 * Archivo Narrow einmal nicht lädt und der Ersatz ein Viertel breiter setzt.
 */
.blatt__zeile {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: var(--bm-gap-2);
    margin-bottom: var(--bm-gap-2);
    max-width: none;
    hyphens: auto;
}

.blatt__nr {
    font-weight: 600;
    color: var(--bm-signal-deep);
}

/*
 * EIN SCHRITT. Was ausgeführt werden muss, steht so da, dass man es beim
 * Überfliegen findet – Ansgar liest unter Zeitdruck vor und darf nicht erst
 * suchen, welcher der sieben Absätze eine Handlung enthält.
 *
 * Die Nummer wird zur Marke: schwarz auf Senfgelb, quadratisch, nicht zu
 * übersehen. Der Satz daneben steht größer als das Beiwerk drumherum.
 */
.blatt__zeile--schritt {
    margin-bottom: var(--bm-gap-3);
}

.blatt__zeile--schritt .blatt__nr {
    justify-self: start;
    min-width: 2.2rem;
    padding: 0.1em 0.5em;
    font-family: var(--bm-font-amt);
    font-weight: 700;
    text-align: center;
    color: var(--bm-ink);
    background: var(--bm-mustard);
}

.blatt__zeile--schritt .blatt__satz {
    font-size: 1.05rem;
    font-weight: 600;
}

/*
 * DIE FALLE. Sie ist das Gegenteil eines Schrittes und darf deshalb nicht wie
 * einer aussehen – ein „(4)" unter einem „(3)" liest sich als nächster
 * Handgriff, und genau so ist der falsche Hebel jahrelang gelegt worden.
 */
.blatt__zeile--achtung {
    padding: var(--bm-gap-2);
    margin-bottom: var(--bm-gap-3);
    color: var(--bm-paper);
    background: var(--bm-signal-deep);
    border-left: 6px solid var(--bm-signal);
}

.blatt__zeile--achtung .blatt__nr {
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-mustard);
}

/* Auf dem roten Grund braucht der Stempel den hellen Rahmen, sonst versinkt er. */
.blatt__zeile--achtung .blatt__marke {
    border-color: var(--bm-paper);
}

/* Beiwerk: Ton und Hintergrund. Darf überlesen werden, also steht es kleiner. */
.blatt__zeile--beiwerk .blatt__satz {
    font-size: 0.9rem;
    color: var(--bm-paper-dim);
}

/*
 * Was wörtlich über den Tisch geht, steht gestempelt im Text.
 *
 * Der Schmierfink liest sechs Absätze Amtsdeutsch, und genau drei Wörter darin
 * hört jemand anders. Als Fließtext gesetzt las er regelmäßig den falschen
 * Absatz vor, und der falsche Hebel ist die teuerste Falle des Prologs.
 *
 * Der Stempel trägt Rahmen UND Fläche: Farbe allein wäre hier der einzige
 * Informationsträger, und das ist verboten.
 */
.blatt__marke {
    padding: 0.05em 0.4em;
    font-family: var(--bm-font-amt);
    font-size: 0.86em;
    letter-spacing: var(--bm-tracking-amt);
    color: var(--bm-ink);
    background: var(--bm-mustard);
    border: 2px solid var(--bm-ink);
    /* Bricht der Stempel um, behält jede Zeile ihren Rahmen. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.vermerkbogen {
    margin-top: var(--bm-gap-4);
    padding: var(--bm-gap-3);
    border: var(--bm-border) dashed rgba(11, 11, 13, 0.4);
}

.vermerkbogen h3 {
    margin: 0 0 var(--bm-gap-3);
    font-family: var(--bm-font-amt);
    font-size: 0.8rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

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

.vermerkbogen label {
    grid-column: 1 / -1;
    color: rgba(11, 11, 13, 0.6);
}

/* ==================================================== FÄLSCHER: Leuchtkasten */

.station[data-rolle='faelscher'] {
    color: var(--bm-paper);
    background: #12100c;
    border-color: var(--bm-role-faelscher);
}

/*
 * Die Peilung des Nachtglases: drei Masten als Knopfreihe.
 *
 * Als Reihe und nicht als Auswahlfeld, und das ist auf 375 px der Unterschied
 * zwischen einem Griff und dreien: Ein Aufklappmenue kostet Tippen, Suchen und
 * Zuklappen, wo drei Knoepfe nebeneinander stehen koennen. Sie tragen
 * `aria-pressed`, weil die Peilung ein ZUSTAND ist und nicht eine Wahl, die
 * abgeschickt wird.
 */
.peilung {
    margin-bottom: var(--bm-gap-3);
}

.peilung__reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bm-gap-2);
    margin-top: var(--bm-gap-1);
}

.peilung__reihe .btn {
    text-transform: uppercase;
}

.peilung__reihe [aria-pressed='true'] {
    color: var(--bm-ink);
    background: var(--bm-role-faelscher);
    border-color: var(--bm-ink);
}

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

.leuchtkasten__werkzeuge .btn {
    text-transform: uppercase;
}

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

/* Das Blatt auf der Milchglasscheibe: hell, hart begrenzt, ohne Weichzeichner. */
.leuchtkasten__sicht {
    max-width: none;
    padding: var(--bm-gap-4);
    font-family: var(--bm-font-doc);
    font-size: 1.05rem;
    color: var(--bm-ink);
    background: var(--bm-paper-aged);
    border: var(--bm-border) solid var(--bm-ink);
    box-shadow: var(--bm-shadow-sm);
}

/*
 * Die Nachschlagtafel. Eine Zeile rein, eine Zeile raus.
 *
 * Sie scrollt in ihrem eigenen Kasten: Vier Spalten passen auf 375 px nicht
 * nebeneinander, und eine Tafel, die die Station breiter macht, schiebt die
 * halbe Station aus dem Bild.
 */
.tafel-wrap {
    overflow-x: auto;
}

.tafel {
    width: 100%;
    max-width: 22rem;
    margin-top: var(--bm-gap-4);
    border-collapse: collapse;
    font-family: var(--bm-font-doc);
    font-size: 0.92rem;
}

/* Vier Spalten brauchen mehr als zweiundzwanzig rem. */
.tafel {
    max-width: 34rem;
}

/* Die erste Spalte ist die, in der gesucht wird. Sie steht deshalb schwerer. */
.tafel__schluessel {
    font-family: var(--bm-font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tafel caption {
    margin-bottom: var(--bm-gap-1);
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    text-align: left;
    color: var(--bm-signal-deep);
}

/*
 * Eine Zelle darf schrumpfen, und dafür braucht es beides.
 *
 * `hyphens: auto` setzt den Trennstrich, wo die deutsche Trennung ihn erlaubt;
 * `overflow-wrap: anywhere` ist das, was die Tabelle überhaupt erst schmaler
 * werden lässt — nur diese Angabe senkt die min-content-Breite einer Zelle,
 * und ohne sie hält ein einziges Wort die ganze Spalte auf.
 *
 * Das Wort war DURCHGESTRICHENER: 188 Pixel Mindestbreite in vier Hürden, in
 * der Anfahrtafel der Rotation 39 Prozent der ganzen Tabelle. Der Kasten
 * darüber scrollt zwar (`.tafel-wrap`), aber eine Zeile, deren rechte Hälfte
 * man erst herwischen muss, ist keine Nachschlagtafel mehr, sondern eine
 * gerissene Ansage.
 */
.tafel th,
.tafel td {
    padding: 0.35em 0.7em;
    text-align: left;
    border: 1px solid var(--bm-ink);
    hyphens: auto;
    overflow-wrap: anywhere;
}

/*
 * UND DIE SUCHSPALTE IST DAVON AUSGENOMMEN.
 *
 * Hier stand die Ausnahme einmal oben an `.tafel__schluessel` — und war
 * wirkungslos: Eine nackte Klasse (0,1,0) verliert gegen `.tafel td` (0,1,1),
 * und die Sammelregel steht zusätzlich weiter unten. Das war schlimmer als
 * nichts: Der Schlüssel trug vorher ein `white-space: nowrap`, das wirkte,
 * weil `.tafel td` keine Angabe dazu macht. Ersetzt durch eine Regel, die
 * verliert, stand die Kennzahl schlechter da als vor der Reparatur.
 *
 * Was hier gilt: Die Zelle bricht zwischen Wörtern — deshalb passt
 * „Bernstein, grün gerandet" jetzt in seine Spalte, statt sie auf 241 Pixel
 * aufzuspannen. Sie bricht aber NIE mitten in einer Kennzahl, und getrennt
 * wird sie auch nicht: Ein Bindestrich in einer Zahl, die über den Tisch
 * gerufen wird, ist eine Falle.
 */
.tafel td.tafel__schluessel {
    overflow-wrap: normal;
    hyphens: none;
}

.tafel thead th {
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

/* Was gesteckt ist, ist im Blatt angestrichen – wie mit dem Rotstift. */
.tafel [data-gesteckt='1'] td {
    color: var(--bm-paper);
    background: var(--bm-signal-deep);
}

/*
 * Die Randglosse im Buch des Schmierfinks.
 *
 * Jemand hat vor Jahren mit Bleistift danebengeschrieben, was er von der
 * Vorschrift hielt. Sie erklärt nichts und trägt kein Spielwissen – sie ist
 * der einzige Ort im Spiel, an dem eine andere Hand als die des Kartells
 * schreibt, und steht deshalb in der Briefschrift statt in der Amtsschrift.
 */
.blatt__glosse {
    max-width: var(--bm-mass);
    margin-top: var(--bm-gap-3);
    padding-left: var(--bm-gap-3);
    border-left: 1px solid var(--bm-soot);
    font-family: var(--bm-font-letter);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--bm-paper-dim);
}

.kartenfach {
    display: grid;
    gap: var(--bm-gap-1);
    justify-items: start;
    margin-top: var(--bm-gap-3);
    padding-top: var(--bm-gap-3);
    border-top: 1px solid var(--bm-ink-3);
}

.kartenfach label {
    font-family: var(--bm-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

.kartenfach__stand {
    font-family: var(--bm-font-amt);
    font-size: 0.75rem;
    letter-spacing: var(--bm-tracking-amt);
}

.befund {
    display: grid;
    gap: var(--bm-gap-1);
    margin-top: var(--bm-gap-4);
    padding-top: var(--bm-gap-3);
    border-top: 1px solid var(--bm-ink-3);
}

/*
 * Der Leuchtkasten ohne Strom.
 *
 * Kein Weichzeichner und kein Schein – die Bibel verbietet beides. Was
 * ausgeschaltet ist, wird DUNKLER und verliert seinen Kontrast; der Text steht
 * weiter da und sagt in Worten, warum nichts zu sehen ist.
 */
.leuchtkasten[data-strom='0'] {
    color: var(--bm-soot);
}

.leuchtkasten[data-strom='0'] .leuchtkasten__sicht {
    border-left: var(--bm-border) solid var(--bm-ink-3);
}

.befund h3 {
    display: flex;
    align-items: center;
    gap: var(--bm-gap-2);
    margin: 0 0 var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.8rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-role-faelscher);
}

.befund select {
    width: 100%;
    padding: 0.6em 0.75em;
    font-family: var(--bm-font-doc);
    color: var(--bm-ink);
    background: var(--bm-paper);
    border: var(--bm-border) solid var(--bm-ink);
}

.befund .btn {
    margin-top: var(--bm-gap-2);
    justify-self: start;
}

/* ================================================= CODE-KNACKER: Terminal */

.station[data-rolle='codeknacker'] {
    color: var(--bm-screen);
    background: #05100d;
    border-color: var(--bm-role-codeknacker);
    font-family: var(--bm-font-mono);
}

.station[data-rolle='codeknacker'] h2,
.station[data-rolle='codeknacker'] .hinweis {
    font-family: var(--bm-font-mono);
    color: var(--bm-role-codeknacker);
    text-transform: none;
}

.terminal__sperre {
    padding: var(--bm-gap-2);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--bm-ink);
    background: var(--bm-signal);
    max-width: none;
}

.terminal__masken {
    display: grid;
    gap: var(--bm-gap-2);
    margin: var(--bm-gap-3) 0;
}

.terminal__maske {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--bm-gap-2);
}

.terminal__maske label {
    display: grid;
    gap: var(--bm-gap-1);
    color: var(--bm-role-codeknacker);
}

.terminal input {
    font-family: var(--bm-font-mono);
    color: var(--bm-screen);
    background: #081915;
    border-color: var(--bm-role-codeknacker);
    box-shadow: none;
}

.terminal input::placeholder {
    color: rgba(79, 224, 196, 0.35);
}

.terminal .btn {
    justify-self: start;
    color: var(--bm-ink);
    background: var(--bm-role-codeknacker);
    border-color: var(--bm-role-codeknacker);
}

.terminal__protokoll {
    display: grid;
    gap: var(--bm-gap-2);
    font-size: 0.85rem;
    line-height: 1.5;
}

.terminal__protokoll li {
    padding-left: var(--bm-gap-2);
    border-left: 2px solid var(--bm-role-codeknacker);
}

.terminal__frage {
    display: block;
    color: var(--bm-paper-dim);
}

/* ============================================== Blattfuß und Quittung ===== */

/* Die Fußleiste entwertet die eigene Seite – klein, ganz unten, leicht zu übersehen. */
.blatt__fuss {
    margin-top: var(--bm-gap-4);
    padding-top: var(--bm-gap-2);
    border-top: 1px solid rgba(11, 11, 13, 0.3);
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(11, 11, 13, 0.55);
}

.terminal__quittung {
    display: grid;
    gap: var(--bm-gap-2);
    justify-items: start;
    margin-top: var(--bm-gap-3);
    padding-top: var(--bm-gap-3);
    border-top: 1px solid var(--bm-role-codeknacker);
}

/* --- Der Reiter eines geteilten Sitzes ------------------------------------ */

/*
 * Bewusst KEINE vierte Statusleiste über allen Schirmen: Der Balken erscheint
 * nur dort, wo ein Stuhl zwei Stationen hält, und trägt nichts, was auch ein
 * anderer Sitz sehen könnte.
 */
.reiter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bm-gap-2);
    margin-bottom: var(--bm-gap-3);
    padding-bottom: var(--bm-gap-2);
    border-bottom: var(--bm-border) solid currentColor;
}

/*
 * DER REITER IST BEI GETEILTEN SITZEN DER EINZIGE WEG ZUR ANDEREN STATION,
 * und er war auf 375 px sechsunddreißig Pixel hoch.
 *
 * Gemessen hat ihn nie jemand: dev/mobil.mjs spielt zu viert, und zu viert
 * gibt es keine Reiterleiste. Wer zu zweit am Telefon zwischen Hebelbank und
 * Leuchtkasten wechselt, tippt zwischen zwei umgebrochene Reiter mit elf Pixeln
 * Luft dazwischen — und landet auf der falschen Station, mit vier Sekunden
 * Wechselsperre als Quittung.
 */
.reiter__knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--bm-gap-1);
    min-height: 44px;
    padding: var(--bm-gap-1) var(--bm-gap-3);
    font-family: var(--bm-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: inherit;
    background: none;
    border: var(--bm-border) solid currentColor;
    cursor: pointer;
    transition: background var(--bm-schnell), color var(--bm-schnell);
}

/*
 * Die Rollenfarbe am Reiter.
 *
 * Als Quadrat und nicht als Textfarbe: Rot auf Schwarz ist ein Signal und kein
 * Lesetext, und der Name muss lesbar bleiben. Neben dem Punkt steht ohnehin die
 * Figur – die Farbe trägt hier nichts allein.
 */
.reiter__punkt {
    width: 0.7rem;
    height: 0.7rem;
    background: var(--reiter-farbe, currentColor);
    border: 1px solid var(--bm-ink);
}

/*
 * Das Abzeichen: Deine andere Figur hält gerade die Sprechblase.
 *
 * Es gibt das nur auf der Comic-Bühne – in den Hürden schickt der Server es
 * gar nicht erst mit. Es blinkt hart: zwei Zustände, kein Auf- und Abblenden.
 * Wer das nicht sehen will oder kann, liest das Wort – Farbe allein trägt hier
 * nichts.
 */
.reiter__dran {
    padding: 0 0.3rem;
    color: var(--bm-ink);
    background: var(--bm-mustard);
    animation: reiter-dran 1.2s steps(1, end) infinite;
}

@keyframes reiter-dran {
    50% {
        background: var(--bm-paper);
    }
}

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

/*
 * Der aktive Reiter braucht einen eigenen Akzent. 'background: currentColor'
 * waere schwarz auf schwarz - currentColor loest den Vordergrund derselben Regel
 * auf, und der ist hier bewusst die Druckerschwaerze.
 *
 * Die Fläche kommt aus `--role-licht` und nicht aus der Identität. Hier stand
 * ein eigener Name (`--bm-akzent`) für denselben Wert, gesetzt in vier eigenen
 * Regeln weiter unten – und weil zwei Namen dieselbe Farbe hielten, fiel nicht
 * auf, dass Druckerschwärze auf Maschinenblau nur 3.65:1 trägt. Der zweite Name
 * ist mit dieser Zeile weg: ein Name, eine Aufgabe.
 */
.reiter__knopf[aria-selected='true'] {
    color: var(--bm-ink);
    background: var(--role-licht, var(--bm-paper));
    border-color: var(--role-licht, var(--bm-paper));
}

/*
  UND AUF PAPIER TRAEGT DIE KANTE MIT.

  Hier steht der Zustand „gewaehlt" allein in der Flaeche: Rand und Fuellung
  sind derselbe Wert. Auf Ansgars Papierschirm reichte das vorher knapp
  (3.62:1) und reicht nach der Aufhellung von --role-licht nur noch gerade so
  (3.13:1 gegen die geforderten 3.0). Eine Haarlinie in Druckerschwaerze holt
  den Abstand zurueck — und macht aus einer Farbunterscheidung eine Form.
*/
.station[data-rolle='schmierfink'] .reiter__knopf[aria-selected='true'] {
    border-color: var(--bm-ink);
}

/* --- 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,78 rem, Signalrot — und dort hat ihn niemand gelesen: Wer den Reiter zieht,
 * schaut auf die neue Station. Vier Sekunden lang lag also ein vollständiges
 * Pult da, auf dem kein Knopf ging, und das ist von einer abgerissenen Leitung
 * nicht zu unterscheiden.
 *
 * ES IST KEIN SIGNAL MEHR, UND DAS IST DER PUNKT. Rot heißt in diesem Haus
 * „etwas ist schiefgegangen"; hier geht nichts schief, hier räumen zwei Hände
 * ein Pult. Das Band schreibt deshalb in der Schrift und der Farbe seines
 * eigenen Schirms (`currentColor`) und kommt damit auf Blech wie auf Ansgars
 * Papier ohne zweite Regel aus.
 *
 * DER BALKEN FÄLLT IN STUFEN. Er 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 — vier Stufen Blech, kein Federn, kein Nachwippen.
 */
.wechsel {
    display: grid;
    gap: var(--bm-gap-2);
    margin-bottom: var(--bm-gap-3);
    padding: var(--bm-gap-2) var(--bm-gap-3);
    border: var(--bm-border) solid currentColor;
}

.wechsel__satz {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bm-gap-2);
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 0.82rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

/* 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(--bm-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. Ein `color-mix` wäre der
 * andere Weg — das Haus hat es beim letzten Umbau ausdrücklich abgeschafft.
 */
.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(--bm-gap-2);
    margin-bottom: var(--bm-gap-4);
    padding: var(--bm-gap-3);
    border: var(--bm-border) dashed currentColor;
}

.fach__zettel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bm-gap-2);
}

.fach__art {
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

/* Der Wortlaut steht nicht da. Er muss über den Tisch. */
.fach__schwarz {
    padding: 0 var(--bm-gap-1);
    font-family: var(--bm-font-mono);
    color: var(--bm-ink);
    background: var(--bm-ink);
    border: 1px solid var(--bm-signal);
}

.fach__von {
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    color: var(--bm-soot);
}

.fach__zettel input {
    flex: 1 1 8rem;
    min-width: 0;
    padding: var(--bm-gap-1) var(--bm-gap-2);
    font-family: var(--bm-font-mono);
    color: inherit;
    background: var(--bm-feld-dunkel);
    border: var(--bm-border) solid currentColor;
}

.fach__quittung {
    font-family: var(--bm-font-mono);
    font-size: 0.85rem;
}

/* --- Schrauber: Lampen, Prägestempel -------------------------------------- */

.lampen {
    display: flex;
    gap: var(--bm-gap-2);
}

.lampe {
    width: 1.5rem;
    height: 1.5rem;
    border: var(--bm-border) solid var(--bm-role-schrauber);
    background: transparent;
    transition: background var(--bm-schnell);
}

.lampe[data-an="1"] {
    background: var(--bm-mustard);
}

/* Alle vier: der einzige Moment, in dem gesendet werden darf. */
.lampen[data-alle="1"] .lampe {
    border-color: var(--bm-mustard);
}

.bank__praegung input {
    width: 100%;
    margin-bottom: var(--bm-gap-2);
    padding: var(--bm-gap-2);
    font-family: var(--bm-font-mono);
    color: var(--bm-paper);
    background: var(--bm-feld-dunkel);
    border: var(--bm-border) solid var(--bm-role-schrauber);
}

.bank__praegung label {
    display: block;
    margin-bottom: var(--bm-gap-1);
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
}

.bank__praegung .btn {
    margin-bottom: var(--bm-gap-2);
}

/* ======================================================= Auf schmalen Geräten */

/*
 * Gespielt wird oft am Telefon, während die anderen am Rechner sitzen. Wer
 * seitlich scrollen muss, verliert die Hälfte seines Schirms und redet über
 * etwas, das er gar nicht sieht – und genau das Reden ist das Spiel.
 *
 * Mindestmaß für alles, was man antippen soll: 44 Pixel. Gemessen wird das,
 * nicht geschätzt: `pwsh -File dev/dev.ps1 mobil`.
 */

.nonius__regler,
.terminal input,
.bank__praegung input,
.fach__zettel input,
.befund input,
.befund select,
.vermerkbogen__zeile input {
    min-height: 44px;
}

.befund select {
    /* Auswahlfelder ignorieren min-height in manchen Engines – Polsterung wirkt immer. */
    padding-block: var(--bm-gap-2);
}

@media (max-width: 30rem) {
    /*
     * DREISSIG PIXEL RAND AUF EINEM SCHIRM VON DREIHUNDERTFÜNFUNDSIEBZIG.
     *
     * Die Station polstert mit --bm-gap-4, und das ist auf einem Schreibtisch
     * richtig. Auf einem Telefon sind es sechzehn Prozent der Breite, links und
     * rechts zusammen — und sie fehlen genau dort, wo achtzig Stufen
     * untergebracht werden müssen. Die Skala des Handrads wächst damit um
     * neununddreißig Pixel, ohne dass irgendetwas anderes enger wird.
     *
     * Der fette Rahmen bleibt: Er ist die Kante der Station und nicht ihr
     * Innenabstand.
     */
    .station {
        padding: var(--bm-gap-2);
    }
}

.station[data-rolle='schmierfink'] .fach__schwarz {
    color: var(--bm-ink);
    background: var(--bm-ink);
    border-color: var(--bm-signal-deep);
}

.station[data-rolle='schmierfink'] .fach__zettel input {
    background: var(--bm-feld-papier);
}

/* Wie im Funk: als Lampe genug, als Wort nicht (3.56:1 auf dem Blech). Die
   Umkehrung für das Papier steht darunter und ist älter als dieser Befund. */
.fach__sperre,
.fach__fehl {
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-signal-blech);
}

.station[data-rolle='schmierfink'] .fach__sperre,
.station[data-rolle='schmierfink'] .fach__fehl {
    color: var(--bm-signal-deep);
}

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

/*
 * Zwischen zwei Werkzeug-Hürden steht immer eine Szene, und die sehen alle
 * vier gleich: ein Panel im Großformat, die Stimme des Erzählers, eine
 * Sprechblase.
 *
 * Das ist der EINE gemeinsame Anker dieses Spiels, und er ist gewollt. Die
 * Geschichte gehört allen, die Werkzeuge gehören je einem – wer die Handlung
 * zerschneidet, bekommt kein Heist-Gefühl, sondern vier Leute, die sich
 * Bildunterschriften vorlesen.
 */
.buehne {
    display: grid;
    gap: var(--bm-gap-3);
    max-width: var(--bm-buehne);
}

/*
 * Zwei Spalten, sobald der Schirm sie hergibt: links das Panel, rechts daneben
 * Erzähler und Sprechblase.
 *
 * Untereinander gestellt schob die Blase das Panel auf jedem Bildschirm aus
 * dem Bild, und wer scrollte, hatte entweder die Zeichnung oder den Text —
 * nie beides. Im Comic steht die Blase im Bild und nicht auf der nächsten
 * Seite; das hier ist die nächstbeste Übersetzung davon auf einen Schirm, auf
 * dem das Panel eine feste Kante braucht.
 *
 * Die Grenze liegt bei 62rem und nicht am Gerät: Ein schmales Fenster auf
 * einem grossen Schirm braucht dieselbe eine Spalte wie ein Telefon.
 */
@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 den Kindselektor traf `grid-area: takt` jedes `.buehne__takt` im
     * Haus – auch das der Remittenden-Akte, und die ist ein eigenes Grid ohne
     * `grid-template-areas`. Ein benannter Bereich in einem Raster, das ihn
     * nicht kennt, reißt eine zweite Spalte auf: Die Ortsmarke stand plötzlich
     * als 512 Pixel hohes schwarzes Feld über den Akten, der Knopf daneben war
     * ein roter Block von 240 Pixeln, und die vier Karten drängten sich in
     * einer halben Breite. Es sah aus wie ein fehlendes Bild und war ein
     * Selektor, der zu weit griff.
     */
    .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 Zeilenmaß – die 75ch von
     * --bm-mass wären hier eine Breite, die es nicht gibt, und die Blase
     * hinge mit ihrem Einzug halb aus der Spalte heraus.
     */
    .buehne__stimme .buehne__erzaehler,
    .buehne__stimme .buehne__folge {
        max-width: none;
    }

    .buehne__stimme .blase {
        max-width: none;
    }
}

/*
 * Erzähler, Blase und Folge stehen als ein Block – auf schmalen Schirmen
 * untereinander, auf breiten in der rechten Spalte.
 *
 * Der Abstand kommt aus dem `gap` und nicht mehr aus dem Rand der Blase: Beides
 * zusammen setzte die Blase doppelt so weit ab wie den Erzählerkasten. Der
 * Einzug nach links bleibt, denn er ist der Versatz, den eine Sprechblase im
 * Comic gegenüber dem Erzählerkasten hat.
 */
.buehne__stimme {
    display: grid;
    gap: var(--bm-gap-3);
    align-content: start;
    min-width: 0;
}

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

/* Wahl, Weiter und Warten liegen unter beiden Spalten. */
.buehne__fuss {
    display: grid;
    gap: var(--bm-gap-2);
    justify-items: start;
}

/* Wie weit die Szene ist – als Reihe von Marken, nicht als Zahl. */
.buehne__takt {
    display: flex;
    gap: var(--bm-gap-1);
}

.buehne__marke {
    width: 2.2rem;
    height: 4px;
    background: var(--bm-ink-3);
}

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

.buehne__panel {
    position: relative;
    display: grid;
    place-items: end start;
    aspect-ratio: 16 / 9;
    /* Hält eine Bewegtschleife im Rahmen – siehe .art__schleife in comic.css. */
    overflow: hidden;
    margin: 0;
    background-color: var(--bm-ink-2);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center;
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

/*
 * Solange kein Bild da ist, steht hier kein leeres Rechteck, sondern ein
 * Storyboard-Rahmen: Halbtonraster, und darauf die Marke des Akts.
 *
 * Der Unterschied ist nicht kosmetisch. Ein leeres dunkles Feld sieht aus wie
 * ein Ladefehler, und wer einen Ladefehler sieht, wartet – auf der Bühne wartet
 * dann eine ganze Crew. Ein gezeichneter Rahmen sagt: Hier gehört ein Bild hin,
 * es ist nur noch nicht gezeichnet. Weitergespielt wird trotzdem.
 */
.buehne__panel:not([data-loaded='1'])::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--bm-ink-3) 1.2px, transparent 1.3px);
    background-size: var(--bm-halftone-size) var(--bm-halftone-size);
}

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

/*
 * Die Ortsmarke sitzt IM Panel und darf nie über dessen Kante laufen – ein
 * längerer Ortsname würde sonst rechts abgeschnitten. Deshalb eine harte
 * Breitengrenze und Umbruch statt Vertrauen auf kurze Namen.
 */
.buehne__ort {
    position: relative;
    max-width: 100%;
    padding: 0.35rem 0.6rem;
    font-family: var(--bm-font-amt);
    font-size: 0.68rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: var(--bm-paper);
    background: var(--bm-ink);
}

/*
 * Der Erzählerkasten. Im Comic ist die Stimme aus dem Off ein aufgeklebtes
 * Kästchen, kein Fließtext – Schreibmaschine auf Papier, harte Kante, oben
 * links im Panel gedacht.
 */
.buehne__erzaehler {
    max-width: var(--bm-mass);
    margin: 0;
    padding: var(--bm-gap-2) var(--bm-gap-3);
    font-family: var(--bm-font-doc);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--bm-ink);
    background: var(--bm-paper-aged);
    border: 3px solid var(--bm-ink);
    box-shadow: var(--bm-shadow-sm);
}

/*
 * Die Sprechblase. Der einzige Ort im ganzen UI, an dem eine Rundung erlaubt
 * ist – so steht es in der Bibel. Der Zipfel ist ein gedrehtes Quadrat, kein
 * Bild und kein Pseudo-Dreieck mit Rand: So bleibt die Kante hart.
 */
.blase {
    position: relative;
    max-width: 54ch;
    margin: var(--bm-gap-3) 0 0 var(--bm-gap-4);
    padding: var(--bm-gap-3);
    font-family: var(--bm-font-letter);
    /* Handgeschrieben und auf Papier: halbfett, sonst franst die Schrift auf
       dem hellen Grund aus. Comic-Lettering ist nie dünn. */
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--bm-ink);
    background: var(--bm-paper);
    border: 3px solid var(--bm-ink);
    border-radius: 1.6rem;
}

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

/*
 * Wer spricht, steht als Marke über der Blase – in SEINER Farbe, nicht in der
 * des Zuschauers. Alle vier sehen dieselbe Blase, und sie sollen alle
 * 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. Selmas Blattgold stand vorher bei
 * 1.78:1 auf dem Bogen: Es war die Identitätsfassung, und die ist für Gold
 * beinahe so hell wie das Papier darunter.
 */
.blase__wer {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--blase-schrift, var(--bm-ink));
}

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

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

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

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

.blase {
    border-left-width: 8px;
    border-left-color: var(--blase-farbe, var(--bm-ink));
}

/*
 * Die leere Blase: Hier redet gerade jemand, und zwar nicht auf deinem Schirm.
 *
 * Sie behält Form, Zipfel und Farbe der Figur – das Bild bleibt dasselbe, nur
 * der Wortlaut fehlt. Ein weggelassener Kasten hätte die rechte Spalte bei
 * jedem Schlag springen lassen; ein leerer Kasten sagt: Da kommt etwas, du
 * hörst es nur mit den Ohren.
 */
.blase--stumm {
    font-family: var(--bm-font-amt);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    /* Auf der Remittende stand der Ruß bei 2.63:1 – die stumme Blase ist still,
       aber nicht abgeschaltet, und wird gelesen wie jede andere. */
    color: var(--bm-soot-papier);
    background: var(--bm-paper-aged);
    border-style: dashed;
}

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

/*
 * Was aus einer Entscheidung folgt. Steht auf demselben Panel wie die Wahl:
 * Man sieht, was man angerichtet hat, bevor man weiterblättert.
 */
.buehne__folge {
    max-width: var(--bm-mass);
    margin: 0;
    padding: var(--bm-gap-2) var(--bm-gap-3);
    font-family: var(--bm-font-doc);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--bm-paper);
    background: var(--bm-ink-2);
    border-left: 4px solid var(--bm-mustard);
}

/* ------------------------------------------------------------- Die Wahl ----- */

/*
 * Eine Entscheidung gehört genau einer Figur. Die anderen drei sehen dieselben
 * Knöpfe und kommen nicht dran – das ist keine Schikane, sondern der Grund zu
 * reden: Zum selben Bild hat oft ein anderer die bessere Meinung.
 */
.wahl {
    display: grid;
    gap: var(--bm-gap-2);
    padding: var(--bm-gap-3);
    border: 2px solid var(--bm-mustard);
    background: var(--bm-feld-dunkel);
}

.wahl__frage {
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 0.82rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-mustard);
}

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

.wahl__knoepfe .btn {
    flex: 1 1 12rem;
    min-height: 44px;
}

.wahl[data-dran='0'] .btn {
    opacity: 0.55;
}

.wahl__fremd {
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 0.75rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
}

/* Wer wartet, wartet auf einen Menschen – nicht auf eine Ladeanzeige. */
.buehne__wartet {
    padding: var(--bm-gap-2) var(--bm-gap-3);
    font-family: var(--bm-font-amt);
    font-size: 0.8rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
    border: 1px dashed var(--bm-paper-dim);
}

/* Auf dem Papierschirm des Schmierfinks kehrt sich alles um. */
.station[data-rolle='schmierfink'] .buehne__wartet,
.station[data-rolle='schmierfink'] .wahl__fremd {
    color: var(--bm-soot);
    border-color: var(--bm-soot);
}

.station[data-rolle='schmierfink'] .wahl {
    background: var(--bm-feld-papier);
}

.station[data-rolle='schmierfink'] .wahl__frage {
    color: var(--bm-signal-deep);
}

.station[data-rolle='schmierfink'] .buehne__folge {
    color: var(--bm-paper);
}

/* ------------------------------------------------- Die Remittenden-Akte */

/*
 * Schritt 0, noch vor dem Vorspann: vier Personalakten auf einem Tisch.
 *
 * Die Übersicht ist bei allen vier gleich – das Raster, die Panels, die Namen.
 * Der Vorlesetext steht bei genau einem, und er steht in der Sprechblase seiner
 * eigenen Rollenfarbe: Was hier gesprochen wird, ist Comic, kein Formular.
 *
 * Die Karte im Scheinwerfer trägt ihre Rollenfarbe als Kante UND ihren Stempel.
 * Farbe allein trägt hier nichts – wer sie nicht unterscheidet, liest „liegt an".
 */
.vorstellung {
    display: grid;
    gap: var(--bm-gap-3);
    max-width: var(--bm-buehne);
}

/*
 * 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.
 *
 * Er ist auf `--bm-mass` gedeckelt und nicht auf die Bühnenbreite: Ein
 * Passbild von achthundert Pixeln über die ganze Bühne wäre ein Plakat, und
 * die Zeile darunter hätte dieselbe Breite wie ein Fließtext, den niemand
 * entlangliest.
 */
.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.
 *
 * Die Kante ist die einzige Stelle, an der die Rollenfarbe hier als Fläche
 * auftritt, und sie trägt keine Auskunft: Wer im Licht steht, sagt die
 * Bildunterschrift darunter im Klartext.
 */
.scheinwerfer__portraet {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--bm-ink);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center top;
    border: var(--bm-border-fat) solid var(--licht-farbe, var(--bm-soot));
    border-bottom: 0;
}

/* Ohne Bild ein Halbtonraster und kein schwarzes Loch – dasselbe wie am
   Jugendpanel 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(--bm-ink-3) 1.2px, transparent 1.3px);
    background-size: var(--bm-halftone-size) var(--bm-halftone-size);
}

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

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

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

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

/*
 * DER KASTEN: dieselbe Bildunterschrift wie unter jedem Panel dieses Hauses.
 *
 * Papier, Serife, Goldkante oben — die Fassung, die auch die Arena unter ihren
 * Comic-Panels führt. 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 (6.16:1 auf --bm-ink), nicht gegen ihre eigene
 * Fläche — die Begründung steht bei --bm-comic-papier in tokens.css.
 */
.scheinwerfer__kasten {
    display: grid;
    gap: 0.15rem;
    padding: var(--bm-gap-2) var(--bm-gap-3);
    background: var(--bm-comic-papier);
    border: var(--bm-border) solid var(--bm-ink);
    border-top: 2px solid var(--bm-gold);
    color: var(--bm-ink);
    font-family: var(--bm-font-comic);
    text-align: center;
}

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

.scheinwerfer__ruf {
    color: var(--bm-ink-notiz);
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.3;
}

/*
 * DIE KARTEI IM HALBDUNKEL.
 *
 * Die verlesende Akte steht auf dem Anderthalbfachen, die drei anderen auf
 * sieben Zehnteln – das ist die Aufteilung eines Verhörzimmers und nicht die
 * eines Rasters. Wer nur zuhört, findet in einer Sekunde, wo hingeschaut wird,
 * ohne den Text lesen zu müssen (den sieht er ohnehin nicht).
 *
 * Gemacht ist das über die BREITE und nicht über `transform: scale()`: Ein
 * skaliertes Kästchen überlappt seine Nachbarn und schiebt sich über deren
 * Stempel. Die Zahlen sind dieselben, das Ergebnis ist ein Layout statt einer
 * Kollision.
 *
 * Unter 46rem gilt das nicht mehr: Vier Karten nebeneinander gibt es dort
 * nicht, und eine Karte, die sieben Zehntel eines Telefons breit ist, ist
 * keine Karte mehr.
 *
 * HIER STAND EINE MEDIENREGEL `order: 1` FÜR DAS TELEFON, und sie ist mit dem
 * Scheinwerfer gefallen. Sie schob die vier Karten unter das Gesprochene, weil
 * sie im Markup darüber standen: Wer dran war, las oben „Deine Akte steht nur
 * bei dir", scrollte an drei fremden Karten mit Jugendpanels vorbei — rund
 * dreizehnhundert Pixel — und fand seinen Text samt dem einzigen Knopf dieses
 * Schritts ganz unten. Zwei Regeln für eine Reihenfolge, von denen die zweite
 * die erste zurücknahm. Jetzt entscheidet das Markup, auf jeder Breite: oben,
 * 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(13rem, 1fr));
    gap: var(--bm-gap-2);
}

@media (min-width: 46rem) {
    .vorstellung__akten {
        display: flex;
        align-items: start;
    }

    .vorstellung__akten .akte {
        flex: 0.7 1 0;
        transition: flex-grow var(--bm-schnell), opacity var(--bm-schnell);
    }

    .vorstellung__akten .akte[data-spot='1'] {
        flex-grow: 1.5;
    }
}

.akte {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--bm-gap-1);
    padding: var(--bm-gap-2);
    background: var(--bm-ink-2);
    border: var(--bm-border) solid var(--bm-ink-3);
    opacity: 0.4;
    transition: opacity var(--bm-schnell);
}

/*
 * DAS DIENSTSIEGEL, oben rechts in die Ecke gedrückt.
 *
 * Es liegt auf der Akte und nicht darin: ein Siegel wird auf den Deckel
 * gestempelt, nicht ins Formular gesetzt. Deshalb absolut positioniert und
 * halb über die Kante hinaus — so, wie eine Behörde ihr Wachs auf die Falz
 * setzt, damit man das Öffnen sieht.
 *
 * Rot, und das ist hier ein Signal im Sinne der Bibel: Es sagt „zu". Was es
 * NICHT allein trägt, ist die Auskunft — daneben steht derselbe Zustand als
 * Wort auf dem Stempel, und die Silhouette wechselt mit (ganzer Ring gegen
 * gerissenen Bogen). Farbe ist nie der einzige Träger.
 */
.akte__siegel {
    position: absolute;
    top: calc(var(--bm-gap-2) * -1);
    right: calc(var(--bm-gap-2) * -1);
    width: 3rem;
    height: 3rem;
    color: var(--bm-signal);
}

.akte__siegel svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: square;
}

/*
 * Gebrochen ist es keine Warnung mehr, sondern eine Quittung: Es bleibt stehen
 * und wird ruhig. Ein leerer Platz erzählt nichts — ein Riss erzählt, dass
 * jemand geredet hat.
 */
.akte__siegel[data-gebrochen='1'] {
    color: var(--bm-soot);
}

/* Verlesen heißt erledigt, nicht vergessen: Wer schon dran war, bleibt lesbar. */
.akte[data-zustand='verlesen'] {
    opacity: 0.72;
}

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

/* 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(--bm-role-schrauber);
    --akte-schrift: var(--schrift-schrauber);
}

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

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

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

.akte__panel {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Die Jugendpanels sind 16:9 – in einer 270px-Karte wird jeder Beschnitt
       teuer, weil das Motiv dann seine Haelfte verliert. Also unbeschnitten. */
    aspect-ratio: 16 / 9;
    margin: 0;
    background-color: var(--bm-ink);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center;
    border: var(--bm-border) solid var(--bm-ink);
}

/* Ohne Bild ein Storyboard-Rahmen, kein Ladefehler – wie auf der Bühne. */
.akte__panel:not([data-loaded='1'])::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--bm-ink-3) 1.2px, transparent 1.3px);
    background-size: var(--bm-halftone-size) var(--bm-halftone-size);
}

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

.akte__figur {
    margin: var(--bm-gap-1) 0 0;
    font-family: var(--bm-font-display);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--bm-paper);
}

.akte__ruf {
    margin: 0;
    font-family: var(--bm-font-letter);
    font-size: 1.05rem;
    color: var(--akte-schrift, var(--bm-paper-dim));
}

.akte__grund {
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
}

.akte__notiz {
    margin: 0;
    font-family: var(--bm-font-doc);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--bm-paper-dim);
}

/*
 * Der Vermerk wird durch Zuhören lesbar, nicht durch Warten – wie im Fach.
 *
 * Hier lagen drei Balken Druckerschwärze. Sie waren als Zensur gemeint und
 * wurden als Darstellungsfehler gelesen: eine harte schwarze Kante unter einer
 * Zeile wie „Rauswurf 1952". Jetzt steht dort eine Zeile Schreibmaschine —
 * dieselbe Schrift wie der offene Vermerk, nur stiller. Keine Kante, keine
 * Fläche: Die Karte trägt bereits einen Rahmen, und ein Kasten im Kasten wäre
 * der zweite.
 */
.akte__notiz--zu {
    color: var(--bm-soot-blech);
}

/*
 * Der Pfeil am Verlesen-Knopf steht im CSS und nicht im Wortlaut.
 *
 * Der Name der Konstante wird im Amtshilfe-Bescheid MITTEN IN EINEM SATZ
 * zitiert („… drückt danach den Knopf …"), und dort hat eine Pfeilspitze
 * nichts zu suchen. Am Knopf selbst schon: Sie sagt, dass es danach
 * weitergeht.
 */
[data-testid='vorstellung-vorlesen']::after {
    content: '\2192';
}

/*
 * Auf dem Papierschirm des Schmierfinks kehrt sich auch hier alles um: Die
 * Karten liegen auf Papier, nicht auf Blech.
 */
.station[data-rolle='schmierfink'] .akte {
    background: var(--bm-feld-papier);
}

.station[data-rolle='schmierfink'] .akte__figur {
    color: var(--bm-ink);
}

/* Der Ruß stand hier bei 3.30:1. Die Papierfassung nimmt alle drei Zeilen mit –
   auch die verschlossene, denn `.akte__notiz--zu` ist dasselbe Element und
   diese Regel ist die spezifischere. */
.station[data-rolle='schmierfink'] .akte__grund,
.station[data-rolle='schmierfink'] .akte__notiz {
    color: var(--bm-soot-papier);
}

/* ======================================================== AKT 4: Die Flucht */

/*
 * Der Streifenwagen im Rückspiegel – das Fass, nur anders beschriftet.
 *
 * Balken UND Ziffer, bei allen vieren, und das ist kein gemeinsamer Anker im
 * Sinne von Abschnitt 7: Dieselbe Zahl steht als Aktenvermerkstand ohnehin auf
 * jedem der vier Schirme. Sie bekommt hier nur ein Bild, das zur Flucht passt.
 *
 * Er hieß einmal so, weil er der Störfrequenz gehörte – vier Schütze und ein
 * Brummen, das mit ihm fiel. Die Hürde ist gefallen, der Klang mit ihr, und
 * Fall 01 hat seitdem keinen Ton mehr, der eine Zahl trägt.
 */
.pegel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bm-gap-2);
    padding: var(--bm-gap-3);
    border: var(--bm-border) solid currentColor;
}

.pegel__marke,
.pegel__stand {
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

.pegel__balken {
    display: flex;
    gap: 3px;
}

.pegel__balken i {
    width: 1.6rem;
    height: 1.6rem;
    background: var(--bm-ink-3);
}

.pegel__balken i[data-voll='1'] {
    background: var(--bm-signal);
}

.pegel__wert {
    font-family: var(--bm-font-mono);
    font-size: 1.6rem;
}

/* ================================================ Die Bühne auf dem Handy */

@media (max-width: 640px) {
    /*
     * Auf dem Handy holt sich das Panel die Polsterung der Station zurück.
     *
     * Sonst steht ausgerechnet die eine Ansicht, die groß sein soll, am
     * stärksten eingerückt da: 273 von 375 Pixeln, der Rest sind Ränder. Ein
     * Comic-Panel, das ein Viertel des Schirms an Luft verliert, ist kein
     * Großformat mehr.
     */
    .buehne__panel {
        aspect-ratio: 4 / 3;
        margin-inline: calc(var(--bm-gap-4) * -1);
    }

    .blase {
        margin-left: var(--bm-gap-2);
        font-size: 1.2rem;
    }

    .wahl__knoepfe .btn {
        flex-basis: 100%;
    }

    /*
     * Auf 375 px stehen die vier Akten untereinander. Zwei nebeneinander
     * hätten je 160 px – ein Panel, in dem niemand mehr erkennt, wer da steht.
     */
    .vorstellung__akten {
        grid-template-columns: 1fr;
    }
}