/* ==========================================================================
   Taktgeber - Host-Dashboard (WP11), "Regiepult"

   Desktop-first mit brauchbarer Mobilansicht (docs/DESIGN.md, §8). Keine
   Farb-, Abstands-, Radius-, Schatten- oder Dauerwerte ausserhalb der Tokens.
   Prefix `db-`, damit nichts mit `pv-` (Vorschau), `wz-` (Wizard) oder `ga-`
   (Gaesteansicht) kollidiert.
   ========================================================================== */

/* Der Kopf ist `sticky` und rund 68 px hoch. Ohne `scroll-padding-top`
   springt jedes Sprungziel (der Sprunglink, `#rueckblick`, ein
   `scrollIntoView` nach einer Meldung) EXAKT unter diesen Kopf - der Anfang
   des Ziels ist dann verdeckt. Am `:root`, damit es fuer jedes Ziel der Seite
   gilt und nicht nur fuer die, an die gerade jemand gedacht hat. */
:root {
  scroll-padding-top: 5rem;
}

/* ------------------------------------------------------------------- Kopf */

.db-kopf {
  position: sticky;
  top: 0;
  z-index: var(--tg-z-sticky);
  border-bottom: 1px solid var(--tg-line);
  background: var(--tg-scrim);
  backdrop-filter: blur(14px);
}

.db-kopf__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-4);
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding: var(--tg-space-3) var(--tg-space-5);
}

.db-kopf__inner > * {
  min-width: 0;
}

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

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

.db-kopf__text {
  flex: 1 1 12rem;
}

.db-kopf__feier {
  font-size: var(--tg-fs-lg);
  font-weight: var(--tg-fw-bold);
  line-height: var(--tg-lh-tight);
  overflow-wrap: anywhere;
}

/* 12-px-Mono unter dem Namen der Feier war die kleinste Schrift der Seite -
   und sie traegt die Uhrzeit, nach der der Gastgeber den Abend taktet. Eine
   Stufe groesser, ohne den Kopf zu sprengen. */
.db-kopf__zeit {
  font-size: var(--tg-fs-sm);
  font-family: var(--tg-font-mono);
}

/* ------------------------------------------------------------- Gäste-Code
   S1: Die Leinwand verweist am fremden Rechner hierher ("Der Gäste-Code steht
   im Regiepult"). Also steht er hier - gross genug zum Vorlesen und Abtippen,
   in Mono, damit 0 und O sich nicht streiten. */
.db-kopf__code {
  display: inline-flex;
  align-items: baseline;
  gap: var(--tg-space-2);
  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);
}

.db-kopf__code[hidden] {
  display: none;
}

.db-kopf__code-marke {
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
  letter-spacing: var(--tg-tracking-wide);
  text-transform: uppercase;
}

/* S6: hier stand `var(--tg-fs-base)` - ein Token, das es in tokens.css nie
   gab. Ohne Rueckfallwert erbte ausgerechnet der Gäste-Code die 15 px des
   Fliesstextes, obwohl der Gastgeber ihn VORLESEN und seine Gaeste ihn
   ABTIPPEN sollen. --tg-fs-xl ist die groesste Stufe, die neben dem
   Feiernamen in die Kopfzeile passt. */
.db-kopf__code-wert {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-xl);
  font-weight: var(--tg-fw-bold);
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
}

/* Fliesstext in den Karten bekommt dasselbe Mass wie der Hinweis. */
.db-karte .tg-hint,
.db-phasen__leer,
.db-protokoll__leer,
.db-wuensche__leer,
.db-floor__ehrlich,
.db-cooldown {
  max-width: 75ch;
}

/* --------------------------------------------------------------- Ladezustand */
.db-laden {
  display: flex;
  align-items: center;
  gap: var(--tg-space-3);
  margin-bottom: var(--tg-space-4);
  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);
}

.db-laden[hidden] {
  display: none;
}

.db-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  margin-inline-start: auto;
}

.db-nav__link {
  padding-inline: var(--tg-space-4);
  font-size: var(--tg-fs-sm);
}

/* ------------------------------------------------------------------ Main */

.db-main {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding: var(--tg-space-5) var(--tg-space-5) var(--tg-space-8);
}

.db-banner {
  margin-bottom: var(--tg-space-5);
  padding: var(--tg-space-4) var(--tg-space-5);
  border: 1px solid var(--tg-line-strong);
  border-radius: var(--tg-radius-md);
  background: var(--tg-bg-raised);
  box-shadow: var(--tg-shadow-2), var(--tg-shadow-inset);
  animation: tg-fade-in var(--tg-dur-base) var(--tg-ease-out) both;
}

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

.db-banner__hinweis {
  margin-top: var(--tg-space-2);
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-sm);
}

.db-banner__aktion {
  margin-top: var(--tg-space-3);
}

/* --------------------------------------------------------------- Raster
   Desktop: Arbeitsflaeche links (breit), Regie rechts (schmal). Die
   Wunschliste laeuft ueber beide Spalten - sie ist die Flaeche, auf der
   waehrend der Feier am meisten passiert.

   ZWEI SAEULEN STATT SECHS RASTERFELDER: mit `grid-template-areas` je Karte
   erbt eine kurze Karte die Zeilenhoehe der langen Karte daneben, und im
   Pult klaffte unter "Läuft gerade" ein leeres Drittel. Die Saeulen sind
   deshalb eigene Flex-Spalten; das Raster ordnet nur noch sie. */

.db-raster {
  display: grid;
  gap: var(--tg-space-5);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    'links     rechts'
    'wuensche  wuensche';
  align-items: start;
}

.db-raster > * {
  min-width: 0;
}

.db-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-5);
  min-width: 0;
}

.db-spalte > * {
  min-width: 0;
}

.db-spalte--links {
  grid-area: links;
}

.db-spalte--rechts {
  grid-area: rechts;
}

.db-karte--wuensche,
.db-karte--rueckblick {
  grid-area: wuensche;
}

/* Der Rueckblick steht unter der Wunschliste, nicht daneben. */
.db-karte--rueckblick {
  grid-row: 3;
  grid-column: 1 / -1;
}

/* Mittelgross: zwei gleich breite Spalten, damit nichts quetscht. */
@media (max-width: 78rem) {
  .db-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Handy: eine Spalte. Die Saeulen loesen sich auf (`display: contents`),
   damit die Karten einzeln sortierbar werden - Reihenfolge nach
   Dringlichkeit am Abend: was laeuft, wer wuenscht, wie steht die Flaeche,
   dann der Rest. */
@media (max-width: 56rem) {
  .db-raster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .db-spalte {
    display: contents;
  }

  .db-karte {
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
  }

  .db-karte--jetzt {
    order: 1;
  }
  .db-karte--wuensche {
    order: 2;
  }
  .db-karte--floor {
    order: 3;
  }
  .db-karte--steuerung {
    order: 4;
  }
  .db-karte--drehbuch {
    order: 5;
  }
  .db-karte--protokoll {
    order: 6;
  }
  .db-karte--rueckblick {
    order: 7;
  }

  .db-main {
    padding-inline: var(--tg-space-4);
  }

  .db-kopf__inner {
    padding-inline: var(--tg-space-4);
  }

  .db-nav {
    width: 100%;
    margin-inline-start: 0;
  }

  .db-nav__link {
    flex: 1 1 8rem;
  }
}

/* `hidden` muss wirken.
   `.tg-btn` und `.tg-badge` bringen ein eigenes `display: inline-flex` mit,
   und das schlaegt den Vorgabewert des Attributs - ein "verstecktes" Badge
   blieb sichtbar. Ein Zustand, den das JavaScript fuer aus haelt und der
   trotzdem dasteht, ist die schlimmere Sorte Fehler: er faellt niemandem
   auf, der den Code liest. */
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ Karte */

.db-karte {
  padding: var(--tg-space-5);
}

.db-karte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-3);
  margin-bottom: var(--tg-space-4);
}

.db-karte__kopf > * {
  min-width: 0;
}

.db-karte__kopf .tg-card__title {
  margin-bottom: 0;
  margin-inline-end: auto;
}

.db-karte__kopfrechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-3);
}

/* Hinweis, wenn eine EINZELNE Karte nicht kann - der Rest der Seite lebt
   weiter. Die Steuerung ist auch beim Lesen geschuetzt; ohne angemeldeten
   Gastgeber ist diese Karte zu, nicht kaputt. */
/* S7: ZEILENMASS. Gemessen bis 84 Zeichen pro Zeile bei 1600 px, in einer
   Karte von 1438 px sogar 78 am Stueck - alles mit `max-width: none`, waehrend
   Landing, Wizard und Leinwand laengst 40-46ch begrenzen. */
.db-hinweis {
  max-width: 75ch;
  margin-bottom: var(--tg-space-4);
  padding: var(--tg-space-3) var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-bg-sunken);
  font-size: var(--tg-fs-sm);
}

.db-hinweis[data-art='fehler'] {
  border-color: var(--tg-danger);
  color: var(--tg-danger);
}

.db-hinweis a {
  white-space: nowrap;
}

/* ------------------------------------------------------------ Läuft gerade */

.db-jetzt {
  min-height: 5rem;
}

.db-jetzt__titel {
  font-size: var(--tg-fs-2xl);
  font-weight: var(--tg-fw-bold);
  line-height: var(--tg-lh-tight);
  letter-spacing: var(--tg-tracking-tight);
  overflow-wrap: anywhere;
}

.db-jetzt__kuenstler {
  font-size: var(--tg-fs-lg);
  overflow-wrap: anywhere;
}

.db-fortschritt {
  position: relative;
  height: 0.5rem;
  margin-top: var(--tg-space-4);
  overflow: hidden;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-bg-sunken);
  box-shadow: var(--tg-shadow-inset);
}

/* Waechst ueber `transform: scaleX()`, nicht ueber `width`: der Balken laeuft
   sekuendlich weiter, waehrend daneben Listen und Karten stehen. `width` waere
   jede Sekunde ein neues Layout der ganzen Karte; `transform` bleibt im
   Compositor. */
.db-fortschritt__fuellung {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-grad-brand);
  box-shadow: var(--tg-glow-live);
  transition: transform var(--tg-dur-slower) linear;
}

.db-jetzt__messung[hidden] {
  display: none;
}

/* Ueberzogen: voll, aber ohne Aussage. Die Farbe wechselt zur Warnung - der
   TEXT daneben ("läuft länger als geplant") sagt es ohnehin. */
.db-jetzt__messung[data-ueber='ja'] .db-fortschritt__fuellung {
  background: var(--tg-warn, var(--tg-accent-3));
  box-shadow: none;
}

/* Die enge Live-Region um Titel, Künstler und Lage (B3). */
.db-jetzt__ansage {
  min-width: 0;
}

.db-jetzt__lage {
  margin-top: var(--tg-space-2);
}

.db-jetzt__lage[hidden] {
  display: none;
}

.db-jetzt__zeiten {
  margin-top: var(--tg-space-2);
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-xs);
}

.db-unter__titel {
  margin-top: var(--tg-space-5);
  margin-bottom: var(--tg-space-3);
  font-size: var(--tg-fs-sm);
  font-weight: var(--tg-fw-medium);
  letter-spacing: var(--tg-tracking-wide);
  text-transform: uppercase;
  color: var(--tg-text-faint);
}

.db-naechste {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.db-naechst {
  display: flex;
  align-items: baseline;
  gap: var(--tg-space-3);
  padding: var(--tg-space-2) var(--tg-space-3);
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-glass);
}

.db-naechst > * {
  min-width: 0;
}

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

.db-naechst__text {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.db-naechst__titel {
  font-weight: var(--tg-fw-medium);
}

.db-naechst__kuenstler {
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-sm);
}

.db-naechst__marke {
  flex: none;
}

/* ------------------------------------------------------------ Floor-Signal */

.db-messer {
  display: flex;
  align-items: center;
  gap: var(--tg-space-4);
  margin-bottom: var(--tg-space-4);
}

.db-messer__spur {
  position: relative;
  flex: 1 1 auto;
  height: 0.75rem;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-bg-sunken);
  box-shadow: var(--tg-shadow-inset);
}

.db-messer__fuellung {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-grad-cool);
  transition: transform var(--tg-dur-base) var(--tg-ease-out);
}

/* Die Referenzmarke. 2 px breit, damit sie auch vor dem Verlauf steht. */
.db-messer__baseline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tg-text);
  z-index: 1;
}

.db-messer__wert {
  flex: none;
  min-width: 3.5rem;
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-lg);
  font-weight: var(--tg-fw-bold);
  text-align: right;
}

.db-werte {
  display: grid;
  gap: var(--tg-space-2) var(--tg-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  margin: 0;
}

.db-werte__paar {
  min-width: 0;
}

.db-werte dt {
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
  letter-spacing: var(--tg-tracking-wide);
  text-transform: uppercase;
}

.db-werte dd {
  margin: 0;
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-md);
  overflow-wrap: anywhere;
}

.db-floor__ehrlich {
  margin-top: var(--tg-space-4);
  padding: var(--tg-space-3) var(--tg-space-4);
  border-left: 3px solid var(--tg-warn);
  border-radius: var(--tg-radius-xs);
  background: var(--tg-warn-soft);
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-sm);
}

/* -------------------------------------------------------------- Steuerung */

.db-steuerung {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-4);
}

.db-schalterzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-3);
}

.db-schalterzeile > * {
  min-width: 0;
}

.db-schalterzeile .tg-label {
  margin-inline-end: auto;
}

.db-cooldown {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-xs);
}

.db-eingriff {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  padding-top: var(--tg-space-4);
  border-top: 1px solid var(--tg-line-soft);
}

.db-eingriff__knoepfe {
  display: grid;
  gap: var(--tg-space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  margin-top: var(--tg-space-1);
}

.db-eingriff__knoepfe .tg-btn {
  padding-inline: var(--tg-space-3);
  font-size: var(--tg-fs-sm);
}

/* ------------------------------------------------------- Drehbuch Ist/Soll */

.db-phasen {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.db-phase {
  position: relative;
  padding: var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-md);
  background: var(--tg-glass);
  transition: border-color var(--tg-dur-base) var(--tg-ease-out);
}

.db-phase[data-laeuft='ja'] {
  border-color: var(--tg-accent-line);
  background: var(--tg-accent-soft);
}

.db-phase[data-eingriff='ja'] {
  border-left: 3px solid var(--tg-accent-2);
}

.db-phase__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-2);
  margin-bottom: var(--tg-space-3);
}

.db-phase__kopf > * {
  min-width: 0;
}

.db-phase__label {
  margin-inline-end: auto;
  font-size: var(--tg-fs-lg);
  font-weight: var(--tg-fw-bold);
  overflow-wrap: anywhere;
}

/* Ist und Soll stehen NEBENEINANDER. Uebereinander waere es eine
   Zeitreihe - hier geht es um den Vergleich zweier Werte. */
.db-istsoll {
  display: grid;
  gap: var(--tg-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.db-istsoll__block {
  min-width: 0;
  padding: var(--tg-space-2) var(--tg-space-3);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-bg-sunken);
}

.db-istsoll__marke {
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
  letter-spacing: var(--tg-tracking-wide);
  text-transform: uppercase;
}

.db-istsoll__wert {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-md);
  overflow-wrap: anywhere;
}

.db-istsoll__wert--offen {
  color: var(--tg-text-faint);
}

.db-phase__gruende {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  margin: var(--tg-space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Die Begruendung der Steuerung. Kommt fertig auf Deutsch aus dem Backend
   und wird NICHT umformuliert - hier steht nur, wie sie aussieht. */
.db-grund {
  display: flex;
  gap: var(--tg-space-3);
  padding: var(--tg-space-2) var(--tg-space-3);
  border-left: 3px solid var(--tg-accent-2);
  border-radius: var(--tg-radius-xs);
  background: var(--tg-accent-2-soft);
  font-size: var(--tg-fs-sm);
}

.db-grund > * {
  min-width: 0;
}

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

.db-grund__text {
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- Protokoll */

.db-protokoll {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  max-height: 26rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.db-protokoll__eintrag {
  padding: var(--tg-space-3);
  border: 1px solid var(--tg-line-soft);
  border-radius: var(--tg-radius-sm);
  background: var(--tg-glass);
  animation: tg-fade-in var(--tg-dur-base) var(--tg-ease-out) both;
}

.db-protokoll__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-space-2);
  margin-bottom: var(--tg-space-1);
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-xs);
  color: var(--tg-text-faint);
}

.db-protokoll__text {
  font-size: var(--tg-fs-sm);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Wunschliste */

.db-wuensche {
  display: grid;
  gap: var(--tg-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.db-wunsch {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-3);
  min-width: 0;
  padding: var(--tg-space-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-md);
  background: var(--tg-grad-night);
  box-shadow: var(--tg-shadow-1);
  transition:
    border-color var(--tg-dur-fast) var(--tg-ease-out),
    opacity var(--tg-dur-base) var(--tg-ease-out);
}

.db-wunsch:focus-within {
  border-color: var(--tg-accent-line);
}

.db-wunsch[data-laeuft='ja'] {
  opacity: 0.55;
  pointer-events: none;
}

.db-wunsch__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tg-space-2);
}

.db-wunsch__kopf > * {
  min-width: 0;
}

.db-wunsch__titel {
  flex: 1 1 12rem;
  font-size: var(--tg-fs-lg);
  font-weight: var(--tg-fw-bold);
  overflow-wrap: anywhere;
}

.db-wunsch__kuenstler {
  color: var(--tg-text-muted);
  font-size: var(--tg-fs-sm);
  overflow-wrap: anywhere;
}

.db-wunsch__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-xs);
  color: var(--tg-text-faint);
}

/* Widmung des Gasts. Bleibt im Pult - auf der Leinwand steht sie ohne
   Status und ohne Begruendung, dafuer sorgt die TV-Ansicht selbst. */
.db-wunsch__widmung {
  padding: var(--tg-space-2) var(--tg-space-3);
  border-left: 3px solid var(--tg-accent-4);
  border-radius: var(--tg-radius-xs);
  background: var(--tg-accent-4-soft);
  font-size: var(--tg-fs-sm);
  overflow-wrap: anywhere;
}

/* Interne Begruendung. Nur hier, nie beim Gast, nie auf dem Beamer. */
.db-wunsch__grund {
  color: var(--tg-text-faint);
  font-size: var(--tg-fs-xs);
  overflow-wrap: anywhere;
}

.db-wunsch__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
}

.db-wunsch__knoepfe .tg-btn {
  flex: 1 1 6rem;
  padding-inline: var(--tg-space-3);
  font-size: var(--tg-fs-sm);
}

.db-btn--gefahr {
  border-color: var(--tg-danger);
  color: var(--tg-danger);
}

.db-btn--gefahr:hover {
  background: var(--tg-danger-soft);
  color: var(--tg-danger);
}

/* Verschieben: Auswahl ist ein WERT, der Knopf daneben ist der BEFEHL.
   Auf einem geschlossenen <select> loest jeder Pfeiltastendruck `change`
   aus - haengt daran der Schreibvorgang, kann per Tastatur niemand eine
   Phase waehlen, ohne den Wunsch dabei zu verschieben (WCAG 3.2.2). */
.db-wunsch__verschieben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-2);
  align-items: end;
}

.db-wunsch__verschieben > .tg-field {
  flex: 1 1 10rem;
}

.db-wunsch__verschieben .tg-btn {
  flex: none;
  font-size: var(--tg-fs-sm);
}

.db-wunsch__fehler {
  color: var(--tg-danger);
  font-size: var(--tg-fs-sm);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- Fuss */

.db-fuss {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding: var(--tg-space-5) var(--tg-space-5) var(--tg-space-8);
  border-top: 1px solid var(--tg-line-soft);
}

/* ---------------------------------------------------------- Version-Badge

   `base.css` setzt das Badge `position: fixed` unten rechts. Auf einer Seite
   ohne Bedienelemente (der Leinwand) ist das richtig. Auf dem Regiepult lag es
   dadurch AUF Knoepfen: am Handy auf "Annehmen", am Desktop auf "Nächste Phase
   später". Ein zusaetzlicher Fussabstand half nur am unteren Seitenende - ein
   fixiertes Element deckt beim Scrollen jede beliebige Stelle ab.

   Auf DIESER Seite wird es deshalb aus der Viewport-Ebene genommen und an das
   Seitenende gehaengt: `absolute` gegen `.db` (das `<body>`), also scrollt es
   mit und landet im reservierten Streifen unter dem Fuss. `shared/` bleibt
   unberuehrt - das ist Platzierung durch die Seite, nicht eine Aenderung am
   gemeinsamen Baustein. */
.db {
  position: relative;
}

.db .tg-version,
.db .tg-version-history {
  /* Beide, sonst bliebe die Historie am Viewport kleben, waehrend das Badge,
     das sie oeffnet, mit der Seite wegscrollt. */
  position: absolute;
}

.db-fuss {
  /* Der reservierte Streifen, in dem das Badge sitzt. */
  padding-bottom: var(--tg-space-9);
}

@media (max-width: 56rem) {
  .db-fuss {
    padding-bottom: calc(var(--tg-space-9) + var(--tg-space-5));
  }
}

/* Marke fuer einen Gaestewunsch in der Liste "kommt als Naechstes".
   Amber ist im Design-System der Ton der Gaestewuensche. */
.db-badge--wunsch {
  background: var(--tg-accent-4-soft);
  color: var(--tg-accent-4);
}

/* -------------------------------------------------------------- Rückblick */

.db-werte--breit {
  margin-bottom: var(--tg-space-5);
}

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

.db-rueckblick__spalten > * {
  min-width: 0;
}

.db-liste {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  margin: 0;
  padding-inline-start: var(--tg-space-5);
}

.db-liste li {
  overflow-wrap: anywhere;
}

.db-liste__meta {
  color: var(--tg-text-faint);
  font-family: var(--tg-font-mono);
  font-size: var(--tg-fs-xs);
}


/* ==========================================================================
   B4 - GESPERRTE SCHALTER SEHEN GESPERRT AUS

   `aria-disabled` allein aenderte nichts am Bild: die An/Aus-Umschalter
   behielten `opacity: 1`, `cursor: pointer` und die volle Akzentfuellung und
   zeigten "Automatik: An" - den statischen HTML-Vorgabewert, den nie ein
   Server bestaetigt hatte. Der Gastgeber las "die Automatik arbeitet",
   waehrend die Karte daneben sagte, sie sei zu.
   ========================================================================== */

.tg-switcher__option[aria-disabled='true'],
.db-steuerung .tg-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Auch der gedrueckte Zustand verliert seine Akzentfuellung, sonst leuchtet
   "An" weiter, als waere es bestaetigt. */
.tg-switcher__option[aria-disabled='true'][aria-pressed='true'] {
  background: transparent;
  color: var(--tg-text-muted);
  box-shadow: none;
}

.tg-switcher__option[aria-disabled='true']:hover {
  color: var(--tg-text-muted);
}

/* ==========================================================================
   S4 - ZERSTOERENDE AKTIONEN

   "Ablehnen" ist nicht zuruecknehmbar, "Sofort spielen" schneidet den
   laufenden Titel vor dreissig Gaesten ab. Auf dem Desktop trennten 156 px
   und ein roter Rand sie von "Annehmen". Bei 390 px lag "Ablehnen" als volle
   Leiste DIREKT unter "Annehmen" - Daumenreichweite, gegenteilige Wirkung.
   ========================================================================== */

.db-wunsch__gefahr {
  display: contents;
}

.db-wunsch__nachfrage {
  display: flex;
  flex-direction: column;
  gap: var(--tg-space-2);
  padding: var(--tg-space-3);
  border: 1px solid var(--tg-danger);
  border-radius: var(--tg-radius-md);
  background: var(--tg-danger-soft);
}

.db-wunsch__nachfrage-text {
  font-size: var(--tg-fs-sm);
  font-weight: var(--tg-fw-medium);
  overflow-wrap: anywhere;
}

.db-wunsch__nachfrage .db-wunsch__knoepfe {
  margin: 0;
}

/* ==========================================================================
   HANDY (S4 + S7)

   S7: Die Umschalter blieben bei 36 px hoch. base.css laesst sie nur unter
   `@media (pointer: coarse)` wachsen - ein 390-px-Fenster ist aber auch dann
   ein Handy, wenn der Zeiger als `fine` gemeldet wird (Emulation, Notebook
   mit Touch, Testgeraet). DESIGN.md §7 verlangt mindestens 44 px, und zwar
   nach der BREITE, nicht nach der Zeigerart.
   ========================================================================== */

@media (max-width: 56rem) {
  .tg-switcher__option {
    min-height: var(--tg-tap-target, 2.75rem);
    padding-inline: var(--tg-space-4);
  }

  .db-wunsch__knoepfe .tg-btn,
  .db-wunsch__verschieben .tg-btn,
  .db-eingriff__knoepfe .tg-btn {
    min-height: var(--tg-tap-target, 2.75rem);
  }

  /* S4: Die beiden zerstoerenden Knoepfe ruecken in eine eigene Zeile
     UNTER eine Trennlinie - weg von dem Daumen, der gerade "Annehmen"
     getroffen hat. Sie stehen damit nicht mehr direkt darunter, und die
     Linie sagt ohne Worte: ab hier wird es ernst. */
  .db-wunsch__gefahr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-2);
    width: 100%;
    margin-top: var(--tg-space-3);
    padding-top: var(--tg-space-3);
    border-top: 1px solid var(--tg-line);
  }

  .db-wunsch__gefahr .tg-btn {
    flex: 1 1 8rem;
  }

  /* "Annehmen" bekommt die ganze Breite: es ist der Normalfall. */
  .db-wunsch__knoepfe > .tg-btn--primary {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------- Bewegung aus
   Die Dauer-Tokens stehen bei `prefers-reduced-motion` schon auf ~0 - aber
   eine Dauerschleife, die 1000-mal je Sekunde neu startet, ist keine Ruhe.
   Alles, was hier laeuft, bekommt deshalb einen ausdruecklichen Ruhezustand.
   (Das Emblem regelt shared/base.css, seit es dort EINMAL gebaut wird.) */
@media (prefers-reduced-motion: reduce) {
  .db-banner,
  .db-protokoll__eintrag,
  .db-fortschritt__fuellung {
    animation: none;
    transition: none;
  }
}