/* Bemusterung – baut auf den Klassen der App auf (plan-viewer-overlay, gtb-btn, modal-…, mf).
   Zustandsfarben: offen (Blaugrau), teilweise (Bernstein), Standard (Grün), Sonderwunsch (Marken-Oliv). */
:root { --bm-offen: #64748B; --bm-teil: #D97706; --bm-std: #2F7D20; --bm-wunsch: #76841C; --bm-rot: #C0392B; --bm-flaeche: #F7F8FA; }
.bm-app { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--bm-flaeche); color: var(--text-primary); font-size: .88rem; }
.bm-modal { z-index: 3300 !important; }
.bm-ask-info { font-size: .88rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.45; }
.bm-ask-body { max-height: 62vh; overflow: auto; }

/* Kopfzeile */
.bm-top { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #fff; border-bottom: 1.5px solid var(--border); flex-wrap: wrap; }
.bm-titel { display: flex; flex-direction: column; min-width: 150px; }
.bm-titel b { font-size: 1.02rem; } .bm-titel small { color: var(--text-muted); font-size: .76rem; }
.bm-seg { display: inline-flex; background: var(--accent-light); border-radius: 10px; padding: 3px; }
.bm-seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; color: var(--text-muted); }
.bm-seg button.aktiv { background: #fff; color: var(--text-primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.bm-app[data-vorlage="1"] .bm-seg, .bm-app[data-vorlage="1"] .bm-themen { display: none; }
.bm-app[data-modus="gefuehrt"] .bm-seg [data-v="tabelle"] { display: none; }
.bm-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: #FEF3C7; color: #92600E; white-space: nowrap; }
.bm-badge.zu, .bm-badge.ok { background: #E6F5D0; color: #4A7C00; } .bm-badge.nachtrag { background: #FDE7D3; color: #B45309; }
.bm-badge.leer { background: #EEF0F3; color: #555; } .bm-badge.offen { background: #E8EDF3; color: #475569; }

/* Aufbau: Themen | Plan | Panel */
.bm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 216px minmax(0, 1fr) 420px; }
.bm-app[data-vorlage="1"] .bm-body { grid-template-columns: minmax(0, 1fr) 380px; }
.bm-app[data-breit="1"] .bm-mitte, .bm-app[data-breit="1"] .bm-panel { display: none; }
.bm-breit { display: none; grid-column: 2 / -1; overflow: auto; padding: 18px 20px; }
.bm-app[data-breit="1"] .bm-breit { display: block; }
.bm-themen { background: #fff; border-right: 1.5px solid var(--border); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.bm-thema { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 8px 9px; cursor: pointer; font: inherit; color: inherit; position: relative; }
.bm-thema:hover { background: var(--accent-light); }
.bm-thema.aktiv { background: var(--accent); color: #fff; }
.bm-thema-nr { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .78rem; background: var(--accent-light); color: var(--text-primary); }
.bm-thema.fertig .bm-thema-nr { background: #E6F5D0; color: var(--bm-std); }
.bm-thema.aktiv .bm-thema-nr { background: var(--brand); color: var(--brand-text); }
.bm-thema-text { display: flex; flex-direction: column; min-width: 0; }
.bm-thema-text b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-thema-text small { font-size: .7rem; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-thema.ende { margin-top: auto; border-top: 1.5px solid var(--border); border-radius: 0 0 10px 10px; padding-top: 12px; }
.bm-frist { position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--bm-std); }
.bm-frist[data-z="bald"] { background: var(--bm-teil); } .bm-frist[data-z="abgelaufen"] { background: var(--bm-rot); } .bm-frist[data-z="entsperrt"] { background: #fff; border: 2px solid var(--bm-rot); }
.bm-frist-text[data-z="abgelaufen"] { color: var(--bm-rot); font-weight: 700; } .bm-frist-text[data-z="bald"] { color: var(--bm-teil); font-weight: 700; }

.bm-mitte { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bm-leiste { display: flex; align-items: center; gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
.bm-tabs, .bm-zoom, .bm-werkzeuge { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.bm-werkzeuge { flex: 1; }
.bm-tab, .bm-wz, .bm-zoom button { border: 1.5px solid var(--border); background: #fff; border-radius: 8px; padding: 6px 11px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--text-primary); white-space: nowrap; }
.bm-tab.aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
.bm-tab i { font-style: normal; margin-left: 6px; background: var(--bm-offen); color: #fff; border-radius: 999px; padding: 1px 6px; font-size: .68rem; }
.bm-wz:hover, .bm-zoom button:hover, .bm-tab:not(.aktiv):hover { border-color: var(--accent); background: var(--accent-light); }
.bm-wz.aktiv { background: var(--brand); border-color: var(--brand-strong); }
.bm-wz.haupt { background: var(--accent); color: #fff; border-color: var(--accent); }
.bm-wz-gruppe { display: inline-flex; gap: 3px; padding-left: 8px; margin-left: 4px; border-left: 1.5px solid var(--border); flex-wrap: wrap; }
.bm-tipp { color: var(--text-muted); font-size: .76rem; margin-left: 6px; }
.bm-plan { flex: 1; min-height: 0; position: relative; margin: 0 12px 12px; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.bm-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
.bm-plan[data-tool]:not([data-tool="wahl"]) .bm-svg { cursor: crosshair; }
.bm-plan-leer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted); text-align: center; padding: 30px; }
.bm-plan-leer b { color: var(--text-primary); font-size: 1rem; }

/* Objekte im Plan */
.bm-o { cursor: pointer; --f: #94A3B8; }
.bm-o[data-z="offen"] { --f: var(--bm-offen); } .bm-o[data-z="teil"] { --f: var(--bm-teil); } .bm-o[data-z="standard"] { --f: var(--bm-std); } .bm-o[data-z="wunsch"] { --f: var(--bm-wunsch); }
.bm-o[data-zustand="neu"] { --f: #15803D; } .bm-o[data-zustand="entfaellt"] { --f: var(--bm-rot); } .bm-o[data-zustand="verschoben"] { --f: #B45309; }
.bm-o polygon { fill: var(--f); fill-opacity: .16; stroke: var(--f); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bm-o[data-z="offen"] polygon { stroke-dasharray: 7 5; }
.bm-o:hover polygon { fill-opacity: .28; }
.bm-o.sel polygon { fill-opacity: .36; stroke-width: 3.5; stroke-dasharray: none; }
.bm-o.blass polygon { fill-opacity: .03; stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 4 4; }
.bm-o[data-art="fbh_frei"] polygon { fill: #B45309; fill-opacity: .22; stroke: #B45309; stroke-dasharray: 3 3; }
.bm-raumname { fill: #1A1A1A; font-weight: 600; text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: .28em; stroke-linejoin: round; }
.bm-o.blass .bm-raumname { fill: #6B7280; font-weight: 500; }
.bm-o circle { fill: #fff; stroke: var(--f); }
.bm-o[data-z="offen"] circle { fill: #F1F5F9; } .bm-o[data-z="standard"] circle { fill: #EEF7E9; } .bm-o[data-z="wunsch"] circle { fill: #F3F5D9; } .bm-o[data-z="teil"] circle { fill: #FEF3C7; }
.bm-o:hover > g:not(.bm-alt) > circle { stroke-width: 3; vector-effect: non-scaling-stroke; }
.bm-o.sel > g:not(.bm-alt) > circle { fill: var(--f); } .bm-o.sel .bm-sym, .bm-o.sel .bm-kurz { stroke: #fff; fill: #fff; }
.bm-sym { fill: none; stroke: var(--f); stroke-linejoin: round; stroke-linecap: round; }
.bm-o.sel .bm-sym { fill: none; }
.bm-kurz { fill: var(--f); font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.bm-kreuz { stroke: var(--bm-rot); fill: none; stroke-linecap: round; }
.bm-o .bm-alt line, .bm-o .bm-alt circle, .bm-o .bm-alt path { stroke: #B45309; fill: none; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.bm-o .bm-alt circle { fill: rgba(255,255,255,.7); }
.bm-linie { stroke: var(--f); fill: none; stroke-linecap: round; }
.bm-o[data-zustand="entfaellt"] .bm-linie { stroke-dasharray: .1 1.6; stroke-linecap: square; stroke-dasharray: 12 9; }
.bm-o[data-art="fliesenwand"] .bm-linie { stroke: #0E7490; }
.bm-o[data-art="fliesenwand"][data-linie] .bm-linie { stroke: #111; }
.bm-linientext { fill: #111; stroke: #fff; paint-order: stroke; font-weight: 700; text-anchor: middle; pointer-events: none; }
.bm-o[data-art="hecke"] .bm-linie { stroke: #2F7D20; stroke-dasharray: 2 7; }
.bm-o.sel .bm-linie { filter: drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.bm-treffer { stroke: transparent; fill: none; }
.bm-o.blass { opacity: .75; }
.bm-vorschau { fill: rgba(64,64,64,.08); stroke: #404040; stroke-dasharray: 6 4; }
.bm-vpunkt { fill: #404040; } .bm-vtext { fill: #404040; text-anchor: middle; font-weight: 700; }
.bm-griff { fill: #fff; stroke: #404040; cursor: move; }
.bm-rahmen { fill: rgba(118,132,28,.12); stroke: var(--bm-wunsch); stroke-dasharray: 5 4; }

/* Auswahlpanel */
.bm-panel { background: #fff; border-left: 1.5px solid var(--border); overflow-y: auto; padding: 0 0 18px; }
.bm-panel-kopf { position: sticky; top: 0; z-index: 2; background: #fff; display: flex; gap: 10px; align-items: center; padding: 14px 16px 12px; border-bottom: 1.5px solid var(--border); }
.bm-panel-kopf b { font-size: 1.05rem; display: block; } .bm-panel-kopf small { color: var(--text-muted); font-size: .76rem; line-height: 1.35; display: block; }
.bm-zurueck { border: 1.5px solid var(--border); background: #fff; border-radius: 8px; width: 32px; height: 32px; font-size: 1.2rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.bm-zurueck:hover { background: var(--accent-light); }
.bm-sektion { padding: 4px 16px 8px; }
.bm-sektion h4 { margin: 14px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.bm-feld { border-bottom: 1px solid var(--border); padding: 11px 0; }
.bm-feld-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.bm-feld-kopf[data-act] { cursor: pointer; }
.bm-feld-kopf label, .bm-feld > label, .bm-sig-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); cursor: inherit; }
.bm-feld.aktiv > .bm-feld-kopf label { color: var(--text-primary); }
.bm-feld.offen > .bm-feld-kopf label::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bm-offen); margin-left: 6px; vertical-align: middle; }
.bm-antwort { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-antwort.offen { color: var(--bm-offen); font-weight: 500; } .bm-antwort.versch { color: var(--bm-teil); font-style: italic; }
.bm-feld[data-typ="auswahl"] .bm-feld-kopf label { flex: 1; }
.bm-preis { font-weight: 700; color: var(--bm-wunsch); white-space: nowrap; margin-left: auto; }
.bm-preis.std { color: var(--bm-std); font-weight: 600; font-size: .78rem; }
.bm-x { border: 0; background: transparent; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0 2px; line-height: 1; }
.bm-x:hover { color: var(--bm-rot); }
.bm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bm-chip { border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 9px 13px; font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); }
.bm-chip:hover:not(:disabled) { border-color: var(--accent); }
.bm-chip.aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
.bm-chip em { font-style: normal; font-weight: 700; color: var(--bm-wunsch); font-size: .8rem; } .bm-chip.aktiv em { color: var(--brand); }
.bm-chip em.warn { color: var(--bm-rot); font-weight: 600; font-size: .7rem; }
.bm-chip i { font-style: normal; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bm-std); background: #EEF7E9; padding: 2px 6px; border-radius: 999px; }
.bm-chip:disabled, .bm-eingabe:disabled { opacity: .6; cursor: default; }
.bm-chips.klein { margin-top: 9px; } .bm-chips.klein .bm-chip { padding: 6px 10px; font-size: .78rem; font-weight: 500; }
.bm-app[data-modus="gefuehrt"] .bm-chip { padding: 12px 16px; font-size: .93rem; }
.bm-app[data-modus="gefuehrt"] .bm-chips.klein .bm-chip { padding: 8px 12px; font-size: .8rem; }

/* Produktkacheln */
.bm-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.bm-app[data-modus="gefuehrt"] .bm-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.bm-kachel { border: 2px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s; }
.bm-kachel:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.bm-kachel.aktiv { border-color: var(--bm-wunsch); box-shadow: 0 0 0 2px var(--brand-soft); }
.bm-kachel-bild { position: relative; aspect-ratio: 4 / 3; background: #F1F2F4; display: grid; place-items: center; color: #9CA3AF; font-size: .72rem; }
.bm-kachel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-marke { position: absolute; left: 6px; top: 6px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 999px; background: #fff; color: var(--bm-std); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.bm-kachel.aktiv .bm-kachel-bild::after { content: '✓'; position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--bm-wunsch); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.bm-kachel-info { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-weight: 700; font-style: italic; font-family: Georgia, serif; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.bm-kachel-info:hover { background: var(--brand); }
.bm-kachel-text { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bm-kachel-text b { font-size: .82rem; line-height: 1.25; } .bm-kachel-text small { font-size: .7rem; color: var(--text-muted); line-height: 1.3; }
.bm-kachel-preis { margin-top: auto; padding-top: 5px; font-weight: 700; font-size: .82rem; color: var(--bm-wunsch); display: flex; flex-direction: column; }
.bm-kachel-preis.std { color: var(--bm-std); } .bm-kachel-preis em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.bm-gewaehlt { display: flex; align-items: center; gap: 10px; cursor: pointer; border: 1.5px solid var(--border); border-radius: 10px; padding: 6px; }
.bm-gewaehlt:hover { border-color: var(--accent); }
.bm-gewaehlt img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; flex: 0 0 auto; }
.bm-gewaehlt span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bm-gewaehlt small { color: var(--text-muted); font-size: .72rem; }
.bm-gewaehlt .bm-kachel-info { position: static; box-shadow: none; border: 1.5px solid var(--border); flex: 0 0 auto; }
.bm-extra { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .bm-extra > span:first-child { flex: 1; font-weight: 600; } .bm-extra em { font-style: normal; font-weight: 700; color: var(--bm-wunsch); }
.bm-stepper { display: inline-flex; align-items: center; gap: 6px; } .bm-stepper button { width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--border); background: #fff; cursor: pointer; font-weight: 700; }
.bm-eingabe, .bm-menge input, .bm-notiz textarea, .bm-form input:not([type=checkbox]), .bm-form select, .bm-tabelle input, .bm-tabelle-kopf input[type=search], .bm-tabelle-kopf select, #bm-sig-name, .bm-std-liste input, .bm-std-liste select {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; background: #fff; color: var(--text-primary); outline: none; }
.bm-eingabe:focus, .bm-menge input:focus, .bm-notiz textarea:focus, .bm-form input:focus, .bm-tabelle input:focus { border-color: var(--accent); }
.bm-eingabe { width: 100%; }
.bm-menge { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; font-size: .8rem; }
.bm-menge label { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em; }
.bm-menge input { width: 84px; padding: 5px 8px; text-align: right; } .bm-menge small { color: var(--text-muted); flex: 1; }
.bm-menge label:nth-of-type(2) { flex-basis: 100%; margin-top: 4px; } .bm-menge label:nth-of-type(2) + input { width: 150px; margin-top: -4px; }
.bm-menge.fehlt input { border-color: var(--bm-rot); background: #FDF1F0; } .bm-menge.fehlt small { color: var(--bm-rot); font-weight: 600; }
.bm-notiz { border-bottom: 0; } .bm-notiz textarea { width: 100%; resize: vertical; margin-top: 5px; }
.bm-aktionen { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0 4px; }
.bm-panel > .bm-aktionen, .bm-panel > .bm-hinweis, .bm-panel > .bm-liste { margin: 10px 16px 0; }
.gtb-btn.gtb-btn-danger { background: #fff; color: var(--bm-rot); border-color: #E8C4BF; } .gtb-btn.gtb-btn-danger:hover { background: var(--bm-rot); color: #fff; border-color: var(--bm-rot); }
.bm-hinweis { background: #F3F4F6; border-radius: 10px; padding: 10px 12px; font-size: .82rem; color: #4B5563; line-height: 1.45; margin-bottom: 8px; }
.bm-hinweis.rot { background: #FDF1F0; color: #8E2A1F; } .bm-hinweis.gruen { background: #EEF7E9; color: #2F6B1D; }
.bm-link { border: 0; background: transparent; color: var(--bm-wunsch); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; text-align: left; }
.bm-klein { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.bm-liste { display: flex; flex-direction: column; gap: 3px; }
.bm-zeile { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 9px; border-radius: 9px; cursor: pointer; font: inherit; color: inherit; }
.bm-zeile:hover { background: var(--accent-light); }
.bm-zeile > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bm-zeile small { font-size: .72rem; color: var(--text-muted); } .bm-zeile em { font-style: normal; font-weight: 700; color: var(--bm-wunsch); white-space: nowrap; }
.bm-punkt { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 50%; background: #CBD5E1; }
.bm-punkt[data-z="offen"] { background: #fff; border: 2.5px solid var(--bm-offen); } .bm-punkt[data-z="teil"] { background: var(--bm-teil); } .bm-punkt[data-z="standard"] { background: var(--bm-std); } .bm-punkt[data-z="wunsch"] { background: var(--bm-wunsch); }
.bm-form { padding: 12px 16px 0; } .bm-form h4 { margin: 4px 0 10px; font-size: .9rem; } .bm-form .mf input, .bm-form .mf select { width: 100%; }
.bm-check { display: flex; align-items: center; gap: 8px; font-size: .86rem; margin: 0 0 12px; cursor: pointer; }
.bm-schritte { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.bm-schritte li { display: flex; gap: 10px; font-size: .82rem; line-height: 1.4; color: #4B5563; }
.bm-schritte i { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent-light); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .72rem; color: var(--text-primary); }
.bm-schritte li.ok i { background: #E6F5D0; color: var(--bm-std); }
.bm-zaehler { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; } .bm-zaehler span { background: var(--accent-light); border-radius: 999px; padding: 3px 9px; font-size: .72rem; font-weight: 600; }

/* Fußzeile */
.bm-fuss { display: flex; align-items: center; gap: 22px; padding: 10px 16px; background: #fff; border-top: 1.5px solid var(--border); flex-wrap: wrap; }
.bm-fortschritt { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.bm-fortschritt > div, .bm-balken { flex: 1; height: 8px; border-radius: 999px; background: var(--accent-light); overflow: hidden; max-width: 380px; }
.bm-fortschritt i, .bm-balken i { display: block; height: 100%; background: var(--bm-std); border-radius: 999px; transition: width .25s; }
.bm-summe { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .bm-summe small { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .bm-summe b { font-size: 1.25rem; color: var(--bm-wunsch); }
.bm-nav { display: flex; gap: 8px; } .bm-nav .gtb-btn { padding: 11px 22px; font-size: .92rem; } .bm-nav .gtb-btn:disabled { opacity: .4; cursor: default; }

/* Tabelle, Abschluss, Übersicht */
.bm-tabelle-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .bm-tabelle-kopf input[type=search] { min-width: 260px; } .bm-tabelle-kopf .bm-check { margin: 0; }
.bm-tabelle-wrap { background: #fff; border: 1.5px solid var(--border); border-radius: 14px; overflow: auto; }
.bm-tabelle { width: 100%; border-collapse: collapse; font-size: .84rem; }
.bm-tabelle th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 9px 10px; border-bottom: 1.5px solid var(--border); background: #FAFAFA; position: sticky; top: 0; z-index: 1; }
.bm-tabelle td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bm-tabelle td small { display: block; color: var(--text-muted); font-size: .72rem; } .bm-tabelle .r { text-align: right; white-space: nowrap; }
.bm-tabelle input { width: 84px; padding: 4px 7px; text-align: right; }
.bm-tabelle tr.std td b { font-weight: 500; } .bm-tabelle tr.wunsch td:last-child { font-weight: 700; color: var(--bm-wunsch); }
.bm-t-thema td { background: #F3F4F6; font-weight: 700; }
.bm-tabelle .bm-link { color: var(--text-primary); font-weight: 600; text-decoration: none; } .bm-tabelle .bm-link:hover { text-decoration: underline; }
.bm-abschluss { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.bm-karte { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; }
.bm-karte h3 { margin: 0 0 10px; font-size: 1rem; } .bm-karte h3:not(:first-child) { margin-top: 22px; } .bm-karte p { line-height: 1.5; margin: 0 0 8px; }
.bm-sig { position: relative; border: 1.5px dashed #9CA3AF; border-radius: 12px; background: #FCFCFC; margin-top: 5px; } .bm-sig canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; } .bm-sig .bm-link { position: absolute; right: 10px; top: 8px; font-size: .76rem; }
#bm-sig-name { width: 100%; }
.bm-version, .bm-gewerke > div { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.bm-version > span, .bm-gewerke span { flex: 1; min-width: 150px; display: flex; flex-direction: column; } .bm-version small { color: var(--text-muted); font-size: .74rem; } .bm-gewerke span { font-weight: 600; }
.bm-uebersicht { display: flex; flex-direction: column; gap: 14px; padding: 16px 24px 28px; overflow: auto; }
.bm-ue-leiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bm-legende { font-size: .74rem; color: var(--text-muted); display: inline-flex; gap: 6px; align-items: center; } .bm-legende i { font-style: normal; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin-left: 6px; }
.bm-matrix tbody tr { cursor: pointer; } .bm-matrix tbody tr:hover td { background: #FAFBF0; }
.bm-matrix th:not(:first-child):not(:nth-child(2)):not(:last-child) { text-align: center; padding: 8px 3px; min-width: 58px; max-width: 84px; vertical-align: bottom; } .bm-matrix th span { display: block; white-space: normal; line-height: 1.15; font-size: .64rem; hyphens: auto; } .bm-matrix th small { display: block; font-weight: 500; text-transform: none; }
.bm-m { text-align: center; font-weight: 700; width: 46px; } .bm-m.leer { color: #CBD5E1; font-weight: 400; }
.bm-m.ok, .bm-legende .ok { color: var(--bm-std); background: #F1F8ED; } .bm-m.offen, .bm-legende .offen { color: #475569; background: #EEF2F6; } .bm-m.spaet, .bm-legende .spaet { color: #fff; background: var(--bm-rot); }
.bm-m-einheit small { display: block; color: var(--text-muted); font-size: .74rem; }
.bm-start-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; } .bm-start-kopf h3 { display: inline-block; margin: 0 10px 0 0; } .bm-start-kopf small { display: block; color: var(--text-muted); font-size: .78rem; margin-top: 4px; }
.bm-start { margin: 4px 0 16px; }
.bm-start-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 14px 0; } .bm-start-zahlen small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 3px; } .bm-start-zahlen b { font-size: 1rem; } .bm-start-zahlen .bm-balken { margin-top: 6px; max-width: none; }
.bm-start-themen { display: flex; flex-wrap: wrap; gap: 6px; } .bm-start-themen span { font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: #EEF2F6; color: #475569; } .bm-start-themen span.ok { background: #F1F8ED; color: var(--bm-std); }
.bm-std-liste { max-height: 62vh; overflow: auto; padding-right: 4px; margin-top: 10px; }
.bm-std-thema { border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 6px; } .bm-std-thema summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.bm-std-thema summary label { font-size: .76rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .bm-std-thema summary input { padding: 5px 8px; }
.bm-std-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 6px 12px 2px; border-top: 1px solid var(--border); } .bm-std-felder .mf { margin-bottom: 10px; } .bm-std-felder select { width: 100%; }

/* Großansicht eines Produkts */
.bm-ansicht { max-width: 880px !important; width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; }
.bm-ansicht-bild { background: #F1F2F4; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 240px; color: #9CA3AF; align-items: center; justify-content: center; }
.bm-ansicht-bild > img { width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.bm-ansicht-leiste { display: flex; gap: 6px; padding: 8px; overflow-x: auto; width: 100%; background: #fff; } .bm-ansicht-leiste img { width: 58px; height: 58px; object-fit: cover; border-radius: 7px; cursor: pointer; border: 2px solid transparent; } .bm-ansicht-leiste img.aktiv { border-color: var(--bm-wunsch, #76841C); }
.bm-ansicht-text table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: .88rem; } .bm-ansicht-text th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 5px 12px 5px 0; white-space: nowrap; vertical-align: top; } .bm-ansicht-text td { padding: 5px 0; }
.bm-ansicht-text p { font-size: .88rem; line-height: 1.5; color: #374151; }

@media (max-width: 1180px) {
  .bm-body { grid-template-columns: 62px 360px minmax(0, 1fr); }
  .bm-thema-text, .bm-frist { display: none; } .bm-thema { justify-content: center; padding: 8px 4px; }
  .bm-abschluss { grid-template-columns: 1fr; }
}
/* Navigation | Auswahlpanel | Grundriss */
@media (min-width: 821px) {
  .bm-body { grid-template-columns: 216px 400px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .bm-themen { grid-column: 1; grid-row: 1; }
  .bm-panel { grid-column: 2; grid-row: 1; border-left: 0; border-right: 1.5px solid var(--border); }
  .bm-mitte { grid-column: 3; grid-row: 1; }
  .bm-breit { grid-column: 2 / -1; grid-row: 1; }
}
@media (max-width: 820px) {
  .bm-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(240px, 42vh) minmax(0, 1fr); overflow: auto; }
  .bm-app[data-vorlage="1"] .bm-body { grid-template-columns: 1fr; grid-template-rows: minmax(240px, 46vh) minmax(0, 1fr); }
  .bm-themen { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1.5px solid var(--border); } .bm-thema { width: auto; } .bm-thema.ende { margin: 0; border: 0; padding-top: 8px; }
  .bm-panel { border-left: 0; border-top: 1.5px solid var(--border); } .bm-breit { grid-column: 1; }
  .bm-ansicht { grid-template-columns: 1fr; } .bm-std-felder { grid-template-columns: 1fr; }
}

/* Fristen: schwebender Button unten rechts */
.bm-fab-fristen { position: fixed; right: 24px; bottom: 24px; z-index: 50; padding: 12px 22px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.22); }

/* Plan einrichten: Plankarten und Symbole im Panel */
.bm-plankarte { border: 1.5px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.bm-plankarte.aktiv { border-color: var(--text, #222); }
.bm-plankarte input { font-weight: 700; }
.bm-plankarte .bm-aktionen { margin: 0; display: flex; gap: 8px; }
.bm-upload { display: flex; justify-content: center; align-items: center; cursor: pointer; }
.bm-trenn { border: 0; border-top: 1.5px solid var(--border); margin: 14px 16px; }
.bm-symbole { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-weiss-regler { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-muted); margin-left: auto; margin-right: 12px; }
.bm-weiss-regler input { width: 110px; }
.bm-raumzeile { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bm-raumzeile input { flex: 1; min-width: 0; }
.bm-qm { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .85rem; min-width: 64px; text-align: right; }
.bm-plankarte { flex-direction: row; align-items: center; gap: 6px; padding: 8px; }
.bm-plankarte input { flex: 1; min-width: 0; }
.bm-plankarte .gtb-btn, .bm-plankarte .bm-wz { padding: 6px 9px; font-size: .78rem; white-space: nowrap; }
.bm-gross { display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; padding: 10px 12px; background: #eceef1; border: 0; border-radius: 8px; color: var(--text-primary, #1a1a1a); font-weight: 600; cursor: pointer; }
.bm-gross:hover { background: #e1e4e8; }
.bm-gross.aktiv { background: #a8c61a; color: #1f2a00; }
.bm-plankarte.aktiv { border-color: #a8c61a; box-shadow: 0 0 0 1.5px #a8c61a; }
.bm-symbole { gap: 6px; }
.bm-symbtn { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; padding: 0; }
.bm-symbtn:hover { background: #f4f5f7; }
.bm-symbtn.aktiv { background: #f3f5d9; border-color: #a8c61a; box-shadow: 0 0 0 1.5px #a8c61a; }
.bm-symbtn .bm-o { pointer-events: none; }
.bm-symf { fill: var(--f); stroke: none; }
.bm-o.sel .bm-symf { fill: #fff; }
.bm-symbole.klein { gap: 4px; }
.bm-symbole.klein .bm-symbtn { width: 36px; height: 36px; border-radius: 6px; }

.bm-richtung { stroke: #111; fill: none; pointer-events: none; }
.bm-sch-linie { stroke: #1d4ed8; fill: none; opacity: .9; }

.bm-dd { position: relative; }
.bm-dd-kopf, .bm-dd-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1.5px solid var(--border); background: #fff; border-radius: 10px; padding: 7px 10px; font: inherit; cursor: pointer; color: var(--text-primary); }
.bm-dd-kopf:hover:not(:disabled), .bm-dd-opt:hover { border-color: var(--accent); }
.bm-dd-kopf s { text-decoration: none; margin-left: auto; color: #6B7280; }
.bm-dd-kopf img, .bm-dd-opt img, .bm-dd-leer { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; background: #F3F4F6; }
.bm-dd-kopf span, .bm-dd-opt span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bm-dd-kopf b, .bm-dd-opt b { font-size: .86rem; font-weight: 600; } .bm-dd-kopf small, .bm-dd-opt small { color: #6B7280; font-size: .75rem; }
.bm-dd-kopf em, .bm-dd-opt em { font-style: normal; font-weight: 700; font-size: .78rem; color: var(--bm-wunsch); white-space: nowrap; }
.bm-dd-liste { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; max-height: 360px; overflow: auto; }
.bm-dd-opt { border-width: 1px; } .bm-dd-opt.aktiv { border-color: var(--accent); background: #F5F7FA; }

.bm-pk { display: flex; flex-direction: column; align-items: stretch; gap: 10px; border: 0; padding: 10px 10px 0; }
.bm-pk-btn, .bm-pk-opt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; box-sizing: border-box; padding: 0 38px 0 16px; text-align: left; font: inherit; color: var(--text-primary); background: #fff; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bm-pk-btn { height: 58px; }
.bm-pk-btn:hover:not(:disabled), .bm-pk-opt:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.bm-pk-btn:disabled, .bm-pk-opt:disabled { opacity: .55; cursor: default; }
.bm-pk-btn.offen { background: #FEF2F2; border-color: #FCA5A5; }
.bm-pk-btn.fertig { background: var(--brand-soft); border-color: var(--brand); }
.bm-pk-btn b, .bm-pk-opt b { font-size: .88rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-pk-btn small { font-size: .76rem; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-pk-btn::after { content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: #9CA3AF; }
.bm-pk-btn.fertig::after { content: '✓'; font-size: .9rem; color: var(--brand-deep); }
.bm-pk-btn.aktiv { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(64,64,64,.1); }
.bm-pk-opt { align-items: flex-start; gap: 8px; padding: 12px 16px; }
.bm-pk-opt.aktiv { background: var(--brand-soft); border-color: var(--brand); }
.bm-pk textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: .84rem; resize: vertical; }
.bm-sch-linie { stroke: #1d4ed8; fill: none; opacity: .9; }

.bm-pk-reset { align-self: center; margin: 4px 0 14px; border: 0; background: none; color: #6B7280; font: inherit; font-size: .8rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.bm-pk-reset:hover { color: #B91C1C; }

.bm-pk-seite .bm-kacheln { grid-template-columns: 1fr !important; display: grid; }

/* Produktauswahl überall kompakt: kleines Bild links, Text rechts */
.bm-kacheln, .bm-app[data-modus="gefuehrt"] .bm-kacheln, .bm-pk-seite .bm-kacheln { display: grid; grid-template-columns: 1fr !important; gap: 8px; }
.bm-kachel { flex-direction: row; align-items: stretch; border-radius: 10px; }
.bm-kachel-bild { flex: 0 0 88px; width: 88px; aspect-ratio: auto; min-height: 88px; }
.bm-kachel-bild img { position: absolute; inset: 0; }
.bm-kachel-bild .bm-marke { left: 4px; top: 4px; padding: 1px 5px; font-size: .55rem; }
.bm-kachel-bild .bm-kachel-info { right: 4px; top: auto; bottom: 4px; width: 20px; height: 20px; font-size: .72rem; }
.bm-kachel.aktiv .bm-kachel-bild::after { right: auto; left: 4px; bottom: 4px; width: 20px; height: 20px; font-size: .7rem; }
.bm-kachel-text { padding: 8px 12px; justify-content: center; min-width: 0; }
.bm-kachel-preis { padding-top: 3px; margin-top: 0; }

.bm-pk-btn.optional { background: #fff; border-color: var(--border); }

/* Elektro im Plan: neu = grün, entfällt = rot (voll ausgefüllt, weißes Symbol); verschoben = weiß mit rotem Rand, alter Platz gestrichelt */
.bm-o[data-e][data-zustand="verschoben"] { --f: var(--bm-rot); }
.bm-o[data-e][data-zustand="neu"] > g:not(.bm-alt) > circle, .bm-o[data-e][data-zustand="entfaellt"] > g:not(.bm-alt) > circle { fill: var(--f); }
.bm-o[data-e][data-zustand="neu"] .bm-sym, .bm-o[data-e][data-zustand="entfaellt"] .bm-sym { stroke: #fff; }
.bm-o[data-e][data-zustand="neu"] .bm-symf, .bm-o[data-e][data-zustand="entfaellt"] .bm-symf, .bm-o[data-e][data-zustand="neu"] .bm-kurz, .bm-o[data-e][data-zustand="entfaellt"] .bm-kurz { fill: #fff; }
.bm-o[data-e][data-zustand="verschoben"] > g:not(.bm-alt) > circle { fill: #fff; }
.bm-o[data-e].sel > g:not(.bm-alt) { filter: drop-shadow(0 0 3px rgba(0,0,0,.65)); }
.bm-o[data-e].sel[data-zustand="verschoben"] > g:not(.bm-alt) > circle { fill: #fff; }
.bm-o[data-e].sel[data-zustand="verschoben"] .bm-sym { stroke: var(--f); }
.bm-o[data-e] .bm-alt circle { vector-effect: none; stroke: var(--bm-rot); }
.bm-o[data-e] .bm-alt line { vector-effect: none; stroke: var(--bm-rot); }
.bm-o[data-e] .bm-alt path { stroke-dasharray: none; vector-effect: none; fill: none; }
.bm-o[data-e] .bm-alt .bm-sym { stroke: var(--bm-rot); }

.bm-tabelle-fuss { display: flex; align-items: center; gap: 12px; padding: 14px 2px 4px; flex-wrap: wrap; } .bm-tabelle-fuss small { color: var(--text-muted); font-size: .76rem; }