/* Room Atlas look, step 1 of the redesign (AP 3): deep petrol, champagne for
   titles and hairlines, Baskerville for headlines, IBM Plex for text and
   values, small radii. Loaded after styles.css and wins on equal specificity. */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/ibm-plex-sans.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-baskerville-400.woff) format("woff")}

:root{
  --bg:#0a1a20;--panel:#10272f;--panel2:#153340;--line:#29474f;--line-soft:#1e3a42;
  --text:#e9efec;--muted:#9db3b5;--faint:#839ea2;--accent:#61d8c8;--accent-ink:#062028;
  --champagne:#d9c9ae;--champagne-line:rgba(217,201,174,.24);
  --display:Baskerville,"Libre Baskerville","Baskerville Old Face",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

body{font-family:var(--sans);font-size:14.5px;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 700px at 70% -10%,#143139 0,rgba(20,49,57,0) 70%),var(--bg)}
h1,h2,h3{font-family:var(--sans)}

/* Top bar: the mark is the way home, a champagne hairline underneath */
.topbar{border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(217,201,174,0),rgba(217,201,174,.45) 25%,rgba(217,201,174,.45) 75%,rgba(217,201,174,0)) 1}
.topbar .brand{background:none;border:0;padding:4px 6px 4px 0;color:var(--text);text-align:left;border-radius:4px}
.topbar .brand strong{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.24em}
.topbar .brand small{color:var(--faint);letter-spacing:.14em}
.topbar .brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Narrow windows: the right-hand controls wrap under the brand instead of running out of the picture. */
@media(max-width:560px){.topbar{flex-wrap:wrap;height:auto;min-height:72px;padding:8px 0;row-gap:4px}.topbar .top-right{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}}

/* Headlines */
.stage-banner h1{font-family:var(--display);font-weight:400;letter-spacing:.005em;font-size:clamp(30px,3.4vw,46px);line-height:1.12;text-wrap:balance}
.stage-banner p{color:var(--muted);max-width:40em}
.eyebrow{color:var(--champagne);font-weight:500;letter-spacing:.2em}
.section-heading h2{font-family:var(--display);font-weight:400;letter-spacing:.005em;font-size:clamp(21px,2vw,26px);line-height:1.2}
.card h3{font-weight:600;letter-spacing:0}

/* Cards: calm surfaces, hairline edge, no heavy shadow */
.card{background:linear-gradient(160deg,rgba(21,51,64,.55),rgba(16,39,47,.92) 45%),var(--panel);border-color:var(--line-soft);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.18)}
.button.primary-button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.button.primary-button:hover:not(:disabled){background:#7ae3d5}

/* Step rail: fine line icons in hairline tiles, number before the name */
.workflow{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:8px;background:rgba(12,30,37,.9);border-color:var(--line-soft);box-shadow:0 14px 35px rgba(0,0,0,.3)}
.workflow-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;min-height:0;padding:8px 10px 8px 8px;border-radius:6px;color:var(--muted)}
.workflow-step:hover{background:rgba(21,51,64,.6);color:var(--text)}
.workflow-step.is-active{background:linear-gradient(90deg,rgba(97,216,200,.09),rgba(97,216,200,.02));border-color:rgba(97,216,200,.32);box-shadow:none}
.step-ico{position:relative;width:44px;height:44px;border-radius:5px;display:grid;place-items:center;color:var(--champagne);
  background:linear-gradient(155deg,rgba(217,201,174,.10),rgba(217,201,174,0) 55%),#0d2229;
  box-shadow:inset 0 0 0 1px var(--champagne-line),inset 0 1px 0 rgba(255,255,255,.05)}
.step-svg{width:28px;height:28px;overflow:visible}
.step-svg *{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.step-svg .fill{fill:currentColor;stroke:none}
.step-svg .soft{opacity:.45}
.workflow-step.is-active .step-ico{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(97,216,200,.7),0 0 20px rgba(97,216,200,.16)}
.workflow-step.is-done .step-ico::after{content:"";position:absolute;right:-4px;bottom:-4px;width:15px;height:15px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23062028' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 0 0 2px var(--bg)}
.workflow-step.is-next:not(.is-active){border-style:dashed;border-color:rgba(217,201,174,.35)}
.step-text{min-width:0}
.step-label{display:flex;align-items:baseline;gap:7px;min-width:0}
.workflow-step .workflow-number,.workflow-step.is-done .workflow-number{display:inline;width:auto;height:auto;margin:0;border:0;border-radius:0;background:none;
  font:500 14px/1.2 var(--sans);color:var(--champagne);font-variant-numeric:tabular-nums}
.workflow-step.is-done .workflow-number::after{content:none}
.workflow-step.is-next:not(.is-active) .workflow-number{color:var(--champagne)}
.workflow-step strong{font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workflow-step small{font-size:11.5px;color:var(--faint);margin-top:3px}
.workflow-step.is-active small{color:var(--muted)}

/* Wide screens: the rail sits left of the content and stays in view */
@media(min-width:1200px){
  main{display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:36px;align-items:start}
  main>*{grid-column:2}
  main>.workflow{grid-column:1;grid-row:1/span 20;position:sticky;top:20px;margin-top:28px;display:grid;grid-template-columns:1fr;gap:4px;padding:10px;background:rgba(12,30,37,.6)}
  .workflow-step small{white-space:normal}
}
/* Medium and small screens: icons above "1 Raum" */
@media(max-width:1199px){
  .workflow-step{grid-template-columns:1fr;justify-items:center;text-align:center;gap:7px;padding:9px 4px}
  .step-label{justify-content:center}
  .workflow-step small{display:none}
}
@media(max-width:720px){
  .workflow{gap:3px;padding:5px}
  .workflow-step{padding:7px 1px;gap:5px}
  .step-ico{width:38px;height:38px}.step-svg{width:24px;height:24px}
  .step-label{gap:3px}
  .workflow-step .workflow-number{display:inline;font-size:11px}
  .workflow-step strong{font-size:11px;white-space:normal;line-height:1.2}
  .workflow-step.is-done .step-ico::after{width:13px;height:13px;background-size:11px}
}

/* Action bar: one main action, always in reach */
body.has-actionbar{padding-bottom:84px}
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(10,26,32,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);padding:12px 38px calc(12px + env(safe-area-inset-bottom,0px))}
.actionbar-inner{max-width:1454px;margin:0 auto;display:flex;align-items:center;gap:12px}
.actionbar-hint{margin:0 auto 0 0;min-width:0;font-size:13px;color:var(--muted);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.actionbar-hint strong{color:var(--text);font-weight:500}
.actionbar .button{white-space:nowrap}
.actionbar [hidden]{display:none!important}
/* While something records the button stops it (app.mjs updateActionbar), in the colours of „Messung stoppen“. */
/* Back to Ergebnis after a room suggestion (app.mjs showPlannedInRoom): left, in the accent. */
#actionbar-return{margin-right:auto;border-color:var(--accent);color:var(--accent)}
.actionbar .button.is-stop{background:#57302e;color:#ffd7c9;border-color:#b27062}
.actionbar .button.is-stop:hover{background:#6a3936}
@media(max-width:720px){
  .actionbar{padding-inline:16px}
  .actionbar-hint{display:none}
  .actionbar .button{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){.workflow-step,.step-ico{transition:none}}

/* Measurement step: preparation checklist and the traffic lights per point */
/* Lines for a box or soundbar (speaker-system.mjs measureHints) right over
   „1 Lautstärke“ (measure-steps.mjs); no tick any more (Jonas, 11.10.2026). */
.prep-list{margin:18px 0;padding:8px 12px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.45)}
.prep-list[hidden]{display:none}
.prep-hints{margin:0;padding-left:18px;display:grid;gap:4px;font-size:12px;color:var(--muted)}
#mic-level-grid>.prep-list{grid-column:1/-1;margin:0}
/* iPhone/iPad: the output picker right of „Lautstärke prüfen“, as high as it. */
.action-row .route-picker{width:43px;height:43px;min-width:43px}
.route-picker svg{stroke-linecap:round}
/* „Messmikrofon“ and right of it „Kalibrierung“ with „Importieren“ (Pro;
   Jonas 09.10.2026); what is stored for the microphone in a line under both. */
#mic-level-grid{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.cal-field{align-items:flex-start}
/* as high as the choice of the microphone beside it (Jonas, 09.10.2026) */
.room-source-btn.cal-import{flex-direction:row;width:auto;height:44px;gap:8px;padding:0 14px;font-size:13px}
.room-source-btn.cal-import svg{width:20px;height:20px}
/* without Pro its tag sits on the corner, off the word; on a phone the tile narrower */
.room-source-btn.cal-import.plan-locked::after{top:-9px;right:-6px;background:var(--panel)}
@media(max-width:560px){.room-source-btn.cal-import{gap:5px;padding:0 7px;font-size:11.5px}.room-source-btn.cal-import svg{width:16px;height:16px}}
/* the line under the choice of the microphone only when it says something */
#mic-status:empty{display:none}
.cal-status{grid-column:1/-1;margin-top:-10px}
.cal-status[hidden]{display:none}
.prep-item{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--line-soft);cursor:pointer}
.prep-item:first-child{border-top:0}
.prep-item input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:1px 0 0;border:1px solid #4a6770;border-radius:3px;background:#0b1f26;display:grid;place-items:center;cursor:pointer}
.prep-item input:checked{background:var(--accent);border-color:var(--accent)}
.prep-item input:checked::after{content:"✓";color:var(--accent-ink);font-size:13px;font-weight:700;line-height:1}
.prep-item input:disabled{cursor:default}
.prep-item.is-auto{cursor:default}
.prep-item strong{display:block;font-weight:500;color:var(--text)}
.prep-item small{display:block;color:var(--faint);font-size:12.5px;line-height:1.45;margin-top:2px}
.prep-auto{font:500 10px/1 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#7fd4a0;border:1px solid #3f6a55;border-radius:2px;padding:3px 5px;margin-left:6px;vertical-align:1px}
.guide-task{display:flex;align-items:center;gap:7px;border-radius:3px;font-size:12.5px;font-weight:500;padding:8px 10px}
.guide-task::before{content:"";width:7px;height:7px;border-radius:50%;background:#5f7b80;flex:none}
.guide-task.is-done{border-color:#355c49;background:rgba(127,212,160,.08);color:#bfe8cf}
.guide-task.is-done::before{background:#7fd4a0}
.guide-task.is-issue{border-color:#6d4539;background:rgba(255,159,134,.08);color:#ffc9b9}
.guide-task.is-issue::before{background:#ff9f86}
.guide-task.is-next{border-color:rgba(97,216,200,.55);color:var(--text)}
.guide-task.is-next::before{background:var(--accent);box-shadow:0 0 8px rgba(97,216,200,.7)}
.system-choice{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.system-choice .fine-print{margin:8px 0 0}

/* Scan hand-over: QR code on champagne paper beside the steps */
.scan-handoff-btn{margin-top:10px}
.handoff-dialog{max-width:min(760px,calc(100vw - 32px));width:100%;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text)}
.handoff-dialog::backdrop{background:rgba(4,12,16,.72)}
.handoff-body{display:grid;grid-template-columns:260px 1fr;gap:28px;padding:28px}
.handoff-code{aspect-ratio:1;max-width:100%;background:#f4efe4;border-radius:4px;padding:6px;box-shadow:0 0 0 1px var(--champagne-line)}
.handoff-code svg{display:block;width:100%;height:100%}
.handoff-text h2{font-family:var(--display);font-weight:400;font-size:26px;margin:6px 0 12px}
.handoff-steps{margin:0 0 14px;padding-left:20px;color:var(--muted);line-height:1.55;font-size:13.5px}
.handoff-steps li{margin:6px 0}
.handoff-status{font-size:13px;color:var(--muted);margin:0 0 12px}
.handoff-status[data-kind=success]{color:#7fd4a0}.handoff-status[data-kind=error]{color:#ffab93}
@media(max-width:720px){.handoff-body{grid-template-columns:1fr;padding:20px}.handoff-code{max-width:240px}}

/* Step 3: findings with a traffic light and the zone chart */
.findings-list{display:grid;margin:6px 0 22px}
.finding{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line-soft)}
.finding:first-child{border-top:0;padding-top:4px}
.finding-dot{width:11px;height:11px;border-radius:50%;margin-top:6px;background:#5f7b80}
.finding-bad .finding-dot{background:#ff9f86;box-shadow:0 0 10px rgba(255,159,134,.45)}
.finding-warn .finding-dot{background:#f0c36a;box-shadow:0 0 10px rgba(240,195,106,.35)}
.finding-good .finding-dot{background:#7fd4a0;box-shadow:0 0 10px rgba(127,212,160,.35)}
.finding h3{margin:0 0 3px;font-size:15.5px;font-weight:600}
.finding p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.findings-chart{padding:18px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.45)}
.findings-chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.findings-chart-head h3{margin:0;font-size:15px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.seg button{background:none;border:0;padding:7px 12px;font-size:13px;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--panel2);color:var(--text)}
.zone-chart{display:block;width:100%;height:auto}
.zone-chart text{font:400 10.5px var(--mono);fill:var(--faint)}
.zc-grid{stroke:#1e3a42;stroke-width:1}.zc-zero{stroke:#29474f;stroke-width:1}
.zc-band{fill:rgba(255,159,134,.12)}
.zc-curve{fill:none;stroke:#ff9f86;stroke-width:2}
.zc-target{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:4 4}
.zc-peak{stroke:rgba(217,201,174,.35);stroke-dasharray:2 4}
.zone-chart .zc-peak-label{fill:var(--champagne)}
.findings-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:12px;color:var(--muted)}
.findings-legend span{display:inline-flex;align-items:center;gap:6px}
.findings-legend i{display:inline-block;width:16px;height:2px}
.lg-curve{background:#ff9f86}.lg-band{background:rgba(255,159,134,.35);height:8px!important}.lg-target{background:var(--accent)}

/* Step 4: entry guide in the style of the current PPG display: black screen, white text */
/* Font like the PPG display: a thin monospaced slab serif in the Courier family. */
.lcd{--lcd-font:"Courier New","Nimbus Mono PS","FreeMono",Courier,monospace;background:#000;border-radius:4px;padding:16px 18px 10px;color:#fff;font-family:var(--lcd-font);box-shadow:inset 0 0 0 1px #2a2a2a,0 0 0 3px #111,0 10px 24px rgba(0,0,0,.35);margin:6px 0 10px}
.lcd-sub{font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.62);margin-bottom:6px}
.lcd-big{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;font-size:clamp(24px,3.6vw,36px);letter-spacing:0;font-weight:400}
.lcd-unit{font-style:normal;color:#7fc6ee}
.lcd-tabs{display:grid;gap:3px;margin-top:12px}
.lcd-tabs span{border:1px solid rgba(255,255,255,.55);color:rgba(255,255,255,.7);font-size:11px;text-align:center;padding:2px 0}
.lcd-tabs span.on{background:#fff;color:#000;border-color:#fff}
.ppg-entry-card .progress-text{font:500 13px var(--mono);color:var(--muted)}
.ppg-entry-confirm{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:14px}

/* Step 5: before → after at a glance; the guided after series comes first while it is missing */
.check-summary{display:grid;gap:16px;margin-bottom:18px}
.check-headline{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.2;margin:0}
.check-lead{color:var(--muted);margin:0;max-width:44em}
.check-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check-tile{padding:16px 18px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.45)}
.check-tile-label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne)}
.check-tile-value{font:500 26px/1.3 var(--mono);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.check-tile-value s{color:var(--faint);text-decoration-thickness:1px}
.check-tile-value b{font-weight:500}.check-tile-value b.is-better{color:#7fd4a0}.check-tile-value b.is-worse{color:#ffab93}
.check-tile small{color:var(--faint);font-size:12.5px}
.zc-before{fill:none;stroke:#ff9f86;stroke-width:1.5;opacity:.6}
.zc-after{fill:none;stroke:#7fd4a0;stroke-width:2}
.lg-before{background:#ff9f86}.lg-after{background:#7fd4a0}
body[data-stage=check].check-pending #check-card{order:5}
body[data-stage=check] #project-finish{order:6}
@media(max-width:720px){.check-tiles{grid-template-columns:1fr}}

/* Sound profiles per PPG slot */
.presets-list{display:grid;gap:10px;margin:8px 0 14px}
.preset-row{display:grid;grid-template-columns:minmax(150px,210px) 1fr auto;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.45)}
.preset-row.is-room{border-color:rgba(97,216,200,.3)}
.preset-row.is-free{opacity:.7}
.preset-head{display:grid;gap:6px}
.preset-slot{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--champagne)}
.preset-name{font-size:15px;font-weight:600}
.preset-select{background:#0b1f26;border:1px solid #3c5d66;border-radius:3px;padding:8px 10px;color:var(--text);font:inherit;font-size:14px}
.preset-body{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.preset-body p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;grid-column:2}
.preset-row.is-room .preset-body p,.preset-row.is-free .preset-body p{grid-column:1/-1}
.preset-facts{grid-column:2;color:var(--faint);font-size:12px}
.profile-curve{grid-row:1/span 2;width:120px;height:40px}
.pc-zero{stroke:#29474f;stroke-width:1}
.pc-line{fill:none;stroke:var(--champagne);stroke-width:1.6}
@media(max-width:720px){.preset-row{grid-template-columns:1fr}.preset-body{grid-template-columns:1fr}.preset-body p,.preset-facts{grid-column:1}.profile-curve{grid-row:auto}}

/* Easter egg: power meters in the manner of the Onkyo Integra M-508, ice-blue light */
.vu-meters{position:fixed;right:24px;bottom:92px;z-index:40;width:min(560px,calc(100vw - 32px));padding:12px 12px 8px;border-radius:6px;
  background:linear-gradient(180deg,#16191b,#0b0d0e);box-shadow:0 0 0 1px rgba(150,222,255,.22),0 20px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
.vu-meters.is-on{opacity:1;transform:none}
.vu-canvas{display:block;width:100%;height:auto;border-radius:3px;background:#07090a}
.vu-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;font:500 10px var(--sans);letter-spacing:.3em;color:rgba(150,222,255,.8)}
.vu-range{display:inline-flex;border:1px solid rgba(150,222,255,.25);border-radius:3px;overflow:hidden;margin-left:auto}
.vu-range button{background:none;border:0;color:rgba(150,222,255,.6);font:500 10.5px var(--sans);letter-spacing:.06em;padding:4px 8px;cursor:pointer}
.vu-range button[aria-pressed=true]{background:rgba(150,222,255,.14);color:#dff4ff}
.vu-close{background:none;border:0;color:var(--muted);font-size:18px;line-height:1;padding:2px 6px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.vu-meters{transition:none}}

/* Expert analysis: tabs, controls, method list */
.expert-tabs{display:flex;flex-wrap:wrap;margin-bottom:14px}
.expert-tabs button[aria-selected=true]{background:var(--panel2);color:var(--text)}
.expert-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:12px}
.expert-controls .field{min-width:150px}
.expert-body h3{margin:16px 0 8px;font-size:14.5px}
/* The body of an expert section keeps the summary's side margins; the cards
   inside are flattened (no own padding), so this is their only inset. */
.card>.expert-body{padding:0 26px 24px;border-top:0}
@media(max-width:720px){.card>.expert-body{padding:0 18px 18px}}
.expert-table td,.expert-table th{font-variant-numeric:tabular-nums}
.methods-list{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;margin:0}
.methods-list dt{color:var(--champagne);font-weight:500}
.methods-list dd{margin:0;color:var(--muted);line-height:1.55}
.eq-limits{margin-top:14px}
@media(max-width:720px){.methods-list{grid-template-columns:1fr}}

/* Materials of the room model */
.materials-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px;align-items:start;margin:10px 0 16px}
/* Step B: the room in 3D (room-view.mjs). Dragging turns it, so the canvas
   takes the touch itself; the page scrolls beside it. */
.materials-view-wrap{display:grid;gap:8px;min-width:0}
/* Drawing surfaces are dragged and tapped, never selected: a long press or a
   drag on a phone must not mark the view and its hint or open the text menu. */
canvas,.materials-view-wrap,.plan-stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* The tools of a selected thing are in its menu (Jonas, 29.09.2026): the view takes their place, 48 px higher. */
.materials-view{display:block;width:100%;height:clamp(348px,calc(42vw + 48px),518px);border:1px solid var(--line-soft);border-radius:6px;background:radial-gradient(120% 140% at 70% 0%,#143540 0%,#0f262e 45%,#0c1f25 100%);touch-action:none;cursor:grab;outline:none}
.materials-view:focus-visible{box-shadow:0 0 0 2px var(--accent)}
/* "Freie Kamera" in the column, under the three starts (materials-ui.mjs
   placeCamera); "Kamera zurücksetzen" and its "i" under it while it is on
   (room-view.mjs, Jonas 06.10.2026). */
/* Set off below the starts by space and a fine line (Jonas, 06.10.2026: „der
   freie kamera button soll einen abstand nach unten haben und durch eine
   dünne elegante trennlinie getrennt sein“). */
.materials-camera{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.materials-camera #materials-free-camera{flex:1 1 auto;height:36px}
.materials-camera #materials-camera-reset{flex:1 1 100%}
.materials-camera[hidden]{display:none}
.materials-camera .plan-tool[aria-pressed=true]{border-color:var(--accent);background:rgba(97,216,200,.12);color:var(--accent)}
.materials-camera .plan-tool[hidden]{display:none}
/* A key of the free camera pressed while it is off: the button lights up (free-camera-ui.mjs). */
.materials-camera .plan-tool.is-hinted{border-color:var(--accent);color:var(--accent);animation:camera-hint .6s ease-in-out 3}
@keyframes camera-hint{0%,100%{box-shadow:0 0 0 0 rgba(97,216,200,0)}50%{box-shadow:0 0 0 5px rgba(97,216,200,.35)}}
@media(prefers-reduced-motion:reduce){.materials-camera .plan-tool.is-hinted{animation:none;box-shadow:0 0 0 3px rgba(97,216,200,.3)}}
/* For the computer only (Jonas, 06.10.2026): where touch is the pointer the free camera is not offered. */
@media(pointer:coarse){.materials-camera{display:none}}
/* Step B on a computer (Jonas, 06.10.2026: „mache den renderer größer, und
   lasse die buttons rechts schrumpfen (packe sie untereinander) … die
   menüs können alle gekürzt werden, die buttons können in einer 3x2
   anordnung stehen … Generell mehr platz einfach für den renderer auf
   desktop“): the view takes the width and most of the height, the column
   beside it is narrow; the three starts and the tools of a thing square,
   three to a row („Der objekt platzieren button soll immer quadratisch
   bleiben“). */
@media(min-width:901px){
  .materials-card .materials-grid{grid-template-columns:minmax(0,1fr) 260px;gap:16px}
  .materials-card .materials-view{height:clamp(420px,calc(100vh - 230px),900px)}
  .materials-side .placement-start{grid-template-columns:118px;justify-content:start;gap:8px}
  .materials-side .placement-start .room-source-btn{padding:10px 8px;gap:8px;font-size:12.5px;line-height:1.25}
  .materials-side .placement-start.is-set{grid-template-columns:1fr;gap:6px}
  .materials-side .placement-start.is-set .room-source-btn{flex-direction:row;justify-content:flex-start;aspect-ratio:auto;min-height:46px;padding:8px 12px;gap:12px;text-align:left;font-size:13px}
  .materials-side .placement-start.is-set .room-source-btn svg{width:24px;height:24px}
  /* "Abstand links/rechts" and its distance on one line ("in eine zeille"). */
  .materials-side .wall-item-gap{flex-wrap:nowrap}
  .materials-side .wall-item-gap .preset-select{flex:1 1 auto;width:auto;min-width:0}
  .materials-side .wall-item-gap .wall-item-field{flex:none;grid-template-columns:68px auto}
  .materials-side .object-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .materials-side .object-tool,.materials-side .object-tool-remove.is-sure{width:auto;height:auto;aspect-ratio:1/1}
  .materials-side .wall-menu{gap:8px}
  .materials-side .fine-print{font-size:11.5px;line-height:1.45}
  .materials-side .wall-item-field input,.materials-side .object-field input{height:34px}
}
/* Its commands (materials-ui.mjs cameraKeys): the keys left, what they do right. */
.camera-keys-list{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:baseline;margin:6px 0 14px}
.camera-keys-list dt{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.camera-keys-list dd{margin:0;color:#c2d4d3;font-size:14px;line-height:1.5}
.camera-keys-list kbd{min-width:22px;padding:2px 7px;border:1px solid #5c8c89;border-bottom-width:2px;border-radius:4px;background:#173840;color:#eef9f5;font:600 12px var(--sans);text-align:center;white-space:nowrap}
/* Step B: a wall's pieces (wall-segments.mjs) */
.materials-segments{display:grid;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line-soft)}
.materials-segments h4{margin:0;font:600 13px var(--sans);color:var(--text)}
.materials-segment-list{display:flex;flex-wrap:wrap;gap:6px}
.materials-segment{min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:rgba(10,26,32,.45);color:var(--text);font:500 12.5px var(--sans);cursor:pointer}
.materials-segment:hover{border-color:var(--accent)}
.materials-segment.is-selected{border-color:var(--accent);background:rgba(97,216,200,.12)}
.materials-segment-cut{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.materials-segment-cut input{width:80px}
.materials-segments .button{justify-self:start}
/* Step B, wall menu: only the wall's own things on the right. "Unterteilen"
   on top; while dividing it reads "Abbrechen", with the distance field and
   "Bestätigen" beside it. The orange of the field matches the line in 3D. */
.wall-menu{display:grid;gap:10px}
.wall-menu h3{margin:0}.wall-menu .fine-print{margin:0}
.wall-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.wall-split{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wall-split .preset-select{width:auto;min-width:0}
.wall-split-input{width:84px;height:40px;padding:0 10px;border:1px solid #ff9c3c;border-radius:4px;background:rgba(255,156,60,.08);color:var(--text);font:600 15px var(--sans);text-align:right}
.wall-split-input:focus{outline:2px solid rgba(255,156,60,.6);outline-offset:1px}
.wall-split-unit{font:600 12.5px var(--sans);color:var(--muted)}
.wall-material{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line-soft)}
.wall-material h4{margin:0;font:600 13px var(--sans)}
.wall-items{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line-soft)}
.wall-items h4{margin:0;font:600 13px var(--sans)}.wall-items .fine-print{margin:0}
.wall-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.wall-item-field{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.wall-item-field>span:first-child{grid-column:1/-1}
.wall-item-field input{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:rgba(10,26,32,.45);color:var(--text);font:600 14px var(--sans);text-align:right}
.wall-item-field input:disabled{opacity:.45}
.wall-item-gap{display:flex;flex-wrap:wrap;align-items:end;gap:8px}.wall-item-gap .wall-item-field{grid-template-columns:90px auto}
.wall-item-menu>.button{justify-self:start}
/* Two to a row on a phone too (Jonas, 09.10.2026: „Breite und Tiefe
   nebeneinander, sowie Höhe und Abstand zum Boden … also in ein 2x2“). */
/* Step B, placing (placement-ui.mjs): nothing selected, the three buttons
   head the column (on a phone right under the view); the menus of a
   loudspeaker, the seat and a piece of furniture; in them ↺ ↻, the padlock
   of Raum per Hand (.plan-lock) and "Kopieren", all of one size. */
.placement-start{display:flex;flex-wrap:wrap;gap:8px}
.placement-start>.button{flex:1 1 auto}
.materials-side .placement-status{margin:10px 0 0;color:var(--text)}
.placement-offer{margin-top:10px}
.placement-choice{display:grid;gap:8px}
.placement-choice>.fine-print{margin:-2px 0 2px}
.placement-hint{margin:0;color:var(--text);line-height:1.5}
.placement-menu>.button{justify-self:start}
.object-field{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.object-field .preset-select{width:100%}
.object-field input{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:rgba(10,26,32,.45);color:var(--text);font:500 14px var(--sans)}
.object-lock{display:grid;gap:6px}.object-lock .fine-print{margin:0}
/* "Objekt" and "Oberfläche" side by side under "Fertig" (placement-ui.mjs
   pickPair, Jonas 09.10.2026); in the narrow column of a computer one under
   the other. Alone (no surface to choose), or the Pro teaser, across. */
.object-pick-pair{display:grid;gap:8px}
/* The head of a thing's menu (placement-ui.mjs objectHead): as if it were not there, but on a phone. */
.object-head{display:contents}
.object-pick-pair .pick-field{grid-template-columns:minmax(0,1fr)}.object-pick-pair .pick-current{min-width:0}
@media(max-width:900px){
  .object-pick-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .object-pick-pair>:only-child,.object-pick-pair>.pro-teaser-catalogue{grid-column:1/-1}
  .object-pick-pair .pick-current{gap:8px;min-height:44px}
  .object-pick-pair .pick-current .pick-picture{width:34px;height:34px}
}
/* Step B: function and model of a loudspeaker (speaker-picker.mjs), reddish
   until both are chosen; the model list opens under its field. */
.speaker-function.is-missing select,.speaker-function.is-missing .pick-current,.speaker-function.is-missing .choice-current{border-color:rgba(255,122,96,.85);box-shadow:0 0 0 1px rgba(255,122,96,.3)}
.speaker-function.is-missing>span{color:#ff9d88}
.model-picker{position:relative;display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.model-picker-field{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:rgba(10,26,32,.45);color:var(--text);font:500 14px var(--sans);text-align:left;cursor:pointer}
.model-picker-field::after{content:'▾';color:var(--muted);margin-left:8px}
.model-picker-field[hidden]{display:none}
.model-picker-row{display:flex}
.model-picker-search,.model-picker-find{width:100%;height:40px;padding:0 12px;border:1px solid var(--accent);border-radius:4px;background:#0b1f26;color:var(--text);font:500 14px var(--sans);text-align:left}
.model-picker-find{background:rgba(97,216,200,.08);font-weight:600;cursor:pointer}
.model-picker-find::before{content:'⌕ ';color:var(--accent)}
.model-pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;list-style:none;margin:0;padding:6px;max-height:min(360px,60vh);overflow:auto;border:1px solid var(--line);border-radius:6px;background:#0c1f25;box-shadow:0 14px 34px rgba(0,0,0,.45);display:grid;gap:2px}
.model-group{padding:8px 8px 2px;font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--champagne)}
.model-option{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px;border-radius:4px;cursor:pointer}
.model-option:hover,.model-option:focus-visible{background:rgba(97,216,200,.1);outline:none}
.model-option.is-chosen{background:rgba(97,216,200,.14)}
.model-shape{width:40px;height:40px}.model-shape rect{fill:rgba(217,201,174,.12);stroke:var(--champagne);stroke-width:1}
.model-option-text{display:grid;gap:1px;min-width:0}
.model-option-name{font:600 13.5px var(--sans);color:var(--text)}
.model-option-meta{font:500 11.5px var(--sans);color:var(--muted)}
/* Own models of the account: a cross at the end, a second tap on the red "Sicher" deletes (speaker-picker.mjs). */
.model-option.has-remove{grid-template-columns:40px minmax(0,1fr) auto}
.model-own-remove{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line-soft);border-radius:4px;background:transparent;color:var(--muted);font:500 16px var(--sans);cursor:pointer}
.model-own-remove:hover,.model-own-remove:focus-visible{color:var(--text);border-color:var(--line);outline:none}
.model-own-remove.is-sure{border-color:#c46a6a;background:#c46a6a;color:#1a0b0b;font:600 12.5px var(--sans)}
.model-empty{padding:8px;color:var(--muted)}
.model-more{padding:6px 8px 4px}.model-more .link-button{font:500 12.5px var(--sans)}
.model-own{padding:8px;border-top:1px solid var(--line-soft);margin-top:4px}
.model-own-details>summary{cursor:pointer;color:var(--accent);font:600 12.5px var(--sans)}
.model-own-form{display:grid;gap:8px;margin-top:8px}
.model-own-form>input{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:rgba(10,26,32,.45);color:var(--text);font:500 14px var(--sans)}
.model-own-size{grid-template-columns:repeat(3,minmax(0,1fr))}
.model-own-form .fine-print{margin:0}.model-own-form .fine-print.is-missing{color:#ff9d88}
.speaker-size{margin:0}
/* The model is chosen per loudspeaker in step B (Jonas, 29.09.2026); step C
   keeps its select only as the carrier of the pair's model, and its note goes
   with it. The PPG's memory slots stand beside the analysis frequency
   (30.09.2026), side by side on a phone too. */
.room-card #system-choice{display:none!important}
/* Title, field and note of both in one row each, also when a title wraps. */
.room-card .room-inputs{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);row-gap:9px}
/* Nothing left under step C's stage (the analysis frequency moved into its
   box, „Raum simulieren“ hidden since 09.10.2026): no empty strip. */
.room-card .room-workbench:not(:has(.room-inputs>*)){display:none}
.room-card .room-inputs>.field{grid-row:span 3;display:grid;grid-template-rows:subgrid;align-items:end}
.room-card .room-inputs>.field>small{align-self:start}
.room-card .room-inputs .field :is(input,select){height:44px;min-height:0}
/* The tools of a thing (placement-ui.mjs toolRow, Jonas 29.09.2026): square
   buttons of one size, the symbol on top and a word under it; pressed
   (padlock shut, "Ausrichten" on) in champagne. */
.object-tools{display:flex;flex-wrap:wrap;gap:6px}
.object-tool{display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:4px;flex:none;width:64px;height:64px;padding:9px 2px 7px;
  border:1px solid var(--line);border-radius:6px;background:rgba(10,26,32,.45);color:var(--text);font:500 10.5px/1.1 var(--sans);cursor:pointer}
.object-tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.object-tool:hover:not(:disabled){border-color:var(--champagne-line);background:rgba(21,51,64,.7)}
.object-tool[aria-pressed=true]{border-color:rgba(217,201,174,.55);background:rgba(217,201,174,.1);color:var(--champagne)}
.object-tool:disabled{opacity:.4;cursor:default}
.object-tool:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.object-tool-word{white-space:nowrap;letter-spacing:.01em}
/* "… platzieren" on a wall, the floor or the ceiling (placement-ui.mjs placeRow):
   the button, and after a tap the list beside it. */
.place-row{display:flex;gap:8px;align-items:center;flex:1 1 auto;min-width:0}
.place-row>.button{flex:none}
.place-row .place-pick{flex:1 1 110px;min-width:0;width:auto}
/* "Löschen" asks once (placement-ui.mjs removeTool): the button turns into a
   wider red "Sicher"; only that deletes. */
.object-tool-remove.is-sure{width:96px;border-color:#c46a6a;background:#c46a6a;color:#1a0b0b;font-weight:600}
.object-tool-remove.is-sure:hover:not(:disabled){border-color:#d27d7d;background:#d27d7d}
@media(max-width:560px){.placement-start>.button{flex-basis:100%}}
/* On a phone (Jonas, 09.10.2026: „mache die Buttons etwas kleiner … auf
   mobile mach alle 7 in eine Reihe“): seven columns, square, the word small;
   "Sicher" stays in its place. The name over the menu of a thing goes: the
   field "Objekt" right under "Fertig" says it. */
@media(max-width:560px){
  .object-tools{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .object-tool,.object-tool-remove.is-sure{width:auto;height:auto;aspect-ratio:1/1;min-width:0;padding:4px 0 3px;gap:2px;border-radius:5px;font-size:8.5px}
  .object-tool svg{width:17px;height:17px}
  /* "Fertig" as a square tick, then "Objekt" and "Oberfläche", one row (Jonas, 09.10.2026). */
  .object-head{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:end}
  .object-head>.eyebrow,.object-head>h3{display:none}
  .object-head>.wall-tools{margin:0}
  .object-head>.object-pick-pair{display:contents}
  .object-head .object-pick-pair>:only-child,.object-head .object-pick-pair>.pro-teaser-catalogue{grid-column:2/-1}
  .object-head .pick-current{gap:6px;padding:4px 6px 4px 4px}
  .object-head .pick-current .pick-picture{width:30px;height:30px}
  .object-head .pick-chevron{display:none}
  .object-head>.wall-tools>.button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;padding:0;font-size:0;letter-spacing:0}
  .object-head>.wall-tools>.button::before{content:"";width:15px;height:8px;margin-top:-4px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
}
@media(max-width:560px){.materials-view{height:min(64vh,360px)}}
.materials-side{display:grid;gap:14px}
.materials-side h3{margin:4px 0}
.alpha-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:10px}
.alpha-cell{text-align:center;padding:6px 2px;border:1px solid var(--line-soft);border-radius:3px}
.alpha-cell small{display:block;color:var(--faint);font-size:10.5px}.alpha-cell b{font:500 13px var(--mono)}
.materials-rug{display:grid;grid-template-columns:1fr 80px auto auto;gap:8px;align-items:center;margin-bottom:8px;font-size:13px;color:var(--muted)}
.materials-rug input{background:#0b1f26;border:1px solid #3c5d66;border-radius:3px;padding:7px 8px;color:var(--text);font:inherit}
@media(max-width:900px){.materials-grid{grid-template-columns:1fr}}
/* Room step order: room model first, then materials and furniture */


body[data-stage=room] .context-card{order:4}
.materials-rug{grid-template-columns:minmax(64px,104px) minmax(0,1fr) auto;gap:10px;align-items:start}
.materials-name{padding-top:8px;overflow-wrap:anywhere}
.materials-size{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.materials-rug .materials-size input{width:60px;flex:none;padding:7px 4px;text-align:right}
.materials-unit{white-space:nowrap;color:var(--muted)}
.materials-rug .button{white-space:nowrap;padding:7px 12px}
@media (max-width:620px){.materials-rug{grid-template-columns:1fr;gap:6px}.materials-rug .button{justify-self:start}}
.materials-rug.is-selected span:first-child{color:var(--champagne)}
.materials-rug input{width:100%}

/* Three columns on desktop: steps left, work in the centre, explanations right.
   Serif type only for the headings of the explanations, like a magazine column. */
.stage-banner h1,.section-heading h2,.check-headline,.findings-card .section-heading h2,.handoff-text h2,.project-title{font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
.stage-banner h1{font-size:clamp(24px,2.4vw,32px)}
.section-heading h2{font-size:clamp(18px,1.6vw,21px)}
.check-headline{font-size:clamp(20px,2vw,24px)}
.stage-banner{padding:22px 4px 16px}
.secondary h2,.secondary h3{font-family:var(--display);font-weight:400;letter-spacing:.005em}
.explain-card{display:grid;gap:14px}
.explain-lead{margin:0;color:var(--text);font-size:14.5px;line-height:1.6}
.explain-item{padding-top:14px;border-top:1px solid var(--line-soft)}
.explain-item h3{font-size:18px;line-height:1.25;margin:0 0 6px;color:var(--champagne)}
.explain-item p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.explain-item .explain-next{margin-top:6px;color:var(--faint);font-size:12.5px}
/* Step 1 now lives in the centre column like every other step. */
body[data-stage=room] .primary{display:flex!important}
body[data-stage=room] .layout{grid-template-columns:minmax(0,1.9fr) minmax(290px,.9fr)}
.room-flow{display:flex;flex-direction:column;gap:inherit}
/* Projektkachel: Name direkt in der Kopfzeile, Fenster zum Öffnen. */
.project-title{width:100%;background:none;border:1px solid transparent;border-radius:4px;
  padding:4px 8px;margin:5px 0 0 -8px;color:var(--text);line-height:1.2;
  font-size:clamp(21px,2vw,26px)}
/* Die Kopfzeile nimmt die ganze Breite neben dem i, damit lange Namen ganz zu sehen sind. */
.project-card>.section-heading>div:first-child{flex:1;min-width:0}
.project-title:hover:not(:disabled){border-color:var(--line-soft)}
.project-title:focus{outline:none;border-color:var(--accent);background:rgba(10,26,32,.5)}
.project-title:disabled{opacity:.6}
.project-actions .plus{font-size:15px;line-height:1;margin-right:2px}
.project-next{margin-top:18px}
/* Ist alles erledigt, genügt eine ruhige Zeile: Der Stand steht schon in der
   Navigation, hier zählt nur noch der kurze Weg zum Vergleich. */
.project-next.is-done{display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 16px;border-color:var(--line-soft);background:rgba(10,26,32,.45)}
.project-next.is-done p{margin:0;color:var(--muted);font-size:12.5px}
.project-actions .button,.project-dialog .import-button{white-space:nowrap}
.project-dialog{max-width:min(620px,calc(100vw - 32px));width:100%;border:1px solid var(--line);
  border-radius:6px;background:var(--panel);color:var(--text);padding:24px}
.project-dialog::backdrop{background:rgba(4,14,18,.72)}
.project-dialog h3{font-size:14px;letter-spacing:.02em;margin:18px 0 8px}
.project-dialog h3:first-of-type{margin-top:12px}
.project-open-list{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.project-open-row{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:10px 12px;border:1px solid var(--line-soft);border-radius:4px;background:rgba(10,26,32,.45);
  color:var(--text);cursor:pointer}
.project-open-row:hover{border-color:var(--accent)}
.project-open-row.is-active{border-color:var(--accent);background:rgba(97,216,200,.08)}
.project-open-row strong{font-size:13px}
.project-open-row small{color:var(--muted);font-size:11.5px}
/* Das Archiv sitzt jetzt im Fenster und braucht keinen eigenen Kachelrahmen. */
.archive-in-dialog{padding:0;border:0;background:none;box-shadow:none;margin-top:4px}
.archive-in-dialog .section-heading{display:none}
.archive-in-dialog .advisor-intro{font-size:12px;color:var(--muted);margin-bottom:10px}
.project-dialog .seg{margin:14px 0 4px;flex-wrap:wrap}
/* Die Messkette hatte oben 18 px Abstand und unten keinen — die Feldnamen
   darunter klebten daran. */
.signal-chain{margin-bottom:22px}
.signal-chain:empty{display:none}
/* Level check: copy and actions left, selects right, meter across */
/* Level check as a signal path (11.10.2026, option C "noch wertiger"). */
.level-preflight.lp{display:block;position:relative;margin:18px 0 16px;padding:18px 20px 16px;border:1px solid var(--line-soft);border-radius:8px;
  background:linear-gradient(160deg,rgba(97,216,200,.055),rgba(9,24,30,.6) 55%),var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.lp-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.lp-eyebrow{font:500 10.5px/1 var(--sans,inherit);letter-spacing:.18em;text-transform:uppercase;color:var(--champagne)}
.lp-method{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.lp-method select{min-width:230px}
.lp-note[data-kind=warn]{color:var(--champagne)}
.lp-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.lp-gain-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px}
.lp-cap{font:500 10.5px/1 var(--sans,inherit);letter-spacing:.18em;text-transform:uppercase;color:var(--champagne)}
.lp-val{font:300 22px/1 "IBM Plex Sans",system-ui,sans-serif;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.lp-val small{font-size:12px;font-weight:400;color:var(--muted);margin-left:6px;letter-spacing:0}
.lp-note{display:block;margin-top:6px;color:var(--faint);font-size:11.5px;line-height:1.45}
.lp input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0;--fill:50%}
.lp input[type=range]:focus-visible{outline:none}
.lp input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--champagne) 0,var(--champagne) var(--fill),rgba(217,201,174,.16) var(--fill))}
.lp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fffdf8 0,#e9dec7 32%,#b9a989 78%,#8f8167 100%);box-shadow:0 0 0 1px rgba(10,26,32,.6),0 3px 8px rgba(0,0,0,.45),0 0 0 5px rgba(217,201,174,.07)}
.lp input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px rgba(10,26,32,.6),0 0 0 5px rgba(97,216,200,.28)}
.lp input[type=range]:disabled{opacity:.45}
.lp-path{position:relative;display:flex;align-items:center;gap:0;height:46px;margin:0 0 6px}
.lp-end{flex:0 0 auto;font:500 10px/1 var(--sans,inherit);letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);padding:0 10px}
.lp-row{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);gap:26px;align-items:center;padding:12px 0;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(217,201,174,.18),transparent) 1}
.lp-ctl{min-width:0}
.lp-canvas{display:block;width:100%;height:58px;border:0;background:transparent}
#level-check-canvas.lp-canvas{height:84px}
.lp-wire{flex:1;height:1px;background:rgba(217,201,174,.32)}
.lp-wire:first-child{background:linear-gradient(90deg,rgba(217,201,174,.16),rgba(217,201,174,.4))}.lp-wire:nth-last-child(2){background:linear-gradient(90deg,rgba(217,201,174,.4),rgba(217,201,174,.16))}
.lp-station{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(217,201,174,.42);
  background:radial-gradient(circle at 50% 35%,rgba(217,201,174,.10),rgba(10,26,32,.4) 70%);box-shadow:0 0 0 4px rgba(217,201,174,.04)}
.lp-station svg{width:20px;height:20px;fill:none;stroke:var(--champagne);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.lp-pulse{position:absolute;top:50%;left:0;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#bff3ea;box-shadow:0 0 10px 2px rgba(97,216,200,.55);opacity:0}
.lp.is-running .lp-pulse{animation:lp-run 1.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lp-run{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
.lp-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.lp-foot .level-result{padding:5px 12px 5px 22px;border-radius:999px;border:1px solid var(--line);position:relative;font-size:12.5px}
.lp-foot .level-result::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--faint)}
.lp-foot .level-result.tone-ok::before,.lp-foot .level-result.tone-good::before{background:var(--accent);box-shadow:0 0 6px rgba(97,216,200,.7)}
.lp-foot .level-result.tone-warn::before{background:var(--champagne)}
.lp-foot .level-result.tone-loud::before{background:#f0963c;box-shadow:0 0 6px rgba(240,150,60,.6)}
.lp-foot .level-result.tone-loud{color:#f5b169;border-color:rgba(240,150,60,.45)}
.lp-foot .level-result.tone-bad::before,.lp-foot .level-result.tone-danger::before{background:#e5484d;box-shadow:0 0 7px rgba(229,72,77,.7)}
.lp-foot .level-result.tone-danger{color:#ff8a8a;border-color:rgba(229,72,77,.55)}
.lp-hint{flex:1 1 280px;margin:0;color:var(--faint);font-size:11.5px;line-height:1.45}
@media(max-width:820px){.lp-row{grid-template-columns:1fr;gap:10px}.lp-head{flex-wrap:wrap}.lp-method{margin-left:0;width:100%}.lp-method select{flex:1;min-width:0}.lp-end{display:none}}
/* Sections of the thorough way (one card): signal, five-point series, single measurement */
.guide-block{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.guide-block>h3{margin:0 0 6px;font-size:15.5px}
.guide-block>h3+.fine-print{margin:0 0 12px}
.link-button{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}
/* "Hier eintragen" ist eine Markierung, keine Warnung: Akzentfarbe statt Orange. */
.device-check .tone-pick{border-color:var(--accent);background:rgba(97,216,200,.09)}
.device-check .tone-pick b{color:var(--accent)}
/* Überschriften der beiden Kurvenfelder unter Links/Rechts. */
#expert-analysis .paths-heading{margin:22px 0 10px;font-size:14px}
#expert-analysis .paths-heading:first-child{margin-top:4px}
#expert-analysis .mode-legend{margin-top:10px}
.project-backup-line{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5}
/* Nachhallvergleich: eigener Abschnitt, abgetrennt und eingeklappt. */
.materials-fold{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.materials-fold>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:12px 14px;border:1px solid var(--line-soft);border-radius:4px;background:rgba(10,26,32,.45)}
.materials-fold>summary::-webkit-details-marker{display:none}
.materials-fold>summary::before{content:'▸';font-size:18px;line-height:1;color:var(--accent);
  transition:transform .15s}
.materials-fold[open]>summary::before{transform:rotate(90deg)}
.materials-fold>summary b{font-size:13px;color:var(--text);white-space:nowrap}
.materials-fold>summary small{color:var(--muted);font-size:11.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.materials-fold[open]>summary{margin-bottom:14px}
.project-backup-line[data-kind=error]{color:#ffb294}
/* Gerätecheck: eingeklappt genügt die Ampel. */
.device-fold>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:12px 14px;margin-top:12px;border:1px solid var(--line-soft);border-radius:4px;
  background:rgba(10,26,32,.45)}
.device-fold>summary::-webkit-details-marker{display:none}
/* Gleicher Pfeil wie in den übrigen Aufklappbereichen: 18 px, Akzentfarbe,
   links vor dem Text — vorher stand hier ein 12-px-Pfeil rechts. */
.device-fold>summary::before{content:'▸';font-size:18px;line-height:1;color:var(--accent);
  transition:transform .15s}
.device-fold[open]>summary::before{transform:rotate(90deg)}
.device-fold>summary b{font-size:13px;color:var(--text);white-space:nowrap;flex:none}
.device-fold>summary small{color:var(--muted);font-size:11.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.device-lamp{flex:none;width:11px;height:11px;border-radius:50%;background:#6fd0b4;
  box-shadow:0 0 0 3px rgba(111,208,180,.16)}
.device-fold[data-tone=warn] .device-lamp{background:#e4b16f;box-shadow:0 0 0 3px rgba(228,177,111,.16)}
.device-fold[data-tone=bad] .device-lamp{background:#ef856f;box-shadow:0 0 0 3px rgba(239,133,111,.16)}
.device-fold[data-tone=warn]>summary{border-color:#6a563a}
.device-fold[data-tone=bad]>summary{border-color:#7d4a41}
.primary .room-card{width:auto}
/* Room views keep their size: settings above, plan and 3D view on the full centre width. */
.primary .room-workbench{grid-template-columns:1fr}
@media(max-width:1050px){body[data-stage=room] .layout{grid-template-columns:1fr}}

/* Page heading at the top of the explanations; the centre starts with the work. */
.explain-title{font-size:clamp(24px,2vw,30px);line-height:1.15;margin:-6px 0 2px;color:var(--text);text-wrap:balance}
@media(min-width:1051px){.stage-banner{display:none}main>.layout{padding-top:28px}}
/* The serif headline stays as subtitle on small screens; folded cards show eyebrow, subtitle and the toggle. */
@media(max-width:1050px){.explain-title{font-size:19px;margin:6px 0 4px}}

/* Archive: series instead of single measurements, search in its own window */
#history-toolbar,#history-list,#history-open-status,#history-empty{display:none!important}
#project-card .project-series{display:none}
.archive-list{display:grid;gap:8px;margin-top:6px}
.archive-series{border:1px solid var(--line-soft);border-radius:4px;background:rgba(10,26,32,.4)}
.archive-series>summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
.archive-series>summary::-webkit-details-marker{display:none}
.archive-series>summary::before{content:"▸";color:var(--faint);margin-right:-6px;grid-column:1;display:none}
.archive-series[open]>summary{border-bottom:1px solid var(--line-soft)}
.archive-title strong{display:block;font-weight:600}
.archive-title small{display:block;color:var(--faint);font-size:12.5px;margin-top:2px}
.archive-facts{color:var(--muted);font-size:13px;white-space:nowrap}
.archive-body{padding:12px 14px}
.archive-matrix{border-collapse:collapse;font-size:13px}
.archive-matrix th,.archive-matrix td{padding:5px 12px 5px 0;text-align:left;border-top:1px solid var(--line-soft)}
.archive-matrix th{font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-top:0}
.archive-cell{font:500 12px var(--mono);color:var(--text);background:#0b1f26;border:1px solid #355c49;border-radius:3px;padding:4px 7px;margin:0 4px 4px 0;cursor:pointer}
.archive-cell.warn{border-color:#6a5a33}.archive-cell.bad{border-color:#6d4539}
.archive-cell:hover{border-color:var(--accent)}
.archive-extra{list-style:none;margin:8px 0 0;padding:0}
.archive-delays{margin:0;padding-left:18px;color:var(--muted);font-size:13px}
.archive-dialog{width:min(900px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:22px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text)}
.archive-dialog::backdrop{background:rgba(4,12,16,.72)}
.archive-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.archive-dialog-head h2{margin:4px 0 0;font-size:20px}
.archive-filters{display:grid;grid-template-columns:2fr 1.4fr 1fr 1fr 1fr;gap:10px;align-items:end}
.archive-filters .check-line{margin:0}
.archive-count{color:var(--muted);font-size:13px;margin:12px 0 6px}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--sans);border-radius:3px;padding:5px 7px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.good{color:#7fd4a0;border-color:#355c49}.pill.warn{color:#f0c36a;border-color:#6a5a33}.pill.bad{color:#ff9f86;border-color:#6d4539}
@media(max-width:820px){.archive-filters{grid-template-columns:1fr 1fr}.archive-series>summary{grid-template-columns:1fr}.archive-facts{white-space:normal}}

/* Expert analysis: room modes as a floor plan */
.mode-map{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(235px,1fr);gap:24px;align-items:start;margin:4px 0 26px;padding:18px;border:1px solid var(--line-soft);border-radius:6px;background:linear-gradient(160deg,rgba(97,216,200,.05),rgba(10,26,32,.5))}
.mode-figure canvas{display:block;height:auto;width:100%;max-width:100%}
.mode-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px}
.mode-chip{white-space:nowrap;font:500 12px var(--mono);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:3px;padding:5px 8px;cursor:pointer}
.mode-chip b{font-weight:600;color:#ffc58e;margin-left:2px}
.mode-readout{margin:8px 0 0;min-height:2.6em;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mode-figure canvas{cursor:crosshair}
.mode-chip.mode-chip-sum{color:var(--text);border-color:#8a6d3b}
.mode-chip.mode-chip-sum[aria-pressed="true"]{background:rgba(217,201,174,.14);border-color:#d9c9ad}
.mode-chip.measured{color:var(--text);border-color:#3d6b62}
.mode-chip.measured::after{content:" ●";color:var(--accent);font-size:9px}
.mode-chip[aria-pressed="true"]{background:rgba(97,216,200,.14);border-color:var(--accent);color:var(--text)}
.mode-info strong{display:block;font-size:16px;margin-bottom:4px}
.mode-info p{margin:0 0 10px;color:var(--muted);font-size:13.5px}
.mode-coupling{border-collapse:collapse;font-size:13px;margin:4px 0 10px}
.mode-coupling th,.mode-coupling td{padding:5px 18px 5px 0;text-align:left;border-top:1px solid var(--line-soft)}
.mode-coupling th{font:500 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border-top:0}
@media(max-width:820px){.mode-map{grid-template-columns:1fr}}
.mode-figure{position:relative}
.mode-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--faint);margin-top:8px}
.mode-chip b{font-weight:600;color:#ffc58e;margin-left:2px}
.mode-readout{margin:8px 0 0;min-height:2.6em;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mode-figure canvas{cursor:crosshair}
.mode-chip.mode-chip-sum{color:var(--text);border-color:#8a6d3b}
.mode-chip.mode-chip-sum[aria-pressed="true"]{background:rgba(217,201,174,.14);border-color:#d9c9ad}
.mode-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* Hero: one motif per step, drawn from the project's own measurements */
.hero{position:relative;container-type:inline-size;height:190px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:radial-gradient(120% 140% at 70% 0%,#143540 0%,#0f262e 45%,#0c1f25 100%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-text{position:absolute;left:26px;top:24px;max-width:37%;pointer-events:none}
.hero-text .eyebrow{font-size:10.5px}
.hero-text h1{margin:8px 0 0;font:600 clamp(18px,1.7vw,25px)/1.22 var(--sans);letter-spacing:-.01em;text-wrap:balance;text-shadow:0 1px 18px rgba(8,20,24,.9)}
.hero-source{position:absolute;left:26px;bottom:14px;max-width:36%;font:400 11px/1.4 var(--mono);color:var(--faint);pointer-events:none}
@media(max-width:1050px){.hero{height:150px}.hero-text{display:none}.hero-source{display:none}}
@media(max-width:700px){.hero{height:110px}.hero-source{display:none}}

/* Explanation column as a magazine: teaser + "Weiterlesen", column can be folded */
.explain-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.explain-hide{background:none;border:0;padding:2px 0;font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);cursor:pointer}
.explain-hide:hover,.explain-hide:focus-visible{color:var(--text)}
.explain-item h3{cursor:pointer}
.explain-item .explain-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.explain-item.is-open .explain-body{display:block;-webkit-line-clamp:unset;overflow:visible}
.explain-more{background:none;border:0;padding:4px 0 0;font:500 12.5px var(--sans);color:var(--accent);cursor:pointer}
.explain-more::after{content:" →";}
.explain-item.is-open .explain-more::after{content:" ↑"}
.explain-item.is-short .explain-more{display:none}
.explain-item .explain-next{margin-top:8px}
.explain-show{display:none}
@media(min-width:1051px){
  body.explain-hidden .layout,body.explain-hidden[data-stage=room] .layout{grid-template-columns:minmax(0,1fr) 44px}
  body.explain-hidden .secondary>*:not(.explain-show){display:none!important}
  body.explain-hidden .explain-show{display:flex;position:sticky;top:28px;align-items:center;justify-content:center;width:44px;min-height:180px;padding:14px 0;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--muted);cursor:pointer}
  body.explain-hidden .explain-show span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase}
  body.explain-hidden .explain-show:hover{color:var(--text);border-color:var(--accent)}
}
@media(max-width:1050px){.explain-hide{display:none}}

/* Explanation cards folded to their heading on small screens */
.fold-toggle{display:inline-block;margin:6px 0 0;padding:0;background:none;border:0;font:500 12.5px var(--sans);color:var(--accent);cursor:pointer}
.fold-toggle::after{content:" ↓"}
.card.is-foldable:not(.is-folded)>.fold-toggle::after{content:" ↑"}
.card.is-foldable>.eyebrow,.card.is-foldable>h2,.card.is-foldable>h3,.card.is-foldable>.explain-top .eyebrow{cursor:pointer}
.card.is-folded>*:not(.eyebrow):not(.explain-top):not(h2):not(h3):not(.fold-toggle){display:none!important}
.card.is-folded>h2.explain-title{margin-bottom:0}
.card.is-folded>h3{margin-bottom:0}
.card.is-folded{padding-top:16px;padding-bottom:16px}
/* Narrow screens: cards fill the column (no shrink-to-content), the overview's
   folded cards share one row with equal height; an opened card takes the
   whole row. Without expert mode only Hintergrund is there and spans the row. */
@media(max-width:1050px){
  .secondary{align-items:stretch}
  body[data-stage=overview] .secondary{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;align-items:stretch;gap:14px}
  body[data-stage=overview]:not(.expert-mode) .secondary{grid-template-columns:minmax(0,1fr)}
  body[data-stage=overview] .secondary>.card.is-foldable:not(.is-folded){grid-column:1/-1}
  body[data-stage=overview] .secondary>.explain-card{grid-column:auto}
  body[data-stage=overview] .secondary>.explain-card.is-foldable:not(.is-folded){grid-column:1/-1}
}
@media(max-width:720px){
  body[data-stage=overview] .secondary{display:flex;flex-direction:column;gap:14px}
}
/* The overview names the next step in the project card already; the guide
   card would say it a second time. */
body[data-stage=overview] .context-card{display:none}
/* Narrow screens stack the guide card below everything, where it only repeats
   the hint of the action bar at the foot; the wide layout keeps it beside the
   work as a companion. */
@media(max-width:1050px){.context-card{display:none!important}}

/* Help centre: manual and search */
.help-open{font:600 12px var(--sans);letter-spacing:.04em;color:#b6c7c8;background:transparent;border:1px solid #355a62;border-radius:5px;padding:7px 11px;margin-right:10px;cursor:pointer}
.help-open:hover,.help-open:focus-visible{color:var(--text);border-color:var(--accent)}
.guide-dialog{width:min(760px,calc(100vw - 34px))}
.guide-search{display:block;margin:14px 0 12px}
.guide-search input{width:100%;box-sizing:border-box;padding:10px 12px;font:inherit;font-size:15px;color:var(--text);background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:5px}
.guide-search input:focus{outline:none;border-color:var(--accent)}
.guide-results.hidden{display:none}
.guide-hit,.guide-toc li button{display:block;width:100%;text-align:left;padding:10px 12px;margin:0 0 6px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:5px;color:var(--text);font:inherit;cursor:pointer}
.guide-hit:hover,.guide-toc li button:hover{border-color:var(--accent)}
.guide-hit strong,.guide-toc li button strong{display:block;font-size:14.5px}
.guide-hit small,.guide-toc li button small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px;line-height:1.45}
.guide-kind{display:block;font:500 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.guide-toc{list-style:none;padding:0;margin:0}
.guide-lead{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0 0 12px}
.guide-article h3{margin:6px 0 8px;font-size:20px}
.guide-article ol{padding-left:20px;line-height:1.55}
.guide-article ol li{margin-bottom:6px}
.guide-tip{border-left:3px solid var(--accent);padding-left:10px;color:var(--muted);font-size:13.5px}
/* The help's „next“ box (styles.css .help-next) only with a text: a step's
   own explanation and some help items have none, then no empty bar. */
.help-next:empty{display:none}
.guide-article .action-row{margin-top:14px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@container (max-width:760px){.hero-source{display:none}}

/* Time views inside the expert analysis (tab "Zeitverhalten"): no second card */
.time-card.in-expert{border:0;background:none;box-shadow:none;padding:0;margin:0}
.time-card.in-expert>.section-heading{display:none}

/* Materials: matching the model to the measured decay */
.calibration{margin-top:14px;padding:16px 18px;border:1px solid var(--line-soft);border-left:2px solid var(--accent);border-radius:4px;background:rgba(97,216,200,.04);display:grid;gap:8px}
.calibration p{margin:0;color:var(--muted);font-size:13.5px}
.calibration .action-row{margin-top:4px}

/* Measurement assistant: readable from the listening seat */
.assistant{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 40px);padding:26px 30px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);text-align:center}
.assistant::backdrop{background:rgba(4,12,16,.86)}
.assistant-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;text-align:left}
.assistant-options{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.assistant-options select{margin-left:6px}
.assistant-main{display:flex;justify-content:center;align-items:center;gap:36px;margin:22px 0 4px}
.assistant-point{font:600 clamp(84px,16vw,150px)/1 var(--sans);letter-spacing:-.03em;color:var(--accent)}
.assistant-map{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:6px}
.assistant-map span{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font:500 12px var(--mono);color:var(--faint)}
.assistant-map span:nth-child(1){grid-column:2;grid-row:1}.assistant-map span:nth-child(2){grid-column:1;grid-row:2}.assistant-map span:nth-child(3){grid-column:2;grid-row:2}.assistant-map span:nth-child(4){grid-column:3;grid-row:2}.assistant-map span:nth-child(5){grid-column:2;grid-row:3}
.assistant-map span.on{background:var(--accent);border-color:var(--accent);color:#07242a}
.assistant-side{font:500 clamp(22px,3.4vw,32px)/1.2 var(--sans);margin-bottom:18px}
.assistant-status{min-height:3.2em;font-size:clamp(16px,2.2vw,20px);color:var(--champagne);max-width:36em;margin:0 auto 16px;text-wrap:balance}
.assistant progress{width:100%;height:6px}
.assistant-small{color:var(--faint);font-size:13px;margin:8px 0 18px}
.assistant-actions{display:flex;justify-content:center;gap:12px}
.assistant-actions .button{min-width:150px}
.zc-forecast{fill:none;stroke:#d9c9ae;stroke-width:1.6;stroke-dasharray:5 4}
.lg-forecast{background:repeating-linear-gradient(90deg,#d9c9ae 0 5px,transparent 5px 8px)}
.check-forecast{margin:10px 0 0;font-size:14px;color:var(--muted)}
.check-forecast.is-review{color:var(--champagne)}

/* What if: move the seat */
.whatif-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;align-items:end;margin:6px 0 16px}
.whatif-controls .field span{display:flex;justify-content:space-between;gap:10px}
.whatif-controls .field b{font:500 12.5px var(--mono);color:var(--accent);letter-spacing:0;text-transform:none}
.whatif-controls input[type=range]{width:100%;accent-color:var(--accent)}
.whatif-controls .action-row{grid-column:1/-1;margin:0}
@media(max-width:720px){.whatif-controls{grid-template-columns:1fr}}

/* Toggles under the 3D view, same look as the other segmented controls */
.view-tools{margin-top:10px;width:max-content;max-width:100%}
.view-tools button{display:inline-flex;align-items:center;gap:8px}
/* Der aktive Zustand steht jetzt in der Beschriftung („ausblenden“) und im
   Rahmen; ein zusätzlicher Punkt davor hat nur doppelt dasselbe gesagt. */
.view-tools button.is-on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(97,216,200,.7)}
.blindtest .assistant-point{font-size:clamp(64px,12vw,120px);margin:18px 0 10px}
.blindtest .assistant-actions .button{min-width:120px}
.report-progress{width:min(520px,calc(100vw - 32px));padding:28px 32px;text-align:center}
.report-progress .assistant-status{min-height:2.6em;margin-top:14px}

/* Hörplatz-Messung (einfacher Weg) */
.seat-card .advisor-intro{margin-bottom:6px}
/* The run as it plays: the header's Kammlinien, only while recording (seat-ui.mjs liveRidges) */
.seat-live{margin-top:14px}
.seat-live[hidden]{display:none}
.seat-live canvas{display:block;width:100%;height:200px}
@media(max-width:560px){.seat-live canvas{height:140px}}
.assistant-live{margin:0 0 18px}
.assistant-live[hidden]{display:none}
.assistant-live canvas{display:block;width:100%;height:180px}
@media(max-width:560px){.assistant-live canvas{height:130px}}
.seat-result{margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.03)}
.seat-result strong{display:block;margin-bottom:6px}
.seat-result p{margin:8px 0;line-height:1.55}
.seat-result .delay-line.is-fail{color:#ffb294}
.seat-result .delay-line.is-review{color:#f0c78e}
.seat-result .button{margin-top:10px}

/* Raum, Schritt D: Behandlung aus der Messung (0.15.112) */
.treatment-plan-card .tp-section{margin-top:22px}
.treatment-plan-card .tp-section h3{font-size:15px;margin:0 0 8px;color:var(--text)}
.treatment-plan-card .tp-sub{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.treatment-plan-card .tp-table td small{display:block;color:var(--muted);margin-top:2px}
.treatment-plan-card .tp-table tr.is-behandeln td:nth-child(3){color:#f0b48a}
.treatment-plan-card .tp-table tr.is-optional td:nth-child(3){color:var(--champagne)}
.treatment-plan-card .tp-table tr.is-unkritisch td,.treatment-plan-card .tp-table tr.is-spaet td{color:var(--muted)}
.treatment-plan-card .tp-btn{padding:6px 10px;font-size:12px;margin:0 6px 6px 0}
.treatment-plan-card .tp-btn.is-on{opacity:.7}
.treatment-plan-card .tp-item{border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin:8px 0;display:grid;gap:4px}
.treatment-plan-card .tp-item small{color:var(--muted)}
.treatment-plan-card .tp-item.is-installed{border-color:rgba(97,216,200,.45)}
.treatment-plan-card .tp-item .action-row{align-items:center;gap:10px;margin-top:6px}
.treatment-plan-card .tp-status{width:auto;min-width:130px}
@media (max-width:720px){.treatment-plan-card .tp-table th:nth-child(5),.treatment-plan-card .tp-table td:nth-child(5){display:none}}
/* Phase 2: Empfehlungen (0.15.113) */
.treatment-plan-card .tp-pref{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.treatment-plan-card .tp-pref-label{font-size:13px;color:var(--text);margin-right:4px}
.treatment-plan-card .tp-pref-note{flex-basis:100%;color:var(--muted)}
/* The room's kind as it is: its picture and name, chosen in step A (treatment-plan-ui.mjs renderProfile, 11.10.2026). */
.treatment-plan-card .tp-kind{display:inline-flex;align-items:center;gap:10px}
.treatment-plan-card .tp-kind-icon,.treatment-plan-card .tp-kind-icon svg{display:block;width:26px;height:26px}
.treatment-plan-card .tp-kind strong{font-size:15px;font-weight:600;color:var(--text)}
.treatment-plan-card .tp-rec{border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin:10px 0;display:grid;gap:6px}
.treatment-plan-card .tp-rec.is-info{opacity:.85}
.treatment-plan-card .tp-rec-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.treatment-plan-card .tp-badge{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:3px;padding:2px 6px;color:var(--muted);white-space:nowrap}
.treatment-plan-card .tp-rec.is-sicher .tp-badge{color:var(--accent);border-color:rgba(97,216,200,.45)}
.treatment-plan-card .tp-rec.is-nachmessen .tp-badge{color:var(--champagne);border-color:var(--champagne-line)}
.treatment-plan-card .tp-rec-befund{margin:0;font-size:13px;color:var(--text)}
.treatment-plan-card .tp-rec-rows{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0;font-size:12.5px}
.treatment-plan-card .tp-rec-rows dt{color:var(--muted)}
.treatment-plan-card .tp-rec-rows dd{margin:0;color:var(--text)}
.treatment-plan-card .tp-rec .tp-btn{justify-self:start}
.treatment-plan-card .tp-recs-box>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.treatment-plan-card .tp-recs-box>summary::-webkit-details-marker{display:none}
.treatment-plan-card .tp-recs-box>summary::before{content:'▸';color:var(--accent);font-size:13px;transition:transform .15s}
.treatment-plan-card .tp-recs-box[open]>summary::before{transform:rotate(90deg)}
.treatment-plan-card .tp-recs-box>summary h3{margin:0}
.treatment-plan-card .tp-recs-count{font-weight:400;color:var(--muted);font-size:13px}
.treatment-plan-card .tp-recs-box[open]>#tp-recs{margin-top:8px}
.treatment-plan-card .tp-evidence summary{cursor:pointer;font-size:14px;color:var(--text);margin:6px 0}
.treatment-plan-card .tp-evidence h4{font-size:13px;margin:16px 0 6px;color:var(--text)}
.treatment-plan-card .tp-check{margin:6px 0 0;font-size:12.5px}
.treatment-plan-card .tp-check.is-erfolg{color:var(--accent)}
.treatment-plan-card .tp-check.is-teilweise{color:var(--champagne)}
.treatment-plan-card .tp-check.is-ohne{color:#f0b48a}
@media (max-width:720px){.treatment-plan-card .tp-rec-rows{grid-template-columns:1fr}.treatment-plan-card .tp-rec-rows dt{margin-top:4px}}
/* 0.15.114: products, bill of materials, microphone guide */
.treatment-plan-card .tp-products{border-top:1px solid var(--line);padding-top:6px}
.treatment-plan-card .tp-products summary{cursor:pointer;font-size:12.5px;color:var(--accent)}
.treatment-plan-card .tp-product{display:grid;gap:3px;padding:8px 0;border-bottom:1px solid var(--line)}
.treatment-plan-card .tp-product:last-of-type{border-bottom:0}
.treatment-plan-card .tp-product small{color:var(--muted);font-size:12px;line-height:1.45}
.treatment-plan-card .tp-product .action-row{margin-top:4px}
.treatment-plan-card .tp-product-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13px}
.treatment-plan-card .tp-trust{font-size:11px;color:var(--muted);white-space:nowrap}
.treatment-plan-card .tp-product-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.treatment-plan-card .tp-product-pick select{max-width:100%;min-width:0;flex:1 1 220px}
.treatment-plan-card .tp-count{width:64px}
.treatment-plan-card .tp-bill{margin-top:14px}
.treatment-plan-card .tp-bill h3{margin:0 0 6px}
.treatment-plan-card .tp-bill-total td{font-weight:600;border-top:1px solid var(--line)}
.treatment-plan-card .tp-bill-table{width:100%;font-size:13px}
@media (max-width:640px){.treatment-plan-card .tp-bill table{display:block;overflow-x:auto}}
.treatment-plan-card .tp-knapp{color:var(--champagne)!important}
/* 0.15.116: mounting plan (Montageplan) */
.treatment-plan-card .mp-block{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.treatment-plan-card .mp-block h3{margin:0 0 4px}
.treatment-plan-card .mp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.treatment-plan-card .mp-stage{overflow-x:auto;background:#0b1d23;border:1px solid var(--line);border-radius:6px;padding:8px}
.mp-svg{display:block;width:100%;height:auto;max-height:520px;min-width:420px}
.mp-svg .mp-wall{fill:#10262d;stroke:#5d7b80;stroke-width:1.5}
.mp-svg .mp-outline{fill:#10262d;stroke:#8fb1ad;stroke-width:2.5}
.mp-svg .mp-opening{fill:#18323a;stroke:#7a9aa0;stroke-dasharray:4 3}
.mp-svg .mp-furniture{fill:#2a2a24;stroke:#6f6a5c}
.mp-svg .mp-absorber,.mp-svg .mp-segel{fill:rgba(97,216,200,.35);stroke:#61d8c8;stroke-width:1.5}
.mp-svg .mp-diffusor{fill:rgba(217,201,173,.35);stroke:#d9c9ad;stroke-width:1.5}
.mp-svg .mp-bassfalle{fill:rgba(240,180,138,.4);stroke:#f0b48a;stroke-width:1.5}
.mp-svg .mp-teppich{fill:rgba(170,150,130,.3);stroke:#a99682;stroke-width:1.2}
.mp-svg .mp-dashed{fill:rgba(97,216,200,.12);stroke-dasharray:6 4}
.mp-svg .mp-bar{stroke-width:7;stroke-linecap:butt;fill:none}
.mp-svg line.mp-bar.mp-absorber,.mp-svg line.mp-bar.mp-segel{stroke:#61d8c8}
.mp-svg line.mp-bar.mp-diffusor{stroke:#d9c9ad}
.mp-svg .mp-joint{stroke:#61d8c8;stroke-width:.8;opacity:.7}
.mp-svg .mp-badge circle{fill:#e6f3f0;stroke:#0b1d23;stroke-width:1.5}
.mp-svg .mp-badge text{fill:#0b1d23;font:700 12px/1 var(--font-sans,system-ui);text-anchor:middle}
.mp-svg .mp-speaker{fill:#8fb1ad}
.mp-svg .mp-speaker-label{fill:#0b1d23;font:700 10px/1 system-ui;text-anchor:middle}
.mp-svg .mp-seat{fill:#61d8c8}
.mp-svg .mp-label,.mp-svg .mp-wall-label{fill:#9fb4b7;font:11px/1 system-ui}
.mp-svg .mp-wall-label{text-anchor:middle}
.mp-svg .mp-dim,.mp-svg .mp-tick{stroke:#9fb4b7;stroke-width:1}
.mp-svg .mp-dim-text{fill:#c9d9d6;font:11px/1 system-ui;font-variant-numeric:tabular-nums}
.mp-svg .mp-center{text-anchor:middle}
.mp-svg .mp-origin{fill:#61d8c8;font:700 11px/1 system-ui}
.treatment-plan-card .mp-positions{display:grid;gap:8px;margin:12px 0}
.treatment-plan-card .mp-pos{display:grid;gap:3px;padding:8px 10px;border:1px solid var(--line);border-radius:6px}
.treatment-plan-card .mp-pos small{color:var(--muted);font-size:12.5px;line-height:1.45}
.treatment-plan-card .mp-pos-head{display:flex;gap:8px;align-items:center;font-size:13.5px}
.treatment-plan-card .mp-warn{color:#f0b48a!important}
.treatment-plan-card .mp-num{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;margin-right:8px;border-radius:11px;background:#e6f3f0;color:#0b1d23;font:700 12px/1 system-ui;vertical-align:1px}
.treatment-plan-card .mp-pos-head .mp-num{margin-right:0}
@media (max-width:640px){.mp-svg{min-width:360px}}
/* 0.15.117: profile check (traffic light) */
.treatment-plan-card .tp-check-table{width:100%;font-size:13px;margin-top:10px}
.treatment-plan-card .tp-check-table td small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.treatment-plan-card .tp-light{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0;background:#6f8488}
.treatment-plan-card .tp-light.is-gut{background:#61d8c8}
.treatment-plan-card .tp-light.is-mittel{background:#d9c9ad}
.treatment-plan-card .tp-light.is-schlecht{background:#f0b48a}
.treatment-plan-card .tp-btn[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:640px){.treatment-plan-card .tp-check-table{display:block;overflow-x:auto}}
.sound-legend .sound-plan{display:inline-block;width:14px;height:10px;border-radius:2px;background:rgba(97,216,200,.34);border:1px solid #61d8c8;vertical-align:middle;margin-right:6px}
.mp-svg .mp-conflict{fill:rgba(255,96,80,.12);stroke:#ff6050;stroke-width:2.2;stroke-dasharray:6 3}
.mp-svg .mp-hit{fill:transparent;stroke:none;cursor:grab;touch-action:none}
.mp-svg .mp-hit:focus-visible{stroke:#61d8c8;stroke-width:2;outline:none}
.mp-svg .mp-ghost{fill:rgba(97,216,200,.18);stroke:#61d8c8;stroke-width:2;stroke-dasharray:4 3;pointer-events:none}
.mp-svg .mp-zone{fill:none;stroke:#d9c9ad;stroke-width:1.2;stroke-dasharray:3 4;pointer-events:none}
.treatment-plan-card .mp-fields{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.treatment-plan-card .mp-field{display:grid;gap:2px;font-size:11.5px;color:var(--muted)}
.treatment-plan-card .mp-field input{width:92px}
.mp-svg *:not(.mp-hit){pointer-events:none}
/* 0.15.120: choices in the treatment card look like every other selection in
   the app (view tools, chips): accent frame, tinted ground, light text and
   the glowing dot. Not chosen stays plain; disabled is faded. Before, the
   chosen button was only dimmed (opacity .7) and looked like the inactive one. */
.treatment-plan-card .tp-choice{display:inline-flex;align-items:center;gap:8px;opacity:1}
.treatment-plan-card .tp-choice:not([aria-pressed=true]):not([aria-selected=true]){color:#aec6c8;border-color:#3f5c64;background:transparent}
.treatment-plan-card .tp-choice[aria-pressed=true],.treatment-plan-card .tp-choice[aria-selected=true]{border-color:var(--accent);background:#1b3f45;color:#bff3ea;opacity:1}
.treatment-plan-card .tp-choice[aria-pressed=true]::before,.treatment-plan-card .tp-choice[aria-selected=true]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(97,216,200,.7)}
.treatment-plan-card .tp-choice[disabled]{opacity:.45}
.mp-svg .mp-vorhang{fill:rgba(190,170,230,.3);stroke:#bea9e6;stroke-width:1.5}

/* Home screen and room menu: the rooms come first, the five steps sit behind
   the menu of a room. Home and room menu use the full width, the rail only
   shows once you are inside a step. */
body[data-stage=home] main>.workflow,body[data-stage=overview] main>.workflow,body[data-stage=account] main>.workflow{display:none}
@media(min-width:1200px){
  body[data-stage=home] main,body[data-stage=overview] main,body[data-stage=account] main{grid-template-columns:minmax(0,1fr)}
  body[data-stage=home] main>*,body[data-stage=overview] main>*,body[data-stage=account] main>*{grid-column:1}
}
body[data-stage=home] .context-card{display:none}
.actionbar[hidden]{display:none!important}

/* Where am I: all rooms › room › step */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:18px 2px 0;font-size:12.5px;color:var(--faint);min-width:0}
.crumbs[hidden]{display:none}
.crumb{background:none;border:0;padding:3px 0;font:inherit;color:var(--muted);max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.crumb{cursor:pointer}
button.crumb:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
button.crumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.crumb-sep{color:var(--faint)}
.crumb-room[aria-current]{color:var(--text);cursor:default;text-decoration:none}
.crumbs:not(.is-step) .crumb-step-sep,.crumbs:not(.is-step) .crumb-step{display:none}
.crumbs.is-page .crumb-room,.crumbs:not(.is-page) .crumb-page{display:none}
.crumb-page{color:var(--text)}
.crumb-step{color:var(--champagne)}
@media(min-width:1051px){body:not([data-stage=home]) main>.layout{padding-top:16px}}
/* Below it (phone, tablet) the step bar sits on top: the usual gap to the first card. */
@media(max-width:1050px){main>.workflow{margin-bottom:18px}}
@media(min-width:1200px){main>.crumbs:not([hidden])~.workflow{margin-top:56px}}

/* Rooms on the home screen: a tile per room with its floor plan and progress */
.rooms-card .section-heading{margin-bottom:16px}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.room-tile{display:flex;flex-direction:column;min-height:240px;padding:0;overflow:hidden;text-align:left;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.5);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s}
.room-tile:hover{border-color:rgba(97,216,200,.55)}
.room-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.room-tile-plan{display:block;height:124px;background:radial-gradient(120% 120% at 50% 0%,#143540 0%,#0d2229 70%);border-bottom:1px solid var(--line-soft)}
.room-plan{display:block;width:100%;height:100%;padding:8px 12px}
.room-plan-walls{fill:rgba(97,216,200,.07);stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.room-plan-speaker{fill:var(--champagne)}
.room-plan-seat{fill:var(--accent)}
.room-plan-path{stroke:rgba(217,201,174,.55);stroke-width:1;stroke-dasharray:2 2.5;vector-effect:non-scaling-stroke}
.room-plan-blank{fill:none;stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.room-plan-tick{fill:none;stroke:var(--faint);stroke-width:1;vector-effect:non-scaling-stroke}
.room-tile-body{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px;min-width:0}
.room-tile-name{font-size:16px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-tile-meta{font-size:12.5px;color:var(--muted);line-height:1.4}
.room-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:6px}
.room-progress i{height:4px;border-radius:2px;background:var(--line)}
.room-progress i.is-done{background:var(--accent)}
.room-progress i.is-next{background:var(--champagne)}
.room-tile-next{font-size:12.5px;color:var(--champagne)}
.room-tile-next.is-finished{color:var(--accent)}
.room-tile-date{font-size:11.5px;color:var(--faint)}
.room-tile-date:empty{display:none}
.room-add{align-items:center;justify-content:center;gap:8px;padding:24px;border-style:dashed;border-color:rgba(217,201,174,.35);background:rgba(10,26,32,.22);text-align:center}
.room-add:hover{background:rgba(97,216,200,.05)}
.room-add-plus{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--champagne-line);color:var(--champagne);font-size:26px;font-weight:300;line-height:1}
.room-add:hover .room-add-plus{border-color:var(--accent);color:var(--accent)}
.room-add strong{font-size:16px;font-weight:600}
.room-add small{font-size:12.5px;color:var(--muted);max-width:28ch;line-height:1.45}
.room-grid.is-empty{grid-template-columns:minmax(0,1fr)}
.room-grid.is-empty .room-add{min-height:220px}
.rooms-card .project-backup-line{margin:14px 0 0}
.room-new-dialog .field{display:grid;gap:6px;margin:0}
.room-new-dialog input{width:100%}
@media(max-width:560px){
  .room-grid{grid-template-columns:minmax(0,1fr)}.room-tile{min-height:0}.room-tile-plan{height:110px}
  /* On the phone the new room is one row: plus, name and hint side by side. */
  .room-grid:not(.is-empty) .room-add{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;justify-items:start;padding:14px 16px;text-align:left}
  .room-grid:not(.is-empty) .room-add-plus{width:40px;height:40px;font-size:22px}
}

/* Room menu: the steps of one room, the next open one stands out */
.room-menu-meta{margin:2px 0 0;font-size:13px;color:var(--muted)}
.room-menu-meta:empty{display:none}
.room-menu{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.room-step-btn{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.45);color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s}
.room-step-btn:hover{border-color:rgba(97,216,200,.45);background:rgba(21,51,64,.5)}
.room-step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.room-step-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.room-step-kicker{font:500 10.5px var(--sans);letter-spacing:.18em;color:var(--faint)}
.room-step-text strong{font-size:16px;font-weight:600}
.room-step-text small{font-size:12.5px;color:var(--muted);line-height:1.4}
.room-step-state{font-size:12px;font-weight:600;white-space:nowrap;color:var(--faint)}
.room-step-state:empty{display:none}
.room-step.is-done .room-step-state{color:var(--accent)}
.room-step.is-done .room-step-state::before{content:"✓ "}
.room-step-number{position:relative;justify-self:center;font:400 40px/1 var(--display);color:var(--muted);font-variant-numeric:lining-nums}
.room-step.is-next .room-step-number{color:var(--accent)}
.room-step.is-done .room-step-number::after,.room-step.is-done .step-ico::after{content:"";position:absolute;right:-12px;top:-2px;width:15px;height:15px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23062028' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:0 0 0 2px var(--bg)}
.room-step.is-next .room-step-btn{border-color:rgba(97,216,200,.6);background:linear-gradient(90deg,rgba(97,216,200,.12),rgba(97,216,200,.03))}
.room-step.is-next .step-ico{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(97,216,200,.7),0 0 20px rgba(97,216,200,.16)}
.room-step.is-next .room-step-kicker{color:var(--champagne)}
.room-step.is-next .room-step-state{padding:9px 16px;border-radius:4px;background:var(--accent);color:var(--accent-ink)}
.room-step.is-next .room-step-btn:hover .room-step-state{background:#7ae3d5}
.room-menu-card .project-next:empty{display:none}
.room-menu-card .project-actions{margin-top:18px}
@media(max-width:560px){
  .room-step-btn{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .room-step-btn .step-ico{width:40px;height:40px}
  .room-step-number{font-size:34px}
  .room-step-state{grid-column:2;justify-self:start}
}

/* Start page banner: the name large in champagne, "Startseite" small below in white. */
body[data-stage=home] .hero-text{max-width:none}
body[data-stage=home] .hero-text .eyebrow{font:500 clamp(28px,2.7vw,38px)/1.1 var(--sans);letter-spacing:.2em;color:var(--champagne);white-space:nowrap}
body[data-stage=home] .hero-text h1{margin-top:0;font:600 clamp(26px,2.4vw,34px)/1.15 var(--sans);letter-spacing:-.005em;color:var(--text)}
body[data-stage=home] .stage-banner .eyebrow{font:500 26px/1.1 var(--sans);letter-spacing:.2em;color:var(--champagne)}
body[data-stage=home] .stage-banner h1{margin-top:0;font:600 24px/1.2 var(--sans);color:var(--text)}

/* Account button at the top right: a rectangle like the other controls. */
.account-button{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--sans);letter-spacing:.04em;color:#b6c7c8;background:transparent;border:1px solid #355a62;border-radius:5px;padding:6px 12px 6px 9px;cursor:pointer}
.account-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.account-button:hover,.account-button:focus-visible{color:var(--text);border-color:var(--accent)}
.account-button.is-active{color:var(--accent);border-color:rgba(97,216,200,.6);background:rgba(97,216,200,.07)}
@media(max-width:560px){.account-button span{display:none}.account-button{padding:6px 8px}}

/* Account page: its own full-width page with a menu on the left. */
body[data-stage=account] #hero{display:none!important}
.account-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;margin-top:10px}
.account-nav{display:flex;flex-direction:column;gap:4px}
.account-nav button{text-align:left;font:500 14px var(--sans);color:var(--muted);background:none;border:1px solid transparent;border-radius:5px;padding:10px 12px;cursor:pointer}
.account-nav button:hover{color:var(--text);background:rgba(21,51,64,.5)}
.account-nav button[aria-selected=true]{color:var(--text);border-color:rgba(97,216,200,.45);background:linear-gradient(90deg,rgba(97,216,200,.10),rgba(97,216,200,.02))}
.account-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.account-panel h3{font-size:18px;margin:4px 0 10px}
.account-panel .fine-print{max-width:60ch}
/* „Zurück“ to the list only on the phone (below). */
.account-back{display:none}
.account-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px;margin:16px 0 4px}
.account-form .field{display:grid;gap:6px}
.account-form input:disabled{opacity:.55}
.account-soon{align-self:center;font-size:12px;color:var(--faint)}
.account-current{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
.account-badge{font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--champagne);border-radius:3px;padding:3px 8px}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 12px}
.plan{--metal:linear-gradient(150deg,#9ea3b3,#80859a 52%,#6c7184);--ink:#f3f4f7;--sub:rgba(243,244,247,.74);position:relative;display:flex;flex-direction:column;aspect-ratio:1.586;border:1px solid rgba(255,255,255,.16);border-radius:6px;overflow:hidden;
  background:var(--metal);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
/* Matte like metal cards (Jonas, 30.09.2026, Revolut as the picture): Kostenlos silver, Pro navy, Business gold with fine ribs. */
.plan::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 36%,rgba(255,255,255,.06) 62%,rgba(255,255,255,0) 82%)}
.plan-pro{--metal:linear-gradient(150deg,#4b6585,#2e4361 50%,#1f2c43)}
.plan-business{--metal:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.05) 1px 3px),linear-gradient(150deg,#d6b77f,#b9965b 55%,#9d7b46);--ink:#2b2010;--sub:rgba(43,32,16,.72)}
.plan:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 36px rgba(0,0,0,.42)}
.plan-pick{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:16px 18px 10px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.plan-pick:focus-visible{outline:2px solid var(--ink);outline-offset:-6px;border-radius:4px}
.plan-name{font-size:21px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.plan-cost{font:500 12.5px var(--mono);color:var(--sub)}
.plan-state{position:absolute;top:16px;right:18px;font-size:12px;font-weight:600;color:var(--sub)}
.plan.is-active{outline:2px solid rgba(255,255,255,.75);outline-offset:3px}
.plan.is-active .plan-pick{cursor:default}
.plan.is-active .plan-state::before{content:"✓ "}
@media(max-width:820px){.plan{aspect-ratio:2.1}}
.account-local{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.account-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:8px 0 16px;font-size:13.5px}
.account-facts dt{color:var(--faint)}
.account-facts dd{margin:0;color:var(--text)}
.account-facts .version{border:0;padding:0;margin:0;font:500 13px var(--mono);letter-spacing:.06em;color:var(--text);display:block}
/* Konto › Einstellungen › Sprache (Paket 3 der Übersetzung, 15.10.2026). */
/* Konto › Einstellungen › Sprache: the graphic menu and „Übernehmen“ beside it. */
.account-language-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:4px 0 12px}
.account-language{flex:1 1 220px;max-width:320px;min-width:0}
.account-language-row .button{min-height:40px}
@media(max-width:820px){
  .account-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .account-nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .account-nav button{white-space:nowrap}
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .account-form{grid-template-columns:minmax(0,1fr)}
}

/* Confirmations in the look of the app */
.confirm-dialog{max-width:min(460px,calc(100vw - 32px))}
/* Unterstützte Lautsprecher (speaker-catalog-ui.mjs), from the Pro plan */
.speaker-catalog{max-width:min(720px,calc(100vw - 32px))}
.speaker-catalog h3{font-size:18px;margin:10px 0 8px}
.speaker-catalog input[type=search]{width:100%;box-sizing:border-box;min-height:44px;margin:10px 0 12px;background:#0c1a23;border:1px solid #3a555e;border-radius:4px;padding:10px 12px;color:#e9f2ef;font:inherit;outline:none}
.speaker-catalog input[type=search]:focus{border-color:var(--accent);box-shadow:0 0 0 2px #61d8c824}
.speaker-catalog-body{max-height:min(44vh,480px);overflow:auto;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:10px 0}
.speaker-catalog-brands{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.speaker-catalog-brand{display:grid;grid-template-columns:1fr;row-gap:2px;align-items:center;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.45);color:var(--text);font:inherit;cursor:pointer}
.speaker-catalog-brand:hover,.speaker-catalog-brand:focus-visible{border-color:var(--accent)}
.speaker-catalog-name{font-weight:600}
.speaker-catalog-meta{font-size:12px;color:var(--muted)}
.speaker-catalog-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:4px 0 8px}
.speaker-catalog-back{padding:4px 10px;font-size:12px}
.speaker-catalog-models{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px}
.speaker-catalog-models th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:4px 8px 6px 0}
.speaker-catalog-models td{padding:6px 8px 6px 0;border-top:1px solid var(--line-soft);vertical-align:top}
.speaker-catalog-models small{display:block;font-size:11px;color:var(--muted)}
.speaker-catalog-note{margin-top:10px}
.confirm-dialog h3{font-size:18px;margin:10px 0 8px}
.confirm-text{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.55}
.button.danger-solid{background:#c46a6a;border-color:#c46a6a;color:#1a0b0b}
.button.danger-solid:hover{background:#d27d7d}

/* Device check: LiDAR is no fault, the way per link stays visible. */
.device-check .tone-info b{color:var(--champagne)}
.device-lidar-hint{margin:12px 0 0;padding:10px 12px;border-left:2px solid var(--champagne);background:rgba(217,201,174,.06);color:var(--muted);font-size:12.5px;line-height:1.5}

/* Help: "Hintergrund" for the open page, "Suchen" for manual and search */
.guide-tabs{display:inline-flex;margin:12px 0 18px}
.guide-tabs button{cursor:pointer;font:500 13px var(--sans);padding:8px 16px}
.guide-tabs button[aria-selected=true]{background:var(--panel2);color:var(--text)}
.guide-dialog .guide-bg-kicker{font:500 11px var(--sans);letter-spacing:.2em;color:var(--champagne)}
.guide-dialog .guide-bg-title{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,30px);line-height:1.15;margin:8px 0 10px;color:var(--text)}
.guide-dialog .guide-bg-lead{margin:0 0 6px;color:var(--text);font-size:14.5px;line-height:1.6}
.guide-bg-item{padding-top:14px;margin-top:14px;border-top:1px solid var(--line-soft)}
.guide-dialog .guide-bg-item h3{font-family:var(--display);font-weight:400;font-size:19px;margin:0 0 6px;color:var(--champagne)}
.guide-dialog .guide-bg-item p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}
.guide-dialog .guide-bg-item .guide-tip{margin-top:8px}

/* New room: name, photo, type and brand */
.room-new-dialog .field>span{font-size:12px;color:var(--muted)}
.room-new-seg{display:flex;flex-wrap:wrap;margin:2px 0 0}
.room-new-seg button{cursor:pointer;font:500 13px var(--sans);padding:8px 14px}
.room-new-seg button:disabled{opacity:.35;cursor:not-allowed}
.room-new-seg button[aria-pressed=true]{background:var(--text);color:var(--accent-ink);font-weight:600}
.room-new-error:empty{display:none}
.room-photo-drop{position:relative;display:grid;place-items:center;width:100%;max-width:280px;aspect-ratio:4/3;border:1px dashed rgba(217,201,174,.4);border-radius:6px;background:rgba(10,26,32,.4);color:var(--muted);cursor:pointer;overflow:hidden}
.room-photo-drop:hover,.room-photo-drop:focus-within{border-color:var(--accent);color:var(--text)}
.room-photo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.room-photo-empty{display:grid;justify-items:center;gap:6px;font-size:12.5px;pointer-events:none}
.room-photo-empty[hidden]{display:none}
.room-photo-empty svg,.room-menu-photo svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.room-photo-drop img{width:100%;height:100%;object-fit:cover;pointer-events:none}

/* Photo in the tile and in the room menu */
.room-tile-plan.has-photo{position:relative}
.room-tile-photo{display:block;width:100%;height:100%;object-fit:cover}
.room-menu-head{align-items:center}
.room-menu-head>div{flex:1;min-width:0}
.room-menu-photo{position:relative;flex:none;display:grid;place-items:center;width:76px;height:76px;margin-right:16px;border:1px dashed rgba(217,201,174,.4);border-radius:6px;background:rgba(10,26,32,.4);color:var(--muted);cursor:pointer;overflow:hidden}
.room-menu-photo:hover,.room-menu-photo:focus-within{border-color:var(--accent);color:var(--text)}
.room-menu-photo.has-photo{border-style:solid;border-color:var(--line-soft)}
.room-menu-photo.has-photo svg{display:none}
.room-menu-photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.room-menu-photo img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.room-menu-photo[hidden]{display:none}

/* Account: expert mode */
.account-expert-slot{margin:6px 0 14px}
.account-expert-slot .expert-toggle{margin:0}
.account-features{margin:0 0 12px;padding-left:18px;display:grid;gap:5px;font-size:13.5px;color:var(--text);max-width:64ch}

/* One column everywhere: the explanations moved into the help. */
.layout,body[data-stage=room] .layout{grid-template-columns:minmax(0,1fr)!important}
.actionbar-inner{justify-content:flex-end}

/* The help keeps one size whatever tab is open; the content scrolls inside. */
.guide-dialog{height:min(720px,calc(100vh - 48px));max-height:none;display:none;flex-direction:column;overflow:hidden}
.guide-dialog[open]{display:flex}
.guide-dialog>[role=tabpanel]{flex:1;min-height:0;overflow:auto;padding-right:4px}
.guide-dialog .guide-tabs{flex:none;align-self:flex-start}
.guide-device .device-check{margin-top:4px}

/* Phone and tablet: the start page title sits in the graphic, the speakers
   move right to make room. */
@media(max-width:1050px){
  body[data-stage=home] .stage-banner{display:none}
  body[data-stage=home] .hero{height:170px}
  body[data-stage=home] .hero-text{display:block;left:18px;top:18px;max-width:none}
  body[data-stage=home] .hero-text .eyebrow{font-size:22px}
  body[data-stage=home] .hero-text h1{margin-top:0;font-size:22px}
}
@media(max-width:700px){body[data-stage=home] .hero{height:150px}}

/* New room: wide on the desktop, photo left, name and description right,
   the loudspeaker brand below; stacked on the phone. */
.room-new-dialog{width:min(780px,calc(100vw - 32px));max-width:none}
.room-new-dialog form{display:grid;gap:16px}
.room-new-top{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}
.room-new-top .room-photo-drop{max-width:none;aspect-ratio:auto;min-height:200px}
.room-new-fields{display:grid;gap:12px;align-content:start}
.room-new-dialog textarea{width:100%;box-sizing:border-box;min-height:84px;resize:vertical;padding:10px 12px;font:inherit;font-size:14px;color:var(--text);background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:4px}
.room-new-dialog textarea:focus{outline:none;border-color:var(--accent)}
.room-photo-remove{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(6,20,26,.8);color:var(--text);font-size:16px;line-height:1;cursor:pointer}
.room-photo-remove[hidden]{display:none}
.room-new-dialog .room-new-seg{justify-self:start;display:inline-flex;margin-top:10px}
.room-new-seg[hidden]{display:none!important}
@media(max-width:640px){
  .room-new-top{grid-template-columns:minmax(0,1fr)}
  .room-new-top .room-photo-drop{aspect-ratio:16/9;min-height:0}
}
.brand-picker{position:relative}
.brand-picker-button{width:100%;display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:5px;background:rgba(0,0,0,.2);color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.brand-picker-button:hover,.brand-picker-button[aria-expanded=true],.brand-picker-button:focus-visible{border-color:var(--accent);outline:none}
.brand-picker-button.is-empty .brand-picker-name{color:var(--muted)}
.brand-picker-caret{margin-left:auto;color:var(--faint)}
.brand-mark{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:5px;background:linear-gradient(155deg,rgba(217,201,174,.16),rgba(217,201,174,.03)),#0d2229;box-shadow:inset 0 0 0 1px var(--champagne-line);font:600 11px var(--sans);letter-spacing:.03em;color:var(--champagne)}
/* The brands right under the button, in the window, one under the other (09.10.2026). */
.brand-picker-pop{margin:6px 0 0;padding:8px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.18);color:var(--text)}
.brand-picker-pop:not(.is-open){display:none}
.brand-picker-pop input{width:100%;box-sizing:border-box;margin-bottom:6px}
.brand-list{list-style:none;margin:0;padding:0;max-height:min(320px,45dvh);overflow:auto;display:grid;gap:2px}
.brand-option{display:flex;align-items:center;gap:12px;min-height:38px;padding:6px 10px;border-radius:5px;cursor:pointer}
.brand-option:hover,.brand-option:focus{background:rgba(97,216,200,.08);outline:none}
.brand-option[aria-selected=true]{background:rgba(97,216,200,.13)}
.brand-option-name{flex:1;font-size:14px}
.brand-option-types{font-size:11.5px;color:var(--faint)}
/* Description in the tile and under the room name */
.room-tile-desc{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-description{width:100%;background:none;border:1px solid transparent;border-radius:4px;padding:2px 8px;margin:0 0 0 -8px;color:var(--muted);font:inherit;font-size:13.5px}
.project-description:hover:not(:disabled){border-color:var(--line-soft)}
.project-description:focus{outline:none;border-color:var(--accent);color:var(--text);background:rgba(10,26,32,.5)}
/* The old right column is only the starting place of the step-1 cards,
   which move into the work column at start; it shows nothing itself. */
.layout>.secondary{display:none!important}
/* The brand list sits inside a labelled field: undo the label caps. */
.room-new-dialog .field .brand-picker span{text-transform:none;letter-spacing:normal;font-size:14px;font-weight:400;color:var(--text);margin:0}
.room-new-dialog .field .brand-picker .brand-option-types{font-size:11.5px;color:var(--faint)}
.room-new-dialog .field .brand-picker .brand-picker-caret{margin-left:auto;color:var(--faint);font-size:12px}
.room-new-dialog .field .brand-picker .is-empty .brand-picker-name{color:var(--muted)}

/* Room tile: photo in landscape, below it the plan in a square with name and brand */
.room-tile{min-height:0}
.room-tile-cover{display:grid;place-items:center;aspect-ratio:16/9;background:radial-gradient(120% 120% at 50% 0%,#143540 0%,#0d2229 70%);border-bottom:1px solid var(--line-soft);color:var(--faint);overflow:hidden}
.room-tile-cover svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;opacity:.6}
.room-tile-cover .room-tile-photo{width:100%;height:100%;object-fit:cover}
/* A photo fills its frame in its own orientation (a portrait photo zooms in
   further), also without the hover zoom: laid over the frame, because a grid
   item's 100 % height does not follow the frame's aspect ratio everywhere
   (Safari on the phone left a band above the photo). */
.room-tile-cover,.room-photo-drop,.room-menu-photo{position:relative}
.room-tile-cover .room-tile-photo,.room-photo-drop img,.room-menu-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.room-tile-info{display:flex;align-items:center;gap:14px;padding:6px 14px}
.room-tile-info .room-tile-plan{flex:none;width:80px;height:66px;background:none;border:0;display:flex;align-items:center;justify-content:center}
.room-tile-info .room-tile-plan>svg{max-width:100%;max-height:100%}
/* The room from above as a picture (room-thumb.mjs): 80 × 66 in the row's height of before. */
.room-tile-thumb{display:block;width:80px;height:66px}
.room-tile-info .room-plan{padding:0}
.room-tile-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.room-tile-brand{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-plan.is-empty .room-plan-walls{fill:none;stroke:var(--faint)}
.room-plan.is-empty .room-plan-speaker{fill:var(--faint)}
@media(max-width:560px){.room-tile-cover{aspect-ratio:16/9}}

/* Banner in the room menu: name, description, brand */
.hero-text .eyebrow:empty,.hero-sub:empty,.hero-meta:empty{display:none}
.hero-sub{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted);max-width:38ch;text-shadow:0 1px 14px rgba(8,20,24,.9)}
.hero-meta{margin-top:10px;font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--champagne)}
body[data-stage=overview] .hero-text h1{margin-top:0;font-size:clamp(22px,2.2vw,30px)}
@media(max-width:1050px){
  body[data-stage=overview] .stage-banner{display:none}
  body[data-stage=overview] .hero{height:170px}
  body[data-stage=overview] .hero-text{display:block;left:18px;top:18px;max-width:55%}
  body[data-stage=overview] .hero-text h1{font-size:20px}
  body[data-stage=overview] .hero-sub{font-size:12.5px}
}
@media(max-width:700px){body[data-stage=overview] .hero{height:150px}}
.room-menu-card .room-menu{margin-top:0}

/* Room menu as a window: photo, name and description, then the five steps */
.room-dialog{width:min(640px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);overflow:auto;padding:24px}
.room-dialog .room-menu-card{position:relative}
.room-dialog-tools{position:absolute;top:-6px;right:-6px;display:flex;align-items:center;gap:8px}
.room-dialog-tools form{margin:0}
.room-dialog .dialog-close{position:static;display:grid;place-items:center;line-height:1}
.room-dialog .room-dialog-edit{height:30px;min-height:30px;padding:0 12px;font-size:12px;line-height:1}
.room-dialog-head{display:flex;align-items:center;gap:16px;margin:0 220px 18px 0}
.room-dialog-photo{flex:none;display:grid;place-items:center;width:168px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,#143540 0%,#0d2229 70%);border:1px solid var(--line-soft);color:var(--faint)}
.room-dialog-photo img{width:100%;height:100%;object-fit:cover}
.room-dialog-photo svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;opacity:.6}
.room-dialog-title{min-width:0}
.room-dialog-title h2{margin:0;font:600 22px/1.2 var(--sans);color:var(--text);overflow-wrap:anywhere}
.room-dialog-title p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}
.room-dialog-title p:empty{display:none}
.room-dialog-title .room-dialog-speaker{margin-top:8px;font:500 12.5px/1.4 var(--sans);color:var(--champagne);letter-spacing:.02em}
.room-dialog .project-actions{margin-top:16px}
@media(max-width:560px){.room-dialog{padding:18px}.room-dialog-photo{width:112px}.room-dialog-title h2{font-size:19px}}

/* Required and invalid fields: a note in the look of the app */
.is-invalid,.is-invalid:focus{border-color:#ff9f86!important;box-shadow:0 0 0 1px rgba(255,159,134,.35)}
.field-error,.field .field-error,.field>span.field-error{display:flex;align-items:center;gap:7px;margin-top:6px;padding:6px 10px;border-radius:4px;background:rgba(255,159,134,.1);border:1px solid rgba(255,159,134,.35);color:#ffc9b9;font:500 12.5px var(--sans);letter-spacing:0;text-transform:none;width:fit-content}
.field-error::before,.field .field-error::before{content:"!";display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:#ff9f86;color:#1a0b06;font:700 11px/1 var(--sans)}

/* The page background runs to the bottom of the window: the root has its own
   colour and the glow at the top does not repeat below a short page. */
html{min-height:100%;background:var(--bg)}
/* No page zoom (no-zoom.mjs, Jonas 09.10.2026): only panning, no pinch and no double tap; a canvas that zooms on its own sets touch-action:none. */
html,body{touch-action:pan-x pan-y}
body{min-height:100vh;background-repeat:no-repeat}
.room-new-dialog .field .brand-picker .field-error{display:flex;margin-top:6px;font:500 12.5px var(--sans);color:#ffc9b9}

/* Step rail without step 4 */
.workflow-step[hidden]{display:none!important}
.workflow.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:1200px){main>.workflow.is-four{grid-template-columns:1fr}}

/* Equalizer recommendation (no step 4): sliders like in Spotify */
.eq-advice-card .seg{margin:0 0 16px}
.eq-advice-card .seg button{cursor:pointer}
.eq-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:520px}
.eq-bar{display:grid;justify-items:center;gap:8px}
.eq-bar-value{font:600 14px var(--mono);color:var(--accent)}
.eq-bar.is-zero .eq-bar-value{color:var(--faint)}
.eq-bar-track{position:relative;width:6px;height:140px;border-radius:3px;background:var(--line)}
.eq-bar-track::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:1px;background:var(--faint);opacity:.6}
.eq-bar-fill{position:absolute;left:0;right:0;border-radius:3px;background:var(--accent);opacity:.75}
.eq-bar-knob{position:absolute;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--text);box-shadow:0 0 0 3px rgba(97,216,200,.35)}
.eq-bar.is-zero .eq-bar-knob{background:var(--muted);box-shadow:none}
.eq-bar-f{font:500 12px var(--mono);color:var(--muted)}
.eq-advice-where{margin:14px 0 0}
.eq-tone{display:flex;gap:28px}
.eq-tone div{display:grid;gap:4px}
.eq-tone span{font-size:12px;color:var(--muted)}
.eq-tone strong{font:600 26px var(--mono);color:var(--accent)}


/* Hovering a room zooms gently into its photo */
.room-tile-cover .room-tile-photo{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.room-tile:hover .room-tile-photo,.room-tile:focus-visible .room-tile-photo{transform:scale(1.07)}
@media(prefers-reduced-motion:reduce){.room-tile-cover .room-tile-photo{transition:none}.room-tile:hover .room-tile-photo,.room-tile:focus-visible .room-tile-photo{transform:none}}
.stage-banner .eyebrow:empty{display:none}

/* Start page: top right two square buttons of one size, opening a room file
   (an icon) and the help. */
.rooms-head{align-items:center}
.rooms-tools{display:flex;align-items:center;gap:8px}
.rooms-tool{display:grid;place-items:center;flex:none;width:36px;height:36px;min-width:36px;padding:0;border:1px solid #5c8c89;border-radius:4px;background:#204249;color:#a4e3dd;cursor:pointer;transition:background-color .15s,color .15s}
.rooms-tool:hover,.rooms-tool:focus-visible{background:#2b6265;color:#fff}
.rooms-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
/* "+ Raum" left of the file button once a room exists (home-ui.mjs): as high as its neighbours, as wide as its word. */
.rooms-tools .rooms-tool.rooms-add{display:inline-flex;align-items:center;gap:5px;width:auto;padding:0 12px;font:600 13px var(--sans);white-space:nowrap}
.rooms-tools .rooms-tool.rooms-add span{font-size:17px;font-weight:400;line-height:1}
.rooms-tools .rooms-tool.rooms-add[hidden]{display:none}
.card>.section-heading:first-child:has(#rooms-add:not([hidden])){padding-right:176px}

/* The start page's two blocks get more light: a muted teal neon glow in one
   corner (the title block top left, the rooms top right) and a fine teal edge
   that fades out from that corner. */
.rooms-card{position:relative;background:radial-gradient(ellipse 50% 85% at 100% 0%,rgba(97,216,200,.22),rgba(97,216,200,.06) 55%,transparent 80%),linear-gradient(160deg,rgba(26,62,76,.62),rgba(16,39,47,.92) 50%),var(--panel)}
body[data-stage=home] .hero{border-color:transparent;background:radial-gradient(ellipse 42% 130% at 0% 0%,rgba(97,216,200,.22),rgba(97,216,200,.06) 55%,transparent 80%),radial-gradient(120% 140% at 70% 0%,#17404b 0%,#102a33 45%,#0c1f25 100%)}
.rooms-card::before,body[data-stage=home] .hero::after{content:'';position:absolute;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.rooms-card::before{inset:-1px;background:radial-gradient(ellipse 45% 75% at 100% 0%,rgba(125,238,222,.8),rgba(97,216,200,.2) 55%,transparent 80%)}
/* The hero clips its border, so its edge is drawn inside: teal in the corner,
   the usual line elsewhere. */
body[data-stage=home] .hero::after{inset:0;background:radial-gradient(ellipse 38% 110% at 0% 0%,rgba(125,238,222,.8),rgba(97,216,200,.2) 55%,transparent 80%),linear-gradient(var(--line),var(--line))}

/* Room tiles: larger on the desktop with a nearly square photo (5:4), so
   upright and landscape photos both fit; the new-room window shows the photo
   in exactly that format. A shadow lifts the tiles off the block. */
.room-tile{box-shadow:0 12px 28px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.22);transition:border-color .15s,background-color .15s,box-shadow .3s}
.room-tile:hover{box-shadow:0 16px 36px rgba(0,0,0,.42),0 3px 8px rgba(0,0,0,.26)}
@media(min-width:561px){
  .room-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
  .room-tile-cover{aspect-ratio:5/4}
}
.room-new-top{grid-template-columns:260px minmax(0,1fr)}
.room-new-top .room-photo-drop{aspect-ratio:5/4;min-height:0;align-self:start}
@media(max-width:640px){.room-new-top .room-photo-drop{aspect-ratio:5/4;max-width:300px}}
@media(max-width:560px){.room-new-top .room-photo-drop{aspect-ratio:16/9;max-width:none}}
/* A smaller room name, so about 16 characters fit before it is cut. */
.room-tile-name{font-size:14.5px}

/* New room: Aktiv/Passiv with a square help button beside it; the row only
   shows for a brand that builds both. */
.room-new-typerow{display:flex;align-items:center;gap:14px;margin-top:10px}
.room-new-typerow[hidden]{display:none}
.room-new-dialog .room-new-typerow .room-new-seg{margin-top:0}
.room-new-typerow .rooms-tool{width:34px;height:34px;min-width:34px}
/* Free: no brand and no type in the new-room window (home-ui.mjs) */
#room-new-speaker[hidden]{display:none}
.room-new-free{margin:2px 0 0}

/* Hovering a room: photo, plan, name and brand grow together, like one rendering. */
.room-tile-info{transform-origin:14px 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.room-tile:hover .room-tile-info,.room-tile:focus-visible .room-tile-info{transform:scale(1.045)}
@media(prefers-reduced-motion:reduce){.room-tile-info{transition:none}.room-tile:hover .room-tile-info,.room-tile:focus-visible .room-tile-info{transform:none}}

/* Notes on click instead of browser tooltips (tips.mjs): elements that carry
   one and do nothing else show the help cursor, the heroes not (Jonas,
   11.10.2026: „Nehme die Fragezeichen mauszeiger wenn man über irgendein hero
   hovert weg“). The room hero turns by drag. */
.tip-card{position:fixed;z-index:80;max-width:min(340px,calc(100vw - 16px));padding:7px 10px;border:1px solid var(--line);border-radius:4px;
  background:rgba(10,26,32,.97);color:var(--text);font:400 12.5px/1.45 var(--sans);box-shadow:0 10px 28px rgba(0,0,0,.35);pointer-events:none}
@media(hover:hover) and (pointer:fine){[data-tip]:not(button,a,input,select,label,.hero){cursor:help}}
.hero.is-turnable canvas{cursor:grab}
.hero.is-turning canvas{cursor:grabbing}

/* File pickers as a bar (file-pick.mjs): "Hochladen", after a choice green
   with a tick and the file name. The real input lies invisibly on top. */
.file-bar{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:9px 14px;border:1px dashed rgba(217,201,174,.4);border-radius:4px;
  background:rgba(10,26,32,.45);color:var(--text);font:500 13px/1.3 var(--sans);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.file-bar.is-wide{display:flex;width:100%;min-height:48px;padding-inline:16px}
.file-bar:hover,.file-bar.is-over{border-color:var(--accent);background:rgba(97,216,200,.07)}
.file-bar:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.file-bar input[type=file]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;font-size:0}
.file-bar-icon{display:grid;place-items:center;flex:none;width:18px;height:18px;color:var(--champagne)}
.file-bar-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.file-bar-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-bar.has-file{border-style:solid;border-color:rgba(127,212,160,.65);background:rgba(127,212,160,.15);color:#c9f3d9}
.file-bar.has-file .file-bar-icon{color:#7fd4a0}
/* Hochladen on the start page (project-ui.mjs, Jonas 29.09.2026): "Raum
   hochladen" as a wide banner, "Scan hochladen" and "Messung hochladen"
   under it, side by side over the same width. */
.open-uploads{display:grid;gap:8px;margin-top:14px}
.open-uploads-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.open-upload.file-bar{display:flex;width:100%;justify-content:center;min-height:52px}
.open-upload-room.file-bar{min-height:80px;font-size:15px;font-weight:600;background:rgba(217,201,174,.06)}
.open-upload-room .file-bar-icon,.open-upload-room .file-bar-icon svg{width:22px;height:22px}
@media(max-width:560px){.open-uploads-pair .open-upload.file-bar{flex-direction:column;gap:5px;min-height:64px;padding-inline:8px}}

/* Help opens below the top bar: "Hilfe" stays clickable and closes it again. */
.guide-backdrop{position:fixed;inset:0;z-index:55;background:rgba(4,14,18,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.guide-backdrop[hidden]{display:none}
body.guide-on{overflow:hidden}
body.guide-on .topbar{position:relative;z-index:60}
.guide-dialog[open]{position:fixed;z-index:57;left:0;right:0;margin:0 auto}
.help-open[aria-expanded=true]{color:var(--text);border-color:var(--accent)}

/* Step 1: where the room comes from. One bar, on a phone too: Per Hand,
   Scannen, Importieren, Exportieren (the Aufmaß as a file); "Per Hand" turns
   it into a thin heading. */
.room-source{display:grid;gap:8px}
.room-source[hidden],.room-manual[hidden]{display:none}
.room-scan-main{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}
/* A dialog without its tick box (choiceDialog without `check`): display:flex must not undo hidden. */
.check-line[hidden]{display:none}
.room-scan-go{grid-column:1/-1}
.room-scan-go .button{width:100%}
.room-scan-body{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.room-scan-body .handoff-code{width:200px}
.room-scan-body .handoff-steps{margin-top:0}
.room-scan-native{grid-template-columns:1fr}
@media(max-width:720px){.room-scan-main,.room-scan-body{grid-template-columns:1fr}.room-scan-body .handoff-code{width:min(220px,100%)}}
/* Square tiles, icon on top: Raum per Hand and Scannen. Scannen opens its
   own panel (QR code, steps, Scan hochladen) like Raum per Hand. The tiles
   stand right of the heading "Raum definieren"; on a phone below it. */
.scan-head{align-items:center;flex-wrap:wrap}
.scan-head .room-source{margin:0 14px 0 auto;display:grid;justify-items:end;gap:6px}
.scan-head .room-source[hidden]{display:none}
/* Raumart under the title of step A (room-kind-ui.mjs, Jonas 06.10.2026; without Pro shown locked since 11.10.2026). */
.scan-head .room-kind{margin-top:14px;width:min(280px,100%)}
/* Desktop: Raumart and Tonformat (or Nutzung) side by side; the title level
   with the top of the four tiles, the choices with their bottom (Jonas,
   09.10.2026: „rauminhalt und tonumpfang auf dektop nebeneinander setzen,
   sodass sie mit den vier quadraten unten abschließen, und die überschridt
   es oben tut“). Below 1051 px (tablet, phone) one under the other, as before:
   there the tiles would not fit beside both. */
@media(min-width:1051px){
  .scan-head{align-items:stretch}
  .scan-head>.info-button{align-self:flex-start}
  /* It gives way before the tiles wrap under it (flex-basis 0, from 300 px on). */
  .scan-head>div:first-child{flex:1 1 0;min-width:300px;display:grid;grid-template-columns:repeat(2,minmax(0,190px));grid-template-rows:auto auto 1fr auto;column-gap:14px}
  .scan-head>div:first-child>:not(.room-kind){grid-column:1/-1}
  .scan-head>div:first-child>.room-kind{grid-row:4;margin-top:12px;width:auto}
}
/* Tablet and phone: Raumart and Kanäle / Tonformat (or Nutzung) side by
   side as well, each half the width (Jonas, 19.10.2026: „raumart und dann
   kanäle bzw tonausgabe sollen bitte nebeneinander für mobile sitzen“); the
   Raumart alone (Hobby-Hörraum, nothing beside it) takes the full width. */
@media(max-width:1050px){
  .scan-head>div:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;min-width:0}
  .scan-head>div:first-child>:not(.room-kind){grid-column:1/-1}
  .scan-head>div:first-child>.room-kind{width:auto;min-width:0}
  .scan-head .room-kind>.choice-menu{grid-template-columns:minmax(0,1fr)}
  .scan-head .room-kind .choice-current{gap:6px;padding:5px 8px}
  /* Kinosaal: Kanäle beside the Raumart, Sitzplätze and Volumen in the row under them */
  .scan-head>div:first-child>.cinema-use:not([hidden]){display:contents}
  .scan-head>div:first-child>.cinema-use>.choice-menu{grid-column:auto;min-width:0;margin-top:14px}
  .scan-head>div:first-child>.cinema-use>.cinema-field{width:auto;margin-top:8px}
  .scan-head>div:first-child:not(:has(>.room-kind:is(.sound-format,.hall-use,.cinema-use):not([hidden])))>.room-kind{grid-column:1/-1;width:min(280px,100%)}
}
/* Step A with nothing open under its head (Raum per Hand and Scannen
   closed): the card hugs the head, less edge above and below (Jonas,
   09.10.2026: „mache den kasten drum herum etwas schmaler, da ist
   verschwendeter platz“). With a panel open as before; the banner without
   Pro keeps its distance to the head. */
@media(min-width:1051px){
  .scan-card:not(:has(.room-settings>:not([hidden]))){padding-top:18px;padding-bottom:18px}
  .scan-card:not(:has(.room-settings>:not([hidden])))>.scan-head{margin-bottom:0}
}
@media(max-width:720px){.scan-head>div:first-child{flex:1}.scan-head .room-source{order:3;flex-basis:100%;margin:14px 0 0;justify-items:start}
  .scan-head .room-source-bar{display:grid;grid-template-columns:repeat(4,minmax(0,118px));gap:10px}
  .scan-head .room-source-bar.has-restart{grid-template-columns:repeat(5,minmax(0,118px))}
  .scan-head .room-source-btn,.scan-head .room-source-btn.scan-handoff-btn{width:auto;height:auto;aspect-ratio:1/1}
  /* the row of choices the full width, under the "i" too (the head keeps its 40 px for it beside the title only), as the tiles below */
  .scan-card .scan-head>div:first-child{flex:0 0 calc(100% + 40px);margin-right:-40px}
  .scan-card .scan-head>div:first-child>:not(.room-kind){padding-right:40px}}
.room-source-bar{display:flex;flex-wrap:wrap;gap:12px}
.room-source-slot{display:contents}
.room-source-btn,.room-source-btn.scan-handoff-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:118px;height:118px;margin:0;padding:10px;border:1px solid var(--line);border-radius:6px;background:rgba(10,26,32,.45);color:var(--text);font:600 13px/1.25 var(--sans);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.room-source-btn:hover{border-color:var(--accent);background:rgba(97,216,200,.07)}
.room-source-btn:focus-visible,.room-source-btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.room-source-btn svg{width:34px;height:34px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.room-source-btn .file-bar{display:none}
.room-source-btn{position:relative}
.room-source-btn[hidden]{display:none}
.room-source-btn:disabled{opacity:.45;cursor:default}
.room-source-btn:disabled:hover{border-color:var(--line);background:rgba(10,26,32,.45)}
.room-source-btn.plan-locked::after{position:absolute;top:6px;right:6px;margin:0}
#scan-status:not([data-kind=error]){display:none}
.scan-notes{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.scan-notes[hidden]{display:none}
.room-manual>.scan-notes{margin-top:12px}
#scan-status.is-manual{display:none}
#scan-status[data-kind=success]{color:#83ddbb}
#scan-status[data-kind=error]{color:#ffab93}
.room-manual{display:grid;gap:14px}
.room-manual-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 9px 9px 16px;border:1px solid var(--line-soft);border-radius:4px;background:rgba(21,51,64,.55)}
.room-manual-head strong{font:600 12.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--champagne)}
/* The cross closes the panel: a touch of red so it reads as "schließen". */
/* „Zurück“ instead of a cross (Jonas, 05.10.2026): back to the choice of step A. */
.room-manual-close{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 8px;border:1px solid var(--line);border-radius:4px;background:rgba(10,26,32,.45);color:var(--text);font:500 13px var(--sans);line-height:1;cursor:pointer}
.room-manual-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.room-manual-close:hover{border-color:var(--accent);background:rgba(97,216,200,.07)}
.room-manual-section h3{margin:0 0 8px;font-size:14px}
/* Raum per Hand › Grundriss (floor-plan-ui.mjs): the drawing sheet with
   its tools, the corner menu and the field for a typed length or angle. */
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.room-manual-section .plan-head h3{margin:0}
.plan-tools{display:flex;gap:6px;flex-wrap:wrap}
.plan-tool{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:rgba(10,26,32,.45);color:var(--text);font:600 12px var(--sans);cursor:pointer}
.plan-tool:hover:not(:disabled){border-color:var(--accent)}
.plan-tool:disabled{opacity:.4;cursor:default}
/* "Neue Wand" stays lit until the wall is drawn. */
.plan-tool[aria-pressed=true]{border-color:var(--accent);background:rgba(97,216,200,.18);color:var(--accent)}
.plan-stage{position:relative;height:min(62vh,460px);border:1px solid var(--line-soft);border-radius:6px;overflow:hidden;background:#091b24}
.plan-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:none;-webkit-user-select:none;user-select:none}
.plan-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.plan-layer{position:absolute;inset:0;pointer-events:none}
.plan-layer>*{position:absolute;pointer-events:auto}
.plan-pop{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:6px;background:rgba(16,39,47,.97);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.plan-pop button{min-height:38px;padding:0 12px;border:0;border-radius:4px;background:none;color:var(--text);font:600 13px var(--sans);cursor:pointer;white-space:nowrap}
.plan-pop button:hover,.plan-pop button:focus-visible{background:rgba(97,216,200,.12)}
.plan-pop{flex-wrap:wrap;max-width:calc(100% - 12px)}
.plan-pop button[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.plan-pop .plan-pop-label{align-self:center;padding:0 4px 0 8px;font:600 12px var(--sans);color:var(--champagne);white-space:nowrap}
.plan-edit{display:flex;align-items:center;gap:5px;margin:0;padding:3px 9px 3px 3px;border:1px solid var(--accent);border-radius:5px;background:#0c1d28;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.plan-edit input{width:76px;height:30px;padding:0 6px;border:0;border-radius:3px;background:rgba(233,239,236,.08);color:var(--text);font:600 16px var(--sans);text-align:right}
.plan-edit span{font:600 12px var(--sans);color:var(--muted)}
/* The padlock beside a typed length or angle: shut in champagne, open muted. */
.plan-lock{display:grid;place-items:center;width:32px;height:30px;margin-left:2px;padding:0;border:1px solid rgba(217,201,174,.55);border-radius:4px;background:rgba(217,201,174,.1);color:var(--champagne);cursor:pointer}
.plan-lock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.plan-lock.is-open{border-color:var(--line);background:none;color:var(--muted)}
.plan-lock:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Parallel zu beside the padlock: the same small square, an action rather than a state. */
.plan-parallel{display:grid;place-items:center;width:32px;height:30px;padding:0;border:1px solid var(--line);border-radius:4px;background:none;color:var(--muted);cursor:pointer}
.plan-parallel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.plan-parallel:hover{color:var(--accent);border-color:var(--accent)}
.plan-parallel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* On a finger both are full size, with room between them, like the corner menu. */
@media(pointer:coarse){.plan-edit{gap:8px}.plan-lock,.plan-parallel{width:44px;height:44px}}
/* The Parallel zu bar: Abbrechen as a word; on a narrow sheet one row, the cross only (the hint line says what to do). */
.plan-pop .plan-pop-stop span[aria-hidden]{display:none}
.plan-pop.is-compact{flex-wrap:nowrap}
.plan-pop.is-compact button{padding:0 10px}
.plan-pop.is-compact .plan-pop-label,.plan-pop.is-compact .plan-pop-word{display:none}
.plan-pop.is-compact .plan-pop-stop{min-width:44px}
.plan-pop.is-compact .plan-pop-stop span[aria-hidden]{display:inline;font-size:15px}
.plan-hint{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.plan-hint.is-error{color:#ffc9b9}
@media(max-width:560px){.plan-stage{height:min(58vh,380px)}.plan-tool{padding:0 8px}}
@media(max-width:560px){.room-source-btn,.room-source-btn.scan-handoff-btn{width:96px;height:96px;gap:8px;font-size:12px}.room-source-btn svg{width:28px;height:28px}}

/* Info buttons everywhere as on the start page: square with small corners,
   36 px. Beside ordinary buttons they take those buttons' height. */
.info-button,.info-button.banner-info{width:36px;height:36px;min-width:36px;padding:0;border-radius:4px;font-size:15px}
.button~.info-button,.info-button:has(~.button){width:43px;min-width:43px;height:43px}

/* Restoring one of the device's own day backups (backup.mjs) */
.backup-restore{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.backup-restore[hidden]{display:none}
.backup-restore .field{margin:0;min-width:220px}
.backup-restore [hidden]{display:none}
.backup-restore .fine-print{flex-basis:100%;margin:0}
/* Buttons in the top-right corner of a card (help, tools): as far from the
   top as from the side, a little closer to the corner than the card's own
   padding. The heading keeps room for them. */
.card{position:relative;--corner-gap:20px}
@media(max-width:720px){.card{--corner-gap:14px}}
.card>.section-heading:first-child>.info-button,
.card>.section-heading:first-child>.section-actions>.info-button,
.card>.section-heading:first-child>.rooms-tools{position:absolute;top:var(--corner-gap);right:var(--corner-gap);margin:0}
.card>.section-heading:first-child:has(>.info-button,>.section-actions>.info-button){padding-right:40px}
.card>.section-heading:first-child:has(>.rooms-tools){padding-right:80px}

/* "Scanner" in the top bar only on the start page; inside a room "Scannen"
   in step 1 opens the same scanner. */
body:not([data-stage=home]) .scanner-open{display:none}

/* Mobile pass (29.09.2026) */
/* One strip of tabs with a single tab is hidden by openDialog(); .seg's
   display otherwise wins over [hidden]. On every screen. */
.seg[hidden]{display:none!important}
/* A window that opens on a file field focuses it; the ring belongs to the
   keyboard only, else the field looks chosen before anything happened. */
.file-bar:focus-within{outline:none}
.file-bar:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* New room / edit room on the phone: the photo full width on top (16:9,
   the crop of the room tile), name, description and loudspeakers below it,
   the buttons as even rows. Fields at 16 px, so iOS does not zoom in. */
@media(max-width:640px){
  .room-new-dialog{padding:20px 18px}
  .room-new-dialog form{gap:14px}
  .room-new-top{grid-template-columns:minmax(0,1fr);gap:14px}
  .room-new-top .room-photo-drop{width:100%;max-width:none;aspect-ratio:16/9;min-height:0}
  .room-new-dialog textarea{min-height:72px}
  .room-photo-drop:has(img:not([hidden])){border-style:solid;border-color:var(--line-soft)}
  .room-photo-remove{width:40px;height:40px;font-size:20px}
  .room-new-seg button{min-height:40px}
  .room-new-typerow .rooms-tool{width:40px;height:40px;min-width:40px}
  .brand-list{max-height:min(320px,45dvh)}
  .brand-option{min-height:44px}
  .room-new-dialog .action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
  .room-new-dialog .action-row .button{width:100%;margin:0}
  #room-new-cancel{order:2}
  #room-new-example{order:3;grid-column:1/-1}
  #room-new-delete{order:4;grid-column:1/-1;margin-top:6px}
  .project-dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  .project-dialog textarea,.project-dialog select,.brand-picker-pop input{font-size:16px}
}

/* Dialogs on small screens: they fit the visible screen (dvh, not the
   area behind the iOS toolbar) and scroll inside without moving the page. */
@media(max-width:720px){
  .project-dialog,.room-dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
  .help-dialog:not(.guide-dialog){max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
  .assistant,.archive-dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
  dialog,.guide-dialog>[role=tabpanel]{overscroll-behavior:contain}
  html:has(dialog[open]:modal),body.guide-on{overflow:hidden}
  /* The stop button over the whole width, above the action bar; the power
     meter above it. */
  #global-stop-btn{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  body.has-actionbar #global-stop-btn{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .vu-meters{left:16px;right:16px;width:auto;bottom:calc(136px + env(safe-area-inset-bottom,0px))}
  .vu-range button{min-height:40px;padding:0 12px}
  .vu-close{min-width:40px;min-height:40px}
  /* Step rail: "4 PPG / einstellen" centred like the other steps. */
  .workflow-step .step-label{display:block;font-size:11px;line-height:1.2;text-align:center}
  .workflow-step .step-label strong{display:inline}
  .workflow-step .step-label .workflow-number{margin-right:.3em}
}
/* Jumps inside a page stop below the sticky step rail. */
@media(max-width:1199px){main .card,main [id]{scroll-margin-top:112px}}

/* Phones */
@media(max-width:560px){
  /* No zoom on focus in iOS: every text field at 16 px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px}
  .position-group input{height:40px}
  .materials-card .preset-select{width:100%;min-height:42px}

  /* Touch targets of at least 40 px */
  .topbar .brand{min-height:40px}
  .topbar .help-open,.topbar .account-button{min-height:40px}
  .topbar .account-button{min-width:40px;justify-content:center}
  button.crumb{padding:12px 0;margin:-9px 0}
  .rooms-tools .rooms-tool{width:40px;height:40px;min-width:40px}
  .card>.section-heading:first-child:has(>.rooms-tools){padding-right:92px}
  .info-button,.info-button.banner-info{width:40px;height:40px;min-width:40px}
  .dialog-close{width:40px;height:40px;right:12px;top:12px}
  .seg button{min-height:40px}
  .help-chip,.guide-task,.chip,.materials-segment,.impression-chip{min-height:40px}
  details>summary:not([class]){padding-block:12px}
  .stop-button{min-height:40px}
  .plan-tool{height:40px}
  .room-manual-close{height:40px;padding:0 14px 0 10px}
  #rooms-status:empty{display:none}

  /* Room menu: Bearbeiten and × on their own row, then the photo full width,
     then name, description and loudspeakers. Without a photo no empty box. */
  .room-dialog{padding:18px 16px}
  .room-dialog-tools{position:static;justify-content:flex-end;margin:-4px -4px 12px}
  .room-dialog .room-dialog-edit{height:40px;min-height:40px;padding:0 14px;font-size:12.5px}
  .room-dialog .dialog-close{width:40px;height:40px}
  .room-dialog-head{flex-direction:column;align-items:stretch;gap:14px;margin:0 0 16px}
  .room-dialog-photo{width:100%;aspect-ratio:16/9}
  .room-dialog-photo.is-empty{display:none}
  .room-dialog-title h2{overflow-wrap:break-word}
  /* A finished step: "✓ Erledigt" top right beside the kicker. */
  .room-step-btn{position:relative}
  .room-step.is-done .room-step-state{position:absolute;top:12px;right:14px;font-size:11.5px}
  .project-next.is-done{flex-direction:column;align-items:stretch}

  /* Other windows: tabs over the whole width, buttons filling the row. */
  .project-dialog .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%}
  .project-dialog .seg button{padding:8px 10px;line-height:1.25}
  .project-dialog .action-row>.button{flex:1 1 0;min-width:0}
  .confirm-dialog .action-row{display:grid;grid-template-columns:1fr 1fr}
  .backup-restore .field{min-width:0;flex:1 1 100%}
  .backup-restore .button{flex:1 1 100%}
  .help-dialog{padding:24px 18px}
  .guide-dialog .guide-tabs{align-self:stretch;margin-right:48px}
  .guide-tabs button{flex:1;min-height:40px;padding:0 8px}
  .archive-dialog{padding:18px 16px}
  .archive-filters>.archive-query{grid-column:1/-1}
  .archive-filters .check-line{min-height:40px}
  .assistant{padding:18px 16px}
  .assistant-options{width:100%;gap:8px 14px}
  .assistant-options select{min-height:40px;padding:0 8px}
  .assistant-options #assistant-close{margin-left:auto;min-height:40px}
  .assistant-actions .button{min-width:0;flex:1}

  /* Konto as a list, one below the other; a tap brings the page in from the
     right with „Zurück“ at the top left (account-ui.mjs detail, list). */
  .account-layout{gap:0;margin-top:4px}
  .account-nav{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:0;border:1px solid var(--line-soft);border-radius:8px;background:rgba(10,26,32,.35)}
  .account-nav button,.account-nav button[aria-selected=true]{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 16px;border:0;border-top:1px solid var(--line-soft);border-radius:0;background:none;color:var(--text);font-size:15px;white-space:normal}
  .account-nav button:first-child{border-top:0;border-radius:8px 8px 0 0}
  .account-nav button:last-child{border-radius:0 0 8px 8px}
  .account-nav button::after{content:"›";flex:none;color:var(--muted);font-size:20px;line-height:1}
  .account-nav button:active{background:rgba(97,216,200,.08)}
  .account-layout:not(.is-detail) .account-panels{display:none}
  .account-layout.is-detail .account-nav{display:none}
  .account-back{display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:0 0 6px -6px;padding:0 10px 0 4px;border:0;border-radius:5px;background:none;color:var(--accent);font:500 15px var(--sans);cursor:pointer}
  .account-back span{font-size:24px;line-height:1;margin-top:-2px}
  .account-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .account-card>.section-heading .eyebrow{display:none}
  .account-expert-slot .expert-label{font-size:12px}
  .account-expert-slot .expert-label::after{content:none}
  .account-expert-slot .expert-toggle{min-height:40px}

  /* Action bar: long labels wrap instead of being cut. */
  .actionbar .button{white-space:normal;line-height:1.2;padding-inline:10px;overflow:visible;text-overflow:clip}

  /* Schritt A: all tiles in one row over the whole width, square
     (Jonas, 30.09.2026; „Neu anfangen“ the fifth for a room drawn by hand, 07.10.2026); the row runs under the i button's column. */
  .scan-head .room-source{justify-items:stretch;flex-basis:calc(100% + 40px);margin-right:-40px}
  .scan-head .room-source-bar{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .scan-head .room-source-bar.has-restart{grid-template-columns:repeat(5,minmax(0,1fr))}
  .scan-head .room-source-btn,.scan-head .room-source-btn.scan-handoff-btn{padding:4px 2px;gap:5px;font-size:clamp(9.5px,2.9vw,11.5px);line-height:1.15;hyphens:auto;-webkit-hyphens:auto}
  .scan-head .room-source-btn svg{width:22px;height:22px}
  .scan-head .room-source-btn.plan-locked::after{top:4px;right:4px;padding:0 4px;font-size:8.5px}
  #room-source[data-done~=hand] #room-manual-open::after,#room-source[data-done~=scan] #scan-handoff-btn::after{right:5px;top:5px;width:15px;height:15px;background-size:12px}
  /* Smaller canvases leave room to scroll past them. */
  .materials-view{height:280px}
  .plan-stage{height:min(52vh,340px)}

  /* Fold titles wrap instead of running out of the card. */
  .materials-fold>summary{flex-wrap:wrap;row-gap:2px}
  .materials-fold>summary b{white-space:normal;flex:1 1 0;min-width:0}
  .materials-fold>summary small{flex:1 0 100%;white-space:normal;padding-left:28px}

  /* Nachhall table and Schritt C */
  .materials-card .expert-table th{letter-spacing:0;white-space:normal}
  .materials-card .table-wrap{background:linear-gradient(to left,rgba(10,26,32,.9),transparent 24px) right/24px 100% no-repeat}
  .room-views .preview-heading label{display:flex;align-items:center;gap:10px;width:100%}
  .room-views .preview-heading input[type=range]{flex:1;min-height:40px}
  .room-card .aside-copy{margin-bottom:14px}

  /* Level check: button and ⓘ in one row, the result below. */
  .level-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
  .level-actions>.button{grid-column:1}
  .level-actions>.info-button{grid-column:2;grid-row:1}
  .level-actions>.level-result{grid-column:1/-1}

  /* Charts: heading and Links/Rechts wrap; axis labels readable. */
  .findings-chart-head{flex-wrap:wrap}
  .findings-chart-head .seg{flex:none}
  .zone-chart text{font-size:19px}
  .zone-chart .zc-peak-label{font-size:17px}
  .check-chart text{font-size:17px}
  .check-chart .legend line.before,.check-chart .legend text:nth-of-type(1){transform:translateX(-40px)}
  .check-chart .legend line.after,.check-chart .legend text:nth-of-type(2){transform:translateX(-10px)}
  /* The last frequency sits at the right edge; larger, it would be cut. */
  .zone-chart text[x="628"][text-anchor=middle],.zone-chart text[x="668"][text-anchor=middle],.check-chart text[x="712"]{text-anchor:end}

  /* Tables that do not fit become rows of cards. */
  .treatment-plan-card .paths-table.tp-table,.treatment-plan-card .paths-table.tp-table tbody{display:block}
  .treatment-plan-card .paths-table.tp-table thead{display:none}
  .treatment-plan-card .paths-table.tp-table tr{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .treatment-plan-card .paths-table.tp-table td{padding:0;border:0}
  .treatment-plan-card .paths-table.tp-table td:nth-child(n+4){grid-column:1/-1}
  .treatment-plan-card .paths-table.tp-table td:last-child:not(:empty){display:flex;flex-wrap:wrap;gap:8px}
  .treatment-plan-card .paths-table.tp-table td:last-child:empty{display:none}

  .check-table th:not(:first-child){white-space:normal}
  .check-table th,.check-table td{padding-inline:3px}
  .check-table th{vertical-align:bottom;font-size:11px}
  .check-channel .check-table,.check-channel .check-table thead,.check-channel .check-table tbody{display:block}
  .check-channel .check-table tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:6px;border-bottom:1px solid #1f3740}
  .check-channel .check-table th,.check-channel .check-table td{border:0;padding:6px 0}
  .check-channel .check-table th:first-child{display:none}
  .check-channel .check-table td:first-child{grid-column:1/-1;padding-bottom:0;color:var(--text)}
  .check-channel .check-table th:not(:first-child),.check-channel .check-table td:not(:first-child){text-align:left;white-space:normal}
  .check-channel .check-table th{letter-spacing:0;text-transform:none;font-size:11.5px;line-height:1.3;hyphens:auto;overflow-wrap:anywhere}

  .ppg-bands>*{min-width:0}
  .ppg-bands .filter-table th,.ppg-bands .filter-table td{padding:8px 4px}
  .ppg-bands .filter-input{width:62px;min-height:40px;padding:8px 6px}

  .cluster-table,.cluster-table tbody{display:block}
  .cluster-table thead{display:none}
  .cluster-table tr{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px 10px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .cluster-table td{padding:0;border:0}
  .cluster-table td:nth-child(n+3){grid-column:2}
  .cluster-table td:nth-child(3)::before{content:'Aufstellung'}
  .cluster-table td:nth-child(4)::before{content:'Hörposition'}
  .cluster-table td:nth-child(5)::before{content:'Zustand'}
  .cluster-table td:nth-child(n+3)::before{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .cluster-table td input:not([type=checkbox]),.cluster-table td select{width:100%}

  .device-check b{white-space:nowrap;text-align:right}
  #advisor-export{margin-top:14px}
  .project-finish .action-row{flex-direction:column;align-items:stretch}
}
/* Touch screens of any size: square icon buttons at 40 px. */
@media(pointer:coarse){
  .info-button,.info-button.banner-info,.rooms-tool{width:40px;height:40px;min-width:40px}
  .dialog-close{min-width:40px;min-height:40px}
  .plan-pop button{min-height:44px}
}
/* Start and pause of the assistant stay in reach while its window scrolls. */
@media(max-width:560px),(max-height:520px){
  .assistant-actions{position:sticky;bottom:-18px;padding:10px 0 18px;margin-bottom:-18px;background:var(--panel)}
}
/* Phone held sideways: help and assistant use the whole height. */
@media(max-height:520px) and (orientation:landscape){
  body.guide-on .topbar{z-index:auto}
  .assistant{padding:14px 24px}
  .assistant-main{margin:8px 0 0;gap:24px}
  .assistant-point{font-size:72px}
  .assistant-actions{bottom:-14px;padding-bottom:14px;margin-bottom:-14px}
}
/* Remaining phone fixes after the check: the power meter's foot wraps on
   the narrowest phones, checkboxes in tables get a finger-sized target and
   the criteria table of step D becomes one card per criterion. */
@media(max-width:380px){
  .vu-foot{flex-wrap:wrap;row-gap:4px}.vu-foot>span{flex:1 0 100%}.vu-range{flex:none}
}
@media(max-width:560px){
  .cluster-table tr{grid-template-columns:40px minmax(0,1fr)}
  .cluster-table input[type=checkbox],.filter-table input[type=checkbox]{width:22px;height:22px;margin:9px}
  .tp-check-table,.tp-check-table tbody{display:block}
  .tp-check-table thead{display:none}
  .tp-check-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .tp-check-table td{padding:0;border:0}
  .tp-check-table td:first-child{grid-column:1/-1}
  .tp-check-table td:nth-child(2)::before{content:'Ziel'}
  .tp-check-table td:nth-child(3)::before{content:'Gemessen'}
  .tp-check-table td:nth-child(4)::before{content:'Stand'}
  .tp-check-table td:nth-child(n+2)::before{display:block;margin-bottom:2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}
/* Floor, ceiling and heights (room-shape.mjs, room-heights.mjs). The heights
   group sits with the positions; a value that is only a guess (standard, or
   "angenähert" from the drawing of the model) has a dashed border until the
   user measures it. Mode list chips, the merged floor and ceiling card, the
   class "wahlweise" and the point warnings of the guide. */
#height-group{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start}
#height-group .position-name{grid-column:1/-1;padding-bottom:0}
#height-group label small{display:block;margin-top:4px;color:var(--faint);font-size:11px;line-height:1.4}
#height-group .check-line{margin:0;align-self:center;color:#b6cdcf;font-size:11px}
#height-group .check-line input{width:18px;height:18px;padding:0;margin:0;flex:none}
#height-group .fine-print{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0;line-height:1.5}
#height-group .fine-print span{flex:1 1 100%}
.positions input.is-guess{border-style:dashed;border-color:rgba(217,201,174,.55)}
.positions input[type=checkbox].is-guess{outline:1px dashed rgba(217,201,174,.55);outline-offset:2px}
.height-chip{white-space:normal;text-align:left}
.treatment-plan-card .tp-rec.is-wahlweise .tp-badge{color:#c3aaff;border-color:rgba(195,170,255,.45)}
.treatment-plan-card .tp-table tr.is-deutlich td:nth-child(3){color:var(--champagne)}
.treatment-plan-card .tp-table tr.is-ueblich td{color:var(--muted)}
.treatment-plan-card .tp-rec-details{margin-top:8px;font-size:12px;color:var(--muted)}
.treatment-plan-card .tp-rec-details summary{cursor:pointer;color:var(--text)}
.treatment-plan-card .tp-rec-details ul{margin:6px 0 0;padding-left:18px;line-height:1.5}
.treatment-plan-card .tp-stale-list{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 12px;padding:10px 12px;border:1px dashed var(--champagne-line);border-radius:4px}
.treatment-plan-card .tp-stale-list .fine-print{flex:1 1 260px;margin:0}
.guide-point-warnings{color:var(--champagne)}
@media(max-width:560px){
  #height-group{grid-template-columns:1fr 1fr}
  #height-group .check-line{grid-column:1/-1;min-height:40px}
}

/* Start page: the line under the top bar sits in the middle between
   "ROOM ATLAS" and the start graphic, with the same gap above and below
   (desktop 22 px, tablet and phone 20 px; before, the graphic touched the
   line on smaller screens). The top bar grows at its bottom, so its content
   keeps its place. */
@media(min-width:1051px){
  body[data-stage=home] .topbar{height:82px;padding-bottom:6px}
  body[data-stage=home] main>.layout{padding-top:22px}
}
@media(min-width:721px) and (max-width:1050px){
  body[data-stage=home] .topbar{height:80px;padding-bottom:4px}
  body[data-stage=home] main>.layout{padding-top:20px}
}
@media(min-width:561px) and (max-width:720px){
  body[data-stage=home] main>.layout{padding-top:21px}
}
@media(max-width:560px){
  body[data-stage=home] .topbar{min-height:76px;padding-bottom:12px}
  body[data-stage=home] main>.layout{padding-top:20px}
}

/* Step rail and step titles (Jonas, 29.09.2026): the rail shows one big
   number per step, nothing else (name and status stay for screen readers and
   as the tooltip); the page says "1. Raum" inside the banner, with the info
   button there, and no "Schritt 1 von 4" above it. */
.workflow-step .step-ico{display:none}
.workflow-step .step-label strong,.workflow-step small{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.workflow-step,.workflow-step.is-active{position:relative;display:grid;grid-template-columns:1fr;place-items:center;gap:0;min-height:64px;padding:6px 4px;text-align:center}
.workflow-step .step-text,.workflow-step .step-label{display:block;margin:0;text-align:center}
.workflow-step .workflow-number,.workflow-step.is-done .workflow-number,.workflow-step .step-label .workflow-number{display:block;margin:0;font:400 40px/1 var(--display);letter-spacing:0;color:var(--muted);font-variant-numeric:lining-nums}
.workflow-step:hover .workflow-number{color:var(--text)}
.workflow-step.is-active .workflow-number{color:var(--accent)}
.workflow-step.is-next:not(.is-active) .workflow-number{color:var(--champagne)}
.workflow-step.is-done::after{content:"";position:absolute;right:8px;top:8px;width:15px;height:15px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23062028' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 0 0 2px var(--bg)}
@media(min-width:1200px){
  main{grid-template-columns:96px minmax(0,1fr)}
  main>.workflow{padding:8px;gap:6px}
  .workflow-step,.workflow-step.is-active{min-height:84px}
  .workflow-step .workflow-number,.workflow-step.is-done .workflow-number{font-size:46px}
}
@media(max-width:720px){
  .workflow-step,.workflow-step.is-active{min-height:50px;padding:4px 2px}
  .workflow-step .workflow-number,.workflow-step.is-done .workflow-number,.workflow-step .step-label .workflow-number{font-size:30px}
  .workflow-step.is-done::after{right:5px;top:5px;width:13px;height:13px;background-size:11px}
}
/* The banner of a step: its title "1. Raum" and the info button. */
.hero-info{position:absolute;top:12px;right:12px;z-index:2}
.hero-info[hidden]{display:none}
body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero-text h1{margin-top:0;font-size:clamp(24px,2.4vw,32px)}
@media(max-width:1050px){
  body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .stage-banner{display:none}
  /* On a phone the title sits on top of the banner, the graphic below it. */
  body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero{--hero-text-place:top;height:196px}
  body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero-text{display:block;left:16px;top:12px;right:64px;max-width:none}
  body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero-text h1{font-size:24px;line-height:40px}
  .hero-info{top:10px;right:10px}
}
@media(max-width:700px){
  body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero{height:164px}
  body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero-text h1{font-size:22px}
}
/* Step A: a check on the tile once the room is drawn or scanned; the line
   under the tiles only speaks when there is something to decide. */
#room-manual-open,#scan-handoff-btn{position:relative}
#room-source[data-done~=hand] #room-manual-open::after,#room-source[data-done~=scan] #scan-handoff-btn::after{content:"";position:absolute;right:8px;top:8px;width:18px;height:18px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23062028' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
  box-shadow:0 0 0 2px var(--bg)}
#scan-status:empty{display:none}

/* Step rail with names again (Jonas, 29.09.2026): under each number its name,
   both large (the number a little smaller than before, the name larger than
   it used to be); the step's title leaves the banner. */
.workflow-step .step-label strong{position:static!important;display:block;width:auto;height:auto;margin:6px 0 0;padding:0;overflow:visible;clip-path:none;
  white-space:normal;font:500 16px/1.2 var(--sans);color:var(--text);text-wrap:balance}
.workflow-step .step-label{display:block;font-size:inherit;line-height:1}
.workflow-step .step-label .workflow-number{margin:0}
.workflow-step.is-active .step-label strong{color:var(--accent)}
.workflow-step,.workflow-step.is-active{min-height:88px}
.workflow-step .workflow-number,.workflow-step.is-done .workflow-number,.workflow-step .step-label .workflow-number{font-size:32px}
@media(min-width:1200px){
  main{grid-template-columns:112px minmax(0,1fr)}
  .workflow-step,.workflow-step.is-active{min-height:104px}
  .workflow-step .workflow-number,.workflow-step.is-done .workflow-number{font-size:38px}
}
@media(max-width:720px){
  .workflow-step,.workflow-step.is-active{min-height:66px;padding:5px 2px}
  .workflow-step .workflow-number,.workflow-step.is-done .workflow-number,.workflow-step .step-label .workflow-number{font-size:24px}
  .workflow-step .step-label strong{margin-top:4px;font-size:13px}
}
.hero-text h1:empty{display:none}
/* Without the title the banner of a step on a phone is the graphic again,
   in a narrow bar (Jonas, 29.09.2026). */
@media(max-width:1050px){
  body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero{--hero-text-place:none;height:104px}
  body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero-text{display:none}
}
/* The banner of a step: the room's name and its loudspeaker. */
body:is([data-stage=room],[data-stage=measure],[data-stage=analysis],[data-stage=eq],[data-stage=check],[data-stage=report]) .hero-sub{margin:6px 0 0;font-size:14px;color:var(--muted)}

/* Step 2: "Vorsicht, schrille Töne" before the first start (measure-warning.mjs). */
.shrill-dialog{max-width:min(440px,calc(100vw - 32px))}
.shrill-dialog h2{margin:6px 0 8px;font:600 22px/1.25 var(--sans)}
.shrill-dialog p{margin:0 0 16px;color:var(--muted)}
.shrill-hide{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);cursor:pointer}
.shrill-hide input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.shrill-dialog .action-row{margin-top:20px}

/* Step 1, loudspeaker: the list shows the room's brand; "Andere" below it
   opens a search over the other brands (a system from several brands). */
.speaker-other{margin-top:6px}
.speaker-other[hidden]{display:none}
.field .speaker-other-toggle{align-self:flex-start;padding:2px 0;border:0;background:none;color:var(--accent);font:500 12.5px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.speaker-other-toggle:hover,.speaker-other-toggle:focus-visible{color:var(--text)}
.speaker-other-pop{margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.18)}
.speaker-other-pop[hidden]{display:none}
.speaker-other-pop input{width:100%;box-sizing:border-box;margin-bottom:6px}
.field .speaker-other-list span{font:inherit;text-transform:none;letter-spacing:normal;color:inherit}
.field .speaker-other-list .brand-option-name{flex:1;font-size:14px;color:var(--text)}
.field .speaker-other-list .brand-option-types{font-size:11.5px;color:var(--faint)}
.speaker-other-empty{padding:6px 8px;font-size:13px;color:var(--muted)}
.model-search{margin-top:6px}
.model-search input{width:100%;box-sizing:border-box}
.model-search .brand-list{margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.18)}
.model-search .brand-list[hidden]{display:none}
.field .model-search .brand-list span{font:inherit;text-transform:none;letter-spacing:normal;color:inherit}
.field .model-search .brand-option-name{flex:1;font-size:14px;color:var(--text)}
.field .model-search .brand-option-types{font-size:11.5px;color:var(--faint)}

/* Plans (plan-gates.mjs): a locked control carries the tag of its plan. */
.plan-locked::after{content:attr(data-plan-tag);display:inline-block;margin-left:8px;padding:1px 6px;border:1px solid var(--champagne-line);border-radius:999px;
  font:600 9.5px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--champagne);vertical-align:middle}
.expert-toggle.plan-locked::after{margin-left:6px}
/* What belongs to Pro in the page itself (room-steps.mjs: steps C and D of
   Raum, absorber and diffuser planning) shows with the plan (body.plan-pro). */
body:not(.plan-pro) [data-level=pro]{display:none!important}
.import-button.is-disabled{opacity:.5;pointer-events:none}

/* Six steps with Business (step Bericht, report-step.mjs). */
.workflow.is-six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(min-width:1200px){main>.workflow.is-six{grid-template-columns:1fr}}

/* Step Bericht: a sketch of the title page with the room to turn. */
.report-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:20px;align-items:start}
.report-cover{border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:#0e252d;box-shadow:0 14px 35px rgba(0,0,0,.25)}
.report-cover-banner{display:block;width:100%;aspect-ratio:4/1;object-fit:cover}
.report-cover-banner[hidden],.report-cover-logo[hidden]{display:none}
.report-cover-band{display:grid;gap:6px;padding:18px 18px 16px;border-bottom:3px solid var(--accent)}
.report-cover-brand{display:flex;align-items:center;gap:10px}
.report-cover-logo{width:32px;height:32px;border-radius:3px;object-fit:contain;background:#fff}
.report-cover-brand span{display:grid;gap:2px}
.report-cover-brand strong{font:600 12px var(--sans);letter-spacing:.14em;color:var(--accent)}
.report-cover-brand small{font:500 10px var(--sans);letter-spacing:.14em;color:var(--champagne)}
.report-cover-name{margin-top:10px;font:600 24px/1.2 var(--sans);color:#fff;overflow-wrap:anywhere}
.report-cover-sub{font-size:12px;color:var(--champagne)}
.report-view{display:block;width:100%;aspect-ratio:1.6;margin-top:8px;border-radius:4px;background:#0f262e;touch-action:none;cursor:grab;outline:none}
.report-view:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.report-side{display:grid;gap:10px;align-content:start}
.report-side .seg{justify-self:start}
.report-side .seg button{cursor:pointer}
.report-side .seg button:disabled{opacity:.45;cursor:default}
.report-side p{margin:0}
@media(max-width:820px){.report-layout{grid-template-columns:1fr}.report-cover-band{padding:14px 12px 12px}.report-cover-name{font-size:20px}}
/* Below the title page: a third for what the report holds (files, sections
   on/off, order by dragging), two thirds a viewer with the pages under each
   other, scrolling on its own (report-step.mjs, report-settings.mjs). */
.report-workbench{display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,2fr);gap:20px;align-items:start;margin-top:26px;padding-top:18px;border-top:1px solid var(--line-soft)}
.report-settings{display:grid;gap:12px;align-content:start}
.report-settings h3{margin:2px 0 0}
.report-sources{display:grid;gap:8px}
.report-sources .field{display:grid;gap:4px}
.report-sources select{width:100%;min-width:0}
.report-sources .fine-print{margin:0}
.report-sections-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.report-sections-head small{color:var(--muted,#8fa3a6);font-size:11px}
.report-sections{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.report-section{display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 8px 4px 4px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(255,255,255,.02)}
.report-section.is-fixed{opacity:.75}
.report-section.is-off .report-section-name{opacity:.5}
.report-section.is-dragging{border-color:var(--accent);background:rgba(97,216,200,.08);box-shadow:0 6px 18px rgba(0,0,0,.35);position:relative;z-index:1}
.report-grip{flex:none;width:26px;height:30px;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;color:#7f9599;cursor:grab;touch-action:none;padding:0}
.report-grip svg{width:10px;height:16px;fill:currentColor}
button.report-grip:hover,button.report-grip:focus-visible{color:var(--accent);background:rgba(97,216,200,.08);outline:none}
.report-section.is-dragging .report-grip{cursor:grabbing}
.report-section-name{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px}
.report-section-name small{font-size:10.5px;letter-spacing:.04em;color:#8fa3a6}
.report-section.is-empty .report-section-name small:last-child{color:var(--champagne)}
.report-switch{flex:none;position:relative;width:30px;height:16px;border-radius:3px;background:#1d333b;border:1px solid #4a6770;cursor:pointer;padding:0}
.report-switch span{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:2px;background:#8aa3a8;transition:transform .15s,background .15s}
.report-switch[aria-checked=true]{background:#1f5a58;border-color:#61d8c8}
.report-switch[aria-checked=true] span{transform:translateX(14px);background:#61d8c8}
.report-switch:focus-visible{outline:2px solid #61d8c8;outline-offset:2px}
.report-settings .link-button{justify-self:start}
.report-viewer{display:grid;gap:8px;min-width:0}
.report-viewer-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.report-viewer-meta{display:block;font-size:13px;margin-top:2px}
.report-viewer-scroll{height:min(78vh,980px);overflow:auto;overscroll-behavior:contain;display:grid;gap:14px;justify-items:center;align-content:start;padding:16px;border-radius:8px;background:#2b3539;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.report-page{display:block;width:100%;max-width:560px;aspect-ratio:595/842;background:#fff;border-radius:2px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
@media(max-width:820px){.report-workbench{grid-template-columns:1fr}.report-viewer-scroll{height:72vh;padding:10px}}

/* Konto › Bericht (report-brand.mjs): name, logo and banner of the title page. */
.brand-settings{display:grid;gap:18px;margin-top:12px}
.brand-picture{display:grid;gap:8px}
.brand-picture-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.brand-preview{display:grid;place-items:center;border:1px dashed var(--line);border-radius:6px;overflow:hidden;color:var(--faint);font-size:12.5px;background:rgba(0,0,0,.15)}
.brand-preview img{display:block;width:100%;height:100%;object-fit:contain}
.brand-preview-logo{width:96px;height:96px;background:#fff}
.brand-preview-logo.is-empty{background:rgba(0,0,0,.15)}
.brand-preview-banner{width:100%;max-width:520px;aspect-ratio:4/1}
.brand-preview-banner img{object-fit:cover}
.brand-picture .action-row,.brand-lock .action-row{margin:0}
.brand-lock{display:grid;gap:8px;justify-items:start;margin-top:14px;padding:12px;border:1px solid var(--champagne-line);border-radius:6px}
.brand-lock[hidden]{display:none}
#brand-status[data-kind=error]{color:#ff9a86}

/* Step 2, Prüfschritte (precheck-ui.mjs): 1 Lautstärke with the needle bar,
   2 Tonumfang with the chain's range per side. */
.precheck{display:grid;gap:14px;margin:18px 0 6px}
/* „Prüfschritte“: the three checks in a box of their own that folds to its
   head (precheck-ui.mjs fold); the head says how far they are. */
.precheck-box{margin:16px 0 4px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(10,26,32,.22)}
.precheck-box-head{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 16px;border:0;border-radius:8px;background:none;color:var(--text);font:600 15px/1.2 var(--sans);text-align:left;cursor:pointer}
.precheck-box-head:hover{background:rgba(233,239,236,.03)}
.precheck-box-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.precheck-box-title{flex:1;min-width:0}
.precheck-box-state{font:500 12px var(--mono);color:var(--muted);white-space:nowrap}
.precheck-box.is-done .precheck-box-state{color:var(--accent)}
.precheck-box-chevron{flex:none;color:var(--muted);font-size:12px;transition:transform .3s ease}
.precheck-box.is-folded .precheck-box-chevron{transform:rotate(-90deg)}
.precheck-box>.precheck{margin:0;padding:0 12px 12px}
.precheck-box.is-folded>.precheck{display:none}
.precheck-step{border:1px solid var(--line-soft);border-radius:6px;padding:16px 18px;background:rgba(10,26,32,.35)}
.precheck-step[data-state=locked]{opacity:.55}
.precheck-step[data-state=passed]{border-color:rgba(97,216,200,.55)}
.precheck-step[data-state=failed]{border-color:rgba(239,189,98,.55)}
.precheck-head{display:flex;gap:14px;align-items:flex-start}
.precheck-head strong{display:block;font-size:16px}
.precheck-head small{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.45}
.precheck-num{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);font:600 14px var(--sans);color:var(--muted)}
.precheck-step[data-state=passed] .precheck-num{border-color:var(--accent);color:var(--accent)}
.precheck-step[data-state=running] .precheck-num{border-color:var(--champagne);color:var(--champagne)}
/* The number without its circle, a little larger, in the step bar's type
   (Jonas, 30.09.2026). */
.precheck .precheck-num{width:auto;min-width:22px;height:auto;border:0;border-radius:0;place-items:start center;font:400 26px/1 var(--display)}
.precheck-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* After the checks, each step that passed folds to its name, a quiet
   "again" icon and its corner drawing; the texts fade first (precheck-ui.mjs
   settle). A picture of the drawing flies into the corner (toCorner). */
.precheck-ghost{position:fixed;margin:0;pointer-events:none;z-index:40;transform-origin:0 0}
.precheck-again{display:none;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:rgba(233,239,236,.5);cursor:pointer}
.precheck-again:hover{color:rgba(233,239,236,.85);background:rgba(233,239,236,.06)}
.precheck-again svg{display:block;width:16px;height:16px}
.precheck-step.is-fading .precheck-head small,.precheck-step.is-fading .precheck-status,.precheck-step.is-fading .action-row{opacity:0;transition:opacity .2s ease}
.precheck-step.is-compact .precheck-head small,.precheck-step.is-compact .precheck-status,.precheck-step.is-compact .action-row{display:none}
.precheck-step.is-compact .precheck-again{display:inline-grid;animation:precheck-in .5s ease both}
@keyframes precheck-in{from{opacity:0}to{opacity:1}}
.precheck-step.is-compact{padding-top:8px;padding-bottom:8px}
.precheck-step.is-compact .precheck-head{align-items:center}
.precheck-step.is-compact .precheck-badge canvas{height:40px}
.precheck-meter{display:block;width:100%;height:auto;margin:14px 0 4px}
/* The drawing of a running step (precheck-draw.mjs), in the header's line
   style; after the step it shrinks into the corner badge. */
.precheck-live{margin:14px 0 4px;transform-origin:top left}
.precheck-live[hidden]{display:none}
.precheck-canvas{display:block;width:100%;height:150px}
/* No box of its own (Jonas, 30.09.2026): the frozen drawing sits in the step's own box, all three the same size, the value under it. */
.precheck-badge{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.precheck-badge[hidden]{display:none}
.precheck-badge canvas{display:block;width:240px;height:64px}
.precheck-badge span{font:500 12px "IBM Plex Mono",ui-monospace,monospace;color:var(--accent);white-space:nowrap;line-height:1}
/* Live spectrum (live.mjs) in the line style: no boxes behind the lines */
.live-card canvas{background:transparent;border:0;border-radius:0}
/* Expert mode, active loudspeaker: expected against measured after the after run (after-check.mjs) */
.after-check{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-soft);display:grid;gap:6px}
.after-check-line{margin:0;font-size:13.5px}
.after-check-line.is-ok b{color:var(--accent)}
.after-check-line.is-room b,.after-check-line.is-place b,.after-check-line.is-entry b,.after-check-line.is-unknown b{color:#efbd62}
/* Room suggestions with PPG or KSD-RC: keep the room for the before/after comparison */
.tp-device-note{border-left:2px solid var(--champagne);padding-left:10px;margin:0 0 12px}
@media(max-width:900px) and (min-width:561px){.precheck-badge canvas{width:150px;height:48px}.precheck-step.is-compact .precheck-badge canvas{height:34px}}
@media(max-width:560px){.precheck-canvas{height:120px}.precheck-badge{gap:3px}.precheck-badge canvas{width:64px;height:28px}.precheck-badge span{font-size:11px}.precheck-text{flex:1;min-width:0}.precheck-step.is-compact .precheck-badge canvas{height:28px}}
.precheck-status{min-height:1.4em;margin:8px 0 0;font-size:13.5px;color:var(--text)}
.precheck-status:empty{display:none}
.precheck .action-row{margin-top:12px}
.precheck-range-result{display:grid;gap:4px;margin-top:10px}
.precheck-range-result:empty{display:none}
.precheck-range-row{display:flex;gap:12px;font-size:14px}
.precheck-range-row strong{min-width:4.5em;color:var(--muted);font-weight:500}
/* Tablet and desktop: a step without its drawing is compact (Jonas,
   30.09.2026): text, status and button in one column next to the corner
   drawing, less space between them; the drawing of a running step below. */
@media(min-width:561px){
  .precheck{gap:10px}
  .precheck-step{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:14px;padding:12px 16px}
  .precheck-head{display:contents}
  .precheck-num{grid-column:1;grid-row:1}
  .precheck-text{grid-column:2;grid-row:1}
  .precheck-head small{margin-top:2px;line-height:1.4}
  .precheck-badge{grid-column:3;grid-row:1/span 3;align-self:start;margin-left:0}
  .precheck-status{grid-column:2;grid-row:2;margin-top:6px}
  .precheck-step .action-row{grid-column:2;grid-row:3;margin-top:8px}
  .precheck-live{grid-column:1/-1;grid-row:4;margin:10px 0 0}
  .precheck-step.is-compact .precheck-num,.precheck-step.is-compact .precheck-text,.precheck-step.is-compact .precheck-badge{align-self:center}
  .precheck-step.is-compact .precheck-badge{grid-row:1;flex-direction:row-reverse;align-items:center;gap:12px}
}
/* While the checks run: no „erneut prüfen“, no empty button row; a folded
   step hides its signal choice with its button. */
.precheck.is-busy .precheck-again{visibility:hidden}
.precheck .action-row:not(:has(>:not(.hidden))){display:none}
.precheck-step.is-fading .precheck-signal{opacity:0;transition:opacity .2s ease}
.precheck-step.is-compact .precheck-signal{display:none}

/* Step B: "Abstand zum Boden" lights up when the hint under the model is
   tapped (placement-ui.mjs flashField). */
.speaker-feet{margin:0}
.wall-item-field.is-flash input{animation:field-flash 1.5s ease-out}
@keyframes field-flash{0%,35%{border-color:var(--accent);box-shadow:0 0 0 3px rgba(97,216,200,.45)}100%{border-color:var(--line);box-shadow:none}}
@media(prefers-reduced-motion:reduce){.wall-item-field.is-flash input{animation:none;border-color:var(--accent)}}
/* Step B without Pro: width, height and depth of a loudspeaker (placement-ui.mjs). */
.speaker-sizes-head{margin-top:4px}
.speaker-sizes{grid-template-columns:repeat(3,minmax(0,1fr))}

/* „Was ist Pro?“ / „Was ist Business?“ (plan-tour.mjs) and the pages of
   Konto they lead to (plan-pages.mjs): matte tones like metal cards (Jonas,
   30.09.2026: Pro blue, Business gold, no neon), cards in a grid with
   hairlines, coming in one after the other. */
.plan-tour,.plan-page{--glow:143,168,208;--glow2:204,176,122}
.plan-tour-business,.plan-page-business{--glow:204,176,122;--glow2:143,168,208}
.plan-tour{width:min(1180px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6);transition:opacity .18s}
.plan-tour::backdrop{background:rgba(3,10,13,.8);backdrop-filter:blur(6px)}
.plan-tour.is-closing{opacity:0}
.plan-tour-glow{position:absolute;inset:-12%;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(60% 45% at 14% 0%,rgba(var(--glow),.13),transparent 70%),radial-gradient(55% 50% at 100% 100%,rgba(var(--glow2),.06),transparent 70%);
  animation:plan-tour-drift 16s ease-in-out infinite alternate}
.plan-tour.is-in .plan-tour-glow{opacity:1}
@keyframes plan-tour-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2.5%,0) scale(1.08)}}
.plan-tour-close{z-index:3}
.plan-tour-scroll{position:relative;z-index:1;max-height:calc(100dvh - 26px);overflow:auto;overscroll-behavior:contain;padding:34px 34px 26px}
.plan-tour-head{margin-bottom:20px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.plan-tour-head h2{margin:8px 0 8px;font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,46px);line-height:1.05}
.plan-tour-price{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:rgb(var(--glow))}
.plan-tour-includes{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:14px;color:var(--text);opacity:0;transition:opacity .45s ease .1s}
.plan-tour.is-in .plan-tour-head,.plan-tour.is-in .plan-tour-includes{opacity:1;transform:none}
/* Icons in the tone with a faint halo only (Jonas: the glow blurred them). */
.plan-tour-icon,.plan-tile-icon{flex:none;display:inline-grid;width:22px;height:22px;color:rgb(var(--glow))}
.plan-tour-icon svg,.plan-tile-icon svg{width:100%;height:100%;overflow:visible}
.plan-tour .plan-tour-icon{opacity:.3;transition:opacity .5s ease,filter .6s ease;transition-delay:calc(420ms + var(--i,0)*55ms)}
.plan-tour.is-in .plan-tour-icon,.plan-tile-icon{opacity:1;filter:drop-shadow(0 0 2.5px rgba(var(--glow),.3))}
/* Hairlines drawn by the cards (outline in the 1 px gap): a short last row leaves no filled hole. */
.plan-tour-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:1px}
.plan-tour-cell{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;background:rgba(11,30,37,.94);outline:1px solid var(--line-soft);
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1),background .2s;transition-delay:calc(160ms + var(--i)*55ms),calc(160ms + var(--i)*55ms),0s}
.plan-tour.is-in .plan-tour-cell{opacity:1;transform:none}
.plan-tour-cell:hover{background:rgba(17,40,48,.96)}
.plan-tour-hd{display:flex;align-items:center;gap:10px}
.plan-tour-hd h3{margin:0;font-size:15px;line-height:1.25;font-weight:600;letter-spacing:-.005em}
/* A card's list (plan-features.mjs items): the room kinds of „Wähle deine Raumart“. */
.plan-tour-list{display:grid;gap:4px;margin:2px 0 0;padding:0;list-style:none;font-size:13px;color:var(--text)}
.plan-tour-list li{display:flex;align-items:center;gap:8px}
.plan-tour-list li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55}
.plan-tour-cell p{margin:0;font-size:13px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.plan-tour-soon{margin-left:auto;padding:2px 7px;border:1px solid rgba(var(--glow),.4);border-radius:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:rgb(var(--glow))}
/* Banners over the cards: what has its own page in Konto. */
.plan-banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 12px}
.plan-banner{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid rgba(var(--glow),.32);border-radius:6px;
  background:linear-gradient(115deg,rgba(var(--glow),.1),rgba(var(--glow),.02) 60%),rgba(9,27,33,.92);opacity:0;transform:translateY(10px);transition:opacity .5s ease .08s,transform .5s ease .08s}
.plan-banner+.plan-banner{transition-delay:.14s}
.plan-tour.is-in .plan-banner{opacity:1;transform:none}
.plan-banner-head{display:flex;align-items:flex-start;gap:14px}
.plan-banner-head>.plan-tour-icon{width:28px;height:28px;margin-top:2px}
.plan-banner-head strong{font-size:18px;font-weight:600}
.plan-banner-head .plan-tour-soon{margin-left:10px;vertical-align:2px}
.plan-banner-head p{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.plan-banner-link{align-self:flex-start;margin-top:auto;margin-left:42px;display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(var(--glow),.45);border-radius:6px;background:rgba(var(--glow),.08);color:rgb(var(--glow));font:inherit;font-size:13px;cursor:pointer}
.plan-banner-link:hover{background:rgba(var(--glow),.16)}
.plan-banner-link span{width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}
.plan-tour-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.plan-tour-has{font-size:14px;color:rgb(var(--glow))}
.plan-tour .button[data-plan-take]{background:rgb(var(--glow));border-color:rgb(var(--glow));color:#0b1620}
.plan-tour-business .button[data-plan-take]{color:#241a08}
/* Business: six cards, three a row. */
.plan-tour-business .plan-tour-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.plan-tour-grid,.plan-tour-business .plan-tour-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.plan-banners{grid-template-columns:1fr}}
@media(max-width:560px){
  .plan-tour{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .plan-tour-scroll{max-height:100dvh;padding:26px 16px 22px}
  .plan-tour-grid,.plan-tour-business .plan-tour-grid{grid-template-columns:1fr}
  .plan-banner-link{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.plan-tour *{animation:none!important;transition:none!important}.plan-tour-cell,.plan-tour-head,.plan-banner,.plan-tour-includes{opacity:1;transform:none}}
/* The way into the popup, on the metal cards in Konto › Abo. */
.plan .plan-what{position:relative;z-index:1;align-self:flex-start;margin:0 18px 16px;padding:7px 13px;border:1px solid rgba(255,255,255,.28);border-radius:4px;background:rgba(255,255,255,.12);color:var(--ink);font-size:12.5px;box-shadow:none}
.plan .plan-what:hover{background:rgba(255,255,255,.2)}
.plan-business .plan-what{border-color:rgba(43,32,16,.3);background:rgba(43,32,16,.08)}

/* The pages in Konto (plan-pages.mjs): what needs explaining, and the way back to the plan. */
.plan-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.plan-page-head h3{margin:0 0 4px}
/* The page's title in the popups' face (Jonas, 30.09.2026), „Zurück“ above it with the plan had. */
.plan-page-head .plan-page-title{margin:2px 0 8px;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.1}
.plan-page-return{display:inline-flex;align-items:center;gap:7px;margin:0 0 4px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.plan-page-return::before{content:"";width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.plan-page-return:hover{color:var(--text)}
.plan-page-return[hidden]{display:none}
.plan-page-head .fine-print{margin:0;max-width:560px}
.plan-page-action{display:flex;align-items:center;gap:10px}
.account-expert-slot[hidden]{display:none}
.plan-back{display:inline-flex;align-items:center;padding:8px 15px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:var(--metal);color:#f2f4f5;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(0,0,0,.28)}
.plan-back-pro{--metal:linear-gradient(150deg,#4b6585,#2e4361 55%,#202e45)}
.plan-back-business{--metal:linear-gradient(150deg,#d6b77f,#b9965b 55%,#9d7b46);color:#2b2010;border-color:rgba(255,255,255,.35)}
.plan-back:hover{filter:brightness(1.08)}
.plan-back[hidden]{display:none}
.plan-page-only{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.plan-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px}
.plan-tile{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;background:rgba(11,30,37,.94);outline:1px solid var(--line-soft);animation:plan-tile-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*45ms)}
@keyframes plan-tile-in{from{opacity:0;transform:translateY(10px)}}
.plan-tile-hd{display:flex;align-items:center;gap:10px}
.plan-tile-hd h4{margin:0;font-size:14.5px;font-weight:600}
.plan-tile p{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.plan-tile ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.plan-tile li::marker{color:rgba(var(--glow),.8)}
/* Bericht (plan-pages.mjs): the title page and the results as two banners, then cards; example values. */
.report-banners{container-type:inline-size;display:grid;gap:12px;margin:0 0 12px}
.report-banner{position:relative;overflow:hidden;border:1px solid rgba(var(--glow),.3);border-radius:6px;background:radial-gradient(120% 140% at 80% 0%,rgba(var(--glow),.1),transparent 60%),rgba(8,24,30,.95);animation:plan-tile-in .6s cubic-bezier(.2,.7,.2,1) both}
.report-banner-cover{min-height:290px}
.report-cover-room{position:absolute;inset:0;display:block;width:100%;height:100%}
.report-banner-cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,24,30,.96),rgba(8,24,30,.8) 30%,rgba(8,24,30,0) 52%)}
.report-banner-cover .report-banner-text{position:relative;z-index:2;max-width:min(300px,42%);padding:22px 24px}
.report-banner-text h4{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1}
.report-banner-text p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.report-cover-mark{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.report-mark-logo{width:30px;height:30px;border:1px dashed rgba(var(--glow),.6);border-radius:4px}
.report-cover-mark strong{display:block;font-size:11px;letter-spacing:.16em}
.report-cover-mark small{display:block;font:500 9.5px var(--mono);letter-spacing:.14em;color:var(--faint)}
.report-banner-results{padding:20px 22px 22px;animation-delay:.08s}
.report-banner-results .report-banner-text{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
.report-banner-results .report-banner-text>p{flex:1 1 300px}
.report-banner-results h4{flex:1 1 100%}
.report-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--muted)}
.report-legend li::before{content:"";display:inline-block;width:16px;margin-right:6px;vertical-align:middle;border-top:2px solid}
.report-legend .is-before::before{border-color:rgba(157,179,181,.6)}
.report-legend .is-after::before{border-color:rgb(var(--glow))}
.report-legend .is-target::before{border-top-style:dashed;border-color:rgba(var(--glow2),.7)}
.report-results{position:relative;margin:12px 0 0}
.report-results-chart{display:block;width:100%;height:auto}
.v-grid{stroke:rgba(157,179,181,.12);stroke-width:1}
.v-tick{font:500 11px var(--mono);fill:var(--faint);text-anchor:middle}
.v-tick-y{text-anchor:end}
.report-results .v-before{stroke-width:1.6}.report-results .v-after{stroke-width:2.2}
.v-before-r{stroke-dasharray:3 3}
.v-after-r{opacity:.6}
.report-results .v-example{top:2px;right:0;bottom:auto}
.report-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:14px 0 0;padding:1px;list-style:none}
.report-figures li{padding:10px 12px;background:rgba(6,18,23,.72);outline:1px solid rgba(157,179,181,.12)}
.report-figures span{display:block;margin-bottom:5px;font-size:11.5px;color:var(--muted)}
.report-figures b{font:500 13px var(--mono);white-space:nowrap;color:var(--text)}
.report-figures em{margin:0 6px;font-style:normal;color:var(--faint)}
.report-figures i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;vertical-align:1px}
.report-figures i.v-good{background:#7fae8f}.report-figures i.v-fair{background:#cfae6a}.report-figures i.v-bad{background:#c07a68}
.plan-report-cards .plan-report-tile h4{margin:4px 0 0;font-size:14.5px;font-weight:600}
@container (max-width:680px){.report-figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:520px){.report-banner-cover{display:flex;flex-direction:column;min-height:0}.report-cover-room{position:relative;height:220px}.report-banner-cover::before{display:none}.report-banner-cover .report-banner-text{max-width:none;padding:16px 18px}}
/* With Business: the own logo, name and banner on the title page, and the
   place to set them under it (report-brand.mjs in #account-brand-slot). */
.report-cover-strip{position:absolute;top:0;left:0;right:0;z-index:2;width:100%;height:22%;object-fit:cover}
.report-banner-cover.has-strip .report-banner-text{padding-top:calc(22% + 14px)}
.report-mark-logo.has-img{border:0;background:#fff;overflow:hidden}
.report-mark-logo img{display:block;width:100%;height:100%;object-fit:contain}
.report-brand-panel{padding:18px 20px 16px;border:1px solid rgba(var(--glow),.3);border-radius:6px;background:linear-gradient(115deg,rgba(var(--glow),.08),rgba(var(--glow),0) 55%),rgba(8,24,30,.94);animation:plan-tile-in .6s cubic-bezier(.2,.7,.2,1) both .04s}
.report-brand-panel[hidden]{display:none}
.report-brand-head h4{margin:0 0 4px;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.15}
.report-brand-head p{margin:0 0 16px;font-size:13px;color:var(--muted)}
.report-brand-panel #account-brand-slot>.fine-print:first-child{display:none}
.report-brand-panel .brand-settings{grid-template-columns:auto minmax(0,1fr);gap:18px 24px;margin:0;align-items:start}
.report-brand-panel .brand-company{grid-column:1/-1;max-width:440px}
.report-brand-panel .brand-preview{border-radius:4px}
.report-brand-panel .brand-preview-logo{width:112px;height:112px}
.report-brand-panel .brand-preview-banner{max-width:none}
.report-brand-panel .brand-picture .action-row{margin-top:2px;gap:8px}
.report-brand-panel .brand-picture .button{min-height:36px;padding:7px 13px}
.report-brand-panel .brand-picture .fine-print{margin:0;font-size:12px}
/* The file field hides, the whole button picks; the preview shows the choice. */
.report-brand-panel .import-button{position:relative}
.report-brand-panel .import-button input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.report-brand-panel #brand-status:empty{display:none}
@container (max-width:520px){.report-brand-panel .brand-settings{grid-template-columns:1fr}}
.plan-report-visual{position:relative;display:grid;place-items:center;height:128px;padding-bottom:16px;margin:-4px -6px 4px;border:1px solid rgba(var(--glow),.12);border-radius:4px;background:rgba(6,18,23,.72);overflow:hidden}
.plan-report-visual svg{width:100%;height:100%;padding:8px 10px}
.plan-report-visual[data-visual=ppg]{display:flex;flex-direction:column;justify-content:center;align-items:stretch}
.v-example{position:absolute;right:8px;bottom:5px;font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.v-axis{fill:none;stroke:rgba(157,179,181,.35);stroke-width:1}
.v-soft{fill:rgba(157,179,181,.22)}
.v-good{fill:#7fae8f}.v-fair{fill:#cfae6a}.v-bad{fill:#c07a68}
.v-target{fill:none;stroke:rgba(var(--glow2),.65);stroke-width:1.2;stroke-dasharray:4 4}
.v-before{fill:none;stroke:rgba(157,179,181,.55);stroke-width:1.4}
.v-after{fill:none;stroke:rgb(var(--glow));stroke-width:1.8}
.v-band{fill:rgba(var(--glow2),.12)}
.v-bar{fill:rgba(var(--glow),.72)}
.v-mode{stroke:rgba(var(--glow2),.6);stroke-width:1;stroke-dasharray:3 4}
.v-fall{fill:none;stroke:rgb(var(--glow));stroke-width:1.2}
.v-seat{fill:rgb(var(--glow))}.v-point{fill:none;stroke:rgb(var(--glow));stroke-width:1.4}
.v-label{font:600 7.5px var(--sans);fill:#0a1a20;text-anchor:middle}
.v-table{width:calc(100% - 24px);margin:0 12px;border-collapse:collapse;font:500 11.5px var(--mono);color:var(--text)}
.v-table th{padding:2px 6px;font-weight:500;text-align:right;color:var(--faint)}
.v-table td{padding:2px 6px;text-align:right;border-top:1px solid rgba(157,179,181,.14)}
.v-table td:first-child,.v-table th:first-child{text-align:left;color:var(--faint)}
.v-note{margin:5px 12px 0;font:500 10.5px var(--mono);white-space:nowrap;color:rgb(var(--glow))}
.v-checks,.v-list{width:100%;margin:0;padding:0 14px;list-style:none;display:grid;gap:7px;font-size:12px;color:var(--text)}
.v-checks li{display:grid;grid-template-columns:14px 1fr 70px;align-items:center;gap:6px}
.v-checks b{color:#7fae8f;font-weight:600}
.v-checks span{height:5px;border-radius:3px;background:linear-gradient(90deg,rgba(var(--glow),.8) var(--w),rgba(157,179,181,.2) var(--w))}
.v-list li{display:flex;gap:8px;padding-bottom:5px;border-bottom:1px solid rgba(157,179,181,.12)}
.v-list span{min-width:30px;font-family:var(--mono);color:rgb(var(--glow))}
/* Unterstützte Geräte: brands A–Z, folded. */
.devices-search{width:100%;max-width:420px;margin:0 0 12px;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:rgba(6,18,23,.85);color:var(--text);font:inherit}
.devices-search:focus{outline:none;border-color:rgb(var(--glow));box-shadow:0 0 0 3px rgba(var(--glow),.16)}
.devices-list{display:grid;gap:6px}
.device-brand{border:1px solid var(--line-soft);border-radius:6px;background:rgba(11,30,37,.7);overflow:hidden}
.device-brand summary{display:flex;align-items:baseline;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.device-brand summary::-webkit-details-marker{display:none}
.device-brand summary::before{content:"";flex:none;align-self:center;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .2s}
.device-brand[open] summary::before{transform:rotate(45deg)}
.device-brand-name{font-weight:600}
.device-brand-meta{font-size:12.5px;color:var(--faint)}
.device-models{width:100%;border-collapse:collapse;font-size:13px}
.device-models th{padding:6px 14px;border-top:1px solid var(--line-soft);font-weight:500;text-align:left;color:var(--faint)}
.device-models td{padding:7px 14px;border-top:1px solid var(--line-soft)}
.device-models small{margin-left:4px;color:var(--faint)}
@media(max-width:980px){.plan-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.plan-tiles{grid-template-columns:1fr}.plan-page-action{width:100%}}
@media(prefers-reduced-motion:reduce){.plan-tile,.report-banner{animation:none}}

/* Pro teasers in the free plan (pro-teasers.mjs): in a box's menu the
   catalogue, in step 1 the bar where step C stands with Pro. Matte Pro blue
   as the plan pages (143,168,208). */
.pro-teaser-catalogue{--pt:143,168,208;display:flex;align-items:center;gap:12px;width:100%;margin:2px 0;padding:10px 12px;text-align:left;font:inherit;color:var(--text);cursor:pointer;
  border:1px solid rgba(var(--pt),.38);border-radius:6px;background:linear-gradient(110deg,rgba(var(--pt),.14),rgba(var(--pt),.03) 65%),rgba(9,27,33,.9);transition:border-color .15s,background .15s}
.pro-teaser-catalogue:hover{border-color:rgba(var(--pt),.7);background:linear-gradient(110deg,rgba(var(--pt),.2),rgba(var(--pt),.05) 65%),rgba(9,27,33,.9)}
.pro-teaser-catalogue:focus-visible{outline:2px solid rgb(var(--pt));outline-offset:2px}
.pro-teaser-things{flex:none;display:grid;width:64px;height:24px;color:rgb(var(--pt))}
.pro-teaser-things svg{width:100%;height:100%}
.pro-teaser-text{flex:1;min-width:0;display:grid;gap:2px}
.pro-teaser-text strong{font-size:13px;font-weight:600;line-height:1.3}
.pro-teaser-text small{font-size:11.5px;color:rgb(var(--pt))}
.pro-teaser-tag{flex:none;padding:2px 8px;border:1px solid rgba(var(--pt),.55);border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:rgb(var(--pt))}
.pro-teaser-step{--pt:143,168,208;position:relative;overflow:hidden;min-height:200px;padding:0!important;border:1px solid rgba(var(--pt),.32)!important;border-radius:6px;
  background:radial-gradient(120% 140% at 85% 0%,rgba(var(--pt),.1),transparent 60%),rgba(8,24,30,.95)!important}
body.plan-pro .pro-teaser-step{display:none!important}
.pro-teaser-art{position:absolute;top:0;right:0;width:64%;height:100%;display:block}
.pro-teaser-step::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,24,30,.97),rgba(8,24,30,.86) 34%,rgba(8,24,30,0) 58%)}
.pro-teaser-step-text{position:relative;z-index:2;max-width:min(360px,46%);padding:22px 24px}
.pro-teaser-step-text .eyebrow{color:rgb(var(--pt))}
.pro-teaser-step-text h3{margin:8px 0 8px;font-family:var(--display);font-weight:400;font-size:25px;line-height:1.12}
.pro-teaser-step-text p{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--muted)}
.pro-teaser-link{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(var(--pt),.45);border-radius:6px;background:rgba(var(--pt),.08);color:rgb(var(--pt));font:inherit;font-size:13px;cursor:pointer}
.pro-teaser-link:hover{background:rgba(var(--pt),.16)}
.pro-teaser-link span{width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}
/* The room mode on the floor: its two halves swing against each other. */
.pro-teaser-art .pt-mode{animation:pt-shimmer 3.6s ease-in-out infinite alternate}
.pro-teaser-art .pt-mode-b{animation-delay:-3.6s}
@keyframes pt-shimmer{from{opacity:.28}to{opacity:.95}}
@media(prefers-reduced-motion:reduce){.pro-teaser-art .pt-mode{animation:none;opacity:.7}}
@media(max-width:640px){.pro-teaser-step{display:flex;flex-direction:column;min-height:0}.pro-teaser-art{position:relative;width:100%;height:170px}.pro-teaser-step::before{display:none}.pro-teaser-step-text{max-width:none;padding:16px 18px}}
/* The free window "Objekt hinzufügen": every thing as its rectangle, and
   over the list the button with the catalogue's scene (pro-teasers.mjs). */
.pick-rect{display:grid;place-items:center;flex:none}
.pick-rect svg{width:100%;height:100%}
.pick-rect rect{fill:rgba(97,216,200,.1);stroke:var(--accent,#61d8c8);stroke-width:1.4}
.pro-teaser-popup{--pt:143,168,208;flex:none;min-height:86px;display:flex;align-items:stretch;gap:0;margin:6px 16px 4px;padding:0;overflow:hidden;text-align:left;font:inherit;color:var(--text);cursor:pointer;
  border:1px solid rgba(var(--pt),.4);border-radius:6px;background:radial-gradient(120% 160% at 0% 0%,rgba(var(--pt),.12),transparent 60%),rgba(8,24,30,.95);transition:border-color .15s}
.pro-teaser-popup:hover{border-color:rgba(var(--pt),.75)}
.pro-teaser-popup:focus-visible{outline:2px solid rgb(var(--pt));outline-offset:2px}
.pro-teaser-scene-wrap{flex:none;width:190px;position:relative}
.pro-teaser-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.pro-teaser-scene-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,24,30,0) 70%,rgba(8,24,30,.95))}
.pro-teaser-popup-text{flex:1;min-width:0;display:grid;gap:4px;align-content:center;padding:12px 8px 12px 14px}
.pro-teaser-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgb(var(--pt))}
.pro-teaser-popup-text strong{font-size:14.5px;font-weight:600;line-height:1.25}
.pro-teaser-popup-text small{font-size:12px;line-height:1.4;color:var(--muted)}
.pro-teaser-arrow{flex:none;align-self:center;width:8px;height:8px;margin:0 18px 0 6px;border-right:1.6px solid rgb(var(--pt));border-top:1.6px solid rgb(var(--pt));transform:rotate(45deg)}
@media(max-width:560px){.pro-teaser-popup{margin:6px 10px 4px}.pro-teaser-scene-wrap{width:120px}.pro-teaser-popup-text small{display:none}}
/* "Wähle deinen Lautsprecher" in "Neuer Raum" without Pro (pro-teasers.mjs speakerTeaser): the
   line-up from Blender as a banner, the words over its dark left side, a light lift under the pointer. */
.pro-teaser-speakers{--pt:143,168,208;position:relative;display:block;width:100%;aspect-ratio:8/3;margin:14px 0 2px;padding:0;overflow:hidden;border:1px solid rgba(var(--pt),.32);border-radius:8px;background:#0a161c;font:inherit;text-align:left;color:var(--text);cursor:pointer;box-shadow:0 18px 40px rgba(2,8,12,.45);transition:border-color .2s,box-shadow .2s}
.pro-teaser-speakers[hidden]{display:none}
.pro-teaser-speakers img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pro-teaser-speakers::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,13,18,.9) 0%,rgba(6,13,18,.55) 30%,rgba(6,13,18,0) 52%),linear-gradient(0deg,rgba(6,13,18,.35),rgba(6,13,18,0) 40%)}
.pro-teaser-speakers-text{position:absolute;z-index:1;left:clamp(16px,3.4%,28px);top:50%;transform:translateY(-50%);display:grid;gap:7px;max-width:46%}
.pro-teaser-speakers strong{font-size:clamp(18px,2.6vw,26px);line-height:1.12;font-weight:600;letter-spacing:-.01em;color:#f2f7fb}
.pro-teaser-speakers-link{display:inline-flex;align-items:center;margin-top:3px;font-size:13px;font-weight:600;color:rgb(var(--pt))}
.pro-teaser-speakers-link .pro-teaser-arrow{width:7px;height:7px;margin:0 0 0 7px}
.pro-teaser-speakers:hover,.pro-teaser-speakers:focus-visible{border-color:rgba(var(--pt),.7);box-shadow:0 18px 44px rgba(2,8,12,.55),0 0 0 1px rgba(var(--pt),.25)}
.pro-teaser-speakers:hover img,.pro-teaser-speakers:focus-visible img{transform:scale(1.035)}
.pro-teaser-speakers:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Phone: the picture on top, cut to the loudspeakers and fading into the card, the words under it. */
@media(max-width:560px){.pro-teaser-speakers{aspect-ratio:auto;display:flex;flex-direction:column}
  .pro-teaser-speakers img{position:static;height:auto;aspect-ratio:2/1;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .pro-teaser-speakers::after{display:none}
  .pro-teaser-speakers-text{position:static;transform:none;max-width:none;gap:5px;padding:0 16px 16px;margin-top:-8px}
  .pro-teaser-speakers strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.pro-teaser-speakers img{transition:none}.pro-teaser-speakers:hover img{transform:none}}
/* Messen › Messmikrofon: HiFi-Hörraum and above need an external one (mic-requirement-ui.mjs). */
.mic-requirement{grid-column:1/-1;margin:-6px 0 4px;padding:8px 10px;text-transform:none;letter-spacing:normal;font-weight:400;border:1px solid rgba(240,180,138,.45);border-radius:6px;background:rgba(240,180,138,.08);font-size:12.5px;line-height:1.45;color:#f3cdb0;transition:box-shadow .3s}
.mic-requirement[hidden]{display:none}
.mic-requirement.is-attention{box-shadow:0 0 0 2px rgba(240,180,138,.7)}
/* Loudspeaker kinds as pictures (speaker-picker.mjs functionField) and,
   without Pro, the last entry: the model, measured (pro-teasers.mjs). */
.pick-kind{display:grid;place-items:center;width:64px;height:64px;color:var(--accent,#61d8c8)}
.pick-kind svg{width:52px;height:52px}
.pick-current .pick-kind{width:40px;height:40px}.pick-current .pick-kind svg{width:30px;height:30px}
.pro-teaser-model{--pt:143,168,208;display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 2px;padding:10px 12px;text-align:left;font:inherit;color:var(--text);cursor:pointer;
  border:1px dashed rgba(var(--pt),.5);border-radius:6px;background:linear-gradient(110deg,rgba(var(--pt),.12),rgba(var(--pt),.02) 65%),rgba(9,27,33,.9)}
.pro-teaser-model:hover{border-style:solid;border-color:rgba(var(--pt),.75)}
.pro-teaser-model:focus-visible{outline:2px solid rgb(var(--pt));outline-offset:2px}
.pro-teaser-model-icon{flex:none;display:grid;width:34px;height:34px;color:rgb(var(--pt))}
.pro-teaser-model-icon svg{width:100%;height:100%}
.pro-teaser-model .pro-teaser-text small{color:rgb(var(--pt))}
/* Business › Projekte › Projektbericht (project-report.mjs): the rooms left,
   unfolded with their sections, the pages of all reports right. */
.project-report{width:min(1220px,calc(100vw - 24px));height:min(92vh,960px);max-height:none;padding:0;border:1px solid var(--line,#29474f);border-radius:8px;background:var(--panel,#10272f);color:var(--text,#e9efec);box-shadow:0 30px 90px #000a}
.project-report[open]{display:flex;flex-direction:column}
.project-report::backdrop{background:rgba(4,14,18,.72)}
.project-report-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:16px 18px 12px;border-bottom:1px solid var(--line-soft)}
.project-report-head h2{margin:2px 0 0;font-family:var(--display);font-weight:400;font-size:26px}
.project-report-tools{display:flex;align-items:center;gap:10px}
.project-report-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:18px;padding:14px 18px 18px}
.project-report-rooms{min-height:0;overflow:auto;display:grid;align-content:start;gap:8px}
.project-report-rooms .fine-print{margin:0}
.project-report-rooms>ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.project-report-room{border:1px solid var(--line-soft);border-radius:6px;background:rgba(255,255,255,.02)}
.project-report-room.is-off .project-report-name{opacity:.5}
.project-report-row{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px}
.project-report-take{width:18px;height:18px;accent-color:var(--accent,#61d8c8);flex:none}
.project-report-fold{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px;border:0;background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.project-report-chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .15s;opacity:.7}
.project-report-room.is-open .project-report-chev{transform:rotate(-135deg)}
.project-report-sections{list-style:none;margin:0;padding:0 8px 8px;display:grid;gap:4px}
.project-report .report-viewer{min-height:0;display:flex;flex-direction:column}
.project-report .report-viewer-scroll{flex:1;height:auto;min-height:0}
@media(max-width:820px){.project-report-body{grid-template-columns:1fr;overflow:auto}.project-report .report-viewer-scroll{height:70vh;flex:none}.project-report-rooms{overflow:visible}}
/* Projekte (folders-ui.mjs): "Projektbericht" over the rooms and "Bericht" on a room, in the window's gold as an outline. */
.folders-dialog .folders-report-btn{background:transparent;border:1px solid rgba(var(--gold,204,176,122),.8);color:rgb(var(--gold,204,176,122))}
.folders-dialog .folders-report-btn:hover:not(:disabled){background:rgba(var(--gold,204,176,122),.12)}
.folders-dialog .folders-room-report{border-color:rgba(var(--gold,204,176,122),.45);color:rgb(var(--gold,204,176,122))}
/* Step Bericht, Business: KI pictures (visuals-ui.mjs). The block in the
   settings and the editor: photo left with the crop frame or the element's
   field to drag, the steps' controls right. */
.report-visuals{display:grid;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line-soft)}
.report-visuals .fine-print{margin:0}
.report-visuals-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.report-visual{display:flex;align-items:center;gap:10px;padding:4px;border:1px solid var(--line-soft);border-radius:6px}
.report-visual img{width:64px;height:44px;object-fit:cover;border-radius:3px;flex:none}
.report-visual span{flex:1;min-width:0;font-size:13px}
.report-visual-del{flex:none;min-width:30px;height:28px;padding:0 8px;border:1px solid var(--line-soft);border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}
.report-visual-del.is-sure{border-color:#ff8f7a;color:#ff8f7a}
.report-visual-add{justify-self:start}
.visual-editor{width:min(1180px,calc(100vw - 24px));height:min(90vh,900px);max-height:none;padding:0;border:1px solid var(--line,#29474f);border-radius:8px;background:var(--panel,#10272f);color:var(--text,#e9efec);box-shadow:0 30px 90px #000a}
.visual-editor[open]{display:flex;flex-direction:column}
.visual-editor::backdrop{background:rgba(4,14,18,.78)}
.visual-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 18px 8px}
.visual-head h2{margin:2px 0 0;font-family:var(--display);font-weight:400;font-size:26px}
/* The four steps, numbered, the ones done marked, a line between (Jonas, 07.10.2026). */
.visual-steps{display:flex;align-items:center;margin:0;padding:2px 18px 14px;list-style:none}
.visual-steps li{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;font-size:12.5px;color:var(--muted)}
.visual-steps li:last-child{flex:0 0 auto}
.visual-steps li:not(:last-child)::after{content:"";flex:1;min-width:12px;height:1px;margin:0 10px;background:var(--line-soft)}
.visual-step-num{flex:none;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line-soft);border-radius:50%;font:600 11.5px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted)}
.visual-step-name{white-space:nowrap}
.visual-steps li.is-now{color:var(--text)}
.visual-steps li.is-now .visual-step-num{border-color:var(--accent,#61d8c8);background:var(--accent,#61d8c8);color:#0c1f25}
.visual-steps li.is-done .visual-step-num{border-color:var(--accent,#61d8c8);color:var(--accent,#61d8c8)}
.visual-steps li.is-done::after{background:var(--accent,#61d8c8)}
.visual-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:18px;padding:0 18px 18px}
.visual-stage{min-height:0;display:grid;place-items:center;border-radius:8px;background:#0a1a20;overflow:hidden}
.visual-frame{position:relative;max-width:100%;max-height:100%;line-height:0;touch-action:none;user-select:none}
.visual-frame[hidden]{display:none}
.visual-img{display:block;max-width:100%;max-height:min(70vh,700px);object-fit:contain}
.visual-crop,.visual-box{position:absolute;box-sizing:border-box;cursor:move;touch-action:none}
.visual-crop{border:2px solid #fff;box-shadow:0 0 0 9999px rgba(4,14,18,.55)}
.visual-box{border:2px dashed #8fa8d0;background:rgba(143,168,208,.16)}
.visual-box.is-busy{animation:visual-busy 1.2s ease-in-out infinite alternate}
@keyframes visual-busy{from{background:rgba(143,168,208,.1)}to{background:rgba(143,168,208,.35)}}
.visual-box-label{position:absolute;left:0;top:-22px;white-space:nowrap;line-height:1.2;font-size:11.5px;padding:2px 6px;border-radius:3px;background:#8fa8d0;color:#0a1a20;font-weight:600}
.visual-handle{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0a1a20;touch-action:none}
.visual-handle.is-nw{left:-9px;top:-9px;cursor:nwse-resize}.visual-handle.is-ne{right:-9px;top:-9px;cursor:nesw-resize}
.visual-handle.is-sw{left:-9px;bottom:-9px;cursor:nesw-resize}.visual-handle.is-se{right:-9px;bottom:-9px;cursor:nwse-resize}
.visual-empty{display:grid;justify-items:center;gap:6px;padding:40px;border:1.5px dashed var(--line,#29474f);border-radius:8px;cursor:pointer;color:var(--text)}
.visual-empty[hidden]{display:none}
.visual-empty span{font-size:16px;font-weight:600}.visual-empty small{color:var(--muted)}
.visual-side{min-height:0;overflow:auto;display:grid;align-content:start;gap:10px}
.visual-side .fine-print{margin:0}
.visual-side .button{justify-self:stretch}
.visual-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.visual-kind{display:grid;gap:2px;padding:8px 10px;text-align:left;font:inherit;color:var(--text);border:1px solid var(--line-soft);border-radius:6px;background:rgba(255,255,255,.02);cursor:pointer}
.visual-kind strong{font-size:13px}.visual-kind small{font-size:11px;color:var(--muted)}
.visual-kind.is-on{border-color:#8fa8d0;background:rgba(143,168,208,.14)}
.visual-note{display:grid;gap:4px}.visual-note input{width:100%}
.visual-ref{cursor:pointer;text-align:center}
.visual-note select{width:100%}
.visual-dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.visual-dims input{width:100%;min-width:0}
.visual-pics{display:grid;gap:6px}
.visual-ref.is-full{opacity:.55;cursor:default}
.visual-pic-row{display:flex;flex-wrap:wrap;gap:6px}.visual-pic-row:empty{display:none}
.visual-pic{position:relative;width:64px;height:64px;border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}
.visual-pic img{width:100%;height:100%;object-fit:cover;display:block}
.visual-pic-del{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(4,14,18,.8);color:#fff;font-size:13px;line-height:20px;cursor:pointer}
.visual-pic-hint{font-size:11px;color:var(--muted)}
.visual-privacy{font-size:11.5px;color:var(--muted)}
.visual-status{margin:0;font-size:13px;color:var(--champagne)}
@media(max-width:820px){.visual-body{grid-template-columns:1fr;overflow:auto}.visual-img{max-height:52vh}.visual-steps li:not(.is-now) .visual-step-name{display:none}}

/* Fachanalyse von Stefan (main 0.15.159). Phase: zweite Grafik links minus rechts, Befunde und „Worauf achten“. */
/* Bass preference before the zone EQ (0.15.149): same choice buttons as the treatment card. */
.bass-pref{margin:4px 0 14px}
.bass-pref h3{margin:0 0 8px}
.bass-pref .tp-pref{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.bass-pref .tp-pref-note{flex-basis:100%;color:var(--muted)}
.bass-pref .tp-choice{display:inline-flex;align-items:center;gap:8px;opacity:1}
.bass-pref .tp-choice:not([aria-pressed=true]){color:#aec6c8;border-color:#3f5c64;background:transparent}
.bass-pref .tp-choice[aria-pressed=true]{border-color:var(--accent);background:#1b3f45;color:#bff3ea;opacity:1}
.bass-pref .tp-choice[aria-pressed=true]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(97,216,200,.7)}

/* KSD Final FR (0.15.150): current and planned values side by side. */
.finalfr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:10px}
.finalfr-grid h3{margin:0 0 6px}
#finalfr-status[data-kind=error]{color:#ffab9b}
#finalfr-status[data-kind=success]{color:#9de5ca}

/* Feldüberschrift mit i-Knopf daneben (Analysefrequenz). */
.field-head{display:flex;align-items:center;gap:8px}

/* Phase: zweite Grafik links minus rechts, Befunde und „Worauf achten“. */
#phase-controls{margin:0 0 12px}
#phase-diff-chart{display:block;width:100%;height:auto;margin-top:10px;border-radius:6px}
.phase-guide{margin:14px 0 0;padding:14px 18px;border:1px solid var(--line-soft);border-radius:8px}
.phase-guide h4{margin:12px 0 6px;font-size:14px}
.phase-guide ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13.5px;line-height:1.5}
.phase-findings{list-style:none;padding-left:0!important}
.phase-findings li{padding-left:14px;position:relative}
.phase-findings li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.phase-findings li[data-level="warn"]::before{background:#f0a35e}
.phase-findings li[data-level="note"]::before{background:#7f9aa1}

/* Fachanalyse › Befunde: je Befund Ursache und Abhilfe. */
.findings-list{display:grid;gap:10px;margin:12px 0}
.finding-card{border:1px solid var(--line-soft);border-left:3px solid var(--accent);border-radius:8px;padding:12px 16px;background:rgba(10,26,32,.35)}
.finding-card.is-warn{border-left-color:#f0a35e}
.finding-card.is-note{border-left-color:#7f9aa1}
.finding-card>strong{display:block;margin-bottom:6px}
.check-verdict.is-warn{color:#f0b48a}
.finding-card .tp-rec-rows{display:grid;grid-template-columns:90px minmax(0,1fr);gap:4px 12px;margin:0}
.finding-card .tp-rec-rows dt{color:var(--muted);font-size:13px}
.finding-card .tp-rec-rows dd{margin:0}
@media (max-width:560px){.finding-card .tp-rec-rows{grid-template-columns:1fr}}

/* PPG-Werte: geänderte Bänder nach neuer Berechnung, Hinweis auf veraltete Werte. */
.ppg-values-table tr.band-changed td{animation:band-flash 2.4s ease-out 1;color:var(--accent)}
@keyframes band-flash{0%{background:rgba(97,216,200,.28)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.ppg-values-table tr.band-changed td{animation:none}}
.ppg-values-change{margin:6px 0 10px;color:var(--accent);font-size:13.5px}
.ppg-values-stale{margin:6px 0 10px;padding:8px 12px;border-radius:6px;background:rgba(240,163,94,.12);color:#f0b48a;font-size:13.5px}

/* Grafischer EQ (eq-editor.mjs): Griffe über der gemessenen Hörzone. */
.eq-editor{display:grid;gap:10px;margin:10px 0}
.eq-editor-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.eq-editor-head .seg{display:flex;gap:4px;flex-wrap:wrap}
.eq-editor-head .seg button{border:1px solid var(--line-soft);background:transparent;color:var(--text);border-radius:6px;padding:5px 10px;font-size:13px;cursor:pointer}
.eq-editor-head .seg button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.eq-editor-canvas{display:block;width:100%;border-radius:8px;touch-action:none;cursor:crosshair}
.eq-editor-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.eq-editor-band{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.eq-editor-field{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.eq-editor-field input{width:86px}
.eq-editor-warn{flex-basis:100%;margin:0;color:#f0b48a;font-size:13px}
.finalfr-work{align-items:end}

/* Ergebnis › Deine Musik (music-taste-ui.mjs): Genre, Klangbild und Musik-App
   als Dropdowns wie „Quelle“ und „Tempo“ in Schritt C, darunter gleich die Einstellung. */
.music-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 14px}
/* Active loudspeakers: no music app (Einstellwerte instead), two menus. */
.music-choices>[hidden]{display:none}
@media(max-width:720px){.music-choices{grid-template-columns:1fr}}
.music-values{grid-template-columns:repeat(3,minmax(0,1fr));max-width:420px;margin:0 0 14px}
.music-values[hidden]{display:none}
.music-fit{display:grid;gap:6px;max-width:520px}
.music-fit-head{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted)}
.music-fit-head strong{color:var(--text);font-weight:600}
.music-fit-bar{height:4px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.music-fit-bar i{display:block;height:100%;background:var(--accent)}
.music-fit-why{margin:0}
.music-body{display:grid;gap:16px;margin-top:14px}
.music-app .eq-bars{max-width:none}
.music-app-title{margin:14px 0 6px;font:600 13px/1.3 var(--sans);color:var(--text)}
.music-app-title:first-child{margin-top:0}
.music-mix{margin:0 0 10px}
.music-preset{font:600 16px var(--display);margin:0}
.music-peq{border-collapse:collapse;font-size:13px}.music-peq th,.music-peq td{padding:4px 10px;border-bottom:1px solid var(--line-soft);text-align:left}
.music-suggestions{display:grid;gap:10px}.music-suggestions h3{margin:0}
.music-suggestion{border:1px solid var(--line-soft);border-left:3px solid rgb(232,190,84);border-radius:8px;padding:10px 14px;display:grid;gap:6px}
.music-suggestion p{margin:0;font-size:13.5px}.music-suggestion .button{justify-self:start}

/* Messen › Messmikrofon: „Unsere Empfehlung“ under the choice, and its window
   (mic-recommend-ui.mjs, 09.10.2026). */
.mic-recommend-link{align-self:flex-start;font:500 12px var(--sans)}
.mic-recommend{max-width:min(560px,calc(100vw - 32px))}
.mic-recommend-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mic-recommend-top h3{margin:6px 0 0}
.mic-recommend-actions{display:flex;align-items:center;gap:8px;flex:none}
.mic-recommend-why{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.5);display:grid;gap:6px}
.mic-recommend-why[hidden]{display:none}
.mic-recommend-why p{margin:0;font-size:13px;line-height:1.45}
.mic-recommend-list{display:grid;gap:10px;margin-top:14px}
.mic-card{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:6px;background:rgba(10,26,32,.5)}
.mic-card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.mic-card-head strong{font-size:14px}
.mic-card-price{font-size:12.5px;color:var(--muted)}
.mic-card-line,.mic-card-note{margin:0;font-size:12.5px;color:var(--muted)}
.mic-card-note{color:var(--text)}
.mic-card-shops{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mic-shop{min-height:34px;padding:0 12px;font-size:12px}
/* Step A › Tonformat beside Raumart; step B › Winkel-Check (layout-check-ui.mjs). */
.room-kind.sound-format{margin-left:0}
.room-kind.sound-format[hidden]{display:none!important}
.layout-check{margin-top:18px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(9,24,30,.55)}
.layout-check[hidden]{display:none}
.layout-check-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.layout-check-head h3{margin:2px 0 0;font-size:16px}
.layout-check-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--line-soft);border-radius:8px}
.layout-check-icon svg{width:30px;height:30px}
/* Refreshed 11.10.2026: the verdicts as pills in the head, then two lists side
   by side, Positionierung left, Abstände und Symmetrie right; each row one line
   with its scale (layout-check-ui.mjs scaleOf), its verdict as the colour of
   its edge and chip. */
.layout-count{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.layout-pill{padding:3px 9px;border-radius:999px;font:600 11px var(--sans);letter-spacing:.02em;white-space:nowrap}
.layout-pill.is-passt{background:rgba(127,212,160,.14);color:#9fe3b9}
.layout-pill.is-knapp{background:rgba(240,190,90,.14);color:#f1cd7e}
.layout-pill.is-falsch{background:rgba(255,143,122,.14);color:#ffab9a}
.layout-pill.is-fehlt{background:rgba(160,175,180,.12);color:#b7c3c6}
.layout-cols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}
.layout-col{min-width:0}
.layout-col-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 6px;padding:0 2px}
.layout-col-head h4{margin:0;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--champagne)}
.layout-col-head span{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
.layout-check-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.layout-row{--tone:rgba(143,168,208,.7);display:grid;gap:2px;padding:7px 10px 7px 11px;border:1px solid var(--line-soft);border-left:3px solid var(--tone);border-radius:6px;background:rgba(233,239,236,.015)}
.layout-row.is-passt{--tone:rgba(127,212,160,.7)}
.layout-row.is-knapp{--tone:rgba(240,190,90,.75)}
.layout-row.is-falsch{--tone:rgba(255,143,122,.8)}
.layout-row.is-fehlt{--tone:rgba(160,175,180,.45)}
.layout-row-top{display:flex;align-items:center;gap:10px;min-width:0}
.layout-row-title{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}
.layout-row-title strong{font-size:13.5px;white-space:nowrap}
.layout-row-speaker{min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layout-row-scale{flex:none;line-height:0}
.layout-row-scale svg{display:block}
.layout-chip{flex:none;min-width:68px;box-sizing:border-box;padding:2px 7px;border-radius:4px;text-align:center;font:600 10px var(--sans);text-transform:uppercase;letter-spacing:.05em}
.layout-row.is-passt .layout-chip{background:rgba(127,212,160,.16);color:#9fe3b9}
.layout-row.is-knapp .layout-chip{background:rgba(240,190,90,.16);color:#f1cd7e}
.layout-row.is-falsch .layout-chip{background:rgba(255,143,122,.16);color:#ffab9a}
.layout-row.is-fehlt .layout-chip{background:rgba(160,175,180,.14);color:#b7c3c6}
.layout-row.is-hinweis .layout-chip{background:rgba(143,168,208,.16);color:#b8c8e6}
.layout-row-detail,.layout-row-move{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.layout-row-move{color:var(--text)}
.layout-bars{display:grid;gap:3px;margin-top:6px}
.layout-bar{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;font:500 11px var(--mono);color:var(--muted)}
.layout-bar-track{height:6px;border-radius:3px;background:rgba(233,239,236,.07);overflow:hidden}
.layout-bar-track i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(97,216,200,.3),rgba(97,216,200,.8))}
.layout-bar-value{color:var(--text);font-variant-numeric:tabular-nums}
.layout-check-foot{margin:10px 0 0}
.layout-check-sum{margin:-4px 0 12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.layout-row-source{margin:0;font:500 10.5px var(--mono);letter-spacing:.02em;color:var(--faint)}
@media (max-width:900px){.layout-cols{grid-template-columns:minmax(0,1fr)}}
.layout-check-head>div:not(.layout-count){flex:1 1 0;min-width:0}
@media (max-width:600px){.layout-check{padding:12px}.layout-check-head{flex-wrap:wrap}.layout-count{flex-basis:100%;margin-left:52px;justify-content:flex-start}}
@media (max-width:420px){.layout-row-scale{display:none}}
/* Hörsaal (hall-ui.mjs): in hall mode the stereo cards of Messen, Ergebnis and Prüfen step aside. */
body.hall-mode [data-stage~="analysis"]:not(.hall-card),body.hall-mode [data-stage~="check"]:not(.hall-card):not(#mic-level-card):not(#live-card),
body.hall-mode #precheck-reverb,body.hall-mode .sound-format,body.hall-mode #layout-check{display:none!important}
.hall-card[hidden],.hall-use[hidden]{display:none!important}
.hall-lead{margin:0 0 12px;color:var(--muted);font-size:14px}
.hall-grade{margin:0 0 10px;padding:8px 12px;border-radius:7px;border:1px solid var(--line-soft);font-size:13.5px}
.hall-grade.is-reached{border-color:rgba(127,212,160,.45);color:#9fe3b9}
.hall-plan{margin:6px 0;border:1px solid var(--line-soft);border-radius:10px;background:rgba(9,24,30,.55);padding:8px}
.hall-plan-svg{display:block;width:100%;max-height:420px}
.hall-plan-room{fill:rgba(97,216,200,.05);stroke:var(--muted);stroke-width:2}
.hall-plan-dmin{fill:none;stroke:#f1cd7e;stroke-width:1.5;stroke-dasharray:6 6;opacity:.7}
.hall-plan-source{fill:#9fd36e}
.hall-plan-mic{stroke:var(--accent,#61d8c8);stroke-width:2.5;fill:transparent}
.hall-plan-mic.is-part{fill:rgba(97,216,200,.35)}
.hall-plan-mic.is-done{fill:var(--accent,#61d8c8)}
.hall-plan-mic.has-issue{stroke:#f1cd7e}
.hall-plan-label{fill:var(--text);font:600 16px var(--sans);text-anchor:middle}
.hall-issues{margin:6px 0;padding-left:18px;font-size:13px;color:#f1cd7e}
.hall-next{margin:10px 0}
.hall-grid-wrap{overflow-x:auto;margin:8px 0}
.hall-grid,.hall-table{border-collapse:collapse;width:100%;font-size:13px}
.hall-grid th,.hall-grid td,.hall-table th,.hall-table td{padding:6px 8px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle}
.hall-grid td,.hall-table td{color:var(--text);font-weight:400}
.hall-grid th small{display:block;color:var(--muted);font-weight:400}
.hall-cell{display:grid;gap:1px;min-width:96px;padding:6px 10px;border:1px solid var(--line-soft);border-radius:7px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.hall-cell small{color:var(--muted);font-size:11.5px}
.hall-cell.is-done{border-color:rgba(97,216,200,.5)}
.hall-cell.is-weak{border-color:rgba(240,190,90,.5)}
.hall-cell:disabled{opacity:.5;cursor:default}
.hall-levels{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:12px 0}
.hall-levels .fine-print{flex-basis:100%;margin:0}
.hall-progress{height:4px;border-radius:2px;background:var(--line-soft);overflow:hidden;margin:8px 0}
.hall-progress[hidden]{display:none}
.hall-progress span{display:block;height:100%;width:0;background:var(--accent,#61d8c8);transition:width .2s}
.hall-status{min-height:1.2em;margin:6px 0 0;font-size:13.5px}
.hall-status[data-tone=error]{color:#ffab9a}
.hall-status[data-tone=success]{color:#9fe3b9}
.hall-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:4px 0 14px}
.hall-fact{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:7px}
.hall-fact span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.hall-chart-box{border:1px solid var(--line-soft);border-radius:10px;padding:6px;background:rgba(9,24,30,.55)}
.hall-chart{display:block;width:100%;max-width:600px;margin:0 auto}
.hall-chart-grid{stroke:var(--line-soft);stroke-width:1}
.hall-chart-axis{fill:var(--muted);font:13px var(--sans)}
.hall-chart-band{fill:rgba(127,212,160,.18);stroke:rgba(127,212,160,.5)}
.hall-chart-target{stroke:#9fe3b9;stroke-width:1.5;stroke-dasharray:6 5}
.hall-chart-dot{fill:var(--accent,#61d8c8)}
.hall-chart-dot.is-before{fill:none;stroke:var(--muted);stroke-width:2}
.hall-chart-sd{stroke:var(--accent,#61d8c8);stroke-width:2}
.hall-chart-sd.is-before{stroke:var(--muted)}
.hall-legend{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0;font-size:12px;color:var(--muted)}
.hall-legend span::before{content:"";display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:-1px;border-radius:2px}
.hall-legend .hall-lg-band::before{background:rgba(127,212,160,.25);border:1px solid rgba(127,212,160,.5)}
.hall-legend .hall-lg-target::before{height:0;border-top:2px dashed #9fe3b9}
.hall-legend .hall-lg-after::before{width:10px;border-radius:50%;background:var(--accent,#61d8c8)}
.hall-legend .hall-lg-before::before{width:10px;border-radius:50%;border:2px solid var(--muted)}
.hall-verdict{margin:8px 0;font-size:14px}
.hall-table td.is-out{color:#ffab9a}
.hall-table td.is-in{color:#9fe3b9}
.hall-card h3{margin:18px 0 6px;font-size:16px}
/* Step Bericht for a hall: its report has fixed sections and no stereo series. */
body.hall-mode .report-sources,body.hall-mode .report-sections-head,body.hall-mode #report-sections,body.hall-mode #report-settings-reset{display:none!important}
.hall-report-btn{margin-top:14px}

/* Step B › Kanäle aus der Aufstellung, Mehrkanal (channel-setup-ui.mjs, 11.10.2026). */
.channel-setup[hidden]{display:none}
.channel-table-wrap{overflow-x:auto;margin:8px 0}
.channel-table{border-collapse:collapse;width:100%;font-size:13px}
.channel-table th,.channel-table td{padding:6px 8px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle}
.channel-table th{color:var(--muted);font-weight:600;font-size:12px}
.channel-table td{color:var(--text);font-weight:400}
/* Mehrkanal › Kanäle einmessen (mc-measure-ui.mjs) */
.mc-output-table td{white-space:nowrap}
.mc-output-table small{color:var(--muted);font-weight:400}
.mc-out{min-width:64px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit}
.mc-test{padding:6px 12px;min-height:0}
.mc-measure-card .seg{margin:12px 0 4px}
.mc-measure-card .is-warn{color:var(--champagne)}
.mc-measure-card .is-error{color:#ffab9a}
.mc-result-head{margin:18px 0 6px;font-size:15px}
.mc-hint-row td{padding-top:0;color:var(--muted);white-space:normal}
.mc-result-table tr.is-missing td{color:var(--muted)}
.mc-receiver{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0}
.mc-field{display:flex;flex-direction:column;gap:4px;min-width:140px}
.mc-field span{font-size:12px;color:var(--muted)}
.mc-measure-card .action-row{display:flex;flex-wrap:wrap;gap:10px}
.mc-sub-head{margin:14px 0 4px;font-weight:600;color:var(--text)}
.mc-sub-advice{margin:4px 0 8px;padding-left:18px;font-size:13px;line-height:1.5;color:var(--text)}
.mc-sub-chart{margin:8px 0 0;max-width:640px}
.mc-sub-svg{width:100%;max-width:640px;height:auto;display:block}
.mc-sub-svg .mc-grid{stroke:var(--line-soft);stroke-width:1}
.mc-sub-svg .mc-axis{fill:var(--muted);font:10px var(--mono)}
.mc-sub-svg .mc-xo{stroke:var(--champagne);stroke-width:1;stroke-dasharray:4 4}
.mc-sub-svg .mc-now{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4}
.mc-sub-svg .mc-after{fill:none;stroke:var(--accent);stroke-width:2}
.mc-sub-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12px;color:var(--muted);margin-top:4px}
.mc-sub-legend span{display:inline-block;width:22px;height:0;margin-right:-8px;vertical-align:middle}
.mc-sub-legend .is-now{border-top:2px dashed var(--muted)}
.mc-sub-legend .is-after{border-top:2px solid var(--accent)}
.mc-sub-legend .is-xo{border-top:1px dashed var(--champagne)}
.mc-sub-legend .is-target{border-top:2px dashed var(--champagne)}
.mc-sub-legend .is-limit{border-top:1px dotted #ffab9a}
.mc-sub-legend .is-spread{height:8px;background:rgba(150,170,175,.18)}
.mc-sub-svg .mc-target{fill:none;stroke:var(--champagne);stroke-width:1.2;stroke-dasharray:3 4}
.mc-sub-svg .mc-limit{fill:none;stroke:#ffab9a;stroke-width:1;stroke-dasharray:1 3}
.mc-sub-svg .mc-spread{fill:rgba(150,170,175,.18);stroke:none}
.mc-sub-svg .mc-range{fill:rgba(255,255,255,.03);stroke:none}
.mc-zone{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:10px 0}
.mc-zone-point{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;min-height:0;text-align:left}
.mc-zone-point small{font-size:11px;color:var(--muted);font-weight:400}
.mc-zone-point.is-done{border-color:var(--accent)}
.mc-eq-channel{border:1px solid var(--line-soft);border-radius:8px;padding:8px 12px;margin:8px 0}
.mc-eq-channel summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.mc-eq-meta{color:var(--muted);font-size:13px}
.mc-subs-grid th:first-child{white-space:nowrap}
.mc-subs-grid .mc-zone-point{width:100%}
.channel-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.channel-table tr.is-missing td{color:var(--muted)}

/* Kinosaal (cinema-ui.mjs, 11.10.2026): in cinema mode the stereo cards of Messen, Ergebnis and Prüfen, the Tonformat and the Winkel-Check step aside. */
body.cinema-mode [data-stage~="analysis"]:not(.cinema-card),body.cinema-mode [data-stage~="check"]:not(.cinema-card):not(#mic-level-card):not(#live-card),
body.cinema-mode #precheck-reverb,body.cinema-mode .sound-format,body.cinema-mode #layout-check,body.cinema-mode #channel-setup{display:none!important}
body.cinema-mode .report-sources,body.cinema-mode .report-sections-head,body.cinema-mode #report-sections,body.cinema-mode #report-settings-reset{display:none!important}
.cinema-card[hidden],.cinema-use[hidden],.cinema-check[hidden]{display:none!important}
/* Kanäle, Sitzplätze and Volumen in one row, the line under them (Jonas, 11.10.2026: „die sitzplätze und volumenabfrage bitte rechts von kanäle drop down machen“). */
.cinema-use{display:grid;grid-template-columns:auto auto auto;gap:5px 12px;align-items:end;justify-content:start}
.cinema-use>.choice-menu{min-width:104px}
/* The line under them takes no width of its own (width 0, then the row's): else it pulls the three apart (Jonas, 11.10.2026: „volumen angrenzend an sitzplätze machen“). */
.cinema-use .cinema-use-fact{grid-column:1/-1;width:0;min-width:100%}
.cinema-field{display:grid;gap:5px;font-size:12px;color:var(--muted)}
.cinema-field span{white-space:nowrap}
.cinema-use .cinema-field{width:8.5em}
.cinema-field input{width:100%;min-height:40px;box-sizing:border-box}
@media(min-width:1051px){body.cinema-mode .scan-head>div:first-child{grid-template-columns:minmax(0,190px) auto}}
@media(max-width:560px){.cinema-use{grid-template-columns:1fr 1fr}.cinema-use>.choice-menu{grid-column:1/-1}.cinema-use .cinema-field{width:auto}}
/* Kino-Check as the Winkel-Check (cinema-check-ui.mjs, 11.10.2026): each loudspeaker with its channel
   menu, the edge in the channel's colour; the rules that hold under a toggle drawn as a button. */
.cinema-ch-row{grid-template-columns:minmax(0,1fr) minmax(200px,270px);align-items:center;column-gap:10px;padding:4px 5px 4px 11px}
.cinema-ch-row .layout-row-title strong{overflow:hidden;text-overflow:ellipsis}
.cinema-channel-menu{grid-template-columns:minmax(0,1fr)}
.cinema-channel-menu .choice-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cinema-channel-menu .choice-current{min-height:34px;padding:3px 8px 3px 4px}
.cinema-channel-menu .choice-icon{width:26px;height:26px}
.cinema-ch-note{margin:8px 2px 0}
.cinema-held{margin-top:6px}
.cinema-held-toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:4px;font:600 12.5px var(--sans);color:var(--muted);cursor:pointer;list-style:none}
.cinema-held-toggle::-webkit-details-marker{display:none}
.cinema-held-toggle::after{content:"▾";font-size:11px;transition:transform .2s ease}
.cinema-held[open] .cinema-held-toggle::after{transform:rotate(180deg)}
.cinema-held-toggle:hover{border-color:var(--accent);color:var(--text)}
.cinema-held[open]>.layout-check-list{margin-top:6px}
@media (max-width:600px){.cinema-ch-row{grid-template-columns:minmax(0,1fr)}}
.cinema-plan-seg,.cinema-channel-seg{margin:6px 0 10px}
.cinema-channel-seg button.is-out{color:#ffab9a}
.cinema-channel-seg button.is-in{color:#9fe3b9}
.cinema-plan-screen{stroke:#f08cbf;stroke-width:6;stroke-linecap:round}
.cinema-chart-seats{fill:rgba(97,216,200,.14);stroke:none}
.cinema-chart-avg{fill:none;stroke:var(--accent,#61d8c8);stroke-width:2}
path.cinema-chart-line{fill:none}
.cinema-chart-out{fill:#ffab9a}
.cinema-speech{margin:10px 0}
.cinema-speech summary{cursor:pointer;font-size:13.5px;color:var(--muted)}
.cinema-held{margin:4px 0 10px}
.cinema-held summary{cursor:pointer;font-size:13px;color:var(--muted);margin-bottom:6px}
.hall-legend .cinema-lg-avg::before{height:0;border-top:2px solid var(--accent,#61d8c8)}
.hall-legend .cinema-lg-seats::before{background:rgba(97,216,200,.14)}

/* Auswahlfelder: der Pfeil mit Abstand zum Rand statt ganz außen (Jonas, 11.10.2026: „bei messung ist der pfeil nach unten zur auswahl des mikrofons zu weit rechts“). */
.field select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.5 6 6.3l4.8-4.8' fill='none' stroke='%23a9bfc3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}

/* Prüfschritt 1: Messton oder Rauschen right beside the title (precheck-ui.mjs;
   Jonas, 12.10.2026: „du könntest die auswahl Messton/rauschen recht sneben den titel setzen, dann kann auch beim kleiner werden die grafik nach oben rechts wandern.“), taking no more height than the
   title, so the button is as far below it as in step 2 (Jonas, 12.10.2026: „der
   abstand zwischen lautstärke und dem button ist größer als bei tonumofang.“);
   the corner drawing has the top right as in the other steps. On a phone it
   wraps under the title. */
.precheck-signal{margin:4px 0 0}
@media(min-width:561px){.precheck-signal{margin:-4px 0 -4px 12px}}

/* Machart, Oberfläche und Material in Schritt B als Dropdown statt Fenster (pick-menu.mjs, 11.10.2026). */
.pick-menu .choice-label{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted,#9db3b5)}
.pick-menu .choice-current{min-height:48px;padding:4px 10px 4px 4px;border-color:#3c5d66;background:#0b1f26;font:500 14px/1.25 var(--sans,inherit)}
.pick-menu .choice-current .choice-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-menu .choice-icon{display:grid;place-items:center}
.pick-menu .choice-current .choice-icon img{width:38px;height:38px;border-radius:4px}
.pick-menu .choice-option .choice-icon img{width:28px;height:28px;border-radius:3px}
.pick-menu .choice-pop{width:100%;max-width:none;max-height:min(420px,60vh);overflow:auto}
/* REW import inside "Projekt öffnen" (0.15.176). */
#rew-import-slot>details.rew-in-dialog{border:0;padding:0;margin:8px 0 0;background:transparent}
#rew-import-slot>details.rew-in-dialog>summary{display:none}
#rew-import-status[data-kind=error]{color:#ec795e}

/* File fields as tall as the selects next to them; WebKit (Mac/iOS app) drew
   the button larger (Stefan, 12.10.2026). */
.field input[type=file]{height:44px;min-height:44px;padding:6px 7px;line-height:30px;font-size:12px}
.field input[type=file]::file-selector-button{height:30px;padding:0 12px;margin:0 12px 0 0;font-size:12px;line-height:30px;vertical-align:middle}
.field input[type=file]::-webkit-file-upload-button{height:30px;padding:0 12px;margin:0 12px 0 0;font-size:12px;line-height:30px;vertical-align:middle}
.field>.field-head>label{display:contents}
.field>.field-head{height:14px}
.field>.field-head>.info-button{width:24px;height:24px;margin:-5px 0;font-size:12px}

/* Prüfschritt 1 is the signal path of main (precheck-ui.mjs volumeBody,
   Stefan 12.10.2026): the step's own needle, signal choice, button and
   corner drawing give way; the signal path spans the whole step. */
.precheck-signalpath .precheck-signal,.precheck-signalpath>.precheck-live,.precheck-signalpath>.action-row,.precheck-signalpath .precheck-badge{display:none!important}
.precheck-signalpath>.level-preflight.lp{grid-column:1/-1;margin:12px 0 4px}
.info-button[hidden]{display:none!important}

/* No serif anywhere (Stefan, 12.10.2026: „bitte keine Serifenschrift
   verwenden“): headlines, numbers and the i of the info buttons in
   IBM Plex Sans. */
:root{--display:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.info-button{font-family:var(--sans);font-style:normal;font-weight:600}
/* Step rail with the icons of main (Stefan, 12.10.2026: „bitte die Icons aus
   Main bei den Schritten verwenden“): the icon takes the place of the big
   number, under it number and name in one line; the tick sits on the icon
   as in main. */
.workflow-step .step-ico{display:grid;margin:0 auto}
.workflow-step.is-done::after{content:none}
.workflow-step .step-label{display:flex;justify-content:center;align-items:baseline;gap:.35em;margin-top:8px}
.workflow-step .workflow-number,.workflow-step.is-done .workflow-number,.workflow-step .step-label .workflow-number{display:inline;margin:0;font:500 14px/1.2 var(--sans);color:var(--champagne);font-variant-numeric:tabular-nums}
.workflow-step .step-label strong{display:inline;margin:0;font:500 15px/1.2 var(--sans)}
.workflow-step.is-active .workflow-number{color:var(--accent)}
@media(min-width:1200px){.workflow-step .step-label{flex-direction:column;align-items:center;gap:2px}.workflow-step .step-label strong{font-size:13px}}
@media(max-width:720px){.workflow-step .step-ico{width:34px;height:34px}.workflow-step .step-label .workflow-number{display:none}.workflow-step .step-label strong{font-size:12px}}
/* The signal path must not widen the steps on a phone (375 px). */
#precheck{grid-template-columns:minmax(0,1fr)}
.precheck-signalpath,.precheck-signalpath>.level-preflight.lp{min-width:0}
@media(max-width:560px){.precheck-signalpath>.level-preflight.lp{padding:14px 12px 12px}}
/* Phone: title and i in the first line, the signal choice below. */
@media(max-width:820px){.lp-head .info-button{order:2;margin-left:auto}.lp-head .lp-method{order:3}}
.advisor-room-plan{margin:12px 0}
/* Schritt C · Fachanalyse: overview of tiles (expert-overview.mjs, 13.10.2026). */
.xa-nav{display:flex;align-items:center;gap:12px;margin:0 0 10px}.xa-nav:empty{display:none}
.xa-title{margin:0;font-size:16px}
.xa-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:4px 0 14px}
.xa-tile{display:grid;gap:6px;padding:10px 10px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;font:inherit}
.xa-tile:hover,.xa-tile:focus-visible{border-color:var(--accent);outline:none}
.xa-tile-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.xa-tile-name{font:600 13px/1.2 var(--sans)}
.xa-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.xa-tile.is-good .xa-dot{background:#61d8c8}.xa-tile.is-note .xa-dot{background:#e8be54}.xa-tile.is-warn .xa-dot{background:#ff8f7a}
.xa-tile-pic{position:relative;display:block;aspect-ratio:240/110;border-radius:5px;overflow:hidden;background:#0b1d27}
.xa-tile-pic>canvas,.xa-tile-pic>svg{display:block;width:100%;height:100%}
.xa-tile.is-example .xa-tile-pic>svg{opacity:.45}
.xa-example{position:absolute;top:5px;right:6px;padding:1px 6px;border-radius:3px;background:rgba(11,29,39,.85);color:var(--muted);font:600 10px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.xa-tile-line{font-size:12px;line-height:1.35;color:var(--muted);min-height:16px}
.xa-findings{border:1px solid var(--line-soft);border-radius:8px;padding:8px 12px;margin:0 0 10px}
.xa-findings>summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.xa-count{padding:0 7px;border-radius:9px;background:var(--panel2);color:var(--muted);font:600 11px/1.6 var(--sans)}
.xa-more{font-size:13px;color:var(--muted)}
#time-card.xa-single .analysis-tabs{display:none}
/* Two tiles side by side on a phone. */
@media(max-width:560px){.xa-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.xa-tile{padding:8px}.xa-tile-line{font-size:11.5px}}
/* Treatment plan items: their grid column grew to its widest child (520 px at 375 px, 13.10.2026). */
.treatment-plan-card .tp-item{grid-template-columns:minmax(0,1fr)}
.treatment-plan-card .tp-item>*{min-width:0;max-width:100%}
/* Schritt C · Befunde kompakt (13.10.2026). */
.xa-finds{margin:4px 0 12px}
.xa-finds-head{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:15px}
.xa-find-list{display:grid;gap:6px}.xa-find-list[hidden]{display:none}
.xa-find{border:1px solid var(--line-soft);border-radius:8px;background:var(--panel)}
.xa-find-main{display:grid;grid-template-columns:10px minmax(0,1fr) 14px;gap:10px;align-items:center;width:100%;padding:9px 12px;border:0;background:none;color:var(--text);text-align:left;font:inherit;cursor:pointer}
.xa-find-text{display:grid;gap:2px;min-width:0}.xa-find-text strong{font:600 13.5px/1.3 var(--sans)}.xa-find-text small{font-size:12px;line-height:1.4;color:var(--muted)}
.xa-find.is-warn .xa-dot{background:#ff8f7a}.xa-find.is-note .xa-dot{background:#e8be54}.xa-find.is-ok .xa-dot,.xa-find.is-good .xa-dot{background:#61d8c8}
.xa-find-chev{color:var(--muted);transition:transform .15s}.xa-find.is-open .xa-find-chev{transform:rotate(90deg)}
.xa-find-more{padding:0 12px 12px 32px;display:grid;gap:8px}.xa-find-more[hidden]{display:none}.xa-find-more .button{justify-self:start}
.xa-find-all{margin-top:8px;font-size:13px}
/* Impressum und Datenschutz in the app (legal-ui.mjs, 14.10.2026). */
.legal-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel,#10262d);color:var(--text)}
.legal-dialog::backdrop{background:rgba(4,14,18,.6)}
.legal-dialog-bar{position:sticky;top:0;display:flex;justify-content:flex-end;padding:10px 12px;background:inherit;border-bottom:1px solid var(--line-soft)}
.legal-dialog-body{padding:8px 22px 26px;overflow:auto;max-height:calc(100dvh - 110px);outline:none}
.legal-dialog-body .eyebrow{margin-top:14px}.legal-dialog-body h1{font-size:28px;margin:4px 0 12px}
.legal-dialog-body h2{font-size:16px;margin:22px 0 6px}.legal-dialog-body p{line-height:1.6}
.legal-dialog-body .muted{color:var(--muted)}.legal-dialog-body .other{margin-top:24px;padding-top:12px;border-top:1px solid var(--line-soft)}
/* Hörprofil in the presets card (presets-ui.mjs, 19.10.2026). */
.hearing-box{border:1px solid var(--line-soft);border-radius:8px;padding:8px 12px;margin:4px 0 14px}
.hearing-box>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;font-weight:600}
.hearing-state{font:500 12px/1.4 var(--sans);color:var(--muted)}
.hearing-box>summary .info-button{margin-left:auto}
.hearing-options>.field:last-child:nth-child(odd){grid-column:1/-1}
.zone-settings{border:1px solid var(--line-soft);border-radius:8px;padding:8px 12px;margin:4px 0 14px}
.zone-settings>summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;cursor:pointer;font-weight:600}
.zone-settings-state{font:500 12px/1.4 var(--sans);color:var(--muted)}
.zone-settings>.form-grid{margin:10px 0 4px}
.hearing-body{display:grid;gap:10px;margin-top:10px}
.hearing-table{border-collapse:collapse;min-width:520px}
.hearing-table th{font:600 11.5px/1.3 var(--sans);color:var(--muted);text-align:left;padding:4px 6px;white-space:nowrap}
.hearing-table td{padding:3px 4px}.hearing-table input{width:64px;text-align:right}
.hearing-result{display:grid;gap:6px}.hearing-bands{margin:0;font:500 13px/1.4 var(--mono,monospace)}

/* Graphical dropdowns on a phone or tablet (Jonas, 19.10.2026: „sie sollen
   nicht scrollbar sein, sondern wenn man auf ihnen wischt, wischt man die
   gesamte seite“): no list scrolls in itself, it is as long as its choices
   and the page (or the window it is in) scrolls with it; the choice menus
   stay on the screen (choice-menu.mjs fit), the brands open in the window. */
@media(max-width:1050px),(pointer:coarse){
  .choice-pop,.pick-menu .choice-pop{max-height:none;overflow:visible}
  .brand-list,.room-new-dialog .brand-list{max-height:none;overflow:visible}
}