/* Fristen-Dashboard – Styles. Farbwelt und Grundkomponenten aus dem bisherigen statischen Dashboard. */

:root{
  --paper:#F4F5F1;
  --surface:#FFFFFF;
  --surface-2:#ECEEE8;
  --ink:#1B2420;
  --ink-soft:#4B554E;
  --line:#D8DBD2;
  --petrol:#1E4A46;
  --petrol-ink:#153634;
  --amber:#B4711A;
  --amber-bg:#FBF0DF;
  --red:#AE3327;
  --red-bg:#FBE9E6;
  --green:#2C7A52;
  --green-bg:#E7F3EB;
  --grey:#6B7268;
  --grey-bg:#ECEEE8;
  --focus:#1E4A46;
  --radius:10px;
  --shadow:0 10px 30px rgba(15,25,20,.12);

  /* Status-Punkte (manueller Status): kategoriale Farben, validiert, immer mit Textlabel */
  --st-grey:#6B7268;
  --st-slate:#4B554E;
  --st-blue:#2a78d6;
  --st-amber:#eda100;
  --st-violet:#4a3aa7;
  --st-green:#008300;
  --st-magenta:#e87ba4;
  --st-aqua:#1baf7a;
  --st-red:#e34948;

  /* Heatmap: eine Farbe, hell → dunkel */
  --heat-0:#ECEEE8;
  --heat-1:#cde2fb;
  --heat-2:#9ec5f4;
  --heat-3:#6da7ec;
  --heat-4:#3987e5;
  --heat-5:#256abf;
  --heat-6:#184f95;
  --heat-ink-dark:#FFFFFF;

  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14181A; --surface:#1B2124; --surface-2:#20272A; --ink:#EDEFEA; --ink-soft:#A9B1A9;
    --line:#323B3A; --petrol:#5FA79E; --petrol-ink:#8CC6BC; --amber:#E0A452; --amber-bg:#3A2E17;
    --red:#E08579; --red-bg:#3C201C; --green:#7FC49B; --green-bg:#1D3327; --grey:#96A096; --grey-bg:#242B2A;
    --focus:#5FA79E; --shadow:0 10px 30px rgba(0,0,0,.45);
    --st-grey:#96A096; --st-slate:#7d857d; --st-blue:#3987e5; --st-amber:#c98500; --st-violet:#9085e9;
    --st-green:#008300; --st-magenta:#d55181; --st-aqua:#199e70; --st-red:#e66767;
    --heat-0:#242B2A; --heat-1:#104281; --heat-2:#184f95; --heat-3:#256abf; --heat-4:#3987e5; --heat-5:#6da7ec; --heat-6:#9ec5f4;
    --heat-ink-dark:#0d1a2b;
  }
}
:root[data-theme="dark"]{
  --paper:#14181A; --surface:#1B2124; --surface-2:#20272A; --ink:#EDEFEA; --ink-soft:#A9B1A9;
  --line:#323B3A; --petrol:#5FA79E; --petrol-ink:#8CC6BC; --amber:#E0A452; --amber-bg:#3A2E17;
  --red:#E08579; --red-bg:#3C201C; --green:#7FC49B; --green-bg:#1D3327; --grey:#96A096; --grey-bg:#242B2A;
  --focus:#5FA79E; --shadow:0 10px 30px rgba(0,0,0,.45);
  --st-grey:#96A096; --st-slate:#7d857d; --st-blue:#3987e5; --st-amber:#c98500; --st-violet:#9085e9;
  --st-green:#008300; --st-magenta:#d55181; --st-aqua:#199e70; --st-red:#e66767;
  --heat-0:#242B2A; --heat-1:#104281; --heat-2:#184f95; --heat-3:#256abf; --heat-4:#3987e5; --heat-5:#6da7ec; --heat-6:#9ec5f4;
  --heat-ink-dark:#0d1a2b;
}

html{scroll-padding-top: env(safe-area-inset-top, 0px); box-sizing:border-box;}
*,*:before,*:after{box-sizing:inherit;}
[hidden]{display:none !important;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; font-size:14px;
}
h1,h2,h3{font-family:"Source Serif 4", Georgia, "Times New Roman", serif; margin:0; font-weight:600;}
a{color:var(--petrol);}
::selection{background:var(--petrol); color:#fff;}
button, select, input, textarea{font-family:inherit; font-size:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.muted{color:var(--ink-soft);}
.nowrap{white-space:nowrap;}
.num{font-variant-numeric:tabular-nums;}

#app{max-width:1440px; margin:0 auto; padding:24px 20px 64px;}
.boot{padding:80px 20px; text-align:center; color:var(--ink-soft);}

/* ---- Kopfzeile & Navigation ------------------------------------------------------------- */
header.top{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  flex-wrap:wrap; margin-bottom:14px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
header.top .title-block h1{font-size:26px; letter-spacing:-0.01em;}
header.top .title-block p{margin:6px 0 0; color:var(--ink-soft); font-size:14px;}
.top-actions{display:flex; gap:8px; align-items:center;}
.user-menu{position:relative;}
.menu{
  position:absolute; right:0; top:calc(100% + 6px); min-width:220px; z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column;
}
.menu-head{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; font-size:13px;}
.menu-head strong{display:block; font-size:14px;}
.menu button{
  text-align:left; background:none; border:none; padding:8px 10px; border-radius:6px; cursor:pointer;
}
.menu button:hover{background:var(--surface-2);}

nav.views{
  display:flex; gap:2px; overflow-x:auto; overflow-y:hidden; margin-bottom:14px; border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
nav.views a{
  padding:10px 14px; text-decoration:none; color:var(--ink-soft); font-weight:500; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
nav.views a:hover{color:var(--ink);}
nav.views a.active{color:var(--petrol-ink); border-bottom-color:var(--petrol);}
nav.views .count{font-size:11.5px; background:var(--red-bg); color:var(--red); border-radius:999px; padding:1px 7px; margin-left:4px; font-weight:600;}

/* ---- Buttons & Formulare ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:500; font-size:13.5px; line-height:1.2;
}
.btn:hover{border-color:var(--petrol);}
.btn:disabled{opacity:.55; cursor:default;}
.btn-primary{background:var(--petrol); border-color:var(--petrol); color:#fff;}
:root[data-theme="dark"] .btn-primary{color:#0e1a18;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-primary{color:#0e1a18;} }
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;}
.btn-danger{color:var(--red); border-color:var(--line);}
.btn-danger:hover{border-color:var(--red);}
.btn-sm{padding:5px 10px; font-size:12.5px;}
.btn-block{width:100%;}
.link-btn{background:none; border:none; padding:0; color:var(--petrol); cursor:pointer; font-weight:500;}
.link-btn:hover{text-decoration:underline;}

.field{display:flex; flex-direction:column; gap:5px; font-size:13px;}
.field > span{color:var(--ink-soft); font-weight:500;}
.field input, .field select, .field textarea,
.inline-input{
  padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink);
  width:100%;
}
.field textarea{min-height:72px; resize:vertical;}
.field .hint{font-size:12px; color:var(--ink-soft);}
.field.check{flex-direction:row; align-items:center; gap:8px;}
.field.check input{width:auto;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
.form-grid .full{grid-column:1 / -1;}
.form-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap;}
.form-error{color:var(--red); font-size:13px; min-height:1em;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }

/* ---- Login ------------------------------------------------------------------------------ */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px 16px;}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:14px;
}
.login-card h1{font-size:24px;}
.login-card p{margin:0;}

/* ---- Filter ----------------------------------------------------------------------------- */
.controls{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:16px;
}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
.tab{
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft);
  padding:6px 12px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:500;
}
.tab.active{background:var(--petrol); border-color:var(--petrol); color:#fff;}
:root[data-theme="dark"] .tab.active{color:#0e1a18;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tab.active{color:#0e1a18;} }
.filter-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.filter-row input[type="search"]{
  flex:1 1 220px; min-width:180px; padding:8px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--paper); color:var(--ink);
}
.filter-row select{
  padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); max-width:210px; min-width:0;
}
.filter-row select.set, .filter-row input.set{border-color:var(--petrol); box-shadow:inset 0 0 0 1px var(--petrol);}
.filter-row .reset{
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  padding:8px 12px; border-radius:8px; cursor:pointer; font-size:13px;
}
.filter-row .reset:hover{color:var(--red); border-color:var(--red);}
@media (max-width:640px){
  .filter-row select, .filter-row .reset{flex:1 1 calc(50% - 8px); max-width:none;}
  #app{padding:16px 16px 48px;}
  header.top .title-block h1{font-size:22px;}
}
.result-count{font-size:13px; color:var(--ink-soft);}
.view-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.view-head h2{font-size:19px;}
.view-tools{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.view-tools select{padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper);}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);}
.panel-pad{padding:14px 16px;}
.loading{opacity:.55; transition:opacity .15s;}

/* ---- KPIs ------------------------------------------------------------------------------- */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:16px;}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; cursor:pointer; text-align:left; transition:border-color .15s ease;
}
.kpi:hover{border-color:var(--petrol);}
.kpi.active{border-color:var(--petrol); box-shadow:inset 0 0 0 1px var(--petrol);}
.kpi .num{font-family:"IBM Plex Sans", system-ui, sans-serif; font-size:26px; font-weight:600; line-height:1;}
.kpi .lbl{margin-top:6px; font-size:12.5px; color:var(--ink-soft); line-height:1.35;}
.kpi.overdue .num{color:var(--red);}
.kpi.soon .num{color:var(--amber);}
.kpi.done .num{color:var(--green);}
.kpi.recurring .num{color:var(--grey);}
.kpi.upcoming .num{color:var(--petrol-ink);}
@media (max-width:860px){ .kpis{grid-template-columns:repeat(2,1fr);} }

/* ---- Badges ----------------------------------------------------------------------------- */
.badge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap;}
.badge.overdue{background:var(--red-bg); color:var(--red);}
.badge.soon{background:var(--amber-bg); color:var(--amber);}
.badge.upcoming{background:var(--grey-bg); color:var(--ink-soft);}
.badge.done{background:var(--green-bg); color:var(--green);}
.badge.recurring{background:var(--surface-2); color:var(--grey); border:1px solid var(--line);}
.badge.cancelled{background:var(--surface-2); color:var(--grey); text-decoration:line-through;}
.status-pill{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; white-space:nowrap; color:var(--ink);}
.status-pill i{width:8px; height:8px; border-radius:50%; background:var(--c, var(--st-grey)); flex:none;}
.src-tag{font-size:11px; color:var(--ink-soft);}
.chip{display:inline-block; font-size:11px; padding:2px 7px; border-radius:6px; background:var(--surface-2); color:var(--ink-soft);}

/* ---- Tabelle ---------------------------------------------------------------------------- */
.table-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
  text-align:left; padding:10px 12px; background:var(--surface-2); color:var(--ink-soft);
  font-weight:600; font-size:12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
thead th[data-sort]{cursor:pointer; user-select:none;}
thead th[data-sort]:hover{color:var(--ink);}
thead th.sorted{color:var(--petrol-ink);}
thead th.sorted::after{content:" ↑";}
thead th.sorted.desc::after{content:" ↓";}
tbody tr{border-bottom:1px solid var(--line);}
tbody tr:last-child{border-bottom:none;}
table.clickable tbody tr{cursor:pointer;}
table.clickable tbody tr:hover{background:var(--surface-2);}
td{padding:10px 12px; vertical-align:top;}
td.date-cell{white-space:nowrap; font-variant-numeric:tabular-nums;}
td.date-cell .d{margin-top:4px; color:var(--ink-soft); font-size:12px;}
td.entity-cell{font-weight:500; max-width:260px;}
td.aufgabe-cell{color:var(--ink-soft); max-width:340px; white-space:pre-line;}
.empty-state{padding:48px 20px; text-align:center; color:var(--ink-soft);}
.empty-state h3{margin-bottom:6px; color:var(--ink);}
.more-row{padding:12px; text-align:center; border-top:1px solid var(--line);}
@media (max-width:640px){
  .table-wrap table.responsive thead{display:none;}
  .table-wrap table.responsive, .table-wrap table.responsive tbody,
  .table-wrap table.responsive tr, .table-wrap table.responsive td{display:block; width:100%;}
  .table-wrap table.responsive tbody tr{padding:12px 14px;}
  .table-wrap table.responsive td{padding:2px 0;}
  .table-wrap table.responsive td.aufgabe-cell{max-width:none;}
  .table-wrap{overflow-x:hidden;}
}

/* ---- Drawer / Modal --------------------------------------------------------------------- */
.overlay{
  position:fixed; inset:0; background:rgba(10,14,12,.42); display:none;
  align-items:flex-end; justify-content:center; z-index:50;
  padding: env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
.overlay.show{display:flex;}
.drawer{
  background:var(--surface); width:100%; max-width:620px; border-radius:16px 16px 0 0;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom,0px)); max-height:88vh; overflow-y:auto;
  border:1px solid var(--line); border-bottom:none;
}
.drawer.wide{max-width:820px;}
@media (min-width:700px){
  .overlay{align-items:center;}
  .drawer{border-radius:16px; border-bottom:1px solid var(--line); max-height:86vh;}
}
.drawer h3{font-size:19px; margin-bottom:4px; padding-right:40px;}
.drawer .drawer-sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:14px;}
.drawer dl{display:grid; grid-template-columns:150px 1fr; gap:9px 14px; font-size:13.5px; margin:0;}
.drawer dt{color:var(--ink-soft);}
.drawer dd{margin:0; white-space:pre-line; word-break:break-word;}
.drawer .close-btn{
  float:right; border:none; background:var(--surface-2); color:var(--ink-soft);
  width:30px; height:30px; border-radius:999px; cursor:pointer; font-size:15px;
}
.drawer section{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.drawer section h4{margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.status-box{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.status-box .full{grid-column:1/-1;}
@media (max-width:560px){ .drawer dl{grid-template-columns:1fr; gap:2px 0;} .drawer dd{margin-bottom:8px;} .status-box{grid-template-columns:1fr;} }

.timeline{list-style:none; margin:0; padding:0;}
.timeline li{position:relative; padding:0 0 14px 18px; font-size:13px;}
.timeline li::before{content:""; position:absolute; left:3px; top:6px; width:7px; height:7px; border-radius:50%; background:var(--petrol);}
.timeline li::after{content:""; position:absolute; left:6px; top:16px; bottom:0; width:1px; background:var(--line);}
.timeline li:last-child::after{display:none;}
.timeline .meta{color:var(--ink-soft); font-size:12px;}
.timeline .change{font-weight:500;}
.timeline .comment{margin-top:3px; color:var(--ink); white-space:pre-line;}

/* ---- Toasts & Tooltip ------------------------------------------------------------------- */
.toasts{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:80; width:min(92vw,440px);}
.toast{
  background:var(--ink); color:var(--paper); padding:10px 14px; border-radius:10px; box-shadow:var(--shadow);
  font-size:13.5px; display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.toast.error{background:var(--red); color:#fff;}
.tip{
  position:fixed; z-index:90; pointer-events:none; background:var(--ink); color:var(--paper);
  padding:7px 10px; border-radius:8px; font-size:12.5px; line-height:1.45; max-width:320px; box-shadow:var(--shadow);
}
.tip strong{display:block;}

/* ---- Kanban ----------------------------------------------------------------------------- */
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); gap:12px; overflow-x:auto; padding-bottom:8px; align-items:start;}
.kcol{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:120px; max-height:calc(100vh - 220px);}
.kcol.drop{border-color:var(--petrol); box-shadow:inset 0 0 0 2px var(--petrol);}
.kcol-head{padding:10px 12px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); position:sticky; top:0;}
.kcol-head .status-pill{font-weight:600; font-size:13px;}
.kcol-body{padding:8px; display:flex; flex-direction:column; gap:8px; overflow-y:auto;}
.kcard{
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 10px; cursor:pointer;
  font-size:12.5px; display:flex; flex-direction:column; gap:5px;
}
.kcard[draggable="true"]{cursor:grab;}
.kcard:hover{border-color:var(--petrol);}
.kcard.dragging{opacity:.4;}
.kcard .k-entity{font-weight:600; font-size:12.5px; line-height:1.3;}
.kcard .k-aufgabe{color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.kcard .k-foot{display:flex; justify-content:space-between; gap:6px; align-items:center; color:var(--ink-soft); font-size:11.5px;}

/* ---- Kalender --------------------------------------------------------------------------- */
.cal{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.cal-grid{display:grid; grid-template-columns:repeat(7, minmax(0,1fr));}
.cal-dow{padding:8px 10px; font-size:12px; color:var(--ink-soft); font-weight:600; background:var(--surface-2); border-bottom:1px solid var(--line);}
.cal-day{min-height:118px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px; display:flex; flex-direction:column; gap:3px; cursor:pointer; position:relative;}
.cal-day:nth-child(7n){border-right:none;}
.cal-day.out{background:var(--paper); color:var(--ink-soft);}
.cal-day.today .dnum{background:var(--petrol); color:#fff; border-radius:999px;}
.cal-day.sel{box-shadow:inset 0 0 0 2px var(--petrol);}
.cal-day .dhead{display:flex; justify-content:space-between; align-items:center; font-size:12px;}
.cal-day .dnum{min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;}
.cal-day .dcount{font-size:11px; color:var(--ink-soft);}
.cal-day .dens{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--petrol); opacity:var(--o,0);}
.cal-chip{font-size:11px; line-height:1.3; padding:2px 5px; border-radius:4px; background:var(--surface-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid var(--grey);}
.cal-chip.overdue{border-left-color:var(--red);}
.cal-chip.soon{border-left-color:var(--amber);}
.cal-chip.upcoming{border-left-color:var(--petrol);}
.cal-chip.done{border-left-color:var(--green); color:var(--ink-soft);}
.cal-chip.cancelled{text-decoration:line-through; color:var(--ink-soft);}
.cal-more{font-size:11px; color:var(--petrol); font-weight:600;}
.cal-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin-top:10px;}
.cal-legend span::before{content:""; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; background:var(--c);}
@media (max-width:760px){
  .cal-day{min-height:64px;}
  .cal-day .cal-chip, .cal-day .cal-more{display:none;}
}

/* ---- Gesellschafts-Fortschritt ----------------------------------------------------------- */
.prog-head, .prog-row{display:grid; grid-template-columns:minmax(220px,2.2fr) minmax(300px,3fr) 70px minmax(150px,1.2fr); gap:14px; align-items:center; padding:10px 14px;}
.prog-head{font-size:12px; color:var(--ink-soft); font-weight:600; background:var(--surface-2); border-bottom:1px solid var(--line);}
.prog-row{border-bottom:1px solid var(--line); cursor:pointer;}
.prog-row:hover{background:var(--surface-2);}
.prog-row:last-child{border-bottom:none;}
.prog-name{font-weight:500; line-height:1.3;}
.prog-name small{display:block; color:var(--ink-soft); font-weight:400; font-size:12px;}
.steps{display:grid; gap:2px;}
.steps .seg{height:14px; border-radius:3px; background:transparent; border:1px dashed var(--line);}
.steps .seg.done{background:var(--green); border:none;}
.steps .seg.overdue{background:var(--red); border:none;}
.steps .seg.soon{background:var(--amber); border:none;}
.steps .seg.upcoming{background:var(--surface); border:1.5px solid var(--petrol);}
.steps .seg.recurring{background:var(--grey-bg); border:1.5px solid var(--grey);}
.steps .seg.cancelled{background:repeating-linear-gradient(45deg, var(--grey-bg) 0 3px, transparent 3px 6px); border:1px solid var(--line);}
.steps-labels{display:grid; gap:2px; font-size:10.5px; color:var(--ink-soft);}
.steps-labels span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.steps-labels.inline{display:none;}
.pct{font-variant-numeric:tabular-nums; font-weight:600;}
.next{font-size:12.5px; line-height:1.35;}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); align-items:center;}
.legend .sw{display:inline-block; width:14px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px;}
.entity-detail{padding:4px 14px 14px; background:var(--paper); border-bottom:1px solid var(--line);}
@media (max-width:900px){
  .prog-head{display:none;}
  .prog-row{grid-template-columns:1fr; gap:6px;}
  .steps-labels.inline{display:grid;}
}

/* ---- Meine Aufgaben --------------------------------------------------------------------- */
.group{margin-bottom:18px;}
.group > h3{font-family:"IBM Plex Sans", system-ui, sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 8px; display:flex; gap:8px; align-items:center;}
.task{display:grid; grid-template-columns:120px 1fr 190px; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); cursor:pointer;}
.task:last-child{border-bottom:none;}
.task:hover{background:var(--surface-2);}
.task .t-main{min-width:0;}
.task .t-entity{font-weight:500;}
.task .t-aufgabe{color:var(--ink-soft); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.task select{width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--paper);}
@media (max-width:640px){ .task{grid-template-columns:1fr;} }

/* ---- Gantt ------------------------------------------------------------------------------ */
.gantt{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; max-height:calc(100vh - 240px); position:relative;}
.gantt-inner{display:grid; grid-template-columns:260px 1fr; min-width:1100px;}
.g-corner, .g-months{position:sticky; top:0; z-index:3; background:var(--surface-2); border-bottom:1px solid var(--line);}
.g-corner{left:0; z-index:4; padding:8px 12px; font-size:12px; color:var(--ink-soft); font-weight:600;}
.g-months{display:grid; grid-template-columns:repeat(12,1fr);}
.g-months div{padding:8px 6px; font-size:12px; color:var(--ink-soft); border-left:1px solid var(--line);}
.g-label{position:sticky; left:0; z-index:2; background:var(--surface); padding:0 12px; font-size:12.5px; height:34px; display:flex; align-items:center; border-bottom:1px solid var(--line); border-right:1px solid var(--line); cursor:pointer;}
.g-label span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.g-label:hover{color:var(--petrol);}
.g-track{position:relative; height:34px; border-bottom:1px solid var(--line); background-image:linear-gradient(to right, var(--line) 1px, transparent 1px); background-size:calc(100% / 12) 100%;}
.g-bar{position:absolute; top:14px; height:6px; border-radius:3px; background:var(--c); opacity:.9;}
.g-ms{position:absolute; top:10px; width:14px; height:14px; margin-left:-7px; transform:rotate(45deg); border-radius:2px; background:var(--c); box-shadow:0 0 0 2px var(--surface); cursor:pointer;}
.g-ms:hover, .g-ms:focus-visible{transform:rotate(45deg) scale(1.25);}
.g-today{position:absolute; top:0; bottom:0; width:2px; background:var(--red); opacity:.6; z-index:1; pointer-events:none;}
.g-ms.upcoming{--c:var(--petrol);} .g-bar.upcoming{--c:var(--petrol); opacity:.45;}
.g-ms.done{--c:var(--green);} .g-bar.done{--c:var(--green); opacity:.55;}
.g-ms.overdue{--c:var(--red);} .g-bar.overdue{--c:var(--red); opacity:.55;}
.g-ms.soon{--c:var(--amber);} .g-bar.soon{--c:var(--amber); opacity:.55;}
.g-ms.cancelled{--c:var(--grey);} .g-bar.cancelled{--c:var(--grey); opacity:.3;}

/* ---- Heatmap ---------------------------------------------------------------------------- */
.heat-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; padding:12px 14px;}
.heat{display:grid; gap:2px; min-width:980px; align-items:center;}
.heat .h-label{font-size:12px; padding-right:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.heat .h-label.total{font-weight:600;}
.heat .h-month{font-size:11px; color:var(--ink-soft); white-space:nowrap;}
.heat .h-cell{height:22px; border-radius:3px; background:var(--heat-0); cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; color:transparent;}
.heat .h-cell:hover, .heat .h-cell:focus-visible, .heat .h-cell.sel{outline:2px solid var(--ink); outline-offset:0;}
.heat .h-cell.cur{box-shadow:inset 0 -3px 0 var(--red);}
.heat .h-cell[data-l="1"]{background:var(--heat-1);} .heat .h-cell[data-l="2"]{background:var(--heat-2);}
.heat .h-cell[data-l="3"]{background:var(--heat-3);} .heat .h-cell[data-l="4"]{background:var(--heat-4);}
.heat .h-cell[data-l="5"]{background:var(--heat-5);} .heat .h-cell[data-l="6"]{background:var(--heat-6);}
.heat.show-num .h-cell{color:var(--ink);}
.heat.show-num .h-cell[data-l="4"], .heat.show-num .h-cell[data-l="5"], .heat.show-num .h-cell[data-l="6"]{color:#fff;}
:root[data-theme="dark"] .heat.show-num .h-cell[data-l="5"], :root[data-theme="dark"] .heat.show-num .h-cell[data-l="6"]{color:var(--heat-ink-dark);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .heat.show-num .h-cell[data-l="5"], :root:not([data-theme="light"]) .heat.show-num .h-cell[data-l="6"]{color:var(--heat-ink-dark);} }
.heat .h-sep{grid-column:1/-1; height:6px;}
.scale{display:flex; align-items:center; gap:3px; font-size:12px; color:var(--ink-soft);}
.scale i{display:inline-block; width:18px; height:12px; border-radius:2px;}

/* ---- Admin ------------------------------------------------------------------------------ */
.admin-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.admin-table td, .admin-table th{padding:8px 12px; vertical-align:middle;}
.admin-table input[type="text"], .admin-table select, .admin-table input[type="number"]{padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--paper); width:100%;}
.admin-table input[type="number"]{width:80px;}
.admin-table .actions{white-space:nowrap; text-align:right;}
.admin-table tr.inactive td{color:var(--ink-soft);}
.matrix th, .matrix td{text-align:center;}
.matrix th:first-child, .matrix td:first-child{text-align:left;}
.matrix input[type="checkbox"]{width:18px; height:18px; cursor:pointer;}
.check-list{max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:var(--paper);}
.check-list label{display:flex; gap:8px; align-items:flex-start; padding:3px 0; font-size:13px; cursor:pointer;}
.pw-box{font-family:ui-monospace, Consolas, monospace; font-size:16px; background:var(--surface-2); padding:10px 12px; border-radius:8px; user-select:all; letter-spacing:.04em;}
.import-summary{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0;}
.import-summary .chip{font-size:12.5px; padding:4px 10px;}
.row-new td:first-child{box-shadow:inset 3px 0 0 var(--green);}
.row-update td:first-child{box-shadow:inset 3px 0 0 var(--amber);}
.row-error td:first-child{box-shadow:inset 3px 0 0 var(--red);}

footer.note{margin-top:26px; font-size:12px; color:var(--ink-soft); line-height:1.6;}