/* Layout: fixed rail (Bereich + Rubriken) beside one working column; detail views replace the list, edits open in a sheet. */
:root{
  --bg:#f1f3f6; --surface:#ffffff; --surface-2:#e8ecf1; --line:#d3d9e1; --line-2:#bcc5d0;
  --fg:#121820; --muted:#566170; --accent:#1d5ca6; --accent-ink:#ffffff; --accent-soft:#dfe9f6;
  --space:#1d5ca6; --space-soft:#dfe9f6;
  --tally:#c43420; --tally-soft:#fbe4df; --ok:#2a7444; --ok-soft:#dcefe2; --warn:#9a6200; --warn-soft:#f6ead2;
  --tag-bg:#fbf9ef; --tag-fg:#121820; --tag-line:#cfc8a8;
  --shadow:0 1px 2px rgba(18,24,32,.06),0 8px 24px rgba(18,24,32,.08);
  --f-display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1217; --surface:#151a21; --surface-2:#1c232c; --line:#29323d; --line-2:#3a4552;
  --fg:#e5eaf0; --muted:#94a1b1; --accent:#5f9de4; --accent-ink:#0a1220; --accent-soft:#1a2b40;
  --space:#5f9de4; --space-soft:#1a2b40;
  --tally:#ff6a52; --tally-soft:#3a1d18; --ok:#5fc287; --ok-soft:#173023; --warn:#e3a93e; --warn-soft:#352812;
  --tag-bg:#e9e5d3; --tag-fg:#121820; --tag-line:#b9b293;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0e1217; --surface:#151a21; --surface-2:#1c232c; --line:#29323d; --line-2:#3a4552;
  --fg:#e5eaf0; --muted:#94a1b1; --accent:#5f9de4; --accent-ink:#0a1220; --accent-soft:#1a2b40;
  --space:#5f9de4; --space-soft:#1a2b40;
  --tally:#ff6a52; --tally-soft:#3a1d18; --ok:#5fc287; --ok-soft:#173023; --warn:#e3a93e; --warn-soft:#352812;
  --tag-bg:#e9e5d3; --tag-fg:#121820; --tag-line:#b9b293;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
body[data-space="ohd"]{--space:#b4530f; --space-soft:#f7e6d6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body[data-space="ohd"]{--space:#f0904a; --space-soft:#3a2516}}
:root[data-theme="dark"] body[data-space="ohd"]{--space:#f0904a; --space-soft:#3a2516}

*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.5}
body.noscroll{overflow:hidden}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:.005em;text-wrap:balance;margin:0}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:.88em}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

.app{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:20px;padding:20px 14px}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.brand b{display:block;font-family:var(--f-display);font-size:19px;font-weight:700;line-height:1.1}
.brand small{display:block;color:var(--muted);font-size:13px}
.tally{width:12px;height:12px;border-radius:50%;background:var(--tally);box-shadow:0 0 0 3px var(--tally-soft);flex:none}
.spaces{display:grid;gap:6px}
.space-btn{display:flex;align-items:flex-start;gap:10px;text-align:left;background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer}
.space-btn:hover{background:var(--surface-2)}
.space-btn .dot{width:10px;height:10px;border-radius:2px;margin-top:6px;flex:none}
.space-btn b{display:block;font-weight:600;line-height:1.25}
.space-btn small{display:block;color:var(--muted);font-size:13px;line-height:1.3}
.space-btn[aria-pressed="true"]{border-color:var(--space);background:var(--space-soft)}
.nav-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 8px;margin:0 0 4px}
.nav{display:grid;gap:1px}
.nav button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:5px;padding:7px 10px;cursor:pointer;color:var(--fg)}
.nav button:hover{background:var(--surface-2)}
.nav button[aria-current="page"]{background:var(--space-soft);color:var(--fg);font-weight:600}
.nav .count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.rail-foot{margin-top:auto;display:grid;gap:10px}
.role{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:8px 10px;border-top:1px solid var(--line)}
.role b{color:var(--fg)}

.main{min-width:0;padding-inline:32px;padding-block:0 64px}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;align-items:center;gap:12px;padding-block:14px;border-bottom:1px solid var(--line);margin-bottom:28px}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs b{color:var(--fg);font-weight:600}
.crumbs .sp{color:var(--space);font-weight:600}
.search{position:relative;display:block;width:min(320px,45vw)}
.search input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:7px 10px 7px 32px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}
.topbar .menu-btn{display:none}
[hidden]{display:none!important}
.wrap{max-width:1040px}

.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
.page-head>div:first-child{min-width:0;max-width:680px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--space);margin:0 0 4px}
.page-head h1{font-size:clamp(28px,4vw,38px);line-height:1.05}
.lead{color:var(--muted);margin:6px 0 0}
.head-actions{display:flex;flex-wrap:wrap;gap:8px}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r);padding:7px 12px;cursor:pointer;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;color:var(--fg)}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent);filter:brightness(1.08)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-danger{color:var(--tally);border-color:var(--tally)}
.btn-danger.solid{background:var(--tally);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btn svg{width:15px;height:15px}
.linkish{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-weight:600}

.notice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px 14px;font-size:15px}
.notice .k{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--warn-soft);color:var(--warn);flex:none;margin-top:1px}
.notice.info .k{background:var(--accent-soft);color:var(--accent)}
.notice p{margin:0}
.stack{display:grid;gap:12px}
.section{margin-top:34px}
.section h2{font-size:22px;margin-bottom:12px}

.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.sec-card{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;cursor:pointer}
.sec-card:hover{border-color:var(--space)}
.sec-card .n{font-family:var(--f-display);font-size:30px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.sec-card .t{font-weight:600}
.sec-card .d{font-size:13px;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 16px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 11px;font-size:14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.03em;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.bad{background:var(--tally-soft);color:var(--tally)}
.pill.sp{background:var(--space-soft);color:var(--space)}
.tag{display:inline-block;font-family:var(--f-mono);font-size:13px;font-weight:500;background:var(--tag-bg);color:var(--tag-fg);border:1px solid var(--tag-line);border-radius:2px;padding:1px 7px;white-space:nowrap;letter-spacing:.02em}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr[data-act]{cursor:pointer}
.tbl tbody tr[data-act]:hover td{background:var(--surface-2)}
.tbl .sub{display:block;font-size:13px;color:var(--muted)}
.tbl td.nowrap{white-space:nowrap}

.list{display:grid;gap:8px}
.row-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px 14px;cursor:pointer;width:100%}
.row-card:hover{border-color:var(--space)}
.row-card b{font-weight:600}
.row-card .sub{grid-column:1/-1;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-title{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}

.progress{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--ok)}

.empty-state{border:1px dashed var(--line-2);border-radius:var(--r);padding:28px;background:var(--surface);max-width:680px}
.empty-state h2,.empty-state h1{font-size:22px;margin-bottom:6px}
.empty-state p{margin:0 0 14px;color:var(--muted)}
.empty-state p:last-child{margin-bottom:0}
.loading{color:var(--muted);padding:24px 0}

.back{margin-bottom:14px}
.detail-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:18px}
.detail-head h1{font-size:clamp(26px,3.6vw,34px);line-height:1.08}
.meta{font-size:14px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--tally);background:var(--tally-soft);border-radius:var(--r);padding:8px 12px;margin-bottom:22px}
.panel{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:4px 18px}
dl.fields{display:grid;grid-template-columns:190px minmax(0,1fr);margin:0}
dl.fields dt,dl.fields dd{padding:10px 0;border-bottom:1px solid var(--line);margin:0}
dl.fields dt{color:var(--muted);font-size:14px;padding-right:12px}
dl.fields dd{min-width:0;overflow-wrap:anywhere}
dl.fields dt:nth-last-of-type(1),dl.fields dd:last-of-type{border-bottom:0}
.pre{white-space:pre-wrap}
.copyable{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.copy{border:1px solid var(--line);background:var(--surface-2);border-radius:4px;font-size:12px;padding:1px 7px;cursor:pointer;color:var(--muted)}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gallery button{padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

.patch{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,140px) minmax(0,1fr);align-items:center;gap:0;margin-bottom:18px}
.patch .end{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px 14px;min-width:0}
.patch .end small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.patch .end b{display:block;font-size:17px;overflow-wrap:anywhere}
.patch .end span{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.patch .wire{position:relative;height:30px;display:flex;align-items:center;justify-content:center}
.patch .wire::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px solid var(--wc,var(--space))}
.patch .end .end-name{display:block;font-size:17px;font-weight:700;text-align:left;overflow-wrap:anywhere}
.patch .wire .tag{position:relative}

.md{max-width:72ch;font-size:16.5px;line-height:1.6}
.md h1,.md h2{font-size:24px;margin:26px 0 8px}
.md h3{font-size:19px;margin:22px 0 6px}
.md p{margin:0 0 12px}
.md ul,.md ol{margin:0 0 12px;padding-left:22px}
.md li{margin:3px 0}
.md img{border-radius:var(--r);border:1px solid var(--line);margin:6px 0}
.md code{font-family:var(--f-mono);font-size:.86em;background:var(--surface-2);padding:1px 5px;border-radius:3px}
.md pre{background:var(--surface-2);padding:12px;border-radius:var(--r);overflow-x:auto}
.md pre code{background:none;padding:0}
.md blockquote{margin:0 0 12px;padding:4px 14px;border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:0 4px 4px 0}
.md table{border-collapse:collapse;display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--line);padding:5px 9px}
.md>:first-child{margin-top:0}

.chk-list{display:grid;gap:2px}
.chk{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:5px;cursor:pointer}
.chk:hover{background:var(--surface-2)}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ok);flex:none}
.chk input:checked+span{color:var(--muted);text-decoration:line-through}
.chk-group{font-size:17px;margin:16px 10px 4px}

.flow-box{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px;overflow-x:auto;min-height:120px}
.flow-box svg{max-width:none;height:auto}

.hist-day{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 6px}
.hist{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.hist time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}
.hist .what{min-width:0}
.hist .fields-changed{grid-column:2;font-size:13px;color:var(--muted)}

.export-opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.export-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px}
.export-card b{font-family:var(--f-display);font-size:19px;font-weight:600}
.export-card p{margin:0 0 8px;font-size:14px;color:var(--muted);flex:1}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.seg button{border:0;background:var(--surface);padding:7px 14px;cursor:pointer;font-weight:600}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

.overlay{position:fixed;inset:0;z-index:40;background:rgba(10,14,20,.5);display:flex;align-items:flex-start;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) 16px 24px;overflow:auto}
.sheet{background:var(--surface);border-radius:10px;box-shadow:var(--shadow);width:100%;max-width:760px;padding:22px 24px}
.sheet h2{font-size:24px;margin-bottom:4px}
.sheet .sub{color:var(--muted);margin:0 0 18px;font-size:15px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.form .full{grid-column:1/-1}
.field{display:grid;gap:5px;min-width:0}
.field label{font-size:14px;font-weight:600}
.field .hint{font-size:13px;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-2);background:var(--bg);border-radius:5px;padding:8px 10px;min-width:0}
.field textarea{resize:vertical;line-height:1.45}
.field textarea.code{font-family:var(--f-mono);font-size:14px}
.field input.mono{font-family:var(--f-mono);font-size:14px}
.req{color:var(--tally)}
.md-tools{display:flex;flex-wrap:wrap;gap:4px}
.md-tools button{border:1px solid var(--line);background:var(--surface-2);border-radius:4px;padding:3px 9px;font-size:13px;font-weight:600;cursor:pointer}
.md-preview{border:1px solid var(--line);border-radius:5px;padding:12px;background:var(--bg);max-height:420px;overflow:auto}
.photos-edit{display:flex;flex-wrap:wrap;gap:8px}
.photos-edit .ph{position:relative;width:110px}
.photos-edit img{width:110px;height:82px;object-fit:cover;border-radius:5px;border:1px solid var(--line);display:block}
.photos-edit .ph button{position:absolute;top:4px;right:4px;border:0;border-radius:3px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;padding:1px 6px;cursor:pointer}
.photos-edit .uploading{width:110px;height:82px;border:1px dashed var(--line-2);border-radius:5px;display:grid;place-items:center;font-size:13px;color:var(--muted)}
.sheet-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.err{color:var(--tally);font-size:14px;margin-right:auto;align-self:center}
.lightbox{max-width:min(1100px,100%);background:transparent;box-shadow:none;padding:0;text-align:right}
.lightbox img{width:100%;border-radius:8px;display:block;margin-top:8px}

/* Pläne: Zeichnungen sind immer weiss, darum bleibt die Plan-Fläche in beiden Themen hell. */
.plan{display:grid;gap:10px}
.plan-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.plan-bar>b{font-family:var(--f-display);font-size:20px;font-weight:600}
.plan-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.plan-tools .btn-ghost{padding:6px 10px}
.zoomv{min-width:46px;text-align:center;font-size:14px}
.plan-scroll{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#ffffff;max-height:80vh;overscroll-behavior:contain}
.plan-canvas{position:relative;min-width:100%}
.plan-canvas img{display:block;width:100%;max-width:none;height:auto;user-select:none;-webkit-user-select:none}
.plan-canvas.editing{cursor:crosshair;outline:2px dashed var(--space);outline-offset:-2px}
.hs{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;z-index:1}
.hs:hover,.hs:focus-visible{z-index:3}
.hs-dot{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--space);color:#ffffff;font:700 13px/1 var(--f-body);font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px rgba(255,255,255,.95),0 2px 8px rgba(0,0,0,.35);transition:transform .12s ease}
.hs.dev .hs-dot{background:#2b3440;width:22px;height:22px;font-size:12px}
.hs.broken .hs-dot{background:#9aa3ad}
.hs:hover .hs-dot{transform:scale(1.15)}
.hs.moving .hs-dot{outline:2px dashed #c43420;outline-offset:3px}
.hs.hl .hs-dot{animation:ping 1s ease-in-out 3}
@keyframes ping{50%{box-shadow:0 0 0 3px #fff,0 0 0 12px rgba(196,52,32,.35)}}
.hs-label{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;background:#121820;color:#ffffff;font-size:12.5px;font-weight:600;padding:2px 8px;border-radius:4px;display:none;pointer-events:none}
.hs:hover .hs-label,.hs:focus-visible .hs-label,.plan.labels .hs-label{display:block}
.edit-hint{margin:0;font-size:14px;color:var(--space);font-weight:600}
.legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 10px}
.legend button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;border-radius:5px;padding:5px 6px;cursor:pointer}
.legend button:hover{background:var(--surface-2)}
.legend .n{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--space);color:#ffffff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.legend .n.dev{background:var(--fg);color:var(--bg)}
.legend .t{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend .k{font-size:12px;color:var(--muted)}
.plan-svg{display:block;width:100%;height:100%}
.pv{position:relative;width:min(100%,calc(78vh * var(--arn)));margin-inline:auto;aspect-ratio:var(--ar);border:1px solid var(--line);border-radius:var(--r);background:#ffffff;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pv.zoomed{touch-action:none;cursor:grab}
.pv.dragging{cursor:grabbing}
.pv-hint{margin:0;font-size:13px;color:var(--muted)}
.pvf{display:flex;flex-direction:column;width:100%;height:100%;background:var(--bg)}
.pvf-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;background:var(--surface);border-bottom:1px solid var(--line)}
.pvf-bar>b{font-family:var(--f-display);font-size:20px;font-weight:600}
.pvf-body{flex:1;min-height:0;padding:12px;display:flex;align-items:center;justify-content:center;container-type:size}
.pv.pv-full{width:min(100cqw,calc(100cqh * var(--arn)));touch-action:none;cursor:grab}
.pvf-hint{margin:0;padding:0 16px calc(10px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--muted)}
.plan-svg .lnk{cursor:pointer;outline:none}
.plan-svg .lnk:hover,.plan-svg .lnk:focus-visible{filter:drop-shadow(0 0 2.5px rgba(29,92,166,.95))}
.plan-svg .lnk.hl{animation:hlp 1s ease-in-out 3}
@keyframes hlp{50%{filter:drop-shadow(0 0 6px #c43420)}}
.legend .n.nonum{background:var(--surface-2);color:var(--muted);font-size:13px}

/* Karte v7 */
.map{display:grid;gap:10px;container-type:inline-size}
.map-wrap{display:grid;gap:12px;align-items:start}
@container (min-width:820px){.map-wrap{grid-template-columns:minmax(0,1fr) 290px}}
.map-cq{min-width:0}
.map-stage{position:relative;width:min(100%,calc(74vh * var(--arn)));margin-inline:auto}
.map-stage .pv,.map-stage .pv.pv-full{width:100%}
.map-ctrl{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.08)}
.mc{width:38px;height:38px;border:0;background:#ffffff;color:#121820;font:600 21px/1 var(--f-body);cursor:pointer;display:grid;place-items:center;padding:0}
.mc+.mc{border-top:1px solid #e1e6ec}
.mc:hover{background:#eef2f6}.mc:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.map-zoomv{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);color:#121820;font-size:12.5px;padding:2px 8px;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.map-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px;max-height:74vh;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start}
.map-panel .legend{grid-template-columns:1fr}
.mp-h{margin:0;font-family:var(--f-display);font-size:17px;font-weight:600}
.mp-h4{margin:4px 0 0;font-size:14px}
.mp-head{display:flex;align-items:flex-start;gap:10px}
.mp-head .n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--space);color:#ffffff;font-size:13px;font-weight:700}
.mp-head .n.dev{background:var(--fg);color:var(--bg)}.mp-head .n.nonum{background:var(--surface-2);color:var(--muted)}
.mp-title{flex:1;min-width:0;display:grid;gap:3px}.mp-title b{font-size:16px;line-height:1.25}
.mp-gw{display:flex;gap:4px}
.mp-x{padding:2px 9px;font-size:20px;line-height:1}
.mp-sub{margin:0;color:var(--muted);font-size:14px}
.mp-desc{margin:0;font-size:14px}
.mp-row{display:flex;flex-wrap:wrap;gap:6px}
.mp-foot{border-top:1px solid var(--line);padding-top:10px}
.mp-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mp-list button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:5px;padding:6px;cursor:pointer;font-size:14px;color:var(--fg)}
.mp-list button:hover{background:var(--surface-2)}
.mp-list .t{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-list .a{font-size:12.5px;white-space:nowrap}
.mp-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}.mp-dl dt{color:var(--muted)}.mp-dl dd{margin:0;overflow-wrap:anywhere}
.plan-svg .lnk.sel{filter:drop-shadow(0 0 3px #ffbf00) drop-shadow(0 0 6px rgba(255,191,0,.9))}
.plan-svg .lnk.sel .mk circle{stroke:#121820}
.btn.sm{padding:2px 9px;font-size:12.5px}
.pvf .map{height:100%;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(8px + env(safe-area-inset-bottom,0px));grid-template-rows:auto auto minmax(0,1fr) auto}
.pvf .map-wrap{min-height:0;height:100%;grid-template-rows:minmax(0,1fr) auto}
@container (min-width:820px){.pvf .map-wrap{grid-template-rows:minmax(0,1fr)}}
.pvf .map-cq{height:100%;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.pvf .map-stage{width:min(100cqw,calc(100cqh * var(--arn)))}
.pvf .map-panel{max-height:100%}
@container (max-width:819px){.pvf .map-panel{max-height:34vh}}
.ed-scope{margin:0 0 4px;font-size:13px;line-height:1.45;padding:8px 10px;border-radius:6px;background:var(--surface-2)}
/* Anschlüsse, Verbindungen, Racks */
.ports-ed{display:grid;gap:8px}
.frow.port{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto}
.port-quick,.port-copy{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border:1px dashed var(--line-2);border-radius:6px}
.port-quick input,.port-quick select,.port-copy select{border:1px solid var(--line-2);background:var(--bg);border-radius:5px;padding:7px 8px;min-width:0}
#editForm .port-quick input,#editForm .port-quick select,#editForm .port-copy select{width:auto;flex:0 1 auto}
#editForm .port-quick #pq-n{width:64px;flex:none}#editForm .port-quick #pq-name{flex:1 1 150px;min-width:120px}#editForm .port-copy select{flex:1 1 220px}
.port-quick::before{content:"Schnell hinzufügen";flex-basis:100%;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.end-pick{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:6px}
.end-pick select{width:100%;border:1px solid var(--line-2);background:var(--bg);border-radius:5px;padding:8px;min-width:0}
.end-msg{grid-column:1/-1;display:grid;gap:4px;margin-top:6px;padding:8px 10px;border-radius:6px;background:color-mix(in srgb,var(--warn,#c98a00) 14%,var(--surface));font-size:14px}
@media (max-width:640px){.end-pick{grid-template-columns:1fr}.frow.port{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.frow.port .r-pname{grid-column:1/-1}}
.cab-sw{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--muted)}
.cab-sw.lg{width:22px;height:6px;margin:10px 0 0;flex:none}
.ports-tbl .conn{display:block;text-align:left;padding:1px 0}
.rack-wrap{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.rack-wrap{grid-template-columns:minmax(0,460px) minmax(0,1fr)}}
.rack-svg{display:block;width:100%;max-width:460px;height:auto}
.rack-svg .rk{cursor:pointer;outline:none}.rack-svg .rk:hover rect:first-child,.rack-svg .rk:focus-visible rect:first-child{fill:#ffffff;stroke:#1d5ca6;stroke-width:2}
.rack-side{display:grid;gap:8px;align-content:start}
.mp-off{display:grid;gap:4px;padding:10px;border-radius:6px;background:var(--surface-2);font-size:14px}
.mp-off ul{list-style:none;margin:2px 0;padding:0;display:grid;gap:2px}
.plan-svg .cab{cursor:pointer}
.plan-svg .cab:hover,.plan-svg .cab:focus-visible{filter:drop-shadow(0 0 2px rgba(0,0,0,.45))}
.plan-svg .cab.sel{filter:drop-shadow(0 0 3px #ffbf00) drop-shadow(0 0 5px #ffbf00)}
.rack-tabs{margin-bottom:10px}
.rack-free{margin:0;font-size:15px}
.patch .wire .adp{position:absolute;top:calc(50% + 10px);font-size:12px;color:var(--muted);white-space:nowrap;background:var(--bg);padding:0 4px}
/* Editor */
.overlay.full{padding:0;align-items:stretch;background:var(--bg);overflow:hidden}
.ed{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.ed-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;background:var(--surface);border-bottom:1px solid var(--line)}
.ed-name{display:flex;flex-direction:column;min-width:120px;flex:1}
.ed-name b{font-family:var(--f-display);font-size:19px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-name span{font-size:12.5px}
.ed-name .dirty{color:var(--warn);font-weight:600}
.ed-group{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.ed-end{gap:8px}
.ed-tool{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:48px;min-height:42px;border:1px solid transparent;background:none;border-radius:6px;padding:3px 6px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--fg)}
.ed-tool svg{width:18px;height:18px}
.ed-tool.ed-z{font-size:20px;min-width:36px}
.ed-tool:hover{background:var(--surface-2)}
.ed-tool[aria-pressed="true"]{background:var(--space-soft);border-color:var(--space)}
.ed-tool:disabled{opacity:.35;cursor:default}
.ed-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;background:var(--warn-soft);border-bottom:1px solid var(--line);font-weight:600}
.ed-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0}
.ed-canvas{overflow:auto;padding:16px;background:var(--surface-2);min-width:0}
.ed-svg{display:block;background:#ffffff;box-shadow:var(--shadow);touch-action:none;user-select:none;-webkit-user-select:none;margin:0 auto;max-width:none}
.ed-svg [data-el]{cursor:move}
.ed-svg.tool-line,.ed-svg.tool-rect,.ed-svg.tool-text,.ed-svg.tool-marker,.ed-svg.tool-line [data-el],.ed-svg.tool-rect [data-el],.ed-svg.tool-text [data-el],.ed-svg.tool-marker [data-el]{cursor:crosshair}
.ed-h{cursor:pointer}.ed-h-tl,.ed-h-br{cursor:nwse-resize}.ed-h-tr,.ed-h-bl{cursor:nesw-resize}.ed-h-p{cursor:grab}
.ed-panel{overflow:auto;border-left:1px solid var(--line);background:var(--surface);padding:14px 16px 24px;display:grid;gap:16px;align-content:start}
.ed-sec{display:grid;gap:6px}
.ed-sec>b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ed-panel label{font-size:14px;font-weight:600}
.ed-panel input[type=text],.ed-panel input[type=number],.ed-panel select,.ed-panel textarea{width:100%;border:1px solid var(--line-2);background:var(--bg);border-radius:5px;padding:6px 8px;min-width:0;font:inherit;font-size:14px}
.ed-panel label.inl{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.ed-panel label.inl input[type=number]{width:74px}
.ed-panel input[type=color]{width:30px;height:24px;border:1px solid var(--line-2);border-radius:4px;padding:0;background:none}
.ed-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ed-row .btn{font-size:13px;padding:5px 9px}
.sw-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.sw{width:22px;height:22px;border-radius:4px;border:1px solid var(--line-2);cursor:pointer;padding:0}
.sw[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px}
.sw.none{background:linear-gradient(135deg,#ffffff 44%,#c43420 44%,#c43420 56%,#ffffff 56%)}
.ed-hint{font-size:13px;color:var(--muted);margin:0}
.ed-help{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);display:grid;gap:4px}
.ed-help b{color:var(--fg)}
.ed-legend{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13.5px}
.ed-legend span:first-child{display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:8px;vertical-align:middle;box-shadow:0 0 0 1px var(--line)}
@media (max-width:860px){.ed-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.ed-panel{border-left:0;border-top:1px solid var(--line);max-height:42vh}.ed-tool span{display:none}.ed-tool{min-width:38px;min-height:38px}.ed-canvas{padding:8px}}
/* Strom */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:8px}
.stat{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px;display:grid;gap:2px}
.stat .k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--f-display);font-size:32px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .s{font-size:14px;color:var(--muted)}
.bar{display:block;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--space)}
.tbl th.num-r,.tbl td.num-r,.num-r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.power-line{margin:12px 0 0;font-size:15px}
.inline{display:flex;gap:8px}
/* Gewerke */
.gw-chips{display:flex;flex-wrap:wrap;gap:4px;padding:0 4px}
.gw-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 10px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--fg)}
.gw-chip:hover{background:var(--surface-2)}
.gw-chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.gw-chip[aria-pressed="false"].sm{opacity:.55}
.gw-chip:disabled{opacity:.35;cursor:default}
.gw-chip.sm{font-size:12.5px;padding:2px 9px}
.gw-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gw);box-shadow:0 0 0 1.5px var(--surface);flex:none;vertical-align:middle}
.gw-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:1px 9px;border-radius:999px;background:color-mix(in srgb,var(--gw) 16%,var(--surface));color:var(--fg)}
.gw-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gw)}
.gw-pill.all{--gw:var(--muted)}
.layer-bar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:13px}
.ok-t{color:var(--ok);font-weight:600}
.bad-t{color:var(--tally);font-weight:600}
.tree{display:grid;gap:6px}
.tree-row{margin-left:calc(var(--d) * 22px);width:calc(100% - var(--d) * 22px)}
.tree-row.site{border-color:var(--line-2);background:var(--surface-2)}
.tree-row.site b{font-family:var(--f-display);font-size:18px}
.tree-l{display:inline-block;width:10px;height:10px;border-left:2px solid var(--line-2);border-bottom:2px solid var(--line-2);margin:0 8px 3px 0;border-radius:0 0 0 3px}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;margin:-4px 0 16px}
.filters label{display:grid;gap:3px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.filters select{border:1px solid var(--line-2);background:var(--surface);border-radius:5px;padding:6px 8px;font-size:14.5px;text-transform:none;letter-spacing:0;color:var(--fg);max-width:260px}
.rows{display:grid;gap:6px}
.frow{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:6px;align-items:center}
.frow.pos{grid-template-columns:minmax(0,2fr) 76px minmax(0,1.2fr) 92px auto}
.frow select,.frow input{width:100%;border:1px solid var(--line-2);background:var(--bg);border-radius:5px;padding:7px 8px;min-width:0}
.frow .r-av{font-size:13px;white-space:nowrap}
.frow .r-del{padding:6px 9px}
.chk-inl{display:inline-flex;gap:8px;align-items:center;font-weight:400}
.avail{margin-bottom:16px}
.avail-line{font-size:17px;margin:0}
.sub-h{font-size:16px;margin:16px 0 8px;color:var(--muted)}
.qr-box{display:grid;place-items:center;padding:12px;background:#ffffff;border-radius:8px;border:1px solid var(--line);width:fit-content;margin:0 auto}
.qr-url{text-align:center;word-break:break-all;margin:10px 0}
.ret-tbl input{width:72px;border:1px solid var(--line-2);background:var(--bg);border-radius:5px;padding:5px 7px}
.ed-layer{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ed-layer select{border:1px solid var(--line-2);background:var(--bg);border-radius:5px;padding:5px 6px;font-size:13.5px;color:var(--fg)}
@media (max-width:860px){.frow.pos{grid-template-columns:minmax(0,1fr) 70px auto}.frow.pos .r-lager{grid-column:1/2}.frow.pos .r-av{grid-column:2/4}.tree-row{margin-left:calc(var(--d) * 12px);width:calc(100% - var(--d) * 12px)}}
.inline input{flex:1}
.pl-prev{max-height:240px;width:auto;border:1px solid var(--line);border-radius:5px;background:#fff}
.uploading.wide{width:100%;height:120px;border:1px dashed var(--line-2);border-radius:5px;display:grid;place-items:center;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.hs.hl .hs-dot{animation:none;outline:3px solid #c43420}.hs-dot{transition:none}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:6px;font-weight:600;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.scrim{display:none}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);z-index:30;transform:translateX(-102%);transition:transform .2s ease;height:auto;padding-top:calc(20px + env(safe-area-inset-top,0px))}
  .rail.open{transform:none;box-shadow:var(--shadow)}
  .scrim.open{display:block;position:fixed;inset:0;z-index:25;background:rgba(10,14,20,.4)}
  .topbar .menu-btn{display:inline-flex}
  .main{padding-inline:16px}
  .search{width:auto;flex:1}
  .crumbs{display:none}
  .hide-sm{display:none}
  dl.fields{grid-template-columns:minmax(0,1fr)}
  dl.fields dt{border-bottom:0;padding-bottom:0}
  .form{grid-template-columns:minmax(0,1fr)}
  .sheet{padding:18px 16px}
  .hs-dot{width:20px;height:20px;font-size:11px;box-shadow:0 0 0 2px rgba(255,255,255,.95),0 1px 4px rgba(0,0,0,.35)}
  .hs.dev .hs-dot{width:18px;height:18px;font-size:10px}
  .plan-scroll{max-height:70vh}
  .patch{grid-template-columns:minmax(0,1fr)}
  .patch .wire{height:34px}
  .patch .wire::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:3px solid var(--space)}
}
@media (prefers-reduced-motion:reduce){.rail{transition:none}}

.auth-links{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:14px;margin:12px 0 0}
.row-card.sg{display:grid;gap:4px;cursor:default;text-align:left}
.row-card.sg.done{opacity:.6}