/* ==========================================================================
   Taktgeber - Setup-Wizard (WP3)
   Setzt /shared/tokens.css und /shared/base.css voraus.
   Regeln: keine harten Farb- oder Abstandswerte, alles ueber var(--tg-*).
   Alle Dauern kommen aus den Bewegungs-Tokens - `prefers-reduced-motion`
   schaltet sie damit an EINER Stelle ab (tokens.css).
   ========================================================================== */

/* ------------------------------------------------------- `hidden` gewinnt
   Bausteine aus base.css setzen `display` (z. B. `.tg-btn { display: inline-flex }`)
   und ueberschreiben damit die Browserregel `[hidden] { display: none }` -
   ein per JS verstecktes Element bliebe sichtbar. Genau das ist hier passiert:
   der Absenden-Knopf stand ab Schritt 1 neben "Weiter". Diese Regel zieht die
   Browserregel wieder nach vorne; `!important` ist noetig, weil jede
   Komponentenregel sonst spezifischer ist. */
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ Kopf */
.wz-header {
  position: sticky;
  top: 0;
  z-index: var(--tg-z-sticky);
  border-bottom: 1px solid var(--tg-line-soft);
  background: var(--tg-scrim);
  backdrop-filter: blur(14px);
}

.wz-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-3);
  min-height: var(--tg-header-h);
  padding-block: var(--tg-space-2);
}

.wz-header__inner > * {
  min-width: 0;
}

.wz-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-space-2);
  color: var(--tg-text);
  text-decoration: none;
  flex: none;
}

.wz-brand__name {
  font-weight: var(--tg-fw-bold);
  letter-spacing: var(--tg-tracking-tight);
}

.wz-mark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 1.25rem;
}

.wz-mark__bar {
  width: 3px;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-grad-brand);
  animation: wz-eq var(--tg-dur-slower) var(--tg-ease-in-out) infinite alternate;
}

.wz-mark__bar:nth-child(1) { height: 40%; animation-delay: 0ms; }
.wz-mark__bar:nth-child(2) { height: 100%; animation-delay: 120ms; }
.wz-mark__bar:nth-child(3) { height: 60%; animation-delay: 240ms; }
.wz-mark__bar:nth-child(4) { height: 85%; animation-delay: 360ms; }

@keyframes wz-eq {
  from { transform: scaleY(0.5); }
  to { transform: scaleY(1); }
}

.wz-header__title {
  flex: 1 1 8rem;
  min-width: 0;
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Speicherzustand am Badge - eine Klasse je Zustand. */
#zustand[data-state='laedt'] {
  background: var(--tg-info-soft);
  color: var(--tg-info);
}
#zustand[data-state='gespeichert'] {
  background: var(--tg-ok-soft);
  color: var(--tg-ok);
}
#zustand[data-state='fehler'] {
  background: var(--tg-danger-soft);
  color: var(--tg-danger);
}

/* --------------------------------------------------------------- Grundriss */
.wz-main {
  padding-block: var(--tg-space-6) var(--tg-space-9);
}

.wz-footer {
  padding-block: var(--tg-space-5) var(--tg-space-8);
}

/* ----------------------------------------------------------- Fortschritt */
.wz-progress {
  margin-bottom: var(--tg-space-5);
  overflow-x: auto;
  scrollbar-width: thin;
}

.wz-progress__list {
  display: flex;
  gap: var(--tg-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wz-progress__item {
  display: flex;
  align-items: center;
  gap: var(--tg-space-2);
  /* NICHT schrumpfen lassen: sonst bleibt auf dem Handy von "Drehbuch" ein
     "D" uebrig. Die Leiste scrollt stattdessen waagerecht. */
  flex: none;
  padding: var(--tg-space-1) var(--tg-space-3);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-pill);
  background: var(--tg-bg-sunken);
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
  white-space: nowrap;
  transition:
    border-color var(--tg-dur-base) var(--tg-ease-out),
    color var(--tg-dur-base) var(--tg-ease-out),
    background-color var(--tg-dur-base) var(--tg-ease-out);
}

.wz-progress__item[data-done='true'] {
  border-color: var(--tg-accent-line);
  color: var(--tg-accent-strong);
}

.wz-progress__item[aria-current='step'] {
  border-color: var(--tg-accent);
  background: var(--tg-accent-soft);
  color: var(--tg-text);
  font-weight: var(--tg-fw-medium);
}

.wz-progress__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-glass-strong);
  font-family: var(--tg-font-mono);
  flex: none;
}

/* --------------------------------------------------------------- Meldezeile */
/* Sichtbar fuer Zustaende ohne Feldbezug: kaputter Wiedereinstiegs-Link,
   fehlender Gastgeber-Zugriff. Ohne sie stuenden diese Zustaende nur in der
   geclippten Live-Region und im Fehlerkasten eines Schritts, den der Nutzer
   in dem Moment gar nicht sieht. */
.wz-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--tg-space-2);
  margin-bottom: var(--tg-space-5);
  padding: var(--tg-space-3) var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-md);
  background: var(--tg-bg-sunken);
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-sm);
  animation: tg-fade-in var(--tg-dur-base) var(--tg-ease-out) both;
}

.wz-banner[hidden] {
  display: none;
}

.wz-banner::before {
  content: 'ⓘ';
  flex: none;
}

.wz-banner[data-art='fehler'] {
  border-color: var(--tg-danger);
  background: var(--tg-danger-soft);
  color: var(--tg-danger);
}

.wz-banner[data-art='fehler']::before {
  content: '⚠';
}

.wz-banner[data-art='hinweis'] {
  border-color: var(--tg-warn);
  background: var(--tg-warn-soft);
  color: var(--tg-warn);
}

/* ------------------------------------------------------------------ Schritt */
.wz-step {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-5);
  padding: var(--tg-space-6);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-lg);
  background: var(--tg-grad-night);
  box-shadow: var(--tg-shadow-2), var(--tg-shadow-inset);
}

.wz-step > * {
  min-width: 0;
}

.wz-step[hidden] {
  display: none;
}

/* Schrittwechsel. Richtung setzt wizard.js ueber data-direction am <form>. */
.wz-step--eintritt {
  animation: wz-in var(--tg-dur-base) var(--tg-ease-out) both;
}

.wz-step--eintritt-rueckwaerts {
  animation: wz-in-back var(--tg-dur-base) var(--tg-ease-out) both;
}

@keyframes wz-in {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: none; }
}

@keyframes wz-in-back {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to { opacity: 1; transform: none; }
}

.wz-step__title {
  margin: 0;
  font-size: var(--tg-fs-2xl);
}

.wz-step__lead {
  margin: 0;
  max-width: 46ch;
}

.wz-grid {
  display: grid;
  gap: var(--tg-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.wz-grid > * {
  min-width: 0;
}

.wz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tg-space-3);
}

.wz-row > * {
  min-width: 0;
  flex: 1 1 8rem;
}

.wz-row--tight > .tg-btn {
  flex: 0 0 auto;
}

.wz-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wz-textarea {
  min-height: 6rem;
  line-height: var(--tg-lh-snug);
  resize: vertical;
}

/* ------------------------------------------------------------ Auswahlkarten */
.wz-choices {
  display: grid;
  gap: var(--tg-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}

.wz-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tg-space-2);
  min-width: 0;
  min-height: var(--tg-tap-target);
  padding: var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-md);
  background: var(--tg-bg-sunken);
  color: var(--tg-text-muted);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--tg-dur-fast) var(--tg-ease-spring),
    border-color var(--tg-dur-fast) var(--tg-ease-out),
    background-color var(--tg-dur-fast) var(--tg-ease-out),
    color var(--tg-dur-fast) var(--tg-ease-out);
}

.wz-choice:hover {
  transform: translateY(-2px);
  border-color: var(--tg-accent-line);
  color: var(--tg-text);
}

.wz-choice[aria-pressed='true'] {
  border-color: var(--tg-accent);
  background: var(--tg-accent-soft);
  color: var(--tg-text);
  box-shadow: var(--tg-glow-accent);
}

.wz-choice__icon {
  font-size: var(--tg-fs-xl);
  line-height: 1;
}

.wz-choice__label {
  font-weight: var(--tg-fw-medium);
}

/* ------------------------------------------------------------------- Chips */
.wz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
}

.wz-chip {
  min-height: var(--tg-tap-target);
  padding: var(--tg-space-1) var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-pill);
  background: var(--tg-bg-sunken);
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-sm);
  cursor: pointer;
  transition:
    transform var(--tg-dur-fast) var(--tg-ease-spring),
    border-color var(--tg-dur-fast) var(--tg-ease-out),
    background-color var(--tg-dur-fast) var(--tg-ease-out),
    color var(--tg-dur-fast) var(--tg-ease-out);
}

.wz-chip:hover {
  color: var(--tg-text);
  border-color: var(--tg-accent-line);
}

.wz-chip:active {
  transform: scale(0.96);
}

.wz-chip[aria-pressed='true'] {
  border-color: transparent;
  background: var(--tg-accent);
  color: var(--tg-text-on-accent);
  box-shadow: var(--tg-shadow-1);
}

.wz-chip--eigen[aria-pressed='true'] {
  background: var(--tg-accent-2);
}

/* -------------------------------------------------------------- Deutung */
.wz-reading {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-3);
  padding: var(--tg-space-4);
  border: 1px dashed var(--tg-accent-line);
  border-radius: var(--tg-radius-md);
  background: var(--tg-accent-soft);
  animation: tg-fade-in var(--tg-dur-base) var(--tg-ease-out) both;
}

.wz-reading[hidden] {
  display: none;
}

.wz-reading__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tg-space-2);
  min-width: 0;
}

/* Vierter Zustand des Deutungskastens: laedt / fehler / nichts erkannt.
   Steht UNTER den bereits gedeuteten Zeilen, damit eine gueltige Deutung beim
   naechsten Tastendruck nicht verschwindet. */
.wz-reading__status {
  display: flex;
  align-items: center;
  gap: var(--tg-space-2);
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-xs);
}

.wz-reading__status::before {
  content: '…';
  flex: none;
}

.wz-reading__status[data-art='fehler'] {
  color: var(--tg-danger);
}

.wz-reading__status[data-art='fehler']::before {
  content: '⚠';
}

.wz-reading__status[data-art='leer']::before {
  content: 'ⓘ';
}

.wz-reading__caption {
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
  letter-spacing: var(--tg-tracking-wide);
  text-transform: uppercase;
  flex: 0 0 8rem;
}

/* ------------------------------------------------- Lesart und Rueckfrage

   "Atemlos, Macarena" und "Earth, Wind & Fire - September" sind fuer einen
   Parser nicht zu unterscheiden. Statt zu raten, zeigt der Wizard hier seine
   Lesart - und laesst sie mit einem Schalter umstellen. Der Kasten ist bewusst
   auffaelliger als die Deutung darunter: eine unbeantwortete Rueckfrage ist
   ein Muss-Song, der sonst lautlos ausfaellt. */
.wz-lesarten {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-3);
  min-width: 0;
}

.wz-lesarten[hidden] {
  display: none;
}

.wz-lesart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tg-space-3);
  min-width: 0;
  padding: var(--tg-space-4);
  border: 1px solid var(--tg-warn-soft);
  border-radius: var(--tg-radius-md);
  background: linear-gradient(180deg, var(--tg-warn-soft) 0%, transparent 140%),
    var(--tg-bg-raised);
  box-shadow: var(--tg-shadow-2);
  animation: tg-fade-in var(--tg-dur-base) var(--tg-ease-out) both;
}

/* Beantwortet: die Warnfarbe faellt weg, die Karte bleibt aber stehen -
   der Rueckweg ("doch nur ein Eintrag?") muss erreichbar bleiben. */
.wz-lesart[data-state='aufgeteilt'] {
  border-color: var(--tg-ok-soft);
  background: linear-gradient(180deg, var(--tg-ok-soft) 0%, transparent 140%),
    var(--tg-bg-raised);
}

.wz-lesart__frage {
  margin: 0;
  min-width: 0;
  color: var(--tg-text);
  font-size: var(--tg-fs-sm);
  line-height: var(--tg-lh-snug);
  /* Lange Titel ohne Leerzeichen duerfen die Karte nicht aufreissen. */
  overflow-wrap: anywhere;
}

/* Veraltet: die Deutung ist weggebrochen oder die Zeile hat sich geaendert.
   Die Karte bleibt lesbar stehen, sieht aber nicht mehr nach "jetzt klicken"
   aus - die Knoepfe sind dann ohnehin abgeschaltet. */
.wz-lesart[data-state='veraltet'],
.wz-lesarten[data-state='veraltet'] .wz-lesart {
  border-color: var(--tg-line);
  background: var(--tg-bg-raised);
  opacity: 0.72;
}

.wz-lesart__hinweis,
.wz-lesarten__fehler {
  margin: 0;
  min-width: 0;
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-xs);
  line-height: var(--tg-lh-snug);
  overflow-wrap: anywhere;
}

/* Beide Lesarten nebeneinander: links, was gilt - rechts, was stattdessen
   entstuende. Auf schmalen Schirmen untereinander. */
.wz-lesart__vergleich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--tg-space-3);
  width: 100%;
  min-width: 0;
}

.wz-lesart__spalte {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  min-width: 0;
  padding: var(--tg-space-2);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-bg-sunken);
}

/* Die gerade geltende Lesart ist die ruhige, die andere das Angebot. */
.wz-lesart__spalte[data-gewaehlt='true'] {
  border-color: var(--tg-accent-soft);
  background: var(--tg-bg-raised);
}

.wz-lesart__caption {
  flex: none;
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
  letter-spacing: var(--tg-tracking-wide);
  text-transform: uppercase;
}

.wz-lesart__stuecke {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wz-lesart__stuecke li {
  padding: 0.15rem var(--tg-space-2);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-pill);
  background: var(--tg-bg-sunken);
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-xs);
  overflow-wrap: anywhere;
}

/* ------------------------------------- Zusammenfassung vor dem Speichern */
.wz-summary {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-3);
  min-width: 0;
  margin-top: var(--tg-space-5);
  padding: var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-md);
  background: var(--tg-bg-raised);
  box-shadow: var(--tg-shadow-1);
  animation: tg-fade-in var(--tg-dur-base) var(--tg-ease-out) both;
}

.wz-summary[hidden] {
  display: none;
}

.wz-summary__warnung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-3);
  min-width: 0;
  padding: var(--tg-space-3);
  border: 1px solid var(--tg-warn-soft);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-warn-soft);
}

.wz-summary__warnung p {
  margin: 0;
  min-width: 0;
}

/* Ein Etikett, dessen Zeile mehrdeutig war. Ohne diesen Zusatz saehe ein
   Phantom-Eintrag genauso aus wie ein sauber erkannter Titel - das war der
   stille Ausfall, um den es hier geht. */
.wz-tag__hinweis {
  padding: 0 var(--tg-space-1);
  border-radius: var(--tg-radius-pill);
  background: var(--tg-warn-soft);
  color: var(--tg-warn);
  font-size: var(--tg-fs-xs);
  letter-spacing: var(--tg-tracking-wide);
  text-transform: uppercase;
}

/* ------------------------------------------------------------- Zeitstrahl */
.wz-timeline {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-md);
  background: var(--tg-bg-sunken);
  box-shadow: var(--tg-shadow-inset);
}

.wz-timeline[hidden] {
  display: none;
}

.wz-timeline__block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-inline: var(--tg-space-1);
  border-right: 1px solid var(--tg-bg-sunken);
  color: var(--tg-text);
  font-size: var(--tg-fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Farbe und Hoehe des Fuellstands kommen aus der Energie (--wz-energy). */
  background: linear-gradient(
    to top,
    var(--tg-accent) calc(var(--wz-energy, 0.5) * 100%),
    var(--tg-glass) calc(var(--wz-energy, 0.5) * 100%)
  );
  transition: flex-grow var(--tg-dur-slow) var(--tg-ease-out);
}

.wz-timeline__block:last-child {
  border-right: 0;
}

.wz-timeline__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Der Block ist von unten bis zur Energiehoehe mit --tg-accent (#7c5cff)
     gefuellt. Heller Text darauf ergibt nur 3,9:1 - unter AA, und bei einer
     Peak-Phase liegt die ganze Beschriftung auf der Akzentflaeche. Die
     Plakette macht den Untergrund unabhaengig vom Fuellstand: #f3f2fb auf
     #08080f sind 18:1. Geprueft in worker/test/script/wizard-markup.test.ts. */
  padding: 1px var(--tg-space-2);
  border-radius: var(--tg-radius-pill);
  background: var(--tg-bg-sunken);
  color: var(--tg-text);
}

/* --------------------------------------------------------------- Phasen */
.wz-phases {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wz-phases[hidden] {
  display: none;
}

.wz-phase {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-4);
  min-width: 0;
  padding: var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-md);
  background: var(--tg-bg-raised);
  box-shadow: var(--tg-shadow-1);
  animation: tg-fade-in var(--tg-dur-slow) var(--tg-ease-out) both;
  animation-delay: calc(var(--tg-i, 0) * 60ms);
  transition:
    border-color var(--tg-dur-fast) var(--tg-ease-out),
    box-shadow var(--tg-dur-fast) var(--tg-ease-out),
    opacity var(--tg-dur-fast) var(--tg-ease-out);
}

.wz-phase:focus-within {
  border-color: var(--tg-accent-line);
  box-shadow: var(--tg-shadow-2), var(--tg-glow-accent);
}

.wz-phase--zieht {
  opacity: 0.45;
}

.wz-phase--ziel {
  border-color: var(--tg-accent);
  box-shadow: var(--tg-glow-accent);
}

.wz-phase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-2);
  min-width: 0;
}

.wz-phase__head > * {
  min-width: 0;
}

.wz-phase__griff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tg-tap-target);
  height: var(--tg-tap-target);
  border: 0;
  border-radius: var(--tg-radius-sm);
  background: transparent;
  color: var(--tg-text-faint);
  cursor: grab;
  flex: none;
}

.wz-phase__griff:active {
  cursor: grabbing;
}

.wz-phase__label {
  flex: 1 1 10rem;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  font-size: var(--tg-fs-lg);
  font-weight: var(--tg-fw-bold);
}

.wz-phase__label:hover {
  border-color: var(--tg-line);
}

.wz-phase__nr {
  font-family: var(--tg-font-mono);
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
  flex: none;
}

.wz-phase__move {
  display: flex;
  gap: var(--tg-space-1);
  flex: none;
}

.wz-phase__move .tg-btn {
  min-width: var(--tg-tap-target);
  padding-inline: var(--tg-space-2);
}

.wz-phase__grid {
  display: grid;
  gap: var(--tg-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.wz-phase__grid > * {
  min-width: 0;
}

.wz-phase__span {
  grid-column: 1 / -1;
}

.wz-slider {
  width: 100%;
  min-width: 0;
  accent-color: var(--tg-accent);
}

.wz-slider-wert {
  font-family: var(--tg-font-mono);
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-xs);
}

.wz-phase__notes {
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
}

.wz-taglist {
  display: flex;
  flex-wrap: wrap;
  /* 12 px statt 4: die Trefferflaechen der ×-Knoepfe sind 44 px breit und
     ragen ueber den Chip hinaus. Mit diesem Abstand stossen sie an, statt
     sich zu ueberlappen - sonst loescht ein Fehlgriff das Nachbar-Schlagwort. */
  gap: var(--tg-space-3);
}

.wz-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-space-1);
  padding: 0.15rem var(--tg-space-2);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-pill);
  background: var(--tg-bg-sunken);
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-xs);
}

.wz-tag--block {
  border-color: var(--tg-danger-soft);
  background: var(--tg-danger-soft);
  color: var(--tg-danger);
}

.wz-tag--era {
  border-color: var(--tg-accent-2-soft);
  background: var(--tg-accent-2-soft);
  color: var(--tg-accent-2);
}

.wz-tag__weg {
  position: relative;
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--tg-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

/* Das × loest eine sofortige, unbestaetigte Loeschung aus - es muss also
   sicher zu treffen sein. Das Zeichen selbst bleibt 20 px klein (sonst waere
   der Chip kein Chip mehr); die Trefferflaeche waechst unsichtbar auf die
   44 px aus --tg-tap-target. Der groessere Abstand in .wz-taglist sorgt
   dafuer, dass sich diese Flaechen nicht gegenseitig ueberlappen. */
.wz-tag__weg::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tg-tap-target);
  height: var(--tg-tap-target);
  transform: translate(-50%, -50%);
  border-radius: var(--tg-radius-pill);
}

.wz-phases__actions {
  justify-content: flex-end;
}

/* ------------------------------------------------------- Zustaende (leer …) */
.wz-empty,
.wz-loading,
.wz-failure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tg-space-3);
  padding: var(--tg-space-6);
  border: 1px dashed var(--tg-line);
  border-radius: var(--tg-radius-md);
  text-align: center;
}

.wz-empty[hidden],
.wz-loading[hidden],
.wz-failure[hidden] {
  display: none;
}

.wz-failure {
  border-style: solid;
  border-color: var(--tg-danger-soft);
}

.wz-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--tg-line-strong);
  border-top-color: var(--tg-accent);
  border-radius: var(--tg-radius-pill);
  animation: wz-spin var(--tg-dur-slower) linear infinite;
}

@keyframes wz-spin {
  to { transform: rotate(1turn); }
}

.wz-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  padding: var(--tg-space-4);
  border: 1px solid var(--tg-warn-soft);
  border-radius: var(--tg-radius-md);
  background: var(--tg-warn-soft);
  color: var(--tg-warn);
  font-size: var(--tg-fs-sm);
}

.wz-warnings[hidden] {
  display: none;
}

/* ----------------------------------------------------------- Fehlermeldung */
.wz-error {
  display: flex;
  align-items: center;
  gap: var(--tg-space-2);
  color: var(--tg-danger);
  font-size: var(--tg-fs-sm);
}

.wz-error[hidden] {
  display: none;
}

.wz-error::before {
  content: '⚠';
  flex: none;
}

[aria-invalid='true'] {
  border-color: var(--tg-danger);
}

/* ------------------------------------------------------------- Navigation */
.wz-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--tg-z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-3);
  margin-top: var(--tg-space-5);
  padding: var(--tg-space-3) var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-pill);
  background: var(--tg-scrim);
  backdrop-filter: blur(14px);
  box-shadow: var(--tg-shadow-2);
}

.wz-actions > * {
  min-width: 0;
}

.wz-actions__hint {
  font-size: var(--tg-fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Das Version-Badge liegt fix unten rechts und mit hoeherer Ebene ueber der
   klebenden Leiste. Ohne diesen reservierten Streifen verschwindet das rechte
   Ende von "Drehbuch erstellen" darunter - ein Klick dort oeffnet die
   Versionshistorie statt das Drehbuch zu erzeugen. Auf schmalen Schirmen loest
   das der padding-bottom weiter unten; hier geht es um die Breiten, auf die
   das Host-Dashboard zielt. */
@media (min-width: 40.0625rem) {
  .wz-actions {
    padding-inline-end: calc(var(--tg-space-4) + 13rem);
  }
}

/* Das Version-Badge sitzt unten rechts - auf schmalen Schirmen wuerde die
   Navigationsleiste darunter verschwinden. */
@media (max-width: 40rem) {
  .wz-actions {
    border-radius: var(--tg-radius-lg);
  }

  .wz-actions__hint {
    order: 3;
    flex-basis: 100%;
    white-space: normal;
  }

  .wz-main {
    padding-bottom: calc(var(--tg-space-9) + var(--tg-tap-target) + var(--tg-space-5));
  }

  /* Platz am unteren Rand der Leiste: dort schwebt das Version-Badge und
     wuerde sonst den Hinweistext ueberdecken.

     Der Streifen muss so hoch sein wie das Badge SAMT seinem Abstand zum
     Fensterrand. --tg-space-6 (2rem) reichte dafuer nicht: das Badge sitzt
     bei bottom:1rem und wird auf Touchgeraeten --tg-tap-target (2.75rem)
     hoch, sein oberer Rand liegt also 3.75rem ueber dem Fensterrand, waehrend
     der Hinweistext schon bei 2rem endete. Gemessen bei 360px: 151x15px
     Ueberlappung, und verdeckt wurde ausgerechnet die Warnung. Die Rechnung
     unten ist dieselbe wie die von .tg-version-history in base.css. */
  .wz-actions {
    padding-bottom: calc(var(--tg-space-4) + var(--tg-tap-target) + var(--tg-space-2));
  }

  /* Auf schmalen Bloecken ist die Beschriftung nur noch Buchstabensalat -
     die Zeiten stehen ohnehin auf jeder Karte darunter. */
  .wz-timeline__label {
    display: none;
  }

  .wz-step {
    padding: var(--tg-space-4);
  }
}

/* Bewegung aus: die Dauer-Tokens sind dann bereits ~0, aber Transformationen
   sollen gar nicht erst stattfinden. */
@media (prefers-reduced-motion: reduce) {
  .wz-step--eintritt,
  .wz-step--eintritt-rueckwaerts,
  .wz-phase,
  .wz-reading,
  .wz-lesart,
  .wz-summary,
  .wz-banner {
    animation: none;
  }

  .wz-choice:hover,
  .wz-chip:active {
    transform: none;
  }

  .wz-mark__bar {
    animation: none;
  }

  .wz-spinner {
    animation: none;
    border-top-color: var(--tg-line-strong);
  }
}