/* ===== TOOLBOX — RAUMPROGRAMM · Stil =====
   Dieselbe Familie wie SHEETFIT (Glass-Karten mit Hairline, Segment-Auswahl,
   Abschnitte nach Datenfluss nummeriert 01 Masterliste → 02 Planung → 03
   Abgleich). Schriften nach docs/01_DESIGN-SYSTEM.md §2.0: Clash Display nur
   fuer Titel, sonst Helvetica, keine Mono, Ziffern tabular-nums.

   AKZENT Stahlblau #7F9BB3 — die Farbe der TOOLS-Kachel auf der Startseite
   (Werkzeuge fuer die Arbeit: gedeckt, technisch, kein Signalton). Gemessen
   (WCAG 2.1): auf #050507 6,9:1, Schwarz darauf 6,7:1. Hell: wie SHEETFIT
   nur als Flaeche mit schwarzer Schrift oder schwarzer Kante.

   Status-Farben (ok/warn/err) sind semantisch und zaehlen nicht als Akzent.
   LIGHT + DARK ueber localStorage 'tb_theme' (theme-init.js), Light-Block
   zweimal (Medienabfrage + Attribut). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:dark;
  --bg:#050507;
  --surface:rgba(255,255,255,0.045);
  --surface-2:rgba(255,255,255,0.07);
  --field:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.10);
  --border-h:rgba(127,155,179,0.6);
  --hair:rgba(255,255,255,0.07);
  --accent-text:#7F9BB3;
  --accent-fill:#7F9BB3;
  --on-accent:#0A0A0A;
  --accent-tonal:rgba(127,155,179,0.16);
  --accent-edge:rgba(127,155,179,0.6);
  --ok:#30D158;--ok-t:rgba(48,209,88,0.14);
  --warn:#FBBF24;--warn-t:rgba(251,191,36,0.13);
  --high:#FF9F0A;
  --err:#FF6B6B;--err-t:rgba(255,107,107,0.14);
  --text:#F0F0F2;--text-2:rgba(240,240,242,0.72);--text-3:rgba(240,240,242,0.58);
  --stage:#FFFFFF;
  --shadow:0 8px 32px rgba(0,0,0,.45);
  --clash:'Clash Display','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --radius:14px;--radius-s:9px;--tap:40px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#E4E4E0;--surface:#EDEDE9;--surface-2:#F2F2EE;--field:#F2F2EE;
    --border:rgba(10,10,10,0.14);--border-h:#0A0A0A;--hair:rgba(10,10,10,0.09);
    --accent-text:#0A0A0A;--accent-tonal:#7F9BB3;--accent-edge:#0A0A0A;
    --ok:#0F6B3A;--ok-t:rgba(15,107,58,0.12);--warn:#7A5600;--warn-t:rgba(122,86,0,0.12);--high:#8A4B00;--err:#B42318;--err-t:rgba(180,35,24,0.10);
    --text:#0A0A0A;--text-2:rgba(10,10,10,0.74);--text-3:rgba(10,10,10,0.62);
    --shadow:0 10px 30px rgba(10,10,10,.10);
  }
}
:root[data-theme="light"]{
    color-scheme:light;
    --bg:#E4E4E0;--surface:#EDEDE9;--surface-2:#F2F2EE;--field:#F2F2EE;
    --border:rgba(10,10,10,0.14);--border-h:#0A0A0A;--hair:rgba(10,10,10,0.09);
    --accent-text:#0A0A0A;--accent-tonal:#7F9BB3;--accent-edge:#0A0A0A;
    --ok:#0F6B3A;--ok-t:rgba(15,107,58,0.12);--warn:#7A5600;--warn-t:rgba(122,86,0,0.12);--high:#8A4B00;--err:#B42318;--err-t:rgba(180,35,24,0.10);
    --text:#0A0A0A;--text-2:rgba(10,10,10,0.74);--text-3:rgba(10,10,10,0.62);
    --shadow:0 10px 30px rgba(10,10,10,.10);
}
html{font-size:16px;-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.5;min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--accent-edge)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent-edge);outline-offset:2px}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}

.skip-link{position:absolute;left:-9999px;top:8px;z-index:999;background:var(--accent-fill);color:var(--on-accent);
  padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;text-decoration:none}
.skip-link:focus{left:16px}
.wrap{max-width:1180px;margin:0 auto;padding:16px 20px 40px}

/* ── Kopf ── */
.hdr{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.hdr-back{background:var(--surface);border:1px solid var(--border);border-radius:50%;color:var(--text-2);
  width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:18px;transition:border-color .2s,color .2s;flex-shrink:0;text-decoration:none}
.hdr-back:hover{border-color:var(--border-h);color:var(--text)}
.hdr-titles{flex:1;min-width:0}
.hdr-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.hdr-title{font-family:var(--clash);font-size:26px;font-weight:600;letter-spacing:.02em;line-height:1.15}
.hdr-sub{font-size:12px;color:var(--text-3);margin-top:2px}
.hdr-right{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}

/* ── Segmente / Pillen ── */
.seg{display:flex;gap:4px;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:999px}
.seg-btn{background:none;border:1px solid transparent;border-radius:999px;color:var(--text-2);
  font-size:11px;font-weight:600;letter-spacing:.06em;min-height:calc(var(--tap) - 8px);padding:0 14px;cursor:pointer;
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
.seg-btn:hover{color:var(--text)}
.seg-btn.active,.seg-btn[aria-checked="true"]{background:var(--accent-tonal);color:var(--accent-text);border-color:var(--accent-edge)}
.seg-small .seg-btn{min-height:30px;padding:0 12px}
.lang-btn{min-width:36px;padding:0 10px}
.pill-btn{cursor:pointer;background:none;border:1px solid var(--border);border-radius:999px;padding:0 12px;min-height:32px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);transition:border-color .15s,color .15s}
.pill-btn:hover{border-color:var(--border-h);color:var(--text)}
.pill-danger{color:var(--err);border-color:var(--err-t)}
.pill-danger:hover{border-color:var(--err)}

/* ── Einleitung / Leiste ── */
.intro{font-size:14px;color:var(--text-2);max-width:72ch;margin-bottom:12px}
.topbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:16px}
.privacy{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);
  border:1px solid var(--ok-t);border-radius:999px;padding:6px 12px;margin-right:auto}
.privacy::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* ── Karten / Abschnitte ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sec{padding:18px 20px 20px;margin-bottom:14px}
.sec-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}
.sec-head>div:not(.seg){flex:1;min-width:200px}
.sec-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;letter-spacing:.04em;background:var(--accent-tonal);color:var(--accent-text);border:1px solid var(--accent-edge)}
.sec-title{font-family:var(--clash);font-size:19px;font-weight:600;line-height:1.25;letter-spacing:.01em}
.sec-sub{font-size:13px;color:var(--text-2);margin-top:2px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.hint{font-size:12px;color:var(--text-3)}

/* ── Dateien ── */
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px dashed var(--border);border-radius:var(--radius);padding:22px 18px;text-align:center;
  background:var(--field);cursor:pointer;transition:border-color .15s,background .15s}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop:hover,.drop.over,.drop:focus-within{border-color:var(--accent-edge);background:var(--accent-tonal);color:var(--accent-text)}
.drop-title{font-family:var(--clash);font-size:18px;font-weight:600}
.drop-hint{font-size:11px;color:var(--text-3)}
.drop.over .drop-hint{color:inherit}
.slot{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.slot:empty{display:none}
.file-line{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:12px;color:var(--text-3)}
.file-line .fname{color:var(--text);font-weight:700;overflow-wrap:anywhere}
.floor-tag{font-weight:700;color:var(--accent-text);border:1px solid var(--accent-edge);border-radius:999px;padding:2px 10px}
.msg{font-size:12.5px;padding:8px 12px;border-radius:var(--radius-s);border:1px solid var(--border);background:var(--field);color:var(--text-2);line-height:1.5}
.msg.err{color:var(--err);border-color:var(--err-t)}
.msg.warn{color:var(--warn);border-color:var(--warn-t)}
details.map-d>summary,details.settings>summary,details.vf>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:32px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
details>summary::-webkit-details-marker{display:none}
details.map-d>summary::before,details.settings>summary::before,details.vf>summary::before{content:'+';color:var(--accent-text);font-weight:700}
details[open]>summary::before{content:'–'}
details.settings{margin-top:14px;border-top:1px solid var(--hair);padding-top:8px}
.map-row,.rules{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;margin-top:10px}
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3)}
.field.wide{flex:1 1 100%}
.field.check{flex-direction:row;align-items:center;gap:8px;min-height:38px;cursor:pointer}
.field.check input{width:16px;height:16px;accent-color:var(--accent-fill)}
.inp{background:var(--field);border:1px solid var(--border);border-radius:var(--radius-s);padding:8px 10px;font-size:13px;min-height:38px;max-width:100%;color:var(--text)}
.inp:focus{outline:none;border-color:var(--accent-edge);box-shadow:0 0 0 3px var(--accent-tonal)}
.inp.num{width:90px}

/* ── Plan ── */
.plan-card{margin-bottom:14px;overflow:hidden}
.plan-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--hair)}
.plan-bar .g{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.plan-stage{position:relative;overflow:auto;max-height:76vh;background:var(--stage)}
.plan-inner{position:relative;transform-origin:0 0}
.plan-inner canvas{display:block}
.plan-inner svg{position:absolute;inset:0}
.mk{fill-opacity:.14;stroke-width:2.2;vector-effect:non-scaling-stroke;cursor:pointer}
.mk.sel{fill-opacity:.32;stroke-width:4}
.mk-crit{fill:#FF453A;stroke:#E0261B}.mk-high{fill:#FF9F0A;stroke:#D97A00}.mk-mid{fill:#FFD60A;stroke:#C9A600}.mk-ok{fill:#30D158;stroke:#1E9E45}.mk-none{fill:#8a8a94;stroke:#6a6a74}
.plan-empty{padding:36px 20px;text-align:center;color:var(--text-3);font-size:13px}
.plan-empty strong{display:block;font-family:var(--clash);font-size:18px;color:var(--text);margin-bottom:4px}

/* ── Abgleich ── */
.empty{padding:28px 16px;text-align:center;color:var(--text-3);font-size:13px}
.empty strong{display:block;font-family:var(--clash);font-size:18px;color:var(--text);margin-bottom:4px}
.verdict{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.verdict-text{flex:1 1 320px;min-width:0}
.verdict-big{font-family:var(--clash);font-size:22px;font-weight:600;line-height:1.15;text-wrap:balance}
.c-bad{color:var(--err)}.c-ok{color:var(--ok)}
.verdict-sub{font-size:13px;color:var(--text-2);margin-top:4px}
.floor-line{color:var(--accent-text);font-weight:700}
.verdict-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);cursor:pointer;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:0 18px;border-radius:999px;
  background:var(--surface-2);color:var(--text);border:1px solid var(--border);transition:border-color .15s,transform .1s}
.btn:hover{border-color:var(--border-h)}
.btn:active{transform:translateY(1px)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.chip{all:unset;cursor:pointer;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text-2)}
.chip b{font-weight:800;color:var(--text)}
.chip:hover{border-color:var(--border-h);color:var(--text)}
.chip:focus-visible{outline:2px solid var(--accent-edge);outline-offset:2px}
.chip[aria-pressed="true"]{background:var(--accent-tonal);color:var(--accent-text);border-color:var(--accent-edge)}
.chip[aria-pressed="true"] b{color:inherit}
.chip-ok{color:var(--ok)}
.list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 0 8px}
.list-title{font-family:var(--clash);font-size:17px;font-weight:600}
.list-sub{font-size:12px;color:var(--text-3)}
.prog{font-size:12px;font-weight:700;color:var(--ok);white-space:nowrap}
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--radius-s)}
table.res-t{width:100%;border-collapse:collapse;min-width:980px;font-size:13px}
table.res-t th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)}
table.res-t th.num,table.res-t td.num{text-align:right}
table.res-t td{padding:9px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
table.res-t tr:last-child td{border-bottom:0}
table.res-t tbody tr:hover{background:var(--surface-2)}
table.res-t tbody tr.sel{background:var(--accent-tonal)}
table.res-t tbody tr.has-loc{cursor:pointer}
table.res-t tbody tr.done td:not(.chk){opacity:.4}
td.num{white-space:nowrap}
td.nr,td.master-c .nr,td.plan-c .nr{font-weight:700;white-space:nowrap}
td.master-c .nr,td.plan-c .nr{display:block}
td.master-c .sub,td.plan-c .sub{display:block;font-size:12px;color:var(--text-2);margin-top:1px}
td.plan-c .wrong{color:var(--err);text-decoration:line-through;text-decoration-thickness:1px}
td.plan-c .muted{color:var(--text-3);font-size:12px}
td.edits{min-width:260px}
td.area-c{font-size:12.5px;color:var(--text-2);max-width:34ch}
.pos{color:var(--high)}.neg{color:var(--err)}
.ok-mark{color:var(--ok);font-weight:700;font-size:12.5px}
.acts{list-style:none;display:flex;flex-direction:column;gap:3px;max-width:48ch}
.acts li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.4;color:var(--text-2)}
.acts li::before{content:'→';position:absolute;left:0;color:var(--accent-text);font-weight:700}
.acts li.ek-nr,.acts li.ek-name{color:var(--text);font-weight:700}
.acts li.ek-nr::before{content:'#'}
.acts li.ek-name::before{content:'A';font-size:10px}
.acts li.ek-add{color:var(--err);font-weight:700}
.acts li.ek-extra{color:var(--high);font-weight:600}
td.chk{text-align:center;width:64px}
td.chk input{width:20px;height:20px;accent-color:var(--ok);cursor:pointer}
.empty-row td{text-align:center;color:var(--text-3);padding:24px}
/* ── 04 Flaechenvergleich: Kennzahlen, Verteilung, Balken um die Nulllinie ── */
.area-filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:4px}
.area-filters .area-q{flex:1 1 260px;min-width:0}
.area-filters select.inp{flex:0 1 180px}
.area-filters .field.check.small{font-size:12px;white-space:nowrap}
.area-count{font-size:12px;color:var(--text-3);margin:2px 0 10px}
.area-count.is-filtered{color:var(--accent-text);font-weight:700}
.area-selbar{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
table.area-t tbody tr.excl td:not(.chk){opacity:.35}
table.area-t th.chk{text-align:center;width:64px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--field);border:1px solid var(--hair);border-radius:var(--radius-s);padding:12px 14px;min-width:0}
.kpi-l{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.kpi-v{display:block;font-family:var(--clash);font-size:22px;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-line{font-size:13px;color:var(--text-2);line-height:1.5;margin-bottom:10px}
.dist{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:12px;color:var(--text-2);margin-bottom:12px}
.dist-t{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.dist-i b{font-weight:800;color:var(--text)}
.dist-ok b{color:var(--ok)}.dist-mid b{color:var(--warn)}.dist-bad b{color:var(--err)}.dist-high b{color:var(--high)}
table.area-t{min-width:760px}
td.bar-c{width:180px;min-width:140px;vertical-align:middle}
.bar{position:relative;display:block;height:10px;border-radius:2px;background:var(--field)}
.bar::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--border)}
.bar i{position:absolute;top:0;bottom:0;width:0;border-radius:2px}
.bar i.bar-neg{right:50%;background:var(--err)}
.bar i.bar-pos{left:50%;background:var(--high)}
td.rating{font-size:12px;font-weight:700;white-space:nowrap}
.rating-ok{color:var(--ok)}.rating-mid{color:var(--warn)}.rating-bad{color:var(--err)}.rating-high{color:var(--high)}.rating-none{color:var(--text-3)}
details.vf{margin-top:14px}
.vf-list{margin-top:8px;font-size:12px;color:var(--text-3);line-height:1.7}

/* ── Fuss, Toast, Lizenzen ── */
.ftr{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:14px;margin-top:20px;font-size:11px;color:var(--text-3)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:9px 16px;border-radius:999px;
  font-size:12px;font-weight:700;z-index:300;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.lic h2{font-family:var(--clash);font-size:18px;font-weight:600;margin:22px 0 6px}
.lic pre{white-space:pre-wrap;font:12px/1.5 var(--body);color:var(--text-2);background:var(--field);border:1px solid var(--border);border-radius:var(--radius-s);padding:12px;max-height:280px;overflow:auto}
.lic p{font-size:13px;color:var(--text-2)}

@media (max-width:520px){
  .wrap{padding:12px 16px 32px}
  .hdr-right{width:100%;justify-content:space-between}
  .sec{padding:16px 14px 16px}
  .sec-head{gap:10px}
  .sec-num{width:34px;height:34px;font-size:12px}
  .drop{padding:18px 12px}
  .verdict-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}