/*
 * Das Bockenheimer Tageblatt – die Startseite.
 *
 * Sie ist die einzige Fläche dieses Spiels, die HELL ist, und das ist kein
 * Bruch mit der Bibel, sondern ihre Anwendung: Der Grundton dieses Projekts
 * heißt „vergilbtes Papier" und steht als --bm-paper in tokens.css. Überall
 * sonst liegt er als Schrift auf Druckerschwärze; hier liegt er als Papier
 * unter der Schrift, weil hier eine Zeitung liegt.
 *
 * Es gibt weiter genau einen Modus, und der ist Nacht: Sobald der Coup
 * beginnt, ist die Seite wieder schwarz. Was hier hell ist, ist ein
 * GEGENSTAND in der Nacht – ein Blatt, das jemand auf den Tisch gelegt hat.
 *
 * Alle Verbote gelten unverändert: kein Radius, kein Weichzeichner, keine
 * Verläufe als Fläche (Halbton und Korn sind erlaubt und ausdrücklich
 * erwünscht), kein Glow, Übergänge linear und höchstens 120 ms.
 */

/* ==========================================================================
   DAS BLATT
   ========================================================================== */

/*
 * Die Papierfläche liegt auf der Start-Ansicht und NUR auf ihr.
 *
 * `.view[data-view='start']` ist die Grenze: Lobby, Coup, Pause und Abrechnung
 * behalten ihre Nacht. Ohne diese Bindung hätte ein Zeitungston auf der
 * Startseite die Station im Prolog mit aufgehellt – dieselbe Datei, dieselbe
 * Kaskade.
 */
/*
 * DIE AKTE NUTZT DIE HAUSBREITE, DAS SPIEL BLEIBT BEI DER BÜHNENBREITE.
 *
 * `.shell` deckelt alle fünf Ansichten auf `--bm-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 — und es gibt bereits Präzedenz in
 * lobby.css. 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 Zeitungskante unter
 * der Wortmarke der Kopfleiste steht oder 36 Pixel daneben — zwei Fassungen
 * derselben Zahl liefen beim nächsten Umbau auseinander.
 */
html {
    /*
     * WER SICH RUECKWAERTS DURCHTABBT, LANDET SONST HINTER DER LEISTE.
     *
     * Ohne diese Zeile steht der fokussierte Knopf vollstaendig unter dem
     * klebenden Kopf — auf 375 px messbar am Hauptknopf der Startseite.
     * Vorwaerts faellt es nicht auf, weil der Browser dort an die UNTERkante
     * scrollt. 7.5rem sind 120 Pixel und decken die zweizeilige Fassung der
     * Leiste (106 px). Dieselbe Zeile steht im Foyer und im Nachbarzimmer.
     *
     * SIE IST BEIM UMZUG DES KOPFES NACH shared/ FAST VERSCHWUNDEN: Sie stand
     * im .hausleiste-Block und faellt mit ihm — sie gehoert aber dem DOKUMENT
     * und nicht dem Bauteil, und ein Stilblatt in shared/ darf keine
     * Elementregel des Gastgebers setzen.
     */
    scroll-padding-top: 7.5rem;
}

.shell:has(> .view[data-view='start']:not([hidden])) {
    width: min(100%, var(--bm-akte));
    padding-inline: var(--haus-luft);
}

.view[data-view='start'] {
    width: 100%;
    margin-inline: auto;
}

.tageblatt {
    padding: var(--bm-gap-4) var(--bm-gap-3);
    color: var(--bm-ink);
    background-color: var(--bm-paper);
    /*
     * Korn und Halbton, beides als Textur und nicht als Fläche – genau die
     * Ausnahme, die die Bibel für Verläufe vorsieht. Das Raster liegt schräg,
     * weil ein Rasterwinkel von 45 Grad das ist, was eine Zeitung von einem
     * Karopapier unterscheidet.
     *
     * BEIDE IN DER LEICHTEN FASSUNG, und das ist der Unterschied zwischen
     * einem Blatt, auf dem etwas steht, und einer Fläche mit Struktur. Über
     * den vollen Texturen hielt --bm-ink im Spaltensatz nur noch 10.34:1;
     * jetzt sind es 12.72:1. Warum der Ton heller wird und das Raster nicht
     * schrumpft, steht bei den Tokens in tokens.css.
     */
    background-image:
        var(--bm-grain-leicht),
        repeating-linear-gradient(
            45deg,
            var(--bm-halbton-leicht) 0 1px,
            transparent 1px var(--bm-halftone-size)
        );
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

/*
 * Auf Papier kehrt sich alles um, was base.css für die Nacht setzt.
 *
 * Gesammelt an EINER Stelle statt bei jedem Element: Was auf dieser Seite
 * dunkel geschrieben werden muss, ist nicht die Ausnahme, sondern die Regel.
 */
.tageblatt h1,
.tageblatt h2,
.tageblatt h3,
.tageblatt p,
.tageblatt li,
.tageblatt strong,
.tageblatt em,
.tageblatt cite,
.tageblatt label,
.tageblatt blockquote {
    color: var(--bm-ink);
}

/* Der Fehlregister-Schatten der Nacht hat auf Zeitungspapier nichts zu suchen. */
.tageblatt h1,
.tageblatt h2 {
    text-shadow: none;
}

.tageblatt .section-note,
.tageblatt .start__note {
    color: var(--bm-ink-notiz);
}

/* ==========================================================================
   DER KOPF
   ========================================================================== */

.tageblatt__kopf {
    padding-bottom: var(--bm-gap-2);
    margin-bottom: var(--bm-gap-3);
    text-align: center;
    border-bottom: var(--bm-border) solid var(--bm-ink);
}

/*
 * Der Zeitungstitel. Alfa Slab One ist die schwerste Schrift des Kanons und
 * genau das, was ein Kopf von 1950 hergibt – eine fette Egyptienne über die
 * volle Breite. Gesperrt wird nicht: Ein Zeitungskopf steht eng.
 */
.tageblatt__titel {
    margin: var(--bm-gap-1) 0;
    font-family: var(--bm-font-display);
    font-size: clamp(1.6rem, 0.6rem + 5.2vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    hyphens: auto;
    overflow-wrap: break-word;
}

/*
 * `max-width: none` hebt das Zeilenmaß aus base.css auf, und hier muss es weg:
 * Der Zeitungskopf ist eine LEISTE über die volle Breite, kein Fließtext. Mit
 * dem geerbten 75ch-Maß endete er nach zwei Dritteln, die drei Angaben
 * drängten sich links zusammen, und „zentriert" zentrierte innerhalb eines
 * Kastens, den niemand sah.
 */
.tageblatt__zeile {
    max-width: none;
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 0.7rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
}

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

/*
 * DIE GATTUNGSZEILE unter dem Kopf.
 *
 * Sie sagt in einer Zeile, was das hier ist – die einzige Stelle des Blattes,
 * die aus der Fiktion heraustritt. Deshalb steht sie in der Amtsschrift und
 * nicht in der Schreibmaschine: Was auf einem Zeitungskopf in Versalien und
 * gesperrt steht, liest sich als Untertitel des Blattes und nicht als Satz
 * eines Redakteurs.
 *
 * Die Linien darüber und darunter sind Haarlinien und keine Kästen. Eine
 * Zeitung trennt ihren Kopf mit einem Strich, und der ist dünn.
 *
 * `text-wrap: balance` statt eines Umbruchs von Hand: Auf 375 px läuft die
 * Zeile über drei Zeilen, und die sollen gleich lang sein statt zwei volle und
 * ein einzelnes Wort.
 */
.tageblatt__gattung {
    max-width: none;
    margin: var(--bm-gap-2) 0 0;
    padding: var(--bm-gap-1) 0;
    font-family: var(--bm-font-amt);
    font-size: clamp(0.66rem, 0.55rem + 0.5vw, 0.86rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-wrap: balance;
    border-block: 1px solid var(--bm-ink);
}

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

/* ==========================================================================
   DER AUFMACHER
   ========================================================================== */

.aufmacher {
    display: grid;
    gap: var(--bm-gap-3);
    padding-bottom: var(--bm-gap-3);
    border-bottom: var(--bm-border) solid var(--bm-ink);
}

/*
 * `min-width: 0` — DIE RASTERFALLE, und sie hat diese Seite auf dem Telefon
 * zerrissen.
 *
 * Ein Rasterfeld ist von Haus aus mindestens so breit wie sein längstes
 * unteilbares Wort. „Fünfunddreißig" in einer fetten Egyptienne misst auf einem
 * 375-Pixel-Schirm mehr als dreihundert Pixel, und das Feld wuchs mit: Die
 * ganze Zeitung ragte fünfunddreißig Pixel über den Rand, und der Leser
 * scrollte seitwärts an einer Schlagzeile entlang.
 *
 * Der Umbruch dazu steht an der Schlagzeile selbst — ein Wort, das auch dann
 * nicht passt, wird getrennt statt abgeschnitten.
 */
.aufmacher__text {
    min-width: 0;
}

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

/*
 * DIE SCHLAGZEILE IST KEIN h1.
 *
 * Der Kopf der Zeitung ist die Überschrift dieser Seite; die Schlagzeile ist
 * die Überschrift des Artikels. Sie ist trotzdem das Größte auf dem Blatt –
 * so, wie eine Zeitung gebaut ist.
 */
.aufmacher__schlagzeile {
    margin: 0;
    font-family: var(--bm-font-display);
    font-size: clamp(1.55rem, 0.7rem + 4vw, 3.6rem);
    line-height: 1.02;
    hyphens: auto;
    overflow-wrap: break-word;
}

.aufmacher__unterzeile {
    margin: var(--bm-gap-2) 0 0;
    max-width: var(--bm-mass);
    font-family: var(--bm-font-doc);
    font-size: 1.05rem;
}

.aufmacher__zeile {
    margin: var(--bm-gap-2) 0 0;
    font-family: var(--bm-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/*
 * Das Titelbild liegt im Blatt, nicht darüber: harte Kante, kein Schatten,
 * kein Rahmen aus Licht. Die Bildunterschrift steht darunter wie in jeder
 * Zeitung — nicht darin, wie im Comic.
 */
.aufmacher__bild {
    position: relative;
    margin: 0;
}

/*
 * Der Rahmen liegt am BILD und nicht an der figure: Die Bildunterschrift steht
 * darunter und außerhalb, wie in jeder Zeitung — eingerahmt ist der Druck.
 */
.aufmacher__bild .art {
    border: var(--bm-border) solid var(--bm-ink);
    box-shadow: none;
}

.aufmacher__legende {
    margin-top: var(--bm-gap-1);
    font-family: var(--bm-font-doc);
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--bm-ink);
}

/*
 * DAS GROBE RASTER ÜBER DEM TITELBILD.
 *
 * Eine Zeitung von 1950 druckt kein Foto, sie druckt einen Autotypie-Raster:
 * Punkte auf Papier, grob genug, dass man sie aus einem halben Meter sieht.
 * Ohne ihn lag hier ein sauberes Bild aus dem 21. Jahrhundert mitten auf einem
 * Blatt aus Blei und Bleistift — und das war die einzige Stelle des Blattes,
 * die nicht gedruckt aussah.
 *
 * `.art::before` bringt schon ein Raster mit, aber nur als ERSATZFLÄCHE: Es
 * verschwindet, sobald das Bild geladen ist (comic.css). Dieses hier bleibt,
 * liegt über dem Bild und ist doppelt so grob.
 *
 * Es ist ein Punktraster und keine Fläche — genau die Ausnahme, die die Bibel
 * für Verläufe vorsieht. Kein Weichzeichner, keine Aufhellung, kein Schleier:
 * Was hier liegt, sind Rasterpunkte in Druckerschwärze, sonst nichts.
 */
.aufmacher__bild .art::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, var(--bm-halbton-bild) 1.1px, transparent 1.6px);
    background-size: calc(var(--bm-halftone-size) * 2) calc(var(--bm-halftone-size) * 2);
    pointer-events: none;
}

@media (min-width: 52rem) {
    .aufmacher {
        grid-template-columns: 1.15fr 1fr;
        align-items: start;
    }
}

/* ==========================================================================
   DER SPALTENSATZ
   ========================================================================== */

.tageblatt__satz {
    padding: var(--bm-gap-3) 0;
}

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

.ressort__titel {
    margin: 0 0 var(--bm-gap-1);
    font-family: var(--bm-font-display);
    font-size: 1.5rem;
}

.ressort__vorspann {
    margin: 0 0 var(--bm-gap-2);
    font-family: var(--bm-font-amt);
    font-weight: 600;
    font-size: 0.95rem;
}

/*
 * DAS ZEILENMASS WIRD HIER AUFGEHOBEN, und zwar mit Absicht.
 *
 * base.css gibt jedem Absatz max-width: var(--bm-mass) – richtig für eine
 * Textseite, falsch in einer Spalte, die selbst schon schmal ist: Der Absatz
 * hörte dann vor dem Spaltenrand auf und ließ einen Streifen Papier stehen.
 */
.ressort p {
    max-width: none;
    margin: 0 0 var(--bm-gap-2);
    font-family: var(--bm-font-doc);
    font-size: 0.92rem;
    line-height: 1.55;
    hyphens: auto;
}

/*
 * Der erste Absatz eines Ressorts beginnt ohne Einzug, jeder weitere mit.
 *
 * DIE AUSNAHME STEHT HINTER DER REGEL UND WIEGT SCHWERER, und beides ist
 * nötig: Sie stand einmal davor und war `.ressort__vorspann + p` — eine Klasse
 * und ein Typ. `.ressort p + p` ist eine Klasse und ZWEI Typen und schlug sie
 * damit jedes Mal. Herausgekommen war das genaue Gegenteil des Kommentars: Der
 * Textanfang wurde eingezogen, und der Absatz nach dem Paragrafenzitat, dessen
 * Vorgänger kein Absatz ist, blieb bündig.
 */
.ressort p + p {
    text-indent: 1.2em;
}

.ressort .ressort__vorspann + p {
    text-indent: 0;
}

/*
 * Die Schritte des Auftrags hängen alle gleich: Ziffer bündig, Umbruch unter
 * dem Text. Die Regel braucht das `p` im Selektor und muss HINTER der
 * Vorspann-Ausnahme stehen – sonst schlägt die den ersten Schritt, und nur er
 * stünde wieder anders da.
 */
.ressort p.ressort__schritt {
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.ressort__paragraf {
    margin: var(--bm-gap-3) 0;
    padding: var(--bm-gap-2);
    font-family: var(--bm-font-doc);
    border-block: var(--bm-border) solid var(--bm-ink);
}

.ressort__paragraf em {
    font-style: normal;
    /* Der Rotstift des Lektorats: ein Signal auf Papier, kein Lesetext. */
    color: var(--bm-signal-deep);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

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

.ressort__notiz {
    padding: var(--bm-gap-2);
    border: 1px dashed var(--bm-ink);
}

/*
 * DREI SPALTEN, ABER ERST WENN SIE PASSEN.
 *
 * Ein Zeitungsumbruch mit fester Spaltenzahl wäre auf 375 px ein Streifen von
 * hundert Pixeln. `columns` mit einer Mindestbreite entscheidet selbst, wie
 * viele Spalten hineinpassen — auf dem Telefon eine, auf dem Schreibtisch drei.
 */
@media (min-width: 46rem) {
    .tageblatt__satz {
        columns: 3 19rem;
        column-gap: var(--bm-gap-4);
        column-rule: 1px solid var(--bm-ink);
    }

    /* Ein Ressort, das mitten in der Spalte reißt, ist zwei halbe Artikel. */
    .ressort {
        break-inside: avoid;
    }

    .ressort + .ressort {
        border-top: none;
        padding-top: 0;
    }
}

/* ==========================================================================
   DER VORDRUCK — die Tür ins Hinterzimmer
   ========================================================================== */

/*
 * Ein amtlicher Durchschlag, mitten in die Zeitung geheftet.
 *
 * Er ist der einzige Gegenstand auf diesem Blatt, den man ANFASST, und
 * deshalb sieht er anders aus als alles daneben: rosa Durchschlagpapier,
 * Formularnummer im Kopf, doppelte Kante. Wer eine Zeitung liest und plötzlich
 * ein Formular findet, weiß ohne ein Wort Erklärung, was er tun soll.
 */
.vordruck {
    display: grid;
    gap: var(--bm-gap-3);
    margin: var(--bm-gap-4) 0;
    padding: var(--bm-gap-3);
    background: var(--bm-paper-durchschlag);
    border: var(--bm-border-fat) double var(--bm-ink);
}

.vordruck__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);
    font-family: var(--bm-font-amt);
    font-size: 0.72rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    border-bottom: 1px solid var(--bm-ink);
}

/*
 * BEIDE HÄLFTEN SCHLIESSEN UNTEN BÜNDIG AB.
 *
 * Ein Formular mit zwei Feldern ist ein Formular mit zwei GLEICHEN Feldern —
 * sonst sieht es aus, als sei eines wichtiger. Hälfte B stand achtunddreißig
 * Pixel tiefer als A, weil unter ihrem Feld ein Hinweis hing; die beiden
 * Stempelknöpfe lagen dadurch auf zwei Grundlinien, und das fiel auf einem
 * Vordruck sofort auf.
 *
 * Der Hinweis ist gestrichen — fünf Zeichen sieht man dem Feld an, und der
 * Server nimmt Groß wie Klein. Damit die Knöpfe auch dann bündig bleiben, wenn
 * eine Überschrift einmal umbricht, ist jede Hälfte ein eigenes Raster: Was
 * oben steht, staffelt sich nach seiner Höhe, und der Knopf wird von einer
 * dehnbaren Zeile ans untere Ende gedrückt.
 */
.vordruck__haelfte {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--bm-gap-2);
}

.vordruck__haelfte h3 {
    margin: 0;
    font-family: var(--bm-font-amt);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/*
 * Die beiden Einleitungssätze sind verschieden lang, und auf mittlerer Breite
 * bricht der eine um und der andere nicht. Ohne Höhenmaß säßen die Felder dann
 * auf zwei Linien — mit ihm stehen sie nebeneinander, auch wenn darüber einmal
 * eine Zeile mehr steht.
 */
.vordruck__haelfte .start__note {
    margin: 0;
    align-self: start;
}

.vordruck__haelfte .field {
    align-self: start;
}

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

/*
 * Ein Feld auf einem Formular ist eine LINIE, auf die geschrieben wird – kein
 * Kasten. Deshalb liegt der Rahmen nur unten, und das Papier darin ist eine
 * Spur heller als der Vordruck.
 */
.vordruck input {
    width: 100%;
    /* Nicht anfassen: Ohne diese Zeile fallen beide Felder auf 41 px, und der
       Handytest misst jeden Griff gegen 44 × 44. */
    min-height: 48px;
    padding: var(--bm-gap-1) var(--bm-gap-2);
    font-family: var(--bm-font-mono);
    /*
     * ACHTZEHN PIXEL, UND ZWAR FÜR BEIDE.
     *
     * Das Codefeld trug einmal 1,9 rem und war damit dreißig Pixel hoch
     * gesetzt, das Namensfeld siebzehn. Ein Formular mit zwei Feldern ist
     * eines mit zwei GLEICHEN Feldern — sonst sieht es aus, als sei eines
     * wichtiger, und die beiden Stempelknöpfe darunter standen auf zwei
     * Grundlinien.
     *
     * Die Angabe steht HIER und nicht an `.code-input`: `.vordruck input`
     * schlägt die Klasse in der Spezifität, und ein font-size dort träfe nur
     * ein Feld. Absolut in Pixeln, weil ein Formularfeld ein Gegenstand ist
     * und kein Fließtext — die Wurzelgröße dieses Hauses ist ohnehin 16 px,
     * die clamp() an `body` ändert daran nichts.
     */
    font-size: 18px;
    color: var(--bm-ink);
    background: rgba(255, 255, 255, 0.42);
    border: 0;
    border-bottom: 2px solid var(--bm-ink);
    border-radius: 0;
}

.vordruck input::placeholder {
    color: var(--bm-ink-platzhalter);
}

/*
 * Die zwei Knöpfe des Vordrucks sind Stempel: schwarzes Blech auf Papier, mit
 * Druckpunkt. `.btn` bringt Form und Übergang schon mit (base.css); hier
 * dreht sich nur um, was auf Papier andersherum liegen muss.
 */
.vordruck .btn {
    width: 100%;
    min-height: 48px;
    color: var(--bm-paper);
    background: var(--bm-ink);
    border-color: var(--bm-ink);
}

.vordruck .btn--primary {
    color: var(--bm-paper);
    background: var(--bm-signal-deep);
    border-color: var(--bm-ink);
}

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

    .vordruck__kopf {
        grid-column: 1 / -1;
    }
}

/*
 * DIE ANWERBUNG. Der Weg zum Wurfzettel, unter dem Vordruck.
 *
 * Sie steht auf Papier, und deshalb dreht sich der Knopf hier um wie die
 * Stempel des Vordrucks darüber: `.btn--ghost` ist Rußfarbe auf durchsichtigem
 * Grund und wäre auf einem Zeitungsblatt unlesbar. Er bleibt trotzdem der
 * leisere von dreien — die beiden Stempel eröffnen und treten bei, dieser holt
 * nur die Leute dazu.
 */
.anwerbung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bm-gap-2) var(--bm-gap-3);
    margin: var(--bm-gap-3) 0 var(--bm-gap-4);
}

/*
 * 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 Zeitungsblatt, lauter
 * als der Stempel des Vordrucks. Ein Knopf auf Papier ist Kontur in
 * Druckerschwaerze, gleich an welcher Stelle des Blattes er steht.
 */
.anwerbung .btn,
.aufmacher__verweis .btn {
    color: var(--bm-ink);
    background: transparent;
    border-color: var(--bm-ink);
    box-shadow: var(--bm-shadow-sm);
}

.anwerbung .btn:hover:not(:disabled),
.aufmacher__verweis .btn:hover:not(:disabled) {
    color: var(--bm-paper);
    background: var(--bm-ink);
    border-color: var(--bm-ink);
    box-shadow: 4px 4px 0 var(--bm-ink);
    transform: translate(-1px, -1px);
}

/*
 * DER WEG IN DEN COMIC TRAEGT TINTE, DER IN DIE ANWERBUNG NUR SEINE KANTE.
 *
 * Die Papierregel 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(--bm-paper);
    background: var(--bm-ink);
}

.aufmacher__verweis .btn--primary:hover:not(:disabled) {
    color: var(--bm-paper);
    background: var(--bm-signal-deep);
    border-color: var(--bm-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(--bm-gap-3) 0 0;
}
.anwerbung__note {
    flex: 1 1 14rem;
    min-width: 0;
    font-family: var(--bm-font-doc);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bm-ink-notiz);
    hyphens: auto;
}

/* ==========================================================================
   FAHNDUNG UND BILDTEIL
   ========================================================================== */

/*
 * Die vier Crewkarten kommen aus js/lobby.js und tragen dort ihre eigenen
 * Klassen. Auf Papier kehren sie sich um: heller Grund, dunkle Schrift, und
 * die Rollenfarbe bleibt als Kante oben – sie ist die einzige Farbe, die eine
 * Fahndungskarte von der nächsten unterscheidet.
 */
.fahndung .crewkarte {
    background: rgba(255, 255, 255, 0.32);
    border-top-color: var(--karte-farbe, var(--bm-ink));
}

.fahndung .crewkarte strong,
.fahndung .crewkarte span,
.fahndung .crewkarte em {
    color: var(--bm-ink);
}

.fahndung .crewkarte__wappen {
    color: var(--bm-ink);
}

.bildteil__reihe {
    display: grid;
    gap: var(--bm-gap-2);
}

.bildteil__reihe .art {
    border: var(--bm-border) solid var(--bm-ink);
}

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

/* ==========================================================================
   DER ANZEIGENTEIL
   ========================================================================== */

/*
 * DER ANZEIGENTEIL IST GEFALLEN, und mit ihm sieben Regeln.
 *
 * `.impressum` war der Kasten am Fuß des Blattes: „Anzeige · Systemarchitektur
 * & Digitale Sonderbauten · Sascha Liesener". Seit der Fuß des HAUSES unter
 * jeder Ansicht steht und dieselbe Werkstatt zweimal führt — „Entwickelt von
 * Sascha Liesener" in der ersten Spalte, „Ausrüster & Webdesign" in der
 * dritten —, war er die dritte Nennung auf derselben Seite und die einzige,
 * die aussah, als klebte eine Anzeige über dem Fuß.
 */

/* ==========================================================================
   DIE REGISTRATUR — DREI DECKEL, EIN BLATT

   Drei Vorgänge stehen im Schrank, aber nur EINER liegt in diesem Dokument:
   das Bockenheimer Tageblatt. Die beiden anderen Deckel sind Türen auf die
   eine kanonische Sicht ihres Falls — der Ausdruck der Fernschreibstelle
   nebenan, die Akte von Fall 03 im Foyer.

   VORHER LAGEN SIE HIER ALS BLÄTTER, mit Marke, Titel und drei Absätzen Prosa,
   die Satz für Satz noch einmal in copy.js standen. Wer auf „Fall 02" griff,
   bekam eine Nacherzählung statt des Falls — und der Stand darauf war
   getippter Text, der über Monate behauptete, es gebe den Fall noch nicht.
   Beides steht jetzt in der Tabelle `spiele`.
   ========================================================================== */

/*
 * DIE KOPFLEISTE STEHT NICHT MEHR HIER.
 *
 * 275 Zeilen lagen an dieser Stelle, und dieselben 275 lagen im Nachbarzimmer
 * ein zweites Mal — nach Normalisierung der Tokenpräfixe bis auf DREI Zeilen
 * zeichengleich, inklusive der Kommentare und der darin gemessenen Zahlen. Das
 * Foyer führte eine dritte Fassung mit anderer Innenbreite, anderem
 * Umbruchpunkt und heller statt dunkler Unterkante.
 *
 * Sie steht jetzt in `shared/haus/haus.css` (`.haus-kopf`), wird von
 * `shared/haus/haus.php` gesetzt und liegt als bewachte Kopie unter
 * `haus/haus.css` neben dieser Datei. Wer an ihr etwas ändert, ändert es für
 * jedes Zimmer — und genau das war gewollt.
 */

/*
 * DER SCHRANK HAT DREI FÄCHER, UND AUF 375 PX PASSEN NICHT DREI IN EINE REIHE.
 *
 * Bei zwei Deckeln war `flex: 1 1 0` richtig: Beide bekamen die halbe Breite
 * und blieben über 44 px. Bei dreien wären es je knapp 110 px, und „Das
 * Volkstaschenbuch · spielbar" bräche darin vierzeilig um.
 *
 * `flex-wrap: wrap` mit einer echten Basis lässt den dritten Deckel auf einem
 * Telefon in die zweite Reihe fallen — ein Registraturschrank mit zwei Reihen
 * Reiter ist immer noch ein Registraturschrank. Ab Tabletbreite stehen wieder
 * alle drei nebeneinander.
 */
.registratur {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--bm-gap-1);
}

/*
 * Ein Karteireiter, kein Knopf.
 *
 * Kein Schlagschatten und kein Versatz beim Drücken: Ein Reiter, der sich beim
 * Anfassen bewegt, ist ein Knopf, und die beiden Blätter darunter sprängen bei
 * jedem Wechsel um drei Pixel.
 *
 * WAS DEN OFFENEN REITER KENNTLICH MACHT, SIND TON UND HÖHE — und nur die.
 * Hier stand, die fehlende untere Kante lasse ihn in sein Blatt übergehen; das
 * tut sie nicht. `.tageblatt` trägt eine durchgehende Oberkante von fünf
 * Pixeln über die volle Breite, auch unter dem offenen Reiter. `border-bottom: 0`
 * bleibt trotzdem: Ohne die Zeile lägen zwei Kanten aufeinander, drei Pixel
 * plus fünf, und der Reiter wäre eine geschlossene Box neben dem Blatt statt
 * einer angesetzten Lasche.
 *
 * `flex: 1 1 9rem` gibt allen dieselbe Breite und zugleich eine Untergrenze,
 * unter der sie lieber umbrechen als schrumpfen. Auf 375 px bleibt damit jeder
 * Reiter weit über 44 px breit — der Handytest misst in BEIDE Richtungen. Die
 * Beschriftung bricht dort zweizeilig um, und das ist in Ordnung: Die Reiter
 * wachsen mit.
 */
.registratur__akte {
    flex: 1 1 9rem;
    /*
     * `min-width: 0` hält das Versprechen, das `flex-basis: 0` gibt.
     *
     * Ohne die Zeile gilt `min-width: auto`, also die Breite des längsten
     * Wortes — und „Volkstaschenbuch" im Stand des ersten Reiters ist länger
     * als alles im zweiten. Die beiden Deckel standen deshalb nie gleich breit,
     * obwohl genau das hier steht.
     */
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.1rem;
    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. Der offene
     * Reiter unterscheidet sich vom geschlossenen deshalb nicht nur im Ton,
     * sondern in der Höhe – so wie in jedem Registraturschrank, aus dem eine
     * Akte herausgezogen ist. Acht Pixel reichen; die Tippfläche bleibt
     * darunter unverändert bei 44.
     */
    margin-top: 8px;
    padding: var(--bm-gap-2) var(--bm-gap-2) calc(var(--bm-gap-2) + 2px);
    text-align: left;
    color: var(--bm-paper-dim);
    background: var(--bm-ink-2);
    border: var(--bm-border) solid var(--bm-ink);
    border-bottom: 0;
    cursor: pointer;
    transition: color var(--bm-schnell), background-color var(--bm-schnell);
}

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

.registratur__nummer {
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* Zwei Reiter auf 375 px: „Volkstaschenbuch" darf sich trennen lassen. */
.registratur__titel,
.registratur__stand {
    hyphens: auto;
}

.registratur__titel {
    font-family: var(--bm-font-display);
    font-size: clamp(0.95rem, 3.4vw, 1.3rem);
    line-height: 1.1;
}

.registratur__stand {
    font-family: var(--bm-font-doc);
    font-size: 0.72rem;
    color: var(--bm-soot);
}

/*
 * Der offene Reiter nimmt den Ton SEINES Blattes an — Papier für die Zeitung,
 * Blech mit Senfkante für den Vorgang. So sieht man an der Kante, was unten
 * liegt, bevor man hinsieht.
 */
.registratur__akte[aria-pressed='true'] {
    margin-top: 0;
}

.registratur__akte--blatt[aria-pressed='true'] {
    color: var(--bm-ink);
    background: var(--bm-paper);
}

.registratur__akte--blatt[aria-pressed='true'] .registratur__stand {
    color: var(--bm-ink-notiz);
}

/*
 * EIN DECKEL, DER DAS DOKUMENT VERLÄSST, IST EINE TÜR.
 *
 * Er trug einmal dieselbe Klasse wie der offene Reiter und schaltete auf ein
 * Blatt, das hier lag — eine Nacherzählung des Nachbarfalls. Jetzt ist er ein
 * `<a>` auf dessen eine kanonische Sicht, und der Pfeil daneben sagt das.
 *
 * `text-decoration: none` ist Notwehr gegen base.css: Dort tragen Anker eine
 * Unterstreichung, und ein unterstrichener Aktendeckel ist keiner.
 */
.registratur__akte--tuer {
    text-decoration: none;
}

.registratur__pfeil {
    /* In em, damit er mit der Nummer wächst — und nicht kleiner als 9 px: Die
       Nummer steht in 0.66rem, und 0.72em davon wären 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;
}

/*
 * DIE FREMDEN AKTENDECKEL SIND GEFALLEN, und ihre rund zweihundertdreissig
 * Zeilen Gestalt mit ihnen: .fallakte, __kopf, __stelle, __zeichen, __marke,
 * --offen, __zeile, __titel, __film, __video, __satz, __tuer, __dauer,
 * __vormerkung, __aufruf, __haken, __feld, __note, __quittung, __schluss und
 * .art--fallakte.
 *
 * Sie zeichneten die Nacherzaehlungen von Fall 02 und Fall 03, die hier im
 * Dokument lagen. Beide Faelle haben jetzt genau eine Sicht, und beide liegen
 * anderswo — der Deckel ist eine Tuer.
 */