:root {
  --bg: #eef0f3;
  --panel: #ffffff;
  --line: #dde1e6;
  --text: #1f2328;
  --muted: #5f6975;          /* ≥ 4,5:1 auch auf --accent-soft (WCAG AA) */
  --accent: #2563eb;
  --accent-soft: #edf2ff;    /* Akzent darauf 4,57:1 */
  --danger: #A84A00;
  /* Statusfarben für Rot-Grün-Schwäche (Okabe-Ito, gleiche Werte in js/palette.js): nie nur Farbe – immer mit ✓ ✕ ⚠ ⓘ */
  --ok: #0072B2; --ok-text: #005F94; --ok-bg: #E6F1F8;
  --err: #D55E00; --err-text: #A84A00; --err-bg: #FCEBDF;
  --warn: #E69F00; --warn-line: #B87F00; --warn-text: #6E4A00; --warn-bg: #FFF3D6; --on-warn: #1f2328;
  --info: #5B7A99; --info-text: #3B5875; --info-bg: #EEF3F8;
  --canvas: #fafbfc;
  /* Kopfzeile: Höhe plus Statusleiste (iPhone als Vollbild-App), unten die Reiterleiste des Smartphones */
  --top-h: 52px;
  --top: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  --nav-h: 0px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: var(--text);
}
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#canvas:focus { outline: none; } #canvas:focus-visible { outline: 2px solid rgba(37, 99, 235, .35); outline-offset: -2px; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer;
  white-space: nowrap; transition: background .12s, border-color .12s;
}
button:hover { background: #f4f6f8; border-color: #c8ced6; }
button:active { background: #eceff3; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { background: #1d4fd8; }
button.danger { color: var(--danger); }
button.small { padding: 3px 8px; font-size: 12px; }
button.wide { width: 100%; }
button.active, .tools button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
input[type=text], input[type=number], input:not([type]), input[type=search], input[type=email], input[type=password], input[type=date], input[type=url], input[type=tel], select, textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; background: #fff; min-width: 0;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
/* Überschrift eines geöffneten Blatts bekommt den Fokus (Vorlesen), aber keinen Rahmen */
h2[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }

/* ---------- Kopfzeile: Menü, Projektname, Speichern, Rückgängig/Wiederholen, 2D | 3D ---------- */
.topbar {
  height: var(--top); display: flex; align-items: center; gap: 10px; padding: env(safe-area-inset-top, 0px) 12px 0; padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right)); background: var(--panel); border-bottom: 1px solid var(--line);
}
.menu-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.menu-btn span[aria-hidden] { font-size: 16px; line-height: 1; }
.brand { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.logo { width: 22px; height: 22px; color: var(--accent); flex: none; }
.proj-name { border: 1px solid transparent !important; font-weight: 600; font-size: 15px; flex: 1 1 auto; width: auto; max-width: 640px; min-width: 120px; }
.proj-name:hover { border-color: var(--line) !important; }
.file-name { color: var(--muted); font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-actions [data-act=save] { position: relative; }
.tb-actions [data-act=save]:not(.dirty) { color: var(--muted); }
.tb-actions [data-act=save].dirty::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel, #fff); border: 3px solid var(--warn); box-sizing: border-box; }   /* ungespeichert: Ring */
.tb-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.tb-actions .ico { display: none; }
.view-seg button { padding: 5px 14px; font-weight: 600; }
.view-seg button.active { background: var(--accent); color: #fff; }
/* Menü als Feld unter der Kopfzeile */
.menu-panel {
  position: fixed; top: calc(var(--top) + 4px); left: max(8px, env(safe-area-inset-left)); z-index: 60; width: min(360px, calc(100% - 16px)); max-height: calc(100% - var(--top) - 16px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px 0;
}
.menu-panel[hidden] { display: none; }
.menu-panel section { padding: 8px 14px; }
.menu-panel section + section { border-top: 1px solid var(--line); }
.menu-panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 2px 0 6px; font-weight: 600; }
.menu-list { display: flex; flex-direction: column; }
.menu-list button { text-align: left; border: none; border-radius: 8px; padding: 9px 10px; background: none; }
.menu-list button:hover:not(:disabled) { background: #f1f4f8; }
.menu-field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.menu-field select { width: 100%; color: var(--text); }
.menu-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.menu-checks label { display: flex; gap: 6px; align-items: center; color: var(--text); cursor: pointer; min-height: 28px; }
.sheet-close, .mobile-nav { display: none; }

/* ---------- Layout ---------- */
.main { --lcol: 250px; --rcol: 290px; display: grid; grid-template-columns: var(--lcol) 1fr var(--rcol); height: calc(100% - var(--top)); }
aside { background: var(--panel); overflow-y: auto; }
aside.left { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
aside.right { border-left: 1px solid var(--line); }
.panel { padding: 12px; border-bottom: 1px solid var(--line); }
.panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.panel h3 { font-size: 14px; margin: 0 0 10px; }
.lib { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.lib input[type=search] { width: 100%; margin-bottom: 8px; }
#library { overflow-y: auto; flex: 1 1 auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }

/* Geschosse */
.floor-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.floor-list li {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.floor-list li:hover { background: #f6f8fa; }
.floor-list li.active { border-color: var(--accent); background: var(--accent-soft); }
.floor-list .short { font-weight: 700; min-width: 26px; color: var(--accent); }
.floor-list .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floor-list .farea { color: var(--muted); font-size: 11px; }
.floor-list .fbtn { border: none; background: none; padding: 0 3px; color: var(--muted); visibility: hidden; }
.floor-list li:not(.active) .fbtn { display: none; }
.floor-list li.active .fbtn { visibility: visible; }
/* gewähltes Geschoss: Name und Fläche in der ersten Zeile, Schaltflächen darunter rechts – der Name bleibt lesbar */
.floor-list li.active { flex-wrap: wrap; row-gap: 2px; }
.floor-list li.active .fname { flex: 1 1 calc(100% - 110px); }
.floor-list li.active .fbtn:first-of-type { margin-left: auto; }
.floor-list .fbtn:hover { color: var(--text); }

.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tools button { text-align: left; }

/* Bibliothek */
.lib-cat { margin-bottom: 6px; }
.lib-cat > summary { cursor: pointer; font-weight: 600; padding: 4px 2px; list-style: none; display: flex; align-items: center; gap: 4px; }
.lib-cat > summary::before { content: "▸"; color: var(--muted); font-size: 10px; width: 10px; transition: transform .12s; }
.lib-cat[open] > summary::before { transform: rotate(90deg); }
.lib-cat > summary::-webkit-details-marker { display: none; }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px 0 6px; }
.tile { min-width: 0; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border: 1px solid var(--line);
  border-radius: 6px; cursor: grab; background: #fff; font-size: 10.5px; text-align: center; line-height: 1.15; -webkit-user-select: none; user-select: none;
}
.tile:hover { border-color: var(--accent); background: #f8faff; }
.tile svg { width: 52px; height: 40px; }
.tile .lib-thumb { width: 52px; height: 40px; object-fit: contain; display: block; margin: 0 auto; }
.tile .room-thumb { width: 52px; height: 40px; display: grid; place-items: center; }
.tile .room-thumb span { display: block; border: 2px solid #444; background: #fff; }
.tile .room-thumb span.outdoor { border-style: dashed; border-width: 1.5px; background: #f1f1ee; }
.tile .room-thumb span.void { background: linear-gradient(to top right, transparent 48%, #999 49%, #999 51%, transparent 52%), linear-gradient(to bottom right, transparent 48%, #999 49%, #999 51%, transparent 52%), #fff; }

/* ---------- Zeichenfläche ---------- */
.canvas-wrap { position: relative; overflow: hidden; background: var(--canvas); }
#canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: default; -webkit-user-select: none; user-select: none; -webkit--webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#canvas.panning, #canvas.panning * { cursor: grabbing !important; }
#canvas[data-tool=room], #canvas[data-tool=wall], #canvas[data-tool=dimension], #canvas[data-tool=line] { cursor: crosshair; }
#canvas[data-tool=text] { cursor: text; }
.grid-major { stroke: #e2e5ea; stroke-width: 1; fill: none; }
.grid-minor { stroke: #f0f2f4; stroke-width: 1; fill: none; }
#world .room, #world .room-outdoor, #world .item, #world .room-label { cursor: move; }
#world .item.selected .sym-line, #world .item.selected .sym-fill { stroke: var(--accent); }
.sel-outline { fill: rgba(37, 99, 235, .06); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.edge-handle { stroke: transparent; cursor: ew-resize; }
.edge-handle.ns { cursor: ns-resize; }
.edge-handle:hover { stroke: rgba(37, 99, 235, .35); }
.vertex-hit { fill: transparent; cursor: pointer; }
.vertex-hit:hover + .vertex { fill: var(--accent); }
.vertex { fill: #fff; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.edge-len { font-size: 12px; fill: var(--accent); text-anchor: middle; dominant-baseline: central; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.sel-box { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.handle { fill: #fff; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.handle.rot { cursor: grab; fill: var(--accent); }
.rot-line { stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.dist-line { stroke: #0f766e; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.dist-label { cursor: pointer; }
.dist-label rect { fill: #fff; stroke: #0f766e; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dist-label text { font-size: 12px; font-weight: 700; fill: #0f766e; text-anchor: middle; dominant-baseline: central; }
.dist-label:hover rect { fill: #e6f4f1; }
.dist-input { position: absolute; width: 72px; height: 28px; font: 600 13px system-ui, sans-serif; text-align: center; border: 2px solid #0f766e; border-radius: 6px; z-index: 6; }
.sel-group { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.band-rect { fill: rgba(37, 99, 235, .08); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.guide { stroke: #e0368a; stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.draw-rect { fill: rgba(37, 99, 235, .08); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.draw-line { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.check-mark { fill: none; stroke: var(--err); stroke-width: 2.5; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.check-area { fill: rgba(213, 94, 0, .14); stroke: var(--err); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.check-at { fill: rgba(213, 94, 0, .85); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.live-info { font-size: 13px; font-weight: 700; fill: #111; text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }

.zoom-ctrl { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: 36px; display: flex; flex-direction: column; gap: 4px; }
.zoom-ctrl button { width: 32px; height: 32px; padding: 0; font-size: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.status {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px; padding: 0 12px; display: flex; gap: 18px; align-items: center;
  background: rgba(255,255,255,.92); border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden;
}
.status b { color: var(--text); font-weight: 600; }
.floor-badge {
  position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.06); pointer-events: none;
}
.floor-badge .fb-proj { display: none; font-weight: 500; }
@media (max-width: 600px) {
  .floor-badge { max-width: calc(100% - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .floor-badge .fb-proj { display: inline; }
  .floor-badge .fb-name { display: none; }
}

/* ---------- Eigenschaften ---------- */
.props .row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 6px; margin-bottom: 6px; }
.props .row > span { color: var(--muted); hyphens: auto; overflow-wrap: break-word; min-width: 0; }   /* lange Wörter („Fußbodenheizung“) trennen statt über das Feld laufen */
.props .row input, .props .row select, .props .row textarea { width: 100%; }
.props .row label { display: flex; align-items: center; gap: 6px; }
.site-field { display: flex; gap: 4px; min-width: 0; }
.site-field input { flex: 1; min-width: 0; }
.props .row input[type=checkbox] { width: auto; margin: 0; }
.props .dims3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.props .dims3 label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 11px; }
.props .dims3 input { width: 100%; font-weight: 600; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.props .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.props input[inputmode=decimal] { font-variant-numeric: tabular-nums; }
.props .btns { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.props .hint { color: var(--muted); font-size: 11.5px; line-height: 1.45; margin: 6px 0; }
.hint-top { margin-top: 6px; }
.prewrap { white-space: pre-wrap; }
.year-input { width: 6em; }
.cut-input { width: 5em; }
.props .sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; }
.props .big-area { font-size: 22px; font-weight: 700; margin: 2px 0 10px; }
.props .big-area small { font-size: 12px; color: var(--muted); font-weight: 400; }
.anchor { display: grid; grid-template-columns: repeat(3, 24px); gap: 2px; flex: none; }   /* Zielgröße ≥ 24 px (WCAG 2.5.8) */
.anchor button { width: 24px; height: 24px; padding: 0; border-radius: 4px; }
.anchor button.on { background: var(--accent); border-color: var(--accent); }
.anchor-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.anchor-row .hint { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: none; border-radius: 0; padding: 3px 8px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.warn { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn-text); padding: 6px 8px; border-radius: 6px; font-size: 12px; margin-bottom: 8px; }
kbd { background: #f1f3f5; border: 1px solid #d0d7de; border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; font-size: 11px; font-family: inherit; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 11.5px; color: var(--muted); align-items: center; }

/* Flächentabelle */
.area-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.area-table td { padding: 3px 2px; border-bottom: 1px solid #f0f2f4; }
.area-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.area-table tr.room-row { cursor: pointer; }
.area-table tr.room-row:hover td { background: #f6f8fa; }
.area-table tr.room-row.sel td { background: var(--accent-soft); }
.area-table tr.fl td { font-weight: 700; padding-top: 10px; border-bottom: 1px solid var(--line); }
.area-table tr.sum td { font-weight: 600; border-bottom: none; }
.area-table tr.total td { font-weight: 700; border-top: 2px solid var(--text); border-bottom: none; padding-top: 6px; }
.area-table .fac { color: var(--muted); }

/* ---------- Dialoge ---------- */
.plans-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.plan-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.plan-row:hover { border-color: var(--accent); background: #f8faff; }
.plan-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-online { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.save-online input { flex: 1; }
.plans-list .sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 2px; }
.dlg label.inline { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }
.warn-text { color: var(--danger); margin: 0; min-height: 1.2em; font-size: 12px; } .warn-text:not(:empty)::before { content: "⚠ "; }
code { background: #f1f3f5; border-radius: 4px; padding: 0 4px; font-size: 12px; }
dialog { border: none; border-radius: 12px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-width: 560px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(20, 24, 30, .35); }
.dlg { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dlg h2 { margin: 0; font-size: 18px; }
.dlg label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.dlg label[hidden], .dlg button[hidden], .dlg p[hidden] { display: none; }   /* Felder je Format ausblenden (Export-Dialog) */
.dlg label select, .dlg label input { color: var(--text); }
.dlg label textarea { color: var(--text); font: inherit; resize: vertical; min-height: 64px; }
/* Bibliothek: „Fehlt etwas?“ am Ende der Liste */
.lib-missing { margin: 12px 4px 16px; text-align: center; }
.linklike { background: none; border: none; box-shadow: none; padding: 4px 6px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }
.linklike.small { font-size: 12.5px; }
.linklike:hover { text-decoration-thickness: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.checks label { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#btnOpenLocal { margin-right: auto; }
.muted { color: var(--muted); margin: 0; line-height: 1.45; }
.small { font-size: 12px; }

#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px); background: #1f2328; color: #fff; padding: 9px 16px;
  border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 80vw; z-index: 50;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Toast als Popover in der obersten Ebene: bleibt auch über offenen Dialogen sichtbar */
#toast[popover] { inset: auto auto 40px 50%; margin: 0; border: 0; overflow: visible; }
/* über der unteren Leiste (Smartphone), Knopf in der Meldung (z. B. „Rückgängig“) */
#toast, #toast[popover] { bottom: calc(40px + var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
#toast.has-act { display: flex; align-items: center; gap: 12px; padding-right: 8px; }
#toast.show.has-act { pointer-events: auto; }
#toast .toast-act { flex: none; background: none; border: 0; color: #8cc4ff; font-weight: 600; padding: 6px 8px; min-height: 32px; border-radius: 6px; cursor: pointer; }
#toast .toast-act:hover, #toast .toast-act:focus-visible { background: rgba(255,255,255,.12); }
@media (pointer: coarse) { #toast .toast-act { min-height: 44px; } }
#toast { max-width: min(560px, calc(100vw - 32px)); width: max-content; }
/* schmal: über den Leisten am unteren Rand der Zeichenfläche (Planart, Zoom) */
@media (max-width: 900px), (max-height: 500px) { #toast, #toast[popover] { bottom: calc(var(--nav-h) + 92px + env(safe-area-inset-bottom, 0px)); } }

/* Rückfragen (js/dialog.js): schmaler als Formulardialoge, Text gut lesbar, roter Knopf für Endgültiges */
dialog.fp-dlg { max-width: 440px; }
.fp-dlg-text p { margin: 0 0 8px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.fp-dlg-text p:last-child { margin-bottom: 0; }
.fp-dlg .warn-text:empty { min-height: 0; }
.fp-dlg input[readonly] { background: #f6f7f9; }
.fp-dlg input[aria-invalid=true] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
button.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
button.danger-solid:hover { background: #8A3D00; }

/* ---------- Touch & Stift (iPad, Smartphone): Bedienflächen mindestens 44 px ---------- */
.touch-only { display: none !important; }
@media (any-pointer: coarse) {
  .touch-only { display: flex !important; }
  /* Safari zoomt beim Tippen in Felder unter 16 px hinein */
  input, select, textarea { font-size: 16px; }
  button { min-height: 44px; padding: 6px 12px; }
  .tools button { min-height: 44px; }
  /* Felder: hoch genug für den Finger, Ankerpunkte und Segmentschalter bleiben kompakt */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, .proj-name { min-height: 44px; }
  .anchor { grid-template-columns: repeat(3, 24px); gap: 3px; }
  .anchor button { width: 24px; height: 24px; min-height: 0; padding: 0; }
  .seg button { min-height: 44px; }
  .sun-presets button, .sun-shade button { min-height: 36px; }
  .tb-actions button { min-width: 44px; }
  .side-toggle { width: 28px; min-height: 72px; }
  .dlg .dlg-x, .dlg-head .dlg-x { min-width: 44px; min-height: 44px; }
  .chk { min-height: 44px; align-items: center; padding: 6px 8px; }
  .chk .dot { margin-top: 0; }
  .check-panel details > summary, .lib-cat > summary { min-height: 36px; display: flex; align-items: center; }
  .dist-input { height: 40px; width: 96px; font-size: 16px; }
  .menu-checks input[type=checkbox], .props input[type=checkbox] { width: 22px; height: 22px; }
  .menu-checks label { min-height: 44px; }
  .zoom-ctrl button { min-width: 44px; min-height: 44px; }
  .floor-list li { min-height: 48px; }
  .floor-list .fbtn { visibility: visible; min-width: 40px; min-height: 44px; padding: 0; }
  /* iPad: Name und Fläche in der ersten Zeile, Schaltflächen des gewählten Geschosses darunter rechts */
  .floor-list li { flex-wrap: wrap; row-gap: 0; }
  .floor-list .fname { flex: 1 1 calc(100% - 110px); }
  .floor-list .farea { white-space: nowrap; }
  .floor-list li:not(.active) .fbtn { display: none; }
  .floor-list li.active .fbtn:first-of-type { margin-left: auto; }
  .tile { min-height: 72px; }
}

/* ---------- Mittlere Breiten ---------- */
@media (max-width: 1200px) {
  .main { --lcol: 220px; --rcol: 260px; }
  .proj-name { max-width: 420px; }
  .file-name { max-width: 120px; }
}

/* ---------- Smartphone (auch quer, z. B. 915×412) und schmales Tablet: Zeichenfläche ganzflächig, Bereiche als Blätter von unten ---------- */
@media (max-width: 900px), (max-height: 500px) {
  :root { --nav-h: 60px; }
  .topbar { gap: 6px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .topbar .lbl, .file-name, .logo { display: none; }
  .tb-actions { gap: 4px; }
  .tb-actions .ico { display: inline; font-size: 17px; }
  .tb-actions button, .menu-btn { min-width: 44px; justify-content: center; padding: 6px 10px; }
  .view-seg button { padding: 6px 12px; }
  .proj-name { width: 100%; font-size: 15px; }
  .main { grid-template-columns: 1fr; height: calc(100% - var(--top) - var(--nav-h) - env(safe-area-inset-bottom, 0px)); }
  aside.left, aside.right {
    position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); z-index: 40; display: none;
    max-height: min(64vh, 560px); border: 1px solid var(--line); border-bottom: none; border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.18); padding-top: 10px; overflow-y: auto; overscroll-behavior: contain;
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  /* Bildschirmtastatur eingeblendet (js/layout.js setzt --kb): Blatt sitzt über der Tastatur, Reiterleiste weicht */
  body.kb aside.left, body.kb aside.right { bottom: var(--kb, 0px); max-height: calc(100vh - var(--kb, 0px) - var(--top) - 8px); max-height: calc(100dvh - var(--kb, 0px) - var(--top) - 8px); }
  body.kb .mobile-nav { display: none; }
  aside.left::before, aside.right::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: #c9ced6; margin: 0 auto 4px; }
  body[data-sheet=floors] aside.left, body[data-sheet=tools] aside.left, body[data-sheet=library] aside.left { display: flex; }
  body[data-sheet=props] aside.right { display: block; }
  aside.left > .panel { display: none; border-bottom: none; }
  body[data-sheet=floors] .panel-floors, body[data-sheet=tools] .panel-tools { display: block; }
  body[data-sheet=library] .panel-lib { display: flex; min-height: 50vh; }
  .sheet-close { display: block; position: absolute; top: 8px; right: 10px; z-index: 3; min-width: 44px; min-height: 44px; border: none; background: transparent; font-size: 18px; }
  aside.right .rtabs, aside.right .rtabs-row { padding-right: 52px; }   /* Reiter nicht unter dem Schließen-Knopf */
  aside.right .rtabs-row .rtabs { padding-right: 0; }
  aside.left .panel h2.has-help { padding-right: 52px; }   /* „?“ nicht unter dem Schließen-Knopf des Blatts */
  aside { position: relative; }
  .tools { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .mobile-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding: 6px env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--panel); border-top: 1px solid var(--line);
  }
  /* 6 px Pufferstreifen oben: Chrome lenkt ein Tippen knapp über der Leiste sonst auf den nächsten Knopf um („touch adjustment“) */
  /* in der 3D-Ansicht sind Werkzeuge und Bibliothek ohne Belang */
  body:has(#view3d:not([hidden])) .mobile-nav :is([data-sheet=tools], [data-sheet=library]) { display: none; }
  /* Zahl der Fehler/Warnungen der Entwurfsprüfung am Reiter „Eigenschaften“ (js/layout.js) */
  .mobile-nav button[data-badge]::before { content: "✕ " attr(data-badge); position: absolute; top: 6px; right: calc(50% - 30px); min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--err-text); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
  .mobile-nav button[data-badge].dot::after { display: none; }
  .mobile-nav button[data-badge].badge-warn::before { content: "⚠ " attr(data-badge); background: var(--warn); color: var(--on-warn); }
  .mobile-nav button { border: none; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 11.5px; color: #3a4148; min-height: calc(var(--nav-h) - 6px); position: relative; }
  .mobile-nav .ico { font-size: 19px; line-height: 1; }
  .mobile-nav button.active { color: var(--accent); background: var(--accent-soft); }
  .mobile-nav button.dot::after { content: ""; position: absolute; top: 9px; right: calc(50% - 20px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .status { display: none; }
  .zoom-ctrl { bottom: 12px; right: max(10px, env(safe-area-inset-right, 0px)); }
  .floor-badge { top: 8px; left: max(8px, env(safe-area-inset-left, 0px)); }
  .menu-panel { top: var(--top); left: 0; width: 100%; max-height: calc(100% - var(--top) - var(--nav-h)); border-radius: 0 0 14px 14px; border-top: none; }
  .menu-list button { min-height: 46px; }
  /* 3D-Leiste: was nicht passt, steht im Menü „⋯ Mehr“ (js/overflow.js) */
  .view3d .v3d-bar { right: 8px; left: 8px; top: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .view3d .v3d-bar::-webkit-scrollbar { display: none; }
  .view3d .walk-tools { top: 62px; right: 8px; }
  .view3d .v3d-sun { top: 62px; left: 8px; width: calc(100% - 16px); max-height: calc(100% - 140px); overflow-y: auto; }
  .view3d .v3d-label { bottom: 8px; left: 10px; font-size: 13px; }
  .view3d .walk-joy { right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; }
  .view3d .walk-map { left: max(8px, env(safe-area-inset-left, 0px)); bottom: 36px; }
  .view3d .cam-tools { top: 62px; max-width: calc(100% - 16px); }
}
@media (max-width: 420px) {
  .view-seg button { padding: 6px 9px; }
  .menu-checks { grid-template-columns: 1fr; }
}
/* ---------- Wenig Höhe (Smartphone quer): flachere Leisten, 3D-Bedienelemente nebeneinander statt übereinander ---------- */
@media (max-height: 520px) {
  :root { --nav-h: 48px; --top-h: 44px; }
  .mobile-nav { padding-top: 4px; }
  .mobile-nav button { min-height: calc(var(--nav-h) - 4px); }
  .mobile-nav button { flex-direction: row; gap: 6px; font-size: 12px; }
  .mobile-nav .ico { font-size: 17px; }
  .mobile-nav button.dot::after { top: 6px; right: auto; left: calc(50% + 34px); }
  .mobile-nav button[data-badge]::before { top: 4px; right: auto; left: calc(50% + 30px); }
  aside.left, aside.right { max-height: calc(100vh - var(--top) - var(--nav-h) - env(safe-area-inset-bottom, 0px) - 6px); max-height: calc(100dvh - var(--top) - var(--nav-h) - env(safe-area-inset-bottom, 0px) - 6px); border-radius: 12px 12px 0 0; padding-top: 6px; }
  aside.left::before, aside.right::before { display: none; }
  body[data-sheet=library] .panel-lib { min-height: 0; }
  .floor-badge { top: 6px; padding: 3px 8px; font-size: 12px; }
  .view3d .v3d-bar { top: 6px; }
  .view3d .walk-tools { top: 56px; }
  .view3d .walk-map { width: 112px; height: 112px; bottom: 30px; }
  .view3d .walk-joy { width: 104px; height: 104px; right: max(12px, env(safe-area-inset-right, 0px)); bottom: 12px; }
  .view3d .walk-knob { left: 29px; top: 29px; width: 42px; height: 42px; }
  .view3d .v3d-label { bottom: 6px; font-size: 12px; }
  .view3d .v3d-sun { top: 56px; max-height: calc(100% - 64px); }
  .compass2d { top: 50px; width: 44px; height: 44px; }
  .compass3d { bottom: 36px; right: 130px; width: 44px; height: 44px; }
  .zoom-ctrl { flex-direction: row; bottom: 8px; }
  .tool-hint { max-width: calc(100% - 210px); }
  .tool-hint { bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Tragwerk-Prüfung */
.struct-list { list-style: none; margin: 0 0 6px; padding: 0; font-size: 12px; }
.struct-list li { padding: 3px 0 3px 16px; position: relative; }
.struct-list li::before { position: absolute; left: 0; top: 2px; width: 13px; font-weight: 700; text-align: center; }
.struct-list li.none::before { content: "✕"; color: var(--err-text); }
.struct-list li.warn::before { content: "⚠"; color: var(--warn-line); }
.struct-list li.lintel { color: var(--muted); }
.struct-list li.lintel::before { content: "–"; color: #8a8f98; }
.struct-list li.ok { color: var(--muted); }
.struct-list li.ok::before { content: "✓"; color: var(--ok-text); }
.rules-sum { margin: 4px 0 6px; font-weight: 600; font-size: 13px; }
.rules-sum.ok { color: var(--ok-text); } .rules-sum.bad { color: var(--err-text); }
.rules-sum.ok::before { content: "✓ "; } .rules-sum.bad::before { content: "✕ "; }
.rules-list { list-style: none; margin: 0 0 6px; padding: 0; font-size: 12px; line-height: 1.35; }
.rules-list li { display: grid; grid-template-columns: 18px 1fr; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--line, #e5e5e5); }
.rules-list li.grp { display: block; border: 0; padding: 8px 0 2px; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.rules-list .mark { font-weight: 700; text-align: center; }
.rules-list li.ok .mark { color: var(--ok-text); } .rules-list li.bad .mark { color: var(--err-text); } .rules-list li.info .mark { color: var(--info-text); }
.rules-list li.bad b { color: var(--err-text); }
.rules-list .lim { color: var(--muted); }
.struct-warn-txt b { color: var(--err-text); } .struct-warn-txt b::before { content: "✕ "; }
.struct-ok-txt b { color: var(--ok-text); } .struct-ok-txt b::before { content: "✓ "; }

/* Ansichten (3D / Fassaden) */
.view3d { position: absolute; inset: 0; background: #eef1f4; z-index: 5; }
/* Geteilte Ansicht: Grundriss links, 3D rechts */
.canvas-wrap.split #canvas { width: 50%; }
.canvas-wrap.split .view3d { left: 50%; border-left: 2px solid var(--line, #d0d5dd); }
.canvas-wrap.split .zoom-ctrl { right: calc(50% + 12px); }
#v3dSplit.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Schwebende Werkzeugleiste an der Auswahl */
.sel-bar { position: absolute; z-index: 4; display: flex; gap: 2px; padding: 3px; background: #fff; border: 1px solid #d0d5dd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.15); transform: translateY(-100%); }
.sel-bar[hidden] { display: none; }
.sel-bar button { min-width: 34px; height: 32px; padding: 0 6px; font-size: 16px; border: none; background: transparent; }
.sel-bar button:hover { background: #eef2ff; }
/* Info-Karte in 3D (früher style-Attribute in js/info3d.js; CSP ohne 'unsafe-inline') */
.info3d .i3d-head { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.info3d .i3d-head-main { min-width: 0; }
.info3d .i3d-x { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; min-width: var(--bh, 36px); min-height: var(--bh, 36px); margin: -6px -8px 0 0; }
.info3d .i3d-where { opacity: .7; }
.info3d .i3d-where-line { opacity: .7; margin-bottom: 6px; }
.info3d .i3d-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.info3d .i3d-foot { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.info3d .i3d-link { min-height: var(--bh, 36px); }
.info3d .i3d-table { border-collapse: collapse; width: 100%; }
.info3d .i3d-k { padding: 1px 8px 1px 0; opacity: .75; }
.info3d .i3d-v { text-align: right; font-variant-numeric: tabular-nums; }
.info3d .i3d-selbar { position: static; transform: none; box-shadow: none; border: 0; padding: 0; gap: 0; background: none; }
.info3d .i3d-selbar-row { margin-top: 8px; width: max-content; max-width: 100%; flex-wrap: wrap; }
@media (pointer: coarse) { .sel-bar button { min-width: 44px; height: 44px; font-size: 20px; } }
.view3d[hidden] { display: none; }
.view3d canvas { display: block; }
.v3d-bar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; z-index: 2; pointer-events: none;
  padding: 2px; margin: -2px; }
.v3d-bar::-webkit-scrollbar { display: none; }
/* Leiste breiter als der Bildschirm: Ausblenden am Rand zeigt, dass sie weiter scrollt (js/layout.js setzt die Klassen) */
.v3d-bar.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.v3d-bar.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.v3d-bar.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.v3d-bar > * { flex: none; pointer-events: auto; }
.v3d-bar button { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.walk-ui[hidden] { display: none; }
.walk-tools { position: absolute; top: 62px; right: 10px; display: flex; gap: 6px; z-index: 2; }
.walk-tools button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.walk-map { position: absolute; left: 12px; bottom: 40px; width: 220px; height: 220px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.2); cursor: crosshair; z-index: 2; touch-action: none; }
.walk-map[hidden] { display: none; }
/* Übersichtskarte: 220 px nur auf großen Bildschirmen, sonst verdeckt sie ein Viertel des Bildes */
@media (max-width: 1400px) { .walk-map { width: 180px; height: 180px; } }
@media (max-width: 700px) { .walk-map { width: 150px; height: 150px; } }
.walk-joy { position: absolute; right: 28px; bottom: 28px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.75); box-shadow: 0 2px 10px rgba(0,0,0,.18); touch-action: none; z-index: 2; }
.walk-knob { position: absolute; left: 35px; top: 35px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: none; }
/* Hinweis zwischen Übersichtskarte (links) und Joystick (rechts), damit er nichts verdeckt */
.walk-hint { position: absolute; left: 250px; right: 170px; bottom: 12px; text-align: center; font-size: 12px; color: #fff; background: rgba(0,0,0,.38); padding: 4px 10px; border-radius: 6px; pointer-events: none; z-index: 2; }
@media (max-width: 1100px), (any-pointer: coarse) and (max-width: 1400px) { .walk-hint { display: none; } }
/* schmale 3D-Fläche: Hinweis hinter ⓘ (unten mittig), aufgeklappt über die ganze Breite über der Karte */
.walk-info { display: none; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; font-size: 17px; line-height: 1; color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.6); z-index: 3; }
.walk-ui.narrow .walk-info { display: block; }
.walk-ui.narrow .walk-hint { display: none; }
.walk-ui.narrow.hint-open .walk-hint { display: block; left: 8px; right: 8px; bottom: 52px; text-align: left; font-size: 13px; line-height: 1.45; background: rgba(0,0,0,.72); padding: 8px 12px; z-index: 4; }
.walk-ui.narrow.hint-open .walk-info { background: var(--accent); border-color: var(--accent); }
@media (any-pointer: coarse) { .walk-info { width: 44px; height: 44px; } .walk-ui.narrow.hint-open .walk-hint { bottom: 64px; } }
.walk-cross { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 1.5px rgba(0,0,0,.45); pointer-events: none; z-index: 2; }
.walk-cross[hidden] { display: none; }
/* Raumnamen der Begehung (labels3d.js): Schilder über dem Bild, gleich groß, frei stehend */
.room-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.room-tags[hidden] { display: none; }
.room-tag { position: absolute; left: 0; top: 0; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,.86); color: #1f2937; font: 600 14px system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.25); will-change: transform, opacity; }
/* 360°-Panorama (pano3d.js): Betrachter über der 3D-Ansicht */
.pano-ui { position: absolute; inset: 0; z-index: 8; background: #111; }
.pano-ui[hidden] { display: none; }
.pv-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.pv-hot { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pv-hotspot { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; min-height: 36px; padding: 6px 12px; border-radius: 18px;
  border: 2px solid #fff; background: rgba(37,99,235,.85); color: #fff; font: 600 13px system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; white-space: nowrap; }
.pano-view { position: absolute; inset: 0; }
.pano-top { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; z-index: 2; }
.pano-title { color: #fff; font-weight: 600; text-shadow: 0 1px 3px #000; margin-right: auto; padding: 0 4px; }
.pano-top button { background: rgba(255,255,255,.92); }
.pano-top button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pano-scenes { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; overflow-x: auto; z-index: 2; }
.pano-scenes button { flex: none; background: rgba(255,255,255,.92); }
.pano-scenes button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Zum Raum fliegen (tour3d.js) und Aufbau abspielen (build3d.js) */
.tour-list { position: absolute; top: 62px; left: 12px; max-height: calc(100% - 140px); overflow-y: auto; width: 220px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: rgba(255,255,255,.95); border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.2); z-index: 6; }   /* über Kompass und Joystick */
.tour-list[hidden] { display: none; }
.tour-list button { text-align: left; min-height: 36px; }
.tour-list .tour-floor { font-size: 12px; font-weight: 600; color: #6b7280; margin: 6px 4px 0; }
.build-ui { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(760px, calc(100% - 24px)); padding: 8px 10px; background: rgba(255,255,255,.95); border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.2); z-index: 6; display: flex; flex-direction: column; gap: 6px; }
.build-ui[hidden] { display: none; }
.build-row { display: flex; align-items: center; gap: 8px; }
.build-row input[type=range] { flex: 1; min-width: 80px; }
.build-count { font-size: 12px; color: #374151; white-space: nowrap; min-width: 9em; }
.build-stages { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.build-stages button { white-space: nowrap; font-size: 12px; padding: 4px 8px; }
.build-stages button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (any-pointer: coarse) { .tour-list button, .build-ui button, .build-ui select { min-height: 44px; } .build-stages button { font-size: 13px; } }
@media (max-width: 600px) { .build-row { flex-wrap: wrap; } .build-count { order: 5; width: 100%; } .tour-list { left: 8px; right: 8px; width: auto; } }
.v3d-sun { position: absolute; top: 62px; left: 10px; z-index: 3; width: min(360px, calc(100% - 20px)); background: rgba(255,255,255,0.96); border: 1px solid #d8dce2; border-radius: 10px; padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.12); display: grid; gap: 8px; font-size: 13px; }
.v3d-sun[hidden] { display: none; }
.v3d-sun .sun-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.v3d-sun output { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3d-sun input[type=range] { width: 100%; }
.v3d-sun .sun-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.v3d-sun .sun-presets button, .v3d-sun .sun-shade button { padding: 4px 8px; }
.v3d-sun .sun-info { color: #444; }
.v3d-sun .hint { color: var(--muted); font-size: 12px; }
.dof-range { width: 70px; }
.study-sw { display: inline-block; width: 14px; height: 10px; vertical-align: middle; }
.v3d-label { position: absolute; left: 14px; bottom: 12px; font-weight: 700; font-size: 15px; color: #222; text-shadow: 0 0 4px #fff; z-index: 2; pointer-events: none; }

/* Kompass (Anzeige → Kompass) */
.compass2d, .compass3d { position: absolute; top: 12px; right: 12px; width: 64px; height: 64px; z-index: 3; cursor: pointer; }
.compass2d:hover .c-ring, .compass3d:hover .c-ring { stroke: #1f6fd1; }
.compass2d[hidden], .compass3d[hidden] { display: none; }
.compass3d { top: auto; bottom: 164px; right: max(18px, env(safe-area-inset-right, 0px)); }
.compass2d svg, .compass3d svg { width: 100%; height: 100%; transition: transform .15s; }
.c-ring { fill: rgba(255,255,255,.9); stroke: #c3c9d1; stroke-width: 2; }
.c-n { fill: #c62828; } .c-s { fill: #9aa3ad; }
.c-t { font: 700 16px system-ui, sans-serif; fill: #c62828; text-anchor: middle; dominant-baseline: middle; }
@media (max-width: 900px), (max-height: 500px) { .compass2d { top: 54px; right: max(8px, env(safe-area-inset-right, 0px)); width: 52px; height: 52px; } .compass3d { bottom: 150px; right: max(12px, env(safe-area-inset-right, 0px)); width: 52px; height: 52px; } }

/* Geteilter Lese-Link: nur ansehen und begehen – Bearbeiten, Speichern und Bibliothek ausgeblendet */
body.readonly [data-act="save"], body.readonly #btnUndo, body.readonly #btnRedo,
body.readonly .panel-tools, body.readonly .panel-lib, body.readonly [data-act="addFloor"], body.readonly .fbtn,
body.readonly #menuPanel :is([data-act="new"], [data-act="open"], [data-act="reload"], [data-act="saveAs"], [data-act="example"], [data-act="share"]),
body.readonly #menuPanel section[aria-labelledby="mhEdit"],
body.readonly #toggles label:has(:is([data-pref="snap"], [data-pref="penOnly"], [data-pref="fitIn"], [data-pref="fillGap"], [data-pref="distances"])),
body.readonly .mobile-nav :is([data-sheet="tools"], [data-sheet="library"]) { display: none !important; }
body.readonly .proj-name { border-color: transparent; background: transparent; pointer-events: none; }
body.readonly .file-name { color: #1f6fd1; font-weight: 600; }
.share-info p { margin: 0 0 8px; }
.share-error { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; text-align: center; gap: 8px; padding: 24px; background: var(--bg, #fff); }
.share-error h2 { margin: 0; font-size: 20px; }
body.readonly #selBar { display: none !important; }

/* Planauswahl: ganze Zeile lädt, weitere Aktionen im Menü „⋯“; auf dem Smartphone als Vollbild */
.dlg-head { display: flex; align-items: center; gap: 8px; }
.dlg-head h2 { flex: 1; }
.dlg-x { min-width: 36px; min-height: 36px; padding: 0; font-size: 16px; line-height: 1; border-radius: 50%; }
.plans-filter { width: 100%; }
.plans-hint { margin: -4px 0 0; }
.plan-row { position: relative; display: flex; align-items: stretch; gap: 0; padding: 0; overflow: visible; }
.plan-row[hidden] { display: none; }
.plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal;
  border: 0; background: transparent; padding: 9px 12px; border-radius: 8px 0 0 8px; font: inherit; color: inherit; cursor: pointer; }
.plan-main b { max-width: 100%; overflow-wrap: anywhere; font-weight: 600; }
.plan-main:hover, .plan-main:focus-visible { background: #f2f6ff; }
.plan-more { display: flex; }
.plan-more > summary { list-style: none; display: grid; place-items: center; min-width: 44px; padding: 0 4px; cursor: pointer; font-size: 20px; color: var(--muted);
  border-left: 1px solid var(--line); border-radius: 0 8px 8px 0; -webkit-user-select: none; user-select: none; }
.plan-more > summary::-webkit-details-marker { display: none; }
.plan-more > summary:hover, .plan-more[open] > summary { background: #f2f6ff; color: var(--text); }
.plan-actions { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; min-width: 210px; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.plan-actions button { border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: 6px; }
.plan-actions button:hover, .plan-actions button:focus-visible { background: #f2f6ff; }
.plan-actions button.danger { color: var(--danger); }
.save-online { flex-wrap: wrap; }
.save-name { flex: 1 1 220px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.save-name input { flex: 1; min-width: 0; }

@media (max-width: 900px), (max-height: 500px) {
  #plansDlg { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  #plansDlg .plans-dlg { height: 100%; box-sizing: border-box; gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom)); }
  #plansDlg .plans-list { flex: 1 1 auto; max-height: none; min-height: 0; padding-bottom: 120px; }
  #plansDlg .dlg-head h2 { font-size: 20px; }
  #plansDlg .dlg-x { min-width: 44px; min-height: 44px; }
  #plansDlg .plans-filter, #plansDlg .save-name input { min-height: 44px; font-size: 16px; }
  #plansDlg .plan-main { padding: 12px 14px; min-height: 56px; }
  #plansDlg .plan-actions button { min-height: 44px; }
  #plansDlg .save-online > button { flex: 1 1 100%; min-height: 44px; }
  #plansDlg .dlg-actions { margin: 0; }
  #plansDlg .dlg-actions > button { flex: 1; min-height: 44px; }
  #plansDlg .dlg-close { display: none; }
}

/* Dialoge auf dem Smartphone: eine Spalte, nichts abgeschnitten, 16-px-Schrift (kein Zoom unter iOS), große Knöpfe */
.grid2 > *, .dlg label > input, .dlg label > select { min-width: 0; }
.dlg label > input:not([type=checkbox]):not([type=radio]), .dlg label > select { width: 100%; box-sizing: border-box; }
.dlg label.inline > input { flex: none; margin: 0; }
/* Dialoge passen immer auf den Bildschirm (auch Smartphone quer): Inhalt scrollt, Knöpfe bleiben sichtbar */
dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
dialog:not(#plansDlg)[open] { display: flex; flex-direction: column; }
/* flex-basis auto (nicht 0 %): Safari/iPad rechnet 0 % in einer Spalte ohne feste Höhe als 0 → Dialog ohne Höhe */
dialog:not(#plansDlg) .dlg { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 600px) {
  dialog { width: calc(100% - 24px); }
  .grid2, .checks { grid-template-columns: 1fr; }
  .dlg input:not([type=checkbox]), .dlg select { min-height: 44px; font-size: 16px; }
  .dlg input[type=checkbox] { width: 22px; height: 22px; }
  .checks label { min-height: 40px; }
  .dlg-actions { flex-wrap: wrap; }
  .dlg-actions > button { flex: 1 1 0; min-height: 44px; }
  .menu-checks { grid-template-columns: 1fr 1fr; }
  .menu-panel select { font-size: 16px; min-height: 44px; }
}
/* Knöpfe bleiben beim Scrollen langer Dialoge (Festsetzungen, Formblatt, Export) sichtbar */
dialog:not(#plansDlg) .dlg { padding-bottom: 0; scroll-padding-bottom: 80px; }   /* Tab scrollt Felder über die festen Knöpfe (WCAG 2.4.11) */
dialog:not(#plansDlg) .dlg-actions { position: sticky; bottom: 0; background: #fff; margin: 4px -20px 0; flex-shrink: 0;
  padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
@media (max-width: 600px), (max-height: 560px) {
  .dlg { padding: 18px 16px 0; }
  dialog:not(#plansDlg) .dlg-actions { margin: 0 -16px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.cam-tools { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 3;
  background: rgba(20, 22, 26, .72); color: #fff; padding: 4px 6px; border-radius: 10px; }
.cam-tools[hidden] { display: none; }
.cam-tools span { font-size: 13px; padding: 0 4px; white-space: nowrap; }
.cam-tools button { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; min-width: 44px; }
.notes { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.4; resize: vertical; min-height: 64px; }
.notes-view { white-space: pre-wrap; font-size: 13px; line-height: 1.45; margin-bottom: 8px; }
.plan-desc { color: #3a4148; overflow-wrap: anywhere; }
.cam-tools .cam-hint { opacity: .75; font-size: 12px; } @media (max-width: 600px) { .cam-tools .cam-hint { display: none; } }

/* Seitenleiste rechts einklappbar (Desktop/Tablet) */
.side-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 6; width: 22px; min-width: 0; min-height: 56px; padding: 0;
  border-radius: 8px 0 0 8px; border-right: none; font-size: 18px; line-height: 1; background: var(--panel, #fff); box-shadow: -1px 0 4px rgba(0,0,0,.08); }
body.right-collapsed .main { --rcol: 0px; }
body.left-collapsed .main { --lcol: 0px; }
body.left-collapsed aside.left { visibility: hidden; overflow: hidden; min-width: 0; padding: 0; border: 0; }
body.right-collapsed aside.right { display: none; }
/* Sehr breite Bildschirme ohne Systemskalierung (4K/5K bei 100 %): Schrift und Leisten etwas größer, sonst winzig */
@media (min-width: 2400px) and (max-resolution: 1.25dppx) {
  :root { font-size: 15px; --top-h: 60px; }
  .main { --lcol: 300px; --rcol: 350px; }
  .lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile { font-size: 12px; }
  .tile svg, .tile .room-thumb { width: 60px; height: 46px; }
  .props .row { grid-template-columns: 110px 1fr; }
  .zoom-ctrl button { width: 40px; height: 40px; font-size: 19px; }
  .status { height: 28px; font-size: 13px; }
  .v3d-bar button, .walk-tools button { padding: 7px 14px; }
}
@media (max-width: 900px), (max-height: 500px) { .side-toggle { display: none; } body.right-collapsed .main, body.left-collapsed .main { grid-template-columns: 1fr; } body.left-collapsed aside.left { visibility: visible; overflow: auto; } body.right-collapsed[data-sheet=props] aside.right { display: block; } }

/* 3D „Realistischer“: Fortschritt des Pathtracings */
.pt-info { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(20, 22, 26, 0.62); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 12px; pointer-events: none; white-space: nowrap; }

/* Hinweise auf der Zeichenfläche: Anleitung zum gewählten Werkzeug, leeres Geschoss */
.tool-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4; max-width: min(640px, calc(100% - 260px));
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; background: rgba(255,255,255,.97); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); font-size: 12.5px; line-height: 1.4; }
.tool-hint[hidden], .empty-hint[hidden] { display: none; }
.tool-hint button { flex: none; }
.empty-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(440px, calc(100% - 32px));
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.10); padding: 18px 20px; line-height: 1.45; }
.empty-hint h2 { margin: 0 0 6px; font-size: 16px; }
.empty-hint p { margin: 0 0 10px; }
.empty-hint .btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.empty-hint kbd, .tool-hint kbd { font-size: 10.5px; }
.empty-hint button.primary kbd { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }
@media (max-width: 900px), (max-height: 500px) { .tool-hint { top: auto; bottom: 10px; max-width: calc(100% - 80px); left: 10px; transform: none; } }
#keysDlg { max-width: 640px; }
#keysDlg .keys { font-size: 12.5px; gap: 5px 12px; max-height: 70vh; overflow-y: auto; color: var(--text); }
.area-table tr.room-row:focus-visible td { outline: none; background: var(--accent-soft); }
.area-table tr.room-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Entwurfsprüfung */
.check-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; font-size: 12px; }
.check-sum .ok { color: var(--ok-text); font-weight: 600; }
.chk-badge { border-radius: 10px; padding: 1px 8px; font-weight: 600; }
.chk-badge.error { background: var(--err-bg); color: var(--err-text); } .chk-badge.warn { background: var(--warn-bg); color: var(--warn-text); } .chk-badge.info { background: var(--info-bg); color: var(--info-text); }
.chk-badge.error::before { content: "✕ "; } .chk-badge.warn::before { content: "⚠ "; } .chk-badge.info::before { content: "ⓘ "; }
.chk-list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.chk { display: grid; grid-template-columns: 14px auto 1fr; gap: 6px; align-items: start; width: 100%; text-align: left; white-space: normal; padding: 5px 6px;
  border: 1px solid transparent; border-radius: 6px; background: none; font-size: 12px; line-height: 1.35; }
.chk:hover, .chk:focus-visible { background: #f6f8fa; border-color: var(--line); }
.chk.on { background: var(--err-bg); border-color: var(--err); }
.chk .dot { width: 14px; font-weight: 700; text-align: center; line-height: 1.35; }
.chk.sev-error .dot::before { content: "✕"; color: var(--err-text); } .chk.sev-warn .dot::before { content: "⚠"; color: var(--warn-line); } .chk.sev-info .dot::before { content: "ⓘ"; color: var(--info-text); }
.chk .fl { font-weight: 700; color: var(--muted); }
.check-panel details > summary { cursor: pointer; color: var(--muted); font-size: 12px; margin: 6px 0 4px; }
body.readonly .check-panel { display: none; }

/* Prüfung: Abschnitte Entwurf / Baurecht / Barrierefrei, Erklärung je Befund, Festsetzungen-Dialog (js/rules-ui.js) */
.chk-sec { border-top: 1px solid var(--line); padding: 4px 0 6px; }
.chk-sec > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; list-style: none; }
.chk-sec > summary::-webkit-details-marker { display: none; }
.chk-sec > summary::before { content: "▸"; color: var(--muted); font-size: 11px; width: 10px; }
.chk-sec[open] > summary::before { content: "▾"; }
.chk-sec > summary > span:first-of-type { flex: 1; }
.chk-badge.okb { background: var(--ok-bg); color: var(--ok-text); } .chk-badge.okb::before { content: "✓"; } .chk-badge.okb:not(:empty)::before { content: "✓ "; }
.chk-tools select { font-size: 12px; padding: 2px 4px; }
.chk-toolrow { padding: 4px 12px 2px; }   /* Werkzeuge der Prüf-Abschnitte unter der Überschrift (nicht im summary) */
.chk.sev-ok .dot::before { content: "✓"; color: var(--ok-text); }
.chk .lim { color: var(--muted); font-weight: 400; }
.chk-list li.grp { padding: 8px 0 2px 6px; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.chk-why { margin: 0 0 4px 21px; padding: 6px 8px; font-size: 11.5px; line-height: 1.4; color: var(--text); background: #f6f8fa; border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; }
.chk-why p { margin: 0 0 4px; } .chk-why .law { color: var(--muted); margin: 0; }
.check-sum .muted { color: var(--muted); flex: 1 1 100%; }
.check-sum label.inline { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
#props .hint b.bad { color: var(--err-text); }
.check-area.rules { fill: rgba(213, 94, 0, .12); stroke: var(--err); }
.check-area.a11y { fill: rgba(230, 159, 0, .2); stroke: var(--warn-line); stroke-dasharray: 3 3; }
.rules-dlg { max-width: 760px; }
.rules-form { max-height: calc(100vh - 60px); overflow: auto; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.rules-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 0; min-width: 0; }
.rules-form fieldset[hidden] { display: none; }
.rules-form legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.rules-form .row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 12.5px; }
.rules-form .row > span { color: var(--muted); }
.rules-form .row input, .rules-form .row select { width: 100%; min-width: 0; }
.rules-form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rules-form .chk-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rules-form textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.rules-form label.inline { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); margin: 3px 0; }
.rules-form .hint { font-size: 11.5px; color: var(--muted); margin: 4px 0; line-height: 1.4; }
.rules-form .edges { display: grid; grid-template-columns: auto auto auto; gap: 2px 10px; font-size: 12px; align-items: center; }
.rules-form .dlg-actions .spacer { flex: 1; }
@media (max-width: 700px) { .rules-grid { grid-template-columns: 1fr; } }
.chk.sev-ok.on, .chk.sev-info.on { background: var(--accent-soft); border-color: #b7c9f0; }
.areas-auto { font-size: 12px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.areas-auto .dev, .areas-tbl .dev { color: var(--err-text); font-weight: 600; }
.areas-auto .dev::before, .areas-tbl .dev::before { content: "⚠ "; }
.areas-dlg { max-width: 820px; }
.areas-form h3 { font-size: 14px; margin: 8px 0 4px; }
.areas-opts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12.5px; }
.areas-opts label.inline { margin: 0; }
.areas-opts select, .areas-opts input { width: auto; }
.areas-tbl th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 3px 2px; border-bottom: 1px solid var(--line); }
.areas-tbl th.num { text-align: right; }
.areas-tbl th { white-space: nowrap; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 0 0 auto; }
.tbl-scroll .areas-tbl { min-width: 560px; }
@media (max-width: 700px) { .areas-tbl { font-size: 11px; } .areas-tbl td { padding: 2px 3px; } }

/* Darstellung des Plans: Entwurf | Bauplan | Präsentation */
.mode-seg { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(255,255,255,.96); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.mode-seg button { padding: 4px 10px; font-size: 12px; }
.mode-seg button[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tool-hint:not([hidden]) ~ .mode-seg { display: none; }
@media (max-width: 900px) { .mode-seg { top: auto; bottom: 12px; left: 12px; transform: none; } .mode-seg button { padding: 6px 8px; } }
.checks .exp-mode { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.checks .exp-mode select { flex: 1; }

/* Startbildschirm */
#startDlg { max-width: 860px; }
.start-dlg { gap: 10px; }
.start-sub { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.start-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; white-space: normal; padding: 10px; border-radius: 10px; min-height: 150px; }
.start-card:hover, .start-card:focus-visible { border-color: var(--accent); background: #f8faff; }
.start-card.primary-card { grid-column: span 2; border-color: var(--accent); background: var(--accent-soft); }
.start-thumb { display: grid; place-items: center; width: 100%; height: 92px; background: #fafbfc; border-radius: 6px; overflow: hidden; }
.primary-card .start-thumb { height: 140px; background: #fff; }
.start-thumb svg { width: 100%; height: 100%; }
.start-thumb2 { display: flex; gap: 4px; height: 100px; }
.start-thumb2 img { height: 100%; width: 58%; object-fit: cover; border-radius: 4px; flex: none; }
.start-thumb2 svg { flex: 1; min-width: 0; }
.start-icon { font-size: 34px; color: var(--muted); }
@media (max-width: 600px) { .start-card.primary-card { grid-column: auto; } .start-grid { grid-template-columns: 1fr 1fr; } .start-card { min-height: 120px; } }

/* Register der rechten Seitenleiste */
.rtabs { display: flex; position: sticky; top: 0; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--line); }
.rtabs button { flex: 1; border: none; border-radius: 0; background: none; padding: 9px 4px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.rtabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.rtab-badge { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: var(--on-warn); font-size: 10.5px; line-height: 17px; }
.rtab-badge.err { background: var(--err-text); color: #fff; }
.rtab-badge::before { content: "⚠"; margin-right: 2px; } .rtab-badge.err::before { content: "✕"; }
body:not([data-rtab="check"]) [data-rpanel="check"], body:not([data-rtab="areas"]) [data-rpanel="areas"],
body[data-rtab="check"] [data-rpanel="props"], body[data-rtab="areas"] [data-rpanel="props"] { display: none; }
body.readonly [data-rtab="check"] { display: none; }
.status .status-link { cursor: pointer; pointer-events: auto; } .status .status-link:hover b { text-decoration: underline; }

/* Tipp beim ersten Gebrauch */
.jit-tip { position: fixed; z-index: 70; width: min(300px, calc(100vw - 16px)); background: #1f2a3a; color: #fff; border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 12.5px; line-height: 1.45; }
.jit-tip { pointer-events: none; }   /* Zeichnen darunter bleibt möglich – nur „Verstanden“ ist anklickbar */
.jit-tip button { pointer-events: auto; }
.jit-tip p { margin: 0 0 8px; }
.jit-tip button { float: right; }
.jit-tip::after { content: ""; position: absolute; border: 7px solid transparent; }
.jit-tip.left-arrow::after { left: -14px; top: calc(50% - 7px); border-right-color: #1f2a3a; }
.jit-tip.top-arrow::after { top: -14px; left: 18px; border-bottom-color: #1f2a3a; }
.rtab-badge[hidden] { display: none; }
.canvas-wrap.split .phase-view { left: 25%; }
/* 2D+3D: Planart unten links in der 2D-Hälfte – oben ist die Hälfte oft zu schmal für Geschoss-Schild und Umschalter */
.canvas-wrap.split .mode-seg { top: auto; bottom: 36px; left: 12px; transform: none; }   /* über der Statuszeile, wie die Zoom-Knöpfe */
@media (max-width: 900px), (max-height: 500px) { .canvas-wrap.split .mode-seg { bottom: 12px; } }
/* 2D+3D: Hinweise gehören in die 2D-Hälfte, sonst verdeckt die 3D-Seite ihre rechte Hälfte */
.canvas-wrap.split .empty-hint { left: 25%; width: min(440px, calc(50% - 32px)); }
@media (min-width: 901px) and (min-height: 501px) { .canvas-wrap.split .tool-hint { left: 25%; max-width: calc(50% - 24px); } }
@media (min-width: 700px) and (max-width: 900px) and (min-height: 501px) { .canvas-wrap.split .tool-hint { max-width: calc(50% - 20px); } }
/* Geteilte Ansicht nur ab Tablet-Breite; auf dem Smartphone wäre jede Hälfte zu schmal */
@media (max-width: 699px), (max-height: 500px) {
  #btnSplit, #v3dSplit { display: none; }
  .canvas-wrap.split #canvas { width: 100%; }
  .canvas-wrap.split .view3d { left: 0; border-left: none; }
  .canvas-wrap.split .phase-view, .canvas-wrap.split .empty-hint { left: 50%; }
  .canvas-wrap.split .empty-hint { width: min(440px, calc(100% - 32px)); }
}
.snap-mark { fill: none; stroke: #e0368a; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
#world [data-chain] { cursor: text; } #world [data-chain]:hover { fill: var(--accent); text-decoration: underline; }
.par-follow { fill: rgba(224, 54, 138, .14); stroke: #e0368a; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.align-guide { fill: none; stroke: #e0368a; stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.gap-label { pointer-events: none; } .gap-label rect { fill: #e0368a; } .gap-label text { fill: #fff; font: 600 11px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.deduct-list { list-style: none; margin: -2px 0 8px; padding: 0; font-size: 11.5px; color: var(--muted); }
.deduct-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 0; }

/* Hinweis: neuere Fassung des Online-Plans auf dem Server (js/ui.js, showNewer) */
.srv-newer { position: fixed; top: calc(var(--top) + 8px); left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 24px); padding: 8px 10px 8px 14px; background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15); color: var(--warn-text); }
.srv-newer[hidden] { display: none; }
.srv-newer button { flex: none; }
@media (pointer: coarse) { .srv-newer button { min-height: 44px; } }
.fp-choose .dlg-actions { flex-wrap: wrap; }
.fp-choose .dlg-actions > button { flex: 1 1 auto; }

/* ---------- Tür-/Fensterkarte im Eigenschaftenfeld ---------- */
.wkind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 6px 0 8px; }
.wkind button { padding: 6px 4px; font-size: 12px; line-height: 1.2; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.wkind button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
svg.elev { display: block; width: 100%; max-height: 150px; margin: 2px 0 8px; background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; }
svg.elev .el-wall { fill: #e6e8eb; }
svg.elev .el-open { fill: #fff; stroke: #555; stroke-width: 2; }
svg.elev .el-glass { fill: #d9ecf7; stroke: #8fb3c9; stroke-width: 1; }
svg.elev .el-sill { stroke: #555; stroke-width: 4; }
svg.elev .el-floor { stroke: #333; stroke-width: 3; }
svg.elev .el-dim { stroke: #e0368a; stroke-width: 2; }
svg.elev text { font-size: 24px; fill: #333; font-weight: 600; }
.ocard { display: grid; gap: 6px; margin-bottom: 6px; }
.ocard label { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.stdpair { display: flex; gap: 4px; min-width: 0; }
.stdpair input { flex: 1; min-width: 0; }
.stdpair select { width: 44px; flex: none; padding: 0 2px; }
details.more { margin: 6px 0; border-top: 1px solid var(--line); padding-top: 4px; }
details.more > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }
@media (any-pointer: coarse) {
  .wkind button, .stdpair input, .stdpair select, details.more > summary { min-height: 44px; }
  .stdpair input, .stdpair select { height: 44px; box-sizing: border-box; }
  .stdpair select { width: 52px; }
}
.tile svg.elev-thumb { max-height: 46px; margin: 0 auto 2px; border: none; background: transparent; }
.tile svg.elev-thumb .el-dim { display: none; }
.tier-note { margin: 4px 0 0; }
.tier-note button.link { border: none; background: none; color: var(--accent); padding: 0; min-height: 0; font: inherit; text-decoration: underline; cursor: pointer; }
svg.elev .el-fixed { fill: #c9dceb; stroke: #8fb3c9; stroke-width: 1; }
svg.elev .el-transom { stroke: #555; stroke-width: 6; }
svg.elev .el-open-sym { fill: none; stroke: #5f7f95; stroke-width: 1.5; stroke-dasharray: 8 6; }
svg.elev .el-dim2 { stroke: #2563eb; stroke-width: 3; }
svg.elev .el-small { font-size: 18px; fill: #5f7f95; font-weight: 500; }
.fixedsel { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4px; margin: 4px 0 6px; }
.fixedsel button { padding: 6px 4px; font-size: 12px; line-height: 1.2; white-space: normal; }
.fixedsel button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
@media (any-pointer: coarse) { .fixedsel button { min-height: 44px; } }

/* ---------- Touch (iPad, Smartphone): Trefferflächen mindestens 44 px, Griffe mit unsichtbarer großer Trefferfläche ---------- */
.handle-hit { fill: transparent; stroke: none; }
@media (any-pointer: coarse) {
  .seg button, #modeSeg button, .floor-list .fbtn, .lib-cat > summary, #libSearch, .proj-name { min-height: 44px; }
  .floor-list .fbtn { min-width: 44px; }
  .side-toggle { min-width: 36px; }
}

/* Seitenleiste links einklappbar; in 3D/Begehung auf Tablets automatisch eingeklappt (js/layout.js) */
.side-toggle-left { right: auto; left: 0; border-radius: 0 8px 8px 0; border-right: 1px solid var(--line); border-left: none; box-shadow: 1px 0 4px rgba(0,0,0,.08); }
@media (any-pointer: coarse) {
  .side-toggle { width: 44px; min-height: 72px; }
  .proj-name { height: 44px; }
}
/* Raum einrichten: Vorschlag blass im Plan */
.furnish-ghost { opacity: .5; pointer-events: none; }
.furnish-ghost .sym-fill { fill: #dbeafe; }
.furnish .btns { flex-wrap: wrap; }
/* Prüfbefund im Plan: Farbe und Zeichen je Schwere */
.check-mark.sev-warn { stroke: var(--warn-line); stroke-dasharray: 3 3; }
.check-mark.sev-info { stroke: var(--info); stroke-dasharray: 1 4; stroke-linecap: round; }
.check-icon { pointer-events: none; }
.check-icon circle { fill: var(--err); stroke: #fff; stroke-width: 2; }
.check-icon text { fill: #fff; font: 700 13px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.check-icon.sev-warn circle { fill: var(--warn); } .check-icon.sev-warn text { fill: var(--on-warn); }
.check-icon.sev-info circle { fill: var(--info); }
/* Befund-Flächen (Türaufschlag, Bewegungsfläche …) nach Schwere */
.check-area.sev-warn { fill: rgba(230, 159, 0, .2); stroke: var(--warn-line); stroke-dasharray: 3 3; }
.check-area.sev-info { fill: rgba(91, 122, 153, .14); stroke: var(--info); stroke-dasharray: 1 4; }
.struct-caution-txt b { color: var(--warn-text); } .struct-caution-txt b::before { content: "⚠ "; }
/* Stimmungen und vier Tageszeiten (js/mood3d.js) */
.v3d-sun .fp-mood { margin-top: 6px; }
.v3d-sun .fp-mood-ind { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin-top: 4px; }
.v3d-sun .fp-mood-ind small { color: var(--muted, #777); }
.v3d-sun .fp-four-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 6px 0; }
.v3d-sun .fp-four-grid button { padding: 0; border: 1px solid var(--line, #ccc); background: #fff; display: flex; flex-direction: column; cursor: pointer; }
.v3d-sun .fp-four-grid img { width: 100%; display: block; aspect-ratio: auto; }
.v3d-sun .fp-four-grid span { font-size: 11px; padding: 2px 4px; text-align: left; }
/* Umbau: Auswahl der Bauphasen-Ansicht unter der Darstellungsumschaltung */
.phase-view { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 12px; padding: 3px 6px; background: rgba(255,255,255,.96); box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 6px; }
.phase-view[hidden] { display: none; }
@media (max-width: 900px) { .phase-view { top: auto; bottom: 56px; left: 12px; transform: none; } }
@media (any-pointer: coarse) { .phase-view { min-height: 44px; font-size: 14px; } }
.v3d-sun .fp-mood-btn .ic { margin-right: 5px; font-size: 14px; line-height: 1; }
.v3d-sun .fp-mood-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.v3d-sun .fp-mood-lvl .mark { font-weight: 700; }
.v3d-sun .fp-mood-lvl.ok .mark { color: var(--ok-text); }
.v3d-sun .fp-mood-lvl.info .mark { color: var(--info-text); }
.v3d-sun .fp-mood-lvl.warn .mark { color: var(--warn-text); background: var(--warn-bg); border-radius: 3px; padding: 0 2px; }
.v3d-sun .fp-mood-gi { margin: 2px 0 0; }
@media (any-pointer: coarse) {
  .v3d-sun .fp-mood-btn, .v3d-sun .fp-four-grid button, .v3d-sun [data-four-save] { min-height: 44px; }
}

/* ---------- Werkzeugleisten ohne seitliches Scrollen: Überzähliges im Menü „⋯ Mehr“ (js/overflow.js) ---------- */
.ovf-out { display: none !important; }
.ovf-more { order: 99; font-weight: 600; }
.ovf-more[hidden] { display: none; }
.ovf-more.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ovf-menu { position: fixed; z-index: 60; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line, #d0d5dd); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.ovf-menu[hidden] { display: none; }
.ovf-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border: none; background: none; text-align: left; border-radius: 8px; font-size: 14px; color: var(--text, #1f2328); }
.ovf-item:hover, .ovf-item:focus-visible { background: #eef2ff; }
.ovf-item.active { font-weight: 600; }
.ovf-ico { width: 20px; text-align: center; color: var(--muted, #5f6b7a); flex: none; }
.ovf-lbl { flex: 1; }
.ovf-on { color: var(--ok-text, #005F94); }
@media (any-pointer: coarse) { .ovf-item, .ovf-more { min-height: 44px; } .ovf-item { font-size: 16px; } }
/* Auswahllisten auf Touch-Geräten: WebKit übernimmt die Höhe nur ohne native Darstellung – eigener Pfeil */
@media (any-pointer: coarse) {
  select { -webkit-appearance: none; appearance: none; padding-right: 28px; background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b7a' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px; }
  select[multiple] { background-image: none; padding-right: 8px; }
}
/* Smartphone quer: Kompass neben den Joystick statt unter die Begehungs-Schalter (Karte, Maße) */
@media (max-height: 500px) { .compass3d { bottom: 12px; right: calc(max(12px, env(safe-area-inset-right, 0px)) + 116px); width: 48px; height: 48px; } }
/* Sonnen-Feld: eigener Schließen-Knopf (der ☀-Knopf steht auf dem Smartphone ggf. im Menü „⋯ Mehr“); über dem Kompass */
.v3d-sun { z-index: 4; }
.v3d-sun .sun-row output { margin-left: auto; }
.sun-x { margin-left: 0; border: none; background: none; font-size: 16px; padding: 2px 8px; color: var(--muted, #5f6b7a); }
@media (any-pointer: coarse) { .sun-x { min-width: 44px; min-height: 44px; } }
/* 3D: Qualität und Stil als sichtbare Dreiergruppen (Schnell | Realistisch | Realistischer, Farbe | Weißmodell | Strich) */
.v3d-bar > .v3d-seg { display: inline-flex; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 8px; }
.v3d-seg button { box-shadow: none; }
.v3d-bar > .v3d-seg > button { padding: 6px 12px; }
.v3d-seg button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.v3d-seg .q-short, .v3d-seg .q-mid { display: none; }
.v3d-seg button.locked::after, .ovf-item[data-tier]:not([data-tier=""])::after { content: attr(data-tier); margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 700; line-height: 16px;
  background: var(--info-bg, #EEF3F8); color: var(--info-text, #3B5875); }
.v3d-seg button.locked { color: var(--muted, #5f6b7a); }
/* Tablet (ab 700 px): ganze Wörter, „Fotorealistisch“ als „Foto“; Smartphone: E · S · F */
@media (min-width: 700px) and (max-width: 900px) and (min-height: 501px) {
  .v3d-seg .q-mid { display: inline; }
  .v3d-seg .q-mid ~ .q-short, .v3d-seg .q-long:has(+ .q-mid) { display: none; }
}
@media (max-width: 699px), (max-height: 500px) {
  .v3d-seg .q-long { display: none; }
  .v3d-seg .q-short { display: inline; }
  .v3d-bar > .v3d-seg > button { min-width: 44px; padding-left: 8px; padding-right: 8px; }
}
.ovf-head { padding: 8px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #5f6b7a); }
.ovf-item.ovf-radio { flex-wrap: wrap; }
.ovf-sub { order: 3; flex-basis: 100%; padding-left: 30px; font-size: 12px; color: var(--muted, #5f6b7a); font-weight: 400; }
.ovf-menu > * { flex: none; }   /* Einträge nicht stauchen, das Menü scrollt senkrecht */
/* Farbwahl im Eigenschaftenfeld: Voreinstellung (RAL/NCS, Stoffe) und Farbwähler für eigene Farben */
.colorpair { display: flex; gap: 6px; align-items: center; min-width: 0; }
.colorpair select { flex: 1; min-width: 0; color: var(--text); }
.colorpair input[type="color"] { flex: none; width: 40px; height: 34px; padding: 2px; border-radius: 6px; cursor: pointer; }
/* Schieber im Eigenschaftenfeld (Vorhang zu/auf) mit Wert daneben */
.rangepair { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rangepair input[type="range"] { flex: 1; min-width: 0; }
.rangepair output { min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
/* A/B-Vergleich (js/abcompare.js) */
.ab-dlg { max-width: 560px; }
.ab-dlg .row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; margin-bottom: 6px; }
.ab-dlg .row > span { color: var(--muted); }
.ab-dlg:has(.ab-result) { max-width: min(96vw, 1200px); }
.ab-stage { position: relative; overflow: hidden; border-radius: 8px; background: #000; user-select: none; }
.ab-stage img { display: block; width: 100%; height: auto; }
.ab-stage .ab-b { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.ab-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.6); transform: translateX(-1px); pointer-events: none; }
.ab-tag { position: absolute; top: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; }
.ab-tag-a { left: 8px; }
.ab-tag-b { right: 8px; }
.ab-slider { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.ab-slider input { flex: 1; }
/* 3D: Ansichten (Nord, Ost, Süd, West, weitere) in einem Knopf mit Auswahlfeld wie eine Windrose */
.v3d-bar > .v3d-views { display: inline-flex; }
.views-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.views-pop { position: fixed; z-index: 60; display: grid; grid-template-columns: repeat(3, 64px); grid-template-areas: "nw n no" "w c o" "sw s so" "x x x"; gap: 4px; padding: 8px;
  background: #fff; border: 1px solid var(--line, #d0d5dd); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.views-pop[hidden] { display: none; }
.views-pop button { min-height: 44px; padding: 4px; box-shadow: none; }
.views-pop button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.views-pop .vw-n { grid-area: n; } .views-pop .vw-w { grid-area: w; } .views-pop .vw-o { grid-area: o; } .views-pop .vw-s { grid-area: s; }
.views-pop .vw-nw { grid-area: nw; } .views-pop .vw-no { grid-area: no; } .views-pop .vw-sw { grid-area: sw; } .views-pop .vw-so { grid-area: so; }
.views-pop .vw-c { grid-area: c; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--muted, #5f6b7a); }
.views-pop .vw-extra { grid-area: x; display: flex; flex-direction: column; gap: 4px; }
.views-pop .vw-extra:empty { display: none; }
.views-pop .vw-extra button { width: 100%; text-align: left; padding: 6px 10px; }
/* gespeicherte Ansichten (js/views3d.js) unter den Fassadenansichten */
.vw-saved { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line, #e3e6ea); padding-top: 6px; margin-top: 2px; max-width: 260px; }
.vw-saved .vw-saved-head { font-size: 12px; font-weight: 600; color: #6b7280; padding: 0 4px; }
.vw-saved .vw-saved-empty { padding: 0 4px; }
.vw-saved .vw-row { display: flex; gap: 4px; }
.vw-saved .vw-row > button:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.views-pop .vw-saved .vw-more { width: 36px; flex: none; text-align: center; padding: 6px 0; }
.views-pop .vw-saved .vw-save { font-weight: 600; }
.v3d-bar.pop-open { z-index: 20; }

/* ---------- Aufklappbare Bereiche (js/acc.js): Kopf als Knopf, zugeklappt mit Kurzfassung ---------- */
.acc-h { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 6px 2px; margin: 0; text-align: left; cursor: pointer; border-radius: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.acc-h:hover { background: var(--accent-soft, #eef2ff); color: var(--text, #1f2328); }
.acc-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.acc-t { flex: none; }
.acc-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--muted); text-align: right; }
.acc-chev { flex: none; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.acc-closed > .acc-h .acc-chev, .acc-closed > h2 .acc-chev { transform: rotate(-45deg); }
.props .acc { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 2px; }
.props .acc-b { padding-bottom: 4px; }
.props .acc.acc-closed > .acc-b { display: none; }
.panel h2.acc-h2 { margin: -4px 0 6px; }
.panel.acc-panel.acc-closed > h2.acc-h2 { margin-bottom: -4px; }
/* ganze Seitenleisten-Bereiche nur mit Seitenleiste zuklappen; auf dem Smartphone zeigt jedes Blatt seinen Bereich ganz */
@media (min-width: 901px) and (min-height: 501px) {
  .panel.acc-panel.acc-closed > :not(h2) { display: none !important; }
  .panel-lib.acc-panel.acc-closed { flex: none; min-height: 0; }
}
@media (max-width: 900px), (max-height: 500px) { .acc-panel-h:disabled { cursor: default; opacity: 1; color: var(--muted); background: none; } .acc-panel-h .acc-chev, .acc-panel-h .acc-sum { display: none; } }
@media (any-pointer: coarse) { .acc-h { min-height: 44px; } }

/* =====================================================================================================================
   Bedienelemente über der Zeichenfläche (2D und 3D): ein ruhiges System aus „Pillen“ – weiße Leiste mit feinem Rand und
   Schatten, flache Knöpfe darin, aktive Wahl in Akzentfarbe, Trenner zwischen Zweckgruppen (Ansicht | Darstellung |
   Werkzeuge | Export). Zeile 1: Hauptleiste oben links; Zeile 2 (--ov-row2): Kontext (Materialien links, Begehung rechts,
   Kameras Mitte, Felder wie Sonne/Räume); unten: Navigation (Zoom, Kompass, Joystick) rechts, Übersicht/Beschriftung links,
   Zeitleisten (Aufbau, Puppenhaus) in der Mitte.
   ===================================================================================================================== */
:root { --ov-bg: rgba(255,255,255,.95); --ov-line: rgba(31,35,40,.12); --ov-shadow: 0 2px 10px rgba(16,24,40,.12); --ov-r: 12px; --ov-h: 34px; --ov-row2: 60px; }
@media (any-pointer: coarse) { :root { --ov-h: 44px; --ov-row2: 72px; } }
.ov-pill, .v3d-bar, .walk-tools, .cam-tools, .zoom-ctrl, #modeSeg, .floor-badge, .phase-view {
  background-color: var(--ov-bg); border: 1px solid var(--ov-line); border-radius: var(--ov-r); box-shadow: var(--ov-shadow); }
/* Hauptleiste 3D: eine Pille, so breit wie nötig; was nicht passt, steht im Menü „⋯ Mehr“ */
.view3d .v3d-bar { left: 10px; right: auto; top: 10px; max-width: calc(100% - 20px); margin: 0; padding: 4px; gap: 2px; pointer-events: auto; align-items: center; }
.view3d .v3d-bar > button, .v3d-bar > .v3d-views > .views-btn { border: none; background: transparent; box-shadow: none; border-radius: 8px; min-height: var(--ov-h); padding: 0 10px; color: var(--text, #1f2328); white-space: nowrap; }
.view3d .v3d-bar > button:hover, .v3d-bar > .v3d-views > .views-btn:hover { background: var(--accent-soft, #eef2ff); }
.view3d .v3d-bar > button.active, .view3d .v3d-bar > button[aria-pressed="true"], .v3d-bar > .v3d-views > .views-btn.active { background: var(--accent); color: #fff; }
.view3d .v3d-bar > .v3d-seg { box-shadow: none; background: #f1f3f6; border: none; border-radius: 9px; padding: 0; }
.view3d .v3d-bar > .v3d-seg > button { border: none; border-radius: 8px; min-height: var(--ov-h); background: transparent; }
.view3d .v3d-bar > .v3d-seg > button.active { background: var(--accent); color: #fff; }
.view3d .v3d-bar > .ovf-gs { margin-left: 9px; position: relative; overflow: visible; }
.view3d .v3d-bar > .ovf-gs::before { content: ''; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 1px; background: var(--ov-line); pointer-events: none; }
.view3d .v3d-bar .ico { margin-right: 5px; color: var(--muted, #5f6b7a); }
.view3d .v3d-bar > button.active .ico, .view3d .v3d-bar > button[aria-pressed="true"] .ico { color: inherit; }
.view3d .v3d-bar > .ovf-more { font-weight: 600; }
.view3d .v3d-bar.more-r, .view3d .v3d-bar.more-l { -webkit-mask-image: none; mask-image: none; }
.ovf-head.ovf-purpose { color: var(--text, #1f2328); }
.ovf-head.ovf-grp { padding-top: 2px; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12px; }
/* Zeile 2: Kontext */
.view3d .walk-tools { top: var(--ov-row2) !important; right: 10px; padding: 4px; gap: 2px; }
.view3d .walk-tools button { border: none; background: transparent; box-shadow: none; border-radius: 8px; min-height: var(--ov-h); }
.view3d .walk-tools button.active { background: var(--accent); color: #fff; }
/* Materialpalette (früher als <style> in js/finish3d.js; CSP ohne 'unsafe-inline') */
.fin-btn:not(.in-bar){position:absolute;left:12px;top:56px;z-index:6;border:1px solid #ccd;background:#fff;border-radius:8px;padding:6px 10px;font:13px system-ui;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.fin-pal{position:absolute;left:12px;top:94px;z-index:6;width:250px;max-height:calc(100% - 110px);overflow:auto;background:rgba(255,255,255,.97);border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.2);padding:8px;font:12px system-ui}
.fin-pal h4{margin:6px 2px 4px;font-size:12px;color:#556}.fin-pal h5{margin:6px 2px 3px;font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}.fin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fin-sw{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;text-align:center;line-height:1.1}
.fin-sw i{display:block;width:46px;height:46px;border-radius:8px;border:1px solid rgba(0,0,0,.15)}.fin-sw span{font-size:10px;color:#333;overflow-wrap:anywhere;hyphens:auto}
.fin-tag{position:absolute;z-index:7;pointer-events:none;display:flex;align-items:center;gap:8px;background:rgba(20,22,26,.85);color:#fff;border-radius:10px;padding:6px 10px 6px 6px;font:12px system-ui;transform:translate(14px,14px)}
.fin-tag i{width:38px;height:38px;border-radius:7px;border:1px solid rgba(255,255,255,.4)}.fin-tag.bad{background:rgba(120,30,30,.85)}
.fin-pal label{display:flex;gap:6px;align-items:center;margin:6px 2px;font-size:12px}
.fin-tag[hidden],.fin-pal[hidden]{display:none}
.fin-note{margin:2px;color:#667}.fin-note-drag{margin:6px 2px;color:#667}
@media (max-width:600px){.fin-pal{width:calc(100% - 24px);max-height:45%;top:auto;bottom:12px}.fin-btn:not(.in-bar){top:auto;bottom:12px;left:auto;right:12px}}
/* Aufnahmemodus (früher <style> in js/capture3d.js): Bedienelemente aus dem Bild */
.fp-capture > :not(canvas) { visibility: hidden !important; }
#view3d .fin-btn:not(.in-bar) { top: var(--ov-row2) !important; left: 10px !important; right: auto !important; bottom: auto !important; min-height: var(--ov-h); padding: 0 12px;
  font: inherit; border: 1px solid var(--ov-line); border-radius: var(--ov-r); background: var(--ov-bg); box-shadow: var(--ov-shadow); z-index: 3; }
#view3d .fin-btn:not(.in-bar).active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Materialien steht in der Hauptleiste; die Palette öffnet unter Zeile 2 (dort stehen in der Begehung deren Werkzeuge) */
#view3d .fin-pal { top: calc(var(--ov-row2) + var(--ov-h) + 18px) !important; left: 10px !important; bottom: auto !important; max-height: calc(100% - var(--ov-row2) - var(--ov-h) - 80px) !important; border-radius: var(--ov-r); }
.view3d .v3d-sun, .view3d .tour-list { top: var(--ov-row2) !important; border-radius: var(--ov-r); }
.view3d .cam-tools { top: var(--ov-row2) !important; padding: 4px 8px; }
/* unten: Beschriftung links, Zeitleisten Mitte */
.view3d .v3d-label { left: 12px; bottom: 12px; }
.view3d .build-ui .build-row { border-radius: var(--ov-r); }
/* Puppenhaus/„Von oben“: eine Pille unten Mitte – Titel | Geschoss-Umschalter | Schalter | ✕ */
.view3d .doll-ui { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; align-items: center; gap: 2px; padding: 4px;
  max-width: calc(100% - 24px); flex-wrap: nowrap; white-space: nowrap;
  background-color: var(--ov-bg); border: 1px solid var(--ov-line); border-radius: var(--ov-r); box-shadow: var(--ov-shadow); }
.view3d .doll-ui .doll-title { padding: 0 8px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--muted, #5f6b7a); }
.view3d .doll-ui.compact .doll-title { display: none; }
.view3d .doll-ui button { border: none; background: transparent; box-shadow: none; border-radius: 8px; min-height: var(--ov-h); padding: 0 10px; color: var(--text, #1f2328); }
.view3d .doll-ui button:hover { background: var(--accent-soft, #eef2ff); }
.view3d .doll-ui button.on { background: var(--accent-soft, #eef2ff); color: var(--accent); font-weight: 600; }
.view3d .doll-ui .doll-floors { gap: 0; background: #f1f3f6; border-radius: 9px; }
.view3d .doll-ui .doll-floors button { min-width: 40px; padding: 0 8px; }
.view3d .doll-ui .doll-floors button.active { background: var(--accent); color: #fff; }
.view3d .doll-ui .doll-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--ov-line); }
.view3d .doll-ui .doll-sep[hidden], .view3d .doll-ui button[hidden] { display: none; }
.view3d .doll-ui .doll-close { min-width: var(--ov-h); padding: 0; font-size: 15px; color: var(--muted, #5f6b7a); }
/* 2D: Geschoss oben links, Darstellung oben Mitte, Zoom unten rechts – gleiche Pillen */
#modeSeg { padding: 3px; gap: 2px; overflow: visible; }
#modeSeg button { border: none !important; border-radius: 8px; min-height: var(--ov-h); }
#modeSeg button + button { border-left: none; }
.zoom-ctrl { padding: 4px; gap: 2px; }
.zoom-ctrl button { border: none; background: transparent; box-shadow: none; border-radius: 8px; min-width: var(--ov-h); min-height: var(--ov-h); }
.zoom-ctrl button:hover, #modeSeg button:hover { background: var(--accent-soft, #eef2ff); }
.floor-badge { border-radius: var(--ov-r); }
.phase-view { border-radius: var(--ov-r); min-height: var(--ov-h); padding: 0 28px 0 10px; }
/* Smartphone: Materialien links unter der Leiste (nicht über dem Joystick), Begehung rechts */
@media (max-width: 600px) { #view3d .fin-pal { width: calc(100% - 20px) !important; max-height: 45% !important; } }
@media (min-width: 901px) and (min-height: 501px) { .phase-view { top: calc(10px + var(--ov-h) + 18px); } }
@media (max-width: 900px), (max-height: 500px) { .phase-view { bottom: calc(12px + var(--ov-h) + 18px); } }
/* Kameras: gleiche helle Pille wie die übrigen Leisten */
.view3d .cam-tools { color: var(--text, #1f2328); }
.view3d .cam-tools button { background: transparent; color: var(--text, #1f2328); border: none; border-radius: 8px; min-height: var(--ov-h); }
.view3d .cam-tools button:hover { background: var(--accent-soft, #eef2ff); }
.view3d .cam-tools .cam-hint { color: var(--muted, #5f6b7a); }
/* Umbau-Filter: eigener Pfeil auch auf Touch-Geräten (die Pillen-Regel setzt den Hintergrund) */
@media (any-pointer: coarse) {
  select.phase-view { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b7a' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px; }
}
/* Geschossliste: je Zeile Kürzel, Name, Fläche, Knopf „3D“ (Würfel) und Menü „⋯“ (Reihenfolge, Umbenennen, Löschen) –
   eine Zeile, rechts bündig, auch für nicht gewählte Geschosse und geteilte Links */
.floor-list li, .floor-list li.active { flex-wrap: nowrap !important; position: relative; gap: 6px; }
.floor-list li .fname, .floor-list li.active .fname { flex: 1 1 auto !important; min-width: 0; }
.floor-list li .farea { white-space: nowrap; }
.floor-list .f3d { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: 2px; padding: 2px 9px; min-height: 28px; border: 1px solid var(--accent); border-radius: 999px;
  background: #fff; color: var(--accent); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; }
.floor-list .f3d:hover { background: var(--accent); color: #fff; }
.floor-list .f3d:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.floor-list .f3d .cube { width: 15px; height: 15px; }
.floor-list li .fbtn.fmore, .floor-list li.active .fbtn.fmore { display: inline-flex; visibility: visible; align-items: center; justify-content: center; flex: none; margin-left: 0 !important;
  min-width: 28px; min-height: 28px; border-radius: 8px; font-size: 16px; color: var(--muted); }
.floor-list li .fbtn.fmore:hover, .floor-list .fbtn.fmore[aria-expanded="true"] { background: var(--accent-soft, #eef2ff); color: var(--text); }
.floor-list .fmenu { position: absolute; right: 4px; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; gap: 2px; min-width: 170px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.floor-list .fmenu[hidden] { display: none; }
.floor-list .fmenu button { border: none; background: none; text-align: left; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.floor-list .fmenu button:hover:not(:disabled) { background: var(--accent-soft, #eef2ff); }
.floor-list .fmenu button.danger { color: var(--danger, #A84A00); }
body.readonly .floor-list .f3d { display: inline-flex !important; }
@media (any-pointer: coarse) {
  .floor-list .f3d, .floor-list li .fbtn.fmore, .floor-list li.active .fbtn.fmore { min-height: 44px; min-width: 44px; }
  .floor-list .f3d { padding: 0 12px; font-size: 14px; }
  .floor-list .fmenu button { min-height: 44px; font-size: 15px; }
}
/* Fensterflügel (js/sashes.js): Anzahl, Kacheln je Flügel mit Symbol, Öffnungsart und Band */
.sashed { margin: 4px 0 8px; }
.sash-count { grid-template-columns: repeat(4, 1fr); }
.sash-count button.soft { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.sash-tiles { display: grid; gap: 4px; margin: 6px 0; }
.sash-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; min-width: 0; font-size: 11px; line-height: 1.2; }
.sash-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sash-tile.fixed { color: var(--muted); }
.sash-mini { width: 32px; height: 42px; }
.sash-rows { display: grid; gap: 4px; }
.sash-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 6px; align-items: center; font-size: 12px; }
.sash-row select { min-width: 0; }
.sash-mull .pair { display: flex; gap: 4px; }
.sash-mull .pair input { min-width: 0; flex: 1; }
svg.elev .el-stulp { stroke: #555; stroke-width: 2; stroke-dasharray: 6 4; }
.sym-thin.sash-open, .sym-dash.sash-open { stroke-width: 0.7; }
@media (any-pointer: coarse) { .sash-tile { min-height: 64px; } .sash-row button, .sash-row select { min-height: 44px; } }
.views-pop button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.views-pop { overflow-y: auto; }
/* wenig Höhe (Smartphone quer): weitere Ansichten rechts neben der Windrose */
@media (max-height: 500px) {
  .views-pop { grid-template-columns: repeat(3, 56px) minmax(150px, auto); grid-template-areas: "nw n no x" "w c o x" "sw s so x"; }
  .views-pop .vw-extra { justify-content: center; }
}
/* Name und Fläche übereinander: der Name bekommt die Breite, „3D“ und „⋯“ bleiben rechts in derselben Zeile */
.floor-list .fmeta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.floor-list .fmeta .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floor-list .fmeta .farea { font-size: 11px; }
.floor-list .fmeta .farea { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (any-pointer: coarse) { .floor-list .f3d { padding: 0 9px; gap: 3px; } .floor-list li .short { min-width: 22px; } }

/* ---------- Gesperrte Module (js/gate.js): sichtbar mit kleinem Schloss, Klick öffnet das Angebotsblatt ---------- */
:root { --lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4.2a3 3 0 0 1 6 0V6' fill='none' stroke='black' stroke-width='1.6'/%3E%3Crect x='1' y='6' width='10' height='7.5' rx='1.6' fill='black'/%3E%3C/svg%3E"); }
.gate-badge { position: relative; }
.gate-badge:not(select)::after { content: ''; display: inline-block; width: 10px; height: 12px; margin-left: 6px; vertical-align: -1px; background: var(--muted, #5f6b7a);
  -webkit-mask: var(--lock-svg) center / contain no-repeat; mask: var(--lock-svg) center / contain no-repeat; flex: none; }
.gate-badge.active::after, .gate-badge[aria-pressed="true"]::after { background: currentColor; }
.gate-locked:not(select) { color: var(--muted, #5f6b7a); }
select.gate-locked { color: var(--muted, #5f6b7a); padding-left: 26px; background-image: var(--lock-svg); background-repeat: no-repeat; background-position: 9px center; background-size: 10px 12px; }
@media (any-pointer: coarse) {
  select.gate-locked { background-image: var(--lock-svg), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b7a' stroke-width='1.8'/%3E%3C/svg%3E");
    background-position: 9px center, right 10px center; background-size: 10px 12px, 12px 8px; }
}
.gate-dlg { max-width: min(520px, calc(100vw - 24px)); }
.gate-dlg h2 { display: flex; align-items: center; gap: 8px; }
.gate-ico { width: 14px; height: 16px; background: var(--accent); -webkit-mask: var(--lock-svg) center / contain no-repeat; mask: var(--lock-svg) center / contain no-repeat; }
.gate-shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); margin: 4px 0 10px; background: #f1f3f6; }
.gate-what { font-weight: 600; margin: 0 0 6px; }
.gate-points { margin: 0 0 10px; padding-left: 20px; }
.gate-points li { margin: 2px 0; }
.gate-price { font-size: 15px; color: var(--text, #1f2328) !important; }
.gate-actions { flex-wrap: wrap; }
@media (any-pointer: coarse) { .gate-actions button { min-height: 44px; } }

/* ---------- Rechtliche Hinweise (js/legal.js) ---------- */
.legal-note { color: var(--muted, #5f6b7a); font-size: 12px; line-height: 1.4; margin: 6px 0; }
details.legal-note { background: var(--info-bg, #EEF3F8); border-radius: 8px; padding: 6px 10px; }
details.legal-note > summary { cursor: pointer; font-weight: 600; color: var(--info-text, #3B5875); min-height: 24px; line-height: 24px; }   /* Zielgröße ≥ 24 px (WCAG 2.5.8) */
details.legal-note > p { margin: 6px 0 2px; }
.menu-legal .legal-links { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; font-size: 13px; }
.menu-legal .legal-links button.link { border: none; background: none; padding: 4px 2px; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; min-height: 0; }
@media (any-pointer: coarse) { .menu-legal .legal-links button.link { min-height: 44px; padding: 0 6px; } }
.legal-dlg { max-width: min(760px, calc(100vw - 24px)); }
.legal-dlg .legal-body { max-height: min(65vh, 640px); overflow-y: auto; font-size: 14px; line-height: 1.5; padding-right: 6px; }
.legal-dlg .legal-body h2, .legal-dlg .legal-body h3, .legal-dlg .legal-body h4 { margin: 14px 0 6px; font-size: 15px; }
.legal-dlg .legal-toggle { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border, #d7dbe0); border-radius: 8px; background: var(--panel, #f6f7f9); }
.legal-dlg .legal-toggle label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.legal-table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0; }
.legal-table td { border: 1px solid var(--line); padding: 4px 6px; vertical-align: top; }

/* ---------- Kontextmenü (Rechtsklick / langes Drücken): „Kommentar hier“ ---------- */
.ctx-menu { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 2px; min-width: 180px; padding: 6px; background: #fff;
  border: 1px solid var(--line, #d0d5dd); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.ctx-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: none; background: none; text-align: left; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.ctx-menu button:hover, .ctx-menu button:focus-visible { background: var(--accent-soft, #eef2ff); }
.ctx-menu kbd { font-size: 11px; color: var(--muted, #5f6b7a); }
@media (any-pointer: coarse) { .ctx-menu button { min-height: 44px; font-size: 15px; } }
.cm-empty kbd { font-size: 11px; }
#view3d .cm-place-hint { top: calc(var(--ov-row2, 60px) + 4px); }
@media (any-pointer: coarse) { #btnComments, #btnVersions { min-width: 44px; min-height: 44px; } }
/* sehr schmale Smartphones: Kommentare über das Menü („Kommentare …“), damit die Kopfleiste passt */
@media (max-width: 420px) { #btnComments { display: none !important; } }

/* Auswahlknöpfe als Chips (z. B. Raumart unter „Raum einrichten“) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.chip { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; line-height: 1.4; }
@media (any-pointer: coarse) { .chip { min-height: 44px; padding: 6px 14px; } }
/* Tastenkürzel-Übersicht in Abschnitten */
.keys h3 { grid-column: 1 / -1; margin: 10px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.keys h3:first-child { margin-top: 0; }
/* Leere Zustände (U.emptyState): einheitlich in allen Bereichen */
.empty-state { padding: 14px 4px; text-align: left; }
.empty-state .es-title { margin: 0 0 4px; font-weight: 600; color: var(--text); }
.empty-state .btns { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
@media (any-pointer: coarse) { .empty-state .btns button { min-height: 44px; } }

/* Befehlspalette (js/cmdk.js) */
dialog.ck-dlg { padding: 0; width: min(620px, calc(100vw - 24px)); margin: 12vh auto auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.25); background: var(--panel, #fff); color: var(--text); }
dialog.ck-dlg::backdrop { background: rgba(15,20,30,.35); }
.ck input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; padding: 16px 18px; font-size: 16px; outline: none; background: transparent; color: inherit; }
.ck input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }   /* sichtbarer Fokus (WCAG 2.4.7) */
.ck ul { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 55vh); overflow: auto; }
.ck li[role=option] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; min-height: 24px; }
.ck li.on { background: var(--accent-soft, #e8efff); }
.ck .ck-l { flex: 1; min-width: 0; }
.ck .ck-g { font-size: 11.5px; color: var(--muted); flex: none; }
.ck .ck-empty { padding: 14px 12px; color: var(--muted); }
.ck .ck-empty button { padding: 0 4px; border: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; }
.ck .ck-foot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); }
@media (any-pointer: coarse) { .ck li[role=option] { min-height: 44px; } }

/* Einführung (js/onboarding.js): kleine Karte unten links auf der Zeichenfläche, blockiert nichts */
.onboard { position: absolute; left: 12px; bottom: 16px; z-index: 30; width: min(320px, calc(100% - 24px)); background: var(--panel, #fff); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.onboard p { margin: 4px 0 10px; color: var(--muted); }
.onboard .ob-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.onboard .ob-n { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.onboard .ob-x { border: 0; background: none; font-size: 15px; padding: 4px 8px; color: var(--muted); cursor: pointer; }
.onboard .ob-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.onboard .ob-skip { margin-left: auto; }
.onboard .ob-dots { display: flex; gap: 5px; margin-top: 10px; }
.onboard .ob-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); }
.onboard .ob-dots i.on { background: var(--accent); }
.onboard .ob-dots i.ok { background: var(--accent); opacity: .45; }
@media (any-pointer: coarse) { .onboard button { min-height: 44px; } .onboard .ob-x { min-width: 44px; } }
/* schmal: oben unter dem Geschoss-Schild, damit die Leisten unten frei bleiben */
@media (max-width: 900px), (max-height: 500px) {
  .onboard { top: 52px; bottom: auto; left: 8px; width: min(340px, calc(100% - 72px)); padding: 8px 10px; font-size: 12.5px; }
  .onboard p { margin: 2px 0 6px; }
  .onboard .ob-dots { margin-top: 6px; }
  body:has(#view3d:not([hidden])) .onboard { top: 76px; }
}
/* Einführung sichtbar: Meldungen darüber statt darauf */
@media (min-width: 901px) and (min-height: 501px) { body:has(.onboard) #toast, body:has(.onboard) #toast[popover] { bottom: 250px; } }
/* „Was ist neu?“ (js/whatsnew.js) */
.news-dlg { max-width: 520px; }
.news-dlg h3 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.news-dlg ul { margin: 0 0 6px; padding-left: 18px; line-height: 1.5; font-size: 13px; }
.news-dlg li { margin: 3px 0; }

/* Kurzhilfe je Bereich (js/help.js) */
.help-q { flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel, #fff);
  color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; }
.help-q:hover, .help-q[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.panel h2.has-help { display: flex; align-items: center; gap: 6px; }
.panel h2.has-help > .acc-h { flex: 1; min-width: 0; }
.rtabs-row { display: flex; align-items: center; position: sticky; top: 0; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--line); }
.rtabs-row .rtabs { flex: 1; min-width: 0; position: static; border-bottom: 0; }
.rtabs-row .help-q { margin: 0 8px 0 4px; }
@media (any-pointer: coarse) { .help-q { width: 44px; height: 44px; font-size: 15px; border-color: transparent; } .rtabs-row .help-q { margin: 0; } }
.help-pop { position: fixed; z-index: 80; width: min(320px, calc(100vw - 16px)); background: var(--panel, #fff); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.help-pop p { margin: 4px 0 8px; }
.help-pop .hp-head { display: flex; align-items: center; justify-content: space-between; }
.help-pop .hp-x { border: 0; background: none; padding: 4px 6px; color: var(--muted); cursor: pointer; }
.help-pop .hp-more { display: flex; gap: 6px; flex-wrap: wrap; }
@media (any-pointer: coarse) { .help-pop button { min-height: 44px; } .help-pop .hp-x { min-width: 44px; } }
/* Smartphone: Rückgängig/Wiederholen in Daumenreichweite über dem Zoom (die Pfeile oben bleiben) */
.zoom-ctrl .zc-undo { display: none; }
@media (max-width: 600px) and (any-pointer: coarse), (max-height: 500px) and (any-pointer: coarse) {
  .zoom-ctrl .zc-undo { display: inline-flex; align-items: center; justify-content: center; }
  .zoom-ctrl .zc-undo:disabled { opacity: .35; }
  .zoom-ctrl [data-act="redo"] { margin-bottom: 8px; }
}
@media (max-height: 500px) and (any-pointer: coarse) { .zoom-ctrl [data-act="redo"] { margin: 0 8px 0 0; } }

/* Elektroplan (Planart „Elektro“): Legende unten links über der Planart-Auswahl */
.elec-legend { position: absolute; left: 12px; bottom: 76px; z-index: 6; max-height: 45%; overflow: auto; width: 230px; background: var(--panel, #fff);
  border: 1px solid var(--line); border-radius: var(--ov-r, 10px); box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 8px 10px; font-size: 12px; }
.elec-legend .el-head { display: flex; width: 100%; justify-content: space-between; border: 0; background: none; padding: 0 0 4px; font-weight: 700; font-size: 12px; color: var(--text); cursor: pointer; }
.elec-legend.closed ul { display: none; }
.elec-legend.closed .el-head { padding: 0; }
@media (any-pointer: coarse) { .elec-legend .el-head { min-height: 44px; align-items: center; } }
.elec-legend ul { list-style: none; margin: 0; padding: 0; }
.elec-legend li { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.elec-legend li svg { width: 26px; height: 20px; flex: none; }
.elec-legend li span:first-of-type { flex: 1; min-width: 0; }
.elec-legend .num { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .elec-legend { width: auto; right: 72px; max-height: 30%; bottom: 84px; } }

/* „Haus ausstatten“ (js/equip.js) */
.equip-dlg { max-width: 720px; }
.equip-dlg fieldset { border: 0; padding: 0; margin: 12px 0 0; }
.equip-dlg legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0; margin-bottom: 6px; }
.equip-dlg fieldset label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 400; color: var(--text); }
.equip-dlg fieldset input { width: 16px; height: 16px; min-width: 16px; margin: 0; flex: none; padding: 0; }
.equip-dlg .eq-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.equip-dlg .eq-levels legend { grid-column: 1 / -1; }
.equip-dlg .eq-level { display: grid !important; grid-template-columns: auto 1fr; align-content: start; gap: 2px 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.equip-dlg .eq-level .muted { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.4; }
.equip-dlg .eq-level.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft, #eef2ff); }
.equip-dlg .eq-level.locked b { color: var(--muted); }
.equip-dlg .eq-tier { grid-column: 2; justify-self: start; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 700; line-height: 16px; background: var(--info-bg, #EEF3F8); color: var(--info-text, #3B5875); }
.equip-dlg .eq-bus { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.equip-dlg .eq-bus legend { width: 100%; }
.equip-dlg .eq-trades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.equip-dlg .eq-trades legend { grid-column: 1 / -1; }
.equip-dlg .eq-lock { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--info-bg, #EEF3F8); color: var(--info-text, #3B5875); font-size: 12.5px; }
.equip-dlg h3 { margin: 16px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.equip-dlg .eq-prev { min-height: 120px; font-size: 12.5px; transition: opacity .15s; }
.equip-dlg .eq-prev.busy { opacity: .45; }
.equip-dlg .eq-sum { margin: 0 0 8px; }
.equip-dlg .eq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.equip-dlg table { width: 100%; border-collapse: collapse; }
.equip-dlg td { padding: 2px 0; border-bottom: 1px solid var(--line); }
.equip-dlg td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 8px; }
.equip-dlg .eq-counts { display: block; max-height: 220px; overflow: auto; }
.equip-dlg .eq-counts tbody { display: table; width: 100%; }
.equip-dlg .eq-extra td { color: var(--muted); font-style: italic; }
.equip-dlg tr.sum td { font-weight: 700; border-bottom: 0; }
.equip-dlg .eq-err { color: var(--err-text, #A84A00); }
@media (max-width: 600px) { .equip-dlg .eq-levels, .equip-dlg .eq-cols, .equip-dlg .eq-trades { grid-template-columns: 1fr; } }
@media (any-pointer: coarse) { .equip-dlg fieldset label { min-height: 44px; } }

/* Energie-Kennzahlen (Paket 33, js/energy-ui.js): Kurzfassung im Reiter Flächen, Klassen-Abzeichen, Dialog */
.en-table td:first-child { color: var(--muted); }
.en-warn { color: #9a6700; }
.en-cls { display: inline-block; min-width: 26px; padding: 1px 6px; border-radius: 4px; font-weight: 700; text-align: center; color: #fff; background: #777; margin-right: 4px; }
.en-cls-Ap, .en-cls-A { background: #1a7f37; } .en-cls-B { background: #4c9a2a; } .en-cls-C { background: #9bb21c; } .en-cls-D { background: #d9b100; color: #222; }
.en-cls-E { background: #e38a00; } .en-cls-F { background: #d9531e; } .en-cls-G, .en-cls-H { background: #b3261e; }
.energy-dlg .en-grid fieldset .row input { width: 5em; }
.energy-dlg .en-field { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.energy-dlg .en-grid fieldset .row input.own { background: #fff7dc; }
.energy-dlg .en-kpi td:first-child { max-width: 60%; }
.en-warnings { list-style: none; margin: 6px 0; padding: 0; }
.en-warnings li { padding: 3px 8px; border-left: 3px solid #d9b100; margin: 2px 0; font-size: 12px; background: #fffbea; }
.en-warnings li.sev-info { border-color: var(--line); background: #f6f8fa; }
/* Sanitärplan: Legende wie die Elektro-Legende, zweite Legende steht darüber, wenn beide sichtbar sind */
#sanLegend li svg { width: 30px; }
/* Haus einrichten (Paket 36, js/furnish-house.js) */
.fh-dlg { max-width: 760px; }
.fh-dlg fieldset { border: 0; padding: 0; margin: 12px 0 0; }
.fh-dlg legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0; margin-bottom: 6px; }
.fh-dlg fieldset label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 400; color: var(--text); }
.fh-dlg fieldset input { width: 16px; height: 16px; min-width: 16px; margin: 0; flex: none; padding: 0; }
.fh-dlg .fh-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fh-dlg .fh-styles legend { grid-column: 1 / -1; }
.fh-dlg .fh-style { display: grid !important; grid-template-columns: auto 1fr; align-content: start; gap: 2px 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.fh-dlg .fh-style .muted { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.4; }
.fh-dlg .fh-style.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft, #eef2ff); }
.fh-dlg .fh-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fh-dlg .fh-row legend { width: 100%; }
.fh-dlg h3 { margin: 16px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fh-dlg .fh-prev { min-height: 80px; max-height: 42vh; overflow: auto; font-size: 12.5px; transition: opacity .15s; }
.fh-dlg .fh-prev.busy { opacity: .45; }
.fh-dlg .fh-sum { margin: 0 0 8px; }
.fh-dlg .fh-floor { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.fh-dlg .fh-floor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.fh-dlg .fh-room { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 3px 0; }
.fh-dlg .fh-room .fh-note, .fh-dlg .fh-room .chips { grid-column: 1 / -1; }
.fh-dlg .fh-ask { background: var(--info-bg, #EEF3F8); border-radius: 8px; padding: 6px 8px; margin: 4px 0; }
@media (max-width: 600px) { .fh-dlg .fh-styles { grid-template-columns: 1fr; } .fh-dlg .fh-room { grid-template-columns: 1fr; } }
@media (any-pointer: coarse) { .fh-dlg fieldset label { min-height: 44px; } }

/* Begehung: Karte und Tastenhinweis liegen unten – Einführungskarte nach oben, Meldungen über den Hinweis */
body:has(#view3d:not([hidden]) .walk-ui:not([hidden])) .onboard { bottom: auto; top: 108px; }
body:has(#view3d:not([hidden]) .walk-ui:not([hidden])) #toast { bottom: calc(64px + var(--nav-h) + env(safe-area-inset-bottom, 0px)); }

/* Telefon hochkant: für den Projektnamen bleiben in der Kopfzeile zwei Buchstaben („Sa“) – er steht im Schild über dem Plan
   (.floor-badge); umbenennen über „Speichern unter“ bzw. die Projektliste */
@media (max-width: 480px) { .proj-name { display: none; } .tb-actions { margin-left: auto; } }