/*
 * Alarm im Archiv — Tableau-Fassung.
 *
 * Es war einmal ein Kachelraster aus siebenunddreissig gleichförmigen Feldern, und am Tisch las sich das als
 * „starres, braunes Schachbrett aus CSS-Kästen". Jetzt liegt ein Tableau da: ein massives Holzbrett mit
 * Goldkante und weichen Ecken, darauf acht Raumkarten, die jede anders aussieht — Teppich im Chefbüro,
 * Gitterrost im Kesselhaus, Ölstein im Drucksaal —, dazwischen Gänge mit Trittsteinen und dicke Holz-Chips.
 *
 * WAS EINEN RAUM AUSMACHT, STEHT IN DREI SCHICHTEN: der Bodenbelag als Fläche, das Zeichen als Silhouette, das
 * Messingschild als Name. Erst alle drei zusammen machen aus einem Rechteck einen Ort, den man über den Tisch
 * hinweg benennt.
 *
 * Eigene, kleine Palette statt der Tokens aus shared/haus: Dieser Ordner ist bewusst isoliert.
 */

:root {
  --ak-nacht: #1a120b;
  --ak-nacht-2: #241a11;
  --ak-leder: #2b1d13;
  --ak-holz: #6b4a2b;
  --ak-holz-hell: #8a6238;
  --ak-holz-dunkel: #4a3119;
  --ak-holz-tief: #35220f;
  --ak-papier: #ede2c8;
  --ak-papier-alt: #dccfa9;
  --ak-papier-schatten: #bfae86;
  --ak-tinte: #2b2119;
  --ak-tinte-matt: #6b5c48;
  --ak-gold: #d4af37;
  --ak-gold-hell: #f0d878;
  --ak-gold-tief: #8a6f16;
  --ak-signal: #c43826;
  --ak-signal-hell: #ff4a2e;
  --ak-signal-tief: #7d2317;
  --ak-gruen: #5a7d4a;
  --ak-gruen-hell: #8fc46a;
  --ak-rolle-ruth: #7fa8c4;
  --ak-rolle-selma: #d8b13c;
  --ak-rolle-nuri: #8cb063;
  --ak-rolle-ansgar: #c87b4e;
  --ak-schrift: 'Georgia', 'Times New Roman', serif;
  --ak-schrift-ui: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ak-chip: clamp(48px, 5.2vw, 72px);

  /*
   * WAS DER RAHMEN DES HAUSES OBEN WEGNIMMT — und warum das eine Zahl braucht.
   *
   * Über dieser Seite klebt seit dem Go-Live die Kopfleiste des Hauses. Jede Höhenrechnung hier unten steht
   * gegen `100dvh`: die Schale, der Tisch auf dem Schreibtisch, und vor allem die Breite des Bretts, die sich
   * gegen die Resthöhe zurückrechnet. Ohne diesen Abzug wäre das Brett genau um die Leiste zu hoch und oben
   * abgeschnitten — derselbe Fehler, der hier schon einmal dreiunddreissig Pixel Chefbüro gekostet hat.
   *
   * SIE IST AUF DEM TELEFON NULL, UND DAS IST DER GANZE PUNKT. Dort klebt die Leiste nicht (`klebt => 'breit'`
   * in index.php), sie scrollt weg — also nimmt sie dem Brett auch nichts. Ein Abzug wäre dort genau das, was
   * nicht passieren soll: ein Rahmen, der das Holzbrett zusammendrückt.
   */
  --ak-rahmen: 0px;

  /*
   * DIE EBENEN ÜBER DEM RAHMEN.
   *
   * Der Kopf des Hauses liegt auf 900 (`--haus-ebene-kopf`), und das ist richtig: Er klebt, und unter ihm
   * bewegt sich die Seite hindurch. Was dieses Spiel als Vollbild über ALLES legt — Vorspann, Würfelduell,
   * Notizzettel, Depesche —, muss darüber liegen, sonst stanzt eine Navigationsleiste ein Loch ins Kino.
   * Gehoben wird das mit einem eigenen Token, genau so, wie die beiden Zimmer es mit ihrem Tresen halten; die
   * Ebenen des Bretts selbst bleiben zweistellig, wie gehabt.
   */
  --ak-ebene-hoch: 940;
}

/* Ab hier klebt die Kopfleiste des Hauses (haus.css, `.haus-kopf--klebt-breit`), und ab hier kostet sie Höhe. */
@media (min-width: 46rem) {
  :root {
    --ak-rahmen: var(--haus-kopf-hoehe, 72px);
  }
}

* { box-sizing: border-box; }

/* Geschaltet wird über hidden: Ohne diese Zeile gewinnt jede Klasse mit eigenem display gegen die UA-Regel,
   und alle vier Ansichten stehen gleichzeitig übereinander. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ak-nacht);
  color: var(--ak-papier);
  font-family: var(--ak-schrift-ui);
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3, h4 { font-family: var(--ak-schrift); margin: 0 0 0.4em; font-weight: 700; }
h1 { font-size: 1.75rem; }
p { margin: 0 0 0.7em; }
button { font-family: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/*
 * FÜLLUNG UND STRICH STEHEN AM BENUTZER, NICHT AM SYMBOL.
 *
 * Eine Regel auf `.sprite symbol` sieht richtig aus und tut nichts: Was `<use>` einsetzt, liegt in einem
 * Schattenbaum, und dorthin reicht kein Selektor. Die Zeichen kamen deshalb in der Vorgabe heraus — schwarz
 * gefüllt, ohne Strich —, und acht Räume trugen schwarze Klumpen statt Silhouetten. `fill` und `stroke` sind
 * vererbte Eigenschaften; gesetzt am einbettenden SVG erreichen sie die Kopie.
 */
.raum__zeichen, .tuerknopf__zeichen {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * SIE RECHNET GEGEN DIE RESTHÖHE UNTER DEM RAHMEN DES HAUSES und nicht gegen das ganze Fenster: Auf dem
 * Schreibtisch klebt darüber die Kopfleiste, und ohne den Abzug wäre jede Ansicht dieses Spiels genau um
 * diese Leiste zu hoch. Auf dem Telefon ist --ak-rahmen null — dort scrollt die Leiste weg.
 */
/*
 * UND SIE IST AUF DIE BÜHNENBREITE DES HAUSES GEDECKELT — dieselbe Zahl wie `--haus-shell` über ihr, und das
 * ist die Zusage: Sie hatte gar kein `max-width`, und auf einem Schirm von 2560 Pixeln klebte das Brett ganz
 * links, der Ermittlungsblock ganz rechts und dazwischen stand siebenhundert Pixel Leder. Der Kopf des Hauses
 * darüber und der Fuß darunter halten ihre 1800; ein Spiel, das dazwischen die ganze Breite nimmt, ist kein
 * Zimmer mehr, sondern ein zweites Fenster.
 *
 * DER GEDECKELT IST DIE SCHALE, NICHT DIE ANSICHT: Die Startansicht rechnete ihre Breite schon selbst
 * (`.landung`), Lobby und Tisch nicht — und zwei Fassungen derselben Zahl laufen beim nächsten Umbau
 * auseinander.
 */
.schale {
  min-height: calc(100dvh - var(--ak-rahmen));
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--haus-shell, 1800px);
  margin-inline: auto;
}

/* ------------------------------------------------------------ Das Cockpit */

/*
 * ZWEI LEISTEN KLEBEN HIER, UND SIE MÜSSEN SICH ABSPRECHEN. Oben der Kopf des Hauses (Wortmarke, Bereiche,
 * Raumcode), darunter das Cockpit dieses Spiels (Runde, Frist, Knorpel, eigene Punkte). Stünde dieses hier auf
 * `top: 0`, läge es unter dem Glas des Hauses und wäre unlesbar — die Leiste des Hauses liegt auf Ebene 900.
 *
 * SEINE SEITENLUFT IST DIE DES HAUSES, und das ist der zweite Teil des Breitendeckels an `.schale`: Sie stand
 * auf 0,9rem, während Wortmarke und Codeknopf darüber bei `--haus-luft` anfangen. Auf einem Breitbild standen
 * damit zwei Leisten übereinander, deren linke Kanten um vierzig Pixel auseinanderlagen — dieselbe Sorte
 * Versatz, gegen die der Rahmen des Hauses überhaupt gebaut wurde.
 */
.kopf {
  position: sticky;
  top: var(--ak-rahmen);
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  padding: 0.45rem var(--haus-luft, 0.9rem);
  background: linear-gradient(180deg, var(--ak-nacht-2) 0%, var(--ak-nacht) 100%);
  border-bottom: 3px solid var(--ak-gold-tief);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}
.kopf__marke { display: flex; flex-direction: column; line-height: 1.1; }
.kopf__titel {
  font-family: var(--ak-schrift);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--ak-gold);
}
.kopf__code { font-family: var(--ak-schrift); letter-spacing: 0.22em; font-size: 0.72rem; color: var(--ak-tinte-matt); }
.kopf__uhr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.4rem; }
.kopf__etikett { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.62rem; color: var(--ak-tinte-matt); }
.kopf__runde { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
/* Die Frist steht auf voller Breite unter der Zahl: „6 / 7" allein sagt niemandem, wie spät es ist. */
.kopf__frist { flex-basis: 100%; font-size: 0.66rem; line-height: 1.2; color: var(--ak-papier-alt); }
.kopf__frist--knapp { color: var(--ak-signal-hell); font-weight: 700; }

/*
 * Der Tonschalter. Kein Klang dieses Spiels trägt eine Auskunft — wer ihn abstellt, verliert kein Spiel, und
 * genau deshalb darf er abstellbar sein, ohne dass jemand etwas verpasst.
 */
.tonschalter {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.55rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--ak-holz-dunkel);
  border-radius: 5px;
  color: var(--ak-papier-alt);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tonschalter:hover { border-color: var(--ak-gold); color: var(--ak-gold-hell); }
.tonschalter__zeichen { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tonschalter[aria-pressed='false'] { color: var(--ak-tinte-matt); }

/*
 * Der Ausgang. Er steht im Blech des Tonschalters daneben und nicht im Signalrot: Was er tut, ist unumkehrbar,
 * aber es ist kein Alarm — der lauteste Knopf einer Leiste, in der sonst die Frist zählt, wäre eine Drohung.
 * Rot wird er erst unter dem Zeiger, dort, wo man ihn schon gewählt hat.
 */
.verlassenschalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.7rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--ak-holz-dunkel);
  border-radius: 5px;
  color: var(--ak-papier-alt);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.verlassenschalter:hover { border-color: var(--ak-signal-hell); color: var(--ak-signal-hell); }
/* Auf dem Telefon bleibt das Zeichen, das Wort geht — die Leiste trägt schon drei andere Kästen. */
@media (max-width: 30rem) {
  .tonschalter__wort { display: none; }
}

/* Der Jäger im Kopf: Wo er steht und wie weit er noch hat — die eine Zahl, die den Abend treibt. */
.jaeger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  background: rgba(196, 56, 38, 0.12);
  border: 1px solid var(--ak-signal-tief);
  border-radius: 999px;
}
.jaeger__bild {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ak-signal);
  flex: none;
}
.jaeger__text { display: flex; flex-direction: column; line-height: 1.15; }
.jaeger__ort { font-family: var(--ak-schrift); font-size: 0.92rem; color: var(--ak-papier); }
.jaeger__stand { font-size: 0.72rem; color: #e9a89c; }
.jaeger--knapp { background: rgba(196, 56, 38, 0.3); border-color: var(--ak-signal-hell); animation: ak-klopfen 1.2s linear infinite; }
.jaeger--liegt { background: rgba(90, 125, 74, 0.18); border-color: var(--ak-gruen); animation: none; }
.jaeger--liegt .jaeger__stand { color: var(--ak-gruen-hell); }
@keyframes ak-klopfen { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.spielerkopf { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.spielerkopf__bild {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ak-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  flex: none;
}
.spielerkopf__text { display: flex; flex-direction: column; gap: 0.22rem; }
.spielerkopf__rolle { font-family: var(--ak-schrift); font-size: 0.8rem; color: var(--ak-papier-alt); }

/* Messingmünzen statt einer Zahl: Wie viel noch drin ist, sieht man, ohne zu lesen. */
.pips { display: flex; gap: 4px; }
.pip { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #12100c; }
.pip--voll {
  background: radial-gradient(circle at 34% 30%, var(--ak-gold-hell) 0 34%, var(--ak-gold) 35% 70%, var(--ak-gold-tief) 71% 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.pip--leer { background: #33291d; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85); }

/* ------------------------------------------------------------ Akte (Start, Lobby, Ende) */

.ansichten { flex: 1; display: flex; flex-direction: column; }
.ansicht { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem 3rem; }
.ansicht--spiel { display: block; padding: 0; }
/* Die Landeseite braucht oben keinen Vorsprung — ihre erste Zeile ist ein randloses Bild. */
/*
 * DIE STARTANSICHT TRAEGT DIE SEITENLUFT DES HAUSES.
 *
 * `.ansicht` gibt allen Ansichten 1rem an den Seiten — richtig fuer ein Tableau, falsch fuer ein Blatt, das
 * buendig unter Kopf und Fuss stehen soll: Die halten innen `--haus-luft` (1,15 bis 3,5rem). Ohne diese Zeile
 * stuende die Landeseite auf der richtigen Breite und trotzdem auf einem anderen Rand.
 */
.ansicht--start {
  padding-top: 0;
  padding-inline: var(--haus-luft, 1rem);
}

/* ------------------------------------------------------------ Landeseite (Startansicht)
 *
 * FÜNF STÜCKE ÜBEREINANDER, EINE SPALTE: Bühne, Eckdaten, Auftrag, Ablauf, Besetzung, Einsatzbefehl. Es ist
 * eine Seite, die man von oben nach unten liest, und kein Raster — zwei Spalten hätten hier nur die Frage
 * beantwortet, welche davon man zuerst liest.
 *
 * SIE IST EINE BÜHNE UND KEIN SCHLAUCH. Sie stand auf 54rem, dann auf 86rem — beides schmaler als alles, was
 * das Foyer eine Seite nennt. Neben `/faelle` und `/spiele`, die ihre 1800 Pixel nehmen, las sich das als
 * Tunnel: auf 54rem fünf Karten in drei Spalten und ein Straßenbild von Postkartenbreite, auf 86rem immer noch
 * zweihundert Pixel Leere je Seite unter einer Leiste, die über die ganze Seite reicht.
 *
 * SIE NIMMT JETZT DIE BÜHNENBREITE DES HAUSES, und zwar über dieselbe Rechnung wie drüben in der Arena:
 * `--haus-shell` abzüglich der Seitenluft, die Kopf und Fuß innen halten. Damit schließt das Blatt links und
 * rechts bündig mit Marke und Codeknopf ab. Eine eigene Zahl hier wäre die zweite Fassung derselben Breite, und
 * zwei Fassungen laufen beim nächsten Umbau auseinander.
 *
 * WAS SÄTZE TRÄGT, BLEIBT TROTZDEM SCHMAL. Ein Absatz über 1300 Pixel liest niemand — der Blick findet den
 * nächsten Zeilenanfang nicht wieder. Die Breite gehört den Bildern, den Plaketten und den Karten.
 */
.landung {
  width: 100%;
  max-width: calc(var(--haus-shell, 1800px) - 2 * var(--haus-luft, 2rem));
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.landung__kopf {
  margin: 0 0 0.8rem;
  font-family: var(--ak-schrift);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ak-gold);
}

/*
 * DIE BÜHNE: das Straßenbild, darüber gelegt der Titel.
 *
 * DER VERLAUF IST EINE BLENDE UND KEINE FLÄCHE. Ohne ihn stünde weiße Serifenschrift auf einem Comic voller
 * Laternenlicht, und an zwei von drei Stellen wäre sie unlesbar; mit ihm liegt sie auf einem Grund, der unten
 * die Nachtfarbe dieses Spiels ist. Gemessen im dunkelsten Drittel: Papier auf #1a120b hält 13,9:1.
 */
.buehne {
  position: relative;
  border: 1px solid var(--ak-holz-dunkel);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ak-nacht-2);
}
/*
 * DAS SEITENVERHÄLTNIS IST EIN DECKEL UND KEINE ZUSAGE. Auf 86rem wären 16:7 rund sechshundert Pixel Höhe — ein
 * Bild, unter dem nichts mehr steht. `max-height` kappt es, und weil die Breite bei 100 Prozent bleibt, wird der
 * Streifen dabei flacher statt kleiner: auf 1376 Pixeln ein Kinoformat von rund 2,9 zu 1.
 */
.buehne__bild {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  max-height: 30rem;
  object-fit: cover;
  object-position: 50% 42%;
}

/* AUF DEM TELEFON IST DIE BÜHNE HÖHER, UND ZWAR DAMIT MAN SIE SIEHT. Ein Streifen von 16:7 misst auf 390 Pixeln
   rund 170 in der Höhe — die Blende mit Dach, Titel und Zeile braucht davon 150, und vom Straßenbild blieb ein
   Fingerbreit Regen. Vier zu drei gibt dem Bild seine obere Hälfte zurück. */
@media (max-width: 40rem) {
  .buehne__bild { aspect-ratio: 4 / 3; }
  .buehne__blende { padding: 2.5rem 1.1rem 1rem; }
}
.buehne__blende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.4rem 1.2rem;
  background: linear-gradient(to top, rgba(26, 18, 11, 0.96) 0%, rgba(26, 18, 11, 0.82) 42%, rgba(26, 18, 11, 0) 100%);
}
.buehne__dach {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ak-gold);
}
.buehne__titel {
  margin: 0;
  font-family: var(--ak-schrift);
  font-size: clamp(1.7rem, 6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ak-papier);
}
.buehne__zeile {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: var(--ak-papier-alt);
}

/* Vier Plaketten aus Messing auf Leder. Sie brechen um, wo sie nicht nebeneinander passen — auf 320 Pixeln
   stehen sie untereinander, und das ist richtig: Eine Zahl, die man lesen soll, wird nicht gequetscht. */
.eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.eckdaten__marke {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ak-holz);
  border-radius: 999px;
  background: var(--ak-leder);
  color: var(--ak-papier-alt);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Der Transparenzhinweis auf /en/brettspiele/: eine Auskunft, kein Alarm — dieselbe
   Haltung wie .hub-kachel__sprachhinweis im Foyer, nur mit den Farbtokens dieses Spiels. */
.sprachhinweis {
  margin: -1.1rem 0 0;
  color: var(--ak-papier-alt);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.4;
}

/*
 * DERSELBE HINWEIS, EIN ANDERER ORT: An der Bühne zieht die negative
 * Randluft ihn direkt unter die Eckdaten; im Einsatzbefehl steht er zwischen
 * zwei eigenständigen Absätzen, und derselbe negative Rand zöge ihn in die
 * Zeile darüber.
 */
.befehl .sprachhinweis {
  margin: 0 0 0.9rem;
}

.auftrag__text {
  margin: 0;
  /* Das eine Zeilenmaß dieser Seite: Was man entlangliest, hört bei 68 Zeichen auf, gleich wie breit die Bühne ist. */
  max-width: 68ch;
  font-family: var(--ak-schrift);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ak-papier);
  text-wrap: pretty;
}

/* Drei Schritte nebeneinander, wo sie hinpassen, sonst untereinander. Die Ziffer steht als Messingmünze im
   Kopf jeder Karte — dieselbe Form, in der dieses Spiel schon seine Punkte zählt (.pip). */
.ablauf__liste {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) {
  .ablauf__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ablauf__schritt {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ak-holz-dunkel);
  border-radius: 4px;
  background: var(--ak-nacht-2);
}
.ablauf__zahl {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--ak-gold-hell) 0 34%, var(--ak-gold) 35% 70%, var(--ak-gold-tief) 71% 100%);
  color: #2b2119;
  font-family: var(--ak-schrift);
  font-size: 1rem;
  font-weight: 700;
}
.ablauf__wort {
  font-family: var(--ak-schrift);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ak-gold-hell);
}
.ablauf__satz {
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--ak-papier-alt);
  text-wrap: pretty;
}

/*
 * FÜNF GESICHTER: VIER SPIELFIGUREN IN EINER REIHE, DER GEGNER ALS BAND DARUNTER.
 *
 * Sie standen zu dritt nebeneinander, und die vierte Karte der Crew rutschte in die zweite Reihe — neben den
 * Gegner, als wäre er einer von ihnen. Seit die Seite 86rem hat, passt die Crew in eine Zeile, und Dr. Knorpel
 * liegt quer darunter: Porträt links, Satz rechts, über alle vier Spalten. Man sieht in einem Blick, wer
 * zusammengehört.
 *
 * Auf dem Telefon je eine Zeile mit Bild links, ab 40rem zwei Spalten, ab 60rem vier.
 */
.besetzung__liste {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .besetzung__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .besetzung__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.figur {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ak-holz-dunkel);
  border-radius: 4px;
  background: var(--ak-nacht-2);
}
/* Drei nebeneinander: Bild oben, Name darunter, Satz darunter — und alles von OBEN gesetzt. Zentriert stünden
   die Namen auf drei verschiedenen Höhen, weil die Sätze verschieden lang sind, und eine Reihe Porträts, deren
   Beschriftungen treppenförmig wandern, liest sich als Fehler. */
@media (min-width: 40rem) {
  .figur {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    gap: 0.35rem;
    padding: 1rem 0.85rem;
    text-align: center;
  }
  .figur__name,
  .figur__satz { align-self: auto; }
}
.figur__bild {
  grid-row: span 2;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 3px solid var(--ak-gold);
  object-fit: cover;
}
@media (min-width: 40rem) {
  .figur__bild { grid-row: auto; width: 5.25rem; height: 5.25rem; }
}
/* Der Gegner trägt Signalrot statt Messing: Er ist der Einzige auf dieser Seite, der nicht zur Crew gehört,
   und das soll man sehen, bevor man seinen Namen liest. Die Farbe steht nie allein — der Satz sagt es auch. */
.figur--gegner .figur__bild { border-color: var(--ak-signal); }
.figur--gegner .figur__name { color: #e9a89c; }
.figur--gegner {
  border-color: var(--ak-signal-tief);
  background: rgba(196, 56, 38, 0.08);
}

/* Quer über die ganze Reihe, und zwar in der Form, die er vorher schon auf dem Telefon hatte: Bild links,
   Name und Satz rechts. Er ist keine fünfte Crewkarte, also sieht er auch nicht aus wie eine. */
@media (min-width: 40rem) {
  .figur--gegner {
    grid-column: 1 / -1;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-content: center;
    justify-items: start;
    text-align: left;
    padding: 0.9rem 1.1rem;
  }
  .figur--gegner .figur__bild {
    grid-row: span 2;
    width: 5.5rem;
    height: 5.5rem;
  }
  .figur--gegner .figur__name { align-self: end; }
  .figur--gegner .figur__satz { align-self: start; max-width: 62ch; }
}
.figur__name {
  align-self: end;
  font-family: var(--ak-schrift);
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--ak-gold-hell);
}
.figur__satz {
  align-self: start;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ak-papier-alt);
  text-wrap: pretty;
}

/* Der Einsatzbefehl: dasselbe Papier wie die Akte der Lobby, nur als Mappe am Ende der Seite. */
.befehl {
  position: relative;
  padding: 1.6rem 1.5rem 1.8rem;
  background: var(--ak-papier);
  color: var(--ak-tinte);
  border: 1px solid var(--ak-papier-schatten);
  border-top: 4px solid var(--ak-gold);
  border-radius: 4px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
}
.befehl__stempel {
  position: absolute;
  top: 1.2rem;
  right: 1.1rem;
  transform: rotate(-8deg);
  border: 2px solid var(--ak-signal);
  color: var(--ak-signal);
  font-family: var(--ak-schrift);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  opacity: 0.85;
}
.befehl__titel {
  margin: 0;
  font-family: var(--ak-schrift);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ak-tinte);
}
.befehl__zeile {
  margin: 0.4rem 0 0;
  max-width: 34rem;
  font-size: 0.9rem;
  color: var(--ak-tinte-matt);
}

/*
 * ZWEI SPALTEN AB DEM SCHREIBTISCH: links der Auftrag, rechts der Vordruck.
 *
 * Auf 86rem lag das Namensfeld über 1100 Pixel breit da — ein Eingabefeld in Bühnenbreite ist kein Formular mehr,
 * sondern eine Linie. Die Mappe teilt sich deshalb: Was man LIEST, steht links, was man AUSFÜLLT, rechts in 26rem.
 * Auf dem Telefon bleibt es eine Spalte.
 */
@media (min-width: 62rem) {
  .befehl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    grid-template-rows: auto 1fr;
    gap: 0.4rem 3rem;
  }
  .befehl__titel { grid-area: 1 / 1; }
  .befehl__zeile { grid-area: 2 / 1; align-self: start; }
  .befehl .formular {
    grid-area: 1 / 2 / span 2 / 2;
    margin-top: 0;
  }

  /* Der Stempel wandert in die freie untere Ecke der linken Spalte: oben rechts lag er seit der zweiten Spalte
     quer über der Beschriftung des Namensfeldes — und ein Stempel auf einer Mappe liegt ohnehin unten. */
  .befehl__stempel {
    top: auto;
    right: auto;
    bottom: 1.6rem;
    left: 1.6rem;
  }
}

.akte {
  position: relative;
  width: 100%;
  max-width: 38rem;
  margin-top: 1.5rem;
  padding: 1.8rem;
  background: var(--ak-papier);
  color: var(--ak-tinte);
  border: 1px solid var(--ak-papier-schatten);
  border-radius: 4px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
}
.akte h1 { color: var(--ak-tinte); }
.akte__zeile { color: var(--ak-tinte-matt); font-size: 0.95rem; }
.akte__text { font-size: 0.92rem; }
.akte__leise { font-size: 0.82rem; color: var(--ak-tinte-matt); }
.akte__stempel {
  position: absolute;
  top: 1rem;
  right: 1rem;
  transform: rotate(-8deg);
  border: 2px solid var(--ak-signal);
  color: var(--ak-signal);
  font-family: var(--ak-schrift);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  opacity: 0.85;
}
.raumcode { font-family: var(--ak-schrift); letter-spacing: 0.2em; background: var(--ak-tinte); color: var(--ak-papier); padding: 0.1rem 0.4rem; }
/* Vier Dossiers nebeneinander brauchen mehr Luft als ein Vordruck mit zwei Feldern. */
.akte--lobby { max-width: 44rem; }

/* ------------------------------------------------------------ Formular & Rollenwahl */

.formular { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.2rem; }
.feld { display: flex; flex-direction: column; gap: 0.3rem; }
.feld__etikett { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--ak-tinte-matt); font-weight: 700; }
.feld__leise { text-transform: none; letter-spacing: 0; font-weight: 400; }
.feld input {
  min-height: 46px;
  padding: 0 0.7rem;
  background: #fff;
  border: 1px solid var(--ak-papier-schatten);
  border-bottom: 2px solid var(--ak-tinte-matt);
  border-radius: 3px;
  color: var(--ak-tinte);
  font-size: 1rem;
  font-family: var(--ak-schrift);
}
.feld input:focus { outline: 2px solid var(--ak-gold); outline-offset: 1px; }

/*
 * DIE VIER DOSSIERS — DIE LIVE-ROLLENWAHL DER LOBBY.
 *
 * Sie lösen die Rollenkarten des alten Vordrucks ab: Statt vier Radioknöpfen vor dem Beitritt liegen jetzt
 * vier Dossiers IN der Lobby aus, sichtbar für die ganze Crew. Frei ist ein Dossier klickbar und hell; hält es
 * ein anderer Kopf, sperrt es sich selbst — `.dossier--fremd` statt eines Fehlerkastens, den niemand lesen
 * würde, während gerade jemand anders zugreift.
 */
.dossiers { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.lobby__dossiers-kopf { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--ak-tinte-matt); margin: 1.1rem 0 0.3rem; }
.dossier {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--ak-papier-schatten);
  border-radius: 6px;
  cursor: pointer;
  min-height: 56px;
  text-align: left;
  font-family: inherit;
  color: var(--ak-tinte);
}
.dossier:disabled { cursor: not-allowed; }
.dossier--meins { border-color: var(--ak-gold); box-shadow: inset 0 0 0 2px var(--ak-gold); background: #fff; }
.dossier--fremd { opacity: 0.5; }
.dossier__bild { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ak-holz); }
.dossier__text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; color: var(--ak-tinte-matt); }
.dossier__text strong { color: var(--ak-tinte); font-size: 0.98rem; font-family: var(--ak-schrift); }
.dossier__stand {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ak-tinte-matt);
  white-space: nowrap;
}
.dossier--meins .dossier__stand { color: var(--ak-gold-tief); }

.lobbyliste__platzhalter {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed var(--ak-papier-schatten);
  color: var(--ak-tinte-matt);
  font-family: var(--ak-schrift);
  font-weight: 700;
}
.lobbyliste__ich { border-left-color: var(--ak-gold); background: rgba(212, 175, 55, 0.14); }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.2rem;
  background: var(--ak-papier-alt);
  border: 1px solid var(--ak-papier-schatten);
  border-bottom-width: 3px;
  border-radius: 5px;
  color: var(--ak-tinte);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf--stark { background: var(--ak-signal); border-color: var(--ak-signal-tief); color: #fff; }
.knopf--stark:hover:not(:disabled) { background: var(--ak-signal-tief); }
/* Der leise Knopf steht neben einem starken und darf ihn nicht überschreien: dieselbe Griffhöhe, weniger Papier. */
.knopf--leise {
  min-height: 44px;
  background: transparent;
  border-width: 1px;
  border-color: var(--ak-tinte-matt);
  color: var(--ak-tinte);
  font-size: 0.86rem;
}
.knopf--leise:hover:not(:disabled) { border-color: var(--ak-tinte); background: rgba(0, 0, 0, 0.06); }

/* Knopf und Quittung in einer Zeile. Die Quittung steht immer da — leer, bis sie etwas zu sagen hat. */
.teilen { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.teilen__quittung { font-size: 0.82rem; color: var(--ak-tinte-matt); overflow-wrap: anywhere; }

.fehler {
  background: rgba(196, 56, 38, 0.14);
  border-left: 4px solid var(--ak-signal);
  color: var(--ak-signal-tief);
  padding: 0.5rem 0.7rem;
  font-size: 0.86rem;
  margin: 0;
}

.lobbyliste { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.lobbyliste li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  background: rgba(255, 255, 255, 0.5);
  border-left: 4px solid var(--ak-holz);
  border-radius: 4px;
}
.lobbyliste img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ak-holz); }
.lobbyliste li strong { font-family: var(--ak-schrift); }

/* ------------------------------------------------------------ Der Tisch */

.tisch { display: flex; flex-direction: column; }

/*
 * UNTER 48rem IST DER TISCH EIN REITER UND KEIN STAPEL.
 *
 * Brett und Block untereinander heisst: Wer einen Raum betritt, scrollt zum Block, drückt einen Knopf und
 * scrollt zurück — pro Zug zweimal durch die ganze Seite. Die Leiste unten am Daumen schaltet stattdessen um,
 * und beide Flächen bekommen dabei die volle Höhe.
 *
 * Geschaltet wird über `hidden`-gleiche Anzeige und nicht über `visibility`: Eine Fläche, die ihre Masse
 * behält, läuft in jeder Überlaufmessung mit und scrollt die Seite seitwärts, obwohl niemand sie sieht.
 */
@media (max-width: 47.99rem) {
  .tisch[data-seite='tableau'] .block { display: none; }
  .tisch[data-seite='block'] .tableauseite { display: none; }
  .ansicht--spiel { padding-bottom: 4.6rem; }
  /* Das Brett sitzt mittig in dem, was Kopfleiste und Reiterleiste übrig lassen — sonst klebt es oben. */
  .tisch[data-seite='tableau'] { min-height: calc(100dvh - var(--ak-rahmen) - 4.6rem - 8rem); justify-content: center; }
}

.reiter { display: none; }
@media (max-width: 47.99rem) {
  .reiter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ak-holz-dunkel);
    border-top: 3px solid var(--ak-gold-tief);
  }
}
.reiter__knopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 56px;
  padding: 0.4rem;
  background: var(--ak-nacht-2);
  border: 0;
  color: var(--ak-papier-alt);
  font-family: var(--ak-schrift);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.reiter__zeichen { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reiter__knopf[aria-pressed='true'] { background: var(--ak-gold); color: #241a00; }
/* Der rote Punkt meint genau eine Sache: Du trägst einen Beweis, und der Griff dafür liegt hinter diesem Reiter. */
.reiter__punkt {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ak-signal-hell);
  border: 1px solid #2b0e07;
}

@media (min-width: 62rem) {
  .tisch {
    display: grid;
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    align-items: start;
    gap: 0;
    height: calc(100dvh - var(--ak-rahmen) - 4.6rem);
  }
  .tableauseite { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .block { height: 100%; overflow-y: auto; }
}

/* Die Tischplatte: dunkles Leder mit Naht. Darauf liegt das Brett. */
.tableauseite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Unter dieser Breite werden die Raumkarten zu Briefmarken: dann lieber das Brett seitlich schieben. */
  overflow-x: auto;
  padding: clamp(0.6rem, 1.6vw, 1.4rem);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(120, 90, 60, 0.18), transparent 70%),
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 7px),
    var(--ak-leder);
}
.tableau__fuss {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--ak-papier-alt);
  text-align: center;
  min-height: 1.2em;
}

/* ------------------------------------------------------------ Das Tableau */

/*
 * Ein massives Brett: Holzmaserung, weiche Ecken, eine Goldkante, und darunter ein Schatten, der es wirklich
 * auf dem Tisch liegen lässt. Die Kante ist zwei Ringe tief — Messing aussen, dunkles Holz innen.
 */
.tableau {
  position: relative;
  width: 100%;
  max-width: 62rem;
  aspect-ratio: 10 / 9;
  /*
   * KEIN `min-width`. Es standen hier 30rem — 480 Pixel —, und auf einem Telefon von 360 lag das Schleusentor
   * damit ausserhalb des Bildes: die eine Raumkarte, um die sich die ganze Nacht dreht. Die Karten werden
   * darunter klein, aber sie sind alle da, und `min-height` hält das Brett tippbar.
   */
  min-height: 17rem;
  flex: none;
  padding: clamp(0.7rem, 1.8vw, 1.6rem);
  border-radius: 18px;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 38px),
    linear-gradient(145deg, #5a3d22 0%, #4a3119 45%, #3a2513 100%);
  box-shadow:
    inset 0 0 0 3px var(--ak-gold-tief),
    inset 0 0 0 6px var(--ak-holz-tief),
    inset 0 3px 18px rgba(255, 220, 160, 0.09),
    0 14px 38px rgba(0, 0, 0, 0.75);
}

/*
 * AUF DEM SCHREIBTISCH BINDET DIE HÖHE, NICHT DIE BREITE.
 *
 * Mit `width: 100%` und festem Seitenverhältnis wurde das Brett höher als der Platz unter der Kopfleiste und
 * oben abgeschnitten — der Chefbüro-Rahmen lag dreiunddreissig Pixel ausserhalb. Die Breite rechnet deshalb
 * zusätzlich gegen die Resthöhe zurück; was übrig bleibt, ist immer das kleinere der beiden Masse. Die 9,6rem
 * sind gemessen: Kopfleiste, Polsterung der Tischplatte, Fusszeile.
 *
 * UND DIESE REGEL STEHT HINTER `.tableau`, NICHT DAVOR. In der Medienabfrage weiter oben stand sie schon
 * einmal — und verlor gegen das spätere `width: 100%` derselben Spezifität, ohne dass irgendetwas rot wurde.
 */
@media (min-width: 62rem) {
  .tableau { width: min(62rem, 100%, calc((100dvh - var(--ak-rahmen) - 9.6rem) * 10 / 9)); }
}

.raster {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  /*
   * DER ABSTAND IST DER GANG, UND ER MUSS BREITER SEIN ALS DER TÜRKNOPF.
   *
   * Bei 5,4 Prozent blieben in der Senkrechten rund zweiundvierzig Pixel — weniger als der Knopf von
   * sechsundvierzig, der darin sitzt. Gemessen lagen achtzehn von zwanzig Trittsteinen unter einem Knopf und
   * waren damit für niemanden sichtbar. Sieben Prozent geben dem Gang Luft; die Raumkarten verlieren dafür
   * gerade zwanzig Pixel Breite.
   */
  gap: clamp(30px, 4.9vw, 84px);
  width: 100%;
  height: 100%;
}
.gaenge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.tuerknoepfe { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* ------------------------------------------------------------ Die Raumkarten */

/*
 * DIE KARTE IST IHR EIGENER MASSSTAB.
 *
 * Schild, Zeichen und Chips hingen an der Fensterbreite (vw), und auf dem Telefon war die Karte 100 × 72 px
 * gross, der Chip darin aber 48 — beschnitten, und der Aktenfresser fehlte auf dem Brett. Mit `container-type:
 * size` rechnen sie gegen die Karte, in der sie liegen, und passen auf jedem Schirm.
 */
.raum {
  container-type: size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  padding: 0.45rem 0.4rem 0.35rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--ak-gold-tief);
  border-radius: 10px;
  color: var(--ak-papier);
  font: inherit;
  cursor: default;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -14px 26px rgba(0, 0, 0, 0.42),
    0 5px 12px rgba(0, 0, 0, 0.55);
}

/* Jeder Raum hat seinen eigenen Boden — daran erkennt man ihn, bevor man den Namen liest. */
.raum--teppich {
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 6px),
    linear-gradient(160deg, #71332a 0%, #59241f 100%);
}
.raum--oelstein {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 2px, transparent 2px 46px),
    linear-gradient(150deg, #5c5750 0%, #45403a 100%);
}
.raum--linoleum {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.07) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.06) 0 2px, transparent 3px),
    linear-gradient(150deg, #3f5a4e 0%, #2e4339 100%);
}
.raum--gitterrost {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0 3px, transparent 3px 11px),
    linear-gradient(150deg, #7a4a24 0%, #4e2d12 100%);
}
.raum--dielen {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 17px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 60px),
    linear-gradient(150deg, #7d5730 0%, #5b3d20 100%);
}
.raum--beton {
  background:
    repeating-linear-gradient(135deg, rgba(196, 56, 38, 0.3) 0 9px, transparent 9px 18px),
    linear-gradient(150deg, #4c4a47 0%, #33312e 100%);
}

.raum--archiv { border-color: var(--ak-gold); }
.raum--durchgang .raum__zeichen { opacity: 0.2; }
.raum--tor { border-color: var(--ak-signal); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 30px rgba(196, 56, 38, 0.45), 0 5px 12px rgba(0, 0, 0, 0.55); }

/* Das Zeichen: die Silhouette, an der man den Raum über den Tisch hinweg benennt. */
.raum__zeichen {
  width: clamp(26px, 34cqmin, 88px);
  height: clamp(26px, 34cqmin, 88px);
  color: rgba(255, 238, 205, 0.62);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
  pointer-events: none;
  flex: none;
}
/* Steht jemand im Raum, tritt das Zeichen zurück — die Chips sind dann die Hauptsache. */
.raum:has(.chip) .raum__zeichen { width: clamp(20px, 20cqmin, 56px); height: clamp(20px, 20cqmin, 56px); opacity: 0.55; }

/* Das Messingschild über der Tür */
.raum__schild {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.18rem 0.3rem;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.92), rgba(138, 111, 22, 0.92));
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  pointer-events: none;
  order: -1;
}
.raum__name {
  font-family: var(--ak-schrift);
  font-size: clamp(0.56rem, 7.5cqmin, 0.94rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #241a00;
  text-align: center;
  /* Ein Raumname, der nicht umbrechen darf, wird von der Karte abgeschnitten — „KESSELH…" steht auf keinem Brett. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.raum__moebel {
  font-size: clamp(0.46rem, 4.6cqmin, 0.66rem);
  line-height: 1.1;
  color: rgba(36, 26, 0, 0.72);
  text-align: center;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/*
 * Die drei Plaketten: eingeprägt, kleiner als alles andere auf dem Schild — und trotzdem der Grund, warum die
 * Deduktion überhaupt am Brett stattfindet. Ein Indiz nennt „Gitterrost", „Untergeschoss" oder „mit Maschinen";
 * wer dann sieben Räume im Kopf durchgehen muss, rechnet, statt hinzusehen.
 */
.raum__plaketten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;
  margin-top: 0.12rem;
}
.raum__plakette {
  padding: 0 0.28rem;
  font-size: clamp(0.38rem, 3.6cqmin, 0.56rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: rgba(36, 26, 0, 0.82);
  background: rgba(255, 244, 200, 0.42);
  border-top: 1px solid rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  text-align: center;
  overflow-wrap: anywhere;
}
.raum__plakette:empty { display: none; }
/* Auf schmalen Karten hat das Möbelstück keinen Platz mehr — der Name hat Vorrang. */
@container (max-height: 120px) {
  .raum__moebel { display: none; }
}
/* Erst wenn selbst der Name nur noch zweizeilig passt, gehen sie — auf 390 px sind sie die halbe Deduktion. */
@container (max-height: 62px) {
  .raum__plaketten { display: none; }
}

.raum__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  max-width: 100%;
  --ak-chip: clamp(26px, min(40cqh, 70cqw), 72px);
}
/*
 * JE MEHR CHIPS IN EINEM RAUM, DESTO KLEINER — UND GERECHNET WIRD GEGEN BEIDE KANTEN DER KARTE.
 *
 * Nur gegen die Höhe (cqmin) gerechnet passten vier Chips in der Breite nicht mehr nebeneinander, brachen um
 * und schoben sich aus der Karte: auf dem Telefon sechsundzwanzig Pixel. In Runde 1 steht die ganze Crew im
 * Treppenhaus, und dort fehlte prompt der vierte Kopf. Der cqw-Anteil ist deshalb so gewählt, dass n Chips
 * plus Lücken in eine Zeile passen.
 */
/*
 * GEZÄHLT WERDEN KINDER, NICHT KLASSEN. Die Regeln standen auf `.chip:nth-child(n)`, und seit Knorpels Chip in
 * einem Feld mit seinem Schild steckt, ist sein Platzhalter kein `.chip` mehr — die Karte hätte ihn beim Zählen
 * übersprungen und vier Chips in Chipgrösse für drei gezeichnet.
 */
.raum__chips:has(> :nth-child(2)) { --ak-chip: clamp(22px, min(36cqh, 42cqw), 64px); }
/* Ab drei stehen sie zu zweit nebeneinander statt in einer Reihe — nebeneinander wären sie halb so gross. */
.raum__chips:has(> :nth-child(3)),
.raum__chips:has(> :nth-child(4)) {
  --ak-chip: clamp(22px, min(30cqh, 42cqw), 64px);
  max-width: calc(2 * var(--ak-chip) + 6px);
}
.raum__chips:has(> :nth-child(5)) {
  --ak-chip: clamp(18px, min(24cqh, 28cqw), 52px);
  max-width: calc(3 * var(--ak-chip) + 10px);
}
/* Wo sich die halbe Crew drängt, braucht der Raum sein Zeichen nicht mehr — man erkennt ihn am Schild. */
.raum:has(.raum__chips > :nth-child(3)) .raum__zeichen { display: none; }

/*
 * AB VIER CHIPS EIN FÄCHER MIT VERSATZ STATT EINES GLEICHFÖRMIGEN RASTERS. Vier oder fünf gleich große Chips im
 * Treppenhaus verschwammen zu einem einzigen Klumpen — kein Rand, keine Tiefe, nur Farbe. `transform` verschiebt
 * hier rein optisch (die Größenrechnung und das Umbrechen oben bleiben unangetastet): jeder zweite Chip etwas
 * höher oder tiefer, leicht gedreht, mit eigenem `z-index` — dieselbe Idee wie ein aufgefächerter Kartenstapel.
 */
.raum__chips:has(> :nth-child(4)) > * {
  position: relative;
}
.raum__chips:has(> :nth-child(4)) > *:nth-child(4n+1) { transform: translate(8%, -10%) rotate(-5deg); z-index: 4; }
.raum__chips:has(> :nth-child(4)) > *:nth-child(4n+2) { transform: translate(-8%, 9%) rotate(4deg); z-index: 3; }
.raum__chips:has(> :nth-child(4)) > *:nth-child(4n+3) { transform: translate(9%, 8%) rotate(-3deg); z-index: 2; }
.raum__chips:has(> :nth-child(4)) > *:nth-child(4n+4) { transform: translate(-9%, -9%) rotate(3deg); z-index: 1; }
/* Der eigene Chip schwebt über dem Fächer, gleich an welcher Stelle er im Raster steht — man sucht sich nicht. */
.raum__chips:has(> :nth-child(4)) > .chipfeld {
  transform: translateY(-8%) scale(1.08);
  z-index: 10;
}
@media (prefers-reduced-motion: reduce) {
  .raum__chips:has(> :nth-child(4)) > * { transform: none; }
  .raum__chips:has(> :nth-child(4)) > .chipfeld { transform: scale(1.08); }
}

/* Sein Chip und das Schild darauf: ein Feld, damit die Marke mitwandert, wenn die Chips kleiner werden. */
.chipfeld { position: relative; display: inline-flex; width: var(--ak-chip); height: var(--ak-chip); }
.schildmarke {
  position: absolute;
  right: -14%;
  bottom: -14%;
  display: grid;
  place-items: center;
  width: 46%;
  height: 46%;
  min-width: 20px;
  min-height: 20px;
  color: var(--ak-gold-hell);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}
.schildmarke__zeichen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--ak-holz-tief);
  stroke: var(--ak-gold);
  stroke-width: 1.6;
}
.schildmarke__zahl {
  position: relative;
  font-family: var(--ak-schrift);
  font-size: clamp(0.5rem, 10cqmin, 0.8rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Wer eine Mappe trägt, trägt einen Goldrand: Ein Beweis in fremder Hand ist noch kein Beweis. */
.chip--traegt { box-shadow: 0 0 0 3px var(--ak-gold), 0 4px 0 rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.7); }

/*
 * DER EIGENE CHIP TRÄGT EINEN RING, DER NIE AUFHÖRT. Vier gleich große Holz-Chips auf einem Brett — welcher
 * davon man selbst ist, sieht man sonst nur an der Randfarbe, und die kennt am Anfang niemand auswendig. Ein
 * dauerhaft pulsierender Goldring plus ein „DU" darunter beantwortet die Frage auf den ersten Blick, jede
 * Runde neu.
 */
.chip--ich {
  animation: ak-ich-halo 2.4s ease-in-out infinite;
}
@keyframes ak-ich-halo {
  0%, 100% { box-shadow: 0 0 0 3px var(--ak-gold-hell), 0 0 10px 2px rgba(240, 216, 120, 0.55), 0 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.7); }
  50% { box-shadow: 0 0 0 5px var(--ak-gold-hell), 0 0 18px 6px rgba(240, 216, 120, 0.8), 0 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .chip--ich { animation: none; box-shadow: 0 0 0 4px var(--ak-gold-hell), 0 0 12px 3px rgba(240, 216, 120, 0.7), 0 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.7); }
}
.chip__du {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translate(-50%, 0);
  background: var(--ak-gold-hell);
  color: #241a00;
  font-family: var(--ak-schrift-ui);
  font-size: clamp(0.46rem, 9cqmin, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.1em 0.36em;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/*
 * DIE MAPPENMARKE: rot, am Chip des Aktenfressers, sichtbar auch ohne Block. Sie sitzt der Wachsamkeits-
 * Plakette gegenüber (oben statt unten), damit beide nie übereinanderliegen.
 */
.mappenmarke {
  position: absolute;
  left: -14%;
  top: -14%;
  display: grid;
  place-items: center;
  width: 46%;
  height: 46%;
  min-width: 20px;
  min-height: 20px;
  background: var(--ak-signal);
  border: 2px solid #fff4d6;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}
.mappenmarke__zeichen { width: 70%; height: 70%; fill: none; stroke: #fff4d6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Der Geisterchip: dieselbe Form wie ein echter, aber losgelöst vom Raster — er überlebt jedes Neuzeichnen. */
.chip--geist {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}

/* Dicke Holz-Chips: das, was man auf einem echten Brett in die Hand nimmt. */
.chip {
  width: var(--ak-chip);
  height: var(--ak-chip);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--ak-holz-hell);
  background: var(--ak-holz);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.45),
    0 6px 12px rgba(0, 0, 0, 0.7),
    inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.chip--ruth { border-color: var(--ak-rolle-ruth); }
.chip--selma { border-color: var(--ak-rolle-selma); }
.chip--nuri { border-color: var(--ak-rolle-nuri); }
.chip--ansgar { border-color: var(--ak-rolle-ansgar); }
.chip--knorpel {
  border-color: var(--ak-signal-hell);
  box-shadow: 0 0 0 4px rgba(196, 56, 38, 0.4), 0 4px 0 rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.75);
  animation: ak-gefahr 1.9s ease-in-out infinite;
}
@keyframes ak-gefahr {
  0%, 100% { box-shadow: 0 0 0 4px rgba(196, 56, 38, 0.35), 0 4px 0 rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.75); }
  50% { box-shadow: 0 0 0 10px rgba(196, 56, 38, 0.2), 0 4px 0 rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.75); }
}
.chip--liegt { filter: grayscale(0.55) brightness(0.8); transform: rotate(-16deg); animation: none; }
/* Der Beweischip: ein Siegel aus Messing, das im Bergungsraum liegt — dort, wo ein Fund erst zählt. */
.chip--beweis {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--ak-gold-hell);
  background: radial-gradient(circle at 36% 30%, var(--ak-gold-hell) 0 34%, var(--ak-gold) 35% 72%, var(--ak-gold-tief) 73% 100%);
  color: #241a00;
  font-family: var(--ak-schrift);
  font-size: calc(var(--ak-chip) * 0.46);
  font-weight: 700;
}

/* Zustände der Karte */
.raum--gefahr { border-color: var(--ak-signal-hell); }
.raum--hier { outline: 3px solid var(--ak-papier); outline-offset: -3px; }
.raum--durchsucht { filter: saturate(0.55) brightness(0.82); }
.raum--durchsucht .raum__name { text-decoration: line-through; text-decoration-color: var(--ak-signal); text-decoration-thickness: 2px; }
.raum--offen { cursor: pointer; animation: ak-pulsieren 1.8s ease-in-out infinite; }
.raum--offen:hover { filter: brightness(1.18); }
@keyframes ak-pulsieren {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.55), inset 0 -14px 26px rgba(0, 0, 0, 0.42), 0 5px 12px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: inset 0 0 0 4px var(--ak-gold-hell), inset 0 -14px 26px rgba(0, 0, 0, 0.42), 0 0 18px 3px rgba(212, 175, 55, 0.45), 0 5px 12px rgba(0, 0, 0, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .raum--offen, .chip--knorpel, .jaeger--knapp { animation: none; }
  .raum--offen { box-shadow: inset 0 0 0 3px var(--ak-gold-hell), 0 5px 12px rgba(0, 0, 0, 0.55); }
}

.raum__preis {
  position: absolute;
  left: 6px;
  bottom: 6px;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--ak-gold-hell) 0 34%, var(--ak-gold) 35% 70%, var(--ak-gold-tief) 71% 100%);
  color: #241a00;
  font-size: 0.72rem;
  font-weight: 700;
  border: 2px solid rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* Der grüne Haken: dieser Raum ist abgehakt und gibt nichts mehr her. */
.raum__haken {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-11deg);
  padding: 0.14rem 0.55rem;
  background: rgba(90, 125, 74, 0.9);
  border: 2px solid #cfe6bf;
  border-radius: 3px;
  color: #f2ffe9;
  font-family: var(--ak-schrift);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.raum__marke {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
  pointer-events: none;
}
.raum__marke--item { background: var(--ak-gold); color: #241a00; }
.raum__marke--seife { background: var(--ak-gruen); color: #fff; top: 32px; }
.raum__marke--sicht { background: var(--ak-signal); color: #fff; top: 58px; }

/* ------------------------------------------------------------ Gänge und Türen */

/* Der Gang ist ein heller Steinstreifen auf dem dunklen Holz — sonst sieht man zwischen zwei Karten nichts. */
.gang {
  stroke: #a08154;
  stroke-width: 26;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.gang--kiste { stroke: #8a6238; stroke-dasharray: 10 9; }
.gang--zu { stroke: #4e4944; stroke-dasharray: 5 10; }
.gang--route { stroke: #e0603f; filter: drop-shadow(0 0 9px rgba(255, 74, 46, 0.8)); }
.tritt { fill: rgba(45, 30, 16, 0.55); }
.tritt--route { fill: #4a1008; }

/*
 * Der Türknopf: 44 px Trefferfläche für einen Daumen, davon 32 px sichtbare Messingscheibe.
 *
 * DIE TRENNUNG IST KEIN SCHMUCK. Ein Knopf, der so breit ist wie der Gang, in dem er sitzt, deckt jeden
 * Trittstein zu — gemessen achtzehn von zwanzig. Die Fläche bleibt gross, das Bild wird kleiner, und der Gang
 * ist wieder als Gang zu sehen.
 */
.tuerknopf {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  pointer-events: auto;
  border: 0;
  background: none;
  color: rgba(255, 235, 200, 0.75);
  cursor: default;
}
.tuerknopf__scheibe {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid var(--ak-holz-tief);
  background: radial-gradient(circle at 36% 30%, #8a6238, #4a3119);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.65);
}
.tuerknopf__zeichen { position: relative; width: 17px; height: 17px; }
.tuerknopf__wort {
  position: relative;
  font-size: 0.46rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
}
.tuerknopf--setzen, .tuerknopf--raeumen { cursor: pointer; color: #fff4d6; }
.tuerknopf--setzen .tuerknopf__scheibe,
.tuerknopf--raeumen .tuerknopf__scheibe {
  border-color: var(--ak-gold-hell);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.4), 0 3px 7px rgba(0, 0, 0, 0.65);
}
.tuerknopf--setzen:hover .tuerknopf__scheibe,
.tuerknopf--raeumen:hover .tuerknopf__scheibe { background: radial-gradient(circle at 36% 30%, #a97b43, #6b4a2b); }
.tuerknopf--kiste .tuerknopf__scheibe { background: radial-gradient(circle at 36% 30%, #a97b43, #5b3d20); }
.tuerknopf--kiste { color: #ffe6c0; }
.tuerknopf--zu .tuerknopf__scheibe { background: radial-gradient(circle at 36% 30%, #57524c, #2b2825); }
.tuerknopf--zu { color: #c5c0b8; }

/* ------------------------------------------------------------ Der Ermittlungsblock */

.block {
  position: relative;
  padding: 0.9rem 0.9rem 2rem;
  background: var(--ak-nacht-2);
  border-left: 3px solid var(--ak-holz-dunkel);
}
.block__klammer {
  width: 42%;
  height: 18px;
  margin: 0 auto -9px;
  background: linear-gradient(180deg, #b9bcc0 0 45%, #7e8287 45% 100%);
  border: 1px solid #5d6165;
  border-radius: 4px 4px 0 0;
  position: relative;
  z-index: 2;
}
.block__blatt {
  background: var(--ak-papier);
  color: var(--ak-tinte);
  padding: 1.1rem 0.85rem 1rem;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  background-image: repeating-linear-gradient(0deg, rgba(43, 33, 25, 0.045) 0 1px, transparent 1px 26px);
}
.block__kopf {
  text-align: center;
  font-size: 1.02rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ak-tinte);
  border-bottom: 2px solid var(--ak-tinte);
  padding-bottom: 0.35rem;
  margin-bottom: 0.9rem;
}

/*
 * Der Zielkasten: die Banderole eines Aktendeckels, quer über den Block geklebt.
 *
 * ER HAT ZWEI ZUSTÄNDE, UND DER WECHSEL IST DER HÖHEPUNKT DER NACHT. Messing, solange gesucht wird; Grün und
 * ein leiser Puls, sobald alle drei Stücke im Treppenhaus liegen und es nur noch darum geht, ihn zu halten.
 */
/*
 * ER KLEBT, UND ZWAR IM BLOCK UND NICHT AM FENSTER. Der Block scrollt (auf dem Schreibtisch für sich, auf dem
 * Telefon mit der Seite), und ein Auftrag, der nach drei Zeilen Beweisliste oben hinausrutscht, beantwortet
 * die Frage „und was sollen wir jetzt?" genau so lange wie vorher: gar nicht.
 */
.einsatzziel {
  position: sticky;
  top: -0.3rem;
  z-index: 3;
  margin: -0.3rem -0.85rem 1rem;
  padding: 0.7rem 0.85rem;
  background: #e7d9b4;
  border-top: 3px solid var(--ak-gold-tief);
  border-bottom: 3px solid var(--ak-gold-tief);
  box-shadow: 0 6px 12px rgba(43, 33, 25, 0.22);
}
.einsatzziel__banderole {
  margin: 0 0 0.25rem;
  font-family: var(--ak-schrift);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #241a00;
}
.einsatzziel__text { margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--ak-tinte-matt); }
.einsatzziel--jagd {
  background: #cfdcc0;
  border-color: var(--ak-gruen);
  animation: ak-ziel 1.9s ease-in-out infinite;
}
.einsatzziel--jagd .einsatzziel__banderole { color: #1f3313; }
.einsatzziel--jagd .einsatzziel__text { color: #2f4a22; font-weight: 600; }
@keyframes ak-ziel {
  0%, 100% { background-color: #cfdcc0; }
  50% { background-color: #b6d69c; }
}
@media (prefers-reduced-motion: reduce) {
  .einsatzziel--jagd { animation: none; }
}

.notiz { margin-bottom: 1rem; }
.notiz__kopf {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ak-tinte-matt);
  margin-bottom: 0.4rem;
  border-bottom: 1px dashed var(--ak-papier-schatten);
  padding-bottom: 0.2rem;
}
.notiz__zusatz { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--ak-signal-tief); }

/* Die drei Beweise als Karten: Name, Stand, und wenn es eng wird, die Restliste. */
.beweisliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.beweis {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--ak-papier-schatten);
  border-left: 5px solid var(--ak-tinte-matt);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
}
.beweis__name { font-family: var(--ak-schrift); font-weight: 700; font-size: 0.9rem; }
.beweis__stand { font-size: 0.72rem; color: var(--ak-tinte-matt); }
.beweis__stand--sicher {
  align-self: flex-start;
  background: var(--ak-gold);
  color: #241a00;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}
.beweis__rest { font-size: 0.68rem; color: var(--ak-holz); font-style: italic; }
.beweis--geklaert { border-left-color: var(--ak-gruen); background: rgba(90, 125, 74, 0.14); }
.beweis--geklaert .beweis__name { color: var(--ak-gruen); }
/* Gefunden ist nicht geborgen: Ein getragenes Stück steht in Messing da und nennt, wer es im Arm hat. */
.beweis--unterwegs { border-left-color: var(--ak-gold-tief); background: rgba(212, 175, 55, 0.14); }
.beweis__stand--unterwegs { color: var(--ak-holz-dunkel); font-weight: 700; }

.beweis--mappe { border-left-color: var(--ak-signal); background: rgba(196, 56, 38, 0.12); }
.beweis__stand--mappe {
  align-self: flex-start;
  background: var(--ak-signal);
  color: #fff;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}

/*
 * Das eigene Klemmbrett: sieben Räume zum Abstreichen.
 *
 * ES IST DAS EINZIGE BEDIENELEMENT DIESES SPIELS, DAS NICHTS BEWIRKT — und genau deshalb steht es da. Seit die
 * Zettel privat sind, kann kein Rechner mehr zusammenzählen, was die Runde gemeinsam weiss; das tut der
 * Mensch, der zuhört. Wer sich verhört, streicht den falschen Raum, und niemand korrigiert ihn.
 */
.klemmbrett__lese { font-size: 0.72rem; color: var(--ak-tinte-matt); font-style: italic; margin: 0 0 0.4rem; }
.klemmbrett { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.3rem; }
.marke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--ak-papier-schatten);
  border-radius: 4px;
  color: var(--ak-tinte);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}
.marke:hover { border-color: var(--ak-gold-tief); background: #fff; }
.marke__name { overflow-wrap: anywhere; }
.marke__zeichen { flex: none; font-weight: 700; font-size: 0.95rem; color: var(--ak-tinte-matt); }
.marke--verdacht { background: rgba(212, 175, 55, 0.3); border-color: var(--ak-gold-tief); font-weight: 700; }
.marke--verdacht .marke__zeichen { color: var(--ak-signal); }
.marke--aus { background: rgba(43, 33, 25, 0.08); color: var(--ak-tinte-matt); }
.marke--aus .marke__name { text-decoration: line-through; }
/* Was der Server ohnehin als durchsucht führt, braucht keine Handschrift mehr — nur einen leisen Hinweis. */
.marke--durchsucht { border-style: dashed; opacity: 0.72; }

/* Handgriffe: gross, haptisch, und immer der wichtigste zuerst. */
.aktionen { display: flex; flex-direction: column; gap: 0.45rem; }
.aktion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  padding: 0.5rem 0.7rem;
  background: var(--ak-papier-alt);
  border: 1px solid var(--ak-tinte-matt);
  border-bottom-width: 3px;
  border-radius: 5px;
  color: var(--ak-tinte);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.aktion:hover:not(:disabled) { background: #fff; border-color: var(--ak-gold-tief); }
.aktion:disabled { opacity: 0.42; cursor: not-allowed; }
.aktion__preis {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--ak-tinte);
  color: var(--ak-papier);
  padding: 0.14rem 0.38rem;
  border-radius: 3px;
}
.aktion--stark {
  background: var(--ak-signal);
  border-color: var(--ak-signal-tief);
  color: #fff;
  min-height: 60px;
  font-size: 1rem;
  font-family: var(--ak-schrift);
}
.aktion--stark .aktion__preis { background: rgba(0, 0, 0, 0.35); color: #fff; }
/*
 * DER GEMEINSAME ZUGRIFF STICHT GOLDEN HERAUS — er ist der einzige Handgriff, den ein Kopf allein nicht
 * machen kann (README dieses Zimmers), und er steht nur, solange beide zufällig im selben Raum stehen. Dieselbe
 * Signalfarbe wie „Zu Boden bringen" hätte ihn im Block verschwinden lassen, dabei ist er der seltenere, wertvollere
 * Moment.
 */
.aktion--gold {
  background: linear-gradient(180deg, #f0d989, #b8973a);
  border-color: #7a5c14;
  color: #241a00;
}
.aktion--gold .aktion__preis { background: rgba(36, 26, 0, 0.28); color: #fff4d6; }
.aktionen__leer { font-size: 0.82rem; color: var(--ak-tinte-matt); font-style: italic; margin: 0; }

/* Indizien: kleine Durchschläge, das neueste oben. */
.indizien { display: flex; flex-direction: column; gap: 0.45rem; }
.indiz {
  background: #fffaf0;
  border: 1px solid var(--ak-papier-schatten);
  border-left: 4px solid var(--ak-gold);
  border-radius: 3px;
  padding: 0.4rem 0.5rem;
  box-shadow: 1px 1px 0 rgba(43, 33, 25, 0.12);
}
.indiz__stempel {
  display: inline-block;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ak-signal);
  border: 1px solid var(--ak-signal);
  padding: 0 0.25rem;
  margin-bottom: 0.2rem;
}
.indiz__text { font-family: var(--ak-schrift); font-size: 0.82rem; margin: 0; }
.indizien__leer { font-size: 0.82rem; color: var(--ak-tinte-matt); font-style: italic; margin: 0; }

.tasche { display: flex; flex-direction: column; gap: 0.4rem; }
.taschenfach {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px dashed var(--ak-papier-schatten);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  padding: 4px 6px;
}
.taschenfach img { width: 42px; height: 42px; flex: none; object-fit: cover; mix-blend-mode: multiply; display: block; border-radius: 2px; }
.taschenfach__text { min-width: 0; }
.taschenfach__name { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ak-tinte-matt); }
.taschenfach__wirkung { margin: 0.1rem 0 0; font-family: var(--ak-schrift); font-size: 0.78rem; line-height: 1.25; overflow-wrap: anywhere; }
.tasche__leer { font-size: 0.82rem; color: var(--ak-tinte-matt); font-style: italic; margin: 0; }

.crewliste { list-style: none; margin: 0; padding: 0; }
.crewliste li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0;
  font-size: 0.8rem;
  border-bottom: 1px dotted var(--ak-papier-schatten);
}
.crewliste li:last-child { border-bottom: 0; }
.crewliste img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ak-holz); flex: none; }
.crew__name { font-weight: 700; font-family: var(--ak-schrift); }
/*
 * Die Crew-Zeile nennt, WAS jemand gefunden hat — nie, was darauf steht.
 *
 * „Selma · 2 Zettel: eine Police zur Raumart, ein Grundriss zur Etage" ist der ganze Sprechzwang in einer
 * Zeile: Der Tisch weiss, dass es eine Auskunft gibt und wer sie hat, und bekommt sie nur, wenn Selma redet.
 */
.crew__text { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.crew__zettel { font-size: 0.68rem; line-height: 1.2; color: var(--ak-tinte-matt); overflow-wrap: anywhere; }
.crew--ich .crew__name { color: var(--ak-gold-tief); }
/* Wer die Mappe hat, hat einen Stern daneben — sonst sucht die Crew einen Beweis, der längst in einer Hand liegt. */
.crew__mappe { flex: none; color: var(--ak-gold-tief); font-size: 0.8rem; }
/*
 * Der Bereit-Haken beantwortet die Frage, auf die eine stillstehende Runde sonst keine Antwort hat: auf wen
 * warten wir? Solange jemand noch zieht, steht dort sein Punktestand.
 */
.crew__bereit {
  flex: none;
  min-width: 2.2rem;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--ak-gold);
  color: #241a00;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}
.crew__bereit--ja { background: var(--ak-gruen); color: #fff; font-size: 0.8rem; }
.crew--fertig img { filter: grayscale(0.6) brightness(0.86); }
.crew--fertig .crew__name { color: var(--ak-tinte-matt); }

.knopf--runde {
  width: 100%;
  min-height: 58px;
  margin-top: 0.4rem;
  background: var(--ak-tinte);
  border: 2px solid var(--ak-gold);
  color: var(--ak-gold);
  font-family: var(--ak-schrift);
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.knopf--runde:hover:not(:disabled) { background: var(--ak-gold); color: var(--ak-tinte); }
.knopf--runde-fertig { background: var(--ak-gruen); border-color: var(--ak-gruen-hell); color: #fff; }

.protokoll { margin-top: 0.9rem; }
.protokoll summary {
  cursor: pointer;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ak-tinte-matt);
  padding: 0.4rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.protokoll div { max-height: 13rem; overflow-y: auto; font-size: 0.78rem; color: var(--ak-tinte-matt); }
.protokoll p { margin: 0 0 0.3rem; padding-bottom: 0.3rem; border-bottom: 1px dotted var(--ak-papier-schatten); }

/* ------------------------------------------------------------ Der private Notizzettel */

/*
 * Er sieht bewusst ANDERS aus als die Depesche daneben: kariertes Notizpapier statt Fernschreiben, schief
 * liegend statt sauber eingefahren, und eine Kopfzeile, die sagt, dass ausser dir niemand das hier sieht.
 * Zwei Kästen, die gleich aussehen, wären am Tisch zwei Kästen, die niemand auseinanderhält.
 */
.zettel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ak-ebene-hoch) + 21);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 8, 6, 0.8);
}
.zettel__blatt {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: 1.2rem 1.3rem 1.1rem;
  background:
    repeating-linear-gradient(0deg, rgba(43, 33, 25, 0.07) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(43, 33, 25, 0.07) 0 1px, transparent 1px 20px),
    #fffaf0;
  color: var(--ak-tinte);
  border: 1px solid var(--ak-papier-schatten);
  border-left: 6px solid var(--ak-gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  transform: rotate(-1.1deg);
}
.zettel__kopf {
  margin: 0 0 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ak-signal);
  font-weight: 700;
}
.zettel__stempel {
  display: inline-block;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ak-signal);
  border: 1px solid var(--ak-signal);
  padding: 0 0.25rem;
  margin-bottom: 0.3rem;
}
.zettel__titel { font-size: 1.05rem; margin-bottom: 0.4rem; }
.zettel__text { font-family: var(--ak-schrift); font-size: 1.05rem; line-height: 1.4; }
.zettel__auftrag {
  margin: 0.8rem 0 1rem;
  padding: 0.45rem 0.55rem;
  background: rgba(212, 175, 55, 0.22);
  border-top: 2px solid var(--ak-gold-tief);
  border-bottom: 2px solid var(--ak-gold-tief);
  font-size: 0.82rem;
  font-weight: 700;
}
.zettel__weiter { width: 100%; }

/* ------------------------------------------------------------ Die Depesche */

.depesche {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ak-ebene-hoch) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 8, 6, 0.74);
}
.depesche__karte {
  position: relative;
  width: 100%;
  max-width: 28rem;
  padding: 1.3rem 1.3rem 1.1rem;
  background:
    repeating-linear-gradient(0deg, rgba(43, 33, 25, 0.05) 0 1px, transparent 1px 22px),
    var(--ak-papier);
  color: var(--ak-tinte);
  border: 1px solid var(--ak-papier-schatten);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
  animation: ak-einfahren 260ms linear;
}
@keyframes ak-einfahren { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .depesche__karte { animation: none; } }
.depesche__lochung {
  position: absolute;
  inset: 5px 0 auto 0;
  height: 7px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(43, 33, 25, 0.35) 7px 13px);
  opacity: 0.6;
}
.depesche__stempel {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  transform: rotate(-7deg);
  border: 2px solid var(--ak-signal);
  color: var(--ak-signal);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.18rem 0.4rem;
  opacity: 0.85;
  max-width: 45%;
  text-align: center;
}
.depesche__kopf { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ak-tinte-matt); margin: 0.4rem 0 0.5rem; }
.depesche__titel { font-size: 1.25rem; margin-bottom: 0.5rem; max-width: 80%; }
.depesche__text { font-family: var(--ak-schrift); font-size: 0.95rem; }
.depesche__wirkung {
  font-weight: 700;
  font-size: 0.86rem;
  border-top: 2px solid var(--ak-tinte);
  border-bottom: 2px solid var(--ak-tinte);
  padding: 0.4rem 0;
  margin: 0.8rem 0 1rem;
}
.depesche__weiter { width: 100%; }

/* ------------------------------------------------------------ Das Würfelduell */

.duell {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ak-ebene-hoch) + 22);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 8, 6, 0.82);
}
.duell__buehne {
  position: relative;
  width: 100%;
  max-width: 24rem;
  padding: 1.3rem 1.3rem 1.1rem;
  background: var(--ak-nacht-2);
  color: var(--ak-papier);
  border: 2px solid var(--ak-holz-hell);
  border-radius: 6px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8);
  text-align: center;
}
.duell__kopf { margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--ak-papier-alt); text-transform: uppercase; letter-spacing: 0.08em; }
.duell__wuerfel { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.duell__wuerfel-block { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.duell__gegen { font-family: var(--ak-schrift); font-style: italic; color: var(--ak-tinte-matt); }
.duell__label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ak-papier-alt); }
.duell__bonus { font-size: 0.66rem; font-weight: 700; color: var(--ak-gold-hell); }
.duell__titel { font-size: 1.35rem; margin: 0.3rem 0 0.4rem; min-height: 1.6rem; }
.duell__text { font-family: var(--ak-schrift); font-size: 0.92rem; color: var(--ak-papier-alt); min-height: 2.6rem; }
.duell__weiter { width: 100%; margin-top: 0.6rem; }
.duell--sieg .duell__titel { color: var(--ak-gruen-hell); }
.duell--niederlage .duell__titel { color: var(--ak-signal-hell); }

/* Die Vorschau: Chancen und beide Ausgänge, bevor auch nur ein Würfel fällt. */
.duell__vorschau-bonus {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ak-gold-hell);
}
.duell__vorschau-folgen {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1rem;
  text-align: left;
}
.duell__vorschau-zeile dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ak-papier-alt);
}
.duell__vorschau-zeile dd {
  margin: 0.1rem 0 0;
  font-family: var(--ak-schrift);
  font-size: 0.9rem;
}
.duell__vorschau-zeile--sieg dd { color: var(--ak-gruen-hell); }
.duell__vorschau-zeile--niederlage dd { color: var(--ak-signal-hell); }
.duell__schuetteln { width: 100%; }

/* Ein echter Würfel: weisses Feld, neun Positionen, davon je nach Augenzahl ein paar besetzt. */
.wuerfel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0.4rem;
  background: #fdf8ec;
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.6);
}
.wuerfel--knorpel { background: #f0e0da; }
.wuerfel__auge { border-radius: 50%; background: transparent; align-self: center; justify-self: center; width: 60%; height: 60%; }
.wuerfel__auge--an { background: #241a11; }
.wuerfel--schuettelt { animation: ak-wuerfel-schuetteln 0.32s ease-in-out infinite; }
@keyframes ak-wuerfel-schuetteln {
  0%, 100% { transform: rotate(-6deg) translateX(-2px); }
  50% { transform: rotate(6deg) translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .wuerfel--schuettelt { animation: none; }
}

/* ------------------------------------------------------------ Der Raub-Alarm */

/*
 * EIN BANNER, KEINE DEPESCHE. Es kommt und geht von selbst — wer mitten im eigenen Zug steckt, soll nicht
 * jedes Mal einen Klick opfern, nur weil Knorpel gerade ein Regal leergeräumt hat. Signalrot, breiter als der
 * Melder darunter, und über der Reiterleiste auf dem Telefon aus demselben Grund wie dieser.
 */
.alarm {
  position: fixed;
  left: 50%;
  /* Unter BEIDEN Leisten: dem Kopf des Hauses und dem Cockpit dieses Spiels. */
  top: calc(var(--ak-rahmen) + 4.6rem);
  transform: translateX(-50%);
  z-index: calc(var(--ak-ebene-hoch) + 1);
  max-width: min(92vw, 34rem);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--ak-signal-tief);
  border: 2px solid var(--ak-signal-hell);
  border-radius: 5px;
  color: #fff;
  padding: 0.6rem 1rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);
  animation: ak-alarm-blinken 1.1s ease-in-out 3;
}
.alarm strong { font-family: var(--ak-schrift); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.alarm span { font-size: 0.88rem; }
@keyframes ak-alarm-blinken {
  0%, 100% { border-color: var(--ak-signal-hell); }
  50% { border-color: #fff4d6; }
}
@media (prefers-reduced-motion: reduce) {
  .alarm { animation: none; }
}

/* ------------------------------------------------------------ Der Comic */

/*
 * DER VORSPANN LIEGT ÜBER ALLEM, NICHT NUR ÜBER DEM TABLEAU — er steht ausserhalb von <main> und deckt auch
 * die Kopfleiste ab. Vollbild, ein Panel je Schritt, Bild oben und Kasten mit Text darunter — derselbe Aufbau
 * wie die Depesche, nur grösser: Das ist die eine Stelle, an der dieses Spiel wirklich Kino zeigt.
 */
.comic {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ak-ebene-hoch) + 30);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050403;
}
.comic__panel {
  width: min(100%, 64rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.comic__bild { flex: 1; width: 100%; min-height: 0; object-fit: contain; background: #000; }
.comic__kasten {
  flex: none;
  padding: 1rem clamp(1rem, 4vw, 2rem) 1.3rem;
  background: var(--ak-nacht-2);
  border-top: 3px solid var(--ak-gold-tief);
}
.comic__text { font-family: var(--ak-schrift); font-size: clamp(0.94rem, 2.4vw, 1.15rem); line-height: 1.5; color: var(--ak-papier); max-width: 52rem; margin: 0 auto 0.9rem; }
.comic__knoepfe { display: flex; justify-content: flex-end; gap: 0.6rem; max-width: 52rem; margin: 0 auto; }

/* ------------------------------------------------------------ Melder */

.melder {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: var(--ak-ebene-hoch);
  max-width: min(90vw, 30rem);
  background: var(--ak-signal-tief);
  border: 2px solid var(--ak-signal);
  border-radius: 5px;
  color: #fff;
  padding: 0.65rem 1rem;
  font-size: 0.86rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
}
/* Über der Reiterleiste, sonst liegt die Meldung unter dem Daumen. */
@media (max-width: 47.99rem) {
  .melder { bottom: 4.9rem; }
}

/* ------------------------------------------------------------ Das Morgenblatt */

/*
 * Die Abrechnung ist eine Zeitung, kein Aktendeckel.
 *
 * Eine Stunde Heist endete mit drei Zeilen Statistik auf Kanzleipapier — richtig und vollkommen tonlos. Was
 * eine Crew nach einer solchen Nacht wissen will, ist nicht ihr Ergebnis, sondern was die Stadt am nächsten
 * Morgen über sie liest. Deshalb: Frakturbreite Schlagzeile, Spaltensatz, Ticker.
 */
.tageblatt {
  width: min(46rem, 100%);
  margin: auto;
  padding: 1.4rem clamp(1rem, 4vw, 2.2rem) 1.6rem;
  background:
    repeating-linear-gradient(0deg, rgba(43, 33, 25, 0.035) 0 1px, transparent 1px 24px),
    var(--ak-papier);
  color: var(--ak-tinte);
  border: 1px solid var(--ak-papier-schatten);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.7);
}
.tageblatt__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding-bottom: 0.6rem;
  border-bottom: 4px double var(--ak-tinte);
  text-align: center;
}
.tageblatt__marke {
  font-family: var(--ak-schrift);
  font-size: clamp(1.3rem, 6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.tageblatt__zeile { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ak-tinte-matt); }
.tageblatt__schlagzeile {
  margin: 0.9rem 0 0.3rem;
  font-size: clamp(1.25rem, 5.2vw, 2rem);
  line-height: 1.08;
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.tageblatt__unterzeile {
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ak-papier-schatten);
  font-family: var(--ak-schrift);
  font-style: italic;
  font-size: 0.92rem;
  text-align: center;
  color: var(--ak-tinte-matt);
}
/* Zwei Spalten erst, wenn eine davon noch ein Zeilenmaß hat — darunter läse man Wortkolonnen. */
.tageblatt__satz { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
  .tageblatt__satz { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.6rem; }
}
.tageblatt__vorspann {
  margin: 0;
  font-family: var(--ak-schrift);
  font-size: 1rem;
  line-height: 1.5;
}
.tageblatt__vorspann::first-letter {
  float: left;
  font-size: 3.1rem;
  line-height: 0.82;
  padding: 0.1rem 0.35rem 0 0;
  font-weight: 700;
}
.ticker {
  margin: 0;
  padding: 0.6rem 0.8rem;
  background: rgba(43, 33, 25, 0.06);
  border-top: 3px solid var(--ak-tinte);
  border-bottom: 3px solid var(--ak-tinte);
}
.ticker dt {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ak-tinte-matt);
}
.ticker dd {
  margin: 0 0 0.55rem;
  font-family: var(--ak-schrift);
  font-size: 0.96rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ticker dd:last-child { margin-bottom: 0; }
.tageblatt__fuss {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ak-papier-schatten);
}
.tageblatt__stempel {
  transform: rotate(-6deg);
  border: 2px solid var(--ak-signal);
  color: var(--ak-signal);
  font-family: var(--ak-schrift);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
}
.tageblatt__fuss .knopf { margin-left: auto; }
.tageblatt--sieg .tageblatt__stempel { border-color: var(--ak-gruen); color: var(--ak-gruen); }
.tageblatt--sieg .tageblatt__schlagzeile { color: #2f4a22; }

/*
 * DER COMIC-AUSKLANG: das Titelbild der Morgenausgabe auf dem Sieg, ein eigener Kasten auf der Niederlage. Es
 * gibt kein zweites Bild für einen Verlust — der Kasten sagt das selbst, statt ein Bild zu erfinden, das es
 * nicht gibt.
 */
.tageblatt__comic { margin: 0.9rem 0; }
.tageblatt__comic-bild {
  display: block;
  width: 100%;
  border: 1px solid var(--ak-papier-schatten);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.tageblatt__comic-fallback {
  margin: 0;
  padding: 0.9rem 1rem;
  background: rgba(43, 33, 25, 0.06);
  border: 1px dashed var(--ak-papier-schatten);
  font-family: var(--ak-schrift);
  font-style: italic;
  text-align: center;
  color: var(--ak-tinte-matt);
}

/*
 * DAS URTEIL DER LESER: eine Sternebewertung im Morgenblatt.
 *
 * Die Karte liegt INNERHALB von .tageblatt und bleibt deshalb Papier, ganz gleich, dass der Rest der App
 * Nacht ist — der Papierton gehört dem Blatt, nicht der Ansicht (CLAUDE.md, Abschnitt 7). Jedes neue Bauteil
 * hier bekommt border-radius 0, keinen Verlauf als Fläche und Übergänge nur linear und höchstens 120ms. Der
 * Absenden-Knopf bleibt der bestehende `.knopf`/`.knopf--stark` aus dem Fuss — ein zweiter „Knopf auf Papier"
 * neben dem dort wäre dieselbe Form ein zweites Mal.
 */
.leserurteil {
  margin: 1.1rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--ak-papier-alt);
  border: 1px solid var(--ak-papier-schatten);
  border-top: 3px solid var(--ak-tinte);
}
.leserurteil__titel { margin: 0 0 0.25rem; font-family: var(--ak-schrift); font-size: 1.05rem; }
.leserurteil__frage { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--ak-tinte-matt); }

.leserurteil__sterne { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.leserurteil__stern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ak-papier-schatten);
  border-radius: 0;
  color: var(--ak-tinte-matt);
  cursor: pointer;
  transition: color 0.12s linear, border-color 0.12s linear, background-color 0.12s linear;
}
.leserurteil__stern svg { width: 22px; height: 22px; fill: currentColor; }
.leserurteil__stern:hover, .leserurteil__stern:focus-visible { border-color: var(--ak-gold-tief); color: var(--ak-gold-tief); }
/* Der Ton ist Tinte und nicht Gold — Gold bleibt Linie und Zeichen, nie eine gefüllte Fläche. */
.leserurteil__stern--an { color: var(--ak-gold-tief); border-color: var(--ak-gold-tief); background: rgba(43, 33, 25, 0.08); }

.leserurteil__text {
  display: block;
  width: 100%;
  min-height: 4.4rem;
  margin-bottom: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: #fff;
  border: 1px solid var(--ak-papier-schatten);
  border-radius: 0;
  color: var(--ak-tinte);
  font-family: var(--ak-schrift);
  font-size: 0.92rem;
  resize: vertical;
}
.leserurteil__text:focus { outline: 2px solid var(--ak-gold); outline-offset: 1px; }

.leserurteil .fehler { margin-bottom: 0.7rem; }

.leserurteil__zeile { display: flex; }

.leserurteil__kasse { margin: 0.8rem 0 0; font-size: 0.78rem; color: var(--ak-tinte-matt); }
.leserurteil__kasse a { color: var(--ak-gold-tief); }

.leserurteil__dank { margin: 0; font-family: var(--ak-schrift); font-size: 0.98rem; }

/* ------------------------------------------------------------ Der Rahmen des Hauses */

/*
 * DIE REITERLEISTE KLEBT AM FENSTER, DER FUSS DES HAUSES AM DOKUMENT.
 *
 * Am Ende der Seite liegt die feste Leiste damit über den letzten Zeilen des Fusses — und zwar nur im Spiel,
 * denn nur dort gibt es sie. Der zusätzliche Vorschub UNTEN IM FUSS gibt dem Dokument genau diese Höhe mehr,
 * sodass sich die letzte Zeile darüber schieben lässt.
 *
 * ER SITZT AM FUSS UND NICHT AM KÖRPER, und das ist der Unterschied zwischen einer Fläche und einem Streifen:
 * Ein Vorschub am Körper stellte unter den dunklen Fuss noch einmal 74 Pixel Nachtbraun — die Reiterleiste läge
 * dann auf zwei verschiedenen Gründen. So endet der Fuss dort, wo die Seite endet.
 *
 * Ein Browser ohne `:has()` zeigt die alte Überdeckung; kaputt ist dabei nichts.
 */
@media (max-width: 47.99rem) {
  .schale:has(.ansicht--spiel:not([hidden])) ~ .haus-fuss .haus-fuss__innen {
    padding-bottom: calc(var(--haus-gap-4) + 4.6rem);
  }
}

/*
 * DAS RECHTSBLATT: der Datenschutztext unter seiner eigenen Adresse.
 *
 * Es ist ein `<dialog>` und trägt `open` schon im Markup, wenn die Adresse danach fragt — ohne eine Zeile
 * JavaScript lesbar, und das Formular darin schliesst es auch ohne. Papier auf Nacht, wie jedes Dokument
 * dieses Spiels; die Breite ist ein Lesemass und nicht die Fensterbreite.
 */
.rechtsblatt {
  /*
   * ER STEHT MITTIG IM FENSTER, UND ZWAR AUCH OHNE `showModal()`.
   *
   * Ein `<dialog open>` ohne Skript ist NICHT modal: Der Browser stellt ihn absolut, setzt aber nur die beiden
   * waagerechten Kanten auf null — senkrecht behält er seine Stelle im Fluss, und die ist hier unter dem Fuss
   * des Hauses. Aufgerufen wurde er trotzdem über eine Adresse, und wer eine Adresse aufruft, will das Blatt
   * sehen und nicht danach suchen. `fixed` und `inset: 0` mit `margin: auto` setzen ihn dorthin, wo ihn ein
   * `showModal()` auch hinstellte.
   */
  position: fixed;
  inset: 0;
  z-index: calc(var(--ak-ebene-hoch) + 40);
  max-width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  margin: auto;
  padding: 1.4rem 1.6rem;
  background: var(--ak-papier);
  color: var(--ak-tinte);
  border: 3px solid var(--ak-holz-tief);
  border-top: 6px solid var(--ak-gold-tief);
}

.rechtsblatt::backdrop { background: rgba(10, 7, 4, 0.82); }
.rechtsblatt__titel { font-size: 1.35rem; }
.rechtsblatt p { font-size: 0.92rem; }
.rechtsblatt form { margin-top: 1rem; }