/* ===========================================================================
   Event Soundpad — Broadcast Control Surface
   Neutraler Blackmagic-/DaVinci-naher Look. Dark-only.
   Akzentfarbe als Variable (--accent) für späteres Branding.
   ========================================================================= */

@font-face {
  font-family: "Barlow SC";
  src: url("../assets/fonts/barlow-sc-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("../assets/fonts/barlow-sc-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow SC";
  src: url("../assets/fonts/barlow-sc-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Flächen: eine Rampe von tief nach hoch ---- */
  --bg-deep:   #08090b;
  --sunk-2:    #060708;   /* tiefste Wanne: VU, Waveform, Stream-Deck-Taste */
  --sunk:      #0b0d10;   /* Wanne: Uhr, Eingabefelder, Timer-Leiste        */
  --bezel-2:   #101216;
  --bezel:     #17191d;
  --key:       #1b1e23;
  --panel:     #1a1d22;
  --panel-2:   #21252b;
  --key-2:     #23272e;
  --line:      #2c313a;   /* Rahmen in Ruhe, Trennlinie                    */
  --line-hi:   #3b424d;   /* Rahmen bei Hover, Zeilenmarker, Scrollbalken  */
  --bezel-edge:#33383f;
  --hairline:  #000;      /* physische Fuge — Material, nicht Farbe        */

  /* ---- Schriftfarben ---- */
  --text:      #e9edf3;
  --text-2:    #c6ccd6;   /* Lesetext in Hilfe und Tour                    */
  --text-dim:  #868d99;
  --text-mute: #5c636e;
  --ink-hi:    #fff;              /* auf roten Signalflächen               */
  --ink-signal: var(--bg-deep);   /* auf grünen/gelben Signalflächen       */

  /* ---- Signale, dazu Kanäle für Tints ---- */
  --accent:    #2e8bff;   --accent-rgb:  46 139 255;   /* Branding-Hook, Interaktion */
  --tally-on:  #ff2f2f;   --tally-rgb:  255  47  47;   /* On Air / Wiedergabe        */
  --ready:     #22c55e;   --ready-rgb:   34 197  94;   /* Bereit / Standby           */
  --amber:     #ffb020;   --amber-rgb:  255 176  32;   /* Achtung / SAFE             */

  /* Tint-Stufen gelten für JEDE Signalfarbe: rgb(var(--x-rgb) / var(--tint-…)) */
  --tint-wash: .07;   /* Flächenfüllung von Hinweisboxen */
  --tint-fill: .18;   /* Hover-Füllung, Schalterbahn an  */
  --tint-line: .45;   /* Rahmen gedimmt                  */
  --tint-edge: .55;   /* Rahmen aktiv                    */
  --scrim:     .72;   /* Overlay-Abdunklung              */

  /* ---- Fonts ---- */
  --font-label: "Barlow SC", "Roboto Condensed", "Oswald", system-ui, sans-serif;
  --font-ui:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

  /* ---- Typo: 8 Stufen statt 21 ----
     Aktionsachse (Barlow SC, uppercase): fs-6 nur Live-Tasten, fs-5 nur der
     Arm-Schalter, fs-3/4 Werkzeug, fs-2 Beschriftung.
     Datenachse (mono): fs-7/fs-8 Readouts — konkurrieren nicht mit Knöpfen. */
  --fs-1:  9px;   /* Mikro: Index, Chip-Text, Unter-Caption   */
  --fs-2: 11px;   /* Beschriftung: Kapitälchen, Kappen, LEDs  */
  --fs-3: 12px;   /* Meta: Panel-Titel, Zähler, Notizen, Tabs */
  --fs-4: 14px;   /* Body: Felder, Listennamen, Menü, Text    */
  --fs-5: 16px;   /* Betont: Zeilentitel, Arm-Schalter        */
  --fs-6: 20px;   /* Titel: Kachelname, GO, Mute all          */
  --fs-7: 22px;   /* Readout: Uhr, Laufzeit                   */
  --fs-8: 32px;   /* Haupt-Readout: Countdown                 */

  --lh-tight: 1.1;  --lh-ui: 1.4;  --lh-read: 1.6;

  /* ---- letter-spacing: 3 statt 14. Je kleiner die Schrift, desto weiter. ---- */
  --ls-tight: .04em;  /* ab --fs-6 und für Readouts            */
  --ls-wide:  .08em;  /* --fs-3 bis --fs-5                     */
  --ls-caps:  .14em;  /* --fs-1, --fs-2 und Signalwörter       */

  /* ---- Abstände: 4-pt-Raster ---- */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
  --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px;

  /* ---- Radien: 5 numerisch + 2 Formen statt 17 ---- */
  --r-0: 2px;    /* Mikro-Marker: VU-Segment, Farbstreifen                 */
  --r-1: 6px;    /* Zeilen-Steuerelemente, Felder, Kappen, Segmente        */
  --r-2: 8px;    /* Tasten, Listenzeilen, Hinweisboxen                     */
  --r-3: 10px;   /* Panels, Karten, Popover, Leisten                       */
  --r-4: 14px;   /* Dialoge                                                */
  --r-pill: 999px;
  --r-round: 50%;
  --radius: var(--r-3);   /* Altname, bleibt als Alias bestehen            */

  /* ---- Höhen: Größe folgt Dringlichkeit, nicht Padding ---- */
  --h-live:  52px;   /* nur GO und Mute all                                */
  --h-state: 48px;   /* nur der SAFE/ON-AIR-Schalter                       */
  --h-tool:  40px;   /* alles Werkzeug (bei Touch 44px, s. u.)             */
  --h-xs:    24px;   /* Tastenkappen, Swatches — nicht anfassbar           */
  --hit-min: 44px;

  /* ---- Geometrie (eigene Achse, kein Spacing) ---- */
  --gap: 10px;
  --pad-min: 158px;
  --pad-h: 130px;

  /* ---- Material: eine Weiß-Alpha statt fünf, genau 3 Erhebungen ---- */
  --edge-hi:   inset 0 1px 0 rgb(255 255 255 / .06);
  --edge-lo:   inset 0 0 0 1px var(--hairline);
  --edge-ring: 0 0 0 1px var(--line);
  --elev-1: 0 6px 14px -10px var(--hairline);
  --elev-2: 0 22px 50px -18px var(--hairline), 0 0 0 1px var(--hairline);
  --elev-3: 0 40px 90px -30px var(--hairline), 0 0 0 1px var(--hairline);

  /* ---- Leuchten: EINE Geometrie, die Farbe kommt am Ort der Verwendung dazu.
     Wichtig: var() innerhalb eines Custom Property wird dort aufgelöst, wo das
     Property DEKLARIERT ist. Ein `--glow: … var(--signal)` in :root wäre also
     für immer blau. Deshalb tragen die Token nur die Geometrie, und die
     Komponente schreibt `box-shadow: var(--glow) var(--signal)`.
     Regel: Glow heißt „hier läuft gerade etwas". ---- */
  --signal: var(--accent);
  --glow-dot:   0 0 8px 0;
  --glow:       0 0 18px -6px;
  --glow-pulse: 0 0 28px -2px;

  /* ---- Signalflächen: die einzigen Hex-Werte außerhalb der Palette oben.
     Verläufe sind Material, nicht Farbe — deshalb hier gebündelt statt in 26
     Komponentenregeln verstreut. ---- */
  --grad-raised:   linear-gradient(180deg, var(--key-2), var(--key));
  --grad-panel:    linear-gradient(180deg, var(--panel-2), var(--panel));
  --grad-bezel:    linear-gradient(180deg, var(--bezel), var(--bezel-2));
  --grad-keycap:   linear-gradient(180deg, #2b3038, #1c1f25);

  --grad-red:      linear-gradient(180deg, #ff473a, #c81d16);
  --grad-red-hi:   linear-gradient(180deg, #ff5b4f, #d8241c);
  --red-edge:      #8f1109;

  --grad-green:    linear-gradient(180deg, #2fd36b, #128a41);
  --grad-green-hi: linear-gradient(180deg, #41e07c, #16a04c);
  --green-edge:    #0c6c32;

  --grad-blue:     linear-gradient(180deg, var(--accent), #1f66c0);
  --grad-blue-dim: linear-gradient(180deg, #2a4a7a, #1b2c45);
  --accent-ink:    #9dc4ff;

  --grad-amber:    linear-gradient(180deg, #6b5210, #402f06);
  --amber-ink:     #ffe0a3;
  --amber-bg:      #241d12;   /* opake Warnfläche auf Panel-Grund */
  --amber-bg-2:    #241c07;   /* dieselbe Idee, eine Stufe tiefer */
  --grad-amber-key:    linear-gradient(180deg, #3a3020, var(--amber-bg));
  --grad-amber-key-hi: linear-gradient(180deg, #4a3d25, #2e2415);
  --grad-fader:        linear-gradient(90deg, var(--accent), #1a4f8a);
  /* GO im Zustand SAFE: erkennbar dieselbe Taste, aber ohne Bereitschaft */
  --grad-go-off:   linear-gradient(180deg, #23312a, #16201b);
  --go-off-edge:   #2c4034;
  --go-off-ink:    #7f9c8a;

  /* ---- Zeit ---- */
  --t-fast: .12s; --t-base: .15s; --t-slow: .22s;
}

/* Am Zeigegerät bleiben die Leisten kompakt; am iPad wächst alles Bedienbare
   auf die Trefferfläche. Eine Regel statt fünf nachträglicher Höhen-Overrides. */
@media (pointer: coarse) {
  :root { --h-tool: var(--hit-min); }
}

/* ===========================================================================
   PRIMITIVE — gemeinsame Bauteile
   Es gibt keinen Präprozessor, und die JS-Module erzeugen feste Klassennamen.
   Deshalb wird jedes Bauteil als Sammel-Selektor über alle Verwender definiert;
   die Komponentenregeln weiter unten behalten nur noch ihre Unterschiede.
   Dieser Block MUSS vor den Komponenten stehen, sonst gewinnt die falsche Regel.
   ========================================================================= */

/* --- Lampe: Punktleuchte, Zustand über --signal --------------------------- */
.led::before,
.pad-tally {
  content: "";
  width: 9px; height: 9px; flex: none;
  border-radius: var(--r-round);
  background: var(--line);
  box-shadow: var(--edge-lo);
  transition: background var(--t-base);
}
/* An: die Formel ist überall dieselbe, nur die Farbe wechselt */
.led[data-on="green"]::before { --signal: var(--ready);    background: var(--signal); box-shadow: var(--glow-dot) var(--signal); }
.led[data-on="amber"]::before { --signal: var(--amber);    background: var(--signal); box-shadow: var(--glow-dot) var(--signal); }
.led[data-on="red"]::before   { --signal: var(--tally-on); background: var(--signal); box-shadow: var(--glow-dot) var(--signal); }

/* --- Tastenkappe: bisher dreimal gebaut, jetzt einmal -------------------- */
.pad-key, .pe-key, .kc {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h-xs); padding: 0 var(--sp-3);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-2);
  line-height: 1; color: var(--text);
  background: linear-gradient(180deg, var(--line-hi), var(--panel));
  border: 1px solid var(--line-hi); border-bottom-color: var(--sunk);
  border-radius: var(--r-1);
  box-shadow: 0 1px 0 var(--sunk-2), var(--edge-hi);
  white-space: nowrap;
}

/* --- Chip: lesende Status-Pille. Vorher neun Bauten mit Radien von 4 bis
   20px; jetzt eine Form, die Komponente setzt nur noch die Farbe. ---------- */
.pad-mode, .bank-count, .sched-state, .cue-chip, .guard-badge, .pool-noplay {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 20px; padding: 0 var(--sp-4);
  font-family: var(--font-label); text-transform: uppercase;
  font-size: var(--fs-1); letter-spacing: var(--ls-caps); font-weight: 600;
  color: var(--text-dim);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  white-space: nowrap;
}

/* --- Symbolknopf: quadratisch, eine Größe. Vorher 26, 30 und zwei kastenlose
   Varianten für dieselbe Rolle. ------------------------------------------- */
.cue-here, .cue-fire, .cue-del, .sched-del, .timer-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex: none;
  font-size: var(--fs-3); color: var(--text-mute);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-1);
  cursor: pointer;
}
.cue-here svg, .cue-fire svg, .cue-del svg { width: 16px; height: 16px; }

/* --- Reihenauswahl: EINE Sprache für „aus einer Reihe gewählt" — eine 2px-Kante
   an der Anschlussseite. Vorher fünf verschiedene. ------------------------ */
.insp-tab, .sd-pick-tab, .sd-page, .pool-chip, .help-navbtn {
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--ls-wide); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}

/* --- Panel-Lampe: vorher drei byte-gleiche Blöcke ------------------------ */
.schedule-head h2::before, .pool-head h2::before, .cues-head h2::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-radius: var(--r-round);
  background: var(--accent);
}

/* --- Chip: Typenschild (Monospace, kein Status) --------------------------- */
.model {
  display: inline-flex; align-items: center;
  min-height: 20px; padding: 0 var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: var(--ls-caps);
  color: var(--text-mute);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  white-space: nowrap;
}

* { box-sizing: border-box; }

/* Formularelemente erben Schrift und Größe. Ohne das tragen 126 Elemente die
   Browser-Vorgabe 13,33px mit sich herum — unsichtbar, weil ihr Text in Kindern
   steckt, aber es ist eine neunte Schriftgröße im System. */
button, select, input, textarea { font-family: inherit; font-size: inherit; }

/* Ein `display` in einer Komponentenregel schlägt das hidden-Attribut. Das war
   neunmal einzeln geflickt und einmal vergessen: der leere „Nächster"-Kasten im
   Zeitplan blieb dadurch stehen. Eine Regel für alle. */
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

/* App-Shell: das Fenster IST die Anwendung. Nur der Inhalt scrollt, nie die Seite. */
body {
  background: var(--bg-deep);
  color: var(--text);
  font: var(--fs-4)/var(--lh-ui) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* appbar · toolbar · workspace · dock */
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

.label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-2);          /* vorher ohne Größe — je Kontext 10/11/15px */
  font-weight: 600;
  color: var(--text-dim);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* =====================  Geräte-Bezel  ===================== */
/* (.device entfällt — die Leisten tragen das Bezel-Material) */

/* =====================  Marke und Statuslampen  ===================== */
/* Die Marke liegt siebgedruckt-klein: 20px sind der Live-Achse vorbehalten. */
.brand-mark { display: flex; align-items: center; gap: 10px; }
.brand-mark h1 {
  font-family: var(--font-label);
  font-size: var(--fs-3); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; margin: 0; line-height: 1;
  color: var(--text-dim);
}

.status-leds { display: flex; gap: var(--sp-6); }
.led {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-label);
  font-size: var(--fs-2); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-mute);
}
.led[data-on="green"], .led[data-on="amber"], .led[data-on="red"] { color: var(--text-dim); }
.led.pulse::before { animation: ledpulse .7s ease-in-out infinite; }
@keyframes ledpulse { 50% { opacity: .35; } }

/* =====================  Setlist-Auswahl  ===================== */
#setlist-sel {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-3); color: var(--text);
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-2);
  min-height: var(--h-tool); padding: 0 var(--sp-4);
  min-width: 160px; max-width: 260px;
}
#setlist-sel:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* „sm" heißt kleinere Schrift, nicht kleineres Ziel — Höhe kommt aus --h-tool. */
.btn-sm {
  min-height: var(--h-tool); padding: 0 var(--sp-5);
  font-size: var(--fs-3); letter-spacing: var(--ls-wide); border-radius: var(--r-2);
}
.sl-sep { width: 1px; height: 20px; background: var(--line); margin: 0 var(--sp-1); }

/* =====================  Transport-Leiste  ===================== */
.transport {
  display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
  background: var(--grad-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-6);
}
.tgroup { display: flex; align-items: center; gap: var(--sp-5); }
.tgroup > .label { font-size: var(--fs-2); }

/* Master-Fader */
.master { flex: 1 1 240px; max-width: 380px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 26px; background: transparent; flex: 1; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-0);
  background: var(--grad-fader), var(--hairline);
  background-blend-mode: normal;
  border: 1px solid var(--hairline);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--r-0); background: var(--sunk-2); border: 1px solid var(--hairline);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 24px; margin-top: -10px;
  border-radius: var(--r-1);
  background: linear-gradient(180deg, var(--line-hi), var(--panel-2));
  border: 1px solid var(--hairline);
  box-shadow: var(--edge-hi), 0 2px 4px rgb(0 0 0 / .5);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 24px; border-radius: var(--r-1);
  background: linear-gradient(180deg, var(--line-hi), var(--panel-2));
  border: 1px solid var(--hairline);
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vol-val { font-family: var(--font-mono); color: var(--text-dim); width: 3ch; text-align: right; font-size: var(--fs-3); }

/* VU-Meter */
.vu {
  display: flex; align-items: flex-end; gap: 2px;
  height: 26px; padding: 3px 5px;
  background: var(--sunk-2); border: 1px solid var(--hairline); border-radius: var(--r-1);
  box-shadow: var(--edge-ring);
}
.vu .seg {
  width: 6px; height: 100%; border-radius: var(--r-0);
  background: var(--seg, var(--ready)); opacity: .14;
  transition: opacity .05s linear;
}
.vu .seg.on { opacity: 1; box-shadow: 0 0 5px -1px var(--seg, var(--ready)); }
/* Zonen: grün / amber / rot */
.vu .seg:nth-child(n+11) { --seg: var(--amber); }
.vu .seg:nth-child(n+15) { --seg: var(--tally-on); }

/* Master-Clock */
.clock {
  font-family: var(--font-mono);
  font-size: var(--fs-7); letter-spacing: var(--ls-tight);
  color: var(--text-dim); font-variant-numeric: tabular-nums;
  padding: var(--sp-1) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--sunk);
}
.clock small { display: block; font-family: var(--font-label); font-size: var(--fs-1); letter-spacing: var(--ls-caps); color: var(--text-mute); }

.transport-actions { margin-left: auto; display: flex; gap: var(--sp-5); }

/* =====================  Buttons  ===================== */
.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-label);
  text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: 600;
  border: 1px solid var(--line);
  background: var(--grad-raised);
  color: var(--text);
  min-height: var(--h-tool); padding: 0 var(--sp-6);
  border-radius: var(--r-2);
  font-size: var(--fs-3); cursor: pointer;
  box-shadow: var(--edge-hi);
  transition: background var(--t-fast), border-color var(--t-fast), transform .05s;
}
.btn:hover { border-color: var(--line-hi); }
.btn:active { transform: translateY(1px); }
/* Gedrückt = Funktion an, kein laufender Zustand: Farbe ja, Leuchten nein.
   Akzentblau ist Interaktionsfarbe und leuchtet in dieser Palette niemals. */
.btn[aria-pressed="true"] {
  background: var(--grad-blue);
  border-color: var(--accent); color: var(--ink-hi);
}
.btn-ghost { background: transparent; }
.btn-panic {
  background: var(--grad-red);
  border-color: var(--red-edge); color: var(--ink-hi);
  letter-spacing: var(--ls-caps); min-width: 96px; font-weight: 700;
  box-shadow: var(--edge-hi);
}
.btn-panic:hover { background: var(--grad-red-hi); }
/* Mute all leuchtet genau dann, wenn es etwas zu muten gibt — der Wert der
   gelöschten AUDIO-LED, jetzt am Ort der Handlung. */
body.audio-active .btn-panic {
  --signal: var(--tally-on);
  box-shadow: var(--glow) var(--signal), var(--edge-hi);
}

/* =====================  Pad-Grid  ===================== */
/* (main wird über .workspace gesetzt) */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pad-min), 1fr));
  /* Feste Rasterzeilen statt `min-height`: sonst wächst eine Kachel mit
     zweizeiligem Titel und steht neben ihren Nachbarn heraus. Alle Tasten einer
     Fläche sind gleich groß — das ist bei einem Auslösepult keine Kosmetik,
     sondern Treffsicherheit. */
  grid-auto-rows: var(--pad-h);
  gap: var(--gap);
}
/* Im Bearbeiten-Modus wächst die Kachel: Modus, Lautstärke, Farben, Fades, Taste
   und die zwei Knöpfe brauchen mehr als eine Live-Kachel hoch ist. Feste Zeilen
   hätten den Editor unten abgeschnitten. */
body.editing .grid { grid-auto-rows: minmax(var(--pad-h), auto); }

.pad {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--key-2) 0%, var(--key) 100%);
  border-radius: var(--radius);
  min-height: var(--pad-h);
  padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; color: var(--text);
  text-align: left; overflow: hidden;
  box-shadow: var(--edge-hi), var(--elev-1);
  transition: transform .06s, box-shadow .14s, border-color .14s, filter .14s;
  -webkit-tap-highlight-color: transparent;
}
/* Kategorie-Akzentstreifen oben */
.pad::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--pad-color, var(--accent)); opacity: .85;
}
.pad:hover { filter: brightness(1.12); border-color: var(--line-hi); }
.pad:active { transform: translateY(1px); }
.pad:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tally: bereit (grün) bei Hover/Fokus, on air (rot) bei Wiedergabe */
.pad:hover .pad-tally, .pad:focus-visible .pad-tally {
  background: var(--ready); --signal: var(--ready); box-shadow: var(--glow-dot) var(--signal);
}
.pad.playing {
  border-color: var(--tally-on);
  --signal: var(--tally-on); box-shadow: inset 0 0 0 1px var(--signal), var(--glow) var(--signal);
  animation: onair 1.4s ease-in-out infinite;
}
@keyframes onair { 50% { box-shadow: inset 0 0 0 1px var(--signal), var(--glow-pulse) var(--signal); } }
.pad.playing .pad-tally { background: var(--tally-on); --signal: var(--tally-on); box-shadow: var(--glow-dot) var(--signal); }
.pad.playing::before { opacity: 1; background: var(--tally-on); }
.pad.playing .pad-tc { visibility: visible; color: var(--tally-on); }

.pad.empty {
  border-style: dashed; color: var(--text-mute);
  background: var(--bezel-2);
  justify-content: center; align-items: center; text-align: center;
}
.pad.empty::before { opacity: 0; }
.pad.empty small { color: var(--text-mute); font-size: var(--fs-2); }
/* Belegt, aber noch nicht spielbar: die Kachel steht schon mit Namen und Farbe
   da, nur gedimmt. Vorher war sie in dieser Zeit als „Leer" beschriftet. */
.pad.loading { color: var(--text-dim); }
.pad.loading .pad-label { color: var(--text-dim); }
.pad.loading .pad-mode {
  --signal: var(--amber);
  color: var(--amber-ink); border-color: var(--amber);
  background: var(--amber-bg-2);
}

.pad.dragover { border-color: var(--accent); border-style: solid; filter: brightness(1.2); }
.pad.dragging { opacity: .45; }
.pad.reorder-target { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Zieh-Griff (nur Edit-Modus) */
.pad-drag {
  display: none;
  background: transparent; border: none; color: var(--text-mute);
  cursor: grab; font-size: var(--fs-4); line-height: 1; padding: 0 2px; letter-spacing: -2px;
}
body.editing .pad-drag { display: inline-block; }
.pad-drag:hover { color: var(--text); }
.pad-drag:active { cursor: grabbing; }

/* „+ Pad"-Kachel */
.pad-add {
  display: none;
  align-items: center; justify-content: center;
  border: 1px dashed var(--line); background: var(--bezel-2);
  color: var(--text-dim);
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-4);
  cursor: pointer; min-height: var(--pad-h); box-shadow: none;
}
.pad-add::before { display: none; }
body.editing .pad-add { display: flex; }
.pad-add:hover { border-color: var(--accent); color: var(--text); filter: none; }

.pad-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pad-cat {
  font-family: var(--font-label); text-transform: uppercase;
  font-size: var(--fs-2); letter-spacing: var(--ls-caps); color: var(--text-dim);
}
.pad-top-right { display: flex; align-items: center; gap: 8px; }

.pad-key { min-width: 20px; min-height: 20px; color: var(--text-dim); }

.pad-label {
  font-family: var(--font-label);
  font-size: var(--fs-6); font-weight: 600; line-height: 1.1;
  margin-top: auto;
  /* Höchstens zwei Zeilen: die Kachelhöhe ist fest, ein dritter Umbruch würde
     sonst unter der Unterkante verschwinden. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Im Edit-Modus signalisiert der Titel, dass er umbenennbar ist */
body.editing .pad:not(.empty) .pad-label {
  cursor: text;
  /* Beim Umbenennen ohne Klammerung: `-webkit-line-clamp` und ein Cursor in
     einem `-webkit-box` vertragen sich nicht zuverlässig. */
  display: block; -webkit-line-clamp: none;
  /* Ausnahme der Strichregel: Unterstreichung an TEXT, kein Rahmen um eine
     Flaeche - die etablierte Anzeige fuer editierbaren Text. */
  border-bottom: 1px dashed var(--text-mute);
  padding-bottom: 2px; width: fit-content; max-width: 100%;
}
body.editing .pad:not(.empty) .pad-label:hover { border-bottom-color: var(--accent); }
.pad-label.editing-label {
  outline: none; border-bottom-color: var(--accent);
  background: rgb(var(--accent-rgb) / .10);
}

.pad-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pad-mode { background: rgb(0 0 0 / .25); }
.pad-tc {
  visibility: hidden;
  font-family: var(--font-mono); font-size: var(--fs-3); font-weight: 600;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}

.pad-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0%;
  background: var(--tally-on);
  --signal: var(--tally-on); box-shadow: var(--glow-dot) var(--signal);
  transition: width .08s linear;
}

/* Edit-Controls */
.pad-edit { display: none; flex-direction: column; gap: 7px; margin-top: 6px; }
body.editing .pad-edit { display: flex; }
body.editing .pad { cursor: default; }
body.editing .pad:hover { filter: none; }
.pad-edit .pe-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; row-gap: 7px; }
.pad-edit select {
  font-family: var(--font-label); text-transform: uppercase; font-size: var(--fs-2); letter-spacing: var(--ls-wide);
  background: var(--key); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-1); padding: 4px 6px;
  flex: 1 1 84px; min-width: 0;
}
.pad-edit .vol { flex: 1 1 56px; min-width: 48px; height: 22px; }
.pe-label {
  font-family: var(--font-ui); font-size: var(--fs-3);
  background: var(--sunk); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-1); padding: 6px 8px; width: 100%;
}
.pe-label:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pe-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.pe-sw {
  width: 20px; height: 20px; border-radius: var(--r-1); cursor: pointer;
  background: var(--sw); border: 1px solid var(--hairline);
  box-shadow: var(--edge-hi);
}
.pe-sw.active { outline: 2px solid var(--ink-hi); outline-offset: 1px; }
.pe-fade {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-label); text-transform: uppercase; font-size: var(--fs-2);
  letter-spacing: var(--ls-wide); color: var(--text-dim);
}
.pe-fade input {
  width: 40px; font-family: var(--font-mono); font-size: var(--fs-3);
  background: var(--sunk); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-1); padding: 4px 4px;
}
.pe-key { min-width: 30px; font-size: var(--fs-3); cursor: pointer; }
.pe-key.listening {
  --signal: var(--accent);
  border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-dot) var(--signal);
}
.pad-clear {
  font-family: var(--font-label); text-transform: uppercase; font-size: var(--fs-2); letter-spacing: var(--ls-wide);
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  border-radius: var(--r-1); padding: 4px 9px; cursor: pointer; margin-left: auto; white-space: nowrap;
}
.pad-clear:hover { color: var(--tally-on); border-color: var(--tally-on); }

/* =====================  Zeitplan  ===================== */
.schedule {
  background: var(--grad-panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.schedule-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.schedule-head h2 {
  font-family: var(--font-label); text-transform: uppercase;
  margin: 0; font-size: var(--fs-3); letter-spacing: var(--ls-caps); color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.schedule-head h2::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-round);
  background: var(--accent); background: var(--accent);
}
.schedule-head .btn-sm { margin-left: auto; }

/* „Nächster"-Readout: großer Broadcast-Anzeiger */
.schedule-next {
  margin-top: 12px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: 12px 18px;
  box-shadow: inset 0 0 0 1px rgb(var(--ready-rgb) / .14);
}
.sn-label {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-2); color: var(--text-mute);
}
.sn-name {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-tight);
  font-size: var(--fs-6); font-weight: 600; color: var(--text);
}
.sn-at { font-size: var(--fs-4); color: var(--text-dim); }
.sn-count {
  margin-left: auto; font-size: var(--fs-8); font-weight: 600; line-height: 1;
  color: var(--ready); letter-spacing: var(--ls-tight);
  text-shadow: 0 0 18px rgb(var(--ready-rgb) / .35);
}

.schedule-hint {
  margin-top: 10px; font-size: var(--fs-3); color: var(--amber);
  border: 1px solid rgb(var(--amber-rgb) / .35); border-radius: var(--r-2); padding: 8px 12px;
  background: rgb(var(--amber-rgb) / .07);
}

.schedule-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sched-empty { color: var(--text-mute); font-size: var(--fs-3); padding: 6px 2px; }

/* Cue-Zeile */
.sched-row {
  position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--grad-raised);
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 9px 12px 9px 18px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.sched-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--line-hi); transition: background .15s, box-shadow .15s;
}
.sched-row[data-status="armed"]::before { background: var(--ready); --signal: var(--ready); box-shadow: var(--glow-dot) var(--signal); }
.sched-row[data-status="off"] { opacity: .5; }
.sched-row.is-next { border-color: rgb(var(--ready-rgb) / var(--tint-edge)); --signal: var(--ready); box-shadow: var(--glow) var(--signal); }

.sched-num { color: var(--text-mute); font-size: var(--fs-3); min-width: 2ch; }
.sched-time {
  font-family: var(--font-mono); font-size: var(--fs-5); font-weight: 600; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-1); padding: 3px 5px;
}
.sched-time:hover, .sched-time:focus { border-color: var(--line); background: var(--sunk); outline: none; }
.sched-pad {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-tight); font-size: var(--fs-4);
  color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-1); padding: 4px 6px; min-width: 130px;
}
.sched-pad:hover, .sched-pad:focus { border-color: var(--line); background: var(--sunk); outline: none; }

.sched-row[data-status="armed"] .sched-state { color: var(--ready); border-color: rgb(var(--ready-rgb) / var(--tint-edge)); }
.sched-count {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-4);
  color: var(--text-dim); min-width: 8ch; text-align: right;
}
.sched-row[data-status="armed"] .sched-count { color: var(--text); }

/* Kippschalter „aktiv" */
.sched-sw { position: relative; width: 34px; height: 18px; flex: none; cursor: pointer; }
.sched-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sched-sw > span {
  position: absolute; inset: 0; background: var(--key-2); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); transition: background .15s, border-color .15s;
}
.sched-sw > span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: var(--r-round); background: var(--text-mute);
  transition: transform .15s, background .15s;
}
.sched-sw input:checked + span { background: rgb(var(--ready-rgb) / .22); border-color: rgb(var(--ready-rgb) / var(--tint-edge)); }
.sched-sw input:checked + span::after { transform: translateX(16px); background: var(--ready); }


.sched-del:hover { color: var(--tally-on); border-color: var(--tally-on); }

/* =====================  Toast  ===================== */
.toast {
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 10px 18px; border-radius: var(--r-2);
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Trimmen-Button im Editor */
.pad-trim {
  font-family: var(--font-label); text-transform: uppercase; font-size: var(--fs-2); letter-spacing: var(--ls-wide);
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  border-radius: var(--r-1); padding: 4px 9px; cursor: pointer;
}
.pad-trim:hover { color: var(--accent); border-color: var(--accent); }

/* =====================  Trim-Dialog  ===================== */
.trim-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(0 0 0 / .62);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.trim-dialog {
  width: min(760px, 96vw);
  background: var(--grad-panel);
  border: 1px solid var(--line); border-radius: var(--r-4);
  box-shadow: var(--elev-3);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.trim-head { display: flex; align-items: center; justify-content: space-between; }
.trim-head h3 {
  margin: 0; font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--ls-wide); font-size: var(--fs-4);
}
.trim-x { background: transparent; border: none; color: var(--text-dim); font-size: var(--fs-5); cursor: pointer; }
.trim-x:hover { color: var(--text); }
.trim-wave {
  position: relative; height: 140px;
  background: var(--sunk-2); border: 1px solid var(--hairline); border-radius: var(--r-2);
  box-shadow: var(--edge-ring); overflow: hidden; touch-action: none;
}
.trim-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trim-shade { position: absolute; top: 0; bottom: 0; background: rgb(8 9 11 / .72); pointer-events: none; }
.trim-shade-l { left: 0; }
.trim-handle {
  position: absolute; top: 0; bottom: 0; width: 2px; cursor: ew-resize;
  transform: translateX(-1px); touch-action: none;
}
.trim-handle span {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 36px;
  transform: translate(-50%,-50%); border-radius: var(--r-1);
}
.trim-h-start { background: var(--ready); }
.trim-h-start span { --signal: var(--ready); background: var(--signal); box-shadow: var(--glow-dot) var(--signal); }
.trim-h-end { background: var(--tally-on); }
.trim-h-end span { --signal: var(--tally-on); background: var(--signal); box-shadow: var(--glow-dot) var(--signal); }
.trim-playhead {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--ink-hi); box-shadow: 0 0 8px rgb(255 255 255 / .85);
  display: none; pointer-events: none; transform: translateX(-1px);
}
.trim-times { display: flex; gap: 22px; font-size: var(--fs-4); color: var(--text-dim); }
.trim-times b { color: var(--text); margin-left: 4px; }
.trim-actions { display: flex; gap: 10px; align-items: center; }
.trim-spacer { flex: 1; }
.trim-apply { background: var(--grad-blue); border-color: var(--accent); color: var(--ink-hi); }

@media (max-width: 620px) {
  :root { --pad-min: 132px; }
  .clock { font-size: var(--fs-6); }
  .brand-mark h1 { font-size: var(--fs-5); }
  .status-leds { gap: 10px; }
}

/* =====================  Arming: SAFE / ON AIR  ===================== */
/* =====================  Arm-Schalter  =====================
   Der einzige Ort, der den Zustand BENENNT. Die separate ON-AIR-Lampe und die
   SAFE-Plakette sind entfallen: eine Beschriftung pro Zustand, dafür Wirkung
   am Ort der Handlung (Fensterrahmen, kalte Pads, mattes GO).
   Deshalb steht er auf der eigenen Stufe --h-state / --fs-5 — nur er.        */
.armbox { display: flex; align-items: center; }
.armswitch {
  display: inline-flex; align-items: stretch; padding: 3px; gap: 3px;
  min-height: var(--h-state);
  background: var(--sunk); border: 1px solid var(--hairline); border-radius: var(--r-2);
  box-shadow: var(--edge-ring); cursor: pointer;
}
.armswitch:disabled { opacity: .4; cursor: not-allowed; }
.armswitch .as-opt {
  display: inline-flex; align-items: center;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-5); font-weight: 700; color: var(--text-mute);
  padding: 0 var(--sp-5); border-radius: var(--r-1);
  transition: background var(--t-base), color var(--t-base);
}
.armswitch[data-state="safe"] .as-safe {
  --signal: var(--amber);
  background: var(--grad-amber); color: var(--amber-ink);
  box-shadow: var(--glow) var(--signal);
}
.armswitch[data-state="air"] .as-air {
  --signal: var(--tally-on);
  background: var(--grad-red); color: var(--ink-hi);
  box-shadow: var(--glow) var(--signal);
}
.armswitch.flash { animation: armFlash .9s ease-out 2; }
@keyframes armFlash {
  0%, 100% { box-shadow: var(--edge-ring); }
  35%      { box-shadow: 0 0 0 2px var(--amber), 0 0 20px -4px var(--amber); }
}

/* Fensterweiter Rahmen: die eine erlaubte periphere Bestätigung.
   SAFE ist der überraschende Zustand und darf nicht schwächer sein als ON AIR. */
body.on-air::after,
body.safe::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
}
body.on-air::after { box-shadow: inset 0 0 0 2px rgb(var(--tally-rgb) / var(--tint-edge)); }
body.safe::after   { box-shadow: inset 0 0 0 2px rgb(var(--amber-rgb) / var(--tint-edge)); }

/* Zeitplan-Masterschalter */
.sched-master {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-dim);
}
.sched-master input { position: absolute; opacity: 0; width: 0; height: 0; }
.sched-master > span {
  position: relative; width: 34px; height: 18px; flex: none;
  background: var(--key-2); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  transition: background .15s, border-color .15s;
}
.sched-master > span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: var(--r-round); background: var(--text-mute);
  transition: transform .15s, background .15s;
}
.sched-master input:checked + span { background: rgb(var(--tally-rgb) / .22); border-color: rgb(var(--tally-rgb) / .6); }
.sched-master input:checked + span::after { transform: translateX(16px); background: var(--tally-on); }

/* =====================  Geschützte Pads (Notfall-Klappe)  ===================== */
.pad.protected { border-color: rgb(var(--amber-rgb) / .55); }
.pad.protected::before { background: var(--amber); opacity: 1; }

.pad-guard {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  /* Schraffur wie eine Sicherungsklappe */
  background:
    repeating-linear-gradient(135deg,
      rgb(var(--amber-rgb) / .16) 0 10px, rgb(10 11 13 / .92) 10px 20px),
    rgb(10 11 13 / .92);
  backdrop-filter: blur(1px);
}
.pad-guard .guard-word {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-2); color: var(--amber);
}
.pad-guard button {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-3); font-weight: 600; cursor: pointer; border-radius: var(--r-1); padding: 8px 14px;
}
.guard-unlock {
  background: var(--grad-amber-key);
  border: 1px solid rgb(var(--amber-rgb) / .6); color: var(--amber);
}
.guard-unlock:hover { background: var(--grad-amber-key-hi); }
.pad-guard.open {
  background: repeating-linear-gradient(135deg,
      rgb(var(--tally-rgb) / .18) 0 10px, rgb(10 11 13 / .9) 10px 20px), rgb(10 11 13 / .9);
}
.guard-release {
  background: var(--grad-red);
  border: 1px solid var(--red-edge); color: var(--ink-hi);
  --signal: var(--tally-on); box-shadow: var(--glow) var(--signal);
  animation: guardpulse 1.2s ease-in-out infinite;
}
@keyframes guardpulse { 50% { box-shadow: var(--glow-pulse) var(--signal); } }

/* Editor: Geschützt-Schalter */
.pe-prot {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--amber); cursor: pointer;
}
.pe-prot input { accent-color: var(--amber); }
.pe-key.locked {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; font-family: var(--font-label); font-size: var(--fs-2); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-mute);
  background: var(--bezel); border: 1px solid var(--line); border-radius: var(--r-1); padding: 4px 7px;
}

/* =====================  Freigabe-Dialog  ===================== */
.guard-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(0 0 0 / .7);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.guard-dialog {
  width: min(560px, 96vw);
  background: linear-gradient(180deg, var(--amber-bg), var(--panel));
  border: 1px solid rgb(var(--amber-rgb) / var(--tint-edge)); border-radius: var(--r-4);
  box-shadow: var(--elev-3), inset 0 0 0 1px rgb(var(--amber-rgb) / .15);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.guard-head { display: flex; align-items: center; gap: 12px; }
.guard-badge { color: var(--amber-bg); background: var(--amber); border-color: transparent; }
.guard-head h3 {
  margin: 0; font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--ls-wide); font-size: var(--fs-6);
}
.guard-what { margin: 0; font-size: var(--fs-4); color: var(--text); }
.guard-note {
  margin: 0; font-size: var(--fs-3); line-height: 1.5; color: var(--text-dim);
  border-left: 3px solid rgb(var(--amber-rgb) / var(--tint-edge)); padding: 8px 12px;
  background: rgb(var(--amber-rgb) / .06); border-radius: 0 var(--r-2) var(--r-2) 0;
}
.guard-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.guard-actions .guard-cancel { margin-right: auto; }

/* Halten-zum-Auslösen mit Fortschrittsring */
.guard-fire {
  position: relative; width: 116px; height: 116px; border-radius: var(--r-round);
  border: 2px solid var(--red-edge); cursor: pointer; color: var(--ink-hi);
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-3); font-weight: 700;
  background:
    conic-gradient(var(--tally-on) calc(var(--p) * 360deg), rgb(var(--tally-rgb) / .18) 0),
    radial-gradient(circle at 50% 50%, var(--red-edge) 0 52%, transparent 53%);
  --signal: var(--tally-on); box-shadow: var(--glow) var(--signal);
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none;
}
.guard-fire:active { transform: scale(.98); }
.gf-label { position: relative; z-index: 1; pointer-events: none; }

/* =====================  Bank-Reihe (Bus-Reihe)  ===================== */
.bank-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 2px; }
/* Die Bus-Reihe ist auf dem iPad ein Hauptziel — sie hängt an derselben
   Werkzeughöhe wie die Knöpfe der Leisten. */
.bank {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  min-height: var(--h-tool);
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-3); font-weight: 600; color: var(--text-dim);
  background: var(--grad-raised);
  border: 1px solid var(--line); border-radius: var(--r-2) var(--r-2) 0 0;
  padding: 0 var(--sp-5); cursor: pointer;
  box-shadow: var(--edge-hi);
}
.bank:hover { color: var(--text); border-color: var(--line-hi); }
/* Aktive Bank ist eine Auswahl, kein laufender Zustand: Farbe ja, Glow nein. */
.bank.active {
  color: var(--ink-hi); border-color: var(--accent);
  background: var(--grad-blue-dim);
  box-shadow: var(--edge-hi);
}
.bank-num { font-size: var(--fs-2); color: var(--text-mute); }
.bank.active .bank-num { color: var(--accent-ink); }
.bank-count { color: var(--text-mute); }
.bank-add { padding: 0 var(--sp-5); font-size: var(--fs-4); }
.bank-tools { display: none; gap: 6px; margin-left: 8px; }
body.editing .bank-tools { display: inline-flex; }

/* =====================  Media-Pool  ===================== */
.pool {
  background: var(--grad-panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.pool-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pool-head h2 {
  font-family: var(--font-label); text-transform: uppercase; margin: 0;
  font-size: var(--fs-3); letter-spacing: var(--ls-caps); color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.pool-head h2::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-round);
  background: var(--accent); background: var(--accent);
}
.pool-count { font-size: var(--fs-2); color: var(--text-mute); }
#pool-search {
  flex: 1 1 180px; max-width: 280px; margin-left: auto;
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-2);
  color: var(--text); padding: 7px 10px; font-size: var(--fs-4); font-family: var(--font-ui);
}
#pool-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.pool-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pool-chip {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-dim);
  background: var(--key); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 11px; cursor: pointer;
}
.pool-chip:hover { color: var(--text); }
.pool-chip.active { color: var(--ink-hi); background: var(--grad-blue-dim); border-color: var(--accent); }

.pool.collapsed .pool-cats, .pool.collapsed .pool-list { display: none; }

.pool-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pool-empty { color: var(--text-mute); font-size: var(--fs-3); padding: 6px 2px; }
.pool-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-1);
  padding: 7px 12px; cursor: grab;
}
.pool-row:hover { border-color: var(--line-hi); }
.pool-row:active { cursor: grabbing; }
.pool-cat {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-1); color: var(--text-mute); min-width: 82px;
}
.pool-name { flex: 1; font-size: var(--fs-4); color: var(--text); }
.pool-name em { font-style: normal; font-size: var(--fs-2); color: var(--amber); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.pool-dur { font-size: var(--fs-3); color: var(--text-dim); min-width: 5ch; text-align: right; }
.pool-place {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-dim);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-1);
  padding: 4px 9px; cursor: pointer;
}
.pool-place:hover { color: var(--accent); border-color: var(--accent); }

/* Media-Pool: Vorhören */
.pool-play {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--ready);
  background: transparent; border: 1px solid rgb(var(--ready-rgb) / .45); border-radius: var(--r-1);
  padding: 4px 9px; cursor: pointer;
}
.pool-play:hover { color: var(--ink-hi); background: rgb(var(--ready-rgb) / .18); border-color: var(--ready); }
.pool-noplay { color: var(--amber); border-color: rgb(var(--amber-rgb) / var(--tint-line)); }

/* =====================  GO-Block in der Transport-Leiste  ===================== */
.gogroup { gap: 12px; }
.next-cue { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 130px; }
.nc-label {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-1); color: var(--text-mute);
}
.nc-name {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-tight);
  font-size: var(--fs-5); font-weight: 600; color: var(--text);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-go {
  --signal: var(--ready);
  background: var(--grad-green);
  border-color: var(--green-edge); color: var(--ink-signal);
  font-size: var(--fs-6); font-weight: 700; letter-spacing: var(--ls-caps);
  min-width: 96px;
  box-shadow: var(--glow) var(--signal), var(--edge-hi);
}
.btn-go:hover { background: var(--grad-green-hi); }
.btn-go:disabled {
  background: linear-gradient(180deg, var(--panel-2), var(--key));
  border-color: var(--line); color: var(--text-mute);
  box-shadow: none; cursor: not-allowed;
}

/* Pad, das als nächste Cue auf Standby steht (Preview-Bus) */
.pad.standby {
  --signal: var(--ready); border-color: var(--ready);
  box-shadow: inset 0 0 0 1px var(--signal), var(--glow) var(--signal);
}
.pad.standby .pad-tally { background: var(--ready); --signal: var(--ready); box-shadow: var(--glow-dot) var(--signal); }
.pad.standby.playing { border-color: var(--tally-on); }

/* =====================  Cue-Liste  ===================== */
.cues {
  background: var(--grad-panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.cues-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cues-head h2 {
  font-family: var(--font-label); text-transform: uppercase; margin: 0;
  font-size: var(--fs-3); letter-spacing: var(--ls-caps); color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.cues-head h2::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-round);
  background: var(--ready); --signal: var(--ready); box-shadow: var(--glow-dot) var(--signal);
}
.cues-pos { font-size: var(--fs-3); color: var(--text); font-variant-numeric: tabular-nums; }
#cue-pad {
  font-family: var(--font-ui); font-size: var(--fs-4); color: var(--text);
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 7px 10px; min-width: 160px; max-width: 260px; margin-left: auto;
}
#cue-pad:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.cues.collapsed .cues-list { display: none; }
.cues-list { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.cues-empty { color: var(--text-mute); font-size: var(--fs-3); padding: 6px 2px; }

/* Cue-Zeile als festes Raster statt freiem Umbruch:
   Zeile 1  Griff · Nummer · Name · Status
   Zeile 2  Notiz · Aktionen                                                   */
.cue-row {
  position: relative;
  display: grid;
  grid-template-columns: 20px 26px minmax(0, 1fr) auto;
  grid-template-areas:
    "drag num  name  state"
    "drag note note  actions";
  align-items: center; column-gap: 8px; row-gap: 4px;
  background: var(--grad-raised);
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 8px 10px 8px 16px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.cue-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-hi);
}
.cue-row[data-status="standby"] {
  border-color: rgb(var(--ready-rgb) / var(--tint-edge)); --signal: var(--ready); box-shadow: var(--glow) var(--signal);
  background: linear-gradient(180deg, rgb(var(--ready-rgb) / var(--tint-wash)), var(--key));
}
.cue-row[data-status="standby"]::before { background: var(--ready); --signal: var(--ready); box-shadow: var(--glow-dot) var(--signal); }
.cue-row[data-status="done"] { opacity: .55; }
.cue-row[data-status="done"]::before { background: var(--line); }
.cue-row.dragging { opacity: .4; }

.cue-row .row-drag { grid-area: drag; }
.cue-num {
  grid-area: num; color: var(--text-mute); font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
}
.cue-name {
  grid-area: name; min-width: 0;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-tight);
  font-size: var(--fs-4); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cue-state { grid-area: state; display: flex; justify-content: flex-end; }

.cue-chip svg { width: 11px; height: 11px; }
.cue-chip-standby {
  color: var(--ink-signal); background: var(--ready);
  --signal: var(--ready); box-shadow: var(--glow) var(--signal);
}
.cue-chip-done { color: var(--text-mute); border: 1px solid var(--line); }

.cue-note {
  grid-area: note; min-width: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--text-dim); padding: 4px 7px; font-size: var(--fs-3); font-family: var(--font-ui);
}
.cue-note::placeholder { color: var(--text-mute); }
.cue-note:hover { border-color: var(--line); }
.cue-note:focus {
  border-color: var(--accent); background: var(--sunk); color: var(--text); outline: none;
}

.cue-actions { grid-area: actions; display: flex; gap: 4px; }

.cue-here:hover { color: var(--accent); border-color: var(--accent); background: rgb(var(--accent-rgb) / var(--tint-wash)); }
.cue-fire:hover { color: var(--ready); border-color: var(--ready); background: rgb(var(--ready-rgb) / var(--tint-wash)); }
.cue-del:hover  { color: var(--tally-on); border-color: var(--tally-on); background: rgb(var(--tally-rgb) / var(--tint-wash)); }

/* Kopf: Titel und Position in einer Zeile, Anlegen darunter als eigene Gruppe */
.cues-reset { margin-left: auto; }
.cues-hint {
  margin: 8px 0 0; color: var(--text-mute); font-size: var(--fs-3); line-height: 1.5;
}
.cues-hint strong { color: var(--ready); }
.cues-hint em { color: var(--text-dim); font-style: normal; }
.cues-add {
  display: flex; gap: 8px; align-items: center; margin: 10px 0 2px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.cues-add #cue-pad { margin-left: 0; flex: 1 1 auto; min-width: 0; max-width: none; }

/* Im Bearbeiten-Modus ist die Sicherungsklappe ausgeblendet, damit der Editor
   (inkl. „Geschützt"-Schalter) erreichbar bleibt. Auslösen ist im Edit-Modus
   ohnehin gesperrt (SAFE wird erzwungen). */
body.editing .pad-guard { display: none; }

/* Audio-Freigabe-Hinweis */
.schedule-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.schedule-hint[hidden] { display: none; }
.schedule-hint .btn-sm { border-color: rgb(var(--amber-rgb) / .6); color: var(--amber); }
.schedule-hint .btn-sm:hover { background: rgb(var(--amber-rgb) / .15); color: var(--ink-hi); }

/* Sicherungsklappe: zeigt jetzt auch, WELCHER Sound gesichert ist */
.pad-guard { gap: 4px; padding: 10px; text-align: center; }
.guard-cat {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-1); color: var(--amber); opacity: .85;
}
.guard-name {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-tight);
  font-size: var(--fs-5); font-weight: 700; line-height: 1.1; color: var(--ink-hi);
  text-shadow: 0 1px 3px rgb(0 0 0 / .8);
}
.pad-guard .guard-word { margin-top: 2px; }
.pad-guard button { margin-top: 2px; }

/* „+ Pad"-Kachel: Drop-Ziel und Hinweistext */
.pad-add { flex-direction: column; gap: 4px; }
.pad-add small {
  font-family: var(--font-ui); text-transform: none; letter-spacing: 0;
  font-size: var(--fs-2); color: var(--text-mute);
}
.pad-add.dragover {
  border-style: solid; border-color: var(--accent); color: var(--text);
  background: rgb(var(--accent-rgb) / .12);
  box-shadow: var(--glow) var(--accent);
}
.pad-add.dragover small { color: var(--text-dim); }

/* =====================  Zeitplan: Unterabschnitte + Timer  ===================== */
.sched-sub {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-2); color: var(--text-mute); font-weight: 600;
  margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.sched-sub small {
  text-transform: none; letter-spacing: 0; font-family: var(--font-ui);
  font-size: var(--fs-2); color: var(--text-mute); opacity: .8; margin-left: 6px;
}

.timer-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 10px 14px;
}
.tb-label {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-size: var(--fs-1); color: var(--text-mute);
}
.tb-elapsed { font-size: var(--fs-7); font-weight: 600; color: var(--text); letter-spacing: var(--ls-tight); }
.tb-next { font-size: var(--fs-3); color: var(--ready); }
.tb-add {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-dim);
}
.tb-add input, .tr-min {
  width: 58px; font-family: var(--font-mono); font-size: var(--fs-3); color: var(--text);
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-1); padding: 5px 7px;
}
#timer-pad {
  font-family: var(--font-ui); font-size: var(--fs-4); color: var(--text);
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 6px 9px; min-width: 150px; max-width: 240px;
}

.timer-list { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.timer-row {
  position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--grad-raised);
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 8px 12px 8px 18px; overflow: hidden; cursor: grab;
}
.timer-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-hi);
}
.timer-row[data-status="standby"] { border-color: rgb(var(--ready-rgb) / var(--tint-edge)); --signal: var(--ready); box-shadow: var(--glow) var(--signal); }
.timer-row[data-status="standby"]::before { background: var(--ready); --signal: var(--ready); box-shadow: var(--glow-dot) var(--signal); }
.timer-row[data-status="done"] { opacity: .5; }
.timer-row.dragging { opacity: .45; }

.tr-after {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-dim);
}
.tr-cum { font-size: var(--fs-3); color: var(--text-mute); min-width: 6ch; }
.tr-abs { font-size: var(--fs-3); color: var(--text-dim); min-width: 8ch; }
.timer-del { margin-left: auto; }
.timer-del:hover { color: var(--tally-on); border-color: var(--tally-on); }

/* (Vollbild braucht keine Sonderregeln mehr — die Shell füllt immer das Fenster) */

/* Zieh-Griff für Listenzeilen (Timer, Cues) + Einfüge-Markierung */
.timer-row, .cue-row { cursor: default; }
.row-drag {
  background: transparent; border: none; color: var(--text-mute);
  cursor: grab; font-size: var(--fs-4); line-height: 1; padding: 2px 4px;
  letter-spacing: -2px; flex: none;
}
.row-drag:hover { color: var(--text); }
.row-drag:active { cursor: grabbing; }
.timer-row.dragging, .cue-row.dragging { opacity: .4; }
.timer-row.drop-target, .cue-row.drop-target {
  box-shadow: inset 0 -2px 0 var(--accent);
  border-color: var(--accent);
}

/* =====================  Oben rechts: Arming, Vollbild, Status  ===================== */
.strip-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

/* =====================  Feste Live-Leiste (Geräte-Vorderkante)  ===================== */
.dockbar {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--grad-bezel);
  border-top: 1px solid var(--bezel-edge);
  box-shadow: 0 -14px 34px -14px rgb(0 0 0 / .85), var(--edge-hi);
}
.dock-go { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
/* GO und Mute all sind gleichrangig: gleiche Höhe, gleiche Schrift, gleiche
   Laufweite. Vorher 20 gegen 17px und .16 gegen .14em — das Auge rangierte
   Mute all dadurch ab. 20px sind in der ganzen App diesen zwei Tasten vorbehalten. */
.dockbar .btn-go,
.dockbar .btn-panic {
  min-height: var(--h-live); min-width: 120px;
  font-size: var(--fs-6); letter-spacing: var(--ls-caps); font-weight: 700;
  padding: 0 var(--sp-7);
}
.dockbar .btn-panic { margin-left: auto; }

/* Kein Platzhalter nötig — die Leiste ist eine Grid-Zeile. */

/* iPad/Tablet und schmale Screens */
@media (max-width: 900px) {
  .strip-right { gap: 10px; }
  .nc-name { max-width: 34vw; }
  /* Auf dem Tablet brach die Kopfzeile in drei Zeilen um (121px auf einem iPad
     hoch), die Werkzeugleiste in zwei (126px) — zusammen ein Viertel des
     Bildschirms für Leisten. Drei Stellen geben nach, alle ohne Funktionsverlust:
     Marke und Typenschild verschwinden, die LED-Reihe zeigt nur ihre Punkte
     (die Bedeutung steht im `title`), Setlist-Auswahl und Master-Regler werden
     schmaler. Danach ist jede Leiste einzeilig. */
  .brand-mark, .model { display: none; }
  .status-leds { gap: var(--sp-4); }
  .status-leds .led { font-size: 0; gap: 0; }
  #setlist-sel { max-width: 150px; }
  .setlist-group > .label { display: none; }   /* die Auswahl nennt sich selbst */
  .tgroup.master { max-width: 230px; }
  .transport { gap: var(--sp-5); }
}

/* Bank-Reihe einzeilig und wischbar, sobald die Bänke nicht mehr nebeneinander
   passen — sonst legt sich die „+"-Taste in eine eigene Zeile und kostet eine
   volle Kachelreihe. */
@media (max-width: 1100px) {
  .bank-bar {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .bank-bar::-webkit-scrollbar { display: none; }
  .bank, .bank-tools { flex: none; scroll-snap-align: start; }
}
@media (max-width: 620px) {
  .dockbar { padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .dockbar .btn-go, .dockbar .btn-panic { min-width: 92px; min-height: 50px; }
  .nc-label { display: none; }
  .nc-name { font-size: var(--fs-4); max-width: 38vw; }
  .strip-right { width: 100%; justify-content: space-between; }
  .status-leds { gap: 10px; }
}

/* ===========================================================================
   APP-SHELL — feste Leisten oben/unten, scrollende Arbeitsfläche
   ========================================================================= */

/* Zeile 1: Identität und Zustand */
.appbar {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6);
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
  background: var(--grad-bezel);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--edge-hi), inset 0 0 0 1px var(--bezel-edge);
}

/* Zeile 2: Monitoring und Werkzeug (nutzt die .transport-Stile weiter) */
.transport.toolbar {
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--grad-panel);
}

/* Setlist-Gruppe mit Aktionsmenü */
.setlist-group { display: flex; align-items: center; gap: 10px; }
.setlist-group > .label { font-size: var(--fs-2); }
.menu { position: relative; }
.menu-pop {
  position: absolute; top: calc(100% + var(--sp-3)); left: 0; z-index: 70;
  min-width: 190px; padding: var(--sp-3);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--elev-2);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.menu-pop[hidden] { display: none; }
/* Ein Eintragsstil für Knopf und Link — vorher zweimal ausgeschrieben */
.menu-pop button, .menu-pop a {
  display: flex; align-items: center;
  text-align: left; background: transparent; border: 0; border-radius: var(--r-1);
  color: var(--text); font-family: var(--font-ui); font-size: var(--fs-4);
  text-decoration: none;
  padding: 0 var(--sp-4); cursor: pointer; min-height: var(--h-tool);
}
.menu-pop a { color: var(--text-dim); }
.menu-pop button:hover, .menu-pop a:hover { background: var(--key-2); color: var(--text); }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-2) var(--sp-1); }

/* Arbeitsfläche: Pads links, Inspector rechts */
.workspace {
  min-height: 0;                      /* sonst wächst das Grid über die Zeile hinaus */
  display: grid;
  grid-template-columns: 1fr var(--insp-w, 420px);
  overflow: hidden;
}
.pads-col {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 14px 14px;
}
/* Bank-Reihe bleibt beim Scrollen oben */
.bank-bar {
  position: sticky; top: 0; z-index: 5;
  padding: 12px 2px 8px;
  background: linear-gradient(180deg, var(--bg-deep) 65%, transparent);
}

.inspector {
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--grad-panel);
}
.insp-tabs {
  display: flex; gap: 2px; padding: 8px 10px 0;
  border-bottom: 1px solid var(--line);
}
.insp-tab {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-3); font-weight: 600; color: var(--text-dim);
  background: transparent; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--r-2) var(--r-2) 0 0; padding: 10px 16px; cursor: pointer; min-height: 42px;
}
.insp-tab:hover { color: var(--text); }
.insp-tab[aria-selected="true"] {
  color: var(--ink-hi); background: var(--panel);
  border-color: var(--line);
  box-shadow: inset 0 2px 0 var(--accent);
}
.insp-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* Panels im Inspector flach — der Inspector selbst ist die Fläche */
.inspector .cues,
.inspector .pool,
.inspector .schedule {
  background: transparent; border: 0; border-radius: 0; padding: 14px 16px 20px;
}
.inspector .cues[hidden],
.inspector .pool[hidden],
.inspector .schedule[hidden] { display: none; }

/* Auswahlfelder im Inspector nicht mehr nach rechts drücken (kein Platz) */
.inspector #cue-pad, .inspector #pool-search { margin-left: 0; }
.inspector .cues-head, .inspector .pool-head, .inspector .schedule-head { row-gap: 8px; }

/* Schmale Screens: eine Spalte, Inspector unter dem Grid */
@media (max-width: 1100px) {
  /* Einspaltig: die Arbeitsfläche selbst scrollt, Pads und Inspector fließen
     untereinander. Wichtig: KEIN 1fr für die Pad-Spalte — sie würde durch
     min-height: 0 auf wenige Pixel zusammenfallen und die Pads liefen über den
     Inspector. Beide Zeilen nehmen ihre Inhaltshöhe. */
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .pads-col { overflow: visible; min-height: auto; }
  .bank-bar { position: static; background: none; }
  .inspector {
    border-left: 0; border-top: 1px solid var(--line);
    max-height: none; min-height: auto; overflow: visible;
  }
  .insp-body { overflow: visible; }
  .insp-tabs { position: sticky; top: 0; z-index: 6; background: var(--bezel-2); }
  .help-sec, .sd-pick-list { max-height: none; }
}

/* Schlanke, dunkle Scrollbalken */
.pads-col, .insp-body, .pool-list, .cues-list, .timer-list, .schedule-list {
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-hi); border-radius: var(--r-2);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bezel-edge); background-clip: content-box; }

/* Toast über der Live-Leiste */
.toast { bottom: 88px; }

/* Ruhiger für Menschen, die Bewegung reduzieren wollen — ein Block für alles */
@media (prefers-reduced-motion: reduce) {
  .pad.playing, .guard-release, .led.pulse, .armswitch.flash,
  .pad.blocked, .bank-live, .tour-spot { animation: none !important; }
  .tour-spot { transition: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* Cue-/Timer-Zeilen im schmalen Inspector: definierte Umbrüche statt freiem Wrap.
   Zeile 1 = Nummer · Name · Status · Aktionen, Zeile 2 = Notiz. */
/* Cue-Zeilen brauchen im Inspector keine Sonderregeln mehr — das Raster trägt. */
.inspector .cue-state { min-width: auto; }

.inspector .timer-row { row-gap: 6px; }
.inspector .timer-row .cue-name { flex: 1 1 100%; order: 10; }
.inspector .tr-abs { min-width: auto; }

/* Kein Aufweiten der Shell durch min-content: Spalten hart begrenzen und
   allen Shell-Kindern min-width:0 geben, damit Inhalte schrumpfen statt zu drücken. */
body { grid-template-columns: minmax(0, 1fr); }
.appbar, .transport.toolbar, .workspace, .dockbar { min-width: 0; }
.workspace { grid-template-columns: minmax(0, 1fr) var(--insp-w, 420px); }
.pads-col, .inspector, .insp-body, .dock-go { min-width: 0; }
@media (max-width: 1100px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
}

/* Sehr schmal: Auswahlfelder und Leisten dürfen komplett schrumpfen */
@media (max-width: 620px) {
  .next-cue { min-width: 0; }
  #setlist-sel, #cue-pad, #timer-pad { min-width: 0; max-width: 100%; }
  .timer-bar, .cues-head, .pool-head, .schedule-head, .setlist-group { min-width: 0; }
  .setlist-group { flex-wrap: wrap; }
}

/* ===========================================================================
   STREAM DECK (WebHID)
   ========================================================================= */

/* Panel im Inspector flach halten (wie die anderen Sektionen) */
.inspector .sdpanel { background: transparent; border: 0; border-radius: 0; padding: 14px 16px 20px; }
.insp-body > section[hidden] { display: none !important; }

.sd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sd-head h2 {
  font-family: var(--font-label); text-transform: uppercase; margin: 0;
  font-size: var(--fs-3); letter-spacing: var(--ls-caps); color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.sd-head h2::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-round);
  background: var(--text-mute); box-shadow: none;
}
body.sd-on .sd-head h2::before { background: var(--ready); --signal: var(--ready); box-shadow: var(--glow-dot) var(--signal); }
.sd-status {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-mute);
}
body.sd-on .sd-status { color: var(--ready); }
.sd-head .btn-sm:last-of-type { margin-left: auto; }

.sd-note {
  margin-top: 12px; font-size: var(--fs-3); line-height: 1.5; color: var(--amber);
  border: 1px solid rgb(var(--amber-rgb) / .35); border-radius: var(--r-2); padding: 9px 12px;
  background: rgb(var(--amber-rgb) / .07);
}
.sd-note code { font-family: var(--font-mono); font-size: var(--fs-2); }

.sd-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 9px 12px; margin-top: 10px;
}
.sd-bar .label { font-size: var(--fs-2); color: var(--text-mute); }
.sd-model { display: flex; align-items: center; gap: 6px;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-dim); }
.sd-model select, #sd-model {
  font-family: var(--font-ui); font-size: var(--fs-3); color: var(--text);
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-1); padding: 5px 8px;
}
.sd-page-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sd-page {
  font-family: var(--font-mono); font-size: var(--fs-3); color: var(--text-dim);
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-1);
  padding: 5px 10px; cursor: pointer;
}
.sd-page.active { color: var(--ink-hi); background: var(--grad-blue-dim); border-color: var(--accent); }

.sd-hint { margin-top: 12px; font-size: var(--fs-3); line-height: 1.5; color: var(--text-mute); }
.sd-hint strong { color: var(--text-dim); font-weight: 600; }

/* Nachbildung des Tastenrasters — zeigt exakt die Bilder des Geräts */
.sd-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(var(--sd-cols, 5), minmax(0, 1fr));
  gap: 6px;
  max-width: 100%;
}
.sd-key {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--sunk-2); border: 1px solid var(--hairline); border-radius: var(--r-2);
  padding: 0; cursor: pointer; overflow: hidden;
  box-shadow: var(--edge-hi), var(--elev-1);
}
.sd-key canvas { display: block; width: 100%; height: 100%; }
.sd-key:hover { border-color: var(--line-hi); }
.sd-key.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.sd-key.dragover { outline: 2px dashed var(--accent); outline-offset: -2px; }
.sd-key .sd-idx {
  position: absolute; top: 2px; left: 4px; z-index: 2;
  font-family: var(--font-mono); font-size: var(--fs-1); color: rgb(255 255 255 / .28);
}

/* Zuweisung */
.sd-assign {
  margin-top: 12px; padding: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-3);
  display: flex; flex-direction: column; gap: 10px;
}
.sd-assign[hidden] { display: none; }
.sd-assign h3 {
  margin: 0; font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--ls-caps); font-size: var(--fs-2); color: var(--text-dim);
}
.sd-assign-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-assign select, .sd-assign input[type="text"] {
  font-family: var(--font-ui); font-size: var(--fs-3); color: var(--text);
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-1);
  padding: 6px 9px; min-width: 0; flex: 1 1 150px;
}
.sd-assign .btn-sm { flex: none; }
.sd-actions-grid { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .sd-grid { gap: 4px; }
}

/* ===========================================================================
   Hilfe, Onboarding-Tour und Tastenkürzel
   ========================================================================= */

/* Vorher der kleinste Knopf der Leiste mit der größten Schrift — jetzt
   quadratisches Geschwister von Vollbild und Aktionen. */
.btn-help {
  width: var(--h-tool); padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-4);
  font-weight: 700; line-height: 1;
}

/* Keycap — überall gleich, auch in den Hilfetexten */
.kc { min-width: 26px; font-size: var(--fs-3); }
.kc-plus { color: var(--text-mute); font-size: var(--fs-3); padding: 0 var(--sp-3); }
.kc-range { color: var(--text-dim); font-size: var(--fs-3); padding-left: var(--sp-2); }

/* ---- Overlay ---- */
.help-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: 20px;
  background: rgb(4 5 7 / .74);
  backdrop-filter: blur(2px);
}
.help-overlay[hidden] { display: none; }

.help-panel {
  width: min(980px, 100%); max-height: min(84dvh, 780px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--bezel-edge);
  border-radius: var(--r-4);
  box-shadow: var(--elev-3);
}
.help-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--grad-bezel);
  border-bottom: 1px solid var(--line);
}
.help-title {
  font-family: var(--font-label); font-weight: 700; font-size: var(--fs-5);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.help-sub {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-mute);
}
.help-head .help-close { margin-left: auto; }

.help-body { min-height: 0; display: grid; grid-template-columns: 186px minmax(0, 1fr); }
.help-rail {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 10px;
  border-right: 1px solid var(--line); background: var(--bezel-2);
}
.help-navbtn {
  text-align: left; background: transparent; border: 1px solid transparent;
  border-radius: var(--r-2); padding: 10px 11px; min-height: 40px; cursor: pointer;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-3); color: var(--text-dim);
}
.help-navbtn:hover { color: var(--text); background: var(--key-2); }
.help-navbtn[aria-selected="true"] {
  color: var(--text); background: var(--panel-2); border-color: var(--line);
  box-shadow: inset 2px 0 0 var(--accent);
}

.help-content { min-height: 0; overflow: hidden; }
.help-sec {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 22px 26px;
}
.help-sec[hidden] { display: none; }
.help-sec h3 {
  margin: 0 0 8px; font-family: var(--font-label); font-weight: 700; font-size: var(--fs-6);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.help-sec h4 { margin: 0 0 4px; font-size: var(--fs-4); color: var(--text); }
.help-sec p, .help-sec li { color: var(--text-2); font-size: var(--fs-4); line-height: 1.62; }
.help-sec p { margin: 0 0 12px; }
.help-sec a { color: var(--accent); }
.help-sec b { color: var(--text); }

.help-group {
  margin: 20px 0 8px !important;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-mute);
}
.help-keys { display: flex; flex-direction: column; }
.help-keyrow {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px; align-items: start; padding: 7px 0;
  border-bottom: 1px solid var(--key-2);
}
.help-keycaps { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.help-keytext { color: var(--text-2); font-size: var(--fs-4); line-height: 1.5; }
.help-empty { color: var(--text-dim); }

.help-cta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 20px; padding: 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-3);
}
.help-cta-note { color: var(--text-dim); font-size: var(--fs-3); }
.help-steps, .help-check { margin: 0 0 14px; padding-left: 20px; }
.help-steps li, .help-check li { margin-bottom: 6px; }
.help-hint { color: var(--text-dim); font-size: var(--fs-3); }
.help-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline;
}

.help-topic {
  margin: 0 0 16px; padding: 13px 15px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-3);
}
.help-topic p:last-child { margin-bottom: 0; }
.help-topic.help-warn { border-color: var(--amber); background: var(--amber-bg-2); }
.help-topic.help-warn h4 { color: var(--amber); }

@media (max-width: 760px) {
  .help-body { grid-template-columns: minmax(0, 1fr); }
  .help-rail {
    flex-direction: row; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .help-navbtn { white-space: nowrap; }
  .help-navbtn[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .help-keyrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .help-panel { max-height: 90dvh; }
}

/* ---- Onboarding-Angebot beim ersten Start ---- */
.help-invite {
  position: fixed; z-index: 250;
  right: 16px; bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  width: min(330px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--bezel-edge); border-radius: var(--r-4);
  box-shadow: var(--elev-2);
}
.help-invite .hi-title {
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-wide); font-size: var(--fs-3); color: var(--accent); margin-bottom: 4px;
}
.help-invite p { margin: 0 0 12px; color: var(--text-2); font-size: var(--fs-4); line-height: 1.55; }
.hi-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hi-actions .btn-go { min-height: 38px; padding: 0 14px; font-size: var(--fs-3); }

/* ---- Tour: Spot und Karte ---- */
.tour-spot {
  position: fixed; z-index: 280; pointer-events: none;
  left: var(--x, 0); top: var(--y, 0);
  width: var(--w, 0); height: var(--h, 0);
  border: 2px solid var(--accent); border-radius: var(--r-4);
  box-shadow: 0 0 0 9999px rgb(4 5 7 / var(--scrim)), var(--glow-pulse) var(--accent);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
  display: none;
}
.tour-spot.on { display: block; }

.tour-tip {
  position: fixed; z-index: 290; display: none;
  left: var(--tx, 0); top: var(--ty, 0); width: var(--tw, 340px);
  padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--bezel-edge); border-radius: var(--r-4);
  box-shadow: var(--elev-2);
}
.tour-tip.on { display: block; }
.tour-tip .tt-step {
  font-size: var(--fs-2); color: var(--text-mute); letter-spacing: var(--ls-wide); margin-bottom: 4px;
}
.tour-tip h4 {
  margin: 0 0 6px; font-family: var(--font-label); font-weight: 700; font-size: var(--fs-5);
  text-transform: uppercase; letter-spacing: var(--ls-tight);
}
.tour-tip p { margin: 0 0 12px; color: var(--text-2); font-size: var(--fs-4); line-height: 1.58; }
.tt-actions { display: flex; gap: 8px; }
.tt-actions .tt-end { margin-left: auto; }
.tt-actions button:disabled { opacity: .4; cursor: default; }

/* ===========================================================================
   SAFE: Wirkung statt Zweitbeschriftung · Tastatur-Fokus · Symbole
   Der Zustand wird nur noch vom Arm-Schalter benannt (siehe .armswitch).
   Was hier steht, ist die WIRKUNG am Ort der Handlung — das ist keine zweite
   Aussage, sondern dieselbe Aussage dort, wo gehandelt wird.
   ========================================================================= */

/* Hinweis, wenn die Tastatur in einem Textfeld hängt: eine Beschriftung, kein
   Signal — deshalb randlos statt gestrichelt umrahmt. Gestrichelt heißt in
   dieser App „hier ist nichts, hier kann etwas hin". */
.focus-hint {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--ls-caps); font-size: var(--fs-2);
  color: var(--text-dim); white-space: nowrap;
}
.focus-hint[hidden] { display: none; }
.focus-hint .kc { text-transform: none; }

/* SAFE: Pads sichtbar kalt — dieselbe Sprache wie die abgedunkelten Stream-Deck-Tasten */
body.safe .pad:not(.pad-add) { filter: saturate(.65) brightness(.82); }
body.safe .pad:not(.pad-add):hover { filter: none; }
body.safe.editing .pad:not(.pad-add) { filter: none; }   /* im Einrichten stört das */

/* SAFE: GO liest als gesperrt */
body.safe .btn-go {
  background: var(--grad-go-off);
  border-color: var(--go-off-edge); color: var(--go-off-ink); box-shadow: none;
}
body.safe .btn-go .ico { opacity: .55; }

/* Abgewiesener Trigger: kurzer amberner Ruck am Pad */
.pad.blocked { animation: padBlocked .42s ease-out; }
@keyframes padBlocked {
  0%   { transform: translateX(0);    box-shadow: 0 0 0 0 var(--amber); }
  20%  { transform: translateX(-4px); box-shadow: 0 0 0 2px var(--amber); }
  45%  { transform: translateX(4px);  box-shadow: 0 0 0 2px var(--amber); }
  70%  { transform: translateX(-2px); }
  100% { transform: translateX(0);    box-shadow: 0 0 0 0 rgb(var(--amber-rgb) / 0); }
}

/* Symbole in den Live-Tasten */
.btn-go, .btn-panic { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn-go .ico, .btn-panic .ico { width: 20px; height: 20px; flex: none; }

/* ===========================================================================
   Stream-Deck-Zuweisung: Suche + Ein-Klick-Liste
   ========================================================================= */
.sd-assign-idle { color: var(--text-mute); font-size: var(--fs-3); margin: 10px 0 0; }

.sd-assign-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line);
}
.sd-assign-head h3 {
  margin: 0; font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--ls-caps); font-size: var(--fs-3); color: var(--text-dim);
}
.sd-assign-now {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-tight);
  font-size: var(--fs-4); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sd-pick-tabs { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; }
.sd-pick-tab {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-2); color: var(--text-dim);
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-1);
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.sd-pick-tab:hover { color: var(--text); }
.sd-pick-tab.active { color: var(--text); border-color: var(--accent); background: rgb(var(--accent-rgb) / var(--tint-wash)); }
.sd-pick-search {
  flex: 1 1 auto; min-width: 0;
  background: var(--key); border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--text); font-family: var(--font-ui); font-size: var(--fs-3); padding: 6px 9px;
}
.sd-pick-search:focus { outline: none; border-color: var(--accent); }

.sd-pick-list {
  max-height: 236px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line); border-radius: var(--r-2); padding: 5px; background: var(--bezel-2);
}
.sd-pick {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: center; gap: 9px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-1);
  padding: 7px 9px; cursor: pointer; text-align: left; min-height: 36px;
}
.sd-pick:hover { background: var(--key-2); border-color: var(--line); }
.sd-pick.current { border-color: var(--accent); background: rgb(var(--accent-rgb) / var(--tint-wash)); }
.sd-pick:disabled { opacity: .5; cursor: not-allowed; }
.sd-pick-bar { width: 4px; height: 18px; border-radius: var(--r-0); background: var(--c, var(--text-dim)); }
.sd-pick-name {
  font-family: var(--font-ui); font-size: var(--fs-4); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-pick-meta {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-size: var(--fs-1); color: var(--text-mute); white-space: nowrap;
}
.sd-pick-empty { color: var(--text-mute); font-size: var(--fs-3); margin: 6px 4px; }

.sd-assign-special { margin-top: 12px; }
.sd-assign-special .label { display: block; margin-bottom: 6px; }

/* Bank mit laufendem Sound: Tally an der Bus-Taste, auch wenn die Bank nicht offen ist */
.bank { position: relative; }
.bank-live {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: var(--r-round);
  background: var(--tally-on); --signal: var(--tally-on); box-shadow: var(--glow-dot) var(--signal);
  animation: bankLive 1.4s ease-in-out infinite;
}
@keyframes bankLive { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.bank.live { border-color: rgb(var(--tally-rgb) / var(--tint-edge)); }

/* Stream Deck abgezogen: der Zustand muss auffallen, nicht nur im Text stehen */
.sd-status.lost {
  color: var(--amber); border-color: var(--amber);
  background: var(--amber-bg-2); padding: 3px 9px; border-radius: var(--r-1); border: 1px solid var(--amber);
}

/* ===========================================================================
   Kompatibilität
   Das Overlay und der Hinweisdialog tragen ihre Optik im Skript (js/compat.js) —
   eine Warnung für einen kaputten Browser darf nicht davon abhängen, dass dieses
   Stylesheet geladen und verstanden wurde. Hier steht nur die Plakette, die im
   laufenden Betrieb daran erinnert, dass etwas fehlt.
   ========================================================================= */
.compat-chip {
  --signal: var(--amber);
  min-height: var(--h-tool);
  padding: 0 var(--sp-4);
  border: 1px solid var(--amber);
  border-radius: var(--r-1);
  background: var(--amber-bg-2);
  color: var(--amber-ink);
  font-family: var(--font-label);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.compat-chip:hover { background: rgb(var(--amber-rgb) / var(--tint-fill)); }
.compat-chip::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: var(--sp-3);
  border-radius: var(--r-round);
  background: var(--amber);
  box-shadow: var(--glow-dot) var(--signal);
  vertical-align: middle;
}

/* ===========================================================================
   TELEFON — eigenes Layout, kein verkleinertes Studio

   Befund vorher bei 390×844: die vier Leisten fraßen 431 von 844 px (51 %),
   sichtbar waren vier Pads. Die Shell wird hier auf zwei Zonen zusammengezogen:
   eine Kopfzeile und die Pads. Alles Einrichten wandert ins Überlauf-Menü oder
   auf den großen Bildschirm.

   Aufbau: Was in BEIDEN Lagen gilt, hängt an `body.phone`. Die Klasse setzt
   `setupPhoneChrome()` zusammen mit dem Umzug der Knoten (Mute all und Uhr in
   die Kopfzeile, GO in die Cue-Kopfzeile) — Umzug und Aussehen gehören zusammen
   und dürfen nicht auseinanderlaufen. In den zwei Medienabfragen darunter stehen
   nur noch die Maße, die sich zwischen hoch und quer unterscheiden.
   ========================================================================= */

/* Das Menü und die Leisten existieren immer, sind aber nur am Telefon sichtbar. */
.phone-menu { display: none; }
.audio-bar, .sheet-scrim { display: none; }
.btn-more { width: var(--h-tool); padding: 0; font-size: var(--fs-5); line-height: 1; }

/* ---------------------------- gilt in beiden Lagen ---------------------------- */

/* Weg: Marke, Typenschild, LED-Reihe, Plakette, Transport-Leiste — und die
   Live-Leiste. GO ohne sichtbare Cue-Liste ist blind, und eine 132-px-Säule im
   Querformat kostete ein Sechstel der Breite für genau diese blinde Taste. */
body.phone .brand-mark,
body.phone .model,
body.phone .status-leds,
body.phone .compat-chip,
body.phone .transport.toolbar,
body.phone .dockbar { display: none; }
body.phone .phone-menu { display: block; }

body.phone .strip-right {
  width: 100%; margin-left: 0; gap: var(--sp-3);
  flex-wrap: nowrap; justify-content: space-between;
}

/* Mute all in der Kopfzeile: rote Kontur statt roter Fläche — dezenter als in
   der Live-Leiste, aber die einzige Taste dort mit Signalfarbe. Solange etwas
   läuft, füllt sie sich. */
body.phone .strip-right .btn-panic {
  min-width: 0; min-height: 44px; width: 44px; padding: 0;
  background: none; border-color: rgb(var(--tally-rgb) / var(--tint-edge));
  color: var(--tally-on); box-shadow: none;
  font-size: 0;                                  /* nur das Symbol */
}
body.phone .strip-right .btn-panic .ico { width: 22px; height: 22px; }
body.phone .strip-right .btn-panic:hover { background: rgb(var(--tally-rgb) / var(--tint-wash)); }
/* Läuft etwas, füllt sich die Taste — sie wächst aber NICHT. Mit Beschriftung
   war sie 118px breit, schob die Uhr aus der Zeile und wurde am rechten Rand
   abgeschnitten. Eine Taste, die während der Show ihre Größe ändert, ist
   ohnehin die falsche Art von Bewegung. */
body.phone.audio-active .strip-right .btn-panic {
  --signal: var(--tally-on);
  background: var(--grad-red); border-color: var(--red-edge);
  color: var(--ink-hi); box-shadow: var(--glow) var(--signal);
}

/* Trefferflächen sind unantastbar, die Uhr gibt nach: bei 375px hatten sich
   Hilfe und Mute all sonst auf 37px zusammengequetscht — unter der 44px-Grenze,
   und das ausgerechnet bei den zwei Tasten, die man im Dunkeln trifft. */
body.phone .strip-right > * { flex: 0 0 auto; }
body.phone .strip-right .tgroup { flex: 0 1 auto; min-width: 0; }

/* Die Uhr wird per JS in die Kopfzeile gehängt; hier nur ihr Telefon-Maß. */
body.phone .strip-right .tgroup .clock {
  font-size: var(--fs-4); padding: 0 var(--sp-3);
  border-color: transparent; background: none;
  white-space: nowrap;     /* „--:--:--" brach vor dem ersten Tick auf zwei Zeilen */
}
body.phone .strip-right .tgroup .clock small { display: none; }

/* Im Überlauf-Menü sitzen die umgezogenen Gruppen untereinander. */
body.phone #ph-menu-pop { left: auto; right: 0; min-width: 250px; max-width: calc(100vw - 24px); }
body.phone #ph-menu-pop .setlist-group,
body.phone #ph-menu-pop .tgroup,
body.phone #ph-menu-pop .transport-actions { display: flex; width: 100%; margin: 0; }
body.phone #ph-menu-pop .setlist-group { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-2) 0; }
body.phone #ph-menu-pop #setlist-sel { flex: 1 1 100%; max-width: none; }
body.phone #ph-menu-pop .tgroup.master { max-width: none; padding: var(--sp-2) 0; }
body.phone #ph-menu-pop #fullscreen,
body.phone #ph-menu-pop #edit-toggle { flex: 1 1 auto; }

/* Bänke in einer wischbaren Zeile */
body.phone .bank-bar {
  position: sticky; top: 0; z-index: 5;
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: var(--sp-3) 0 var(--sp-2);
  background: linear-gradient(180deg, var(--bg-deep) 70%, transparent);
  scrollbar-width: none;
}
body.phone .bank-bar::-webkit-scrollbar { display: none; }
body.phone .bank { flex: none; scroll-snap-align: start; }
body.phone .bank-tools { display: none !important; }   /* Bänke verwaltet man am Rechner */

/* Kacheln: alle exakt gleich groß. `min-height` allein ließ Kacheln mit längerem
   Titel wachsen — im Raster standen dann unterschiedlich hohe Tasten. Feste
   Rasterzeilen lösen das, und ihre Höhe ist so gewählt, dass die größte Bank die
   Fläche ausfüllt. */
body.phone .pads-col {
  display: flex; flex-direction: column;
  padding: 0 var(--sp-4) var(--sp-4);
  overflow-y: auto; min-height: 0;
}
/* Die Zeilen dehnen sich in die freie Fläche (`1fr`), fallen aber nie unter
   `--pad-h` und wachsen nie über `--pad-max`: eine Bank mit zwei Pads bekommt
   dadurch keine bildschirmhohen Kacheln, eine mit neun füllt den Schirm aus.
   Alle Kacheln bleiben in jedem Fall exakt gleich groß. */
body.phone .grid {
  flex: 1 0 auto;
  grid-auto-rows: minmax(var(--pad-h), 1fr);
  align-content: start;
}
body.phone .pad, body.phone .pad-add { min-height: 0; max-height: var(--pad-max); }
body.phone.editing .grid { grid-auto-rows: minmax(var(--pad-h), auto); }
body.phone.editing .pad { max-height: none; }
body.phone .pad-label { font-size: var(--fs-5); }

/* GO gehört zur Liste, die es abarbeitet: der Block sitzt am Telefon in der
   Kopfzeile der Cue-Liste (per JS dorthin verschoben), nicht mehr am Rand. */
body.phone .cues-head { flex-wrap: wrap; row-gap: var(--sp-3); }
body.phone .cues-head .dock-go {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; order: 9;
}
body.phone .cues-head .next-cue { flex: 1 1 auto; min-width: 0; }
body.phone .cues-head .nc-name { max-width: none; }
body.phone .cues-head .btn-go { flex: 0 0 auto; min-height: 48px; padding: 0 var(--sp-6); }
body.phone .cues-hint { display: none; }        /* „GO unten" stimmt hier nicht mehr */

/* Audio-Freigabe: der Hinweis, ohne den geplante Sounds stumm bleiben */
body.phone .audio-bar {
  display: block; width: 100%; border: 0; cursor: pointer;
  border-top: 1px solid var(--amber);
  background: var(--amber-bg-2); color: var(--amber-ink);
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--ls-caps); font-size: var(--fs-2);
  padding: var(--sp-4);
}
body.phone .audio-bar[hidden] { display: none !important; }

/* Toast und Onboarding-Karte über der Live-Leiste — vorher feste 88/78px, die
   mit der Telefon-Leiste und der Home-Indicator-Zone nicht mehr stimmten.
   `--dock-h` ist am Telefon 0 (keine Live-Leiste). */
body.phone .toast { bottom: calc(var(--dock-h, 0px) + var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
body.phone .help-invite {
  right: var(--sp-4); left: var(--sp-4); width: auto;
  bottom: calc(var(--dock-h, 0px) + var(--sp-6) + env(safe-area-inset-bottom, 0px));
}

/* Einrichten am Telefon: ehrlich statt kaputt. Ziehen feuert auf iOS-Touch nicht;
   eigene Titel kommen deshalb über einen Tipp auf die leere Kachel. */
body.phone.editing .pads-col::before {
  content: "Umsortieren und Trimmen brauchen Maus oder Trackpad. Eigene Titel: leere Kachel antippen.";
  display: block; margin: var(--sp-3) 0;
  padding: var(--sp-4); border-radius: var(--r-2);
  background: var(--amber-bg); border: 1px solid var(--amber);
  color: var(--amber-ink); font-size: var(--fs-3); line-height: var(--lh-ui);
}

/* Sehr schmal (iPhone SE 1. Generation und Konsorten): das Fragezeichen weicht —
   die Hilfe steht ohnehin im Überlauf-Menü unter „Aktionen". Die Uhr bleibt: sie
   wird während der Show gebraucht, ein zweiter Weg zur Hilfe nicht. */
@media (max-width: 360px) {
  /* Hier reicht es auch ohne Sekunden nicht: die Uhr weicht ganz. Kein Verlust —
     die Systemuhr steht direkt darüber in der Statusleiste. */
  body.phone .strip-right .tgroup { display: none; }
  body.phone .armswitch .as-opt { padding: 0 var(--sp-3); }
  body.phone .strip-right { gap: var(--sp-2); }
}

/* ---------------------------- Hochformat ---------------------------- */
@media (max-width: 620px) {
  /* Zwei Zeilen plus der Audio-Hinweis: Kopf, Pads, (Hinweis). */
  :root { --pad-min: 132px; --pad-h: 118px; --pad-max: 168px; }

  body { grid-template-rows: auto 1fr auto; }
  .appbar    { grid-row: 1; }
  .workspace { grid-row: 2; }
  .audio-bar { grid-row: 3; }
  .inspector { display: none; }

  .appbar {
    flex-wrap: nowrap; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    padding-top: calc(var(--sp-2) + env(safe-area-inset-top, 0px));
  }
  .armswitch { min-height: 44px; }
  .armswitch .as-opt { font-size: var(--fs-4); padding: 0 var(--sp-4); }
  .workspace { grid-template-rows: 1fr; }
}

/* ---- Querformat: Höhe ist knapp, Breite reichlich ---- */
/* Nicht am Eingabegerät festmachen, sondern an der tatsächlichen Einschränkung:
   im Querformat eines Telefons bleiben rund 390px Höhe. Dieselbe Not hat ein
   kleines Browserfenster — die Regel greift dort genauso richtig. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --pad-min: 150px; --pad-h: 96px; --pad-max: 140px; }

  body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .appbar    { grid-row: 1; }
  .workspace { grid-row: 2; grid-template-rows: 1fr; }
  .audio-bar { grid-row: 3; }

  .appbar {
    flex-wrap: nowrap; padding: var(--sp-1) var(--sp-4);
    padding-top: calc(var(--sp-1) + env(safe-area-inset-top, 0px));
    padding-left: calc(var(--sp-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--sp-4) + env(safe-area-inset-right, 0px));
  }
  .armswitch { min-height: 40px; }
  body.phone .pads-col {
    padding-left: calc(var(--sp-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--sp-4) + env(safe-area-inset-right, 0px));
  }

  /* --------- Inspector als Bottom Sheet ---------
     Nur hier: im Hochformat gibt es keine Cue-Liste am Telefon, dort ist der
     Inspector ganz ausgeblendet. Seit die Live-Säule weg ist, geht das Sheet
     über die volle Breite. */
  .pads-col { overflow-y: auto; min-height: 0; }
  .inspector {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    height: calc(100dvh - 54px);
    transform: translateY(102%);
    transition: transform var(--t-slow) ease;
    background: var(--panel); border-top: 1px solid var(--bezel-edge);
    border-left: 0; border-radius: var(--r-4) var(--r-4) 0 0;
    box-shadow: var(--elev-3);
    overflow: hidden; max-height: none; min-height: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.sheet-open .inspector { transform: translateY(0); }
  .inspector::before {                            /* Ziehgriff als Affordanz */
    content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px; border-radius: var(--r-pill); background: var(--line-hi);
  }
  .insp-tabs { padding-top: var(--sp-4); }
  .insp-body { overflow-y: auto; min-height: 0; flex: 1; }
  /* Media und Stream Deck bleiben im DOM (Tour und setInspectorTab brauchen sie),
     ihre Reiter sind am Telefon aber ausgeblendet — dort wird nicht eingerichtet. */
  .insp-tab[data-panel="pool"], .insp-tab[data-panel="streamdeck"] { display: none; }
  .sheet-scrim {
    display: block; position: fixed; inset: 0; z-index: 79;
    background: rgb(4 5 7 / var(--scrim)); border: 0;
  }
  .sheet-scrim[hidden] { display: none !important; }
}

/* Schmales Querformat (iPhone SE, iPhone 8 quer): mit 150px Mindestbreite blieben
   vier Spalten, die neunte Kachel fiel in eine dritte Reihe und wurde
   angeschnitten. Schmalere Kacheln ergeben fünf Spalten — zwei volle Reihen. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 700px) {
  :root { --pad-min: 118px; }
}

/* Bildschirmsperre gehalten: ein Punkt an der Uhr, damit der Zustand sichtbar ist */
body.wake-held .clock { position: relative; }
body.wake-held .clock::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: var(--r-round);
  --signal: var(--ready);
  background: var(--signal); box-shadow: var(--glow-dot) var(--signal);
}

/* Touch: die Bedienelemente in den Panels sind dort ebenfalls Ziele.
   Muss am DATEIENDE stehen — die Primitive haben dieselbe Spezifität, also
   entscheidet die Position in der Kaskade. Der Zieh-Griff bleibt bewusst klein:
   Ziehen funktioniert per Touch nicht, ein großes Ziel würde etwas versprechen,
   was es nicht kann. */
@media (pointer: coarse) {
  .insp-tab { min-height: var(--hit-min); }
  .cue-here, .cue-fire, .cue-del, .sched-del, .timer-del { width: 40px; height: 40px; }
  #cue-pad, #timer-pad, #pool-search, .sd-pick-search, .cue-note,
  .sched-time, .sched-pad, .tr-after input { min-height: 40px; }

  /* Zeit und Zahlen: das native Feld des Geräts, in Fingergröße. `type="time"`
     öffnet auf iOS und Android das gewohnte Rad — dafür darf das Feld weder
     verkleinert noch mit eigener Optik überschrieben werden. Ohne Sekunden
     (`step=60`, gesetzt in renderSchedule) sind es zwei Räder statt drei. */
  .sched-time, input[type="time"], input[type="date"], input[type="datetime-local"] {
    min-height: var(--hit-min);
    font-size: var(--fs-4);
    padding: 0 var(--sp-3);
  }
  .sched-time::-webkit-date-and-time-value { text-align: left; }
  input[type="number"] { min-height: var(--hit-min); font-size: var(--fs-4); }
}

/* ===========================================================================
   Ladeanzeige
   Beim ersten Start holt die App rund 7 MB Audio. Ohne Rückmeldung sieht sie in
   dieser Zeit aus wie eine App mit leeren Kacheln — am Telefon über Mobilfunk
   dauert das am längsten und fällt am meisten auf.
   ========================================================================= */
.load-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 3px; background: rgb(var(--accent-rgb) / .18);
  padding-top: env(safe-area-inset-top, 0px);
}
.load-bar[hidden] { display: none !important; }
.load-fill {
  height: 3px; width: 0;
  background: var(--accent);
  box-shadow: 0 0 10px -2px var(--accent);
  transition: width .18s ease-out;
}
.load-text {
  position: absolute; top: calc(9px + env(safe-area-inset-top, 0px)); right: var(--sp-4);
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--ls-caps); font-size: var(--fs-1);
  color: var(--text-dim); white-space: nowrap;
  background: var(--bg-deep); padding: 2px var(--sp-3); border-radius: var(--r-pill);
}
/* Am Telefon ist die Leiste das erste, was man sieht — dort etwas kräftiger.
   Der Zähler wandert nach unten: oben ist die Kopfzeile voll und er würde den
   Arm-Schalter überdecken. */
@media (max-width: 620px) {
  .load-bar, .load-fill { height: 4px; }
  .load-text {
    position: fixed; top: auto; left: var(--sp-4); right: auto;
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    font-size: var(--fs-2); color: var(--text);
    background: var(--panel-2); border: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-5);
    box-shadow: var(--elev-2);
  }
}
@media (prefers-reduced-motion: reduce) { .load-fill { transition: none; } }

/* Ladezähler und Onboarding-Karte teilen sich am Telefon die untere Ecke */
@media (max-width: 620px) {
  body:has(.load-bar:not([hidden])) .help-invite {
    bottom: calc(var(--dock-h, 0px) + 64px + env(safe-area-inset-bottom, 0px));
  }
}