/* wecap Player – Konfigurator und Operator-Seite */

html {
  scroll-padding-top: calc(var(--topbar-h) + 8px); /* Sprungziele nicht unter der Kopfleiste */
}

:root {
  --topbar-h: 52px; /* Kopfleiste (sticky); Abstand für weitere klebende Spalten */
  /* Farben aus Web Awesome (Designsprache 26.10.2026): eigene Namen zeigen auf --wa-* bzw. --wecap-*,
     hell und dunkel über die Klasse wa-light/wa-dark am <html> (theme.js). Keine festen Farbwerte mehr
     außerhalb dieses Blocks; Bestand wird Seite für Seite umgestellt. */
  --bg: var(--wa-color-surface-lowered);
  --panel: var(--wa-color-surface-default);
  --text: var(--wa-color-text-normal);
  --muted: var(--wa-color-text-quiet);
  --border: var(--wa-color-surface-border);
  /* Bedienfarbe = Markenblau (Auswahl, Primärknopf, Links, Fokus), nie Rot */
  --accent: var(--wa-color-brand-fill-loud);
  --accent-hover: var(--wa-color-brand-fill-loud);
  --accent-soft: var(--wa-color-brand-fill-quiet);
  --accent-text: var(--wa-color-brand-on-loud);
  --danger: var(--wecap-err-on);
  --ok: var(--wa-color-success-on-quiet);
  --warn: var(--wa-color-warning-on-quiet);
  --radius: var(--wa-border-radius-m);
  --font: var(--wa-font-family-body);
  --wa-focus-ring-offset: 0.125rem; /* design.md: Fokusrahmen mit Abstand */

  /* wecap-Bedeutungen (Werte aus .claude/agents/design.md, Barrierefreiheitsprüfung 26.10.2026) */
  --wecap-live-fill: var(--wa-color-red-50); --wecap-live-on: #fff;          /* nur Live */
  --wecap-pause-fill: var(--wa-color-yellow-80); --wecap-pause-on: var(--wa-color-gray-10);
  --wecap-err-fill: var(--wa-color-pink-95); --wecap-err-on: var(--wa-color-pink-40);
  --wecap-err-line: var(--wa-color-pink-50);
  /* feste Ausnahmen: Videoflächen, QR-Code und die Druckvorlage (Angebot) bleiben in beiden Modi gleich */
  --wecap-media-bg: #000; --wecap-media-on: #fff;
  --wecap-qr-bg: #fff;
  --wecap-paper: #fff; --wecap-ink: #111; --wecap-ink-soft: #555;

  /* Status für Zuschauer (Punkte, Rahmen): Live rot, Pause gelb, Vorab Markenblau, Ende neutral */
  --st-pre: var(--wa-color-brand-fill-loud);
  --st-live: var(--wecap-live-fill);
  --st-pause: var(--wa-color-yellow-60);
  --st-ended: var(--wa-color-neutral-fill-loud);
  --st-havarie: var(--wecap-err-line);
  --st-auto: var(--wa-color-neutral-fill-loud);
}

:root,
.wa-light {
  --wecap-stop-fill: #424554; --wecap-stop-fill-hover: #2f3240; --wecap-stop-on: #fff;
  --wa-color-focus: var(--wa-color-blue-40);
  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
  --wa-form-control-border-color: var(--wa-color-gray-50);
  --wecap-meter-fill: var(--wa-color-green-50); --wecap-off: var(--wa-color-gray-60);
  --wecap-pause-line: var(--wa-color-yellow-50);
}

.wa-dark {
  --wa-color-focus: var(--wa-color-blue-60); /* blue-40 hätte im Dunkeln nur 2,7:1 */
  --wecap-stop-fill: #e4e5e9; --wecap-stop-fill-hover: #ffffff; --wecap-stop-on: #1b1d26;
  --wa-color-neutral-border-loud: var(--wa-color-gray-50);
  --wa-form-control-border-color: var(--wa-color-gray-50);
  --wecap-meter-fill: var(--wa-color-green-60); --wecap-off: var(--wa-color-gray-50);
  --wecap-pause-line: transparent;
  --wecap-err-fill: var(--wa-color-pink-10); --wecap-err-on: var(--wa-color-pink-80);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
}

a {
  color: var(--wa-color-text-link); /* blue-40 hell / blue-70 dunkel: ≥ 4,5:1 auf allen Flächen */
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
}

h1 {
  font-size: 17px;
}

h2 {
  font-size: 16px;
  margin-bottom: 12px;
}

h3 {
  font-size: 14px;
}

[hidden] {
  display: none !important;
}

/* Kopfzeile */
.topbar {
  position: sticky; /* bleibt beim Scrollen oben (Paul, 23.10.2026) */
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--topbar-h);
  padding: 10px 20px;
  background: var(--panel);
  color: var(--text);
}

/* Marke: wecap•tv mit rotem Punkt (wie wecap.tv) */
.topbar .brand {
  margin: 0;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topbar .brand a {
  color: var(--text);
  text-decoration: none;
}

.brand-dot {
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.12em 0.08em;
  border-radius: 50%;
  background: var(--accent);
}

/* Bereiche: feste Reihenfolge, aktive Seite rot unterstrichen */
.topnav {
  display: flex;
  gap: 2px;
}

.topnav a {
  padding: 6px 10px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
}

.topnav a:hover {
  color: var(--text);
}

.topnav a[aria-current] {
  border-bottom-color: var(--accent);
  color: var(--wa-color-brand-on-quiet);
  font-weight: 600;
}

.topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
}

.topbar-icon:hover,
.topbar-icon[aria-current="page"] {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--text);
}

@media (max-width: 480px) {
  .topbar {
    position: static; /* auf dem Handy umgebrochen und hoch: nicht kleben lassen */
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
  }

  .topbar .brand {
    flex-basis: 100%;
  }

  .topnav {
    flex-basis: 100%;
    flex-wrap: wrap;
  }

  .topnav a {
    padding: 4px 8px;
  }
}

.topbar .spacer {
  flex: 1;
}

.topbar .role {
  font-size: 13px;
  opacity: 0.75;
}

/* Schaltflächen */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--wa-color-neutral-border-loud);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

button:hover:not(:disabled),
.button:hover {
  border-color: var(--wa-color-neutral-border-loud);
}

button:disabled,
button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a.button:focus-visible,
summary:focus-visible,
.drop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button.primary,
a.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

button.primary:hover:not(:disabled),
a.button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  filter: brightness(0.95);
}

button.danger {
  color: var(--danger);
}

button.small {
  min-height: 28px;
  padding: 2px 10px;
  font-size: 13px;
}

.topbar button {
  min-height: 30px;
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

/* Formulare */
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Feldbeschriftungen einzeilig, damit Felder einer Reihe auf gleicher Höhe stehen */
.grid > div > label:first-child,
.slate-field > label:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

input[type="text"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--wa-form-control-border-color);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

/* Datums- und Zeitfelder wie die übrigen Felder (Paul, 23.10.2026: Browser-Standard war ein Stilbruch) */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.4;
}

input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
  padding: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.85;
}

.vod-filter input[type="date"],
.vod-filter input[type="number"] {
  width: auto;
}

input[type="color"] {
  width: 52px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

input:disabled {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--muted);
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  min-height: 36px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 16px;
}

.grid .wide {
  grid-column: 1 / -1;
}

/* Farbfelder im Design: drei Spalten (Normal, Text, Beschriftung / Aktiv, Aktiv Text, Hintergrund) */
.grid + .color-grid {
  margin-top: 16px;
}

.grid.color-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 560px) {
  .grid.color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Login: dunkelgrauer Grund wie die Kopfleiste, Logo darüber, helle Karte */
#login:not([hidden]) {
  min-height: 100vh;
  padding: 12vh 16px 40px;
  background: var(--bg);
}

.login-brand {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
}

.login {
  max-width: 360px;
  margin: 0 auto;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.login h1 {
  margin-bottom: 16px;
}

.login .error:empty,
.login .status:empty {
  /* Live-Regionen leer lassen statt ausblenden (sonst werden Meldungen nicht angesagt); Lücke des Rasters zurücknehmen */
  margin: -12px 0 0;
}

.login .status {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.login button.link {
  min-height: 24px;
}

.login form {
  display: grid;
  gap: 12px;
}

.error {
  color: var(--danger);
  font-size: 14px;
}

/* Fehler nie nur über Farbe: × vor „Fehler:“ (Designsprache) */
.login .error:not(:empty)::before { content: "× " / ""; font-weight: 700; }

/* Auswahl-Dialog */
dialog.choose {
  max-width: 460px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--wa-shadow-l);
}

dialog.choose::backdrop {
  background: color-mix(in srgb, var(--wa-color-neutral-fill-loud) 45%, transparent);
}

dialog.choose h2 {
  margin-bottom: 8px;
}

dialog.choose p {
  margin: 0 0 16px;
}

/* Meldungen */
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--wa-color-neutral-fill-loud);
  color: var(--wa-color-neutral-on-loud);
  box-shadow: var(--wa-shadow-m);
}

.toast.error {
  background: var(--wecap-err-fill);
  color: var(--wecap-err-on);
  border: 1px solid var(--wecap-err-line);
}
.toast.error::before { content: "× " / ""; font-weight: 700; }

/* Konfigurator-Layout */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 38%);
  gap: 16px;
  padding: 16px 20px;
  align-items: start;
}

@media (max-width: 1280px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout.list-collapsed {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .side-right .sticky {
    max-height: none;
    overflow: visible;
  }

  .layout .side-right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .layout,
  .layout.list-collapsed {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.panel + .panel {
  margin-top: 16px;
}

#import-event.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.event-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.event-list button {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--radius);
  padding: 8px 10px;
  min-height: 0;
  background: transparent;
}

.event-list button[aria-current="true"] {
  background: var(--accent-soft);
  font-weight: 600;
}

.event-list small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--wa-border-radius-s);
  font-size: 12px;
  font-weight: 600;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--muted);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head h2 {
  margin: 0;
}

/* Räume */
.room-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel);
}

.room-card + .room-card {
  margin-top: 12px;
}

.room-card .section-head {
  margin-bottom: 10px;
}

.room-actions {
  display: flex;
  gap: 6px;
}

.subhead {
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.track-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 130px 90px 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.track-row.audio {
  grid-template-columns: 90px minmax(0, 1fr) 90px 36px;
}

.track-row.external-extra {
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) 126px;
}

@media (max-width: 760px) {
  .track-row,
  .track-row.audio,
  .track-row.external-extra {
    grid-template-columns: 1fr 1fr;
  }
}

details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}

/* Tafeln */
.slates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--wa-color-neutral-fill-quiet) center / contain no-repeat;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  overflow: hidden;
}

.drop.has-image {
  border-style: solid;
  background-color: var(--wecap-media-bg);
}

.drop.has-image span {
  display: none;
}

.drop.dragover {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.drop.busy::after {
  content: "Lädt hoch …";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  color: var(--text);
}

.slate-field input[type="text"] {
  margin-top: 6px;
  font-size: 12px;
}

/* JSON-Vorschau und Prüfung */
.json {
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--wa-color-neutral-fill-loud);
  color: var(--wa-color-neutral-on-loud);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}

.checks {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 13px;
}

.checks li {
  padding: 4px 0 4px 22px;
  position: relative;
}

.checks li::before {
  position: absolute;
  left: 0;
}

.checks .err {
  color: var(--danger);
}

.checks .err::before {
  content: "✕";
}

.checks .warn {
  color: var(--warn);
}

.checks .warn::before {
  content: "!" / "";
  font-weight: 700;
  left: 5px;
}

.checks .ok {
  color: var(--ok);
}

.checks .ok::before {
  content: "✓" / "";
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sticky {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
}

/* Rechte Spalte: Prüfung, Vorschau und Einbettung bleiben beim Scrollen sichtbar
   (nur bei drei Spalten; darunter steht sie normal unter dem Inhalt) */
@media (min-width: 1281px) {
  .side-right .sticky {
    max-height: calc(100vh - var(--topbar-h) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.side-right #preview-host:not(:empty) {
  margin: 16px 0;
}

/* Einklappbare Bereiche */
.panel-head {
  margin-bottom: 12px;
}

.panel-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  min-width: 0;
}

.panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: left;
}

.panel-toggle:hover:not(:disabled) {
  border-color: transparent;
  color: var(--accent);
}

.panel.collapsed .panel-head {
  margin-bottom: 0;
}

.panel.collapsed > .panel-head .chevron {
  transform: rotate(-90deg);
}

.panel .count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Linke Spalte einklappbar */
.side-left-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.side-left-title {
  font-weight: 700;
}

@media (min-width: 1281px) {
  .layout.list-collapsed {
    grid-template-columns: 52px minmax(0, 1fr) minmax(460px, 40%);
  }
}

.layout.list-collapsed .side-left {
  min-width: 0;
  padding: 10px 6px;
}

.layout.list-collapsed .side-left-title,
.layout.list-collapsed .side-left-body {
  display: none;
}

.layout.list-collapsed .side-left-head {
  justify-content: center;
  margin: 0;
}

/* Rechte Spalte: eigener, sichtbarer Scrollbalken */
.side-right .sticky {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--wa-color-neutral-fill-normal) transparent;
  padding-right: 4px;
}

.side-right .sticky::-webkit-scrollbar {
  width: 8px;
}

.side-right .sticky::-webkit-scrollbar-thumb {
  background: var(--wa-color-neutral-fill-normal);
  border-radius: 4px;
}

.scroll-cue {
  position: sticky;
  bottom: 0;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: linear-gradient(to bottom, transparent, var(--bg) 35%);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

/* Einklappbare Räume */
.room-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  text-align: left;
}

.room-toggle:hover:not(:disabled) {
  border-color: transparent;
}

.room-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.room-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}

.chevron {
  display: inline-block;
  color: var(--muted);
  transition: transform 0.15s;
}

.room-card.collapsed .chevron {
  transform: rotate(-90deg);
}

.room-card.collapsed .section-head {
  margin-bottom: 0;
}

.dirty-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  margin-left: 6px;
  vertical-align: middle;
}

/* Vorschau und Einbettung */
#preview-host:not(:empty) {
  margin-bottom: 16px;
}

#editor .panel:first-child {
  margin-top: 0;
}

.preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
  margin-bottom: 12px;
}

.preview-toolbar > div {
  min-width: 180px;
}

.preview-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    repeating-conic-gradient(var(--wa-color-neutral-fill-quiet) 0% 25%, var(--panel) 0% 50%) 0 0 / 16px 16px;
}

.preview-wrap iframe {
  display: block;
  border: 0;
  transform-origin: 0 0;
  background: transparent;
}

.embed-warning {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

.embed-code {
  width: 100%;
  margin: 12px 0 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

code {
  font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--wa-color-neutral-fill-quiet);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Operator-Seite */
.regie {
  padding: 16px 20px 40px; /* volle Breite (Befund der UX-Designerin) */
}

/* Event-Leiste (Entwurf 26.10.2026) */
.event-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 12px;
}
.event-bar .overline {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.event-bar h1 {
  font-family: var(--wa-font-family-heading);
  font-size: 28px;
  font-weight: 700;
  margin: 2px 0 4px;
}
.event-sub {
  margin: 0;
  color: var(--muted);
}
.event-sub .today { color: var(--text); font-weight: 600; }
.event-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}
.event-bar-actions .event-select select { min-width: 220px; }
.regie-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.regie-tools .note { color: var(--muted); font-size: 13px; margin: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
button.secondary {
  background: transparent;
  border-color: var(--wa-color-neutral-border-loud);
  color: var(--text);
}

.regie-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 20px;
  margin-bottom: 16px;
}

.regie-head .event-select {
  min-width: 260px;
}

.regie-head .note {
  color: var(--muted);
  font-size: 13px;
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}

.room-ctrl {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--wa-border-radius-l);
  box-shadow: var(--wa-shadow-s);
  padding: 16px;
}

.room-ctrl[data-status="pre"] { --st-color: var(--st-pre); }
.room-ctrl[data-status="live"] { --st-color: var(--st-live); }
.room-ctrl[data-status="pause"] { --st-color: var(--st-pause); }
.room-ctrl[data-status="ended"] { --st-color: var(--st-ended); }
.room-ctrl[data-status="havarie"] { --st-color: var(--st-havarie); }
.room-ctrl[data-status="auto"] { --st-color: var(--st-auto); }

.room-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.room-sub {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.room-ctrl h2 {
  font-size: 19px;
  font-weight: 600;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
  margin-bottom: 4px;
}

/* Status-Abzeichen: Text plus Symbol, nie nur Farbe (● Live, ❚❚ Pause, ◷ Vorab, ■ Ende, × Störung) */
.status-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.status-now::before { font-size: 11px; line-height: 1; }
.room-ctrl[data-status="live"] .status-now { background: var(--wecap-live-fill); color: var(--wecap-live-on); }
.room-ctrl[data-status="live"] .status-now::before { content: "●" / ""; }
.room-ctrl[data-status="pause"] .status-now { background: var(--wecap-pause-fill); color: var(--wecap-pause-on); border-color: var(--wecap-pause-line); }
.room-ctrl[data-status="pause"] .status-now::before { content: "❚❚" / ""; letter-spacing: -2px; }
.room-ctrl[data-status="pre"] .status-now { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.room-ctrl[data-status="pre"] .status-now::before { content: "◷" / ""; font-size: 13px; }
.room-ctrl[data-status="ended"] .status-now::before { content: "■" / ""; }
.room-ctrl[data-status="havarie"] .status-now { background: var(--wecap-err-fill); color: var(--wecap-err-on); border-color: var(--wecap-err-line); }
.room-ctrl[data-status="havarie"] .status-now::before { content: "×" / ""; font-size: 14px; }
.room-ctrl[data-status="auto"] .status-now::before { content: "⟳" / ""; font-size: 13px; }

/* Status für Zuschauer als Umschaltgruppe (wa-radio-group, appearance="button"), Auswahl mit ✓ */
.status-group { margin: 8px 0 4px; }
.status-group::part(form-control-label) { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.status-group wa-radio { flex: 1 1 0; }
.status-group wa-radio:state(checked) {
  background-color: var(--wa-color-brand-fill-loud);
  border-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}
.status-group wa-radio:state(checked)::part(label)::before { content: "✓ " / ""; }

.signal {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.signal .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wecap-off);
  margin-right: 6px;
}

.signal[data-state="live"] .dot {
  background: var(--ok);
}

.signal[data-state="offline"] .dot {
  background: var(--danger);
}

.signal[data-state="placeholder"] {
  color: var(--warn);
  font-weight: 600;
}

.signal[data-state="placeholder"] .dot {
  background: var(--warn);
}

.status-buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.status-buttons button {
  min-height: 52px;
  padding: 4px;
  font-size: 13px;
  font-weight: 600;
  flex-direction: column;
  gap: 0;
}

.status-buttons button[aria-pressed="true"] {
  background: var(--btn-color);
  border-color: var(--btn-color);
  color: var(--accent-text);
}

.status-buttons [data-set="pre"] { --btn-color: var(--st-pre); }
.status-buttons [data-set="live"] { --btn-color: var(--st-live); }
.status-buttons [data-set="pause"] { --btn-color: var(--st-pause); }
.status-buttons [data-set="ended"] { --btn-color: var(--st-ended); }
.status-buttons [data-set="havarie"] { --btn-color: var(--st-havarie); }
.status-buttons [data-set="auto"] { --btn-color: var(--st-auto); }

.room-ctrl .monitor {
  margin-top: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--wecap-media-bg);
}

.room-ctrl .monitor iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.room-ctrl .slate-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--wecap-media-bg);
  border-radius: var(--radius);
  margin-top: 12px;
}

.notice {
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--wa-color-warning-fill-quiet);
  border: 1px solid var(--wa-color-warning-border-quiet);
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .status-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Lange Titel dürfen die linke Spalte nicht sprengen */
.side-left {
  min-width: 0;
}

/* Alles ein-/ausklappen über der mittleren Spalte */
.editor-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.editor-toolbar[hidden] {
  display: none;
}

/* Breite der Dropdowns */
.dropdown-width {
  margin-top: 16px;
}

.dropdown-width-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.dropdown-width-row input[type="range"] {
  flex: 1 1 240px;
  accent-color: var(--accent);
}

.dropdown-width-row .check {
  min-height: 0;
}

/* Tafel entfernen (× oben rechts) */
.drop-wrap {
  position: relative;
}

.drop-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wecap-media-bg) 65%, transparent);
  color: var(--wecap-media-on);
  font-size: 18px;
  line-height: 1;
}

.drop-clear:hover:not(:disabled) {
  background: var(--accent);
}

/* Text-Schaltflächen unter den Tafeln */
button.link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

button.link:hover:not(:disabled) {
  color: var(--accent-hover);
}

.slate-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
}

/* Auswahl aus hochgeladenen Tafeln */
dialog.slate-library {
  max-width: min(820px, 92vw);
  width: 820px;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: 16px;
}

.library-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  min-height: 0;
  text-align: left;
}

.library-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--wecap-media-bg);
  border-radius: 4px;
}

.library-item span {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.library-item.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Zuschauer auf der Operator-Seite */
.viewer-panel {
  margin-bottom: 16px;
}

.viewer-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.tile-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tile:first-child .tile-value {
  color: var(--accent);
}

.tile-label {
  font-size: 13px;
  color: var(--muted);
}

.viewer-panel .hint {
  margin: 12px 0 0;
}

.room-viewers {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Auswertung im Konfigurator */
.report-range {
  margin-bottom: 4px;
}

#report-result:not(:empty) {
  margin-top: 14px;
}

.report-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.report-table th,
.report-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.report-table th:first-child {
  text-align: left;
  font-weight: 500;
  white-space: normal;
}

.report-table thead th {
  font-weight: 600;
  color: var(--muted);
}

.report-breakdown {
  margin-bottom: 8px;
}

.report-breakdown .report-table {
  margin-top: 6px;
}

.subhead {
  margin: 4px 0 4px;
  font-size: 14px;
  font-weight: 600;
}

/* Pipeline-Seite */
.pipeline {
  padding: 16px 20px 40px; /* volle Breite (Befund der UX-Designerin) */
}

.pipeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 16px;
}

.pipeline-head .note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.pipeline .panel {
  margin-bottom: 16px;
}

.pipeline .panel + .panel {
  margin-top: 0;
}

.pipeline h2 {
  font-size: 17px;
  margin: 0;
}

.pl-list {
  display: grid;
  gap: 12px;
}

.pl-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.pl-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 8px;
}

/* Routen-Anfrage: Auswahl der Route, Freigeben, Ablehnen */
.pl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.pl-actions select {
  flex: 1 1 260px;
  min-width: 0;
}

.pl-item-head h3 {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.pl-cost {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pl-state {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--wa-border-radius-s);
  font-size: 12px;
  font-weight: 600;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--muted);
}

.pl-state[data-tone="on"] { background: var(--wa-color-success-fill-quiet); color: var(--ok); }
.pl-state[data-tone="busy"] { background: var(--wa-color-warning-fill-quiet); color: var(--warn); }
.pl-state[data-tone="error"] { background: var(--wecap-err-fill); color: var(--danger); }

.pl-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
}

.pl-facts dt {
  color: var(--muted);
}

.pl-facts dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.pl-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.pl-copy code {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.pl-ok { color: var(--ok); font-size: 13px; }
.pl-warn { color: var(--warn); font-size: 13px; }
ul.pl-warn { margin: 6px 0 0; padding-left: 18px; }
.pl-signal { margin: 10px 0 0; font-size: 14px; }

@media (max-width: 480px) {
  .pipeline { padding: 12px; }
  .pl-facts { grid-template-columns: minmax(0, 1fr); }
  .pl-facts dt { margin-top: 4px; }
  .pl-cost { margin-left: 0; }
}

.pipeline-head .cost-tile .tile-value { color: var(--text); }
.pipeline-head .cost-tile .tile-value.running { color: var(--accent); }

/* Termine (Konfigurator, Operator-Seite, Pipeline) */
.plan-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) minmax(110px, 1fr) minmax(90px, 0.8fr) minmax(90px, 0.8fr) auto;
  gap: 8px 10px;
  align-items: end;
  margin-bottom: 8px;
}

@media (max-width: 560px) {
  .plan-row {
    grid-template-columns: 1fr 1fr;
  }
}

.event-list button.past {
  opacity: 0.55;
}

.schedule-line {
  margin: -6px 0 16px;
  font-size: 14px;
  color: var(--muted);
}

.schedule-line .today,
.pl-dates .today {
  color: var(--text);
  font-weight: 600;
}

.pl-dates {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.pl-dates strong {
  font-weight: 600;
}

.plan-range {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.plan-range summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.plan-range-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 10px;
}

.plan-range-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

@media (max-width: 560px) {
  .plan-range-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Lange Terminlisten: Beschriftung nur in der ersten Zeile */
@media (min-width: 561px) {
  /* nur sichtbar ausgeblendet, Felder behalten ihren Namen */
  .plan-list .plan-row:not(:first-child) > div > label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .plan-list .plan-row {
    margin-bottom: 6px;
  }
}

.pl-assigned {
  margin: -2px 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.pl-runs td,
.pl-runs th {
  white-space: nowrap;
}

dialog.choose select {
  width: 100%;
  margin-bottom: 6px;
}

.pipeline-facts {
  margin: 12px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.pipeline-facts code {
  overflow-wrap: anywhere;
  font-size: 13px;
}

/* 2FA-Einrichtung im Browser */
.login .qr {
  display: grid;
  place-items: center;
  margin: 8px auto 12px;
  width: 200px;
  height: 200px;
  background: var(--wecap-qr-bg);
}

.login .qr svg {
  width: 100%;
  height: 100%;
}

.login code {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.enroll-manual {
  margin-bottom: 12px;
  font-size: 13px;
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

/* Konten */
.accounts .pl-item.inactive {
  opacity: 0.6;
}

dialog.account-dialog {
  width: min(560px, calc(100vw - 32px));
}

dialog.account-dialog form > label:not(.check) {
  margin-top: 12px;
}

dialog.account-dialog .check {
  margin-top: 10px;
}

.pw-row {
  display: flex;
  gap: 8px;
}

.pw-row input {
  flex: 1;
  font-family: ui-monospace, Menlo, monospace;
}

.acc-events {
  margin: 14px 0 0;
  padding: 8px 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 240px;
  overflow: auto;
}

.acc-events legend {
  font-size: 13px;
  font-weight: 600;
  padding: 0 4px;
}

.acc-events .check {
  margin-top: 6px;
}

.operator-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
}

/* Operator-Seite: Pipeline-Kasten */
.op-pipeline {
  margin-bottom: 16px;
}

.op-pipeline h2 {
  font-size: 17px;
  margin: 0;
}

.op-pipeline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 10px;
}

.pl-recordings {
  flex-direction: column;
  align-items: flex-start !important;
}

/* Operator-Seite: eine Route je Raum */
.op-route-title {
  margin: 14px 0 6px;
  font-size: 15px;
}
.op-route-title:first-child {
  margin-top: 0;
}

/* Einbettung je Raum: ein Code pro Raum, der Raum der Vorschau ist markiert */
.embed-codes {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.embed-room {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.embed-room.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.embed-room-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.embed-room-head button {
  margin-left: auto;
}

.embed-room .embed-code {
  margin: 6px 0 0;
}

/* Kostenschätzung im Konfigurator */
.estimate-price {
  display: grid;
  gap: 4px;
  max-width: 520px;
  margin-top: 8px;
}

.estimate-price > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.estimate-price .total {
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 16px;
}

.estimate-price strong {
  white-space: nowrap;
}

/* Kalkulation: Posten untereinander, Beträge rechtsbündig; auf schmalen Bildschirmen
   stehen die beiden Beträge unter dem Posten statt daneben */
.calc .event-select {
  max-width: 420px;
  margin-bottom: 12px;
}

.calc-rows {
  display: grid;
  gap: 2px;
}

.calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11em 13em;
  gap: 4px 16px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.calc-row.sum {
  border-bottom: 0;
  font-size: 15px;
}

.calc-name {
  display: grid;
  gap: 2px;
}

.calc-amount {
  display: grid;
  text-align: right;
}

.calc-amount span {
  font-size: 12px;
  color: var(--muted);
}

.calc-amount b {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .calc-row {
    grid-template-columns: 1fr 1fr;
  }

  .calc-name {
    grid-column: 1 / -1;
  }

  .calc-amount {
    text-align: left;
  }
}

/* Pipeline-Seite: AWS-Kontingente */
.pl-quotas {
  margin: 0;
  padding-left: 18px;
}

/* Operator-Seite (Umbau 21.10.2026): Stream oben in der Kachel, darunter Status,
   Overlay und Route (beide einklappbar) */
.room-ctrl .monitor,
.room-ctrl .slate-preview {
  margin: 0 0 12px;
}

.room-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.room-head h2 {
  margin: 0;
  flex: 1 1 auto;
}

.room-head .status-now {
  margin: 0;
}

.room-ctrl .signal {
  margin-top: 8px;
}

.room-downstream,
.room-route,
.room-upstream,
.room-restreams,
.room-embed {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.room-downstream > summary,
.room-overlay summary,
.room-route summary,
.room-upstream summary,
.room-restreams summary,
.room-embed summary {
  cursor: pointer;
  font-weight: 600;
}

.room-upstream summary .hint,
.room-restreams summary .hint {
  margin-left: 6px;
  font-weight: 400;
}

.upstream-body,
.restream-body {
  margin-top: 8px;
}

/* Downstream: Tafel-Knöpfe und darin das klappbare Overlay */
.room-downstream .status-buttons {
  margin-top: 8px;
}

.room-downstream .room-overlay {
  margin-top: 10px; /* kein eigener Kasten (keine Kachel in Kachel) */
}

.room-route summary .pl-state {
  margin-left: 6px;
  font-weight: 400;
}

.overlay-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.overlay-countdown,
.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overlay-countdown input[type="number"] {
  width: 6em;
}

.route-body {
  margin-top: 8px;
}

/* Konfigurator, Pipeline: Tonspuren je Route (Sprache, Name, PID, Kanalpaar) */
.track-row.route-audio {
  grid-template-columns: 90px minmax(0, 1fr) 90px 90px 36px;
}

.route-audio-block {
  margin-top: 14px;
}

.route-audio-head {
  margin: 4px 0;
}

/* Konfigurator, Pipeline: Restream-Ziele je Raum */
.restream-row {
  display: grid;
  grid-template-columns: auto 120px minmax(0, 1.4fr) minmax(0, 1fr) 120px 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

@media (max-width: 760px) {
  .restream-row {
    grid-template-columns: auto minmax(0, 1fr) 36px;
  }
}

/* Benutzermenü am Namen (Konten, Konto wechseln, Abmelden) */
.user-menu-wrap {
  position: relative;
}

.user-menu-toggle {
  min-height: 30px;
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.user-menu-toggle .role {
  opacity: 0.75;
  font-size: 12px;
  margin-left: 4px;
}

.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  display: grid;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--wa-shadow-l);
}

.user-menu[hidden] {
  display: none;
}

.user-menu a,
.user-menu button {
  display: block;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.user-menu a:hover,
.user-menu button:hover,
.user-menu a[aria-current="page"] {
  background: var(--accent-soft);
}

/* Konfigurator: Reiter (Event · Räume · Darstellung · Daten) */
.config-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.config-tabs [data-tab] {
  flex: 1 1 auto;
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}

.config-tabs [data-tab][aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-text);
}

.config-tabs .count {
  font-weight: 400;
  opacity: 0.7;
}

/* Abschnitte in der Raumkarte (Quelle, Ton, Restreaming, Tafeln) */
.room-section {
  margin: 18px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

#checks [data-goto] {
  cursor: pointer;
}

#checks [data-goto]:hover {
  text-decoration: underline;
}

/* Pipeline-Seite: Ansicht nach Route / nach AWS-Dienst, Technik je Route */
.view-switch {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.view-switch button {
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
}

.view-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
}

.route-tech {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.route-tech summary {
  cursor: pointer;
  font-weight: 600;
}

.route-tech h4 {
  margin: 12px 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.monitor-note {
  margin: 0 0 12px;
  padding: 18px 12px;
  border-radius: var(--radius);
  background: var(--bg);
  text-align: center;
}

/* Schmale Bildschirme: Tonspur-Zeilen der Route zweizeilig, Knopfzeilen umbrechen */
.subhead {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .track-row.route-audio {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 36px;
  }

  .track-row.route-audio input[data-path$=".pid"],
  .track-row.route-audio input[data-path$=".pair"] {
    grid-row: 2;
  }
}

/* Pipeline-Seite: Inhaltsverzeichnis links (wie die Event-Liste im Konfigurator), Kacheln rechts */
.pipeline-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px; /* volle Breite, linksbündig wie die übrigen Seiten (vorher mittig mit 1360 px) */
  padding: 16px 20px 0;
  align-items: start;
}

.pipeline-layout .pipeline {
  max-width: none;
  margin: 0;
  padding: 0 0 40px;
  min-width: 0;
}

.pl-toc {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  min-width: 0;
}

.pl-toc ul {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.pl-toc a {
  display: inline-block;
  padding: 4px 0;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.pl-toc a:hover {
  color: var(--accent);
}

.pl-toc-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.pl-toc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pipeline section.panel {
  scroll-margin-top: 16px;
}

/* Eingeklappte Kachel: nur die Kopfzeile */
.pipeline section.panel.collapsed > :not(.section-head) {
  display: none;
}

.pipeline section.panel.collapsed > .section-head {
  margin-bottom: 0;
}

.pipeline .panel-toggle .chevron,
.pl-route .panel-toggle .chevron {
  display: inline-block;
  transition: transform 0.15s;
}

.pipeline section.panel.collapsed .panel-toggle .chevron,
.pl-route.collapsed .panel-toggle .chevron {
  transform: rotate(-90deg);
}

.pipeline h2 .panel-toggle {
  font-size: 17px;
}

/* Routenkarten: mehr Abstand, eingeklappt nur Kopfzeile mit Zustand und Knöpfen */
.pl-routes {
  gap: 20px;
}

.pl-route h3 .panel-toggle {
  font-size: 15px;
}

.pl-route.collapsed > :not(.pl-item-head) {
  display: none;
}

.pl-route.collapsed .pl-item-head {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .pipeline-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 12px 0;
  }

  .pl-toc {
    position: static;
  }
}

/* Pipeline-Kacheln: Titel links, Hinweis darunter bzw. daneben, Umschalter rechts; auf dem Handy umbrechen */
.pipeline section.panel > .section-head {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 12px;
}

.pipeline section.panel > .section-head .view-switch {
  margin-left: auto;
}

@media (max-width: 760px) {
  .pipeline section.panel > .section-head > .hint {
    flex-basis: 100%;
    order: 3;
  }
}

/* Konfigurator: Event-Aktionen links in der Werkzeugleiste, Liste nach Eventtyp gruppiert */
.editor-toolbar {
  flex-wrap: wrap;
  align-items: center;
}

/* Werkzeugleiste mit Speichern bleibt unter der Kopfleiste stehen */
.editor-toolbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  background: var(--bg);
  padding: 10px 20px;
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.editor-toolbar-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  min-width: 0;
}

.editor-toolbar-title {
  overflow-wrap: anywhere;
}

.event-list .event-group {
  margin: 12px 0 4px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.event-list .event-group:first-child {
  margin-top: 4px;
}

/* Übersicht: Kennzahlen, Filter nach Eventtyp, Karten je Event */
.ov-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ov-tiles .tile-value.running,
.ov-tiles .tile.running .tile-value {
  color: var(--accent);
}

.ov-head {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 12px;
}

/* Kopf der Übersicht: Titel links, Filter mittig, Lupe rechts (Feld öffnet sich nach links) */
@media (min-width: 761px) {
  .ov-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .ov-head .view-switch {
    margin: 0;
    justify-self: center;
  }

  .ov-head .ov-search {
    justify-self: end;
  }
}

.ov-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ov-title h2 {
  margin: 0;
}

.ov-head input[type="search"] {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 280px;
}


.ov-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.ov-card h3 a {
  color: inherit;
  text-decoration: none;
}

.ov-card h3 a:hover {
  color: var(--accent);
}

.ov-card.past {
  opacity: 0.7;
}

/* Kacheln nach Art: nur ein farbiger Rand links (Livestream, Restream, VOD, Nur Player) */
.ov-card {
  border-left-width: 4px;
}

.ov-card.ov-type-live {
  border-left-color: var(--border);
}

.ov-card.ov-type-restream {
  border-left-color: var(--border);
}

.ov-card.ov-type-vod {
  border-left-color: var(--border);
}

.ov-card.ov-type-none {
  border-left-color: var(--border);
}

/* Übersicht: quadratisches + neben der Überschrift (schneller Weg zu einem neuen Event) */
.ov-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text, inherit);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.ov-add-button:hover,
.ov-add-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Suche als Lupe, Feld öffnet sich auf Klick */
.ov-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ov-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: inherit;
}

.ov-search-toggle.active,
.ov-search-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ov-head .ov-search input[type="search"] {
  width: 220px;
  max-width: 50vw;
}

/* Filter der Übersicht: Unterlinie in der Randfarbe der Kacheln (Legende) */





/* Gruppen der Übersicht: anstehend, ohne Termin, vergangen */
.ov-group + .ov-group {
  margin-top: 24px;
}

.ov-group-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.ov-today {
  font-weight: 700;
  color: var(--accent);
}

.ov-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 14px;
}

@media (max-width: 760px) {
  .ov-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Filterleiste der Übersicht darf auf schmalen Bildschirmen umbrechen */
.ov-head .view-switch {
  flex-wrap: wrap;
  max-width: 100%;
}

/* Übersicht: Ist-Kosten erst auf Klick lesbar */
.ov-secret {
  min-height: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  filter: blur(6px);
  user-select: none;
  transition: filter 0.15s;
}

.ov-secret.shown {
  filter: none;
  user-select: text;
}

.ov-secret:hover:not(:disabled) {
  border-color: transparent;
  color: inherit;
}

/* Schloss geschützter Events: Linien-Symbol in Textfarbe */
.icon-lock {
  display: inline-block;
  vertical-align: -1px;
  flex: none;
}

.ov-description {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
}

#event-description {
  width: 100%;
  resize: vertical;
  font: inherit;
}

/* „Alles einklappen“ / „Alles ausklappen“ gleich breit (Konfigurator, Pipeline-Seite) */
[data-all-panels],
[data-collapse-all] {
  min-width: 8.5rem;
  justify-content: center;
}

/* Schloss-Schalter links neben dem Event-Titel (Konfigurator) */
.lock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--muted);
}

button.lock-toggle:hover:not(:disabled) {
  border-color: var(--border);
  color: var(--text);
}

.lock-toggle[aria-pressed="true"],
span.lock-toggle {
  color: var(--text);
}

.ov-lock {
  color: var(--muted);
  display: inline-flex;
}

.room-embed .embed-code {
  width: 100%;
  margin-top: 8px;
}

/* Feedback-Dialog (Menü am Namen) */
dialog.feedback {
  width: min(520px, calc(100vw - 32px));
}

dialog.feedback select,
dialog.feedback textarea {
  width: 100%;
  margin-bottom: 10px;
  font: inherit;
}

.ov-feedback {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Kalkulation: Standardwerte aufklappbar */
.calc-defaults summary {
  cursor: pointer;
}

.calc-defaults .grid {
  margin-top: 12px;
}

.offer-inputs {
  margin-bottom: 16px;
}

/* Anlage zum Angebot im Stil der Rentman-Angebote (Logo, Kopfdaten, umrahmte Tabellenköpfe, Fußzeile) */
.anlage {
  overflow-x: auto;
  padding: 12px 0;
  background: var(--bg);
}

.anlage-page {
  --anlage-red: #c93a45;
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 26mm 18mm 40mm 25mm;
  background: var(--wecap-paper);
  color: var(--wecap-ink);
  box-shadow: var(--wa-shadow-m);
  font-family: "Mulish", "Muli", "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
  font-size: 10pt;
  line-height: 1.35;
}

.anlage-head {
  min-height: 52mm;
  margin-bottom: 8mm;
}

/* Ohne Kopfzeile (Logo, Absender): Titel steht oben */
.anlage-head.no-letterhead {
  min-height: 0;
}

/* Rahmen-Tabelle für den Druck; am Bildschirm ohne Wirkung */
.anlage-frame {
  width: 100%;
  border-collapse: collapse;
}

.anlage-frame > tbody > tr > td,
.anlage-frame > tfoot > tr > td {
  padding: 0;
}

.anlage-footer-space {
  height: 0;
}

.anlage-logo {
  position: absolute;
  top: 24mm;
  right: 18mm;
  width: 33mm;
  height: 33mm;
  display: grid;
  place-items: center;
  background: var(--anlage-red);
  color: var(--wecap-paper);
  font-weight: 700;
  font-size: 19pt;
  letter-spacing: 0.02em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.anlage-sender {
  margin: 26mm 0 6mm;
  font-size: 8pt;
}

.anlage-page h1 {
  margin: 0 0 6mm;
  font-size: 15pt;
  font-weight: 700;
}

.anlage-page h2 {
  margin: 9mm 0 4mm;
  font-size: 13pt;
  font-weight: 700;
}

.anlage-facts {
  display: grid;
  grid-template-columns: 47mm 1fr;
  gap: 1mm 0;
  margin: 0;
}

.anlage-facts dt,
.anlage-facts dd {
  margin: 0;
}

.anlage-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6mm;
  font-variant-numeric: tabular-nums;
}

.anlage-table thead th {
  padding: 2.2mm 1.5mm;
  border-top: 1.5px solid var(--wecap-ink);
  border-bottom: 1.5px solid var(--wecap-ink);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.anlage-table thead th:first-child {
  border-left: 1.5px solid var(--wecap-ink);
  text-align: left;
}

.anlage-table thead th:last-child {
  border-right: 1.5px solid var(--wecap-ink);
}

.anlage-table td {
  padding: 1mm 1.5mm;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

.anlage-table td:first-child {
  text-align: left;
  white-space: normal;
}

.anlage-table tbody:first-of-type tr:first-child td {
  padding-top: 4mm;
}

.anlage-note {
  display: block;
  font-style: italic;
}

.anlage-group th {
  padding: 5mm 1.5mm 1mm;
  font-weight: 700;
  text-align: left;
}

.anlage-subtotal th,
.anlage-subtotal td {
  padding: 1mm 1.5mm;
  border-top: 1.5px solid var(--wecap-ink);
  font-weight: 700;
  text-align: left;
}

.anlage-subtotal td {
  text-align: right;
}

.anlage-sum {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.anlage-sum td {
  padding: 0.6mm 0;
}

.anlage-sum td:last-child {
  text-align: right;
}

.anlage-sum .strong td {
  font-weight: 700;
}

.anlage-sum .rule td {
  border-top: 1.5px solid var(--wecap-ink);
}

.anlage-text {
  margin: 8mm 0 0;
  font-size: 9pt;
}

.anlage-footer {
  position: absolute;
  left: 25mm;
  right: 18mm;
  bottom: 12mm;
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 1fr 1.2fr;
  gap: 4mm;
  padding-top: 4mm;
  border-top: 0.5px solid var(--wecap-ink-soft);
  font-size: 7.5pt;
  line-height: 1.6;
}

.anlage-footer strong,
.anlage-footer span {
  display: block;
}

/* Drucken (PDF): nur die Anlage, A4. Ränder über @page, damit der Inhalt vor der Fußzeile umbricht;
   die Fußzeile steht im unteren Rand jeder Seite, die Seitenzahl unten rechts (wie in Rentman) */
@page {
  size: A4;
  margin: 18mm 18mm 12mm 25mm;
}

/* Seitenzahl unten rechts (Chrome ab Version 131; ältere Browser lassen sie weg) */
@page {
  @bottom-right {
    content: counter(page) "/" counter(pages);
    font-family: "Mulish", "Muli", "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
    font-size: 9pt;
    vertical-align: top;
    padding-top: 2mm;
  }
}

@media print {
  html,
  body {
    background: var(--wecap-paper) !important;
  }

  .topbar,
  .calc > .panel:not(#offer-panel),
  #offer-panel > :not(#offer),
  .toast {
    display: none !important;
  }

  .calc,
  #offer-panel,
  .anlage {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .anlage-page {
    width: auto;
    min-height: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Kopf wie bei Rentman: Logo oben rechts, Absenderzeile auf Höhe der Logo-Unterkante */
  .anlage-head {
    position: relative;
    padding-top: 40mm;
  }

  .anlage-logo {
    top: 10mm;
    right: 0;
  }

  .anlage-sender {
    margin-top: 0;
  }

  .anlage-head.no-letterhead {
    padding-top: 0;
  }

  /* Fußzeile fest am unteren Rand jeder Seite; der Tabellenfuß hält den Platz frei */
  .anlage-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wecap-paper);
  }

  .anlage-footer-space {
    height: 30mm;
  }

  .anlage-items tbody {
    break-inside: avoid;
  }

  .anlage-table tr,
  .anlage-sum,
  .anlage-text,
  .anlage-block {
    break-inside: avoid;
  }
}

/* Kalkulation: Zwischenüberschriften der Annahmen (Zuschauer je Stream, weitere Annahmen) */
.calc-sub {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.95rem;
}

.calc-sub:first-child {
  margin-top: 0;
}

/* Operator-Seite: Zustand je Restream-Ziel (verbunden, Fehler, Warnung, wird geprüft) */
.restream-status {
  margin: 0;
  padding: 0;
  list-style: none;
}

.restream-status li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.rs-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.rs-ok .rs-dot { background: var(--ok); }
.rs-warn .rs-dot { background: var(--warn); }
.rs-error .rs-dot { background: var(--danger); }
.rs-error .hint { color: var(--danger); }

/* Seite „VOD“: Vorschau, Ein-/Ausstieg, Tonspuren der Datei, Aufträge */
.vod-preview {
  display: block;
  width: 100%;
  max-height: 60vh;
  margin-bottom: 0.75rem;
  background: var(--wecap-media-bg);
  border-radius: 6px;
}

.vod-marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.vod-mark {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.vod-mark input {
  width: 7rem;
}

.vod-length {
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.vod-tracks {
  display: grid;
  gap: 6px;
  margin-bottom: 6px;
}

.vod-track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vod-track input[data-f="track"] { width: 4rem; }
.vod-track input[data-f="lang"] { width: 5rem; }

.vod-table tr.selected td {
  background: var(--accent-soft);
}

.vod-status.vod-complete { color: var(--ok); }
.vod-status.vod-error { color: var(--danger); }

.vod-job-actions {
  white-space: nowrap;
}

.vod-job-actions > * + * {
  margin-left: 6px;
}

/* Operator-Seite: Stream-Key je Restream-Ziel eintragen */
.rs-missing .rs-dot { background: var(--warn); }

.rs-rows {
  display: grid;
  gap: 6px;
  margin-bottom: 6px;
}

.rs-row {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Kompakte Zeile: Punkt, Name, Plattform, Kennzeichen, Zustand, Knöpfe */
.rs-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.rs-line .rs-dot {
  flex: none;
}

.rs-name {
  font-weight: 600;
}

.rs-where {
  color: var(--muted);
  font-size: 13px;
}

.rs-status {
  font-size: 13px;
}

.rs-state {
  font-weight: 500;
}

.rs-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.rs-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 2px 0 0 16px;
  font-size: 13px;
}

.rs-off .rs-dot { background: var(--muted); opacity: 0.4; }
.rs-off .rs-name { color: var(--muted); }

/* Kennzeichen und Fragezeichen mit Erklärung beim Darüberfahren bzw. Fokus */
.rs-badge,
.rs-help,
.help {
  position: relative;
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  cursor: help;
}

.rs-help,
.help {
  padding: 0;
  width: 16px;
  text-align: center;
  font-weight: 600;
}

[data-tip]:hover::after,
[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 320px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--wa-color-neutral-fill-loud);
  color: var(--wa-color-neutral-on-loud);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  transform: translateX(-50%);
  box-shadow: var(--wa-shadow-l);
  pointer-events: none;
}

/* Bearbeiten: beschriftete Felder */
.rs-edit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.rs-edit[hidden] {
  display: none;
}

.rs-field {
  display: grid;
  gap: 3px;
  font-size: 13px;
  color: var(--muted);
}

.rs-field input,
.rs-field select {
  width: 100%;
  min-width: 0;
}

.rs-checks,
.rs-actions,
.rs-edit > .hint {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.rs-actions {
  gap: 6px;
}

.restream-locked {
  margin: 0;
  padding-left: 1.2rem;
}


/* Konfigurator: Zuspieler (Clips und Overlays) je Stream: Name und Datei vorn, Wiedergabe und „danach“ dahinter,
   bricht in schmalen Spalten um */
.media-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.media-row > .media-slot,
.media-row > input[type="text"] {
  flex: 0 0 150px;
}

.media-row > select[data-path$=".key"] {
  flex: 1 1 220px;
  min-width: 0;
}

.media-row > select[data-path$=".mode"] {
  flex: 0 0 120px;
}

.media-row > select[data-path$=".then"] {
  flex: 0 1 190px;
}

.media-row > button {
  white-space: nowrap;
}

.media-slot {
  font-weight: 600;
  font-size: 14px;
}

/* Übersicht: Löschen als rotes X oben rechts in der Kachel */
.ov-card {
  position: relative;
}

.ov-card .pl-item-head {
  padding-right: 60px;
}

.ov-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
}

.ov-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
}

.ov-icon svg {
  vertical-align: -2px;
}

.ov-icon:hover,
.ov-icon:focus-visible {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--text);
}

.ov-icon.ov-delete {
  color: var(--muted);
}

.ov-icon.ov-delete:hover,
.ov-icon.ov-delete:focus-visible {
  background: var(--wecap-err-fill);
  color: var(--wecap-err-on);
}

/* Beschriftung mit Fragezeichen daneben (z. B. „ID ?“): Erklärung nicht im Namen des Feldes */
.label-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.label-row label {
  margin-bottom: 0;
}

/* Fragezeichen neben Überschriften */
.help {
  margin-left: 6px;
  vertical-align: middle;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

/* Tooltip der Fragezeichen links am Zeichen ausrichten (zentriert ragte er am Seitenrand heraus) */
.help[data-tip]:hover::after,
.help[data-tip]:focus::after {
  left: -6px;
  max-width: min(320px, 80vw);
  transform: none;
}

/* Operator-Seite: Restream-Ziele und Zuspieler im Stream */
.media-head h3 {
  margin: 0;
  font-size: 14px;
}

.media-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.media-mode button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
}

.media-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.media-list {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.media-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.media-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* Operator-Seite: Zuspieler verwalten (Experte) */
.media-manage {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.media-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet);
  font-size: 13px;
}

.media-chip .small {
  padding: 0 6px;
  line-height: 18px;
}

.media-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.media-form input[name="name"] {
  flex: 0 1 200px;
}

.media-form select[name="key"] {
  flex: 1 1 220px;
  min-width: 0;
}

.rs-actions .rs-delete {
  margin-left: auto;
}

/* Pipeline-Seite: Live-Cache je Event */
.cache-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.cache-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.cache-list li button {
  margin-left: auto;
}

/* Experten-Schalter oben rechts; schlanke Ansicht blendet .expert-only aus */
.expert-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 0 0;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.expert-switch input {
  width: 32px;
  height: 18px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  background: var(--wa-color-neutral-fill-normal);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}

.expert-switch input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel);
  transition: transform 0.15s;
}

.expert-switch input:checked {
  background: var(--accent);
}

.expert-switch input:checked::after {
  transform: translateX(14px);
}

[data-expert="off"] .expert-only {
  display: none !important;
}

/* VOD-Seite: Filter und Sortierung der Quellen */
.vod-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.vod-filter input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
}

.vod-filter label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
}

.vod-sort {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

/* Pipeline-Seite: Filterzeile der Laufzeiten */
.pl-runs-filter th {
  padding-top: 0;
  font-weight: 400;
}

.pl-runs-filter select,
.pl-runs-filter input {
  width: 100%;
  min-width: 90px;
  font-size: 13px;
}

/* Konfigurator: Startseite ohne geöffnetes Event (große Knöpfe, Auswahl vorhandener Events);
   linksbündig über die volle Breite wie die Übersicht (Paul, 26.10.2026: war mittig) */
.layout.start {
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
}

.config-start #start-open {
  max-width: 520px;
}

.layout.start .side-right {
  display: none;
}

.config-start h2 {
  margin: 0 0 14px;
}

.start-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 300px));
  gap: 12px;
  margin-bottom: 22px;
}

.start-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 110px;
  padding: 16px 18px;
  text-align: left;
  border-radius: 10px;
}

.start-button strong {
  font-size: 18px;
}

.start-button span {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.8;
  line-height: 1.35;
}

.start-button.dragover {
  outline: 2px dashed var(--accent);
}

.start-open-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.event-switch {
  width: auto;
  max-width: 260px;
}

/* Ladeanzeige: Kreisel unten rechts bei längeren Anfragen, Kreisel vor „Lädt …“-Platzhaltern */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner,
.hint.loading::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}

.hint.loading::before {
  content: '';
  margin-right: 8px;
}

.busy-indicator {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-neutral-fill-loud);
  color: var(--wa-color-neutral-on-loud);
  font-size: 14px;
  box-shadow: var(--wa-shadow-l);
}

.busy-indicator[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .hint.loading::before {
    animation-duration: 2.4s;
  }
}

/* VODs: Video je Stream wählen */
.video-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.video-row select {
  flex: 1 1 320px;
  min-width: 0;
}

/* Leitungswerte des SRT-Eingangs (ingest.js: lineRows) */
.pl-facts dd > div.pl-warn {
  flex-basis: 100%;
}
.sparks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.spark {
  display: inline-grid;
  grid-template-columns: auto;
  gap: 2px;
  color: var(--accent);
}
.spark-label,
.spark-value {
  color: var(--muted);
  font-size: 0.8rem;
}
.spark-value {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.srt-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.srt-form input[type="number"] {
  width: 6.5em;
}
.srt-form input[type="text"] {
  width: 14em;
}
.srt-form .hint {
  flex-basis: 100%;
}

/* Konfigurator: rechte Spalte klebt unter der Werkzeugleiste (Speichern), nicht darunter */
@media (min-width: 1281px) {
  .editor-toolbar:not([hidden]) ~ .layout .side-right .sticky {
    top: calc(var(--topbar-h) + 72px);
    max-height: calc(100vh - var(--topbar-h) - 96px);
  }
}

/* Zuschauer als schlanke Zeile unter dem Event-Titel (Paul, 26.10.2026) */
.viewer-line { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.viewer-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.viewer-line[hidden] { display: none; }
button.stop {
  background: var(--wecap-stop-fill);
  border-color: var(--wecap-stop-fill);
  color: var(--wecap-stop-on);
}
button.stop:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--wecap-stop-fill-hover); }
.type-list { margin: 4px 0 0; }

/* Leitungswerte als vier Kacheln (Entwurf Live-Seite 26.10.2026) */
.pl-facts dd.line-stats-wrap { display: block; grid-column: 1 / -1; }
.line-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 8px;
  margin: 0;
}
.line-stat {
  border-left: 1px solid var(--border); /* keine eigene Fläche (keine Kachel in Kachel) */
  padding: 2px 10px;
}
.line-stat:first-child { border-left: 0; padding-left: 0; }
.line-stat dt { color: var(--muted); font-size: 12px; }
.line-stat dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; display: block; }
.line-stat small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }

/* ---- Übersicht nach Entwurf Runde 2 (25.10.2026): volle Breite, keine Kachel in Kachel, Tags statt Ränder ---- */
.crumbs { margin: 0 0 6px; font-size: 13px; }
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.page-head h1 { font-family: var(--wa-font-family-heading); font-size: 26px; font-weight: 700; margin: 0; }
.ov-figures { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; color: var(--muted); font-size: 14px; }
.ov-figure b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.overview .ov-search, .config-start .ov-search { display: flex; align-items: center; gap: 0; } /* Feld links, Lupe bleibt rechts */
.overview .ov-search input[type="search"], .config-start .ov-search input[type="search"] { width: min(280px, 60vw); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.overview .ov-search input:not([hidden]) + .ov-search-toggle, .config-start .ov-search input:not([hidden]) + .ov-search-toggle { border-radius: 0 var(--radius) var(--radius) 0; }
.ov-search-toggle {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--text);
}
.ov-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.ov-chips-label { color: var(--muted); font-size: 13px; margin-right: 4px; }
.ov-chip {
  height: 30px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--wa-color-neutral-border-loud); border-radius: var(--wa-border-radius-s);
  background: var(--panel); color: var(--text); display: inline-flex; align-items: center; gap: 6px;
}
.ov-chip .count { color: var(--muted); font-size: 12px; }
.ov-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--wa-color-brand-on-quiet); font-weight: 600; }
.ov-chip[aria-pressed="true"]::before { content: "✓" / ""; }
.ov-chip[data-tone="live"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wecap-live-fill); order: -1; }
.ov-chip[data-tone="warn"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wa-color-warning-fill-loud); order: -1; }
.ov-chip-clear { border-style: dashed; }
.ov-group { margin-top: 18px; }
.ov-group-title {
  cursor: pointer; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 8px;
}
.ov-group .ov-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.ov-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--wa-border-radius-l);
  box-shadow: var(--wa-shadow-s); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.ov-card-head { display: flex; align-items: start; gap: 4px; }
.ov-card-head h3 { flex: 1; margin: 0; font-size: 16px; }
.ov-card-head h3 a { color: var(--text); text-decoration: none; }
.ov-card-head h3 a:hover { text-decoration: underline; }
.ov-untitled { color: var(--muted) !important; font-weight: 500; }
.ov-card .ov-icon {
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--wa-border-radius-s); /* eckig, keine Ovale */
  background: none; color: var(--muted); font-size: 15px;
}
.ov-card .ov-icon:hover, .ov-card .ov-icon:focus-visible { background: var(--wa-color-neutral-fill-quiet); color: var(--text); }
.ov-card .ov-delete:hover, .ov-card .ov-delete:focus-visible { background: var(--wa-color-neutral-fill-quiet); color: var(--text); } /* Pink nur für Fehler */
.ov-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; line-height: 20px; padding: 0 7px; border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-neutral-fill-quiet); color: var(--text); font-weight: 500;
}
.ov-tag[data-tone="live"] { background: var(--wecap-live-fill); color: var(--wecap-live-on); }
.ov-tag[data-tone="live"]::before { content: "●" / ""; font-size: 10px; }
.ov-tag[data-tone="brand"] { background: var(--accent-soft); color: var(--wa-color-brand-on-quiet); }
.ov-tag[data-tone="warn"] { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
.ov-tag[data-tone="warn"]::before { content: "!" / ""; font-weight: 700; }
.ov-facts { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; margin: 0; font-size: 14px; }
.ov-facts dt { color: var(--muted); }
.ov-facts dd { margin: 0; }
/* Seite VOD: Überschrift links, Lupe rechts */
.vod-start-head { display: flex; align-items: center; gap: 12px; }
.vod-start-head .ov-search { margin-left: auto; }
.ov-vods { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ov-vods a { display: inline-block; min-height: 24px; line-height: 24px; }
.ov-dash { color: var(--muted); }
.ov-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto; }

/* Kontomenü: Darstellung Hell · Dunkel · System, Auswahl mit ✓ */
.user-menu-theme { display: grid; gap: 2px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.user-menu-theme > span { color: var(--muted); font-size: 12px; padding: 0 8px; }
.user-menu [aria-pressed="true"]::before { content: "✓ " / ""; }
.status-group-head { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }

/* Sprunglink „Zum Inhalt“ (WCAG 2.4.1): erst bei Tastaturfokus sichtbar */
.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--panel); color: var(--text); box-shadow: var(--wa-shadow-m);
}
.skip-link:focus { top: 8px; }
main:focus { outline: none; }
.topbar .brand { margin: 0; }
/* Breadcrumbs: eigene Liste (wa-breadcrumb machte die aktuelle Seite zu einem leeren Knopf) */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›" / ""; margin-right: 4px; color: var(--muted); }
.crumbs [aria-current="page"] { color: var(--muted); }
.ov-group-title h2 { display: inline; font: inherit; margin: 0; }

/* Bearbeiten, Runde 2 (26.10.2026) */
/* Aufzeichnen wird leicht vergessen: eigener Kasten unter der Route, aus = Warnfläche */
.record-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--radius);
  background: var(--wa-color-warning-fill-quiet);
}

.record-box.on {
  background: var(--wa-color-neutral-fill-quiet);
}

.record-box .check {
  min-height: 0;
  font-size: 15px;
}

.record-box .check input {
  width: 18px;
  height: 18px;
}

/* Leiste über dem Inhalt eines Reiters (statt einer Überkachel, die den Reiter doppelt) */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.tab-bar .spacer {
  flex: 1;
}

.tab-bar-field {
  min-width: 220px;
}

.tab-intro {
  margin: 0 0 12px;
}

.vod-list {
  margin: 0;
  padding-left: 1.2em;
}

.vod-list li {
  margin: 4px 0;
}

.player-address {
  margin-top: 10px;
}

/* Felder nur zum Lesen (z. B. Quell-URL aus der Route, Kunde aus dem Event) sichtbar anders als bearbeitbare */
input[readonly] {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--muted);
}

/* Kopf der Livestream-Karte linksbündig (Knopf-Grundstil zentriert sonst den Titel) */
.room-toggle {
  justify-content: flex-start;
}

/* Experten-Modus sichtbar auszeichnen (Paul, 26.10.2026): kleines eckiges Tag neben der Überschrift */
.expert-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--wa-color-brand-border-normal);
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: middle;
  line-height: 1.5;
}

/* Seite „Livestreams“ (27.10.2026): ohne Betriebswerte steht die Lupe trotzdem rechts */
.livestreams .ov-search { margin-left: auto; }
.ls-table th[scope="row"] { font-weight: 600; text-align: left; }
.ls-actions { white-space: nowrap; text-align: right; }
.ls-actions .button + .button { margin-left: 6px; }

/* Termine für einzelne Livestreams: Auswahl unter der Terminzeile */
.plan-rooms {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: -2px 0 4px;
  padding: 0;
  border: 0;
  font-size: 14px;
}
.plan-rooms legend { float: left; padding: 0; margin-right: 4px; }