/* Letzte Cleaning Prüfung: 23.09.2026 */
/* Letztes Cleaning: 13.09.2026 */

.shorts-history-open {
  right: auto !important;
  left: 11px;
}

/* Muelleimer LINKS, Download rechts - dieselbe Anordnung wie im Thumbnail-
   und Videoverlauf (Wunsch vom 01.09.2026). */
.shorts-history-delete {
  position: absolute;
  z-index: 4;
  top: 11px;
  left: 11px;
  right: auto;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  background: rgba(10, 11, 16, 0.78);
  color: #d9dce5;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.82;
  backdrop-filter: blur(8px);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.shorts-history-delete:hover,
.shorts-history-delete:focus-visible {
  border-color: #ff3157;
  background: #8f1732;
  color: #fff;
  opacity: 1;
  transform: scale(1.04);
  outline: none;
}

.shorts-history-delete.is-busy i {
  animation: shortsHistoryPulse 0.8s ease-in-out infinite;
}

/* Keep the final action visually connected to the output configuration. */
.shorts-form {
  gap: 0;
}

.shorts-form > .shorts-step:first-of-type {
  margin-bottom: 12px;
}

.shorts-form > .shorts-step:nth-of-type(2) {
  border-radius: 14px 14px 0 0;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.shorts-actions {
  justify-content: flex-end;
  margin: 0;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #12131a;
}

.shorts-actions > label {
  margin-right: auto;
}

.shorts-actions > .cc-button.primary {
  min-width: 250px;
  justify-content: center;
}

.shorts-rights-notice {
  width: fit-content;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(255, 255, 255, .018);
}

.shorts-rights-notice > i {
  flex: 0 0 auto;
  color: #ff3656;
  font-size: 15px;
}

/* Quellbereich: DERSELBE Schnittplatz wie in Video-Uebersetzung und
   Transkription (07.09.2026). Buehne, Abspielknopf, Uhr, Zeitleiste und
   Fusszeile kommen als Klassen aus ai-contentfactory-control-center.css
   (.schnittplatz, .schnitt-buehne, .schnitt-play, .schnitt-uhr,
   .schnitt-leiste, .schnitt-fuss) - hier steht nur, was die Shorts
   zusaetzlich brauchen. Vorher hatte der Shorts-Dialog eine eigene, kleinere
   Vorschau mit Zeitleiste daneben; der Kunde wollte den einen Schnittplatz. */
.shorts-source-preview { box-sizing: border-box; width: 100%; max-width: 100%; margin: 12px 0 0; }
.shorts-source-preview.schnittplatz { display: grid; gap: 10px; }
.shorts-source-preview[hidden] { display: none; }
/* Die generische Vorschau (form-v2) setzt 340x191px - die Buehne fuellt hier
   die volle Breite. Sie zeigt bewusst das QUELLVIDEO im Quellformat: hier wird
   geschnitten. Wie das Ergebnis aussieht (Hochformat, Reframing), zeigt die
   Untertitel-Vorschau daneben (shortsVorschauBildZeichnen). */
.schnittplatz.shorts-source-preview .shorts-schnitt-buehne { display: block; width: 100%; height: auto; }
.schnittplatz.shorts-source-preview .shorts-schnitt-buehne video { display: block; width: 100%; height: 100%; border-radius: 0; background: #04050a; object-fit: contain; }
.shorts-source-preview figcaption[hidden] { display: none; }
/* Die Schere ist die gemeinsame (.ausschnitt-schere); "aktiv" heisst hier
   aria-pressed wie dort. */
.shorts-range-toggle.active { border-color: #ff304f; background: #ff304f; color: #fff; }
/* Das Dateifeld erbt vom Publisher-Schritt (ai-contentfactory-pages.css,
   .youtube-publisher-step .youtube-video-source-local): dort steht es in
   Spalte 1 neben dem Thumbnail-Feld, und die Vorschau ist 292px breit. Der
   Shorts-Dialog hat kein zweites Feld daneben - hier nimmt das Feld beide
   Spalten, und die Buehne die volle Breite (gemessen am 07.09.2026: 292px
   statt 1100px, weil die Publisher-Regel gewann). */
[data-shorts-production-modal] .youtube-publisher-step .youtube-video-source-local,
#workspace-body[data-tool="shorts-reels-cutter-briefing"] .youtube-publisher-step .youtube-video-source-local { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
[data-shorts-production-modal] .youtube-publisher-step .youtube-video-source-local .video-file-preview,
#workspace-body[data-tool="shorts-reels-cutter-briefing"] .youtube-publisher-step .youtube-video-source-local .video-file-preview { width: 100%; max-width: none; }

.shorts-range-editor { display: grid; gap: 12px; }
.shorts-range-editor[hidden] { display: none; }
.shorts-range-editor header,
.shorts-range-editor header > span { display: flex; align-items: center; }
.shorts-range-editor header { justify-content: space-between; gap: 12px; padding-inline: 5px; }
.shorts-range-editor header > span { gap: 7px; color: #f1f3f8; font-size: 11px; }
.shorts-range-editor header > span i { color: #ff3656; font-size: 15px; }
.shorts-range-editor header button { padding: 0; border: 0; background: transparent; color: #8e96a9; font-size: 9px; font-weight: 700; cursor: pointer; }
.shorts-range-editor header button:hover { color: #fff; }
.shorts-range-track { margin: 0 5px; }
.shorts-range-editor .schnitt-spanne { display: flex; align-items: center; gap: 10px; }
.shorts-range-editor .schnitt-spanne strong { color: #e7eaf1; font-size: 10px; }
@media (max-width: 640px) {
  .shorts-range-hint { display: none; }
}

/* Die Werkzeugseite (Vollseite) bekommt KEINE eigene Bühne mehr: Seit dem
   07.09.2026 gilt in beiden Umgebungen derselbe Schnittplatz wie bei der
   Video-Übersetzung (siehe oben). */
.shorts-overview-back {
  margin-bottom: 12px;
}

/* Use the available result area when a production contains only one Short. */
.shorts-results:has(.shorts-result-grid > article:only-child) {
  width: 100%;
  max-width: 1020px;
  margin-right: auto;
  margin-left: 0;
}

.shorts-result-grid:has(> article:only-child) {
  grid-template-columns: minmax(360px, 470px);
  justify-content: start;
}

.shorts-result-grid > article:only-child {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid #292c37;
  border-radius: 16px;
  background: #12131a;
}

.shorts-result-grid > article:only-child > video {
  width: 100%;
  height: auto;
  max-height: 835px;
  object-fit: contain;
  border: 0;
  border-bottom: 1px solid #292c37;
  border-radius: 0;
  background: #07080b;
}

.shorts-result-grid > article:only-child > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.shorts-result-grid > article:only-child .cc-button {
  align-self: flex-start;
  min-width: 160px;
  margin-top: 26px;
}

.shorts-result-grid > article:only-child strong {
  margin: 9px 0;
  font-size: 16px;
  line-height: 1.35;
}

.shorts-result-grid > article:only-child p {
  min-height: 0;
  font-size: 12px;
  line-height: 1.6;
}

.shorts-results:has(.shorts-result-grid > article:only-child) > header,
.shorts-results:has(.shorts-result-grid > article:only-child) > footer {
  width: min(470px, 100%);
  margin-right: auto;
  margin-left: 0;
}

.shorts-results:has(.shorts-result-grid > article:only-child) > footer {
  justify-content: flex-start;
}

@media (max-width: 720px) {
  .shorts-result-grid:has(> article:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .shorts-result-grid > article:only-child {
    grid-template-columns: 1fr;
  }

  .shorts-result-grid > article:only-child > video {
    height: auto;
  }
}

@media (max-width: 560px) {
  .shorts-actions > .cc-button.primary {
    width: 100%;
    min-width: 0;
  }
}

/* Single-short result: centered, compact preview with delayed metadata overlay. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])){width:min(560px,calc(100vw - 24px))}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-detail-content{padding:14px 16px 18px}
.shorts-results:has(.shorts-result-grid > article:not([hidden])){max-width:520px!important;margin-inline:auto!important}
.shorts-results:has(.shorts-result-grid > article:not([hidden]))>header,
.shorts-results:has(.shorts-result-grid > article:not([hidden]))>footer{width:100%!important;margin-inline:0!important}
.shorts-result-grid:has(>article:not([hidden])){display:flex!important;justify-content:center!important}
/* Nur die gerade sichtbare Karte gross zeigen. Ohne das ":not([hidden])" hier
   wuerde diese Regel display:block!important auch auf die vom Karussell
   versteckten Karten erzwingen und deren [hidden]-Ausblendung ueberstimmen -
   die Spezifitaet waere hoeher als die der Ausblendregel unten. */
.shorts-result-grid:has(>article:not([hidden]))>article:not([hidden]){position:relative!important;width:min(500px,100%)!important;display:block!important}
/* Das eigentliche Verstecken: das Karussell (mountShortsDetailNavigation)
   setzt hidden per JavaScript; diese Regel sorgt dafuer, dass es auch
   sichtbar wirkt, unabhaengig von sonstigen Grid-/Flex-Regeln in dieser
   Datei. Vorher blieb bei mehreren Clips versehentlich jede Karte im
   Layout sichtbar, obwohl "hidden" gesetzt war - das liess die Pfeile zum
   Wechseln zwischen Clips wirkungslos aussehen. */
.shorts-result-grid > article[hidden] { display: none !important; }
.shorts-result-grid>article:not([hidden])>.shorts-video-shell{position:relative;width:100%;background:#07080b}
.shorts-result-grid>article:not([hidden])>.shorts-video-shell>video{display:block;width:100%;height:auto;max-height:76vh!important;aspect-ratio:9/16;object-fit:contain}
.shorts-download-icon{position:absolute;top:10px;right:10px;z-index:4;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(7,8,12,.78);color:#fff;cursor:pointer;opacity:.9}
.shorts-download-icon:hover{background:#ff3157;border-color:#ff3157}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta{position:absolute;right:0;bottom:0;left:0;z-index:3;display:grid;gap:7px;padding:108px 18px 18px;background:linear-gradient(180deg,transparent 0%,rgba(5,6,10,.86) 58%,rgba(5,6,10,.97) 100%);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}
.shorts-result-grid>article:not([hidden]).is-hover-info>.shorts-result-meta{opacity:1;transform:none}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta small{font-size:10px}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta strong{margin:0;font-size:16px;line-height:1.3}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta p{min-height:0;margin:0;font-size:12px;line-height:1.5}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta small{display:flex;align-items:center;gap:6px;color:#ff6680;letter-spacing:.12em}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta small i{font-size:13px;letter-spacing:0}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta strong{display:block;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta p{display:flex;align-items:flex-start;gap:7px;color:#d4d8e2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta p i{flex:none;margin-top:2px;color:#ff5572}
.shorts-meta-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.18);color:#bac1cf;font-size:10px}
.shorts-meta-tags span{display:inline-flex;align-items:center;gap:4px}
.shorts-meta-tags i{color:#ffcf5b;font-size:13px}
.shorts-result-grid>article:not([hidden])>div:not(.shorts-video-shell):not(.shorts-result-meta){display:none!important}
.shorts-result-grid>article:not([hidden])>.shorts-result-meta{min-height:0!important}
.shorts-result-grid>article:not([hidden]):hover>.shorts-result-meta{opacity:1;transform:none;transition-delay:.7s}
.shorts-result-grid>article:not([hidden]).is-pointer-moving>.shorts-result-meta{opacity:0!important;transform:translateY(8px)!important;transition-delay:0s!important}
.shorts-custom-player{position:relative;isolation:isolate;cursor:pointer;overflow:hidden}
.shorts-custom-player:after{position:absolute;z-index:1;inset:auto 0 0;height:34%;content:"";background:linear-gradient(transparent,rgba(0,0,0,.84));pointer-events:none}
.shorts-custom-player>video{position:relative;z-index:0}
.shorts-player-center{position:absolute;z-index:3;left:50%;top:50%;display:grid;width:64px;height:64px;padding:0;place-items:center;border:1px solid rgba(255,255,255,.23);border-radius:50%;background:rgba(8,9,14,.7);color:#fff;font-size:29px;cursor:pointer;transform:translate(-50%,-50%);box-shadow:0 15px 38px rgba(0,0,0,.4),0 0 28px rgba(255,48,79,.17);backdrop-filter:blur(10px);transition:opacity .16s ease,transform .16s ease,background .16s ease}
.shorts-player-center:hover{background:#ff304f;transform:translate(-50%,-50%) scale(1.06)}
.shorts-custom-player.is-playing .shorts-player-center{opacity:0;pointer-events:none}
.shorts-custom-player:hover.is-playing .shorts-player-center{opacity:.82;pointer-events:auto}
.shorts-player-controls{position:absolute;z-index:4;right:12px;bottom:10px;left:12px;display:grid;grid-template-columns:34px auto minmax(80px,1fr) 34px 34px;align-items:center;gap:8px;color:#fff;opacity:.94;transition:opacity .16s ease}
.shorts-custom-player:not(:hover).is-playing .shorts-player-controls{opacity:0}
.shorts-player-controls button{display:grid;width:34px;height:34px;padding:0;place-items:center;border:0;border-radius:9px;background:rgba(14,16,22,.66);color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(8px)}
.shorts-player-controls button:hover{background:#ff304f}
.shorts-player-controls span{min-width:72px;color:#f5f6f8;font-size:10px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 5px #000}
.shorts-player-controls input[type=range]{width:100%;height:4px;margin:0;appearance:none;border-radius:99px;background:linear-gradient(90deg,#ff304f var(--shorts-progress,0%),rgba(255,255,255,.28) var(--shorts-progress,0%));cursor:pointer}
.shorts-player-controls input[type=range]::-webkit-slider-thumb{width:13px;height:13px;appearance:none;border:2px solid #fff;border-radius:50%;background:#ff304f;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.shorts-player-controls input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#ff304f}
@media(max-width:560px){.shorts-player-controls{right:8px;bottom:7px;left:8px;grid-template-columns:30px minmax(70px,1fr) 30px 30px;gap:5px}.shorts-player-controls span{display:none}.shorts-player-controls button{width:30px;height:30px}}

/* The completed result should read as a standalone player, without a second card around it. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])){width:min(500px,calc(100vw - 24px));border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-detail-content{padding:0!important;min-height:0!important}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results{max-width:none!important}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid{margin:0!important}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article{border:0!important;border-radius:14px!important;background:transparent!important}
/* Der Short in der Grossansicht steckt in einem Telefon: die Fassung ist die
   Kante, das Video das Display. Rein gestalterisch - Bedienung, Groesse und
   Seitenverhaeltnis bleiben, wie sie waren. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell{
  position:relative;
  overflow:visible;
  padding:13px;
  line-height:0;
  border:0;
  border-radius:48px;
  background:linear-gradient(158deg,#39404f 0%,#1c1f28 44%,#0e1016 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 36px 74px rgba(0,0,0,.62),
    0 0 70px rgba(255,48,79,.10);
}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell>video{border-radius:36px;background:#05060a}
/* Die Insel oben - das Merkmal, an dem man ein Telefon sofort erkennt. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell::before{
  content:"";
  position:absolute;
  z-index:6;
  top:26px;
  left:50%;
  width:88px;
  height:25px;
  border-radius:99px;
  background:#04050a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transform:translateX(-50%);
  pointer-events:none;
}
/* Ein schwacher Glanz ueber dem Display. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell::after{
  content:"";
  position:absolute;
  z-index:5;
  inset:13px;
  border-radius:36px;
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 76%,rgba(255,255,255,.045));
  pointer-events:none;
}
/* Die Tasten an der Kante. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article{
  position:relative;
  transform-origin:52% 58%;
  will-change:transform;
}
/* Das Blaettern selbst: hinaus in die geklickte Richtung, herein von der
   anderen Seite - schraeg in Bewegungsrichtung, in der Mitte zurueck in die
   Ruhelage. Die Zeiten stehen auch in mountShortsDetailNavigation(); wer
   eine aendert, aendert beide. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article[data-shorts-swipe="raus-rechts"]{animation:short-raus-rechts .23s cubic-bezier(.55,0,.85,.35) both}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article[data-shorts-swipe="raus-links"]{animation:short-raus-links .23s cubic-bezier(.55,0,.85,.35) both}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article[data-shorts-swipe="rein-links"]{animation:short-rein-links .46s cubic-bezier(.18,.78,.24,1) both}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article[data-shorts-swipe="rein-rechts"]{animation:short-rein-rechts .46s cubic-bezier(.18,.78,.24,1) both}
@keyframes short-raus-rechts{
  from{opacity:1;transform:perspective(1500px) translateX(0) rotateY(0deg) rotate(0deg) scale(1)}
  to{opacity:0;transform:perspective(1500px) translateX(58%) rotateY(-26deg) rotate(3deg) scale(.88)}
}
@keyframes short-raus-links{
  from{opacity:1;transform:perspective(1500px) translateX(0) rotateY(0deg) rotate(0deg) scale(1)}
  to{opacity:0;transform:perspective(1500px) translateX(-58%) rotateY(26deg) rotate(-3deg) scale(.88)}
}
@keyframes short-rein-links{
  from{opacity:0;transform:perspective(1500px) translateX(-58%) rotateY(24deg) rotate(-3deg) scale(.9)}
  62%{opacity:1}
  to{opacity:1;transform:perspective(1500px) translateX(0) rotateY(0deg) rotate(0deg) scale(1)}
}
@keyframes short-rein-rechts{
  from{opacity:0;transform:perspective(1500px) translateX(58%) rotateY(-24deg) rotate(3deg) scale(.9)}
  62%{opacity:1}
  to{opacity:1;transform:perspective(1500px) translateX(0) rotateY(0deg) rotate(0deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article[data-shorts-swipe]{animation:none}
}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article::before{
  content:"";
  position:absolute;
  top:132px;
  left:-3px;
  width:3px;
  height:74px;
  border-radius:3px 0 0 3px;
  background:linear-gradient(180deg,#454c5e,#252932);
}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article::after{
  content:"";
  position:absolute;
  top:176px;
  right:-3px;
  width:3px;
  height:96px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#454c5e,#252932);
}
/* Bedienung und Download ruecken auf das Display, nicht auf die Fassung. */
/* In der Grossansicht wird geschaut, nicht gelesen: die Beschriftung, die im
   Verlauf beim Ueberfahren einblendet, bleibt hier weg. Sie legte sich sonst
   ueber das halbe Bild, sobald der Zeiger im Fenster ruhte. Titel, Laenge und
   Text stehen weiterhin an der Kachel im Verlauf. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-meta{display:none!important}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-player-controls{right:26px;bottom:26px;left:26px}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-download-icon{top:26px;right:26px}
@media(max-width:720px){
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell{padding:9px;border-radius:38px}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell>video{border-radius:29px}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell::after{inset:9px;border-radius:29px}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-meta{inset:auto 9px 9px;border-radius:0 0 29px 29px}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article{transform:none}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell::before{top:19px;width:74px;height:21px}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-player-controls{right:19px;bottom:19px;left:19px}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-download-icon{top:19px;right:19px}
}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-result-grid>article{width:max-content!important}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell>video{width:auto!important;height:min(820px,max(600px,calc(100vh - 150px)))!important;max-height:none!important;aspect-ratio:9/16}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell{width:auto!important}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-detail-close{position:absolute;top:-52px;right:-12px;float:none;margin:0}
@media(max-width:600px){.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell>video{height:min(680px,calc(100vh - 120px))!important}}
body.shorts-detail-modal-open{overflow:hidden}
.shorts-detail-dialog{position:relative}
/* Ohne etwas zum Blaettern verschwinden die Pfeile ganz (11.09.2026). */
.shorts-detail-nav[hidden]{display:none}
.shorts-detail-nav{position:absolute;top:50%;z-index:20;display:grid;place-items:center;width:42px;height:42px;border:1px solid #3a4050;border-radius:50%;background:rgba(15,18,27,.92);color:#fff;box-shadow:0 8px 24px #0008;transform:translateY(-50%);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}
.shorts-detail-nav:hover:not(:disabled){background:#ff304f;border-color:#ff304f}
.shorts-detail-nav:disabled{opacity:.28;cursor:default}
.shorts-detail-nav-prev{left:-58px}.shorts-detail-nav-next{right:-58px}
@media(max-width:640px){.shorts-detail-nav{width:36px;height:36px}.shorts-detail-nav-prev{left:6px}.shorts-detail-nav-next{right:6px}}
/* Kein backdrop-filter: der wurde bei jedem Bild des laufenden Videos neu
   gerechnet, und Chrome liess dabei die Kachelkanten des unscharfen
   Hintergrunds als Linien aufblitzen (Befund 07.09.2026). Unscharf wird
   stattdessen die Seitenhuelle darunter - einmal, per filter. */
body.shorts-detail-modal-open .factory-shell{filter:blur(18px) saturate(.62);transition:filter .18s ease}
/* Der Hintergrund wird so stark abgedunkelt wie bei den Video-Detailfenstern
   (.dubbing-detail-modal, .transcription-detail-modal in
   ai-contentfactory-result.css). Mit nur 84 % Deckung und ohne Weichzeichner
   war die Kachelwand dahinter noch deutlich zu sehen (11.09.2026). */
.shorts-detail-overlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:clamp(12px,2.2vw,32px);overflow:auto;background:rgba(2,3,8,.91);backdrop-filter:blur(20px) brightness(.4);-webkit-backdrop-filter:blur(20px) brightness(.4);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.shorts-detail-overlay.is-open{opacity:1;visibility:visible}
.shorts-detail-overlay.is-closing{opacity:0;visibility:hidden}
.shorts-detail-dialog{position:relative;width:min(1180px,calc(100vw - 36px));max-height:calc(100vh - 36px);overflow-y:auto;overflow-x:hidden;border:1px solid rgba(255,47,91,.28);border-radius:22px;background:linear-gradient(155deg,rgba(11,13,21,.99),rgba(7,8,14,.99));box-shadow:0 34px 100px rgba(0,0,0,.72),0 0 55px rgba(255,31,78,.08);transform:translateY(14px) scale(.985);transition:transform .2s ease}
.shorts-detail-overlay.is-open .shorts-detail-dialog{transform:translateY(0) scale(1)}
.shorts-detail-close{position:sticky;top:14px;z-index:8;float:right;display:grid;place-items:center;width:38px;height:38px;margin:14px 14px -52px 0;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(24,28,40,.92);color:#dce2ee;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:background .15s ease,color .15s ease,transform .15s ease}
.shorts-detail-close:hover{background:#ff2754;color:#fff;transform:translateY(-1px)}
/* Auf dem Desktop ist der Schliessknopf ueberfluessig (Betreiberwunsch vom
   02.09.2026): Klick auf den Hintergrund und Escape schliessen das Fenster.
   Auf dem Telefon (max-width 720px unten) bleibt er - dort fuellt der Dialog
   fast den ganzen Schirm, und die Zuruecktaste ist nicht auf jedem Geraet
   griffbereit. */
@media(min-width:721px){.shorts-detail-close{display:none}}
.shorts-detail-content{min-height:320px;padding:clamp(24px,3vw,44px)}
.shorts-detail-content>.cc-loading{min-height:300px}
.shorts-detail-dialog .shorts-results{width:100%;max-width:none;margin:0}
.shorts-detail-dialog .shorts-results>header{padding-right:54px}
.shorts-detail-dialog .shorts-result-grid{margin-inline:auto}
@media(max-width:720px){.shorts-detail-overlay{padding:0;align-items:end}.shorts-detail-dialog{width:100%;max-height:94vh;border-radius:20px 20px 0 0}.shorts-detail-content{padding:20px 14px 28px}.shorts-detail-close{top:10px;margin:10px 10px -48px 0}}

/* ==========================================================================
   Shorts-Startdialog, moderner Zuschnitt (01.09.2026)
   --------------------------------------------------------------------------
   Wunsch: "moderner und stylischer, so wie Higgsfield". Geaendert wird nur
   die Gestaltung - Feldnamen, data-config-keys und die Schrittstruktur
   bleiben unangetastet, damit das Einsammeln beim Start unveraendert
   funktioniert.

   Leitgedanken: weniger Rahmen, mehr Tiefe. Die Schrittnummern werden zu
   dezenten Marken statt Kaesten, Auswahlfelder bekommen eine groessere
   Klickflaeche mit klarem Fokusring, die Dateiauswahl wird zur grossen
   Abwurfflaeche und der Startknopf zur eindeutigen Hauptaktion.
   ========================================================================== */

[data-shorts-production-modal] .shorts-production-dialog{border:1px solid rgba(255,255,255,.07);border-radius:20px;background:linear-gradient(168deg,#0d0f15 0%,#090a0e 62%,#0b0c11 100%);box-shadow:0 40px 120px rgba(0,0,0,.82)}

/* Kopfzeile: Kicker kleiner und ruhiger, Titel groesser. */
[data-shorts-production-modal] .shorts-production-dialog>header small{color:#ff4d6a;font-size:9px;font-weight:800;letter-spacing:.18em}
[data-shorts-production-modal] .shorts-production-dialog>header h2{margin:4px 0 0;font:700 22px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.02em}

/* Schrittbloecke ohne Kastenoptik - eine feine Trennlinie genuegt. */
/* Deutlicher Luftraum VOR jedem Schritt (Wunsch vom 01.09.2026) - vorher
   klebte "Ergebnis festlegen" direkt unter dem Hinweistext der Dateiwahl.
   Die Schrift wird zugleich eine Spur kleiner, damit der Dialog trotz des
   groesseren Abstands kompakt bleibt. */
[data-shorts-production-modal] fieldset.workspace-group{margin:0;padding:26px 0 0;border:0;border-top:1px solid rgba(255,255,255,.06);background:transparent}
[data-shorts-production-modal] fieldset.workspace-group:first-of-type{border-top:0;padding-top:4px}
[data-shorts-production-modal] fieldset.workspace-group+fieldset.workspace-group{margin-top:24px}
[data-shorts-production-modal] fieldset.workspace-group>legend{display:flex;align-items:center;gap:10px;margin-bottom:13px;padding:0}
[data-shorts-production-modal] .wizard-step-number{display:grid;place-items:center;width:23px;height:23px;border:1px solid rgba(255,77,106,.35);border-radius:7px;background:rgba(255,48,79,.1);color:#ff6b83;font-size:9px;font-weight:800;letter-spacing:.04em}
[data-shorts-production-modal] fieldset.workspace-group>legend b{font:650 13.5px/1.2 'Space Grotesk',sans-serif;color:#f4f6fa}
[data-shorts-production-modal] fieldset.workspace-group>legend small{display:block;margin-top:2px;color:#8a93a5;font-size:10.5px}
/* Schritt 02 bleibt vor der Dateiauswahl als Orientierung sichtbar, kann aber
   erst mit einer konkreten Videoquelle bedient werden. */
[data-shorts-production-modal] .shorts-output-step.is-disabled{opacity:.42}
[data-shorts-production-modal] .shorts-output-step.is-disabled :is(input,select,button){cursor:not-allowed}

/* Auswahlfelder: groessere Flaeche, ruhiger Grund, klarer Fokusring. */
[data-shorts-production-modal] .workspace-field>label,
[data-shorts-production-modal] .workspace-field>span:first-child{margin-bottom:6px;color:#9aa3b4;font-size:9.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
[data-shorts-production-modal] .workspace-group-grid{gap:14px 16px}
/* Das Feld ist ein Raster (Beschriftung, Auswahl, Hilfetext). Steht es in
   einer Zeile neben einem Feld MIT Hilfetext, verteilt CSS Grid den freien
   Platz auf seine Zeilen - "Min. Laenge" wurde hoeher als "Anzahl Clips" und
   rutschte nach unten (gemeldet am 07.09.2026). Dieselbe Ursache wie bei
   Transkription und Video-Uebersetzung. */
[data-shorts-production-modal] .workspace-field{align-content:start}
[data-shorts-production-modal] .workspace-field select,
[data-shorts-production-modal] .workspace-field input[type="text"],
[data-shorts-production-modal] .workspace-field input[type="number"]{width:100%;min-height:42px;padding:0 38px 0 13px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.028);color:#f2f4f9;font-size:12.5px;appearance:none;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
[data-shorts-production-modal] .workspace-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
/* Die Bildanpassung wird dynamisch an das Formular angehaengt. Der gezielte
   Selektor sichert den Chevron auch gegen spaet geladene Select-Regeln. */
.shorts-reframe-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;background-size:17px!important}
[data-shorts-production-modal] .workspace-field select:hover,
[data-shorts-production-modal] .workspace-field input:hover{border-color:rgba(255,255,255,.16);background-color:rgba(255,255,255,.045)}
[data-shorts-production-modal] .workspace-field select:focus-visible,
[data-shorts-production-modal] .workspace-field input:focus-visible{border-color:rgba(255,64,94,.75);outline:none;box-shadow:0 0 0 3px rgba(255,48,79,.16)}
[data-shorts-production-modal] .workspace-field small{margin-top:6px;color:#767f91;font-size:10.5px;line-height:1.45}

/* Dateiauswahl als grosse Abwurfflaeche. */
[data-shorts-production-modal] .video-file-choose,
[data-shorts-production-modal] label.video-file-select{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:12px 15px;border:1px dashed rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.022);cursor:pointer;transition:border-color .16s ease,background .16s ease}
/* Der Hinweistext unter der Dateiwahl bekommt Luft nach unten, damit der
   naechste Schritt nicht direkt anschliesst. */
[data-shorts-production-modal] fieldset.workspace-group>div>small,
[data-shorts-production-modal] .shorts-step>small{display:block;margin-top:8px;padding-bottom:4px;color:#767f91;font-size:10.5px}
[data-shorts-production-modal] .video-file-choose:hover,
[data-shorts-production-modal] label.video-file-select:hover{border-color:rgba(255,64,94,.6);background:rgba(255,48,79,.05)}
[data-shorts-production-modal] .video-file-choose i,
[data-shorts-production-modal] label.video-file-select i{color:#ff5871;font-size:22px}

/* Der Untertitel-Schalter bleibt bewusst UNVERAENDERT: Ein zusaetzlicher
   Chip-Rahmen ergab einen doppelten Rahmen um den ohnehin gerahmten
   Schalter (Befund vom 01.09.2026). Seine bestehende Gestaltung genuegt. */

/* Rechtehinweis als ruhige Notiz. */
[data-shorts-production-modal] .workspace-rights-note,
[data-shorts-production-modal] .shorts-rights-note{border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.02);color:#8a93a5;font-size:11.5px;line-height:1.5}

/* Hauptaktion: kraeftiger Verlauf, klare Groesse. */
[data-shorts-production-modal] .workspace-run,
[data-shorts-production-modal] button[data-start-workflow]{min-height:50px;padding:0 26px;border:0;border-radius:13px;background:linear-gradient(135deg,#ff3d5e,#e0173c);color:#fff;font:700 14px/1 'Space Grotesk',sans-serif;letter-spacing:.01em;box-shadow:0 14px 34px rgba(255,32,70,.32);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
[data-shorts-production-modal] .workspace-run:hover:not(:disabled),
[data-shorts-production-modal] button[data-start-workflow]:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 42px rgba(255,32,70,.42);filter:brightness(1.06)}
[data-shorts-production-modal] .workspace-run:disabled,
[data-shorts-production-modal] button[data-start-workflow]:disabled{background:rgba(255,255,255,.07);color:#6d7688;box-shadow:none}

@media(max-width:700px){
  [data-shorts-production-modal] .shorts-production-dialog>header h2{font-size:19px}
  [data-shorts-production-modal] fieldset.workspace-group{padding-top:16px}
  [data-shorts-production-modal] .workspace-field select,
  [data-shorts-production-modal] .workspace-field input[type="text"]{min-height:44px}
  [data-shorts-production-modal] .workspace-run,
  [data-shorts-production-modal] button[data-start-workflow]{width:100%;min-height:48px}
}

/* Der Dialog nutzt teils die eigene Struktur (.shorts-form/.shorts-step),
   teils das Wizard-Geruest (fieldset.workspace-group). Beide bekommen
   denselben Zuschnitt, damit die Optik unabhaengig vom Aufbauweg stimmt. */
[data-shorts-production-modal] .shorts-step{padding:20px 0 0;border:0;border-top:1px solid rgba(255,255,255,.06);border-radius:0;background:transparent}
[data-shorts-production-modal] .shorts-form>.shorts-step:first-of-type{border-top:0;padding-top:4px;margin-bottom:0}
[data-shorts-production-modal] .shorts-form>.shorts-step:nth-of-type(2){border-radius:0}
[data-shorts-production-modal] .shorts-actions{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);border-radius:0;background:transparent}
[data-shorts-production-modal] .shorts-actions>.cc-button.primary{min-width:240px;min-height:50px;border:0;border-radius:13px;background:linear-gradient(135deg,#ff3d5e,#e0173c);color:#fff;font:700 14px/1 'Space Grotesk',sans-serif;box-shadow:0 14px 34px rgba(255,32,70,.32);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
[data-shorts-production-modal] .shorts-actions>.cc-button.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 42px rgba(255,32,70,.42);filter:brightness(1.06)}
[data-shorts-production-modal] .shorts-actions>.cc-button.primary:disabled{background:rgba(255,255,255,.07);color:#6d7688;box-shadow:none}
[data-shorts-production-modal] .shorts-rights-notice{border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:#8a93a5}
/* Fusszeile: Rechtehinweis links, Startknopf rechts (07.09.2026). */
[data-shorts-production-modal] .shorts-actions-zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
[data-shorts-production-modal] .shorts-actions-zeile .shorts-rights-notice{display:flex;align-items:center;gap:8px;flex:1 1 320px;max-width:640px;margin:0}
[data-shorts-production-modal] .shorts-actions-zeile .workspace-run{flex:0 0 auto;margin-left:auto}
@media(max-width:700px){[data-shorts-production-modal] .shorts-actions-zeile .shorts-rights-notice{flex-basis:100%;max-width:none}}
@media(max-width:700px){[data-shorts-production-modal] .shorts-actions>.cc-button.primary{width:100%;min-width:0}}

/* Kompakter Zuschnitt, durchgesetzt (01.09.2026)
   --------------------------------------------------------------------------
   Diese Datei wird VOR sieben weiteren Stylesheets geladen; deren Regeln
   ueberschrieben die Schriftgroessen im Dialog wieder. Der Dialog ist ein
   klar abgegrenzter Bereich (data-shorts-production-modal), deshalb ist
   !important hier vertretbar - es wirkt nirgendwo sonst. */
[data-shorts-production-modal] .shorts-production-dialog>header h2{font-size:19px!important}
[data-shorts-production-modal] .shorts-production-dialog>header small{font-size:8.5px!important}
[data-shorts-production-modal] fieldset.workspace-group>legend b,
[data-shorts-production-modal] .shorts-step>header b,
[data-shorts-production-modal] .shorts-step>legend b{font-size:13px!important}
[data-shorts-production-modal] fieldset.workspace-group>legend small,
[data-shorts-production-modal] .shorts-step>header small,
[data-shorts-production-modal] .shorts-step>legend small{font-size:10px!important}
[data-shorts-production-modal] .workspace-field>label,
[data-shorts-production-modal] .workspace-field>span:first-child{font-size:9px!important;margin-bottom:5px!important}
[data-shorts-production-modal] .workspace-field select,
[data-shorts-production-modal] .workspace-field input[type="text"],
[data-shorts-production-modal] .workspace-field input[type="number"]{min-height:38px!important;font-size:12px!important}
[data-shorts-production-modal] .workspace-field small,
[data-shorts-production-modal] .shorts-step small,
[data-shorts-production-modal] .shorts-rights-notice,
[data-shorts-production-modal] .workspace-rights-note{font-size:10px!important;line-height:1.45!important}
/* Die Erklaerkarte ganz oben ("Aus einem Video werden fertige Shorts")
   nimmt sonst so viel Raum wie ein eigener Schritt. */
[data-shorts-production-modal] .shorts-intro,
[data-shorts-production-modal] .cc-hint,
[data-shorts-production-modal] .workspace-intro-card{padding:12px 14px!important}
[data-shorts-production-modal] .shorts-intro strong,
[data-shorts-production-modal] .cc-hint strong,
[data-shorts-production-modal] .workspace-intro-card strong{font-size:12.5px!important}
[data-shorts-production-modal] .shorts-intro p,
[data-shorts-production-modal] .cc-hint p,
[data-shorts-production-modal] .workspace-intro-card p{font-size:10.5px!important;margin-top:3px!important}
[data-shorts-production-modal] .shorts-toggles strong{font-size:12px!important}

/* === Untertitel-Vorschau, 07.09.2026 ======================================
   Eine hochkant-Buehne mit Beispieltext im gewaehlten Stil; daneben Hoehe,
   Zeilenzahl und Sprechfarbe. Die Feldgruppe (data-caption-option) bleibt
   sichtbar, wird aber deaktiviert, wenn keine Captions eingebrannt werden.
   Sie steht in Schritt 02 in
   voller Breite - ein fest neben dem Dialog schwebendes Panel scrollte mit
   der Ueberlagerung weg (backdrop-filter macht sie zum Bezugsrahmen). */
.shorts-caption-preview-field[hidden]{display:none!important}
.shorts-caption-preview-field.is-disabled{opacity:.42}
.shorts-caption-preview-field.is-disabled :is(input,select,button){cursor:not-allowed}
.shorts-caption-toggle{margin:0 0 12px}
.shorts-duration-field,.shorts-caption-toggle-field{align-self:start}
.shorts-caption-toggle-field .shorts-caption-toggle{margin:0}
.shorts-caption-toggle label{display:block}
.shorts-caption-toggle span{justify-content:center}
.shorts-caption-control select{width:100%;margin:0}
.shorts-caption-control small{display:block;margin-top:2px;color:#767f91;font-size:10.5px;line-height:1.4}
[data-shorts-production-modal] .shorts-caption-preview-field,#workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-caption-preview-field{grid-column:1/-1}
.shorts-caption-preview{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:16px;align-items:start;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}
/* Der Bildausschnitt gehoert unter die Buehne, nicht neben sie: er ist ihre
   Bedienung, kein weiterer Untertitelregler (11.09.2026). Im zweispaltigen
   Raster steht er deshalb in derselben Spalte, und die Untertitelregler
   nehmen die zweite Spalte ueber beide Zeilen. */
.shorts-caption-preview>.shorts-caption-stage{grid-column:1;grid-row:1}
.shorts-caption-preview>.shorts-frame-controls{grid-column:1;grid-row:2}
.shorts-caption-preview>.shorts-caption-controls{grid-column:2;grid-row:1/span 2}
.shorts-caption-stage{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:12px;background:linear-gradient(160deg,#2a1f3a 0%,#0e1018 55%,#1b0d12 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.shorts-caption-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shorts-caption-stage canvas[hidden]{display:none}
.shorts-caption-text{position:absolute;left:8%;right:8%;display:grid;gap:.15em;justify-items:center;color:#fff;text-align:center;line-height:1.15;paint-order:stroke fill;text-shadow:0 2px 6px rgba(0,0,0,.6);pointer-events:none}
.shorts-caption-line{display:flex;justify-content:center;gap:.55em;white-space:nowrap}
.shorts-caption-text .is-active{display:inline-block;transform:scale(1.18);transform-origin:center;margin:0 .08em}
/* Zwei Spalten: Zeilen und Sprechfarbe teilen sich eine Zeile (09.09.2026),
   alles andere spannt beide Spalten. Beide sind kurz - zwei Knoepfe und ein
   Farbfeld - und standen vorher untereinander mit viel Luft daneben. */
.shorts-caption-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.shorts-caption-controls.is-disabled,.shorts-caption-preview-field>small[data-caption-option].is-disabled{opacity:.42}
/* In der Tablet-Ansicht ist der Controls-Wrapper bewusst display:contents;
   die Transparenz muss deshalb direkt auf seine Felder wirken. */
.shorts-caption-preview.is-captions-disabled .shorts-caption-controls>.shorts-caption-control{opacity:.42}
.shorts-caption-controls.is-disabled :is(input,select,button){cursor:not-allowed}
.shorts-caption-controls>.shorts-caption-control{grid-column:1/-1}
.shorts-caption-controls>.shorts-caption-control:has([name="caption_lines"]),
.shorts-caption-controls>.shorts-caption-color{grid-column:span 1}
.shorts-caption-control{display:grid;gap:7px}
.shorts-caption-control>span{display:flex;align-items:center;gap:7px;color:#9aa3b4;font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.shorts-caption-control>span i{color:#ff5871;font-size:14px}
.shorts-caption-control output{margin-left:auto;color:#f4f6fa;font-size:11px;letter-spacing:0;text-transform:none}
.shorts-caption-control input[type="range"]{width:100%;margin:0;accent-color:#ff304f}
.shorts-caption-lines{display:inline-flex;width:max-content;justify-self:start;gap:4px;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.03)}
.shorts-caption-lines button{min-width:34px;min-height:30px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:#aab2c3;font:700 12px/1 inherit;cursor:pointer}
.shorts-caption-lines button.active{background:#ff304f;color:#fff}
.shorts-caption-color input[type="color"]{width:100%;height:36px;padding:2px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.03);cursor:pointer}
/* Auf Telefonen steht die Buehne ueber den Reglern. Sie hat keinen eigenen
   Inhalt mit Breite (nur absolut gesetzte Leinwand und Text): mit max-width
   und auto-Raendern schrumpfte sie im einspaltigen Raster auf 0 x 0, und der
   Kunde sah auf dem Handy keine Vorschau (Befund 08.09.2026). Sie braucht
   deshalb eine feste Breite; das Seitenverhaeltnis liefert die Hoehe. */
@media(max-width:720px){
  .shorts-caption-preview{grid-template-columns:minmax(0,1fr);gap:14px}
  /* Einspaltig stapelt sich ohnehin alles - feste Spalten und Zeilen
     wuerden hier Luecken reissen. */
  .shorts-caption-preview>.shorts-caption-stage,
  .shorts-caption-preview>.shorts-frame-controls,
  .shorts-caption-preview>.shorts-caption-controls{grid-column:auto;grid-row:auto}
  .shorts-caption-stage{width:min(200px,100%);max-width:none;margin:0 auto;justify-self:center}
}

/* === Seitenleiste neben dem Dialog, 07.09.2026 ============================
   Ab 1540px Fensterbreite steht die Untertitel-Vorschau rechts neben dem
   Dialog (Wunsch des Betreibers) und klebt beim Scrollen am oberen Rand.
   Schmaler wandert sie zurueck in Schritt 02 des Formulars. */
/* Breite aus dem Overlay (100 %), nicht aus 100vw: 100vw rechnet die Breite
   eines etwaigen Scrollbalkens mit und rundet auf Geraeten mit krummer
   CSS-Breite (etwa 411,43 px) nach oben - beides ergibt ein paar Pixel
   Ueberhang, und genau die lassen sich dann seitwaerts wegschieben. Das
   Overlay ist fixiert und exakt so breit wie der sichtbare Bereich, also
   ist 100 % der ehrlichere Bezug (08.09.2026). */
.shorts-production-stage{display:flex;align-items:flex-start;justify-content:center;gap:20px;margin:clamp(16px,3vw,44px) auto;width:min(1740px,calc(100% - 32px));max-width:calc(100% - 32px)}
.shorts-production-stage>.shorts-production-dialog{width:auto;margin:0;flex:0 1 1180px;min-width:0}
/* Zwei Spalten in der Seitenleiste (Wunsch des Betreibers, 07.09.2026 abends):
   links das Vorschaubild, rechts daneben Stil, Schrift, Hoehe, Zeilen und
   Sprechfarbe. Der Schalter oben laeuft ueber beide Spalten. */
.shorts-production-aside{position:sticky;top:24px;flex:0 0 540px;width:540px}
.shorts-production-aside[hidden]{display:none}
.shorts-production-aside .shorts-caption-preview-field{margin:0;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(11,12,18,.96);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.shorts-production-aside .shorts-caption-preview-field>label{display:block;margin-bottom:10px;color:#9aa3b4;font-size:9.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.shorts-production-aside .shorts-caption-preview{grid-template-columns:216px minmax(0,1fr);gap:18px;padding:0;border:0;background:transparent}
.shorts-production-aside .shorts-caption-stage{max-width:100%}
.shorts-production-aside .shorts-caption-preview-field>small{display:block;margin-top:10px;color:#767f91;font-size:10.5px;line-height:1.45}
@media(max-width:720px){.shorts-production-stage{margin:8px auto;width:calc(100% - 16px);max-width:calc(100% - 16px)}}

/* === Handy-Anordnung des Produktionsfensters, 08.09.2026 ==================
   Auf dem Telefon stand alles untereinander, jedes Feld in voller Breite,
   jeder Schritt in einem zweiten Rahmen - bis zur Untertitel-Vorschau musste
   man weit scrollen. Jetzt: Erklaerkarte einzeilig, kein innerer Rahmen um
   die Felder, die Vorschau steht am Anfang von Schritt 02 mit der Buehne
   links und Stil, Schrift, Zeilen daneben; die Regler darunter in voller
   Breite. Anzahl, Min. und Max. Laenge teilen sich eine Reihe. Die Regeln
   greifen nur im Produktionsfenster und nur bis 720 px. */
@media(max-width:720px){
  [data-shorts-production-modal] .workspace-intro-card{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:8px 11px!important}
  [data-shorts-production-modal] .workspace-intro-card .tool-icon{width:32px;height:32px;flex:0 0 32px;font-size:16px;border-radius:9px}
  [data-shorts-production-modal] .workspace-intro-card b{font-size:12px!important}
  [data-shorts-production-modal] .workspace-intro-card p{display:none}
  [data-shorts-production-modal] fieldset.workspace-group{padding-top:12px}
  [data-shorts-production-modal] fieldset.workspace-group+fieldset.workspace-group{margin-top:14px}
  [data-shorts-production-modal] fieldset.workspace-group>legend{margin-bottom:8px}
  [data-shorts-production-modal] .workspace-group[data-open] .workspace-group-grid{padding:0;border:0;background:transparent;box-shadow:none;gap:10px 8px}
  /* Der Hinweis "Waehle eine MP4-, MOV- oder WebM-Datei" hat seinen Dienst
     getan, sobald der Schnittplatz darunter steht. */
  [data-shorts-production-modal] .video-file-row+small:has(+.shorts-source-preview:not([hidden])){display:none}
  /* Schritt 02 als Sechserraster: drei kurze Felder je zwei Spalten,
     Sprache und Bildanpassung je volle Breite, die Vorschau ganz oben. */
  /* Mit [data-open] im Selektor, sonst gewinnt die spaeter geladene
     Einspaltenregel ".workspace-group[data-open] .workspace-group-grid". */
  [data-shorts-production-modal] .workspace-group[data-open] .shorts-options{grid-template-columns:repeat(6,minmax(0,1fr))}
  [data-shorts-production-modal] .shorts-options>.workspace-field{grid-column:span 6}
  [data-shorts-production-modal] .shorts-options>.workspace-field:has(select[name="clip_count"]),
  [data-shorts-production-modal] .shorts-options>.workspace-field:has(select[name="min_duration_seconds"]),
  [data-shorts-production-modal] .shorts-options>.workspace-field:has(select[name="max_duration_seconds"]){grid-column:span 2}
  [data-shorts-production-modal] .shorts-options>.shorts-duration-field,
  [data-shorts-production-modal] .shorts-options>.shorts-caption-toggle-field{grid-column:span 3}
  [data-shorts-production-modal] .shorts-options>.workspace-field:has(select[name="clip_count"])>small{display:none}
  [data-shorts-production-modal] .shorts-options>[data-caption-preview-slot]{order:-2}
  [data-shorts-production-modal] .shorts-options>.shorts-caption-preview-field{order:-1;grid-column:1/-1}
  [data-shorts-production-modal] .shorts-caption-toggle{margin-bottom:8px}
  /* Untertitel-Panel: Buehne 118 px links (9:16 = 210 px hoch), rechts
     daneben Stil, Schrift und Groesse; darunter Hoehe, dann Zeilen und
     Sprechfarbe in einer Zeile (09.09.2026, wie am Schreibtisch). */
  [data-shorts-production-modal] .shorts-caption-preview{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-areas:"buehne stil" "buehne schrift" "buehne groesse" "ausschnitt ausschnitt" "hoehe hoehe" "zeilen farbe";gap:8px 12px;padding:10px;align-items:start}
  [data-shorts-production-modal] .shorts-frame-controls{grid-area:ausschnitt}
  [data-shorts-production-modal] .shorts-caption-stage{grid-area:buehne;width:100%;max-width:none;margin:0}
  [data-shorts-production-modal] .shorts-caption-controls{display:contents}
  [data-shorts-production-modal] .shorts-caption-control{gap:5px}
  [data-shorts-production-modal] .shorts-caption-control>span{font-size:9px}
  [data-shorts-production-modal] .shorts-caption-control:has([name="caption_style"]){grid-area:stil}
  [data-shorts-production-modal] .shorts-caption-control:has([name="caption_font"]){grid-area:schrift}
  [data-shorts-production-modal] .shorts-caption-control:has([name="caption_font"])>small{display:none}
  [data-shorts-production-modal] .shorts-caption-control:has([name="caption_lines"]){grid-area:zeilen}
  [data-shorts-production-modal] .shorts-caption-control:has([name="caption_scale"]){grid-area:groesse}
  [data-shorts-production-modal] .shorts-caption-control:has([name="caption_position"]){grid-area:hoehe}
  [data-shorts-production-modal] .shorts-caption-control:has([name="caption_highlight"]){grid-area:farbe}
  [data-shorts-production-modal] .shorts-caption-lines button{min-width:30px;min-height:28px;padding:0 6px}
  [data-shorts-production-modal] .shorts-caption-color input[type="color"]{height:32px}
  [data-shorts-production-modal] .shorts-caption-preview-field>small{margin-top:6px}
}

/* --- Bildausschnitt: Zoom und Verschieben (11.09.2026) ---------------------
   Der Kunde zoomt mit dem Regler oder dem Mausrad und zieht den Ausschnitt
   im Bild zurecht. Der Zeiger zeigt an, dass die Buehne anfassbar ist. */
.shorts-frame-controls{display:grid;gap:4px;margin-top:6px}
.shorts-frame-controls.is-disabled{opacity:.42}
.shorts-frame-controls.is-disabled input{cursor:not-allowed}
.shorts-frame-hint{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#7d8291;font-size:9px}
.shorts-frame-hint span{display:inline-flex;align-items:center;gap:5px}
.shorts-caption-stage.is-zoomed{cursor:grab;touch-action:none}
.shorts-caption-stage.is-dragging{cursor:grabbing}

/* --- Auswahl der Ausschnitte vor dem Rendern (11.09.2026) -----------------
   Der Kunde sieht jede gefundene Stelle mit Standbild, Text, Bewertung und
   Begruendung und entscheidet, was gerendert wird. Vorher wurde einfach
   losgerendert, und unbrauchbare Clips waren trotzdem bezahlt. */
.shorts-selection{max-width:940px;margin:0 auto;display:grid;gap:14px}
.shorts-selection>header{display:flex;align-items:flex-start;gap:13px}
.shorts-selection>header>span{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:#ef1c46;color:#fff;font-size:21px}
.shorts-selection>header b{display:block;color:#f4f5f8;font-size:17px;line-height:1.3}
.shorts-selection>header p{margin:4px 0 0;color:#b6bccb;font-size:12px;line-height:1.55}
.shorts-candidate-list{display:grid;gap:10px}
.shorts-candidate{display:grid;grid-template-columns:24px 132px minmax(0,1fr);gap:12px;align-items:start;padding:11px;border:1px solid #292c37;border-radius:13px;background:#12131a;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.shorts-candidate:hover{border-color:#3b4050}
.shorts-candidate:has(input:checked){border-color:#7c1a34;background:#190f15}
.shorts-candidate>input{width:18px;height:18px;margin:2px 0 0;accent-color:#ff284c;cursor:pointer}
.shorts-candidate-frame{position:relative;display:block;overflow:hidden;border-radius:9px;background:#07080b;aspect-ratio:16/9}
.shorts-candidate-frame img{display:block;width:100%;height:100%;object-fit:cover}
.shorts-candidate-frame>i{display:grid;place-items:center;width:100%;height:100%;color:#3d4354;font-size:22px}
.shorts-candidate-frame b{position:absolute;left:5px;bottom:5px;padding:2px 6px;border-radius:5px;background:rgba(4,5,9,.82);color:#e8eaf0;font-size:8px;font-weight:700}
.shorts-candidate-body{display:grid;gap:7px;min-width:0}
.shorts-candidate-body strong{color:#f7f8fb;font-size:14px;line-height:1.4}
.shorts-candidate-score{display:flex;align-items:center;gap:7px}
.shorts-candidate-score>span{flex:1;height:5px;overflow:hidden;border-radius:4px;background:#272a34}
.shorts-candidate-score i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff284c,#ff9f43)}
.shorts-candidate.is-strong .shorts-candidate-score i{background:linear-gradient(90deg,#1ec97a,#7bd88f)}
.shorts-candidate.is-weak .shorts-candidate-score i{background:linear-gradient(90deg,#8a2030,#c4485c)}
.shorts-candidate-score b{color:#f2f3f7;font-size:13px}
.shorts-candidate-score small{color:#aab1c1;font-size:10px}
.shorts-candidate-why{color:#c3c9d5;font-size:11px;line-height:1.55}
.shorts-candidate-flags{display:flex;flex-wrap:wrap;gap:5px}
.shorts-candidate-flags em{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border:1px solid #6e3a1b;border-radius:5px;background:#221509;color:#ffae5b;font-size:8px;font-style:normal}
.shorts-candidate-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 0;color:#b4bbc9;font-size:12px;line-height:1.6}
.shorts-selection-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;border:1px solid #292c37;border-radius:13px;background:#101117}
.shorts-selection-actions small{color:#9298a9;font-size:10px}
.shorts-duration-field{gap:8px}
.shorts-duration-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shorts-duration-heading label{margin:0}
.shorts-duration-heading output{color:#f5f6fa;font-size:12px;font-weight:800;white-space:nowrap}
.shorts-duration-range{position:relative;height:43px;isolation:isolate}
.shorts-duration-track{position:absolute;top:10px;right:0;left:0;height:4px;border-radius:999px;background:#343843;overflow:hidden}
.shorts-duration-track i{position:absolute;top:0;bottom:0;left:8.82%;width:17.65%;border-radius:inherit;background:#ff3157}
.shorts-duration-range input[type="range"]{position:absolute;inset:0;width:100%;height:24px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none;outline:none}
.shorts-duration-range input[type="range"]::-webkit-slider-runnable-track{height:4px;background:transparent}
.shorts-duration-range input[type="range"]::-webkit-slider-thumb{width:15px;height:15px;margin-top:-5.5px;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;background:#ff3157;box-shadow:0 0 0 3px #171820,0 0 0 4px rgba(255,49,87,.35);cursor:grab;pointer-events:auto}
.shorts-duration-range input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing}
.shorts-duration-range input[type="range"]::-moz-range-track{height:4px;background:transparent}
.shorts-duration-range input[type="range"]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#ff3157;box-shadow:0 0 0 3px #171820,0 0 0 4px rgba(255,49,87,.35);cursor:grab;pointer-events:auto}
.shorts-duration-range input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #171820,0 0 0 5px rgba(255,49,87,.7)}
.shorts-duration-range input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #171820,0 0 0 5px rgba(255,49,87,.7)}
.shorts-duration-marker{position:absolute;top:27px;transform:translateX(-50%);color:#aeb4c2;font-size:10px;font-weight:700;line-height:1;white-space:nowrap;pointer-events:none}
.shorts-duration-marker.am-rand{transform:none}
.shorts-duration-marker.is-end.am-rand{transform:translateX(-100%)}
.shorts-duration-field>small{color:#8990a1;font-size:10px;line-height:1.45}
/* ai-contentfactory-polish.css folgt dieser Datei und gestaltet allgemein
   jedes Eingabefeld. Der Bereichsregler bleibt absichtlich rahmenlos, damit
   die Leiste Platz fuer beide Griffe hat und nicht in den Hilfetext ragt. */
html body .shorts-duration-range input[type="range"]{box-sizing:border-box;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html body .shorts-duration-range input[type="range"]:hover,html body .shorts-duration-range input[type="range"]:focus{border:0!important;background:transparent!important;box-shadow:none!important}
@media(max-width:720px){
  .shorts-candidate{grid-template-columns:22px minmax(0,1fr);gap:9px}
  .shorts-candidate-frame{grid-column:2}
  .shorts-candidate-body{grid-column:2}
  .shorts-selection-actions{flex-direction:column;align-items:stretch}
  .shorts-duration-field{padding-block:2px}
}

/* Ziehflaechen fangen ihre Beruehrung selbst ab.
   Dieses Werkzeug lebt vom Ziehen - Bild verschieben, Bildausschnitt, Anfang
   und Ende des Schnitts -, und ein zweiter Finger daneben zoomt sonst die
   Seite. Wo gezogen wird, nimmt die Flaeche die Beruehrung deshalb fuer sich
   (touch-action). Die Seite bleibt scrollbar; nur auf diesen Flaechen nicht.

   Anmerkung zur Fehlersuche: diese Regel entstand am 13.09.2026 aus der
   Annahme, der abgeschnittene rechte Rand sei Fingerzoom. Das war falsch -
   die Ursache stand im Kasten um die Videobuehne (siehe unten). Die Regel
   ist trotzdem richtig und bleibt, sie loest nur etwas anderes. */
.shorts-caption-stage,
.shorts-range-track,
[data-shorts-range-handle],
.shorts-frame-controls input[type="range"],
.shorts-caption-control input[type="range"] { touch-action: none; }


/* === Handyansicht: Kaesten raus, Trennlinien rein (13.09.2026) ============
   Gemeldet mit Bild: nach dem Laden eines Videos ragt der Schnittplatz rechts
   aus dem Dialog - Muelleimer, Uhr, "Ganzes Video" und das Ende der
   Zeitleiste sind abgeschnitten. Ohne Video passt alles, weil es den Kasten
   dann gar nicht gibt.

   Gerechnet: der Dialog gibt bei 390 px Geraetebreite rund 320 px Inhalt her.
   Darin steckte der Schnittplatz mit eigenem Rahmen (2 px) und eigener
   Polsterung (24 px) INNERHALB der Polsterung des Dialogs - 26 px, die der
   Buehne fehlten. Der Dialog hat overflow:hidden, also gab es keinen
   Querbalken und keinen Ueberlauf am Dokument zu messen; der Rand wurde
   einfach abgeschnitten. Genau daran ist die Suche vorher vorbeigelaufen.

   Der Wunsch des Betreibers dazu: "Dieses Video Fenster muss etwas kleiner
   gemacht werden", "bitte auch die Box darum weg machen. In der Handyansicht
   die ganzen Boxen minimieren und lieber mit Trennlinien arbeiten." Also
   dieselbe Behandlung wie die Werkzeugseiten sie bekommen haben: ein
   Abschnitt wird durch eine Linie vom naechsten getrennt, nicht durch einen
   Rahmen mit Ecken und Polster.

   Alles haengt an [data-shorts-production-modal] bzw. am Werkzeug selbst -
   der Schnittplatz gehoert auch der Uebersetzung und der Transkription, und
   deren Ansicht bleibt unberuehrt. */
@media (max-width: 720px) {
  /* Ein fieldset hat standardmäßig min-width:min-content. Sobald das
     Quellvideo samt Schnittsteuerung sichtbar ist, wurde dieser Mindestwert
     breiter als das Formular und drückte die Vorschau rechts aus dem 360-px-
     Dialog. Dieser Schritt darf nur die verfügbare Formularbreite nutzen. */
  [data-shorts-production-modal] fieldset.workspace-group.youtube-publisher-step {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  [data-shorts-production-modal] .shorts-production-inner .shorts-form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Der Kasten um die Videobuehne wird zum Abschnitt mit Linie darueber. */
  [data-shorts-production-modal] .shorts-source-preview.schnittplatz,
  #workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-source-preview.schnittplatz {
    width: 100%;
    margin-top: 12px;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid #262a35;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Die Buehne wird kleiner: gut die Haelfte der bisherigen Hoehe reicht,
     um zu erkennen, welches Video geladen ist und wo man schneidet. */
  [data-shorts-production-modal] .shorts-source-preview .schnitt-buehne,
  #workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-source-preview .schnitt-buehne {
    max-height: min(24vh, 150px);
  }

  /* Zeitleiste und Fusszeile standen 5 px eingerueckt, weil der Kasten sie
     trug. Ohne Kasten laufen sie buendig mit dem uebrigen Inhalt. */
  [data-shorts-production-modal] .shorts-source-preview .schnitt-fuss,
  [data-shorts-production-modal] .shorts-range-editor > header,
  #workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-source-preview .schnitt-fuss {
    margin-inline: 0;
    padding-inline: 0;
  }
  /* Die Zeitleiste behaelt einen Rand von einer halben Griffbreite: die
     beiden Griffe sitzen an ihren Enden und ragen je 8 px darueber hinaus.
     Buendig gesetzt haengen sie sonst aus dem Dialog. */
  [data-shorts-production-modal] .shorts-source-preview .schnitt-leiste,
  #workspace-body[data-tool="shorts-reels-cutter-briefing"] .shorts-source-preview .schnitt-leiste {
    margin-inline: 8px;
  }

  /* Das Untertitel-Panel: derselbe Schnitt. */
  [data-shorts-production-modal] .shorts-caption-preview {
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid #262a35;
    border-radius: 0;
    background: transparent;
  }

  /* Die Erklaerkarte oben: Linie statt Rahmen. */
  [data-shorts-production-modal] .workspace-intro-card {
    padding: 0 0 10px !important;
    border: 0;
    border-bottom: 1px solid #262a35;
    border-radius: 0;
    background: transparent;
  }

  /* Jeder Schritt wird vom vorigen durch eine Linie getrennt. */
  [data-shorts-production-modal] fieldset.workspace-group,
  [data-shorts-production-modal] fieldset.workspace-group + fieldset.workspace-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #262a35;
  }

  /* Die Fusszeile mit dem Startknopf: eigene Flaeche und runde Ecken weg. */
  [data-shorts-production-modal] .shorts-actions {
    margin-top: 12px;
    padding: 12px 0 0;
    border-top: 1px solid #262a35;
    border-radius: 0;
    background: transparent;
  }
  [data-shorts-production-modal] .shorts-rights-notice {
    padding: 0;
    border: 0;
    background: transparent;
  }
}

/* Weitere Vorschläge neben das Telefon statt darunter (18.09.2026).
   Vorher lagen sie unter dem Player: Man sah sie erst nach dem Scrollen und
   musste zwischen Ausschnitt und Vorschlagsliste hin- und herspringen. Nebe-
   neinander sieht man beim Vergleichen beides. Der Dialog wird dafür breiter;
   unter 1000 px bleibt es beim Untereinander, sonst wird das Telefon gequetscht. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])):has(.shorts-weitere:not([hidden])) {
  width: min(1060px, calc(100vw - 24px));
}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(300px, 1fr);
  align-items: start;
  gap: 22px;
}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) > .shorts-result-grid {
  grid-column: 1;
}
/* Die Spalte bekommt eine eigene Höhe: Sie ist oft länger als das Telefon und
   würde den Dialog sonst über den Bildschirm hinaus wachsen lassen. Scrollen
   darf dabei nur die Kartenliste - Überschrift und der Knopf zum Rendern
   bleiben stehen, sonst muss man zum Rendern erst ans Ende scrollen. */
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) > .shorts-weitere {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  max-height: min(835px, 78vh);
  margin: 0;
}
.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) > .shorts-weitere > .shorts-candidate-list {
  min-height: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
@media (max-width: 1000px) {
  .shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])):has(.shorts-weitere:not([hidden])) {
    width: min(500px, calc(100vw - 24px));
  }
  .shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) {
    display: block;
  }
  .shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) > .shorts-weitere {
    display: block;
    max-height: none;
  }
  .shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) > .shorts-weitere > .shorts-candidate-list {
    overflow: visible;
  }
}