/* ===================================================================== Video-Studio – UI (framework-frei), hell/dunkel umschaltbar. Theme über . Tokens unten je Theme. ===================================================================== */ /* ---- Design-Tokens: DUNKEL (Standard) ---- */ :root, :root[data-theme="dark"] { --bg: #0e131a; --bg-2: #121a24; --panel: #161f2b; --panel-2: #1d2836; --elevated: #1f2b3a; --border: #2a3646; --border-2: #34445a; --text: #eef2f7; --text-2: #c2cdda; --muted: #8a97a7; --primary: #14b8a6; /* v80: Teal wie Swipeless */ --primary-2: #2dd4bf; --primary-ink:#ffffff; --accent: #14b8a6; --ok: #34d399; --warn: #fbbf24; --err: #f87171; --ring: rgba(20,184,166,.40); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --radius: 12px; color-scheme: dark; } /* ---- Design-Tokens: HELL ---- */ :root[data-theme="light"] { --bg: #f4f6fb; --bg-2: #eef1f7; --panel: #ffffff; --panel-2: #f6f8fc; --elevated: #ffffff; --border: #e2e7f0; --border-2: #d3dae6; --text: #16202e; --text-2: #3a4757; --muted: #6b7787; --primary: #0d9488; /* v80: Teal wie Swipeless */ --primary-2: #0f766e; --primary-ink:#ffffff; --accent: #0d9488; --ok: #0ea968; --warn: #b8790a; --err: #d64545; --ring: rgba(13,148,136,.28); --shadow: 0 1px 2px rgba(16,32,64,.06), 0 10px 28px rgba(16,32,64,.10); --shadow-sm: 0 1px 2px rgba(16,32,64,.08); color-scheme: light; } *{ box-sizing:border-box } html{ -webkit-text-size-adjust:100% } body{ margin:0; background:var(--bg); color:var(--text); font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.55; font-size:15px; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none } h1{ font-size:1.5rem; letter-spacing:-.01em; margin:0 0 4px } h2{ font-size:1.15rem; letter-spacing:-.01em } h3{ font-size:1rem } .muted{ color:var(--muted) } .small{ font-size:.85em } .empty{ padding:56px 0; text-align:center } hr{ border:0; border-top:1px solid var(--border); margin:18px 0 } code{ background:var(--panel-2); padding:2px 6px; border-radius:6px; font-size:.9em; border:1px solid var(--border) } svg.ico{ width:1.1em; height:1.1em; vertical-align:-.15em; flex:0 0 auto } /* ---- Topbar ---- */ .topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:20px; padding:0 22px; height:60px; background:color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border); } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em } .brand .logo{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg, var(--primary), #8b5cf6); color:#fff; box-shadow:var(--shadow-sm); } .topbar nav{ display:flex; gap:4px } .topbar nav a{ display:flex; align-items:center; gap:7px; color:var(--text-2); padding:8px 12px; border-radius:9px; font-weight:500; } .topbar nav a:hover{ background:var(--panel-2); color:var(--text) } .topbar nav a.active{ background:var(--panel-2); color:var(--text) } .topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px } .topbar .user{ color:var(--muted); font-size:.9rem; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .icon-btn{ display:grid; place-items:center; width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--panel-2); color:var(--text-2); cursor:pointer; } .icon-btn:hover{ color:var(--text); border-color:var(--border-2) } .inline{ display:inline } .wrap{ padding:26px; max-width:1440px; margin:0 auto } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px; border:1px solid var(--border-2); background:var(--panel-2); color:var(--text); border-radius:10px; cursor:pointer; font-size:.92rem; font-weight:500; font-family:inherit; transition:background .15s, border-color .15s, transform .05s, box-shadow .15s; } .btn:hover{ border-color:var(--muted); background:var(--elevated) } .btn:active{ transform:translateY(1px) } .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring) } .btn-primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink) } .btn-primary:hover{ background:var(--primary-2); border-color:var(--primary-2) } .btn-ghost{ background:transparent; border-color:transparent } .btn-ghost:hover{ background:var(--panel-2); border-color:var(--border) } .btn-danger:hover{ border-color:var(--err); color:var(--err) } .btn-sm{ padding:6px 11px; font-size:.85rem; border-radius:9px } .btn-xs{ padding:4px 8px; font-size:.78rem; border-radius:7px } .btn-block{ width:100%; } /* ---- Formularfelder ---- */ input,select,textarea{ background:var(--panel); border:1px solid var(--border-2); color:var(--text); border-radius:10px; padding:10px 12px; font:inherit; width:100%; transition:border-color .15s, box-shadow .15s; } input::placeholder,textarea::placeholder{ color:var(--muted) } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring) } label{ font-size:.9rem; color:var(--text-2) } .alert{ padding:11px 14px; border-radius:10px; margin:12px 0; border:1px solid transparent } .alert-error{ background:color-mix(in srgb, var(--err) 14%, var(--panel)); border-color:color-mix(in srgb,var(--err) 40%, transparent); color:var(--err) } .alert-ok{ background:color-mix(in srgb, var(--ok) 14%, var(--panel)); border-color:color-mix(in srgb,var(--ok) 40%, transparent); color:var(--ok) } /* ---- Login ---- */ .bare{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:radial-gradient(1200px 600px at 50% -10%, var(--bg-2), var(--bg)); } .login-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:34px; width:380px; max-width:92vw; box-shadow:var(--shadow); } .login-card .brand{ margin-bottom:14px; font-size:1.2rem } .login-card label{ display:block; margin:16px 0 5px } .login-card .btn{ margin-top:22px; width:100% } /* ---- 2-Spalten-Layout ---- */ .layout-2col{ display:grid; grid-template-columns:264px 1fr; gap:26px } .sidebar{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; height:fit-content; position:sticky; top:84px; box-shadow:var(--shadow-sm) } .side-section{ margin-top:18px } .side-head{ display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; font-weight:600 } .folder-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px } .folder-list li{ border-radius:9px } .folder-list li a{ display:flex; align-items:center; gap:9px; padding:8px 10px; color:var(--text-2); border-radius:9px } .folder-list li a:hover{ background:var(--panel-2); color:var(--text) } .folder-list li.active > a{ background:var(--panel-2); color:var(--text); font-weight:500 } .folder-item{ display:flex; align-items:center; justify-content:space-between } .folder-item .btn-xs{ opacity:0; transition:opacity .15s } .folder-item:hover .btn-xs{ opacity:1 } .folder-item.dragover{ outline:2px dashed var(--primary); outline-offset:-2px; background:color-mix(in srgb,var(--primary) 10%, transparent) } .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto } .count{ margin-left:auto; color:var(--muted); font-size:.78rem; background:var(--panel-2); padding:1px 8px; border-radius:999px } .side-foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border) } .side-foot a{ color:var(--muted); display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px } .side-foot a:hover{ color:var(--text); background:var(--panel-2) } /* ---- Projektraster ---- */ .content > h1{ margin-bottom:18px; display:flex; align-items:center; gap:10px } .project-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px } .project-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s, border-color .12s; cursor:grab; } .project-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--border-2) } .project-card:active{ cursor:grabbing } .pc-body{ padding:18px } .pc-body h3{ margin:0 0 10px; font-size:1.05rem; letter-spacing:-.01em } .pc-meta{ display:flex; flex-direction:column; gap:6px } .pc-actions{ display:flex; gap:7px; padding:12px 18px; border-top:1px solid var(--border); flex-wrap:wrap } .badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.74rem; font-weight:500; width:fit-content } .badge::before{ content:""; width:6px; height:6px; border-radius:50% } .badge-draft{ background:color-mix(in srgb,#6b8cc9 18%, transparent); color:#7ea3df } .badge-draft::before{ background:#7ea3df } .badge-queued{ background:color-mix(in srgb,var(--warn) 18%, transparent); color:var(--warn) } .badge-queued::before{ background:var(--warn) } .badge-rendering{ background:color-mix(in srgb,#22c3e6 18%, transparent); color:#3fcbe6 } .badge-rendering::before{ background:#3fcbe6 } .badge-done{ background:color-mix(in srgb,var(--ok) 18%, transparent); color:var(--ok) } .badge-done::before{ background:var(--ok) } .badge-error{ background:color-mix(in srgb,var(--err) 18%, transparent); color:var(--err) } .badge-error::before{ background:var(--err) } .badge-err{ background:color-mix(in srgb,var(--err) 18%, transparent); color:var(--err) } .badge-err::before{ background:var(--err) } /* ---- Stil-Auswahl (Schritt 3) ---- */ .style-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:6px 0 16px } .style-card{ position:relative; display:flex; flex-direction:column; gap:3px; padding:12px 14px; border:1.5px solid var(--border); border-radius:12px; background:var(--panel-2); cursor:pointer; transition:border-color .15s, background .15s } .style-card:hover{ border-color:var(--border-2) } .style-card input{ position:absolute; opacity:0; pointer-events:none } .style-card:has(input:checked){ border-color:var(--accent,#6b8cc9); background:color-mix(in srgb,var(--accent,#6b8cc9) 12%, transparent) } .style-card .sc-thumb{ width:100%; height:auto; border-radius:8px; display:block; margin-bottom:7px; border:1px solid var(--border) } .style-card .sc-title{ font-weight:600; font-size:.92rem } .style-card .sc-desc{ font-size:.78rem; color:var(--text-2) } .style-card:has(input:checked) .sc-thumb{ outline:2px solid var(--accent,#6b8cc9); outline-offset:1px } .check-row{ display:flex; flex-direction:row; align-items:center; gap:9px; cursor:pointer } .check-row input{ width:17px; height:17px } /* Quelle/Besetzung: Karten ohne Bild, mehr Text */ .src-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) } .src-card{ gap:6px } .src-card .sc-desc{ line-height:1.4 } .src-card .sc-meta{ font-size:.74rem; color:var(--text-2); margin-top:2px; opacity:.85 } /* Referenz-Bilder (Schritt 7) */ .ref-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:8px } .ref-item{ margin:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--panel-2) } .ref-item img{ width:100%; height:100px; object-fit:cover; display:block } .ref-item figcaption{ font-size:.72rem; padding:4px 6px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } /* Szenen-Liste (Schritt 6) */ .scene-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px } .scene-item{ display:grid; grid-template-columns:auto 1fr; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2) } .scene-idx{ font-weight:700; color:var(--text-2); font-size:.86rem; padding-top:2px } .scene-desc{ font-size:.92rem; line-height:1.4 } .scene-kw{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px } .scene-kw .kw{ font-size:.7rem; padding:2px 7px; border-radius:999px; background:var(--panel); border:1px solid var(--border); color:var(--text-2) } .scene-meta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; font-size:.75rem; color:var(--text-2) } .scene-meta .scene-src.ok{ color:var(--ok) } .lib-tabs{ display:flex; gap:8px; margin:4px 0 6px } .scene-prompt{ width:100%; font-size:.8rem; line-height:1.35; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); padding:7px 9px; resize:vertical } .meta-head{ margin:16px 0 6px; font-size:.92rem } .tag-cloud{ display:flex; flex-wrap:wrap; gap:6px } .script-desc{ font-size:.88rem; line-height:1.45 } /* Szenen-Bilder (Schritt 8) */ .scene-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:14px } .scene-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel-2); display:flex; flex-direction:column } .scene-thumb{ position:relative; width:100%; aspect-ratio:16/9; background:var(--panel); display:flex; align-items:center; justify-content:center } .scene-thumb img{ width:100%; height:100%; object-fit:contain; display:block; background:#000 } .scene-thumb video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; cursor:pointer } /* Format folgt dem Projekt (Schritt 4) – gesetzt per Inline-Style auf .scene-thumb */ .scene-cardbody{ padding:9px 11px; display:flex; flex-direction:column; gap:6px } .scene-cardbody .scene-desc{ font-size:.8rem; color:var(--text-2); line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden } .ref-type-head{ margin:18px 0 8px; font-size:1rem } .final-video{ width:100%; max-width:560px; border-radius:12px; border:1px solid var(--border); display:block; margin:10px 0 } /* Charakter-Karten (Schritt 7) */ .char-card{ display:grid; grid-template-columns:150px 1fr; gap:14px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); margin-bottom:12px } .char-card--nomedia{ grid-template-columns:1fr } .char-ref{ position:relative; width:150px; height:170px; border-radius:10px; overflow:hidden; background:var(--panel); border:1px solid var(--border) } .char-ref img{ width:100%; height:100%; object-fit:cover; display:block } .char-noref{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-2); font-size:.82rem } .char-badge{ position:absolute; left:6px; bottom:6px; font-size:.68rem; padding:2px 7px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff } .char-fields{ display:flex; flex-direction:column; gap:8px } .char-fields .char-name{ font-weight:600 } .char-actions{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:2px } .char-actions .btn.btn-sm{ position:relative; overflow:hidden } .alt-refs-section { margin-top:.4rem; } .alt-ref-row { display:flex; align-items:center; gap:.4rem; margin-top:.3rem; } /* ---- Voiceover-Liste (Schritt 2) ---- */ .vo-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px } .vo-item{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2) } .vo-item .vo-text{ font-size:.92rem; line-height:1.35 } .vo-item audio{ height:34px; width:230px; max-width:40vw } /* ---- Modal ---- */ .modal{ border:1px solid var(--border); border-radius:16px; background:var(--panel); color:var(--text); padding:0; max-width:92vw; box-shadow:var(--shadow) } .modal::backdrop{ background:rgba(4,8,14,.55); backdrop-filter:blur(2px) } .modal-body{ padding:26px; width:440px; max-width:90vw } .modal-body label{ display:block; margin:14px 0 5px } .modal-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:22px } /* ---- Wizard ---- */ .wizard-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px } .title-input{ max-width:440px; font-size:1.05rem; font-weight:600; background:transparent; border-color:transparent } .title-input:hover{ border-color:var(--border) } .autosave{ margin-left:auto; color:var(--muted); font-size:.85rem; display:flex; align-items:center; gap:6px } .autosave::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok) } .stepbar{ display:flex; gap:0; list-style:none; padding:0; margin:0 0 26px; overflow-x:auto; scrollbar-width:thin } .stepbar li{ flex:0 0 auto; position:relative } .stepbar li a{ display:flex; align-items:center; gap:9px; padding:9px 16px 9px 12px; color:var(--text-2) } .stepbar li .num{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.78rem; font-weight:600; background:var(--panel-2); border:1px solid var(--border-2); color:var(--muted) } .stepbar li.done .num{ background:var(--ok); border-color:var(--ok); color:#04240f } .stepbar li.current a{ color:var(--text) } .stepbar li.current .num{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 0 4px var(--ring) } .stepbar li .lbl{ font-size:.86rem; white-space:nowrap } .stepbar li:not(:last-child)::after{ content:""; position:absolute; right:0; top:50%; width:1px; height:20px; background:var(--border); transform:translateY(-50%) } .step-panel{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:26px; max-width:860px; box-shadow:var(--shadow-sm) } .step-panel > h2{ margin-top:0 } .step-panel label{ display:block; margin:18px 0 6px } .wizard-nav{ display:flex; justify-content:space-between; margin-top:26px; gap:12px } .callout{ background:color-mix(in srgb,var(--primary) 8%, var(--panel)); border:1px solid color-mix(in srgb,var(--primary) 28%, transparent); padding:13px 15px; border-radius:11px; margin-top:14px; color:var(--text-2) } .callout-warn{ background:color-mix(in srgb,#e6a23c 10%, var(--panel)); border-color:color-mix(in srgb,#e6a23c 40%, transparent) } .callout .tag{ margin:2px 4px 2px 0 } .action-row{ display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap } .plan-out{ background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:14px; margin-top:14px; white-space:pre-wrap; font-size:.85rem; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; color:var(--text-2) } /* ---- Bibliothek ---- */ .lib-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px } .lib-head h1{ margin:0; margin-right:auto } .lib-filter{ display:flex; gap:9px; margin-bottom:18px; flex-wrap:wrap } .lib-filter input[type=search]{ max-width:380px } .asset-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px } .asset-card{ background:var(--panel); border:1px solid var(--border); border-radius:13px; overflow:hidden; margin:0; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s } .asset-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow) } /* v84 (Reiners Befund): Hochkant-Bilder (9:16) wurden auf 16/10 beschnitten – sichtbar war nur ein Querstreifen aus der Bildmitte (Haare, Zimmerdecke). Jetzt höheres Kachelformat + contain: JEDES Bild ist komplett zu sehen. */ .asset-thumb{ position:relative; aspect-ratio:4/3; background:var(--panel-2); display:grid; place-items:center; overflow:hidden } .asset-thumb img{ width:100%; height:100%; object-fit:contain } .ph{ font-size:1.8rem; color:var(--muted); display:grid; place-items:center } .fav{ position:absolute; top:8px; right:9px; color:#fbbf24; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) } .asset-card figcaption{ padding:11px 12px } .asset-title{ font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .tags{ display:flex; gap:5px; flex-wrap:wrap; margin:7px 0 } .tag{ background:var(--panel-2); border:1px solid var(--border); border-radius:7px; padding:1px 7px; font-size:.72rem; color:var(--muted) } .asset-meta{ margin-top:2px } .asset-actions{ display:flex; gap:6px; margin-top:9px } .upload-progress{ margin-bottom:12px; color:var(--muted) } /* ---- Admin ---- */ .admin{ max-width:1040px } .card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:22px; margin-bottom:22px; box-shadow:var(--shadow-sm) } .card h2{ margin-top:0; display:flex; align-items:center; gap:9px } .table{ width:100%; border-collapse:collapse } .table th{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--border-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) } .table td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); font-size:.9rem } .table tr:last-child td{ border-bottom:none } .row-actions{ display:flex; gap:6px } .inline-form{ display:flex; gap:9px; align-items:end; flex-wrap:wrap; margin-top:14px } .inline-form label{ display:flex; flex-direction:column; font-size:.8rem; gap:5px } .inline-form input,.inline-form select{ width:auto } .key-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px } .key-row{ display:flex; flex-direction:column; gap:7px; background:var(--panel-2); padding:13px; border-radius:11px; border:1px solid var(--border) } .key-row label{ display:flex; justify-content:space-between; align-items:center; font-weight:500 } .key-status{ font-size:.7rem; padding:2px 8px; border-radius:999px; font-weight:500 } .key-status.set{ background:color-mix(in srgb,var(--ok) 18%, transparent); color:var(--ok) } .key-status.unset{ background:color-mix(in srgb,var(--err) 16%, transparent); color:var(--err) } .domain-list{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:2px } .domain-list li{ display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--border) } .prompt-block{ border:1px solid var(--border); border-radius:11px; margin-bottom:10px; padding:10px 14px; background:var(--panel-2) } .prompt-block summary{ cursor:pointer; padding:4px 0; font-weight:500 } .prompt-form{ margin-top:10px } .prompt-meta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px } .prompt-meta label{ display:flex; flex-direction:column; font-size:.8rem; gap:4px } .prompt-meta input,.prompt-meta select{ width:auto } .prompt-form textarea{ width:100%; font-family:ui-monospace,monospace; font-size:.85rem; line-height:1.5 } .mp-kind{ margin:18px 0 7px; font-size:.95rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600 } .mp-table td{ vertical-align:middle } .mp-table input{ width:auto } /* ---- Toaster (Politur der Rückmeldungen) ---- */ .toast-wrap{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:100 } .toast{ background:var(--elevated); border:1px solid var(--border-2); border-left:3px solid var(--primary); border-radius:11px; padding:12px 15px; box-shadow:var(--shadow); max-width:360px; font-size:.9rem; animation:toast-in .2s ease-out } .toast.ok{ border-left-color:var(--ok) } .toast.err{ border-left-color:var(--err) } @keyframes toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } } /* ---- Responsiv ---- */ @media(max-width:860px){ .layout-2col{ grid-template-columns:1fr } .sidebar{ position:static; order:2 } .wrap{ padding:18px } } /* ---- Job-Status & Ergebnis ---- */ .status-box{ background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:11px; padding:12px 15px; margin:6px 0 18px; font-size:.92rem; color:var(--text-2) } .status-box .status-hint{ margin-top:8px; font-size:.85rem; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:9px 11px } .status-box .status-extra{ margin-top:8px; font-size:.82rem } .spin{ display:inline-block; width:14px; height:14px; border:2px solid var(--border-2); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px } @keyframes spin{ to{ transform:rotate(360deg) } } /* v131: Fortschrittsbalken der Skript-Pipeline */ .prog{ height:9px; background:var(--border-2); border-radius:5px; overflow:hidden; margin:8px 0 6px } .prog>i{ display:block; height:100%; background:var(--primary); border-radius:5px; transition:width .5s ease } .prog-steps{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:.82rem; color:var(--muted) } .prog-steps .done{ color:var(--ok) } .prog-steps .cur{ color:var(--text); font-weight:600 } .ok-dot,.err-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:1px } .ok-dot{ background:var(--ok) } .err-dot{ background:var(--err) } .result-block{ margin-top:22px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2); overflow:hidden } .result-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border) } .result-head h3{ margin:0 } .sentence-list{ margin:0; padding:14px 16px 14px 40px; display:flex; flex-direction:column; gap:9px } .sentence-list li{ line-height:1.5 } .sec{ display:inline-block; font-size:.66rem; font-weight:600; letter-spacing:.04em; padding:1px 6px; border-radius:6px; margin-right:8px; vertical-align:1px; background:var(--panel); border:1px solid var(--border); color:var(--muted) } .sec-hook{ color:var(--primary); border-color:color-mix(in srgb,var(--primary) 40%, transparent) } .sec-outro{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%, transparent) } /* Eingabe + Knopf nebeneinander (URL/Stimme) */ .input-row{ display:flex; gap:8px; align-items:stretch } .input-row > input,.input-row > select{ flex:1 } .input-row > .btn{ white-space:nowrap } /* --- Kosten-Anzeige (pro Schritt + gesamt, wie Swipeless-Credits) --- */ .cost-total{ font-size:.86rem; color:var(--text-2); white-space:nowrap } .cost-total strong{ color:var(--text) } .stepbar li .step-cost{ font-size:.7rem; color:var(--text-2); background:var(--bg-2, rgba(255,255,255,.06)); border:1px solid var(--border); border-radius:9px; padding:1px 6px; white-space:nowrap } .stepbar li.current .step-cost{ color:var(--text) } /* --- Checkbox-Zeile (z. B. Zahlen/Namen-Verfremdung in Schritt 1) --- */ .chk-row{ display:flex; align-items:flex-start; gap:10px; margin:10px 0 14px; cursor:pointer } .chk-row input[type=checkbox]{ margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--primary) } .chk-row span{ font-size:.9rem; color:var(--text-2); line-height:1.45 } .chk-row span strong{ color:var(--text) } /* --- Schritt 1: Zusammenfassung/Beschreibung/Virale Analyse --- */ #scriptSummary, #scriptDesc{ margin-top:4px } .viral-box{ margin-top:16px; border:1px solid var(--border); border-radius:10px; padding:10px 14px; background:var(--panel-2) } .viral-box summary{ cursor:pointer; list-style:none } .viral-box summary::before{ content:"▸ "; color:var(--muted) } .viral-box[open] summary::before{ content:"▾ " } .viral-analysis{ white-space:pre-wrap; font-family:inherit; font-size:.88rem; color:var(--text-2); margin:10px 0 2px; line-height:1.5 } /* ===== v48: Visual Director (Schritt 6) ===== */ .vd-block h3{ margin-top:0 } .vd-metaphor{ line-height:1.55; color:var(--text-1) } .vd-palette{ display:flex; flex-wrap:wrap; gap:10px } .vd-swatch{ display:inline-flex; align-items:center; gap:7px; background:var(--panel-2); border:1px solid var(--border); border-radius:20px; padding:4px 12px 4px 5px; font-size:.85rem } .vd-swatch i{ width:22px; height:22px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.2) } .vd-swatch code{ opacity:.6; font-size:.75rem } .vd-beats{ margin:8px 0 0 18px; display:flex; flex-direction:column; gap:8px } /* ===== v48: Perspektiven (Schritt 7) ===== */ .persp-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px } .persp-chip{ display:inline-flex; align-items:center; gap:6px; border:1px dashed var(--border); border-radius:9px; padding:3px 8px; font-size:.82rem; color:var(--text-2) } .persp-chip.done{ border-style:solid; border-color:color-mix(in srgb,var(--ok,#3aa76d) 60%, transparent) } .persp-chip img{ width:34px; height:34px; object-fit:cover; border-radius:6px } .persp-gen{ border:0; background:transparent; cursor:pointer; font-size:.95rem; padding:0 2px } .persp-gen:hover{ transform:scale(1.2) } /* ===== v48: Thumbnail-Designer (Schritt 11) ===== */ .inline-label{ display:inline-flex !important; align-items:center; gap:8px; margin:0 !important } .inline-label select{ width:auto } .thumb-refs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px } .thumb-ref{ position:relative; display:inline-block } .thumb-ref img{ width:150px; aspect-ratio:16/9; object-fit:cover; border-radius:9px; border:1px solid var(--border) } .thumb-ref button{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; border:0; background:var(--danger,#c0392b); color:#fff; cursor:pointer; line-height:1 } /* ---- Referenz-Bibliothek (Phase 39) ---- */ .ref-add textarea{ width:100%; font-size:.88rem } .ref-add-row{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-top:10px } .ref-add-row label{ display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--text-2) } .ref-add-row label.check-row{ flex-direction:row; align-items:center; padding-bottom:8px } .ref-add-row input[type=text]{ min-width:220px } .ref-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px } .ref-card{ background:var(--panel); border:1px solid var(--border); border-radius:13px; overflow:hidden; margin:0; box-shadow:var(--shadow-sm) } .ref-card:hover{ box-shadow:var(--shadow) } .ref-thumb{ position:relative; display:block; aspect-ratio:16/9; background:var(--panel-2); overflow:hidden } .ref-thumb img{ width:100%; height:100%; object-fit:cover; display:block } .ref-badge{ position:absolute; top:7px; left:8px; background:rgba(0,0,0,.55); color:#fff; border-radius:999px; padding:2px 7px; font-size:.8rem } .ref-card figcaption{ padding:10px 12px; display:flex; flex-direction:column; gap:5px } .ref-genre{ width:100%; font-size:.8rem; padding:4px 7px } .ref-analysis summary{ cursor:pointer; font-size:.8rem; color:var(--primary) } .ref-analysis p{ font-size:.8rem; color:var(--text-2); margin:6px 0 0; line-height:1.4 } /* Schritt 11: Zutaten aus der Bibliothek */ .thumb-lib{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-top:10px } .thumb-lib-card{ position:relative; border:2px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; background:var(--panel) } .thumb-lib-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block } .thumb-lib-card .tl-title{ font-size:.74rem; padding:5px 7px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .thumb-lib-card.sel{ border-color:var(--primary); box-shadow:0 0 0 3px var(--ring) } .thumb-lib-card.auto:not(.sel){ border-style:dashed; border-color:color-mix(in srgb,var(--primary) 55%, transparent) } .thumb-lib-card .tl-flag{ position:absolute; top:6px; left:6px; background:var(--primary); color:var(--primary-ink); font-size:.68rem; padding:2px 6px; border-radius:999px } .thumb-chars{ display:flex; gap:12px; flex-wrap:wrap } .thumb-char{ display:flex !important; flex-direction:column; align-items:center; gap:5px; cursor:pointer; border:2px solid transparent; border-radius:11px; padding:7px; margin:0 !important } .thumb-char:has(input:checked){ border-color:var(--primary); background:color-mix(in srgb,var(--primary) 7%, transparent) } .thumb-char img{ width:74px; height:74px; object-fit:cover; border-radius:9px } .thumb-char input{ display:none } .thumb-char span{ font-size:.8rem } .thumb-drafts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:14px } .thumb-draft{ position:relative; cursor:pointer; border:3px solid transparent; border-radius:13px; overflow:hidden } .thumb-draft img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block } .thumb-draft.sel{ border-color:var(--primary) } .thumb-pick{ position:absolute; bottom:0; left:0; right:0; text-align:center; padding:5px; background:rgba(0,0,0,.55); color:#fff; font-size:.85rem } .thumb-draft.sel .thumb-pick{ background:var(--primary) } /* ===== v48: Editor (Schritt 12) ===== */ .editor-wrap{ display:flex; flex-direction:column; gap:16px; margin-top:14px } .filmstrip{ display:flex; gap:8px; overflow-x:auto; padding:10px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px } .fs-scene{ position:relative; flex:0 0 auto; width:118px; cursor:pointer; border:3px solid transparent; border-radius:9px; overflow:hidden; background:var(--panel) } .fs-scene img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block } .fs-empty{ width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--text-2) } .fs-scene.sel{ border-color:var(--primary) } .fs-num{ position:absolute; top:3px; left:5px; background:rgba(0,0,0,.6); color:#fff; font-size:.72rem; border-radius:6px; padding:1px 6px } .fs-vid{ position:absolute; bottom:3px; right:5px; background:rgba(0,0,0,.6); color:#fff; font-size:.72rem; border-radius:6px; padding:1px 5px } .ed-panel{ border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--panel) } .ed-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px } .ed-tabs{ display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:10px } .ed-tab{ border:1px solid var(--border); background:var(--panel-2); color:var(--text-2); padding:7px 14px; border-radius:9px; cursor:pointer; font-size:.9rem } .ed-tab.sel{ background:var(--primary); border-color:var(--primary); color:#fff } .ed-tabbody{ padding-top:6px } .motion-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin:10px 0 4px } .motion-card{ border:1px solid var(--border); background:var(--panel-2); color:var(--text-1); border-radius:9px; padding:11px 8px; cursor:pointer; font-size:.86rem } .motion-card.sel{ background:var(--primary); border-color:var(--primary); color:#fff } .ed-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:0 16px } .ed-applyrow{ border-top:1px solid var(--border); margin-top:18px; padding-top:14px } input[type=color]{ width:56px; height:34px; padding:2px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2) } /* ===== v48: Projektkarten-Thumbnail (Dashboard) ===== */ .card-thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:9px; display:block; margin-bottom:9px } /* ===== v49: Original ↔ Klon-Vergleich + Karten-Badges ===== */ .card-thumb-wrap{ position:relative; display:block } .thumb-badge{ position:absolute; top:7px; left:7px; background:rgba(0,0,0,.62); color:#fff; font-size:.7rem; padding:2px 8px; border-radius:7px } .thumb-badge.ours{ background:var(--primary) } .pc-src{ margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .clone-compare{ display:flex; align-items:stretch; gap:12px; margin:16px 0; flex-wrap:wrap } .clone-compare .cc-card{ flex:1 1 240px; max-width:340px; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:10px } .clone-compare .cc-card.ours{ border-color:color-mix(in srgb,var(--primary) 55%, transparent) } .clone-compare .cc-label{ font-size:.8rem; color:var(--muted); margin-bottom:7px } .clone-compare img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; display:block } .clone-compare .cc-nothumb{ width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border); border-radius:8px; color:var(--muted); font-size:.85rem; text-align:center; padding:8px } .clone-compare .cc-title{ margin-top:8px; font-size:.88rem; font-weight:600; line-height:1.35 } .clone-compare .cc-arrow{ align-self:center; font-size:1.4rem; color:var(--muted) } .thumb-src-row{ display:flex; gap:14px; align-items:flex-start; margin-top:8px } .thumb-src{ width:180px; aspect-ratio:16/9; object-fit:cover; border-radius:9px; border:1px solid var(--border); flex:0 0 auto } /* Untertitel-Live-Vorschau (Schritt 12) – Maßstab wie im fertigen Video */ .sub-preview-wrap{ margin-top:12px; display:flex; flex-direction:column; gap:6px } .sub-preview{ position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; background:#1a1d24 center/cover no-repeat; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; border:1px solid var(--line, #333) } .sub-preview-line{ display:flex; justify-content:center; text-align:center; margin:4% 0; max-width:100%; } .sub-preview-line span{ display:inline; line-height:1.35; font-weight:600; box-decoration-break:clone; -webkit-box-decoration-break:clone } /* Fortschrittsbalken (Render, Schritt 13) */ .prog-bar{ margin-top:6px; height:8px; border-radius:99px; background:var(--panel-2,#222); overflow:hidden } .prog-bar > i{ display:block; height:100%; background:var(--accent,#4c8dff); border-radius:99px; transition:width .6s ease } /* Fehlerliste nach Sammel-Läufen (Schritt 7/8) */ .err-list{ margin:6px 0 0; padding-left:18px; font-size:13px; line-height:1.5 } .err-list li{ margin:2px 0 } /* App-Version (v73): dezente Anzeige neben dem Produktnamen + auf der Login-Seite */ .brand .app-version { font-size: .62em; font-weight: 600; opacity: .55; margin-left: .45em; letter-spacing: .02em; align-self: flex-end; padding-bottom: .15em; } .bare-version { position: fixed; bottom: .6rem; right: .9rem; font-size: .75rem; opacity: .45; } /* ---- v74: Abschnitte im Assistenten (aufgeräumtes Schritt-1-Layout) ---- */ details.sect { border: 1px solid var(--border, #333a45); border-radius: 10px; margin: .8rem 0; background: var(--panel2, rgba(255,255,255,.02)); } details.sect > summary { cursor: pointer; padding: .65rem .9rem; font-weight: 600; list-style: none; display: flex; align-items: baseline; gap: .6rem; user-select: none; } details.sect > summary::-webkit-details-marker { display: none; } details.sect > summary::before { content: '▸'; opacity: .6; transition: transform .15s; } details.sect[open] > summary::before { transform: rotate(90deg); } details.sect > summary .muted.small { font-weight: 400; } details.sect > label, details.sect > .action-row, details.sect > .callout, details.sect > p { margin-left: .9rem; margin-right: .9rem; } details.sect > *:last-child { margin-bottom: .9rem; } /* Anweisungs-Vorlagen (Schritt 1) */ .ins-templates { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .25rem 0; font-size: .85em; opacity: .95; } /* Recherche-Module (Schritt 1) */ .module-list { margin: .4rem 0 .8rem; padding-left: 1.4rem; display: grid; gap: .35rem; } .module-list li { padding: .35rem .5rem; border-radius: 8px; border: 1px solid transparent; } .module-list li.mod-ok { background: rgba(46,160,67,.08); border-color: rgba(46,160,67,.25); } .module-list li.mod-miss { background: rgba(248,81,73,.08); border-color: rgba(248,81,73,.3); } .module-list .mod-flag { display: inline-block; width: 1.2em; font-weight: 700; } .module-list li.mod-ok .mod-flag { color: #2ea043; } .module-list li.mod-miss .mod-flag { color: #f85149; } /* Fakten-Web-Check (Schritt 1) */ .fact-list { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .4rem; } .fact-list li { padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--border, #333a45); } .fact-list li.fact-bestaetigt { border-color: rgba(46,160,67,.35); } .fact-list li.fact-widerspruch { border-color: rgba(248,81,73,.45); background: rgba(248,81,73,.06); } .fact-list li.fact-unbelegt { border-color: rgba(210,153,34,.4); } .fact-badge { font-size: .78em; font-weight: 700; margin-right: .5em; white-space: nowrap; } .fact-bestaetigt .fact-badge { color: #2ea043; } .fact-widerspruch .fact-badge { color: #f85149; } .fact-unbelegt .fact-badge { color: #d29922; } .fact-src { display: inline-block; margin: .2rem .6rem 0 0; font-size: .82em; opacity: .9; } /* Cast-Bibliothek (Schritt 5/7) */ .cast-offer .cast-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--border, #333a45); border-radius: 999px; padding: .15rem .6rem .15rem .2rem; margin: .15rem .3rem .15rem 0; } .cast-offer .cast-chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; } .castlib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; margin: .5rem 0; } .castlib-card { display: flex; gap: .6rem; border: 1px solid var(--border, #333a45); border-radius: 10px; padding: .55rem; background: var(--panel2, rgba(255,255,255,.02)); } .castlib-thumb { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; } .castlib-thumb img { width: 100%; height: 100%; object-fit: cover; } .castlib-thumb .char-noref { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: .72em; opacity: .55; } .castlib-body { min-width: 0; } .castlib-desc { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .castlib-body .char-actions { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .3rem; } /* ---- v75: Szenentempo-Regler (Schritt 6) ---- */ #tempoSlider { width: 100%; max-width: 420px; accent-color: var(--accent, #2f81f7); } .tempo-labels { display: flex; justify-content: space-between; max-width: 420px; font-size: .78em; opacity: .7; margin-top: .1rem; } .tempo-info { margin-top: .4rem; padding: .5rem .7rem; border-left: 3px solid var(--accent, #2f81f7); background: var(--panel2, rgba(255,255,255,.03)); border-radius: 0 8px 8px 0; } .tempo-info strong { color: var(--accent, #2f81f7); } /* ---- v76: Bild-Modell je Szene (Schritt 8) ---- */ .scene-card .scene-prov { font-size: .78em; max-width: 150px; padding: .2rem .3rem; border-radius: 6px; } /* ==================== v80: Swipeless-Look, Stufe 1 ==================== */ /* Gruppen-Überschriften in den Schritten (wie „Generierungsmodus", „Szenentempo") */ .group-head{ margin:30px 0 8px; font-size:.86rem; font-weight:700; letter-spacing:.02em; color:var(--text) } .group-head:first-of-type{ margin-top:18px } .step-panel label.no-head{ margin-top:6px } /* Modus-Kacheln: Icon mittig, Häkchen oben rechts bei Auswahl */ .mode-grid .style-card{ align-items:center; text-align:center; padding:18px 14px } .mode-grid .sc-ico{ font-size:1.9rem; line-height:1 } .style-card{ transition:border-color .12s, background .12s, transform .08s } .style-card:hover{ transform:translateY(-1px) } .style-card:has(input:checked)::after{ content:"✓"; position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%; background:var(--primary); color:var(--primary-ink); font-size:.72rem; font-weight:700; display:grid; place-items:center; } /* Preis-Hinweisbox (wie Swipeless „Modellpreise") */ .price-box{ display:block; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:10px 13px; margin-top:16px; line-height:1.5 } .price-box em{ display:block; opacity:.8; font-size:.92em; margin-top:3px } /* Luftigeres Gesamtbild */ .step-panel{ padding:30px 32px; max-width:900px } .step-panel > h2{ margin-bottom:4px } .step-panel > .muted:first-of-type{ margin-top:0 } textarea, input[type="text"], input[type="number"], select{ border-radius:9px } .result-block{ margin-top:26px } /* ---- v81: Referenz-Status je Szene (Schritt 8) ---- */ .badge.ref-ok{ background:color-mix(in srgb,var(--ok) 18%, transparent); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 40%, transparent) } .badge.ref-warn{ background:color-mix(in srgb,var(--warn) 16%, transparent); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 40%, transparent); cursor:help } /* v81-Review-Fix: Klick auf das Icon IM Button muss den Button treffen – sonst greift disabled nicht und teure Jobs starten doppelt. */ .btn svg, .btn img, .btn .spin { pointer-events: none; } /* v104: Fehlermeldung je Szene – bleibt stehen, statt als Toast zu verschwinden */ .scene-err { margin-top: 4px; } .scene-err > summary { cursor: pointer; font-size: .74rem; color: var(--err); list-style: none; } .scene-err > summary::-webkit-details-marker { display: none; } .scene-err-text { font-size: .72rem; line-height: 1.4; color: var(--text-2); background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); border-radius: 7px; padding: 6px 8px; margin-top: 4px; word-break: break-word; max-height: 160px; overflow: auto; } /* ===== Kurzfilm-Modul (Phase 20/21) ===== */ .step-nav{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:10px 14px; background:var(--panel); border:1px solid var(--border); border-radius:14px } .step-item{ display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border-radius:999px; color:var(--text-2); text-decoration:none; font-size:.86rem } .step-item:hover{ background:var(--panel-2) } .step-item .step-num{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--panel-2); border:1px solid var(--border-2); font-size:.78rem; font-weight:600 } .step-item.done .step-num{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink) } .step-item.active{ background:var(--primary); color:var(--primary-ink) } .step-item.active .step-num{ background:rgba(255,255,255,.22); border-color:transparent; color:#fff } .step-sep{ color:var(--muted) } .wizard-form{ max-width:1100px } .wizard-card h3{ margin-top:0 } .wizard-foot{ display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap } .field-group{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center } .field-group legend{ padding:0 6px; font-size:.82rem; color:var(--muted) } .radio-pill,.checkbox-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--border-2); border-radius:999px; cursor:pointer; font-size:.88rem; background:var(--panel-2) } .radio-pill:has(input:checked),.checkbox-pill:has(input:checked){ background:var(--primary); border-color:var(--primary); color:var(--primary-ink) } .radio-pill input,.checkbox-pill input{ margin:0; accent-color:var(--primary) } .field{ display:flex; flex-direction:column; gap:6px } .field > span{ font-size:.85rem; color:var(--text-2) } .field textarea,.field input{ width:100% } .kf-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between } .kf-cost{ font-size:.86rem; color:var(--text-2); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center } .kf-cost strong{ color:var(--text) } .kf-cost-item{ color:var(--muted) } .kf-warn{ background:color-mix(in srgb, var(--warn) 14%, transparent); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius:10px; padding:10px 12px; font-size:.88rem; margin-bottom:12px } .kf-refs{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; font-size:.86rem } .kf-ref{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border:1px solid var(--border); border-radius:999px; background:var(--panel-2) } .kf-ref img{ width:30px; height:30px; border-radius:50%; object-fit:cover } /* Figuren-Editor */ .char-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:14px } .char-card{ display:grid; grid-template-columns:150px 1fr; gap:12px; border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--panel-2) } .char-thumb-wrap{ width:150px } .char-thumb{ width:150px; aspect-ratio:3/4; border-radius:10px; object-fit:cover; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--panel); border:1px dashed var(--border-2); color:var(--muted); font-size:.8rem; text-align:center; padding:6px } img.char-thumb{ border-style:solid; padding:0 } .char-fields{ display:flex; flex-direction:column; gap:8px; min-width:0 } .char-fields input,.char-fields textarea{ width:100% } .char-actions{ display:flex; gap:8px; flex-wrap:wrap } .char-error{ color:var(--err); font-size:.82rem } .char-empty{ grid-column:1/-1; margin:0 } .cast-picker{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px } .cast-card{ width:110px; cursor:pointer; text-align:center; border:1px solid var(--border); border-radius:10px; padding:6px; background:var(--panel-2) } .cast-card:hover{ border-color:var(--primary) } .cast-thumb{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--panel); color:var(--muted) } .cast-name{ display:block; font-size:.8rem; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } /* Beats */ .beats-table{ display:flex; flex-direction:column; gap:10px } .beat-row{ display:grid; grid-template-columns:170px 1fr; gap:12px; border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--panel-2) } .beat-meta{ display:flex; flex-direction:column; gap:6px } .beat-num{ font-weight:700; font-size:1.05rem } .beat-fields{ display:flex; flex-direction:column; gap:6px; min-width:0 } .beat-fields textarea,.beat-fields input{ width:100% } /* Panel-Raster (Bilder + Clips) */ .panel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px } .panel-item{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel-2) } .panel-thumb-wrap{ position:relative; aspect-ratio:16/9; background:var(--panel) } .panel-thumb{ width:100%; height:100%; object-fit:cover; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:1.4rem; gap:8px } .panel-thumb.panel-error{ color:var(--err); font-size:.9rem } .panel-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35) } .panel-info{ padding:8px 10px; font-size:.84rem; display:flex; flex-direction:column; gap:2px } .panel-desc{ margin:0; font-size:.78rem; line-height:1.3 } .spinner{ width:18px; height:18px; border:2px solid var(--border-2); border-top-color:var(--primary); border-radius:50%; animation:kf-spin .8s linear infinite; display:inline-block } .spinner-large{ width:36px; height:36px; border:3px solid var(--border-2); border-top-color:var(--primary); border-radius:50%; animation:kf-spin .8s linear infinite; margin:14px 0 } @keyframes kf-spin{ to{ transform:rotate(360deg) } } .success-box{ display:flex; flex-direction:column; gap:10px; align-items:flex-start } .modal-dialog{ border:1px solid var(--border); border-radius:14px; background:var(--panel); color:var(--text); padding:0; max-width:420px; width:92vw } .modal-dialog::backdrop{ background:rgba(0,0,0,.5) } .modal-form{ padding:22px; display:flex; flex-direction:column; gap:12px } .modal-form h2{ margin:0 } .modal-foot{ display:flex; justify-content:flex-end; gap:8px } @media (max-width:640px){ .char-list{ grid-template-columns:1fr } .char-card,.beat-row{ grid-template-columns:1fr } .char-thumb-wrap,.char-thumb{ width:120px } } .panel-btns{ display:inline-flex; gap:4px } .panel-btns .btn-sm{ padding:3px 8px; font-size:.76rem } .panel-prompt{ width:100%; font-size:.78rem; margin-top:6px } .small{ font-size:.82rem } .panel-src{ position:absolute; right:6px; bottom:6px; width:34%; aspect-ratio:16/9; object-fit:cover; border:2px solid var(--panel); border-radius:6px; box-shadow:var(--shadow-sm); background:var(--panel) } .badge-error{ background:color-mix(in srgb, var(--err) 18%, transparent); color:var(--err) } /* ===== Phase 27: Kurzfilm-Thumbnail (Schritt 7) ===== */ .kf-thumb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-top:14px } .kf-thumb-card{ position:relative; border:2px solid var(--border); border-radius:10px; overflow:hidden; background:var(--panel-2) } .kf-thumb-card img{ width:100%; aspect-ratio:var(--kf-thumb-ratio,9/16); object-fit:cover; display:block } .kf-thumb-card.sel{ border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%, transparent) } .kf-thumb-card.sel::after{ content:'✔ Thumbnail'; position:absolute; top:7px; left:7px; background:var(--primary); color:#fff; font-size:.7rem; padding:2px 8px; border-radius:7px } .kf-thumb-actions{ display:flex; gap:6px; justify-content:center; padding:7px } /* ---- Phase 28: Kurzfilm – ComfyUI-Workflows testen (Schritt 4) ---- */ .kf-testbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:color-mix(in srgb, var(--accent, #6366f1) 8%, transparent); border:1px solid color-mix(in srgb, var(--accent, #6366f1) 30%, transparent); border-radius:10px; padding:8px 12px; margin-bottom:12px } .kf-testbar select{ margin-left:4px; max-width:340px } .kf-testbar label{ display:inline-flex; align-items:center; gap:4px } .badge.model-badge{ background:color-mix(in srgb, var(--accent, #6366f1) 16%, transparent); color:var(--accent, #6366f1); border:1px solid color-mix(in srgb, var(--accent, #6366f1) 40%, transparent); cursor:help } .badge.ref-change-badge{ cursor:pointer } .badge.ref-change-badge:hover{ filter:brightness(1.15) } .beat-refchange-wrap{ display:flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--ok) 8%, transparent); border:1px dashed color-mix(in srgb, var(--ok) 40%, transparent); border-radius:8px; padding:4px 8px } .beat-refchange-wrap span{ white-space:nowrap } .beat-refchange-wrap input{ flex:1; min-width:0 } /* 04.09.: Regeln für Verwandlungen (Schritt 3 + 4) */ .kf-rules{ background:color-mix(in srgb, var(--ok) 9%, transparent); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-radius:10px; padding:10px 14px; font-size:.86rem; margin-bottom:12px } .kf-rules ol{ margin:.4rem 0 0; padding-left:1.2rem } .kf-rules li{ margin:.2rem 0 } .kf-rules code{ background:color-mix(in srgb, var(--fg, #000) 8%, transparent); padding:1px 5px; border-radius:4px } /* v130: Bildprüfung nach der Generierung (Kurzfilm Schritt 4 + Hauptprojekt Schritt 8) */ .badge.qa-badge{ cursor:help; border:1px solid transparent } .badge.qa-badge[data-state="fail"]{ background:color-mix(in srgb,var(--err) 16%, transparent); color:var(--err); border-color:color-mix(in srgb,var(--err) 40%, transparent) } .badge.qa-badge[data-state="retry"]{ background:color-mix(in srgb,var(--warn) 16%, transparent); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%, transparent) } .badge.qa-badge[data-state="fixed"]{ background:color-mix(in srgb,var(--ok) 16%, transparent); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%, transparent) }