/* ============================================================================
 * szene.css — tc-szene: ein Bühnenbild mit Plätzen für Gesichter (06.10.2026, #897)
 * ----------------------------------------------------------------------------
 * Renderer: js/ui/szene.js (TC.Szene) · Demo: library-community.html,
 *           Kapitel „Die Szene" · Konzept und Lochmaße: Taskwerk #897
 *
 * Tim, 05.10.2026: „Wenn jemand am Pranger steht, dann sollte er das auch tun."
 * Eine Szene ist ein gemaltes Bild (später ein Cinemagraph mit diesem Bild
 * als Standbild), in dessen Löchern die Profilbilder sitzen: drei Pranger
 * neben Inquisitorin Klamm, zwei Duellsteine vor dem Steinwart.
 *
 * ⚠️ NICHT VERWECHSELN mit tc-scene (scene.css): Das ist die Kulisse hinter
 * einer ganzen Seite (Laternen, Staub). tc-szene ist ein Bild mit Inhalt.
 *
 * Struktur:
 *   .tc-szene[.tc-szene--<name>]           figure, trägt die Bilddaten (s. u.)
 *     .tc-szene__buehne                    der Bildkasten, rechnet die Plätze
 *       img.tc-szene__still                Standbild (immer da)
 *       video.tc-szene__video              optional, poster = Standbild
 *       .tc-szene__platz                   ein Loch (button, wenn man werfen darf)
 *         .tc-szene__loch > img            das Gesicht mit Innenschatten
 *         .tc-szene__kleckse               die Tomaten, Stufe 1/2/3
 *         .tc-szene__glut / __asche        am Duellstein, Stufe 1/2/3 (#914)
 *         .tc-szene__zahl                  wie viele, nie von wem
 *       .tc-szene__tomate / __platsch      der Wurf (kurzlebig, von JS;
 *                                          Modifier --ei, --glut, --asche)
 *     figcaption.tc-szene__text            unter dem Bild (Bühne: auf dem Bild):
 *       h2.tc-szene__titel                 Überschrift wie der Stadtschreier
 *       .tc-szene__unter                   Unterzeile
 *       .tc-szene__wer / __satz            wer spricht, was er sagt
 *       .tc-szene__fakten
 *       .tc-szene__inhalt                  eigener Block (Balken der Rundenziele)
 *       .tc-szene__fuss                    __knoepfe (Wege, __hinweis, __zeile) und
 *                                          __nav (‹ __zaehler › und Wende-Knopf)
 *
 *   .tc-szene-wende[.tc-szene-wende--schwenk]  die Bühne, die sich umdreht
 *     .tc-szene-wende__karte (.is-gewendet)       (--schwenk: die sich weiterdreht, #990)
 *       .tc-szene-wende__seite--vorn / --hinten
 *     .tc-szene-wende__leiste                     unter der Karte, schwenkt nicht mit:
 *       .tc-szene-wende__pfeil ‹  .tc-szene-balken  › .tc-szene-wende__pfeil
 *
 *   .tc-szene-balken                       Fortschritt der Bühne, ein Teil je Platz (#990)
 *     button.tc-szene-balken__teil[.ist-fertig|.ist-aktiv|.ist-szene]
 *       .tc-szene-balken__fuellung
 *
 * DIE RECHNUNG — ohne Skript, auf jeder Breite.
 * Die Plätze sind in BILDPIXELN vermessen (Mitte x/y, Radius r). Das Bild
 * liegt mit `object-fit: cover` im Kasten; dieselbe Rechnung setzt die Plätze:
 *     u    = max(Kastenbreite / Bildbreite, Kastenhöhe / Bildhöhe)   (px je Bildpixel)
 *     left = (Kastenbreite − Bildbreite · u) · ausschnitt-x + x · u
 *     top  = (Kastenhöhe   − Bildhöhe   · u) · ausschnitt-y + y · u
 * Das ist genau, was der Browser mit `object-position: X% Y%` macht. Kasten-
 * breite und -höhe sind Container-Einheiten (100cqw/100cqh) von __buehne
 * (`container-type: size`). Ein Video bekommt dieselben Regeln wie das
 * Standbild und liegt deshalb Pixel auf Pixel darüber — es muss nur dieselbe
 * Kamera haben (#897: „Die Kamera steht vollkommen still").
 *
 * EINGABEN (Custom Properties, setzt TC.Szene.html aus der Szenentabelle):
 *   --szene-bw / --szene-bh       Bildgröße in Pixeln (2752 / 1536)
 *   --szene-x  / --szene-y        Ausschnitt 0…1 (wie object-position)
 *   --szene-hoehe                 Kastenhöhe ÷ Kastenbreite
 *   --szene-*-schmal              dieselben drei bis 600 px Szenenbreite
 *   je Platz: --px / --py / --pr  Mitte und Radius in Bildpixeln
 * Wer die Szene in einen Kasten fester Höhe stellt (Dashboard-Bühne), setzt
 * `.tc-szene--fuellend`: Der Kasten nimmt dann die Höhe des Elternteils statt
 * des Seitenverhältnisses. Die Rechnung bleibt dieselbe.
 *
 * BEWEGUNG: Der Wurf fliegt, der Klecks springt auf, die Bühne dreht sich.
 * Bei reduzierter Bewegung fällt der Flug weg (JS), der Klecks steht sofort
 * (globaler Rückfall in tokens.css), das Video bleibt stehen (das Standbild
 * zeigt sich) und das Drehen wird ein Überblenden (eigener Block unten).
 *
 * ⚠️ KEIN z-index: Die Ebenen stehen in der Reihenfolge des Markups — Bild,
 * Plätze, Wurf. `isolation` hält sie im Kasten.
 * ========================================================================== */


/* ---- Die Szene ------------------------------------------------------------- */

.tc-szene {
  --szene-bw: 2752;
  --szene-bh: 1536;
  --szene-x: 0.5;
  --szene-y: 0.5;
  --szene-hoehe: 0.42;
  --szene-x-schmal: var(--szene-x);
  --szene-y-schmal: var(--szene-y);
  --szene-hoehe-schmal: 0.75;

  container: tc-szene / inline-size;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  color: var(--tc-text-default);
}

.tc-szene__buehne {
  /* Diese drei sind die Werte, mit denen gerechnet wird. Die Container-Abfrage
     unten tauscht sie am Telefon gegen die -schmal-Fassung. */
  --_x: var(--szene-x);
  --_y: var(--szene-y);
  --_hoehe: var(--szene-hoehe);

  position: relative;
  isolation: isolate;
  container-type: size;
  inline-size: 100%;
  aspect-ratio: 1 / var(--_hoehe);
  overflow: hidden;
  background: var(--tc-stein-ritze);
}

@container tc-szene (max-width: 600px) {
  .tc-szene__buehne {
    --_x: var(--szene-x-schmal);
    --_y: var(--szene-y-schmal);
    --_hoehe: var(--szene-hoehe-schmal);
  }
}

/* In einem Kasten fester Höhe (die Bühne im Dashboard dreht sich zwischen
   Stadtschreier und Szene): Der Kasten füllt, das Seitenverhältnis fällt weg. */
.tc-szene--fuellend { block-size: 100%; }
/* Am Schreibtisch wird ein füllender Kasten sehr flach (etwa 4 : 1). Dann
   gilt der eigene Ausschnitt der Szene (`yFlach`, z. B. Pranger 0,12), sonst
   bliebe nur das Band um die Löcher. Am Telefon (bis 600 px) bleibt -schmal. */
@container tc-szene (min-width: 601px) {
  .tc-szene--fuellend .tc-szene__buehne { --_y: var(--szene-y-flach, var(--szene-y)); }
}
/* Am Telefon ist ein füllender Kasten oft HÖHER als breit (die Vorderseite
   der Dashboard-Bühne misst bei 375 px knapp 600 px). Das 16:9-Bild verlöre
   dann die Seiten — gemessen fiel das rechte Brett heraus. Das Bild bekommt
   höchstens 85 % der Breite als Höhe (alle drei Löcher und Klamm bleiben im
   Bild), der Text darunter den Rest, mittig. */
@container tc-szene (max-width: 600px) {
  .tc-szene--fuellend .tc-szene__buehne { flex: 0 0 auto; block-size: min(85cqi, 100%); }
  .tc-szene--fuellend .tc-szene__text { flex: 1 1 auto; align-content: start; }
}
.tc-szene--fuellend .tc-szene__buehne {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-block-size: 0;
}
/* Mit eigenem Inhalt (#1027, `opts.inhalt`: die Balken der Rundenziele) ist
   der Text am Telefon höher als das Bild. Das Bild schrumpfte dann auf einen
   Streifen (gemessen 12.10.2026 bei 375 px: 177 von 577 px, vom Stadtschreier
   blieb der Kopf). Eine solche Szene bestimmt ihre Höhe selbst: Das Bild
   bekommt 62 % der Breite, der Kasten wächst mit dem Text, und die
   Vorderseite der Bühne wächst mit (dieselbe Rasterzelle). Am Schreibtisch
   liegt der Text auf dem Bild; dort füllt die Szene wie jede andere (sie
   wird in ihrer Zelle gestreckt). */
.tc-szene--fuellend.tc-szene--mit-inhalt { block-size: auto; }
@container tc-szene (max-width: 600px) {
  .tc-szene--fuellend.tc-szene--mit-inhalt .tc-szene__buehne { flex: 0 0 auto; block-size: 62cqi; }
}

.tc-szene__still,
.tc-szene__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: calc(var(--_x) * 100%) calc(var(--_y) * 100%);
  display: block;
}

/* Das Video steht ÜBER dem Standbild. Lädt es nicht oder steht die Bewegung
   still, sieht man das Standbild — dasselbe Bild, keine Lücke. */
@media (prefers-reduced-motion: reduce) {
  .tc-szene__video { display: none; }
}


/* ---- Ein Platz ------------------------------------------------------------- */

.tc-szene__platz {
  /* u: Bildschirmpixel je Bildpixel — die eine Zahl der Rechnung oben. */
  --_u: max(calc(100cqw / var(--szene-bw)), calc(100cqh / var(--szene-bh)));
  --_d: calc(2 * var(--pr) * var(--_u));      /* Lochdurchmesser */

  position: absolute;
  left: calc((100cqw - var(--szene-bw) * var(--_u)) * var(--_x) + var(--px) * var(--_u));
  top:  calc((100cqh - var(--szene-bh) * var(--_u)) * var(--_y) + var(--py) * var(--_u));
  /* Trefferfläche mindestens --tc-touch-min, auch wenn das Loch am Telefon
     nur 23 px misst. Das Loch selbst sitzt mittig darin. */
  inline-size: max(var(--tc-touch-min), var(--_d));
  block-size: max(var(--tc-touch-min), var(--_d));
  translate: -50% -50%;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--tc-radius-full);
  background: none;
  appearance: none;
  font-family: var(--tc-font-body);
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Das Loch steht in der Mitte des Platzes. Kleckse und Risse sind größer als
   das Loch und liegen deshalb absolut darüber, mittig — als Rasterkinder hätten
   sie die Zelle aufgeblasen, und das Gesicht wäre aus dem Loch gerutscht
   (gemessen 06.10.: bei 3000 px Breite 47 px nach rechts unten). */
.tc-szene__kleckse,
.tc-szene__risse {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

button.tc-szene__platz { cursor: crosshair; }
button.tc-szene__platz:focus-visible {
  outline: 2px solid var(--tc-highlight);
  outline-offset: 2px;
}

.tc-szene__loch {
  position: relative;
  inline-size: var(--_d);
  block-size: var(--_d);
  border-radius: var(--tc-radius-full);
  overflow: hidden;
  background: var(--tc-stein-ritze);
}
.tc-szene__loch img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Ins Bild gedrückt statt daraufgeklebt: etwas Farbe raus, etwas dunkler. */
  filter: saturate(0.82) brightness(0.88) contrast(1.05);
}
/* Der Innenschatten: Das Loch hat einen Rand, und das Gesicht steckt dahinter.
   Oben tiefer als unten — das Licht kommt von oben. */
.tc-szene__loch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 calc(var(--_d) * 0.10) calc(var(--_d) * 0.16) color-mix(in srgb, var(--tc-stein-ritze) 88%, transparent),
    inset 0 0 calc(var(--_d) * 0.10) color-mix(in srgb, var(--tc-stein-ritze) 70%, transparent);
  pointer-events: none;
}

/* Ein leerer Platz zeigt nichts — das Loch im Bild bleibt ein Loch („Ein leeres
   Brett bleibt leer, als Drohung"). Er steht nur im Markup, damit die Zahl der
   Plätze stimmt; Vorleser überspringen ihn. */
.tc-szene__platz--leer { pointer-events: none; }

/* Unter dem Loch, untereinander: die Zahl der Würfe und Klamms Zettel. */
.tc-szene__unten {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--_d) * 0.5 + 2px);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* Eigene Breite: Der Platz ist am Telefon nur 36 px breit, und daran
     gemessen brach der Zettel in drei Zeilen („Do., / 01.10."). */
  inline-size: max-content;
  pointer-events: none;
}
.tc-szene__zahl {
  padding: 1px 6px;
  border-radius: var(--tc-radius-full);
  background: color-mix(in srgb, var(--tc-stein-ritze) 78%, transparent);
  color: var(--tc-text-strong);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.tc-szene__zahl[hidden] { display: none; }

/* Klamms Zettel am Brett: „gelobt bis Do., 08.10." (#897). Papier und Tinte
   aus K2 wie der Schandbrief-Zettel — Klamm schreibt auf dasselbe Papier wie
   der Flüsterer, nur nüchterner. Ein gebrochenes Versprechen ist gestrichen. */
.tc-szene__zettel {
  max-inline-size: 7.5em;
  text-wrap: balance;
  padding: 1px 6px;
  background: var(--tc-papier);
  border: 1px solid var(--tc-papier-rand);
  border-radius: 2px;
  color: var(--tc-tinte);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-semibold);
  line-height: 1.25;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--tc-stein-ritze) 60%, transparent);
}
.tc-szene__zettel.is-gebrochen {
  color: var(--tc-stempel-weg);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Das Brandmal, eingebrannt ins Brett über dem Loch (#897): verkohltes Holz,
   das Wort in Glut. Material K3 (Holz, Fackel) — Klamm unterschreibt es, es
   ist nicht anonym. */
.tc-szene__mal {
  position: absolute;
  left: 50%;
  bottom: calc(50% + var(--_d) * 0.5 + 3px);
  translate: -50% 0;
  padding: 1px 6px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tc-holz) 40%, var(--tc-stein-ritze));
  border: 1px solid color-mix(in srgb, var(--tc-fackel-rot) 65%, transparent);
  color: var(--tc-fackel);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xs);
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 6px var(--tc-fackel-glut);
  pointer-events: none;
}

/* Ohne Profilbild: die Initialen, wie ein Name, in Holz geritzt. */
.tc-szene__ini {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  background: var(--tc-stein-hell);
  color: var(--tc-rune);
  font-family: var(--tc-font-display);
  font-size: max(10px, calc(var(--_d) * 0.36));
  line-height: 1;
}


/* ---- Kleckse --------------------------------------------------------------- */
/* Gezeichnet von TC.Szene.kleckse() als SVG in Tomatenfarben (K4). Die Fläche
   ist größer als das Loch: Ab Stufe 2 läuft es aufs Brett. */

.tc-szene__kleckse {
  inline-size: calc(var(--_d) * 1.7);
  block-size: calc(var(--_d) * 1.7);
  pointer-events: none;
  overflow: visible;
}
.tc-szene__kleckse--3 {
  inline-size: calc(var(--_d) * 2.3);
  block-size: calc(var(--_d) * 2.3);
}
.tc-szene__kleckse svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }

.tc-szene__k-haut     { fill: var(--tc-tomate); }
.tc-szene__k-schatten { fill: var(--tc-tomate-dunkel); opacity: 0.55; }
.tc-szene__k-glanz    { fill: var(--tc-tomate-hell); opacity: 0.85; }
.tc-szene__k-kern     { fill: var(--tc-tomate-kern); opacity: 0.9; }
.tc-szene__k-stiel    { fill: var(--tc-tomate-stiel); }

.tc-szene__e-weiss       { fill: var(--tc-ei-weiss); opacity: 0.9; }
.tc-szene__e-dotter      { fill: var(--tc-ei-dotter); }
.tc-szene__e-dotter-rand { fill: var(--tc-ei-dotter-dunkel); opacity: 0.7; }
.tc-szene__e-glanz       { fill: var(--tc-fackel-kern); opacity: 0.8; }
.tc-szene__e-schale      { fill: var(--tc-ei-schale); }
.tc-szene__e-schatten    { fill: var(--tc-ei-dotter-dunkel); opacity: 0.25; }

.tc-szene__klecks { transform-box: fill-box; transform-origin: center; }
.tc-szene__klecks.is-neu { animation: tc-szene-klecks 420ms cubic-bezier(.2, 1.6, .4, 1) both; }

@keyframes tc-szene-klecks {
  0%   { transform: scale(0.2); opacity: 0.4; }
  100% { transform: scale(1);   opacity: 1; }
}


/* ---- Der Wurf -------------------------------------------------------------- */
/* Die Tomate fliegt per Web Animations (Bahn in JS: Bogen, Drehung, kleiner
   werdend — sie fliegt ins Bild hinein). Hier steht nur ihre Gestalt. */

.tc-szene__tomate {
  position: absolute;
  left: 0;
  top: 0;
  inline-size: 34px;
  block-size: 34px;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--tc-stein-ritze) 70%, transparent));
}

.tc-szene__platsch {
  position: absolute;
  inline-size: 10px;
  block-size: 10px;
  translate: -50% -50%;
  border-radius: var(--tc-radius-full);
  background: radial-gradient(circle, var(--tc-tomate-hell) 0 35%, transparent 36%),
              radial-gradient(circle at 20% 30%, var(--tc-tomate) 0 12%, transparent 13%),
              radial-gradient(circle at 80% 25%, var(--tc-tomate) 0 10%, transparent 11%),
              radial-gradient(circle at 70% 85%, var(--tc-tomate-dunkel) 0 9%, transparent 10%),
              radial-gradient(circle at 15% 80%, var(--tc-tomate) 0 8%, transparent 9%);
  pointer-events: none;
  animation: tc-szene-platsch 380ms ease-out both;
}

.tc-szene__platsch--ei {
  background: radial-gradient(circle, var(--tc-ei-dotter) 0 30%, transparent 31%),
              radial-gradient(circle at 20% 30%, var(--tc-ei-weiss) 0 14%, transparent 15%),
              radial-gradient(circle at 80% 25%, var(--tc-ei-weiss) 0 12%, transparent 13%),
              radial-gradient(circle at 70% 85%, var(--tc-ei-schale) 0 9%, transparent 10%),
              radial-gradient(circle at 15% 80%, var(--tc-ei-weiss) 0 8%, transparent 9%);
}

@keyframes tc-szene-platsch {
  0%   { transform: scale(1);  opacity: 1; }
  100% { transform: scale(9);  opacity: 0; }
}


/* ---- Nach der Entscheidung (Fehde) ------------------------------------------
   Zwei Tage lang glüht der Stein des Siegers, der des Verlierers wird grau und
   bekommt Risse (#897). Die Risse zeichnet TC.Szene als SVG über das Loch. */

.tc-szene__platz--sieger .tc-szene__loch {
  box-shadow: 0 0 calc(var(--_d) * 0.35) calc(var(--_d) * 0.06) var(--tc-fackel-glut),
              0 0 0 2px color-mix(in srgb, var(--tc-fackel) 70%, transparent);
  animation: tc-szene-glut 2.8s ease-in-out infinite alternate;
}
.tc-szene__platz--verlierer .tc-szene__loch img { filter: grayscale(1) brightness(0.62) contrast(1.1); }
.tc-szene__risse { pointer-events: none; inline-size: var(--_d); block-size: var(--_d); }
.tc-szene__risse svg { display: block; inline-size: 100%; block-size: 100%; }
.tc-szene__riss       { fill: none; stroke: var(--tc-stein-ritze); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tc-szene__riss-licht { fill: none; stroke: var(--tc-rune-leise); stroke-width: 1.2; opacity: 0.6; transform: translate(1px, 1px); }

@keyframes tc-szene-glut {
  from { box-shadow: 0 0 calc(var(--_d) * 0.25) calc(var(--_d) * 0.03) var(--tc-fackel-glut),
                     0 0 0 2px color-mix(in srgb, var(--tc-fackel) 55%, transparent); }
  to   { box-shadow: 0 0 calc(var(--_d) * 0.45) calc(var(--_d) * 0.09) var(--tc-fackel-glut),
                     0 0 0 2px color-mix(in srgb, var(--tc-fackel) 85%, transparent); }
}


/* ---- Die offene Forderung (#1150) -------------------------------------------
   Eine Hand liegt auf dem Stein, die zweite fehlt noch. Der Geforderte steht im
   Schatten, um sein Loch atmet ein Runenring (tc-warten aus dem Baukasten,
   tokens.css E3): Der Stein wartet. Läuft die Frist aus (`--verfaellt`, die
   letzten zwei Tage), wird der Ring zur Glut einer Fackel, die ausgeht.
   Bei reduzierter Bewegung steht der Ring still (globale Regel, tokens.css I). */

.tc-szene__platz--wartet .tc-szene__loch {
  box-shadow: 0 0 calc(var(--_d) * 0.22) calc(var(--_d) * 0.02) var(--tc-rune-schein),
              0 0 0 2px color-mix(in srgb, var(--tc-rune) 75%, transparent);
  animation: tc-warten 2.6s ease-in-out infinite alternate;
}
.tc-szene__platz--wartet .tc-szene__loch img,
.tc-szene__platz--wartet .tc-szene__ini { filter: grayscale(0.75) brightness(0.55); }
.tc-szene__platz--verfaellt .tc-szene__loch {
  box-shadow: 0 0 calc(var(--_d) * 0.22) calc(var(--_d) * 0.02) color-mix(in srgb, var(--tc-fackel-rot) 45%, transparent),
              0 0 0 2px color-mix(in srgb, var(--tc-fackel-rot) 85%, transparent);
}

/* ---- Glut und Asche am Duellstein (#914) ------------------------------------
   Wer zuschaut, legt Glut in den Stein seines Favoriten oder streut Asche auf
   den des Gegners (Tim, 07.10.2026). Beide zählen getrennt, Stufen ab 1, 3,
   10 (TC.Szene.stufeVon). Zwei Ebenen über dem Loch, gezeichnet von
   TC.Szene.glut()/.asche() (viewBox ±80, Fläche 1,6 × Ø). Dazu färbt die
   Stufe das Gesicht: Glut wärmer und heller, Asche grauer und matter — die
   Filter am Bild setzen sich aus Variablen zusammen, beide gelten zugleich.
   Glut lebt (Funken steigen, der Rand flackert), Asche liegt still.
   Bei reduzierter Bewegung steht alles: Die Animationen enden sofort, und
   ohne `fill-mode` zeigen Funken und Zungen ihre Grundform (tokens.css). */

.tc-szene__platz--glut-1  { --_warm: 0.12; --_hell: 1.05; }
.tc-szene__platz--glut-2  { --_warm: 0.22; --_hell: 1.1; }
.tc-szene__platz--glut-3  { --_warm: 0.32; --_hell: 1.16; }
.tc-szene__platz--asche-1 { --_grau: 0.3;  --_matt: 0.94; }
.tc-szene__platz--asche-2 { --_grau: 0.55; --_matt: 0.86; }
.tc-szene__platz--asche-3 { --_grau: 0.8;  --_matt: 0.78; }
.tc-szene__platz[class*="--glut-"] .tc-szene__loch img,
.tc-szene__platz[class*="--asche-"] .tc-szene__loch img {
  filter: saturate(0.82) brightness(0.88) contrast(1.05)
          sepia(var(--_warm, 0)) brightness(var(--_hell, 1))
          grayscale(var(--_grau, 0)) brightness(var(--_matt, 1));
}

.tc-szene__glut,
.tc-szene__asche {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  inline-size: calc(var(--_d) * 1.6);
  block-size: calc(var(--_d) * 1.6);
  pointer-events: none;
}
.tc-szene__glut--0,
.tc-szene__asche--0 { display: none; }
.tc-szene__glut svg,
.tc-szene__asche svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.tc-szene__glut.is-neu,
.tc-szene__asche.is-neu { animation: tc-szene-auftauchen 480ms ease-out both; }

/* Glut: eine glühende Naht im Rand, Funken, Flammen (Fackel aus K3). Die
   Ebene leuchtet über dem Bild (screen): Auf dunklem Stein wird es hell, nie
   trüb. Dazu ein warmer Schein innen am Rand des Gesichts. */
.tc-szene__glut { mix-blend-mode: screen; }
.tc-szene__g-schein { fill: none; stroke: var(--tc-fackel-rot); stroke-width: 9; opacity: 0.55; }
.tc-szene__glut--2 .tc-szene__g-schein { stroke-width: 12; opacity: 0.7; }
.tc-szene__glut--3 .tc-szene__g-schein { stroke-width: 16; opacity: 0.85; }
.tc-szene__g-naht {
  fill: none;
  stroke: var(--tc-fackel);
  stroke-linecap: round;
  opacity: var(--g, 1);
}
.tc-szene__glut--3 .tc-szene__g-naht { stroke: var(--tc-fackel-kern); }
.tc-szene__g-funke {
  fill: var(--tc-fackel-kern);
  transform-box: fill-box;
  transform-origin: center;
  animation: tc-szene-funke 1.9s ease-out infinite;
  animation-delay: calc(var(--i, 0) * -0.27s);
}
.tc-szene__g-zunge {
  fill: var(--tc-fackel-rot);
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tc-szene-flackern 0.9s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.17s);
}
.tc-szene__g-zunge--mitte { fill: var(--tc-fackel); opacity: 0.95; }
.tc-szene__g-zunge--kern  { fill: var(--tc-fackel-kern); opacity: 0.9; }
.tc-szene__platz[class*="--glut-"] .tc-szene__loch::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 calc(var(--_d) * var(--_innen, 0.08)) color-mix(in srgb, var(--tc-fackel) 70%, transparent);
  pointer-events: none;
}
.tc-szene__platz--glut-2 { --_innen: 0.13; }
.tc-szene__platz--glut-3 { --_innen: 0.2; }
.tc-szene__g-stueck { fill: var(--tc-fackel-rot); }
.tc-szene__g-kern   { fill: var(--tc-fackel-kern); }
/* Das fliegende Glutstück trägt seinen Schein selbst. */
.tc-szene__tomate--glut .tc-szene__g-schein { fill: var(--tc-fackel-glut); stroke: none; opacity: 1; }

/* Asche: ein grauer Hauch auf dem Rand, Ruß, ein Haufen im Loch. */
.tc-szene__a-dunst    { fill: none; stroke: var(--tc-asche); stroke-width: 9; opacity: 0.35; }
.tc-szene__asche--3 .tc-szene__a-dunst { opacity: 0.5; }
.tc-szene__a-schleier { fill: var(--tc-asche); opacity: var(--a, 0.5); }
.tc-szene__a-russ     { fill: var(--tc-asche-russ); opacity: 0.6; }
.tc-szene__a-grund    { fill: var(--tc-asche-russ); opacity: 0.85; }
.tc-szene__a-haufen   { fill: var(--tc-asche); }
.tc-szene__a-flocke   { fill: var(--tc-asche-hell); opacity: 0.8; }
.tc-szene__tomate--asche .tc-szene__a-russ { opacity: 0.35; }

/* Nach dem Urteil gilt das Urteil: Der Verlierer bleibt grau, auch mit Glut. */
.tc-szene__platz.tc-szene__platz--verlierer .tc-szene__loch img { filter: grayscale(1) brightness(0.62) contrast(1.1); }

/* Der Aufprall: Funkenregen bzw. eine Staubwolke statt Saft. */
.tc-szene__platsch--glut {
  background: radial-gradient(circle, var(--tc-fackel-kern) 0 22%, transparent 23%),
              radial-gradient(circle at 20% 30%, var(--tc-fackel) 0 8%, transparent 9%),
              radial-gradient(circle at 80% 22%, var(--tc-fackel) 0 7%, transparent 8%),
              radial-gradient(circle at 72% 82%, var(--tc-fackel-rot) 0 7%, transparent 8%),
              radial-gradient(circle at 18% 78%, var(--tc-fackel) 0 6%, transparent 7%),
              radial-gradient(circle, var(--tc-fackel-glut) 0 60%, transparent 61%);
}
.tc-szene__platsch--asche {
  background: radial-gradient(circle, var(--tc-asche-hell) 0 26%, transparent 27%),
              radial-gradient(circle at 25% 35%, var(--tc-asche) 0 16%, transparent 17%),
              radial-gradient(circle at 78% 30%, var(--tc-asche) 0 14%, transparent 15%),
              radial-gradient(circle at 65% 80%, var(--tc-asche-russ) 0 10%, transparent 11%),
              radial-gradient(circle at 20% 75%, var(--tc-asche) 0 12%, transparent 13%);
  animation-duration: 620ms;
}

@keyframes tc-szene-funke {
  0%   { transform: translateY(0) scale(1);    opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-22px) scale(0.4); opacity: 0; }
}
@keyframes tc-szene-flackern {
  from { transform: scaleY(0.82) scaleX(1.04); }
  to   { transform: scaleY(1.12) scaleX(0.94); }
}
@keyframes tc-szene-auftauchen {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}


/* ---- Unter dem Bild -------------------------------------------------------- */
/* Die Löcher der Fehde sitzen bei 63 % der Bildhöhe (#897, Messung 06.10.):
   Text gehört deshalb UNTER das Bild, nicht ins untere Drittel. */

.tc-szene__text {
  display: grid;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3) var(--tc-space-4) var(--tc-space-4);
  border-top: 1px solid var(--tc-border-subtle);
}
.tc-szene__satz {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-lg);
  line-height: 1.35;
  color: var(--tc-text-strong);
}
/* In einem Kasten fester Höhe (Dashboard-Bühne) gehört die Höhe dem Bild:
   Klamms Satz eine Stufe kleiner. */
.tc-szene--fuellend .tc-szene__satz { font-size: var(--tc-text-base); }
.tc-szene--fuellend:not(.tc-szene--buehne) .tc-szene__text { padding-block: var(--tc-space-2) var(--tc-space-3); }

.tc-szene__wer {
  margin: 0;
  font-size: var(--tc-text-xs);
  letter-spacing: var(--tc-tracking-wide);
  text-transform: uppercase;
  color: var(--tc-highlight);
}
/* Der Knopf zum Anhören (#1058, TC.Stimme) neben „spricht:" — wie in der
   Begrüßung und der Erklär-Szene; die Zeile wird dadurch nicht höher. */
.tc-szene__stimme { display: inline-flex; vertical-align: middle; margin: -12px 0 -12px var(--tc-space-1); }
.tc-szene__stimme:empty { display: none; }
.tc-szene__fakten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
}
.tc-szene__fakten strong { color: var(--tc-text-strong); }
/* Ein eigener Block zwischen Fakten und Wegen (#1027: die Balken der
   Rundenziele, `opts.inhalt`). Die Szene gibt nur den Platz; wie der Inhalt
   auf dem Bild aussieht, regelt seine eigene Komponente (rundenziel.css). */
.tc-szene__inhalt {
  min-inline-size: 0;
  margin-top: var(--tc-space-2);
}
/* Ein Ruf des Stadtschreiers als Satz (`opts.satzHtml`): Der Fakt steht wie
   auf der Vorderseite der Bühne in <strong>. */
.tc-szene__satz strong { color: var(--tc-text-strong); }
/* Ein leiser Hinweis zwischen den Knöpfen („Tipp auf ein Gesicht"). */
.tc-szene__hinweis {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}
.tc-szene__knoepfe > .tc-choice { flex-basis: 100%; }
/* Eine eigene Zeile über den Wegen (#1061: die Gesten am Foto der Übergabe).
   Sie steht als ERSTES Kind in __knoepfe und nimmt die ganze Breite; anders
   als `opts.inhalt` lässt sie die Aufteilung der Szene, wie sie ist (mit
   `--mit-inhalt` schrumpfte das Bild am Telefon auf 62 % der Breite). */
.tc-szene__zeile { flex-basis: 100%; min-inline-size: 0; }
.tc-szene__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-1);
}


/* ---- Die Marke oben links (Tim, 06.10.2026: „das Spielsystem noch prominenter
   mit Logo") — die Wortmarke des Systems einer Fehde, über dem Bild, damit
   man auf einen Blick sieht, an welchem Tisch entschieden wird. Die Logos
   sind breite Wortmarken (AoS 4 : 1), also nach der Höhe bemessen. Der
   Schatten trägt sie auf hellem Grund (Schnee). */
/* ---- Ein Foto, ins Bild gehängt (#1060, 11.10.2026) --------------------------
   Die Übergabe eines Kopfgelds: Das Foto hängt als Blatt im Bühnenbild, leicht
   schief, mit Papierrand (Material-Tokens K2). Ein Knopf — ein Tipp öffnet es
   groß (`data-beleg-zoom`). Er bringt seine Gestalt selbst mit (§9).
   Telefon: rechts über den Brettern, Klamm bleibt links im Bild. Ab 601 px
   Szenenbreite rechts neben der Textspalte (Regeln bei `.tc-szene--beglichen`). */
.tc-szene__foto {
  appearance: none;
  position: absolute;
  z-index: 2;
  inset-block-start: 9%;
  inset-inline-end: 5%;
  inline-size: 52%;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 5px solid var(--tc-papier);
  border-radius: 2px;
  background: var(--tc-papier);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tc-stein-ritze) 85%, transparent);
  rotate: 2.5deg;
  font-family: inherit;
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color var(--tc-motion-fast), rotate var(--tc-motion-normal);
}
.tc-szene__foto img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.tc-szene__foto:hover { border-color: var(--tc-papier-rand); rotate: 0deg; }
.tc-szene__foto:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 3px; }
@container tc-szene (min-width: 601px) {
  .tc-szene__foto {
    inset-block-start: 50%;
    inset-inline-end: 4cqi;
    inline-size: min(32cqi, 360px);
    translate: 0 -54%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tc-szene__foto { transition-duration: 0.01ms; }
  .tc-szene__foto:hover { rotate: 2.5deg; }
}

.tc-szene__marke {
  position: absolute;
  z-index: 2;
  top: 4%;
  left: 3%;
  block-size: clamp(26px, 4.6cqi, 58px);
  inline-size: auto;
  max-inline-size: 34%;
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--tc-stein-ritze) 85%, transparent));
}

/* ---- Die Bühnen-Fassung (Tim, 06.10.2026; vereinheitlicht 07.10.2026) -------
   Tim, 07.10.2026, mit drei Telefon-Screenshots: „Die verschiedenen Stage-
   Elemente sehen jetzt stark unterschiedlich aus. […] Ich mag die Headline
   und das vollflächige Bild des Stadtschreiers." Seitdem hat jede Seite der
   Bühne denselben Aufbau wie der Stadtschreier (dashboard.html, #dashKopf):
     Überschrift   .tc-szene__titel   wie .tc-page-header__title
     Unterzeile    .tc-szene__unter   wie .tc-page-header__subtitle
     wer spricht   .tc-szene__wer     wie .dash-buehne__ruf-intro
     was er sagt   .tc-szene__satz    wie .dash-buehne__ruf-text
     Wege          .tc-szene__knoepfe
     Blätterzeile  .tc-szene__nav     ‹ 2 / 4 › und der Knopf zurück, unten,
                                      wo beim Stadtschreier „‹ 18 / 18 ›" steht
   Am Schreibtisch (ab 601 px Szenenbreite) liegt der Text in derselben
   Spalte wie beim Stadtschreier (mittig, höchstens 640 px, linksbündig) auf
   einem Verlauf über dem Bild. Am Telefon steht das Bild oben und läuft nach
   unten ins Dunkle aus; die Überschrift sitzt schon auf dem Auslauf, darunter
   der Rest, die Blätterzeile unten — wie beim Stadtschreier. Das Bild kann
   dort nicht die ganze Fläche füllen: 16 : 9 hochkant beschnitten verlöre
   die Plätze links und rechts. Wer wem was schuldet usw. steht weiter im
   Steckbrief am Gesicht. */
.tc-szene--buehne {
  position: relative;
  /* Derselbe Grund wie unter dem Bild des Stadtschreiers: nach unten dunkel. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tc-stein-ritze) 15%, transparent) 0%,
      color-mix(in srgb, var(--tc-stein-ritze) 55%, transparent) 55%,
      color-mix(in srgb, var(--tc-stein-ritze) 75%, transparent) 100%),
    var(--tc-bg-surface-1);
}
.tc-szene--buehne .tc-szene__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 0;
}
.tc-szene__titel {
  margin: 0 0 6px;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-3xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--tc-highlight);
  text-shadow: 0 2px 12px var(--tc-stein-ritze);
}
.tc-szene__unter {
  margin: 0;
  font-size: var(--tc-text-base);
  letter-spacing: 0.5px;
  color: var(--tc-text-default);
  text-shadow: 0 1px 6px var(--tc-stein-ritze);
  text-wrap: balance;
}
/* Was die beiden am Namen tragen, direkt unter „X gegen Y" (#1121): Titel,
   bei einem hängenden Brief der Schandname, bei einem Brandmal dessen Wort.
   Kursiv und in der Glanzfarbe (Entwurf aus #843, von Tim am 13.10.2026
   abgenommen), damit die Zeile zur Überschrift gehört und nicht wie die
   Termin-Zeile darunter aussieht. */
.tc-szene__unter--beititel { font-style: italic; color: var(--tc-highlight); }
.tc-szene--buehne .tc-szene__wer {
  margin: var(--tc-space-2) 0 2px;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-xs);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 6px var(--tc-stein-ritze);
}
.tc-szene--buehne .tc-szene__satz {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-base);
  line-height: 1.55;
  color: var(--tc-text-default);
  text-shadow: 0 1px 8px var(--tc-stein-ritze);
  text-wrap: pretty;
}
.tc-szene--buehne .tc-szene__fakten { color: var(--tc-text-muted); text-shadow: 0 1px 6px var(--tc-stein-ritze); }
.tc-szene--buehne .tc-szene__knoepfe { align-items: center; margin-top: var(--tc-space-2); }
.tc-szene--buehne .tc-szene__hinweis { flex-basis: auto; text-shadow: 0 1px 6px var(--tc-stein-ritze); }
/* Ein leiser Weg auf dem Bild sieht aus wie die runden Blätterknöpfe daneben
   (sonst stand „Zum Pranger" als loser Text im Bild). */
.tc-szene--buehne .tc-szene__knoepfe .tc-button--ghost {
  border-color: color-mix(in srgb, var(--tc-text-strong) 14%, transparent);
  background: color-mix(in srgb, var(--tc-stein-ritze) 35%, transparent);
}
.tc-szene--buehne .tc-szene__knoepfe .tc-button--ghost:hover,
.tc-szene--buehne .tc-szene__knoepfe .tc-button--ghost:focus-visible {
  border-color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-stein-ritze) 55%, transparent);
  color: var(--tc-highlight);
}

/* Unten: die Wege und die Blätterzeile — dieselben runden Knöpfe wie beim
   Stadtschreier. Am Schreibtisch in einer Zeile (die Pfeile vorn), am
   Telefon die Wege darüber und die Pfeile mittig ganz unten. */
.tc-szene__fuss {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-2);
}
.tc-szene__fuss > .tc-szene__knoepfe { margin-top: 0; }
.tc-szene__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2);
}
.tc-szene__zaehler {
  min-inline-size: 62px;
  text-align: center;
  font-size: var(--tc-text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--tc-text-muted);
  text-shadow: 0 1px 6px var(--tc-stein-ritze);
}

.tc-szene__titel--lang { font-size: var(--tc-text-2xl); letter-spacing: 0.5px; }
@container tc-szene (max-width: 900px) {
  .tc-szene__titel { font-size: var(--tc-text-2xl); letter-spacing: 0.5px; }
  .tc-szene__titel--lang { font-size: var(--tc-text-xl); }
}
/* Mit der Titelzeile (`tc-szene--beititel`, #1121) am Schreibtisch: Der Text
   liegt dort auf dem Bild und wächst nach oben. Zwischen Überschrift und den
   Gesichtern der Fehde waren am Dashboard 2 bis 23 px Luft (gemessen bei 1052
   bis 1552 px Szenenbreite); eine volle Zeile mehr legte die Überschrift auf
   die Zähler unter den Gesichtern. Deshalb rückt die Titelzeile eng an die
   Überschrift, steht eine Stufe kleiner, und die Überschrift nimmt ab 901 px
   die Größe, die sie darunter ohnehin hat. Am Telefon steht der Text unter
   dem Bild, dort bleibt alles, wie es ist. */
@container tc-szene (min-width: 601px) {
  .tc-szene--beititel .tc-szene__titel { margin-bottom: 2px; }
  .tc-szene--beititel .tc-szene__unter--beititel { font-size: var(--tc-text-sm); line-height: 1.3; }
}
@container tc-szene (min-width: 901px) {
  .tc-szene--beititel .tc-szene__titel { font-size: var(--tc-text-2xl); letter-spacing: 0.5px; }
  .tc-szene--beititel .tc-szene__titel--lang { font-size: var(--tc-text-xl); }
}

/* Schreibtisch: der Text auf dem Bild, in der Spalte des Stadtschreiers. */
@container tc-szene (min-width: 601px) {
  .tc-szene--buehne .tc-szene__text {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    align-items: center;
    padding: var(--tc-space-6) var(--tc-space-5) var(--tc-space-4);
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--tc-stein-ritze) 55%, transparent) 45%,
      color-mix(in srgb, var(--tc-stein-ritze) 88%, transparent) 100%);
    pointer-events: none;
  }
  .tc-szene--buehne .tc-szene__text > * {
    pointer-events: auto;
    inline-size: min(100%, 640px);
  }
  .tc-szene--buehne .tc-szene__fuss {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--tc-space-4);
  }
  .tc-szene--buehne .tc-szene__fuss { row-gap: var(--tc-space-1); }
  .tc-szene--buehne .tc-szene__fuss > .tc-szene__nav { order: -1; }
  /* Die Wege stehen neben den Pfeilen, der Hinweis („Zeig auf ein Gesicht")
     als eigene leise Zeile darunter — sonst zerriss er die Knopfzeile. */
  .tc-szene--buehne .tc-szene__fuss > .tc-szene__knoepfe { display: contents; }
  .tc-szene--buehne .tc-szene__fuss .tc-szene__hinweis { order: 1; flex-basis: 100%; }
  .tc-szene--buehne .tc-szene__fuss .tc-szene__zeile { order: -2; }
  /* Ein Bild, dessen Plätze mitten in dieser Spalte sitzen (das alte
     Höhlenbild der Fehde, `spalte: 'links'` in TC.Szene.SZENEN), bekommt die
     Spalte links neben den Plätzen. */
  .tc-szene--spalte-links .tc-szene__text { align-items: flex-start; }
  /* Die Spalte endet vor dem linken Stein: Breit (das Bild füllt die Breite)
     sitzt sein Rand bei 37,7 % der Breite, schmaler (das Bild füllt die Höhe
     und wird seitlich beschnitten) bei der halben Breite minus 119 px. Abzüglich
     Rand und Luft (gemessen 07.10.2026, 700–1550 px, Bühne 540 px hoch). */
  .tc-szene--spalte-links .tc-szene__text > * { inline-size: min(100%, 640px, 37.7cqi - 40px, 50cqi - 155px); }
  .tc-szene--spalte-links .tc-szene__titel { font-size: var(--tc-text-2xl); }
  /* Klamm lässt los (#1060): Der Text steht links neben dem Foto (rechts,
     höchstens 32 % der Breite plus Rand) statt mittig darunter. Die Regel
     steht HIER, nach der Spalte des Stadtschreiers: Bei gleichem Gewicht
     gewinnt die spätere, und weiter oben lag die Überschrift auf dem Foto. */
  .tc-szene--beglichen .tc-szene__text { align-items: flex-start; }
  .tc-szene--beglichen .tc-szene__text > * { inline-size: min(100%, 640px, 58cqi); }
}

/* Mit eigenem Inhalt (#1027) ist der Text am Schreibtisch höher und reicht
   weiter ins Bild — bei den Rundenzielen bis auf die hellen Kreidestriche.
   Der Verlauf wird dort früher dunkel: Gerechnet gegen den hellsten Strich
   (#e6e6e6) braucht Fließtext (--tc-text-default) 75 % Deckung für 4,5 : 1,
   die Überschrift 56 % für 3 : 1 (§9: gegen den tatsächlichen Grund). */
@container tc-szene (min-width: 601px) {
  .tc-szene--buehne.tc-szene--mit-inhalt .tc-szene__text {
    padding-top: var(--tc-space-7);
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--tc-stein-ritze) 40%, transparent) 10%,
      color-mix(in srgb, var(--tc-stein-ritze) 66%, transparent) 20%,
      color-mix(in srgb, var(--tc-stein-ritze) 82%, transparent) 38%,
      color-mix(in srgb, var(--tc-stein-ritze) 92%, transparent) 100%);
  }
}

/* Ohne festen Kasten (Kopf des Pranger-Raums im Untergrund) wäre die Szene
   zwischen 601 und 900 px so flach, dass der Text auf dem Bild die Bretter
   berührt (gemessen 07.10.2026 bei 700 px). Dort zeigt sie das ganze Bild. */
@container tc-szene (min-width: 601px) and (max-width: 900px) {
  .tc-szene--buehne:not(.tc-szene--fuellend) .tc-szene__buehne { --_hoehe: 0.56; }
}

/* Telefon: Bild oben, unten Auslauf ins Dunkle, der Text beginnt darauf. */
@container tc-szene (max-width: 600px) {
  .tc-szene--buehne .tc-szene__still,
  .tc-szene--buehne .tc-szene__video {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }
  /* Der Kasten selbst ist sonst schwarz hinterlegt: Das Bild liefe dann in
     Schwarz aus und darunter begänne der hellere Grund — eine Kante. */
  .tc-szene--buehne .tc-szene__buehne { background: transparent; }
  .tc-szene--buehne .tc-szene__text {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--tc-space-7));
    padding: 0 var(--tc-space-4) var(--tc-space-4);
    pointer-events: none;
  }
  .tc-szene--buehne .tc-szene__text > * { pointer-events: auto; }
  .tc-szene--buehne .tc-szene__nav { justify-content: center; }
  /* Im Kasten fester Höhe (Dashboard): die Blätterzeile ganz unten. */
  .tc-szene--buehne.tc-szene--fuellend .tc-szene__fuss { flex: 1 1 auto; }
  .tc-szene--buehne.tc-szene--fuellend .tc-szene__nav { margin-top: auto; }
}

/* ---- Der Steckbrief am Gesicht ----------------------------------------------
   Ein Zettel aus Klamms Papier (K2): wer, wem, was, seit wann, was gelobt ist,
   dazu die Wurfknöpfe. Erscheint beim Darüberfahren, ein Klick oder Tippen
   heftet ihn an. Gesetzt von TC.Szene.binden() unter das Loch (oder darüber,
   wenn unten kein Platz ist). */
.tc-szene__steckbrief {
  position: absolute;
  z-index: 5;
  inline-size: min(19rem, calc(100% - 16px));
  display: grid;
  gap: var(--tc-space-1);
  padding: var(--tc-space-3) var(--tc-space-3) var(--tc-space-3) var(--tc-space-4);
  background: var(--tc-papier);
  border: 1px solid var(--tc-papier-rand);
  border-radius: 2px;
  color: var(--tc-tinte);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: 1.4;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--tc-stein-ritze) 70%, transparent);
}
/* ⚠️ `hidden` verliert gegen das `display: grid` darüber (§9). Ohne diese
   Zeile ging der Steckbrief nach dem Darüberfahren nie wieder weg (Tim,
   06.10.2026) — TC.Szene schließt ihn per `hidden`. */
.tc-szene__steckbrief[hidden] { display: none; }
/* Der Nagel, wie am Schandbrief-Zettel. */
.tc-szene__steckbrief::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  inline-size: 7px;
  block-size: 7px;
  margin-left: -3px;
  border-radius: var(--tc-radius-full);
  background: var(--tc-stempel-weg);
}
.tc-szene__sb-titel {
  margin: 4px 0 0;
  font-family: var(--tc-font-display);
  font-weight: 700;
  font-size: var(--tc-text-base);
  color: var(--tc-tinte);
}
.tc-szene__sb-zeilen { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.tc-szene__sb-zeilen li + li { color: var(--tc-tinte-leise); }
.tc-szene__sb-knoepfe { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); margin-top: var(--tc-space-2); }
.tc-szene__sb-knoepfe .tc-button { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.tc-szene__sb-sub { font-size: 0.8em; font-weight: 400; opacity: 0.85; }
/* Gesperrt (Ei verbraucht, Tomate heute schon): als Vermerk in Tinte lesbar,
   nicht als blasser Knopf — auf Papier verschwand das Grau. */
.tc-szene__sb-knoepfe .tc-button:disabled {
  opacity: 1;
  background: transparent;
  border: 1px dashed var(--tc-papier-rand);
  color: var(--tc-tinte-leise);
  box-shadow: none;
  cursor: default;
}

/* ---- Die Bühne dreht sich -------------------------------------------------- */
/* Wie eine Tafel, die gewendet wird: um die waagerechte Achse, weil die Bühne
   breit und flach ist (um die senkrechte ragte sie am Schreibtisch einen halben
   Meter aus dem Bildschirm). Beide Seiten liegen in derselben Rasterzelle; die
   Karte ist so hoch wie die höhere. Die verdeckte Seite setzt TC.Szene.wende()
   auf `inert`, damit Tab und Vorleser sie nicht finden. */

.tc-szene-wende {
  perspective: 1600px;
}
.tc-szene-wende__karte {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.45, .05, .25, 1);
}
.tc-szene-wende__seite {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tc-szene-wende__seite > .tc-szene { flex: 1 1 auto; }
.tc-szene-wende__seite { position: relative; }

/* Blättern zwischen den Seiten (Tim, 06.10.2026: „mit Chevrons zwischen den
   Ansichten umschalten"). Seit 07.10.2026 liegen die Pfeile nicht mehr links
   und rechts über dem Bild, sondern in der Blätterzeile der Szene
   (`.tc-szene__nav`), genau wie beim Stadtschreier: dieselben runden Knöpfe
   an derselben Stelle, auf jeder Seite der Bühne. Trefferfläche
   --tc-touch-min. */
.tc-szene-wende__pfeil {
  inline-size: var(--tc-touch-min);
  block-size: var(--tc-touch-min);
  display: inline-grid;
  place-items: center;
  padding: 0;
  margin: 0;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--tc-text-strong) 14%, transparent);
  border-radius: var(--tc-radius-full);
  background: color-mix(in srgb, var(--tc-stein-ritze) 35%, transparent);
  color: var(--tc-text-muted);
  font-family: var(--tc-font-body);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.tc-szene-wende__pfeil:hover,
.tc-szene-wende__pfeil:focus-visible {
  color: var(--tc-highlight);
  border-color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-stein-ritze) 55%, transparent);
  outline: none;
}
.tc-szene-wende__seite--hinten { transform: rotateX(180deg); }
.tc-szene-wende__karte.is-gewendet { transform: rotateX(-180deg); }

/* ⚠️ DIE ABGEWANDTE SEITE WIRD UNSICHTBAR, NICHT NUR RUECKSEITIG (06.10.2026,
   Tims Screenshots vom iPhone): Nach der Wende lag der ganze Kopf — Ausrufer,
   Saison, „Timmay Realm-Herrscher" — kopfstehend ueber der Szene. iOS Safari
   wendet `backface-visibility: hidden` nicht auf Nachfahren an, die eine
   eigene Ebene bekommen (die Pfeile mit `translate`, Pillen, Videos,
   Animationen); sie scheinen durch. Deshalb schaltet die abgewandte Seite auf
   `visibility: hidden` — genau dann, wenn die Karte hochkant steht: Bei der
   Kurve oben ist der Winkel nach 342 von 900 ms bei 90 Grad. Beide Richtungen
   schalten dort um (die eine verschwindet, die andere erscheint), die Hoehe
   der Karte bleibt, denn `visibility` behaelt den Platz. */
.tc-szene-wende__seite {
  transition: visibility 0s linear 340ms;
}
.tc-szene-wende__karte:not(.is-gewendet) > .tc-szene-wende__seite--hinten,
.tc-szene-wende__karte.is-gewendet > .tc-szene-wende__seite--vorn {
  visibility: hidden;
}

/* Reduzierte Bewegung: nicht drehen, überblenden. Überblenden ist keine
   Bewegung im Sinne der Einstellung (nichts wandert, nichts dreht) — #897 will
   es ausdrücklich so. Der globale Rückfall in tokens.css setzt jede Übergangs-
   dauer auf 0,01 ms; hier steht deshalb bewusst ein !important dagegen, sonst
   wäre es ein harter Schnitt. */
@media (prefers-reduced-motion: reduce) {
  .tc-szene-wende__karte,
  .tc-szene-wende__karte.is-gewendet { transform: none; }
  .tc-szene-wende__seite--hinten { transform: none; }
  /* Sichtbar wird sofort, unsichtbar erst nach dem Ausblenden — sonst risse
     `visibility` das Ueberblenden mittendrin ab (die Regel oben schaltet bei
     340 ms, hier gilt die Dauer der Blende). */
  .tc-szene-wende__seite {
    transition: opacity 450ms ease, visibility 0s linear 0s !important;
  }
  .tc-szene-wende__karte:not(.is-gewendet) > .tc-szene-wende__seite--hinten,
  .tc-szene-wende__karte.is-gewendet > .tc-szene-wende__seite--vorn {
    opacity: 0;
    transition: opacity 450ms ease, visibility 0s linear 450ms !important;
  }
}


/* ---- Der Schwenk (#990, 08.10.2026) ---------------------------------------- */
/* Tim: „Es hat dann was von: Ich stehe irgendwo und drehe mich auf der Stelle,
   um was anderes zu sehen." Die Plätze der Bühne liegen nebeneinander wie ein
   Rundblick; der Blick wandert immer nach links weiter, nach dem letzten
   Platz kommt wieder der erste (kein Rücksprung). Dieselbe Karte, dieselben
   zwei Seiten wie die Wende — nur gleiten sie, statt sich zu drehen
   (.tc-schwenk-raus / -rein aus dem Baukasten, tokens.css E3). TC.Szene.wende()
   setzt die Klassen; die Karte schneidet ab. Die Wende oben bleibt als
   Baustein stehen; das Dashboard schwenkt seit #990 (08.10.2026). */
.tc-szene-wende--schwenk { perspective: none; }
.tc-szene-wende--schwenk > .tc-szene-wende__karte,
.tc-szene-wende--schwenk > .tc-szene-wende__karte.is-gewendet {
  transform: none;
  transform-style: flat;
  transition: none;
  overflow: clip;
}
.tc-szene-wende--schwenk > .tc-szene-wende__karte > .tc-szene-wende__seite {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transition: none;
}
.tc-szene-wende--schwenk > .tc-szene-wende__karte > .tc-szene-wende__seite--hinten { transform: none; }
/* Die gehende Seite bleibt sichtbar, bis sie draußen ist. */
.tc-szene-wende--schwenk > .tc-szene-wende__karte > .tc-szene-wende__seite.tc-schwenk-raus { visibility: visible; }

/* Ein Satz auf derselben Seite (der Stadtschreier ruft weiter): Nur der Text
   wandert, kürzer, das Bild steht. TC.Szene.schwenk() legt eine Kopie des
   alten Inhalts darüber (.tc-szene-geist) und lässt beide laufen. */
.tc-szene-schwenkt { position: relative; overflow: clip; }
.tc-szene-schwenkt > .tc-schwenk-raus,
.tc-szene-schwenkt > .tc-schwenk-rein {
  --schwenk-weg: 40%;
  animation-name: tc-schwenk-raus, tc-satz-aus;
  animation-duration: calc(var(--tc-duration-schwenk) * 0.7);
}
.tc-szene-schwenkt > .tc-schwenk-rein { animation-name: tc-schwenk-rein, tc-satz-ein; }
@keyframes tc-satz-aus { to { opacity: 0; } }
@keyframes tc-satz-ein { from { opacity: 0; } }
.tc-szene-geist { position: absolute; pointer-events: none; margin: 0; }

/* Die Leiste unter der Karte: ‹ Balken ›. Sie schwenkt nicht mit — wer sich
   dreht, behält, wo er steht. Ersetzt Punkte, Zähler und den 🪧-Knopf. */
.tc-szene-wende__leiste {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-1) var(--tc-space-3);
  max-inline-size: 640px;
  margin-inline: auto;
  inline-size: 100%;
  box-sizing: border-box;
}

/* ---- Der Balken (#990) ----------------------------------------------------- */
/* Ein Teil je Platz auf der Bühne (Meldungen und Szenen). Das gezeigte läuft
   in seiner Lesezeit voll (--dauer, setzt TC.Szene.balken), gezeigte stehen
   voll, kommende leer. Tippen springt hin. Bei vielen Plätzen werden die
   Teile schmaler; die Trefferfläche bleibt --tc-touch-min hoch. */
.tc-szene-balken {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--tc-space-1);
  margin: 0;
  padding: 0;
}
.tc-szene-balken__teil {
  flex: 1 1 0;
  min-inline-size: 0;
  block-size: var(--tc-touch-min);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--tc-font-body);
  cursor: pointer;
}
/* Die Spur: 4 px, beim Zeigen 6 px. */
.tc-szene-balken__spur {
  position: relative;
  flex: 1 1 auto;
  block-size: 4px;
  border-radius: var(--tc-radius-full);
  overflow: hidden;
  background: color-mix(in srgb, var(--tc-text-strong) 22%, transparent);
  box-shadow: 0 1px 4px var(--tc-stein-ritze);
  transition: block-size var(--tc-duration-fast) ease;
}
.tc-szene-balken__teil:hover .tc-szene-balken__spur,
.tc-szene-balken__teil:focus-visible .tc-szene-balken__spur { block-size: 6px; }
.tc-szene-balken__teil:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: 2px; border-radius: var(--tc-radius-sm); }
.tc-szene-balken__fuellung {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--tc-highlight);
}
/* Szenen (Pranger, Fehde, Vermessung) in der Farbe des Themas: Man sieht vorab,
   wo die Bühne den Ort wechselt. */
.tc-szene-balken__teil.ist-szene .tc-szene-balken__fuellung { background: var(--tc-accent); }
.tc-szene-balken__teil.ist-fertig .tc-szene-balken__fuellung { transform: scaleX(1); opacity: 0.55; }
.tc-szene-balken__teil.ist-aktiv .tc-szene-balken__fuellung {
  animation: tc-segment var(--dauer, 9000ms) linear both;
}
/* Wer liest, zeigt oder getippt hat, hält die Zeit an — sichtbar. */
.tc-szene-balken.ist-pausiert .tc-szene-balken__teil.ist-aktiv .tc-szene-balken__fuellung { animation-play-state: paused; }
/* Selbst geblättert: Es läuft nichts mehr von allein, das Teil steht voll. */
.tc-szene-balken.ist-steht .tc-szene-balken__teil.ist-aktiv .tc-szene-balken__fuellung { animation: none; transform: scaleX(1); }

/* Reduzierte Bewegung: Der Balken läuft nicht, er zeigt den Stand — das
   gezeigte Teil voll und hell, gezeigte gedämpft, kommende leer. */
@media (prefers-reduced-motion: reduce) {
  .tc-szene-balken__teil.ist-aktiv .tc-szene-balken__fuellung { animation: none; transform: scaleX(1); }
  .tc-szene-schwenkt > .tc-schwenk-raus { display: none; }
}