/* Digitaler Bauleiter – Maske „Ablaufplan“ in den Stammdaten (v684).
   Abgestimmter Entwurf „Bauleiter-Ablaufplan“ Version 6. Symmetrie ist Pflicht: Bedienelemente einer Zeile
   30 px, Spaltenköpfe 44 px, Kachelraster (alle Karten eines Bereichs gleich hoch), gleiche Innenabstände.
   Alles ist unter #stammdatenBauleiter gekapselt; die ID schlägt die globalen Regeln für button/select/label. */
#stammdatenBauleiter {
  --bl-surface: var(--surface);
  --bl-surface-2: color-mix(in srgb, var(--text) 3%, var(--surface));
  --bl-canvas: color-mix(in srgb, var(--text) 2.5%, var(--bg));
  --bl-border: var(--border);
  --bl-border-strong: color-mix(in srgb, var(--text) 20%, var(--border));
  --bl-muted: var(--text-muted);
  --bl-faint: color-mix(in srgb, var(--text-muted) 72%, var(--surface));
  --bl-accent: var(--accent);
  --bl-accent-soft: color-mix(in srgb, var(--accent) 15%, var(--surface));
  --bl-ok: var(--ok);
  --bl-ok-soft: color-mix(in srgb, var(--ok) 15%, var(--surface));
  --bl-info: var(--accent);
  --bl-info-soft: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --bl-warn: var(--warn);
  --bl-warn-soft: color-mix(in srgb, var(--warn) 15%, var(--surface));
  --bl-bad: var(--bad);
  --bl-bad-soft: color-mix(in srgb, var(--bad) 14%, var(--surface));
  --bl-wait: color-mix(in srgb, var(--text-muted) 85%, var(--surface));
  --bl-wait-soft: color-mix(in srgb, var(--text) 6%, var(--surface));
  --bl-done: color-mix(in srgb, var(--text-muted) 40%, var(--surface));
  --bl-kante: color-mix(in srgb, var(--text-muted) 75%, var(--surface));
  --bl-kante-ext: #c9a800;
  --bl-tint: 16%;
  --bl-ring: rgba(255, 255, 255, .18);
  --bl-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --bl-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  border: 1px solid var(--bl-border);
  border-radius: 0 0 12px 12px;
  padding: 12px;
  font-size: 13px;
  color: var(--text);
}
html[data-theme="light"] #stammdatenBauleiter { --bl-tint: 26%; --bl-ring: rgba(16, 24, 40, .2); --bl-shadow: 0 1px 2px rgba(16, 24, 40, .07); --bl-kante-ext: #b89a00; }
#stammdatenBauleiter [hidden] { display: none !important; }
#stammdatenBauleiter button, #stammdatenBauleiter select, #stammdatenBauleiter input { font: inherit; color: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
#stammdatenBauleiter button { width: auto; min-height: 0; border-radius: 8px; cursor: pointer; font-weight: 500; line-height: 1; }
#stammdatenBauleiter label { display: flex; margin: 0; font-size: inherit; color: inherit; font-weight: inherit; }
#stammdatenBauleiter select { width: auto; height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--bl-border); border-radius: 8px; background-color: var(--bl-surface); font-size: 12.5px; line-height: 1; }
#stammdatenBauleiter :focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
#stammdatenBauleiter .bl-raster { display: grid; gap: 12px; }

/* Kopfleiste: Kennzahlen · Vorschau-Projekt · Aktionen (alles 30 px) */
#stammdatenBauleiter .bl-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
#stammdatenBauleiter .bl-kennz { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#stammdatenBauleiter .bl-kz { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--bl-border); background: var(--bl-surface); color: var(--bl-muted); font-size: 12.5px; white-space: nowrap; }
#stammdatenBauleiter .bl-kz strong { font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }
#stammdatenBauleiter .bl-kz i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#stammdatenBauleiter .bl-kz.bl-leer { color: var(--bl-muted); border-style: dashed; }
#stammdatenBauleiter .bl-aktionen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin-left: auto; }
#stammdatenBauleiter .bl-werkzeuge { display: contents; }
#stammdatenBauleiter .bl-knopf { height: 30px; border: 1px solid var(--bl-border); background: var(--bl-surface); padding: 0 10px; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
#stammdatenBauleiter .bl-knopf:hover:not([disabled]) { border-color: var(--bl-border-strong); }
#stammdatenBauleiter .bl-knopf[disabled] { opacity: .45; cursor: default; }
#stammdatenBauleiter .bl-knopf.bl-primaer { background: var(--bl-accent); border-color: var(--bl-accent); color: #fff; font-weight: 600; }
#stammdatenBauleiter .bl-vorschau-wahl { height: 30px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bl-muted); white-space: nowrap; }
#stammdatenBauleiter .bl-vorschau-wahl select { max-width: 260px; }
#stammdatenBauleiter .bl-pruefung { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 12px; line-height: 1; background: var(--bl-ok-soft); color: var(--bl-ok); white-space: nowrap; }
#stammdatenBauleiter .bl-pruefung[data-art="warn"] { background: var(--bl-warn-soft); color: var(--bl-warn); }
#stammdatenBauleiter .bl-pruefung[data-art="bad"] { background: var(--bl-bad-soft); color: var(--bl-bad); }
#stammdatenBauleiter .bl-speicher { height: 30px; display: inline-flex; gap: 6px; align-items: center; padding: 0 4px; font-size: 12px; color: var(--bl-muted); white-space: nowrap; }
#stammdatenBauleiter .bl-speicher::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bl-ok); }
#stammdatenBauleiter .bl-speicher[data-stand="laeuft"]::before, #stammdatenBauleiter .bl-speicher[data-stand="offen"]::before { background: var(--bl-warn); }
#stammdatenBauleiter .bl-speicher[data-stand="fehler"] { color: var(--bl-bad); }
#stammdatenBauleiter .bl-speicher[data-stand="fehler"]::before { background: var(--bl-bad); }
#stammdatenBauleiter .bl-speicher[data-stand="vorlage"]::before { background: var(--bl-faint); }
#stammdatenBauleiter .bl-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--bl-border-strong); color: var(--bl-muted); font-size: 12.5px; }
#stammdatenBauleiter .bl-banner[data-art="warn"] { border-style: solid; border-color: color-mix(in srgb, var(--bl-warn) 45%, var(--bl-border)); background: var(--bl-warn-soft); color: var(--text); }
#stammdatenBauleiter .bl-banner p { margin: 0; flex: 1 1 320px; }

/* Drei Spalten: Attributgruppen | Ablaufplan | Eigenschaften (Köpfe 44 px auf einer Linie) */
/* v685: Die Fläche füllt das Fenster bis unten (Höhe aus bauleiter.js, --bl-hoehe); alle drei Spalten gleich hoch,
   Gruppenliste und Eigenschaften scrollen in sich – kein Platz wird verschenkt, die Spalten enden auf einer Linie. */
#stammdatenBauleiter .bl-flaeche { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 12px; align-items: stretch; height: var(--bl-hoehe, 640px); }
#stammdatenBauleiter .bl-flaeche > .bl-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#stammdatenBauleiter .bl-flaeche > .bl-panel > * { flex: 0 0 auto; }
#stammdatenBauleiter .bl-flaeche > .bl-panel > #blPalette, #stammdatenBauleiter .bl-flaeche > .bl-panel > .bl-scroll, #stammdatenBauleiter .bl-flaeche > .bl-panel > .bl-insp { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
#stammdatenBauleiter .bl-panel { background: var(--bl-surface); border: 1px solid var(--bl-border); border-radius: 12px; min-width: 0; }
#stammdatenBauleiter .bl-panel-kopf { height: 44px; padding: 0 12px; border-bottom: 1px solid var(--bl-border); font-size: 11.5px; color: var(--bl-muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#stammdatenBauleiter .bl-suche { display: block; margin: 10px 10px 4px; width: calc(100% - 20px); height: 32px; padding: 0 10px; border: 1px solid var(--bl-border); border-radius: 8px; background: var(--bl-surface-2); font-size: 12.5px; }
#stammdatenBauleiter .bl-gk { margin: 4px 6px; border-radius: 8px; }
#stammdatenBauleiter .bl-gk summary { height: 36px; list-style: none; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
#stammdatenBauleiter .bl-gk summary::-webkit-details-marker { display: none; }
#stammdatenBauleiter .bl-gk summary:hover { background: var(--bl-surface-2); }
#stammdatenBauleiter .bl-gk summary .bl-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stammdatenBauleiter .bl-gk summary .bl-rechts { flex: 0 0 34px; display: flex; justify-content: flex-end; align-items: center; }
#stammdatenBauleiter .bl-gk summary .bl-zahl { font-size: 11px; color: var(--bl-muted); font-variant-numeric: tabular-nums; }
#stammdatenBauleiter .bl-gk summary .bl-pfeil { color: var(--bl-faint); font-size: 10px; width: 10px; transition: transform .15s; }
#stammdatenBauleiter .bl-gk[open] summary .bl-pfeil { transform: rotate(90deg); }
#stammdatenBauleiter .bl-gk summary button { width: 24px; height: 24px; border: 1px solid var(--bl-border-strong); background: var(--bl-surface); border-radius: 6px; font-size: 15px; padding: 0; display: grid; place-items: center; color: var(--bl-muted); }
#stammdatenBauleiter .bl-gk summary button:hover { border-color: var(--bl-accent); color: var(--bl-accent); }
#stammdatenBauleiter .bl-gk ul { list-style: none; margin: 0; padding: 0 4px 6px 26px; }
#stammdatenBauleiter .bl-gk li label { display: flex; gap: 8px; align-items: flex-start; padding: 4px; border-radius: 6px; font-size: 12.5px; line-height: 1.3; cursor: pointer; color: var(--bl-muted); }
#stammdatenBauleiter .bl-gk li label:hover { background: var(--bl-surface-2); color: var(--text); }
#stammdatenBauleiter .bl-gk li input { margin-top: 2px; accent-color: var(--bl-accent); width: auto; height: auto; flex: 0 0 auto; }
#stammdatenBauleiter .bl-gk li input:checked + span { color: var(--text); }
#stammdatenBauleiter .bl-bsp { font-size: 10px; color: var(--bl-muted); border: 1px solid var(--bl-border); border-radius: 4px; padding: 0 4px; margin-left: 4px; white-space: nowrap; }
#stammdatenBauleiter .bl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--gc); box-shadow: inset 0 0 0 1px var(--bl-ring); display: inline-block; }

/* Ansicht-Leiste über dem Plan */
#stammdatenBauleiter .bl-ansicht { min-height: 44px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--bl-border); }
#stammdatenBauleiter .bl-ansicht-l { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#stammdatenBauleiter .bl-seg { height: 30px; display: inline-flex; align-items: stretch; background: var(--bl-surface-2); border: 1px solid var(--bl-border); border-radius: 8px; padding: 2px; gap: 2px; }
#stammdatenBauleiter .bl-seg button { border: 0; background: transparent; border-radius: 6px; padding: 0 10px; font-size: 12px; color: var(--bl-muted); display: inline-flex; align-items: center; }
#stammdatenBauleiter .bl-seg button[aria-pressed="true"] { background: var(--bl-surface); color: var(--text); box-shadow: var(--bl-shadow); font-weight: 600; }
#stammdatenBauleiter .bl-umschalter { height: 30px; border: 1px solid var(--bl-border); background: transparent; border-radius: 999px; padding: 0 12px 0 10px; font-size: 12px; color: var(--bl-muted); display: inline-flex; align-items: center; gap: 6px; }
#stammdatenBauleiter .bl-umschalter::before { content: ""; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--bl-border-strong); background: var(--bl-surface); box-sizing: border-box; }
#stammdatenBauleiter .bl-umschalter[aria-pressed="true"] { color: var(--text); border-color: var(--bl-border-strong); }
#stammdatenBauleiter .bl-umschalter[aria-pressed="true"]::before { background: var(--bl-accent); border-color: var(--bl-accent); box-shadow: inset 0 0 0 2px var(--bl-surface); }
#stammdatenBauleiter .bl-legende { position: relative; font-size: 12px; color: var(--bl-muted); }
#stammdatenBauleiter .bl-legende summary { height: 30px; list-style: none; cursor: pointer; border: 1px solid var(--bl-border); border-radius: 8px; padding: 0 10px; display: flex; align-items: center; }
#stammdatenBauleiter .bl-legende summary::-webkit-details-marker { display: none; }
#stammdatenBauleiter .bl-legende-box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--bl-surface); border: 1px solid var(--bl-border); border-radius: 10px; padding: 10px 12px; width: 300px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); display: grid; gap: 7px; }
#stammdatenBauleiter .bl-legende-box div { display: flex; gap: 8px; align-items: center; }
#stammdatenBauleiter .bl-zoom { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--bl-muted); }
#stammdatenBauleiter .bl-zoom button { border: 1px solid var(--bl-border); background: var(--bl-surface); min-width: 30px; height: 30px; padding: 0 9px; }
#stammdatenBauleiter .bl-zoom .bl-zwert { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

/* Zeichenfläche */
#stammdatenBauleiter .bl-plan-panel { overflow: hidden; }
#stammdatenBauleiter .bl-scroll { overflow: auto; background-color: var(--bl-canvas); background-image: radial-gradient(color-mix(in srgb, var(--bl-border) 75%, transparent) 1px, transparent 1px); background-size: 22px 22px; position: relative; touch-action: pan-x pan-y; }
#stammdatenBauleiter .bl-inhalt { position: relative; }
#stammdatenBauleiter .bl-block { position: absolute; background: var(--bl-surface); border: 1px solid var(--bl-border); border-radius: 12px; z-index: 1; }
#stammdatenBauleiter .bl-block.bl-schritte { background: color-mix(in srgb, var(--bl-surface) 55%, transparent); }
#stammdatenBauleiter .bl-block.bl-gewaehlt { box-shadow: 0 0 0 3px var(--bl-accent-soft); border-color: var(--bl-accent); }
#stammdatenBauleiter .bl-block-kopf { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; background: color-mix(in srgb, var(--gc) var(--bl-tint), var(--bl-surface)); border-bottom: 1px solid var(--bl-border); border-radius: 11px 11px 0 0; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
#stammdatenBauleiter .bl-block-kopf .bl-t { font-weight: 650; font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stammdatenBauleiter .bl-block-kopf .bl-rolle { font-size: 11px; color: var(--bl-muted); white-space: nowrap; }
#stammdatenBauleiter .bl-block-kopf button { border: 0; background: transparent; color: var(--bl-muted); font-size: 15px; padding: 0 3px; border-radius: 4px; height: 22px; }
#stammdatenBauleiter .bl-block-kopf button:hover { background: var(--bl-surface); }
#stammdatenBauleiter .bl-stufe-t { position: absolute; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
#stammdatenBauleiter .bl-st-titel { font-size: 10.5px; line-height: 14px; letter-spacing: .07em; text-transform: uppercase; color: var(--bl-muted); font-weight: 650; }
#stammdatenBauleiter .bl-st-sub { grid-column: 1; font-size: 11px; line-height: 14px; color: var(--bl-faint); }
#stammdatenBauleiter .bl-st-info { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--bl-border-strong); background: var(--bl-surface); color: var(--bl-muted); font-size: 11px; font-weight: 650; padding: 0; display: grid; place-items: center; }
#stammdatenBauleiter .bl-st-info:hover, #stammdatenBauleiter .bl-st-info[aria-expanded="true"] { border-color: var(--bl-accent); color: var(--bl-accent); }
#stammdatenBauleiter .bl-stufen-pop { position: absolute; z-index: 30; width: 320px; background: var(--bl-surface); border: 1px solid var(--bl-border); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); display: grid; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--bl-muted); }
#stammdatenBauleiter .bl-stufen-pop b { color: var(--text); font-weight: 600; }
#stammdatenBauleiter .bl-kette { display: grid; grid-template-columns: repeat(5, auto); align-items: center; justify-content: start; gap: 6px; font-size: 11px; }
#stammdatenBauleiter .bl-kette span:not(.bl-pf) { border: 1px solid var(--bl-border); border-radius: 6px; padding: 2px 8px; background: var(--bl-surface-2); color: var(--text); font-weight: 600; }
#stammdatenBauleiter .bl-kette .bl-pf { color: var(--bl-faint); }
#stammdatenBauleiter .bl-stufen-pop button { justify-self: end; border: 1px solid var(--bl-border); background: var(--bl-surface); padding: 0 10px; height: 28px; font-size: 12px; }
#stammdatenBauleiter .bl-neben-t { position: absolute; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--bl-faint); font-weight: 600; z-index: 2; }
#stammdatenBauleiter svg.bl-kanten { position: absolute; left: 0; top: 0; overflow: visible; z-index: 2; pointer-events: none; }
#stammdatenBauleiter .bl-kante { fill: none; stroke: var(--bl-kante); stroke-width: 1.5; transition: opacity .15s; }
#stammdatenBauleiter .bl-kante.bl-ext { stroke: var(--bl-kante-ext); }
#stammdatenBauleiter .bl-kante.bl-hin { stroke: var(--bl-bad); stroke-dasharray: 5 4; }
#stammdatenBauleiter .bl-kante.bl-hw { stroke: var(--bl-warn); stroke-dasharray: 2 4; stroke-linecap: round; }
#stammdatenBauleiter .bl-kante.bl-versteckt { opacity: 0; }
#stammdatenBauleiter .bl-kante.bl-fokus { opacity: 1 !important; stroke-width: 2.4; }
#stammdatenBauleiter .bl-kante.bl-gedimmt { opacity: .14; }
#stammdatenBauleiter .bl-kante.bl-aktiv { stroke: var(--bl-accent) !important; stroke-width: 2.6; opacity: 1; }
#stammdatenBauleiter .bl-treffer { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; pointer-events: stroke; }
#stammdatenBauleiter .bl-treffer.bl-aus { pointer-events: none; }
#stammdatenBauleiter .bl-feld { position: absolute; background: var(--bl-surface); border: 1px solid var(--bl-border); border-radius: 9px; z-index: 4; cursor: pointer; user-select: none; -webkit-user-select: none; text-align: left; box-shadow: var(--bl-shadow); transition: border-color .12s, box-shadow .12s, opacity .15s; box-sizing: border-box; }
#stammdatenBauleiter .bl-feld:hover, #stammdatenBauleiter .bl-feld.bl-verwandt { border-color: var(--bl-border-strong); }
#stammdatenBauleiter .bl-feld.bl-gewaehlt { border-color: var(--bl-accent); box-shadow: 0 0 0 3px var(--bl-accent-soft); }
#stammdatenBauleiter .bl-feld.bl-zielok { border-color: var(--bl-accent); border-style: dashed; }
#stammdatenBauleiter .bl-feld.bl-gedimmt { opacity: .38; }
#stammdatenBauleiter .bl-feld.bl-zeile { box-shadow: none; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; }
#stammdatenBauleiter .bl-feld.bl-karte { padding: 10px 12px 10px 42px; display: flex; flex-direction: column; }
#stammdatenBauleiter .bl-k-unten { margin-top: auto; }
#stammdatenBauleiter .bl-nr { position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 650; color: var(--bl-muted); background: var(--bl-surface-2); border: 1px solid var(--bl-border); font-variant-numeric: tabular-nums; box-sizing: border-box; }
#stammdatenBauleiter .bl-nr.bl-fertig { background: var(--bl-ok-soft); color: var(--bl-ok); border-color: transparent; }
#stammdatenBauleiter .bl-f-name { font-weight: 600; font-size: 12.5px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#stammdatenBauleiter .bl-z-zeile { display: flex; align-items: center; gap: 6px; min-width: 0; }
#stammdatenBauleiter .bl-zeile .bl-f-name { display: block; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
#stammdatenBauleiter .bl-z-zeile .bl-bsp { flex: 0 0 auto; margin: 0; }
#stammdatenBauleiter .bl-marken { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 8px; }
#stammdatenBauleiter .bl-marke { display: flex; align-items: center; gap: 6px; height: 20px; min-width: 0; font-size: 11px; line-height: 1; padding: 0 8px; border-radius: 999px; background: var(--bl-surface-2); border: 1px solid var(--bl-border); color: var(--bl-muted); box-sizing: border-box; }
#stammdatenBauleiter .bl-marke .bl-mt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stammdatenBauleiter .bl-marke.bl-hin { color: var(--bl-bad); border-color: color-mix(in srgb, var(--bl-bad) 40%, var(--bl-border)); background: var(--bl-bad-soft); }
#stammdatenBauleiter .bl-marke.bl-hw { color: var(--bl-warn); border-color: color-mix(in srgb, var(--bl-warn) 40%, var(--bl-border)); background: var(--bl-warn-soft); }
#stammdatenBauleiter .bl-marke .bl-dot { width: 7px; height: 7px; flex-basis: 7px; }
#stammdatenBauleiter .bl-balken { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-top: 8px; background: var(--bl-wait-soft); }
#stammdatenBauleiter .bl-balken span { display: block; height: 100%; }
#stammdatenBauleiter .bl-f-fuss { font-size: 10.5px; line-height: 14px; color: var(--bl-muted); margin-top: 5px; display: flex; justify-content: space-between; gap: 6px; font-variant-numeric: tabular-nums; }
#stammdatenBauleiter .bl-f-fuss b { color: var(--bl-ok); font-weight: 650; }
#stammdatenBauleiter .bl-port { position: absolute; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--bl-surface); border: 2px solid var(--bl-accent); padding: 0; touch-action: none; opacity: 0; transition: opacity .12s; box-sizing: border-box; }
#stammdatenBauleiter .bl-feld:hover .bl-port, #stammdatenBauleiter .bl-verbindet .bl-port, #stammdatenBauleiter .bl-feld.bl-gewaehlt .bl-port { opacity: 1; }
@media (hover: none) { #stammdatenBauleiter .bl-port { opacity: 1; } }
#stammdatenBauleiter .bl-port:hover { background: var(--bl-accent); }
#stammdatenBauleiter .bl-port { right: -8px; cursor: crosshair; }
#stammdatenBauleiter .bl-karte .bl-port { top: 20px; }
#stammdatenBauleiter .bl-nurlesen .bl-port { display: none; }
#stammdatenBauleiter .bl-leer-hinweis { position: absolute; left: 300px; top: 80px; width: 400px; font-size: 13px; color: var(--bl-muted); background: var(--bl-surface); border: 1px dashed var(--bl-border-strong); border-radius: 10px; padding: 16px; z-index: 6; line-height: 1.5; }

/* Eigenschaften */
#stammdatenBauleiter .bl-insp { padding: 12px 14px 14px; display: grid; gap: 14px; align-content: start; }
#stammdatenBauleiter .bl-insp h3 { font-size: 15px; margin: 0; font-weight: 650; line-height: 1.3; text-wrap: balance; }
#stammdatenBauleiter .bl-i-gruppe { font-size: 11.5px; color: var(--bl-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
#stammdatenBauleiter .bl-satz { font-size: 12.5px; line-height: 1.55; color: var(--bl-muted); margin: 6px 0 0; }
#stammdatenBauleiter .bl-satz b, #stammdatenBauleiter .bl-stufe-erkl b { color: var(--text); font-weight: 600; }
#stammdatenBauleiter .bl-stufe-erkl { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--bl-muted); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
#stammdatenBauleiter .bl-st-chip { font-size: 11px; font-weight: 650; color: var(--text); background: var(--bl-surface-2); border: 1px solid var(--bl-border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
#stammdatenBauleiter .bl-abschnitt { font-size: 11px; color: var(--bl-muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; }
#stammdatenBauleiter .bl-verkn { display: grid; gap: 6px; }
#stammdatenBauleiter .bl-vzeile { border: 1px solid var(--bl-border); border-radius: 8px; padding: 7px 8px; display: grid; gap: 6px; background: var(--bl-surface); }
#stammdatenBauleiter .bl-vzeile.bl-aktiv { border-color: var(--bl-accent); box-shadow: 0 0 0 2px var(--bl-accent-soft); }
#stammdatenBauleiter .bl-v-name { display: flex; gap: 7px; align-items: center; font-size: 12.5px; font-weight: 600; min-width: 0; }
#stammdatenBauleiter .bl-v-name span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stammdatenBauleiter .bl-v-name button { border: 0; background: transparent; color: var(--bl-muted); font-size: 16px; padding: 0 2px; height: 20px; }
#stammdatenBauleiter .bl-v-felder { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
#stammdatenBauleiter .bl-v-felder > span { font-size: 11.5px; color: var(--bl-muted); }
#stammdatenBauleiter .bl-v-felder select, #stammdatenBauleiter .bl-hinzu select { width: 100%; background-color: var(--bl-surface-2); font-size: 12px; }
#stammdatenBauleiter .bl-v-reihe { font-size: 12px; color: var(--bl-muted); }
#stammdatenBauleiter .bl-hinzu { margin-top: 6px; }
#stammdatenBauleiter .bl-vorschau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--bl-border); border: 1px solid var(--bl-border); border-radius: 8px; overflow: hidden; }
#stammdatenBauleiter .bl-vz { padding: 6px 10px; background: var(--bl-surface); font-size: 11px; line-height: 14px; color: var(--bl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stammdatenBauleiter .bl-vz b { display: flex; align-items: center; gap: 5px; font-size: 15px; line-height: 20px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 650; }
#stammdatenBauleiter .bl-vz b i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
#stammdatenBauleiter details.bl-mehr summary { list-style: none; cursor: pointer; font-size: 11px; color: var(--bl-muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; display: flex; justify-content: space-between; }
#stammdatenBauleiter details.bl-mehr summary::-webkit-details-marker { display: none; }
#stammdatenBauleiter details.bl-mehr summary::after { content: var(--t-einblenden, "einblenden"); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--bl-accent); }
#stammdatenBauleiter details.bl-mehr[open] summary::after { content: var(--t-ausblenden, "ausblenden"); }
#stammdatenBauleiter .bl-beispiele { list-style: none; margin: 8px 0 0; padding: 0; display: grid; font-size: 12px; }
#stammdatenBauleiter .bl-beispiele li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--bl-border); }
#stammdatenBauleiter .bl-bsp-n { font-family: var(--bl-mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
#stammdatenBauleiter .bl-chip { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 999px; margin-right: 4px; }
#stammdatenBauleiter .bl-chip[data-s="machbar"] { background: var(--bl-ok-soft); color: var(--bl-ok); }
#stammdatenBauleiter .bl-chip[data-s="abtermin"] { background: var(--bl-info-soft); color: var(--bl-info); }
#stammdatenBauleiter .bl-chip[data-s="blockiert"] { background: var(--bl-bad-soft); color: var(--bl-bad); }
#stammdatenBauleiter .bl-chip[data-s="zuklaeren"] { background: var(--bl-warn-soft); color: var(--bl-warn); }
#stammdatenBauleiter .bl-chip[data-s="wartet"] { background: var(--bl-wait-soft); color: var(--bl-muted); }
#stammdatenBauleiter .bl-art-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--bl-surface-2); border: 1px solid var(--bl-border); border-radius: 8px; padding: 2px; }
#stammdatenBauleiter .bl-art-wahl button { border: 0; background: transparent; border-radius: 6px; height: 28px; font-size: 12px; color: var(--bl-muted); }
#stammdatenBauleiter .bl-art-wahl button[aria-pressed="true"] { background: var(--bl-surface); color: var(--text); box-shadow: var(--bl-shadow); font-weight: 600; }
#stammdatenBauleiter .bl-art-wahl button[disabled] { opacity: .35; cursor: default; }
#stammdatenBauleiter .bl-schalter { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--bl-border); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
#stammdatenBauleiter .bl-schalter input { width: auto; height: auto; accent-color: var(--bl-accent); }
#stammdatenBauleiter .bl-zeilenknoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
#stammdatenBauleiter .bl-gefahr { height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--bl-bad) 50%, var(--bl-border)); color: var(--bl-bad); background: transparent; padding: 0 10px; font-size: 12.5px; }
#stammdatenBauleiter .bl-tipp { font-size: 12px; color: var(--bl-muted); line-height: 1.5; margin: 0; }

@media (max-width: 1240px) {
  /* Eigenschaften unter die Fläche: erste Zeile füllt das Fenster, die Eigenschaften folgen darunter */
  #stammdatenBauleiter .bl-flaeche { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: var(--bl-hoehe, 640px) auto; height: auto; }
  #stammdatenBauleiter .bl-insp-panel { grid-column: 1 / -1; }
  #stammdatenBauleiter .bl-flaeche > .bl-insp-panel > .bl-insp { overflow: visible; }
}
@media (max-width: 820px) {
  /* Schmale Bildschirme: feste Raster statt freiem Umbruch – jede Zeile volle Breite, gleiche Spalten. */
  #stammdatenBauleiter { padding: 10px; }
  #stammdatenBauleiter .bl-leiste, #stammdatenBauleiter .bl-leiste > .bl-kennz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #stammdatenBauleiter .bl-vorschau-wahl { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  #stammdatenBauleiter .bl-vorschau-wahl select { width: 100%; max-width: none; }
  #stammdatenBauleiter #blKennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #stammdatenBauleiter #blKennzahlen .bl-kz { min-width: 0; overflow: hidden; }
  #stammdatenBauleiter #blKennzahlen .bl-kz.bl-leer { grid-column: 1 / -1; white-space: normal; height: auto; min-height: 30px; padding: 6px 10px; line-height: 1.35; }
  #stammdatenBauleiter .bl-aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pruef speicher" "werk werk"; gap: 6px; margin-left: 0; }
  #stammdatenBauleiter .bl-pruefung { grid-area: pruef; justify-content: center; min-width: 0; overflow: hidden; }
  #stammdatenBauleiter .bl-speicher { grid-area: speicher; justify-content: center; border: 1px solid var(--bl-border); border-radius: 999px; }
  #stammdatenBauleiter .bl-werkzeuge { grid-area: werk; display: grid; grid-template-columns: 44px 44px repeat(2, minmax(0, 1fr)); gap: 6px; }
  #stammdatenBauleiter .bl-lang { display: none; }
  #stammdatenBauleiter .bl-ansicht { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
  #stammdatenBauleiter .bl-ansicht-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #stammdatenBauleiter .bl-ansicht-l .bl-seg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  #stammdatenBauleiter .bl-seg button, #stammdatenBauleiter .bl-umschalter { justify-content: center; }
  #stammdatenBauleiter .bl-umschalter[data-o="quellen"] { grid-column: 1 / -1; }
  /* Legende links und Einpassen rechts gleich breit, Zoom mittig */
  #stammdatenBauleiter .bl-ansicht-l + .bl-ansicht-l { grid-template-columns: minmax(0, 1fr) 30px 46px 30px minmax(0, 1fr); }
  #stammdatenBauleiter .bl-zoom { display: contents; }
  #stammdatenBauleiter .bl-zoom button { min-width: 0; padding: 0 6px; }
  #stammdatenBauleiter .bl-zoom .bl-zwert { min-width: 0; align-self: center; }
  #stammdatenBauleiter .bl-legende summary { justify-content: center; }
  #stammdatenBauleiter .bl-legende-box { left: 0; right: auto; width: min(300px, calc(100vw - 56px)); }
  #stammdatenBauleiter .bl-flaeche { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  #stammdatenBauleiter .bl-plan-panel { order: -1; }
  #stammdatenBauleiter .bl-flaeche > .bl-panel > .bl-scroll { flex: none; height: max(420px, 62dvh); }
  #stammdatenBauleiter .bl-flaeche > .bl-panel > #blPalette { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { #stammdatenBauleiter * { transition: none !important; } }