/* ============================================================================
 * erzaehlung.css — tc-erzaehlung: die Erklär-Szene (#985, 11.10.2026)
 * ----------------------------------------------------------------------------
 * Renderer: js/ui/erzaehlung.js (TC.Erzaehlung) · Szenen: js/data/
 * erzaehlungen.js · Library: library-feedback.html#erzaehlung · Gehört zu #971.
 *
 * Ein Wirt erzählt in drei bis fünf Bildern, wie etwas funktioniert:
 *
 *   .tc-erzaehlung              die Bildfolge (im Fenster oder im Fluss)
 *     __bild                    die Infografik (SVG 320 × 210), Tipp/Wisch
 *     __spur                    wo man steht (Striche, nicht bedienbar)
 *     __sprecher                Porträt, Name, „2 von 4", der Gedanke
 *     __fuss                    Zurück · Weiter (im letzten Bild die Handlung)
 *
 *   In der Zeichnung (.tc-erz-grafik):
 *     .tc-erz-ort               ein Platz: Platte, Piktogramm, Name, Wert
 *     .tc-erz-ort--betont       der Platz, um den es im Bild geht
 *     .tc-erz-weg / --leise     ein Weg zwischen Plätzen („vielleicht")
 *     .tc-erz-marke             das Wort am Weg („+20", „Einsatz")
 *     .tc-erz-muenze            eine Münze unterwegs (bewegt per JS)
 *
 * FARBEN: Münzen und Betontes in --tc-highlight (das Gold des Themes),
 * Striche in --tc-text-default, Leises in --tc-text-muted. Die Glut der
 * Schmelze nimmt die Fackel-Tokens (Material, von keinem Theme überschrieben).
 *
 * ⚠️ REDUCED MOTION: Die Münzen bewegt das Skript nur, wenn Bewegung erlaubt
 * ist; ohne sie bleiben sie unsichtbar (opacity 0 ist ihr Ruhezustand).
 * Plätze, Pfeile und Marken stehen dann sofort da (tc-auftritt und
 * tc-schwenk-rein regelt der Baukasten in tokens.css).
 * ========================================================================== */

.tc-erzaehlung {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  outline: none;
}

/* ---- Das Bild -------------------------------------------------------------- */

.tc-erzaehlung__bild {
  position: relative;
  overflow: clip;
  aspect-ratio: 320 / 210;
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg);
  background:
    radial-gradient(ellipse at 50% 40%, var(--tc-bg-surface-3), transparent 70%),
    var(--tc-bg-surface-1);
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.tc-erzaehlung__bild.ist-letztes { cursor: default; }

.tc-erz-grafik {
  display: block;
  width: 100%;
  height: 100%;
}

.tc-erz-ort__platte {
  fill: var(--tc-bg-surface-2);
  stroke: var(--tc-border-default);
  stroke-width: 1.5;
}
.tc-erz-ort--betont .tc-erz-ort__platte {
  stroke: var(--tc-highlight);
  stroke-width: 2;
}
.tc-erz-ort__zeichen {
  fill: none;
  stroke: var(--tc-text-default);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tc-erz-ort__zeichen .voll { fill: var(--tc-text-default); stroke: none; }
.tc-erz-ort--betont .tc-erz-ort__zeichen { stroke: var(--tc-highlight); }
.tc-erz-ort--betont .tc-erz-ort__zeichen .voll { fill: var(--tc-highlight); }

.tc-erz-ort__name,
.tc-erz-ort__wert,
.tc-erz-marke {
  font-family: var(--tc-font-body);
  text-anchor: middle;
  /* Ein Hof in der Farbe des Grunds: Die Schrift bleibt lesbar, wo ein Weg
     darunter durchläuft. */
  paint-order: stroke;
  stroke: var(--tc-bg-surface-1);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.tc-erz-ort__name {
  font-size: 12px;
  font-weight: 700;
  fill: var(--tc-text-strong);
}
.tc-erz-ort__wert {
  font-size: 10.5px;
  fill: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}
.tc-erz-marke {
  font-size: 11px;
  font-weight: 700;
  fill: var(--tc-highlight);
  font-variant-numeric: tabular-nums;
}

.tc-erz-marke--daneben { text-anchor: start; }

.tc-erz-weg {
  fill: none;
  stroke: var(--tc-text-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.tc-erz-weg--leise { stroke-dasharray: 3 5; }
.tc-erz-spitze { fill: var(--tc-text-muted); }

.tc-erz-muenze {
  fill: var(--tc-highlight);
  stroke: var(--tc-bg-surface-1);
  stroke-width: 1;
  opacity: 0;
}

.tc-erz-glut { fill: var(--tc-fackel-glut); }

/* ---- Wo man steht ---------------------------------------------------------- */

.tc-erzaehlung__spur {
  display: flex;
  gap: 6px;
}
.tc-erzaehlung__spur span {
  flex: 1 1 0;
  height: 3px;
  border-radius: 2px;
  background: var(--tc-border-default);
  transition: background var(--tc-motion-normal);
}
.tc-erzaehlung__spur span.is-vorbei { background: var(--tc-text-muted); }
.tc-erzaehlung__spur span.is-hier { background: var(--tc-highlight); }

/* ---- Wer erzählt ----------------------------------------------------------- */

/* Im Fenster am Schreibtisch steht das Gemälde des Wirts neben der Szene
   (#1114, tc-bildfenster in modal.css; erzaehlung.js baut es ab 901 px).
   Dann weicht das runde Gesicht neben dem Satz. */
.tc-erzaehlung-fenster.tc-bildfenster { align-items: start; }
.tc-erzaehlung__gemalt { border: 1px solid var(--tc-border-default); }
.tc-erzaehlung-fenster.tc-bildfenster .tc-erzaehlung__sprecher { grid-template-columns: minmax(0, 1fr); }
.tc-erzaehlung-fenster.tc-bildfenster .tc-erzaehlung__gesicht { display: none; }

.tc-erzaehlung__sprecher {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tc-space-3);
  align-items: start;
}
.tc-erzaehlung__gesicht {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--tc-accent);
  object-fit: cover;
  background: var(--tc-bg-surface-1);
}
.tc-erzaehlung__rede { min-width: 0; }
.tc-erzaehlung__wer {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2);
  margin: 0 0 var(--tc-space-1);
  font-family: var(--tc-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tc-highlight);
}
/* „Anhören" (#984): neben dem Namen, ohne die Zeile höher zu machen. */
.tc-erzaehlung__stimme { display: inline-flex; margin: -12px 0; }
.tc-erzaehlung__stimme:empty { display: none; }
.tc-erzaehlung__zaehler {
  margin-left: auto;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs);
  font-weight: 400;
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Alle Gedanken in einer Zelle: so hoch wie der längste, sichtbar nur einer. */
.tc-erzaehlung__gedanken { display: grid; }
.tc-erzaehlung__gedanke {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
}
.tc-erzaehlung__gedanke.is-hier {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--tc-motion-slow);
}
.tc-erzaehlung__kopf {
  margin: 0;
  font-weight: 700;
  color: var(--tc-text-strong);
}
.tc-erzaehlung__satz {
  margin: var(--tc-space-1) 0 0;
  font-size: var(--tc-text-sm);
  line-height: 1.5;
}

/* Für Vorleser: der aktuelle Gedanke als eine Ansage, unsichtbar. */
.tc-erzaehlung__ansage {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.tc-erzaehlung__fuss {
  display: flex;
  gap: var(--tc-space-2);
}
.tc-erzaehlung__fuss .tc-button { min-height: 44px; }
.tc-erzaehlung__fuss .tc-button--primary { flex: 1 1 auto; }
.tc-erzaehlung__fuss .tc-button--ghost { flex: 0 0 auto; }
.tc-erzaehlung__fuss .tc-button[disabled] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tc-erzaehlung__spur span,
  .tc-erzaehlung__gedanke.is-hier { transition-duration: 0.01ms; }
}