/* Schaltpult: Werkzeug 12 „Video-Baukasten“ (Präfix spv-).
   Farben nur aus dem Siegel (Tokens aus site.css und schaltpult.css). Die Geräte (Handy, Feed, Fernseher) haben feste,
   dunkle Siegel-Töne: Sie sehen beim Kunden in hell und dunkel gleich aus. Das Video selbst zeichnet schaltpult-video.js. */

.spv [hidden]{display:none!important}
.spv-feld{display:flex;flex-direction:column;gap:8px;min-width:0}
.spv-feld-name{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;font-weight:600}
.spv-feld-name small{font-weight:400;font-size:13px;color:var(--muted);font-family:var(--f-mono);white-space:nowrap}

/* ---------- Klick 1: Format und Länge ---------- */
.spv-seg-format label>span,.spv-seg-laenge label>span{flex-direction:column;gap:2px;line-height:1.1;padding:6px 4px;min-height:58px}
.spv-seg-format b,.spv-seg-laenge b{font-family:var(--f-display);font-size:19px;line-height:1}
.spv-seg-format small,.spv-seg-laenge small{display:block;font-size:11px;font-weight:600;letter-spacing:.01em;opacity:.9;text-wrap:balance}
.spv-seg-format{border-radius:22px}
.spv-seg-format label>span{border-radius:18px}
.spv-form{display:block;flex:none;border:2px solid currentColor;border-radius:3px;opacity:.85;margin-bottom:2px}
.spv-form-hoch{width:11px;height:19px}
.spv-form-quadrat{width:16px;height:16px}
.spv-form-quer{width:22px;height:13px}

/* ---------- Klick 2: Szenen mit Foto und Reihenfolge ---------- */
.spv-szenen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:spv}
.spv-szene{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:stretch;counter-increment:spv}
.spv-haken>span{min-height:52px;padding-top:5px;padding-bottom:5px}
.spv-haken img{flex:none;width:42px;height:42px;border-radius:10px;object-fit:cover}
/* Ohne eigenes Foto (geplante Motive, Prompt 58): Siegel auf Waldgrün */
.spv-bild-siegel{flex:none;width:42px;height:42px;border-radius:10px;background:var(--logo-gruen) url("../img/logo-klein.webp") center/74% no-repeat;box-shadow:inset 0 0 0 2px var(--logo-gold)}
.spv-szene.ist-raus .spv-bild-siegel{filter:grayscale(.8);opacity:.7}
.spv-haken-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.spv-haken-text b{font-weight:700}
.spv-haken-text small{font-weight:400;font-size:12.5px;color:var(--muted)}
.spv-passt{align-self:flex-start;margin-top:3px;padding:1px 8px;border-radius:999px;font-style:normal;font-size:11.5px;font-weight:700;background:var(--rot);color:var(--sp-auf)}
.spv-szene.ist-raus .spv-haken>span{border-style:dashed;background:var(--surface)}
.spv-szene.ist-raus .spv-haken img{filter:grayscale(.8);opacity:.7}
.spv-ordnen{display:flex;flex-direction:column;gap:4px}
.spv-pfeil{display:grid;place-items:center;width:40px;flex:1;min-height:24px;padding:0;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.spv-pfeil:hover:not(:disabled){border-color:var(--sp-farbe);background:var(--sp-hell)}
.spv-pfeil:active:not(:disabled){transform:scale(.92)}
.spv-pfeil:disabled{opacity:.3;cursor:default}
.spv-pfeil:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.spv-neu a{color:var(--fg);font-weight:700;text-decoration-color:var(--sp-farbe);text-decoration-thickness:2px;text-underline-offset:3px}
.spv-schalter-liste{display:flex;flex-direction:column;gap:2px}

/* ---------- Vorschau: Bühne ---------- */
.spv-buehne{display:flex;flex-direction:column;gap:12px}
.spv-status{position:relative;z-index:1;margin:0;font-size:14px;line-height:1.45;color:var(--logo-creme)}
.spv-wochen{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.spv-woche{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:48px;padding:6px 4px;border-radius:12px;border:1.5px solid rgba(249,239,220,.35);background:rgba(249,239,220,.06);color:var(--logo-creme);font:inherit;line-height:1.15;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s}
.spv-woche b{font-size:13.5px}
.spv-woche small{font-family:var(--f-mono);font-size:11px;opacity:.85}
.spv-woche-datum{white-space:nowrap}
.spv-woche:hover:not(:disabled){border-color:var(--logo-gold)}
.spv-woche[aria-pressed="true"]{background:var(--logo-gold);border-color:var(--logo-gold);color:var(--logo-gruen);transform:translateY(-1px)}
.spv-woche:disabled{opacity:.45;cursor:default}
.spv-woche:focus-visible{outline:3px solid var(--logo-creme);outline-offset:2px}
.spv-wochen-tipp{position:relative;z-index:1;margin:-4px 0 0;font-size:13px;line-height:1.4;color:rgba(249,239,220,.85)}

/* ---------- Player und Geräte ---------- */
.spv-player{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.spv-geraet{position:relative;width:100%;min-width:0}
.spv-bild{position:relative;overflow:hidden;background:#06150E}
.spv-leinwand{display:block;width:100%;height:auto;aspect-ratio:9/16}
.ist-quadrat .spv-leinwand{aspect-ratio:1}
.ist-quer .spv-leinwand{aspect-ratio:16/9}
/* Handy für 9:16 */
.ist-hoch .spv-geraet{width:min(100%,262px);padding:10px;border-radius:36px;background:#06150E;box-shadow:0 0 0 2px rgba(246,175,47,.55),0 30px 46px -26px #000}
.ist-hoch .spv-geraet::before{content:"";position:absolute;left:50%;top:17px;z-index:2;width:62px;height:7px;margin-left:-31px;border-radius:4px;background:#06150E;box-shadow:0 0 0 2px rgba(249,239,220,.1)}
.ist-hoch .spv-bild{border-radius:27px}
/* Feed-Beitrag für 1:1 */
.spv-feedkopf,.spv-feedfuss{display:none}
.ist-quadrat .spv-geraet{width:min(100%,340px);border-radius:16px;overflow:hidden;background:var(--logo-creme);color:var(--logo-gruen);box-shadow:0 30px 46px -26px #000}
.ist-quadrat .spv-feedkopf{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px;line-height:1.1}
.ist-quadrat .spv-feedkopf b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ist-quadrat .spv-feedkopf small{margin-left:auto;font-size:11px;opacity:.7;white-space:nowrap}
.spv-feedkopf-bild{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--logo-gold);background:var(--logo-gruen) url("../img/logo-klein.webp") center/78% no-repeat}
.ist-quadrat .spv-feedfuss{display:flex;gap:12px;padding:9px 12px 11px}
.spv-feedfuss i{width:18px;height:18px;border:2px solid var(--logo-gruen);border-radius:50%}
.spv-feedfuss i:nth-child(2){border-radius:5px 5px 5px 1px}
.spv-feedfuss i:nth-child(3){border-radius:2px;transform:rotate(45deg) scale(.85)}
/* Fernseher für 16:9 */
.ist-quer .spv-geraet{border:8px solid #06150E;border-bottom-width:13px;border-radius:12px;background:#06150E;box-shadow:0 0 0 2px rgba(246,175,47,.45),0 28px 44px -24px #000}
.spv-fuss{display:none}
.ist-quer .spv-fuss{display:block;width:26%;height:14px;margin-top:-8px;background:linear-gradient(rgba(246,175,47,.55),rgba(246,175,47,.2));clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
/* Großer Abspiel-Knopf über dem Bild */
.spv-gross{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;padding:0 0 0 4px;border-radius:50%;border:3px solid var(--logo-creme);background:rgba(246,175,47,.9);color:var(--logo-gruen);cursor:pointer;box-shadow:0 12px 28px -10px #000;transition:transform .2s}
.spv-gross:hover{transform:scale(1.07)}
.spv-gross svg{width:28px;height:28px}
.spv-gross:focus-visible{outline:3px solid var(--logo-creme);outline-offset:4px}

/* Steuerleiste */
.spv-steuer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;width:100%}
.spv-knopf{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:2px solid var(--logo-gold);background:rgba(249,239,220,.08);color:var(--logo-creme);cursor:pointer;transition:background .2s,transform .15s}
.spv-knopf:hover{background:var(--logo-gold);color:var(--logo-gruen)}
.spv-knopf:active{transform:scale(.92)}
.spv-knopf:focus-visible{outline:3px solid var(--logo-creme);outline-offset:2px}
.spv-zeichen-pause{display:none}
.ist-spielt .spv-zeichen-pause{display:inline}
.ist-spielt .spv-zeichen-play{display:none}
.spv-zeit{font-family:var(--f-mono);font-size:14px;color:var(--logo-creme);font-variant-numeric:tabular-nums;white-space:nowrap}
.spv-takt{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;background:rgba(249,239,220,.1);color:rgba(249,239,220,.9);font-size:12px;white-space:nowrap}
.spv-takt-punkt{width:9px;height:9px;border-radius:50%;background:var(--logo-gold)}
.ist-spielt .spv-takt-punkt{animation:spv-takt var(--takt,.6s) ease-out infinite}
@keyframes spv-takt{0%{transform:scale(1.5);box-shadow:0 0 0 0 rgba(246,175,47,.6)}70%{transform:scale(1);box-shadow:0 0 0 7px rgba(246,175,47,0)}100%{transform:scale(1)}}

/* Zeitleiste mit Kapiteln */
.spv-zeitleiste{position:relative;width:100%;padding:4px 0}
.spv-kapitel{display:flex;gap:3px;width:100%}
.spv-kap{flex:var(--anteil,1) 1 0%;min-width:0;height:32px;padding:0 6px;border:0;border-radius:6px;background:rgba(249,239,220,.12);color:rgba(249,239,220,.9);font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.spv-kap-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spv-kap:hover{background:rgba(249,239,220,.24)}
.spv-kap.ist-jetzt{background:var(--logo-gold);color:var(--logo-gruen)}
.spv-kap-intro,.spv-kap-abspann{background:rgba(91,26,98,.55)}
.spv-kap:focus-visible{outline:3px solid var(--logo-creme);outline-offset:2px}
.spv-kopf{position:absolute;top:0;bottom:0;left:var(--pos,0%);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--logo-creme);box-shadow:0 0 0 1px rgba(6,21,14,.6);pointer-events:none}

/* ---------- Video erzeugen ---------- */
.spv-export{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;border-radius:14px;border:1.5px dashed rgba(246,175,47,.55);background:rgba(6,21,14,.35)}
.spv-erzeugen{min-height:46px}
.spv-export-text{flex:1 1 220px;margin:0;font-size:13px;line-height:1.45;color:rgba(249,239,220,.9)}
.spv-balken{flex-basis:100%;order:3;height:8px;border-radius:999px;background:rgba(249,239,220,.15);overflow:hidden}
.spv-balken span{display:block;width:var(--anteil,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--logo-gold),var(--logo-creme))}
.spv-laden{order:4;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--logo-creme);color:var(--logo-gruen);font-weight:700;text-decoration:none}
.spv-laden::before{content:"";width:10px;height:10px;margin-right:9px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg)}
.spv-laden:hover{background:var(--logo-gold)}
.spv-laden:focus-visible{outline:3px solid var(--logo-gold);outline-offset:3px}

/* ---------- Drehbuch (Textalternative) ---------- */
.spv-drehbuch{position:relative;z-index:1;border-radius:12px;background:rgba(249,239,220,.07);color:var(--logo-creme);font-size:13px;line-height:1.45}
.spv-drehbuch summary{min-height:44px;display:flex;align-items:center;padding:8px 14px;font-weight:700;cursor:pointer}
.spv-drehbuch summary:focus-visible{outline:3px solid var(--logo-creme);outline-offset:2px;border-radius:12px}
.spv-drehbuch ol{margin:0;padding:0 14px 12px 34px;display:flex;flex-direction:column;gap:6px}
.spv-db{padding:4px 8px;border-radius:8px;border-left:3px solid transparent}
.spv-db.ist-jetzt{border-left-color:var(--logo-gold);background:rgba(246,175,47,.12)}
.spv-db span,.spv-db b{display:block}
.spv-db-zeit{font-family:var(--f-mono);font-weight:400;font-size:12px;color:var(--logo-gold)}
.spv-db-name{font-weight:700}
.spv-db-unter{font-style:italic;opacity:.9}

/* ---------- Kanal-Vorschau: Titelbild mit Abspiel-Zeichen ---------- */
.spv-kv{position:absolute;inset:0;display:block;overflow:hidden;background:var(--logo-gruen);color:var(--logo-creme)}
.spv-kv>img{width:100%;height:100%;object-fit:cover;display:block}
.spv-kv::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(6,21,14,.85))}
.spv-kv-band{position:absolute;left:0;top:10px;z-index:1;padding:3px 14px 3px 8px;background:var(--logo-lila);color:var(--logo-creme);font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%)}
.spv-kv-play{position:absolute;left:50%;top:44%;z-index:1;display:grid;place-items:center;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--logo-gold);color:var(--logo-gruen);box-shadow:0 0 0 3px rgba(249,239,220,.6)}
.spv-kv-play .sp-icon{width:20px;height:20px;margin-left:3px}
.spv-kv-dauer{position:absolute;right:7px;top:9px;z-index:1;padding:1px 7px;border-radius:999px;background:rgba(6,21,14,.75);font-family:var(--f-mono);font-size:10px}
.spv-kv-titel{position:absolute;left:8px;right:8px;bottom:7px;z-index:1;font-family:var(--f-display);font-weight:700;font-size:13px;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.kv-tiktok .spv-kv-titel{bottom:auto;top:34px}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:420px){
  .spv-seg-format small{font-size:10px}
  .spv-woche b{font-size:12px}
  .spv-woche small{font-size:10px}
  .spv-takt{font-size:11px}
  .spv-haken img,.spv-bild-siegel{width:36px;height:36px}
  .spv-kap{font-size:10px;padding:0 3px}
  .spv-export{padding:10px}
}

@media (prefers-reduced-motion: reduce){
  .ist-spielt .spv-takt-punkt{animation:none}
  .spv-woche,.spv-pfeil,.spv-gross,.spv-knopf,.spv-kap{transition:none}
}