/*
 * DER RAHMEN DES HAUSES — Kopfleiste und Fusszeile, EINE Quelle.
 *
 * Hier lagen drei Fassungen desselben Bauteils: `tr_kopfleiste()` im Foyer,
 * und zweimal derselbe `<header class="hausleiste">` inline getippt in den
 * beiden Zimmern. Die beiden Zimmerfassungen waren nach Normalisierung der
 * Tokenpraefixe BIS AUF DREI ZEILEN zeichengleich — dieselben Kommentare,
 * dieselben gemessenen Zahlen, derselbe Umbruchpunkt. Die Foyerfassung war
 * dieselbe Leiste mit anderen Maszen: 96rem statt 82rem Innenbreite, ein
 * anderer Umbruchpunkt (47.99rem statt 46rem) und eine helle statt einer
 * dunklen Unterkante. Wer vom Foyer in einen Fall ging, sah die Marke um
 * 76 Pixel nach rechts springen.
 *
 * ES GIBT DESHALB NUR NOCH DIESE DATEI. Das Markup steht in `haus.php`, die
 * Gestalt hier, und beide kennen kein einzelnes Spiel.
 *
 * EIGENE TOKENS, UND ZWAR VOLLSTAENDIG. Diese Datei liest KEINEN `--hub-*`
 * und KEINEN `--bm-*`/`--wr-*`: Sie liegt in drei Haeusern mit drei Paletten,
 * und ein geerbter Token faerbte den Rahmen in jedem Zimmer anders — genau
 * die Ungleichheit, gegen die sie gebaut ist. Was sie braucht, steht hier.
 *
 * SIE WIRD GESPIEGELT, NICHT VERLINKT. Zwei Document-Roots haben keinen
 * gemeinsamen URL-Pfad: buchmafia.de wurzelt in `public/games/hardcover/` und
 * sieht `shared/` nie. Die Quelle ist diese Datei, die Kopien liegen unter
 * `public/games/<slug>/haus/haus.css`. Gestellt wird der Spiegel von
 * `node dev/tresen.mjs --spiegeln`; `dev/dev.ps1 tresen` PRUEFT ihn und
 * meldet jede abgewichene Kopie. Das Foyer holt sie ueber
 * `index.php?seite=stil&d=haus`, weil `shared/` dort ebenfalls gesperrt ist.
 */

:root {
    /*
     * ============================================================ DIE PALETTE
     *
     * DIESER RAHMEN WAR NACHT UND IST JETZT PAPIER — und das ist keine
     * Aufweichung der eisernen Regel, sondern ihre Grenze.
     *
     * "Es gibt einen Modus, und der ist Nacht" (CLAUDE.md, Abschnitt 7) gilt
     * woertlich weiter fuer jedes ZIMMER: die Zeitung von Fall 01, den
     * Behoerdenausdruck von Fall 02, jede Station, jede Huerde. Dieser Rahmen
     * ist aber kein Zimmer. Er ist der Bau darum, und ein Bau, der in
     * derselben Nacht steht wie seine Zimmer, verschwindet in ihnen: Auf 2560
     * Pixeln stand das Foyer als dunkler Streifen von 1536 Pixeln in einem
     * dunklen Fenster, und die Navigation darueber las sich als Fussnote.
     *
     * DIE TRENNLINIE HEISST: DAS HAUS SPRICHT UEBER WELTEN, DIE ZIMMER
     * SPRECHEN IN IHNEN. Dieselbe Linie, die in Abschnitt 6 die Stimme trennt
     * — "copy.js ist die Stimme EINES Spiels; ein Text, der ueber allen
     * Spielen dieses Hauses steht, kann nicht gleichzeitig Noir-Erzaehler
     * sein". Der Rahmen bekommt jetzt auch die Farbe dieser Haltung.
     *
     * ZWEI ZONEN, ZWEI TINTENSTAPEL. Oben Papier, unten ein Sockel aus
     * Druckerschwaerze — die aeltere von zwei Redaktionsgewohnheiten und nicht
     * der Wunsch nach zwei Themes: Ein Fuss traegt Kleingedrucktes, und
     * Kleingedrucktes steht auf der dunklen Seite ruhiger. Was oben
     * "--haus-tinte-*" heisst, heisst unten "--haus-kontrast-*"; einen Token,
     * der in beiden Zonen gilt, gibt es nicht, weil es ihn nicht geben kann.
     *
     * JEDE ZAHL HIER IST GERECHNET UND NICHT GESCHAETZT. Die Werte daneben
     * sind WCAG-2.1-Verhaeltnisse gegen den Grund, auf dem der Token
     * tatsaechlich liegt — und wo ein Token auf mehreren Gruenden liegt, steht
     * der SCHLECHTESTE da.
     */

    /* --- Die helle Zone: Grund, Karte, Kanten ------------------------ */
    --haus-grund: #fbf9f5;
    --haus-grund-karte: #ffffff;
    --haus-grund-subtil: #f4efe4;

    /*
     * ZWEI KANTEN, UND BEIDE SIND ZIERRAT.
     *
     * WCAG 1.4.11 verlangt 3,0:1 fuer alles, was KEIN Text ist und trotzdem
     * eine Auskunft traegt — also fuer die Kante eines Knopfes, nicht fuer
     * eine Trennlinie zwischen zwei Absaetzen. Diese beiden sind das Zweite:
     *
     *   --haus-kante        1,31:1  Haarlinie. Spaltentrenner, Kartenrand.
     *   --haus-kante-stark  1,76:1  sichtbare Zaesur, etwa unter der Leiste.
     *
     * UND WO IST DIE DRITTE? Hier stand ein --haus-kante-griff mit 3,06:1, der
     * Kantenton fuer Bedienelemente — und er hatte in diesem Rahmen keinen
     * einzigen Leser. Der Grund ist eine Eigenheit dieses Bauteils: Der EINZIGE
     * Griff des Rahmens ist der Raumcodeknopf, und der liegt nicht auf Papier,
     * sondern auf dem GLAS. Ueber einem dunklen Zimmer faellt der Griffton dort
     * auf 2,82:1; der Knopf nimmt deshalb --haus-tinte-gedaempft (4,26:1), und
     * die Begruendung steht ausfuehrlich bei seiner Regel.
     *
     * Das FOYER fuehrt die dritte Kante weiterhin und braucht sie auch
     * (--hub-kante-griff): Dort stehen Felder, Filterreiter und Aktendeckel auf
     * Papier.
     */
    --haus-kante: #e2dbce;
    --haus-kante-stark: #c5beaf;

    /* --- Tinte, drei Lautstaerken ------------------------------------ */
    /*
     * UND DIE LEISESTE DARF NICHT AUF DAS GLAS.
     *
     * Die Kopfleiste ist zu 92 % deckend, und was darunter durchkommt, ist im
     * Zimmer der Comic-Noir: Das Glas mischt sich dort zu #e8e6e2 statt zu
     * #f9f7f1 wie ueber der Zeitung. --haus-tinte-gedaempft haelt darauf nur
     * 4,26:1 — auf dem Papier des Foyers waeren es 5,05. Auf der Leiste steht
     * deshalb NUR --haus-tinte und --haus-tinte-sekundaer (14,76:1 und 7,43:1
     * im schlimmsten Fall), und die Rangfolge zwischen Wortmarke und
     * Navigation macht die GROESSE, nicht ein dritter Grauton.
     */
    --haus-tinte: #141416; /* 17,50:1 auf --haus-grund */
    --haus-tinte-sekundaer: #4a4740; /* 8,81:1 auf --haus-grund, 7,43:1 auf dem Glas */
    --haus-tinte-gedaempft: #6f6b62; /* 4,63:1 auf --haus-grund-subtil — NICHT auf dem Glas */

    /* --- Signal ------------------------------------------------------ */
    /*
     * EINE FASSUNG STATT ZWEI, UND DAS IST DER GEWINN DES HELLEN GRUNDES.
     *
     * Auf Blech brauchte der Akzent eine zweite Fassung (--haus-akzent-strich
     * war ein gedaempftes Papier), weil #b03a2e dort als SCHRIFT auf 2,88:1
     * kam. Auf Papier traegt derselbe Akzent beide Aufgaben: 5,07:1 als
     * Schrift auf --haus-grund, 5,33:1 auf --haus-grund-karte, und als
     * Flaeche unter Weiss ebenfalls 5,33:1. --haus-akzent-strich ist damit
     * ersatzlos gefallen — ein Token, der nur ein anderes wiederholt, laeuft
     * beim naechsten Umbau still auseinander.
     *
     * ALS SCHRIFT AUF DEM GLAS STEHT ER TROTZDEM NICHT. Ueber dem Noir eines
     * Zimmers kommt er dort auf 4,28:1. Als Kante und als Strich reicht das
     * (3,0 nach 1.4.11), als Wort nicht.
     */
    --haus-akzent: #c43826;

    /*
     * MESSING IST DIE FARBE, DIE ZUM SPIELEN EINLAEDT, und im Rahmen steht sie nur an einer Stelle: an der Live-Marke
     * des Salons. Zinnober waere dort eine Warnung; ein offener Tisch ist eine Einladung. Derselbe Wert wie
     * `--hub-messing` im Foyer.
     *
     * SIE IST PUNKT UND KANTE, NIE SCHRIFT. Gegen das Glas ueber dem dunkelsten Grund haelt sie 4,34:1, gegen das Papier
     * 5,14:1 — ueber den 3,0, die WCAG 1.4.11 fuer Nichttext verlangt, unter den 4,5 fuer Schrift. Die Ziffer daneben
     * steht deshalb in Tinte.
     */
    --haus-messing: #8a6238;

    /* --- Die dunkle Zone: der Sockel --------------------------------- */
    /*
     * IM FUSS IST DAS FELD TIEFER ALS SEINE KARTE, und oben ist die Karte
     * hoeher als ihr Grund. Das ist kein Widerspruch, sondern dieselbe
     * Papierlogik von zwei Seiten: Auf einem hellen Blatt liegt eine Karte
     * OBEN AUF (Weiss auf Naturpapier, mit Schatten); in einem dunklen Sockel
     * ist ein Knopf eine VERTIEFUNG.
     *
     * Gerechnet ist das an den Spendenknoepfen: Sie liegen auf
     * --haus-kontrast-grund in der Karte aus --haus-kontrast-karte. Ihre
     * Hoverkante (--haus-akzent) haelt damit 3,51:1 gegen die eigene Flaeche
     * und 3,26:1 gegen die Karte — beide ueber den 3,0 aus 1.4.11. Laege der
     * Knopf HELLER als seine Karte, fiele der eine Wert auf 2,90.
     */
    --haus-kontrast-grund: #121214;
    --haus-kontrast-karte: #1a1a1e;
    --haus-kontrast-kante: rgba(255, 255, 255, 0.12);
    --haus-kontrast-kante-griff: #767268; /* 3,62:1 auf der Karte, 3,90:1 auf dem Feld */
    --haus-kontrast-tinte: #f5f4f0; /* 17,00:1 auf --haus-kontrast-grund */
    --haus-kontrast-gedaempft: #9b988f; /* 6,02:1 auf --haus-kontrast-karte */
    --haus-kontrast-still: #86837b; /* 4,58:1 auf --haus-kontrast-karte — der leiseste Ton des Hauses */

    /* --- Masse ------------------------------------------------------- */
    /*
     * DIE BUEHNENBREITE DES HAUSES — UND SIE IST VON 1536 AUF 1800 GEWACHSEN.
     *
     * Hier stand 96rem mit der Begruendung, ab etwa 1700 Pixeln wandere der
     * Blick beim Zeilenwechsel zu weit. Das stimmt fuer eine TEXTSPALTE und
     * war nie das Mass dieser Zahl: Sie deckelt die BUEHNE, und auf ihr
     * stehen Kacheln, Karten und ein Aufmacher — Flaechen, die nebeneinander
     * liegen, nicht Zeilen, die man entlangliest. Was Saetze traegt, hat
     * weiterhin sein eigenes Zeilenmass (--hub-mass, --bm-mass, --wr-mass),
     * und genau darin liegt der Unterschied.
     *
     * Gemessen auf 2560 Pixeln war 1536 kein grosszuegiger Rand, sondern ein
     * Fenster im Nichts: fuenfhundert Pixel Leere je Seite, in denen nichts
     * steht und nichts stehen soll.
     *
     * SIE IST DIESELBE ZAHL WIE --bm-akte UND --wr-akte, UND GENAU DAS IST
     * DIE ZUSAGE. Wer eine der drei anfasst, fasst alle drei an — sonst
     * springt die Wortmarke beim Betreten eines Zimmers wieder zur Seite, und
     * das war der Befund, gegen den dieser Rahmen ueberhaupt gebaut wurde.
     * NICHT mitgewachsen ist --bm-shell: An ihm haengt jede Werkzeug-Huerde
     * samt Reglerbank, deren Pixel-je-Stufe-Rechnung fuer 375 px gebaut ist.
     */
    --haus-shell: 1800px;
    /*
     * DIE SEITENLUFT WAECHST MIT. Sie war bei 2,25rem gedeckelt — auf einem
     * Breitbild derselbe Daumenbreit wie auf einem Laptop. Der obere Anschlag
     * steht jetzt auf 3,5rem; der untere bleibt, weil das Telefon jeden Pixel
     * Inhaltsbreite braucht.
     */
    --haus-luft: clamp(1.15rem, 2.6vw, 3.5rem);
    /*
     * DIE LUFT UNTER DER KLEBENDEN LEISTE — eine Zahl, drei Haeuser.
     *
     * Der Inhalt klebte an der Unterkante des Kopfes: Im Foyer trug
     * "hub-schale" gar kein oberes Polster, in den Zimmern stand an "shell"
     * ein clamp an der FENSTERHOEHE — also genau an der Groesse, die mit der
     * Leiste nichts zu tun hat.
     *
     * SIE STEHT HIER UND WIRD DORT GESETZT. Der Rahmen darf keine
     * Elementregel des Gastgebers schreiben; was ihm gehoert, ist die ZAHL.
     */
    --haus-kopfluft: clamp(2.5rem, 5vw, 4.5rem);
    --haus-griff: 44px;
    /*
     * DIE HOEHE DER LEISTE. Sie ergab sich aus 44 px Griff plus zweimal
     * gap-1 und stand damit bei 55 — auf einem Schirm von 2560 ein Streifen,
     * den man fuer einen Rest haelt. 72 ist der Wert, bei dem dieselbe Leiste
     * traegt, ohne zur Kopfzeile zu werden; auf dem Telefon gilt er nicht,
     * dort ist sie ohnehin zweizeilig.
     */
    --haus-kopf-hoehe: 72px;
    --haus-gap-1: 0.35rem;
    --haus-gap-2: 0.7rem;
    --haus-gap-3: 1.15rem;
    --haus-gap-4: 1.9rem;
    --haus-gap-5: 3rem;
    /* Der Innenabstand des Fusses. Er war gap-5 an allen vier Kanten, und
       oben ist das zu wenig: Der Fuss beginnt unmittelbar nach dem letzten
       Absatz der Seite und braucht die Zaesur, die eine Kante allein nicht
       traegt. */
    --haus-gap-6: clamp(2.75rem, 5vw, 4rem);
    /*
     * DER ABSTAND DER KOPFLEISTE — EINE ZAHL FUER DIE GANZE ZEILE.
     *
     * Hier standen ZWEI Masse, und man sah es. Die Navigation trug
     * clamp(1.75rem, 2.5vw, 3rem) — auf einem Schirm von 2560 Pixeln also
     * 48 px zwischen den Woertern. Die Gruppe, die dieselbe Zeile haelt und
     * den Codeknopf mitfuehrt, trug --haus-gap-3 = 18,4 px. Zwischen
     * „Konzept" und „Ueber uns" klaffte damit eine Luecke, waehrend „Ueber
     * uns" und der Knopf zusammenklebten: Faktor 2,6 in derselben Leiste.
     * Eine Leiste mit zwei Massen ist keine Leiste.
     *
     * ER STEHT ALS TOKEN DA UND NICHT ALS WERT AN ZWEI REGELN, denn genau
     * das war der Weg, auf dem die beiden Zahlen ueberhaupt auseinander
     * laufen konnten.
     *
     * DIE DREI STUFEN, GERECHNET BEI 16 px Wurzelgroesse (kein Haus setzt
     * eine eigene an `html`): 2vw erreicht die Untergrenze von 1,05rem erst
     * bei 840 px Fensterbreite — darunter, und damit auch auf den 768 px,
     * die `dev/breiten.mjs` faehrt, sind es glatte 16,8 px. Von 840 bis
     * 1800 px waechst er von 16,8 auf 36 px; ab 1800 px steht er auf
     * 2,25rem = 36 px und wird nicht mehr breiter.
     *
     * DIE UNTERGRENZE STAND AUF 1,25rem, UND DIE 3,2 PIXEL SIND GEMESSEN.
     * Seit die fuenf Bereiche ihre Gattung nennen — „Escape", „Brett",
     * „Arena" statt „Faelle", „Archiv", „Spiele" —, stand die Leiste bei
     * genau 768 Pixeln um fuenf Pixel ueber der Zeile und fiel damit von 73
     * auf 106. Fuenf Pixel an einer Stelle zu holen, an der sechs Abstaende
     * nebeneinander liegen, kostet je Abstand drei — und zwar nur dort, wo
     * es eng ist: Ueber 840 px rechnet der Mittelwert, und dort aendert sich
     * kein Pixel.
     *
     * MIT DEM SECHSTEN BEREICH (Point & Click) STEHT SIE AUF 0,9rem. Die kurzen
     * englischen Woerter sind acht Pixel laenger als die deutschen, und bei
     * genau 768 Pixeln fiel die Sprache damit in eine dritte Zeile (155). Wieder
     * gilt: Ueber 720 px rechnet der Mittelwert, und ab 840 aendert sich nichts.
     */
    --haus-nav-gap: clamp(0.9rem, 2vw, 2.25rem);
    --haus-tracking: 0.08em;

    /*
     * --- Rundung und Schatten, und beides ist eine GRENZE und keine Kehrtwende
     *
     * "border-radius: 0 im gesamten UI" und "kein weicher Schatten als
     * Gestaltungsmittel" stehen in CLAUDE.md, Abschnitt 7, und sie gelten
     * woertlich weiter fuer jedes Zimmer: eine Sprechblase, eine Station, eine
     * Reglerbank, eine Kachel im Comic — alles harte Kante. Der Grund dafuer
     * ist die Bildsprache, und die Bildsprache gehoert den Spielen.
     *
     * Dieser Rahmen zeigt kein Bild. Er ist Moebel: eine Leiste, eine Lade,
     * ein Sockel, drei Knoepfe. Auf Naturpapier ist eine Karte mit harter
     * Kante und ohne Schatten kein Comic, sondern ein Loch — sie liegt nicht
     * AUF dem Blatt, sie ist hineingeschnitten.
     *
     * DIE ZAHLEN SIND KLEIN, UND DAS IST DER GANZE PUNKT: 8 und 12 Pixel
     * sieht man erst, wenn man hinsieht. Wer sie hochsetzt, baut eine App.
     */
    --haus-radius-m: 8px;
    --haus-radius-l: 12px;
    --haus-schatten-karte: 0 4px 20px rgba(20, 20, 22, 0.05), 0 1px 3px rgba(20, 20, 22, 0.03);
    --haus-schatten-schwebend: 0 16px 36px rgba(20, 20, 22, 0.08);

    /*
     * --- Das Glas, und es ist die EINE Ausnahme vom Weichzeichnerverbot
     *
     * CLAUDE.md Abschnitt 7 verbietet blur() als Gestaltungsmittel, und das
     * gilt woertlich weiter fuer jede Flaeche in jedem Zimmer. Diese Leiste
     * ist der einzige Kasten des Hauses, unter dem sich Inhalt hindurchbewegt:
     * volldeckend schneidet sie die Seite waagerecht durch, halbdurchsichtig
     * ohne Weichzeichner flimmert die Navigation ueber jedem durchlaufenden
     * Bild.
     *
     * DIE DECKUNG BLEIBT BEI 92 %, DAS GLAS KIPPT VON BLECH AUF PAPIER. Und
     * es wird dadurch BESSER statt schlechter: Das dunkle Glas musste gegen
     * den hellsten Grund des Hauses rechnen (die Zeitung), das helle rechnet
     * gegen den dunkelsten (den Noir einer Station) — und dort mischt es sich
     * zu #e8e6e2. Die Wortmarke steht darauf bei 14,76:1, die Navigation bei
     * 7,43:1; ueber der Zeitung sind es 17,17 und 8,65. Vorher waren es 11,50
     * und 5,31. Acht Prozent reichen weiter, um zu sehen, dass sich darunter
     * etwas bewegt.
     */
    --haus-glas: rgba(251, 249, 245, 0.92);
    --haus-glas-blur: blur(16px);

    /*
     * --- Der Schleier hinter dem Menue auf dem Telefon, und er ist die ZWEITE
     * Stelle dieses Hauses mit einem Weichzeichner
     *
     * Wer das Menue aufklappt, hat entschieden, dass die Seite dahinter gerade
     * nichts gilt. Der Schleier sagt es, und zwei Pixel Unschaerfe halten den
     * Blick beim Menue, ohne die Seite zu einem Fleck zu machen. Er steht nur,
     * solange das Menue offen ist und nur unter 48rem; ohne Weichzeichner
     * faellt allein die Unschaerfe weg, der Schleier bleibt — und der reicht.
     *
     * DIE TINTE DES HAUSES BEI 28 % MACHT AUS NATURPAPIER rgb(186, 185, 183):
     * Das Menue (weiss) steht darauf bei 1,96:1, ueber einem Zimmer (#0b0b0d)
     * bei 19,28:1. Er ist eine Flaeche ohne Schrift und braucht keine 3,0.
     *
     * ER LIEGT NICHT IM KOPF, sondern daneben (.haus-scrim, Geschwister der
     * Leiste). Ein Element mit backdrop-filter ist Bezugspunkt fuer jedes
     * fixed-Kind und Wurzel fuer jeden Weichzeichner darunter: Im Glas der
     * Leiste haette der Schleier nur die Leiste selbst erfasst und nie die
     * Seite dahinter.
     */
    --haus-scrim: rgba(20, 20, 22, 0.28);
    --haus-scrim-blur: blur(2px);

    /*
     * DIE EBENE IST HOCH, ABER NICHT DIE HOECHSTE. Im Zimmer liegen der
     * Tresen und der Toast absichtlich darueber; im Foyer der Sprunglink.
     * 900 traegt beide Skalen, weil die Zimmer ihre eigenen Ebenen unter 100
     * fuehren und den Tresen per eigenem Token darueber heben.
     */
    --haus-ebene-kopf: 900;

    /* --- Schrift ----------------------------------------------------- */
    /* KEINE WEBSCHRIFT. Der Rahmen laedt keine Datei fuer Buchstaben — weder
       von einem fremden Server noch vom eigenen. Er steht in drei Haeusern
       mit drei Kanonschriften; eine vierte waere eine vierte Ladung. */
    --haus-font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --haus-font-doc: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Courier New', monospace;

    --haus-schnell: 120ms linear;
}

/*
 * DER RAHMEN BRINGT SEINEN FOKUSRING SELBST MIT.
 *
 * Er hing an `base.css` des jeweiligen Zimmers — und genau das verbietet
 * CLAUDE.md Abschnitt 10: Ein Rahmen darf nicht davon abhaengen, welche
 * Elementregeln das Haus unter ihm zufaellig mitbringt. Beide heutigen Zimmer
 * fuehren eine `:focus-visible`-Regel; ein drittes ohne sie bekaeme einen Kopf,
 * durch den man sich blind tabbt. Dasselbe Argument wie beim Ankreuzfeld des
 * Meldebogens, nur eine Etage hoeher.
 *
 * ER HAT JETZT ZWEI FASSUNGEN, WEIL DER RAHMEN ZWEI ZONEN HAT. Ein einziger
 * Ring in Papierfarbe war richtig, solange beide Raender aus Blech waren; auf
 * dem hellen Kopf waere derselbe Ring unsichtbar. Oben Tinte (17,50:1 auf dem
 * Grund, 14,76:1 auf dem Glas ueber dem dunkelsten Zimmer), unten die helle
 * Kontrasttinte (17,00:1). Beides weit ueber den 3,0, die WCAG 1.4.11 fuer
 * einen Fokusindikator verlangt.
 */
.haus-kopf a:focus-visible,
.haus-kopf button:focus-visible,
.haus-kopf summary:focus-visible {
    outline: 3px solid var(--haus-tinte);
    outline-offset: 3px;
}

.haus-fuss a:focus-visible,
.haus-fuss button:focus-visible {
    outline: 3px solid var(--haus-kontrast-tinte);
    outline-offset: 3px;
}

/*
 * UND SEINEN `hidden`-RIEGEL BRINGT ER AUCH SELBST MIT.
 *
 * Das Attribut `hidden` traegt sein `display: none` nur aus dem Stilblatt des
 * Browsers, und JEDE Autorenregel schlaegt das — unabhaengig von der
 * Spezifitaet. Die Lade unter „Spiele" setzt `display: grid`, ihr Griff
 * `display: inline-flex`: Beide waeren damit sichtbar, obwohl sie im Markup
 * `hidden` stehen.
 *
 * Heute faellt das nicht auf, weil ALLE DREI Gastgeber zufaellig ein eigenes
 * `[hidden] { display: none !important }` fuehren — hub/hub.css und die beiden
 * `base.css`. Genau darauf darf sich ein Rahmen nicht verlassen (CLAUDE.md,
 * Abschnitt 10): Ein viertes Zimmer ohne diese Zeile bekaeme eine Fallliste,
 * die beim Laden dauerhaft offensteht, und daneben einen Griff, der ohne
 * JavaScript gar nicht dastehen soll.
 *
 * Der Riegel steht bewusst NUR auf den eigenen Bauteilen. Ein globales
 * `[hidden]` waere eine Elementregel des Rahmens im Dokument des Gastgebers —
 * dieselbe Grenzueberschreitung, nur in die andere Richtung.
 */
.haus-kopf [hidden],
.haus-fuss [hidden] {
    display: none !important;
}

/* ==================================================== Der Kopf ========== */

/*
 * DIE LEISTE KLEBT, UND DER KASTEN IST NICHT DIE BUEHNE.
 *
 * `.haus-kopf` ist die Leiste ueber die volle Fensterbreite — sie traegt Glas,
 * Kante und Ebene. `.haus-kopf__innen` ist der Inhalt und haelt sich an die
 * Buehnenbreite. Beides in einem Element ginge nicht: Eine Leiste, die auf
 * 96rem endet, laesst auf einem Breitbild links und rechts das Blech offen und
 * sieht aus wie ein Kasten, der mitscrollt, statt wie ein Rand des Fensters.
 */
.haus-kopf {
    position: sticky;
    top: 0;
    z-index: var(--haus-ebene-kopf);
    background: var(--haus-glas);
    -webkit-backdrop-filter: var(--haus-glas-blur);
    backdrop-filter: var(--haus-glas-blur);
    /*
     * DIE UNTERKANTE IST ZIERRAT UND KEIN BEDIENELEMENT — deshalb reicht hier
     * --haus-kante-stark mit 1,76:1. Ueber einem Zimmer trennt ohnehin der
     * Tonsprung; im Foyer, wo Glas auf Papier derselben Familie liegt, ist
     * diese Linie die einzige Trennung, und sie soll ein Haar sein und kein
     * Balken.
     */
    border-bottom: 1px solid var(--haus-kante-stark);
    color: var(--haus-tinte);
    font-family: var(--haus-font-text);
}

/*
 * OHNE WEICHZEICHNER WIRD SIE DECKEND. 92 % Deckung ueber einem laufenden
 * Film ist ohne Unschaerfe kein Glas, sondern Flimmern unter der Navigation.
 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .haus-kopf {
        background: var(--haus-grund);
    }
}

/*
 * DIE LEISTE, DIE ERST AB DEM SCHREIBTISCH KLEBT (`klebt => 'breit'`).
 *
 * Darunter steht sie im Fluss und rollt mit der Seite weg. Sie bleibt dabei
 * positioniert, denn die Lade unter „Spiele" haengt auf dem Telefon an der
 * Leiste und nicht an ihrem Wort. Und sie verliert das Glas: Der Weichzeichner
 * gehoert allein einer KLEBENDEN Leiste (CLAUDE.md, Abschnitt 7), und unter
 * einer Leiste im Fluss bewegt sich nichts hindurch.
 */
@media (max-width: 45.99rem) {
    .haus-kopf--klebt-breit {
        position: relative;
        background: var(--haus-grund);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.haus-kopf__innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--haus-gap-1) var(--haus-gap-3);
    max-width: var(--haus-shell);
    margin: 0 auto;
    padding: var(--haus-gap-1) var(--haus-luft);
}

/*
 * DIE HOEHE GILT ERST AB DEM SCHREIBTISCH, und das ist keine Vorsicht,
 * sondern eine gemessene Grenze: dev/dev.ps1 portal deckelt die Leiste auf ein
 * Fuenftel der Fensterhoehe, und auf 390 x 844 steht sie ohnehin zweizeilig.
 * Eine Mindesthoehe von 72 Pixeln WUERDE dort nichts kaputtmachen — sie waere
 * nur eine Zahl, die nie greift, und eine Regel, die nie greift, ist tot.
 */
@media (min-width: 46rem) {
    .haus-kopf__innen {
        min-height: var(--haus-kopf-hoehe);
    }
}

.haus-marke {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--haus-gap-2);
    min-height: var(--haus-griff);
    min-width: var(--haus-griff);
    color: var(--haus-tinte);
    text-decoration: none;
}

.haus-marke:hover,
.haus-marke:focus-visible {
    color: var(--haus-tinte);
}

/*
 * KEIN "invert(1)" MEHR, UND DAS IST DER GANZE UNTERSCHIED ZUM FUSS.
 *
 * Hier stand die Umkehrung mit der Begruendung, das Signet sei eine
 * Silhouette in Druckerschwaerze und auf Blech unsichtbar. Beides stimmt
 * weiter — nur liegt oben jetzt kein Blech mehr, sondern Papier, und darauf
 * ist Druckerschwaerze genau das, was sie sein soll. Im Fuss steht die
 * Umkehrung deshalb unveraendert: Dort ist der Grund noch Nacht.
 *
 * Die Hoehe waechst von 30 auf 34 Pixel mit der Leiste mit.
 */
.haus-marke__zeichen {
    flex: none;
    width: auto;
    height: 34px;
    max-width: none;
}

.haus-marke__wort {
    font-family: var(--haus-font-text);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}

/*
 * DIE BREADCRUMB IST DIE EINZIGE DYNAMIK DIESER LEISTE.
 *
 * Im Foyer steht sie nicht da; in einem Fall nennt sie Reihe, Nummer und
 * Titel — „Buchmafia-Reihe: Fall 02 · Das Welt-Register". Sie kommt aus der
 * Kartei (`spiele.reihe`, `reihe_nr`, `titel`) und nicht aus dem Markup: Sonst
 * stuende die Reihenfolge der Faelle an zwei Stellen, und die zweite waere die
 * falsche, sobald das Pult eine Zeile aendert.
 *
 * `anywhere` senkt ihre min-content-Breite: Ein einziges langes Wort hielte
 * die Spalte sonst auf. `max-width: none` ist Notwehr gegen die
 * Elementregeln des Gastgebers — in beiden Zimmern traegt `p` ein Zeilenmass
 * aus `base.css`, und die Leiste ist kein Fliesstext.
 */
.haus-kopf__reihe {
    flex: 1 1 7rem;
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow-wrap: anywhere;
    /*
     * SEKUNDAER UND NICHT GEDAEMPFT, und der Grund steht beim Token: Auf dem
     * Glas ueber einem dunklen Zimmer haelt die gedaempfte Fassung nur 4,26:1.
     * Die Leiste kennt deshalb nur zwei Tinten; leiser als die Navigation ist
     * diese Zeile ueber ihre GROESSE und ihre Familie, nicht ueber einen
     * dritten Grauton.
     */
    color: var(--haus-tinte-sekundaer);
    font-family: var(--haus-font-doc);
    font-size: 0.8rem;
    letter-spacing: var(--haus-tracking);
}

/*
 * DIE GRUPPE IST DER UMBRUCH, und sie steht rechts ueber `margin-left: auto`
 * an sich selbst — nicht ueber `justify-content: space-between` am Kopf:
 * Bricht die Zeile um, faellt die Gruppe unter die Marke, und `auto` schiebt
 * sie in ihrer eigenen Zeile trotzdem nach rechts.
 *
 * Ohne sie entschied `flex-wrap` in Foyer und Zimmer verschieden, weil im
 * einen eine Breadcrumb steht und im anderen nicht — die Begruendung steht
 * ausfuehrlich in `haus.php`.
 *
 * IHR SPALTENABSTAND IST DERSELBE WIE DER DER NAVIGATION. Er war
 * --haus-gap-3 (18,4 px) gegen 48 px zwischen den Woertern, und weil in
 * dieser Gruppe genau zwei Dinge liegen — das `<nav>` und der Codeknopf —,
 * war das der ganze Befund: Der Knopf klebte an „Ueber uns". Die
 * ZEILENluecke bleibt --haus-gap-1; sie gilt nur im umgebrochenen Zustand
 * und hat mit der Waagerechten nichts zu tun.
 */
.haus-kopf__gruppe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--haus-gap-1) var(--haus-nav-gap);
    margin-left: auto;
}

/*
 * DIE NAVIGATION HAT LUFT BEKOMMEN, UND EINE DER DREI STELLEN IST JETZT
 * EIN TOKEN.
 *
 * Sie stand in 0,8 rem mit 0,08 em Sperrung und einem Abstand von 1,15 rem
 * — drei Woerter in Versalien, die auf einem Breitbild wie eine Fussnote
 * neben der Wortmarke hingen. Groesse und Gewicht sind geblieben, was sie
 * damals geworden sind.
 *
 * DIE SPERRUNG SINKT, WAEHREND DIE GROESSE STEIGT. Das ist kein Widerspruch:
 * `--haus-tracking` (0,08 em) ist auf 0,8 rem gerechnet, wo Versalien ohne
 * Sperrung zusammenkleben. Bei 1,05 rem trennen sie sich von selbst, und
 * dieselbe Sperrung liest sich dann auseinandergerissen.
 *
 * DER ABSTAND IST AUS DIESER REGEL VERSCHWUNDEN, UND SEINE BEGRUENDUNG MIT
 * IHM. Hier stand „auf 1536 Pixeln Innenbreite ist der Platz da" — die
 * Buehne steht seit dem Breitenumbau auf --haus-shell = 1800px, und die
 * eigene Zahl war selbst der Befund: clamp(1.75rem, 2.5vw, 3rem) ergab auf
 * 2560 px 48 Pixel zwischen den Woertern, waehrend die Gruppe darum den
 * Codeknopf mit 18,4 px an „Ueber uns" hielt. Es gilt jetzt
 * --haus-nav-gap, dieselbe Zahl an beiden Stellen.
 *
 * `flex-wrap: wrap` bleibt stehen: Es ist der Umbruch im Band zwischen
 * 736 px (Ende des Telefonzweigs) und rund 900 px, wo Marke, Reihe, drei
 * Woerter und Knopf gemeinsam knapp werden.
 */
.haus-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--haus-gap-1) var(--haus-nav-gap);
}

/*
 * SIE WAR SCHREIBMASCHINE IN VERSALIEN UND IST JETZT SATZSCHRIFT.
 *
 * Der Wortlaut stand in --haus-font-doc, in Grossbuchstaben, gesperrt — die
 * Handschrift der Zimmer, uebernommen von einer Leiste, die kein Zimmer ist.
 * Auf 2560 Pixeln las sich das als Beschriftung einer Maschine und nicht als
 * Navigation eines Hauses; genau der Befund, mit dem dieser Umbau anfing.
 *
 * Das Gewicht traegt jetzt die Rangfolge: 500 gegen die 700 der Wortmarke.
 * Vorher machte das die FARBE allein, und die musste dafuer bis an die
 * Kontrastgrenze heruntergehen.
 */
.haus-nav__punkt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--haus-griff);
    min-width: var(--haus-griff);
    color: var(--haus-tinte-sekundaer);
    font-family: var(--haus-font-text);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

.haus-nav__punkt:hover,
.haus-nav__punkt:focus-visible {
    color: var(--haus-tinte);
}

/*
 * WO MAN STEHT, SAGT NICHT NUR DIE FARBE. Die Unterkante traegt es mit —
 * „Keine Farbe als einziger Informationstraeger" gilt auch fuer eine
 * Navigation, und `aria-current` allein sieht niemand.
 */
/*
 * DER STRICH IST JETZT DER AKZENT SELBST. Auf Blech brauchte er eine
 * abgeleitete Aufhellung (color-mix gegen Papier), weil das Rot dort auf
 * 2,60:1 kam; auf dem hellen Glas haelt es 4,97:1 ueber der Zeitung und
 * 4,28:1 ueber dem Noir — beides weit ueber den 3,0 aus WCAG 1.4.11 fuer
 * Nichttext. Die color-mix-Zeile und ihr Rueckfall sind damit gefallen.
 */
.haus-nav__punkt[aria-current] {
    border-bottom: 2px solid var(--haus-akzent);
    color: var(--haus-tinte);
}

/*
 * DAS ABZEICHEN AM PUNKT „STORY": Es sagt, was hinter dem Wort liegt — ein Comic —, und es ist das einzige Stueck
 * Signalfarbe in der Reihe. Eine FLAECHE mit Papier darauf und keine rote Schrift: Als Schrift haelt der Akzent auf dem
 * Glas ueber einem dunklen Zimmer nur 4,28:1, Papier auf dem Akzent haelt 5,33:1.
 */
.haus-nav__abzeichen {
    display: inline-block;
    margin-left: 0.45em;
    padding: 0.1em 0.45em;
    border-radius: var(--haus-radius-m);
    background: var(--haus-akzent);
    color: var(--haus-grund-karte);
    font-family: var(--haus-font-doc);
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: var(--haus-tracking);
    line-height: 1.4;
    text-transform: uppercase;
}

/*
 * DIE LIVE-MARKE AM PUNKT „SPIELE“: ein Messingpunkt und eine Ziffer in einer feinen Kante — wie viele Tische gerade
 * offen im Salon stehen. Sie steht nur im Foyer und nur, solange einer offen steht (`hidden` im Markup, aufgedeckt
 * vom Skript im Fuss des Foyers).
 *
 * SIE IST DIE EINE PLAKETTE DER LEISTE, und das ist kein Widerspruch zur Ziffer davor. Die sagt, was heute spielbar
 * ist, und steht immer da; diese hier meldet, dass JETZT jemand an einem Tisch sitzt, und geht wieder. Zwei Zahlen
 * nebeneinander, beide blank, laesen sich als eine. Gefuellt ist sie trotzdem nicht: Eine volle Flaeche waere eine
 * Meldung („zwei ungelesene“), die Kante ist eine Auskunft.
 *
 * SIE STEHT STILL. Banderole und Filmstreifen sind die Bewegungen, die im Foyer von selbst laufen (Abschnitt 7);
 * ein pulsierender Punkt waere eine dritte, und zwar ueber jeder Seite.
 *
 * SIE IST HOCHGESTELLT UND NIMMT KEINEN PIXEL BREITE. Im Fluss hinter der Ziffer stand sie zuerst, 28 Pixel breit, und
 * die Leiste hat dort keine Reserve: Bei 896 Pixeln fiel sie von 106 auf 155, bei 1312 von 73 auf 106 — gemessen mit
 * abgefangenen Tischen auf dreiundzwanzig Breiten. Absolut an der oberen Ecke des Punkts sitzt sie im leeren Band
 * ueber dem Wort und ragt hoechstens zehn Pixel in die Luecke zum Nachbarn, die nie schmaler ist als 16,8. Sie steht
 * deshalb auf Papier: Unter ihr kann das Wort liegen, und eine durchsichtige Marke laese sich dort nicht.
 */
.haus-nav__punkt {
    position: relative;
}

.haus-nav__live {
    position: absolute;
    top: -0.1em;
    right: -0.95em;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0 0.4em;
    border: 1px solid var(--haus-messing);
    border-radius: var(--haus-radius-m);
    background: var(--haus-grund);
    color: var(--haus-tinte);
    font-size: 0.66em;
    font-weight: 700;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.haus-nav__live-punkt {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--haus-messing);
}

/*
 * DER PUNKT AM MENUEGRIFF: dieselbe Auskunft fuer das Telefon, wo „Spiele“ im zugeklappten Menue liegt. Er steht
 * absolut an der Ecke des Griffs und macht die Leiste damit keinen Pixel breiter — die Zusage „auf 320 Pixeln eine
 * Zeile“ (weiter unten) gilt vor jeder Marke. Der Ring in Papier trennt ihn von der Kante des Griffs; er ist ein Rand
 * und kein Schatten. Aufgeklappt steht die Marke am Wort selbst, und der Punkt geht.
 */
.haus-menue__live {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--haus-grund);
    border-radius: 50%;
    background: var(--haus-messing);
}

.haus-menue[open] .haus-menue__live {
    display: none;
}

/* ---------------------------------------------- Das Menue „Spiele" ---- */

/*
 * EIN <details> MIT EINEM <summary> ALS GRIFF — und die Lade haengt an der LEISTE, nicht an ihrem Wort.
 *
 * `.haus-mega` ist absichtlich NICHT positioniert. Der Bezugspunkt der Lade ist `.haus-kopf` (klebt, im Fluss
 * `relative`), und sie spannt dort von Seitenluft zu Seitenluft unter der Buehne — gleich, wo „Spiele" in der Reihe
 * steht. Der Griff traegt `position: relative` von `.haus-nav__punkt` (fuer die Live-Marke), aber die Lade ist nicht
 * sein Kind, sondern sein Geschwister.
 */
.haus-mega {
    display: inline-flex;
}

.haus-mega__griff {
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
}

.haus-mega__griff::-webkit-details-marker {
    display: none;
}

.haus-mega__griff::marker {
    content: '';
}

.haus-mega__winkel {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    transition: transform var(--haus-schnell);
}

.haus-mega[open] > .haus-mega__griff {
    color: var(--haus-tinte);
}

.haus-mega[open] > .haus-mega__griff .haus-mega__winkel {
    transform: rotate(180deg);
}

/* Wer in einer der vier Gattungen steht, sieht am Griff denselben Strich wie an einem Punkt mit aria-current. */
.haus-mega__griff--aktiv {
    border-bottom: 2px solid var(--haus-akzent);
    color: var(--haus-tinte);
}

/*
 * DIE LADE IST EINE KARTE UND SIE IST DECKEND — wie jede Lade dieses Rahmens: Unter einer Flaeche, die ein paar
 * Sekunden auf der Seite liegt, bewegt sich nichts hindurch; was durchschiene, machte nur ihre Schrift schwerer. Der
 * Weichzeichner bleibt beim Kopf (CLAUDE.md, Abschnitt 7). Kante, Anrisskante in Akzentrot und der schwebende Schatten
 * des Rahmens heben sie vom Papier ab.
 *
 * DIE KANTEN STEHEN UNTER MARKE UND LETZTEM HANDGRIFF: `100%` ist hier die Breite der Leiste, und die Bühne darin ist
 * hoechstens `--haus-shell` breit — dieselbe Rechnung wie `.haus-kopf__innen`, nur als Abstand von aussen.
 *
 * SIE PASST INS FENSTER, auch auf einem Notebook von 768 Pixeln Hoehe: Was darueber hinausginge, rollt in ihr.
 */
.haus-mega__lade {
    position: absolute;
    top: 100%;
    left: max(var(--haus-luft), calc((100% - var(--haus-shell)) / 2 + var(--haus-luft)));
    right: max(var(--haus-luft), calc((100% - var(--haus-shell)) / 2 + var(--haus-luft)));
    z-index: 1;
    max-height: calc(100vh - var(--haus-kopf-hoehe) - var(--haus-gap-4));
    max-height: calc(100dvh - var(--haus-kopf-hoehe) - var(--haus-gap-4));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--haus-gap-4);
    border: 1px solid var(--haus-kante);
    border-top: 3px solid var(--haus-akzent);
    border-radius: 0 0 var(--haus-radius-l) var(--haus-radius-l);
    background: var(--haus-grund-karte);
    box-shadow: var(--haus-schatten-schwebend);
    color: var(--haus-tinte);
    white-space: normal;
}

/*
 * ZUGEKLAPPT HAT DIE LADE KEINEN KASTEN — dieselbe Chrome-Eigenheit wie beim Menue des Telefons weiter unten: Den
 * Inhalt eines zugeklappten <details> legt Chrome in einen Kasten mit Layout-Containment, und eine absolut gesetzte
 * Lade rechnet dann gegen den Griff „Spiele" statt gegen die Leiste. Wer die Geometrie abfragte, bekam Kacheln von elf
 * Pixeln Breite und dreihundert Hoehe; `akte()` in `dev/portal.mjs` hat sie in jedem Zimmer als zu kleine Griffe gemeldet.
 */
.haus-mega:not([open]) > .haus-mega__lade {
    display: none;
}

/*
 * ZWEI SPALTEN AUF DEM TABLET, VIER AUF DEM SCHREIBTISCH. Die breiten Saeulen tragen zwei Kacheln nebeneinander
 * (Escape Games) oder vier kleine im Quadrat (Arena); die schmalen eine. Ohne Point & Click fehlt die erste Spalte,
 * und das Raster sagt das selbst (`--ohne-pc`), statt eine Luecke stehen zu lassen.
 */
.haus-mega__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--haus-gap-4) var(--haus-gap-5);
}

.haus-mega__innen--ohne-pc {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (min-width: 80rem) {
    .haus-mega__innen {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1.7fr);
    }

    .haus-mega__innen--ohne-pc {
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1.7fr);
    }
}

.haus-mega__saeule {
    display: flex;
    flex-direction: column;
    gap: var(--haus-gap-2);
    min-width: 0;
}

/* Die Gattung ist eine Ueberschrift fuer den Blick und keine fuer die Gliederung der Seite: kein h2 in jedem Kopf. */
.haus-mega__gattung {
    max-width: none;
    margin: 0;
    padding-bottom: var(--haus-gap-1);
    border-bottom: 1px solid var(--haus-kante);
    color: var(--haus-tinte-sekundaer);
    font-family: var(--haus-font-doc);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: var(--haus-tracking);
    text-transform: uppercase;
}

.haus-mega__kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--haus-gap-3);
}

/*
 * EINE KACHEL IST EIN WEG, UND ZWAR DER GANZE KASTEN: Bild, Titel, Eckdaten. Beim Ueberfahren hebt sie ein Ton und
 * keine Bewegung — der Rahmen kennt Uebergaenge von hoechstens 120 ms und kein Wippen.
 */
.haus-mega__kachel,
.haus-mega__tisch {
    display: grid;
    align-content: start;
    gap: var(--haus-gap-1);
    min-width: 0;
    min-height: var(--haus-griff);
    padding: var(--haus-gap-1);
    border-radius: var(--haus-radius-m);
    color: var(--haus-tinte);
    text-decoration: none;
    transition: background var(--haus-schnell);
}

.haus-mega__kachel:hover,
.haus-mega__kachel:focus-visible,
.haus-mega__tisch:hover,
.haus-mega__tisch:focus-visible {
    background: var(--haus-grund-subtil);
}

.haus-mega__kachel[aria-current] .haus-mega__titel {
    text-decoration: underline 2px var(--haus-akzent);
    text-underline-offset: 0.2em;
}

/* Das Fenster haelt 16:9, auch ohne Bild: Dann steht dort ein Rechteck in der Tinte des Sockels und kein Loch. */
.haus-mega__fenster {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--haus-radius-m);
    background: var(--haus-kontrast-grund);
}

.haus-mega__bild {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.haus-mega__text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.haus-mega__titel {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.haus-mega__eckdaten {
    color: var(--haus-tinte-sekundaer);
    font-size: 0.8rem;
    line-height: 1.4;
}

/*
 * EIN FALL OHNE ZIMMER IST EINE ZEILE UND KEINE KACHEL: Er laesst sich ansehen, aber nicht spielen, und ein Bild
 * versprache das Gegenteil. Die Zeile fuehrt auf seine Akte.
 */
.haus-mega__bald {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    gap: 0 var(--haus-gap-2);
    min-height: var(--haus-griff);
    padding: var(--haus-gap-1) var(--haus-gap-2);
    border: 1px solid var(--haus-kante);
    border-radius: var(--haus-radius-m);
    background: var(--haus-grund-subtil);
    color: var(--haus-tinte);
    text-decoration: none;
    transition: border-color var(--haus-schnell);
}

.haus-mega__bald:hover,
.haus-mega__bald:focus-visible {
    border-color: var(--haus-akzent);
}

.haus-mega__bald-marke {
    color: var(--haus-tinte-sekundaer);
    font-family: var(--haus-font-doc);
    font-size: 0.7rem;
    letter-spacing: var(--haus-tracking);
    text-transform: uppercase;
}

.haus-mega__bald-titel {
    font-weight: 600;
}

.haus-mega__alle {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.3em;
    min-height: var(--haus-griff);
    color: var(--haus-tinte);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--haus-kante-stark);
    text-underline-offset: 0.25em;
    transition: text-decoration-color var(--haus-schnell);
}

.haus-mega__alle:hover,
.haus-mega__alle:focus-visible,
.haus-mega__alle[aria-current] {
    text-decoration-color: var(--haus-akzent);
}

/* Vier nebeneinander, wo die Saeule die breite Haelfte einer zweispaltigen Lade ist; im Quadrat auf dem Schreibtisch und im Menue des Telefons. */
.haus-mega__tische {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--haus-gap-2);
}

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

/* Der Name steht mit seinen weichen Trennstellen aus der Sprachdatei da: „Käse­kästchen" bricht dort, wo es darf. */
.haus-mega__tischname {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: manual;
}

/*
 * DER WEG IN DIE ARENA IST DER EINE KNOPF DER LADE: Er nennt die Zahl der Tische, und die kommt aus `AR_POOL`. Papier
 * auf Tinte (17,50:1), beim Ueberfahren Papier auf dem Akzent (5,33:1).
 */
.haus-mega__knopf {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    gap: 0.35em;
    min-height: var(--haus-griff);
    padding: 0 var(--haus-gap-3);
    border: 1px solid var(--haus-tinte);
    border-radius: var(--haus-radius-m);
    background: var(--haus-tinte);
    color: var(--haus-grund-karte);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--haus-schnell), border-color var(--haus-schnell);
}

.haus-mega__knopf:hover,
.haus-mega__knopf:focus-visible,
.haus-mega__knopf[aria-current] {
    border-color: var(--haus-akzent);
    background: var(--haus-akzent);
}

/*
 * DER RAUMCODEKNOPF, und er ist absichtlich kein Navigationspunkt.
 *
 * Die drei Punkte daneben sind Bereiche dieses Hauses; dieser hier ist ein
 * Handgriff: Wer ihn drueckt, hat fuenf Zeichen durchs Telefon bekommen und
 * will an einen Tisch, der schon steht.
 */
/*
 * SEINE KANTE IST --haus-tinte-gedaempft UND NICHT --haus-kante-griff, UND
 * DAS IST EINE NACHGERECHNETE AUSNAHME.
 *
 * --haus-kante-griff ist der Kantenton fuer Bedienelemente und haelt auf jedem
 * hellen Grund seine 3,0. Dieser Knopf liegt aber nicht auf Papier, sondern auf
 * dem GLAS — und das mischt sich ueber einem dunklen Zimmer zu #e8e6e2. Dort
 * faellt der Griffton auf 2,82:1. --haus-tinte-gedaempft haelt an derselben
 * Stelle 4,26:1 und auf dem Papier des Foyers 5,05:1. (Hier stand 5,70 — das
 * ist der Wert eines Tons, der beim Rechnen erwogen und dann nicht genommen
 * wurde.)
 *
 * SEINE FLAECHE IST WEISS UND NICHT DAS GLAS. Ueber einem Zimmer traegt die
 * Karte damit den Unterschied, den die Kante allein nicht traegt; im Foyer
 * traegt ihn der Schatten.
 *
 * SEIN LINKER TRENNER IST EIN HALBES rem, UND ER IST DER EINZIGE DER
 * LEISTE. Die drei Woerter davor sind Bereiche dieses Hauses und stehen in
 * einer Reihe; dieser hier ist ein Handgriff mit eigener Kante und eigener
 * Flaeche. Steht er im selben Takt wie die Woerter daneben, liest er sich
 * als vierter Menuepunkt. Gerechnet: 36 + 8 = 44 px bis zu seiner Kante
 * gegen 36 px zwischen den Woertern an der Obergrenze, 20 + 8 = 28 gegen
 * 20 an der Untergrenze.
 *
 * AUF DEM TELEFON WIRKT ER NICHT, und das ist richtig so: Dort setzt der
 * Zweig `max-width: 45.99rem` `margin-left: auto` — nicht ueber
 * Spezifitaet, die Media-Query hebt sie nicht, sondern ueber die spaetere
 * Quellzeile. Der Knopf bleibt dort rechtsbuendig am Zeilenende.
 *
 * SEIN PADDING-BLOCK BESTIMMT DIE HOEHE NICHT, UND DAS IST NACHGERECHNET:
 * 2 x 8,8 px Polster plus 2 x 1 px Kante = 19,6 px, dazu die hoechste
 * Zeile darin — das SVG mit 1,1rem = 17,6 px, der Text mit 0,85rem x
 * Zeilenhoehe 1,55 bis 1,6 = 21,1 bis 21,8 px. Zusammen 40,7 bis 41,4 px.
 * Die `min-height` traegt die 44 px weiter, die `dev/portal.mjs` an JEDEM
 * `a[href]` dieser Leiste misst — sie darf nicht fallen. Sie traegt sie
 * allerdings nur, weil jeder heutige Gastgeber `box-sizing: border-box`
 * universell setzt; `haus.css` bringt es nicht selbst mit.
 */
.haus-kopf__code {
    display: inline-flex;
    align-items: center;
    gap: var(--haus-gap-2);
    min-height: var(--haus-griff);
    min-width: var(--haus-griff);
    margin-left: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--haus-tinte-gedaempft);
    border-radius: var(--haus-radius-m);
    background: var(--haus-grund-karte);
    box-shadow: var(--haus-schatten-karte);
    color: var(--haus-tinte);
    font-family: var(--haus-font-doc);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    transition: background var(--haus-schnell), border-color var(--haus-schnell);
}

.haus-kopf__code:hover,
.haus-kopf__code:focus-visible {
    border-color: var(--haus-akzent);
    background: var(--haus-grund-subtil);
}

.haus-kopf__code svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: var(--haus-akzent);
    stroke-width: 2;
}

/* ---------------------------------------------------- Das Menue -------- */

/*
 * DAS MENUE IST BREIT KEIN MENUE, SONDERN EINE REIHE.
 *
 * Der Griff steht ab 48rem auf display: none, und das details traegt dort
 * dauerhaft sein open-Attribut (gesetzt vom Skript, im Markup ohnehin da).
 * Darunter ist es ein Griff mit einer Lade, die ueber die ganze Leiste spannt.
 *
 * DIE SCHWELLE HAT EINE STUNDE LANG AUF 50rem GESTANDEN, UND DAS WAR FALSCH.
 *
 * Der fuenfte Bereich brachte die Leiste bei genau 768 Pixeln auf 155 statt
 * 106, und die Lade eine Kante weiter nach oben zu schieben sah nach der
 * billigen Loesung aus. Sie war die teuerste: DIESE LADE IST FUER EINE SPALTE
 * GEBAUT. Bei 768 legte `.haus-nav__fach` seine Kinder nebeneinander, das
 * Aufziehen der Lade brach die Zeile um, der Zeiger verlor das Fach, die Lade
 * fiel zu, die Zeile sprang zurueck — eine Endlosschleife, in der „Startseite"
 * ueber „Faelle" lag und der Punkt „Faelle" nicht mehr anklickbar war.
 * `dev/dev.ps1 portal` hat es gemeldet: „[Tablet] haus-nav-spiele fuehrt nach
 * /faelle → /".
 *
 * Die 155 Pixel kamen ohnehin nicht von den Woertern der Navigation, sondern
 * von den beiden KNOPFWOERTERN daneben — „Kaffeekasse" und „Raumcode
 * eingeben". Die schreiben sich jetzt erst ab 50rem aus; die Lade bleibt, wo
 * sie gebaut und gemessen ist. Nachgemessen auf 320, 375, 390, 480, 640, 736,
 * 768, 800, 900, 992, 1024, 1280, 1440, 1920 und 2560.
 */
.haus-menue {
    display: contents;
}

.haus-menue__griff {
    position: relative;
    display: none;
    align-items: center;
    gap: var(--haus-gap-1);
    min-width: var(--haus-griff);
    min-height: var(--haus-griff);
    padding-inline: var(--haus-gap-2);
    border: 1px solid var(--haus-kante-stark);
    border-radius: var(--haus-radius-m);
    color: var(--haus-tinte);
    font-size: 0.8rem;
    letter-spacing: var(--haus-tracking);
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.haus-menue__griff::-webkit-details-marker {
    display: none;
}

.haus-menue__griff svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
}

/* ---------------------------------------------------- Die Kasse -------- */

/*
 * DIE KAFFEEKASSE STEHT NUR DA, WENN EINE STEHT. Ob ein Weg hinterlegt ist,
 * entscheidet haus_spendenwege(); hier wird nur gekleidet. Sie zeigt auf den
 * eigenen Fuss und nicht nach draussen — deshalb traegt sie keinen der
 * Griffkanten-Toene eines Fremdverweises, sondern denselben wie der Codeknopf.
 */
.haus-kopf__kasse {
    display: inline-flex;
    align-items: center;
    gap: var(--haus-gap-1);
    min-width: var(--haus-griff);
    min-height: var(--haus-griff);
    padding-inline: var(--haus-gap-2);
    border: 1px solid var(--haus-kante-stark);
    border-radius: var(--haus-radius-m);
    color: var(--haus-tinte);
    font-size: 0.8rem;
    letter-spacing: var(--haus-tracking);
    text-transform: uppercase;
    text-decoration: none;
}

.haus-kopf__kasse svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: square;
}

@media (hover: hover) {
    .haus-kopf__kasse:hover,
    .haus-menue__griff:hover {
        border-color: var(--haus-tinte-sekundaer);
    }
}

/*
 * DER SPRACHSCHALTER — derselbe Kasten wie die Kaffeekasse, nur mit zwei
 * Buchstaben statt einem Zeichen. Er zeigt die ZIELSPRACHE (ein einzelner
 * Griff statt eines Paars "DE | EN"), damit er in derselben Groessenklasse
 * bleibt wie jeder andere Handgriff dieser Leiste.
 */
.haus-kopf__sprache {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--haus-griff);
    min-height: var(--haus-griff);
    padding-inline: var(--haus-gap-2);
    border: 1px solid var(--haus-kante-stark);
    border-radius: var(--haus-radius-m);
    color: var(--haus-tinte);
    font-family: var(--haus-font-doc);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: var(--haus-tracking);
    text-transform: uppercase;
    text-decoration: none;
}

@media (hover: hover) {
    .haus-kopf__sprache:hover {
        border-color: var(--haus-tinte-sekundaer);
    }
}

/* Schmal steht nur die Tasse da: „Keine Textwueste im Kopf." */
.haus-kopf__kasse-wort {
    display: none;
}

@media (max-width: 47.99rem) {
    /*
     * Unter der Schwelle ist das Menue eine Lade: Der Griff steht in der
     * Leiste, die Navigation faellt darunter ueber die volle Breite. Ohne
     * Skript steht das details offen da — dann ist es dieselbe Reihe wie
     * frueher, nur unter dem Griff.
     */
    /*
     * DER GRIFF STEHT GANZ RECHTS, und dafuer braucht es `order`: Im Markup
     * kommt die Navigation VOR Kasse und Codeknopf, weil das die Lesereihenfolge
     * ist, in der ein Schirmleser sie vorliest. Gesehen wird auf dem Telefon
     * lieber zuerst, was ein Handgriff ist — Tasse, Code — und der Griff, der
     * alles Weitere aufzieht, zuletzt.
     *
     * KEIN `position: relative` HIER: Der Bezugspunkt der aufgeklappten
     * Navigation ist die Leiste und nicht ihr Griff (siehe unten).
     */
    .haus-menue {
        display: block;
        order: 3;
    }

    .haus-menue__griff {
        display: inline-flex;
    }

    /*
     * DIE NAVIGATION SCHWEBT UNTER DER LEISTE UND SCHIEBT SIE NICHT AUF.
     *
     * Sie stand im Fluss und nahm die volle Zeile ein (`flex: 1 0 100%`). Das
     * geht nur, solange die Gruppe selbst ueber die volle Breite spannt — seit
     * sie rechts neben der Marke steht, waere die Lade so breit wie vier
     * Knoepfe. Absolut gesetzt haengt sie an `.haus-kopf` (klebt oder ist
     * `relative`, beides positioniert) und spannt von Seitenluft zu Seitenluft,
     * dieselbe Rechnung wie bei `.haus-mega__lade` auf dem Schreibtisch.
     *
     * Als schwebende Flaeche traegt sie deshalb auch den Schatten des Rahmens:
     * Auf Naturpapier ist eine weisse Karte ohne ihn vom Grund nicht zu
     * unterscheiden.
     *
     * ZUGEKLAPPT MISST SIE NULL MAL NULL (siehe die Regel darunter).
     */
    .haus-menue[open] .haus-nav {
        position: absolute;
        top: 100%;
        left: var(--haus-luft);
        right: var(--haus-luft);
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--haus-gap-1);
        padding: var(--haus-gap-2);
        border: 1px solid var(--haus-kante-stark);
        border-radius: var(--haus-radius-m);
        background: var(--haus-grund-karte);
        box-shadow: var(--haus-schatten-schwebend);
        /*
         * SIE ROLLT IN SICH. Mit dem aufgeklappten Menue unter „Spiele" ist sie hoeher als jedes Telefon, und weil sie
         * an einer klebenden Leiste haengt, rollt die Seite darunter sie nicht mit: Was unter dem Fensterrand laege,
         * waere unerreichbar. Sieben rem lassen Platz fuer Leiste, Reihenzeile und einen Rand.
         */
        max-height: calc(100vh - 7rem);
        max-height: calc(100dvh - 7rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        /*
         * UND SIE BRICHT NICHT UM. Die Reihe des Schreibtischs darf umbrechen (`flex-wrap: wrap` an `.haus-nav`); in
         * einer Spalte mit Hoechsthoehe hiess dasselbe Wort: Was nicht mehr hineinpasst, steht in einer zweiten Spalte
         * RECHTS NEBEN dem Fenster. Mit offenem „Spiele" lagen Story, Magazin und Projekt bei 374 bis 487 Pixeln.
         */
        flex-wrap: nowrap;
    }

    /*
     * EIN ZUGEKLAPPTES `<details>` BLENDET SEINEN INHALT NUR AUS, UND EINE
     * ABSOLUT GESETZTE NAVIGATION LIEGT DANN IM FALSCHEN KASTEN. Chrome haengt
     * dem Inhalt `content-visibility: hidden` an, und das ist Layout-
     * Containment: Der Bezugspunkt von `left`/`right` ist dann nicht mehr die
     * Leiste, sondern der 44 Pixel breite Griff. Wer die Geometrie abfragt,
     * bekam Woerter, die bis 444 Pixel in ein Fenster von 375 ragten —
     * `ueberlauf()` in `dev/hub.mjs` hat es auf jeder Seite gemeldet.
     * Zugeklappt nimmt sie deshalb gar keinen Platz ein.
     */
    .haus-menue:not([open]) .haus-nav {
        display: none;
    }

    /*
     * IM MENUE STEHEN DIE WOERTER AUSGESCHRIEBEN. Die kurzen Fassungen sind
     * Notwoerter fuer eine Leiste, in der die Breite knapp ist; hier hat jeder
     * Punkt die volle Zeile. Gilt nur unter dieser Schwelle: Das `open` steht
     * breit ebenfalls (gesetzt vom Skript), und dort sind die kurzen Woerter
     * die Zusage von 73 Pixeln.
     */
    .haus-menue[open] .haus-nav__lang {
        display: inline;
    }

    .haus-menue[open] .haus-nav__kurz {
        display: none;
    }

    .haus-menue[open] .haus-nav__punkt {
        justify-content: flex-start;
    }

    /* Im Menue hat jeder Punkt die ganze Zeile, und die Live-Marke steht wieder im Fluss hinter der Ziffer. */
    .haus-menue[open] .haus-nav__live {
        position: static;
        margin-left: 0.45em;
    }

    /*
     * IM MENUE DES TELEFONS IST DIE LADE UNTER „SPIELE" KEINE LADE, SONDERN EIN ABSATZ: im Fluss, ueber die volle
     * Breite, ohne Schatten — ein schwebender Kasten in einem schwebenden Kasten waere einer zu viel. Die Kacheln
     * liegen dort als Zeilen, Bild links und Titel daneben; die Tische der Arena bleiben ein kleines Raster.
     */
    .haus-mega {
        display: block;
    }

    .haus-mega__lade {
        position: static;
        max-height: none;
        overflow: visible;
        padding: var(--haus-gap-1) 0 var(--haus-gap-2);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .haus-mega__innen,
    .haus-mega__innen--ohne-pc {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--haus-gap-3);
    }

    .haus-mega__kacheln {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--haus-gap-1);
    }

    .haus-mega__kachel {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: center;
        gap: var(--haus-gap-2);
    }

    .haus-mega__tische {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * DIE LADE SCHIEBT SICH AUF, statt zu erscheinen: Sie gleitet in 0,18 Sekunden
 * ein halbes rem von oben herein und blendet dabei ein. Das ist die Antwort
 * auf einen Handgriff und keine Bewegung, die von selbst laeuft — und sie
 * steht unter dem Riegel jeder Bewegung dieses Hauses: gar nichts bei
 * `prefers-reduced-motion`, und nur dort, wo es ein Menue gibt (unter 48rem;
 * darueber ist das `open` ein Dauerzustand, und die Reihe waere bei jedem
 * Laden eingeblendet). Die Kurve laeuft weich aus, denn ein Menue, das
 * ankommt, soll nicht rucken. Eine Gegenbewegung gibt es nicht: Ein
 * zugeklapptes `<details>` blendet seinen Inhalt sofort aus.
 */
@keyframes haus-nav-auf {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
    .haus-menue[open] .haus-nav {
        animation: haus-nav-auf 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
}

/*
 * DER SCHLEIER HINTER DEM OFFENEN MENUE (.haus-scrim, gesetzt von haus_kopf()).
 *
 * Er faengt jeden Klick ausserhalb ab: Wer daneben tippt, schliesst das Menue
 * und drueckt dabei nichts auf der Seite darunter. Vorher fiel der Tipp durch,
 * schloss das Menue UND loeste den Link aus, der darunter lag. Er steht knapp
 * unter der Leiste, also ueber jedem Inhalt und unter Kopf und Menue.
 *
 * DAS STILBLATT SCHALTET IHN UND NICHT DAS SKRIPT: Er steht, solange die Leiste
 * ein offenes Menue traegt (:has), und damit im selben Bild wie die Lade selbst.
 * Ueber das Ereignis `toggle` kam er gemessen ein Bild spaeter — bei
 * abgeschalteter Bewegung ein Bild lang eine offene Lade ueber einer hellen
 * Seite. Das Skript stellt ihn nur scharf: OHNE SKRIPT bleibt er `hidden`, denn
 * dort steht die Lade beim Laden offen ueber der Seite, und ein Schleier, der
 * sich nicht wegtippen liesse, waere eine Falle. Ein Browser ohne :has()
 * verwirft die Regel und zeigt die Lade wie vorher, nur ohne Schleier. Ab 48rem
 * gibt es ihn gar nicht.
 *
 * Der Riegel `hidden` steht hier selbst: Der Schleier sitzt ausserhalb der
 * Leiste, und der von `.haus-kopf [hidden]` reicht nicht bis zu ihm.
 */
.haus-scrim {
    display: none;
}

@media (max-width: 47.99rem) {
    .haus-kopf:has(.haus-menue[open]) ~ .haus-scrim:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--haus-ebene-kopf) - 1);
        background: var(--haus-scrim);
        -webkit-backdrop-filter: var(--haus-scrim-blur);
        backdrop-filter: var(--haus-scrim-blur);
    }
}

/* Dieselbe Schwelle wie beim Codeknopf daneben: zwei Handgriffe, ein Umbruch — im Zimmer eine spaeter. */
@media (min-width: 72rem) {
    .haus-kopf:not(.haus-kopf--reihe) .haus-kopf__kasse-wort {
        display: inline;
    }
}

@media (min-width: 86rem) {
    .haus-kopf--reihe .haus-kopf__kasse-wort {
        display: inline;
    }
}

/* Genau eine der beiden Aufschriften steht da — nie beide, nie keine. */
.haus-kopf__code-kurz,
.haus-nav__kurz {
    display: inline;
}

.haus-kopf__code-lang,
.haus-nav__lang {
    display: none;
}

/*
 * EINZEILIG AUF DEM TELEFON: MARKE LINKS, VIER HANDGRIFFE RECHTS.
 *
 * Die Leiste war zweizeilig (106 Pixel), solange die Navigation als Reihe
 * dastand und mit Breadcrumb und Codeknopf um die Breite stritt. Seit die
 * Bereiche im Menue liegen, sind es nur noch Marke, Tasse, Code, Sprache und
 * Griff — und die passen bei 375 px in eine Zeile. Die Gruppe wird deshalb
 * nicht mehr auf eine eigene Zeile gezwungen, sondern steht ueber
 * `margin-left: auto` (Grundregel) am rechten Rand neben der Marke.
 *
 * DIE BREADCRUMB FLIESST IN EINE ZWEITE, DEZENTE ZEILE (Zimmer und Brett).
 * `order: 1` stellt sie hinter die Gruppe, `flex-basis: 100%` erzwingt den
 * Umbruch. Foyer, Startseite und Vitrine tragen keine und bleiben einzeilig.
 *
 * DER UMBRUCHPUNKT IST EINER. Er stand im Foyer auf `max-width: 47.99rem`
 * (Schreibtisch als Grundstellung) und in den Zimmern auf `min-width: 46rem`
 * (Telefon als Grundstellung). Im Band von 736 bis 767,84 Pixeln stand das
 * Zimmer damit in der Schreibtischfassung und das Foyer gleichzeitig in der
 * Telefonfassung — und KEIN Lauf sieht dieses Band an. Es gilt jetzt ueberall
 * 46rem, Telefon zuerst.
 */
@media (max-width: 45.99rem) {
    .haus-kopf__innen {
        column-gap: var(--haus-gap-2);
    }

    .haus-marke__zeichen {
        height: 22px;
    }

    .haus-marke__wort {
        font-size: 1rem;
    }

    .haus-kopf__reihe {
        flex: 1 0 100%;
        order: 1;
        font-size: 0.68rem;
    }

    /*
     * DIE GRUPPE SCHRUMPFT NICHT: Passt sie nicht neben die Marke (unter rund
     * 344 px), bricht sie als Ganzes in eine zweite Zeile und steht dort
     * rechtsbuendig, statt dass ihr Griff allein herunterfaellt. Der Abstand
     * zwischen den vier Handgriffen ist der kleinste Token: Jeder misst 44 px,
     * und 375 px lassen fuer Marke plus vier Knoepfe wenig Reserve.
     */
    .haus-kopf__gruppe {
        flex: 0 0 auto;
        gap: var(--haus-gap-1);
    }

    .haus-nav__punkt {
        font-size: 0.95rem;
    }

    /*
     * HIER STAND DIE KURZFORM `padding: 0 …`, UND SIE RAEUMTE DIE HAELFTE
     * EINER FRISCHEN ABSICHT WEG: Seit die Grundregel 0,55rem Polster oben
     * und unten fuehrt, setzte diese Zeile es stillschweigend auf null.
     * Sichtbar war das nie — die `min-height` traegt die 44 px in beiden
     * Faellen —, aber es ist die Stelle, an der der naechste Umbau falsch
     * abbiegt. `margin-left: 0` dagegen SOLL ueberschreiben: Der 0,5rem-
     * Trenner der Grundregel setzt den Codeknopf von den Woertern der
     * Navigation ab; hier stehen keine daneben, und den Abstand zwischen den
     * Handgriffen macht die Gruppe. Ein `auto` an dieser Stelle teilte sich
     * den freien Platz mit der Tasse davor und schob beide auseinander.
     */
    .haus-kopf__code {
        margin-left: 0;
        padding-inline: var(--haus-gap-2);
        font-size: 0.8rem;
    }
}

/*
 * DIE WOERTER AN DEN HANDGRIFFEN WEICHEN IN ZWEI STUFEN — und die Zahlen sind
 * nachgerechnet, nicht geschaetzt.
 *
 * Marke, Tasse, Code, Sprache und Griff brauchen mit beiden Woertern rund
 * 395 px, ohne das Wort am Griff 351, ohne beide 311 — gegen eine Innenbreite
 * von Fensterbreite minus 36,8 px Seitenluft. Unter 30rem faellt deshalb
 * „Menue" weg (bei 430 px fehlten sonst zwei Pixel), unter 25rem auch „Code":
 * bei 375 px bleiben so 27 Pixel Reserve, bei 360 zwoelf. Ganz ohne Wort
 * sind beide Knoepfe trotzdem benannt — `aria-label` traegt den Namen, und die
 * Spans sind `aria-hidden`.
 */
@media (max-width: 29.99rem) {
    .haus-menue__griff {
        justify-content: center;
    }

    .haus-menue__wort {
        display: none;
    }
}

@media (max-width: 24.99rem) {
    .haus-kopf__code {
        justify-content: center;
    }

    .haus-kopf__code-kurz {
        display: none;
    }

    /* Unter 400 Pixeln steht die Live-Marke nur als Punkt: Die Zahl sagt der Punkt am Griff ohnehin nicht, und im
       Menue steht sie neben „Spiele 20“ als dritte Ziffer auf engstem Raum. */
    .haus-nav__live {
        padding: 0;
        border: 0;
    }

    .haus-nav__live-zahl {
        display: none;
    }
}

/*
 * AUF 320 PIXELN STEHT DIE LEISTE IN EINER ZEILE — garantiert, und die Zahlen
 * sind gemessen. Marke (106,6), Abstand (11,2) und die Gruppe aus vier
 * Handgriffen (192,8) brauchen mit zweimal 18,4 Pixel Seitenluft 347,4 Pixel;
 * darunter fiel die Gruppe in eine zweite Zeile, und die Leiste stand auf 106
 * statt auf 56. Unter 360 Pixeln (22,5rem) gibt der Rahmen deshalb her:
 *
 *   Abstand Marke — Gruppe   11,2 → 5,6    (--haus-gap-1)
 *   Signet — Wortmarke       11,2 → 5,6
 *   Seitenluft je Kante      18,4 → 11,2   (--haus-gap-2)
 *   Wortmarke                16 → 14,4 px  (77 → 69 Pixel breit)
 *
 * Die vier Handgriffe bleiben 44 x 44 Pixel gross und stehen weiter im
 * kleinsten Abstand: Die Zusage, dass jedes Ziel anfassbar bleibt, gilt vor
 * jeder Enge. Ab 360 Pixeln aendert sich nichts.
 *
 * DAS MENUE ZIEHT MIT: Es spannt von Seitenluft zu Seitenluft, und die ist
 * hier die schmalere. Sonst laege seine Kante sieben Pixel innerhalb der
 * Marke, auf der es haengt.
 */
@media (max-width: 22.49rem) {
    .haus-kopf__innen {
        column-gap: var(--haus-gap-1);
        padding-inline: var(--haus-gap-2);
    }

    .haus-marke {
        gap: var(--haus-gap-1);
    }

    .haus-marke__wort {
        font-size: 0.9rem;
    }

    .haus-menue[open] .haus-nav {
        left: var(--haus-gap-2);
        right: var(--haus-gap-2);
    }
}

/*
 * DIE LANGEN WOERTER UND IHRE SCHWELLEN — gemessen, nicht geschaetzt.
 *
 * Die Leiste hatte sechs Bereiche und stand deshalb mit langen Woertern erst ab 92rem (Foyer) und 112rem (Zimmer) in
 * einer Zeile; darunter trugen alle Punkte ihre kurzen Fassungen. Seit die vier Gattungen im Menue unter „Spiele"
 * stehen, hat sie vier Punkte, und gemessen passen (mit Systemschrift unter Windows, Deutsch und Englisch):
 *
 *   „Über das Projekt" allein        Foyer ab  880 px   Zimmer ab 1104 px
 *   dazu Kaffeekasse und Codewort    Foyer ab 1088 px   Zimmer ab 1312 px
 *
 * Die Schwellen stehen eine Handbreit darueber — 60 und 72rem fuer das Wort, 72 und 86rem fuer die Knoepfe —, weil
 * die Systemschrift eines Mac breiter laeuft als Segoe UI. Wer einen Punkt dazunimmt, misst neu: Die Zusage ist eine
 * Leiste von 73 Pixeln ab 992 im Foyer, und im Band darunter darf sie nicht hoeher springen als links und rechts davon.
 *
 * ZWEI SCHWELLEN FUER ZWEI ZUSAMMENHAENGE UND NICHT EINE REGEL, DIE EINE ANDERE ZURUECKNIMMT: Der Kopf eines Zimmers
 * traegt zusaetzlich die Reihenzeile und kennzeichnet das selbst (`haus-kopf--reihe`); `:not(.haus-kopf--reihe)` und
 * `.haus-kopf--reihe` schliessen einander aus. Die Knoepfe sind Handgriffe und keine Bereiche — man findet sie am
 * Zeichen —, deshalb schreiben sie sich spaeter aus als das Wort daneben. Vorgelesen wird immer die lange Fassung.
 */
@media (min-width: 72rem) {
    .haus-kopf:not(.haus-kopf--reihe) .haus-kopf__code-lang {
        display: inline;
    }

    .haus-kopf:not(.haus-kopf--reihe) .haus-kopf__code-kurz {
        display: none;
    }
}

@media (min-width: 86rem) {
    .haus-kopf--reihe .haus-kopf__code-lang {
        display: inline;
    }

    .haus-kopf--reihe .haus-kopf__code-kurz {
        display: none;
    }
}

@media (min-width: 60rem) {
    .haus-kopf:not(.haus-kopf--reihe) .haus-nav__lang {
        display: inline;
    }

    .haus-kopf:not(.haus-kopf--reihe) .haus-nav__kurz {
        display: none;
    }
}

@media (min-width: 72rem) {
    .haus-kopf--reihe .haus-nav__lang {
        display: inline;
    }

    .haus-kopf--reihe .haus-nav__kurz {
        display: none;
    }
}

/*
 * DAS BAND VON 48 BIS 50rem, UND ES IST DAS ENGSTE DER LEISTE: Dort loest die Reihe das Menue des Telefons ab, und
 * die englischen Woerter („Games", „Magazine") sind zusammen dreizehn Pixel laenger als die deutschen. Bei genau 768
 * Pixeln fehlten der Leiste neun, und sie stand auf 106 statt 73. Die Abstaende geben sie her, nur hier.
 */
@media (min-width: 48rem) and (max-width: 49.99rem) {
    .haus-kopf {
        --haus-nav-gap: 0.75rem;
    }
}

/* ==================================================== Der Fuss ========== */

/*
 * DER FUSS IST EINE FLAECHE UND KEINE ZEILE.
 *
 * Er war im Foyer vier Spalten und in den Zimmern eine Zeile mit vier
 * Knoepfen; darueber klebte in beiden Zimmern zusaetzlich ein Anzeigenblock
 * mit derselben Adresse, die im Fuss ohnehin steht. Drei Fusszeilen auf einer
 * Seite sind zwei zu viel.
 *
 * DIE VIERTE SPALTE IST DIE KASSE, und sie steht NUR da, wenn ein Weg in der
 * `.env` steht — lieber kein Knopf als einer ins Leere.
 */
/*
 * DIE OBERE KANTE IST EIN HAAR UND KEIN BALKEN.
 *
 * Sie stand auf drei Pixeln in `--haus-blech-3` — ein hellgrauer Streifen
 * quer unter einer Zeitung, der wie ein Rest aussah und nicht wie ein
 * Abschluss. Getrennt wird hier ohnehin durch den TON: Der Fuss ist die
 * dunkelste Flaeche dieses Hauses. Ein Pixel in derselben Kante, die auch die
 * Leiste oben traegt, sagt dasselbe leiser — und beide Raender des Hauses
 * sprechen damit dieselbe Sprache.
 */
.haus-fuss {
    margin-top: var(--haus-gap-5);
    border-top: 1px solid var(--haus-kontrast-kante);
    background: var(--haus-kontrast-grund);
    color: var(--haus-kontrast-gedaempft);
    font-family: var(--haus-font-text);
    font-size: 0.85rem;
    line-height: 1.5;
}

.haus-fuss__innen {
    display: grid;
    gap: var(--haus-gap-4);
    max-width: var(--haus-shell);
    margin: 0 auto;
    padding: var(--haus-gap-6) var(--haus-luft) var(--haus-gap-4);
}

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

@media (min-width: 64rem) {
    .haus-fuss__innen {
        /*
         * VIER SPALTEN, UND DIE BREITESTE IST DIE MARKE.
         *
         * Sie stand auf `1.5fr 1fr 1fr 1.6fr`, und damit war die KASSE die
         * breiteste Spalte des Fusses — ein Spendenkasten, breiter als alles
         * andere. Die beiden Linklisten dazwischen bekamen mehr Platz, als
         * ihre laengste Zeile braucht, und liessen rechts von jedem Wort
         * einen Streifen Nacht stehen.
         *
         * Jetzt traegt die Marke die Breite (sie hat als Einzige einen
         * Fliesstext), die Listen bekommen, was ihre Zeilen brauchen, und die
         * Kasse steht als schmalste der vier da.
         */
        /*
         * DIE ZAHLEN SIND ZWEIMAL GEWANDERT, UND BEIDE MALE MIT DEM SIEGEL.
         *
         * Sie standen auf `1.9fr 1.1fr 1fr 1.25fr`, dann auf
         * `1.7fr 1fr 1.2fr 1.2fr` — die dritte Spalte trug damals das runde
         * Siegel und brauchte dafuer Breite. Seit die Pille quer liegt und
         * die beiden Listenspalten GEMEINSAM ueberspannt, braucht keine von
         * beiden mehr Platz als ihre laengste Zeile: Es sind vier Woerter,
         * und das laengste ist „Release-Benachrichtigung".
         *
         * Was dabei frei wird, bekommt die Marke. Sie ist die einzige Spalte
         * mit Fliesstext, und der ist mit diesem Umbau von einer Zeile auf
         * vier gewachsen; 1,4fr von 4,6fr sind rund zweiunddreissig Prozent,
         * die beiden Listen je einundzwanzig, die Kasse sechsundzwanzig.
         */
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        column-gap: var(--haus-gap-5);
    }

    /*
     * DIE MARKENSPALTE HAELT ABSTAND NACH RECHTS.
     *
     * Der Rasterabstand allein reichte nicht: Ihr Satz endete mit der letzten
     * Zeile genau dort, wo die Ueberschrift „SPIELE" beginnt, und zwei
     * Spalten, zwischen denen nur eine Luecke steht, lesen sich als eine. Der
     * Puffer ist `--haus-gap-5` und keine eigene Zahl — die Skala dieses
     * Rahmens hat sechs Stufen, und eine siebte fuer genau eine Stelle waere
     * die erste, die beim naechsten Umbau niemand mehr zuordnen kann.
     *
     * NUR AB 64rem. Darunter liegen die Spalten unter- statt nebeneinander,
     * und ein rechter Rand waere dort verschenkte Zeile.
     *
     * UND BEIDE KLASSEN STEHEN IM SELEKTOR, weil eine allein verliert.
     * `.haus-fuss__spalte` setzt weiter unten im Stilblatt `padding: 0`, hat
     * dieselbe Spezifitaet wie `--marke` und steht SPAETER — der Puffer war
     * gemessene null Pixel, und zwar lautlos. Wer hier eine zweite
     * Ausnahme baut, prueft sie am Schirm und nicht im Quelltext.
     */
    .haus-fuss__spalte.haus-fuss__spalte--marke {
        padding-right: var(--haus-gap-5);
    }
}

.haus-fuss__spalte {
    display: flex;
    flex-direction: column;
    gap: var(--haus-gap-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/*
 * DIE KASSE STEHT AUF EINER EIGENEN FLAECHE.
 *
 * Sie war die vierte von vier Spalten und sah aus wie ein Rest: zwei
 * Linklisten, ein Absatz, und daneben drei Knoepfe ohne Grund unter den
 * Fuessen. Was sie absetzt, ist eine Aufhellung um einen Schritt und eine
 * Kante von einem Pixel.
 *
 * EINE RUNDUNG VON ZWOELF PIXELN, UND KEIN WEICHER SCHATTEN. Der Sockel ist
 * Moebel und kein Bild — die Begruendung steht vollstaendig beim Token
 * `--haus-radius-l`. Ein Schatten waere hier trotzdem falsch: Auf einer
 * dunklen Flaeche sieht man ihn nicht, und was man nicht sieht, baut man nicht
 * ein. Was die Karte abhebt, ist ihr Ton und ihre Kante.
 *
 * DER TON IST `--haus-kontrast-karte` UND DIE KNOEPFE DARIN LIEGEN TIEFER,
 * NICHT HOEHER — und das ist eine nachgerechnete Zahl, kein Geschmack. Die
 * drei Wege stehen auf `--haus-kontrast-grund` (#121214), die Karte auf
 * #1a1a1e. Ihre Hoverkante (`--haus-akzent`) haelt damit 3,51:1 gegen die
 * eigene Flaeche und 3,26:1 gegen die Karte; laege der Knopf HELLER als seine
 * Karte, fiele der eine Wert auf 2,90 und damit unter die 3,0, die WCAG
 * 1.4.11 fuer Nichttext verlangt.
 *
 * Es ist dieselbe Papierlogik wie oben, nur von der anderen Seite: Auf einem
 * hellen Blatt liegt eine Karte OBEN AUF, in einem dunklen Sockel ist ein
 * Knopf eine VERTIEFUNG.
 *
 * `align-self: start` haelt sie so hoch wie ihr Inhalt. Ueber die volle
 * Rasterhoehe gezogen stuende sie als leerer Kasten neben drei Textspalten.
 */
.haus-fuss__spalte--kasse {
    align-self: start;
    /*
     * IHRE UEBERSCHRIFT STEHT AUF DERSELBEN LINIE WIE DIE ANDEREN DREI.
     *
     * Die Karte hat ein Polster, ihre drei Nachbarn haben keines — „FLUCHTKASSE"
     * sass damit achtzehn Pixel tiefer als „DIE FAELLE" und „DAS PROJEKT", und
     * eine Reihe von vier Ueberschriften, von denen eine nach unten rutscht,
     * liest sich als Fehler. Der negative Vorschub ist genau das Polster: Die
     * Karte beginnt eine Polsterhoehe hoeher, ihre Schrift danach auf der
     * gemeinsamen Linie.
     */
    margin-top: calc(var(--haus-gap-3) * -1);
    padding: var(--haus-gap-3);
    border: 1px solid var(--haus-kontrast-kante);
    border-radius: var(--haus-radius-l);
    background: var(--haus-kontrast-karte);
}

/*
 * DIE UEBERSCHRIFT SETZT SICH SELBST. `h2` traegt in beiden Zimmern eigene
 * Groessen, Familien und `text-wrap: balance` aus `base.css` — ein Rahmen, der
 * sich darauf verlaesst, sieht in jedem Haus anders aus. Genau dieselbe
 * Notwehr wie beim Ankreuzfeld des Meldebogens.
 */
.haus-fuss__titel {
    margin: 0;
    color: var(--haus-kontrast-tinte);
    font-family: var(--haus-font-doc);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--haus-tracking);
    line-height: 1.4;
    text-transform: uppercase;
    text-wrap: wrap;
}

.haus-fuss__marke {
    display: inline-flex;
    align-items: center;
    gap: var(--haus-gap-2);
    min-height: var(--haus-griff);
    color: var(--haus-kontrast-tinte);
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
}

.haus-fuss__marke img {
    width: auto;
    height: 34px;
    max-width: none;
    filter: invert(1);
}

.haus-fuss__haus {
    max-width: none;
    margin: 0;
    text-wrap: pretty;
}

/*
 * „ENTWICKELT VON" STEHT ALLEIN AUF SEINER ZEILE, wenn darunter ein Zeichen
 * kommt. Als Schluss des Fliesstextabsatzes haette es die Wortmarke wie eine
 * Bildunterschrift aussehen lassen; als eigene Zeile ist es, was es ist —
 * eine Anrede an das, was folgt.
 *
 * UND SIE SETZT SICH AB. Der Satz darueber ist mit dem Umbau von einer Zeile
 * auf vier gewachsen; mit dem kleinen Vorschub daneben las sich die
 * Unterschrift wie seine fuenfte. Der groessere ist der Unterschied zwischen
 * „und ausserdem" und „gezeichnet:".
 */
.haus-fuss__haus--von {
    margin-top: var(--haus-gap-4);
    color: var(--haus-kontrast-still);
    font-size: 0.78rem;
}

/*
 * DIE WORTMARKE DER WERKSTATT.
 *
 * Sie steht an der Stelle, an der bis hierher „Sascha Liesener" als Name im
 * Satz stand, und sie tut zwei Dinge auf einmal: Sie traegt denselben Verweis,
 * und sie macht die erste Spalte so tief wie die Kassenkarte daneben. Vier
 * Spalten, von denen drei nach zweihundert Pixeln aufhoeren, stehen als Treppe
 * da.
 *
 * SIE BEKOMMT KEINEN `filter: invert(1)` WIE DAS SIGNUM IN DER MARKE DANEBEN.
 * Das Signum ist eine Silhouette in Druckerschwaerze — auf dem dunklen Sockel
 * umgedreht steht es als Praegestempel da. (In der KOPFLEISTE steht es seit
 * dem Umbau unveraendert: Dort liegt Papier, und darauf ist Druckerschwaerze
 * genau richtig.) Eine ZWEIFARBIGE Wortmarke dreht sich dagegen nirgends um:
 * Aus Tuerkis wuerde Rot. Was hier liegen muss, ist eine Fassung fuer dunklen
 * Grund; liegt keine Datei, bleibt es beim Namen (siehe `haus_werkstatt_da()`).
 *
 * Die Hoehe ist gedeckelt und die Breite frei: Eine Wortmarke waechst in die
 * Laenge, und ein Kasten, der sie auf 260 Pixel zwingt, staucht sie auf einem
 * Telefon. `max-width: 100%` faengt den umgekehrten Fall.
 */
.haus-fuss__werkstatt {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: var(--haus-griff);
    opacity: 0.86;
    transition: opacity var(--haus-schnell);
}

.haus-fuss__werkstatt:hover,
.haus-fuss__werkstatt:focus-visible {
    opacity: 1;
}

.haus-fuss__werkstatt img {
    display: block;
    width: auto;
    height: clamp(2.1rem, 3.4vw, 2.9rem);
    max-width: 100%;
}

.haus-fuss__herkunft {
    display: block;
    margin-top: var(--haus-gap-1);
    color: var(--haus-kontrast-still);
    font-size: 0.78rem;
}

/*
 * DAS SIEGEL DES PORTALS, UNTEN IN DER PROJEKTSPALTE.
 *
 * EINE TIPPFLAECHE IST ES ALS GANZES, und deshalb steht hier kein
 * `min-height` und keine 44er-Regel: Das Bild ist mindestens 6,5rem im
 * Quadrat und damit weit ueber jedem Mindestmass — die Regel, an der
 * `.haus-fuss__link--satz` schon einmal haengengeblieben ist, gilt fuer
 * WOERTER in einer Zeile.
 *
 * DIE BREITE IST GEDECKELT UND NICHT FEST. `clamp` haelt es zwischen 6,5 und
 * 8rem, also zwischen rund 104 und 128 Pixeln; `max-width: 100%` faengt die
 * schmale Spalte auf einem Telefon. Groesser waere es ein Logo, kleiner eine
 * Briefmarke, auf der „escapers.de" nicht mehr zu lesen ist.
 *
 * ES UEBERSPANNTE EINMAL ZWEI SPALTEN. Das war die Antwort auf eine
 * querliegende Pille von vier zu eins und kostete ein Untergitter, eine feste
 * Zelle fuer die Kasse und drei Spezifitaetsfallen. Rund passt es in seine
 * Spalte, und das Raster ist wieder vier gleichrangige Felder.
 *
 * KEIN SCHATTEN, KEINE RUNDUNG, KEIN VERLAUF. Das Bild bringt seinen eigenen
 * Ring mit; was hier daraufkaeme, waere die Verbotsliste aus Abschnitt 7 der
 * verbindlichen Quelle. Was es beim Ueberfahren hebt, ist dieselbe Deckung
 * wie bei der Wortmarke der Werkstatt daneben — eine Bewegung waere eine
 * zweite Sprache fuer dieselbe Auskunft.
 */
.haus-fuss__siegel {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    margin-top: var(--haus-gap-2);
    text-decoration: none;
    opacity: 0.88;
    transition: opacity var(--haus-schnell);
}

.haus-fuss__siegel:hover,
.haus-fuss__siegel:focus-visible {
    opacity: 1;
}

.haus-fuss__siegel img {
    display: block;
    width: clamp(6.5rem, 9vw, 8rem);
    height: auto;
    max-width: 100%;
}

.haus-fuss__liste {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.haus-fuss__liste li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * IN DER FALLLISTE IST DER LINK EIN SATZ UND KEINE ZEILE AUS KAESTCHEN.
 *
 * `.haus-fuss__link` ist von Haus aus ein `inline-flex` — richtig fuer die
 * Knopfzeile im Boden, falsch hier: Der Name des Falls und der Zusatz
 * „· in Vorbereitung" wurden damit zu ZWEI Flex-Elementen nebeneinander.
 * „Buchmafia #3 · Sendeschluss" brach in sich auf zwei Zeilen um, und der
 * Zusatz stand rechts daneben auf halber Hoehe, als gehoere er nicht dazu.
 *
 * Als Block fliesst beides in einer Zeile weiter und bricht dort um, wo eine
 * Zeile umbricht. Die vierundvierzig Pixel bleiben ueber `min-height`; das
 * Polster setzt den Text darin mittig genug, ohne dass eine zweite Zeile den
 * Kasten aufreisst.
 */
.haus-fuss__liste .haus-fuss__link {
    display: block;
    /*
     * DAS POLSTER IST KLEINER ALS DIE TIPPFLAECHE, UND DAS IST KEIN
     * WIDERSPRUCH: `min-height: 44px` steht an `.haus-fuss__link` und bleibt.
     * Bei 0,7 rem standen zwei Falltitel vierzig Pixel auseinander und lasen
     * sich als zwei Listen; der Griff ist derselbe, der Abstand nicht.
     */
    padding-block: 0.35rem;
}

/*
 * EIN LINK ODER EIN KNOPF, UND BEIDE SEHEN GLEICH AUS.
 *
 * Im Foyer sind Impressum und Datenschutz echte Adressen — ohne JavaScript
 * muessen sie erreichbar bleiben. In den Zimmern liegen beide Texte im
 * Dokument und oeffnen als Overlay, damit niemand mitten in einer Huerde die
 * Seite verlaesst. Die Gestalt ist dieselbe; die Bauform entscheidet der
 * Aufrufer.
 */
.haus-fuss__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--haus-griff);
    min-width: var(--haus-griff);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--haus-kontrast-gedaempft);
    font: inherit;
    letter-spacing: normal;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/*
 * EIN LINK MITTEN IN EINEM SATZ IST KEINE TIPPFLAECHE VON 44 PIXELN.
 *
 * "Entwickelt von Sascha Liesener." ist ein Satz mit einem Namen darin. Mit der
 * Grundstellung daneben (inline-flex, 44 px hoch und breit) riss dieser Name
 * die Textzeile auf Knopfhoehe auf und stand als Block mitten im Absatz. Die
 * 44 Pixel gelten fuer einen Griff, den jemand SUCHT; ein Wort im Fliesstext
 * ist keiner, und WCAG 2.5.8 nimmt Links im Satz ausdruecklich aus.
 */
.haus-fuss__link--satz {
    display: inline;
    min-height: 0;
    min-width: 0;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.haus-fuss__link:hover,
.haus-fuss__link:focus-visible {
    color: var(--haus-kontrast-tinte);
    transform: none;
}

/*
 * ABGESCHALTETER TON: durchgestrichen wie alles, was kassiert wurde.
 *
 * Den Schalter gibt es nur im Zimmer — die Regel steht trotzdem hier, beim
 * Fuss, dem er gehoert. Der Strich ist die zweite Auskunft neben der Farbe:
 * „Keine Farbe als einziger Informationstraeger" gilt auch fuer einen
 * Schalter, der aus ist.
 */
.haus-fuss__link[aria-pressed='false'] {
    color: var(--haus-kontrast-still);
    text-decoration: line-through;
    text-decoration-color: var(--haus-akzent);
}

/*
 * DREI WEGE UNTEREINANDER, UND SIE FUELLEN IHRE KARTE.
 *
 * Nebeneinander fiel „Buy Me a Coffee" als Einziger um und stand allein in
 * einer zweiten Reihe — drei Knoepfe in zwei Reihen, von denen die zweite halb
 * leer ist. Als Raster sind es drei gleich breite Zeilen, auf einem Breitbild
 * wie auf einem Telefon dasselbe Bild.
 *
 * `1fr` je Zeile statt `auto`: Ohne die Zeile richtet sich die Hoehe nach dem
 * Inhalt, und die drei Knoepfe sind gleich hoch — das ist derselbe Wert, nur
 * ausgesprochen. Was zaehlt, ist die Breite, und die kommt vom Raster.
 */
.haus-fuss__wege {
    display: grid;
    gap: var(--haus-gap-1);
    max-width: none;
    margin: var(--haus-gap-1) 0 0;
}

/*
 * HIER STAND EINE REGEL, DIE NICHTS TAT.
 *
 * `.haus-fuss__spalte--kasse .haus-fuss__weg { justify-content: flex-start }`
 * sollte die drei Knoepfe linksbuendig ausrichten — und setzte genau den Wert,
 * der ohnehin galt: `.haus-fuss__weg` deklariert kein `justify-content`, und
 * der Anfangswert `normal` verhaelt sich im Flexcontainer wie `flex-start`.
 * Dass die Knoepfe ihre Karte fuellen, macht `.haus-fuss__wege` als Raster,
 * dessen Elemente von Haus aus strecken. Kein toter Code, auch keiner, der
 * nur wie eine Absicht aussieht.
 */

/*
 * DIE SPENDENKNOEPFE TRAGEN IHR ZEICHEN ALS SVG-PFAD.
 *
 * Kein Logo eines fremden Hauses und keine Icon-Schrift: Ein Markenzeichen von
 * PayPal einzubinden hiesse, es entweder von dort zu laden (eine Fremdanfrage,
 * die es hier nicht gibt) oder es nachzuzeichnen (eine Markenfrage). Was
 * dasteht, ist eine Form — Muenze, Becher — und daneben das Wort.
 */
.haus-fuss__weg {
    display: inline-flex;
    align-items: center;
    gap: var(--haus-gap-2);
    min-height: var(--haus-griff);
    min-width: var(--haus-griff);
    padding: 0 var(--haus-gap-3);
    /*
     * DER KNOPF LIEGT TIEFER ALS SEINE KARTE, und die Begruendung steht beim
     * Token --haus-kontrast-grund: Laege er heller, faellt seine Hoverkante
     * gegen die eigene Flaeche auf 2,90:1 und damit unter die 3,0 aus WCAG
     * 1.4.11. So sind es 3,51:1 gegen sich selbst und 3,26:1 gegen die Karte.
     *
     * Und seine RUHEKANTE ist sichtbar: Sie stand auf --haus-blech-3 ueber
     * --haus-blech-2 und hielt damit 1,14:1 — ein Knopf, den man nur am Wort
     * erkannte. --haus-kontrast-kante-griff haelt 3,90:1.
     */
    border: 1px solid var(--haus-kontrast-kante-griff);
    border-radius: var(--haus-radius-m);
    background: var(--haus-kontrast-grund);
    color: var(--haus-kontrast-tinte);
    font-family: var(--haus-font-doc);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    transition: background var(--haus-schnell), border-color var(--haus-schnell);
}

.haus-fuss__weg:hover,
.haus-fuss__weg:focus-visible {
    border-color: var(--haus-akzent);
    background: var(--haus-kontrast-karte);
    color: var(--haus-kontrast-tinte);
    transform: none;
}

.haus-fuss__weg svg {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
}

.haus-fuss__boden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--haus-gap-1) var(--haus-gap-4);
    max-width: var(--haus-shell);
    margin: 0 auto;
    /* Oben ein Polster: Ohne es klebte die Zeile an der Kante darueber. */
    padding: var(--haus-gap-2) var(--haus-luft) var(--haus-gap-4);
    border-top: 1px solid var(--haus-kontrast-kante);
    color: var(--haus-kontrast-still);
    font-size: 0.78rem;
}

.haus-fuss__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--haus-gap-3);
    max-width: none;
    margin: 0;
}

/*
 * DAS PULT STEHT AUSSEN RECHTS UND SO LEISE WIE EIN FUSSNOTENZEICHEN.
 *
 * `margin-left: auto` schiebt es an die aeussere Kante; bricht die Zeile auf
 * einem Telefon um, ist `auto` null und es steht links unter den anderen —
 * derselbe Griff wie bei der Kopfgruppe oben.
 *
 * Es traegt `--haus-kontrast-still` statt `--haus-kontrast-gedaempft`:
 * 4,94:1 auf dem Grund des Fusses, also lesbar, aber der stillste Ton, den
 * dieses Haus kennt. Beim Darueberfahren wird es hell wie jeder andere Link —
 * wer es sucht, findet es.
 */
.haus-fuss__pult {
    margin-left: auto;
    color: var(--haus-kontrast-still);
    font-size: 0.78rem;
}

/*
 * AUF DEM TELEFON STEHEN DIE BEIDEN LISTEN NEBENEINANDER.
 *
 * Vier Spalten untereinander waren auf 375 Pixeln ein Fuss von 1.488 Pixeln — fast zwei Bildschirme Kleingedrucktes
 * unter jeder Seite. Marke und Kasse nehmen die volle Breite, „Spiele" und „Das Projekt" teilen sich eine Zeile, die
 * Abstaende nehmen die naechstkleinere Stufe, und die drei Spendenwege stehen in einer Reihe, die umbricht, statt
 * untereinander. Jeder Weg misst weiter 44 Pixel hoch: Gespart wird an Luft, nie an einer Tippflaeche.
 *
 * DIE KASSE VERLIERT HIER IHREN NEGATIVEN VORSCHUB: Er gleicht breit das Polster ihrer Karte gegen die Ueberschriften
 * daneben aus; auf dem Telefon steht keine daneben, und er zoege sie in den Abstand zur Zeile darueber.
 *
 * DER BLOCK STEHT AM ENDE DES FUSSES UND NICHT BEI DER KASSE: Er ueberschreibt Regeln gleicher Spezifitaet, und die
 * spaetere gewinnt. Bei der Kasse stand er vor `.haus-fuss__wege` und verlor — die Knoepfe standen weiter untereinander.
 */
@media (max-width: 39.99rem) {
    .haus-fuss__innen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--haus-gap-3);
        padding-top: var(--haus-gap-4);
    }

    .haus-fuss__spalte--marke,
    .haus-fuss__spalte--kasse {
        grid-column: 1 / -1;
    }

    .haus-fuss__spalte--kasse {
        margin-top: 0;
    }

    /* „Entwickelt von" steht neben der Wortmarke der Werkstatt und nicht als eigene Zeile darueber. */
    .haus-fuss__spalte--marke:has(.haus-fuss__werkstatt) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: var(--haus-gap-2);
    }

    .haus-fuss__spalte--marke:has(.haus-fuss__werkstatt) > * {
        grid-column: 1 / -1;
    }

    .haus-fuss__spalte--marke > .haus-fuss__haus--von {
        grid-column: 1;
        margin-top: var(--haus-gap-1);
    }

    .haus-fuss__spalte--marke > .haus-fuss__werkstatt {
        grid-column: 2;
        margin-top: var(--haus-gap-1);
    }

    .haus-fuss__wege {
        display: flex;
        flex-wrap: wrap;
    }

    .haus-fuss__weg {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/*
 * AUF PAPIER STEHT KEIN HAUS. Die Abrechnung wird gedruckt, und gedruckt wird
 * nur, was Dokument ist — eine Navigation auf einem Andenken ist ein Weg, den
 * niemand gehen kann.
 */
@media print {
    .haus-kopf,
    .haus-fuss {
        display: none;
    }
}