/* PlanDaSys – Stil aus dem Prototyp (Office 365 / Fluent) */
/* Layout: Office-365-Stil – Suite-Leiste (Markenfarbe) + Befehlsleiste, darunter Gantt mit fester Vorgangsspalte und Tagesraster, Detailbereich rechts als Panel */
:root{
  --brand:#31752f; --brand-ink:#ffffff; --brand-dark:#235622;
  --paper:#faf9f8; --surface:#ffffff; --sunk:#f3f2f1; --hover:#f3f2f1; --ink:#323130; --muted:#605e5c; --line:#edebe9; --line-strong:#c8c6c4;
  --accent:#0078d4; --accent-ink:#ffffff; --accent-hover:#106ebe; --accent-soft:#deecf9;
  --ok:#107c10; --ok-ink:#ffffff; --ok-soft:#dff6dd; --warn:#8a5a00; --warn-soft:#fff4ce; --bad:#d13438; --bad-soft:#fde7e9;
  --weekend:rgba(50,49,48,.045); --today:#d13438; --framezone:rgba(0,120,212,.06);
  --shadow-4:0 1.6px 3.6px rgba(0,0,0,.132),0 .3px .9px rgba(0,0,0,.108);
  --shadow-16:0 6.4px 14.4px rgba(0,0,0,.132),0 1.2px 3.6px rgba(0,0,0,.108);
  --shadow-64:0 25.6px 57.6px rgba(0,0,0,.22),0 4.8px 14.4px rgba(0,0,0,.18);
  --f-body:"Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:var(--f-body);
  --f-mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --dayw:30px; --labw:300px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --brand:#2b6a29; --brand-ink:#ffffff; --brand-dark:#1f4f1e;
  --paper:#1b1a19; --surface:#252423; --sunk:#2d2c2b; --hover:#323130; --ink:#f3f2f1; --muted:#c8c6c4; --line:#3b3a39; --line-strong:#605e5c;
  --accent:#2899f5; --accent-ink:#0b1a28; --accent-hover:#4fadf7; --accent-soft:#0f2f4a;
  --ok:#3fa03f; --ok-ink:#ffffff; --ok-soft:#173a17; --warn:#fce100; --warn-soft:#3d3500; --bad:#f1707b; --bad-soft:#442726;
  --weekend:rgba(255,255,255,.035); --today:#f1707b; --framezone:rgba(40,153,245,.08);
  --shadow-4:0 1.6px 3.6px rgba(0,0,0,.4),0 .3px .9px rgba(0,0,0,.3);--shadow-16:0 6.4px 14.4px rgba(0,0,0,.45),0 1.2px 3.6px rgba(0,0,0,.35);--shadow-64:0 25.6px 57.6px rgba(0,0,0,.6),0 4.8px 14.4px rgba(0,0,0,.5);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --brand:#2b6a29; --brand-ink:#ffffff; --brand-dark:#1f4f1e;
  --paper:#1b1a19; --surface:#252423; --sunk:#2d2c2b; --hover:#323130; --ink:#f3f2f1; --muted:#c8c6c4; --line:#3b3a39; --line-strong:#605e5c;
  --accent:#2899f5; --accent-ink:#0b1a28; --accent-hover:#4fadf7; --accent-soft:#0f2f4a;
  --ok:#3fa03f; --ok-ink:#ffffff; --ok-soft:#173a17; --warn:#fce100; --warn-soft:#3d3500; --bad:#f1707b; --bad-soft:#442726;
  --weekend:rgba(255,255,255,.035); --today:#f1707b; --framezone:rgba(40,153,245,.08);
  --shadow-4:0 1.6px 3.6px rgba(0,0,0,.4),0 .3px .9px rgba(0,0,0,.3);--shadow-16:0 6.4px 14.4px rgba(0,0,0,.45),0 1.2px 3.6px rgba(0,0,0,.35);--shadow-64:0 25.6px 57.6px rgba(0,0,0,.6),0 4.8px 14.4px rgba(0,0,0,.5);
  color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.mono{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Suite-Leiste */
header.suite{background:var(--brand);color:var(--brand-ink);height:48px;display:flex;align-items:center;gap:12px;min-width:0}
.waffle{display:grid;grid-template-columns:repeat(3,4px);gap:3px;padding:8px;margin-left:-8px;border-radius:2px;flex:none}
.waffle i{width:4px;height:4px;background:currentColor;border-radius:1px;display:block}
.suite .app{font-size:16px;font-weight:600;white-space:nowrap}
.suite .sep{width:1px;height:20px;background:rgba(255,255,255,.4);flex:none}
.suite .proj{font-size:14px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Befehlsleiste */
.cmdbar{background:var(--surface);box-shadow:var(--shadow-4);display:flex;align-items:center;gap:2px;min-height:44px;flex-wrap:wrap;padding-block:4px;position:relative;z-index:8}
.cmd{border:1px solid transparent;background:transparent;border-radius:2px;height:32px;padding:0 8px;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);white-space:nowrap}
.cmd svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cmd:hover{background:var(--hover)}
.cmd:active{background:var(--line)}
.cmd.primary svg{stroke:var(--accent)}
.cmd.icon{width:32px;justify-content:center;padding:0}
.cmd.icon svg{stroke:var(--ink)}
.vsep{width:1px;height:20px;background:var(--line-strong);margin:0 6px}
.weeknav{display:flex;align-items:center;gap:2px}
.weeknav .range{font-size:14px;font-weight:600;padding:0 6px;white-space:nowrap}

.page{padding-block:12px}

/* Fluent-Buttons (Panel, Dialoge, Banner) */
.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:2px;min-height:32px;padding:0 16px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--hover)}
.btn.small{min-height:24px;padding:0 8px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.banner{border-radius:2px;background:var(--sunk);padding:8px 12px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;border-left:4px solid var(--line-strong)}
.banner .txt{flex:1;min-width:240px}
.banner.info{background:var(--warn-soft);border-left-color:var(--warn)}

.toolbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px}
.chk{display:inline-flex;gap:6px;align-items:center;font-size:14px;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:18px;height:10px;border-radius:1px;display:inline-block;border:1px solid var(--line-strong)}
.sw.fr{background:linear-gradient(90deg,#00b050 0 33%,#1a3cff 33% 66%,#e8231f 66%);border-color:transparent}
.sw.fdone{background:var(--ok);border-color:var(--ok)}
.sw.ready{background:var(--surface);border-color:var(--accent);border-width:2px}
.sw.conflict{background:var(--surface);border:2px dashed var(--bad)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:8px}

/* Gewerke-Pivot/Chips */
.gwbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.gwbar .lbl{font-size:14px;font-weight:600;margin-right:4px}
.gwchip{border:1px solid var(--line-strong);background:var(--surface);border-radius:16px;height:28px;padding:0 12px 0 10px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.gwchip:hover{background:var(--hover)}
.gwchip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:600}
.gwchip .n{font-size:12px;color:var(--muted);font-weight:400}
.gsw{width:16px;height:9px;border-radius:1px;flex:none;border:1px solid;display:inline-block}
.gtag{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap}
.gwmap{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
.gwmap input{border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);height:32px;padding:0 8px;font-size:14px;width:100%}

/* Pivots (Reiter) */
.pivots{display:flex;align-items:center;gap:4px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.savebox{display:flex;align-items:center;gap:8px;padding:6px 0}
.savestate{font-size:12px;color:var(--muted);white-space:nowrap}
.savestate.draft{color:var(--ok)}.savestate.warn{color:var(--warn)}
.linkbtn{border:none;background:none;color:var(--bad);font-size:12px;padding:0 4px;text-decoration:underline;cursor:pointer}
.pvsep{width:1px;height:24px;background:var(--line-strong);margin:0 8px}
.pivots button{position:relative;border:none;background:none;height:44px;padding:0 8px;font-size:14px;color:var(--ink);white-space:nowrap}
.pivots button:hover{background:var(--hover)}
.pivots button[aria-selected="true"]{font-weight:600}
.pivots button[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--accent);border-radius:1px}

/* Rückmeldung */
.fbhead{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.fbhead h2{margin:0 0 2px;font-size:20px;font-weight:600}
.btn .ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kpis{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.kpi{background:var(--surface);box-shadow:var(--shadow-4);border-radius:2px;padding:12px 16px;min-width:150px}
.kpi .v{font-size:28px;font-weight:600;line-height:34px}
.kpi .k{font-size:12px;color:var(--muted)}
.kpi.bad .v{color:var(--bad)}.kpi.ok .v{color:var(--ok)}.kpi.warn .v{color:var(--warn)}
.sect{margin-bottom:24px}
.sect h3{margin:0 0 8px;font-size:16px;font-weight:600;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.sect h3 small{font-weight:400;font-size:12px;color:var(--muted)}
.tblwrap{overflow-x:auto;background:var(--surface);box-shadow:var(--shadow-4);border-radius:2px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--hover)}
.tbl td.t{font-weight:600}
.tbl td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .lnk{all:unset;cursor:pointer;color:var(--accent)}
.tbl .lnk:hover{text-decoration:underline}
.dev{color:var(--bad);font-weight:600;white-space:nowrap}

/* Schieberegler */
.scrub{display:flex;align-items:center;gap:12px;margin-top:10px;background:var(--surface);box-shadow:var(--shadow-4);border-radius:2px;padding:6px 12px}
.scrub>span{color:var(--muted);white-space:nowrap}
.strack{position:relative;flex:1;min-width:0;height:28px;cursor:pointer;touch-action:none}
.strack::before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--line)}
.sband{position:absolute;top:2px;height:24px;background:rgba(209,52,56,.16);border:1px solid rgba(209,52,56,.55);border-radius:2px;cursor:grab;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:8px}
.sband:active{cursor:grabbing}
.sband:focus-visible{outline:2px solid var(--today);outline-offset:1px}
.sband span{font-family:var(--f-mono);font-size:11px;color:var(--ink);white-space:nowrap;background:var(--surface);padding:0 4px;border-radius:2px;opacity:.9}
.stoday{position:absolute;top:0;height:28px;width:2px;margin-left:-1px;background:var(--today);pointer-events:none}
.stoday::after{content:"Heute";position:absolute;top:-1px;left:4px;font-size:10px;font-weight:600;color:var(--today);white-space:nowrap}

/* Platzhalter + Fußzeile */
.placeholder{background:var(--surface);box-shadow:var(--shadow-4);border-radius:2px;padding:48px 24px;text-align:center;color:var(--muted)}
.placeholder svg{width:48px;height:48px;fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.placeholder p{margin:8px 0 0}
.placeholder b{color:var(--ink)}
.sitefoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:8px;background:var(--surface);border-top:1px solid var(--line);font-size:12px}
.sitefoot a{color:var(--accent);text-decoration:none}
.sitefoot a:hover{text-decoration:underline}
.logotext{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.02em}

/* Board */
/* Ganzes Fenster: Kopf + Inhalt (füllt) + Fußzeile immer sichtbar */
body{display:flex;flex-direction:column;overflow:hidden}
header.suite,.cmdbar,.pivots,.sitefoot,#banner{flex:none}
main.page{flex:1;min-height:0;display:flex;flex-direction:column}
#view-lookahead{flex:1;min-height:0;display:flex;flex-direction:column}
#view-lookahead>.gwbar,#view-lookahead>.scrub,#view-lookahead>.foot{flex:none}
#view-rueckmeldung,#view-arbeitsanmeldung{flex:1;min-height:0;overflow:auto}
.boardwrap{flex:1;min-height:180px;position:relative;background:var(--surface);overflow:auto;box-shadow:var(--shadow-4);border-radius:2px}
.board{position:relative;width:max-content;min-width:100%}
.row{display:flex;border-bottom:1px solid var(--line)}
.lab{position:sticky;left:0;z-index:3;width:var(--labw);flex:none;background:var(--surface);border-right:1px solid var(--line-strong);padding:4px 10px;display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.track{position:relative;flex:none}
.weshade{position:absolute;top:0;bottom:0;pointer-events:none;z-index:1;background:var(--weekend)}
.holsel select{border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);height:26px;padding:0 4px;font-size:13px;margin-left:4px;max-width:180px}
.day.hol{color:var(--ink);font-weight:600}
.sw.we{background:var(--weekend);border-color:var(--line-strong)}
.srow .lab{flex-direction:row;align-items:center;justify-content:flex-start;gap:6px}
.srow .lab,.srow .track{background:var(--sunk)}
.srow.lv0{border-top:1px solid var(--line-strong)}
.sname{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.srow.lv0 .sname{font-size:14px}
.srow .cnt{font-size:12px;color:var(--muted);white-space:nowrap}
.tog{width:18px;height:18px;flex:none;border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);font-size:14px;line-height:15px;padding:0;font-weight:700;color:var(--ink);font-family:var(--f-mono)}
.tog:hover{border-color:var(--accent);color:var(--accent)}
.sbar{position:absolute;top:10px;height:7px;background:var(--ink);z-index:2}
.sbar::before,.sbar::after{content:"";position:absolute;top:7px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--ink)}
.sbar::before{left:-1px}.sbar::after{right:-1px}
.sbar.cl::before,.sbar.cr::after{display:none}
.sbar.done{background:var(--ok)}.sbar.done::before,.sbar.done::after{border-top-color:var(--ok)}
.lpsbtn svg{width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
.lpsbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lpsbtn[aria-pressed="true"] svg{stroke:var(--accent-ink)}.lpsbtn[aria-pressed="true"] .n{color:inherit;opacity:.85}
.born{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-strong);font-size:12px}
.hist{margin-top:6px;font-size:12px}.hist summary{cursor:pointer;color:var(--accent)}.hist ul{margin:4px 0 0;padding-left:16px}.hist li{margin:2px 0}
.daygrid{position:absolute;top:0;bottom:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(to right,var(--line-strong) 1px,transparent 1px),linear-gradient(to right,var(--line) 1px,transparent 1px);
  background-size:calc(var(--dayw) * 7) 100%,var(--dayw) 100%}
.head{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line-strong)}
.head .track{background-image:none}
.head .lab{z-index:6;justify-content:flex-end;font-size:12px;font-weight:600;color:var(--muted)}
.wkrow,.dayrow{display:flex}
.wk{flex:none;border-left:1px solid var(--line-strong);font-weight:600;font-size:13px;padding:3px 6px;white-space:nowrap;overflow:hidden}
.wk.cur{color:var(--accent)}
.wk small{font-weight:400;font-size:12px;color:var(--muted);margin-left:6px}
.day{flex:none;width:var(--dayw);text-align:center;font-size:11px;line-height:14px;padding:2px 0 4px;color:var(--muted);border-left:1px solid var(--line)}
.day.mo{border-left-color:var(--line-strong)}
.day.we{background:var(--weekend)}
.day.td{color:var(--today);font-weight:600;font-size:10.5px;background:var(--bad-soft)}
.day b{display:block;font-weight:600;color:var(--ink);font-size:12px;line-height:16px}
.day.td b{color:#fff;background:var(--today);border-radius:2px;margin:0 3px}
.grp .lab{background:var(--sunk);font-weight:600;font-size:14px;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
.grp .lab .cnt{font-weight:400;font-size:12px;color:var(--muted)}
.grp .track{background-color:var(--sunk)}
.fname{font-weight:600;font-size:14px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fmeta .uid{font-size:12px;color:var(--muted)}
.tag{font-size:11px;padding:0 6px;border-radius:2px;line-height:16px;white-space:nowrap;font-weight:600}
.tag.moved{color:var(--warn);background:var(--warn-soft)}
.tag.crit{color:var(--bad);background:var(--bad-soft)}
.tag.bad{color:var(--bad);background:var(--bad-soft)}
.tag.done{color:var(--ok);background:var(--ok-soft)}
.addbtn{margin-left:auto;border:none;background:transparent;border-radius:2px;font-size:12px;font-weight:600;color:var(--accent);padding:0 6px;line-height:22px}
.addbtn:hover{background:var(--accent-soft)}
.trow .lab{padding-left:24px;cursor:pointer;flex-direction:row;align-items:center;gap:6px;justify-content:flex-start}
.trow .lab:hover{background:var(--hover)}
.trow.sel .lab{background:var(--accent-soft)}
.tname{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.town{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--accent)}
.dot.blocked{background:var(--warn)}.dot.done{background:var(--ok)}.dot.conflict{background:var(--bad)}
.shade{position:absolute;top:0;bottom:0;background:var(--weekend);pointer-events:none}
.zone{position:absolute;top:0;bottom:0;background:var(--framezone);pointer-events:none;border-left:1px dashed var(--line-strong);border-right:1px dashed var(--line-strong)}
.nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--today);pointer-events:none;z-index:2}
.frame{position:absolute;top:7px;height:20px;border:1px solid var(--muted);border-radius:2px;background:var(--line-strong);font-family:var(--f-mono);font-size:10.5px;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;padding:0 3px;overflow:hidden;white-space:nowrap;z-index:2}
.frame span{background:var(--surface);padding:0 3px;border-radius:2px;line-height:14px}
.frame.cl{border-left-style:dotted}
.frame.cr{border-right-style:dotted}
.frame.done{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.frame.done span{background:transparent}
.ms{position:absolute;top:10px;width:14px;height:14px;transform:rotate(45deg);background:var(--ink);margin-left:-7px;z-index:2}
.ms.done{background:var(--ok)}
.bar{position:absolute;top:4px;height:22px;border-radius:2px;border:1.5px solid var(--accent);border-left-width:4px;background:var(--surface);font-size:12px;line-height:19px;padding:0 14px 0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;touch-action:none;user-select:none;z-index:2;box-shadow:var(--shadow-4)}
.bar.blocked{background:var(--warn-soft);border-color:var(--warn)}
.bar.done{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.bar.conflict{outline:2px dashed var(--bad);outline-offset:1px}
.bar.sel{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.bar.dragging{cursor:grabbing;opacity:.92;z-index:4;box-shadow:var(--shadow-16)}
.bar .grip{position:absolute;right:0;top:0;bottom:0;width:10px;cursor:ew-resize;background:linear-gradient(90deg,transparent 3px,currentColor 3px 4px,transparent 4px 6px,currentColor 6px 7px,transparent 7px);opacity:.35}
.bar .flag{font-weight:700;margin-right:3px}
.bar.cut-l{border-left-style:dotted}.bar.cut-r{border-right-style:dotted}
.dragtip{position:fixed;z-index:50;background:var(--ink);color:var(--surface);font-size:12px;padding:4px 8px;border-radius:2px;pointer-events:none;box-shadow:var(--shadow-16)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}

/* Panel (rechts) */
aside.drawer{position:fixed;z-index:30;top:0;right:0;bottom:0;width:min(400px,100vw);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);
  background:var(--surface);box-shadow:var(--shadow-64);display:flex;flex-direction:column}
.dhead{display:flex;align-items:center;gap:8px;padding:16px 16px 8px 24px}
.dhead h2{margin:0;font-size:20px;font-weight:600;flex:1}
.dbody{padding:8px 24px 16px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field>label,.flabel{font-size:14px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);height:32px;padding:0 8px;font-size:14px;width:100%}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.field textarea{height:auto;min-height:64px;padding:6px 8px;resize:vertical}
.field input::placeholder{color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.framebox{background:var(--sunk);border-radius:2px;padding:8px 12px;font-size:13px;border-left:4px solid var(--line-strong)}
.framebox .warn{color:var(--bad);font-weight:600;margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line-strong);background:var(--surface);border-radius:16px;padding:2px 10px;font-size:13px}
.hint{font-size:12px;color:var(--muted)}
.hint.ok{color:var(--ok)}
.seg{display:flex;border:1px solid var(--line-strong);border-radius:2px;overflow:hidden}
.seg button{flex:1;border:none;background:var(--surface);height:32px;font-size:14px;font-weight:600;border-left:1px solid var(--line-strong)}
.seg button:first-child{border-left:none}
.seg button:hover{background:var(--hover)}
.seg button[aria-pressed="true"].o{background:var(--accent);color:var(--accent-ink)}
.seg button[aria-pressed="true"].d{background:var(--ok);color:var(--ok-ink)}
.dfoot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.dfoot .btn.del{color:var(--bad);border-color:var(--line-strong)}
.dfoot .btn.del:hover{background:var(--bad-soft)}

/* Dialog */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--surface);border-radius:2px;max-width:560px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-64)}
.modal h2{margin:0;font-size:20px;font-weight:600}
.modal .stats{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14px}
.modal .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.err{color:var(--bad);font-weight:600}
.okt{color:var(--ok);font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:2px;z-index:60;font-size:14px;max-width:calc(100vw - 32px);box-shadow:var(--shadow-16)}

@media (max-width:720px){
  :root{--labw:160px;--dayw:26px}
  .suite .sep,.suite .proj{display:none}
  .fname{font-size:13px}
  body{display:block;overflow:auto}
  .boardwrap{flex:none;height:65vh}
  .town{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Ergänzungen Web-Anwendung (Kopf, Login, Projekte, Admin) ---------- */
.suite .sp{flex:1}
.suite .who{font-size:13px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.suite .role{font-size:12px;font-weight:600;background:rgba(255,255,255,.18);border-radius:10px;padding:1px 8px;white-space:nowrap}
.suite a.hl,.suite button.hl{color:var(--brand-ink);background:transparent;border:1px solid transparent;border-radius:2px;height:32px;padding:0 8px;font-size:13px;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.suite a.hl:hover,.suite button.hl:hover{background:var(--brand-dark)}
.scrollpage{overflow:auto}
.scrollpage main.page{display:block;flex:1;overflow:auto}
.center{max-width:420px;margin:48px auto 24px;width:100%}
.card{background:var(--surface);box-shadow:var(--shadow-16);border-radius:2px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px}
.card h1{margin:0;font-size:24px;font-weight:600}
.card p{margin:0}
.formerr{color:var(--bad);font-weight:600;font-size:13px;min-height:20px}
.wrap{max-width:1180px;margin:0 auto;width:100%}
.ptitle{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:8px 0 16px}
.ptitle h1{margin:0;font-size:24px;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.tile{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);box-shadow:var(--shadow-4);border-radius:2px;padding:16px;display:flex;flex-direction:column;gap:6px;border-left:4px solid var(--brand)}
.tile:hover{box-shadow:var(--shadow-16)}
.tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tile .tn{font-size:16px;font-weight:600}
.tile .tm{font-size:13px;color:var(--muted)}
.tile.last{border-left-color:var(--accent)}
.tile.arch{opacity:.6;border-left-color:var(--line-strong)}
.badge{display:inline-block;font-size:11px;font-weight:600;border-radius:2px;padding:0 6px;line-height:18px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.badge.r-admin{background:var(--accent-soft);color:var(--accent)}
.badge.r-write{background:var(--ok-soft);color:var(--ok)}
.badge.r-read{background:var(--sunk);color:var(--muted)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.formrow{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;background:var(--surface);box-shadow:var(--shadow-4);border-radius:2px;padding:12px 16px;margin-bottom:12px}
.formrow .field{min-width:160px;flex:1}
.formrow .field.narrow{flex:0 0 auto;min-width:90px}
.mx td{padding:4px 8px}
.mx th.rot{white-space:nowrap}
.mx select{border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);height:28px;padding:0 4px;font-size:13px}
.mx select.has{border-color:var(--accent);font-weight:600}
.tbl input.inl{border:1px solid transparent;background:transparent;height:28px;padding:0 6px;font-size:13px;width:100%;min-width:120px;border-radius:2px}
.tbl input.inl:hover{border-color:var(--line-strong)}
.tbl input.inl:focus{border-color:var(--accent);outline:none;background:var(--surface)}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.pre{font-family:var(--f-mono);font-size:12px;white-space:pre-wrap;word-break:break-all;color:var(--muted)}
.conflist{margin:0;padding-left:18px;font-size:13px}

/* ---------- Korrekturen 26.10.2026 ---------- */
/* hidden-Attribut muss immer gewinnen (sonst bleiben Panel/Reiter mit display:flex sichtbar) */
[hidden]{display:none!important}
/* Kopfzeile: links Projekt, rechts Nutzer – Projektname kürzt sich, rechte Seite nie */
.suite .proj{font-weight:600;opacity:1;flex:0 1 auto}
.suite .sp{flex:1 1 0;min-width:8px}
#hr{flex:none}
/* Terminplan-Felder in der Befehlsleiste */
.planinfo{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px;align-items:stretch;padding-left:8px}
.pi{background:var(--sunk);border-radius:2px;padding:1px 8px;display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:260px}
.pi small{font-size:10px;line-height:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pi b{font-size:12.5px;line-height:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi.ttl{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:none;padding-left:0;font-weight:600}
@media (max-width:1100px){.planinfo{margin-left:0;width:100%;padding:2px 0 4px}}
/* Spaltentrenner der Vorgangsspalte */
.colgrip{position:absolute;top:0;bottom:0;width:9px;margin-left:-5px;cursor:col-resize;z-index:7;touch-action:none}
.colgrip::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:transparent}
.colgrip:hover::after,.colgrip.on::after{background:var(--accent);width:2px;left:3px}
a.cmd{text-decoration:none}
.head .lab{position:sticky}
.head .lab .colgrip{right:-5px;margin-left:0}
@media (max-width:900px){.suite .who,.suite a.hl[href="/projekte"],.suite a.hl[href="/passwort"]{display:none}}

/* ---------- Version 3 ---------- */
/* Terminplan-Zeile direkt unter der Kopfzeile, linksbündig */
.planbar{margin:0;width:auto;background:var(--surface);border-bottom:1px solid var(--line);padding-top:4px;padding-bottom:4px;flex:none;justify-content:flex-start}
.planbar .pi.ttl{padding-left:0}
/* Aufgabenpanel: Breite verstellbar */
:root{--drw:400px}
aside.drawer{width:min(var(--drw),100vw)}
.drgrip{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:31;touch-action:none}
.drgrip::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:transparent}
.drgrip:hover::after,.drgrip.on::after{background:var(--accent)}
/* Arbeitsanmeldung */
.wk-h{display:flex;align-items:baseline;gap:10px;margin:18px 0 6px;font-size:16px;font-weight:600}
.wk-h:first-child{margin-top:0}
.wk-h small{font-size:12px;font-weight:400;color:var(--muted)}
.wk-h.cur{color:var(--accent)}
.watbl td{vertical-align:top}
.watbl tr[data-open]{cursor:pointer}
.watbl .st{display:inline-block;font-size:11px;font-weight:600;border-radius:2px;padding:0 6px;line-height:18px;white-space:nowrap}
.watbl .st.o{background:var(--accent-soft);color:var(--accent)}
.watbl .st.d{background:var(--ok-soft);color:var(--ok)}
.watbl .cont{font-size:11px;color:var(--muted);font-weight:400;display:block}
.watbl .inh{color:var(--muted)}
.watbl td.note{min-width:180px;max-width:320px;white-space:pre-wrap}
/* Stammdaten */
.mdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start}
.mdlist h3{margin:0 0 8px;font-size:16px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.mdlist h3 small{font-weight:400;font-size:12px;color:var(--muted)}
.mdlist .tbl td{padding:3px 6px}
.mdlist .tbl td.mv{white-space:nowrap;width:1%}
.mdlist .tbl .inl{min-width:80px}
.iconbtn{border:none;background:transparent;width:24px;height:24px;border-radius:2px;color:var(--muted);font-size:13px;line-height:24px;padding:0}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
.iconbtn.del:hover{background:var(--bad-soft);color:var(--bad)}
.iconbtn:disabled{opacity:.3;cursor:default;background:none}
.mdadd{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.mdadd input{border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);height:28px;padding:0 6px;font-size:13px;flex:1;min-width:0}
#view-stammdaten{flex:1;min-height:0;overflow:auto}
.frame.add{cursor:copy}
.frame.add:hover{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--accent)}
/* Arbeitsanmeldung: einheitliche Zellen in allen KW-Tabellen */
.watbl{table-layout:fixed;width:100%;min-width:1250px}
.watbl th,.watbl td{padding:6px 10px;font-size:13px;line-height:18px;font-weight:400;vertical-align:top;white-space:normal;overflow-wrap:anywhere;text-align:left}
.watbl th{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.watbl .cont,.watbl .muted,.watbl .inh{font-size:13px}
.watbl .cont{display:block;font-size:12px}
.watbl .dev{font-weight:400}
.watbl td.nw{white-space:nowrap}
/* Ladebalken Terminplan-Import */
.pbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.pbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .2s}
.pbar.ind i{width:35%!important;position:absolute;animation:pbar-ind 1.2s ease-in-out infinite}
@keyframes pbar-ind{0%{left:-35%}100%{left:100%}}
#impProg p{margin:0}
/* Heatmap der Aufgaben auf der Zeitleiste */
.sheat{position:absolute;left:0;top:4px;width:100%;height:20px;border-radius:2px;pointer-events:none}
.strack::before{z-index:0}
.sband{z-index:1}
.stoday{z-index:2}
/* Wochenmarke auf der Zeitleiste */
.smark{position:absolute;top:2px;height:24px;border:2px solid var(--ink);border-radius:2px;pointer-events:none;z-index:3;min-width:4px}
.smark::before{content:"";position:absolute;left:50%;top:-8px;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink)}
.smark span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);font-size:11px;font-weight:600;line-height:16px;padding:1px 6px;border-radius:2px;white-space:nowrap;box-shadow:var(--shadow-4)}
.scrub{position:relative;z-index:6}
.sband{overflow:visible}.sband span{position:relative;z-index:1;box-shadow:var(--shadow-4)}
.stoday::after{top:-15px;left:-14px}
/* Aufgabenbeschriftung rechts neben dem Balken */
.bar{padding:0 10px 0 4px;text-overflow:clip}
.blabel{position:absolute;top:4px;line-height:22px;font-size:12px;color:var(--ink);white-space:nowrap;pointer-events:none;z-index:2}
.trow .track{overflow:hidden}
.bar.dragging~.blabel{visibility:hidden}
/* Pfeil vor dem Vorgang: Zeitachse zentrieren */
.fline{display:flex;align-items:center;gap:4px;min-width:0}
.goto{flex:none;width:18px;height:18px;border:none;border-radius:2px;background:transparent;color:var(--accent);font-size:12px;line-height:18px;padding:0}
.goto:hover{background:var(--accent-soft)}
/* offene Aufgaben außerhalb des Zeitraums: Hinweis am Rand */
.offwin{position:absolute;top:6px;font-size:11px;line-height:18px;padding:0 6px;border-radius:9px;background:var(--sunk);color:var(--muted);white-space:nowrap;z-index:2;pointer-events:none;font-family:var(--f-mono)}
.offwin.l{left:4px}.offwin.r{right:4px}