:root{
  --bg:#E9EFEC; --ink:#12262A; --muted:#51666A; --line:#C3D2CE;
  --teal:#1E6B73; --deep:#0E3A40; --amber:#E3A72F; --card:#FBFCFB; --err:#A4262C;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-d:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0C1A1D;--ink:#E4EEEC;--muted:#9BB1B3;--line:#244249;--teal:#58B6BF;--deep:#8ED3DA;--card:#12262A;--err:#FF8A8F}
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5}
.landing{min-height:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(24px,6vw,88px);max-width:1280px;margin:0 auto}
.brand{margin:0 0 20px;font-weight:600;color:var(--teal);letter-spacing:.01em}
h1{font-family:var(--font-d);font-weight:700;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;
  margin:0 0 20px;color:var(--deep);letter-spacing:-.02em}
.lead{max-width:46ch;color:var(--muted);font-size:1.1rem;margin:0 0 40px}

/* Dienstplan-Streifen: der eine auffällige Moment der Seite */
.roster{display:grid;gap:5px;max-width:560px}
.roster-head,.roster-row{display:grid;grid-template-columns:44px repeat(14,1fr);gap:5px;align-items:center}
.roster-head span{font-size:.7rem;color:var(--muted);text-align:center}
.roster-row .k{font-size:.8rem;font-weight:600;color:var(--ink)}
.roster-row i,.legend i{display:block;aspect-ratio:1;border-radius:4px;background:transparent;border:1px solid var(--line)}
.c-D{background:var(--teal)!important;border-color:var(--teal)!important}
.c-N{background:var(--deep)!important;border-color:var(--deep)!important}
.c-W{background:var(--amber)!important;border-color:var(--amber)!important}
.legend{display:flex;gap:18px;margin-top:12px;font-size:.8rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;aspect-ratio:1}
@media (prefers-color-scheme:dark){.c-N{background:#2F7F89!important;border-color:#2F7F89!important}}
@media (prefers-reduced-motion:no-preference){
  .roster-row i{animation:pop .5s both}
  .roster-row:nth-of-type(2) i{animation-delay:.05s}
  .roster-row:nth-of-type(3) i{animation-delay:.1s}
  .roster-row:nth-of-type(4) i{animation-delay:.15s}
  .roster-row:nth-of-type(5) i{animation-delay:.2s}
}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3vw,40px);
  box-shadow:0 12px 40px -24px rgba(14,58,64,.45)}
.panel h2{font-family:var(--font-d);font-size:1.6rem;margin:0 0 20px}
label{display:block;font-weight:600;font-size:.9rem;margin:16px 0 6px}
input[type=text],input[type=password]{width:100%;padding:12px 14px;font:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:8px}
input:focus-visible,button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
button{margin-top:24px;width:100%;padding:13px 16px;font:inherit;font-weight:600;cursor:pointer;
  background:var(--teal);color:#fff;border:0;border-radius:8px}
button:hover{background:var(--deep)}
button.secondary{width:auto;background:transparent;color:var(--teal);border:1px solid var(--teal)}
.error{margin:16px 0 0;color:var(--err);font-weight:600}
.hint{margin:20px 0 0;font-size:.85rem;color:var(--muted)}
.home{max-width:640px;margin:0 auto;padding:clamp(32px,8vw,120px) 24px}

@media (max-width:820px){
  .landing{grid-template-columns:1fr}
  .panel{order:-1}
  .roster{display:none}
  .lead{margin-bottom:0}
}

/* ===== App-Layout mit Seitenmenü ===== */
body.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100%}
.side{background:var(--deep);color:#E6F1F0;padding:28px 18px;display:flex;flex-direction:column;gap:24px;
  position:sticky;top:0;height:100vh}
.side-brand{margin:0 8px;font-family:var(--font-d);font-weight:700;font-size:1.35rem;line-height:1.15}
.side-brand span{display:block;font-weight:500;font-size:.95rem;color:#9FD0D4}
.side nav{display:flex;flex-direction:column;gap:2px}
.nav{display:block;padding:10px 12px;border-radius:8px;color:#E6F1F0;text-decoration:none;font-weight:500}
.nav:hover{background:rgba(255,255,255,.08)}
.nav.on{background:var(--amber);color:#1B1400;font-weight:600}
.nav.sub{padding-left:26px;font-weight:400;font-size:.95rem}
.nav.sub.on{font-weight:600}
.nav:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.grp summary{padding:10px 12px;border-radius:8px;cursor:pointer;font-weight:500;list-style:none}
.grp summary::-webkit-details-marker{display:none}
.grp summary::after{content:"";float:right;width:7px;height:7px;margin-top:7px;border:solid currentColor;
  border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.grp[open] summary::after{transform:rotate(-135deg);margin-top:11px}
.grp summary:hover{background:rgba(255,255,255,.08)}
.side-foot{margin-top:auto;padding:0 8px}
.who{margin:0 0 12px;font-size:.9rem;color:#9FD0D4}
.who strong{color:#fff}
.side button.secondary{width:100%;color:#fff;border-color:rgba(255,255,255,.5);margin-top:0}
.side button.secondary:hover{background:rgba(255,255,255,.1)}
.content{padding:clamp(20px,3vw,44px);min-width:0}
.page-title{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 6px}
.sub-lead{margin:0;color:var(--muted)}

/* ===== Monatsraster ===== */
.month-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.month-nav{display:flex;gap:8px}
.month-nav a{padding:9px 16px;border:1px solid var(--teal);border-radius:8px;color:var(--teal);text-decoration:none;font-weight:600}
.month-nav a:hover{background:var(--teal);color:#fff}
.chips{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:0 0 16px;padding:0;font-size:.92rem;color:var(--muted)}
.chips li{display:flex;align-items:center;gap:7px}
.chips strong{color:var(--ink)}
.dot{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.dot.t-frei,.tag.t-frei{background:var(--teal);color:#fff}
.dot.t-dienst,.tag.t-dienst{background:var(--amber);color:#1B1400}
.dot.t-nicht{background:var(--err)}
.tag.t-nicht{background:var(--err);color:#fff}
@media (prefers-color-scheme:dark){.dot.t-frei,.tag.t-frei{color:#06171A}.tag.t-nicht{color:#1A0507}}

.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wd{font-weight:600;font-size:.85rem;color:var(--muted);padding:4px 8px}
.day{position:relative;min-height:104px;padding:8px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0}
.day.we{background:color-mix(in srgb,var(--card) 82%,var(--line))}
.day.hol .num{color:var(--err)}
.day.out{opacity:.35;cursor:default;background:transparent}
.day.today{box-shadow:inset 0 0 0 2px var(--amber)}
.day:not(.out):hover{border-color:var(--teal)}
.day:focus-visible{outline:3px solid var(--amber);outline-offset:1px}
.num{font-weight:700;font-size:1.05rem}
.hol-name{font-size:.72rem;color:var(--err);line-height:1.2}
.tag{align-self:flex-start;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:5px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag:empty{display:none}
.note{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Dialog ===== */
dialog{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);
  padding:28px;width:min(480px,92vw);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(8,24,27,.55)}
dialog h2{font-family:var(--font-d);margin:0 0 8px}
dialog label{margin:14px 0 6px}
dialog input[type=date],dialog input[type=text]{width:100%;padding:11px 12px;font:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
fieldset{border:0;padding:0;margin:14px 0 0}
legend{font-weight:600;font-size:.9rem;padding:0;margin-bottom:6px}
label.opt{display:flex;align-items:center;gap:10px;font-weight:500;margin:4px 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
label.opt:has(input:checked){border-color:var(--teal);background:color-mix(in srgb,var(--teal) 12%,transparent)}
.dlg-actions{display:flex;gap:8px;align-items:center;margin-top:22px}
.dlg-actions .spacer{flex:1}
.dlg-actions button{margin:0;width:auto;padding:10px 16px}
button.inline{width:auto}
main button.secondary,dialog button.secondary{color:var(--teal)}

/* ===== Admin ===== */
.admin-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px;max-width:640px}
.admin-list a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--ink);text-decoration:none}
.admin-list a:hover{border-color:var(--teal)}
.admin-list span{display:block;color:var(--muted);font-size:.92rem;margin-top:2px}
.placeholder{margin-top:28px;padding:36px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);max-width:640px}

@media (max-width:900px){
  body.app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:column;gap:14px;padding:16px}
  .side-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:0}
  .side-foot form{flex:none}.side button.secondary{width:auto;padding:8px 14px}.who{margin:0}
  .day{min-height:78px;padding:5px}
  .tag{font-size:.65rem;padding:1px 5px}.note,.hol-name{display:none}
}

/* ===== Dienstformen: Farben ===== */
:root{
  --c-bd:#1E6B73;--c-bd-t:#fff; --c-sd:#E3A72F;--c-sd-t:#1B1400;
  --c-vg2:#3D6FB6;--c-vg2-t:#fff; --c-op2:#8A4F7D;--c-op2-t:#fff;
  --c-nan:#B5472E;--c-nan-t:#fff; --c-nat:#E39A78;--c-nat-t:#2A0F05;
}
@media (prefers-color-scheme:dark){:root{
  --c-bd:#58B6BF;--c-bd-t:#06171A; --c-vg2:#7FA6E3;--c-vg2-t:#0A1626;
  --c-op2:#C58BB8;--c-op2-t:#2A1025; --c-nan:#E2765A;--c-nan-t:#2A0F05; --c-nat:#F0B89E;
}}
.tag.t-BD{background:var(--c-bd);color:var(--c-bd-t)}   .dot.t-BD{background:var(--c-bd)}
.tag.t-SD{background:var(--c-sd);color:var(--c-sd-t)}   .dot.t-SD{background:var(--c-sd)}
.tag.t-VG2{background:var(--c-vg2);color:var(--c-vg2-t)} .dot.t-VG2{background:var(--c-vg2)}
.tag.t-OP2{background:var(--c-op2);color:var(--c-op2-t)} .dot.t-OP2{background:var(--c-op2)}
.tag.t-NAN{background:var(--c-nan);color:var(--c-nan-t)} .dot.t-NAN{background:var(--c-nan)}
.tag.t-NAT{background:var(--c-nat);color:var(--c-nat-t)} .dot.t-NAT{background:var(--c-nat)}
.tag.t-FREI{background:transparent;color:var(--ink);border:1px dashed var(--muted)}
.dot.t-FREI{background:transparent;border:1px dashed var(--muted)}

.others{display:flex;flex-wrap:wrap;gap:3px;margin-top:auto}
.oc{font-size:.68rem;line-height:1.3;padding:1px 5px;border-radius:4px;color:var(--muted);
  background:color-mix(in srgb,var(--ink) 7%,transparent);border-left:3px solid var(--c,var(--muted))}
.oc.t-BD{--c:var(--c-bd)}.oc.t-SD{--c:var(--c-sd)}.oc.t-VG2{--c:var(--c-vg2)}
.oc.t-OP2{--c:var(--c-op2)}.oc.t-NAN{--c:var(--c-nan)}.oc.t-NAT{--c:var(--c-nat)}
.day{min-height:116px}
.status{min-height:1.4em;margin:0 0 10px;color:var(--muted);font-size:.9rem}
.opt-l{font-weight:600}
.opt-n{margin-left:auto;font-size:.8rem;color:var(--muted);font-weight:400}
label.opt[hidden]{display:none}
.hint-box{margin:12px 0 0;padding:10px 12px;border-radius:8px;font-size:.88rem;color:var(--muted);
  background:color-mix(in srgb,var(--teal) 10%,transparent)}
@media (max-width:900px){.oc{font-size:.6rem;padding:0 3px}.day{min-height:84px}}

/* ===== Notarzt-Wochen ===== */
.day.naw{border-top:3px solid var(--c-nan)}
.na-info{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:.88rem;color:var(--muted)}
.na-info .bar{width:22px;height:0;border-top:3px solid var(--c-nan);flex:none}

/* ===== Fristen, Nutzer, Konto ===== */
.banner{padding:10px 14px;border-radius:8px;margin:0 0 14px;font-size:.92rem;
  background:color-mix(in srgb,var(--teal) 12%,transparent)}
.banner.lock{background:color-mix(in srgb,var(--err) 14%,transparent);font-weight:600}
.cal[data-edit="0"] .day{cursor:default}
.cal[data-edit="0"] .day:not(.out):hover{border-color:var(--line)}
.ok{color:var(--teal);font-weight:600;margin:14px 0}
.h2{font-family:var(--font-d);font-size:1.2rem;margin:28px 0 10px}
.tbl-wrap{overflow-x:auto;max-width:960px;margin-top:14px}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem;vertical-align:middle}
.tbl th{color:var(--muted);font-weight:600}
.st-lock{color:var(--err);font-weight:600}.st-open{color:var(--teal);font-weight:600}
.muted{color:var(--muted);font-size:.85rem}
main input[type=email],main input[type=date],main select{padding:9px 10px;font:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:8px;max-width:100%}
.save{margin-top:18px}
.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;max-width:960px}
.inline-form label,.card-form label{margin:0;display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.88rem}
.inline-form button{margin:0}
.row-form{display:flex;gap:8px;align-items:center}
button.small{padding:7px 12px;font-size:.85rem;margin:0;width:auto}
main button.secondary{margin-top:0}
.pwbox{margin:16px 0;padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--amber) 22%,transparent);max-width:640px}
.pw{display:block;margin-top:6px;font-size:1.4rem;font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;user-select:all}
.stack{display:grid;gap:24px;max-width:460px}
.card-form{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.card-form .h2{margin:0}
.card-form input{width:100%}
.card-form button{margin-top:6px;align-self:flex-start}
.side-foot .nav{padding:8px 8px;margin:0 -8px 10px}


/* ===== Bereiche / Startseite ===== */
:root{--c-its:#5E7F2E;--c-its-t:#fff;--c-hg:#5A6475;--c-hg-t:#fff;--c-tna:#A8325E;--c-tna-t:#fff}
@media (prefers-color-scheme:dark){:root{--c-its:#A3C46B;--c-its-t:#14200A;--c-hg:#A9B3C5;--c-hg-t:#111722;--c-tna:#E58AAE;--c-tna-t:#2A0B17}}
.tag.t-ITS{background:var(--c-its);color:var(--c-its-t)}.dot.t-ITS{background:var(--c-its)}
.tag.t-HG{background:var(--c-hg);color:var(--c-hg-t)}.dot.t-HG{background:var(--c-hg)}
.tag.t-TNA{background:var(--c-tna);color:var(--c-tna-t)}.dot.t-TNA{background:var(--c-tna)}
.oc.t-ITS{--c:var(--c-its)}.oc.t-HG{--c:var(--c-hg)}.oc.t-TNA{--c:var(--c-tna)}
.eyebrow{margin:0 0 4px;font-weight:600;color:var(--teal);letter-spacing:.01em}
.nav-label{margin:18px 12px 4px;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#9FD0D4}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:28px;max-width:960px}
.tile{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);color:var(--ink);text-decoration:none;min-height:150px}
.tile strong{font-family:var(--font-d);font-size:1.4rem}
.tile-dot{width:14px;height:14px;border-radius:4px;margin-bottom:6px}
.tile-text{color:var(--muted);font-size:.92rem}
.tile-meta{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--teal)}
a.tile:hover{border-color:var(--teal);box-shadow:0 12px 30px -22px rgba(14,58,64,.7)}
a.tile:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.tile.off{opacity:.55}.tile.off .tile-meta{color:var(--muted);font-weight:500}
.tiles-note{margin-top:20px}
fieldset.chk{border:0;padding:0;margin:0;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
fieldset.chk legend{width:100%}
.chk label{flex-direction:row;align-items:center;gap:6px;font-weight:500}
.row-form.chk{flex-wrap:wrap;gap:6px 12px}


/* ===== Intensiv, Kann nicht, Konflikte ===== */
:root{--c-tsi:#5E7F2E;--c-tsi-t:#fff;--c-nsi:#34506B;--c-nsi-t:#fff;--c-ts2:#B58B2A;--c-ts2-t:#1B1400}
@media (prefers-color-scheme:dark){:root{--c-tsi:#A3C46B;--c-tsi-t:#14200A;--c-nsi:#7FA3C4;--c-nsi-t:#0A1626;--c-ts2:#E3C16B}}
.tag.t-TSI{background:var(--c-tsi);color:var(--c-tsi-t)}.dot.t-TSI{background:var(--c-tsi)}
.tag.t-NSI{background:var(--c-nsi);color:var(--c-nsi-t)}.dot.t-NSI{background:var(--c-nsi)}
.tag.t-TS2{background:var(--c-ts2);color:var(--c-ts2-t)}.dot.t-TS2{background:var(--c-ts2)}
.oc.t-TSI{--c:var(--c-tsi)}.oc.t-NSI{--c:var(--c-nsi)}.oc.t-TS2{--c:var(--c-ts2)}
.tag.t-KN,.tag.t-IFR{background:transparent;color:var(--ink);border:1px dashed var(--muted)}
.tag.t-IFR{background:color-mix(in srgb,var(--muted) 14%,transparent)}
.dot.t-KN,.dot.t-IFR{background:transparent;border:1px dashed var(--muted)}
.day.closed{background:transparent;border-style:dashed;opacity:.5;cursor:default}
.conflict{margin-top:14px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--amber) 24%,transparent)}
.conflict p{margin:0 0 10px;font-size:.92rem;font-weight:600}
.conflict .dlg-actions{margin-top:0;flex-wrap:wrap}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px}
.tabs a{padding:8px 14px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600}
.tabs a:hover{border-color:var(--teal)}
.tabs a.on{background:var(--teal);border-color:var(--teal);color:#fff}
.regel{margin:-6px 0 12px;font-size:.88rem}

.loglist{margin:6px 0 0;padding-left:18px;font-size:.85rem;color:var(--muted)}
.exp-link{align-self:center;color:var(--teal);font-weight:600}
details summary{cursor:pointer}

main input.narrow{width:5rem}

/* ===== Sitzungs-Timer ===== */
.sess{margin:-6px 0 12px;font-size:.82rem;color:#9FD0D4}
.sess strong{color:#fff;font-variant-numeric:tabular-nums}
.sess.knapp strong{color:var(--amber)}
.sess-warn{position:fixed;right:20px;bottom:20px;z-index:50;max-width:340px;padding:16px 18px;border-radius:12px;
  background:var(--card);color:var(--ink);border:2px solid var(--amber);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.sess-warn[hidden]{display:none}
.sess-warn p{margin:0 0 10px}
.sess-warn strong{font-variant-numeric:tabular-nums}
@media (max-width:900px){.sess{margin:0}}

/* ===== Live-Aktualisierung: geänderte Tage kurz hervorheben ===== */
.day.neu{animation:neu 2.4s ease-out}
@keyframes neu{0%{box-shadow:inset 0 0 0 3px var(--teal)}100%{box-shadow:inset 0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.day.neu{animation:none;outline:2px solid var(--teal)}}

/* ===== Nutzerverwaltung: Namensfelder ===== */
.row-form.names{flex-wrap:wrap}
.row-form.names input[type=text]{width:9.5em}
.row-form.names input[type=email]{width:14em}