/*
  Blechmodul (T09/T10/T11): 3D-Ansicht, Editor und Skizze in der
  Vollbild-Werkbank.

  WARUM EINE EIGENE DATEI
  -----------------------
  Die Werkbank (ai-werkbank.css) ist die Designvorlage - Christian findet
  sie gut und intuitiv. Diese Datei gestaltet nichts neu, sie ergaenzt nur
  die neuen Knoepfe und Felder in derselben Formensprache: Schwebefelder aus
  dunklem Glas (--ai-feld-*), Rollenfarben (--ai-rolle-*), helle Buehne
  (--ai-buehne-bg), 44-px-Ziele (--ai-touch). Alle Klassen tragen das
  Praefix bm-. Geladen NACH ai-werkbank.css (base.html).

  Der Modus `.ai-dialog-blech` (aiDesign.js setzt ihn, solange der Editor
  im Formularschritt steht) laesst die Buehne den ganzen Bildschirm fuellen
  - wie `.ai-dialog-kette` fuer den Zeichner.
*/

/* --- Werkbank-Modus: die Buehne ist die Seite ---------------------------- */
.ai-werkbank.ai-dialog-blech {
    background: var(--ai-buehne-bg);
    background-image: none;
}

.ai-werkbank.ai-dialog-blech > .ai-dialog-inhalt {
    padding: 0;
    overflow: hidden;
}

.ai-werkbank.ai-dialog-blech > .ai-dialog-inhalt > .ai-schritt {
    max-width: none;
    height: 100%;
}

/* Im Editor-Modus steht nur der Editor im Formularschritt; das generische
   Formular bleibt im DOM (Vertrag), ist aber nicht die Frage. */
.ai-werkbank.ai-dialog-blech #ai-schritt-formular > :not(.bm-editor-halter) {
    display: none;
}

.ai-werkbank.ai-dialog-blech .bm-editor-halter {
    position: absolute;
    inset: 0;
}

/* Weiter fuehrt der Editor selbst (Pruef-/Preisleiste) - nur mit aktuellem
   Befund. Zurueck bleibt im Fuss. */
.ai-werkbank.ai-dialog-blech > .ai-dialog-fuss #ai-weiter {
    display: none;
}

/* Grundblech frei zeichnen (25.09.2026): Der Fuss der Huelle entfaellt -
   "Anderes Teil waehlen" und die Wege weiter stehen in der Leiste des Felds. */
.ai-werkbank.ai-dialog-blech.bm-frei-modus > .ai-dialog-fuss {
    display: none;
}

/* --- Gemeinsames Schwebefeld --------------------------------------------- */
.bm-feld,
.bm-werkzeugleiste,
.bm-pruefleiste,
.bm-editor-hinweis:not(:empty),
.bm-ansicht-liste {
    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);
}

.bm-feld-titel {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.bm-feld-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bm-feld-hilfe,
.bm-listenkopf {
    margin: 6px 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Sichtbarer Fokus auf allem, was bedienbar ist. */
.bm-editor button:focus-visible,
.bm-editor input:focus-visible,
.bm-editor select:focus-visible,
.bm-editor summary:focus-visible,
.bm-ansicht-canvas:focus-visible {
    outline: 3px solid var(--ai-rolle-auswahl);
    outline-offset: 2px;
}

/* --- Editor: Buehne und 3D-Ansicht ---------------------------------------- */
.bm-editor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--ai-text-auf-hell);
}

.bm-editor-buehne,
.bm-editor-buehne > .bm-ansicht,
.bm-ansicht-buehne {
    position: absolute;
    inset: 0;
}

.bm-ansicht-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}

.bm-ansicht-meldung {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 80px);
    left: 50%;
    transform: translateX(-50%);
    max-width: min(520px, calc(100% - 2 * var(--ai-rand-buehne)));
    margin: 0;
    padding: 12px 16px;
    background: var(--ai-feld-bg-stark);
    border: 1px solid var(--ai-rolle-hinweis);
    border-radius: var(--ai-feld-radius);
    color: var(--text-primary);
}

.bm-ansicht-hinweis,
.bm-ansicht-vorschau {
    position: absolute;
    right: calc(var(--ai-panel-breite) + 2 * var(--ai-rand-buehne));
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
    margin: 0;
    font-size: 0.75rem;
    color: var(--ai-text-auf-hell-sekundaer);
}

.bm-ansicht-hinweis:empty {
    display: none;
}

.bm-ansicht-hinweis {
    top: auto;
    bottom: calc(var(--ai-rand-buehne) + 132px);
}

/* Vorschau-Vermerk: klein unten rechts ueber dem Zurueck-Feld statt oben
   hinter der Befehlszeile. */
.bm-editor .bm-ansicht-vorschau {
    top: auto;
    right: var(--ai-rand-buehne);
    bottom: calc(var(--ai-rand-buehne) + 76px);
    max-width: 260px;
    text-align: right;
}

/* Kanten und Flaechen als Liste (nahe/verdeckte Kanten, Tastatur). */
.bm-ansicht-liste {
    position: absolute;
    left: var(--ai-rand-buehne);
    bottom: calc(var(--ai-rand-buehne) + 76px);
    z-index: 6;
    width: 240px;
    max-height: 38%;
    overflow: auto;
    padding: 6px 10px;
    font-size: 0.8125rem;
}

.bm-ansicht-liste-titel {
    min-height: var(--ai-touch);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.bm-ansicht-liste-kopf {
    margin: 6px 0 2px;
    color: var(--text-secondary);
}

.bm-kantenliste,
.bm-flaechenliste,
.bm-liste,
.bm-eintrag-meldungen,
.bm-abhaengige,
.bm-legende,
.bm-leisten-meldungen {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-ansicht-knopf.bm-kante-gebogen {
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Befehlszeile: oben ueber die ganze Breite, unter dem Kopf ------------
   (24.09.2026) Werkzeuge | Bearbeitungen | Hilfe in EINER Zeile. Die Felder
   links/rechts beginnen darunter, das Teil sitzt in der freien Mitte
   (Einpassen in blechModulAnsicht.js). Reicht die Breite nicht, bricht die
   Zeile um - die Felder rutschen dann nicht mit, deshalb kompakte Knoepfe. */
.bm-editor {
    --bm-leisten-hoehe: 64px;
}

.bm-leisten {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 12px);
    left: var(--ai-rand-buehne);
    right: var(--ai-rand-buehne);
    z-index: 7;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    pointer-events: none;
}

.bm-leisten > * {
    pointer-events: auto;
}

.bm-werkzeugleiste {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px;
    min-width: 0;
    overflow-x: auto;
}

.bm-icon {
    width: 22px;
    height: 22px;
}

/* Einbauseite mit sichtbarem Pfeil (T12). */
.bm-fm-seite {
    gap: 6px;
}

.bm-fm-seite .bm-icon {
    width: 18px;
    height: 18px;
}

.bm-knopfreihe {
    flex-wrap: wrap;
}

.bm-naht-laenge,
.bm-naht-kanten {
    margin: 6px 0;
    font-size: 0.8125rem;
}

/* Tarif oder Katalogwert fehlt: kein Preis, Anfrageweg (T12). */
.bm-tarif-fehlt,
.bm-katalogwert-fehlt {
    color: var(--ai-rolle-hinweis);
}

.bm-wz-rueckgaengig,
.bm-wz-wiederholen {
    min-width: var(--ai-touch);
}

.bm-wz-rueckgaengig .bm-werkzeug-text,
.bm-wz-wiederholen .bm-werkzeug-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* --- Merkmalsliste links, Eigenschaftsfeld rechts (unter der Befehlszeile) -- */
.bm-merkmalsliste,
.bm-eigenschaften {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 20px + var(--bm-leisten-hoehe));
    z-index: 6;
    width: min(var(--ai-panel-breite), calc(50% - 2 * var(--ai-rand-buehne)));
    max-height: calc(100% - var(--ai-kopf-hoehe) - var(--bm-leisten-hoehe) - 2 * var(--ai-rand-buehne) - 158px);
    overflow: auto;
    padding: 14px 14px 12px;
    font-size: 0.875rem;
}

.bm-merkmalsliste {
    left: var(--ai-rand-buehne);
    width: 240px;
    max-height: calc(58% - var(--ai-kopf-hoehe) - var(--bm-leisten-hoehe));
}

.bm-eigenschaften {
    right: var(--ai-rand-buehne);
}

.bm-eigenschaften[hidden] {
    display: none;
}

.bm-liste-leer {
    margin: 0;
    color: var(--text-secondary);
}

.bm-eintrag {
    margin: 2px 0;
}

.bm-eintrag.bm-beispiel > .bm-eintrag-knopf,
.bm-ist-beispiel {
    border-style: dashed;
    border-color: var(--ai-rolle-hinweis);
}

.bm-abzeichen {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--ai-chip-radius);
    font-size: 0.6875rem;
    line-height: 1.5;
}

.bm-abzeichen-beispiel {
    background: rgba(246, 231, 96, 0.16);
    color: var(--ai-rolle-hinweis);
}

.bm-hat-fehler > .bm-eintrag-knopf {
    border-color: var(--ai-rolle-fehler);
}

.bm-hat-hinweis > .bm-eintrag-knopf,
.bm-hat-fehlt > .bm-eintrag-knopf {
    border-color: var(--ai-rolle-hinweis);
}

.bm-meldung {
    margin: 4px 0 0;
    padding-left: 10px;
    border-left: 3px solid currentColor;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.bm-meldung-fehler {
    color: var(--ai-rolle-fehler);
}

.bm-meldung-hinweis,
.bm-meldung-fehlt {
    color: var(--ai-rolle-hinweis);
}

/* Felder */
.bm-feld-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
}

.bm-feld-name {
    flex: 1 1 110px;
    color: var(--text-secondary);
}

.bm-zahl,
.bm-muster-art {
    width: 96px;
    min-height: var(--ai-touch);
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-knopf-radius);
    color: var(--text-primary);
    font: inherit;
    text-align: right;
}

.bm-muster-art {
    width: auto;
    text-align: left;
}

.bm-zahl[aria-invalid="true"] {
    border-color: var(--ai-rolle-fehler);
}

.bm-schnellwahl,
.bm-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.bm-schnellwinkel[aria-pressed="true"],
.bm-stossart[aria-pressed="true"],
.bm-fm-groesse[aria-pressed="true"],
.bm-fm-bauform[aria-pressed="true"],
.bm-naht-umfang[aria-pressed="true"],
.bm-naht-seite[aria-pressed="true"],
.bm-ecke-verschweissen[aria-pressed="true"] {
    background: var(--ai-rolle-auswahl-weich);
    border-color: var(--ai-rolle-auswahl);
}

.bm-enden {
    margin: 10px 0;
    padding-top: 8px;
    border-top: 1px solid var(--ai-feld-rand);
}

.bm-ende {
    margin: 4px 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.bm-ende.bm-fehlt {
    color: var(--ai-rolle-hinweis);
}

/* --- Hinweise unten mittig, Pruef-/Preisleiste unten ---------------------- */
/* Mittig ueber der Leiste: links unten liegt die Kantenliste der Ansicht.
   Der Stapel nimmt Arbeitshinweis und Kontext-Tipp (Assistent) auf. */
.bm-hinweisstapel {
    position: absolute;
    left: 50%;
    bottom: calc(var(--ai-rand-buehne) + 76px);
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: min(460px, calc(100% - 2 * 260px - 4 * var(--ai-rand-buehne)));
    pointer-events: none;
}

.bm-hinweisstapel > * {
    pointer-events: auto;
}

.bm-editor-hinweis {
    max-width: 100%;
    margin: 0;
    padding: 10px 14px;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.bm-editor-hinweis[data-art="warnung"] {
    border-color: var(--ai-rolle-hinweis);
    color: var(--text-primary);
}

.bm-editor-hinweis[data-art="fehler"] {
    border-color: var(--ai-rolle-fehler);
    color: var(--text-primary);
}

.bm-pruefleiste {
    position: absolute;
    left: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-width: calc(100% - 2 * var(--ai-rand-buehne) - 220px);
    padding: 8px 10px 8px 14px;
    font-size: 0.8125rem;
}

.bm-geostatus,
.bm-preiszustand,
.bm-beispiel-offen {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 10px;
    border-radius: var(--ai-chip-radius);
    background: rgba(255, 255, 255, 0.06);
}

.bm-preiszustand[hidden],
.bm-beispiel-offen[hidden],
.bm-eingabe-ungueltig[hidden],
.bm-leisten-meldungen[hidden],
.bm-konflikt-laden[hidden],
.bm-anfrage-weiter[hidden] {
    display: none;
}

.bm-geostatus[data-status="verbindlich"],
.bm-preiszustand[data-zustand="aktuell"] {
    color: var(--ai-rolle-bestaetigung);
}

.bm-geostatus[data-status="vorlaeufig"],
.bm-preiszustand[data-zustand="pruefung_noetig"],
.bm-beispiel-offen {
    color: var(--ai-rolle-hinweis);
}

.bm-geostatus[data-status="ungueltig"],
.bm-eingabe-ungueltig {
    color: var(--ai-rolle-fehler);
}

.bm-preiszustand[data-zustand="veraltet"],
.bm-preiszustand[data-zustand="wird_berechnet"] {
    color: var(--text-secondary);
}

/* --- Ziehpfeil an der gewaehlten Lasche ------------------------------------ */
.bm-ziehpfeil {
    position: absolute;
    z-index: 5;
    width: var(--ai-touch);
    height: var(--ai-touch);
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--ai-rolle-auswahl);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    cursor: ns-resize;
    touch-action: none;
}

/* Eingerastet auf die Laenge einer anderen Lasche (26.09.2026). */
.bm-ziehpfeil.bm-eingerastet {
    border-color: #f6e760;
    box-shadow: 0 0 0 4px rgba(246, 231, 96, 0.45);
}

/* --- 2D-Flaeche, Abwicklung, Loeschen: schwebende Felder in der Mitte -------- */
.bm-flaeche2d,
.bm-abwicklung,
.bm-loeschen {
    position: absolute;
    left: 50%;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 80px);
    transform: translateX(-50%);
    z-index: 9;
    width: min(560px, calc(100% - 2 * var(--ai-panel-breite) - 4 * var(--ai-rand-buehne)));
    max-height: calc(100% - var(--ai-kopf-hoehe) - 240px);
    overflow: auto;
    padding: 14px;
}

.bm-loeschen {
    z-index: 12;
    width: min(420px, calc(100% - 2 * var(--ai-rand-buehne)));
}

.bm-flaeche2d[hidden],
.bm-abwicklung[hidden],
.bm-loeschen[hidden] {
    display: none;
}

.bm-f2d,
.bm-abw {
    display: block;
    width: 100%;
    max-height: 340px;
    background: var(--ai-buehne-bg);
    border-radius: var(--ai-knopf-radius);
}

.bm-f2d {
    cursor: crosshair;
}

.bm-f2d-umriss,
.bm-abw-kontur {
    fill: rgba(28, 33, 38, 0.08);
    stroke: var(--ai-linie);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bm-f2d-kante {
    fill: none;
    stroke: var(--ai-linie-hilfe);
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

.bm-f2d-loch {
    fill: var(--ai-buehne-bg);
    stroke: var(--ai-linie);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.bm-f2d-loch.bm-gewaehlt {
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 3;
}

.bm-f2d-loch.bm-ist-beispiel {
    stroke-dasharray: 3 2;
}

/* Loch mit Konflikt (Gewinde und Mutter im selben Loch, T12). */
.bm-f2d-loch.bm-konflikt {
    stroke: var(--ai-rolle-fehler);
    stroke-width: 3;
}

/* Bearbeitungen in der 2D-Ansicht (T12): Marke je Mitte. */
.bm-f2d-fm {
    fill: var(--ai-rolle-hinweis);
    stroke: var(--ai-linie);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.bm-f2d-fm.bm-gewaehlt {
    fill: var(--ai-rolle-auswahl);
}

.bm-f2d-fm.bm-ist-beispiel {
    stroke-dasharray: 3 2;
}

.bm-f2d-mass {
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
}

.bm-f2d-masstext {
    fill: var(--ai-rolle-auswahl);
}

.bm-abw-biegung {
    stroke: var(--ai-linie-hilfe);
    stroke-width: 1;
    stroke-dasharray: 6 3;
    vector-effect: non-scaling-stroke;
}

.bm-abw-freischnitt {
    fill: rgba(158, 39, 251, 0.25);
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bm-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.bm-legende li::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 0;
    margin-right: 6px;
    vertical-align: middle;
    border-top: 2px solid var(--ai-linie);
}

.bm-legende .bm-legende-biegung::before {
    border-top-style: dashed;
}

.bm-legende .bm-legende-freischnitt::before {
    height: 8px;
    border: 1px solid var(--ai-rolle-auswahl);
    background: rgba(158, 39, 251, 0.25);
}

.bm-abhaengige li {
    margin: 4px 0;
    padding-left: 10px;
    border-left: 3px solid var(--ai-rolle-fehler);
}

/* --- Skizze (T11): Ausschnitt oder Umriss auf einer Flaeche zeichnen ----------
   Ein grosses Schwebefeld ueber der Buehne; die Zeichenflaeche ist hell wie
   die Buehne, Werkzeuge und Felder wie im Editor. */
.bm-skizze-halter {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
    bottom: var(--ai-rand-buehne);
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    width: min(1180px, calc(100% - 2 * var(--ai-rand-buehne)));
}

.bm-skizze-halter[hidden] {
    display: none;
}

.bm-skizze {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 10px 14px;
    overflow: hidden;
}

.bm-skizze .bm-feld-titel {
    margin-bottom: 2px;
}

.bm-sk-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bm-sk-fangen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.bm-sk-fangen legend {
    float: left;
    margin-right: 6px;
    font-weight: 600;
}

.bm-sk-koerper {
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    min-height: 0;
}

.bm-sk-mitte {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 0;
}

.bm-sk-svg {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 160px;
    background: var(--ai-buehne-bg);
    border-radius: var(--ai-knopf-radius);
    cursor: crosshair;
    touch-action: none;
}

.bm-sk-svg.bm-sk-verschieben {
    cursor: grab;
}

.bm-sk-rasterlinie,
.bm-sk-schraffurlinie {
    fill: none;
    stroke: var(--ai-linie-hilfe);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
    opacity: 0.35;
}

.bm-sk-schraffurlinie {
    stroke: var(--ai-rolle-fehler);
    stroke-width: 1;
    opacity: 0.6;
}

.bm-sk-sperrzone,
.bm-sk-umriss-alt {
    stroke: var(--ai-linie-hilfe);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

.bm-sk-umriss-alt {
    fill: rgba(28, 33, 38, 0.04);
}

.bm-sk-flach {
    fill: rgba(28, 33, 38, 0.1);
    stroke: var(--ai-linie);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bm-sk-vorhanden {
    fill: var(--ai-buehne-bg);
    stroke: var(--ai-linie);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bm-sk-element {
    fill: none;
    stroke: var(--ai-linie);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.bm-sk-element.bm-sk-zu {
    fill: rgba(158, 39, 251, 0.12);
}

.bm-sk-element.bm-sk-offen {
    stroke-dasharray: 6 3;
}

/* Umriss mit Ausschnitten (Modus kontur): eine Form ganz im Umriss ist ein
   Loch - sie zeigt den Grund der Zeichenflaeche statt der Blechfarbe. */
.bm-sk-element.bm-sk-zu.bm-sk-loch {
    fill: var(--ai-buehne-bg);
}

.bm-sk-element.bm-sk-fehler {
    stroke: var(--ai-rolle-fehler);
}

.bm-sk-element.bm-gewaehlt,
.bm-sk-segment.bm-gewaehlt {
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 3;
}

.bm-sk-segment {
    fill: none;
    stroke: transparent;
    stroke-width: 8;
    vector-effect: non-scaling-stroke;
}

.bm-sk-element.bm-sk-rund {
    stroke: var(--ai-rolle-hinweis);
    stroke-dasharray: 2 3;
}

.bm-sk-segment.bm-sk-rund {
    stroke: var(--ai-rolle-hinweis);
    stroke-width: 2;
    stroke-dasharray: 2 3;
}

.bm-sk-endpunkt,
.bm-sk-klickpunkt {
    fill: #fff;
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.bm-sk-fangmarke {
    fill: none;
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.bm-sk-fangmarke.bm-sk-schliessen {
    fill: var(--ai-rolle-auswahl-weich);
    stroke-width: 3;
}

.bm-sk-gummiband {
    fill: none;
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
    vector-effect: non-scaling-stroke;
}

.bm-sk-live {
    min-height: 1.2em;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.bm-sk-masse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.bm-sk-masse[hidden] {
    display: none;
}

.bm-sk-masse .bm-feld-zeile {
    margin: 0;
}

.bm-sk-masse .bm-feld-name {
    flex: 0 0 auto;
}

.bm-sk-seite {
    flex: 0 0 240px;
    overflow-y: auto;
}

.bm-sk-eintraege {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.bm-sk-hilfe[data-art="warnung"] {
    color: var(--ai-rolle-fehler);
}

.bm-sk-meldungen {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.bm-sk-meldungen[hidden] {
    display: none;
}

.bm-sk-legende .bm-sk-legende-sperrzone::before {
    height: 8px;
    border: 1px dashed var(--ai-linie-hilfe);
    background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(200, 40, 40, 0.5) 3px 4px);
}

.bm-sk-legende .bm-sk-legende-rund::before {
    border-top: 2px dotted var(--ai-rolle-hinweis);
}

.bm-sk-fuss {
    justify-content: flex-end;
    margin: 0;
}

.bm-skizze button:focus-visible,
.bm-skizze input:focus-visible {
    outline: 3px solid var(--ai-rolle-auswahl);
    outline-offset: 2px;
}

/* --- Kleine Desktop-Hoehen (1280 x 720): nichts rollt die Seite ------------- */
@media (max-height: 760px) {
    .bm-merkmalsliste {
        max-height: calc(50% - var(--ai-kopf-hoehe));
    }

    .bm-ansicht-liste {
        max-height: 26%;
    }

    .bm-f2d,
    .bm-abw {
        max-height: 240px;
    }

    .bm-skizze {
        gap: 4px;
        padding: 8px 12px;
    }

    .bm-sk-seite {
        flex-basis: 220px;
    }
}

/* --- Schnellteile (T13): Galerie und Teil mit Massfeldern ------------------
   Das Bild traegt die Bemassung der Werkbank (pk-mass, pk-masslinie,
   pk-masspfeil aus ai-design.css) - hier steht nur das Drumherum. */
.ai-werkbank.ai-dialog-blech .bm-schnellteile-halter {
    overflow: auto;
}

.bm-schnellteile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(1000px, calc(100% - 2 * var(--ai-rand-buehne)));
    margin: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px) auto var(--ai-rand-buehne);
    color: var(--ai-text-auf-hell);
}

.bm-schnellteile-kopf[hidden],
.bm-schnellteil-galerie[hidden],
.bm-schnellteil[hidden],
.bm-schnellteil-befund[hidden],
.bm-schnellteil-leiste [hidden] {
    display: none;
}

.bm-schnellteil-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.bm-schnellteile .bm-schnellteil-galerie .bm-schnellteil-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
}

/* Ueberschrift und Hilfetext stehen auf der hellen Buehne. */
.bm-schnellteile-kopf .bm-feld-titel {
    color: var(--ai-text-auf-hell);
}

.bm-schnellteile-kopf .bm-feld-hilfe {
    color: var(--ai-text-auf-hell-sekundaer);
    font-size: 0.875rem;
}

.bm-schnellteil {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
}

.bm-schnellteil-buehne {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    border-radius: 10px;
    background: var(--ai-buehne-bg);
}

.bm-schnellteil-bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 440;
}

.bm-schnellteil-profil {
    fill: none;
    stroke: #1f2933;
    stroke-width: 10;
    stroke-linejoin: round;
    stroke-linecap: butt;
    opacity: 0.8;
}

.bm-schnellteil-loch {
    fill: var(--ai-buehne-bg, #ffffff);
    stroke: #1f2933;
    stroke-width: 1.25;
}

.bm-schnellteil-hilfskreis,
.bm-schnellteil-verdeckt {
    fill: none;
}

/* Leeres Feld: der Platzhalter ist nur ein Beispiel (gestrichelter Rahmen). */
.bm-schnellteil-mass.bm-schnellteil-leer {
    border-style: dashed;
}

.bm-schnellteil-kopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-end;
}

.bm-schnellteil-wahl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.bm-schnellteil-wahl select,
.bm-schnellteil-wahl input {
    min-height: var(--ai-touch);
    min-width: 150px;
}

.bm-schnellteil-schalter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ai-touch);
}

.bm-schnellteil-schalter input {
    width: 22px;
    height: 22px;
}

.bm-schnellteil-abweichungen,
.bm-schnellteil-vermerke,
.bm-schnellteil-befund {
    padding: 8px 12px;
    border-left: 4px solid var(--ai-rolle-hinweis);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.bm-schnellteil-abweichungen ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.bm-schnellteil-befund[data-status="verbindlich"] {
    border-left-color: var(--ai-rolle-bestaetigung);
}

.bm-schnellteil-befund[data-status="ungueltig"] {
    border-left-color: var(--ai-rolle-fehler, #e03131);
}

.bm-schnellteil-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.bm-schnellteil-leiste button,
.bm-schnellteil-zurueck {
    min-height: var(--ai-touch);
}

.bm-schnellteil-status:empty {
    display: none;
}

.bm-schnellteil-status[data-art="fehler"] {
    color: var(--ai-rolle-fehler, #e03131);
    font-weight: 600;
}

.bm-schnellteile button:focus-visible,
.bm-schnellteile input:focus-visible,
.bm-schnellteile select:focus-visible {
    outline: 3px solid var(--ai-rolle-auswahl);
    outline-offset: 2px;
}

@media (max-height: 760px) {
    .bm-schnellteil-buehne {
        max-width: 640px;
    }
}

/* ------------------------------------------------------------------------
   T14: Uebergabe "Mit Worten beschreiben" -> Editor, Vermerke am Element
   (gleiche Formensprache wie die Schnellteile: Feld, Rollenfarben, 44-px-Ziele)
   ------------------------------------------------------------------------ */
.bm-textweg {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}

.bm-textweg-vermerkkasten,
.bm-textweg-hinweiskasten,
.bm-textweg-meldungen {
    padding: 8px 12px;
    border-left: 4px solid var(--ai-rolle-hinweis);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.bm-textweg-hinweiskasten {
    border-left-color: var(--ai-rolle-fehler, #e03131);
}

.bm-textweg-vermerke,
.bm-textweg-hinweise {
    margin: 4px 0 0;
    padding-left: 18px;
}

.bm-textweg-kopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-end;
}

.bm-textweg-wahl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.bm-textweg-wahl select,
.bm-textweg-wahl input {
    min-height: var(--ai-touch);
    min-width: 150px;
}

.bm-textweg-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.bm-textweg-knoepfe button {
    min-height: var(--ai-touch);
}

.bm-textweg-editor:disabled {
    opacity: 0.45;
    cursor: default;
}

.bm-textweg-status:empty {
    display: none;
}

.bm-textweg button:focus-visible,
.bm-textweg input:focus-visible,
.bm-textweg select:focus-visible,
.bm-vermerk-passt:focus-visible {
    outline: 3px solid var(--ai-rolle-auswahl);
    outline-offset: 2px;
}

.bm-eintrag-vermerke {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.bm-vermerk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 4px 8px;
    border-left: 3px solid var(--ai-rolle-hinweis);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.bm-vermerk-passt {
    min-height: var(--ai-touch);
}

/* T14: Nicht Verstandenes aus der Beschreibung bleibt im Editor sichtbar. */
.bm-eintrag-hinweise {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.bm-hinweis-ki {
    padding: 4px 8px;
    border-left: 3px solid var(--ai-rolle-fehler, var(--ai-rolle-hinweis));
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* --- Mini-Assistent (T15): Tooltips, Kontext-Hinweis, Einfuehrung ----------
   Dieselben Schwebefelder und Rollenfarben wie die Werkbank. Bewegung nur
   ueber Klassen bm-anim-*; bei reduzierter Bewegung steht alles still. */
.bm-tip {
    position: absolute;
    z-index: 30;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 260px;
    padding: 8px 10px;
    transform: translateX(-50%);
    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);
    font-size: 0.8125rem;
    line-height: 1.35;
    pointer-events: none;
    animation: bm-tip-ein 120ms ease-out;
}

.bm-tip[hidden] {
    display: none;
}

.bm-tip-name {
    font-weight: 600;
}

.bm-tip-wirkung {
    color: var(--text-secondary);
}

.bm-tip-taste {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.bm-assistent {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 12px);
    right: var(--ai-rand-buehne);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* In der Befehlszeile: "?" und "Tipps" als eigenes kleines Feld am Ende. */
.bm-leisten > .bm-assistent {
    position: static;
    padding: 4px 8px 4px 4px;
    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);
}

.bm-kontext {
    margin: 0;
    padding: 8px 12px;
    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-rolle-hinweis);
    border-radius: var(--ai-feld-radius);
    box-shadow: var(--ai-feld-schatten);
    color: var(--text-primary);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.bm-kontext[hidden] {
    display: none;
}

.bm-einfuehrung {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 25;
    width: min(440px, calc(100% - 4 * var(--ai-rand-buehne)));
    padding: 16px 18px 14px;
    transform: translate(-50%, -50%);
    background: var(--ai-feld-bg-stark);
}

.bm-einfuehrung[hidden] {
    display: none;
}

.bm-einf-zaehler,
.bm-einf-ueberschrift {
    margin: 0 0 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.bm-einf-text {
    margin: 8px 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.bm-einf-bildhalter {
    display: flex;
    justify-content: center;
}

.bm-einf-bild {
    width: 180px;
    height: 112px;
}

.bm-einf-blech {
    fill: rgba(255, 255, 255, 0.14);
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.bm-einf-lasche {
    fill: var(--ai-rolle-auswahl-weich);
    stroke: var(--ai-rolle-auswahl);
}

.bm-einf-kante,
.bm-einf-zeiger,
.bm-einf-haken,
.bm-einf-ring,
.bm-einf-karte-rahmen {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bm-einf-kante {
    stroke: var(--ai-rolle-hinweis);
    stroke-width: 3;
}

.bm-einf-zeiger {
    stroke: var(--ai-rolle-hinweis);
    stroke-width: 2;
}

.bm-einf-loch {
    fill: var(--ai-feld-bg-stark);
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 2;
}

.bm-einf-ecke {
    fill: none;
    stroke: var(--ai-rolle-hinweis);
    stroke-width: 2.5;
}

.bm-einf-ring {
    stroke: var(--text-secondary);
    stroke-width: 2;
}

.bm-einf-haken {
    stroke: var(--ai-rolle-bestaetigung);
    stroke-width: 5;
    stroke-dasharray: 100;
}

.bm-einf-karte-rahmen {
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1.5;
}

.bm-einf-punkte {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 6px 0 10px;
    padding: 0;
    list-style: none;
}

.bm-einf-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ai-feld-rand);
}

.bm-einf-punkt.bm-aktiv {
    background: var(--ai-rolle-auswahl);
}

.bm-einf-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.bm-einf-ueberspringen {
    margin-right: auto;
}

.bm-assistent button:focus-visible,
.bm-einfuehrung button:focus-visible {
    outline: 3px solid var(--ai-rolle-auswahl);
    outline-offset: 2px;
}

.bm-anim-klappen {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: bm-klappen 2.4s ease-in-out infinite alternate;
}

.bm-anim-puls {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: bm-puls 1.6s ease-in-out infinite;
}

.bm-anim-zeichnen {
    animation: bm-zeichnen 1.8s ease-out infinite;
}

.bm-anim-einblenden {
    animation: bm-einblenden 2.4s ease-in-out infinite alternate;
}

@keyframes bm-tip-ein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bm-klappen {
    from { transform: scaleY(0.15); }
    to { transform: scaleY(1); }
}

@keyframes bm-puls {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

@keyframes bm-zeichnen {
    from { stroke-dashoffset: 100; }
    60%, to { stroke-dashoffset: 0; }
}

@keyframes bm-einblenden {
    from { transform: translateY(-10px); opacity: 0.2; }
    to { transform: translateY(18px); opacity: 1; }
}

/* Reduzierte Bewegung: keine Animation, das Bild zeigt den Endzustand. */
.bm-bewegung-reduziert .bm-anim,
.bm-bewegung-reduziert.bm-tip {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .bm-anim,
    .bm-tip {
        animation: none !important;
    }
}

/* --- Handy (T16): unter 768 px, Klasse bm-handy setzt der Editor -----------
   Gleiche Grenze wie die Werkbank (ai-werkbank.css, max-width 767px); die
   Klasse kommt aus derselben Medienabfrage (blechModulEditor.HANDY_MEDIA),
   damit Aussehen und Verhalten nie auseinanderlaufen. Die Buehne bleibt
   hinter allem; darueber eine Spalte: oben Werkzeuge, Hilfe und Hinweis,
   unten Liste bzw. Eigenschaften und die Pruef-/Preisleiste, ueber dem Fuss
   der Werkbank (Leiste am unteren Rand). Nichts rollt quer; Werkzeuge nur
   als Symbol mit 44-px-Ziel (Name im Tooltip, langes Druecken). Kein
   Knopf fuer Kanten oder Zeichnen (der Editor blendet sie aus). */
.bm-editor.bm-handy {
    --bm-handy-fuss: calc(68px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px) var(--ai-rand-buehne) var(--bm-handy-fuss);
}

.bm-editor.bm-handy .bm-werkzeugleiste,
.bm-editor.bm-handy .bm-assistent,
.bm-editor.bm-handy .bm-editor-hinweis,
.bm-editor.bm-handy .bm-merkmalsliste,
.bm-editor.bm-handy .bm-eigenschaften,
.bm-editor.bm-handy .bm-pruefleiste {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.bm-editor.bm-handy .bm-leisten,
.bm-editor.bm-handy .bm-hinweisstapel {
    display: contents;
}

.bm-editor.bm-handy .bm-hinweisstapel > .bm-kontext {
    order: 3;
    z-index: 6;
    /* Frueher Teil der waagerechten Hilfe-Zeile (flex 1 1 auto); in der
       Spalte des Handy-Editors wuerde er sonst in die Hoehe wachsen und
       die 3D-Ansicht verdecken. */
    flex: 0 0 auto;
    align-self: stretch;
}

.bm-editor.bm-handy .bm-werkzeugleiste {
    order: 1;
    align-self: flex-start;
    max-width: 100%;
    padding: 4px;
    scrollbar-width: none;
}

.bm-editor.bm-handy .bm-werkzeugleiste::-webkit-scrollbar {
    display: none;
}

.bm-editor.bm-handy .bm-bearbeitungsleiste {
    order: 2;
}

.bm-editor.bm-handy .bm-assistent {
    order: 3;
    z-index: 6;
    align-items: flex-start;
}

/* In der Befehlszeile gesammelt (24.09.2026): am Handy nur so breit wie
   "?" und "Tipps", damit das Teil dahinter sichtbar bleibt. */
.bm-editor.bm-handy .bm-leisten > .bm-assistent {
    align-self: flex-start;
    width: auto;
}

.bm-editor.bm-handy .bm-kontext {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    font-size: 0.75rem;
}

.bm-editor.bm-handy .bm-editor-hinweis {
    order: 4;
    z-index: 6;
    padding: 6px 10px;
    font-size: 0.75rem;
}

.bm-editor.bm-handy .bm-editor-hinweis:empty {
    display: none;
}

/* Liste und Eigenschaften unten, im Wechsel (Auswahl offen = Eigenschaften). */
.bm-editor.bm-handy .bm-merkmalsliste,
.bm-editor.bm-handy .bm-eigenschaften {
    order: 6;
    z-index: 6;
    min-height: 0;
    max-height: 34vh;
    padding: 10px 12px;
}

.bm-editor.bm-handy .bm-merkmalsliste {
    margin-top: auto;
}

.bm-editor.bm-handy.bm-auswahl-offen .bm-merkmalsliste {
    display: none;
}

.bm-editor.bm-handy.bm-auswahl-offen .bm-eigenschaften {
    margin-top: auto;
    max-height: 42vh;
}

.bm-editor.bm-handy .bm-handy-hinweis {
    margin: 0 0 6px;
    font-size: 0.75rem;
}

.bm-editor.bm-handy .bm-zur-liste {
    margin: 0 0 6px;
}

.bm-editor.bm-handy .bm-feld-name {
    flex-basis: 120px;
}

.bm-editor.bm-handy .bm-zahl {
    flex: 0 0 auto;
    width: 110px;
}

/* Die 3D-Ansicht fuellt den Raum ueber Liste und Leiste - dort sitzt das Teil. */
.bm-editor.bm-handy .bm-editor-buehne {
    bottom: calc(34vh + var(--bm-handy-fuss) + 64px);
}

.bm-editor.bm-handy .bm-pruefleiste {
    order: 7;
    z-index: 8;
    gap: 6px 8px;
    padding: 6px 8px;
}

.bm-editor.bm-handy .bm-preis-weiter,
.bm-editor.bm-handy .bm-anfrage-weiter {
    margin-left: auto;
}

/* Die Kantenliste der Ansicht entfaellt (keine freie Kantenwahl); Flaechen
   und Loecher stehen in der Merkmalsliste bzw. in der 2D-Ansicht. */
.bm-editor.bm-handy .bm-ansicht-liste {
    display: none;
}

.bm-editor.bm-handy .bm-ansicht-hinweis,
.bm-editor.bm-handy .bm-ansicht-vorschau {
    right: auto;
    left: var(--ai-rand-buehne);
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
}

.bm-editor.bm-handy .bm-ansicht-vorschau {
    top: auto;
    bottom: 4px;
}

.bm-editor.bm-handy .bm-ansicht-hinweis:empty {
    display: none;
}

.bm-editor.bm-handy .bm-ansicht-meldung {
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 180px);
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
}

/* Laenge per Zahl in den Eigenschaften; der Ziehpfeil laege oft am Rand. */
.bm-editor.bm-handy .bm-ziehpfeil {
    display: none;
}

/* Schwebende Felder (2D-Flaeche, Abwicklung, Loeschen, Einfuehrung): volle Breite. */
.bm-editor.bm-handy .bm-flaeche2d,
.bm-editor.bm-handy .bm-abwicklung,
.bm-editor.bm-handy .bm-loeschen {
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
    left: var(--ai-rand-buehne);
    right: var(--ai-rand-buehne);
    width: auto;
    max-height: 52%;
    transform: none;
    padding: 10px 12px;
}

.bm-editor.bm-handy .bm-f2d,
.bm-editor.bm-handy .bm-abw {
    max-height: 30vh;
}

.bm-editor.bm-handy .bm-einfuehrung {
    width: calc(100% - 2 * var(--ai-rand-buehne));
    padding: 12px 14px;
}

.bm-editor.bm-handy .bm-tip {
    max-width: calc(100% - 2 * var(--ai-rand-buehne));
}

/* Schnellteile und Uebergabe (ohne Editor): Massfelder am Bild mit
   44-px-Trefferflaeche, Auswahlfelder ueber die ganze Breite. */
@media (max-width: 767px) {
    .bm-schnellteile {
        margin-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .bm-schnellteil {
        padding: 10px;
    }

    .bm-schnellteil-galerie {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bm-schnellteil-mass::after {
        content: "";
        position: absolute;
        inset: -11px -4px;
    }

    .bm-schnellteil-kopfzeile .bm-schnellteil-wahl,
    .bm-textweg-kopfzeile .bm-textweg-wahl {
        flex: 1 1 140px;
    }

    .bm-schnellteil-wahl select,
    .bm-schnellteil-wahl input,
    .bm-textweg-wahl select,
    .bm-textweg-wahl input {
        min-width: 0;
        width: 100%;
    }

    .bm-schnellteil-leiste button,
    .bm-textweg-knoepfe button {
        flex: 1 1 auto;
    }

    /* Die Uebergabe steht unter dem Kopf und rollt senkrecht, nie quer. */
    .ai-werkbank.ai-dialog-blech .bm-textweg-halter {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .bm-textweg {
        margin: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px) var(--ai-rand-buehne) calc(80px + env(safe-area-inset-bottom));
        padding: 12px 14px;
    }
}

/* --- Skizze: Maße am Objekt (24.09.2026) -------------------------------------
   Maßlinien in der Zeichenfläche (SVG, Striche ohne Skalierung) und die
   Maßzahlen als Knöpfe in einer HTML-Ebene darüber – Schrift und Abstände in
   Bildschirmpixeln, bei jedem Zoom gleich groß. Die Klassen bm-mass-* kommen
   aus blechModulMasse.js und dürfen von anderen 2D-Ansichten mitbenutzt werden
   (Halter: position: relative, deckt die Zeichenfläche ganz ab). */
.bm-sk-leinwand {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 160px;
}

.bm-sk-leinwand > .bm-sk-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.bm-mass {
    --bm-mass-farbe: #2b5fad;
}

.bm-mass.bm-mass-dezent {
    --bm-mass-farbe: rgba(28, 33, 38, 0.4);
}

.bm-mass-linie {
    fill: none;
    stroke: var(--bm-mass-farbe);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bm-mass-pfeil {
    fill: var(--bm-mass-farbe);
    stroke: none;
}

.bm-mass-ebene {
    z-index: 1;
}

.bm-mass-zahl {
    position: absolute;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 5px;
    border: 1px solid #2b5fad;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(28, 33, 38, 0.14);
    color: #1c2126;
    font: 600 12px/18px system-ui, -apple-system, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
}

/* Größere Trefferfläche zum Tippen (Tablet), die Zahl selbst bleibt klein. */
.bm-mass-zahl::after {
    content: "";
    position: absolute;
    inset: -10px -6px;
}

.bm-mass-zahl:hover,
.bm-mass-zahl:focus-visible {
    background: #eef3fb;
    outline: none;
    box-shadow: 0 0 0 2px rgba(43, 95, 173, 0.4);
}

.bm-mass-zahl.bm-mass-dezent {
    border-color: transparent;
    background: rgba(247, 249, 252, 0.88);
    box-shadow: none;
    color: rgba(28, 33, 38, 0.6);
    font-weight: 500;
}

.bm-mass-zahl.bm-mass-dezent:hover,
.bm-mass-zahl.bm-mass-dezent:focus-visible {
    border-color: #2b5fad;
    color: #1c2126;
}

.bm-mass-zahl[hidden] {
    display: none;
}

/* Höhere Spezifität als input[type="text"] der Grundseite (main.css). */
.bm-mass-ebene input.bm-mass-eingabe[type="text"],
.bm-mass-ebene input.bm-mass-eingabe[type="text"]:focus {
    position: absolute;
    z-index: 2;
    width: 6.5em;
    max-width: none;
    height: 26px;
    min-height: 0;
    padding: 0 6px;
    border: 2px solid #2b5fad;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(28, 33, 38, 0.22);
    color: #1c2126;
    font: 600 13px/22px system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
    transition: none;
    outline: none;
}

.bm-mass-ebene input.bm-mass-eingabe[type="text"][aria-invalid="true"] {
    border-color: var(--ai-rolle-fehler, #e03131);
    box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.25);
}

/* „Fangen“ als kleine Beschriftung vor den Schaltern – nicht als große
   Überschrift (Bootstrap setzt legend auf 1,5 rem, volle Breite, eigene Zeile).
   float bleibt: nur eine umflossene legend ist Teil der Flex-Zeile. */
.bm-skizze .bm-sk-fangen legend {
    float: left;
    width: auto;
    margin: 0 4px 0 0;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: inherit;
    color: var(--text-secondary);
}

.bm-skizze .bm-sk-fangen legend + * {
    clear: none;
}

/* --- Fläche 2D: Ziehen und Fangen (24.09.2026) --------------------------------
   Merkmale in der 2D-Ansicht einer Fläche mit Maus/Finger verschieben,
   Fangpunkt mit Hilfslinien, Geisterbild beim Setzen, Maße zu einem
   wählbaren Bezug (Maßlinien/-zahlen aus blechModulMasse.js, bm-mass-*).
   Die Leinwand ist der Halter der Maßzahlen-Ebene. */
.bm-f2d-leinwand {
    position: relative;
}

.bm-f2d {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.bm-f2d .bm-ziehbar {
    cursor: move;
}

.bm-f2d.bm-zieht,
.bm-f2d.bm-zieht .bm-ziehbar {
    cursor: grabbing;
}

.bm-f2d.bm-zieht .bm-f2d-loch.bm-gewaehlt,
.bm-f2d.bm-zieht .bm-f2d-fm.bm-gewaehlt {
    stroke-dasharray: none;
    opacity: 0.85;
}

.bm-f2d-massgruppe {
    --bm-mass-farbe: var(--ai-rolle-auswahl, #9e27fb);
}

.bm-f2d-massgruppe.bm-mass-dezent {
    --bm-mass-farbe: rgba(28, 33, 38, 0.45);
}

/* Unsichtbare, breite Trefferfläche der Maßlinie: Klick wechselt den Bezug. */
.bm-f2d-masstreffer {
    fill: none;
    stroke: transparent;
    stroke-width: 14;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
    cursor: pointer;
}

.bm-f2d-masstreffer:hover {
    stroke: var(--ai-rolle-auswahl-weich, rgba(158, 39, 251, 0.16));
}

.bm-f2d-mittellinie {
    fill: none;
    stroke: var(--ai-rolle-auswahl, #9e27fb);
    stroke-width: 1;
    stroke-dasharray: 8 3 2 3;
    vector-effect: non-scaling-stroke;
    opacity: 0.6;
    pointer-events: none;
}

.bm-f2d-leinwand .bm-mass-zahl.bm-f2d-masstext {
    border-color: var(--ai-rolle-auswahl, #9e27fb);
}

.bm-f2d-fang,
.bm-f2d-fang * {
    pointer-events: none;
}

.bm-f2d-hilfslinie {
    stroke: #2b8a3e;
    stroke-width: 1;
    stroke-dasharray: 5 3;
    vector-effect: non-scaling-stroke;
}

.bm-f2d-fangpunkt {
    fill: rgba(43, 138, 62, 0.15);
    stroke: #2b8a3e;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.bm-f2d-fangtext,
.bm-f2d-geisttext {
    fill: #2b8a3e;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
}

.bm-f2d-geisttext {
    fill: rgba(28, 33, 38, 0.65);
}

.bm-f2d-geist {
    fill: rgba(158, 39, 251, 0.08);
    stroke: var(--ai-rolle-auswahl, #9e27fb);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
    vector-effect: non-scaling-stroke;
}

.bm-f2d-hilfe {
    margin: 6px 0 0;
}

/* Bezugswahl unter jedem Lagemaß (wie die Musterart). */
.bm-bezug-zeile {
    margin-top: -4px;
}

.bm-bezug-wahl {
    min-width: 0;
    max-width: 100%;
    min-height: var(--ai-touch);
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-knopf-radius);
    color: var(--text-primary);
    font: inherit;
}

/* Flaechen-2D-Ansicht und Skizze haben eigenen Hilfetext: der Kontext-Tipp
   des Assistenten laege sonst halb hinter dem Fenster (24.09.2026). */
.bm-editor:has(.bm-flaeche2d:not([hidden])) .bm-hinweisstapel > .bm-kontext,
.bm-editor:has(.bm-skizze-halter:not([hidden])) .bm-hinweisstapel > .bm-kontext {
    display: none;
}

/* ------------------------------------------------------------------------
   Grundblech frei zeichnen (25.09.2026, blechModulFrei.js)
   Die Skizze (Modus kontur) IST die Buehne: bildschirmfuellend zwischen Kopf
   und einer Leiste mit Werkstoff, Dicke, Stueckzahl und den Wegen weiter.
   Der Fuss der Huelle (Zurueck) entfaellt - "Anderes Teil waehlen" steht in
   der Leiste. Handy (< 768 px): Werkzeuge und Fangen quer wischbar, Liste
   und Legende ausgeblendet, das Blatt behaelt die Hoehe.
   ------------------------------------------------------------------------ */
.bm-frei {
    position: absolute;
    top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 8px);
    right: var(--ai-rand-buehne);
    bottom: var(--ai-rand-buehne);
    left: var(--ai-rand-buehne);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.bm-frei-zeichnung {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.bm-frei-zeichnung > .bm-skizze {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Die Masseingabe beim Zeichnen (Laenge/Winkel, Radius ...) liegt ueber der
   oberen linken Ecke der Zeichenflaeche statt darunter: Die Flaeche springt
   beim ersten Klick nicht (sonst verschoebe sich der naechste Punkt). */
.bm-frei .bm-sk-mitte {
    position: relative;
}

.bm-frei .bm-sk-masse {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 8px;
    border: 1px solid var(--ai-feld-rand);
    border-radius: var(--ai-knopf-radius, 8px);
    background: var(--ai-feld-bg-stark, rgba(20, 23, 27, 0.96));
    font-size: 0.75rem;
}

.bm-frei .bm-sk-masse .bm-zahl {
    width: 90px;
    min-height: 32px;
}

.bm-frei .bm-sk-masse button {
    min-height: 32px;
}

/* Desktop: Die Zeichenflaeche bekommt die ganze Hoehe; Hilfe, Legende und
   die Knoepfe der Skizze teilen sich die Zeilen darunter. */
@media (min-width: 768px) {
    .bm-frei .bm-skizze {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
        grid-template-areas:
            "kopf kopf"
            "werkzeuge werkzeuge"
            "fangen fangen"
            "koerper koerper"
            "hilfe fuss"
            "legende fuss"
            "meldungen meldungen";
        column-gap: 16px;
    }

    .bm-frei .bm-skizze > .bm-feld-kopf { grid-area: kopf; }
    .bm-frei .bm-skizze > .bm-sk-werkzeuge { grid-area: werkzeuge; }
    .bm-frei .bm-skizze > .bm-sk-fangen { grid-area: fangen; }
    .bm-frei .bm-skizze > .bm-sk-koerper { grid-area: koerper; }
    .bm-frei .bm-skizze > .bm-sk-hilfe { grid-area: hilfe; margin: 0; }
    .bm-frei .bm-skizze > .bm-sk-legende { grid-area: legende; margin: 0; }
    .bm-frei .bm-skizze > .bm-sk-meldungen { grid-area: meldungen; }
    .bm-frei .bm-skizze > .bm-sk-fuss { grid-area: fuss; align-self: center; }
}

.bm-frei-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    padding: 8px 12px;
}

.bm-frei-felder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}

.bm-frei-wahl {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.bm-frei-wahl select,
.bm-frei-wahl input {
    min-width: 140px;
    min-height: var(--ai-touch);
}

.bm-frei-wahl input.bm-frei-menge {
    width: 110px;
    min-width: 0;
}

.bm-frei-status {
    flex: 1 1 200px;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.bm-frei-status:empty {
    display: none;
}

.bm-frei-status[data-art="fehler"] {
    color: var(--ai-rolle-fehler, #e03131);
    font-weight: 600;
}

.bm-frei-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.bm-frei-knoepfe button {
    min-height: var(--ai-touch);
}

.bm-frei-knoepfe [hidden],
.bm-sk-fuss [hidden] {
    display: none;
}

.bm-frei-knoepfe button:disabled {
    opacity: 0.45;
    cursor: default;
}

.bm-frei button:focus-visible,
.bm-frei select:focus-visible,
.bm-frei input:focus-visible {
    outline: 3px solid var(--ai-rolle-auswahl);
    outline-offset: 2px;
}

/* --- Skizze: Hilfslinie, Fadenkreuz, Anzeige und Laengenfeld am Zeiger --- */
.bm-sk-hilfslinie {
    fill: none;
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
    opacity: 0.75;
}

.bm-sk-hilfslinie.bm-sk-ausrichtung {
    stroke: #2b5fad;
}

.bm-sk-fadenkreuz {
    fill: none;
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.bm-sk-zeigerinfo {
    position: absolute;
    z-index: 2;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(28, 33, 38, 0.88);
    color: #ffffff;
    font: 600 12px/18px system-ui, -apple-system, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

.bm-sk-zeigerinfo[hidden] {
    display: none;
}

/* --- Skizze: Radius/Fase an Ecken (26.09.2026) --- */
.bm-sk-eckpunkt {
    fill: #ffffff;
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.bm-sk-eckpunkt.bm-sk-eckpunkt-bearbeitet {
    fill: var(--ai-rolle-auswahl);
}

.bm-sk-eckpunkt.bm-gewaehlt {
    stroke-width: 3.5;
}

/* Duenn gestrichelt bis zur gedachten scharfen Ecke - dort gelten Laengen und Winkel. */
.bm-sk-virtuell {
    fill: none;
    stroke: var(--ai-rolle-auswahl);
    stroke-width: 1;
    stroke-dasharray: 1 3;
    vector-effect: non-scaling-stroke;
    opacity: 0.6;
    pointer-events: none;
}

.bm-sk-eckmenue {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 8px;
    width: 260px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    background: #1c2126;
    color: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: auto;
}

.bm-sk-eckmenue[hidden] {
    display: none;
}

.bm-sk-eckmenue-titel {
    margin: 0;
    font-weight: 700;
}

.bm-sk-eckmenue-arten {
    display: flex;
    gap: 4px;
}

.bm-sk-eckmenue .bm-sk-eckart {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 4px 6px;
    font-size: 13px;
}

.bm-sk-eckmenue .bm-sk-eckart[aria-checked="true"] {
    background: var(--ai-rolle-auswahl);
    border-color: var(--ai-rolle-auswahl);
    color: #ffffff;
}

.bm-sk-eckmenue .bm-feld-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bm-sk-eckmenue .bm-feld-zeile[hidden] {
    display: none;
}

.bm-sk-eckmenue .bm-zahl {
    width: 90px;
}

.bm-sk-eckmenue-fehler {
    margin: 0;
    color: #ffb4a9;
    font-size: 12px;
}

.bm-sk-eckmenue-fehler[hidden] {
    display: none;
}

.bm-sk-eckmenue .bm-aktionen {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
}

.bm-sk-eckmenue .bm-aktionen button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 4px 10px;
    font-size: 13px;
}

.bm-sk-tipp {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 2px solid #2b5fad;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(28, 33, 38, 0.22);
}

/* Hoehere Spezifitaet als input[type="text"] der Grundseite (main.css). */
.bm-sk-leinwand .bm-sk-tipp input.bm-sk-tipp-feld[type="text"],
.bm-sk-leinwand .bm-sk-tipp input.bm-sk-tipp-feld[type="text"]:focus {
    width: 5.5em;
    max-width: none;
    height: 26px;
    min-height: 0;
    padding: 0 6px;
    border: 1px solid #c9d2de;
    border-radius: 4px;
    background: #ffffff;
    color: #1c2126;
    font: 600 13px/22px system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
    transition: none;
    outline: none;
}

.bm-sk-leinwand .bm-sk-tipp input.bm-sk-tipp-feld[type="text"]:focus {
    border-color: #2b5fad;
}

.bm-sk-leinwand .bm-sk-tipp input.bm-sk-tipp-feld[aria-invalid="true"] {
    border-color: var(--ai-rolle-fehler, #e03131);
}

.bm-sk-tipp-trenner {
    color: #1c2126;
    font-weight: 600;
}

.bm-sk-fang-winkel {
    font-weight: 600;
}

@media (max-height: 760px) {
    .bm-frei {
        gap: 6px;
    }

    .bm-frei-leiste {
        padding: 6px 10px;
    }
}

@media (max-width: 767px) {
    /* Der Kopf der Huelle bricht am Handy in zwei Zeilen um - darunter beginnen. */
    .bm-frei {
        top: calc(var(--ai-rand-buehne) + 2 * var(--ai-kopf-hoehe) + 30px);
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: 8px;
        gap: 6px;
    }

    .bm-frei .bm-skizze {
        padding: 8px;
        gap: 4px;
    }

    .bm-frei .bm-skizze > .bm-feld-kopf,
    .bm-frei .bm-sk-seite,
    .bm-frei .bm-sk-legende,
    .bm-frei .bm-sk-live {
        display: none;
    }

    .bm-frei .bm-sk-werkzeuge {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bm-frei .bm-sk-werkzeuge::-webkit-scrollbar {
        display: none;
    }

    /* Am Finger bleibt nur der Schalter "Winkel 15°" (die uebrigen Fangarten
       wirken weiter, sie sind hier nur nicht umschaltbar). */
    .bm-frei .bm-sk-fang:not(.bm-sk-fang-winkel) {
        display: none;
    }

    .bm-frei .bm-sk-werkzeug {
        flex: 0 0 auto;
    }

    .bm-frei .bm-sk-fangen legend {
        display: none;
    }

    .bm-frei .bm-sk-fang {
        flex: 0 0 auto;
    }

    .bm-frei .bm-sk-leinwand {
        min-height: 200px;
    }

    .bm-frei .bm-sk-hilfe {
        margin: 0;
        font-size: 0.75rem;
    }

    /* Rueckgaengig, Alles zeigen, Umriss schliessen in einer Zeile - die
       Zeichenflaeche springt nicht, wenn "Umriss schliessen" erscheint. */
    .bm-frei .bm-sk-fuss {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .bm-frei .bm-sk-fuss button {
        flex: 1 1 0;
        min-width: 0;
        padding: 4px 6px;
        font-size: 0.8125rem;
        line-height: 1.2;
        white-space: normal;
    }

    .bm-frei-leiste {
        padding: 8px;
        gap: 6px;
    }

    .bm-frei-felder {
        width: 100%;
        flex-wrap: nowrap;
    }

    .bm-frei-wahl {
        flex: 1 1 0;
        min-width: 0;
    }

    .bm-frei-wahl select,
    .bm-frei-wahl input,
    .bm-frei-wahl input.bm-frei-menge {
        width: 100%;
        min-width: 0;
    }

    /* Ein Satz nur, wenn etwas schiefging - den naechsten Schritt nennt am
       Handy die Hilfezeile der Skizze. */
    .bm-frei-status[data-art="info"] {
        display: none;
    }

    .bm-frei-knoepfe {
        flex-wrap: nowrap;
        width: 100%;
        margin-left: 0;
    }

    .bm-frei-knoepfe button {
        flex: 1 1 0;
        min-width: 0;
        padding: 4px 6px;
        font-size: 0.8125rem;
        line-height: 1.2;
        white-space: normal;
    }
}

/* --- Freies Zeichnen am Handy: im Bildschirm bleiben (25.09.2026) ---------
   Befund iPhone (Safari, 390 px): (1) Die Leinwand hatte eine Mindesthoehe,
   das Feld aber eine feste Hoehe - die Leinwand ragte ueber Hilfe und rote
   Meldungen. Jetzt steht alles im Fluss, das Feld rollt senkrecht, die
   Leinwand hat eine feste Hoehe. (2) Kopf in einer Zeile und "i"-Feld /
   Rueckfrage im Bild: ai-werkbank.css (Handy). (3) Keine Seitenzoom-Geste
   im Feld (touch-action), Eingabefelder 16 px (iOS zoomt sonst beim Fokus
   hinein). */
.bm-sk-leinwand,
.bm-sk-leinwand * {
    touch-action: none;
}

@media (max-width: 767px) {
    .bm-frei {
        /* Das rechte Kopf-Feld ist mit Rahmen und Innenabstand gut 10 px
           hoeher als --ai-kopf-hoehe: erst darunter beginnen. */
        top: calc(var(--ai-rand-buehne) + var(--ai-kopf-hoehe) + 16px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .bm-frei::-webkit-scrollbar {
        display: none;
    }

    .bm-frei-zeichnung {
        flex: 0 0 auto;
    }

    .bm-frei .bm-skizze {
        height: auto;
        overflow: visible;
    }

    .bm-frei .bm-sk-koerper {
        flex: 0 0 auto;
    }

    .bm-frei .bm-sk-leinwand {
        flex: 0 0 auto;
        height: clamp(220px, calc(100vh - 440px), 70vh);
        height: clamp(220px, calc(100dvh - 440px), 70dvh);
        min-height: 0;
    }

    .bm-frei .bm-sk-meldungen,
    .bm-frei .bm-sk-hilfe,
    .bm-frei .bm-sk-fuss,
    .bm-frei-leiste {
        flex: 0 0 auto;
    }

    .bm-frei-wahl select,
    .bm-frei-wahl input,
    .bm-frei-wahl input.bm-frei-menge,
    .bm-frei .bm-mass-eingabe,
    .bm-frei .bm-sk-masse input,
    .bm-sk-leinwand .bm-sk-tipp input.bm-sk-tipp-feld[type="text"],
    .bm-sk-leinwand .bm-sk-tipp input.bm-sk-tipp-feld[type="text"]:focus {
        font-size: 16px;
    }

    /* Tooltips der Werkzeuge: hoechstens Bildschirmbreite (die Lage klemmt
       tippsAnbringen zusaetzlich an den Bildschirmrand). */
    .bm-tip {
        max-width: min(260px, calc(100vw - 32px));
    }
}

/* Ecke (27.09.2026, Christian: "zu unuebersichtlich"): Gruppen mit Ueberschrift
   darueber, Stoss als Liste, Freischnitt als Bildknoepfe, Schweissen als Schalter. */
.bm-ecke-gruppe {
    margin: 14px 0 4px;
}

.bm-ecke-gruppe-name {
    margin-bottom: 8px;
    color: var(--text-secondary, #a8adb4);
    font-size: 0.9em;
    font-weight: 600;
}

.bm-ecke-optionen {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bm-ecke-optionen .bm-stossart {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

/* Auswahlpunkt wie ein Optionsfeld */
.bm-ecke-optionen .bm-stossart::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    box-sizing: border-box;
}

.bm-ecke-optionen .bm-stossart[aria-pressed="true"]::before {
    border-color: var(--ai-rolle-auswahl, #9e27fb);
    background: radial-gradient(circle, var(--ai-rolle-auswahl, #9e27fb) 0 3px, transparent 3.5px);
}

.bm-ecke-segmente {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.bm-ecke-segmente .bm-eckfreischnitt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 8px 4px;
    font-size: 0.88em;
}

.bm-ecke-segmente .bm-eckfreischnitt .bm-icon {
    width: 26px;
    height: 26px;
}

.bm-ecke-segment-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-eckfreischnitt[aria-pressed="true"] {
    background: var(--ai-rolle-auswahl-weich, rgba(158, 39, 251, 0.2));
    border-color: var(--ai-rolle-auswahl, #9e27fb);
}

.bm-ecke-alle {
    width: 100%;
    margin-top: 8px;
}

/* Schalter: ganze Zeile klickbar, Zustand rechts */
.bm-ecke-verschweissen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    text-align: left;
}

.bm-ecke-verschweissen[aria-pressed="true"] {
    background: transparent;
}

.bm-schalter {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.15s;
}

.bm-schalter::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}

.bm-ecke-verschweissen[aria-pressed="true"] .bm-schalter {
    background: var(--ai-rolle-auswahl, #9e27fb);
}

.bm-ecke-verschweissen[aria-pressed="true"] .bm-schalter::after {
    transform: translateX(16px);
}

.bm-ecke-ende {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--bm-trenner, rgba(255, 255, 255, 0.08));
}

.bm-ecke-ende .bm-ecke-oeffnen {
    width: 100%;
    color: var(--ai-rolle-fehler, #ff8a80);
}

@media (prefers-reduced-motion: reduce) {
    .bm-schalter,
    .bm-schalter::after {
        transition: none;
    }
}

/* Frei gewaehlter Bezugspunkt der Lagemasse (27.09.2026). */
.bm-f2d-bezugpunkt {
    fill: none;
    stroke: var(--bm-mass-x, #7a1fc7);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}