/* BIM-Objektbuch — S+B Palette (aus dem BIM-Dashboard). Immer Variablen, nie feste Farben. */
:root {
  --teal: #004F59; --teal-mid: #407B83; --teal-dark: #003D46; --teal-light: #BFD3D5; --teal-50: #7FA7AC;
  --bg: #ffffff; --bg2: #F0EDEA; --bg3: #E2DCD5; --sand: #C5B9AC; --sand-75: #D4CBC1;
  --blau-50: #47BBCE; --rot-75: #ED8A90;
  --tx: #1a1a1a; --tx2: #5D5D5C; --tx3: #8A8F98;
  --bd: rgba(0,0,0,0.08); --bd2: rgba(0,0,0,0.16);
  --ok: #16A37A; --ok-bg: #DCFAF0; --ok-tx: #065F46;
  --warn: #D97706; --warn-bg: #FEF3C7; --warn-tx: #78350F;
  --err: #EA6269; --err-bg: #FDEAEB; --err-tx: #7A2329;
  --blue-bg: #E4F4F7; --blue-tx: #006D7F;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.16);
  --r: 8px; --rL: 10px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-kpi: 28px;
  --sidebar-w: 236px; --topbar-h: 56px;
  --z-sticky: 2; --z-chrome: 100; --z-drawer: 200; --z-modal: 2000; --z-popover: 3000; --z-toast: 4000;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: Roboto, "Open Sans", "Segoe UI", Arial, sans-serif; font-size: var(--fs-base); color: var(--tx);
  background: var(--bg2); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--teal-mid); }

/* ── Grundgerüst ───────────────────────────────────────────── */
#app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh; height: 100dvh; }
#topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--teal); color: #fff; z-index: var(--z-chrome); }
#topbar .marke { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .2px;
  font-size: var(--fs-lg); color: #fff; text-decoration: none; min-width: calc(var(--sidebar-w) - 36px); }
#topbar .marke svg { width: 22px; height: 22px; }
#topbar .proj { display: flex; align-items: center; gap: 8px; }
#topbar select { background: var(--teal-dark); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; padding: 5px 8px; max-width: 260px; }
#topbar .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: var(--fs-md); }
#topbar .als { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08);
  border-radius: 8px; padding: 4px 4px 4px 10px; }
#topbar .als .lbl { opacity: .8; font-size: var(--fs-sm); }
#topbar .gruppe-badge { background: var(--teal-light); color: var(--teal); border-radius: 999px; padding: 2px 9px;
  font-size: var(--fs-xs); font-weight: 700; }
#sidebar { background: var(--bg); border-right: 1px solid var(--bd); overflow-y: auto; padding: 14px 10px; }
#sidebar .sb-titel { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .6px; color: var(--tx3);
  padding: 14px 10px 6px; font-weight: 700; }
.sb-item { text-decoration: none; display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left;
  padding: 8px 10px; border-radius: 7px; color: var(--tx2); font-size: var(--fs-md); }
.sb-item svg { color: var(--teal-mid); flex: none; }
.sb-item:hover { background: var(--bg2); }
.sb-item.aktiv { background: var(--teal-light); color: var(--teal); font-weight: 600; }
.sb-item .zahl { margin-left: auto; background: var(--warn-bg); color: var(--warn-tx); border-radius: 999px;
  font-size: var(--fs-xs); padding: 1px 7px; font-weight: 700; }
#content { overflow: auto; position: relative; min-width: 0; }
.seite { padding: 20px 24px 40px; }
.seite.voll { padding: 0; height: 100%; display: flex; flex-direction: column; }

/* ── Kopf einer Seite ─────────────────────────────────────── */
.kopf { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.kopf h1 { font-size: var(--fs-xl); color: var(--teal); font-weight: 700; }
.kopf .unter { color: var(--tx2); font-size: var(--fs-md); margin-top: 3px; }
.seiten-aktionen { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Knöpfe ───────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--bd2); background: var(--bg);
  border-radius: 7px; padding: 7px 12px; font-size: var(--fs-md); color: var(--tx); white-space: nowrap; }
.btn svg { color: var(--teal-mid); }
.btn:hover { border-color: var(--teal-mid); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--teal-mid); border-color: var(--teal-mid); color: #fff; font-weight: 600; }
.btn-primary svg { color: #fff; }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn-klein { padding: 4px 9px; font-size: var(--fs-sm); }
.btn-gefahr { color: var(--err-tx); }
.btn-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-tx); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg2); border-color: transparent; }
.btn-icon { padding: 6px; }

/* ── Karten ───────────────────────────────────────────────── */
.karte { background: var(--bg); border-radius: var(--rL); box-shadow: var(--shadow-sm); border: 1px solid var(--bd);
  padding: 16px 18px; }
.karte h2 { font-size: var(--fs-lg); color: var(--teal); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.karte h3 { font-size: var(--fs-md); color: var(--tx2); margin: 14px 0 6px; text-transform: uppercase;
  letter-spacing: .5px; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.projekt-karte { cursor: pointer; transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; gap: 10px; }
.projekt-karte:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.projekt-karte .pk-kopf { display: flex; align-items: center; gap: 10px; }
.projekt-karte .pk-kuerzel { background: var(--teal); color: #fff; font-weight: 700; border-radius: 8px; padding: 8px 9px;
  font-size: var(--fs-sm); letter-spacing: .5px; }
.projekt-karte .pk-name { font-weight: 700; font-size: var(--fs-lg); }
.projekt-karte .pk-gruppe { color: var(--tx2); font-size: var(--fs-sm); }
.zahlen { display: flex; gap: 18px; color: var(--tx2); font-size: var(--fs-sm); }
.zahlen b { display: block; color: var(--tx); font-size: var(--fs-xl); font-weight: 700; }
.aufgaben { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px;
  font-size: var(--fs-sm); background: var(--bg2); color: var(--tx2); border: 1px solid transparent; }
.chip.warn { background: var(--warn-bg); color: var(--warn-tx); }
.chip.err { background: var(--err-bg); color: var(--err-tx); }
.chip.ok { background: var(--ok-bg); color: var(--ok-tx); }
.chip.blau { background: var(--blue-bg); color: var(--blue-tx); }
button.chip { cursor: pointer; }
button.chip.an, .chip.an { border-color: var(--teal-mid); background: var(--teal-light); color: var(--teal); font-weight: 600; }
.leise { color: var(--tx3); font-size: var(--fs-sm); }

/* ── Werkzeugleiste der Liste ─────────────────────────────── */
.leiste { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg);
  border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.leiste .titel { font-weight: 700; color: var(--teal); font-size: var(--fs-lg); margin-right: 6px; }
.tabs { display: flex; gap: 2px; background: var(--bg2); border-radius: 8px; padding: 3px; }
.tabs button { border: 0; background: none; padding: 5px 11px; border-radius: 6px; font-size: var(--fs-md); color: var(--tx2); }
.tabs button.an { background: var(--bg); color: var(--teal); font-weight: 600; box-shadow: var(--shadow-sm); }
.suche { display: flex; align-items: center; gap: 6px; border: 1px solid var(--bd2); border-radius: 7px; padding: 5px 9px;
  background: var(--bg); }
.suche input { border: 0; outline: 0; width: 150px; font-size: var(--fs-md); }
.suche svg { color: var(--tx3); }
.stand-banner { background: var(--blue-bg); color: var(--blue-tx); padding: 7px 16px; font-size: var(--fs-md);
  display: flex; align-items: center; gap: 10px; }
.legende { display: flex; gap: 14px; align-items: center; padding: 6px 16px; font-size: var(--fs-sm); color: var(--tx2);
  background: var(--bg); border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px;
  border: 1px solid var(--bd2); }
.grid-rahmen { flex: 1; min-height: 0; display: flex; }
.grid-rahmen > .grid { flex: 1; min-width: 0; }

/* ── Tabulator im S+B-Kleid ───────────────────────────────── */
.tabulator { border: 0; background: var(--bg); font-size: var(--fs-md); }
.tabulator .tabulator-header { background: var(--bg); border-bottom: 2px solid var(--teal-light); font-weight: 700; }
.tabulator .tabulator-header .tabulator-col { background: var(--bg); border-right: 1px solid var(--bd); }
.tabulator .tabulator-header .tabulator-col .tabulator-col-title { font-weight: 700; color: var(--tx); white-space: normal; }
.tabulator .tabulator-header .tabulator-col.col-gruppe-kopf { background: var(--bg2); }
.tabulator .tabulator-header .tabulator-col .col-gruppe { display: block; font-size: var(--fs-xs); font-weight: 500;
  color: var(--tx3); }
.tabulator .tabulator-header .tabulator-col.col-meine { border-top: 3px solid var(--teal-mid); }
.tabulator-row { border-bottom: 1px solid var(--bd); }
.tabulator-row.tabulator-row-even { background: #FBFAF9; }
.tabulator-row .tabulator-cell { border-right: 1px solid var(--bd); padding: 6px 8px; }
.tabulator-row .tabulator-cell.z-gesperrt { background: rgba(226,220,213,.45); color: var(--tx2); }
.tabulator-row .tabulator-cell.z-modell { background: rgba(240,237,234,.65); color: var(--tx2); }
.tabulator-row .tabulator-cell.z-bestaetigen { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn); }
.tabulator-row .tabulator-cell.z-abweichend { background: var(--err-bg); box-shadow: inset 0 0 0 1px var(--err); }
.tabulator-row .tabulator-cell.z-geerbt { font-style: italic; color: var(--tx2); }
.tabulator-row .tabulator-cell.z-phase { background: var(--blue-bg); box-shadow: inset 0 0 0 1px var(--blue-50); }
.tabulator .tabulator-header .tabulator-col.col-phase { background: var(--blue-bg); }
.tabulator-row .tabulator-cell.z-leer { background: repeating-linear-gradient(45deg, #fff, #fff 5px, var(--err-bg) 5px, var(--err-bg) 7px); }
.tabulator-row .tabulator-cell.z-frisch { animation: frisch 1.4s ease-out; }
@keyframes frisch { from { background: var(--ok-bg); } }
.tabulator-row.r-fehlt .tabulator-cell { color: var(--err-tx); text-decoration: line-through; text-decoration-color: rgba(122,35,41,.4); }
.tabulator-row.r-neu .tabulator-cell:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.tabulator-row.r-fehlt .tabulator-cell:first-child { box-shadow: inset 3px 0 0 var(--err); }
.tabulator-row.tabulator-group { background: var(--bg2); border-bottom: 1px solid var(--bd2); font-weight: 700; color: var(--teal); }
.tabulator .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected),
.tabulator .tabulator-row .tabulator-cell.tabulator-range-selected { background-color: rgba(64,123,131,.16); }
.tabulator .tabulator-range-overlay .tabulator-range.tabulator-range-active { border-color: var(--teal-mid); }
.tabulator .tabulator-range-overlay .tabulator-range-cell-active { border-color: var(--teal); }
.tabulator-row .tabulator-cell.zeilen-nr, .tabulator .tabulator-header .tabulator-col.zeilen-nr { background: var(--bg2); color: var(--tx3); font-size: var(--fs-xs); }
.zelle-marke { float: right; display: inline-flex; color: var(--warn); margin-left: 4px; }
.zelle-marke.err { color: var(--err); }
.zelle-marke.blau { color: var(--blue-tx); }
.ty-tab th { white-space: nowrap; vertical-align: bottom; }
a.chip { text-decoration: none; color: inherit; }
.ty-tab th.ty-phase { background: var(--blue-bg); }
.ty-tab .col-gruppe { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--tx3); }
.ty-tab .ty-feld { min-width: 110px; padding: 4px 6px; }
.ls-phasen { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--tx2); }
.kennung-link { color: var(--teal); font-weight: 600; cursor: pointer; }
.kennung-link:hover { text-decoration: underline; }
.st-badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: var(--fs-xs); font-weight: 700; text-decoration: none; }
.st-badge.neu { background: var(--ok-bg); color: var(--ok-tx); }
.st-badge.fehlt { background: var(--err-bg); color: var(--err-tx); }
.tabulator-menu { border-radius: 8px; box-shadow: var(--shadow-lg); border: 1px solid var(--bd); font-size: var(--fs-md); }
.tabulator-menu .tabulator-menu-item { padding: 7px 14px; }
.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover { background: var(--teal-light); }

/* ── Detail-Schublade ─────────────────────────────────────── */
.schublade { width: 400px; flex: none; border-left: 1px solid var(--bd); background: var(--bg); overflow-y: auto;
  padding: 16px 18px; box-shadow: -4px 0 12px rgba(0,0,0,.04); }
.schublade .sch-kopf { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.schublade h2 { font-size: var(--fs-lg); color: var(--teal); }
.schublade .sch-zu { margin-left: auto; }
.schublade h3 { font-size: var(--fs-xs); color: var(--tx2); text-transform: uppercase; letter-spacing: .5px; margin: 16px 0 6px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 4px 10px; font-size: var(--fs-md); }
.kv dt { color: var(--tx3); }
.kv dd { word-break: break-word; }
.zeitleiste { list-style: none; border-left: 2px solid var(--teal-light); margin: 6px 0 0 6px; padding-left: 14px; }
.zeitleiste li { position: relative; padding: 0 0 12px; font-size: var(--fs-md); }
.zeitleiste li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--teal-mid); }
.zeitleiste li.obj::before { background: var(--teal-mid); }
.zeitleiste li.warn::before { border-color: var(--warn); background: var(--warn-bg); }
.zeitleiste .zl-zeit { color: var(--tx3); font-size: var(--fs-xs); }
.zeitleiste .zl-was { font-weight: 600; }
.zeitleiste .zl-wert { color: var(--tx2); }
.zeitleiste .zl-grund { color: var(--tx3); font-size: var(--fs-sm); }
.alt { text-decoration: line-through; color: var(--tx3); }

/* ── Abgleich ─────────────────────────────────────────────── */
.abgleich-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.lauf { display: block; width: 100%; text-align: left; border: 1px solid var(--bd); background: var(--bg); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; }
.lauf.an { border-color: var(--teal-mid); box-shadow: 0 0 0 2px var(--teal-light); }
.lauf .l-name { font-weight: 600; font-size: var(--fs-md); }
.lauf .l-meta { color: var(--tx3); font-size: var(--fs-xs); margin-top: 2px; }
.lauf .aufgaben { margin-top: 6px; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.kennzahl { background: var(--bg2); border-radius: 8px; padding: 10px 12px; }
.kennzahl b { display: block; font-size: var(--fs-kpi); color: var(--teal); line-height: 1.1; }
.kennzahl span { color: var(--tx2); font-size: var(--fs-sm); }
.kennzahl.warn b { color: var(--warn); }
.kennzahl.err b { color: var(--err); }
.paar { display: grid; grid-template-columns: 1fr 1fr 210px; gap: 0; border: 1px solid var(--bd); border-radius: var(--rL);
  overflow: hidden; margin-bottom: 12px; background: var(--bg); }
.paar .seite-a, .paar .seite-b { padding: 12px 14px; }
.paar .seite-a { background: var(--err-bg); }
.paar .seite-b { background: var(--ok-bg); }
.paar .p-titel { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--tx2); margin-bottom: 4px; font-weight: 700; }
.paar .p-kennung { font-size: var(--fs-lg); font-weight: 700; }
.paar .p-plan { grid-column: 3; grid-row: 1 / span 2; border-left: 1px solid var(--bd); padding: 8px; display: flex;
  flex-direction: column; gap: 6px; background: var(--bg); }
.paar .p-fuss { grid-column: 1 / span 2; padding: 10px 14px; border-top: 1px solid var(--bd); display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; background: var(--bg); }
.score { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--teal); }
.score .balken { width: 90px; height: 7px; border-radius: 4px; background: var(--bg3); overflow: hidden; }
.score .balken i { display: block; height: 100%; background: var(--teal-mid); }
.paar .grund { color: var(--tx2); font-size: var(--fs-md); flex: 1 1 260px; }
.entscheid { display: flex; gap: 6px; margin-left: auto; }
.entscheid .btn.gewaehlt { background: var(--teal); color: #fff; border-color: var(--teal); }
.entscheid .btn.gewaehlt svg { color: #fff; }
table.tab { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.tab th { text-align: left; font-weight: 700; padding: 7px 8px; border-bottom: 2px solid var(--teal-light); background: var(--bg);
  position: sticky; top: 0; z-index: var(--z-sticky); }
table.tab td { padding: 7px 8px; border-bottom: 1px solid var(--bd); vertical-align: top; }
table.tab tr.vorgang td { background: var(--bg2); }
table.tab tr.kind td:first-child { padding-left: 26px; }
table.tab .wert-alt { color: var(--tx3); }
table.tab .wert-neu { font-weight: 600; }
details.abschnitt { margin-top: 14px; }
details.abschnitt > summary { cursor: pointer; font-weight: 700; color: var(--teal); padding: 6px 0; list-style: none;
  display: flex; align-items: center; gap: 8px; }
details.abschnitt > summary::-webkit-details-marker { display: none; }
details.abschnitt > summary::before { content: "►"; font-size: 9px; color: var(--teal-mid); }
details.abschnitt[open] > summary::before { content: "▼"; }
.leer-zustand { text-align: center; padding: 48px 20px; color: var(--tx2); border: 2px dashed var(--bd2); border-radius: var(--rL);
  background: var(--bg); }
.leer-zustand h3 { color: var(--teal); margin-bottom: 6px; }
.leer-zustand .btn { margin-top: 14px; }
.ablage { border: 2px dashed var(--teal-50); border-radius: var(--rL); padding: 22px; text-align: center; color: var(--tx2);
  background: var(--bg); }
.ablage.drueber { background: var(--teal-light); }

/* ── Grundriss ────────────────────────────────────────────── */
.plan-rahmen { background: var(--bg); border-radius: var(--rL); border: 1px solid var(--bd); padding: 10px; }
.plan-rahmen svg { width: 100%; height: auto; display: block; }
.plan-raum { stroke: var(--teal); stroke-width: .06; cursor: pointer; }
.plan-raum:hover { stroke-width: .14; }
.plan-raum.fehlt { fill: var(--err-bg) !important; stroke: var(--err); stroke-dasharray: .3 .2; }
.plan-text { font-size: .42px; fill: var(--tx); pointer-events: none; text-anchor: middle; font-weight: 600; }
.plan-text2 { font-size: .32px; fill: var(--tx2); pointer-events: none; text-anchor: middle; }
.plan-tuer { cursor: pointer; }
.plan-legende { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: var(--fs-sm); color: var(--tx2); }
.plan-legende i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 5px; vertical-align: -3px;
  border: 1px solid var(--bd2); }

/* ── Formulare, Dialoge, Toast ────────────────────────────── */
label.feld { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--tx2); }
input.eingabe, select.eingabe, textarea.eingabe { border: 1px solid var(--bd2); border-radius: 7px; padding: 7px 9px;
  background: var(--bg); font-size: var(--fs-md); color: var(--tx); }
input.eingabe:focus, select.eingabe:focus { outline: 2px solid var(--teal-light); border-color: var(--teal-mid); }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.modal-hinten { position: fixed; inset: 0; background: rgba(0,30,35,.35); display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal); padding: 12px; }
.modal { background: var(--bg); border-radius: 12px; box-shadow: var(--shadow-lg); width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal.breit { width: min(980px, calc(100vw - 24px)); }
.modal .m-kopf { padding: 16px 20px 6px; font-size: var(--fs-lg); font-weight: 700; color: var(--teal); }
.modal .m-inhalt { padding: 8px 20px 12px; overflow-y: auto; }
.modal .m-fuss { padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--bd); }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--teal); color: #fff; padding: 10px 18px;
  border-radius: 8px; box-shadow: var(--shadow-lg); z-index: var(--z-toast); font-size: var(--fs-md); display: none; max-width: 80vw; }
#toast.on { display: block; }
#toast.error { background: var(--err-tx); }
.menue { position: absolute; background: var(--bg); border: 1px solid var(--bd); border-radius: 8px; box-shadow: var(--shadow-lg);
  z-index: var(--z-popover); min-width: 220px; padding: 5px; }
.menue button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 8px 10px; text-align: left;
  border-radius: 6px; font-size: var(--fs-md); }
.menue button:hover { background: var(--teal-light); }
.menue .trenn { height: 1px; background: var(--bd); margin: 4px 0; }
.infotip { display: inline-flex; color: var(--teal-mid); cursor: help; vertical-align: -2px; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix select { border: 1px solid var(--bd2); border-radius: 6px; padding: 3px 5px; }
.matrix select.s2 { background: var(--ok-bg); color: var(--ok-tx); font-weight: 600; }
.matrix select.s1 { background: var(--bg2); }
.matrix select.s0 { background: var(--bg3); color: var(--tx3); }
.matrix select.s-wie { color: var(--tx3); font-style: italic; }
.login { max-width: 380px; margin: 12vh auto; }
.login .karte { display: flex; flex-direction: column; gap: 12px; }
.prototyp-hinweis { background: var(--warn-bg); color: var(--warn-tx); padding: 8px 12px; border-radius: 8px; font-size: var(--fs-md); }
.zuordnung-tab td, .zuordnung-tab th { padding: 5px 8px; }
.zuordnung-tab select { width: 100%; }
.zuordnung-tab .bsp { color: var(--tx3); font-size: var(--fs-sm); }
.zuordnung-tab tr.zugeordnet td:first-child { font-weight: 600; color: var(--teal); }

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; grid-template-rows: var(--topbar-h) auto 1fr; }
  #sidebar { display: flex; overflow-x: auto; padding: 6px; gap: 4px; border-right: 0; border-bottom: 1px solid var(--bd); }
  #sidebar .sb-titel { display: none; }
  .sb-item { white-space: nowrap; width: auto; }
  .schublade { position: fixed; inset: var(--topbar-h) 0 0 auto; width: min(400px, 100vw); z-index: var(--z-drawer); }
  .abgleich-layout { grid-template-columns: 1fr; }
  .paar { grid-template-columns: 1fr; }
  .paar .p-plan, .paar .p-fuss { grid-column: auto; grid-row: auto; }
  #topbar .marke span { display: none; }
  #topbar .marke { min-width: 0; }
  input.eingabe, select.eingabe { font-size: 16px; }
}

/* Objekt-Details: Grundrissbild des Bauteils */
.sch-bild { display: block; width: 100%; height: auto; margin-top: 12px; border: 1px solid var(--bg3); border-radius: 6px; background: var(--bg); }

/* Einstellungen › Listen: Spaltenauswahl */
.es-spalten-box { max-height: 320px; overflow-y: auto; border: 1px solid var(--bg3); border-radius: 6px; padding: 8px 10px; }
.es-spalten { list-style: none; margin: 0; padding: 0; }
.es-spalten li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
.es-spalten label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.es-pfeile { display: flex; gap: 2px; }

/* Merkmale: Herkunft der Modellspalten im IFC */
.es-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -4px 0 12px; font-size: var(--fs-sm); }
.hq-tab tr[data-q] { cursor: pointer; }
.hq-tab tr[data-q]:hover td { background: var(--bg2); }
.hq-tab tr.hq-guid td { color: var(--tx3); }
.fa-tab input[type=color] { width: 44px; height: 26px; padding: 0; border: 1px solid var(--bd); border-radius: 4px; background: none; cursor: pointer; }
.fa-tab td { vertical-align: middle; }
.hq-tab code { font-size: var(--fs-sm); }

/* Merkmal-Dialog: verfügbare Psets und Eigenschaften */
.mk-ps { margin-top: 10px; }
.mk-ps summary { cursor: pointer; font-size: var(--fs-sm); color: var(--tx2); }
.mk-ps-hinweis { margin-top: 6px; font-size: var(--fs-sm); min-height: 1em; }
.mk-ps-tab tr.mk-ps-kopf td { background: var(--bg2); padding-top: 6px; }
.mk-ps-tab tr.an td { background: var(--blue-bg); }
.mk-ps-tab th { position: sticky; top: -8px; background: var(--bg); z-index: 1; }

/* 3D-Ansicht */
.v3-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 10px; font-size: var(--fs-sm); color: var(--tx2); }
.v3-leiste label { display: flex; align-items: center; gap: 6px; }
.v3-rahmen { position: relative; height: calc(100vh - 210px); min-height: 360px; background: var(--bg); border: 1px solid var(--bg3); border-radius: 8px; overflow: hidden; }
#v3-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.v3-info { position: absolute; top: 12px; right: 12px; width: 280px; background: var(--bg); border: 1px solid var(--bg3); border-radius: 8px; padding: 12px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.v3-info h3 { margin: 2px 0 6px; color: var(--teal); }
.v3-laden { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg); border: 1px solid var(--bg3); border-radius: 8px; padding: 12px 18px; box-shadow: 0 4px 16px rgba(0,0,0,.08); color: var(--teal); font-weight: 600; }
.v3-legende { position: absolute; left: 12px; bottom: 10px; background: rgba(255,255,255,.88); border-radius: 6px; padding: 4px 8px; }

/* Quellen */
.qu-tab tr.qu-gruppe td { background: var(--bg2); color: var(--tx2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qu-tab td { vertical-align: top; }