.ico{flex-shrink:0} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0} .dot-lg{width:14px;height:14px} :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} /* Landing page: public marketing pitch, no auth form -- a real product screenshot instead of a feature list, one primary action ("Kostenlos starten"), login reachable via the nav. Hands off to the separate #login-screen card below (see app.js showAuthScreen/showLandingScreen). */ .landing-bg{position:relative;display:flex;flex-direction:column;width:100vw;height:100vh;height:100dvh;overflow-y:auto;background:var(--bg)} .landing-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;flex-shrink:0;flex-wrap:wrap;gap:10px} .landing-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px} .landing-nav-actions{display:flex;align-items:center;gap:20px} .landing-nav-link{font-size:12.5px;color:var(--tx2);text-decoration:none;font-weight:600} .landing-nav-link:hover{color:var(--tx)} .landing-hero{flex:1;display:flex;align-items:center;gap:48px;max-width:1200px;width:100%;margin:0 auto;padding:16px 32px 36px} .landing-hero-copy{flex:1;min-width:0;max-width:420px} .landing-hero-copy h1{font-size:32px;font-weight:800;line-height:1.24;margin-bottom:12px} .landing-sub{font-size:14px;color:var(--tx2);line-height:1.6;margin-bottom:22px} .landing-cta-row{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap} .landing-cta{padding:11px 22px;font-size:13.5px} .landing-cta-link{font-size:11.5px;color:var(--tx2);text-decoration:underline} .landing-trust{font-size:11px;color:var(--tx3)} /* container-type so the callout badges below can size themselves in cqw (% of THIS element's own width) -- ties their font-size/padding to how large the screenshot itself is actually rendered, so they stay the same RELATIVE size at any viewport instead of the fixed-px approach that previously made them balloon to oversized once the image scaled down from its native capture width and cover the content they point at. */ .landing-shot-wrap{position:relative;flex:1.55;min-width:0;container-type:inline-size} .landing-shot{display:block;width:100%;border-radius:12px;border:1px solid var(--bd);box-shadow:0 20px 50px rgba(28,31,35,.16),0 4px 14px rgba(28,31,35,.08)} /* A quiet, looping product tour: each badge pops in over its anchor, holds, then fades before the next one takes its turn. All six share one 18s timeline (six 3s slots) via the SAME keyframes -- a negative animation-delay just rewinds each badge's personal clock into a different slot, so they never need their own @keyframes or JS scheduling to stay in sequence. */ .shot-tag{position:absolute;background:#000;box-shadow:var(--shm);border-radius:99px;padding:clamp(3px,0.55cqw,7px) clamp(7px,1.3cqw,14px);font-size:clamp(9px,1.05cqw,13px);font-weight:700;color:#fff;white-space:nowrap;pointer-events:none;opacity:0;animation:shotTagTour 18s cubic-bezier(.22,1,.36,1) infinite} .shot-tag:nth-of-type(1){animation-delay:0s} .shot-tag:nth-of-type(2){animation-delay:-15s} .shot-tag:nth-of-type(3){animation-delay:-12s} .shot-tag:nth-of-type(4){animation-delay:-9s} .shot-tag:nth-of-type(5){animation-delay:-6s} .shot-tag:nth-of-type(6){animation-delay:-3s} @keyframes shotTagTour{ 0%{opacity:0;transform:translate(-50%,-35%) scale(.85)} 4%{opacity:1;transform:translate(-50%,-50%) scale(1)} 13%{opacity:1;transform:translate(-50%,-50%) scale(1)} 16.5%{opacity:0;transform:translate(-50%,-62%) scale(.92)} 100%{opacity:0;transform:translate(-50%,-62%) scale(.92)} } @media (prefers-reduced-motion:reduce){ .shot-tag{animation:none;opacity:1;transform:translate(-50%,-50%)} } /* One flowing row, not a boxed-in grid or a row of pills -- no background of its own (blends straight into the page background), just a minimal dot bullet + text per item, wrapping only if it doesn't fit. */ .landing-capabilities{width:100%;max-width:900px;margin:0 auto;padding:0 32px 4px;flex-shrink:0;transform:translateY(-40px)} .landing-cap-kicker{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);text-align:center;margin-bottom:16px} .landing-cap-grid{display:flex;justify-content:center;flex-wrap:wrap;row-gap:10px;column-gap:28px} .landing-cap-grid div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);font-weight:500} .landing-cap-grid div::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gn);flex-shrink:0} .landing-bg .login-footer{margin:26px 0 32px} @media (max-width:900px){ .landing-hero{flex-direction:column;padding:6px 20px 30px;gap:28px} .landing-hero-copy{max-width:520px;text-align:center} .landing-cta-row{justify-content:center} .landing-shot-wrap{width:100%} .shot-tag{display:none} /* The -40px tuck above is tuned for the desktop side-by-side layout; stacked on mobile it pulls this section up into the screenshot's bottom edge instead. */ .landing-capabilities{transform:none} } @media (max-width:480px){ .landing-nav{padding:14px 18px} .landing-nav-link-opt{display:none} .landing-hero-copy h1{font-size:24px} } /* Login / register card -- reached via "Kostenlos starten"/"Einloggen" above, or directly for a deep link (invite, password reset, SSO error). */ .login-bg{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100vw;height:100vh;height:100dvh;overflow-y:auto;background:var(--bg);padding:28px 20px} .login-footer{position:relative;z-index:1;flex-shrink:0;text-align:center;font-size:11.5px;color:var(--tx3)} .login-footer a{color:var(--tx2);text-decoration:none;font-weight:600} .login-footer a:hover{text-decoration:underline} .login-card{position:relative;z-index:1;background:var(--w);border-radius:14px;box-shadow:var(--shm);padding:26px;width:400px;max-width:100%;flex-shrink:0} .login-back-link{display:inline-block;font-size:11.5px;font-weight:600;color:var(--tx2);text-decoration:none;margin-bottom:14px} .login-back-link:hover{color:var(--pk)} .login-title{font-size:22px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:10px} .login-sub{font-size:12px;color:var(--tx2);margin-bottom:16px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .field{margin-bottom:10px} .field label{font-size:11px;font-weight:600;color:var(--tx2);display:block;margin-bottom:4px} .field input,.field select{width:100%;padding:8px 10px;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)} .sso-btn{width:100%;justify-content:center;padding:9px;margin-bottom:6px;text-decoration:none} .sso-divider{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:11px;color:var(--tx3)} .sso-divider::before,.sso-divider::after{content:"";flex:1;height:1px;background:var(--bd)} .login-tabs{display:flex;gap:6px;margin-bottom:14px} .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(--pk);color:#fff} .interval-tabs{display:flex;gap:6px;margin-bottom:14px;max-width:280px} .interval-tab{flex:1;padding:6px 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} .interval-tab.on{background:var(--pk);color:#fff} .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} .pw-strength{display:flex;align-items:center;gap:8px;margin:-4px 0 10px} .pw-strength-track{flex:1;height:5px;border-radius:99px;background:var(--bd)} .pw-strength-fill{height:100%;border-radius:99px;transition:width .15s ease,background-color .15s ease} .pw-strength-fill.weak{background:var(--rd)} .pw-strength-fill.medium{background:var(--ye)} .pw-strength-fill.strong{background:var(--gn)} .pw-strength-label{font-size:10.5px;font-weight:700;flex-shrink:0} .pw-strength-label.weak{color:var(--rd)} .pw-strength-label.medium{color:var(--ye)} .pw-strength-label.strong{color:var(--gn)} .pw-reqs{margin:-2px 0 10px;display:flex;flex-direction:column;gap:2px} .pw-req{font-size:10.5px;color:var(--tx3)} .pw-req.ok{color:var(--gn)} /* Registration: "Mit Vorlage starten" / "Leeres Projekt" choice */ .reg-start-opts{display:flex;gap:8px} .reg-start-opt{flex:1;display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:10px;border:1px solid var(--bd);background:var(--w);cursor:pointer;text-align:left;font-family:inherit} .reg-start-opt:hover{border-color:var(--bd2)} .reg-start-opt.on{border-color:var(--pk);background:var(--pkl)} .reg-start-ico{font-size:16px;flex-shrink:0} .reg-start-title{font-size:12px;font-weight:600;color:var(--tx)} .reg-start-sub{font-size:10.5px;color:var(--tx2);margin-top:1px} /* Sidebar and topbar float as rounded cards (same language as .hub-card) instead of edge-to-edge bars with hairline borders. */ .sb{width:198px;flex-shrink:0;background:var(--w);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--sh);overflow:hidden;margin:12px 0 12px 12px;display:flex;flex-direction:column;height:calc(100vh - 24px);height:calc(100dvh - 24px)} .sb-logo{padding:15px 13px 11px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:9px} .sb-close{display:none;margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--bd);background:var(--w);color:var(--tx);font-size:15px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit} .sb-close:hover{background:var(--bg)} .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;min-height:0} .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} .ni-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nb{flex-shrink:0;margin-left:auto;background:var(--pk);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px} .nb-lock{background:var(--tx3)} .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;height:100dvh;overflow:hidden;min-width:0;padding-top:12px} .topbar{height:52px;background:var(--w);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);margin:0 16px;display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0} .topbar-t{font-size:15px;font-weight:700;flex:1} .content{flex:1;overflow-y:auto;padding:16px} .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)} .row-ib{background:none;border:none;color:var(--tx3);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;line-height:0;transition:background .12s,color .12s}.row-ib:hover{background:var(--bg);color:var(--tx)}.row-ib.del:hover{color:var(--rd)} .row-ib+.row-ib{margin-left:2px} .btn-rd{background:var(--rd);color:#fff}.btn-rd:hover{background:#dc2626} .btn-am{background:#FFB32E;color:#fff}.btn-am:hover{background:#E6A029} .card{background:var(--w);border:1px solid var(--bd);border-radius:14px;padding:18px;box-shadow:var(--sh)} .resizable-list{resize:vertical;overflow-y:auto;min-height:44px} .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:6px} /* Pill nav rows (Meine Aufgaben, project sub-nav): btn-pk has no border while btn-g has 1px, and emoji glyphs (⏱) inflate the line box -- pin both so every pill is the same height, also when the row wraps on mobile. */ .pill-nav{align-items:center} .pill-nav>.btn{height:30px;line-height:16px;box-sizing:border-box} .pill-nav>.btn-pk{border:1px solid var(--pk)} /* Borderless .vb segments need the grey track to show which one is active */ .vs:has(> .vb){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} /* Filter bar (CRM lists/pipeline): one grid, every field label-over-control with identical label height and control height, so labels and boxes line up in a row instead of drifting with each control's intrinsic size. */ .filter-bar{padding:14px 16px;margin-bottom:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-items:end} .fb-field{display:flex;flex-direction:column;gap:4px;min-width:0} .fb-field.fb-wide{grid-column:span 2} .fb-field>label{font-size:10.5px;font-weight:500;color:var(--tx2);line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fb-field>input,.fb-field>select{width:100%;min-width:0;height:32px;padding:0 10px} .filter-bar .fb-reset{height:32px;justify-self:start;white-space:nowrap} @media (max-width:640px){.fb-field.fb-wide{grid-column:1/-1}} 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} /* Same light-pink-chip treatment as the "Heute" marker and the milestone accent border elsewhere on this page, instead of a solid pk fill -- a same-size box in solid color next to outlined siblings reads as visually heavier/bigger than they are, which is exactly what made the selected week button look "taller" than the others despite being the same box size. */ .wb-btn.on{background:var(--pkl);color:var(--pk);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} .attach-dropzone{flex:1;min-width:220px;border:1px dashed var(--bd);border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:border-color .15s,background .15s} .attach-dropzone.drag-over{border-color:var(--pk);background:var(--pkl)} .upload-panel{position:fixed;right:16px;bottom:16px;z-index:1200;width:360px;max-width:calc(100vw - 32px);max-height:50vh;overflow-y:auto;background:var(--bg2,var(--bg));border:1px solid var(--bd);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:11px} .upload-panel-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--bd);font-weight:700;font-size:12px;position:sticky;top:0;background:inherit} .upload-panel-row{padding:8px 10px;border-bottom:1px dashed var(--bd)} .upload-panel-row:last-child{border-bottom:none} .upload-panel-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .upload-panel-bar{height:4px;border-radius:2px;background:var(--bd);margin:5px 0;overflow:hidden} .upload-panel-bar>div{height:100%;width:0;background:var(--pk);transition:width .2s} .upload-panel-row.ok .upload-panel-bar>div{background:var(--gn)} .upload-panel-row.err .upload-panel-bar>div{background:var(--rd);width:100%} .upload-panel-status{color:var(--tx2);word-break:break-word} .upload-panel-row.err .upload-panel-status{color:var(--rd)} /* Plan gating (see plans.py / app.js applyPlanStateToNav, planLockedHtml): a module not included in the org's current plan stays visible but dimmed, rather than being hidden or only failing after a click -- reuses the app's existing "muted = reduced opacity" idiom (e.g. .pc.drag-src) instead of a blur, which is cheaper to keep legible in dark mode. */ .ni-locked{opacity:.5} .sb-nav.hide-locked .ni.ni-locked{display:none} .locked-badge{display:inline-flex;align-items:center;gap:4px;background:var(--pkl);color:var(--pk);font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px} .locked-cta{border-color:var(--pkl)} /* Nav entries for modules the org hasn't switched on at all stay collapsed by default (clean sidebar during normal use) but can be revealed with one click via #nav-more-toggle, so users can still discover what's available -- see app.js applyPlanStateToNav / toggleHiddenNavModules. */ .ni.ni-hidden{display:none} .sb-nav.show-hidden .ni.ni-hidden{display:flex} .ni-more{display:none;align-items:center;justify-content:center;gap:6px;width:100%;padding:7px 8px;margin-top:6px;border:1px dashed var(--bd);border-radius:8px;background:none;color:var(--tx3);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit} .ni-more:hover{background:var(--bg);color:var(--tx2)} /* DASHBOARD */ .sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px} /* min-width:0 stops a .sc whose content can't shrink (e.g. the donut-chart tile's flex row: fixed-size SVG + text side by side) from forcing its grid track past minmax()'s 180px floor -- without it, that one track's content-based automatic minimum can blow the whole .sg row wider than its container, and since .main clips overflow, the excess silently disappears off the right edge instead of wrapping or scrolling. */ .sc{background:var(--w);border:1px solid var(--bd);border-radius:14px;padding:15px;box-shadow:var(--sh);min-width:0} .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:0 14px 14px 0;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} /* Touch drag & drop (see initTouchDnD in app.js): native HTML5 [draggable] never fires from a touchscreen, so touch gestures are bridged into the same dragstart/dragover/drop events every *DnD() setup function already listens for. -webkit-touch-callout/user-select keep a long-press from opening the OS text-selection/callout menu on every draggable card, row or handle instead of picking it up. */ [draggable="true"]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} .touch-drag-ghost{position:fixed;pointer-events:none;z-index:99999;opacity:.92;box-shadow:var(--shm);transform:scale(1.03)} 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.pmg-2{grid-template-columns:1fr auto 1fr} .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);height:calc(100dvh - 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} /* Ticket Kanban: six fixed columns (Posteingang -> Archiviert) that share the width equally and only scroll horizontally on narrow screens; each column's card list scrolls on its own, so the board stays one screen tall. */ .tk-board{height:calc(100vh - 330px);height:calc(100dvh - 330px);min-height:420px;overflow-x:hidden} .tk-board .tk-col{width:auto;flex:1 1 0;min-width:0;transition:background .12s,border-color .12s} .tk-board .kct{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-col-btn{white-space:nowrap;flex-shrink:0} @media (max-width:1600px){.tk-col-btn span{display:none}} .tk-board .tk-col.drop-ov{border-color:var(--pk);background:var(--pkl)} .tk-col-btn{padding:1px 6px;font-size:10px} .tk-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .tk-toolbar select,.tk-toolbar input{width:auto} .tk-search{min-width:240px;flex:0 1 300px} .tk-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--tx2);cursor:pointer;white-space:nowrap} .tk-check input{width:auto} .tk-dot-hint{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pk)} .tk-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:6px} .tk-card-head .ktitle{margin-bottom:2px;word-break:break-word} .tk-card-head .row-ib{margin:-4px -4px 0 0} .tk-sender{font-size:10px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} .tk-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--tx2);background:var(--bg);border:1px solid var(--bd);border-radius:99px;padding:1px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-card .kft{gap:6px} .tk-timer{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--tx2);font-variant-numeric:tabular-nums} .tk-timer.run{color:var(--tx)} .tk-warn-label{flex:1;min-width:0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tk-warn,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-av-empty{width:22px;height:22px;border-radius:99px;border:1px dashed var(--bd2);color:var(--tx3);display:inline-flex;align-items:center;justify-content:center} .tk-unread{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pk);margin-right:5px;vertical-align:1px} /* Timer-Regel überschritten: card tinted in the rule's color, with a matching left edge so it reads even at a glance across the board. */ .tk-card.tk-warn{background:color-mix(in srgb,var(--tk-warn) 12%,var(--w));border-color:color-mix(in srgb,var(--tk-warn) 55%,var(--bd));box-shadow:inset 3px 0 0 var(--tk-warn),var(--sh)} .tk-card.tk-warn .tk-timer{color:var(--tx)} .tk-suggest{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx2);background:var(--pkl);border-radius:8px;padding:7px 10px;margin:4px 0 12px} .tk-suggest .ico{color:var(--pk)} .tk-req{color:var(--pk)} .tk-swatch{display:inline-block;width:16px;height:16px;border-radius:5px;flex-shrink:0} .tk-swatch-btn{border:none;cursor:pointer;width:20px;height:20px} .tk-detail-timer{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px 14px;margin-bottom:12px} .tk-detail-timer-v{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums} .tk-detail-timer-l{font-size:10px;color:var(--tx2);margin-top:2px} .tk-num,.tmt th.tk-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* Auswertung: grouped weekly bars (Eingang/Abschluss), plain HTML. */ .tk-legend{display:flex;gap:14px;font-size:11px;color:var(--tx2)} .tk-legend span{display:inline-flex;align-items:center;gap:5px} .tk-legend i{width:10px;height:10px;border-radius:3px;display:inline-block} .tk-weeks{display:flex;gap:10px;align-items:stretch;height:170px;border-bottom:1px solid var(--bd)} .tk-week{flex:1;display:flex;flex-direction:column;min-width:0;cursor:default;border-radius:6px;padding:4px 2px 0} .tk-week:hover{background:var(--bg)} .tk-week-bars{flex:1;display:flex;gap:2px;align-items:flex-end;justify-content:center} .tk-bar{width:min(18px,40%);min-height:2px;border-radius:4px 4px 0 0} .tk-week-label{font-size:10px;color:var(--tx3);text-align:center;padding:4px 0} .hr-tabs.tk-tabs{margin:4px 0 14px} @media (max-width:900px){ .tk-board{height:auto;max-height:none;overflow-x:auto} .tk-board .tk-col{max-height:560px;min-width:232px} .tk-search{flex-basis:100%} } /* 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 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 */ /* minmax(0,1fr) everywhere below (not bare 1fr): a bare `1fr` track's automatic minimum is its content's min-content size, so a wide descendant anywhere inside the column (e.g. a .tt/.tmt table with its own min-width -- see the mobile table rule further down) forces the WHOLE grid track, and with it every sibling card sharing that column, wider than the viewport -- overflowing the entire page horizontally instead of just scrolling inside that one table's own card. minmax(0,1fr) has an explicit 0 minimum, so the track still shrinks to the container and only that one table scrolls internally, exactly as intended. */ .dg{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:14px} /* Dateien view: narrow project-folder list beside the wide file list -- was previously an inline style="grid-template-columns:260px 1fr" on .dg, which (being an inline style) always outranked the responsive .dg rules below, so the two columns never stacked on mobile and the file list was silently clipped off the right edge of the screen. */ .dg-files{grid-template-columns:260px minmax(0,1fr)} .prio-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px} .owner-milestone-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;align-items:stretch;margin-bottom:14px} .cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px} .crm-pipeline-layout{display:flex;gap:14px;align-items:flex-start} .crm-stat-sidebar{display:flex;flex-direction:column;gap:8px;width:200px;flex:0 0 200px} .pl-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px} .two-col-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px} .two-col-grid-tables{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom: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} /* Summary widgets (Kanban sidebar, Projektdetail sidebar) -- icon + title + a hero number, generously rounded/spaced in the vein of an Apple Health/Fitness widget rather than a dense data table. */ .widget{background:var(--w);border:1px solid var(--bd);border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:var(--sh);transition:box-shadow .2s,border-color .2s} .widget:hover{box-shadow:var(--shm);border-color:var(--bd2)} .widget-hd{display:flex;align-items:center;gap:9px;margin-bottom:14px} .widget-ico{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0} .widget-title{font-size:12px;font-weight:700;color:var(--tx);letter-spacing:-.01em;flex:1;min-width:0} .widget-big{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1} .widget-sub{font-size:11px;color:var(--tx3);margin-top:3px} .widget-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;padding:6px 0} .widget-row+.widget-row{border-top:1px solid var(--bg)} .widget-row .l{color:var(--tx2)} .widget-row .v{font-weight:700;font-variant-numeric:tabular-nums} .widget-empty{font-size:11px;color:var(--tx3);padding:4px 0} /* Brief highlight pulse on a value that just changed on re-render (e.g. after a Kanban status drag) -- a plain innerHTML swap is invisible as an "update", so freshly-changed numbers get one flash to confirm it landed. Plays automatically since the element is newly inserted into the DOM. */ @keyframes widget-pop{0%{transform:scale(1)}40%{transform:scale(1.08);color:var(--pk)}100%{transform:scale(1)}} .widget-flash{animation:widget-pop .5s ease-out} @media (prefers-reduced-motion: reduce){.widget-flash{animation:none}} /* 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%);min-width:8px;box-sizing:border-box;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} .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)} /* Scrollable contract list: header and yearly-sum footer stay visible while scrolling */ .contract-table-scroll thead th{position:sticky;top:0;z-index:1} .contract-table-scroll tfoot td{position:sticky;bottom:0;background:var(--w);border-top:1px solid var(--bd)} /* Contract list: compact cells so all columns fit the card without horizontal scrolling */ .contract-table{width:100%} .contract-table th,.contract-table td{padding:8px 7px;vertical-align:top} .contract-table th:first-child,.contract-table td:first-child{padding-left:14px} .contract-table .num{text-align:right;white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums} .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} /* Wraps the (internally scrolling) .modal box so the close button can sit fixed at its corner without scrolling away with the content, and without being wiped by showModal()'s innerHTML replacement of #modal-content. */ .modal-wrap{position:relative;max-width:92vw;max-height:90vh;max-height:90dvh} .modal{background:var(--w);border-radius:16px;padding:18px;width:480px;max-width:92vw;max-height:90vh;max-height:90dvh;overflow-y:auto;box-shadow:var(--shm)} .modal.modal-wide{width:min(1160px, 95vw)} /* Mid-size for dense forms (e.g. project modal) that feel cramped at 480px */ .modal.modal-md{width:min(640px, 95vw);padding:22px} .modal.modal-md .row{gap:16px;margin-bottom:12px} .modal.modal-md .field{margin-bottom:12px} .modal .hint{font-size:10px;color:var(--tx3);margin-top:4px;line-height:1.4} .modal-close{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:99px;border:1px solid var(--bd);background:var(--w);color:var(--tx2);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shm);z-index:1} .modal-close:hover{background:var(--bg);color:var(--tx)} /* 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:minmax(0,1fr) 360px;gap:22px;height:calc(90vh - 130px);height:calc(90dvh - 130px);min-height:420px} .td-left-col{overflow-y:auto;overflow-x:hidden;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} .td-chat.drop-hover{outline:2px dashed var(--pk);outline-offset:-4px} .td-chat-attach{align-self:flex-end;padding:8px 9px} .td-chat-pending{gap:6px;padding:8px 8px 0;border-top:1px solid var(--bd);background:var(--w);flex-wrap:wrap;flex-shrink:0} .td-pending-img{position:relative;width:58px;height:58px;border-radius:8px;overflow:hidden;border:1px solid var(--bd);background:var(--bg)} .td-pending-img img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block} .td-pending-img button{position:absolute;top:3px;width:18px;height:18px;border-radius:99px;border:none;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .td-pending-del{right:3px} .td-pending-edit{left:3px} .td-chat-imgs{display:grid;grid-template-columns:repeat(2,minmax(0,120px));gap:4px;margin-bottom:3px} .td-chat-imgs.single{grid-template-columns:minmax(0,220px)} .td-chat-img{padding:0;border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--bg);cursor:zoom-in;display:block;min-height:60px} .td-chat-img img{display:block;width:100%;max-height:220px;object-fit:cover} .td-chat-imgs:not(.single) .td-chat-img img{height:100px} .td-chat-img.broken{cursor:default;min-height:40px} .td-chat-img.broken::after{content:"Bild nicht verfügbar";display:block;padding:10px;font-size:10px;color:var(--tx3)} .img-overlay{position:fixed;inset:0;z-index:1500;background:rgba(10,10,14,.88);display:flex;flex-direction:column} .img-overlay-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;flex-shrink:0;color:#fff;flex-wrap:wrap} .img-overlay-count{font-size:12px;opacity:.8} .img-overlay-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px 16px;position:relative} .img-overlay-stage img,.img-overlay-stage canvas{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff} .img-overlay-stage canvas{cursor:crosshair;touch-action:none} .img-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:99px;border:none;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .img-nav:hover{background:rgba(255,255,255,.28)} .img-nav.prev{left:14px} .img-nav.next{right:14px} .annot-bar{justify-content:flex-start} .annot-group{display:flex;gap:4px;align-items:center;padding:3px;border-radius:9px;background:rgba(255,255,255,.08)} .annot-btn{width:32px;height:32px;border-radius:7px;border:none;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .annot-btn:hover{background:rgba(255,255,255,.14)} .annot-btn.on{background:var(--pk)} .annot-dot{display:block;border-radius:99px;background:currentColor} .annot-color{width:22px;height:22px;border-radius:99px;border:2px solid rgba(255,255,255,.35);cursor:pointer;padding:0;margin:0 2px} .annot-color.on{border-color:#fff;box-shadow:0 0 0 2px var(--pk)} .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:13px;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} /* Opened when there isn't enough room below the field (e.g. the picker sits near the bottom of a scrolling modal on a small/mobile screen) -- flips the list above the input instead of leaving it clipped by the modal's own overflow:auto, which otherwise hid most options below the fold. */ .upicker-list.upicker-up{top:auto;bottom:calc(100% + 2px)} .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:6px;border:1px solid var(--bd);border-radius:8px;padding:5px 8px;background:var(--bg)} .tdeps-details[open]{padding-bottom:8px} .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;cursor:text} .td-checklist-item .txt.done{text-decoration:line-through;color:var(--tx3)} .td-checklist-item .td-checklist-edit{flex:1;font-size:12px;font-family:inherit;color:inherit;background:var(--w);border:1px solid var(--pk);border-radius:5px;padding:2px 6px;min-width:0} .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:minmax(0,1fr);height:auto;min-height:0} /* overflow-x:hidden is inherited from the base (unmedia'd) rule above -- per the CSS overflow spec, if one axis is 'visible' and the other isn't, the 'visible' axis is silently computed as 'auto' instead. Left alone that quietly re-creates the cramped inner scrollbox this rule is meant to remove, so overflow-x needs the same override. */ .td-left-col{overflow-y:visible;overflow-x: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:4px} .modal .sub{font-size:11px;color:var(--tx2);margin-bottom:10px} .modal .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:6px} .modal .row-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)} .modal label{font-size:10px;font-weight:600;color:var(--tx2);display:block;margin-bottom:3px} .modal input,.modal select,.modal textarea{width:100%;padding:6px 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 .field{margin-bottom:6px} .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px} .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;pointer-events:none} .toast.on{opacity:1;transform:translateY(0)} .version-label{position:fixed;bottom:4px;right:8px;font-size:10px;color:var(--tx3);opacity:.45;z-index:1;pointer-events:none;user-select:none} .empg{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px} /* Add task floating bar */ .add-task-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,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:17px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;background:var(--w);padding:1px 4px;border-radius:3px;white-space:nowrap;pointer-events:none;z-index:4;box-shadow:0 0 0 1px var(--bd)} /* 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:minmax(0,1fr)} .empg{grid-template-columns:minmax(0,1fr)} .prio-layout{grid-template-columns:minmax(0,1fr)} .owner-milestone-grid{grid-template-columns:minmax(0,1fr)} .cal-layout{grid-template-columns:minmax(0,1fr)} .crm-pipeline-layout{flex-direction:column;align-items:stretch} .crm-stat-sidebar{width:100%;flex:1 1 auto} .two-col-grid-tables{grid-template-columns:minmax(0,1fr)} .istrip{flex-wrap:wrap} .ic{flex:1 0 30%} /* #kanban-layout's inline align-items:flex-start is meant for the desktop row layout (board + sidebar top-aligned side by side) -- stacked into a column here, that same flex-start leaves .kboard sized to its own max-content width (the full un-clipped sum of every column) instead of stretching to the viewport, so its overflow-x:auto scrollbar never had anything to actually constrain: columns past the first were simply clipped by .main's overflow:hidden with no way to scroll to them at all. Stretch makes .kboard's own box match the container width again, so the horizontal scroll it already sets up actually engages. */ #kanban-layout{flex-direction:column;align-items:stretch!important} #kanban-absences{flex-basis:auto;width:100%;max-height:none} /* The sidebar's inline flex:0 0 260px turns into a 260px HEIGHT once the layout is a column, and its margin-left:auto shoved the widgets right (half-width, off-center) instead of stretching them under the board. */ #kanban-sidebar{flex:0 0 auto!important;margin-left:0!important;max-height:none!important;overflow:visible!important} } /* RESPONSIVE — Mobile */ @media (max-width: 760px) { .sb{position:fixed;left:0;top:0;bottom:0;height:auto;margin:0;border-left:none;border-radius:0 16px 16px 0;z-index:200;transform:translateX(-100%);transition:transform .2s ease;width:240px} .main{padding-top:8px} .sb.show{transform:translateX(0);box-shadow:var(--shm)} .main{margin-left:0 !important} .burger{display:inline-flex} .sb-close{display:inline-flex} .topbar{padding:0 10px;gap:6px;margin:0 8px} .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:minmax(0,1fr)} .sg{grid-template-columns:repeat(2,minmax(0,1fr))} .two-col-grid{grid-template-columns:minmax(0,1fr)} .pl-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Two KPIs per row instead of one -- a single column turned the project detail strip into eight full-width rows, a whole screen of numbers. */ .istrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .ic{min-width:0;border-right:none;border-bottom:1px solid var(--bd)} .ic:nth-child(odd){border-right:1px solid var(--bd)} .ic:last-child,.ic:nth-last-child(2):nth-child(odd){border-bottom:none} .ic:last-child:nth-child(odd){grid-column:1/-1;border-right:none} /* An odd number of stat cards leaves the last one alone at half width. */ .sg > .sc:last-child:nth-child(odd){grid-column:1/-1} .modal{padding:16px;width:96vw;max-height:94vh;max-height:94dvh} .modal .row{grid-template-columns:minmax(0,1fr)} .topbar-t{font-size:13px;min-width:90px} .add-task-row{grid-template-columns:minmax(0,1fr)} /* Backdrop when sidebar open */ body.sb-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150} /* Kanban-style boards (project Kanban, ticket board, CRM pipeline, personal board): one column at a time with a peek of the next, snapping into place on swipe, instead of a slice of 2-3 fixed-242px columns that never lines up with the screen edge. */ .kboard,#pb-board{scroll-snap-type:x mandatory} .kcol-status,.pb-col{scroll-snap-align:start} .kcol-status{flex:0 0 88vw;width:88vw;min-width:0} #pb-board .pb-col{flex:0 0 88vw!important;min-width:0!important} /* The project Kanban's own board no longer needs the desktop's precise "100vh minus header" height (that offset assumes the single-line desktop topbar+filter row, not the taller wrapped mobile header) -- each column instead caps its own height and scrolls its task list internally, so the page can still be scrolled to reach the sidebar widgets below the board. */ .kboard{height:auto;max-height:none} .kcol-status{max-height:min(65dvh,520px)} /* Bigger touch targets for the org/user switcher popups -- the default 6px/7px padding is comfortable with a mouse pointer but easy to mis-tap on a phone. */ .org-popup-item,.user-popup-item{padding:11px 9px;font-size:13px} .sb-org,.sb-user{padding:13px} /* Data tables (.tt/.tmt): on a phone-width viewport a table's columns shrink to fit before the browser ever engages horizontal scroll, which squeezes every cell's text down to one word (or one character) per line instead of scrolling -- exactly the "Alle Buchungen" / project task table breakage. Giving the table a floor width forces the scroll that .card[style*="overflow:hidden"] (below) already enables instead of letting content get crushed. */ .tt,.tmt{min-width:560px} /* The task table's "Stunden buchen" button is the one action button that still carries a text label (its siblings -- edit/archive/delete -- are already icon-only with a title tooltip); at this width that label alone was inflating the actions column past 200px, dragging the table's own natural width far beyond the 560px floor above and pushing every other column offscreen. Icon-only here too, matching the siblings. */ .tt .btn-txt{display:none} /* Flex rows inside modals (e.g. a