/* ============================================================================
 * tc-door — eine Tür in einen Ort (24.08.2026, Taskwerk #435)
 * ----------------------------------------------------------------------------
 * Herausgelöst aus `.ug-tuer` (css/untergrund.css), weil die Zitadelle
 * dieselbe Kachel braucht (#433) und zwei Fassungen zwei Wahrheiten wären.
 *
 * ⚠️ SIE MUSS OHNE BILD FUNKTIONIEREN. Am 24.08.2026 sind 16 Szenenbildnisse
 * bestellt und keines geliefert. Eine Ortskachel, die ohne Bild nach nichts
 * aussieht, wäre am Tag der Freigabe unsichtbar — deshalb trägt sie ohne
 * `<img>` ein großes Zeichen auf getöntem Grund, und das Bild ist die Kür.
 *
 * AUFBAU
 *   <a class="tc-door" href="…">            (oder <button>)
 *     <span class="tc-door__bild">…</span>   Bild ODER Zeichen
 *     <span class="tc-door__kopf">
 *       <span class="tc-door__name">…</span>
 *       <span class="tc-door__lage">…</span>
 *     </span>
 *     <span class="tc-door__was">…</span>
 *     <span class="tc-door__bau">…</span>    optional, Bauzustand
 *   </a>
 *
 * ⚠️ DIE KINDER SIND `display: block`. Ein `<button>` legt Inline-Elemente
 * sonst in EINE Zeile — im Untergrund stand deshalb „DER TRESORGorbo, der
 * Zähler…". Im Quelltext sieht das richtig aus, im Browser sofort falsch
 * (CLAUDE.md §9).
 *
 * ZUSTÄNDE
 *   .is-zu       verschlossen — gibt es noch nicht
 *   .is-neu      gerade aufgegangen, noch nie benutzt (mit __siegel)
 *
 * VARIANTEN
 *   --klein      ohne Bildfläche, für eine Reihe von Türen in einem Raum
 *                (Skarns Haus, #690). Wand dazu: .tc-door-wand--klein
 *   --ruine      unberührt (0 Tage gebaut)
 *   --bau        im Bau
 *   --fertig     ausgebaut
 * ========================================================================== */

.tc-door {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2, 8px);
  padding: 0 0 var(--tc-space-3, 12px);
  overflow: hidden;

  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg, 12px);

  color: inherit;
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;

  transition:
    transform var(--tc-motion-fast, 150ms),
    border-color var(--tc-motion-fast, 150ms),
    box-shadow var(--tc-motion-fast, 150ms);
}

.tc-door:hover,
.tc-door:focus-visible {
  transform: translateY(-3px);
  border-color: var(--tc-accent);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--tc-accent-glow);
}
.tc-door:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 2px; }
.tc-door:active { transform: translateY(0); }

/* ── Bildfläche ────────────────────────────────────────────────────────── */
/* ⚠️ SEITENVERHAELTNIS STATT FESTER HOEHE (26.08.2026). `height: 104px` war
   bei einer 320px-Kachel ein vernuenftiger Streifen und bei 448px ein
   4,3:1-Band, in dem vom Motiv nichts mehr zu erkennen war — die Hoehe
   stand fest, die Breite wuchs mit. Mit `aspect-ratio` waechst das Bild
   mit; `min-height` haelt es auf schmalen Kacheln lesbar, `max-height`
   verhindert, dass es auf grossen Schirmen die Kachel auffrisst. */
.tc-door__bild {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 16 / 6;
  min-height: 104px;
  max-height: 170px;
  font-size: 2.4rem;
  line-height: 1;

  /* Ohne Bild: getönter Grund aus dem Akzent, damit die Kachel Gewicht hat. */
  background:
    radial-gradient(120% 90% at 50% 22%,
      rgba(var(--tc-accent-rgb, 120, 91, 136), 0.22) 0%,
      rgba(var(--tc-accent-rgb, 120, 91, 136), 0.05) 55%,
      transparent 100%),
    var(--tc-bg-surface-3);
}

/* ⚠️ DAS BILD LIEGT ÜBER DEM ZEICHEN, es ersetzt es nicht.
   Die Hülle trägt das Emoji als Text; das Bild legt sich absolut darüber.
   Fehlt die Datei, malt ein `<img alt="">` schlicht nichts und das Zeichen
   bleibt stehen — ohne Fehler-Handler und ohne leeren Zwischenzustand.
   (Ein `onerror`-Rückfall funktionierte NICHT: `loading="lazy"` schiebt den
   Ladeversuch auf, bis die Kachel in Sicht kommt — bis dahin feuert kein
   Fehler, und die Kachel stand leer da. Im Browser gemessen, 24.08.2026.) */
.tc-door__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Gesichter und Bauwerke sitzen auf diesen Bildern im oberen Drittel —
     dieselbe Beobachtung wie bei den Wirte-Porträts im Untergrund. */
  object-position: 50% 28%;
  display: block;
}

/* Der Schleier: vier Stopps statt eines harten Balkens, sonst schneidet die
   Kante mitten durchs Motiv. */
.tc-door__bild::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.10) 38%,
    rgba(0, 0, 0, 0.42) 74%,
    var(--tc-bg-surface-1) 100%);
  pointer-events: none;
}

/* ── Text ──────────────────────────────────────────────────────────────── */
.tc-door__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2, 8px);
  padding: 0 var(--tc-space-4, 16px);
}

.tc-door__name {
  display: block;
  font-family: var(--tc-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tc-highlight);
}

.tc-door__lage {
  display: block;
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: .04em;
  color: var(--tc-text-muted);
  white-space: nowrap;
}

.tc-door__was {
  /* Zwei Zeilen, dann Auslassung: Die Beschreibungen sind zwischen einer
     und drei Zeilen lang, und mit `grid-auto-rows: 1fr` streckt die
     laengste alle Kacheln der Wand. Wer mehr wissen will, geht in den
     Raum — die Kachel ist eine Tuer, kein Artikel.
     `-webkit-box` ersetzt hier das fruehere `display: block` — beide
     zugleich waeren tote Zeilen, ueber die der naechste Leser stolpert. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 var(--tc-space-4, 16px);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--tc-text-default);
}

/* ── Bauzustand ────────────────────────────────────────────────────────── */
.tc-door__bau {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2, 8px);
  padding: var(--tc-space-1, 4px) var(--tc-space-4, 16px) 0;
  /* Sitzt unten, auch wenn der Text kurz ist — sonst schwimmt der Balken
     in der Kachelmitte, sobald `grid-auto-rows: 1fr` alle gleich hoch macht. */
  margin-top: auto;
}

.tc-door__balken {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.tc-door__fuell {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--tc-accent);
  transition: width var(--tc-motion-normal, 250ms);
}

.tc-door--fertig .tc-door__fuell { background: var(--tc-success); }
.tc-door--bau    .tc-door__fuell { background: var(--tc-warning); }

/* Ohne Balken (noch nichts geschafft) rutschte der Text nach links und die
   Unterkanten der Kacheln fluchteten nicht mehr — er bleibt rechts. */
.tc-door__bau.is-ohne-balken .tc-door__bau-text { margin-left: auto; }

.tc-door__bau-text {
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-muted);
  white-space: nowrap;
}
.tc-door--ruine .tc-door__bau-text { color: var(--tc-text-muted); opacity: .75; }

/* ── Verschlossen ──────────────────────────────────────────────────────── */
.tc-door.is-zu {
  cursor: default;
  border-style: dashed;
  opacity: .62;
}
.tc-door.is-zu:hover,
.tc-door.is-zu:focus-visible {
  transform: none;
  border-color: var(--tc-border-default);
  box-shadow: none;
}
.tc-door.is-zu .tc-door__bild {
  filter: grayscale(1);
  background: var(--tc-bg-surface-2);
}

/* ── Variante: die Porträt-Tür ─────────────────────────────────────────────
   Für Türen, deren Bild ein GESICHT ist — die Wirte des Untergrunds
   (Taskwerk #559). Die Zitadellen-Kacheln zeigen Räume und Bauwerke; dort
   ist der 16/6-Streifen richtig, weil ein Raum breiter als hoch ist. Ein
   Porträt ist es nicht.

   ⚠️ GEMESSEN, NICHT GESCHÄTZT (03.09.2026, an der Live-Gasse mit
   angemeldeter Sitzung, 375px): Die acht Türen sind 330 bis 351px hoch, ihr
   Bild 217px bei 16/10. Mit dem Basis-Verhältnis und `max-height: 170px`
   wäre daraus ein 347x130-Band geworden — Gorbo, Krenk und Klamm hätten ihr
   Kinn verloren. `object-position: 50% 22%` statt 28 %, weil auf allen neun
   Porträts das Gesicht im oberen Drittel sitzt; das war schon die
   Begründung an `.ug-tuer__bild`, aus der diese Komponente stammt.

   ⚠️ UND DIE BESCHREIBUNG KLEMMT AUF DREI ZEILEN, NICHT ZWEI. An allen acht
   Häusern nachgezählt: sechs Sätze brauchen zwei Zeilen, „Die Werkbank"
   (140 Zeichen) und „Die Kopfgeldtafel" (118) brauchen drei. Mit der
   Basis-Klemme verlöre genau der Satz seine Hälfte, der am meisten
   erklärt — und die Kachel wäre ärmer als vor der Migration (§3). */
.tc-door--portrait .tc-door__bild {
  aspect-ratio: 16 / 10;
  min-height: 0;
  max-height: none;
}
.tc-door--portrait .tc-door__bild img { object-position: 50% 22%; }
.tc-door--portrait .tc-door__was { -webkit-line-clamp: 3; }

/* Wer hinter dem Tresen steht. Sie gehört UNTER den Namen des Hauses.

   ⚠️ NICHT `__lage` DAFÜR BENUTZEN: die sitzt per `margin-left: auto` rechts
   in der Kopfzeile (in der Zitadelle steht dort „B1", „Zufahrt"). „Inquisitorin
   Klamm" neben „Der Pranger" wäre auf einer 347px-Kachel umgebrochen und hätte
   den Hausnamen mit zusammengequetscht.

   Der Kopf wird dafür zur Spalte mit 2px Abstand, damit Haus und Wirt als ein
   Block lesen. Ohne das trennt sie der 8px-Gap der Kachel genauso weit wie vom
   Beschreibungssatz — und die Zusammengehörigkeit, die die Gasse heute zeigt,
   wäre weg. */
.tc-door--portrait .tc-door__kopf {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

/* Die Lage als eigene Zeile unter dem Wirt (#728, 18.09.2026).
   `margin-left: auto` der Basisregel schoebe sie an den rechten Rand — an
   der kleinen Tuer ist das richtig (sie steht dort neben dem Namen), im
   Portrait waere sie eine einzelne Zahl im Nichts. Und ein automatischer
   Seitenrand hebt in einer Spalte das `stretch` auf, die Zeile waere also
   zusaetzlich nur so breit wie ihr Text. */
.tc-door--portrait .tc-door__lage {
  margin-left: 0;
  white-space: normal;
  /* An der kleinen Tuer ist die Lage eine Marke am Rand — dort darf sie
     leise sein. Im Portrait ist sie die NEUIGKEIT der Kachel und steht in
     einer Reihe mit Name und Wirt; 0.68rem ohne Gewicht waere hier die
     kleinste Schrift der Karte fuer ihre wichtigste Zeile (Heuristik 8).
     Dieselbe Groesse wie das Preisschild am Fuss, damit die beiden Schilder
     der Kachel gleich laut sind. */
  font-size: 0.72rem;
  font-weight: 600;
}

/* `display: block` ist Pflicht, keine Kosmetik: Die Zeilen sind <span>s in
   einem <button>, und der darf keine Blockelemente enthalten. Ohne die Zeile
   fließen Name und Wirt zu „DER TRESORGorbo, der Zähler" zusammen — im
   Quelltext unsichtbar, im Browser sofort (§9, und im Untergrund genau so
   passiert). Das Polster erbt sie von `__kopf`. */
.tc-door__wirt {
  display: block;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--tc-deco-warm-text);
}

/* ── Das Preisschild (#730, 17.09.2026) ────────────────────────────────── */
/* Keine Tür nannte einen Preis. Wer vor dem Fehdestein stand, erfuhr erst im
   Raum, dass die Hand auf dem Stein 100 SG kostet — und wer vor der Werkbank
   stand, erfuhr nie, dass ein Hobbyziel nichts kostet. Beides hält Leute
   draußen: das eine aus Schreck, das andere aus Vorsicht.

   Steht unter `tc-door__was` und damit am Fuß der Kachel, wie ein Schild
   neben dem Eingang. `kostenlos` ist bewusst NICHT hervorgehoben — es ist die
   Entwarnung, nicht die Nachricht. */
.tc-door__preis {
  display: block;
  margin-top: auto;
  padding: var(--tc-space-2, 8px) var(--tc-space-4, 16px) 0;
  font-size: 0.72rem;
  letter-spacing: .04em;
  color: var(--tc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-door__preis--frei { color: var(--tc-success); opacity: .85; }

/* ── Türwand ───────────────────────────────────────────────────────────── */
/* ⚠️ AUTO-FILL STATT FESTER SPALTENZAHL (26.08.2026, von Tim gemeldet:
   „Die Kacheln im Innenhof sind unsauber gesetzt").
   Hier stand `repeat(3, 1fr)` ab 900px — ab da blieb es bei DREI Spalten,
   egal wie breit der Bildschirm ist. Gemessen an Tims Gerät (2106px):
   drei Kacheln à 448px nutzten 1368px, der Rest blieb leer, und die Kachel
   wurde dabei so breit, dass das 104px-Bild zu einem 4:1-Streifen wurde.
   `auto-fill` mit einer Mindestbreite legt die Spaltenzahl dem Platz nach
   fest: 3 bei 1100px, 4 bei 1400px, mehr auf großen Schirmen — und die
   Kacheln bleiben dabei in einem Format, in dem das Bild etwas zeigt. */
.tc-door-wand {
  display: grid;
  gap: var(--tc-space-3, 12px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Gleich hohe Zeilen: Ohne das springt die Zeilenhöhe mit der Textmenge
     (an Tims Innenhof gemessen: 273 / 294 / 221px in drei Zeilen
     untereinander). Die Kacheln sind Türen in gleichrangige Räume — sie
     als verschieden große Kästen zu zeichnen behauptet eine Rangfolge,
     die es nicht gibt. */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
/* ============================================================================
 * DAS PORTRAIT BEWEGT SICH BEIM ÜBERFAHREN (04.09.2026)
 * ----------------------------------------------------------------------------
 * Tim: „spiel doch auf hover das Video von denen ab, wenn wir eins haben.
 * Oder frisst das zu viel Ladezeit?"
 *
 * Gemessen, bevor gebaut wurde — die Antwort ist „nein, wenn man es richtig
 * macht", und zwar aus drei Gründen:
 *
 *   1. DIE SEITE LÄDT KEIN BYTE MEHR. Das <video> steht ohne `src` da; erst
 *      der erste Hover setzt ihn. `preload="none"` allein hätte nicht
 *      gereicht — Browser holen damit trotzdem gern Metadaten.
 *   2. SECHS DER SIEBEN SPIELEN SOFORT. `moov` liegt bei 38–135 KB, also
 *      vor `mdat` (faststart). Bei gemessenen 723 KB/s heißt das rund eine
 *      Fünftelsekunde bis zum ersten Bild — nicht die 2,5 MB der ganzen
 *      Datei. Einzige Ausnahme: `nagel.mp4` trägt `moov` erst bei 1534 KB
 *      und muss ganz geladen werden.
 *   3. DAS POSTER IST DAS BISHERIGE BILD. Solange nichts geladen ist, steht
 *      genau das da, was vorher dastand. Bleibt das Laden aus — fehlende
 *      Datei, Sparmodus, Touch —, ändert sich nichts und niemand merkt, dass
 *      etwas gefehlt hätte.
 *
 * ⚠️ NUR WO ES EINEN ZEIGER GIBT. `@media (hover: hover) and (pointer: fine)`:
 * Auf dem iPad gibt es kein Überfahren, dort wäre der erste Fingerkontakt
 * schon der Klick — 2,5 MB für ein Video, das niemand sieht, weil die Tür im
 * selben Moment aufgeht.
 *
 * ⚠️ UND NICHT BEI REDUZIERTER BEWEGUNG (§9). Das ist kein Ein-/Ausblenden,
 * dessen Endzustand zählt — hier IST die Bewegung der Inhalt. Sie fällt
 * deshalb ganz weg statt auf 0.01ms zu kollabieren.
 * ========================================================================== */

/* Das Video liegt genau dort, wo das <img> liegt — dieselbe Regel, damit
   beim Umschalten nichts springt. */
.tc-door__bild video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  opacity: 0;
  transition: opacity var(--tc-motion-normal, 200ms) var(--tc-ease-out, cubic-bezier(0, 0, 0.2, 1));
  pointer-events: none;
}

/* `is-spielt` setzt das Skript erst, wenn wirklich Bilder kommen — nicht
   schon beim Hover. Sonst blendet die Kachel auf ein schwarzes Rechteck,
   solange geladen wird, und das ist schlechter als das ruhige Standbild. */
.tc-door__bild video.is-spielt { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tc-door__bild video { display: none; }
}

/* ============================================================================
 * DIE PORTRAIT-WAND HÖRT BEI DREI SPALTEN AUF (04.09.2026)
 * ----------------------------------------------------------------------------
 * Tim: „im Untergrund waren die Wirtsportraits früher größer. Das war deutlich
 * schöner."
 *
 * Er hat recht, und die Ursache ist nicht die Kachel, sondern die Wand. Beim
 * Umzug der Gasse von `.ug-tuer` auf diese Komponente (03.09.2026, #559) ist
 * die Spaltenregel mitgewechselt — und die beiden meinen Verschiedenes:
 *
 *     alt  .ug-gassen      1 Spalte · ab 620px zwei · ab 1040px DREI. Schluss.
 *     neu  .tc-door-wand   auto-fill, minmax(280px) — so viele wie passen.
 *
 * Im iframe an der echten Seite gemessen, Bildbreite × -höhe:
 *
 *     Fenster   jetzt              wie vorher (3 Spalten)
 *     1194px    371×232 (3 Sp.)    373×233   — gleich, deshalb faellt es
 *                                              auf dem iPad nicht auf
 *     1440px    337×210 (4 Sp.)    455×285
 *     1600px+   298×186 (5 Sp.)    509×318   — 59 % der frueheren Breite
 *
 * ⚠️ `minmax()` GRÖSSER ZU MACHEN LÖST ES NICHT. Bei 1550px Wandbreite ergibt
 * auch `minmax(320px, 1fr)` noch vier Spalten; auto-fill fuellt eben auf. Die
 * alte Regel war keine Mindestbreite, sondern eine OBERGRENZE an Spalten —
 * und genau die fehlte.
 *
 * Warum als Modifier und nicht in der Basis: Die Zitadelle und der Innenhof
 * benutzen dieselbe Wand mit Kacheln OHNE Portrait. Dort ist Auffuellen
 * richtig — eine Tuer mit einem Zeichen darin gewinnt nichts durch Breite.
 * Nur wo ein Gesicht drin ist, ist die Breite der Inhalt (Heuristik 3:
 * Varianten-Modifier statt neuer Komponente).
 * ========================================================================== */
.tc-door-wand--portrait { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .tc-door-wand--portrait { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tc-door-wand--portrait { grid-template-columns: repeat(3, 1fr); } }

/* Unter 520px eine Spalte — zwei nebeneinander lassen vom Bild nichts übrig. */
@media (max-width: 519px) { .tc-door-wand { grid-template-columns: 1fr; } }

/* ── Was der Raum kann (Taskwerk #437) ─────────────────────────────────────
   Die Wirkung des Ausbaus — „+2 auf Identifizieren", „+1 HK allgemein".
   Bis zum 24.08.2026 stand sie in `CITADEL_UPGRADES[].desc` und wurde von
   keiner Zeile gelesen.

   Zwei Zustände, und beide gehören hin: Was der Raum SCHON kann (Akzent,
   mit ✨) und was er nach dem Ausbau könnte (gedämpft). Nur das Erreichte zu
   zeigen hiesse, dass ein unberührter Raum aussieht wie einer ohne Nutzen —
   und dann fehlt der Grund, ihn zu bauen. */
.tc-door__wirkung {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 16px wie Kopf, Beschreibung und Bauzustand. Hier standen 12px —
     vier Pixel, die man einzeln nicht sieht und in der Spalte sehr wohl. */
  padding: 0 var(--tc-space-4, 16px);
  font-size: var(--tc-text-xs, 0.72rem);
  line-height: 1.4;
  color: var(--tc-text-muted);
}
.tc-door__wirkung.is-aktiv {
  color: var(--tc-highlight);
}
/* ⚠️ NICHT `--tc-accent` für Text (CLAUDE.md §9: der Akzent färbt nirgends
   Schrift). `--tc-highlight` ist der Ton für hervorgehobene Werte. */

/* ── Die Tür, in der man gerade steht ──────────────────────────────────────
   ⚠️ HIER STAND BIS ZUM 24.08.2026 NICHTS. `js/ui/zitadelle-tueren.js:60`
   vergibt `is-aktiv` seit dem ersten Tag und begründet in einem langen
   Kommentar, warum immer nur EINE Tür sie tragen darf („Eine Navigation, die
   drei Orte gleichzeitig markiert, sagt weniger als gar keine Markierung") —
   und dann gab es dafür keine einzige Regel. Die Sorgfalt war da, die Wirkung
   nicht. Eine Klasse ohne Regel fällt nicht auf, sie sieht nur nach nichts
   aus (CLAUDE.md §7i). */
.tc-door.is-aktiv {
  border-color: var(--tc-accent);
  background: var(--tc-bg-surface-2);
}
.tc-door.is-aktiv .tc-door__name { color: var(--tc-highlight); }
/* Kein Hover-Anheben an der Tür, in der man schon steht — sie führt nirgends
   hin, und eine Kachel, die sich hebt, verspricht einen Ortswechsel. */
.tc-door.is-aktiv:hover,
.tc-door.is-aktiv:focus-visible { transform: none; }


/* ── Das Wirkungs-Banner im Raum selbst (Taskwerk #437) ────────────────────
   Gezeichnet von ZitadelleTueren.wirkungZeigen(). Steht auf der Raumseite,
   weil der Bonus dort angewendet wird — an der Tür steht er nur als
   Ankündigung. */
.tc-raum-wirkung {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-3, 12px);
  padding: var(--tc-space-3, 12px) var(--tc-space-4, 16px);
  margin-bottom: var(--tc-space-3, 12px);
  border: 1px solid var(--tc-border-default);
  border-left: 3px solid var(--tc-border-strong);
  border-radius: var(--tc-radius-md, 8px);
  background: var(--tc-bg-surface-1);
  font-size: var(--tc-text-sm, 0.85rem);
  line-height: 1.5;
  color: var(--tc-text-muted);
}
.tc-raum-wirkung.is-aktiv {
  border-left-color: var(--tc-success);
  color: var(--tc-text-default);
}
.tc-raum-wirkung.is-aktiv strong { color: var(--tc-highlight); }
.tc-raum-wirkung__icon { font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; }
.tc-raum-wirkung__text { flex: 1; min-width: 0; }

/* ============================================================================
 * tc-tor — ein Portalbogen in Alsetas Ring (24.08.2026, Taskwerk #438)
 * ----------------------------------------------------------------------------
 * Steht neben tc-door, weil es dieselbe Frage beantwortet: Wohin führt das
 * hier? Eine Tür führt in einen Raum, ein Tor an einen Ort.
 *
 * ⚠️ EIN KALTES TOR IST KEIN KNOPF. Sechs der sieben Orte betritt die Gruppe
 * erst in späteren Büchern; ihre Bögen stehen da, führen aber nirgendwohin.
 * Der Renderer macht daraus ein <div> statt eines <a> — hier bekommt es das
 * Aussehen dazu: gestrichelt und entfärbt, wie eine verschlossene Tür.
 * ========================================================================== */
.tc-ring {
  display: grid;
  gap: var(--tc-space-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.tc-tor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tc-space-1, 4px);
  padding: var(--tc-space-4, 16px) var(--tc-space-3, 12px);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md, 8px);
  background: var(--tc-bg-surface-1);
  color: var(--tc-text-default);
  text-decoration: none;
  transition: transform var(--tc-motion-normal, .2s), border-color var(--tc-motion-normal, .2s);
}

/* Der Bogen selbst: oben rund, unten gerade — die Form eines Portals. */
.tc-tor__bogen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 76px;
  margin-bottom: var(--tc-space-2, 8px);
  border: 2px solid var(--tc-border-strong);
  border-bottom: none;
  border-radius: 30px 30px 0 0;
  background: var(--tc-bg-surface-2);
}
.tc-tor__zeichen { font-size: 1.6rem; line-height: 1; }

.tc-tor__name {
  font-weight: 600;
  font-size: var(--tc-text-base, 0.95rem);
  color: var(--tc-highlight);
}
/* ⚠️ `.tc-tor__buch` IST SEIT DEM 24.08.2026 TOT und steht trotzdem hier.
   Die sechs Tore von Alsetas Ring sind keine Orte aus der Buchreihe mehr,
   sondern die im Kampagnenband beschriebenen Proto-Aiudara; ein „Buch 4"
   daran waere eine Behauptung. Die Regel bleibt, bis der naechste
   CSS-Durchgang (#448) sie mit den uebrigen toten Familien einsammelt —
   eine halb entfernte Klasse ist schlimmer als eine ganze (CLAUDE.md §7k). */
.tc-tor__buch {
  font-size: var(--tc-text-xs, 0.72rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}
.tc-tor__was {
  font-size: var(--tc-text-sm, 0.85rem);
  line-height: 1.4;
  color: var(--tc-text-muted);
}
.tc-tor__stand {
  margin-top: var(--tc-space-2, 8px);
  font-size: var(--tc-text-xs, 0.72rem);
  line-height: 1.4;
  color: var(--tc-text-muted);
}
.tc-tor__stand.is-offen { color: var(--tc-success); }

/* ── Offen: dahinter liegt eine freigegebene Karte ───────────────────────── */
.tc-tor.is-offen { border-color: var(--tc-border-strong); }
.tc-tor.is-offen .tc-tor__bogen {
  border-color: var(--tc-accent);
  box-shadow: inset 0 -18px 26px -18px var(--tc-accent);
}
.tc-tor.is-offen:hover,
.tc-tor.is-offen:focus-visible {
  transform: translateY(-2px);
  border-color: var(--tc-accent);
}
.tc-tor.is-offen:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 2px; }

/* ── Kalt: der Bogen steht, das Tor nicht ────────────────────────────────── */
.tc-tor:not(.is-offen) { border-style: dashed; opacity: .68; cursor: default; }
.tc-tor:not(.is-offen) .tc-tor__bogen { border-style: dashed; filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
  .tc-tor { transition-duration: 0.01ms; }
  .tc-tor.is-offen:hover,
  .tc-tor.is-offen:focus-visible { transform: none; }
}

/* ⚠️ Nicht `animation: none` — dabei fiele auch der Endzustand weg. Hier gibt
   es nur Übergänge, die dürfen kollabieren. */
@media (prefers-reduced-motion: reduce) {
  .tc-door,
  .tc-door__fuell { transition-duration: 0.01ms; }
  .tc-door:hover,
  .tc-door:focus-visible { transform: none; }
}


/* --- Alsetas Ring: Wurfaufgabe, GM-Wissen, zerstoertes Tor (24.08.2026) --- */

/* ⚠️ DIE GOTTHEIT IST EINE WURFAUFGABE, KEINE BESCHRIFTUNG. Der Band nennt
   je Tor eine Fertigkeit und eine Schwierigkeit — sie hinzuschreiben naehme
   dem Tisch den Wurf. Hier steht deshalb nur, WAS zu wuerfeln ist. */
.tc-tor__pruefung {
  font-size: 0.72rem;
  color: var(--tc-highlight);
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border: 1px dashed var(--tc-border-default);
  border-radius: var(--tc-radius-sm);
  align-self: flex-start;
}

/* Was nur der Spielleiter sieht. Bewusst abgesetzt: Wer ueber die Schulter
   schaut, soll erkennen, dass er hier nicht mitliest. */
.tc-tor__gm {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--tc-text-muted);
  border-left: 2px solid var(--tc-warning);
  padding-left: 8px;
  margin-top: 2px;
}
.tc-tor__gm b { color: var(--tc-warning); font-weight: 600; }

/* Das Tor des Lotus. Es ist nicht „zu", es ist hin — und sieht anders aus
   als ein kaltes Tor, das man noch wecken koennte. */
.tc-tor.is-zerstoert {
  border-style: solid;
  border-color: var(--tc-danger-border);
  opacity: .55;
}
.tc-tor.is-zerstoert .tc-tor__bogen {
  border-style: solid;
  border-color: var(--tc-danger-border);
  filter: grayscale(1) brightness(.7);
}
.tc-tor.is-zerstoert .tc-tor__zeichen { opacity: .5; }

/* Ein Torbild, wenn eines abgelegt ist. Liegt keins, malt das <img alt="">
   nichts und das Zeichen darunter bleibt sichtbar — deshalb liegt es
   DARUEBER und nicht daneben. */
.tc-tor__bogen { position: relative; overflow: hidden; }
.tc-tor__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.tc-tor__bild:not([src]),
.tc-tor__bild[src=""] { display: none; }

/* Der Sichtname unter dem echten — erst sichtbar, wenn das Tor bekannt ist.
   Vorher steht er OBEN, als Name (alsetas-ring.js). */
.tc-tor__zweitname {
  font-size: 0.68rem;
  color: var(--tc-text-muted);
  font-style: italic;
  margin-top: -2px;
}

/* Die Gottheit, wenn die Gruppe das Tor kennt. Anders als .tc-tor__gm ist
   das kein verdecktes Wissen mehr, sondern gehoert zum Eintrag. */
.tc-tor__gottheit {
  font-size: 0.74rem;
  color: var(--tc-highlight);
  margin-top: 2px;
}

/* Der Blick in den Raum — was drinsteht, ohne dass man aufmachen muss.
   Bewusst ruhiger als der Bauzustand darunter: Das eine ist Inhalt,
   das andere Fortschritt. */
.tc-door__blick {
  /* ⚠️ DIESELBE EINRUECKUNG WIE DIE UEBRIGEN ZEILEN (26.08.2026, von Tim
     gemeldet: „21 Beiträge in der Chronik steht zu weit links"). Sie hatte
     GAR KEIN padding und stand damit als einzige Zeile der Kachel buendig
     am Rand — waehrend Kopf, Beschreibung und Bauzustand 16px tragen. Im
     Quelltext faellt so etwas nicht auf: Es fehlt eine Zeile, es steht
     keine falsche da. */
  padding: 0 var(--tc-space-4, 16px);
  font-size: 0.72rem;
  color: var(--tc-highlight);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.tc-door.is-zu .tc-door__blick { display: none; }


/* === DIE RAUMLEISTE (27.08.2026) ==========================================
   ⚠️ HIER STAND `tc-door-wand--leiste` — eine gequetschte Tuerwand als
   Seitennavigation. Tim hat sie dreimal beanstandet; gemessen waren die
   Kacheln 149 bis 301 px breit (der Untertitel trieb die Breite), die Leiste
   scrollte waagerecht (1814 in 1368 px) und das Bild war ein 34x104-Splitter.

   Die Leiste ist jetzt `tc-tabs--pills --wrap` (js/ui/zitadelle-tueren.js,
   leisteHtml). Der Modifier bleibt im Markup stehen und entscheidet, WELCHE
   Fassung gezeichnet wird — der Renderer tauscht die Klassen beim Zeichnen.
   Deshalb braucht `--leiste` hier keine Regeln mehr; was bliebe, waere eine
   zweite Wahrheit ueber dasselbe Bauteil.

   ⚠️ SEIT DEM 05.09.2026 STEHEN SIE AUCH NICHT MEHR DA (#560). Bis dahin trug
   diese Datei weiter 8 Regelbloecke mit 11 Selektoren fuer die abgeloeste
   Fassung — der Kommentar darueber sagte seit dem 27.08., dass sie
   gegenstandslos sind, und sie standen trotzdem. Gezaehlt mit entfernten
   Kommentaren; kein Selektor war gemischt, also saubere Komplettloeschung
   ohne Kuerzen (CLAUDE.md §7k).

   ⚠️ UND EINE STELLE HING DARAN, DIE MAN NICHT VERMUTET: `library-navigation.html`
   ruft `ZitadelleTueren.zeichnen` NIE auf. Ihr Demo ist statisches Markup und
   wurde von genau diesen toten Regeln gestylt. Wer sie ersatzlos entfernt,
   laesst das Library-Demo zusammenfallen — und die Library ist nach §3 die
   Quelle der Wahrheit. Sie zeigte hier neun Tage lang eine Fassung, die keine
   App-Seite mehr benutzt; das Demo ist mit umgeschrieben worden.

   *Merksatz: Bevor du eine tote Regel loeschst, sieh nach, wer sie OHNE den
   Renderer benutzt. Ein statisches Demo hat keinen Aufrufer, den ein grep auf
   die Klasse von einem echten unterscheiden koennte.*

   Eigene Regeln hat nur, was tc-tabs nicht wissen kann: dass ein Raum
   verschlossen sein kann. */
.pf-raumleiste .tc-tab.is-zu {
  opacity: 0.45;
  cursor: default;
  /* Ein verschlossener Raum ist kein Ziel — er darf nicht wie eins aussehen,
     auch nicht beim Ueberfahren. */
  pointer-events: none;
}

/* Der Zaehler ist eine Nebeninformation, kein Alarm. Das Badge aus tc-tabs
   ist fuer Benachrichtigungen gedacht und entsprechend laut; hier wird es
   leiser. */
.pf-raumleiste .tc-tab__badge {
  background: var(--tc-bg-surface-2);
  color: var(--tc-text-muted);
  border: 1px solid var(--tc-border-subtle);
  font-weight: var(--tc-weight-normal);
}

.pf-raumleiste .tc-tab.is-active .tc-tab__badge {
  color: var(--tc-highlight);
  /* ⚠️ Erster Entwurf stand hier auf `--tc-highlight-border` — das Token
     gibt es nicht. Mit Rueckfall waere es nicht aufgefallen, es haette
     nur nach nichts ausgesehen (§9). */
  border-color: rgba(var(--tc-highlight-rgb), 0.45);
}


/* ============================================================================
 * DIE KLEINE TÜR — Türen innerhalb eines Raums (17.09.2026, #690)
 * ----------------------------------------------------------------------------
 * Skarns Haus öffnet sich Tür für Tür mit dem Ruf (Konzept „Zum Gezinkten
 * Würfel"). Sieben Türen in einem Raum sind keine Orte mit Szenenbild,
 * sondern Abteilungen: Zeichen, Name, Zustand. Deshalb eine Variante dieser
 * Komponente statt einer zweiten Türfamilie (Heuristik 3).
 *
 *   <button class="tc-door tc-door--klein [is-neu|is-zu]">
 *     <span class="tc-door__bild">🐀</span>
 *     <span class="tc-door__kopf"><span class="tc-door__name">Deine Ratte</span></span>
 *     <span class="tc-door__siegel">neu</span>          nur bei .is-neu
 *     <span class="tc-door__fehlt">noch 2 Striche</span> nur bei .is-zu
 *   </button>
 *
 * ⚠️ `.is-zu` DIMMT DIE GROSSE TÜR AUF 62 %. Hier nicht: Die kleine
 * verschlossene Tür trägt die Auskunft „noch 2 Striche", und die muss lesbar
 * bleiben (Heuristik 8). Verschlossen heißt hier gestrichelt und leise, nicht
 * blass.
 * ========================================================================== */
.tc-door--klein {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-1, 4px);
  min-height: 92px;
  padding: var(--tc-space-3, 12px) var(--tc-space-2, 8px);
  text-align: center;
}

.tc-door--klein .tc-door__bild {
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  height: auto;
  font-size: 1.6rem;
  background: none;
}
.tc-door--klein .tc-door__bild::after { content: none; }

.tc-door--klein .tc-door__kopf {
  justify-content: center;
  padding: 0;
}
.tc-door--klein .tc-door__name { font-size: 0.9rem; }

.tc-door__fehlt {
  display: block;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-muted);
}

.tc-door--klein.is-zu {
  opacity: 1;
  background: transparent;
}
.tc-door--klein.is-zu .tc-door__name { color: var(--tc-text-muted); }
/* Graustufen allein machen aus einem Emoji auf dunklem Grund einen dunklen
   Klotz (im Browser so gesehen). Aufgehellt bleibt die Form erkennbar. */
.tc-door--klein.is-zu .tc-door__bild {
  filter: grayscale(1) brightness(1.7);
  opacity: .45;
  /* `.tc-door.is-zu .tc-door__bild` gibt der großen Tür eine graue Fläche
     und ist spezifischer als `--klein .tc-door__bild` — ohne diese Zeile
     stünde hinter jedem Zeichen ein dunkles Kästchen. */
  background: none;
}

/* Gerade aufgegangen: Akzentrand und ein Siegel, bis die Tür einmal benutzt
   wurde. Der Server merkt sich das, nicht der Browser.
   ⚠️ `position: relative` gehört hierher, nicht nur an `--klein`: Seit #698
   trägt auch die große Tür (Skarns Schankraum) ein Siegel, und ohne
   positionierten Vorfahren säße es an der Ecke der Seite. */
.tc-door.is-neu {
  position: relative;
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 1px var(--tc-accent-glow), 0 0 18px var(--tc-accent-glow);
}

.tc-door__siegel {
  position: absolute;
  top: var(--tc-space-2, 8px);
  right: var(--tc-space-2, 8px);
  padding: 3px 7px;
  font-family: var(--tc-font-body);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-text-on-highlight);
  background: var(--tc-highlight);
  border-radius: var(--tc-radius-full, 999px);
}

.tc-door-wand--klein {
  /* 96px: Sieben Türen passen ab etwa 730px in eine Zeile.
     ⚠️ auto-FIT, nicht auto-fill (live gemessen, 17.09.2026, 1920px): Mit
     auto-fill blieben rechts leere Spalten stehen, die Türen blieben 96px
     schmal und brachen „Der Schalter" in zwei Zeilen. auto-fit legt die
     leeren Spalten zusammen, die sieben Türen teilen sich die Breite. */
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--tc-space-2, 8px);
}