/* Letzte Cleaning Prüfung: 23.09.2026 */ /* Letztes Cleaning: 09.09.2026 */ /* Changelog * * 27.08.2026 - Der verwendete Tontrennweg ist am fertigen Dubbing sichtbar. * * 24.08.2026 - Bildeditor * Neu Eingabefeld des Aenderungswunsches als zusammenhaengender Kasten * (.factory-chat-box) mit Anhaengen und Startknopf darin. * Neu Haken "Mein Logo" (.factory-logo-toggle) und Anhang-Schilder. * Neu Fussleiste des Editorfensters fuer die Uebernahme ins Formular. * Fix Schrift im Eingabefeld 11px -> 15px. Die Regel der Editor-Huelle * ueberschrieb die Grundregel; beide sind jetzt gleich. * Fix Mauszeiger des Markierwerkzeugs ist der Zauberstab, Griffpunkt an * seiner Spitze; die Farbauswahl bekam ein eigenes Fadenkreuz. */ .processing-finished.result-finished { width: 100%; max-width: 1400px; margin-top: 0; padding: 2px 0 36px; text-align: left; } body.factory-page-active #workspace-body[data-tool="thumbnail-banner-maker"] .image-result-finished { margin-left: 0; margin-right: auto; } .workspace-form[hidden] + #workspace-result .image-result-finished { padding-top: 18px; } .result-success-line { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 0 2px; } .result-success-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(135deg, #ff3656, #d80730); color: #fff; font-size: 24px; box-shadow: 0 10px 30px rgba(255, 35, 71, .25); } .result-success-line .section-kicker { display: block; margin-bottom: 4px; } .result-success-line h3 { margin: 0; font: 600 24px/1.2 'Space Grotesk', sans-serif; } .result-success-line p { margin: 5px 0 0; color: #8d93a1; font-size: 12px; } .script-document { overflow: hidden; border: 1px solid #2a2d37; border-radius: 16px; background: #f7f7f9; box-shadow: 0 18px 55px rgba(0, 0, 0, .24); } .script-document-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border-bottom: 1px solid #dddfe4; background: #fff; color: #17191f; } .script-document-head > div:first-child { min-width: 0; } .script-document-head > div:first-child > span { display: block; margin-bottom: 4px; color: #df173e; font: 700 9px/1 'Space Grotesk', sans-serif; letter-spacing: .13em; text-transform: uppercase; } .script-document-head h4 { overflow: hidden; margin: 0; color: #17191f; font: 650 17px/1.3 'Space Grotesk', sans-serif; text-overflow: ellipsis; white-space: nowrap; } .script-document-stats { display: flex; flex: 0 0 auto; gap: 8px; } .script-document-stats span { display: grid; gap: 2px; min-width: 72px; padding: 8px 10px; border-radius: 9px; background: #f1f2f5; color: #777d89; font-size: 9px; } .script-document-stats b { color: #22252c; font-size: 11px; } .script-document-content { height: clamp(520px, calc(100dvh - 260px), 820px); overflow: auto; padding: 30px clamp(24px, 6vw, 58px) 44px; color: #292c34; font: 13px/1.72 'DM Sans', Arial, sans-serif; scrollbar-color: #bdc1ca transparent; } .script-document-content h2, .script-document-content h3, .script-document-content h4 { color: #15171c; font-family: 'Space Grotesk', Arial, sans-serif; line-height: 1.3; } .script-document-content h2 { margin: 0 0 18px; font-size: 25px; } .script-document-content h3 { margin: 28px 0 11px; padding-top: 2px; font-size: 18px; } .script-document-content h4 { margin: 22px 0 9px; color: #d7183f; font-size: 14px; } .script-document-content p { margin: 0 0 13px; } .script-document-content ul, .script-document-content ol { margin: 7px 0 18px; padding-left: 22px; } .script-document-content li { margin: 5px 0; padding-left: 3px; } .script-document-content li::marker { color: #e21b43; font-weight: 700; } .script-document-content blockquote { margin: 18px 0; padding: 13px 16px; border-left: 3px solid #e21b43; border-radius: 0 8px 8px 0; background: #f2e9ec; color: #4c4145; } .script-document-content code { padding: 2px 5px; border-radius: 4px; background: #e9eaf0; font-family: Consolas, monospace; } .result-actionbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 16px; } .result-downloads { display: flex; align-items: center; gap: 8px; } .result-action-label { margin-right: 3px; color: #717785; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; } .result-download { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 12px; border: 1px solid #353844; border-radius: 10px; background: #171920; color: #f4f5f7; cursor: pointer; text-align: left; } .result-download > i { color: #aeb3bf; font-size: 22px; } .result-download > span { display: grid; gap: 2px; } .result-download strong { font-size: 11px; } .result-download small { color: #777d8b; font-size: 9px; white-space: nowrap; } .result-download.primary { border-color: #ff3152; background: #ff2347; } .result-download.primary > i, .result-download.primary small { color: #fff; } .result-download:hover { border-color: #626775; transform: translateY(-1px); } .result-download.primary:hover { border-color: #ff6a82; background: #ff3656; } .result-secondary-actions { display: flex; gap: 8px; } .result-secondary-actions .finished-copy { margin-top: 0; min-height: 44px; } .factory-image-result { margin: 24px 0 0; overflow: visible; border: 0; border-radius: 0; background: transparent; } .factory-image-stage { position: relative; display: grid; place-items: center start; background: transparent; } .factory-image-media { position: relative; display: inline-grid; place-items: center; min-width: 0; } .factory-image-media > img, .factory-image-media > canvas { grid-area: 1 / 1; } .factory-image-version-controls { position: absolute; bottom: 12px; left: 12px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #46505e; border-radius: 10px; background: rgba(16, 20, 27, .92); color: #fff; } .factory-image-version-controls button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 20px; cursor: pointer; } .factory-image-version-controls button:hover:not(:disabled), .factory-image-version-controls button:focus-visible { background: #ff304f; } .factory-image-version-controls button:disabled { opacity: .35; cursor: default; } .factory-image-version-controls span { min-width: 40px; text-align: center; font-size: 12px; } .factory-image-download-overlay { position: absolute; top: 14px; right: 14px; z-index: 8; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(8,10,15,.78); color: #fff; font-size: 21px; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.35); backdrop-filter: blur(12px); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .factory-image-download-overlay:hover, .factory-image-download-overlay:focus-visible { transform: translateY(-2px); border-color: rgba(255,67,99,.85); background: rgba(255,35,71,.9); outline: none; } .factory-image-download-overlay:disabled { cursor: wait; opacity: .72; } .factory-image-result img, .factory-image-result canvas { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; object-fit: contain; background: transparent; } .image-result-finished [hidden] { display: none !important; } .factory-image-result canvas { height: auto; cursor: crosshair; touch-action: none; } .factory-image-result figcaption { display: none; } .image-result-finished.is-image-portrait { --portrait-preview-height: min(80vh, 830px, calc((100vw - 760px) / var(--vorschau-verhaeltnis, 0.5625))); --portrait-preview-width: calc(var(--portrait-preview-height) * var(--vorschau-verhaeltnis, 0.5625)); --portrait-editor-width: 270px; display: grid; grid-template-columns: var(--portrait-editor-width) max-content 330px; grid-template-areas: "success success success" "editor image image" "editor actions ."; align-items: start; column-gap: 24px; } .image-result-finished.is-image-portrait > .result-success-line { grid-area: success; } .image-result-finished.is-image-portrait > .factory-image-result { grid-area: image; min-width: 0; } .image-result-finished.is-image-portrait > .factory-editor-shell { grid-area: editor; width: 100%; min-height: var(--portrait-preview-height); margin-top: 24px; } .image-result-finished.is-image-portrait > .result-actionbar { grid-area: actions; align-self: start; justify-self: start; width: var(--portrait-preview-width); margin-top: 12px; } .image-result-finished.is-image-portrait .factory-image-result img, .image-result-finished.is-image-portrait .factory-image-result canvas { width: var(--portrait-preview-width); height: var(--portrait-preview-height); max-height: none; object-fit: contain; } .image-result-finished.is-image-portrait .factory-image-media { width: var(--portrait-preview-width); height: var(--portrait-preview-height); } .image-result-finished.is-image-portrait .factory-image-stage { grid-template-columns: max-content 330px; align-items: start; justify-content: start; gap: 28px; } .image-result-finished.is-image-portrait .factory-generation-info { position: static; width: 330px; height: var(--portrait-preview-height); max-height: none; } .image-result-finished.is-image-portrait > .result-actionbar .result-downloads { width: 100%; align-items: stretch; flex-direction: column; } .image-result-finished.is-image-portrait > .result-actionbar .result-action-label { margin: 0; } .image-result-finished.is-image-portrait > .result-actionbar .result-download { width: 100%; } .image-result-finished.is-image-portrait > .factory-editor-shell { display: grid; grid-template-columns: 54px minmax(0,1fr); grid-template-rows: var(--portrait-preview-height); overflow: hidden; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar { align-items: center; flex-direction: column; gap: 7px; min-height: 0; padding: 10px 8px; border-right: 1px solid #292d37; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar > span { width: 24px; height: 1px; margin: 3px 0; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar button::after { top: 50%; left: calc(100% + 8px); transform: translate(-3px,-50%); } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar button:hover::after, .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar button:focus-visible::after { transform: translate(0,-50%); } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-filters, .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-edit { grid-row: 1; grid-column: 2; min-width: 0; max-height: var(--portrait-preview-height); overflow-y: auto; border-top: 0; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-edit { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "tools" "request" "action" "feedback"; align-content: start; align-items: start; overflow-x: hidden; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-annotation-tools { align-items: center; flex-wrap: wrap; width: 100%; overflow: visible; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-annotation-shapes { flex-wrap: wrap; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-annotation-shapes button { width: 30px; min-height: 30px; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-wand-sensitivity, .image-result-finished.is-image-portrait > .factory-editor-shell .factory-brush-size { flex: 1 0 100%; width: 100%; min-width: 0; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-wand-sensitivity input, .image-result-finished.is-image-portrait > .factory-editor-shell .factory-brush-size input { flex: 1 1 auto; width: auto; min-width: 42px; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-change-request { width: 100%; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-change-request textarea { min-height: 96px; max-height: 150px; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-chat-bar { flex-wrap: wrap; justify-content: flex-start; gap: 8px; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-attachments { flex-wrap: wrap; min-width: 0; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-revise { flex: 1 0 100%; justify-content: center; width: 100%; min-width: 0; margin-top: 2px; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-edit-feedback { width: 100%; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-filter-presets { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2,minmax(0,1fr)); overflow-x: hidden; overflow-y: auto; } .image-result-finished.is-image-portrait > .factory-editor-shell .filter-swatch { height: 54px; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-filter-adjustments { grid-template-columns: 1fr; } .image-result-finished.is-image-square .factory-image-result img, .image-result-finished.is-image-square .factory-image-result canvas { width: min(56vw,620px); height: auto; aspect-ratio: 1/1; object-fit: contain; } .result-downloads a.result-download { text-decoration: none; } .factory-generation-info { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 330px; overflow: auto; padding: 20px; border: 1px solid #303644; border-radius: 16px; background: linear-gradient(155deg, rgba(25,29,39,.98), rgba(11,13,19,.98)); box-shadow: 0 18px 44px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.025); scrollbar-color: #4a5263 transparent; } .factory-generation-info header { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #303644; } .factory-generation-info header > i { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(255,73,101,.2); border-radius: 11px; background: linear-gradient(145deg, rgba(255,48,79,.2), rgba(255,48,79,.07)); color: #ff5871; font-size: 20px; box-shadow: 0 8px 20px rgba(255,48,79,.1); } .factory-generation-info header small { display: block; margin-bottom: 3px; color: #ff5871; font-size: 9px; font-weight: 800; letter-spacing: .14em; } .factory-generation-info h4 { margin: 0; color: #f7f8fb; font: 650 16px/1.2 'Space Grotesk', sans-serif; } /* Das Panel ist eine Spalte, der Prompt nimmt die Hoehe, die uebrig bleibt (09.09.2026). Vorher war der Prompt auf 170px gedeckelt und rollte, waehrend darunter das halbe Panel leer blieb. Rollen tut er erst, wenn das Panel voll ist. Ohne feste Hoehe (Telefon, Panel unter dem Bild) gilt weiter die Obergrenze im 1180-px-Block. */ .factory-generation-info { display: flex; flex-direction: column; box-sizing: border-box; } .factory-generation-info dl { display: flex; flex-direction: column; flex: 1 1 auto; gap: 9px; min-height: 0; margin: 15px 0 0; } .factory-generation-info-item.is-prompt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .factory-generation-info-item { min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.045); border-radius: 9px; background: rgba(255,255,255,.022); } .factory-generation-info-item:first-child { border-color: rgba(255,73,101,.16); background: rgba(255,48,79,.045); } .factory-generation-info dt { margin-bottom: 5px; color: #8d96a7; font-size: 9px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; } .factory-generation-info dd { margin: 0; overflow-wrap: anywhere; color: #edf0f5; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; } .factory-generation-info-item.is-prompt dd { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 7px; scrollbar-color: #596174 transparent; scrollbar-width: thin; } /* Weiterverwenden (31.08.2026): das fertige Bild als Referenz einer neuen Bildproduktion oder als Startframe eines Videos mitnehmen - kleine Icons am Bildrand unter dem Download-Knopf, wie die Aktionen der Videokacheln. */ .factory-image-reuse-overlay { top: 62px; } .factory-image-reuse-video-overlay { top: 110px; } .factory-image-reuse-overlay i, .factory-image-reuse-video-overlay i { font-size: 19px; } /* Handy, Thumbnail-Editor: Das Bild ist dort nur rund 130px hoch. Die drei Knoepfe untereinander (bis 152px) ragten in die Werkzeugleiste, und das Schliessen-Kreuz lag ueber dem Download. Oben links nebeneinander ist frei (unten sitzt die Versionsanzeige) - CFAI-MOB-20260921-020. */ @media (max-width: 560px) { .thumbnail-editor-modal .factory-image-download-overlay { top: 10px; right: auto; width: 36px; height: 36px; font-size: 18px; border-radius: 10px; } .thumbnail-editor-modal .factory-image-download-overlay:not(.factory-image-reuse-overlay):not(.factory-image-reuse-video-overlay) { left: 10px; } .thumbnail-editor-modal .factory-image-reuse-overlay { left: 52px; } .thumbnail-editor-modal .factory-image-reuse-video-overlay { left: 94px; } .thumbnail-editor-modal .factory-image-reuse-overlay i, .thumbnail-editor-modal .factory-image-reuse-video-overlay i { font-size: 17px; } } @media (max-width: 1180px) { .factory-generation-info { position: static; width: 100%; max-height: 340px; margin-top: 16px; } /* Ohne feste Panelhoehe bekommt der Prompt wieder seine Obergrenze. */ .factory-generation-info-item.is-prompt dd { max-height: 170px; } .image-result-finished.is-image-portrait { display: block; } .image-result-finished.is-image-portrait .factory-image-stage { grid-template-columns: 1fr; gap: 0; } .image-result-finished.is-image-portrait .factory-generation-info { width: 100%; height: auto; max-height: 340px; } .image-result-finished.is-image-portrait > .factory-editor-shell { display: block; width: 100%; min-height: 0; margin-top: 12px; overflow: visible; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar { align-items: center; flex-direction: row; gap: 4px; min-height: 48px; padding: 6px 9px; border-right: 0; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar > span { width: 1px; height: 22px; margin: 0 4px; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar button::after { top: calc(100% + 7px); left: 50%; transform: translate(-50%,-3px); } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar button:hover::after, .image-result-finished.is-image-portrait > .factory-editor-shell .factory-mini-toolbar button:focus-visible::after { transform: translate(-50%,0); } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-filters, .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-edit { max-height: none; overflow-y: visible; border-top: 1px solid #292d37; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-edit { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto; grid-template-areas: "tools tools" "request request" "feedback action"; align-items: center; overflow-x: visible; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-image-revise { justify-self: end; width: auto; min-width: 142px; margin-top: 0; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-annotation-shapes button { width: 34px; min-height: 32px; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-wand-sensitivity, .image-result-finished.is-image-portrait > .factory-editor-shell .factory-brush-size { flex: 1 1 190px; width: auto; } .image-result-finished.is-image-portrait > .factory-editor-shell .factory-filter-presets { grid-auto-flow: column; grid-auto-columns: 66px; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; } .image-result-finished.is-image-portrait > .factory-editor-shell .filter-swatch { height: 42px; } .image-result-finished.is-image-portrait > .result-actionbar { width: 100%; margin-top: 16px; } } .factory-image-revision-progress { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgba(5, 7, 12, .72); backdrop-filter: blur(3px); color: #fff; } .factory-image-revision-progress > i { color: #ff304f; font-size: 36px; filter: drop-shadow(0 0 12px rgba(255,48,79,.65)); } .factory-image-revision-progress > span { display: grid; gap: 4px; } .factory-image-revision-progress strong { font: 650 17px/1.2 'Space Grotesk', sans-serif; } .factory-image-revision-progress small { color: #c2c7d1; font-size: 12px; } .image-result-finished.is-revising .factory-image-edit { opacity: .65; pointer-events: none; } .factory-image-edit { display: grid; gap: 16px; margin-top: 16px; padding: 20px; border: 1px solid #2b303c; border-radius: 16px; background: #11131a; } .factory-image-edit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .factory-image-edit-head h4 { margin: 5px 0 4px; color: #f5f6f8; font: 650 18px/1.25 'Space Grotesk', sans-serif; } .factory-image-edit-head p { max-width: 490px; margin: 0; color: #8e95a4; font-size: 12px; line-height: 1.5; } .factory-image-edit-head .finished-copy { flex: 0 0 auto; margin: 0; } .factory-annotation-tools { display: flex; align-items: end; gap: 9px; padding: 12px; border: 1px solid #303440; border-radius: 12px; background: #0d0f15; } .factory-annotation-tools label { display: grid; gap: 5px; color: #8f96a4; font-size: 10px; } .factory-annotation-tools select, .factory-annotation-tools input, .factory-annotation-tools button { min-height: 36px; border: 1px solid #363b48; border-radius: 8px; background: #171a22; color: #eef0f4; } .factory-annotation-tools select { padding: 0 32px 0 10px; } .factory-annotation-tools input { width: 48px; padding: 4px; } .factory-annotation-tools button { padding: 0 11px; cursor: pointer; } .factory-annotation-tools button:hover:not(:disabled) { border-color: #ff304f; } /* Nichts zurueckzunehmen, nichts wiederherzustellen: der Knopf sagt es. */ .factory-annotation-tools button:disabled { opacity: .38; cursor: default; } .factory-annotation-shapes { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #303440; border-radius: 10px; background: #090b10; } .factory-annotation-shapes button { display: grid; place-items: center; width: 34px; min-height: 32px; padding: 0; border-color: transparent; background: transparent; color: #9097a5; font-size: 17px; } .factory-annotation-shapes button:hover { background: #20232c; color: #fff; } .factory-annotation-shapes button.active { border-color: #ff526c; background: #ff304f; color: #fff; box-shadow: 0 0 0 2px rgba(255,48,79,.22), 0 5px 14px rgba(255,48,79,.22); } .factory-wand-sensitivity { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 9px; border: 1px solid #303440; border-radius: 10px; background: #090b10; color: #9299a6; } .factory-wand-sensitivity[hidden] { display: none; } .factory-wand-sensitivity i { color: #ff4260; font-size: 16px; } .factory-wand-sensitivity span { font-size: 10px; font-weight: 650; } .factory-wand-sensitivity input { width: 94px; min-height: 20px; padding: 0; border: 0; accent-color: #ff304f; } .factory-wand-sensitivity output { min-width: 20px; color: #ff617a; font-size: 10px; text-align: right; } .factory-brush-size { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 9px; border: 1px solid #303440; border-radius: 10px; background: #090b10; color: #9299a6; } .factory-brush-size[hidden] { display: none; } .factory-brush-size i { color: #ff4260; font-size: 16px; } .factory-brush-size span { font-size: 10px; font-weight: 650; } .factory-brush-size input { width: 94px; min-height: 20px; padding: 0; border: 0; accent-color: #ff304f; } .factory-brush-size output { min-width: 20px; color: #ff617a; font-size: 10px; text-align: right; } .factory-image-stage canvas:not([hidden]) { cursor: crosshair; } .factory-image-stage canvas[data-annotation-cursor="rectangle"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='5' y='5' width='17' height='17' rx='1' fill='none' stroke='white' stroke-width='2'/%3E%3Crect x='5' y='5' width='17' height='17' rx='1' fill='none' stroke='%2310141c' stroke-width='4' opacity='.75'/%3E%3Crect x='5' y='5' width='17' height='17' rx='1' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 14 14, crosshair; } .factory-image-stage canvas[data-annotation-cursor="circle"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='9' fill='none' stroke='%2310141c' stroke-width='4' opacity='.75'/%3E%3Ccircle cx='14' cy='14' r='9' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 14 14, crosshair; } .factory-image-stage canvas[data-annotation-cursor="arrow"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 23L22 6M13 6h9v9' fill='none' stroke='%2310141c' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' opacity='.8'/%3E%3Cpath d='M5 23L22 6M13 6h9v9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 5 23, crosshair; } .factory-image-stage canvas[data-annotation-cursor="wand"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 2v7M14 19v7M2 14h7M19 14h7' stroke='%2310141c' stroke-width='4.5' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M14 2v7M14 19v7M2 14h7M19 14h7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='14' r='3.4' fill='none' stroke='%2310141c' stroke-width='4' opacity='.8'/%3E%3Ccircle cx='14' cy='14' r='3.4' fill='none' stroke='%23ff304f' stroke-width='2'/%3E%3C/svg%3E") 14 14, crosshair; } .factory-image-stage canvas[data-annotation-cursor="brush"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M5 29L21 13' stroke='%23080a0f' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M5 29L21 13' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M20 14L16 10' stroke='%23ff304f' stroke-width='3'/%3E%3Cpath d='M24 2l2.1 4.5L31 8.2l-4 3.1.2 5-4.1-2.8-4.8 1.7 1.4-4.8-3.1-4 5.1-.1z' fill='%23ff304f' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M11 4v5M8.5 6.5h5M29 20v4M27 22h4' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 24 8, crosshair; } .factory-change-request { display: grid; gap: 8px; padding-top: 2px; color: #f0f1f4; font-size: 12px; font-weight: 650; } .factory-chat-box { display: grid; gap: 10px; padding: 12px 12px 10px; border: 1px solid #393e4b; border-radius: 12px; background: #171a22; transition: border-color .16s ease, box-shadow .16s ease; } .factory-chat-box:focus-within { border-color: #ff304f; box-shadow: 0 0 0 3px rgba(255, 48, 79, .11); } .factory-change-request textarea { width: 100%; min-height: 168px; resize: vertical; padding: 2px 3px; border: 0; outline: none; background: none; color: #f4f5f7; font: 15px/1.6 'DM Sans', sans-serif; } .factory-chat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .factory-change-request small { color: #747b89; font-weight: 400; } .factory-image-attachments { display: flex; align-items: center; gap: 8px; } .factory-attach-button { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid #393e4b; border-radius: 10px; background: #171a22; color: #c6ccd8; font-size: 17px; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; } .factory-attach-button:hover { border-color: #ff304f; color: #fff; background: #241520; } .factory-attach-button.is-set { border-color: #ff304f; color: #ff5470; } .factory-logo-toggle { display: inline-flex; align-items: center; gap: 8px; height: 34px; flex: none; padding: 0 12px 0 10px; border: 1px solid #393e4b; border-radius: 10px; background: #171a22; color: #c6ccd8; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; } .factory-logo-toggle input { width: 14px; height: 14px; margin: 0; accent-color: #ff304f; cursor: inherit; } .factory-logo-toggle i { font-size: 17px; } .factory-logo-toggle:hover { border-color: #ff304f; color: #fff; } .factory-logo-toggle.is-set { border-color: #ff304f; background: #241520; color: #ff5470; } .factory-logo-toggle.is-empty { opacity: .5; cursor: not-allowed; } .factory-attachment-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .factory-attachment-chip { display: inline-flex; align-items: center; gap: 9px; max-width: 260px; padding: 4px 6px 4px 4px; border: 1px solid #393e4b; border-radius: 10px; background: #171a22; } .factory-attachment-chip img { width: 42px; height: 26px; flex: none; border-radius: 6px; object-fit: cover; } .factory-attachment-chip > span { display: grid; gap: 1px; min-width: 0; } .factory-attachment-chip b { color: #f0f1f4; font-size: 11px; } .factory-attachment-chip small { overflow: hidden; color: #808894; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .factory-attachment-chip button { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 0; border-radius: 6px; background: none; color: #8e95a4; font-size: 14px; cursor: pointer; } .factory-attachment-chip button:hover { background: #2a1a20; color: #ff5470; } .factory-image-revise { justify-self: end; flex: none; margin: 0; } .factory-image-edit-feedback { min-height: 0; color: #8ddaa4; font-size: 11px; } .factory-image-edit-feedback.error { color: #ff7188; } .factory-image-filters { display: grid; gap: 16px; margin-top: 16px; padding: 20px; border: 1px solid #2b303c; border-radius: 16px; background: #11131a; } .factory-filter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .factory-filter-head h4 { margin: 5px 0 4px; color: #f5f6f8; font: 650 17px/1.25 'Space Grotesk', sans-serif; } .factory-filter-head p { margin: 0; color: #8e95a4; font-size: 12px; } .factory-filter-head .finished-copy { margin: 0; } .factory-editor-tabs { display: inline-flex; justify-self: start; padding: 4px; border: 1px solid #2d313c; border-radius: 11px; background: #0b0d12; } .factory-editor-tabs button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 15px; border: 0; border-radius: 8px; background: transparent; color: #858c99; font-size: 11px; font-weight: 700; cursor: pointer; } .factory-editor-tabs button.active { background: #242832; color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.25); } .factory-editor-tabs button.active i { color: #ff304f; } .factory-filter-presets { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-color: #3b3f4b transparent; } .factory-filter-preset { display: grid; gap: 8px; min-width: 0; padding: 7px 7px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #a4aab6; cursor: pointer; } .factory-filter-preset:hover, .factory-filter-preset.active { border-color: #ff304f; background: rgba(255,48,79,.06); color: #fff; box-shadow: 0 0 0 2px rgba(255,48,79,.08); } .factory-filter-preset b { overflow: hidden; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .filter-swatch { display: block; height: 58px; border-radius: 8px; background-color: #171a22; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .filter-warm { filter: sepia(.25) saturate(1.3) hue-rotate(-10deg); } .filter-cool { filter: saturate(.9) hue-rotate(18deg); } .filter-bw { filter: grayscale(1) contrast(1.1); } .filter-vintage { filter: sepia(.5) saturate(.8); } .filter-cinematic { filter: contrast(1.25) saturate(.7) brightness(.85); } .filter-vivid { filter: contrast(1.1) saturate(1.5); } .filter-soft { filter: contrast(.85) brightness(1.08); } .filter-sepia { filter: sepia(.9); } .factory-filter-adjustments { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 24px; padding: 18px; border: 1px solid #292d37; border-radius: 12px; background: #0c0e14; } .factory-filter-adjustments label { display: grid; gap: 8px; color: #9097a5; font-size: 10px; } .factory-filter-adjustments label > span { display: flex; justify-content: space-between; gap: 8px; } .factory-filter-adjustments output { color: #ff617a; } .factory-filter-adjustments input { width: 100%; accent-color: #ff304f; } .factory-filter-feedback { min-height: 14px; color: #8ddaa4; font-size: 10px; } .factory-editor-shell { margin-top: 12px; overflow: visible; border: 1px solid #2b303c; border-radius: 14px; background: #101219; } .factory-mini-toolbar { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 6px 9px; } .factory-mini-toolbar > span { width: 1px; height: 22px; margin: 0 4px; background: #30343f; } .factory-mini-toolbar button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #969daa; font-size: 19px; cursor: pointer; } .factory-mini-toolbar button:hover { background: #20232c; color: #fff; } .factory-mini-toolbar button.active { background: rgba(255,48,79,.14); color: #ff4260; box-shadow: inset 0 0 0 1px rgba(255,48,79,.32); } .factory-mini-toolbar button::after { content: attr(data-tooltip); position: absolute; z-index: 5; top: calc(100% + 7px); left: 50%; width: max-content; max-width: 180px; padding: 6px 8px; border: 1px solid #363a45; border-radius: 7px; background: #080a0f; color: #f3f4f6; font: 10px/1.2 'DM Sans', sans-serif; opacity: 0; pointer-events: none; transform: translate(-50%,-3px); transition: .15s ease; } .factory-mini-toolbar button:hover::after, .factory-mini-toolbar button:focus-visible::after { opacity: 1; transform: translate(-50%,0); } .factory-editor-shell .factory-image-filters { gap: 10px; margin: 0; padding: 10px 12px 12px; border: 0; border-top: 1px solid #292d37; border-radius: 0; background: #0d0f15; } .factory-editor-shell .factory-filter-presets { grid-auto-columns: 66px; gap: 7px; padding: 0 0 5px; } .factory-editor-shell .factory-filter-preset { gap: 5px; padding: 5px; border-radius: 9px; } .factory-editor-shell .filter-swatch { height: 42px; border-radius: 6px; } .factory-editor-shell .factory-filter-preset b { font-size: 8px; } .factory-editor-shell .factory-filter-adjustments { gap: 12px 20px; padding: 10px 12px; border: 0; background: transparent; } .factory-editor-shell .factory-filter-feedback { min-height: 10px; padding-left: 3px; } .factory-editor-shell .factory-annotation-tools { grid-column: 1 / -1; align-items: center; min-width: 0; margin: 0; padding: 6px; border: 1px solid #292d37; border-radius: 11px; background: #090b10; } .factory-editor-shell .factory-annotation-tools label { display: flex; align-items: center; gap: 6px; font-size: 0; } .factory-editor-shell .factory-annotation-tools input { width: 36px; min-height: 32px; } .factory-editor-shell .factory-wand-sensitivity input { width: 86px; min-height: 20px; } .factory-editor-shell .factory-brush-size input { width: 86px; min-height: 20px; } .factory-editor-shell .factory-annotation-tools button { display: grid; place-items: center; width: 34px; min-height: 32px; overflow: hidden; padding: 0; font-size: 0; } .factory-editor-shell .factory-annotation-tools button i { font-size: 17px; } .factory-editor-shell .factory-annotation-shapes { flex: 0 0 auto; } .factory-editor-shell .factory-image-edit { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "tools tools" "request request" "feedback action"; align-items: center; gap: 8px 10px; margin: 0; padding: 10px 12px 12px; border: 0; border-top: 1px solid #292d37; border-radius: 0 0 13px 13px; background: #0d0f15; } .factory-editor-shell .factory-image-edit-head { grid-area: head; align-items: center; min-width: 0; } .factory-editor-shell .factory-image-edit-head > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; } .factory-editor-shell .factory-image-edit-head .section-kicker { flex: 0 0 auto; } .factory-editor-shell .factory-image-edit-head h4 { margin: 0; font-size: 13px; white-space: nowrap; } .factory-editor-shell .factory-image-edit-head p { overflow: hidden; margin: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .factory-editor-shell .factory-annotation-tools { grid-area: tools; } .factory-editor-shell .factory-change-request { grid-area: request; gap: 5px; padding: 0; } .factory-editor-shell .factory-change-request textarea { min-height: 150px; max-height: 280px; padding: 2px 3px; border-radius: 0; font-size: 15px; line-height: 1.6; } .factory-editor-shell .factory-change-request small { display: none; } .factory-editor-shell .factory-image-edit-feedback { grid-area: feedback; min-width: 0; min-height: 14px; padding-left: 2px; line-height: 1.3; } .factory-editor-shell .factory-image-revise { grid-area: action; justify-self: end; width: auto; min-width: 142px; min-height: 38px; margin: 0; padding: 9px 16px; border-radius: 9px; font-size: 12px; } .previous-image-choice { width: min(760px,100%); margin: 0 auto; padding: 28px 6px 10px; } .previous-image-choice-copy { margin-bottom: 20px; text-align: center; } .previous-image-choice-copy h3 { margin: 7px 0 6px; color: #f7f8fa; font: 650 25px/1.15 'Space Grotesk',sans-serif; } .previous-image-choice-copy p { margin: 0; color: #9299a8; font-size: 13px; } .previous-image-choice-card { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(270px,.92fr); overflow: hidden; border: 1px solid #2c313d; border-radius: 17px; background: #101219; box-shadow: 0 24px 70px rgba(0,0,0,.28); } .previous-image-choice-card > img { width: 100%; height: auto; min-height: 270px; max-height: 460px; aspect-ratio: 16 / 9; object-fit: contain; background: #090b10; } .previous-image-choice-actions { display: grid; align-content: center; gap: 11px; padding: 22px; } .previous-image-action { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 13px 15px; border: 1px solid #343946; border-radius: 12px; background: #161922; color: #f4f5f7; text-align: left; cursor: pointer; transition: border-color .16s ease,background .16s ease,transform .16s ease; } .previous-image-action:hover { border-color: #596071; background: #1b1f29; transform: translateY(-1px); } .previous-image-action.primary { border-color: rgba(255,48,79,.55); background: linear-gradient(135deg,rgba(255,48,79,.18),rgba(255,48,79,.06)); } .previous-image-action.primary:hover { border-color: #ff304f; background: linear-gradient(135deg,rgba(255,48,79,.25),rgba(255,48,79,.09)); } .previous-image-action > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #252a35; color: #c8cdd7; font-size: 20px; } .previous-image-action.primary > i { background: #ff304f; color: #fff; box-shadow: 0 8px 22px rgba(255,48,79,.26); } .previous-image-action span { display: grid; gap: 3px; min-width: 0; } .previous-image-action strong { font: 650 13px/1.3 'Space Grotesk',sans-serif; } .previous-image-action small { color: #89909e; font-size: 10px; line-height: 1.4; } .previous-image-choice.loading { display: grid; place-items: center; min-height: 280px; color: #8f96a5; text-align: center; } .previous-image-choice.loading i { color: #ff304f; font-size: 28px; } @media (max-width: 720px) { .previous-image-choice-card { grid-template-columns: 1fr; } .previous-image-choice-card > img { min-height: 210px; max-height: 310px; } .script-document-head { align-items: flex-start; flex-direction: column; } .script-document-head h4 { white-space: normal; } .result-actionbar { align-items: stretch; flex-direction: column; } .result-downloads { flex-wrap: wrap; } .result-action-label { flex: 0 0 100%; } .result-download { flex: 1; } .result-secondary-actions { justify-content: flex-end; } .factory-image-edit-head { flex-direction: column; } .factory-annotation-tools { align-items: stretch; flex-wrap: wrap; } .factory-editor-shell .factory-image-edit { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "tools tools" "request request" "feedback action"; } .factory-editor-shell .factory-image-revise { min-height: 38px; } .factory-editor-shell .factory-wand-sensitivity { flex: 1 1 190px; } .factory-editor-shell .factory-wand-sensitivity input { flex: 1; width: auto; } .factory-editor-shell .factory-brush-size { flex: 1 1 190px; } .factory-editor-shell .factory-brush-size input { flex: 1; width: auto; } .factory-filter-head { flex-direction: column; } .factory-filter-adjustments { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 480px) { .script-document-content { padding: 24px 20px 36px; } .result-downloads, .result-secondary-actions { display: grid; grid-template-columns: 1fr; } .result-download { width: 100%; } .factory-filter-adjustments { grid-template-columns: 1fr; } .factory-editor-shell .factory-image-edit { grid-template-columns: 1fr; grid-template-areas: "head" "tools" "request" "feedback" "action"; } .factory-editor-shell .factory-image-revise { justify-self: stretch; width: 100%; } } .result-finished .script-document-content{padding-left:32px;padding-right:32px}.script-table-wrap{max-width:100%;margin:18px 0;overflow:hidden;border:1px solid #2b2e38;border-radius:10px}.script-table-wrap table{width:100%;table-layout:fixed;border-collapse:collapse;background:#11131a;font-size:11px}.script-table-wrap th,.script-table-wrap td{padding:10px 9px;overflow-wrap:anywhere;word-break:normal;hyphens:auto;border-right:1px solid #262933;border-bottom:1px solid #262933;text-align:left;vertical-align:top;line-height:1.4}.script-table-wrap th{background:#191b23;color:#ff5a72;font:700 9px/1.3 'Space Grotesk',sans-serif;letter-spacing:.03em;text-transform:uppercase}.script-table-wrap td{color:#c4c8d2}.script-table-wrap tr:last-child td{border-bottom:0}.script-table-wrap th:last-child,.script-table-wrap td:last-child{border-right:0} @media (max-width: 900px) { .script-table-wrap { overflow-x: auto; } .script-table-wrap table { min-width: 760px; table-layout: auto; } /* Die Tabelle scrollt hier seitlich - Woerter muessen nicht mehr zerteilt werden ("WOC HE", "Longfor m"; CFAI-MOB-20260921-018). */ .script-table-wrap th { overflow-wrap: normal; white-space: nowrap; } .script-table-wrap td { overflow-wrap: break-word; } } .result-next-step { width: min(100%, 920px); margin: 18px auto 0; padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr) auto; gap: 16px; align-items: end; border: 1px solid rgba(255, 48, 79, .28); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 48, 79, .09), rgba(15, 17, 25, .96) 55%); } .result-next-step h4, .result-next-step p { margin: 0; } .result-next-step h4 { margin-top: 4px; color: #fff; font-size: 17px; } .result-next-step p { margin-top: 6px; color: #9299aa; font-size: 12px; line-height: 1.5; } .result-next-step label { display: grid; gap: 6px; color: #c8cdd8; font-size: 11px; font-weight: 700; } .result-next-step select { min-width: 0; height: 42px; padding: 0 38px 0 12px; border: 1px solid #343946; border-radius: 9px; background: #171a22; color: #fff; } .result-next-step .workspace-run { min-width: 150px; height: 42px; margin: 0; } .result-next-actions { display: flex; gap: 8px; align-items: center; } .result-next-actions .finished-copy, .result-next-actions .workspace-run { min-width: 142px; height: 42px; margin: 0; white-space: nowrap; } .radar-next-step { grid-template-columns: minmax(0,1fr) minmax(260px,.8fr) auto; } .workspace-handoff-note { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(255, 48, 79, .26); border-radius: 10px; background: rgba(255, 48, 79, .07); color: #fff; } .workspace-handoff-note > i { color: #ff304f; font-size: 20px; } .workspace-handoff-note span { display: grid; gap: 2px; } .workspace-handoff-note small { color: #8f96a7; font-size: 11px; } @media (max-width: 840px) { .result-next-step { grid-template-columns: 1fr; align-items: stretch; } .result-next-step .workspace-run { width: 100%; } .result-next-actions { display: grid; grid-template-columns: 1fr 1fr; } } .youtube-thumbnail-picker { display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;min-height:92px;padding:10px;border:1px dashed #3a3f4d;border-radius:12px;background:#12151d;cursor:pointer;transition:border-color .16s ease,background .16s ease; } .youtube-thumbnail-picker:hover { border-color:#ff304f;background:rgba(255,48,79,.05); } .youtube-thumbnail-picker input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; } .youtube-thumbnail-preview { display:grid;place-items:center;overflow:hidden;width:92px;height:58px;border-radius:8px;background:#090b10;color:#ff304f;font-size:25px; } .youtube-thumbnail-preview img { width:100%;height:100%;object-fit:cover; } .youtube-thumbnail-picker > span:last-child { display:grid;gap:4px; } .youtube-thumbnail-picker b { color:#fff;font-size:13px; } .youtube-thumbnail-picker small { color:#8e95a4;font-size:11px; } .youtube-publish-result { width:min(900px,100%);margin:24px auto 0; } .youtube-publish-result > header { display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:15px;margin-bottom:20px; } .youtube-result-check { display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#ff304f;color:#fff;font-size:24px;box-shadow:0 12px 30px rgba(255,48,79,.24); } .youtube-publish-result h3,.youtube-publish-result h4,.youtube-publish-result p { margin:0; } .youtube-publish-result > header h3 { margin:4px 0;color:#fff;font:650 24px/1.2 'Space Grotesk',sans-serif; } .youtube-publish-result > header p { color:#939aa9;font-size:12px; } .youtube-visibility-badge { display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #343945;border-radius:999px;background:#171a22;color:#dce0e8;font-size:11px;font-weight:700; } .youtube-visibility-badge.public { border-color:rgba(54,211,153,.35);color:#76e7bc; } .youtube-visibility-badge.scheduled { border-color:rgba(255,48,79,.35);color:#ff7b90; } .youtube-result-card { overflow:hidden;border:1px solid #2c313d;border-radius:17px;background:linear-gradient(145deg,#151821,#0e1016);box-shadow:0 24px 60px rgba(0,0,0,.2); } .youtube-result-main { display:flex;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid #292d37; } .youtube-logo { display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:#ff0033;color:#fff;font-size:31px; } .youtube-result-main small { color:#ff5b75;font-size:9px;font-weight:800;letter-spacing:.13em; } .youtube-result-main h4 { margin:5px 0;color:#fff;font:650 20px/1.3 'Space Grotesk',sans-serif; } .youtube-result-main p { color:#8f96a5;font-size:11px; } .youtube-result-card dl { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0; } .youtube-result-card dl > div { min-width:0;padding:17px 20px;border-right:1px solid #292d37; } .youtube-result-card dl > div:last-child { border-right:0; } .youtube-result-card dt { margin-bottom:7px;color:#737b8b;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } .youtube-result-card dd { overflow:hidden;margin:0;color:#e8eaf0;font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap; } .youtube-result-card dd i { color:#38d39f; } .youtube-pin-note,.youtube-result-warnings { display:flex;align-items:flex-start;gap:10px;margin:0;padding:13px 20px;border-top:1px solid #292d37;color:#aab0bd;font-size:11px; } .youtube-pin-note i { color:#ff5b75;font-size:16px; } .youtube-result-warnings { background:rgba(244,180,0,.06);color:#e7cb85; } .youtube-result-warnings > i { font-size:18px; } .youtube-result-warnings span { display:grid;gap:4px; }.youtube-result-warnings small { color:#b8a775;line-height:1.5; } .youtube-publish-result > footer { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px; } .youtube-publish-result > footer > div { display:flex;gap:9px; } .youtube-result-action { display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid #343945;border-radius:9px;background:#171a22;color:#f4f5f7;font-size:11px;font-weight:700;text-decoration:none; } .youtube-result-action.primary { border-color:#ff304f;background:#ff304f;color:#fff; } @media (max-width:720px){.youtube-publish-result > header{grid-template-columns:48px 1fr}.youtube-visibility-badge{grid-column:2;justify-self:start}.youtube-result-card dl{grid-template-columns:1fr 1fr}.youtube-result-card dl>div:nth-child(2){border-right:0}.youtube-result-card dl>div:nth-child(-n+2){border-bottom:1px solid #292d37}.youtube-publish-result>footer{align-items:stretch;flex-direction:column}.youtube-publish-result>footer>div{display:grid}.youtube-publish-result>footer .finished-copy{width:100%}} /* Dedicated transcription result instead of the generic document preview. */ .transcription-finished{width:100%;max-width:1400px;margin:0;padding-bottom:28px;text-align:left} .transcription-hero{display:grid;grid-template-columns:minmax(220px,1.05fr) minmax(0,1.4fr);gap:16px;align-items:center;padding:15px 18px;border:1px solid #262a35;border-radius:16px;background:linear-gradient(135deg,#161922 0%,#0f1117 62%)} .transcription-hero h4,.transcription-hero small,.transcription-overview p,.transcription-text p{margin:0} .transcription-hero>div:first-child>small,.transcription-overview small,.transcription-text header small{color:#ff526d;font-size:9px;font-weight:800;letter-spacing:.12em} /* Der Dateiname stand als blanker Text in einem Flex-Kasten - dort greift text-overflow nicht, er wurde mitten im Wort abgeschnitten. Als eigenes Element bekommt er sein Auslassungszeichen zurück. */ .transcription-hero h4{display:flex;gap:10px;align-items:center;min-width:0;margin-top:7px;color:#f4f5f8;font:650 15px/1.3 'Space Grotesk',sans-serif} .transcription-hero h4>i{flex:none;color:#ff5973;font-size:17px} .transcription-hero h4>span{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap} .transcription-hero h4 i{color:#ff304f;font-size:21px} /* Die Eckdaten stehen rechts. Vorher klebten sie direkt hinter dem Dateinamen in der Mitte der Zeile und sahen aus wie angehängter Fließtext; die feinen Trennstriche zeigen, dass es einzelne Angaben sind. */ .transcription-metrics{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 0;align-items:center} .transcription-metrics span+span{margin-left:14px;padding-left:14px;border-left:1px solid #262a35} .transcription-metrics span{display:inline-flex;align-items:center;gap:6px;min-width:0} .transcription-metrics span>i{flex:none;color:#ff6b82;font-size:16px;line-height:1} .transcription-metrics span>b{color:#eef0f5;font:650 14px/1.15 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap} .transcription-metrics i{grid-row:1/3;color:#ff526d;font-size:17px} .transcription-metrics b{overflow:hidden;color:#f5f6f8;font-size:12px;text-overflow:ellipsis;white-space:nowrap} .transcription-metrics small{color:#7f8797;font-size:9px} .transcription-overview{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;margin:12px 0;padding:13px 15px 13px 13px;border:1px solid #262a35;border-left:3px solid rgba(255,48,79,.55);border-radius:4px 13px 13px 4px;background:#12141b} .transcription-overview>span{display:grid;place-items:start center;width:30px;padding-top:2px;color:#ff526d;font-size:18px;background:none} .transcription-overview p{margin-top:5px;color:#c7ccd6;font-size:13px;line-height:1.65} .transcription-content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr);gap:14px;align-items:stretch} /* Beide Spalten enden auf gleicher Hoehe - vorher stand die Zeitleiste halb so hoch neben dem Transkript und die Ansicht wirkte unfertig. */ .transcription-text{display:flex;flex-direction:column} .transcription-text>div{flex:1 1 auto} .transcription-text{overflow:hidden;border:1px solid #2b303b;border-radius:15px;background:#12151c;color:#eef0f4;box-shadow:0 16px 42px rgba(0,0,0,.14)} .transcription-text>header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid #292e39;background:#181b24} .transcription-text h4{margin:4px 0 0;color:#f5f6f8;font:650 16px/1.25 'Space Grotesk',sans-serif} .transcription-text>header .finished-copy{min-height:34px;margin:0;padding:0 11px;border-color:#343945;background:#151820;color:#f4f5f7;font-size:10px} .transcription-text>div{max-height:500px;overflow:auto;padding:22px 24px} /* Jeder Absatz beginnt mit der Zeit, an der er im Original faellt. Die Zeiten standen bis zum 19.09.2026 in einer zweiten Spalte, die denselben Text noch einmal zeigte. */ .transcription-text p{color:#c9ced8;font-size:14px;line-height:1.8;white-space:pre-wrap} .transcription-text p+p{margin-top:16px} .transcription-text p.transcription-zeile{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:baseline} .transcription-text p.transcription-zeile>time{display:inline-flex;justify-content:center;align-items:center;align-self:start;min-height:22px;margin-top:3px;border-radius:7px;background:rgba(255,48,79,.13);color:#ff6b82;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap} .transcription-text p.transcription-zeile>time:empty{background:none} @media (max-width:620px){.transcription-text p.transcription-zeile{grid-template-columns:46px minmax(0,1fr);gap:10px}} /* Ruhigere Zeitmarken (CFAI-20260921-013): eine Marke je Abschnitt von rund 30 Sekunden, als schmale graue Zeitspalte statt roter Pille vor jeder Zeile. Die Marke steht auf der Grundlinie der ersten Textzeile. */ .transcription-text p.transcription-zeile{grid-template-columns:48px minmax(0,1fr);gap:18px} .transcription-text p.transcription-zeile+p.transcription-zeile{margin-top:18px} .transcription-text p.transcription-zeile>time{display:block;align-self:baseline;min-height:0;margin:0;padding:0;border-radius:0;background:none;color:#6f7787;font:600 11px/1.8 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-align:left} .transcription-text>header .script-document-copy{position:relative;top:auto;right:auto;flex:none} @media (max-width:620px){.transcription-text p.transcription-zeile{grid-template-columns:40px minmax(0,1fr);gap:12px}} .transcription-finished .result-actionbar{width:100%;margin-top:15px} @media (max-width:920px){.transcription-hero{grid-template-columns:1fr}.transcription-content-grid{grid-template-columns:1fr}} body.transcription-detail-modal-open{overflow:hidden} .transcription-detail-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(2,3,8,.9);backdrop-filter:blur(18px) brightness(.42);opacity:0;transition:opacity .18s ease} .transcription-detail-modal.is-open{opacity:1} .transcription-detail-modal-dialog{display:flex;flex-direction:column;width:min(1040px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:hidden;border-radius:22px;background:linear-gradient(145deg,rgba(15,17,24,.99),rgba(6,7,11,.99));box-shadow:0 32px 100px rgba(0,0,0,.78),0 0 60px rgba(255,48,79,.08)} .transcription-detail-modal-head{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:13px 18px 13px 24px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(7,8,13,.88)} .transcription-detail-modal-head>div{display:grid;gap:2px} .transcription-detail-modal-head span{color:#ff526d;font-size:9px;font-weight:800;letter-spacing:.15em} .transcription-detail-modal-head strong{color:#f5f6fa;font:700 17px/1.2 'Space Grotesk',sans-serif} .transcription-detail-modal-head button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #353a48;border-radius:11px;background:#191d27;color:#eef0f5;font-size:19px;cursor:pointer} .transcription-detail-modal-head button:hover{border-color:#ff304f;background:#2a1520;color:#fff} .transcription-detail-modal-content{overflow:auto;padding:24px;overscroll-behavior:contain} .transcription-detail-modal-content .transcription-finished{max-width:none;padding:0} /* * Im Fenster richten sich Transkript und Zeitmarken nach dem Bildschirm. * * Vorher waren beide Listen fest gedeckelt - das Transkript auf 500px, die * Zeitmarken sogar auf 360px. Das Fenster blieb dadurch klein, obwohl darunter * Platz war, und die Zeitmarken hoerten deutlich frueher auf als das * Transkript daneben (Befund des Betreibers, 19.09.2026). Jetzt wachsen beide * gleich weit mit; der Abzug ist der Platz, den Kopf, Quelldatei, * Kurzueberblick und Downloadleiste ueber und unter ihnen brauchen. * Das !important ueberstimmt die 360px aus ai-contentfactory-profile.css. */ .transcription-detail-modal .transcription-text>div{max-height:max(320px,calc(100dvh - 560px))!important} @media(max-width:760px){.transcription-detail-modal{padding:8px}.transcription-detail-modal-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}.transcription-detail-modal-content{padding:14px}.transcription-detail-modal-head{padding-left:16px}} @media (max-width:620px){.transcription-metrics{justify-content:flex-start}.transcription-text>div{padding:18px}.transcription-text>header{align-items:flex-start;flex-direction:column}} body.dubbing-detail-modal-open{overflow:hidden} .dubbing-detail-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(2,3,8,.91);backdrop-filter:blur(20px) brightness(.4);-webkit-backdrop-filter:blur(20px) brightness(.4);opacity:0;transition:opacity .18s ease} .dubbing-detail-modal.is-open{opacity:1} .dubbing-detail-modal-dialog{display:flex;flex-direction:column;width:min(1380px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:hidden;border-radius:22px;background:linear-gradient(145deg,rgba(15,17,24,.99),rgba(6,7,11,.99));box-shadow:0 32px 100px rgba(0,0,0,.8),0 0 60px rgba(255,48,79,.08)} .dubbing-detail-modal-head{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:13px 18px 13px 24px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(7,8,13,.88)} .dubbing-detail-modal-head>div{display:grid;gap:2px} .dubbing-detail-modal-head span{color:#ff526d;font-size:9px;font-weight:800;letter-spacing:.15em} .dubbing-detail-modal-head strong{color:#f5f6fa;font:700 17px/1.2 'Space Grotesk',sans-serif} .dubbing-detail-modal-head button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #353a48;border-radius:11px;background:#191d27;color:#eef0f5;font-size:19px;cursor:pointer} .dubbing-detail-modal-head button:hover{border-color:#ff304f;background:#2a1520;color:#fff} .dubbing-detail-modal-content{overflow:auto;padding:18px 20px;overscroll-behavior:contain} .dubbing-detail-modal-content .dubbing-finished{max-width:none;padding:0} .dubbing-detail-modal-content>.factory-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:280px;color:#aeb5c2} @media(max-width:760px){.dubbing-detail-modal{padding:8px}.dubbing-detail-modal-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}.dubbing-detail-modal-content{padding:14px}.dubbing-detail-modal-head{padding-left:16px}} .dubbing-finished{display:grid;grid-template-areas:"success success" "summary summary" "player speakers" "details details" "actions actions";grid-template-columns:minmax(0,1.8fr) minmax(300px,.72fr);gap:12px;width:100%;max-width:none;margin:0;padding-bottom:4px;text-align:left} .dubbing-finished .result-success-line{grid-area:success;width:100%;margin:0}.dubbing-finished .result-success-icon{border-radius:14px}.dubbing-finished .result-success-line h3{font-size:25px}.dubbing-finished .result-success-line p{font-size:12px} .dubbing-summary{grid-area:summary;display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(0,1fr);gap:16px;align-items:center;padding:12px 16px;border:1px solid #2a2e39;border-radius:15px;background:linear-gradient(120deg,rgba(255,48,79,.1),#141720 35%,#101218);box-shadow:0 16px 42px rgba(0,0,0,.16)} .dubbing-summary h4,.dubbing-summary p{margin:0}.dubbing-summary>div:first-child>small,.dubbing-transcript header small,.dubbing-segments header small,.dubbing-speakers header small{color:#ff526d;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .dubbing-summary h4{margin:6px 0 5px;overflow:hidden;color:#fff;font:650 17px/1.25 'Space Grotesk',sans-serif;text-overflow:ellipsis;white-space:nowrap}.dubbing-summary p{color:#aab0bd;font-size:12px}.dubbing-summary p i{margin:0 8px;color:#ff526d} .dubbing-summary>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 20px;align-items:center}.dubbing-zahl{display:inline-flex;align-items:center;gap:6px;min-width:0} .dubbing-zahl>i{flex:none;color:#ff6b82;font-size:16px;line-height:1}.dubbing-zahl>b{color:#eef0f5;font:650 14px/1.15 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap} .dubbing-player>video{max-height:min(46vh,420px)} .dubbing-player{grid-area:player;display:grid;place-items:center;align-self:start;width:100%;min-height:0;overflow:hidden;border:1px solid #2d323e;border-radius:16px;background:radial-gradient(circle at 50% 45%,#171b25,#050608 72%);box-shadow:0 22px 55px rgba(0,0,0,.25)}.dubbing-player video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#050608}.dubbing-player audio{width:calc(100% - 40px);margin:34px 20px}.dubbing-video-player{position:relative;width:100%;max-width:min(100%,calc(min(46vh,420px) * 16 / 9));aspect-ratio:16/9;margin:0 auto;overflow:hidden;background:#050608}.dubbing-video-player video{width:100%;height:100%;object-fit:contain}/* Das Vorschaubild liegt hinter den Bedienelementen und verschwindet, sobald das Video laeuft - vorher trug die Kachel die ganze MP4 (18.09.2026). */.dubbing-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050608;pointer-events:none}/* Vorschaubild der Kachel in der Uebersicht - gleiche Rolle, andere Stelle. */.dubbing-kachel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050608}.dubbing-video-player.is-playing .dubbing-video-poster{opacity:0}.dubbing-player-center{position:absolute;inset:50% auto auto 50%;width:64px;height:64px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(16,18,25,.88);color:#fff;font-size:25px;display:grid;place-items:center;cursor:pointer;opacity:.94;transition:.18s ease}.dubbing-player-center:hover{background:#ff304f;transform:translate(-50%,-50%) scale(1.06)}.dubbing-video-player.is-playing .dubbing-player-center{opacity:0;pointer-events:none}.dubbing-player-controls{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(180deg,rgba(9,11,16,.72),rgba(9,11,16,.94));backdrop-filter:blur(12px);color:#e7eaf1}.dubbing-player-controls button{width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}.dubbing-player-controls button:hover{background:#ff304f}.dubbing-player-controls span{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}.dubbing-player-controls input{flex:1;min-width:40px;accent-color:#ff304f}.dubbing-video-player.has-error:after{content:"Videodatei konnte nicht geladen werden";position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,8,12,.82);color:#ff8a9b;font-size:13px} .dubbing-result-grid{grid-area:details;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr);gap:16px;width:100%}.dubbing-transcript,.dubbing-segments{min-width:0;overflow:hidden;border:1px solid #2b303b;border-radius:15px;background:#12151c;color:#eef0f4;box-shadow:0 16px 42px rgba(0,0,0,.14)}.dubbing-transcript header,.dubbing-segments header,.dubbing-speakers header{padding:10px 15px;border-bottom:1px solid #292e39;background:#181b24}.dubbing-transcript h4,.dubbing-segments h4,.dubbing-speakers h4{margin:4px 0 0;color:#f5f6f8;font:650 16px/1.25 'Space Grotesk',sans-serif}.dubbing-transcript>div{min-height:88px;max-height:min(34vh,300px);overflow:auto;padding:14px 18px;scrollbar-color:#3a3f4c transparent}.dubbing-transcript p{margin:0;color:#c9ced8;font-size:14px;line-height:1.85;white-space:pre-wrap} .dubbing-segments>div{min-height:88px;max-height:min(34vh,300px);overflow:auto;padding:4px 14px 10px;scrollbar-color:#3a3f4c transparent}.dubbing-segments article{display:grid;grid-template-columns:48px 1fr;gap:11px;padding:12px 3px;border-bottom:1px solid #292e38}.dubbing-segments article:last-child{border:0}.dubbing-segments time{align-self:start;padding:6px;border-radius:7px;background:rgba(255,48,79,.13);color:#ff6b82;font-size:10px;font-weight:800;text-align:center}.dubbing-segments small{color:#ff6b82;font-size:9px;font-weight:750}.dubbing-segments p{margin:3px 0 0;color:#aeb5c2;font-size:11px;line-height:1.55} .dubbing-speakers{grid-area:speakers;align-self:start;overflow:hidden;border:1px solid #2d323e;border-radius:16px;background:#11141b;box-shadow:0 22px 55px rgba(0,0,0,.2)}.dubbing-speakers header{border-color:#292e39;background:linear-gradient(135deg,#191c25,#14171f)}.dubbing-speakers header h4{color:#fff}.dubbing-speakers>div{display:grid;grid-template-columns:1fr;gap:1px;background:#292e39}.dubbing-speakers article{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;min-height:56px;padding:9px 14px;background:#11141b}.dubbing-speakers article>span{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,rgba(255,48,79,.22),rgba(255,48,79,.08));color:#ff6179;font-size:11px;font-weight:800}.dubbing-speakers article div{display:grid;min-width:0}.dubbing-speakers article b{overflow:hidden;color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.dubbing-speakers article small,.dubbing-speakers article em{color:#808899;font-size:9px;font-style:normal}.dubbing-speakers article em{grid-column:2;margin-top:-18px;text-align:right}/* Vollbild. Alle drei Spieler (Video-Uebersetzung, Videogenerator, Shorts) schalten ihre HUELLE ins Vollbild, nicht das