/* Tenacious Tribute · Backstage
 *
 * Gestaltung (Spec 11) im Design-System „Pult“ (docs/superpowers/specs/
 * 2026-10-31-design-pult-design.md): ein Mischpult auf der Buehne. Fuenf
 * Ebenen mit steigender Leuchtdichte (Display, Schiene, Grund, Modul, Taste),
 * Listen liegen in eingelassenen Schienen, Bedienelemente sind Tasten mit
 * Kante. Flame nur fuer die eine Hauptaktion, den aktiven Tab und den Fokus.
 * Anton traegt die Seitentitel, Inter Text und Formulare, Space Mono Zeiten,
 * Kennzahlen und Labels auf dunklen Teilen. Werte kommen aus /theme.css
 * (brand/tokens.json, Block „pult“). */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* Nichts verschwindet beim Fokussieren unter der Leiste; kein Blitzen beim Tippen (iOS). */
  scroll-padding-bottom: 6.5rem;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  /* Gebuerstete Grundplatte: im Dunkeln feine Buerste, oben etwas Licht. */
  background-color: var(--e-grund);
  background-image: var(--e-grund-buerste), linear-gradient(180deg, var(--e-grund-oben) 0, var(--e-grund) 32rem);
  background-repeat: repeat, no-repeat;
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* hidden gilt immer, auch gegen display von Klassen (.feld, .auswahl). */
[hidden] { display: none !important; }

/* Links im Text tragen keine Flame (Flame-Budget, Spec 6.10): Textfarbe mit leisem Unterstrich. */
a { color: var(--text); text-decoration-color: var(--text-leise); text-underline-offset: 0.18em; }

:focus-visible { outline: var(--fokus-breite) solid var(--fokus); outline-offset: var(--fokus-abstand); border-radius: var(--r-klein); }
/* Ueberschriften bekommen den Fokus nach einem Seitenwechsel nur fuer
 * Bildschirmleser (tabindex=-1); bedienbar sind sie nicht, also kein Rahmen. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

.noscript { padding: 2rem 1rem; }

.unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Grundgeruest ---------- */

/* minmax(0, 1fr): eine lange Ueberschrift darf das Raster nicht breiter als das
 * Handy machen (sonst zoomt der Browser heraus und die Navigation rutscht weg). */
.app { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }

.sichtbalken {
  background: var(--akzent);
  color: var(--auf-akzent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  display: flex; gap: 1rem; justify-content: space-between; align-items: center;
}
.sichtbalken button {
  all: unset; cursor: pointer; text-decoration: underline; font-weight: 700;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.5rem; display: inline-flex; align-items: center;
}
.sichtbalken button:focus-visible { outline: 2px solid var(--auf-akzent); }

.inhalt {
  min-width: 0;
  /* Der Stempel (112 % -> 100 %) darf beim Laden nicht ueber den Rand ragen:
   * mobile Browser legen sonst einen herausgezoomten Ausschnitt fest. */
  overflow-x: clip;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: max(1.25rem, env(safe-area-inset-top)) 1rem 6.5rem;
}

/* Pultstreifen (Spec 7.18): am Handy schwebt die Leiste unten, Tasten mit eingedrueckter
 * aktiver Taste und LED-Balken; am Desktop ein Rack links. */
.navigation {
  position: fixed; inset-inline: var(--a-2); bottom: max(var(--a-2), env(safe-area-inset-bottom));
  min-height: 3.75rem;
  display: flex; justify-content: space-around; gap: var(--a-1);
  padding: var(--a-1);
  background: linear-gradient(180deg, var(--e-taste-oben), var(--e-taste-unten));
  border: 1px solid var(--e-taste-rand);
  border-radius: var(--r-modul);
  box-shadow: var(--e-leiste-schatten);
  z-index: 10;
}
.navigation a {
  position: relative;
  flex: 1;
  min-height: 3.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  color: var(--text-leise);
  text-decoration: none;
  font-size: var(--t-tab);
  font-weight: 600;
  border-radius: var(--r);
}
.navigation a svg { width: 1.375rem; height: 1.375rem; }
.navigation a[aria-current="page"] { color: var(--text); background: var(--tab-aktiv); box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.6); }
.navigation a[aria-current="page"]::after {
  --l: var(--led-aktiv); --ll: var(--led-aktiv-licht); --lt: var(--led-aktiv-tief); --ls: color-mix(in srgb, var(--led-aktiv) 75%, transparent);
  content: ""; position: absolute; top: var(--a-1); left: 50%; transform: translateX(-50%);
  inline-size: 1.125rem; block-size: 0.1875rem; border-radius: var(--r-klein);
  background: radial-gradient(circle at 50% 35%, var(--ll) 0, var(--l) 55%, var(--lt) 100%);
  box-shadow: 0 0 calc(var(--glow) * 8px) calc(var(--glow) * 1px) var(--ls);
}
.navigation a:focus-visible { outline-offset: -3px; }

/* Logo nur im Rack (Desktop); diese Regel steht vor dem Block, der es einblendet. */
.navigation .marke { display: none; width: 4.5rem; height: auto; }

@media (min-width: 900px) {
  .app { grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sichtbalken { grid-column: 1 / -1; }
  .navigation {
    position: sticky; top: 0; inset: auto; height: 100dvh; min-height: 0;
    flex-direction: column; justify-content: flex-start; gap: var(--a-1);
    border-radius: 0; border-width: 0 1px 0 0;
    padding: var(--a-5) var(--a-3);
    background: linear-gradient(180deg, var(--e-modul-oben), var(--e-modul-unten));
    box-shadow: var(--e-modul-schatten);
  }
  .navigation .marke { display: block; margin: 0 0 var(--a-5) var(--a-2); }
  .navigation a { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--a-3); padding: 0 var(--a-3); font-size: var(--t-tab); min-height: 2.75rem; }
  .navigation a[aria-current="page"]::after { top: 50%; left: auto; right: var(--a-2); transform: translateY(-50%); inline-size: 0.1875rem; block-size: 1.125rem; }
  .inhalt { padding: var(--a-7) var(--a-6) var(--a-7); }
}

.rahmen { display: contents; }

/* ---------- Typografie ---------- */

.titel {
  font-family: var(--font-anzeige);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--t-titel);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: var(--a-2) 0 var(--a-4);
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}
.titel.klein { font-size: var(--t-titel-detail); }

/* Abschnitte: ruhige Rubrik in Space Mono statt einer zweiten Anton-Zeile (Spec 7.6).
 * Im Hellen steht sie auf einem dunklen Beschriftungsstreifen (Space Mono nur auf dunkel). */
.abschnitt { margin: var(--a-5) 0 0; }
.abschnitt > h2, h2.rubrik, fieldset.gruppe > legend {
  display: flex; align-items: center; gap: var(--a-2);
  margin: 0 0 var(--a-2);
  padding: var(--rubrik-innen);
  background: var(--rubrik-grund);
  color: var(--rubrik-text);
  width: var(--rubrik-breite);
  border-radius: var(--r-klein);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-rubrik);
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.abschnitt > h2::after, h2.rubrik::after { content: ""; flex: 1; height: 1px; background: var(--rubrik-linie); }
@media (min-width: 900px) {
  .abschnitt { margin-top: var(--a-6); }
}

.leise { color: var(--text-leise); }
.absatz { max-width: 38rem; margin: 0 0 1rem; }

/* Space Mono nur auf Platte (Brand-Regel: Info-Text immer in dunkler Box) */
.marke-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  background: var(--platte);
  color: var(--auf-platte);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
}

/* ---------- Bedienelemente ---------- */

/* Knoepfe sind Tasten mit Kante (Spec 7.10): oben Licht, unten Sockel; gedrueckt sinken sie. */
.knopf {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2);
  min-height: 2.75rem; min-width: 2.75rem;
  padding: var(--a-2) var(--a-4);
  margin-bottom: var(--e-taste-sockel-hoehe);
  border: 1px solid var(--e-taste-rand);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--e-taste-oben), var(--e-taste-unten));
  box-shadow: var(--e-taste-schatten);
  color: var(--text);
  font: inherit;
  font-size: var(--t-knopf);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dauer-druck) var(--kurve-standard), box-shadow var(--dauer-druck) var(--kurve-standard);
}
@media (hover: hover) {
  .knopf:hover { filter: brightness(1.08); }
}
.knopf:active { transform: translateY(var(--e-taste-weg)); box-shadow: var(--e-taste-gedrueckt); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 0.5; box-shadow: none; cursor: not-allowed; transform: none; }
.knopf.haupt {
  background: linear-gradient(180deg, var(--haupt-oben), var(--haupt-unten));
  border-color: var(--haupt-rand);
  box-shadow: var(--e-haupt-schatten);
  color: var(--auf-haupt);
  font-family: var(--font-anzeige);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--t-knopf-haupt);
  letter-spacing: 0.03em;
  line-height: 1;
}
.knopf.haupt:active { box-shadow: var(--e-haupt-gedrueckt); }
/* Hauptaktion neben einem anderen Flame-Bereich (Modul, Display): Taste ohne Flame, volle Breite. */
.knopf.haupt.ruhig {
  width: 100%;
  background: linear-gradient(180deg, var(--e-taste-oben), var(--e-taste-unten));
  border-color: var(--e-taste-rand); box-shadow: var(--e-taste-schatten); color: var(--text);
  font-family: var(--font-text); font-weight: 700; text-transform: none; font-size: var(--t-knopf); letter-spacing: 0; line-height: 1.2;
}
.knopf.haupt.ruhig:active { box-shadow: var(--e-taste-gedrueckt); }
.knopf.klein { padding: 0 var(--a-3); font-size: var(--t-knopf-klein); }
.knopf.breit { width: 100%; }
.knopf.still {
  background: none; border-color: transparent; box-shadow: none; margin-bottom: 0;
  color: var(--text); text-decoration: underline; text-decoration-color: var(--text-leise); text-underline-offset: 0.18em;
  padding-inline: var(--a-1);
}
.knopf.still:active { transform: none; box-shadow: none; }
.knopf.gefahr { color: var(--gefahr); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }

.feld { display: grid; gap: 0.35rem; margin: 0 0 1rem; }
.feld label { font-weight: 600; font-size: 0.9375rem; }
.feld .hilfe { font-size: 0.875rem; color: var(--text-leise); }
.feld .fehler { font-size: 0.875rem; color: var(--gefahr); }
/* Felder sind eingelassen (Spec 7.12); 16 px, damit iOS nicht hineinzoomt. Kein Sockel wie bei Tasten. */
.eingabe {
  width: 100%;
  min-height: 3rem;
  padding: var(--a-3);
  border: 1px solid var(--rahmen-eingabe);
  border-radius: var(--r);
  background: var(--e-feld);
  box-shadow: var(--e-feld-schatten);
  color: var(--text);
  font: inherit;
  font-size: var(--t-text);
}
@media (hover: hover) {
  .eingabe:hover { border-color: var(--text-leise); }
}
.eingabe:focus-visible { border-color: var(--fokus); outline-offset: 0; }
.eingabe[aria-invalid="true"] { border-color: var(--gefahr); }
.eingabe[readonly] { opacity: 0.6; border-style: dashed; }

/* Schalterreihe (Spec 7.11): eine Wahl aus wenigen, eingelassen; das Gewaehlte ist eine
 * erhabene Taste mit LED vor dem Wort. Bestandsklassen .umschalter, .pillen, .auswahl, .wahl
 * bekommen dieselbe Regel, das Markup bleibt. Navigation scrollt in sich, Wahlen brechen um. */
.schalter-reihe, .umschalter, .pillen, .auswahl, .wahl {
  display: flex; gap: var(--a-0); padding: var(--a-1); margin: 0 0 var(--a-3);
  background: var(--e-schiene); border: 1px solid var(--e-schiene-rand); border-radius: var(--r); box-shadow: var(--e-schiene-schatten);
}
.schalter-reihe, .umschalter { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.schalter-reihe::-webkit-scrollbar, .umschalter::-webkit-scrollbar { display: none; }
/* Filter und Wahlen brechen um: die gewaehlte Pille darf nie aus dem Blick scrollen. */
.pillen, .auswahl { flex-wrap: wrap; }
.schalter-reihe > a, .schalter-reihe > button, .umschalter > a, .pillen > a, .auswahl label, .wahl > .knopf {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--a-1);
  min-height: 2.75rem; margin: 0; padding: 0 var(--a-3);
  border: 1px solid transparent; border-radius: var(--r); background: none; box-shadow: none;
  color: var(--text-leise); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; scroll-snap-align: start;
}
.schalter-reihe > :focus-visible, .umschalter > a:focus-visible, .pillen > a:focus-visible, .auswahl label:has(:focus-visible), .wahl > .knopf:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus); outline-offset: -3px;
}
/* Das Feld liegt unsichtbar ueber dem ganzen Label: Tippen, Tastatur und Bildschirmleser bleiben am echten Feld. */
.auswahl label { position: relative; }
.auswahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* Ein Haekchen (Mehrfachwahl, Ein/Aus) zeigt auch "aus": LED mit Ring, damit es nicht wie gesperrt wirkt. */
.auswahl label:has(input[type="checkbox"]:not(:checked))::before {
  content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%;
  background: var(--led-aus); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.6), 0 0 0 1px var(--led-ring-aus);
}
:is(.schalter-reihe, .umschalter, .pillen) > [aria-current="page"], :is(.schalter-reihe, .wahl) > [aria-pressed="true"], .auswahl label:has(input:checked) {
  background: linear-gradient(180deg, var(--e-taste-oben), var(--e-taste-unten));
  border-color: var(--rahmen-eingabe); box-shadow: var(--e-taste-schatten);
  color: var(--text); font-weight: 700;
}
:is(.schalter-reihe, .umschalter, .pillen) > [aria-current="page"]::before, :is(.schalter-reihe, .wahl) > [aria-pressed="true"]::before, .auswahl label:has(input:checked)::before {
  --l: var(--led-aktiv); --ll: var(--led-aktiv-licht); --lt: var(--led-aktiv-tief); --ls: color-mix(in srgb, var(--led-aktiv) 75%, transparent);
  content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--ll) 0, var(--l) 55%, var(--lt) 100%);
  box-shadow: 0 0 0 1px var(--led-ring), 0 0 calc(var(--glow) * 8px) calc(var(--glow) * 1px) var(--ls);
}

/* ---------- Listen ---------- */

/* Listen liegen in einer eingelassenen Schiene (Spec 7.7); Zeilen dazwischen mit Trenner. */
.liste {
  list-style: none; margin: 0; padding: 0;
  background: var(--e-schiene);
  border: 1px solid var(--e-schiene-rand);
  border-radius: var(--r-taste);
  box-shadow: var(--e-schiene-schatten);
  overflow: clip;
}
.liste > li { border-bottom: 1px solid var(--e-schiene-trenner); }
.liste > li:last-child { border-bottom: 0; }
.liste > li > .leer, .optionen > li.option, .liste .erledigt-meldung { padding-inline: var(--a-3); }
.liste > li > .leer { padding-block: var(--a-3); }
.zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: center;
  min-height: 3rem;
  padding: var(--a-3);
  color: inherit; text-decoration: none;
}
/* Eine Zeile, die weiterfuehrt, hat rechts einen Chevron (gezeichnet, kein Schriftzeichen). */
a.zeile, a.gigzeile { position: relative; padding-inline-end: calc(var(--a-3) + 1.25rem); }
a.zeile::after, a.gigzeile::after {
  content: ""; position: absolute; right: calc(var(--a-3) + 0.125rem); top: 50%;
  width: 0.5rem; height: 0.5rem;
  border-top: 2px solid var(--text-leise); border-right: 2px solid var(--text-leise);
  transform: translateY(-50%) rotate(45deg);
}
@media (hover: hover) {
  a.zeile:hover, a.gigzeile:hover { background: var(--e-schiene-hover); }
}
a.zeile:active, a.gigzeile:active { background: var(--e-schiene-druck); }
a.zeile:focus-visible, a.gigzeile:focus-visible { outline-offset: -3px; }
.zeile .haupt { font-weight: 600; }
.zeile .neben { color: var(--text-leise); font-size: 0.9375rem; grid-column: 1; }
.zeile .rechts { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }

.angaben { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 0.5rem 1.25rem; margin: 0 0 1rem; }
.angaben dt { color: var(--text-leise); }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
fieldset.feld { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.feld legend { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.35rem; }

/* ---------- Gigs und Aufgaben (Phase 1) ---------- */

/* Die Datumsplatte ist das wiedererkennbare Element jeder Gig-Zeile:
 * Wochentag und Datum in Space Mono auf dunkler Platte. */
/* Die Datumsplatte ist ein kleines, eingelassenes Display (Spec 7.9): ruhig in
 * Listen, laut (leuchtend) nur im Gig-Modul. Gleich in beiden Themen. */
.datumplatte, .zeitplatte {
  display: inline-grid; justify-items: center; align-content: center;
  min-width: 3.25rem; padding: var(--a-1) var(--a-2);
  background: var(--e-display); color: var(--display-hell);
  box-shadow: var(--e-display-schatten);
  font-family: var(--font-mono); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums;
  border-radius: var(--r-klein);
}
.datumplatte .tag, .zeitplatte .tag { font-size: var(--t-label-platte); letter-spacing: 0.1em; color: var(--display-leise); }
.datumplatte .datum, .zeitplatte .datum { font-size: 0.875rem; }
.datumplatte.laut .datum { color: var(--display-text); text-shadow: var(--display-glow); }

.gigzeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem var(--a-3); align-items: start;
  min-height: 3rem;
  padding: var(--a-3); color: inherit; text-decoration: none;
}
.gigzeile .koerper { display: grid; gap: 0.2rem; min-width: 0; }
.gigzeile .haupt { font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
.gigzeile .neben { color: var(--text-leise); font-size: 0.9375rem; }
.zustand { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: center; font-size: 0.9375rem; }
.zustand .schritt { color: var(--text-leise); overflow-wrap: anywhere; }
.zustand .status { font-weight: 600; }

/* LED (Spec 6.3): Licht, Farbe, Tiefe; Schein nur im Dunkeln (--glow). Immer aria-hidden,
 * immer mit Symbol und Wort daneben. Die Bestandsklassen .ampel, .warnmarke, .zaehlung,
 * .wahlknopf und .hinweis bekommen dieselbe LED ueber ::before. */
.led, .ampel::before, .warnmarke::before, .hinweis::before {
  --l: var(--led-aus); --ll: var(--led-aus); --lt: var(--led-aus); --ls: transparent;
  content: ""; display: inline-block; flex: none; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--ll) 0, var(--l) 55%, var(--lt) 100%);
  box-shadow: 0 0 0 1px var(--led-ring), 0 0 calc(var(--glow) * 8px) calc(var(--glow) * 1px) var(--ls);
}
.led.ok, .ampel.gruen::before, .hinweis.erfolg::before { --l: var(--led-ok); --ll: var(--led-ok-licht); --lt: var(--led-ok-tief); --ls: color-mix(in srgb, var(--led-ok) 55%, transparent); }
.led.warn, .ampel.gelb::before, .warnmarke::before, .hinweis.warnung::before { --l: var(--led-warn); --ll: var(--led-warn-licht); --lt: var(--led-warn-tief); --ls: color-mix(in srgb, var(--led-warn) 55%, transparent); }
.led.fehler, .ampel.rot::before, .hinweis.fehler::before { --l: var(--led-fehler); --ll: var(--led-fehler-licht); --lt: var(--led-fehler-tief); --ls: color-mix(in srgb, var(--led-fehler) 60%, transparent); }
.led.aktiv { --l: var(--led-aktiv); --ll: var(--led-aktiv-licht); --lt: var(--led-aktiv-tief); --ls: color-mix(in srgb, var(--led-aktiv) 75%, transparent); }
.led.aus, .ampel.leise::before, .hinweis:not(.erfolg, .warnung, .fehler)::before { box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.6), 0 0 0 1px var(--led-ring-aus); }
.led.klein { inline-size: 0.5rem; block-size: 0.5rem; }
.led.gross { inline-size: 0.75rem; block-size: 0.75rem; }
.led.balken { inline-size: 1.125rem; block-size: 0.1875rem; border-radius: var(--r-klein); }

/* Ampel: LED, Symbol und Wort, keine Pille mehr. */
.ampel {
  display: inline-flex; align-items: center; gap: var(--a-1);
  font-weight: 700; font-size: 0.875rem; white-space: nowrap;
}
.ampel::before { inline-size: 0.5rem; block-size: 0.5rem; margin-inline-end: 0.125rem; }
.ampel .zeichen { display: inline-grid; place-items: center; width: 1rem; height: 1rem; font-size: 0.75rem; }
.ampel.gruen { color: var(--erfolg); }
.ampel.gelb { color: var(--warnung); }
.ampel.rot { color: var(--gefahr); }
.ampel.leise { color: var(--text-leise); }

/* Unbesetzte Funktion: bis Stufe 1 (Problemzeile) ruhig als Label mit LED statt gelbem Kasten. */
.warnmarke {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--a-1);
  font-family: var(--font-label); font-weight: var(--label-gewicht); font-size: var(--t-label); letter-spacing: var(--label-sperrung);
  color: var(--warnung);
}
.warnmarke::before { inline-size: 0.5rem; block-size: 0.5rem; }

.aufgabezeile .meilenstein { color: var(--text-leise); }
.aufgabezeile.fertig .haupt { color: var(--text-leise); font-weight: 500; }

/* Klappe (Spec 7.16): eine Schienen-Zeile, rechts ein Chevron, der sich beim Oeffnen dreht. */
.klappe { margin: var(--a-5) 0 0; }
.klappe > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--a-2);
  min-height: 3rem; padding: var(--a-3);
  background: var(--e-schiene); border: 1px solid var(--e-schiene-rand); border-radius: var(--r-taste); box-shadow: var(--e-schiene-schatten);
  font-family: var(--font-text); font-size: var(--t-haupt); font-weight: 600; text-transform: none;
}
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::after {
  content: ""; margin-inline-start: auto; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--text-leise); border-bottom: 2px solid var(--text-leise);
  transform: translateY(-25%) rotate(45deg); transition: transform var(--dauer-mittel) var(--kurve-standard);
}
.klappe[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
.klappe[open] > summary { margin-bottom: var(--a-2); }
.klappe > summary:focus-visible { outline-offset: -3px; }

/* ---------- Gig-Detail, Zeitleiste, Gig-Tag (Schicht 2) ---------- */

.kopfdaten { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.eckdaten { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.eckdaten .ort { display: grid; align-content: center; min-width: 0; }
.eckdaten .ort .haupt { font-weight: 700; }
.eckdaten .ort .neben { color: var(--text-leise); font-size: 0.9375rem; }

/* Die Zeitleiste: oben der Balken (je Phase ein Segment, gefuellt nach Fortschritt),
 * darunter die Schritte. Das laute Element der Seite bleibt der Titel. */
.zeitleiste { display: grid; gap: 1.25rem; }
.zeitleiste .versionhinweis { margin: 0 0 var(--a-2); }
.phasenbalken { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.phasenbalken .segment { position: relative; height: 0.6rem; background: var(--flaeche-hoch); border-radius: 1px; overflow: hidden; }
.phasenbalken .segment .fuellung { position: absolute; inset: 0 auto 0 0; background: var(--text-leise); }
.phasenbalken .segment.fertig .fuellung { background: var(--erfolg); }
.phasenbalken .segment.rot { box-shadow: inset 0 -3px 0 var(--gefahr); }
.phasenbalken .segment.jetzt { outline: 2px solid var(--akzent); outline-offset: 1px; }
.phasenbalken .fuellung.s0 { width: 0%; }
.phasenbalken .fuellung.s1 { width: 10%; }
.phasenbalken .fuellung.s2 { width: 20%; }
.phasenbalken .fuellung.s3 { width: 30%; }
.phasenbalken .fuellung.s4 { width: 40%; }
.phasenbalken .fuellung.s5 { width: 50%; }
.phasenbalken .fuellung.s6 { width: 60%; }
.phasenbalken .fuellung.s7 { width: 70%; }
.phasenbalken .fuellung.s8 { width: 80%; }
.phasenbalken .fuellung.s9 { width: 90%; }
.phasenbalken .fuellung.s10 { width: 100%; }

.phase > summary h3 { font-family: var(--font-anzeige); font-weight: 400; text-transform: uppercase; font-size: 1.125rem; letter-spacing: 0.01em; margin: 0; display: inline; }
.phase > summary .zaehlung { margin: 0 0 0 0.6rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--text-leise); }
.klappe.phase { margin: 0; }
.zeitleiste { gap: var(--a-2); }
.schritte { list-style: none; margin: 0.4rem 0 0; padding: 0; border-left: 2px solid var(--linie); }
.schritte .schritt a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0 0.5rem; padding: 0.45rem 0.25rem 0.45rem 0; color: inherit; text-decoration: none; }
.schritte .schritt a:hover { background: var(--flaeche); }
.schritte .punkt { grid-row: 1 / span 2; justify-self: center; font-weight: 700; margin-left: -0.85rem; width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center; background: var(--hintergrund); border-radius: 999px; font-size: 0.8125rem; }
.schritte .was { font-weight: 600; overflow-wrap: anywhere; }
.schritte .wann { color: var(--text-leise); font-size: 0.875rem; }
.schritt.erledigt .punkt { color: var(--erfolg); }
.schritt.erledigt .was { color: var(--text-leise); font-weight: 500; }
.schritt.entfallen .was { color: var(--text-leise); text-decoration: line-through; font-weight: 400; }
.schritt.ueberfaellig .punkt, .schritt.ueberfaellig .wann { color: var(--gefahr); }
.schritt.blockiert .punkt { color: var(--text-leise); }
.schritte .heute, .stundenplan .jetzt {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.25rem -1px;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--akzent-text);
}
.schritte .heute::after, .stundenplan .jetzt::after { content: ""; flex: 1; height: 2px; background: var(--akzent); }
.schritte .heute span, .stundenplan .jetzt span { background: var(--platte); color: var(--auf-platte); padding: 0.1rem 0.45rem; border-left: 3px solid var(--akzent); }
/* Im Gig-Detail gehoert Flame dem Modul: die Heute-Linie ist leise (Spec 7.21). */
.schritte .heute-linie { color: var(--text-leise); }
.schritte .heute-linie::after { height: 1px; background: var(--text-leise); }
.schritte .heute-linie span { border-left-color: var(--text-leise); }

.team .zeile { grid-template-columns: minmax(8rem, auto) 1fr; }
.team .neben { grid-column: 2; grid-row: 1; color: var(--text); }
.team .tel { white-space: nowrap; }
.telefonliste a.zeile { min-height: 3rem; }
.telefonliste .rechts { color: var(--text); font-weight: 600; white-space: nowrap; }

.stundenplan { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.stundenplan .eintrag { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 1rem; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--linie); }
.stundenplan .zeit { grid-row: 1 / span 2; font-weight: 700; font-variant-numeric: tabular-nums; }
.stundenplan .vortag { display: block; font-size: 0.75rem; color: var(--text-leise); }
.stundenplan .was { font-weight: 600; }
.stundenplan .wer { color: var(--text-leise); font-size: 0.875rem; }

@media print {
  /* Papier ist hell, auch wenn der Bildschirm dunkel ist: die Farben neu setzen. */
  :root, :root[data-theme] {
    --hintergrund: #fff; --flaeche: #fff; --flaeche-hoch: #f2f2f2; --text: #000; --text-leise: #333;
    --linie: #999; --platte: #fff; --auf-platte: #000; --akzent-text: #000;
  }
  .navigation, .sichtbalken, .nicht-drucken, .knopfreihe { display: none !important; }
  body { background: #fff; color: #000; }
  .inhalt { max-width: none; padding: 0; }
  .titel { font-size: 2rem; }
  .stundenplan .zeit, .datumplatte, .zeitplatte { background: none; color: #000; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Bearbeiten (Schicht 3) und Gast ---------- */

fieldset.gruppe { border: 0; padding: 0; margin: var(--a-5) 0 0; min-width: 0; }
fieldset.gruppe > legend { min-width: 0; }
.unterfeld { border-left: 3px solid var(--linie); padding-left: 0.85rem; margin: 0 0 1rem; }
textarea.eingabe { min-height: 5rem; resize: vertical; }
select.eingabe { appearance: auto; }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: 0 0.75rem; align-items: start; }
/* Datumsfelder haben im Browser eine Mindestbreite; am kleinen Handy duerfen sie schmaler werden. */
.feldreihe > .feld { min-width: 0; }
.feldreihe .eingabe { min-width: 0; inline-size: 100%; }

.statusweg { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.statusweg li { font-size: 0.8125rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--text-leise); }
.statusweg li.durch { color: var(--text); }
.statusweg li.jetzt { background: var(--platte); color: var(--auf-platte); border-color: var(--akzent); font-weight: 700; }

.klappe.klein { margin: 0; border-bottom: 1px solid var(--e-schiene-trenner); }
.klappe.klein > summary, .zaehlung-klappe > summary { background: none; border: 0; box-shadow: none; padding: 0.4rem 0; min-height: 2.75rem; }
.klappe.klein > summary { font-size: 1rem; font-weight: 600; }
.klappe.klein > summary .leise { font-weight: 400; margin-left: 0.25rem; }
.klappe.klein > form { padding: 0 0 1rem 1.5rem; }

.vorlage-schritt { border-bottom: 1px solid var(--linie); }
.vorlage-schritt > summary { cursor: pointer; list-style: none; display: grid; gap: 0.1rem; padding: 0.6rem 0.25rem; min-height: 2.75rem; }
.vorlage-schritt > summary::-webkit-details-marker { display: none; }
.vorlage-schritt > summary .was { font-weight: 600; }
.vorlage-schritt > summary .wann { color: var(--text-leise); font-size: 0.875rem; }
.vorlage-schritt[open] { background: var(--flaeche); padding: 0 0.75rem 0.75rem; }

.gast .logo { width: 7rem; margin: 0 0 1rem -0.25rem; }
main.inhalt.gast { padding-bottom: 3rem; }

/* ---------- Termine und Verfuegbarkeit (Phase 1, Plan 2) ---------- */

.terminzeile .zustand .marke-mono { padding: 0.1rem 0.4rem; }
.terminzeile.abgesagt .haupt { text-decoration: line-through; color: var(--text-leise); font-weight: 500; }
/* .klein entfaellt (12-px-Minimum, Spec 6.7): gleiche Groesse wie die Marke. */
.marke-mono.klein { padding: 0.05rem 0.35rem; text-decoration: none; }
.marke-mono.art-gig { box-shadow: inset 2px 0 0 var(--text); }

.monatsnav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; }
.monatsnav .aktuell { font-weight: 700; text-align: center; }
.monatsnav .knopf.still { min-height: 2.75rem; white-space: nowrap; }
.legende { font-size: 0.875rem; margin: 0 0 0.75rem; }

/* Das Raster passt ohne waagrechtes Scrollen: feste Spalten, die Personen
 * teilen sich, was neben Tag und Zaehlung bleibt. */
.monat { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.monat th, .monat td { padding: 0; border-bottom: 1px solid var(--linie); text-align: center; vertical-align: middle; }
.monat thead th { font-size: 0.75rem; font-weight: 700; color: var(--text-leise); padding: 0.4rem 0; position: sticky; top: 0; background: var(--hintergrund); z-index: 1; }
.monat thead th.ich { color: var(--text); }
.monat abbr { text-decoration: none; }
.monat .tag { width: 4.5rem; text-align: left; padding: 0.3rem 0.25rem 0.3rem 0; }
.monat .anzahl { width: 3.5rem; }
.monat tbody .tag { display: grid; gap: 0.15rem; justify-items: start; font-weight: 700; font-size: 0.875rem; }
.monat tbody .tag .wt { font-weight: 600; font-size: 0.75rem; color: var(--text-leise); }
.monat tbody .marken { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.monat tr.wochenende { background: color-mix(in srgb, var(--flaeche) 55%, transparent); }
.monat tr.heute .tag { box-shadow: inset 3px 0 0 var(--text); padding-left: 0.4rem; }
.monat tr.heute .tag .wt { color: var(--text); }

.zelle { position: relative; display: grid; place-items: center; width: 100%; min-height: 2.75rem; font-weight: 700; font-size: 0.9375rem; }
.zelle.leise { color: var(--text-leise); opacity: 0.55; font-weight: 400; }
.zelle.gelb { color: var(--warnung); background: color-mix(in srgb, var(--warnung) 14%, transparent); }
.zelle.rot { color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 16%, transparent); }
button.zelle { appearance: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; background-color: var(--flaeche); color: inherit; }
button.zelle.leise { color: var(--text-leise); opacity: 1; }
button.zelle.gelb { color: var(--warnung); background-color: color-mix(in srgb, var(--warnung) 22%, var(--flaeche)); }
button.zelle.rot { color: var(--gefahr); background-color: color-mix(in srgb, var(--gefahr) 24%, var(--flaeche)); }
button.zelle:focus-visible { outline-offset: -3px; }
.notizpunkt { position: absolute; top: 0.3rem; right: 0.3rem; width: 0.3rem; height: 0.3rem; border-radius: 999px; background: currentColor; }

.zaehlung { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 700; font-size: 0.8125rem; white-space: nowrap; }
.zaehlung .zeichen { font-size: 0.75rem; }
.zaehlung.gruen { color: var(--erfolg); }
.zaehlung.rot { color: var(--gefahr); }
.quote { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Drei Knoepfe fuer eine Wahl (Verfuegbarkeit, Antwort): Schalterreihe in drei gleichen
 * Spalten; die gedrueckte Wahl leuchtet in ihrer Bedeutung (LED, Wort, Farbe). */
.wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--a-2) 0; }
.wahl > .wahlknopf { padding-inline: var(--a-2); font-size: 0.9375rem; }
.wahlknopf.gruen[aria-pressed="true"] { color: var(--erfolg); }
.wahlknopf.gelb[aria-pressed="true"] { color: var(--warnung); }
.wahlknopf.rot[aria-pressed="true"] { color: var(--gefahr); }
.wahl > .wahlknopf.gruen[aria-pressed="true"]::before { --l: var(--led-ok); --ll: var(--led-ok-licht); --lt: var(--led-ok-tief); --ls: color-mix(in srgb, var(--led-ok) 55%, transparent); }
.wahl > .wahlknopf.gelb[aria-pressed="true"]::before { --l: var(--led-warn); --ll: var(--led-warn-licht); --lt: var(--led-warn-tief); --ls: color-mix(in srgb, var(--led-warn) 55%, transparent); }
.wahl > .wahlknopf.rot[aria-pressed="true"]::before { --l: var(--led-fehler); --ll: var(--led-fehler-licht); --lt: var(--led-fehler-tief); --ls: color-mix(in srgb, var(--led-fehler) 60%, transparent); }

.optionen > li.option { padding: 0.75rem 0.25rem; }
.optionkopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1rem; align-items: start; }
.optionkopf .koerper { display: grid; gap: 0.15rem; min-width: 0; }
.optionkopf .haupt { font-weight: 700; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.klappe.zaehlung-klappe { border-bottom: 0; }
.zaehlung-klappe > summary { font-weight: 500; color: var(--text-leise); padding: 0.2rem 0; min-height: 2.75rem; }
.zaehlung-klappe .namen { margin: 0.25rem 0 0.5rem; font-size: 0.9375rem; }

/* Formulare fuer Termine und Umfragen (Schicht 3) */
.schalter { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-weight: 600; cursor: pointer; }
.schalter input { accent-color: var(--akzent); width: 1.25rem; height: 1.25rem; }
.unterfeld.auswahl { margin-top: 0.5rem; }
.optionzeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.optionzeile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 0 0.5rem; align-items: end; }
.optionzeile .feld { margin-bottom: 0.5rem; }
.optionzeile .knopf { margin-bottom: 0.5rem; }
.knopf.abschliessen { width: 100%; margin-top: 0.25rem; }

/* ---------- Aufgaben, Projekte, Cockpit (Phase 1, Plan 3) ---------- */


.weiter-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.75rem 0 0; }
.weiter-links a { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 600; }

/* Zeile mit Abhaken: der Link fuellt, der runde Knopf steht rechts. */
.liste > li.mit-knopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 0.5rem; }
.abhaken {
  appearance: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: 0.25rem;
  border: 2px solid var(--rahmen-eingabe); border-radius: 999px; background: transparent; color: var(--text-leise);
  font: inherit; font-weight: 700; cursor: pointer;
}
.abhaken:hover { border-color: var(--erfolg); color: var(--erfolg); }
.erledigt-meldung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.6rem 0.25rem; color: var(--erfolg); font-weight: 600; }

/* Fortschritt eines Projekts: Balken und Zahl (die Zahl traegt die Information, der Balken zeigt sie). */
.fortschritt-zeile { display: flex; align-items: center; gap: 0.6rem; }
/* Fortschritt als LED-Meter (Spec 7.20): Segmente nur per CSS, das Markup bleibt. */
.fortschritt { flex: none; width: 7rem; height: 0.5rem; border-radius: var(--r-klein); overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--e-schiene-trenner) 0 6px, transparent 6px 8px); }
.fortschritt > span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--text-leise) 0 6px, transparent 6px 8px); }
.fortschritt > .f0 { width: 0%; }
.fortschritt > .f1 { width: 10%; }
.fortschritt > .f2 { width: 20%; }
.fortschritt > .f3 { width: 30%; }
.fortschritt > .f4 { width: 40%; }
.fortschritt > .f5 { width: 50%; }
.fortschritt > .f6 { width: 60%; }
.fortschritt > .f7 { width: 70%; }
.fortschritt > .f8 { width: 80%; }
.fortschritt > .f9 { width: 90%; }
.fortschritt > .f10 { width: 100%; }
.fortschritt-zahl { font-family: var(--font-zahl); font-weight: var(--zahl-gewicht); font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.projektzeile .zustand { margin-top: 0.15rem; }

@media (max-width: 899px) {
  .navigation a.nur-breit { display: none; }
}
@media (min-width: 900px) {
  .profiltaste, .zurueck.nur-handy { display: none !important; }
}

/* ---------- CRM: Anfragen, Kontakte, Fristen-Radar (Phase 1, Plan 4) ---------- */

.weiter-links.oben { margin: 0 0 0.5rem; }
/* Suchfeld (Spec 7.13): Platz links fuer die Lupe (sym("lupe")). */
.suchfeld { position: relative; margin: 0 0 0.75rem; max-width: 32rem; }
.suchfeld > .sym { position: absolute; left: var(--a-3); top: 50%; transform: translateY(-50%); color: var(--text-leise); pointer-events: none; }
.suchfeld > .sym ~ .eingabe { padding-inline-start: 2.5rem; }

.zeile .rechts.leise { color: var(--text-leise); }
.fristzeile .zustand { margin-top: 0.15rem; }
.kopfdaten .pipeline { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; margin: 0.5rem 0 0; font-weight: 600; }
.zeile.person { grid-template-columns: minmax(0, 1fr) auto; }
.zeile.person .neben a[href^="tel:"] { white-space: nowrap; }
.zeile.person .neben a { overflow-wrap: anywhere; }
.nachricht { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 4px solid var(--linie); background: var(--flaeche); white-space: pre-line; overflow-wrap: anywhere; }

/* Verlauf: eine ruhige Zeitleiste, neueste oben; Eintraege der App leiser. */
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf .eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.75rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--linie); }
.verlauf .wann { color: var(--text-leise); font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.verlauf .kopf { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: center; }
.verlauf .richtung { font-size: 0.875rem; font-weight: 600; }
.verlauf .was { grid-column: 2; margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.verlauf .wer { grid-column: 2; color: var(--text-leise); font-size: 0.875rem; }
.verlauf .system .was { color: var(--text-leise); }
.zeilen-aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.pillengruppe { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.pillengruppe > legend { font-weight: 600; margin-bottom: 0.35rem; padding: 0; }
.schnellwahl { margin: -0.5rem 0 1rem; }
/* Kleine Wahl-Knoepfe in einer Zeile (Status einer Frist, Follow-up-Schnellwahl). */
.pille {
  appearance: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--a-3); margin-bottom: var(--e-taste-sockel-hoehe);
  border: 1px solid var(--e-taste-rand); border-radius: var(--r);
  background: linear-gradient(180deg, var(--e-taste-oben), var(--e-taste-unten)); box-shadow: var(--e-taste-schatten); color: var(--text);
  font: inherit; font-size: var(--t-knopf-klein); font-weight: 600; cursor: pointer;
}
.pille:active { transform: translateY(var(--e-taste-weg)); box-shadow: var(--e-taste-gedrueckt); }
.fristzeile a.haupt { color: inherit; text-decoration: none; }
.fristzeile a.haupt:hover { text-decoration: underline; }
.zeile.person .klappe { grid-column: 1 / -1; }

.datumplatte.kennung { min-width: 3.75rem; }
.datumplatte.kennung .datum { font-size: 0.9375rem; letter-spacing: 0.04em; }
.versionhinweis .hinweis { margin-bottom: 0.25rem; }
.unterschied h3 { font-size: 1rem; margin: 0.75rem 0 0.35rem; }

/* ---------- Hinweise und Leerzustaende ---------- */

/* Leerzustaende sind leise: laut ist nur der Seitentitel. */
.leer { padding: 0.25rem 0 0.25rem; }
.leer .satz { font-weight: 600; color: var(--text); margin: 0; }
.leer .unter { color: var(--text-leise); margin: 0.15rem 0 0; font-size: 0.9375rem; }

/* Hinweis (Spec 7.15): ruhige Nachricht in der Schiene, LED der Art vorne. */
.hinweis {
  display: flex; gap: var(--a-2); align-items: flex-start;
  background: var(--e-schiene); border: 1px solid var(--e-schiene-rand); box-shadow: var(--e-schiene-schatten);
  padding: var(--a-3) var(--a-4);
  margin: var(--a-4) 0;
  border-radius: var(--r);
}
.hinweis::before { margin-top: 0.4rem; }
.hinweis .symbol { font-weight: 700; }
.hinweis p { margin: 0; }
.hinweis .knopf { margin-top: 0.75rem; }

.ladend { color: var(--text-leise); padding: 2rem 0; }

/* ---------- Anmeldung ---------- */

.buehne {
  overflow-x: clip;
  min-height: 100dvh;
  display: grid; align-content: center; justify-items: start;
  max-width: 28rem; margin: 0 auto; padding: 2rem 1.25rem;
}
.buehne .logo { width: min(12rem, 55vw); margin: 0 0 1.5rem -0.5rem; }
.buehne .claim { font-family: var(--font-anzeige); text-transform: uppercase; font-size: clamp(2.25rem, 10vw, 3.25rem); line-height: 0.95; margin: 0 0 2rem; }
.buehne form { width: 100%; }
.trenner { display: flex; align-items: center; gap: 0.75rem; color: var(--text-leise); margin: 1.5rem 0; width: 100%; font-size: 0.875rem; }
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

/* ---------- Bewegung ---------- */

/* Der Stempel der Marke (112 % -> 100 %), nur fuer den Seitentitel. */
@keyframes stempel { from { transform: scale(1.12); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Nur so breit wie der Text: ein voller Titelblock ragte beim Stempel kurz ueber den Rand (360 px). */
.titel.stempel { animation: stempel 0.12s ease-out both; transform-origin: left bottom; inline-size: fit-content; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Pult: Modul (Spec 7.8) ---------- */

/* Erhabenes Panel fuer das eine laute Ding (Gig-Pult, Dialog). Das Korn liegt
 * nur hier, als feines Rauschen ueber der Flaeche; aus im Hellen und im Druck. */
.modul {
  position: relative;
  padding: var(--a-4);
  background: linear-gradient(180deg, var(--e-modul-oben), var(--e-modul-unten));
  border: 1px solid var(--e-modul-rand);
  border-radius: var(--r-modul);
  box-shadow: var(--e-modul-schatten);
}
.modul::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: var(--korn-staerke); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-transparency: reduce) {
  .modul::after { display: none; }
}

/* ---------- Pult: Display (Spec 6.4), fuer Plan D2 ---------- */

/* Das eine leuchtende Anzeigefeld; nur Display-Tokens, in beiden Themen gleich. */
.display {
  display: grid; gap: var(--a-1); padding: var(--a-3) var(--a-3) var(--a-2);
  background: var(--e-display); border-radius: var(--r-taste); box-shadow: var(--e-display-schatten);
  color: var(--display-text); text-shadow: var(--display-glow);
  font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums;
}
.display .zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--a-3); min-height: 0; padding: 0; }
.display .gross { font-size: var(--t-display); line-height: 1; letter-spacing: -0.02em; }
.display .einheit { font-size: var(--t-label-platte); letter-spacing: 0.1em; text-transform: uppercase; }
.display .leise { color: var(--display-leise); }
.display.ruhig { color: var(--display-hell); text-shadow: none; }
.display.warn { color: var(--display-warn); text-shadow: none; }
.display.fehler { color: var(--display-fehler); text-shadow: none; }

/* ---------- Pult: LED-Kette, Tasten, Meldestreifen, Mehr (Spec 7.2–7.5, 7.23) ---------- */

.ledkette { display: flex; gap: var(--a-1); list-style: none; margin: var(--a-3) 0 0; padding: 0; }
.ledkette .glied {
  flex: 1 1 0; block-size: 0.75rem; border-radius: var(--r-klein);
  background: var(--led-aus); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.6), 0 0 0 1px var(--led-ring-aus);
}
.ledkette .glied.ok { background: radial-gradient(circle at 50% 35%, var(--led-ok-licht), var(--led-ok) 60%, var(--led-ok-tief)); box-shadow: 0 0 6px color-mix(in srgb, var(--led-ok) 45%, transparent); }
.ledkette .glied.aktiv { background: radial-gradient(circle at 50% 35%, var(--led-aktiv-licht), var(--led-aktiv) 60%, var(--led-aktiv-tief)); box-shadow: 0 0 8px color-mix(in srgb, var(--led-aktiv) 70%, transparent); }
.ledkette .glied.fehler { background: radial-gradient(circle at 50% 35%, var(--led-fehler-licht), var(--led-fehler) 60%, var(--led-fehler-tief)); box-shadow: 0 0 8px color-mix(in srgb, var(--led-fehler) 60%, transparent); }
@media (min-width: 900px) { .ledkette .glied { block-size: 0.875rem; } }

.display-feld { margin: var(--a-3) 0 0; }
.nw { white-space: nowrap; }

.tasten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-2); margin: var(--a-3) 0 0; }
.taste {
  display: grid; align-content: center; gap: 0.125rem; min-height: 3.5rem; padding: var(--a-2);
  border: 1px solid var(--e-taste-rand); border-radius: var(--r-taste);
  background: linear-gradient(180deg, var(--e-taste-oben), var(--e-taste-unten)); box-shadow: var(--e-taste-schatten);
  color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
}
.taste .wert { font-family: var(--font-zahl); font-size: var(--t-kennzahl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.taste .wert .einheit, .taste .name { font-family: var(--font-label); font-weight: var(--label-gewicht); font-size: var(--t-label); letter-spacing: var(--label-sperrung); text-transform: uppercase; }
.taste .name { color: var(--text-leise); }
.taste:active { transform: translateY(var(--e-taste-weg)); box-shadow: var(--e-taste-gedrueckt); }
.taste.flach { background: var(--e-schiene); box-shadow: none; border-color: var(--e-schiene-trenner); cursor: default; }
.taste.flach:active { transform: none; }
@media (hover: hover) { .taste:not(.flach):hover { filter: brightness(1.08); } }

.meldungen { display: grid; gap: var(--a-2); margin: var(--a-3) 0 0; }
.meldung {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--a-3);
  min-height: 3.5rem; padding: var(--a-2) var(--a-3);
  background: var(--e-schiene); border: 1px solid var(--e-schiene-trenner); border-radius: var(--r);
  color: var(--text); text-decoration: none;
}
.meldung .koerper { display: grid; gap: 0.125rem; min-width: 0; }
.meldung .kopfzeile { font-family: var(--font-label); font-weight: var(--label-gewicht); font-size: var(--t-label); letter-spacing: var(--label-sperrung); text-transform: uppercase; }
.meldung.fehler .kopfzeile { color: var(--gefahr); }
.meldung.warn .kopfzeile { color: var(--warnung); }
.meldung .text { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.meldung > .sym { color: var(--text-leise); }
.meldung:focus-visible { outline-offset: -3px; }
.meldung:active { background: var(--e-schiene-druck); }
@media (hover: hover) { .meldung:hover { background: var(--e-schiene-hover); } }
.meldungen-mehr { margin: 0; }
.meldungen-mehr[open] { display: grid; gap: var(--a-2); }

details.mehr { margin: var(--a-3) 0 0; }
details.mehr > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--a-1); }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr[open] > summary .sym { transform: rotate(180deg); }
details.mehr > .liste { margin-top: var(--a-2); }
details.mehr .liste a, details.mehr .liste button { display: flex; align-items: center; min-height: 3rem; padding: 0 var(--a-3); width: 100%; color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
@media print { .meldungen, .tasten, details.mehr { display: none; } }

/* ---------- Pult: Sonderfaelle (Spec 6.12) ---------- */

@media (forced-colors: active) {
  .led, .ampel::before, .warnmarke::before, .hinweis::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; border: 1px solid CanvasText; }
  .led.aus, .ampel.leise::before { background: Canvas; }
  .liste, .modul, .knopf, .display, .navigation, .schalter-reihe, .umschalter, .pillen, .auswahl, .wahl { border: 1px solid CanvasText; box-shadow: none; }
  .display { text-shadow: none; }
  :is(.schalter-reihe, .umschalter, .pillen) > [aria-current="page"], :is(.schalter-reihe, .wahl) > [aria-pressed="true"], .auswahl label:has(:checked),
  .navigation [aria-current="page"] { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; }
}
@media print {
  :root, :root[data-theme] { --display-text: #000; --display-leise: #333; --display-hell: #000; --e-display: #fff; --display-glow: none; --e-grund: #fff; --e-grund-oben: #fff; --e-grund-buerste: none; }
  .modul, .liste, .knopf, .display, .datumplatte, .zeitplatte, .hinweis { box-shadow: none !important; background: #fff !important; border: 1px solid #999; }
  .modul::after { display: none; }
  .abschnitt > h2, h2.rubrik, fieldset.gruppe > legend { background: none; color: #000; padding: 0; }
}

/* ---------- Pult: Symbole (Spec 7.0b) ---------- */

.sym { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em; }
.sym.m { width: 1rem; height: 1rem; }
.sym.l { width: 1.375rem; height: 1.375rem; }
.ampel .sym { width: 0.9em; height: 0.9em; }
.hinweis > .sym { margin-top: 0.2rem; }
.schritte .punkt .sym { width: 0.85rem; height: 0.85rem; }
.meilenstein .sym { width: 0.8em; height: 0.8em; }
.verlauf .richtung { display: inline-flex; align-items: center; gap: var(--a-1); }

/* ---------- Pult: Seitenkopf und Profil-Taste (Spec 7.17) ---------- */

/* Schicht 2 und 3: fester Rueckweg ueber dem Titel. */
.seitenkopf { display: grid; gap: var(--a-1); margin: 0 0 var(--a-4); }
.seitenkopf .titel { margin: 0; }
.zurueck {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--a-1);
  min-height: 2.75rem; padding-inline-end: var(--a-2);
  color: var(--text-leise); text-decoration: none;
  font-family: var(--font-label); font-weight: var(--label-gewicht); font-size: var(--t-label); letter-spacing: var(--label-sperrung); text-transform: uppercase;
}
@media (hover: hover) {
  .zurueck:hover { color: var(--text); }
}
.zurueck span { overflow-wrap: anywhere; }

/* Schicht 1 am Handy: Profil als Taste oben rechts (Initialen). */
.inhalt { position: relative; overflow-x: clip; }
.profiltaste {
  position: absolute; top: max(var(--a-4), env(safe-area-inset-top)); right: var(--a-4);
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border: 1px solid var(--e-taste-rand); border-radius: var(--r);
  background: linear-gradient(180deg, var(--e-taste-oben), var(--e-taste-unten)); box-shadow: var(--e-taste-schatten);
  color: var(--text); text-decoration: none;
  font-family: var(--font-label); font-weight: var(--label-gewicht); font-size: var(--t-label); letter-spacing: var(--label-sperrung);
}
.profiltaste:active { transform: translateY(var(--e-taste-weg)); box-shadow: var(--e-taste-gedrueckt); }
/* Der Titel laeuft nicht unter die Profil-Taste. */
.profiltaste ~ .titel, .profiltaste ~ .seitenkopf { padding-inline-end: 3.5rem; }

/* ---------- Pult: Gig-Detail (Spec 8.3, 7.22, 7.24) ---------- */

.seitenkopf.ohne-titel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.seitenkopf.ohne-titel .knopf { margin-bottom: 0; }
.modul.gig .modul-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a-2); min-height: 2.75rem; }
.modul .status-taste { display: inline-flex; align-items: center; gap: var(--a-1); }
.modul .status-wort { font-family: var(--font-label); font-weight: var(--label-gewicht); font-size: var(--t-label); letter-spacing: var(--label-sperrung); text-transform: uppercase; color: var(--text-leise); }
.modul-titel { font-family: var(--font-anzeige); font-weight: 400; text-transform: uppercase; font-size: var(--t-modul); line-height: 1; letter-spacing: -0.01em; margin: var(--a-2) 0 var(--a-1); overflow-wrap: anywhere; }
h1.modul-titel:focus { outline: none; }
.info-zeile { margin: 0; font-family: var(--font-label); font-weight: var(--label-gewicht); font-size: var(--t-label); letter-spacing: var(--label-sperrung); color: var(--text-leise); }
.modul .pipeline { margin: var(--a-3) 0 0; }
.hauptaktion { margin: var(--a-4) 0; }
.hauptaktion .knopf { inline-size: 100%; justify-content: center; }
h2[tabindex="-1"]:focus { outline: none; }

.team .frei { color: var(--warnung); }
.zeile.mit-tasten { grid-template-columns: minmax(0, 1fr) auto; }
.zeile.mit-tasten > .haupt, .zeile.mit-tasten > .neben { grid-column: 1; }
.zeile.mit-tasten > .rechts { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; gap: var(--a-1); }
.zeile.mit-tasten .knopf.klein { min-width: 2.75rem; padding: 0; justify-content: center; margin-bottom: 0; }
/* Team: eine Zeile je Funktion (Funktion, Person, Anruf-Taste), damit die Seite kurz bleibt. */
.team .zeile.mit-tasten { grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr) auto; align-items: center; }
.team .zeile.mit-tasten > .haupt { grid-column: 1; grid-row: 1; }
.team .zeile.mit-tasten > .neben { grid-column: 2; grid-row: 1; color: var(--text); }
.team .zeile.mit-tasten > .rechts { grid-column: 3; grid-row: 1; }
.zeitleiste .weitere { margin: var(--a-1) 0 0; }
.deal > p { margin: 0; padding: 0 var(--a-3) var(--a-3); }
details.mehr .liste .gefahr { color: var(--gefahr); }

@media (min-width: 1100px) {
  .pult-raster { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--a-6); align-items: start; }
}
.pult-rechts > .abschnitt:first-child, .pult-links > .abschnitt:first-child { margin-top: 0; }
/* Heute am Handy: die rechte Spalte folgt unter „Meine Aufgaben“ und braucht Abstand. */
@media (max-width: 1099px) { .heute-inhalt .pult-rechts { margin-top: var(--a-5); } }

/* Dialog (Spec 7.22): unten angedockt am Handy, mittig am Desktop. */
dialog.rueckfrage {
  margin: auto auto 0; inline-size: 100%; max-inline-size: none; max-block-size: 85dvh; overflow: auto;
  border-radius: var(--r-modul) var(--r-modul) 0 0; padding: var(--a-4) var(--a-4) max(var(--a-4), env(safe-area-inset-bottom));
  color: var(--text);
}
dialog.rueckfrage::backdrop { background: rgb(0 0 0 / 0.6); }
dialog.rueckfrage h2 { font-family: var(--font-anzeige); font-weight: 400; text-transform: uppercase; font-size: 1.375rem; margin: 0 0 var(--a-3); }
dialog.rueckfrage .knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-3); }
dialog.rueckfrage .knoepfe.spalte { flex-direction: column; }
dialog.rueckfrage .knoepfe.spalte .knopf { inline-size: 100%; justify-content: flex-start; }
dialog.rueckfrage [aria-pressed="true"] { border-color: var(--rahmen-eingabe); }
@media (min-width: 900px) {
  dialog.rueckfrage { margin: auto; max-inline-size: 28rem; border-radius: var(--r-modul); }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.rueckfrage[open] { animation: einfahren 0.28s ease-out; }
  @keyframes einfahren { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media print { .seitenkopf.ohne-titel .knopf, .hauptaktion { display: none; } }

/* ---------- Pult: Heute (Spec 8.2) ---------- */

a.modul { display: block; color: var(--text); text-decoration: none; }
a.modul:active { transform: translateY(1px); }
@media (hover: hover) { a.modul:hover { filter: brightness(1.06); } }
a.modul:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.modul .modul-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a-2); }
.modul .modul-label { font-family: var(--font-label); font-weight: var(--label-gewicht); font-size: var(--t-label); letter-spacing: var(--label-sperrung); color: var(--text-leise); }
.modul span.modul-titel, .modul a.modul-titel, .modul p.modul-titel { display: block; }
.modul a.modul-titel { color: var(--text); text-decoration: none; }
.modul .info-zeile { display: block; }
.modul .rollenzeile { display: block; margin: var(--a-3) 0 0; font-size: 0.875rem; color: var(--text); }
.modul.gig-tag .knopf.haupt { inline-size: 100%; justify-content: center; margin-top: var(--a-3); }
.leer-modul .modul-titel { margin-bottom: var(--a-2); }
.offline { display: inline-block; margin: 0 0 var(--a-3); padding: 0.125rem var(--a-2); border-radius: var(--r-klein);
  background: var(--e-display); color: var(--display-warn); font-family: var(--font-mono); font-weight: 700; font-size: var(--t-label-platte); letter-spacing: 0.1em; }
.modul.platzhalter { min-height: 18.75rem; }
.liste.platzhalter { min-height: 3rem; margin-top: var(--a-4); }
.liste.platzhalter li { block-size: 3rem; background: linear-gradient(90deg, var(--e-schiene-trenner) 0 60%, transparent 60%) no-repeat var(--a-3) 50% / 60% 0.5rem; }
.band-crew { margin-top: var(--a-5); }

/* ---------- Pruefung Block B ---------- */

/* Detailseiten mit Pult-Raster sind breiter (Spec 7.24: Details 72rem). */
@media (min-width: 1100px) { .inhalt:has(.pult-raster) { max-width: 72rem; } }
/* Das Display misst sich selbst: lange Woerter (DATUM OFFEN, ANGESCHRIEBEN) werden kleiner statt abgeschnitten. */
.display { container-type: inline-size; }
.display .gross { font-size: min(var(--t-display), 22cqi); }
.display .gross.lang { font-size: min(var(--t-display), 11.5cqi); }
/* Dialog bleibt im Bild, auch weit unten geoeffnet (.modul setzt sonst position: relative). */
dialog.rueckfrage { position: fixed; }
/* LED und Symbol im Schritt nebeneinander */
.schritte .punkt { width: auto; min-width: 1.5rem; padding: 0 0.25rem; grid-auto-flow: column; gap: 0.2rem; }
button.meldung { inline-size: 100%; font: inherit; text-align: left; cursor: pointer; }

/* ---------- Pult: Gig-Zeile mit Problemzeile (Spec 7.7, 8.4) ---------- */

a.gigzeile.zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 var(--a-3); }
a.gigzeile.zeile .koerper { display: grid; min-width: 0; }
a.gigzeile.zeile .haupt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.gigzeile.zeile .neben { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .problem { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-neben); font-weight: 600; }
.zeile .problem.fehler { color: var(--gefahr); }
.zeile .problem.warn { color: var(--warnung); }
.zeile .problem .sym { vertical-align: -0.15em; }
a.gigzeile.zeile > .rechts { display: flex; align-items: center; grid-column: 3; grid-row: 1; justify-content: flex-end; }
nav.schalter-reihe[aria-label="Booking"] { margin: var(--a-3) 0 0; }
nav.schalter-reihe .zahl { color: var(--warnung); font-family: var(--font-label); font-weight: var(--label-gewicht); }
/* Hoechstens drei Textzeilen und 88 px (Spec 7.7). */
a.gigzeile.zeile { padding-block: var(--a-2); }
a.gigzeile.zeile .koerper { line-height: 1.3; gap: 0.0625rem; }
/* Mit Problemzeile hat der Titel eine Zeile: hoechstens drei Textzeilen, 88 px. */
a.gigzeile.zeile .koerper:has(.problem) .haupt { -webkit-line-clamp: 1; }

/* ---------- Pult: Gig-Tag (Spec 8.5) ---------- */

.modul.klein { padding: var(--a-3); }
.gigtag-modul .modul-titel { margin-top: 0; }
.seitenkopf .offline { margin: 0; }
.telefonliste .zeile.mit-tasten .neben { font-variant-numeric: tabular-nums; }
.ohne-nummer { margin: var(--a-2) 0 0; }
@media print { .gigtag-modul { border: 0; padding: 0; } }

/* ---------- Pult: Aufgaben (Spec 8.5) ---------- */

.liste.weiter { margin-top: var(--a-6); }
.erledigt-meldung { display: flex; align-items: center; gap: var(--a-2); flex-wrap: wrap; padding: var(--a-2) var(--a-3); }

/* ---------- Pult: Aufgabe (Spec 8.5) ---------- */

.seitenkopf-zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--a-2); }
.seitenkopf-zeile .knopf { margin-bottom: 0; }
.schalter-reihe.stand { margin: var(--a-4) 0 0; }
.schalter-reihe.stand button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--a-1); min-height: 2.75rem; }
.aufgabe-status .hauptaktion .knopf { inline-size: 100%; justify-content: center; }

/* Pruefung Block A (Stufe 2): Telefonzeilen ohne Navigations-Pfeil; im Druck keine eingefrorene Uhr. */
.telefonliste a.zeile::after { display: none; }
@media print { .stundenplan .jetzt-linie, .gigtag-modul .display-feld { display: none; } }

/* ---------- Pult: Cockpit (Spec 8.5) ---------- */

@media (min-width: 1100px) {
  /* Spalten statt Raster: kurze Abschnitte fuellen auf, kein leeres Feld neben einem langen. */
  .inhalt:has(.cockpit-raster) { max-width: 72rem; }
  .cockpit-raster { columns: 2; column-gap: var(--a-6); }
  .cockpit-raster > .abschnitt { break-inside: avoid; margin-top: 0; padding-top: var(--a-5); }
}

/* ---------- Pult: Formulare (Spec 7.12) ---------- */

.fehlerliste { list-style: none; margin: var(--a-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-3); }
.fehlerliste .knopf.still { min-height: 2.75rem; padding: 0; margin: 0; }
.feld .fehler .sym { vertical-align: -0.15em; }

/* ---------- Pult: Aktionsleiste (Spec 7.19) ---------- */

.aktionsleiste {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: var(--a-3);
  margin: var(--a-5) calc(-1 * var(--a-4)) 0; padding: var(--a-2) var(--a-4) max(var(--a-2), env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--e-modul-oben), var(--e-modul-unten));
  border-top: 1px solid var(--e-modul-rand); box-shadow: 0 -8px 16px rgb(0 0 0 / 0.25);
}
.aktionsleiste .knopf { margin-bottom: 0; }
.aktionsleiste .knopf.haupt { flex: 0 1 auto; }
@media (max-width: 899px) {
  .rahmen.schicht-3 .navigation { display: none; }
  .rahmen.schicht-3 .inhalt { padding-bottom: 0; }
}
@media (min-width: 900px) { .aktionsleiste { margin-inline: 0; border-radius: var(--r-modul) var(--r-modul) 0 0; } }
@media print { .aktionsleiste { display: none; } }

/* ---------- Pult: Songs (Spec 8.5, 7.13) ---------- */

.songs-suche { margin-top: var(--a-3); }
.songzeile .rechts { display: flex; align-items: center; gap: var(--a-2); }
.songzeile .dauer, .song-eintrag .dauer { font-family: var(--font-zahl); font-variant-numeric: tabular-nums; }
.zustandswort { display: inline-flex; align-items: center; gap: var(--a-1); white-space: nowrap; }
.zustandswort.warn { color: var(--warnung); }

/* ---------- Pult: Song, Setlist, Abstimmung (Spec 8.5) ---------- */

.setlist-songs { counter-reset: none; padding: 0; }
.song-eintrag { grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; }
.song-eintrag .nr { grid-column: 1; grid-row: 1; font-family: var(--font-zahl); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.song-eintrag .haupt { grid-column: 2; grid-row: 1; font-size: var(--t-song); }
.song-eintrag .rechts { grid-column: 3; grid-row: 1; white-space: nowrap; color: var(--text-leise); }
.setlist-modul .display-feld { margin-top: var(--a-2); }
.abstimmung-song .stand { font-size: var(--t-neben); color: var(--text-leise); white-space: nowrap; }
.abstimmung-song .schalter-reihe.stimme { margin: 0 var(--a-3) var(--a-3); }
.abstimmung-song .schalter-reihe.stimme button { flex: 1 1 0; min-height: 2.75rem; }

/* Buehnen-Setlist: immer hell, A4 hoch, ohne Navigation (Spec 8.5 „Setlist-Druck“). */
.druckblatt { background: #fff; color: #000; min-height: 100vh; padding: 1.5rem; max-width: 52rem; margin: 0 auto; }
.druckblatt .druck-knoepfe { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.druckblatt header .band { margin: 0; font-family: var(--font-anzeige); font-size: 1rem; letter-spacing: 0.08em; }
.druckblatt header h1 { margin: 0.25rem 0 1.5rem; font-family: var(--font-text); font-size: 1rem; font-weight: 600; }
.druck-songs { list-style: none; margin: 0; padding: 0; }
.druck-songs .song { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem; padding: 0.1rem 0; break-inside: avoid; }
.druck-songs .nr { font-family: var(--font-mono); font-size: 1rem; color: #444; }
/* Eigene Klassen: .titel und .trenner sind schon vergeben (Seitentitel, Anmelde-Trenner). */
.druck-songs .druck-titel { margin: 0; font-family: var(--font-anzeige); font-size: 2.375rem; line-height: 1.05; text-transform: uppercase; hyphens: manual; overflow-wrap: normal; }
.druck-songs .tonart { font-family: var(--font-mono); font-size: 0.875rem; }
.druck-songs .druck-balken { margin: 0.75rem 0; padding: 0.35rem 0.75rem; background: #000; color: #fff; font-family: var(--font-anzeige); font-size: 1.5rem; letter-spacing: 0.06em; break-after: avoid; }
/* Das Blatt steht allein: ganze Breite, immer hell (Spec 10.4). */
#app:has(> .druckblatt) { display: block; }
html:has(.druckblatt), body:has(.druckblatt) { background: #fff !important; color-scheme: light; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .druckblatt { padding: 0; min-height: 0; }
  .druckblatt .druck-knoepfe { display: none; }
  .druck-songs .druck-balken { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.info-zeile.gross { text-transform: uppercase; }

/* ---------- Pult: Setlist-Editor (Spec 8.5) ---------- */

.editor-liste { padding: 0; }
.editor-liste > li { display: flex; align-items: center; justify-content: space-between; gap: var(--a-2); padding: var(--a-2) var(--a-3); border-bottom: 1px solid var(--e-schiene-trenner); }
.editor-liste > li:last-child { border-bottom: 0; }
.editor-liste .haupt { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.editor-liste .dauer { font-family: var(--font-zahl); color: var(--text-leise); font-weight: 400; }
.editor-liste .streifen { background: var(--platte); color: var(--auf-platte); padding: 0.125rem var(--a-2); font-family: var(--font-label); font-weight: var(--label-gewicht); letter-spacing: var(--label-sperrung); }
.tasten-klein { display: flex; gap: var(--a-1); flex: none; }
.tasten-klein .knopf.klein { min-width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0; justify-content: center; }
.treffer button.zeile { inline-size: 100%; background: none; border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.trenner-frei { display: flex; gap: var(--a-2); margin-top: var(--a-2); }
.trenner-frei .eingabe { flex: 1; min-width: 0; }
.song-links .neben { overflow-wrap: anywhere; }

/* ---------- Pult: Termine (Spec 8.5) ---------- */

.marke-mono.vorne { background: linear-gradient(180deg, var(--haupt-oben), var(--haupt-unten)); color: var(--auf-haupt); }

/* ---------- Pult: Kontakt (Spec 8.5) ---------- */

.zeile.person.mit-tasten > .neben ~ .neben, .zeile.person.mit-tasten > .klappe { grid-column: 1 / -1; }

/* Verfuegbarkeit: verfuegbar als stiller Punkt mit 3:1-Ring (Spec 10.4) */
.punkt-still { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; border: 1.5px solid var(--text-leise); }
.zelle .led + .sym { margin-inline-start: 0.15rem; }
.zelle:has(.led) { display: flex; justify-content: center; align-items: center; }