@rslsp1/fa-app-tools 5.1.0 → 6.1.0

package/dist/index.js

@@ -807,7 +807,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // package.json
-var version = "5.1.0";
+var version = "6.1.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\n/* Stufe 6.7.2 (D-126) \u2014 Advanced-/Debug-Fl\xE4che f\xFCr die rohe, schema-getriebene\n * Feldliste einer Szene. Gestrichelt wie die anderen \u201EAngebot statt\n * Auskunft"-Bereiche, aber ohne Akzentfarbe: sie ist kein Vorschlag, sondern\n * ein Eskalationsweg. */\n.szenen-detail__technical {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__technical > summary {\n    margin-bottom: var(--space-sm);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__technical[open] > summary {\n    margin-bottom: var(--space-md);\n}\n\n.szenen-detail__field small,\n.szenen-capability small {\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__preview-errors,\n.szenen-detail__notice--error,\n.szenen-view [role="alert"] {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-detail__notice {\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__notice--success,\n.szenen-view [data-tone="success"] {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n    border-color: var(--color-accent-green);\n}\n\n.szenen-scene-editor {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-md);\n    margin-bottom: 0;\n}\n\n.szenen-scene-editor > section {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* \u2500\u2500 Stufe 6.7.2 (D-126): Node-/Relationskarten \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Nodes und Beziehungen sind `<details>` \u2014 dieselbe Interaktionssprache wie\n * \u201ERohantwort (Diagnose)" und \u201EBilder zu diesem Lauf" in RunsPanel.tsx. Kopf\n * (immer sichtbar) tr\xE4gt Inhalt zuerst, Technik zuletzt; Body (nur bei\n * ge\xF6ffneter Karte) tr\xE4gt die Bearbeitungscontrols. Padding wandert von der\n * `<li>` in Kopf/Body, damit die Karte keinen doppelten Rand bekommt. */\n.szenen-scene-editor li {\n    padding: 0;\n    overflow: hidden;\n}\n\n.szenen-node-karte__kopf,\n.szenen-relation-karte__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs) var(--space-sm);\n    padding: var(--space-sm);\n    cursor: pointer;\n    list-style: none;\n}\n\n.szenen-node-karte__kopf::-webkit-details-marker,\n.szenen-relation-karte__kopf::-webkit-details-marker {\n    display: none;\n}\n\n.szenen-node-karte__titel {\n    flex: 1 1 12rem;\n    min-width: 0;\n    color: var(--color-text-primary);\n    font-weight: 600;\n    overflow-wrap: anywhere;\n}\n\n.szenen-node-karte__typ {\n    flex: none;\n    padding: 0.15rem 0.55rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    white-space: nowrap;\n}\n\n/* node_id klein, monospace, sekund\xE4r \u2014 sichtbar auch bei zugeklappter Karte,\n * aber optisch klar hinter Beschreibung und Typ. */\n.szenen-node-karte__meta {\n    flex: 1 1 100%;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n.szenen-node-karte__meta code {\n    font-size: inherit;\n}\n\n.szenen-node-karte__body,\n.szenen-relation-karte__body {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-sm) var(--space-sm);\n    border-top: 1px solid var(--color-border);\n}\n\n/* \xA74 \u2014 Prim\xE4raktion und destruktive Aktion optisch getrennt: \u201ENode/Beziehung\n * entfernen" bekommt einen eigenen, warnenden Ton statt gleichgewichtig neben\n * der normalen Bearbeitung zu stehen. */\n.szenen-node-karte__entfernen,\n.szenen-relation-karte__entfernen {\n    justify-self: start;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-relation-karte__kopf {\n    font-size: 0.9rem;\n}\n\n.szenen-relation-karte__kopf code {\n    overflow-wrap: anywhere;\n}\n\n.szenen-relation-karte__pfeil {\n    flex: none;\n    color: var(--color-text-secondary);\n}\n\n/* Die Composer-\xD6ffner (\u201E+ Node hinzuf\xFCgen", \u201E+ Beziehung hinzuf\xFCgen") sind\n * Angebote, keine Ausk\xFCnfte \u2014 dasselbe gestrichelte Muster wie beim Folgelauf\n * und der Fehlerrettung (\xA73.3/\xA73.5). */\n.szenen-scene-editor__oeffnen {\n    width: 100%;\n    border-style: dashed;\n}\n\n.szenen-refpicker {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: var(--space-sm) 0;\n    padding: var(--space-sm) 0;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-refpicker legend {\n    padding: 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n}\n\n.szenen-capability > ul > li {\n    display: grid;\n    grid-template-columns: minmax(10rem, 1fr) auto minmax(14rem, 2fr);\n    align-items: start;\n    gap: var(--space-sm);\n}\n\n.szenen-capability__state {\n    padding: 0.1rem 0.5rem;\n    border-radius: var(--radius-full);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-capability__state--yes {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n}\n\n.szenen-capability__state--no {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n}\n\n.szenen-capability__state--unknown {\n    color: #fef08a;\n    background: rgba(234, 179, 8, 0.2);\n}\n\n.szenen-runs > ol > li {\n    display: grid;\n    gap: var(--space-sm);\n}\n\n/* B1 \u2014 die geschlossene Runde. Vorher stand die `run_id` als erstes und war\n   die einzige Information, die niemand liest; jetzt beantwortet die Kopfzeile\n   welche Runde, ob sie durchging, mit welchem Modell und was ungef\xE4hr\n   herauskam. */\n.szenen-runs__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-sm);\n    width: 100%;\n    padding: var(--space-xs) 0;\n    text-align: left;\n    color: var(--color-text-secondary);\n    background: transparent;\n    border: none;\n    cursor: pointer;\n}\n\n.szenen-runs__marke {\n    font-weight: 700;\n    color: var(--color-text-primary);\n}\n\n.szenen-runs__status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    border-radius: var(--radius-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n}\n\n.szenen-runs__status[data-status="succeeded"] {\n    border-color: var(--color-success);\n}\n\n.szenen-runs__status[data-status="failed"] {\n    border-color: var(--color-danger);\n}\n\n.szenen-runs__modell {\n    font-size: 0.75rem;\n}\n\n/* Der Auszug ist die Inhaltsvorschau der Runde. Er bekommt eine eigene Zeile,\n   damit er nicht mit Marke und Modell um dieselbe Zeile ringt. */\n.szenen-runs__auszug {\n    flex: 1 1 100%;\n    min-width: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.8125rem;\n}\n\n/* B2 \u2014 ein Fehler steht ausserhalb der aufklappbaren Fl\xE4che: Wer eine rote\n   Runde sieht, soll nicht erst klicken m\xFCssen, um zu erfahren, woran sie\n   gescheitert ist. */\n.szenen-runs__fehler {\n    display: grid;\n    gap: var(--space-xs);\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-runs__fehler p {\n    margin: 0;\n}\n\n.szenen-runs__inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-runs__prompt > h5,\n.szenen-runs__sekundaer > h5 {\n    margin: 0 0 var(--space-xs);\n}\n\n.szenen-runs__prompt > p {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n.szenen-runs__prompt--negativ > p,\n.szenen-runs__sekundaer > p {\n    margin: 0;\n    color: var(--color-text-secondary);\n    white-space: pre-wrap;\n}\n\n.szenen-runs__mehr {\n    justify-self: start;\n    margin-top: var(--space-xs);\n    padding: 0;\n    color: var(--color-accent-teal, var(--color-text-secondary));\n    background: transparent;\n    border: none;\n    font-size: 0.75rem;\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.szenen-runs > ol > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-runs > ol > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n.szenen-runs details pre {\n    max-height: 20rem;\n    overflow: auto;\n    padding: var(--space-sm);\n    white-space: pre-wrap;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-media > section {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-media__lookup,\n.szenen-media__attach {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-media__lookup > label,\n.szenen-media__attach > label:first-child {\n    flex: 1 1 18rem;\n}\n\n.szenen-media__list {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-media__list > li {\n    display: grid;\n    grid-template-columns: minmax(12rem, 1fr) auto auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n@media (max-width: 760px) {\n    .szenen-view {\n        gap: var(--space-sm);\n    }\n\n    /* C1 \u2014 auf 390 px bleiben drei Kacheln je Reihe gross genug zum Erkennen\n       und klein genug, dass vier Bilder eine Reihe sind und keine Seite. */\n    .szenen-bildgalerie {\n        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    }\n\n    /* Der Viewer bekommt den ganzen Bildschirm; die Bl\xE4tterkn\xF6pfe bleiben am\n       Rand, wo der Daumen sie erreicht. */\n    .szenen-bildviewer {\n        padding: var(--space-xs);\n    }\n\n    .szenen-bildviewer__blaettern {\n        width: 2.25rem;\n        height: 4rem;\n    }\n\n    .szenen-view__intro {\n        align-items: start;\n        flex-direction: column;\n        gap: var(--space-sm);\n        padding: var(--space-md);\n    }\n\n    .szenen-view__intro h2 {\n        font-size: 1.25rem;\n    }\n\n    .szenen-view__intro > div > p:last-child {\n        font-size: 0.9rem;\n    }\n\n    .szenen-view__nav {\n        position: sticky;\n        top: 0;\n        z-index: 2;\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: var(--space-xs);\n        padding: var(--space-xs);\n    }\n\n    .szenen-view__nav button {\n        width: 100%;\n        min-width: 0;\n        min-height: 2.5rem;\n        padding: 0.35rem 0.5rem;\n    }\n\n\n    .szenen-scene-editor {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-capability > ul > li {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-derive,\n    .szenen-elements,\n    .szenen-scene,\n    .szenen-setup,\n    .szenen-shot,\n    .szenen-media,\n    .szenen-runs {\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto;\n        align-items: center;\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter > label {\n        width: 100%;\n        min-width: 0;\n        flex: none;\n    }\n\n    .szenen-elements__filter > label:has(input[type="checkbox"]) {\n        flex: none;\n        grid-column: 1 / -1;\n    }\n\n    /* Schmal ist die Liste eine Spalte, und die Auswahl fuehrt weiter \u2014 der\n     * Eintrag ist deshalb ein Ziel fuer den Finger, keine Kachel. */\n    .szenen-elements__list {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .szenen-elements__list > li > button {\n        min-height: 2.75rem;\n    }\n\n    .szenen-elements__back {\n        justify-self: stretch;\n        min-height: 2.5rem;\n    }\n\n    .szenen-detail__actions,\n    .szenen-runs__start,\n    .szenen-scene-editor__add,\n    .szenen-scene-editor__add-relation {\n        align-items: stretch;\n        flex-direction: column;\n    }\n\n    .szenen-runs__start > *,\n    .szenen-scene-editor__add > *,\n    .szenen-scene-editor__add-relation > * {\n        width: 100%;\n        flex: none;\n    }\n}\n\n/* \u2500\u2500 Stufe 6.5: Rekonstruktion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich zeigt drei Dinge nebeneinander: den Vorschlag, das nicht\n * Ableitbare und die Widerspr\xFCche. Die Diagnosen sind deshalb bewusst nicht\n * kleiner gesetzt als der Vorschlag \u2014 wer sie \xFCbersieht, \xFCbernimmt Geratenes.\n */\n\n.szenen-derive {\n    display: grid;\n    gap: var(--space-md);\n}\n\n.szenen-form {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-field {\n    display: grid;\n    gap: var(--space-xs);\n}\n\n.szenen-field > span {\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-error {\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-danger);\n    background: var(--color-accent-red-dim);\n    border: 1px solid var(--color-accent-red);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-empty {\n    padding: var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-diagnose {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-warning);\n    border-radius: var(--radius-sm);\n}\n\n/* Ein Widerspruch ist der schwerste der drei Befunde: dort steht eine\n * Entscheidung aus, die das System bewusst nicht getroffen hat (D-74). */\n.szenen-diagnose--konflikt {\n    border-left-color: var(--color-danger);\n}\n\n.szenen-diagnose > h4 {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.9375rem;\n}\n\n.szenen-diagnose ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-proposal {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-proposal > h4 {\n    margin: 0 0 var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.9375rem;\n}\n\n.szenen-proposal__payload {\n    max-height: 18rem;\n    margin: 0 0 var(--space-sm);\n    padding: var(--space-sm);\n    overflow: auto;\n    /* Ein erzeugter Prompt ist ein einziger langer Satz \u2014 ohne Umbruch\n       verschwindet er nach rechts aus dem Bild. JSON-Payloads bringen ihre\n       eigenen Zeilenumbrueche mit und leiden nicht darunter. */\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-proposal__done {\n    margin: var(--space-sm) 0 0;\n    color: var(--color-success);\n}\n\n/* Die Belege eines Laufs: Rohantwort und Systemprompt. Zum Lesen und Kopieren,\n   nicht zum Bedienen \u2014 deshalb voll markierbar und in Monospace. */\n.szenen-beleg__text {\n    width: 100%;\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    line-height: 1.5;\n    white-space: pre;\n    background: var(--color-bg-app);\n    color: var(--color-text);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    resize: vertical;\n}\n\n/* Der Folgelauf (D-87): abgesetzt, damit er nicht wie Teil des Ergebnisses\n   aussieht \u2014 er ist eine Frage, keine Auskunft. */\n.szenen-folgelauf {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-folgelauf > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-run__herkunft {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-muted, inherit);\n}\n\n/* Widerspricht das Modell, ist das das Wichtigste auf der Seite. */\n.szenen-diagnose--antwort {\n    border-left: 3px solid var(--color-accent, var(--color-border));\n}\n\n/* Der Bildw\xE4hler (D-92) \u2014 Browser und Inspector, dem Labs-Tab nachgebildet,\n   aber mit dem CSS dieser Ansicht: eine gemeinsame Komponente \xFCber zwei\n   Dom\xE4nengrenzen w\xE4re eine Kopplung, die keiner gewollt hat.\n\n   Der Review vom 2026-08-22 (R12.1/R12.2) hat den Ma\xDFstab gesetzt: Der Bestand\n   ist ein **Browser**, kein Seiteninhalt. Vierzig Werke d\xFCrfen die Szenenseite\n   nicht meterlang machen, und zw\xF6lf Varianten eines Werkes keine zw\xF6lf\n   Bildschirmseiten. Deshalb steht hier alles unter zwei Regeln \u2014 begrenzte\n   Fl\xE4che mit eigenem Scroll, und Kacheln statt Karten. */\n\n/* \u2500\u2500 Ebene 1: der Browser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl {\n    /* Dieselbe Begr\xFCndung wie beim Inspector: Als Grid-Element w\xFCrde der\n       W\xE4hler sonst so breit wie sein breitester Inhalt. */\n    min-width: 0;\n}\n\n.szenen-bildwahl__browser {\n    /* Die eigene Scrollfl\xE4che ist der ganze Punkt: Der Bestand w\xE4chst nach\n       innen, nicht nach unten. Dieselbe Gr\xF6\xDFenordnung wie `max-h-[300px]` im\n       Labs-Browser. */\n    max-height: 19rem;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__raster {\n    display: grid;\n    /* Vier Spalten auf schmalen Displays \u2014 der gemeldete Screenshot zeigte eine\n       einzige Spalte gro\xDFer Karten. Breiter wird automatisch dichter. */\n    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__karte {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    text-align: left;\n    cursor: pointer;\n}\n\n/* Das fokussierte Werk ist klar markiert \u2014 sonst wei\xDF niemand, wessen Galerie\n   der Inspector unten zeigt. */\n.szenen-bildwahl__karte.is-fokus {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n/* \u2500\u2500 Die Kachel selbst \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Der Platz steht, bevor das Bild da ist \u2014 sonst springt das Raster, sobald\n   die erste Vorschau eintrifft. */\n.szenen-bildkachel {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    overflow: hidden;\n    background: var(--color-bg-app);\n}\n\n.szenen-bildkachel img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.szenen-bildkachel__leer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(135deg, var(--color-bg-app), var(--color-bg-surface));\n}\n\n/* R12.3: Eine fehlende Vorschau bleibt kachelgro\xDF. Vorher fiel die Karte auf\n   ihren Prompttext zur\xFCck \u2014 und ein Prompt hat im echten Bestand mehrere\n   hundert Zeichen. */\n.szenen-bildkachel__zeichen {\n    font-size: 0.875rem;\n    font-weight: 700;\n    color: var(--color-text-secondary);\n    opacity: 0.6;\n}\n\n/* Wie viele Varianten das Werk hat \u2014 klein und \xFCberlagernd, nie als\n   dominanter Text. */\n.szenen-bildwahl__anzahl {\n    position: absolute;\n    top: 0.15rem;\n    right: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    font-weight: 700;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* Eine Zeile, dann Schluss. Der Prompt eines Werkes ist oft mehrere hundert\n   Zeichen lang und w\xE4re als Prim\xE4rdarstellung genau die Textw\xFCste, gegen die\n   der Review antritt. */\n.szenen-bildwahl__kacheltitel {\n    display: block;\n    padding: 0.15rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.3;\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Ebene 2: der Inspector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__inspector {\n    /* Ohne `min-width: 0` gewinnt der Inhalt: Der W\xE4hler ist Element eines\n       Grids (`.szenen-form`), und dort ist `min-width: auto` die Vorgabe. Der\n       Streifen unten ist rund 1000 px breit \u2014 gemessen am 2026-08-22 im echten\n       Browser zog er die Auswahl von 374 px auf 1088 px auf und schob die\n       ganze Seite waagerecht heraus, statt selbst zu scrollen. */\n    min-width: 0;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    /* Sichtbar abgesetzt vom Browser: zwei Ebenen, nicht eine lange Liste. */\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__inspektorkopf {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bildwahl__werktitel {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: var(--color-text-primary);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.szenen-bildwahl__zurueck {\n    flex: 0 0 auto;\n    font-size: 0.6875rem;\n    padding: 0.15rem 0.5rem;\n}\n\n/* Der Streifen: waagerecht scrollend, feste kleine Kacheln \u2014 zw\xF6lf Varianten\n   bleiben ein \xDCberblick statt zw\xF6lf Bildschirmseiten. */\n.szenen-bildwahl__streifen {\n    /* Die Breite kommt vom Elter, nie vom Inhalt \u2014 sonst scrollt hier nichts. */\n    max-width: 100%;\n    display: flex;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0 0 0.25rem;\n    list-style: none;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n}\n\n.szenen-bildwahl__streifen > li {\n    flex: 0 0 auto;\n    width: 5rem;\n}\n\n.szenen-bildwahl__variante {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-app);\n    cursor: pointer;\n}\n\n.szenen-bildwahl__variante.is-gewaehlt {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n.szenen-bildwahl__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Das Gew\xE4hlte \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__gewaehlt {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__gewaehlt li {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    max-width: 100%;\n}\n\n/* Das gew\xE4hlte Bild wird best\xE4tigt, nicht nur benannt: eine kleine Vorschau\n   neben dem Titel. */\n.szenen-bildwahl__gewaehlt .szenen-bildkachel {\n    width: 2.25rem;\n    flex: 0 0 auto;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__gewaehlt .szenen-bildwahl__kacheltitel {\n    min-width: 0;\n    max-width: 12rem;\n    font-size: 0.75rem;\n}\n\n.szenen-beleg__kopf {\n    display: flex;\n    align-items: center;\n    gap: var(--space-sm);\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details + details {\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details > summary {\n    cursor: pointer;\n    font-weight: 600;\n}\n\n/* \u2500\u2500 Die Fehlerrettung (Stufe 6.6, A5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Sie steht im Fehlerblock und muss trotzdem als Werkzeug lesbar sein, nicht\n * als weitere Fehlermeldung. Deshalb abgesetzt wie der Folgelauf \u2014 und aus\n * demselben Grund: Beides sind Angebote, keine Ausk\xFCnfte.\n *\n * Der wichtigste optische Punkt ist die Trennung von Original und\n * Arbeitskopie. Das Original bekommt den ruhigen, \u201Efesten" Hintergrund der\n * Belege; die Kopie sieht aus wie ein normales Eingabefeld, weil sie eines\n * ist. */\n.szenen-rettung {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-rettung > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-rettung textarea[readonly] {\n    background: var(--color-bg-surface);\n    color: var(--color-text-secondary);\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung textarea:not([readonly]) {\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung__aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0;\n}\n\n/* Ein Befund tr\xE4gt Code, Bezug und Meldung. Der Code steht klein und\n * monospaced davor: Er ist die Kennung, nicht die Aussage. */\n.szenen-diagnose__liste {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-diagnose__liste code {\n    font-size: 0.8125rem;\n}\n\n.szenen-diagnose__liste > li[data-severity=\'warning\'] {\n    color: var(--color-text-secondary);\n}\n\n/* \u2500\u2500 Die Draft-Kette (Stufe 6.6, C4) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Hauptweg. Er steht nach den Einzel\xFCbernahmen und muss als das erkennbar\n * sein, was er ist: nicht eine weitere Option, sondern der k\xFCrzere Weg zum\n * selben Ziel. Deshalb durchgezogener Rahmen statt gestricheltem \u2014 er ist\n * Angebot **und** Empfehlung. */\n.szenen-kette {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-kette > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-kette ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0 0 var(--space-sm);\n    padding-left: var(--space-md);\n}\n\n.szenen-kette code {\n    font-size: 0.8125rem;\n}\n\n/* Ein Hinweis, der eine Bedingung erklaert \u2014 nicht rot, weil er kein Fehler\n   ist, aber abgesetzt, weil er eine Folge hat. */\n.szenen-detail__hint {\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Stufe 6.7: Bilder am Prompt-Lauf (H0/H1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich tr\xE4gt zwei Dinge, die man nie verwechseln darf: den **Eingang**\n * (woraus der Prompt entstand) und den **Ausgang** (was daraus wurde). Sie\n * bekommen deshalb verschiedene Akzentkanten statt nur verschiedener\n * \xDCberschriften \u2014 wer schnell liest, sieht die Trennung, bevor er sie liest.\n */\n.szenen-bilder {\n    display: grid;\n    gap: var(--space-md);\n    margin-top: var(--space-sm);\n}\n\n.szenen-bilder__eingang,\n.szenen-bilder__ausgang {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__eingang {\n    border-left: 3px solid var(--color-accent-purple, var(--color-border));\n}\n\n.szenen-bilder__ausgang {\n    border-left: 3px solid var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-bilder h5 {\n    margin: 0;\n}\n\n.szenen-bilder__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: 0;\n    align-items: baseline;\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-bilder__eingangsliste,\n.szenen-bilder__batchliste,\n.szenen-bilder__auftraege {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bilder__eingangsliste > li,\n.szenen-bilder__batchliste > li,\n.szenen-bilder__auftraege > li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n/* Ein unterbrochener Auftrag ist der Fall, f\xFCr den der Auftragssatz existiert.\n   Er wird deshalb markiert \u2014 nicht rot, denn er ist kein Fehler, sondern eine\n   offene Entscheidung. */\n.szenen-bilder__auftraege > li[data-status="started"] {\n    border-left: 3px solid var(--color-warning);\n}\n\n.szenen-bilder__auftraege > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-bilder__auftraege > li[data-status="partial"] {\n    border-left: 3px solid var(--color-accent-blue, var(--color-border));\n}\n\n.szenen-bilder__auftraege > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n/* Das Eingangsbild benutzt seit C3 dieselbe Kachel wie W\xE4hler und Galerie.\n   Sie ist von Haus aus so breit wie ihr Platz \u2014 in dieser Zeile bekommt sie\n   deshalb eine feste Gr\xF6sse, sonst sch\xF6be sie die Metadaten heraus. */\n.szenen-bilder__eingangsliste .szenen-bildkachel {\n    flex: 0 0 auto;\n    width: 4rem;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batch {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batchkopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-bilder__herkunft {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n/* C4 \u2014 die Provenienz vollst\xE4ndig, aber sekund\xE4r. */\n.szenen-bilder__technik > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n}\n\n/* C5 \u2014 der Verlauf verdichtet, seine Ausreisser nicht. */\n.szenen-bilder__verlauf > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__verlauf[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__auffaellig {\n    margin: 0;\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n.szenen-bilder__auftragskennung {\n    flex-basis: 100%;\n    color: var(--color-text-tertiary);\n    font-size: 0.6875rem;\n}\n\n/* \u2500\u2500 C1/C2 \u2014 Galerie und grosse Ansicht \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Das Raster w\xE4chst mit dem Platz: auf 390 px drei bis vier Kacheln je Reihe,\n   auf dem Desktop entsprechend mehr. Vorher war jedes Bild eine Zeile aus\n   Daumennagel plus vier Metadatenfeldern \u2014 vier Bilder ergaben vier Textzeilen\n   und das Protokoll war die Hauptsache. */\n.szenen-bildgalerie {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildgalerie__kachel {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildgalerie__kachel:hover,\n.szenen-bildgalerie__kachel:focus-visible {\n    border-color: var(--color-accent-teal, var(--color-text-primary));\n}\n\n.szenen-bildgalerie__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* Die grosse Ansicht liegt \xFCber allem und bringt ihren eigenen Grund mit \u2014\n   `position: fixed` bezieht sich im Flow-Canvas auf dessen Rahmen, in React auf\n   das Fenster; in beiden F\xE4llen genau das Gew\xFCnschte. */\n.szenen-bildviewer {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    /* Deckend, nicht get\xF6nt: Bei 0.92 schimmerte der Laufbereich durch und man\n       las Prompttext quer \xFCber dem Bild \u2014 im Browser gemessen. */\n    background: #000;\n}\n\n/* Titel, Z\xE4hlung, Schliessen \u2014 drei Spalten, damit ein langer Werktitel die\n   Z\xE4hlung nicht in die n\xE4chste Zeile und \xFCber das Bild schiebt. */\n.szenen-bildviewer__kopf {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    color: var(--color-text-primary);\n}\n\n.szenen-bildviewer__titel {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-weight: 600;\n}\n\n.szenen-bildviewer__zaehler {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n}\n\n.szenen-bildviewer__buehne {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-sm);\n    min-height: 0;\n    min-width: 0;\n}\n\n/* Der Rahmen nimmt den Platz, der zwischen den Bl\xE4tterkn\xF6pfen \xFCbrig ist \u2014\n   `min-width: 0`, damit er auch wirklich schrumpft statt sie hinauszuschieben. */\n.szenen-bildviewer__rahmen {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n}\n\n.szenen-bildviewer__bild {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n}\n\n.szenen-bildviewer__leer {\n    color: var(--color-text-secondary);\n    text-align: center;\n}\n\n/* Die Bl\xE4tterkn\xF6pfe sind daumengross und liegen an den R\xE4ndern \u2014 auf einem\n   Telefon ist der Rand erreichbar, die Bildmitte nicht. */\n.szenen-bildviewer__blaettern {\n    flex: 0 0 auto;\n    width: 2.75rem;\n    height: 3.5rem;\n    font-size: 1.75rem;\n    line-height: 1;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildviewer__details {\n    max-height: 8rem;\n    overflow-y: auto;\n    color: var(--color-text-secondary);\n}\n\n/* Die Aktionen stehen abgesetzt: Sie sind Angebote, keine Ausk\xFCnfte \u2014 dasselbe\n   Muster wie beim Folgelauf und bei der Fehlerrettung. */\n/* D \u2014 die Aktionen stehen abgesetzt und standardm\xE4ssig kompakt: Sie sind\n   Angebote, keine Ausk\xFCnfte. Vorher hielten beide Formulare dauerhaft offen und\n   machten aus jedem Lauf zwei zus\xE4tzliche Bildschirmseiten. */\n.szenen-bilder__aktion {\n    min-width: 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__aktion > summary {\n    color: var(--color-text-primary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-bilder__aktion[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion h5 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-bilder__aktion ol {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n    font-size: 0.8125rem;\n}\n\n/* ==========================================================================\n   STUFE 6.10 \u2014 ELEMENTEDITOR UND VERSIONSNAVIGATION\n   ========================================================================== */\n\n/* \xA74.2 \u2014 vier Sachverhalte, vier Marken. Die Marken stehen in einer eigenen\n * Spalte, damit ANGEZEIGT + BEVORZUGT nebeneinander lesbar bleiben, statt sich\n * durch den Text zu schieben. */\n.szenen-detail__heads li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n}\n\n.szenen-version__titel {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-right: auto;\n}\n\n/* V17 \u2014 Kennungen bleiben vollst\xE4ndig sichtbar, aber optisch sekund\xE4r. */\n.szenen-version__id,\n.szenen-ref__id,\n.szenen-detail__field-key {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    overflow-wrap: anywhere;\n}\n\n.szenen-version__marken {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-version__marken > span {\n    padding: 0.1rem 0.5rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.7rem;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n}\n\n.szenen-version--angezeigt {\n    border-color: var(--color-accent-teal, #2dd4bf) !important;\n}\n\n/* V9 \u2014 der Basiswechsel ist eine Entscheidung, keine Nebenwirkung. */\n.szenen-detail__confirm {\n    display: grid;\n    gap: var(--space-sm);\n    margin: var(--space-md) 0;\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-accent-amber, #f59e0b);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__confirm p {\n    margin: 0;\n}\n\n/* Untergruppen von Objektfeldern (`prompt_render_settings`, `overrides`,\n   `blender_render_settings`) \u2014 seit A1/A2 auf- und zuklappbar. Eine optionale\n   Gruppe startet zu: Blender und `overrides` f\xFCllten auf einem 390-px-Display\n   sonst mehrere Bildschirmseiten, obwohl die meisten Shots sie nie anfassen. */\n.szenen-detail__group {\n    min-width: 0;\n    margin: var(--space-md) 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group > summary {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__group[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n/* A2 \u2014 dass eine zugeklappte Gruppe schon Werte tr\xE4gt, muss man sehen, ohne\n   sie zu \xF6ffnen. Sonst \xFCbersieht man eine gesetzte Blender-Ausgabe genau so\n   lange, bis sie im Ergebnis auftaucht. */\n.szenen-detail__group-status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n    color: var(--color-text-tertiary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group[data-konfiguriert="ja"] > summary .szenen-detail__group-status {\n    color: var(--color-text-primary);\n    border-color: var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-detail__group-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n/* A3 \u2014 die Kernaussage steht am Feld, die Begr\xFCndung dahinter. Nicht als\n   Tooltip: Auf einem Telefon gibt es kein Hover, und was dort unerreichbar ist,\n   ist gestrichen \u2014 nur ohne dass es jemand entschieden h\xE4tte. */\n.szenen-detail__warum > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-detail__warum > small {\n    display: block;\n    padding-top: var(--space-xs);\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__fieldrow {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-bottom: var(--space-md);\n}\n\n/* A4 \u2014 der technische Feldname bleibt lesbar, tritt aber hinter das fachliche\n   Label zur\xFCck. */\n.szenen-detail__field-label {\n    color: var(--color-text-primary);\n}\n\n.szenen-detail__field {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-detail__field > span {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n}\n\n/* Mehrfachauswahl und Listeneditoren. */\n.szenen-feld__mehrfach,\n.szenen-feld__liste,\n.szenen-feld__reflist,\n.szenen-feld__ref,\n.szenen-feld__zielmodell,\n.szenen-feld__kamera {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-feld__mehrfach > label,\n.szenen-feld__null {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-feld__liste-zeile {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-feld__reflist ol {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-feld__reflist li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs);\n    padding: var(--space-xs) var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \xA76.1 \u2014 Titel und Typ zuerst, Kennungen daneben. */\n.szenen-ref__anzeige {\n    display: inline-flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-ref__typ {\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-ref__warn {\n    padding: 0.1rem 0.5rem;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    font-weight: 700;\n}\n\n/* \xA76.5 \u2014 abgeleitete Angaben, ausdr\xFCcklich nur Anzeige. */\n.szenen-detail__derived {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__derived dl {\n    display: grid;\n    grid-template-columns: minmax(10rem, auto) 1fr;\n    gap: var(--space-xs) var(--space-sm);\n    margin: 0;\n}\n\n.szenen-detail__derived dt {\n    color: var(--color-text-secondary);\n}\n\n.szenen-detail__derived dd {\n    margin: 0;\n}\n\n.szenen-feld__abgeleitet {\n    margin: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n}\n';
+var SZENEN_VIEW_STYLES = '/* ==========================================================================\n   SZENEN VIEW\n   ========================================================================== */\n\n.szenen-view {\n    display: grid;\n    gap: var(--space-md);\n    width: 100%;\n    min-width: 0;\n    font-family: var(--font-sans);\n    padding: var(--space-md);\n}\n\n@media (max-width: 760px) {\n    .szenen-view {\n        padding: var(--space-sm);\n        gap: var(--space-sm);\n    }\n}\n\n.szenen-view__intro {\n    display: flex;\n    align-items: end;\n    justify-content: space-between;\n    gap: var(--space-md);\n    padding: clamp(1rem, 3vw, 1.75rem);\n    color: var(--color-text-primary);\n    background:\n        radial-gradient(circle at 85% 15%, rgba(45, 212, 191, 0.16), transparent 34%),\n        linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n}\n\n.szenen-view__intro h2,\n.szenen-view__intro p {\n    margin: 0;\n}\n\n.szenen-view__intro h2 {\n    margin-bottom: var(--space-xs);\n    font-size: clamp(1.25rem, 4vw, 2rem);\n}\n\n.szenen-view__intro > div > p:last-child {\n    max-width: 44rem;\n    color: var(--color-text-secondary);\n}\n\n.szenen-view__eyebrow {\n    margin-bottom: var(--space-xs) !important;\n    color: var(--color-accent-teal, #2dd4bf);\n    font-size: 0.72rem;\n    font-weight: 800;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n}\n\n.szenen-view__step {\n    flex: none;\n    padding: 0.35rem 0.65rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.78rem;\n    font-weight: 700;\n}\n\n.szenen-view__nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-view__nav button,\n.szenen-view button {\n    min-height: 2.25rem;\n    padding: 0.45rem 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-view button:hover:not(:disabled) {\n    color: var(--color-text-primary);\n    background: var(--color-bg-surface-hover);\n    border-color: var(--color-border-hover);\n}\n\n.szenen-view button:focus-visible,\n.szenen-view input:focus-visible,\n.szenen-view select:focus-visible,\n.szenen-view textarea:focus-visible {\n    outline: 2px solid var(--color-accent-blue);\n    outline-offset: 2px;\n}\n\n.szenen-view button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.szenen-view__nav button.is-active,\n.szenen-view__nav button[aria-selected="true"] {\n    color: var(--color-text-primary);\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-view__area {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-view__capability-note,\n.szenen-area__lead {\n    margin: 0;\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-accent-purple);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-view__host-notes {\n    color: var(--color-text-secondary);\n}\n\n.szenen-view__host-notes > summary {\n    cursor: pointer;\n    font-size: 0.8rem;\n}\n\n/* `box-sizing` steht hier und nicht beim Host: Die React-App bringt in\n * `master.css` einen globalen `* { box-sizing: border-box }` mit, Flow **nicht**\n * \u2014 dort ragte `width: 100%` plus Innenabstand um die Randbreite aus dem\n * Elternelement heraus und erzeugte auf ~390 px einen horizontalen Scroll. Die\n * gemeinsame Ansicht darf sich auf keinen Host-Reset verlassen. */\n.szenen-view input:not([type="checkbox"]),\n.szenen-view select,\n.szenen-view textarea {\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 2.25rem;\n    padding: 0.5rem 0.65rem;\n    color: var(--color-text-primary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font: inherit;\n}\n\n.szenen-view textarea {\n    min-height: 7rem;\n    resize: vertical;\n    font-family: var(--font-mono);\n    font-size: 0.8rem;\n}\n\n.szenen-view label {\n    display: grid;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-view code,\n.szenen-view pre {\n    font-family: var(--font-mono);\n    overflow-wrap: anywhere;\n}\n\n.szenen-view h3,\n.szenen-view h4,\n.szenen-view h5 {\n    margin-top: 0;\n}\n\n.szenen-view ul,\n.szenen-view ol {\n    padding-left: 1.25rem;\n}\n\n.szenen-elements,\n.szenen-detail,\n.szenen-scene,\n.szenen-setup,\n.szenen-shot,\n.szenen-media,\n.szenen-runs {\n    display: grid;\n    gap: var(--space-md);\n    min-width: 0;\n}\n\n/* Arbeitsoberflaeche: Liste links, Bearbeitung rechts.\n *\n * Breit stehen beide Spalten nebeneinander \u2014 die Auswahl bleibt sichtbar,\n * waehrend bearbeitet wird. Schmal rendert die Komponente nur eine der beiden;\n * hier steht deshalb keine Regel, die die andere versteckt. */\n@media (min-width: 761px) {\n    .szenen-elements {\n        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);\n        align-items: start;\n    }\n\n    .szenen-elements__master,\n    .szenen-elements__detail {\n        min-width: 0;\n    }\n}\n\n.szenen-elements__master,\n.szenen-elements__detail {\n    display: grid;\n    gap: var(--space-sm);\n    align-content: start;\n    min-width: 0;\n}\n\n.szenen-elements__toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__heading {\n    margin: 0;\n    font-size: 1.05rem;\n}\n\n.szenen-elements__scope {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    min-width: 0;\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-elements__scope > select {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.szenen-elements__new {\n    flex: none;\n    font-weight: 700;\n}\n\n.szenen-elements__create {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-accent-blue);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-elements__create label {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-elements__create-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__options > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    cursor: pointer;\n}\n\n.szenen-elements__back {\n    justify-self: start;\n    font-weight: 700;\n}\n\n.szenen-elements__empty-detail {\n    margin: 0;\n    color: var(--color-text-tertiary);\n}\n\n.szenen-elements__filter,\n.szenen-detail__actions,\n.szenen-runs__start,\n.szenen-scene-editor__add,\n.szenen-scene-editor__add-relation {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__filter > label,\n.szenen-runs__start > label,\n.szenen-scene-editor__add > input {\n    flex: 1 1 16rem;\n}\n\n.szenen-elements__filter > label:has(input[type="checkbox"]) {\n    display: flex;\n    flex: 1 1 16rem;\n    flex-direction: row;\n    align-items: center;\n}\n\n.szenen-elements__filter input[type="checkbox"] {\n    width: 1rem;\n    height: 1rem;\n    accent-color: var(--color-accent-blue);\n}\n\n.szenen-elements__list {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-elements__list > li > button {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs) var(--space-sm);\n    width: 100%;\n    height: 100%;\n    text-align: left;\n}\n\n.szenen-elements__list > li > button > .szenen-elements__title {\n    flex: 1 1 100%;\n}\n\n.szenen-elements__list > li > button.is-selected,\n.szenen-elements__list > li > button[aria-current="true"] {\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-elements__type {\n    color: var(--color-accent-blue);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-elements__title {\n    color: var(--color-text-primary);\n    font-size: 0.95rem;\n}\n\n.szenen-elements__subtype,\n.szenen-elements__retired {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n}\n\n.szenen-elements__retired {\n    color: var(--color-warning);\n}\n\n.szenen-detail {\n    margin-top: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n@media (min-width: 761px) {\n    .szenen-detail {\n        padding: var(--space-md);\n        background: var(--color-bg-surface);\n        border: 1px solid var(--color-border);\n        border-radius: var(--radius-sm);\n    }\n}\n\n.szenen-detail > header,\n.szenen-detail__heads,\n.szenen-detail__draft,\n.szenen-capability {\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* .szenen-runs ist ein eigenst\xE4ndiger sichtbarer Bereich, beh\xE4lt Styling auf Desktop */\n@media (min-width: 761px) {\n    .szenen-runs {\n        padding: var(--space-md);\n        background: var(--color-bg-surface);\n        border: 1px solid var(--color-border);\n        border-radius: var(--radius-md);\n    }\n}\n\n@media (max-width: 760px) {\n    .szenen-runs {\n        padding: 0;\n        background: transparent;\n        border: none;\n        border-radius: 0;\n    }\n}\n\n.szenen-detail__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin-bottom: 0;\n    color: var(--color-text-secondary);\n}\n\n.szenen-detail__heads ul,\n.szenen-scene-editor ul,\n.szenen-runs > ol,\n.szenen-capability > ul {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-detail__heads li,\n.szenen-scene-editor li,\n.szenen-runs > ol > li,\n.szenen-capability > ul > li {\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n\n/* Stufe 6.7.2 (D-126) \u2014 Advanced-/Debug-Fl\xE4che f\xFCr die rohe, schema-getriebene\n * Feldliste einer Szene. Gestrichelt wie die anderen \u201EAngebot statt\n * Auskunft"-Bereiche, aber ohne Akzentfarbe: sie ist kein Vorschlag, sondern\n * ein Eskalationsweg. */\n.szenen-detail__technical {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__technical > summary {\n    margin-bottom: var(--space-sm);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__technical[open] > summary {\n    margin-bottom: var(--space-md);\n}\n\n.szenen-detail__field small,\n.szenen-capability small {\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__preview-errors,\n.szenen-detail__notice--error,\n.szenen-view [role="alert"] {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-detail__notice {\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__notice--success,\n.szenen-view [data-tone="success"] {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n    border-color: var(--color-accent-green);\n}\n\n.szenen-scene-editor {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-md);\n    margin-bottom: 0;\n}\n\n.szenen-scene-editor > section {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* \u2500\u2500 Stufe 6.7.2 (D-126): Node-/Relationskarten \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Nodes und Beziehungen sind `<details>` \u2014 dieselbe Interaktionssprache wie\n * \u201ERohantwort (Diagnose)" und \u201EBilder zu diesem Lauf" in RunsPanel.tsx. Kopf\n * (immer sichtbar) tr\xE4gt Inhalt zuerst, Technik zuletzt; Body (nur bei\n * ge\xF6ffneter Karte) tr\xE4gt die Bearbeitungscontrols. Padding wandert von der\n * `<li>` in Kopf/Body, damit die Karte keinen doppelten Rand bekommt. */\n.szenen-scene-editor li {\n    padding: 0;\n    overflow: hidden;\n}\n\n.szenen-node-karte__kopf,\n.szenen-relation-karte__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs) var(--space-sm);\n    padding: var(--space-sm);\n    cursor: pointer;\n    list-style: none;\n}\n\n.szenen-node-karte__kopf::-webkit-details-marker,\n.szenen-relation-karte__kopf::-webkit-details-marker {\n    display: none;\n}\n\n.szenen-node-karte__titel {\n    flex: 1 1 12rem;\n    min-width: 0;\n    color: var(--color-text-primary);\n    font-weight: 600;\n    overflow-wrap: anywhere;\n}\n\n.szenen-node-karte__typ {\n    flex: none;\n    padding: 0.15rem 0.55rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    white-space: nowrap;\n}\n\n/* node_id klein, monospace, sekund\xE4r \u2014 sichtbar auch bei zugeklappter Karte,\n * aber optisch klar hinter Beschreibung und Typ. */\n.szenen-node-karte__meta {\n    flex: 1 1 100%;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n.szenen-node-karte__meta code {\n    font-size: inherit;\n}\n\n.szenen-node-karte__body,\n.szenen-relation-karte__body {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-sm) var(--space-sm);\n    border-top: 1px solid var(--color-border);\n}\n\n/* \xA74 \u2014 Prim\xE4raktion und destruktive Aktion optisch getrennt: \u201ENode/Beziehung\n * entfernen" bekommt einen eigenen, warnenden Ton statt gleichgewichtig neben\n * der normalen Bearbeitung zu stehen. */\n.szenen-node-karte__entfernen,\n.szenen-relation-karte__entfernen {\n    justify-self: start;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-relation-karte__kopf {\n    font-size: 0.9rem;\n}\n\n.szenen-relation-karte__kopf code {\n    overflow-wrap: anywhere;\n}\n\n.szenen-relation-karte__pfeil {\n    flex: none;\n    color: var(--color-text-secondary);\n}\n\n/* Die Composer-\xD6ffner (\u201E+ Node hinzuf\xFCgen", \u201E+ Beziehung hinzuf\xFCgen") sind\n * Angebote, keine Ausk\xFCnfte \u2014 dasselbe gestrichelte Muster wie beim Folgelauf\n * und der Fehlerrettung (\xA73.3/\xA73.5). */\n.szenen-scene-editor__oeffnen {\n    width: 100%;\n    border-style: dashed;\n}\n\n.szenen-refpicker {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: var(--space-sm) 0;\n    padding: var(--space-sm) 0;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-refpicker legend {\n    padding: 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n}\n\n.szenen-capability > ul > li {\n    display: grid;\n    grid-template-columns: minmax(10rem, 1fr) auto minmax(14rem, 2fr);\n    align-items: start;\n    gap: var(--space-sm);\n}\n\n.szenen-capability__state {\n    padding: 0.1rem 0.5rem;\n    border-radius: var(--radius-full);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-capability__state--yes {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n}\n\n.szenen-capability__state--no {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n}\n\n.szenen-capability__state--unknown {\n    color: #fef08a;\n    background: rgba(234, 179, 8, 0.2);\n}\n\n.szenen-runs > ol > li {\n    display: grid;\n    gap: var(--space-sm);\n}\n\n/* B1 \u2014 die geschlossene Runde. Vorher stand die `run_id` als erstes und war\n   die einzige Information, die niemand liest; jetzt beantwortet die Kopfzeile\n   welche Runde, ob sie durchging, mit welchem Modell und was ungef\xE4hr\n   herauskam. */\n.szenen-runs__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-sm);\n    width: 100%;\n    padding: var(--space-xs) 0;\n    text-align: left;\n    color: var(--color-text-secondary);\n    background: transparent;\n    border: none;\n    cursor: pointer;\n}\n\n.szenen-runs__marke {\n    font-weight: 700;\n    color: var(--color-text-primary);\n}\n\n.szenen-runs__status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    border-radius: var(--radius-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n}\n\n.szenen-runs__status[data-status="succeeded"] {\n    border-color: var(--color-success);\n}\n\n.szenen-runs__status[data-status="failed"] {\n    border-color: var(--color-danger);\n}\n\n.szenen-runs__modell {\n    font-size: 0.75rem;\n}\n\n/* Der Auszug ist die Inhaltsvorschau der Runde. Er bekommt eine eigene Zeile,\n   damit er nicht mit Marke und Modell um dieselbe Zeile ringt. */\n.szenen-runs__auszug {\n    flex: 1 1 100%;\n    min-width: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.8125rem;\n}\n\n/* B2 \u2014 ein Fehler steht ausserhalb der aufklappbaren Fl\xE4che: Wer eine rote\n   Runde sieht, soll nicht erst klicken m\xFCssen, um zu erfahren, woran sie\n   gescheitert ist. */\n.szenen-runs__fehler {\n    display: grid;\n    gap: var(--space-xs);\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-runs__fehler p {\n    margin: 0;\n}\n\n.szenen-runs__inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-runs__prompt > h5,\n.szenen-runs__sekundaer > h5 {\n    margin: 0 0 var(--space-xs);\n}\n\n.szenen-runs__prompt > p {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n.szenen-runs__prompt--negativ > p,\n.szenen-runs__sekundaer > p {\n    margin: 0;\n    color: var(--color-text-secondary);\n    white-space: pre-wrap;\n}\n\n.szenen-runs__mehr {\n    justify-self: start;\n    margin-top: var(--space-xs);\n    padding: 0;\n    color: var(--color-accent-teal, var(--color-text-secondary));\n    background: transparent;\n    border: none;\n    font-size: 0.75rem;\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.szenen-runs > ol > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-runs > ol > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n.szenen-runs details pre {\n    max-height: 20rem;\n    overflow: auto;\n    padding: var(--space-sm);\n    white-space: pre-wrap;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-media > section {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-media__lookup,\n.szenen-media__attach {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-media__lookup > label,\n.szenen-media__attach > label:first-child {\n    flex: 1 1 18rem;\n}\n\n.szenen-media__list {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-media__list > li {\n    display: grid;\n    grid-template-columns: minmax(12rem, 1fr) auto auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n@media (max-width: 760px) {\n    .szenen-view {\n        gap: var(--space-sm);\n    }\n\n    /* C1 \u2014 auf 390 px bleiben drei Kacheln je Reihe gross genug zum Erkennen\n       und klein genug, dass vier Bilder eine Reihe sind und keine Seite. */\n    .szenen-bildgalerie {\n        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    }\n\n    /* Der Viewer bekommt den ganzen Bildschirm; die Bl\xE4tterkn\xF6pfe bleiben am\n       Rand, wo der Daumen sie erreicht. */\n    .szenen-bildviewer {\n        padding: var(--space-xs);\n    }\n\n    .szenen-bildviewer__blaettern {\n        width: 2.25rem;\n        height: 4rem;\n    }\n\n    .szenen-view__intro {\n        align-items: start;\n        flex-direction: column;\n        gap: var(--space-sm);\n        padding: var(--space-md);\n    }\n\n    .szenen-view__intro h2 {\n        font-size: 1.25rem;\n    }\n\n    .szenen-view__intro > div > p:last-child {\n        font-size: 0.9rem;\n    }\n\n    .szenen-view__nav {\n        position: sticky;\n        top: 0;\n        z-index: 2;\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: var(--space-xs);\n        padding: var(--space-xs);\n    }\n\n    .szenen-view__nav button {\n        width: 100%;\n        min-width: 0;\n        min-height: 2.5rem;\n        padding: 0.35rem 0.5rem;\n    }\n\n\n    .szenen-scene-editor {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-capability > ul > li {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-derive,\n    .szenen-elements,\n    .szenen-scene,\n    .szenen-setup,\n    .szenen-shot,\n    .szenen-media,\n    .szenen-runs {\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto;\n        align-items: center;\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter > label {\n        width: 100%;\n        min-width: 0;\n        flex: none;\n    }\n\n    .szenen-elements__filter > label:has(input[type="checkbox"]) {\n        flex: none;\n        grid-column: 1 / -1;\n    }\n\n    /* Schmal ist die Liste eine Spalte, und die Auswahl fuehrt weiter \u2014 der\n     * Eintrag ist deshalb ein Ziel fuer den Finger, keine Kachel. */\n    .szenen-elements__list {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .szenen-elements__list > li > button {\n        min-height: 2.75rem;\n    }\n\n    .szenen-elements__back {\n        justify-self: stretch;\n        min-height: 2.5rem;\n    }\n\n    .szenen-detail__actions,\n    .szenen-runs__start,\n    .szenen-scene-editor__add,\n    .szenen-scene-editor__add-relation {\n        align-items: stretch;\n        flex-direction: column;\n    }\n\n    .szenen-runs__start > *,\n    .szenen-scene-editor__add > *,\n    .szenen-scene-editor__add-relation > * {\n        width: 100%;\n        flex: none;\n    }\n}\n\n/* \u2500\u2500 Stufe 6.5: Rekonstruktion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich zeigt drei Dinge nebeneinander: den Vorschlag, das nicht\n * Ableitbare und die Widerspr\xFCche. Die Diagnosen sind deshalb bewusst nicht\n * kleiner gesetzt als der Vorschlag \u2014 wer sie \xFCbersieht, \xFCbernimmt Geratenes.\n */\n\n.szenen-derive {\n    display: grid;\n    gap: var(--space-md);\n}\n\n.szenen-form {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-field {\n    display: grid;\n    gap: var(--space-xs);\n}\n\n.szenen-field > span {\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-error {\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-danger);\n    background: var(--color-accent-red-dim);\n    border: 1px solid var(--color-accent-red);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-empty {\n    padding: var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-diagnose {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-warning);\n    border-radius: var(--radius-sm);\n}\n\n/* Ein Widerspruch ist der schwerste der drei Befunde: dort steht eine\n * Entscheidung aus, die das System bewusst nicht getroffen hat (D-74). */\n.szenen-diagnose--konflikt {\n    border-left-color: var(--color-danger);\n}\n\n.szenen-diagnose > h4 {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.9375rem;\n}\n\n.szenen-diagnose ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-proposal {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-proposal > h4 {\n    margin: 0 0 var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.9375rem;\n}\n\n.szenen-proposal__payload {\n    max-height: 18rem;\n    margin: 0 0 var(--space-sm);\n    padding: var(--space-sm);\n    overflow: auto;\n    /* Ein erzeugter Prompt ist ein einziger langer Satz \u2014 ohne Umbruch\n       verschwindet er nach rechts aus dem Bild. JSON-Payloads bringen ihre\n       eigenen Zeilenumbrueche mit und leiden nicht darunter. */\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-proposal__done {\n    margin: var(--space-sm) 0 0;\n    color: var(--color-success);\n}\n\n/* Die Belege eines Laufs: Rohantwort und Systemprompt. Zum Lesen und Kopieren,\n   nicht zum Bedienen \u2014 deshalb voll markierbar und in Monospace. */\n.szenen-beleg__text {\n    width: 100%;\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    line-height: 1.5;\n    white-space: pre;\n    background: var(--color-bg-app);\n    color: var(--color-text);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    resize: vertical;\n}\n\n/* Der Folgelauf (D-87): abgesetzt, damit er nicht wie Teil des Ergebnisses\n   aussieht \u2014 er ist eine Frage, keine Auskunft. */\n.szenen-folgelauf {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-folgelauf > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-run__herkunft {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-muted, inherit);\n}\n\n/* Widerspricht das Modell, ist das das Wichtigste auf der Seite. */\n.szenen-diagnose--antwort {\n    border-left: 3px solid var(--color-accent, var(--color-border));\n}\n\n/* Der Bildw\xE4hler (D-92) \u2014 Browser und Inspector, dem Labs-Tab nachgebildet,\n   aber mit dem CSS dieser Ansicht: eine gemeinsame Komponente \xFCber zwei\n   Dom\xE4nengrenzen w\xE4re eine Kopplung, die keiner gewollt hat.\n\n   Der Review vom 2026-08-22 (R12.1/R12.2) hat den Ma\xDFstab gesetzt: Der Bestand\n   ist ein **Browser**, kein Seiteninhalt. Vierzig Werke d\xFCrfen die Szenenseite\n   nicht meterlang machen, und zw\xF6lf Varianten eines Werkes keine zw\xF6lf\n   Bildschirmseiten. Deshalb steht hier alles unter zwei Regeln \u2014 begrenzte\n   Fl\xE4che mit eigenem Scroll, und Kacheln statt Karten. */\n\n/* \u2500\u2500 Ebene 1: der Browser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl {\n    /* Dieselbe Begr\xFCndung wie beim Inspector: Als Grid-Element w\xFCrde der\n       W\xE4hler sonst so breit wie sein breitester Inhalt. */\n    min-width: 0;\n}\n\n.szenen-bildwahl__browser {\n    /* Die eigene Scrollfl\xE4che ist der ganze Punkt: Der Bestand w\xE4chst nach\n       innen, nicht nach unten. Dieselbe Gr\xF6\xDFenordnung wie `max-h-[300px]` im\n       Labs-Browser. */\n    max-height: 19rem;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__raster {\n    display: grid;\n    /* Vier Spalten auf schmalen Displays \u2014 der gemeldete Screenshot zeigte eine\n       einzige Spalte gro\xDFer Karten. Breiter wird automatisch dichter. */\n    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__karte {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    text-align: left;\n    cursor: pointer;\n}\n\n/* Das fokussierte Werk ist klar markiert \u2014 sonst wei\xDF niemand, wessen Galerie\n   der Inspector unten zeigt. */\n.szenen-bildwahl__karte.is-fokus {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n/* \u2500\u2500 Die Kachel selbst \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Der Platz steht, bevor das Bild da ist \u2014 sonst springt das Raster, sobald\n   die erste Vorschau eintrifft. */\n.szenen-bildkachel {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    overflow: hidden;\n    background: var(--color-bg-app);\n}\n\n.szenen-bildkachel img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.szenen-bildkachel__leer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(135deg, var(--color-bg-app), var(--color-bg-surface));\n}\n\n/* R12.3: Eine fehlende Vorschau bleibt kachelgro\xDF. Vorher fiel die Karte auf\n   ihren Prompttext zur\xFCck \u2014 und ein Prompt hat im echten Bestand mehrere\n   hundert Zeichen. */\n.szenen-bildkachel__zeichen {\n    font-size: 0.875rem;\n    font-weight: 700;\n    color: var(--color-text-secondary);\n    opacity: 0.6;\n}\n\n/* Wie viele Varianten das Werk hat \u2014 klein und \xFCberlagernd, nie als\n   dominanter Text. */\n.szenen-bildwahl__anzahl {\n    position: absolute;\n    top: 0.15rem;\n    right: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    font-weight: 700;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* Eine Zeile, dann Schluss. Der Prompt eines Werkes ist oft mehrere hundert\n   Zeichen lang und w\xE4re als Prim\xE4rdarstellung genau die Textw\xFCste, gegen die\n   der Review antritt. */\n.szenen-bildwahl__kacheltitel {\n    display: block;\n    padding: 0.15rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.3;\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Ebene 2: der Inspector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__inspector {\n    /* Ohne `min-width: 0` gewinnt der Inhalt: Der W\xE4hler ist Element eines\n       Grids (`.szenen-form`), und dort ist `min-width: auto` die Vorgabe. Der\n       Streifen unten ist rund 1000 px breit \u2014 gemessen am 2026-08-22 im echten\n       Browser zog er die Auswahl von 374 px auf 1088 px auf und schob die\n       ganze Seite waagerecht heraus, statt selbst zu scrollen. */\n    min-width: 0;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    /* Sichtbar abgesetzt vom Browser: zwei Ebenen, nicht eine lange Liste. */\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__inspektorkopf {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bildwahl__werktitel {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: var(--color-text-primary);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.szenen-bildwahl__zurueck {\n    flex: 0 0 auto;\n    font-size: 0.6875rem;\n    padding: 0.15rem 0.5rem;\n}\n\n/* Der Streifen: waagerecht scrollend, feste kleine Kacheln \u2014 zw\xF6lf Varianten\n   bleiben ein \xDCberblick statt zw\xF6lf Bildschirmseiten. */\n.szenen-bildwahl__streifen {\n    /* Die Breite kommt vom Elter, nie vom Inhalt \u2014 sonst scrollt hier nichts. */\n    max-width: 100%;\n    display: flex;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0 0 0.25rem;\n    list-style: none;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n}\n\n.szenen-bildwahl__streifen > li {\n    flex: 0 0 auto;\n    width: 5rem;\n}\n\n.szenen-bildwahl__variante {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-app);\n    cursor: pointer;\n}\n\n.szenen-bildwahl__variante.is-gewaehlt {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n.szenen-bildwahl__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Das Gew\xE4hlte \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__gewaehlt {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__gewaehlt li {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    max-width: 100%;\n}\n\n/* Das gew\xE4hlte Bild wird best\xE4tigt, nicht nur benannt: eine kleine Vorschau\n   neben dem Titel. */\n.szenen-bildwahl__gewaehlt .szenen-bildkachel {\n    width: 2.25rem;\n    flex: 0 0 auto;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__gewaehlt .szenen-bildwahl__kacheltitel {\n    min-width: 0;\n    max-width: 12rem;\n    font-size: 0.75rem;\n}\n\n.szenen-beleg__kopf {\n    display: flex;\n    align-items: center;\n    gap: var(--space-sm);\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details + details {\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details > summary {\n    cursor: pointer;\n    font-weight: 600;\n}\n\n/* \u2500\u2500 Die Fehlerrettung (Stufe 6.6, A5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Sie steht im Fehlerblock und muss trotzdem als Werkzeug lesbar sein, nicht\n * als weitere Fehlermeldung. Deshalb abgesetzt wie der Folgelauf \u2014 und aus\n * demselben Grund: Beides sind Angebote, keine Ausk\xFCnfte.\n *\n * Der wichtigste optische Punkt ist die Trennung von Original und\n * Arbeitskopie. Das Original bekommt den ruhigen, \u201Efesten" Hintergrund der\n * Belege; die Kopie sieht aus wie ein normales Eingabefeld, weil sie eines\n * ist. */\n.szenen-rettung {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-rettung > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-rettung textarea[readonly] {\n    background: var(--color-bg-surface);\n    color: var(--color-text-secondary);\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung textarea:not([readonly]) {\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung__aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0;\n}\n\n/* Ein Befund tr\xE4gt Code, Bezug und Meldung. Der Code steht klein und\n * monospaced davor: Er ist die Kennung, nicht die Aussage. */\n.szenen-diagnose__liste {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-diagnose__liste code {\n    font-size: 0.8125rem;\n}\n\n.szenen-diagnose__liste > li[data-severity=\'warning\'] {\n    color: var(--color-text-secondary);\n}\n\n/* \u2500\u2500 Die Draft-Kette (Stufe 6.6, C4) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Hauptweg. Er steht nach den Einzel\xFCbernahmen und muss als das erkennbar\n * sein, was er ist: nicht eine weitere Option, sondern der k\xFCrzere Weg zum\n * selben Ziel. Deshalb durchgezogener Rahmen statt gestricheltem \u2014 er ist\n * Angebot **und** Empfehlung. */\n.szenen-kette {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-kette > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-kette ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0 0 var(--space-sm);\n    padding-left: var(--space-md);\n}\n\n.szenen-kette code {\n    font-size: 0.8125rem;\n}\n\n/* Ein Hinweis, der eine Bedingung erklaert \u2014 nicht rot, weil er kein Fehler\n   ist, aber abgesetzt, weil er eine Folge hat. */\n.szenen-detail__hint {\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Stufe 6.7: Bilder am Prompt-Lauf (H0/H1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich tr\xE4gt zwei Dinge, die man nie verwechseln darf: den **Eingang**\n * (woraus der Prompt entstand) und den **Ausgang** (was daraus wurde). Sie\n * bekommen deshalb verschiedene Akzentkanten statt nur verschiedener\n * \xDCberschriften \u2014 wer schnell liest, sieht die Trennung, bevor er sie liest.\n */\n.szenen-bilder {\n    display: grid;\n    gap: var(--space-md);\n    margin-top: var(--space-sm);\n}\n\n.szenen-bilder__eingang,\n.szenen-bilder__ausgang {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__eingang {\n    border-left: 3px solid var(--color-accent-purple, var(--color-border));\n}\n\n.szenen-bilder__ausgang {\n    border-left: 3px solid var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-bilder h5 {\n    margin: 0;\n}\n\n.szenen-bilder__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: 0;\n    align-items: baseline;\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-bilder__eingangsliste,\n.szenen-bilder__batchliste,\n.szenen-bilder__auftraege {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bilder__eingangsliste > li,\n.szenen-bilder__batchliste > li,\n.szenen-bilder__auftraege > li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n/* Ein unterbrochener Auftrag ist der Fall, f\xFCr den der Auftragssatz existiert.\n   Er wird deshalb markiert \u2014 nicht rot, denn er ist kein Fehler, sondern eine\n   offene Entscheidung. */\n.szenen-bilder__auftraege > li[data-status="started"] {\n    border-left: 3px solid var(--color-warning);\n}\n\n.szenen-bilder__auftraege > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-bilder__auftraege > li[data-status="partial"] {\n    border-left: 3px solid var(--color-accent-blue, var(--color-border));\n}\n\n.szenen-bilder__auftraege > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n/* Das Eingangsbild benutzt seit C3 dieselbe Kachel wie W\xE4hler und Galerie.\n   Sie ist von Haus aus so breit wie ihr Platz \u2014 in dieser Zeile bekommt sie\n   deshalb eine feste Gr\xF6sse, sonst sch\xF6be sie die Metadaten heraus. */\n.szenen-bilder__eingangsliste .szenen-bildkachel {\n    flex: 0 0 auto;\n    width: 4rem;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batch {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batchkopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-bilder__herkunft {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n/* Review-Befund \u2014 ein transienter Bildfehler ist wiederholbar, kein\n   endg\xFCltiges \u201Efehlt". Dezent wie ein Angebot, nicht wie ein Fehlerzustand. */\n.szenen-bilder__retry {\n    justify-self: start;\n    padding: 0.15rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n/* C4 \u2014 die Provenienz vollst\xE4ndig, aber sekund\xE4r. */\n.szenen-bilder__technik > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n}\n\n/* C5 \u2014 der Verlauf verdichtet, seine Ausreisser nicht. */\n.szenen-bilder__verlauf > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__verlauf[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__auffaellig {\n    margin: 0;\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n.szenen-bilder__auftragskennung {\n    flex-basis: 100%;\n    color: var(--color-text-tertiary);\n    font-size: 0.6875rem;\n}\n\n/* \u2500\u2500 C1/C2 \u2014 Galerie und grosse Ansicht \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Das Raster w\xE4chst mit dem Platz: auf 390 px drei bis vier Kacheln je Reihe,\n   auf dem Desktop entsprechend mehr. Vorher war jedes Bild eine Zeile aus\n   Daumennagel plus vier Metadatenfeldern \u2014 vier Bilder ergaben vier Textzeilen\n   und das Protokoll war die Hauptsache. */\n.szenen-bildgalerie {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildgalerie__kachel {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildgalerie__kachel:hover,\n.szenen-bildgalerie__kachel:focus-visible {\n    border-color: var(--color-accent-teal, var(--color-text-primary));\n}\n\n.szenen-bildgalerie__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* Die grosse Ansicht liegt \xFCber allem und bringt ihren eigenen Grund mit \u2014\n   `position: fixed` bezieht sich im Flow-Canvas auf dessen Rahmen, in React auf\n   das Fenster; in beiden F\xE4llen genau das Gew\xFCnschte. */\n.szenen-bildviewer {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    /* Deckend, nicht get\xF6nt: Bei 0.92 schimmerte der Laufbereich durch und man\n       las Prompttext quer \xFCber dem Bild \u2014 im Browser gemessen. */\n    background: #000;\n}\n\n/* Titel, Z\xE4hlung, Schliessen \u2014 drei Spalten, damit ein langer Werktitel die\n   Z\xE4hlung nicht in die n\xE4chste Zeile und \xFCber das Bild schiebt. */\n.szenen-bildviewer__kopf {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    color: var(--color-text-primary);\n}\n\n.szenen-bildviewer__titel {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-weight: 600;\n}\n\n.szenen-bildviewer__zaehler {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n}\n\n.szenen-bildviewer__buehne {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-sm);\n    min-height: 0;\n    min-width: 0;\n}\n\n/* Der Rahmen nimmt den Platz, der zwischen den Bl\xE4tterkn\xF6pfen \xFCbrig ist \u2014\n   `min-width: 0`, damit er auch wirklich schrumpft statt sie hinauszuschieben. */\n.szenen-bildviewer__rahmen {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n}\n\n.szenen-bildviewer__bild {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n}\n\n.szenen-bildviewer__leer {\n    color: var(--color-text-secondary);\n    text-align: center;\n}\n\n/* Die Bl\xE4tterkn\xF6pfe sind daumengross und liegen an den R\xE4ndern \u2014 auf einem\n   Telefon ist der Rand erreichbar, die Bildmitte nicht. */\n.szenen-bildviewer__blaettern {\n    flex: 0 0 auto;\n    width: 2.75rem;\n    height: 3.5rem;\n    font-size: 1.75rem;\n    line-height: 1;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildviewer__details {\n    max-height: 8rem;\n    overflow-y: auto;\n    color: var(--color-text-secondary);\n}\n\n/* Die Aktionen stehen abgesetzt: Sie sind Angebote, keine Ausk\xFCnfte \u2014 dasselbe\n   Muster wie beim Folgelauf und bei der Fehlerrettung. */\n/* D \u2014 die Aktionen stehen abgesetzt und standardm\xE4ssig kompakt: Sie sind\n   Angebote, keine Ausk\xFCnfte. Vorher hielten beide Formulare dauerhaft offen und\n   machten aus jedem Lauf zwei zus\xE4tzliche Bildschirmseiten. */\n.szenen-bilder__aktion {\n    min-width: 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__aktion > summary {\n    color: var(--color-text-primary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-bilder__aktion[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion h5 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-bilder__aktion ol {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n    font-size: 0.8125rem;\n}\n\n/* Regelwerk-UX Schritt 16 \u2014 der ZIP-Sammelimport.\n *\n * \xA78: Der gemeldete Einsatz ist mobil. Deshalb **ein** Seedfeld statt einer\n * gestapelten Eingabe je Bild, und die Zuordnung Bild -> Seed als umbrechende\n * Zeile statt als Tabelle: Eine Tabelle waere auf 390 px abgeschnitten, und\n * abgeschnitten heisst hier, dass der Nutzer die Zuordnung nicht mehr pruefen\n * kann \u2014 genau die Pruefung, wegen der die Vorschau existiert. */\n.szenen-bilder__zip {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-bilder__zipkopf {\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipvorlagen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n    margin: 0;\n}\n\n/* Eine laengere Liste bleibt scrollbar, statt die Sektion und damit den\n * Import-Knopf aus dem Blick zu schieben (\xA78, letzter Punkt). */\n.szenen-bilder__zipliste {\n    max-height: 16rem;\n    overflow-y: auto;\n}\n\n.szenen-bilder__zipliste > li {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-bilder__zipliste > li > span:first-child {\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipliste > li > span:last-child {\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n}\n\n/* ==========================================================================\n   STUFE 6.10 \u2014 ELEMENTEDITOR UND VERSIONSNAVIGATION\n   ========================================================================== */\n\n/* \xA74.2 \u2014 vier Sachverhalte, vier Marken. Die Marken stehen in einer eigenen\n * Spalte, damit ANGEZEIGT + BEVORZUGT nebeneinander lesbar bleiben, statt sich\n * durch den Text zu schieben. */\n.szenen-detail__heads li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n}\n\n.szenen-version__titel {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-right: auto;\n}\n\n/* V17 \u2014 Kennungen bleiben vollst\xE4ndig sichtbar, aber optisch sekund\xE4r. */\n.szenen-version__id,\n.szenen-ref__id,\n.szenen-detail__field-key {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    overflow-wrap: anywhere;\n}\n\n.szenen-version__marken {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-version__marken > span {\n    padding: 0.1rem 0.5rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.7rem;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n}\n\n.szenen-version--angezeigt {\n    border-color: var(--color-accent-teal, #2dd4bf) !important;\n}\n\n/* V9 \u2014 der Basiswechsel ist eine Entscheidung, keine Nebenwirkung. */\n.szenen-detail__confirm {\n    display: grid;\n    gap: var(--space-sm);\n    margin: var(--space-md) 0;\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-accent-amber, #f59e0b);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__confirm p {\n    margin: 0;\n}\n\n/* Untergruppen von Objektfeldern (`prompt_render_settings`, `overrides`,\n   `blender_render_settings`) \u2014 seit A1/A2 auf- und zuklappbar. Eine optionale\n   Gruppe startet zu: Blender und `overrides` f\xFCllten auf einem 390-px-Display\n   sonst mehrere Bildschirmseiten, obwohl die meisten Shots sie nie anfassen. */\n.szenen-detail__group {\n    min-width: 0;\n    margin: var(--space-md) 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group > summary {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__group[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n/* A2 \u2014 dass eine zugeklappte Gruppe schon Werte tr\xE4gt, muss man sehen, ohne\n   sie zu \xF6ffnen. Sonst \xFCbersieht man eine gesetzte Blender-Ausgabe genau so\n   lange, bis sie im Ergebnis auftaucht. */\n.szenen-detail__group-status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n    color: var(--color-text-tertiary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group[data-konfiguriert="ja"] > summary .szenen-detail__group-status {\n    color: var(--color-text-primary);\n    border-color: var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-detail__group-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n/* A3 \u2014 die Kernaussage steht am Feld, die Begr\xFCndung dahinter. Nicht als\n   Tooltip: Auf einem Telefon gibt es kein Hover, und was dort unerreichbar ist,\n   ist gestrichen \u2014 nur ohne dass es jemand entschieden h\xE4tte. */\n.szenen-detail__warum > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-detail__warum > small {\n    display: block;\n    padding-top: var(--space-xs);\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__fieldrow {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-bottom: var(--space-md);\n}\n\n/* A4 \u2014 der technische Feldname bleibt lesbar, tritt aber hinter das fachliche\n   Label zur\xFCck. */\n.szenen-detail__field-label {\n    color: var(--color-text-primary);\n}\n\n.szenen-detail__field {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-detail__field > span {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n}\n\n/* Mehrfachauswahl und Listeneditoren. */\n.szenen-feld__mehrfach,\n.szenen-feld__liste,\n.szenen-feld__reflist,\n.szenen-feld__ref,\n.szenen-feld__zielmodell,\n.szenen-feld__kamera {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-feld__mehrfach > label,\n.szenen-feld__null {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-feld__liste-zeile {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-feld__reflist ol {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-feld__reflist li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs);\n    padding: var(--space-xs) var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \xA76.1 \u2014 Titel und Typ zuerst, Kennungen daneben. */\n.szenen-ref__anzeige {\n    display: inline-flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-ref__typ {\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-ref__warn {\n    padding: 0.1rem 0.5rem;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    font-weight: 700;\n}\n\n/* \xA76.5 \u2014 abgeleitete Angaben, ausdr\xFCcklich nur Anzeige. */\n.szenen-detail__derived {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__derived dl {\n    display: grid;\n    grid-template-columns: minmax(10rem, auto) 1fr;\n    gap: var(--space-xs) var(--space-sm);\n    margin: 0;\n}\n\n.szenen-detail__derived dt {\n    color: var(--color-text-secondary);\n}\n\n.szenen-detail__derived dd {\n    margin: 0;\n}\n\n.szenen-feld__abgeleitet {\n    margin: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n}\n';
 
 // src/lib/utils.ts
 var getFormattedTimestamp = () => {
@@ -13472,7 +13472,7 @@ function roundOfRun(run, runsOfShot) {
 }
 
 // src/features/szenen/areas/RunImagesPanel.tsx
-var import_react40 = require("react");
+var import_react40 = __toESM(require("react"));
 
 // src/lib/szenen/elementEvents.ts
 var SZENEN_EVENT_PREFIX = "szenen.";
@@ -13853,6 +13853,130 @@ function findPromptRun(events, runId) {
   return collectPromptRuns(events).find((run) => run.run_id === runId) ?? null;
 }
 
+// src/lib/szenen/seedListe.ts
+var DEFAULT_SEED_VORLAGE = {
+  name: "Default",
+  seeds: "1; 10; 100; 1000",
+  builtin: true
+};
+function parseSeedListe(eingabe) {
+  if (!eingabe) return [];
+  return eingabe.split(/[,;]/).map((teil) => teil.trim()).filter((teil) => teil.length > 0);
+}
+var GANZZAHL = /^-?\d+$/;
+function ordneSeedsZu(eingabe, anzahl) {
+  const tokens = Array.isArray(eingabe) ? [...eingabe] : parseSeedListe(eingabe);
+  const eintraege = [];
+  for (let position = 0; position < anzahl; position++) {
+    const roh = tokens[position] ?? null;
+    if (roh === null) {
+      eintraege.push({ position, roh: null, seed: null, ungueltig: false });
+      continue;
+    }
+    const zahl = GANZZAHL.test(roh) ? Number(roh) : Number.NaN;
+    const gueltig = Number.isSafeInteger(zahl);
+    eintraege.push({
+      position,
+      roh,
+      seed: gueltig ? zahl : null,
+      ungueltig: !gueltig
+    });
+  }
+  return {
+    eintraege,
+    ungueltige: eintraege.filter((e) => e.ungueltig),
+    ueberzaehlig: Math.max(0, tokens.length - anzahl)
+  };
+}
+function seedFehlerText(ungueltige) {
+  const teile = ungueltige.map((e) => `Bild ${e.position + 1}: "${e.roh}"`);
+  return `Die Seedliste enth\xE4lt keine ganze Zahl an ${teile.length === 1 ? "Position" : "Positionen"} \u2014 ${teile.join(", ")}. Kein Bild wurde importiert.`;
+}
+function mitDefaultVorlage(custom) {
+  return [DEFAULT_SEED_VORLAGE, ...custom.filter((v) => !v.builtin)];
+}
+
+// src/lib/szenen/zipBilder.ts
+var BILD_ENDUNGEN = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  webp: "image/webp"
+};
+var UPLOAD_MAX_BYTES = 45 * 1024 * 1024;
+function byteLaenge(base64) {
+  const fuellzeichen = base64.endsWith("==") ? 2 : base64.endsWith("=") ? 1 : 0;
+  return Math.floor(base64.length * 3 / 4) - fuellzeichen;
+}
+function angekuendigteGroesse(eintrag) {
+  const roh = eintrag._data?.uncompressedSize;
+  return typeof roh === "number" && Number.isFinite(roh) && roh >= 0 ? roh : null;
+}
+function bildGroesseVerdikt(archiv, pfad, bytes) {
+  if (bytes === null || bytes <= UPLOAD_MAX_BYTES) return null;
+  return `${archiv}: Das Bild ${pfad} ist entpackt ${mb(bytes)} MB gro\xDF \u2014 die Grenze f\xFCr eine einzelne Bilddatei liegt bei ${UPLOAD_MAX_BYTES / 1024 / 1024} MB. Kein Bild wurde importiert.`;
+}
+function mb(bytes) {
+  return (bytes / 1024 / 1024).toFixed(1);
+}
+function istZipDatei(datei) {
+  return /\.zip$/i.test(datei.name);
+}
+function endungVon(pfad) {
+  const punkt = pfad.lastIndexOf(".");
+  return punkt >= 0 ? pfad.slice(punkt + 1).toLowerCase() : "";
+}
+function istImportierbar(pfad, istVerzeichnis) {
+  if (istVerzeichnis) return false;
+  if (pfad.startsWith("__MACOSX/")) return false;
+  const datei = pfad.slice(pfad.lastIndexOf("/") + 1);
+  if (datei.startsWith(".")) return false;
+  return endungVon(datei) in BILD_ENDUNGEN;
+}
+function nachPfad(a, b) {
+  return a.localeCompare(b, "en", { numeric: true, sensitivity: "base" }) || (a < b ? -1 : a > b ? 1 : 0);
+}
+async function leseBilderAusZip(datei) {
+  const name = datei.name ?? "Archiv";
+  if (datei.size > UPLOAD_MAX_BYTES) {
+    throw new Error(
+      `${name} ist ${mb(datei.size)} MB gro\xDF \u2014 die Grenze liegt bei ${UPLOAD_MAX_BYTES / 1024 / 1024} MB.`
+    );
+  }
+  const { default: JSZip4 } = await import("jszip");
+  const archiv = await JSZip4.loadAsync(datei).catch((fehler4) => {
+    throw new Error(
+      `${name} konnte nicht als ZIP gelesen werden: ${fehler4 instanceof Error ? fehler4.message : String(fehler4)}`
+    );
+  });
+  const pfade = [];
+  archiv.forEach((pfad, eintrag) => {
+    if (istImportierbar(pfad, eintrag.dir)) pfade.push(pfad);
+  });
+  pfade.sort(nachPfad);
+  if (pfade.length === 0) {
+    throw new Error(
+      `${name} enth\xE4lt kein unterst\xFCtztes Bild (erwartet: ${Object.keys(BILD_ENDUNGEN).map((e) => `.${e}`).join(", ")}).`
+    );
+  }
+  const bilder = [];
+  for (const pfad of pfade) {
+    const eintrag = archiv.file(pfad);
+    if (!eintrag) continue;
+    const angekuendigt = bildGroesseVerdikt(name, pfad, angekuendigteGroesse(eintrag));
+    if (angekuendigt) throw new Error(angekuendigt);
+    const base64 = await eintrag.async("base64");
+    const nachgemessen = bildGroesseVerdikt(name, pfad, byteLaenge(base64));
+    if (nachgemessen) throw new Error(nachgemessen);
+    bilder.push({
+      name: pfad,
+      base64,
+      mimeType: BILD_ENDUNGEN[endungVon(pfad)]
+    });
+  }
+  return bilder;
+}
+
 // src/features/szenen/areas/Bildbausteine.tsx
 var import_react39 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -14291,6 +14415,7 @@ function useBildQuellen(port, bilder) {
   const [stand, setStand] = (0, import_react40.useState)(() => ({ quellen: /* @__PURE__ */ new Map(), fehler: /* @__PURE__ */ new Map() }));
   const gehalten = (0, import_react40.useRef)(/* @__PURE__ */ new Map());
   const gescheitert = (0, import_react40.useRef)(/* @__PURE__ */ new Map());
+  const [versuch, setVersuch] = (0, import_react40.useState)(0);
   const schluessel = bilder.map((b) => `${b.media_ref}|${b.mime_type ?? ""}`).join(" ");
   (0, import_react40.useEffect)(() => {
     const bestand = port.imageLibrary;
@@ -14299,7 +14424,9 @@ function useBildQuellen(port, bilder) {
     void (async () => {
       for (const bild of bilder) {
         if (abgebrochen) return;
-        if (gehalten.current.has(bild.media_ref) || gescheitert.current.has(bild.media_ref)) continue;
+        const vorher = gescheitert.current.get(bild.media_ref);
+        const endgueltig = vorher !== void 0 && !vorher.retryable;
+        if (gehalten.current.has(bild.media_ref) || endgueltig) continue;
         const ergebnis = await bestand.resolveImage(bild.media_ref, bild.mime_type ?? null);
         if (abgebrochen) return;
         if (ergebnis.kind === "ok" && ergebnis.value) {
@@ -14307,8 +14434,12 @@ function useBildQuellen(port, bilder) {
             bild.media_ref,
             `data:${ergebnis.value.mime_type};base64,${ergebnis.value.data}`
           );
+          gescheitert.current.delete(bild.media_ref);
         } else if (ergebnis.kind === "error") {
-          gescheitert.current.set(bild.media_ref, ergebnis.message);
+          gescheitert.current.set(bild.media_ref, {
+            message: ergebnis.message,
+            retryable: ergebnis.retryable
+          });
         }
         setStand({
           quellen: new Map(gehalten.current),
@@ -14319,8 +14450,19 @@ function useBildQuellen(port, bilder) {
     return () => {
       abgebrochen = true;
     };
-  }, [port, schluessel]);
-  return stand;
+  }, [port, schluessel, versuch]);
+  const fehlerNachricht = /* @__PURE__ */ new Map();
+  let wiederholbar = false;
+  for (const [ref, f] of stand.fehler) {
+    fehlerNachricht.set(ref, f.message);
+    if (f.retryable) wiederholbar = true;
+  }
+  return {
+    quellen: stand.quellen,
+    fehler: fehlerNachricht,
+    wiederholbar,
+    erneutVersuchen: () => setVersuch((n) => n + 1)
+  };
 }
 var BildDetails = ({ bild, fehler: fehler4, aufloesbar }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "szenen-bilder__meta", "data-testid": `batchbild-${bild.media_ref}`, children: [
   /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: bild.media_ref }),
@@ -14341,8 +14483,17 @@ var BildDetails = ({ bild, fehler: fehler4, aufloesbar }) => /* @__PURE__ */ (0,
   // Serverroute (A6).
   /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("em", { "data-testid": `batchbild-unsupported-${bild.media_ref}`, children: "Dieser Host l\xF6st keine Bilder auf \u2014 nur die Metadaten sind bekannt." })
 ] });
+var HERKUNFT_TEXT = {
+  generated_in_app: "in der App erzeugt",
+  external_import: "extern importiert",
+  mixed: "gemischte Herkunft"
+};
+var HERKUNFT_KURZ = {
+  generated_in_app: "in der App erzeugt",
+  external_import: "extern importiert"
+};
 var BatchKachel = ({ port, batch }) => {
-  const { quellen, fehler: fehler4 } = useBildQuellen(port, batch.images);
+  const { quellen, fehler: fehler4, wiederholbar, erneutVersuchen } = useBildQuellen(port, batch.images);
   const aufloesbar = Boolean(port.imageLibrary);
   const bilder = batch.images.map((bild) => ({
     id: bild.media_ref,
@@ -14368,7 +14519,7 @@ var BatchKachel = ({ port, batch }) => {
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("header", { className: "szenen-bilder__batchkopf", children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { children: batch.title }),
           /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "szenen-bilder__herkunft", children: [
-            batch.source_kind === "generated_in_app" ? "in der App erzeugt" : "extern importiert",
+            HERKUNFT_TEXT[batch.source_kind],
             " \xB7 ",
             batch.images.length,
             " Bild(er)"
@@ -14382,6 +14533,16 @@ var BatchKachel = ({ port, batch }) => {
             satzTitel: batch.title
           }
         ),
+        wiederholbar && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "szenen-bilder__retry",
+            onClick: erneutVersuchen,
+            "data-testid": `batch-retry-${batch.item_id}`,
+            children: "Bilder erneut laden"
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("details", { className: "szenen-bilder__technik", "data-testid": `batch-technik-${batch.item_id}`, children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("summary", { children: "Technische Details" }),
           /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "szenen-bilder__ids", children: [
@@ -14390,8 +14551,13 @@ var BatchKachel = ({ port, batch }) => {
               /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { "data-testid": `batch-item-${batch.item_id}`, children: batch.item_id })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
-              "Batches ",
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: batch.generation_batch_ids.join(", ") })
+              "Batches",
+              " ",
+              batch.origins.length > 0 ? batch.origins.map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react40.default.Fragment, { children: [
+                i > 0 ? ", " : "",
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: h.generation_batch_id }),
+                ` (${HERKUNFT_KURZ[h.source_kind]})`
+              ] }, h.generation_batch_id)) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: batch.generation_batch_ids.join(", ") })
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "szenen-bilder__batchliste", children: batch.images.map((bild) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -14595,21 +14761,114 @@ var ErzeugenAktion = ({ port, lauf, wahl, wahlFehler, onFertig }) => {
     )
   ] });
 };
+var DEFAULT_VORLAGE_KEY = "__default__";
 var ZuordnenAktion = ({ port, lauf, onFertig }) => {
   const [dateien, setDateien] = (0, import_react40.useState)([]);
   const [seeds, setSeeds] = (0, import_react40.useState)({});
+  const [zip, setZip] = (0, import_react40.useState)(null);
+  const [zipLaedt, setZipLaedt] = (0, import_react40.useState)(false);
+  const [seedListe, setSeedListe] = (0, import_react40.useState)("");
+  const [vorlagen, setVorlagen] = (0, import_react40.useState)([DEFAULT_SEED_VORLAGE]);
+  const [vorlageKey, setVorlageKey] = (0, import_react40.useState)(DEFAULT_VORLAGE_KEY);
+  const [vorlagenStand, setVorlagenStand] = (0, import_react40.useState)(0);
+  const [vorlageBenennen, setVorlageBenennen] = (0, import_react40.useState)(false);
+  const [vorlageName, setVorlageName] = (0, import_react40.useState)("");
   const [modell, setModell] = (0, import_react40.useState)("");
   const [itemId, setItemId] = (0, import_react40.useState)("");
   const [laeuft, setLaeuft] = (0, import_react40.useState)(false);
   const [notiz, setNotiz] = (0, import_react40.useState)(null);
+  const auswahlMarke = (0, import_react40.useRef)(0);
+  const zipAktiv = zip !== null;
+  (0, import_react40.useEffect)(() => {
+    if (!zipAktiv) return;
+    let abgebrochen = false;
+    void (async () => {
+      const gelesen = port.seedTemplates ? await port.seedTemplates.listSeedTemplates() : null;
+      if (abgebrochen) return;
+      setVorlagen(mitDefaultVorlage(
+        gelesen && gelesen.kind === "ok" ? gelesen.value : []
+      ));
+    })();
+    return () => {
+      abgebrochen = true;
+    };
+  }, [zipAktiv, port, vorlagenStand]);
   if (!port.imageBatchWrite) {
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { "data-testid": `zuordnen-unsupported-${lauf.run_id}`, children: "Dieser Host ordnet keine externen Bilder zu \u2014 er hat keinen gesicherten Batch-Schreibweg. Die Historie oben bleibt trotzdem sichtbar." });
   }
-  const importieren = async () => {
+  const zuordnung = zip ? ordneSeedsZu(seedListe, zip.bilder.length) : null;
+  const dateiWahl = async (liste) => {
+    const gewaehlt = [...liste ?? []];
+    const warZip = zip !== null;
+    const meine = auswahlMarke.current += 1;
+    const veraltet = () => auswahlMarke.current !== meine;
+    const zips = gewaehlt.filter(istZipDatei);
+    const nurEinZip = zips.length === 1 && gewaehlt.length === 1;
+    setNotiz(null);
+    setSeeds({});
+    setZip(null);
+    setDateien(zips.length === 0 ? gewaehlt : []);
+    setZipLaedt(nurEinZip);
+    if (zips.length > 0 && zips.length !== gewaehlt.length) {
+      setNotiz({
+        tone: "error",
+        text: `Die Auswahl enth\xE4lt ${zips.length} ZIP-Datei(en) und ${gewaehlt.length - zips.length} Bilddatei(en). Bitte entweder ein ZIP oder einzelne Bilder w\xE4hlen \u2014 nicht beides in einem Import.`
+      });
+      return;
+    }
+    if (zips.length > 1) {
+      setNotiz({
+        tone: "error",
+        text: `${zips.length} ZIP-Dateien gew\xE4hlt (${zips.map((z) => z.name).join(", ")}). Ein Import nimmt genau ein ZIP.`
+      });
+      return;
+    }
+    if (!nurEinZip) return;
+    const datei = zips[0];
+    try {
+      const bilder = await leseBilderAusZip(datei);
+      if (veraltet()) return;
+      setZip({ datei, bilder });
+      if (!warZip) {
+        setSeedListe(DEFAULT_SEED_VORLAGE.seeds);
+        setVorlageKey(DEFAULT_VORLAGE_KEY);
+      }
+    } catch (fehler4) {
+      if (veraltet()) return;
+      setNotiz({
+        tone: "error",
+        text: fehler4 instanceof Error ? fehler4.message : String(fehler4)
+      });
+    }
+    if (veraltet()) return;
+    setZipLaedt(false);
+  };
+  const schreiben = async (bilder, generationBatchId, titel) => {
     setLaeuft(true);
     setNotiz(null);
     try {
-      const bilder = [];
+      const ergebnis = await port.imageBatchWrite.importBatch({
+        runId: lauf.run_id,
+        generationBatchId,
+        images: bilder,
+        title: titel
+      });
+      setNotiz(
+        ergebnis.kind === "ok" ? { tone: "ok", text: `Importiert als Item ${ergebnis.value.item_id} mit ${bilder.length} Bild(ern).` } : noticeFor(ergebnis, "Externe Bilder importieren")
+      );
+    } catch (fehler4) {
+      setNotiz({
+        tone: "error",
+        text: `Externe Bilder importieren: ${fehler4 instanceof Error ? fehler4.message : String(fehler4)}`
+      });
+    }
+    setLaeuft(false);
+    onFertig();
+  };
+  const importieren = async () => {
+    let bilder;
+    try {
+      bilder = [];
       for (let index = 0; index < dateien.length; index++) {
         const roh = (seeds[index] ?? "").trim();
         const seed = roh === "" ? void 0 : Number.parseInt(roh, 10);
@@ -14622,25 +14881,42 @@ var ZuordnenAktion = ({ port, lauf, onFertig }) => {
           ...seed !== void 0 ? { seed } : {}
         });
       }
-      const ergebnis = await port.imageBatchWrite.importBatch({
-        runId: lauf.run_id,
-        // Vor dem Aufruf gebildet und stabil (D-113): eine Wiederholung
-        // derselben Einreichung erzeugt kein zweites Item.
-        generationBatchId: `imp-${lauf.run_id}-${dateien.length}-${dateien.map((d) => d.size).join("_")}`,
-        images: bilder,
-        title: `Externer Import zu Lauf ${lauf.run_id}`
-      });
-      setNotiz(
-        ergebnis.kind === "ok" ? { tone: "ok", text: `Importiert als Item ${ergebnis.value.item_id} mit ${bilder.length} Bild(ern).` } : noticeFor(ergebnis, "Externe Bilder importieren")
-      );
     } catch (fehler4) {
       setNotiz({
         tone: "error",
         text: `Externe Bilder importieren: ${fehler4 instanceof Error ? fehler4.message : String(fehler4)}`
       });
+      return;
     }
-    setLaeuft(false);
-    onFertig();
+    await schreiben(
+      bilder,
+      // Vor dem Aufruf gebildet und stabil (D-113): eine Wiederholung
+      // derselben Einreichung erzeugt kein zweites Item.
+      `imp-${lauf.run_id}-${dateien.length}-${dateien.map((d) => d.size).join("_")}`,
+      `Externer Import zu Lauf ${lauf.run_id}`
+    );
+  };
+  const zipImportieren = async () => {
+    if (!zip || !zuordnung) return;
+    if (zuordnung.ungueltige.length > 0) {
+      setNotiz({ tone: "error", text: seedFehlerText(zuordnung.ungueltige) });
+      return;
+    }
+    const bilder = zip.bilder.map((bild, index) => {
+      const seed = zuordnung.eintraege[index]?.seed ?? null;
+      return {
+        imageBase64: bild.base64,
+        ...modell.trim() ? { model: modell.trim() } : {},
+        // Unbekannt bleibt unbekannt: kein Feld statt eines erfundenen
+        // Werts (§6.1).
+        ...seed !== null ? { seed } : {}
+      };
+    });
+    await schreiben(
+      bilder,
+      `imp-${lauf.run_id}-zip-${zip.datei.size}-${bilder.length}`,
+      `Externer Import zu Lauf ${lauf.run_id} (${zip.datei.name})`
+    );
   };
   const zuordnen = async () => {
     setLaeuft(true);
@@ -14658,35 +14934,63 @@ var ZuordnenAktion = ({ port, lauf, onFertig }) => {
     setLaeuft(false);
     onFertig();
   };
+  const vorlageWaehlen = (key) => {
+    setVorlageKey(key);
+    const vorlage = key === DEFAULT_VORLAGE_KEY ? DEFAULT_SEED_VORLAGE : vorlagen.find((v) => String(v.id) === key);
+    if (vorlage) setSeedListe(vorlage.seeds);
+  };
+  const vorlageSpeichern = async () => {
+    const name = vorlageName.trim();
+    if (!name || !seedListe.trim() || !port.seedTemplates?.saveSeedTemplate) return;
+    const ergebnis = await port.seedTemplates.saveSeedTemplate({ name, seeds: seedListe.trim() });
+    if (ergebnis.kind !== "ok") {
+      setNotiz(noticeFor(ergebnis, "Seed-Vorlage speichern"));
+      return;
+    }
+    setVorlageBenennen(false);
+    setVorlageName("");
+    if (ergebnis.value.id !== void 0) setVorlageKey(String(ergebnis.value.id));
+    setVorlagenStand((n) => n + 1);
+  };
+  const vorlageLoeschen = async () => {
+    if (vorlageKey === DEFAULT_VORLAGE_KEY || !port.seedTemplates?.deleteSeedTemplate) return;
+    const ergebnis = await port.seedTemplates.deleteSeedTemplate(vorlageKey);
+    if (ergebnis.kind !== "ok") {
+      setNotiz(noticeFor(ergebnis, "Seed-Vorlage l\xF6schen"));
+      return;
+    }
+    setVorlageKey(DEFAULT_VORLAGE_KEY);
+    setVorlagenStand((n) => n + 1);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "szenen-bilder__aktion-inhalt", "data-testid": `zuordnen-${lauf.run_id}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { children: [
-      "Bilddateien",
+      "Bilddateien oder ein ZIP",
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "input",
         {
           type: "file",
-          accept: "image/*",
+          accept: "image/*,.zip",
           multiple: true,
           "data-testid": `zuordnen-dateien-${lauf.run_id}`,
           onChange: (e) => {
-            setDateien([...e.target.files ?? []]);
-            setSeeds({});
+            void dateiWahl(e.target.files);
           }
         }
       )
     ] }),
+    zipLaedt && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { "data-testid": `zuordnen-zip-laedt-${lauf.run_id}`, children: "ZIP wird gelesen \u2026" }),
+    (dateien.length > 0 || zip) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { children: [
+      "Modell (f\xFCr alle Bilder, leer = unbekannt)",
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "input",
+        {
+          value: modell,
+          "data-testid": `zuordnen-modell-${lauf.run_id}`,
+          onChange: (e) => setModell(e.target.value)
+        }
+      )
+    ] }),
     dateien.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { children: [
-        "Modell (f\xFCr alle Bilder, leer = unbekannt)",
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          "input",
-          {
-            value: modell,
-            "data-testid": `zuordnen-modell-${lauf.run_id}`,
-            onChange: (e) => setModell(e.target.value)
-          }
-        )
-      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ol", { "data-testid": `zuordnen-vorschau-${lauf.run_id}`, children: dateien.map((datei, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
           "Position ",
@@ -14720,6 +15024,157 @@ var ZuordnenAktion = ({ port, lauf, onFertig }) => {
         }
       )
     ] }),
+    zip && zuordnung && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "szenen-bilder__zip", "data-testid": `zuordnen-zip-${lauf.run_id}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "szenen-bilder__zipkopf", children: [
+        "ZIP ",
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("code", { children: zip.datei.name }),
+        " \u2014 ",
+        zip.bilder.length,
+        " Bild(er) erkannt"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { children: [
+        "Seeds (pro Bild ein Seed, Trenner , oder ;)",
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "input",
+          {
+            "data-testid": `zuordnen-seedliste-${lauf.run_id}`,
+            value: seedListe,
+            placeholder: "z. B. 1; 10; 100; 1000",
+            onChange: (e) => setSeedListe(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { children: [
+        "Seed-Vorlage",
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          "select",
+          {
+            "data-testid": `zuordnen-seedvorlage-${lauf.run_id}`,
+            value: vorlageKey,
+            onChange: (e) => vorlageWaehlen(e.target.value),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("option", { value: DEFAULT_VORLAGE_KEY, children: [
+                "Default (",
+                DEFAULT_SEED_VORLAGE.seeds,
+                ")"
+              ] }),
+              vorlagen.filter((v) => !v.builtin).map((v) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("option", { value: String(v.id), children: [
+                v.name,
+                " (",
+                v.seeds,
+                ")"
+              ] }, String(v.id)))
+            ]
+          }
+        )
+      ] }),
+      (port.seedTemplates?.saveSeedTemplate || port.seedTemplates?.deleteSeedTemplate) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "szenen-bilder__zipvorlagen", children: [
+        port.seedTemplates?.saveSeedTemplate && !vorlageBenennen && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-testid": `zuordnen-vorlage-neu-${lauf.run_id}`,
+            disabled: !seedListe.trim(),
+            onClick: () => {
+              setVorlageName("");
+              setVorlageBenennen(true);
+            },
+            children: "Als Vorlage speichern"
+          }
+        ),
+        port.seedTemplates?.deleteSeedTemplate && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-testid": `zuordnen-vorlage-loeschen-${lauf.run_id}`,
+            disabled: vorlageKey === DEFAULT_VORLAGE_KEY,
+            onClick: () => {
+              void vorlageLoeschen();
+            },
+            children: "Vorlage l\xF6schen"
+          }
+        )
+      ] }),
+      vorlageBenennen && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { children: [
+          "Name der Vorlage",
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "input",
+            {
+              "data-testid": `zuordnen-vorlage-name-${lauf.run_id}`,
+              value: vorlageName,
+              onChange: (e) => setVorlageName(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "szenen-bilder__zipvorlagen", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "button",
+            {
+              type: "button",
+              "data-testid": `zuordnen-vorlage-sichern-${lauf.run_id}`,
+              disabled: !vorlageName.trim(),
+              onClick: () => {
+                void vorlageSpeichern();
+              },
+              children: "Speichern"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "button",
+            {
+              type: "button",
+              "data-testid": `zuordnen-vorlage-abbrechen-${lauf.run_id}`,
+              onClick: () => setVorlageBenennen(false),
+              children: "Abbrechen"
+            }
+          )
+        ] })
+      ] }),
+      zuordnung.ueberzaehlig > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { "data-testid": `zuordnen-ueberzaehlig-${lauf.run_id}`, children: [
+        zuordnung.ueberzaehlig,
+        " Seed(s) mehr als Bilder \u2014 die \xFCberz\xE4hligen werden nicht geschrieben."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "ol",
+        {
+          className: "szenen-bilder__zipliste",
+          "data-testid": `zuordnen-zip-vorschau-${lauf.run_id}`,
+          children: zip.bilder.map((bild, index) => {
+            const eintrag = zuordnung.eintraege[index];
+            return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
+                "Position ",
+                index,
+                ": ",
+                bild.name
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "span",
+                {
+                  "data-testid": `zuordnen-zip-seed-${lauf.run_id}-${index}`,
+                  "data-seed": eintrag.seed === null ? "" : String(eintrag.seed),
+                  children: eintrag.ungueltig ? `Seed ung\xFCltig: "${eintrag.roh}"` : eintrag.seed === null ? "Seed unbekannt" : `Seed ${eintrag.seed}`
+                }
+              )
+            ] }, `${bild.name}-${index}`);
+          })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        "button",
+        {
+          type: "button",
+          "data-testid": `zuordnen-zip-import-${lauf.run_id}`,
+          disabled: laeuft || zipLaedt,
+          onClick: zipImportieren,
+          children: [
+            zip.bilder.length,
+            " Bild(er) aus ZIP importieren"
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { children: [
       "Oder ein bestehendes Library-Item",
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -14775,6 +15230,8 @@ var RunsPanel = ({ port, source, contextId }) => {
   const [nachladen, setNachladen] = (0, import_react41.useState)(0);
   const faehig = capabilitiesOf(port);
   const quellSchluessel = source.kind === "published" ? source.shotVersionId : source.kind === "draft_chain" ? source.chainId : source.sceneElementId;
+  const aktuelleQuelle = (0, import_react41.useRef)({ kind: source.kind, id: quellSchluessel });
+  aktuelleQuelle.current = { kind: source.kind, id: quellSchluessel };
   const [phase, neuLaden] = usePortQuery(
     () => {
       if (source.kind === "published") return port.runs.listRunsForShot(source.shotVersionId);
@@ -14785,12 +15242,16 @@ var RunsPanel = ({ port, source, contextId }) => {
   );
   const starten = async () => {
     if (source.kind !== "published") return;
+    const gestartetFuer = { kind: source.kind, id: source.shotVersionId };
     setLaeuft(true);
     const ergebnis = await port.runs.startRun({
       shotVersionId: source.shotVersionId,
       ...anweisung.trim() ? { userInstruction: anweisung.trim() } : {},
       contextId
     });
+    if (aktuelleQuelle.current.kind !== gestartetFuer.kind || aktuelleQuelle.current.id !== gestartetFuer.id) {
+      return;
+    }
     setNotiz(noticeFor(ergebnis, "Prompt-Lauf starten"));
     setLaeuft(false);
     setNachladen((n) => n + 1);
@@ -14800,6 +15261,12 @@ var RunsPanel = ({ port, source, contextId }) => {
   const [gewaehlteRunde, setGewaehlteRunde] = (0, import_react41.useState)(void 0);
   const neueste = laeufe.length > 0 ? laeufe[laeufe.length - 1].run_id : null;
   const offeneRunde = gewaehlteRunde === void 0 ? neueste : gewaehlteRunde;
+  (0, import_react41.useEffect)(() => {
+    setGewaehlteRunde(void 0);
+    setAnweisung("");
+    setNotiz(null);
+    setLaeuft(false);
+  }, [source.kind, quellSchluessel]);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "szenen-runs", "data-testid": "laeufe-bereich", "data-shot-version": quellSchluessel, children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h4", { children: "Prompt-L\xE4ufe" }),
     source.kind === "published" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "szenen-runs__start", children: [
@@ -14870,6 +15337,26 @@ var Sekundaertext = ({ titel, text, testId }) => {
     )
   ] });
 };
+var LISTE_ANFANG = 3;
+var SekundaerListe = ({ titel, eintraege, testId, className }) => {
+  const [alle, setAlle] = (0, import_react41.useState)(false);
+  const lang = eintraege.length > LISTE_ANFANG;
+  const gezeigt = lang && !alle ? eintraege.slice(0, LISTE_ANFANG) : eintraege;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { className: "szenen-runs__sekundaer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h5", { children: titel }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className, "data-testid": testId, children: gezeigt.map((eintrag, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: eintrag }, i)) }),
+    lang && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "szenen-runs__mehr",
+        onClick: () => setAlle(!alle),
+        "data-testid": `${testId}-mehr`,
+        children: alle ? "weniger anzeigen" : `${eintraege.length - LISTE_ANFANG} weitere anzeigen`
+      }
+    )
+  ] });
+};
 var RundenEintrag = ({ port, lauf, runde, offen, onUmschalten, itemMoeglich, onItemGespeichert }) => {
   const [notiz, setNotiz] = (0, import_react41.useState)(null);
   const [laeuft, setLaeuft] = (0, import_react41.useState)(false);
@@ -14955,11 +15442,23 @@ var RundenEintrag = ({ port, lauf, runde, offen, onUmschalten, itemMoeglich, onI
             testId: `feedback-${lauf.run_id}`
           }
         ),
-        lauf.output.visibility.assumptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { className: "szenen-runs__sekundaer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h5", { children: "Annahmen" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { "data-testid": `annahmen-${lauf.run_id}`, children: lauf.output.visibility.assumptions.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: a }, i)) })
-        ] }),
-        lauf.output.notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "szenen-runs__notizen", "data-testid": `notizen-${lauf.run_id}`, children: lauf.output.notes.map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: n }, i)) })
+        lauf.output.visibility.assumptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          SekundaerListe,
+          {
+            titel: "Annahmen",
+            eintraege: lauf.output.visibility.assumptions,
+            testId: `annahmen-${lauf.run_id}`
+          }
+        ),
+        lauf.output.notes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          SekundaerListe,
+          {
+            titel: "Notizen",
+            eintraege: lauf.output.notes,
+            testId: `notizen-${lauf.run_id}`,
+            className: "szenen-runs__notizen"
+          }
+        )
       ] }),
       lauf.raw_output && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("details", { "data-testid": `diagnose-${lauf.run_id}`, children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("summary", { children: "Rohantwort (Diagnose)" }),
@@ -17466,8 +17965,6 @@ var DeriveArea = ({ port, contextId }) => {
       if (ergebnis.kind === "ok") setLauf(ergebnis.value);
       else if (ergebnis.kind === "unsupported") {
         setMeldung(`Dieser Host bietet \u201E${ergebnis.capability}" nicht an.`);
-      } else if (ergebnis.kind === "rejected") {
-        setMeldung(ergebnis.errors.map((e) => e.message).join("; "));
       } else {
         setMeldung(ergebnis.message);
       }
@@ -17557,8 +18054,6 @@ ${teile.map((t) => `- ${t}`).join("\n")}`;
     });
     if (ergebnis.kind === "ok") {
       setUebernommen((v) => ({ ...v, [type]: ergebnis.value.elementId }));
-    } else if (ergebnis.kind === "rejected") {
-      setMeldung(ergebnis.errors.map((e) => e.message).join("; "));
     } else if (ergebnis.kind === "unsupported") {
       setMeldung(`Dieser Host bietet \u201E${ergebnis.capability}" nicht an.`);
     } else {
@@ -21218,11 +21713,14 @@ function ordersForPromptRun(events, runId) {
 
 // src/lib/szenen/imageBatchStore.ts
 var istText5 = (wert) => typeof wert === "string" && wert.trim().length > 0;
-function alsBilder(rohe) {
+function alsBilder(rohe, generationBatchId) {
   if (!Array.isArray(rohe)) return [];
   return rohe.filter((b) => !!b && typeof b === "object").filter((b) => istText5(b.media_ref) && typeof b.position === "number").map((b) => ({
     media_ref: b.media_ref,
     position: b.position,
+    // Welcher Provideraufruf dieses Bild geliefert hat (§8) — aus dem
+    // Ereignis, in dem es steht, nicht aus seiner Position abgeleitet.
+    generation_batch_id: generationBatchId,
     ...istText5(b.asset_id) ? { asset_id: b.asset_id } : {},
     // Der bestätigte MIME-Typ (Review 2026-08-18 §5 P2) muss durch das
     // Rücklesen hindurch: Genau hier braucht ihn der Lesepfad, um den
@@ -21235,6 +21733,11 @@ function alsBilder(rohe) {
     height: b.height ?? null
   }));
 }
+function gesamtHerkunft(origins) {
+  const vertreten = new Set(origins.map((o) => o.source_kind));
+  if (vertreten.size === 1) return [...vertreten][0];
+  return "mixed";
+}
 function collectImageBatches(events) {
   const byItemId = /* @__PURE__ */ new Map();
   for (const event of events) {
@@ -21244,21 +21747,29 @@ function collectImageBatches(events) {
     if (payload.source_kind !== "generated_in_app" && payload.source_kind !== "external_import") continue;
     const bestehend = byItemId.get(payload.item_id);
     if (bestehend?.generation_batch_ids.includes(payload.generation_batch_id)) continue;
-    const bilder = alsBilder(payload.images);
+    const bilder = alsBilder(payload.images, payload.generation_batch_id);
+    const herkunft = {
+      generation_batch_id: payload.generation_batch_id,
+      source_kind: payload.source_kind
+    };
     if (!bestehend) {
       byItemId.set(payload.item_id, {
         item_id: payload.item_id,
         prompt_run_id: payload.prompt_run_id,
         generation_batch_ids: [payload.generation_batch_id],
         source_kind: payload.source_kind,
+        origins: [herkunft],
         title: istText5(payload.title) ? payload.title : `Batch aus Lauf ${payload.prompt_run_id}`,
         images: bilder
       });
       continue;
     }
+    const origins = [...bestehend.origins, herkunft];
     byItemId.set(payload.item_id, {
       ...bestehend,
       generation_batch_ids: [...bestehend.generation_batch_ids, payload.generation_batch_id],
+      origins,
+      source_kind: gesamtHerkunft(origins),
       images: [...bestehend.images, ...bilder]
     });
   }
@@ -21377,13 +21888,21 @@ async function legeBatchAb(options, input) {
       `Die Batch-Metadaten fuer ${input.generationBatchId} konnten nicht protokolliert werden, obwohl die Bilder bereits im Bestand liegen: ${error instanceof Error ? error.message : String(error)}`
     );
   }
+  const origins = [
+    ...bestehend?.origins ?? [],
+    { generation_batch_id: input.generationBatchId, source_kind: input.sourceKind }
+  ];
   const zusammengefuehrt = {
     item_id: itemId,
     prompt_run_id: input.runId,
     generation_batch_ids: bestehend ? [...bestehend.generation_batch_ids, input.generationBatchId] : [input.generationBatchId],
-    source_kind: bestehend?.source_kind ?? input.sourceKind,
+    source_kind: gesamtHerkunft(origins),
+    origins,
     title: titel,
-    images: [...bestehend?.images ?? [], ...abgelegt]
+    images: [
+      ...bestehend?.images ?? [],
+      ...abgelegt.map((bild) => ({ ...bild, generation_batch_id: input.generationBatchId }))
+    ]
   };
   return { kind: "ok", value: zusammengefuehrt };
 }