:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1b2430; --muted:#667386; --line:#e4e8ee;
  --primary:#44546a; --primary-ink:#fff; --primary-soft:#e9edf3; --accent:#ffc83d; --brand:#818b99;
  --ok:#1a8f5a; --ok-soft:#e1f5ea; --warn:#b7791f; --warn-soft:#fdf1d8; --bad:#d23f4f; --bad-soft:#fde6e8;
  --blue:#2f6fed; --blue-soft:#e6eefe; --radius:14px; --sidebar:236px;
  --shadow:0 1px 2px rgba(20,30,50,.05),0 4px 16px rgba(20,30,50,.04);
  color-scheme:light;
}
/* Dunkel: manuell gewählt ... */
:root[data-theme="dark"]{
  --bg:#11161d; --card:#1a212b; --ink:#e8edf3; --muted:#95a1b2; --line:#29323f;
  --primary:#9db0cc; --primary-ink:#0e1520; --primary-soft:#232e3d; --brand:#8d98a8;
  --ok:#3fbf86; --warn:#e0a63c; --bad:#ef6b79;
  --ok-soft:#173a2a; --warn-soft:#3b2f14; --bad-soft:#3d1c21; --blue-soft:#1b2a47;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;
}
/* ... oder automatisch nach Geräteeinstellung */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#11161d; --card:#1a212b; --ink:#e8edf3; --muted:#95a1b2; --line:#29323f;
  --primary:#9db0cc; --primary-ink:#0e1520; --primary-soft:#232e3d; --brand:#8d98a8;
  --ok:#3fbf86; --warn:#e0a63c; --bad:#ef6b79;
  --ok-soft:#173a2a; --warn-soft:#3b2f14; --bad-soft:#3d1c21; --blue-soft:#1b2a47;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1{font-size:24px;margin:0 0 4px;font-weight:650;letter-spacing:-.01em}
h2{font-size:16px;margin:0 0 12px;font-weight:620}
.sub{color:var(--muted)} .small{font-size:13px} .right{margin-left:auto} .hidden{display:none!important}
a{color:var(--primary)}

/* Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--card);border-right:1px solid var(--line);padding:20px 12px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;gap:2px;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;padding:4px 10px 20px}
.logo{width:30px;height:30px;border-radius:9px;background:var(--primary);display:grid;place-items:center;color:var(--primary-ink)}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--muted);margin-top:-2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:520}
.nav a:hover{background:var(--bg)}
.nav a.on{background:var(--primary-soft);color:var(--primary)}
.nav svg{width:20px;height:20px;flex:none}
.nav .badge{margin-left:auto}
.side-foot{margin-top:auto;padding:10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.main{margin-left:var(--sidebar);flex:1;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:18px 32px 0;max-width:1560px}
.content{padding:20px 32px 48px;max-width:1560px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.row{display:flex;align-items:center;gap:10px}.wrap{flex-wrap:wrap}.between{justify-content:space-between}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}

/* Bits */
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:650;font-size:13px;flex:none}
.avatar.sm{width:24px;height:24px;font-size:10px}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:11px;font-weight:700}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--bg);color:var(--muted)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}.chip.blue{background:var(--blue-soft);color:var(--blue)}.chip.pri{background:var(--primary-soft);color:var(--primary)}
.btn{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 16px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:hover{background:var(--bg)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad)}.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.big{padding:14px 22px;font-size:16px;border-radius:12px}.btn.sm{padding:5px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 5px}
.field{margin-bottom:14px}.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--muted);padding:28px 8px}
.kpi{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.bar{height:8px;border-radius:5px;background:var(--bg);overflow:hidden}.bar i{display:block;height:100%;background:var(--primary);border-radius:5px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:6px}
.seg{display:inline-flex;background:var(--bg);border-radius:10px;padding:3px}
.seg button{border:0;background:none;padding:6px 14px;border-radius:8px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}

/* Stempeluhr */
.clock{text-align:center;padding:28px 20px}
.clock .time{font-size:54px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.clock .btns{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--muted)}.dot.on{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}.dot.br{background:var(--warn)}

/* Kalender */
.cal{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.cal .wkh{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.cal .wkh div{padding:8px;font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.cal .wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);min-height:92px}
.cal .wk:last-child{border-bottom:0}
.cal .d{grid-row:1/-1;box-shadow:inset -1px 0 0 var(--line);padding:5px 6px;cursor:pointer;display:flex;gap:5px;align-items:flex-start;min-width:0;background:var(--card)}
.cal .d.out{background:var(--bg);opacity:.7}.cal .d.we{background:color-mix(in srgb,var(--bg) 60%,var(--card))}
.cal .d.today .n{background:var(--primary);color:var(--primary-ink)}
.cal .d.sel{outline:2px solid var(--primary);outline-offset:-2px;background:var(--primary-soft)}
.cal .n{font-size:12px;font-weight:600;min-width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.cal .hol{font-size:10px;color:var(--warn);font-weight:600;line-height:1.25;padding-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .bar{z-index:2;pointer-events:none;align-self:center;height:20px;line-height:20px;margin:0 3px;padding:0 7px;border-radius:6px;background:var(--c);color:#fff;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .bar.click{pointer-events:auto;cursor:pointer}.cal .bar.click:hover{filter:brightness(1.1)}
.cal .bar.cs{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.cal .bar.ce{margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}
.cal .bar.ho{background:transparent;color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c)}
.cal .bar.pend{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,transparent) 0 6px,color-mix(in srgb,var(--c) 14%,transparent) 6px 12px);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--c);border-style:dashed}
.cal .bar.bday{background:color-mix(in srgb,#f59e0b 22%,var(--card));color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 55%,transparent)}
.pill{font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill.homeoffice{background:transparent!important;border:1.5px dashed currentColor}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.selbar{position:sticky;bottom:78px;margin-top:14px;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;display:flex;align-items:center;gap:12px}

/* Modal / Toast / Panel */
.modal-bg{position:fixed;inset:0;background:rgba(10,16,24,.45);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--card);border-radius:18px;padding:24px;width:100%;max-width:460px;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.toast-wrap{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:10px;z-index:80;max-width:min(380px,calc(100vw - 32px))}
.toast{background:var(--ink);color:var(--bg);padding:14px 16px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);animation:in .25s}
.toast b{display:block}.toast .btn{margin-top:8px}
@keyframes in{from{transform:translateY(-8px);opacity:0}}
.panel{position:fixed;top:64px;right:24px;width:380px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.2);z-index:40}
.notif{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}.notif.unread{background:var(--primary-soft)}
.bell{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.bell .badge{position:absolute;top:-6px;right:-6px}

/* Mobile */
.tabbar{display:none}
@media(max-width:860px){
  .sidebar{display:none}.main{margin-left:0}
  .top{padding:14px 16px 0}.content{padding:14px 16px 100px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:30}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 0;position:relative}
  .tabbar a svg{width:22px;height:22px}.tabbar a.on{color:var(--primary)}
  .tabbar .badge{position:absolute;top:0;left:56%}
  .cal .d{padding:3px}.cal .wk{min-height:70px}.cal .bar{font-size:9.5px;padding:0 4px;margin:0 1px}.cal .hol{display:none}
  .cols{grid-template-columns:1fr}.clock .time{font-size:46px}
  .panel{top:56px;right:8px}.toast-wrap{right:8px;left:8px;max-width:none}
  .hide-m{display:none}
  .top .mbrand{margin-right:2px}
  td,th{padding:10px 6px}
}

/* ---------- Marke (Immotevo) ---------- */
.bl{display:inline-flex;align-items:center;line-height:0}
.bl-mark{width:30px;height:auto;flex:none}
/* Original-Logo als Bild: CI-Farben auf hellem Grund, helle Schrift im Dunkelmodus, beim Drucken immer CI-Farben */
.bl-logo{display:block;width:168px;height:auto}
.bl-dark{display:none}
:root[data-theme="dark"] .bl-light{display:none}:root[data-theme="dark"] .bl-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bl-light{display:none}:root:not([data-theme="light"]) .bl-dark{display:block}}
@media print{.bl-light{display:block!important}.bl-dark{display:none!important}}
.brand{padding:4px 10px 18px}
.side-brand{font-size:10.5px;color:var(--muted);padding:8px 10px 0;line-height:1.4}
.mbrand{display:none}
.avatar{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

/* ---------- Login ---------- */
.login2{min-height:100vh;display:grid;grid-template-columns:minmax(380px,1.05fr) minmax(360px,1fr);background:var(--bg)}
.lbrand{position:relative;overflow:hidden;color:#fff;padding:44px 52px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(155deg,#3a4960 0%,#4c5d77 55%,#6d7d96 100%)}
.lbrand.admin{background:linear-gradient(155deg,#222c3a 0%,#33415a 55%,#4a5b78 100%)}
.lbrand .bl-txt b{color:#fff;font-size:24px}.lbrand .bl-txt small{color:#c4ccd8;font-size:12px}.lbrand .bl-mark{width:36px}
.lbrand .bl-mark{filter:brightness(0) invert(1) opacity(.92)}
.hexbg{position:absolute;right:-120px;bottom:-140px;width:560px;opacity:.07;animation:drift 18s ease-in-out infinite alternate;pointer-events:none}
.hexbg img{width:100%;filter:brightness(0) invert(1)}
.hexbg.two{right:auto;left:-180px;top:-120px;bottom:auto;width:380px;opacity:.05;animation-duration:24s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-26px) rotate(6deg)}}
.lb-mid{position:relative;max-width:460px;animation:rise .7s .1s both}
.lb-mid h2{font-size:38px;line-height:1.1;margin:0 0 14px;font-weight:750;letter-spacing:-.02em}
.lb-mid p{margin:0 0 26px;color:#d6dce6;font-size:16.5px;line-height:1.55}
.lb-feat{display:flex;gap:10px;flex-wrap:wrap}
.lb-feat span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;backdrop-filter:blur(4px)}
.lb-float{position:absolute;right:48px;top:48px;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.lb-float div{background:rgba(255,255,255,.95);color:#1b2430;border-radius:14px;padding:10px 14px;font-size:13px;font-weight:650;box-shadow:0 10px 30px rgba(0,0,0,.18);display:flex;align-items:center;gap:9px;animation:float 6s ease-in-out infinite}
.lb-float div:nth-child(2){animation-delay:-2s;margin-right:26px}.lb-float div:nth-child(3){animation-delay:-4s}
.lb-float i{width:10px;height:10px;border-radius:50%;display:inline-block}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.lb-foot{position:relative;font-size:12px;color:#aeb8c7}
.lform{display:grid;place-items:center;padding:32px 24px}
.lcard{width:100%;max-width:400px;animation:rise .6s both}
.lcard h1{font-size:28px;margin-bottom:6px}
.lcard .field{margin-bottom:16px}
.lcard input{padding:12px 14px;border-radius:12px}
.lcard .btn.primary{width:100%;margin-top:4px}
.lcard .hint{margin-top:26px;font-size:12px;color:var(--muted)}
@media(max-width:860px){
  .login2{grid-template-columns:1fr}
  .lbrand{padding:26px 22px 30px;min-height:0}.lb-mid{margin-top:26px}.lb-mid h2{font-size:26px;margin-bottom:8px}.lb-mid p{font-size:14.5px;margin-bottom:16px}
  .lb-float,.lb-foot{display:none}.hexbg{width:300px;right:-90px;bottom:-110px}
  .lform{align-items:start;padding:26px 20px 40px}
  .mbrand{display:block}.mbrand .bl-mark{width:26px}
}
@media(prefers-reduced-motion:reduce){.hexbg,.lb-float div,.lb-mid,.lcard{animation:none}}

/* ---------- Theme-Schalter ---------- */
.seg.theme button{display:inline-flex;align-items:center;gap:6px}

/* ---------- Farbwahl ---------- */
.swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sw{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);padding:0}
.sw.on{outline:2px solid var(--ink);outline-offset:2px}
.sw.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.swatches input[type=color]{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer}
.swatches code{font-size:12px;color:var(--muted)}

/* ---------- Abwesenheits-Dashboard (Geschäftsführung) ---------- */
.tl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.tl{display:grid;min-width:max-content}
.tl>div{border-bottom:1px solid var(--line);border-right:1px solid color-mix(in srgb,var(--line) 55%,transparent);min-height:36px;display:flex;align-items:center;justify-content:center;font-size:11px;position:relative}
.tl .nm{justify-content:flex-start;gap:8px;padding:0 12px;position:sticky;left:0;background:var(--card);z-index:2;font-size:13px;font-weight:600;min-width:150px;border-right:1px solid var(--line)}
.tl .hd{flex-direction:column;gap:0;color:var(--muted);font-weight:600;background:var(--card);min-height:44px;line-height:1.25}
.tl .hd b{color:var(--ink);font-size:12px}
.tl .we{background:color-mix(in srgb,var(--bg) 70%,var(--card))}
.tl .hol{background:var(--warn-soft)}
.tl .td{box-shadow:inset 0 0 0 2px var(--primary)}
.tl .ab{color:#fff;font-weight:700;border-right-color:rgba(255,255,255,.25)}
.tl .ab.pend{color:var(--ink);background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.55) 5px 8px)}
.tl .ab.ho{background:transparent!important;color:var(--ink)}
.tl .cnt{font-weight:700;font-size:12px;min-height:34px}
.tl .cnt.full{color:var(--ok)}.tl .cnt.mid{color:var(--warn)}.tl .cnt.low{color:var(--bad)}
.tl .sumlbl{font-weight:700;color:var(--muted)}
.tl-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted);align-items:center}
.tl-legend i{display:inline-block;width:22px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.tl-legend .p{background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(255,255,255,.6) 4px 6px);background-color:#64748b55;border:1px dashed #64748b}
.overlap{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:12.5px;font-weight:600;line-height:1.45}
.overlap.none{background:var(--ok-soft);color:var(--ok)}
.diff{display:inline-grid;grid-template-columns:auto auto;gap:2px 10px;font-size:12.5px;margin-top:6px}
.diff s{color:var(--muted)}
.chip.proof{background:var(--blue-soft);color:var(--blue);cursor:pointer;border:0;font:inherit;font-size:12px;font-weight:600}
.filebox{border:1.5px dashed var(--line);border-radius:12px;padding:14px;background:var(--bg);font-size:13px}
.filebox input{border:0;padding:6px 0;background:none}
.note{padding:10px 12px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-size:13px;line-height:1.45;margin-bottom:14px}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar select,.toolbar input{width:auto;padding:8px 10px}
.print-head{display:none}
.menu{position:relative;display:inline-block}
.menu .pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:6px;min-width:240px;z-index:30}
.menu .pop button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;border-radius:8px;font:inherit;color:var(--ink);cursor:pointer}
.menu .pop button:hover{background:var(--bg)}
.menu .pop small{display:block;color:var(--muted);font-size:11.5px}
.totalrow td{font-weight:700;background:var(--primary-soft)}
@media print{
  .sidebar,.tabbar,.bell,.top a,.toolbar,.no-print,.selbar{display:none!important}
  .main{margin:0}.top{padding:0}.content{padding:8px 0;max-width:none}
  .print-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #818b99}
  :root,:root[data-theme="dark"]{--bg:#fff;--card:#fff;--ink:#000;--muted:#555;--line:#ccc;--primary-soft:#eee;--shadow:none}
  body{background:#fff;color:#000}.card{box-shadow:none;border:1px solid #ccc}
}

/* ---- Stempeluhr mit Sekunden, Überstundenkonto, Mehrfachauswahl ---- */
.secbar{height:3px;background:var(--line);border-radius:3px;margin:12px auto 10px;max-width:220px;overflow:hidden}
.secbar i{display:block;height:100%;width:0;background:var(--primary);border-radius:3px}
.stack{display:grid;gap:16px;align-content:start}
.otcard{display:block;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.otcard:hover{border-color:var(--primary);transform:translateY(-1px)}
.otbig{display:flex;flex-direction:column;justify-content:center}
.kpi.xl{font-size:44px;line-height:1.1;margin:4px 0}
.grid.tight{gap:12px}
.sugg{padding:9px 0;border-top:1px solid var(--line)}
.datechips{display:flex;flex-wrap:wrap;gap:6px;max-height:120px;overflow:auto}
.cal .d{user-select:none;-webkit-user-select:none}
@media (max-width:860px){.grid.tight{grid-template-columns:1fr 1fr 1fr}.grid.tight .kpi{font-size:20px}.kpi.xl{font-size:38px}}
.grid.tight .kpi{white-space:nowrap}.grid.tight .card{padding:14px 12px}


/* ===== Einheitlicher Login (voller Bildschirm) ===== */
.login3{position:relative;min-height:100vh;overflow:hidden;color:#fff;display:flex;flex-direction:column;background:linear-gradient(155deg,#2f3c52 0%,#44546a 50%,#6d7b93 100%)}
.login3 .hexbg{position:absolute;right:-120px;bottom:-140px;width:620px;opacity:.07;animation:drift 18s ease-in-out infinite alternate;pointer-events:none}
.login3 .hexbg.two{right:auto;left:-180px;top:-120px;bottom:auto;width:420px;opacity:.05;animation-duration:24s;animation-direction:alternate-reverse}
.login3 .hexbg img{width:100%;filter:brightness(0) invert(1)}
.l3-top{position:relative;padding:34px 48px}.l3-top .bl-txt b{color:#fff;font-size:24px}.l3-top .bl-txt small{color:#c4ccd8}.l3-top .bl-mark{width:36px;filter:brightness(0) invert(1) opacity(.92)}
.l3-main{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px 24px;text-align:center}
.login3 .lb-mid{max-width:560px;margin-bottom:26px}.login3 .lb-mid h2{font-size:46px;margin:0 0 10px;font-weight:750;letter-spacing:-.02em}.login3 .lb-mid p{margin:0;color:#d6dce6;font-size:17px;line-height:1.5}
.l3card{background:var(--card);color:var(--ink);padding:28px 28px 22px;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.28);text-align:left;max-width:410px;width:100%}
.l3card .hint{margin-top:18px}
.login3 .lb-feat{justify-content:center;margin-top:26px}
.login3 .lb-float{right:48px;top:40px}
.login3 .lb-foot{position:relative;text-align:center;padding:0 0 22px}
@media(max-width:860px){.l3-top{padding:22px}.login3 .lb-mid h2{font-size:32px}.login3 .lb-float,.login3 .lb-feat{display:none}.l3-main{justify-content:flex-start;padding-top:10px}}

/* ===== Seitenleiste: Zahnrad, Abschnitte, Menü ===== */
.nav-sec{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:14px 12px 4px}
.gear{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;padding:10px 12px;border-radius:10px;cursor:pointer;margin-top:auto}
.gear:hover{background:var(--primary-soft);color:var(--ink)}.gear svg{width:20px;height:20px}
.gear-m{display:none}
.moremenu{display:grid;grid-template-columns:1fr 1fr;gap:10px}.moremenu a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:600}.moremenu svg{width:22px;height:22px}
@media(max-width:860px){.gear{display:none}.gear-m{display:inline-flex}}

/* ===== Widgets ===== */
.wlink{display:block;color:inherit;text-decoration:none}.wlink:hover .kpi{opacity:.85}
.wg-ctl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}.wg-t{font-weight:700;font-size:13px}
.wg-ctl button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:7px;padding:3px 8px;font-size:12px;font-weight:700;cursor:pointer}.wg-ctl button.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.daybar{height:8px;background:var(--line);border-radius:6px;margin:14px auto 6px;max-width:300px;overflow:hidden}.daybar i{display:block;height:100%;width:0;background:var(--primary);border-radius:6px;transition:width .6s}.daybar i.full{background:var(--ok)}
.winbar{position:relative;height:10px;background:var(--line);border-radius:6px;margin:18px auto 6px;max-width:300px}
.winbar .core{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--primary) 55%,transparent);border-radius:6px}.winbar .now{position:absolute;top:-4px;width:3px;height:18px;border-radius:2px;background:var(--ink);transform:translateX(-1px)}
.clock .winbar+.small{max-width:300px;margin:0 auto}
.chip.core{background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--ink)}
.reply{margin-top:8px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--warn) 14%,transparent);font-size:13px}
.card.flat{box-shadow:none;background:transparent}
.days7{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.days7 label{font-size:11px;text-align:center;display:block;color:var(--muted)}.days7 input{padding:8px 4px;text-align:center}
.th-bar{position:relative;height:12px;border-radius:6px;background:var(--line);margin:6px 0}.th-ok{position:absolute;inset:0;border-radius:6px;background:color-mix(in srgb,var(--ok) 35%,transparent)}.th-core{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--primary)}

/* ===== Planer ===== */
.pl{border:1px solid var(--line);border-radius:12px;overflow-x:auto;background:var(--card)}
.pl-row{display:grid;grid-template-columns:150px minmax(0,1fr);min-width:0;border-bottom:1px solid var(--line)}.pl-row:last-child{border-bottom:0}
.pl.mo .pl-row{min-width:900px}
.pl-nm{display:flex;align-items:center;gap:8px;padding:6px 10px;border-right:1px solid var(--line);min-width:0;position:sticky;left:0;background:var(--card);z-index:3}
.pl-nt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600}
.pl-tr{display:grid;position:relative;min-width:0}
.pl-c{box-shadow:inset -1px 0 0 var(--line)}.pl-c.we{background:color-mix(in srgb,var(--bg) 70%,var(--card))}.pl-c.hol{background:color-mix(in srgb,var(--warn) 12%,var(--card))}.pl-c.td{background:var(--primary-soft)}
.pl-hd .pl-tr{align-items:stretch}.pl-h{text-align:center;padding:5px 0;font-size:11px;color:var(--muted);box-shadow:inset -1px 0 0 var(--line);line-height:1.25;min-width:0}.pl-h b{display:block;font-size:14px;color:var(--ink)}.pl-h.we{background:color-mix(in srgb,var(--bg) 70%,var(--card))}.pl-h.hol{background:color-mix(in srgb,var(--warn) 14%,var(--card))}.pl-h.td{background:var(--primary-soft)}.pl-h em{display:block;font-style:normal;font-size:9.5px;color:var(--warn);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.pl-bar{z-index:2;align-self:center;height:20px;line-height:20px;margin:0 2px;padding:0 8px;border-radius:6px;background:var(--c);color:#fff;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pl-bar:hover{filter:brightness(1.12)}
.pl-bar.cs{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.pl-bar.ce{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.pl-bar.ho{background:transparent;color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c)}
.pl-bar.pend{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 34%,transparent) 0 6px,color-mix(in srgb,var(--c) 14%,transparent) 6px 12px);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--c)}
.pl-bar.bday{background:color-mix(in srgb,#f59e0b 22%,var(--card));color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 55%,transparent);cursor:default}
.pl-sum .pl-tr{align-items:center}.pl-n{text-align:center;font-weight:700;font-size:12px;padding:5px 0}.pl-n.ok{color:var(--ok)}.pl-n.mid{color:var(--warn)}.pl-n.low{color:var(--bad)}.pl-n.ghost{opacity:.6;font-style:italic}
.pl-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;align-items:center}.pl-legend .lg{display:inline-block;width:18px;height:10px;border-radius:3px;vertical-align:middle;margin-right:4px}.lg.solid{background:#3b82f6}.lg.pend{background:repeating-linear-gradient(135deg,#3b82f666 0 4px,#3b82f622 4px 8px);box-shadow:inset 0 0 0 1px #3b82f6}
.pl-top{margin-bottom:10px}.pl-ico{font-size:15px}
.pl.wk .pl-bar{font-size:12px}
@media(max-width:700px){.pl-row{grid-template-columns:78px minmax(0,1fr)}.pl-nm{padding:4px 6px}.pl-nm .avatar{display:none}.pl-nt{font-size:11.5px}.pl.mo .pl-row{min-width:760px}}
@media(max-width:620px){.wg-body td:last-child .btn{display:block;margin:0 0 4px}.wg-body td:last-child{width:44px;white-space:normal!important}.wg-body table{width:100%}}
@media(max-width:620px){td[style*="nowrap"]{white-space:normal!important}}

/* ===== Modal: Schließen-Knopf, breiter Urlaubsantrag mit Kalender ===== */
.modal{position:relative}
.modal-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:15px;cursor:pointer;display:grid;place-items:center;z-index:5}
.modal-x:hover{background:var(--primary-soft);color:var(--ink)}
.modal>h2:first-of-type,.modal>.reqwrap h2:first-of-type{padding-right:36px}
.modal:has(.reqwrap){max-width:1020px;width:min(1020px,96vw)}
.reqwrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px}
.reqcal{min-width:0;border-left:1px solid var(--line);padding-left:20px}
.reqcal .cal .wk{min-height:66px}.reqcal .cal .bar{font-size:10px;padding:0 4px}.reqcal .cal .hol{display:none}
.rcinfo{margin-top:10px}
.depok{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}.depok input{margin-top:3px}
@media(max-width:860px){.reqwrap{grid-template-columns:1fr}.reqcal{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}}

/* ===== Termine, Betriebsfrei, Poolfahrzeug (Kalender + Planer) ===== */
.cal .bar.ev,.pl-bar.ev{background:#0e7490;color:#fff;box-shadow:none}
.cal .bar.ev.closure,.pl-bar.ev.closure{background:#b45309}
.cal .bar.bk,.pl-bar.bk{background:#475569;color:#fff;box-shadow:none}
.cal .bar.click{pointer-events:auto;cursor:pointer}
.pulse{animation:pulse .8s ease-in-out 3;position:relative;z-index:2}
@keyframes pulse{50%{box-shadow:0 0 0 4px var(--primary);background:var(--primary-soft)}}
/* Symbole im Text (statt Emoji): Geburtstag = Geschenk in kräftigem Orange, Betriebsfrei = Kalender mit Kreuz */
.sym{width:1.1em;height:1.1em;vertical-align:-.2em;flex:none;stroke-width:2.2}
.sym.bd{color:#c2410c}
:root[data-theme="dark"] .sym.bd{color:#fbbf24}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sym.bd{color:#fbbf24}}
.bar .sym,.pl-bar .sym{width:13px;height:13px;vertical-align:-2px}
.pl-ico .sym{width:16px;height:16px}
/* Widget „Nächster Geburtstag“ */
.bdnext{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:color-mix(in srgb,#f59e0b 12%,var(--card));border:1px solid color-mix(in srgb,#f59e0b 35%,transparent);border-radius:12px;padding:12px;margin-top:4px;color:var(--ink);font:inherit;cursor:pointer}
.bdnext+.bdnext{margin-top:8px}
.bdnext b{font-size:15.5px}.bd-in{color:#c2410c;font-weight:700}
:root[data-theme="dark"] .bd-in{color:#fbbf24}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bd-in{color:#fbbf24}}
.evrow{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;font:inherit;padding:8px 0;cursor:pointer;flex-wrap:wrap}.evrow:hover b{text-decoration:underline}

/* ===== Jahresansicht ===== */
.yr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.yr{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.yr{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.ym-t{border:0;background:transparent;font:inherit;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;padding:2px 0;margin-bottom:4px}.ym-t:hover{text-decoration:underline}
.ym-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.ym-h{font-style:normal;font-size:9.5px;color:var(--muted);text-align:center}
.ym-d{border:0;background:transparent;color:var(--ink);font:inherit;font-size:11.5px;padding:2px 0 1px;border-radius:5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;min-height:30px}
.ym-d:hover{background:var(--primary-soft)}.ym-d.we{color:var(--muted)}.ym-d.hol{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);font-weight:700}
.ym-d.today span{background:var(--primary);color:var(--primary-ink);border-radius:50%;width:19px;height:19px;display:grid;place-items:center}
.ym-d.sel{outline:2px solid var(--primary);outline-offset:-1px;background:var(--primary-soft)}
.ym-d em{display:flex;gap:2px;height:6px;margin-top:2px}.ym-d u{width:5px;height:5px;border-radius:50%;display:block}.ym-d u.bd{background:#f59e0b}.ym-d u.ev{background:#0e7490}.ym-d u.bk{background:#475569;border-radius:1px}

/* ===== Kontakte, Organisation ===== */
.ctsec{margin-bottom:22px}.ctsec h2{margin:0 0 10px}
.ctgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.ct{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:12px 14px}.ct .row{align-items:flex-start;flex-wrap:wrap}.ct-l{margin-top:8px;line-height:1.7}
.ct .stat{margin-left:auto}
.stat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;padding:2px 8px;border-radius:999px;background:var(--bg);white-space:nowrap}.stat i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.stat.ok i{background:var(--ok)}.stat.home i{background:#3b82f6}.stat.off i{background:var(--bad)}.stat.wait i{background:var(--warn)}
.orgp{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.orgp:first-of-type{border-top:0}
.orgd{padding:10px 0;border-top:1px solid var(--line)}.orgd .orgp{padding-left:6px}
input[type=search]{width:100%}

/* ===== Menü per Drag & Drop ===== */
.nav a.drag{opacity:.4}.nav a.over{box-shadow:inset 0 2px 0 var(--primary)}
.nav a[draggable=true]{cursor:grab}


/* ===== v5: Raster-Startseite, Planer, Balken, Dialoge ===== */
.wgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:8px;column-gap:16px;grid-auto-flow:row dense;align-items:start}
.wg{min-width:0;position:relative;margin-bottom:16px;align-self:start}.wg-body h2{margin-top:0}
.wg.fixed{display:flex;flex-direction:column;align-self:stretch;margin-bottom:0}.wg.fixed .wg-body{flex:1;min-height:0;overflow:auto}
.wgrid.editing{padding:10px;margin:-10px;border-radius:16px;min-height:260px;background:radial-gradient(circle,color-mix(in srgb,var(--ink) 14%,transparent) 1.2px,transparent 1.4px) 0 0/22px 22px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent)}
.wgrid.editing .wg{cursor:grab;touch-action:none;user-select:none;box-shadow:0 0 0 1.5px var(--line),0 6px 18px rgba(0,0,0,.06)}
.wgrid.editing .wg:hover{box-shadow:0 0 0 2px var(--primary),0 8px 22px rgba(0,0,0,.1)}
.wgrid.editing .wg-body{pointer-events:none;opacity:.5}
.wg.ph{background:var(--primary-soft);box-shadow:0 0 0 2px var(--primary) !important;border-radius:var(--radius)}.wg.ph>*{opacity:0}
.wg.ghost{opacity:.92;box-shadow:0 18px 44px rgba(0,0,0,.28)!important;overflow:hidden;transform:rotate(-.8deg)}
body.dragging{cursor:grabbing;user-select:none}
.wg-ctl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.wg-t{font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.wg-ctl button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;width:30px;height:28px;display:grid;place-items:center;cursor:pointer;opacity:.65}.wg-ctl button:hover{opacity:1;background:var(--primary-soft)}
.wg-rs{position:absolute;right:4px;bottom:4px;width:22px;height:22px;cursor:nwse-resize;border-radius:6px;background:linear-gradient(135deg,transparent 50%,var(--primary) 50% 58%,transparent 58% 70%,var(--primary) 70% 78%,transparent 78%);opacity:.7;touch-action:none}
.wg-rs:hover{opacity:1}.wg[data-sz]::after{content:attr(data-sz);position:absolute;right:30px;bottom:6px;background:var(--primary);color:var(--primary-ink);font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.tray{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1.5px var(--primary),0 10px 26px rgba(0,0,0,.1)}.tray .tr-chips{flex:1;min-width:180px}
.chipw{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed var(--primary);background:var(--primary-soft);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;cursor:grab;touch-action:none}.chipw:hover{background:var(--card)}
@media(max-width:900px){.wgrid{display:flex;flex-direction:column;gap:0}.wg,.wg.fixed{height:auto!important}.wgrid.editing .wg{touch-action:auto}.wg-rs{display:none}}
.arow{display:flex;align-items:center;gap:10px;padding:6px 0;flex-wrap:wrap}.arow .am{flex:1;min-width:0}.arow .am b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arow .ad{margin-left:auto;white-space:nowrap;color:var(--muted)}
.pgrp{margin-bottom:10px}.pg-h{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.aprow{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap;padding:8px 8px;margin:0 -8px;border-radius:10px;cursor:pointer}.aprow:hover{background:var(--bg)}
.aprow .ap-m{display:flex;gap:10px;align-items:center;min-width:0;flex:1 1 160px}.aprow .am{min-width:0}.aprow .am .sub{overflow:hidden;text-overflow:ellipsis}.ap-b{display:flex;gap:4px;flex:none}
.vrow{display:block;width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;padding:8px;margin:0 -8px 4px;border-radius:10px;cursor:pointer;width:calc(100% + 16px)}.vrow:hover{background:var(--bg)}
.evrow{width:calc(100% + 16px);margin:0 -8px;padding:8px;border-radius:10px;border-top:0}.evrow:hover{background:var(--bg)}
/* Planer */
.pl-top{margin-bottom:12px;gap:10px}.pl-title{min-width:190px;text-align:center}
.pl{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.pl-row{grid-template-columns:170px minmax(0,1fr);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.pl-hd{background:color-mix(in srgb,var(--bg) 60%,var(--card))}
.pl-tr{grid-auto-rows:30px;padding:3px 0}.pl-hd .pl-tr{padding:0}
.pl-bar{height:26px;line-height:26px;margin:2px 3px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600;border:0;box-shadow:none;text-align:left}
.pl-bar.pend{background:color-mix(in srgb,var(--c) 24%,var(--card));color:var(--ink);box-shadow:inset 3px 0 0 var(--c);border-style:none}
.pl-bar.ho{background:color-mix(in srgb,var(--c) 18%,var(--card));color:var(--ink);box-shadow:inset 3px 0 0 var(--c)}
.pl-bar.bday{background:color-mix(in srgb,#f59e0b 20%,var(--card));color:var(--ink);box-shadow:none;cursor:pointer}
.pl-bar.ev{background:#0e7490;color:#fff}.pl-bar.bk{background:#475569;color:#fff}.pl-bar.ev.closure{background:#b45309}
.pl-bar.cs{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.pl-bar.ce{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.pl-h em{display:block;font-style:normal;font-size:10px;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.pl-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pl-f{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}.pl-f i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--c);background:transparent}
.pl-f.on{background:color-mix(in srgb,var(--c) 14%,var(--card));color:var(--ink);border-color:color-mix(in srgb,var(--c) 45%,var(--line))}.pl-f.on i{background:var(--c)}
.pl-month .cal{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pl-month .cal .wk{min-height:86px}
@media(max-width:700px){.pl-row{grid-template-columns:84px minmax(0,1fr)}.pl-title{min-width:130px}}
/* Kalenderbalken: sauber mittig, ohne gestrichelten Rand */
.cal .bar{height:22px;line-height:22px;padding:0 9px;border-radius:8px;display:block;font-weight:600;letter-spacing:.005em;text-align:left}
.cal .bar.pend{background:color-mix(in srgb,var(--c) 24%,var(--card));color:var(--ink);box-shadow:inset 3px 0 0 var(--c);border-style:none}
.cal .bar.ho{background:color-mix(in srgb,var(--c) 18%,var(--card));color:var(--ink);box-shadow:inset 3px 0 0 var(--c)}
.cal .bar.bday{background:color-mix(in srgb,#f59e0b 20%,var(--card));color:var(--ink);box-shadow:none}
.cal.five .wkh,.cal.five .wk{grid-template-columns:repeat(5,minmax(0,1fr))}
/* Dialoge */
.modal:has(.uform){max-width:660px}.modal:has(.wmod){max-width:900px;width:min(900px,96vw)}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}@media(max-width:700px){.cols4{grid-template-columns:1fr 1fr}}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.daytbl{width:100%;border-collapse:collapse}.daytbl th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.daytbl td{padding:6px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);vertical-align:top}.daytbl .nw{white-space:nowrap}
.daytbl tr.we td{background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--muted)}.daytbl tr.mh th{background:var(--primary-soft);color:var(--ink);font-size:13px;text-transform:none;letter-spacing:0;padding:8px}
.daytbl .num,.daytbl th.num{text-align:right;white-space:nowrap}.daytbl .x{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0 4px}.daytbl .x:hover{color:var(--bad)}
tr.clk{cursor:pointer}tr.clk:hover td{background:var(--bg)}
@media print{body.pr-detail #root{display:none!important}body.pr-detail .modal-bg{position:static!important;background:none!important;display:block!important;padding:0!important}body.pr-detail .modal{max-height:none!important;box-shadow:none!important;max-width:none!important;width:auto!important;overflow:visible!important;padding:0!important}body.pr-detail .modal-x{display:none!important}body.pr-detail .no-print{display:none!important}body.pr-detail .print-head{display:flex!important}
  .daytbl thead{display:table-header-group}.daytbl tr{break-inside:avoid}.daytbl{font-size:11px}}
/* Organisation / Kontakte */
.orgp[draggable=true]{cursor:grab}.orgp.drag{opacity:.4}.orgd.over{background:var(--primary-soft);border-radius:10px;outline:2px dashed var(--primary);outline-offset:-2px}
.assign{margin-top:8px;max-width:260px;font-size:13px}
.ci{width:15px;height:15px;vertical-align:-3px;margin-right:7px;color:var(--muted);flex:none}
.ct-l>div{display:flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ct-l a{overflow:hidden;text-overflow:ellipsis}
.ct .row .small.sub,.side-foot .small.sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .small.sub{font-size:11px;display:block}
/* Seitenleiste: horizontales Logo (Emblem links, Schriftzug rechts), Einstellungen unten über dem Profil */
.sidebar .brand{padding:8px 10px 12px}.sidebar .brand .bl-logo{width:190px;max-width:100%}
.side-brand{margin:0 0 12px!important;padding-left:10px}
.side-foot{margin-top:0}
.gear{margin-top:auto}
.l3-top .bl-logo{width:300px}
@media(max-width:860px){.l3-top .bl-logo{width:210px}}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}@media(max-width:900px){.fgrid{grid-template-columns:1fr}}
.tray>.small{flex:1 1 100%}

/* ===== Überarbeitung 04.11.2026 ===== */
/* Seitenleiste unten: Profil über Einstellungen, Abmelden als beschrifteter Knopf */
.side-low{margin-top:auto;display:grid;gap:2px;padding-top:8px}
.side-low .gear{margin-top:0}
.side-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.side-link svg{width:20px;height:20px}.side-link:hover{background:var(--primary-soft);color:var(--ink)}.side-link.on{background:var(--primary-soft);color:var(--primary)}
.btn.logout{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:11.5px;padding:4px 8px}
/* Hinweise (Toasts): mit ✕ wegklickbar und unterhalb der Kopfzeile, damit deren Knöpfe bedienbar bleiben */
.toast-wrap{top:76px}
.toast{position:relative;padding-right:40px}
.toast-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:inherit;opacity:.7;cursor:pointer;font-size:13px;line-height:1}
.toast-x:hover{opacity:1;background:rgba(255,255,255,.14)}.toast-x:focus-visible{outline:2px solid currentColor;outline-offset:1px}
@media(max-width:860px){.toast-wrap{top:64px}}
/* Kopfzeile: Glocke so groß wie die übrigen Knöpfe (42 px), Symbol wie dort 17 px; Knöpfe nur mit Symbol gleich hoch wie mit Text */
.top .btn{height:42px}
.bell{width:42px;height:42px;border-radius:10px;flex:none}
.bell svg{width:17px;height:17px}
.bell .badge{top:-7px;right:-7px;min-width:18px;height:18px;font-size:10.5px}
/* Seitenleiste unten: Name und Position immer vollständig (darf umbrechen), „Abmelden“ in eigener Zeile darunter */
.side-foot{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
.sf-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}
.side-foot .sf-who b,.side-foot .sf-who .small.sub{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.side-foot .sf-who .small.sub{font-size:11.5px}
.side-foot .btn.logout{flex-basis:100%;justify-content:center}
/* Nächster Geburtstag: ohne gelben Rahmen und Hintergrund – schlicht wie die übrigen Zeilen */
.bdnext{border:0;background:transparent;padding:8px 4px;border-radius:10px}
.bdnext:hover{background:var(--bg)}
.bd-in{white-space:nowrap}
/* Anpassbare Seiten (Z.arrange, z. B. Überstunden) */
.arr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:12px}
.arr-c{min-width:0}.arr-c.wide{grid-column:1/-1}
.arr.editing .arr-c{outline:2px dashed color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:2px;cursor:grab}
.arr.editing .arr-c.dragging{opacity:.4}
.arr-ctl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px -4px 10px;padding:4px 4px 8px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--muted)}
.arr-ctl>span:first-child{display:flex;align-items:center;gap:6px}
.arr-tb{gap:8px}
/* Spalten-Variante (z. B. Meine Zeiten): links breit, rechts schmal; Karten stapeln sich je Spalte */
.arr.lanes{display:grid;gap:16px;align-items:start}
.lane{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;min-width:0}
.arr.lanes.editing .lane{min-height:120px;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--primary) 5%,transparent);outline:1.5px dashed var(--line)}
.arr.editing #tclk:empty::before{content:"Stempeluhr";display:block;padding:18px;text-align:center;color:var(--muted)}
.arr.editing .arr-c button:not(.ibtn){pointer-events:none}
@media(max-width:980px){.arr.lanes{grid-template-columns:1fr!important}}
@media(max-width:860px){.arr{grid-template-columns:1fr}}
/* Auswertungen: Urlaub grün hinterlegt (auch Sonderurlaub und Überstundenabbau als freie Tage) */
.chip.abs-vacation,.chip.abs-special,.chip.abs-overtime{background:var(--ok-soft);color:var(--ok);font-weight:650}
.daytbl tr.vac td{background:color-mix(in srgb,var(--ok) 7%,transparent)}
.rightsbox{display:flex;gap:8px;align-items:flex-start;margin:-4px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
/* Login: Uhrzeit und Datum unten links */
.l3-clock{position:absolute;left:48px;bottom:24px;display:grid;gap:4px;color:#fff;z-index:1;pointer-events:none}
.l3-clock b{font-size:44px;font-weight:750;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.l3-clock b i{font-style:normal;opacity:.55;padding:0 1px}
.l3-clock b small{font-size:18px;font-weight:600;opacity:.55;margin-left:6px;vertical-align:top;position:relative;top:4px}
.l3-clock span{font-size:14.5px;color:#c4ccd8;font-weight:500}
@media(max-width:860px){.l3-clock{position:relative;left:auto;bottom:auto;justify-self:center;text-align:center;margin:18px 0 6px}.l3-clock b{font-size:32px}}
/* Offene Anträge im Kalender und Planer: deutlich schraffiert (doppelte Klasse, damit ältere Regeln sie nicht überschreiben);
   der eigene Antrag grün mit „beantragt · wartet auf Freigabe“ */
.cal .bar.bar.pend,.pl-bar.pl-bar.pend{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 38%,var(--card)) 0 6px,color-mix(in srgb,var(--c) 12%,var(--card)) 6px 12px);box-shadow:inset 0 0 0 1.5px var(--c);color:var(--ink)}
.cal .bar.pend.mine{color:color-mix(in srgb,#1a8f5a 75%,var(--ink));font-weight:700}
.lg-pend{display:inline-block;width:18px;height:10px;border-radius:3px;vertical-align:-1px;background:repeating-linear-gradient(135deg,color-mix(in srgb,#1a8f5a 35%,transparent) 0 4px,color-mix(in srgb,#1a8f5a 12%,transparent) 4px 8px);box-shadow:inset 0 0 0 1.5px #1a8f5a}
/* Planer (Woche): Kopfzeile so hoch wie ihr Inhalt, Wochentag und Datum bleiben im Feld */
.pl-hd .pl-tr{grid-auto-rows:auto}
.pl-h{display:flex;flex-direction:column;justify-content:center;padding:6px 0;min-height:44px}
.pl-h b{line-height:1.2}
/* Feiertage grün statt gold */
.cal .hol,.pl-h em,.lg-hol{color:var(--ok)}
.pl-h.hol,.pl-c.hol{background:color-mix(in srgb,var(--ok) 11%,var(--card))}
.ym-d.hol{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tl .hol{background:var(--ok-soft)}
/* Urlaub auswählen: grün, Ziehen mit der Maus, ruhige Leiste statt schwarzem Balken */
.cal.pick .d:hover{background:color-mix(in srgb,var(--ok) 7%,var(--card))}
.cal .d.sel,.cal .d.drag{outline:0;background:color-mix(in srgb,var(--ok) 17%,var(--card));box-shadow:inset 0 -3px 0 var(--ok),inset -1px 0 0 var(--line)}
.cal .d.sel .n,.cal .d.drag .n{background:var(--ok);color:#fff}
.ym-d.sel{outline:2px solid var(--ok);background:color-mix(in srgb,var(--ok) 18%,transparent)}
.selbar{background:var(--card);color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ok) 55%,var(--line));box-shadow:0 10px 28px rgba(15,30,50,.14);padding:12px 14px;border-radius:14px}
.sb-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ok-soft);color:var(--ok);flex:none}.sb-ico .sym{width:18px;height:18px}
/* Meine Zeiten: Kennzahlen links, Stempeluhr rechts */
.times-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:16px;align-items:start;margin-bottom:16px}
.times-kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.times-kpi .kpi{white-space:nowrap}
.times-left{display:grid;gap:14px;min-width:0}.times-nav{justify-content:flex-start}
.times-right{display:grid;gap:10px}.times-right #add{width:100%}
@media(max-width:980px){.times-top{grid-template-columns:1fr}}
/* Organisation */
.org{display:grid;gap:20px}
.org-sh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.org-sh h2{margin:0 0 2px}.org-sh p{margin:0;max-width:62ch}
.org-people{display:flex;flex-wrap:wrap;gap:10px}
.gfp{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);min-width:0}
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;align-items:start}
.dept{display:flex;flex-direction:column;gap:10px;padding:16px}
.dept-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.dept-n{font-size:16px}
.dept-lead{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--primary-soft)}
.dept-lead .mem-t span{font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.dept-m{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.dept,.dept>*{min-width:0}
.dept-empty{padding:10px;border:1.5px dashed var(--line);border-radius:10px;text-align:center}
.dept .assign{margin-top:2px;max-width:none;width:100%}
.dept.over{outline:2px dashed var(--primary);outline-offset:-2px;background:var(--primary-soft)}
.nodep{background:color-mix(in srgb,var(--bg) 50%,var(--card))}
.mem{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:9px}
.mem[draggable=true]{cursor:grab}.mem:hover{background:var(--bg)}.mem.drag{opacity:.4}
.mem-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.mem-t b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mem-t span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibtn{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.ibtn:hover{border-color:var(--line);background:var(--card);color:var(--ink)}.ibtn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.veh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.veh{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.veh-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.veh.off{opacity:.7}
/* Tagesansicht „Heute“ */
.dayv{min-height:320px;display:flex;flex-direction:column;gap:14px;padding:6px 4px}
.dv-head{display:flex;align-items:center;gap:14px}
.dv-num{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:var(--primary);color:var(--primary-ink);font-size:24px;font-weight:750;flex:none}
.dv-head b{font-size:17px}
.dv-hol,.dv-we{padding:8px 12px;border-radius:10px;font-weight:600;font-size:13.5px}
.dv-hol{background:var(--ok-soft);color:var(--ok)}.dv-we{background:var(--bg);color:var(--muted)}
.dv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:start}
.dv-sec{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:0}
.dv-sec h3{margin:0 0 4px;padding:2px 4px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:6px}
.dv-n{background:var(--bg);color:var(--ink);border-radius:999px;padding:0 7px;font-size:11px;letter-spacing:0}
.dv-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font:inherit;padding:7px 6px;border-radius:9px;cursor:pointer}
.dv-row:hover:not([disabled]){background:var(--bg)}.dv-row[disabled]{cursor:default}
.dv-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}.dv-t b{font-size:13.5px}.dv-t span{font-size:12px;color:var(--muted)}
.dv-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:none;color:#fff}.dv-ico.ev{background:#0e7490}.dv-ico.cl{background:#b45309}.dv-ico .sym{width:15px;height:15px}