/*
  Blech-Assistent als Vollbild-Werkbank (Paket 1, 22.09.2026).

  WARUM ES DIESE DATEI GIBT
  -------------------------
  Christian nach dem Deploy der Zeichenbuehne (22.09.2026, Screenshots
  Zeichnen/Bemassen/Loecher): *"Fenster im Fenster im Fenster und das wird
  immer kleiner ... Kann das nicht eine Art Vollbild sein und die Werkzeuge
  sind eher Floating da drin. Mich nervt auch wenn ich da dauernd scrollen
  muss."* Der Entwurf aus Claude Design (uebergabe-werkbank-2026-09-22,
  HANDOFF a.1-a.3, a.10) macht daraus eine Werkbank: Die Zeichnung ist die
  Seite, alles andere schwebt als Feld darueber.

  WIE ES GEBAUT IST
  -----------------
  * Der DOM-Baum des Dialogs bleibt derselbe (IDs, Schritte, Fuss sind
    Vertraege, siehe test_frontend_contract.py). Nur die Huelle aendert
    sich: `#ai-dialog` traegt zusaetzlich die Klasse `ai-werkbank` und
    wird `position: fixed; inset: 0`. Kopf und Fuss werden Schwebefelder,
    der Inhalt fuellt den Bildschirm dazwischen und scrollt intern, wenn
    ein Schritt mehr braucht als der Bildschirm hat (Katalog, Preis).
  * Diese Datei wird NACH ai-design.css, nocad-dialog.css und
    ai-hole-editor.css geladen und gewinnt ueber die Klasse `ai-werkbank`
    (hoehere Spezifitaet), ohne die alten Regeln umzuschreiben. Wer die
    Werkbank abschalten muss, nimmt die Klasse aus index.html - der Dialog
    faellt dann auf die bisherige Fensterform zurueck.
  * Im Zeichenmodus (`.ai-dialog-kette`, aiDesign.js setzt ihn, solange das
    Ketten-Widget die Frage ist) fuellt die Zeichenflaeche des Zeichners
    bzw. der Bemassung den ganzen Bildschirm; Vorlagen, Werkzeugleiste,
    Hinweis und Frage schweben darueber.
  * Tokens: Alles Neue traegt `--ai-`. Markenfarben kommen weiterhin aus
    main.css (--dark-bg, --glass-*, --text-*, --cta-gradient ...); hier
    stehen nur ROLLEN, keine neuen Markenfarben (tokens.css des Entwurfs).
*/

:root {
    /* Rollen */
    --ai-rolle-auswahl: #9e27fb;
    --ai-rolle-auswahl-weich: rgba(158, 39, 251, 0.16);
    --ai-rolle-hinweis: #f6e760;
    --ai-rolle-fehler: #f5576c;
    --ai-rolle-bestaetigung: #28a745;
    /* Zeichenflaeche (hell) */
    --ai-buehne-bg: #f7f9fc;
    --ai-buehne-raster: rgba(28, 33, 38, 0.10);
    --ai-blech: #1c2126;
    --ai-linie: #1c2126;
    --ai-linie-hilfe: rgba(28, 33, 38, 0.45);
    --ai-text-auf-hell: #1c2126;
    --ai-text-auf-hell-sekundaer: #5b6470;
    /* Schwebefelder: dunkles Glas ueber der Buehne */
    --ai-feld-bg: rgba(20, 23, 27, 0.86);
    --ai-feld-bg-stark: rgba(20, 23, 27, 0.96);
    --ai-feld-rand: rgba(255, 255, 255, 0.12);
    --ai-feld-blur: 18px;
    --ai-feld-schatten: 0 10px 30px -12px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --ai-feld-radius: 16px;
    --ai-knopf-radius: 12px;
    --ai-chip-radius: 999px;
    /* Abstaende */
    --ai-rand-buehne: 16px;
    --ai-touch: 44px;
    --ai-panel-breite: 340px;
    /* 44 statt 48 (Blechmodul-Werkbank, Entscheidung 25.09.2026): gilt fuer
       alle Schritte der Werkbank, sonst bleibt bei 1280 x 720 keine 60-%-Buehne. */
    --ai-kopf-hoehe: 44px;
    /* Bewegung */
    --ai-dauer: 160ms;
}

@media (prefers-reduced-motion: reduce) {
    :root { --ai-dauer: 0ms; }
}

/* --- Die Huelle: Overlay und Dialog fuellen das Fenster ------------------ */
/* Die Seite dahinter ist laenger als das Fenster; ihr Rollbalken stand
   sonst als violetter Streifen am rechten Rand der Werkbank (Livefund
   22.09.2026). `body` hatte overflow: hidden, `html` nicht. */
html:has(body.ai-dialog-offen) {
    overflow: hidden;
}

body.ai-dialog-offen .ai-dialog-overlay {
    padding: 0;
    background: var(--dark-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
    align-items: stretch;
    justify-content: stretch;
}

.ai-dialog.ai-werkbank {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    display: block;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background: var(--dark-bg);
    background-image: radial-gradient(circle at 20% 80%, rgba(158, 39, 251, 0.10), transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(206, 144, 166, 0.08), transparent 50%);
}

/* Ein Schwebefeld: dunkles Glas, weicher Schatten, abgerundet. */
.ai-werkbank .ai-kopf-links,
.ai-werkbank .ai-kopf-rechts,
.ai-werkbank > .ai-dialog-fuss,
.ai-werkbank > .ai-dialog-status:not(:empty),
.ai-werkbank > .ai-dialog-fehler:not([hidden]),
.ai-werkbank .ai-dialog-bestaetigung:not([hidden]) {
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    color: var(--text-primary);
}

/* --- Kopf: links Marke + Phasen, rechts "i" und Schliessen -------------- */
.ai-werkbank > .ai-dialog-kopf {
    position: absolute;
    top: var(--ai-rand-buehne);
    left: var(--ai-rand-buehne);
    right: var(--ai-rand-buehne);
    /* Ueber allen Buehnen und Feldern: Der Loch-Editor liegt in einem
       eigenen Stapelkontext (sein Feld hat z-index 5), seine Buehne darf
       Kopf und Fuss trotzdem nie verdecken. */
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    border: 0;
    /* Die Luecke zwischen den beiden Feldern gehoert der Buehne. */
    pointer-events: none;
}

.ai-werkbank .ai-kopf-links,
.ai-werkbank .ai-kopf-rechts {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--ai-kopf-hoehe);
    padding: 4px 10px 4px 12px;
}

.ai-werkbank .ai-kopf-rechts {
    gap: 4px;
    padding: 4px;
}

.ai-werkbank .ai-dialog-schritte.nocad-progress {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
}

/* Das "i"-Feld klappt unter dem rechten Kopf-Feld auf. */
.ai-werkbank .ai-dialog-info .ai-gut-zu-wissen {
    top: calc(100% + 12px);
    background: var(--ai-feld-bg-stark);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    z-index: 30;
}

/* --- Inhalt: die Seite zwischen Kopf und Fuss --------------------------- */
.ai-werkbank > .ai-dialog-inhalt {
    position: absolute;
    inset: 0;
    display: block;
    padding: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 20px) 24px 108px;
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0;
    scroll-padding-block: 20px;
}

/* Kein Fenster mehr - aber eine Lesebreite. Die Schritte stehen zentriert. */
.ai-werkbank > .ai-dialog-inhalt > .ai-schritt {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* --- Fuss: Zurueck / Weiter als Feld unten rechts ---------------------- */
.ai-werkbank > .ai-dialog-fuss {
    position: absolute;
    right: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
    left: auto;
    z-index: 21;
    width: auto;
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
    padding: 8px;
    gap: 8px;
    border-top: 1px solid var(--ai-feld-rand);
    background: var(--ai-feld-bg-stark);
}

.ai-werkbank > .ai-dialog-fuss #ai-weiter {
    margin-left: 0;
}

.ai-werkbank > .ai-dialog-fuss #ai-freigabe {
    max-width: 520px;
}

/* --- Status, Fehler, Beta-Band und Schliessen-Rueckfrage schweben ------- */
.ai-werkbank > .ai-dialog-status:not(:empty) {
    position: absolute;
    left: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
    z-index: 22;
    max-width: min(360px, calc(50% - 32px));
    margin: 0;
    padding: 10px 14px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.ai-werkbank > .ai-dialog-fehler:not([hidden]) {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 23;
    width: max-content;
    max-width: min(640px, calc(100% - 2 * var(--ai-rand-buehne)));
    margin: 0;
    border-color: rgba(245, 87, 108, 0.5);
    background: rgba(40, 18, 24, 0.94);
}

/* Beim Preis stehen Band und Status beide unten links - dann weicht der
   Status nach oben aus. */
.ai-werkbank.ai-dialog-preis > .ai-dialog-status:not(:empty) {
    bottom: auto;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 12px);
}

.ai-werkbank .ai-dialog-bestaetigung:not([hidden]) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;
    width: min(460px, calc(100% - 2 * var(--ai-rand-buehne)));
    margin: 0;
    padding: 20px 22px;
    background: var(--ai-feld-bg-stark);
    border-color: rgba(245, 87, 108, 0.5);
}

/* --- Zeichenmodus: die Zeichnung ist die Seite -------------------------- */
/* `.ai-dialog-kette` setzt aiDesign.js, solange das Ketten-Widget
   (Zeichner oder Bemassung) die Frage ist. Dann gibt es keinen Inhalt mehr,
   der scrollen muesste: Die SVG-Flaeche liegt unter allem, die Felder
   darueber. Der Fuss (Zurueck/Weiter) bleibt unten rechts. */
.ai-werkbank.ai-dialog-kette {
    background: var(--ai-buehne-bg);
    background-image: none;
}

.ai-werkbank.ai-dialog-kette > .ai-dialog-inhalt {
    padding: 0;
    overflow: visible;
}

.ai-werkbank.ai-dialog-kette > .ai-dialog-inhalt > .ai-schritt {
    max-width: none;
}

/* Die Buehne: Zeichner-SVG bzw. Bemassungs-Buehne fuellen das Fenster. */
.ai-werkbank.ai-dialog-kette .pk-zeichner > .pk-flaeche,
.ai-werkbank.ai-dialog-kette .pk-bemassung > .pk-buehne {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: var(--ai-buehne-bg);
}

.ai-werkbank.ai-dialog-kette .pk-bemassung > .pk-buehne > .pk-flaeche {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
}

.ai-werkbank.ai-dialog-kette .pk-flaeche:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--ai-rolle-auswahl);
}

/* Die Frage schwebt rechts. aiDesign.js haengt die Erklaerung des Widgets
   als `.ai-fokus-hilfe` mit hinein (fokusAnwenden). */
.ai-werkbank.ai-dialog-kette #ai-fokus-frage:not([hidden]) {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    right: var(--ai-rand-buehne);
    z-index: 5;
    width: var(--ai-panel-breite);
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
    margin: 0;
    padding: 16px 16px 14px;
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

.ai-werkbank.ai-dialog-kette #ai-fokus-frage .ai-fokus-frage {
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.ai-werkbank .ai-fokus-hilfe {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.ai-werkbank.ai-dialog-kette .ai-kette-hilfe,
.ai-werkbank.ai-dialog-kette .ai-kette-status,
.ai-werkbank.ai-dialog-kette .pk-legende {
    display: none;
}

/* Vorlagen links, senkrecht. */
.ai-werkbank.ai-dialog-kette .pk-vorlagen {
    position: absolute;
    left: var(--ai-rand-buehne);
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 6px;
    max-height: calc(100% - 2 * (var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 24px));
    overflow-y: auto;
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    justify-content: flex-start;
}

.ai-werkbank.ai-dialog-kette .pk-vorlage {
    width: 76px;
    min-height: 64px;
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
}

.ai-werkbank.ai-dialog-kette .pk-vorlage:hover,
.ai-werkbank.ai-dialog-kette .pk-vorlage:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.ai-werkbank.ai-dialog-kette .pk-vorlage-bild {
    width: 44px;
    height: 28px;
    background: transparent;
}

.ai-werkbank.ai-dialog-kette .pk-vorlage-linie {
    stroke: currentColor;
    stroke-width: 26;
}

/* Werkzeugleiste unten Mitte. */
.ai-werkbank.ai-dialog-kette .pk-leiste {
    position: absolute;
    left: 50%;
    bottom: var(--ai-rand-buehne);
    transform: translateX(-50%);
    z-index: 5;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px;
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    justify-content: center;
}

.ai-werkbank.ai-dialog-kette .pk-leiste .pk-fertig {
    margin-left: 0;
    width: auto;
}

/* Der Hinweis (Status des Zeichners) unten links. */
.ai-werkbank.ai-dialog-kette .pk-hinweis {
    position: absolute;
    left: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
    z-index: 5;
    max-width: min(320px, calc(50% - 32px));
    margin: 0;
    padding: 10px 14px;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-secondary);
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

.ai-werkbank.ai-dialog-kette .pk-hinweis.pk-hinweis-warnung {
    color: #ffd9de;
    border-color: rgba(245, 87, 108, 0.5);
}

/* Der Fehler des Widgets ("Mass 2 fehlt") unter der Frage. */
.ai-werkbank.ai-dialog-kette .ai-kette-widget > .ai-feld-fehler:not([hidden]) {
    position: absolute;
    right: var(--ai-rand-buehne);
    bottom: calc(var(--ai-rand-buehne) + 72px);
    z-index: 6;
    width: var(--ai-panel-breite);
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(40, 18, 24, 0.94);
    border: 1px solid rgba(245, 87, 108, 0.5);
    color: #ffd9de;
}

/* Die Zeichenflaeche zaehlt: Rahmen und Abstaende der Formularkette weg. */
.ai-werkbank.ai-dialog-kette .ai-formular-buehne,
.ai-werkbank.ai-dialog-kette .ai-formular-aufgabe,
.ai-werkbank.ai-dialog-kette .ai-feld.ai-kette-widget {
    padding: 0;
    margin: 0;
    gap: 0;
    border: 0;
    background: none;
}

/* --- Zwischenbreiten ----------------------------------------------------- */
@media (max-width: 1100px) {
    .ai-werkbank .nocad-progress__bar:not([data-state="current"]) .ai-phase-name {
        display: none;
    }
    .ai-werkbank.ai-dialog-kette #ai-fokus-frage:not([hidden]) {
        width: 300px;
    }
}

@media (max-height: 760px) {
    .ai-werkbank.ai-dialog-kette .pk-vorlage {
        min-height: 54px;
    }
    .ai-werkbank.ai-dialog-kette .pk-vorlage-bild {
        height: 22px;
    }
}

/* --- Handy ---------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --ai-rand-buehne: 10px;
        --ai-kopf-hoehe: 44px;
    }

    .ai-werkbank .ai-kopf-links {
        padding: 4px 10px;
        gap: 8px;
    }

    .ai-werkbank .ai-dialog-kopf h2 {
        display: none;
    }

    .ai-werkbank .ai-dialog-beta {
        display: none;
    }

    .ai-werkbank > .ai-dialog-inhalt {
        padding: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 14px) 12px 110px;
    }

    /* Der Fuss wird eine Leiste am unteren Rand. */
    .ai-werkbank > .ai-dialog-fuss {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        border-radius: var(--ai-feld-radius) var(--ai-feld-radius) 0 0;
        border-bottom: 0;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    }

    /* --ai-fuss-hoehe misst aiDesign.js (unterkanteBeobachten): der Status
       sitzt immer UEBER dem Fuss, nie auf einem Knopf (28.09.2026). Das
       Beta-Band steht am Handy seit dem Knopfsystem im scrollenden Inhalt
       (aiDesign.js betaBandPlatzieren, bm-knoepfe.css). */
    .ai-werkbank > .ai-dialog-status:not(:empty) {
        bottom: calc(var(--ai-fuss-hoehe, 76px) + 8px);
        max-width: calc(100% - 2 * var(--ai-rand-buehne));
    }

    /* Zeichenmodus: Vorlagen als Leiste unter dem Kopf, Frage darunter,
       Werkzeuge ueber dem Fuss. */
    .ai-werkbank.ai-dialog-kette .pk-vorlagen {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
        left: var(--ai-rand-buehne);
        right: var(--ai-rand-buehne);
        transform: none;
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .ai-werkbank.ai-dialog-kette .pk-vorlagen::-webkit-scrollbar {
        display: none;
    }

    .ai-werkbank.ai-dialog-kette .pk-vorlage {
        width: 64px;
        min-height: 52px;
        flex: 0 0 auto;
    }

    .ai-werkbank.ai-dialog-kette .pk-vorlage-bild {
        height: 20px;
    }

    .ai-werkbank.ai-dialog-kette #ai-fokus-frage:not([hidden]) {
        top: auto;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: var(--ai-rand-buehne);
        right: var(--ai-rand-buehne);
        width: auto;
        max-width: none;
        padding: 10px 12px;
    }

    .ai-werkbank.ai-dialog-kette #ai-fokus-frage .ai-fokus-frage {
        font-size: 1rem;
    }

    .ai-werkbank.ai-dialog-kette .ai-fokus-hilfe {
        display: none;
    }

    /* Die Werkzeuge stehen ueber der Frage, kompakt in einer Zeile. */
    .ai-werkbank.ai-dialog-kette .pk-leiste {
        bottom: calc(150px + env(safe-area-inset-bottom));
        left: var(--ai-rand-buehne);
        right: var(--ai-rand-buehne);
        transform: none;
        max-width: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 4px;
        gap: 4px;
    }

    .ai-werkbank.ai-dialog-kette .pk-leiste::-webkit-scrollbar {
        display: none;
    }

    .ai-werkbank.ai-dialog-kette .pk-leiste .ai-nebenknopf,
    .ai-werkbank.ai-dialog-kette .pk-leiste .btn-main,
    .ai-werkbank.ai-dialog-kette .pk-leiste .ai-textknopf {
        flex: 0 0 auto;
    }

    .ai-werkbank.ai-dialog-kette .pk-hinweis {
        display: none;
    }

    .ai-werkbank.ai-dialog-kette .ai-kette-widget > .ai-feld-fehler:not([hidden]) {
        right: var(--ai-rand-buehne);
        left: var(--ai-rand-buehne);
        width: auto;
        bottom: calc(150px + env(safe-area-inset-bottom));
    }
}

/* Querformat Handy: Frage bleibt rechts, schmal; Vorlagen links kompakt. */
@media (max-width: 900px) and (max-height: 460px) {
    .ai-werkbank.ai-dialog-kette #ai-fokus-frage:not([hidden]) {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
        bottom: auto;
        left: auto;
        right: var(--ai-rand-buehne);
        width: 260px;
    }
    .ai-werkbank.ai-dialog-kette .pk-vorlagen {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
        right: auto;
        flex-direction: column;
        max-height: calc(100% - 120px);
        overflow-y: auto;
    }
    .ai-werkbank.ai-dialog-kette .pk-leiste {
        top: auto;
        bottom: var(--ai-rand-buehne);
        left: var(--ai-rand-buehne);
        right: auto;
        max-width: calc(100% - 300px);
    }
}

/* --- Loch-Editor als Werkbank (Paket 6) ---------------------------------- */
/* `.ai-dialog-loch` setzt aiDesign.js, solange der Loch-Editor die Aufgabe
   ist (lochEditorOeffnen/-Schliessen). Die Flachansicht der aktiven Flaeche
   fuellt das Fenster (`.hde-canvas`, position: fixed), der anklickbare
   Querschnitt schwebt links, die Werkzeuge unten in der Mitte, und alles
   Uebrige des Editors - Frage, Chips, Felder des gewaehlten Merkmals,
   Muster, Meldungen - steht im Feld rechts (`#ai-loch-schritt`).

   WICHTIG: Das rechte Feld hat KEINEN backdrop-filter. Ein Filter macht ein
   Element zum Bezug fuer `position: fixed`-Nachfahren - die Buehne saesse
   dann im Feld statt im Fenster. */
.ai-werkbank.ai-dialog-loch {
    background: var(--ai-buehne-bg);
    background-image: none;
}

.ai-werkbank.ai-dialog-loch > .ai-dialog-inhalt {
    padding: 0;
    overflow: visible;
}

.ai-werkbank.ai-dialog-loch > .ai-dialog-inhalt > .ai-schritt {
    max-width: none;
}

.ai-werkbank.ai-dialog-loch #ai-loch-schritt:not([hidden]) {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    right: var(--ai-rand-buehne);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 360px;
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
    max-height: calc(100% - var(--ai-rand-buehne) - var(--ai-kopf-hoehe) - 16px - 96px);
    overflow: auto;
    padding: 14px 16px;
    background: var(--ai-feld-bg-stark);
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

.ai-werkbank.ai-dialog-loch #ai-loch-titel {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.ai-werkbank.ai-dialog-loch #ai-loch-meldung:not([hidden]) {
    margin: 0;
}

/* Die Kinder des Editors werden direkt zu Kindern des Feldes. */
.ai-werkbank.ai-dialog-loch .hde-editor {
    display: contents;
}

/* Der Feldhintergrund liegt als Pseudo-Element ZWISCHEN Buehne (z -1) und
   Inhalt (z 1): Der eigene Hintergrund eines Stapelkontexts wird vor
   negativen z-Nachfahren gemalt und laege sonst unter der Buehne. */
.ai-werkbank.ai-dialog-loch #ai-loch-schritt:not([hidden])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--ai-feld-bg-stark);
}

/* Der Halter des Editors darf KEIN eigener Stapelkontext werden: Die
   Buehne (fixed, z -1) liegt in ihm; als Kontext (z 1) truege er sie ueber
   Titel und Hintergrund des Feldes (Livefund 22.09.2026). */
.ai-werkbank.ai-dialog-loch #ai-loch-editor {
    display: contents;
}

.ai-werkbank.ai-dialog-loch #ai-loch-schritt > :not(.hde-editor):not(#ai-loch-editor),
.ai-werkbank.ai-dialog-loch .hde-editor > :not(.hde-canvas):not(.hde-section):not(.hde-tools):not(.hde-placement-actions) {
    position: relative;
    z-index: 1;
}

.ai-werkbank.ai-dialog-loch .hde-canvas {
    position: fixed;
    inset: 0;
    /* Negativ: Das Feld `#ai-loch-schritt` ist ein eigener Stapelkontext
       (z-index 5). Darin wird die Buehne nach dem Feldhintergrund und vor
       dem Feldinhalt gemalt - sie fuellt das Fenster, verdeckt aber weder
       das Feld noch Kopf und Fuss (z-index 20/21 am Dialog). */
    z-index: -1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--ai-buehne-bg);
    overflow: hidden;
}

.ai-werkbank.ai-dialog-loch .hde-canvas-placing {
    box-shadow: inset 0 0 0 3px rgba(158, 39, 251, 0.35);
}

.ai-werkbank.ai-dialog-loch .hde-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ai-werkbank.ai-dialog-loch .hde-canvas-caption {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    gap: 14px;
    padding: 8px 14px;
    border-radius: var(--ai-chip-radius);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.35);
    font-size: 12px;
    white-space: nowrap;
}

.ai-werkbank.ai-dialog-loch .hde-section {
    position: fixed;
    left: var(--ai-rand-buehne);
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 220px;
    padding: 10px;
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

.ai-werkbank.ai-dialog-loch .hde-section-svg {
    max-width: none;
}

.ai-werkbank.ai-dialog-loch .hde-tools,
.ai-werkbank.ai-dialog-loch .hde-placement-actions {
    position: fixed;
    /* Mittig, aber nach links versetzt: rechts unten steht der Fuss mit
       "Ich habe alle Loecher platziert" (Livefund 22.09.2026). */
    left: calc(50% - 150px);
    bottom: var(--ai-rand-buehne);
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 6px;
    max-width: min(760px, calc(100% - 2 * var(--ai-rand-buehne) - 440px));
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

.ai-werkbank.ai-dialog-loch .hde-tools {
    grid-template-columns: none;
}

.ai-werkbank.ai-dialog-loch .hde-add-actions {
    flex-wrap: nowrap;
}

.ai-werkbank.ai-dialog-loch .hde-add {
    justify-self: auto;
}

/* Die Lochmuster klappen ueber der Leiste auf. */
.ai-werkbank.ai-dialog-loch .hde-more-patterns {
    position: relative;
}

.ai-werkbank.ai-dialog-loch .hde-more-patterns[open] .hde-patterns {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    width: 340px;
    max-width: calc(100vw - 2 * var(--ai-rand-buehne));
    padding: 8px;
    background: var(--ai-feld-bg-stark);
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

/* --- Vorschau als Werkbank (Paket 7) ------------------------------------ */
/* `.ai-dialog-vorschau` setzt schrittAnzeigen. 3D-Modell bzw.
   Pruefzeichnung fuellen das Fenster; Ansichts-Register oben Mitte,
   Zoom unten links, Pruefbereich (Zusammenfassung, Masstabelle, Aktionen)
   als Feld rechts, Vertauscht-/Kette-umdrehen-Hinweise unten Mitte. */
.ai-werkbank.ai-dialog-vorschau {
    background: var(--ai-buehne-bg);
    background-image: none;
}

.ai-werkbank.ai-dialog-vorschau > .ai-dialog-inhalt {
    padding: 0;
    overflow: visible;
}

.ai-werkbank.ai-dialog-vorschau > .ai-dialog-inhalt > .ai-schritt {
    max-width: none;
}

/* Der Schritt-Titel bleibt fuer Vorlesehilfen (er bekommt den Fokus),
   sichtbar ist die Frage im Feld rechts. */
.ai-werkbank.ai-dialog-vorschau #ai-vorschau-titel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    margin: 0;
}

.ai-werkbank.ai-dialog-vorschau #ai-vorschau-laeuft:not([hidden]) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    padding: 18px 24px;
    background: var(--ai-feld-bg-stark);
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    color: var(--text-primary);
}

.ai-werkbank.ai-dialog-vorschau #ai-vorschau-inhalt:not([hidden]) {
    display: block;
}

.ai-werkbank.ai-dialog-vorschau .ai-vorschau-buehne {
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ai-buehne-bg);
}

.ai-werkbank.ai-dialog-vorschau .ai-register {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0;
}

.ai-werkbank.ai-dialog-vorschau .ai-register-knopf {
    flex: 0 0 auto;
}

.ai-werkbank.ai-dialog-vorschau #ai-panel-modell:not([hidden]),
.ai-werkbank.ai-dialog-vorschau #ai-panel-zeichnung:not([hidden]) {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
}

.ai-werkbank.ai-dialog-vorschau #ai-panel-modell model-viewer {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: var(--ai-buehne-bg);
}

.ai-werkbank.ai-dialog-vorschau #ai-zeichnung-halter {
    position: absolute;
    inset: 0;
    height: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.ai-werkbank.ai-dialog-vorschau .ai-zoomleiste {
    position: absolute;
    left: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
    z-index: 5;
    margin: 0;
    flex-wrap: nowrap;
}

/* Die Zeichnung ist in der Werkbank schon bildschirmfuellend. */
.ai-werkbank.ai-dialog-vorschau #ai-vollbild-knopf {
    display: none;
}

.ai-werkbank.ai-dialog-vorschau #ai-mass-editor:not([hidden]),
.ai-werkbank.ai-dialog-vorschau #ai-vertausch:not([hidden]),
.ai-werkbank.ai-dialog-vorschau #ai-kette:not([hidden]) {
    position: absolute;
    left: 50%;
    bottom: var(--ai-rand-buehne);
    transform: translateX(-50%);
    z-index: 6;
    margin: 0;
    padding: 10px 14px;
    max-width: min(560px, calc(100% - 2 * (var(--ai-rand-buehne) + 200px)));
    background: var(--ai-feld-bg-stark);
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    color: var(--text-primary);
}

.ai-werkbank.ai-dialog-vorschau #ai-vertausch:not([hidden]),
.ai-werkbank.ai-dialog-vorschau #ai-kette:not([hidden]) {
    bottom: calc(var(--ai-rand-buehne) + 64px);
    z-index: 5;
}

.ai-werkbank.ai-dialog-vorschau .ai-vorschau-aufgabe {
    position: fixed;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    right: var(--ai-rand-buehne);
    z-index: 5;
    width: 360px;
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
    max-height: calc(100% - var(--ai-rand-buehne) - var(--ai-kopf-hoehe) - 16px - 96px);
    overflow: auto;
    padding: 14px 16px;
    background: var(--ai-feld-bg-stark);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

/* --- Handy: Loch-Editor und Vorschau ------------------------------------ */
@media (max-width: 767px) {
    .ai-werkbank.ai-dialog-loch #ai-loch-schritt:not([hidden]),
    .ai-werkbank.ai-dialog-vorschau .ai-vorschau-aufgabe {
        top: auto;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: var(--ai-rand-buehne);
        right: var(--ai-rand-buehne);
        width: auto;
        max-width: none;
        max-height: 42%;
        padding: 10px 12px;
    }

    .ai-werkbank.ai-dialog-loch .hde-tools,
    .ai-werkbank.ai-dialog-loch .hde-placement-actions {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
        bottom: auto;
        left: var(--ai-rand-buehne);
        right: var(--ai-rand-buehne);
        transform: none;
        max-width: none;
        padding: 4px;
        gap: 4px;
    }

    .ai-werkbank.ai-dialog-loch .hde-more-patterns[open] .hde-patterns {
        bottom: auto;
        top: calc(100% + 8px);
        width: min(340px, calc(100vw - 2 * var(--ai-rand-buehne)));
    }

    .ai-werkbank.ai-dialog-loch .hde-section {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 70px);
        transform: none;
        width: 130px;
        padding: 6px;
    }

    .ai-werkbank.ai-dialog-loch .hde-canvas-caption {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 70px);
        left: auto;
        right: var(--ai-rand-buehne);
        transform: none;
        font-size: 11px;
    }

    .ai-werkbank.ai-dialog-vorschau .ai-register {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
    }

    .ai-werkbank.ai-dialog-vorschau .ai-zoomleiste {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 62px);
        bottom: auto;
    }

    .ai-werkbank.ai-dialog-vorschau #ai-mass-editor:not([hidden]),
    .ai-werkbank.ai-dialog-vorschau #ai-vertausch:not([hidden]),
    .ai-werkbank.ai-dialog-vorschau #ai-kette:not([hidden]) {
        bottom: auto;
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 116px);
        max-width: calc(100% - 2 * var(--ai-rand-buehne));
    }
}

/* --- Frage-Werkbank: jede Frage mit Live-Skizze (Pakete 5 und 8) -------- */
/* Platte, Kasten/Wanne und alle uebrigen Familien haben keinen Zeichner,
   aber die Live-Skizze des Servers: Sie fuellt die Buehne, die Frage
   schwebt rechts, Meldungen (Rueckfragen, Warnungen, Teileliste) oben in
   der Mitte. Der Modus greift ueber `:has()` nur im Frage-Modus
   (`#ai-formular-felder.ai-fokus`) mit sichtbarer Skizze - das
   Vollformular ("Lieber alle Angaben auf einmal") bleibt eine Seite.
   Die Skizze zaehlt nur mit sichtbarer Formularbuehne: Im Stueckzahl- und
   Loch-Schritt ist die Buehne `hidden`, die Figur darin nicht - ohne diese
   Bedingung sass der Stueckzahl-Schritt in der schwebenden Meldungsspalte
   (Livefund 22.09.2026).
   HANDOFF b.19/b.20 (Felder an den Masslinien der Platte, isometrischer
   Kasten) sind damit NICHT gebaut - siehe TODO.md. */
.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) {
    background: var(--ai-buehne-bg);
    background-image: none;
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) > .ai-dialog-inhalt {
    padding: 0;
    overflow: visible;
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-schritt-formular {
    /* Die Meldungen des Schritts als Spalte oben in der Mitte. KEIN
       transform hier: Es machte den Schritt zum Bezug fuer die fixierten
       Kinder (Skizze, Frage). */
    position: fixed;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    left: max(var(--ai-rand-buehne), calc(50% - 320px));
    width: min(640px, calc(100% - 2 * var(--ai-rand-buehne)));
    max-width: none;
    margin: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-schritt-formular > * {
    pointer-events: auto;
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-schritt-formular > .ai-warnblock,
.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-schritt-formular > .ai-fehlerblock,
.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-schritt-formular > #ai-teileliste,
.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-schritt-formular > #ai-formular-formwechsel {
    margin: 0;
    background: var(--ai-feld-bg-stark);
    border: 1px solid var(--ai-feld-rand);
    border-radius: 12px;
    box-shadow: var(--ai-feld-schatten);
    color: var(--text-primary);
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-schritt-formular > .ai-warnblock {
    border-color: rgba(246, 231, 96, 0.45);
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-schritt-formular > .ai-fehlerblock {
    border-color: rgba(245, 87, 108, 0.5);
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-formular-titel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    margin: 0;
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-loch-werkzeuge:not([hidden]) {
    position: fixed;
    left: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
    z-index: 5;
    margin: 0;
    padding: 6px;
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) .ai-formular-buehne {
    display: block;
}

/* Die Skizze des Servers fuellt die Buehne; Kopf, Frage und Fuss bleiben
   frei (Innenabstand). */
.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus) #ai-live-skizze:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    margin: 0;
    padding: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 24px) calc(var(--ai-rand-buehne) + var(--ai-panel-breite) + 24px) 110px 40px;
    border: 0;
    border-radius: 0;
    background: var(--ai-buehne-bg);
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus) #ai-live-skizze:not([hidden]) img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus) #ai-live-skizze:not([hidden]) figcaption {
    position: absolute;
    left: 50%;
    bottom: var(--ai-rand-buehne);
    transform: translateX(-50%);
    margin: 0;
    padding: 8px 14px;
    border-radius: var(--ai-chip-radius);
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
    max-width: calc(100% - 2 * (var(--ai-rand-buehne) + 200px));
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Die Frage samt Feld als Feld rechts. */
.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) .ai-formular-aufgabe {
    position: fixed;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    right: var(--ai-rand-buehne);
    z-index: 5;
    width: var(--ai-panel-breite);
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
    max-height: calc(100% - var(--ai-rand-buehne) - var(--ai-kopf-hoehe) - 16px - 96px);
    overflow: auto;
    padding: 16px;
    background: var(--ai-feld-bg-stark);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) .ai-formular-aufgabe .ai-fokus-frage {
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) .ai-formular-aufgabe #ai-fokus-umschalter {
    margin: 12px 0 0;
    min-height: 36px;
    font-size: 0.8125rem;
}

/* --- Zeichenflaeche des Skizzenwegs als Werkbank (Paket 9) --------------- */
/* `aiDesignZeichnen.js` (Rechteck, Kreis, Langloch, Linie, Freihand, Mass)
   bekommt dieselbe Buehne: Leinwand = Fenster, Werkzeuge unten, Verwalten
   unten links, Massabfrage ueber den Werkzeugen, Titel und Hilfe rechts.
   Der Fuss des Dialogs verschwindet hier - die Leinwand hat eigene Knoepfe
   ("Zurueck ohne Uebernahme", "Zeichnung uebernehmen"). */
.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) {
    background: var(--ai-buehne-bg);
    background-image: none;
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) > .ai-dialog-inhalt {
    padding: 0;
    overflow: visible;
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) > .ai-dialog-fuss,
.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-beschreiben-kopf {
    display: none;
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-leinwand {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: var(--ai-buehne-bg);
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-titel,
.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-titel + .ai-schritt-hilfe {
    position: fixed;
    right: var(--ai-rand-buehne);
    z-index: 5;
    width: var(--ai-panel-breite);
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
    margin: 0;
    padding: 14px 16px;
    background: var(--ai-feld-bg-stark);
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    color: var(--text-primary);
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-titel {
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-titel + .ai-schritt-hilfe {
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px + 62px);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-werkzeuge,
.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-verwalten,
.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-fuss,
.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-massabfrage:not([hidden]),
.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-hinweis:not(:empty) {
    position: fixed;
    z-index: 5;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: var(--ai-feld-bg);
    backdrop-filter: blur(var(--ai-feld-blur));
    -webkit-backdrop-filter: blur(var(--ai-feld-blur));
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    color: var(--text-primary);
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-werkzeuge {
    left: 50%;
    bottom: var(--ai-rand-buehne);
    transform: translateX(-50%);
    max-width: calc(100% - 2 * (var(--ai-rand-buehne) + 200px));
    justify-content: center;
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-verwalten {
    left: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-fuss {
    right: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
    padding: 8px;
    gap: 8px;
    background: var(--ai-feld-bg-stark);
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-massabfrage:not([hidden]) {
    left: 50%;
    bottom: calc(var(--ai-rand-buehne) + 72px);
    transform: translateX(-50%);
    padding: 10px 14px;
    background: var(--ai-feld-bg-stark);
}

.ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-hinweis:not(:empty) {
    left: 50%;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: var(--ai-chip-radius);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    max-width: min(560px, calc(100% - 2 * (var(--ai-rand-buehne) + 200px)));
}

/* --- Einstieg und Beschreiben als Seite (Paket 10) ---------------------- */
.ai-werkbank #ai-schritt-intro:not([hidden]) {
    max-width: 960px;
    min-height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-werkbank .ai-intro-h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ai-werkbank #ai-intro-text {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 62ch;
}

.ai-werkbank #ai-beschreiben-wege.nocad-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ai-werkbank #ai-beschreiben-wege .nocad-choice {
    min-height: 96px;
    padding: 16px;
    border-radius: 18px;
}

/* --- Handy: Frage-Werkbank und Zeichenflaeche ---------------------------- */
@media (max-width: 767px) {
    .ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) .ai-formular-aufgabe {
        top: auto;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: var(--ai-rand-buehne);
        right: var(--ai-rand-buehne);
        width: auto;
        max-width: none;
        max-height: 46%;
        padding: 12px;
    }

    .ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus) #ai-live-skizze:not([hidden]) {
        padding: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px) 16px calc(46% + 90px) 16px;
    }

    .ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus) #ai-live-skizze:not([hidden]) figcaption {
        display: none;
    }

    .ai-werkbank:not(.ai-dialog-kette):not(.ai-dialog-loch):has(#ai-formular-felder.ai-fokus):has(.ai-formular-buehne:not([hidden]) > #ai-live-skizze:not([hidden])) #ai-loch-werkzeuge:not([hidden]) {
        bottom: auto;
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
        right: var(--ai-rand-buehne);
        left: auto;
    }

    .ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-titel,
    .ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-titel + .ai-schritt-hilfe {
        display: none;
    }

    .ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-werkzeuge {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
        bottom: auto;
        left: var(--ai-rand-buehne);
        right: var(--ai-rand-buehne);
        transform: none;
        max-width: none;
        padding: 4px;
        gap: 4px;
    }

    .ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-verwalten {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) .ai-zeichnen-fuss {
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--ai-feld-radius) var(--ai-feld-radius) 0 0;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        justify-content: space-between;
    }

    .ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-massabfrage:not([hidden]) {
        left: var(--ai-rand-buehne);
        right: var(--ai-rand-buehne);
        transform: none;
        bottom: calc(130px + env(safe-area-inset-bottom));
    }

    .ai-werkbank:has(#ai-beschreiben-zeichenflaeche:not([hidden])) #ai-zeichnen-hinweis:not(:empty) {
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 70px);
        max-width: calc(100% - 2 * var(--ai-rand-buehne));
    }

    .ai-werkbank #ai-beschreiben-wege.nocad-choices {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Zoom und Verschieben der Buehne (22.09.2026) ------------------------ */
.pk-flaeche.pk-verschieben,
.pk-flaeche.pk-verschieben * {
    cursor: grab !important;
}

/* --- Startseite: drei Wege, darunter die Formwahl (22.09.2026) ---------- */
.ai-werkbank .ai-start-karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.ai-werkbank .ai-start-karten-eine {
    grid-template-columns: minmax(0, 420px);
}

.ai-werkbank .ai-start-etikett {
    margin: 28px 0 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}

.ai-werkbank .ai-start-karten-formen {
    margin-top: 10px;
}

.ai-werkbank .ai-start-katalog {
    margin-top: 14px;
    min-height: 40px;
}

/* Die vier Schritte im "i"-Feld: kompakt. */
.ai-werkbank .ai-intro-schritte-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.ai-werkbank .ai-intro-schritte-info li {
    padding: 8px 10px;
}

@media (max-width: 767px) {
    .ai-werkbank .ai-start-karten {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 18px;
    }

    .ai-werkbank .ai-intro-schritte-info {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Pulverbeschichtung erst im Stueckzahl-Schritt (22.09.2026) --------- */
/* Im Frage-Modus bleibt die Zusatzoption verborgen (sie irritierte beim
   Zeichnen); aiDesign.js holt die Felder in den Stueckzahl-Schritt. */
.ai-werkbank .ai-fokus .ai-feld.ai-coating-field {
    display: none;
}

.ai-werkbank .ai-menge-zusatz {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ai-feld-rand);
}

.ai-werkbank .ai-menge-zusatz .ai-feld.ai-coating-field[hidden] {
    display: none;
}

/* --- Handy: Kopf und Kopf-Popover im Bildschirm (25.09.2026) --------------
   Befund iPhone: Der Kopf brach in zwei Zeilen um - das rechte Kopf-Feld lag
   dann ueber Werkzeugen/Inhalt; "Gut zu wissen" und die Rueckfrage "Von vorne
   beginnen" hingen rechtsbuendig am Knopf und ragten links aus dem Bild. */
@media (max-width: 767px) {
    /* Blechmodul (Editor, Schnellteile, freies Zeichnen): Kopf in EINER
       Zeile, die Phasen zeigen nur die Nummern (aria-label bleibt). */
    .ai-werkbank.ai-dialog-blech > .ai-dialog-kopf {
        flex-wrap: nowrap;
    }

    .ai-werkbank.ai-dialog-blech .ai-phase-name,
    .ai-werkbank.ai-dialog-blech .nocad-progress__label {
        display: none;
    }

    .ai-werkbank.ai-dialog-blech .ai-kopf-links {
        min-width: 0;
        flex: 0 1 auto;
    }

    /* "i" und "Von vorne beginnen": am rechten Kopf-Feld verankert, nie
       breiter als der Bildschirm. */
    .ai-werkbank .ai-kopf-rechts {
        position: relative;
        margin-left: auto;
    }

    .ai-werkbank .ai-kopf-rechts .ai-dialog-info,
    .ai-werkbank .ai-kopf-rechts .ai-dialog-neu,
    .ai-werkbank .ai-kopf-rechts .ai-dialog-melden {
        position: static;
    }

    .ai-werkbank .ai-dialog-info .ai-gut-zu-wissen,
    .ai-werkbank .ai-dialog-neu .ai-neu-frage,
    .ai-werkbank .ai-dialog-melden .ai-melden-feld {
        left: auto;
        right: 0;
        width: min(360px, calc(100vw - 2 * var(--ai-rand-buehne)));
        max-width: calc(100vw - 2 * var(--ai-rand-buehne));
        max-height: calc(100dvh - var(--ai-kopf-hoehe) - 40px);
        overflow-y: auto;
        box-sizing: border-box;
    }

}