:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#eef1f5; --line:#d7dce3;
  --ink:#1a1f26; --ink-2:#5a6472; --ink-3:#8a94a3;
  --accent:#1f4e79; --accent-2:#2E7D9A;
  --ok:#2f7d4f; --warn:#b07a1e; --bad:#a83232; --bad-bg:#fbecec;
  --radius:6px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171c; --surface:#1c2027; --surface-2:#232830; --line:#333a45;
    --ink:#e6e9ee; --ink-2:#a9b2bf; --ink-3:#7b8593;
    --accent:#7ba7d0; --accent-2:#6fb3c9; --bad-bg:#3a2222;
  }
}
:root[data-theme="dark"]{
  --bg:#14171c; --surface:#1c2027; --surface-2:#232830; --line:#333a45;
  --ink:#e6e9ee; --ink-2:#a9b2bf; --ink-3:#7b8593;
  --accent:#7ba7d0; --accent-2:#6fb3c9; --bad-bg:#3a2222;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:13px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--accent)}

#topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  padding:0 16px;height:48px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
.logo{font-weight:700;letter-spacing:.06em;color:var(--accent)}
.ttl{color:var(--ink-2);font-size:12px}
#tabs{display:flex;gap:2px;flex:1 1 auto;overflow-x:auto}
#tabs button{background:none;border:0;padding:6px 11px;border-radius:var(--radius);color:var(--ink-2);
  cursor:pointer;white-space:nowrap}
#tabs button:hover{background:var(--surface-2);color:var(--ink)}
#tabs button.on{background:var(--accent);color:#fff}
.tools{display:flex;gap:6px;align-items:center;flex:0 0 auto}
button.ghost{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:5px 9px;cursor:pointer}
button.ghost:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:var(--radius);padding:6px 12px;cursor:pointer}
button.danger{background:var(--bad);color:#fff;border:0;border-radius:var(--radius);padding:6px 12px;cursor:pointer}
select,input[type=text],input[type=number],input[type=date],textarea{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 7px;max-width:100%}
textarea{width:100%;min-height:70px;resize:vertical;font-family:var(--sans)}

main{padding:16px;max-width:100%}
h2{font-size:15px;margin:0 0 4px}
h3{font-size:13px;margin:18px 0 6px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.sub{color:var(--ink-2);font-size:12px;margin:0 0 14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1 1 auto}
.muted{color:var(--ink-2)}
.tiny{font-size:11px}
.mono{font-family:var(--mono);font-size:11px}
.pill{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;border:1px solid var(--line);
  background:var(--surface-2);white-space:nowrap}
.sev-hoch{background:var(--bad);color:#fff;border-color:var(--bad)}
.sev-mittel{background:var(--warn);color:#fff;border-color:var(--warn)}
.sev-niedrig{background:var(--surface-2);color:var(--ink-2)}

#alertbar{padding:0 16px}
.alert{border-left:3px solid var(--bad);background:var(--bad-bg);padding:7px 11px;margin:8px 0;
  border-radius:0 var(--radius) var(--radius) 0;font-size:12px}
.alert.w{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}

table{border-collapse:collapse;width:100%;font-size:12px}
th,td{border-bottom:1px solid var(--line);padding:5px 7px;text-align:left;vertical-align:top}
th{background:var(--surface-2);position:sticky;top:var(--tb,48px);z-index:5;font-weight:600;cursor:pointer;white-space:nowrap}
/* Tabellen in einem eigenen Scroll-Container: sticky bezieht sich auf den Container, nicht auf die Seite */
.gantt th,.card th{top:0}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.clickable{cursor:pointer}

/* ---------- Gantt ---------- */
.gantt{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.gantt table{font-size:11px}
.gantt .lane-head{background:var(--accent);color:#fff;font-weight:600;letter-spacing:.04em}
.gantt .lane-head td{border-bottom:1px solid var(--line);padding:4px 8px}
.gname{min-width:290px;max-width:290px;position:sticky;left:0;background:var(--surface);z-index:4;
  border-right:1px solid var(--line)}
.gantt tr:hover .gname{background:var(--surface-2)}
.gantt th.q{min-width:34px;text-align:center;font-weight:500;color:var(--ink-2);padding:3px 2px}
.gantt th.q.yr{border-left:2px solid var(--line)}
.gcell{padding:0;height:22px;position:relative;border-left:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.gcell.yr{border-left:2px solid var(--line)}
.gcell.now{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.bar{position:absolute;left:1px;right:1px;top:5px;height:12px;border-radius:2px}
.bar.rd{top:3px}.bar.reg{top:3px}
.dia{position:absolute;left:50%;top:4px;width:11px;height:11px;margin-left:-5.5px;
  background:var(--ok);transform:rotate(45deg);border:1px solid #fff}
.dia.hard{background:var(--bad)}
.dia.gate{background:var(--warn);border-radius:2px;transform:none;margin-left:-5.5px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink-2);margin:8px 0}
.legend i{display:inline-block;width:14px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle}

/* ---------- Heatmap ---------- */
.hm td.v{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.u0{background:var(--surface)}
.u1{background:color-mix(in srgb,var(--ok) 22%,transparent)}
.u2{background:color-mix(in srgb,var(--warn) 32%,transparent)}
.u3{background:color-mix(in srgb,var(--bad) 30%,transparent);font-weight:600}
.u4{background:var(--bad);color:#fff;font-weight:700}

/* ---------- Panel ---------- */
#panel{position:fixed;top:var(--tb,48px);right:0;bottom:0;width:min(560px,94vw);background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-6px 0 24px rgba(0,0,0,.14);overflow-y:auto;z-index:25}
#panel.hidden{display:none}
#panel-inner{padding:14px 16px 60px}
.fld{margin-bottom:9px}
.fld label{display:block;font-size:11px;color:var(--ink-2);margin-bottom:2px}
.fld input,.fld select{width:100%}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}

/* ---------- Konflikte ---------- */
.kx{border:1px solid var(--line);border-radius:var(--radius);padding:11px;margin-bottom:10px;background:var(--surface)}
.kx.hoch{border-left:4px solid var(--bad)}
.kx.mittel{border-left:4px solid var(--warn)}
.kx.niedrig{border-left:4px solid var(--line)}
.kx.done{opacity:.5}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:8px 0}
.ab>div{background:var(--surface-2);border-radius:var(--radius);padding:7px 9px;font-size:12px}
.ab .tag{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.ab .win{outline:2px solid var(--accent)}

#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:8px 16px;border-radius:var(--radius);opacity:0;transition:opacity .25s;pointer-events:none;z-index:99;font-size:12px}
#toast.on{opacity:1}

/* ---------- Präsentationsmodus ---------- */
body.present #tabs{display:none}
body.present #topbar .tools>*:not(#btn-present){display:none}
body.present #btn-present{opacity:.45}
body.present #btn-present:hover{opacity:1}
body.present #alertbar{display:none}
body.present{--bg:#ffffff}
body.present main{padding:26px 34px}
body.present .gantt table{font-size:12px}
body.present .gname{min-width:330px;max-width:330px}
body.present .noprint{display:none}
@media print{
  #topbar,#panel,#alertbar,.noprint{display:none!important}
  body{background:#fff}
  .gantt{overflow:visible;border:0}
}
@media (max-width:760px){
  #topbar{height:auto;flex-wrap:wrap;padding:6px 10px;gap:6px}
  main{padding:10px}
  .g2,.g3{grid-template-columns:1fr}
  .ab{grid-template-columns:1fr}
}

/* ================= v2 ================= */
.tools select#entity{max-width:180px}
.tg{display:flex;align-items:center;gap:4px;white-space:nowrap;color:var(--ink-2)}
.pill.ex{background:#fff3cd;border-color:#e0b100;color:#6b5200;font-weight:600;letter-spacing:.04em}
.pill.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);border-color:var(--ok);color:var(--ok)}
tr.exrow td{background:color-mix(in srgb,#e0b100 7%,transparent)}
.btnlink{text-decoration:none;color:var(--ink);display:inline-block}
.kpis>div{min-width:170px}
.kpi{font-size:19px}.kpi.bad{color:var(--bad)}
.sumrow{background:var(--surface-2)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.bal{position:relative;height:9px;background:var(--surface-2);border-radius:3px;display:inline-block;width:70%;vertical-align:middle;margin-right:6px}
.bal>div{height:100%;border-radius:3px;opacity:.85}
.bal>span{position:absolute;top:-3px;width:2px;height:15px;background:var(--ink);margin-left:-1px}
.legend i.lg-dia{width:10px;height:10px;background:var(--ok);transform:rotate(45deg)}
.legend i.lg-dia.hard{background:var(--bad)} .legend i.lg-dia.fact{background:#9aa3ad}
.legend i.lg-gate{width:10px;height:10px;background:var(--warn)}
.legend i.u1b{background:color-mix(in srgb,var(--ok) 22%,transparent)} .legend i.u2b{background:color-mix(in srgb,var(--warn) 32%,transparent)}
.legend i.u3b{background:color-mix(in srgb,var(--bad) 30%,transparent)} .legend i.u4b{background:var(--bad)}
.dia.fact{background:#9aa3ad}

/* ---- Etappenband ---- */
.eband{position:relative;display:flex;gap:4px;padding:10px 0 22px;margin-bottom:4px}
.eb{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px 6px 5px;cursor:pointer;min-width:0;transition:border-color .15s}
.eb:hover{border-color:var(--accent)}
.eb.on{border:2px solid var(--accent);padding:5px 5px 4px;box-shadow:0 2px 8px rgba(31,78,121,.18)}
.eb.past{opacity:.55}
.eb-h{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:12px;white-space:nowrap;overflow:hidden}
.eb-h .hz{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.eb.run .hz{color:var(--accent);font-weight:700}.eb.fix .hz{color:var(--ok)}.eb.com .hz{color:var(--warn)}
.eb-s{display:flex;gap:2px;margin:5px 0 4px}
.eb-s i{flex:2;height:16px;border-radius:2px;background:color-mix(in srgb,var(--accent) 22%,var(--surface));font-style:normal;font-size:9px;
  text-align:center;line-height:16px;color:var(--ink-2);overflow:hidden}
.eb.run .eb-s i{background:color-mix(in srgb,var(--accent) 45%,var(--surface));color:#fff}
.eb-s i.pw{background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 3px,var(--line) 3px,var(--line) 5px);color:var(--ink-2)}
.eb-d{font-size:10px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eb-today{position:absolute;top:2px;bottom:10px;width:2px;background:var(--bad);z-index:3;pointer-events:none}
.eb-today span{position:absolute;bottom:-14px;left:-14px;font-size:10px;color:var(--bad);font-weight:600}
.eb-ms{position:absolute;bottom:2px;width:9px;height:9px;margin-left:-4.5px;background:var(--ok);transform:rotate(45deg);z-index:2;border:1px solid #fff}
.eb-ms.hard{background:var(--bad)} .eb-ms.gate{background:var(--warn);transform:none} .eb-ms.fact{background:#9aa3ad}
.hzp{font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:99px;background:var(--surface-2)}
.hzp.run{background:var(--accent);color:#fff}.hzp.fix{background:var(--ok);color:#fff}.hzp.com{background:var(--warn);color:#fff}

/* ---- Sprint-Board ---- */
.board{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto}
.bg-row{display:grid;min-width:760px;border-bottom:1px solid var(--line)}
.bg-head{background:var(--surface-2);position:sticky;top:0;z-index:2}
.bg-c{padding:5px 6px;border-left:1px solid var(--line);display:flex;flex-direction:column;font-size:11px;line-height:1.3;min-width:0}
.bg-c span{color:var(--ink-2);font-size:10px}
.pwc{background:repeating-linear-gradient(135deg,transparent,transparent 5px,color-mix(in srgb,var(--line) 55%,transparent) 5px,color-mix(in srgb,var(--line) 55%,transparent) 7px)}
.bg-name{padding:5px 8px;display:flex;flex-direction:column;gap:2px;font-size:12px;border-right:1px solid var(--line);min-width:0}
.bg-name button{align-self:flex-start;margin-top:3px;padding:1px 6px}
.bg-ms{min-height:22px}
.bg-ms .bg-c{flex-direction:row;flex-wrap:wrap;gap:3px;align-items:center;padding:4px 6px}
.msdot{width:10px;height:10px;background:var(--ok);transform:rotate(45deg);display:inline-block}
.msdot.hard{background:var(--bad)} .msdot.gate{background:var(--warn);transform:none} .msdot.fact{background:#9aa3ad}
.bg-person{column-gap:0}
.bg-cell{border-left:1px solid color-mix(in srgb,var(--line) 70%,transparent);cursor:cell}
.bg-cell:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.bg-cell.pwc{cursor:not-allowed}
.bg-bar{margin:3px 2px;border-radius:4px;color:#fff;font-size:11px;padding:0 7px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;z-index:1;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.bg-bar:hover{filter:brightness(1.12)}
.bg-bar.ex{background-image:repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(255,255,255,.18) 6px,rgba(255,255,255,.18) 9px)}
.bg-load{border-left:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-top:1px dashed var(--line);font-size:10px;text-align:center;
  line-height:21px;font-variant-numeric:tabular-nums;position:relative;color:var(--ink-2)}
.bg-load.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.bg-load.amb{background:color-mix(in srgb,var(--warn) 28%,transparent);color:#7a5200;font-weight:600}
.bg-load.red{background:var(--bad);color:#fff;font-weight:700}
.wip{display:inline-block;min-width:15px;height:15px;line-height:15px;border-radius:99px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;
  margin-left:4px;text-align:center}
.bg-sum{background:var(--surface-2)}
.legend i.lg-ok{background:color-mix(in srgb,var(--ok) 14%,transparent);border:1px solid var(--ok)}
.legend i.lg-amb{background:color-mix(in srgb,var(--warn) 28%,transparent)} .legend i.lg-red{background:var(--bad)}
.dl{display:grid;grid-template-columns:44px 1fr 48px;gap:8px;align-items:center;font-size:11px;margin-top:5px}
.dlb{position:relative;height:9px;background:var(--surface-2);border-radius:3px}
.dlb>div{height:100%;border-radius:3px}
.dlb>i{position:absolute;top:-3px;width:2px;height:15px;background:var(--ink)}
.dlb .u1{background:color-mix(in srgb,var(--ok) 55%,transparent)} .dlb .u2{background:var(--warn)} .dlb .u3,.dlb .u4{background:var(--bad)}

/* ---- Anleitung ---- */
.gstep{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.gstep:last-child{border-bottom:0}
.gnum{flex:0 0 26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.gbody{font-size:12px;line-height:1.5}
.gex{margin-top:6px;background:color-mix(in srgb,#e0b100 9%,var(--surface));border-left:3px solid #e0b100;padding:6px 9px;border-radius:0 var(--radius) var(--radius) 0}
.gex .tag{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#6b5200;margin-bottom:2px}
.ck{display:flex;flex-wrap:wrap;gap:6px}
.ck span{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line)}
.ck .ok{color:var(--ok);border-color:var(--ok)} .ck .no{color:var(--bad);border-color:var(--bad)}

/* ---- Modal ---- */
#modal{position:fixed;inset:0;background:rgba(10,15,25,.38);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding-top:9vh}
#modal.hidden{display:none}
#modal-inner{background:var(--surface);border-radius:8px;padding:16px 18px;width:min(620px,94vw);box-shadow:0 12px 40px rgba(0,0,0,.25);max-height:82vh;overflow:auto}
body.present #topbar .tools>*:not(#btn-present){display:none}
@media (max-width:760px){ .eband{overflow-x:auto} .eb{min-width:120px} }

.bn1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bn2{display:flex;align-items:center;gap:6px}
.bn2 button{margin:0!important;padding:0 7px!important;line-height:16px}
.bg-name .pill{align-self:flex-start}
.gbody{flex:1;min-width:0}
a.btnlink{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:5px 9px;font-size:13px}
a.btnlink:hover{border-color:var(--accent)}
.prow input.p-l{width:120px}
.bg-bar{align-self:center;height:22px;line-height:22px}

/* ================= offene, scrollbare Zeitachse ================= */
.tbar{gap:6px}
.seg{display:inline-flex;gap:0}
.seg button{border-radius:0;padding:4px 8px}
.seg button:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.seg button:last-child{border-radius:0 var(--radius) var(--radius) 0}
.gantt{overflow:auto;max-height:calc(100vh - 230px);position:relative}
body.present .gantt{max-height:calc(100vh - 150px)}
.gantt table.gt{table-layout:fixed;border-collapse:separate;border-spacing:0}
.gantt table.gt td,.gantt table.gt th{border-bottom:1px solid var(--line)}
.gantt thead th{position:sticky;top:0;z-index:6;background:var(--surface-2)}
.gantt thead tr:nth-child(2) th{top:23px}
.gantt thead th.gname{z-index:8;left:0;vertical-align:bottom}
.gantt th.yh{height:23px;text-align:left;padding:3px 6px;font-weight:700;border-left:2px solid var(--line);color:var(--ink)}
.gantt th.q{padding:3px 0;text-align:center;font-size:10px}
.gantt tr.lane-head td.gname.lane{background:var(--accent);color:#fff;position:sticky;left:0;z-index:4}
.gantt tr.lane-head td{background:var(--accent)}
.gcell.past,.hm th.past{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.gcell.ind,.hm th.ind,.gantt th.q.ind{background-image:repeating-linear-gradient(135deg,transparent,transparent 6px,color-mix(in srgb,var(--line) 38%,transparent) 6px,color-mix(in srgb,var(--line) 38%,transparent) 8px)}
.gantt th.q.now,.hm th.now{background:var(--accent)!important;color:#fff}
.legend i.lg-ind{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 3px,var(--line) 3px,var(--line) 5px);border:1px solid var(--line)}
.hmwrap{overflow-x:auto}
.hm{table-layout:fixed;border-collapse:separate;border-spacing:0}
.hm .hn{position:sticky;left:0;background:var(--surface);z-index:3;border-right:1px solid var(--line)}
.hm thead th.hn{z-index:7;background:var(--surface-2)}   /* über den klebenden Quartalsköpfen (z-index 5) */
.hm th.yh{text-align:left;padding:3px 6px;border-left:2px solid var(--line)}
.sumrow .hn{background:var(--surface-2)}
.eband-wrap{overflow-x:auto;padding-bottom:4px}
.eband{width:max-content;padding:10px 2px 24px}
.eb{position:relative;flex:0 0 auto;overflow:visible}
.eb-today{top:-6px;bottom:-6px}
.eb-today span{bottom:-16px}
.eb-ms{bottom:-17px}
@media print{ .gantt{max-height:none;overflow:visible} .hmwrap,.eband-wrap{overflow:visible} }
.eb-today span{left:3px!important;bottom:-16px}

/* Jira-Abgleich (v2.1) */
.pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);border-color:var(--warn);color:var(--warn)}
.pill.new{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.bad{color:var(--bad);font-weight:600}
.badge{display:inline-block;min-width:16px;padding:0 5px;margin-left:5px;border-radius:99px;background:var(--warn);color:#fff;
  font-size:10px;line-height:16px;text-align:center;font-weight:700;vertical-align:1px}
table.jin td{vertical-align:top}
table.jin td:first-child,table.jin th:first-child{width:22px;min-width:22px}
table.jin td:nth-child(2){min-width:260px;max-width:460px}
.jhead{margin-bottom:10px}
#pj-jira table{width:100%}
@media print{.badge{display:none}}
.jbulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;opacity:.55}
.jbulk.on{opacity:1;border-color:var(--accent)}

/* ---------- v2.2: Roadmap-Balken mit Spuren und Kürzeln, Gates, Klärliste, Gate-Pfad ---------- */
.bar{left:0;right:0;border-radius:0;font-size:9px;line-height:10px;white-space:nowrap;overflow:visible;z-index:1}
.bar.s{left:2px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.bar.e{right:2px;border-top-right-radius:3px;border-bottom-right-radius:3px}
.bar span{position:absolute;left:4px;top:50%;transform:translateY(-50%);font-weight:600;letter-spacing:.01em;pointer-events:none}
.dia{top:50%;margin-top:-5.5px;z-index:3}
.gmk{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--surface);border:1.5px solid #b45309;z-index:3;border-radius:1px}
.gmk.done{background:#b45309}
.gmk.stop{background:#9aa3ad;border-color:#6b7280}
.legend i.lg-gmk{width:9px;height:9px;background:var(--surface);border:1.5px solid #b45309;border-radius:1px}
.legend i.lg-gmk.done{background:#b45309}
tr.gms td.gname{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.badge.hi{background:var(--bad)}
.bef{display:flex;gap:10px;align-items:baseline;padding:6px 4px;border-bottom:1px solid var(--line)}
.bef:last-child{border-bottom:0}
.bef .pill{flex:0 0 auto;min-width:48px;text-align:center}
.bef .mono{flex:0 0 110px}
.bef.clickable:hover{background:var(--surface-2)}
#modal-inner.wide{width:min(1180px,96vw);max-height:90vh}
.gtabs{display:flex;gap:6px;flex-wrap:wrap}
.gtabs button .tiny{margin-left:4px;opacity:.8}
table.gitems td{vertical-align:top}
.fun{display:grid;grid-template-columns:86px 1fr 210px;gap:8px;align-items:center;font-size:12px;margin:3px 0}
.fun .fl{color:var(--ink-2)}
.fun .fb{background:var(--surface-2);height:12px;border-radius:3px;overflow:hidden}
.fun .fb i{display:block;height:100%;background:#2a78d6;border-radius:3px}
.fun .fv{font-size:11px;color:var(--ink-2)}
.gpth{display:flex;align-items:center}
.gpth .gl{display:inline-block;width:14px;height:2px;background:var(--line)}
.gn{display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;min-width:34px}
.gn i{display:flex;align-items:center;justify-content:center;width:30px;height:20px;border-radius:10px;font-style:normal;font-size:10px;font-weight:700;
  border:1.5px dashed var(--line);color:var(--ink-3,#8a93a0);background:var(--surface)}
.gn span{font-size:9px;color:var(--ink-2);height:11px}
.gn.done i{background:#0ca30c;border:1.5px solid #0ca30c;color:#fff}
.gn.cond i{background:#fab219;border:1.5px solid #c98500;color:#0b0b0b}
.gn.plan i{border:1.5px solid #2a78d6;color:#2a78d6}
.gn.late i{border:1.5px solid #d03b3b;color:#d03b3b}
.gn.hold i{background:#9aa3ad;border:1.5px solid #6b7280;color:#fff}
.gn.kill i{background:#d03b3b;border:1.5px solid #d03b3b;color:#fff}
.gn.sm i{width:18px;height:12px}
.gn:hover i{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.glegend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;margin-top:6px}
.glegend>span{display:inline-flex;align-items:center;gap:4px}
.gcat{border-top:1px solid var(--line);padding:10px 0}
.gcat table{margin-top:6px}
.pill.src-jira{border-color:#2a78d6;color:#2a78d6}
.pill.src-tool{border-color:#1baf7a;color:#127a55}
.pill.src-vorschlag{border-style:dashed}
table.gpath td{vertical-align:middle}
.bar.lb{z-index:2}
#modal th,#panel th{position:static}

/* v2.3 Projektleitung in der Roadmap-Namensspalte */
.gname .pl{font-size:12px;color:var(--ink);font-weight:500;margin:1px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gname .pl-k{display:inline-block;font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--line);
  border-radius:3px;padding:0 3px;margin-right:5px;line-height:13px;vertical-align:1px}
#pl-new.hidden{display:none}

/* v2.4 Anmeldung und Rollen */
.authpage{display:flex;justify-content:center;padding:60px 16px}
.authpage .card{max-width:460px;width:100%;text-align:left}
.authpage h2{margin-top:0}
a.btnlink{display:inline-block;background:var(--accent,#1f4e79);color:var(--surface,#fff);text-decoration:none;padding:8px 14px;border-radius:var(--radius,6px);font-weight:500}
a.btnlink:hover{filter:brightness(1.1)}
#who{display:flex;align-items:center;gap:6px;margin-left:6px;font-size:12px;color:var(--ink-2)}
#who .who-n{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
body.login #topbar .tools > *:not(#who){display:none}
body.role-lesen .noro{display:none !important}
body:not(.role-admin) .adm{display:none !important}
#users-card h4{margin:12px 0 4px;font-size:12px;color:var(--ink-2)}
#users-card table td{vertical-align:middle}
@media (max-width:1700px){ body.authed .ttl{display:none} }

/* v2.5 Kapazität: Quartalsdetail */
.hm th.q.clickable:hover,.hm td.v.clickable:hover{outline:2px solid var(--accent);outline-offset:-2px;cursor:pointer}
#modal-inner h4{margin:14px 0 4px;font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
table.qd td,table.qd th{white-space:nowrap}
table.qd td:first-child{white-space:normal;min-width:220px}

/* Planungsweg in der Anleitung (v2.6) */
.pw{display:flex;flex-direction:column;margin:8px 0 14px}
.pw-lvl{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--lvl);border-radius:var(--radius);padding:10px 12px}
.pw-lvl.l1{--lvl:#2a78d6}.pw-lvl.l2{--lvl:#1baf7a}.pw-lvl.l3{--lvl:#c98500}.pw-lvl.l4{--lvl:#d55181}
.pw-n{flex:0 0 28px;height:28px;border-radius:50%;background:var(--lvl);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.pw-b{flex:1;min-width:0}
.pw-g{display:grid;grid-template-columns:max-content 1fr;gap:2px 14px;margin-top:4px;font-size:12px}
.pw-k{color:var(--ink-3)}
.pw-hand{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:7px 0 7px 46px;font-size:12px}
.pw-down,.pw-up{display:flex;gap:6px;align-items:flex-start}
.pw-down span,.pw-up span{font-weight:700;color:var(--accent)}
.pw-up{color:var(--ink-2)}
.gsoon{margin-top:6px;font-size:12px;color:var(--ink-2)}
@media (max-width:760px){.pw-hand{grid-template-columns:1fr;padding-left:10px}.pw-g{grid-template-columns:1fr}}
@media print{.pw-lvl{break-inside:avoid}}

/* v2.6.3 feste Quartalsstunden im Vorhaben */
#qp.hidden{display:none}
#qp{margin:4px 0 10px;padding:8px}
table.qp{border-collapse:collapse;font-size:12px}
table.qp th,table.qp td{padding:2px 4px;white-space:nowrap}
table.qp input.qp-in{width:62px;text-align:right;font-variant-numeric:tabular-nums}
table.qp input.qp-in::placeholder{color:var(--ink-3)}
table.qp input.qp-in:not(:placeholder-shown){font-weight:600;border-color:var(--accent)}
.pin{color:var(--accent);font-size:9px;margin-left:2px;vertical-align:super}

/* v2.6.5 Vorhaben als Dialog in der Mitte statt rechts angedockt */
#panel{inset:0;width:auto;background:rgba(10,15,25,.38);border-left:0;box-shadow:none;overflow:hidden;z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px 0}
#panel.hidden{display:none}
#panel-inner{background:var(--surface);border-radius:8px;width:min(980px,96vw);max-height:92vh;overflow-y:auto;
  overscroll-behavior:contain;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:14px 22px 28px}
body.noscroll{overflow:hidden}
#cap-proj .hn.clickable:hover{background:var(--surface-2)}
/* Kopf (Schlüssel, ✕) und Speichern bleiben im Dialog sichtbar */
#panel-inner > .row:first-child{position:sticky;top:-14px;z-index:6;background:var(--surface);margin:-14px -22px 6px;padding:14px 22px 8px;border-bottom:1px solid var(--line)}
#panel-inner > .row:last-child{position:sticky;bottom:-28px;z-index:6;background:var(--surface);margin:10px -22px -28px;padding:10px 22px 18px;border-top:1px solid var(--line)}

/* ================= Telefon (bis 760 px) ================= */
@media (max-width:760px){
  :root{--tb:86px}
  /* Kopfleiste in zwei Zeilen: Marke und Werkzeuge, darunter die Reiter als Wischleiste */
  #topbar{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand tools" "tabs tabs";
    height:var(--tb);align-content:center;padding:6px 10px 4px;gap:6px 10px}
  .brand{grid-area:brand}
  .ttl{display:none}
  .tools{grid-area:tools;justify-content:flex-end;min-width:0;gap:6px}
  .tools select#entity{flex:1 1 auto;min-width:0;max-width:170px}
  #showex-l,#btn-present{display:none}          /* Beispieldaten und Präsentationsmodus sind Arbeitsplatz-Funktionen */
  #tabs{grid-area:tabs;margin:0 -10px;padding:0 10px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #tabs::-webkit-scrollbar{display:none}
  #tabs button{padding:8px 12px}
  /* Bedienung mit dem Finger: Mindesthöhe, und 16 px Schrift, sonst zoomt iOS beim Antippen in die Seite */
  input[type=text],input[type=number],input[type=date],input[type=search],select,textarea{font-size:16px;min-height:38px}
  button.ghost,button.primary,button.danger{min-height:38px}
  main{padding:10px}
  h2{font-size:17px}
  .kpis{display:grid!important;grid-template-columns:1fr 1fr;gap:12px}
  .kpis>div{min-width:0}
  /* Breite Tabellen scrollen in ihrer Karte, die Seite selbst bleibt fest */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Roadmap: schmale Namensspalte, der Zeitstrahl bekommt den Platz */
  .gname{min-width:150px;max-width:150px;font-size:11px}
  .gantt{max-height:calc(100dvh - var(--tb) - 40px)}
  /* Kapazität: Zeilenbeschriftung kurz, Details stehen im Klick auf die Zeile */
  .hm .hn{font-size:11px}
  .hm .hn .tiny{display:none}
  .hm thead th.hn{white-space:normal;vertical-align:bottom}
  /* Panel und Dialog über die volle Breite */
  #panel{width:100vw}
  #modal{align-items:flex-end;padding-top:0}
  #modal-inner{width:100vw;max-height:calc(100dvh - 24px);border-radius:12px 12px 0 0;padding:14px}
}

/* nuARC-Wortmarke in der Kopfleiste: farbig auf hell, negativ auf dunkel, Trennstrich zu MLG */
.brand{align-items:center}
.nuarc{display:flex;align-items:center;padding-right:10px;margin-right:2px;border-right:1px solid var(--line)}
.nuarc img{display:block;height:18px;width:auto}
.nl-dunkel{display:none!important}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nl-hell{display:none!important} :root:not([data-theme="light"]) .nl-dunkel{display:block!important} }
:root[data-theme="dark"] .nl-hell{display:none!important}
:root[data-theme="dark"] .nl-dunkel{display:block!important}
@media (max-width:760px){ .nuarc img{height:15px} .nuarc{padding-right:8px} }
@media print{ .nuarc{display:none} }