:root { --bg:#0f1115; --card:#171a21; --text:#e8eaf0; --muted:#9aa0aa; --accent:#3ea6ff; --bad:#ff5f57; --good:#34c759; --holiday:#2a1a1a; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--accent);text-decoration:none}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#12151b;border-bottom:1px solid #232634;position:sticky;top:0;z-index:10}
header h1{margin:0;font-size:18px}
header nav a{margin-left:12px}
.container{max-width:100%;margin:20px auto;padding:0 12px}
.card{background:var(--card);border:1px solid #232634;border-radius:8px;padding:16px;margin-bottom:16px}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid.four{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
label{display:block;font-weight:600;margin-bottom:8px}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{width:100%;padding:8px;border:1px solid #2a2f3a;border-radius:6px;background:#0d0f14;color:var(--text)}
button,.btn{background:#1e212b;color:var(--text);border:1px solid #2a2f3a;border-radius:6px;padding:8px 12px;cursor:pointer}
button:hover,.btn:hover{border-color:#3a3f4c}
.ok{background:#122516;border:1px solid #2d5a36;color:#b8f5c6;padding:8px 12px;border-radius:6px;margin-bottom:12px}
.error{background:#2a1616;border:1px solid #623737;color:#ffbaba;padding:8px 12px;border-radius:6px;margin-bottom:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #232634;vertical-align:top}
th{text-align:left}
.neg{color:#f29b9b}.pos{color:#8fe29b}.muted{color:var(--muted)}.hint{color:var(--muted);font-size:12px;margin-top:6px}

/* Monatskalender */
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.month-grid .dow{font-weight:700;text-align:center;background:#141821;padding:8px;border:1px solid #232634;border-radius:6px}
.month-grid .day{border:1px solid #232634;border-radius:8px;background:#10141c;min-height:120px;display:flex;flex-direction:column}
.month-grid .day.holiday{background:#181015}
.month-grid .day.empty{background:transparent;border:0}
.dayhead{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-bottom:1px solid #232634}
.daybody{padding:8px}
.holiday-badge{display:inline-block;margin-left:6px;padding:2px 6px;border:1px solid #5b2b2b;border-radius:999px;font-size:11px;color:#ffbcbc}

/* Wochenplan */
.weekly-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border:1px solid #232634;border-radius:8px;overflow:hidden;background:var(--card)}
.weekly-table th,.weekly-table td{border-bottom:1px solid #232634;border-right:1px solid #232634;padding:8px;vertical-align:top;overflow-wrap:anywhere}
.weekly-table th:first-child,.weekly-table td:first-child{border-left:none}
.weekly-table th{background:#141821;font-weight:700}
.weekly-table .holiday{background:var(--holiday)}
.sticky-col-head{width:220px}.emp-name{width:220px;font-weight:600}
.day-cell .cell-list{max-height:none;overflow:visible}
.chip{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:6px 8px;margin-bottom:6px;border:1px solid #2a2f3a;border-radius:6px;background:#10141c}
.chip-time{white-space:nowrap}.chip-sub{color:var(--muted);margin-left:6px;white-space:nowrap}
.chip-tag{display:inline-block;border:1px solid #3a3f4c;border-radius:999px;padding:2px 6px;font-size:11px;white-space:nowrap}
.chip-note{color:var(--muted);white-space:normal;overflow:visible;text-overflow:clip;max-width:none}
.chip-del{margin-left:auto;color:#f19999;text-decoration:none;font-weight:bold;align-self:flex-start}
.chip-del:hover{color:#ff7a7a}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;padding:40px 12px;z-index:1000}
.modal-content{width:min(900px,96vw);background:var(--card);border:1px solid #232634;border-radius:8px;padding:16px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.table-compact{width:100%;border-collapse:collapse}
.table-compact th,.table-compact td{border-bottom:1px solid #232634;padding:6px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

@media (max-width:1100px){ body{font-size:13px} .sticky-col-head,.emp-name{width:180px} }
@media (max-width:900px){ body{font-size:12px} .sticky-col-head,.emp-name{width:160px} }