/* Farben wie ursprünglich; nur die Sidebar ist blaugrau (Alternative: config 'theme' => 'gruengrau') */
:root, :root[data-theme="blaugrau"]{
  --bg:#f6f7fb; --surface:#fff; --border:#c9cde0; --line:#eceef6; --head:#f1f2fb; --phase-row:#fafbff;
  --text:#1f2430; --muted:#6b7288;
  --topbar:#222; --topbar-text:#fff; --topbar-link:#cfd4ff;
  --side:#e6ecf0; --side-active:#4f6d85; --side-disabled:#97a6b2;
  --accent:#4a4fc9; --accent-hover:#3b40b0; --accent-soft:#e0e2f7;
  --today:#e05a47; --ok:#82a870; --over:#c0392b; --cap:#1b5e4a;
  --danger-bg:#fde8e8; --danger:#9b1c1c; --success-bg:#e3eee8; --success:#2f6a4f;
  --p-VS:#9aa5d6; --p-VP:#6b8fd6; --p-GRB:#d6a56b; --p-BP:#4a4fc9; --p-A:#3a9d7a; --p-SP:#9a7ad6; --p-GL:#9aa0b5;
}
:root[data-theme="gruengrau"]{
  --side:#e5ece8; --side-active:#5a7a6c; --side-disabled:#97a89f;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--accent)}
.topbar{display:flex;align-items:center;gap:1rem;background:var(--topbar);color:var(--topbar-text);padding:.7rem 1rem}
.topbar a{color:var(--topbar-text);text-decoration:none}
.topbar a:hover{text-decoration:underline}
.spacer{flex:1}
.inline{display:inline;margin:0}
button.link{background:none;border:0;color:var(--topbar-link);cursor:pointer;font:inherit;padding:0}
.shell{display:flex;min-height:calc(100vh - 48px)}
.sidebar{width:230px;background:var(--side);padding:.5rem 0;display:flex;flex-direction:column}
.sidebar a,.sidebar .disabled{padding:.8rem 1.2rem;text-decoration:none;color:var(--text)}
.sidebar a.active{background:var(--side-active);color:#fff}
.sidebar .disabled{color:var(--side-disabled)}
.content{flex:1;padding:1.5rem 2rem;min-width:0}
.muted{color:var(--muted)}
.cards{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.card{background:var(--surface);border-radius:8px;padding:1rem 1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.08);min-width:160px}
.card .num{font-size:2rem;font-weight:600;color:var(--accent)}

.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card,.form-card{background:var(--surface);padding:2rem;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.1);width:100%;max-width:380px}
.form-card{box-shadow:0 1px 3px rgba(0,0,0,.08);max-width:440px}
.login-card h1{margin:.2rem 0}
.login-card label,.form-card label{display:block;margin:1rem 0 0;font-size:.9rem}
.login-card input,.form-card input{width:100%;padding:.6rem;margin-top:.3rem;border:1px solid var(--border);border-radius:6px;font:inherit;background:#fff;color:var(--text)}
.login-card input:focus,.form-card input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.login-card button,.form-card button{width:100%;margin-top:1.4rem;padding:.7rem;background:var(--accent);color:#fff;border:0;border-radius:6px;font:inherit;cursor:pointer}
.login-card button:hover,.form-card button:hover{background:var(--accent-hover)}
.alert{background:var(--danger-bg);color:var(--danger);padding:.6rem .8rem;border-radius:6px;margin-top:.8rem;font-size:.9rem}
.success{background:var(--success-bg);color:var(--success);padding:.6rem .8rem;border-radius:6px;margin-top:.8rem;font-size:.9rem}
.hint{font-size:.82rem;color:var(--muted);margin:.8rem 0 0}

/* Portfolio / Gantt */
.pf-head h1{margin:0 0 .6rem}
.pf-controls{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.pf-controls input,.pf-controls select{padding:.35rem .5rem;border:1px solid var(--border);border-radius:6px;font:inherit;background:#fff;color:var(--text)}
.pf-controls input[type=number]{width:5.2rem}
.pf-controls button{padding:.4rem .8rem;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;font:inherit;color:var(--text)}
.pf-controls button:hover{background:var(--head)}
.pf-controls button[type=submit]{background:var(--accent);color:#fff;border-color:var(--accent)}
.pf-controls button[type=submit]:hover{background:var(--accent-hover)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;margin:.7rem 0;font-size:.85rem;color:var(--muted)}
.legend i{display:inline-block;width:.9rem;height:.7rem;border-radius:2px;margin-right:.3rem;vertical-align:middle}
.lg-cap{background:var(--cap)}.lg-over{background:var(--over)}
.ph-VS{background:var(--p-VS)}.ph-VP{background:var(--p-VP)}.ph-GRB{background:var(--p-GRB)}.ph-BP{background:var(--p-BP)}.ph-A{background:var(--p-A)}.ph-SP,.ph-MN{background:var(--p-SP)}.ph-GL{background:var(--p-GL)}
.gantt{background:var(--surface);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:auto;height:calc(100vh - 230px);min-height:420px;position:relative}
.g-inner{position:relative;width:calc(var(--lw) + var(--tw));min-height:100%;display:flex;flex-direction:column}
.g-row{display:flex;height:30px;border-bottom:1px solid var(--line)}
.g-label{position:sticky;left:0;z-index:3;width:var(--lw);flex:none;background:var(--surface);border-right:1px solid var(--border);padding:0 .5rem;display:flex;align-items:center;gap:.3rem;overflow:hidden;white-space:nowrap;font-size:.85rem}
.g-label a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.g-label a:hover{text-decoration:underline}
.g-label .nr,.nr{font-weight:600;color:var(--accent)}
.g-line{position:relative;width:var(--tw);flex:none;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:var(--cw) 100%}
.g-header{position:sticky;top:0;z-index:5;background:var(--surface);height:34px;border-bottom:1px solid var(--border)}
.g-header .g-line{display:flex;background-image:none}
.g-col{width:var(--cw);flex:none;text-align:center;font-size:.8rem;color:var(--muted);display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line)}
.g-today{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--today);z-index:2;pointer-events:none}
.g-toggle{width:1.1rem;flex:none;border:0;background:none;padding:0;cursor:pointer;color:var(--muted);font-size:.9rem}
.g-toggle[aria-label]{transition:transform .1s}
.g-group.open>.g-prog .g-toggle{transform:rotate(90deg)}
.g-phase{display:none;background:var(--phase-row)}
.g-group.open .g-phase{display:flex}
.g-phase .g-label{background:var(--phase-row);padding-left:2.2rem;font-size:.8rem}
.g-group[hidden]{display:none}
.bar{position:absolute;top:8px;height:14px;border-radius:3px}
.bar-prog{background:var(--p-GL)}
.g-phase .bar{top:9px;height:12px}
.tag{display:inline-block;min-width:2.2rem;text-align:center;color:#fff;border-radius:3px;font-size:.7rem;padding:1px 4px}
.g-histo{position:sticky;bottom:0;z-index:5;background:var(--surface);border-top:2px solid var(--topbar);margin-top:auto}
.g-hrow{height:62px}
.g-hrow .g-label{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.g-hrow .g-line{display:flex;background-image:none}
.hcol{position:relative;align-items:flex-end;flex-direction:column-reverse;justify-content:flex-start;padding:0 1px}
.hb{width:100%;flex:none}
.hb-ok{background:var(--ok)}.hb-over{background:var(--over)}
.hcap{position:absolute;left:0;right:0;height:2px;background:var(--cap)}

/* Programm-Detail */
.detail-cards .card{min-width:150px}
.tbl{border-collapse:collapse;background:var(--surface);font-size:.88rem}
.tbl th,.tbl td{padding:.4rem .7rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th{background:var(--head);text-align:left}
.tbl .r{text-align:right}
.tbl tr.tot td{background:var(--bg);font-weight:600}
.tbl-wrap{overflow:auto;max-width:100%;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tbl-m .sticky{position:sticky;left:0;background:var(--surface);z-index:1;border-right:1px solid var(--border)}
.tbl-m th.sticky{background:var(--head)}

/* Formulare / Bearbeiten */
.btn{padding:.35rem .7rem;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;font:inherit;font-size:.85rem;color:var(--text)}
.btn:hover{background:var(--head)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-danger{color:var(--danger)}
.nw{white-space:nowrap}
.inline-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0 1.5rem}
.tbl input,.tbl select,.inline-form input,.inline-form select,.meta-form input,.meta-form select{padding:.3rem .45rem;border:1px solid var(--border);border-radius:5px;font:inherit;font-size:.85rem;background:#fff;color:var(--text)}
.tbl input[type=number]{width:6.5rem;text-align:right}
.flash{max-width:900px;word-break:break-word}
.meta-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem 1rem;background:var(--surface);padding:1rem;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:1rem}
.meta-form label{font-size:.8rem;color:var(--muted);display:flex;flex-direction:column;gap:.2rem}
.meta-form .full{grid-column:1/-1}
.fin-sum{display:flex;gap:1rem;flex-wrap:wrap;margin:.5rem 0 1rem}
details.edit summary{cursor:pointer;color:var(--accent);margin:.5rem 0}

/* Steckbrief */
.ph-title{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.ph-title h1{margin:.2rem 0}
.pill{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:.15rem .7rem;font-size:.8rem}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--border);margin:.8rem 0 1rem}
.tabs a{padding:.6rem 1.1rem;text-decoration:none;color:var(--muted);text-transform:uppercase;font-size:.85rem;letter-spacing:.03em;border-bottom:3px solid transparent}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent);background:var(--accent-soft)}
.steck-bar{display:flex;justify-content:flex-end;margin-bottom:.8rem}
.steck-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
@media (max-width:1300px){.steck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.steck-grid{grid-template-columns:minmax(0,1fr)}}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:1.2rem 1.3rem 1.3rem}
.scard h3{margin:0 0 .4rem;font-size:1.05rem}
.scard h4{margin:1.1rem 0 .3rem;font-size:.95rem}
.wide-card{grid-column:1/-1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}

/* Felder mit Label auf dem Rahmen */
.mf{position:relative;margin:1.15rem 0 0}
.mf input,.mf select,.mf textarea{width:100%;padding:.85rem .85rem .8rem;border:1px solid #c3c8d2;border-radius:4px;font:inherit;font-size:.97rem;background:#fff;color:var(--text);appearance:none;-webkit-appearance:none;line-height:1.35;display:block}
.mf textarea{resize:none;overflow:hidden;min-height:3.05rem}
.mf label{position:absolute;left:.6rem;top:.88rem;padding:0 .3rem;background:#fff;color:#7a8190;pointer-events:none;transition:all .12s;font-size:.97rem;line-height:1}
.mf input:not(:placeholder-shown)+label,.mf textarea:not(:placeholder-shown)+label,
.mf input:focus+label,.mf textarea:focus+label,.mf select:focus+label,.mf.has-value label{top:-.45rem;font-size:.72rem;color:#5b6270}
.mf.dt:not(.has-value) input:not(:focus){color:transparent}
.mf.sel:not(.has-value) select{color:transparent;-webkit-text-fill-color:transparent}
.mf select option{color:var(--text)}
.mf select:disabled{opacity:1;color:var(--text);-webkit-text-fill-color:var(--text);cursor:default}
.mf.sel:not(.has-value) select:disabled{-webkit-text-fill-color:transparent}
.mf .caret{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#4b5266;font-size:.9rem}
.mf input:focus,.mf select:focus,.mf textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.mf input:focus+label,.mf textarea:focus+label,.mf select:focus+label{color:var(--accent)}
.steck:not(.editing) .mf input,.steck:not(.editing) .mf select,.steck:not(.editing) .mf textarea{border-color:#dde1e8;cursor:default}
.steck:not(.editing) .mf input:focus,.steck:not(.editing) .mf textarea:focus{box-shadow:none;border-color:#c3c8d2}
.steck:not(.editing) .mf .caret{color:#9aa0ae}
.stat{display:flex;align-items:center;gap:.8rem;margin:1.15rem 0 0}
.stat-ico{width:2.6rem;height:2.6rem;border-radius:8px;background:var(--head);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;flex:none}
.stat .sl{font-size:.78rem;color:#5b6270}.stat .sv{font-size:.97rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.4rem;margin:.3rem 0}
.kv dt{color:#5b6270}.kv dd{margin:0}
.steck .edit-actions{display:none}
.steck.editing .edit-actions{display:inline-flex;gap:.5rem}
.steck.editing .btn-edit{display:none}
.tbl.sum{width:100%}
.sbar{display:inline-block;height:10px;background:var(--p-VP);border-radius:2px;vertical-align:middle;opacity:.55}

/* Zeilen-Aktionen in der Zeitleiste (Stift, Plus) */
.g-label .g-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.g-actions{display:none;gap:.3rem;margin-left:auto;flex:none}
.g-prog:hover .g-actions{display:flex}
.g-prog:hover .g-label{background:var(--accent-soft)}
.g-actions a{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:4px;text-decoration:none;color:var(--accent);font-size:1rem}
.g-actions a:hover{background:var(--accent);color:#fff;text-decoration:none}

/* Dropdown mit Suche */
.cb .cb-input{padding-right:3.6rem;cursor:default}
.steck.editing .cb .cb-input{cursor:text}
.cb .cb-panel{position:absolute;left:0;right:0;top:calc(100% + 2px);background:#fff;border:1px solid #d5d9e2;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.18);max-height:280px;overflow:auto;z-index:30}
.cb-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;cursor:pointer;font-size:.95rem}
.cb-item:hover{background:#f1f2fb}
.cb-item.sel{background:#e6e8fb}
.cb-item[hidden]{display:none}
.cb-item input[type=checkbox]{width:1.15rem;height:1.15rem;margin:0;pointer-events:none;flex:none}
.cb-empty{padding:.7rem .9rem;color:#8a90a0}
.av{width:2.1rem;height:2.1rem;border-radius:50%;background:#cfd0dc;color:#2b2f3b;display:flex;align-items:center;justify-content:center;font-size:.78rem;flex:none}
.cb-dot{width:1rem;height:1rem;border-radius:3px;flex:none}
.cb-sw{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:1.05rem;height:1.05rem;border-radius:3px;pointer-events:none;z-index:1}
.cb.has-sw .cb-input{padding-left:2.5rem}
.cb-clear{position:absolute;right:2.3rem;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:1rem;color:#333;padding:.25rem;display:none;line-height:1}
.steck.editing .cb.has-value .cb-clear{display:block}
.cb.open .caret{transform:translateY(-50%) rotate(180deg)}
.mf.cb.open label{top:-.45rem;font-size:.72rem;color:var(--accent)}
.lists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;margin-top:.6rem}
.list-card{background:var(--surface);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.list-card textarea{width:100%;padding:.5rem;border:1px solid var(--border);border-radius:5px;font:inherit;font-size:.88rem;resize:vertical}
.cb-item input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;width:1.15rem;height:1.15rem;padding:0;border:0;display:inline-block;accent-color:var(--accent);box-shadow:none}

/* Finanzen */
.tabs.sub{margin:.4rem 0 .8rem;border-bottom:1px solid var(--border)}
.fin-tbl select,.fin-tbl input[type=text],.fin-tbl input[type=date]{width:100%;min-width:9rem}
.fin-tbl input.amt{min-width:9rem;text-align:right}
.fin-tbl tr.new-row td{background:var(--accent-soft)}