/* Letzte Cleaning Prüfung: 10.10.2026 | Letztes Cleaning: 10.10.2026 */
/* Werkzeug "Werbespot" (AL-20261003-55, eigenes Werkzeug seit AL-20261003-58):
   Werkzeugseite mit Verlauf und Fenster. Farben wie im Projekt-Werkzeug
   (Karten #13141b, Rand #292c37, Akzent #ff3656, Primärknopf #ff284c,
   Felder #171922/#343744). */

.spv-seite,
.spv-fenster {
  --spv-karte: #13141b;
  --spv-rand: #292c37;
  --spv-feld: #171922;
  --spv-feld-rand: #343744;
  --spv-text: #f4f6fb;
  --spv-leise: #9296a7;
  --spv-akzent: #ff3656;
  --spv-primaer: #ff284c;
}

.spv-seite { color: var(--spv-text); display: grid; gap: 30px; min-width: 0; }
.spv-liste-kopf { align-items: center; display: flex; gap: 12px; }
.spv-liste-kopf h3 { align-items: center; display: flex; font-size: 22px; font-weight: 750; gap: 10px; margin: 0 0 14px; }
.spv-zahl { background: #1d2029; border: 1px solid var(--spv-rand); border-radius: 999px; color: var(--spv-leise); font-size: 12px; font-weight: 700; padding: 2px 9px; }
.spv-leer {
  background: linear-gradient(135deg, rgba(255, 54, 86, .08), rgba(255, 54, 86, 0) 55%), var(--spv-karte);
  border: 1px solid var(--spv-rand);
  border-radius: 16px;
  display: grid;
  gap: 12px;
  padding: 22px;
}
.spv-leer h3 { font-size: 19px; font-weight: 750; margin: 0; }
.spv-leer p { color: var(--spv-leise); font-size: 14px; margin: 0; max-width: 70ch; }

/* Symbol im Kopfknopf (das Videowerkzeug nutzt dort ein SVG). */
#factory-workspace [data-spv-neu-spot] .video-rebuild-header-action-icon i,
#factory-workspace [data-sb-neu] .video-rebuild-header-action-icon i { color: #fff; font-size: 26px; line-height: 1; position: relative; }

.spv-vorlagen { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spv-vorlage {
  align-items: stretch;
  background: var(--spv-feld);
  border: 1px solid var(--spv-feld-rand);
  border-radius: 12px;
  color: var(--spv-text);
  cursor: pointer;
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color .15s, transform .15s;
}
.spv-vorlage:hover { border-color: var(--spv-akzent); transform: translateY(-1px); }
.spv-vorlage i { color: var(--spv-akzent); flex: none; font-size: 26px; }
.spv-vorlage span { display: grid; gap: 2px; min-width: 0; }
.spv-vorlage strong { font-size: 15px; }
.spv-vorlage small { color: var(--spv-leise); font-size: 12.5px; line-height: 1.35; }

.spv-kacheln { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.spv-kachel {
  background: var(--spv-feld);
  border: 1px solid var(--spv-feld-rand);
  border-radius: 12px;
  color: var(--spv-text);
  cursor: pointer;
  display: grid;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
}
.spv-kachel { border-radius: 14px; transition: border-color .15s, transform .15s; }
.spv-kachel:hover { border-color: var(--spv-akzent); transform: translateY(-1px); }
.spv-kachel video,
.spv-kachel-bild,
.spv-kachel-platz { aspect-ratio: 16 / 9; background: #0c0d12; display: grid; object-fit: cover; place-items: center; width: 100%; }
.spv-kachel-platz i { color: var(--spv-leise); font-size: 28px; }
.spv-kachel-text { display: grid; gap: 5px; padding: 14px; }
.spv-kachel-text strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spv-kachel-text small { color: var(--spv-leise); font-size: 12px; }
.spv-status {
  background: rgba(12, 13, 18, .82);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  position: absolute;
  right: 8px;
  top: 8px;
}
.spv-status.ist-fertig { color: #4ade80; }
.spv-status.ist-fehler { color: var(--spv-akzent); }

/* Fenster */
body.spv-offen { overflow: hidden; }
html:has(body.spv-offen) { overflow: hidden; }
.spv-fenster {
  align-items: center;
  background: rgba(5, 6, 10, .72);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px 16px;
  position: fixed;
  z-index: 1300;
}
.spv-dialog {
  background: var(--spv-karte);
  border: 1px solid var(--spv-rand);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  color: var(--spv-text);
  max-height: calc(100dvh - 48px);
  max-width: 1080px;
  overflow: auto;
  padding: 30px;
  position: relative;
  width: 100%;
}
.spv-fenster[data-sb-fenster] { background: rgba(0, 0, 0, .96); }
.spv-zu {
  background: transparent;
  border: 0;
  color: var(--spv-leise);
  cursor: pointer;
  font-size: 22px;
  position: absolute;
  right: 12px;
  top: 10px;
}
.spv-kopf { align-items: center; display: flex; gap: 12px; margin: 0 28px 16px 0; }
.spv-kopf > i { color: var(--spv-akzent); font-size: 30px; }
.spv-kopf h2,
.spv-stand h2 { font-size: 19px; font-weight: 750; margin: 0; }
.spv-kopf p { color: var(--spv-leise); font-size: 13.5px; margin: 2px 0 0; }

.spv-formular,
.spv-drehbuch { display: grid; gap: 12px; }
.spv-zeile { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spv-feld { display: grid; gap: 5px; min-width: 0; }
.spv-feld > span { color: var(--spv-leise); font-size: 12.5px; font-weight: 600; }
.spv-feld input,
.spv-feld textarea,
.spv-feld select {
  background: var(--spv-feld);
  border: 1px solid var(--spv-feld-rand);
  border-radius: 10px;
  color: var(--spv-text);
  font: inherit;
  font-size: 14px;
  min-width: 0;
  padding: 9px 11px;
  width: 100%;
}
.spv-feld textarea { line-height: 1.45; resize: vertical; }
.spv-feld input:focus,
.spv-feld textarea:focus,
.spv-feld select:focus { border-color: var(--spv-akzent); outline: none; }

.spv-einstellung {
  background: var(--spv-feld);
  border: 1px solid var(--spv-rand);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 12px;
}
.spv-einstellung .spv-feld input,
.spv-einstellung .spv-feld textarea { background: #12131a; }
.spv-einstellung-felder { display: grid; gap: 10px; min-width: 0; }
.spv-nummer { align-content: start; display: grid; justify-items: center; }
.spv-nummer strong,
.spv-nummer i { color: var(--spv-akzent); font-size: 22px; font-weight: 800; }
.spv-nummer small { color: var(--spv-leise); font-size: 12px; }

.spv-fuss { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.spv-fuss .spv-hinweis { flex: 1 1 240px; }
.spv-hinweis { color: var(--spv-leise); font-size: 12.5px; line-height: 1.45; margin: 0; }
.spv-fehler { background: rgba(255, 54, 86, .1); border: 1px solid rgba(255, 54, 86, .35); border-radius: 10px; color: #ffb3c0; font-size: 13.5px; margin: 0; padding: 10px 12px; }
.spv-knopf {
  background: var(--spv-primaer);
  border: 1px solid var(--spv-primaer);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  text-decoration: none;
}
.spv-knopf:disabled { cursor: not-allowed; opacity: .6; }
.spv-knopf.ist-zweit { background: transparent; border-color: var(--spv-feld-rand); color: var(--spv-text); }

.spv-warten { align-items: center; color: var(--spv-leise); display: flex; gap: 10px; justify-content: center; padding: 48px 0; }
.spv-warten i { color: var(--spv-akzent); font-size: 24px; }

.spv-stand { display: grid; gap: 12px; padding: 8px 0; }
.spv-stand p { margin: 0; }
.spv-balken { background: var(--spv-feld); border-radius: 999px; height: 8px; overflow: hidden; }
.spv-balken span { background: var(--spv-primaer); display: block; height: 100%; transition: width .4s; }
.spv-clips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.spv-clips li { background: var(--spv-feld); border: 1px solid var(--spv-feld-rand); border-radius: 8px; color: var(--spv-leise); font-size: 12px; padding: 4px 9px; }
.spv-clips li.ist-fertig { border-color: rgba(74, 222, 128, .45); color: #4ade80; }

.spv-ergebnis { display: grid; gap: 12px; }
.spv-ergebnis video { background: #000; border-radius: 12px; max-height: 62dvh; width: 100%; }
.spv-ergebnis video.ist-hoch { justify-self: center; width: auto; }

/* Marke (AL-20261003-59): Logo, Bilder, Akzentfarbe */
.spv-marke { border: 1px solid var(--spv-rand); border-radius: 12px; display: grid; gap: 12px; margin: 0; min-width: 0; padding: 12px 14px; }
.spv-marke legend { color: var(--spv-leise); font-size: 12.5px; font-weight: 700; padding: 0 6px; }
.spv-marke-zeile { align-items: center; display: grid; gap: 12px; grid-template-columns: 92px minmax(0, 1fr); }
.spv-marke-zeile > .spv-haken { grid-column: 2; }
.spv-marke-titel { color: var(--spv-leise); font-size: 12.5px; font-weight: 600; }
.spv-medien { display: flex; flex-wrap: wrap; gap: 10px; }
.spv-upload { align-items: center; background: var(--spv-feld); border: 1px dashed var(--spv-feld-rand); border-radius: 10px; color: var(--spv-text); cursor: pointer; display: inline-flex; font-size: 13px; gap: 8px; min-height: 44px; padding: 8px 12px; position: relative; }
.spv-upload:hover { border-color: var(--spv-akzent); }
.spv-upload i { color: var(--spv-akzent); font-size: 18px; }
.spv-upload input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.spv-medium { background: #0c0d12; border: 1px solid var(--spv-feld-rand); border-radius: 10px; display: grid; gap: 6px; padding: 6px; position: relative; width: max-content; }
.spv-medium img { border-radius: 6px; display: block; max-height: 64px; max-width: 160px; object-fit: contain; }
.spv-medium.ist-bild { width: 150px; }
.spv-medium.ist-bild img { height: 84px; max-width: none; object-fit: cover; width: 100%; }
.spv-medium input { background: var(--spv-feld); border: 1px solid var(--spv-feld-rand); border-radius: 8px; color: var(--spv-text); font: inherit; font-size: 12.5px; min-width: 0; padding: 6px 8px; }
.spv-weg { align-items: center; background: rgba(12, 13, 18, .85); border: 1px solid var(--spv-feld-rand); border-radius: 999px; color: var(--spv-text); cursor: pointer; display: inline-flex; height: 26px; justify-content: center; position: absolute; right: -8px; top: -8px; width: 26px; }
.spv-haken { align-items: center; color: var(--spv-text); display: inline-flex; font-size: 13px; gap: 8px; }
.spv-marke input[type="color"] { background: transparent; border: 1px solid var(--spv-feld-rand); border-radius: 8px; height: 36px; padding: 2px; width: 56px; }
.spv-startbild { align-items: center; color: var(--spv-leise); display: inline-flex; font-size: 12.5px; gap: 8px; }
.spv-startbild img { border-radius: 6px; height: 34px; object-fit: cover; width: 54px; }

@media (max-width: 600px) {
  .spv-leer { padding: 16px; }
  .spv-fenster { align-items: stretch; padding: 0; }
  .spv-dialog { border-radius: 0; max-height: 100dvh; padding: 18px 16px; }
  .spv-zeile { grid-template-columns: minmax(0, 1fr); }
  .spv-einstellung { grid-template-columns: minmax(0, 1fr); }
  .spv-nummer { display: flex; gap: 8px; justify-items: start; align-items: baseline; }
  .spv-fuss .spv-knopf { flex: 1 1 100%; }
  .spv-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spv-marke-zeile { grid-template-columns: minmax(0, 1fr); }
  .spv-marke-zeile > .spv-haken { grid-column: auto; }
}

/* Storyboard (AL-20261003-60) nutzt dieselben Bausteine; hier nur Bildkacheln und das Blatt. */
.spv-kachel.ist-bild img { aspect-ratio: 16 / 9; background: #0c0d12; display: block; object-fit: cover; width: 100%; }
.sb-kachel-oeffnen { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.sb-kachel-oeffnen:focus-visible { outline: 2px solid var(--spv-akzent); outline-offset: -3px; border-radius: inherit; }
.sb-kachel-aktionen:empty { display: none; }
.spv-ergebnis .sb-blatt { background: #fff; border-radius: 12px; display: block; max-height: 64dvh; max-width: 100%; margin: 0 auto; }
.sb-texte { align-self: end; padding-bottom: 10px; }

/* Storyboard: Als Video umsetzen (AL-20261003-61) */
.sb-felder { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 12px; }
.sb-feld { background: var(--spv-feld); border: 2px solid var(--spv-feld-rand); border-radius: 10px; cursor: pointer; display: grid; gap: 6px; overflow: hidden; padding: 0 0 8px; position: relative; }
.sb-feld.ist-an { border-color: var(--spv-akzent); }
.sb-feld input { accent-color: var(--spv-akzent); height: 18px; left: 8px; position: absolute; top: 8px; width: 18px; }
.sb-feld img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; }
.sb-feld span { color: var(--spv-leise); font-size: 12px; line-height: 1.35; padding: 0 8px; }
.sb-feld strong { color: var(--spv-akzent); }
.spv-haken + .spv-haken { margin-left: 22px; }

/* Werbespot-Storyboard (AL-20261003-62) */
.spv-sb:empty { display: none; }
.spv-sb { background: var(--spv-feld); border: 1px solid var(--spv-rand); border-radius: 12px; display: grid; gap: 10px; margin-bottom: 12px; padding: 12px; }
/* Das Blatt ist 2400 px breit: ohne Begrenzung ragte es im Drehbuch über das Fenster (Dev, 05.10.2026). */
.spv-sb { grid-template-columns: minmax(0, 1fr); }
.spv-sb > * { min-width: 0; }
.spv-sb .sb-blatt { background: #fff; border-radius: 10px; display: block; height: auto; margin: 0 auto; max-height: 46dvh; max-width: 100%; }

/* AL-20261006-01/02: visuelle Vorlagen, klarer Ablauf und Szenenübersicht. */
.spv-seite *, .spv-fenster * { box-sizing: border-box; }
.spv-oberzeile { color: var(--spv-akzent); display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; margin-bottom: 8px; }
.spv-einstieg { align-items: center; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; padding: 12px 0 0; }
.spv-einstieg h2 { font-size: clamp(25px, 2.6vw, 36px); letter-spacing: -.035em; margin: 0 0 10px; }
.spv-einstieg p { color: var(--spv-leise); font-size: 14px; line-height: 1.6; margin: 0; max-width: 66ch; }
.spv-ablauf { align-items: center; display: flex; flex: none; gap: 14px; }
.spv-ablauf span { color: var(--spv-leise); display: grid; font-size: 12px; gap: 7px; }
.spv-ablauf b { color: var(--spv-text); font-size: 22px; font-weight: 600; }
.spv-ablauf > i { color: var(--spv-rand); }
.spv-vorlagen-bereich h3 { font-size: 16px; margin: 8px 0 14px; }
/* Eigene Motive sind Beispiele f?r die Vorlage, keine vorab generierten Kundenergebnisse. */
.spv-vorlage { border-color: #24252d; border-radius: 16px; overflow: hidden; padding: 0; transition: border-color .2s, transform .2s; }
.spv-vorlage:hover { border-color: #62636e; transform: translateY(-4px); }
.spv-vorlage .spv-vorlage-visual { aspect-ratio: 16 / 10; background: #0c0d12; display: block; overflow: hidden; position: relative; }
.spv-vorlage-visual img { height: 100%; object-fit: cover; transition: transform .35s; width: 100%; }
.spv-vorlage:hover .spv-vorlage-visual img { transform: scale(1.035); }
.spv-vorlage-visual::after { background: linear-gradient(transparent 65%, rgba(0, 0, 0, .6)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.spv-vorlage .spv-beispiel { bottom: 14px; color: #fff; display: block; font-size: 10px; left: 16px; position: absolute; z-index: 1; }
.spv-vorlage .spv-dauer { background: rgba(9, 10, 15, .65); border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; bottom: 12px; color: #fff; display: block; font-size: 11px; padding: 5px 8px; position: absolute; right: 12px; z-index: 1; }
.spv-vorlage .spv-vorlage-copy { align-content: start; gap: 8px; padding: 18px; }
.spv-vorlage-copy strong { font-size: 19px; letter-spacing: -.025em; }
.spv-vorlage-copy small { min-height: 36px; }
.spv-vorlage .spv-vorlage-aktion { align-items: center; color: #dddfe8; display: flex; font-size: 12px; font-weight: 600; justify-content: space-between; margin-top: 12px; }
.spv-vorlage-aktion i { font-size: 18px; }
.spv-kopf { margin-bottom: 22px; }
.spv-kopf h2 { font-size: 24px; letter-spacing: -.025em; }
.spv-kopf p { line-height: 1.5; margin-top: 6px; }
.spv-schritte { display: flex; gap: 20px; list-style: none; margin: 0 0 28px; padding: 0; }
.spv-schritte li { align-items: center; border-bottom: 2px solid var(--spv-rand); color: var(--spv-leise); display: flex; flex: 1; font-size: 12px; gap: 8px; min-width: 0; padding: 0 0 12px; }
.spv-schritte li > span { align-items: center; border: 1px solid var(--spv-feld-rand); border-radius: 50%; display: inline-flex; flex: none; font-size: 10px; height: 22px; justify-content: center; width: 22px; }
.spv-schritte [aria-current="step"] { border-color: var(--spv-akzent); color: var(--spv-text); }
.spv-schritte [aria-current="step"] > span { background: var(--spv-akzent); border-color: var(--spv-akzent); color: #fff; }
.spv-schritte .ist-erledigt > span { border-color: #316346; color: #4ade80; }
.spv-briefing { align-items: start; display: grid; gap: 28px; grid-template-columns: 1.1fr 1fr; }
.spv-panel { align-content: start; display: grid; gap: 18px; min-width: 0; padding: 0; }
.spv-panel h3 { font-size: 16px; letter-spacing: -.015em; margin: 0; }
.spv-panel-kopf { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.spv-textknopf { background: transparent; border: 0; color: var(--spv-akzent); cursor: pointer; font: inherit; font-size: 12px; padding: 6px 0; }
.spv-panel .spv-marke { border: 0; padding: 0; }
.spv-panel .spv-marke legend { display: none; }
.spv-panel .spv-marke-zeile { grid-template-columns: minmax(0, 1fr); }
.spv-panel .spv-marke-zeile > .spv-haken { grid-column: auto; }
.spv-panel .spv-upload { min-height: 64px; width: 100%; }
.spv-panel .spv-medien { min-width: 0; width: 100%; }
.spv-panel .spv-medien .spv-upload { flex: 1 1 150px; }
.spv-szenenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spv-szenenraster .spv-einstellung { gap: 16px; grid-template-columns: minmax(0, 1fr); padding: 18px; }
.spv-szenenraster .spv-nummer { align-items: center; display: flex; gap: 10px; justify-content: flex-start; }
.spv-szenenraster .spv-nummer strong { background: rgba(255, 54, 86, .1); border-radius: 7px; font-size: 16px; padding: 6px 10px; }
.spv-szenenraster .spv-nummer > span { color: var(--spv-leise); font-size: 12px; }
.spv-szenenraster .spv-nummer small { background: #232630; border-radius: 6px; margin-left: auto; padding: 5px 9px; }
.spv-kontinuitaet, .spv-szenenraster .ist-schluss { grid-column: 1 / -1; }
.spv-kontinuitaet { background: #101118; border: 1px solid var(--spv-rand); border-radius: 12px; display: grid; gap: 8px; padding: 16px 18px; }
.spv-zusammenfassung { align-items: center; background: #101118; border: 1px solid var(--spv-rand); border-radius: 10px; display: flex; flex-wrap: wrap; font-size: 12px; gap: 10px 18px; margin-bottom: 18px; padding: 12px 16px; }
.spv-zusammenfassung span { color: var(--spv-leise); }
.spv-inhalt > .spv-fuss, .spv-formular > .spv-fuss { background: var(--spv-karte); border-top: 1px solid var(--spv-rand); bottom: -30px; margin-top: 22px; padding: 18px 0 6px; position: sticky; z-index: 2; }
.spv-option:empty { display: none; }
.spv-zu { align-items: center; background: var(--spv-karte); border: 1px solid var(--spv-rand); border-radius: 8px; display: flex; float: right; height: 36px; justify-content: center; margin: -8px -12px 0 8px; position: sticky; right: auto; top: 0; width: 36px; z-index: 4; }
.spv-knopf, .spv-haken { min-height: 42px; }
.spv-fenster :is(button, a, input, textarea, select):focus-visible, .spv-seite button:focus-visible, .spv-upload:focus-within { outline: 2px solid var(--spv-akzent); outline-offset: 3px; }
.spv-ergebnis video.ist-hoch { max-width: 100%; }

/* Text und Beispielbild als mittiger Block ohne Lücke dazwischen (WL14-02): die Textspalte war 1,4 Anteile breit, ihr Inhalt nur ~600 px. */
.spv-einstieg.ist-storyboard { display: grid; gap: 24px 48px; grid-template-columns: minmax(0, 620px) minmax(0, 660px); justify-content: center; }
.sb-einstieg-visual { border-radius: 12px; overflow: hidden; position: relative; }
.sb-einstieg-visual img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; }
.sb-einstieg-visual small { background: #17171acc; border-radius: 4px; bottom: 10px; color: #fff; font-size: 9px; left: 12px; padding: 4px 7px; position: absolute; }
/* Die Schrittleiste 01-03 unter dem Storyboard-Kopf ist seit WL-06 (12.10.2026) entfernt. */

/* Die Referenz steht links, das Briefing rechts; Markenbilder bleiben neben der Vorlage. */
.spv-briefing.ist-medien { gap: 24px 32px; grid-template-columns: .9fr 1.1fr; }
.ist-medien .spv-briefing-text { grid-column: 2; grid-row: 1 / span 2; }
.ist-medien .spv-motiv { grid-column: 1; grid-row: 1; }
.ist-medien .spv-markenpanel { grid-column: 1; grid-row: 2; }
.spv-markenpanel { gap: 12px; }
.spv-markenpanel .spv-marke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spv-markenpanel .spv-marke-zeile { align-content: start; gap: 8px; }
.spv-markenpanel .spv-marke-zeile:nth-of-type(3) { align-items: center; grid-column: 1 / -1; grid-template-columns: 92px minmax(0, 1fr); }
.spv-markenpanel .spv-marke > .spv-hinweis { grid-column: 1 / -1; font-size: 11px; }
.spv-markenpanel .spv-medien .spv-upload { flex-basis: 0; }
.spv-motiv { background: #0d0e13; border: 1px solid var(--spv-rand); border-radius: 12px; margin: 0; min-width: 0; overflow: hidden; }
.spv-motiv > img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; }
.spv-motiv figcaption { display: grid; gap: 7px; padding: 14px 16px; }
.spv-motiv figcaption > span { color: #a5a8b6; font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.spv-motiv figcaption strong { align-items: center; display: flex; font-size: 16px; justify-content: space-between; }
.spv-motiv figcaption small { color: var(--spv-leise); font-size: 12px; font-weight: 400; }
.spv-motiv figcaption p { color: var(--spv-leise); font-size: 11px; line-height: 1.5; margin: 0; }
.sb-gestaltung { border-left: 1px solid var(--spv-rand); padding-left: 28px; }
.sb-motiv-handy { display: none; }
[data-sb-angaben] textarea[name="geschichte"] { min-height: 300px; }
.sb-gestaltung .spv-motiv > img { aspect-ratio: 16 / 9; object-fit: contain; background: #e4dfd6; }
.spv-panel .spv-upload { background: #101118; color: #bfc2ce; font-size: 12px; justify-content: center; min-height: 56px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .spv-vorlage, .spv-vorlage-visual img { transition: none; }
}

/* MOB19-55 (Betreiber 19.10.2026, iPad 6 quer): „Storyboard fertig" – „obwohl so viel platz überall ist. die hauptbox ist
   auch viel zu groß. das müsste etwas kompakter und dynamischer gemacht werden". Das Fenster war 992 px breit, das Blatt
   auf 64 % der Höhe begrenzt, die Knöpfe lagen unter dem Rand. Am Tablet ist das Fenster so breit wie das Blatt, das Blatt
   so hoch, wie neben Kopf, Hinweis und Knöpfen Platz ist; der Kopf ist kleiner. */
@media (min-width: 761px) and (max-width: 1100px) {
  .spv-dialog:has(.spv-ergebnis) { padding: 20px 22px 16px; }
  .spv-dialog:has(.spv-ergebnis) .spv-kopf { min-height: 0; }
  .spv-dialog:has(.spv-ergebnis) .spv-kopf h2 { font-size: 22px; }
  .spv-ergebnis { gap: 8px; }
  .spv-ergebnis .sb-blatt { max-height: calc(100dvh - 268px); }
  .spv-ergebnis > .spv-hinweis { margin: 0; }
  .spv-dialog:has(.spv-ergebnis .sb-blatt) { max-width: calc(100vw - 32px); width: fit-content; }
  .spv-dialog:has(.spv-ergebnis .sb-blatt) .spv-inhalt { width: auto; }
  .spv-dialog:has(.spv-ergebnis .sb-blatt) .spv-ergebnis > a { justify-self: center; width: fit-content; }
}
@media (max-width: 760px) {
  .spv-einstieg.ist-storyboard { grid-template-columns: minmax(0, 1fr); }
  .sb-einstieg-visual { max-width: 420px; }
  .spv-briefing, .spv-briefing.ist-medien, .spv-szenenraster { grid-template-columns: minmax(0, 1fr); }
  .ist-medien .spv-briefing-text, .ist-medien .spv-motiv, .ist-medien .spv-markenpanel { grid-column: auto; grid-row: auto; }
  .ist-medien .spv-motiv { order: -1; }
  .sb-gestaltung { border-left: 0; padding-left: 0; }
  /* WL14-29: Am Handy steht das Beispielbild ganz oben über dem Formular, im Panel darunter entfällt es. */
  .sb-motiv-handy { display: block; margin: 0 0 14px; }
  .sb-gestaltung > .spv-motiv { display: none; }
  [data-sb-angaben] textarea[name="geschichte"] { min-height: 180px; }
  .ist-medien .spv-motiv > img { max-height: 170px; }
  .ist-medien .spv-motiv figcaption p { display: none; }
  .spv-vorlagen { gap: 10px; }
  .spv-vorlage .spv-vorlage-copy { padding: 12px; }
  .spv-vorlage-copy small { font-size: 12px; }
  .spv-schritte li { flex-direction: column; font-size: 10px; gap: 6px; padding: 8px 4px; text-align: center; }
}
@media (max-width: 600px) {
  .spv-markenpanel .spv-marke { grid-template-columns: minmax(0, 1fr); }
  .spv-einstieg { gap: 22px; padding: 0; }
  .spv-vorlagen { grid-template-columns: minmax(0, 1fr); }
  .spv-vorlage { grid-template-columns: minmax(0, 1fr); }
  .spv-vorlage .spv-vorlage-visual { aspect-ratio: 16 / 9; }
  .spv-vorlage .spv-dauer { bottom: 8px; padding: 4px 6px; right: 8px; }
  .spv-vorlage-copy strong { font-size: 18px; }
  .spv-panel { gap: 16px; padding: 0; }
  .spv-kopf h2 { font-size: 21px; }
  .spv-kopf > i { display: none; }
  .spv-kacheln { grid-template-columns: minmax(0, 1fr); }
  .spv-inhalt > .spv-fuss, .spv-formular > .spv-fuss { bottom: -18px; padding: 12px 0; }
  .spv-inhalt > .spv-fuss { position: static; }
  .spv-fuss .spv-option { width: 100%; }
  .spv-option .spv-knopf { width: 100%; }
  .spv-knopf { text-align: center; }
  .spv-haken + .spv-haken { margin-left: 0; }
  .sb-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-texte { padding: 0; }
}

/* AL-20261006-05: einstellbare Spots (Länge, Format, Look, Tempo, Tonalität,
   Ton, Einblendungen, Qualität) als Chip-Leisten wie in einer
   Generator-Leiste; Vorlagenkarten mit langsamem Kamerazoom und Lichtreflex. */
.spv-optionen { border-top: 1px solid var(--spv-rand); display: grid; gap: 14px; padding-top: 18px; }
.spv-optionen h3 { font-size: 11px; font-weight: 800; letter-spacing: .14em; margin: 0; text-transform: uppercase; }
.spv-chips { border: 0; display: grid; gap: 7px; margin: 0; min-width: 0; padding: 0; }
.spv-chips legend { color: var(--spv-leise); font-size: 12px; font-weight: 600; margin-bottom: 7px; padding: 0; }
.spv-chip-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.spv-chip { cursor: pointer; display: inline-flex; position: relative; }
.spv-chip input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.spv-chip span { align-items: center; background: #101118; border: 1px solid var(--spv-feld-rand); border-radius: 999px; color: #c9ccd8; display: inline-flex; font-size: 12.5px; font-weight: 600; min-height: 34px; padding: 6px 13px; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.spv-chip:hover span { border-color: #5b5e6b; color: var(--spv-text); }
.spv-chip input:checked + span { background: rgba(255, 54, 86, .14); border-color: var(--spv-akzent); box-shadow: 0 0 0 1px var(--spv-akzent) inset, 0 0 18px rgba(255, 54, 86, .18); color: #fff; }
.spv-chip input:focus-visible + span { outline: 2px solid var(--spv-akzent); outline-offset: 2px; }
.spv-chip.ist-aus { cursor: not-allowed; }
.spv-chip.ist-aus span { opacity: .4; }
.spv-richtpreis { color: var(--spv-text); display: block; font-size: 13.5px; margin-bottom: 4px; }
.spv-richtpreis:empty { display: none; }
.spv-richtpreis strong { color: #fff; }

.spv-vorlagen-bereich h3 { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.spv-vorlage .spv-dauer { align-items: center; display: inline-flex; gap: 5px; }
.spv-vorlage .spv-dauer i { color: var(--spv-akzent); font-size: 13px; }
.spv-vorlage-visual::before { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); content: ""; inset: 0; pointer-events: none; position: absolute; transform: translateX(-120%); z-index: 1; }
.spv-vorlage:hover .spv-vorlage-visual::before { transform: translateX(120%); transition: transform .9s ease; }
.spv-vorlage:hover .spv-vorlage-visual img { transform: scale(1.09) translate(-1.5%, -1%); transition: transform 6s cubic-bezier(.2, .6, .2, 1); }
.spv-vorlage:hover { border-color: var(--spv-akzent); box-shadow: 0 18px 40px -18px rgba(255, 54, 86, .45); }
.spv-vorlage:hover .spv-vorlage-aktion { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .spv-vorlage-visual::before { display: none; }
  .spv-vorlage:hover .spv-vorlage-visual img { transform: none; }
}
@media (max-width: 600px) {
  .spv-chip span { font-size: 12px; min-height: 36px; padding: 6px 11px; }
}

/* Briefing-Raster ohne Lücken (Betreiber 06.10.2026: "sieht jetzt komisch aus
   mit den riesigen Lücken"): oben Motiv | Briefing, darunter Marke und
   Einstellungen jeweils über die volle Breite; Einstellungen zweispaltig. */
.ist-medien .spv-briefing-text { grid-row: 1; }
.ist-medien .spv-markenpanel { grid-column: 1 / -1; grid-row: 2; }
.ist-medien .spv-optionen { grid-column: 1 / -1; grid-row: 3; }
.spv-markenpanel .spv-marke { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spv-markenpanel .spv-marke-zeile:nth-of-type(3) { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
.spv-optionen { column-gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spv-optionen > h3, .spv-optionen > .spv-hinweis { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .ist-medien .spv-briefing-text, .ist-medien .spv-markenpanel, .ist-medien .spv-optionen { grid-column: auto; grid-row: auto; }
  .spv-markenpanel .spv-marke, .spv-optionen { grid-template-columns: minmax(0, 1fr); }
}
/* Nebeneinanderliegende Gruppen sind gleich hoch - die Chips dürfen sich nicht mitstrecken. */
.spv-chips { align-content: start; }
.spv-chip-reihe { align-content: flex-start; align-items: flex-start; }

/* AL-20261006-08: nachholbarer Spot - fehlende Einstellung neu erzeugen oder weglassen. */
.spv-status.ist-offen { color: #ffb648; }
.spv-clips li.ist-fehler { border-color: rgba(255, 54, 86, .55); color: #ff8a9a; }
.spv-nachholen { background: #101118; border: 1px solid rgba(255, 54, 86, .35); border-radius: 12px; display: grid; gap: 12px; margin: 16px 0; padding: 16px 18px; }
.spv-nachholen h3 { font-size: 15px; margin: 0; }
.spv-nachholen .spv-fuss { margin-top: 0; }

/* AL-20261006-10: gleiche Figur in jedem Clip. AL-20261006-09: Hinweis auf
   Wörter, die den Inhaltsfilter des Videomodells auslösen können. */
.spv-figur:empty { display: none; }
.spv-figur { background: var(--spv-karte); border: 1px solid var(--spv-rand); border-radius: 12px; display: grid; gap: 12px; margin: 16px 0; min-width: 0; padding: 16px 18px; }
.spv-figur h3 { font-size: 15px; margin: 0; }
.spv-figur .spv-fuss { margin-top: 0; }
.spv-figur-ergebnis { align-items: start; display: grid; gap: 16px; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); }
.spv-figur-ergebnis img { aspect-ratio: 3 / 4; border: 1px solid var(--spv-rand); border-radius: 10px; object-fit: cover; width: 100%; }
.spv-figur-ergebnis > div { display: grid; gap: 10px; min-width: 0; }
.spv-risiko { background: rgba(255, 182, 72, .08); border: 1px solid rgba(255, 182, 72, .4); border-radius: 8px; color: #ffcf85; font-size: 12.5px; line-height: 1.4; margin: 0; padding: 8px 10px; }
.spv-risiko[hidden] { display: none; }
@media (max-width: 600px) {
  .spv-figur-ergebnis { grid-template-columns: minmax(0, 1fr); }
  .spv-figur-ergebnis img { max-width: 220px; }
}

/* AL-20261007-01: Videomodell frei wählbar wie im Videogenerator. */
.spv-modellwahl { grid-column: 1 / -1; max-width: 560px; }
.spv-modellwahl select { cursor: pointer; }
.spv-modell-merkmale { color: var(--spv-leise); font-size: 12px; }

/* AL-20261007-05: Regiepult - der Briefing-Schritt soll „kinomäßig“ wirken
   (Betreiber 07.10.2026). Leinwand mit Format und Look live, Look als
   Bildkarten, Format als Leinwandrahmen, Länge mit Zeitleiste. */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/kino/BebasNeue-Regular.ttf") format("truetype");
}
.spv-regie { display: grid; gap: 26px; }
.spv-leinwand { background: #050507; border: 1px solid #22242e; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); margin: 0; overflow: hidden; position: relative; }
.spv-leinwand::after { background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .7)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.spv-leinwand-buehne { align-items: center; aspect-ratio: 21 / 9; display: flex; justify-content: center; overflow: hidden; position: relative; }
.spv-leinwand-hintergrund { filter: blur(28px) brightness(.32) saturate(1.2); height: 100%; inset: 0; object-fit: cover; position: absolute; transform: scale(1.25); width: 100%; }
.spv-leinwand-rahmen { aspect-ratio: 16 / 9; border-radius: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, .75); height: 84%; overflow: hidden; position: relative; transition: aspect-ratio .35s ease; }
.spv-leinwand.ist-hoch .spv-leinwand-rahmen { aspect-ratio: 9 / 16; }
.spv-leinwand-rahmen img { display: block; height: 100%; object-fit: cover; transition: filter .35s ease; width: 100%; }
.spv-leinwand-schimmer { animation: spv-schimmer 7s ease-in-out infinite; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .13) 50%, transparent 65%); inset: 0; position: absolute; }
@keyframes spv-schimmer { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.spv-leinwand figcaption { background: linear-gradient(transparent, rgba(0, 0, 0, .88)); bottom: 0; display: grid; gap: 3px; left: 0; padding: 26px 26px 18px; position: absolute; right: 0; z-index: 1; }
.spv-leinwand figcaption > span { color: #b9bccb; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.spv-leinwand figcaption strong { color: #fff; display: block; font-family: "Bebas Neue", "Space Grotesk", sans-serif; font-size: clamp(30px, 4.4vw, 54px); font-weight: 400; letter-spacing: .08em; line-height: 1; overflow-wrap: anywhere; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.spv-leinwand figcaption small { color: #d6d8e2; font-size: 12.5px; letter-spacing: .05em; }

/* Looks als Farbstimmung - auf der Leinwand und in den Bildkarten gleich. */
.ist-look-cineastisch .spv-leinwand-rahmen img, .spv-tpl-bild.ist-look-cineastisch .spv-tpl-rahmen img, .spv-look-bild.ist-look-cineastisch img { filter: contrast(1.1) saturate(1.15) sepia(.12) hue-rotate(-8deg); }
.ist-look-energiegeladen .spv-leinwand-rahmen img, .spv-tpl-bild.ist-look-energiegeladen .spv-tpl-rahmen img, .spv-look-bild.ist-look-energiegeladen img { filter: contrast(1.28) saturate(1.5) brightness(1.03); }
.ist-look-warm .spv-leinwand-rahmen img, .spv-tpl-bild.ist-look-warm .spv-tpl-rahmen img, .spv-look-bild.ist-look-warm img { filter: sepia(.35) saturate(1.25) brightness(1.05); }
.ist-look-edel .spv-leinwand-rahmen img, .spv-tpl-bild.ist-look-edel .spv-tpl-rahmen img, .spv-look-bild.ist-look-edel img { filter: grayscale(.6) contrast(1.12) brightness(.92); }
.ist-look-dokumentarisch .spv-leinwand-rahmen img, .spv-tpl-bild.ist-look-dokumentarisch .spv-tpl-rahmen img, .spv-look-bild.ist-look-dokumentarisch img { filter: saturate(.7) contrast(.95) brightness(1.02); }
.ist-look-retro .spv-leinwand-rahmen img, .spv-tpl-bild.ist-look-retro .spv-tpl-rahmen img, .spv-look-bild.ist-look-retro img { filter: sepia(.6) contrast(.88) saturate(.85) brightness(1.05); }

.spv-regie-raster { gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.spv-regie-raster > .spv-panel { background: #101118; border: 1px solid var(--spv-rand); border-radius: 14px; padding: 18px 20px; }
.spv-regie-raster .spv-markenpanel .spv-marke { grid-template-columns: minmax(0, 1fr); }

.spv-optionen.spv-pult { background: linear-gradient(180deg, #15161e, #0d0e14); border: 1px solid #272a35; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset; gap: 22px; grid-template-columns: minmax(0, 1fr); padding: 22px 22px 18px; }
.spv-pult-kopf h3 { font-family: "Bebas Neue", "Space Grotesk", sans-serif; font-size: 28px; font-weight: 400; letter-spacing: .12em; margin: 0; text-transform: none; }
.spv-pult-kopf p { color: var(--spv-leise); font-size: 12.5px; margin: 2px 0 0; }
.spv-pult .spv-chips legend,
.spv-pult .spv-modellwahl > span { color: #aeb1c0; font-family: "Bebas Neue", "Space Grotesk", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: .14em; }

.ist-looks .spv-chip-reihe { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.spv-chip.ist-bildkarte { display: flex; }
.spv-chip.ist-bildkarte > span { align-items: stretch; background: #0b0c11; border-radius: 12px; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; white-space: normal; width: 100%; }
.spv-look-bild { aspect-ratio: 16 / 10; display: block; overflow: hidden; }
.spv-look-bild img { display: block; height: 100%; object-fit: cover; transition: transform .3s ease, filter .3s ease; width: 100%; }
.spv-chip.ist-bildkarte:hover .spv-look-bild img { transform: scale(1.06); }
.ist-looks b { font-size: 12px; font-weight: 700; padding: 8px 10px; }

.spv-pult-paar { align-items: start; display: grid; gap: 20px 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ist-formate .spv-chip-reihe { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ist-formate .spv-chip.ist-bildkarte > span { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; }
.spv-format-symbol { border: 2px solid currentColor; border-radius: 3px; flex: none; opacity: .85; }
.spv-format-symbol.ist-quer { height: 19px; width: 34px; }
.spv-format-symbol.ist-hoch { height: 28px; width: 16px; }
.ist-formate b { font-family: "Bebas Neue", "Space Grotesk", sans-serif; font-size: 20px; font-weight: 400; letter-spacing: .06em; }
.ist-formate small { color: var(--spv-leise); flex-basis: 100%; font-size: 11.5px; }
.spv-pult .spv-modellwahl { grid-column: auto; max-width: none; }

.spv-pult-laenge { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.spv-zeitleiste { display: flex; gap: 3px; min-height: 40px; }
.spv-zeitleiste:empty { display: none; }
.spv-zeitleiste > span, .spv-zeitleiste > button { background: linear-gradient(180deg, rgba(255, 54, 86, .22), rgba(255, 54, 86, .08)); border: 1px solid rgba(255, 54, 86, .4); border-radius: 6px; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; padding: 4px 8px; }
.spv-zeitleiste > .spv-zeit-ende { background: #101118; border-color: var(--spv-feld-rand); }
.spv-zeitleiste b { color: #fff; font-family: "Bebas Neue", "Space Grotesk", sans-serif; font-size: 15px; font-weight: 400; letter-spacing: .06em; line-height: 1.1; }
.spv-zeitleiste small { color: #c9ccd8; font-size: 10.5px; white-space: nowrap; }

.spv-pult-raster { display: grid; gap: 16px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spv-regie .spv-fuss .spv-knopf i { margin-left: 4px; }

@media (max-width: 900px) {
  .ist-looks .spv-chip-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .spv-regie-raster, .spv-pult-paar, .spv-pult-raster { grid-template-columns: minmax(0, 1fr); }
  .spv-leinwand-buehne { aspect-ratio: 16 / 11; }
  .spv-optionen.spv-pult { padding: 18px 14px 14px; }
}
@media (max-width: 420px) {
  .ist-looks .spv-chip-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spv-leinwand figcaption { padding: 18px 14px 12px; }
  .spv-zeitleiste > span, .spv-zeitleiste > button { padding: 4px 3px; }
  /* Seit AL-20261007-20 sind die Szenen antippbar - die Länge bleibt sichtbar. */
  .spv-zeitleiste small { font-size: 9.5px; overflow: hidden; text-overflow: clip; }
}
@media (prefers-reduced-motion: reduce) {
  .spv-leinwand-schimmer { animation: none; display: none; }
  .spv-leinwand-rahmen, .spv-leinwand-rahmen img, .spv-look-bild img { transition: none; }
}

/* AL-20261007-07: Länge je Einstellung und der Schlusstafel wählbar. */
.spv-laenge { appearance: none; background: #232630 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239296a7'/%3E%3C/svg%3E") no-repeat right 8px center; border: 1px solid var(--spv-feld-rand); border-radius: 6px; color: var(--spv-text); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; margin-left: auto; min-height: 30px; padding: 4px 24px 4px 9px; }
.spv-laenge:hover { border-color: #5b5e6b; }
.spv-laenge:focus-visible { outline: 2px solid var(--spv-akzent); outline-offset: 2px; }

/* AL-20261007-10: Werbespot in Stufen - Bilder prüfen, Videos wählen, Ton. */
.spv-stufen-raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 18px 0; }
.spv-stufen-raster.ist-hoch { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.spv-stufen-karte { align-content: start; background: #101118; border: 1px solid var(--spv-rand); border-radius: 12px; display: grid; gap: 8px; min-width: 0; overflow: hidden; padding: 0 0 10px; }
.spv-stufen-medium { position: relative; }
.spv-stufen-bild { align-items: center; aspect-ratio: 16 / 9; background: #0b0c11; color: var(--spv-leise); display: flex; flex-direction: column; font-size: 12px; gap: 6px; justify-content: center; object-fit: cover; text-align: center; width: 100%; }
.ist-hoch .spv-stufen-bild { aspect-ratio: 9 / 16; }
.spv-stufen-bild i { font-size: 26px; }
.spv-stufen-bild.ist-fehler { color: #ff8a9a; padding: 10px; }
.spv-stufen-nr { background: rgba(0, 0, 0, .7); border-radius: 6px; color: #fff; font-size: 11px; font-weight: 700; left: 8px; padding: 3px 7px; position: absolute; top: 8px; }
.spv-stufen-text { color: var(--spv-text); font-size: 12.5px; font-weight: 600; margin: 0; padding: 0 10px; }
.spv-stufen-aendern { padding: 0 10px; }
.spv-stufen-aendern summary { color: var(--spv-akzent); cursor: pointer; font-size: 12px; font-weight: 700; }
.spv-stufen-aendern[open] { display: grid; gap: 8px; }
.spv-stufen-aendern .spv-knopf { justify-self: start; }
.spv-stufen-fuss { border-top: 1px solid var(--spv-rand); display: grid; gap: 10px; padding-top: 16px; }

.spv-auswahl { background: #101118; border: 1px solid var(--spv-rand); border-radius: 14px; display: grid; gap: 12px; margin: 14px 0; padding: 14px 16px; }
.spv-auswahl > header { align-items: center; display: flex; gap: 10px; }
.spv-auswahl > header strong { background: rgba(255, 54, 86, .12); border-radius: 7px; color: var(--spv-akzent); padding: 4px 9px; }
.spv-auswahl > header span { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; }
.spv-auswahl > header small { color: var(--spv-leise); font-size: 12px; }
.spv-takes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.spv-takes.ist-hoch { grid-template-columns: repeat(auto-fill, minmax(150px, 200px)); }
.spv-take { background: #0b0c11; border: 2px solid var(--spv-feld-rand); border-radius: 10px; cursor: pointer; display: grid; overflow: hidden; position: relative; }
.spv-take input { opacity: 0; position: absolute; }
.spv-take video { aspect-ratio: 16 / 9; background: #000; display: block; object-fit: cover; width: 100%; }
.spv-takes.ist-hoch .spv-take video { aspect-ratio: 9 / 16; }
.spv-take.ist-gewaehlt { border-color: var(--spv-akzent); box-shadow: 0 0 0 1px var(--spv-akzent), 0 0 18px rgba(255, 54, 86, .25); }
.spv-take:focus-within { outline: 2px solid var(--spv-akzent); outline-offset: 2px; }
.spv-take-info { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; padding: 6px 8px; }
.spv-take-tipp { background: rgba(255, 182, 72, .15); border-radius: 6px; color: #ffcf85; font-size: 11px; padding: 2px 6px; }
.spv-take-punkte { color: var(--spv-text); font-size: 12px; }
.spv-take-info small { color: var(--spv-leise); flex-basis: 100%; font-size: 11px; }

.spv-ton { background: #101118; border: 1px solid var(--spv-rand); border-radius: 14px; margin: 18px 0 6px; padding: 16px 18px; }
.spv-ton .spv-marke-zeile { grid-template-columns: 92px minmax(0, 1fr); }
.spv-musik { align-items: center; display: inline-flex; gap: 8px; font-size: 13px; }
@media (max-width: 600px) {
  .spv-stufen-raster, .spv-stufen-raster.ist-hoch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spv-takes, .spv-takes.ist-hoch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spv-ton .spv-marke-zeile { grid-template-columns: minmax(0, 1fr); }
}

/* AL-20261007-11: Ablauf auf der Startseite, Erzählformen als Unterkarten mit Skizze. */
.spv-ablauf { align-items: stretch; display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 26px 0 6px; padding: 0; }
.spv-ablauf li { background: linear-gradient(160deg, rgba(255, 54, 86, .1), rgba(255, 255, 255, .02) 55%); border: 1px solid var(--spv-rand); border-radius: 14px; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 40px 15px 16px; position: relative; }
.spv-ablauf li > i { color: var(--spv-akzent); font-size: 24px; line-height: 1; }
.spv-ablauf strong { font-size: 14.5px; letter-spacing: -.01em; }
.spv-ablauf small { color: var(--spv-leise); font-size: 12.5px; line-height: 1.45; }
.spv-ablauf-nr { color: rgba(255, 255, 255, .14); font-size: 30px; font-weight: 800; line-height: 1; position: absolute; right: 14px; top: 12px; }
/* Bild oben fest, Text darunter füllt die Karte; "Vorlage verwenden" sitzt unten. */
.spv-vorlagen .spv-vorlage { grid-template-rows: auto 1fr; }
.spv-vorlagen .spv-vorlage .spv-vorlage-copy { display: flex; flex-direction: column; }
.spv-vorlagen .spv-vorlage .spv-vorlage-aktion { margin-top: auto; padding-top: 12px; }
.spv-vorlage .spv-vorlage-aufbau { display: flex; flex-wrap: wrap; gap: 6px; }
.spv-vorlage-aufbau em { border: 1px solid var(--spv-rand); border-radius: 999px; color: var(--spv-text); font-size: 11.5px; font-style: normal; font-weight: 600; padding: 3px 9px; }

.spv-aufbau { background: var(--spv-feld); border: 1px solid var(--spv-rand); border-radius: 16px; display: grid; gap: 12px; margin: 16px 0; padding: 16px; }
.spv-aufbau .spv-panel-kopf { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.spv-aufbau h3 { margin: 0; }
.spv-aufbau-karten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.spv-aufbau-karte { background: #0d0e14; border: 2px solid var(--spv-feld-rand); border-radius: 14px; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 0; min-width: 0; overflow: hidden; padding: 0; text-align: left; transition: border-color .2s, transform .2s, box-shadow .2s; }
.spv-aufbau-karte:hover { border-color: rgba(255, 54, 86, .55); transform: translateY(-2px); }
.spv-aufbau-karte:focus-visible { outline: 2px solid var(--spv-akzent); outline-offset: 3px; }
.spv-aufbau-karte.ist-gewaehlt { border-color: var(--spv-akzent); box-shadow: 0 0 0 1px var(--spv-akzent), 0 10px 30px rgba(255, 54, 86, .22); }
.spv-aufbau-copy { display: grid; gap: 4px; padding: 11px 13px 13px; }
.spv-aufbau-copy strong { font-size: 15px; }
.spv-aufbau-copy small { color: var(--spv-leise); font-size: 12px; line-height: 1.4; }

/* Skizze: Felder aus dem Vorlagenmotiv, je Erzählform anders behandelt. */
.spv-skizze { aspect-ratio: 16 / 7; background: #07080b; display: flex; gap: 3px; overflow: hidden; padding: 3px; }
.spv-skizze-feld { border-radius: 6px; flex: 1 1 0; min-width: 0; overflow: hidden; position: relative; }
.spv-skizze-feld img { display: block; height: 100%; object-fit: cover; width: 100%; }
.spv-skizze-feld b { background: rgba(0, 0, 0, .62); border-radius: 5px; bottom: 6px; color: #fff; font-size: 10.5px; font-weight: 700; left: 6px; letter-spacing: .02em; max-width: calc(100% - 12px); overflow: hidden; padding: 2px 6px; position: absolute; text-overflow: ellipsis; white-space: nowrap; }
.spv-skizze .ist-feld-1 img { object-position: 15% 50%; transform: scale(1.35); }
.spv-skizze .ist-feld-3 img { object-position: 85% 40%; transform: scale(1.2); }
/* Klassischer Bogen: gedämpftes Problem, helle Wende, Marke in Akzentfarbe. */
.spv-skizze.ist-bogen .ist-feld-1 img { filter: grayscale(.85) brightness(.6); }
.spv-skizze.ist-bogen .ist-feld-3::after { background: linear-gradient(transparent 30%, rgba(255, 54, 86, .55)); content: ""; inset: 0; position: absolute; }
/* Vorher/Nachher: dasselbe Bild, links grau, rechts warm, Trennstrich. */
.spv-skizze.ist-vergleich { gap: 0; }
.spv-skizze.ist-vergleich .spv-skizze-feld { border-radius: 0; }
.spv-skizze.ist-vergleich .ist-feld-1 { border-radius: 6px 0 0 6px; }
.spv-skizze.ist-vergleich .ist-feld-2 { border-left: 2px solid #fff; border-radius: 0 6px 6px 0; }
.spv-skizze.ist-vergleich .ist-feld-1 img { filter: grayscale(1) brightness(.55) contrast(1.1); object-position: 100% 50%; transform: none; }
.spv-skizze.ist-vergleich .ist-feld-2 img { filter: saturate(1.35) brightness(1.08); object-position: 0% 50%; }
/* Angebot: großes Preisschild in der Mitte. */
.spv-skizze.ist-angebot .ist-feld-2 b { background: var(--spv-akzent); border-radius: 8px; bottom: auto; font-size: 17px; left: 50%; padding: 4px 9px; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); }
.spv-skizze.ist-angebot .ist-feld-2 img { filter: brightness(.7); }
/* 3 Gründe: große Ziffern. */
.spv-skizze.ist-gruende b { background: none; bottom: auto; font-size: 28px; font-weight: 800; left: 8px; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); top: 4px; }
.spv-skizze.ist-gruende .spv-skizze-feld img { filter: brightness(.8); }
/* Kundenstimme: Zitat als Sprechblase, daneben Sterne. */
.spv-skizze.ist-stimme .ist-feld-1 { flex-grow: 1.6; }
.spv-skizze.ist-stimme .ist-feld-1 b { background: #fff; border-radius: 10px 10px 10px 2px; color: #111; font-size: 11px; white-space: normal; }
.spv-skizze.ist-stimme .ist-feld-2 b { background: none; bottom: auto; color: #ffc94a; font-size: 13px; left: 50%; letter-spacing: 1px; top: 50%; transform: translate(-50%, -50%); }
.spv-skizze.ist-stimme .ist-feld-2 img { filter: blur(2px) brightness(.45); }
@media (max-width: 900px) { .spv-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .spv-ablauf { gap: 8px; }
  .spv-ablauf li { padding: 12px 30px 12px 12px; }
  .spv-ablauf-nr { font-size: 22px; right: 10px; top: 10px; }
  .spv-aufbau { padding: 12px; }
  .spv-aufbau-karten { grid-template-columns: minmax(0, 1fr); }
  .spv-skizze { aspect-ratio: 16 / 6; }
}
@media (prefers-reduced-motion: reduce) { .spv-aufbau-karte { transition: none; } .spv-aufbau-karte:hover { transform: none; } }

/* AL-20261007-13 bis -15: Ergebnis mit Fassungen, Neuschnitt, zweite Fassung. */
.spv-ergebnis-fuss { flex-wrap: wrap; }
.spv-ergebnis-fuss .spv-knopf i { font-size: 17px; }
.spv-ton .spv-zweite { margin: 4px 0 12px; }

/* AL-20261007-20: Szenen im Briefing - Anzahl per Regler, Länge per Antippen. */
.spv-zeitleiste > button { color: inherit; cursor: pointer; font: inherit; text-align: left; transition: border-color .15s, background .15s; }
.spv-zeitleiste > button:hover { border-color: var(--spv-akzent); }
.spv-zeitleiste > button:focus-visible { outline: 2px solid var(--spv-akzent); outline-offset: 2px; }
.spv-szenen { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.spv-szenen:empty { display: none; }
.spv-szenen-titel { color: var(--spv-leise); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.spv-szenen-knopf { align-items: center; background: #101118; border: 1px solid var(--spv-feld-rand); border-radius: 999px; color: var(--spv-text); cursor: pointer; display: inline-flex; font-size: 18px; height: 34px; justify-content: center; line-height: 1; width: 34px; }
.spv-szenen-knopf:hover:not([disabled]) { border-color: var(--spv-akzent); }
.spv-szenen-knopf[disabled] { cursor: not-allowed; opacity: .35; }
.spv-szenen-knopf:focus-visible { outline: 2px solid var(--spv-akzent); outline-offset: 2px; }
.spv-szenen-zahl { font-size: 17px; font-weight: 700; min-width: 1.4em; text-align: center; }
.spv-szenen-auto { color: var(--spv-leise); font-size: 12px; }
.spv-szenen-hinweis { color: var(--spv-leise); flex-basis: 100%; font-size: 12px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .spv-zeitleiste > button { transition: none; } }

/* --- Kompakte Startmaske (TOOL03-02/-03, Betreiber 08.10./09.10.2026: „zu überladen … deutlich kompakter“) ---
 * Leinwand als schmaler Streifen (Vorschau links, Titel rechts), Erzählweisen
 * ohne Bildstreifen, Look als kleine Kacheln. Szenenleiste und Szenenzahl
 * stecken in „Szenen fein einstellen“ (zugeklappt); die Länge wählt man über
 * 10–90 s. Die Elemente bleiben im DOM, nur ihre Darstellung ist kleiner. */
.spv-regie .spv-leinwand-buehne { aspect-ratio: auto; height: 132px; justify-content: flex-start; padding-left: 16px; }
.spv-regie .spv-leinwand-rahmen { height: 108px; }
.spv-regie .spv-leinwand::after { background: linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, .55)); }
.spv-regie .spv-leinwand figcaption { align-content: center; background: none; bottom: 0; left: 232px; padding: 0 20px 0 0; top: 0; }
.spv-regie .spv-leinwand.ist-hoch figcaption { left: 100px; }
.spv-regie .spv-leinwand figcaption strong { font-size: clamp(24px, 2.6vw, 34px); }
.spv-regie .spv-aufbau { gap: 10px; margin: 12px 0; padding: 14px 16px; }
.spv-regie .spv-aufbau-karte .spv-skizze { display: none; }
.spv-regie .spv-aufbau-copy { padding: 10px 12px; }
.spv-regie .ist-looks .spv-look-bild { aspect-ratio: auto; height: 44px; }
.spv-regie .ist-looks b { font-size: 11.5px; padding: 6px 8px; }
/* Briefing und Pult enger: Logo und Bilder nebeneinander, flachere Upload-Felder,
 * Untertitel des Pults ausgeblendet (er erklärte nur die Leinwand). */
.spv-regie .spv-panel { gap: 12px; }
.spv-regie .spv-markenpanel .spv-marke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spv-regie .spv-panel .spv-upload { min-height: 46px; }
.spv-regie .spv-pult-kopf p { display: none; }
.spv-feinschnitt { display: grid; gap: 10px; }
.spv-feinschnitt > summary { color: var(--spv-leise); cursor: pointer; font-size: 12.5px; list-style: none; width: max-content; }
.spv-feinschnitt > summary::-webkit-details-marker { display: none; }
.spv-feinschnitt > summary::before { content: "▸ "; }
.spv-feinschnitt[open] > summary::before { content: "▾ "; }
.spv-feinschnitt > summary:hover, .spv-feinschnitt > summary:focus-visible { color: #fff; }
@media (max-width: 560px) {
  .spv-regie .spv-leinwand-buehne { height: 110px; padding-left: 10px; }
  .spv-regie .spv-leinwand-rahmen { height: 90px; }
  .spv-regie .spv-leinwand figcaption { left: 172px; }
  .spv-regie .spv-leinwand.ist-hoch figcaption { left: 70px; }
}

/* Frühere Fassungen eines Szenenbilds (TOOL03-05, 10.10.2026). */
.spv-fruehere{display:grid;gap:6px;margin:8px 0 0}
.spv-fruehere>span{color:#aeb4c0;font-size:12px;font-weight:700}
.spv-fruehere>div{display:flex;gap:8px;flex-wrap:wrap}
.spv-fruehere figure{display:grid;gap:6px;width:120px;margin:0}
.spv-fruehere img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid #2a2f3b;border-radius:8px}
.spv-stufen-raster.ist-hoch .spv-fruehere img{aspect-ratio:9/16}
.spv-fruehere .spv-knopf{min-height:30px;padding:0 10px;font-size:12px}
.spv-fruehere small{color:#8b93a3;font-size:11.5px}
/* Template-Karten (10.10.2026): fertige Einstellungen mit Vorschaubild statt "Wie erzählst du es?". */
.spv-templates { background: var(--spv-feld); border: 1px solid var(--spv-rand); border-radius: 16px; display: grid; gap: 12px; margin: 16px 0; padding: 16px; }
.spv-templates .spv-panel-kopf { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.spv-templates h3 { margin: 0; }
/* Eine Reihe zum Wischen: weitere Templates verlängern sie nur, das Fenster wird nicht höher. */
.spv-tpl-raster { display: flex; gap: 12px; margin: 0 -4px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 4px 12px; scroll-padding: 0 4px; scroll-snap-type: x proximity; scrollbar-color: #3b4252 transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.spv-tpl-raster::-webkit-scrollbar { height: 8px; }
.spv-tpl-raster::-webkit-scrollbar-thumb { background: #3b4252; border-radius: 999px; }
.spv-tpl-karte { flex: 0 0 min(250px, 78%); scroll-snap-align: start; }
.spv-tpl-karte { background: #0d0e14; border: 2px solid var(--spv-feld-rand); border-radius: 14px; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 0; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; padding: 0; text-align: left; transition: border-color .2s, transform .2s, box-shadow .2s; }
.spv-tpl-karte:hover { border-color: rgba(255, 54, 86, .55); transform: translateY(-2px); }
.spv-tpl-karte:focus-visible { outline: 2px solid var(--spv-akzent); outline-offset: 3px; }
.spv-tpl-karte.ist-gewaehlt { border-color: var(--spv-akzent); box-shadow: 0 0 0 1px var(--spv-akzent), 0 10px 30px rgba(255, 54, 86, .22); }
.spv-tpl-bild { align-items: center; aspect-ratio: 16 / 10; background: #07080b; display: flex; justify-content: center; overflow: hidden; position: relative; }
.spv-tpl-hintergrund { filter: blur(14px) brightness(.5); height: 100%; inset: 0; object-fit: cover; position: absolute; transform: scale(1.15); width: 100%; }
.spv-tpl-rahmen { aspect-ratio: 16 / 9; border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .55); height: 84%; overflow: hidden; position: relative; }
.spv-tpl-bild.ist-hoch .spv-tpl-rahmen { aspect-ratio: 9 / 16; }
.spv-tpl-rahmen img { display: block; height: 100%; object-fit: cover; transition: transform .3s ease; width: 100%; }
.spv-tpl-karte:hover .spv-tpl-rahmen img { transform: scale(1.06); }
.spv-tpl-bild em { background: rgba(0, 0, 0, .66); border-radius: 6px; bottom: 8px; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; padding: 3px 8px; position: absolute; right: 8px; }
.spv-tpl-karte.ist-gewaehlt .spv-tpl-bild em { background: var(--spv-akzent); }

/* Feineinstellungen: Look, Modell, Tempo, Tonalität, Texte, Auflösung hinter einem Aufklapper. */
.spv-erweitert { background: #0b0c11; border: 1px solid var(--spv-rand); border-radius: 12px; display: grid; gap: 18px; padding: 12px 16px; }
.spv-erweitert:not([open]) { gap: 0; }
.spv-erweitert > summary { align-items: baseline; color: #fff; cursor: pointer; display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 700; gap: 4px 12px; list-style: none; }
.spv-erweitert > summary::-webkit-details-marker { display: none; }
.spv-erweitert > summary::before { color: var(--spv-leise); content: "▸"; }
.spv-erweitert[open] > summary::before { content: "▾"; }
.spv-erweitert > summary small { color: var(--spv-leise); font-size: 12px; font-weight: 400; }
.spv-erweitert > summary:hover, .spv-erweitert > summary:focus-visible { color: var(--spv-akzent); }
@media (prefers-reduced-motion: reduce) { .spv-tpl-karte, .spv-tpl-rahmen img { transition: none; } }
/* Feste Templates: keine Regler, nur eine Übersicht und feste Längen im Drehbuch. */
.spv-fest .spv-fest-fakten { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.spv-fest .spv-fest-fakten li { background: #0b0c11; border: 1px solid var(--spv-rand); border-radius: 999px; color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; }
.spv-laenge-fest { background: #0b0c11; border: 1px solid var(--spv-rand); border-radius: 8px; color: #fff; display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 10px; }
/* Regiepult kompakt (10.10.2026, Betreiber: "die ganze rechte Seite ist frei"): ab 900 px stehen Format links
   und Länge, Auflösung rechts nebeneinander; Titel, Feineinstellungen und Hinweis laufen über die ganze Breite. */
@media (min-width: 900px) {
  .spv-optionen.spv-pult { align-items: start; column-gap: 40px; gap: 16px 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 18px 22px 16px; }
  .spv-optionen.spv-pult > .spv-pult-kopf, .spv-optionen.spv-pult > .spv-erweitert, .spv-optionen.spv-pult > .spv-hinweis, .spv-optionen.spv-pult > .spv-fest-fakten { grid-column: 1 / -1; }
  .spv-optionen.spv-pult > .spv-pult-paar { grid-template-columns: minmax(0, 1fr); }
  .spv-optionen.spv-pult > .spv-pult-laenge { gap: 14px; }
}

/* WL-05 (12.10.2026): Storyboard-Fenster am PC ohne Kreuz oben rechts - geschlossen wird
   mit einem Klick in den Hintergrund (oder Escape). Tablet und Handy behalten es. Nur das
   Storyboard; das Werbestudio-Fenster ist gleich gebaut, aber nicht Teil des Auftrags. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .spv-fenster[data-sb-fenster] .spv-zu { display: none; }
}

/* WL-06 (12.10.2026): Ohne Storyboards steht der Kasten "Dein erstes Storyboard" in der
   linken Spalte unter dem Text, nicht über beide Spalten, und endet etwa auf Höhe der
   Bildunterkante rechts. Auf dem Handy (eine Spalte) steht er wie bisher unter dem Bild. */
.sb-leer-ort:empty { display: none; }
.sb-leer-ort .spv-leer { box-sizing: border-box; width: 600px; max-width: 100%; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sb-leer-ort .spv-leer > h3, .sb-leer-ort .spv-leer > p { grid-column:1; }
.sb-leer-ort .spv-leer > div { grid-column: 1; grid-row: 3; justify-self: end; }
@media (min-width: 761px) {
  .sb-leer-ort { margin-top: 22px; }
  .sb-leer-ort .spv-leer { gap: 10px; padding: 18px 20px; }
  .sb-leer-ort .spv-leer h3 { font-size: 17px; }
  .sb-leer-ort .spv-leer p { font-size: 13px; line-height: 1.5; }
}
/* Handy: die Textspalte wird durchsichtig, damit der Kasten hinter das Bild rücken
   kann. Der Zeilenabstand des Rasters gilt dann nur noch vor Bild und Kasten. */
@media (max-width: 760px) {
  .sb-leer-ort .spv-leer { grid-template-columns:minmax(0,1fr); }
  .sb-leer-ort .spv-leer > div { grid-column:1; grid-row:auto; }
  .spv-einstieg.ist-storyboard { row-gap: 0; }
  .spv-einstieg.ist-storyboard .sb-einstieg-text { display: contents; }
  .spv-einstieg.ist-storyboard .sb-einstieg-visual { margin-top: 24px; }
  .spv-einstieg.ist-storyboard .sb-leer-ort { margin-top: 24px; order: 3; }
}
/* MOB19-03 (19.10.2026): Tablet hochkant einspaltig wie am Handy - zwei Spalten
   in rund 465 px ergaben eine lange schmale Textspalte neben einem kleinen Bild. */
@media (min-width: 761px) and (max-width: 959px) {
  .spv-einstieg.ist-storyboard { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .spv-einstieg.ist-storyboard .sb-einstieg-text { display: contents; }
  .spv-einstieg.ist-storyboard .sb-einstieg-visual { margin-top: 24px; }
  .spv-einstieg.ist-storyboard .sb-leer-ort { margin-top: 24px; order: 3; }
}