@rslsp1/fa-app-tools 6.1.0 → 7.2.0

package/dist/index.mjs

@@ -2,37 +2,26 @@ import {
   SzenenView,
   alsFlowTextZugang,
   applyEvents,
-  createFlowSzenenViewPort
-} from "./chunk-GHKN2VX3.mjs";
-import "./chunk-FUY2OCVC.mjs";
-import {
-  exportProjectToZip,
-  importProjectFromZip,
-  injectXMPMetadata
-} from "./chunk-UFXDXENC.mjs";
-import {
+  createFlowSzenenViewPort,
   getHFToken,
   getSessionClientId,
   hfBatchArchive,
   hfBootstrapFromLegacy,
-  hfDeleteProject,
   hfDownloadBinaryByPath,
-  hfDownloadProject,
   hfListDir,
-  hfListProjects,
   hfLoadImageAsBase64,
   hfUploadImage,
-  hfUploadProjectForm,
   hfUploadSmallFile,
   loadHFState,
   loadPendingEvents,
   setHFToken,
   tsFromEventPath,
   writeHFEvent
-} from "./chunk-NBUS7AWR.mjs";
+} from "./chunk-5QA6DTJ6.mjs";
+import "./chunk-FUY2OCVC.mjs";
 
 // package.json
-var version = "6.1.0";
+var version = "7.2.0";
 
 // src/hooks/useOnClickOutside.ts
 import { useEffect } from "react";
@@ -71,7 +60,7 @@ function useKeyboardNavigation(history, currentResult, setCurrentResult) {
 }
 
 // src/features/szenen/szenenViewStyles.generated.ts
-var SZENEN_VIEW_STYLES = '/* ==========================================================================\n   SZENEN VIEW\n   ========================================================================== */\n\n.szenen-view {\n    display: grid;\n    gap: var(--space-md);\n    width: 100%;\n    min-width: 0;\n    font-family: var(--font-sans);\n    padding: var(--space-md);\n}\n\n@media (max-width: 760px) {\n    .szenen-view {\n        padding: var(--space-sm);\n        gap: var(--space-sm);\n    }\n}\n\n.szenen-view__intro {\n    display: flex;\n    align-items: end;\n    justify-content: space-between;\n    gap: var(--space-md);\n    padding: clamp(1rem, 3vw, 1.75rem);\n    color: var(--color-text-primary);\n    background:\n        radial-gradient(circle at 85% 15%, rgba(45, 212, 191, 0.16), transparent 34%),\n        linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n}\n\n.szenen-view__intro h2,\n.szenen-view__intro p {\n    margin: 0;\n}\n\n.szenen-view__intro h2 {\n    margin-bottom: var(--space-xs);\n    font-size: clamp(1.25rem, 4vw, 2rem);\n}\n\n.szenen-view__intro > div > p:last-child {\n    max-width: 44rem;\n    color: var(--color-text-secondary);\n}\n\n.szenen-view__eyebrow {\n    margin-bottom: var(--space-xs) !important;\n    color: var(--color-accent-teal, #2dd4bf);\n    font-size: 0.72rem;\n    font-weight: 800;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n}\n\n.szenen-view__step {\n    flex: none;\n    padding: 0.35rem 0.65rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.78rem;\n    font-weight: 700;\n}\n\n.szenen-view__nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-view__nav button,\n.szenen-view button {\n    min-height: 2.25rem;\n    padding: 0.45rem 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-view button:hover:not(:disabled) {\n    color: var(--color-text-primary);\n    background: var(--color-bg-surface-hover);\n    border-color: var(--color-border-hover);\n}\n\n.szenen-view button:focus-visible,\n.szenen-view input:focus-visible,\n.szenen-view select:focus-visible,\n.szenen-view textarea:focus-visible {\n    outline: 2px solid var(--color-accent-blue);\n    outline-offset: 2px;\n}\n\n.szenen-view button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.szenen-view__nav button.is-active,\n.szenen-view__nav button[aria-selected="true"] {\n    color: var(--color-text-primary);\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-view__area {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-view__capability-note,\n.szenen-area__lead {\n    margin: 0;\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-accent-purple);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-view__host-notes {\n    color: var(--color-text-secondary);\n}\n\n.szenen-view__host-notes > summary {\n    cursor: pointer;\n    font-size: 0.8rem;\n}\n\n/* `box-sizing` steht hier und nicht beim Host: Die React-App bringt in\n * `master.css` einen globalen `* { box-sizing: border-box }` mit, Flow **nicht**\n * \u2014 dort ragte `width: 100%` plus Innenabstand um die Randbreite aus dem\n * Elternelement heraus und erzeugte auf ~390 px einen horizontalen Scroll. Die\n * gemeinsame Ansicht darf sich auf keinen Host-Reset verlassen. */\n.szenen-view input:not([type="checkbox"]),\n.szenen-view select,\n.szenen-view textarea {\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 2.25rem;\n    padding: 0.5rem 0.65rem;\n    color: var(--color-text-primary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font: inherit;\n}\n\n.szenen-view textarea {\n    min-height: 7rem;\n    resize: vertical;\n    font-family: var(--font-mono);\n    font-size: 0.8rem;\n}\n\n.szenen-view label {\n    display: grid;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-view code,\n.szenen-view pre {\n    font-family: var(--font-mono);\n    overflow-wrap: anywhere;\n}\n\n.szenen-view h3,\n.szenen-view h4,\n.szenen-view h5 {\n    margin-top: 0;\n}\n\n.szenen-view ul,\n.szenen-view ol {\n    padding-left: 1.25rem;\n}\n\n.szenen-elements,\n.szenen-detail,\n.szenen-scene,\n.szenen-setup,\n.szenen-shot,\n.szenen-media,\n.szenen-runs {\n    display: grid;\n    gap: var(--space-md);\n    min-width: 0;\n}\n\n/* Arbeitsoberflaeche: Liste links, Bearbeitung rechts.\n *\n * Breit stehen beide Spalten nebeneinander \u2014 die Auswahl bleibt sichtbar,\n * waehrend bearbeitet wird. Schmal rendert die Komponente nur eine der beiden;\n * hier steht deshalb keine Regel, die die andere versteckt. */\n@media (min-width: 761px) {\n    .szenen-elements {\n        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);\n        align-items: start;\n    }\n\n    .szenen-elements__master,\n    .szenen-elements__detail {\n        min-width: 0;\n    }\n}\n\n.szenen-elements__master,\n.szenen-elements__detail {\n    display: grid;\n    gap: var(--space-sm);\n    align-content: start;\n    min-width: 0;\n}\n\n.szenen-elements__toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__heading {\n    margin: 0;\n    font-size: 1.05rem;\n}\n\n.szenen-elements__scope {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    min-width: 0;\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-elements__scope > select {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.szenen-elements__new {\n    flex: none;\n    font-weight: 700;\n}\n\n.szenen-elements__create {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-accent-blue);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-elements__create label {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-elements__create-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__options > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    cursor: pointer;\n}\n\n.szenen-elements__back {\n    justify-self: start;\n    font-weight: 700;\n}\n\n.szenen-elements__empty-detail {\n    margin: 0;\n    color: var(--color-text-tertiary);\n}\n\n.szenen-elements__filter,\n.szenen-detail__actions,\n.szenen-runs__start,\n.szenen-scene-editor__add,\n.szenen-scene-editor__add-relation {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__filter > label,\n.szenen-runs__start > label,\n.szenen-scene-editor__add > input {\n    flex: 1 1 16rem;\n}\n\n.szenen-elements__filter > label:has(input[type="checkbox"]) {\n    display: flex;\n    flex: 1 1 16rem;\n    flex-direction: row;\n    align-items: center;\n}\n\n.szenen-elements__filter input[type="checkbox"] {\n    width: 1rem;\n    height: 1rem;\n    accent-color: var(--color-accent-blue);\n}\n\n.szenen-elements__list {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-elements__list > li > button {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs) var(--space-sm);\n    width: 100%;\n    height: 100%;\n    text-align: left;\n}\n\n.szenen-elements__list > li > button > .szenen-elements__title {\n    flex: 1 1 100%;\n}\n\n.szenen-elements__list > li > button.is-selected,\n.szenen-elements__list > li > button[aria-current="true"] {\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-elements__type {\n    color: var(--color-accent-blue);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-elements__title {\n    color: var(--color-text-primary);\n    font-size: 0.95rem;\n}\n\n.szenen-elements__subtype,\n.szenen-elements__retired {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n}\n\n.szenen-elements__retired {\n    color: var(--color-warning);\n}\n\n.szenen-detail {\n    margin-top: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n@media (min-width: 761px) {\n    .szenen-detail {\n        padding: var(--space-md);\n        background: var(--color-bg-surface);\n        border: 1px solid var(--color-border);\n        border-radius: var(--radius-sm);\n    }\n}\n\n.szenen-detail > header,\n.szenen-detail__heads,\n.szenen-detail__draft,\n.szenen-capability {\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* .szenen-runs ist ein eigenst\xE4ndiger sichtbarer Bereich, beh\xE4lt Styling auf Desktop */\n@media (min-width: 761px) {\n    .szenen-runs {\n        padding: var(--space-md);\n        background: var(--color-bg-surface);\n        border: 1px solid var(--color-border);\n        border-radius: var(--radius-md);\n    }\n}\n\n@media (max-width: 760px) {\n    .szenen-runs {\n        padding: 0;\n        background: transparent;\n        border: none;\n        border-radius: 0;\n    }\n}\n\n.szenen-detail__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin-bottom: 0;\n    color: var(--color-text-secondary);\n}\n\n.szenen-detail__heads ul,\n.szenen-scene-editor ul,\n.szenen-runs > ol,\n.szenen-capability > ul {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-detail__heads li,\n.szenen-scene-editor li,\n.szenen-runs > ol > li,\n.szenen-capability > ul > li {\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n\n/* Stufe 6.7.2 (D-126) \u2014 Advanced-/Debug-Fl\xE4che f\xFCr die rohe, schema-getriebene\n * Feldliste einer Szene. Gestrichelt wie die anderen \u201EAngebot statt\n * Auskunft"-Bereiche, aber ohne Akzentfarbe: sie ist kein Vorschlag, sondern\n * ein Eskalationsweg. */\n.szenen-detail__technical {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__technical > summary {\n    margin-bottom: var(--space-sm);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__technical[open] > summary {\n    margin-bottom: var(--space-md);\n}\n\n.szenen-detail__field small,\n.szenen-capability small {\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__preview-errors,\n.szenen-detail__notice--error,\n.szenen-view [role="alert"] {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-detail__notice {\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__notice--success,\n.szenen-view [data-tone="success"] {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n    border-color: var(--color-accent-green);\n}\n\n.szenen-scene-editor {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-md);\n    margin-bottom: 0;\n}\n\n.szenen-scene-editor > section {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* \u2500\u2500 Stufe 6.7.2 (D-126): Node-/Relationskarten \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Nodes und Beziehungen sind `<details>` \u2014 dieselbe Interaktionssprache wie\n * \u201ERohantwort (Diagnose)" und \u201EBilder zu diesem Lauf" in RunsPanel.tsx. Kopf\n * (immer sichtbar) tr\xE4gt Inhalt zuerst, Technik zuletzt; Body (nur bei\n * ge\xF6ffneter Karte) tr\xE4gt die Bearbeitungscontrols. Padding wandert von der\n * `<li>` in Kopf/Body, damit die Karte keinen doppelten Rand bekommt. */\n.szenen-scene-editor li {\n    padding: 0;\n    overflow: hidden;\n}\n\n.szenen-node-karte__kopf,\n.szenen-relation-karte__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs) var(--space-sm);\n    padding: var(--space-sm);\n    cursor: pointer;\n    list-style: none;\n}\n\n.szenen-node-karte__kopf::-webkit-details-marker,\n.szenen-relation-karte__kopf::-webkit-details-marker {\n    display: none;\n}\n\n.szenen-node-karte__titel {\n    flex: 1 1 12rem;\n    min-width: 0;\n    color: var(--color-text-primary);\n    font-weight: 600;\n    overflow-wrap: anywhere;\n}\n\n.szenen-node-karte__typ {\n    flex: none;\n    padding: 0.15rem 0.55rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    white-space: nowrap;\n}\n\n/* node_id klein, monospace, sekund\xE4r \u2014 sichtbar auch bei zugeklappter Karte,\n * aber optisch klar hinter Beschreibung und Typ. */\n.szenen-node-karte__meta {\n    flex: 1 1 100%;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n.szenen-node-karte__meta code {\n    font-size: inherit;\n}\n\n.szenen-node-karte__body,\n.szenen-relation-karte__body {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-sm) var(--space-sm);\n    border-top: 1px solid var(--color-border);\n}\n\n/* \xA74 \u2014 Prim\xE4raktion und destruktive Aktion optisch getrennt: \u201ENode/Beziehung\n * entfernen" bekommt einen eigenen, warnenden Ton statt gleichgewichtig neben\n * der normalen Bearbeitung zu stehen. */\n.szenen-node-karte__entfernen,\n.szenen-relation-karte__entfernen {\n    justify-self: start;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-relation-karte__kopf {\n    font-size: 0.9rem;\n}\n\n.szenen-relation-karte__kopf code {\n    overflow-wrap: anywhere;\n}\n\n.szenen-relation-karte__pfeil {\n    flex: none;\n    color: var(--color-text-secondary);\n}\n\n/* Die Composer-\xD6ffner (\u201E+ Node hinzuf\xFCgen", \u201E+ Beziehung hinzuf\xFCgen") sind\n * Angebote, keine Ausk\xFCnfte \u2014 dasselbe gestrichelte Muster wie beim Folgelauf\n * und der Fehlerrettung (\xA73.3/\xA73.5). */\n.szenen-scene-editor__oeffnen {\n    width: 100%;\n    border-style: dashed;\n}\n\n.szenen-refpicker {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: var(--space-sm) 0;\n    padding: var(--space-sm) 0;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-refpicker legend {\n    padding: 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n}\n\n.szenen-capability > ul > li {\n    display: grid;\n    grid-template-columns: minmax(10rem, 1fr) auto minmax(14rem, 2fr);\n    align-items: start;\n    gap: var(--space-sm);\n}\n\n.szenen-capability__state {\n    padding: 0.1rem 0.5rem;\n    border-radius: var(--radius-full);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-capability__state--yes {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n}\n\n.szenen-capability__state--no {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n}\n\n.szenen-capability__state--unknown {\n    color: #fef08a;\n    background: rgba(234, 179, 8, 0.2);\n}\n\n.szenen-runs > ol > li {\n    display: grid;\n    gap: var(--space-sm);\n}\n\n/* B1 \u2014 die geschlossene Runde. Vorher stand die `run_id` als erstes und war\n   die einzige Information, die niemand liest; jetzt beantwortet die Kopfzeile\n   welche Runde, ob sie durchging, mit welchem Modell und was ungef\xE4hr\n   herauskam. */\n.szenen-runs__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-sm);\n    width: 100%;\n    padding: var(--space-xs) 0;\n    text-align: left;\n    color: var(--color-text-secondary);\n    background: transparent;\n    border: none;\n    cursor: pointer;\n}\n\n.szenen-runs__marke {\n    font-weight: 700;\n    color: var(--color-text-primary);\n}\n\n.szenen-runs__status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    border-radius: var(--radius-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n}\n\n.szenen-runs__status[data-status="succeeded"] {\n    border-color: var(--color-success);\n}\n\n.szenen-runs__status[data-status="failed"] {\n    border-color: var(--color-danger);\n}\n\n.szenen-runs__modell {\n    font-size: 0.75rem;\n}\n\n/* Der Auszug ist die Inhaltsvorschau der Runde. Er bekommt eine eigene Zeile,\n   damit er nicht mit Marke und Modell um dieselbe Zeile ringt. */\n.szenen-runs__auszug {\n    flex: 1 1 100%;\n    min-width: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.8125rem;\n}\n\n/* B2 \u2014 ein Fehler steht ausserhalb der aufklappbaren Fl\xE4che: Wer eine rote\n   Runde sieht, soll nicht erst klicken m\xFCssen, um zu erfahren, woran sie\n   gescheitert ist. */\n.szenen-runs__fehler {\n    display: grid;\n    gap: var(--space-xs);\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-runs__fehler p {\n    margin: 0;\n}\n\n.szenen-runs__inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-runs__prompt > h5,\n.szenen-runs__sekundaer > h5 {\n    margin: 0 0 var(--space-xs);\n}\n\n.szenen-runs__prompt > p {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n.szenen-runs__prompt--negativ > p,\n.szenen-runs__sekundaer > p {\n    margin: 0;\n    color: var(--color-text-secondary);\n    white-space: pre-wrap;\n}\n\n.szenen-runs__mehr {\n    justify-self: start;\n    margin-top: var(--space-xs);\n    padding: 0;\n    color: var(--color-accent-teal, var(--color-text-secondary));\n    background: transparent;\n    border: none;\n    font-size: 0.75rem;\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.szenen-runs > ol > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-runs > ol > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n.szenen-runs details pre {\n    max-height: 20rem;\n    overflow: auto;\n    padding: var(--space-sm);\n    white-space: pre-wrap;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-media > section {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-media__lookup,\n.szenen-media__attach {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-media__lookup > label,\n.szenen-media__attach > label:first-child {\n    flex: 1 1 18rem;\n}\n\n.szenen-media__list {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-media__list > li {\n    display: grid;\n    grid-template-columns: minmax(12rem, 1fr) auto auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n@media (max-width: 760px) {\n    .szenen-view {\n        gap: var(--space-sm);\n    }\n\n    /* C1 \u2014 auf 390 px bleiben drei Kacheln je Reihe gross genug zum Erkennen\n       und klein genug, dass vier Bilder eine Reihe sind und keine Seite. */\n    .szenen-bildgalerie {\n        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    }\n\n    /* Der Viewer bekommt den ganzen Bildschirm; die Bl\xE4tterkn\xF6pfe bleiben am\n       Rand, wo der Daumen sie erreicht. */\n    .szenen-bildviewer {\n        padding: var(--space-xs);\n    }\n\n    .szenen-bildviewer__blaettern {\n        width: 2.25rem;\n        height: 4rem;\n    }\n\n    .szenen-view__intro {\n        align-items: start;\n        flex-direction: column;\n        gap: var(--space-sm);\n        padding: var(--space-md);\n    }\n\n    .szenen-view__intro h2 {\n        font-size: 1.25rem;\n    }\n\n    .szenen-view__intro > div > p:last-child {\n        font-size: 0.9rem;\n    }\n\n    .szenen-view__nav {\n        position: sticky;\n        top: 0;\n        z-index: 2;\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: var(--space-xs);\n        padding: var(--space-xs);\n    }\n\n    .szenen-view__nav button {\n        width: 100%;\n        min-width: 0;\n        min-height: 2.5rem;\n        padding: 0.35rem 0.5rem;\n    }\n\n\n    .szenen-scene-editor {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-capability > ul > li {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-derive,\n    .szenen-elements,\n    .szenen-scene,\n    .szenen-setup,\n    .szenen-shot,\n    .szenen-media,\n    .szenen-runs {\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto;\n        align-items: center;\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter > label {\n        width: 100%;\n        min-width: 0;\n        flex: none;\n    }\n\n    .szenen-elements__filter > label:has(input[type="checkbox"]) {\n        flex: none;\n        grid-column: 1 / -1;\n    }\n\n    /* Schmal ist die Liste eine Spalte, und die Auswahl fuehrt weiter \u2014 der\n     * Eintrag ist deshalb ein Ziel fuer den Finger, keine Kachel. */\n    .szenen-elements__list {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .szenen-elements__list > li > button {\n        min-height: 2.75rem;\n    }\n\n    .szenen-elements__back {\n        justify-self: stretch;\n        min-height: 2.5rem;\n    }\n\n    .szenen-detail__actions,\n    .szenen-runs__start,\n    .szenen-scene-editor__add,\n    .szenen-scene-editor__add-relation {\n        align-items: stretch;\n        flex-direction: column;\n    }\n\n    .szenen-runs__start > *,\n    .szenen-scene-editor__add > *,\n    .szenen-scene-editor__add-relation > * {\n        width: 100%;\n        flex: none;\n    }\n}\n\n/* \u2500\u2500 Stufe 6.5: Rekonstruktion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich zeigt drei Dinge nebeneinander: den Vorschlag, das nicht\n * Ableitbare und die Widerspr\xFCche. Die Diagnosen sind deshalb bewusst nicht\n * kleiner gesetzt als der Vorschlag \u2014 wer sie \xFCbersieht, \xFCbernimmt Geratenes.\n */\n\n.szenen-derive {\n    display: grid;\n    gap: var(--space-md);\n}\n\n.szenen-form {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-field {\n    display: grid;\n    gap: var(--space-xs);\n}\n\n.szenen-field > span {\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-error {\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-danger);\n    background: var(--color-accent-red-dim);\n    border: 1px solid var(--color-accent-red);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-empty {\n    padding: var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-diagnose {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-warning);\n    border-radius: var(--radius-sm);\n}\n\n/* Ein Widerspruch ist der schwerste der drei Befunde: dort steht eine\n * Entscheidung aus, die das System bewusst nicht getroffen hat (D-74). */\n.szenen-diagnose--konflikt {\n    border-left-color: var(--color-danger);\n}\n\n.szenen-diagnose > h4 {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.9375rem;\n}\n\n.szenen-diagnose ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-proposal {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-proposal > h4 {\n    margin: 0 0 var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.9375rem;\n}\n\n.szenen-proposal__payload {\n    max-height: 18rem;\n    margin: 0 0 var(--space-sm);\n    padding: var(--space-sm);\n    overflow: auto;\n    /* Ein erzeugter Prompt ist ein einziger langer Satz \u2014 ohne Umbruch\n       verschwindet er nach rechts aus dem Bild. JSON-Payloads bringen ihre\n       eigenen Zeilenumbrueche mit und leiden nicht darunter. */\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-proposal__done {\n    margin: var(--space-sm) 0 0;\n    color: var(--color-success);\n}\n\n/* Die Belege eines Laufs: Rohantwort und Systemprompt. Zum Lesen und Kopieren,\n   nicht zum Bedienen \u2014 deshalb voll markierbar und in Monospace. */\n.szenen-beleg__text {\n    width: 100%;\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    line-height: 1.5;\n    white-space: pre;\n    background: var(--color-bg-app);\n    color: var(--color-text);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    resize: vertical;\n}\n\n/* Der Folgelauf (D-87): abgesetzt, damit er nicht wie Teil des Ergebnisses\n   aussieht \u2014 er ist eine Frage, keine Auskunft. */\n.szenen-folgelauf {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-folgelauf > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-run__herkunft {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-muted, inherit);\n}\n\n/* Widerspricht das Modell, ist das das Wichtigste auf der Seite. */\n.szenen-diagnose--antwort {\n    border-left: 3px solid var(--color-accent, var(--color-border));\n}\n\n/* Der Bildw\xE4hler (D-92) \u2014 Browser und Inspector, dem Labs-Tab nachgebildet,\n   aber mit dem CSS dieser Ansicht: eine gemeinsame Komponente \xFCber zwei\n   Dom\xE4nengrenzen w\xE4re eine Kopplung, die keiner gewollt hat.\n\n   Der Review vom 2026-08-22 (R12.1/R12.2) hat den Ma\xDFstab gesetzt: Der Bestand\n   ist ein **Browser**, kein Seiteninhalt. Vierzig Werke d\xFCrfen die Szenenseite\n   nicht meterlang machen, und zw\xF6lf Varianten eines Werkes keine zw\xF6lf\n   Bildschirmseiten. Deshalb steht hier alles unter zwei Regeln \u2014 begrenzte\n   Fl\xE4che mit eigenem Scroll, und Kacheln statt Karten. */\n\n/* \u2500\u2500 Ebene 1: der Browser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl {\n    /* Dieselbe Begr\xFCndung wie beim Inspector: Als Grid-Element w\xFCrde der\n       W\xE4hler sonst so breit wie sein breitester Inhalt. */\n    min-width: 0;\n}\n\n.szenen-bildwahl__browser {\n    /* Die eigene Scrollfl\xE4che ist der ganze Punkt: Der Bestand w\xE4chst nach\n       innen, nicht nach unten. Dieselbe Gr\xF6\xDFenordnung wie `max-h-[300px]` im\n       Labs-Browser. */\n    max-height: 19rem;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__raster {\n    display: grid;\n    /* Vier Spalten auf schmalen Displays \u2014 der gemeldete Screenshot zeigte eine\n       einzige Spalte gro\xDFer Karten. Breiter wird automatisch dichter. */\n    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__karte {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    text-align: left;\n    cursor: pointer;\n}\n\n/* Das fokussierte Werk ist klar markiert \u2014 sonst wei\xDF niemand, wessen Galerie\n   der Inspector unten zeigt. */\n.szenen-bildwahl__karte.is-fokus {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n/* \u2500\u2500 Die Kachel selbst \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Der Platz steht, bevor das Bild da ist \u2014 sonst springt das Raster, sobald\n   die erste Vorschau eintrifft. */\n.szenen-bildkachel {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    overflow: hidden;\n    background: var(--color-bg-app);\n}\n\n.szenen-bildkachel img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.szenen-bildkachel__leer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(135deg, var(--color-bg-app), var(--color-bg-surface));\n}\n\n/* R12.3: Eine fehlende Vorschau bleibt kachelgro\xDF. Vorher fiel die Karte auf\n   ihren Prompttext zur\xFCck \u2014 und ein Prompt hat im echten Bestand mehrere\n   hundert Zeichen. */\n.szenen-bildkachel__zeichen {\n    font-size: 0.875rem;\n    font-weight: 700;\n    color: var(--color-text-secondary);\n    opacity: 0.6;\n}\n\n/* Wie viele Varianten das Werk hat \u2014 klein und \xFCberlagernd, nie als\n   dominanter Text. */\n.szenen-bildwahl__anzahl {\n    position: absolute;\n    top: 0.15rem;\n    right: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    font-weight: 700;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* Eine Zeile, dann Schluss. Der Prompt eines Werkes ist oft mehrere hundert\n   Zeichen lang und w\xE4re als Prim\xE4rdarstellung genau die Textw\xFCste, gegen die\n   der Review antritt. */\n.szenen-bildwahl__kacheltitel {\n    display: block;\n    padding: 0.15rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.3;\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Ebene 2: der Inspector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__inspector {\n    /* Ohne `min-width: 0` gewinnt der Inhalt: Der W\xE4hler ist Element eines\n       Grids (`.szenen-form`), und dort ist `min-width: auto` die Vorgabe. Der\n       Streifen unten ist rund 1000 px breit \u2014 gemessen am 2026-08-22 im echten\n       Browser zog er die Auswahl von 374 px auf 1088 px auf und schob die\n       ganze Seite waagerecht heraus, statt selbst zu scrollen. */\n    min-width: 0;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    /* Sichtbar abgesetzt vom Browser: zwei Ebenen, nicht eine lange Liste. */\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__inspektorkopf {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bildwahl__werktitel {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: var(--color-text-primary);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.szenen-bildwahl__zurueck {\n    flex: 0 0 auto;\n    font-size: 0.6875rem;\n    padding: 0.15rem 0.5rem;\n}\n\n/* Der Streifen: waagerecht scrollend, feste kleine Kacheln \u2014 zw\xF6lf Varianten\n   bleiben ein \xDCberblick statt zw\xF6lf Bildschirmseiten. */\n.szenen-bildwahl__streifen {\n    /* Die Breite kommt vom Elter, nie vom Inhalt \u2014 sonst scrollt hier nichts. */\n    max-width: 100%;\n    display: flex;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0 0 0.25rem;\n    list-style: none;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n}\n\n.szenen-bildwahl__streifen > li {\n    flex: 0 0 auto;\n    width: 5rem;\n}\n\n.szenen-bildwahl__variante {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-app);\n    cursor: pointer;\n}\n\n.szenen-bildwahl__variante.is-gewaehlt {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n.szenen-bildwahl__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Das Gew\xE4hlte \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__gewaehlt {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__gewaehlt li {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    max-width: 100%;\n}\n\n/* Das gew\xE4hlte Bild wird best\xE4tigt, nicht nur benannt: eine kleine Vorschau\n   neben dem Titel. */\n.szenen-bildwahl__gewaehlt .szenen-bildkachel {\n    width: 2.25rem;\n    flex: 0 0 auto;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__gewaehlt .szenen-bildwahl__kacheltitel {\n    min-width: 0;\n    max-width: 12rem;\n    font-size: 0.75rem;\n}\n\n.szenen-beleg__kopf {\n    display: flex;\n    align-items: center;\n    gap: var(--space-sm);\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details + details {\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details > summary {\n    cursor: pointer;\n    font-weight: 600;\n}\n\n/* \u2500\u2500 Die Fehlerrettung (Stufe 6.6, A5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Sie steht im Fehlerblock und muss trotzdem als Werkzeug lesbar sein, nicht\n * als weitere Fehlermeldung. Deshalb abgesetzt wie der Folgelauf \u2014 und aus\n * demselben Grund: Beides sind Angebote, keine Ausk\xFCnfte.\n *\n * Der wichtigste optische Punkt ist die Trennung von Original und\n * Arbeitskopie. Das Original bekommt den ruhigen, \u201Efesten" Hintergrund der\n * Belege; die Kopie sieht aus wie ein normales Eingabefeld, weil sie eines\n * ist. */\n.szenen-rettung {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-rettung > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-rettung textarea[readonly] {\n    background: var(--color-bg-surface);\n    color: var(--color-text-secondary);\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung textarea:not([readonly]) {\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung__aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0;\n}\n\n/* Ein Befund tr\xE4gt Code, Bezug und Meldung. Der Code steht klein und\n * monospaced davor: Er ist die Kennung, nicht die Aussage. */\n.szenen-diagnose__liste {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-diagnose__liste code {\n    font-size: 0.8125rem;\n}\n\n.szenen-diagnose__liste > li[data-severity=\'warning\'] {\n    color: var(--color-text-secondary);\n}\n\n/* \u2500\u2500 Die Draft-Kette (Stufe 6.6, C4) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Hauptweg. Er steht nach den Einzel\xFCbernahmen und muss als das erkennbar\n * sein, was er ist: nicht eine weitere Option, sondern der k\xFCrzere Weg zum\n * selben Ziel. Deshalb durchgezogener Rahmen statt gestricheltem \u2014 er ist\n * Angebot **und** Empfehlung. */\n.szenen-kette {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-kette > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-kette ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0 0 var(--space-sm);\n    padding-left: var(--space-md);\n}\n\n.szenen-kette code {\n    font-size: 0.8125rem;\n}\n\n/* Ein Hinweis, der eine Bedingung erklaert \u2014 nicht rot, weil er kein Fehler\n   ist, aber abgesetzt, weil er eine Folge hat. */\n.szenen-detail__hint {\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Stufe 6.7: Bilder am Prompt-Lauf (H0/H1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich tr\xE4gt zwei Dinge, die man nie verwechseln darf: den **Eingang**\n * (woraus der Prompt entstand) und den **Ausgang** (was daraus wurde). Sie\n * bekommen deshalb verschiedene Akzentkanten statt nur verschiedener\n * \xDCberschriften \u2014 wer schnell liest, sieht die Trennung, bevor er sie liest.\n */\n.szenen-bilder {\n    display: grid;\n    gap: var(--space-md);\n    margin-top: var(--space-sm);\n}\n\n.szenen-bilder__eingang,\n.szenen-bilder__ausgang {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__eingang {\n    border-left: 3px solid var(--color-accent-purple, var(--color-border));\n}\n\n.szenen-bilder__ausgang {\n    border-left: 3px solid var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-bilder h5 {\n    margin: 0;\n}\n\n.szenen-bilder__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: 0;\n    align-items: baseline;\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-bilder__eingangsliste,\n.szenen-bilder__batchliste,\n.szenen-bilder__auftraege {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bilder__eingangsliste > li,\n.szenen-bilder__batchliste > li,\n.szenen-bilder__auftraege > li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n/* Ein unterbrochener Auftrag ist der Fall, f\xFCr den der Auftragssatz existiert.\n   Er wird deshalb markiert \u2014 nicht rot, denn er ist kein Fehler, sondern eine\n   offene Entscheidung. */\n.szenen-bilder__auftraege > li[data-status="started"] {\n    border-left: 3px solid var(--color-warning);\n}\n\n.szenen-bilder__auftraege > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-bilder__auftraege > li[data-status="partial"] {\n    border-left: 3px solid var(--color-accent-blue, var(--color-border));\n}\n\n.szenen-bilder__auftraege > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n/* Das Eingangsbild benutzt seit C3 dieselbe Kachel wie W\xE4hler und Galerie.\n   Sie ist von Haus aus so breit wie ihr Platz \u2014 in dieser Zeile bekommt sie\n   deshalb eine feste Gr\xF6sse, sonst sch\xF6be sie die Metadaten heraus. */\n.szenen-bilder__eingangsliste .szenen-bildkachel {\n    flex: 0 0 auto;\n    width: 4rem;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batch {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batchkopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-bilder__herkunft {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n/* Review-Befund \u2014 ein transienter Bildfehler ist wiederholbar, kein\n   endg\xFCltiges \u201Efehlt". Dezent wie ein Angebot, nicht wie ein Fehlerzustand. */\n.szenen-bilder__retry {\n    justify-self: start;\n    padding: 0.15rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n/* C4 \u2014 die Provenienz vollst\xE4ndig, aber sekund\xE4r. */\n.szenen-bilder__technik > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n}\n\n/* C5 \u2014 der Verlauf verdichtet, seine Ausreisser nicht. */\n.szenen-bilder__verlauf > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__verlauf[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__auffaellig {\n    margin: 0;\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n.szenen-bilder__auftragskennung {\n    flex-basis: 100%;\n    color: var(--color-text-tertiary);\n    font-size: 0.6875rem;\n}\n\n/* \u2500\u2500 C1/C2 \u2014 Galerie und grosse Ansicht \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Das Raster w\xE4chst mit dem Platz: auf 390 px drei bis vier Kacheln je Reihe,\n   auf dem Desktop entsprechend mehr. Vorher war jedes Bild eine Zeile aus\n   Daumennagel plus vier Metadatenfeldern \u2014 vier Bilder ergaben vier Textzeilen\n   und das Protokoll war die Hauptsache. */\n.szenen-bildgalerie {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildgalerie__kachel {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildgalerie__kachel:hover,\n.szenen-bildgalerie__kachel:focus-visible {\n    border-color: var(--color-accent-teal, var(--color-text-primary));\n}\n\n.szenen-bildgalerie__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* Die grosse Ansicht liegt \xFCber allem und bringt ihren eigenen Grund mit \u2014\n   `position: fixed` bezieht sich im Flow-Canvas auf dessen Rahmen, in React auf\n   das Fenster; in beiden F\xE4llen genau das Gew\xFCnschte. */\n.szenen-bildviewer {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    /* Deckend, nicht get\xF6nt: Bei 0.92 schimmerte der Laufbereich durch und man\n       las Prompttext quer \xFCber dem Bild \u2014 im Browser gemessen. */\n    background: #000;\n}\n\n/* Titel, Z\xE4hlung, Schliessen \u2014 drei Spalten, damit ein langer Werktitel die\n   Z\xE4hlung nicht in die n\xE4chste Zeile und \xFCber das Bild schiebt. */\n.szenen-bildviewer__kopf {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    color: var(--color-text-primary);\n}\n\n.szenen-bildviewer__titel {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-weight: 600;\n}\n\n.szenen-bildviewer__zaehler {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n}\n\n.szenen-bildviewer__buehne {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-sm);\n    min-height: 0;\n    min-width: 0;\n}\n\n/* Der Rahmen nimmt den Platz, der zwischen den Bl\xE4tterkn\xF6pfen \xFCbrig ist \u2014\n   `min-width: 0`, damit er auch wirklich schrumpft statt sie hinauszuschieben. */\n.szenen-bildviewer__rahmen {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n}\n\n.szenen-bildviewer__bild {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n}\n\n.szenen-bildviewer__leer {\n    color: var(--color-text-secondary);\n    text-align: center;\n}\n\n/* Die Bl\xE4tterkn\xF6pfe sind daumengross und liegen an den R\xE4ndern \u2014 auf einem\n   Telefon ist der Rand erreichbar, die Bildmitte nicht. */\n.szenen-bildviewer__blaettern {\n    flex: 0 0 auto;\n    width: 2.75rem;\n    height: 3.5rem;\n    font-size: 1.75rem;\n    line-height: 1;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildviewer__details {\n    max-height: 8rem;\n    overflow-y: auto;\n    color: var(--color-text-secondary);\n}\n\n/* Die Aktionen stehen abgesetzt: Sie sind Angebote, keine Ausk\xFCnfte \u2014 dasselbe\n   Muster wie beim Folgelauf und bei der Fehlerrettung. */\n/* D \u2014 die Aktionen stehen abgesetzt und standardm\xE4ssig kompakt: Sie sind\n   Angebote, keine Ausk\xFCnfte. Vorher hielten beide Formulare dauerhaft offen und\n   machten aus jedem Lauf zwei zus\xE4tzliche Bildschirmseiten. */\n.szenen-bilder__aktion {\n    min-width: 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__aktion > summary {\n    color: var(--color-text-primary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-bilder__aktion[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion h5 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-bilder__aktion ol {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n    font-size: 0.8125rem;\n}\n\n/* Regelwerk-UX Schritt 16 \u2014 der ZIP-Sammelimport.\n *\n * \xA78: Der gemeldete Einsatz ist mobil. Deshalb **ein** Seedfeld statt einer\n * gestapelten Eingabe je Bild, und die Zuordnung Bild -> Seed als umbrechende\n * Zeile statt als Tabelle: Eine Tabelle waere auf 390 px abgeschnitten, und\n * abgeschnitten heisst hier, dass der Nutzer die Zuordnung nicht mehr pruefen\n * kann \u2014 genau die Pruefung, wegen der die Vorschau existiert. */\n.szenen-bilder__zip {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-bilder__zipkopf {\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipvorlagen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n    margin: 0;\n}\n\n/* Eine laengere Liste bleibt scrollbar, statt die Sektion und damit den\n * Import-Knopf aus dem Blick zu schieben (\xA78, letzter Punkt). */\n.szenen-bilder__zipliste {\n    max-height: 16rem;\n    overflow-y: auto;\n}\n\n.szenen-bilder__zipliste > li {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-bilder__zipliste > li > span:first-child {\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipliste > li > span:last-child {\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n}\n\n/* ==========================================================================\n   STUFE 6.10 \u2014 ELEMENTEDITOR UND VERSIONSNAVIGATION\n   ========================================================================== */\n\n/* \xA74.2 \u2014 vier Sachverhalte, vier Marken. Die Marken stehen in einer eigenen\n * Spalte, damit ANGEZEIGT + BEVORZUGT nebeneinander lesbar bleiben, statt sich\n * durch den Text zu schieben. */\n.szenen-detail__heads li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n}\n\n.szenen-version__titel {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-right: auto;\n}\n\n/* V17 \u2014 Kennungen bleiben vollst\xE4ndig sichtbar, aber optisch sekund\xE4r. */\n.szenen-version__id,\n.szenen-ref__id,\n.szenen-detail__field-key {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    overflow-wrap: anywhere;\n}\n\n.szenen-version__marken {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-version__marken > span {\n    padding: 0.1rem 0.5rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.7rem;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n}\n\n.szenen-version--angezeigt {\n    border-color: var(--color-accent-teal, #2dd4bf) !important;\n}\n\n/* V9 \u2014 der Basiswechsel ist eine Entscheidung, keine Nebenwirkung. */\n.szenen-detail__confirm {\n    display: grid;\n    gap: var(--space-sm);\n    margin: var(--space-md) 0;\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-accent-amber, #f59e0b);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__confirm p {\n    margin: 0;\n}\n\n/* Untergruppen von Objektfeldern (`prompt_render_settings`, `overrides`,\n   `blender_render_settings`) \u2014 seit A1/A2 auf- und zuklappbar. Eine optionale\n   Gruppe startet zu: Blender und `overrides` f\xFCllten auf einem 390-px-Display\n   sonst mehrere Bildschirmseiten, obwohl die meisten Shots sie nie anfassen. */\n.szenen-detail__group {\n    min-width: 0;\n    margin: var(--space-md) 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group > summary {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__group[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n/* A2 \u2014 dass eine zugeklappte Gruppe schon Werte tr\xE4gt, muss man sehen, ohne\n   sie zu \xF6ffnen. Sonst \xFCbersieht man eine gesetzte Blender-Ausgabe genau so\n   lange, bis sie im Ergebnis auftaucht. */\n.szenen-detail__group-status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n    color: var(--color-text-tertiary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group[data-konfiguriert="ja"] > summary .szenen-detail__group-status {\n    color: var(--color-text-primary);\n    border-color: var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-detail__group-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n/* A3 \u2014 die Kernaussage steht am Feld, die Begr\xFCndung dahinter. Nicht als\n   Tooltip: Auf einem Telefon gibt es kein Hover, und was dort unerreichbar ist,\n   ist gestrichen \u2014 nur ohne dass es jemand entschieden h\xE4tte. */\n.szenen-detail__warum > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-detail__warum > small {\n    display: block;\n    padding-top: var(--space-xs);\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__fieldrow {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-bottom: var(--space-md);\n}\n\n/* A4 \u2014 der technische Feldname bleibt lesbar, tritt aber hinter das fachliche\n   Label zur\xFCck. */\n.szenen-detail__field-label {\n    color: var(--color-text-primary);\n}\n\n.szenen-detail__field {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-detail__field > span {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n}\n\n/* Mehrfachauswahl und Listeneditoren. */\n.szenen-feld__mehrfach,\n.szenen-feld__liste,\n.szenen-feld__reflist,\n.szenen-feld__ref,\n.szenen-feld__zielmodell,\n.szenen-feld__kamera {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-feld__mehrfach > label,\n.szenen-feld__null {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-feld__liste-zeile {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-feld__reflist ol {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-feld__reflist li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs);\n    padding: var(--space-xs) var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \xA76.1 \u2014 Titel und Typ zuerst, Kennungen daneben. */\n.szenen-ref__anzeige {\n    display: inline-flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-ref__typ {\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-ref__warn {\n    padding: 0.1rem 0.5rem;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    font-weight: 700;\n}\n\n/* \xA76.5 \u2014 abgeleitete Angaben, ausdr\xFCcklich nur Anzeige. */\n.szenen-detail__derived {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__derived dl {\n    display: grid;\n    grid-template-columns: minmax(10rem, auto) 1fr;\n    gap: var(--space-xs) var(--space-sm);\n    margin: 0;\n}\n\n.szenen-detail__derived dt {\n    color: var(--color-text-secondary);\n}\n\n.szenen-detail__derived dd {\n    margin: 0;\n}\n\n.szenen-feld__abgeleitet {\n    margin: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n}\n';
+var SZENEN_VIEW_STYLES = '/* ==========================================================================\n   SZENEN VIEW\n   ========================================================================== */\n\n.szenen-view {\n    display: grid;\n    gap: var(--space-md);\n    width: 100%;\n    min-width: 0;\n    font-family: var(--font-sans);\n    padding: var(--space-md);\n}\n\n@media (max-width: 760px) {\n    .szenen-view {\n        padding: var(--space-sm);\n        gap: var(--space-sm);\n    }\n}\n\n.szenen-view__intro {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.75rem, 1.6vw, 1.1rem);\n    color: var(--color-text-primary);\n    background:\n        radial-gradient(circle at 85% 15%, rgba(45, 212, 191, 0.16), transparent 34%),\n        linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n}\n\n.szenen-view__intro h2,\n.szenen-view__intro p {\n    margin: 0;\n}\n\n.szenen-view__intro h2 {\n    margin-bottom: 0.1rem;\n    font-size: clamp(1rem, 1.9vw, 1.3rem);\n    line-height: 1.2;\n}\n\n.szenen-view__intro > div > p:last-child {\n    max-width: 44rem;\n    color: var(--color-text-secondary);\n    font-size: 0.82rem;\n    line-height: 1.35;\n}\n\n.szenen-view__eyebrow {\n    margin-bottom: 0.1rem !important;\n    color: var(--color-accent-teal, #2dd4bf);\n    font-size: 0.62rem;\n    font-weight: 800;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n}\n\n.szenen-view__step {\n    flex: none;\n    padding: 0.25rem 0.6rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    font-weight: 700;\n}\n\n.szenen-view__nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-view__nav button,\n.szenen-view button {\n    min-height: 2.25rem;\n    padding: 0.45rem 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-view button:hover:not(:disabled) {\n    color: var(--color-text-primary);\n    background: var(--color-bg-surface-hover);\n    border-color: var(--color-border-hover);\n}\n\n.szenen-view button:focus-visible,\n.szenen-view input:focus-visible,\n.szenen-view select:focus-visible,\n.szenen-view textarea:focus-visible {\n    outline: 2px solid var(--color-accent-blue);\n    outline-offset: 2px;\n}\n\n.szenen-view button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.szenen-view__nav button.is-active,\n.szenen-view__nav button[aria-selected="true"] {\n    color: var(--color-text-primary);\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-view__area {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-view__capability-note,\n.szenen-area__lead {\n    margin: 0;\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-accent-purple);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-view__host-notes {\n    color: var(--color-text-secondary);\n}\n\n.szenen-view__host-notes > summary {\n    cursor: pointer;\n    font-size: 0.8rem;\n}\n\n/* `box-sizing` steht hier und nicht beim Host: Die React-App bringt in\n * `master.css` einen globalen `* { box-sizing: border-box }` mit, Flow **nicht**\n * \u2014 dort ragte `width: 100%` plus Innenabstand um die Randbreite aus dem\n * Elternelement heraus und erzeugte auf ~390 px einen horizontalen Scroll. Die\n * gemeinsame Ansicht darf sich auf keinen Host-Reset verlassen. */\n.szenen-view input:not([type="checkbox"]),\n.szenen-view select,\n.szenen-view textarea {\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 2.25rem;\n    padding: 0.5rem 0.65rem;\n    color: var(--color-text-primary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font: inherit;\n}\n\n.szenen-view textarea {\n    min-height: 7rem;\n    resize: vertical;\n    font-family: var(--font-mono);\n    font-size: 0.8rem;\n}\n\n.szenen-view label {\n    display: grid;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-view code,\n.szenen-view pre {\n    font-family: var(--font-mono);\n    overflow-wrap: anywhere;\n}\n\n.szenen-view h3,\n.szenen-view h4,\n.szenen-view h5 {\n    margin-top: 0;\n}\n\n.szenen-view ul,\n.szenen-view ol {\n    padding-left: 1.25rem;\n}\n\n.szenen-elements,\n.szenen-detail,\n.szenen-scene,\n.szenen-setup,\n.szenen-shot,\n.szenen-media,\n.szenen-runs {\n    display: grid;\n    gap: var(--space-md);\n    min-width: 0;\n}\n\n/* Arbeitsoberflaeche: Liste links, Bearbeitung rechts.\n *\n * Breit stehen beide Spalten nebeneinander \u2014 die Auswahl bleibt sichtbar,\n * waehrend bearbeitet wird. Schmal rendert die Komponente nur eine der beiden;\n * hier steht deshalb keine Regel, die die andere versteckt. */\n@media (min-width: 761px) {\n    .szenen-elements {\n        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);\n        align-items: start;\n    }\n\n    .szenen-elements__master,\n    .szenen-elements__detail {\n        min-width: 0;\n    }\n}\n\n.szenen-elements__master,\n.szenen-elements__detail {\n    display: grid;\n    gap: var(--space-sm);\n    align-content: start;\n    min-width: 0;\n}\n\n.szenen-elements__toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__heading {\n    margin: 0;\n    font-size: 1.05rem;\n}\n\n.szenen-elements__scope {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    min-width: 0;\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-elements__scope > select {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.szenen-elements__new {\n    flex: none;\n    font-weight: 700;\n}\n\n.szenen-elements__create {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-accent-blue);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-elements__create label {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-elements__create-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__options > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    cursor: pointer;\n}\n\n.szenen-elements__back {\n    justify-self: start;\n    font-weight: 700;\n}\n\n.szenen-elements__empty-detail {\n    margin: 0;\n    color: var(--color-text-tertiary);\n}\n\n.szenen-elements__filter,\n.szenen-detail__actions,\n.szenen-runs__start,\n.szenen-scene-editor__add,\n.szenen-scene-editor__add-relation {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__filter > label,\n.szenen-runs__start > label,\n.szenen-scene-editor__add > input {\n    flex: 1 1 16rem;\n}\n\n.szenen-elements__filter > label:has(input[type="checkbox"]) {\n    display: flex;\n    flex: 1 1 16rem;\n    flex-direction: row;\n    align-items: center;\n}\n\n.szenen-elements__filter input[type="checkbox"] {\n    width: 1rem;\n    height: 1rem;\n    accent-color: var(--color-accent-blue);\n}\n\n.szenen-elements__list {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-elements__list > li > button {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs) var(--space-sm);\n    width: 100%;\n    height: 100%;\n    text-align: left;\n}\n\n.szenen-elements__list > li > button > .szenen-elements__title {\n    flex: 1 1 100%;\n}\n\n.szenen-elements__list > li > button.is-selected,\n.szenen-elements__list > li > button[aria-current="true"] {\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-elements__type {\n    color: var(--color-accent-blue);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-elements__title {\n    color: var(--color-text-primary);\n    font-size: 0.95rem;\n}\n\n.szenen-elements__subtype,\n.szenen-elements__retired {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n}\n\n.szenen-elements__retired {\n    color: var(--color-warning);\n}\n\n.szenen-detail {\n    margin-top: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n@media (min-width: 761px) {\n    .szenen-detail {\n        padding: var(--space-md);\n        background: var(--color-bg-surface);\n        border: 1px solid var(--color-border);\n        border-radius: var(--radius-sm);\n    }\n}\n\n.szenen-detail > header,\n.szenen-detail__heads,\n.szenen-detail__draft,\n.szenen-capability {\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* .szenen-runs ist ein eigenst\xE4ndiger sichtbarer Bereich, beh\xE4lt Styling auf Desktop */\n@media (min-width: 761px) {\n    .szenen-runs {\n        padding: var(--space-md);\n        background: var(--color-bg-surface);\n        border: 1px solid var(--color-border);\n        border-radius: var(--radius-md);\n    }\n}\n\n@media (max-width: 760px) {\n    .szenen-runs {\n        padding: 0;\n        background: transparent;\n        border: none;\n        border-radius: 0;\n    }\n}\n\n.szenen-detail__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin-bottom: 0;\n    color: var(--color-text-secondary);\n}\n\n.szenen-detail__heads ul,\n.szenen-scene-editor ul,\n.szenen-runs > ol,\n.szenen-capability > ul {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-detail__heads li,\n.szenen-scene-editor li,\n.szenen-runs > ol > li,\n.szenen-capability > ul > li {\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n\n/* Stufe 6.7.2 (D-126) \u2014 Advanced-/Debug-Fl\xE4che f\xFCr die rohe, schema-getriebene\n * Feldliste einer Szene. Gestrichelt wie die anderen \u201EAngebot statt\n * Auskunft"-Bereiche, aber ohne Akzentfarbe: sie ist kein Vorschlag, sondern\n * ein Eskalationsweg. */\n.szenen-detail__technical {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__technical > summary {\n    margin-bottom: var(--space-sm);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__technical[open] > summary {\n    margin-bottom: var(--space-md);\n}\n\n.szenen-detail__field small,\n.szenen-capability small {\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__preview-errors,\n.szenen-detail__notice--error,\n.szenen-view [role="alert"] {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-detail__notice {\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__notice--success,\n.szenen-view [data-tone="success"] {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n    border-color: var(--color-accent-green);\n}\n\n.szenen-scene-editor {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-md);\n    margin-bottom: 0;\n}\n\n.szenen-scene-editor > section {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* \u2500\u2500 Stufe 6.7.2 (D-126): Node-/Relationskarten \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Nodes und Beziehungen sind `<details>` \u2014 dieselbe Interaktionssprache wie\n * \u201ERohantwort (Diagnose)" und \u201EBilder zu diesem Lauf" in RunsPanel.tsx. Kopf\n * (immer sichtbar) tr\xE4gt Inhalt zuerst, Technik zuletzt; Body (nur bei\n * ge\xF6ffneter Karte) tr\xE4gt die Bearbeitungscontrols. Padding wandert von der\n * `<li>` in Kopf/Body, damit die Karte keinen doppelten Rand bekommt. */\n.szenen-scene-editor li {\n    padding: 0;\n    overflow: hidden;\n}\n\n.szenen-node-karte__kopf,\n.szenen-relation-karte__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs) var(--space-sm);\n    padding: var(--space-sm);\n    cursor: pointer;\n    list-style: none;\n}\n\n.szenen-node-karte__kopf::-webkit-details-marker,\n.szenen-relation-karte__kopf::-webkit-details-marker {\n    display: none;\n}\n\n.szenen-node-karte__titel {\n    flex: 1 1 12rem;\n    min-width: 0;\n    color: var(--color-text-primary);\n    font-weight: 600;\n    overflow-wrap: anywhere;\n}\n\n.szenen-node-karte__typ {\n    flex: none;\n    padding: 0.15rem 0.55rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    white-space: nowrap;\n}\n\n/* node_id klein, monospace, sekund\xE4r \u2014 sichtbar auch bei zugeklappter Karte,\n * aber optisch klar hinter Beschreibung und Typ. */\n.szenen-node-karte__meta {\n    flex: 1 1 100%;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n.szenen-node-karte__meta code {\n    font-size: inherit;\n}\n\n.szenen-node-karte__body,\n.szenen-relation-karte__body {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-sm) var(--space-sm);\n    border-top: 1px solid var(--color-border);\n}\n\n/* \xA74 \u2014 Prim\xE4raktion und destruktive Aktion optisch getrennt: \u201ENode/Beziehung\n * entfernen" bekommt einen eigenen, warnenden Ton statt gleichgewichtig neben\n * der normalen Bearbeitung zu stehen. */\n.szenen-node-karte__entfernen,\n.szenen-relation-karte__entfernen {\n    justify-self: start;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-relation-karte__kopf {\n    font-size: 0.9rem;\n}\n\n.szenen-relation-karte__kopf code {\n    overflow-wrap: anywhere;\n}\n\n.szenen-relation-karte__pfeil {\n    flex: none;\n    color: var(--color-text-secondary);\n}\n\n/* Die Composer-\xD6ffner (\u201E+ Node hinzuf\xFCgen", \u201E+ Beziehung hinzuf\xFCgen") sind\n * Angebote, keine Ausk\xFCnfte \u2014 dasselbe gestrichelte Muster wie beim Folgelauf\n * und der Fehlerrettung (\xA73.3/\xA73.5). */\n.szenen-scene-editor__oeffnen {\n    width: 100%;\n    border-style: dashed;\n}\n\n.szenen-refpicker {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: var(--space-sm) 0;\n    padding: var(--space-sm) 0;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-refpicker legend {\n    padding: 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n}\n\n.szenen-capability > ul > li {\n    display: grid;\n    grid-template-columns: minmax(10rem, 1fr) auto minmax(14rem, 2fr);\n    align-items: start;\n    gap: var(--space-sm);\n}\n\n.szenen-capability__state {\n    padding: 0.1rem 0.5rem;\n    border-radius: var(--radius-full);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-capability__state--yes {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n}\n\n.szenen-capability__state--no {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n}\n\n.szenen-capability__state--unknown {\n    color: #fef08a;\n    background: rgba(234, 179, 8, 0.2);\n}\n\n.szenen-runs > ol > li {\n    display: grid;\n    gap: var(--space-sm);\n}\n\n/* B1 \u2014 die geschlossene Runde. Vorher stand die `run_id` als erstes und war\n   die einzige Information, die niemand liest; jetzt beantwortet die Kopfzeile\n   welche Runde, ob sie durchging, mit welchem Modell und was ungef\xE4hr\n   herauskam. */\n.szenen-runs__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-sm);\n    width: 100%;\n    padding: var(--space-xs) 0;\n    text-align: left;\n    color: var(--color-text-secondary);\n    background: transparent;\n    border: none;\n    cursor: pointer;\n}\n\n.szenen-runs__marke {\n    font-weight: 700;\n    color: var(--color-text-primary);\n}\n\n.szenen-runs__status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    border-radius: var(--radius-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n}\n\n.szenen-runs__status[data-status="succeeded"] {\n    border-color: var(--color-success);\n}\n\n.szenen-runs__status[data-status="failed"] {\n    border-color: var(--color-danger);\n}\n\n.szenen-runs__modell {\n    font-size: 0.75rem;\n}\n\n/* Der Auszug ist die Inhaltsvorschau der Runde. Er bekommt eine eigene Zeile,\n   damit er nicht mit Marke und Modell um dieselbe Zeile ringt. */\n.szenen-runs__auszug {\n    flex: 1 1 100%;\n    min-width: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.8125rem;\n}\n\n/* B2 \u2014 ein Fehler steht ausserhalb der aufklappbaren Fl\xE4che: Wer eine rote\n   Runde sieht, soll nicht erst klicken m\xFCssen, um zu erfahren, woran sie\n   gescheitert ist. */\n.szenen-runs__fehler {\n    display: grid;\n    gap: var(--space-xs);\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-runs__fehler p {\n    margin: 0;\n}\n\n.szenen-runs__inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-runs__prompt > h5,\n.szenen-runs__sekundaer > h5 {\n    margin: 0 0 var(--space-xs);\n}\n\n.szenen-runs__prompt > p {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n.szenen-runs__prompt--negativ > p,\n.szenen-runs__sekundaer > p {\n    margin: 0;\n    color: var(--color-text-secondary);\n    white-space: pre-wrap;\n}\n\n.szenen-runs__mehr {\n    justify-self: start;\n    margin-top: var(--space-xs);\n    padding: 0;\n    color: var(--color-accent-teal, var(--color-text-secondary));\n    background: transparent;\n    border: none;\n    font-size: 0.75rem;\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.szenen-runs > ol > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-runs > ol > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n.szenen-runs details pre {\n    max-height: 20rem;\n    overflow: auto;\n    padding: var(--space-sm);\n    white-space: pre-wrap;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-media > section {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-media__lookup,\n.szenen-media__attach {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-media__lookup > label,\n.szenen-media__attach > label:first-child {\n    flex: 1 1 18rem;\n}\n\n.szenen-media__list {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-media__list > li {\n    display: grid;\n    grid-template-columns: minmax(12rem, 1fr) auto auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n@media (max-width: 760px) {\n    .szenen-view {\n        gap: var(--space-sm);\n    }\n\n    /* C1 \u2014 auf 390 px bleiben drei Kacheln je Reihe gross genug zum Erkennen\n       und klein genug, dass vier Bilder eine Reihe sind und keine Seite. */\n    .szenen-bildgalerie {\n        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    }\n\n    /* Der Viewer bekommt den ganzen Bildschirm; die Bl\xE4tterkn\xF6pfe bleiben am\n       Rand, wo der Daumen sie erreicht. */\n    .szenen-bildviewer {\n        padding: var(--space-xs);\n    }\n\n    .szenen-bildviewer__blaettern {\n        width: 2.25rem;\n        height: 4rem;\n    }\n\n    .szenen-view__intro {\n        align-items: start;\n        flex-direction: column;\n        gap: var(--space-xs);\n        padding: var(--space-sm);\n    }\n\n    .szenen-view__intro h2 {\n        font-size: 1.05rem;\n    }\n\n    .szenen-view__intro > div > p:last-child {\n        font-size: 0.78rem;\n    }\n\n    .szenen-view__nav {\n        position: sticky;\n        top: 0;\n        z-index: 2;\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: var(--space-xs);\n        padding: var(--space-xs);\n    }\n\n    .szenen-view__nav button {\n        width: 100%;\n        min-width: 0;\n        min-height: 2.5rem;\n        padding: 0.35rem 0.5rem;\n    }\n\n\n    .szenen-scene-editor {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-capability > ul > li {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-derive,\n    .szenen-elements,\n    .szenen-scene,\n    .szenen-setup,\n    .szenen-shot,\n    .szenen-media,\n    .szenen-runs {\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto;\n        align-items: center;\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter > label {\n        width: 100%;\n        min-width: 0;\n        flex: none;\n    }\n\n    .szenen-elements__filter > label:has(input[type="checkbox"]) {\n        flex: none;\n        grid-column: 1 / -1;\n    }\n\n    /* Schmal ist die Liste eine Spalte, und die Auswahl fuehrt weiter \u2014 der\n     * Eintrag ist deshalb ein Ziel fuer den Finger, keine Kachel. */\n    .szenen-elements__list {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .szenen-elements__list > li > button {\n        min-height: 2.75rem;\n    }\n\n    .szenen-elements__back {\n        justify-self: stretch;\n        min-height: 2.5rem;\n    }\n\n    .szenen-detail__actions,\n    .szenen-runs__start,\n    .szenen-scene-editor__add,\n    .szenen-scene-editor__add-relation {\n        align-items: stretch;\n        flex-direction: column;\n    }\n\n    .szenen-runs__start > *,\n    .szenen-scene-editor__add > *,\n    .szenen-scene-editor__add-relation > * {\n        width: 100%;\n        flex: none;\n    }\n}\n\n/* \u2500\u2500 Stufe 6.5: Rekonstruktion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich zeigt drei Dinge nebeneinander: den Vorschlag, das nicht\n * Ableitbare und die Widerspr\xFCche. Die Diagnosen sind deshalb bewusst nicht\n * kleiner gesetzt als der Vorschlag \u2014 wer sie \xFCbersieht, \xFCbernimmt Geratenes.\n */\n\n.szenen-derive {\n    display: grid;\n    gap: var(--space-md);\n}\n\n.szenen-form {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-field {\n    display: grid;\n    gap: var(--space-xs);\n}\n\n.szenen-field > span {\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-error {\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-danger);\n    background: var(--color-accent-red-dim);\n    border: 1px solid var(--color-accent-red);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-empty {\n    padding: var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-diagnose {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-warning);\n    border-radius: var(--radius-sm);\n}\n\n/* Ein Widerspruch ist der schwerste der drei Befunde: dort steht eine\n * Entscheidung aus, die das System bewusst nicht getroffen hat (D-74). */\n.szenen-diagnose--konflikt {\n    border-left-color: var(--color-danger);\n}\n\n.szenen-diagnose > h4 {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.9375rem;\n}\n\n.szenen-diagnose ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-proposal {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-proposal > h4 {\n    margin: 0 0 var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.9375rem;\n}\n\n.szenen-proposal__payload {\n    max-height: 18rem;\n    margin: 0 0 var(--space-sm);\n    padding: var(--space-sm);\n    overflow: auto;\n    /* Ein erzeugter Prompt ist ein einziger langer Satz \u2014 ohne Umbruch\n       verschwindet er nach rechts aus dem Bild. JSON-Payloads bringen ihre\n       eigenen Zeilenumbrueche mit und leiden nicht darunter. */\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-proposal__done {\n    margin: var(--space-sm) 0 0;\n    color: var(--color-success);\n}\n\n/* Die Belege eines Laufs: Rohantwort und Systemprompt. Zum Lesen und Kopieren,\n   nicht zum Bedienen \u2014 deshalb voll markierbar und in Monospace. */\n.szenen-beleg__text {\n    width: 100%;\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    line-height: 1.5;\n    white-space: pre;\n    background: var(--color-bg-app);\n    color: var(--color-text);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    resize: vertical;\n}\n\n/* Der Folgelauf (D-87): abgesetzt, damit er nicht wie Teil des Ergebnisses\n   aussieht \u2014 er ist eine Frage, keine Auskunft. */\n.szenen-folgelauf {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-folgelauf > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-run__herkunft {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-muted, inherit);\n}\n\n/* Widerspricht das Modell, ist das das Wichtigste auf der Seite. */\n.szenen-diagnose--antwort {\n    border-left: 3px solid var(--color-accent, var(--color-border));\n}\n\n/* Der Bildw\xE4hler (D-92) \u2014 Browser und Inspector, dem Labs-Tab nachgebildet,\n   aber mit dem CSS dieser Ansicht: eine gemeinsame Komponente \xFCber zwei\n   Dom\xE4nengrenzen w\xE4re eine Kopplung, die keiner gewollt hat.\n\n   Der Review vom 2026-08-22 (R12.1/R12.2) hat den Ma\xDFstab gesetzt: Der Bestand\n   ist ein **Browser**, kein Seiteninhalt. Vierzig Werke d\xFCrfen die Szenenseite\n   nicht meterlang machen, und zw\xF6lf Varianten eines Werkes keine zw\xF6lf\n   Bildschirmseiten. Deshalb steht hier alles unter zwei Regeln \u2014 begrenzte\n   Fl\xE4che mit eigenem Scroll, und Kacheln statt Karten. */\n\n/* \u2500\u2500 Ebene 1: der Browser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl {\n    /* Dieselbe Begr\xFCndung wie beim Inspector: Als Grid-Element w\xFCrde der\n       W\xE4hler sonst so breit wie sein breitester Inhalt. */\n    min-width: 0;\n}\n\n.szenen-bildwahl__browser {\n    /* Die eigene Scrollfl\xE4che ist der ganze Punkt: Der Bestand w\xE4chst nach\n       innen, nicht nach unten. Dieselbe Gr\xF6\xDFenordnung wie `max-h-[300px]` im\n       Labs-Browser. */\n    max-height: 19rem;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__raster {\n    display: grid;\n    /* Vier Spalten auf schmalen Displays \u2014 der gemeldete Screenshot zeigte eine\n       einzige Spalte gro\xDFer Karten. Breiter wird automatisch dichter. */\n    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__karte {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    text-align: left;\n    cursor: pointer;\n}\n\n/* Das fokussierte Werk ist klar markiert \u2014 sonst wei\xDF niemand, wessen Galerie\n   der Inspector unten zeigt. */\n.szenen-bildwahl__karte.is-fokus {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n/* \u2500\u2500 Die Kachel selbst \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Der Platz steht, bevor das Bild da ist \u2014 sonst springt das Raster, sobald\n   die erste Vorschau eintrifft. */\n.szenen-bildkachel {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    overflow: hidden;\n    background: var(--color-bg-app);\n}\n\n.szenen-bildkachel img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.szenen-bildkachel__leer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(135deg, var(--color-bg-app), var(--color-bg-surface));\n}\n\n/* R12.3: Eine fehlende Vorschau bleibt kachelgro\xDF. Vorher fiel die Karte auf\n   ihren Prompttext zur\xFCck \u2014 und ein Prompt hat im echten Bestand mehrere\n   hundert Zeichen. */\n.szenen-bildkachel__zeichen {\n    font-size: 0.875rem;\n    font-weight: 700;\n    color: var(--color-text-secondary);\n    opacity: 0.6;\n}\n\n/* Wie viele Varianten das Werk hat \u2014 klein und \xFCberlagernd, nie als\n   dominanter Text. */\n.szenen-bildwahl__anzahl {\n    position: absolute;\n    top: 0.15rem;\n    right: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    font-weight: 700;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* Eine Zeile, dann Schluss. Der Prompt eines Werkes ist oft mehrere hundert\n   Zeichen lang und w\xE4re als Prim\xE4rdarstellung genau die Textw\xFCste, gegen die\n   der Review antritt. */\n.szenen-bildwahl__kacheltitel {\n    display: block;\n    padding: 0.15rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.3;\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Ebene 2: der Inspector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__inspector {\n    /* Ohne `min-width: 0` gewinnt der Inhalt: Der W\xE4hler ist Element eines\n       Grids (`.szenen-form`), und dort ist `min-width: auto` die Vorgabe. Der\n       Streifen unten ist rund 1000 px breit \u2014 gemessen am 2026-08-22 im echten\n       Browser zog er die Auswahl von 374 px auf 1088 px auf und schob die\n       ganze Seite waagerecht heraus, statt selbst zu scrollen. */\n    min-width: 0;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    /* Sichtbar abgesetzt vom Browser: zwei Ebenen, nicht eine lange Liste. */\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__inspektorkopf {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bildwahl__werktitel {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: var(--color-text-primary);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.szenen-bildwahl__zurueck {\n    flex: 0 0 auto;\n    font-size: 0.6875rem;\n    padding: 0.15rem 0.5rem;\n}\n\n/* Der Streifen: waagerecht scrollend, feste kleine Kacheln \u2014 zw\xF6lf Varianten\n   bleiben ein \xDCberblick statt zw\xF6lf Bildschirmseiten. */\n.szenen-bildwahl__streifen {\n    /* Die Breite kommt vom Elter, nie vom Inhalt \u2014 sonst scrollt hier nichts. */\n    max-width: 100%;\n    display: flex;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0 0 0.25rem;\n    list-style: none;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n}\n\n.szenen-bildwahl__streifen > li {\n    flex: 0 0 auto;\n    width: 5rem;\n}\n\n.szenen-bildwahl__variante {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-app);\n    cursor: pointer;\n}\n\n.szenen-bildwahl__variante.is-gewaehlt {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n.szenen-bildwahl__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Das Gew\xE4hlte \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__gewaehlt {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__gewaehlt li {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    max-width: 100%;\n}\n\n/* Das gew\xE4hlte Bild wird best\xE4tigt, nicht nur benannt: eine kleine Vorschau\n   neben dem Titel. */\n.szenen-bildwahl__gewaehlt .szenen-bildkachel {\n    width: 2.25rem;\n    flex: 0 0 auto;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__gewaehlt .szenen-bildwahl__kacheltitel {\n    min-width: 0;\n    max-width: 12rem;\n    font-size: 0.75rem;\n}\n\n.szenen-beleg__kopf {\n    display: flex;\n    align-items: center;\n    gap: var(--space-sm);\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details + details {\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details > summary {\n    cursor: pointer;\n    font-weight: 600;\n}\n\n/* \u2500\u2500 Die Fehlerrettung (Stufe 6.6, A5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Sie steht im Fehlerblock und muss trotzdem als Werkzeug lesbar sein, nicht\n * als weitere Fehlermeldung. Deshalb abgesetzt wie der Folgelauf \u2014 und aus\n * demselben Grund: Beides sind Angebote, keine Ausk\xFCnfte.\n *\n * Der wichtigste optische Punkt ist die Trennung von Original und\n * Arbeitskopie. Das Original bekommt den ruhigen, \u201Efesten" Hintergrund der\n * Belege; die Kopie sieht aus wie ein normales Eingabefeld, weil sie eines\n * ist. */\n.szenen-rettung {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-rettung > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-rettung textarea[readonly] {\n    background: var(--color-bg-surface);\n    color: var(--color-text-secondary);\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung textarea:not([readonly]) {\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung__aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0;\n}\n\n/* Ein Befund tr\xE4gt Code, Bezug und Meldung. Der Code steht klein und\n * monospaced davor: Er ist die Kennung, nicht die Aussage. */\n.szenen-diagnose__liste {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-diagnose__liste code {\n    font-size: 0.8125rem;\n}\n\n.szenen-diagnose__liste > li[data-severity=\'warning\'] {\n    color: var(--color-text-secondary);\n}\n\n/* \u2500\u2500 Die Draft-Kette (Stufe 6.6, C4) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Hauptweg. Er steht nach den Einzel\xFCbernahmen und muss als das erkennbar\n * sein, was er ist: nicht eine weitere Option, sondern der k\xFCrzere Weg zum\n * selben Ziel. Deshalb durchgezogener Rahmen statt gestricheltem \u2014 er ist\n * Angebot **und** Empfehlung. */\n.szenen-kette {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-kette > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-kette ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0 0 var(--space-sm);\n    padding-left: var(--space-md);\n}\n\n.szenen-kette code {\n    font-size: 0.8125rem;\n}\n\n/* Ein Hinweis, der eine Bedingung erklaert \u2014 nicht rot, weil er kein Fehler\n   ist, aber abgesetzt, weil er eine Folge hat. */\n.szenen-detail__hint {\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Stufe 6.7: Bilder am Prompt-Lauf (H0/H1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich tr\xE4gt zwei Dinge, die man nie verwechseln darf: den **Eingang**\n * (woraus der Prompt entstand) und den **Ausgang** (was daraus wurde). Sie\n * bekommen deshalb verschiedene Akzentkanten statt nur verschiedener\n * \xDCberschriften \u2014 wer schnell liest, sieht die Trennung, bevor er sie liest.\n */\n.szenen-bilder {\n    display: grid;\n    gap: var(--space-md);\n    margin-top: var(--space-sm);\n}\n\n.szenen-bilder__eingang,\n.szenen-bilder__ausgang {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__eingang {\n    border-left: 3px solid var(--color-accent-purple, var(--color-border));\n}\n\n.szenen-bilder__ausgang {\n    border-left: 3px solid var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-bilder h5 {\n    margin: 0;\n}\n\n.szenen-bilder__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: 0;\n    align-items: baseline;\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-bilder__eingangsliste,\n.szenen-bilder__batchliste,\n.szenen-bilder__auftraege {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bilder__eingangsliste > li,\n.szenen-bilder__batchliste > li,\n.szenen-bilder__auftraege > li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n/* Ein unterbrochener Auftrag ist der Fall, f\xFCr den der Auftragssatz existiert.\n   Er wird deshalb markiert \u2014 nicht rot, denn er ist kein Fehler, sondern eine\n   offene Entscheidung. */\n.szenen-bilder__auftraege > li[data-status="started"] {\n    border-left: 3px solid var(--color-warning);\n}\n\n.szenen-bilder__auftraege > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-bilder__auftraege > li[data-status="partial"] {\n    border-left: 3px solid var(--color-accent-blue, var(--color-border));\n}\n\n.szenen-bilder__auftraege > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n/* Das Eingangsbild benutzt seit C3 dieselbe Kachel wie W\xE4hler und Galerie.\n   Sie ist von Haus aus so breit wie ihr Platz \u2014 in dieser Zeile bekommt sie\n   deshalb eine feste Gr\xF6sse, sonst sch\xF6be sie die Metadaten heraus. */\n.szenen-bilder__eingangsliste .szenen-bildkachel {\n    flex: 0 0 auto;\n    width: 4rem;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batch {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batchkopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-bilder__herkunft {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n/* Review-Befund \u2014 ein transienter Bildfehler ist wiederholbar, kein\n   endg\xFCltiges \u201Efehlt". Dezent wie ein Angebot, nicht wie ein Fehlerzustand. */\n.szenen-bilder__retry {\n    justify-self: start;\n    padding: 0.15rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n/* C4 \u2014 die Provenienz vollst\xE4ndig, aber sekund\xE4r. */\n.szenen-bilder__technik > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n}\n\n/* C5 \u2014 der Verlauf verdichtet, seine Ausreisser nicht. */\n.szenen-bilder__verlauf > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__verlauf[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__auffaellig {\n    margin: 0;\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n.szenen-bilder__auftragskennung {\n    flex-basis: 100%;\n    color: var(--color-text-tertiary);\n    font-size: 0.6875rem;\n}\n\n/* \u2500\u2500 C1/C2 \u2014 Galerie und grosse Ansicht \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Das Raster w\xE4chst mit dem Platz: auf 390 px drei bis vier Kacheln je Reihe,\n   auf dem Desktop entsprechend mehr. Vorher war jedes Bild eine Zeile aus\n   Daumennagel plus vier Metadatenfeldern \u2014 vier Bilder ergaben vier Textzeilen\n   und das Protokoll war die Hauptsache. */\n.szenen-bildgalerie {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildgalerie__kachel {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildgalerie__kachel:hover,\n.szenen-bildgalerie__kachel:focus-visible {\n    border-color: var(--color-accent-teal, var(--color-text-primary));\n}\n\n.szenen-bildgalerie__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* Die grosse Ansicht liegt \xFCber allem und bringt ihren eigenen Grund mit \u2014\n   `position: fixed` bezieht sich im Flow-Canvas auf dessen Rahmen, in React auf\n   das Fenster; in beiden F\xE4llen genau das Gew\xFCnschte. */\n.szenen-bildviewer {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    /* Deckend, nicht get\xF6nt: Bei 0.92 schimmerte der Laufbereich durch und man\n       las Prompttext quer \xFCber dem Bild \u2014 im Browser gemessen. */\n    background: #000;\n}\n\n/* Titel, Z\xE4hlung, Schliessen \u2014 drei Spalten, damit ein langer Werktitel die\n   Z\xE4hlung nicht in die n\xE4chste Zeile und \xFCber das Bild schiebt. */\n.szenen-bildviewer__kopf {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    color: var(--color-text-primary);\n}\n\n.szenen-bildviewer__titel {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-weight: 600;\n}\n\n.szenen-bildviewer__zaehler {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n}\n\n.szenen-bildviewer__buehne {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-sm);\n    min-height: 0;\n    min-width: 0;\n}\n\n/* Der Rahmen nimmt den Platz, der zwischen den Bl\xE4tterkn\xF6pfen \xFCbrig ist \u2014\n   `min-width: 0`, damit er auch wirklich schrumpft statt sie hinauszuschieben. */\n.szenen-bildviewer__rahmen {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n}\n\n.szenen-bildviewer__bild {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n}\n\n.szenen-bildviewer__leer {\n    color: var(--color-text-secondary);\n    text-align: center;\n}\n\n/* Die Bl\xE4tterkn\xF6pfe sind daumengross und liegen an den R\xE4ndern \u2014 auf einem\n   Telefon ist der Rand erreichbar, die Bildmitte nicht. */\n.szenen-bildviewer__blaettern {\n    flex: 0 0 auto;\n    width: 2.75rem;\n    height: 3.5rem;\n    font-size: 1.75rem;\n    line-height: 1;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildviewer__details {\n    max-height: 8rem;\n    overflow-y: auto;\n    color: var(--color-text-secondary);\n}\n\n/* Die Aktionen stehen abgesetzt: Sie sind Angebote, keine Ausk\xFCnfte \u2014 dasselbe\n   Muster wie beim Folgelauf und bei der Fehlerrettung. */\n/* D \u2014 die Aktionen stehen abgesetzt und standardm\xE4ssig kompakt: Sie sind\n   Angebote, keine Ausk\xFCnfte. Vorher hielten beide Formulare dauerhaft offen und\n   machten aus jedem Lauf zwei zus\xE4tzliche Bildschirmseiten. */\n.szenen-bilder__aktion {\n    min-width: 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__aktion > summary {\n    color: var(--color-text-primary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-bilder__aktion[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion h5 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-bilder__aktion ol {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n    font-size: 0.8125rem;\n}\n\n/* Regelwerk-UX Schritt 16 \u2014 der ZIP-Sammelimport.\n *\n * \xA78: Der gemeldete Einsatz ist mobil. Deshalb **ein** Seedfeld statt einer\n * gestapelten Eingabe je Bild, und die Zuordnung Bild -> Seed als umbrechende\n * Zeile statt als Tabelle: Eine Tabelle waere auf 390 px abgeschnitten, und\n * abgeschnitten heisst hier, dass der Nutzer die Zuordnung nicht mehr pruefen\n * kann \u2014 genau die Pruefung, wegen der die Vorschau existiert. */\n.szenen-bilder__zip {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-bilder__zipkopf {\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipvorlagen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n    margin: 0;\n}\n\n/* Eine laengere Liste bleibt scrollbar, statt die Sektion und damit den\n * Import-Knopf aus dem Blick zu schieben (\xA78, letzter Punkt). */\n.szenen-bilder__zipliste {\n    max-height: 16rem;\n    overflow-y: auto;\n}\n\n.szenen-bilder__zipliste > li {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-bilder__zipliste > li > span:first-child {\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipliste > li > span:last-child {\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n}\n\n/* ==========================================================================\n   STUFE 6.10 \u2014 ELEMENTEDITOR UND VERSIONSNAVIGATION\n   ========================================================================== */\n\n/* \xA74.2 \u2014 vier Sachverhalte, vier Marken. Die Marken stehen in einer eigenen\n * Spalte, damit ANGEZEIGT + BEVORZUGT nebeneinander lesbar bleiben, statt sich\n * durch den Text zu schieben. */\n.szenen-detail__heads li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n}\n\n.szenen-version__titel {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-right: auto;\n}\n\n/* V17 \u2014 Kennungen bleiben vollst\xE4ndig sichtbar, aber optisch sekund\xE4r. */\n.szenen-version__id,\n.szenen-ref__id,\n.szenen-detail__field-key {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    overflow-wrap: anywhere;\n}\n\n.szenen-version__marken {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-version__marken > span {\n    padding: 0.1rem 0.5rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.7rem;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n}\n\n.szenen-version--angezeigt {\n    border-color: var(--color-accent-teal, #2dd4bf) !important;\n}\n\n/* V9 \u2014 der Basiswechsel ist eine Entscheidung, keine Nebenwirkung. */\n.szenen-detail__confirm {\n    display: grid;\n    gap: var(--space-sm);\n    margin: var(--space-md) 0;\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-accent-amber, #f59e0b);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__confirm p {\n    margin: 0;\n}\n\n/* Untergruppen von Objektfeldern (`prompt_render_settings`, `overrides`,\n   `blender_render_settings`) \u2014 seit A1/A2 auf- und zuklappbar. Eine optionale\n   Gruppe startet zu: Blender und `overrides` f\xFCllten auf einem 390-px-Display\n   sonst mehrere Bildschirmseiten, obwohl die meisten Shots sie nie anfassen. */\n.szenen-detail__group {\n    min-width: 0;\n    margin: var(--space-md) 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group > summary {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__group[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n/* A2 \u2014 dass eine zugeklappte Gruppe schon Werte tr\xE4gt, muss man sehen, ohne\n   sie zu \xF6ffnen. Sonst \xFCbersieht man eine gesetzte Blender-Ausgabe genau so\n   lange, bis sie im Ergebnis auftaucht. */\n.szenen-detail__group-status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n    color: var(--color-text-tertiary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group[data-konfiguriert="ja"] > summary .szenen-detail__group-status {\n    color: var(--color-text-primary);\n    border-color: var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-detail__group-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n/* A3 \u2014 die Kernaussage steht am Feld, die Begr\xFCndung dahinter. Nicht als\n   Tooltip: Auf einem Telefon gibt es kein Hover, und was dort unerreichbar ist,\n   ist gestrichen \u2014 nur ohne dass es jemand entschieden h\xE4tte. */\n.szenen-detail__warum > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-detail__warum > small {\n    display: block;\n    padding-top: var(--space-xs);\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__fieldrow {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-bottom: var(--space-md);\n}\n\n/* A4 \u2014 der technische Feldname bleibt lesbar, tritt aber hinter das fachliche\n   Label zur\xFCck. */\n.szenen-detail__field-label {\n    color: var(--color-text-primary);\n}\n\n.szenen-detail__field {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-detail__field > span {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n}\n\n/* Mehrfachauswahl und Listeneditoren. */\n.szenen-feld__mehrfach,\n.szenen-feld__liste,\n.szenen-feld__reflist,\n.szenen-feld__ref,\n.szenen-feld__zielmodell,\n.szenen-feld__kamera {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-feld__mehrfach > label,\n.szenen-feld__null {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-feld__liste-zeile {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-feld__reflist ol {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-feld__reflist li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs);\n    padding: var(--space-xs) var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \xA76.1 \u2014 Titel und Typ zuerst, Kennungen daneben. */\n.szenen-ref__anzeige {\n    display: inline-flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-ref__typ {\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-ref__warn {\n    padding: 0.1rem 0.5rem;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    font-weight: 700;\n}\n\n/* \xA76.5 \u2014 abgeleitete Angaben, ausdr\xFCcklich nur Anzeige. */\n.szenen-detail__derived {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__derived dl {\n    display: grid;\n    grid-template-columns: minmax(10rem, auto) 1fr;\n    gap: var(--space-xs) var(--space-sm);\n    margin: 0;\n}\n\n.szenen-detail__derived dt {\n    color: var(--color-text-secondary);\n}\n\n.szenen-detail__derived dd {\n    margin: 0;\n}\n\n.szenen-feld__abgeleitet {\n    margin: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n}\n';
 
 // src/lib/utils.ts
 var getFormattedTimestamp = () => {
@@ -88,11 +77,6 @@ var GLOBAL_STYLES = `
   .prompt-loading { background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%); background-size: 200% 100%; animation: prompt-shimmer 2s infinite linear; }
   @keyframes dropdown-enter { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
   .animate-dropdown { animation: dropdown-enter 0.1s ease-out forwards; }
-  .flow-szenen-entry { display: grid; gap: 6px; width: 100%; max-width: 280px; text-align: center; }
-  .flow-szenen-entry button, .flow-szenen-shell__header button { min-height: 44px; padding: 0 16px; color: #e7e5e4; background: #1d4ed8; border: 1px solid #3b82f6; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
-  .flow-szenen-entry button { display: flex; align-items: center; justify-content: center; gap: 8px; }
-  .flow-szenen-entry button:disabled { color: rgba(255,255,255,.3); background: transparent; border-color: rgba(255,255,255,.1); cursor: not-allowed; }
-  .flow-szenen-entry small { color: rgba(255,255,255,.35); font-size: 10px; }
   .flow-workspace-picker { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; color: #f5f5f5; background: #050505; overflow: auto; }
   .flow-workspace-picker__card { box-sizing: border-box; display: grid; gap: 16px; width: min(100%, 448px); padding: 24px; background: #171717; border: 1px solid #404040; border-radius: 12px; box-shadow: 0 25px 50px rgba(0,0,0,.55); }
   .flow-workspace-picker__card header { display: grid; gap: 4px; }
@@ -103,7 +87,7 @@ var GLOBAL_STYLES = `
   .flow-workspace-picker__choices button:hover { border-color: #3b82f6; background: #262626; }
   .flow-workspace-picker__back { justify-self: start; padding: 0; color: #a3a3a3; background: transparent; border: 0; font: inherit; cursor: pointer; }
   .flow-workspace-picker__warning { margin: 0; padding: 10px; color: #fbbf24; background: rgba(146,64,14,.2); border: 1px solid rgba(217,119,6,.4); border-radius: 8px; font-size: 12px; }
-  .flow-szenen-shell {
+  .flow-szenen-pane {
     --sz-bg: #0e0e0e; --sz-surface: #171717; --sz-elevated: #262626;
     --sz-border: #404040; --sz-text: #f5f5f5; --sz-muted: #a3a3a3;
     --color-bg-app: #000; --color-bg-surface: #0a0a0a; --color-bg-surface-hover: #171717; --color-bg-elevated: #171717;
@@ -117,17 +101,132 @@ var GLOBAL_STYLES = `
     --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-full: 9999px;
     --font-sans: system-ui, -apple-system, sans-serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-    position: fixed; inset: 0; display: flex; flex-direction: column;
-    color: var(--sz-text); background: var(--sz-bg); overflow: hidden;
+    flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px;
+    color: var(--sz-text); background: var(--sz-bg); overflow: auto;
   }
-  .flow-szenen-shell__header { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 8px 16px; background: #050505; border-bottom: 1px solid var(--sz-border); }
-  .flow-szenen-shell__header button { min-height: 36px; background: var(--sz-elevated); border-color: var(--sz-border); }
-  .flow-szenen-shell__header div { display: grid; gap: 2px; }
-  .flow-szenen-shell__header small { color: var(--sz-muted); font-family: monospace; }
-  .flow-szenen-shell__content { flex: 1; min-height: 0; padding: 16px; overflow: auto; }
-  @media (max-width: 760px) { .flow-szenen-shell__content { padding: 8px; } }
+  .flow-szenen-pane--empty { align-items: center; justify-content: center; text-align: center; color: var(--sz-muted); font-size: 12px; }
+  @media (max-width: 760px) { .flow-szenen-pane { padding: 8px; } }
 ` + SZENEN_VIEW_STYLES;
 
+// src/lib/metadata.ts
+var crcTable = (() => {
+  let c;
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    c = n;
+    for (let k = 0; k < 8; k++) {
+      c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+    }
+    table[n] = c;
+  }
+  return table;
+})();
+function calculateCRC(bytes) {
+  let crc = 4294967295;
+  for (let i = 0; i < bytes.length; i++) {
+    crc = crcTable[(crc ^ bytes[i]) & 255] ^ crc >>> 8;
+  }
+  return (crc ^ 4294967295) >>> 0;
+}
+function indexOfBytes(buffer, search, start = 0) {
+  for (let i = start; i <= buffer.length - search.length; i++) {
+    let found = true;
+    for (let j = 0; j < search.length; j++) {
+      if (buffer[i + j] !== search[j]) {
+        found = false;
+        break;
+      }
+    }
+    if (found) return i;
+  }
+  return -1;
+}
+function createXMPPacket(prompt, seed, model, id, tags = [], hierarchy) {
+  const sanitize = (str) => (str || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  const escPrompt = sanitize(prompt);
+  const escModel = sanitize(model || "AI Model");
+  const escHierarchy = sanitize(hierarchy || "");
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const allTags = [.../* @__PURE__ */ new Set([...tags, "Avatar Architect", escModel])];
+  const rdfTags = allTags.map((t) => `<rdf:li>${sanitize(t)}</rdf:li>`).join("");
+  const BOM = "\uFEFF";
+  return `<?xpacket begin="${BOM}" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140">
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <rdf:Description rdf:about=""
+    xmlns:xmp="http://ns.adobe.com/xap/1.0/"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/"
+    xmlns:ai="http://ns.flow.creative/ai/1.0/">
+   <dc:format>image/png</dc:format>
+   <dc:description><rdf:Alt><rdf:li xml:lang="x-default">${escPrompt}</rdf:li></rdf:Alt></dc:description>
+   <dc:subject><rdf:Bag>${rdfTags}</rdf:Bag></dc:subject>
+   <photoshop:Instructions>Seed: ${seed} | Model: ${escModel}</photoshop:Instructions>
+   <xmp:CreateDate>${timestamp}</xmp:CreateDate>
+   <ai:prompt>${escPrompt}</ai:prompt>
+   <ai:seed>${seed ?? "0"}</ai:seed>
+   <ai:model>${escModel}</ai:model>
+   <ai:hierarchy>${escHierarchy}</ai:hierarchy>
+  </rdf:Description>
+ </rdf:RDF>
+</x:xmpmeta>${" ".repeat(1024)}<?xpacket end="w"?>`;
+}
+function bytesToBase64(bytes) {
+  let binary = "";
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+function base64ToBytes(base64) {
+  const clean = base64.includes(",") ? base64.split(",")[1] : base64.trim();
+  try {
+    const binary = atob(clean);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return bytes;
+  } catch (e) {
+    return new Uint8Array(0);
+  }
+}
+function injectXMPMetadata(base64, prompt, seed, model, id, tags = [], hierarchy) {
+  try {
+    const bytes = base64ToBytes(base64);
+    if (bytes.length < 8 || bytes[0] !== 137 || bytes[1] !== 80) {
+      console.warn("Metadaten-Injektion \xFCbersprungen: Datei ist kein PNG.");
+      return base64;
+    }
+    const xmpData = createXMPPacket(prompt, seed, model, id, tags, hierarchy);
+    const encoder = new TextEncoder();
+    const keyword = encoder.encode("XML:com.adobe.xmp");
+    const textBytes = encoder.encode(xmpData);
+    const chunkData = new Uint8Array(keyword.length + 5 + textBytes.length);
+    chunkData.set(keyword, 0);
+    chunkData.set(textBytes, keyword.length + 5);
+    const type = encoder.encode("iTXt");
+    const crcInput = new Uint8Array(type.length + chunkData.length);
+    crcInput.set(type, 0);
+    crcInput.set(chunkData, type.length);
+    const crc = calculateCRC(crcInput);
+    const fullChunk = new Uint8Array(4 + 4 + chunkData.length + 4);
+    const view = new DataView(fullChunk.buffer);
+    view.setUint32(0, chunkData.length);
+    fullChunk.set(type, 4);
+    fullChunk.set(chunkData, 8);
+    view.setUint32(8 + chunkData.length, crc);
+    const IDAT = encoder.encode("IDAT");
+    const idatPos = indexOfBytes(bytes, IDAT);
+    const insertPos = idatPos !== -1 ? idatPos - 4 : 8;
+    const result = new Uint8Array(bytes.length + fullChunk.length);
+    result.set(bytes.slice(0, insertPos), 0);
+    result.set(fullChunk, insertPos);
+    result.set(bytes.slice(insertPos), insertPos + fullChunk.length);
+    return bytesToBase64(result);
+  } catch (e) {
+    console.error("Fehler beim Einbetten der Metadaten:", e);
+    return base64;
+  }
+}
+
 // src/lib/aiHelpers.ts
 function buildGenerationPrompt(hierarchyText, mode = "creative") {
   const safe = hierarchyText.length > 2500 ? hierarchyText.slice(0, 2500) + "..." : hierarchyText;
@@ -1446,7 +1545,7 @@ function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMove
 }
 
 // src/components/AvatarArchitectApp.tsx
-import { useState as useState25, useCallback as useCallback4, useMemo as useMemo6, useEffect as useEffect10, useRef as useRef11 } from "react";
+import { useState as useState25, useCallback as useCallback4, useMemo as useMemo6, useEffect as useEffect9, useRef as useRef10 } from "react";
 
 // src/components/PromptTab.tsx
 import { useRef as useRef5, useState as useState8 } from "react";
@@ -2033,374 +2132,50 @@ var TaskExecutor = ({ openTasks, onExecute, onTaskCompleted }) => {
   ] });
 };
 
-// src/components/ProjectSyncTab.tsx
-import { useRef as useRef7, useState as useState10, useEffect as useEffect6 } from "react";
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-var ProjectSyncTab = ({
-  topSlot,
-  onProjectExport,
-  onProjectImport,
-  onWorkspaceImport,
-  projectActionState,
-  serverProjects,
-  onServerSave,
-  onServerLoad,
-  onServerDelete,
-  onRefreshServerProjects,
-  onComputeSyncDiff,
-  onExecuteSync,
-  hfToken,
-  onHfLoad,
-  onProjectExportBase64,
-  onHfInitialSync
-}) => {
-  const projectInputRef = useRef7(null);
-  const workspaceInputRef = useRef7(null);
-  const [saveName, setSaveName] = useState10("");
-  const [isSaving, setIsSaving] = useState10(false);
-  const [isExporting, setIsExporting] = useState10(false);
-  const [syncState, setSyncState] = useState10("idle");
-  const [syncDiff, setSyncDiff] = useState10(null);
-  const [selectedLocalIds, setSelectedLocalIds] = useState10(/* @__PURE__ */ new Set());
-  const handleExport = async () => {
-    if (!onProjectExport) return;
-    setIsExporting(true);
-    try {
-      await onProjectExport();
-    } finally {
-      setIsExporting(false);
-    }
-  };
-  const handleComputeDiff = async () => {
-    if (!onComputeSyncDiff) return;
-    setSyncState("computing");
-    setSyncDiff(null);
-    try {
-      const diff = await onComputeSyncDiff();
-      setSyncDiff(diff);
-      setSelectedLocalIds(new Set(diff.localOnly.map((g) => g.id)));
-      setSyncState("ready");
-    } catch {
-      setSyncState("error");
-      setTimeout(() => setSyncState("idle"), 4e3);
-    }
-  };
-  const handleExecuteSync = async () => {
-    if (!onExecuteSync || !syncDiff) return;
-    setSyncState("executing");
-    try {
-      await onExecuteSync([...selectedLocalIds]);
-      setSyncState("done");
-      setSyncDiff(null);
-      setTimeout(() => setSyncState("idle"), 3e3);
-    } catch {
-      setSyncState("error");
-      setTimeout(() => setSyncState("idle"), 4e3);
-    }
-  };
-  const toggleLocalId = (id) => {
-    setSelectedLocalIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-  const isWorking = projectActionState === "working" || projectActionState === "working-full";
-  const [hfProjects, setHfProjects] = useState10([]);
-  const [hfLoading, setHfLoading] = useState10(false);
-  const [hfSaving, setHfSaving] = useState10(false);
-  const [hfError, setHfError] = useState10(null);
-  const [hfSaveName, setHfSaveName] = useState10("");
-  const [hfSyncProgress, setHfSyncProgress] = useState10(null);
-  const [hfSyncing, setHfSyncing] = useState10(false);
-  const loadHfProjects = async (token) => {
-    setHfLoading(true);
-    setHfError(null);
-    try {
-      setHfProjects(await hfListProjects(token));
-    } catch (e) {
-      setHfError(e.message);
-    } finally {
-      setHfLoading(false);
-    }
-  };
-  useEffect6(() => {
-    if (hfToken) loadHfProjects(hfToken);
-  }, [hfToken]);
+// src/components/HfMediaSyncTab.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var HfMediaSyncTab = ({ topSlot, onHfInitialSync }) => {
+  const [error, setError] = useState10(null);
+  const [progress, setProgress] = useState10(null);
+  const [syncing, setSyncing] = useState10(false);
   return /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 overflow-y-auto dark-scrollbar", children: /* @__PURE__ */ jsxs13("div", { className: "p-6 flex flex-col gap-8", children: [
     topSlot && /* @__PURE__ */ jsx15("div", { children: topSlot }),
-    (onProjectExport || onProjectImport || onWorkspaceImport) && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx15(SectionLabel, { children: "Projekt-ZIP" }),
+    onHfInitialSync && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx15(SectionLabel, { children: "Hugging Face" }),
       /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
-        onProjectExport && /* @__PURE__ */ jsx15(PillButton, { variant: "filled", icon: "download", loading: isExporting || isWorking, onClick: handleExport, children: "Exportieren (.zip)" }),
-        onProjectImport && /* @__PURE__ */ jsxs13(Fragment5, { children: [
-          /* @__PURE__ */ jsx15(PillButton, { variant: "outline", icon: "upload", onClick: () => projectInputRef.current?.click(), children: "ZIP laden" }),
-          /* @__PURE__ */ jsx15(
-            "input",
-            {
-              ref: projectInputRef,
-              type: "file",
-              accept: ".zip",
-              className: "hidden",
-              onChange: (e) => {
-                const f = e.target.files?.[0];
-                if (f) onProjectImport(f);
-                e.target.value = "";
-              }
-            }
-          )
-        ] })
-      ] }),
-      onWorkspaceImport && /* @__PURE__ */ jsxs13(Fragment5, { children: [
-        /* @__PURE__ */ jsx15(PillButton, { variant: "outline", icon: "upload_file", onClick: () => workspaceInputRef.current?.click(), children: "Tags laden (.json)" }),
-        /* @__PURE__ */ jsx15(
-          "input",
-          {
-            ref: workspaceInputRef,
-            type: "file",
-            accept: ".json",
-            className: "hidden",
-            onChange: (e) => {
-              const f = e.target.files?.[0];
-              if (f) onWorkspaceImport(f);
-              e.target.value = "";
-            }
-          }
-        )
-      ] })
-    ] }),
-    (onServerSave || serverProjects || onServerDelete) && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx15(SectionLabel, { children: "Server-Speicher" }),
-      onServerSave && /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx15(
-          "input",
-          {
-            type: "text",
-            value: saveName,
-            onChange: (e) => setSaveName(e.target.value),
-            placeholder: "Name (optional)",
-            className: "flex-1 bg-white/5 border border-white/10 rounded-xl px-3 text-[12px] text-white/70 outline-none placeholder:text-white/20",
-            style: { height: 40 }
-          }
-        ),
-        /* @__PURE__ */ jsx15(
-          PillButton,
-          {
-            variant: "filled",
-            icon: "cloud_upload",
-            loading: isSaving,
-            onClick: async () => {
-              setIsSaving(true);
-              try {
-                await onServerSave(saveName || void 0);
-                setSaveName("");
-                await onRefreshServerProjects?.();
-              } finally {
-                setIsSaving(false);
-              }
-            },
-            children: "Speichern"
-          }
-        )
-      ] }),
-      (!serverProjects || serverProjects.length === 0) && /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-white/20 px-2", children: "Noch nichts gespeichert." }),
-      serverProjects && serverProjects.length > 0 && /* @__PURE__ */ jsx15("div", { className: "flex flex-col gap-1", children: serverProjects.map((p) => /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-white/5 border border-white/5", children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx15("p", { className: "text-[11px] text-white/70 font-bold truncate", children: p.name }),
-          /* @__PURE__ */ jsxs13("p", { className: "text-[9px] text-white/25", children: [
-            new Date(p.saved_at).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }),
-            " \xB7 ",
-            (p.size / 1024).toFixed(0),
-            " KB"
-          ] })
-        ] }),
-        onServerLoad && /* @__PURE__ */ jsx15("button", { onClick: () => onServerLoad(p.id), className: "w-8 h-8 flex items-center justify-center text-white/30 active:text-white transition-colors", children: /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[18px]", children: "cloud_download" }) }),
-        /* @__PURE__ */ jsx15("button", { onClick: () => onServerDelete?.(p.id), className: "w-8 h-8 flex items-center justify-center text-white/20 active:text-red-400 transition-colors", children: /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[18px]", children: "delete" }) })
-      ] }, p.id)) })
-    ] }),
-    hfToken && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx15(SectionLabel, { children: "Hugging Face" }),
-        /* @__PURE__ */ jsx15("button", { onClick: () => loadHfProjects(hfToken), className: "text-white/30 hover:text-white/60 transition", children: /* @__PURE__ */ jsx15("span", { className: `material-symbols-outlined text-[18px]${hfLoading ? " animate-spin" : ""}`, children: "refresh" }) })
-      ] }),
-      onProjectExportBase64 && /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx15(
-          "input",
-          {
-            type: "text",
-            value: hfSaveName,
-            onChange: (e) => setHfSaveName(e.target.value),
-            placeholder: "Name (optional)",
-            className: "flex-1 bg-white/5 border border-white/10 rounded-xl px-3 text-[12px] text-white/70 outline-none placeholder:text-white/20",
-            style: { height: 40 }
-          }
-        ),
-        /* @__PURE__ */ jsx15(
-          PillButton,
-          {
-            variant: "filled",
-            icon: "cloud_upload",
-            loading: hfSaving,
-            onClick: async () => {
-              if (!onProjectExportBase64) return;
-              setHfSaving(true);
-              setHfError(null);
-              try {
-                const base64 = await onProjectExportBase64();
-                const name = hfSaveName.trim() || `project_${(/* @__PURE__ */ new Date()).toISOString().slice(0, 16).replace("T", "_").replace(":", "")}`;
-                await hfUploadProjectForm(base64, name, hfToken);
-                setHfSaveName("");
-                await loadHfProjects(hfToken);
-              } catch (e) {
-                setHfError(e.message);
-              } finally {
-                setHfSaving(false);
-              }
-            },
-            children: "Speichern"
-          }
-        )
-      ] }),
-      onHfInitialSync && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx15(
           PillButton,
           {
             variant: "outline",
             icon: "cloud_sync",
-            loading: hfSyncing,
+            loading: syncing,
             onClick: async () => {
-              setHfSyncing(true);
-              setHfError(null);
-              setHfSyncProgress({ done: 0, total: 0 });
+              setSyncing(true);
+              setError(null);
+              setProgress({ done: 0, total: 0 });
               try {
-                await onHfInitialSync((done, total) => setHfSyncProgress({ done, total }));
-                setHfSyncProgress(null);
+                await onHfInitialSync((done, total) => setProgress({ done, total }));
+                setProgress(null);
               } catch (e) {
-                setHfError(e.message);
-                setHfSyncProgress(null);
+                setError(e instanceof Error ? e.message : String(e));
+                setProgress(null);
               } finally {
-                setHfSyncing(false);
+                setSyncing(false);
               }
             },
-            children: hfSyncing && hfSyncProgress ? `${hfSyncProgress.done} / ${hfSyncProgress.total} Bilder` : "Initial-Sync nach HF"
+            children: syncing && progress ? `${progress.done} / ${progress.total} Bilder` : "Initial-Sync nach HF"
           }
         ),
-        hfSyncing && hfSyncProgress && hfSyncProgress.total > 0 && /* @__PURE__ */ jsx15("div", { className: "w-full h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx15(
+        syncing && progress && progress.total > 0 && /* @__PURE__ */ jsx15("div", { className: "w-full h-1 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx15(
           "div",
           {
             className: "h-full bg-blue-400 rounded-full transition-all",
-            style: { width: `${Math.round(hfSyncProgress.done / hfSyncProgress.total * 100)}%` }
+            style: { width: `${Math.round(progress.done / progress.total * 100)}%` }
           }
         ) })
       ] }),
-      hfError && /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-red-400 font-mono px-1", children: hfError }),
-      !hfLoading && hfProjects.length === 0 && /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-white/20 px-2", children: "Noch nichts auf HF gespeichert." }),
-      hfProjects.map((p) => /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-white/5 border border-white/5", children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx15("p", { className: "text-[11px] text-white/70 font-bold truncate", children: p.name }),
-          /* @__PURE__ */ jsxs13("p", { className: "text-[9px] text-white/25", children: [
-            (p.size / 1024 / 1024).toFixed(1),
-            " MB",
-            p.isLfs ? " \xB7 LFS" : ""
-          ] })
-        ] }),
-        onHfLoad && /* @__PURE__ */ jsx15(
-          "button",
-          {
-            onClick: async () => {
-              try {
-                const { hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-W7KO2FOH.mjs");
-                const file = await hfDownloadProject2(p.path, hfToken);
-                onHfLoad(file);
-              } catch (e) {
-                setHfError(e.message);
-              }
-            },
-            className: "w-8 h-8 flex items-center justify-center text-white/30 active:text-white transition-colors",
-            children: /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[18px]", children: "cloud_download" })
-          }
-        ),
-        /* @__PURE__ */ jsx15(
-          "button",
-          {
-            onClick: async () => {
-              if (!confirm(`"${p.name}" auf HF l\xF6schen?`)) return;
-              try {
-                await hfDeleteProject(p.path, hfToken);
-                await loadHfProjects(hfToken);
-              } catch (e) {
-                setHfError(e.message);
-              }
-            },
-            className: "w-8 h-8 flex items-center justify-center text-white/20 active:text-red-400 transition-colors",
-            children: /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[18px]", children: "delete" })
-          }
-        )
-      ] }, p.id))
-    ] }),
-    onComputeSyncDiff && onExecuteSync && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx15(SectionLabel, { children: "Sync" }),
-      (syncState === "idle" || syncState === "computing") && /* @__PURE__ */ jsx15(PillButton, { variant: "outline", icon: "compare_arrows", loading: syncState === "computing", onClick: handleComputeDiff, children: "Diff berechnen" }),
-      syncState === "done" && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 px-2 text-[11px] text-green-400", children: [
-        /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[16px]", children: "check_circle" }),
-        "Sync abgeschlossen"
-      ] }),
-      syncState === "error" && /* @__PURE__ */ jsx15("p", { className: "text-[11px] text-red-400 px-2", children: "Fehler beim Sync." }),
-      syncDiff && (syncState === "ready" || syncState === "executing") && /* @__PURE__ */ jsxs13(Fragment5, { children: [
-        syncDiff.localOnly.length === 0 && syncDiff.serverOnly.length === 0 && /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-white/30 px-2", children: "Alles synchron \u2014 keine Unterschiede." }),
-        syncDiff.localOnly.length > 0 && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs13("p", { className: "text-[9px] text-white/30 uppercase tracking-widest px-1 font-bold", children: [
-            "Nur lokal (",
-            syncDiff.localOnly.length,
-            ")"
-          ] }),
-          syncDiff.localOnly.map((gen) => /* @__PURE__ */ jsxs13(
-            "button",
-            {
-              onClick: () => toggleLocalId(gen.id),
-              className: `flex items-center gap-3 px-3 py-2 rounded-xl border transition-all text-left ${selectedLocalIds.has(gen.id) ? "bg-blue-500/10 border-blue-500/30" : "bg-white/3 border-white/5 opacity-60"}`,
-              children: [
-                /* @__PURE__ */ jsx15("div", { className: `w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${selectedLocalIds.has(gen.id) ? "bg-blue-500 border-blue-500" : "border-white/20"}`, children: selectedLocalIds.has(gen.id) && /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined text-[11px] text-white", children: "check" }) }),
-                gen.base64 && /* @__PURE__ */ jsx15("img", { src: gen.base64, className: "w-10 h-10 rounded object-cover flex-shrink-0" }),
-                /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-white/60 truncate", children: gen.prompt || "Kein Prompt" }),
-                  /* @__PURE__ */ jsx15("p", { className: "text-[9px] text-white/25", children: new Date(gen.timestamp).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }) })
-                ] })
-              ]
-            },
-            gen.id
-          ))
-        ] }),
-        syncDiff.serverOnly.length > 0 && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs13("p", { className: "text-[9px] text-white/30 uppercase tracking-widest px-1 font-bold", children: [
-            "Nur auf Server (",
-            syncDiff.serverOnly.length,
-            ")"
-          ] }),
-          syncDiff.serverOnly.map((gen) => /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 px-3 py-2 rounded-xl bg-white/3 border border-white/5 opacity-40", children: [
-            gen.base64 && /* @__PURE__ */ jsx15("img", { src: gen.base64, className: "w-10 h-10 rounded object-cover flex-shrink-0" }),
-            /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-white/60 truncate", children: gen.prompt || "Kein Prompt" }),
-              /* @__PURE__ */ jsx15("p", { className: "text-[9px] text-white/25", children: new Date(gen.timestamp).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" }) })
-            ] })
-          ] }, gen.id))
-        ] }),
-        (syncDiff.localOnly.length > 0 || syncDiff.serverOnly.length > 0) && /* @__PURE__ */ jsxs13(
-          PillButton,
-          {
-            variant: "solid",
-            icon: "sync",
-            loading: syncState === "executing",
-            disabled: selectedLocalIds.size === 0,
-            onClick: handleExecuteSync,
-            children: [
-              selectedLocalIds.size,
-              " \xFCbertragen"
-            ]
-          }
-        )
-      ] })
+      error && /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-red-400 font-mono px-1", children: error })
     ] })
   ] }) });
 };
@@ -2532,7 +2307,7 @@ function toPromptImages(images) {
 }
 
 // src/hooks/useHFState.ts
-import { useState as useState11, useEffect as useEffect7, useRef as useRef8, useCallback } from "react";
+import { useState as useState11, useEffect as useEffect6, useRef as useRef7, useCallback } from "react";
 
 // src/lib/hfDag.ts
 function buildDag(events) {
@@ -2622,9 +2397,9 @@ function useHFState(token, namespace) {
   const [pendingBufferCount, setPendingBufferCount] = useState11(readOfflineBuffer().length);
   const [lastEventTs, setLastEventTs] = useState11(0);
   const [hasStateZip, setHasStateZip] = useState11(false);
-  const knownEventPaths = useRef8(/* @__PURE__ */ new Set());
-  const knownFilePaths = useRef8(/* @__PURE__ */ new Set());
-  const allEventsRef = useRef8([]);
+  const knownEventPaths = useRef7(/* @__PURE__ */ new Set());
+  const knownFilePaths = useRef7(/* @__PURE__ */ new Set());
+  const allEventsRef = useRef7([]);
   const applyNewEvents = useCallback((snapshot, newEvents) => {
     if (!newEvents.length && allEventsRef.current.length === 0) {
       setEventCount(0);
@@ -2701,10 +2476,10 @@ function useHFState(token, namespace) {
     } catch {
     }
   }, [token, namespace, state, applyNewEvents]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (token && namespace) loadFull();
   }, [token, namespace]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!token || !namespace) return;
     const id = setInterval(pollNew, POLL_INTERVAL_MS);
     return () => clearInterval(id);
@@ -2759,7 +2534,7 @@ function useHFState(token, namespace) {
 }
 
 // src/hooks/useTagBase.ts
-import { useState as useState12, useEffect as useEffect8, useCallback as useCallback2, useRef as useRef9 } from "react";
+import { useState as useState12, useEffect as useEffect7, useCallback as useCallback2, useRef as useRef8 } from "react";
 
 // src/lib/hfTagBaseService.ts
 import JSZip from "jszip";
@@ -2895,13 +2670,13 @@ function useTagBase(token, namespace) {
   const [selectedContextId, setSelectedContextId] = useState12(() => readStoredId(CONTEXT_ID_KEY));
   const [pickerMessage, setPickerMessage] = useState12(null);
   const [pendingTags, setPendingTags] = useState12([]);
-  const pendingIdCounter = useRef9(-1);
-  const selectedUserIdRef = useRef9(selectedUserId);
-  const selectedContextIdRef = useRef9(selectedContextId);
-  useEffect8(() => {
+  const pendingIdCounter = useRef8(-1);
+  const selectedUserIdRef = useRef8(selectedUserId);
+  const selectedContextIdRef = useRef8(selectedContextId);
+  useEffect7(() => {
     selectedUserIdRef.current = selectedUserId;
   }, [selectedUserId]);
-  useEffect8(() => {
+  useEffect7(() => {
     selectedContextIdRef.current = selectedContextId;
   }, [selectedContextId]);
   const load = useCallback2(async () => {
@@ -2946,7 +2721,7 @@ function useTagBase(token, namespace) {
       setIsLoading(false);
     }
   }, [token, namespace]);
-  useEffect8(() => {
+  useEffect7(() => {
     load();
   }, [load]);
   const selectUser = useCallback2((userId) => {
@@ -3045,7 +2820,7 @@ import { useState as useState15 } from "react";
 
 // src/components/labs/LabImagePicker.tsx
 import { useState as useState13 } from "react";
-import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var LabImagePicker = ({
   availableItems,
   recentItems,
@@ -3142,7 +2917,7 @@ var LabImagePicker = ({
       }
     ) }),
     /* @__PURE__ */ jsxs14("div", { className: "flex-1 overflow-y-auto dark-scrollbar px-3 pb-3", children: [
-      recentItems.length > 0 && !search && /* @__PURE__ */ jsxs14(Fragment6, { children: [
+      recentItems.length > 0 && !search && /* @__PURE__ */ jsxs14(Fragment5, { children: [
         /* @__PURE__ */ jsx16("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/30 mb-2 mt-1", children: "Zuletzt verwendet" }),
         /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-3 gap-2 mb-4", children: recentItems.slice(0, 6).map(renderItemCard) }),
         /* @__PURE__ */ jsx16("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/30 mb-2", children: "Alle Bilder" })
@@ -3257,7 +3032,7 @@ function useGenerationSettings() {
 }
 
 // src/components/labs/LabRemix.tsx
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var LabRemix = ({ services, onResult }) => {
   const [showPicker, setShowPicker] = useState15(false);
   const [selected, setSelected] = useState15(null);
@@ -3413,10 +3188,10 @@ var LabRemix = ({ services, onResult }) => {
         onClick: handleGeneratePrompt,
         disabled: !selected || !instruction.trim() || isGeneratingPrompt,
         className: "w-full py-3 rounded-xl bg-white/10 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-white/15 flex items-center justify-center gap-2",
-        children: isGeneratingPrompt ? /* @__PURE__ */ jsxs16(Fragment7, { children: [
+        children: isGeneratingPrompt ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
           /* @__PURE__ */ jsx18("div", { className: "w-3 h-3 border-t border-white rounded-full animate-spin" }),
           /* @__PURE__ */ jsx18("span", { children: "Generiere Prompt..." })
-        ] }) : /* @__PURE__ */ jsxs16(Fragment7, { children: [
+        ] }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
           /* @__PURE__ */ jsx18("span", { className: "material-symbols-outlined text-[16px]", children: "auto_fix_high" }),
           /* @__PURE__ */ jsx18("span", { children: "Prompt generieren" })
         ] })
@@ -3463,7 +3238,7 @@ var LabRemix = ({ services, onResult }) => {
 
 // src/components/labs/LabBlend.tsx
 import { useState as useState16 } from "react";
-import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var LabBlend = ({ services, onResult }) => {
   const [showPickerFor, setShowPickerFor] = useState16(null);
   const [selectedImages, setSelectedImages] = useState16([]);
@@ -3558,7 +3333,7 @@ var LabBlend = ({ services, onResult }) => {
     /* @__PURE__ */ jsx19("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40", children: "Bilder" }),
     selectedImages.map((img, i) => /* @__PURE__ */ jsxs17("div", { className: "flex gap-3 p-3 rounded-xl border border-white/10 bg-white/5", children: [
       /* @__PURE__ */ jsx19("span", { className: "text-[10px] font-bold text-white/40 w-6 shrink-0 pt-1", children: autoLabel(i) }),
-      img ? /* @__PURE__ */ jsxs17(Fragment8, { children: [
+      img ? /* @__PURE__ */ jsxs17(Fragment7, { children: [
         /* @__PURE__ */ jsx19("img", { src: img.frame.base64, className: "w-12 h-12 object-cover rounded-lg shrink-0", onClick: () => setShowPickerFor(i) }),
         /* @__PURE__ */ jsxs17("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
           /* @__PURE__ */ jsx19("p", { className: "text-[10px] text-white/50 line-clamp-1", children: img.item.prompt }),
@@ -3624,10 +3399,10 @@ var LabBlend = ({ services, onResult }) => {
         onClick: handleGeneratePrompt,
         disabled: selectedImages.filter(Boolean).length < 2 || !instruction.trim() || isGeneratingPrompt,
         className: "w-full py-3 rounded-xl bg-white/10 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-white/15 flex items-center justify-center gap-2",
-        children: isGeneratingPrompt ? /* @__PURE__ */ jsxs17(Fragment8, { children: [
+        children: isGeneratingPrompt ? /* @__PURE__ */ jsxs17(Fragment7, { children: [
           /* @__PURE__ */ jsx19("div", { className: "w-3 h-3 border-t border-white rounded-full animate-spin" }),
           /* @__PURE__ */ jsx19("span", { children: "Blend l\xE4uft..." })
-        ] }) : /* @__PURE__ */ jsxs17(Fragment8, { children: [
+        ] }) : /* @__PURE__ */ jsxs17(Fragment7, { children: [
           /* @__PURE__ */ jsx19("span", { className: "material-symbols-outlined text-[16px]", children: "merge" }),
           /* @__PURE__ */ jsx19("span", { children: "Prompts blenden" })
         ] })
@@ -3674,7 +3449,7 @@ var LabBlend = ({ services, onResult }) => {
 
 // src/components/labs/LabCompare.tsx
 import { useState as useState17 } from "react";
-import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var LabCompare = ({ services, onResult }) => {
   const [showPickerFor, setShowPickerFor] = useState17(null);
   const [selectedImages, setSelectedImages] = useState17([]);
@@ -3756,7 +3531,7 @@ var LabCompare = ({ services, onResult }) => {
     /* @__PURE__ */ jsx20("p", { className: "text-[9px] font-bold uppercase tracking-widest text-white/40", children: "Bilder zum Vergleichen" }),
     selectedImages.map((img, i) => /* @__PURE__ */ jsxs18("div", { className: "flex gap-3 p-3 rounded-xl border border-white/10 bg-white/5", children: [
       /* @__PURE__ */ jsx20("span", { className: "text-[10px] font-bold text-white/40 w-6 shrink-0 pt-1", children: autoLabel(i) }),
-      img ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
+      img ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
         /* @__PURE__ */ jsx20("img", { src: img.frame.base64, className: "w-12 h-12 object-cover rounded-lg shrink-0 cursor-pointer", onClick: () => setShowPickerFor(i) }),
         /* @__PURE__ */ jsxs18("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
           /* @__PURE__ */ jsx20("p", { className: "text-[10px] text-white/50 line-clamp-1", children: img.item.prompt }),
@@ -3800,10 +3575,10 @@ var LabCompare = ({ services, onResult }) => {
         onClick: handleAnalyze,
         disabled: selectedImages.filter(Boolean).length < 1 || !instruction.trim() || isAnalyzing,
         className: "w-full py-3 rounded-xl bg-white/10 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-white/15 flex items-center justify-center gap-2",
-        children: isAnalyzing ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
+        children: isAnalyzing ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
           /* @__PURE__ */ jsx20("div", { className: "w-3 h-3 border-t border-white rounded-full animate-spin" }),
           /* @__PURE__ */ jsx20("span", { children: "Analysiere..." })
-        ] }) : /* @__PURE__ */ jsxs18(Fragment9, { children: [
+        ] }) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
           /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[16px]", children: "compare" }),
           /* @__PURE__ */ jsx20("span", { children: "Analysieren" })
         ] })
@@ -3830,10 +3605,10 @@ var LabCompare = ({ services, onResult }) => {
             onClick: handleGenerateImage,
             disabled: !generatedPrompt.trim() || isGeneratingImage,
             className: "w-full mt-2 py-3 rounded-xl bg-blue-600/80 text-white font-bold text-[12px] uppercase tracking-wide disabled:opacity-30 active:bg-blue-600 flex items-center justify-center gap-2",
-            children: isGeneratingImage ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
+            children: isGeneratingImage ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
               /* @__PURE__ */ jsx20("div", { className: "w-3 h-3 border-t border-white rounded-full animate-spin" }),
               /* @__PURE__ */ jsx20("span", { children: "Generiere..." })
-            ] }) : /* @__PURE__ */ jsxs18(Fragment9, { children: [
+            ] }) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
               /* @__PURE__ */ jsx20("span", { className: "material-symbols-outlined text-[16px]", children: "image" }),
               /* @__PURE__ */ jsx20("span", { children: "Bild generieren" })
             ] })
@@ -4017,7 +3792,7 @@ var LabLoop = ({ services, onResult }) => {
 };
 
 // src/components/labs/LabFrameExtractor.tsx
-import { useRef as useRef10, useState as useState19, useCallback as useCallback3 } from "react";
+import { useRef as useRef9, useState as useState19, useCallback as useCallback3 } from "react";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var formatTime = (s) => {
   const m = Math.floor(s / 60);
@@ -4031,9 +3806,9 @@ var LabFrameExtractor = ({
   onResult,
   resolveVideoUrl
 }) => {
-  const videoRef = useRef10(null);
-  const canvasRef = useRef10(null);
-  const cancelledRef = useRef10(false);
+  const videoRef = useRef9(null);
+  const canvasRef = useRef9(null);
+  const cancelledRef = useRef9(false);
   const [selectedItem, setSelectedItem] = useState19(null);
   const [videoSrc, setVideoSrc] = useState19(null);
   const [videoReady, setVideoReady] = useState19(false);
@@ -5425,7 +5200,7 @@ function HFTestTab({ token, namespace, galleryItems, allEvents = [], confirmedEv
 }
 
 // src/components/ServerTab.tsx
-import { useState as useState23, useEffect as useEffect9 } from "react";
+import { useState as useState23, useEffect as useEffect8 } from "react";
 import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 function StarRating({ rating = 0 }) {
   return /* @__PURE__ */ jsx27("div", { className: "flex gap-[2px]", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx27("span", { className: `material-symbols-outlined text-[12px] ${i <= rating ? "text-yellow-400" : "text-white/15"}`, children: "star" }, i)) });
@@ -5452,7 +5227,7 @@ function ServerTab({ serverBaseUrl }) {
   const [libError, setLibError] = useState23(null);
   const [activeTag, setActiveTag] = useState23(null);
   const [preview, setPreview] = useState23(null);
-  useEffect9(() => {
+  useEffect8(() => {
     if (!serverBaseUrl) return;
     setUsersLoading(true);
     setUsersError(null);
@@ -5604,7 +5379,7 @@ function ServerTab({ serverBaseUrl }) {
 
 // src/components/FlowWorkspacePicker.tsx
 import { useMemo as useMemo5, useState as useState24 } from "react";
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function FlowWorkspacePicker({
   tagBase,
   selectedUserId,
@@ -5646,7 +5421,7 @@ function FlowWorkspacePicker({
         tagBase.meta.version,
         " enth\xE4lt keine Benutzer."
       ] })
-    ] }) : /* @__PURE__ */ jsxs26(Fragment10, { children: [
+    ] }) : /* @__PURE__ */ jsxs26(Fragment9, { children: [
       /* @__PURE__ */ jsx28("button", { className: "flow-workspace-picker__back", type: "button", onClick: back, children: "\u2190 Anderen Benutzer w\xE4hlen" }),
       /* @__PURE__ */ jsxs26("div", { className: "flow-workspace-picker__choices", "aria-label": "Kontext w\xE4hlen", children: [
         contexts.map((context) => /* @__PURE__ */ jsxs26("button", { type: "button", onClick: () => onSelectContext(context.id), children: [
@@ -5725,9 +5500,9 @@ function resolveBootstrapTarget(input) {
 }
 
 // src/components/AvatarArchitectApp.tsx
-import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
-function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, requireWorkspaceSelection = false, serverBaseUrl, onFetchServerProjects, onServerSave, onServerLoad, onServerDelete }) {
-  useEffect10(() => {
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
+function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onSelectMedia, buildInfo, initialHfToken, hfNamespace, allowDevNamespace, requireWorkspaceSelection = false, serverBaseUrl }) {
+  useEffect9(() => {
     const id = "flow-styles";
     if (!document.getElementById(id)) {
       const style = document.createElement("style");
@@ -5737,7 +5512,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     }
   }, []);
   const [showStart, setShowStart] = useState25(true);
-  const [showSzenen, setShowSzenen] = useState25(false);
   const [layoutChoice, setLayoutChoice] = useState25(() => {
     try {
       return localStorage.getItem("aa-layout") || null;
@@ -5745,10 +5519,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       return null;
     }
   });
-  const [projectLoaded, setProjectLoaded] = useState25(false);
   const [hfToken, setHfToken] = useState25(initialHfToken || "");
   const [hfTokenInput, setHfTokenInput] = useState25(initialHfToken || "");
-  const [isLoadingFromHF, setIsLoadingFromHF] = useState25(false);
   const [hfNamespaceLocal, setHfNamespaceLocal] = useState25(() => {
     try {
       return normalizeSelectableNamespace(localStorage.getItem("aa-hf-namespace"));
@@ -5758,7 +5530,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   });
   const [hfNamespaceFromServer, setHfNamespaceFromServer] = useState25(null);
   const [serverProbeFailed, setServerProbeFailed] = useState25(false);
-  useEffect10(() => {
+  useEffect9(() => {
     if (hfNamespace !== void 0 || !serverBaseUrl) return;
     fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
       if (typeof d.hfNamespace === "string" && d.hfNamespace) setHfNamespaceFromServer(d.hfNamespace);
@@ -5776,7 +5548,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     isStartDialogOpen: isDialogTarget && !targetConfirmed
   });
   const effectiveNamespace = bootstrapTarget.namespace ?? "";
-  const kontextRef = useRef11(null);
+  const kontextRef = useRef10(null);
   const szenenPort = useMemo6(() => hfToken && effectiveNamespace ? createFlowSzenenViewPort({
     generateText: onGeneratePrompt,
     token: hfToken,
@@ -5803,7 +5575,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const [bootstrapLog, setBootstrapLog] = useState25([]);
   const [isBootstrapping, setIsBootstrapping] = useState25(false);
   const [hfMissingImages, setHfMissingImages] = useState25([]);
-  const syncTopSlot = /* @__PURE__ */ jsxs27(Fragment11, { children: [
+  const syncTopSlot = /* @__PURE__ */ jsxs27(Fragment10, { children: [
     localOnlyCount > 0 && /* @__PURE__ */ jsxs27("div", { style: { background: "rgba(234,179,8,0.15)", border: "1px solid rgba(234,179,8,0.3)", padding: "4px 10px", fontSize: 11, color: "#fbbf24", borderRadius: 4, marginBottom: 4 }, children: [
       "\u26A0 ",
       localOnlyCount,
@@ -5852,7 +5624,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       bootstrapLog.length > 0 && /* @__PURE__ */ jsx29("div", { style: { marginTop: 6, fontFamily: "monospace", fontSize: 10, color: "#78716c", lineHeight: 1.6 }, children: bootstrapLog.map((l, i) => /* @__PURE__ */ jsx29("div", { children: l }, i)) })
     ] })
   ] });
-  const wsInputRef = useRef11(null);
   const startApp = (choice) => {
     try {
       localStorage.setItem("aa-layout", choice);
@@ -5866,11 +5637,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const [edges, setEdges] = useState25([]);
   const [history, setHistory] = useState25([]);
   const [galleryItems, setGalleryItems] = useState25([]);
-  const galleryItemsRef = useRef11([]);
-  useEffect10(() => {
+  const galleryItemsRef = useRef10([]);
+  useEffect9(() => {
     galleryItemsRef.current = galleryItems;
   }, [galleryItems]);
-  const hfImageNotFoundRef = useRef11(/* @__PURE__ */ new Map());
+  const hfImageNotFoundRef = useRef10(/* @__PURE__ */ new Map());
   const [galleryVisibleCount, setGalleryVisibleCount] = useState25(20);
   const [historyVisibleCount, setHistoryVisibleCount] = useState25(20);
   const loadThumbnailsForEntries = useCallback4(async (entries) => {
@@ -5892,7 +5663,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       }
     }
   }, [hfToken, effectiveNamespace]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!hfState) return;
     if (hfState.tags?.by_category) setWorkspaceTags(hfState.tags);
     const hfIds = new Set(hfState.metadata.map((m) => m.id));
@@ -5919,14 +5690,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       return [...localOnly, ...merged].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
     });
   }, [hfState]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!hfState) return;
     const sortedMeta = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
     const skeletons = sortedMeta.map((m) => ({ id: m.id, prompt: m.prompt, timestamp: m.timestamp, status: "done", nodeId: m.id, tags: m.tags || [] }));
     const repIds = new Set(groupByPrompt(skeletons).slice(0, galleryVisibleCount).map((g) => g.representative.id));
     loadThumbnailsForEntries(sortedMeta.filter((e) => repIds.has(e.id)));
   }, [hfState, galleryVisibleCount, loadThumbnailsForEntries]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!hfState) return;
     const sortedMeta = [...hfState.metadata].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
     loadThumbnailsForEntries(sortedMeta.slice(0, historyVisibleCount));
@@ -5987,11 +5758,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     }
   });
   const [isPromptCollapsed, setIsPromptCollapsed] = useState25(false);
-  const [projectActionState, setProjectActionState] = useState25("idle");
-  const syncServerDataRef = useRef11(null);
   const [workspaceTags, setWorkspaceTags] = useState25(null);
-  const [serverProjects, setServerProjects] = useState25([]);
-  const [isLoadingFromServer, setIsLoadingFromServer] = useState25(false);
   const [highContrast, setHighContrast] = useState25(() => {
     try {
       return localStorage.getItem("aa-contrast") === "high";
@@ -6006,9 +5773,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
   const [isFullscreen, setIsFullscreen] = useState25(false);
   const [zoomScale, setZoomScale] = useState25(1);
   const [zoomOffset, setZoomOffset] = useState25({ x: 0, y: 0 });
-  const lastPinchDist = useRef11(null);
-  const lastTapTime = useRef11(0);
-  const dragStart = useRef11(null);
+  const lastPinchDist = useRef10(null);
+  const lastTapTime = useRef10(0);
+  const dragStart = useRef10(null);
   const openFullscreen = () => {
     setIsFullscreen(true);
     setZoomScale(1);
@@ -6186,7 +5953,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     const group = groups.find((gr) => gr.prompt === currentResult.prompt);
     return group ? group.items : [];
   }, [galleryItems, currentResult?.prompt]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!currentResult?.prompt || !hfToken || !effectiveNamespace || !hfState) return;
     const siblings = galleryItemsRef.current.filter(
       (g) => g.prompt === currentResult.prompt && !g.base64 && !hfImageNotFoundRef.current.has(g.id)
@@ -6439,51 +6206,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       console.error("Download Error", e);
     }
   };
-  const handleProjectExport = async () => {
-    setProjectActionState("working-full");
-    try {
-      const { base64 } = await exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode }, workspaceTags, recentLabItems.map((i) => i.id));
-      await onDownload(base64, "application/zip", `avatar_project_${getFormattedTimestamp()}.zip`);
-      setProjectActionState("done");
-      setTimeout(() => setProjectActionState("idle"), 3e3);
-    } catch {
-      setProjectActionState("error");
-    }
-  };
-  const handleProjectImport = async (input) => {
-    const file = input instanceof FileList ? input[0] : input;
-    if (!file) return;
-    setProjectActionState("working-full");
-    try {
-      const data = await importProjectFromZip(file);
-      if (data.nodes) setNodes(data.nodes);
-      if (data.edges) setEdges(data.edges);
-      if (data.history) {
-        setHistory(data.history);
-        if (data.history.length > 0) setCurrentResult(data.history[0]);
-      }
-      if (data.galleryItems) setGalleryItems(data.galleryItems);
-      if (data.settings) {
-        setAspectRatio(data.settings.aspectRatio || "1:1");
-        setSelectedModel(data.settings.selectedModel || "\u{1F34C} Nano Banana Pro");
-        setSeed(data.settings.seed || 0);
-        setSeedMode(data.settings.seedMode || "random");
-      }
-      if (data.workspaceTags?.by_category) setWorkspaceTags(data.workspaceTags);
-      if (data.recentLabItemIds?.length) {
-        const allGens = [...data.history || [], ...data.galleryItems || []];
-        const labItems = groupGenerationsToLabItems(allGens);
-        const recent = data.recentLabItemIds.map((id) => labItems.find((item) => item.id === id)).filter(Boolean);
-        setRecentLabItems(recent);
-      }
-      setProjectActionState("done");
-      setProjectLoaded(true);
-      setTimeout(() => setProjectActionState("idle"), 2e3);
-    } catch {
-      setProjectActionState("error");
-      setTimeout(() => setProjectActionState("idle"), 4e3);
-    }
-  };
   const handleWorkspaceImport = (file) => {
     const reader = new FileReader();
     reader.onload = (ev) => {
@@ -6505,37 +6227,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     };
     reader.readAsText(file);
   };
-  const fetchServerProjects = async () => {
-    if (!onFetchServerProjects) return;
-    try {
-      setServerProjects(await onFetchServerProjects());
-    } catch {
-    }
-  };
-  const handleServerSave = async (name) => {
-    if (!onServerSave) return;
-    setProjectActionState("working-full");
-    try {
-      const { base64 } = await exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode }, workspaceTags, recentLabItems.map((i) => i.id));
-      await onServerSave(base64, name || `avatar_project_${getFormattedTimestamp()}`);
-      await fetchServerProjects();
-      setProjectActionState("done");
-      setTimeout(() => setProjectActionState("idle"), 2e3);
-    } catch {
-      setProjectActionState("error");
-      setTimeout(() => setProjectActionState("idle"), 4e3);
-    }
-  };
-  const handleServerLoad = async (id) => {
-    if (!onServerLoad) return;
-    const file = await onServerLoad(id);
-    await handleProjectImport(file);
-  };
-  const handleServerDelete = async (id) => {
-    if (!onServerDelete) return;
-    await onServerDelete(id);
-    await fetchServerProjects();
-  };
   const handleHfInitialSync = async (onProgress) => {
     if (!hfToken || !effectiveNamespace) return;
     const existingIds = new Set((hfState?.metadata || []).map((m) => m.id));
@@ -6563,45 +6254,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       onProgress(done, total);
     }
   };
-  const handleComputeSyncDiff = async () => {
-    if (!onFetchServerProjects || !onServerLoad) throw new Error("Server nicht konfiguriert");
-    const projects = await onFetchServerProjects();
-    if (projects.length === 0) return { localOnly: [...history], serverOnly: [] };
-    const file = await onServerLoad(projects[0].id);
-    const serverData = await importProjectFromZip(file);
-    syncServerDataRef.current = serverData;
-    const localOnly = history.filter((h) => !(serverData.history || []).find((s) => s.id === h.id));
-    const serverOnly = (serverData.history || []).filter((s) => !history.find((h) => h.id === s.id));
-    return { localOnly, serverOnly };
-  };
-  const handleExecuteSync = async (selectedLocalIds) => {
-    const serverData = syncServerDataRef.current;
-    if (!serverData || !onServerSave) return;
-    setProjectActionState("working-full");
-    try {
-      const selectedLocal = history.filter((h) => selectedLocalIds.includes(h.id));
-      const mergedHistory = [...serverData.history || [], ...selectedLocal];
-      const { base64 } = await exportProjectToZip(
-        serverData.nodes || nodes,
-        serverData.edges || edges,
-        mergedHistory,
-        serverData.galleryItems || galleryItems,
-        serverData.settings || { aspectRatio, selectedModel, seed, seedMode },
-        serverData.workspaceTags || workspaceTags,
-        serverData.recentLabItemIds || recentLabItems.map((i) => i.id)
-      );
-      await onServerSave(base64, `sync_${getFormattedTimestamp()}`);
-      await fetchServerProjects();
-      setProjectActionState("done");
-      setTimeout(() => setProjectActionState("idle"), 2e3);
-    } catch {
-      setProjectActionState("error");
-      setTimeout(() => setProjectActionState("idle"), 4e3);
-    }
-  };
-  useEffect10(() => {
-    if (activeTab === "setup" || activeTab === "sync") fetchServerProjects();
-  }, [activeTab]);
   const mergeWorkspaceTags = (local, remote) => {
     if (!remote?.by_category) return local;
     const merged = {};
@@ -6654,7 +6306,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             setZoomScale(1);
             setZoomOffset({ x: 0, y: 0 });
           }, className: "absolute top-4 left-4 w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/20 z-10", children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[20px]", children: "zoom_out_map" }) }),
-          history.length > 1 && /* @__PURE__ */ jsxs27(Fragment11, { children: [
+          history.length > 1 && /* @__PURE__ */ jsxs27(Fragment10, { children: [
             /* @__PURE__ */ jsx29("button", { onClick: () => {
               if (currentIndex > 0) setCurrentResult(history[currentIndex - 1]);
             }, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0", children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
@@ -6672,31 +6324,8 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       }
     );
   }
-  if (showSzenen && szenenPort) {
-    return /* @__PURE__ */ jsxs27("main", { className: "flow-szenen-shell", children: [
-      /* @__PURE__ */ jsxs27("header", { className: "flow-szenen-shell__header", children: [
-        /* @__PURE__ */ jsx29("button", { type: "button", onClick: () => setShowSzenen(false), children: "Zur\xFCck" }),
-        /* @__PURE__ */ jsxs27("div", { children: [
-          /* @__PURE__ */ jsx29("strong", { children: "Szenen" }),
-          /* @__PURE__ */ jsxs27("small", { children: [
-            effectiveNamespace,
-            " \xB7 User ",
-            tagBaseResult.selectedUserId,
-            " \xB7 Context ",
-            tagBaseResult.selectedContextId
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx29("div", { className: "flow-szenen-shell__content", children: /* @__PURE__ */ jsx29(SzenenView, { port: szenenPort, contextId: szenenKontextId }) })
-    ] });
-  }
   if (showStart) {
     return /* @__PURE__ */ jsxs27("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
-      /* @__PURE__ */ jsx29("input", { ref: wsInputRef, type: "file", accept: ".zip", className: "hidden", onChange: (e) => {
-        const f = e.target.files?.[0];
-        if (f) handleProjectImport(f);
-        e.target.value = "";
-      } }),
       /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-1", children: [
         /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-white/15 text-[44px]", children: "palette" }),
         /* @__PURE__ */ jsx29("span", { className: "text-white/25 text-[10px] font-bold uppercase tracking-[0.25em]", children: "Avatar Architect" }),
@@ -6720,21 +6349,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           ]
         }
       ),
-      /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
-        /* @__PURE__ */ jsxs27(
-          "button",
-          {
-            onClick: () => wsInputRef.current?.click(),
-            className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform",
-            style: { height: 56, background: projectLoaded ? "#16a34a" : "#0284c7" },
-            children: [
-              /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[22px]", children: projectLoaded ? "check_circle" : "folder_zip" }),
-              projectLoaded ? "Projekt geladen \u2713" : "Projekt laden (.zip)"
-            ]
-          }
-        ),
-        !projectLoaded && /* @__PURE__ */ jsx29("span", { className: "text-white/20 text-[10px] text-center", children: "Baum, Bilder und Einstellungen wiederherstellen" })
-      ] }),
       /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
         !initialHfToken && /* @__PURE__ */ jsxs27("div", { className: "flex gap-2 w-full", children: [
           /* @__PURE__ */ jsx29(
@@ -6785,79 +6399,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
             },
             ns
           ))
-        ] }),
-        hfToken && /* @__PURE__ */ jsxs27(
-          "button",
-          {
-            disabled: isLoadingFromHF,
-            onClick: async () => {
-              setIsLoadingFromHF(true);
-              try {
-                const { hfListProjects: hfListProjects2, hfDownloadProject: hfDownloadProject2 } = await import("./hfStateService-W7KO2FOH.mjs");
-                const projects = await hfListProjects2(hfToken);
-                if (projects.length > 0) {
-                  const file = await hfDownloadProject2(projects[0].path, hfToken);
-                  await handleProjectImport(file);
-                }
-              } catch (e) {
-                alert("HF Fehler: " + e.message);
-              } finally {
-                setIsLoadingFromHF(false);
-              }
-            },
-            className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
-            style: { height: 56, background: "#f59e0b" },
-            children: [
-              /* @__PURE__ */ jsx29("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromHF ? " animate-spin" : ""}`, children: isLoadingFromHF ? "sync" : "cloud_download" }),
-              isLoadingFromHF ? "Laden\u2026" : "Von HF laden"
-            ]
-          }
-        ),
-        hfToken && /* @__PURE__ */ jsx29("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand von Hugging Face laden" })
-      ] }),
-      onFetchServerProjects && /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
-        /* @__PURE__ */ jsxs27(
-          "button",
-          {
-            disabled: isLoadingFromServer,
-            onClick: async () => {
-              setIsLoadingFromServer(true);
-              try {
-                const projects = await onFetchServerProjects();
-                setServerProjects(projects);
-                if (projects.length > 0 && onServerLoad) {
-                  const file = await onServerLoad(projects[0].id);
-                  await handleProjectImport(file);
-                }
-              } catch {
-              } finally {
-                setIsLoadingFromServer(false);
-              }
-            },
-            className: "w-full flex items-center justify-center gap-3 rounded-2xl font-bold text-[14px] uppercase tracking-wide text-white active:scale-95 transition-transform disabled:opacity-50",
-            style: { height: 56, background: "#7c3aed" },
-            children: [
-              /* @__PURE__ */ jsx29("span", { className: `material-symbols-outlined text-[22px]${isLoadingFromServer ? " animate-spin" : ""}`, children: isLoadingFromServer ? "sync" : "cloud_download" }),
-              isLoadingFromServer ? "Laden\u2026" : "Vom Server laden"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx29("span", { className: "text-white/20 text-[10px] text-center", children: "Letzten Stand vom Server wiederherstellen" })
-      ] }),
-      /* @__PURE__ */ jsxs27("div", { className: "flow-szenen-entry", children: [
-        /* @__PURE__ */ jsxs27(
-          "button",
-          {
-            type: "button",
-            disabled: !szenenPort || !bootstrapTarget.ready,
-            onClick: () => setShowSzenen(true),
-            children: [
-              /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined", children: "movie" }),
-              "Szenen \xF6ffnen"
-            ]
-          }
-        ),
-        !szenenPort && /* @__PURE__ */ jsx29("small", { children: "F\xFCr Szenen zuerst den HF-Token setzen." })
+        ] })
       ] }),
       /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
         /* @__PURE__ */ jsx29("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
@@ -6926,6 +6468,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       );
     }
   }
+  const szenenPane = szenenPort ? /* @__PURE__ */ jsx29("div", { className: "flow-szenen-pane", children: /* @__PURE__ */ jsx29(SzenenView, { port: szenenPort, contextId: szenenKontextId }) }) : /* @__PURE__ */ jsx29("div", { className: "flow-szenen-pane flow-szenen-pane--empty", children: /* @__PURE__ */ jsxs27("p", { children: [
+    "Szenen brauchen einen HF-Token f\xFCr Namespace ",
+    effectiveNamespace || "(noch nicht bestimmt)",
+    " \u2014 auf der Flow-Startseite setzen."
+  ] }) });
   if (layoutChoice === "mobile" || layoutChoice === "mobile-desktop") {
     const mdMode = layoutChoice === "mobile-desktop";
     const mdScale = mdMode ? window.innerWidth / 430 : 1;
@@ -6957,6 +6504,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           onTagMove: handleTagMove
         }
       ) }),
+      mobileTab === "szenen" && szenenPane,
       mobileTab === "stage" && /* @__PURE__ */ jsxs27("div", { className: "flex flex-col flex-1 min-h-0", children: [
         /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
           /* @__PURE__ */ jsx29(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
@@ -7029,7 +6577,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
                   /* @__PURE__ */ jsx29("span", { className: "text-[11px] font-bold uppercase tracking-[0.2em]", children: "Avatar Architect" })
                 ] }),
                 currentResult?.status === "done" && /* @__PURE__ */ jsx29("button", { onClick: openFullscreen, className: "absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full bg-black/60 border border-white/10 z-10", children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[18px]", children: "fullscreen" }) }),
-                history.length > 1 && currentResult && /* @__PURE__ */ jsxs27(Fragment11, { children: [
+                history.length > 1 && currentResult && /* @__PURE__ */ jsxs27(Fragment10, { children: [
                   /* @__PURE__ */ jsx29("button", { onClick: goToPrev, disabled: currentIndex <= 0, className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_left" }) }),
                   /* @__PURE__ */ jsx29("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/60 border border-white/10 disabled:opacity-0 transition-opacity", children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[22px]", children: "chevron_right" }) }),
                   /* @__PURE__ */ jsxs27("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 bg-black/60 rounded-full px-3 py-0.5 text-[10px] text-white/40 font-mono", children: [
@@ -7200,26 +6748,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           }, onTagCreate: handleTagCreate, onTagUpdate: handleTagUpdate, onTagDelete: handleTagDelete, onScanImage: handleScanImage, isScanning: isScanningImage }) }),
           activeTab === "setup" && /* @__PURE__ */ jsx29(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo, tagBase: tagBaseResult }),
           activeTab === "sync" && /* @__PURE__ */ jsx29(
-            ProjectSyncTab,
+            HfMediaSyncTab,
             {
               topSlot: syncTopSlot,
-              onProjectExport: handleProjectExport,
-              onProjectImport: (f) => handleProjectImport(f),
-              onWorkspaceImport: handleWorkspaceImport,
-              projectActionState,
-              serverProjects: onFetchServerProjects ? serverProjects : void 0,
-              onServerSave: onServerSave ? handleServerSave : void 0,
-              onServerLoad: onServerLoad ? handleServerLoad : void 0,
-              onServerDelete: onServerDelete ? handleServerDelete : void 0,
-              onRefreshServerProjects: onFetchServerProjects ? fetchServerProjects : void 0,
-              onComputeSyncDiff: onFetchServerProjects && onServerLoad && onServerSave ? handleComputeSyncDiff : void 0,
-              onExecuteSync: onFetchServerProjects && onServerLoad && onServerSave ? handleExecuteSync : void 0,
-              hfToken: hfToken || void 0,
-              onHfLoad: (f) => handleProjectImport(f),
-              onProjectExportBase64: async () => {
-                const { base64 } = await exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode }, workspaceTags, recentLabItems.map((i) => i.id));
-                return base64;
-              },
               onHfInitialSync: hfToken ? handleHfInitialSync : void 0
             }
           ),
@@ -7257,7 +6788,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         ...workspaceTags ? [{ id: "tags", icon: "label", label: "Tags" }] : [],
         { id: "browse", icon: "photo_library", label: "Galerie" },
         ...serverBaseUrl ? [{ id: "server", icon: "storage", label: "Server" }] : []
-      ].map((tab) => /* @__PURE__ */ jsxs27("button", { onClick: () => tab.id === "szenen" ? setShowSzenen(true) : setMobileTab(tab.id), className: `flex-none min-w-[64px] flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
+      ].map((tab) => /* @__PURE__ */ jsxs27("button", { onClick: () => setMobileTab(tab.id), className: `flex-none min-w-[64px] flex flex-col items-center justify-center gap-0.5 transition-colors ${mobileTab === tab.id ? "text-white" : "text-white/30"}`, children: [
         /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
         /* @__PURE__ */ jsx29("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
       ] }, tab.id)) })
@@ -7338,7 +6869,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
                 /* @__PURE__ */ jsx29("span", { style: { fontSize: 11, fontWeight: "bold", textTransform: "uppercase", letterSpacing: "0.2em" }, children: "Avatar Architect" })
               ] }),
               currentResult?.status === "done" && /* @__PURE__ */ jsx29("button", { onClick: openFullscreen, style: { position: "absolute", top: 8, right: 8, width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff" }, children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: "fullscreen" }) }),
-              history.length > 1 && currentResult && /* @__PURE__ */ jsxs27(Fragment11, { children: [
+              history.length > 1 && currentResult && /* @__PURE__ */ jsxs27(Fragment10, { children: [
                 /* @__PURE__ */ jsx29("button", { onClick: goToPrev, disabled: currentIndex <= 0, style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex <= 0 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_left" }) }),
                 /* @__PURE__ */ jsx29("button", { onClick: goToNext, disabled: currentIndex >= history.length - 1, style: { position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", cursor: "pointer", color: "#fff", opacity: currentIndex >= history.length - 1 ? 0 : 1, transition: "opacity 0.2s" }, children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined", style: { fontSize: 20 }, children: "chevron_right" }) }),
                 /* @__PURE__ */ jsxs27("div", { style: { position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)", background: "rgba(0,0,0,0.6)", borderRadius: 999, padding: "2px 12px", fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: "monospace" }, children: [
@@ -7452,6 +6983,14 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
               className: `px-3 h-7 rounded-lg text-[9px] font-bold uppercase tracking-wide transition-colors ${middlePanel === "labs" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/50"}`,
               children: "Labs"
             }
+          ),
+          /* @__PURE__ */ jsx29(
+            "button",
+            {
+              onClick: () => setMiddlePanel("szenen"),
+              className: `px-3 h-7 rounded-lg text-[9px] font-bold uppercase tracking-wide transition-colors ${middlePanel === "szenen" ? "bg-white/10 text-white" : "text-white/30 hover:text-white/50"}`,
+              children: "Szenen"
+            }
           )
         ] }),
         /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
@@ -7474,7 +7013,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           /* @__PURE__ */ jsx29("textarea", { value: activePrompt, onChange: (e) => setActivePrompt(e.target.value), className: "w-full bg-transparent border-none outline-none text-[12px] leading-relaxed text-white/80 resize-none h-20 dark-scrollbar", placeholder: "W\xE4hle einen Knoten oder tippe einen Prompt..." }),
           activePrompt && !isSynthesizing && /* @__PURE__ */ jsx29("button", { onClick: () => setActivePrompt(""), className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-white/20 hover:text-white", children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
         ] }) }),
-        middlePanel === "labs" ? /* @__PURE__ */ jsx29("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx29(LabsTab, { services: labServices, onResult: (item) => {
+        middlePanel === "szenen" ? szenenPane : middlePanel === "labs" ? /* @__PURE__ */ jsx29("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx29(LabsTab, { services: labServices, onResult: (item) => {
           const frame = item.frames[0];
           if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
         } }) }) : /* @__PURE__ */ jsxs27("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
@@ -7559,8 +7098,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           serverBaseUrl && /* @__PURE__ */ jsx29("button", { onClick: () => {
             setActiveTab("server");
             setIsRightCollapsed(false);
-          }, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
-          /* @__PURE__ */ jsx29("button", { onClick: () => setShowSzenen(true), className: "w-10 flex items-center justify-center relative text-white/20 hover:text-white", children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[20px]", children: "movie" }) })
+          }, className: `w-10 flex items-center justify-center relative transition-colors ${activeTab === "server" ? "text-white" : "text-white/20"}`, children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) })
         ] }),
         hfToken && /* @__PURE__ */ jsx29("button", { onClick: () => refreshHF(), disabled: isHfRefreshing, className: "w-10 flex items-center justify-center text-white/20 hover:text-white/60 transition-colors disabled:opacity-30", children: /* @__PURE__ */ jsx29("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
         /* @__PURE__ */ jsx29("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ jsx29("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })
@@ -7601,26 +7139,9 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
         activeTab === "inspect" && /* @__PURE__ */ jsx29(InspectPanel, { currentResult, history, onSelect: setCurrentResult }),
         activeTab === "setup" && /* @__PURE__ */ jsx29(SetupPanel, { onWorkspaceImport: handleWorkspaceImport, buildInfo, tagBase: tagBaseResult }),
         activeTab === "sync" && /* @__PURE__ */ jsx29(
-          ProjectSyncTab,
+          HfMediaSyncTab,
           {
             topSlot: syncTopSlot,
-            onProjectExport: handleProjectExport,
-            onProjectImport: (f) => handleProjectImport(f),
-            onWorkspaceImport: handleWorkspaceImport,
-            projectActionState,
-            serverProjects: onFetchServerProjects ? serverProjects : void 0,
-            onServerSave: onServerSave ? handleServerSave : void 0,
-            onServerLoad: onServerLoad ? handleServerLoad : void 0,
-            onServerDelete: onServerDelete ? handleServerDelete : void 0,
-            onRefreshServerProjects: onFetchServerProjects ? fetchServerProjects : void 0,
-            onComputeSyncDiff: onFetchServerProjects && onServerLoad && onServerSave ? handleComputeSyncDiff : void 0,
-            onExecuteSync: onFetchServerProjects && onServerLoad && onServerSave ? handleExecuteSync : void 0,
-            hfToken: hfToken || void 0,
-            onHfLoad: (f) => handleProjectImport(f),
-            onProjectExportBase64: async () => {
-              const { base64 } = await import("./project-O4ORKXY5.mjs").then((m) => m.exportProjectToZip(nodes, edges, history, galleryItems, { aspectRatio, selectedModel, seed, seedMode }, workspaceTags, recentLabItems.map((i) => i.id)));
-              return base64;
-            },
             onHfInitialSync: hfToken ? handleHfInitialSync : void 0
           }
         ),
@@ -7631,7 +7152,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
 }
 
 // src/components/FaApp.tsx
-import { useState as useState26, useEffect as useEffect11, useMemo as useMemo7 } from "react";
+import { useState as useState26, useEffect as useEffect10, useMemo as useMemo7 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 function FaApp({
   onGenerateImage,
@@ -7645,14 +7166,10 @@ function FaApp({
   libToken,
   allowDevNamespace,
   serverBaseUrl,
-  onFetchServerProjects,
-  onServerSave,
-  onServerLoad,
-  onServerDelete,
   buildInfo
 }) {
   const [hfNamespace, setHfNamespace] = useState26(void 0);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!serverBaseUrl) return;
     fetch(`${serverBaseUrl}/api/status`).then((r) => r.json()).then((d) => {
       if (typeof d.hfNamespace === "string") setHfNamespace(d.hfNamespace);
@@ -7675,10 +7192,6 @@ function FaApp({
       allowDevNamespace: !hfNamespace && allowDevNamespace,
       requireWorkspaceSelection: true,
       serverBaseUrl,
-      onFetchServerProjects,
-      onServerSave,
-      onServerLoad,
-      onServerDelete,
       buildInfo
     }
   );
@@ -8252,6 +7765,7 @@ export {
   FaToolsBadge,
   FlowWorkspacePicker,
   GLOBAL_STYLES,
+  HfMediaSyncTab,
   HistoryPanel,
   InspectPanel,
   LIBRARY_CUTOVER_MARKER,
@@ -8268,7 +7782,6 @@ export {
   ListView,
   MediaLibrary,
   PillButton,
-  ProjectSyncTab,
   PromptTab,
   SCOPE_MAP,
   SectionLabel,
@@ -8302,7 +7815,6 @@ export {
   createTagsDefault,
   deriveTagBaseWorkspaceTags,
   deriveTagViewModel,
-  exportProjectToZip,
   formatTreeToMarkdown,
   frameToGeneration,
   getFormattedTimestamp,
@@ -8311,15 +7823,10 @@ export {
   groupGenerationsToLabItems,
   hfBatchArchive,
   hfBootstrapFromLegacy,
-  hfDeleteProject,
-  hfDownloadProject,
   hfListDir,
-  hfListProjects,
   hfLoadImageAsBase64,
   hfUploadImage,
-  hfUploadProjectForm,
   hfUploadSmallFile,
-  importProjectFromZip,
   injectXMPMetadata,
   interpretSdkError,
   libraryContract,