@rslsp1/fa-app-tools 7.0.1 → 7.4.0

package/dist/index.js

@@ -132,7 +132,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // package.json
-var version = "7.0.1";
+var version = "7.4.0";
 
 // src/hooks/useOnClickOutside.ts
 var import_react = require("react");
@@ -171,7 +171,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 = () => {
@@ -188,11 +188,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; }
@@ -203,7 +198,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;
@@ -217,15 +212,11 @@ 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;
-  }
-  .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; } }
+    flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px;
+    color: var(--sz-text); background: var(--sz-bg); overflow: auto;
+  }
+  .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
@@ -2441,10 +2432,72 @@ function bildEndungFuer(mimeType) {
   return "jpg";
 }
 
+// src/lib/szenen/szenenSnapshot.ts
+var SZENEN_SNAPSHOT_SCHEMA_VERSION = 1;
+var SZENEN_SNAPSHOT_PREFIX = "szenen-state-";
+function istSzenenSnapshotDatei(name) {
+  return name.startsWith(SZENEN_SNAPSHOT_PREFIX) && name.endsWith(".json");
+}
+var maxTsOf = (events) => {
+  let max = 0;
+  for (const event of events) if (event.ts > max) max = event.ts;
+  return max;
+};
+function aufgenommeneDateien(snapshot) {
+  return new Set(snapshot ? snapshot.consumed.paths : []);
+}
+function parseSzenenSnapshot(raw, herkunft) {
+  if (!raw || typeof raw !== "object") {
+    throw new Error(`Szenen-Snapshot ${herkunft}: kein Objekt, sondern ${typeof raw}.`);
+  }
+  const obj = raw;
+  if (obj.schema_version !== SZENEN_SNAPSHOT_SCHEMA_VERSION) {
+    throw new Error(
+      `Szenen-Snapshot ${herkunft}: schema_version ${String(obj.schema_version)} wird nicht gelesen, erwartet ${SZENEN_SNAPSHOT_SCHEMA_VERSION}.`
+    );
+  }
+  if (!Array.isArray(obj.events)) {
+    throw new Error(`Szenen-Snapshot ${herkunft}: "events" fehlt oder ist kein Array.`);
+  }
+  const events = obj.events;
+  for (const [i, event] of events.entries()) {
+    if (!event || typeof event.type !== "string" || typeof event.ts !== "number") {
+      throw new Error(
+        `Szenen-Snapshot ${herkunft}: Ereignis ${i} hat keinen Typ oder keinen Zeitstempel.`
+      );
+    }
+  }
+  const consumed = obj.consumed;
+  if (!consumed || typeof consumed.count !== "number" || typeof consumed.max_ts !== "number") {
+    throw new Error(`Szenen-Snapshot ${herkunft}: "consumed" fehlt oder ist unvollstaendig.`);
+  }
+  if (!Array.isArray(consumed.paths)) {
+    throw new Error(
+      `Szenen-Snapshot ${herkunft}: "consumed.paths" fehlt. Ohne die aufgenommenen Dateinamen laesst sich nicht entscheiden, welche Datei in events/ noch aussteht.`
+    );
+  }
+  if (consumed.count !== events.length) {
+    throw new Error(
+      `Szenen-Snapshot ${herkunft}: consumed.count ${consumed.count} passt nicht zu ${events.length} Ereignis(sen) in der Datei \u2014 die Datei ist unvollstaendig.`
+    );
+  }
+  const echt = maxTsOf(events);
+  if (consumed.max_ts !== echt) {
+    throw new Error(
+      `Szenen-Snapshot ${herkunft}: consumed.max_ts ${consumed.max_ts} passt nicht zum groessten Zeitstempel ${echt} in der Datei.`
+    );
+  }
+  return { schema_version: SZENEN_SNAPSHOT_SCHEMA_VERSION, consumed, events };
+}
+function mergeSnapshotAndPending(snapshot, pending, bereitsImSnapshot = 0) {
+  if (!snapshot) return { events: pending, bereitsImSnapshot };
+  return { events: [...snapshot.events, ...pending], bereitsImSnapshot };
+}
+
 // src/lib/hfEventLog.ts
-function treeUrl(namespace, subdir = "") {
+function treeUrl(namespace, subdir = "", revision = "main") {
   const parts = [namespace.replace(/\/$/, ""), subdir].filter(Boolean).join("/");
-  return `${HF_BASE}/api/datasets/${HF_REPO}/tree/main${parts ? "/" + parts : ""}`;
+  return `${HF_BASE}/api/datasets/${HF_REPO}/tree/${encodeURIComponent(revision)}${parts ? "/" + parts : ""}`;
 }
 var DROSSEL_VERSUCHE = 4;
 var DROSSEL_BASIS_MS = 400;
@@ -2477,8 +2530,8 @@ async function mitGeduld(anfrage) {
   }
   return letzte;
 }
-async function hfListDir(namespace, subdir, token) {
-  const res = await mitGeduld(() => holeMitZeitlimit(treeUrl(namespace, subdir), {
+async function hfListDir(namespace, subdir, token, revision = "main") {
+  const res = await mitGeduld(() => holeMitZeitlimit(treeUrl(namespace, subdir, revision), {
     headers: { Authorization: `Bearer ${token}` }
   }));
   if (res.status === 404) return [];
@@ -2507,17 +2560,46 @@ function toBase64(text) {
   bytes.forEach((b) => binary += String.fromCharCode(b));
   return btoa(binary);
 }
-async function hfUploadSmallFile(repoPath, content, token, summary = `Update ${repoPath}`) {
+var HfPreconditionFailedError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "HfPreconditionFailed";
+  }
+};
+async function hfRepoHead(token, revision = "main") {
+  const res = await mitGeduld(() => holeMitZeitlimit(
+    `${HF_BASE}/api/datasets/${HF_REPO}/revision/${encodeURIComponent(revision)}`,
+    { headers: { Authorization: `Bearer ${token}` } }
+  ));
+  if (!res.ok) {
+    throw new Error(`HF revision failed: ${res.status} ${res.statusText} (${revision})`);
+  }
+  const daten = await res.json();
+  if (typeof daten.sha !== "string" || daten.sha.length === 0) {
+    throw new Error(
+      `HF revision ${revision}: die Antwort traegt kein "sha". Erhaltene Felder: ${Object.keys(daten || {}).join(", ") || "(keine)"}.`
+    );
+  }
+  return daten.sha;
+}
+async function hfUploadSmallFile(repoPath, content, token, summary = `Update ${repoPath}`, options) {
+  const kopf = { summary, description: "" };
+  if (options?.parentCommit) kopf.parentCommit = options.parentCommit;
   const res = await fetch(`${HF_BASE}/api/datasets/${HF_REPO}/commit/main`, {
     method: "POST",
     headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/x-ndjson" },
     body: [
-      JSON.stringify({ key: "header", value: { summary, description: "" } }),
+      JSON.stringify({ key: "header", value: kopf }),
       JSON.stringify({ key: "file", value: { path: repoPath, encoding: "base64", content: toBase64(content) } })
     ].join("\n")
   });
   if (!res.ok) {
     const err = await res.text().catch(() => "");
+    if (options?.parentCommit && (res.status === 412 || res.status === 409)) {
+      throw new HfPreconditionFailedError(
+        `HF commit abgelehnt: Der Branch hat sich seit ${options.parentCommit} bewegt (${res.status}). Es wurde nichts geschrieben.`
+      );
+    }
     throw new Error(`HF upload failed: ${res.status} \u2014 ${err.slice(0, 200)}`);
   }
 }
@@ -2567,8 +2649,8 @@ async function mitBegrenzterParallelitaet(count, limit, task) {
   await Promise.all(Array.from({ length: Math.min(limit, count) }, worker));
   if (fehlerAufgetreten) throw ersterFehler;
 }
-async function loadPendingEvents(namespace, token, sinceTs, knownPaths) {
-  const files = await hfListDir(namespace, "events", token);
+async function loadPendingEvents(namespace, token, sinceTs, knownPaths, revision = "main") {
+  const files = await hfListDir(namespace, "events", token, revision);
   const pending = files.filter((f) => f.type === "file" && tsFromEventPath(f.path) > sinceTs && !knownPaths?.has(f.path)).sort((a, b) => a.path.localeCompare(b.path));
   if (!pending.length) return [];
   const raw = new Array(pending.length);
@@ -2578,6 +2660,16 @@ async function loadPendingEvents(namespace, token, sinceTs, knownPaths) {
   for (const f of pending) knownPaths?.add(f.path);
   return raw.flatMap((e) => Array.isArray(e) ? e : [e]);
 }
+async function findLatestSzenenSnapshotPath(namespace, token) {
+  const files = await hfListDir(namespace, "", token);
+  const treffer = files.filter((f) => f.type === "file" && istSzenenSnapshotDatei(f.path.split("/").pop() || "")).map((f) => f.path).sort((a, b) => b.localeCompare(a));
+  return treffer[0] ?? null;
+}
+async function loadLatestSzenenSnapshot(namespace, token) {
+  const pfad = await findLatestSzenenSnapshotPath(namespace, token);
+  if (!pfad) return null;
+  return parseSzenenSnapshot(await hfDownloadJsonByPath(pfad, token), pfad);
+}
 var SESSION_CLIENT_ID = `client-${crypto.randomUUID().slice(0, 8)}`;
 function getSessionClientId() {
   return SESSION_CLIENT_ID;
@@ -2603,7 +2695,13 @@ async function writeHFEvent(namespace, token, type, payload, prevTs, options) {
   const suffix = options?.ordered ? `${String(++writeSeq % 1e6).padStart(6, "0")}${uuid}` : uuid;
   const filename = `${tsToFilename(ts)}_${suffix}.json`;
   const repoPath = `${namespace}events/${filename}`;
-  await hfUploadSmallFile(repoPath, JSON.stringify(event, null, 2), token, `Event: ${type}`);
+  await hfUploadSmallFile(
+    repoPath,
+    JSON.stringify(event, null, 2),
+    token,
+    `Event: ${type}`,
+    options?.parentCommit ? { parentCommit: options.parentCommit } : void 0
+  );
   return event;
 }
 
@@ -5955,7 +6053,8 @@ function capabilitiesOf(port) {
     imageBatchHistory: typeof port.imageBatchHistory?.listBatchesForPromptRun === "function",
     imageOrderHistory: typeof port.imageBatchHistory?.listOrdersForPromptRun === "function",
     imageBatchWrite: typeof port.imageBatchWrite?.importBatch === "function",
-    imageGeneration: typeof port.imageGeneration?.startFromPromptRun === "function"
+    imageGeneration: typeof port.imageGeneration?.startFromPromptRun === "function",
+    imageJobs: typeof port.imageJobs?.claimAndRun === "function"
   };
 }
 async function callOptional(capability, operation) {
@@ -9102,13 +9201,13 @@ function noticeFor(ergebnis, was) {
       };
     }
     case "rejected": {
-      const fehler4 = ergebnis.errors ?? [];
+      const fehler5 = ergebnis.errors ?? [];
       const ungeprueft = ergebnis.unchecked ?? [];
       return {
         tone: "rejected",
-        text: `${was}: abgelehnt \u2014 ${fehler4.length} Befund${fehler4.length === 1 ? "" : "e"}.`,
+        text: `${was}: abgelehnt \u2014 ${fehler5.length} Befund${fehler5.length === 1 ? "" : "e"}.`,
         details: [
-          ...fehler4.map((f) => `${f.path ?? "(ohne Pfad)"}: ${f.message ?? "ohne Meldung"}`),
+          ...fehler5.map((f) => `${f.path ?? "(ohne Pfad)"}: ${f.message ?? "ohne Meldung"}`),
           // Nicht verschweigen: was nicht geprüft wurde, ist nicht in Ordnung,
           // sondern ungeprüft.
           ...ungeprueft.map((u) => `ungepr\xFCft: ${u}`)
@@ -12608,7 +12707,7 @@ var ERKLAERUNG = {
 };
 var CapabilityPanel = ({ port, elementId, setupPayload }) => {
   const [bericht, setBericht] = (0, import_react37.useState)(null);
-  const [fehler4, setFehler] = (0, import_react37.useState)(null);
+  const [fehler5, setFehler] = (0, import_react37.useState)(null);
   (0, import_react37.useEffect)(() => {
     let abgemeldet = false;
     setBericht(null);
@@ -12630,10 +12729,10 @@ var CapabilityPanel = ({ port, elementId, setupPayload }) => {
       abgemeldet = true;
     };
   }, [port, elementId, setupPayload]);
-  if (fehler4) {
+  if (fehler5) {
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { "data-testid": "capability-fehler", role: "alert", children: [
       "F\xE4higkeitsbericht nicht erstellbar: ",
-      fehler4
+      fehler5
     ] });
   }
   if (!bericht) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { "data-testid": "capability-laden", children: "F\xE4higkeitsbericht wird erstellt \u2026" });
@@ -13000,7 +13099,60 @@ var SZENEN_EVENT_TYPES = {
    * Der Elementreducer ignoriert auch diesen Typ (`default:`-Zweig); gelesen
    * wird mit `collectImageBatches` (`imageBatchStore.ts`).
    */
-  imageBatchPersisted: "szenen.image_batch_persisted"
+  imageBatchPersisted: "szenen.image_batch_persisted",
+  /**
+   * Ein vorbereiteter Promptvorgang — der Durchstich „Szene → ChatGPT → Lauf".
+   *
+   * Der bestehende Promptpfad ruft das Modell selbst
+   * (`runPromptDerivation()`); ein aufrufendes Chatmodell formuliert dagegen
+   * **zwischen** zwei Werkzeugaufrufen. Damit zerfaellt der eine Vorgang in
+   * zwei, und der zweite braucht genau den Stand, den der erste eingefroren
+   * hat — sonst loeste der Abschluss die inzwischen geaenderte Szene neu auf
+   * und der Lauf behauptete eine Herkunft, die er nicht hat (D-22).
+   *
+   * Deshalb ein eigenes Ereignis und **kein** fluechtiger Prozesszustand: Der
+   * Snapshot ueberlebt Neustart, Hostwechsel und Sitzungsende, weil er im
+   * selben autoritativen Log liegt wie der Lauf, der daraus entsteht.
+   *
+   * Der Elementreducer ignoriert diesen Typ (`default:`-Zweig); gelesen wird
+   * mit `collectPromptOperations` (`scenePromptOperation.ts`).
+   */
+  promptOperationPrepared: "szenen.prompt_operation_prepared",
+  /**
+   * Ein Bildauftrag wartet auf einen ausfuehrenden Flow-Host.
+   *
+   * Die vorhandene Auftragshistorie (`imageGenerationStarted`) beginnt
+   * **unmittelbar vor** dem Provideraufruf und kennt deshalb keinen wartenden
+   * Auftrag. Genau der entsteht hier: Ein Chatmodell beauftragt ueber MCP ein
+   * Bild, der Auftrag wird dauerhaft abgelegt, und der Werkzeugaufruf endet
+   * sofort mit seiner Kennung — er haelt keine Antwort minutenlang offen.
+   *
+   * Traegt **keinen** Prompt: Der steht im referenzierten Lauf, und ihn hier
+   * zu kopieren waere eine zweite Wahrheit ueber denselben eingefrorenen Text
+   * (D-103).
+   */
+  imageJobRequested: "szenen.image_job_requested",
+  /**
+   * Ein Flow-Host beansprucht einen wartenden Bildauftrag.
+   *
+   * Ein append-only Log kennt kein Lock: Zwei Tabs koennen beide anhaengen.
+   * Deshalb ist die Uebernahme **nicht** der Append, sondern das Ergebnis
+   * einer deterministischen Schiedsregel darueber (`winningClaimOf`) — der
+   * erste Anspruch in Logreihenfolge gewinnt, und jeder Host liest nach
+   * seinem Append erneut, bevor er einen bezahlten Provideraufruf startet.
+   * Ein unterlegener Anspruch bleibt sichtbar stehen; er wird nicht geloescht,
+   * weil das Log das nicht kann und weil der Versuch ein Beleg ist.
+   */
+  imageJobClaimed: "szenen.image_job_claimed",
+  /**
+   * Der Bildauftrag ist erledigt — mit dem Ausgang, den der Host gesehen hat.
+   *
+   * Getrennt von `imageGenerationFinished`: Jenes gehoert zum bezahlten
+   * Provideraufruf, dieses zur Zustellung. Ein Auftrag kann fehlschlagen,
+   * **bevor** ein Provider gerufen wurde (abgelehntes Profil), und dann gibt
+   * es kein `imageGenerationFinished`, das den Wartenden erloesen wuerde.
+   */
+  imageJobSettled: "szenen.image_job_settled"
 };
 function sortForReplay(events) {
   return [...events].sort((a, b) => {
@@ -13353,9 +13505,9 @@ async function leseBilderAusZip(datei) {
     );
   }
   const { default: JSZip3 } = await import("jszip");
-  const archiv = await JSZip3.loadAsync(datei).catch((fehler4) => {
+  const archiv = await JSZip3.loadAsync(datei).catch((fehler5) => {
     throw new Error(
-      `${name} konnte nicht als ZIP gelesen werden: ${fehler4 instanceof Error ? fehler4.message : String(fehler4)}`
+      `${name} konnte nicht als ZIP gelesen werden: ${fehler5 instanceof Error ? fehler5.message : String(fehler5)}`
     );
   });
   const pfade = [];
@@ -13552,6 +13704,7 @@ var RunImagesPanel = ({ port, lauf }) => {
   const neuLesen = () => setNachladen((n) => n + 1);
   const [erzeugenOffen, setErzeugenOffen] = (0, import_react40.useState)(null);
   const [zuordnenOffen, setZuordnenOffen] = (0, import_react40.useState)(null);
+  const [chatAuftraegeOffen, setChatAuftraegeOffen] = (0, import_react40.useState)(null);
   const quelle = sourceOf(lauf);
   const [wahlPhase] = usePortQuery(
     () => port.imageGeneration ? port.imageGeneration.imageModelChoiceForRun(lauf.run_id) : Promise.resolve({ kind: "ok", value: null }),
@@ -13566,10 +13719,17 @@ var RunImagesPanel = ({ port, lauf }) => {
     () => port.imageBatchHistory ? port.imageBatchHistory.listBatchesForPromptRun(lauf.run_id) : Promise.resolve({ kind: "ok", value: [] }),
     [port, lauf.run_id, nachladen]
   );
+  const [chatAuftraegePhase] = usePortQuery(
+    () => port.imageJobs ? port.imageJobs.listJobs(lauf.run_id) : Promise.resolve({ kind: "ok", value: [] }),
+    [port, lauf.run_id, nachladen]
+  );
   const auftraege = auftraegePhase.status === "ready" ? auftraegePhase.value : [];
   const batches = batchesPhase.status === "ready" ? batchesPhase.value : [];
+  const chatAuftraege = chatAuftraegePhase.status === "ready" ? chatAuftraegePhase.value : [];
+  const offeneChatAuftraege = chatAuftraege.filter((a) => a.status === "pending").length;
   const auffaellige = auftraege.filter((a) => a.status !== "succeeded");
   const erzeugenAuf = erzeugenOffen ?? batches.length === 0;
+  const chatAuftraegeAuf = chatAuftraegeOffen ?? offeneChatAuftraege > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "szenen-bilder", "data-testid": `bilder-${lauf.run_id}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { className: "szenen-bilder__eingang", "data-testid": `eingang-${lauf.run_id}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h5", { children: "Eingang \u2014 woraus dieser Prompt entstand" }),
@@ -13690,6 +13850,43 @@ var RunImagesPanel = ({ port, lauf }) => {
         }
       )
     ] }),
+    faehig.imageJobs && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      "details",
+      {
+        className: "szenen-bilder__aktion",
+        "data-testid": `auftraege-chat-bereich-${lauf.run_id}`,
+        open: chatAuftraegeAuf,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            "summary",
+            {
+              onClick: (e) => {
+                e.preventDefault();
+                setChatAuftraegeOffen(!chatAuftraegeAuf);
+              },
+              children: [
+                "Bildauftraege aus dem Chat",
+                offeneChatAuftraege > 0 ? ` (${offeneChatAuftraege} wartend)` : ""
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            ChatAuftraegeAktion,
+            {
+              port,
+              lauf,
+              auftraege: chatAuftraege,
+              fehler: chatAuftraegePhase.status === "error" ? chatAuftraegePhase.message : null,
+              laedt: chatAuftraegePhase.status === "loading",
+              onFertig: () => {
+                setChatAuftraegeOffen(true);
+                neuLesen();
+              }
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "details",
       {
@@ -13873,7 +14070,7 @@ function useBildQuellen(port, bilder) {
     erneutVersuchen: () => setVersuch((n) => n + 1)
   };
 }
-var BildDetails = ({ bild, fehler: fehler4, aufloesbar }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "szenen-bilder__meta", "data-testid": `batchbild-${bild.media_ref}`, children: [
+var BildDetails = ({ bild, fehler: fehler5, aufloesbar }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "szenen-bilder__meta", "data-testid": `batchbild-${bild.media_ref}`, children: [
   /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: bild.media_ref }),
   /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
     "Position ",
@@ -13886,7 +14083,7 @@ var BildDetails = ({ bild, fehler: fehler4, aufloesbar }) => /* @__PURE__ */ (0,
     "\xD7",
     bild.height
   ] }) : null,
-  fehler4 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("em", { "data-testid": `batchbild-fehler-${bild.media_ref}`, children: fehler4 }),
+  fehler5 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("em", { "data-testid": `batchbild-fehler-${bild.media_ref}`, children: fehler5 }),
   !aufloesbar && // Capability-Grenze, kein Fehler: Dieser Host kann Batches lesen,
   // aber keine Bilder auflösen (E). Kein erfundener Fallback auf eine
   // Serverroute (A6).
@@ -13902,18 +14099,18 @@ var HERKUNFT_KURZ = {
   external_import: "extern importiert"
 };
 var BatchKachel = ({ port, batch }) => {
-  const { quellen, fehler: fehler4, wiederholbar, erneutVersuchen } = useBildQuellen(port, batch.images);
+  const { quellen, fehler: fehler5, wiederholbar, erneutVersuchen } = useBildQuellen(port, batch.images);
   const aufloesbar = Boolean(port.imageLibrary);
   const bilder = batch.images.map((bild) => ({
     id: bild.media_ref,
     quelle: quellen.get(bild.media_ref) ?? null,
     titel: `Bild ${bild.position + 1}`,
-    ...fehler4.get(bild.media_ref) ? { leerText: "Nicht ladbar" } : {},
+    ...fehler5.get(bild.media_ref) ? { leerText: "Nicht ladbar" } : {},
     details: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       BildDetails,
       {
         bild,
-        fehler: fehler4.get(bild.media_ref) ?? null,
+        fehler: fehler5.get(bild.media_ref) ?? null,
         aufloesbar
       }
     )
@@ -13973,7 +14170,7 @@ var BatchKachel = ({ port, batch }) => {
             BildDetails,
             {
               bild,
-              fehler: fehler4.get(bild.media_ref) ?? null,
+              fehler: fehler5.get(bild.media_ref) ?? null,
               aufloesbar
             }
           ) }, bild.media_ref)) })
@@ -14242,11 +14439,11 @@ var ZuordnenAktion = ({ port, lauf, onFertig }) => {
         setSeedListe(DEFAULT_SEED_VORLAGE.seeds);
         setVorlageKey(DEFAULT_VORLAGE_KEY);
       }
-    } catch (fehler4) {
+    } catch (fehler5) {
       if (veraltet()) return;
       setNotiz({
         tone: "error",
-        text: fehler4 instanceof Error ? fehler4.message : String(fehler4)
+        text: fehler5 instanceof Error ? fehler5.message : String(fehler5)
       });
     }
     if (veraltet()) return;
@@ -14265,10 +14462,10 @@ var ZuordnenAktion = ({ port, lauf, onFertig }) => {
       setNotiz(
         ergebnis.kind === "ok" ? { tone: "ok", text: `Importiert als Item ${ergebnis.value.item_id} mit ${bilder.length} Bild(ern).` } : noticeFor(ergebnis, "Externe Bilder importieren")
       );
-    } catch (fehler4) {
+    } catch (fehler5) {
       setNotiz({
         tone: "error",
-        text: `Externe Bilder importieren: ${fehler4 instanceof Error ? fehler4.message : String(fehler4)}`
+        text: `Externe Bilder importieren: ${fehler5 instanceof Error ? fehler5.message : String(fehler5)}`
       });
     }
     setLaeuft(false);
@@ -14290,10 +14487,10 @@ var ZuordnenAktion = ({ port, lauf, onFertig }) => {
           ...seed !== void 0 ? { seed } : {}
         });
       }
-    } catch (fehler4) {
+    } catch (fehler5) {
       setNotiz({
         tone: "error",
-        text: `Externe Bilder importieren: ${fehler4 instanceof Error ? fehler4.message : String(fehler4)}`
+        text: `Externe Bilder importieren: ${fehler5 instanceof Error ? fehler5.message : String(fehler5)}`
       });
       return;
     }
@@ -14629,6 +14826,101 @@ function readAsBase64(datei) {
     leser.readAsDataURL(datei);
   });
 }
+var CHAT_AUFTRAG_TEXT = {
+  pending: "wartet auf \xDCbernahme",
+  // Wie bei `started` (D-119): laufend und abgebrochen sind aus dem Log
+  // nicht unterscheidbar, und es gibt keinen automatischen Retry, der die
+  // Unterscheidung bräuchte.
+  claimed: "\xFCbernommen (l\xE4uft oder unterbrochen)",
+  succeeded: "erfolgreich",
+  partial: "teilweise",
+  failed: "fehlgeschlagen",
+  rejected: "abgelehnt \u2014 es wurde nichts ausgef\xFChrt"
+};
+var ChatAuftraegeAktion = ({
+  port,
+  lauf,
+  auftraege,
+  fehler: fehler5,
+  laedt,
+  onFertig
+}) => {
+  const [laufend, setLaufend] = (0, import_react40.useState)(null);
+  const [notiz, setNotiz] = (0, import_react40.useState)(null);
+  async function uebernehmen(jobId) {
+    if (!port.imageJobs) return;
+    setLaufend(jobId);
+    setNotiz(null);
+    try {
+      const ergebnis = await port.imageJobs.claimAndRun(jobId);
+      if (ergebnis.kind === "ok") {
+        setNotiz({
+          tone: ergebnis.job.status === "succeeded" ? "ok" : "rejected",
+          text: `Auftrag ${jobId}: ${CHAT_AUFTRAG_TEXT[ergebnis.job.status]}.` + (ergebnis.job.diagnostic ? ` ${ergebnis.job.diagnostic}` : "")
+        });
+      } else if (ergebnis.kind === "lost") {
+        setNotiz({ tone: "rejected", text: ergebnis.message });
+      } else {
+        setNotiz({ tone: "error", text: ergebnis.message });
+      }
+    } catch (e) {
+      setNotiz({
+        tone: "error",
+        text: `Die \xDCbernahme von Auftrag ${jobId} ist technisch gescheitert: ` + (e instanceof Error ? e.message : String(e))
+      });
+    } finally {
+      setLaufend(null);
+      onFertig();
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "szenen-bilder__aktion-inhalt", "data-testid": `chat-auftraege-${lauf.run_id}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "szenen-area__lead", children: "Auftr\xE4ge, die \xFCber den MCP aus dem Chat kamen. Der Prompt wird nicht kopiert \u2014 ausgef\xFChrt wird der eingefrorene Prompt dieses Laufs." }),
+    fehler5 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { role: "alert", "data-testid": `chat-auftraege-fehler-${lauf.run_id}`, children: [
+      "Bildauftr\xE4ge aus dem Chat konnten nicht gelesen werden: ",
+      fehler5
+    ] }),
+    !fehler5 && !laedt && auftraege.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { "data-testid": `chat-auftraege-leer-${lauf.run_id}`, children: "F\xFCr diesen Lauf liegt kein Auftrag aus dem Chat vor." }),
+    notiz && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "p",
+      {
+        role: notiz.tone === "error" ? "alert" : void 0,
+        "data-testid": `chat-auftraege-notiz-${lauf.run_id}`,
+        children: notiz.text
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "szenen-bilder__auftraege", children: auftraege.map((auftrag) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { "data-testid": `chat-auftrag-${auftrag.job_id}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: CHAT_AUFTRAG_TEXT[auftrag.status] }),
+      " \u2014 ",
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
+        auftrag.image_count,
+        " ",
+        auftrag.image_count === 1 ? "Bild" : "Bilder",
+        " mit",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: auftrag.execution_target_model_key }),
+        " / ",
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: auftrag.execution_profile_id }),
+        auftrag.aspect_ratio ? ` im Format ${auftrag.aspect_ratio}` : ""
+      ] }),
+      auftrag.diagnostic && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
+        " ",
+        auftrag.diagnostic
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("br", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { className: "szenen-bilder__auftragskennung", children: auftrag.job_id }),
+      auftrag.status === "pending" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "button",
+        {
+          type: "button",
+          disabled: laufend !== null,
+          onClick: () => void uebernehmen(auftrag.job_id),
+          "data-testid": `chat-auftrag-uebernehmen-${auftrag.job_id}`,
+          children: laufend === auftrag.job_id ? "\xDCbernahme l\xE4uft\u2026" : "\xDCbernehmen und ausf\xFChren (kostet einen Bildaufruf)"
+        }
+      )
+    ] }, auftrag.job_id)) })
+  ] });
+};
 
 // src/features/szenen/areas/RunsPanel.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
@@ -19184,12 +19476,21 @@ function createHfElementStore(options) {
 
 // src/lib/szenen/hfEventChannel.ts
 function createHfEventChannel(options) {
-  const { namespace, token, sinceTs = 0 } = options;
+  const { namespace, token, sinceTs = 0, ohneSnapshot = false } = options;
   const knownPaths = /* @__PURE__ */ new Set();
   let cachedRawEvents = [];
   let syncInFlight = null;
-  const refresh = async () => {
-    const neue = await loadPendingEvents(namespace, token, sinceTs, knownPaths);
+  let snapshot = null;
+  let snapshotGeladen = ohneSnapshot;
+  const refresh = async (revision = "main") => {
+    if (!snapshotGeladen) {
+      snapshot = await loadLatestSzenenSnapshot(namespace, token);
+      snapshotGeladen = true;
+      for (const name of aufgenommeneDateien(snapshot)) {
+        knownPaths.add(`${namespace}events/${name}`);
+      }
+    }
+    const neue = await loadPendingEvents(namespace, token, sinceTs, knownPaths, revision);
     if (neue.length) cachedRawEvents = [...cachedRawEvents, ...neue];
   };
   const sync = () => {
@@ -19200,15 +19501,34 @@ function createHfEventChannel(options) {
     }
     return syncInFlight;
   };
+  const sicht = () => {
+    const pending = cachedRawEvents.filter((event) => typeof event.type === "string" && event.type.startsWith(SZENEN_EVENT_PREFIX)).map((event) => ({
+      type: event.type,
+      payload: event.payload,
+      clientId: event.clientId,
+      ts: event.ts
+    }));
+    return mergeSnapshotAndPending(snapshot, pending).events;
+  };
   return {
     async readEvents() {
       await sync();
-      return cachedRawEvents.filter((event) => typeof event.type === "string" && event.type.startsWith(SZENEN_EVENT_PREFIX)).map((event) => ({
-        type: event.type,
-        payload: event.payload,
-        clientId: event.clientId,
-        ts: event.ts
-      }));
+      return sicht();
+    },
+    async readHead() {
+      return hfRepoHead(token);
+    },
+    async readEventsAt(revision) {
+      await refresh(revision);
+      return sicht();
+    },
+    async appendEventAt(type, payload, parentCommit) {
+      if (!type.startsWith(SZENEN_EVENT_PREFIX)) {
+        throw new Error(
+          `Event-Typ "${type}" gehoert nicht zur Domain szenen. Der geteilte Kanal wird ueber das Praefix "${SZENEN_EVENT_PREFIX}" getrennt.`
+        );
+      }
+      await writeHFEvent(namespace, token, type, payload, [], { ordered: true, parentCommit });
     },
     async appendEvent(type, payload) {
       if (!type.startsWith(SZENEN_EVENT_PREFIX)) {
@@ -19392,11 +19712,11 @@ async function resolveShotPayload(input) {
     };
   }
   const shot = shotPayload;
-  for (const fehler4 of ohneKettenReferenz(
+  for (const fehler5 of ohneKettenReferenz(
     validatePayload("shot", shotPayload).errors,
     chain ? "scene_setup_ref" : null
   )) {
-    diagnostics.push(diagnosticOfSchemaError(fehler4, `Shot ${shotElementId}`));
+    diagnostics.push(diagnosticOfSchemaError(fehler5, `Shot ${shotElementId}`));
   }
   let setup = null;
   let report = null;
@@ -19508,8 +19828,8 @@ async function resolveScenePayload(input) {
     "Kein Scene Setup, kein Shot: Der Lauf entsteht aus der Szene allein. Bildaufbau, Kamera und Zielmodell wurden nicht ergaenzt, sondern sind nicht vorhanden (D-135)."
   ];
   const diagnostics = [];
-  for (const fehler4 of validatePayload("scene", scenePayload).errors) {
-    diagnostics.push(diagnosticOfSchemaError(fehler4, `Szene ${sceneElementId}`));
+  for (const fehler5 of validatePayload("scene", scenePayload).errors) {
+    diagnostics.push(diagnosticOfSchemaError(fehler5, `Szene ${sceneElementId}`));
   }
   const faehig = sceneOnlyCapabilities(scenePayload);
   return komponiere({
@@ -21058,8 +21378,8 @@ function createFlowImageProvider(generateImage) {
             // Kein Seed: weder als Eingabe dokumentiert noch als Ausgabe
             // geliefert — nichts wird erfunden (D-107).
           });
-        } catch (fehler4) {
-          ersterFehler = fehler4 instanceof Error ? fehler4.message : String(fehler4);
+        } catch (fehler5) {
+          ersterFehler = fehler5 instanceof Error ? fehler5.message : String(fehler5);
           break;
         }
       }
@@ -21585,6 +21905,249 @@ function createImageGenerationPort(options) {
   };
 }
 
+// src/lib/szenen/imageJobStore.ts
+var istText6 = (wert) => typeof wert === "string" && wert.trim().length > 0;
+var SETTLED_STATUS = ["succeeded", "partial", "failed", "rejected"];
+function collectImageJobs(events) {
+  const nachId = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    if (event.type !== SZENEN_EVENT_TYPES.imageJobRequested) continue;
+    const payload = event.payload;
+    if (!payload || !istText6(payload.job_id) || !istText6(payload.prompt_run_id)) continue;
+    if (nachId.has(payload.job_id)) continue;
+    nachId.set(payload.job_id, {
+      job_id: payload.job_id,
+      prompt_run_id: payload.prompt_run_id,
+      execution_target_model_key: payload.execution_target_model_key ?? "",
+      execution_profile_id: payload.execution_profile_id ?? "",
+      image_count: typeof payload.image_count === "number" ? payload.image_count : 0,
+      ...payload.aspect_ratio ? { aspect_ratio: payload.aspect_ratio } : {},
+      requested_by: payload.requested_by ?? "",
+      store_id: payload.store_id ?? "",
+      created_at: payload.created_at ?? "",
+      status: "pending",
+      claim_attempts: []
+    });
+  }
+  for (const event of events) {
+    if (event.type !== SZENEN_EVENT_TYPES.imageJobClaimed) continue;
+    const payload = event.payload;
+    if (!payload || !istText6(payload.job_id) || !istText6(payload.claim_id)) continue;
+    const auftrag = nachId.get(payload.job_id);
+    if (!auftrag) continue;
+    const anspruch = {
+      job_id: payload.job_id,
+      claim_id: payload.claim_id,
+      client_id: payload.client_id ?? "",
+      claimed_at: payload.claimed_at ?? ""
+    };
+    nachId.set(payload.job_id, {
+      ...auftrag,
+      claim: auftrag.claim ?? anspruch,
+      claim_attempts: [...auftrag.claim_attempts, anspruch],
+      status: auftrag.status === "pending" ? "claimed" : auftrag.status
+    });
+  }
+  for (const event of events) {
+    if (event.type !== SZENEN_EVENT_TYPES.imageJobSettled) continue;
+    const payload = event.payload;
+    if (!payload || !istText6(payload.job_id)) continue;
+    const auftrag = nachId.get(payload.job_id);
+    if (!auftrag) continue;
+    if (!auftrag.claim || auftrag.claim.claim_id !== payload.claim_id) continue;
+    if (auftrag.status !== "claimed") continue;
+    if (!SETTLED_STATUS.includes(payload.status)) continue;
+    nachId.set(payload.job_id, {
+      ...auftrag,
+      status: payload.status,
+      ...payload.generation_batch_id ? { generation_batch_id: payload.generation_batch_id } : {},
+      ...payload.item_id ? { item_id: payload.item_id } : {},
+      ...typeof payload.produced_count === "number" ? { produced_count: payload.produced_count } : {},
+      ...payload.diagnostic ? { diagnostic: payload.diagnostic } : {},
+      settled_at: payload.settled_at ?? ""
+    });
+  }
+  return [...nachId.values()];
+}
+function jobsForPromptRun(events, runId) {
+  return collectImageJobs(events).filter((j) => j.prompt_run_id === runId);
+}
+function findImageJob(events, jobId) {
+  return collectImageJobs(events).find((j) => j.job_id === jobId) ?? null;
+}
+function generationBatchIdOf(jobId) {
+  return `job-${jobId}`;
+}
+
+// src/lib/szenen/imageJobPort.ts
+var ANSPRUCH_VERSUCHE = 4;
+function fehler4(error, aktion) {
+  return {
+    message: `${aktion}: ${error instanceof Error ? error.message : String(error)}`
+  };
+}
+function createImageJobPort(options) {
+  const { channel, imageGeneration, storeId, clientId } = options;
+  const newClaimId = options.newClaimId ?? (() => crypto.randomUUID());
+  const now = options.now ?? (() => /* @__PURE__ */ new Date());
+  return {
+    async listJobs(runId) {
+      try {
+        return { kind: "ok", value: jobsForPromptRun(await channel.readEvents(), runId) };
+      } catch (error) {
+        return {
+          kind: "error",
+          ...fehler4(error, `Die Bildauftraege des Laufs ${runId} konnten nicht gelesen werden`),
+          retryable: true
+        };
+      }
+    },
+    async claimAndRun(jobId) {
+      let letzterGrund = "";
+      for (let versuch = 1; versuch <= ANSPRUCH_VERSUCHE; versuch += 1) {
+        let kopf;
+        try {
+          kopf = await channel.readHead();
+        } catch (error) {
+          return {
+            kind: "error",
+            ...fehler4(error, `Der Kopf-Commit des Bestands war nicht lesbar; Bildauftrag ${jobId} wurde nicht uebernommen`),
+            retryable: true
+          };
+        }
+        let auftrag;
+        try {
+          auftrag = findImageJob(await channel.readEventsAt(kopf), jobId);
+        } catch (error) {
+          return {
+            kind: "error",
+            ...fehler4(error, `Der Bildauftrag ${jobId} konnte nicht gelesen werden`),
+            retryable: true
+          };
+        }
+        if (!auftrag) {
+          return {
+            kind: "rejected",
+            message: `Der Bildauftrag ${jobId} steht nicht im autoritativen Log dieses Bestands.`
+          };
+        }
+        if (auftrag.store_id !== storeId) {
+          return {
+            kind: "rejected",
+            message: `Der Bildauftrag ${jobId} gilt fuer den Bestand "${auftrag.store_id}", dieser Host arbeitet auf "${storeId}". Nutzer, Umgebung und Bestand muessen zusammenpassen.`
+          };
+        }
+        if (auftrag.status !== "pending") {
+          return {
+            kind: "lost",
+            job: auftrag,
+            message: `Der Bildauftrag ${jobId} ist bereits "${auftrag.status}"` + (auftrag.claim ? ` (Client ${auftrag.claim.client_id})` : "") + ". Er wird nicht erneut ausgefuehrt \u2014 ein zweiter Lauf waere ein zweites Mal bezahlte Rechenzeit."
+          };
+        }
+        const anspruch = {
+          job_id: jobId,
+          claim_id: newClaimId(),
+          client_id: clientId,
+          claimed_at: now().toISOString()
+        };
+        try {
+          await channel.appendEventAt(
+            SZENEN_EVENT_TYPES.imageJobClaimed,
+            anspruch,
+            kopf
+          );
+        } catch (error) {
+          if (istPreconditionFehler(error)) {
+            letzterGrund = error instanceof Error ? error.message : String(error);
+            continue;
+          }
+          return {
+            kind: "error",
+            ...fehler4(error, `Der Anspruch auf Bildauftrag ${jobId} konnte nicht angehaengt werden`),
+            retryable: true
+          };
+        }
+        const gewonnen = {
+          ...auftrag,
+          status: "claimed",
+          claim: anspruch,
+          claim_attempts: [...auftrag.claim_attempts, anspruch]
+        };
+        return await fuehreAus(gewonnen, anspruch, jobId);
+      }
+      return {
+        kind: "error",
+        message: `Der Bildauftrag ${jobId} liess sich in ${ANSPRUCH_VERSUCHE} Versuchen nicht exklusiv uebernehmen \u2014 der Bestand wird gerade von anderer Seite beschrieben (${letzterGrund}). Es wurde nichts ausgefuehrt und nichts bezahlt; ein neuer Versuch ist gefahrlos.`,
+        retryable: true
+      };
+    }
+  };
+  async function fuehreAus(gewonnen, anspruch, jobId) {
+    const ergebnis = await imageGeneration.startFromPromptRun({
+      runId: gewonnen.prompt_run_id,
+      generationBatchId: generationBatchIdOf(jobId),
+      executionTargetModelKey: gewonnen.execution_target_model_key,
+      executionProfileId: gewonnen.execution_profile_id,
+      imageCount: gewonnen.image_count,
+      ...gewonnen.aspect_ratio ? { aspectRatio: gewonnen.aspect_ratio } : {}
+    });
+    const abschluss = {
+      job_id: jobId,
+      claim_id: anspruch.claim_id,
+      ...abschlussFelder(ergebnis, jobId),
+      settled_at: now().toISOString()
+    };
+    try {
+      await channel.appendEvent(SZENEN_EVENT_TYPES.imageJobSettled, abschluss);
+    } catch {
+    }
+    const gelesen = await channel.readEvents().catch(() => null);
+    return {
+      kind: "ok",
+      job: (gelesen && findImageJob(gelesen, jobId)) ?? {
+        ...gewonnen,
+        status: abschluss.status,
+        ...abschluss.generation_batch_id ? { generation_batch_id: abschluss.generation_batch_id } : {},
+        ...abschluss.diagnostic ? { diagnostic: abschluss.diagnostic } : {},
+        settled_at: abschluss.settled_at
+      }
+    };
+  }
+}
+function istPreconditionFehler(error) {
+  return Boolean(error && typeof error === "object" && error.name === "HfPreconditionFailed");
+}
+function abschlussFelder(ergebnis, jobId) {
+  const batchId = generationBatchIdOf(jobId);
+  switch (ergebnis.kind) {
+    case "succeeded":
+      return {
+        status: "succeeded",
+        generation_batch_id: batchId,
+        item_id: ergebnis.batch.item_id,
+        produced_count: ergebnis.batch.images.length
+      };
+    case "partial":
+      return {
+        status: "partial",
+        generation_batch_id: batchId,
+        item_id: ergebnis.batch.item_id,
+        produced_count: ergebnis.produced,
+        diagnostic: `Angefordert ${ergebnis.requested}, geliefert ${ergebnis.produced}.`
+      };
+    case "failed":
+      return { status: "failed", produced_count: 0, diagnostic: ergebnis.message };
+    case "unsupported":
+      return {
+        status: "rejected",
+        produced_count: 0,
+        diagnostic: `Zielmodell "${ergebnis.targetModelKey}" ist in dieser Umgebung nicht ausfuehrbar: ${ergebnis.reason}`
+      };
+    default:
+      return { status: "rejected", produced_count: 0, diagnostic: ergebnis.message };
+  }
+}
+
 // src/lib/szenen/flowViewPort.ts
 var defaultContext = {
   async chainFor(contextId) {
@@ -21683,10 +22246,21 @@ function createFlowSzenenViewPort(options) {
     },
     ...options.now ? { now: options.now } : {}
   }) : void 0;
+  const kanalMitRevision = typeof channel.readHead === "function" && typeof channel.readEventsAt === "function" && typeof channel.appendEventAt === "function";
+  const imageJobs = imageGeneration && hatHfZugangsdaten && kanalMitRevision ? createImageJobPort({
+    channel,
+    imageGeneration,
+    // Dieselbe Form, in der der Server seinen Bestand kennt (`storeId`).
+    storeId: `hf:${options.namespace}`,
+    clientId: options.imageJobClientId ?? crypto.randomUUID(),
+    ...options.newImageJobClaimId ? { newClaimId: options.newImageJobClaimId } : {},
+    ...options.now ? { now: options.now } : {}
+  }) : void 0;
   const port = { elements, context, runs, derivation, imageBatchHistory };
   if (imageLibrary) port.imageLibrary = imageLibrary;
   if (imageBatchWrite) port.imageBatchWrite = imageBatchWrite;
   if (imageGeneration) port.imageGeneration = imageGeneration;
+  if (imageJobs) port.imageJobs = imageJobs;
   return port;
 }
 
@@ -21754,7 +22328,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
     }
   }, []);
   const [showStart, setShowStart] = (0, import_react50.useState)(true);
-  const [showSzenen, setShowSzenen] = (0, import_react50.useState)(false);
   const [layoutChoice, setLayoutChoice] = (0, import_react50.useState)(() => {
     try {
       return localStorage.getItem("aa-layout") || null;
@@ -22567,24 +23140,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       }
     );
   }
-  if (showSzenen && szenenPort) {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("main", { className: "flow-szenen-shell", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("header", { className: "flow-szenen-shell__header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", onClick: () => setShowSzenen(false), children: "Zur\xFCck" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("strong", { children: "Szenen" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("small", { children: [
-            effectiveNamespace,
-            " \xB7 User ",
-            tagBaseResult.selectedUserId,
-            " \xB7 Context ",
-            tagBaseResult.selectedContextId
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flow-szenen-shell__content", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SzenenView, { port: szenenPort, contextId: szenenKontextId }) })
-    ] });
-  }
   if (showStart) {
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "fixed inset-0 bg-[#0e0e0e] flex flex-col items-center justify-center p-6", style: { gap: 28, ...hcStyle }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
@@ -22662,21 +23217,6 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           ))
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flow-szenen-entry", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-          "button",
-          {
-            type: "button",
-            disabled: !szenenPort || !bootstrapTarget.ready,
-            onClick: () => setShowSzenen(true),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "material-symbols-outlined", children: "movie" }),
-              "Szenen \xF6ffnen"
-            ]
-          }
-        ),
-        !szenenPort && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("small", { children: "F\xFCr Szenen zuerst den HF-Token setzen." })
-      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col items-center gap-2 w-full max-w-[280px]", children: [
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-white/25 text-[10px] uppercase tracking-widest font-bold", children: "Layout w\xE4hlen & starten" }),
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "grid grid-cols-2 gap-2 w-full", children: [
@@ -22744,6 +23284,11 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
       );
     }
   }
+  const szenenPane = szenenPort ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flow-szenen-pane", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SzenenView, { port: szenenPort, contextId: szenenKontextId }) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flow-szenen-pane flow-szenen-pane--empty", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("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;
@@ -22775,6 +23320,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           onTagMove: handleTagMove
         }
       ) }),
+      mobileTab === "szenen" && szenenPane,
       mobileTab === "stage" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2 px-3 border-b border-white/5 bg-black/30 shrink-0", style: { height: 52 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CompactDropdown, { value: aspectRatio, onChange: setAspectRatio, options: [{ label: "1:1", value: "1:1" }, { label: "16:9", value: "16:9" }, { label: "9:16", value: "9:16" }] }),
@@ -23058,7 +23604,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__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "material-symbols-outlined text-[24px]", children: tab.icon }),
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wide", children: tab.label })
       ] }, tab.id)) })
@@ -23253,6 +23799,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__ */ (0, import_jsx_runtime48.jsx)(
+            "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__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -23275,7 +23829,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "close" }) })
         ] }) }),
-        middlePanel === "labs" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LabsTab, { services: labServices, onResult: (item) => {
+        middlePanel === "szenen" ? szenenPane : middlePanel === "labs" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LabsTab, { services: labServices, onResult: (item) => {
           const frame = item.frames[0];
           if (frame?.base64) setCurrentResult(frameToGeneration(frame, item));
         } }) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
@@ -23360,8 +23914,7 @@ function AvatarArchitectApp({ onGenerateImage, onGeneratePrompt, onDownload, onS
           serverBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { onClick: () => setShowSzenen(true), className: "w-10 flex items-center justify-center relative text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: "storage" }) })
         ] }),
         hfToken && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: `material-symbols-outlined text-[18px]${isHfRefreshing ? " animate-spin" : ""}`, children: "sync" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { onClick: () => setIsRightCollapsed(!isRightCollapsed), className: "w-10 flex items-center justify-center text-white/20 hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "material-symbols-outlined text-[18px]", children: isRightCollapsed ? "chevron_left" : "chevron_right" }) })