/* Fristen-Dashboard – Styles im Joint Branding eMentalist × Advicum.
   Basis-Tokens (Farben, Schrift, Radien, Schatten) kommen aus brand.css. Hier stehen nur die
   App-Tokens (Datenfarben) und die Komponenten. Es gibt bewusst nur ein helles Design. */

:root{
  color-scheme:light;
  --app-maxw:1440px;           /* breiter als die 1080px des Design Systems: Tabellen, Kanban, Gantt */
  --on-accent:#ffffff;         /* Text auf Navy-Flächen */
  --row-hover:#f4f7fa;
  --overlay:rgba(22,39,59,.45);
  --crit-line:#f0b4b4;
  --done-bg:#e4f1ea;

  /* Fälligkeits-Ampel als Datenfarbe (Punkte, Balken, Kalender, Gantt).
     Aus Navy/Rot abgeleitet, mit dem Palette-Validator auf Farbenblindheit geprüft. Texte nutzen die Text-Tokens. */
  --due-overdue:#a6111c;
  --due-soon:#c98a1f;
  --due-upcoming:#3b6ea8;
  --due-done:#1f8a5b;
  --due-none:var(--neutral);

  /* Manueller Status (Punkt + Text). Schlüssel = Werte in der Tabelle statuses. */
  --st-grey:#8a94a3;
  --st-slate:#616e89;
  --st-blue:#3b6ea8;
  --st-amber:#c98a1f;
  --st-violet:#7c5cbf;
  --st-green:#1f8a5b;
  --st-magenta:#d9709f;
  --st-aqua:#13958a;
  --st-red:#a6111c;

  /* Heatmap: eine Farbe (Navy), hell → dunkel */
  --heat-0:#eef1f4;
  --heat-1:#cfdcec;
  --heat-2:#aac1dd;
  --heat-3:#83a2c8;
  --heat-4:#5d82b1;
  --heat-5:#3b6190;
  --heat-6:#1e3a5d;

  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235b6b7f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5 8 14.5 16 5.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --magnifier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1b3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");

  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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:var(--font-sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:800; color:var(--accent);}
p{text-wrap:pretty;}
a{color:var(--brand);}
a:hover{color:var(--brand-deep);}
::selection{background:var(--accent); color:var(--on-accent);}
button, select, input, textarea{font-family:inherit; font-size:inherit; color:inherit;}
:focus-visible{outline:none; box-shadow:var(--focus);}
.muted{color:var(--ink-mute);}
.nowrap{white-space:nowrap;}
.num{font-variant-numeric:tabular-nums;}
.eyebrow{font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-mute);}
.req{color:var(--brand); font-style:normal;}

.wrap{max-width:var(--app-maxw); margin:0 auto; padding:0 var(--gutter);}
.boot{padding:80px 20px; text-align:center; color:var(--ink-mute);}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{transition:none !important; animation:none !important;}
}
@keyframes em-rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---- Logo --------------------------------------------------------------------------------- */
/* Das Logo steht frei auf Weiß, nie in einem farbigen Band. */
.brand-logo{display:block; height:38px; width:auto;}

/* ---- Kopfband (Masthead) & Navigation ----------------------------------------------------- */
.masthead{background:var(--card); border-bottom:1px solid var(--line);}
.mast-row{display:flex; align-items:center; justify-content:space-between; gap:16px 20px; flex-wrap:wrap; padding:16px 0 14px;}
.mast-brand{display:flex; align-items:center; gap:16px; min-width:0;}
.mast-brand > a{display:flex; flex:none;}
.mast-title{padding-left:16px; border-left:1px solid var(--line); min-width:0;}
.mast-title h1{font-size:var(--fs-masthead); letter-spacing:var(--ls-masthead); line-height:1.1; margin-top:3px;}
.top-actions{display:flex; gap:10px; align-items:center;}
.top-actions .btn{height:42px;}

.nav-row{display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; padding-bottom:10px;}
nav.views{display:flex; gap:5px; flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;}
nav.views::-webkit-scrollbar{display:none;}
nav.views a{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:8px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
nav.views a:hover{background:var(--accent-tint); color:var(--accent-deep);}
nav.views a.active{background:var(--accent); color:var(--on-accent); font-weight:700;}
nav.views .count{font-size:11px; font-weight:700; line-height:1.4; background:var(--brand); color:#fff; border-radius:var(--radius-pill); padding:0 7px;}
nav.views a.active .count{background:var(--card); color:var(--brand);}
.mast-meta{margin:0 0 0 auto; font-size:12.5px; color:var(--ink-mute); white-space:nowrap;}

.user-menu{position:relative;}
.userbox{
  display:flex; align-items:center; gap:10px; padding:4px 10px 4px 5px; min-height:42px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; text-align:left;
  transition:border-color var(--dur-fast) var(--ease);
}
.userbox:hover, .userbox[aria-expanded="true"]{border-color:var(--line-strong);}
.avatar{flex:none; width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-size:12px; font-weight:700; letter-spacing:.02em;}
.ub-text{line-height:1.3; min-width:0;}
.ub-text strong{display:block; font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;}
.ub-text small{display:block; font-size:11.5px; color:var(--ink-mute); white-space:nowrap;}
.ub-caret{flex:none; width:14px; height:14px; color:var(--ink-mute);}
.menu{
  position:absolute; right:0; top:calc(100% + 6px); min-width:240px; z-index:40;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-pop), 0 2px 6px rgba(22,39,59,.06); padding:6px; display:flex; flex-direction:column;
}
.menu-head{padding:9px 10px 11px; border-bottom:1px solid var(--line-soft); margin-bottom:4px; font-size:12.5px; color:var(--ink-mute);}
.menu-head strong{display:block; font-size:14px; color:var(--ink);}
.menu button{
  text-align:left; background:none; border:none; padding:9px 10px; border-radius:8px; cursor:pointer;
  font-weight:600; font-size:13.5px; color:var(--ink-soft);
}
.menu button:hover{background:var(--accent-tint); color:var(--accent-deep);}
.menu button[data-action="logout"]{color:var(--brand);}
.menu button[data-action="logout"]:hover{background:var(--brand-tint); color:var(--brand-deep);}

@media (max-width:700px){
  .wrap{padding:0 var(--gutter-sm);}
  .brand-logo{height:30px;}
  .mast-brand{gap:12px;}
  .mast-title{padding-left:12px;}
  .mast-title h1{font-size:19px;}
  .ub-text{display:none;}
  .userbox{padding:4px;}
}

/* ---- Seite & Fußband ---------------------------------------------------------------------- */
#app{min-height:100vh; display:flex; flex-direction:column;}
.page{flex:1 0 auto; padding:22px 0 56px;}
#viewRoot{animation:em-rise 280ms var(--ease);}
.site-foot{background:var(--card); border-top:1px solid var(--line);}
.site-foot .wrap{padding-top:20px; padding-bottom:22px; font-size:13px; line-height:1.6; color:var(--ink-mute);}
.site-foot p{margin:0;}
.site-foot .foot-brand{margin-top:8px; font-weight:600; color:var(--ink-soft);}

/* ---- Buttons ------------------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border:1.5px solid var(--line); border-radius:var(--radius-btn);
  background:var(--card); color:var(--accent); font-weight:700; font-size:14px; line-height:1; white-space:nowrap;
  cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--accent-tint); border-color:var(--accent-tint);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-deep); border-color:var(--accent-deep);}
.btn-ghost{background:transparent; border-color:transparent;}
.btn-danger{color:var(--brand); background:transparent; border-color:var(--brand-line);}
.btn-danger:hover{background:var(--brand-tint); border-color:var(--brand-line); color:var(--brand-deep);}
.btn-sm{height:34px; padding:0 12px; font-size:13px; border-radius:10px;}
.btn-block{width:100%;}
.link-btn{background:none; border:none; padding:0; color:var(--accent); cursor:pointer; font-weight:700;}
.link-btn:hover{text-decoration:underline;}

/* ---- Formulare ---------------------------------------------------------------------------- */
/* :where() hält die Grundregel ohne Spezifität, damit Kontext-Regeln (Suche, Login, Admin) sie überschreiben können. */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])), select, textarea{
  height:40px; padding:0 12px; width:auto; max-width:100%;
  font-size:14px; color:var(--ink); background:var(--card);
  border:1.5px solid var(--line); border-radius:var(--radius-sm); outline:none;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
select{appearance:none; -webkit-appearance:none; padding-right:34px; background-image:var(--chevron); background-repeat:no-repeat; background-position:right 11px center; background-size:14px; cursor:pointer;}
textarea{height:auto; padding:10px 12px; line-height:1.55; resize:vertical;}
:where(input:not([type="checkbox"], [type="radio"], [type="file"])):hover, select:hover, textarea:hover{border-color:var(--line-strong);}
:where(input:not([type="checkbox"], [type="radio"], [type="file"])):focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:var(--focus);}
input:disabled, select:disabled, textarea:disabled{background-color:var(--surface-sub); color:var(--ink-mute); cursor:not-allowed;}
input::placeholder, textarea::placeholder{color:var(--ink-faint);}
input[type="search"]{padding-left:38px; background-image:var(--magnifier); background-repeat:no-repeat; background-position:12px center; background-size:17px;}
input[type="file"]{width:100%; padding:10px 12px; font-size:14px; background:var(--surface-sub); border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer;}
input[type="file"]::file-selector-button{
  font:inherit; font-weight:700; font-size:13px; color:var(--accent); background:var(--card);
  border:1.5px solid var(--line); border-radius:9px; padding:6px 12px; margin-right:12px; cursor:pointer;
}

input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex:none; width:18px; height:18px; margin:0; vertical-align:middle;
  border:1.5px solid var(--line-strong); border-radius:var(--radius-xs); background:var(--card) center / 12px no-repeat;
  cursor:pointer; transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
input[type="checkbox"]:hover{border-color:var(--accent);}
input[type="checkbox"]:checked{background-color:var(--accent); border-color:var(--accent); background-image:var(--check);}
input[type="checkbox"]:disabled{opacity:.45; cursor:not-allowed;}

.field{display:flex; flex-direction:column; gap:6px; font-size:13px;}
.field > span:not(.hint){font-size:13.5px; font-weight:700; color:var(--ink);}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea, .inline-input{width:100%;}
.field textarea{min-height:76px;}
.field .hint{font-size:12.5px; line-height:1.5; color:var(--ink-mute);}
.field.check{flex-direction:row; align-items:center; gap:9px; cursor:pointer;}
.field.check > span{font-size:13.5px; font-weight:600; color:var(--ink-soft);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;}
.form-grid .full{grid-column:1 / -1;}
.form-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap;}
.form-error{color:var(--crit); font-size:13px; font-weight:600; 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:24px 16px;}
.login-card{
  width:100%; max-width:410px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 30px 28px; display:flex; flex-direction:column; gap:16px;
  animation:em-rise 280ms var(--ease);
}
.login-card .brand-logo{height:58px; align-self:flex-start; margin-bottom:6px;}
.login-card h1{font-size:var(--fs-page); letter-spacing:var(--ls-display); line-height:1.1; margin-top:-8px;}
.login-card p{margin:0; font-size:14.5px;}
.login-card .field input{height:var(--control-md); border-radius:var(--radius); font-size:15px; padding:0 14px;}
.login-card .btn{height:var(--control-md); font-size:14.5px;}
.login-foot{margin-top:18px; font-size:12.5px; color:var(--ink-mute); text-align:center;}

/* ---- Filterleiste ------------------------------------------------------------------------- */
.controls{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:20px;}
.filter-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.filter-row input[type="search"]{flex:2 1 220px; min-width:180px;}
.filter-row select{flex:1 1 185px; max-width:260px; min-width:0; padding-right:30px; background-position:right 10px center;}
.filter-row .reset{flex:none;}
.filter-row select.set, .filter-row input.set{border-color:var(--accent); background-color:var(--accent-badge);}
.filter-row .reset{
  height:40px; border:1.5px solid transparent; background:transparent; color:var(--ink-mute);
  padding:0 12px; border-radius:var(--radius-btn); cursor:pointer; font-size:13px; font-weight:700;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-row .reset:hover{color:var(--brand); background:var(--brand-tint);}
@media (max-width:640px){
  .filter-row select, .filter-row .reset{flex:1 1 calc(50% - 8px); max-width:none;}
}

/* ---- Kopf je Ansicht, Umschalter, Panels -------------------------------------------------- */
.result-count{font-size:13px; color:var(--ink-mute);}
.view-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.view-head h2{font-size:var(--fs-h2); letter-spacing:var(--ls-h2); line-height:1.25;}
.view-head h2 + .result-count{margin-top:3px;}
.view-tools{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.panel-pad{padding:18px 20px;}
.loading{opacity:.55; transition:opacity var(--dur-fast);}

/* Segment-Umschalter (Reiter der Tabelle) */
.tabs{display:inline-flex; flex-wrap:wrap; gap:2px; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:3px;}
.tab{
  border:none; background:none; color:var(--ink-soft); padding:6px 13px; border-radius:7px;
  cursor:pointer; font-size:12.5px; font-weight:600; transition:background .14s, color .14s;
}
.tab:hover{background:var(--accent-tint); color:var(--accent-deep);}
.tab.active{background:var(--accent); color:var(--on-accent);}
/* Unter-Navigation (Admin) */
.admin-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.admin-tabs .tab{display:inline-block; border:1px solid var(--line); background:var(--card); border-radius:9px; padding:8px 15px; font-size:13px;}
.admin-tabs .tab:hover{border-color:var(--accent); background:var(--row-hover); color:var(--accent-deep);}
.admin-tabs .tab.active{border-color:var(--accent); background:var(--accent); color:var(--on-accent);}

/* ---- KPI-Kacheln -------------------------------------------------------------------------- */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px;}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px 15px; cursor:pointer; text-align:left;
  transition:border-color var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease), transform var(--dur-card) var(--ease);
}
.kpi:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-hover);}
.kpi.active{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);}
.kpi.active:hover{box-shadow:inset 0 0 0 1px var(--accent), var(--shadow-hover);}
.kpi .num{font-size:30px; font-weight:800; letter-spacing:var(--ls-display); line-height:1; color:var(--ink);}
.kpi .lbl{margin-top:9px; display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-mute); line-height:1.35;}
.kpi .lbl::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--kc, var(--due-none));}
.kpi.overdue{--kc:var(--due-overdue);}  .kpi.overdue .num{color:var(--brand);}
.kpi.soon{--kc:var(--due-soon);}        .kpi.soon .num{color:var(--warn);}
.kpi.upcoming{--kc:var(--due-upcoming);} .kpi.upcoming .num{color:var(--accent);}
.kpi.done{--kc:var(--due-done);}        .kpi.done .num{color:var(--green);}
.kpi.recurring .num{color:var(--ink-soft);}
@media (max-width:860px){ .kpis{grid-template-columns:repeat(2,1fr);} }

/* ---- Pills: Fälligkeit, Status, Chips ----------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--radius-pill);
  font-size:11.5px; font-weight:700; line-height:1.35; white-space:nowrap;
}
.badge i{flex:none; width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge.overdue{background:var(--crit-bg); color:var(--crit);}
.badge.overdue i{background:var(--due-overdue);}
.badge.soon{background:var(--warn-bg); color:var(--warn); box-shadow:inset 0 0 0 1px var(--warn-line);}
.badge.soon i{background:var(--due-soon);}
.badge.upcoming{background:var(--accent-badge); color:var(--accent);}
.badge.upcoming i{background:var(--due-upcoming);}
.badge.done{background:var(--done-bg); color:var(--green);}
.badge.done i{background:var(--due-done);}
.badge.recurring{background:var(--neutral-tint); color:var(--ink-soft);}
.badge.recurring i{background:var(--due-none);}
.badge.cancelled{background:var(--surface-sub); color:var(--ink-mute); box-shadow:inset 0 0 0 1px var(--line); text-decoration:line-through;}
.badge.cancelled i{background:var(--ink-faint);}
.status-pill{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; 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:11.5px; color:var(--ink-mute);}
.chip{
  display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; line-height:1.35; padding:2px 9px;
  border-radius:var(--radius-pill); background:var(--neutral-tint); color:var(--ink-soft);
  letter-spacing:0; text-transform:none;
}

/* ---- Tabellen ----------------------------------------------------------------------------- */
.table-wrap{background:var(--card); 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:11px 14px; background:var(--surface-sub); color:var(--ink-mute);
  font-weight:700; 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(--accent);}
thead th.sorted{color:var(--accent);}
thead th.sorted::after{content:" ↑";}
thead th.sorted.desc::after{content:" ↓";}
tbody tr{border-bottom:1px solid var(--line-soft);}
tbody tr:last-child{border-bottom:none;}
table.clickable tbody tr{cursor:pointer; transition:background var(--dur-fast) var(--ease);}
table.clickable tbody tr:hover{background:var(--row-hover);}
tbody tr:focus-visible, .task:focus-visible, .prog-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; box-shadow:none;}
td{padding:11px 14px; vertical-align:top; color:var(--ink);}
td.date-cell{white-space:nowrap; font-variant-numeric:tabular-nums;}
td.date-cell .d{margin-top:5px; color:var(--ink-mute); font-size:12px;}
td.entity-cell{font-weight:600; max-width:260px;}
td.aufgabe-cell{color:var(--ink-soft); max-width:340px; white-space:pre-line;}
.empty-state{padding:44px 24px; text-align:center; color:var(--ink-mute); font-size:14.5px; line-height:1.6;}
.empty-state h3{margin-bottom:6px; font-size:17px; font-weight:700; color:var(--ink);}
.empty-state p{margin:0 auto; max-width:560px;}
.panel.empty-state{border-style:dashed; border-color:var(--line-strong);}
.more-row{padding:12px; text-align:center; border-top:1px solid var(--line-soft);}
@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;}
}

/* ---- Dialog (Drawer) ---------------------------------------------------------------------- */
.overlay{
  position:fixed; inset:0; background:var(--overlay); 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(--card); width:100%; max-width:640px; border-radius:var(--radius) var(--radius) 0 0;
  padding:24px 26px calc(24px + env(safe-area-inset-bottom,0px)); max-height:88vh; overflow-y:auto;
  border:1px solid var(--line); border-bottom:none; box-shadow:var(--shadow-pop);
  animation:em-rise 200ms var(--ease);
}
.drawer.wide{max-width:840px;}
@media (min-width:700px){
  .overlay{align-items:center;}
  .drawer{border-radius:var(--radius); border-bottom:1px solid var(--line); max-height:86vh;}
}
.drawer h3{font-size:21px; letter-spacing:var(--ls-h2); line-height:1.25; margin-bottom:5px; padding-right:44px;}
.drawer .drawer-sub{color:var(--ink-mute); font-size:14px; margin-bottom:16px;}
.drawer dl{display:grid; grid-template-columns:160px 1fr; gap:10px 16px; font-size:14px; margin:0;}
.drawer dt{color:var(--ink-mute); font-weight:600; font-size:13px; padding-top:1px;}
.drawer dd{margin:0; white-space:pre-line; word-break:break-word; color:var(--ink);}
.drawer .close-btn{
  float:right; margin:-6px -8px 0 0; border:none; background:transparent; color:var(--ink-mute);
  width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:24px; line-height:1;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.drawer .close-btn:hover{background:var(--accent-tint); color:var(--accent-deep);}
.drawer section{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.drawer section h4{margin:0 0 12px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-section); color:var(--ink-mute);}
.status-box{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
.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 16px 20px; font-size:13.5px;}
.timeline li::before{content:""; position:absolute; left:2px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--accent);}
.timeline li::after{content:""; position:absolute; left:5.5px; top:18px; bottom:2px; width:1px; background:var(--line);}
.timeline li:last-child::after{display:none;}
.timeline .meta{color:var(--ink-mute); font-size:12.5px;}
.timeline .change{font-weight:700; color:var(--ink); margin-top:1px;}
.timeline .comment{margin-top:3px; color:var(--ink-body); white-space:pre-line;}

/* ---- Meldungen & 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(--card); color:var(--ink); padding:11px 14px; border-radius:10px;
  border:1px solid var(--line); border-left:4px solid var(--green);
  box-shadow:var(--shadow-pop), 0 2px 8px rgba(22,39,59,.08);
  font-size:13.5px; font-weight:600; display:flex; justify-content:space-between; gap:12px; align-items:center;
  animation:em-rise 200ms var(--ease);
}
.toast.error{background:var(--crit-bg); color:var(--crit); border-color:var(--crit-line); border-left-color:var(--brand);}
.tip{
  position:fixed; z-index:90; pointer-events:none; background:var(--ink); color:var(--card);
  padding:8px 11px; border-radius:9px; font-size:12.5px; line-height:1.45; max-width:320px; box-shadow:var(--shadow-pop);
}
.tip strong{display:block;}

/* ---- Kanban ------------------------------------------------------------------------------- */
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:12px; overflow-x:auto; padding-bottom:8px; align-items:start;}
.kcol{background:var(--surface-sub); 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(--accent); box-shadow:inset 0 0 0 2px var(--accent); background:var(--accent-badge);}
.kcol-head{padding:12px 14px; 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:700; font-size:13.5px;}
.kcol-head .num{font-size:11.5px; font-weight:700; padding:1px 9px; border-radius:var(--radius-pill); background:var(--neutral-tint); color:var(--ink-soft);}
.kcol-body{padding:10px; display:flex; flex-direction:column; gap:8px; overflow-y:auto;}
.kcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 12px; cursor:pointer;
  font-size:13px; display:flex; flex-direction:column; gap:6px;
  transition:border-color var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease), transform var(--dur-card) var(--ease);
}
.kcard[draggable="true"]{cursor:grab;}
.kcard:hover{border-color:var(--line-strong); box-shadow:var(--shadow-hover); transform:translateY(-1px);}
.kcard.dragging{opacity:.4;}
.kcard .k-entity{font-weight:700; font-size:13px; line-height:1.3; color:var(--ink);}
.kcard .k-aufgabe{color:var(--ink-soft); line-height:1.45; 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-mute); font-size:11.5px;}

/* ---- Kalender ----------------------------------------------------------------------------- */
.cal{background:var(--card); 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:9px 10px; font-size:12px; color:var(--ink-mute); font-weight:700; background:var(--surface-sub); border-bottom:1px solid var(--line);}
.cal-day{min-height:118px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:6px; display:flex; flex-direction:column; gap:3px; cursor:pointer; position:relative; transition:background var(--dur-fast) var(--ease);}
.cal-day:hover{background:var(--row-hover);}
.cal-day:nth-child(7n){border-right:none;}
.cal-day.out{background:var(--surface-sub); color:var(--ink-faint);}
.cal-day.today .dnum{background:var(--accent); color:var(--on-accent); border-radius:var(--radius-pill); font-weight:700;}
.cal-day.sel{box-shadow:inset 0 0 0 2px var(--accent);}
.cal-day .dhead{display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600;}
.cal-day .dnum{min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;}
.cal-day .dcount{font-size:11px; color:var(--ink-mute);}
.cal-day .dens{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent); opacity:var(--o,0);}
.cal-chip{font-size:11px; line-height:1.3; padding:2px 6px; border-radius:4px; background:var(--surface-sub); color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid var(--due-none);}
.cal-chip.overdue{border-left-color:var(--due-overdue);}
.cal-chip.soon{border-left-color:var(--due-soon);}
.cal-chip.upcoming{border-left-color:var(--due-upcoming);}
.cal-chip.done{border-left-color:var(--due-done); color:var(--ink-mute);}
.cal-chip.cancelled{text-decoration:line-through; color:var(--ink-mute);}
.cal-more{font-size:11px; color:var(--accent); font-weight:700;}
.cal-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-mute); 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);}
.cal-legend span.muted::before{display:none;}
@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:11px 16px;}
.prog-head{font-size:12px; color:var(--ink-mute); font-weight:700; background:var(--surface-sub); border-bottom:1px solid var(--line);}
.prog-row{border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background var(--dur-fast) var(--ease);}
.prog-row:hover{background:var(--row-hover);}
.prog-row:last-child{border-bottom:none;}
.prog-name{font-weight:600; line-height:1.3; color:var(--ink);}
.prog-name small{display:block; color:var(--ink-mute); 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-strong);}
.steps .seg.done{background:var(--due-done); border:none;}
.steps .seg.overdue{background:var(--due-overdue); border:none;}
.steps .seg.soon{background:var(--due-soon); border:none;}
.steps .seg.upcoming{background:var(--card); border:1.5px solid var(--due-upcoming);}
.steps .seg.recurring{background:var(--neutral-tint); border:1.5px solid var(--due-none);}
.steps .seg.cancelled{background:repeating-linear-gradient(45deg, var(--neutral-tint) 0 3px, transparent 3px 6px); border:1px solid var(--line);}
.steps-labels{display:grid; gap:2px; font-size:10.5px; color:var(--ink-mute);}
.steps-labels span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.steps-labels.inline{display:none;}
.pct{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink);}
.next{font-size:12.5px; line-height:1.4;}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-mute); 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 16px 16px; background:var(--surface-sub); 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:22px;}
.group > h3{
  font-size:16px; letter-spacing:var(--ls-h2); margin:0 0 10px; padding-bottom:8px;
  border-bottom:2px solid var(--line); display:flex; gap:9px; align-items:center;
}
.group > h3.alert{color:var(--brand); border-bottom-color:var(--brand);}
.group > h3.alert .chip{background:var(--brand-tint); color:var(--brand);}
.group > summary{font-weight:700; font-size:13.5px;}
.task{display:grid; grid-template-columns:165px 1fr 200px; gap:14px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background var(--dur-fast) var(--ease);}
.task:last-child{border-bottom:none;}
.task:hover{background:var(--row-hover);}
.task .t-main{min-width:0;}
.task .t-entity{font-weight:600; color:var(--ink);}
.task .t-aufgabe{color:var(--ink-soft); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.task select{width:100%; height:36px; font-size:13px;}
@media (max-width:640px){ .task{grid-template-columns:1fr;} }

/* ---- Gantt -------------------------------------------------------------------------------- */
.gantt{background:var(--card); 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-sub); border-bottom:1px solid var(--line);}
.g-corner{left:0; z-index:4; padding:9px 14px; font-size:12px; color:var(--ink-mute); font-weight:700;}
.g-months{display:grid; grid-template-columns:repeat(12,1fr);}
.g-months div{padding:9px 6px; font-size:12px; font-weight:600; color:var(--ink-mute); border-left:1px solid var(--line);}
.g-label{position:sticky; left:0; z-index:2; background:var(--card); padding:0 14px; font-size:12.5px; font-weight:600; height:34px; display:flex; align-items:center; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line); cursor:pointer;}
.g-label span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.g-label:hover{color:var(--accent);}
.g-track{position:relative; height:34px; border-bottom:1px solid var(--line-soft); background-image:linear-gradient(to right, var(--line-soft) 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(--card); cursor:pointer;}
.g-ms:hover, .g-ms:focus-visible{transform:rotate(45deg) scale(1.25);}
.g-ms:focus-visible{box-shadow:0 0 0 2px var(--card), 0 0 0 5px rgba(30,58,93,.35);}
.g-today{position:absolute; top:0; bottom:0; width:2px; background:var(--brand); opacity:.6; z-index:1; pointer-events:none;}
.g-ms.upcoming{--c:var(--due-upcoming);} .g-bar.upcoming{--c:var(--due-upcoming); opacity:.45;}
.g-ms.done{--c:var(--due-done);} .g-bar.done{--c:var(--due-done); opacity:.55;}
.g-ms.overdue{--c:var(--due-overdue);} .g-bar.overdue{--c:var(--due-overdue); opacity:.55;}
.g-ms.soon{--c:var(--due-soon);} .g-bar.soon{--c:var(--due-soon); opacity:.55;}
.g-ms.cancelled{--c:var(--due-none);} .g-bar.cancelled{--c:var(--due-none); opacity:.3;}

/* ---- Heatmap ------------------------------------------------------------------------------ */
.heat-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; padding:14px 16px;}
.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; color:var(--ink);}
.heat .h-label.total{font-weight:700;}
.heat .h-month{font-size:11px; font-weight:600; color:var(--ink-mute); white-space:nowrap;}
.heat .h-cell{height:22px; border-radius:3px; background:var(--heat-0); cursor:pointer; font-size:10px; font-weight:600; 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; box-shadow:none;}
.heat .h-cell.cur{box-shadow:inset 0 -3px 0 var(--brand);}
.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;}
.heat .h-sep{grid-column:1/-1; height:6px;}
.scale{display:flex; align-items:center; flex-wrap:wrap; gap:3px; font-size:12px; color:var(--ink-mute);}
.scale i{display:inline-block; width:18px; height:12px; border-radius:2px;}

/* ---- Admin -------------------------------------------------------------------------------- */
.admin-table td, .admin-table th{padding:9px 14px; vertical-align:middle;}
.admin-table input[type="text"], .admin-table select, .admin-table input[type="number"]{height:var(--control-sm); font-size:13px; border-radius:9px; width:100%;}
.admin-table select{padding-right:30px; background-position:right 9px center; width:auto;}
.admin-table input[type="text"]{min-width:160px;}
.admin-table input[type="number"]{width:84px;}
.admin-table .actions{white-space:nowrap; text-align:right;}
.admin-table tr.inactive td{color:var(--ink-mute);}
.matrix th, .matrix td{text-align:center;}
.matrix th:first-child, .matrix td:first-child{text-align:left;}
/* Mehrfachauswahl (Gesellschafts-Zuordnung): Suchzeile, gruppierte Liste mit festen Gruppenköpfen, Fußzeile */
.check-toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.check-toolbar .inline-input{flex:1 1 240px; width:auto;}
.check-toggle{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; white-space:nowrap;}
.check-list{
  max-height:320px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-sub);
  padding:0 4px 4px; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:0 4px; align-content:start;
}
.check-group{
  grid-column:1 / -1; position:sticky; top:0; z-index:1; background:var(--surface-sub);
  padding:10px 8px 6px; margin-bottom:2px; border-bottom:1px solid var(--line);
  font-size:11.5px; font-weight:700; letter-spacing:var(--ls-section); text-transform:uppercase; color:var(--ink-mute);
}
.check-item{display:flex; gap:9px; align-items:flex-start; padding:6px 8px; border-radius:7px; font-size:13px; line-height:1.35; cursor:pointer;}
.check-item:hover{background:var(--accent-tint);}
.check-item input[type="checkbox"]{width:16px; height:16px; margin-top:1px; background-size:11px;}
.check-item > span{min-width:0; overflow-wrap:anywhere;}
.check-item .muted{color:var(--ink-mute);}
.check-empty{grid-column:1 / -1; padding:14px 8px; color:var(--ink-mute); font-size:13px;}
.check-foot{display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:13px;}
.check-count{color:var(--ink-mute); margin-right:auto;}
.pw-box{font-family:var(--font-mono); font-size:16px; background:var(--surface-sub); border:1px solid var(--line); padding:11px 13px; border-radius:var(--radius-sm); user-select:all; letter-spacing:.04em;}
.import-summary{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0;}
.import-summary .chip{font-size:12.5px; padding:4px 11px;}
.row-new td:first-child{box-shadow:inset 3px 0 0 var(--due-done);}
.row-update td:first-child{box-shadow:inset 3px 0 0 var(--due-soon);}
.row-error td:first-child{box-shadow:inset 3px 0 0 var(--due-overdue);}

.prog-title{font-size:15px; margin:18px 0 8px; color:var(--ink-soft, var(--ink));}