/* ============================================================================
 * fuehrung.css — tc-fuehrung: die Stadtführung (#978, 07.10.2026)
 * ----------------------------------------------------------------------------
 * Renderer: js/ui/fuehrung.js (TC.Fuehrung) · Library: library-feedback.html
 * #fuehrung · Gehört zu #971 („entdecken statt nachlesen").
 *
 * Drei Bausteine, eine Haltung: Die Führung ist Teil der Welt (ein Wirt
 * spricht, ein Element leuchtet, ein Knopf tut die echte Handlung) und
 * verdeckt nie, was man gerade tun will — kein abgedunkelter Vollbild-
 * Spotlight, kein Fenster, das die Seite sperrt.
 *
 *   .tc-fuehrung.tc-fuehrung--wirt      Wirt-Begrüßung: Porträt, bis zu drei
 *                                       Sätze, EIN Hauptknopf, „Später",
 *                                       „Kenn ich". Handy: Blatt von unten.
 *                                       Ab 768 px: Karte unten rechts am Rand.
 *   .tc-fuehrung.tc-fuehrung--schritte  dieselbe Hülle mit „1 von 3", Zurück,
 *                                       Weiter / Fertig
 *   .tc-fuehrung-punkt                  der ruhige Punkt am Element; die
 *                                       Sprechblase daneben ist TC.Sprechblase
 *
 * ⚠️ DAS BLATT ACHTET AUF DEN UNTEREN RAND: `env(safe-area-inset-bottom)`
 * und `--tc-tableiste-hoehe` (die Tableiste aus #940; solange es sie nicht
 * gibt, ist die Variable 0). Sonst läge der Hauptknopf unter dem Home-Balken.
 *
 * ⚠️ REDUCED MOTION: Der Punkt pulsiert nicht, das Blatt fährt nicht ein
 * (Dauer 0.01ms, nicht `animation: none` — §9).
 * ========================================================================== */

.tc-fuehrung {
  position: fixed;
  /* Eine Stufe UNTER der Tableiste (beide stehen am unteren Rand, die Leiste
     auf --tc-z-fixed). Mit derselben Stufe malte das später eingehängte
     Blatt über die Leiste: Unter den Knöpfen stand ein leeres Band, wo die
     Tableiste sein sollte (#976, am Handy gemessen). Der Platz dafür ist im
     padding unten schon freigehalten. */
  z-index: calc(var(--tc-z-fixed) - 1);
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tc-space-2) var(--tc-space-3);
  align-items: start;
  padding: var(--tc-space-4) var(--tc-space-4)
           calc(var(--tc-space-4) + env(safe-area-inset-bottom, 0px) + var(--tc-tableiste-hoehe, 0px));
  background: var(--tc-bg-surface-2);
  border-top: 1px solid var(--tc-deco-ornament-border);
  border-radius: var(--tc-radius-lg) var(--tc-radius-lg) 0 0;
  box-shadow: var(--tc-shadow-xl);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  animation: tc-fuehrung-blatt var(--tc-duration-slow) var(--tc-ease-default) both;
}

/* Am Schreibtisch: eine Karte am Rand des Raums, nicht über der Seite. */
@media (min-width: 768px) {
  .tc-fuehrung {
    left: auto;
    right: var(--tc-space-5);
    bottom: calc(var(--tc-space-5) + var(--tc-tableiste-hoehe, 0px));
    width: 380px;
    padding: var(--tc-space-4);
    border: 1px solid var(--tc-deco-ornament-border);
    border-radius: var(--tc-radius-lg);
    animation-name: tc-fuehrung-karte;
  }
}

.tc-fuehrung__gesicht {
  grid-row: span 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--tc-accent);
  object-fit: cover;
  background: var(--tc-bg-surface-1);
}

/* DAS GEMÄLDE DES WIRTS (#1114). Ein Band über der Karte, bündig mit ihrem
   Rand. Ob es steht, entscheidet fuehrung.js (ab 768 px und bei einer
   Überreichung); dann weicht das runde Gesicht, und die Karte ist einspaltig. */
.tc-fuehrung--gemalt { grid-template-columns: minmax(0, 1fr); }
.tc-fuehrung--gemalt .tc-fuehrung__gesicht { display: none; }
.tc-fuehrung__gemalt {
  margin: calc(-1 * var(--tc-space-4)) calc(-1 * var(--tc-space-4)) var(--tc-space-1);
  aspect-ratio: 2 / 1;
  max-height: 24vh;
  overflow: hidden;
  border-radius: var(--tc-radius-lg) var(--tc-radius-lg) 0 0;
  background: var(--tc-bg-surface-1);
}
.tc-fuehrung__gemalt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.tc-fuehrung__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2);
  min-width: 0;
}
.tc-fuehrung__wer {
  margin: 0;
  font-family: var(--tc-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tc-highlight);
}
.tc-fuehrung__zaehler {
  margin-left: auto;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tc-fuehrung__zu {
  appearance: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tc-text-muted);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}
.tc-fuehrung__zaehler ~ .tc-fuehrung__zu { margin-left: 0; }
/* „Anhören" (#984): steht neben dem Namen und macht die Zeile nicht höher —
   wie das Kreuz. Leer nimmt der Platz keinen Raum. */
.tc-fuehrung__stimme { display: inline-flex; margin: -12px 0; }
.tc-fuehrung__stimme:empty { display: none; }
.tc-fuehrung__zu:hover,
.tc-fuehrung__zu:focus-visible { color: var(--tc-highlight); outline: none; }

.tc-fuehrung__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-1);
}
.tc-fuehrung__titel {
  margin: 0;
  font-weight: 700;
  color: var(--tc-text-strong);
}
.tc-fuehrung__satz {
  margin: 0;
  font-size: var(--tc-text-sm);
  line-height: 1.5;
}

/* Die Knöpfe stehen unter dem Text über die volle Breite: Der Hauptknopf
   zuerst (Daumen), „Später" und „Kenn ich" leise daneben. Alle ≥ 44 px. */
.tc-fuehrung__knoepfe {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-2);
}
.tc-fuehrung__knoepfe .tc-button { min-height: 44px; }
.tc-fuehrung__knoepfe .tc-button--primary { flex: 1 1 100%; }
.tc-fuehrung__knoepfe .tc-button--ghost { flex: 1 1 0; }
@media (min-width: 768px) {
  .tc-fuehrung__knoepfe .tc-button--primary { flex: 1 1 auto; }
}

/* Die Schritt-Punkte unter dem Text: wo man in der kurzen Führung steht. */
.tc-fuehrung__spur {
  display: flex;
  gap: 6px;
  margin-top: var(--tc-space-1);
}
.tc-fuehrung__spur span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-border-default);
}
.tc-fuehrung__spur span.is-hier { background: var(--tc-highlight); }

/* In der Library steht der Baustein im Fluss, nicht am Bildrand. */
.tc-fuehrung--vorschau {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: 420px;
  z-index: auto;
  padding: var(--tc-space-4);
  border: 1px solid var(--tc-deco-ornament-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-md);
  animation: none;
}

@keyframes tc-fuehrung-blatt {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes tc-fuehrung-karte {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Der Punkt am Element ------------------------------------------------ */

/* Die Trefferfläche ist 44 px, sichtbar sind 14: Ein Punkt, den man nicht
   trifft, ist am Handy keine Hilfe (Heuristik 5). */
.tc-fuehrung-punkt {
  position: absolute;
  z-index: var(--tc-z-dropdown);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* Am festen Element (Tableiste, Kopfleiste): steht mit ihm am Bildschirm
   und liegt darüber (#976). */
.tc-fuehrung-punkt--fest {
  position: fixed;
  z-index: calc(var(--tc-z-fixed) + 1);
}
.tc-fuehrung-punkt::before,
.tc-fuehrung-punkt::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--tc-highlight);
}
.tc-fuehrung-punkt::before {
  box-shadow: 0 0 0 2px var(--tc-bg-surface-1);
}
/* Der Ring atmet langsam: Aufmerksamkeit ohne Alarm. */
.tc-fuehrung-punkt::after {
  background: transparent;
  border: 2px solid var(--tc-highlight);
  animation: tc-fuehrung-atem 2.4s var(--tc-ease-default) infinite;
}
.tc-fuehrung-punkt:focus-visible { outline: 2px solid var(--tc-highlight); outline-offset: -6px; border-radius: 50%; }

@keyframes tc-fuehrung-atem {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-fuehrung { animation-duration: 0.01ms; }
  .tc-fuehrung-punkt::after { animation-duration: 0.01ms; animation-iteration-count: 1; opacity: 0; }
}