@rslsp1/fa-app-tools 9.1.0 → 10.0.0

package/dist/index.mjs

@@ -17,11 +17,11 @@ import {
   setHFToken,
   tsFromEventPath,
   writeHFEvent
-} from "./chunk-33L6XAHI.mjs";
+} from "./chunk-UDBGDCKI.mjs";
 import "./chunk-FUY2OCVC.mjs";
 
 // package.json
-var version = "9.1.0";
+var version = "10.0.0";
 
 // src/hooks/useOnClickOutside.ts
 import { useEffect } from "react";
@@ -60,7 +60,7 @@ function useKeyboardNavigation(history, currentResult, setCurrentResult) {
 }
 
 // src/features/szenen/szenenViewStyles.generated.ts
-var SZENEN_VIEW_STYLES = '/* ==========================================================================\n   SZENEN VIEW\n   ========================================================================== */\n\n.szenen-view {\n    display: grid;\n    gap: var(--space-md);\n    width: 100%;\n    min-width: 0;\n    font-family: var(--font-sans);\n    padding: var(--space-md);\n}\n\n@media (max-width: 760px) {\n    .szenen-view {\n        padding: var(--space-sm);\n        gap: var(--space-sm);\n    }\n}\n\n.szenen-view__intro {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.75rem, 1.6vw, 1.1rem);\n    color: var(--color-text-primary);\n    background:\n        radial-gradient(circle at 85% 15%, rgba(45, 212, 191, 0.16), transparent 34%),\n        linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n}\n\n.szenen-view__intro h2,\n.szenen-view__intro p {\n    margin: 0;\n}\n\n.szenen-view__intro h2 {\n    margin-bottom: 0.1rem;\n    font-size: clamp(1rem, 1.9vw, 1.3rem);\n    line-height: 1.2;\n}\n\n.szenen-view__intro > div > p:last-child {\n    max-width: 44rem;\n    color: var(--color-text-secondary);\n    font-size: 0.82rem;\n    line-height: 1.35;\n}\n\n.szenen-view__eyebrow {\n    margin-bottom: 0.1rem !important;\n    color: var(--color-accent-teal, #2dd4bf);\n    font-size: 0.62rem;\n    font-weight: 800;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n}\n\n.szenen-view__step {\n    flex: none;\n    padding: 0.25rem 0.6rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    font-weight: 700;\n}\n\n.szenen-view__nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-view__nav button,\n.szenen-view button {\n    min-height: 2.25rem;\n    padding: 0.45rem 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-view button:hover:not(:disabled) {\n    color: var(--color-text-primary);\n    background: var(--color-bg-surface-hover);\n    border-color: var(--color-border-hover);\n}\n\n.szenen-view button:focus-visible,\n.szenen-view input:focus-visible,\n.szenen-view select:focus-visible,\n.szenen-view textarea:focus-visible {\n    outline: 2px solid var(--color-accent-blue);\n    outline-offset: 2px;\n}\n\n.szenen-view button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.szenen-view__nav button.is-active,\n.szenen-view__nav button[aria-selected="true"] {\n    color: var(--color-text-primary);\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-view__area {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-view__capability-note,\n.szenen-area__lead {\n    margin: 0;\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-accent-purple);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-view__host-notes {\n    color: var(--color-text-secondary);\n}\n\n.szenen-view__host-notes > summary {\n    cursor: pointer;\n    font-size: 0.8rem;\n}\n\n/* `box-sizing` steht hier und nicht beim Host: Die React-App bringt in\n * `master.css` einen globalen `* { box-sizing: border-box }` mit, Flow **nicht**\n * \u2014 dort ragte `width: 100%` plus Innenabstand um die Randbreite aus dem\n * Elternelement heraus und erzeugte auf ~390 px einen horizontalen Scroll. Die\n * gemeinsame Ansicht darf sich auf keinen Host-Reset verlassen. */\n.szenen-view input:not([type="checkbox"]),\n.szenen-view select,\n.szenen-view textarea {\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 2.25rem;\n    padding: 0.5rem 0.65rem;\n    color: var(--color-text-primary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font: inherit;\n}\n\n.szenen-view textarea {\n    min-height: 7rem;\n    resize: vertical;\n    font-family: var(--font-mono);\n    font-size: 0.8rem;\n}\n\n.szenen-view label {\n    display: grid;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-view code,\n.szenen-view pre {\n    font-family: var(--font-mono);\n    overflow-wrap: anywhere;\n}\n\n.szenen-view h3,\n.szenen-view h4,\n.szenen-view h5 {\n    margin-top: 0;\n}\n\n.szenen-view ul,\n.szenen-view ol {\n    padding-left: 1.25rem;\n}\n\n.szenen-elements,\n.szenen-detail,\n.szenen-scene,\n.szenen-setup,\n.szenen-erweitert,\n.szenen-prompts,\n.szenen-shot,\n.szenen-media,\n.szenen-runs {\n    display: grid;\n    gap: var(--space-md);\n    min-width: 0;\n}\n\n/* Arbeitsoberflaeche: Liste links, Bearbeitung rechts.\n *\n * Breit stehen beide Spalten nebeneinander \u2014 die Auswahl bleibt sichtbar,\n * waehrend bearbeitet wird. Schmal rendert die Komponente nur eine der beiden;\n * hier steht deshalb keine Regel, die die andere versteckt. */\n@media (min-width: 761px) {\n    .szenen-elements {\n        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);\n        align-items: start;\n    }\n\n    .szenen-elements__master,\n    .szenen-elements__detail {\n        min-width: 0;\n    }\n}\n\n.szenen-elements__master,\n.szenen-elements__detail {\n    display: grid;\n    gap: var(--space-sm);\n    align-content: start;\n    min-width: 0;\n}\n\n.szenen-elements__toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__heading {\n    margin: 0;\n    font-size: 1.05rem;\n}\n\n.szenen-elements__scope {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    min-width: 0;\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-elements__scope > select {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.szenen-elements__new {\n    flex: none;\n    font-weight: 700;\n}\n\n.szenen-elements__create {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-accent-blue);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-elements__create label {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-elements__create-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__options > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    cursor: pointer;\n}\n\n.szenen-elements__back {\n    justify-self: start;\n    font-weight: 700;\n}\n\n.szenen-elements__empty-detail {\n    margin: 0;\n    color: var(--color-text-tertiary);\n}\n\n.szenen-elements__filter,\n.szenen-detail__actions,\n.szenen-runs__start,\n.szenen-scene-editor__add,\n.szenen-scene-editor__add-relation {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-elements__filter > label,\n.szenen-runs__start > label,\n.szenen-scene-editor__add > input {\n    flex: 1 1 16rem;\n}\n\n.szenen-elements__filter > label:has(input[type="checkbox"]) {\n    display: flex;\n    flex: 1 1 16rem;\n    flex-direction: row;\n    align-items: center;\n}\n\n.szenen-elements__filter input[type="checkbox"] {\n    width: 1rem;\n    height: 1rem;\n    accent-color: var(--color-accent-blue);\n}\n\n.szenen-elements__list {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-elements__list > li > button {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs) var(--space-sm);\n    width: 100%;\n    height: 100%;\n    text-align: left;\n}\n\n.szenen-elements__list > li > button > .szenen-elements__title {\n    flex: 1 1 100%;\n}\n\n.szenen-elements__list > li > button.is-selected,\n.szenen-elements__list > li > button[aria-current="true"] {\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-elements__type {\n    color: var(--color-accent-blue);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-elements__title {\n    color: var(--color-text-primary);\n    font-size: 0.95rem;\n}\n\n.szenen-elements__subtype,\n.szenen-elements__retired {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n}\n\n.szenen-elements__retired {\n    color: var(--color-warning);\n}\n\n.szenen-detail {\n    margin-top: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n@media (min-width: 761px) {\n    .szenen-detail {\n        padding: var(--space-md);\n        background: var(--color-bg-surface);\n        border: 1px solid var(--color-border);\n        border-radius: var(--radius-sm);\n    }\n}\n\n.szenen-detail > header,\n.szenen-detail__heads,\n.szenen-detail__draft,\n.szenen-capability {\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* .szenen-runs ist ein eigenst\xE4ndiger sichtbarer Bereich, beh\xE4lt Styling auf Desktop */\n@media (min-width: 761px) {\n    .szenen-runs {\n        padding: var(--space-md);\n        background: var(--color-bg-surface);\n        border: 1px solid var(--color-border);\n        border-radius: var(--radius-md);\n    }\n}\n\n@media (max-width: 760px) {\n    .szenen-runs {\n        padding: 0;\n        background: transparent;\n        border: none;\n        border-radius: 0;\n    }\n}\n\n.szenen-detail__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin-bottom: 0;\n    color: var(--color-text-secondary);\n}\n\n.szenen-detail__heads ul,\n.szenen-scene-editor ul,\n.szenen-runs > ol,\n.szenen-capability > ul {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-detail__heads li,\n.szenen-scene-editor li,\n.szenen-runs > ol > li,\n.szenen-capability > ul > li {\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n\n/* Stufe 6.7.2 (D-126) \u2014 Advanced-/Debug-Fl\xE4che f\xFCr die rohe, schema-getriebene\n * Feldliste einer Szene. Gestrichelt wie die anderen \u201EAngebot statt\n * Auskunft"-Bereiche, aber ohne Akzentfarbe: sie ist kein Vorschlag, sondern\n * ein Eskalationsweg. */\n.szenen-detail__technical {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__technical > summary {\n    margin-bottom: var(--space-sm);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__technical[open] > summary {\n    margin-bottom: var(--space-md);\n}\n\n.szenen-detail__field small,\n.szenen-capability small {\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__preview-errors,\n.szenen-detail__notice--error,\n.szenen-view [role="alert"] {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-detail__notice {\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__notice--success,\n.szenen-view [data-tone="success"] {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n    border-color: var(--color-accent-green);\n}\n\n.szenen-scene-editor {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--space-md);\n    margin-bottom: 0;\n}\n\n.szenen-scene-editor > section {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n/* \u2500\u2500 Stufe 6.7.2 (D-126): Node-/Relationskarten \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Nodes und Beziehungen sind `<details>` \u2014 dieselbe Interaktionssprache wie\n * \u201ERohantwort (Diagnose)" und \u201EBilder zu diesem Lauf" in RunsPanel.tsx. Kopf\n * (immer sichtbar) tr\xE4gt Inhalt zuerst, Technik zuletzt; Body (nur bei\n * ge\xF6ffneter Karte) tr\xE4gt die Bearbeitungscontrols. Padding wandert von der\n * `<li>` in Kopf/Body, damit die Karte keinen doppelten Rand bekommt. */\n.szenen-scene-editor li {\n    padding: 0;\n    overflow: hidden;\n}\n\n.szenen-node-karte__kopf,\n.szenen-relation-karte__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs) var(--space-sm);\n    padding: var(--space-sm);\n    cursor: pointer;\n    list-style: none;\n}\n\n.szenen-node-karte__kopf::-webkit-details-marker,\n.szenen-relation-karte__kopf::-webkit-details-marker {\n    display: none;\n}\n\n.szenen-node-karte__titel {\n    flex: 1 1 12rem;\n    min-width: 0;\n    color: var(--color-text-primary);\n    font-weight: 600;\n    overflow-wrap: anywhere;\n}\n\n.szenen-node-karte__typ {\n    flex: none;\n    padding: 0.15rem 0.55rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    white-space: nowrap;\n}\n\n/* node_id klein, monospace, sekund\xE4r \u2014 sichtbar auch bei zugeklappter Karte,\n * aber optisch klar hinter Beschreibung und Typ. */\n.szenen-node-karte__meta {\n    flex: 1 1 100%;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n.szenen-node-karte__meta code {\n    font-size: inherit;\n}\n\n.szenen-node-karte__body,\n.szenen-relation-karte__body {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-sm) var(--space-sm);\n    border-top: 1px solid var(--color-border);\n}\n\n/* \xA74 \u2014 Prim\xE4raktion und destruktive Aktion optisch getrennt: \u201ENode/Beziehung\n * entfernen" bekommt einen eigenen, warnenden Ton statt gleichgewichtig neben\n * der normalen Bearbeitung zu stehen. */\n.szenen-node-karte__entfernen,\n.szenen-relation-karte__entfernen {\n    justify-self: start;\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n    border-color: var(--color-accent-red);\n}\n\n.szenen-relation-karte__kopf {\n    font-size: 0.9rem;\n}\n\n.szenen-relation-karte__kopf code {\n    overflow-wrap: anywhere;\n}\n\n.szenen-relation-karte__pfeil {\n    flex: none;\n    color: var(--color-text-secondary);\n}\n\n/* Die Composer-\xD6ffner (\u201E+ Node hinzuf\xFCgen", \u201E+ Beziehung hinzuf\xFCgen") sind\n * Angebote, keine Ausk\xFCnfte \u2014 dasselbe gestrichelte Muster wie beim Folgelauf\n * und der Fehlerrettung (\xA73.3/\xA73.5). */\n.szenen-scene-editor__oeffnen {\n    width: 100%;\n    border-style: dashed;\n}\n\n.szenen-refpicker {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: var(--space-sm) 0;\n    padding: var(--space-sm) 0;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-refpicker legend {\n    padding: 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n}\n\n.szenen-capability > ul > li {\n    display: grid;\n    grid-template-columns: minmax(10rem, 1fr) auto minmax(14rem, 2fr);\n    align-items: start;\n    gap: var(--space-sm);\n}\n\n.szenen-capability__state {\n    padding: 0.1rem 0.5rem;\n    border-radius: var(--radius-full);\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n}\n\n.szenen-capability__state--yes {\n    color: #bbf7d0;\n    background: var(--color-accent-green-dim);\n}\n\n.szenen-capability__state--no {\n    color: #fecaca;\n    background: var(--color-accent-red-dim);\n}\n\n.szenen-capability__state--unknown {\n    color: #fef08a;\n    background: rgba(234, 179, 8, 0.2);\n}\n\n.szenen-runs > ol > li {\n    display: grid;\n    gap: var(--space-sm);\n}\n\n/* B1 \u2014 die geschlossene Runde. Vorher stand die `run_id` als erstes und war\n   die einzige Information, die niemand liest; jetzt beantwortet die Kopfzeile\n   welche Runde, ob sie durchging, mit welchem Modell und was ungef\xE4hr\n   herauskam. */\n.szenen-runs__kopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-sm);\n    width: 100%;\n    padding: var(--space-xs) 0;\n    text-align: left;\n    color: var(--color-text-secondary);\n    background: transparent;\n    border: none;\n    cursor: pointer;\n}\n\n.szenen-runs__marke {\n    font-weight: 700;\n    color: var(--color-text-primary);\n}\n\n.szenen-runs__status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    border-radius: var(--radius-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n}\n\n.szenen-runs__status[data-status="succeeded"] {\n    border-color: var(--color-success);\n}\n\n.szenen-runs__status[data-status="failed"] {\n    border-color: var(--color-danger);\n}\n\n.szenen-runs__modell {\n    font-size: 0.75rem;\n}\n\n/* Der Auszug ist die Inhaltsvorschau der Runde. Er bekommt eine eigene Zeile,\n   damit er nicht mit Marke und Modell um dieselbe Zeile ringt. */\n.szenen-runs__auszug {\n    flex: 1 1 100%;\n    min-width: 0;\n    color: var(--color-text-tertiary);\n    font-size: 0.8125rem;\n}\n\n/* B2 \u2014 ein Fehler steht ausserhalb der aufklappbaren Fl\xE4che: Wer eine rote\n   Runde sieht, soll nicht erst klicken m\xFCssen, um zu erfahren, woran sie\n   gescheitert ist. */\n.szenen-runs__fehler {\n    display: grid;\n    gap: var(--space-xs);\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-runs__fehler p {\n    margin: 0;\n}\n\n.szenen-runs__inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-runs__prompt > h5,\n.szenen-runs__sekundaer > h5 {\n    margin: 0 0 var(--space-xs);\n}\n\n.szenen-runs__prompt > p {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n.szenen-runs__prompt--negativ > p,\n.szenen-runs__sekundaer > p {\n    margin: 0;\n    color: var(--color-text-secondary);\n    white-space: pre-wrap;\n}\n\n.szenen-runs__mehr {\n    justify-self: start;\n    margin-top: var(--space-xs);\n    padding: 0;\n    color: var(--color-accent-teal, var(--color-text-secondary));\n    background: transparent;\n    border: none;\n    font-size: 0.75rem;\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.szenen-runs > ol > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-runs > ol > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n.szenen-runs details pre {\n    max-height: 20rem;\n    overflow: auto;\n    padding: var(--space-sm);\n    white-space: pre-wrap;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-media > section {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-media__lookup,\n.szenen-media__attach {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-media__lookup > label,\n.szenen-media__attach > label:first-child {\n    flex: 1 1 18rem;\n}\n\n.szenen-media__list {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-media__list > li {\n    display: grid;\n    grid-template-columns: minmax(12rem, 1fr) auto auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n@media (max-width: 760px) {\n    .szenen-view {\n        gap: var(--space-sm);\n    }\n\n    /* C1 \u2014 auf 390 px bleiben drei Kacheln je Reihe gross genug zum Erkennen\n       und klein genug, dass vier Bilder eine Reihe sind und keine Seite. */\n    .szenen-bildgalerie {\n        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    }\n\n    /* Der Viewer bekommt den ganzen Bildschirm; die Bl\xE4tterkn\xF6pfe bleiben am\n       Rand, wo der Daumen sie erreicht. */\n    .szenen-bildviewer {\n        padding: var(--space-xs);\n    }\n\n    .szenen-bildviewer__blaettern {\n        width: 2.25rem;\n        height: 4rem;\n    }\n\n    .szenen-view__intro {\n        align-items: start;\n        flex-direction: column;\n        gap: var(--space-xs);\n        padding: var(--space-sm);\n    }\n\n    .szenen-view__intro h2 {\n        font-size: 1.05rem;\n    }\n\n    .szenen-view__intro > div > p:last-child {\n        font-size: 0.78rem;\n    }\n\n    .szenen-view__nav {\n        position: sticky;\n        top: 0;\n        z-index: 2;\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: var(--space-xs);\n        padding: var(--space-xs);\n    }\n\n    .szenen-view__nav button {\n        width: 100%;\n        min-width: 0;\n        min-height: 2.5rem;\n        padding: 0.35rem 0.5rem;\n    }\n\n\n    .szenen-scene-editor {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-capability > ul > li {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-derive,\n    .szenen-elements,\n    .szenen-scene,\n    .szenen-setup,\n    .szenen-shot,\n    .szenen-media,\n    .szenen-runs {\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto;\n        align-items: center;\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter > label {\n        width: 100%;\n        min-width: 0;\n        flex: none;\n    }\n\n    .szenen-elements__filter > label:has(input[type="checkbox"]) {\n        flex: none;\n        grid-column: 1 / -1;\n    }\n\n    /* Schmal ist die Liste eine Spalte, und die Auswahl fuehrt weiter \u2014 der\n     * Eintrag ist deshalb ein Ziel fuer den Finger, keine Kachel. */\n    .szenen-elements__list {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .szenen-elements__list > li > button {\n        min-height: 2.75rem;\n    }\n\n    .szenen-elements__back {\n        justify-self: stretch;\n        min-height: 2.5rem;\n    }\n\n    .szenen-detail__actions,\n    .szenen-runs__start,\n    .szenen-scene-editor__add,\n    .szenen-scene-editor__add-relation {\n        align-items: stretch;\n        flex-direction: column;\n    }\n\n    .szenen-runs__start > *,\n    .szenen-scene-editor__add > *,\n    .szenen-scene-editor__add-relation > * {\n        width: 100%;\n        flex: none;\n    }\n}\n\n/* \u2500\u2500 Stufe 6.5: Rekonstruktion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich zeigt drei Dinge nebeneinander: den Vorschlag, das nicht\n * Ableitbare und die Widerspr\xFCche. Die Diagnosen sind deshalb bewusst nicht\n * kleiner gesetzt als der Vorschlag \u2014 wer sie \xFCbersieht, \xFCbernimmt Geratenes.\n */\n\n.szenen-derive {\n    display: grid;\n    gap: var(--space-md);\n}\n\n.szenen-form {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-field {\n    display: grid;\n    gap: var(--space-xs);\n}\n\n.szenen-field > span {\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-error {\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-danger);\n    background: var(--color-accent-red-dim);\n    border: 1px solid var(--color-accent-red);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-empty {\n    padding: var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-diagnose {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-warning);\n    border-radius: var(--radius-sm);\n}\n\n/* Ein Widerspruch ist der schwerste der drei Befunde: dort steht eine\n * Entscheidung aus, die das System bewusst nicht getroffen hat (D-74). */\n.szenen-diagnose--konflikt {\n    border-left-color: var(--color-danger);\n}\n\n.szenen-diagnose > h4 {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.9375rem;\n}\n\n.szenen-diagnose ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-proposal {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-proposal > h4 {\n    margin: 0 0 var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.9375rem;\n}\n\n.szenen-proposal__payload {\n    max-height: 18rem;\n    margin: 0 0 var(--space-sm);\n    padding: var(--space-sm);\n    overflow: auto;\n    /* Ein erzeugter Prompt ist ein einziger langer Satz \u2014 ohne Umbruch\n       verschwindet er nach rechts aus dem Bild. JSON-Payloads bringen ihre\n       eigenen Zeilenumbrueche mit und leiden nicht darunter. */\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-proposal__done {\n    margin: var(--space-sm) 0 0;\n    color: var(--color-success);\n}\n\n/* Die Belege eines Laufs: Rohantwort und Systemprompt. Zum Lesen und Kopieren,\n   nicht zum Bedienen \u2014 deshalb voll markierbar und in Monospace. */\n.szenen-beleg__text {\n    width: 100%;\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    line-height: 1.5;\n    white-space: pre;\n    background: var(--color-bg-app);\n    color: var(--color-text);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    resize: vertical;\n}\n\n/* Der Folgelauf (D-87): abgesetzt, damit er nicht wie Teil des Ergebnisses\n   aussieht \u2014 er ist eine Frage, keine Auskunft. */\n.szenen-folgelauf {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-folgelauf > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-run__herkunft {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-muted, inherit);\n}\n\n/* Widerspricht das Modell, ist das das Wichtigste auf der Seite. */\n.szenen-diagnose--antwort {\n    border-left: 3px solid var(--color-accent, var(--color-border));\n}\n\n/* Der Bildw\xE4hler (D-92) \u2014 Browser und Inspector, dem Labs-Tab nachgebildet,\n   aber mit dem CSS dieser Ansicht: eine gemeinsame Komponente \xFCber zwei\n   Dom\xE4nengrenzen w\xE4re eine Kopplung, die keiner gewollt hat.\n\n   Der Review vom 2026-08-22 (R12.1/R12.2) hat den Ma\xDFstab gesetzt: Der Bestand\n   ist ein **Browser**, kein Seiteninhalt. Vierzig Werke d\xFCrfen die Szenenseite\n   nicht meterlang machen, und zw\xF6lf Varianten eines Werkes keine zw\xF6lf\n   Bildschirmseiten. Deshalb steht hier alles unter zwei Regeln \u2014 begrenzte\n   Fl\xE4che mit eigenem Scroll, und Kacheln statt Karten. */\n\n/* \u2500\u2500 Ebene 1: der Browser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl {\n    /* Dieselbe Begr\xFCndung wie beim Inspector: Als Grid-Element w\xFCrde der\n       W\xE4hler sonst so breit wie sein breitester Inhalt. */\n    min-width: 0;\n}\n\n.szenen-bildwahl__browser {\n    /* Die eigene Scrollfl\xE4che ist der ganze Punkt: Der Bestand w\xE4chst nach\n       innen, nicht nach unten. Dieselbe Gr\xF6\xDFenordnung wie `max-h-[300px]` im\n       Labs-Browser. */\n    max-height: 19rem;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__raster {\n    display: grid;\n    /* Vier Spalten auf schmalen Displays \u2014 der gemeldete Screenshot zeigte eine\n       einzige Spalte gro\xDFer Karten. Breiter wird automatisch dichter. */\n    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__karte {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    text-align: left;\n    cursor: pointer;\n}\n\n/* Das fokussierte Werk ist klar markiert \u2014 sonst wei\xDF niemand, wessen Galerie\n   der Inspector unten zeigt. */\n.szenen-bildwahl__karte.is-fokus {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n/* \u2500\u2500 Die Kachel selbst \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Der Platz steht, bevor das Bild da ist \u2014 sonst springt das Raster, sobald\n   die erste Vorschau eintrifft. */\n.szenen-bildkachel {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    overflow: hidden;\n    background: var(--color-bg-app);\n}\n\n.szenen-bildkachel img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.szenen-bildkachel__leer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(135deg, var(--color-bg-app), var(--color-bg-surface));\n}\n\n/* R12.3: Eine fehlende Vorschau bleibt kachelgro\xDF. Vorher fiel die Karte auf\n   ihren Prompttext zur\xFCck \u2014 und ein Prompt hat im echten Bestand mehrere\n   hundert Zeichen. */\n.szenen-bildkachel__zeichen {\n    font-size: 0.875rem;\n    font-weight: 700;\n    color: var(--color-text-secondary);\n    opacity: 0.6;\n}\n\n/* Wie viele Varianten das Werk hat \u2014 klein und \xFCberlagernd, nie als\n   dominanter Text. */\n.szenen-bildwahl__anzahl {\n    position: absolute;\n    top: 0.15rem;\n    right: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    font-weight: 700;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* Eine Zeile, dann Schluss. Der Prompt eines Werkes ist oft mehrere hundert\n   Zeichen lang und w\xE4re als Prim\xE4rdarstellung genau die Textw\xFCste, gegen die\n   der Review antritt. */\n.szenen-bildwahl__kacheltitel {\n    display: block;\n    padding: 0.15rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.3;\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Ebene 2: der Inspector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__inspector {\n    /* Ohne `min-width: 0` gewinnt der Inhalt: Der W\xE4hler ist Element eines\n       Grids (`.szenen-form`), und dort ist `min-width: auto` die Vorgabe. Der\n       Streifen unten ist rund 1000 px breit \u2014 gemessen am 2026-08-22 im echten\n       Browser zog er die Auswahl von 374 px auf 1088 px auf und schob die\n       ganze Seite waagerecht heraus, statt selbst zu scrollen. */\n    min-width: 0;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    /* Sichtbar abgesetzt vom Browser: zwei Ebenen, nicht eine lange Liste. */\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__inspektorkopf {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bildwahl__werktitel {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: var(--color-text-primary);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.szenen-bildwahl__zurueck {\n    flex: 0 0 auto;\n    font-size: 0.6875rem;\n    padding: 0.15rem 0.5rem;\n}\n\n/* Der Streifen: waagerecht scrollend, feste kleine Kacheln \u2014 zw\xF6lf Varianten\n   bleiben ein \xDCberblick statt zw\xF6lf Bildschirmseiten. */\n.szenen-bildwahl__streifen {\n    /* Die Breite kommt vom Elter, nie vom Inhalt \u2014 sonst scrollt hier nichts. */\n    max-width: 100%;\n    display: flex;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0 0 0.25rem;\n    list-style: none;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n}\n\n.szenen-bildwahl__streifen > li {\n    flex: 0 0 auto;\n    width: 5rem;\n}\n\n.szenen-bildwahl__variante {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-app);\n    cursor: pointer;\n}\n\n.szenen-bildwahl__variante.is-gewaehlt {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n.szenen-bildwahl__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Das Gew\xE4hlte \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__gewaehlt {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__gewaehlt li {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    max-width: 100%;\n}\n\n/* Das gew\xE4hlte Bild wird best\xE4tigt, nicht nur benannt: eine kleine Vorschau\n   neben dem Titel. */\n.szenen-bildwahl__gewaehlt .szenen-bildkachel {\n    width: 2.25rem;\n    flex: 0 0 auto;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__gewaehlt .szenen-bildwahl__kacheltitel {\n    min-width: 0;\n    max-width: 12rem;\n    font-size: 0.75rem;\n}\n\n.szenen-beleg__kopf {\n    display: flex;\n    align-items: center;\n    gap: var(--space-sm);\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details + details {\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details > summary {\n    cursor: pointer;\n    font-weight: 600;\n}\n\n/* \u2500\u2500 Die Fehlerrettung (Stufe 6.6, A5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Sie steht im Fehlerblock und muss trotzdem als Werkzeug lesbar sein, nicht\n * als weitere Fehlermeldung. Deshalb abgesetzt wie der Folgelauf \u2014 und aus\n * demselben Grund: Beides sind Angebote, keine Ausk\xFCnfte.\n *\n * Der wichtigste optische Punkt ist die Trennung von Original und\n * Arbeitskopie. Das Original bekommt den ruhigen, \u201Efesten" Hintergrund der\n * Belege; die Kopie sieht aus wie ein normales Eingabefeld, weil sie eines\n * ist. */\n.szenen-rettung {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-rettung > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-rettung textarea[readonly] {\n    background: var(--color-bg-surface);\n    color: var(--color-text-secondary);\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung textarea:not([readonly]) {\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung__aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0;\n}\n\n/* Ein Befund tr\xE4gt Code, Bezug und Meldung. Der Code steht klein und\n * monospaced davor: Er ist die Kennung, nicht die Aussage. */\n.szenen-diagnose__liste {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-diagnose__liste code {\n    font-size: 0.8125rem;\n}\n\n.szenen-diagnose__liste > li[data-severity=\'warning\'] {\n    color: var(--color-text-secondary);\n}\n\n/* \u2500\u2500 Die Draft-Kette (Stufe 6.6, C4) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Hauptweg. Er steht nach den Einzel\xFCbernahmen und muss als das erkennbar\n * sein, was er ist: nicht eine weitere Option, sondern der k\xFCrzere Weg zum\n * selben Ziel. Deshalb durchgezogener Rahmen statt gestricheltem \u2014 er ist\n * Angebot **und** Empfehlung. */\n.szenen-kette {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-kette > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-kette ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0 0 var(--space-sm);\n    padding-left: var(--space-md);\n}\n\n.szenen-kette code {\n    font-size: 0.8125rem;\n}\n\n/* Ein Hinweis, der eine Bedingung erklaert \u2014 nicht rot, weil er kein Fehler\n   ist, aber abgesetzt, weil er eine Folge hat. */\n.szenen-detail__hint {\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Stufe 6.7: Bilder am Prompt-Lauf (H0/H1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich tr\xE4gt zwei Dinge, die man nie verwechseln darf: den **Eingang**\n * (woraus der Prompt entstand) und den **Ausgang** (was daraus wurde). Sie\n * bekommen deshalb verschiedene Akzentkanten statt nur verschiedener\n * \xDCberschriften \u2014 wer schnell liest, sieht die Trennung, bevor er sie liest.\n */\n.szenen-bilder {\n    display: grid;\n    gap: var(--space-md);\n    margin-top: var(--space-sm);\n}\n\n.szenen-bilder__eingang,\n.szenen-bilder__ausgang {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__eingang {\n    border-left: 3px solid var(--color-accent-purple, var(--color-border));\n}\n\n.szenen-bilder__ausgang {\n    border-left: 3px solid var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-bilder h5 {\n    margin: 0;\n}\n\n.szenen-bilder__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: 0;\n    align-items: baseline;\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-bilder__eingangsliste,\n.szenen-bilder__batchliste,\n.szenen-bilder__auftraege {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bilder__eingangsliste > li,\n.szenen-bilder__batchliste > li,\n.szenen-bilder__auftraege > li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n/* Ein unterbrochener Auftrag ist der Fall, f\xFCr den der Auftragssatz existiert.\n   Er wird deshalb markiert \u2014 nicht rot, denn er ist kein Fehler, sondern eine\n   offene Entscheidung. */\n.szenen-bilder__auftraege > li[data-status="started"] {\n    border-left: 3px solid var(--color-warning);\n}\n\n.szenen-bilder__auftraege > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-bilder__auftraege > li[data-status="partial"] {\n    border-left: 3px solid var(--color-accent-blue, var(--color-border));\n}\n\n.szenen-bilder__auftraege > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n/* Das Eingangsbild benutzt seit C3 dieselbe Kachel wie W\xE4hler und Galerie.\n   Sie ist von Haus aus so breit wie ihr Platz \u2014 in dieser Zeile bekommt sie\n   deshalb eine feste Gr\xF6sse, sonst sch\xF6be sie die Metadaten heraus. */\n.szenen-bilder__eingangsliste .szenen-bildkachel {\n    flex: 0 0 auto;\n    width: 4rem;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batch {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batchkopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-bilder__herkunft {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n/* Review-Befund \u2014 ein transienter Bildfehler ist wiederholbar, kein\n   endg\xFCltiges \u201Efehlt". Dezent wie ein Angebot, nicht wie ein Fehlerzustand. */\n.szenen-bilder__retry {\n    justify-self: start;\n    padding: 0.15rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n/* C4 \u2014 die Provenienz vollst\xE4ndig, aber sekund\xE4r. */\n.szenen-bilder__technik > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n}\n\n/* C5 \u2014 der Verlauf verdichtet, seine Ausreisser nicht. */\n.szenen-bilder__verlauf > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__verlauf[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__auffaellig {\n    margin: 0;\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n.szenen-bilder__auftragskennung {\n    flex-basis: 100%;\n    color: var(--color-text-tertiary);\n    font-size: 0.6875rem;\n}\n\n/* \u2500\u2500 C1/C2 \u2014 Galerie und grosse Ansicht \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Das Raster w\xE4chst mit dem Platz: auf 390 px drei bis vier Kacheln je Reihe,\n   auf dem Desktop entsprechend mehr. Vorher war jedes Bild eine Zeile aus\n   Daumennagel plus vier Metadatenfeldern \u2014 vier Bilder ergaben vier Textzeilen\n   und das Protokoll war die Hauptsache. */\n.szenen-bildgalerie {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildgalerie__kachel {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildgalerie__kachel:hover,\n.szenen-bildgalerie__kachel:focus-visible {\n    border-color: var(--color-accent-teal, var(--color-text-primary));\n}\n\n.szenen-bildgalerie__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* Die grosse Ansicht liegt \xFCber allem und bringt ihren eigenen Grund mit \u2014\n   `position: fixed` bezieht sich im Flow-Canvas auf dessen Rahmen, in React auf\n   das Fenster; in beiden F\xE4llen genau das Gew\xFCnschte. */\n.szenen-bildviewer {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    /* Deckend, nicht get\xF6nt: Bei 0.92 schimmerte der Laufbereich durch und man\n       las Prompttext quer \xFCber dem Bild \u2014 im Browser gemessen. */\n    background: #000;\n}\n\n/* Titel, Z\xE4hlung, Schliessen \u2014 drei Spalten, damit ein langer Werktitel die\n   Z\xE4hlung nicht in die n\xE4chste Zeile und \xFCber das Bild schiebt. */\n.szenen-bildviewer__kopf {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    color: var(--color-text-primary);\n}\n\n.szenen-bildviewer__titel {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-weight: 600;\n}\n\n.szenen-bildviewer__zaehler {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n}\n\n.szenen-bildviewer__buehne {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-sm);\n    min-height: 0;\n    min-width: 0;\n}\n\n/* Der Rahmen nimmt den Platz, der zwischen den Bl\xE4tterkn\xF6pfen \xFCbrig ist \u2014\n   `min-width: 0`, damit er auch wirklich schrumpft statt sie hinauszuschieben. */\n.szenen-bildviewer__rahmen {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n}\n\n.szenen-bildviewer__bild {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n}\n\n.szenen-bildviewer__leer {\n    color: var(--color-text-secondary);\n    text-align: center;\n}\n\n/* Die Bl\xE4tterkn\xF6pfe sind daumengross und liegen an den R\xE4ndern \u2014 auf einem\n   Telefon ist der Rand erreichbar, die Bildmitte nicht. */\n.szenen-bildviewer__blaettern {\n    flex: 0 0 auto;\n    width: 2.75rem;\n    height: 3.5rem;\n    font-size: 1.75rem;\n    line-height: 1;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildviewer__details {\n    max-height: 8rem;\n    overflow-y: auto;\n    color: var(--color-text-secondary);\n}\n\n/* Die Aktionen stehen abgesetzt: Sie sind Angebote, keine Ausk\xFCnfte \u2014 dasselbe\n   Muster wie beim Folgelauf und bei der Fehlerrettung. */\n/* D \u2014 die Aktionen stehen abgesetzt und standardm\xE4ssig kompakt: Sie sind\n   Angebote, keine Ausk\xFCnfte. Vorher hielten beide Formulare dauerhaft offen und\n   machten aus jedem Lauf zwei zus\xE4tzliche Bildschirmseiten. */\n.szenen-bilder__aktion {\n    min-width: 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__aktion > summary {\n    color: var(--color-text-primary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-bilder__aktion[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion h5 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-bilder__aktion ol {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n    font-size: 0.8125rem;\n}\n\n/* Regelwerk-UX Schritt 16 \u2014 der ZIP-Sammelimport.\n *\n * \xA78: Der gemeldete Einsatz ist mobil. Deshalb **ein** Seedfeld statt einer\n * gestapelten Eingabe je Bild, und die Zuordnung Bild -> Seed als umbrechende\n * Zeile statt als Tabelle: Eine Tabelle waere auf 390 px abgeschnitten, und\n * abgeschnitten heisst hier, dass der Nutzer die Zuordnung nicht mehr pruefen\n * kann \u2014 genau die Pruefung, wegen der die Vorschau existiert. */\n.szenen-bilder__zip {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-bilder__zipkopf {\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipvorlagen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n    margin: 0;\n}\n\n/* Eine laengere Liste bleibt scrollbar, statt die Sektion und damit den\n * Import-Knopf aus dem Blick zu schieben (\xA78, letzter Punkt). */\n.szenen-bilder__zipliste {\n    max-height: 16rem;\n    overflow-y: auto;\n}\n\n.szenen-bilder__zipliste > li {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-bilder__zipliste > li > span:first-child {\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipliste > li > span:last-child {\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n}\n\n/* ==========================================================================\n   STUFE 6.10 \u2014 ELEMENTEDITOR UND VERSIONSNAVIGATION\n   ========================================================================== */\n\n/* \xA74.2 \u2014 vier Sachverhalte, vier Marken. Die Marken stehen in einer eigenen\n * Spalte, damit ANGEZEIGT + BEVORZUGT nebeneinander lesbar bleiben, statt sich\n * durch den Text zu schieben. */\n.szenen-detail__heads li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n}\n\n.szenen-version__titel {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-right: auto;\n}\n\n/* V17 \u2014 Kennungen bleiben vollst\xE4ndig sichtbar, aber optisch sekund\xE4r. */\n.szenen-version__id,\n.szenen-ref__id,\n.szenen-detail__field-key {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    overflow-wrap: anywhere;\n}\n\n.szenen-version__marken {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-version__marken > span {\n    padding: 0.1rem 0.5rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.7rem;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n}\n\n.szenen-version--angezeigt {\n    border-color: var(--color-accent-teal, #2dd4bf) !important;\n}\n\n/* V9 \u2014 der Basiswechsel ist eine Entscheidung, keine Nebenwirkung. */\n.szenen-detail__confirm {\n    display: grid;\n    gap: var(--space-sm);\n    margin: var(--space-md) 0;\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-accent-amber, #f59e0b);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__confirm p {\n    margin: 0;\n}\n\n/* Untergruppen von Objektfeldern (`prompt_render_settings`, `overrides`,\n   `blender_render_settings`) \u2014 seit A1/A2 auf- und zuklappbar. Eine optionale\n   Gruppe startet zu: Blender und `overrides` f\xFCllten auf einem 390-px-Display\n   sonst mehrere Bildschirmseiten, obwohl die meisten Shots sie nie anfassen. */\n.szenen-detail__group {\n    min-width: 0;\n    margin: var(--space-md) 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group > summary {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__group[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n/* A2 \u2014 dass eine zugeklappte Gruppe schon Werte tr\xE4gt, muss man sehen, ohne\n   sie zu \xF6ffnen. Sonst \xFCbersieht man eine gesetzte Blender-Ausgabe genau so\n   lange, bis sie im Ergebnis auftaucht. */\n.szenen-detail__group-status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n    color: var(--color-text-tertiary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group[data-konfiguriert="ja"] > summary .szenen-detail__group-status {\n    color: var(--color-text-primary);\n    border-color: var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-detail__group-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n/* A3 \u2014 die Kernaussage steht am Feld, die Begr\xFCndung dahinter. Nicht als\n   Tooltip: Auf einem Telefon gibt es kein Hover, und was dort unerreichbar ist,\n   ist gestrichen \u2014 nur ohne dass es jemand entschieden h\xE4tte. */\n.szenen-detail__warum > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-detail__warum > small {\n    display: block;\n    padding-top: var(--space-xs);\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__fieldrow {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-bottom: var(--space-md);\n}\n\n/* A4 \u2014 der technische Feldname bleibt lesbar, tritt aber hinter das fachliche\n   Label zur\xFCck. */\n.szenen-detail__field-label {\n    color: var(--color-text-primary);\n}\n\n.szenen-detail__field {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-detail__field > span {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n}\n\n/* Mehrfachauswahl und Listeneditoren. */\n.szenen-feld__mehrfach,\n.szenen-feld__liste,\n.szenen-feld__reflist,\n.szenen-feld__ref,\n.szenen-feld__zielmodell,\n.szenen-bilder__modellwahl,\n.szenen-feld__kamera {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n/* \u201ENeues Modell hinzufuegen" im Importdialog \u2014 dieselben Abstaende wie jedes\n   andere Formular dieser Ansicht, damit es kein Fremdkoerper wird. */\n.szenen-feld__zielmodell-neu {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n    padding: var(--space-sm);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-feld__zielmodell-neu-aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\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\n/* Bereich `Prompts` \u2014 die herkunftsuebergreifende Sicht (P1-A).\n *\n * Die Eintraege selbst rendert `RundenEintrag` und tragen damit die\n * `szenen-runs__*`-Regeln. Hier stehen nur Rahmen und Kennzeichen; eine zweite\n * Laufdarstellung gibt es nicht, also braucht sie auch kein zweites Aussehen. */\n.szenen-prompts__toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n}\n\n.szenen-prompts__heading {\n    margin: 0;\n    font-size: 1.05rem;\n    margin-right: auto;\n}\n\n.szenen-prompts__filter {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-prompts__eintrag {\n    list-style: none;\n    margin-bottom: var(--space-md);\n}\n\n.szenen-prompts__lauf {\n    padding-left: 0;\n}\n\n.szenen-prompts__herkunft {\n    margin: 0 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.78rem;\n}\n\n.szenen-prompts__hinweis {\n    font-style: italic;\n}\n\n.szenen-prompts__ausgeblendet {\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n';
+var SZENEN_VIEW_STYLES = '/* ==========================================================================\n   SZENEN VIEW\n   ========================================================================== */\n\n.szenen-view {\n    display: grid;\n    gap: var(--space-md);\n    width: 100%;\n    min-width: 0;\n    font-family: var(--font-sans);\n    padding: var(--space-md);\n}\n\n@media (max-width: 760px) {\n    .szenen-view {\n        padding: var(--space-sm);\n        gap: var(--space-sm);\n    }\n}\n\n.szenen-view__intro {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.75rem, 1.6vw, 1.1rem);\n    color: var(--color-text-primary);\n    background:\n        radial-gradient(circle at 85% 15%, rgba(45, 212, 191, 0.16), transparent 34%),\n        linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n}\n\n.szenen-view__intro h2,\n.szenen-view__intro p {\n    margin: 0;\n}\n\n.szenen-view__intro h2 {\n    margin-bottom: 0.1rem;\n    font-size: clamp(1rem, 1.9vw, 1.3rem);\n    line-height: 1.2;\n}\n\n.szenen-view__intro > div > p:last-child {\n    max-width: 44rem;\n    color: var(--color-text-secondary);\n    font-size: 0.82rem;\n    line-height: 1.35;\n}\n\n.szenen-view__eyebrow {\n    margin-bottom: 0.1rem !important;\n    color: var(--color-accent-teal, #2dd4bf);\n    font-size: 0.62rem;\n    font-weight: 800;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n}\n\n.szenen-view__step {\n    flex: none;\n    padding: 0.25rem 0.6rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.72rem;\n    font-weight: 700;\n}\n\n.szenen-view__nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-view__nav button,\n.szenen-view button {\n    min-height: 2.25rem;\n    padding: 0.45rem 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-view button:hover:not(:disabled) {\n    color: var(--color-text-primary);\n    background: var(--color-bg-surface-hover);\n    border-color: var(--color-border-hover);\n}\n\n.szenen-view button:focus-visible,\n.szenen-view input:focus-visible,\n.szenen-view select:focus-visible,\n.szenen-view textarea:focus-visible {\n    outline: 2px solid var(--color-accent-blue);\n    outline-offset: 2px;\n}\n\n.szenen-view button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.szenen-view__nav button.is-active,\n.szenen-view__nav button[aria-selected="true"] {\n    color: var(--color-text-primary);\n    background: var(--color-accent-blue-dim);\n    border-color: var(--color-accent-blue);\n}\n\n.szenen-view__area {\n    min-width: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-view__capability-note,\n.szenen-area__lead {\n    margin: 0;\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-accent-purple);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-view__host-notes {\n    color: var(--color-text-secondary);\n}\n\n.szenen-view__host-notes > summary {\n    cursor: pointer;\n    font-size: 0.8rem;\n}\n\n/* `box-sizing` steht hier und nicht beim Host: Die React-App bringt in\n * `master.css` einen globalen `* { box-sizing: border-box }` mit, Flow **nicht**\n * \u2014 dort ragte `width: 100%` plus Innenabstand um die Randbreite aus dem\n * Elternelement heraus und erzeugte auf ~390 px einen horizontalen Scroll. Die\n * gemeinsame Ansicht darf sich auf keinen Host-Reset verlassen. */\n.szenen-view input:not([type="checkbox"]),\n.szenen-view select,\n.szenen-view textarea {\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 2.25rem;\n    padding: 0.5rem 0.65rem;\n    color: var(--color-text-primary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font: inherit;\n}\n\n.szenen-view textarea {\n    min-height: 7rem;\n    resize: vertical;\n    font-family: var(--font-mono);\n    font-size: 0.8rem;\n}\n\n.szenen-view label {\n    display: grid;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n\n.szenen-view code,\n.szenen-view pre {\n    font-family: var(--font-mono);\n    overflow-wrap: anywhere;\n}\n\n.szenen-view h3,\n.szenen-view h4,\n.szenen-view h5 {\n    margin-top: 0;\n}\n\n.szenen-view ul,\n.szenen-view ol {\n    padding-left: 1.25rem;\n}\n\n.szenen-elements,\n.szenen-detail,\n.szenen-scene,\n.szenen-setup,\n.szenen-erweitert,\n.szenen-prompts,\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__hinweis {\n    margin: var(--space-xs) 0 0;\n    color: var(--color-text-secondary);\n    font-size: 0.78rem;\n}\n\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/* Im Kopf traegt die Zeile selbst den Abstand \u2014 sonst kaeme er doppelt. */\n.szenen-runs__promptkopf > h5 {\n    margin: 0;\n}\n\n/* Ueberschrift und Kopierknopf in einer Zeile. Der Knopf gehoert an den Text,\n   den er kopiert \u2014 nicht an den Rand der Runde, wo er neben dem falschen\n   Abschnitt stuende. */\n.szenen-runs__promptkopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-sm);\n    margin: 0 0 var(--space-xs);\n}\n\n/* Ein kompakter Knopf, kein zweiter Titel: Der Prompt ist die Hauptsache des\n   Abschnitts, die Aktion daneben darf ihn nicht ueberstimmen. Rahmen und\n   Hintergrund kommen aus `.szenen-view button` und bleiben \u2014 dieselbe Optik wie\n   jeder andere Knopf der Ansicht; hier wird nur die Groesse zurueckgenommen.\n   Zwei Klassen im Selektor, weil `.szenen-view button` sonst spezifischer ist. */\n.szenen-runs__promptkopf .szenen-runs__kopieren {\n    min-height: 0;\n    padding: 0.1rem 0.45rem;\n    font-size: 0.72rem;\n}\n\n/* Regel 11: die Bestaetigung nennt die Zahl, nicht nur \u201EErfolgreich". */\n.szenen-runs__kopiert {\n    color: var(--color-text-tertiary, var(--color-text-secondary));\n    font-size: 0.72rem;\n}\n\n.szenen-runs__prompt > p {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n.szenen-runs__prompt--negativ > p,\n.szenen-runs__sekundaer > p {\n    margin: 0;\n    color: var(--color-text-secondary);\n    white-space: pre-wrap;\n}\n\n.szenen-runs__mehr {\n    justify-self: start;\n    margin-top: var(--space-xs);\n    padding: 0;\n    color: var(--color-accent-teal, var(--color-text-secondary));\n    background: transparent;\n    border: none;\n    font-size: 0.75rem;\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.szenen-runs > ol > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-runs > ol > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n.szenen-runs details pre {\n    max-height: 20rem;\n    overflow: auto;\n    padding: var(--space-sm);\n    white-space: pre-wrap;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-media > section {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-media__lookup,\n.szenen-media__attach {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: end;\n    gap: var(--space-sm);\n}\n\n.szenen-media__lookup > label,\n.szenen-media__attach > label:first-child {\n    flex: 1 1 18rem;\n}\n\n.szenen-media__list {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-media__list > li {\n    display: grid;\n    grid-template-columns: minmax(12rem, 1fr) auto auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n@media (max-width: 760px) {\n    .szenen-view {\n        gap: var(--space-sm);\n    }\n\n    /* C1 \u2014 auf 390 px bleiben drei Kacheln je Reihe gross genug zum Erkennen\n       und klein genug, dass vier Bilder eine Reihe sind und keine Seite. */\n    .szenen-bildgalerie {\n        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    }\n\n    /* Der Viewer bekommt den ganzen Bildschirm; die Bl\xE4tterkn\xF6pfe bleiben am\n       Rand, wo der Daumen sie erreicht. */\n    .szenen-bildviewer {\n        padding: var(--space-xs);\n    }\n\n    .szenen-bildviewer__blaettern {\n        width: 2.25rem;\n        height: 4rem;\n    }\n\n    .szenen-view__intro {\n        align-items: start;\n        flex-direction: column;\n        gap: var(--space-xs);\n        padding: var(--space-sm);\n    }\n\n    .szenen-view__intro h2 {\n        font-size: 1.05rem;\n    }\n\n    .szenen-view__intro > div > p:last-child {\n        font-size: 0.78rem;\n    }\n\n    .szenen-view__nav {\n        position: sticky;\n        top: 0;\n        z-index: 2;\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: var(--space-xs);\n        padding: var(--space-xs);\n    }\n\n    .szenen-view__nav button {\n        width: 100%;\n        min-width: 0;\n        min-height: 2.5rem;\n        padding: 0.35rem 0.5rem;\n    }\n\n\n    .szenen-scene-editor {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-capability > ul > li {\n        grid-template-columns: 1fr;\n    }\n\n    .szenen-derive,\n    .szenen-elements,\n    .szenen-scene,\n    .szenen-setup,\n    .szenen-shot,\n    .szenen-media,\n    .szenen-runs {\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto;\n        align-items: center;\n        gap: var(--space-sm);\n    }\n\n    .szenen-elements__filter > label {\n        width: 100%;\n        min-width: 0;\n        flex: none;\n    }\n\n    .szenen-elements__filter > label:has(input[type="checkbox"]) {\n        flex: none;\n        grid-column: 1 / -1;\n    }\n\n    /* Schmal ist die Liste eine Spalte, und die Auswahl fuehrt weiter \u2014 der\n     * Eintrag ist deshalb ein Ziel fuer den Finger, keine Kachel. */\n    .szenen-elements__list {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .szenen-elements__list > li > button {\n        min-height: 2.75rem;\n    }\n\n    .szenen-elements__back {\n        justify-self: stretch;\n        min-height: 2.5rem;\n    }\n\n    .szenen-detail__actions,\n    .szenen-runs__start,\n    .szenen-scene-editor__add,\n    .szenen-scene-editor__add-relation {\n        align-items: stretch;\n        flex-direction: column;\n    }\n\n    .szenen-runs__start > *,\n    .szenen-scene-editor__add > *,\n    .szenen-scene-editor__add-relation > * {\n        width: 100%;\n        flex: none;\n    }\n}\n\n/* \u2500\u2500 Stufe 6.5: Rekonstruktion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich zeigt drei Dinge nebeneinander: den Vorschlag, das nicht\n * Ableitbare und die Widerspr\xFCche. Die Diagnosen sind deshalb bewusst nicht\n * kleiner gesetzt als der Vorschlag \u2014 wer sie \xFCbersieht, \xFCbernimmt Geratenes.\n */\n\n.szenen-derive {\n    display: grid;\n    gap: var(--space-md);\n}\n\n.szenen-form {\n    display: grid;\n    gap: var(--space-sm);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n}\n\n.szenen-field {\n    display: grid;\n    gap: var(--space-xs);\n}\n\n.szenen-field > span {\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-error {\n    padding: var(--space-sm) var(--space-md);\n    color: var(--color-danger);\n    background: var(--color-accent-red-dim);\n    border: 1px solid var(--color-accent-red);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-empty {\n    padding: var(--space-md);\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-diagnose {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-warning);\n    border-radius: var(--radius-sm);\n}\n\n/* Ein Widerspruch ist der schwerste der drei Befunde: dort steht eine\n * Entscheidung aus, die das System bewusst nicht getroffen hat (D-74). */\n.szenen-diagnose--konflikt {\n    border-left-color: var(--color-danger);\n}\n\n.szenen-diagnose > h4 {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.9375rem;\n}\n\n.szenen-diagnose ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-proposal {\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-proposal > h4 {\n    margin: 0 0 var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.9375rem;\n}\n\n.szenen-proposal__payload {\n    max-height: 18rem;\n    margin: 0 0 var(--space-sm);\n    padding: var(--space-sm);\n    overflow: auto;\n    /* Ein erzeugter Prompt ist ein einziger langer Satz \u2014 ohne Umbruch\n       verschwindet er nach rechts aus dem Bild. JSON-Payloads bringen ihre\n       eigenen Zeilenumbrueche mit und leiden nicht darunter. */\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-proposal__done {\n    margin: var(--space-sm) 0 0;\n    color: var(--color-success);\n}\n\n/* Die Belege eines Laufs: Rohantwort und Systemprompt. Zum Lesen und Kopieren,\n   nicht zum Bedienen \u2014 deshalb voll markierbar und in Monospace. */\n.szenen-beleg__text {\n    width: 100%;\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-family: var(--font-mono);\n    font-size: 0.8125rem;\n    line-height: 1.5;\n    white-space: pre;\n    background: var(--color-bg-app);\n    color: var(--color-text);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    resize: vertical;\n}\n\n/* Der Folgelauf (D-87): abgesetzt, damit er nicht wie Teil des Ergebnisses\n   aussieht \u2014 er ist eine Frage, keine Auskunft. */\n.szenen-folgelauf {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-folgelauf > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-run__herkunft {\n    margin: 0 0 var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-muted, inherit);\n}\n\n/* Widerspricht das Modell, ist das das Wichtigste auf der Seite. */\n.szenen-diagnose--antwort {\n    border-left: 3px solid var(--color-accent, var(--color-border));\n}\n\n/* Der Bildw\xE4hler (D-92) \u2014 Browser und Inspector, dem Labs-Tab nachgebildet,\n   aber mit dem CSS dieser Ansicht: eine gemeinsame Komponente \xFCber zwei\n   Dom\xE4nengrenzen w\xE4re eine Kopplung, die keiner gewollt hat.\n\n   Der Review vom 2026-08-22 (R12.1/R12.2) hat den Ma\xDFstab gesetzt: Der Bestand\n   ist ein **Browser**, kein Seiteninhalt. Vierzig Werke d\xFCrfen die Szenenseite\n   nicht meterlang machen, und zw\xF6lf Varianten eines Werkes keine zw\xF6lf\n   Bildschirmseiten. Deshalb steht hier alles unter zwei Regeln \u2014 begrenzte\n   Fl\xE4che mit eigenem Scroll, und Kacheln statt Karten. */\n\n/* \u2500\u2500 Ebene 1: der Browser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl {\n    /* Dieselbe Begr\xFCndung wie beim Inspector: Als Grid-Element w\xFCrde der\n       W\xE4hler sonst so breit wie sein breitester Inhalt. */\n    min-width: 0;\n}\n\n.szenen-bildwahl__browser {\n    /* Die eigene Scrollfl\xE4che ist der ganze Punkt: Der Bestand w\xE4chst nach\n       innen, nicht nach unten. Dieselbe Gr\xF6\xDFenordnung wie `max-h-[300px]` im\n       Labs-Browser. */\n    max-height: 19rem;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__raster {\n    display: grid;\n    /* Vier Spalten auf schmalen Displays \u2014 der gemeldete Screenshot zeigte eine\n       einzige Spalte gro\xDFer Karten. Breiter wird automatisch dichter. */\n    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__karte {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    text-align: left;\n    cursor: pointer;\n}\n\n/* Das fokussierte Werk ist klar markiert \u2014 sonst wei\xDF niemand, wessen Galerie\n   der Inspector unten zeigt. */\n.szenen-bildwahl__karte.is-fokus {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n/* \u2500\u2500 Die Kachel selbst \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Der Platz steht, bevor das Bild da ist \u2014 sonst springt das Raster, sobald\n   die erste Vorschau eintrifft. */\n.szenen-bildkachel {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1;\n    overflow: hidden;\n    background: var(--color-bg-app);\n}\n\n.szenen-bildkachel img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n}\n\n.szenen-bildkachel__leer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(135deg, var(--color-bg-app), var(--color-bg-surface));\n}\n\n/* R12.3: Eine fehlende Vorschau bleibt kachelgro\xDF. Vorher fiel die Karte auf\n   ihren Prompttext zur\xFCck \u2014 und ein Prompt hat im echten Bestand mehrere\n   hundert Zeichen. */\n.szenen-bildkachel__zeichen {\n    font-size: 0.875rem;\n    font-weight: 700;\n    color: var(--color-text-secondary);\n    opacity: 0.6;\n}\n\n/* Wie viele Varianten das Werk hat \u2014 klein und \xFCberlagernd, nie als\n   dominanter Text. */\n.szenen-bildwahl__anzahl {\n    position: absolute;\n    top: 0.15rem;\n    right: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    font-weight: 700;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* Eine Zeile, dann Schluss. Der Prompt eines Werkes ist oft mehrere hundert\n   Zeichen lang und w\xE4re als Prim\xE4rdarstellung genau die Textw\xFCste, gegen die\n   der Review antritt. */\n.szenen-bildwahl__kacheltitel {\n    display: block;\n    padding: 0.15rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.3;\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Ebene 2: der Inspector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__inspector {\n    /* Ohne `min-width: 0` gewinnt der Inhalt: Der W\xE4hler ist Element eines\n       Grids (`.szenen-form`), und dort ist `min-width: auto` die Vorgabe. Der\n       Streifen unten ist rund 1000 px breit \u2014 gemessen am 2026-08-22 im echten\n       Browser zog er die Auswahl von 374 px auf 1088 px auf und schob die\n       ganze Seite waagerecht heraus, statt selbst zu scrollen. */\n    min-width: 0;\n    margin-top: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    /* Sichtbar abgesetzt vom Browser: zwei Ebenen, nicht eine lange Liste. */\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__inspektorkopf {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-sm);\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bildwahl__werktitel {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: var(--color-text-primary);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.szenen-bildwahl__zurueck {\n    flex: 0 0 auto;\n    font-size: 0.6875rem;\n    padding: 0.15rem 0.5rem;\n}\n\n/* Der Streifen: waagerecht scrollend, feste kleine Kacheln \u2014 zw\xF6lf Varianten\n   bleiben ein \xDCberblick statt zw\xF6lf Bildschirmseiten. */\n.szenen-bildwahl__streifen {\n    /* Die Breite kommt vom Elter, nie vom Inhalt \u2014 sonst scrollt hier nichts. */\n    max-width: 100%;\n    display: flex;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0 0 0.25rem;\n    list-style: none;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n}\n\n.szenen-bildwahl__streifen > li {\n    flex: 0 0 auto;\n    width: 5rem;\n}\n\n.szenen-bildwahl__variante {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    background: var(--color-bg-app);\n    cursor: pointer;\n}\n\n.szenen-bildwahl__variante.is-gewaehlt {\n    border-color: var(--color-accent, var(--color-text-primary));\n    box-shadow: 0 0 0 2px var(--color-accent, var(--color-text-primary));\n}\n\n.szenen-bildwahl__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Das Gew\xE4hlte \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.szenen-bildwahl__gewaehlt {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildwahl__gewaehlt li {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    max-width: 100%;\n}\n\n/* Das gew\xE4hlte Bild wird best\xE4tigt, nicht nur benannt: eine kleine Vorschau\n   neben dem Titel. */\n.szenen-bildwahl__gewaehlt .szenen-bildkachel {\n    width: 2.25rem;\n    flex: 0 0 auto;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bildwahl__gewaehlt .szenen-bildwahl__kacheltitel {\n    min-width: 0;\n    max-width: 12rem;\n    font-size: 0.75rem;\n}\n\n.szenen-beleg__kopf {\n    display: flex;\n    align-items: center;\n    gap: var(--space-sm);\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details + details {\n    margin-top: var(--space-sm);\n}\n\n.szenen-diagnose > details > summary {\n    cursor: pointer;\n    font-weight: 600;\n}\n\n/* \u2500\u2500 Die Fehlerrettung (Stufe 6.6, A5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Sie steht im Fehlerblock und muss trotzdem als Werkzeug lesbar sein, nicht\n * als weitere Fehlermeldung. Deshalb abgesetzt wie der Folgelauf \u2014 und aus\n * demselben Grund: Beides sind Angebote, keine Ausk\xFCnfte.\n *\n * Der wichtigste optische Punkt ist die Trennung von Original und\n * Arbeitskopie. Das Original bekommt den ruhigen, \u201Efesten" Hintergrund der\n * Belege; die Kopie sieht aus wie ein normales Eingabefeld, weil sie eines\n * ist. */\n.szenen-rettung {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-rettung > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-rettung textarea[readonly] {\n    background: var(--color-bg-surface);\n    color: var(--color-text-secondary);\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung textarea:not([readonly]) {\n    font-family: var(--font-mono, monospace);\n    font-size: 0.8125rem;\n}\n\n.szenen-rettung__aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: var(--space-sm) 0;\n}\n\n/* Ein Befund tr\xE4gt Code, Bezug und Meldung. Der Code steht klein und\n * monospaced davor: Er ist die Kennung, nicht die Aussage. */\n.szenen-diagnose__liste {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n}\n\n.szenen-diagnose__liste code {\n    font-size: 0.8125rem;\n}\n\n.szenen-diagnose__liste > li[data-severity=\'warning\'] {\n    color: var(--color-text-secondary);\n}\n\n/* \u2500\u2500 Die Draft-Kette (Stufe 6.6, C4) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Hauptweg. Er steht nach den Einzel\xFCbernahmen und muss als das erkennbar\n * sein, was er ist: nicht eine weitere Option, sondern der k\xFCrzere Weg zum\n * selben Ziel. Deshalb durchgezogener Rahmen statt gestricheltem \u2014 er ist\n * Angebot **und** Empfehlung. */\n.szenen-kette {\n    margin-top: var(--space-md);\n    padding: var(--space-sm) var(--space-md) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-left: 3px solid var(--color-accent, var(--color-border));\n    border-radius: var(--radius-sm);\n}\n\n.szenen-kette > h4 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-kette ul {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0 0 var(--space-sm);\n    padding-left: var(--space-md);\n}\n\n.szenen-kette code {\n    font-size: 0.8125rem;\n}\n\n/* Ein Hinweis, der eine Bedingung erklaert \u2014 nicht rot, weil er kein Fehler\n   ist, aber abgesetzt, weil er eine Folge hat. */\n.szenen-detail__hint {\n    margin: var(--space-sm) 0 0;\n    padding: var(--space-sm);\n    font-size: 0.875rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-surface);\n    border-left: 3px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n/* \u2500\u2500 Stufe 6.7: Bilder am Prompt-Lauf (H0/H1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n *\n * Der Bereich tr\xE4gt zwei Dinge, die man nie verwechseln darf: den **Eingang**\n * (woraus der Prompt entstand) und den **Ausgang** (was daraus wurde). Sie\n * bekommen deshalb verschiedene Akzentkanten statt nur verschiedener\n * \xDCberschriften \u2014 wer schnell liest, sieht die Trennung, bevor er sie liest.\n */\n.szenen-bilder {\n    display: grid;\n    gap: var(--space-md);\n    margin-top: var(--space-sm);\n}\n\n.szenen-bilder__eingang,\n.szenen-bilder__ausgang {\n    display: grid;\n    gap: var(--space-sm);\n    padding: var(--space-sm) var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__eingang {\n    border-left: 3px solid var(--color-accent-purple, var(--color-border));\n}\n\n.szenen-bilder__ausgang {\n    border-left: 3px solid var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-bilder h5 {\n    margin: 0;\n}\n\n.szenen-bilder__ids {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n    margin: 0;\n    align-items: baseline;\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n}\n\n.szenen-bilder__eingangsliste,\n.szenen-bilder__batchliste,\n.szenen-bilder__auftraege {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bilder__eingangsliste > li,\n.szenen-bilder__batchliste > li,\n.szenen-bilder__auftraege > li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n/* Ein unterbrochener Auftrag ist der Fall, f\xFCr den der Auftragssatz existiert.\n   Er wird deshalb markiert \u2014 nicht rot, denn er ist kein Fehler, sondern eine\n   offene Entscheidung. */\n.szenen-bilder__auftraege > li[data-status="started"] {\n    border-left: 3px solid var(--color-warning);\n}\n\n.szenen-bilder__auftraege > li[data-status="succeeded"] {\n    border-left: 3px solid var(--color-success);\n}\n\n.szenen-bilder__auftraege > li[data-status="partial"] {\n    border-left: 3px solid var(--color-accent-blue, var(--color-border));\n}\n\n.szenen-bilder__auftraege > li[data-status="failed"] {\n    border-left: 3px solid var(--color-danger);\n}\n\n/* Das Eingangsbild benutzt seit C3 dieselbe Kachel wie W\xE4hler und Galerie.\n   Sie ist von Haus aus so breit wie ihr Platz \u2014 in dieser Zeile bekommt sie\n   deshalb eine feste Gr\xF6sse, sonst sch\xF6be sie die Metadaten heraus. */\n.szenen-bilder__eingangsliste .szenen-bildkachel {\n    flex: 0 0 auto;\n    width: 4rem;\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batch {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding: var(--space-sm);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__batchkopf {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--space-sm);\n}\n\n.szenen-bilder__herkunft {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n}\n\n/* Review-Befund \u2014 ein transienter Bildfehler ist wiederholbar, kein\n   endg\xFCltiges \u201Efehlt". Dezent wie ein Angebot, nicht wie ein Fehlerzustand. */\n.szenen-bilder__retry {\n    justify-self: start;\n    padding: 0.15rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n/* C4 \u2014 die Provenienz vollst\xE4ndig, aber sekund\xE4r. */\n.szenen-bilder__technik > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    font-size: 0.75rem;\n    color: var(--color-text-secondary);\n}\n\n/* C5 \u2014 der Verlauf verdichtet, seine Ausreisser nicht. */\n.szenen-bilder__verlauf > summary {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n    cursor: pointer;\n}\n\n.szenen-bilder__verlauf[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__auffaellig {\n    margin: 0;\n    padding: var(--space-sm);\n    border-radius: var(--radius-sm);\n    font-size: 0.8125rem;\n}\n\n.szenen-bilder__auftragskennung {\n    flex-basis: 100%;\n    color: var(--color-text-tertiary);\n    font-size: 0.6875rem;\n}\n\n/* \u2500\u2500 C1/C2 \u2014 Galerie und grosse Ansicht \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Das Raster w\xE4chst mit dem Platz: auf 390 px drei bis vier Kacheln je Reihe,\n   auf dem Desktop entsprechend mehr. Vorher war jedes Bild eine Zeile aus\n   Daumennagel plus vier Metadatenfeldern \u2014 vier Bilder ergaben vier Textzeilen\n   und das Protokoll war die Hauptsache. */\n.szenen-bildgalerie {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));\n    gap: var(--space-sm);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildgalerie__kachel {\n    position: relative;\n    display: block;\n    width: 100%;\n    padding: 0;\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildgalerie__kachel:hover,\n.szenen-bildgalerie__kachel:focus-visible {\n    border-color: var(--color-accent-teal, var(--color-text-primary));\n}\n\n.szenen-bildgalerie__nummer {\n    position: absolute;\n    bottom: 0.15rem;\n    left: 0.15rem;\n    padding: 0.05rem 0.3rem;\n    font-size: 0.625rem;\n    line-height: 1.4;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border-radius: var(--radius-sm);\n}\n\n/* Die grosse Ansicht liegt \xFCber allem und bringt ihren eigenen Grund mit \u2014\n   `position: fixed` bezieht sich im Flow-Canvas auf dessen Rahmen, in React auf\n   das Fenster; in beiden F\xE4llen genau das Gew\xFCnschte. */\n.szenen-bildviewer {\n    position: fixed;\n    inset: 0;\n    z-index: 1000;\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    gap: var(--space-sm);\n    padding: var(--space-sm);\n    /* Deckend, nicht get\xF6nt: Bei 0.92 schimmerte der Laufbereich durch und man\n       las Prompttext quer \xFCber dem Bild \u2014 im Browser gemessen. */\n    background: #000;\n}\n\n/* Titel, Z\xE4hlung, Schliessen \u2014 drei Spalten, damit ein langer Werktitel die\n   Z\xE4hlung nicht in die n\xE4chste Zeile und \xFCber das Bild schiebt. */\n.szenen-bildviewer__kopf {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    align-items: center;\n    gap: var(--space-sm);\n    color: var(--color-text-primary);\n}\n\n.szenen-bildviewer__titel {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-weight: 600;\n}\n\n.szenen-bildviewer__zaehler {\n    color: var(--color-text-secondary);\n    font-size: 0.8125rem;\n}\n\n.szenen-bildviewer__buehne {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-sm);\n    min-height: 0;\n    min-width: 0;\n}\n\n/* Der Rahmen nimmt den Platz, der zwischen den Bl\xE4tterkn\xF6pfen \xFCbrig ist \u2014\n   `min-width: 0`, damit er auch wirklich schrumpft statt sie hinauszuschieben. */\n.szenen-bildviewer__rahmen {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n}\n\n.szenen-bildviewer__bild {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n}\n\n.szenen-bildviewer__leer {\n    color: var(--color-text-secondary);\n    text-align: center;\n}\n\n/* Die Bl\xE4tterkn\xF6pfe sind daumengross und liegen an den R\xE4ndern \u2014 auf einem\n   Telefon ist der Rand erreichbar, die Bildmitte nicht. */\n.szenen-bildviewer__blaettern {\n    flex: 0 0 auto;\n    width: 2.75rem;\n    height: 3.5rem;\n    font-size: 1.75rem;\n    line-height: 1;\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    cursor: pointer;\n}\n\n.szenen-bildviewer__details {\n    max-height: 8rem;\n    overflow-y: auto;\n    color: var(--color-text-secondary);\n}\n\n/* Die Aktionen stehen abgesetzt: Sie sind Angebote, keine Ausk\xFCnfte \u2014 dasselbe\n   Muster wie beim Folgelauf und bei der Fehlerrettung. */\n/* D \u2014 die Aktionen stehen abgesetzt und standardm\xE4ssig kompakt: Sie sind\n   Angebote, keine Ausk\xFCnfte. Vorher hielten beide Formulare dauerhaft offen und\n   machten aus jedem Lauf zwei zus\xE4tzliche Bildschirmseiten. */\n.szenen-bilder__aktion {\n    min-width: 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-bilder__aktion > summary {\n    color: var(--color-text-primary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-bilder__aktion[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n.szenen-bilder__aktion h5 {\n    margin: var(--space-sm) 0 0;\n}\n\n.szenen-bilder__aktion ol {\n    display: grid;\n    gap: var(--space-sm);\n    margin: 0;\n    padding-left: var(--space-md);\n    font-size: 0.8125rem;\n}\n\n/* Regelwerk-UX Schritt 16 \u2014 der ZIP-Sammelimport.\n *\n * \xA78: Der gemeldete Einsatz ist mobil. Deshalb **ein** Seedfeld statt einer\n * gestapelten Eingabe je Bild, und die Zuordnung Bild -> Seed als umbrechende\n * Zeile statt als Tabelle: Eine Tabelle waere auf 390 px abgeschnitten, und\n * abgeschnitten heisst hier, dass der Nutzer die Zuordnung nicht mehr pruefen\n * kann \u2014 genau die Pruefung, wegen der die Vorschau existiert. */\n.szenen-bilder__zip {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-bilder__zipkopf {\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipvorlagen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n    margin: 0;\n}\n\n/* Eine laengere Liste bleibt scrollbar, statt die Sektion und damit den\n * Import-Knopf aus dem Blick zu schieben (\xA78, letzter Punkt). */\n.szenen-bilder__zipliste {\n    max-height: 16rem;\n    overflow-y: auto;\n}\n\n.szenen-bilder__zipliste > li {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-bilder__zipliste > li > span:first-child {\n    overflow-wrap: anywhere;\n}\n\n.szenen-bilder__zipliste > li > span:last-child {\n    color: var(--color-text-secondary);\n    white-space: nowrap;\n}\n\n/* ==========================================================================\n   STUFE 6.10 \u2014 ELEMENTEDITOR UND VERSIONSNAVIGATION\n   ========================================================================== */\n\n/* \xA74.2 \u2014 vier Sachverhalte, vier Marken. Die Marken stehen in einer eigenen\n * Spalte, damit ANGEZEIGT + BEVORZUGT nebeneinander lesbar bleiben, statt sich\n * durch den Text zu schieben. */\n.szenen-detail__heads li {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n}\n\n.szenen-version__titel {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-right: auto;\n}\n\n/* V17 \u2014 Kennungen bleiben vollst\xE4ndig sichtbar, aber optisch sekund\xE4r. */\n.szenen-version__id,\n.szenen-ref__id,\n.szenen-detail__field-key {\n    color: var(--color-text-tertiary);\n    font-size: 0.78rem;\n    overflow-wrap: anywhere;\n}\n\n.szenen-version__marken {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n.szenen-version__marken > span {\n    padding: 0.1rem 0.5rem;\n    color: var(--color-text-primary);\n    background: rgba(45, 212, 191, 0.12);\n    border: 1px solid rgba(45, 212, 191, 0.35);\n    border-radius: var(--radius-full);\n    font-size: 0.7rem;\n    font-weight: 800;\n    letter-spacing: 0.08em;\n}\n\n.szenen-version--angezeigt {\n    border-color: var(--color-accent-teal, #2dd4bf) !important;\n}\n\n/* V9 \u2014 der Basiswechsel ist eine Entscheidung, keine Nebenwirkung. */\n.szenen-detail__confirm {\n    display: grid;\n    gap: var(--space-sm);\n    margin: var(--space-md) 0;\n    padding: var(--space-md);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-accent-amber, #f59e0b);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__confirm p {\n    margin: 0;\n}\n\n/* Untergruppen von Objektfeldern (`prompt_render_settings`, `overrides`,\n   `blender_render_settings`) \u2014 seit A1/A2 auf- und zuklappbar. Eine optionale\n   Gruppe startet zu: Blender und `overrides` f\xFCllten auf einem 390-px-Display\n   sonst mehrere Bildschirmseiten, obwohl die meisten Shots sie nie anfassen. */\n.szenen-detail__group {\n    min-width: 0;\n    margin: var(--space-md) 0;\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group > summary {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.szenen-detail__group[open] > summary {\n    margin-bottom: var(--space-sm);\n}\n\n/* A2 \u2014 dass eine zugeklappte Gruppe schon Werte tr\xE4gt, muss man sehen, ohne\n   sie zu \xF6ffnen. Sonst \xFCbersieht man eine gesetzte Blender-Ausgabe genau so\n   lange, bis sie im Ergebnis auftaucht. */\n.szenen-detail__group-status {\n    padding: 0.05rem 0.4rem;\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n    color: var(--color-text-tertiary);\n    background: var(--color-bg-app);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-detail__group[data-konfiguriert="ja"] > summary .szenen-detail__group-status {\n    color: var(--color-text-primary);\n    border-color: var(--color-accent-teal, var(--color-border));\n}\n\n.szenen-detail__group-inhalt {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n    padding-bottom: var(--space-sm);\n}\n\n/* A3 \u2014 die Kernaussage steht am Feld, die Begr\xFCndung dahinter. Nicht als\n   Tooltip: Auf einem Telefon gibt es kein Hover, und was dort unerreichbar ist,\n   ist gestrichen \u2014 nur ohne dass es jemand entschieden h\xE4tte. */\n.szenen-detail__warum > summary {\n    color: var(--color-text-tertiary);\n    font-size: 0.75rem;\n    cursor: pointer;\n}\n\n.szenen-detail__warum > small {\n    display: block;\n    padding-top: var(--space-xs);\n    color: var(--color-text-tertiary);\n}\n\n.szenen-detail__fieldrow {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n    margin-bottom: var(--space-md);\n}\n\n/* A4 \u2014 der technische Feldname bleibt lesbar, tritt aber hinter das fachliche\n   Label zur\xFCck. */\n.szenen-detail__field-label {\n    color: var(--color-text-primary);\n}\n\n.szenen-detail__field {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n.szenen-detail__field > span {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    gap: var(--space-xs);\n}\n\n/* Mehrfachauswahl und Listeneditoren. */\n.szenen-feld__mehrfach,\n.szenen-feld__liste,\n.szenen-feld__reflist,\n.szenen-feld__ref,\n.szenen-feld__zielmodell,\n.szenen-bilder__modellwahl,\n.szenen-feld__kamera {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n}\n\n/* \u201ENeues Modell hinzufuegen" im Importdialog \u2014 dieselben Abstaende wie jedes\n   andere Formular dieser Ansicht, damit es kein Fremdkoerper wird. */\n.szenen-feld__zielmodell-neu {\n    display: grid;\n    gap: var(--space-xs);\n    min-width: 0;\n    padding: var(--space-sm);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-feld__zielmodell-neu-aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\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\n/* Bereich `Prompts` \u2014 die herkunftsuebergreifende Sicht (P1-A).\n *\n * Die Eintraege selbst rendert `RundenEintrag` und tragen damit die\n * `szenen-runs__*`-Regeln. Hier stehen nur Rahmen und Kennzeichen; eine zweite\n * Laufdarstellung gibt es nicht, also braucht sie auch kein zweites Aussehen. */\n.szenen-prompts__toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n}\n\n.szenen-prompts__heading {\n    margin: 0;\n    font-size: 1.05rem;\n    margin-right: auto;\n}\n\n.szenen-view__fokus {\n    display: flex;\n    align-items: center;\n    gap: var(--space-sm);\n    margin-bottom: var(--space-sm);\n}\n\n.szenen-prompts__fokus {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-sm);\n    margin-bottom: var(--space-sm);\n    padding: var(--space-xs) var(--space-sm);\n    border: 1px solid var(--color-accent, #0d9488);\n    border-radius: var(--radius-sm, 4px);\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-prompts__filter {\n    display: flex;\n    align-items: center;\n    gap: var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-prompts__eintrag {\n    list-style: none;\n    margin-bottom: var(--space-md);\n}\n\n.szenen-prompts__lauf {\n    padding-left: 0;\n}\n\n.szenen-prompts__herkunft {\n    margin: 0 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.78rem;\n}\n\n.szenen-prompts__hinweis {\n    font-style: italic;\n}\n\n.szenen-prompts__ausgeblendet {\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n/* ==========================================================================\n   ZIP-MODELLVORSCHLAG (modaler Best\xE4tigungsdialog)\n   ========================================================================== */\n\n/* Wie die grosse Bildansicht: eigener Grund, `position: fixed`, damit der\n   Dialog im Flow-Canvas und in React gleichermassen \xFCber allem liegt. */\n.szenen-zipmodell {\n    position: fixed;\n    inset: 0;\n    z-index: 1100;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--space-md);\n    background: rgba(0, 0, 0, 0.72);\n}\n\n.szenen-zipmodell__karte {\n    display: grid;\n    gap: var(--space-sm);\n    width: min(34rem, 100%);\n    max-height: 100%;\n    overflow-y: auto;\n    padding: var(--space-md);\n    color: var(--color-text-primary);\n    background: var(--color-bg-elevated);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n}\n\n.szenen-zipmodell__titel {\n    margin: 0;\n    font-size: 1rem;\n}\n\n.szenen-zipmodell__quelle,\n.szenen-zipmodell__treffer,\n.szenen-zipmodell__vertrauen,\n.szenen-zipmodell__fallback {\n    margin: 0;\n    font-size: 0.85rem;\n}\n\n.szenen-zipmodell__quelle,\n.szenen-zipmodell__vertrauen {\n    color: var(--color-text-secondary);\n}\n\n/* Ein schwacher oder mehrdeutiger Treffer muss sich vom sicheren unterscheiden,\n   sonst ist die Warnung nur ein weiterer Satz. */\n.szenen-zipmodell__warnung {\n    margin: 0;\n    padding: var(--space-xs) var(--space-sm);\n    color: var(--color-text-primary);\n    background: rgba(234, 179, 8, 0.14);\n    border-left: 3px solid #eab308;\n    border-radius: var(--radius-sm);\n    font-size: 0.85rem;\n}\n\n.szenen-zipmodell__alternativen {\n    display: grid;\n    gap: 0.2rem;\n    margin: 0;\n    padding: var(--space-xs) var(--space-sm);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    font-size: 0.85rem;\n}\n\n.szenen-zipmodell__alternativen > label {\n    display: flex;\n    align-items: center;\n    gap: 0.4rem;\n}\n\n.szenen-zipmodell__aktionen {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-xs);\n}\n\n/* ==========================================================================\n   MEHR LADEN \u2014 der gemeinsame Fuss jeder seitenweise geladenen Liste\n   ========================================================================== */\n\n.szenen-mehr-laden {\n    display: grid;\n    gap: var(--space-xs);\n    justify-items: start;\n    padding: var(--space-xs) 0;\n}\n\n.szenen-mehr-laden__button {\n    padding: var(--space-xs) var(--space-sm);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    background: var(--color-bg-surface);\n    color: var(--color-text-primary);\n    font-size: 0.85rem;\n    cursor: pointer;\n}\n\n.szenen-mehr-laden__button:disabled {\n    cursor: progress;\n    opacity: 0.6;\n}\n\n.szenen-mehr-laden__fehler {\n    margin: 0;\n    color: var(--color-danger, #f87171);\n    font-size: 0.8rem;\n}\n\n/* ==========================================================================\n   PROMPTKARTE \u2014 Tags, Vorschau und Bildzahl\n   (Kette `szenen-prompt-anzeige-bilder-tags`)\n\n   Der Zuschnitt ist der der Library-Karte (`.library-item` + der absolut\n   gesetzte Bildstreifen in `LibraryTab`): Textteil links, Deckbild rechts am\n   Rand ueber die ganze Kartenhoehe, Bildzahl als Plakette darauf. Dieselben\n   Werte (7rem Streifenbreite, linke Trennlinie, Plakette unten rechts), nur\n   hier statt in Tailwind-Klassen \u2014 die Szenen-Ansicht teilt dieses Stylesheet\n   byteweise mit Flow, und Flow hat kein Tailwind.\n   ========================================================================== */\n\n.szenen-promptkarte {\n    position: relative;\n    overflow: hidden;\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n    padding: var(--space-sm);\n}\n\n/* Nur wo ein Bild liegt, wird Platz dafuer freigehalten. Ohne Bild nutzt der\n   Textteil die ganze Breite \u2014 keine leere Spalte. */\n.szenen-promptkarte--mitbild .szenen-promptkarte__inhalt {\n    padding-right: calc(7rem + var(--space-sm));\n}\n\n.szenen-promptkarte__bild {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 7rem;\n    height: 100%;\n    /* Hoechstens so hoch wie breit \u2014 der Streifen bleibt eine Kachel.\n       `height: 100%` allein band ihn an die **Kartenhoehe**, und die ist in der\n       aufgeklappten Runde die Hoehe des ganzen Prompts: Das Deckbild sprang\n       dann als mehrere hundert Pixel hoher, auf Streifenbreite beschnittener\n       Balken an den rechten Rand. Geschlossen aendert die Grenze nichts \u2014 dort\n       ist die Karte niedriger als 7rem. */\n    max-height: 7rem;\n    border-left: 1px solid var(--color-border);\n    background: #000;\n}\n\n/* Die gemeinsame Kachel bringt `width: 100%` und `aspect-ratio: 1` mit \u2014 hier\n   fuellt sie stattdessen den Streifen, genau wie das Library-Deckbild. */\n.szenen-promptkarte__bild .szenen-bildkachel {\n    width: 100%;\n    height: 100%;\n    aspect-ratio: auto;\n}\n\n.szenen-promptkarte__bildzahl {\n    position: absolute;\n    right: 0.25rem;\n    bottom: 0.25rem;\n    padding: 0.1rem 0.35rem;\n    border-radius: var(--radius-sm);\n    background: rgba(0, 0, 0, 0.6);\n    color: #fff;\n    font-size: 0.62rem;\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n/* Ein Kasten je Karte, nicht zwei.\n *\n * `.szenen-view button` (master.css) gibt **jedem** Knopf der Ansicht Rahmen\n * und Hintergrund und schlaegt dabei `.szenen-runs__kopf` (eine Klasse gegen\n * Klasse plus Element). In der Laufhistorie ist das richtig: Dort ist der Kopf\n * der Eintrag. In der Promptkarte ist die Karte der Eintrag \u2014 ein zweiter\n * Kasten darin waere die doppelte Umrandung, die die Library nicht hat.\n * Der Hover braucht eine eigene Zeile, weil die Regel dort spezifischer ist. */\n.szenen-promptkarte .szenen-runs__kopf,\n.szenen-promptkarte .szenen-runs__kopf:hover:not(:disabled) {\n    min-height: 0;\n    padding: var(--space-xs) 0;\n    background: transparent;\n    border: none;\n}\n\n/* Dieselbe Karte in der Elementliste.\n *\n * Dort ist der Auswahlknopf die Karte \u2014 er traegt Rahmen, Hintergrund und die\n * Auswahlmarkierung. Der Bildstreifen liegt deshalb **darueber** statt darin:\n * Ein `<button>` nimmt nur Phrasing Content auf, ein Streifen-`div` darin\n * waere ungueltiges Markup. Damit der rechte Kartenrand trotzdem auswaehlbar\n * bleibt, laesst der Streifen Klicks durch. */\n.szenen-elementkarte {\n    position: relative;\n}\n\n.szenen-elementkarte--mitbild > button {\n    padding-right: calc(7rem + var(--space-sm));\n}\n\n.szenen-elementkarte > .szenen-promptkarte__bild {\n    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;\n}\n\n.szenen-promptkarte__bild--durchklickbar {\n    pointer-events: none;\n}\n\n/* Null Bilder: die Zahl, keine Flaeche. */\n.szenen-promptkarte__ohnebild {\n    margin: 0 0 var(--space-xs);\n    color: var(--color-text-secondary);\n    font-size: 0.72rem;\n}\n\n/* Die Tagliste bricht um. Auf einem Telefon ist das der Unterschied zwischen\n   einer kompakten Karte und einer Zeile, die seitlich herauslaeuft. */\n.szenen-tagliste {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n    align-items: center;\n    margin: 0 0 var(--space-xs);\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0.05rem 0.4rem;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    background: var(--color-bg-app);\n    font-size: 0.72rem;\n    line-height: 1.5;\n    white-space: nowrap;\n}\n\n/* Herkunft sichtbar, aber ohne zweite Bedeutungsebene: Ein Prompt-Tag steht\n   voll, ein reiner Library-Tag zurueckgenommen. Die Karte soll schnell lesbar\n   sein, nicht zwei Farbcodes lehren. */\n.szenen-tag[data-herkunft="library"] {\n    border-style: dashed;\n    opacity: 0.85;\n}\n\n.szenen-tag--rest {\n    border-style: none;\n    opacity: 0.7;\n}\n\n.szenen-tag__weg {\n    border: none;\n    background: none;\n    padding: 0;\n    color: var(--color-text-secondary, inherit);\n    font-size: 0.85rem;\n    line-height: 1;\n    cursor: pointer;\n}\n\n.szenen-tag__weg:disabled {\n    cursor: progress;\n    opacity: 0.5;\n}\n\n.szenen-taggeber {\n    display: grid;\n    gap: var(--space-xs);\n    padding: var(--space-xs);\n    margin-bottom: var(--space-xs);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n}\n\n.szenen-taggeber__zeile {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs);\n    margin: 0;\n}\n\n.szenen-taggeber__label {\n    font-size: 0.72rem;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    opacity: 0.75;\n}\n\n.szenen-taggeber__leer,\n.szenen-taggeber__hinweis {\n    font-size: 0.72rem;\n    opacity: 0.75;\n}\n\n.szenen-taggeber input[type="text"] {\n    flex: 1 1 8rem;\n    min-width: 0;\n    padding: var(--space-xs);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-sm);\n    background: var(--color-bg-surface);\n    color: var(--color-text-primary);\n    font-size: 0.8rem;\n}\n\n/* ==========================================================================\n   BILDAUFTR\xC4GE \u2014 die bestandsweite Arbeitsqueue\n   Kette `szenen-bildauftraege-arbeitsqueue`, Schritt 01.\n   ========================================================================== */\n\n.szenen-bildauftraege {\n    display: grid;\n    gap: var(--space-sm);\n    min-width: 0;\n}\n\n.szenen-bildauftraege__steuerung,\n.szenen-bildauftraege__filter,\n.szenen-bildauftraege__aktionen,\n.szenen-bildauftraege__nachladen,\n.szenen-bildauftraege__blaettern {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--space-xs);\n}\n\n/* Der manuelle Refresh \u2014 Schritt 03 \xA72. Er steht oben und sichtbar, weil er\n   die einzige Stelle ist, an der dieser Bereich nachlaedt: Es gibt keinen\n   Timer mehr, den er ersetzen koennte. */\n.szenen-bildauftraege__nachladen {\n    justify-content: flex-start;\n}\n\n.szenen-bildauftraege__nachladen span {\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n/* Die Blaetterleiste der Bildkontrolle \u2014 Schritt 03 \xA73.1. */\n.szenen-bildauftraege__blaettern {\n    margin: 0;\n}\n\n/* \u201EWeitere Bilder" \u2014 Schritt 03 \xA74. Eingerueckt, weil es zu genau einer\n   Auftragszeile gehoert und kein eigener Bereich ist. */\n.szenen-bildauftraege__weitere {\n    display: grid;\n    gap: var(--space-xs);\n    margin-top: var(--space-xs);\n    padding: var(--space-xs) var(--space-sm);\n    border: 1px dashed var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-bildauftraege__weitere p {\n    margin: 0;\n}\n\n/* Die Vorschau steht oben und beh\xE4lt ihren Platz, auch solange noch kein Bild\n   vorliegt \u2014 sie ist die Kontrollfl\xE4che des zweiten Browserfensters (\xA75). */\n.szenen-bildauftraege__letztes {\n    display: grid;\n    gap: var(--space-xs);\n    padding: var(--space-sm);\n    background: var(--color-bg-surface);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n}\n\n.szenen-bildauftraege__letztes h3 {\n    margin: 0;\n    font-size: 0.95rem;\n}\n\n.szenen-bildauftraege__letztes .szenen-bildkachel {\n    width: min(100%, 22rem);\n    height: auto;\n}\n\n.szenen-bildauftraege__lauf {\n    padding: var(--space-xs) var(--space-sm);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-md);\n}\n\n.szenen-bildauftraege__lauf p {\n    margin: 0.1rem 0;\n}\n\n.szenen-bildauftraege__liste {\n    display: grid;\n    gap: var(--space-xs);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.szenen-bildauftraege__zeile {\n    display: grid;\n    gap: 0.25rem;\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-bildauftraege__kopf,\n.szenen-bildauftraege__prompt {\n    margin: 0;\n}\n\n.szenen-bildauftraege__meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.15rem var(--space-sm);\n    margin: 0;\n    color: var(--color-text-secondary);\n    font-size: 0.8rem;\n}\n\n.szenen-bildauftraege__prompt {\n    color: var(--color-text-secondary);\n    font-size: 0.85rem;\n}\n';
 
 // src/lib/utils.ts
 var getFormattedTimestamp = () => {
@@ -1251,7 +1251,7 @@ var LibraryView = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-h-0 overflow-y-auto", "data-library-scroll": true, children: [
       items.length === 0 && phase.status === "ready" ? /* @__PURE__ */ jsx9("div", { className: "py-10 text-center text-xs text-neutral-600", children: emptyText }) : layout === "grid" ? /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-2 gap-3 pb-6", children: items.map((entry) => /* @__PURE__ */ jsxs7(
         "div",
         {
@@ -7684,6 +7684,135 @@ async function runLibraryLegacyImport(options) {
   });
 }
 
+// src/lib/szenen/itemZugehoerigkeit.ts
+function hatNavigationsziele(zugehoerigkeit) {
+  return !!zugehoerigkeit && (zugehoerigkeit.run !== null || zugehoerigkeit.scene !== null);
+}
+var kennung = (wert) => typeof wert === "string" && wert.trim().length > 0;
+var kurz = (id) => id.slice(0, 8);
+function zugehoerigkeitOf(item) {
+  const runId = item?.szenen?.prompt_run_id;
+  if (!kennung(runId)) return null;
+  const links = item?.szenen_links ?? null;
+  if (!links || links.prompt_run_id !== runId) {
+    return {
+      run: null,
+      scene: null,
+      hinweis: `Prompt-Lauf ${kurz(runId)} ist nicht mehr aufl\xF6sbar.`
+    };
+  }
+  const run = {
+    kind: "run",
+    id: runId,
+    label: `Lauf ${kurz(runId)}`,
+    vermerk: links.run_status === "failed" ? "Fehllauf" : null
+  };
+  const sceneId = links.scene_element_id;
+  if (!kennung(sceneId)) {
+    return {
+      run,
+      scene: null,
+      hinweis: "Die Szene dieses Laufs ist nicht mehr aufl\xF6sbar."
+    };
+  }
+  const scene = {
+    kind: "scene",
+    id: sceneId,
+    label: kennung(links.scene_title) ? links.scene_title : `Szene ${kurz(sceneId)}`,
+    vermerk: links.scene_retired ? "stillgelegt" : null
+  };
+  return { run, scene, hinweis: null };
+}
+
+// src/features/library/ZugehoerigkeitLinks.tsx
+import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
+var CHIP_BASIS = "text-[9px] px-1.5 py-0.5 rounded-full font-bold border transition";
+var CHIP_LAUF = "bg-teal-900/60 text-teal-200 border-teal-800 hover:bg-teal-800 hover:text-white";
+var CHIP_SZENE = "bg-indigo-900/60 text-indigo-200 border-indigo-800 hover:bg-indigo-800 hover:text-white";
+var AKTION_BASIS = "text-[10px] px-2 py-1 rounded font-bold border transition text-left";
+var AKTION_LAUF = "bg-teal-950 text-teal-200 border-teal-900 hover:bg-teal-900 hover:text-white";
+var AKTION_SZENE = "bg-indigo-950 text-indigo-200 border-indigo-900 hover:bg-indigo-900 hover:text-white";
+var ZugehoerigkeitLinks = ({
+  zugehoerigkeit,
+  variante,
+  onOeffnen
+}) => {
+  if (!zugehoerigkeit) return null;
+  const { run, scene, hinweis } = zugehoerigkeit;
+  if (!run && !scene && !hinweis) return null;
+  const klick = (ziel) => (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onOeffnen(ziel, zugehoerigkeit);
+  };
+  const beschriftung = (ziel, aktion) => {
+    const text = variante === "modal" ? `${aktion}: ${ziel.label}` : ziel.label;
+    return ziel.vermerk ? `${text} (${ziel.vermerk})` : text;
+  };
+  if (variante === "liste") {
+    if (!hatNavigationsziele(zugehoerigkeit)) return null;
+    return /* @__PURE__ */ jsxs28(Fragment11, { children: [
+      run && /* @__PURE__ */ jsx31(
+        "button",
+        {
+          type: "button",
+          "data-testid": "zugehoerigkeit-chip-run",
+          title: `Promptlauf \xF6ffnen \u2014 ${run.id}`,
+          className: `${CHIP_BASIS} ${CHIP_LAUF}`,
+          onClick: klick(run),
+          children: beschriftung(run, "Promptlauf")
+        }
+      ),
+      scene && /* @__PURE__ */ jsx31(
+        "button",
+        {
+          type: "button",
+          "data-testid": "zugehoerigkeit-chip-scene",
+          title: `Szene \xF6ffnen \u2014 ${scene.id}`,
+          className: `${CHIP_BASIS} ${CHIP_SZENE}`,
+          onClick: klick(scene),
+          children: beschriftung(scene, "Szene")
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs28(
+    "div",
+    {
+      className: "bg-black border border-neutral-800 p-2 rounded flex flex-col gap-1",
+      "data-testid": "zugehoerigkeit-bereich",
+      children: [
+        /* @__PURE__ */ jsx31("span", { className: "text-[10px] uppercase font-bold text-neutral-500", children: "Zugeh\xF6rigkeit" }),
+        /* @__PURE__ */ jsxs28("div", { className: "flex flex-wrap gap-2", children: [
+          run && /* @__PURE__ */ jsx31(
+            "button",
+            {
+              type: "button",
+              "data-testid": "zugehoerigkeit-aktion-run",
+              title: run.id,
+              className: `${AKTION_BASIS} ${AKTION_LAUF}`,
+              onClick: klick(run),
+              children: beschriftung(run, "Promptlauf \xF6ffnen")
+            }
+          ),
+          scene && /* @__PURE__ */ jsx31(
+            "button",
+            {
+              type: "button",
+              "data-testid": "zugehoerigkeit-aktion-scene",
+              title: scene.id,
+              className: `${AKTION_BASIS} ${AKTION_SZENE}`,
+              onClick: klick(scene),
+              children: beschriftung(scene, "Szene \xF6ffnen")
+            }
+          )
+        ] }),
+        hinweis && /* @__PURE__ */ jsx31("span", { className: "text-[10px] text-neutral-500", "data-testid": "zugehoerigkeit-hinweis", children: hinweis })
+      ]
+    }
+  );
+};
+
 // src/features/tags/tagSlice.ts
 var TAGS_SLICE_SCHEMA_VERSION = 1;
 function createTagsDefault() {
@@ -7792,6 +7921,7 @@ export {
   TagBaseSection,
   TagManager,
   TagManagerPanel,
+  ZugehoerigkeitLinks,
   autoLabel,
   buildBlendInstruction,
   buildCompareInstruction,
@@ -7821,6 +7951,7 @@ export {
   getHFToken,
   getSessionClientId,
   groupGenerationsToLabItems,
+  hatNavigationsziele,
   hfBatchArchive,
   hfBootstrapFromLegacy,
   hfListDir,
@@ -7854,5 +7985,6 @@ export {
   useTagBase,
   validateTagBaseSelection,
   writeHFEvent,
-  writeTagEvent
+  writeTagEvent,
+  zugehoerigkeitOf
 };