/*
 * Startseite, Lobby, Pause, Abrechnung, Fuss und die beiden Overlays.
 *
 * Jeder Spieler sitzt an einem eigenen Gerät, und das Telefon ist der
 * Normalfall: einspaltig zuerst, breiter erst ab 46rem. Andere Schwellen als
 * 34 / 46 / 62rem gibt es in diesem Haus nicht.
 *
 * DER PAPIERTON GEHÖRT DEM GEGENSTAND, NICHT DER ANSICHT. Es gibt genau zwei
 * helle Gegenstände: `.ausdruck` – die Endlospapierbahn, auf der die
 * Startseite steht – und `.extrablatt`, der Fernkopiebericht am Ende des
 * Abends. Beide kommen aus einem Drucker. Alles andere ist Nacht, und einen
 * Umschalter dafür gibt es nicht.
 *
 * Die drei Gruppenregeln unter „Schrift" stehen VOR allem anderen: Sie tragen
 * Familie, Laufweite und Versalien, jeder Block darunter nur noch Grösse und
 * Farbe. Bei gleicher Spezifität gewinnt der spätere Block – deshalb diese
 * Reihenfolge und keine andere.
 */

/* ==================================================== DIE SCHALE =========== */

/*
 * 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össe, die mit der klebenden Leiste darüber nichts zu tun hat.
 * `--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(--wr-shell));
    margin-inline: auto;
    padding-block: var(--haus-kopfluft) var(--wr-gap-5);
}

/*
 * DIE AKTE NUTZT DIE HAUSBREITE, DAS SPIEL BLEIBT BEI DER BÜHNENBREITE.
 *
 * `.shell` deckelt alle fünf Ansichten auf `--wr-shell`. Eine Regel an der
 * Startansicht allein brächte deshalb gar nichts — sie hänge in einem Kasten,
 * der schon 224 Pixel früher aufhört. Der Griff muss an `.shell` selbst
 * ansetzen, und zwar nur dann, wenn die Startansicht offen liegt.
 *
 * `:has()` ist hier kein Kunststück, sondern die einzige Stelle, an der das
 * ohne ein zweites Zustandsattribut geht. Ein Browser ohne `:has()` fällt auf
 * 82rem zurück: schmaler, nicht kaputt.
 *
 * DIE SEITENLUFT KOMMT AUS DEM RAHMEN (`--haus-luft`) und nicht aus einem
 * eigenen `clamp`. Genau diese Zahl entscheidet, ob die Kante der Papierbahn
 * unter der Wortmarke der Kopfleiste steht oder 36 Pixel daneben — zwei
 * Fassungen derselben Zahl liefen beim nächsten Umbau auseinander.
 */
.shell:has(> .view[data-view='start']:not([hidden])) {
    width: min(100%, var(--wr-akte));
    padding-inline: var(--haus-luft);
}

/* Lobby und Abrechnung sind Listen. Vier Namen über dreizehnhundert Pixel
   sind ein Strich mit Text am Rand. */
.view[data-view='lobby'],
.view[data-view='debriefing'] {
    width: min(100%, 68rem);
    margin-inline: auto;
}

.view[data-view='lobby'] h2 {
    margin: var(--wr-gap-4) 0 var(--wr-gap-2);
}

/* --- Schrift: drei Gruppen, dann nur noch Grösse und Farbe ---------------- */

.masthead__kicker, .aufmacher__dach, .aufmacher__zeile,
.vordruck__kopf,
.roomhead__label, .link-state, .roster__role, .bereitschaft,
.role-card__domain, .role-card__holder,
.pause__marke, .pause__uhr-label, .pause__code-label, .pause__wartet,
.reklame__marke, .reklame__ziel, .reklame__rolle,
.extrablatt__stempel, .rang__label, .spende__kicker, .spende__dach, .register__eingetragen,
.register__rang, .teaser__marke, .teaser__zeile,
.taeterakte__stelle, .abrechnung dt, .gabelungen__kopf, .gabelungen__frage,
.gabelungen__vermerk, .urteil__kicker, .urteil__haken, .urteil__quittung,
.anzeige__marke, .anzeige__ziel, .ausruester__rolle, .ausruester__ort,
.rechtliches__stempel, .einladung__marke, .einladung__quittung {
    font-family: var(--wr-font-amt);
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
}

.ausdruck__titel, .aufmacher__schlagzeile,
.roster__name, .role-card__name, .crewkarte strong,
.kaffeeklappe__titel, .reklame__titel,
.extrablatt__titel, .extrablatt__schlagzeile, .rang__name, .register__crew,
.teaser__titel, .gabelungen__wahl, .anzeige__kopf, .ausruester__name,
.einladung__titel {
    font-family: var(--wr-font-display);
    text-transform: uppercase;
}

/* Eine Zahl, die über den Tisch gerufen wird, bekommt nie einen Trennstrich. */
.code-input, .roomhead__code, .pause__uhr-wert, .pause__code span,
.kaffeeklappe__uhr, .register__platz, .register__zeit, .register__strafen,
.abrechnung dd, .taeterakte__zeichen {
    font-family: var(--wr-font-mono);
    font-variant-numeric: tabular-nums;
    hyphens: none;
}

.section-note,
.field__hint {
    max-width: var(--wr-mass);
    margin: 0 0 var(--wr-gap-2);
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--wr-paper-dim);
}

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

/*
 * Die Sperrung macht aus fünf Zeichen einen Code und nicht ein Wort. Die
 * GRÖSSE steht bewusst nicht hier, sondern an `.vordruck input` - siehe dort.
 */
.code-input {
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

/* ============================================ DIE STARTSEITE: DER AUSDRUCK = */

/*
 * Eine Endlospapierbahn aus einem Nadeldrucker: Führungslochung an beiden
 * Rändern, blasse Balken quer. Die Farbumkehr steht GESAMMELT hier und hängt
 * ausschliesslich an den beiden Papiergegenständen – läge sie an der Ansicht,
 * wäre auch alles andere hell, was zufällig in ihr steht.
 */
.ausdruck,
.extrablatt {
    color: var(--wr-ink);
    background-color: var(--wr-paper);
    background-image:
        var(--wr-grain),
        radial-gradient(circle at center, var(--wr-halbton) 0.9px, transparent 1.1px),
        repeating-linear-gradient(to bottom, transparent 0 2.6rem, rgba(47, 79, 120, 0.07) 2.6rem 5.2rem);
    background-size: 140px 140px, var(--wr-halftone-size) var(--wr-halftone-size), 100% 100%;
    border: var(--wr-border-fat) solid var(--wr-ink);
    box-shadow: var(--wr-shadow);
}

:is(.ausdruck, .extrablatt) :is(h1, h2, h3, p, li, dt, dd, strong, em, cite, label, blockquote, figcaption) {
    color: var(--wr-ink);
}

:is(.ausdruck, .extrablatt) :is(h1, h2) {
    text-shadow: none;
}

:is(.ausdruck, .extrablatt) a {
    color: var(--wr-signal-deep);
}

.ausdruck {
    position: relative;
    padding: var(--wr-gap-4) clamp(1.4rem, 5vw, 2.6rem);
}

/* Die Führungslochung ist ein Raster und kann nichts anfassen. */
.ausdruck::before,
.ausdruck::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(0.9rem, 3vw, 1.5rem);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 0.45rem,
        var(--wr-ink) 0.45rem 0.72rem,
        transparent 0.72rem 1.2rem
    );
    opacity: 0.28;
    pointer-events: none;
}

.ausdruck::before {
    left: 0;
    border-right: 1px dashed var(--wr-ink);
}

.ausdruck::after {
    right: 0;
    border-left: 1px dashed var(--wr-ink);
}

.ausdruck__kopf {
    margin-bottom: var(--wr-gap-3);
    padding-bottom: var(--wr-gap-2);
    border-bottom: 3px solid var(--wr-ink);
}

.ausdruck__marke,
.ausdruck__gattung,
.ausdruck__zeile {
    display: block;
    font-family: var(--wr-font-mono);
    font-size: 0.7rem;
    letter-spacing: var(--wr-tracking-mono);
    text-transform: uppercase;
    color: var(--wr-signal-deep);
}

.ausdruck__zeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-1) var(--wr-gap-3);
    margin-top: var(--wr-gap-1);
    color: var(--wr-ink);
}

/*
 * DER TRANSPARENZHINWEIS UNTER DEM KOPF — dieselbe Zeile wie `en_hinweis_spiel`
 * am Vordruck von Alarm im Archiv (`archiv.css:421`), nur mit dem Ton dieses
 * Ausdrucks: `--wr-signal-deep` traegt hier schon `.ausdruck__marke` und
 * `.aufmacher__zeile` auf demselben Papier.
 */
.sprachhinweis {
    margin: var(--wr-gap-1) 0 0;
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--wr-signal-deep);
}

.masthead {
    display: grid;
    gap: var(--wr-gap-1);
    margin-bottom: var(--wr-gap-3);
}

.masthead__kicker {
    font-size: 0.75rem;
    color: var(--wr-signal-deep);
}

/* --- Aufmacher und Spaltensatz -------------------------------------------- */

.aufmacher {
    display: grid;
    gap: var(--wr-gap-3);
    margin-bottom: var(--wr-gap-4);
}

/*
 * DAS RASTER VON FALL 01, NACHGEMESSEN AUF DIE BILDGRÖSSE.
 *
 * Fall 01 teilt 1.15fr zu 1fr. Mit derselben Zahl stand das Bild hier auf
 * jeder Breite 21,6 Pixel schmaler: Der Ausdruck braucht seitlich 2,6 rem
 * Innenabstand für die Führungslochung, die Zeitung nur 1,15 rem. 1.085fr
 * gleicht das aus; gemessen weicht das Bild auf 1440 bis 2560 px höchstens
 * 3,4 Pixel von Fall 01 ab und steht nur um die Lochung versetzt.
 *
 * Kein Banner über beiden Spalten: Unter ihm blieb neben dem Bild eine kurze
 * Textspalte stehen, und die Schlagzeile verhungerte als dünnes Band.
 *
 * DIE SCHWELLE IST 62rem UND NICHT 46rem — eine der drei Schwellen dieses
 * Hauses (34 / 46 / 62), also keine vierte. Bei 46rem (736 px) blieben der
 * Textspalte rund 330 Pixel.
 */
@media (min-width: 62rem) {
    .aufmacher {
        grid-template-columns: minmax(0, 1.085fr) minmax(0, 1fr);
        align-items: start;
    }
}

/*
 * `min-width: 0` — DIE RASTERFALLE. Ein Rasterfeld ist von Haus aus mindestens
 * so breit wie sein längstes unteilbares Wort, und „Preisbindungstreuhand" in
 * der Anton misst mehr als eine Handybreite. Dieselbe Zeile und derselbe Grund
 * wie in zeitung.css:241.
 */
.aufmacher__text {
    min-width: 0;
}

.aufmacher__dach,
.aufmacher__zeile {
    font-size: 0.78rem;
    color: var(--wr-signal-deep);
}

/* Die Abstände im Aufmacher sind die von Fall 01 (zeitung.css:245-282). */
.aufmacher__dach {
    margin: 0 0 var(--wr-gap-1);
}

/*
 * DAS ZEILENMASS IST HIER AUFGEHOBEN. `75ch` misst sich an der Schrift der
 * Zeile selbst, und in 0,78 rem Amtsschrift sind das nur 427 Pixel: Die
 * Fernschreibzeile brach auf jeder Breite um, auch in einer Spalte von 850.
 * Sie ist eine Kennzeile und kein Fliesstext.
 */
.aufmacher__zeile {
    margin: var(--wr-gap-2) 0 0;
    max-width: none;
}

/*
 * DER VORSPANN IST FLIESSTEXT, WIE IN FALL 01 (zeitung.css:270).
 *
 * Er stand in der Amtsschrift, in Versalien und 0,78 rem klein. Damit war die
 * linke Spalte auf einem Breitbild rund achtzig Pixel kürzer als Bild und
 * Unterschrift rechts, und unter dem Knopf blieb ein Streifen leeres Papier.
 */
.aufmacher__unterzeile {
    margin: var(--wr-gap-2) 0 0;
    max-width: var(--wr-mass);
    font-family: var(--wr-font-doc);
    font-size: 1.05rem;
}

/*
 * VIER GESETZTE ZEILEN BIS 3 rem, AUSGEMESSEN AN FALL 01.
 *
 * Die Anton ist höher geschnitten als die Alfa Slab One von Fall 01: Für
 * dieselbe sichtbare Versalhöhe (44,9 px) bräuchte sie 52 px. Der Vorspann
 * von Fall 02 ist aber doppelt so lang, und bei 52 px stand der Knopf auf
 * 1920 px 30 Pixel unter der Bildunterschrift. 3 rem sind die größte feste
 * Größe, bei der beide Unterkanten auf 1920 und 2560 px bündig liegen (0 und
 * -3 px), bei 92 Prozent der Versalhöhe von Fall 01. Vier Fassungen wurden
 * dafür gegen Fall 01 gerendert und begutachtet; eine mitwachsende Größe fiel
 * durch, weil die Schlagzeile auf 1440 px wieder verhungerte.
 *
 * AUF 1440 px IST BÜNDIG NICHT ZU HABEN: Dafür bräuchte es 25 px Schrift.
 * Fall 01 steht dort selbst bei -127, Fall 02 bei rund -100.
 *
 * UNTER 1,1 GEHT ES NICHT, obwohl Fall 01 mit 1,02 auskommt: Die Anton setzt
 * die Punkte eines Versal-Umlauts weit über die Versalhöhe. Bei 0,92 und
 * noch bei 1,05 standen die Punkte des Ö in „GEHÖRT" auf der Grundlinie der
 * Zeile darüber, und „FÜR 0,99" las sich wie „FÜR.0,99".
 */
.aufmacher__schlagzeile {
    margin: 0;
    font-size: clamp(1.8rem, 1rem + 5vw, 3rem);
    line-height: 1.1;
    text-wrap: balance;
    /* Ein Wort, das auch dann nicht passt, wird getrennt statt abgeschnitten —
       sonst ragt die Bahn auf 375 px über den Rand. */
    hyphens: auto;
    overflow-wrap: break-word;
}

.aufmacher__bild {
    margin: 0;
}

/*
 * DREI KANTEN ÜBEREINANDER SIND ZWEI ZU VIEL.
 *
 * `.art` bringt aus comic.css eine eigene fette Kante und einen Versatz-
 * schatten mit; in der figure darum lagen damit 3 px Rahmen, 5 px Bildkante
 * und 6 px Schatten übereinander. Eingerahmt ist der DRUCK, und zwar einmal —
 * dieselbe Reparatur wie in zeitung.css:298.
 *
 * DER RAHMEN LIEGT AM BILD UND NICHT AN DER FIGURE. Er lag an der figure und
 * schloss die Bildunterschrift als grauen Kasten mit ein; das Bild selbst
 * begann drei Pixel unter der Dachzeile daneben.
 */
.aufmacher__bild .art {
    border: var(--wr-border) solid var(--wr-ink);
    box-shadow: none;
}

.anwerbung__note {
    margin: 0;
    padding: var(--wr-gap-1) var(--wr-gap-2);
    font-family: var(--wr-font-mono);
    font-size: 0.72rem;
}

/*
 * EINE ZEILE AUF DEM BREITBILD. Die Unterschrift ist länger als die in Fall 01,
 * und in 0,76 rem fiel ab 1920 px genau ein Wort auf eine zweite Zeile.
 */
.aufmacher__legende {
    margin-top: var(--wr-gap-1);
    font-family: var(--wr-font-doc);
    font-size: 0.72rem;
    font-style: italic;
    line-height: 1.4;
    text-wrap: pretty;
}

/*
 * DER SATZSPIEGEL IST DER WRAPPER, DAS RESSORT IST EIN ARTIKEL DARIN.
 *
 * Hier war `.ressort` selbst der Mehrspalter, und seine drei Überschriften
 * trugen `column-span: all`. Ein Spanner BEENDET aber eine Spaltengruppe und
 * öffnet eine neue, die eigenständig ausbalanciert wird: Aus einem
 * Zeitungssatz wurden drei flache Bänder mit je einem Rücksprung nach oben,
 * und auf der Aktenbreite von 1371 Pixeln stand neben jeder Überschrift gut
 * ein Meter leeres Papier.
 *
 * Die richtige Bauform steht in diesem Haus zweimal fertig: `.extrablatt__spalten`
 * weiter unten in dieser Datei und `.tageblatt__satz` in Fall 01. Der Mehrspalter
 * ist der Kasten, die Artikel darin bleiben ganz.
 */
.ressort {
    margin-bottom: var(--wr-gap-4);
}

/*
 * EINE SPALTENZAHL OHNE MINDESTBREITE IST AUF DER AKTENBREITE EINE LÜGE.
 *
 * Hier stand `columns: 2`, und zwei Spalten sind zwei Spalten — auch auf
 * 1536 Pixeln. Seit die Startansicht die Hausbreite nutzt, bleiben nach
 * Seitenluft, Bahnrand und Führungslochung rund 1375 Pixel übrig, und daraus
 * wurden Spalten von 671 Pixeln: achtundachtzig Zeichen je Zeile. Das ist
 * genau der Fall, gegen den `--wr-mass` steht — der Blick findet den nächsten
 * Zeilenanfang nicht wieder.
 *
 * EINE MINDESTBREITE ALLEIN HÄTTE NICHTS GEHOLFEN: `column-width` ist eine
 * Untergrenze, keine Obergrenze, und `column-count` deckelt allein die Zahl.
 * Erst beide zusammen ergeben eine Zeitungsspalte, die mit dem Fenster
 * mitwächst und bei drei Spalten aufhört.
 *
 * ACHTZEHN REM SIND KEIN RUNDER WERT, sondern das Maß, das die zweispaltige
 * Fassung auf 46rem ohnehin schon trägt. Gemessen an der Papierbahn: bis 925
 * Pixel Satzbreite zwei Spalten von 292 bis 424 Pixeln wie bisher, darüber
 * drei von 353 bis 437 — nie mehr als siebenundfünfzig Zeichen, auf keiner
 * Fensterbreite.
 *
 * EINE VIERTE SCHWELLE IM MEDIA-QUERY wäre der bequemere Weg gewesen und
 * hätte die drei Breiten dieses Hauses (34 / 46 / 62rem) um eine vermehrt,
 * die nur dieser eine Block kennt.
 */
@media (min-width: 46rem) {
    .ausdruck__satz {
        columns: 3 18rem;
        column-gap: var(--wr-gap-4);
        /* Der Trennstrich ist kein Schmuck: Er hält die Lesereihenfolge.
           Ohne ihn sucht der Blick den nächsten Zeilenanfang im Nachbarabsatz
           statt eine Spalte weiter. Dieselbe Zeile in zeitung.css:446. */
        column-rule: 1px solid var(--wr-ink);
    }

    /*
     * DIE RESSORTS DÜRFEN BRECHEN, UND ZWAR MIT ABSICHT.
     *
     * Fall 01 hält seine drei Artikel mit `break-inside: avoid` zusammen, und
     * das geht dort auf, weil sie fast gleich lang sind. Hier ist „Der
     * Vorgang" doppelt so lang wie seine beiden Nachbarn: Unteilbar füllte er
     * die erste Spalte allein, die beiden anderen passten gemeinsam in die
     * zweite — und die dritte blieb leer. Drei Spalten, von denen eine leer
     * ist, sind zwei Spalten mit einem Loch daneben.
     *
     * Fliessend füllen dieselben drei Artikel alle drei Spalten, so wie in
     * einer Zeitung. Zusammengehalten wird nur, was zusammengehört: die
     * Überschrift mit ihrem ersten Absatz (`break-after: avoid` am Titel) und
     * das Zitat mit seiner Quellenangabe (`break-inside: avoid` am Paragrafen).
     */
    .ressort {
        margin-bottom: 0;
    }

    .ressort + .ressort {
        margin-top: var(--wr-gap-4);
    }

    /* Keine Waise und keine Hure an der Spaltenkante: mindestens zwei Zeilen
       gehen mit, sonst hängt ein einzelner Zeilenrest über dem Trennstrich. */
    .ressort p {
        orphans: 2;
        widows: 2;
    }
}

/*
 * DER RESSORTKOPF STEHT IN DER SPALTE UND NICHT DARÜBER.
 *
 * Hier standen `column-span: all` und `break-after: avoid` nebeneinander — das
 * zweite konnte am ersten ohnehin nichts ausrichten, ein Spanner erzwingt den
 * Bruch. Beides ist gefallen; die Größe kommt jetzt aus der Displayschrift,
 * so wie in Fall 01 (zeitung.css:358). 0,92 rem Archivo Narrow waren kein
 * Ressortkopf, sondern eine Zwischenzeile.
 */
.ressort__titel,
.ausdruck__ressortkopf {
    margin: 0 0 var(--wr-gap-2);
    font-family: var(--wr-font-display);
    font-size: 1.5rem;
    line-height: 1.05;
    letter-spacing: var(--wr-tracking-display);
    text-transform: uppercase;
    break-after: avoid;
}

/*
 * DAS ZEILENMASS WIRD IN DER SPALTE AUFGEHOBEN, und zwar mit Absicht.
 *
 * base.css gibt jedem Absatz `max-width: var(--wr-mass)` (75ch) — richtig für eine
 * Textseite, falsch in einer Spalte von 437 Pixeln: Der Absatz hörte dann vor
 * dem Spaltenrand auf und liess einen Streifen Papier stehen. Dieselbe
 * Aufhebung und derselbe Grund wie in zeitung.css:378.
 */
/*
 * `:where(p)` UND NICHT `p`, UND DAS IST EINE GEMESSENE ZEILE.
 *
 * `.ressort p` waere (0,1,1) und schluege damit JEDE Klassenregel darunter,
 * die nur (0,1,0) traegt — auch die, die spaeter im Stilblatt steht. Gemessen
 * im Browser: `.ressort__notiz` stand mit 14,72 px da statt mit den 12,8, die
 * sie selbst deklariert, und `.ressort__paragraf` verlor seine 0,95 rem aus
 * der Schriftgruppe. Beide Regeln waren da, beide wurden ueberstimmt, und
 * sichtbar war es nur als „etwas zu gross".
 *
 * `:where()` nimmt der Klammer ihr Gewicht: Die Regel steht auf (0,1,0), und
 * damit entscheidet wieder die Reihenfolge — was spaeter kommt, gewinnt.
 *
 * (Fall 01 traegt an derselben Stelle ein blankes `.ressort p`. Dort ist
 * `.ressort__paragraf` ein `<blockquote>` und kommt davon, die Vorspannzeile
 * nicht: Sie deklariert `--bm-font-amt` und rendert in `--bm-font-doc`. Das
 * ist ein Befund fuer den naechsten Durchgang und keiner fuer diesen — das
 * Blatt drueben steht so seit dem Go-Live.)
 */
.ressort :where(p) {
    max-width: none;
    margin: 0 0 var(--wr-gap-2);
    font-size: 0.92rem;
    line-height: 1.55;
    hyphens: auto;
}

.ressort__vorspann {
    font-weight: 700;
}

/*
 * DAS ZITAT IST EIN BLOCK UND KEIN EINSCHUB. Die Quellenangabe lief inline
 * und kursiv im letzten Absatz mit; jetzt steht sie darunter, in der
 * Amtsschrift, wie in zeitung.css:420.
 */
.ressort__paragraf {
    margin: var(--wr-gap-3) 0;
    padding: var(--wr-gap-2);
    border-block: var(--wr-border) solid var(--wr-ink);
    break-inside: avoid;
}

.ressort__paragraf cite {
    display: block;
    margin-top: var(--wr-gap-1);
    font-family: var(--wr-font-amt);
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
}

.aufmacher__text,
.ressort__paragraf,
.ressort__vorspann {
    max-width: none;
    font-size: 0.95rem;
}

.ressort__notiz {
    max-width: none;
    padding: var(--wr-gap-2);
    font-family: var(--wr-font-mono);
    font-size: 0.8rem;
    border: 1px dashed var(--wr-ink);
    break-inside: avoid;
}

/* --- Der Vordruck --------------------------------------------------------- */

/*
 * Deckname und Raumcode liegen beim Laden OFFEN da: Drei Browserläufe tippen
 * unmittelbar nach dem Laden hinein, und hinter einer Klappe liefen sie in ihr
 * Zeitlimit statt in einen Befund.
 */
.vordruck {
    display: grid;
    gap: var(--wr-gap-3);
    margin-bottom: var(--wr-gap-4);
    padding: var(--wr-gap-3);
    background: rgba(0, 0, 0, 0.05);
    border: var(--wr-border) solid var(--wr-ink);
}

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

.vordruck__kopf {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.78rem;
    color: var(--wr-signal-deep);
}

.vordruck__haelfte {
    display: grid;
    gap: var(--wr-gap-1);
    align-content: start;
}

.vordruck label {
    color: var(--wr-signal-deep);
}

/*
 * ACHTZEHN PIXEL, UND ZWAR FÜR BEIDE.
 *
 * Deckname und Raumcode sind zwei Hälften EINES Vordrucks. Die Klasse
 * `.code-input` trug einmal 1,35rem und traf damit nur das rechte Feld: Die
 * beiden Beschriftungen standen auf zwei Grundlinien, und die Stempelknöpfe
 * darunter auch. Es sieht dann aus, als sei eine Hälfte wichtiger.
 *
 * Die Angabe steht HIER und nicht an der Klasse: `.vordruck input` schlägt
 * sie in der Spezifität, und ein font-size dort träfe wieder nur ein Feld.
 * Absolut in Pixeln, weil ein Formularfeld ein Gegenstand ist und kein
 * Fließtext. Dieselbe Regel trägt `.vordruck input` in Fall 01
 * (css/zeitung.css) - aus demselben Grund.
 */
.vordruck input {
    /*
     * Und DIESELBE SCHRIFT, aus demselben Grund wie die Größe.
     *
     * Das Basisblatt setzt jedes Eingabefeld in die Schreibmaschine
     * (`--wr-font-doc`); die Kennzahlenregel weiter oben holt `.code-input` in
     * die Fernschreiberschrift, weil ein Code Ziffern auf gleicher Breite
     * braucht. Damit standen die zwei Hälften desselben Vordrucks in zwei
     * Schriften nebeneinander. Gemessen hat das `dev/dev.ps1 smoke`.
     */
    font-family: var(--wr-font-mono);
    font-size: 18px;
}

.anwerbung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wr-gap-2);
    margin-bottom: var(--wr-gap-4);
}

/*
 * AUF PAPIER GILT DIE PAPIERFASSUNG — UND HIER STAND SIE NICHT.
 *
 * `.btn--ghost` (comic.css) ist fuer die dunklen Schirme gebaut: Schrift in
 * `--wr-paper-dim`, Kante in `--wr-ink-3`. Auf der Papierbahn der Startseite
 * sind das 2,2:1 — „Komplizen anwerben" stand dort als grauer Schemen auf
 * hellem Grund. Fall 01 loest genau das an genau dieser Stelle
 * (zeitung.css:633); hier fehlte die Zeile, und aufgefallen ist es erst,
 * als ein zweiter, gefuellter Knopf danebenstand.
 */
/*
 * DIE PAPIERREGEL GILT FUER BEIDE STELLEN. Der Comic-Knopf ist an den
 * Aufmacher gezogen und steht nicht mehr in `.anwerbung`; ohne diese zweite
 * Haelfte griffe an der neuen Stelle die Grundregel aus comic.css — voller
 * Signalton auf einem Behoerdenausdruck.
 */
.anwerbung .btn,
.aufmacher__verweis .btn {
    color: var(--wr-ink);
    border-color: var(--wr-ink);
    background: transparent;
}

.anwerbung .btn:hover:not(:disabled),
.aufmacher__verweis .btn:hover:not(:disabled) {
    color: var(--wr-paper);
    background: var(--wr-ink);
    border-color: var(--wr-ink);
}

/*
 * DER WEG IN DEN COMIC TRAEGT TINTE, DER IN DIE ANWERBUNG NUR SEINE KANTE.
 *
 * Die Regel darueber macht aus jedem Knopf einen Papierknopf — Kontur in
 * Druckerschwaerze, gefuellt erst beim Anfassen. Gefuellt steht er da, wo
 * zuerst gelesen werden soll, und das ist seit dem Umzug der Aufmacher.
 *
 * Gefuellt bekommt er den Ton, den die anderen erst im Hover haben — nicht
 * das Signalrot. Das gehoert der Tuer ins Hinterzimmer weiter unten, und zwei
 * gleich laute Rote auf einem Blatt sind eines zu viel.
 */
.aufmacher__verweis .btn--primary {
    color: var(--wr-paper);
    background: var(--wr-ink);
}

.aufmacher__verweis .btn--primary:hover:not(:disabled) {
    color: var(--wr-paper);
    background: var(--wr-signal-deep);
    border-color: var(--wr-signal-deep);
}

/*
 * Der Verweis steht am Fuss des Aufmachertextes und nicht in der Spalte
 * daneben: Er gehoert zur Schlagzeile, nicht zum Bild.
 */
.aufmacher__verweis {
    margin: var(--wr-gap-3) 0 0;
}

/* --- Die Crewschau -------------------------------------------------------- */

.fahndung {
    margin-bottom: var(--wr-gap-4);
}

.crewschau__karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--wr-gap-3);
}

.crewkarte {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--wr-gap-2);
    padding: var(--wr-gap-2);
    border: var(--wr-border) solid var(--wr-ink);
    border-top: 6px solid var(--karte-farbe, var(--wr-ink));
}

/*
 * Das Porträtmedaillon ist die zweite Bibel-Ausnahme vom Radius null: Ein
 * Passbild in einer Personalakte ist rund ausgestanzt und gestempelt. Weiter
 * reicht die Ausnahme nicht.
 */
.crewkarte__portraet {
    width: 3.4rem;
    height: 3.4rem;
    background-color: var(--wr-ink-2);
    background-image: var(--art-src);
    background-size: cover;
    background-position: center 20%;
    border: 3px solid var(--karte-farbe, var(--wr-ink));
    border-radius: 50%;
}

.crewkarte__wappen {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--karte-farbe, var(--wr-ink));
}

.crewkarte__wappen svg,
.role-card__crest svg,
.kaffeeklappe__zeichen svg,
.urteil__note svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: square;
}

.crewkarte strong,
.crewkarte span,
.crewkarte em {
    display: block;
    font-size: 0.82rem;
}

.crewkarte strong {
    font-size: 1rem;
}

.crewkarte em {
    font-family: var(--wr-font-letter);
    font-size: 1rem;
    font-style: normal;
}

/* ======================================================== DIE LOBBY ======== */

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

.roomhead__label {
    font-size: 0.7rem;
    color: var(--wr-paper-dim);
}

.roomhead__code {
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    color: var(--wr-phosphor);
}

.roomhead__spacer,
.controls__spacer {
    flex: 1 1 auto;
}

.link-state {
    display: inline-flex;
    align-items: center;
    gap: var(--wr-gap-1);
    font-size: 0.68rem;
    color: var(--wr-paper-dim);
}

/* Ein Verbindungspunkt ist eine Lampe und kein Bauteil – die dritte und letzte
   Ausnahme vom Radius null. Das Wort daneben sagt dasselbe wie die Farbe. */
.link-state::before {
    content: '';
    width: 9px;
    height: 9px;
    background: currentColor;
    border-radius: 50%;
}

.link-state[data-mode='live'] {
    color: var(--wr-phosphor);
}

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

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

.roster {
    display: grid;
    gap: var(--wr-gap-1);
}

.roster__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wr-gap-2);
    padding: var(--wr-gap-2);
    background: var(--wr-ink-2);
    border-left: 4px solid var(--wr-ink-3);
}

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

.roster__row[data-me='1'] {
    background: var(--wr-blech);
}

.roster__check {
    font-family: var(--wr-font-mono);
    color: var(--wr-phosphor);
}

.roster__name {
    overflow-wrap: anywhere;
}

.roster__role {
    font-size: 0.72rem;
    color: var(--wr-paper-dim);
}

.roster__tags {
    display: flex;
    gap: var(--wr-gap-1);
    margin-left: auto;
}

.roster__hint {
    font-size: 0.85rem;
    color: var(--wr-paper-dim);
}

.besetzung,
.controls,
.druckleiste,
.spende__wege,
.einladung__wege {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wr-gap-2);
}

.controls {
    margin-top: var(--wr-gap-4);
}

.bereitschaft {
    flex-basis: 100%;
    font-size: 0.75rem;
    color: var(--wr-paper-dim);
}

/* --- Die Stuhlwahl -------------------------------------------------------- */

/* Wie viele Spalten das Raster stellt, hängt an der Zahl der Stühle und nicht
   daran, wie viele Karten zufällig nebeneinanderpassen. */
.roles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wr-gap-3);
}

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

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

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

.role-card {
    display: grid;
    gap: var(--wr-gap-1);
    align-content: start;
    padding: var(--wr-gap-2);
    text-align: left;
    color: var(--wr-paper);
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
    border-top: 6px solid var(--role-accent, var(--wr-paper));
    cursor: pointer;
}

/*
  DECKKRAFT IST KEIN ZUSTAND, SIE IST EIN KONTRASTVERLUST.
  (Dieselbe Nacht, derselbe Befund wie an der Karte in Fall 01.)

  Hier stand „opacity: 0.55" auf der ganzen Karte, und Deckkraft rechnet jede
  Schrift gegen ihren Grund herunter: Die Schlagworte fielen von 5,60:1 auf
  2,61:1, der Stand von 7,70:1 auf 3,19:1. Gemeint war „der Stuhl ist weg" —
  gesagt wurde „diese Karte ist halb da".

  ES SIND JETZT ZWEI ZUSTAENDE, WEIL ES ZWEI SIND. Der eigene Stuhl ist kein
  Verlust, sondern eine Bestaetigung: Er behaelt seine Farbe und bekommt die
  Kante. Der fremde faellt eine Tiefe tiefer, sein Portraet geht grau und
  blass — das Bild traegt keine Auskunft, die nicht daneben steht —, und der
  Name des Belegers steht in der Blechfassung des Signals (5,36:1 auf diesem
  Grund; das volle Signal haelt dort keine 4,5).

  Der Zeiger bleibt am fremden Stuhl „not-allowed" und am eigenen normal: Zwei
  verschiedene Lagen, zwei verschiedene Antworten auf denselben Klick.
*/
.role-card[data-taken-by='me'] {
    /* Die Karte traegt ohnehin --wr-ink-2; hier stand der Ton ein zweites Mal.
       Was den eigenen Stuhl ausmacht, ist die Kante ringsum: Die Oberkante in
       der Rollenfarbe hat jede Karte, alle vier hat nur diese. */
    border-color: var(--role-accent, var(--wr-paper));
}

.role-card[data-taken-by='other'] {
    background: var(--wr-ink);
    cursor: not-allowed;
}

.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(--wr-signal-blech);
}

.role-card__art {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background-color: var(--wr-ink);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center 18%;
    border: 2px solid var(--wr-ink-3);
}

.role-card__crest {
    display: flex;
    gap: var(--wr-gap-1);
    width: 2.4rem;
    color: var(--role-accent, var(--wr-paper));
}

.role-card__name {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

/*
 * DER RUF STEHT IN DER ROLLENFARBE, ABER NICHT IN DER IDENTITÄTSFASSUNG.
 *
 * `--role-accent` kommt hier als Inline-Stil aus `js/roles.js` und trägt den
 * Wert, an dem man den Stuhl wiedererkennt: auf dem Grund der Karte (#141c1e)
 * sind das 3.21:1 für Ruth und 3.51:1 für Ansgar. Als Kante oben und als
 * Wappen daneben reicht das; als Satz in Schreibschrift nicht.
 *
 * WELCHE ROLLE AUF DER KARTE LIEGT, WEISS DIESES STILBLATT NICHT. Der
 * Sitzschlüssel taugt dafür nicht: `buero` hält bei drei Stühlen den
 * Schmierfink und bei zweien den Code-Knacker. Was dasteht, ist das Panel im
 * Bildfeld – und dort steht der Rollenschlüssel. Deshalb hängt die
 * Blechfassung an `:has()` und nicht am Sitz.
 *
 * Sie wird als `--role-schrift` gesetzt und nicht direkt als `color`: Wer in
 * der Karte eine zweite Zeile in Rollenfarbe aufmacht, greift danach und hat
 * die Umschaltung schon.
 */
.role-card:has([data-panel='rolle_schrauber']) {
    --role-schrift: var(--wr-role-schrauber-blech);
}

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

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

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

.role-card__claim {
    font-family: var(--wr-font-letter);
    font-size: 1.05rem;
    color: var(--role-schrift, var(--wr-paper-dim));
}

.role-card__domain {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-1);
    font-size: 0.64rem;
    color: var(--wr-paper-dim);
}

.role-card__domain span {
    padding: 0.05em 0.35em;
    border: 1px solid var(--wr-ink-3);
}

.role-card__holder {
    font-size: 0.7rem;
    color: var(--wr-bernstein);
}

/* ==================================================== DIE KAFFEEKLAPPE ===== */

.pause {
    display: grid;
    gap: var(--wr-gap-3);
    justify-items: start;
    padding: var(--wr-gap-4);
    background: var(--wr-ink-2);
    border: var(--wr-border-fat) solid var(--wr-ink);
}

.pause__marke {
    font-size: 0.72rem;
    color: var(--wr-bernstein);
}

.pause__text {
    max-width: var(--wr-mass);
    margin: 0;
}

.pause__uhr,
.pause__code {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wr-gap-2);
}

.pause__uhr-label,
.pause__code-label,
.pause__wartet {
    font-size: 0.7rem;
    color: var(--wr-paper-dim);
}

.pause__uhr-wert,
.pause__code span {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    color: var(--wr-phosphor);
}

/*
 * Die drei Klappen. Hinter keiner liegt etwas: kein Handgriff, keine Frist,
 * kein Aktenvermerk. Es ist die einzige Stelle des Abends, an der das Spiel
 * nichts von seinen Spielern will.
 */
.kaffeeklappe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--wr-gap-3);
    width: 100%;
}

.kaffeeklappe__kachel {
    display: grid;
    gap: var(--wr-gap-1);
    align-content: start;
    padding: var(--wr-gap-3);
    text-align: left;
    color: var(--wr-paper);
    background: var(--wr-blech);
    border: var(--wr-border) solid var(--wr-ink-3);
    cursor: pointer;
}

.kaffeeklappe__zeichen {
    width: 2.2rem;
    height: 2.2rem;
    color: var(--wr-bernstein);
}

.kaffeeklappe__titel {
    font-size: 1rem;
}

.kaffeeklappe__blatt {
    max-width: none;
    margin: 0;
    font-size: 0.85rem;
    color: var(--wr-paper-dim);
}

/* Der Zähler läuft ausdrücklich lokal – im Browser dessen, der geklickt hat. */
.kaffeeklappe__uhr {
    font-size: 1.4rem;
    color: var(--wr-phosphor);
}

/* Die Kinowerbung von 1950, leicht schief. */
.reklame {
    padding: var(--wr-gap-3);
    color: var(--wr-ink);
    background: var(--wr-paper-aged);
    border: var(--wr-border) solid var(--wr-ink);
    transform: rotate(-0.6deg);
}

.reklame__marke,
.reklame__ziel,
.reklame__rolle {
    font-size: 0.7rem;
    color: var(--wr-signal-deep);
}

.reklame__titel {
    margin: var(--wr-gap-1) 0;
    font-size: 1.4rem;
    color: var(--wr-ink);
}

.reklame__text,
.reklame__haus,
.reklame__ort,
.reklame__fuss {
    max-width: var(--wr-mass);
    margin: 0;
    color: var(--wr-ink);
}

.reklame__fuss {
    margin-top: var(--wr-gap-2);
    padding-top: var(--wr-gap-1);
    font-size: 0.78rem;
    border-top: 1px solid var(--wr-ink);
}

/* ======================================================= DIE ABRECHNUNG ==== */

.debriefing {
    display: grid;
    gap: var(--wr-gap-5);
}

/* Der Fernkopiebericht. Papier, weil ein Fax aus einem Drucker kommt. */
.extrablatt {
    padding: var(--wr-gap-4);
}

.extrablatt__kopf {
    padding-bottom: var(--wr-gap-2);
    border-bottom: 3px double var(--wr-ink);
}

.extrablatt__titel {
    font-size: clamp(1.5rem, 1rem + 2.4vw, 2.4rem);
}

.extrablatt__unterkopf,
.extrablatt__dach {
    font-family: var(--wr-font-mono);
    font-size: 0.72rem;
    letter-spacing: var(--wr-tracking-mono);
    text-transform: uppercase;
}

.extrablatt__schlagzeile {
    margin: var(--wr-gap-3) 0 var(--wr-gap-2);
    font-size: clamp(1.6rem, 1rem + 3.2vw, 3rem);
    line-height: 1.02;
    text-wrap: balance;
}

.extrablatt__vorspann {
    max-width: none;
    font-weight: 700;
}

.extrablatt__spalten {
    columns: 1;
}

@media (min-width: 46rem) {
    .extrablatt__spalten {
        columns: 2;
        column-gap: var(--wr-gap-4);
    }
}

.extrablatt__spalte {
    max-width: none;
    break-inside: avoid;
}

.extrablatt__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wr-gap-2);
    margin-top: var(--wr-gap-3);
    padding-top: var(--wr-gap-2);
    border-top: 1px solid var(--wr-ink);
}

.extrablatt__stempel {
    padding: 0.15em 0.5em;
    font-size: 0.72rem;
    color: var(--wr-signal-deep);
    border: 2px solid var(--wr-signal-deep);
    transform: rotate(-6deg);
}

.trophaee {
    display: grid;
    gap: var(--wr-gap-2);
}

.trophaee__paar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--wr-gap-3);
}

/*
 * KEIN HOCHFORMAT — HIER HAENGT EIN QUERFORMAT.
 *
 * Die Klasse ist aus Fall 01 uebernommen, und dort ist sie richtig: Dahinter
 * liegt `portraits/pate_holzschliff.webp`, 800 x 993, ein echtes Hochformat.
 * In diesem Zimmer haengt an derselben Klasse `comics/szene_w_epilog.webp` —
 * 1920 x 1072, also 16/9. Mit `object-fit: cover` in einem 4/5-Rahmen fielen
 * davon ueber die Haelfte der Bildbreite weg, und zwar an der einzigen Stelle
 * dieses Falls, die ausser dem Agententest kein Lauf je ansieht.
 *
 * Das Verhaeltnis steht jetzt gar nicht mehr da: `.art` loest ohnehin
 * `aspect-ratio: var(--art-ratio, 16 / 9)` auf (comic.css). Eine Zeile, die
 * die Vorgabe wiederholt, ist eine Zeile, die beim naechsten Umbau auseinander
 * laeuft.
 *
 * Der Name bleibt `--pate`, obwohl dieser Fall keinen Paten hat: Umbenennen
 * faesst zwei Dateien an und repariert nichts.
 */
.art--pate {
    --art-accent: var(--wr-signal-deep);
}

/* --- Einstufung und Fluchtkasse ------------------------------------------- */

.rang {
    display: grid;
    gap: var(--wr-gap-1);
    padding: var(--wr-gap-4);
    background: var(--wr-blech);
    border: var(--wr-border-fat) solid var(--wr-phosphor);
}

.rang__label {
    font-size: 0.72rem;
    color: var(--wr-paper-dim);
}

.rang__name {
    font-size: clamp(1.6rem, 1rem + 3vw, 2.8rem);
    color: var(--wr-phosphor);
}

.rang__zeile {
    max-width: var(--wr-mass);
    margin: 0;
    font-size: 0.92rem;
    color: var(--wr-paper-dim);
}

/*
 * Die Fluchtkasse steht direkt unter der Einstufung, und das ist Absicht: Ganz
 * unten, hinter zwei Bildschirmlängen, hat sie am Tisch nie jemand gesehen.
 * Eine Bitte, keine Schranke.
 */
.spende {
    display: grid;
    gap: var(--wr-gap-2);
    justify-items: start;
    padding: var(--wr-gap-4);
    color: var(--wr-ink);
    background: var(--wr-paper-aged);
    border: var(--wr-border) solid var(--wr-ink);
    border-top: 6px solid var(--wr-bernstein);
}

/*
 * DER SIGNAL-MODIFIKATOR. Diese Karte stand im Playtest am Ende eines langen
 * Epilogs und ist dort untergegangen – dieselbe Karte, mit einer Kante, die
 * man von Weitem sieht.
 */
.spende--signal {
    border-top-width: 10px;
}

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

.spende h2,
.spende .section-note {
    color: var(--wr-ink);
}

.spende__dach {
    margin: 0;
    font-size: 0.72rem;
    color: var(--wr-signal-deep);
}

/* Der Kassenbon klärt den Bruch zwischen der Mark des Spiels und dem Euro der
   Wirklichkeit als Witz – nicht der Fliesstext als Fussnote. */
.spende__bon {
    max-width: 26rem;
    margin: 0;
    padding: var(--wr-gap-2);
    font-family: var(--wr-font-mono);
    font-size: 0.78rem;
    /*
     * HIER STAND `white-space: pre-line`, und es war das einzige Vorkommen im
     * ganzen Haus. Der Bon steht im Unterstützen-Overlay als Markup über zwei
     * Quellzeilen, und `pre-line` machte aus deren Umbrüchen harte: eine leere
     * erste Zeile und ein Bruch mitten in „Umrechnung Mark / zu Euro". Fall 01
     * hat dasselbe Markup und keine solche Regel; dort läuft der Bon um.
     */
    color: var(--wr-ink);
    background: var(--wr-paper);
    border: 1px dashed var(--wr-ink);
}

/* --- Register, Druck, Teaser --------------------------------------------- */

.register__form,
.urteil__adresse,
.teaser__aufruf {
    display: grid;
    gap: var(--wr-gap-2);
    width: min(100%, 30rem);
}

.register__form {
    margin-bottom: var(--wr-gap-3);
}

.register__eingetragen {
    font-size: 0.78rem;
    color: var(--wr-phosphor);
}

.register__liste {
    display: grid;
    gap: var(--wr-gap-1);
}

.register__liste li {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    gap: var(--wr-gap-1) var(--wr-gap-2);
    align-items: baseline;
    padding: var(--wr-gap-1) var(--wr-gap-2);
    background: var(--wr-ink-2);
}

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

.register__crew {
    overflow-wrap: anywhere;
}

.register__rang {
    grid-column: 2 / -1;
    font-size: 0.68rem;
    color: var(--wr-paper-dim);
}

.register__zeit,
.register__strafen {
    grid-row: 1;
    color: var(--wr-bernstein);
}

.register__leer {
    padding: var(--wr-gap-2);
    color: var(--wr-paper-dim);
    border: 1px dashed var(--wr-ink-3);
}

/* Ein Aushang, kein Werbebanner: genannt wird ein Vorgang, kein Produkt. */
.teaser {
    display: grid;
    gap: var(--wr-gap-2);
    justify-items: start;
    padding: var(--wr-gap-4);
    background: var(--wr-blech);
    border: var(--wr-border) solid var(--wr-ink-3);
    border-left: 6px solid var(--wr-bernstein);
}

.teaser__marke,
.teaser__zeile {
    font-size: 0.72rem;
    color: var(--wr-bernstein);
}

.teaser__titel {
    font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
}

.teaser__text {
    max-width: var(--wr-mass);
    margin: 0;
}

/* --- Täterakte und Weggabelungen ------------------------------------------ */

.taeterakte,
.urteil {
    padding: var(--wr-gap-4);
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
}

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

.taeterakte__stelle {
    font-size: 0.72rem;
    color: var(--wr-paper-dim);
}

.taeterakte__zeichen {
    font-size: 0.78rem;
    letter-spacing: var(--wr-tracking-mono);
    text-transform: uppercase;
    color: var(--wr-bernstein);
}

.taeterakte__betreff {
    margin: var(--wr-gap-2) 0;
}

.taeterakte__schluss {
    margin: var(--wr-gap-2) 0 0;
    padding-top: var(--wr-gap-2);
    font-family: var(--wr-font-letter);
    font-size: 1.1rem;
    border-top: 1px dashed var(--wr-ink-3);
}

.abrechnung {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--wr-gap-2);
    margin: 0;
}

.abrechnung dt {
    font-size: 0.68rem;
    color: var(--wr-paper-dim);
}

.abrechnung dd {
    margin: 0;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
    color: var(--wr-paper);
}

.gabelungen__kopf {
    font-size: 0.72rem;
    color: var(--wr-paper-dim);
}

.gabelungen__liste {
    display: grid;
    gap: var(--wr-gap-2);
    margin-top: var(--wr-gap-2);
}

.gabelungen__liste li {
    padding: var(--wr-gap-2);
    background: var(--wr-ink-2);
    border-left: 4px solid var(--wr-ink-3);
}

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

.gabelungen__frage {
    font-size: 0.72rem;
    color: var(--wr-paper-dim);
}

.gabelungen__folge {
    font-family: var(--wr-font-doc);
    font-size: 0.9rem;
}

.gabelungen__vermerk {
    display: inline-block;
    margin-top: var(--wr-gap-1);
    font-size: 0.68rem;
    color: var(--wr-signal);
}

/* --- Innenrevision, Rezension, Ausrüster, Anzeige ------------------------- */

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

/*
 * DER SIGNAL-MODIFIKATOR, für den unbeantworteten Bogen. Im Playtest ging
 * dieser Bogen am Ende eines langen Epilogs unter – dieselbe Karte, mit einer
 * Kante, die `.taeterakte` daneben nicht hat. `.urteil--dank` (die Quittung)
 * bleibt unberührt: Was erledigt ist, muss niemand mehr anrufen.
 */
.urteil--signal {
    border-left: 8px solid var(--wr-bernstein);
}

/*
 * Der Stempel über dem Titel – dieselbe Bauform wie `.extrablatt__stempel`:
 * klein, umrandet, leicht schief. Bernstein trägt hier Text UND Kante, denn
 * `.urteil` liegt auf dunklem Grund (derselbe Ton wie `.urteil__wort`).
 */
.urteil__kicker {
    display: inline-block;
    margin: 0;
    padding: 0.15em 0.6em;
    font-size: 0.7rem;
    color: var(--wr-bernstein);
    border: 2px solid var(--wr-bernstein);
    transform: rotate(-2deg);
}

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

.urteil__note {
    display: grid;
    place-items: center;
    gap: 0.1rem;
    width: 52px;
    height: 52px;
    color: var(--wr-paper-dim);
    background: var(--wr-blech);
    border: 2px solid var(--wr-ink-3);
    cursor: pointer;
}

.urteil__note svg {
    width: 1.2rem;
    height: 1.2rem;
}

/*
 * GEFÜLLT IST ALLES BIS ZUR GEWÄHLTEN NOTE – so liest sich eine Skala.
 *
 * `data-note` wurde in diesem Haus geschrieben und von KEINER Regel gelesen:
 * Der Zeichner setzte das Attribut, aber nur der eine angeklickte Knopf
 * färbte sich, und die Sterne blieben auf jeder Note leere Konturen. Vier
 * Sterne sahen damit aus wie einer – die Auskunft stand allein in der
 * Hervorhebung eines einzelnen Feldes.
 *
 * Fall 01 führt dieselbe Kaskade, zeichengleich bis auf den Farbton.
 */
/*
 * `:not([aria-checked='true'])` IST KEIN ZIERRAT, SONDERN DER GANZE PUNKT.
 *
 * Der gewählte Knopf kehrt um: Bernstein als FLÄCHE, Tinte als Strich. Ohne
 * diesen Ausschluss trüge sein Stern die Füllung dieser Kaskade – Bernstein
 * auf Bernstein, 1:1 –, und ausgerechnet der eine Knopf, der die Note nennt,
 * wäre der einzige ohne sichtbaren Stern. Gemessen: `fill` stand dort auf
 * `rgb(217,165,33)`, gleich dem Grund.
 *
 * EINE ZWEITE REGEL DANACH REICHT DAFÜR NICHT. Diese Selektoren wiegen
 * 0,4,1; ein `.urteil__note[aria-checked='true'] svg` wiegt 0,2,1 und
 * verliert, obwohl es später steht. Spezifität schlägt Reihenfolge – zwei
 * Regeln, die sich AUSSCHLIESSEN, sind die Antwort darauf und kein
 * Wettlauf um ein Gewicht, das beim nächsten Umbau wieder kippt.
 */
.urteil__noten[data-note='1'] .urteil__note:nth-child(-n + 1):not([aria-checked='true']) svg,
.urteil__noten[data-note='2'] .urteil__note:nth-child(-n + 2):not([aria-checked='true']) svg,
.urteil__noten[data-note='3'] .urteil__note:nth-child(-n + 3):not([aria-checked='true']) svg,
.urteil__noten[data-note='4'] .urteil__note:nth-child(-n + 4):not([aria-checked='true']) svg,
.urteil__noten[data-note='5'] .urteil__note:nth-child(-n + 5):not([aria-checked='true']) svg {
    fill: var(--wr-bernstein);
    stroke: var(--wr-bernstein);
}

.urteil__note[aria-checked='true'] {
    color: var(--wr-ink);
    background: var(--wr-bernstein);
    border-color: var(--wr-ink);
}

/* Tinte auf Bernstein: 8,40:1. Derselbe Stern, nur andersherum. */
.urteil__note[aria-checked='true'] svg {
    fill: var(--wr-ink);
    stroke: var(--wr-ink);
}

.urteil__note span {
    font-family: var(--wr-font-mono);
    font-size: 0.7rem;
}

.urteil__wort {
    margin: 0;
    font-family: var(--wr-font-letter);
    font-size: 1.1rem;
    color: var(--wr-bernstein);
}

/* Ein Haken, ein Feld, ein Zweck: genau eine Nachricht, wenn der nächste Fall
   steht. Die Adresse ist das einzige personenbezogene Feld des Projekts. */
.urteil__haken {
    display: flex;
    align-items: center;
    gap: var(--wr-gap-2);
    min-height: 44px;
    font-size: 0.8rem;
    color: var(--wr-paper-dim);
}

.urteil__haken input {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.urteil__quittung {
    margin: 0;
    font-size: 0.78rem;
    color: var(--wr-phosphor);
}

/*
 * Das Zitatfeld hinter dem Haken – gebaut wie `.urteil__adresse`, und zwar
 * absichtlich gleich: Beide hängen an einer Einwilligung, beide erscheinen
 * erst mit ihrem Haken, und zwei verschieden gebaute Felder unter zwei gleich
 * gebauten Haken sähen nach einem Fehler aus.
 */
.urteil__stimme {
    display: grid;
    gap: var(--wr-gap-2);
    width: min(100%, 30rem);
}

/*
 * DIE QUITTUNGSKARTE.
 *
 * Dieselbe Bauform wie der Bogen, nur mit einer Oberkante: Der Bogen steht
 * ohne, die Quittung mit – der Unterschied zwischen „hier ist etwas zu tun"
 * und „erledigt". Er ist nicht die einzige Auskunft: Darüber steht der Satz,
 * der es sagt.
 *
 * `justify-items: start` der Basisregel gilt weiter; die Karte richtet ihre
 * Sätze deshalb nicht über die volle Breite aus, sondern an ihrem Anfang –
 * wie der Bogen darunter.
 */
.urteil--dank {
    border-top: var(--wr-border-fat) solid var(--wr-phosphor);
}

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

.urteil__danksatz {
    margin: 0;
    font-family: var(--wr-font-doc);
    color: var(--wr-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(--wr-mass);
    margin: var(--wr-gap-2) 0 0;
    padding-top: var(--wr-gap-3);
    border-top: var(--wr-border) solid var(--wr-ink-3);
    font-family: var(--wr-font-doc);
    color: var(--wr-paper);
}

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

.rezension,
.anzeige {
    display: grid;
    gap: var(--wr-gap-2);
    justify-items: start;
    padding: var(--wr-gap-3);
    border: 1px dashed var(--wr-ink-3);
}

.anzeige__marke,
.anzeige__ziel {
    font-size: 0.7rem;
    color: var(--wr-bernstein);
}

.anzeige__kopf {
    font-size: 1.1rem;
}

.anzeige__text,
.anzeige__schluss {
    max-width: var(--wr-mass);
    margin: 0;
    color: var(--wr-paper-dim);
}

.ausruester {
    display: grid;
    gap: 0.1rem;
    padding: var(--wr-gap-2);
    font-family: var(--wr-font-mono);
    font-size: 0.76rem;
    color: var(--wr-paper-dim);
    border-top: 1px solid var(--wr-ink-3);
}

.ausruester__rolle,
.ausruester__ort {
    font-size: 0.7rem;
    color: var(--wr-stahl);
}

.ausruester__name {
    font-size: 0.95rem;
    color: var(--wr-paper);
}

/*
 * 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 Flex statt als Grid
 * und mit Breitendeckel), und über ihr klebte am Fuß der Papierbahn 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']`).
 * Aus dem Druckblock weiter oben ist `.fuss` mitgefallen: `.haus-fuss` bringt
 * seine eigene `@media print`-Regel mit.
 */

/* ======================================================== DIE OVERLAYS ===== */

.rechtliches,
.einladung {
    width: min(100% - 2rem, 46rem);
    max-height: 88dvh;
    padding: var(--wr-gap-4);
    overflow-y: auto;
    color: var(--wr-paper);
    background: var(--wr-ink-2);
    border: var(--wr-border-fat) solid var(--wr-ink);
}

.rechtliches::backdrop,
.einladung::backdrop {
    background: rgba(13, 18, 20, 0.85);
}

/*
 * Der Schliesser ist eine Tippfläche in BEIDE Richtungen. In Fall 01 stand er
 * jahrelang auf fünfunddreissig Pixeln, weil kein Lauf das Overlay je
 * aufgemacht hat: Was zugeklappt ist, misst null mal null.
 */
.rechtliches__zu,
.einladung__zu {
    float: right;
    min-height: 44px;
    min-width: 44px;
    margin: calc(var(--wr-gap-2) * -1) calc(var(--wr-gap-2) * -1) 0 0;
    font-family: var(--wr-font-amt);
    font-size: 1.1rem;
    color: var(--wr-paper-dim);
    background: transparent;
    border: 2px solid var(--wr-ink-3);
    cursor: pointer;
}

.rechtliches__stempel,
.einladung__marke {
    font-size: 0.7rem;
    color: var(--wr-bernstein);
}

.rechtliches__hinweis {
    max-width: var(--wr-mass);
    font-size: 0.85rem;
    color: var(--wr-paper-dim);
}

.rechtliches h3 {
    margin-top: var(--wr-gap-3);
}

.einladung__kopf {
    display: grid;
    gap: var(--wr-gap-1);
    margin-bottom: var(--wr-gap-3);
}

.einladung__titel {
    font-size: 1.4rem;
}

.einladung__vorspann {
    max-width: var(--wr-mass);
    margin: 0;
    color: var(--wr-paper-dim);
}

/*
 * DIE LUPE HATTE NICHTS ZU VERGROESSERN.
 *
 * `js/lobby.js` setzt `data-zoom` seit jeher, und in diesem Zimmer stand keine
 * einzige Regel dazu: Das Bild lag ohne Hoehendeckel da, also war es schon
 * gross, also tat der Knopf nichts. Tot war er nur fuer das Auge —
 * `dev/dev.ps1 mobil` klickt ihn in jedem Haus und mass danach denselben
 * Schirm wie davor, gruen.
 *
 * Die Kante ist `min-width: 46rem` wie drueben (hardcover/css/lobby.css:1872).
 * Zwei Zimmer, die an verschiedenen Breiten umschlagen, sind ein Zimmer zu viel.
 */
.einladung__bild {
    max-height: 32dvh;
    margin: 0 auto var(--wr-gap-3);
}

@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;
}

.einladung__legende,
.einladung__fuss {
    margin: var(--wr-gap-1) 0 0;
    font-family: var(--wr-font-mono);
    font-size: 0.72rem;
    color: var(--wr-paper-dim);
}

/*
 * DIE LUPE IST EIN KNOPF, und zwar der einzige des Wurfzettels, der etwas am
 * Zettel selbst tut: Sie schaltet `data-zoom` am Dialog um.
 *
 * Hier stand ein Block, der sie als Bildausschnitt gestaltete — volle Breite,
 * 21/9, der Comic als Hintergrund, dazu `pointer-events: none`. Das war die
 * Beschreibung eines anderen Gegenstands: Das Bild des Zettels ist das <img>
 * daneben (`.einladung__bild`), die Lupe ist das <button> darunter. Mit
 * abgeschalteten Zeigerereignissen war sie für JEDEN Besucher tot, nicht nur
 * für den Lauf — der Klick ging durch sie hindurch an den Dialog.
 *
 * Form und Farbe bringt `.btn.btn--ghost` mit; hier steht nur der Abstand.
 * Gefunden von `dev/dev.ps1 mobil`, der als einziger Lauf den Zettel aufmacht
 * und darin klickt.
 */
.einladung__lupe {
    margin-bottom: var(--wr-gap-3);
}

/* Der fertige Satz auf Durchschlagpapier: Er wird kopiert, also steht er da,
   wie er ankommt. */
.einladung__durchschlag {
    padding: var(--wr-gap-3);
    color: var(--wr-ink);
    background: var(--wr-paper-durchschlag);
    border: var(--wr-border) solid var(--wr-ink);
}

.einladung__blatt,
.einladung__text {
    max-width: none;
    margin: 0;
    font-family: var(--wr-font-doc);
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    color: var(--wr-ink);
}

.einladung__wege {
    margin-top: var(--wr-gap-3);
}

/*
 * Die Kopier-Quittung ist eine Live-Region und darf deshalb NIE ausgeblendet
 * werden: Eine Textänderung in einem versteckten Element sagt kein Screenreader
 * an – und in Fall 01 blieb dabei einmal eine Zeile stehen, die sie beim Öffnen
 * wieder unsichtbar machte. Sie steht leer da und füllt sich.
 */
.einladung__quittung {
    min-height: 1.4em;
    margin: var(--wr-gap-2) 0 0;
    font-size: 0.75rem;
    color: var(--wr-phosphor);
}

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

/*
 * 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.
 *
 * Und es wird SCHWARZ AUF PAPIER gedruckt – als Regel, nicht als Farbliste.
 * Eine Aufzählung ist etwas, das jemand pflegen muss, und die erste Prüfung in
 * Fall 01 fand vier vergessene Stellen, darunter Kennzahlen, die schwarz auf
 * schwarz standen. `!important` ist hier richtig und nirgends sonst.
 */
@media print {
    .view[hidden],
    .toast,
    .rechtliches,
    .einladung,
    .controls,
    .druckleiste,
    .register,
    .urteil,
    .teaser,
    .rezension,
    .spende {
        display: none !important;
    }

    .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 {
        color: #000;
        background: #fff;
    }

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

    /* Ein Vorgang bekommt einen Bogen, seine Anlage den nächsten. */
    .taeterakte,
    .gabelungen {
        break-inside: avoid;
    }

    .extrablatt {
        break-after: page;
    }
}

/* ==========================================================================
   DER PLATTFORMKOPF STEHT NICHT MEHR HIER

   Er war inline getippt — Leiste, Marke, Reihenzeile, drei Bereiche,
   Raumcodeknopf, Glasrückfall und die gerechnete Umbruchstelle —, und drüben
   in Fall 01 stand dieselbe Leiste ein zweites Mal, nach Normalisierung der
   Tokenpräfixe bis auf drei Zeilen zeichengleich. Sie steht jetzt in
   `shared/haus/haus.css` (`.haus-kopf`), dieselbe wie im Foyer und mit
   eigenen `--haus-*`-Tokens statt geerbter `--wr-*`: Ein geerbter Token
   färbte den Rahmen in jedem Zimmer anders, und genau dagegen ist er gebaut.

   WAS HIER BLEIBT, IST DIE ZEILE DARUNTER. `scroll-padding-top` gehört dem
   Dokument und nicht dem Bauteil; ein Stilblatt, das in drei Häusern liegt,
   kann es für deren `html` nicht setzen, ohne über seine eigene Grenze zu
   greifen.
   ========================================================================== */

/*
 * WER ZU EINEM ANKER SPRINGT ODER SICH RÜCKWÄRTS DURCHTABBT, LANDET UNTER DER
 * KLEBENDEN LEISTE — es sei denn, das Dokument weiss, wie hoch sie ist.
 * Gemessen auf 375 px: Shift+Tab auf „Hinterzimmer eröffnen" legte den
 * fokussierten Knopf vollständig hinter die Leiste. Vorwärts fiel es nicht auf,
 * weil der Browser dort an die UNTERkante scrollt.
 *
 * Der Wert ist absichtlich grosszügiger als die Leiste selbst (67 px auf dem
 * Schreibtisch, 106 auf dem Telefon): Er muss den zweizeiligen Fall decken.
 * Dieselbe Zeile steht im Foyer, aus demselben Grund.
 */
html {
    scroll-padding-top: 7.5rem;
}

/* ==========================================================================
   DIE REGISTRATUR — die Aktendeckel der Reihe über dem Ausdruck
   ========================================================================== */

/*
 * Genau ein Deckel liegt offen, alle anderen sind Türen — gebaut in
 * shared/haus/haus.php aus der Tabelle `spiele`. Welcher Fall wie weit ist,
 * steht als WORT auf dem Deckel und nicht nur als Farbe: „spielbar" gegen
 * „in Vorbereitung", und der Stand kommt aus `spiele.status` statt aus einer
 * getippten Zeile.
 */
/*
 * DIE REITER SITZEN AUF DEM AUSDRUCK, SIE SCHWEBEN NICHT DARÜBER.
 *
 * Hier stand ein `margin-bottom` von 1,15 rem, und damit lag zwischen den
 * Deckeln und ihrem Blatt ein Streifen Nacht: drei kleine Kästen über einer
 * Papierbahn, zu der sie sichtbar nicht gehörten. Ein Registraturschrank hat
 * seine Reiter AN der Akte. Dieselbe Null wie in zeitung.css:755.
 */
.registratur {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--wr-gap-1);
    margin-bottom: 0;
}

/*
 * EIN KARTEIREITER, KEIN KNOPF.
 *
 * Hier stand `.btn.btn--ghost` davor, und der Knopf des Hauses brachte zwei
 * Dinge mit, die ein Aktendeckel nicht haben darf: Versalien über der ganzen
 * Beschriftung und einen `transform`-Sprung von drei Pixeln beim Drücken
 * (`.btn:active`, comic.css). Ein Reiter, der sich beim Anfassen bewegt, ist
 * ein Knopf — und das Blatt darunter spränge bei jedem Wechsel mit.
 *
 * EINEN SCHLAGSCHATTEN GAB ES NIE. Hier stand er als dritter Grund, und das
 * war schlicht falsch: `.btn--ghost` setzt in comic.css ausdrücklich
 * `box-shadow: none`. Ein Kommentar, der einen Grund erfindet, kostet den
 * Nächsten die Suche nach einer Regel, die es nicht gibt.
 *
 * Was `.btn` mitbrachte und hier gebraucht wird, steht deshalb jetzt in dieser
 * Regel: das Daumenmaß in BEIDE Richtungen, der Zeiger (ein `<button>` bekommt
 * vom Browser `cursor: default`) und `text-decoration: none` — der erste
 * Deckel ist ein `<a>` und käme sonst unterstrichen.
 */
.registratur__akte {
    /*
     * GLEICH BREITE DECKEL, UND SIE WACHSEN MIT.
     *
     * Hier stand gar keine Basis: Jeder Reiter war so breit wie sein längstes
     * Wort, und drei verschieden breite Kästchen standen als Treppe über dem
     * Blatt. `flex: 1 1 9rem` gibt allen dieselbe Breite und zugleich eine
     * Untergrenze, unter der sie lieber umbrechen als schrumpfen — auf 375 px
     * fällt der dritte in die zweite Reihe und bleibt weit über 44 px breit.
     *
     * `min-width: 0` hält das Versprechen, das die Basis gibt: Ohne die Zeile
     * gilt `min-width: auto`, also die Breite des längsten Wortes, und
     * „In Vorbereitung" ist länger als alles im ersten Deckel.
     */
    flex: 1 1 9rem;
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.1rem;
    /* Ein Aktendeckel ist keine Schaltfläche: linksbündig, Text über drei Zeilen. */
    text-align: left;
    padding: var(--wr-gap-2) var(--wr-gap-2) calc(var(--wr-gap-2) + 2px);
    min-height: 44px;
    /*
     * DER OFFENE DECKEL STEHT HÖHER, und das ist die eigentliche Auskunft.
     *
     * Farbe ist in diesem Haus nie der einzige Informationsträger. Welcher
     * Vorgang aufliegt, sagte hier allein die Kante in Phosphorgrün — für jeden
     * mit einer Rot-Grün-Schwäche und auf jedem ausgedruckten Schirm also gar
     * nichts. Acht Pixel reichen; sie stehen als Vorschub am geschlossenen
     * Deckel und werden am offenen zurückgenommen, so wie in jedem
     * Registraturschrank, aus dem eine Akte herausgezogen ist. Die Tippfläche
     * bleibt darunter unverändert bei 44.
     */
    margin-top: 8px;
    color: var(--wr-paper-dim);
    text-decoration: none;
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
    /*
     * KEINE UNTERKANTE. Ohne diese Zeile lägen zwei Kanten aufeinander — die
     * drei Pixel des Deckels und die fünf des Ausdrucks darunter —, und der
     * Reiter wäre eine geschlossene Box neben dem Blatt statt einer
     * angesetzten Lasche.
     */
    border-bottom: 0;
    cursor: pointer;
    transition: background-color var(--wr-schnell), color var(--wr-schnell);
}

.registratur__akte:hover {
    color: var(--wr-paper);
}

/*
 * DER OFFENE DECKEL NIMMT DEN TON SEINES BLATTES AN.
 *
 * Das ist die Regel aus CLAUDE.md Abschnitt 7 — und sie war hier nicht
 * eingehalten: Unter diesem Deckel liegt eine PAPIERBAHN (`.ausdruck` steht auf
 * `--wr-paper`), der Deckel selbst blieb aber Blech und bekam nur eine grüne
 * Kante. Ein Reiter in einer anderen Farbe als seine Akte ist kein
 * herausgezogener Reiter, sondern ein markierter Knopf.
 *
 * DIE PHOSPHORKANTE IST NICHT WEG, SIE IST GEWANDERT: Sie liegt jetzt als
 * Oberkante auf dem offenen Deckel, wo sie gegen Papier trägt — `--wr-phosphor-tief`
 * ist das dunkle Grün dieses Zimmers und steht auf `--wr-paper` bei 10,2:1.
 * Das reine Phosphorgrün wäre dort ein heller Strich auf hellem Papier.
 */
.registratur__akte[aria-pressed='true'] {
    margin-top: 0;
    padding-top: calc(var(--wr-gap-2) - 3px);
    border-color: var(--wr-ink);
    border-top: var(--wr-border-fat) solid var(--wr-phosphor-tief);
    border-bottom: 0;
    background: var(--wr-paper);
    color: var(--wr-ink);
}

/*
 * DER PFEIL SAGT, DASS ES HIER HINAUSGEHT. Er steht als SVG-Pfad da und nicht
 * als Zeichen „↗": Das Glyph liegt in keiner Kanonschrift dieses Zimmers, und
 * der Browser holte es sich lautlos aus einer fremden — derselbe Fehler wie
 * bei den fehlenden Umlauten.
 *
 * (Warum der erste Deckel überhaupt eine Tür ist, steht bei
 * `.registratur__akte--tuer` weiter unten und nicht hier. Dieser Block stand
 * eine Regel zu früh und erklärte die Größe eines SVG mit `aria-pressed`.)
 */
.registratur__pfeil {
    /* In em, damit er mit der Nummer wächst — und nicht kleiner als 9 px: Die
       Nummer steht in 0.64rem, und 0.72em davon waren sieben Pixel Strichbild. */
    width: 0.95em;
    height: 0.95em;
    /* Auf der Grundlinie statt darüber: Die Nummer steht in Versalien, und ein
       Pfeil auf `vertical-align: middle` hinge in ihrer Mitte statt an ihrem
       Fuß. */
    vertical-align: baseline;
}

/*
 * ZWEI BAUFORMEN, UND MEHR GIBT ES NICHT: das offene Blatt und die Tür.
 *
 * Hier stand daneben `.registratur__akte--vorgang` für einen Deckel, der auf
 * eine lokale Nacherzählung eines fremden Falls umblendete. Den gibt es nicht
 * mehr — ein Fall ohne eigenes Zimmer führt jetzt auf seine Akte im Foyer, und
 * damit ist auch er eine Tür. Was ihn vom spielbaren Nachbarn unterscheidet,
 * ist sein Stand als Wort und nicht seine Kante.
 */
/* Die Oberkante des geschlossenen Deckels ist heller als seine Seiten — so
   sieht ein Reiter aus, der noch im Schrank steckt. Der offene setzt seine
   eigene (Phosphor auf Papier) und ist deshalb hier nicht gemeint. */
.registratur__akte--tuer,
.registratur__akte--blatt {
    border-top-color: var(--wr-paper-aged);
}

/*
 * `--wr-stahl-blech` UND NICHT `--wr-stahl`, und das ist eine nachgerechnete
 * Zahl: Der dunklere Ton trägt als SCHRIFT auf dem Blech des geschlossenen
 * Deckels nur 3,34:1 — bei elf Pixeln Höhe, in Versalien, gesperrt. Genau
 * dafür liegt die Blechfassung in tokens.css:46 bereit; benutzt hat sie hier
 * niemand. Derselbe Befund und dieselbe Zeile in zeitung.css:844.
 */
.registratur__nummer {
    font-family: var(--wr-font-amt);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--wr-stahl-blech);
}

/* Der Titel wächst mit dem Schirm, so wie drüben: Auf 375 px bleibt er
   lesbar, auf der Aktenbreite ist er ein Reiter und kein Kleingedrucktes. */
.registratur__titel {
    font-family: var(--wr-font-display);
    font-size: clamp(0.95rem, 3.4vw, 1.3rem);
    line-height: 1.1;
    letter-spacing: var(--wr-tracking-display);
    overflow-wrap: anywhere;
    hyphens: auto;
}

.registratur__stand {
    font-family: var(--wr-font-amt);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wr-stahl-blech);
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Auf Papier gilt die Papierfassung — der Blechton läge dort bei 2,4:1. */
.registratur__akte[aria-pressed='true'] .registratur__nummer,
.registratur__akte[aria-pressed='true'] .registratur__stand {
    color: var(--wr-stahl-papier);
}

/* ==========================================================================
   DIE FALLAKTE UND DER AUSRÜSTER STEHEN NICHT MEHR HIER

   `.fallakte` kleidete den Aktendeckel von Fall 03 — Marke, Titel, Prosa,
   Randvermerk und ein Adressfeld —, und den gibt es in diesem Dokument nicht
   mehr: Fall 03 hat seine eine Sicht unter /fall/sendeschluss im Foyer. Der
   Deckel in der Registratur ist eine Tür dorthin.

   `.impressum` kleidete den Anzeigenteil am Fuß der Papierbahn, die dritte
   Nennung derselben Werkstatt auf derselben Seite. Sie steht jetzt einmal, im
   Fuß des Hauses. Der Klassenname war hier ohnehin zweimal vergeben — einmal
   im Satzteil, einmal hier unten — und meinte beide Male dasselbe Element.
   ========================================================================== */