/* Letzte Cleaning Prüfung: 10.10.2026 */ /* Letztes Cleaning: 10.10.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; justify-content: flex-end; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1.5; } .shorts-range-editor .schnitt-spanne strong { color: #e7eaf1; font: inherit; } @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} /* Handy: Die Hoehe richtet sich nach der verfuegbaren BREITE (Dialog 100vw - 24 px, Rahmen innen 18 px weniger, Format 9:16). Vorher stand nur die Hoehe fest (bis 680 px); bei 844 px Fensterhoehe ergab das 383 px Breite in einem 348 px breiten Rahmen - das Video ragte rechts heraus und der Rahmen wirkte abgeschnitten (WL-43, Betreiber 13.10.2026). */ @media(max-width:600px){.shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-video-shell>video{height:min(calc((100vw - 42px) * 16 / 9),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". 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} /* Leerer Zustand am Desktop: das Fenster nur so breit wie die Ablageflaeche braucht (Wunsch 10.10.2026). Mit gewaehltem Video gilt wieder die volle Breite fuer den Schnittplatz. */ @media(min-width:761px){ .shorts-production-stage>.shorts-production-dialog:has(.shorts-form.is-leer){flex-basis:760px} } /* 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} /* Moderneres Aussehen (AL-20261008-19, Richtung A+C): grosse Bilder ohne Rahmen, Auswahl als roter Ring, Bewertung als kraeftiger Balken mit grosser Zahl. */ .shorts-candidate{display:grid;grid-template-columns:24px 200px minmax(0,1fr);gap:14px;align-items:start;padding:7px;border:2px solid transparent;border-radius:16px;background:transparent;cursor:pointer;transition:border-color .15s ease,background .15s ease} .shorts-candidate:hover{background:rgba(255,255,255,.03)} .shorts-candidate:has(input:checked){border-color:#ff284c;background:rgba(255,40,76,.07)} .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:14px;background:#07080b;box-shadow:0 8px 22px rgba(0,0,0,.45);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;flex-direction:row-reverse;align-items:center;gap:10px} .shorts-candidate-score>span{flex:1;height:10px;overflow:hidden;border-radius:6px;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{min-width:30px;color:#f2f3f7;font-size:18px;text-align:right} .shorts-candidate-score small{display:none} .shorts-candidate-why{color:#c3c9d5;font-size:11px;line-height:1.55} .shorts-candidate-hinweis{display:block;margin-top:2px;color:#f0b44c;font-size:11px;line-height:1.5} .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 Abstand zum Dialogrand. Die Griffe ragen seit TOOL01-10 nicht mehr ueber die Leiste hinaus, sondern schliessen buendig mit ihr ab (Rand der Leiste in ai-contentfactory-control-center.css). */ [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; /* Abstand zwischen Telefonrahmen und den Vorschlaegen darunter (Betreiber 13.10.2026). */ margin-top: 24px; } .shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) > .shorts-weitere > .shorts-candidate-list { overflow: visible; } } /* Pfeil "weiter" direkt rechts neben dem Telefon, spiegelbildlich zum linken (WL-39, Betreiber 12.10.2026). Er hing am rechten Rand des breiten Dialogs, also rechts neben den Vorschlaegen. Links: 16 px vor dem Dialog = 16 px vor der 500-px-Spalte; rechts genauso 16 px hinter ihr. Die Vorschlaege ruecken um Pfeil plus Abstand nach rechts (Spaltenabstand 16 + 42 + 16), der Dialog wird dafuer 52 px breiter, damit die Spalte ihre Breite behaelt. WL-43 (12.10.2026): Unter rund 1260 px Fensterbreite lag der linke Pfeil (58 px vor dem Dialog) ausserhalb des Bildschirms. Der Dialog laesst deshalb links und rechts je 74 px frei (Pfeil 42 + 16 Abstand + 16 Rand). Wird die Telefonspalte dabei schmaler als 500 px (Vorschlaege mindestens 300 px), rueckt der rechte Pfeil mit: 16 px hinter der Spalte. */ @media (min-width: 1001px) { .shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])):has(.shorts-weitere:not([hidden])) { width: min(1112px, calc(100vw - 148px)); } .shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])) .shorts-results:has(.shorts-weitere:not([hidden])) { column-gap: 74px; } .shorts-detail-dialog:has(.shorts-result-grid > article:not([hidden])):has(.shorts-weitere:not([hidden])) > .shorts-detail-nav-next { right: auto; left: min(516px, calc(100% - 358px)); } } /* MOB19-18 (19.10.2026): Tablet quer – die Vorschlagsspalte ist dort nur rund 300 px breit; neben dem 200-px-Bild blieben dem Text 90 px, er wurde wortweise abgeschnitten und scrollte seitlich. Bild und Text untereinander wie am Handy. */ @media (min-width: 1001px) and (max-width: 1100px) { .shorts-weitere .shorts-candidate { grid-template-columns: 22px minmax(0, 1fr); gap: 9px; } .shorts-weitere .shorts-candidate-frame, .shorts-weitere .shorts-candidate-body { grid-column: 2; } .shorts-weitere .shorts-candidate-list { overflow-x: hidden; } } /* "Naechste 10" unter den Vorschlaegen (AL-20260927-17). */ .shorts-naechste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 4px} .shorts-naechste small{color:#8c94a6;font-size:12px} /* === Editor im Schnittplatz, 30.09.2026 =================================== Wunsch des Betreibers: die Vorschau (frueher Seitenleiste neben dem Dialog) steht dort, wo vorher die schwarze Videobuehne war. Links die Buehne im Zielformat - zugleich der Player mit Abspielen, Uhr und Verwerfen -, darunter der Bildausschnitt; rechts Seitenverhaeltnis, Bildanpassung, Captions-Schalter und Caption-Einstellungen. Darunter bleibt die Schnittleiste ueber die volle Breite. Die alte Buehne bleibt im Baum, weil ihr