/* Reinschau 360 Aufmaß – Oberfläche. Familie Arbeitsplatz/Studio (DESIGN.md „Aufmaß“):
   Navy-Gehäuse rahmt das helle Zeichenblatt (Guckkasten), Orange nur für Standpunkte, Auswahl und Hauptaktion.
   Geist lokal, eine Familie. */

@font-face { font-family: "Geist"; src: url("assets/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #f6f7f8; --surface: #ffffff; --paper: #ffffff; --sage: #eef1f4; --sage-strong: #e2e7ec; --sage-soft: #f2f4f6;
  --ink: #12263a; --text: #2c3a4b; --muted: #566270;
  --line: rgba(18, 38, 58, 0.1); --line-strong: rgba(18, 38, 58, 0.18); --hover: rgba(18, 38, 58, 0.05);
  --accent: #c4490a; --accent-hover: #ad3f08; --accent-press: #963607; --accent-tint: #fbe9de; --on-tint: #963607; --accent-soft: rgba(196, 73, 10, 0.16); --on-accent: #ffffff;
  --brand-orange: #e8590c;
  --midnight: #0c1b2b; --navy: #12263a; --on-dark: #f4f6f8; --on-dark-muted: #b7c2ce; --on-dark-accent: #f07a3a; --dark-line: rgba(244, 246, 248, 0.12); --dark-hover: rgba(244, 246, 248, 0.08);
  --mark: #fff3c4; --mark-ink: #5c4500;
  --error: #b42318; --error-tint: #fbe5e2; --success: #1f6b45; --success-tint: #dcebdf;
  /* Zeichenblatt: Raster in Navy, kleines Raster kaum sichtbar */
  --grid-minor: rgba(18, 38, 58, 0.045); --grid-major: rgba(18, 38, 58, 0.09);
  --shadow-sm: 0 1px 2px rgba(18, 38, 58, 0.06), 0 4px 12px -4px rgba(18, 38, 58, 0.08);
  --shadow-lift: 0 2px 4px rgba(18, 38, 58, 0.05), 0 24px 40px -20px rgba(18, 38, 58, 0.22);
  --shadow-float: 0 8px 28px -12px rgba(18, 38, 58, 0.28);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-2xs: 0.72rem; --fs-xs: 0.78rem; --fs-sm: 0.84rem; --fs-base: 0.94rem; --fs-md: 1.06rem; --fs-lg: 1.25rem; --fs-xl: 1.6rem; --fs-2xl: 2rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-card: 20px; --r-window: 16px; --r-plate: 12px; --r-input: 12px; --r-pill: 999px;
  --top-h: 56px; --tools-w: 88px; --panel-w: 320px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1); --t-press: 160ms; --t-ui: 220ms;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; accent-color: var(--accent); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; caret-color: var(--accent); -webkit-tap-highlight-color: transparent; }
body[data-view="editor"], body[data-view="quote"], body[data-view="login"] { background: var(--midnight); }
body[data-view="editor"] { overflow: hidden; overscroll-behavior: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); line-height: 1.12; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-md); line-height: 1.3; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-tint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ed-top :focus-visible, .ed-tools :focus-visible, .topbar :focus-visible, .toast :focus-visible { outline-color: var(--on-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 14px; height: 14px; }
.sp { flex: 1; }
.row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.pad-y { padding: var(--s-5) 0; }
.boot { padding: var(--s-7); color: var(--muted); }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: var(--s-3) var(--s-4); border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s-3); }
.link { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; font: inherit; text-align: left; }
.todo { background: var(--mark); color: var(--mark-ink); padding: 0 3px; border-radius: 3px; }
.help { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-1); max-width: 75ch; }
.h-sm { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; letter-spacing: 0; margin-bottom: var(--s-1); }

/* ---------- Bausteine (wie Arbeitsplatz) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none; -webkit-user-select: none;
  transition: background-color var(--t-press) var(--ease-out), border-color var(--t-press) var(--ease-out), transform var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out), opacity var(--t-press) var(--ease-out); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:active:not(:disabled) { background: var(--accent-press); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, transparent); }
.btn.danger.solid { background: var(--error); border-color: var(--error); color: #fff; }
.btn.on-dark { background: rgba(244, 246, 248, 0.06); border-color: var(--dark-line); color: var(--on-dark); }
.btn.ghost.on-dark { background: transparent; border-color: transparent; color: var(--on-dark-muted); }
.btn.sm { height: 34px; padding: 0 var(--s-3); }
.btn.icon { width: 40px; padding: 0; }
.btn.sm.icon { width: 34px; }
.btn.busy { pointer-events: none; opacity: 0.7; }
.btn.busy .i { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink) 32%, transparent); }
  .btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn.ghost:hover:not(:disabled) { background: var(--hover); border-color: transparent; }
  .btn.on-dark:hover:not(:disabled), .btn.ghost.on-dark:hover:not(:disabled) { background: var(--dark-hover); border-color: var(--dark-line); color: var(--on-dark); }
  .btn.danger:hover:not(:disabled) { background: var(--error-tint); border-color: var(--error); }
  .link:hover { color: var(--accent-hover); }
}
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; flex: none; background: var(--sage); color: var(--muted); }
.pill.accent { background: var(--accent-tint); color: var(--on-tint); }
.pill.ok { background: var(--success-tint); color: var(--success); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--sage); min-width: 0; }
.seg.full { display: flex; }
.seg.full button { flex: 1; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 0; background: transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
.seg button[aria-checked="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--paper); color: var(--muted); font-size: var(--fs-sm); font-weight: 550; cursor: pointer; transition: background-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out), border-color var(--t-press) var(--ease-out); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .chip:hover:not([aria-pressed="true"]) { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 32%, transparent); } .seg button:hover:not([aria-checked="true"]) { color: var(--ink); } }

.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f > label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.f3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.f input:not([type="checkbox"]), .f textarea, .search input, .inp-u input, .q-item textarea, .q-item input {
  width: 100%; min-height: 44px; border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r-input); padding: 9px 12px; font-size: 1rem; color: var(--ink);
  transition: border-color var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
.f textarea, .q-item textarea { resize: vertical; line-height: 1.5; }
:is(.f input, .f textarea, .search input, .inp-u input, .q-item textarea, .q-item input):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
::placeholder { color: var(--muted); opacity: 1; }
.inp-u { position: relative; display: flex; align-items: center; }
.inp-u input { padding-right: 64px; font-variant-numeric: tabular-nums; }
.inp-u span { position: absolute; right: 12px; color: var(--muted); font-size: var(--fs-sm); pointer-events: none; }
.check { display: flex; align-items: flex-start; gap: var(--s-3); padding: 7px 0; cursor: pointer; font-size: var(--fs-sm); color: var(--ink); min-height: 34px; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.form-err { color: var(--error); font-size: var(--fs-sm); font-weight: 600; }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: 74px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-plate); box-shadow: var(--shadow-lift); padding: 4px; max-height: 280px; overflow: auto; }
.combo-list li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: var(--fs-sm); color: var(--ink); }
.combo-list li small { color: var(--muted); font-size: var(--fs-xs); }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--hover); }
.combo-list li.empty { color: var(--muted); cursor: default; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.facts div { display: grid; gap: 1px; }
.facts dt { font-size: var(--fs-xs); color: var(--muted); }
.facts dd { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.facts.col { grid-template-columns: 1fr; gap: var(--s-3); }

dialog { border: 0; border-radius: var(--r-card); padding: 0; background: var(--paper); color: var(--text); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-shadow: var(--shadow-lift); }
dialog:focus-visible { outline: none; }
dialog::backdrop { background: rgba(12, 27, 43, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog[open]::backdrop { animation: bd-in 260ms var(--ease-out); }
dialog[open] { animation: dlg-in var(--t-ui) var(--ease-out); }
@keyframes bd-in { from { opacity: 0; } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.dlg { padding: var(--s-5); display: grid; gap: var(--s-4); }
.dlg h2 { font-size: var(--fs-xl); letter-spacing: -0.03em; }
.dlg .lead { color: var(--muted); }
.dlg-foot { display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.menu { position: fixed; z-index: 90; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); max-height: 70vh; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); padding: 6px; animation: dlg-in 160ms var(--ease-out); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; background: none; border-radius: 8px; text-align: left; color: var(--ink); font-size: var(--fs-sm); font-weight: 550; cursor: pointer; }
.menu button .i { color: var(--muted); }
.menu button small { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.menu button.danger, .menu button.danger .i { color: var(--error); }
.menu button:hover, .menu button:focus-visible { background: var(--hover); outline: none; }
.toasts { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: var(--s-2); align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
body[data-view="editor"] .toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.toast { display: flex; align-items: center; gap: var(--s-3); background: var(--midnight); color: var(--on-dark); padding: 10px 16px; border-radius: 14px; font-size: var(--fs-sm); font-weight: 550; box-shadow: var(--shadow-float); pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.toast.in { opacity: 1; transform: none; }
.toast:has(button) { padding-right: 8px; }
.toast.bad { background: #9a1d13; color: #fff; }
.toast-a { border: 0; background: rgba(244, 246, 248, 0.14); color: var(--on-dark-accent); font-weight: 650; font-size: var(--fs-sm); height: 32px; padding: 0 12px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }

/* ---------- Anmeldung ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s-5) var(--s-4); }
.login-card { width: min(420px, 100%); padding: var(--s-6); display: grid; gap: var(--s-5); background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-lift); }
.login-logo { width: 190px; height: auto; }
.login-card h1 { font-size: var(--fs-xl); }
.login-card .sub { color: var(--muted); margin-top: 4px; }
.login-form { display: grid; gap: var(--s-4); }

/* ---------- Gehäuse Übersicht/Einstellungen ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-4); height: var(--top-h); padding: 0 clamp(16px, 3vw, 32px); padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; background: var(--midnight); color: var(--on-dark); }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--on-dark); }
.brand img { width: 120px; height: auto; }
.brand span { font-size: var(--fs-xs); font-weight: 650; color: var(--on-dark-muted); border: 1px solid var(--dark-line); border-radius: var(--r-pill); padding: 2px 10px; }
.topnav { display: flex; gap: 2px; margin-left: var(--s-4); }
.topnav a { display: flex; align-items: center; gap: var(--s-2); height: 38px; padding: 0 var(--s-3); border-radius: var(--r-plate); color: var(--on-dark-muted); text-decoration: none; font-weight: 550; font-size: var(--fs-sm); transition: background-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out); }
.topnav a[aria-current="page"] { background: rgba(244, 246, 248, 0.1); color: var(--on-dark); }
.topnav a[aria-current="page"] .i { color: var(--on-dark-accent); }
@media (hover: hover) and (pointer: fine) { .topnav a:hover:not([aria-current="page"]) { background: var(--dark-hover); color: var(--on-dark); } }
.me { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--on-dark); font-weight: 600; }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--on-dark); font-size: var(--fs-xs); font-weight: 700; outline: 1px solid var(--dark-line); }
.net { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--on-dark-muted); }
.net.off { color: var(--on-dark-accent); }
.net.busy .i { animation: spin 1.2s linear infinite; }
.page { max-width: 1240px; margin: 0 auto; padding: var(--s-6) clamp(16px, 3vw, 40px) var(--s-8); outline: none; }
.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
.list-head h1 + p { margin-top: 4px; }
.search { position: relative; width: min(280px, 100%); }
.search .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { padding-left: 38px; border-radius: var(--r-pill); min-height: 40px; }

/* Karten: echte Grundrisse als Vorschau */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--s-4); }
.card { position: relative; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: box-shadow var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:focus-visible { outline-offset: -3px; border-radius: var(--r-card); }
.card-plan { height: 190px; display: grid; place-items: center; background-color: var(--sage-soft); background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px); background-size: 16px 16px; border-bottom: 1px solid var(--line); }
.card-plan svg { width: 100%; height: 100%; }
.card-empty { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--fs-sm); }
.card-body { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: 4px; }
.card-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); justify-content: space-between; padding-right: 30px; }
.card-row h2 { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.card .muted { font-size: var(--fs-sm); }
.card-facts { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-2); }
.card-facts strong { margin-left: auto; color: var(--ink); font-size: var(--fs-md); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.card-more { position: absolute; right: 10px; top: 200px; }
@media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); transform: translateY(-2px); } }
.empty-state { max-width: 520px; margin: var(--s-7) auto; text-align: center; display: grid; justify-items: center; gap: var(--s-3); }
.empty-plan { width: 220px; height: auto; margin-bottom: var(--s-2); }
.empty-state p { color: var(--muted); }
.empty-state .btn { margin-top: var(--s-2); }

/* Einstellungen */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-5); display: grid; gap: var(--s-4); min-width: 0; }
.panel:first-child { grid-column: 1 / -1; }
.price-eq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-weight: 600; color: var(--ink); }
.inp-u.lg { width: 168px; }
.inp-u.lg input { font-size: var(--fs-lg); font-weight: 650; min-height: 52px; }
.price-ex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.price-ex div { display: grid; gap: 2px; padding: 0 var(--s-3); border-left: 1px solid var(--line); }
.price-ex div:first-child { border-left: 0; padding-left: 0; }
.price-ex span { font-size: var(--fs-xs); color: var(--muted); }
.price-ex strong { font-size: var(--fs-lg); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- Editor ---------- */
.ed { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--midnight); color: var(--on-dark); }
.ed-top { display: flex; align-items: center; gap: var(--s-2); height: var(--top-h); padding: 0 var(--s-3); padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; padding-left: max(var(--s-3), env(safe-area-inset-left, 0px)); padding-right: max(var(--s-3), env(safe-area-inset-right, 0px)); }
.ed-title { display: grid; gap: 0; min-width: 0; text-align: left; border: 0; background: none; color: var(--on-dark); padding: 4px 10px; border-radius: var(--r-plate); cursor: pointer; transition: background-color var(--t-press) var(--ease-out); }
.ed-title strong { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-title span { font-size: var(--fs-xs); color: var(--on-dark-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.ed-title { cursor: default; }
@media (hover: hover) and (pointer: fine) { button.ed-title:hover { background: var(--dark-hover); } }
.ed-save { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--on-dark-muted); margin-right: var(--s-2); white-space: nowrap; }
.ed-save .i { width: 14px; height: 14px; }
.ed-save.ok .i { color: #6fbf8e; }
.ed-save.busy .i { animation: spin 1.2s linear infinite; }
.ed-save.off, .ed-save.err { color: var(--on-dark-accent); }
.ed-hist { display: flex; gap: 2px; }
.ed-hist .btn:disabled { opacity: 0.3; }
.ed-body { display: grid; grid-template-columns: var(--tools-w) minmax(0, 1fr) var(--panel-w); gap: 8px; min-height: 0; padding: 0 8px 8px 0; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
.ed-tools { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px; padding-left: max(8px, env(safe-area-inset-left, 0px)); }
.tool { display: grid; justify-items: center; gap: 4px; padding: 10px 2px 8px; border: 0; border-radius: var(--r-plate); background: transparent; color: var(--on-dark-muted); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; min-height: 60px; transition: background-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out), transform var(--t-press) var(--ease-out); }
.tool .i { width: 24px; height: 24px; }
.tool:active { transform: scale(0.95); }
.tool[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.tool[aria-pressed="true"] .i { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .tool:hover:not([aria-pressed="true"]) { background: var(--dark-hover); color: var(--on-dark); } }

.ed-stage { position: relative; min-width: 0; min-height: 0; border-radius: var(--r-window); overflow: hidden; background-color: var(--paper);
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: var(--g2, 100px) var(--g2, 100px), var(--g2, 100px) var(--g2, 100px), var(--g1, 20px) var(--g1, 20px), var(--g1, 20px) var(--g1, 20px);
  background-position: var(--gx, 0) var(--gy, 0); color: var(--text); }
.ed-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; font-family: var(--font); }
.ed-svg text { pointer-events: none; }
.ed[data-tool="draw"] .ed-svg, .ed[data-tool="door"] .ed-svg, .ed[data-tool="cam"] .ed-svg { cursor: crosshair; }
.ed[data-tool="pan"] .ed-svg, .ed.panning .ed-svg { cursor: grab; }
.ed-svg:focus-visible { outline: none; }
.ed-stage:has(.ed-svg:focus-visible) { box-shadow: inset 0 0 0 3px var(--accent-soft); }
.ed-ghost { animation: ghost-out 420ms var(--ease-out) forwards; pointer-events: none; }
@keyframes ghost-out { from { opacity: 0.9; } to { opacity: 0; filter: blur(2px); } }
.ed-opts { position: absolute; left: 12px; top: 12px; display: flex; gap: var(--s-2); }
.ed-opts .seg { box-shadow: var(--shadow-sm); background: var(--sage); }
.ed-hint { position: absolute; left: 14px; bottom: 12px; max-width: min(460px, calc(100% - 28px)); font-size: var(--fs-xs); color: var(--muted); background: rgba(255, 255, 255, 0.88); padding: 6px 10px; border-radius: var(--r-pill); pointer-events: none; }
.ed-hint:empty { display: none; }
.ed-zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 4px; }
.ed-zoom .btn { box-shadow: var(--shadow-sm); }
.ed-quote { margin-left: var(--s-1); }

/* Seitenleiste */
.ed-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--text); border-radius: var(--r-window); scrollbar-width: thin; }
.pn-sec { padding: var(--s-4) var(--s-4); display: grid; gap: var(--s-3); border-bottom: 1px solid var(--line); }
.pn-sec:last-child { border-bottom: 0; }
.pn-sel { background: var(--paper); animation: sel-in var(--t-ui) var(--ease-out); }
@keyframes sel-in { from { opacity: 0; transform: translateY(-4px); } }
.pn-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: -4px -6px -4px 0; }
.pn-h h2 { display: flex; align-items: center; gap: var(--s-2); }
.cam-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-orange); color: #fff; font-size: var(--fs-xs); font-weight: 700; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--accent-soft); }
.pn-edge { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-plate); background: var(--accent-tint); }
.pn-edge .help { color: var(--on-tint); }
.pn-edge .btn { justify-self: start; }
.steps { display: grid; gap: 2px; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: var(--s-2); align-items: start; padding: 6px 0; }
.steps li > span:nth-child(2) { display: grid; }
.steps strong { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.steps small { font-size: var(--fs-xs); color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; }
.steps .opt { font-style: normal; font-weight: 500; color: var(--muted); font-size: var(--fs-xs); margin-left: 4px; }
.steps .st-ic { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; margin-top: 1px; }
.steps li.done .st-ic { background: var(--success); border-color: var(--success); color: #fff; }
.steps .st-ic .i { width: 13px; height: 13px; stroke-width: 2.6; }
.steps .link { font-size: var(--fs-xs); margin-top: 2px; }
.pn-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.pn-total span { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.pn-total strong { font-size: var(--fs-xl); color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pn-price .help { margin-top: -8px; }
.pn-go { width: 100%; height: 48px; font-size: var(--fs-base); }
.pn-go.appear { animation: go-in 520ms var(--ease-arrive); }
@keyframes go-in { 0% { opacity: 0; transform: translateY(10px) scale(0.96); } 60% { box-shadow: 0 0 0 6px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.room-list { display: grid; gap: 6px; }
.room-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
.room-list input { width: 100%; min-height: 40px; border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r-input); padding: 7px 10px; font-size: 1rem; font-weight: 600; color: var(--ink); transition: border-color var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out); }
.room-list input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.room-list li.on input { border-color: var(--accent); background: var(--accent-tint); }
.room-list span { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-miss { margin: var(--s-4) var(--s-5) 0; padding: 10px 12px; border-radius: var(--r-plate); background: var(--mark); color: var(--mark-ink); font-size: var(--fs-sm); }
.pn-wait { font-size: var(--fs-sm); color: var(--muted); background: var(--sage); border-radius: var(--r-plate); padding: 10px 12px; }
.pn-more { display: none; }

/* ---------- Angebot ---------- */
.q-page { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--midnight); }
.q-top { color: var(--on-dark); }
.lbl-s { display: none; }
.q-body { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 8px; min-height: 0; padding: 0 8px 8px; }
.q-form { overflow-y: auto; background: var(--bg); border-radius: var(--r-window); color: var(--text); }
.q-sec { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); border-bottom: 1px solid var(--line); }
.q-calc { font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.q-calc strong { color: var(--ink); }
.q-sum { margin-left: auto; font-size: var(--fs-xl); font-weight: 650; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.q-items { display: grid; gap: var(--s-2); }
.q-item { display: grid; grid-template-columns: minmax(0, 1fr) 64px 112px 34px; gap: 6px; align-items: start; }
.q-item textarea { min-height: 44px; field-sizing: content; }
.q-item .inp-u input { padding-right: 26px; }
.q-item .btn { margin-top: 5px; }
.q-ap { padding: var(--s-4) var(--s-5) var(--s-5); }
.q-prev-wrap { overflow: auto; border-radius: var(--r-window); background: var(--sage-strong); padding: var(--s-5); }
.q-prev { width: 210mm; margin: 0 auto; transform-origin: top left; }
.q-prev > .doc { transform: scale(var(--sc, 1)); transform-origin: top left; box-shadow: var(--shadow-lift); margin-bottom: 0; }
.q-prev { width: calc(210mm * var(--sc, 1)); }
.q-prev .doc + .doc { margin-top: calc(24px / var(--sc, 1)); }

/* A4-Dokument (wie Arbeitsplatz) */
.doc { position: relative; width: 210mm; min-height: 297mm; padding: 16mm 20mm 42mm 25mm; color: #1d2733; font: 10pt/1.45 var(--font); background: #fff; }
.doc p { margin: 0 0 3.5mm; }
.doc-top { display: flex; justify-content: space-between; align-items: flex-start; height: 27mm; }
.doc-logo { width: 52mm; height: auto; }
.doc-from { text-align: right; font-size: 8.5pt; color: #566270; line-height: 1.4; }
.doc-addr { margin-top: 10mm; min-height: 40mm; width: 85mm; }
.doc-sender { font-size: 7pt; color: #566270; text-decoration: underline; text-underline-offset: 2px; margin-bottom: 3mm !important; }
.doc-meta { position: absolute; right: 20mm; top: 50mm; display: grid; gap: 1mm; font-size: 9pt; min-width: 60mm; }
.doc-meta div { display: flex; justify-content: space-between; gap: 6mm; }
.doc-meta dt { color: #566270; }
.doc-meta dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-title { font-size: 15pt; color: #12263a; letter-spacing: -0.01em; margin: 6mm 0 5mm; }
.doc-items { width: 100%; border-collapse: collapse; margin: 4mm 0 2mm; font-size: 9.5pt; }
.doc-items th { text-align: left; font-weight: 600; color: #566270; border-bottom: 1px solid #12263a; padding: 2mm 1.5mm; font-size: 8.5pt; }
.doc-items td { padding: 2.2mm 1.5mm; border-bottom: 1px solid #e2e7ec; vertical-align: top; }
.doc-items .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-items td:first-child { width: 10mm; color: #566270; }
.doc-sum { margin: 2mm 0 5mm auto; border-collapse: collapse; min-width: 70mm; font-size: 10pt; }
.doc-sum td { padding: 1.2mm 1.5mm; text-align: right; font-variant-numeric: tabular-nums; }
.doc-sum td:first-child { text-align: left; color: #566270; }
.doc-sum .tot td { font-weight: 700; color: #12263a; border-top: 1.5px solid #12263a; font-size: 11pt; padding-top: 2mm; }
.doc-small { font-size: 9pt; color: #566270; }
.doc-foot { position: absolute; left: 25mm; right: 20mm; bottom: 12mm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; padding-top: 3mm; border-top: 1px solid #e2e7ec; font-size: 7.5pt; color: #566270; line-height: 1.45; }
.doc-plan .doc-title { margin-top: 4mm; }
.doc-fig { margin: 4mm 0 2mm; padding: 4mm; border: 1px solid #e2e7ec; border-radius: 3mm; display: grid; place-items: center; }
.doc-fig svg { width: 100%; height: auto; max-height: 150mm; }
.doc-rooms td:first-child { width: auto; color: #1d2733; }
.doc-rooms .tot td { font-weight: 700; color: #12263a; border-bottom: 0; border-top: 1.5px solid #12263a; }
.print-root { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; overflow: visible !important; }
  body > *:not(#print) { display: none !important; }
  .print-root { display: block !important; }
  .print-root .doc { min-height: 296mm; break-after: page; }
  .print-root .doc:last-child { break-after: auto; }
  .todo { background: none; color: #b42318; }
}

/* ---------- Tablet hochkant: schmalere Seitenleiste ---------- */
@media (max-width: 1100px) { :root { --panel-w: 288px; } .hide-m { display: none; } }

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  :root { --top-h: 52px; }
  .topnav span, .me-n, .net span, .brand span { display: none; }
  .list-head .sp { display: none; }
  .lbl-l { display: none; }
  .topnav { margin-left: 0; }
  .brand img { width: 96px; }
  .page { padding-top: var(--s-5); }
  .list-head { align-items: stretch; }
  .list-head > div:first-child { flex: 1 1 100%; }
  .search { flex: 1; width: auto; }
  .set-grid { grid-template-columns: 1fr; }
  .price-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) 0; }
  .price-ex div:nth-child(3) { border-left: 0; padding-left: 0; }
  .f3 { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2); }
  .f2 { grid-template-columns: 1fr; }

  .ed-top { gap: 2px; padding-left: max(4px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .ed-save span { display: none; }
  .ed-save { margin-right: 0; padding: 0 6px; }
  .ed-quote span { display: none; }
  .ed-quote { width: 40px; padding: 0; }
  .ed-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 0; padding: 0 6px 0; position: relative; }
  .ed-stage { grid-row: 1; }
  .ed-tools { grid-row: 2; flex-direction: row; justify-content: space-around; gap: 2px; padding: 6px 6px max(6px, env(safe-area-inset-bottom, 0px)); }
  .tool { flex: 1; min-height: 56px; max-width: 88px; }
  .ed-stage { border-radius: var(--r-window); }
  .ed-panel { position: absolute; left: 14px; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-height: 52%; border-radius: var(--r-window); box-shadow: var(--shadow-float); border: 1px solid var(--line); z-index: 5; }
  .ed-panel .pn-sec:not(.pn-sel):not(.pn-price) { display: none; }
  .ed.sheet-open .ed-panel .pn-sec { display: grid; }
  .ed.has-sel:not(.sheet-open) .ed-panel .pn-price { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .ed.has-sel:not(.sheet-open) .pn-price .help, .ed.has-sel:not(.sheet-open) .pn-wait, .ed.has-sel:not(.sheet-open) .pn-go { display: none; }
  .pn-price { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-3); }
  .pn-price .pn-total { grid-column: 1 / -1; }
  .pn-price .help { margin-top: -6px; grid-column: 1 / -1; }
  .pn-go, .pn-wait { grid-column: 1 / -1; }
  .pn-more { display: inline; font-size: var(--fs-xs); grid-column: 1 / -1; justify-self: start; }
  .ed-zoom { top: 60px; right: 10px; }
  .ed-zoom [data-z="in"], .ed-zoom [data-z="out"] { display: none; }
  .ed-opts { left: 10px; top: 10px; right: 10px; }
  .ed-hint { top: 58px; bottom: auto; left: 10px; max-width: calc(100% - 70px); }
  body[data-view="editor"] .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .ed:not(.has-sel) .ed-hint { display: none; }

  .q-body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; padding: 0 6px 6px; }
  .q-form { overflow: visible; }
  .q-prev-wrap { padding: var(--s-3); overflow: hidden; }
  .q-top .hide-s { display: none; }
  .q-top .lbl-s { display: inline; }
  .q-item { grid-template-columns: minmax(0, 1fr) 56px 96px 34px; }
}
@media (max-width: 420px) {
  .q-top .btn.primary { padding: 0 var(--s-3); }
  .ed-hist .btn { width: 36px; }
}

/* Touch: Tap-Ziele mindestens 44 px */
@media (pointer: coarse) {
  .btn.sm { height: 44px; }
  .btn.sm.icon { width: 44px; }
  .chip { height: 38px; }
  .check { min-height: 44px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}