:root {
    --bg: #f4f5f7;
    --surface: #fff;
    --text: #1d2330;
    --muted: #667085;
    --border: #d9dde4;
    --primary: #b4231f;
    --primary-text: #fff;
    --vac: #3b82c4;
    --conflict: #d92d20;
    --conflict-bg: #fde4e1;
    --ok: #1a7f37;
    --ok-bg: #dcf3e2;
    --warn-bg: #fff4d6;
    --warn: #8a5a00;
    --info-bg: #e3eefb;
    --weekend: #eceef2;
    --me: #fffbe6;
    --vac-light: #c9def2;
    --azv: #7c5cc4;
    --course: #d97a10;
    --course-light: #f6d9b5;
    --hol: #fff1a8;
    --hol-text: #6b5500;
    --radius: 8px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14171c;
        --surface: #1d2129;
        --text: #e6e8ec;
        --muted: #98a1b0;
        --border: #343a46;
        --primary: #e0524d;
        --vac: #4f9be0;
        --conflict: #ff5c4d;
        --conflict-bg: #4a1d1a;
        --ok: #4cc26b;
        --ok-bg: #173822;
        --warn-bg: #3d3015;
        --warn: #f0c060;
        --info-bg: #1b2c42;
        --weekend: #262b35;
        --me: #2e2a17;
        --vac-light: #23405e;
        --azv: #9a7fe0;
        --course: #e8913a;
        --course-light: #5a3a17;
        --hol: #4a4215;
        --hol-text: #f0dc80;
    }
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--vac); }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
main { max-width: 1500px; margin: 0 auto; padding: 1rem; }
code { font-size: .9em; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding: .6rem 1rem; background: var(--primary); color: var(--primary-text); }
.topbar a { color: var(--primary-text); text-decoration: none; }
.brand { font-weight: 700; }
.topbar nav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
.topbar nav a { padding: .3rem .65rem; border-radius: 6px; opacity: .9; }
.topbar nav a.active, .topbar nav a:hover { background: rgba(255,255,255,.18); opacity: 1; }
.who { display: flex; gap: .75rem; align-items: center; font-size: .9rem; }
.who .link { color: var(--primary-text); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.card.narrow { max-width: 520px; margin: 1rem auto; }
.card.done { border-color: var(--ok); }
.cardhead, .pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.cards2, .cards3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

label { display: block; margin-bottom: .75rem; font-weight: 500; }
label.check { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
label.check input { margin-top: .3rem; }
input, select { display: block; width: 100%; margin-top: .25rem; padding: .45rem .6rem; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
input[type=checkbox] { width: auto; display: inline; }
input:disabled { opacity: .6; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.hint { min-height: 1.2em; font-weight: 600; margin: 0 0 .75rem; }
.hint.bad { color: var(--conflict); }
form.compact label { margin-bottom: .5rem; }
.buttons { display: flex; gap: .5rem; flex-wrap: wrap; }

button, .btn { display: inline-block; padding: .45rem .9rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; text-decoration: none; }
button.primary, .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
button.link { background: none; border: 0; padding: 0; color: var(--vac); text-decoration: underline; }
button.link.danger { color: var(--conflict); }
form.inline { display: inline; }

.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: .75rem; }
.flash.ok { background: var(--ok-bg); }
.flash.error { background: var(--conflict-bg); }
.flash.warn { background: var(--warn-bg); }
.flash.info { background: var(--info-bg); }

.muted { color: var(--muted); font-weight: 400; }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }

.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; background: var(--weekend); color: var(--text); font-weight: 500; text-decoration: none; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--conflict); color: #fff; }
.badge.type-azv { background: var(--azv); color: #fff; }
.badge.type-urlaub { background: var(--info-bg); }
.badge.type-lehrgang { background: var(--course); color: #fff; }
ul.quarters { list-style: none; padding: 0; margin: .5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; font-size: .9rem; }
ul.quarters li.done strong { color: var(--ok); }
.badge.mail-gesendet { background: var(--ok-bg); color: var(--ok); }
.badge.mail-fehler { background: var(--conflict); color: #fff; }
.badge.mail-uebersprungen { background: var(--warn-bg); color: var(--warn); }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.inline-form label { flex: 1; min-width: 14rem; margin: 0; }
.card.narrow + .card { max-width: 1100px; margin: 1rem auto; }
.badge.act-erstellt { background: var(--ok-bg); color: var(--ok); }
.badge.act-geaendert { background: var(--info-bg); }
.badge.act-geloescht { background: var(--conflict-bg); color: var(--conflict); }
.chip { display: inline-block; margin: .1rem .25rem .1rem 0; padding: .05rem .45rem; border-radius: 4px; background: var(--weekend); font-size: .85rem; }

table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.list .num { text-align: right; }
table.list .actions { text-align: right; white-space: nowrap; }
table.list .actions > * { margin-left: .6rem; }
tr.inactive { opacity: .55; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin-bottom: 1rem; }
.filters label { margin: 0; }
.filters select { min-width: 12rem; }
.yearnav { display: flex; align-items: center; gap: .6rem; }
.yearnav strong { font-size: 1.2rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: var(--muted); }
.sw { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; border: 1px solid var(--border); }
.sw.v { background: var(--vac); }
.sw.c { background: var(--conflict); }
.sw.vo { background: var(--vac-light); }
.sw.a { background: var(--azv); }
.sw.l { background: var(--course); }
.sw.off { background: var(--weekend); }

.stat .big { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat .big small { font-size: .9rem; font-weight: 400; color: var(--muted); }
.stat .big.neg { color: var(--conflict); }
progress { width: 100%; height: .6rem; margin: .5rem 0; accent-color: var(--vac); }
progress.azv { accent-color: var(--azv); }

dl.stats { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; margin: 0 0 1rem; }
dl.stats dd { margin: 0; text-align: right; font-weight: 600; }

/* Gesamtübersicht: Monate untereinander, je Dienstgruppe eine Tabelle */
.month { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; margin-bottom: 1rem; }
.month h2 { margin-bottom: .5rem; }
.scroll { overflow-x: auto; }
table.grid { border-collapse: collapse; font-size: .8rem; min-width: 100%; }
table.grid th, table.grid td { border: 1px solid var(--border); padding: 0; text-align: center; min-width: 1.75rem; height: 1.6rem; }
table.grid thead th { font-weight: 500; line-height: 1.1; padding: .15rem 0; }
table.grid thead th small { color: var(--muted); font-size: .7rem; }
table.grid th.name { text-align: left; padding: 0 .5rem; min-width: 13rem; max-width: 17rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.grid th.name a { color: inherit; text-decoration: none; }
table.grid .namecell { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
table.grid .namecell .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
table.grid .namecell .acct { flex: none; color: var(--muted); font-weight: 400; font-size: .72rem; font-variant-numeric: tabular-nums; }
table.grid .namecell .acct.neg { color: var(--conflict); font-weight: 700; }
table.grid th.name a:hover { text-decoration: underline; }
table.grid .off { background: var(--weekend); }
table.grid thead th.off { color: var(--muted); font-weight: 400; }
table.grid thead th.duty { font-weight: 700; }
.scroll + .scroll { margin-top: .75rem; }
table.grid thead th.today { outline: 2px solid var(--primary); outline-offset: -2px; }
table.grid td.v { background: var(--vac); color: #fff; font-weight: 700; }
table.grid td.vo { background: var(--vac-light); color: var(--muted); }
table.grid td.a { background: var(--azv); color: #fff; font-weight: 700; }
table.grid td.l { background: var(--course); color: #fff; font-weight: 700; }
table.grid td.lo { background: var(--course-light); color: var(--muted); }
table.grid td.c { background: var(--conflict); color: #fff; font-weight: 700; }
table.grid tr.me th.name { background: var(--me); }
table.grid tr.wahead th { text-align: left; padding: .35rem .5rem; background: var(--bg); font-weight: 700; }
table.grid tr.sum th.name { font-weight: 600; color: var(--muted); }
table.grid tr.sum td { font-weight: 600; color: var(--muted); }
table.grid tr.sum td.c { background: var(--conflict-bg); color: var(--conflict); }
table.grid tr.sum td.off { background: var(--weekend); }

/* ---------------------------------------------------------------- Tablet & Handy */
.topbar input.menu-toggle-input, .menu-toggle { display: none; }

@media (max-width: 1100px) {
    .topbar { flex-wrap: wrap; gap: 0; padding: .5rem 1rem; }
    .brand { flex: 1; min-width: 0; padding: .3rem .5rem .3rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .menu-toggle { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .4rem .7rem; border-radius: 6px; background: rgba(255,255,255,.15); font-size: .95rem; user-select: none; }
    .menu-current { max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
    .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
    .burger::before { top: -6px; }
    .burger::after { top: 6px; }
    .topbar nav, .topbar .who { display: none; flex-basis: 100%; }
    .menu-toggle-input:checked ~ nav { display: flex; flex-direction: column; gap: 2px; padding: .5rem 0; }
    .menu-toggle-input:checked ~ .who { display: flex; justify-content: space-between; padding: .6rem .65rem .3rem; border-top: 1px solid rgba(255,255,255,.25); }
    .topbar nav a { padding: .65rem .65rem; font-size: 1rem; }
    .cards3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

@media (max-width: 700px) {
    main { padding: .75rem; }
    h1 { font-size: 1.3rem; }
    .card { padding: .85rem 1rem; }
    .card.narrow { margin: .5rem auto; }
    .row2, .row3 { grid-template-columns: 1fr; }
    .pagehead { align-items: flex-start; }
    .filters { align-items: stretch; }
    .filters label, .filters select { min-width: 0; flex: 1 1 100%; }
    .filters .btn { text-align: center; }
    .inline-form label { min-width: 0; flex-basis: 100%; }
    .inline-form button { flex: 1; }
    .cardhead .buttons { width: 100%; }
    .cardhead .buttons .btn { flex: 1; text-align: center; }
    .stat .big { font-size: 1.7rem; }
    input, select, button, .btn { font-size: 16px; } /* verhindert Zoom beim Antippen auf iOS */
    table.grid th.name { min-width: 7.5rem; max-width: 7.5rem; }
    table.grid .namecell { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; padding: .1rem 0; }
    table.grid .namecell .nm { max-width: 100%; }

    /* Listentabellen werden zu Karten (Spaltennamen per JS als data-label) */
    table.list.stack thead { display: none; }
    table.list.stack, table.list.stack tbody, table.list.stack tr { display: block; width: 100%; }
    table.list.stack tr { border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .75rem; margin-bottom: .6rem; background: var(--surface); }
    /* Zelleninhalt bleibt Fließtext (rechtsbündig), der Spaltenname steht links davor */
    table.list.stack td { display: block; border: 0; padding: .3rem 0; text-align: right; overflow-wrap: anywhere; }
    table.list.stack td::after { content: ""; display: table; clear: both; }
    table.list.stack td::before { content: attr(data-label); float: left; margin-right: 1rem; font-weight: 600; color: var(--muted); text-align: left; }
    table.list.stack td:not([data-label])::before, table.list.stack td[data-label=""]::before { content: none; }
    table.list.stack td:not([data-label]) { text-align: left; }
    table.list.stack td:empty, table.list.stack td.actions:not(:has(*)) { display: none; }
    table.list.stack td.actions { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .5rem; }
    table.list.stack td.actions > * { margin-left: 1.2rem; }
    table.list.stack .num { text-align: right; }
    /* Ohne JavaScript: Tabelle scrollt innerhalb ihres Rahmens */
    table.list:not(.stack) { display: block; overflow-x: auto; }
}

@media print {
    .topbar, .filters, .yearnav, .btn { display: none !important; }
    body { background: #fff; }
    .month { break-inside: avoid; border: 0; }
}

/* Ferien */
.sw.hol { background: var(--hol); }
.badge.hol { background: var(--hol); color: var(--hol-text); }
table.grid tr.holrow td { height: 1.2rem; font-size: .7rem; padding: 0 .3rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px; }
table.grid tr.holrow td.hol { background: var(--hol); color: var(--hol-text); font-weight: 600; }
table.grid tr.holrow th.name { font-size: .75rem; color: var(--muted); font-weight: 500; }
table.grid thead th.holday { box-shadow: inset 0 -3px 0 var(--hol); }
details.holyear { border-top: 1px solid var(--border); padding: .4rem 0; }
details.holyear summary { cursor: pointer; }