/* =========================================================================
   MSG HR-Board – Styles  ·  Branding: Navy / Weiß, „Unternehmen Sicherheit"
   ========================================================================= */
:root{
  --navy:#002b5c; --navy-700:#013a78; --navy-800:#012347; --navy-900:#001a36;
  --steel:#0a66c2; --gold:#c9a227;
  --bg:#eef2f7; --card:#ffffff; --line:#e2e8f0; --line-2:#eef1f6;
  --txt:#16233b; --muted:#64748b; --muted-2:#94a3b8;
  --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7;
  --bad:#b91c1c; --bad-bg:#fee2e2; --info:#1d4ed8; --info-bg:#dbeafe;
  --hover:#eaf2fc;
  --r:12px; --r-sm:8px; --sh:0 1px 3px rgba(2,23,54,.08),0 1px 2px rgba(2,23,54,.06);
  --sh-lg:0 10px 30px rgba(2,23,54,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1{font-size:22px;margin:0} h2{font-size:16px;margin:0} h3{font-size:14px;margin:0}
button{font-family:inherit;cursor:pointer}
small{font-size:11.5px}
.muted{color:var(--muted)} .muted.sm,.sm.muted{font-size:11.5px}
hr{border:none;border-top:1px solid var(--line);margin:14px 0}

/* ------------------------------------------------------------- Topbar */
.topbar{height:60px;background:linear-gradient(90deg,var(--navy-900),var(--navy));
  display:flex;align-items:center;gap:16px;padding:0 30px 0 18px;color:#fff;position:sticky;top:0;z-index:40;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.top-spacer{flex:1}
.brand{display:flex;align-items:center;gap:11px}
.logo{background:#fff;color:var(--navy);font-weight:800;letter-spacing:1px;padding:6px 9px;border-radius:6px;font-size:16px}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt strong{font-size:15px} .brand-txt span{font-size:10.5px;opacity:.7;letter-spacing:.5px}
.persp-switch{margin-left:6px;background:rgba(255,255,255,.1);border-radius:30px;padding:3px;display:flex;gap:2px}
.persp-switch button{border:none;background:transparent;color:#cdd9ea;padding:7px 15px;border-radius:30px;font-size:13px;font-weight:600}
.persp-switch button.active{background:#fff;color:var(--navy)}
.top-right{display:flex;align-items:center;gap:12px}
.theme-toggle{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;flex:none;display:grid;place-items:center;padding:0}
.theme-toggle:hover{background:rgba(255,255,255,.22)}
.theme-toggle svg{width:18px;height:18px;display:block}
.donut-track{stroke:#eef1f6}
.avatar{position:relative;overflow:hidden;width:34px;height:34px;border-radius:50%;background:var(--steel);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.avatar .ini{position:absolute;inset:0;display:grid;place-items:center}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1}
.avatar.md{width:40px;height:40px;font-size:13px} .avatar.lg{width:44px;height:44px;font-size:15px} .avatar.xl{width:72px;height:72px;font-size:24px}
.avatar.conv{width:40px;height:40px;font-size:13px} .avatar.conv.team{background:var(--navy);font-size:18px}
.avatar.bub{width:28px;height:28px;font-size:11px;background:var(--navy)} .avatar.bub.disp{background:var(--navy)}

/* ------------------------------------------------------------- Layout */
.layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 60px)}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:3px;position:sticky;top:60px;height:calc(100vh - 60px)}
.nav-item{display:flex;align-items:center;gap:11px;border:none;background:transparent;color:var(--txt);
  padding:10px 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;text-align:left;position:relative}
.nav-item .ni{width:20px;height:20px;display:grid;place-items:center;color:var(--muted-2)}
.nav-svg{width:19px;height:19px;display:block}
.nav-item:hover{background:var(--line-2)}
.nav-item.active{background:var(--navy);color:#fff} .nav-item.active .ni{color:#9cc4f5}
.nav-badge{margin-left:auto;background:var(--warn);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.nav-item.active .nav-badge{background:#fff;color:var(--navy)}
.side-foot{margin-top:auto;font-size:11px;color:var(--muted-2);padding:10px 12px;border-top:1px solid var(--line)}
.content{padding:26px 30px;max-width:none}
.mobile-nav{display:none}

/* ---- Sidebar einklappbar ---- */
.nav-toggle{align-self:flex-end;border:1px solid var(--line);background:#fff;color:var(--muted);width:28px;height:28px;border-radius:7px;font-size:14px;margin-bottom:8px;cursor:pointer;flex:none}
.nav-toggle:hover{background:var(--line-2);color:var(--navy)}
.layout.nav-collapsed{grid-template-columns:66px 1fr}
.nav-collapsed .sidebar{padding:14px 8px}
.nav-collapsed .nav-toggle{align-self:center}
.nav-collapsed .nav-item{justify-content:center;padding:12px 0}
.nav-collapsed .nav-item .nl{display:none}
.nav-collapsed .nav-item .ni{width:22px;height:22px}
.nav-collapsed .nav-svg{width:21px;height:21px}
.nav-collapsed .side-foot{display:none}
.nav-collapsed .nav-badge{position:absolute;top:6px;right:10px;min-width:9px;width:9px;height:9px;padding:0;border-radius:50%;font-size:0;line-height:0}

/* ------------------------------------------------------------- Page head */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head p{margin:4px 0 0} .head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ------------------------------------------------------------- Buttons */
.btn{border:1px solid var(--navy);background:var(--navy);color:#fff;padding:9px 15px;border-radius:var(--r-sm);font-size:13px;font-weight:600;transition:.12s}
.btn:hover{background:var(--navy-700)}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn.ghost:hover{background:var(--line-2);border-color:var(--muted-2)}
.btn.sm{padding:6px 11px;font-size:12px}
.icon-btn{border:none;background:transparent;font-size:16px;color:var(--muted);width:30px;height:30px;border-radius:6px}
.icon-btn:hover{background:var(--line-2)}
.mini{border:1px solid var(--line);background:#fff;color:var(--txt);padding:4px 9px;border-radius:6px;font-size:12px;font-weight:600}
.mini:hover{background:var(--line-2)} .mini.ok{color:var(--ok);border-color:var(--ok)} .mini.ok:hover{background:var(--ok-bg)}
.mini.bad{color:var(--bad);border-color:var(--bad)} .mini.bad:hover{background:var(--bad-bg)}

/* ------------------------------------------------------------- KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:22px}
.kpi{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:16px 14px;display:flex;flex-direction:column;gap:3px;text-align:left;box-shadow:var(--sh);transition:.14s;position:relative;overflow:hidden}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted-2)}
.kpi.ok::before{background:var(--ok)} .kpi.warn::before{background:var(--warn)}
.kpi.bad::before{background:var(--bad)} .kpi.info::before{background:var(--info)}
.kpi-ic{font-size:18px;color:var(--muted-2)}
.kpi-val{font-size:30px;font-weight:800;line-height:1;color:var(--navy)}
.kpi-lbl{font-size:12px;color:var(--muted);font-weight:600}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}

/* ------------------------------------------------------------- Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh);margin-bottom:18px}
.card.no-pad{padding:0;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:980px){.cols-2{grid-template-columns:1fr}}

/* ------------------------------------------------------------- Tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);background:#f8fafc}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#f8fafc}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.actions-cell{text-align:right;white-space:nowrap;display:flex;gap:5px;justify-content:flex-end}
.no-pad .tbl th:first-child,.no-pad .tbl td:first-child{padding-left:18px}
.empty{text-align:center;color:var(--muted-2);padding:26px;font-style:italic}

/* list items */
.li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.li:last-child{border-bottom:none}
.li-main{display:flex;flex-direction:column;flex:1;min-width:0} .li-main span{font-size:12px}
.li .pill{flex:none}

/* ------------------------------------------------------------- Pills/badges */
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:30px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.muted{background:#eef1f6;color:var(--muted)}
.pill.info{background:var(--info-bg);color:var(--info)} .pill.sm{font-size:10px;padding:2px 7px}
.obj-badge{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.obj-badge .dot,.dot{width:9px;height:9px;border-radius:50%;background:var(--navy);display:inline-block}
.dot.warn{background:var(--warn)} .dot.blink{background:var(--bad);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.q-pill{background:#eaf2fc;color:var(--steel);font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap}
.q-pill.sm{font-size:10px;padding:2px 6px}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:30px;cursor:pointer}
.chip:hover{background:var(--navy-700)} .chip.light{background:#eef1f6;color:var(--muted);cursor:default}
.legend{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}

/* ------------------------------------------------------------- Bars */
.bar-row{display:grid;grid-template-columns:140px 1fr 52px;align-items:center;gap:10px;margin:7px 0;font-size:12.5px}
.bar-row.big{grid-template-columns:150px 1fr 70px}
.bar-lbl{color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:9px;background:#eef1f6;border-radius:30px;overflow:hidden;display:flex}
.bar-fill{height:100%;background:var(--navy);border-radius:30px}
.bar-fill.warn{background:var(--warn)} .bar.stack .bar-fill{border-radius:0}
.bar-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.ausl-row{display:grid;grid-template-columns:150px 1fr 72px;align-items:center;gap:10px;margin:8px 0;font-size:12.5px}
.ausl-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--navy);font-weight:700;white-space:nowrap}
p.muted.sm .dot{margin-right:4px}

/* ------------------------------------------------------------- Planungsboard */
.plan-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
.plan-board{border-collapse:collapse;width:100%;min-width:920px}
.plan-board th,.plan-board td{border:1px solid var(--line-2)}
.plan-board thead th{background:#f8fafc;padding:9px;font-size:12px;color:var(--muted);text-align:center}
.plan-board thead th small{display:block;font-size:10px;color:var(--muted-2);font-weight:400}
.plan-board thead th.is-today{background:var(--navy);color:#fff} .plan-board thead th.is-today small{color:#cdd9ea}
.plan-corner{position:sticky;left:0;z-index:2;background:#f8fafc!important}
.plan-obj{position:sticky;left:0;z-index:1;background:#fff;padding:8px 10px;min-width:160px;text-align:left;vertical-align:top}
.plan-obj small{display:block;color:var(--muted-2);font-size:11px;margin-top:2px;margin-left:16px}
.plan-cell{padding:5px;vertical-align:top;min-width:118px;height:64px}
.ein-chip{display:flex;flex-direction:column;width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid var(--navy);background:#fff;border-radius:6px;padding:5px 7px;margin-bottom:4px;gap:1px;transition:.1s}
.ein-chip:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.ein-chip.offen{background:var(--warn-bg);border-color:#fcd9a3}
.ein-chip.abgeschlossen{opacity:.6}
.ein-time{font-size:11px;font-weight:700;color:var(--navy)}
.ein-ma{font-size:12px;font-weight:600} .ein-chip.offen .ein-ma{color:var(--warn)}
.ein-q{font-size:10px;color:var(--muted-2)}
.add-chip{width:100%;border:1px dashed var(--line);background:transparent;color:var(--muted-2);border-radius:6px;padding:6px;font-size:11px}
.add-chip:hover{border-color:var(--steel);color:var(--steel);background:#f4f8fd}
.plan-board.single .plan-cell{min-width:220px}

/* ---- Mobile-Agenda (Einsatzplanung ohne Querscrollen) ---- */
.agenda{display:flex;flex-direction:column;gap:8px}
.agenda-day{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:12px 2px 2px}
.agenda-day.today{color:var(--navy)}
.agenda-card{width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:12px;padding:12px 13px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:5px;cursor:pointer}
.agenda-card.offen{background:var(--warn-bg);border-color:#fcd9a3}
.agenda-card.abgeschlossen{opacity:.65}
.ag-top{display:flex;justify-content:space-between;align-items:center;gap:8px} .ag-top b{font-size:14px}
.ag-row{font-size:12.5px;color:var(--txt);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---- Filterbar / Segmente / Ansicht-Umschalter ---- */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.flt-sp{flex:1}
.seg-group{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px;box-shadow:var(--sh)}
.seg{border:none;background:transparent;color:var(--muted);padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600}
.seg:hover{background:var(--line-2)} .seg.active{background:var(--navy);color:#fff}
.seg-nav{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px;box-shadow:var(--sh)}
.seg-nav .seg.ic{padding:7px 11px;font-size:15px;color:var(--navy)}
.seg-nav .seg.lbl{min-width:150px;text-align:center;color:var(--txt);font-variant-numeric:tabular-nums}
.seg-nav .seg.lbl:hover{background:#eaf2fc;color:var(--navy)}
.flt{font-family:inherit;font-size:13px;font-weight:600;color:var(--txt);padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:var(--sh)}
.flt:focus{outline:2px solid var(--steel);outline-offset:-1px;border-color:var(--steel)}
.flt-sum{font-size:13px;color:var(--muted)} .flt-sum b{color:var(--navy)}
.flt-search{min-width:280px;font-weight:500}
.ma-cell{display:flex;align-items:center;gap:9px}
.clickrow{cursor:pointer} .clickrow:hover{background:var(--hover)!important}

/* ---- Monatskalender ---- */
.month-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.mhead{background:#f8fafc;border-bottom:1px solid var(--line);padding:8px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.mcell{min-height:104px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:5px 5px 6px;display:flex;flex-direction:column;gap:3px}
.mcell:nth-child(7n){border-right:none}
.mcell.out{background:#fafbfd}
.mcell.today{background:#eff6ff}
.mday{font-size:12px;font-weight:700;color:var(--muted);align-self:flex-start;width:22px;height:22px;display:grid;place-items:center;border-radius:50%}
.mcell.today .mday{background:var(--navy);color:#fff}
.mchip{display:flex;gap:4px;align-items:baseline;width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid var(--navy);background:#fff;border-radius:5px;padding:3px 5px;font-size:10.5px;line-height:1.2;color:var(--txt);overflow:hidden;white-space:nowrap}
.mchip b{font-size:10.5px;color:var(--navy)} .mchip:hover{box-shadow:var(--sh)}
.mchip.offen{background:var(--warn-bg);border-color:#fcd9a3} .mchip.offen b{color:var(--warn)}
.mchip.abgeschlossen{opacity:.6}
.mmore{font-size:10px;color:var(--muted-2);font-weight:600;padding-left:3px}
@media(max-width:760px){.mcell{min-height:78px}.mchip{font-size:9.5px}}

/* ---- Linien-Diagramm ---- */
.chart-scroll{overflow-x:auto}
.chart-scroll::-webkit-scrollbar{height:9px}
.chart-scroll::-webkit-scrollbar-track{background:transparent}
.chart-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.linechart{width:100%;min-width:520px;height:auto;display:block}
.linechart .grid{stroke:#eef1f6;stroke-width:1}
.linechart .axis{stroke:#cbd5e1;stroke-width:1}
.linechart .ylab{fill:#94a3b8;font-size:11px;text-anchor:end}
.linechart .xlab{fill:#64748b;font-size:11px;text-anchor:middle}
.linechart .cl{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.linechart .cl-dot{stroke:var(--card);stroke-width:1.6}
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.lg-item{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;font-weight:600}
.lg-dot{width:14px;height:4px;border-radius:2px;display:inline-block}
.lg-bar{width:11px;height:11px;border-radius:2px;display:inline-block}
/* „Einsätze heute": Objekt/Auftraggeber oben, Uhrzeit darunter; Status rechtsbündig */
.ein-cell{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.ein-cell small{font-variant-numeric:tabular-nums}
.ein-tbl{table-layout:fixed}
.ein-tbl th:nth-child(1),.ein-tbl td:nth-child(1){width:44%}
.ein-tbl th:nth-child(2),.ein-tbl td:nth-child(2){width:33%}
.ein-tbl th:nth-child(3),.ein-tbl td:nth-child(3){width:23%;text-align:right}
.card:not(.no-pad) .ein-tbl td{word-break:normal;overflow-wrap:break-word}
.card:not(.no-pad) .ein-tbl th{white-space:nowrap;word-break:normal;letter-spacing:.2px}
.ein-tbl .pill{flex:none}

/* ---- Dashboard-Hero (KPIs + Chart) ---- */
.dash-hero{display:grid;grid-template-columns:1fr 2fr;gap:20px;margin-bottom:18px}
.hero-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.hk{border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:12px 12px;display:flex;flex-direction:column;gap:2px;text-align:left;position:relative;overflow:hidden;transition:.14s}
.hk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted-2)}
.hk.ok::before{background:var(--ok)}.hk.warn::before{background:var(--warn)}.hk.bad::before{background:var(--bad)}.hk.info::before{background:var(--info)}
.hk:hover{background:var(--line-2)}
.hk-val{font-size:26px;font-weight:800;color:var(--navy);line-height:1}
.hk-lbl{font-size:11.5px;color:var(--muted);font-weight:600}
.hero-chart{border-left:1px solid var(--line);padding-left:20px;min-width:0}
.chart-head{flex-wrap:wrap;gap:10px;align-items:flex-start}
.chart-head h2{line-height:1.2}
.chart-ctrls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chart-ctrls .flt{height:34px;padding:0 10px}
.chart-ctrls .seg{padding:6px 12px}
@media(max-width:980px){.dash-hero{grid-template-columns:1fr}.hero-chart{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:14px}}

/* ---- Modal: Dropdown-Höhe = Textfeld (Checkboxen ausgenommen) ---- */
.fld input:not([type=checkbox]),.fld select{min-height:42px}
.fld select{appearance:auto;-webkit-appearance:menulist}

/* ---- Mitarbeiter-Auswahlliste (Mehrfachzuweisung) ---- */
.ma-picklist{border:1px solid var(--line);border-radius:var(--r-sm);max-height:230px;overflow-y:auto;background:#fff}
.ma-pick{display:flex;align-items:center;gap:10px;padding:8px 11px;border-bottom:1px solid var(--line-2);cursor:pointer;font-weight:500}
.ma-pick:last-child{border-bottom:none} .ma-pick:hover{background:var(--line-2)}
.ma-pick.off{opacity:.5} .ma-pick input[type=checkbox]{width:17px;height:17px;min-height:0;accent-color:var(--navy);flex:0 0 17px;margin:0}
.avatar.sm{width:30px;height:30px;font-size:11px}
.ma-pick-txt{display:flex;flex-direction:column;line-height:1.2} .ma-pick-txt b{font-size:13px} .ma-pick-txt small{color:var(--muted);font-size:11px}
.ma-pick-div{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted-2);padding:8px 11px 4px;background:#f8fafc;border-bottom:1px solid var(--line-2)}

/* ---- PWA: Segment, Monatsübersicht ---- */
.pwa-seg{display:flex;gap:6px;margin-bottom:12px}
.pwa-seg button{flex:1;border:1px solid var(--line);background:#fff;color:var(--muted);padding:8px;border-radius:9px;font-size:13px;font-weight:700}
.pwa-seg button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pwa-mon-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pwa-mon-nav button{border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;height:30px;font-size:15px;color:var(--navy)}
.pwa-mon-nav b{font-size:14px}
.pwa-mon{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--sh)}
.pm-h{text-align:center;font-size:10px;font-weight:700;color:var(--muted-2);padding:2px 0}
.pm-c{min-height:46px;border-radius:7px;padding:3px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px}
.pm-c.out{visibility:hidden} .pm-c.today{background:var(--navy);color:#fff} .pm-c.today .pm-d{color:#fff}
.pm-c.has{background:#eff6ff;cursor:pointer} .pm-c.has.today{background:var(--navy)}
.pm-d{font-weight:600;color:var(--txt)} .pm-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.pm-dot{width:6px;height:6px;border-radius:50%;display:inline-block}

/* ---- Checkliste ---- */
.ta{font-family:inherit;font-size:13.5px;color:var(--txt);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;width:100%;resize:vertical;line-height:1.5}
.ta:focus{outline:2px solid var(--steel);outline-offset:-1px;border-color:var(--steel)}
.ck-prog{font-size:12.5px;color:var(--muted);margin:8px 0 6px} .ck-prog b{color:var(--navy)}
.ck-list{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.ck-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 11px;border-bottom:1px solid var(--line-2);font-size:12.5px}
.ck-item:last-child{border-bottom:none} .ck-item.done span{color:var(--ok)} .ck-item.done{background:#f6fdf9}
/* PWA-Checkliste */
.pwa-ck{margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fafbfd}
.pwa-ck-head{font-size:11.5px;font-weight:700;color:var(--muted);padding:8px 11px;background:#f1f5fa;border-bottom:1px solid var(--line-2)}
.pwa-ck-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:transparent;border-bottom:1px solid var(--line-2);padding:9px 11px;font-size:13px;color:var(--txt)}
.pwa-ck-item:last-child{border-bottom:none} .pwa-ck-item:hover{background:#fff}
.pwa-ck-box{width:20px;height:20px;border:2px solid var(--muted-2);border-radius:5px;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;flex:none}
.pwa-ck-item.done .pwa-ck-box{background:var(--ok);border-color:var(--ok)}
.pwa-ck-item.done .pwa-ck-txt{color:var(--muted);text-decoration:line-through}
.pwa-ck-txt{flex:1}

/* ---- Mitarbeiter-Meta (Führerschein / Beschäftigung) ---- */
.ma-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fs-pill{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
.fs-pill.ja{background:var(--ok-bg);color:var(--ok)} .fs-pill.nein{background:#eef1f6;color:var(--muted)}

/* ---- PWA: Meine Daten (Personalfragebogen) ---- */
.md-prog{display:flex;align-items:center;gap:10px;margin:4px 0 14px;font-size:12px;color:var(--muted)}
.md-bar{flex:1;height:8px;background:#e6ebf2;border-radius:30px;overflow:hidden}
.md-bar-fill{height:100%;background:var(--navy);border-radius:30px;transition:width .5s}
.phone-screen .fld{margin-bottom:11px} .phone-screen .fld input,.phone-screen .fld select{min-height:42px}
.phone-screen .chk{margin-bottom:11px}

/* 7 Tabs etwas kompakter */
.phone-tabs .tab{font-size:9.5px} .phone-tabs .tab-ic{font-size:17px}

/* ---- Sprachnachrichten ---- */
.mic-btn{border:1px solid var(--line);background:#fff;color:var(--navy);width:42px;height:42px;border-radius:50%;font-size:17px;flex:none;display:grid;place-items:center;cursor:pointer}
.mic-btn:hover{background:var(--line-2)}
.mic-btn.rec{background:var(--bad);color:#fff;border-color:var(--bad);animation:micpulse 1s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(185,28,28,.5)}50%{box-shadow:0 0 0 7px rgba(185,28,28,0)}}
.voice-msg{display:flex;align-items:center;gap:9px;border:none;background:transparent;padding:2px 0;cursor:pointer}
.voice-msg .vm-play{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;flex:none}
.bubble.own .voice-msg .vm-play{background:#fff;color:var(--navy)}
.vm-wave{display:flex;align-items:center;gap:2px;height:18px}
.vm-wave i{width:2.5px;background:var(--navy);border-radius:2px;display:inline-block;opacity:.65}
.bubble.own .vm-wave i{background:#bcd6f5;opacity:.9}
.vm-dur{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} .bubble.own .vm-dur{color:#cfe0f5}

/* ---- Persönliche HR-Nachrichten ---- */
.msg-banner{width:100%;border:1px solid #cfe0f5;background:#eaf2fc;color:var(--steel);font-size:13px;font-weight:700;padding:11px 13px;border-radius:10px;margin-bottom:12px;text-align:left;cursor:pointer}
.msg-banner:hover{background:#dceaf8}
.nch-item{border-bottom:1px solid var(--line-2);padding:11px 0}
.nch-item:last-child{border-bottom:none}
.nch-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.nch-text{margin:5px 0;font-size:13.5px;color:var(--txt);white-space:pre-wrap;line-height:1.5}

/* ---- Header-Suche ---- */
.topsearch{position:relative;flex:0 1 340px;max-width:340px;margin:0}
.topsearch input{width:100%;height:38px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;border-radius:30px;padding:0 16px;font-size:13.5px;font-family:inherit}
.topsearch input::placeholder{color:#cdd9ea}
.topsearch input:focus{outline:none;background:#fff;color:var(--txt);border-color:#fff}
.topsearch input:focus::placeholder{color:var(--muted-2)}
.search-results{position:absolute;top:46px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);max-height:60vh;overflow-y:auto;z-index:80;display:none;padding:6px}
.search-results.show{display:block}
.sr-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted-2);padding:8px 10px 4px}
.sr-item{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;color:var(--txt);padding:8px 10px;border-radius:8px;text-align:left;cursor:pointer}
.sr-item:hover{background:var(--line-2)}
.sr-ic{width:30px;height:30px;border-radius:7px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.sr-txt{display:flex;flex-direction:column;line-height:1.2} .sr-txt b{font-size:13px} .sr-txt small{color:var(--muted);font-size:11.5px}
.sr-empty{padding:14px;text-align:center;color:var(--muted-2);font-size:13px}

/* ---- Reset in Fußzeile ---- */
.side-foot{display:flex;flex-direction:column;gap:4px}
.reset-link{border:none;background:transparent;color:var(--muted);font-size:11.5px;cursor:pointer;padding:4px 0;text-align:left}
.reset-link:hover{color:var(--bad)}
.ver-tag{color:var(--ok);font-size:10.5px;font-weight:600}

/* ---- Kunden ---- */
.ku-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.ku-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:var(--sh);cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:.14s}
.ku-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
.ku-top{display:flex;justify-content:space-between;align-items:baseline} .ku-top b{font-size:15px}
.ku-objs{display:flex;flex-wrap:wrap;gap:8px}
.ku-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-2);padding-top:10px;font-size:12px}

/* ---- Detail-Drawer (rechts) ---- */
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
.drawer{position:fixed;top:60px;right:0;width:34vw;min-width:340px;max-width:480px;height:calc(100vh - 60px);background:#fff;border-left:1px solid var(--line);box-shadow:-10px 0 36px rgba(2,23,54,.18);z-index:55;display:flex;flex-direction:column;animation:drawerIn .26s cubic-bezier(.4,0,.2,1)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer-body{flex:1;overflow-y:auto;padding:18px}
.dr-hero{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.dr-hero b{font-size:18px;display:block} .dr-hero .muted{font-size:13px}
.dr-ku-ic{width:56px;height:56px;border-radius:14px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:24px;flex:none}
.dr-kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13.5px} .dr-kv span{color:var(--muted)}
.dr-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted-2);margin:16px 0 8px}
.dr-obj{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-2)}
.dr-ein{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid var(--navy);background:#fff;border-radius:8px;padding:9px 11px;margin-bottom:7px;cursor:pointer}
.dr-ein:hover{box-shadow:var(--sh)}
.dr-ein-d{font-size:11.5px;font-weight:700;color:var(--navy)} .dr-ein-o{font-size:13px;font-weight:600}
.dr-ein-s{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dr-actions{display:flex;gap:8px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
@media(max-width:760px){.drawer{width:100%;max-width:none;min-width:0}.topsearch{margin:0 6px;min-width:120px}}

/* ---- Dashboard: Spaltenbreite Einsätze/Abwesenheiten ---- */
.cols-dash{grid-template-columns:1.35fr 1fr}
@media(max-width:980px){.cols-dash{grid-template-columns:1fr}}

/* ---- Dashboard Unterzeile (Donut · Upload · To-Do) ---- */
.cols-dash .card{margin-bottom:0}   /* Abstand zur Unterzeile halbieren */
.dash-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:1100px){.dash-bottom{grid-template-columns:1fr}}

/* Donut (groß, dünne Ringe, Legende darunter) */
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.donut{width:100%;max-width:300px;height:auto;display:block}
.donut-big{font-size:44px;font-weight:800;fill:var(--navy)}
.donut-sub{font-size:14px;fill:var(--muted)}
.donut-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)}
.donut-legend b{color:var(--txt);margin-left:3px}
.dl-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:middle}
.dl-genommen{background:#002b5c}

/* Upload-Tile */
.up-form{display:flex;flex-direction:column;gap:10px}
.up-form .fld{margin-bottom:0}
.up-form .flt{width:100%;height:40px}
.up-drop{border:2px dashed var(--line);border-radius:var(--r-sm);padding:16px;text-align:center;color:var(--muted);font-size:12.5px;font-weight:500;background:#fafbfd;cursor:pointer}
.up-drop:hover{border-color:var(--steel)}

/* To-Do */
.todo-add{display:flex;gap:7px;margin-bottom:12px}
.todo-add input{flex:1;min-width:0;font-family:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm)}
.todo-add input:focus{outline:2px solid var(--steel);outline-offset:-1px;border-color:var(--steel)}
.todo-add .flt{width:96px;height:38px;flex:none}
.todo-list{display:flex;flex-direction:column;max-height:230px;overflow-y:auto}
.todo-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.todo-item:last-child{border-bottom:none}
.todo-check{width:22px;height:22px;border:2px solid var(--muted-2);border-radius:6px;background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;line-height:1;font-size:14px;font-weight:800;flex:none;cursor:pointer;padding:0}
.todo-item.done .todo-check{background:var(--ok);border-color:var(--ok)}
.todo-main{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.todo-main span{font-size:13px} .todo-main small{font-size:11.5px}
.todo-item.done .todo-main span{text-decoration:line-through;color:var(--muted)}

/* Krank-Kachel blinkt rot bis angesehen */
@keyframes blinkRed{0%,100%{color:var(--navy)}50%{color:var(--bad)}}
.blink-num{animation:blinkRed 1.05s ease-in-out infinite}
.hk-blink::before{width:6px;animation:stripeBlink 1.05s ease-in-out infinite}
@keyframes stripeBlink{0%,100%{background:var(--bad);opacity:1}50%{background:var(--bad);opacity:.12}}

/* ---- Animationen ---- */
.bar-fill{transition:width .9s cubic-bezier(.4,0,.2,1)}
@keyframes revealUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.reveal{animation:revealUp .42s ease both}
/* Donut-Ring: standardmäßig sichtbar (offset 0); zeichnet sich, sobald sichtbar (.draw) */
@keyframes ringdraw{from{stroke-dashoffset:var(--dash)}to{stroke-dashoffset:0}}
.donut-ring.draw{animation:ringdraw 1.1s var(--delay,0s) cubic-bezier(.4,0,.2,1) both}
@media(prefers-reduced-motion:reduce){.bar-fill{transition:none}.reveal{animation:none}.blink-num{animation:none;color:var(--bad)}.hk-blink::before{animation:none;opacity:1}.donut-ring.draw{animation:none}}

/* ------------------------------------------------------------- Offer cards */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.offer-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--c,var(--navy));border-radius:var(--r);padding:15px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:9px}
.offer-top{display:flex;justify-content:space-between;align-items:baseline}
.offer-top b{font-size:15px}
.offer-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
.offer-hint{margin:0;font-size:12.5px;color:var(--txt)}
.offer-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-2);padding-top:10px}
.bew-count{font-size:12px;color:var(--muted);font-weight:600}
.bew-list{display:flex;flex-wrap:wrap;gap:6px}
.bew-box{margin-top:6px;background:#f4f8fd;border:1px solid #d6e6fa;border-radius:8px;padding:10px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ------------------------------------------------------------- MA cards */
.ma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ma-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:11px}
.ma-top{display:flex;align-items:center;gap:11px}
.ma-top div{display:flex;flex-direction:column;line-height:1.25} .ma-top div b{font-size:14px} .ma-top div span{font-size:12px}
.ma-top .pill{margin-left:auto}
.ma-quals{display:flex;flex-wrap:wrap;gap:5px}
.ma-foot{display:flex;align-items:center;gap:10px} .ma-foot .bar{flex:1}
.ma-foot .muted{font-size:11.5px;white-space:nowrap}
.ma-actions{display:flex;gap:6px;border-top:1px solid var(--line-2);padding-top:11px}
.doc-ic{font-size:15px}

/* ------------------------------------------------------------- Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,23,54,.5);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:100;padding:20px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:#fff;border-radius:14px;width:min(540px,100%);max-height:90vh;overflow:auto;box-shadow:var(--sh-lg);animation:pop .16s}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-body{padding:18px}
.modal-foot{display:flex;gap:8px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);background:#fafbfd;border-radius:0 0 14px 14px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px solid var(--line-2)}
.kv span{color:var(--muted)}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;font-size:12.5px;font-weight:600;color:var(--muted)}
.fld input,.fld select{font-family:inherit;font-size:13.5px;font-weight:500;color:var(--txt);padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;width:100%}
.fld input:focus,.fld select:focus{outline:2px solid var(--steel);outline-offset:-1px;border-color:var(--steel)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px} .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.chk{display:flex;align-items:flex-start;gap:9px;background:#f4f8fd;border:1px solid #d6e6fa;border-radius:var(--r-sm);padding:11px 13px;font-size:13px;font-weight:600;color:var(--txt);cursor:pointer;margin-bottom:4px}
.chk input{width:17px;height:17px;margin-top:1px;accent-color:var(--navy);flex:none}
.chk small{display:block;font-weight:500;margin-top:2px}
.hint{font-size:12px;color:var(--muted);background:#f4f8fd;border-left:3px solid var(--steel);padding:8px 11px;border-radius:0 6px 6px 0;margin:4px 0 0}
.drop{border:2px dashed var(--line);border-radius:var(--r-sm);padding:22px;text-align:center;color:var(--muted);font-size:12.5px;font-weight:500;background:#fafbfd}
.upload .drop{cursor:pointer} .upload .drop:hover{border-color:var(--steel)}
.doc-view{text-align:center;padding:10px} .doc-ic.xl{font-size:48px;display:block;margin-bottom:8px}

/* ------------------------------------------------------------- Chat (HR) */
.chat-wrap{display:grid;grid-template-columns:300px 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;height:calc(100vh - 200px);min-height:460px}
.chat-list{border-right:1px solid var(--line);overflow-y:auto;background:#fafbfd}
.conv{width:100%;display:flex;align-items:center;gap:11px;padding:12px 13px;border:none;border-bottom:1px solid var(--line-2);background:transparent;text-align:left;position:relative;color:var(--txt)}
.conv:hover{background:#f1f5fa} .conv.active{background:#eaf2fc}
.conv-av{width:40px;height:40px;border-radius:50%;background:var(--steel);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.conv-av.team{background:var(--navy);font-size:18px}
.conv-main{flex:1;min-width:0} .conv-top{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.conv-top b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .conv-ts{font-size:10.5px;color:var(--muted-2);flex:none}
.conv-prev{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.conv-badge{background:var(--bad);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px;flex:none}
.chat-panel{display:flex;flex-direction:column;min-width:0}
.chat-head{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);background:#fff}
.chat-head div{display:flex;flex-direction:column;line-height:1.25}
.chat-thread{flex:1;overflow-y:auto;padding:18px 16px;background:linear-gradient(#f4f7fb,#eef2f7);display:flex;flex-direction:column;gap:9px}
.bub-row{display:flex;align-items:flex-end;gap:8px;max-width:74%}
.bub-row.own{align-self:flex-end;flex-direction:row-reverse}
.bub-av{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.bubble{background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:2px}
.bubble.own{background:var(--navy);color:#fff;border-color:var(--navy);border-radius:14px 14px 4px 14px}
.bub-name{font-size:11px;font-weight:700;color:var(--steel)}
.bub-text{font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.bub-ts{font-size:10px;color:var(--muted-2);align-self:flex-end} .bubble.own .bub-ts{color:#9cc4f5}
.chat-composer{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line);background:#fff}
.chat-composer input{flex:1;font-family:inherit;font-size:13.5px;padding:11px 14px;border:1px solid var(--line);border-radius:30px;background:#fff}
.chat-composer input:focus{outline:2px solid var(--steel);outline-offset:-1px;border-color:var(--steel)}
@media(max-width:760px){.chat-wrap{grid-template-columns:1fr;height:auto}.chat-list{max-height:200px}.chat-thread{height:340px}}

/* Chat (PWA) */
.pwa-chat-switch{display:flex;gap:6px;margin:0 0 12px}
.pwa-chat-switch button{flex:1;border:1px solid var(--line);background:#fff;color:var(--muted);padding:9px;border-radius:10px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px}
.pwa-chat-switch button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.mini-badge{background:var(--bad);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.pwa-chat-thread{display:flex;flex-direction:column;gap:8px;min-height:380px;padding:4px 2px 10px}
.pwa-chat-thread .bub-row{max-width:82%} .pwa-chat-thread .bubble{border-radius:13px 13px 13px 4px}
.pwa-chat-thread .bub-row.own .bubble{border-radius:13px 13px 4px 13px}
.pwa-chat-composer{position:sticky;bottom:0;display:flex;gap:8px;padding-top:8px;background:linear-gradient(transparent,var(--bg) 30%)}
.pwa-chat-composer input{flex:1;font-family:inherit;font-size:13.5px;padding:11px 14px;border:1px solid var(--line);border-radius:30px;background:#fff}
.pwa-chat-composer .big-btn{width:48px;margin:0;flex:none;padding:11px;border-radius:50%;font-size:16px}

/* ------------------------------------------------------------- Toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,40px);background:var(--navy-900);color:#fff;padding:12px 20px;border-radius:30px;font-size:13px;font-weight:600;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:.25s;z-index:200}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:var(--bad)}

/* ============================================================== PWA / Phone */
.phone-stage{display:flex;flex-direction:column;align-items:center;padding:26px 16px;min-height:calc(100vh - 60px);background:radial-gradient(circle at 50% 0,#dde6f1,var(--bg))}
.phone{width:390px;max-width:100%;background:#0b1220;border-radius:38px;padding:11px;box-shadow:0 24px 60px rgba(2,23,54,.32),0 0 0 2px #1c2740;position:relative}
.phone-status{display:flex;justify-content:space-between;align-items:center;color:#cdd9ea;font-size:11px;font-weight:600;padding:6px 16px 8px}
.phone-screen{background:var(--bg);border-radius:26px 26px 0 0;height:620px;overflow-y:auto;padding:16px 15px 20px}
.phone-screen::-webkit-scrollbar{width:0}
.phone-tabs{display:flex;background:#0b1220;border-radius:0 0 26px 26px;padding:6px 6px 12px}
.tab{flex:1;border:none;background:transparent;color:#7d8ba6;font-size:10px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;position:relative}
.tab-ic{font-size:18px;filter:grayscale(.4)} .tab.active{color:#fff} .tab.active .tab-ic{filter:none}
.tab-badge{position:absolute;top:0;right:24%;background:var(--bad);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px}
.phone-hint{margin-top:18px;color:var(--muted);font-size:12px;max-width:380px;text-align:center}
.install-hint{margin-top:18px;max-width:390px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--sh);font-size:13px;color:var(--txt)}
.install-hint > b{display:block;margin-bottom:8px;font-size:13.5px}
.install-hint .ih-row{padding:6px 0;border-top:1px solid var(--line-2)}
.install-hint .ih-os{display:inline-block;min-width:138px;color:var(--muted);font-weight:600}
.install-hint .ih-note{margin:8px 0 0;color:var(--muted);font-size:12px}
.install-hint .ih-btn{width:100%;margin:10px 0 4px}

/* ---- Hamburger-Menü (Handy) ---- */
.hamburger{display:none}
.top-row2{display:contents}   /* Desktop: Hamburger+Suche verhalten sich wie direkte Topbar-Kinder */
.hb-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;padding:0 4px;background:var(--bad);color:#fff}
.mnav-backdrop,.mnav{display:none}
.mnav-backdrop{position:fixed;inset:0;background:rgba(2,23,54,.5);backdrop-filter:blur(2px);z-index:90;opacity:0;pointer-events:none;transition:opacity .22s}
.mnav-backdrop.show{opacity:1;pointer-events:auto}
.mnav{position:fixed;top:0;left:0;height:100%;width:82%;max-width:330px;background:var(--card);box-shadow:8px 0 36px rgba(2,23,54,.3);z-index:95;flex-direction:column;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.mnav.open{transform:none}
.mnav-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.mnav-head strong{flex:1;font-size:15px}
.mnav-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:3px}
.mnav-item{display:flex;align-items:center;gap:12px;border:none;background:transparent;color:var(--txt);padding:12px 13px;border-radius:9px;font-size:14.5px;font-weight:600;text-align:left}
.mnav-item .ni{width:20px;height:20px;display:grid;place-items:center;color:var(--muted-2)}
.mnav-item .nav-svg{width:20px;height:20px}
.mnav-item:hover{background:var(--line-2)}
.mnav-item.active{background:var(--navy);color:#fff} .mnav-item.active .ni{color:#9cc4f5}
.mnav-item .nav-badge{margin-left:auto;position:static}
.mnav-install{padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--txt)}
.mnav-install > b{display:block;margin-bottom:6px;font-size:13px}
.mnav-install .ih-btn{width:100%;margin:4px 0 8px}
.mnav-install .ih-row{padding:5px 0;border-top:1px solid var(--line-2);font-size:12px}
.mnav-install .ih-os{display:inline-block;min-width:120px;color:var(--muted);font-weight:600}
.side-foot [data-pwa-install]:hover{color:var(--navy)}
.mnav-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}

.pwa-head{display:flex;justify-content:space-between;align-items:baseline;margin:4px 2px 12px}
.pwa-head h2{font-size:19px} .pwa-head h3{font-size:14px;margin-top:6px}
.big-btn{width:100%;border:none;background:var(--navy);color:#fff;padding:13px;border-radius:12px;font-size:14px;font-weight:700;margin-bottom:12px;box-shadow:var(--sh)}
.big-btn:hover{background:var(--navy-700)} .big-btn.bad{background:var(--bad)} .big-btn.bad:hover{background:#a11717}
.big-btn.ghost{background:#fff;color:var(--ok);border:1px solid var(--ok)} .big-btn:disabled{opacity:.7;cursor:default}
.alert{padding:10px 13px;border-radius:10px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.alert.bad{background:var(--bad-bg);color:var(--bad)}
.pwa-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--c,var(--navy));border-radius:12px;padding:13px;margin-bottom:11px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:5px}
.pwa-card.slim{gap:3px} .pwa-card-top{display:flex;justify-content:space-between;align-items:center} .pwa-card-top b{font-size:14px}
.pwa-card-row{font-size:12.5px;color:var(--txt)} .pwa-card-act{margin-top:4px;display:flex;gap:6px}
.pwa-doc{width:100%;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:9px;text-align:left;box-shadow:var(--sh)}
.pwa-doc.unread{border-color:#cfe0f5;background:#fafcff}
.pwa-doc-txt{display:flex;flex-direction:column;flex:1} .pwa-doc-txt b{font-size:13px} .pwa-doc-txt small{color:var(--muted)}
.pwa-doc .doc-ic{font-size:22px}
.pwa-profil{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--sh);margin-bottom:12px}
.pwa-profil b{font-size:17px;margin-top:6px} .pwa-profil a{text-decoration:none}
.pwa-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.pwa-stat div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center;box-shadow:var(--sh)}
.pwa-stat b{display:block;font-size:20px;color:var(--navy);font-weight:800} .pwa-stat span{font-size:10.5px;color:var(--muted)}
.pwa-select{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:13.5px;background:#fff}

@media(max-width:640px){
  .content{padding:18px 14px} .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr} .sidebar{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line)}
  .nav-item{white-space:nowrap} .nav-badge,.side-foot{display:none}
  .persp-switch button{padding:7px 10px;font-size:12px} .brand-txt{display:none}
}

/* ===================== Mobile (Smartphone) – Feinschliff ===================== */
@media(max-width:640px){
  /* iOS-Zoom beim Fokus verhindern (Schrift >= 16px) -> Layout verrutscht nicht mehr */
  input,select,textarea,.fld input,.fld select,.flt,.flt-search,.todo-add input,
  .chat-composer input,.pwa-chat-composer input,.topsearch input,.ta,.pwa-select{font-size:16px}

  /* Topbar zweizeilig: Marke/Umschalter/Aktionen oben, Suche volle Breite darunter */
  .topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
  .top-spacer{display:none}
  .brand{order:1} .persp-switch{order:2;margin-left:0} .top-right{order:3;margin-left:auto}
  /* eigene Zeile darunter: Hamburger links + Suche */
  .top-row2{display:flex;order:4;flex:1 1 100%;min-width:0;gap:8px;align-items:center}
  .topsearch{flex:1 1 0;min-width:0;max-width:none}
  .topsearch input{height:38px}
  .search-results{top:44px;max-height:55vh}
  .theme-toggle{width:32px;height:32px} .top-right .avatar{width:32px;height:32px}

  /* Inhalt & Kacheln */
  .content{padding:14px 12px}
  .page-head{margin-bottom:14px} .page-head h1{font-size:20px}
  .hero-kpis{grid-template-columns:repeat(2,1fr)}
  .hk-val{font-size:22px}
  .chart-ctrls{width:100%}
  .dash-bottom{margin-top:14px}
  /* Verlauf-Diagramm passt ohne Querscrollen (schmalere viewBox aus dashChart) */
  .chart-scroll{overflow-x:visible}
  .linechart{min-width:0}

  /* Tabellen kompakter, kein horizontales Überlaufen */
  .tbl th,.tbl td{padding:9px 10px;font-size:12.5px}
  .tbl th{font-size:10px}

  /* Modals: am unteren Rand andocken, mit Tastatur scrollbar */
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:none;max-height:88vh;border-radius:16px 16px 0 0}

  /* Detail-Drawer = Vollbild */
  .drawer{top:0;height:100vh;width:100%;border-left:none}

  /* Sidebar (Seitenmenü) auf dem Handy weg -> Hamburger-Menü (in der Suchzeile, links) */
  .layout{display:block} .sidebar{display:none} .mobile-nav{display:none}
  .hamburger{display:grid;place-items:center;position:relative;flex:none;width:42px;height:38px;padding:0;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;border-radius:10px}
  .hamburger:hover{background:rgba(255,255,255,.22)}
  .hamburger svg{width:22px;height:22px;display:block}
  .mnav-backdrop{display:block} .mnav{display:flex}

  /* Filterleiste kompakter & cleaner */
  .filterbar{gap:8px} .flt-sp{display:none}
  .filterbar .seg-group{flex:1 1 100%} .filterbar .seg-group .seg{flex:1;text-align:center;padding:8px 4px;font-size:12.5px}
  .seg-nav{flex:1 1 100%;justify-content:space-between} .seg-nav .seg.lbl{flex:1;min-width:0}
  .filterbar .flt{flex:1 1 calc(50% - 4px);min-width:0}
  .legend{font-size:11.5px} .legend .muted{display:none}

  /* Such-/Filterfelder volle Breite */
  .flt-search{min-width:0;width:100%;flex:1 1 100%}
  /* Aufgabe-Zeile: Eingabe oben voll, darunter Namens-Dropdown füllt Rest + „+" rechts */
  .todo-add{flex-wrap:wrap} .todo-add input{flex:1 1 100%}
  .todo-add .flt{flex:1 1 auto;width:auto;min-width:0}
  .todo-add .btn.sm{flex:none;min-width:48px}

  /* Kein horizontaler Überlauf: Grid-Items dürfen schmaler als ihr Inhalt werden */
  .layout{min-width:0} .sidebar,.content{min-width:0;max-width:100%}
  .sidebar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cols-2,.cols-dash,.dash-bottom,.ku-grid,.ma-grid,.offer-grid{min-width:0}
  .cols-2>*,.cols-dash>*,.dash-bottom>*,.card{min-width:0}
  /* Tabellen in gepolsterten Karten: feste Spaltenbreiten + Umbruch (kein Überlauf) */
  .card:not(.no-pad) .tbl{table-layout:fixed}
  .card:not(.no-pad) .tbl th,.card:not(.no-pad) .tbl td{white-space:normal;word-break:break-word}
  .card:not(.no-pad) .obj-badge{white-space:normal}
  /* große Listen-Tabellen (eigene Karten) horizontal scrollbar */
  .card.no-pad{overflow-x:auto}
}

/* ============================================================== Dark Mode */
body[data-theme="dark"]{
  --bg:#0e1726; --card:#17223a; --line:#2a3650; --line-2:#202c42;
  --txt:#e6edf7; --muted:#9aa8bd; --muted-2:#6f7e96;
  --navy:#3f7fd6; --navy-700:#4f8fe0; --navy-800:#22304d; --navy-900:#0a1526;
  --steel:#6aa6f2; --gold:#d4af37;
  --ok:#4ade80; --ok-bg:#16341f; --warn:#fbbf24; --warn-bg:#3a2c0a;
  --bad:#f87171; --bad-bg:#3a1616; --info:#7cb0fb; --info-bg:#15294a;
  --hover:#1d2840;
  --sh:0 1px 3px rgba(0,0,0,.45); --sh-lg:0 12px 34px rgba(0,0,0,.55);
}
/* Flächen, die im Light-Mode hart auf Weiß stehen -> Karten-Hintergrund */
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .kpi,
body[data-theme="dark"] .hk,
body[data-theme="dark"] .btn.ghost,
body[data-theme="dark"] .mini,
body[data-theme="dark"] .modal,
body[data-theme="dark"] .fld input,
body[data-theme="dark"] .fld select,
body[data-theme="dark"] .flt,
body[data-theme="dark"] .seg-group,
body[data-theme="dark"] .seg-nav,
body[data-theme="dark"] .ein-chip,
body[data-theme="dark"] .add-chip,
body[data-theme="dark"] .plan-obj,
body[data-theme="dark"] .plan-corner,
body[data-theme="dark"] .month-wrap,
body[data-theme="dark"] .offer-card,
body[data-theme="dark"] .ma-card,
body[data-theme="dark"] .ku-card,
body[data-theme="dark"] .drawer,
body[data-theme="dark"] .pwa-card,
body[data-theme="dark"] .pwa-doc,
body[data-theme="dark"] .pwa-select,
body[data-theme="dark"] .pwa-stat div,
body[data-theme="dark"] .pwa-profil,
body[data-theme="dark"] .ta,
body[data-theme="dark"] .todo-add input,
body[data-theme="dark"] .chat-composer input,
body[data-theme="dark"] .pwa-chat-composer input,
body[data-theme="dark"] .mic-btn,
body[data-theme="dark"] .pwa-seg button,
body[data-theme="dark"] .pwa-chat-switch button,
body[data-theme="dark"] .pwa-mon,
body[data-theme="dark"] .pwa-mon-nav button,
body[data-theme="dark"] .nav-toggle,
body[data-theme="dark"] .icon-btn,
body[data-theme="dark"] .chat-head{background:var(--card);color:var(--txt)}
/* Leichte Grautöne (Header-Zeilen, Hover) -> dunkleres Grau */
body[data-theme="dark"] .tbl th,
body[data-theme="dark"] .tbl tbody tr:hover,
body[data-theme="dark"] .plan-board thead th,
body[data-theme="dark"] .mhead,
body[data-theme="dark"] .clickrow:hover,
body[data-theme="dark"] .conv:hover,
body[data-theme="dark"] .nav-item:hover,
body[data-theme="dark"] .sr-item:hover,
body[data-theme="dark"] .ma-pick:hover,
body[data-theme="dark"] .seg:hover,
body[data-theme="dark"] .btn.ghost:hover,
body[data-theme="dark"] .mini:hover{background:#1d2840}
/* Sehr helle Tönungen -> sehr dunkel */
body[data-theme="dark"] .drop,
body[data-theme="dark"] .up-drop,
body[data-theme="dark"] .hint,
body[data-theme="dark"] .modal-foot,
body[data-theme="dark"] .chat-list,
body[data-theme="dark"] .ma-picklist,
body[data-theme="dark"] .pwa-ck,
body[data-theme="dark"] .pwa-ck-head,
body[data-theme="dark"] .bew-box,
body[data-theme="dark"] .ma-pick-div,
body[data-theme="dark"] .mcell.today,
body[data-theme="dark"] .pm-c.today,
body[data-theme="dark"] .pm-c.has,
body[data-theme="dark"] .msg-banner,
body[data-theme="dark"] .search-results{background:#141e30}
body[data-theme="dark"] .search-results{border-color:var(--line)}
/* Chat */
body[data-theme="dark"] .chat-thread{background:linear-gradient(#10192b,#0e1726)}
body[data-theme="dark"] .bubble{background:#1d2840;border-color:var(--line)}
body[data-theme="dark"] .conv.active{background:#1a2742}
body[data-theme="dark"] .phone-screen{background:var(--bg)}
body[data-theme="dark"] .pwa-doc.unread{background:#16243c;border-color:#2c4366}
/* Balken / Pills / Tags */
body[data-theme="dark"] .bar,
body[data-theme="dark"] .md-bar{background:#243047}
body[data-theme="dark"] .plan-scroll,
body[data-theme="dark"] .chat-composer{background:var(--card)}
/* ✓/✕ (Stunden) & Genehmigen/Ablehnen (Urlaub): farbig statt von .mini überschrieben */
body[data-theme="dark"] .mini.ok{color:var(--ok);border-color:var(--ok)}
body[data-theme="dark"] .mini.bad{color:var(--bad);border-color:var(--bad)}
body[data-theme="dark"] .donut-track{stroke:#243047}
body[data-theme="dark"] .donut-genommen{stroke:#fff}   /* „Genommen"-Bogen im Dark-Mode weiß statt navy */
body[data-theme="dark"] .dl-genommen{background:#fff}
body[data-theme="dark"] .q-pill{background:#1c3050;color:var(--steel)}
body[data-theme="dark"] .chip.light,
body[data-theme="dark"] .pill.muted{background:#243047;color:var(--muted)}
body[data-theme="dark"] .fs-pill.nein{background:#243047;color:var(--muted)}
/* Diagramm */
body[data-theme="dark"] .linechart .grid{stroke:#243047}
body[data-theme="dark"] .linechart .axis{stroke:#3a4a68}
body[data-theme="dark"] .linechart .ylab{fill:#7d8ba6}
body[data-theme="dark"] .linechart .xlab{fill:#9aa8bd}
body[data-theme="dark"] .donut-big{fill:var(--txt)}
/* Sonstiges */
body[data-theme="dark"] .topbar{box-shadow:0 2px 10px rgba(0,0,0,.5)}
body[data-theme="dark"] .nav-item.active{color:#fff}
body[data-theme="dark"] .plan-corner{background:#1d2840 !important}
body[data-theme="dark"] .plan-cell,
body[data-theme="dark"] .plan-board th,
body[data-theme="dark"] .plan-board td{border-color:var(--line)}