:root{
  /* Neutral, cool-toned grays -- the earlier warm/cream bias read as
     "brown" against real content, so these lean neutral-to-cool instead,
     without touching the pink/teal/etc. accent hues. */
  --bg:#F6F7F8;--w:#fff;--bd:#E5E7EA;--bd2:#D3D7DC;
  --tx:#1C1F23;--tx2:#6B7078;--tx3:#9CA1AA;
  /* Same hues, a touch less saturated/bright -- reads calmer and more
     "professional software" than the previous neon versions, without
     losing which color means what. */
  --pk:#D6428F;--pkl:#FDE8F4;
  --tl:#0E8A97;--tll:#E0F4F6;
  --gn:#2FAE5C;--gnl:#DCFCE7;
  --ye:#E0942A;--yel:#FEF3C7;
  --rd:#D64B4B;--rdl:#FEE2E2;
  --bl:#3D6FD6;--bll:#DBEAFE;
  --pu:#7C5CD9;--pul:#EDE9FE;
  --sh:0 1px 3px rgba(33,30,27,.05),0 6px 16px rgba(33,30,27,.05);
  --shm:0 8px 28px rgba(33,30,27,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tx);font-size:13px;display:flex}

/* Login screen */
.login-bg{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;background:linear-gradient(135deg,#FDE8F4 0%,#E0F4F6 100%)}
.login-card{background:var(--w);border-radius:14px;box-shadow:var(--shm);padding:32px;width:420px;max-width:92vw}
.login-title{font-size:22px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.login-title .li{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--pk),#A83872);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px}
.login-sub{font-size:12px;color:var(--tx2);margin-bottom:20px}
.field{margin-bottom:12px}
.field label{font-size:11px;font-weight:600;color:var(--tx2);display:block;margin-bottom:4px}
.field input,.field select{width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:10px;font-family:inherit;font-size:13px;background:var(--w);color:var(--tx)}
.field input:focus,.field select:focus{outline:2px solid var(--pkl);border-color:var(--pk)}
.login-tabs{display:flex;gap:6px;margin-bottom:18px}
.login-tab{flex:1;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:600;text-align:center;cursor:pointer;border:none;background:var(--bg);color:var(--tx2);font-family:inherit}
.login-tab.on{background:var(--pkl);color:var(--pk)}
.user-pill{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;border:1px solid var(--bd);cursor:pointer;transition:all .12s;background:var(--w);width:100%;font-family:inherit;text-align:left;margin-bottom:6px}
.user-pill:hover{border-color:var(--pk);background:var(--pkl)}
.user-pill .ua{width:30px;height:30px}

.sb{width:198px;flex-shrink:0;background:var(--w);border-right:1px solid var(--bd);display:flex;flex-direction:column;height:100vh}
.sb-logo{padding:15px 13px 11px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:9px}
.li{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--pk),#A83872);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0}
.sb-nav{padding:10px 8px;flex:1;overflow-y:auto}
.ns{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3);padding:8px 6px 4px}
.ni{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--tx2);margin-bottom:1px;transition:all .12s;border:none;background:none;font-family:inherit;width:100%;text-align:left}
.ni:hover{background:var(--bg);color:var(--tx)}
/* Neutral selected state (not forced pink) so it doesn't fight the per-
   section badge color next to it -- e.g. selecting "Controlling" (amber
   badge) no longer paints the whole row pink. */
.ni.on{background:var(--bg);color:var(--tx);font-weight:600;box-shadow:inset 2px 0 0 var(--pk)}
/* Small colored icon badge per nav item (grouped by section) instead of a
   bare emoji floating with no color -- leans into color as the visual
   device the way the reference design's feature-card icons do. */
.ni-ico{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.nb{margin-left:auto;background:var(--pk);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px}
.sb-user{padding:10px 12px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:9px;cursor:pointer;position:relative}
.sb-user:hover{background:var(--bg)}
.ua{width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}

/* User popup */
.user-popup{position:absolute;bottom:54px;left:8px;right:8px;background:var(--w);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--shm);padding:8px;z-index:100;max-height:60vh;overflow-y:auto}
.user-popup h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3);padding:6px 4px}
.user-popup-item{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;cursor:pointer}
.user-popup-item:hover{background:var(--bg)}
.user-popup-item.on{background:var(--pkl)}
.user-popup-item .ua{width:26px;height:26px;font-size:9px}

/* Organization switcher */
.sb-org{padding:10px 13px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:9px;cursor:pointer;position:relative}
.sb-org:hover{background:var(--bg)}
.org-popup{position:absolute;top:calc(100% + 4px);left:8px;right:8px;background:var(--w);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--shm);padding:8px;z-index:100;max-height:60vh;overflow-y:auto}
.org-popup h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3);padding:6px 4px}
.org-popup-item{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;cursor:pointer;font-size:12px}
.org-popup-item:hover{background:var(--bg)}
.org-popup-item.on{background:var(--pkl);color:var(--pk);font-weight:600}

.main{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}
.topbar{height:48px;background:var(--w);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0}
.topbar-t{font-size:15px;font-weight:700;flex:1}
.content{flex:1;overflow-y:auto;padding:18px 20px}

.btn{padding:6px 12px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .12s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.btn-pk{background:var(--pk);color:#fff}.btn-pk:hover{background:#A83872}
.btn-g{background:var(--w);color:var(--tx);border:1px solid var(--bd)}.btn-g:hover{background:var(--bg);border-color:var(--bd2)}
.btn-rd{background:var(--rd);color:#fff}.btn-rd:hover{background:#dc2626}
.card{background:var(--w);border:1px solid var(--bd);border-radius:14px;padding:18px;box-shadow:var(--sh)}
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:600}
.bg{background:var(--gnl);color:#16A34A}.by{background:var(--yel);color:#D97706}.br{background:var(--rdl);color:#DC2626}
.bb{background:var(--bll);color:#2563EB}.bp{background:var(--pul);color:#7C3AED}.bpk{background:var(--pkl);color:var(--pk)}
.bgr{background:var(--bg);color:var(--tx2);border:1px solid var(--bd)}.bt{background:var(--tll);color:var(--tl)}
.pbar{height:5px;background:var(--bg);border-radius:99px;overflow:hidden}.pfill{height:100%;border-radius:99px;transition:width .3s}
.av{width:26px;height:26px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;border:2px solid var(--w)}
.avs{display:flex}.avs .av{margin-left:-6px}.avs .av:first-child{margin-left:0}
.ph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.pt{font-size:17px;font-weight:700}.ps{font-size:11px;color:var(--tx2);margin-top:2px}
.vs{display:flex;gap:3px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:2px}
.vb{padding:4px 10px;border-radius:5px;font-size:11px;font-weight:500;cursor:pointer;border:none;background:none;font-family:inherit;color:var(--tx2);transition:all .12s}
.vb.on{background:var(--w);color:var(--tx);box-shadow:var(--sh);font-weight:600}
.view{display:none}.view.on{display:block}
select,input,textarea{background:var(--w);border:1px solid var(--bd);color:var(--tx);padding:5px 9px;border-radius:8px;font-family:inherit;font-size:12px}
input[type=date]{padding:4px 8px}
button{cursor:pointer}

.week-badge{background:var(--pkl);color:var(--pk);border:1px solid rgba(233,30,140,.2);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
/* The 2W/4W/8W planning-window toggle inline inside the week-badge pill --
   shares the Dashboard forecast chart, Dashboard KPI tiles, and
   Team-Übersicht utilization (see state.planningWeeks in app.js). */
.wb-btn{background:transparent;border:1px solid rgba(233,30,140,.35);color:var(--pk);border-radius:5px;padding:1px 6px;font-size:10px;font-weight:700;cursor:pointer;line-height:1.5}
.wb-btn.on{background:var(--pk);color:#fff;border-color:var(--pk)}
.wb-btn:hover:not(.on){background:rgba(233,30,140,.12)}

.empty{color:var(--tx3);font-size:12px;text-align:center;padding:20px}

/* DASHBOARD */
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.sc{background:var(--w);border:1px solid var(--bd);border-radius:14px;padding:15px;box-shadow:var(--sh)}
.si{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:10px}
.sv{font-size:24px;font-weight:700;line-height:1}.sl{font-size:11px;color:var(--tx2);margin-top:3px}.sd{font-size:10px;margin-top:5px}
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
/* Fixed height (not just min-height) so every tile is identical regardless
   of row. .pf pins to the bottom via margin-top:auto so leftover space (a
   one-line title, no alert box) is absorbed invisibly in the middle instead
   of the footer drifting or the card resizing. */
.pc{background:var(--w);border:1px solid var(--bd);border-left:3px solid var(--bd);border-radius:14px;padding:14px;cursor:grab;transition:all .15s;box-shadow:var(--sh);position:relative;display:flex;flex-direction:column;height:224px;overflow:hidden}
.pc:hover{box-shadow:var(--shm)}
.pc.drag-src{opacity:.35;transform:scale(.98)}.pc.drag-ov{outline:2px dashed var(--pk);outline-offset:2px;background:var(--pkl)}
.drag-h{position:absolute;top:10px;right:10px;color:var(--tx3);font-size:11px;cursor:grab}
tr.ms-drag-row{cursor:grab}
tr.ms-drag-row.drag-src{opacity:.35}
tr.ms-drop-row.ms-drop-hover td{background:var(--pkl)!important;box-shadow:inset 0 0 0 2px var(--pk)}
tr.ms-drag-row.ms-drop-hover td{box-shadow:inset 0 2px 0 var(--pk)}
tr.ms-drag-row .drag-handle{cursor:grab}
.pc-alert{display:flex;align-items:center;gap:6px;background:var(--rdl);border-radius:6px;padding:3px 7px;min-width:0;flex:1;margin-left:8px}
.pc-alert-ic{width:13px;height:13px;border-radius:50%;background:var(--w);color:var(--rd);display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}
.pc-alert-tx{min-width:0;font-size:10px;line-height:1.4;color:var(--rd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn{font-size:14px;font-weight:700;margin-bottom:3px;padding-right:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm{font-size:10px;color:var(--tx2);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-av{display:inline-block;vertical-align:middle;margin-right:5px}
/* Tinted inset box (same var(--bg)-on-var(--w) idiom already used for the
   "4-Wochen-Fenster" etc. sidebar panels in Projektdetail) instead of a bare
   divider-row -- the numbers need to read as the card's headline stat, not
   blend into the surrounding text. */
.pmg{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;margin-bottom:10px;background:var(--bg);border-radius:10px;padding:9px 4px}
.pmg-div{width:1px;background:var(--bd);height:26px;justify-self:center}
.pmi{text-align:center}.pmv{font-size:17px;font-weight:700;line-height:1.2;margin-top:2px}.pml{font-size:9px;color:var(--tx3);text-transform:uppercase;letter-spacing:.02em}
.pf{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}

/* Apple Health/Stocks-style chart entrance, shared by every line/area chart
   in the app (Dashboard forecast + Projektdetail Meilenstein-Timeline) so
   they read as one consistent chart language: gradient-filled smooth curves
   that grow up from their own baseline rather than just appearing. */
@keyframes chartGrow{from{transform:scaleY(.82);opacity:0}to{transform:scaleY(1);opacity:1}}
.chart-grow{transform-origin:bottom;animation:chartGrow .55s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion: reduce){.ms-util-chart{animation:none}}

/* KANBAN */
.kboard{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;height:calc(100vh - 148px)}
.kcol{width:242px;flex-shrink:0;background:var(--bg);border-radius:10px;border:1px solid var(--bd);display:flex;flex-direction:column;max-height:100%}
.kcol-status{width:auto;flex:1 1 242px;min-width:242px}
.kch{padding:10px 12px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--bd);flex-shrink:0}
.kcd{width:8px;height:8px;border-radius:99px;flex-shrink:0}.kct{font-size:12px;font-weight:700;flex:1}
.kcc{background:var(--w);border:1px solid var(--bd);border-radius:99px;font-size:10px;font-weight:600;padding:1px 6px;color:var(--tx2)}
.ktasks{padding:8px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;flex:1;min-height:60px}

/* CRM Pipeline board: a fixed, small number of columns (Lead/Opportunity/
   Customer/Verloren) next to a KPI sidebar -- unlike the project Kanban
   (many columns, meant to scroll), these should always fit side by side
   without horizontal scrolling. Equal-share flex columns instead of the
   default fixed+non-shrinking width, and no horizontal scrollbar. */
#crm-pipeline-board{overflow-x:visible}
#crm-pipeline-board .kcol{width:auto;flex:1 1 0;min-width:0;flex-shrink:1}

/* The whole "Zuordnung" card is user-resizable (vertical only) -- native
   CSS resize handle in the bottom-right corner, height persisted per-user
   via ResizeObserver (see initTicketBoardResize in app.js). #ticket-board
   itself no longer sets its own fixed viewport-based height (that's now
   only the *initial* height, via .ticket-board-card's own height below);
   it just flex-grows to fill however tall the card currently is. */
.ticket-board-card{display:flex;flex-direction:column;resize:vertical;overflow:hidden;height:calc(100vh - 190px);min-height:340px;max-height:96vh}
.ticket-board-card > div:first-child{flex-shrink:0}
#ticket-board{flex:1 1 auto;min-height:0;height:auto}

/* Ticket board: Posteingang + Archiv are stacked in a fixed-width left
   column (its card lists scroll internally via .ktasks -- height never
   grows with volume, however many hundred emails land in them); every
   project column flows in its own wrapping grid to the RIGHT of that
   column, one column per project can mean many more columns than a task/
   pipeline board ever has, so those wrap into rows instead of forcing a
   single horizontally-scrolling strip. Everything fits the card's current
   height (draggable by the user) instead of the page itself scrolling. */
/* #ticket-board already gets its height from flex-grow (see above) inside
   height:calc(100vh - ...)). Both the left column and the projects grid are
   pinned to height:100% of that fixed height instead of being left to size
   from content -- with align-items:stretch alone (no explicit height) a
   project grid with enough rows to exceed the left column's height would
   stretch the WHOLE board taller to match it (defeating the single-screen
   goal); pinning both to height:100% plus overflow-y:auto on the grid means
   extra project rows scroll internally instead. */
#ticket-board{display:flex;gap:12px;align-items:stretch}
#ticket-board .kcol{width:auto;max-height:560px}
.ticket-board-left{flex:0 0 300px;height:100%;min-height:0;display:flex;flex-direction:column;gap:12px}
/* Archiv is a fixed, deliberately small strip below the Posteingang (it
   only ever holds a few days' worth of tickets) -- Posteingang takes
   whatever height is left over via flex-grow. */
#ticket-board .kcol-inbox{flex:1 1 auto;min-height:0;max-height:none}
#ticket-board .kcol-archive{flex:0 0 150px;max-height:none}
/* 2 columns, each project cell a fixed height -- with more projects than
   fit in the available rows, the grid scrolls internally (overflow-y:auto)
   rather than growing past the left column's height. */
#ticket-board-projects{flex:1;min-width:0;height:100%;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:210px;gap:12px;align-content:start}
#ticket-board-projects .kcol{max-height:210px}
@media (max-width:900px){
  #ticket-board{flex-direction:column;height:auto}
  .ticket-board-left{flex-basis:auto;width:100%;height:auto}
  #ticket-board .kcol-inbox{min-height:320px}
  #ticket-board-projects{width:100%;height:auto;max-height:560px}
}
@media (max-width:600px){
  #ticket-board-projects{grid-template-columns:1fr}
}

/* Compact KPI row (e.g. Tickets' 8-tile status breakdown) -- narrower tiles
   than the default .sg so they all fit on a single row on one screen
   instead of wrapping across several. */
.sg-compact{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
.sg-compact .sc{padding:8px 10px}
.sg-compact .si{width:24px;height:24px;font-size:11px;margin-bottom:6px}
.sg-compact .sv{font-size:18px}
.sg-compact .sl{font-size:10px}
.kcard{background:var(--w);border:1px solid var(--bd);border-radius:10px;padding:10px;cursor:grab;transition:all .15s;box-shadow:var(--sh);user-select:none;position:relative}
.kcard:hover{box-shadow:var(--shm);border-color:var(--bd2)}.kcard.dragging{opacity:.4}.kcard.drag-ov{border:2px dashed var(--pk);background:var(--pkl)}
.kactions{position:absolute;top:6px;right:6px;display:flex;gap:2px;opacity:0;transition:opacity .12s;background:var(--w);border-radius:6px;box-shadow:var(--sh)}
.kcard:hover .kactions{opacity:1}
.kactions button{border:none;background:none;cursor:pointer;font-size:11px;padding:3px 5px;border-radius:5px;color:var(--tx2);line-height:1}
.kactions button:hover{background:var(--bg);color:var(--tx)}
.ktitle{font-size:12px;font-weight:600;line-height:1.3;margin-bottom:4px}.kproj{font-size:10px;color:var(--tx2);margin-bottom:5px}
.kdep{font-size:10px;color:var(--tx3);background:var(--bg);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;display:inline-block;margin-bottom:5px}
.kft{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid var(--bd)}
.kddate{font-size:10px;color:var(--tx3)}.kddate.late{color:var(--rd);font-weight:600}.khours{font-size:10px;background:var(--bg);padding:2px 6px;border-radius:5px;color:var(--tx2);font-family:monospace}
.dropzone{border:2px dashed var(--bd);border-radius:8px;padding:10px;text-align:center;font-size:10px;color:var(--tx3);margin:0 8px 4px;transition:all .15s;flex-shrink:0}
.dropzone.active{border-color:var(--pk);background:var(--pkl);color:var(--pk)}
.pb-dropzone.active{border-color:var(--pk) !important;background:var(--pkl) !important;color:var(--pk) !important}
.kadd{display:flex;align-items:center;gap:5px;padding:7px 8px;color:var(--tx3);font-size:11px;cursor:pointer;border-radius:8px;margin:0 8px 8px;transition:all .12s;flex-shrink:0}
.kadd:hover{background:var(--w);color:var(--pk)}

/* Ticket board: cards fade/slide in on every render (assignment, status
   reset, filter change) so a moved ticket reads as having moved, not just
   appeared in a different spot after a silent re-render. */
@keyframes ticket-card-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
#ticket-board .kcard{animation:ticket-card-in .22s ease-out}
@media (prefers-reduced-motion: reduce){#ticket-board .kcard{animation:none}}

/* DETAIL */
.dg{display:grid;grid-template-columns:1fr 272px;gap:14px}
.istrip{display:flex;border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:var(--w);box-shadow:var(--sh);margin-bottom:14px;flex-wrap:wrap}
.ic{flex:1;min-width:120px;padding:10px 14px;border-right:1px solid var(--bd)}.ic:last-child{border-right:none}
.il{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}.iv{font-size:14px;font-weight:700}
.tt{width:100%;border-collapse:collapse}
.tt th{text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);padding:8px 10px;border-bottom:1px solid var(--bd);background:var(--bg)}
.tt td{padding:9px 10px;border-bottom:1px solid var(--bd);vertical-align:middle}
.tt tbody tr:hover td{background:var(--bg)}.tt tbody tr:last-child td{border-bottom:none}
.chk{width:15px;height:15px;border-radius:4px;border:2px solid var(--bd2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;background:var(--w)}
.chk.done{background:var(--gn);border-color:var(--gn);color:#fff;font-size:9px}
.dep{font-size:9px;color:var(--tx3);background:var(--bg);border:1px solid var(--bd);border-radius:3px;padding:1px 4px}
.sw{background:var(--w);border:1px solid var(--bd);border-radius:10px;padding:12px;margin-bottom:10px;box-shadow:var(--sh)}
.swt{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:10px}

/* TIMELINE/GANTT */
.gwrap{background:var(--w);border:1px solid var(--bd);border-radius:10px;overflow:hidden;box-shadow:var(--sh)}
.grow{display:grid;border-bottom:1px solid var(--bd);min-height:46px;transition:background .1s}
.grow:last-child{border-bottom:none}
.grow:hover{background:var(--bg)}
.grow:hover .gtask{background:var(--bg)}
.gtask{padding:8px 12px;font-size:12px;display:flex;align-items:center;gap:7px;background:var(--w);border-right:1px solid var(--bd);position:sticky;left:0;z-index:6;transition:background .1s}
.gchart{position:relative;min-height:46px}
/* One shared "bar" language across the chart: same radius/shadow/weight for
   the future bar, past-entry chips, and the off-window flush marker, so a
   row's mix of past + future segments reads as one bar, not several
   differently-styled pieces bolted together. State (deadline breach, etc.)
   layers a ring on top instead of swapping the shape. */
.gbar{position:absolute;top:50%;transform:translateY(-50%);border-radius:6px;display:flex;align-items:center;padding:0 7px;font-size:9px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;overflow:hidden;transition:filter .1s,box-shadow .1s}
.gbar:hover{filter:brightness(.9)}
/* Elevated variant for the single-project Gantt's one continuous "remaining
   work" bar per row -- a soft shadow instead of a hard border gives it depth
   without changing its box model, and a deadline breach layers a matching
   red ring on top instead of swapping to a differently-shaped bar. */
.gbar-elevated{box-shadow:0 1px 3px rgba(0,0,0,.14);text-shadow:0 0 2px rgba(0,0,0,.35)}
.gbar-elevated:hover{box-shadow:0 2px 7px rgba(0,0,0,.2)}
.gbar-elevated.gbar-deadline{box-shadow:0 0 0 2px #7C2D12,0 2px 7px rgba(0,0,0,.2)}
.gbar-past{position:absolute;top:50%;transform:translateY(-50%);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;box-sizing:border-box;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 1px 3px rgba(0,0,0,.14);overflow:hidden}
.gbar-flush{position:absolute;top:50%;transform:translateY(-50%);width:8px;opacity:.65;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.14);transition:opacity .1s}
.gbar-flush:hover{opacity:.85}

/* Drag-to-connect dependency handle at each task bar's end */
.gdep-handle{position:absolute;width:10px;height:10px;margin-left:-5px;margin-top:-5px;border-radius:50%;background:var(--pk);border:2px solid var(--w);box-shadow:0 0 0 1px var(--pk);cursor:crosshair;opacity:0;transition:opacity .15s,transform .15s}
.grow:hover .gdep-handle{opacity:.85}
.gdep-handle:hover{opacity:1;transform:scale(1.3)}
#gantt-content.gdep-dragging .gdep-handle{opacity:0;pointer-events:none}
.grow.gdep-drop-target .gchart{background:var(--pkl);outline:2px dashed var(--pk);outline-offset:-2px}
.gnow{position:absolute;top:0;bottom:0;width:2px;background:var(--pk);opacity:.75;z-index:5}
.gweek{position:absolute;top:0;bottom:0;border-left:1px dashed var(--bd2);z-index:2}

/* PERSONAL */
.daybar{flex:1;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 3px;cursor:pointer;font-size:10px;font-weight:600;border:1px solid transparent;transition:all .12s;min-width:38px}
.daybar:hover{border-color:var(--bd2)}
.daybar.off{background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 3px,var(--bd) 3px,var(--bd) 4px);color:var(--tx3)}
.daybar.free{background:var(--bg);color:var(--tx3)}.daybar.low{background:#DCFCE7;color:#16A34A}
.daybar.mid{background:#FEF3C7;color:#D97706}.daybar.high{background:#FEE2E2;color:#DC2626}

.queue-row{display:flex;border-bottom:1px solid var(--bd);align-items:stretch}
.queue-row:last-child{border-bottom:none}
.queue-label{width:200px;flex-shrink:0;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;background:var(--w);border-right:1px solid var(--bd);position:sticky;left:0;z-index:6}
.queue-name{font-size:11px;font-weight:600}
.queue-proj{font-size:10px;color:var(--tx2);margin-top:1px}
.queue-chart{position:relative;flex:1;min-height:38px;background:var(--bg)}
.qbar{position:absolute;height:22px;border-radius:5px;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding:0 8px;font-size:10px;font-weight:700;color:#fff;white-space:nowrap;cursor:pointer;overflow:hidden}
.qbar:hover{filter:brightness(.92)}

.prio-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--bd);cursor:grab;transition:background .1s;user-select:none;background:var(--w)}
.prio-row:hover{background:var(--bg)}
.prio-row:last-child{border-bottom:none}

/* TEAM */
.tmt{width:100%;border-collapse:collapse}
.tmt th{text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);padding:9px 12px;border-bottom:1px solid var(--bd);background:var(--bg)}
.tmt td{padding:10px 12px;border-bottom:1px solid var(--bd);vertical-align:middle}
.tmt tbody tr:hover td{background:var(--bg)}
.wlbar{height:6px;background:var(--bg);border-radius:99px;overflow:hidden;width:100px}
.wlfill{height:100%;border-radius:99px}
.ptag{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;background:var(--bg);border:1px solid var(--bd);border-radius:99px;font-size:10px;margin:1px}
.pdot{width:5px;height:5px;border-radius:99px;flex-shrink:0}

/* NOTIF */
.nitem{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-bottom:1px solid var(--bd);cursor:pointer;transition:background .1s}
.nitem:hover{background:var(--bg)}.nitem.unread{border-left:3px solid var(--pk)}
.nico{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ntit{font-size:12px;font-weight:600;margin-bottom:1px}.nsub{font-size:11px;color:var(--tx2)}.ntime{font-size:10px;color:var(--tx3);white-space:nowrap}
.tog{width:36px;height:20px;border-radius:99px;position:relative;cursor:pointer}
.tog.on{background:var(--pk)}.tog.off{background:var(--bd2)}
.tog::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:99px;top:3px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.tog.on::after{left:19px}.tog.off::after{left:3px}

/* Calendar */
.cal-grid{background:var(--w);border:1px solid var(--bd);border-radius:10px;overflow:hidden;box-shadow:var(--sh)}
.cal-row{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--bd)}
.cal-row:last-child{border-bottom:none}
.cal-hd{text-align:center;padding:8px;font-size:10px;font-weight:600;text-transform:uppercase;color:var(--tx2);border-right:1px solid var(--bd);background:var(--bg)}
.cal-hd:last-child{border-right:none}
.cal-day{border-right:1px solid var(--bd);padding:7px;min-height:85px}.cal-day:last-child{border-right:none}
.cal-day.tod{background:#FFF8FC}.cal-day.off{background:var(--bg)}.cal-day.othermonth{background:var(--bg);opacity:.5}.cal-day.weekend{background:#F9FAFB}
.cal-bk{font-size:9px;font-weight:700;color:var(--tl);background:var(--tll);border-radius:3px;padding:1px 4px;margin-bottom:3px;display:inline-block}
.cal-dn{font-size:10px;font-weight:600;color:var(--tx2);margin-bottom:4px}
.cal-dn.tn{width:18px;height:18px;background:var(--pk);color:#fff;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:9px}
.cal-ev{font-size:9px;font-weight:600;padding:2px 5px;border-radius:4px;margin-bottom:2px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Modal */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999;align-items:center;justify-content:center}
.modal-bg.on{display:flex}
.modal{background:var(--w);border-radius:16px;padding:22px;width:480px;max-width:92vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shm)}
.modal.modal-wide{width:min(1160px, 95vw)}
/* Fixed row height (instead of plain align-items:stretch, whose resolved
   height depended on content and left the OUTER .modal ALSO scrolling
   alongside the chat list's own internal scroll -- two active scroll
   regions stacked on top of each other reads as "scrolling is weird" since
   the wheel's target depends on exact cursor position). Each column owns
   exactly one well-defined scroll area, both starting/ending at the same
   height. This value is a fallback for the instant before JS measures the
   left column's actual content (see alignTaskDetailColumns) and overrides
   it inline -- short tasks shrink the row so the chat panel's bottom lands
   exactly where the left column's content (the button row) ends, instead
   of always stretching to this full budget. */
.td-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;height:calc(90vh - 130px);min-height:420px}
.td-left-col{overflow-y:auto;min-height:0;padding-right:4px}
.td-chat{display:flex;flex-direction:column;height:100%;min-height:0;border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--bg)}
.td-chat-head{padding:10px 12px;border-bottom:1px solid var(--bd);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--tx3);flex-shrink:0}
.td-chat-list{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.td-chat-input{padding:8px;border-top:1px solid var(--bd);display:flex;gap:6px;flex-shrink:0;background:var(--w)}
.td-chat-input textarea{resize:none;flex:1}
.mention-dropdown{position:absolute;bottom:calc(100% + 4px);left:8px;right:8px;max-height:180px;overflow-y:auto;background:var(--w);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shm);z-index:20;padding:4px}
.mention-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:12px;cursor:pointer}
.mention-opt.active,.mention-opt:hover{background:var(--pkl)}

/* Reusable searchable user-picker */
.upicker{position:relative}
.upicker-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px;min-height:22px}
.upicker-empty{font-size:11px;color:var(--tx3)}
.upicker-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--bd);border-radius:99px;padding:2px 8px 2px 3px;font-size:11px;color:var(--tx)}
.upicker-chip-x{cursor:pointer;color:var(--tx3);font-size:13px;line-height:1;padding:0 1px}
.upicker-chip-x:hover{color:var(--rd)}
.upicker-input{width:100%;box-sizing:border-box}
.upicker-list{position:absolute;top:calc(100% + 2px);left:0;right:0;max-height:200px;overflow-y:auto;background:var(--w);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--shm);z-index:20;padding:4px}
.upicker-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:12px;cursor:pointer}
.upicker-opt:hover{background:var(--pkl)}
.upicker-opt.sel{background:var(--bg)}
.tdeps-details{margin-bottom:12px;border:1px solid var(--bd);border-radius:8px;padding:8px 10px;background:var(--bg)}
.tdeps-details[open]{padding-bottom:10px}
.tdeps-details summary{font-size:10px;font-weight:600;color:var(--tx2);cursor:pointer;list-style:none;user-select:none}
.tdeps-details summary::-webkit-details-marker{display:none}
.tdeps-details summary::before{content:"▸";display:inline-block;width:12px;color:var(--tx3);transition:transform .1s}
.tdeps-details[open] summary::before{transform:rotate(90deg)}
.tdeps-details[open] summary{margin-bottom:2px}
.tdeps-count{color:var(--pk);font-weight:700}
.tdeps-details .upicker{margin-top:6px}
.td-checklist-box{border:1px solid var(--bd);border-radius:10px;padding:6px;background:var(--bg);max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.td-checklist-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;background:var(--w);transition:background .12s}
.td-checklist-item:hover{background:var(--pkl)}
.td-checklist-item input[type="checkbox"]{width:16px;height:16px;accent-color:var(--pk);cursor:pointer;flex-shrink:0}
.td-checklist-item .txt{flex:1;font-size:12px}
.td-checklist-item .txt.done{text-decoration:line-through;color:var(--tx3)}
.td-checklist-item button{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:14px;line-height:1;opacity:0;transition:opacity .12s;flex-shrink:0}
.td-checklist-item:hover button{opacity:1}
.td-checklist-item button:hover{color:var(--rd)}
.td-checklist-item .drag-handle{color:var(--tx3);cursor:grab;font-size:13px;line-height:1;opacity:0;transition:opacity .12s;flex-shrink:0}
.td-checklist-item:hover .drag-handle{opacity:1}
@media (max-width: 760px) {
  .td-layout{grid-template-columns:1fr;height:auto;min-height:0}
  .td-left-col{overflow-y:visible}
  .td-chat{height:360px;min-height:0}
}
/* Native multi-selects (e.g. task "Zugewiesen") default to the OS's blue/grey
   selection highlight, which clashes with the app's pink accent -- match it
   instead so a selected option reads as "chosen", not "system default". */
.modal select[multiple] option:checked{background:var(--pkl) linear-gradient(0deg, var(--pkl) 0%, var(--pkl) 100%);color:var(--pk);font-weight:600}
.modal h3{font-size:15px;font-weight:700;margin-bottom:6px}
.modal .sub{font-size:11px;color:var(--tx2);margin-bottom:14px}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.modal label{font-size:10px;font-weight:600;color:var(--tx2);display:block;margin-bottom:4px}
.modal input,.modal select,.modal textarea{width:100%;padding:7px 10px;border:1px solid var(--bd);border-radius:8px;font-family:inherit;font-size:12px}
.modal input[type="checkbox"]{width:auto;padding:0;border:none;flex-shrink:0}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

.toast{position:fixed;bottom:20px;right:20px;background:var(--tx);color:#fff;padding:10px 16px;border-radius:10px;font-size:12px;z-index:9999;box-shadow:var(--shm);opacity:0;transform:translateY(10px);transition:all .25s}
.toast.on{opacity:1;transform:translateY(0)}

.empg{display:grid;grid-template-columns:300px 1fr;gap:14px}

/* Add task floating bar */
.add-task-row{display:grid;grid-template-columns:1fr 1fr 100px 100px auto;gap:8px;align-items:end}

/* Overrun (Stunden überschritten) */
.overrun-chip{display:inline-flex;align-items:center;gap:3px;background:var(--rd);color:#fff;border-radius:99px;padding:1px 6px;font-size:9px;font-weight:700;white-space:nowrap}
.overrun-soft{background:var(--rdl);color:var(--rd);font-weight:600;padding:1px 6px;border-radius:4px;font-size:9px;display:inline-flex;align-items:center;gap:3px}
.overrun-stripe{background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(239,68,68,.35) 4px,rgba(239,68,68,.35) 7px),var(--rd);position:absolute;height:100%;top:0;border-radius:5px}

/* Queue overlay markers */
.qmark{position:absolute;top:0;bottom:0;pointer-events:none;z-index:1}
.qmark.weekend{background:repeating-linear-gradient(135deg,rgba(168,176,192,.18) 0,rgba(168,176,192,.18) 4px,transparent 4px,transparent 7px)}
.qmark.vacation{background:rgba(0,151,167,.12);border-left:2px solid var(--tl);border-right:2px solid var(--tl)}
.qmark.meeting{background:rgba(245,158,11,.12);border-left:2px solid var(--ye);border-right:2px solid var(--ye)}
.qmark.sick{background:rgba(239,68,68,.10);border-left:2px solid var(--rd);border-right:2px solid var(--rd)}
.qmark.training{background:rgba(34,197,94,.10);border-left:2px solid var(--gn);border-right:2px solid var(--gn)}
.qmark-lbl{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;background:var(--w);padding:0 4px;border-radius:3px;white-space:nowrap;pointer-events:none}

/* Burger / mobile */
.burger{display:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--bd);background:var(--w);color:var(--tx);font-size:18px;cursor:pointer;flex-shrink:0;align-items:center;justify-content:center;font-family:inherit}
.burger:hover{background:var(--bg)}

/* Topbar layout: allow it to scroll on small screens */
.topbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.topbar-t{flex-shrink:0;min-width:120px}

/* RESPONSIVE — Tablet */
@media (max-width: 1100px) {
  .dg{grid-template-columns:1fr}
  .empg{grid-template-columns:1fr}
  .istrip{flex-wrap:wrap}
  .ic{flex:1 0 30%}
  #kanban-layout{flex-direction:column}
  #kanban-absences{flex-basis:auto;width:100%;max-height:none}
}

/* RESPONSIVE — Mobile */
@media (max-width: 760px) {
  .sb{position:fixed;left:0;top:0;bottom:0;z-index:200;transform:translateX(-100%);transition:transform .2s ease;width:240px}
  .sb.show{transform:translateX(0);box-shadow:var(--shm)}
  .main{margin-left:0 !important}
  .burger{display:inline-flex}
  .topbar{padding:0 10px;gap:6px}
  .week-badge{display:none}
  .content{padding:12px}
  .ph{flex-direction:column;align-items:stretch;gap:8px}
  .ph > div:last-child{display:flex;flex-wrap:wrap;gap:6px}
  .pg{grid-template-columns:1fr}
  .sg{grid-template-columns:repeat(2,1fr)}
  .istrip{flex-direction:column}
  .ic{border-right:none;border-bottom:1px solid var(--bd)}
  .ic:last-child{border-bottom:none}
  .modal{padding:16px;width:96vw;max-height:94vh}
  .modal .row{grid-template-columns:1fr}
  .topbar-t{font-size:13px;min-width:90px}
  /* Backdrop when sidebar open */
  body.sb-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150}
}

/* Larger desktops: more density */
@media (min-width: 1600px) {
  .content{padding:22px 28px}
  .pg{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
}
@media (min-width: 2000px) {
  .pg{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
}

/* Timeline / Gantt: handle scrollable horizontally */
.gwrap{overflow-x:auto}
#gantt-container{max-width:100%}

/* Generic scrollbars - subtle */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--tx3)}
::-webkit-scrollbar-track{background:transparent}

/* Multi-project gantt grouping */
.gantt-group-header{background:var(--bg);padding:6px 12px;font-size:11px;font-weight:700;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px}
.gantt-group-header .pdot{width:8px;height:8px;border-radius:99px}

/* Gantt bar layers */
.gbar-bg{position:absolute;top:50%;transform:translateY(-50%);border-radius:5px;cursor:pointer}
.gbar-bg:hover{filter:brightness(1.1)}
.gbar-lbl{position:absolute;top:50%;transform:translateY(-50%);z-index:7;border-radius:5px}
.gbar-marker{position:absolute;border-radius:1px}
.gbar-overrun-ext{position:absolute;top:50%;transform:translateY(-50%)}

/* "Heute" line + label */
.gnow-label{position:absolute;background:var(--pk);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:99px;white-space:nowrap;transform:translateX(-50%);z-index:9;top:2px;box-shadow:var(--sh)}
.gnow-label.bottom{top:auto;bottom:2px}

/* Task date label (on left of bar in Gantt rows) */
.task-date-lbl{position:absolute;font-size:9px;color:var(--tx3);transform:translateX(-100%) translateY(-50%);top:50%;padding-right:6px;white-space:nowrap;pointer-events:none}

/* Subtask booking history (inline, expandable) */
.subtask-bookings{background:var(--bg);padding:8px 14px;border-bottom:1px solid var(--bd);font-size:11px}
.subtask-bookings .se{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--bd)}
.subtask-bookings .se:last-child{border-bottom:none}

/* Project breadcrumb / actions strip */
.project-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:8px 12px;background:var(--w);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--sh)}
.project-actions .label{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;margin-right:6px}