@rslsp1/fa-app-tools 4.0.0 → 5.0.0

package/dist/index.js

@@ -807,7 +807,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // package.json
-var version = "4.0.0";
+var version = "5.0.0";
 
 // src/hooks/useOnClickOutside.ts
 var import_react = require("react");
@@ -846,7 +846,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.szenen-view input:not([type="checkbox"]),\n.szenen-view select,\n.szenen-view textarea {\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.szenen-detail__field {\n    margin-bottom: var(--space-md);\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.szenen-runs > ol > li > header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    color: var(--color-text-secondary);\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    .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 Kacheln wie in den Labs, aber mit dem CSS dieser\n   Ansicht: eine gemeinsame Komponente \xFCber zwei Dom\xE4nengrenzen w\xE4re eine\n   Kopplung, die keiner gewollt hat. */\n.szenen-bildwahl__liste {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__liste button {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    width: 100%;\n    padding: var(--space-sm);\n    text-align: left;\n    font-size: 0.8125rem;\n}\n\n.szenen-bildwahl__liste img {\n    width: 100%;\n    aspect-ratio: 1;\n    object-fit: cover;\n    border-radius: var(--radius-sm);\n}\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}\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.szenen-bilder__eingangsliste img,\n.szenen-bilder__batchliste img {\n    width: 4rem;\n    height: 4rem;\n    object-fit: cover;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batch {\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-border);\n    border-radius: var(--radius-sm);\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.szenen-bilder__aktion {\n    display: grid;\n    gap: var(--space-sm);\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-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/* ==========================================================================\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 aufgeklappter Objektfelder (`prompt_render_settings`). */\n.szenen-detail__group {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: var(--space-md) 0;\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group > legend {\n    padding: 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\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: 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.szenen-view input:not([type="checkbox"]),\n.szenen-view select,\n.szenen-view textarea {\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.szenen-detail__field {\n    margin-bottom: var(--space-md);\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.szenen-runs > ol > li > header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    color: var(--color-text-secondary);\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    .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 zweistufig wie in den Labs, aber mit dem CSS dieser\n   Ansicht: eine gemeinsame Komponente \xFCber zwei Dom\xE4nengrenzen w\xE4re eine\n   Kopplung, die keiner gewollt hat.\n\n   Die Kachel ist die Einheit, nicht die Textzeile. Der gemeldete Screenshot vom\n   2026-08-22 zeigte im Flow-Host sechs schmale Spalten mit langen Prompttexten;\n   `minmax(7rem, 1fr)` plus ein quadratisches Bild h\xE4lt die Karte auch auf\n   schmalen Displays greifbar. */\n.szenen-bildwahl__raster {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__raster button {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    width: 100%;\n    padding: var(--space-sm);\n    text-align: left;\n    font-size: 0.8125rem;\n}\n\n/* Der Platz der Kachel steht, bevor das Bild da ist \u2014 sonst springt das ganze\n   Raster, sobald die erste Vorschau eintrifft. */\n.szenen-bildkachel {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    border-radius: var(--radius-sm);\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: block;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(135deg, var(--color-bg-app), var(--color-bg-surface));\n}\n\n/* Wie viele Varianten das Werk hat \u2014 dieselbe Auskunft wie im LabImagePicker,\n   und der Grund, warum ein Klick auf die Karte eine Galerie \xF6ffnet. */\n.szenen-bildwahl__anzahl {\n    position: absolute;\n    top: calc(var(--space-sm) + 0.25rem);\n    right: calc(var(--space-sm) + 0.25rem);\n    padding: 0.05rem 0.35rem;\n    font-size: 0.6875rem;\n    font-weight: 700;\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.szenen-bildwahl__nummer {\n    font-size: 0.6875rem;\n    color: var(--color-text-secondary);\n}\n\n/* Zwei Zeilen Titel, dann Schluss: Der Prompt eines Werkes ist oft mehrere\n   hundert Zeichen lang und w\xE4re als Prim\xE4rdarstellung eine Textw\xFCste. */\n.szenen-bildwahl__titel {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    line-height: 1.25;\n}\n\n.szenen-bildwahl__kopf {\n    display: flex;\n    align-items: center;\n    gap: var(--space-sm);\n    flex-wrap: wrap;\n    margin-top: var(--space-sm);\n}\n\n.szenen-bildwahl__werktitel {\n    font-size: 0.8125rem;\n    color: var(--color-text-secondary);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\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.5rem;\n    flex: 0 0 auto;\n}\n\n.szenen-bildwahl__gewaehlt .szenen-bildwahl__titel {\n    min-width: 0;\n    max-width: 14rem;\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.szenen-bilder__eingangsliste img,\n.szenen-bilder__batchliste img {\n    width: 4rem;\n    height: 4rem;\n    object-fit: cover;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batch {\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-border);\n    border-radius: var(--radius-sm);\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.szenen-bilder__aktion {\n    display: grid;\n    gap: var(--space-sm);\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-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/* ==========================================================================\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 aufgeklappter Objektfelder (`prompt_render_settings`). */\n.szenen-detail__group {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: var(--space-md) 0;\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group > legend {\n    padding: 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\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 = () => {
@@ -15515,6 +15515,29 @@ var MediaArea = ({ port }) => {
 // src/features/szenen/areas/DeriveArea.tsx
 var import_react47 = require("react");
 
+// src/lib/szenen/bildVorschau.ts
+async function ladeVorschauen(port, mediaRefs, fertig, optionen = {}) {
+  const laden = port.loadPreview;
+  if (!laden) return;
+  const parallel = Math.max(1, optionen.parallel ?? 4);
+  const lauf = optionen.lauf;
+  const offen = mediaRefs.filter((ref) => !(optionen.hat?.(ref) ?? false));
+  let naechster = 0;
+  async function arbeiter() {
+    while (naechster < offen.length) {
+      if (lauf?.abgebrochen) return;
+      const ref = offen[naechster];
+      naechster += 1;
+      const ergebnis = await laden.call(port, ref);
+      if (lauf?.abgebrochen) return;
+      if (ergebnis.kind === "ok") fertig(ref, ergebnis.value);
+    }
+  }
+  await Promise.all(
+    Array.from({ length: Math.min(parallel, offen.length) }, () => arbeiter())
+  );
+}
+
 // src/lib/szenen/derivationExamples.ts
 var PROPOSAL_EXAMPLE = {
   scene: {
@@ -16717,14 +16740,64 @@ function readAsBase642(datei) {
     leser.readAsDataURL(datei);
   });
 }
+function useVorschauen(port, mediaRefs) {
+  const [quellen, setQuellen] = (0, import_react47.useState)(() => /* @__PURE__ */ new Map());
+  const gehalten = (0, import_react47.useRef)(/* @__PURE__ */ new Map());
+  const schluessel = mediaRefs.join(" ");
+  (0, import_react47.useEffect)(() => {
+    const bestand = port.imageLibrary;
+    if (!bestand?.loadPreview) return void 0;
+    const refs = schluessel ? schluessel.split(" ") : [];
+    const lauf = { abgebrochen: false };
+    void ladeVorschauen(
+      bestand,
+      refs,
+      (mediaRef, quelle) => {
+        gehalten.current.set(mediaRef, quelle);
+        setQuellen(new Map(gehalten.current));
+      },
+      { parallel: 4, hat: (ref) => gehalten.current.has(ref), lauf }
+    );
+    return () => {
+      lauf.abgebrochen = true;
+    };
+  }, [port, schluessel]);
+  return quellen;
+}
+var Kachel = ({ quelle, alt }) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "szenen-bildkachel", children: quelle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src: quelle, alt, loading: "lazy" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "szenen-bildkachel__leer", "aria-hidden": "true" }) });
 var BildWaehler = ({ port, gewaehlt, onWaehlen, onEntfernen }) => {
   const [suche, setSuche] = (0, import_react47.useState)("");
-  const [bilder] = usePortQuery(
-    () => port.imageLibrary.listImages({ search: suche.trim() || void 0, limit: 60 }),
+  const [offenesWerk, setOffenesWerk] = (0, import_react47.useState)(null);
+  const [items] = usePortQuery(
+    () => port.imageLibrary.listItems({ search: suche.trim() || void 0, limit: 60 }),
     [port, suche]
   );
+  const werk = items.status === "ready" ? items.value.find((i) => i.itemRef === offenesWerk) ?? null : null;
+  const sichtbar = (0, import_react47.useMemo)(() => {
+    const refs = werk ? werk.images.map((b) => b.mediaRef) : items.status === "ready" ? items.value.map((i) => i.images[0]?.mediaRef).filter((r) => Boolean(r)) : [];
+    return [.../* @__PURE__ */ new Set([...refs, ...gewaehlt.map((b) => b.mediaRef)])];
+  }, [items, werk, gewaehlt]);
+  const quellen = useVorschauen(port, sichtbar);
+  const quelleVon = (bild) => bild.thumbUrl || quellen.get(bild.mediaRef) || null;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "szenen-bildwahl", "data-testid": "bildwahl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("label", { className: "szenen-field", children: [
+    werk ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "szenen-bildwahl__kopf", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "szenen-bildwahl__zurueck",
+          onClick: () => setOffenesWerk(null),
+          "data-testid": "bildwahl-zurueck",
+          children: "Zurueck zur Auswahl"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "szenen-bildwahl__werktitel", "data-testid": "bildwahl-werktitel", children: [
+        werk.title,
+        " \xB7 ",
+        werk.images.length,
+        " Bilder"
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("label", { className: "szenen-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: "Bild aus dem Bestand" }),
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "input",
@@ -16732,31 +16805,70 @@ var BildWaehler = ({ port, gewaehlt, onWaehlen, onEntfernen }) => {
           type: "search",
           value: suche,
           onChange: (e) => setSuche(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") e.preventDefault();
+          },
           placeholder: "Suchen \u2026",
           "data-testid": "bild-suche"
         }
       )
     ] }),
-    bilder.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: "Bilder werden geladen \u2026" }),
-    bilder.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: "szenen-error", role: "alert", children: [
+    items.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: "Bilder werden geladen \u2026" }),
+    items.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: "szenen-error", role: "alert", children: [
       "Der Bildbestand ist nicht lesbar: ",
-      bilder.message
+      items.message
     ] }),
-    bilder.status === "ready" && bilder.value.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "szenen-empty", "data-testid": "bildwahl-leer", children: "Zu dieser Suche gibt es kein Bild. Ohne Treffer bleibt der Upload." }),
-    bilder.status === "ready" && bilder.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "szenen-bildwahl__liste", children: bilder.value.map((bild) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    items.status === "ready" && items.value.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "szenen-empty", "data-testid": "bildwahl-leer", children: "Zu dieser Suche gibt es kein Bild. Ohne Treffer bleibt der Upload." }),
+    werk && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "szenen-bildwahl__raster", "data-testid": "bildwahl-galerie", children: werk.images.map((bild, position) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "button",
       {
         type: "button",
-        onClick: () => onWaehlen(bild),
+        onClick: () => {
+          onWaehlen(bild);
+          setOffenesWerk(null);
+        },
         "data-testid": `bild-waehlen-${bild.mediaRef}`,
+        title: bild.title,
         children: [
-          bild.thumbUrl && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src: bild.thumbUrl, alt: "" }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: bild.title })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Kachel, { quelle: quelleVon(bild), alt: bild.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "szenen-bildwahl__nummer", children: [
+            "#",
+            position + 1
+          ] })
         ]
       }
     ) }, bild.mediaRef)) }),
+    !werk && items.status === "ready" && items.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "szenen-bildwahl__raster", "data-testid": "bildwahl-werke", children: items.value.map((item) => {
+      const deckbild = item.images[0];
+      if (!deckbild) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => item.images.length === 1 ? onWaehlen(deckbild) : setOffenesWerk(item.itemRef),
+          "data-testid": `item-waehlen-${item.itemRef}`,
+          title: item.title,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Kachel, { quelle: quelleVon(deckbild), alt: item.title }),
+            item.images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              "span",
+              {
+                className: "szenen-bildwahl__anzahl",
+                "data-testid": `item-anzahl-${item.itemRef}`,
+                children: [
+                  item.images.length,
+                  "x"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "szenen-bildwahl__titel", children: item.title })
+          ]
+        }
+      ) }, item.itemRef);
+    }) }),
     gewaehlt.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "szenen-bildwahl__gewaehlt", "data-testid": "bilder-gewaehlt", children: gewaehlt.map((bild) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { children: [
-      bild.title,
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Kachel, { quelle: quelleVon(bild), alt: bild.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "szenen-bildwahl__titel", children: bild.title }),
       /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "button",
         {
@@ -16795,7 +16907,10 @@ var DeriveArea = ({ port, contextId }) => {
   );
   const gewaehlt = regeln.status === "ready" ? regeln.value.find((r) => r.versionId === policyVersionId) ?? null : null;
   async function starten(folgt) {
-    if (!gewaehlt) return;
+    if (!gewaehlt) {
+      setMeldung("Bitte zuerst eine Rekonstruktionsregel waehlen \u2014 ohne sie ist kein Lauf reproduzierbar (D-03).");
+      return;
+    }
     setLaeuft(true);
     setMeldung(null);
     setLauf(null);
@@ -17229,6 +17344,17 @@ var SzenenView = ({
 };
 
 // src/lib/szenen/flowTextGenerationPort.ts
+function alsFlowTextZugang(sdk) {
+  return async (prompt, options) => {
+    const antwort = await sdk(prompt, options);
+    if (typeof antwort?.text !== "string") {
+      throw new Error(
+        `Flow.generate.text lieferte kein { text: string }, sondern ${antwort === null || antwort === void 0 ? String(antwort) : typeof antwort}: ${JSON.stringify(antwort)?.slice(0, 200)}`
+      );
+    }
+    return antwort.text;
+  };
+}
 function createFlowTextGenerationPort(generateText, options = {}) {
   const provider = options.provider ?? "flow";
   const modelId = options.modelId ?? "flow.generate.text";
@@ -20235,6 +20361,7 @@ function createHfImageStore(options) {
   const basisMs = options.leseBasisMs ?? 400;
   const schlafen2 = options.schlafen ?? warten;
   const abgelegt = /* @__PURE__ */ new Map();
+  const vorschauen = /* @__PURE__ */ new Map();
   const bekanntePfade = /* @__PURE__ */ new Set();
   let gefalteterBestand = null;
   let laufenderAbgleich = null;
@@ -20258,7 +20385,7 @@ function createHfImageStore(options) {
     }
     return laufenderAbgleich;
   }
-  return {
+  const speicher = {
     bestand: bestandAbgleichen,
     async putWithId(id, base64, mimeType, titel) {
       const echterTyp = typAusBytes(base64, mimeType);
@@ -20277,6 +20404,38 @@ function createHfImageStore(options) {
       }, []);
       abgelegt.set(id, { data: base64, mimeType: echterTyp });
     },
+    async preview(id) {
+      const bekannt = vorschauen.get(id);
+      if (bekannt) return bekannt;
+      const eben = abgelegt.get(id);
+      if (eben) {
+        const quelle2 = `data:${eben.mimeType};base64,${eben.data}`;
+        vorschauen.set(id, quelle2);
+        return quelle2;
+      }
+      const zustand = await bestandAbgleichen();
+      const eintrag = zustand.metadata.find((e) => e.id === id);
+      if (eintrag?.hasThumb && eintrag.filename) {
+        const klein = await hfLoadImageAsBase64(
+          id,
+          token,
+          void 0,
+          eintrag.filename,
+          void 0,
+          eintrag.mimeType,
+          true
+        );
+        if (klein) {
+          const quelle2 = `data:${eintrag.mimeType || "image/jpeg"};base64,${klein}`;
+          vorschauen.set(id, quelle2);
+          return quelle2;
+        }
+      }
+      const voll = await speicher.resolve(id);
+      const quelle = `data:${voll.mimeType};base64,${voll.data}`;
+      vorschauen.set(id, quelle);
+      return quelle;
+    },
     async resolve(id, mimeType) {
       const eben = abgelegt.get(id);
       if (eben) return eben;
@@ -20314,6 +20473,47 @@ function createHfImageStore(options) {
       );
     }
   };
+  return speicher;
+}
+
+// src/lib/szenen/libraryItems.ts
+var LOCATOR = /^(.+)-(\d+)$/;
+function locatorTeile(mediaRef) {
+  const treffer = LOCATOR.exec(mediaRef);
+  if (!treffer) return { stamm: mediaRef, position: null };
+  return { stamm: treffer[1], position: Number(treffer[2]) };
+}
+function gruppiereZuItems(bilder) {
+  const gruppen = /* @__PURE__ */ new Map();
+  for (const bild of bilder) {
+    const { stamm } = locatorTeile(bild.mediaRef);
+    const vorhanden = gruppen.get(stamm);
+    if (vorhanden) vorhanden.push(bild);
+    else gruppen.set(stamm, [bild]);
+  }
+  const items = [...gruppen.entries()].map(([stamm, mitglieder]) => {
+    const sortiert = [...mitglieder].sort((a, b) => {
+      const pa = locatorTeile(a.mediaRef).position ?? 0;
+      const pb = locatorTeile(b.mediaRef).position ?? 0;
+      return pa - pb;
+    });
+    const erstes = sortiert[0];
+    const itemRef = sortiert.length === 1 ? erstes.mediaRef : stamm;
+    const juengstes = sortiert.reduce(
+      (max, b) => Math.max(max, b.timestamp ?? 0),
+      0
+    );
+    return {
+      item: {
+        itemRef,
+        title: erstes.itemTitle?.trim() || erstes.title || itemRef,
+        images: sortiert.map(({ timestamp: _t, itemTitle: _i, ...bild }) => bild)
+      },
+      juengstes
+    };
+  });
+  items.sort((a, b) => b.juengstes - a.juengstes);
+  return items.map((e) => e.item);
 }
 
 // src/lib/szenen/hfImageLibrary.ts
@@ -20321,13 +20521,22 @@ function fehler2(nachricht, retryable = false) {
   return { kind: "error", message: nachricht, retryable };
 }
 function alsBild(eintrag) {
+  const { position } = locatorTeile(eintrag.id);
+  const werk = eintrag.prompt?.trim() || "";
   return {
     mediaRef: eintrag.id,
-    // Der Prompt ist der einzige menschenlesbare Text, den ein Bild dort trägt.
-    // Fehlt er, ist die Kennung ehrlicher als ein erfundener Name.
-    title: eintrag.prompt?.trim() || eintrag.id,
+    // Innerhalb eines mehrbildigen Werkes tragen alle Einträge denselben
+    // Prompt — der Abgleich schreibt ihn je Bild aus derselben Library-Zeile.
+    // Deshalb bekommt die Kachel dort die Position dazu, sonst stünde
+    // vierzehnmal derselbe Satz.
+    title: position === null ? werk || eintrag.id : `${werk || eintrag.id} \xB7 Bild ${position + 1}`,
     mimeType: eintrag.mimeType || "image/jpeg",
-    thumbUrl: null
+    // Kein `thumbUrl`: Die Datei liegt auf HF hinter einem Token, und ein
+    // `<img src>` käme dort nicht durch. Die Quelle entsteht über
+    // `loadPreview()` — und nur für die Kacheln, die wirklich gezeigt werden.
+    thumbUrl: null,
+    itemTitle: werk || null,
+    ...typeof eintrag.timestamp === "number" ? { timestamp: eintrag.timestamp } : {}
   };
 }
 function createHfImageLibrary(options) {
@@ -20338,15 +20547,14 @@ function createHfImageLibrary(options) {
     ...options.now ? { now: options.now } : {}
   });
   return {
-    async listImages(query) {
+    async listItems(query) {
       try {
         const zustand = await store.bestand();
         const eintraege = zustand?.metadata ?? [];
+        const items = gruppiereZuItems(eintraege.map(alsBild));
         const gesucht = query?.search?.trim().toLowerCase();
-        const gefiltert = gesucht ? eintraege.filter((e) => (e.prompt ?? "").toLowerCase().includes(gesucht) || e.id.toLowerCase().includes(gesucht)) : eintraege;
-        const sortiert = [...gefiltert].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
-        const begrenzt = query?.limit ? sortiert.slice(0, query.limit) : sortiert;
-        return { kind: "ok", value: begrenzt.map(alsBild) };
+        const gefiltert = gesucht ? items.filter((i) => i.title.toLowerCase().includes(gesucht) || i.itemRef.toLowerCase().includes(gesucht)) : items;
+        return { kind: "ok", value: query?.limit ? gefiltert.slice(0, query.limit) : gefiltert };
       } catch (error) {
         return fehler2(
           `Der Bildbestand konnte nicht gelesen werden: ${error instanceof Error ? error.message : String(error)}`,
@@ -20354,6 +20562,16 @@ function createHfImageLibrary(options) {
         );
       }
     },
+    async loadPreview(mediaRef) {
+      try {
+        return { kind: "ok", value: await store.preview(mediaRef) };
+      } catch (error) {
+        return fehler2(
+          `Die Vorschau von ${mediaRef} ist nicht ladbar: ${error instanceof Error ? error.message : String(error)}`,
+          true
+        );
+      }
+    },
     async resolveImage(mediaRef, mimeTypeHinweis) {
       try {
         const bild = await store.resolve(mediaRef, mimeTypeHinweis);
@@ -20366,10 +20584,13 @@ function createHfImageLibrary(options) {
       const id = newImageId();
       try {
         await store.putWithId(id, input.data, input.mime_type, input.title);
-        return {
-          kind: "ok",
-          value: { mediaRef: id, title: input.title, mimeType: input.mime_type, thumbUrl: null }
+        const abgelegt = {
+          mediaRef: id,
+          title: input.title,
+          mimeType: input.mime_type,
+          thumbUrl: null
         };
+        return { kind: "ok", value: abgelegt };
       } catch (error) {
         return fehler2(
           `Das Bild konnte nicht abgelegt werden: ${error instanceof Error ? error.message : String(error)}`,
@@ -23018,10 +23239,10 @@ function FaApp({
     }).catch(() => {
     });
   }, [serverBaseUrl]);
-  const wrappedPrompt = async (text, options) => {
-    const result = await onGeneratePrompt(text, options);
-    return result.text;
-  };
+  const wrappedPrompt = (0, import_react50.useMemo)(
+    () => alsFlowTextZugang(onGeneratePrompt),
+    [onGeneratePrompt]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     AvatarArchitectApp,
     {