/*
 * Startbildschirm, Lobby und Briefing.
 * Jeder Spieler sitzt an einem eigenen Gerät – das Handy ist der Normalfall,
 * nicht der Sonderfall. Deshalb einspaltig zuerst, breiter erst ab 46rem.
 */

/*
 * DIE LUFT NACH OBEN KOMMT AUS DEM RAHMEN.
 *
 * Hier stand `clamp(1.5rem, 5vh, 3.5rem)` — an der FENSTERHÖHE gemessen, also
 * an der einen Größe, die mit der klebenden Leiste darüber nichts zu tun hat:
 * Auf einem flachen Fenster fiel der Abstand auf vierundzwanzig Pixel, während
 * die Leiste ihre siebenundsechzig behielt, und der Inhalt klebte an ihrer
 * Unterkante. `--haus-kopfluft` steht in `shared/haus/haus.css` neben der
 * Leiste, zu der sie gehört — dieselbe Zahl im Foyer und im Nachbarzimmer.
 */
.shell {
    width: min(100% - 2rem, var(--bm-shell));
    margin-inline: auto;
    padding-block: var(--haus-kopfluft) var(--bm-gap-5);
}

/*
 * Nicht alles will die volle Bühnenbreite.
 *
 * Startseite und Coup nutzen sie: Dort stehen Panels, Karten und Stationen
 * nebeneinander. Lobby und Abrechnung sind Listen – eine Aufstellung von vier
 * Namen über 1300 Pixel ist ein Strich mit Text am Rand. Sie behalten deshalb
 * das alte Maß und stehen darin mittig.
 */
.view[data-view='lobby'],
.view[data-view='debriefing'] {
    width: min(100%, 68rem);
    margin-inline: auto;
}

/*
 * DREI FRAGEN, DREIMAL DERSELBE ABSTAND.
 *
 * „Die Crew", „Wie viele seid ihr?", „Wer macht was?" trugen die Nullmarge aus
 * base.css und lebten von dem, was ihre Vorgänger unten stehen ließen: oben
 * 30, 30 und 18 Pixel, unten dreimal nichts. Jede Überschrift klebte an ihrer
 * Liste, und der dritte Abschnitt saß enger als die ersten beiden — das ist
 * der Sprung, den man sieht, ohne ihn benennen zu können.
 *
 * Die Ränder fallen mit denen der Vorgänger zusammen, statt sich zu addieren:
 * Diese Ansicht macht keinen eigenen Formatierungskontext auf. Wer hier später
 * ein `overflow`, `flex` oder `grid` einführt, verdoppelt jeden dieser
 * Abstände.
 */
.view[data-view='lobby'] h2 {
    margin: var(--bm-gap-4) 0 var(--bm-gap-2);
}

/* --- Die Halbzeit --------------------------------------------------------- */

/*
 * Der Pausenbildschirm. Ein Aushang, kein Bildschirm voller Knöpfe.
 *
 * Er darf ruhig leer aussehen: Wer hier steht, soll aufstehen. Was bleibt, ist
 * der Raumcode – gross genug, um ihn vom Sofa aus abzutippen, wenn jemand das
 * Fenster zugemacht hat.
 */
.pause {
    max-width: var(--bm-mass);
    margin: var(--bm-gap-5) auto;
    padding: var(--bm-gap-4);
    text-align: center;
    border: var(--bm-border-fat) solid var(--bm-ink-3);
}

/*
 * „Die Kaffeeklappe" in Alfa Slab One, und das zweite Wort hat zwölf Zeichen.
 *
 * Auf 375 px misst es 343 Pixel in einem Kasten von 272 — die Pausenansicht
 * scrollte damit als einzige Ansicht des Spiels seitwärts. Gesehen hat das kein
 * Lauf: `dev/dev.ps1 mobil` fährt Startseite, Lobby, Akte, Bühne und zwei
 * Hürden, aber nie die Kaffeeklappe.
 *
 * Getrennt wird nach derselben Regel wie die Schlagzeile der Zeitung
 * (`.aufmacher__schlagzeile`, zeitung.css): erst der Trennstrich, und wenn der
 * Browser kein Wörterbuch hat, der harte Bruch. Ein Blatt mit „KAFFEE-" am
 * Zeilenende ist Zeitungssatz; eines, das über den Rand hinausläuft, ist ein
 * Fehler.
 */
.pause h1 {
    margin: var(--bm-gap-2) 0;
    font-family: var(--bm-font-display);
    hyphens: auto;
    overflow-wrap: break-word;
}

.pause__marke,
.pause__uhr-label,
.pause__code-label,
.pause__wartet {
    font-family: var(--bm-font-amt);
    font-size: 0.76rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
}

.pause__text {
    max-width: 46ch;
    margin: 0 auto var(--bm-gap-4);
    font-family: var(--bm-font-doc);
}

.pause__uhr,
.pause__code {
    display: grid;
    gap: 0.2rem;
    margin: var(--bm-gap-3) 0;
}

/*
 * Die Pausenuhr zählt hoch und wird nie knapp – wie die Einsatzzeit und aus
 * demselben Grund: Sie beantwortet "wie lange stehen wir schon?" und sonst
 * nichts. Deshalb trägt sie kein Signalrot.
 */
.pause__uhr-wert {
    font-family: var(--bm-font-mono);
    font-size: 2rem;
}

.pause__code strong {
    font-family: var(--bm-font-mono);
    font-size: 2.4rem;
    letter-spacing: 0.28em;
    color: var(--bm-mustard);
}

/*
 * Die Klappe selbst: Resopal von schräg oben, ein Aschenbecher, ein brauner
 * Ring. Sie ist breiter als der Text darunter, weil ein Panel im Format 21:9
 * die einzige Fläche dieses Bildschirms ist, auf der etwas zu sehen gibt.
 */
.art--klappe {
    --art-ratio: 21 / 9;
    --art-accent: var(--bm-bordeaux);
    margin: 0 0 var(--bm-gap-3);
}

/* --- Die drei Klappen ----------------------------------------------------- */

/*
 * Drei Kacheln, hinter denen nichts liegt.
 *
 * Sie sind der einzige Ort des Abends, an dem ein Griff nichts kostet und
 * nichts meldet – kein Handgriff, keine Frist, kein Aktenvermerk. Deshalb
 * dürfen sie aussehen wie das, was sie sind: eine Klappe an einer Wand, hinter
 * der jemand einen Zettel hinterlassen hat.
 *
 * Nebeneinander erst ab 46rem, dieselbe Schwelle wie überall in dieser Datei.
 *
 * Und sie heißen `kaffeeklappe` und nicht `klappe`: Den kurzen Namen trägt seit
 * jeher die Frist in Schleuse und Einspeisung (game.css). Ihre Regel setzt
 * `display: block`, steht in einer später geladenen Datei und hätte dieses
 * Raster still plattgemacht — drei Kacheln standen dann treppenförmig
 * untereinander, und keine Zeile hier sah danach aus.
 */
.kaffeeklappe {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bm-gap-2);
    margin-top: var(--bm-gap-4);
}

@media (min-width: 46rem) {
    .kaffeeklappe {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kaffeeklappe__kachel {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--bm-gap-2);
    min-height: 44px;
    padding: var(--bm-gap-3);
    font: inherit;
    text-align: center;
    color: var(--bm-paper);
    background: var(--bm-ink-2);
    border: var(--bm-border) solid var(--bm-ink-3);
    border-radius: 0;
    box-shadow: var(--bm-shadow-sm);
    cursor: pointer;
    transition: transform var(--bm-schnell), border-color var(--bm-schnell);
}

.kaffeeklappe__kachel:hover {
    border-color: var(--bm-soot);
    transform: translate(-1px, -1px);
}

/* Aufgeklappt heißt: Diese hier ist gemeint. Farbe trägt das nicht allein – der
   Absatz darunter steht sichtbar da, und `aria-expanded` sagt es der Vorlesung. */
.kaffeeklappe__kachel[aria-expanded='true'] {
    color: var(--bm-ink);
    background: var(--bm-paper-aged);
    border-color: var(--bm-paper);
}

.kaffeeklappe__zeichen svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

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

.kaffeeklappe__uhr {
    font-family: var(--bm-font-mono);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
}

/* Das aufgeschlagene Blatt. `max-width: none`, sonst deckelt das Zeilenmaß aus
   base.css es ein zweites Mal und der zentrierte Satz sitzt schief im Kasten. */
.kaffeeklappe__blatt {
    max-width: none;
    margin: var(--bm-gap-3) 0 0;
    padding: var(--bm-gap-3);
    font-family: var(--bm-font-doc);
    font-size: 0.92rem;
    text-align: left;
    color: var(--bm-paper);
    border: var(--bm-border) solid var(--bm-ink-3);
}

/* --- Das Vorprogramm ------------------------------------------------------ */

/*
 * Die Ausrüster-Anzeige, und sie ist die einzige helle Fläche dieser Nacht.
 *
 * Wieder ein GEGENSTAND und kein zweiter Modus: ein Blatt, das jemand an die
 * Klappe geheftet hat, mit Korn, Halbton und harter Kante. Die knappe Drehung
 * hat in diesem Haus Vorbilder – Stempel und Trophäe stehen ebenso schief –,
 * und sie bleibt klein genug, dass der Kasten nicht seitlich aus dem Fenster
 * wächst.
 */
.reklame {
    margin: var(--bm-gap-3) 0 0;
    padding: var(--bm-gap-3);
    text-align: left;
    color: var(--bm-ink);
    background-color: var(--bm-paper);
    background-image:
        var(--bm-grain),
        repeating-linear-gradient(45deg, var(--bm-halbton) 0 1px, transparent 1px var(--bm-halftone-size));
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
    transform: rotate(-0.6deg);
}

.reklame p {
    max-width: none;
    color: var(--bm-ink);
}

.reklame__marke {
    display: block;
    margin-bottom: var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.64rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(11, 11, 13, 0.55);
}

/*
 * Die Schlagzeile des Vorprogramms steht in der Anzeigenschrift und nicht als
 * h1: Eine Überschrift brächte hier den Fehlregister-Schatten und das Gold aus
 * base.css mit – beides auf Papier gedruckt eine Farbe zu viel.
 */
.reklame__titel {
    margin: 0 0 var(--bm-gap-2);
    font-family: var(--bm-font-display);
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.reklame__text p {
    margin: 0 0 var(--bm-gap-2);
    font-family: var(--bm-font-doc);
    font-size: 0.9rem;
    line-height: 1.5;
}

.reklame__haus {
    display: grid;
    gap: 0.1rem;
    margin: var(--bm-gap-3) 0 var(--bm-gap-2);
    padding-top: var(--bm-gap-2);
    border-top: 1px solid var(--bm-ink);
}

.reklame__rolle,
.reklame__ort {
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

/* Gold als Linie, nie als Fläche. */
.reklame__ziel {
    font-family: var(--bm-font-display);
    font-size: 1.3rem;
    color: var(--bm-ink);
    text-decoration: underline;
    text-decoration-color: var(--bm-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.reklame__fuss {
    margin: 0;
    font-family: var(--bm-font-doc);
    font-size: 0.72rem;
    color: rgba(11, 11, 13, 0.6);
}

/* --- Kopf ----------------------------------------------------------------- */

.masthead {
    text-align: center;
    margin-bottom: var(--bm-gap-4);
}

.masthead__kicker {
    display: inline-block;
    margin-bottom: var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.76rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bm-signal);
}

/* --- Startbildschirm ------------------------------------------------------ */

/*
 * Vom alten Startbildschirm ist der Einleitungssatz übrig, sonst nichts.
 *
 * `.start` selbst war ein zweispaltiges Raster mit `align-items: start`, und
 * der Vordruck der Zeitung trug die Klasse noch mit. Das Raster erfand er
 * daneben ein zweites Mal — die geerbte Ausrichtung aber hielt seine beiden
 * Hälften auf ihrer eigenen Höhe fest, und dagegen kam kein `1fr` an: Der
 * rechte Stempelknopf stand dreizehn Pixel tiefer als der linke, weil das
 * Code-Feld eine größere Schrift trägt.
 */
.start__note {
    margin: 0 0 var(--bm-gap-3);
    font-family: var(--bm-font-doc);
    font-size: 0.88rem;
    color: var(--bm-paper-dim);
}

.field {
    margin-bottom: var(--bm-gap-3);
}

.field__hint {
    margin: var(--bm-gap-1) 0 0;
    font-size: 0.8rem;
    color: var(--bm-paper-dim);
}

/*
 * Vom Codefeld bleibt die Großschreibung, sonst nichts.
 *
 * Es trug einmal eine eigene Schrift, 1,9 rem, Sperrung und Zentrierung und
 * sah dadurch aus wie ein anderes Bauteil als das Namensfeld daneben. Zwei
 * dieser Angaben waren obendrein wirkungslos: `.vordruck input` (zeitung.css)
 * schlägt diese Klasse in der Spezifität und setzt Schrift und Polsterung.
 *
 * Die Versalien macht das CSS und nicht der Wert. Den Filter in js/lobby.js,
 * der beim Tippen Kleinschreibung, Leerzeichen und Sonderzeichen wegräumt und
 * auf fünf Stellen kappt, ersetzt er NICHT — der macht etwas anderes.
 */
.code-input {
    text-transform: uppercase;
}

/* --- Lobbykopf ------------------------------------------------------------ */

.roomhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bm-gap-2) var(--bm-gap-3);
    margin-bottom: var(--bm-gap-4);
    padding: var(--bm-gap-3);
    background: var(--bm-ink-2);
    border: var(--bm-border) solid var(--bm-ink-3);
}

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

.roomhead__code {
    display: block;
    font-family: var(--bm-font-display);
    font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
    letter-spacing: 0.16em;
    color: var(--bm-gold);
    text-shadow: 2px 2px 0 var(--bm-ink);
}

.roomhead__spacer {
    flex: 1 1 auto;
}

/* Verbindungsanzeige: ein Punkt, der nur auffällt, wenn etwas nicht stimmt. */
.link-state {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bm-soot);
}

.link-state::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
}

.link-state[data-mode='connecting'] {
    color: var(--bm-soot);
}

.link-state[data-mode='live'] {
    color: var(--bm-role-codeknacker);
}

.link-state[data-mode='polling'] {
    color: var(--bm-gold);
}

.link-state[data-mode='offline'] {
    color: var(--bm-signal);
}

/* --- Aufstellung ---------------------------------------------------------- */

.roster {
    display: grid;
    gap: var(--bm-gap-1);
    margin-bottom: var(--bm-gap-2);
}

.roster__row {
    display: grid;
    grid-template-columns: 1.6rem minmax(6rem, 1fr) auto auto;
    align-items: center;
    gap: var(--bm-gap-2);
    padding: var(--bm-gap-2);
    background: var(--bm-ink-2);
    border-left: var(--bm-border-fat) solid var(--bm-ink-3);
}

.roster__row[data-ready='1'] {
    border-left-color: var(--bm-role-codeknacker);
}

.roster__row[data-me='1'] {
    background: #221d18;
}

.roster__check {
    font-family: var(--bm-font-display);
    font-size: 1.1rem;
    text-align: center;
    color: var(--bm-soot);
}

.roster__row[data-ready='1'] .roster__check {
    color: var(--bm-role-codeknacker);
}

.roster__name {
    font-family: var(--bm-font-amt);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.roster__row[data-me='1'] .roster__name::after {
    content: ' (du)';
    color: var(--bm-paper-dim);
    font-size: 0.8em;
}

.roster__role {
    font-family: var(--bm-font-doc);
    font-size: 0.85rem;
    color: var(--bm-paper-dim);
}

.roster__tags {
    display: flex;
    gap: var(--bm-gap-1);
}

/*
 * „Es fehlen noch: …" ist ein Satz, den jemand lesen soll — und stand im Ton
 * für abgeschalteten Text. Derselbe Einwand steht weiter unten schon einmal
 * begründet: --bm-soot ist Ruß und kein Fließtext. Die Zeile teilt sich ihre
 * Gattung mit .section-note und bekommt deshalb deren Farbe und deren Maß.
 */
.roster__hint {
    margin-bottom: var(--bm-gap-3);
    max-width: 56ch;
    font-family: var(--bm-font-doc);
    font-size: 0.85rem;
    color: var(--bm-paper-dim);
}

/*
 * Warum die Tür noch zu ist.
 *
 * Sie steht unter der Knopfzeile und trägt eine Kante in der Farbe, die in
 * dieser Ansicht schon „bereit" heißt — dieselbe wie die linke Kante einer
 * Roster-Zeile, die genickt hat. Solange jemand fehlt, ist sie Ruß; sind alle
 * so weit, ist sie grün. Die Farbe trägt dabei nichts allein: Was fehlt, steht
 * als Satz darin.
 */
.bereitschaft {
    margin: var(--bm-gap-2) 0 0;
    padding-left: var(--bm-gap-2);
    max-width: 56ch;
    font-family: var(--bm-font-doc);
    font-size: 0.9rem;
    color: var(--bm-paper);
    border-left: var(--bm-border-fat) solid var(--bm-soot);
}

.bereitschaft[data-satt='1'] {
    border-left-color: var(--bm-role-codeknacker);
}

/* --- Rollenwahl ----------------------------------------------------------- */

/*
 * DIE SPALTENZAHL HÄNGT AN DER ZAHL DER STÜHLE, NICHT AN DER BREITE.
 *
 * `repeat(auto-fit, minmax(15rem, 1fr))` rechnet nur, wie viele Karten
 * hineinpassen — nicht, wie viele es gibt. Zwischen 789 und 1047 Pixeln passten
 * genau drei, und die vierte stand allein in einer zweiten Reihe. Das ist das
 * Band, in dem ein Tablet hochkant und ein halbierter Laptop-Schirm liegen,
 * also kein Randfall.
 *
 * Jetzt steht die Zahl als `data-stuehle` am Raster (js/lobby.js), und die
 * Treppe teilt sie immer glatt: vier Karten stehen als 1, 2×2 oder 4, drei als
 * 1 oder 3, zwei als 1 oder 2. Ein Einzelgänger in der letzten Reihe kann
 * dabei nicht mehr entstehen.
 *
 * `minmax(0, 1fr)` statt `1fr` ist Pflicht: Mit blankem `1fr` ist die
 * Mindestbreite einer Spalte ihr min-content, und ein langes Wort in einer
 * fetten Egyptienne sprengt den Kasten. Genau daran ist die Startseite auf dem
 * Telefon schon einmal aufgerissen.
 */
.roles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bm-gap-3);
    margin-bottom: var(--bm-gap-4);
}

@media (min-width: 34rem) {
    .roles[data-stuehle='2'],
    .roles[data-stuehle='4'] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 52rem) {
    .roles[data-stuehle='3'] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 66rem) {
    .roles[data-stuehle='4'] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.role-card {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: var(--bm-gap-1);
    padding: var(--bm-gap-3);
    text-align: left;
    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);
}

.role-card:hover {
    transform: translateY(-2px);
    border-color: var(--role-accent);
}

.role-card__crest {
    color: var(--role-accent);
}

.role-card__crest svg {
    width: 44px;
    height: 44px;
}

/*
  DER NAME LIEST DIE SCHRIFTFASSUNG, NICHT DIE IDENTITAET.

  Die Karte liegt auf --bm-ink-2 (#17171c). Maschinenblau steht dort bei
  3.31:1 und Rotstift bei 3.62:1 — beides unter 4.5, und der Name ist mit
  1,25 rem bei normalem Schnitt KEIN Grosstext.

  DIE KARTE IST DER EINE ORT, AN DEM DIE UMSCHALTTABELLE NICHT GREIFT: Sie
  liegt in der Lobby und nicht in einer `.station`. Die vier Zuordnungen
  haengen deshalb hier am Bildfeld (`data-panel="rolle_<key>"`), das
  js/lobby.js ohnehin setzt — genau wie im Nachbarhaus.

  Selma und Nuri behalten ihre Identitaetsfarbe: Blattgold steht dort bei
  7.38:1, Registergruen bei 5.67:1. Ein Token, das nur ein anderes
  wiederholt, laeuft beim naechsten Umbau still auseinander.
*/
.role-card:has([data-panel='rolle_schrauber']) {
    --role-schrift: var(--bm-role-schrauber-blech);
}

.role-card:has([data-panel='rolle_schmierfink']) {
    --role-schrift: var(--bm-role-schmierfink-blech);
}

.role-card:has([data-panel='rolle_faelscher']) {
    --role-schrift: var(--bm-role-faelscher);
}

.role-card:has([data-panel='rolle_codeknacker']) {
    --role-schrift: var(--bm-role-codeknacker);
}

.role-card__name {
    font-family: var(--bm-font-display);
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    color: var(--role-schrift, var(--role-accent));
}

/*
  DER SPRUCH IST DIE STIMME DER KARTE UND STAND IN NEBENTEXTFARBE.

  --bm-paper-dim haelt auf --bm-ink-2 seine 6,06:1 und war damit nie der
  Befund; der Befund war die Rangfolge. Name, Spruch, Schlagworte und Stand
  standen in drei Abstufungen desselben Grautons uebereinander, und die
  Karte hatte keine Zeile, die man zuerst liest. Volles Papier steht dort bei
  13,12:1 — das ist die Zeile, die den Stuhl verkauft.

  ZWEI ZEILEN, IMMER. Zwei der vier Sprueche brechen um und zwei nicht; die
  Schlagwortreihen darunter begannen deshalb auf jeder Karte an einer anderen
  Hoehe, und das Raster las sich als vier verschieden gebaute Kaesten. Die
  Mindesthoehe kostet auf den kurzen Karten eine Leerzeile und richtet alle
  vier aus. Sie ist in em gerechnet und nicht in px: Wer die Schrift
  hochstellt, bekommt weiter zwei Zeilen und keinen abgeschnittenen Satz.
*/
.role-card__claim {
    font-family: var(--bm-font-doc);
    font-size: 0.86rem;
    line-height: 1.35;
    min-height: 2.7em;
    color: var(--bm-paper);
}

/*
  `align-content` IST DER ZERRISSENE RHYTHMUS, und zwar buchstaeblich.

  Die Karte ist ein Raster, und die Schlagwortzeile liegt in ihrer `1fr`-Reihe
  — sie bekommt also die ganze Luft, die zwischen Spruch und Stand uebrig
  bleibt. Ein umbrechender Flexkasten verteilt diese Luft nach Vorgabe
  (`stretch`) ZWISCHEN seine Zeilen: Auf einer Karte mit zwei Schlagwortzeilen
  standen die beiden Reihen dadurch weit auseinander, auf einer mit drei eng
  beieinander. Es sah nach einem Umbruchfehler aus und war eine Verteilung.

  `flex-start` packt die Reihen nach oben; die Luft steht dann in EINEM Stueck
  ueber dem Stand, wo sie hingehoert.
*/
.role-card__domain {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.3rem;
    margin-top: var(--bm-gap-2);
}

/*
  RUSS STAND HIER BEI 3,49:1 — in 0,66 rem, in Versalien, gesperrt.

  --bm-soot (#6d6d78) ist im Tokenblatt als „deaktivierter Text" gefuehrt, und
  genau das waren diese Schlagworte nicht: Sie sagen, was der Stuhl anfasst,
  und sie stehen auf der einen Ansicht, auf der jemand seinen Platz waehlt.
  --bm-paper-dim haelt dort 6,06:1 und auf dem belegten Grund 6,67:1.

  Das Polster wuchs mit: 0,1 em hoch waren bei dieser Schriftgroesse zwei
  Pixel, und der Kasten sass der Versalie auf der Oberkante.
*/
.role-card__domain span {
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bm-paper-dim);
    padding: 0.15em 0.45em;
    border: 1px solid var(--bm-ink-3);
}

/* „FREI" IST EIN STAND UND KEIN DEAKTIVIERTER KNOPF. Derselbe Russ wie bei den
   Schlagworten, dasselbe 3,49:1 — und das ist die Zeile, nach der jemand
   sucht, bevor er greift. --bm-paper-dim: 6,06:1. */
.role-card__holder {
    margin-top: var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
}

.role-card[data-taken-by='me'] {
    background: #221d18;
    border-color: var(--role-accent);
    box-shadow: var(--bm-shadow-sm);
}

/*
  DERSELBE DOPPELJOB WIE OBEN AM NAMEN, nur eine Zeile tiefer uebersehen.

  --role-accent ist die IDENTITAET und taugt als Flaeche; als Schrift auf dem
  Kartengrund des eigenen Stuhls (#221d18) kommt Maschinenblau auf 3,10:1 und
  Rotstift auf 3,39:1. --role-schrift ist die Schriftfassung, die die vier
  Regeln darueber ohnehin schon je Bildfeld stellen — 4,91:1 und 4,92:1. Der
  Rueckfall ist Papier und nicht der Akzent: Ein Stuhl ohne Bildfeld soll
  lesbar sein und nicht bunt.
*/
.role-card[data-taken-by='me'] .role-card__holder {
    color: var(--role-schrift, var(--bm-paper));
}

/*
  Belegt heißt: sichtbar aus dem Rennen, aber weiterhin anklickbar – die Absage
  kommt vom Server, sonst würden zwei gleichzeitige Klicks unterschiedlich enden.

  UND WEIL SIE ANKLICKBAR BLEIBT, DARF SIE NICHT VERBLASSEN. Hier stand
  „opacity: 0.55" auf der GANZEN Karte, und Deckkraft rechnet jede Schrift
  gegen ihren Grund herunter: Aus 6,06:1 wurden 2,74:1. Eine Karte, die man
  anfassen kann, ist nach WCAG kein deaktiviertes Bedienelement — sie schuldet
  ihre 4,5:1 wie jede andere.

  DER RUECKZUG STEHT JETZT IM BILD UND IM GRUND, NICHT IN DER SCHRIFT. Das
  Portraet geht grau und blass (es traegt keine Auskunft, die nicht daneben
  steht), die Karte faellt eine Tiefe auf --bm-ink, und der Name des Belegers
  steht in der Blechfassung des Signals: 5,78:1 statt der 3,87:1, die das
  volle Rot auf diesem Grund hielt.
*/
.role-card[data-taken-by='other'] {
    background: var(--bm-ink);
    border-color: var(--bm-ink-3);
}

.role-card[data-taken-by='other'] .role-card__art {
    filter: grayscale(0.9);
    opacity: 0.45;
}

.role-card[data-taken-by='other'] .role-card__holder {
    color: var(--bm-signal-blech);
}

/* --- Fußleiste ------------------------------------------------------------ */

.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bm-gap-2);
    padding-top: var(--bm-gap-3);
    border-top: var(--bm-border) solid var(--bm-ink-3);
}

.controls__spacer {
    flex: 1 1 auto;
}

/*
 * In der Lobby steht die Knopfzeile mittig, und zwar nur dort.
 *
 * Unter einem Raster aus vier gleich breiten Karten las sich eine linksbündige
 * Zeile wie ein Stapel, den jemand an die Kante geschoben hat. Im Coup und in
 * der Abrechnung bleibt es beim Spacer: Dort steht der Absprung mit Absicht am
 * rechten Rand, weit weg von den Knöpfen, die man wirklich drücken will.
 */
.view[data-view='lobby'] .controls {
    justify-content: center;
}

[data-testid='ready-toggle'][data-ready='1'] {
    color: var(--bm-ink);
    background: var(--bm-role-codeknacker);
}

/*
 * KEINE FARBE ALS EINZIGER TRÄGER, auch nicht hier.
 *
 * Der eigene Bereit-Knopf zeigte seinen Zustand allein über den grünen Grund —
 * die Beschriftung bleibt mit Absicht stehen („Bereit" ist der Zustand, nicht
 * die Aktion; eine Schrift, die zwischen zwei Wörtern springt, widerspräche
 * der Farbe). Wer Rot und Grün nicht auseinanderhält, hatte damit kein
 * Merkmal. Das Häkchen ist dasselbe wie in der Aufstellung nebenan, und es
 * kommt vor die Beschriftung: `.btn` ist ein flex-Kasten mit eigenem Abstand.
 */
[data-testid='ready-toggle'][data-ready='1']::before {
    content: '✓';
    font-family: var(--bm-font-display);
}

/* Kurzer Hinweis unter einer Abschnittsüberschrift. */
.section-note {
    margin: 0 0 var(--bm-gap-3);
    max-width: 56ch;
    font-family: var(--bm-font-doc);
    font-size: 0.85rem;
    color: var(--bm-paper-dim);
}

/* --- Der Anzeigenteil im Warteraum ---------------------------------------- */

/*
 * Ein Zeitungsausschnitt, der in der Nacht auf dem Tisch liegt.
 *
 * Das Rezept ist dasselbe wie bei Extrablatt und Trophäe im Debriefing –
 * Papierton, harte Kante, Schlagschatten –, nur eine Auflage älter:
 * `--bm-paper-aged` ist laut Tokens die vergilbte Zweitauflage und
 * unterscheidet das Fundstück von der frischen Zeitung der Startseite.
 *
 * NICHT GEDREHT, so verlockend „auf den Tisch geworfen" auch wäre: Ein
 * gedrehter Kasten wächst aus seinem Rechteck heraus, und der Handytest misst
 * jede Kante gegen die Fensterbreite. Ein Grad kostet an einem Block dieser
 * Größe drei Pixel je Seite – und die Meldung hieße dann „kein seitliches
 * Scrollen", was nach allem klingt, nur nicht nach einer Drehung.
 *
 * Korn und Halbton sind die Ausnahme, die die Bibel für Verläufe vorsieht:
 * Rasterpunkte auf Papier, dieselbe Mischung wie im Kopf der Zeitung.
 */
.anzeige {
    display: block;
    max-width: var(--bm-mass);
    margin: var(--bm-gap-4) auto 0;
    padding: var(--bm-gap-3);
    color: var(--bm-ink);
    background-color: var(--bm-paper-aged);
    background-image:
        var(--bm-grain),
        repeating-linear-gradient(45deg, var(--bm-halbton) 0 1px, transparent 1px var(--bm-halftone-size));
    border: var(--bm-border) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

/*
 * Alles im Fetzen bekommt `max-width: none`. Sonst deckelt das Zeilenmaß aus
 * base.css jeden Absatz ein zweites Mal – der Kasten ist selbst schon auf
 * --bm-mass begrenzt, und ein Maß im Maß setzt den Text auf zwei Drittel.
 */
.anzeige p {
    max-width: none;
}

.anzeige__marke {
    display: block;
    margin-bottom: var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bm-ink-3);
}

.anzeige__kopf {
    margin: 0 0 var(--bm-gap-2);
    padding-bottom: var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.8rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    border-bottom: 1px solid var(--bm-ink);
}

.anzeige__text {
    margin: 0 0 var(--bm-gap-2);
    font-family: var(--bm-font-doc);
    font-size: 0.88rem;
    line-height: 1.5;
    hyphens: auto;
}

.anzeige__schluss {
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--bm-tracking-amt);
}

/* Gold ist hier eine Linie und keine Fläche – so weit reicht die Ausnahme. */
.anzeige__ziel {
    color: var(--bm-ink);
    text-decoration: underline;
    text-decoration-color: var(--bm-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

/* --- Bildflächen ---------------------------------------------------------- */

/* Auf der Rollenkarte hält das Wappen den Platz frei, bis das Porträt da ist. */
.role-card__art {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    width: 64px;
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center;
}

.role-card__art[data-loaded='1'] {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 2px solid var(--bm-ink);
}

.role-card__art[data-loaded='1'] .role-card__crest {
    display: none;
}

/* --- Debriefing ----------------------------------------------------------- */

.debriefing {
    display: grid;
    gap: var(--bm-gap-4);
}

/*
 * Die Täter-Akte.
 *
 * Ein Vorgang der Preisbindungstreuhand, abgeheftet: Kopf mit Stelle und
 * Aktenzeichen, Betreff, die drei Zahlen, ein Schlusssatz zur Wiedervorlage.
 * Der Rahmen ist fett, weil eine Akte ein Deckel hat – und eckig, wie alles
 * hier ausser den Sprechblasen und den Medaillons.
 *
 * SIE HIESS EINMAL SCHLICHT .akte, UND DAS WAR EIN STILLER FEHLER. Denselben
 * Namen trägt die Personalakte der Vorstellungsrunde (game.css), und weil
 * index.php game.css NACH lobby.css lädt und beide Selektoren dieselbe
 * Spezifität haben, gewann die Personalakte: Die Täter-Akte am Ende des Abends
 * stand mit `opacity: 0.4` da – der Wert, mit dem drüben die drei Karten
 * abgedunkelt werden, die gerade nicht im Scheinwerfer stehen. Das Dokument,
 * auf das die ganze Nacht hinausläuft, war zu sechzig Prozent durchsichtig,
 * und niemand hat es je gemeldet, weil kein Test das Debriefing zeichnet.
 */
.taeterakte {
    padding: var(--bm-gap-3);
    background: var(--bm-ink-2);
    border: var(--bm-border-fat) solid var(--bm-ink-3);
}

.taeterakte__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bm-gap-2);
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--bm-gap-2);
    border-bottom: 1px solid var(--bm-ink-3);
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-paper-dim);
}

.taeterakte__zeichen {
    color: var(--bm-mustard);
}

.taeterakte__betreff,
.taeterakte__schluss {
    max-width: var(--bm-mass);
    font-family: var(--bm-font-doc);
    color: var(--bm-paper-dim);
}

.taeterakte__betreff {
    margin: var(--bm-gap-3) 0;
}

.taeterakte__schluss {
    margin: var(--bm-gap-3) 0 0;
    font-size: 0.85rem;
}

.abrechnung {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--bm-gap-3);
    margin: 0;
    padding: var(--bm-gap-3);
    background: var(--bm-ink);
    border: var(--bm-border) solid var(--bm-ink-3);
}

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

.abrechnung dd {
    margin: var(--bm-gap-1) 0 0;
    font-family: var(--bm-font-display);
    font-size: 2rem;
    color: var(--bm-mustard);
}

/*
 * Die Weggabelungen: was die Crew unterwegs entschieden hat.
 *
 * Als Anlage zur Akte gesetzt, nicht als Kacheln: Es sind Sätze und keine
 * Zahlen, und neun davon nebeneinander wären ein Raster aus Kleingedrucktem.
 * Eine Liste mit hängendem Einzug liest sich wie ein Beiblatt, und genau das
 * ist es.
 */
.gabelungen {
    margin-top: var(--bm-gap-3);
    padding-top: var(--bm-gap-3);
    border-top: 1px solid var(--bm-ink-3);
}

.gabelungen__kopf {
    margin: 0 0 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-paper-dim);
}

/*
 * Kein Grid, weder am `<ol>` noch am `<li>`: Beides nimmt der Zeile ihre
 * Zählmarke, und die Reihenfolge ist die einzige Ordnung, die dieser Anlage
 * überhaupt eine Bedeutung gibt — die Entscheidungen stehen so, wie sie
 * gefallen sind. Gestapelt wird über die drei Zeilen selbst.
 */
.gabelungen__liste {
    max-width: var(--bm-mass);
    margin: 0;
    padding-left: 1.6rem;
    font-family: var(--bm-font-doc);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--bm-paper-dim);
}

.gabelungen__liste li + li {
    margin-top: var(--bm-gap-2);
}

.gabelungen__frage,
.gabelungen__wahl,
.gabelungen__folge {
    display: block;
}

.gabelungen__frage {
    color: var(--bm-paper);
}

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

/*
 * Die Folge ist Inhalt und kein Kleingedrucktes: Sie sagt, was aus der
 * Entscheidung geworden ist. --bm-soot ist für deaktivierten Text gedacht und
 * kommt auf --bm-ink-2 auf gut dreieinhalb zu eins — zu wenig für einen Satz,
 * den jemand am Ende eines langen Abends lesen soll.
 */
.gabelungen__folge {
    color: var(--bm-paper-dim);
}

/*
 * Der Randvermerk. Rot ist hier ein Signal und kein Lesetext – deshalb steht
 * das WORT da und nicht nur die Farbe.
 */
.gabelungen__vermerk {
    /* Der Kasten legt sich um das Wort, nicht um die Zeile. */
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0 0.35rem;
    font-family: var(--bm-font-amt);
    font-size: 0.65rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-signal);
    border: 1px solid var(--bm-signal);
}

.register__form {
    display: grid;
    gap: var(--bm-gap-2);
    justify-items: start;
    max-width: 26rem;
    margin-bottom: var(--bm-gap-3);
}

.register__eingetragen {
    font-family: var(--bm-font-doc);
    color: var(--bm-role-codeknacker);
}

.register__liste {
    display: grid;
    gap: 1px;
    background: var(--bm-ink-3);
    border: var(--bm-border) solid var(--bm-ink-3);
}

.register__liste li {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto auto;
    gap: var(--bm-gap-2);
    align-items: baseline;
    padding: var(--bm-gap-2);
    background: var(--bm-ink-2);
}

.register__platz {
    font-family: var(--bm-font-display);
    color: var(--bm-gold);
}

.register__crew {
    font-family: var(--bm-font-amt);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.register__zeit {
    font-family: var(--bm-font-mono);
    font-variant-numeric: tabular-nums;
}

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

.register__leer {
    font-family: var(--bm-font-doc);
    color: var(--bm-soot);
}

/* --- Innenrevision: die Rückmeldung --------------------------------------- */

/*
 * Ein Beurteilungsbogen, kein Bewertungswidget. Er steht auf demselben
 * Aktenpapier wie alles andere in dieser Nacht, und die Note ist eine
 * Eintragung – nicht drei schwebende Sterne mit Schein.
 */
.urteil {
    margin-top: var(--bm-gap-5);
    padding: var(--bm-gap-3);
    border: var(--bm-border) solid var(--bm-ink-3);
    border-left: 6px solid var(--bm-mustard);
}

/*
 * DER SIGNAL-MODIFIKATOR, für den unbeantworteten Bogen. Im Playtest ging
 * dieser Bogen am Ende eines langen Epilogs unter – dieselbe Karte, nur mit
 * einer Kante, die man vom Bildschirmrand aus sieht. `.urteil--dank` (die
 * Quittung) bleibt unberührt: Was erledigt ist, muss niemand mehr anrufen.
 */
.urteil--signal {
    border-left-width: 10px;
}

/*
 * Der Stempel über dem Titel – dieselbe Bauform wie `.extrablatt__stempel`
 * und `.rechtliches__stempel`: klein, umrandet, leicht schief. Mustard trägt
 * hier Text UND Kante, denn `.urteil` liegt auf dunklem Grund (8,20:1).
 */
.urteil__kicker {
    display: inline-block;
    margin: 0 0 var(--bm-gap-2);
    padding: 0.15em 0.6em;
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-mustard);
    border: 2px solid var(--bm-mustard);
    transform: rotate(-2deg);
}

/* Auch im Teaser: Der Verteiler ist dorthin gewandert und bringt sein Feld mit. */
.urteil label,
.teaser label {
    margin-top: var(--bm-gap-3);
}

.urteil textarea {
    width: 100%;
    padding: 0.6em 0.75em;
    font-family: var(--bm-font-doc);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bm-ink);
    background: var(--bm-paper);
    border: var(--bm-border) solid var(--bm-ink);
    border-radius: 0;
    box-shadow: inset 0 2px 0 rgba(18, 16, 14, 0.18);
    resize: vertical;
}

.urteil__noten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bm-gap-1);
}

/*
 * Jeder Stern ist ein Knopf mit seiner Ziffer darunter. Die Ziffer ist nicht
 * Zierrat: Ohne sie trüge allein die Füllung die Information, und Farbe als
 * einziger Informationsträger ist in diesem Haus verboten.
 */
.urteil__note {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    /* 44px Daumenmaß – dieselbe Regel wie für jeden Knopf im Spiel. */
    min-width: 2.9rem;
    padding: 0.35rem 0.2rem;
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
}

.urteil__note svg {
    display: block;
    width: 1.9rem;
    height: 1.9rem;
    fill: none;
    stroke: var(--bm-soot);
    stroke-width: 1.5;
}

.urteil__note span {
    font-family: var(--bm-font-mono);
    font-size: 0.72rem;
    color: var(--bm-soot);
}

.urteil__note:hover svg {
    stroke: var(--bm-mustard);
}

/* Gefüllt ist alles BIS zur gewählten Note – so liest sich eine Skala. */
.urteil__noten[data-note='1'] .urteil__note:nth-child(-n + 1) svg,
.urteil__noten[data-note='2'] .urteil__note:nth-child(-n + 2) svg,
.urteil__noten[data-note='3'] .urteil__note:nth-child(-n + 3) svg,
.urteil__noten[data-note='4'] .urteil__note:nth-child(-n + 4) svg,
.urteil__noten[data-note='5'] .urteil__note:nth-child(-n + 5) svg {
    fill: var(--bm-mustard);
    stroke: var(--bm-mustard);
}

.urteil__note[aria-checked='true'] {
    border-color: var(--bm-mustard);
}

.urteil__note[aria-checked='true'] span {
    color: var(--bm-paper);
}

.urteil__wort {
    min-height: 1.4em;
    margin: var(--bm-gap-1) 0 0;
    font-family: var(--bm-font-amt);
    font-size: 0.76rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-mustard);
}

/*
 * Der Griff ist die ganze Zeile und nicht das Kästchen: 44 px Daumenmaß.
 *
 * Das stand in zwei Blöcken hintereinander, und der zweite kassierte das
 * `align-items: flex-start` des ersten – zwei Regeln für denselben Haken, von
 * denen eine Hälfte nie galt.
 */
.urteil__haken {
    display: flex;
    align-items: center;
    gap: var(--bm-gap-2);
    min-height: 44px;
    margin-top: var(--bm-gap-4);
    font-family: var(--bm-font-doc);
    font-size: 0.9rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--bm-paper);
    cursor: pointer;
}

.urteil__haken input {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    accent-color: var(--bm-mustard);
}

.urteil__adresse {
    margin-top: var(--bm-gap-2);
    padding-left: calc(1.5rem + var(--bm-gap-2));
}

.urteil__adresse .field__hint {
    max-width: var(--bm-mass);
}

.urteil .btn {
    margin-top: var(--bm-gap-3);
}

.urteil__quittung {
    margin: var(--bm-gap-2) 0 0;
    font-family: var(--bm-font-amt);
    font-size: 0.74rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-role-codeknacker);
}

/*
 * Das Zitatfeld hinter dem Haken – gebaut wie `.urteil__adresse`, und zwar
 * absichtlich zeichengleich eingerückt: Beide hängen an einer Einwilligung,
 * beide erscheinen erst mit ihrem Haken, und zwei verschiedene Einzüge unter
 * zwei gleich gebauten Haken sähen nach einem Fehler aus.
 */
.urteil__stimme {
    margin-top: var(--bm-gap-2);
    padding-left: calc(1.5rem + var(--bm-gap-2));
}

.urteil__stimme .field__hint {
    max-width: var(--bm-mass);
}

/*
 * DIE QUITTUNGSKARTE.
 *
 * Dieselbe Bauform wie der Bogen, nur mit einer anderen Kante: Der Bogen
 * steht auf Senf (dem Warnband dieses Hauses), die Quittung auf dem Grün des
 * Code-Knackers – derselbe Ton, in dem die Quittungszeile schon immer stand.
 * Es ist der Unterschied zwischen „hier ist etwas zu tun" und „erledigt", und
 * er ist nicht die einzige Auskunft: Darüber steht der Satz, der es sagt.
 */
.urteil--dank {
    border-left-color: var(--bm-role-codeknacker);
}

.urteil__dankkopf {
    margin: 0;
    font-family: var(--bm-font-display);
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: var(--bm-tracking-display);
    color: var(--bm-paper);
}

.urteil__danksatz {
    margin: var(--bm-gap-2) 0 0;
    font-family: var(--bm-font-doc);
    color: var(--bm-paper-dim);
}

/*
 * Der Anschluss an die Fluchtkasse. Er ist ein Satz und kein zweiter
 * Kassensturz: Der steht oben unter der Einstufung und bleibt dort. Hier
 * steht nur, warum die Knöpfe darunter dastehen.
 */
.urteil__kassensatz {
    max-width: var(--bm-mass);
    margin: var(--bm-gap-4) 0 0;
    padding-top: var(--bm-gap-3);
    border-top: var(--bm-border) solid var(--bm-ink-3);
    font-family: var(--bm-font-doc);
    color: var(--bm-paper);
}

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

/*
 * Die Knopfregel des Blocks setzt jedem `.btn` einen Abstand nach oben; in
 * einer Reihe, die selbst schon eine Lücke führt, wäre das eine Treppe.
 */
.urteil__wege .btn {
    margin-top: 0;
}

/* --- Rezension und Ausrüster ---------------------------------------------- */

.rezension {
    padding: var(--bm-gap-3);
    border: var(--bm-border) dashed var(--bm-ink-3);
}

/*
 * Der Ausrüster steht ganz unten und dezent – eine Plakette, kein Banner. Wer
 * das Werkzeug gebaut hat, gehört in den Abspann und nicht in die Auslage.
 *
 * Drei Zeilen statt einer: Rolle, Name, Ort. Als Fliesstext gesetzt las sich
 * das wie eine Fussnote, die man überspringt; gestempelt liest es sich wie der
 * Schlussvermerk einer Akte – und genau das ist es an dieser Stelle.
 */
.ausruester {
    display: grid;
    justify-items: center;
    gap: var(--bm-gap-1);
    max-width: var(--bm-mass);
    margin: 0;
    padding-top: var(--bm-gap-3);
    border-top: 1px solid var(--bm-ink-3);
    font-family: var(--bm-font-amt);
    letter-spacing: var(--bm-tracking-amt);
    text-align: center;
    color: var(--bm-paper-dim);
}

.ausruester__rolle,
.ausruester__ort {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.ausruester__name {
    font-family: var(--bm-font-display);
    font-size: 1.05rem;
    letter-spacing: var(--bm-tracking-display);
    text-transform: none;
    color: var(--bm-paper);
    text-decoration: none;
    border-bottom: 1px solid var(--bm-gold);
}

.ausruester__name:hover {
    color: var(--bm-mustard);
}

/* --- Der Vorgang zum Mitnehmen -------------------------------------------- */

/*
 * Die Druckleiste steht zwischen der Akte und der Innenrevision: hinter allem,
 * was aufs Papier gehört, und vor allem, was nur den Bildschirm angeht. Wer
 * bis hierher gelesen hat, hat den Vorgang gesehen und weiss, ob er ihn
 * behalten will.
 */
.druckleiste {
    display: grid;
    gap: var(--bm-gap-2);
    justify-items: start;
    margin: var(--bm-gap-4) 0;
    padding: var(--bm-gap-3);
    border: var(--bm-border) dashed var(--bm-ink-3);
}

/* --- Spende --------------------------------------------------------------- */


/* ==========================================================================
   DER NÄCHSTE FALL
   ========================================================================== */

/*
 * Die Vorschau auf Teil zwei – ein Aushang, kein Werbebanner.
 *
 * Sie steht auf Blech und nicht auf Papier: Der Fall ist noch nicht gedruckt,
 * es gibt kein Blatt davon. Die Kante links trägt Senfgelb, dieselbe Marke, an
 * der in diesem Haus die Innenrevision hängt — was hier steht, ist ein
 * angelegter Vorgang und noch keine Akte.
 */
.teaser {
    margin-top: var(--bm-gap-5);
    padding: var(--bm-gap-3);
    background: var(--bm-ink-2);
    border: var(--bm-border) solid var(--bm-ink-3);
    border-left: 6px solid var(--bm-mustard);
}

.teaser__marke {
    display: inline-block;
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bm-soot);
}

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

.teaser__titel {
    margin: var(--bm-gap-1) 0 var(--bm-gap-2);
    color: var(--bm-paper);
}

.teaser__text {
    margin: 0 0 var(--bm-gap-2);
    max-width: var(--bm-mass);
    font-family: var(--bm-font-doc);
    color: var(--bm-paper-dim);
}

/* Die Spanne ist eine Überschrift und steht in Senf wie die Dachzeile darüber. */
.teaser__spanne {
    margin: var(--bm-gap-3) 0 var(--bm-gap-2);
    max-width: var(--bm-mass);
    font-family: var(--bm-font-amt);
    font-size: 1.02rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-mustard);
    overflow-wrap: anywhere;
}

/*
 * DER DURCHSCHLAG IST PAPIER, und zwar rosa.
 *
 * Er liegt zwischen zwei Blechkacheln (Druckleiste, Teaser) und ist das
 * einzige Blatt der Abrechnung, das nicht von den vieren stammt. Kein neues
 * Token: --bm-paper-durchschlag steht seit jeher für Vordrucke und Formulare.
 *
 * Der Blockname heißt hausmitteilung und nicht aktennotiz: .akte__notiz gibt
 * es schon in css/game.css, und zwei Nachbarn mit fast gleichem Namen sind die
 * Sorte Verwechslung, die man erst im dritten Anlauf sieht. Die Testkennung
 * heißt trotzdem aktennotiz — sie benennt das Ding, nicht seinen Kasten.
 */
.hausmitteilung {
    margin-top: var(--bm-gap-5);
    padding: var(--bm-gap-3);
    background: var(--bm-paper-durchschlag);
    color: var(--bm-ink);
    border: var(--bm-border) solid var(--bm-ink);
    box-shadow: var(--bm-shadow-sm);
}

.hausmitteilung__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bm-gap-1) var(--bm-gap-3);
    justify-content: space-between;
    padding-bottom: var(--bm-gap-2);
    border-bottom: var(--bm-border) solid var(--bm-ink);
}

.hausmitteilung__stelle,
.hausmitteilung__zeichen {
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* Ein Bindestrich in einem Aktenzeichen ist eine Falle. */
.hausmitteilung__zeichen {
    hyphens: none;
}

.hausmitteilung__anschrift,
.hausmitteilung__satz,
.hausmitteilung__gez,
.hausmitteilung__rand,
.hausmitteilung__fuss {
    max-width: var(--bm-mass);
    font-family: var(--bm-font-doc);
    overflow-wrap: anywhere;
}

.hausmitteilung__anschrift {
    margin: var(--bm-gap-2) 0 0;
    font-size: 0.82rem;
}

.hausmitteilung__betreff {
    margin: var(--bm-gap-2) 0;
    max-width: var(--bm-mass);
    font-family: var(--bm-font-amt);
    text-transform: uppercase;
    letter-spacing: var(--bm-tracking-amt);
    overflow-wrap: anywhere;
}

.hausmitteilung__satz {
    margin: 0 0 var(--bm-gap-2);
}

.hausmitteilung__gez {
    margin: var(--bm-gap-3) 0 0;
}

.hausmitteilung__rand,
.hausmitteilung__fuss {
    margin: var(--bm-gap-2) 0 0;
    font-size: 0.78rem;
}

/* Der Aufruf steht in Papierfarbe: Er ist die eine Zeile, die etwas will. */
.teaser__aufruf {
    margin: var(--bm-gap-3) 0 var(--bm-gap-2);
    max-width: var(--bm-mass);
    font-family: var(--bm-font-doc);
    color: var(--bm-paper);
}

/* Der Knopf sitzt unter dem Feld und nicht daneben: Auf 375 px stünde er
   sonst als zweite Spalte neben einem Eingabefeld von 120 px Breite. */
.teaser .btn {
    margin-top: var(--bm-gap-2);
}
/*
 * DIE FLUCHTKASSE IST EINE KACHEL, KEINE FUSSNOTE.
 *
 * Sie trug denselben gestrichelten Rahmen wie die Druckleiste darüber und der
 * Bewertungshinweis darunter — drei Fußnoten hintereinander, und keine davon
 * sah man noch an. Jetzt ist sie Papier auf Blech: derselbe vergilbte Ton, das
 * Korn und das Halbtonraster wie beim Anzeigenteil im Wartezimmer, harte Kante,
 * Schlagschatten. Kein neues Token, keine vierte Farbe.
 *
 * Nicht gedreht: Der Handytest misst jede Kante gegen die Fensterbreite, und
 * eine gedrehte Fläche steht auf 375 px über dem Rand.
 */
.spende {
    max-width: var(--bm-mass);
    /*
     * KEIN AUSKLANG-ABSTAND MEHR. Der Block trug `margin-top: gap-5`, solange
     * er ganz unten stand und den Schlussteil vom Vorgang trennte. Seit er
     * zwischen Einstufung und Register steht, wäre derselbe Sprung ein Loch
     * mitten in der Akte — und der Sprung vor `.teaser` steht ja weiterhin da.
     * Die Abstände macht hier das Grid der Abrechnung.
     */
    padding: var(--bm-gap-3);
    color: var(--bm-ink);
    background-color: var(--bm-paper-aged);
    background-image: var(--bm-grain),
        repeating-linear-gradient(45deg, var(--bm-halbton) 0 1px, transparent 1px var(--bm-halftone-size));
    border: var(--bm-border) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

/*
 * DER SIGNAL-MODIFIKATOR. Diese Karte stand im Playtest am Ende eines langen
 * Epilogs und ist dort untergegangen – derselbe Kassensturz, jetzt mit einer
 * Kante obendrauf, die man von Weitem sieht.
 */
.spende--signal {
    border-top: var(--bm-border-fat) solid var(--bm-mustard);
}

/*
 * Der Stempel über der Dachzeile – dieselbe Bauform wie `.extrablatt__stempel`:
 * klein, umrandet, leicht schief. Signal-deep statt Mustard, denn diese Karte
 * liegt auf Papier und nicht auf dunklem Grund ("Rot auf Papier").
 */
.spende__kicker {
    display: inline-block;
    margin: 0 0 var(--bm-gap-2);
    padding: 0.15em 0.6em;
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-signal-deep);
    border: 2px solid var(--bm-signal-deep);
    transform: rotate(-2deg);
}

/*
 * Die Dachzeile zitiert die Schlagzeile des Extrablatts zwei Blöcke weiter
 * oben. Sie steht in der Amtsschrift und nicht in der Displayschrift: Was
 * darunter kommt, ist die Frage – die Zeile darüber ist die Fundstelle.
 */
.spende__dach {
    margin: 0 0 var(--bm-gap-1);
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bm-signal-deep);
}

/*
 * Die Frage bekommt Luft. Überschriften tragen im Haus keinen unteren Rand
 * (base.css setzt sie alle auf 0), und hier klebte der erste Satz an ihr —
 * bei der Einstufung darüber liegt zwischen beidem eine Zeile.
 */
.spende h2 {
    margin-bottom: var(--bm-gap-2);
    color: var(--bm-ink);
}

/*
 * Dieselbe Kachel im Unterstützen-Overlay der Fußzeile.
 *
 * Sie liegt dort auf dem Papier des Dialogs statt auf dem Blech der
 * Abrechnung: keine volle Zeilenbreite, kein Schlagschatten – ein Beleg, der
 * auf einem Dokument liegt, wirft keinen.
 *
 * DER OBERE ABSTAND IST KEIN AUSKLANG, SONDERN PLATZ FÜR DEN SCHLIESSKNOPF.
 * `.rechtliches__zu` ist ein `float: right` und steht als erstes Kind des
 * Dialogs; ein Float verschiebt keine Blockkästen, nur deren Zeilen. Solange
 * dieser Artikel keine eigene Fläche hatte, floss er harmlos in den Weißraum —
 * seit die Kachel Papier, Korn und eine Kante trägt, stanzte er ihre obere
 * rechte Ecke schwarz aus.
 */
.spende--overlay {
    max-width: none;
    margin-top: var(--bm-gap-4);
    box-shadow: none;
}

/*
 * UND DIE DIALOGREGEL DARF NICHT IN DIE KACHEL HINEINGREIFEN.
 *
 * `.rechtliches p` setzt Schrift und Grad für die Rechtstexte und schlägt mit
 * (0,1,1) sowohl `.spende__bon` als auch `.spende .section-note`. Aus der
 * schmalen Beleg-Fußzeile in Amtsschrift wurde damit ein dreizeiliger
 * Versalblock in Schreibmaschine, so groß wie der Fließtext daneben. Zwei
 * Selektoren statt eines `!important`.
 */
.spende--overlay .section-note {
    font-family: var(--bm-font-doc);
    font-size: 0.92rem;
}

.spende--overlay .spende__bon {
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
}

/*
 * Der Freiwilligkeits-Stempel steht hier auf gealtertem Papier statt auf
 * frischem: Signalrot kommt darauf nur noch auf 2,7 zu 1 und wäscht aus. Das
 * tiefe Rot ist derselbe Ton, den die Dachzeile in der Abrechnung trägt.
 */
.spende--overlay .rechtliches__stempel {
    color: var(--bm-signal-deep);
    border-color: var(--bm-signal-deep);
}

/* Auf Papier ist der Nebentext Ruß, nicht der helle Ton der Nacht. */
.spende .section-note {
    max-width: none;
    color: rgba(11, 11, 13, 0.62);
}

/*
 * Der Kassenbon. Das Kleingedruckte unter der Kachel, und der einzige Ort,
 * an dem der Bruch zwischen der Mark des Spiels und dem Euro der Wirklichkeit
 * ausgesprochen wird – als Witz auf einem Beleg, nicht als Fußnote im Text.
 */
.spende__bon {
    margin: var(--bm-gap-3) 0 0;
    padding-top: var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: rgba(11, 11, 13, 0.55);
    border-top: 1px dashed var(--bm-ink);
}

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

/*
 * DIE FUSSZEILE STEHT NICHT MEHR HIER.
 *
 * `.fuss` war eine Knopfzeile von vier Schaltern über einer Herkunftszeile —
 * dieselbe, die auch das Nachbarzimmer führte (dort als Grid statt als Flex und
 * ohne Breitendeckel), und über ihr klebte am Fuß des Blattes noch ein
 * Anzeigenteil. Drei Fußzeilen auf einer Seite sind zwei zu viel.
 *
 * Sie steht jetzt in `shared/haus/haus.css` (`.haus-fuss`), dieselbe wie im
 * Foyer, und die vier Schalter liegen in ihrem Boden — auch der
 * durchgestrichene Tonschalter (`.haus-fuss__link[aria-pressed='false']`).
 */

/* --- Rechtliches ---------------------------------------------------------- */

.rechtliches {
    width: min(100% - 2rem, 44rem);
    max-height: 85dvh;
    padding: var(--bm-gap-4);
    color: var(--bm-ink);
    background: var(--bm-paper);
    background-image: var(--bm-grain);
    background-size: 140px 140px;
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

.rechtliches::backdrop {
    background: var(--tr-schleier);
}

.rechtliches h2 {
    color: var(--bm-ink);
}

.rechtliches h3 {
    margin: var(--bm-gap-3) 0 var(--bm-gap-1);
    font-family: var(--bm-font-amt);
    font-size: 0.82rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-signal-deep);
}

.rechtliches p,
.rechtliches code {
    font-family: var(--bm-font-doc);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Ein schräger Stempel statt einer Unterüberschrift. */
.rechtliches__stempel {
    display: inline-block;
    margin: 0 0 var(--bm-gap-3);
    padding: 0.15em 0.6em;
    font-family: var(--bm-font-amt) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bm-signal);
    border: 2px solid var(--bm-signal);
    transform: rotate(-2deg);
}

.rechtliches__hinweis {
    margin-top: var(--bm-gap-3);
    font-size: 0.8rem !important;
    color: rgba(11, 11, 13, 0.65);
}

/*
 * Der Schließer ist ein Griff wie jeder andere: 44 × 44.
 *
 * Er stand auf 2,2 rem, also 35 Pixel, und ist dem Handytest nur entgangen,
 * weil der den Dialog nie aufmacht — ein geschlossenes `<dialog>` misst null
 * mal null und wird übersprungen. Auf einem Telefon ist er damit der einzige
 * Weg aus dem Overlay und zugleich der knappste Griff des ganzen Hauses.
 */
.rechtliches__zu {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bm-paper);
    background: var(--bm-ink);
    border: 0;
    cursor: pointer;
}

.rechtliches em {
    color: var(--bm-signal-deep);
    font-style: normal;
    background: rgba(214, 36, 28, 0.12);
    padding: 0 0.2em;
}

/* --- Der Wurfzettel ------------------------------------------------------- */

/*
 * Das Zeichen am Anwerbeknopf: ein Umschlag mit Poststempel.
 *
 * Es steht HIER und nicht bei `.anwerbung` in der Zeitung, weil derselbe Knopf
 * an zwei Stellen hängt — im Blatt auf Papier und im Kopf des Hinterzimmers auf
 * Blech. `currentColor` dreht das Zeichen mit dem Knopf um; die Umkehr auf
 * Papier macht `.anwerbung .btn` drüben, und sie fasst hier nichts an.
 *
 * Kontur, keine Fläche, keine Rundung — dieselbe Zeichenweise wie die drei
 * Zeichen der Kaffeeklappe.
 */
.postmarke svg {
    display: block;
    width: 1.4rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/*
 * Das Einladungs-Overlay. Ein Tisch, auf dem ein Blatt liegt.
 *
 * Es ist NACHT und nicht Papier, und das ist der Unterschied zum Rechtliches-
 * Overlay nebenan: Dort liegt ein Dokument, hier liegt ein Gegenstand auf
 * einer Fläche. Der Wurfzettel bringt sein Papier selbst mit — er ist gedruckt
 * — und der Durchschlag darunter ebenso. Wäre der ganze Dialog hell, wäre der
 * Zettel kein Blatt mehr, sondern die Wand.
 *
 * Breiter als das Rechtliches-Overlay (48 statt 44 rem), weil hier ein
 * Hochformat liegt und kein Fließtext.
 */
.einladung {
    width: min(100% - 2rem, 48rem);
    max-height: 88dvh;
    padding: var(--bm-gap-4);
    color: var(--bm-paper);
    background: var(--bm-ink-2);
    background-image: var(--bm-grain);
    background-size: 140px 140px;
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

.einladung::backdrop {
    background: var(--tr-schleier);
}

/* Derselbe Griff wie am Rechtliches-Overlay, dasselbe Daumenmaß. */
.einladung__zu {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bm-ink);
    background: var(--bm-paper);
    border: 0;
    cursor: pointer;
}

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

.einladung__titel {
    margin: var(--bm-gap-1) 0 var(--bm-gap-2);
    font-family: var(--bm-font-display);
    hyphens: auto;
    overflow-wrap: break-word;
}

.einladung__vorspann {
    max-width: var(--bm-mass);
    margin-bottom: var(--bm-gap-3);
    font-family: var(--bm-font-doc);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--bm-paper-dim);
    hyphens: auto;
}

.einladung__blatt {
    margin: 0 0 var(--bm-gap-2);
}

/*
 * DAS BILD BRAUCHT SEINE EIGENE DECKELUNG.
 *
 * Es gibt im ganzen Haus keine `img`-Regel — die Bildflächen sind sonst
 * Hintergründe. Ein 1792 Pixel breites Comic ohne `max-width` reißt den Dialog
 * auf jedem Telefon auf.
 *
 * Die Höhe deckelt gegen das Fenster, nicht gegen eine Zahl: Ein Hochformat
 * füllt sonst zwei Bildschirme, und die zwei Knöpfe darunter — der eigentliche
 * Zweck dieses Overlays — stünden hinter dem Falz.
 */
.einladung__bild {
    display: block;
    width: auto;
    max-width: 100%;
    /*
     * Auf dem Telefon bleibt der Zettel eine Vorschau und kein Lesestück.
     *
     * Mit 46 dvh füllte das Hochformat den halben Schirm, und die beiden
     * Knöpfe darunter — der ganze Zweck dieses Overlays — lagen hinter dem
     * Falz. Wer den Comic wirklich lesen will, hat dafür die Lupe; wer ihn
     * verschicken will, soll den Knopf sehen, ohne zu suchen.
     */
    max-height: 32dvh;
    margin-inline: auto;
    border: var(--bm-border) solid var(--bm-ink);
    box-shadow: var(--bm-shadow-sm);
}

@media (min-width: 46rem) {
    .einladung__bild {
        max-height: 46dvh;
    }
}

/* Die Lupe: der Zettel nimmt die volle Breite, der Dialog scrollt. */
.einladung[data-zoom='1'] .einladung__bild {
    width: 100%;
    max-height: none;
}

/* Bildunterschrift in Amtsschrift — dieselbe Farbe wie die Panelmarken. */
.einladung__legende {
    margin-top: var(--bm-gap-1);
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--bm-paper-dim);
}

.einladung__lupe {
    margin-bottom: var(--bm-gap-3);
}

/*
 * Der Durchschlag: rosa Papier, Schreibmaschine, der fertige Satz.
 *
 * Dieselbe Farbe wie der Vordruck auf der Startseite — es ist dieselbe Sorte
 * Papier, die in diesem Haus aus einer Maschine kommt.
 */
.einladung__durchschlag {
    margin-bottom: var(--bm-gap-3);
    padding: var(--bm-gap-3);
    color: var(--bm-ink);
    background: var(--bm-paper-durchschlag);
    border: var(--bm-border) solid var(--bm-ink);
}

.einladung__kopf {
    display: block;
    margin-bottom: 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-signal-deep);
}

.einladung__text {
    margin: 0;
    max-width: none;
    font-family: var(--bm-font-doc);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--bm-ink);
    hyphens: auto;
    /* Die Adresse am Ende ist ein einziges Wort und länger als jede Spalte. */
    overflow-wrap: anywhere;
}

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

/*
 * Die Quittung. Leer, solange nichts passiert ist — sie steht immer im
 * Dokument, damit ein Screenreader die Änderung ansagen kann.
 *
 * ROT IST HIER FLÄCHE UND NICHT SCHRIFT. „Rot auf Schwarz ist ein Signal, kein
 * Lesetext" steht als eisernes Verbot in der Bibel, und die schlechte Nachricht
 * ist der längere der beiden Sätze. Sie liegt deshalb auf Papier über
 * Signalrot — dasselbe Rezept wie beim Toast, den dieser Kasten hier ersetzt.
 */
/*
 * Sie steht IMMER im Dokument und wird nie ausgeblendet — nur der Abstand
 * kommt mit dem Text. Ein `display: none` hätte die Live-Region aus dem
 * Barrierebaum genommen, und eine Meldung, die erst mit dem Einblenden
 * entsteht, sagt kein Screenreader an.
 */
.einladung__quittung {
    margin: 0;
    font-family: var(--bm-font-doc);
    font-size: 0.88rem;
    color: var(--bm-role-codeknacker);
}

.einladung__quittung:not(:empty) {
    margin-top: var(--bm-gap-2);
}

.einladung__quittung[data-kind='bad'] {
    padding: var(--bm-gap-1) var(--bm-gap-2);
    color: var(--bm-paper);
    background: var(--bm-signal-deep);
}

/*
 * Der Fuß trägt einen Satz und ist damit Fließtext — also `--bm-paper-dim`.
 * `--bm-soot` ist Ruß: abgeschalteter Text und Nebenangaben, nie etwas, das
 * jemand lesen soll. Derselbe Einwand steht in dieser Datei schon einmal
 * begründet, bei `.roster__hint`.
 */
.einladung__fuss {
    margin: var(--bm-gap-3) 0 0;
    max-width: var(--bm-mass);
    font-family: var(--bm-font-doc);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--bm-paper-dim);
    hyphens: auto;
}

/* ===================================================== Besetzung und Stühle */

/*
 * Der Wirt deckt den Tisch für zwei, drei oder vier. Weniger Stühle heißt nicht
 * weniger Spiel: Ein Stuhl hält dann zwei Stationen. Alle anderen sehen die
 * Reihe ebenfalls, können sie aber nicht bedienen – wer wie viele sind, ist
 * eine Ansage und keine Abstimmung.
 */
.besetzung {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bm-gap-2);
    margin-bottom: var(--bm-gap-2);
}

.besetzung [aria-pressed="true"] {
    color: var(--bm-ink);
    background: var(--bm-mustard);
    border-color: var(--bm-mustard);
}

.start__note {
    margin-bottom: 0;
}

/* Zwei Wappen an einem Stuhl: der geteilte Sitz trägt beide Zeichen. */
.role-card[data-geteilt="1"] .role-card__crest {
    display: flex;
    gap: var(--bm-gap-2);
    justify-content: center;
}

.role-card[data-geteilt="1"] .role-card__claim {
    font-family: var(--bm-font-amt);
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* ========================================================= Flucht und Rang */

/*
 * Die Flucht läuft in Schlägen, nicht als Textblock. Jeder Schlag ist ein Panel
 * mit Bildfläche und Erzählerzeile; wer weiterliest, bekommt den nächsten.
 * Bewusst ohne Zeitsteuerung: Vier Geräte, vier Lesegeschwindigkeiten.
 */
/*
 * Das Extrablatt vom Morgen danach.
 *
 * Eine Zeitungsseite aus Satz, nicht aus Pixeln: Papierton, harte Linien,
 * Rasterspalten, ein Stempel. Kein Verlauf als Flaeche, kein Schatten als
 * Weichzeichner, kein Radius - die eisernen Verbote gelten hier wie ueberall.
 *
 * Die Spalten laufen ueber column-count und nicht ueber ein Raster: Eine
 * Zeitung bricht ihren Text um, sie verteilt ihn nicht auf Kaesten. Auf 375 px
 * bleibt genau eine Spalte uebrig, und das ist richtig so - zwei Spalten
 * Fliesstext auf einem Telefon liest niemand.
 */
.extrablatt {
    margin: 0 0 var(--bm-gap-4);
    padding: var(--bm-gap-4);
    color: var(--bm-ink);
    background: var(--bm-paper);
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

.extrablatt__kopf {
    padding-bottom: var(--bm-gap-2);
    border-bottom: 3px double var(--bm-ink);
    text-align: center;
}

.extrablatt__titel {
    margin: 0;
    font-family: var(--bm-font-display);
    font-size: clamp(1.3rem, 4.5vw, 2.1rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.extrablatt__unterkopf {
    margin: var(--bm-gap-1) 0 0;
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-ink-3);
}

.extrablatt__dach {
    margin: var(--bm-gap-3) 0 0;
    font-family: var(--bm-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-signal-deep);
}

.extrablatt__schlagzeile {
    margin: 0;
    font-family: var(--bm-font-display);
    /* Die Schlagzeile ist das lauteste Wort des Abends und darf die Seite fuellen. */
    font-size: clamp(2.1rem, 9vw, 4.2rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.extrablatt__vorspann {
    max-width: var(--bm-mass);
    margin: var(--bm-gap-2) 0 var(--bm-gap-3);
    padding-bottom: var(--bm-gap-3);
    border-bottom: 1px solid var(--bm-ink);
    font-family: var(--bm-font-doc);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.45;
}

.extrablatt__spalten {
    column-count: 3;
    column-gap: var(--bm-gap-4);
    column-rule: 1px solid var(--bm-ink-3);
}

.extrablatt__spalte {
    /* Eine Spalte darf nicht mitten in der Ueberschrift umbrechen. */
    break-inside: avoid;
    margin: 0 0 var(--bm-gap-3);
}

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

.extrablatt__spalte p {
    margin: 0;
    font-family: var(--bm-font-doc);
    font-size: 0.9rem;
    line-height: 1.5;
    hyphens: auto;
}

.extrablatt__fuss {
    max-width: var(--bm-mass);
    margin: 0;
    padding-top: var(--bm-gap-3);
    border-top: 1px solid var(--bm-ink);
    font-family: var(--bm-font-amt);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--bm-ink-3);
}

/* Der einzige rote Fleck der Seite. Gestempelt, also schief - aber statisch:
   Uebergaenge laufen in diesem Spiel linear und nirgends von selbst. */
.extrablatt__stempel {
    display: inline-block;
    margin-right: var(--bm-gap-2);
    padding: 0.15rem 0.5rem;
    font-family: var(--bm-font-display);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bm-signal-deep);
    border: 2px solid var(--bm-signal-deep);
    transform: rotate(-3deg);
}

@media (max-width: 52rem) {
    .extrablatt__spalten {
        column-count: 1;
    }

    .extrablatt__spalten .extrablatt__spalte + .extrablatt__spalte {
        padding-top: var(--bm-gap-3);
        border-top: 1px solid var(--bm-ink-3);
    }
}

/*
 * Die einzige beschriebene Seite im ganzen Blindband. Sie steht auf Papier,
 * in Lektoratsrot, und sie ist der Grund, warum der Prolog kein Sieg ist.
 */
.trophaee {
    margin: 0;
    padding: var(--bm-gap-4);
    color: var(--bm-ink);
    background: var(--bm-paper);
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

.trophaee p {
    margin: 0 0 var(--bm-gap-2);
    font-family: var(--bm-font-letter);
    font-size: 1.9rem;
    line-height: 1.2;
    color: var(--bm-signal-deep);
}

.trophaee footer {
    font-family: var(--bm-font-amt);
    font-size: 0.75rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-soot);
}

/* --- Der Rang ------------------------------------------------------------- */

/*
 * KEIN EIGENER ABSTAND NACH UNTEN.
 *
 * `.debriefing` ist ein Grid mit `gap: gap-4`, und Grid-Abstände fallen nicht
 * mit Rändern zusammen — sie addieren sich. Der Rand stammt aus der Zeit, als
 * die Einstufung als letzter Block der Akte stand; seit der Kassensturz direkt
 * darunter sitzt, war das die einzige Fuge des Abschlusses mit der doppelten
 * Weite. Zwischen Rang und Kasse klaffte ein Loch, während alles andere
 * gleichmäßig stand — und ausgerechnet an dieser Naht soll der Satz aus der
 * Schlagzeile („Preis nach Ermessen") in die Frage übergehen, was der Coup
 * wert war.
 */
.rang {
    padding: var(--bm-gap-3) var(--bm-gap-4);
    border: var(--bm-border) solid var(--bm-gold);
}

.rang__label {
    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-soot);
}

.rang__name {
    margin-bottom: var(--bm-gap-1);
    font-family: var(--bm-font-display);
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    line-height: 1;
    color: var(--bm-mustard);
}

.rang__zeile {
    margin: 0;
    font-family: var(--bm-font-doc);
    color: var(--bm-paper-dim);
}

.register__liste li {
    grid-template-columns: 2.5rem 1fr auto auto auto;
}

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

/*
 * DIE BESTENLISTE AUF EINEM TELEFON.
 *
 * Fünf Angaben in einer Zeile passen unter 34rem nicht mehr nebeneinander.
 * Vorher stand hier nur eine schmalere Spaltenteilung und ein `grid-column`
 * am Rang — der Rest verteilte sich, wie die automatische Platzierung es für
 * richtig hielt: der Platz neben dem Rang, der Crewname allein darunter, die
 * Zeit unter der Platznummer. Die gelesene Reihenfolge stimmte nicht mehr mit
 * der des Markups überein, und wer auf Platz zwei stand, suchte seine Zeit.
 *
 * Zwei bewusste Reihen statt Zufall: oben die Nummer und der Name, darunter
 * eingerückt Rang, Zeit und Vermerke. Die Platznummer steht über beide Reihen
 * wie die Ziffer einer nummerierten Liste.
 */
@media (max-width: 34rem) {
    .register__liste li {
        grid-template-columns: 2.2rem 1fr auto auto;
        grid-template-areas:
            'platz crew crew crew'
            'platz rang zeit strafen';
        row-gap: var(--bm-gap-1);
    }

    .register__platz {
        grid-area: platz;
    }

    .register__crew {
        grid-area: crew;
    }

    .register__rang {
        grid-area: rang;
    }

    .register__zeit {
        grid-area: zeit;
    }

    .register__strafen {
        grid-area: strafen;
    }
}

/* --- Kulissen ------------------------------------------------------------- */

/*
 * Das Panel ist eine `figure`, und keine Zeile dieses Projekts fasst diesen Typ
 * an — also galt hier das Browser-Default: `margin-inline: 40px`. Das
 * Hinterzimmer stand damit vierzig Pixel schmaler auf jeder Seite als die
 * Aufstellung, die Rollenkarten und die Knopfzeile darunter, und dazu mit einer
 * Zeile Luft nach oben, die niemand gesetzt hat. Es sah aus, als sei das Bild
 * eingerückt worden; in Wahrheit war es nie ausgerückt.
 */
.art--hinterzimmer {
    --art-ratio: 21 / 9;
    --art-accent: var(--bm-ink-3);
    margin: 0 0 var(--bm-gap-4);
}

/*
 * Der Pate neben der einzigen beschriebenen Seite des Blindbands: Die Zeile ist
 * mit H. H. gezeichnet, und wer das war, muss niemand mehr erklären.
 */
.trophaee__paar {
    display: grid;
    gap: var(--bm-gap-3);
}

@media (min-width: 46rem) {
    .trophaee__paar {
        grid-template-columns: 1fr 14rem;
        align-items: start;
    }
}

.art--pate {
    --art-ratio: 4 / 5;
    --art-accent: var(--bm-bordeaux);
}

/* ========================================================= LANDINGPAGE ===== */

/* --- Die Crew auf der Startseite ------------------------------------------- */

/*
 * Nur ein Schaufenster, keine Auswahl: Gewählt wird der Stuhl erst in der
 * Lobby, und zwar gegen die anderen. Hier steht bloß, wen es gibt.
 */
.crewschau__karten {
    display: grid;
    gap: var(--bm-gap-2);
    margin-bottom: var(--bm-gap-3);
}

.crewkarte {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: var(--bm-gap-2);
    align-items: start;
    padding: var(--bm-gap-3);
    background: var(--bm-ink-2);
    border-top: 4px solid var(--karte-farbe, var(--bm-ink-3));
}

/*
 * Das Porträtmedaillon über der Karte.
 *
 * Die einzige Rundung ausserhalb der Sprechblasen, und sie ist begründet: Ein
 * Passbild in einer Personalakte ist rund ausgestanzt und mit einem Ring
 * gestempelt – ein quadratisches Foto wäre hier kein Comic, sondern ein Avatar.
 * Der Ring trägt die Rollenfarbe, das Gesicht darunter trägt die Erkennung.
 *
 * Fehlt die Datei, bleibt der Kreis leer statt kaputt: Die Karte behält ihre
 * Höhe, und niemand sieht einen Ladefehler.
 */
.crewkarte__portraet {
    grid-column: 1 / -1;
    justify-self: center;
    width: 6.5rem;
    height: 6.5rem;
    margin-bottom: var(--bm-gap-2);
    background-color: var(--bm-ink);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center top;
    border: 3px solid var(--karte-farbe, var(--bm-ink-3));
    border-radius: 50%;
}

.crewkarte__wappen {
    display: block;
    color: var(--karte-farbe, var(--bm-paper));
}

/* Feste Größe, nicht 100 Prozent: Einspaltig ist die Karte sonst so breit wie
   das Wappen, und aus einer Marke wird ein Plakat. */
.crewkarte__wappen svg {
    width: 2.6rem;
    height: 2.6rem;
}

.crewkarte strong {
    display: block;
    font-family: var(--bm-font-amt);
    font-size: 0.95rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

.crewkarte span {
    display: block;
    font-family: var(--bm-font-doc);
    font-size: 0.85rem;
    color: var(--bm-paper-dim);
}

.crewkarte em {
    display: block;
    margin-top: var(--bm-gap-1);
    font-family: var(--bm-font-letter);
    font-size: 1.05rem;
    font-style: normal;
    color: var(--bm-paper);
}

@media (min-width: 46rem) {
    .crewschau__karten {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .crewschau__karten {
        grid-template-columns: repeat(4, 1fr);
    }

    .crewkarte {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DER VORGANG AUF PAPIER
   ==========================================================================

   Neunzig Minuten, neun Entscheidungen, ein Aktenzeichen — und beim Schließen
   des Fensters war das alles weg. Der Raum wird nach vierundzwanzig Stunden
   aufgeräumt, die Entscheidungskette lebt ausschließlich im Spielstand, und
   gespeichert wird sie nirgends. Was hier gedruckt wird, ist die einzige
   Fassung, die es je geben wird.

   GEDRUCKT WIRD NUR, WAS DOKUMENT IST. Ein Eingabefeld auf Papier ist ein
   Formular, das niemand ausfüllen kann; eine Bestenliste ist morgen eine
   andere; ein Spendenknopf auf einem Andenken ist eine Bitte an die eigene
   Crew. Übrig bleiben Akte, Einstufung, die neun Weggabelungen und das
   Extrablatt — und die Signatur des Hauses darunter.

   Und es wird SCHWARZ AUF PAPIER gedruckt, nicht Papier auf Schwarz. Die
   Nachtansicht dieses Spiels ist eine Bildschirmentscheidung; auf einem Blatt
   wäre sie eine Tonerpatrone. Das ist keine Abweichung von der Bibel, sondern
   ihre Anwendung: Der Grund ist vergilbtes Papier, und hier IST er Papier.
   ========================================================================== */


@media print {
    /*
     * Der Druck kennt nur eine Ansicht: die, die gerade offen ist.
     *
     * Und er kennt nur Dokumente. Was hier verschwindet, ist entweder
     * interaktiv (ein Eingabefeld auf Papier ist ein Formular, das niemand
     * ausfüllen kann), morgen anders (die Bestenliste) oder eine Bitte an die
     * eigene Crew (der Spendenknopf).
     */
    .view[hidden],
        .toast,
    .rechtliches,
    .einladung,
    .controls,
    .druckleiste,
    .register,
    .urteil,
    .teaser,
    .rezension,
    .spende {
        display: none !important;
    }

    /*
     * DIE NACHT WIRD HIER MIT DEM HOLZHAMMER UMGEKEHRT, UND DAS IST ABSICHT.
     *
     * Der erste Anlauf hat einzelne Farben aufgezählt: Senfgelb hier, Signalrot
     * dort, den Zeigerschatten am Rang. Jede Aufzählung ist eine Liste, die
     * jemand pflegen muss, und die erste Prüfung hat vier vergessene Stellen
     * gefunden — darunter die Kennzahlen der Akte, die auf einer Fläche in
     * `--bm-ink` standen und damit SCHWARZ AUF SCHWARZ gedruckt wurden. Genau
     * die drei Zahlen, wegen derer das Blatt gedruckt wird.
     *
     * Deshalb steht hier keine Liste, sondern eine Regel: Auf Papier ist alles
     * Druckerschwärze auf Papier. Was danach noch eine Kante braucht, bekommt
     * sie einzeln — Kanten sind wenige und benannt, Farben waren viele und
     * verstreut.
     *
     * `!important` ist an dieser Stelle richtig und nirgends sonst: Die
     * Bildschirmregeln sind teils spezifischer, und eine Papierfarbe, die von
     * einer Nachtregel geschlagen wird, ist unlesbarer Text auf echtem Papier.
     */
    .view[data-view='debriefing'],
    .view[data-view='debriefing'] *,
    .view[data-view='debriefing'] *::before,
    .view[data-view='debriefing'] *::after {
        color: #000 !important;
        background: transparent !important;
        border-color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .shell {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .view[data-view='debriefing'] {
        width: auto;
        max-width: none;
    }

    /*
     * Ein Vorgang bekommt einen Bogen, seine Anlage bekommt den nächsten.
     *
     * `break-before` stand einmal an `.gabelungen` — die liegt aber INNERHALB
     * der Akte, und ein erzwungener Umbruch schlägt ein `break-inside: avoid`:
     * Die Akte wurde genau dort zerschnitten, wo sie zusammenbleiben sollte,
     * und ihr Schlusssatz landete allein auf dem Anlagenblatt. Umgebrochen wird
     * deshalb nur vor dem Extrablatt, das als eigenes Dokument daneben liegt.
     */
    .taeterakte,
    .trophaee,
    .rang,
    .extrablatt {
        break-inside: avoid;
    }

    .extrablatt {
        break-before: page;
    }

    .gabelungen__liste li {
        break-inside: avoid;
    }

    /*
     * Der Kopf der Abrechnung bleibt, verliert aber seinen Fehlregister-Versatz:
     * Der ist auf einem Bildschirm ein Druckfehler-Zitat und auf Papier ein
     * doppelt gesetzter Buchstabe.
     */
    .masthead {
        margin-bottom: var(--bm-gap-3);
    }

    /*
     * Der Eintrag im Verzeichnis lieferbarer Bücher BLEIBT — er ist der Grund,
     * warum es diese Akte gibt: drei Mark achtzig, amtlich lieferbar, nicht
     * löschbar. Was daneben verschwindet, ist das Porträt des Paten: Es liegt
     * als Hintergrundbild auf einer Fläche, und Hintergrundbilder druckt kaum
     * ein Browser von selbst. Ein leerer Kasten neben dem Triumph wäre
     * schlimmer als kein Kasten.
     */
    .trophaee__paar .art {
        display: none !important;
    }

    /*
     * Was auf dem Bildschirm eine Fläche war, ist auf Papier eine Kante. Die
     * Rahmen kommen einzeln zurück, weil die Regel oben sie alle auf `#000`
     * gesetzt, aber keine Breite vergeben hat.
     */
    .taeterakte,
    .abrechnung,
    .gabelungen,
    .trophaee,
    .extrablatt {
        border: 1px solid #000;
    }

    .taeterakte {
        border-width: 2px;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.75em;
    }
}