/* Roomwerk – Gestaltung nach der Apple-Web-Vorgabe: System-Schrift, Glas, Bento, Container Queries, Foldable */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(0, 0, 0, 0.08);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.1);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --on-accent: #ffffff;
  --logo-ink: #ffffff;
  --ok: #248a3d;
  --ok-soft: rgba(52, 199, 89, 0.16);
  --warn: #b25000;
  --warn-soft: rgba(255, 149, 0, 0.16);
  --danger: #d70015;
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 12px 32px -14px rgba(0, 0, 0, 0.18);
  --r-l: 24px;
  --r-m: 16px;
  --r-s: 12px;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  --hinge: 28px;
  --blueprint: #2f6fdf;
  --warm: #c27a35;
  --spec: rgba(255, 255, 255, 0.75);
  color-scheme: light;
}
/* Fortschritt der Maßbestätigung (0 = Bauplan, 1 = Wohnraum); animierbar dank @property */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e;
    --glass: rgba(28, 28, 30, 0.72); --glass-line: rgba(255, 255, 255, 0.12);
    --text: #f5f5f7; --muted: #98989d; --line: rgba(255, 255, 255, 0.14);
    --accent: #2997ff; --accent-hover: #47a6ff; --accent-soft: rgba(41, 151, 255, 0.16);
    --ok: #30d158; --ok-soft: rgba(48, 209, 88, 0.18); --warn: #ff9f0a; --warn-soft: rgba(255, 159, 10, 0.18);
    --danger: #ff453a; --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    --blueprint: #5b8ff0; --warm: #e0a060; --spec: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e;
  --glass: rgba(28, 28, 30, 0.72); --glass-line: rgba(255, 255, 255, 0.12);
  --text: #f5f5f7; --muted: #98989d; --line: rgba(255, 255, 255, 0.14);
  --accent: #2997ff; --accent-hover: #47a6ff; --accent-soft: rgba(41, 151, 255, 0.16);
  --ok: #30d158; --ok-soft: rgba(48, 209, 88, 0.18); --warn: #ff9f0a; --warn-soft: rgba(255, 159, 10, 0.18);
  --danger: #ff453a; --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --blueprint: #5b8ff0; --warm: #e0a060; --spec: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

/* Echte Foldables: Breite der Falz als Spaltenabstand */
@media (horizontal-viewport-segments: 2) {
  :root { --hinge: max(28px, calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + 24px)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:root[data-font="lg"] { font-size: 150%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.47 var(--font);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code { font: 0.92em ui-monospace, "SF Mono", Menlo, monospace; background: var(--surface-2); padding: 0.05em 0.35em; border-radius: 6px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.022em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--muted); }

/* ---------- Rahmen & Simulator ---------- */
.frame { container: frame / inline-size; min-height: 100dvh; position: relative; transition: max-width 0.5s var(--spring); }
:root[data-sim="compact"] .frame, :root[data-sim="fold"] .frame {
  margin-inline: auto;
  outline: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.35);
  background: var(--bg);
}
:root[data-sim="compact"] .frame { max-width: 390px; }
:root[data-sim="fold"] .frame { max-width: 800px; }
:root[data-sim="fold"] .frame::after {
  content: ""; position: absolute; inset-block: 0; left: 50%; width: 2px; translate: -1px 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 59, 48, 0.55) 0 10px, transparent 10px 18px);
  pointer-events: none; z-index: 50;
}
:root[data-sim] body { background: color-mix(in srgb, var(--bg) 70%, #888); }

.app {
  --pad: clamp(1rem, 4cqi, 2.5rem);
  --aura: color-mix(in oklab, var(--warm) calc(var(--p) * 100%), var(--blueprint));
  background:
    radial-gradient(60rem 26rem at 12% -8%, color-mix(in oklab, var(--aura) 14%, transparent), transparent 70%),
    radial-gradient(46rem 24rem at 100% 0%, color-mix(in oklab, var(--aura) 9%, transparent), transparent 70%),
    var(--bg);
  transition: --p 0.45s var(--spring);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

/* ---------- Glas ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-line);
}

/* ---------- Kopfleiste & Schritte ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem;
  padding: 0.6rem var(--pad);
  padding-top: max(0.6rem, env(safe-area-inset-top));
  border-width: 0 0 1px;
}
.topbar-end { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 1.06rem; color: var(--text); text-decoration: none; letter-spacing: -0.02em;
}
.logo { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  font-size: 0.8rem; color: var(--muted); padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--surface-2);
}
.status .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--muted); }
.status.on .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.status.off .dot { background: var(--warn); }

.steps { display: flex; gap: 0.25rem; min-width: 0; }
.steps-top { margin-inline: auto; overflow-x: auto; scrollbar-width: none; padding: 0.15rem; }
.step {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  font: inherit; font-size: 0.86rem; color: var(--muted);
  background: none; border: 0; border-radius: 999px; padding: 0.42rem 0.8rem; cursor: pointer;
  transition: background 0.25s var(--spring), color 0.25s, transform 0.25s var(--spring);
}
.step:hover:not([aria-disabled="true"]) { background: var(--surface-2); color: var(--text); }
.step:active:not([aria-disabled="true"]) { transform: scale(0.96); }
.step[aria-current="step"] { background: var(--text); color: var(--bg); }
.step[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }
.step-num {
  display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  font-size: 0.72rem; font-weight: 600; border: 1px solid currentColor;
}
.step.done .step-num { background: var(--ok); border-color: var(--ok); color: #fff; }
.soon { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.35rem; border-radius: 6px; background: var(--surface-2); }

.steps-bottom {
  display: none; position: sticky; bottom: 0; z-index: 20;
  justify-content: space-around; padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
  border-width: 1px 0 0;
}

/* ---------- Grundbausteine ---------- */
main { padding: clamp(1.25rem, 4cqi, 3rem) var(--pad) 3rem; width: 100%; max-width: 1240px; margin-inline: auto; }
.card { background: var(--surface); border-radius: var(--r-l); box-shadow: inset 0 1px 0 var(--spec), var(--shadow); }   /* Lichtkante oben */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2;
  min-height: 2.75rem; padding: 0.7rem 1.3rem; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform 0.3s var(--spring), background 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary.done-morph { background: var(--ok); animation: pop 0.14s var(--spring); }   /* spezifischer als .btn.primary */
@keyframes pop { 50% { transform: scale(1.06); } }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 6px 18px -6px var(--accent); }
.btn.ghost { background: var(--surface-2); color: var(--text); }
.btn.ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-2) 80%, var(--text)); }
.btn.link { background: none; color: var(--accent); padding-inline: 0.4rem; min-height: 2.25rem; }
.btn.link:hover { text-decoration: underline; }
.btn.danger { background: none; color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }

.disclosure summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.92rem; padding: 0.35rem 0;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: "›"; display: inline-block; font-size: 1.2em; transition: rotate 0.3s var(--spring); }
.disclosure[open] summary::before { rotate: 90deg; }
.disclosure summary:hover { color: var(--text); }

.field { display: grid; gap: 0.35rem; }
.field > span { font-size: 0.82rem; color: var(--muted); }
textarea, input, select {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-s); padding: 0.65rem 0.8rem; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
textarea { resize: vertical; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
input[aria-invalid="true"] { border-color: var(--danger); }

.note { font-size: 0.88rem; padding: 0.7rem 0.9rem; border-radius: var(--r-s); }
.note.warn { background: var(--warn-soft); color: var(--text); }
.note.ok { background: var(--ok-soft); }
.badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 999px; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.info { background: var(--accent-soft); color: var(--accent); }

.spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- 1 · Grundriss ---------- */
.view-plan { display: grid; gap: clamp(1.25rem, 3cqi, 2rem); }
.hero { text-align: center; display: grid; gap: 0.8rem; padding-top: clamp(0.5rem, 3cqi, 2rem); }
.hero h1 { font-size: clamp(2rem, 6.5cqi, 3.6rem); font-weight: 700; line-height: 1.06; }
.lead { font-size: clamp(1.05rem, 2.2cqi, 1.3rem); color: var(--muted); max-width: 34em; margin-inline: auto; }

.drop { width: 100%; max-width: 760px; margin-inline: auto; padding: 0.5rem; transition: box-shadow 0.3s var(--spring), transform 0.3s var(--spring); }
.drop.dragging { box-shadow: 0 0 0 3px var(--accent), var(--shadow); transform: scale(1.01); }
.drop-target {
  width: 100%; display: grid; place-items: center; gap: 0.5rem; text-align: center;
  padding: clamp(2rem, 7cqi, 3.75rem) 1.25rem; cursor: pointer;
  font: inherit; color: var(--text); background: none;
  border: 2px dashed var(--line); border-radius: calc(var(--r-l) - 6px);
  transition: border-color 0.2s, background 0.2s;
}
.drop-target:hover { border-color: var(--accent); background: var(--accent-soft); }
.drop-target svg { width: 3rem; height: 3rem; color: var(--accent); }
.drop-title { font-size: 1.2rem; font-weight: 600; }
.drop-sub { font-size: 0.9rem; color: var(--muted); }
.drop.has-plan .drop-target { display: none; }

.drop-loaded { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; padding: 0.75rem; align-items: start; }
.plan-thumb { margin: 0; display: grid; gap: 0.5rem; min-width: 0; }
.plan-thumb img { width: 100%; max-height: 22rem; object-fit: contain; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); }
.plan-thumb figcaption { font-size: 0.82rem; color: var(--muted); overflow-wrap: anywhere; }
.drop-actions { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.busy { display: flex; gap: 0.6rem; align-items: center; font-size: 0.9rem; color: var(--muted); }

.alt { text-align: center; margin-top: -0.5rem; }

.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem; }
.tile { background: var(--surface); border-radius: var(--r-l); padding: 1.4rem; display: grid; gap: 0.4rem; align-content: start; box-shadow: var(--shadow); }
.tile .num { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 0.9rem; background: var(--accent-soft); color: var(--accent); margin-bottom: 0.4rem; }
.tile h3 { font-size: 1.05rem; }
.tile p { color: var(--muted); font-size: 0.92rem; }

/* ---------- 2 · Maße ---------- */
.workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.plan-panel { padding: 0.75rem; position: sticky; top: 4.75rem; }
#planSvg { display: block; width: 100%; height: auto; max-height: calc(100dvh - 7rem); border-radius: var(--r-m); background: #fff; }
.ask { display: grid; gap: 1rem; min-width: 0; }
.progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 0.5s var(--spring); }

.question { padding: clamp(1.25rem, 3cqi, 1.75rem); display: grid; gap: 1rem; min-width: 0; }
.eyebrow { font-size: 0.82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.question h2 { font-size: clamp(1.35rem, 3.4cqi, 1.75rem); font-weight: 650; overflow-wrap: anywhere; }
.question .help { color: var(--muted); font-size: 0.92rem; }
.measure-input { position: relative; }
.measure-input input { font-size: clamp(1.6rem, 5cqi, 2.2rem); font-weight: 600; padding: 0.6rem 3.5rem 0.6rem 1rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.measure-input .unit { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; color: var(--muted); font-size: 1.1rem; pointer-events: none; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.75rem; }
.fields .field input { font-variant-numeric: tabular-nums; }
.error { color: var(--danger); font-size: 0.88rem; min-height: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.actions .spacer { flex: 1; }
.notes { padding: 0.9rem 1.25rem; }
.notes ul { margin: 0.5rem 0 0.3rem; padding-left: 1.1rem; display: grid; gap: 0.45rem; font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; }
.count { font-size: 0.75rem; background: var(--surface-2); padding: 0.05rem 0.45rem; border-radius: 999px; }

.summary-plan { width: 100%; max-height: 18rem; display: block; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: 0.6rem; margin: 0; }
.stats div { background: var(--surface-2); border-radius: var(--r-m); padding: 0.75rem 0.9rem; min-width: 0; }
.stats dt { font-size: 0.78rem; color: var(--muted); }
.stats dd { margin: 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Plan-Overlay */
.room-fill { fill: var(--accent); fill-opacity: 0.06; }
/* Noch nicht bestätigt = Bauplanlinie (blau gestrichelt), bestätigt = feste, warme Wand */
.edge { stroke: var(--blueprint); stroke-opacity: 0.8; stroke-linecap: round; stroke-dasharray: var(--dash); transition: stroke 0.3s var(--spring), stroke-width 0.3s var(--spring); }
.edge.ok { stroke: var(--warm); stroke-opacity: 1; stroke-dasharray: none; }
.edge.open { stroke: #8e8e93; stroke-opacity: 0.8; stroke-dasharray: var(--dash); }
.edge.current { stroke: var(--accent); stroke-opacity: 1; stroke-dasharray: none; }
.edge.fresh { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.3s var(--spring) forwards; }   /* zieht sich in Wandrichtung durch */
@keyframes draw { to { stroke-dashoffset: 0; } }
.edge-hit { stroke: transparent; cursor: pointer; }
.badge-dot { fill: #fff; stroke: var(--accent); }
.badge-dot.ok { fill: var(--warm); stroke: var(--warm); }
.badge-dot.current { fill: var(--accent); }
.badge-text { fill: var(--accent); font-weight: 700; text-anchor: middle; dominant-baseline: central; font-family: var(--font); pointer-events: none; }
.badge-text.ok, .badge-text.current { fill: #fff; }
.start-dot { fill: #ff9500; stroke: #fff; }
.opening-mark { stroke: #ff9500; stroke-linecap: butt; }
.opening-mark.current { stroke: #ff3b30; }

/* ---------- 3 · Raum ---------- */
.roomstage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 1.25rem; align-items: start; }
.stage { position: relative; overflow: hidden; height: min(72dvh, 46rem); min-height: 22rem; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
.canvas-host, .canvas-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.canvas-host canvas { touch-action: none; }
.toolbar {
  position: absolute; top: 0.9rem; left: 50%; translate: -50% 0;
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.35rem; align-items: center; padding: 0.3rem; border-radius: 22px; max-width: calc(100% - 1.5rem);
}
.toolbar .chip, .toolbar .segmented button { white-space: nowrap; }
/* Schmale Bühne: Werkzeuge hinter einem Symbol oben links, eingeblendet als Paneel daneben */
.stage { container: stage / inline-size; }
.stage > .tools-toggle { display: none; position: absolute; top: 0.75rem; left: 0.75rem; z-index: 3; width: 2.4rem; height: 2.4rem; color: var(--text); border: 1px solid var(--glass-line); }
.stage[data-tools-open] .tools-toggle { color: var(--accent); }
@container stage (max-width: 34rem) {
  .stage > .tools-toggle { display: grid; }
  .stage > .toolbar { display: none; left: 3.6rem; top: 0.75rem; translate: none; flex-wrap: wrap; justify-content: flex-start; max-width: calc(100% - 4.35rem); z-index: 3; }
  .stage[data-tools-open] > .toolbar { display: flex; animation: sheet-in 0.3s var(--spring); }
  .stage-hint { font-size: 0.72rem; }
}
.segmented { display: flex; background: var(--surface-2); border-radius: 999px; padding: 0.15rem; }
.segmented button, .chip {
  font: inherit; font-size: 0.86rem; border: 0; background: none; color: var(--text);
  padding: 0.4rem 0.85rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background 0.25s var(--spring), transform 0.25s var(--spring);
}
.segmented button[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.segmented button:active, .chip:active { transform: scale(0.96); }
.stage-hint { position: absolute; bottom: 0.8rem; left: 1rem; right: 1rem; text-align: center; font-size: 0.78rem; color: var(--muted); pointer-events: none; }

.facts { padding: 1.4rem; display: grid; gap: 1rem; min-width: 0; }
.facts h2 { font-size: 1.3rem; overflow-wrap: anywhere; }
.facts .walls { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.9rem; }
.facts .walls li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.facts .walls li span:first-child { color: var(--muted); }
.facts .actions .btn { flex: 1 1 auto; }

/* ---------- 4 · Möbel ---------- */
.btn.small { min-height: 2.1rem; padding: 0.4rem 0.85rem; font-size: 0.86rem; }
.icon-btn {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); font: inherit; font-size: 1rem; cursor: pointer;
  transition: transform 0.25s var(--spring), background 0.2s;
}
.icon-btn:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--text)); }
.icon-btn:active { transform: scale(0.92); }
.selbar {
  position: absolute; left: 50%; bottom: 2.6rem; translate: -50% 0; z-index: 2;
  display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.4rem 0.35rem 1rem; border-radius: 999px;
  width: max-content; max-width: calc(100% - 1.5rem); animation: rise 0.4s var(--spring);   /* volle Breite nutzen, nicht nur die Hälfte ab left: 50 % */
}
.selbar strong { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin-right: 0.3rem; }
.selbar .btn { white-space: nowrap; }
/* Knöpfe bleiben zusammen – wird es eng, rutschen sie gemeinsam unter den Namen */
.sel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
/* Steuerkreuz: rund, vier Pfeile; am Touchscreen größer. Halten ohne Textauswahl oder Lupe */
.dpad {
  --dp: 1.3rem; flex: none; display: grid; grid-template: repeat(3, var(--dp)) / repeat(3, var(--dp)); border-radius: 50%;
  background: var(--surface-2); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.dpad button {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text);
  cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.15s var(--spring);
}
.dpad button:hover { background: var(--line); }
.dpad button:active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); transform: scale(0.92); }
.dpad [data-nudge="up"] { grid-area: 1 / 2; } .dpad [data-nudge="left"] { grid-area: 2 / 1; }
.dpad [data-nudge="right"] { grid-area: 2 / 3; } .dpad [data-nudge="down"] { grid-area: 3 / 2; }
.selbar:has(.dpad) { border-radius: 24px; }
/* Rechts neben dem Kreuz: Drehen, Verdoppeln, Links – brechen dort um, nicht unter das Kreuz */
.sel-tools:has(.dpad) { flex-wrap: nowrap; }
.sel-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; }
@media (pointer: coarse) { .dpad { --dp: 2.1rem; } .dpad svg { width: 18px; height: 18px; } }
.library { align-content: start; }
.capture-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.capture-actions .btn { flex: 1 1 auto; }
.camera-only { display: none; }
@media (pointer: coarse) {
  .camera-only { display: inline-flex; }
  .pick-photo { background: var(--surface-2); color: var(--text); }
}
.help { color: var(--muted); font-size: 0.9rem; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.3rem 0; }
.demo-chips .chip { background: var(--surface-2); }
.empty { color: var(--muted); font-size: 0.92rem; padding: 1rem; border: 1.5px dashed var(--line); border-radius: var(--r-m); text-align: center; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.item {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.4rem 0.75rem; align-items: center;
  padding: 0.6rem; border-radius: var(--r-m); background: var(--surface-2); border: 1.5px solid transparent;
  transition: border-color 0.25s var(--spring);
}
.item.selected { border-color: var(--accent); }
/* Ausgewähltes Stück: Pfeil oben rechts klappt Knöpfe und Schnell-Einstellungen weg (nur Foto, Name, Maße bleiben) */
.item:has(> .item-fold) { position: relative; }
.item:has(> .item-fold) .item-text { padding-right: 2rem; }
.item:has(> .item-fold) > img, .item:has(> .item-fold) .item-text strong { cursor: pointer; }
.item-fold {
  position: absolute; top: 0.45rem; right: 0.45rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: background 0.2s, rotate 0.25s var(--spring);
}
.item-fold:hover { background: var(--line); color: var(--text); }
.item-fold[aria-expanded="true"] { rotate: 180deg; }
.item.folded .item-actions, .item.folded .quick { display: none; }
.item img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--r-s); background: var(--line); }
.item-text { display: grid; gap: 0.15rem; min-width: 0; font-size: 0.84rem; color: var(--muted); }
.item-text strong { color: var(--text); font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.item-text .badge { justify-self: start; }
.item-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.item-actions .icon-btn { margin-left: auto; width: 2rem; height: 2rem; font-size: 0.8rem; color: var(--muted); background: transparent; }
.checks:empty { display: none; }
.checks h3 { font-size: 0.95rem; margin-bottom: 0.4rem; overflow-wrap: anywhere; }
.checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.check { display: flex; gap: 0.55rem; align-items: baseline; font-size: 0.88rem; padding: 0.5rem 0.7rem; border-radius: var(--r-s); overflow-wrap: anywhere; }
.check span { font-weight: 700; flex-shrink: 0; }
.check.ok { background: var(--ok-soft); } .check.ok span { color: var(--ok); }
.check.warn { background: var(--warn-soft); } .check.warn span { color: var(--warn); }
.check.bad { background: color-mix(in srgb, var(--danger) 13%, transparent); } .check.bad span { color: var(--danger); }

/* Erfassungsfenster: groß in der Mitte, auf dem Handy als Bottom-Sheet */
.sheet {
  width: min(62rem, calc(100cqi - 2rem)); max-width: none; max-height: min(52rem, calc(100dvh - 2rem));
  padding: 0; border: 1px solid var(--glass-line); border-radius: var(--r-l);
  background: var(--surface); color: var(--text); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.45);
  overflow: hidden; display: none; flex-direction: column;
}
.sheet[open] { display: flex; animation: sheet-in 0.5s var(--spring); }
.sheet::backdrop { background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes sheet-in { from { opacity: 0; translate: 0 24px; scale: 0.98; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.5rem; }
.sheet-head h2 { font-size: 1.15rem; }
.sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.25rem; padding: 0.5rem 1.25rem 1.25rem; overflow: auto; min-height: 0; }
.cap-visual { display: grid; grid-template-rows: auto minmax(14rem, 1fr); gap: 0.75rem; min-width: 0; }
.cap-photo { position: relative; margin: 0; border-radius: var(--r-m); overflow: hidden; background: var(--surface-2); justify-self: start; max-width: 100%; }
.cap-photo img { display: block; max-width: 100%; max-height: 15rem; }
/* Auswahl im Foto: ein Rahmen je erkanntem Möbel, antippen wählt; eigener Rahmen per Ziehen */
.sheet.picking .cap-preview { display: none; }
.sheet.picking .cap-visual { grid-template-rows: auto; align-content: start; }
.sheet.picking .cap-photo { align-self: start; }
.sheet.picking .sheet-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.sheet.picking .cap-photo img { max-height: 26rem; }
.cap-photo.drawing { cursor: crosshair; touch-action: none; -webkit-user-select: none; user-select: none; }
.cap-photo.drawing .cap-frame { pointer-events: none; }
.cap-frame {
  position: absolute; padding: 0; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 10px; background: rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.cap-frame > span {
  position: absolute; left: 4px; top: 4px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0.12rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: #1d1d1f; background: rgba(255, 255, 255, 0.9);
}
.cap-frame.on { border: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cap-frame.on > span { color: #fff; background: var(--accent); }
.cap-frame.temp { pointer-events: none; }
.cap-frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.extra .icon-btn { margin-left: auto; }
.cap-box { position: absolute; border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18); pointer-events: none; transition: all 0.5s var(--spring); }
.cap-preview { position: relative; min-height: 14rem; border-radius: var(--r-m); background: linear-gradient(180deg, var(--surface-2), var(--surface)); overflow: hidden; }
.cap-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.cap-ask { display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
.cap-ask .question { padding: 0; box-shadow: none; }
.cap-notes { margin: 0; padding-left: 1.1rem; font-size: 0.86rem; color: var(--muted); display: grid; gap: 0.3rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-radio, .choice label { position: relative; }
.chip-radio input, .choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.chip-radio span {
  display: inline-block; padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--surface-2); font-size: 0.9rem; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.25s var(--spring);
}
.chip-radio span:hover { background: color-mix(in srgb, var(--surface-2) 85%, var(--text)); }
.chip-radio input:checked + span { background: var(--accent); color: var(--on-accent); }
.chip-radio input:focus-visible + span, .choice input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-size: 0.82rem; color: var(--muted); padding: 0; margin-bottom: 0.35rem; }
.choice .segmented { display: inline-flex; flex-wrap: wrap; }
.choice .segmented label span { display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.88rem; cursor: pointer; }
.choice .segmented input:checked + span { background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); }
.surface { display: grid; gap: 0.5rem; }
.surface-row { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: 0.5rem; align-items: center; }
.surface input[type="color"] { padding: 0.2rem; height: 2.75rem; cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.swatch {
  width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--surface); background: var(--c); cursor: pointer;
  box-shadow: 0 0 0 1px var(--line); transition: transform 0.25s var(--spring), box-shadow 0.2s;
}
.swatch:hover { transform: scale(1.08); }
.swatch.on { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- 5 · Stil und 6 · Export ---------- */
[data-switch-host] { min-width: 0; }            /* sonst drückt ein langer Variantenname die Spalte breit */
.variant-switch { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.variant-switch button { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.style-card { display: grid; gap: 0.6rem; padding: 1rem; border-radius: var(--r-m); background: var(--surface-2); }
.insp { display: flex; gap: 0.4rem; }
.insp img { height: 4.5rem; flex: 0 1 auto; min-width: 0; object-fit: cover; border-radius: var(--r-s); }
.mood, .palette { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.swatch-box { display: inline-block; width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.item .swatch-box { width: 3.5rem; height: 3.5rem; border-radius: var(--r-s); }
.style-sec { display: grid; gap: 0.55rem; }
.style-sec h3 { font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; }
.color-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.color-row > :first-child { flex: 1; min-width: 0; }
.color-row input[type="color"] { width: 3rem; height: 2.25rem; padding: 0.15rem; flex-shrink: 0; cursor: pointer; }
.reason { font-size: 0.82rem; color: var(--muted); }
.switch { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; cursor: pointer; }
.switch input {
  appearance: none; width: 2.6rem; height: 1.55rem; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; cursor: pointer;
  transition: background 0.25s var(--spring); padding: 0; border: 0;
}
.switch input::after {
  content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: translate 0.3s var(--spring);
}
.switch input:checked { background: var(--ok); }
.switch input:checked::after { translate: 1.05rem 0; }
.switch small, .opt small { display: block; font-size: 0.78rem; color: var(--muted); }
/* Was aus dem Inspirationsbild übernommen wird */
.opts { display: grid; gap: 0.4rem; }
.opt { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.8rem; border-radius: var(--r-s); background: var(--surface-2); cursor: pointer; font-size: 0.92rem; }
.opt input { width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; accent-color: var(--accent); flex-shrink: 0; }
.opt:has(input:checked) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.replace-list .segmented { grid-column: 1 / -1; justify-self: end; }
/* Gardinen und Vorhänge je Fenster */
.tx-row { display: grid; gap: 0.45rem; padding: 0.7rem 0.8rem; border-radius: var(--r-s); background: var(--surface-2); }
.tx-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin: 0; font-size: 0.9rem; }
.tx-title span { font-size: 0.8rem; color: var(--muted); }
.tx-range, .tx-mount { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; }
.tx-range span, .tx-mount span { min-width: 5.5rem; color: var(--muted); }
.tx-range input { flex: 1; min-width: 0; padding: 0; background: none; accent-color: var(--accent); }
.tx-mount select { flex: 1; min-width: 0; }
.badge.suggest { background: color-mix(in srgb, #af52de 15%, transparent); color: #8e3fb8; }
:root[data-theme="dark"] .badge.suggest { color: #d68bff; }
.cams { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.cam { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem 0.4rem 0.75rem; border-radius: var(--r-s); background: var(--surface-2); }
.cam-check { display: flex; align-items: center; gap: 0.55rem; flex: 1; min-width: 0; font-size: 0.9rem; cursor: pointer; }
.cam-check span { overflow-wrap: anywhere; }
.cam-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex-shrink: 0; }
#exPrompt { font: 0.8rem/1.45 ui-monospace, "SF Mono", Menlo, monospace; margin: 0.5rem 0; }

/* ---------- Fotomodus ---------- */
.photobar {
  position: absolute; left: 50%; bottom: 0.8rem; translate: -50% 0; z-index: 3;
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.45rem 0.5rem 0.55rem; border-radius: 22px; width: min(27rem, calc(100% - 1.5rem)); animation: rise 0.3s var(--spring);
}
.pb-top { display: flex; align-items: center; gap: 0.35rem; padding-left: 0.3rem; min-width: 0; }
.pb-top > .btn, .pb-top > .chip { white-space: nowrap; flex-shrink: 0; padding-inline: 0.45rem; }
.pb-top .photo-state { min-width: 4.5rem; }
.pb-top .photo-state { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-top .icon-btn { margin-left: auto; flex-shrink: 0; }
.pb-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pb-actions .btn { flex: 1 1 auto; }
.photobar.saving .ring-fill { stroke: var(--accent); }
/* Schmale Leiste (Handy hochkant): oben Ring, Zustand und ✕, darunter „Noch feiner“ und Sonne */
.photobar { container: pbar / inline-size; }
@container pbar (max-width: 24rem) {
  .pb-top { flex-wrap: wrap; row-gap: 0.25rem; }
  .pb-top .photo-state { order: 1; flex: 1 1 calc(100% - 5rem); }
  .pb-top .icon-btn { order: 2; }
  .pb-top > .btn, .pb-top > .chip { order: 3; }
}
.photo-state { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.stage.photo-on .stage-hint, .stage.photo-on .selbar { display: none; }
.photo-toggle[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ---------- Licht nach Tageszeit ---------- */
.daybar {
  position: absolute; left: 50%; bottom: 0.8rem; translate: -50% 0; z-index: 4;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.3rem 0.7rem;
  padding: 0.5rem 0.5rem 0.5rem 0.8rem; border-radius: 22px; width: min(30rem, calc(100% - 1.5rem));
  animation: rise 0.3s var(--spring);
}
.stage.photo-on .daybar { bottom: 5.2rem; }
.sun-arc { width: 5.5rem; height: auto; overflow: visible; }
.sun-arc .arc { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sun-arc .horizon { stroke: var(--muted); stroke-width: 1; opacity: 0.5; }
.sun-dot { fill: #ffb547; filter: drop-shadow(0 0 4px rgba(255, 181, 71, 0.9)); transition: cx 0.2s var(--spring), cy 0.2s var(--spring), fill 0.3s; }
.daybar.night { background: color-mix(in srgb, #10172a 78%, transparent); color: #e8ecf6; }
.daybar.night .sun-dot { fill: #c9d6f2; filter: drop-shadow(0 0 4px rgba(201, 214, 242, 0.8)); }
.day-text { display: grid; min-width: 0; font-size: 0.82rem; line-height: 1.3; }
.day-text strong { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.day-text span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daybar.night .day-text span { color: #b8c2d8; }
.daybar input[type="range"] { grid-column: 1 / -1; grid-row: 2; padding: 0; background: none; accent-color: var(--warm); height: 1.6rem; }
.daybar [data-day-now] { grid-column: 3; }
.daybar [data-day-close] { grid-column: 4; }

/* ---------- Ausrichten: Wo ist Norden? ---------- */
.sun-toggle[aria-pressed="true"] { background: color-mix(in srgb, #ffb547 28%, transparent); color: var(--text); }
.sunpanel {
  position: absolute; left: 0.75rem; top: 4.2rem; z-index: 5; width: min(21rem, calc(100% - 1.5rem)); max-height: calc(100% - 4.2rem - 6.8rem); overflow: auto;   /* zwischen Werkzeugleiste und Tageslicht-Leiste */
  display: grid; gap: 0.7rem; padding: 0.85rem 1rem 1rem; border-radius: var(--r-l); animation: sheet-in 0.3s var(--spring);
}
.sunpanel.below { position: static; width: auto; max-height: none; margin-top: 0.75rem; background: var(--surface); }
.sp-head { display: flex; align-items: center; justify-content: space-between; }
.sp-head h3 { font-size: 1.02rem; }
.sp-sec { display: grid; gap: 0.4rem; }
.sp-north { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0.8rem; }
.sp-north-text { display: grid; gap: 0.3rem; font-size: 0.9rem; }
.sp-north-text .help { margin: 0; font-size: 0.8rem; }
.sp-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.sp-row input:not([type="date"]) { flex: 1 1 9rem; min-width: 0; }
.sp-days input[type="date"] { width: auto; flex: 1 1 9rem; }
.sp-windows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.86rem; }
.sp-windows li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; }
.sp-windows li > span:first-child { flex: 1 1 100%; }
.sp-windows .muted, .sunpanel .muted { color: var(--muted); font-size: 0.82rem; }
.dial { width: 6.5rem; height: 6.5rem; touch-action: none; cursor: grab; border-radius: 50%; }
.dial:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.dial-ring { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.dial-n { fill: #ff3b30; } .dial-s { fill: var(--muted); }
.dial-hub { fill: var(--text); }
.dial-l { font-size: 11px; font-weight: 700; fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
.dial-l.n { fill: #ff3b30; }
.north-value { font-size: 0.9rem; font-variant-numeric: tabular-nums; margin: 0; }
.phone-box { display: grid; gap: 0.4rem; padding: 0.7rem 0.8rem; border-radius: var(--r-m); background: var(--accent-soft); }
.phone-box p { font-size: 0.88rem; }
.heading strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.heading span { color: var(--muted); font-size: 0.85rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 100;
  max-width: min(92vw, 30rem); padding: 0.8rem 1.1rem; border-radius: var(--r-m);
  background: var(--text); color: var(--bg); font-size: 0.92rem; box-shadow: var(--shadow);
  animation: rise 0.45s var(--spring);
}
.toast.error { background: var(--danger); color: #fff; }
@keyframes rise { from { opacity: 0; translate: -50% 12px; } }

/* ---------- Kompakt (Handy, Duo zugeklappt) ---------- */
@container frame (max-width: 44rem) {
  .steps-top, .status-text { display: none; }
  .status { padding: 0.45rem; }
  .steps-bottom { display: flex; }
  .steps-bottom .step { flex-direction: column; gap: 0.15rem; padding: 0.35rem 0.4rem; font-size: 0.68rem; flex: 1 1 0; min-width: 0; border-radius: var(--r-s); }
  .steps-bottom .step-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .steps-bottom .soon { display: none; }
  .steps-bottom .step[aria-current="step"] { background: var(--accent-soft); color: var(--accent); }
  .drop-loaded { grid-template-columns: 1fr; }
  .workspace, .roomstage { grid-template-columns: 1fr; }
  .plan-panel { position: static; }
  #planSvg { max-height: 42dvh; }
  .restart-body { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  .page-grid { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { height: 58dvh; }
  .actions .btn { flex: 1 1 auto; }
  .actions .spacer { display: none; }
  .toast { bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .sheet { width: 100cqi; max-height: 92dvh; margin: auto auto 0; border-radius: var(--r-l) var(--r-l) 0 0; }
  .sheet-body { grid-template-columns: 1fr; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  .cap-visual { grid-template-columns: 1fr 1fr; grid-template-rows: 11rem; }
  /* Ganzes Foto im eigenen Seitenverhältnis – sonst passt der Rahmen um das Möbel nicht mehr */
  .cap-photo { justify-self: center; align-self: center; }
  .cap-photo img { max-height: 11rem; }
  .sheet.picking .cap-visual { grid-template-columns: 1fr; }
  .sheet.picking .sheet-body { grid-template-columns: 1fr; }
  .sheet.picking .cap-photo img { max-height: 18rem; }
  .cap-preview { min-height: 11rem; }
  .selbar { bottom: 2.4rem; }
}

/* ---------- Raum im Geschoss wählen, Ecken setzen (roompick.js) ---------- */
.view-plan.picking > :not(.room-pick) { display: none; }
.room-pick { grid-column: 1 / -1; }
#pickSvg { display: block; width: 100%; height: auto; max-height: calc(100dvh - 7rem); border-radius: var(--r-m); background: #fff; -webkit-user-select: none; user-select: none; }
#pickSvg.editing { touch-action: none; cursor: crosshair; }
@container frame (max-width: 44rem) { #pickSvg { max-height: 42dvh; } #pickSvg.editing { max-height: 56dvh; } }   /* Handy: Plan und Knöpfe gleichzeitig sichtbar */
.pick-room { fill: var(--blueprint); fill-opacity: 0.08; stroke: var(--blueprint); stroke-opacity: 0.55; stroke-linejoin: round; cursor: pointer;
  transition: fill-opacity 0.2s var(--spring), stroke-width 0.2s var(--spring), fill 0.2s; }
.pick-room:hover { fill-opacity: 0.16; stroke-opacity: 0.85; }
.pick-room.on { fill: var(--accent); fill-opacity: 0.24; stroke: var(--accent); stroke-opacity: 1; animation: pick-pop 0.32s var(--spring); }
@keyframes pick-pop { from { fill-opacity: 0.42; } }
.pick-name { text-anchor: middle; dominant-baseline: central; font-weight: 650; fill: #1d1d1f; stroke: rgba(255, 255, 255, 0.92); paint-order: stroke; stroke-linejoin: round; pointer-events: none; }
.pick-name.on { fill: var(--accent); }
.pick-chips .chip { background: var(--surface-2); }
.pick-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.9rem; margin: 0; }
.measure-alt { padding-inline: 0.25rem; }
.edit-fill { fill: var(--accent); fill-opacity: 0.12; pointer-events: none; }
.edit-edge { stroke: var(--accent); stroke-linecap: round; pointer-events: none; }
.edit-edge.closing { stroke-dasharray: var(--dash); stroke-opacity: 0.7; }
.edit-corner { cursor: grab; }
.edit-corner:active { cursor: grabbing; }
.edit-corner circle:not(.hit) { fill: #fff; stroke: var(--accent); transition: r 0.18s var(--spring); }
.edit-corner.first circle:not(.hit) { stroke: var(--warm); }
.edit-corner.on circle:not(.hit) { fill: var(--accent); stroke: #fff; }
.edit-corner text { text-anchor: middle; font-weight: 700; fill: var(--accent); stroke: rgba(255, 255, 255, 0.92); paint-order: stroke; pointer-events: none; }
.edit-plus { cursor: copy; }
.edit-plus circle:not(.hit) { fill: #fff; stroke: var(--accent); opacity: 0.85; }
.edit-plus path { stroke: var(--accent); stroke-linecap: round; fill: none; }
.edit-plus:hover circle:not(.hit) { opacity: 1; }
.hit { fill: transparent; stroke: none; }

/* Maße schätzen: Quelle wählen */
.scale-opts { display: grid; gap: 0.5rem; }
.scale-opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; width: 100%; text-align: left;
  padding: 0.75rem 0.85rem; border: 0; border-radius: var(--r-s); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.92rem; }
button.scale-opt { cursor: pointer; transition: transform 0.18s var(--spring), box-shadow 0.18s; }
button.scale-opt:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
button.scale-opt:active { transform: scale(0.985); }
.scale-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.scale-opt > span:first-child { min-width: 0; flex: 1 1 14rem; }
.scale-opt small { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
.scale-ratio .chip { background: var(--surface); }
.scale-opt:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }

/* Fenster-Karte: Knöpfe für die ganze Wand; Leiste nach Entfernen oder Antippen einer Wand */
.op-wall { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.op-snack {
  position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 110;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; max-width: min(calc(100vw - 2rem), 34rem);
  padding: 0.55rem 0.55rem 0.55rem 1rem; border-radius: var(--r-m); box-shadow: var(--shadow); font-size: 0.9rem;
  animation: rise 0.35s var(--spring);
}
.op-snack > span { flex: 1 1 10rem; min-width: 0; }
.op-snack .icon-btn { width: 2rem; height: 2rem; }

/* PDF-Seitenwahl */
.page-sheet { width: min(46rem, calc(100cqi - 2rem)); }
.page-help { padding: 0 1.25rem; margin: 0; }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: 0.75rem; padding: 0.9rem 1.25rem 1.25rem; overflow: auto; }
.page-btn { display: grid; gap: 0.4rem; justify-items: center; padding: 0.5rem; border: 0; border-radius: var(--r-m); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer;
  transition: transform 0.18s var(--spring), box-shadow 0.18s; }
.page-btn:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.page-btn:active { transform: scale(0.97); }
.page-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.page-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.3; border-radius: var(--r-s); background: #fff; overflow: hidden; }
.page-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Neu anfangen */
.restart-sheet { width: min(32rem, calc(100cqi - 2rem)); }
.restart-body { display: grid; gap: 0.9rem; padding: 0.5rem 1.25rem 1.25rem; overflow: auto; }
.restart-body .help { margin: 0; }
.btn.primary.danger-fill { background: var(--danger); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn.primary.danger-fill:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); box-shadow: 0 6px 18px -6px var(--danger); }

/* ---------- Foldable aufgeklappt: Inhalte links und rechts der Falz ---------- */
:root[data-fold] .topbar { grid-template-columns: 1fr 1fr; column-gap: var(--hinge); }
:root[data-fold] .view-plan { grid-template-columns: 1fr 1fr; column-gap: var(--hinge); align-items: center; }
:root[data-fold] .hero { text-align: left; }
:root[data-fold] .lead { margin-inline: 0; }
:root[data-fold] .drop, :root[data-fold] .alt { grid-column: 2; }
:root[data-fold] .alt { margin-top: -1rem; }
:root[data-fold] .bento { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--hinge); }
:root[data-fold] .drop-loaded { grid-template-columns: 1fr; }
:root[data-fold] .workspace, :root[data-fold] .roomstage { grid-template-columns: 1fr 1fr; column-gap: var(--hinge); }
:root[data-fold] main { padding-inline: var(--pad); }
:root[data-fold] .sheet-body { grid-template-columns: 1fr 1fr; column-gap: var(--hinge); }
:root[data-fold] .steps-top .step:not([aria-current]) .step-label, :root[data-fold] .steps-top .soon { display: none; }
:root[data-fold] .steps-top { margin-inline: 0; }

/* ---------- Bewegung ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: var(--spring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Dev-Test-Pill ---------- */
.devpill {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 200;
  border-radius: 22px; padding: 0.35rem; font-size: 0.75rem; box-shadow: var(--shadow); max-width: calc(100vw - 2rem);
}
/* Schmal: oben rechts unter der Kopfleiste, damit die Hauptknöpfe unten frei bleiben */
@media (max-width: 44rem) { .devpill { bottom: auto; top: calc(4rem + env(safe-area-inset-top)); } }
:root[data-sim="compact"] .devpill { bottom: auto; top: calc(4rem + env(safe-area-inset-top)); }
.devpill-toggle {
  font: 600 0.72rem/1 var(--font); letter-spacing: 0.06em; border: 0; border-radius: 999px; cursor: pointer;
  padding: 0.5rem 0.7rem; background: var(--text); color: var(--bg);
}
.devpill-body { display: grid; gap: 0.35rem; padding: 0.45rem 0.35rem 0.2rem; }
.devpill[data-collapsed] .devpill-body { display: none; }
.devpill[data-collapsed]:not(:hover):not(:focus-within) { opacity: 0.55; transition: opacity 0.3s; }
.devpill-row { display: flex; align-items: center; gap: 0.4rem; }
.devpill-row > span { width: 4.4rem; color: var(--muted); flex-shrink: 0; }
.devpill-row .segmented button { font-size: 0.72rem; padding: 0.3rem 0.55rem; }
.devpill-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.devpill-head small { color: var(--muted); }

/* ---------- Beta-Konto ---------- */
.account-btn {
  flex-shrink: 0; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--accent); background: var(--accent-soft);
  border: 0; border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer; transition: transform 0.2s var(--spring);
}
.account-btn:active { transform: scale(0.96); }
.account-btn.signed { color: var(--ok); background: var(--ok-soft); }
.account-btn.locked { color: color-mix(in srgb, var(--warn) 80%, var(--text)); background: var(--warn-soft); }
.account-sheet { width: min(27rem, calc(100cqi - 2rem)); }
.acc-body { display: grid; gap: 0.9rem; padding: 0.5rem 1.25rem 1.25rem; overflow: auto; }
.acc-body form { display: grid; gap: 0.75rem; }
.acc-body p { margin: 0; }
.acc-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem; }
.acc-facts { display: grid; gap: 0.5rem; margin: 0; }
.acc-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.8rem; border-radius: var(--r-s); background: var(--surface-2); font-size: 0.9rem; }
.acc-facts dt { color: var(--muted); } .acc-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.beta-note { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--line, rgba(127,127,127,.2)); padding-top: 0.8rem; }
.beta-note a, .site-foot a { color: var(--accent); }
.beta-pill { margin: 0.75rem auto 0; max-width: 34rem; font-size: 0.86rem; color: var(--muted); text-wrap: balance; }
.beta-pill span { display: inline-block; margin-right: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 0.15rem 0.5rem; border-radius: 999px; }
.site-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: center; padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); font-size: 0.8rem; color: var(--muted); }
@container frame (max-width: 44rem) { .account-sheet { width: 100cqi; } }

/* Einmaliger Hinweis zur Speicherung (kein Einwilligungs-Banner) */
.storage-hint {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 40;
  width: min(40rem, calc(100% - 2rem)); display: flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 0.9rem 0.75rem 1.1rem; border-radius: var(--r-l); font-size: 0.86rem;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45); animation: sheet-in 0.5s var(--spring);
}
.storage-hint p { margin: 0; flex: 1; color: var(--text); }
.storage-hint a { color: var(--accent); }
.storage-hint .btn { flex-shrink: 0; }
@container frame (max-width: 30rem) { .storage-hint { flex-direction: column; align-items: stretch; } }

/* Darstellung (System/Hell/Dunkel) oben rechts */
.theme-btn { width: 2rem; height: 2rem; color: var(--muted); }
.theme-btn:hover { color: var(--text); }

/* Möbelliste: Gruppen „Meine Möbel“ und „Aus dem Stil …“ */
.group-head { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.item.from-style { box-shadow: inset 3px 0 0 color-mix(in srgb, #af52de 55%, transparent); }

/* 3D-Raum bleibt stehen, während die rechte Spalte scrollt (Raum, Möbel, Stil, Export) */
.roomstage > .stage { position: sticky; top: 4.6rem; height: min(72dvh, calc(100dvh - 6rem), 46rem); }
@container frame (max-width: 44rem) { .roomstage > .stage { position: relative; top: auto; height: 58dvh; } }

/* Kopfleiste bei mittlerer Breite und aufgeklappt: Schritte als Nummern, nur der aktuelle mit Namen; KI nur als Punkt */
@container frame (max-width: 64rem) {
  .steps-top .step:not([aria-current]) .step-label, .steps-top .soon { display: none; }
  .steps-top .step { padding-inline: 0.5rem; }
  .status-text { display: none; }
  .status { padding: 0.45rem; }
  .topbar-end { gap: 0.6rem; }
}
:root[data-fold] .topbar { grid-template-columns: auto 1fr; }

/* Fotomodus: Fortschrittsring, Rückfrage beim Speichern */
.photobar .ring { width: 1.6rem; height: 1.6rem; flex-shrink: 0; rotate: -90deg; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 3.2; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.4s linear; }
.photobar.done .ring-fill { stroke: var(--ok); }
/* Sonnen-Paneel offen (breite Bühne): Tageslicht-Leiste rechts daneben statt darunter */
.stage:has(> .sunpanel) > .daybar { left: calc(0.75rem + min(21rem, 100% - 1.5rem) + 0.75rem); translate: none; width: min(30rem, calc(100% - 23.25rem)); }
.stage:has(> .sunpanel) > .sunpanel { max-height: calc(100% - 4.95rem); }
/* Tageslicht-Leiste auf schmaler Bühne: ohne Sonnenbogen, Text einzeilig */
@container stage (max-width: 34rem) {
  .daybar { grid-template-columns: minmax(0, 1fr) auto auto auto; padding-left: 0.9rem; }
  .daybar .sun-arc { display: none; }
  .daybar .day-text { grid-column: 1; grid-row: 1; min-width: 0; }
  .daybar .day-text strong, .daybar .day-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .daybar [data-north-open] { grid-column: 2; grid-row: 1; }
  .daybar [data-day-now] { grid-column: 3; grid-row: 1; }
  .daybar [data-day-close] { grid-column: 4; grid-row: 1; }
}

/* Schnell-Einstellungen am ausgewählten Möbel (Liste) */
.item .quick { grid-column: 1 / -1; display: grid; gap: 0.55rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.q-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.q-row .q-field { flex: 1 1 9rem; }
.q-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.25rem; font-size: 0.78rem; color: var(--muted); }
.q-field span { grid-column: 1 / -1; }
.q-field input { padding: 0.45rem 0.55rem; font-variant-numeric: tabular-nums; }
.q-field em { font-style: normal; }
.q-on { font-size: 0.8rem; color: var(--muted); }

/* „Maße und Höhe ↓“ nur, wenn die Liste unter dem Raum steht (Handy hochkant) */
.sel-settings { display: none; }
@container frame (max-width: 44rem) { .view-furniture .sel-settings { display: inline-flex; } }

/* Mehrere Möbel aus einem Foto: kleine Ausschnitte zum Ankreuzen */
.extras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.extra { display: grid; grid-template-columns: auto 3.4rem minmax(0, 1fr); align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border-radius: var(--r-m); background: var(--surface-2); cursor: pointer; transition: box-shadow 0.2s; }
.extra:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.extra input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.extra img { width: 3.4rem; height: 3.4rem; object-fit: cover; border-radius: var(--r-s); background: var(--line); }
.extra strong { display: block; font-size: 0.92rem; }
.extra small { display: block; font-size: 0.8rem; color: var(--muted); }

/* ---------- „Fotoecht mit KI“: Foto-KI auf dem eigenen Rechner ---------- */
.fotoki-btn { display: grid; justify-items: center; gap: 0.05rem; padding-block: 0.45rem; line-height: 1.2; }
.fotoki-btn span { font-weight: 600; }
.fotoki-btn small { font-size: 0.72rem; font-weight: 400; opacity: 0.85; }
/* Export: die beiden Wege untereinander, volle Breite */
.ex-actions { display: grid; gap: 0.5rem; }
.ex-actions .btn { width: 100%; }
.ex-actions .btn.small { width: auto; justify-self: start; }
.fotoki-sheet { width: min(54rem, calc(100cqi - 2rem)); }
.fk-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-auto-rows: max-content; gap: 1.25rem; padding: 0.5rem 1.25rem 1.25rem; overflow: auto; min-height: 0; }
.fk-side { display: grid; gap: 0.85rem; align-content: start; min-width: 0; }
.fk-side > p, .fk-side p { margin: 0; }
.fotoki-sheet > .fk-side { padding: 0.5rem 1.25rem 1.25rem; }
.fk-preview { position: relative; margin: 0; border-radius: var(--r-m); overflow: hidden; background: var(--surface-2); align-self: start; }
.fk-preview img { display: block; width: 100%; height: auto; }
.fk-h { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.fk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fk-chip { font-size: 0.84rem; background: var(--surface-2); transition: opacity 0.2s, background 0.2s; }
.fk-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.fk-chip.fk-light[aria-pressed="true"] { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--text)); }
.fk-chip[aria-pressed="false"] { opacity: 0.55; text-decoration: line-through; }
.fk-chip.fk-styleimg { display: inline-flex; align-items: center; gap: 0.4rem; padding-left: 0.3rem; }
.fk-chip.fk-styleimg img { width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; object-fit: cover; }
.fk-render { position: absolute; left: 0.6rem; bottom: 0.6rem; right: 0.6rem; padding: 0.35rem 0.6rem; border-radius: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.fk-preview figcaption { padding: 0.5rem 0.2rem 0; }
.fk-tip { display: grid; gap: 0.5rem; }
.fk-tip p { margin: 0; }
.fk-cams { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fk-cams .chip { background: var(--surface); }
.fk-meta { font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fk-models { width: fit-content; max-width: 100%; flex-wrap: wrap; margin-bottom: 0.5rem; }
.fk-models button { font-variant-numeric: tabular-nums; }
.fk-models button:disabled { opacity: 0.5; cursor: default; }
.fk-progress { display: flex; align-items: center; gap: 0.9rem; }
.fk-progress p { margin: 0; font-variant-numeric: tabular-nums; }
.ring.big { width: 3rem; height: 3rem; rotate: -90deg; flex-shrink: 0; }
.fk-shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); background-size: 250% 100%; animation: fk-shine 2.4s linear infinite; pointer-events: none; }
@keyframes fk-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.fk-done { display: grid; gap: 0.75rem; padding: 0.25rem 1.25rem 1.25rem; overflow: auto; min-height: 0; }
.fk-done .help { margin: 0; }
.fk-compare { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--surface-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fk-compare img { display: block; width: 100%; height: auto; }
.fk-compare .fk-before { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.fk-bar { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); pointer-events: none; }
.fk-knob { position: absolute; top: 50%; left: var(--pos, 50%); width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border-radius: 50%; background: #fff; color: #1d1d1f; display: grid; place-items: center; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); pointer-events: none; }
.fk-tag { position: absolute; bottom: 0.6rem; padding: 0.25rem 0.55rem; border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.78rem; font-weight: 600; pointer-events: none; }
.fk-tag.l { left: 0.6rem; } .fk-tag.r { right: 0.6rem; }
.fk-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.fk-compare:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.fotoki-pill {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.9rem 0.45rem 0.5rem; border-radius: 999px;
  color: var(--text); font: inherit; font-size: 0.86rem; font-variant-numeric: tabular-nums; cursor: pointer; animation: fk-in 0.35s var(--spring);
}
.fotoki-pill .ring { width: 1.6rem; height: 1.6rem; rotate: -90deg; }
.fotoki-pill.ready { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.fotoki-pill.ready .ring-fill { stroke: var(--on-accent); } .fotoki-pill.ready .ring-track { stroke: rgba(255, 255, 255, 0.35); }
@keyframes fk-in { from { opacity: 0; translate: 0 12px; } }
@container frame (max-width: 44rem) { .fotoki-sheet { width: 100cqi; } .fk-body { grid-template-columns: 1fr; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); } .fk-preview img { max-height: 34dvh; object-fit: cover; } }
@media (prefers-reduced-motion: reduce) { .fk-shine { animation: none; } .fotoki-pill { animation: none; } }
/* Schmal mit Schrittleiste unten: Pille darüber, damit die Schritte frei bleiben */
@media (max-width: 44rem) { .fotoki-pill { bottom: calc(5.6rem + env(safe-area-inset-bottom)); } }
.fk-chat { display: grid; gap: 0.5rem; }
.fk-chat[open] { padding-bottom: 0.25rem; }
.fk-chat .btn { justify-self: start; }

/* ---------- Schnellschalter rechts in der 3D-Ansicht: Maße, Möbel fixieren, Farben ----------
   Nur Symbole, senkrecht wie in Apple Karten – so stoßen sie nie an die Ansichtsleiste. Der Name erscheint
   beim Drüberfahren, mit der Tastatur und am Touchscreen kurz nach dem Tippen (.say, app.js). */
.stage-fabs { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; display: flex; flex-direction: column; gap: 0.4rem; }
.fab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 999px;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--muted); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  transition: background 0.2s, color 0.2s, transform 0.2s var(--spring);
}
.fab[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--glass)); }
.fab.lock-toggle[aria-pressed="true"] { color: color-mix(in srgb, var(--warn) 80%, var(--text)); background: color-mix(in srgb, var(--warn) 16%, var(--glass)); }
.fab:active { transform: scale(0.95); }
.stage-fabs .fab > span {
  position: absolute; right: calc(100% + 0.45rem); top: 50%; translate: 0.3rem -50%; padding: 0.3rem 0.6rem; border-radius: 8px; white-space: nowrap;
  font-size: 0.78rem; color: var(--text); background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  opacity: 0; pointer-events: none; transition: opacity 0.15s, translate 0.2s var(--spring);
}
@media (hover: hover) { .stage-fabs .fab:hover > span { opacity: 1; translate: 0 -50%; } }
.stage-fabs .fab:focus-visible > span, .stage-fabs .fab.say > span { opacity: 1; translate: 0 -50%; }
.stage-fabs .fab-legend[open] .fab > span { opacity: 0; }
.stage.photo-on .stage-fabs { display: none; }

/* Zollstock: Zahlen der Maßlinien als Pillen über dem 3D-Bild (room3d.js setzt die Lage jedes Bild) */
.measure-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.stage.photo-on .measure-layer { display: none; }
.mpill {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; pointer-events: auto; white-space: nowrap;
  font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; background: #0071e3;
  border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.mpill.faint { color: var(--text); background: var(--glass); border: 1px solid var(--glass-line); font-size: 0.72rem; box-shadow: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mpill .mval { all: unset; padding: 0.22rem 0.6rem; cursor: default; }
.mpill.editable .mval { cursor: text; }
.mpill.editable button.mval:hover { text-decoration: underline; text-underline-offset: 2px; }
.mpill .mx { all: unset; padding: 0.22rem 0.55rem 0.22rem 0; cursor: pointer; opacity: 0.85; }
.mpill input.mval { width: 4.2em; margin: 0.15rem 0 0.15rem 0.2rem; padding: 0.1rem 0.35rem; border-radius: 999px; text-align: right; color: #1d1d1f; background: #fff; }
.mpill em { font-style: normal; padding: 0 0.6rem 0 0.3rem; }
.mpill .mval:focus-visible, .mpill .mx:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 999px; }
@media (pointer: coarse) { .mpill { font-size: 0.86rem; } .mpill .mval { padding: 0.4rem 0.75rem; } }

/* ---------- Karte „Fenster, Tür …“ und Schnell-Einstellungen Licht/Fixieren ---------- */
.opening-sheet { width: min(30rem, calc(100cqi - 2rem)); }
.op-body { display: grid; gap: 1rem; padding: 0.25rem 1.25rem 1.25rem; overflow: auto; min-height: 0; }
.op-body > p, .op-body .help { margin: 0; }
.op-types { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.op-types .chip { background: var(--surface-2); }
.op-types .chip[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.op-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.op-for { font-weight: 400; text-transform: none; letter-spacing: 0; }
@container frame (max-width: 44rem) { .opening-sheet { width: 100cqi; } }
.q-light, .q-lock { align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.q-light > span { font-size: 0.84rem; color: var(--muted); }
.q-hint { font-size: 0.8rem; color: var(--muted); }
.lock-mark { font-size: 0.85em; }
.q-size { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--muted); }
.q-size select { font: inherit; padding: 0.3rem 0.5rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.q-note { margin: 0.25rem 0 0; }
.describe { display: grid; gap: 0.5rem; margin: 0.6rem 0 0.8rem; }
.describe textarea { width: 100%; resize: vertical; font: inherit; }
.describe .help { margin: 0; }
.mic[aria-pressed="true"] { color: var(--danger); }

/* ---------- Grundriss selbst zeichnen ---------- */
.sketch-sheet { width: min(64rem, calc(100cqi - 2rem)); max-height: calc(100dvh - 2rem); }
.sk-body { display: grid; gap: 0.75rem; padding: 0.25rem 1.25rem 1.25rem; overflow: auto; min-height: 0; }
.sk-body > .help { margin: 0; min-height: 2.6em; }
.sk-board { width: 100%; height: auto; max-height: 64dvh; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.sk-grid { stroke: color-mix(in srgb, var(--text) 9%, transparent); stroke-width: 1.5; }
.sk-room { fill: color-mix(in srgb, var(--accent) 7%, transparent); }
.sk-wall { stroke: var(--text); stroke-width: 12; stroke-linecap: round; }
.sk-wall-open { stroke: var(--accent); stroke-width: 5; stroke-dasharray: 16 12; }
.sk-preview { stroke: var(--accent); stroke-width: 8; stroke-linecap: round; opacity: 0.7; }
.sk-op { stroke-width: 16; stroke-linecap: butt; }
.sk-op-window { stroke: #5aa7e6; } .sk-op-door { stroke: #d0893c; } .sk-op-terrace_door { stroke: #3fae7d; }
.sk-corner { fill: var(--surface); stroke: var(--text); stroke-width: 5; }
.sk-first { fill: var(--accent); stroke: var(--surface); }
.sk-len { font: 600 26px -apple-system, system-ui, sans-serif; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 6; }
.sk-len-live { fill: var(--accent); }
.sk-tools { justify-self: start; flex-wrap: wrap; }
@container frame (max-width: 44rem) { .sketch-sheet { width: 100cqi; } .sk-board { max-height: 56dvh; } }
.alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.2rem 0.6rem; }
.sk-portrait .sk-len { font-size: 40px; stroke-width: 8; }
.sk-portrait .sk-wall { stroke-width: 16; }
.sk-portrait .sk-board, .sk-board.sk-portrait { max-height: 62dvh; }

/* Grund der Markierung direkt unter dem Namen des ausgewählten Möbels */
.selbar { flex-wrap: wrap; row-gap: 0.15rem; }
.selbar:has(.sel-issue:not([hidden])) { border-radius: 20px; }
.sel-issue { order: 9; flex-basis: 100%; font-size: 0.82rem; font-weight: 600; padding: 0 0.4rem 0.15rem 0; }
.sel-issue.bad { color: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.sel-issue.warn { color: color-mix(in srgb, var(--warn) 80%, var(--text)); }

/* Farblegende der Bodenmarkierungen (aufklappbar neben „Maße“ und „Fixieren“) */
.fab-legend { position: relative; }
.fab-legend > summary { list-style: none; }
.fab-legend > summary::-webkit-details-marker { display: none; }
.fab-legend[open] > summary { color: var(--accent); }
.legend-pop { position: absolute; right: calc(100% + 0.45rem); top: 0; z-index: 4; margin: 0; padding: 0.6rem 0.8rem; list-style: none;
  display: grid; gap: 0.45rem; width: max-content; max-width: min(18rem, 80vw); border-radius: 14px; font-size: 0.82rem; color: var(--text); }
.legend-pop li { display: flex; align-items: center; gap: 0.5rem; }
.legend-pop i { width: 1.1rem; height: 0.7rem; border-radius: 4px; border: 2.5px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); flex-shrink: 0; }
[data-view="furniture"] .legend-style { display: none; }
.fab .dots { display: inline-flex; gap: 2px; }
.fab .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }

.glazed-row small { display: block; color: var(--muted); font-size: 0.82rem; }
/* „Deine KI-Fotos“: Ablage der fertigen Fotos im Browser */
.fk-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.85rem; }
.fk-card { display: grid; gap: 0.45rem; align-content: start; min-width: 0; }
.fk-card .actions { flex-wrap: wrap; gap: 0.4rem; }
.fk-thumb { display: block; padding: 0; border: 0; border-radius: var(--r-m); overflow: hidden; background: var(--surface-2); cursor: zoom-in; aspect-ratio: 3 / 2; }
.fk-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.3s var(--spring); }
.fk-thumb:hover img { scale: 1.03; }
.fk-thumb:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.fk-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; font-size: 0.84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fk-ask { display: grid; gap: 0.5rem; }
.fk-ask p { margin: 0; }
.fk-ask .actions { justify-content: flex-end; }
.fk-meta .btn.link { padding: 0; font-size: inherit; vertical-align: baseline; }
/* Handy: eine Spalte, Bild links, Datum und Knöpfe rechts daneben */
@container frame (max-width: 44rem) {
  .fk-gallery { grid-template-columns: 1fr; gap: 1rem; }
  .fk-card { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 0.8rem; }
  .fk-card .fk-thumb { grid-row: span 2; align-self: start; }
  .fk-card .fk-card-meta { flex-wrap: wrap; justify-content: flex-start; }
  .fk-card .actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .fk-thumb img { transition: none; } }

/* ---------- 6 · Bilder: zwei Kästen, eine Fortschrittskarte, gedämpfte Bühne ---------- */
.ex-box { padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.ex-box h3 { gap: 0.45rem; }
.ex-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--muted); }
/* Hauptweg: der KI-Kasten hebt sich leicht ab */
.ex-ki { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 65%); }
.ex-ki .ex-icon { color: var(--accent); }
/* Schalter in einer Zeile, alle Felder gleich breit */
.ex-box .segmented.ex-seg { width: 100%; }
.ex-box .segmented.ex-seg button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding-inline: 0.5rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.ex-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; background: var(--muted); opacity: 0.55; }
.ex-dot[data-on="on"] { background: #34c759; opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, #34c759 25%, transparent); }
/* Eine Zeile zur gewählten Wahl, wechselt mit dem Schalter */
.ex-line { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.ex-line strong { color: var(--text); font-weight: 600; }
.ex-off { color: var(--danger, #d0342c); font-weight: 500; }
.ex-box .fotoki-btn { width: 100%; }
.ex-box .fotoki-btn:disabled { opacity: 0.55; cursor: default; }
.ex-box .btn.small { width: auto; justify-self: start; }
.ex-box .disclosure { display: grid; gap: 0.5rem; }
.ex-box textarea { width: 100%; font: inherit; font-size: 0.82rem; border: 1px solid var(--line); border-radius: var(--r-s); padding: 0.5rem; background: var(--surface-2); color: var(--text); resize: vertical; }
.ex-run-host { display: grid; gap: 0.5rem; }
.ex-after { margin: 0; }
/* Fortschrittskarte: Text und Abbrechen in einer Zeile, Balken darunter */
.ex-run { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.45rem 0.6rem; padding: 0.7rem 0.8rem; border-radius: var(--r-m); background: var(--accent-soft); }
.ex-run p { margin: 0; font-size: 0.86rem; font-variant-numeric: tabular-nums; min-width: 0; }
.ex-run .btn.small { padding: 0.25rem 0.6rem; font-size: 0.78rem; }
.ex-run .ex-bar { grid-column: 1 / -1; }
.ex-bar { height: 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); overflow: hidden; }
.ex-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.4s ease; }
.stage-quiet { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 1rem; text-align: center;
  background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  color: var(--text); font-size: 0.95rem; font-weight: 500; }

/* ---------- Schalter „Stilfoto mitgeben“ (Export und Foto-Dialog) ---------- */
.fk-style { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); cursor: pointer; margin-top: 0.5rem; }
.fk-style input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); margin: 0; }
.fk-style img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 8px; }
.fk-style span { display: grid; gap: 0.1rem; min-width: 0; }
.fk-style strong { font-size: 0.88rem; font-weight: 600; }
.fk-style small { font-size: 0.76rem; color: var(--muted); line-height: 1.35; }
.fk-style:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.fk-style.off { cursor: default; opacity: 0.6; }
.ex-ki .fk-style { margin-top: 0; }