*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#071015;color:#d5e1e6;font:14px Arial,Helvetica,sans-serif}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px max(16px,calc((100vw - 1180px)/2));background:#0d1a21;border-bottom:1px solid #29414d}.topbar strong{display:block;font-size:18px;color:#fff}.topbar small{display:block;color:#78909b;margin-top:3px}.topbar nav{display:flex;gap:7px;flex-wrap:wrap}.topbar a,.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;color:#d8e5ea;text-decoration:none;background:#14252d;border:1px solid #35505c;border-radius:6px;cursor:pointer}.topbar a:hover,.btn:hover{border-color:#25cdeb;color:#fff}.btn.primary{background:#12677a;border-color:#25cdeb;color:#fff}.btn.danger{border-color:#7b3d42;color:#ffb0b0;background:#32191c}.btn.small{min-height:29px;padding:4px 8px;font-size:12px}.container{width:min(1180px,calc(100% - 24px));margin:18px auto}.panel{margin-bottom:12px;padding:16px;background:#0d191f;border:1px solid #29414d;border-radius:8px}.panel h1{margin:0 0 14px;font-size:18px;color:#f0f7fa}.form-grid,.filter-grid{display:grid;gap:12px}.form-grid.cols{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid label,.filter-grid label{display:grid;gap:6px;color:#8ea4ae;font-size:12px}.wide{grid-column:1/-1}input,select{width:100%;min-height:40px;padding:8px 10px;color:#e7f0f3;background:#071116;border:1px solid #304852;border-radius:6px;outline:none;font:inherit}input:focus,select:focus{border-color:#25cdeb}.filter-grid{grid-template-columns:minmax(220px,1fr) 180px auto;align-items:end}.stats,.preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.stats>div,.preview>div{padding:14px;background:#0b171d;border:1px solid #29414d;border-radius:7px}.stats span,.preview span{display:block;color:#758c97;font-size:12px;margin-bottom:6px}.stats strong,.preview strong{font-size:20px;color:#9deeff}.preview{grid-template-columns:repeat(3,minmax(0,1fr));margin:4px 0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{padding:10px;border-bottom:1px solid #20343d;text-align:left}th{color:#78919c;font-size:12px}td{color:#d2dee3}.empty{text-align:center;color:#718792;padding:28px}.msg{margin-bottom:12px;padding:10px 12px;border-radius:6px}.msg.success{background:#102b1b;border:1px solid #356b48;color:#a9efbd}.msg.error{background:#32191c;border:1px solid #74373b;color:#ffb0b0}.inline{display:inline}.check{display:flex!important;grid-column:1/-1;grid-template-columns:auto 1fr!important;align-items:center}.check input{width:auto;min-height:auto}.delete-form{margin-top:12px}.login-page{min-height:100vh;display:grid;place-items:center}.login-card{width:min(430px,calc(100% - 28px));padding:24px;background:#0d191f;border:1px solid #29414d;border-radius:10px}.login-card h1{margin-top:0}.login-card p{color:#78909b}
@media(max-width:700px){.topbar{align-items:flex-start;flex-direction:column}.topbar nav{width:100%}.topbar nav a{flex:1 1 45%}.container{width:calc(100% - 14px);margin:8px auto}.panel{padding:10px}.form-grid.cols,.filter-grid,.stats,.preview{grid-template-columns:1fr}.wide{grid-column:auto}input,select{font-size:16px}.stats strong,.preview strong{font-size:18px}}

.stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats .positive{border-color:#356b48}.stats .positive strong{color:#a9efbd}
.stats .negative{border-color:#74373b}.stats .negative strong{color:#ff9c9c}
.absence-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.absence-summary>div{padding:10px 12px;background:#0b171d;border:1px solid #29414d;border-radius:7px;color:#8ea4ae}
.absence-summary strong{float:right;color:#e4eef2}
.badge{display:inline-flex;padding:3px 7px;border-radius:999px;border:1px solid #35505c}
.badge.vacation{color:#9deeff}.badge.sick{color:#ffb0b0}.badge.holiday{color:#ffe29d}
@media(max-width:700px){.stats.six,.absence-summary{grid-template-columns:1fr}.absence-summary strong{float:none;display:block;margin-top:4px}}

/* V4 – Schichtmodell / kompakte Monatslisten */
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.panel-title-row h2{margin:0}.subline{display:block;margin-top:3px;opacity:.65;font-size:.78rem}.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;flex-wrap:wrap}.pagination .disabled{pointer-events:none;opacity:.4}.absence-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}@media(max-width:760px){.panel-title-row{align-items:flex-start;flex-direction:column}.absence-summary{grid-template-columns:1fr!important}.pagination{justify-content:space-between}}

/* Schichttabelle – Datum/Wochentag und Folgetag sauber trennen */
.date-cell,
.end-cell {
    vertical-align: middle;
}

.date-main,
.time-main {
    display: block;
    line-height: 1.25;
    color: #e7f0f3;
}

.table-subline {
    display: block;
    width: fit-content;
    margin-top: 5px;
    padding: 2px 7px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 5px;
    color: #8fa8b5;
    background: rgba(255,255,255,.025);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}

@media(max-width:760px) {
    .table-subline {
        margin-top: 4px;
        padding: 2px 6px;
    }
}