/* HyperReel Kundenportal — Designsystem „Leuchttisch"
   Consumers: templates/login.html, templates/portal.html, templates/setup.html */

:root {
  /* Welt: heller Leuchttisch, Papier & Leinen, Dia auf Kohle-Bühne */
  --papier: #faf8f5;          /* Canvas */
  --leinen: #ffffff;          /* Karten / erhöhte Flächen */
  --leinen-2: #fdfcfa;        /* Zwischenebene (Listenzeilen, Inputs-Umfeld) */
  --eingabe: #f4f1ec;         /* Inputs: leicht eingelassen */
  --kohle: #211e1a;           /* Player-Bühne, Headlines */
  --graphit: #4a463f;         /* Fließtext */
  --nebel: #6f6a5c;           /* Metadaten/Hinweistext — dunkel genug für ≥4,5:1 auf allen hellen Flächen (A11y, war #8d8779) */
  --hauch: #b8b3a8;           /* Platzhalter / disabled */
  --faden: rgba(33, 30, 26, 0.10);        /* Standard-Border */
  --faden-soft: rgba(33, 30, 26, 0.06);   /* weiche Trennung */
  --faden-strong: rgba(33, 30, 26, 0.18); /* Betonung */
  --akzent: #e8a33d;          /* wird pro Kunde via JS überschrieben */
  --akzent-tinte: #1f1c18;    /* Text auf Akzent-Flächen */
  --akzent-hauch: color-mix(in srgb, var(--akzent) 12%, #ffffff);
  --akzent-rand: color-mix(in srgb, var(--akzent) 38%, #ffffff);
  --honig: #d9a232;           /* Kommentar-Pins */
  --gut: #6da06b;
  --warn: #c2574b;

  --schatten-1: 0 1px 2px rgba(33, 30, 26, 0.05), 0 2px 8px rgba(33, 30, 26, 0.05);
  --schatten-2: 0 2px 6px rgba(33, 30, 26, 0.07), 0 10px 28px rgba(33, 30, 26, 0.09);
  --schatten-3: 0 6px 16px rgba(20, 18, 15, 0.16), 0 24px 64px rgba(20, 18, 15, 0.18);

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;

  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--graphit);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

h1, h2, h3 { color: var(--kohle); margin: 0; letter-spacing: -0.015em; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
a { color: inherit; }
button { font-family: inherit; }

::selection { background: color-mix(in srgb, var(--akzent) 30%, #fff); }

/* ---------- Bausteine ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--kohle);
  padding: 9px 18px; font-size: 14px; font-weight: 550;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
  text-decoration: none; user-select: none; white-space: nowrap;
}
.btn:hover { border-color: var(--faden-strong); box-shadow: var(--schatten-1); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.btn:disabled { color: var(--hauch); pointer-events: none; }

.btn--primary {
  background: var(--akzent); border-color: transparent; color: var(--akzent-tinte);
}
.btn--primary:hover { background: color-mix(in srgb, var(--akzent) 88%, #000); box-shadow: var(--schatten-1); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--nebel); }
.btn--ghost:hover { color: var(--kohle); background: var(--faden-soft); box-shadow: none; }
.btn--small { padding: 6px 13px; font-size: 13px; }
.btn--danger { color: var(--warn); }

.input, textarea.input {
  width: 100%; border: 1px solid var(--faden); border-radius: var(--radius-s);
  background: var(--eingabe); color: var(--kohle);
  padding: 10px 13px; font-size: 14.5px; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.input::placeholder { color: var(--hauch); }
.input:focus { outline: none; border-color: var(--akzent-rand); background: #fff; }
textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; }

.label { display: block; font-size: 12.5px; font-weight: 600; color: var(--nebel); margin: 0 0 6px 2px; letter-spacing: 0.02em; }

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

/* ---------- Login ---------- */

.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; gap: 28px;
}
.login-card {
  width: min(400px, 100%);
  background: var(--leinen); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-l); box-shadow: var(--schatten-2);
  padding: 40px 36px 34px; text-align: center;
}
.login-card h1 { font-size: 24px; margin-bottom: 6px; }
.login-card p { color: var(--nebel); margin: 0 0 26px; font-size: 14px; }
.login-card .input { text-align: center; font-size: 17px; letter-spacing: 0.12em; font-family: var(--mono); }
.login-card .btn { width: 100%; justify-content: center; margin-top: 14px; padding: 12px; font-size: 15px; }
.login-error { color: var(--warn); font-size: 13.5px; min-height: 20px; margin-top: 12px; }
.login-foot { color: var(--nebel); font-size: 12.5px; }
.login-card { position: relative; }
.login-card .lang-switch--card { position: absolute; top: 14px; right: 14px; }
.login-foot a { color: var(--nebel); text-decoration: none; }
.login-foot a:hover { color: var(--kohle); }
.wordmark { font-weight: 700; letter-spacing: -0.02em; color: var(--kohle); }
.wordmark em { font-style: normal; color: var(--akzent); }

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

/* Gesamter Kopf (Topbar + Workspaces + Filterleiste) bleibt als EIN Block fixiert */
.appbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--faden-soft); box-shadow: var(--schatten-1);
}
.topbar {
  background: transparent;
  border-bottom: 1px solid var(--faden-soft);
}
.topbar__inner {
  max-width: 1240px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  border: none; background: transparent; cursor: pointer; font-family: inherit; text-align: left;
  padding: 4px 10px 4px 4px; margin-left: -4px; border-radius: 12px; transition: background .15s ease;
}
.brand:hover { background: var(--faden-soft); }
.brand:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.brand__txt { min-width: 0; }
.brand__logo {
  height: 44px; width: 44px; object-fit: contain; border-radius: 10px;
  background: #fff; border: 1px solid var(--faden-soft); padding: 4px;
}
.brand__name { font-size: 18px; font-weight: 650; color: var(--kohle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__sub { font-size: 12px; color: var(--nebel); margin-top: -2px; }
.topbar__spacer { flex: 1; }

/* ---------- Burger-Menü (Konto + Sprache; Dark Theme kommt später hier rein) ---------- */

.usermenu { position: relative; flex: none; }
.usermenu__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;                      /* gleiche Höhe wie die .wsbtn-Workspace-Buttons */
  border: 1px solid var(--faden); background: var(--leinen);
  border-radius: 12px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.usermenu__btn:hover { border-color: var(--faden-strong); box-shadow: var(--schatten-1); }
.usermenu__btn:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.usermenu.is-open .usermenu__btn { background: var(--kohle); border-color: var(--kohle); }
.usermenu__bars { display: flex; flex-direction: column; gap: 4px; }
.usermenu__bars span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--kohle); transition: background .15s ease;
}
.usermenu.is-open .usermenu__bars span { background: #fff; }
.usermenu__panel {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 240px; padding: 8px;
  background: var(--leinen); border: 1px solid var(--faden);
  border-radius: 14px; box-shadow: var(--schatten-2);
}
.usermenu.is-open .usermenu__panel { display: block; }
.usermenu__who {
  font-size: 12.5px; color: var(--nebel); padding: 6px 10px 10px;
  border-bottom: 1px solid var(--faden-soft); margin-bottom: 6px;
}
.usermenu__who[hidden] { display: none; }
.usermenu__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; }
.usermenu__label { font-size: 13px; font-weight: 550; color: var(--graphit); }
.usermenu__logout { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- Sprach-Switch (Pill „DE · EN") ---------- */

.lang-switch {
  display: inline-flex; align-items: center; gap: 1px; flex: none;
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); padding: 2px 5px;
}
.lang-switch__opt {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.05em;
  color: var(--nebel); padding: 3px 7px; border-radius: 999px;
  transition: color .14s ease, background .14s ease;
}
.lang-switch__opt:hover { color: var(--graphit); }
.lang-switch__opt.is-active { background: var(--kohle); color: #fff; }
.lang-switch__opt:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.lang-switch__sep { color: var(--faden-strong); font-size: 10px; user-select: none; }

/* ---------- Tabs / Chips ---------- */

.shell { max-width: 1240px; margin: 0 auto; padding: 22px 28px 140px; }
/* ASM-TL3: Timeline-Builder darf breit (Ultra-Wide-Nutzung, Manu 2026-07-31) */
.shell:has(.tht__tracks--tl) { max-width: 1880px; }

/* Filterleiste: zwei klar getrennte Zeilen — Zeile 1 = Asset-Typ + Werkzeuge,
   Zeile 2 = Filter-Gruppe (links) + Suche/Sortierung (rechts). */
.subbar {
  max-width: 1240px; margin: 0 auto; padding: 10px 28px 12px;
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
}
/* Zeile 1: Werkzeuge (Vergleichen + Hochladen) rechts */
.tabs__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tab--upload { border-style: dashed; }
/* Zeile 2 — standardmäßig auf einen kleinen „Filter ▾"-Schalter eingeklappt
   (kognitive Entlastung: die volle Leiste erschlug beim ersten Öffnen) */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters-toggle {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  border: 1px solid var(--faden); background: var(--leinen);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 550;
  color: var(--nebel); cursor: pointer; transition: all .15s ease;
}
.filters-toggle:hover { border-color: var(--faden-strong); color: var(--graphit); }
.filters-toggle.is-open { color: var(--graphit); border-color: var(--faden-strong); }
.filters-toggle__arrow { font-size: 9px; transition: transform .15s ease; }
.filters-toggle.is-open .filters-toggle__arrow { transform: rotate(180deg); }
.toolbar__filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; }
.tab {
  border: 1px solid var(--faden); background: var(--leinen);
  border-radius: 999px; padding: 7px 16px; font-size: 13.5px; font-weight: 550;
  color: var(--graphit); cursor: pointer; transition: all .15s ease;
}
.tab:hover { border-color: var(--faden-strong); }
.tab.is-active { background: var(--kohle); border-color: var(--kohle); color: #fff; }
.tab__count { color: var(--nebel); font-weight: 500; margin-left: 5px; font-size: 12px; }
.tab.is-active .tab__count { color: rgba(255,255,255,0.65); }
.tab--fav.is-active { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); }
.tab--fav.is-active .tab__count { color: color-mix(in srgb, var(--akzent-tinte) 60%, transparent); }

/* Provenienz-Filter (segmentierter Umschalter: KI / echtes Material) */
.provfilter {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--leinen); border: 1px solid var(--faden);
  border-radius: 999px; padding: 3px;
}
.provfilter__opt {
  border: none; background: transparent; cursor: pointer;
  border-radius: 999px; padding: 5px 10px; font-size: 12.5px; font-weight: 550;
  color: var(--graphit); transition: all .15s ease; white-space: nowrap;
}
.provfilter__opt:hover { color: var(--kohle); }
.provfilter__opt.is-active { background: var(--kohle); color: #fff; }

/* Sortier-Auswahl (Toolbar rechts) */
.sortsel { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.sortsel select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--kohle);
  padding: 6px 28px 6px 12px; font-size: 12.5px; font-weight: 550; font-family: inherit;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238d8779' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.sortsel select:hover { border-color: var(--faden-strong); }
.sortsel select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* ---------- Galerie ---------- */

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px;
}
.card {
  background: var(--leinen); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-m); overflow: hidden; cursor: pointer;
  box-shadow: var(--schatten-1);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--schatten-2); transform: translateY(-2px); }
.card__media { position: relative; padding-bottom: 124%; background: var(--eingabe); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Waveform-Band für reine Audio-Assets (Voiceover-Karten ohne Thumbnail). */
.card__media .card__wave { position: absolute; left: 8%; right: 8%; top: 36%; bottom: 36%; width: 84%; height: 28%; }
.card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; pointer-events: none;
}
.card__play span {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20, 18, 15, 0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding-left: 4px;
}
.card__dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(20, 18, 15, 0.7); color: #fff; border-radius: 6px;
  padding: 2px 7px; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  transition: opacity .15s ease;
}
/* Beim Hover/Favorit weichen die Quick-Actions (unten rechts) der Dauer aus */
.card:hover .card__dur, .card.is-fav .card__dur { opacity: 0; }
/* Flags sitzen über der „New"-Pille (die FFR-K1 nach unten links wanderte). */
.card__flag {
  position: absolute; left: 8px; bottom: 36px; display: flex; gap: 6px;
}
.flag {
  background: rgba(255,255,255,0.92); border-radius: 999px; padding: 3px 8px;
  font-size: 12px; box-shadow: var(--schatten-1); line-height: 1.3;
}
/* Provenienz-Badge (oben links): KI neutral · Echt grün · Gemischt zweifarbig */
.card__prov {
  position: absolute; left: 8px; top: 8px; z-index: 1;
  border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600;
  line-height: 1.3; letter-spacing: 0.01em; box-shadow: var(--schatten-1);
}
/* Schnellaktionen auf der Karte (oben rechts): Favorit + Löschen — ohne das Bild zu öffnen.
   Erscheinen beim Hover; auf Touch immer sichtbar; gemerkter Favorit bleibt sichtbar. */
.card__quick {
  position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; gap: 6px;
  opacity: 0; transition: opacity .15s ease;
}
.card:hover .card__quick { opacity: 1; }
.card.is-fav .card__quick { opacity: 1; }
@media (hover: none) { .card__quick { opacity: 1; } }
.card__qbtn {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.94); color: var(--graphit); box-shadow: var(--schatten-1);
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  transition: transform .12s ease, background .14s ease, color .14s ease;
}
.card__qbtn:hover { transform: scale(1.1); }
.card__qbtn--fav { font-size: 16px; }
.card__qbtn--fav.is-on { background: var(--akzent); color: var(--akzent-tinte); }
.card__qbtn--del:hover { background: var(--warn); color: #fff; }
.card__prov.is-ai { background: rgba(255,255,255,0.92); color: var(--graphit); }
/* Weißer Text auf farbigem Grund: Text-Shadow hält ihn lesbar, auch wenn der
   kundenspezifische --akzent (brand_color) sehr hell ist. */
.card__prov.is-real { background: var(--gut); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.card__prov.is-mixed {
  background: linear-gradient(100deg, var(--gut) 0 52%,
              color-mix(in srgb, var(--akzent) 80%, #fff) 52% 100%);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.card__body { padding: 11px 13px 12px; display: flex; align-items: center; gap: 8px; }
.card__title { font-size: 13.5px; font-weight: 550; color: var(--kohle); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__meta { color: var(--nebel); font-size: 12px; display: flex; gap: 8px; align-items: center; flex: none; }

/* Stimmen als Zeilen */
.voice-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.voice-item {
  display: flex; flex-direction: column;
  background: var(--leinen); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-m); box-shadow: var(--schatten-1);
}
.voice-item.is-playing { border-color: color-mix(in srgb, var(--akzent) 55%, var(--faden-soft)); }
.voice-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.voice-row__play {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: none; background: var(--akzent); color: var(--akzent-tinte);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.voice-row__play:hover { transform: scale(1.06); }
.voice-row__main { flex: 1; min-width: 0; }
.voice-row__title { font-weight: 560; color: var(--kohle); font-size: 14.5px; cursor: pointer; }
.voice-row__title:hover { color: var(--akzent); }
.voice-row__meta { color: var(--nebel); font-size: 12.5px; margin-top: 2px; }
/* HYP-98: reine Hörprobe (keine sprechfähige Identität) — Badge + gedimmte Zeile. */
.voice-row__po { color: var(--warn); font-weight: 650; white-space: nowrap; }
.voice-item.is-preview-only .voice-row__title { color: var(--nebel); }
.voice-item.is-preview-only .wiz-vcmt__pick[disabled],
.voice-item.is-preview-only .wiz-cand__pick[disabled] { cursor: not-allowed; opacity: .5; }
.voice-row__script {
  color: var(--graphit); font-size: 12.5px; line-height: 1.45; margin-top: 5px; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.voice-row__script:hover { color: var(--kohle); }
/* Scrubber + Waveform */
.voice-row__scrub {
  position: relative; height: 32px; margin-top: 9px; cursor: pointer;
  touch-action: none; user-select: none;
}
.voice-row__wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.voice-row__head {
  position: absolute; top: 2px; bottom: 2px; left: 0%; width: 2px; border-radius: 2px;
  background: var(--kohle); opacity: 0.55; transform: translateX(-1px); pointer-events: none;
}
.voice-item.is-playing .voice-row__head { opacity: 0.85; }
.voice-row__pins { position: absolute; left: 0; right: 0; top: -3px; height: 0; }
.pin--voice {
  width: 16px; height: 16px; top: -3px; font-size: 9.5px;
  border-radius: 50% 50% 50% 3px;
}
.voice-row__side {
  display: flex; align-items: center; gap: 6px; flex: none;
  flex-wrap: wrap; justify-content: flex-end; max-width: 184px;
}
.voice-row__cmt, .voice-row__open { padding: 5px 9px; }
/* Inline-Composer (getimte Anmerkung auf der Übersicht) */
.voice-composer {
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px 14px 78px;
}
.voice-composer__at {
  flex: none; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--akzent-tinte); background: var(--akzent); border-radius: 6px; padding: 3px 8px;
}
.voice-composer__text { flex: 1; min-width: 0; resize: vertical; min-height: 36px; }

.empty {
  border: 1.5px dashed var(--faden); border-radius: var(--radius-l);
  padding: 56px 24px; text-align: center; color: var(--nebel); font-size: 14.5px;
  max-width: 560px; margin: 30px auto;
}
.empty strong { color: var(--graphit); display: block; font-size: 16px; margin-bottom: 6px; }

/* ---------- Entity-Akkordeons (Skripte / Stimm-Identitäten, FFR-K4) ---------- */
.acc-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.acc {
  background: var(--leinen); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-m); box-shadow: var(--schatten-1); overflow: hidden;
}
.acc[open] { border-color: color-mix(in srgb, var(--akzent) 40%, var(--faden-soft)); }
.acc__sum {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  cursor: pointer; list-style: none; user-select: none;
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.acc__caret { flex: none; color: var(--nebel); font-size: 12px; transition: transform .15s ease; }
.acc[open] .acc__caret { transform: rotate(90deg); }
.acc__head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc__title { font-weight: 560; color: var(--kohle); font-size: 14.5px; }
.acc__preview {
  color: var(--nebel); font-size: 12.5px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc__date { flex: none; color: var(--nebel); font-size: 12px; font-variant-numeric: tabular-nums; }
.acc__body { padding: 2px 18px 16px 42px; display: flex; flex-direction: column; gap: 14px; }
.acc__text {
  color: var(--graphit); font-size: 13.5px; line-height: 1.7;
  background: var(--leinen-2); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-s); padding: 12px 14px;
}
.acc__gen-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--nebel); margin-bottom: 8px; }
.voice-src { color: var(--graphit); font-size: 13px; margin: -2px 0 14px; word-break: break-all; }
.voice-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.acc__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.acc__loading { color: var(--nebel); font-size: 13px; }
.gen-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid var(--faden); background: var(--leinen); cursor: pointer;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 550;
  color: var(--graphit); transition: all .14s ease;
}
.gen-chip:hover { border-color: var(--akzent-rand); background: var(--akzent-hauch); color: var(--akzent-tinte); }
.gen-chip:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.gen-chip__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-chip--static { cursor: default; background: var(--akzent-hauch); border-color: var(--akzent-rand); color: var(--akzent-tinte); }
.gen-chip--static:hover { background: var(--akzent-hauch); }

/* ---------- Reaktions-Chips ---------- */

.rates { display: inline-flex; gap: 6px; }
.rate {
  border: 1px solid var(--faden); background: var(--leinen); cursor: pointer;
  border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--graphit);
  transition: all .14s ease; display: inline-flex; align-items: center; gap: 6px; font-weight: 550;
}
.rate:hover { border-color: var(--faden-strong); }
.rate.is-on[data-rating="love"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); }
.rate.is-on[data-rating="ok"]   { background: #eef3ee; border-color: var(--gut); color: #44693f; }
.rate.is-on[data-rating="no"]   { background: #f8edec; border-color: var(--warn); color: #8f4138; }
.rate--mini { padding: 4px 9px; font-size: 12px; }

/* ---------- Player-Overlay (Dia auf Kohle-Bühne) ---------- */

.viewer {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(24, 22, 19, 0.55);
}
.viewer.is-open { display: flex; }
.viewer__panel {
  margin: auto; width: min(1180px, calc(100% - 32px)); height: min(86vh, 900px);
  background: var(--leinen); border-radius: var(--radius-l); box-shadow: var(--schatten-3);
  display: flex; overflow: hidden;
}
.stage {
  flex: 1.65; min-width: 0; background: var(--kohle);
  display: flex; flex-direction: column; position: relative;
}
.stage__media {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  position: relative; padding: 18px 18px 6px;
}
.stage__media video, .stage__media img {
  max-width: 100%; max-height: 100%; border-radius: 8px; display: block;
  background: #000;
}
.stage__close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.stage__close:hover { background: rgba(255,255,255,0.26); }

/* Admin-set read-only hint badge over the clip (e.g. "Demo-Stimme"). Top-left = clear
   of the close (top-right) + nav arrows (mid left/right). pointer-events:none → never blocks playback. */
.stage__note {
  position: absolute; top: 14px; left: 14px; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px; max-width: 62%;
  padding: 6px 12px; border-radius: 20px; pointer-events: none;
  font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .01em;
  background: rgba(245,166,35,0.95); color: #2a1c02;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4); backdrop-filter: blur(2px);
}
.stage__note[hidden] { display: none; }

/* Audio im großen Viewer: Emblem + scrollbarer Transkript-Text (mit Emotion-Tags) */
.stage__audio {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 22px 24px 8px;
}
.stage__audio-emblem { text-align: center; color: rgba(255,255,255,0.9); flex: none; }
.stage__audio-icon { font-size: 56px; margin-bottom: 8px; }
.stage__audio-title { font-size: 15px; font-weight: 560; }
.stage__transcript {
  flex: 1; min-height: 0; width: min(100%, 640px); overflow-y: auto;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; padding: 16px 18px; text-align: left;
}
.tscript__label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 8px;
}
.tscript__body { color: rgba(255,255,255,0.92); font-size: 14.5px; line-height: 1.75; }
/* Faces (Manu 2026-07-22): Prompt-Box unterm Bild */
.stage__transcript--img { max-height: 180px; overflow: auto; }
.tscript__tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 3px 7px; margin: 0 2px; border-radius: 6px; vertical-align: baseline;
  background: rgba(245,166,35,0.22); color: var(--honig);
}

/* Vor/Zurück im Player — direkt zum nächsten Asset, ohne das Modal zu schließen */
.stage__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding-bottom: 3px;
  transition: background .14s ease, opacity .14s ease;
}
.stage__nav:hover { background: rgba(255,255,255,0.28); }
.stage__nav--prev { left: 12px; }
.stage__nav--next { right: 12px; }
.stage__nav.is-hidden { opacity: 0; pointer-events: none; }

/* Steuerleiste + Filmstreifen-Timeline */
.deck { padding: 8px 18px 16px; color: #fff; }
.deck__row { display: flex; align-items: center; gap: 12px; }
.deck__btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; flex: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: background .14s ease;
}
.deck__btn:hover { background: rgba(255,255,255,0.24); }
.deck__time { color: rgba(255,255,255,0.75); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; flex: none; }

.strip { position: relative; flex: 1; height: 38px; cursor: pointer; }
.strip__track {
  position: absolute; left: 0; right: 0; top: 13px; height: 12px;
  background: rgba(255,255,255,0.16); border-radius: 6px; overflow: hidden;
}
.strip__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: color-mix(in srgb, var(--akzent) 80%, #fff); opacity: 0.9; }
.strip__head {
  position: absolute; top: 7px; width: 4px; height: 24px; border-radius: 2px;
  background: #fff; transform: translateX(-2px); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.pin {
  position: absolute; top: -7px; transform: translateX(-50%);
  width: 19px; height: 19px; border-radius: 50% 50% 50% 4px;
  background: var(--honig); color: #3c2f10; border: none; cursor: pointer;
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4); transition: transform .12s ease; z-index: 3;
}
.pin:hover { transform: translateX(-50%) scale(1.18); }

/* Trim-Modus */
.strip.is-trim .strip__fill { display: none; }
.trim-shade { position: absolute; top: 13px; height: 12px; background: rgba(10,9,8,0.55); z-index: 1; pointer-events: none; }
.trim-handle {
  position: absolute; top: 4px; width: 14px; height: 30px; z-index: 4;
  background: var(--akzent); border-radius: 5px; cursor: ew-resize; border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  touch-action: none;   /* Drag darf auf Touch nicht als Scroll interpretiert werden */
}
/* Unsichtbare Hit-Area: 14×30 → 46×46 (≥44px Touch-Target, WCAG) */
.trim-handle::before { content: ""; position: absolute; inset: -8px -16px; }
.trim-handle::after {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 3px;
  border-left: 1.5px solid rgba(0,0,0,0.35); border-right: 1.5px solid rgba(0,0,0,0.35);
}
.trim-bar {
  display: none; align-items: center; gap: 12px; margin-top: 10px;
  background: rgba(255,255,255,0.08); border-radius: 10px; padding: 9px 14px;
}
.trim-bar.is-on { display: flex; }
.trim-bar__label { color: rgba(255,255,255,0.85); font-size: 13px; flex: 1; }
.trim-bar__label .tc { color: #fff; font-size: 12.5px; }

/* Kommentar-Composer am Playhead */
.composer {
  display: none; margin-top: 10px; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 12px;
}
.composer.is-on { display: flex; }
.composer__at {
  flex: none; background: var(--honig); color: #3c2f10; border-radius: 7px;
  padding: 5px 9px; font-family: var(--mono); font-size: 12px; font-weight: 600; margin-top: 3px;
}
.composer textarea {
  flex: 1; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; border-radius: 8px; padding: 8px 11px; font-family: inherit; font-size: 13.5px;
  resize: none; min-height: 38px;
}
.composer textarea::placeholder { color: rgba(255,255,255,0.45); }
.composer textarea:focus { outline: none; border-color: var(--akzent); }

/* Seitenpanel */
.side {
  flex: 1; min-width: 300px; max-width: 380px; border-left: 1px solid var(--faden-soft);
  display: flex; flex-direction: column; background: var(--leinen);
}
.side__head { padding: 20px 22px 14px; border-bottom: 1px solid var(--faden-soft); }
.side__title { font-size: 15.5px; font-weight: 620; color: var(--kohle); line-height: 1.35; }
.side__meta { color: var(--nebel); font-size: 12.5px; margin-top: 4px; }
/* P12: Badge-Zeile (Kategorie/Herkunft) links, rechtsbündig die kopierbare ID-Pill. */
.side__meta--row { display: flex; align-items: center; gap: 8px; }
.side__meta-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--faden-soft); }
.side__comments { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.side__comments-title { font-size: 12.5px; font-weight: 600; color: var(--nebel); letter-spacing: 0.03em; }

.note {
  background: var(--leinen-2); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-s); padding: 10px 12px; position: relative;
}
.note__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.note__pin {
  background: var(--honig); color: #3c2f10; border-radius: 6px; cursor: pointer; border: none;
  padding: 2px 7px; font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.note__author { font-size: 12px; font-weight: 600; color: var(--graphit); }
.note__ts { font-size: 11px; color: var(--nebel); margin-left: auto; }
.note__text { font-size: 13.5px; color: var(--graphit); white-space: pre-wrap; }
.note__del { position: absolute; right: 8px; bottom: 8px; border: none; background: none; color: var(--nebel); cursor: pointer; font-size: 12px; display: none; }
.note:hover .note__del { display: block; }
.note__del:hover { color: var(--warn); }

/* ---------- Sequenz-Tray (Daumenkino) ---------- */

.tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--kohle); color: #fff;
  transform: translateY(110%); transition: transform .25s ease;
  box-shadow: 0 -8px 32px rgba(20,18,15,0.25);
}
.tray.is-open { transform: translateY(0); }
.tray__inner { max-width: 1240px; margin: 0 auto; padding: 14px 28px 16px; display: flex; align-items: center; gap: 16px; }
.tray__label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); flex: none; }
.tray__strip { flex: 1; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px; }
.tray__item { position: relative; flex: none; width: 92px; }
.tray__item img {
  width: 92px; height: 56px; object-fit: cover; border-radius: 7px; display: block;
  border: 2px solid rgba(255,255,255,0.25);
}
.tray__item.is-drag img { opacity: 0.4; }
.tray__num {
  position: absolute; left: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--akzent); color: var(--akzent-tinte); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tray__rm {
  position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.75); color: #fff; border: none; cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.tray__side { display: flex; flex-direction: column; gap: 8px; flex: none; width: 230px; }
.tray__side .input { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); color: #fff; }
.tray__side .input::placeholder { color: rgba(255,255,255,0.4); }
.tray__status { font-size: 12px; color: rgba(255,255,255,0.7); min-height: 16px; }

/* ---------- Modals / Toasts ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 120; background: rgba(24,22,19,0.45);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.overlay.is-open { display: flex; }
.modal {
  background: var(--leinen); border-radius: var(--radius-l); box-shadow: var(--schatten-3);
  width: min(480px, 100%); padding: 28px;
}
.modal h2 { margin-bottom: 6px; }
.modal__sub { color: var(--nebel); font-size: 13.5px; margin: 0 0 18px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--kohle); color: #fff; border-radius: 999px; padding: 10px 20px;
  font-size: 13.5px; box-shadow: var(--schatten-2); animation: toast-in .2s ease;
  max-width: min(560px, 90vw);
}
.toast--warn { background: var(--warn); }
.toast--action {
  display: flex; align-items: center; gap: 12px; border-radius: 14px;
  padding: 11px 14px 11px 20px; text-align: left;
}
.toast__btn {
  border: none; border-radius: 999px; padding: 7px 13px; cursor: pointer;
  background: rgba(255,255,255,0.92); color: var(--kohle); font-weight: 600;
  font-size: 12.5px; white-space: nowrap; font-family: inherit;
}
.toast__btn:hover { background: #fff; }
.toast__close {
  border: none; background: none; color: rgba(255,255,255,0.7); cursor: pointer;
  font-size: 12px; padding: 4px;
}
.toast__close:hover { color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Setup (Admin) ---------- */

.setup-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.setup-head h1 { flex: 1; }

.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.client-card {
  background: var(--leinen); border: 1px solid var(--faden-soft); border-radius: var(--radius-m);
  box-shadow: var(--schatten-1); padding: 20px; display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; transition: box-shadow .18s ease, transform .18s ease;
}
.client-card:hover { box-shadow: var(--schatten-2); transform: translateY(-2px); }
.client-card__head { display: flex; align-items: center; gap: 12px; }
.client-card__counts { color: var(--nebel); font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; }
.client-card--new {
  border-style: dashed; border-color: var(--faden); box-shadow: none; align-items: center;
  justify-content: center; color: var(--nebel); min-height: 130px; font-weight: 550;
}
.client-card--new:hover { color: var(--kohle); border-color: var(--faden-strong); }

.detail { background: var(--leinen); border: 1px solid var(--faden-soft); border-radius: var(--radius-l); box-shadow: var(--schatten-1); padding: 26px; }
.detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.detail__grid .full { grid-column: 1 / -1; }
.dropzone {
  border: 1.5px dashed var(--faden); border-radius: var(--radius-s); background: var(--leinen-2);
  padding: 18px; text-align: center; color: var(--nebel); font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--akzent-rand); background: var(--akzent-hauch); color: var(--graphit); }
.asset-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--faden-soft); background: var(--leinen-2); font-size: 13px;
}
.asset-row img { width: 52px; height: 34px; object-fit: cover; border-radius: 5px; background: var(--eingabe); }
.asset-row__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--graphit); }
.asset-row__sel { flex: none; width: auto; min-width: 0; padding: 5px 8px; font-size: 12.5px; }
.codebox {
  display: inline-flex; align-items: center; gap: 10px; background: var(--eingabe);
  border: 1px solid var(--faden); border-radius: var(--radius-s); padding: 7px 12px;
  font-family: var(--mono); font-size: 13px;
}
.section-title { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; }
.section-title h2 { flex: none; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--faden-soft); }

/* ---------- Zugänge (geteilter Code + benannte Member-Codes) ---------- */
.access-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--faden-soft); background: var(--leinen-2);
  border-radius: var(--radius-s);
}
.access-row__main { flex: 1; min-width: 150px; }
.access-row__name { font-weight: 600; color: var(--graphit); font-size: 13.5px; }
.access-row__sub { color: var(--nebel); font-size: 12px; margin-top: 1px; }
.access-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.access-add .input { flex: 1; min-width: 180px; }
.access-empty { color: var(--nebel); font-size: 13px; padding: 2px 2px; }

/* ---------- Asset-Karten (Setup): Stimmen / Clips / Bilder ---------- */
.asset-cards { display: flex; flex-direction: column; gap: 18px; }
.asset-card {
  background: var(--leinen); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-l); box-shadow: var(--schatten-1); padding: 20px 22px;
}
.asset-card__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.asset-card__title { font-size: 15px; font-weight: 640; color: var(--kohle); }
.asset-card__count { color: var(--nebel); font-size: 12.5px; }
.asset-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.asset-filter__chip {
  border: 1px solid var(--faden); background: var(--leinen); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 550; color: var(--graphit);
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.asset-filter__chip:hover { border-color: var(--faden-strong); }
.asset-filter__chip.is-active { background: var(--kohle); border-color: var(--kohle); color: #fff; }
.asset-card__list { display: flex; flex-direction: column; gap: 8px; }
.asset-card__empty { color: var(--nebel); font-size: 13px; padding: 8px 2px; }
.asset-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.asset-pager__info { color: var(--nebel); font-size: 12.5px; min-width: 92px; text-align: center; }
.asset-pager .btn { padding: 5px 12px; }

/* Asset-Zeile: Thumb + Name öffnen die Lightbox */
.asset-row__thumb { cursor: pointer; }
.asset-row__thumb--audio { width: 52px; text-align: center; display: inline-block; flex: none; }
.asset-row__open {
  background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
}
.asset-row__open:hover { color: var(--kohle); text-decoration: underline; }
.asset-row__rating, .asset-row__cc { flex: none; }

/* Lightbox: Original-Link + Kommentar-Eingabe (Rest nutzt .viewer/.stage/.side/.note) */
.side__orig { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--nebel); text-decoration: underline; }
.side__orig:hover { color: var(--kohle); }
.lb-add { display: flex; gap: 8px; align-items: flex-end; margin-top: 4px; }
.lb-add__input { flex: 1; resize: vertical; min-height: 40px; }

.fb-item { border-left: 3px solid var(--honig); background: var(--leinen-2); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 10px 14px; font-size: 13.5px; }
.fb-item--request { border-left-color: var(--akzent); }
.fb-item__meta { color: var(--nebel); font-size: 12px; margin-top: 3px; }

.color-row { display: flex; gap: 10px; align-items: center; }
.color-row input[type="color"] {
  width: 46px; height: 38px; border: 1px solid var(--faden); border-radius: var(--radius-s);
  background: var(--leinen); padding: 3px; cursor: pointer;
}

/* ---------- Lade-Spinner (Studio-Embed, Modals) ---------- */

.spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2.5px solid var(--faden); border-top-color: var(--akzent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- HAUPT-NAVI (Workspaces, in der Topbar rechts neben dem Logo) ---------- */

.topnav {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0;
}
.wsbtn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--faden); background: var(--leinen);
  border-radius: 12px; padding: 7px 11px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  text-align: left;
}
.wsbtn:hover { border-color: var(--faden-strong); box-shadow: var(--schatten-1); }
.wsbtn.is-active { background: var(--kohle); border-color: var(--kohle); }
.wsbtn__ico { font-size: 18px; line-height: 1; flex: none; }
.wsbtn__txt { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.wsbtn__title { font-size: 13.5px; font-weight: 620; color: var(--kohle); white-space: nowrap; }
.wsbtn.is-active .wsbtn__title { color: #fff; }
.wsbtn__sub { font-size: 10.5px; color: var(--nebel); white-space: nowrap; }
.wsbtn.is-active .wsbtn__sub { color: rgba(255,255,255,0.6); }
/* Unter 1240px reicht der Platz nicht für Titel + Untertitel neben Marke + Burger —
   Untertitel weglassen statt die Kopfzeile umbrechen zu lassen (Manu: immer einzeilig). */
@media (max-width: 1239px) {
  .wsbtn__sub { display: none; }
}

/* Subbar nur im Asset-Workspace zeigen (JS schaltet display) */
.subbar.is-hidden { display: none; }

/* ---------- ERSTELLEN-Workspace (eingebettetes Studio) ---------- */

.studio-embed { display: flex; flex-direction: column; gap: 14px; }
.studio-embed__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Unauffälliger Fallback-Link „In neuem Tab öffnen" (FFR-K5). Der prominente Button
   zieht in den Studio-Header (FFR-T1) — hier bewusst schlicht, kein .btn. */
.studio-embed__tablink { color: var(--nebel); font-size: 12.5px; text-decoration: none; }
.studio-embed__tablink:hover { color: var(--graphit); text-decoration: underline; }
.studio-embed__quota { color: var(--nebel); font-size: 12.5px; margin-left: auto; }
.studio-frame-wrap {
  position: relative; border: 1px solid var(--faden-soft); border-radius: var(--radius-l);
  overflow: hidden; box-shadow: var(--schatten-1); background: var(--leinen-2);
  /* 290px → 200px Offset (Manu 2026-07-13): unten war viel Freiraum — ~15 % mehr
     Höhe, damit z. B. die Idee-Karte komplett ins Studio-iframe passt. */
  height: calc(100vh - 200px); min-height: 600px;
}
.studio-frame-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.studio-frame-msg {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center; color: var(--nebel); font-size: 14px; text-align: center; padding: 24px;
}
.studio-frame-err { font-size: 34px; line-height: 1; }

/* ---------- ZUSAMMENSTELLEN-Workspace (Clip-Bin + Sequenz-Panel) ---------- */

.assemble-intro { color: var(--nebel); font-size: 14px; margin: -4px 0 18px 2px; }
.assemble { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }

/* ASM-WP1: Sequenz-Landing (Karten wie My Campaigns) + Builder-Kopf */
.seqgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 4px; }
.seqcard { position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--leinen); border: 1px solid var(--faden-soft); border-radius: var(--radius-m);
  box-shadow: var(--schatten-1); transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.seqcard:hover { border-color: var(--faden-strong); box-shadow: var(--schatten-2); }
.seqcard:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.seqcard__cover { aspect-ratio: 16 / 10; background: var(--eingabe); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.seqcard__cover img { width: 100%; height: 100%; object-fit: cover; }
/* Wizard-Projektkarte: ihr Cover ist das erste Szenen-Bild des Auftrags, und das ist
   seit HYP-149 entweder quadratisch (Bestand) ODER 9:16 — ein festes 16:10-Cover
   schnitt vom Hochkant-Master ~65 % der Höhe weg, meist ohne Gesicht. Quadratischer
   Rahmen + `contain`: der quadratische Bestandsfall füllt ihn randlos (nichts geht
   verloren, wo vorher 37 % fehlten), der Hochkant-Fall steht vollständig darin. Nur
   diese Karte — Sequenz- und Talkinghead-Karten behalten den Querformat-Zuschnitt. */
.seqcard--wizproj .seqcard__cover { aspect-ratio: 1 / 1; }
.seqcard--wizproj .seqcard__cover img { object-fit: contain; }
.seqcard__emblem { font-size: 34px; opacity: .5; }
.seqcard__body { padding: 10px 12px 12px; }
.seqcard__name { font-weight: 600; color: var(--kohle); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seqcard__meta { font-size: 12.5px; color: var(--nebel); margin-top: 2px; }
.seqcard__del { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.92); border-radius: 999px; box-shadow: var(--schatten-1); opacity: 0; transition: opacity .15s ease; }
.seqcard:hover .seqcard__del, .seqcard:focus-within .seqcard__del { opacity: 1; }
.seqcard--new { align-items: center; justify-content: center; gap: 8px; min-height: 190px; color: var(--nebel);
  border-style: dashed; border-color: var(--faden-strong); background: var(--leinen-2); }
.seqcard--new:hover { color: var(--kohle); border-color: var(--akzent-rand); background: var(--akzent-hauch); }
.seqcard__plus { font-size: 34px; line-height: 1; }
.seqcard__newlbl { font-weight: 600; }
.seqbuild__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.seqbuild__name { flex: 1 1 auto; max-width: 420px; }
.bin {
  background: var(--leinen); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-l); box-shadow: var(--schatten-1); padding: 18px;
}
.bin__hint { color: var(--nebel); font-size: 12.5px; margin: 4px 0 14px; }
.bin__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.bin__empty { color: var(--nebel); font-size: 13.5px; padding: 24px 4px; }
.binclip {
  border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--faden-soft);
  background: var(--leinen);
}
.binclip__media { position: relative; padding-bottom: 62%; background: var(--eingabe); }
.binclip__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.binclip__add {
  position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--akzent); color: var(--akzent-tinte); border: none; font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--schatten-1);
}
.binclip__add:hover { transform: scale(1.08); }
.binclip__add.is-in { background: var(--gut); color: #fff; }
.binclip__cap { padding: 6px 8px; font-size: 11.5px; color: var(--graphit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seqpanel {
  background: var(--kohle); color: #fff; border-radius: var(--radius-l);
  box-shadow: var(--schatten-2); padding: 18px; position: sticky; top: 150px;
}
.seqpanel h3 { color: #fff; margin-bottom: 4px; }
.seqpanel__hint { color: rgba(255,255,255,0.6); font-size: 12px; margin-bottom: 14px; }
.seqstrip { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.seqitem { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.07); border-radius: 8px; padding: 7px; }
.seqitem.is-drag { opacity: 0.4; }
.seqitem__num {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--akzent); color: var(--akzent-tinte); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.seqitem__th { width: 54px; height: 32px; border-radius: 5px; flex: none; object-fit: cover; cursor: grab; }
.seqitem__cap { flex: 1; min-width: 0; font-size: 12.5px; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seqitem__rm { border: none; background: rgba(0,0,0,0.4); color: #fff; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; flex: none; }
.seqitem__rm:hover { background: var(--warn); }
.seqpanel .input { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); color: #fff; margin-bottom: 10px; }
.seqpanel .input::placeholder { color: rgba(255,255,255,0.4); }
.seqpanel .btn--primary { width: 100%; justify-content: center; }
.seqpanel__empty { color: rgba(255,255,255,0.55); font-size: 12.5px; margin-bottom: 14px; }
.seqstatus { color: rgba(255,255,255,0.7); font-size: 12px; text-align: center; min-height: 16px; margin-top: 8px; }

/* ---------- Freigabe-/Safety-Overlay ---------- */

.smodal {
  background: var(--leinen); border-radius: var(--radius-l); box-shadow: var(--schatten-3);
  width: min(540px, 100%); padding: 26px; max-height: 88vh; overflow: auto;
}
.smodal h2 { margin-bottom: 4px; }
.smodal__sub { color: var(--nebel); font-size: 13px; margin: 0 0 16px; }
.iso-note {
  background: #f7edec; border: 1px solid color-mix(in srgb, var(--warn) 35%, #fff);
  border-radius: var(--radius-s); padding: 10px 13px; font-size: 12.5px; color: #7a3a32; margin: 0 0 16px;
}
.scheck { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--faden-soft); }
.scheck:last-of-type { border-bottom: none; }
.scheck__box {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  border: 2px solid var(--gut); background: var(--gut); color: #fff;
}
.scheck__box.warn { border-color: var(--warn); background: var(--warn); }
.scheck__main strong { display: block; color: var(--kohle); font-size: 14px; }
.scheck__main span { font-size: 12.5px; color: var(--nebel); }
.smodal__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }

/* ---------- Status-Workflow (Badges + Filter + Steuerung) ---------- */

/* Farbcodiertes Status-Badge (Karte oben rechts + Seitenpanel + Vergleich) */
.status-badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 3px 9px; font-size: 11px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.01em; white-space: nowrap;
}
.status-badge.st-new       { background: #e2f3e2; color: #2f7d3a; }
.status-badge.st-review    { background: #e6effb; color: #2d5e96; }
.status-badge.st-change    { background: #fcefe0; color: #9a5a16; }
.status-badge.st-rejected  { background: #fbe6e6; color: #a03535; }
.status-badge.st-approved  { background: #e9f3e8; color: #3c6238; }
.status-badge.st-published { background: #ece6f7; color: #5a3f8e; }

/* Status-Badge auf der Karte: oben rechts in der Ecke (Quick-Actions sind unten rechts) */
/* „New"-/Status-Pille: FFR-K1 (P22) von oben rechts → unten links, damit oben rechts
   der Mehrfachauswahl-Kreis Platz hat. */
.card__statusbadge { position: absolute; left: 8px; bottom: 8px; z-index: 2; }
.card__statusbadge .status-badge { box-shadow: var(--schatten-1); }

/* Status-Filter (Dropdown in der Subbar) */
.statusfilter { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.statusfilter__lbl { font-size: 12px; font-weight: 600; color: var(--nebel); letter-spacing: 0.02em; white-space: nowrap; }
.statusfilter__sel {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--kohle);
  padding: 6px 26px 6px 11px; font-size: 12.5px; font-weight: 550; font-family: inherit;
  cursor: pointer; transition: border-color .15s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238d8779' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.statusfilter__sel:hover { border-color: var(--faden-strong); }
.statusfilter__sel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Status-Steuerung im Seitenpanel */
.side__status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--faden-soft);
}
.side__status-label { font-size: 12px; font-weight: 600; color: var(--nebel); letter-spacing: 0.02em; }
.side__status-sel {
  appearance: none; -webkit-appearance: none; margin-left: auto;
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--kohle);
  padding: 6px 30px 6px 12px; font-size: 12.5px; font-weight: 550; font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238d8779' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.side__status-sel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* P16: farbcodiertes Status-Select — ersetzt die frühere Badge+Select-Doppelung (eine Darstellung). */
.side__status-sel--tinted.st-new       { background-color: #e2f3e2; color: #2f7d3a; border-color: #bfe3bf; }
.side__status-sel--tinted.st-review    { background-color: #e6effb; color: #2d5e96; border-color: #c4d8f2; }
.side__status-sel--tinted.st-change    { background-color: #fcefe0; color: #9a5a16; border-color: #f0d5b0; }
.side__status-sel--tinted.st-rejected  { background-color: #fbe6e6; color: #a03535; border-color: #f0c8c8; }
.side__status-sel--tinted.st-approved  { background-color: #e9f3e8; color: #3c6238; border-color: #c8e0c5; }
.side__status-sel--tinted.st-published { background-color: #ece6f7; color: #5a3f8e; border-color: #d6c9ee; }

/* Sidebar-Umbau 2026-07-14 (Manu). */
/* Trennstrich unter Kopf/Untertitel/ID, direkt über der Aktionsleiste. */
.side__divider { border-top: 1px solid var(--faden-soft); margin: 2px 0 12px; }
/* „unique ID:"-Label + Pille auf einer Linie (rechts in der Meta-Zeile). */
.side__id-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* Aktionsleiste: ❤ 👍 👎 🗑 als gleich große Icon-Buttons. */
.side__actionbar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.side__actionbar .rates { gap: 6px; }
.rate--danger { color: var(--warn); }
.rate--danger:hover { background: var(--warn); border-color: var(--warn); color: #fff; }
/* Anmerkung: Textfeld (1 Zeile hoch, links) + Send-Button (rechts) — eine Zeile.
   textarea.side-composer__input überstimmt gezielt textarea.input{min-height:84px}. */
.side-composer--row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; }
textarea.side-composer__input { flex: 1 1 auto; min-width: 0; height: 40px; min-height: 40px;
  max-height: 140px; resize: vertical; line-height: 1.4; }
.side-composer__send { flex: 0 0 auto; align-self: stretch; }
/* Video-Werkzeuge als eigener Abschnitt. */
.side__tools { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-bottom: 12px; }
.side__tools-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Download-Abschnitt: Button (schmal) + KI-Label-Auswahl auf EINER Zeile, Hinweis darunter. */
.side__download { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px;
  padding-top: 12px; border-top: 1px solid var(--faden-soft); }
.side__download-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.side__download-btn { flex: 0 0 auto; }
.side__download-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--graphit); cursor: pointer; }
.side__download-label input { flex: 0 0 auto; cursor: pointer; }
/* HYP-184: Label-Variante als Select (dieselbe Pillen-Optik wie der Status-Select). */
.side__download-sel {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--kohle);
  padding: 5px 28px 5px 11px; font-size: 12.5px; font-weight: 550; font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238d8779' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.side__download-sel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* P17: Kampagnen — Label + „+"-Dropdown auf einer Linie, zugeordnete Kampagnen als Pillen darunter. */
.side__camps { gap: 8px; padding-top: 12px; border-top: 1px solid var(--faden-soft); }
.side__camps-head { display: flex; align-items: center; gap: 8px; }
.side__camps-head .side__tags-label { flex: 0 0 auto; }
.side__camp-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* P18: Ordner als eigener Abschnitt (Layout wie Status). */
.side__folder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%;
  padding-top: 12px; border-top: 1px solid var(--faden-soft); }

/* ---------- Vergleichen (Compare-Modus + Split-Screen) ---------- */

.tab--compare.is-active { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); }

/* Karte im Vergleichsmodus: Auswahl-Nummer + Hervorhebung */
.card.is-compare { cursor: copy; }
.card.is-compare:hover { box-shadow: var(--schatten-2); }
.card.is-selected { outline: 3px solid var(--akzent); outline-offset: -1px; }
.card__pick {
  position: absolute; left: 8px; top: 44px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: 2px solid var(--akzent); color: var(--akzent-tinte);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  box-shadow: var(--schatten-1);
}
.card.is-selected .card__pick { background: var(--akzent); color: var(--akzent-tinte); }

/* Versions-Hinweis auf der Karte (klickbar → Versionen vergleichen) */
.card__versions {
  flex: none; font-size: 11px; font-weight: 600; color: var(--akzent-tinte);
  background: var(--akzent-hauch); border: 1px solid var(--akzent-rand);
  border-radius: 999px; padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.card__versions:hover { background: color-mix(in srgb, var(--akzent) 22%, #fff); }

/* Split-Screen-Overlay */
.compare {
  position: fixed; inset: 0; z-index: 110; display: none;
  background: rgba(24, 22, 19, 0.6); padding: 18px;
}
.compare.is-open { display: flex; }
.compare__panel {
  margin: auto; width: min(1280px, 100%); height: min(90vh, 980px);
  background: var(--kohle); border-radius: var(--radius-l); box-shadow: var(--schatten-3);
  display: flex; flex-direction: column; overflow: hidden;
}
.compare__bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.compare__heading { color: #fff; font-weight: 620; font-size: 15px; }
.compare__bar .btn { margin-left: auto; }
.compare__bar .btn--ghost { color: rgba(255,255,255,0.85); }
.compare__bar .btn--ghost:hover { color: #fff; background: rgba(255,255,255,0.12); }
.compare__close {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 15px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.compare__close:hover { background: rgba(255,255,255,0.26); }
.compare__split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.1); }
.compare__side { background: var(--kohle); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.compare__label {
  padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.compare__name { color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare__sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compare__date { color: rgba(255,255,255,0.6); font-size: 12px; }
.compare__newer { background: var(--akzent); color: var(--akzent-tinte); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.compare__appr { background: var(--gut); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; }
.compare__stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px;
}
.compare__media { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; display: block; }
.compare__audio { color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.compare__audio audio { width: min(320px, 80%); }

/* ---------- Stimmen vergleichen (Voices-Tab → „Vergleichen") ---------- */
.vc-bar { display: flex; margin-bottom: 12px; }
.vc-open { gap: 6px; }

/* Heller Body im .compare-Rahmen (wie .qc__panel) — editierbare Textkarten. */
.vc__panel { width: min(1080px, 100%); background: var(--leinen); }

/* Helle Panels (.qc/.vc): die .compare__bar-Defaults sind für den dunklen Rahmen
   (weiß auf kohle) — auf leinen wären Überschrift und ✕ unsichtbar. Dunkel einfärben
   + ✕ nach rechts (das margin-left:auto der Bar gilt nur für .btn). */
.qc .compare__bar, .vc .compare__bar { border-bottom-color: var(--faden-soft); }
.qc .compare__heading, .vc .compare__heading { color: var(--kohle); }
.qc .compare__close, .vc .compare__close {
  margin-left: auto; background: rgba(0,0,0,0.08); color: var(--kohle);
}
.qc .compare__close:hover, .vc .compare__close:hover { background: rgba(0,0,0,0.16); }
.vc__body {
  flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.vc-intro { color: var(--nebel); font-size: 13.5px; margin: 0; }

.vc-voices {
  background: var(--leinen-2); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-m); padding: 12px 14px;
}
.vc-voices__h { font-size: 12.5px; font-weight: 600; color: var(--nebel); margin-bottom: 8px; }
.vc-voices__row { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--faden); border-radius: 999px; padding: 6px 13px;
  background: var(--leinen); font-size: 13.5px; color: var(--kohle);
}
.vc-chip:hover { border-color: var(--faden-strong); }
.vc-chip input { accent-color: var(--akzent); }

.vc-cards { display: flex; flex-direction: column; gap: 14px; }
.vc-card {
  background: var(--leinen); border: 1px solid var(--faden);
  border-radius: var(--radius-m); box-shadow: var(--schatten-1); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.vc-card__text { min-height: 64px; }
.vc-card__actions { display: flex; gap: 8px; align-items: center; }
.vc-rows { display: flex; flex-direction: column; gap: 8px; }
.vc-cell {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: var(--radius-s); background: var(--leinen-2);
  border: 1px solid var(--faden-soft);
}
.vc-cell__name { font-size: 13.5px; font-weight: 550; color: var(--kohle); min-width: 150px; flex: none; }
.vc-cell__slot { flex: 1; min-width: 0; display: flex; align-items: center; }
.vc-audio { width: 100%; max-width: 460px; height: 34px; }
.vc-spinner { color: var(--nebel); font-size: 13px; }
.vc-hint { color: var(--nebel); font-size: 13px; padding: 4px 2px; }
.vc-add { align-self: flex-start; }

@media (max-width: 640px) {
  .vc-cell { flex-direction: column; align-items: stretch; gap: 6px; }
  .vc-cell__name { min-width: 0; }
}

/* ---------- Qualitäts-Check-Overlay (nutzt .compare-Rahmen) ---------- */

/* Ampel-Button im Seitenpanel (renderSideActions). */
.btn.qc { position: relative; }
.btn.qc.qc--green  { border-color: color-mix(in srgb, var(--gut) 55%, #fff); background: color-mix(in srgb, var(--gut) 14%, #fff); color: #3f6a3d; }
.btn.qc.qc--yellow { border-color: color-mix(in srgb, var(--honig) 55%, #fff); background: color-mix(in srgb, var(--honig) 16%, #fff); color: #8a6410; }
.btn.qc.qc--red    { border-color: color-mix(in srgb, var(--warn) 55%, #fff); background: color-mix(in srgb, var(--warn) 12%, #fff); color: #9a3d33; }
.btn.qc.qc--none   { color: var(--nebel); border-style: dashed; }
.btn.qc.qc--none:hover { color: var(--graphit); }

.qc__panel { width: min(1180px, 100%); background: var(--leinen); }
.qc__split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px; background: var(--faden-soft); }
.qc__video {
  background: var(--kohle); display: flex; align-items: center; justify-content: center;
  padding: 16px; min-height: 0; min-width: 0;
}
.qc__player { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; display: block; }
.qc__detail {
  background: var(--leinen); overflow: auto; min-height: 0; min-width: 0;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
}
.qc__loading, .qc__empty { color: var(--nebel); font-size: 14px; padding: 8px 2px; }

.qc__head { border-bottom: 1px solid var(--faden-soft); padding-bottom: 12px; }
.qc__head-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.qc__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--hauch); }
.qc__dot.qc--green  { background: var(--gut); }
.qc__dot.qc--yellow { background: var(--honig); }
.qc__dot.qc--red    { background: var(--warn); }
.qc__conf { font-weight: 650; color: var(--kohle); font-size: 14px; }
.qc__summary { margin: 0; color: var(--graphit); font-size: 13.5px; line-height: 1.5; }

.qc__cat { border-bottom: 1px solid var(--faden-soft); padding-bottom: 8px; }
.qc__cat-title { font-weight: 650; color: var(--kohle); font-size: 13.5px; margin: 2px 0 8px; }
.qc__cat--deferred { opacity: 0.62; }

.qc__row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--faden-soft); }
.qc__row:first-of-type { border-top: none; }
.qc__icon {
  width: 20px; height: 20px; border-radius: 5px; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--hauch);
}
.qc__row.is-pass .qc__icon      { background: var(--gut); }
.qc__row.is-uncertain .qc__icon { background: var(--honig); }
.qc__row.is-fail .qc__icon      { background: var(--warn); }
.qc__row.is-deferred .qc__icon  { background: var(--hauch); color: var(--nebel); }
.qc__row-main { flex: 1; min-width: 0; }
.qc__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qc__row-text { color: var(--kohle); font-size: 13px; }
.qc__row-meta { color: var(--nebel); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.qc__row-note { color: var(--graphit); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.qc__crit-note {
  margin-top: 6px; width: 100%; border: 1px solid var(--faden); border-radius: var(--radius-s);
  background: var(--eingabe); color: var(--kohle); font: inherit; font-size: 12.5px; padding: 6px 9px;
}
.qc__crit-note::placeholder { color: var(--hauch); }

.qc__comment { margin-top: 4px; }
.qc__comment textarea { min-height: 68px; resize: vertical; }
.qc__comment-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .viewer__panel { flex-direction: column; height: calc(100% - 24px); width: calc(100% - 24px); }
  .stage { flex: none; height: 56%; }
  .side { max-width: none; border-left: none; border-top: 1px solid var(--faden-soft); }
  .detail__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .assemble { grid-template-columns: 1fr; }
  .seqpanel { position: static; }
  .compare__split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .qc__split { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 40%) 1fr; }
}
@media (max-width: 700px) {
  /* Audio-Zeilen (voices): mobil stapeln — Zeile 1 Play+Titel, dann Meta/Script,
     Waveform über die ganze Kartenbreite, darunter Bewertung+Kommentar.
     __main wird per display:contents aufgelöst, damit seine Kinder ohne
     Markup-Änderung direkt im Grid platziert werden können. */
  .voice-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 12px 14px; align-items: center; }
  .voice-row__main { display: contents; }
  .voice-row__play { grid-row: 1; grid-column: 1; }
  .voice-row__title { grid-row: 1; grid-column: 2; }
  .voice-row__meta, .voice-row__script { grid-column: 1 / -1; margin-top: 0; }
  .voice-row__scrub { grid-column: 1 / -1; height: 48px; margin-top: 0; }
  .voice-row__side { grid-column: 1 / -1; max-width: none; justify-content: space-between; }
  .voice-composer { padding: 0 14px 12px; }
}
@media (max-width: 640px) {
  .shell { padding: 16px 16px 150px; }
  .topbar__inner { padding: 10px 16px; }
  .subbar { padding: 0 16px 10px; gap: 10px; }
  .toolbar { margin-left: 0; }
  .card__quick { opacity: 1; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .brand__logo { height: 36px; width: 36px; }
  .brand__name { font-size: 15.5px; }
  .tray__inner { flex-wrap: wrap; gap: 10px; }
  .tray__side { width: 100%; flex-direction: row; }
  .tray__side .input { flex: 1; }
  .cfield-pair { grid-template-columns: 1fr; }
  .labelsearch { max-width: 130px; }
  /* Sticky-Block-Fix: der große .appbar-Block (Topbar + Sub-Tabs + Filter) fraß
     mobil bis zu 80 % des Viewports. Unter 640px bleibt nur die Topbar sticky;
     Sub-Tabs/Filter scrollen mit dem Inhalt weg. `display: contents` statt
     `position: static`: sonst ist .appbar der Sticky-Container und die Topbar
     reißt nach ~330px Scroll ab (Live-E2E-Befund 2026-07-06). */
  .appbar { display: contents; }
  .appbar .topbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--papier) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--schatten-1);
  }
  /* Topbar kompakt auf 2 Zeilen: Zeile 1 Marke+Abmelden+Sprache, Zeile 2 die
     Workspace-Navi als horizontal scrollbare Vollbreite-Zeile (statt 3-zeiligem
     Wrap → 195px hoher Kopf, Live-E2E-Befund 2026-07-06). */
  .topnav { order: 10; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .wsbtn { padding: 5px 10px; gap: 6px; flex: none; }
  .wsbtn__sub { display: none; }
  .brand__sub { display: none; }
  .usermenu__btn { width: 38px; height: 38px; }
  .topbar__inner { padding: 8px 12px; gap: 8px; row-gap: 4px; }
  /* Kategorie-Pills mobil als EINE horizontal scrollbare Zeile (wie die Workspace-Nav)
     statt 3–4 Wrap-Zeilen (W1, Manu-Go 31.07.); Papierkorb/Hochladen scrollen hinten mit. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab, .tabs__tools { flex: none; }
  .brand__logo { height: 30px; width: 30px; }
  /* Trim-Leiste: „Abbrechen" darf nicht aus der Bar laufen */
  .trim-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
}

/* ---------- Kampagnen-Filter + Label-Suche (Toolbar) ---------- */
.campsel { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.campsel__lbl { font-size: 12px; font-weight: 600; color: var(--nebel); letter-spacing: 0.02em; white-space: nowrap; }
/* An Status- + Sortier-Dropdown angeglichen: Pill-Form, --faden-Rand, eigener SVG-Pfeil */
.campsel__sel {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--kohle);
  padding: 6px 26px 6px 11px; font-size: 12.5px; font-weight: 550; font-family: inherit;
  cursor: pointer; transition: border-color .15s ease; max-width: 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238d8779' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.campsel__sel:hover { border-color: var(--faden-strong); }
.campsel__sel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* Label-Suche teilt sich die Zeile mit den Filter-/Sortier-Pills → gleiche Pill-Optik */
.labelsearch {
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--kohle); font-family: inherit;
  font-size: 12.5px; padding: 6px 13px; width: 150px; flex: none;
  transition: border-color .15s ease;
}
.labelsearch::placeholder { color: var(--hauch); }
.labelsearch:hover { border-color: var(--faden-strong); }
.labelsearch:focus { outline: none; border-color: var(--akzent-rand); }

/* ---------- Karten-Chips (Kampagne + Labels) ---------- */
.card__chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 13px 11px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--faden-soft); color: var(--graphit);
  border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 550;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip--camp { background: var(--akzent-hauch); color: var(--akzent-tinte); }
.chip--trim { background: color-mix(in srgb, var(--gut) 18%, #fff); color: color-mix(in srgb, var(--gut) 70%, #000); }
.chip--edit { background: var(--faden-soft); padding-right: 5px; }
.chip__x {
  border: none; background: none; cursor: pointer; color: var(--nebel);
  font-size: 11px; line-height: 1; padding: 1px 3px; border-radius: 50%;
}
.chip__x:hover { color: var(--warn); background: rgba(0,0,0,0.05); }

/* ---------- Seitenpanel: Kampagne + Labels ---------- */
.side__tags { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 4px;
  padding-top: 12px; border-top: 1px solid var(--faden-soft); }
.side__tags-row { display: flex; flex-direction: column; gap: 6px; }
.side__tags-label { font-size: 12px; font-weight: 600; color: var(--nebel); letter-spacing: 0.02em; }
.side__labels { display: flex; flex-wrap: wrap; gap: 6px; }
.side__label-input { font-size: 13px; padding: 7px 10px; }
.side__tags-hint { font-size: 11.5px; color: var(--nebel); line-height: 1.4; }
.side__export-hint { font-size: 11.5px; color: var(--nebel); width: 100%; margin-top: -2px; }

/* WP4: Mehrfach-Kampagnen-Zeilen + abhängiges Ideen-Dropdown im Seitenpanel */
.camprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.camprow__name { flex: 0 0 auto; max-width: 40%; font-size: 12.5px; font-weight: 600;
  color: var(--kohle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camprow__folder { flex: 1 1 auto; min-width: 0; }  /* Ordner-Select je Kampagnen-Zeile (FFC-WP3) */
.camprow__btn { flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 4px; border-radius: 6px; color: var(--nebel); }
.camprow__btn:hover { background: var(--faden-soft); }
.camprow__btn--x:hover { color: #c0392b; }
.camprow__add { margin-top: 2px; }
/* WP5: Ideen-Zeile je Kampagne (Mehrfachauswahl) — eingerückt unter der camprow */
.camprow__ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 2px 0 4px 10px; }
.camprow__idea-add { flex: 0 1 auto; min-width: 0; }
/* WP4: Ideen-Editor im Kampagnen-Modal */
.ideas-edit { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
.ideas-edit__row { display: flex; align-items: center; gap: 6px; }
.ideas-edit__row .input { flex: 1 1 auto; }
.ideas-edit__x { flex: 0 0 auto; }
.ideas-edit__add { align-self: flex-start; }
/* P31: Ideen-/Tag-Eingabefeld gleich hoch/gerundet wie der Button darüber. */
.ideas-edit__inp { border-radius: var(--radius-s); padding: 7px 12px; font-size: 13px; }
.ideas-edit__campname { font-size: 15px; font-weight: 700; color: var(--kohle); margin-bottom: 10px; }
/* P29: Feeling als freie Tag-Liste */
.tagchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.tagchip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--akzent); color: var(--akzent-tinte);
  border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 12.5px; font-weight: 550;
}
.tagchip__x {
  border: none; background: rgba(0,0,0,0.14); color: inherit; cursor: pointer;
  width: 18px; height: 18px; border-radius: 999px; font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.tagchip__x:hover { background: rgba(0,0,0,0.28); }
.tagsug { margin-bottom: 2px; }
.tagsug .pill { padding: 5px 11px; font-size: 12.5px; }

/* ---------- Kampagnen-Brief-Modal ---------- */
.modal--wide { width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.modal--wide .cform { overflow-y: auto; flex: 1; padding-right: 2px; }
.cform { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 2px; }
.cfield { display: flex; flex-direction: column; gap: 7px; }
.cfield .label { margin: 0 0 0 2px; }
.cfield-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cfield textarea.input { min-height: 70px; }
.pillrow { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  border: 1px solid var(--faden-strong); background: var(--leinen);
  color: var(--graphit); border-radius: 999px; padding: 7px 14px;
  font-family: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  transition: all .12s ease;
}
.pill:hover { border-color: var(--faden-strong); color: var(--kohle); }
.pill.is-on { background: var(--akzent); border-color: transparent; color: var(--akzent-tinte); }
.pill:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.campaign-echo {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-m);
  background: var(--akzent-hauch); color: var(--akzent-tinte);
  font-size: 14px; font-weight: 550; line-height: 1.45;
  border: 1px solid var(--akzent-rand);
}

/* ---------- Abschnitts-Überschriften (Kampagnen-Workspace nutzt .cf-h/.cf-sub) ---------- */
.cf-h { font-size: 18px; font-weight: 650; color: var(--kohle); margin: 0 0 4px; }
.cf-sub { font-size: 13.5px; color: var(--nebel); margin: 0 0 14px; line-height: 1.45; }

/* ---------- Eindeutige ID + Lineage (WP2) ---------- */

/* Kopierbares ID-Badge im Seitenpanel (eigene Zeile in .side__actions). */
.side__id { width: 100%; display: flex; align-items: center; gap: 8px; }
.side__id-label { font-size: 10.5px; font-weight: 700; color: var(--nebel); letter-spacing: 0.08em; text-transform: uppercase; }
.side__id-val {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--graphit); background: var(--faden-soft);
  border: 1px solid var(--faden); border-radius: 999px;
  padding: 3px 10px; cursor: pointer; transition: all .15s ease;
}
.side__id-val:hover { border-color: var(--akzent-rand); background: var(--akzent-hauch); color: var(--kohle); }
.side__id-val:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.side__id-copy { color: var(--nebel); font-size: 12.5px; }
/* P12: kompakte ID-Pill in der Kopf-Badge-Zeile (rechtsbündig, schrumpft nicht weg). */
.side__id-val--inline { flex: 0 0 auto; max-width: 55%; padding: 2px 9px; font-size: 11px; }
.side__id-val--inline .side__id-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dezentes ID-Chip auf der Karte (rechts in der Body-Zeile). */
.card__id {
  flex: none; margin-left: auto; max-width: 42%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  color: var(--nebel); background: var(--faden-soft);
  border-radius: 6px; padding: 1px 6px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .15s ease;
}
.card__id:hover { color: var(--kohle); background: var(--faden); }
.card__id:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Verwandtschafts-Sektionen (Eltern-Bild / Kind-Videos / abgeleitete Versionen). */
.side__lineage { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.side__lineage:empty { display: none; }
.lineage__section { display: flex; flex-direction: column; gap: 9px; }
.lineage__title { font-size: 12px; font-weight: 600; color: var(--nebel); letter-spacing: 0.02em; }
.lineage__strip { display: flex; flex-wrap: wrap; gap: 9px; }
.lineage__thumb {
  width: 74px; padding: 0; border: 1px solid var(--faden); background: var(--leinen);
  border-radius: var(--radius-s); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; text-align: left; transition: all .15s ease;
}
.lineage__thumb:hover { border-color: var(--akzent-rand); box-shadow: var(--schatten-1); transform: translateY(-1px); }
.lineage__thumb:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.lineage__thumb-media { position: relative; width: 100%; height: 98px; background: var(--nebel); display: block; }
.lineage__thumb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lineage__thumb-emblem { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--kohle); color: #fff; }
.lineage__thumb-play {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 9px;
  background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 50%;
}
.lineage__thumb-cap {
  font-size: 10.5px; color: var(--graphit); line-height: 1.25; padding: 5px 6px 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Kampagnen-Workspace (FFC-WP2) ---------- */

.camp-space { max-width: 1240px; margin: 0 auto; }
.camp-space .cf-h { margin-top: 26px; }
.camp-space > .cf-h:first-child { margin-top: 0; }

.camp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;
  margin-top: 4px;
  /* Alle Karten gleich hoch — jede Zeile misst sich an der höchsten Karte des Grids. */
  grid-auto-rows: 1fr;
}
.camp-card {
  background: var(--leinen); border: 1px solid var(--faden);
  border-radius: var(--radius-l); padding: 16px; cursor: pointer;
  box-shadow: var(--schatten-1);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.camp-card:hover { box-shadow: var(--schatten-2); transform: translateY(-1px); }
.camp-card__title { font-size: 15px; font-weight: 650; color: var(--kohle); }
.camp-card__meta { font-size: 12.5px; color: var(--nebel); }
.camp-card__counts { display: flex; gap: 12px; font-size: 12.5px; color: var(--graphit); }
.camp-card__ideas { align-self: flex-start; margin-top: 2px; }

.camp-card--new {
  border-style: dashed; border-color: var(--faden-strong); align-items: center;
  justify-content: center; text-align: center; color: var(--nebel); gap: 6px; box-shadow: none;
}
.camp-card--new:hover { border-color: var(--akzent); color: var(--kohle); box-shadow: none; }
.camp-card__plus { font-size: 26px; line-height: 1; }

/* Archivierte Kampagnen (Past Campaigns) — gedämpft + Badge. */
.camp-card--archived { opacity: 0.68; }
.camp-card--archived:hover { opacity: 1; }
.camp-card__arch {
  align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  padding: 2px 9px; border-radius: 999px;
  background: var(--eingabe); color: var(--graphit); border: 1px solid var(--faden-strong);
}

/* Plus-Karte „Neue Idee" (Inline-Anlage im Kampagnen-Detail). */
.camp-card--newidea.is-editing { cursor: default; border-style: solid; border-color: var(--akzent); }
.camp-card--newidea .input { width: 100%; }
.camp-card__newrow { display: flex; gap: 6px; justify-content: center; }

/* „Alle Inhalte"-Sektion im Kampagnen-Detail. */
.camp-all__h { margin-top: 26px; }
.camp-all__toolbar { margin-bottom: 14px; }

/* Pager: Seitengrößen-Wahl. */
.pager__size { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 12px; color: var(--nebel); }

/* Papierkorb-Karten: gleiche Optik wie Asset-Karten, ohne Klick-Viewer. */
.card--trash { cursor: default; }
.card--trash:hover { transform: none; }
.card--trash .card__body { flex-direction: column; align-items: stretch; gap: 4px; }
.card--trash .card__title { white-space: normal; }
.card--trash .card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.trash-card__audio {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--nebel);
}
.trash-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.camp-grid--general { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.camp-grid--general .camp-card { padding: 12px 14px; gap: 4px; }
.camp-grid--general .camp-card__title { font-size: 13.5px; }

.camp-back {
  border: 1px solid transparent; background: transparent; color: var(--nebel);
  font-size: 13px; font-weight: 550; cursor: pointer; padding: 6px 4px; margin-bottom: 10px;
  border-radius: var(--radius-s); transition: all .15s ease;
}
.camp-back:hover { color: var(--kohle); background: var(--faden-soft); }

.camp-detail__meta { font-size: 13px; color: var(--nebel); margin: 0 0 10px; }
.camp-detail__brief { margin-top: -4px; }

/* P28: fixer Breadcrumb der Kampagnen-Drilldown-Ebenen (My Campaigns › Kampagne › Idee) */
.camp-bc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  position: sticky; top: 0; z-index: 2;
  background: var(--leinen); padding: 6px 2px 10px; margin-bottom: 4px;
}
.camp-bc__seg {
  border: none; background: transparent; color: var(--nebel);
  font-family: inherit; font-size: 13px; font-weight: 550; padding: 3px 6px;
  border-radius: var(--radius-s); cursor: pointer; transition: all .15s ease;
}
button.camp-bc__seg:hover { color: var(--kohle); background: var(--faden-soft); }
.camp-bc__seg--cur { color: var(--kohle); font-weight: 650; cursor: default; }
.camp-bc__sep { color: var(--faden-strong); font-size: 13px; }

/* P28/P30: Aktionsleiste auf der Ideen-Ebene (Ideen verwalten · Kampagne löschen) */
.camp-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Ideen-Karten wirken als Fortsetzung der Kampagnen-Karten, leicht abgesetzt. */
.camp-card--idea { border-left: 3px solid var(--akzent); }

/* ---------- Ordner-Navigation + Einsortierung in der Detail-Galerie (FFC-WP3) ---------- */

.camp-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 18px; }
.camp-folders__group {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px; background: var(--faden-soft); border-radius: 999px;
}
.folder-chip {
  border: 1px solid var(--faden); background: var(--leinen); color: var(--graphit);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 550; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all .15s ease; white-space: nowrap;
}
.folder-chip:hover { border-color: var(--faden-strong); }
.folder-chip.is-active { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); }
.folder-chip__n { font-size: 11px; opacity: 0.7; }
.folder-chip--top { font-weight: 650; }
.folder-chip--child { font-size: 12px; padding: 4px 9px; }
.folder-chip--unsorted { border-style: dashed; color: var(--nebel); }

/* Karte + „Verschieben nach…"-Select in der Detail-Galerie */
.camp-card-wrap { display: flex; flex-direction: column; gap: 6px; }
.camp-move { padding: 0 1px; }
.camp-move__sel { width: 100%; margin-left: 0; }

/* ===== FFR-K1: Reset-Filters · Pagination · Mehrfachauswahl + Stapelaktionen ===== */

/* Reset-Filters-Button (ganz rechts in der Filterzeile, P11) */
.btn-reset {
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--nebel);
  padding: 7px 13px; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: color .14s ease, background .14s ease, box-shadow .14s ease;
}
.btn-reset:hover { color: var(--kohle); background: var(--eingabe); box-shadow: var(--schatten-1); }

/* Pager unter dem Grid (P10) */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 6px; }
.pager__btn {
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--kohle);
  padding: 8px 16px; font-size: 14px; cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease;
}
.pager__btn:hover:not(:disabled) { background: var(--eingabe); box-shadow: var(--schatten-1); }
.pager__btn:disabled { color: var(--hauch); cursor: default; }
.pager__info { color: var(--nebel); font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* Auswahl-Kreis oben rechts auf der Karte (P22) — erscheint beim Hover, bleibt sichtbar wenn markiert */
.card__select {
  position: absolute; right: 8px; top: 8px; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.95); background: rgba(33,30,26,0.32); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; box-shadow: var(--schatten-1);
  transition: opacity .15s ease, background .14s ease, transform .12s ease;
}
.card:hover .card__select { opacity: 1; }
.card__select:hover { transform: scale(1.1); }
.card__select.is-on { opacity: 1; background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); }
@media (hover: none) { .card__select { opacity: 1; } }

/* Fixierte Stapel-Bar unten rechts (P25, Muster HyperView) */
.batchbar {
  position: fixed; right: 22px; bottom: 22px; z-index: 130;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: min(94vw, 780px); padding: 10px 12px;
  background: var(--kohle); color: #fff;
  border-radius: var(--radius-l); box-shadow: var(--schatten-3);
  animation: batchbar-in .16s ease;
}
@keyframes batchbar-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.batchbar__count { font-size: 13.5px; font-weight: 600; padding: 0 6px 0 4px; white-space: nowrap; }
.batchbar__act {
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  background: rgba(255,255,255,0.06); color: #fff;
  padding: 7px 13px; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background .14s ease;
}
.batchbar__act:hover { background: rgba(255,255,255,0.16); }
.batchbar__act.is-danger { color: #ffb4ab; border-color: rgba(255,120,105,0.4); }
.batchbar__act.is-danger:hover { background: var(--warn); color: #fff; }
.batchbar__clear {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.10); color: #fff; font-size: 14px; line-height: 1;
}
.batchbar__clear:hover { background: rgba(255,255,255,0.22); }

/* Leichter Kampagnen-Picker für „In Kampagne" (Stapelaktion) */
.batchpick {
  position: fixed; inset: 0; z-index: 140; background: rgba(24,22,19,0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.batchpick__box {
  background: var(--leinen); border-radius: var(--radius-l); box-shadow: var(--schatten-3);
  padding: 20px; width: min(92vw, 380px); max-height: 80vh; overflow: auto;
}
.batchpick__title { font-size: 16px; font-weight: 600; color: var(--kohle); margin-bottom: 14px; }
.batchpick__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.batchpick__opt {
  text-align: left; border: 1px solid var(--faden); border-radius: var(--radius-s);
  background: var(--leinen-2); color: var(--kohle); padding: 10px 13px;
  font-size: 14px; cursor: pointer; transition: background .14s ease, border-color .14s ease;
}
.batchpick__opt:hover { background: var(--akzent-hauch); border-color: var(--akzent-rand); }
.batchpick__cancel {
  border: 1px solid var(--faden); border-radius: 999px;
  background: var(--leinen); color: var(--nebel);
  padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.batchpick__cancel:hover { background: var(--eingabe); color: var(--kohle); }

/* ---------- Stimme klonen (Kunden-Feature, Voices-Tab) ---------- */
.acc--clone .acc__title { color: var(--akzent); }
.clone-form { display: flex; flex-direction: column; gap: 12px; max-width: 500px; }
.clone-form__l { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--nebel); }
.clone-form input[type="text"], .clone-form input[type="url"] {
  padding: 8px 10px; border: 1px solid var(--faden); border-radius: 8px;
  background: var(--leinen); color: var(--kohle); font: inherit;
}
.clone-form__srcsel { display: flex; gap: 8px; }
.clone-form__srcsel .is-on { outline: 2px solid var(--akzent); }
.clone-form__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--nebel); cursor: pointer; }
.clone-form__consent input { margin-top: 2px; flex: none; }
.clone-form__go { align-self: flex-start; }
.clone-form__status { font-size: 13px; color: var(--nebel); }
.clone-del { margin-top: 10px; }

/* ---------- Rezept-Bibliothek (Workspace „Rezepte", RL-K1) ---------- */
.acc-list--recipes { max-width: 940px; }
.acc--recipe .acc__sum--recipe { align-items: flex-start; }
.acc--recipe .acc__caret { margin-top: 4px; }
.rsum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rsum__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rsum__head .acc__title { font-size: 15.5px; }
.rsum__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.rbadge {
  background: var(--eingabe); color: var(--graphit); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rbadge--admin {
  background: color-mix(in srgb, var(--warn) 12%, #fff); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, #fff);
}
.rchip {
  background: var(--akzent-hauch); color: var(--akzent-tinte);
  border: 1px solid var(--akzent-rand); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* Flowchart-Kette (Storyboard) — horizontal scrollbar, kein Umbruch.
   RL-K2: flex-start statt center, damit mehrzeilige Labels die Thumbs nicht vertikal
   verschieben — Bilder oben bündig, Label je Step direkt unter seinem Bild; die
   →-Pfeile bleiben über eine feste Höhe (= Thumb-Höhe) auf Bildmitte zentriert. */
.rchain { display: flex; align-items: flex-start; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.rchain__step { flex: none; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.rchain__thumb {
  width: 60px; height: 96px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--faden); background: var(--eingabe); display: block;
}
.rchain__badge {
  width: 60px; height: 96px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--nebel);
  background: var(--eingabe); border: 1px dashed var(--faden); border-radius: 8px;
}
.rchain__label { font-size: 10.5px; line-height: 1.25; color: var(--nebel); max-width: 74px; }
.rchain__arrow {
  flex: none; color: var(--hauch); font-size: 15px;
  display: flex; align-items: center; height: 96px; /* = Thumb-Höhe → Pfeil auf Bildmitte */
}
.rchain--big { gap: 10px; }
.rchain--big .rchain__step { width: 120px; }
.rchain--big .rchain__thumb, .rchain--big .rchain__badge { width: 120px; height: 190px; }
.rchain--big .rchain__arrow { height: 190px; }
.rchain--big .rchain__badge { font-size: 30px; }
.rchain--big .rchain__label { font-size: 12px; max-width: 132px; }
.rchain--big .is-zoomable { cursor: zoom-in; }
.rchain--big .is-zoomable .rchain__thumb { transition: transform .12s ease, border-color .12s ease; }
.rchain--big .is-zoomable:hover .rchain__thumb { transform: scale(1.03); border-color: var(--akzent-rand); }

/* Body-Blöcke */
.rsec { }
.rvideo {
  width: 100%; max-width: 300px; max-height: 62vh; aspect-ratio: 9 / 16;
  background: #000; border-radius: 10px; display: block; box-shadow: var(--schatten-1);
}
.rtext { color: var(--graphit); font-size: 13.5px; line-height: 1.6; margin: 0 0 4px; }
.rsub-h { font-size: 12px; font-weight: 650; color: var(--kohle); margin: 10px 0 5px; }
.rformula {
  font-family: var(--mono); font-size: 13px; color: var(--graphit);
  background: var(--leinen-2); border: 1px solid var(--faden-soft);
  border-radius: var(--radius-s); padding: 8px 12px; display: inline-block;
}
.rhooks { display: flex; flex-direction: column; gap: 6px; }
.rhook { font-style: italic; color: var(--graphit); font-size: 13px; border-left: 3px solid var(--akzent-rand); padding: 3px 0 3px 10px; }
.rphoto-note {
  font-size: 12.5px; color: var(--graphit); background: var(--akzent-hauch);
  border-radius: var(--radius-s); padding: 8px 12px; margin: 8px 0 0;
}

/* Rezept-Aufschlüsselung (Tabelle) */
.rtab-wrap { overflow-x: auto; }
.rtab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtab th {
  text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--nebel); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--faden);
}
.rtab td { padding: 7px 10px; border-bottom: 1px solid var(--faden-soft); color: var(--graphit); vertical-align: top; }
.rtab__n { color: var(--nebel); font-variant-numeric: tabular-nums; width: 1%; }
.rtab__dur { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--nebel); }
.rtab__beat { min-width: 220px; }
.rcomp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; background: var(--eingabe);
  font-weight: 700; font-size: 12px; color: var(--graphit);
}
.rphoto { cursor: help; }
.rcta { align-self: flex-start; margin-top: 4px; }
.radmin { border-top: 1px dashed var(--faden); padding-top: 12px; margin-top: 4px; }
.radmin__toggle.is-on {
  background: color-mix(in srgb, var(--gut) 16%, #fff);
  border-color: color-mix(in srgb, var(--gut) 40%, #fff);
  color: color-mix(in srgb, var(--gut) 68%, #000);
}

/* Storyboard-Frame-Lightbox (Media-Ausnahme: plain Backdrop-Klick schließt).
   RL-K2: ‹/›-Blättern + Zähler. */
.rlightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(20, 18, 15, 0.86);
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
.rlightbox img { max-width: 86vw; max-height: 94vh; border-radius: 8px; box-shadow: var(--schatten-3); }
.rlb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 72px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 34px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.rlb__nav:hover { background: rgba(255, 255, 255, 0.26); }
.rlb__nav:disabled { opacity: 0.25; cursor: default; }
.rlb__nav--prev { left: 14px; }
.rlb__nav--next { right: 14px; }
.rlb__count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 12.5px; opacity: 0.85; font-variant-numeric: tabular-nums;
}

/* RL-K2: einzeilige WIP-Hinweiszeile oben im Rezepte-Workspace */
.rwip {
  font-size: 12.5px; color: var(--graphit); background: var(--akzent-hauch);
  border: 1px solid var(--akzent-rand); border-radius: var(--radius-s);
  padding: 7px 12px; margin: 0 0 14px; max-width: 916px;
}

@media (max-width: 560px) {
  .rsum__meta { margin-left: 0; }
  .rchain--big .rchain__step { width: 100px; }
  .rchain--big .rchain__thumb, .rchain--big .rchain__badge { width: 100px; height: 158px; }
  .rchain--big .rchain__arrow { height: 158px; }
  .rlb__nav { width: 40px; height: 60px; font-size: 28px; }
}

/* ── ASM-TH E1: Assemble-Modus „Talking-Head-Video" ─────────────────────────
   Timeline-Port der Studio-Strip-UI (.tl-*) in Leuchttisch-Tokens; volle
   Workspace-Breite. Modus-Switcher nutzt die bestehende .tab-Optik. */
.asm-modes { display: flex; gap: 8px; margin-bottom: 16px; }
.tht { display: grid; gap: 10px; background: var(--leinen); border: 1px solid var(--faden);
  border-radius: var(--radius-l); box-shadow: var(--schatten-1); padding: 18px; }
.tht h3 { margin: 0; }
.tht__title { font-weight: 650; color: var(--kohle); font-size: 15px; }
.tht__palette { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  max-height: 348px; overflow-y: auto; padding-right: 4px; }
.tht__pal { position: relative; width: 84px; height: 54px; border-radius: var(--radius-s);
  border: 1px solid var(--faden-strong); background: var(--eingabe); overflow: hidden;
  cursor: pointer; padding: 0; }
.tht__pal:hover { border-color: var(--akzent); }
.tht__pal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tht__paldur { position: absolute; right: 3px; bottom: 2px; padding: 0 4px; border-radius: 4px;
  background: rgba(33, 30, 26, .72); color: #fff; font: 600 10px/1.5 var(--mono); }
.tht__tracks { position: relative; display: grid; gap: 4px; padding: 6px 0 16px; overflow: hidden; }
.tht__clips { position: relative; height: 56px; border-radius: var(--radius-s);
  background: var(--eingabe); border: 1px dashed var(--faden-strong); }
.tht__seg { position: absolute; top: 2px; bottom: 2px; border-radius: 6px;
  background: var(--leinen-2) center/cover no-repeat; border: 1px solid var(--faden-strong);
  box-shadow: var(--schatten-1); cursor: grab; overflow: hidden; touch-action: none; }
.tht__seg.is-drag { z-index: 3; cursor: grabbing; box-shadow: var(--schatten-2); }
.tht__seg.tht__drop { outline: 2px solid var(--akzent); outline-offset: -2px; }
.tht__segdur { position: absolute; left: 4px; bottom: 2px; padding: 0 4px; border-radius: 4px;
  background: rgba(33, 30, 26, .72); color: #fff; font: 600 10px/1.5 var(--mono); pointer-events: none; }
.tht__segrm { position: absolute; top: 1px; right: 1px; width: 17px; height: 17px; border: 0;
  border-radius: 4px; background: rgba(33, 30, 26, .62); color: #fff; font-size: 10px;
  line-height: 1; cursor: pointer; padding: 0;
  z-index: 2; /* über den Trim-Handles — sonst fängt der r-Handle den ✕-Klick ab */ }
.tht__segspeed { position: absolute; right: 2px; bottom: 2px; border: 0; border-radius: 4px;
  background: rgba(33, 30, 26, .72); color: #fff; font: 600 10px/1.6 var(--mono);
  padding: 0 2px; width: 44px; cursor: text; appearance: textfield; -moz-appearance: textfield; }
.tht__segspeed::-webkit-inner-spin-button { display: none; }
.tht__seg.is-sel, .tht__aud.is-sel { outline: 2px solid var(--akzent); outline-offset: -2px; }

/* ASM-TL3: einklappbare Karten (Pool / Video-Details) */
.tlcard { border: 1px solid var(--faden); border-radius: var(--radius-m); background: var(--karte, #fff);
  padding: 0 14px 12px; }
.tlcard summary { cursor: pointer; font-weight: 700; padding: 12px 0; user-select: none; }
.tlcard[open] summary { border-bottom: 1px solid var(--faden-soft); margin-bottom: 10px; }
.tlcard__sub { margin: 14px 0 4px; font-size: 13px; }
.tlcard__row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.tht__palcol { gap: 12px; }
.tlaudiopal { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.tlaudiopal__row { display: flex; justify-content: space-between; gap: 10px; align-items: center;
  border: 1px solid var(--faden); border-radius: var(--radius-s); background: var(--eingabe);
  padding: 5px 10px; font-size: 12.5px; cursor: pointer; text-align: left; }
.tlaudiopal__row:hover:not(:disabled) { border-color: var(--akzent); }
.tlaudiopal__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlaudiopal__dur { font: 600 11px/1 var(--mono); color: var(--nebel); flex: none; }
.tlspeedall { width: 64px; padding: 4px 6px; font-size: 13px; }

/* ASM-TL3: Zeitskala + Playhead-Griff */
.tht__ruler { position: relative; height: 22px; border-bottom: 1px solid var(--faden);
  cursor: col-resize; touch-action: none; user-select: none; }
.tht__tick { position: absolute; top: 2px; font: 600 9.5px/1 var(--mono); color: var(--nebel);
  border-left: 1px solid var(--faden-strong); padding: 2px 0 6px 3px; pointer-events: none; }
.tht__phhandle { position: absolute; top: 11px; width: 0; height: 0; margin-left: -6px;
  /* bündig: Spitze exakt an der Skalen-Unterkante (22px), zentriert über der 2px-Linie */
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 11px solid var(--akzent); cursor: grab; z-index: 3; }

/* ASM-TL3: höhere Clip-Spur im Timeline-Builder + Audio-Spur */
.tht__tracks--tl .tht__clips { height: 104px; }
.tht__audiolane { position: relative; height: 0; transition: height .15s; border-radius: var(--radius-s); }
.tht__tracks--tl .tht__audiolane { height: 34px; background: var(--eingabe);
  border: 1px dashed var(--faden-strong); }
.tht__aud { position: absolute; top: 2px; bottom: 2px; border-radius: 6px; overflow: hidden;
  background: color-mix(in srgb, var(--akzent) 18%, #fff); border: 1px solid var(--akzent-rand);
  cursor: grab; touch-action: none; display: flex; align-items: center; }
.tht__audlbl { font-size: 10.5px; font-weight: 600; padding: 0 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

/* HYP-197 WP2: Spur-Schalter + Overlay-Spuren V2/V3 (zeit-positioniert wie A1) */
.tht__lanes { display: flex; gap: 6px; flex-wrap: wrap; }
.tllane { border: 1px solid var(--faden-strong); border-radius: var(--radius-s);
  background: var(--eingabe); color: var(--kohle); font: 600 11px/1 var(--mono);
  padding: 5px 8px; cursor: pointer; }
.tllane:hover { border-color: var(--akzent); }
.tllane.is-off { opacity: .55; }
/* HYP-197 WP5: globale Marken (Logo/KI-Badge) — eigene Zeile + eigene Button-Klasse,
   damit sie optisch klar von den Spur-Schaltern oben getrennt sind (keine Spur, sondern
   ein sequenzweiter Zweizustand). Aktiv = gefüllt statt nur umrandet. */
.tht__marks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
  padding-top: 8px; border-top: 1px dashed var(--faden-strong); }
.tlmark { border: 1px solid var(--faden-strong); border-radius: var(--radius-s);
  background: var(--eingabe); color: var(--kohle); font: 600 11px/1 var(--mono);
  padding: 5px 8px; cursor: pointer; }
.tlmark:hover { border-color: var(--akzent); }
.tlmark.is-on { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); }
.tlmark.is-blocked { opacity: .5; cursor: not-allowed; }
.tht__ovlane { position: relative; height: 34px; border-radius: var(--radius-s);
  background: var(--eingabe); border: 1px dashed var(--faden-strong); }
.tht__ov { position: absolute; top: 2px; bottom: 2px; border-radius: 6px; overflow: hidden;
  background: var(--leinen-2) center/cover no-repeat; border: 1px solid var(--faden-strong);
  cursor: grab; touch-action: none; display: flex; align-items: center; }
.tht__ov.is-sel { outline: 2px solid var(--akzent); outline-offset: -2px; }
.tht__ov .tht__audlbl { margin-left: 3px; border-radius: 4px; color: #fff;
  background: rgba(33, 30, 26, .62); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: calc(100% - 78px); }
/* 34-px-Spur: das ✕ sitzt sonst genau auf dem 9-px-r-Handle und schluckt den Trim */
.tht__ov .tht__segrm { right: 11px; }
.tht__ov .tht__segdur { left: auto; right: 30px; bottom: 3px; }
/* ausgeblendete Spur: bleibt bearbeitbar, nur sichtbar „stummgeschaltet" */
.tht__tracks .is-hidden { opacity: .35; }
.tht__segrm:hover { background: var(--warn); }
.tht__handle { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; touch-action: none; }
.tht__handle.l { left: 0; border-left: 3px solid var(--akzent); }
.tht__handle.r { right: 0; border-right: 3px solid var(--akzent); }
.tht__lipsync { height: 24px; }
.tht__lipsyncbar { height: 100%; border-radius: var(--radius-s); display: flex; align-items: center;
  padding: 0 8px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--akzent-tinte); white-space: nowrap; overflow: hidden;
  background: repeating-linear-gradient(-45deg, var(--akzent-hauch), var(--akzent-hauch) 8px,
    color-mix(in srgb, var(--akzent) 26%, #fff) 8px, color-mix(in srgb, var(--akzent) 26%, #fff) 16px);
  border: 1px solid var(--akzent-rand); }
.tht__wave { height: 36px; border-radius: var(--radius-s); background: var(--eingabe);
  border: 1px solid var(--faden); overflow: hidden; }
.tht__wave img { height: 100%; display: block; }
.tht__voiceend { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--warn);
  pointer-events: none; z-index: 2; }
.tht__voiceend span { position: absolute; bottom: -1px; left: 4px; white-space: nowrap;
  font-size: 9.5px; font-weight: 600; color: var(--warn); letter-spacing: .04em; text-transform: uppercase; }
.tht__readout { color: var(--nebel); font-size: 13px; min-height: 18px; }
.tht__readout.is-fit { color: var(--gut); }
.tht__readout.is-short { color: var(--honig); }
.tht__readout.is-long { color: var(--warn); }
.tht__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tht__progress { display: flex; align-items: center; gap: 12px; }
.tht__prbar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--eingabe);
  border: 1px solid var(--faden); overflow: hidden; }
.tht__prfill { height: 100%; border-radius: 999px; background: var(--akzent); width: 0; transition: width .6s ease; }
.tht__prstage { color: var(--nebel); font-size: 12.5px; white-space: nowrap; }
.tht__result video { width: 100%; max-width: 420px; border-radius: var(--radius-m);
  border: 1px solid var(--faden); box-shadow: var(--schatten-1); display: block; }

/* ASM-TH E1.1: Timeline-Vorschau + Palette-Filter/-Zoom (Manu 2026-07-22 Abend) */
.tht__top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.tht__palcol { display: grid; gap: 8px; min-width: 0; }
.tht__prevcol { display: grid; gap: 6px; }
.tht__prevbox { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-m);
  border: 1px solid var(--faden); background: var(--kohle); box-shadow: var(--schatten-1); overflow: hidden; }
.tht__prevbox video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tht__prevwide .tht__prevbox { aspect-ratio: 16 / 9; max-height: 360px; margin: 0 auto; }
/* HYP-197 WP3/WP4: Overlay-Bühne = Contain-Fläche der Ausgabe-Leinwand in der Box.
   Die Ebenen liegen in Prozent DIESER Fläche — genau das Modell des Server-Renders.
   Ausgeblendete V1-Spur wird schwarz gezeigt (visibility statt opacity, sonst kollidiert
   es mit der Cross-Fade-Rampe, die opacity inline setzt). */
.tht__ovstage { position: absolute; left: 0; top: 0; pointer-events: none; }
.tht__prevbox.is-v1off > video { visibility: hidden; }
.tht__ovlayer { position: absolute; height: auto; pointer-events: auto; cursor: grab;
  touch-action: none; }
.tht__ovlayer:active { cursor: grabbing; }
.tht__ovlayer > video, .tht__ovlayer > img { position: static; width: 100%; height: auto; display: block;
  object-fit: fill; pointer-events: none; }
.tht__ovlayer.is-sel { outline: 2px solid var(--akzent); outline-offset: -1px;
  box-shadow: var(--schatten-1); }
/* Ausgewählt, aber außerhalb des eigenen Zeitfensters: platzierbar, sichtbar blass */
.tht__ovlayer.is-ghost { opacity: .45; }
/* Griffe nur an der ausgewählten Ebene — sonst wird die Vorschau zum Nadelkissen.
   Position kommt aus tlPlaceOvHandles(): die Box ist `overflow:hidden`, ein Griff am
   Ebenen-Rand wäre bei großen/verschobenen Ebenen abgeschnitten und unerreichbar. */
.tht__ovlayer > .tht__vfhandle { right: auto; bottom: auto; opacity: 0; pointer-events: none; }
.tht__ovlayer.is-sel > .tht__vfhandle { opacity: 1; pointer-events: auto; }
.tht__ovreadout { position: absolute; left: 6px; top: 6px; z-index: 3; pointer-events: none;
  font-family: var(--mono); font-size: 11px; color: #fff; padding: 2px 6px;
  border-radius: var(--radius-s); background: rgba(33, 30, 26, .72); }
/* Viewfinder: Kopf-Position wie im Create (ASM-TH, Manu 2026-07-22 Nacht) */
.tht__vf { position: relative; width: 100%; border-radius: var(--radius-m); overflow: hidden;
  border: 1px solid var(--faden); background: var(--kohle); touch-action: none; box-shadow: var(--schatten-1); }
.tht__vfframe { width: 100%; display: block; }
.tht__vfhead { position: absolute; cursor: grab; touch-action: none;
  outline: 1.5px dashed color-mix(in srgb, var(--akzent) 85%, #fff); outline-offset: -1px; }
.tht__vfhead:active { cursor: grabbing; }
.tht__vfhead img { width: 100%; height: 100%; display: block; pointer-events: none; }
.tht__vfhandle { position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--akzent); border: 2px solid #fff; box-shadow: var(--schatten-1); }
.tht__vfhandle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.tht__vfhandle.nw { left: -7px; top: -7px; cursor: nwse-resize; }
.tht__vfreadout { font-family: var(--mono); font-size: 11px; }
.tht__xfade { display: inline-flex; align-items: center; gap: 6px; color: var(--graphit); font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) {
  .tht__top { grid-template-columns: 1fr; }
  .tht__prevcol { max-width: 300px; }
}
.tht__palbar { display: flex; gap: 8px; flex-wrap: wrap; }
.tht__palzoom { position: absolute; top: 2px; right: 2px; padding: 1px 4px; border-radius: 4px;
  background: rgba(33, 30, 26, .62); font-size: 11px; line-height: 1.4; cursor: zoom-in;
  opacity: 0; transition: opacity .15s ease; }
.tht__pal:hover .tht__palzoom, .tht__pal:focus-visible .tht__palzoom { opacity: 1; }
.tht__palzoom:hover { background: var(--akzent); }
.tht__playhead { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--akzent);
  pointer-events: none; z-index: 4; }

/* ---------- Customer Wizard (Video-Assistent, Prototyp 2026-07-30) ----------
   Konturen bewusst sichtbar (Manu-Feedback 30.07.): Pills/Buttons im .wsbtn-Look,
   jeder Rail-Step mit hellgrauer Kontur, aktiver Step kräftig markiert. */
.wiz { max-width: 1100px; margin: 0 auto; }
/* HYP-147: „← Projekte" über der Schritt-Leiste, sobald ein Projekt gewählt ist. */
.wiz-projback { margin-bottom: 12px; }
.wiz__intro { color: var(--graphit); margin: 4px 0 16px; }
.wiz-rail { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.wiz-rail__item { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--faden-strong); border-radius: var(--radius-m);
  background: var(--leinen); cursor: pointer; text-align: left;
  min-width: 168px; flex: 1 1 168px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.wiz-rail__item:hover:not(:disabled) { box-shadow: var(--schatten-1); }
.wiz-rail__item:disabled { cursor: not-allowed; background: var(--leinen-2); }
.wiz-rail__item:disabled .wiz-rail__title { color: var(--hauch); }
.wiz-rail__item:disabled .wiz-rail__sub { color: var(--hauch); }
.wiz-rail__item.is-current { border: 2px solid var(--akzent); background: var(--akzent-hauch);
  box-shadow: var(--schatten-1); padding: 9px 13px; }
.wiz-rail__item.is-done .wiz-rail__num { background: var(--gut); color: #fff; }
.wiz-rail__item.is-active .wiz-rail__num { background: var(--akzent); color: var(--akzent-tinte); }
.wiz-rail__item.is-waiting .wiz-rail__num { background: var(--honig); color: #fff; }
.wiz-rail__num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--eingabe);
  border: 1px solid var(--faden); font-weight: 700; flex-shrink: 0; }
.wiz-rail__txt { display: flex; flex-direction: column; line-height: 1.25; }
.wiz-rail__title { font-weight: 600; font-size: 14px; color: var(--kohle); }
.wiz-rail__sub { font-size: 12px; color: var(--nebel); }
.wiz-card { background: var(--leinen); border: 1px solid var(--faden-strong);
  border-radius: var(--radius-m); padding: 20px; box-shadow: var(--schatten-1); }
.wiz-card--muted { color: var(--graphit); }
.wiz-list { margin: 10px 0 0 18px; }
.wiz-list li { margin: 4px 0; }
.wiz-done-badge { color: var(--gut); font-weight: 700; margin: 14px 0 0; }
/* Admin-Rewind-Leiste (HYP-75) — bewusst unauffällig und abgesetzt: sie gehört
   nicht zum Kundenflow und wird nur bei config.admin gerendert. */
/* Kunden-„Ändern"-Leiste (HYP-76): unter dem Schritt-Body, außerhalb #wizBody.
   Hinweis links, Button rechts; auf schmalen Spalten bricht der Button darunter. */
.wiz-change { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--faden); }
.wiz-change__hint { font-size: 13px; color: var(--nebel); margin: 0; flex: 1 1 220px; }
.wiz-admin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 22px 0 0; padding-top: 12px; border-top: 1px dashed var(--faden-strong); }
.wiz-admin__tag { font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nebel); margin-right: 2px; }
.wiz-quota { font-size: 13px; color: var(--graphit); background: var(--akzent-hauch);
  border: 1px solid var(--akzent-rand); border-radius: var(--radius-s);
  padding: 6px 10px; display: inline-block; }
/* Design-Schritt (HYP-187): Website-Screenshot und Endkarte NEBENEINANDER — das
   Nebeneinander ist der ganze Punkt des Schritts, deshalb bricht es erst unter
   720 px untereinander. Beide Bilder in denselben Rahmen, damit die Karte im
   Vergleich nicht groesser wirkt als das, woran sie sich messen lassen soll. */
.wiz-design { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 0; }
.wiz-design__fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wiz-design__fig figcaption { font-size: 12px; color: var(--nebel);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-design__fig img { width: 100%; height: 260px; object-fit: contain;
  background: var(--leinen-2); border: 1px solid var(--faden);
  border-radius: var(--radius-s); }
.wiz-design__none { font-size: 13px; color: var(--nebel); background: var(--leinen-2);
  border: 1px dashed var(--faden-strong); border-radius: var(--radius-s);
  padding: 12px; display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 60px; }
.wiz-design__ci { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--faden); }
.wiz-design__logo img { max-height: 44px; max-width: 140px; object-fit: contain; }
.wiz-design__col { display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--kohle); }
.wiz-design__col input[type="color"] { width: 40px; height: 30px; padding: 0;
  border: 1px solid var(--faden-strong); border-radius: var(--radius-s);
  background: none; cursor: pointer; }
.wiz-design__look { display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--graphit); flex: 1 1 220px; }
.wiz-design__actions { display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin: 16px 0 0; }
@media (max-width: 720px) { .wiz-design { grid-template-columns: 1fr; } }
.wiz-q { margin: 14px 0 0; padding: 14px; border: 1px solid var(--faden);
  border-radius: var(--radius-m); background: var(--leinen-2); }
.wiz-q__text { font-weight: 600; margin-bottom: 4px; color: var(--kohle); }
.wiz-q__hint { font-size: 13px; color: var(--nebel); margin-bottom: 8px; }
.wiz-q__pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wiz-pill { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--faden-strong);
  background: var(--leinen); cursor: pointer; font-size: 13px; color: var(--kohle);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.wiz-pill:hover { border-color: var(--kohle); box-shadow: var(--schatten-1); }
.wiz-pill.is-active { background: var(--kohle); border-color: var(--kohle); color: #fff; }
.wiz-q__input, .wiz-intake input[type="text"], .wiz-intake textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--faden-strong);
  border-radius: var(--radius-s); font: inherit; background: var(--eingabe);
  color: var(--kohle); }
.wiz-q__input:focus, .wiz-intake input[type="text"]:focus, .wiz-intake textarea:focus {
  outline: none; border-color: var(--akzent); background: var(--leinen); }
.wiz-qa { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--faden);
  border-radius: var(--radius-s); background: var(--leinen-2); }
.wiz-qa__q { font-size: 13px; color: var(--nebel); }
.wiz-qa__a { font-weight: 600; color: var(--kohle); }
.wiz-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin: 14px 0 16px; }
.wiz-cands--audio { grid-template-columns: 1fr; }
.wiz-cand { position: relative; border: 2px solid var(--faden-strong); border-radius: var(--radius-m);
  overflow: hidden; cursor: pointer; background: var(--leinen);
  transition: border-color .15s ease, box-shadow .15s ease; }
.wiz-cand:hover { border-color: var(--kohle); box-shadow: var(--schatten-1); }
.wiz-cand.is-selected { border-color: var(--akzent); box-shadow: var(--schatten-2); }
/* HYP-149-Folge: das Kachel-Seitenverhältnis folgt dem Lauf statt fest 1/1 zu
   sein — portal.js setzt `--wiz-frame-ar` pro Szenen-Schritt-Body (9/16 für
   Hochkant-Aufträge); der Fallback 1/1 greift für Bestandsaufträge OHNE den
   Wert UND für alle anderen Wizard-Schritte (Charakter/Hook/Clip-Karten), die
   die Variable nie setzen und weiterhin quadratisch bleiben müssen. */
.wiz-cand img { width: 100%; aspect-ratio: var(--wiz-frame-ar, 1/1); object-fit: cover; display: block; }
.wiz-cand__title { display: block; font-size: 12px; padding: 6px 8px; color: var(--nebel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-cand__badge { position: absolute; top: 8px; left: 8px; background: var(--akzent);
  color: var(--akzent-tinte); font-size: 12px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; }
/* Platzhalter-Szene (HYP-95): kein KI-Bild, sondern eine lokal erzeugte Karte —
   der Text ist zusätzlich ins Bild eingebrannt. Farben bewusst literal statt
   var(--akzent): sie spiegeln exakt das eingebrannte Band (wizard_placeholder.py
   BAND_FG/BG), Badge und Bild sollen als EIN Hinweis gelesen werden. */
.wiz-cand__ph { position: absolute; top: 6px; left: 6px; z-index: 2;
  background: #ffb020; color: #1b1d21; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px;
  border-radius: 4px; pointer-events: none; }
/* In der Lightbox-Leiste sitzt das Badge in einer Flex-Reihe, nicht über dem Bild. */
.wiz-cand__ph--lb { position: static; align-self: center; }
/* HYP-139 — eine Aufnahme mit festgelegtem Endbild zeigt BEIDE Bilder in EINER
   Karte: nebeneinander, mit einem Pfeil-Badge, damit sie als Anfang→Ende gelesen
   werden und nicht als zwei Aufnahmen. Der Rahmen und alle Bedienelemente bleiben
   die der einen Karte — freigegeben wird die Aufnahme, nicht das einzelne Bild. */
.wiz-cand__imgs { display: grid; grid-template-columns: 1fr; }
.wiz-cand--pair .wiz-cand__imgs { grid-template-columns: 1fr 1fr; gap: 2px; }
.wiz-cand__pairlbl { position: absolute; top: 6px; right: 6px; z-index: 2;
  background: var(--akzent); color: var(--akzent-tinte); font-size: 11px;
  font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px;
  pointer-events: none; }
.wiz-cand--audio { display: flex; padding: 10px 12px; }
.wiz-cand--audio .wiz-cand__badge { position: static; margin-left: auto; align-self: center; flex-shrink: 0; }
.wiz-cand__audio { display: flex; align-items: center; gap: 14px; width: 100%; flex-wrap: wrap; }
.wiz-cand__audio audio { flex: 1 1 260px; height: 36px; }
.wiz-chosen { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.wiz-chosen img { width: 180px; border-radius: 10px; border: 1px solid var(--faden-strong); }
/* Briefing-Intake (Onboarding: Projektname + Datei + Freitext) */
.wiz-intake { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.wiz-intake label { font-weight: 600; font-size: 13px; color: var(--kohle); display: block; margin-bottom: 4px; }
.wiz-intake__file { display: flex; align-items: center; gap: 10px; padding: 18px;
  border: 2px dashed var(--faden-strong); border-radius: var(--radius-m);
  background: var(--leinen-2); cursor: pointer; color: var(--graphit);
  transition: border-color .15s ease, background .15s ease; }
.wiz-intake__file:hover { border-color: var(--akzent); background: var(--akzent-hauch); }
.wiz-intake__file.has-file { border-style: solid; border-color: var(--akzent); }
/* Wizard-Nachschliff 30.07.: Senden-Button-Abstand + Karten-Footer + Lightbox */
.wiz-send { margin-top: 20px; }
.wiz-cand__foot { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 8px; }
.wiz-cand__foot .wiz-cand__title { padding: 0; flex: 1; min-width: 0; }
.wiz-cand__pick { font-size: 12px; padding: 5px 10px; flex-shrink: 0; }
.wiz-cand__pick.is-picked { background: var(--akzent); border-color: var(--akzent);
  color: var(--akzent-tinte); font-weight: 700; }
.wiz-cand img { cursor: zoom-in; }
.wiz-lb { position: fixed; inset: 0; z-index: 300; display: none; flex-direction: column;
  align-items: center; justify-content: center; background: rgba(20, 18, 15, 0.92); }
.wiz-lb__top { position: absolute; top: 0; left: 0; right: 0; display: flex;
  justify-content: space-between; align-items: center; padding: 14px 20px;
  color: rgba(255,255,255,0.85); font-size: 14px; }
.wiz-lb__close { background: none; border: 1px solid rgba(255,255,255,0.35);
  color: #fff; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; }
.wiz-lb__close:hover { background: rgba(255,255,255,0.15); }
.wiz-lb__img { max-width: 84vw; max-height: 76vh; border-radius: 10px;
  box-shadow: var(--schatten-3); }
.wiz-lb__nav { position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 30px; line-height: 1; width: 52px; height: 52px;
  border-radius: 50%; cursor: pointer; }
.wiz-lb__nav:hover { background: rgba(255,255,255,0.28); }
.wiz-lb__nav--prev { left: 22px; }
.wiz-lb__nav--next { right: 22px; }
.wiz-lb__bar { position: absolute; bottom: 26px; left: 0; right: 0;
  display: flex; justify-content: center; }
.wiz-lb__bar .btn.is-picked { background: var(--akzent); border-color: var(--akzent);
  color: var(--akzent-tinte); }
/* Wizard-Stimmen: bündige Zeilen + immer sichtbare Kommentarleiste (30.07.) */
.wiz-voices { margin: 14px 0 4px; }
.wiz-voices .voice-item { border: 1px solid var(--faden-strong); border-radius: var(--radius-m);
  background: var(--leinen-2); padding: 12px 14px; margin-bottom: 10px; }
.wiz-voices .voice-item.is-wiz-selected { border: 2px solid var(--akzent);
  background: var(--akzent-hauch); padding: 11px 13px; }
.wiz-voices .voice-row { align-items: flex-start; }
.wiz-voices .voice-row__main { min-width: 0; }
.wiz-vcmt { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.wiz-vcmt__input { flex: 1; padding: 8px 11px; border: 1px solid var(--faden-strong);
  border-radius: var(--radius-s); font: inherit; background: var(--eingabe); color: var(--kohle); }
.wiz-vcmt__input:focus { outline: none; border-color: var(--akzent); background: var(--leinen); }
/* Wizard-Stimmen Feinschliff (Manu 13:08): Karte = klickbare Auswahl, Pick unten rechts */
.wiz-voices .voice-item { position: relative; }
.wiz-voices .voice-item.wiz-row--pickable { cursor: pointer; }
.wiz-voices .voice-item.wiz-row--pickable:hover { border-color: var(--kohle); }
.wiz-voices .voice-item.is-wiz-selected.wiz-row--pickable:hover { border-color: var(--akzent); }
.wiz-vcmt__pick { position: absolute; right: 14px; bottom: 12px; }
.wiz-voices .voice-item.is-wiz-selected .wiz-vcmt__pick { right: 13px; bottom: 11px; }
/* Wizard-Szenen: Spinner, Fortschritts-Strip, Blur-Platzhalter */
.wiz-spin { display: inline-block; animation: wizspin 1.6s linear infinite; }
@keyframes wizspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wiz-scene-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.wiz-scene-thumb { width: 168px; height: auto; aspect-ratio: var(--wiz-frame-ar, 1/1); object-fit: cover;
  border-radius: var(--radius-m); border: 1px solid var(--faden-strong); animation: wizfade .5s ease; }
.wiz-scene-thumb--blur { filter: blur(14px) saturate(.8); opacity: .55; }
@keyframes wizfade { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.wiz-scene-err { color: var(--warn); font-weight: 600; }
/* HYP-74: Freigabe-Toggle + Einzelbild-Regen je Szenen-Bild (Karte + Lightbox) —
   reused .wiz-cand/.wiz-cand__pick/.wiz-vcmt/.wiz-quota/.wiz-spin, nur der Fein-
   schliff für die neuen Kombinationen fehlt. */
/* In der Karte (Grid-Spalte ab 160px) MUSS die Kommentarzeile stapeln: nebeneinander
   schiebt das Input den „Neu generieren"-Button aus der Karte, und .wiz-cand hat
   overflow:hidden — der Button war unsichtbar und unklickbar (im Screenshot-Review
   gefunden, die DOM-Checks sahen ihn sehr wohl). min-width:0 killt den Flex-Overflow. */
.wiz-cand .wiz-vcmt { margin: 0; padding: 8px; border-top: 1px solid var(--faden-strong);
  flex-direction: column; align-items: stretch; }
.wiz-cand .wiz-vcmt__input { min-width: 0; }
.wiz-vcmt--running { justify-content: center; color: var(--graphit); font-size: 13px; }
/* HYP-99: das Lippensynchron-Häkchen sitzt zwischen Karten-Fuß und Kommentarzeile —
   deshalb dieselbe Innenkante wie `.wiz-cand .wiz-vcmt` darüber, sonst tanzt es aus
   der Karte. Der Hinweis darunter trägt die Begründung, wenn eine Szene doch stumm
   gerendert wurde; er darf leise aussehen, aber nie unsichtbar sein. */
.wiz-cand__lip { display: flex; align-items: center; gap: 8px; padding: 8px;
  border-top: 1px solid var(--faden-strong); font-size: 13px; color: var(--graphit);
  cursor: pointer; }
.wiz-cand__lip input { accent-color: var(--akzent); }
/* HYP-138: Szenen-Gruppe in der Galerie — ein <details> pro Szene mit mehr als
   einer Einstellung, damit ein gesplitteter 6-Szenen-Auftrag nicht als 24
   gleichrangige Kacheln erscheint. Reused Tokens wie .wiz-cand (Rahmen/Radius). */
.wiz-scene-group { border: 1px solid var(--faden-strong); border-radius: var(--radius-m);
  margin-bottom: 14px; overflow: hidden; }
.wiz-scene-group__head { cursor: pointer; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; padding: 10px 12px; list-style: none; }
.wiz-scene-group__head::-webkit-details-marker { display: none; }
/* Ein-Shot-Szene: gleicher Kopf, aber nichts zum Auf-/Zuklappen — also weder
   Zeigefinger-Cursor noch Pfeil, sonst verspricht die Zeile eine Interaktion,
   die es nicht gibt. */
.wiz-scene-group--single .wiz-scene-group__head { cursor: default; }
.wiz-scene-group--single .wiz-scene-group__head::before { content: none; }
/* Der Pfeil ist die einzige Aufklapp-Affordanz, wenn list-style weg ist — er muss
   also sichtbar bleiben und die Richtung wechseln. */
.wiz-scene-group__head::before { content: '▸'; color: var(--nebel); flex-shrink: 0;
  transition: transform .15s ease; }
.wiz-scene-group[open] .wiz-scene-group__head::before { transform: rotate(90deg); }
.wiz-scene-group__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.wiz-scene-group__meta { font-size: 12px; color: var(--nebel); flex-shrink: 0; }
.wiz-scene-group__vo { flex-basis: 100%; font-size: 12px; font-style: italic; color: var(--nebel); }
/* Karten-Streifen innerhalb einer Szenen-Gruppe: horizontal statt Grid, damit eine
   Szene mit vielen Einstellungen nicht die ganze Seite hoch wird. */
.wiz-cands--strip { display: flex; overflow-x: auto; gap: 10px; padding: 0 12px 14px; margin: 0; }
.wiz-cands--strip > .wiz-cand { flex: 0 0 190px; }
.wiz-vcmt__hint { padding: 8px; border-top: 1px solid var(--faden-strong);
  font-size: 12px; color: var(--graphit); }
.wiz-frame__hint { font-size: 12px; color: var(--nebel); margin: 8px 0 0; }
.wiz-lb__bar--gallery { gap: 10px; align-items: center; }
.wiz-lb__bar--gallery .wiz-vcmt__input { flex: 0 1 320px; }
/* Das globale .btn:disabled hellt nur die SCHRIFT auf — auf .btn--primary (blau,
   weisse Schrift) sieht ein gesperrter Button dadurch aktiv aus. Während einer
   laufenden Neu-Generierung standen so drei klickbar wirkende Buttons da, die
   nichts tun. Nur die HYP-74-Controls abdunkeln, nicht global eingreifen. */
.wiz-frame__regen:disabled, .wiz-frame__approve:disabled,
.wiz-lb__bar--gallery .btn:disabled { opacity: .45; }
/* Szenen-Archiv (HYP-96): frühere Versionen unter der Galerie — bewusst gedämpft
   (kleinere Kacheln, .wiz-card--muted), damit es als Sekundär-Bereich neben der
   Live-Galerie liest. Reused Tokens/Radius wie .wiz-cands/.wiz-cand. */
.wiz-arch-wrap { margin-top: 18px; }
.wiz-arch { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin: 10px 0 0; }
.wiz-arch__item { border: 1px solid var(--faden-strong); border-radius: var(--radius-m);
  overflow: hidden; background: var(--leinen); display: flex; flex-direction: column; }
.wiz-arch__item img { width: 100%; aspect-ratio: var(--wiz-frame-ar, 1/1); object-fit: cover; display: block; }
.wiz-arch__title { display: block; font-size: 11px; padding: 4px 6px; color: var(--nebel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-arch__restore { width: calc(100% - 12px); margin: 0 6px 6px; font-size: 11px; padding: 4px 8px; }
/* Video-Produktion (HYP-85 Phase 5): Clip-Karten spiegeln .wiz-cand (Section E),
   nur Video statt Bild — .wiz-cand liefert bereits border/overflow:hidden, daher
   hier bewusst kein eigenes border-radius (matcht .wiz-cand img). */
/* Eigene Spaltenbreite fuer die Clip-Galerie: das 160px-Raster der Szenen-Galerie
   ist auf quadratische Bilder gerechnet — ein 9:16-Video wird darin briefmarkengross,
   und Titel wie Kommentarfeld brechen auf drei Zeichen weg. */
.wiz-cands--clips { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* HYP-154: innerhalb einer Szene liegen die Einstellungen als waagerechter
   Streifen (wie in der Galerie), sonst ist die Gruppierung fuer die Hoehe der
   Seite wirkungslos. Breiter als der 190px-Streifen der Bilder — ein 9:16-Video
   MIT Abspielleiste ist darin nicht mehr bedienbar. */
.wiz-cands--clips.wiz-cands--strip > .wiz-cand { flex: 0 0 240px; }
/* Die Render-Route ist seit HYP-154 eine Badge auf der Karte statt der
   Gliederungsachse — eigene Ecke, weil .wiz-cand__ph absolut oben links sitzt und
   Platzhalter-/Standbild-/Ton-Hinweis diesen Platz schon belegen. */
.wiz-cand__eng { left: auto; right: 6px; }
.wiz-clip__v { width: 100%; aspect-ratio: 9/16; object-fit: contain; background: #000; display: block; }
.wiz-clip__wait, .wiz-clip__err { aspect-ratio: 9/16; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 12px; background: var(--kohle);
  color: rgba(255,255,255,.72); font-size: 13px; }
.wiz-vid-final { width: 100%; max-width: 340px; border-radius: var(--radius-m);
  background: #000; display: block; margin-bottom: 14px; }

/* Sprecherspur im Video-Schritt: die Clips sind stumm, der Ton kommt erst im
   Schnitt dazu — beim Vergleichen der Routen will man ihn trotzdem hören. */
.wiz-vo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 10px 14px; background: var(--eingabe);
  border-radius: 12px; }
.wiz-vo__lbl { font-size: 13px; font-weight: 600; color: var(--graphit); }
.wiz-vo__player { flex: 1 1 260px; min-width: 220px; height: 34px; }

/* Ton-Cue-Panel im Video-Schritt (HYP-137, admin-only): reused .wiz-admin/
   .wiz-admin__tag wie jeder andere Admin-Block — .wiz-sound__body sitzt als
   volle Zeile darunter (flex-basis 100%), weil hier eine Slot-Liste statt
   einer Zeile Controls steht. */
.wiz-sound__body { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; }
.wiz-sound__intro { margin: 0; font-size: 13px; color: var(--graphit); }
.wiz-sound__row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--faden);
  border-radius: var(--radius-s); background: var(--leinen-2); }
.wiz-sound__meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wiz-sound__slot { font-family: monospace; font-size: 12px; background: var(--faden);
  padding: 1px 6px; border-radius: 4px; color: var(--kohle); }
.wiz-sound__kind, .wiz-sound__scene { font-size: 12px; color: var(--nebel); }
.wiz-sound__text { font-size: 13px; color: var(--kohle); }
.wiz-sound__file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wiz-sound__file audio { height: 32px; max-width: 220px; }
.wiz-sound__missing { font-size: 12px; color: var(--warn); font-weight: 600; }
.wiz-sound__orphans { border-top: 1px dashed var(--faden-strong); padding-top: 8px; margin-top: 4px; }
.wiz-sound__orphans-hint { margin: 0 0 4px; font-size: 13px; color: var(--warn); }
.wiz-sound__orphans li { display: flex; align-items: center; gap: 8px; }

/* Drehplan-Ansicht (HYP-133): vier Stufen (Storyboard/Produktion/Fragen/
   Nicht-enthalten) + Freigabe, alle in EINER .wiz-card. Jede Stufe eigener
   Abschnitt mit eigener Überschrift, per dashed border getrennt — reused
   Tokens/Radius wie der Rest von .wiz-*, kein eigenes Farbschema. */
.wiz-plan-stage { margin-top: 22px; }
.wiz-plan-stage:first-child { margin-top: 0; }
.wiz-plan-stage + .wiz-plan-stage { padding-top: 18px; border-top: 1px dashed var(--faden-strong); }
.wiz-plan-stage__head { font-size: 15px; font-weight: 700; color: var(--kohle); margin: 0 0 10px; }
.wiz-plan-scene { padding: 12px 0; }
.wiz-plan-scene + .wiz-plan-scene { border-top: 1px solid var(--faden); }
.wiz-plan-scene__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wiz-plan-scene__num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--eingabe);
  border: 1px solid var(--faden); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.wiz-plan-scene__ref, .wiz-plan-scene__onscreen { font-size: 13px; color: var(--nebel); margin: 6px 0 0; }
.wiz-plan-scene__vo { margin: 6px 0 0; color: var(--graphit); font-style: italic; }
.wiz-plan-tag { display: inline-block; font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--nebel); }
.wiz-plan-count { color: var(--graphit); margin: 0 0 4px; }
.wiz-plan-shot { padding: 8px 0 8px 30px; }
.wiz-plan-shot__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.wiz-plan-badge { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--eingabe); border: 1px solid var(--faden-strong); color: var(--graphit); }
.wiz-plan-badge--accent { background: var(--akzent-hauch); border-color: var(--akzent-rand); color: var(--kohle); }
.wiz-plan-shot__action { margin: 0; color: var(--kohle); }
/* HYP-139 — worauf die Aufnahme endet. Eingerückt und leiser als die Handlung:
   es ist der zweite Halbsatz derselben Aufnahme, keine zweite Aufnahme. */
.wiz-plan-shot__end { margin: 4px 0 0; padding-left: 10px; color: var(--nebel);
  font-size: 13px; border-left: 2px solid var(--faden-strong); }
.wiz-plan-count--images { color: var(--nebel); }
.wiz-plan-stage--release { text-align: center; }
.wiz-plan-stage--release p { color: var(--graphit); margin: 0 0 12px; }