/*
  Blech-Assistent · Knopf- und Bediensystem (Entwurf 28.09.2026)

  Laden: als LETZTES Stylesheet in base.html (nach blech-werkbank.css).
  Wirkung: ausschließlich innerhalb von #ai-dialog.ai-werkbank. Die ID im
  Selektor schlägt jede reine Klassenregel der sechs älteren Stylesheets
  (Spezifität 1-x-x) – ohne !important und ohne Reihenfolge-Tricks.
  .btn-main im Kalkulator/Portal bleibt unberührt.

  Weg: ADDITIV. Die Basisklasse .bm-knopf + genau EIN Varianten-Modifikator
  wird zusätzlich an die vorhandenen Elemente gehängt (IDs und alte Klassen
  bleiben für die DOM-Tests). Zuordnung Knopf für Knopf: HANDOFF.md.

  Varianten (5):  --haupt  --sekundaer  --werkzeug  --leise  --gefahr
  Form:           --icon   (quadratisch, nur mit aria-label + title)
  Größen (3):     --klein  (normal = ohne Modifikator)  Werkzeug-Maß kommt mit --werkzeug
  Eigene Bausteine: .bm-chip (Auswahl), .bm-kachel (Wege + Schnellteile)

  Farbregel:  Gelb (CTA) = „weiter“, nur .bm-knopf--haupt.
              Violett    = „ausgewählt / aktiv“, nur Zustände (aria-pressed,
              aria-current, aria-checked, aria-selected) und Fokus.
  Radius-Satz: 10 px Knöpfe · 999 px Chips · 14 px Kacheln (außen) / 10 px (Bild innen).
*/

#ai-dialog.ai-werkbank {
    /* Form */
    --bm-knopf-radius: 10px;
    --bm-knopf-radius-chip: 999px;
    --bm-knopf-radius-kachel: 14px;
    /* Größen */
    --bm-knopf-h-klein: 36px;
    --bm-knopf-h: 44px;
    --bm-knopf-h-werkzeug: 46px;
    --bm-knopf-w-werkzeug: 62px;
    --bm-knopf-touch: 44px;
    --bm-knopf-px-klein: 12px;
    --bm-knopf-px: 18px;
    --bm-knopf-gap: 8px;
    --bm-knopf-icon: 18px;
    --bm-knopf-icon-werkzeug: 20px;
    --bm-knopf-t-klein: 13px;
    --bm-knopf-t: 14px;
    --bm-knopf-t-werkzeug: 11px;
    --bm-knopf-schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Haupt – feste Werte, NICHT var(--cta-gradient): unabhängig vom Seitenthema */
    --bm-knopf-cta: linear-gradient(100deg, #f6e760 0%, #f2dd68 45%, #ce90a6 115%);
    --bm-knopf-cta-text: #171121;
    --bm-knopf-cta-tiefe: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(23, 17, 33, 0.18), 0 1px 2px rgba(0, 0, 0, 0.35);
    --bm-knopf-cta-druck: inset 0 2px 4px rgba(23, 17, 33, 0.28);
    /* Auswahl */
    --bm-knopf-auswahl: #9e27fb;
    --bm-knopf-auswahl-weich: rgba(158, 39, 251, 0.22);
    --bm-knopf-auswahl-rand: #b25cf7;
    --bm-knopf-auswahl-hell: #7a1fc7;            /* auf der Bühne: Weiß darauf 7,6:1 */
    --bm-knopf-fokus: #9e27fb;
    /* Dunkle Zonen */
    --bm-knopf-text: #ffffff;
    --bm-knopf-text-2: #d9dce0;                  /* 13,4:1 auf #14171b */
    --bm-knopf-text-aus: #8d939b;                /* gesperrt, 5,1:1 auf #14171b */
    --bm-knopf-rand: rgba(255, 255, 255, 0.24);
    --bm-knopf-rand-hover: rgba(255, 255, 255, 0.40);
    --bm-knopf-flaeche-hover: rgba(255, 255, 255, 0.07);
    --bm-knopf-flaeche-druck: rgba(255, 255, 255, 0.12);
    --bm-knopf-gesperrt-bg: #25282e;
    --bm-knopf-gesperrt-text: #b4b4b4;           /* 7,1:1 auf #25282e */
    --bm-knopf-gesperrt-rand: rgba(255, 255, 255, 0.14);
    /* Gefahr */
    --bm-knopf-gefahr: #ff8a9b;                  /* 8,0:1 auf #14171b */
    --bm-knopf-gefahr-flaeche: rgba(245, 87, 108, 0.12);
    --bm-knopf-gefahr-voll: #c9304a;             /* Weiß darauf 5,3:1 */
    --bm-knopf-gefahr-hell: #b3203a;             /* Text auf #f7f8fa 5,9:1 */
    /* Helle Bühne */
    --bm-knopf-hell-bg: #ffffff;
    --bm-knopf-hell-text: #1c2126;
    --bm-knopf-hell-text-aus: #5b6470;           /* 5,9:1 auf #fff */
    --bm-knopf-hell-rand: rgba(28, 33, 38, 0.22);
    --bm-knopf-hell-hover: #eef0f3;
    --bm-knopf-hell-druck: #e2e5ea;
    /* Bewegung */
    --bm-knopf-dauer: var(--ai-dauer, 160ms);
}

/* ------------------------------------------------------------------ Basis */
/* display steht OHNE ID-Gewicht (:where): Wo eine aeltere Datei einen Knopf
   per Klasse ausblendet (Menue "..." am Desktop, Fangarten am Handy ...),
   gewinnt dieses display: none weiter. Alles andere mit ID. (Einbau 28.09.) */
:where(#ai-dialog.ai-werkbank) .bm-knopf { display: inline-flex; }
:where(#ai-dialog.ai-werkbank) :is(.bm-knopf, .bm-chip, .bm-kachel)[hidden] { display: none; }
#ai-dialog.ai-werkbank .bm-knopf {
    position: relative;
    align-items: center;
    justify-content: center;
    gap: var(--bm-knopf-gap);
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--bm-knopf-h);
    height: auto;
    margin: 0;
    padding: 0 var(--bm-knopf-px);
    border: 1px solid transparent;
    border-radius: var(--bm-knopf-radius);
    background: transparent;
    box-shadow: none;
    color: var(--bm-knopf-text);
    font: 500 var(--bm-knopf-t)/1.2 var(--bm-knopf-schrift);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: none;
    filter: none;
    opacity: 1;
    overflow: visible;
    transition: background-color var(--bm-knopf-dauer) ease, border-color var(--bm-knopf-dauer) ease,
        color var(--bm-knopf-dauer) ease, box-shadow var(--bm-knopf-dauer) ease;
}
/* Altlasten neutralisieren: Glanz-Streifen und Hover-Hub aus main.css (.btn-main) */
#ai-dialog.ai-werkbank .bm-knopf::before { content: none; }
#ai-dialog.ai-werkbank .bm-knopf:hover,
#ai-dialog.ai-werkbank .bm-knopf:active { transform: none; }

#ai-dialog.ai-werkbank .bm-knopf__icon {
    flex: none;
    width: var(--bm-knopf-icon);
    height: var(--bm-knopf-icon);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#ai-dialog.ai-werkbank .bm-knopf__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;   /* Überlänge: nie umbrechen; voller Text steht im title */
}
#ai-dialog.ai-werkbank .bm-knopf:focus { outline: none; }
#ai-dialog.ai-werkbank .bm-knopf:focus-visible {
    outline: 3px solid var(--bm-knopf-fokus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ Größen */
#ai-dialog.ai-werkbank .bm-knopf--klein {
    min-height: var(--bm-knopf-h-klein);
    padding: 0 var(--bm-knopf-px-klein);
    gap: 6px;
    font-size: var(--bm-knopf-t-klein);
}
#ai-dialog.ai-werkbank .bm-knopf--klein .bm-knopf__icon { width: 16px; height: 16px; }
#ai-dialog.ai-werkbank .bm-knopf--breit { width: 100%; justify-content: flex-start; }

/* ------------------------------------------------------------------ 1 Haupt */
#ai-dialog.ai-werkbank .bm-knopf--haupt {
    padding: 0 16px 0 var(--bm-knopf-px);
    border: 0;
    background: var(--bm-knopf-cta);
    box-shadow: var(--bm-knopf-cta-tiefe);
    color: var(--bm-knopf-cta-text);
    font-weight: 600;
}
#ai-dialog.ai-werkbank .bm-knopf--haupt::after {
    /* Aufhellung beim Überfahren als Schicht – der Verlauf selbst bleibt */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bm-knopf-dauer) ease;
}
#ai-dialog.ai-werkbank .bm-knopf--haupt:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    box-shadow: var(--bm-knopf-cta-druck);
}
#ai-dialog.ai-werkbank .bm-knopf--haupt:active:not(:disabled):not([aria-disabled="true"])::after { opacity: 0; }

/* ------------------------------------------------------------------ 2 Sekundär */
#ai-dialog.ai-werkbank .bm-knopf--sekundaer {
    border-color: var(--bm-knopf-rand);
    color: var(--bm-knopf-text);
}
#ai-dialog.ai-werkbank .bm-knopf--sekundaer:active:not(:disabled):not([aria-disabled="true"]) {
    background: var(--bm-knopf-flaeche-druck);
}

/* ------------------------------------------------------------------ 3 Werkzeug */
#ai-dialog.ai-werkbank .bm-knopf--werkzeug {
    flex-direction: column;
    gap: 3px;
    min-width: var(--bm-knopf-w-werkzeug);
    min-height: var(--bm-knopf-h-werkzeug);
    padding: 3px 6px;
    color: var(--bm-knopf-text-2);
    font-size: var(--bm-knopf-t-werkzeug);
    font-weight: 500;
    line-height: 1.15;
}
#ai-dialog.ai-werkbank .bm-knopf--werkzeug .bm-knopf__icon,
#ai-dialog.ai-werkbank .bm-knopf--werkzeug .bm-icon {
    width: var(--bm-knopf-icon-werkzeug);
    height: var(--bm-knopf-icon-werkzeug);
}
#ai-dialog.ai-werkbank .bm-knopf--werkzeug[aria-pressed="true"] {
    border-color: var(--bm-knopf-auswahl-rand);
    background: var(--bm-knopf-auswahl-weich);
    color: var(--bm-knopf-text);
}
#ai-dialog.ai-werkbank .bm-knopf--werkzeug:active:not(:disabled):not([aria-disabled="true"]) {
    background: var(--bm-knopf-flaeche-druck);
}
#ai-dialog.ai-werkbank .bm-knopf--werkzeug[aria-pressed="true"]:active { background: rgba(158, 39, 251, 0.32); }
/* Werkzeug waagerecht (Moduswechsel-Leiste ab data-breite xl, Skizze-Aktionen) */
#ai-dialog.ai-werkbank .bm-knopf--werkzeug.bm-knopf--zeile {
    flex-direction: row;
    gap: 7px;
    min-width: 0;
    padding: 0 10px;
    font-size: var(--bm-knopf-t-klein);
}

/* ------------------------------------------------------------------ 4 Leise */
#ai-dialog.ai-werkbank .bm-knopf--leise {
    padding: 0 10px;
    color: var(--bm-knopf-text-2);
}
#ai-dialog.ai-werkbank .bm-knopf--leise:active:not(:disabled):not([aria-disabled="true"]) {
    background: var(--bm-knopf-flaeche-druck);
}
/* Listeneintrag = leise Zeile; Auswahl violett (aria-current) */
#ai-dialog.ai-werkbank .bm-knopf--leise.bm-knopf--breit { padding: 6px 10px; text-align: left; white-space: normal; }
#ai-dialog.ai-werkbank .bm-knopf--leise[aria-current="true"],
#ai-dialog.ai-werkbank .bm-knopf--leise[aria-current="page"] {
    border-color: var(--bm-knopf-auswahl-rand);
    background: var(--bm-knopf-auswahl-weich);
    color: var(--bm-knopf-text);
}

/* ------------------------------------------------------------------ 5 Gefahr */
#ai-dialog.ai-werkbank .bm-knopf--gefahr {
    padding: 0 10px;
    color: var(--bm-knopf-gefahr);
}
/* Nur in der Rückfrage gefüllt */
#ai-dialog.ai-werkbank :is(.bm-rueckfrage, .ai-neu-aktionen, [role="alertdialog"]) .bm-knopf--gefahr {
    padding: 0 var(--bm-knopf-px);
    border-color: transparent;
    background: var(--bm-knopf-gefahr-voll);
    color: #ffffff;
    font-weight: 600;
}
#ai-dialog.ai-werkbank :is(.bm-rueckfrage, .ai-neu-aktionen, [role="alertdialog"]) .bm-knopf--gefahr:active { background: #b3203a; }

/* ------------------------------------------------------------------ Icon-Knopf */
#ai-dialog.ai-werkbank .bm-knopf--icon {
    width: var(--bm-knopf-h);
    min-width: var(--bm-knopf-h);
    height: var(--bm-knopf-h);
    padding: 0;
}
#ai-dialog.ai-werkbank .bm-knopf--icon.bm-knopf--klein {
    width: var(--bm-knopf-h-klein);
    min-width: var(--bm-knopf-h-klein);
    height: var(--bm-knopf-h-klein);
}
#ai-dialog.ai-werkbank .bm-knopf--icon .bm-knopf__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ Hover (nur mit Maus) */
@media (hover: hover) and (pointer: fine) {
    #ai-dialog.ai-werkbank .bm-knopf--haupt:is(:hover, [data-zustand="hover"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])::after { opacity: 0.14; }
    #ai-dialog.ai-werkbank .bm-knopf--sekundaer:is(:hover, [data-zustand="hover"]):not(:disabled):not([aria-disabled="true"]) {
        border-color: var(--bm-knopf-rand-hover);
        background: var(--bm-knopf-flaeche-hover);
    }
    #ai-dialog.ai-werkbank :is(.bm-knopf--werkzeug, .bm-knopf--leise):is(:hover, [data-zustand="hover"]):not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):not([aria-current="true"]) {
        background: var(--bm-knopf-flaeche-hover);
        color: var(--bm-knopf-text);
    }
    #ai-dialog.ai-werkbank .bm-knopf--gefahr:is(:hover, [data-zustand="hover"]):not(:disabled):not([aria-disabled="true"]) {
        background: var(--bm-knopf-gefahr-flaeche);
    }
    #ai-dialog.ai-werkbank :is(.bm-rueckfrage, .ai-neu-aktionen, [role="alertdialog"]) .bm-knopf--gefahr:is(:hover, [data-zustand="hover"]) { background: #d63a54; }
}
/* Nur für knoepfe.html: Zustände sichtbar erzwingen (im Produkt nie gesetzt) */
#ai-dialog.ai-werkbank .bm-knopf[data-zustand="fokus"] { outline: 3px solid var(--bm-knopf-fokus); outline-offset: 2px; }
#ai-dialog.ai-werkbank .bm-knopf--haupt[data-zustand="druck"] { box-shadow: var(--bm-knopf-cta-druck); }
#ai-dialog.ai-werkbank :is(.bm-knopf--sekundaer, .bm-knopf--werkzeug, .bm-knopf--leise)[data-zustand="druck"] { background: var(--bm-knopf-flaeche-druck); }
#ai-dialog.ai-werkbank .bm-knopf--gefahr[data-zustand="druck"] { background: rgba(245, 87, 108, 0.2); }

/* ------------------------------------------------------------------ Gesperrt
   Bevorzugt aria-disabled="true" statt disabled: der Knopf bleibt fokussierbar,
   zeigt den Grund (title + aria-describedby → Hinweiszeile) und JS kann beim
   Antippen zur fehlenden Eingabe springen. Keine Deckkraft – Text bleibt lesbar. */
#ai-dialog.ai-werkbank .bm-knopf:is(:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
    color: var(--bm-knopf-text-aus);
    box-shadow: none;
}
#ai-dialog.ai-werkbank .bm-knopf--sekundaer:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--bm-knopf-gesperrt-rand);
    border-style: dashed;
}
#ai-dialog.ai-werkbank .bm-knopf--haupt:is(:disabled, [aria-disabled="true"]) {
    background: var(--bm-knopf-gesperrt-bg);
    box-shadow: inset 0 0 0 1px var(--bm-knopf-gesperrt-rand);
    color: var(--bm-knopf-gesperrt-text);
}
/* Schloss ersetzt den Pfeil am selben Platz – Breite bleibt gleich */
#ai-dialog.ai-werkbank .bm-knopf--haupt:is(:disabled, [aria-disabled="true"]) .bm-knopf__icon--nach { visibility: hidden; }
#ai-dialog.ai-werkbank .bm-knopf--haupt:is(:disabled, [aria-disabled="true"]):has(.bm-knopf__icon--nach)::after {
    opacity: 1;
    inset: auto;
    top: 50%;
    right: 16px;
    width: var(--bm-knopf-icon);
    height: var(--bm-knopf-icon);
    margin-top: calc(var(--bm-knopf-icon) / -2);
    border-radius: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
#ai-dialog.ai-werkbank .bm-knopf--werkzeug:is(:disabled, [aria-disabled="true"]) { color: var(--bm-knopf-text-aus); }

/* ------------------------------------------------------------------ Lädt
   aria-busy="true": Text bleibt, der Kreisel sitzt auf dem Platz des Icons
   (Pfeil hinten, sonst Icon vorne). Knöpfe ohne Icon: JS friert vorher die
   Breite ein (style.minWidth = offsetWidth + 'px'). */
#ai-dialog.ai-werkbank .bm-knopf[aria-busy="true"] { cursor: progress; }
#ai-dialog.ai-werkbank .bm-knopf[aria-busy="true"] .bm-knopf__icon--nach,
#ai-dialog.ai-werkbank .bm-knopf[aria-busy="true"]:not(:has(.bm-knopf__icon--nach)) .bm-knopf__icon:first-child { visibility: hidden; }
#ai-dialog.ai-werkbank .bm-knopf[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    background: none;
    opacity: 1;
    inset: auto;
    animation: bm-knopf-dreh 0.8s linear infinite;
}
#ai-dialog.ai-werkbank .bm-knopf[aria-busy="true"]:has(.bm-knopf__icon--nach)::after { top: 50%; right: 17px; }
#ai-dialog.ai-werkbank .bm-knopf[aria-busy="true"]:not(:has(.bm-knopf__icon--nach))::after { top: 50%; left: calc(var(--bm-knopf-px) + 1px); }
#ai-dialog.ai-werkbank .bm-knopf--haupt[aria-busy="true"] { box-shadow: var(--bm-knopf-cta-tiefe); }
@keyframes bm-knopf-dreh { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ Fehler (nur Zahl-/Chipfelder und Vorschlag) */
#ai-dialog.ai-werkbank .bm-knopf[aria-invalid="true"],
#ai-dialog.ai-werkbank .bm-chip[aria-invalid="true"] { border-color: #f5576c; }

/* ------------------------------------------------------------------ Auf der hellen Bühne */
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf--sekundaer,
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf--icon {
    border-color: var(--bm-knopf-hell-rand);
    background: var(--bm-knopf-hell-bg);
    color: var(--bm-knopf-hell-text);
    box-shadow: 0 1px 2px rgba(28, 33, 38, 0.08);
}
#ai-dialog.ai-werkbank .bm-auf-hell :is(.bm-knopf--leise, .bm-knopf--werkzeug) { color: var(--bm-knopf-hell-text); }
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf--werkzeug[aria-pressed="true"] {
    border-color: var(--bm-knopf-auswahl-hell);
    background: var(--bm-knopf-auswahl-hell);
    color: #ffffff;
}
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf--gefahr { color: var(--bm-knopf-gefahr-hell); }
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf--leise:is([aria-current="true"], [aria-current="page"]) {
    border-color: var(--bm-knopf-auswahl-hell);
    background: rgba(122, 31, 199, 0.10);
    color: var(--bm-knopf-hell-text);
}
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf:is(:disabled, [aria-disabled="true"]) { color: var(--bm-knopf-hell-text-aus); }
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf--sekundaer:is(:disabled, [aria-disabled="true"]) { background: #f1f3f5; }
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf:is(:active, [data-zustand="druck"]):not(.bm-knopf--haupt):not([aria-pressed="true"]) { background: var(--bm-knopf-hell-druck); }
#ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf--haupt { box-shadow: var(--bm-knopf-cta-tiefe), 0 0 0 1px rgba(23, 17, 33, 0.18); }
@media (hover: hover) and (pointer: fine) {
    #ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf:is(:hover, [data-zustand="hover"]):not(.bm-knopf--haupt):not(.bm-knopf--gefahr):not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]) {
        background: var(--bm-knopf-hell-hover);
        color: var(--bm-knopf-hell-text);
    }
    #ai-dialog.ai-werkbank .bm-auf-hell .bm-knopf--gefahr:is(:hover, [data-zustand="hover"]) { background: rgba(179, 32, 58, 0.08); color: var(--bm-knopf-gefahr-hell); }
}

/* ==================================================================== Chip (Auswahl) */
:where(#ai-dialog.ai-werkbank) .bm-chip { display: inline-flex; }
#ai-dialog.ai-werkbank .bm-chip {
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-width: var(--bm-knopf-h-klein);
    min-height: var(--bm-knopf-h-klein);
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--bm-knopf-radius-chip);
    background: transparent;
    color: var(--bm-knopf-text-2);
    font: 500 var(--bm-knopf-t-klein)/1.2 var(--bm-knopf-schrift);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--bm-knopf-dauer) ease, border-color var(--bm-knopf-dauer) ease, color var(--bm-knopf-dauer) ease;
}
/* Haken-Platz immer reserviert → kein Sprung beim Auswählen */
#ai-dialog.ai-werkbank .bm-chip::before {
    content: "";
    flex: none;
    width: 0;
    height: 12px;
    margin-right: -6px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
#ai-dialog.ai-werkbank .bm-chip:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) {
    padding: 0 14px 0 12px;
    border-color: var(--bm-knopf-auswahl-rand);
    background: var(--bm-knopf-auswahl-weich);
    color: #ffffff;
    font-weight: 600;
}
#ai-dialog.ai-werkbank .bm-chip:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"])::before { width: 12px; margin-right: 0; }
#ai-dialog.ai-werkbank .bm-chip:focus { outline: none; }
#ai-dialog.ai-werkbank .bm-chip:is(:focus-visible, [data-zustand="fokus"]) { outline: 3px solid var(--bm-knopf-fokus); outline-offset: 2px; }
#ai-dialog.ai-werkbank .bm-chip:is(:disabled, [aria-disabled="true"]) { border-style: dashed; color: var(--bm-knopf-text-aus); cursor: not-allowed; }
#ai-dialog.ai-werkbank .bm-chip:is(:active, [data-zustand="druck"]):not(:disabled) { background: var(--bm-knopf-flaeche-druck); }
@media (hover: hover) and (pointer: fine) {
    #ai-dialog.ai-werkbank .bm-chip:is(:hover, [data-zustand="hover"]):not(:disabled):not([aria-pressed="true"]):not([aria-checked="true"]):not([aria-selected="true"]) {
        border-color: rgba(255, 255, 255, 0.36);
        color: #ffffff;
    }
}

/* Chip als Hülle einer echten Checkbox/Radio (Fang-Schalter der Skizze):
   <label class="bm-chip"><input type="checkbox" class="bm-chip__eingabe"> Endpunkt</label>
   Die Eingabe bleibt im DOM (Tests, Formularlogik), sichtbar ist nur der Chip. */
#ai-dialog.ai-werkbank .bm-chip__eingabe { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
#ai-dialog.ai-werkbank .bm-chip:has(> .bm-chip__eingabe:checked) {
    padding: 0 14px 0 12px;
    border-color: var(--bm-knopf-auswahl-rand);
    background: var(--bm-knopf-auswahl-weich);
    color: #ffffff;
    font-weight: 600;
}
#ai-dialog.ai-werkbank .bm-chip:has(> .bm-chip__eingabe:checked)::before { width: 12px; margin-right: 0; }
#ai-dialog.ai-werkbank .bm-chip:has(> .bm-chip__eingabe:focus-visible) { outline: 3px solid var(--bm-knopf-fokus); outline-offset: 2px; }
#ai-dialog.ai-werkbank .bm-chip:has(> .bm-chip__eingabe:disabled) { border-style: dashed; color: var(--bm-knopf-text-aus); cursor: not-allowed; }
#ai-dialog.ai-werkbank .bm-chipgruppe { flex-wrap: wrap; gap: 6px; }
/* Chips auf der hellen Bühne (Ansicht Vorne/Oben/…, Register der Vorschau) */
#ai-dialog.ai-werkbank .bm-auf-hell .bm-chip {
    border-color: var(--bm-knopf-hell-rand);
    background: var(--bm-knopf-hell-bg);
    color: var(--bm-knopf-hell-text);
}
#ai-dialog.ai-werkbank .bm-auf-hell .bm-chip:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]) {
    border-color: var(--bm-knopf-auswahl-hell);
    background: var(--bm-knopf-auswahl-hell);
    color: #ffffff;
}

/* ==================================================================== Kachel (Wege + Schnellteile) */
:where(#ai-dialog.ai-werkbank) .bm-kachel { display: flex; }
#ai-dialog.ai-werkbank .bm-kachel {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 10px 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--bm-knopf-radius-kachel);
    background: #16191d;
    color: var(--bm-knopf-text);
    font: 400 var(--bm-knopf-t)/1.45 var(--bm-knopf-schrift);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--bm-knopf-dauer) ease, background-color var(--bm-knopf-dauer) ease;
}
#ai-dialog.ai-werkbank .bm-kachel__bild {
    display: grid;
    place-items: center;
    height: 124px;
    border-radius: var(--bm-knopf-radius);
    background: #f7f8fa;
    color: #7a1fc7;
    overflow: hidden;
}
#ai-dialog.ai-werkbank .bm-kachel__bild .bm-knopf__icon { width: 40px; height: 40px; stroke-width: 1.6; }
#ai-dialog.ai-werkbank .bm-kachel__kopf { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 4px; }
#ai-dialog.ai-werkbank .bm-kachel__titel { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ai-dialog.ai-werkbank .bm-kachel__marke {
    flex: none;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--bm-knopf-radius-chip);
    background: #f6e760;
    color: #171121;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
#ai-dialog.ai-werkbank .bm-kachel__text { padding: 0 4px; color: #b4b4b4; font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
/* Weg-Kachel (Startseite): gleiche Form, Icon statt Bild */
#ai-dialog.ai-werkbank .bm-kachel--weg { padding: 18px 18px 20px; gap: 12px; }
#ai-dialog.ai-werkbank .bm-kachel--weg .bm-kachel__bild { width: 48px; height: 48px; border-radius: var(--bm-knopf-radius); background: rgba(255, 255, 255, 0.06); color: #ffffff; }
#ai-dialog.ai-werkbank .bm-kachel--weg .bm-kachel__bild .bm-knopf__icon { width: 24px; height: 24px; stroke-width: 1.8; }
#ai-dialog.ai-werkbank .bm-kachel--weg .bm-kachel__kopf { padding: 0; }
#ai-dialog.ai-werkbank .bm-kachel--weg .bm-kachel__titel { font-size: 17px; white-space: normal; }
#ai-dialog.ai-werkbank .bm-kachel--weg .bm-kachel__text { padding: 0; }
#ai-dialog.ai-werkbank .bm-kachel:focus { outline: none; }
#ai-dialog.ai-werkbank .bm-kachel:is(:focus-visible, [data-zustand="fokus"]) { outline: 3px solid var(--bm-knopf-fokus); outline-offset: 2px; }
#ai-dialog.ai-werkbank .bm-kachel:is(:active, [data-zustand="druck"]) { background: #1c1f24; }
#ai-dialog.ai-werkbank .bm-kachel:is([aria-pressed="true"], [aria-current="true"], [aria-checked="true"]) {
    border-color: var(--bm-knopf-auswahl-rand);
    box-shadow: inset 0 0 0 1px var(--bm-knopf-auswahl-rand);
    background: #1d1626;
}
#ai-dialog.ai-werkbank .bm-kachel:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; border-style: dashed; }
#ai-dialog.ai-werkbank .bm-kachel:is(:disabled, [aria-disabled="true"]) .bm-kachel__bild { filter: grayscale(1); opacity: 0.6; }
#ai-dialog.ai-werkbank .bm-kachel[aria-busy="true"] .bm-kachel__bild { background: linear-gradient(90deg, #eef0f3, #f7f8fa, #eef0f3); }
@media (hover: hover) and (pointer: fine) {
    /* Nur Rand und Fläche – nie Schriftstärke (kein Textsprung) */
    #ai-dialog.ai-werkbank .bm-kachel:is(:hover, [data-zustand="hover"]):not(:disabled):not([aria-disabled="true"]) {
        border-color: rgba(255, 255, 255, 0.32);
        background: #1a1d22;
    }
}

/* ==================================================================== Werkzeugstreifen: Wisch-Hinweis */
:where(#ai-dialog.ai-werkbank) :is(.bm-knopf-streifen, .bm-knopf-gruppe, .bm-chipgruppe) { display: flex; }
:where(#ai-dialog.ai-werkbank) :is(.bm-knopf-streifen, .bm-knopf-gruppe, .bm-chipgruppe)[hidden] { display: none; }
#ai-dialog.ai-werkbank .bm-knopf-streifen {
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* Ausblenden am Rand zeigt: es geht weiter */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
#ai-dialog.ai-werkbank .bm-knopf-streifen[data-ende="true"] { -webkit-mask-image: none; mask-image: none; }
#ai-dialog.ai-werkbank .bm-knopf-streifen::-webkit-scrollbar { display: none; }
#ai-dialog.ai-werkbank .bm-knopf-streifen > * { scroll-snap-align: start; }
#ai-dialog.ai-werkbank .bm-knopf-gruppe { align-items: center; gap: 2px; padding-right: 6px; margin-right: 4px; border-right: 1px solid var(--bm-trenner, rgba(255, 255, 255, 0.08)); }
#ai-dialog.ai-werkbank .bm-knopf-gruppe:last-child { border-right: 0; }

/* ==================================================================== Breitenstufen (data-breite aus blechModulWerkbank.js) */
/* m (768–1179): Befehle und Moduswerkzeuge nur Icon, Wort im title/aria-label */
#ai-dialog.ai-werkbank [data-breite="m"] .bm-knopf--werkzeug .bm-knopf__text,
#ai-dialog.ai-werkbank [data-breite="l"] .bm-modus-werkzeuge .bm-knopf--werkzeug .bm-knopf__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
#ai-dialog.ai-werkbank [data-breite="m"] .bm-knopf--werkzeug { min-width: var(--bm-knopf-touch); }
/* Knöpfe mit Text dürfen bis zur Grenze schrumpfen, dann Auslassung (title zeigt alles) */
#ai-dialog.ai-werkbank :is(.bm-fuss, .bm-modus-knoepfe) .bm-knopf { flex-shrink: 1; max-width: 100%; }
#ai-dialog.ai-werkbank :is(.bm-fuss, .bm-modus-knoepfe) .bm-knopf--haupt { flex-shrink: 0; max-width: 60%; }

/* ==================================================================== Handy (< 768 px, gleiche Grenze wie ai-werkbank.css) */
/* Einbau 28.09.: Die 44-px-Masse gelten auch fuer Handys quer (niedriges Fenster,
   z. B. 844 x 390) und jeden groben Zeiger - dort ist die Werkbank zwar die
   Desktop-Fassung (T16), die Finger aber dieselben. */
@media (max-width: 767.98px), (max-height: 500px), (pointer: coarse) {
    #ai-dialog.ai-werkbank {
        --bm-knopf-h-klein: 44px;
        --bm-knopf-h-werkzeug: 52px;
        --bm-knopf-w-werkzeug: 58px;
        --bm-knopf-t: 15px;
        --bm-knopf-t-klein: 14px;
    }
    #ai-dialog.ai-werkbank .bm-knopf--haupt { min-height: 48px; }
    #ai-dialog.ai-werkbank :is(.bm-fuss, .bm-modus-knoepfe) .bm-knopf--haupt { max-width: 62%; }
}
/* Gleiche Werte über die Klasse des Editors (bm-handy) – auch für die Doku-Seite */
#ai-dialog.ai-werkbank .bm-handy {
    --bm-knopf-h-klein: 44px;
    --bm-knopf-h-werkzeug: 52px;
    --bm-knopf-w-werkzeug: 58px;
    --bm-knopf-t: 15px;
    --bm-knopf-t-klein: 14px;
}
#ai-dialog.ai-werkbank .bm-handy .bm-knopf--haupt { min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
    #ai-dialog.ai-werkbank { --bm-knopf-dauer: 0ms; }
    #ai-dialog.ai-werkbank .bm-knopf[aria-busy="true"]::after { animation-duration: 2.4s; }
}
@media (forced-colors: active) {
    #ai-dialog.ai-werkbank :is(.bm-knopf, .bm-chip, .bm-kachel) { border: 1px solid ButtonText; }
    #ai-dialog.ai-werkbank :is(.bm-knopf, .bm-chip)[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* ======================================================================
   EINBAU 28.09.2026 (Claude Code) - was das Paket nicht kennen konnte.
   Gleiche Regel wie oben: nur #ai-dialog.ai-werkbank, keine neuen Farben
   ausser --bm-knopf-*, kein !important.
   ====================================================================== */

/* Listeneintraege waehlen per aria-pressed (Vertrag der DOM-Tests) -
   sieht aus wie aria-current. */
#ai-dialog.ai-werkbank .bm-knopf--leise[aria-pressed="true"] {
    border-color: var(--bm-knopf-auswahl-rand);
    background: var(--bm-knopf-auswahl-weich);
    color: var(--bm-knopf-text);
}
#ai-dialog.ai-werkbank .bm-knopf--leise.bm-knopf--breit { min-height: var(--bm-knopf-h-klein); height: auto; }

/* Zerstoerendes im Panel: unten, mit Trennlinie darueber (Befund 10). */
#ai-dialog.ai-werkbank .bm-aktionen > .bm-knopf--gefahr.bm-knopf--breit { margin-top: 13px; overflow: visible; }
#ai-dialog.ai-werkbank .bm-aktionen > .bm-knopf--gefahr.bm-knopf--breit::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 1px;
    background: var(--bm-knopf-gesperrt-rand);
    pointer-events: none;
}

/* Kreisel statt Font Awesome (Warten auf Server). */
#ai-dialog.ai-werkbank .bm-kreisel {
    display: inline-block;
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bm-knopf-dreh 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    #ai-dialog.ai-werkbank .bm-kreisel { animation-duration: 2.4s; }
}
#ai-dialog.ai-werkbank :is(.ai-dialog-markenzeichen, .ai-pruef-symbol, .ai-anfrage-danke, .ai-beta-band, .ai-dropzone) .bm-icon {
    width: var(--bm-knopf-icon);
    height: var(--bm-knopf-icon);
    flex: none;
    vertical-align: -3px;
}
#ai-dialog.ai-werkbank .ai-dropzone > .bm-icon { width: 32px; height: 32px; }

/* Startseite: Weg-Kacheln. "Form waehlen" aufgeklappt = ausgewaehlt. */
#ai-dialog.ai-werkbank .ai-start-karte-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#ai-dialog.ai-werkbank .bm-kachel[aria-expanded="true"] {
    border-color: var(--bm-knopf-auswahl-rand);
    box-shadow: inset 0 0 0 1px var(--bm-knopf-auswahl-rand);
    background: #1d1626;
}
#ai-dialog.ai-werkbank .bm-kachel--weg .bm-kachel__bild svg:not(.bm-knopf__icon) {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Galerie: Kachel-Raster wie der Start (gleiche Kachel, keine Sonderform). */
#ai-dialog.ai-werkbank .bm-kachel__bild .bm-icon { width: 40px; height: 40px; stroke-width: 1.6; }
#ai-dialog.ai-werkbank .bm-kachel .bm-schnellteil-name { display: block; }

/* Kopf als EIN Balken in jedem Schritt einer Blech-Sitzung (Entscheidung
   c.4) - aiDesign.js setzt .bm-kopf-balken (Start, Vorschau, Preis; Editor
   und Schnellteile tragen zusaetzlich .ai-dialog-blech). Kopfknoepfe leise. */
#ai-dialog.ai-werkbank.bm-kopf-balken > .ai-dialog-kopf {
    top: 0;
    left: 0;
    right: 0;
    height: var(--ai-kopf-hoehe);
    padding: 0 8px 0 12px;
    align-items: center;
    flex-wrap: nowrap;
    background: var(--bm-kopf-bg, #121418);
    border-bottom: 1px solid var(--bm-trenner, rgba(255, 255, 255, 0.08));
    pointer-events: auto;
}
#ai-dialog.ai-werkbank.bm-kopf-balken :is(.ai-kopf-links, .ai-kopf-rechts) {
    min-height: 0;
    height: calc(var(--ai-kopf-hoehe) - 1px);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#ai-dialog.ai-werkbank.bm-kopf-balken:not(.ai-dialog-blech) > .ai-dialog-inhalt {
    padding-top: calc(var(--ai-kopf-hoehe) + 20px);
}
#ai-dialog.ai-werkbank :is(.ai-kopf-rechts, .ai-kopf-menue-knopf) .bm-knopf--leise { color: var(--bm-knopf-text-2); }

/* Register und Zoomleiste der Vorschau: Chips/Knoepfe auf der hellen Buehne,
   ohne Glas (Befund Haptik). */
#ai-dialog.ai-werkbank .ai-register.bm-auf-hell,
#ai-dialog.ai-werkbank .ai-zoomleiste.bm-auf-hell {
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Hinweise (Befund 18): das Beta-Band steht auf jedem Geraet im scrollenden
   Inhalt unter dem Schritt (aiDesign.js betaBandPlatzieren) - nie schwebend
   ueber einer Aktion. Breite wie die Schritte (Lesebreite 1180 px). */
#ai-dialog.ai-werkbank > .ai-dialog-inhalt > #ai-beta-band {
    position: static;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    margin: 20px auto 0;
    padding: 12px 14px;
    border: 1px solid var(--bm-knopf-rand);
    border-radius: var(--bm-knopf-radius);
    background: #16191d;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--bm-knopf-text-2);
    font-size: 14px;
    line-height: 1.5;
}
#ai-dialog.ai-werkbank > .ai-dialog-inhalt > #ai-beta-band[hidden] { display: none; }
#ai-dialog.ai-werkbank > .ai-dialog-inhalt > #ai-beta-band .bm-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }

@media (max-width: 767.98px) {
    /* Menue "...": offen stehen die Kopfknoepfe als breite Zeilen. */
    #ai-dialog.ai-werkbank.ai-kopf-menue-offen .ai-kopf-rechts .bm-knopf {
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: var(--bm-knopf-touch);
        padding: 0 12px;
        gap: 10px;
    }
    #ai-dialog.ai-werkbank.ai-kopf-menue-offen .ai-kopf-rechts .bm-knopf--icon::after {
        content: attr(aria-label);
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        border: 0;
        background: none;
        opacity: 1;
        font-size: 14px;
        animation: none;
    }
    #ai-dialog.ai-werkbank.bm-kopf-balken:not(.ai-dialog-blech) > .ai-dialog-inhalt {
        padding-top: calc(var(--ai-kopf-hoehe) + env(safe-area-inset-top) + 14px);
    }

    /* Der Inhalt endet am Handy genau ueber dem gemessenen Fuss
       (--ai-fuss-hoehe) - nichts im Inhalt kann eine Aktion ueberdecken. */
    #ai-dialog.ai-werkbank:not(.ai-dialog-blech):not(.ai-dialog-kette):not(.ai-dialog-loch) > .ai-dialog-inhalt {
        bottom: var(--ai-fuss-hoehe, calc(72px + env(safe-area-inset-bottom)));
    }
}

/* Zustandsrahmen der Liste "Ihr Teil" und der Werkzeuge (vorher in
   blech-modul.css an den alten Klassen; mit ID, sonst gewinnt der Rahmen
   des Knopfs). Farben sind die bestehenden Rollen-Tokens. */
#ai-dialog.ai-werkbank .bm-eintrag.bm-beispiel > .bm-knopf,
#ai-dialog.ai-werkbank .bm-knopf.bm-ist-beispiel,
#ai-dialog.ai-werkbank .bm-chip.bm-ist-beispiel { border-style: dashed; border-color: var(--ai-rolle-hinweis, #f6c343); }
#ai-dialog.ai-werkbank .bm-hat-fehler > .bm-knopf { border-color: var(--ai-rolle-fehler, #f5576c); }
#ai-dialog.ai-werkbank :is(.bm-hat-hinweis, .bm-hat-fehlt) > .bm-knopf { border-color: var(--ai-rolle-hinweis, #f6c343); }
#ai-dialog.ai-werkbank .bm-knopf--werkzeug.bm-angeboten { border-color: var(--ai-rolle-hinweis, #f6c343); color: var(--bm-knopf-text); }

/* Teileliste im Formular: Name links, Stand rechts. */
#ai-dialog.ai-werkbank .ai-teileliste-knopf { justify-content: space-between; align-items: baseline; }
/* "Weitere Formen aus dem Katalog": links unter den Kacheln, Text buendig. */
#ai-dialog.ai-werkbank .ai-start-katalog { width: fit-content; margin-left: -10px; }

@media (max-width: 767.98px) {
    /* Fuss des Editors am Handy: Zurueck nur als Pfeil (Wort bleibt fuer Screenreader). */
    #ai-dialog.ai-werkbank .bm-editor.bm-handy .bm-fuss > .bm-fuss-zurueck {
        width: var(--bm-knopf-touch);
        min-width: var(--bm-knopf-touch);
        padding: 0;
        font-size: 0;
    }
}

/* Freies Zeichnen (Desktop): Fussknoepfe der Skizze unten links auf der
   hellen Zeichenflaeche; die Werkzeugreihe wischt, statt Knoepfe zu quetschen. */
#ai-dialog.ai-werkbank .bm-knopf-streifen > .bm-knopf { flex: none; }
#ai-dialog.ai-werkbank .bm-frei-zeichnung > .bm-sk-fuss-buehne {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 4;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
/* Wie bisher in der Leiste: auf dem leeren Blatt ersetzt "Letzter Punkt zurueck"
   das allgemeine Rueckgaengig (Strg+Z wirkt weiter). */
:where(#ai-dialog.ai-werkbank) .bm-frei-zeichnung > .bm-sk-fuss-buehne .bm-sk-rueckgaengig { display: none; }

@media (max-width: 767.98px) {
    /* Freies Zeichnen am Handy: "Anderes Teil waehlen" nur als Pfeil, damit
       "Grundblech erzeugen" nicht umbricht und nicht gekuerzt wird (Befund 17). */
    #ai-dialog.ai-werkbank .bm-frei-knoepfe > .bm-frei-zurueck {
        width: var(--bm-knopf-touch);
        min-width: var(--bm-knopf-touch);
        padding: 0;
        font-size: 0;
    }
    #ai-dialog.ai-werkbank .bm-frei-knoepfe > .bm-frei-editor { flex: 1 1 auto; max-width: none; }
}

/* Zaehler der eingeklappten Liste: mindestens quadratisch (44 px auf dem Handy/quer). */
#ai-dialog.ai-werkbank .bm-listenleiste .bm-zaehler { min-width: var(--bm-knopf-h-klein); }