:root{
  --bg:#f5f7f9; --card:#fff; --text:#18232d; --muted:#667785; --line:#e2e8ee; --brand:#0f766e; --brand-d:#0b5a54; --brand-l:#e3f4f2;
  --danger:#c0392b; --warn:#b7791f; --ok:#1f8a5b; --side:#12262e; --side-t:#c8d6dc; --shadow:0 1px 2px rgba(16,35,45,.06),0 4px 14px rgba(16,35,45,.05);
  --weekend:#f0f3f6; --radius:12px;
  --c-urlaub:#2f9e6e; --c-krank:#d9453d; --c-fortbildung:#3b7de0; --c-sonderurlaub:#8a5cd6; --c-homeoffice:#d98a14;
  --c-ueberstunden:#14959b; --c-abwesend:#7b8a96; --c-birthday:#d6458c; --c-anniversary:#a8731c; --c-holiday:#7b8a96;
  --c-event:#e0702b; --c-closure:#b0413e; --c-training:#3b7de0;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e171c; --card:#16232a; --text:#e6eef2; --muted:#93a5b0; --line:#273740; --brand:#2cb5a8; --brand-d:#4fd0c3; --brand-l:#173a3a;
  --side:#0a1115; --weekend:#1a2a31; --shadow:none;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
h1{font-size:22px;margin:0 0 4px} h2{font-size:16px;margin:0 0 12px} h3{font-size:14px;margin:0 0 8px}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--muted)} .small{font-size:13px} .right{text-align:right} .nowrap{white-space:nowrap}
.pos{color:var(--ok)} .neg{color:var(--danger)}

/* Layout */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-t);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;gap:10px;align-items:center;padding:4px 10px 16px;color:#fff;font-weight:700;font-size:17px}
.brand .logo{width:32px;height:32px;border-radius:9px;background:var(--brand);display:grid;place-items:center;flex:none}
.brand small{display:block;font-weight:400;opacity:.65;font-size:12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:9px;color:var(--side-t);text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.07)} .nav a.on{background:var(--brand);color:#fff}
.nav svg{width:18px;height:18px;flex:none}
.nav .sep{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.5;padding:14px 12px 4px}
.badge{margin-left:auto;background:#e5484d;color:#fff;border-radius:99px;font-size:12px;padding:0 7px;line-height:20px}
.userbox{margin-top:auto;padding:10px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.userbox b{color:#fff;display:block} .userbox button{margin-top:8px;width:100%}
main{padding:26px 30px 60px;max-width:1280px;width:100%;min-width:0}
.pagehead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.pagehead .tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.topbar{display:none}

/* Karten & Grid */
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}
.s4{grid-column:span 4} .s5{grid-column:span 5} .s6{grid-column:span 6} .s7{grid-column:span 7} .s8{grid-column:span 8} .s12{grid-column:span 12}
.bignum{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.bignum small{font-size:14px;font-weight:500;color:var(--muted);margin-left:4px}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line)} .kv:last-child{border:0}
.alert{border-radius:10px;padding:10px 14px;margin-bottom:14px;background:#fff4e0;color:#7a4b00;border:1px solid #f3d9a4}
@media (prefers-color-scheme:dark){.alert{background:#3a2d12;color:#f2d08a;border-color:#5b4620}}
.alert.err{background:#fdeaea;color:#8a1f1f;border-color:#f3c0c0}
@media (prefers-color-scheme:dark){.alert.err{background:#3b1717;color:#f1b4b4;border-color:#5c2626}}
.alert.info{background:var(--brand-l);color:var(--brand-d);border-color:transparent}

/* Stempeluhr */
.clock{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.clock .time{font-size:46px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--muted);margin-right:6px}
.dot.on{background:var(--ok);box-shadow:0 0 0 4px rgba(31,138,91,.2)} .dot.pause{background:var(--warn)}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* Buttons & Formulare */
.btn{border:1px solid var(--line);background:var(--card);padding:8px 14px;border-radius:9px;cursor:pointer;font-weight:500}
.btn:hover{border-color:var(--brand)} .btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff} .btn.primary:hover{background:var(--brand-d)}
.btn.danger{color:var(--danger);border-color:var(--danger);background:transparent}
.btn.sm{padding:4px 10px;font-size:13px} .btn.ghost{background:transparent;border-color:rgba(255,255,255,.2);color:var(--side-t)}
.btn.big{padding:12px 22px;font-size:16px}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:1px}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],input[type=month],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
textarea{min-height:70px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.checks{display:flex;gap:6px;flex-wrap:wrap} .checks label{display:flex;gap:5px;align-items:center;margin:0;font-weight:500;border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.inline{display:inline-block;width:auto}
.hint{font-size:13px;color:var(--muted);margin-top:4px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:var(--card);padding:7px 14px;cursor:pointer}
.seg button.on{background:var(--brand);color:#fff}

/* Tabellen */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;white-space:nowrap}
tr.weekend td,tr.holiday td{background:var(--weekend)} tr.today td{box-shadow:inset 0 2px 0 var(--brand),inset 0 -2px 0 var(--brand)}
tfoot td{font-weight:700;border-top:2px solid var(--line)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Status & Chips */
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--line);color:var(--muted)}
.pill.pending{background:#fdf0d0;color:#8a5a00} .pill.approved{background:#d8f1e4;color:#176b46} .pill.rejected{background:#fbdcdc;color:#9a2222} .pill.cancelled{background:var(--line)}
.chip{--c:var(--c-abwesend);display:flex;gap:5px;align-items:center;font-size:12px;line-height:1.3;padding:2px 6px;margin-top:2px;border-radius:5px;border-left:3px solid var(--c);
  background:color-mix(in srgb,var(--c) 17%,var(--card));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chip.pend{border-left-style:dashed;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 14%,var(--card)),color-mix(in srgb,var(--c) 14%,var(--card)) 5px,var(--card) 5px,var(--card) 9px)}
.t-urlaub{--c:var(--c-urlaub)} .t-krank{--c:var(--c-krank)} .t-fortbildung{--c:var(--c-fortbildung)} .t-sonderurlaub{--c:var(--c-sonderurlaub)}
.t-homeoffice{--c:var(--c-homeoffice)} .t-ueberstunden{--c:var(--c-ueberstunden)} .t-abwesend{--c:var(--c-abwesend)}
.t-birthday{--c:var(--c-birthday)} .t-anniversary{--c:var(--c-anniversary)} .t-holiday{--c:var(--c-holiday)} .t-event{--c:var(--c-event)}
.t-closure{--c:var(--c-closure)} .t-training{--c:var(--c-training)}
.sw{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--c);margin-right:6px;vertical-align:-1px}

/* Fortschritt */
.bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--line);margin:10px 0 6px}
.bar i{display:block;height:100%}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.weekbars{display:flex;gap:8px;align-items:flex-end;height:80px;margin-top:10px}
.weekbars div{flex:1;text-align:center;font-size:11px;color:var(--muted)}
.weekbars span{display:block;background:var(--brand);border-radius:4px 4px 0 0;min-height:2px;opacity:.85}
.weekbars .req{background:var(--line);border-radius:4px;display:flex;align-items:flex-end;height:60px;margin-bottom:2px}
.weekbars .req span{width:100%}

/* Kalender */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cal .h{background:var(--card);padding:6px 8px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase}
.cal .d{background:var(--card);min-height:104px;padding:5px;cursor:pointer;overflow:hidden;text-align:left;border:0;font:inherit;color:inherit;display:block}
.cal .d.out{background:var(--bg);cursor:default} .cal .d.we{background:var(--weekend)} .cal .d.sel{outline:2px solid var(--brand);outline-offset:-2px}
.cal .d .n{font-size:13px;font-weight:600;display:flex;justify-content:space-between}
.cal .d.today .n span:first-child{background:var(--brand);color:#fff;border-radius:99px;padding:0 7px}
.cal .more{font-size:11px;color:var(--muted);margin-top:2px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filters label{display:flex;gap:5px;align-items:center;margin:0;font-weight:500;font-size:13px;border:1px solid var(--line);border-radius:99px;padding:3px 10px;cursor:pointer;background:var(--card)}
.filters input{accent-color:var(--brand)}
.team{border-collapse:separate;border-spacing:0;font-size:12px;min-width:max-content}
.team th,.team td{padding:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;min-width:26px;height:30px;vertical-align:middle}
.team th{height:34px;font-size:11px;background:var(--card);position:sticky;top:0}
.team th.we,.team td.we{background:var(--weekend)} .team td.hol{background:repeating-linear-gradient(45deg,var(--weekend),var(--weekend) 4px,var(--line) 4px,var(--line) 5px)}
.team .nm{position:sticky;left:0;background:var(--card);text-align:left;padding:0 10px;min-width:170px;font-size:13px;z-index:1;white-space:nowrap}
.team td.ab{background:color-mix(in srgb,var(--c) 70%,var(--card))} .team td.ab.pend{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 55%,var(--card)),color-mix(in srgb,var(--c) 55%,var(--card)) 4px,var(--card) 4px,var(--card) 8px)}
.team td.half{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,var(--card)) 50%,transparent 50%)}
.team td.bd::after{content:"🎂";font-size:11px}
.team th.today{box-shadow:inset 0 -3px 0 var(--brand)}

/* Modal */
#modal-root .back{position:fixed;inset:0;background:rgba(10,20,26,.55);display:grid;place-items:center;padding:16px;z-index:50;overflow:auto}
.modal{background:var(--card);border-radius:14px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal h2{font-size:18px} .modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:#18232d;color:#fff;padding:10px 18px;border-radius:10px;transition:.25s;z-index:99;max-width:90vw}
#toast.show{transform:translateX(-50%) translateY(0)} #toast.err{background:#a52a2a}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#0f766e,#12262e)}
.login .card{width:min(400px,100%);padding:30px}
.login .brand{color:var(--text);padding:0 0 14px}

@media (max-width:980px){
  .s4,.s5,.s6,.s7,.s8{grid-column:span 12}
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;height:100vh;z-index:40;transform:translateX(-100%);transition:.2s}
  .side.open{transform:none}
  .topbar{display:flex;align-items:center;gap:10px;background:var(--side);color:#fff;padding:10px 14px;position:sticky;top:0;z-index:30}
  .topbar button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
  main{padding:18px 14px 60px}
  .row2,.row3{grid-template-columns:1fr}
  .cal .d{min-height:64px;padding:3px} .cal .chip{font-size:0;padding:0;height:6px;margin-top:2px;border-radius:3px}
}
@media print{.side,.topbar,.tools,.btn{display:none!important} .shell{display:block}}