/* ============================================================
   SteadyMotion Drehtag Dashboard — Theme & Layout
   Branding zentral über die CSS-Variablen unten anpassbar.

   Design-Sprache: monochromer steadymotion.at-Look — tiefes Schwarz,
   Hairline-Borders, viel Ruhe. Signatur-Element ist der „Motion-Streak"
   (--streak): horizontaler Weiß-Verlauf, zitiert die Bewegungsunschärfe
   der Wortmarke. Branding über Wiederholung statt Logo-Größe.
   ============================================================ */

/* Gebündelte Fonts (lokal, kein CDN — funktioniert auch offline/file://) */
@font-face { font-family: "Anton"; src: url("../fonts/Anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #070708;
  --panel: #121315;
  --panel2: #1a1b1e;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .22);
  --text: #f5f5f3;
  --muted: #8d8f93;
  --accent: #ffffff;
  --accent-contrast: #0a0a0a;
  --accent-soft: #ffffff14;
  --highlight: #ffd60a;
  --ok: #3fb27f;
  --warn: #d9a13c;
  --danger: #e05c5c;
  --radius: 14px;
  --radius-sm: 9px;
  --font-display: "Anton", "Impact", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --streak: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.45) 34%, rgba(255,255,255,.12) 70%, transparent 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0; color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
/* Ambiente-Glow auf einer eigenen, fixierten Ebene — bleibt beim Scrollen
   stehen wie ein festes Hintergrundbild, verursacht aber (anders als
   background-attachment: fixed) kein Neuzeichnen pro Scroll-Frame. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1100px 480px at 18% -12%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 420px at 95% 0%, rgba(255,255,255,.025), transparent 55%);
}

/* ---------- App-Shell: Sidebar links, Inhalt rechts ---------- */
.app { display: flex; min-height: 100vh; align-items: stretch; }
.main { flex: 1; min-width: 0; padding: 26px 36px 80px; max-width: 1180px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 232px; flex: none;
  position: sticky; top: 0; height: 100vh; overflow: auto;
  display: flex; flex-direction: column; gap: 24px;
  padding: 26px 16px 18px;
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.015);
}
.brand { position: relative; padding: 0 8px 16px; }
.brand::after {
  content: ""; position: absolute; left: 8px; bottom: 0; height: 1px; width: 150px;
  background: var(--streak);
}
.brand-name {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 400; line-height: 1;
  letter-spacing: .015em; text-transform: uppercase; color: #fff;
}
.brand-name .motion {
  font-style: italic; margin-left: 5px;
  text-shadow: 6px 0 9px rgba(255,255,255,.35), 14px 0 18px rgba(255,255,255,.16), -4px 0 7px rgba(255,255,255,.1);
}
.brand-sub {
  margin-top: 7px;
  font-size: 9.5px; font-weight: 600; color: var(--muted);
  letter-spacing: .24em; text-transform: uppercase;
}

.sidenav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: 9.5px; font-weight: 600; color: var(--muted);
  letter-spacing: .2em; text-transform: uppercase; padding: 0 10px 8px;
}
.nav-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: none; background: transparent;
  color: var(--muted); border-radius: 9px; font-size: 13.5px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: inherit;
}
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-item.active { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--border); }
.connectbar { display: flex; flex-direction: column; gap: 1px; align-items: stretch; margin-top: 4px; }
.connectbar button {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--muted);
  padding: 7px 10px; border-radius: 8px; font-size: 11.5px; cursor: pointer;
  font-family: inherit;
}
.connectbar button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.connectbar .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--muted); vertical-align: 1px; }
.connectbar .dot.on { background: var(--ok); }
.connectbar .dot.warn { background: var(--warn); }
.connectbar .dot.err { background: var(--danger); }
#cloudChip { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Cloud: Anmeldung + Projektauswahl ---------- */
.cloud-gate {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.cloud-card {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px;
}
.cloud-card .brand-name { font-size: 28px; }
.cloud-sub { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .24em; text-transform: uppercase; margin-top: -10px; margin-bottom: 6px; }
.cloud-card .btn { width: 100%; justify-content: center; }
.cloud-fehler { color: var(--danger); font-size: 12.5px; min-height: 1em; }
.cloud-wahl { display: flex; flex-direction: column; gap: 8px; }
.cloud-wahl .btn { text-align: left; }
.pj-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pj-zeile {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font: inherit; cursor: pointer;
}
.pj-zeile:hover { border-color: var(--border-strong); }
.pj-zeile.aktiv { border-color: var(--accent); }
.pj-name { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-kunde { font-weight: 400; color: var(--muted); }
.pj-meta { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.pj-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.pj-fuss .spacer { flex: 1; }

/* ---------- Inhalt ---------- */
.view { display: none; }
.view.active { display: block; }
h1.page-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; letter-spacing: .02em; text-transform: uppercase;
  margin: 0 0 6px;
}
.sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; max-width: 900px; line-height: 1.55; }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px;
}
.panel h2 {
  margin: 0 0 14px; font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: .18em; text-transform: uppercase;
}

/* Formulare */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; }
.grid .wide { grid-column: 1 / -1; }
.field label {
  display: block; font-size: 10px; font-weight: 600; color: var(--muted);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px;
}
.field input, .field select, .field textarea, .cell input, .cell select {
  width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13.5px; font-family: inherit;
}
.field textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus, .cell input:focus, .cell select:focus {
  outline: none; border-color: var(--border-strong);
}
input[type="time"], input[type="date"] { color-scheme: dark; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { border-color: var(--border-strong); background: #212226; }
.btn.primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: #e8e8e6; }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }

/* ---------- Editierbare Tabellen ---------- */
.etable { width: 100%; border-collapse: collapse; }
.etable th {
  text-align: left; font-size: 10px; font-weight: 600; color: var(--muted);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 6px 8px; border-bottom: 1px solid var(--border);
}
.etable td { padding: 4px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.etable tr:last-child td { border-bottom: none; }
.etable .cell input, .etable .cell select {
  border-color: transparent; background: transparent; padding: 7px 8px;
}
.etable .cell input:hover, .etable .cell select:hover { background: var(--panel2); }
.etable .cell input:focus, .etable .cell select:focus { background: var(--panel2); border-color: var(--border-strong); }
.etable .num {
  font-family: var(--font-display); font-size: 15px; color: var(--muted);
  width: 40px; text-align: center; letter-spacing: .03em;
}
.etable .rowbtns { white-space: nowrap; text-align: right; width: 110px; }
.rowbtn {
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 13px; padding: 4px 5px; border-radius: 6px;
}
.rowbtn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.rowbtn.del:hover { color: var(--danger); }
.drag-handle { cursor: grab; color: var(--muted); padding: 0 4px; user-select: none; }
tr.dragging { opacity: .35; }
tr.drag-over td { border-top: 2px solid var(--accent); }
tr.done .cell input { color: var(--muted); text-decoration: line-through; }

.empty-hint { color: var(--muted); font-size: 13px; padding: 14px 4px; }

/* Chips / Status */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 11px; font-size: 11.5px; color: var(--muted);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.chip.ok { color: var(--ok); border-color: rgba(63,178,127,.35); }
.chip.ok .dot { background: var(--ok); }
.chip.warn { color: var(--warn); border-color: rgba(217,161,60,.35); }
.chip.warn .dot { background: var(--warn); }

/* ---------- Banner (Claude-Ergebnisse zum Übernehmen) ---------- */
.banner {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 214, 10, .06);
  border: 1px solid rgba(255, 214, 10, .35);
  border-radius: var(--radius); padding: 12px 16px;
  margin-bottom: 18px; font-size: 13px;
}
.banner .spacer { flex: 1; }

/* ---------- Storyboard-Karten (gleiche Daten wie Shotlist) ---------- */
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sb-card {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.sb-frame {
  aspect-ratio: 16 / 9; background: rgba(255,255,255,.03);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11.5px; text-align: center; padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.sb-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-frame.dragover { outline: 2px dashed var(--accent); outline-offset: -6px; color: var(--text); }
.sb-frame { position: relative; }
.sb-framebtns { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s ease; }
.sb-frame:hover .sb-framebtns { opacity: 1; }
.framebtn {
  border: none; background: rgba(10,10,10,.72); color: #fff;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.framebtn:hover { background: rgba(10,10,10,.92); }
.sb-grprow { padding: 0 6px; margin-top: 6px; }

/* Umsortieren im Storyboard: Griff, Karten-Drag, Gruppenkopf als Ablage */
.sb-handle { cursor: grab; color: var(--muted); user-select: none; font-size: 13px; }
.sb-handle.off { cursor: default; opacity: .3; }
.sb-head .rowbtn { font-size: 12px; padding: 2px 5px; }
.sb-card.dragging { opacity: .35; }
.sb-card.drag-over { outline: 2px solid var(--accent); outline-offset: -2px; }
.grp-head.drag-over { background: var(--accent-soft); border-radius: var(--radius-sm); }
tr.grp-row.drag-over td { background: var(--accent-soft); }

/* Lightbox: Frame in Vollbild */
.lightbox {
  position: fixed; inset: 0; z-index: 600; background: rgba(4,4,5,.96);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
/* Höhe füllt den Schirm, Breite folgt dem Seitenverhältnis; contain verhindert Verzerrung bei sehr breiten Bildern */
.lb-img { height: 92vh; width: auto; max-width: 96vw; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.lightbox:fullscreen .lb-img { height: 100vh; max-width: 100vw; }
.lb-cap {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; pointer-events: none;
  color: rgba(245,245,243,.8); font-size: 13px; white-space: pre; text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.lb-btns { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.lb-btn {
  border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,10,.7); color: #fff;
  border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.lb-btn:hover { background: rgba(255,255,255,.14); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 72px; border: none; border-radius: 10px; cursor: pointer;
  background: rgba(10,10,10,.55); color: #fff; font-size: 34px; line-height: 1;
}
.lb-nav:hover { background: rgba(255,255,255,.14); }
.lb-nav[disabled] { opacity: .15; pointer-events: none; }
.lb-nav.prev { left: 14px; } .lb-nav.next { right: 14px; }
.sb-grpsel { width: 100%; }

/* Gruppen-Sektionen im Storyboard */
.grp-section { margin: 6px 0 18px; }
.grp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.grp-head.muted { color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.grp-name { width: auto; min-width: 160px; font-size: 14px; font-weight: 600; }
.grp-typ { width: auto; }
.grp-count { font-size: 11px; color: var(--muted); }

/* Sortier-Auswahl in der Toolbar (Shotlist + Storyboard) */
.sort-ctl { display: inline-flex; align-items: center; gap: 7px; }
.sort-lbl {
  font-size: 10px; color: var(--muted);
  letter-spacing: .14em; text-transform: uppercase;
}
.sort-sel { width: auto; min-width: 168px; }

/* Gruppen-Abschnitt als Zeile in der Shotlist */
.etable tr.grp-row td {
  padding: 16px 6px 6px; border-bottom: 1px solid var(--border-strong);
  background: transparent;
}
.etable tr.grp-row:first-child td { padding-top: 4px; }
.grp-row-name { font-size: 13px; font-weight: 600; margin-right: 10px; }
.drag-handle.off { cursor: default; opacity: .35; text-align: center; }

/* Crew-Tab: Block-Köpfe mit Werkzeugen, freie Einträge, Kartei-Knopf */
.grp-head { display: flex; align-items: center; gap: 10px; }
.grp-head .spacer { flex: 1; }
.grp-head .rowbtn { font-size: 12px; }
.grp-name-inp {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 2px 6px; width: 200px;
}
.grp-name-inp:hover { border-color: var(--border); }
.grp-name-inp:focus { outline: none; border-color: var(--border-strong); background: var(--panel2); }
.crew-table .drag-handle { width: 22px; }
.rowbtn.kartei { color: var(--warn); }
.rowbtn.kartei:hover { color: var(--warn); background: rgba(217,161,60,.12); }
.btn.kartei { border-color: rgba(217,161,60,.45); color: var(--warn); }
.mono-sm { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-list { max-height: 50vh; overflow-y: auto; overflow-x: hidden; }
.pick-list .col-menu-row { cursor: pointer; }

/* Mini-Thumbnail in der Shotlist */
.sl-thumb { width: 46px; height: 26px; object-fit: cover; border-radius: 5px; display: block; cursor: pointer; border: 1px solid var(--border); }
.sl-thumb.empty { display: flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--muted); font-size: 12px; }
.muted-mini { color: var(--muted); font-size: 13px; }
.sb-head { display: flex; gap: 8px; align-items: center; padding: 9px 10px 0; }
.sb-num { font-family: var(--font-display); font-size: 15px; color: var(--muted); letter-spacing: .03em; }
.sb-specs {
  font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-card textarea {
  border: 1px solid transparent; background: transparent; color: var(--text);
  margin: 4px 6px 8px; border-radius: 8px; padding: 6px 8px;
  font-size: 12.5px; font-family: inherit; line-height: 1.45; resize: none; min-height: 50px;
}
.sb-card textarea:focus { outline: none; background: var(--panel); border-color: var(--border-strong); }

/* ---------- Preedit-Clips ---------- */
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.clip-card {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.clip-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.clip-card .clip-name {
  font-size: 11px; color: var(--muted); padding: 8px 10px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clip-card .cell { padding: 0 8px 10px; }
.clip-card.assigned { border-color: rgba(63, 178, 127, .4); }

/* ---------- Pre-Edit Review-Player ---------- */
.pe-player { margin-top: 4px; }
.pe-video {
  width: 100%; max-height: 460px; background: #000;
  border-radius: var(--radius); display: block; border: 1px solid var(--border);
}
/* Kontroll-Leiste unter dem Video */
.pe-controls { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.pe-time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text); }
.pe-hint { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.pe-fps { display: inline-flex; align-items: center; gap: 5px; }
.pe-fps input { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; font-family: inherit; font-size: 12.5px; }

.pe-tl-label { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin: 10px 0 4px; }
.pe-timeline {
  position: relative; height: 38px; margin: 2px 0 6px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; cursor: crosshair;
}
.pe-timeline.detail { height: 58px; }
/* Fenster-Rechteck in der Übersicht (zeigt den Detail-Ausschnitt) */
.pe-viewport {
  position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  background: rgba(255,214,10,.10); border: 1px solid rgba(255,214,10,.55);
}
.pe-marker {
  position: absolute; top: 0; bottom: 0;
  background: rgba(255,255,255,.16); border-left: 1px solid var(--bg); cursor: pointer;
  transition: background .12s ease;
}
.pe-marker:hover { background: rgba(255,255,255,.28); }
.pe-marker.sel { background: var(--accent); }
/* Ziehbarer Schnitt zwischen zwei Shots */
.pe-divider {
  position: absolute; top: -2px; bottom: -2px; width: 11px; margin-left: -5.5px;
  cursor: ew-resize; z-index: 3; touch-action: none;
}
.pe-divider::before {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px;
  background: var(--highlight); opacity: .55;
}
.pe-divider:hover::before { opacity: 1; width: 2px; left: 4.5px; }
/* Playhead-Linie */
.pe-playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger); z-index: 4; pointer-events: none; }

.pe-rows { display: flex; flex-direction: column; gap: 2px; }
.pe-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent;
}
.pe-row:hover { background: rgba(255,255,255,.04); }
.pe-row.sel { background: var(--accent-soft); border-color: var(--border-strong); }
.pe-num { font-family: var(--font-display); font-size: 14px; color: var(--muted); width: 42px; letter-spacing: .03em; }
.pe-tc {
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted);
  width: 92px; white-space: nowrap;
}
.pe-row .cell input, .pe-row .cell select { border-color: transparent; background: transparent; padding: 6px 8px; }
.pe-row .cell input:hover, .pe-row .cell select:hover { background: var(--panel2); }
.pe-row .cell input:focus, .pe-row .cell select:focus { background: var(--panel2); border-color: var(--border-strong); }
.pe-edit { display: flex; gap: 1px; white-space: nowrap; }
.pe-edit .rowbtn { font-size: 14px; }
.rowbtn[disabled] { opacity: .3; pointer-events: none; }

/* Kleine Verbindungs-Badges (⏱ Timecode, 🖼 Frame, 🎞 Clips) */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 8px; margin-left: 4px; white-space: nowrap;
}
.badge.on { color: var(--ok); border-color: rgba(63, 178, 127, .35); }

/* ---------- Pre-Edit: Shot-Sammlung (Karten) ---------- */
.pe-shotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.pe-shot { display: flex; gap: 10px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.pe-shot-thumb { width: 132px; flex: none; aspect-ratio: 16/9; background: rgba(255,255,255,.03); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.pe-shot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-shot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pe-shot-top { display: flex; align-items: center; gap: 8px; }
.pe-shot-desc { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12.5px; font-family: inherit; }
.pe-shot-btns { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- Detail-Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px); padding: 4vh 3vw;
}
.modal-panel {
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius);
  width: 100%; max-width: 860px; max-height: 92vh; overflow: auto;
  box-shadow: 0 20px 70px rgba(0,0,0,.6);
}
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.modal-title { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; letter-spacing: .02em; flex: 1; }
.modal-body { padding: 20px; }
.modal-cols { display: flex; gap: 20px; flex-wrap: wrap; }
.modal-left { flex: 0 0 300px; }
.modal-fields { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.modal-thumbacts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.modal-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sb-frame.detail { aspect-ratio: 16/9; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* Karten-Buttons im Storyboard */
.sb-cardbtns { display: flex; gap: 6px; padding: 0 6px 8px; }

/* ---------- Spalten-Menü ---------- */
.col-menu { display: flex; flex-direction: column; gap: 2px; }
.col-menu-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; }
.col-menu-row:hover { background: rgba(255,255,255,.04); }
.col-menu-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }

/* ---------- Drehtag-Umschalter ---------- */
.daybar {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px;
}
.daybar-label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.daybar select { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-family: inherit; font-size: 13.5px; min-width: 180px; }
tr.sel td { background: var(--accent-soft); }

/* ---------- Locations ---------- */
.loc-card { border-left: 3px solid var(--border); }
.loc-card.on { border-left-color: var(--ok); }
.loc-plan { margin-top: 12px; }
.loc-planimg { max-width: 420px; margin-bottom: 8px; }
.loc-planimg img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }

/* ---------- Drehplan-Presets ---------- */
.dp-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.chip-btn {
  border: 1px solid var(--border); background: var(--panel2); color: var(--text);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.chip-btn:hover { border-color: var(--border-strong); background: #212226; }
tr.dp-grouped td { box-shadow: inset 3px 0 0 var(--ok); }

/* Zeit-Kette: berechnete Zellen + Dauer-Eingabe („45 min" / „1 h 30") */
.dp-calc { color: var(--muted); font-variant-numeric: tabular-nums; }
.dp-ptime { color: var(--muted); text-align: center; }
.dp-durwrap { display: flex; align-items: center; gap: 4px; }
.dp-min { width: 76px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rowbtn.on { color: var(--text); background: rgba(255,255,255,.12); }

/* Parallelhandlung: eingerückte Zeile mit linker Klammer-Linie */
tr.dp-par td { box-shadow: inset 3px 0 0 var(--border-strong); background: rgba(255,255,255,.025); }
.dp-was.dp-par-cell { display: flex; align-items: center; gap: 2px; }
.dp-was.dp-par-cell input { flex: 1; }
.dp-par-glyph { color: var(--muted); user-select: none; }

/* ============================================================
   Set-Modus — Operator-View
   ============================================================ */
.sm-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }
.sm-screenhint { margin-top: 10px; font-size: 12px; color: var(--warn, #d9a13c); }

.sm-status { margin-top: 14px; }
.sm-statusrow { display: flex; gap: 22px; align-items: center; }
.sm-clock {
  font-family: var(--font-mono); font-size: 44px; font-weight: 700;
  letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1;
}
.sm-statusmid { flex: 1; min-width: 0; }
.sm-sollist { display: flex; gap: 18px; margin-top: 10px; font-size: 12.5px; flex-wrap: wrap; }
.sm-kv b { font-weight: 700; }
.sm-delta { font-weight: 700; }
.sm-delta.ok { color: var(--ok); }
.sm-delta.warn { color: #d9a13c; }
.sm-delta.danger { color: var(--danger); }
.sm-sidekpis { display: flex; gap: 18px; }
.sm-kpi .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.sm-kpi .v { font-size: 17px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sm-kpi .v .sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.sm-kpi .v.warn { color: #d9a13c; }

/* Timeline (Operator + Display teilen die Segment-Styles) */
.sm-timeline { position: relative; height: 18px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--border); overflow: visible; }
.sm-tlseg { position: absolute; top: 3px; bottom: 3px; border-radius: 999px; background: rgba(255,255,255,.16); }
.sm-tlseg.pause { background: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 4px, transparent 4px 8px); }
.sm-tlseg.done { background: rgba(255,255,255,.42); }
.sm-tlseg.current { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.5); }
.sm-tlnow { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.9); }

.sm-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.4fr); gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .sm-grid { grid-template-columns: 1fr; } }

.sm-blocknow { margin-top: 6px; }
.sm-blockzeit { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sm-blockwas { font-size: 26px; font-weight: 800; margin: 2px 0 4px; }
.sm-blockmeta { font-size: 12.5px; color: var(--muted); white-space: pre-wrap; }
.sm-blockpar { margin-top: 8px; font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--border-strong); padding-left: 8px; }
.sm-upnext { margin-top: 12px; font-size: 12.5px; }
.sm-upnext .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin-right: 6px; }

.sm-shotrow { display: flex; gap: 14px; margin-top: 6px; }
.sm-shotthumb { width: 220px; aspect-ratio: 16/9; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); background: #000; }
.sm-shotthumb.ph { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.sm-shotinfo { flex: 1; min-width: 0; }
.sm-shotnr { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; color: var(--muted); }
.sm-shotdesc { font-size: 19px; font-weight: 700; margin: 3px 0 6px; }
.sm-shotmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.sm-shotmeta b { color: var(--text); font-weight: 600; }
.sm-shotregie { margin-top: 8px; font-size: 12.5px; white-space: pre-wrap; }
.sm-queue { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.sm-queue .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }

/* Takes + Notizen: zwei Panels nebeneinander, Touch-tauglich (AL am Set) */
.sm-workgrid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .sm-workgrid { grid-template-columns: 1fr; } }
.sm-foot { margin: 10px 2px 0; }
.sm-bigbtn { font-size: 14px; padding: 9px 16px; }

/* Take-Board */
.sm-takehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sm-takehead h2 { margin: 0; }
.sm-takelist { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow: auto; }
.sm-take {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border);
}
.sm-take.fav { border-color: #ffd60a; box-shadow: inset 3px 0 0 #ffd60a; }
.sm-takenr { font-weight: 800; font-size: 15px; min-width: 34px; }
.sm-taketime { color: var(--muted); font-size: 11px; }
.sm-rates { display: flex; gap: 4px; }
.sm-rate {
  width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: 15px; cursor: pointer;
}
.sm-rate:hover { border-color: var(--border-strong); color: var(--text); }
.sm-rate.fav.on { background: #ffd60a; border-color: #ffd60a; color: #171204; }
.sm-rate.ok.on { background: var(--ok); border-color: var(--ok); color: #08130d; }
.sm-rate.ng.on { background: var(--danger); border-color: var(--danger); color: #1a0808; }
.sm-taketags { display: flex; gap: 4px; }
.sm-ttag {
  height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: 11.5px; cursor: pointer;
}
.sm-ttag:hover { border-color: var(--border-strong); color: var(--text); }
.sm-ttag.on { background: #d9a13c; border-color: #d9a13c; color: #171204; font-weight: 700; }
.sm-takecmt {
  flex: 1; min-width: 140px; background: transparent; border: none;
  border-bottom: 1px dashed transparent; color: var(--text); font: inherit; font-size: 12.5px; padding: 4px 2px;
}
.sm-takecmt:hover { border-bottom-color: var(--border-strong); }
.sm-takecmt:focus { outline: none; border-bottom-color: #fff; }

/* Notizen */
.sm-notearten { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sm-artchip.on { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
.sm-noterow { display: flex; gap: 8px; }
.sm-noteinput { flex: 1; font-size: 13.5px; padding: 9px 12px; }
.sm-notelist { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.sm-note { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--border); }
.sm-noteart { font-size: 14px; }
.sm-note .t { color: var(--muted); font-size: 11px; }
.sm-note .s { font-weight: 700; white-space: nowrap; }
.sm-note .x { flex: 1; min-width: 0; }

/* ============================================================
   Set-Modus — Display (Kundenmonitor, ?display=1 und „Vollbild hier")
   ============================================================ */
body.sm-displaymode { background: #070708; }
body.nocursor, body.nocursor * { cursor: none !important; }
.sm-display {
  position: fixed; inset: 0; z-index: 2000; color: #f5f5f3;
  background: #070708 center/cover no-repeat;
  display: flex; flex-direction: column; padding: 4vh 5vw; gap: 2.6vh;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.sm-display::before { content: ""; position: absolute; inset: 0; background: rgba(7,7,8,.55); }
.sm-display > * { position: relative; }

.sm-d-brand { font-family: var(--font-display, Anton, Impact, sans-serif); font-size: 40px; letter-spacing: .02em; text-transform: uppercase; }
.sm-d-brand .motion { font-style: italic; text-shadow: 0 0 18px rgba(255,255,255,.8), 12px 0 22px rgba(255,255,255,.35); }
.sm-d-brand.klein { font-size: 22px; }

/* Screens (Intro/Pause/Wrap) */
.sm-d-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3vh; }
.sm-d-screen .sm-d-brand { font-size: clamp(40px, 6vw, 84px); }
.sm-d-big { font-size: clamp(28px, 4.6vw, 64px); font-weight: 800; letter-spacing: .01em; }
.sm-d-sub { font-size: clamp(14px, 1.6vw, 22px); color: rgba(245,245,243,.65); letter-spacing: .06em; }
.sm-d-screen .sm-d-clock { font-size: clamp(18px, 2vw, 28px); opacity: .55; }

/* Live-Ansicht */
.sm-d-head { display: flex; align-items: center; gap: 3vw; }
.sm-d-title { flex: 1; min-width: 0; }
.sm-d-title .t { font-size: clamp(18px, 2.2vw, 30px); font-weight: 800; }
.sm-d-title .s { font-size: clamp(11px, 1.2vw, 15px); color: rgba(245,245,243,.6); letter-spacing: .14em; text-transform: uppercase; }
.sm-d-clock { font-family: var(--font-mono); font-size: clamp(34px, 4.4vw, 64px); font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-timeline.dunkel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); height: 20px; }
.sm-d-delta { font-size: clamp(13px, 1.4vw, 18px); font-weight: 700; }
.sm-d-delta.ok { color: #3fb27f; }
.sm-d-delta.warn { color: #d9a13c; }
.sm-d-delta.danger { color: #e05c5c; }

.sm-d-grid { flex: 1; display: grid; grid-template-columns: 1fr 1.35fr; gap: 2.4vw; min-height: 0; }
.sm-d-box { border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(10,10,12,.55); padding: 2.4vh 1.8vw; display: flex; flex-direction: column; gap: 1.2vh; min-height: 0; }
.sm-d-box .k { font-size: clamp(10px, 1vw, 13px); text-transform: uppercase; letter-spacing: .24em; color: rgba(245,245,243,.5); }
.sm-d-blockwas { font-size: clamp(24px, 3.2vw, 46px); font-weight: 800; }
.sm-d-blockwas.leise { color: rgba(245,245,243,.4); }
.sm-d-blockzeit { font-family: var(--font-mono); font-size: clamp(14px, 1.6vw, 20px); color: rgba(245,245,243,.7); }
.sm-d-next { margin-top: auto; font-size: clamp(12px, 1.3vw, 16px); color: rgba(245,245,243,.6); }
.sm-d-shotrow { display: flex; gap: 1.6vw; align-items: flex-start; min-height: 0; }
.sm-d-thumb { width: min(30vw, 440px); aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); }
.sm-d-shotnr { font-family: var(--font-mono); font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .26em; color: rgba(245,245,243,.55); }
.sm-d-shotdesc { font-size: clamp(18px, 2.2vw, 32px); font-weight: 700; margin-top: .6vh; }
.sm-d-shotmeta { font-size: clamp(12px, 1.3vw, 16px); color: rgba(245,245,243,.6); margin-top: .8vh; }
.sm-d-progress { margin-top: auto; font-size: clamp(12px, 1.3vw, 16px); color: rgba(245,245,243,.65); font-variant-numeric: tabular-nums; }

/* ---------- Callsheet-Steuerung ---------- */
.cs-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }

/* Crew-Call-Liste im Callsheet (Screenshot-Stil) */
.cs-crew th { text-transform: uppercase; }
.cs-crew td:first-child { font-weight: 600; }
.cs-crew .nowrap { white-space: nowrap; }   /* Telefon/Zeiten nie über mehrere Zeilen */

/* Storyboard-Anhang im Callsheet */
.cs-sbgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs-sbgrid + .cs-sbgrid { margin-top: 8px; }   /* Reihenabstand (je Reihe ein Grid, s. storyboardDruckReihen) */
.cs-sbgrid.sp3 { grid-template-columns: repeat(3, 1fr); gap: 10px; }   /* Storyboard-PDF: größere Frames */
.cs-sbgrid.sp3 + .cs-sbgrid.sp3 { margin-top: 10px; }
.cs-sbcap.gross { font-size: 10.5px; padding: 5px 7px 2px; color: #222; line-height: 1.35; }
.cs-sbcap.gross b { font-family: var(--font-mono); font-weight: 600; color: #666; }
.cs-sbspecs { font-size: 8.5px; color: #888; padding: 0 7px 5px; letter-spacing: .02em; }
.cs-sbcell { border: 1px solid #e5e5e5; border-radius: 4px; overflow: hidden; }
.cs-sbcell img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.cs-sbph { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: #bbb; background: #f4f4f4; }
.cs-sbcap { font-size: 9.5px; padding: 3px 5px; color: #555; }
.cs-lageplan { width: 100%; border-radius: 4px; border: 1px solid #e5e5e5; }

/* Storyboard nach Gruppen: Zwischentitel je Gruppe */
.cs-sbgroup + .cs-sbgroup { margin-top: 12px; }
.cs-sbgrouptitle {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #666;
}
.cs-sbgroupcount { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; color: #aaa; }

/* Untergeordneter Schalter in der Anhang-Zeile („nach Gruppen") */
.cs-toggle-sub { font-size: 11.5px; color: var(--muted); margin-left: -2px; }

@media print {
  .cs-sbgrid { grid-template-columns: repeat(4, 1fr); }
  .cs-sbcell { break-inside: avoid; }
}

/* ---------- Toasts ---------- */
#toastHost { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--panel2); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: 10px; padding: 10px 18px; font-size: 13px;
  opacity: 0; transform: translateY(8px); transition: all .25s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); max-width: 90vw;
}
.toast.show { opacity: 1; transform: none; }

/* ============================================================
   Callsheet-Dokument (Vorschau + Druck) — helles „Papier"
   ============================================================ */
.paper-wrap { display: flex; justify-content: center; }
.paper {
  background: #fff; color: #111;
  width: 100%; max-width: 800px;
  border-radius: 4px; padding: 44px 48px;
  box-shadow: 0 12px 50px rgba(0,0,0,.55);
  font-size: 12.5px; line-height: 1.45;
  position: relative;   /* Anker für absolute Elemente (z. B. Art-Print-Rahmen) */
}
.paper a { color: #111; }
.paper .mono { font-family: var(--font-mono); }

/* ============================================================
   Callsheet v3 — „Production Noir": schwarzes Cover-Band mit
   Light-Trails (prozedural oder eigenes Hero-Bild), Outline-Nr,
   Mono-Metazeile, überlappende Zeiten-Kacheln, Tages-Timeline.
   .paper.csx hat KEIN Innenpadding — Sektionen bekommen Ränder.
   ============================================================ */
.paper.csx { padding: 0 0 30px; overflow: hidden; }
.paper.csx > .cs-section { margin-left: 44px; margin-right: 44px; }
.paper.csx > .cs-footer { margin: 26px 44px 0; }

.csx-head { position: relative; background: #0a0a0b; color: #fff; padding: 36px 44px 52px; overflow: hidden; }
.csx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csx-bg.photo { filter: grayscale(1) contrast(1.08) brightness(.85); }
.csx-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,.30) 0%, rgba(10,10,11,.86) 92%); }
.csx-in { position: relative; }
.csx-nr {
  position: absolute; right: -6px; top: -30px; z-index: 0;
  font-family: var(--font-display); font-size: 170px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.17);
}
.csx-brand { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; letter-spacing: .02em; }
.csx-brand .motion { font-style: italic; margin-left: 4px; text-shadow: 6px 0 9px rgba(255,255,255,.4); }
.csx-title { font-family: var(--font-display); font-size: 42px; text-transform: uppercase; line-height: .96; margin-top: 16px; max-width: 82%; }
.csx-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #9a9a9f; }
.csx-meta b { color: #fff; font-weight: 600; }

.csx-times { display: flex; gap: 10px; margin: -28px 44px 0; position: relative; z-index: 2; }
.csx-time { flex: 1; background: #0a0a0b; color: #fff; border-radius: 9px; text-align: center; padding: 13px 6px 12px; }
.csx-time .t-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: #8b8b90; }
.csx-time .t-value { font-family: var(--font-display); font-size: 25px; margin-top: 4px; }

/* ---------- Vorlage B: Swiss Editorial ---------- */
.csB-head { padding: 40px 44px 0; }
.csB-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid #111; padding-bottom: 12px; }
.csB-brand { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; }
.csB-brand .motion { font-style: italic; }
.csB-doc { font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; }
.csB-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; border-bottom: 1px solid #111; }
.csB-cell { padding: 16px 12px 14px 0; border-right: 1px solid #ddd; }
.csB-cell:last-child { border-right: none; }
.csB-cell + .csB-cell { padding-left: 12px; }
.csB-k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: #999; }
.csB-day { font-family: var(--font-display); font-size: 54px; line-height: .9; margin-top: 6px; }
.csB-day span { font-size: 22px; color: #999; }
.csB-v { font-family: var(--font-display); font-size: 22px; margin-top: 8px; }
.csB-sub { font-family: var(--font-mono); font-size: 9.5px; color: #666; margin-top: 4px; }

/* ---------- Vorlage C: Timeline Strip ---------- */
.csC-head { padding: 36px 44px 22px; border-bottom: 1px solid #111; display: flex; justify-content: space-between; align-items: flex-end; }
.csC-brand { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; }
.csC-brand .motion { font-style: italic; }
.csC-title { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; line-height: .95; margin-top: 10px; }
.csC-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #777; margin-top: 6px; }
.csC-badge { border: 1.5px solid #111; padding: 6px 14px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.csC-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 44px 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #777; }
.csC-meta b { color: #111; }

/* ---------- Vorlage D: Hero Frame ---------- */
.csD-head { position: relative; height: 240px; background: #000; overflow: hidden; }
.csD-head .csx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csD-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.85) 90%); }
.csD-txt { position: absolute; left: 44px; right: 44px; bottom: 20px; color: #fff; }
.csD-brand { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; opacity: .9; }
.csD-brand .motion { font-style: italic; }
.csD-big { font-family: var(--font-display); font-size: 40px; text-transform: uppercase; line-height: .95; margin-top: 8px; max-width: 85%; }
.csD-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #bbb; }
.csD-meta b { color: #fff; }
.csD-nr { position: absolute; right: 34px; bottom: 14px; font-family: var(--font-display); font-size: 84px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.6); }

/* ---------- Vorlage E: Technical Blueprint ---------- */
.csE-head {
  padding: 32px 44px 20px; position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(17,17,17,.045) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(17,17,17,.045) 15px 16px);
}
.csE-corner { position: absolute; width: 15px; height: 15px; border: 0 solid #111; }
.csE-c1 { top: 12px; left: 12px; border-top-width: 1.5px; border-left-width: 1.5px; }
.csE-c2 { top: 12px; right: 12px; border-top-width: 1.5px; border-right-width: 1.5px; }
.csE-bar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.csE-brand { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; }
.csE-brand .motion { font-style: italic; }
.csE-title { font-family: var(--font-display); font-size: 32px; text-transform: uppercase; line-height: .95; }
.csE-doc { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .18em; color: #555; text-align: right; line-height: 1.8; text-transform: uppercase; }
.csE-frame { border: 1.5px solid #111; display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr 1.4fr; background: #fff; }
.csE-cell { border-right: 1.5px solid #111; padding: 9px 11px; }
.csE-cell:last-child { border-right: none; }
.csE-k { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .22em; text-transform: uppercase; color: #888; }
.csE-v { font-family: var(--font-display); font-size: 19px; margin-top: 3px; }
.csE-v.klein { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; margin-top: 7px; }
.csE-fig { margin: 14px 44px 0; border: 1.5px solid #111; position: relative; height: 140px; overflow: hidden; }
.csE-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csE-fig img.photo { filter: grayscale(1) contrast(1.08) brightness(.9); }
.csE-cap { position: absolute; left: 0; bottom: 0; background: #111; color: #fff; font-family: var(--font-mono); font-size: 8px; letter-spacing: .18em; padding: 4px 10px; text-transform: uppercase; }

/* ---------- Vorlage G: Night Pass ---------- */
.csG-card { background: #0a0a0b; color: #fff; margin: 16px 16px 0; border-radius: 14px; padding: 26px 30px 22px; position: relative; overflow: hidden; }
.csG-card .csx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.csG-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,.35), rgba(10,10,11,.88)); }
.csG-in { position: relative; }
.csG-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.csG-brand { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; }
.csG-brand .motion { font-style: italic; text-shadow: 5px 0 8px rgba(255,255,255,.35); }
.csG-chip { border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 5px 14px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.csG-title { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; margin-top: 14px; line-height: .95; }
.csG-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #9a9a9f; margin-top: 8px; }
.csG-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; gap: 14px; flex-wrap: wrap; }
.csG-times { display: flex; gap: 24px; }
.csG-t .k { font-family: var(--font-mono); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: #888; }
.csG-t .v { font-family: var(--font-display); font-size: 23px; margin-top: 3px; }
.csG-code { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.csG-bar { height: 32px; width: 146px;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 6px, transparent 6px 11px, #fff 11px 14px, transparent 14px 17px); }
.csG-id { font-family: var(--font-mono); font-size: 8px; letter-spacing: .3em; color: #888; }
.csG-perfo { border-top: 2px dashed #ccc; margin: 18px 44px 0; }

/* ---------- Vorlage H: Art Print (zentriert & gerahmt) ---------- */
.csH-frame { position: absolute; inset: 14px; border: 1.5px solid #111; pointer-events: none; z-index: 3; }
.csH-head { text-align: center; padding: 46px 44px 8px; }
.csH-brand { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; }
.csH-brand .motion { font-style: italic; }
.csH-rule { width: 60px; height: 1px; background: #111; margin: 14px auto; }
.csH-title { font-family: var(--font-display); font-size: 48px; text-transform: uppercase; line-height: .96; }
.csH-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: #666; margin-top: 14px; }
.csH-times { display: flex; justify-content: center; gap: 44px; margin: 22px 44px 0; padding-bottom: 18px; border-bottom: 1px solid #111; }
.csH-t { text-align: center; }
.csH-t .k { font-family: var(--font-mono); font-size: 8px; letter-spacing: .24em; text-transform: uppercase; color: #999; }
.csH-t .v { font-family: var(--font-display); font-size: 26px; margin-top: 4px; }

/* ---------- Vorlage J: Ghost Type (übergroße Typo) ---------- */
.csJ-head { position: relative; height: 205px; overflow: hidden; border-bottom: 2px solid #111; }
.csJ-ghost {
  position: absolute; left: -12px; top: -56px; z-index: 0;
  font-family: var(--font-display); font-size: 250px; line-height: 1; white-space: nowrap;
  color: #f0f0ee; -webkit-text-stroke: 1px #e2e2df;
}
.csJ-in { position: relative; z-index: 1; padding: 28px 44px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.csJ-top { display: flex; justify-content: space-between; align-items: baseline; }
.csJ-brand { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; }
.csJ-brand .motion { font-style: italic; }
.csJ-doc { font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: #666; }
.csJ-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.csJ-title { font-family: var(--font-display); font-size: 32px; text-transform: uppercase; line-height: .95; max-width: 58%; }
.csJ-times { display: flex; gap: 22px; }
.csJ-t { text-align: right; }
.csJ-t .k { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .2em; text-transform: uppercase; color: #999; }
.csJ-t .v { font-family: var(--font-display); font-size: 23px; margin-top: 2px; }

/* ---------- Vorlage K: Spec Sheet (Ledger) ---------- */
.csK-head { padding: 34px 44px 0; }
.csK-brandrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.csK-brand { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; }
.csK-brand .motion { font-style: italic; }
.csK-no { font-family: var(--font-mono); font-size: 9px; letter-spacing: .26em; color: #666; text-transform: uppercase; }
.csK-ledger { border-top: 2px solid #111; }
.csK-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 11px 0 10px; border-bottom: 1px solid #ddd; }
.csK-row.major { border-bottom: 1px solid #111; }
.csK-k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: #888; white-space: nowrap; }
.csK-v { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; text-align: right; }
.csK-v.gross { font-size: 30px; }
.csK-v.mono2 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; text-transform: none; }

/* ---------- Vorlage M: Slate (Filmklappe) ---------- */
.csM-stripes { height: 22px; background: repeating-linear-gradient(-45deg, #0a0a0b 0 26px, #fff 26px 52px); border-bottom: 1.5px solid #111; }
.csM-stripes.unten { border-bottom: none; border-top: 1.5px solid #111; }
.csM-body { padding: 24px 44px 22px; background: #0a0a0b; color: #fff; }
.csM-brand { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; }
.csM-brand .motion { font-style: italic; text-shadow: 5px 0 8px rgba(255,255,255,.35); }
.csM-title { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; line-height: .95; margin-top: 10px; }
.csM-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #9a9a9f; margin-top: 6px; }
.csM-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.csM-f { border: 1px solid rgba(255,255,255,.35); padding: 8px 10px 7px; }
.csM-f .k { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .22em; text-transform: uppercase; color: #999; }
.csM-f .v { font-family: var(--font-display); font-size: 20px; margin-top: 2px; }

/* ---------- Vorlage U: Ultraviolet (Special Edition, lila Trails) ---------- */
:root { --uv: #7C3AED; --uv-hell: #A78BFA; }
.csU-head { position: relative; background: #0a0a0b; color: #fff; padding: 36px 44px 48px; overflow: hidden; }
.csU-head .csx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csU-ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,.25) 0%, rgba(10,10,11,.85) 92%); }
.csU-in { position: relative; }
.csU-nr {
  position: absolute; right: -6px; top: -30px; z-index: 0;
  font-family: var(--font-display); font-size: 160px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px var(--uv-hell); opacity: .55;
}
.csU-brand { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; }
.csU-brand .motion { font-style: italic; text-shadow: 6px 0 10px rgba(167,139,250,.65); }
.csU-chip {
  display: inline-block; margin-top: 14px; border: 1px solid var(--uv-hell); color: var(--uv-hell);
  border-radius: 999px; padding: 4px 13px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
}
.csU-title { font-family: var(--font-display); font-size: 40px; text-transform: uppercase; line-height: .96; margin-top: 12px; max-width: 82%; }
.csU-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 13px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #9a9a9f; }
.csU-meta b { color: #fff; }
.csU-times { display: flex; gap: 10px; margin: -26px 44px 0; position: relative; z-index: 2; }
.csU-time { flex: 1; background: #0a0a0b; color: #fff; border-radius: 9px; text-align: center; padding: 13px 6px 12px; border-bottom: 2.5px solid var(--uv); }
.csU-time .t-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: #8b8b90; }
.csU-time .t-value { font-family: var(--font-display); font-size: 25px; margin-top: 4px; }

/* ---------- Vorlage N: Negative (komplett invertiert) ---------- */
.paper.negativ { background-color: #0a0a0b; background-size: cover; background-position: center; color: #f2f2f0; }
.csN-head { padding: 38px 44px 4px; }
.csN-brand { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; }
.csN-brand .motion { font-style: italic; text-shadow: 6px 0 9px rgba(255,255,255,.4); }
.csN-title { font-family: var(--font-display); font-size: 44px; text-transform: uppercase; line-height: .95; margin-top: 16px; }
.csN-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #8f8f95; margin-top: 10px; }
.csN-times { display: flex; gap: 10px; margin: 20px 44px 0; }
.csN-time { flex: 1; border: 1px solid rgba(255,255,255,.32); border-radius: 9px; text-align: center; padding: 12px 6px 11px; }
.csN-time .t-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: #8b8b90; }
.csN-time .t-value { font-family: var(--font-display); font-size: 25px; margin-top: 3px; }
/* Invertierungs-Overrides für die gemeinsamen Inhalts-Sektionen */
.paper.negativ .cs-section h3 { color: #7c7c82; border-bottom-color: rgba(255,255,255,.22); }
.paper.negativ .cs-table th { color: #7c7c82; border-bottom-color: rgba(255,255,255,.32); }
.paper.negativ .cs-table td { border-bottom-color: rgba(255,255,255,.12); }
.paper.negativ .cs-kv .k { color: #8f8f95; }
.paper.negativ .cs-wetter .w-sub { color: #9a9aa0; }
.paper.negativ .cs-notes { color: #d9d9d6; }
.paper.negativ .cs-footer { border-top-color: rgba(255,255,255,.22); color: #8f8f95; }
.paper.negativ .cs-sbcell { border-color: rgba(255,255,255,.2); }
.paper.negativ .cs-sbph { background: #1a1a1e; color: #666; }
.paper.negativ .cs-sbcap { color: #9a9aa0; }
.paper.negativ .cs-sbgrouptitle { color: #b4b4ba; }
.paper.negativ .cs-sbgroupcount { color: #75757c; }
.paper.negativ .cs-lageplan { border-color: rgba(255,255,255,.25); }
.paper.negativ a { color: #f2f2f0; }

/* Tages-Timeline (automatisch + pro Callsheet anpassbar) */
.cst { margin: 24px 44px 4px; position: relative; height: 74px; }
.cst-line { position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: #111; }
.cst-line::after { content: ""; position: absolute; right: -1px; top: -3.5px; border: 4.5px solid transparent; border-left-color: #111; }
.cst-mark { position: absolute; transform: translateX(-50%); text-align: center; width: 86px; }
.cst-mark .t { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.cst-mark .k { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: #888; margin-top: 1px; white-space: nowrap; }
.cst-mark .dot { width: 8px; height: 8px; border-radius: 50%; background: #111; margin: 5px auto 0; }
.cst-mark.oben { top: 2px; }
.cst-mark.unten { top: 42px; }
.cst-mark.unten .dot { margin: 0 auto 5px; }
.cst-mark.sun .dot { background: #fff; border: 2px solid #111; width: 6px; height: 6px; }
.cst-mark.custom .t { text-decoration: underline 1px #bbb; text-underline-offset: 3px; }
.cs-head::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 220px;
  background: linear-gradient(90deg, #111 0%, rgba(17,17,17,.45) 34%, rgba(17,17,17,.1) 70%, transparent 100%);
}
.cs-brand { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; letter-spacing: .015em; }
.cs-brand .motion { font-style: italic; margin-left: 4px; }
.cs-brand-sub { font-size: 8.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #777; margin-top: 4px; }
.cs-title { text-align: right; }
.cs-title .cs-doc { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: .02em; }
.cs-title .cs-date { font-size: 12px; color: #555; margin-top: 3px; }

.cs-times { display: flex; gap: 10px; margin: 18px 0; }
.cs-time {
  flex: 1; border: 1px solid #ddd; border-radius: 8px; text-align: center; padding: 12px 6px;
}
.cs-time .t-label { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #888; }
.cs-time .t-value { font-family: var(--font-display); font-size: 24px; margin-top: 3px; }

.cs-section { margin: 18px 0; }
.cs-section h3 {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #888; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid #e5e5e5;
}
.cs-cols { display: flex; gap: 26px; }
.cs-cols > div { flex: 1; }
.cs-kv { display: grid; grid-template-columns: 110px 1fr; gap: 3px 10px; font-size: 12px; }
.cs-kv .k { color: #888; }

.cs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cs-table th {
  text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #888; padding: 4px 8px; border-bottom: 1px solid #ccc;
}
.cs-table td { padding: 6px 8px; border-bottom: 1px solid #eee; }
/* Parallelhandlung im PDF: eingerückt + linke Klammer-Linie */
.cs-table tr.cs-grp td {
  font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding-top: 14px; border-bottom: 1px solid #999;
}
.cs-table tr.dp-par td { box-shadow: inset 3px 0 0 #cfcfcf; color: #555; }
.cs-table tr.dp-par .dp-was { padding-left: 4px; }
.cs-table .dp-par-glyph { color: #999; }

/* Inline-Editierfelder im Callsheet (Vorschau: dezent; Druck: reiner Text) */
.cs-edit {
  font: inherit; color: inherit; background: transparent;
  border: none; border-bottom: 1px dashed transparent;
  padding: 1px 2px; box-sizing: border-box; border-radius: 3px;
}
.cs-table .cs-edit { width: 100%; }
.cs-edit:hover { background: rgba(0,0,0,.045); border-bottom-color: #cfcfcf; }
.cs-edit:focus { outline: none; background: rgba(0,0,0,.06); border-bottom-color: #888; }
.cs-edit-time { width: auto; min-width: 60px; }
/* Dauer im Tagesablauf: feste, schmale Breite — „1 h 30" passt einzeilig,
   der freie Platz der Tabelle geht an „Was" (siehe .cs-dp unten). */
.cs-table .cs-edit-dauer { width: 58px; min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.cs-table .nowrap { white-space: nowrap; }

/* Tagesablauf/Drehplan-Tabelle: Zeit- und Dauerspalten schrumpfen auf ihren
   Inhalt (width:1% + nowrap ist der Auto-Layout-Trick), „Was" bekommt den Rest.
   So klebt die Dauer an den Zeiten statt quer über die Seite zu wandern. */
.cs-dp th.cs-col-von,   .cs-dp td.cs-col-von,
.cs-dp th.cs-col-bis,   .cs-dp td.cs-col-bis,
.cs-dp th.cs-col-dauer, .cs-dp td.cs-col-dauer { width: 1%; white-space: nowrap; }
.cs-dp th.cs-col-was,   .cs-dp td.cs-col-was { width: 34%; }
.cs-notes.cs-edit-block { min-height: 1.3em; border-radius: 4px; padding: 2px 4px; }
.cs-notes.cs-edit-block:hover { background: rgba(0,0,0,.04); }
.cs-notes.cs-edit-block:focus { outline: none; background: rgba(0,0,0,.05); }

.cs-wetter { display: flex; gap: 18px; align-items: center; }
.cs-wetter .w-icon { font-size: 30px; }
.cs-wetter .w-main { font-size: 13px; font-weight: 600; }
.cs-wetter .w-sub { font-size: 11px; color: #666; margin-top: 2px; }
.cs-notes { white-space: pre-wrap; font-size: 12px; }
.cs-footer { margin-top: 26px; padding-top: 10px; border-top: 1px solid #e5e5e5; font-size: 10px; color: #999; display: flex; justify-content: space-between; }

/* ---------- Druck ---------- */
#printRoot { display: none; }

/* Mess-Modus: bestimmt vor dem Druck die Seitenzahl für den Fuß-Balken.
   Off-screen sichtbar, mit den gleichen Maßen wie im Druck. */
body.measuring #printRoot { display: block; position: absolute; left: -99999px; top: 0; width: 210mm; }
body.measuring #printRoot .paper { box-shadow: none; border-radius: 0; max-width: none; width: auto; padding: 0; font-size: 11.5px; }
body.measuring #printRoot .paper:not(.csx) { padding: 12mm 12mm 8mm; }
/* Callsheet im Mess-Modus wie im Druck: randlos, Sektionen mit 12 mm Rand — sonst
   stimmen die gemessenen Reihenhöhen des Storyboards nicht (Breite → Bildhöhe) */
body.measuring #printRoot .paper.csx { padding: 0 0 6mm; }
body.measuring #printRoot .paper.csx > .cs-section { margin-left: 12mm; margin-right: 12mm; }
body.measuring #printRoot .print-foot { display: none; }

@media print {
  body.printing { background: #fff; }
  body.printing .app, body.printing #toastHost { display: none !important; }
  body.printing #printRoot { display: block; }
  #printRoot .paper {
    box-shadow: none; border-radius: 0; max-width: none; width: auto;
    padding: 0; font-size: 11.5px;
  }
  #printRoot .cs-time .t-value { font-size: 20px; }

  /* Seite 1 randlos (Cover bleedet bis zur Kante), ab Seite 2 oben etwas Luft.
     Unten + seitlich bleibt 0 — dadurch zeichnet Chrome dort nie eine Fußzeile,
     der Dateipfad ist also immer weg (unabhängig vom „Kopf-/Fußzeilen"-Häkchen).
     Oben auf Folgeseiten gibt es einen Rand: liegt das Häkchen an, kann Chrome
     dort eine Datumszeile setzen — den Dateinamen fangen wir über den Dokument-
     titel ab (siehe printNode).
     ACHTUNG: Wegen der abweichenden :first-Ränder darf .print-foot NICHT
     position:fixed sein — Chrome wiederholt fixe Elemente dann nicht je Seite,
     sondern malt sie auf der letzten Seite OBEN über den Inhalt (sah aus wie
     „abgeschnittene“ Storyboard-Bilder). Darum steht der Fuß im Fluss am Ende. */
  @page { margin: 12mm 0 0; }
  @page :first { margin: 0; }
  #printRoot { padding-bottom: 8mm; }
  /* Nicht-Callsheet-PDFs (Shotlist/Drehplan, heller Kopf) brauchen eigene Ränder */
  #printRoot .paper:not(.csx) { padding: 12mm 12mm 8mm; }

  /* Eigene Fußzeile (Erstellt am … · Seitenzahl) — im Fluss am Dokumentende,
     nicht fixiert (siehe oben). */
  #printRoot .print-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin: 6mm 12mm 0; padding-top: 6px; border-top: 1px solid #e8e8e8;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 8.5px; letter-spacing: .03em; color: #9a9a9a;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Dunkle Flächen + Bilder auch im Druck erzwingen (alle Vorlagen) */
  #printRoot .csx-head, #printRoot .csx-time, #printRoot .csx-bg, #printRoot .csx-ov,
  #printRoot .csD-head, #printRoot .csD-ov, #printRoot .csG-card, #printRoot .csG-ov,
  #printRoot .csG-bar, #printRoot .csE-head, #printRoot .csE-cap,
  #printRoot .csM-stripes, #printRoot .csM-body, #printRoot .csJ-ghost {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #printRoot .csD-head, #printRoot .csG-card, #printRoot .csE-head, #printRoot .csE-fig,
  #printRoot .csB-head, #printRoot .csC-head, #printRoot .csH-head, #printRoot .csH-times,
  #printRoot .csJ-head, #printRoot .csK-head, #printRoot .csM-body, #printRoot .csM-stripes
  { break-inside: avoid; page-break-inside: avoid; }
  /* Randlos-Anpassungen der neuen Vorlagen */
  #printRoot .csH-frame { inset: 5mm; }
  #printRoot .csH-head { padding: 12mm 12mm 8px; }
  #printRoot .csH-times { margin: 22px 12mm 0; }
  #printRoot .csJ-in { padding: 28px 12mm; }
  #printRoot .csK-head { padding: 12mm 12mm 0; }
  #printRoot .csM-body { padding: 24px 12mm 22px; }

  /* Ultraviolet + Negative: dunkle Flächen erzwingen, Ränder angleichen */
  #printRoot .csU-head, #printRoot .csU-time, #printRoot .csU-ov, #printRoot .csU-head .csx-bg,
  #printRoot .paper.negativ, #printRoot .csN-time {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #printRoot .csU-head { padding: 36px 12mm 48px; break-inside: avoid; page-break-inside: avoid; }
  #printRoot .csU-times { margin: -26px 12mm 0; break-inside: avoid; page-break-inside: avoid; }
  #printRoot .csN-head { padding: 12mm 12mm 4px; break-inside: avoid; page-break-inside: avoid; }
  #printRoot .csN-times { margin: 20px 12mm 0; break-inside: avoid; page-break-inside: avoid; }
  #printRoot .paper.negativ { background-color: #0a0a0b !important; }
  /* Callsheet randlos: dunkle Köpfe bleeden bis zur Kante, Inhalt mit 12 mm Rand */
  #printRoot .paper.csx { padding: 0 0 6mm; }
  #printRoot .paper.csx > .cs-section { margin-left: 12mm; margin-right: 12mm; }
  #printRoot .paper.csx > .cs-footer { margin: 8mm 12mm 0; }
  #printRoot .csx-head { margin: 0; border-radius: 0; padding: 36px 12mm 52px; }
  #printRoot .csx-times { margin: -26px 12mm 0; }
  #printRoot .csD-txt { left: 12mm; right: 12mm; }
  #printRoot .csB-head { padding: 10mm 12mm 0; }
  #printRoot .csC-head { padding: 10mm 12mm 22px; }
  #printRoot .csC-meta { margin: 12px 12mm 0; }
  #printRoot .csE-head { padding: 10mm 12mm 20px; }
  #printRoot .csE-fig { margin-left: 12mm; margin-right: 12mm; }
  #printRoot .csG-card { margin: 0 0 4px; border-radius: 0; }
  #printRoot .csG-perfo { margin: 18px 12mm 0; }
  #printRoot .cst { margin: 22px 12mm 4px; break-inside: avoid; page-break-inside: avoid; }
  #printRoot .csx-head, #printRoot .csx-times { break-inside: avoid; page-break-inside: avoid; }

  /* Smarte Seitenumbrüche: JEDE Sektion als Ganzes halten — kurze wandern
     komplett auf die nächste Seite statt zu verwaisen; nur echt überlange
     brechen um (dann sauber zwischen ganzen Zeilen). page-break-* als
     Fallback für den Chrome-Druckpfad. */
  #printRoot .cs-section { break-inside: avoid; page-break-inside: avoid; }
  /* Storyboard kann lang werden: Sektion UND Gruppe dürfen über Seiten laufen.
     Zusammengehalten wird nur je eine Reihe (.cs-sbgrid = 4 Frames) — die passt
     immer auf eine Seite. Ein avoid auf der ganzen Gruppe wäre bei mehr als
     einer Seite Frames nicht einhaltbar, und dann schneidet Chrome beliebig,
     auch mitten durch Karte und Bild. Der Gruppentitel bleibt bei seiner ersten Reihe. */
  #printRoot .cs-section.cs-sbsec { break-inside: auto; page-break-inside: auto; }
  #printRoot .cs-sbgroup, #printRoot .cs-sbrows { break-inside: auto; page-break-inside: auto; }
  #printRoot .cs-sbgrouptitle { break-after: avoid; page-break-after: avoid; }
  #printRoot .cs-section h3 { break-after: avoid; page-break-after: avoid; }
  #printRoot .cs-table thead { display: table-header-group; } /* Kopfzeile auf Folgeseiten */
  #printRoot .cs-table tr,
  #printRoot .cs-crew tr,
  #printRoot .cs-locblock,
  #printRoot .cs-sbcell,
  #printRoot .cs-sbgrid,
  #printRoot .cs-cols,
  #printRoot .cs-times { break-inside: avoid; page-break-inside: avoid; }
  #printRoot img { break-inside: avoid; max-width: 100%; }

  /* Inline-Editierfelder: im PDF wie normaler Text (kein Rahmen, keine Icons) */
  #printRoot .cs-edit { border: none !important; background: transparent !important; padding: 0 !important; }
  #printRoot .cs-edit-time { min-width: 0; }
  #printRoot .cs-edit::-webkit-calendar-picker-indicator,
  #printRoot .cs-edit::-webkit-inner-spin-button { display: none; -webkit-appearance: none; }
  #printRoot .cs-notes.cs-edit-block { padding: 0 !important; background: transparent !important; }
}

/* ============================================================
   Responsive (steht am Ende, damit es die Basis-Regeln überschreibt)
   ============================================================ */
/* Handy & schmales iPad: Sidebar wird zur Kopfleiste mit wischbarer
   Navigation, Projekt/Ordner hinter ☰. */
.menu-toggle { display: none; }
@media screen and (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 60;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-right: none; border-bottom: 1px solid var(--border);
    background: rgba(7,7,8,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    overflow: visible;
  }
  .brand { padding: 0; }
  .brand::after, .brand-sub { display: none; }
  .brand-name { font-size: 20px; }
  .menu-toggle {
    display: inline-flex; margin-left: auto; align-items: center; justify-content: center;
    width: 38px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
    background: transparent; color: var(--text); font-size: 17px; cursor: pointer;
  }
  .sidenav {
    order: 3; width: 100%; flex-direction: row; gap: 4px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px;
  }
  .sidenav::-webkit-scrollbar { display: none; }
  .sidenav .nav-label { display: none; }
  .nav-item { width: auto; flex: none; padding: 8px 12px; font-size: 13px; }
  .sidebar-footer { display: none; order: 4; width: 100%; margin-top: 0; padding-top: 10px; }
  .sidebar.offen .sidebar-footer { display: flex; }
  .main { padding: 18px 14px 70px; }
  .panel { overflow-x: auto; }
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-panel { max-height: 100vh; border-radius: 0; }
}
body.ohne-ordner .nur-ordner { display: none; }

/* ============================================================
   Set-Modus: Handy-Ansicht (sethandy.js) — ein Bildschirm, ein Daumen.
   Steht am Ende, damit sie das Handy-Layout oben überschreibt.
   Solange sie offen ist, verschwindet die Kopfleiste (Menü ☰ in der Ansicht).
   ============================================================ */
body:has(#view-set.active .smh) { overscroll-behavior: none; }
body:has(#view-set.active .smh) .sidebar { display: none; }
body:has(#view-set.active .smh) .main { padding: 0; max-width: none; }
body:has(#view-set.active .smh) #toastHost { top: calc(env(safe-area-inset-top) + 62px); bottom: auto; }

.smh {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "status" "shot" "next" "takes" "rate" "actions";
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto;
  height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.smh button { font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }

/* Kopf: Menü, Projekt, Sync-Punkt, Uhr — darunter der Motion-Streak */
.smh-top { grid-area: top; position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.smh-top::after { content: ""; position: absolute; left: 12px; bottom: 0; width: 46%; height: 1px; background: var(--streak); }
.smh-menu { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 18px; }
.smh-titel { flex: 1; min-width: 0; }
.smh-titel .p { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smh-titel .d { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smh-uhr { font-family: var(--font-mono); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.smh-sync { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.smh-sync.on { background: var(--ok); }
.smh-sync.warn { background: var(--warn); }
.smh-sync.err { background: var(--danger); }

/* Status: Timeline + Chips (Block-Fortschritt, Verzug, Soll, Shots, Sunset) */
.smh-status { grid-area: status; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 8px; }
.smh-status .sm-timeline { height: 10px; }
.smh-status .sm-tlseg { top: 2px; bottom: 2px; }
.smh-status .sm-tlnow { top: -4px; bottom: -4px; }
.smh-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
.smh-chips::-webkit-scrollbar { display: none; }
.smh-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel2); color: var(--text); font-size: 12.5px; white-space: nowrap;
}
.smh-chip[hidden] { display: none; }
.smh-chip b { font-family: var(--font-mono); font-weight: 600; }
.smh-chip.leise { color: var(--muted); }
.smh-chip.ok { color: var(--ok); }
.smh-chip.warn { color: var(--warn); border-color: rgba(217,161,60,.45); }
.smh-chip.danger { color: var(--danger); border-color: rgba(224,92,92,.5); }
.smh-chip.cta { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
.smh-live { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: smh-puls 1.6s ease-in-out infinite; }
@keyframes smh-puls { 50% { opacity: .35; } }

/* Aktueller Shot: Frame + kompletter Text, scrollt als Ganzes */
.smh-shot {
  grid-area: shot; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 2px 12px 12px; touch-action: pan-y; transition: transform .18s ease;
}
.smh-shot.rein-rechts { animation: smh-rein-r .22s ease-out; }
.smh-shot.rein-links { animation: smh-rein-l .22s ease-out; }
@keyframes smh-rein-r { from { transform: translateX(34px); opacity: .3; } }
@keyframes smh-rein-l { from { transform: translateX(-34px); opacity: .3; } }
.smh-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.smh-frame img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.smh-frame.ohne { aspect-ratio: auto; height: 78px; background: var(--panel2); }
.smh-frame.ohne .pos { top: auto; bottom: 10px; right: 44px; }
.smh-frame.ohne .ph { display: none; }
.smh-frame.ohne .nr { left: 30px; background: none; padding-bottom: 12px; }
.smh-frame .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.smh-frame .nr {
  position: absolute; left: 0; bottom: 0; padding: 10px 14px 8px; border: none; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
  color: #fff; font-family: var(--font-display); font-size: 32px; line-height: 1; letter-spacing: .02em; text-align: left;
}
.smh-frame .nr .pfeil { font-family: -apple-system, sans-serif; font-size: 13px; margin-left: 6px; opacity: .7; vertical-align: middle; }
.smh-frame .pos { position: absolute; right: 8px; top: 8px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.8); background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 999px; }
.smh-frame .kasten { position: absolute; left: 8px; top: 8px; background: var(--ok); color: #08130d; font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 999px; }
.smh-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 54px; border: none; background: rgba(0,0,0,.35); color: #fff; font-size: 24px; line-height: 1; }
.smh-pfeil.l { left: 0; border-radius: 0 10px 10px 0; }
.smh-pfeil.r { right: 0; border-radius: 10px 0 0 10px; }
.smh-text { margin-top: 12px; -webkit-user-select: text; user-select: text; }
.smh-desc { font-size: 18px; line-height: 1.42; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.smh-feld { margin-top: 12px; }
.smh-feld .k, .smh-k, .smh-next .k { font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.smh-feld .v { margin-top: 3px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.smh-specs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.smh-notizen { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.smh-notizen .n, .smh-nzeile { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; padding: 7px 9px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--border); }
.smh-notizen .z, .smh-nzeile .z { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.smh-notizen .x, .smh-nzeile .x { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.smh-leer { margin: 40px 12px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Nächster Shot: schmale Vorschau, Tipp = jetzt drehen */
.smh-next {
  grid-area: next; display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 7px 10px; min-height: 50px;
  border-radius: 11px; border: 1px dashed var(--border-strong); background: transparent; color: var(--text); text-align: left;
}
.smh-next.leer { border-style: solid; border-color: var(--border); color: var(--muted); font-size: 12.5px; }
.smh-next:empty { display: none; }
.smh-next img, .smh-next .ph { flex: none; width: 60px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; border: 1px solid var(--border); }
.smh-next .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.smh-next .t { font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.smh-next .go { font-size: 22px; color: var(--muted); }

/* Takes des Shots */
.smh-takes { grid-area: takes; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; }
.smh-takes::-webkit-scrollbar { display: none; }
.smh-hinweis { font-size: 12.5px; color: var(--muted); }
.smh-take {
  position: relative; flex: none; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font-family: var(--font-mono) !important; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.smh-take.fav { background: #ffd60a; border-color: #ffd60a; color: #171204; }
.smh-take.ok { background: var(--ok); border-color: var(--ok); color: #08130d; }
.smh-take.ng { background: var(--danger); border-color: var(--danger); color: #1a0808; }
.smh-take.offen { border-style: dashed; color: var(--muted); }
.smh-take.undo { font-family: inherit !important; font-weight: 600; background: transparent; border-color: var(--border-strong); }
.smh-take .mehr { position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }

/* Die drei Daumen-Buttons */
.smh-rate { grid-area: rate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 0; }
.smh-rbtn {
  height: 80px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--panel2); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: transform .08s ease, background .15s ease;
}
.smh-rbtn .i { font-size: 30px; line-height: 1; }
.smh-rbtn .l { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.smh-rbtn.fav .i { color: #ffd60a; }
.smh-rbtn.ok .i { color: var(--ok); }
.smh-rbtn.ng .i { color: var(--danger); }
.smh-rbtn:active { transform: scale(.96); }
.smh-rbtn:disabled { opacity: .35; }
.smh-rbtn.on.fav { background: #ffd60a; border-color: #ffd60a; }
.smh-rbtn.on.ok { background: var(--ok); border-color: var(--ok); }
.smh-rbtn.on.ng { background: var(--danger); border-color: var(--danger); }
.smh-rbtn.on .i, .smh-rbtn.on .l { color: #111; }
/* Kurzer Farbblitz nach dem Tipp (Bestätigung aus dem Augenwinkel) */
.smh-rbtn { position: relative; overflow: hidden; }
.smh-rbtn.blitz::after { content: ""; position: absolute; inset: 0; opacity: 0; animation: smh-blitz .7s ease-out; }
.smh-rbtn.blitz.fav::after { background: #ffd60a; }
.smh-rbtn.blitz.ok::after { background: var(--ok); }
.smh-rbtn.blitz.ng::after { background: var(--danger); }
@keyframes smh-blitz { 0% { opacity: .95; } 100% { opacity: 0; } }
.smh-rate.klein { padding: 6px 0 4px; }
.smh-rate.klein .smh-rbtn { height: 64px; }

/* Notiz + Im Kasten */
.smh-actions { grid-area: actions; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 12px 10px; }
.smh-abtn {
  height: 52px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel2); color: var(--text);
  font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.smh-abtn.primary { background: #fff; color: #111; border-color: #fff; }
.smh-abtn.gefahr { color: var(--danger); }
.smh-abtn.voll { width: 100%; margin-top: 10px; }
.smh-abtn:disabled { opacity: .35; }
.smh-abtn .n { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.12); }

/* Blätter (Notiz/Take oben, damit die Tastatur sie nicht verdeckt; Listen unten) */
.smh-sheet-bg { position: fixed; inset: 0; z-index: 950; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(0,0,0,.6); }
.smh-sheet-bg.oben { justify-content: flex-start; }
.smh-sheet {
  width: 100%; max-width: 560px; margin: 0 auto; max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--border-strong); border-bottom: none; border-radius: 18px 18px 0 0;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px rgba(0,0,0,.6);
}
.smh-sheet-bg.oben .smh-sheet { border-radius: 0 0 18px 18px; border-top: none; border-bottom: 1px solid var(--border-strong); padding: calc(14px + env(safe-area-inset-top)) 14px 16px; }
.smh-sheet-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.smh-sheet-kopf .t { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.smh-x, .smh-mini { flex: none; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 10px; }
.smh-x { width: 40px; height: 40px; font-size: 16px; }
.smh-mini { width: 30px; height: 30px; font-size: 12px; }
.smh-k { margin: 16px 0 8px; }
.smh-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.smh-wbtn { height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); font-size: 13.5px; }
.smh-wbtn.on { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
.smh-notiz, .smh-cmt, .smh-select {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--panel2); color: var(--text); font: inherit; font-size: 17px;   /* ≥ 16 px: iOS zoomt sonst beim Tippen */
}
.smh-notiz { min-height: 104px; resize: vertical; line-height: 1.4; }
.smh-select { margin-top: 0; }
.smh-tipp { margin-top: 8px; font-size: 12px; color: var(--muted); }
.smh-sheet-fuss { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 18px; }
.smh-zeile {
  display: flex; align-items: baseline; gap: 10px; width: 100%; margin-bottom: 4px; padding: 11px 12px; text-align: left;
  border-radius: 11px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); font-size: 14px;
}
.smh-zeile .nr { flex: none; min-width: 26px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.smh-zeile .x { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smh-zeile .m { flex: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.smh-zeile.akt { border-color: #fff; box-shadow: inset 3px 0 0 #fff; }
.smh-zeile.fertig { opacity: .55; }
.smh-zeile .smh-sync { align-self: center; }

/* Handy quer: Shot links, Bedienung rechts */
@media (orientation: landscape) and (max-height: 500px) {
  .smh {
    max-width: none;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "top top" "shot status" "shot takes" "shot rate" "next actions";
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }
  .smh-rbtn { height: auto; min-height: 56px; }
  .smh-rate { padding-bottom: 2px; }
  .smh-next { margin-bottom: 10px; }
  .smh-desc { font-size: 16px; }
  .smh-frame { max-height: 48vh; margin: 0 auto; }
}

/* ============================================================
   Crew-Link (crewlink.js): Callsheet zum Lesen am Handy, ohne Login
   ============================================================ */
body.crew-modus { background: var(--bg); }
.crewlink-url { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--panel2); font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; -webkit-user-select: all; user-select: all; }
.crew { max-width: 620px; margin: 0 auto; padding: 0 0 calc(30px + env(safe-area-inset-bottom)); }
.crew a { color: var(--text); }
.crew-kopf {
  position: relative; padding: calc(22px + env(safe-area-inset-top)) 18px 26px;
  background-size: cover; background-position: center; border-bottom: 1px solid var(--border);
}
.crew-kopf .brand-name { font-size: 18px; }
.crew-doc { margin-top: 18px; font-size: 9.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.crew-kopf h1 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.crew-meta { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.8); }
.crew-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: -16px 14px 0; position: relative; }
.crew-kachel { background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px; padding: 10px 12px; }
.crew-kachel .k { font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-kachel .v { margin-top: 3px; font-family: var(--font-mono); font-size: 20px; font-weight: 600; }
.crew-hinweis { margin: 12px 14px 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; border: 1px solid var(--border); }
.crew-hinweis.warn { color: var(--warn); border-color: rgba(217,161,60,.45); }
.crew-sek { margin: 12px 14px 0; padding: 14px 14px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.crew-sek h2 { margin: 0 0 10px; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.crew-sek .s { margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.crew-sek .b { font-weight: 700; font-size: 15px; }
.crew-text { font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.crew-wetter { display: flex; gap: 12px; align-items: center; }
.crew-wetter .i { font-size: 30px; }
.crew-loc { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.crew-btn { align-self: flex-start; margin: 6px 0 2px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--panel2); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.crew-kv { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; }
.crew-kv:first-of-type { border-top: none; }
.crew-kv .k { flex: none; width: 82px; color: var(--muted); font-size: 12px; padding-top: 2px; }
.crew-block { margin: 12px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crew-person { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.crew-sek h2 + .crew-person, .crew-block + .crew-person { border-top: none; }
.crew-person .wer { flex: 1; min-width: 0; }
.crew-person .wann { flex: none; font-family: var(--font-mono); font-size: 13px; }
.crew-tel { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); background: var(--panel2); text-decoration: none; font-size: 17px; }
.crew-tel.leer { visibility: hidden; }
.crew-dp { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.crew-sek h2 + .crew-dp { border-top: none; }
.crew-dp .z { flex: none; width: 92px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); padding-top: 1px; }
.crew-dp .x { flex: 1; min-width: 0; }
.crew-dp.par { border-top: none; padding-top: 0; }
.crew-dp.par .z { text-align: right; padding-right: 12px; }
.crew-dp.par .x { color: var(--muted); font-size: 13px; }
.crew-fuss { margin: 18px 14px 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.crew-leer { max-width: 360px; margin: 30vh auto 0; padding: 0 24px; text-align: center; color: var(--muted); line-height: 1.5; }
.crew-leer .brand-name { font-size: 24px; color: var(--text); margin-bottom: 14px; }