/* Letzte Cleaning Prüfung: 23.09.2026 */
/* Letztes Cleaning: 27.08.2026 */
.cc-shorts-shell{max-width:1020px}.shorts-intro{display:flex;gap:13px;align-items:center;padding:12px 14px;margin-bottom:10px;border:1px solid #3b202a;border-radius:14px;background:linear-gradient(135deg,#231019,#12131a)}.shorts-intro>span{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#3c121f;color:#ff3656;font-size:20px}.shorts-intro small,.shorts-processing>small,.shorts-results header small{color:#ff3656;font-size:9px;font-weight:800;letter-spacing:.16em}.shorts-intro h3{margin:2px 0 3px;font:700 16px/1.25 'Space Grotesk',sans-serif}
.shorts-results h3{margin:4px 0;font:700 21px/1.2 'Space Grotesk',sans-serif}.shorts-intro p{margin:0;color:#9499a9;font-size:11.5px;line-height:1.45}
.shorts-results p{margin:0;color:#9499a9;font-size:12px}.shorts-form{display:grid;gap:10px}.shorts-step{padding:13px 14px;border:1px solid #292c37;border-radius:14px;background:#12131a}.shorts-step>header{display:flex;align-items:center;gap:10px;margin-bottom:11px}.shorts-step>header>b{display:grid;place-items:center;width:27px;height:27px;border:1px solid #6b1730;border-radius:9px;color:#ff4865;font-size:10px}.shorts-step>header strong,.shorts-step>header small{display:block}.shorts-step>header small{margin-top:3px;color:#7f8495;font-size:10px}.shorts-source-tabs{display:flex;gap:6px;width:max-content;padding:4px;margin-bottom:13px;border:1px solid #2b2e38;border-radius:10px;background:#0d0e13}.shorts-source-tabs input{position:absolute;opacity:0;pointer-events:none}.shorts-source-tabs span{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:7px;color:#8d92a3;font-size:11px;font-weight:700;cursor:pointer}.shorts-source-tabs input:checked+span{background:#34131d;color:#fff}.shorts-source-tabs input:checked+span i{color:#ff3656}.shorts-dropzone{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:60px;padding:10px 14px;border:1px dashed #4a4e5d;border-radius:12px;background:#0f1016;cursor:pointer}.shorts-dropzone:hover{border-color:#ff3656;background:#151018}.shorts-dropzone input{position:absolute;width:1px;height:1px;opacity:0}.shorts-dropzone>i{color:#ff3656;font-size:23px}.shorts-dropzone strong,.shorts-dropzone small{display:block}.shorts-dropzone small{margin-top:4px;color:#7e8393}.shorts-step label{color:#dfe1e8;font-size:11px;font-weight:700}.shorts-step label>small{display:block;margin-top:6px;color:#777d8d;font-size:9px;font-weight:500}/* Alle Felder in eine mitwachsende Reihe - bei fuenf Feldern brach die feste
   Vierteilung sonst eine fast leere zweite Zeile auf. */
/* Die Feldaufteilung kommt aus .workspace-group-grid - dem gemeinsamen Baustein der Assistenten. */.shorts-options .cc-select{margin-top:7px}.shorts-toggles{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.shorts-toggles input{position:absolute;opacity:0}.shorts-toggles span{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #30333e;border-radius:8px;color:#858b9b;cursor:pointer}.shorts-toggles input:checked+span{border-color:#7c1a34;background:#2b121a;color:#fff}.shorts-toggles input:checked+span i{color:#ff3656}.shorts-rights{display:flex;align-items:flex-start;gap:9px;margin-top:15px;color:#999eac!important;font-weight:500!important}.shorts-rights input{margin-top:2px;accent-color:#ff284c}.shorts-actions{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:14px 18px;border:1px solid #292c37;border-radius:14px;background:#101117}.shorts-actions label{min-width:240px;color:#8b90a0;font-size:10px}.shorts-actions .cc-select{margin-top:6px}.shorts-actions .cc-button{min-height:44px;padding-inline:20px}.shorts-form-error,.shorts-warning{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid #6e1b31;border-radius:9px;background:#271018;color:#ff6b83;font-size:11px}.shorts-processing{max-width:650px;margin:30px auto;text-align:center}.shorts-processing-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 14px;border:1px solid #8f1b39;border-radius:20px;background:#f01c46;color:#fff;box-shadow:0 0 35px rgba(255,40,76,.23);font-size:30px}.shorts-processing h3{margin:7px 0;color:#f7f7fa;font:700 24px/1.2 'Space Grotesk',sans-serif}.shorts-processing>p{color:#9297a7}.shorts-progress{height:7px;margin-top:22px;overflow:hidden;border-radius:10px;background:#272a34}.shorts-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff284c,#ff607a);transition:width .3s ease}.shorts-progress-meta{display:flex;justify-content:space-between;margin:7px 0 17px;color:#777d8c;font-size:9px}.shorts-stage-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.shorts-stage-list span{display:grid;place-items:center;gap:7px;padding:13px 8px;border:1px solid #292c37;border-radius:10px;color:#777d8d;font-size:9px;font-weight:700}.shorts-stage-list i{font-size:19px}.shorts-stage-list .active{border-color:#6f1a31;background:#1d1016;color:#fff}.shorts-stage-list .active i{color:#ff3656}.shorts-results{max-width:900px;margin:auto}.shorts-results>header{display:flex;align-items:center;gap:14px;margin-bottom:16px}.shorts-results>header>span{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#ef1c46;color:#fff;font-size:23px}.shorts-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.shorts-result-grid article{overflow:hidden;border:1px solid #292c37;border-radius:14px;background:#12131a}.shorts-result-grid video{display:block;width:100%;aspect-ratio:9/16;max-height:420px;background:#07080b}.shorts-result-grid article>div{padding:13px}.shorts-result-grid small,.shorts-result-grid strong{display:block}.shorts-result-grid small{color:#ff4e6b;font-size:8px;font-weight:800;letter-spacing:.1em}.shorts-result-grid strong{margin:6px 0;font-size:13px}.shorts-result-grid p{min-height:34px;font-size:10px;line-height:1.5}.shorts-result-grid .cc-button{display:flex;justify-content:center;gap:6px;margin-top:10px;text-decoration:none}.shorts-results>footer{display:flex;justify-content:flex-end;margin-top:14px}@media(max-width:800px){.shorts-options,.shorts-result-grid{grid-template-columns:1fr 1fr}.shorts-stage-list{grid-template-columns:1fr 1fr}}@media(max-width:560px){.shorts-options,.shorts-result-grid{grid-template-columns:1fr}.shorts-actions{align-items:stretch;flex-direction:column}.shorts-actions label{min-width:0}.shorts-source-tabs{width:100%;overflow:auto}.shorts-intro{align-items:flex-start}}

.shorts-history{margin-top:26px}.shorts-history .cc-section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}.shorts-history .cc-section-heading h2{margin:4px 0 2px}.shorts-history .cc-section-heading p{margin:0;color:#83899a;font-size:11px}.shorts-history-count{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border:1px solid #303440;border-radius:999px;background:#151720;color:#b6bbca;font-size:10px;font-weight:800}/* Die Geometrie steht in ai-contentfactory-medien-galerie.css - der Container
   traegt zusaetzlich .medien-galerie-raster, die Kachel .medien-galerie-kachel
   (Kundenwunsch vom 01.09.2026: dieselbe Kachelgroesse wie im Videoverlauf).
   Hier bleibt nur, was diese Galerie eigen hat. *//* Groesse und Seitenverhaeltnis kommen aus .medien-galerie-kachel. */
.shorts-history-card{position:relative;display:block;min-width:0;overflow:hidden;padding:0;border:1px solid #2d313c;border-radius:14px;background:#101117;color:#fff;text-align:left;cursor:pointer;isolation:isolate;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.shorts-history-card:hover{transform:translateY(-2px);border-color:#ff3157;box-shadow:0 12px 30px rgba(0,0,0,.28)}.shorts-history-card:focus-visible{outline:2px solid #ff3157;outline-offset:3px}.shorts-history-card video{display:block;width:100%;height:100%;object-fit:cover;background:#07080b;pointer-events:none}
/* Poster ueber dem Video: die Kachel zeigt ein kleines JPEG, bis die
   Hover-Vorschau laeuft (01.09.2026, wie im Videoverlauf). */
.shorts-history-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .2s ease}
.shorts-history-poster[hidden]{display:none}
.shorts-history-card.is-previewing .shorts-history-poster{opacity:0}
/* Muelleimer links, Download rechts - wie im Thumbnail- und Videoverlauf. */
/* Dauerhaft sichtbar wie im Thumbnail-Verlauf (01.09.2026): ein Knopf, den
   man erst beim Zeigen findet, ist auf Touch-Geraeten gar nicht auffindbar. */
.shorts-history-download{position:absolute;z-index:3;top:11px;right:11px;display:grid;place-items:center;width:31px;height:31px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(10,11,16,.78);color:#d9dce5;font-size:16px;cursor:pointer;opacity:.82;transition:opacity .18s ease,border-color .18s ease,color .18s ease;backdrop-filter:blur(8px)}
.shorts-history-card:hover .shorts-history-download,.shorts-history-card:focus-within .shorts-history-download{opacity:1}
.shorts-history-download:hover{border-color:rgba(255,48,79,.7);color:#fff}
.shorts-history-download[data-loading]{opacity:1}
.shorts-history-dummy{display:none}.shorts-history-card-overlay{position:absolute;z-index:2;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:3px;padding:46px 12px 12px;background:linear-gradient(180deg,transparent,rgba(5,6,10,.95));pointer-events:none}.shorts-history-card-overlay small{color:#ff728a;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.shorts-history-card-overlay strong{overflow:hidden;color:#fff;font-size:12px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.shorts-history-card-overlay em{color:#c6cad5;font-size:9px;font-style:normal}.shorts-history-open{position:absolute;z-index:3;top:11px;right:11px;display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(10,11,16,.72);font-size:18px;backdrop-filter:blur(8px);pointer-events:none}.shorts-history-placeholder{display:flex;height:100%;box-sizing:border-box;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:24px;background:radial-gradient(circle at 50% 35%,#242733,#101117 65%);color:#8d93a3;text-align:center}.shorts-history-placeholder i{color:#ff3656;font-size:34px}.shorts-history-placeholder strong{color:#e8eaf0;font-size:12px}.shorts-history-placeholder small{font-size:9px;line-height:1.45}.shorts-history-card.is-processing .shorts-history-placeholder i{animation:shortsHistoryPulse 1.3s ease-in-out infinite}.shorts-history-card.is-failed{border-color:#4b202b}.shorts-history-card.is-failed .shorts-history-placeholder i{color:#ff526e}@keyframes shortsHistoryPulse{50%{opacity:.45;transform:scale(.92)}}/* Die Staffelung fuer schmale Fenster steht ebenfalls in der Vorlage. */
/* Breite Bildschirme: Shorts sind hochkant. Bei vier festen Spalten wird
   jede Kachel auf einem WQHD-Monitor so breit, dass sie hoeher als das
   Fenster ist - man scrollt an einem einzigen Short entlang. Ab 1500px
   kommen deshalb Spalten dazu, damit die Kachel bei rund 280-330px bleibt. */
/* Kachelgroesse wie im Videoverlauf (01.09.2026): dieselbe Spaltenformel,
   damit Shorts und erzeugte Videos gleich gross erscheinen. Feste 3 bzw. 4
   Spalten ergaben auf breiten Schirmen fast bildschirmhohe Kacheln. */
@media(min-width:1500px){.shorts-result-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}}

/* Produktion ohne Videodatei: gedaempfter Rahmen statt schwarzer Flaeche. */
.shorts-history-card.is-unavailable{border-color:#3a3040;cursor:default}.shorts-history-card.is-unavailable:hover{transform:none;border-color:#3a3040;box-shadow:none}.shorts-history-card.is-unavailable .shorts-history-placeholder i{color:#7c8294}.shorts-history-card.is-unavailable .shorts-history-open{display:none}.shorts-video-shell.is-unavailable{display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden}.shorts-video-shell.is-unavailable .shorts-download-icon{display:none}

/* Dummy-Platzhalter fuer eine noch laufende Shorts-Produktion im Verlauf -
   dieselbe Bildsprache wie bei der Videogenerierung (video-history-generation-*
   in ai-contentfactory-control-center.css): drehendes Symbol, Schritttext,
   Fortschrittsbalken. So bleibt der Verlauf lesbar, auch wenn das
   Produktionsfenster geschlossen wurde und die Kachel live weiterlaeuft. */
.shorts-history-card.is-processing{display:grid;place-items:center;border-color:rgba(255,48,79,.45);background:radial-gradient(circle at 50% 42%,rgba(255,48,79,.14),#101117 72%)}
/* 92 % Kachelbreite statt 86 %/220 px (01.09.2026): auf der hohen Kachel
   blieb links und rechts viel Leerraum, waehrend der Schritttext abgeschnitten
   wurde. Der Schritttext darf jetzt umbrechen statt zu ellipsen. */
.shorts-history-generation-visual{display:grid;box-sizing:border-box;width:min(92%,340px);place-items:center;gap:7px;padding:18px 0;text-align:center}
.shorts-history-generation-visual>i{display:grid;width:44px;height:44px;place-items:center;border-radius:14px;background:rgba(255,48,79,.14);color:#ff3656;font-size:21px}
.shorts-history-generation-visual>strong{color:#f0f1f5;font-size:13px}
.shorts-history-generation-visual>small{max-width:100%;color:#9298a9;font-size:10px;line-height:1.45}
.shorts-history-generation-progress{overflow:hidden;width:100%;height:5px;margin-top:4px;border-radius:99px;background:#272a34}
.shorts-history-generation-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff284c,#ff607a);transition:width .6s linear}
.shorts-history-generation-visual>b{color:#ff6077;font-size:10px}
/* Die Restzeit unter der Prozentzahl - dieselbe Schaetzung wie im
   Produktionsfenster (shortsAnzeigeFortschritt). */
.shorts-history-generation-rest{color:#9298a9;font-size:9px}

/* --- Titel, Bewertung, Beschreibung und Hashtags je Clip (11.09.2026) ------
   Der Kunde bekommt seit dem Wettbewerbsvergleich mit Submagic zu jedem Short
   einen fertigen Veroeffentlichungstext. Die Bewertung ist die Einschaetzung
   des Auswahlmodells, kein gemessener Wert - deshalb steht sie ruhig neben dem
   Titel und nicht als grosse Zahl darueber. */
.shorts-score{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.shorts-score-bar{flex:1;height:5px;overflow:hidden;border-radius:4px;background:#272a34}
.shorts-score-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff284c,#ff9f43)}
.shorts-score[data-shorts-score^="9"] .shorts-score-bar i,
.shorts-score[data-shorts-score="100"] .shorts-score-bar i{background:linear-gradient(90deg,#1ec97a,#7bd88f)}
.shorts-score b{color:#f2f3f7;font-size:12px}
.shorts-score small{color:#7d8291;font-size:8px;letter-spacing:.06em;text-transform:uppercase}
.shorts-hashtags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 2px}
.shorts-hashtags span{padding:3px 7px;border:1px solid #2f323d;border-radius:6px;color:#8ea2ff;font-size:9px}
.shorts-result-grid .shorts-copy{display:flex;justify-content:center;gap:6px;width:100%;margin-top:10px;font-size:10px}

/* --- Musikbett (11.09.2026) -----------------------------------------------
   Eigene Datei des Kunden statt eines mitgelieferten Katalogs: fuer fremde
   Musik braeuchten wir eine Lizenz, und eine falsche Lizenz kostet den Kunden
   das Video. Die Dateiwahl sieht aus wie die uebrigen Felder, nicht wie ein
   nackter Datei-Knopf des Browsers. */
.shorts-music-row{display:flex;gap:8px;align-items:center;margin-top:7px}
/* Die Dateiauswahl bleibt absichtlich ein 44-px-Iconknopf. Die allgemeine
   Formularregel darf das versteckte native Dateifeld nicht wieder auf volle
   Breite ziehen, sonst wird der Knopf zusammengedrueckt und die Note beschnitten. */
.shorts-music-pick{position:relative;display:flex;flex:0 0 44px;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:38px;padding:0;border:1px dashed #3a3e4b;border-radius:8px;color:#9298a9;cursor:pointer;font-size:10px;overflow:hidden}
.shorts-music-pick:hover{border-color:#7c1a34;color:#fff}
.shorts-music-pick i{flex:0 0 auto;color:#ff3656;font-size:16px}
.shorts-music-pick [data-music-name]{display:none}
.shorts-music-pick input{position:absolute;left:0;top:0;width:1px;min-width:0;height:1px;min-height:0;padding:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.shorts-production-body .workspace-field .shorts-music-pick input[type="file"]{width:1px;min-width:0;height:1px;min-height:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%)}
.shorts-music-row .cc-select,.shorts-music-row select{flex:1 1 0;width:auto!important;min-width:0!important;margin-top:0}

/* Auf dem Telefon bleibt die Dateiwahl ein eindeutiger quadratischer
   Musikkopf. Ohne feste Basis schrumpfte das Flex-Element neben dem breiten
   Lautstärke-Menü auf wenige Pixel; das Icon wurde am linken Rand abgeschnitten. */
@media(max-width:560px){
  .shorts-music-row{gap:8px}
}