/* Möbelkonfigurator – Oberfläche für Laptop/Notebook (Fahrplan Phase 1).
   Aufbau: Werkzeugleiste · linkes Menü | Viewer | rechtes Menü · Statusleiste. Farben als Tokens, dunkel als Standard. */
:root {
  --bg: #f1f0ed;
  --flaeche: #ffffff;
  --flaeche-2: #f7f6f3;
  --flaeche-3: #eceae5;
  --linie: #dedad2;
  --linie-2: #cfcac0;
  --text: #22201c;
  --text-2: #6b655b;
  --text-3: #8f897e;
  --akzent: #9a5f2c;
  --akzent-text: #ffffff;
  --akzent-weich: #f3e7da;
  --warn: #8a5a00;
  --warn-bg: #fff4d6;
  --fehler: #a4231b;
  --fehler-bg: #fde8e6;
  --ok: #2f6b3a;
  --viewport: radial-gradient(ellipse at 50% 35%, #eef0f1 0%, #d9dcdf 65%, #c9cdd1 100%);
  --viewport-flach: #dfe2e5;
  --schatten: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.05);
  --schatten-gross: 0 12px 40px rgb(0 0 0 / 0.22), 0 2px 6px rgb(0 0 0 / 0.12);
  --radius: 7px;
  --leiste: 42px;
  --status: 26px;
  --breite-links: 260px;
  --breite-rechts: 330px;
  --hero: 46vh;
  /* Rubriken: sechs dezente Farbtöne im Wechsel (Randleiste und leichte Tönung), damit man sich bei offenen Panels zurechtfindet */
  --rubrik-1: #b9772f; --rubrik-2: #2f8f83; --rubrik-3: #4273b8; --rubrik-4: #7d5fb8; --rubrik-5: #b85a78; --rubrik-6: #5a8f45;
  --rubrik-toenung: 6%;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #17171a;
  --flaeche: #202024;
  --flaeche-2: #1b1b1f;
  --flaeche-3: #2a2a30;
  --linie: #313138;
  --linie-2: #41414a;
  --text: #ecebe8;
  --text-2: #a4a19a;
  --text-3: #7c7973;
  --akzent: #d08c4f;
  --akzent-text: #1a1206;
  --akzent-weich: #3a2b1d;
  --warn: #f0c060;
  --warn-bg: #3a3016;
  --fehler: #ff8a80;
  --fehler-bg: #3d1c1a;
  --ok: #8fd19e;
  --viewport: radial-gradient(ellipse at 50% 35%, #3a3a40 0%, #26262b 70%, #1d1d21 100%);
  --viewport-flach: #2a2a30;
  --schatten: 0 1px 2px rgb(0 0 0 / 0.3);
  --schatten-gross: 0 16px 48px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.4);
  --rubrik-1: #d99a55; --rubrik-2: #4fb5a7; --rubrik-3: #6c9ce0; --rubrik-4: #a58ae0; --rubrik-5: #de8aa6; --rubrik-6: #84be6c;
  --rubrik-toenung: 8%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: grid;
  grid-template-rows: var(--leiste) auto auto minmax(0, 1fr) var(--status);   /* Menüleiste, Schnellleiste, Bewegungsleiste, Arbeitsfläche, Status */
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sym { flex: none; display: block; }
h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin: 14px 0 6px; font-weight: 650; }
kbd {
  font: 11px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text-2);
  border: 1px solid var(--linie-2); border-bottom-width: 2px; border-radius: 4px; padding: 2px 4px; background: var(--flaeche-2);
}
kbd:empty { display: none; }

/* ---- Eingaben und Knöpfe */
input[type="number"], input[type="text"], input[type="search"], select {
  height: 28px; padding: 0 7px; min-width: 0;
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 5px;
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input:hover, select:hover { border-color: var(--linie-2); }
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
input[type="color"] { width: 100%; height: 28px; padding: 2px; border: 1px solid var(--linie); border-radius: 5px; background: var(--flaeche-2); }
input[type="range"] { accent-color: var(--akzent); width: 100%; }
button {
  height: 28px; padding: 0 10px; border-radius: 5px; cursor: pointer;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
button:hover:not(:disabled) { border-color: var(--akzent); }
button:disabled { opacity: 0.45; cursor: default; }
button.primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
button.gefahr { color: var(--fehler); }
.symbol-knopf { width: 28px; padding: 0; justify-content: center; background: transparent; border-color: transparent; color: var(--text-2); }
.symbol-knopf:hover:not(:disabled) { background: var(--flaeche-3); border-color: transparent; color: var(--text); }
.symbol-knopf[aria-pressed="true"], .text-knopf[aria-pressed="true"] { background: var(--akzent-weich); color: var(--akzent); }
.text-knopf { padding: 0 8px; background: transparent; border-color: transparent; color: var(--text-2); font-size: 12px; }
.text-knopf:hover:not(:disabled) { background: var(--flaeche-3); border-color: transparent; color: var(--text); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; }

input[type="checkbox"][role="switch"] {
  appearance: none; width: 32px; height: 18px; border-radius: 9px; margin: 0;
  background: var(--linie-2); position: relative; cursor: pointer; transition: background 0.15s; flex: none;
}
input[type="checkbox"][role="switch"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transition: transform 0.15s;
}
input[type="checkbox"][role="switch"]:checked { background: var(--akzent); }
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(14px); }
.mini-schalter { display: flex; align-items: center; gap: 8px; color: var(--text-2); cursor: pointer; }

/* ---- Werkzeugleiste */
.werkzeugleiste {
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); min-width: 0; position: relative; z-index: 20;
}
.marke { display: flex; align-items: center; gap: 8px; font-weight: 650; padding-right: 6px; white-space: nowrap; }
@media (max-width: 1440px) { .marke span { display: none; } }
.menueleiste { display: flex; }
.menue-wrap { position: relative; }
.menue-knopf { background: transparent; border-color: transparent; padding: 0 9px; }
.menue-knopf:hover, .menue-knopf.offen { background: var(--flaeche-3); border-color: transparent; }
.menue {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 250px; padding: 5px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten-gross);
  display: grid; gap: 1px; z-index: 30;
}
.menue-eintrag {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; width: 100%;
  height: 28px; background: transparent; border: 0; text-align: left; border-radius: 5px; padding: 0 8px;
}
.menue-eintrag:hover:not(:disabled), .menue-eintrag:focus-visible { background: var(--akzent-weich); outline: none; }
.m-haken { color: var(--text-2); display: flex; }
.menue-eintrag[aria-checked="true"] .m-haken { color: var(--akzent); }
.m-label { overflow: hidden; text-overflow: ellipsis; }
.menue-trenner { height: 1px; background: var(--linie); margin: 4px 2px; }
.menue-ueberschrift { font-size: 11px; color: var(--text-3); padding: 4px 8px 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.menue-regler { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; padding: 3px 8px; color: var(--text-2); }
.werkzeuge { display: flex; align-items: center; gap: 2px; margin-left: 6px; min-width: 0; overflow: hidden; }
/* die Symbolknöpfe stehen in der Schnellleiste; oben bleiben Menüs, Rückgängig/Wiederholen und die Suche */
.leisten-gruppe { display: flex; align-items: center; gap: 1px; padding: 0 6px; border-left: 1px solid var(--linie); }
.suche-knopf { margin-left: auto; }
.palette-knopf { width: 220px; color: var(--text-3); background: var(--flaeche-2); justify-content: flex-start; }
.palette-knopf kbd { margin-left: auto; }
@media (max-width: 1360px) { .palette-knopf { width: 150px; } .palette-knopf kbd { display: none; } }
.rechts-knoepfe { display: flex; gap: 1px; padding-left: 6px; border-left: 1px solid var(--linie); }

/* ---- Arbeitsfläche */
.arbeitsflaeche {
  display: grid; min-height: 0;
  grid-template-columns: var(--breite-links) 5px minmax(0, 1fr) 5px var(--breite-rechts);
}
.arbeitsflaeche.ohne-links { grid-template-columns: 0 0 minmax(0, 1fr) 5px var(--breite-rechts); }
.arbeitsflaeche.ohne-rechts { grid-template-columns: var(--breite-links) 5px minmax(0, 1fr) 0 0; }
.arbeitsflaeche.ohne-links.ohne-rechts { grid-template-columns: 0 0 minmax(0, 1fr) 0 0; }
.ohne-links .seite-links, .ohne-links .griff-links, .ohne-rechts .seite-rechts, .ohne-rechts .griff-rechts { display: none; }
/* feste Spalten: ausgeblendete Menüs dürfen die automatische Platzierung nicht verschieben */
.seite-links { grid-column: 1; } .griff-links { grid-column: 2; } .viewer { grid-column: 3; }
.griff-rechts { grid-column: 4; } .seite-rechts { grid-column: 5; }
.arbeitsflaeche > * { grid-row: 1; }
.seite { background: var(--flaeche-2); overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.griff { cursor: col-resize; background: var(--linie); transition: background 0.15s; touch-action: none; }
.griff:hover { background: var(--akzent); }

.viewer { position: relative; background: var(--viewport); min-height: 0; overflow: hidden; }
.viewer canvas { display: block; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.mass { font-weight: 600; white-space: nowrap; line-height: 1.2; padding: 1px 5px; border-radius: 4px; background: rgb(20 20 24 / 0.62); }
.viewer-fehler {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: min(720px, calc(100% - 24px));
  padding: 8px 12px; border-radius: 7px; background: var(--fehler-bg); color: var(--fehler); box-shadow: var(--schatten);
  border: 1px solid color-mix(in srgb, var(--fehler) 40%, transparent);
}
.bedienhilfe { position: absolute; left: 12px; bottom: 8px; z-index: 2; color: var(--text-2); font-size: 11.5px; opacity: 0.75; pointer-events: none; }

/* ---- Seitenmenüs: Kopf, Tabs, Panels */
.seiten-kopf { position: sticky; top: 0; z-index: 2; background: var(--flaeche-2); padding: 10px 10px 8px; border-bottom: 1px solid var(--linie); }
.seiten-kopf h2 { margin: 0 0 7px; font-size: 13px; }
.seiten-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 6px; }
.seiten-kopf > :not(h2):not(.symbol-knopf) { grid-column: 1 / -1; }
.seiten-kopf > .symbol-knopf { margin-top: -5px; }
.tabs > .symbol-knopf { flex: none; align-self: center; margin-bottom: 4px; }
.filter { width: 100%; }
.leer { color: var(--text-3); font-size: 12.5px; padding: 8px 10px; margin: 0; }
.akkordeon { padding: 8px; display: grid; gap: 6px; }
.tab-inhalt > .akkordeon { padding: 10px 0 0; }
.panel {
  --rubrik: var(--rubrik-1);
  background: color-mix(in srgb, var(--rubrik) var(--rubrik-toenung), var(--flaeche));
  border: 1px solid var(--linie); border-left: 3px solid color-mix(in srgb, var(--rubrik) 75%, transparent); border-radius: var(--radius);
}
.panel:nth-of-type(6n+2) { --rubrik: var(--rubrik-2); }
.panel:nth-of-type(6n+3) { --rubrik: var(--rubrik-3); }
.panel:nth-of-type(6n+4) { --rubrik: var(--rubrik-4); }
.panel:nth-of-type(6n+5) { --rubrik: var(--rubrik-5); }
.panel:nth-of-type(6n) { --rubrik: var(--rubrik-6); }
.panel[open] > summary { color: color-mix(in srgb, var(--rubrik) 55%, var(--text)); }
.panel > summary:hover { background: color-mix(in srgb, var(--rubrik) 10%, transparent); border-radius: var(--radius); }
.panel > summary {
  cursor: pointer; padding: 8px 10px; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 8px; user-select: none;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.panel[open] > summary::before { transform: rotate(45deg); }
.panel-inhalt { padding: 0 10px 10px; display: grid; gap: 5px; }
.feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); align-items: center; gap: 8px; min-height: 28px; border-radius: 5px; }
.feld > label { color: var(--text-2); line-height: 1.25; }
.feld input[type="number"], .feld select { width: 100%; }
.feld .hilfe { grid-column: 1 / -1; color: var(--text-3); font-size: 11.5px; margin-top: -3px; }
.feld.info, .feld.info-warn { grid-template-columns: 1fr; font-size: 12px; color: var(--text-2); min-height: 0; }
.feld.info-warn { color: var(--warn); }
.feld.schalter { grid-template-columns: 1fr auto; }
.feld.blitz { animation: blitz 1.4s ease-out; }
@keyframes blitz { 0%, 30% { background: var(--akzent-weich); box-shadow: 0 0 0 4px var(--akzent-weich); } 100% { background: transparent; box-shadow: none; } }
.feld-liste { grid-template-columns: 1fr; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 6px; padding: 7px; }
.liste-titel { color: var(--text-2); font-size: 12px; }
.liste { display: grid; gap: 4px; }
.liste-hinweis { font-size: 11.5px; color: var(--text-3); }
.zeile { display: grid; gap: 4px; align-items: center; grid-template-columns: 64px 1fr; }
.zeile.boden { grid-template-columns: 18px 62px 1fr 1fr; }
.zeile.boden:has(input[type="color"]) { grid-template-columns: 18px 58px 1fr 1fr 30px; }
.zeile.tuer { grid-template-columns: 26px 1fr 1fr 1fr; }
.zeile .nr { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 12px; }
.zeile select, .zeile input { width: 100%; font-size: 12px; padding: 0 4px; }

.tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: var(--flaeche-2); z-index: 2; }
.tab {
  flex: 1; justify-content: center; background: transparent; border: 1px solid transparent; border-bottom: 0;
  border-radius: 6px 6px 0 0; color: var(--text-2); height: 30px; padding: 0 6px; font-size: 12.5px;
}
.tab[aria-selected="true"] { background: var(--flaeche); border-color: var(--linie); color: var(--text); margin-bottom: -1px; }
.tab:hover:not([aria-selected="true"]) { color: var(--text); border-color: transparent; }
.tab-inhalt { padding: 4px 10px 16px; }
.klein-label { display: block; color: var(--text-2); font-size: 12px; margin: 10px 0 4px; }
.tab-inhalt .name { width: 100%; font-weight: 600; }
.uebersicht { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; }
.uebersicht dt { color: var(--text-2); }
.uebersicht dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.farbfeld { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--linie-2); vertical-align: -2px; margin-right: 5px; }
.kosten { display: grid; gap: 3px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.kosten-zeile { display: flex; justify-content: space-between; color: var(--text-2); }
.kosten-zeile.gesamt { color: var(--text); border-top: 1px solid var(--linie); padding-top: 5px; margin-top: 3px; }
.kosten-zeile.gesamt strong { font-size: 15px; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.karte { position: relative; }
.karte-knopf {
  display: grid; width: 100%; height: auto; padding: 5px 5px 7px; gap: 2px; text-align: left; white-space: normal;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 7px;
}
.karte-bild { display: block; aspect-ratio: 4 / 3; border-radius: 5px; background: var(--viewport); overflow: hidden; }
.karte-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.karte-bild img:not([src]) { visibility: hidden; }
.karte-name { font-weight: 600; font-size: 12.5px; overflow-wrap: anywhere; hyphens: auto; }
.karte-mass { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.karte-loeschen { position: absolute; top: 8px; right: 8px; background: var(--flaeche); opacity: 0; }
.karte:hover .karte-loeschen, .karte-loeschen:focus-visible { opacity: 1; }

.bib-gruppe { margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { height: 26px; padding: 0 9px; border-radius: 13px; font-size: 12px; }
.chip[aria-pressed="true"] { background: var(--akzent-weich); border-color: var(--akzent); color: var(--text); }

/* ---- Auswahl: Bauteilkarte, Strukturbaum, Tooltip, Mini-Werkzeugleiste, Kontextmenü, Maße bearbeiten (Phase 2) */
.kontext { margin: 8px 8px 0; background: var(--flaeche); border: 1px solid var(--akzent); border-radius: var(--radius); box-shadow: 0 0 0 3px var(--akzent-weich); }
.kontext-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 9px 8px 4px 10px; }
.kontext-art { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.kontext-titel { margin: 2px 0 0; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; }
.kontext-details { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; padding: 0 10px 8px; font-size: 12px; }
.kontext-details dt { color: var(--text-3); }
.kontext-details dd { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kontext-abschnitt { font-size: 11px; font-weight: 650; color: var(--akzent); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 6px; border-top: 1px solid var(--linie); }
.kontext .panel-inhalt > .kontext-abschnitt:first-child { border-top: 0; padding-top: 0; }
.kontext-aktionen { padding: 0 10px 10px; }
.kontext-aktionen button { height: 26px; font-size: 12px; }
.feld.mit-farbe:has(input[type="color"]:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 116px) 30px; }
.alle-titel { margin: 12px 10px 0; }

.baum { display: grid; gap: 2px; font-size: 12.5px; }
.baum summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 5px; user-select: none; }
.baum summary::-webkit-details-marker { display: none; }
.baum summary::before {
  content: ""; width: 5px; height: 5px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(-45deg); transition: transform 0.15s; flex: none; margin: 0 2px;
}
.baum details[open] > summary::before { transform: rotate(45deg); }
.baum summary:hover { background: var(--flaeche-3); }
.baum-titel { font-weight: 600; flex: 1; }
.baum-zahl { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.baum-auge { width: 22px; height: 22px; opacity: 0.55; }
.baum-gruppe.aus > summary { color: var(--text-3); }
.baum-gruppe.aus .baum-auge, .baum-auge:hover, summary:hover .baum-auge { opacity: 1; }
.baum [role="group"] { display: grid; padding-left: 16px; }
.baum-fach > summary { font-weight: 500; color: var(--text-2); }
.baum-blatt {
  height: 24px; justify-content: flex-start; background: transparent; border: 0; border-radius: 5px; padding: 0 8px;
  color: var(--text-2); font-size: 12.5px; width: 100%;
}
.baum-blatt:hover { background: var(--flaeche-3); color: var(--text); border: 0; }
.baum-blatt.gewaehlt { background: var(--akzent-weich); color: var(--text); font-weight: 600; }

.tooltip {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; white-space: nowrap;
  padding: 4px 8px; border-radius: 5px; font-size: 12px; background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); box-shadow: var(--schatten-gross);
}
.minileiste {
  position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 1px; padding: 3px 4px 3px 10px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten-gross);
}
.ml-titel { font-weight: 600; font-size: 12px; padding-right: 6px; white-space: nowrap; }
.minileiste .symbol-knopf { width: 26px; height: 26px; }
.kontextmenue {
  position: fixed; z-index: 70; min-width: 220px; max-width: 320px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 5px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten-gross); display: grid; gap: 1px;
}
.kontextmenue .menue-eintrag[aria-expanded="true"] { background: var(--akzent-weich); }
.mass.bearbeitbar { pointer-events: auto; cursor: text; }
.mass.bearbeitbar:hover { outline: 1px solid var(--akzent); }
.mass-eingabe { width: 76px; height: 22px; padding: 0 4px; font: inherit; color: #fff; background: rgb(0 0 0 / 0.5); border: 1px solid var(--akzent); }
.st-auswahl { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Statusleiste */
.statusleiste {
  display: flex; align-items: center; gap: 14px; padding: 0 10px; font-size: 12px; color: var(--text-2);
  background: var(--flaeche); border-top: 1px solid var(--linie); min-width: 0; position: relative; z-index: 15;
}
.st-info { font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-platz { flex: 1; }
.st-hinweise-wrap { position: relative; }
.st-hinweise, .st-summe { height: 22px; padding: 0 8px; background: transparent; border-color: transparent; font-size: 12px; }
.st-hinweise.ok { color: var(--ok); }
.st-hinweise.warn { color: var(--warn); }
.st-hinweise.fehler { color: var(--fehler); background: var(--fehler-bg); }
.st-summe { color: var(--text-2); }
.st-summe strong { color: var(--text); font-variant-numeric: tabular-nums; }
.st-liste {
  position: absolute; bottom: calc(100% + 6px); left: 0; width: min(520px, 70vw); max-height: 50vh; overflow: auto;
  margin: 0; padding: 5px; list-style: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: var(--schatten-gross); display: grid; gap: 2px;
}
.st-liste li.ok { padding: 8px; color: var(--ok); }
.st-liste button {
  width: 100%; height: auto; min-height: 30px; padding: 6px 8px; text-align: left; white-space: normal; align-items: flex-start;
  background: transparent; border: 0; color: var(--warn);
}
.st-liste li.fehler button { color: var(--fehler); font-weight: 600; }
.st-liste button:hover:not(:disabled) { background: var(--akzent-weich); }
.st-liste button:disabled { opacity: 1; cursor: default; }

/* ---- Meldungen */
.toasts { position: fixed; bottom: calc(var(--status) + 12px); left: 50%; transform: translateX(-50%); display: grid; gap: 6px; z-index: 60; pointer-events: none; }
.toast {
  padding: 8px 14px; border-radius: 7px; background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-gross);
  border: 1px solid var(--linie); transition: opacity 0.35s, transform 0.35s; max-width: 560px;
}
.toast.ok { border-left: 3px solid var(--ok); }
.toast.fehler { border-left: 3px solid var(--fehler); }
.toast.hinweis { border-left: 3px solid var(--akzent); }
.toast.weg { opacity: 0; transform: translateY(6px); }

/* ---- Modals */
dialog {
  padding: 0; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: var(--text);
  box-shadow: var(--schatten-gross); max-height: calc(100vh - 48px); display: none; flex-direction: column;
}
dialog[open] { display: flex; }
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
/* Dialoge im Querformat: breit statt hoch, damit möglichst viel ohne Scrollen sichtbar ist */
.modal-s { width: min(640px, calc(100vw - 32px)); }
.modal-m { width: min(1040px, calc(100vw - 32px)); }
.modal-l { width: min(1480px, calc(100vw - 32px)); }
.modal-xl { width: calc(100vw - 32px); max-width: 1880px; height: calc(100vh - 32px); max-height: calc(100vh - 32px); }
.modal-xl .modal-koerper { flex: 1; }
dialog[open]:is(.modal-l, .modal-xl) { margin: auto; }
.modal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--linie); }
.modal-kopf h2 { margin: 0; font-size: 15px; }
.modal-koerper { padding: 12px 16px 16px; overflow: auto; min-height: 0; }
.modal-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--linie); background: var(--flaeche-2); border-radius: 0 0 10px 10px; }
.modal-fuss button:first-child:not(:only-child) { margin-right: auto; }
.formular { display: grid; gap: 8px; }
.formular > label:not(.mini-schalter) { color: var(--text-2); font-size: 12px; }
.formular input[type="text"] { width: 100%; }
.formular p { margin: 0; color: var(--text-2); }
.formular ul { margin: 0; padding-left: 18px; color: var(--text-2); }
.unterzeile { color: var(--text-2); margin: 0 0 6px; }
.liste-inhalt h3 { margin-top: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
th { color: var(--text-2); font-weight: 600; background: var(--flaeche-2); position: sticky; top: -12px; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summen { display: grid; grid-template-columns: max-content max-content; gap: 4px 24px; margin: 16px 0 0 auto; width: max-content; }
.summen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summen .gesamt { font-weight: 700; font-size: 15px; border-top: 1px solid var(--linie); padding-top: 4px; }
.preise-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.preise-raster fieldset { border: 1px solid var(--linie); border-radius: 7px; padding: 6px 10px 10px; margin: 0; display: grid; gap: 3px; align-content: start; }
.preise-raster legend { color: var(--text-2); font-size: 12px; padding: 0 4px; }
.preise-raster .feld { grid-template-columns: 1fr 96px; min-height: 26px; }
.preise-raster small { color: var(--text-3); }
.tasten td { padding: 5px 8px; }
.tasten .t-gruppe { color: var(--text-3); width: 110px; }
.ablage {
  display: grid; justify-items: center; gap: 4px; padding: 20px; text-align: center; cursor: pointer;
  border: 2px dashed var(--linie-2); border-radius: 9px; color: var(--text-2);
}
.ablage:hover, .ablage.drueber { border-color: var(--akzent); background: var(--akzent-weich); }
.ablage small { color: var(--text-3); }
.datei-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.datei-liste li { display: flex; gap: 4px; align-items: center; }
.datei-eintrag { flex: 1; height: 34px; display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; text-align: left; }
.d-info, .d-datum { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 12px; }

/* ---- Befehlspalette */
.palette { width: min(640px, calc(100vw - 32px)); margin-top: 12vh; }
.palette-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linie); color: var(--text-3); }
.palette-kopf input { flex: 1; height: 32px; border: 0; background: transparent; font-size: 15px; outline: none; }
.palette-liste { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow: auto; }
.palette-liste li { display: grid; grid-template-columns: 20px 1fr auto auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.palette-liste li.aktiv { background: var(--akzent-weich); }
.palette-liste .p-sym { color: var(--text-3); display: flex; }
.palette-liste .p-gruppe { color: var(--text-3); font-size: 11.5px; }
.palette-liste .p-an { font-size: 11px; color: var(--akzent); }
.palette-liste .p-leer { color: var(--text-3); cursor: default; display: block; }
.palette-fuss { padding: 7px 14px; border-top: 1px solid var(--linie); color: var(--text-3); font-size: 11.5px; }

/* ---- Rubriken: Pfeil in der Farbe der Rubrik */
.panel > summary::before { border-color: color-mix(in srgb, var(--rubrik) 80%, var(--text-3)); }

/* ---- Kalkulation: Kunde / Schreiner */
.kosten-abschnitt { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-top: 6px; }
.kosten-abschnitt:first-child { margin-top: 0; }
.kosten-zeile.zwischen { color: var(--text); border-top: 1px solid var(--linie); padding-top: 3px; font-weight: 600; }
.kosten-zeile.ertrag { color: var(--ok); }
.modus-abzeichen {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; margin-right: 4px; border-radius: 12px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text-2); border: 1px solid var(--linie-2);
}
.modus-abzeichen:hover { color: var(--text); border-color: var(--text-3); }
body.schreiner .modus-abzeichen { background: var(--akzent-weich); color: var(--akzent); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.st-trenner { color: var(--text-3); padding: 0 2px; }
.summen-reihe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 40px; margin-top: 16px; }
.summen-reihe .summen { margin: 0; }
/* Maß- und Materialliste im Querformat: Platten oben, darunter Anleimer | Beschläge | Summen nebeneinander */
.liste-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px 28px; align-items: start; }
.liste-unten h3 { margin-top: 12px; }
.liste-unten .summen-reihe { flex-direction: column; align-items: flex-end; margin-top: 30px; }
@media (max-width: 1100px) { .liste-unten { grid-template-columns: 1fr; } }
.modal-xl .preise-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); }
.tasten-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 24px; align-items: start; }
.oeffnen-spalten { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.oeffnen-spalten h3 { margin-top: 0; }
@media (max-width: 800px) { .oeffnen-spalten { grid-template-columns: 1fr; } }
/* Werkstattzeichnung: Optionen links, Vorschau des Blatts rechts (weißes Papier mit Schatten) */
.cad-dialog { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cad-optionen { display: flex; flex-direction: column; gap: 14px; }
.cad-info { margin: 0; line-height: 1.5; }
.cad-bild { background: var(--flaeche-3); border-radius: 8px; padding: 16px; display: grid; place-items: center; min-height: 240px; }
.cad-vorschau { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 240px); background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); transition: opacity 0.15s; }
.cad-vorschau:not([src]) { aspect-ratio: 297 / 210; }
.cad-vorschau.laedt { opacity: 0.45; }
@media (max-width: 800px) { .cad-dialog { grid-template-columns: 1fr; } }
.summen .summen-titel { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.summen .zwischen { font-weight: 600; border-top: 1px solid var(--linie); padding-top: 4px; }
.tabelle-rahmen { overflow-x: auto; }
.preise-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 470px), 1fr)); }
.preis-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 78px 64px 78px; gap: 6px; align-items: center; min-height: 28px; }
.preis-zeile > label { color: var(--text-2); line-height: 1.25; }
.preis-zeile input { width: 100%; }
.preis-kopf { min-height: 0; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.preis-kopf span:not(:first-child) { text-align: right; padding-right: 4px; }
.preis-gruppe { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 6px; align-items: center; padding: 2px 0 6px;
  border-bottom: 1px solid var(--linie); margin-bottom: 3px; color: var(--text-3); font-size: 12px; }
.preis-gruppe input { width: 100%; }
.preis-mwst { grid-template-columns: minmax(0, 1fr) 96px; max-width: 320px; margin-bottom: 10px; }

/* ---- Kantenanzeige: Symbol in der gewählten Linienfarbe */
[data-befehl="kanten"][data-farbe="SCHWARZ"] .sym { color: #000; filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.7)); }
[data-befehl="kanten"][data-farbe="ROT"] .sym { color: #e01b24; }
[data-befehl="kanten"][data-farbe="WEISS"] .sym { color: #fff; filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.8)); }

/* ---- Vierfachansicht: Trennlinien und Titel der Viertel */
.viewer.vierfach .bedienhilfe { display: none; }
.vierfach-rahmen { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vierfach-zelle { position: absolute; box-shadow: inset 0 0 0 0.5px var(--linie-2); }
.vierfach-titel {
  position: absolute; left: 8px; top: 6px; height: 20px; padding: 0 7px; font-size: 11.5px; font-weight: 600; color: var(--text-2);
  border: 0; border-radius: 4px; background: color-mix(in srgb, var(--flaeche) 70%, transparent); pointer-events: auto; cursor: zoom-in;
}
.vierfach-titel:hover { color: var(--text); border: 0; }
.vierfach-trenner { position: absolute; pointer-events: auto; z-index: 2; touch-action: none; }
.vierfach-trenner.trenner-x { width: 7px; cursor: col-resize; }
.vierfach-trenner.trenner-y { height: 7px; cursor: row-resize; }
.vierfach-trenner:hover { background: color-mix(in srgb, var(--akzent) 45%, transparent); }
.riss-texte { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.riss-mass {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12px; font-weight: 650; line-height: 1.2; transform-origin: 50% 50%;
  padding: 0 3px; border-radius: 3px; color: var(--text); background: color-mix(in srgb, var(--viewport-flach) 80%, transparent);
  font-variant-numeric: tabular-nums;
}
.st-fps { font-variant-numeric: tabular-nums; color: var(--text-3); }

/* ---- Schnellleiste: zweite Leiste unter den Menüs, Schaltflächen nach Themen gruppiert */
/* zwei Zeilen (.schnell-zeile), die bei wenig Platz umbrechen – nie ein Scrollbalken */
.schnellleiste {
  display: flex; flex-direction: column; gap: 0; padding: 1px 6px; min-width: 0;
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie); position: relative; z-index: 19;
}
.schnell-zeile { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 1px; min-width: 0; }
.schnell-zeile + .schnell-zeile { border-top: 1px solid var(--linie); }
body.ohne-schnellleiste .schnellleiste { display: none; }
.schnell-gruppe { display: flex; flex-direction: column; justify-content: center; padding: 1px 8px; border-left: 1px solid var(--linie); flex: none; }
.schnell-zeile > .schnell-gruppe:first-child { border-left: 0; }
.schnell-knoepfe { flex-wrap: wrap; }
.schnell-titel { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); line-height: 1.1; padding-left: 2px; }
.schnell-knoepfe { display: flex; align-items: center; gap: 1px; }
.schnell-knoepfe .symbol-knopf, .schnell-knoepfe .text-knopf { height: 26px; }
.schnell-knoepfe .symbol-knopf { width: 26px; }
.text-knopf.mit-symbol { gap: 5px; padding: 0 7px 0 6px; }
.schnell-knoepfe input.schnell-farbe { width: 26px; height: 22px; padding: 1px; margin-left: 2px; cursor: pointer; flex: none; }
.schnell-knoepfe input.schnell-deck { width: 70px; height: 16px; margin: 0 0 0 4px; accent-color: var(--akzent); flex: none; }
.schnitt-regler { display: flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--linie); }
.schnitt-regler input[type="range"] { width: 150px; height: 16px; margin: 0; accent-color: var(--akzent); }
.schnitt-achse { font-size: 12px; color: var(--akzent); font-weight: 600; min-width: 42px; }
.schnitt-regler .bew-wert { width: 56px; }
.schnell-rechts { margin-left: auto; display: flex; border-left: 1px solid var(--linie); }
/* Bewegungsleiste: dritte Zeile mit Schiebereglern (Türen, Schubkästen, Innenschübe, Hosenauszüge, Explosion) */
.bewegungsleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 3px 14px; min-width: 0;
  background: var(--flaeche-2); border-bottom: 1px solid var(--linie); position: relative; z-index: 18;
}
body.ohne-bewegungsleiste .bewegungsleiste { display: none; }
.bew-titel { flex: none; }
.bew-regler { display: flex; align-items: center; gap: 6px; flex: 1 1 150px; min-width: 150px; max-width: 280px; color: var(--text-2); cursor: pointer; }
.bew-regler input[type="range"] { flex: 1; min-width: 60px; height: 16px; margin: 0; accent-color: var(--akzent); }
.bew-text { white-space: nowrap; font-size: 12px; }
.bew-wert { width: 38px; text-align: right; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bew-knoepfe { margin-left: auto; flex: none; }
@media (max-width: 1500px) { .schnell-titel { display: none; } .text-knopf.mit-symbol span { display: none; } .text-knopf.mit-symbol { padding: 0 5px; } }

/* ---- Zahlenfelder mit Schieberegler */
.feld.mit-regler { row-gap: 2px; }
.feld .regler { grid-column: 1 / -1; width: 100%; height: 16px; margin: 0; }

/* ---- Direkte Bearbeitung (Phase 4): Wert am Anfasser, Messwerte, Werkzeughinweis, Bibliothek ziehen */
.anfasser-wert, .mess-wert {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; white-space: nowrap; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; background: var(--flaeche); color: var(--text); border: 1px solid var(--akzent);
  box-shadow: var(--schatten-gross); font-variant-numeric: tabular-nums;
}
.mess-wert { display: grid; justify-items: center; gap: 0; z-index: 4; padding: 2px 8px; }
.mess-wert small { font-weight: 500; color: var(--text-2); font-size: 11px; }
.werkzeug-hinweis {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; font-size: 12px;
  padding: 5px 12px; border-radius: 16px; background: var(--akzent); color: var(--akzent-text); box-shadow: var(--schatten);
}
.chip[draggable="true"] { cursor: grab; }
.bib-hinweis { margin: 10px 0 0; font-size: 11.5px; color: var(--text-3); }

/* ---- Mobilansicht (nur unter 768 px sichtbar) */
.hero-leiste, .mobil-tabs { display: none; }

@media (max-width: 767.98px) {
  body { height: 100dvh; }
  .werkzeugleiste { gap: 2px; padding: 0 4px; }
  .marke { padding-right: 2px; }
  .menues { min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
  .menues::-webkit-scrollbar { display: none; }
  .menue-knopf { padding: 0 7px; }
  .menue { position: fixed; top: calc(var(--leiste) + 2px); left: 6px; right: 6px; min-width: 0; max-height: calc(100dvh - var(--leiste) - 16px); overflow-y: auto; }
  .menue-eintrag { height: 36px; }
  .werkzeuge, .griff, .bedienhilfe, .schnellleiste, .bewegungsleiste, .rechts-knoepfe [data-befehl="links"], .rechts-knoepfe [data-befehl="rechts"],
  .rechts-knoepfe [data-befehl="tasten"], .palette-knopf kbd, .palette-text, .modus-abzeichen span:last-child { display: none !important; }
  .suche-knopf { margin-left: 0; }
  .palette-knopf { width: 32px; padding: 0; justify-content: center; }
  .rechts-knoepfe { padding-left: 2px; }
  .modus-abzeichen { padding: 0 6px; margin-right: 0; }

  /* Hero-Section: 3D-Möbel oben, darunter Reiter und das gewählte Menü (scrollt für sich) */
  .arbeitsflaeche, .arbeitsflaeche.ohne-links, .arbeitsflaeche.ohne-rechts, .arbeitsflaeche.ohne-links.ohne-rechts {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--hero) auto auto minmax(0, 1fr);
  }
  .arbeitsflaeche.hero-gross { --hero: 66vh; }
  .arbeitsflaeche > * { grid-column: 1; }
  .viewer { grid-row: 1; }
  .mobil-tabs { grid-row: 3; display: flex; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
  .mobil-tab {
    flex: 1; height: 44px; flex-direction: column; justify-content: center; gap: 1px; padding: 0 2px; border: 0; border-radius: 0;
    background: transparent; color: var(--text-2); font-size: 11px; border-bottom: 2px solid transparent;
  }
  .mobil-tab[aria-selected="true"] { color: var(--akzent); border-bottom-color: var(--akzent); }
  .arbeitsflaeche .seite { grid-row: 4; display: none; }
  .arbeitsflaeche[data-mobil="links"] .seite-links, .arbeitsflaeche[data-mobil="rechts"] .seite-rechts { display: block; }
  .seite-links .tabs { display: none; }
  .seiten-kopf { padding: 8px 10px 6px; }
  .seiten-kopf h2 { display: none; }

  .hero-leiste {
    grid-row: 2; display: flex; gap: 2px; padding: 3px 4px; overflow-x: auto; scrollbar-width: none;
    background: var(--flaeche-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  }
  .hero-leiste::-webkit-scrollbar { display: none; }
  .hero-leiste .symbol-knopf, .hero-leiste .text-knopf { height: 34px; flex: none; }
  .hero-leiste .symbol-knopf { width: 34px; }

  /* größere Tippflächen */
  input[type="number"], input[type="text"], input[type="search"], select, button { min-height: 32px; }
  .feld { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .panel > summary { padding: 11px 10px; }
  .statusleiste { gap: 6px; padding: 0 6px; }
  .st-info, .st-auswahl { display: none; }
  .st-hinweise span:last-child { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; }
  .st-liste { width: calc(100vw - 12px); }
  .viewer-fehler { top: 6px; font-size: 12px; }
  .minileiste { max-width: calc(100% - 12px); overflow-x: auto; }
  .modal-s, .modal-m, .modal-l, .modal-xl { width: calc(100vw - 12px); }
  .modal-xl { height: calc(100dvh - 16px); }
  dialog { max-height: calc(100dvh - 16px); }
  .modal-fuss { flex-wrap: wrap; }
  .preis-zeile { grid-template-columns: minmax(0, 1fr) 64px 54px 64px; gap: 4px; }
  .palette { margin-top: 8px; }
}

@media print {
  body { display: block; overflow: visible; background: #fff; color: #000; }
  .werkzeugleiste, .arbeitsflaeche, .statusleiste, .toasts, .modal-fuss, .modal-kopf button { display: none !important; }
  dialog { position: static; box-shadow: none; border: 0; width: auto !important; max-height: none; display: block; }
  dialog:not(#dlg-materialliste) { display: none !important; }
  dialog::backdrop { display: none; }
  .modal-koerper { overflow: visible; }
  th { position: static; }
}

/* ---- Stand 2026-09-25: Maße ziehen, Kurzhinweise, Schrittweite, Durchklicken, Nutkonfigurator, Bearbeitungen, Raum */
.mass { pointer-events: auto; cursor: move; user-select: none; touch-action: none; }
.mass.bearbeitbar { cursor: move; }
.kurzhinweis {
  position: fixed; z-index: 60; max-width: 300px; padding: 6px 9px; border-radius: 6px; font-size: 12px; line-height: 1.35;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie-2); box-shadow: var(--schatten-gross); pointer-events: none;
}
.kurzhinweis strong { display: block; margin-bottom: 2px; }
.schritt-regler { display: flex; align-items: center; gap: 4px; }
.schritt-regler input[type="range"] { width: 76px; accent-color: var(--akzent); }
.schritt-regler output { min-width: 44px; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--text-2); }
.feld.skizze { grid-template-columns: 1fr; min-height: 0; }
.nut-skizze { width: auto; max-width: 100%; max-height: 150px; margin: 2px auto; display: block; }
.nut-skizze .nk-seite { fill: var(--flaeche-3); stroke: var(--text); stroke-width: 1.2; }
.nut-skizze .nk-rw { fill: color-mix(in srgb, var(--akzent) 35%, transparent); stroke: var(--akzent); stroke-width: 1.2; }
.nut-skizze .nk-text { fill: var(--text); font-size: 11px; }
.nut-skizze .nk-klein { fill: var(--text-2); font-size: 9.5px; }
.bearbeitung { display: grid; gap: 8px; }
.b-eintrag { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; padding: 7px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche-2); }
.b-kopf { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.b-feld { display: grid; gap: 2px; font-size: 11.5px; color: var(--text-2); }
.b-feld input, .b-feld select { width: 100%; }
.b-feld.b-breit { grid-column: 1 / -1; }
.raum-liste { display: grid; gap: 6px; }
.raum-moebel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; padding: 6px 7px; border: 1px solid var(--linie); border-radius: 6px; }
.raum-moebel.aktiv { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, transparent); }
.raum-moebel .rm-name { font-weight: 600; background: none; border: 0; padding: 0; text-align: left; color: var(--text); cursor: pointer; }
.raum-moebel .rm-info { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-2); }
.raum-moebel .rm-knoepfe { display: flex; gap: 2px; }
.raum-lage { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.raum-lage label { display: grid; gap: 2px; font-size: 11px; color: var(--text-2); }
.raum-lage input, .raum-lage select { width: 100%; }
.raum-summe { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 12.5px; margin-top: 6px; }
.raum-summe .gesamt { font-weight: 700; border-top: 1px solid var(--linie); padding-top: 3px; }
.plan-vorschau { display: flex; flex-wrap: wrap; gap: 10px; max-height: 52vh; overflow: auto; padding: 4px; }
.plan-vorschau figure { margin: 0; display: grid; gap: 3px; font-size: 11px; color: var(--text-2); }
.plan-vorschau svg { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 4px; }
.plan-dialog { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
.plan-dialog .formular { display: grid; gap: 8px; }

/* ---- Stand 2026-09-26: Sprachwahl, Bauteil-Export, Fachboden-Raster, Anleimer je Kante */
.sprach-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; }
.sprach-knopf { height: auto; padding: 14px 12px; display: grid; gap: 3px; justify-items: start; text-align: left; white-space: normal; }
.sprach-knopf strong { font-size: 15px; }
.sprach-knopf small { color: inherit; opacity: 0.8; }
.be-dialog { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.be-dialog h3 { margin-top: 0; }
.be-dialog .feld { grid-template-columns: auto minmax(0, 1fr); }
.be-knoepfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.be-knoepfe button { justify-content: flex-start; }
.be-liste { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 12.5px; display: grid; gap: 2px; max-height: 50vh; overflow: auto; }
.be-liste .be-beschlag { color: var(--text-3); }
@media (max-width: 800px) { .be-dialog { grid-template-columns: 1fr; } }
.feld.raster-knoepfe, .feld.kanten-feld { grid-template-columns: 1fr; gap: 4px; }
.raster-label { color: var(--text-2); }
.raster-knoepfe .knopfreihe button { height: 26px; font-size: 12px; }
.kanten-boxen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kante-wahl { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 12px; cursor: pointer; }
.b-feld .regler { height: 14px; margin: 0; }
.angebot-dialog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.angebot-dialog fieldset { border: 1px solid var(--linie); border-radius: 6px; padding: 8px 10px; display: grid; gap: 6px; }
.angebot-dialog legend { font-weight: 650; font-size: 12px; color: var(--akzent); padding: 0 4px; }
.angebot-dialog label { display: grid; gap: 2px; font-size: 11.5px; color: var(--text-2); }
.angebot-dialog input, .angebot-dialog textarea, .angebot-dialog select { width: 100%; font: inherit; }
.angebot-dialog textarea { min-height: 84px; resize: vertical; }
.angebot-dialog .breit { grid-column: 1 / -1; }
.angebot-logo { max-height: 42px; max-width: 160px; object-fit: contain; background: #fff; border-radius: 4px; }
.position-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px 28px; gap: 6px; align-items: center; }
@media (max-width: 900px) { .plan-dialog, .angebot-dialog { grid-template-columns: 1fr; } }
/* Vier Reiter links (Möbel, Vorlagen, Bibliothek, Raum): bei schmalem Menü in zwei Zeilen statt abgeschnitten */
.tabs { flex-wrap: wrap; row-gap: 2px; }
.tab { flex: 1 1 auto; min-width: 0; gap: 5px; }

/* ---- Stand 2026-09-26: Schnell-Löschen, Zuschnitt-Formate, Türreihen, Raum verschieben ---- */
.loesch-knopf { position: fixed; z-index: 2000; width: 18px; height: 18px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--linie-2, #666); color: var(--text, #eee); cursor: pointer; opacity: .75; }
.loesch-knopf:hover { opacity: 1; background: var(--akzent, #d08c4f); color: #fff; }
.loesch-knopf[hidden] { display: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.zeile.reihe { grid-template-columns: 58px 70px 1fr; }
.zeile.reihe select { min-width: 0; }
.plan-formate { width: 100%; border-collapse: collapse; margin: .25rem 0 .5rem; font-size: .85rem; }
.plan-formate th, .plan-formate td { padding: .2rem .35rem; border-bottom: 1px solid var(--linie, #333); text-align: left; }
.plan-formate td.r, .plan-formate th.r { text-align: right; }
.plan-formate input[type="number"] { width: 5.5em; }
.plan-formate select { max-width: 11em; }
.plan-formate .zu-gross { color: var(--fehler, #e5484d); font-weight: 600; }
.rm-wand button.aktiv, [data-raum-ziehen].aktiv { outline: 2px solid var(--akzent, #d08c4f); outline-offset: -2px; }
.plan-titel { margin: 0 0 .25rem; font-size: .95rem; }
.raum-moebel > .knopfreihe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.raum-moebel > .knopfreihe button { padding-inline: 7px; }

/* ---- Stand 2026-09-27: Bauteilfenster, Mehrfachauswahl, einfache Ansicht, Schubgruppen, Verbinder je Platte ---- */
/* Bauteilfenster: Karte des gewählten Bauteils frei beweglich über der Ansicht (Kopf ziehen, Ecke = Größe) */
.bauteil-fenster {
  position: fixed; z-index: 45; top: calc(var(--leiste) + 110px); right: calc(var(--breite-rechts) + 24px);
  width: min(460px, calc(100vw - 32px)); height: min(78vh, 780px); min-width: 320px; min-height: 240px;
  max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); resize: both; overflow: auto;
  background: var(--flaeche); border: 1px solid var(--akzent); border-radius: 10px; box-shadow: var(--schatten-gross);
}
.bauteil-fenster:focus { outline: none; }
.bauteil-fenster .kontext { margin: 0; border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.bauteil-fenster .kontext-kopf {
  position: sticky; top: 0; z-index: 2; cursor: move; user-select: none; touch-action: none;
  background: var(--akzent-weich); border-bottom: 1px solid var(--linie); padding: 9px 8px 7px 12px;
}
.bauteil-fenster .kontext-kopf::before { content: "⠿"; color: var(--text-3); margin-right: 6px; line-height: 1.6; }
.bauteil-fenster .kontext-details { padding-top: 8px; }
.bauteil-fenster.zieht { opacity: 0.92; }
.bauteil-fenster.blitz { animation: fenster-blitz 1.2s ease-out; }
@keyframes fenster-blitz { 0%, 30% { box-shadow: 0 0 0 6px var(--akzent-weich), var(--schatten-gross); } 100% { box-shadow: var(--schatten-gross); } }
.arbeitsflaeche.ohne-rechts ~ .bauteil-fenster, body:has(.arbeitsflaeche.ohne-rechts) .bauteil-fenster { right: 24px; }
/* Mehrfachauswahl: gewählte Bauteile als Chips */
.auswahl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.auswahl-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 8px; border: 1px solid var(--linie-2); border-radius: 999px;
  font-size: 12px; background: var(--flaeche-2); }
.auswahl-chip .symbol-knopf { width: 20px; height: 20px; }
/* Einfache Ansicht: Erweitertes ausblenden, Hinweise zeigen */
body.einfach .nur-erweitert, body.einfach #bewegungsleiste { display: none !important; }
body:not(.einfach) .einfach-hinweis { display: none !important; }
.einfach-hinweis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-2);
  padding: 6px 8px; margin-top: 6px; border: 1px dashed var(--linie-2); border-radius: var(--radius); background: var(--flaeche-2); }
.einfach-hinweis .text-knopf { margin-left: auto; height: 24px; font-size: 12px; }
.einfach-banner { margin: 8px 8px 0; }
.leisten-hinweis { margin: 0; padding: 2px 8px; border-style: dashed; align-self: center; }
.menue-eintrag.menue-hinweis { color: var(--text-2); font-style: italic; }
.ansicht-abzeichen { margin-right: 4px; }
/* Schubgruppen und Verbinder je Platte */
.zeile.isk { grid-template-columns: 16px 1.35fr 1fr 26px; padding: 4px 0; border-top: 1px solid var(--linie); }
.zeile.isk .isk-zahlen { grid-column: 2 / 4; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.isk-zahl { display: grid; gap: 1px; font-size: 11px; color: var(--text-3); }
.isk-zahl input { color: var(--text); }
.zeile.isk .symbol-knopf { width: 24px; height: 24px; }
.zeile.verbinder { grid-template-columns: 1fr auto; row-gap: 2px; padding: 4px 0; border-top: 1px solid var(--linie); }
.zeile.verbinder select { grid-column: 1 / -1; order: 3; }
.zeile.verbinder .nr { color: var(--text-2); font-size: 12px; }
.vl-lage { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.vl-lage.oben { color: var(--rubrik-3); }
.vl-lage.unten { color: var(--rubrik-2); }

/* ---- Stand 2026-09-28: Suche im Bauteilfenster, Innenschübe platzieren, Baumansicht ---- */
.such-aus { display: none !important; }
.bauteil-fenster .kontext-oben { position: sticky; top: 0; z-index: 2; background: var(--flaeche); }
.bauteil-fenster .kontext-kopf { position: static; }
.kontext-suchleiste { padding: 6px 8px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.kontext-suchleiste .kontext-suche { width: 100%; }
.such-leer { margin: 6px 10px; }
/* Schubgruppen als Karten (Rubrik und Bauteilfenster) */
.zeile.isk { grid-template-columns: 1.35fr 1fr; padding: 6px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-2); }
.zeile.isk + .zeile.isk { margin-top: 4px; }
.isk-kopf { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.isk-kopf strong { font-size: 12px; margin-right: auto; }
.isk-kopf .symbol-knopf { width: 24px; height: 24px; }
.isk-zustand { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--flaeche-3); color: var(--text-2); }
.isk-zustand.nein { background: var(--warn-bg); color: var(--warn); }
.zeile.isk .isk-zahlen { grid-column: 1 / -1; grid-row: auto; }
.isk-karte { margin-top: 2px; }
.schub-wert { display: grid; gap: 1px; pointer-events: none; text-align: center; }
.schub-wert .schub-nein { color: #ff9a8a; }
.schub-wert .schub-warn { color: #ffd27a; }
/* Baumansicht */
.baum-tab { display: grid; gap: 6px; align-content: start; }
.baum-kopf { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.baum-kopf h3 { margin: 0 auto 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); }
.baum-suche { width: 100%; }
.baum-auswahl { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; padding: 4px 8px;
  border-radius: var(--radius); background: var(--akzent-weich); color: var(--text); }
.baum-auswahl .text-knopf { height: 22px; font-size: 12px; }
.baum { border: 1px solid var(--linie); border-radius: var(--radius); padding: 4px; background: var(--flaeche); max-height: 56vh; overflow-y: auto; overflow-x: hidden; }
.baum .baum-blatt { box-sizing: border-box; min-width: 0; }
.baum-gruppe > summary svg { color: var(--text-2); flex: none; }
.baum-alle { width: 22px; height: 22px; opacity: 0.45; }
.baum-alle.aktiv, .baum-alle:hover, summary:hover .baum-alle { opacity: 1; }
.baum-blatt { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; }
.baum-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baum-meta { flex: none; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.baum-blatt:focus-visible, .baum summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.baum-hilfe { color: var(--text-3); }