/**
 * Der Tresen – das Stilblatt.
 *
 * KEIN SPIELTOKEN IN DIESER DATEI. Weder `--bm-*` noch `--wr-*`: Ein Token,
 * das nur ein Haus kennt, fällt im nächsten still aus – kein Fehler, kein
 * Testlauf, nur ein Griff, der plötzlich durchsichtig und schriftlos dasteht.
 * Was der Tresen braucht, steht als `--tr-*`-Block am Ende von `:root` in der
 * `tokens.css` des jeweiligen Spiels.
 *
 * UND KEINE AUSWEICHWERTE. `var(--tr-grund, #111)` wäre die zweite Wahrheit
 * über eine Farbe und würde genau dann greifen, wenn jemand eine Zeile
 * vergessen hat. Fehlt ein Token, soll es auffallen.
 *
 * DER TRESEN WIRD AN SEINER FORM WIEDERERKANNT, NICHT AN SEINER FARBE – und
 * hier stand dazu „er nimmt die Farben des Hauses an, in dem er steht". Das
 * galt für jede Farbe, den GRUND eingeschlossen, und genau dort war es falsch:
 * Die Lade stand im Blech des Zimmers (blaugrau hier, mit einem Stich ins Teal
 * drüben), und drüben schrieben obendrein fünf Überschriften in vollem
 * Bildröhrengrün. Das las sich nicht wie ein Rahmen, sondern wie ein Bauteil
 * des Spiels, das jemand versehentlich aufgezogen hat.
 *
 * SEIN GRUND IST DESHALB IN JEDEM ZIMMER DERSELBE (`--tr-grund`, ein neutrales
 * Werkstattgrau ohne Stich), SEINE SCHRIFT UND SEIN SIGNAL GEHÖREN DEM HAUS.
 * Die Grenze verläuft an der KANTE DER LADE: Draußen am Griff ist die
 * Hausfarbe Fläche und Schrift – er liegt auf dem Bild des Zimmers und ist das
 * Wiedererkennungszeichen (Zeichen, Ruf und Hover-Fläche). Drinnen bleiben
 * genau SIEBEN Stellen, und sie sind alle klein: das Plus und Minus der
 * Klappen, ihre Hover-Kante, der Hover des Knopfes, der eine starke Knopf, der
 * Raumcode, die Kante der Quittung und die Kante des offenen Vorgangs im
 * Hilfefach. Keine davon ist eine Überschrift. Wer eine Überschrift in der
 * Lade nach `--tr-marke` zurückdreht, holt den Befund zurück, der diesen Umbau
 * ausgelöst hat.
 *
 * ZWEI KANTEN, ZWEI AUFGABEN. `--tr-linie` ist ein Haarstrich aus Licht und
 * hält auf dem Grund 1.23:1 – er GLIEDERT Flächen (Lade gegen Seite, Balken
 * gegen Rumpf, Fach gegen Fach). `--tr-linie-griff` hält 3.62:1 und ist der
 * einzige Ton, der ein BEDIENELEMENT begrenzen darf; WCAG 1.4.11 verlangt für
 * Nichttext 3,0. Für 3,0:1 bräuchte derselbe Haarstrich 33 Prozent Deckung,
 * und dann wäre er kein Haarstrich mehr, sondern ein Rahmen.
 *
 * DREI SCHRIFTSTUFEN, UND KEINE UNTER 0.75rem. KOPF (0.95rem) trägt die
 * Fachüberschriften, ZEILE (0.9rem) alles, was ein Satz ist, VERMERK (0.8rem)
 * die Amtsmarken darüber und darunter. Sechs Regeln standen auf 0.72 bis
 * 0.74rem – elfeinhalb bis knapp zwölf Pixel in einer schmalen Grotesk, in
 * Versalien, gesperrt. Die Hierarchie macht seitdem die GRÖSSE und nicht die
 * Farbe.
 *
 * EIGENER `.tr-knopf` STATT DER KNOPFKLASSE EINES SPIELS: Der Tresen muss in
 * einem Dokument stehen können, das das Stilblatt dieses Spiels gar nicht lädt
 * – im Foyer zum Beispiel.
 *
 * UND ER STELLT SEINE BEDIENELEMENTE SELBST. Ein Rahmen darf nicht davon
 * abhängen, welche Elementregeln das Gastgeberhaus zufällig mitbringt. Fünf
 * Stellen hingen daran, und jede stand an ihrer Regel unten mit dem Satz,
 * woran sie sich gestoßen hat: `label`, `input { box-shadow }`,
 * `ol { list-style }`, `h1, h2, h3 { line-height, font-weight }` und
 * `box-sizing`. Der Fokusring bleibt der einzige, den der Tresen sich borgt:
 * Beide Häuser führen ihn für `a`, `input`, `button` und `summary`, er hält
 * dort nachweislich, und ein eigener Ring überschriebe einen geprüften durch
 * einen ungeprüften.
 *
 * EINE QUELLE, ZWEI HÄUSER. Diese Datei liegt unter `shared/tresen/` und wird
 * von `dev/tresen.mjs --spiegeln` in jedes `public/games/<slug>/tr/`
 * gespiegelt. Geändert wird IMMER hier.
 */

/*
  `box-sizing` KOMMT SONST AUS DER `base.css` DES HAUSES, UND DAS IST KEINE
  ZUSAGE. `.tr-fach__klappe` steht auf `width: 100%` plus Polster plus Kante
  und liefe in einem Haus ohne diesen Reset über den Rand der Lade – dasselbe
  gilt für `.tr-melden__text` und das Adressfeld.
*/
.tr-griff,
.tr-griff *,
.tr-lade,
.tr-lade *,
.tr-melden,
.tr-melden * {
  box-sizing: border-box;
}

/*
  DAS BODENPOLSTER STEHT KONSTANT.

  Der Griff ist fixiert und liegt sonst auf der letzten Zeile der Fußzeile.
  Eine Regel, die den Zustand des Griffs kennt (`body:has(...)`), fiele in
  jedem Browser still aus, der `:has` nicht kann – und zwar genau dort, wo die
  Fußzeile unerreichbar wird.
*/
body {
  padding-bottom: var(--tr-fuss-luft);
}

/* ------------------------------------------------------------- Der Griff */

.tr-griff {
  position: fixed;
  inset: auto auto var(--tr-luft) var(--tr-luft);
  z-index: var(--tr-ebene);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: var(--tr-griff);
  min-height: var(--tr-griff);
  padding: 0.4rem 0.85rem;
  /*
    DER GRIFF BEKOMMT DIE GRIFFKANTE, und er ist der Fall, für den es sie
    gibt: Er schwebt über einem beliebigen Grund – einem Comic-Panel, einer
    Zeitungsseite, einer Station –, und ein Haarstrich von 1.23:1 gegen die
    eigene Fläche begrenzte dort nichts.
  */
  border: 1px solid var(--tr-linie-griff);
  border-radius: 0;
  background: var(--tr-grund);
  color: var(--tr-schrift);
  font-family: var(--tr-font-amt);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--tr-schnell), color var(--tr-schnell);
}

.tr-griff:hover,
.tr-griff:focus-visible {
  background: var(--tr-marke);
  color: var(--tr-grund-tief);
}

.tr-griff__zeichen {
  display: flex;
  color: var(--tr-marke);
}

.tr-griff:hover .tr-griff__zeichen,
.tr-griff:focus-visible .tr-griff__zeichen {
  color: var(--tr-grund-tief);
}

.tr-griff__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  text-align: left;
}

/* VERMERK. Das Wort darüber steht auf 0.85rem in Versalien – die Zeile ist
   der Nebentext dazu und nicht seine Wiederholung. */
.tr-griff__ruf {
  font-family: var(--tr-font-doc);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tr-marke);
}

.tr-griff:hover .tr-griff__ruf,
.tr-griff:focus-visible .tr-griff__ruf {
  color: var(--tr-grund-tief);
}

/* -------------------------------------------------------------- Die Lade */

/*
  Ab `--tr-lade` wächst nichts mehr: Eine Schublade, die auf 1440 px halb so
  breit wird wie der Schirm, ist ein Fenster und keine Lade.

  DER DECKEL BLEIBT BEI 92vw, UND ZWAR GEGEN DEN WUNSCH, IHN AUF 85 ZU
  SENKEN. Er greift überhaupt erst unter rund 400 px Fensterbreite; darüber
  gilt in beiden Fassungen `--tr-lade`. Auf der engsten geprüften Ansicht,
  375 px, liefert 92vw 345 px – die Lade nimmt dort also ihre vollen 340 px.
  85vw wären 318,75 px, also 21 px weniger als die Lade will und 17 px
  weniger, als sie vor diesem Umbau schon hatte; der Inhalt fiele von
  311,8 auf 290,6 px. Auf dem schmalsten Schirm Platz wegzunehmen ist das
  Gegenteil von „aufatmen lassen". Das Aufatmen kommt aus `--tr-luft` und dem
  Zeilenabstand. Wer den Streifen Seite daneben als GESTALTUNG will und nicht
  als Deckel, ändert diese eine Zahl – aber dann mit dieser Rechnung im Blick.
*/
.tr-lade {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(var(--tr-lade), 92vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--tr-linie);
  border-radius: 0;
  background: var(--tr-grund);
  color: var(--tr-schrift);
  font-family: var(--tr-font-doc);
  overflow: hidden;
  transform: translateX(-100%);
  transition:
    transform var(--tr-schnell),
    overlay var(--tr-schnell) allow-discrete,
    display var(--tr-schnell) allow-discrete;
}

.tr-lade[open] {
  transform: translateX(0);
}

/* Fehlt @starting-style, steht die Lade sofort da statt zu gleiten – ein
   harmloser Ausfall. */
@starting-style {
  .tr-lade[open] {
    transform: translateX(-100%);
  }
}

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

/*
  DER BALKEN HAT KEIN EIGENES MASS, UND ZWEI `calc()` RECHNEN TROTZDEM MIT
  VIERUNDVIERZIG.

  `.tr-lade__rumpf` und `.tr-melden__rumpf` ziehen beide `--tr-griff` ab und
  setzen damit voraus, dass dieser Balken genau 44 px hoch ist. Er hat aber
  kein vertikales Polster und ist so hoch wie sein hoechstes Kind — das ist
  der Schliesser mit seinen 44 px, SOLANGE der Spielname einzeilig bleibt.
  Von den 340 px der Lade gehen 13,6 px Polster, zweimal 13,6 px Luecke und
  44 px Schliesser ab; was uebrig bleibt, teilen sich Wortmarke und Name.
  Nachgemessen auf 375 px mit „Operation Hardcover" und „Das Welt-Register":
  Der Balken steht in beiden Haeusern bei 45 px, also 44 plus seine Kante,
  und der Name nimmt 20 px — eine Zeile. Bricht er einmal auf drei, ragt der
  Rumpf unter die `overflow: hidden`-Kante der Lade, und KEIN LAUF MELDET
  DAS: Senkrechter Ueberlauf ist in keinem Messer ein Befund. Wer einem
  dritten Zimmer einen laengeren Namen gibt, sieht hier nach.
*/
.tr-lade__balken {
  display: flex;
  align-items: center;
  gap: var(--tr-luft);
  padding: 0 0 0 var(--tr-luft);
  border-bottom: 1px solid var(--tr-linie);
  background: var(--tr-grund-tief);
}

/*
  DIE WORTMARKE STEHT IN DER SCHRIFT DES HAUSES, nicht in der des Zimmers.

  Sie ist die einzige Zeile des Tresens, die das tut. Alles andere hier
  nimmt die Handschrift an, in der es steht — aber „tableroom" benennt nicht
  dieses Spiel, sondern das Dach darueber. In der Plakat-Egyptienne von
  Fall 01 gesetzt las es sich wie ein weiterer Vorgang des Kartells, und in
  der schmalen Grotesk von Fall 02 wie eine Tuerbeschriftung.

  DIE FARBE IST NICHT MEHR DIE DES ZIMMERS. Hier stand `--tr-marke` mit der
  Begruendung, ein Wort in einer fremden Farbe mitten auf einem Zeitungsblatt
  waere ein Fremdkoerper. Der Satz stimmt — nur liegt diese Wortmarke gar
  nicht auf dem Blatt, sondern im Balken der Lade, und dort war sie die
  lauteste von fuenf Zeilen, die alle in der Hausfarbe schrieben. Drueben
  hiess das: volles Bildroehrengruen, in der Systemschrift, fett, an der
  obersten Stelle der Flaeche.
*/
.tr-lade__marke {
  margin: 0;
  font-family: var(--tr-font-marke);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tr-schrift);
}

/* VERMERK. */
.tr-lade__spiel {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--tr-font-amt);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--tr-schrift-still);
  overflow-wrap: anywhere;
}

/*
  HART 44 IN BEIDE RICHTUNGEN. Der Schließer des Rechtliches-Overlays stand
  jahrelang auf 35 px und ist dem Handytest nur entgangen, weil der den Dialog
  nie aufgemacht hat.
*/
.tr-lade__zu {
  flex: 0 0 auto;
  min-width: var(--tr-griff);
  min-height: var(--tr-griff);
  border: 0;
  border-left: 1px solid var(--tr-linie-griff);
  border-radius: 0;
  background: transparent;
  color: var(--tr-schrift);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/*
  DAS SIGNAL TRAEGT HIER KEINE FLAECHE. Der Hover stand auf `--tr-signal` mit
  `--tr-grund-tief` darauf: 3.87:1 in Fall 01 und 3.53:1 in Fall 02. Das × ist
  1.4rem hoch, also 22,4 px, und nicht fett — Large Text faengt bei 24 px an,
  noetig sind demnach 4,5:1. Die Gegenrichtung hilft nicht: Papier auf
  demselben Rot haelt 3.74:1 und 3.92:1. Es gibt keine lesbare Paarung mit
  diesem Ton als Flaeche, und deshalb steht darunter die tiefe Fassung —
  6.83:1 in Fall 01, 7.53:1 in Fall 02.
*/
.tr-lade__zu:hover,
.tr-lade__zu:focus-visible {
  background: var(--tr-signal-tief);
  color: var(--tr-schrift);
}

.tr-lade__rumpf {
  height: calc(100dvh - var(--tr-griff) - 1px);
  padding: var(--tr-luft);
  overflow-y: auto;
}

/* ------------------------------------------------------------- Die Fächer */

.tr-fach {
  padding: var(--tr-luft) 0;
  border-bottom: 1px solid var(--tr-linie);
}

.tr-fach:last-child {
  border-bottom: 0;
}

/*
  KOPF — die oberste der drei Schriftstufen, und die Stelle, an der die
  Hausfarbe die Lade verlassen hat. Sie stand auf 0.78rem in `--tr-marke`:
  zwoelfeinhalb Pixel, gesperrt, in Versalien, und in Fall 02 in vollem
  Bildroehrengruen. Was eine Ueberschrift von einem Satz unterscheidet, ist
  jetzt die GROESSE und das Gewicht — dieselbe Loesung, mit der im Rahmen des
  Hauses die Wortmarke von der Navigation getrennt ist.

  `line-height` und `font-weight` stehen hier, weil das Element ein <h2> ist
  und beides sonst aus `h1, h2, h3` des Gastgebers kaeme: 1.02 in Fall 01,
  1.05 in Fall 02, Gewicht 400. Archivo Narrow liegt als 400 und 600 in
  beiden Haeusern; 700 gaebe es nur als gerechnete Fettung.
*/
.tr-fach__titel {
  margin: 0 0 0.35rem;
  font-family: var(--tr-font-amt);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tr-schrift);
}

/* ZEILE — die mittlere Stufe: alles, was ein Satz ist. */
.tr-fach__satz {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tr-schrift-still);
  overflow-wrap: anywhere;
}

/*
  KEIN <summary>. Weder der Handy- noch der Breitentest hat es in seiner
  Griffliste – eine Tippfläche, die kein Lauf ansieht, ist keine.
*/
.tr-fach__klappe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--tr-griff);
  padding: 0.3rem 0.5rem;
  /* Ihr Grund ist durchsichtig — ohne die Griffkante waere sie als Knopf
     nicht zu erkennen, und das ist genau der Fall, fuer den WCAG 1.4.11
     drei zu eins verlangt. */
  border: 1px solid var(--tr-linie-griff);
  border-radius: 0;
  background: transparent;
  color: var(--tr-schrift);
  font-family: var(--tr-font-doc);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.tr-fach__klappe:hover,
.tr-fach__klappe:focus-visible {
  border-color: var(--tr-marke);
}

.tr-fach__klappe::after {
  content: '+';
  font-family: var(--tr-font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--tr-marke);
}

.tr-fach__klappe[aria-expanded='true']::after {
  content: '−';
}

.tr-fach__inhalt {
  margin-top: 0.5rem;
}

.tr-fach__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
}

/* -------------------------------------------------------------- Knöpfe */

.tr-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tr-griff);
  min-height: var(--tr-griff);
  padding: 0.35rem 0.8rem;
  /* Durchsichtiger Grund wie bei der Klappe — dieselbe Begruendung. */
  border: 1px solid var(--tr-linie-griff);
  border-radius: 0;
  background: transparent;
  color: var(--tr-schrift);
  font-family: var(--tr-font-amt);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tr-schnell), color var(--tr-schnell);
}

.tr-knopf:hover,
.tr-knopf:focus-visible {
  background: var(--tr-marke);
  color: var(--tr-grund-tief);
}

.tr-knopf--stark {
  border-color: var(--tr-marke);
  background: var(--tr-marke);
  color: var(--tr-grund-tief);
}

.tr-knopf[disabled] {
  color: var(--tr-schrift-still);
  cursor: default;
}

/* -------------------------------------------------- Raumcode und Quittung */

/*
  Ein Bindestrich in einer Zahl, die über den Tisch gerufen wird, ist eine
  Falle. Markierbar muss der Code sein: Das ist die letzte Rückfallebene des
  Kopierknopfs.
*/
.tr-code {
  margin: 0;
  font-family: var(--tr-font-mono);
  font-size: 1.6rem;
  letter-spacing: 0.22em;
  color: var(--tr-marke);
  hyphens: none;
  user-select: all;
}

/*
  DIE QUITTUNG STEHT IMMER IM DOKUMENT UND WIRD NUR GELEERT. Eine
  Textänderung in einem ausgeblendeten Element steht in keinem Barrierebaum;
  `display: none` auf `:empty` wäre derselbe Fehler. Leer nimmt sie nur ihren
  Rand zurück.
*/
.tr-quittung {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tr-schrift);
  overflow-wrap: anywhere;
}

.tr-quittung:not(:empty) {
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--tr-marke);
}

/* Die Farbe trägt nichts allein – WAS schiefging, steht im Satz. */
.tr-quittung[data-tr-kind='bad']:not(:empty) {
  border-left-color: var(--tr-signal);
}

/*
  DAS HILFSFELD DER ZWEITEN KOPIEREBENE. Es hängt in der offenen Lade und
  nicht am `<body>`: Während ein modaler Dialog offen ist, ist alles außerhalb
  inert, ein Feld am body bekäme keinen Fokus, und die Ebene fiele genau in dem
  Fall aus, für den sie gebaut ist. `display: none` verbietet sich – ohne
  Layout gibt es keine Auswahl.
*/
.tr-hilfsfeld {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------------------------------------------------------- Fach: Hilfe */

/* VERMERK. */
.tr-hilfe__anbieter {
  margin: 0 0 0.25rem;
  font-family: var(--tr-font-amt);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tr-schrift-still);
}

.tr-hilfe__preis {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.tr-hilfe__stufen {
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

/*
  DIE KANTE TRAEGT DEN RANG DER STUFE, also eine Auskunft — und Auskunft ohne
  Text faellt unter WCAG 1.4.11. Der Haarstrich haette den geschlossenen Rang
  mit 1.23:1 gezeichnet; die Griffkante haelt 3.62:1, die offene Fassung in
  `--tr-marke` 8.20:1 in Fall 01 und 10.58:1 in Fall 02. Allein traegt die
  Farbe trotzdem nichts: WORAN es liegt, steht im Satz daneben.
*/
.tr-hilfe__stufe {
  padding: 0.35rem 0 0.35rem 0.5rem;
  border-left: 3px solid var(--tr-linie-griff);
}

.tr-hilfe__stufe + .tr-hilfe__stufe {
  margin-top: 0.3rem;
}

.tr-hilfe__stufe[data-tr-offen='1'] {
  border-left-color: var(--tr-marke);
}

/* VERMERK. */
.tr-hilfe__label {
  display: block;
  font-family: var(--tr-font-amt);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tr-hilfe__satz {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Zugeklappt sagt der Satz, WORAN es liegt – an der Zeit oder am Geld. */
.tr-hilfe__stufe[data-tr-offen='0'] .tr-hilfe__satz {
  color: var(--tr-schrift-still);
  font-style: italic;
}

.tr-hilfe__wo {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tr-schrift-still);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------- Fach: Aushang */

/*
  DIE NUMMERN STEHEN JETZT DA, UND SIE HABEN IMMER SCHON PLATZ GEHABT. Beide
  Gastgeberhaeuser fuehren `ul, ol { list-style: none }` als ELEMENTregel, und
  `.tr-schritte` hat `list-style` nie gesetzt — die Elementregel gewann, der
  Aushang hinter dem Knopf „Die drei Schritte" zeigte keine einzige Nummer,
  und die 1.2rem Einzug daneben hielten Platz fuer Marker frei, die es nicht
  gab. In einem dritten Haus ohne diese Elementregel waeren sie umgekehrt
  ploetzlich dagewesen. Ein Rahmen entscheidet das selbst.
*/
.tr-schritte {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  list-style: decimal;
}

.tr-schritte__schritt {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/*
  VERMERK, und die eine Stelle, an der die kleinere Stufe ueber der groesseren
  steht: Gesperrte Versalien in der Amtsschrift wirken breiter als ihre
  Punktgroesse, und der Satz darunter ist der Inhalt des Schritts.
*/
.tr-schritte__titel {
  display: block;
  font-family: var(--tr-font-amt);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tr-schrift);
}

/* ------------------------------------------------------- Der Meldebogen */

.tr-melden {
  width: min(34rem, 92vw);
  max-width: none;
  max-height: 90dvh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--tr-linie);
  border-radius: 0;
  background: var(--tr-grund);
  color: var(--tr-schrift);
  font-family: var(--tr-font-doc);
  overflow: hidden;
}

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

/* Wie die Fachueberschriften: Die Hausfarbe bleibt draussen, die Groesse und
   die Plakatschrift machen den Rang. */
.tr-melden__kopf {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--tr-font-kopf);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tr-schrift);
}

.tr-melden__rumpf {
  max-height: calc(90dvh - var(--tr-griff) - 1px);
  padding: var(--tr-luft);
  overflow-y: auto;
}

.tr-melden__vorspann {
  margin: 0 0 var(--tr-luft);
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.tr-melden__arten {
  margin: 0 0 var(--tr-luft);
  padding: 0.5rem;
  border: 1px solid var(--tr-linie);
  border-radius: 0;
}

/* VERMERK. */
.tr-melden__arten legend {
  padding: 0 0.3rem;
  font-family: var(--tr-font-amt);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tr-schrift-still);
}

/*
  UND ER STELLT AUCH SEINE BESCHRIFTUNGEN SELBST.

  Beide Gastgeberhäuser führen `label` als ELEMENTregel, und zwar mit
  Amtsschrift, 0.8rem, Sperrung, Versalien und gedämpftem Papierton. Diese
  beiden Beschriftungen sind aber keine Feldköpfe, sondern SÄTZE, die
  `worte.js` als Sätze schreibt: „Etwas ist kaputt", „Ihr dürft mir dazu
  zurückschreiben". Sie standen als „ETWAS IST KAPUTT" gesperrt in Versalien
  da – das ist der „technisch gequetschte" Eindruck, und er kam aus einer
  Zeile, die dieser Datei gar nicht gehört.

  `.tr-melden__feldkopf` ist der Gegenfall: Der IST ein Feldkopf und setzt
  dieselben Eigenschaften absichtlich selbst.
*/
.tr-melden__art,
.tr-melden__haken {
  margin-bottom: 0;
  font-family: var(--tr-font-doc);
  letter-spacing: normal;
  text-transform: none;
  color: var(--tr-schrift);
}

/*
  DIE LUFT ZWISCHEN DEN ZEILEN KAM BIS EBEN AUS DERSELBEN `label`-REGEL, UND
  MIT DER ZURÜCKGENOMMENEN `margin-bottom` IST SIE MITGEFALLEN.

  Vier Sorten zu vierundvierzig Pixeln standen danach als ein Block von 176 px
  in der Umrandung, ohne einen einzigen Pixel dazwischen – dichter als vor
  einem Umbau, der die Lade aufatmen lassen sollte. Die 0.35rem sind die Zahl,
  die beide Häuser als `--bm-gap-1`/`--wr-gap-1` führen; sie steht hier nur
  nicht mehr geerbt, sondern gesetzt.

  Sie steht ZWISCHEN den Zeilen und nicht unter der letzten: Unter der letzten
  wäre sie Polster im Polster der Umrandung. Dasselbe gilt für das Adressfeld,
  das unter dem Haken aufgeht – auch das hing an der geerbten Zeile.
*/
.tr-melden__art + .tr-melden__art {
  margin-top: 0.35rem;
}

/*
  DER TRESEN STELLT SEINE KÄSTCHEN SELBST, weil das Haus darunter es nicht tut.

  Die `base.css` eines Spiels darf `input { width: 100% }` führen – Fall 01 tut
  es –, und diese Elementregel trifft auch Ankreuz- und Radiofelder. Im
  Meldebogen stand das Kästchen deshalb 377 Pixel breit da, und seine
  Beschriftung schwebte rechtsbündig daneben. Ein Rahmen, dessen Aussehen davon
  abhängt, welche Elementregeln das Haus zufällig mitbringt, ist kein Rahmen.

  DAS KÄSTCHEN STEHT MITTIG, AUCH NEBEN ZWEI ZEILEN. Es an die erste Zeile zu
  binden, kostet entweder eine hartkodierte Kästchenhöhe oder die `lh`-Einheit;
  `flex-start` wiederum schöbe es bei JEDER einzeiligen Zeile an den oberen Rand
  von vierundvierzig Pixeln. Einzeilig ist der Fall, den es in beiden Häusern
  auf jeder geprüften Breite gibt.
*/
.tr-melden__art input,
.tr-melden__haken input {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.tr-melden__art span,
.tr-melden__haken span {
  flex: 1 1 auto;
}

/*
  DIE BESCHRIFTUNG IST DIE TIPPFLÄCHE. Ein `input[type=radio]` misst dreizehn
  Pixel und wird es bleiben; getroffen und gemessen wird das `<label>`.
*/
.tr-melden__art {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tr-griff);
  padding: 0 0.3rem;
  font-size: 0.9rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}

/* VERMERK — und hier ist die Amtsschrift richtig: Das ist ein Feldkopf. */
.tr-melden__feldkopf {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--tr-font-amt);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tr-schrift-still);
}

/*
  EIN EINGABEFELD BRINGT SEINE GRUNDSTELLUNG MIT.

  `box-shadow: none` steht hier, weil beide Gastgeberhäuser `input` (drüben
  auch `textarea`) einen inneren Schatten geben: Ein weicher Schatten ist im
  Zimmer verboten, und diese beiden Felder trugen ihn – geerbt aus einer
  Elementregel, die der Tresen nicht kennt. Zurückgesetzt war er bisher nur
  an den Ankreuzfeldern.

  DIE 1rem SIND KEIN GESCHMACK: Unter 16 px zoomt Safari auf dem Telefon beim
  Hineintippen in das Feld, und danach steht die Lade schief im Fenster.
*/
.tr-melden__text,
.tr-melden__feld input {
  width: 100%;
  min-height: var(--tr-griff);
  padding: 0.5rem;
  border: 1px solid var(--tr-linie-griff);
  border-radius: 0;
  box-shadow: none;
  background: var(--tr-grund-tief);
  color: var(--tr-schrift);
  font-family: var(--tr-font-doc);
  font-size: 1rem;
}

.tr-melden__text {
  margin-bottom: var(--tr-luft);
  resize: vertical;
}

/* Ohne diese Zeile meldet der Breitentest einen Überlauf. */
.tr-melden__auszug {
  margin: 0.5rem 0 0;
  padding: 0.5rem;
  border: 1px solid var(--tr-linie);
  background: var(--tr-grund-tief);
  font-family: var(--tr-font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  overflow-x: auto;
}

/* VERMERK. */
.tr-melden__note {
  margin: 0.4rem 0 var(--tr-luft);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--tr-schrift-still);
  overflow-wrap: anywhere;
}

.tr-melden__haken {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tr-griff);
  font-size: 0.9rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.tr-melden__feld {
  margin: 0.35rem 0 var(--tr-luft);
}

/* ------------------------------------------------------------- Der Druck */

/*
  DER TRESEN BLENDET SICH SELBST AUS. Die Druckliste eines einzelnen Spiels
  gilt nur für dieses Haus – das nächste hat sie nicht, und dort stünde sonst
  ein Griff quer über der letzten Seite.
*/
@media print {
  .tr-griff,
  .tr-lade,
  .tr-melden {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }
}