@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
:root{
  --bg:#eef1f0; --panel:#f8faf9; --ink:#1c2523; --muted:#566260; --line:#c8d0cd;
  --oak:#b7803f; --oak-soft:#e8d3b4; --stone:#d9d6cc; --device:#a9b6b6; --wall:#3a4543;
  --ok:#1f7a4d; --ok-bg:#d9efe2; --mid:#8a6100; --mid-bg:#f6e8c4; --est:#9b3f2c; --est-bg:#f6ddd5;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#151b1a; --panel:#1e2625; --ink:#e7ecea; --muted:#a2aeab; --line:#3a4644;
  --oak:#d39b58; --oak-soft:#5b4426; --stone:#4d4c46; --device:#55625f; --wall:#a9b5b2;
  --ok:#6fd3a0; --ok-bg:#1c3d2d; --mid:#e7c56c; --mid-bg:#453610; --est:#f0a48f; --est-bg:#4c2419;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151b1a; --panel:#1e2625; --ink:#e7ecea; --muted:#a2aeab; --line:#3a4644;
  --oak:#d39b58; --oak-soft:#5b4426; --stone:#4d4c46; --device:#55625f; --wall:#a9b5b2;
  --ok:#6fd3a0; --ok-bg:#1c3d2d; --mid:#e7c56c; --mid-bg:#453610; --est:#f0a48f; --est-bg:#4c2419;
  color-scheme:dark}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body)}
.wrap{max-width:980px;margin:0 auto;padding-block:28px 56px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid;gap:40px}
.wrap>*{min-width:0}
h1,h2{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:2.6rem}
h2{font-size:1.75rem}
h3{font:600 1rem/1.3 var(--body);margin:0}
p{margin:0;max-width:68ch}
a{color:inherit;text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--oak);outline-offset:2px}
header,section{display:grid;gap:14px}
section>*,header>*{min-width:0}
.lead{color:var(--muted)}
.notice{background:var(--mid-bg);color:var(--ink);padding:12px 14px;border-radius:4px}
.totals{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.totals div{padding:14px 16px;border-left:1px solid var(--line);min-width:0}
.totals div:first-child{border-left:0}
.totals span{display:block;color:var(--muted);font-size:.9rem}
.totals b{font:600 1.9rem/1.2 var(--display);font-variant-numeric:tabular-nums}
.totals .main b{color:var(--oak)}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:10px;overflow-x:auto}
.plan svg{display:block;width:100%;min-width:560px;height:auto}
svg text{font-family:var(--mono);fill:var(--ink)}
.c-oak{fill:var(--oak-soft);stroke:var(--oak);stroke-width:.6}
.c-dev{fill:var(--device);stroke:var(--wall);stroke-width:.6}
.c-top{fill:var(--stone);stroke:var(--muted);stroke-width:.5}
.c-dead{fill:url(#hatch);stroke:var(--muted);stroke-width:.4}
.c-wall{fill:var(--wall)}
.c-hob{fill:var(--ink)}
.dim{stroke:var(--muted);stroke-width:.4;fill:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:.9rem}
.legend i{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border:1px solid var(--muted)}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{font-weight:600;text-align:left;color:var(--muted);font-size:.85rem;border-bottom:1px solid var(--muted);padding:6px 8px;white-space:nowrap}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right;font-family:var(--mono);font-size:.88rem;white-space:nowrap;font-variant-numeric:tabular-nums}
td small{display:block;color:var(--muted);font-size:.85rem}
tr.group td{font-family:var(--display);font-weight:600;font-size:1.2rem;padding-top:20px;border-bottom:1px solid var(--muted)}
tr.sum td{font-weight:600;background:var(--panel)}
.cost-table{min-width:680px}
.pill{display:inline-block;padding:1px 7px;border-radius:3px;font-size:.78rem;font-weight:600;white-space:nowrap}
.p-ok{color:var(--ok);background:var(--ok-bg)}
.p-mid{color:var(--mid);background:var(--mid-bg)}
.p-est{color:var(--est);background:var(--est-bg)}
ul.open{margin:0;padding-left:20px;display:grid;gap:8px;max-width:72ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.two>*{min-width:0}
@media (max-width:720px){
  h1{font-size:2.1rem}
  .totals{grid-template-columns:1fr 1fr}
  .totals div:nth-child(odd){border-left:0}
  .totals div:nth-child(n+3){border-top:1px solid var(--line)}
  .two{grid-template-columns:1fr}
}
/* 3D-Ansicht */
.stage{display:grid;gap:10px}
.stage>*{min-width:0}
#scene{position:relative;width:100%;height:min(66vh,620px);min-height:340px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel)}
#scene canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
#scene canvas:active{cursor:grabbing}
#scene-fallback{padding:18px}
.bar{display:flex;flex-wrap:wrap;gap:6px}
.bar button{font:500 .92rem/1 var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:9px 12px;cursor:pointer}
.bar button:hover{border-color:var(--oak)}
.bar button:focus-visible{outline:2px solid var(--oak);outline-offset:2px}
.bar button[aria-pressed="true"]{background:var(--oak-soft);border-color:var(--oak)}
.bar .sep{flex-basis:100%;height:0}
footer{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding-top:14px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.goal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.goal figure{margin:0}
.goal img{display:block;width:100%;height:auto;border-radius:6px}
.goal figcaption{margin-top:6px;font-size:.9em;color:var(--muted)}
.goal h3{margin-top:0}
@media (max-width:720px){.goal{grid-template-columns:minmax(0,1fr)}}