/* Möbelkonfigurator – Oberfläche für Laptop/Notebook (Fahrplan Phase 1).
   Aufbau: Werkzeugleiste · linkes Menü | Viewer | rechtes Menü · Statusleiste. Farben als Tokens, hell als Standard (seit 0.24), dunkel wählbar. */
:root {
  --bg: #f1f0ed;
  --flaeche: #ffffff;
  --flaeche-2: #f7f6f3;
  --flaeche-3: #eceae5;
  --linie: #d6d1c7;
  --linie-2: #c0baae;
  --rand-ctrl: #948e83;     /* Rand von Eingabefeldern und Auswahllisten (3 : 1 auf Weiß) */
  --text: #22201c;
  --text-2: #5a544b;
  --text-3: #6b655b;
  --akzent: #8f5728;
  --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;
  --rand-ctrl: #62626d;
  --text: #ecebe8;
  --text-2: #b0ada6;
  --text-3: #a09d96;
  --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;
}
/* feste Zeilen: eine ausgeblendete Leiste (einfache Ansicht, Einstellung) darf die übrigen Zeilen nicht nach oben rutschen lassen */
#werkzeugleiste { grid-row: 1; } #schnellleiste { grid-row: 2; } #bewegungsleiste { grid-row: 3; }
body > .arbeitsflaeche { grid-row: 4; } #statusleiste { grid-row: 5; }
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(--rand-ctrl); border-radius: 5px;
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input:hover, select:hover { border-color: var(--text-3); }
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(--rand-ctrl); 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: Zeichen im Akzent-Feld + Schriftzug, deutlich größer als die Menüs, mit Trennlinie zur Menüleiste */
.marke {
  display: flex; align-items: center; gap: 10px; padding: 0 14px 0 4px; margin-right: 4px; white-space: nowrap;
  border-right: 1px solid var(--linie); align-self: stretch; cursor: default; user-select: none;
}
.marke svg { width: 30px; height: 30px; flex: none; padding: 3px; border-radius: 8px; background: var(--akzent-weich); box-shadow: inset 0 0 0 1px var(--akzent); }
.marke svg rect { fill: var(--akzent); }
.marke span { font-size: 18px; font-weight: 800; letter-spacing: 0.01em; color: var(--akzent); line-height: 1; }
@media (max-width: 959.98px) { .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; overflow-x: hidden; 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; pointer-events: none; text-shadow: 0 0 3px var(--viewport-flach), 0 0 6px var(--viewport-flach); }

/* ---- 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-regler[hidden] { display: none; }
.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-flagge { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); display: block; margin-bottom: 4px; }
.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(400px, 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; }
.einfach-leiste { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 24px); padding: 6px 12px; border: 1px solid var(--akzent);
  border-radius: 999px; background: var(--flaeche); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); font-size: 13px; color: var(--text); }
.einfach-leiste .text-knopf { margin-left: 6px; font-weight: 650; color: var(--akzent); }
/* Auffällige Hauptknöpfe „Gestalten“ / „Assistent“ (Werkzeugleiste, Schnellleiste, schwebend über der 3D-Ansicht, Hinweisleiste) */
.hero-knopf, .schnell-knoepfe .hero-knopf, .werkzeuge .leisten-gruppe .hero-knopf.text-knopf.mit-symbol, .einfach-leiste .hero-knopf {
  height: 32px; padding: 0 14px 0 11px; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background: var(--akzent); color: var(--akzent-text); border: 1px solid var(--akzent); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28); margin: 0 3px; }
.hero-knopf:hover { filter: brightness(1.12); box-shadow: 0 3px 12px rgba(0, 0, 0, .38); }
.hero-knopf[aria-pressed="true"] { outline: 2px solid var(--akzent-text); outline-offset: -4px; }
.hero-knopf span { display: inline !important; }   /* Text auch auf schmalen Schirmen */
.hero-knopf svg { stroke: currentColor; }
.hero-paar { display: flex; gap: 4px; }
.hero-schwebend { position: absolute; left: 12px; top: 12px; z-index: 6; padding: 4px; border-radius: 999px;
  background: var(--flaeche); border: 1px solid var(--akzent); box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
.hero-schwebend .hero-knopf { height: 36px; font-size: 14px; padding: 0 18px 0 14px; }
body.wizard-modus .hero-schwebend { display: none; }
@media (pointer: coarse) { .hero-knopf, .schnell-knoepfe .hero-knopf, .hero-schwebend .hero-knopf { height: 40px; } }
@media (prefers-reduced-motion: no-preference) { .hero-knopf { transition: filter .15s, box-shadow .15s; } }
.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); }

/* ---- Stand 2026-09-29 (Version 0.9): Zufallsmöbel, Fertigungspaket, Trennwände je Höhe, Fronten je Feld, gesperrte Auswahl */
.zufall-kasten { display: grid; gap: 4px; padding: 8px; margin-bottom: 8px; border: 1px dashed var(--linie-2); border-radius: var(--radius); background: var(--flaeche-2); }
.zufall-kasten .hilfe { color: var(--text-3); font-size: 11.5px; }
.zufall-dialog { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.zufall-dialog .formular { display: grid; gap: 8px; }
.zufall-dialog .knopfreihe { display: flex; gap: 6px; align-items: center; }
.zufall-code { flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.zufall-vorschau { display: grid; gap: 6px; justify-items: center; background: var(--flaeche-3); border-radius: 8px; padding: 14px; }
.zufall-bild { width: 100%; max-width: 420px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 6px; background: var(--flaeche-2); }
.zufall-titel { font-size: 14px; text-align: center; }
.zufall-vorschau .unterzeile { margin: 0; text-align: center; }
.zufall-letzte .chip { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; }
@media (max-width: 800px) { .zufall-dialog { grid-template-columns: 1fr; } }
/* Version 0.11: Zufallsmöbel von/bis, Küchenplaner */
.zufall-vonbis .knopfreihe input { flex: 1; min-width: 0; }
.kueche-dialog { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.kueche-dialog .formular { max-height: 62vh; overflow: auto; padding-right: 4px; }
.kueche-dialog .zufall-vorschau { justify-items: stretch; }
.kueche-liste, .kueche-hinweise { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 12.5px; }
.kueche-hinweise { color: var(--text-2); }
.fp-fortschritt { width: 100%; height: 8px; accent-color: var(--akzent); }
.fp-stand { min-height: 1.4em; margin: 0; }
.zeile.isk.tw, .zeile.isk.front { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zeile.isk.front { border-left: 3px solid var(--akzent); }
.sperr-hinweis { grid-column: 1 / -1; color: var(--text-3); font-size: 11.5px; font-style: italic; }
select option:disabled { color: var(--text-3); }

/* ---- Version 0.12: Möbel/Bauteile löschen, Zufallsmöbel groß und drehbar, Tablet */
/* Baumansicht: ganzes Möbel (Name, Duplizieren, Löschen) und gewähltes Bauteil (Löschen, Kopieren, Einfügen) */
.baum-moebel { display: flex; align-items: center; gap: 2px; }
.baum-moebel .name { flex: 1; min-width: 0; width: auto; }
.symbol-knopf.gefahr:hover:not(:disabled) { color: var(--fehler); background: var(--fehler-bg); }
.baum-werkzeug { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.baum-werkzeug button { height: 28px; padding: 0 9px; }
.baum-werkzeug button.gefahr:not(:disabled):hover { background: var(--fehler-bg); border-color: var(--fehler); }
/* obere Leiste: Bearbeiten-Gruppen bleiben sichtbar, die Leiste scrollt notfalls seitlich */
.werkzeuge .leisten-gruppe .text-knopf.mit-symbol { height: 28px; }
.werkzeuge { overflow-x: auto; scrollbar-width: none; }
.werkzeuge::-webkit-scrollbar { display: none; }
.werkzeuge .leisten-gruppe > * { flex: none; }

/* Zufallsmöbel: die Vorschau füllt den Dialog und lässt sich drehen */
.modal-xl .zufall-dialog.zufall-gross { height: 100%; align-items: stretch; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); }
.modal-xl .zufall-dialog.zufall-gross .formular { overflow-y: auto; align-content: start; padding-right: 4px; }
.zufall-vorschau.gross { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; min-height: 0; min-width: 0; }
.zufall-buehne-rahmen { position: relative; flex: 1; min-height: 260px; border-radius: 6px; overflow: hidden; background: var(--viewport); }
.zufall-buehne { position: absolute; inset: 0; }
.zufall-buehne .dreh-canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.zufall-buehne .dreh-canvas:active { cursor: grabbing; }
.zufall-leiste { position: absolute; top: 8px; right: 8px; left: 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; z-index: 2; pointer-events: none; }
.zufall-leiste > * { pointer-events: auto; }
.zufall-leiste .text-knopf { background: color-mix(in srgb, var(--flaeche) 82%, transparent); border: 1px solid var(--linie); gap: 5px; }
.zufall-leiste .text-knopf[aria-pressed="true"] { background: var(--akzent-weich); color: var(--akzent); border-color: var(--akzent); }
/* Version 0.23: Regler „Türen / Schübe“ und Knopf „Transparent“ in der Vorschau */
.zufall-offen { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--linie); font-size: 12px;
  color: var(--text-2); background: color-mix(in srgb, var(--flaeche) 82%, transparent); }
.zufall-offen .regler { width: 120px; height: 16px; margin: 0; }
.zufall-offen-wert { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .zufall-offen { height: 38px; } .zufall-offen .regler { width: 140px; height: 28px; } }
@media (max-width: 800px) { .zufall-offen-text { display: none; } .zufall-offen .regler { width: 90px; } }
.zufall-hinweis { position: absolute; left: 10px; bottom: 8px; z-index: 2; font-size: 11.5px; color: var(--text-2); pointer-events: none; text-shadow: 0 0 4px var(--viewport-flach); }
@media (max-width: 800px) {
  .modal-xl .zufall-dialog.zufall-gross { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(48dvh, 1fr) auto; }
  .zufall-vorschau.gross { order: -1; }
  .modal-xl .zufall-dialog.zufall-gross .formular { overflow: visible; }
  .zufall-hinweis { display: none; }
}

/* Hinweis in der 3D-Ansicht: Maus oder Touch */
.bedienhilfe .nur-touch { display: none; }

/* Tablet und Touch (Version 0.12): größere Tippflächen, Menüs als Schublade, Leisten scrollen seitlich statt umzubrechen */
@media (pointer: coarse) {
  button, input[type="number"], input[type="text"], input[type="search"], select { min-height: 38px; }
  .symbol-knopf, .schnell-knoepfe .symbol-knopf { width: 40px; height: 40px; }
  .schnell-knoepfe .text-knopf, .werkzeuge .text-knopf { height: 38px; }
  .minileiste .symbol-knopf { width: 40px; height: 40px; }
  .menue-eintrag { height: 40px; }
  .panel > summary { padding: 12px 10px; }
  .baum-blatt, .baum summary { min-height: 38px; }
  .baum-alle, .baum-auge { width: 34px; height: 34px; }
  .baum-werkzeug button { height: 38px; }
  input[type="range"] { height: 28px; }
  input[type="checkbox"][role="switch"] { width: 44px; height: 24px; border-radius: 12px; }
  input[type="checkbox"][role="switch"]::after { width: 20px; height: 20px; }
  input[type="checkbox"][role="switch"]:checked::after { transform: translateX(20px); }
  .bedienhilfe .nur-maus { display: none; }
  .bedienhilfe .nur-touch { display: inline; }
  .griff { width: 14px; }
}
@media (min-width: 768px) and (max-width: 1180px) {
  /* obere Leiste zweizeilig: Marke, Menüs, Suche und Schalter oben – darunter die Bearbeiten-Werkzeuge in voller Breite */
  body { grid-template-rows: auto auto auto minmax(0, 1fr) var(--status); }
  .werkzeugleiste { flex-wrap: wrap; min-height: var(--leiste); row-gap: 2px; padding-top: 2px; padding-bottom: 2px; }
  .menues { flex: 1 1 auto; min-width: 0; }
  .werkzeuge { order: 9; flex: 1 1 100%; margin-left: 0; padding-top: 2px; border-top: 1px solid var(--linie); }
  .palette-text, .palette-knopf kbd, .modus-abzeichen span:last-child { display: none; }
  .palette-knopf { width: 40px; padding: 0; justify-content: center; }
  .suche-knopf { margin-left: 0; }
  /* Schnellleiste und Bewegungsleiste: eine Zeile je Leiste, seitlich wischen (ohne Scrollbalken) */
  .schnellleiste, .bewegungsleiste { scrollbar-width: none; }
  .schnellleiste::-webkit-scrollbar, .bewegungsleiste::-webkit-scrollbar { display: none; }
  .schnellleiste { overflow-x: auto; }
  .schnell-zeile { flex-wrap: nowrap; }
  .schnell-zeile > .schnell-gruppe, .schnell-rechts { flex: none; }
  .schnell-titel { display: none; }
  .bewegungsleiste { flex-wrap: nowrap; overflow-x: auto; gap: 4px 14px; }
  .bew-regler { flex: none; width: 210px; }
  /* Menüs: rechts bleibt neben der Ansicht (schmaler), links liegt als Schublade über der Ansicht */
  .arbeitsflaeche, .arbeitsflaeche.ohne-links { position: relative; grid-template-columns: minmax(0, 1fr) 14px min(var(--breite-rechts), 40vw); }
  .arbeitsflaeche.ohne-rechts, .arbeitsflaeche.ohne-links.ohne-rechts { grid-template-columns: minmax(0, 1fr) 0 0; }
  .arbeitsflaeche .viewer { grid-column: 1; }
  .arbeitsflaeche .griff-links { display: none; }
  .arbeitsflaeche .griff-rechts { grid-column: 2; }
  .arbeitsflaeche .seite-rechts { grid-column: 3; }
  .arbeitsflaeche .seite-links {
    position: absolute; left: 0; top: 0; bottom: 0; width: min(var(--breite-links), 46vw); z-index: 16; grid-column: auto;
    border-right: 1px solid var(--linie-2); box-shadow: var(--schatten-gross);
  }
  .arbeitsflaeche.ohne-links .seite-links { display: none; }
  .bauteil-fenster { max-width: 60vw; }
  .statusleiste { overflow-x: auto; }
}
@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
  /* Hochformat: die Ansicht bekommt die ganze Breite, rechts liegt das Menü als Schublade darüber */
  .arbeitsflaeche, .arbeitsflaeche.ohne-links { grid-template-columns: minmax(0, 1fr); }
  .arbeitsflaeche .griff-rechts { display: none; }
  .arbeitsflaeche .seite-rechts {
    position: absolute; right: 0; top: 0; bottom: 0; width: min(var(--breite-rechts), 58vw); z-index: 17; grid-column: auto;
    border-left: 1px solid var(--linie-2); box-shadow: var(--schatten-gross);
  }
  .arbeitsflaeche.ohne-rechts .seite-rechts { display: none; }
}
/* Zufallsmöbel: Code-Feld über die volle Breite, Knöpfe darunter */
.zufall-dialog .feld:has(#zf-code) .knopfreihe { flex-wrap: wrap; }
.zufall-dialog .zufall-code { flex: 1 1 100%; }
@media (min-width: 768px) and (max-width: 900px) {
  .marke { padding: 0 8px 0 2px; margin-right: 0; }
  .menue-knopf { padding: 0 7px; }
  .rechts-knoepfe { padding-left: 2px; }
}
.zufall-leiste .primaer-weich { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

/* ---- Version 0.15: Küchenplaner mit Reitern, drehbarer 3D-Vorschau und Übernahme in die Szene */
.modal-xl .zufall-dialog.zufall-gross.kueche-planer { grid-template-columns: minmax(300px, 410px) minmax(0, 1fr); }
.kp-links { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.kp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.kp-tab { height: 30px; padding: 0 10px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche-2); color: var(--text-2); cursor: pointer; font-size: 12.5px; }
.kp-tab:hover { color: var(--text); }
.kp-tab.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.kp-panels { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.kp-panel { display: grid; gap: 8px; align-content: start; }
.kp-gruppe { margin: 10px 0 0; padding-bottom: 3px; border-bottom: 1px solid var(--linie); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.kp-gruppe:first-child { margin-top: 0; }
.kp-preis { margin: 0; font-weight: 600; color: var(--text); }
.kp-details { font-size: 12.5px; }
.kp-details summary { cursor: pointer; color: var(--text-2); }
.kp-details[open] { max-height: 24vh; overflow: auto; }
.kp-modus { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 800px) {
  .modal-xl .zufall-dialog.zufall-gross.kueche-planer { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(44dvh, 1fr) auto; }
  .kp-panels { overflow: visible; }
}
@media (pointer: coarse) { .kp-tab { height: 38px; padding: 0 12px; } }
.modal-xl .zufall-dialog.zufall-gross.kueche-planer { grid-template-columns: minmax(340px, 470px) minmax(0, 1fr); }
.kp-panel .feld { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); }
.kp-panel .feld select { text-overflow: ellipsis; }

/* ---- Version 0.16: Küchenplaner – Raumelemente, Stile */
.kp-stil { display: flex; gap: 6px; }
.kp-stil select { flex: 1; min-width: 0; }
.kp-elemente { display: grid; gap: 8px; }
.kp-element { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-2); }
.kp-el-kopf { display: flex; align-items: center; gap: 6px; }
.kp-el-kopf select { flex: 1; min-width: 0; }
.kp-el-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.kp-el-feld { display: grid; gap: 2px; font-size: 11.5px; color: var(--text-2); }
.kp-el-knoepfe { flex-wrap: wrap; }

/* Bauteilkarte (Version 0.19): „gilt nur hier“ (diese Tür, dieser Schub …) deutlich von „gilt für alle“ (allgemeine Einstellungen) abgesetzt */
.kontext-abschnitt.bereich-nur, .kontext-abschnitt.bereich-alle { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; padding: 6px 8px; border-radius: 4px 4px 0 0; border-top: 0; }
.kontext-abschnitt.bereich-nur { background: var(--akzent-weich); border-left: 5px solid var(--akzent); color: var(--akzent); font-weight: 700; }
.kontext-abschnitt.bereich-alle { background: var(--flaeche-2, rgba(128, 128, 128, 0.12)); border-left: 5px solid var(--text-3); color: var(--text-2); }
.bereich-marke { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.bereich-nur .bereich-marke { background: var(--akzent); color: var(--akzent-text); }
.bereich-alle .bereich-marke { background: var(--text-3); color: var(--flaeche, #fff); }
.kontext .in-nur { border-left: 5px solid var(--akzent); padding-left: 8px; background: color-mix(in srgb, var(--akzent-weich) 45%, transparent); }
.kontext .in-alle { border-left: 5px solid var(--linie); padding-left: 8px; }

/* Gestalter (Version 0.20): Frontansicht mit Teilbereichen, Auswahl darunter */
.gestalter { position: fixed; left: auto; inset-inline-start: auto; right: 14px; top: 132px; width: min(500px, calc(100vw - 28px)); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0; padding: 0 14px 14px;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie-2); border-radius: 10px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); z-index: 40; }
/* Querformat: Möbel links, Schritte und Auswahl rechts – mehr auf einen Blick */
.gestalter.gestalter-quer { width: min(1020px, calc(100vw - 28px), max(64vw, 700px)); }
.gestalter-spalten { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.g-feld.ablage-ziel .g-flaeche { fill: color-mix(in srgb, var(--akzent) 40%, transparent); stroke: var(--akzent); stroke-width: 3.5; }
.gestalter-quer .palette-art { cursor: grab; touch-action: none; }
.gestalter-rechts { display: grid; gap: 10px; min-width: 0; }
.gestalter-rechts .gestalter-wahl { margin-top: 0; }
.gestalter-schritte { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gestalter-schritt { display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-align: left; min-height: 48px; padding: 6px 10px; }
.gestalter-schritt b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche-3, var(--linie)); font-size: 13px; }
.gestalter-schritt span { display: grid; line-height: 1.2; }
.gestalter-schritt small { color: var(--text-3); font-size: 11.5px; }
.gestalter-schritt.an { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent); }
.gestalter-schritt.an b { background: var(--akzent); color: var(--akzent-text); }
/* Motion-Grafik Trennwände: 9-s-Schleife, nur transform/opacity; ruhend bei reduzierter Bewegung */
.tw-anleitung { border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); padding: 4px; }
.tw-svg { width: 100%; height: auto; display: block; }
/* nach 3 Schleifen sanft ausblenden (Verzögerung kommt aus gestalter.js: --anim-weg, --anim-vergangen) */
.tw-anleitung { max-height: 400px; animation: tw-weg 1.4s ease-in-out forwards; animation-delay: var(--anim-weg, 18s); }
.tw-anleitung svg, .tw-anleitung svg * { animation-iteration-count: 2 !important; animation-delay: var(--anim-vergangen, 0s) !important; }
@keyframes tw-weg { 0% { opacity: 1; max-height: 400px; } 70% { opacity: 0; max-height: 400px; } 100% { opacity: 0; max-height: 0; padding: 0; border-width: 0; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-anleitung { animation: none; max-height: none; } }
:root[data-motion="aus"] .tw-anleitung { animation: none; max-height: none; }
.tw-korpus { fill: none; stroke: var(--text-2); stroke-width: 3; }
.tw-plus-kreis { fill: var(--akzent-weich, none); stroke: var(--akzent); stroke-width: 2; }
.tw-plus-zeichen { stroke: var(--akzent); stroke-width: 2; fill: none; stroke-linecap: round; }
.tw-klick { fill: none; stroke: var(--akzent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tw-wand { fill: var(--akzent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.tw-cursor { transform: translate(215px, 100px); }
.tw-cursor-form { fill: var(--text); stroke: var(--flaeche); stroke-width: 1.2; }
.tw-text { fill: var(--text); font-size: 12.5px; font-weight: 650; text-anchor: middle; opacity: 0; }
.tw-plus { animation: tw-plus 9s infinite; }
.tw-cursor { animation: tw-cursor 9s infinite ease-in-out; }
.tw-klick { animation: tw-klick 9s infinite ease-out; }
.tw-wand { animation: tw-wand 9s infinite ease-in-out; }
.tw-t1 { animation: tw-t1 9s infinite; } .tw-t2 { animation: tw-t2 9s infinite; } .tw-t3 { animation: tw-t3 9s infinite; }
@keyframes tw-cursor { 0% { transform: translate(215px, 100px); opacity: 1; } 20% { transform: translate(127px, 56px); } 38% { transform: translate(127px, 56px); }
  44% { transform: translate(127px, 90px); } 70%, 80% { transform: translate(175px, 90px); opacity: 1; } 96% { transform: translate(-300px, 60px); opacity: 1; } 98%, 100% { transform: translate(-300px, 60px); opacity: 0; } }
.tw-anleitung, .tw-svg { overflow: visible; } .tw-cursor, .dd-hand { pointer-events: none; }
/* Das echte (+) im Möbel links pulsiert, solange noch kein Feld gewählt ist – dorthin soll geklickt werden */
.gestalter-quer .gestalter-svg:not(.hat-wahl) .g-plus-kreis { animation: tw-puls 1.6s infinite ease-in-out; transform-box: fill-box; transform-origin: center; }
@keyframes tw-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes tw-plus { 0%, 24% { opacity: 1; } 28%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tw-klick { 0%, 20% { opacity: 0; transform: scale(.6); } 22% { opacity: 1; transform: scale(.8); } 30% { opacity: 0; transform: scale(2); } 100% { opacity: 0; } }
@keyframes tw-wand { 0%, 26% { opacity: 0; transform: scaleY(0); } 36% { opacity: 1; transform: scaleY(1); } 46% { transform: translateX(0); }
  70%, 82% { opacity: 1; transform: translateX(48px); } 88%, 100% { opacity: 0; transform: translateX(48px); } }
@keyframes tw-t1 { 0% { opacity: 0; } 4%, 24% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes tw-t2 { 0%, 28% { opacity: 0; } 32%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes tw-t3 { 0%, 46% { opacity: 0; } 50%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes tw-t4 { 0%, 82% { opacity: 0; } 86%, 98% { opacity: 1; } 100% { opacity: 0; } }
.tw-t4 { animation: tw-t4 9s infinite; }
/* Motion-Grafik Bestücken (Ziehen und Ablegen): Kachel wird aufs Feld (+) gezogen, das Feld füllt sich */
.dd-svg { width: 100%; height: auto; display: block; overflow: visible; }
.dd-feld { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-dasharray: 5 4; }
.dd-tuer { fill: var(--akzent-weich, var(--flaeche-2)); stroke: var(--akzent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dd-kachel { transform: translate(190px, 20px); }
.dd-kachel rect { fill: var(--flaeche); stroke: var(--akzent); stroke-width: 2; }
.dd-kachel path { stroke: var(--akzent); stroke-width: 2; fill: none; stroke-linecap: round; }
.dd-hand { transform: translate(214px, 46px); }
.dd-plus { animation: tw-plus 8s infinite; }
.dd-kachel { animation: dd-kachel 8s infinite ease-in-out; } .dd-hand { animation: dd-hand 8s infinite ease-in-out; }
.dd-tuer { animation: dd-tuer 8s infinite ease-out; }
.dd-t1 { animation: dd-t1 8s infinite; } .dd-t2 { animation: dd-t2 8s infinite; } .dd-t3 { animation: dd-t3 8s infinite; }
@keyframes dd-kachel { 0%, 12% { transform: translate(190px, 20px); } 55%, 70% { transform: translate(58px, 38px); } 71%, 100% { transform: translate(190px, 20px); } }
@keyframes dd-hand { 0%, 12% { transform: translate(214px, 46px); } 55%, 70% { transform: translate(82px, 64px); } 90%, 100% { transform: translate(214px, 46px); } }
@keyframes dd-tuer { 0%, 56% { opacity: 0; transform: scale(.7); } 66% { opacity: 1; transform: scale(1); } 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dd-t1 { 0% { opacity: 0; } 3%, 12% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes dd-t2 { 0%, 16% { opacity: 0; } 20%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes dd-t3 { 0%, 58% { opacity: 0; } 62%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dd-plus, .dd-kachel, .dd-hand, .dd-tuer, .dd-t1, .dd-t2, .dd-t3 { animation: none; } .dd-tuer, .dd-t3 { opacity: 1; } .dd-plus { opacity: 0; } .dd-hand { display: none; } }
:root[data-motion="aus"] .dd-plus, :root[data-motion="aus"] .dd-kachel, :root[data-motion="aus"] .dd-hand, :root[data-motion="aus"] .dd-tuer, :root[data-motion="aus"] .dd-t1, :root[data-motion="aus"] .dd-t2, :root[data-motion="aus"] .dd-t3 { animation: none; }
:root[data-motion="aus"] .dd-tuer, :root[data-motion="aus"] .dd-t3 { opacity: 1; } :root[data-motion="aus"] .dd-plus { opacity: 0; } :root[data-motion="aus"] .dd-hand { display: none; }
/* Zahlenfelder im Gestalter breit genug – der Dreh-/Löschknopf des Browsers überdeckt die Zahl nicht */
.gestalter .gestalter-stepper input[type="number"] { width: 84px; min-width: 7ch; padding: 0 26px 0 8px; text-align: center; }
.gestalter .gestalter-eckzahl input[type="number"] { width: 100%; padding-right: 26px; }
@media (prefers-reduced-motion: reduce) { .tw-plus, .tw-cursor, .tw-klick, .tw-wand, .tw-t1, .tw-t2, .tw-t3, .tw-t4 { animation: none; }
  .tw-wand { opacity: 1; transform: translateX(24px); } .tw-plus, .tw-t3 { opacity: 1; } .tw-cursor { transform: translate(150px, 90px); } }
:root[data-motion="aus"] .tw-plus, :root[data-motion="aus"] .tw-cursor, :root[data-motion="aus"] .tw-klick, :root[data-motion="aus"] .tw-wand,
:root[data-motion="aus"] .tw-t1, :root[data-motion="aus"] .tw-t2, :root[data-motion="aus"] .tw-t3 { animation: none; }
:root[data-motion="aus"] .tw-wand { opacity: 1; transform: translateX(24px); } :root[data-motion="aus"] .tw-plus, :root[data-motion="aus"] .tw-t3 { opacity: 1; }
@media (max-width: 820px) { .gestalter-spalten { grid-template-columns: 1fr; } }
.gestalter-kopf { cursor: grab; touch-action: none; user-select: none; position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; background: var(--flaeche); }
.gestalter-kopf h2 { margin: 0; font-size: 18px; }
.gestalter-hinweis { margin: 2px 0 8px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.gestalter-bild { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 8px; padding: 4px; }
.gestalter-svg { width: 100%; height: auto; display: block; user-select: none; }
.g-korpus { fill: var(--flaeche); stroke: none; }
.g-sockel { fill: #d3a13d; stroke: #8f6c1d; stroke-width: 0.8; }
.g-platte { fill: #6f6a60; }
.g-rahmen { fill: none; stroke: var(--text); stroke-width: 2.6; pointer-events: none; }
.g-flaeche { fill: transparent; stroke: none; cursor: pointer; }
.g-feld:hover .g-flaeche, .g-feld:focus-visible .g-flaeche, .g-feld.hover .g-flaeche { fill: color-mix(in srgb, var(--akzent) 26%, transparent); }
/* Version 0.23: Feld unter dem Zeiger kräftig hervorgehoben (Rahmen und Maße), die übrigen treten zurück; Beschriftung unter der Zeichnung */
.g-hover-rahmen { fill: none; stroke: var(--akzent); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--akzent) 70%, transparent)); }
.g-hover-text { fill: var(--akzent); font-size: 11px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--flaeche); stroke-width: 3px; pointer-events: none; }
.gestalter-svg.hat-hover .g-feld:not(.hover) { opacity: 0.62; }
.g-feld { transition: opacity 0.1s; }
.g-hover-info { min-height: 1.4em; padding: 3px 4px 0; font-size: 12px; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .g-feld { transition: none; } }
.g-feld:focus-visible { outline: none; }
.g-feld.belegt .g-flaeche { fill: color-mix(in srgb, var(--akzent) 20%, transparent); }
.g-feld.gewaehlt .g-flaeche { stroke: var(--akzent); stroke-width: 3; fill: color-mix(in srgb, var(--akzent) 30%, transparent); }
.g-plus-kreis { fill: var(--flaeche); stroke: var(--text-3); stroke-width: 1.4; }
.g-plus { stroke: var(--text-3); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.g-feld:hover .g-plus-kreis { stroke: var(--akzent); } .g-feld:hover .g-plus { stroke: var(--akzent); }
.g-linie { stroke: var(--text-2); stroke-width: 1; fill: none; pointer-events: none; }
.g-text { fill: var(--text); font-size: 11px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.g-mass { fill: var(--text-3); font-size: 9px; text-anchor: middle; pointer-events: none; }
.g-masslinie { stroke: #3d9be0; stroke-width: 1; }
.g-masstext { fill: var(--text-2); font-size: 10px; text-anchor: middle; }
.gestalter-wahl { margin-top: 10px; display: grid; gap: 8px; }
.gestalter-wahl h3 { margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gestalter-marke { font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 999px; background: var(--akzent); color: var(--akzent-text); }
.gestalter-arten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.gestalter-art { justify-content: flex-start; text-align: left; min-height: 38px; }
.gestalter-art.an { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent); font-weight: 650; }
.gestalter-form { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); }
.gestalter-zahl { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.gestalter-stepper { display: inline-flex; align-items: center; gap: 4px; }
.gestalter-stepper input { width: 52px; text-align: center; }
.gestalter-feld { display: grid; gap: 4px; font-size: 13px; }
.gestalter-feld small, .gestalter-leise { color: var(--text-3); font-size: 12px; margin: 0; }
.gestalter-warn { color: #d9534f; font-size: 12.5px; margin: 0; font-weight: 600; }
.gestalter-anschlag { display: grid; gap: 4px; }
.gestalter-anschlag-reihe { display: flex; gap: 4px; flex-wrap: wrap; }
.gestalter-tuerknopf { min-width: 40px; min-height: 36px; font-size: 18px; font-weight: 700; padding: 0 8px; }
.gestalter-tuerknopf.rechts { background: var(--akzent-weich); border-color: var(--akzent); }
@media (pointer: coarse) { .gestalter-art, .gestalter-tuerknopf { min-height: 44px; } }
.gestalter-kopf.zieht { cursor: grabbing; }
.gestalter-art { gap: 8px; align-items: center; }
.gestalter-art > span { line-height: 1.2; }
.front-symbol { flex: none; color: var(--text-2); }
.gestalter-art.an .front-symbol, .gestalter-art:hover .front-symbol, .front-wahl-kachel:hover .front-symbol { color: var(--akzent); }
.gestalter-teilen { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--linie); border-radius: 8px; }
.gestalter-teilen h4 { margin: 0; font-size: 13px; }
.g-trenner { fill: var(--akzent); fill-opacity: 0; stroke: none; touch-action: none; }
.g-trenner.senkrecht { cursor: ew-resize; }
.g-trenner.waagrecht { cursor: ns-resize; }
.g-trenner:hover, .g-trenner:focus-visible { fill-opacity: 0.6; stroke: var(--akzent); stroke-width: 1.5; outline: none; }
/* Auswahl des Fronten-Werkzeugs (Version 0.21): Kacheln mit Bildzeichen am Zeiger */
.front-wahl { position: absolute; z-index: 60; width: min(440px, calc(100% - 16px)); overflow: auto; overscroll-behavior: contain; padding: 10px 12px 12px; background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-2); border-radius: 10px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38); touch-action: pan-y; }
.front-wahl[hidden] { display: none; }
.front-wahl-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.front-wahl-kopf strong { font-size: 15px; }
.front-wahl-kopf small { color: var(--text-3); margin-right: auto; }
.front-wahl-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.front-wahl-kachel { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 8px 4px 6px; min-height: 92px; text-align: center; }
.front-wahl-kachel:disabled { opacity: 0.45; }
.front-wahl-text { font-size: 12px; line-height: 1.2; }
.front-wahl-kachel kbd { position: absolute; top: 3px; right: 4px; font-size: 10px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--linie-2); color: var(--text-3); background: var(--flaeche-2); }
.front-wahl-kachel small { font-size: 10.5px; line-height: 1.15; }
.front-wahl-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-top: 10px; font-size: 12.5px; }
.front-wahl-zahl { display: grid; gap: 2px; }
.front-wahl-zahl input, .front-wahl-zahl select { width: 100%; }
.front-wahl-hinweis { margin: 8px 0 0; font-size: 11.5px; color: var(--text-3); }
@media (pointer: coarse) { .front-wahl-kachel { min-height: 104px; } .front-wahl-kachel kbd { display: none; } }
@media (max-width: 520px) { .front-wahl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-wertanzeige { position: sticky; bottom: 0; margin-top: 6px; padding: 4px 10px; border-radius: 6px; background: var(--akzent); color: var(--akzent-text); font-size: 13px; font-weight: 650; text-align: center; }
/* Gestalter für Eckmöbel (Version 0.22): Reiter der Schränke, Grundriss, Eckschrank-Auswahl mit gesperrten Werten, Innenleben bestückter Felder */
.gestalter-reiter { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.gestalter-reiter-knopf { min-height: 34px; padding: 0 12px; font-size: 13px; }
.gestalter-reiter-knopf.an { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent); font-weight: 650; }
/* Version 0.43 – Mittelwand längs: Umschalter Vorderseite | Rückseite über der Zeichnung (Tippfläche ≥ 38 px) */
.gestalter-seiten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; }
.gestalter-seite-knopf { min-height: 38px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.gestalter-seite-knopf.an { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent); font-weight: 650; }
.gestalter-seiten small { flex: 1 1 180px; color: var(--text-2); font-size: 12px; line-height: 1.35; }
.gestalter-svg.rueckseite .g-rahmen { stroke-dasharray: 7 3; }      /* Rückseite: gestrichelter Rahmen als leiser Hinweis */
.g-wand { stroke: var(--text-3); stroke-width: 4; stroke-linecap: round; }
.g-eck-haupt { fill: color-mix(in srgb, var(--text-3) 22%, transparent); stroke: var(--text-3); stroke-width: 1.4; }
.g-eck-anbau { fill: color-mix(in srgb, var(--text-3) 14%, transparent); stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 4 3; }
.g-eck-anbau.an { stroke: var(--akzent); stroke-width: 2.4; stroke-dasharray: none; }
.g-eck-modul { fill: color-mix(in srgb, var(--akzent) 12%, transparent); stroke: var(--text-2); stroke-width: 1.6; }
.g-eck-modul.an { fill: color-mix(in srgb, var(--akzent) 30%, transparent); stroke: var(--akzent); stroke-width: 3; }
.g-innen { stroke-dasharray: 4 3; opacity: 0.8; }
.g-trenner.gewaehlt { fill-opacity: 0.55; }
.gestalter-marke.zweit { background: var(--flaeche-3, var(--flaeche-2)); color: var(--text); border: 1px solid var(--linie-2); }
.gestalter-art.gesperrt { opacity: 0.5; cursor: not-allowed; }
.gestalter-eckgruppe { display: grid; gap: 6px; }
.gestalter-eckgruppe h4, .gestalter-form h4 { margin: 0; font-size: 13px; }
.gestalter-grund { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-3); line-height: 1.35; }
.gestalter-grund strong { color: var(--text-2); font-weight: 650; }
.gestalter-innen { display: grid; gap: 6px; }
.gestalter-eckzahl { grid-template-columns: 1fr; }
.gestalter-eckzahl input[type="number"] { width: 100%; }
@media (orientation: landscape) and (max-height: 860px) { .gestalter > .gestalter-reiter { grid-column: 1 / -1; } }
/* Querformat (Tablet, flache Fenster): Zeichnung links, Auswahl rechts – nichts liegt unter dem Rand, das Fenster scrollt zusätzlich */
@media (orientation: landscape) and (max-height: 860px) {
  .gestalter { width: min(880px, calc(100vw - 24px)); top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; }
  .gestalter > .gestalter-kopf, .gestalter > .gestalter-hinweis { grid-column: 1 / -1; }
  .gestalter > .gestalter-bild { grid-column: 1; position: sticky; top: 52px; }
  .gestalter > .gestalter-wahl { grid-column: 2; margin-top: 0; }
  .gestalter-arten { grid-template-columns: 1fr; }
  .gestalter-hinweis { display: none; }
}

/* Möbel-Assistent (Version 0.24): geführter Konfigurator am rechten Rand, Möbel bleibt im Viewer sichtbar */
.wizard { position: fixed; left: auto; inset-inline-start: auto; right: 14px; top: 64px; width: min(540px, calc(100vw - 28px)); max-height: calc(100dvh - 80px); overflow: auto; overscroll-behavior: contain;
  margin: 0; padding: 0 16px 14px; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: 60; }
.wizard-kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; background: var(--flaeche); }
.wizard-kopf h2 { margin: 0; font-size: 17px; flex: 1; }
.wizard-zaehler { font-size: 12.5px; color: var(--text-2); }
.wizard-leiste { list-style: none; display: flex; gap: 4px; margin: 0 0 10px; padding: 0; overflow-x: auto; }
.wizard-leiste li { flex: 1 1 0; min-width: 44px; }
.wizard-leiste button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; background: transparent; border: 0; border-top: 3px solid var(--linie); border-radius: 0; color: var(--text-3); font-size: 10.5px; cursor: pointer; }
.wizard-leiste li.fertig button { border-top-color: var(--akzent); color: var(--text-2); }
.wizard-leiste li.aktuell button { border-top-color: var(--akzent); color: var(--text); font-weight: 650; }
.wizard-leiste button:disabled { cursor: default; opacity: .55; }
.wizard-nr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--flaeche-3); font-size: 11px; }
.wizard-leiste li.aktuell .wizard-nr, .wizard-leiste li.fertig .wizard-nr { background: var(--akzent); color: var(--akzent-text); }
.wizard-titel { text-align: center; line-height: 1.15; }
.wizard-frage h3 { margin: 4px 0 2px; font-size: 19px; }
.wizard-hilfe { margin: 0 0 12px; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.wizard-koerper { display: flex; flex-direction: column; gap: 12px; }
.wizard-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wizard-kacheln.einzeln { grid-template-columns: 1fr; }
.wizard-kachel { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; text-align: left; border: 2px solid var(--linie); border-radius: 10px; background: var(--flaeche-2); color: var(--text); cursor: pointer; }
.wizard-kachel:hover { border-color: var(--akzent); }
.wizard-kachel.an { border-color: var(--akzent); background: var(--akzent-weich); }
.wizard-kachel-text { display: flex; flex-direction: column; gap: 2px; }
.wizard-kachel-text small { color: var(--text-2); font-size: 12px; line-height: 1.3; }
.wizard-bild { flex: none; color: var(--text); }
.w-linie { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; } .w-linie.duenn { stroke-width: 1; opacity: .6; } .w-linie.dick { stroke-width: 3.5; stroke: var(--akzent); } .w-linie.gestrichelt { stroke-dasharray: 3 3; }
.wizard-mass { display: flex; flex-direction: column; gap: 4px; }
.wizard-mass label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
.wizard-zahl { width: 92px; text-align: right; font-size: 16px; padding: 6px 8px; }
.wizard-mass .regler { width: 100%; height: 22px; }
.wizard-feldhinweis { min-height: 1.2em; color: var(--text-2); } .wizard-feldhinweis.fehler { color: var(--fehler, #e5484d); }
.wizard-hinweise { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; } .wizard-hinweise:empty { display: none; }
.wizard-zaehler-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche-2); }
.wizard-zaehler-zeile small { display: block; color: var(--text-2); font-size: 12px; }
.wizard-zaehl { display: flex; align-items: center; gap: 8px; } .wizard-zaehl-wert { min-width: 2ch; text-align: center; font-size: 20px; font-weight: 700; }
.wizard-zaehl .symbol-knopf { width: 40px; height: 40px; }
.wizard-skizze { display: grid; place-items: center; padding: 6px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche-2); }
.wizard-skizze-svg { width: 100%; max-width: 280px; height: auto; } .w-korpus { fill: color-mix(in srgb, var(--akzent) 12%, transparent); stroke: var(--text-2); stroke-width: 1.2; } .w-platte { fill: var(--akzent); }
.wizard-link { align-self: flex-start; background: transparent; border: 0; color: var(--akzent); cursor: pointer; text-decoration: underline; padding: 4px 0; }
.wizard-leise { margin: 0; color: var(--text-2); font-size: 12.5px; }
.wizard-gestalter .gestalter-hinweis { margin-top: 0; }
.wizard-problem { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--fehler, #e5484d) 18%, transparent); color: var(--text); font-size: 13px; }
.wizard-fuss { position: sticky; bottom: -14px; display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 0 2px; background: var(--flaeche); }
.wizard-fuss button { min-height: 42px; padding-inline: 18px; font-size: 15px; } .wizard-weiter { margin-left: auto; }
.wizard-zusammen { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; padding: 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche-2); }
.wizard-zusammen dt { color: var(--text-2); } .wizard-zusammen dd { margin: 0; font-weight: 600; }
.wizard-ziele { display: grid; gap: 8px; } .wizard-ziele button.gross { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 14px; font-size: 16px; } .wizard-ziele small { font-weight: 400; }
@media (pointer: coarse) { .wizard-kachel { min-height: 72px; } .wizard-zaehl .symbol-knopf { width: 48px; height: 48px; } }
@media (max-width: 800px) { .wizard { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 60dvh; } .wizard-kacheln { grid-template-columns: 1fr; } }
.wizard[open] { display: block; }
.wizard .wizard-frage h3 { text-transform: none; letter-spacing: 0; color: var(--text); }
.wizard-leiste { flex: none; padding-bottom: 2px; }
.wizard-leiste { overflow: visible; }
.wizard-leiste button { height: auto; min-height: 50px; }
.wizard-ziele button.gross, .wizard-kachel, .wizard-fuss button { height: auto; }
.wizard-ziele button.gross { align-items: flex-start; justify-content: center; line-height: 1.25; }

/* ---- Assistent als schlanke Oberfläche (Version 0.24, Nachtrag): links nur das Möbel, rechts ein breiter Bereich mit Schritten und Einstellungen.
   Querformat (PC, Notebook, Tablet quer): nebeneinander; Hochformat und Handy: Möbel oben, Assistent darunter. Alles andere (Menüs, Leisten,
   Seitenbereiche, Status) ist für die Dauer des Assistenten ausgeblendet. */
body.wizard-modus { --wiz-b: clamp(400px, 36vw, 580px); grid-template-columns: minmax(0, 1fr) var(--wiz-b); grid-template-rows: minmax(0, 1fr); }
body.wizard-modus > #werkzeugleiste, body.wizard-modus > #schnellleiste, body.wizard-modus > #bewegungsleiste, body.wizard-modus > #statusleiste,
body.wizard-modus .arbeitsflaeche > :not(.viewer), body.wizard-modus .viewer .bedienhilfe, body.wizard-modus .viewer .minileiste { display: none !important; }
body.wizard-modus > .arbeitsflaeche { grid-row: 1; grid-column: 1; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
body.wizard-modus .arbeitsflaeche > .viewer { grid-column: 1; grid-row: 1; }
body.wizard-modus .wizard[open] {
  display: flex; flex-direction: column; position: static; grid-row: 1; grid-column: 2; width: auto; height: 100%; max-height: none; margin: 0;
  padding: 0; border: 0; border-left: 1px solid var(--linie-2); border-radius: 0; box-shadow: none; overflow: hidden; z-index: 5;
}
body.wizard-modus .wizard > * { padding-inline: clamp(18px, 2.4vw, 32px); flex: none; }
body.wizard-modus .wizard-kopf { position: static; padding-top: 16px; padding-bottom: 6px; }
body.wizard-modus .wizard-kopf h2 { font-size: 15px; font-weight: 650; color: var(--text-2); }
body.wizard-modus .wizard-zaehler { font-size: 13px; }
body.wizard-modus .wizard-leiste { margin-bottom: 4px; gap: 6px; }
body.wizard-modus .wizard-leiste li { min-width: 0; }
body.wizard-modus .wizard-leiste li.aktuell { flex: 2.4 1 0; }
body.wizard-modus .wizard-leiste li:not(.aktuell) .wizard-titel { display: none; }
body.wizard-modus .wizard-leiste button { min-height: 44px; font-size: 12px; }
body.wizard-modus .wizard-frage h3 { font-size: clamp(20px, 1.9vw, 26px); margin-top: 10px; }
body.wizard-modus .wizard-hilfe { font-size: 14.5px; margin-bottom: 8px; }
body.wizard-modus .wizard-koerper { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-block: 6px 14px; gap: 14px; }
body.wizard-modus .wizard-problem { margin: 0 clamp(18px, 2.4vw, 32px) 6px; padding-inline: 10px; }
body.wizard-modus .wizard-fuss { position: static; margin: 0; padding-top: 12px; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); }
body.wizard-modus .wizard-fuss button { min-height: 46px; font-size: 16px; }
body.wizard-modus .wizard-kacheln { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
body.wizard-modus .wizard-kacheln.einzeln { grid-template-columns: 1fr; }
body.wizard-modus .wizard-skizze-svg { max-width: 340px; }
body.wizard-modus .wizard-gestalter { min-height: 0; }
body.wizard-modus .wizard-ziele { grid-template-columns: 1fr; }
/* Die Knopfreihe der Feldauswahl („Einbauen“, „Leeren“ …) bleibt am unteren Rand des scrollenden Bereichs stehen – immer sichtbar, ohne zu scrollen */
.wizard .gestalter-form .knopfreihe, .wizard .g-form .knopfreihe, .wizard .wizard-gestalter .knopfreihe {
  position: sticky; bottom: 0; z-index: 4; margin-inline: calc(-1 * clamp(0px, 1vw, 12px)); padding: 10px 4px 8px; background: var(--flaeche);
  border-top: 1px solid var(--linie); box-shadow: 0 -8px 10px -8px rgba(0, 0, 0, .25);
}
.wizard .knopfreihe button.primaer { min-height: 44px; flex: 1 1 auto; }
.wizard-weiterfrage { margin: 6px 0 0; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--text); }
.wizard-tipp { margin: 0; padding: 8px 10px; border-left: 3px solid var(--akzent); border-radius: 4px; background: var(--akzent-weich); color: var(--text); font-size: 13px; line-height: 1.4; }
@media (orientation: portrait) and (min-width: 600px), (max-width: 800px) {
  body.wizard-modus { --wiz-h: 42dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--wiz-h) minmax(0, 1fr); }
  body.wizard-modus .wizard[open] { grid-row: 2; grid-column: 1; border-left: 0; border-top: 1px solid var(--linie-2); }
  body.wizard-modus .wizard > * { padding-inline: 14px; }
  body.wizard-modus .wizard-kopf { padding-top: 8px; }
  body.wizard-modus .wizard-frage h3 { font-size: 18px; margin-top: 4px; }
  body.wizard-modus .wizard-hilfe { font-size: 13px; margin-bottom: 4px; }
  body.wizard-modus .wizard-leiste button { min-height: 36px; }
  body.wizard-modus .wizard-problem { margin-inline: 14px; }
  body.wizard-modus .wizard-kacheln { grid-template-columns: 1fr 1fr; }
  body.wizard-modus .wizard-skizze { display: none; }          /* das Möbel selbst ist oben sichtbar – Platz für die Bedienung */
}
@media (max-height: 520px) and (orientation: landscape) {
  body.wizard-modus .wizard-hilfe { display: none; }
  body.wizard-modus .wizard-kopf { padding-top: 6px; }
}
@media (pointer: coarse) { body.wizard-modus .wizard-kachel { min-height: 72px; } body.wizard-modus .wizard-fuss button { min-height: 52px; } }

/* ---- Assistent, Erweiterung (Version 0.25): Vorlagen, Material und Farbe, Ausstattung, laufender Preis, Schnellwahl; Überläufe beseitigt ---- */
.wizard, .wizard * { min-width: 0; }
.wizard { overflow-x: hidden; }
.wizard-kopf { flex-wrap: nowrap; }
.wizard-kopf-titel { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; }
.wizard-kopf-titel h2 { flex: none; line-height: 1.2; }
.wizard-preis { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-align: right; }
.wizard-preis small { font-size: 10.5px; color: var(--text-3); }
.wizard-preis strong { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.wizard-koerper { overflow-x: hidden; }
.wizard-kacheln, .wizard-auswahl.kacheln { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
body.wizard-modus .wizard-kacheln { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.wizard-kachel { overflow-wrap: anywhere; }
.wizard-kachel-text { flex: 1 1 auto; }
.wizard-gruppe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 8px 0 -4px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); }
.wizard-gruppe small { font-size: 12px; font-weight: 400; color: var(--text-2); }
.wizard-bedingt { display: flex; flex-direction: column; gap: 12px; }
.wizard-bedingt[hidden] { display: none; }
.wizard-auswahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wizard-auswahl.kacheln { display: grid; gap: 8px; }
.wizard-chip { min-height: 38px; padding: 6px 12px; border: 2px solid var(--linie); border-radius: 999px; background: var(--flaeche-2); color: var(--text); font-size: 13.5px; cursor: pointer; }
.wizard-chip:hover { border-color: var(--akzent); }
.wizard-chip.an { border-color: var(--akzent); background: var(--akzent-weich); font-weight: 650; }
.wizard-chip.klein { min-height: 32px; padding: 3px 10px; font-size: 12.5px; }
.wizard-schnell { display: flex; flex-wrap: wrap; gap: 5px; }
.wizard-farbe { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; padding: 6px 4px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; }
.wizard-farbe:hover { border-color: var(--linie-2); }
.wizard-farbe.an { border-color: var(--akzent); background: var(--akzent-weich); }
.wizard-muster { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rand-ctrl, var(--linie-2)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.wizard-farbname { font-size: 11.5px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.wizard-preisblock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--akzent); border-radius: 10px; background: var(--akzent-weich); }
.wizard-preisblock:empty { display: none; }
.wizard-preisblock strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.wizard-preisblock small { flex-basis: 100%; color: var(--text-2); font-size: 12px; }
.wizard-ansichten { display: flex; flex-wrap: wrap; gap: 6px; }
.wizard-ablage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.wizard-ablage button { height: auto; min-height: 42px; }
.wizard-zusammen { grid-template-columns: max-content minmax(0, 1fr); }
.wizard-zusammen dd, .wizard-zusammen dt { overflow-wrap: anywhere; }
.wizard-leiste li { min-width: 0; }
.wizard-leiste button { min-width: 0; }
.wizard-details ul, .wizard-hinweise { overflow-wrap: anywhere; }
.wizard .gestalter-form, .wizard .wizard-gestalter { max-width: 100%; }
.wizard-gestalter svg { max-width: 100%; height: auto; }
.wizard-hilfe, .wizard-frage h3, .wizard-leise, .wizard-tipp, .wizard-problem { overflow-wrap: anywhere; }
.wizard input[type=range] { max-width: 100%; }
@media (max-width: 480px) { .wizard-preis strong { font-size: 16px; } .wizard-zusammen { grid-template-columns: 1fr; } .wizard-zusammen dt { margin-top: 6px; } }
/* Überläufe (0.25): Knöpfe brechen im Grundstil nicht um – im Assistenten dürfen Texte umbrechen; Schieberegler ohne Standard-Außenabstand */
.wizard-kachel, .wizard-kachel *, .wizard-farbe, .wizard-farbe *, .wizard-titel, .wizard-ziele button, .wizard-ablage button { white-space: normal; }
.wizard-farbe { width: 84px; }
.wizard input[type=range] { margin: 0; box-sizing: border-box; }
.wizard-leiste li.aktuell .wizard-titel { overflow-wrap: anywhere; hyphens: auto; }
.wizard .gestalter-wahl, .wizard .gestalter-wahl * { max-width: 100%; }
body.wizard-modus .wizard-leiste li.aktuell { flex: 4.4 1 0; }
.wizard-leiste li.aktuell .wizard-titel { overflow-wrap: normal; hyphens: manual; }
@media (max-width: 480px) { body.wizard-modus .wizard-leiste { gap: 3px; } body.wizard-modus .wizard-leiste button { font-size: 11px; } }

/* ---- Assistent, Erweiterung 2 (Version 0.26): große Bedienelemente für Tablet, Notebook und PC; Zahleneingabe sichtbar; quadratische Farbfelder;
   verschiebbare Skizze; Knopf „Fronten durchsichtig“; Bewegungsregler im 3D-Fenster; Zwischenfrage und Liste „Bereits eingebaut“ ---- */
body.wizard-modus { --wiz-b: clamp(460px, 40vw, 680px); }
.wizard { font-size: 16px; }
.wizard-kopf .symbol-knopf { flex: none; width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
.wizard-kopf-titel h2 { font-size: 17px; }
.wizard-zaehler { font-size: 14px; }
.wizard-preis strong { font-size: 24px; }
.wizard-preis small { font-size: 12px; }
body.wizard-modus .wizard-frage h3 { font-size: clamp(24px, 2.2vw, 31px); line-height: 1.2; }
body.wizard-modus .wizard-hilfe { font-size: 16.5px; line-height: 1.5; }
body.wizard-modus .wizard-leiste button { min-height: 52px; font-size: 13px; }
body.wizard-modus .wizard-nr { width: 26px; height: 26px; font-size: 13px; }
.wizard-kachel { min-height: 84px; padding: 14px 16px; gap: 14px; border-radius: 12px; }
.wizard-kachel-text strong { font-size: 17.5px; }
.wizard-kachel-text small { font-size: 14.5px; line-height: 1.4; }
.wizard-bild { width: 60px; height: 45px; }
.wizard-gruppe { margin-top: 12px; font-size: 18px; }
.wizard-gruppe small { font-size: 14px; }
.wizard-chip { min-height: 50px; padding: 8px 18px; font-size: 16.5px; }
.wizard-chip.klein { min-height: 42px; padding: 4px 14px; font-size: 15px; }
.wizard-zaehler-zeile { padding: 14px 16px; }
.wizard-zaehler-zeile strong { font-size: 17.5px; }
.wizard-zaehler-zeile small { font-size: 14.5px; }
.wizard-zaehl { gap: 12px; } .wizard-zaehl-wert { font-size: 26px; min-width: 2.2ch; }
.wizard-zaehl .symbol-knopf { width: 54px; height: 54px; border-radius: 50%; }
.wizard-fuss button { min-height: 56px; font-size: 18px; padding-inline: 26px; border-radius: 12px; }
.wizard-leise, .wizard-tipp, .wizard-problem, .wizard-hinweise { font-size: 15px; line-height: 1.5; }
.wizard-zusammen { font-size: 16px; gap: 8px 16px; }
.wizard-ziele button.gross { min-height: 76px; font-size: 18px; }
.wizard-ablage button, .wizard-ansichten .wizard-chip { min-height: 52px; font-size: 16px; }
.wizard-preisblock strong { font-size: 28px; }
/* Zahleneingabe: sichtbares Feld mit Tastatursymbol und „mm“ */
.wizard-mass { gap: 8px; }
.wizard-mass-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 650; font-size: 18px; }
.wizard-eingabe { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border: 2px solid var(--akzent); border-radius: 12px; background: var(--flaeche); cursor: text; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.wizard-eingabe:focus-within { outline: 3px solid color-mix(in srgb, var(--akzent) 40%, transparent); outline-offset: 1px; }
.wizard-eingabe-symbol { display: inline-flex; color: var(--akzent); }
.wizard-eingabe .wizard-zahl { width: 5.4ch; min-width: 5ch; border: 0; background: transparent; box-shadow: none; padding: 6px 2px; font-size: 24px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.wizard-eingabe .wizard-zahl:focus { outline: none; }
.wizard-einheit { color: var(--text-2); font-size: 16px; font-weight: 600; }
.wizard-mass .regler { height: 30px; }
.wizard-feldhinweis { font-size: 14.5px; }
.wizard-tastatur { display: flex; gap: 12px; align-items: flex-start; }
.wizard-tastatur > span:first-child { flex: none; color: var(--akzent); margin-top: 2px; display: inline-flex; }
/* Farbfelder: quadratisch, alle Farben sichtbar, plus eigene Farbe */
.wizard-auswahl.farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.wizard-farbe { position: relative; width: auto; padding: 8px 4px 6px; border-radius: 12px; }
.wizard-farbe[hidden] { display: none; }
.wizard-muster { width: 100%; max-width: 72px; aspect-ratio: 1 / 1; height: auto; border-radius: 10px; }
.wizard-farbname { font-size: 13.5px; }
.wizard-farbwahl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
/* Skizze mit Pfeilknöpfen */
.wizard-skizzenblock { display: flex; flex-direction: column; gap: 6px; }
/* Fachboden in einer Möbelzelle bearbeiten (neben einer Trennwand) */
.wizard-fachboden { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--linie-2); border-radius: 6px; background: var(--flaeche-2); }
.wizard-fachboden[hidden] { display: none; }
.wizard-fachboden small { display: block; color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.wizard-fachboden-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wizard-fachboden-zeile label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.wizard-knopf-klein { min-height: 36px; padding: 4px 12px; border: 1px solid var(--linie-2); border-radius: 6px; background: var(--flaeche); color: var(--text); font-size: 13.5px; cursor: pointer; }
.wizard-knopf-klein:disabled { opacity: 0.5; cursor: default; }
.wizard-knopf-klein[hidden] { display: none; }
@media (pointer: coarse) { .wizard-knopf-klein { min-height: 42px; padding-inline: 14px; } }
.wizard-skizze { padding: 10px; touch-action: none; }
body.wizard-modus .wizard-skizze-svg { max-width: 460px; }
.wizard-skizze-svg { user-select: none; -webkit-user-select: none; }
.w-fass { fill: transparent; cursor: grab; }
.w-knopf { fill: var(--akzent); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.w-pfeil { fill: #fff; pointer-events: none; }
.w-griff { cursor: grab; outline: none; }
.w-griff:hover .w-knopf, .w-griff:focus .w-knopf, .w-griff.aktiv .w-knopf { fill: #ff8a1f; stroke-width: 3.5; }
.w-griff.puls:not(.aktiv) .w-knopf { animation: w-puls 1.4s ease-in-out infinite; animation-delay: var(--puls-delay, 0s); transform-box: fill-box; transform-origin: center; }
.wizard-skizze.puls-aus .w-knopf { animation: none !important; }
.wizard-skizze.zieht, .wizard-skizze.zieht .w-fass, .wizard-skizze.zieht .w-griff { cursor: grabbing; }
@keyframes w-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .w-griff.puls:not(.aktiv) .w-knopf { animation: none; } }
.wizard-skizze-wert { min-height: 1.5em; text-align: center; font-size: 15px; color: var(--text-2); }
/* Knopf „Fronten durchsichtig“ im 3D-Fenster */
.wizard-trans { position: absolute; left: 14px; top: 14px; z-index: 8; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px 8px 14px; border: 2px solid var(--rand-ctrl, var(--linie-2)); border-radius: 999px;
  background: var(--flaeche); color: var(--text); font-size: 16.5px; font-weight: 650; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); white-space: nowrap; }
.wizard-trans:hover { border-color: var(--akzent); }
.wizard-trans.an { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text, #fff); }
.wizard-trans-schalter { position: relative; width: 38px; height: 22px; border-radius: 999px; background: color-mix(in srgb, currentColor 30%, transparent); }
.wizard-trans-schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: currentColor; transition: transform .15s; }
.wizard-trans.an .wizard-trans-schalter::after { transform: translateX(16px); }
/* Bewegungsregler im 3D-Fenster (erst wenn es Türen, Schübe oder Klappen gibt) */
body.wizard-modus > #bewegungsleiste { display: none !important; }
body.wizard-modus.hat-bewegung > #bewegungsleiste { display: flex !important; position: fixed; z-index: 9; left: 14px; bottom: 14px; grid-row: auto; flex-wrap: wrap; gap: 8px 22px; max-width: calc(100vw - var(--wiz-b) - 28px);
  padding: 10px 16px; border: 1px solid var(--linie-2); border-radius: 14px; background: color-mix(in srgb, var(--flaeche) 94%, transparent); box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }
body.wizard-modus .bewegungsleiste .bew-titel, body.wizard-modus .bewegungsleiste .bew-knoepfe, body.wizard-modus .bewegungsleiste .bew-regler:has(#bew-explosion), body.wizard-modus .bewegungsleiste .bew-regler:has(#bew-hose_offen) { display: none; }
body.wizard-modus .bew-regler { gap: 10px; font-size: 16px; }
body.wizard-modus .bew-regler input[type=range] { width: clamp(120px, 14vw, 200px); height: 30px; }
body.wizard-modus .bew-wert { font-size: 15px; min-width: 3.4ch; }
/* Gestalter im Assistenten: Entfernen, Zwischenfrage, Liste „Bereits eingebaut“ */
.wizard .gestalter-art { min-height: 70px; font-size: 16px; }
.wizard .knopfreihe button, .wizard .frage-reihe button { min-height: 50px; font-size: 16px; }
.wizard .knopfreihe.lose { position: static; padding: 4px 0; border: 0; box-shadow: none; background: transparent; margin-inline: 0; }
.wizard button.gefahr { border-color: #c2413a; color: #c2413a; font-weight: 650; }
.wizard button.gefahr:hover { background: color-mix(in srgb, #c2413a 12%, transparent); }
.wizard .frage-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.wizard .gestalter-frage { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 2px solid var(--akzent); border-radius: 12px; background: var(--akzent-weich); }
.wizard .gestalter-frage h4 { margin: 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.wizard .gestalter-eingebaut { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche-2); }
.wizard .gestalter-eingebaut h4 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text-2); }
.wizard .gestalter-eingebaut ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wizard .gestalter-eingebaut li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border: 1px solid var(--linie-2); border-radius: 999px; background: var(--flaeche); font-size: 15px; }
.wizard .gestalter-weg { flex: none; width: 36px; height: 36px; min-height: 36px; min-width: 36px; padding: 0; border-radius: 50%; border: 0; background: color-mix(in srgb, #c2413a 14%, transparent); color: #c2413a; font-size: 17px; font-weight: 700; cursor: pointer; }
.wizard .gestalter-weg:hover { background: #c2413a; color: #fff; }
.wizard .gestalter-eingebaut-leer { margin: 0; }
@media (orientation: portrait) and (min-width: 600px), (max-width: 800px) {
  body.wizard-modus.hat-bewegung > #bewegungsleiste { bottom: auto; top: calc(var(--wiz-h) - 66px); max-width: calc(100vw - 28px); padding: 6px 12px; }
  .wizard-trans { top: 8px; left: 8px; min-height: 44px; font-size: 14.5px; padding: 6px 12px; }
  .wizard-preis strong { font-size: 20px; }
}

/* ---- Assistent 0.27: breiterer Konfigurationsbereich auf Notebook und PC (weniger Scrollen), kleinere Farbfelder, Chip „Eingabe per Hand“ ---- */
body.wizard-modus { --wiz-b: clamp(560px, 52vw, 960px); }
@media (max-width: 1100px) and (orientation: landscape) { body.wizard-modus { --wiz-b: clamp(520px, 54vw, 700px); } }
body.wizard-modus .wizard-kacheln { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
body.wizard-modus .wizard-skizze-svg { max-width: 520px; }
.wizard-auswahl.farben { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px 4px; }
.wizard-farbe { padding: 6px 2px 4px; gap: 3px; min-width: 0; overflow: hidden; }
.wizard-muster { flex: none; width: 40px; max-width: none; height: 40px; aspect-ratio: auto; border-radius: 8px; }
.wizard-farbname { font-size: 12px; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.wizard-chip.hand { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; border-color: var(--akzent); color: var(--akzent); font-weight: 650; }
.wizard-chip.hand:hover { background: var(--akzent-weich); }

/* ---- Assistent 0.28: sachliches, ruhiges Erscheinungsbild; breiterer Konfigurationsbereich und etwas kleinere Elemente auf Notebook/PC; rechteckige Farbfelder ---- */
/* Schnell-Löschen-Knopf: immer ein Kreis (der Grundstil für Knöpfe dehnte ihn in die Breite) */
.loesch-knopf { box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; min-height: 18px; max-width: 18px; max-height: 18px; aspect-ratio: 1 / 1; padding: 0; margin: 0; flex: none; line-height: 0; border-radius: 50%; }
.loesch-knopf svg { width: 12px; height: 12px; display: block; }

/* Farbfelder: Rechtecke mit Namen daneben – nichts wird abgeschnitten */
.wizard-auswahl.farben { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.wizard-farbe { height: auto; min-height: 44px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 10px; overflow: visible; text-align: left;
  border: 1px solid var(--linie-2); border-radius: 6px; background: var(--flaeche); }
.wizard-farbe:hover { border-color: var(--akzent); }
.wizard-farbe.an { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); background: var(--flaeche); }
.wizard-muster { width: 44px; height: 30px; flex: none; border-radius: 4px; border: 1px solid var(--rand-ctrl, var(--linie-2)); box-shadow: none; aspect-ratio: auto; max-width: none; }
.wizard-farbname { flex: 1 1 auto; text-align: left; font-size: 13.5px; line-height: 1.2; overflow-wrap: normal; hyphens: manual; white-space: normal; }

/* Gestalter im Assistenten: Zeichnung kleiner, damit die Auswahl darunter sofort sichtbar ist */
.wizard .gestalter-bild .gestalter-svg { width: 100%; height: clamp(160px, 24vh, 220px); }

/* Erscheinungsbild: flach, neutral, Akzentfarbe nur für Auswahl und Hauptknopf */
.wizard-kachel { position: relative; border: 1px solid var(--linie-2); border-radius: 6px; background: var(--flaeche); box-shadow: none; padding-right: 36px; }
.wizard-kachel:hover { border-color: var(--akzent); background: var(--flaeche); }
.wizard-kachel.an { border-color: var(--akzent); box-shadow: inset 4px 0 0 var(--akzent); background: var(--flaeche); }
.wizard-kachel.an::after { content: "✓"; position: absolute; right: 12px; top: 10px; color: var(--akzent); font-weight: 700; font-size: 16px; }
.wizard-kachel-text strong { font-weight: 650; }
.wizard-chip { border: 1px solid var(--linie-2); border-radius: 6px; background: var(--flaeche); font-weight: 500; }
.wizard-chip:hover { border-color: var(--akzent); background: var(--flaeche); }
.wizard-chip.an { border-color: var(--akzent); background: var(--akzent); color: var(--akzent-text, #fff); font-weight: 600; }
.wizard-chip.hand { border-style: dashed; background: transparent; color: var(--akzent); }
.wizard-chip.hand:hover { background: var(--flaeche-2); }
.wizard-gruppe { margin: 14px 0 -2px; padding-bottom: 5px; border-bottom: 1px solid var(--linie-2); font-size: 12.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.wizard-gruppe small { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 400; }
.wizard-zaehler-zeile, .wizard-skizze, .wizard-zusammen, .wizard-preisblock, .wizard-eingabe, .wizard .gestalter-eingebaut { border-radius: 6px; box-shadow: none; }
.wizard-zaehler-zeile, .wizard-skizze, .wizard-zusammen, .wizard .gestalter-eingebaut { background: var(--flaeche); border: 1px solid var(--linie-2); }
.wizard-eingabe { border: 1px solid var(--rand-ctrl, var(--linie-2)); }
.wizard-eingabe:focus-within { border-color: var(--akzent); outline: 2px solid color-mix(in srgb, var(--akzent) 35%, transparent); outline-offset: 0; }
.wizard-eingabe-symbol { color: var(--text-2); }
.wizard-tipp { border-left: 3px solid var(--linie-2); border-radius: 0 6px 6px 0; background: var(--flaeche-2); }
.wizard-tastatur > span:first-child { color: var(--text-2); }
.wizard-preisblock { border: 1px solid var(--linie-2); border-left: 4px solid var(--akzent); background: var(--flaeche-2); }
.wizard .gestalter-frage { border: 1px solid var(--linie-2); border-left: 4px solid var(--akzent); border-radius: 0 6px 6px 0; background: var(--flaeche-2); }
.wizard .gestalter-eingebaut li { border-radius: 6px; padding-left: 12px; }
.wizard .gestalter-weg { border-radius: 50%; }
body.wizard-modus .wizard-frage h3 { font-weight: 650; letter-spacing: -.01em; }
body.wizard-modus .wizard-nr { border-radius: 4px; }
.wizard-fuss button, .wizard-ziele button.gross, .wizard-ablage button, .wizard .knopfreihe button, .wizard .frage-reihe button { border-radius: 6px; }
.wizard .gestalter-art { border-radius: 6px; }
.wizard-trans { border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); font-weight: 600; }
body.wizard-modus.hat-bewegung > #bewegungsleiste { border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }

/* Notebook und PC (Maus): breiterer Konfigurationsbereich, etwas kleinere Elemente und Schriften – mehr Optionen ohne Scrollen */
@media (pointer: fine) {
  body.wizard-modus { --wiz-b: clamp(620px, 56vw, 1040px); }
  .wizard { font-size: 15px; }
  body.wizard-modus .wizard-frage h3 { font-size: clamp(20px, 1.7vw, 26px); margin-top: 6px; }
  body.wizard-modus .wizard-hilfe { font-size: 14.5px; line-height: 1.45; margin-bottom: 4px; }
  body.wizard-modus .wizard-leiste button { min-height: 44px; font-size: 12px; }
  body.wizard-modus .wizard-nr { width: 22px; height: 22px; font-size: 12px; }
  body.wizard-modus .wizard-koerper { gap: 10px; }
  .wizard-kachel { min-height: 64px; padding: 10px 14px; gap: 12px; }
  .wizard-kachel-text strong { font-size: 15.5px; }
  .wizard-kachel-text small { font-size: 13px; }
  .wizard-bild { width: 48px; height: 36px; }
  .wizard-gruppe { font-size: 12px; }
  .wizard-chip { min-height: 40px; padding: 5px 14px; font-size: 14.5px; }
  .wizard-chip.klein { min-height: 34px; padding: 3px 11px; font-size: 13.5px; }
  .wizard-zaehler-zeile { padding: 10px 14px; }
  .wizard-zaehler-zeile strong { font-size: 15.5px; }
  .wizard-zaehler-zeile small { font-size: 13px; }
  .wizard-zaehl .symbol-knopf { width: 44px; height: 44px; }
  .wizard-zaehl-wert { font-size: 22px; }
  .wizard-fuss button { min-height: 48px; font-size: 16px; padding-inline: 22px; }
  body.wizard-modus .wizard-fuss button { min-height: 48px; font-size: 16px; }
  .wizard-leise, .wizard-tipp, .wizard-problem, .wizard-hinweise { font-size: 13.5px; }
  .wizard-mass-kopf { font-size: 16px; }
  .wizard-eingabe .wizard-zahl { font-size: 20px; padding: 4px 2px; }
  .wizard-einheit { font-size: 14px; }
  .wizard-mass .regler { height: 24px; }
  .wizard-zusammen { font-size: 14.5px; }
  .wizard-ziele button.gross { min-height: 64px; font-size: 16px; }
  .wizard-ablage button { min-height: 44px; font-size: 14.5px; }
  .wizard-preisblock strong { font-size: 24px; }
  .wizard-farbe { min-height: 40px; padding: 5px 9px; }
  .wizard-muster { width: 40px; height: 26px; }
  .wizard-farbname { font-size: 13px; }
  .wizard .gestalter-art { min-height: 60px; font-size: 14.5px; }
  .wizard .knopfreihe button, .wizard .frage-reihe button { min-height: 44px; font-size: 14.5px; }
  .wizard .gestalter-frage h4 { font-size: 16px; }
  .wizard .gestalter-eingebaut li { font-size: 13.5px; }
  .wizard-trans { min-height: 44px; font-size: 14.5px; padding: 6px 14px 6px 12px; }
  body.wizard-modus .bew-regler { font-size: 14.5px; }
}

/* ---- Assistent 0.29: gewähltes Feld grün, Entfernen-Knopf zentriert, Fenster „Überstände“ ---- */
.g-feld.gewaehlt .g-flaeche { fill: rgba(46, 160, 67, .38); stroke: #1f8a3b; stroke-width: 3.5; }
.g-feld.gewaehlt.belegt .g-flaeche { fill: rgba(46, 160, 67, .38); }
.g-feld:hover .g-flaeche, .g-feld.hover .g-flaeche { fill: color-mix(in srgb, #2ea043 22%, transparent); }
.wizard .gestalter-weg { display: inline-grid; place-items: center; padding: 0; line-height: 0; font-size: 0; box-sizing: border-box; }
.wizard .gestalter-weg svg { width: 16px; height: 16px; display: block; }
.wizard-modal { width: min(460px, 92vw); padding: 20px 24px; border: 1px solid var(--linie-2); border-radius: 8px; background: var(--flaeche); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); font-size: 15px; }
.wizard-modal::backdrop { background: rgba(0, 0, 0, .45); }
.wizard-modal h3 { margin: 0 0 6px; font-size: 20px; }
.wizard-modal .wizard-mass-kopf { margin: 12px 0; }
.wizard-modal-grenze { color: var(--text-3); font-weight: 400; font-size: 12.5px; min-width: 7ch; text-align: right; }
.wizard-modal .frage-reihe { display: flex; justify-content: flex-end; margin-top: 16px; }
.wizard-modal .frage-reihe button { min-height: 44px; padding-inline: 24px; border-radius: 6px; }

/* ---- 0.31: Schnell-Löschen-Knopf im Assistenten – die Regel „.wizard > *“ gab ihm seitliche Innenabstände (daher oval) ---- */
.wizard > .loesch-knopf, body.wizard-modus .wizard > .loesch-knopf, body.wizard-modus .wizard .loesch-knopf {
  box-sizing: border-box !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;
  padding: 0 !important; margin: 0 !important; flex: none !important; border-radius: 50% !important; aspect-ratio: 1 / 1; line-height: 0; display: grid; place-items: center;
  background: color-mix(in srgb, #c2413a 16%, var(--flaeche)); color: #c2413a; border: 0; opacity: 1; }
.wizard > .loesch-knopf:hover { background: #c2413a; color: #fff; }
.wizard > .loesch-knopf svg { width: 12px; height: 12px; display: block; }

/* ---- Assistent: Übergänge und Animationen stehen seit Version 0.40 in css/wizard-motion.css (Motion-Tokens) ---- */

/* ---- 0.33: Einstellungen der Innenschübe im Assistenten ---- */
.wizard-isk { margin-top: 10px; border: 1px solid var(--linie-2); border-left: 4px solid var(--akzent); border-radius: 0 6px 6px 0; background: var(--flaeche); }
.wizard-isk > summary { cursor: pointer; padding: 10px 14px; font-weight: 650; font-size: 15.5px; list-style: none; }
.wizard-isk > summary::-webkit-details-marker { display: none; }
.wizard-isk > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform .2s ease; }
.wizard-isk[open] > summary::before { transform: rotate(90deg); }
.wizard-isk > summary small { font-weight: 400; color: var(--text-2); }
.wizard-isk-gruppe { padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.wizard-isk-gruppe h5 { margin: 6px 0 0; font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.wizard-isk-gruppe h5 small { margin-left: 8px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.wizard-isk .wizard-auswahl.farben { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

/* ---- Assistent 0.34: Smartphone. Kleine 3D-Vorschau oben, darunter schlanke Bedienung; Einstellungsgruppen sind Zeilen („Titel · Wert ›“), die ein Blatt von
   unten öffnen (js/ui/wizard.js `sektionieren()`, `blattOeffnen()`). Grenze wie HANDY_ABFRAGE: max-width 640px, oder niedrig + Touch im Querformat. ---- */
.wizard-zeile { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; text-align: left; border: 1px solid var(--linie-2); border-radius: 6px; background: var(--flaeche); color: var(--text); cursor: pointer; font-size: 16px; }
.wizard-zeile:active { background: var(--flaeche-2); }
.wizard-zeile-name { flex: none; font-weight: 650; }
.wizard-zeile-wert { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--akzent); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-zeile svg, .wizard-zeile [sym] { flex: none; color: var(--text-3); }
.wizard-blatt { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(560px, 100%); max-width: 100%; max-height: min(68dvh, 620px); padding: 0; border: 1px solid var(--linie-2); border-bottom: 0;
  border-radius: 16px 16px 0 0; background: var(--flaeche); color: var(--text); box-shadow: 0 -8px 30px rgba(0, 0, 0, .3); overflow: hidden; }
.wizard-blatt[open] { display: flex; flex-direction: column; animation: wiz-blatt .22s cubic-bezier(.2, .7, .2, 1) both; }
.wizard-blatt::backdrop { background: rgba(0, 0, 0, .16); }
@keyframes wiz-blatt { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.wizard-blatt-kopf { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px 16px; border-bottom: 1px solid var(--linie); }
.wizard-blatt-titel { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.wizard-blatt-titel h3 { margin: 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.wizard-blatt-titel small { color: var(--text-2); font-size: 13px; }
.wizard-blatt-kopf button { flex: none; min-height: 44px; padding-inline: 22px; border-radius: 6px; font-size: 16px; }
.wizard-blatt-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }
.wizard-blatt-inhalt .wizard-kacheln, .wizard-blatt-inhalt .wizard-auswahl.kacheln { grid-template-columns: 1fr; }
body.wizard-modus .wizard > dialog.wizard-blatt { padding: 0; }
@media (max-height: 500px) { .wizard-blatt { max-height: 90dvh; } }
@media (max-width: 640px) {
  body.wizard-modus { --wiz-h: 28dvh; }
  body.wizard-modus .wizard > * { padding-inline: 12px; }
  body.wizard-modus .wizard-kopf { padding-top: 6px; padding-bottom: 2px; gap: 8px; }
  .wizard-kopf-titel { flex-direction: row; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
  body.wizard-modus .wizard-kopf h2 { font-size: 14px; }
  .wizard-zaehler { font-size: 12.5px; }
  .wizard-preis strong { font-size: 17px; }
  .wizard-preis small { display: none; }
  .wizard-kopf .symbol-knopf { width: 40px; height: 40px; min-width: 40px; }
  body.wizard-modus .wizard-leiste { margin: 0 0 2px; gap: 3px; }
  body.wizard-modus .wizard-leiste button { min-height: 32px; font-size: 12px; padding-block: 3px; }
  body.wizard-modus .wizard-nr { display: none; }
  body.wizard-modus .wizard-leiste li.aktuell .wizard-titel { display: block; }
  body.wizard-modus .wizard-frage h3 { font-size: 19px; margin-top: 2px; }
  body.wizard-modus .wizard-hilfe { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.35; margin-bottom: 2px; }
  body.wizard-modus .wizard-koerper { gap: 10px; padding-block: 6px 10px; }
  body.wizard-modus .wizard-kacheln, body.wizard-modus .wizard-auswahl.kacheln { grid-template-columns: 1fr; }
  .wizard-kachel { min-height: 58px; padding: 8px 12px; gap: 12px; }
  .wizard-kachel-text strong { font-size: 15.5px; }
  .wizard-kachel-text small { font-size: 13px; }
  .wizard-bild { width: 44px; height: 33px; }
  .wizard-chip { min-height: 44px; padding: 6px 14px; font-size: 15px; }
  .wizard-fuss { padding-top: 8px; }
  body.wizard-modus .wizard-fuss button { min-height: 50px; font-size: 16.5px; padding-inline: 20px; }
  body.wizard-modus .wizard-skizze { display: grid; padding: 6px; }
  body.wizard-modus .wizard-skizze-svg { max-width: 100%; max-height: 30dvh; }
  .wizard-tastatur { display: none; }
  .wizard-trans { top: 6px; left: 6px; min-height: 38px; padding: 4px 10px; gap: 8px; font-size: 13px; }
  .wizard-trans-schalter { width: 32px; height: 19px; } .wizard-trans-schalter::after { width: 13px; height: 13px; } .wizard-trans.an .wizard-trans-schalter::after { transform: translateX(13px); }
  body.wizard-modus.hat-bewegung > #bewegungsleiste { top: calc(var(--wiz-h) - 48px); bottom: auto; left: 6px; max-width: calc(100vw - 12px); padding: 4px 10px; gap: 2px 14px; }
  body.wizard-modus .bew-regler { font-size: 13px; gap: 6px; }
  body.wizard-modus .bew-regler input[type=range] { width: 88px; height: 26px; }
  .wizard .gestalter-bild .gestalter-svg { height: clamp(140px, 22dvh, 200px); }
  .wizard-modal { width: min(460px, 94vw); padding: 16px; }
}

/* ---- Assistent 0.35: Smartphone-Nachbesserung. Maße bleiben als Eingabefelder im Schritt (kompakt, Schnellwahl waagerecht scrollbar); „Fronten durchsichtig“ nur
   noch als kleiner runder Knopf; Bewegungsregler als schmale Leiste ohne Beschriftung; Zeichnungen (Gestalter, Fächer-Skizze) größer. ---- */
@media (max-width: 640px) {
  .wizard-trans { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; gap: 0; border-radius: 50%; border-width: 1px; opacity: .92; }
  .wizard-trans-text, .wizard-trans-schalter { display: none; }
  .wizard-trans.an { background: var(--akzent); }
  .wizard-mass { gap: 6px; padding: 8px 10px; border: 1px solid var(--linie-2); border-radius: 6px; }
  .wizard-mass-kopf { font-size: 15px; }
  .wizard-eingabe .wizard-zahl { font-size: 20px; }
  .wizard-schnell { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .wizard-schnell .wizard-chip { flex: none; }
  body.wizard-modus.hat-bewegung > #bewegungsleiste { top: auto; bottom: auto; top: calc(var(--wiz-h) - 40px); left: auto; right: 6px; padding: 2px 8px; gap: 10px; border-radius: 999px; background: color-mix(in srgb, var(--flaeche) 80%, transparent); }
  body.wizard-modus .bew-text, body.wizard-modus .bew-wert { display: none; }
  body.wizard-modus .bew-regler { gap: 4px; }
  body.wizard-modus .bew-regler input[type=range] { width: 64px; height: 24px; }
  .wizard .gestalter-bild .gestalter-svg { height: clamp(220px, 36dvh, 340px); }
  body.wizard-modus .wizard-skizze-svg { max-height: 42dvh; width: 100%; }
}
@media (max-width: 640px) { .wizard-chip.hand { display: none; } }
@media (max-width: 640px) { .wizard .gestalter-hinweis { display: none; } .wizard-feldhinweis:empty { display: none; } .wizard .gestalter-bild .gestalter-svg { height: clamp(260px, 44dvh, 400px); } }

/* ---- Assistent 0.36: Smartphone – runde Knöpfe im 3D-Bild (Fronten durchsichtig, Türen öffnen) öffnen je ein kleines Blatt mit Erklärung; Hinweis „Mehr“ am unteren
   Rand scrollender Bereiche. `body.wizard-handy` setzt der Assistent (js/ui/wizard.js, HANDY_ABFRAGE). ---- */
.wizard-tueren { display: none; }
body.wizard-handy .wizard-tueren { display: inline-flex; top: 56px; }
body.wizard-handy .wizard-tueren[data-leer="1"] { display: none; }
body.wizard-handy .wizard-trans { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; gap: 0; border-radius: 50%; border-width: 1px; top: 8px; left: 8px; }
body.wizard-handy .wizard-tueren { top: 56px; left: 8px; }
body.wizard-handy .wizard-trans-text, body.wizard-handy .wizard-trans-schalter { display: none; }
body.wizard-handy .wizard-trans.an { background: var(--akzent); border-color: var(--akzent); }
body.wizard-handy .wizard-tueren, body.wizard-handy .wizard-trans:not(.an) { background: var(--flaeche); color: var(--text); }
body.wizard-modus.wizard-handy.hat-bewegung > #bewegungsleiste { display: none !important; }
.wizard-blatt-text { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.wizard-schalterzeile { justify-content: space-between; }
.wizard-schalterbild { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: var(--linie-2); transition: background-color .18s ease; }
.wizard-schalterbild::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .18s ease; }
.wizard-schalterzeile.an .wizard-schalterbild { background: var(--akzent); }
.wizard-schalterzeile.an .wizard-schalterbild::after { transform: translateX(22px); }
body.wizard-modus .wizard-bewegung .bew-regler { display: flex; align-items: center; gap: 10px; font-size: 16px; }
body.wizard-modus .wizard-bewegung .bew-regler[hidden] { display: none; }
body.wizard-modus .wizard-bewegung .bew-text { display: inline; flex: none; min-width: 7.5em; }
body.wizard-modus .wizard-bewegung .bew-wert { display: inline; min-width: 3.4ch; text-align: right; color: var(--text-2); }
body.wizard-modus .wizard-bewegung .bew-regler input[type=range] { flex: 1 1 auto; width: auto; height: 34px; }
/* „Mehr“-Hinweis: Höhe 0, klebt unten im scrollenden Bereich */
.wizard-mehr { position: sticky; bottom: 0; flex: none; height: 0; margin: -10px 0 0; padding: 0; overflow: visible; z-index: 3; pointer-events: none; animation: none !important; }
.wizard-blatt-inhalt > .wizard-mehr { margin-top: -12px; }
.wizard-mehr::before { content: ""; position: absolute; left: -16px; right: -16px; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--flaeche) 88%); opacity: 0; transition: opacity .2s ease; }
.wizard-mehr-knopf { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%) translateY(6px); display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 16px 4px 12px; border: 1px solid var(--akzent); border-radius: 999px;
  background: var(--flaeche); color: var(--akzent); font-size: 14px; font-weight: 650; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.wizard-mehr.sichtbar::before { opacity: 1; }
.wizard-mehr.sichtbar .wizard-mehr-knopf { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.wizard-mehr.sichtbar .wizard-mehr-knopf [sym], .wizard-mehr.sichtbar .wizard-mehr-knopf svg { animation: wiz-mehr 1.2s ease-in-out infinite; }
@keyframes wiz-mehr { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .wizard-mehr-knopf svg, .wizard-mehr-knopf [sym] { animation: none !important; } }
body.wizard-modus .wizard-bewegung .bew-regler { flex: none; min-height: 44px; }

/* Version 0.42: Start-Dialoge (Sprache, Willkommen) – Aussehen, Größen (auch Tablet) und Bewegung stehen in css/start-dialog.css */

/* Version 0.38: Hinweis „Schnellkonfiguration“ im Assistenten, große Symbole im Willkommen-Dialog */
.wizard-schnell-hinweis { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border-radius: 6px; background: var(--flaeche-2); border: 1px solid var(--linie-2); border-left: 4px solid var(--akzent, #e8832a); font-size: 13.5px; line-height: 1.35; color: var(--text); }
.wizard-schnell-hinweis [sym] { flex: none; }
/* Schritt 1: fester, auffälliger Hinweis über der Fußleiste (liegt außerhalb des scrollenden Körpers, bleibt also immer sichtbar) */
.wizard-fest-hinweis { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, var(--akzent, #e8832a) 14%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--akzent, #e8832a) 45%, transparent); border-left: 5px solid var(--akzent, #e8832a); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.wizard-fest-hinweis [sym] { flex: none; color: var(--akzent, #e8832a); }
body.wizard-modus .wizard-fest-hinweis { margin: 4px clamp(18px, 2.4vw, 32px) 8px; padding-inline: 14px; }
@media (pointer: coarse), (min-width: 768px) and (max-width: 1180px) { .wizard-fest-hinweis { font-size: 16px; } }
body.wizard-handy .wizard-fest-hinweis { font-size: 13px; padding: 6px 10px; margin-bottom: 4px; gap: 8px; }
@media (pointer: coarse), (min-width: 768px) and (max-width: 1180px) { .wizard-schnell-hinweis { font-size: 16px; padding: 10px 14px; } }
body.wizard-handy .wizard-schnell-hinweis { font-size: 11.5px; line-height: 1.25; padding: 3px 8px; margin: 0 0 3px; gap: 6px; }
body.wizard-handy .wizard-schnell-hinweis svg { width: 14px; height: 14px; }

/* Version 0.38: Frontansicht (Gestalter, Assistent) ab 1000 px Bildschirmbreite größer */
@media (min-width: 1001px) {
  .gestalter { width: min(660px, calc(100vw - 28px)); }
  .gestalter-svg { min-height: 380px; }
  .wizard .gestalter-bild .gestalter-svg { height: clamp(300px, 46vh, 560px); }
  .wizard-skizze-svg { max-height: 46dvh; }
}
@media (min-width: 1500px) {
  .gestalter { width: min(760px, calc(100vw - 28px)); }
  .wizard .gestalter-bild .gestalter-svg { height: clamp(340px, 52vh, 640px); }
}

/* Version 0.38: Bauteilkarte im Assistenten – Klick auf ein Teil im Bild zeigt die volle Karte links im Bild, nicht über dem Assistenten */
body.wizard-modus .bauteil-fenster {
  left: 12px !important; right: auto !important; top: 64px !important; bottom: auto !important;
  width: min(420px, calc(100vw - var(--wiz-b) - 28px)) !important; min-width: 300px;
  height: auto !important; max-height: calc(100dvh - 84px) !important; resize: none; z-index: 60;
}
body.wizard-modus .bauteil-fenster .kontext-kopf { cursor: default; }
body.wizard-modus .bauteil-fenster .kontext-kopf::before { content: none; }
@media (orientation: portrait) and (min-width: 600px), (max-width: 800px) {
  body.wizard-modus .bauteil-fenster { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; width: auto !important; max-width: none !important; max-height: 66dvh !important; min-width: 0; }
}
.wizard-schnell-hinweis .wizard-klick-tipp { display: block; margin-top: 2px; color: var(--text-2); }
body.wizard-handy .wizard-schnell-hinweis .wizard-klick-tipp { display: none; }

/* Version 0.38: Zähler (− Zahl +) als klassisches Bedienfeld: alle drei Teile leicht umrandet, mit Trennlinien */
.wizard .wizard-zaehl { gap: 0; border: 1.5px solid var(--linie-2, #c9c2b8); border-radius: 10px; overflow: hidden; background: var(--flaeche); }
.wizard .wizard-zaehl .symbol-knopf { border: 0; border-radius: 0; background: var(--flaeche-2); box-shadow: none; }
.wizard .wizard-zaehl .symbol-knopf:hover:not(:disabled) { background: var(--akzent-weich, var(--flaeche-3)); }
.wizard .wizard-zaehl .symbol-knopf:disabled { opacity: 0.4; }
.wizard .wizard-zaehl .wizard-zaehl-wert { display: grid; place-items: center; align-self: stretch; min-width: 52px; padding: 0 8px; border-left: 1.5px solid var(--linie-2, #c9c2b8); border-right: 1.5px solid var(--linie-2, #c9c2b8); background: var(--flaeche); }

/* Version 0.38: Rückwand-Schnittzeichnungen im Assistenten größer, Hochglanz-Hinweis */
.wizard-bild-gross { width: 100%; max-width: 360px; height: auto; aspect-ratio: 170 / 120; }
.wizard-kachel:has(.wizard-bild-gross) { flex-direction: column; align-items: stretch; gap: 8px; }
.wizard-kachel:has(.wizard-bild-gross) .wizard-kachel-text { flex: none; }
.wizard-bild-gross .w-flaeche { stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.wizard-bild-gross .w-flaeche.seite { fill: color-mix(in srgb, var(--text) 14%, var(--flaeche)); }
.wizard-bild-gross .w-flaeche.rueck { fill: var(--akzent); stroke: var(--akzent); opacity: .85; }
.wizard-bild-gross .w-schraube { fill: var(--text); }
.wizard-bild-gross .w-text { fill: var(--text); font-size: 9px; font-family: inherit; }
.wizard-bild-gross .w-text.duenn { fill: var(--text-2); font-size: 8px; }
.wizard-bild-gross .w-linie { stroke-width: 1.4; }
@media (pointer: coarse), (min-width: 768px) and (max-width: 1180px) { .wizard-bild-gross { width: 200px; max-width: 46%; } .wizard-bild-gross .w-text { font-size: 12px; } .wizard-bild-gross .w-text.duenn { font-size: 11px; } }

/* Version 0.38: Palette der Elemente im Assistenten – Symbole per Ziehen auf ein Feld im 3D-Bild ablegen */
.gestalter-palette { margin: 0 0 10px; padding: 10px 12px; border: 1px dashed var(--akzent); border-radius: 8px; background: var(--akzent-weich, var(--flaeche-2)); }
.gestalter-palette h4 { margin: 0 0 8px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.gestalter-palette h4 small { font-weight: 400; color: var(--text-2); font-size: 12.5px; }
.palette-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.palette-art { cursor: grab; user-select: none; -webkit-user-select: none; flex-direction: column; text-align: center; padding: 8px 6px; min-height: 84px; }
.palette-art svg { touch-action: none; }
.palette-art:active { cursor: grabbing; }
.gestalter-geist { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
  background: var(--flaeche); border: 2px solid var(--linie-2); box-shadow: var(--schatten-gross); color: var(--text); font-size: 14px; opacity: .92; }
.gestalter-geist.ueber { border-color: var(--akzent); background: var(--akzent-weich, var(--flaeche)); }
body.gestalter-zieht, body.gestalter-zieht * { cursor: grabbing !important; user-select: none !important; }
@media (pointer: coarse), (min-width: 768px) and (max-width: 1180px) { .palette-art { min-height: 96px; font-size: 15px; } .gestalter-palette h4 { font-size: 16px; } .gestalter-palette h4 small { font-size: 14px; } }

/* Version 0.38: Palette im Assistenten – Kacheln mit Symbol oben und Text darunter, nichts überlappt (feste Höhe der Standard-Schaltfläche aufgehoben) */
.gestalter-palette .palette-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.gestalter-palette .palette-art {
  height: auto !important; min-height: 108px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 12px 8px 10px; text-align: center; white-space: normal; overflow: visible; overflow-wrap: anywhere; hyphens: auto; line-height: 1.25; font-size: 14px;
}
.gestalter-palette .palette-art > span { display: block; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.gestalter-palette .palette-art svg { flex: none; width: 46px; height: 38px; }
@media (pointer: coarse), (min-width: 768px) and (max-width: 1180px) {
  .gestalter-palette .palette-arten { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .gestalter-palette .palette-art { min-height: 124px; font-size: 16px; padding: 14px 10px 12px; }
  .gestalter-palette .palette-art svg { width: 54px; height: 45px; }
}
@media (min-width: 1500px) { .gestalter-palette .palette-arten { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .gestalter-palette .palette-art { font-size: 15px; } }

/* Version 0.38: Meldungen (Toasts) größer und deutlich bemerkbar – große Schrift, farbiger Rand, Symbol, kleine Einblendung */
.toasts { z-index: 3000; gap: 10px; bottom: calc(var(--status) + 24px); max-width: min(760px, 94vw); width: max-content; }
.toast {
  display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-radius: 12px; font-size: 18px; line-height: 1.4; font-weight: 550; max-width: min(760px, 94vw);
  border: 1px solid var(--linie-2, var(--linie)); border-left-width: 8px; box-shadow: 0 10px 34px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .2);
  animation: toast-ein .28s ease-out;
}
.toast::before { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 20px; font-weight: 800; line-height: 1; background: var(--akzent); content: "!"; }
.toast.ok { border-left-color: var(--ok); } .toast.ok::before { background: var(--ok); content: "✓"; }
.toast.fehler { border-left-color: var(--fehler); } .toast.fehler::before { background: var(--fehler); content: "✕"; }
.toast.hinweis { border-left-color: var(--akzent); } .toast.hinweis::before { background: var(--akzent); content: "!"; }
@keyframes toast-ein { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@media (pointer: coarse), (min-width: 768px) and (max-width: 1180px) { .toast { font-size: 20px; padding: 18px 26px; } .toast::before { width: 38px; height: 38px; font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.gestalter-palette .palette-arten, .gestalter-palette .palette-arten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .gestalter-palette .palette-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Version 0.39: Zahlenfelder im Assistenten breit genug – der Dreh-/Löschknopf des Browsers (erscheint beim Darüberfahren) überdeckt die Zahl nicht mehr */
.wizard input[type="number"] { min-width: 7ch; padding-right: 26px; text-align: right; }
.wizard .gestalter-stepper input[type="number"] { width: 84px; text-align: center; padding-left: 8px; }
.wizard .wizard-zahl { width: 112px; }
.wizard .wizard-eingabe .wizard-zahl { width: 8.5ch; min-width: 8ch; padding: 6px 22px 6px 2px; }
.wizard .gestalter-eckzahl input[type="number"] { width: 100%; }

/* ---- Version 0.39: Bauteilkarte – dreistufige Kennzeichnung des Geltungsbereichs (nur dieses Bauteil / alle gleichartigen / ganzes Möbel) */
.kontext-abschnitt.bereich-moebel { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; padding: 6px 8px; border-radius: 4px 4px 0 0; border-top: 0;
  background: color-mix(in srgb, #3b82c4 14%, transparent); border-left: 5px solid #3b82c4; color: var(--text); font-weight: 700; }
.bereich-moebel .bereich-marke, .bereich-marke.bm-moebel { background: #3b82c4; color: #fff; }
.bereich-marke.bm-nur { background: var(--akzent); color: var(--akzent-text); }
.bereich-marke.bm-alle { background: var(--text-3); color: var(--flaeche, #fff); }
.kontext .in-moebel { border-left: 5px solid #3b82c4; padding-left: 8px; background: color-mix(in srgb, #3b82c4 8%, transparent); }
.kontext-geltung { display: grid; gap: 6px; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--linie-2, var(--linie)); border-radius: 8px; background: var(--flaeche-2); }
.kontext-geltung-titel { font-size: 13px; font-weight: 700; color: var(--text); }
.kontext-geltung-legende { display: flex; flex-wrap: wrap; gap: 6px; }
.kontext-geltung small { color: var(--text-2); font-size: 11.5px; line-height: 1.3; }

/* ---- Version 0.45: Zahlenfelder des Gestalters im Assistenten (z. B. „Anzahl der Schubkästen“) im Stil der Zähler des Assistenten:
   Karte mit Titel, je Zeile Bezeichnung links und ein zusammenhängendes Bedienfeld − Zahl + rechts */
.wizard .gestalter-schubanzahl { gap: 0; padding: 4px 14px 10px; border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); }
.wizard .gestalter-schubanzahl h4 { margin: 8px 0 2px; font-size: 14.5px; font-weight: 650; color: var(--text); }
.wizard .gestalter-schubanzahl .gestalter-zahl { padding: 9px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--linie); }
.wizard .gestalter-schubanzahl .gestalter-leise { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.wizard .gestalter-stepper { gap: 0; border: 1.5px solid var(--linie-2, #c9c2b8); border-radius: 10px; overflow: hidden; background: var(--flaeche); flex: none; }
.wizard .gestalter-stepper .symbol-knopf { width: 40px; height: 40px; border: 0; border-radius: 0; background: var(--flaeche-2); box-shadow: none; }
.wizard .gestalter-stepper .symbol-knopf:hover:not(:disabled) { background: var(--akzent-weich, var(--flaeche-3)); }
.wizard .gestalter-stepper .symbol-knopf:disabled { opacity: 0.4; }
.wizard .gestalter-stepper input[type="number"] { width: 52px; min-width: 0; height: 40px; padding: 0 4px; margin: 0; border: 0; border-left: 1.5px solid var(--linie-2, #c9c2b8); border-right: 1.5px solid var(--linie-2, #c9c2b8);
  border-radius: 0; background: var(--flaeche); box-shadow: none; text-align: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.wizard .gestalter-stepper input[type="number"]::-webkit-inner-spin-button, .wizard .gestalter-stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wizard .gestalter-stepper input[type="number"]:focus { outline: 2px solid var(--akzent); outline-offset: -2px; }
.wizard .gestalter-stepper input[type="number"]:disabled { opacity: 0.5; }
@media (pointer: coarse) { .wizard .gestalter-stepper .symbol-knopf { width: 46px; height: 46px; } .wizard .gestalter-stepper input[type="number"] { height: 46px; } }

/* ---- Version 0.45: Fortschrittsleiste des Assistenten – jeder Schritt zeigt immer seinen Namen.
   Schritte als Kapseln (Nummer bzw. Häkchen + Name): erledigt = hell mit Häkchen, aktuell = Akzentfarbe, folgende = gedämpft. Auf PC/Tablet umbrechen die Kapseln
   in mehrere Zeilen, damit alle Namen zugleich sichtbar sind; im Hochformat/auf dem Handy (wenig Höhe) läuft eine Zeile seitlich, der aktuelle Schritt wird
   zentriert (wizard-motion.js). Bewegung nur transform/opacity bzw. Farbwechsel über die Tokens aus wizard-motion.css. */
.wizard .wizard-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; padding: 0; overflow: visible; }
body.wizard-modus .wizard .wizard-leiste li, body.wizard-modus .wizard .wizard-leiste li.aktuell { flex: 0 1 auto; min-width: 0; }
.wizard .wizard-leiste li button {
  width: auto; max-width: 100%; min-height: 34px; padding: 3px 13px 3px 4px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px;
  border: 1px solid var(--linie-2); border-radius: 999px; background: var(--flaeche); color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1.15; white-space: nowrap;
  box-shadow: none; transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease-out), border-color var(--motion-fast, 120ms) var(--ease-out, ease-out), color var(--motion-fast, 120ms) var(--ease-out, ease-out);
}
.wizard .wizard-leiste li button::before { display: none; }
.wizard .wizard-leiste li .wizard-titel, body.wizard-modus .wizard-leiste li:not(.aktuell) .wizard-titel, body.wizard-modus .wizard-leiste li .wizard-titel { display: inline; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.wizard .wizard-leiste .wizard-nr, body.wizard-modus .wizard .wizard-leiste .wizard-nr { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 650;
  background: var(--flaeche-3); color: var(--text-2); }
/* erledigt */
.wizard .wizard-leiste li.fertig button { border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie-2)); background: var(--akzent-weich); color: var(--text); }
.wizard .wizard-leiste li.fertig .wizard-nr { background: var(--akzent); color: var(--akzent-text); }
/* aktuell */
.wizard .wizard-leiste li.aktuell button { border-color: var(--akzent); background: var(--akzent); color: var(--akzent-text); font-weight: 650; }
.wizard .wizard-leiste li.aktuell .wizard-nr { background: var(--akzent-text); color: var(--akzent); }
/* folgende (noch nicht erreicht) */
.wizard .wizard-leiste li button:disabled { opacity: 0.72; cursor: default; border-style: dashed; background: transparent; }
.wizard .wizard-leiste li button:not(:disabled):not([aria-current]):hover { border-color: var(--akzent); background: var(--akzent-weich); color: var(--text); }
.wizard .wizard-leiste li button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.wizard .wizard-leiste li.aktuell button:focus-visible { outline-color: var(--text); }
@media (pointer: coarse) { .wizard .wizard-leiste li button { min-height: 40px; font-size: 14px; } .wizard .wizard-leiste .wizard-nr { width: 28px; height: 28px; } }
/* Hochformat und schmale Fenster: wenig Höhe – eine Zeile, seitlich verschiebbar, Ränder blenden aus; alle Namen bleiben in der Zeile lesbar */
@media (orientation: portrait) and (min-width: 600px), (max-width: 800px) {
  .wizard .wizard-leiste { position: relative; flex-wrap: nowrap; gap: 5px; margin: 2px 0 4px; padding: 3px 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
  .wizard .wizard-leiste::-webkit-scrollbar { display: none; }
  body.wizard-modus .wizard .wizard-leiste li, body.wizard-modus .wizard .wizard-leiste li.aktuell { flex: none; }
  .wizard .wizard-leiste li button { min-height: 32px; padding-right: 11px; font-size: 12.5px; }
  .wizard .wizard-leiste .wizard-nr, body.wizard-modus .wizard .wizard-leiste .wizard-nr { width: 22px; height: 22px; font-size: 11.5px; }
}
@media (max-width: 640px) {
  /* ganz schmal: erledigte und folgende Schritte zeigen Nummer/Häkchen und Namen, aber ohne die Nummernkugel der folgenden – spart Breite */
  .wizard .wizard-leiste li:not(.fertig):not(.aktuell) button { padding-left: 11px; }
  .wizard .wizard-leiste li:not(.fertig):not(.aktuell) .wizard-nr, body.wizard-modus .wizard .wizard-leiste li:not(.fertig):not(.aktuell) .wizard-nr { display: none; }
}

/* ---- Version 0.45 (Nachtrag): Pfeil › zwischen den Schritten der Fortschrittsleiste – es geht Schritt für Schritt voran.
   Der Pfeil gehört zum Schritt davor: nach erledigten Schritten in Akzentfarbe, danach gedämpft; er bricht mit der Kapsel um. */
.wizard .wizard-leiste { column-gap: 2px; row-gap: 6px; }
.wizard .wizard-leiste li { display: flex; align-items: center; }
.wizard .wizard-leiste li:not(:last-child)::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 7px 0 8px; border-top: 2px solid var(--text-3); border-right: 2px solid var(--text-3);
  border-radius: 1px; transform: rotate(45deg); opacity: 0.7; pointer-events: none;
}
.wizard .wizard-leiste li.fertig:not(:last-child)::after { border-color: var(--akzent); opacity: 1; }
.wizard .wizard-leiste li.aktuell:not(:last-child)::after { border-color: var(--akzent); opacity: 0.85; }
@media (orientation: portrait) and (min-width: 600px), (max-width: 800px) {
  .wizard .wizard-leiste { column-gap: 0; }
  .wizard .wizard-leiste li:not(:last-child)::after { margin: 0 6px 0 7px; }
}

/* ---- Version 0.45 (Nachtrag): Kopf des Assistenten größer und prominenter – großer Titel, Schrittzähler als Akzent-Kapsel, deutlicher Schließen-Knopf */
body.wizard-modus .wizard .wizard-kopf, .wizard .wizard-kopf { align-items: center; gap: 14px; padding-top: 18px; padding-bottom: 10px; }
.wizard .wizard-kopf-titel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
body.wizard-modus .wizard .wizard-kopf-titel h2 { flex: none; margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 750; letter-spacing: -.015em; line-height: 1.15; color: var(--text); }
body.wizard-modus .wizard .wizard-zaehler { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--linie-2)); border-radius: 999px;
  background: var(--akzent-weich); color: var(--text); font-size: 14.5px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wizard .wizard-kopf .symbol-knopf { width: 48px; height: 48px; min-width: 48px; border: 1.5px solid var(--linie-2); background: var(--flaeche-2); }
.wizard .wizard-kopf .symbol-knopf:hover { border-color: var(--akzent); background: var(--akzent-weich); }
.wizard .wizard-kopf .symbol-knopf .sym { width: 20px; height: 20px; }
@media (orientation: portrait) and (min-width: 600px), (max-width: 800px) {
  body.wizard-modus .wizard .wizard-kopf { padding-top: 10px; padding-bottom: 6px; gap: 10px; }
  body.wizard-modus .wizard .wizard-kopf-titel h2 { font-size: 20px; }
  body.wizard-modus .wizard .wizard-zaehler { padding: 3px 10px; font-size: 13px; }
  .wizard .wizard-kopf .symbol-knopf { width: 42px; height: 42px; min-width: 42px; }
}
@media (max-width: 640px) {
  body.wizard-modus .wizard .wizard-kopf-titel h2 { font-size: 18px; }
  body.wizard-modus .wizard .wizard-kopf { padding-top: 6px; padding-bottom: 2px; }
}

/* ---- Version 0.45: Schritt „Dachschräge“ – Schnittbild mit Maßen */
.wizard-dach-block { display: flex; justify-content: center; padding: 8px; border: 1px solid var(--linie-2); border-radius: 10px; background: var(--flaeche); }
.wizard-dach-skizze { width: 100%; max-width: 420px; height: auto; user-select: none; }
.wizard-dach-skizze .w-dach-korpus { fill: var(--akzent-weich); stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; }
.wizard-dach-skizze .w-dach-sockel { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 3; }
.wizard-dach-skizze .w-dach-boden { stroke: var(--text-2); stroke-width: 2; }
.wizard-dach-skizze .w-dach-text { fill: var(--text); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--flaeche); stroke-width: 3px; }
.wizard-dach-block:empty { display: none; }

/* ---- Version 0.45: Schritt „Maße“ des Dachschrägenschranks – vier Maße kompakt im 2 × 2-Raster, alle Regler sichtbar */
.wizard-masse-dach { display: flex; flex-direction: column; gap: 8px; }
.wizard-masse-dach > .wizard-leise { font-size: 13px; }
.wizard-masse-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 12px; }
.wizard .wizard-masse-gitter .wizard-mass { gap: 5px; padding: 8px 10px; border: 1px solid var(--linie-2); border-radius: 8px; background: var(--flaeche); min-width: 0; }
.wizard .wizard-masse-gitter .wizard-mass-kopf { flex-wrap: wrap; gap: 2px 8px; font-size: 14px; line-height: 1.2; }
.wizard .wizard-masse-gitter .wizard-eingabe .wizard-zahl { width: 6.2ch; min-width: 6ch; padding: 2px 20px 2px 2px; font-size: 19px; }
.wizard .wizard-masse-gitter .regler { height: 20px; }
.wizard .wizard-masse-gitter .wizard-schnell { gap: 4px; }
.wizard .wizard-masse-gitter .wizard-schnell .wizard-chip { min-height: 28px; padding: 2px 9px; font-size: 12.5px; }
.wizard .wizard-masse-gitter .wizard-schnell .hand { display: none; }
.wizard .wizard-masse-gitter .wizard-feldhinweis { min-height: 0; font-size: 12.5px; }
.wizard .wizard-masse-gitter .wizard-feldhinweis:empty { display: none; }
@media (pointer: coarse) { .wizard .wizard-masse-gitter .wizard-schnell .wizard-chip { min-height: 34px; } .wizard .wizard-masse-gitter .regler { height: 26px; } }
.wizard-masse-gitter .wizard-mass:last-child:nth-child(odd) { grid-column: 1 / -1; }     /* (fünftes Maß, die Breite des waagerechten Deckels, über die ganze Breite) */

/* ---- Version 0.45: Schnittbild im Schritt „Maße“ (klein, damit die fünf Regler sichtbar bleiben), Wandvorschlag */
.wizard-masse-dach .wizard-dach-block { padding: 4px 8px; }
.wizard-masse-dach .wizard-dach-skizze { max-height: 150px; }
.wizard-dach-skizze .w-dach-mass { stroke: var(--text-2); stroke-width: 1; fill: none; }
.wizard-wand-vorschlag { font-size: 13px; }
.wizard-wand { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--linie-2); border-left: 4px solid var(--akzent); border-radius: 0 8px 8px 0; background: var(--flaeche-2); }
.wizard-wand[hidden] { display: none; }
.wizard-wand .wizard-weiterfrage { margin: 0; }
.wizard-wand button { align-self: flex-start; }