/* Einsatzplan Kölleda – Oberfläche. Optik und Begriffe folgen dem Klick-Prototyp (docs/prototyp). */
:root{
  --bg:#F2F5F7; --panel:#FFFFFF; --ink:#17242F; --muted:#5D6B78; --line:#E2E8EE; --line-strong:#AEB8C2;
  /* Zwischenüberschriften der Navigation, Platzhalter, alles was nur andeutet */
  --faint:#8B98A5;
  /* Navigationstext: ruhiger als --ink, deutlich lesbarer als --muted */
  --nav-ink:#3A4854;
  /* Einheitlicher Hover-Grund für Navigation, Menüs, Listen */
  --hover:#F0F3F6;
  --accent:#1F6F78; --accent-ink:#FFFFFF; --accent-soft:#E8F2F3; --accent-hover:#185860;
  --u:#6DAA5F; --k:#C9463D; --warn:#B8541F; --warn-soft:#FBEDE5; --bad-soft:#F9E3E1; --ok:#2F6B2A; --ok-soft:#E5F1E3;
  --r:8px;
  --shadow:0 1px 2px rgba(23,36,47,.05);
}
*{box-sizing:border-box}
[x-cloak]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
select,input,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.2}
h1{font-size:20px} h2{font-size:17px} h3{font-size:15px}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.warn{color:var(--warn)}
.bad{color:var(--k)}
.error{color:var(--k)}
hr.sep{border:0;border-top:1px solid var(--line);margin:16px 0}

/* ---------- Rahmen ---------- */
/* Kopfhöhe 57px = 36px Inhalt + 2×10px Polster + 1px Linie. .layout rechnet damit. */
.top{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:10px 20px;padding-top:calc(10px + env(safe-area-inset-top));min-height:calc(57px + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap;color:var(--ink);text-decoration:none}
.brand svg{width:28px;height:28px}
.brand span.site{color:var(--muted);font-weight:400}
.top .spacer{flex:1}
.menu{position:relative}
.usermenu{display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px 6px;border-radius:var(--r);font:inherit;font-size:13px;color:var(--ink);text-align:left;white-space:nowrap}
.usermenu:hover{background:var(--hover)}
.usermenu .avatar{width:28px;height:28px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center}
/* Enge Zeilen: Name und Rolle zusammen sind genau 36px hoch, sonst wächst der Kopf. */
.usermenu .nam{line-height:1.25}
/* Wer mehrere Rollen trägt, bekommt sie hier gekürzt – vollständig stehen sie im Menü. */
.usermenu .rolle{display:block;max-width:22ch;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:11px;line-height:1.1;font-weight:400}
.usermenu .chev{color:var(--faint);font-size:11px}
.dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 30px rgba(27,39,51,.15);min-width:200px;padding:6px;z-index:30}
.dropdown a,.dropdown button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px}
.dropdown a:hover,.dropdown button:hover{background:var(--hover)}
.dropdown-head{padding:6px 10px 8px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.dropdown-head span{display:block;color:var(--muted);font-size:11px;font-weight:400;line-height:1.2}
.layout{display:flex;min-height:calc(100vh - 57px)}
nav.side{width:216px;flex:none;padding:16px 12px;border-right:1px solid var(--line);background:var(--panel)}
/* Zwischenüberschrift je Gruppe (Planung / Stammdaten / System) */
nav.side .navgroup{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;padding:14px 10px 6px}
nav.side .navgroup:first-child{padding-top:4px}
nav.side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);margin-bottom:2px;color:var(--nav-ink);text-decoration:none;font-size:14px}
nav.side a svg{width:18px;height:18px;flex:none}
nav.side a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
nav.side a:hover:not(.active){background:var(--hover);color:var(--ink)}
nav.side .count{margin-left:auto;background:var(--warn);color:#fff;font-size:11px;padding:1px 7px;border-radius:10px;font-weight:600}
main{flex:1;min-width:0;padding:20px 24px 60px}
.page-head{display:flex;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
/* Basis statt 0, sonst quetschen viele Knöpfe die Überschrift auf Minimalbreite zusammen. */
.page-head .grow{flex:1 1 320px;min-width:min(100%,280px)}
.page-head h1 span{color:var(--muted);font-weight:400;white-space:nowrap}
.page-head .tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.weeknav{display:flex;gap:6px;align-items:center}
.area-pick{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.area-pick select{border:1px solid var(--line-strong);border-radius:var(--r);padding:5px 8px;font:inherit;font-size:13px;color:var(--text);background:var(--panel);max-width:190px}
.weeknav a{text-decoration:none}
.inline-form{display:flex;gap:6px}
.inline-form input{border:1px solid var(--line-strong);border-radius:var(--r);padding:6px 10px}
.table-wrap{overflow:auto}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.seg a{padding:6px 12px;font-size:13px;text-decoration:none;color:var(--ink)}
.seg a.active{background:var(--accent);color:#fff}

.msgs{list-style:none;margin:0 0 14px;padding:0}
.msg{padding:9px 12px;border-radius:var(--r);margin-bottom:6px;font-size:14px;background:var(--accent-soft);color:var(--accent)}
.msg.success{background:var(--ok-soft);color:var(--ok)}
.msg.error,.msg.warning{background:var(--bad-soft);color:var(--k)}
.msg.info{background:var(--accent-soft);color:var(--accent)}

.btn{display:inline-block;border:1px solid var(--line-strong);background:var(--panel);border-radius:var(--r);padding:7px 14px;font-weight:500;text-decoration:none;color:var(--ink);line-height:1.3}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.danger{color:var(--k);border-color:var(--k)}
.btn.outline{border-color:var(--accent);color:var(--accent)}
/* allauth vergibt für hervorgehobene Zweitknöpfe „prominent“ UND „outline“ – das ergab
   türkise Schrift auf türkisem Grund, der Passkey-Knopf war ein leerer Balken.
   Bei beidem gewinnt outline: gleichwertig sichtbar, aber nicht zweimal primär. */
.btn.primary.outline{background:var(--panel);color:var(--accent);border-color:var(--accent)}
.btn.primary.outline:hover{background:var(--accent-soft)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:4px 10px;font-size:13px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
.btn-group.vertical{flex-direction:column}
.actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:14px;font-size:13px;font-weight:500;border:1px solid var(--line-strong)}
.pill.draft{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.published{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- Plantafel ---------- */
/* Kopf in zwei Zeilen: oben Woche und Aktionen, darunter Bereich und Fortschritt.
   Vorher standen elf Knöpfe in einer Reihe und die Überschrift wurde zusammengequetscht. */
.tafelkopf{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:8px}
.tafelkopf h1{font-size:21px}
.kwschalter{display:inline-flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:var(--shadow)}
.kwschalter .pfeil{padding:7px 11px;color:var(--muted);text-decoration:none;font-size:14px;line-height:1}
.kwschalter .pfeil:hover{background:var(--hover);color:var(--ink)}
.kwschalter .kw{padding:0 6px;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kwschalter .kw small{color:var(--muted);font-weight:400;margin-left:4px}
.kopfaktionen{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.knopfmenue{position:relative}
.knopfmenue .dropdown{min-width:260px}
.knopfmenue .dropdown small{display:block;color:var(--muted);font-size:12px;line-height:1.3;margin-top:1px}
.tafelzeile2{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:14px}
/* Bereichswahl als Segment statt Auswahlfeld: ein Klick statt aufklappen und zielen. */
.bereichswahl{display:inline-flex;background:#E9EDF1;border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.bereichswahl button{border:0;background:none;border-radius:7px;padding:5px 12px;font:inherit;font-size:13px;color:var(--muted)}
.bereichswahl button:hover{color:var(--ink)}
.bereichswahl button.an{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(23,36,47,.08)}
.balken{width:120px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:inline-block}
.balken i{display:block;height:100%;background:var(--accent);border-radius:3px}

.board-wrap{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media (max-width:1100px){.board-wrap{grid-template-columns:1fr}}
.board{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:auto;box-shadow:var(--shadow)}
/* Breiter als früher: in den Tageszellen steht die Schichtzeit, nicht mehr das Kürzel. */
table.plan{border-collapse:collapse;width:100%;font-size:14px;min-width:1060px}
table.plan.compact{min-width:0;font-size:13px}
table.plan th,table.plan td{border-bottom:1px solid var(--line);padding:0;height:36px;text-align:center;vertical-align:middle}
table.plan th{font-weight:500;color:var(--muted);font-size:13px;background:#FAFBFC;position:sticky;top:0;z-index:2}
/* Heute: Kopf in Akzentfarbe, Spalte leicht getönt und links abgesetzt – man findet
   den Tag beim Überfliegen, ohne die Datumszeile zu lesen. */
table.plan th.today{color:var(--accent);font-weight:700;background:#F0F8F8;border-left:2px solid var(--accent)}
table.plan td.today{background:#F7FBFB;border-left:2px solid var(--accent)}
table.plan td.today.wknd{background:#F2F7F8}
table.plan th.name,table.plan td.name{text-align:left;padding:0 12px;width:290px;min-width:290px;position:sticky;left:0;background:var(--panel);z-index:1}
table.plan.compact th.name,table.plan.compact td.name{width:auto;min-width:0}
table.plan th.name{z-index:3;background:#FAFBFC}
table.plan td.name{padding:5px 12px;line-height:1.3}
table.plan td.name .who{font-weight:500}
/* Funktion (Tätigkeitsprofil) unter dem Namen – mit Recht anklickbar, ohne Recht nur Text. */
table.plan td.name .fn{color:var(--muted);font-weight:400;font-size:12px}
.fnslot{display:block}
button.fn{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
button.fn:not(:disabled):hover{color:var(--accent)}
.fn.leer{font-style:italic;opacity:.75}
button.fn.kompakt{text-decoration:none;font-size:12px;opacity:0;padding:0 2px}
ul.people li:hover button.fn.kompakt,button.fn.kompakt:focus-visible{opacity:1}
table.plan td.name .quals{font-size:12px;color:var(--muted);white-space:normal;line-height:1.35}
table.plan td.name .qual{display:inline}
table.plan td.name .qual+.qual::before{content:" · "}
table.plan td.name .qual.expiring{color:var(--warn)}
.posname small{margin-left:4px}
.soll{display:inline-flex;align-items:center;gap:1px;margin-left:8px;font-size:12px;color:var(--muted);vertical-align:middle}
.soll b{min-width:14px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.soll.custom b{color:var(--accent);text-decoration:underline dotted}
.soll .step{background:none;border:1px solid transparent;border-radius:3px;width:18px;height:18px;padding:0;font:inherit;font-size:13px;line-height:1;color:var(--muted)}
.soll .step:not(:disabled):hover{border-color:var(--line-strong);color:var(--accent)}
.soll .step:disabled{opacity:.3}
.print-link{font-size:12px;font-weight:400;text-decoration:none;color:var(--accent);margin-left:10px}
.print-link.row{opacity:0;font-size:14px;line-height:1;vertical-align:middle;background:none;border:0;padding:0;font-family:inherit;margin-left:8px}
table.plan tr:hover .print-link.row,.print-link.row:focus-visible{opacity:1}
.print-link.row[disabled]{opacity:.3}
table.plan tr.area td{background:#F3F5F7;font-weight:600;text-align:left;padding:0 12px;height:32px;border-top:2px solid var(--line-strong);position:sticky;left:0}
table.plan tr.area td span{color:var(--muted);font-weight:400;font-size:13px;margin-left:8px}
.area-toggle{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;display:inline-flex;align-items:center;gap:6px}
.area-toggle:hover{color:var(--accent)}
.area-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.area-toggle .chev{display:inline-block;transition:transform .12s;color:var(--muted);font-size:11px}
.area-toggle .chev.open{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.area-toggle .chev{transition:none}}
table.plan td.wknd,table.plan th.wknd{background:#F7F8FA}
table.plan th.feiertag{background:var(--warn-soft);color:var(--warn)}
table.plan th .fname{display:block;font-size:10px;font-weight:600;line-height:1.15;max-width:92px;margin:1px auto 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell{width:100%;height:36px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0}
.cell:disabled{cursor:default}
.cell:not(:disabled):hover .chip,.cell:not(:disabled):hover .empty{outline:2px solid var(--accent);outline-offset:1px}
.cell:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:0 4px;height:24px;border-radius:5px;font-weight:600;font-size:13px;position:relative}
/* Schichtzeit in der Zelle – enger Satz, damit „06:00–14:00“ in eine Tagesspalte passt. */
.chip.time{min-width:72px;font-size:11.5px;letter-spacing:-.1px;font-variant-numeric:tabular-nums;white-space:nowrap}
table.plan.compact .chip.time{min-width:0;font-size:11px}
/* Teamplan in der App: Beginn über Ende, damit sieben Tage aufs Handy passen. Kollegen sehen
   Uhrzeiten, keine Kürzel wie F1 – die sagen ihnen nichts (Entscheidung 2026-09-24). */
.chip.zeit2{flex-direction:column;height:auto;min-width:0;padding:2px 4px;font-size:11px;line-height:1.15;font-variant-numeric:tabular-nums}
.chip.zeit2 span{font-weight:400}
/* Qualifikation als Symbol am Namen, z. B. Rettungszeichen E003 für Ersthelfer. */
.mark{width:14px;height:14px;flex:none;vertical-align:-2px}
table.plan td{position:relative}
/* ---------- Plantafel auf Arbeitsplätzen ---------- */
table.plan.pos th.pos,table.plan.pos td.pos{text-align:left;padding:0 12px;width:190px;min-width:190px;position:sticky;left:0;background:var(--panel);z-index:1}
table.plan.pos th.pos{z-index:3;background:#FAFBFC}
table.plan.pos th.name,table.plan.pos td.name{left:190px;width:250px;min-width:250px}
table.plan.pos{min-width:980px}
td.pos .posname{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;text-align:left;line-height:1.25}
td.pos .posname:not(:disabled):hover{color:var(--accent)}
td.pos .posname small{font-weight:400;color:var(--muted);font-size:12px}
/* Folgeplätze desselben Arbeitsplatzes: leiser, leicht eingerückt, mit Verbindungslinie */
td.pos .posname.weiter{font-weight:400;color:var(--muted)}
td.pos.weiter{padding-left:22px;box-shadow:inset 3px 0 0 -1px var(--line) }
td.pos .fn{display:block;color:var(--muted);font-size:12px;font-weight:400;line-height:1.2}
td.pos .fn.none{font-style:italic}
tr.free td.name .freeslot{background:none;border:1px dashed var(--line-strong);border-radius:5px;color:var(--muted);font:inherit;font-size:13px;padding:2px 10px}
tr.free td.name .freeslot:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}
tr.free td{background:#FCFDFD}
tr.shiftrow td{height:30px;background:#F7F8FA;font-weight:600;text-align:left;padding:0 12px;border-top:1px solid var(--line-strong);font-size:13px}
tr.shiftrow td .time{color:var(--muted);font-weight:400;margin-left:8px}
tr.shiftrow td .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;vertical-align:middle}
tr.shiftrow td:not(:first-child){text-align:center;font-weight:400;color:var(--muted);font-size:12px}
tr.shiftrow td .v{display:inline-block;min-width:34px;padding:1px 4px;border-radius:4px}
tr.shiftrow td .v.under{background:var(--bad-soft);color:var(--k);font-weight:600}
tr.shiftrow td .v.quali{background:var(--warn-soft);color:var(--warn);font-weight:600}
.cell.under .empty{background:var(--bad-soft);color:var(--k)}
.cell.target{background:var(--ok-soft)}
.cell.target .empty{border:1px solid var(--ok);color:var(--ok)}
.cell.blocked{opacity:.35}
/* Bemerkung zum Tag unter der Uhrzeit; die Zelle wächst dafür nach unten. */
.cell.mitnotiz{height:auto;min-height:36px;flex-direction:column;gap:2px;padding:3px 0}
.cell .tagnotiz{display:block;max-width:100%;font-size:10.5px;line-height:1.15;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
/* Bemerkung zur Woche unter dem Namen – an der Stelle, an der früher die Funktion stand. */
.bemslot{display:block}
.bem{font-size:12px;color:var(--ink);font-weight:400;white-space:normal;line-height:1.3}
button.bem{background:none;border:0;padding:0;font:inherit;font-size:12px;text-align:left;cursor:pointer}
button.bem.leer{color:var(--muted);opacity:0}
tr:hover button.bem.leer,button.bem.leer:focus-visible{opacity:.8}
button.bem:not(:disabled):hover{color:var(--accent)}
.notepop input[type=text]{width:100%;border:1px solid var(--line-strong);border-radius:4px;padding:6px 8px;font:inherit;font-size:13px;margin-top:2px}
.notepop .tagbemerkung{margin:8px 0 4px;padding-top:8px;border-top:1px solid var(--line)}
.notepop .tagbemerkung label{margin-bottom:6px}
.notepop .tagbemerkung label small{display:block;font-size:11px}
.notepop .tagbemerkung .btn{float:right}
.notepop .tagbemerkung::after{content:"";display:block;clear:both}
.elsewhere{display:inline-block;width:30px;height:24px;line-height:24px;color:var(--muted);font-size:12px}
.picked-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r);padding:8px 14px;margin-bottom:12px;font-size:14px}
.picked-bar .btn{margin-left:auto}
.picked-bar .opt{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.picked-bar .namen{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38ch}
.peoplesearch{width:100%;border:1px solid var(--line-strong);border-radius:var(--r);padding:6px 10px;font:inherit;font-size:13px;margin-bottom:6px}
.peoplefilter{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:6px}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline}
/* Beschäftigungsart: Zeitarbeit und Azubis sind beim Disponieren sofort erkennbar */
.art{display:inline-block;padding:0 5px;border-radius:3px;font-size:10px;font-weight:700;line-height:15px;letter-spacing:.02em;vertical-align:middle;flex:none}
.art.za{background:var(--warn-soft);color:var(--warn)}
.art.azubi{background:var(--accent-soft);color:var(--accent)}
table.plan td.name .art{margin-left:6px}
/* Die Liste darf so hoch sein, wie der Bildschirm hergibt – abzüglich Kopf, Reiter,
   Suchfeld und der zugeklappten Legende. Mit 34vh sah man auf 1080px nur 20 von 250. */
ul.people{max-height:max(220px,calc(100vh - 330px));overflow:auto;margin-bottom:8px}
ul.people li{padding:0;border-top:0;display:flex;align-items:center;position:relative}
/* Haken zum Sammeln mehrerer Personen: unauffällig, bis man ihn braucht. */
ul.people li .tick{display:flex;align-items:center;padding:0 2px 0 4px;opacity:0;flex:none}
ul.people li .tick.an,ul.people li:hover .tick,ul.people li .tick:focus-within{opacity:1}
ul.people li .tick input{margin:0;cursor:pointer}
ul.people li>button{display:flex;align-items:center;gap:8px;width:100%;min-width:0;background:none;border:0;padding:5px 8px;border-radius:4px;font:inherit;font-size:13px;text-align:left}
ul.people li:hover>button{background:var(--hover)}
ul.people li.picked>button{background:var(--accent-soft);font-weight:600}
/* Der Name bekommt den Platz; der Text rechts bleibt ein Wort und weicht als Erstes. */
ul.people li>button .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.people li>button small{margin-left:auto;color:var(--faint);font-size:11px;white-space:nowrap;flex:none}
/* Die Funktion darf weichen, „5 Tage“ nicht: Ein Name wie „Zbigniew Stefan N…“ ist ohne
   Funktion noch zu erkennen, „5 T…“ sagt dagegen nichts mehr. */
ul.people li>button small.fn{flex:0 1000 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis}
ul.people li.verplant>button .nm{color:var(--muted)}
/* Funktion, Einteilen, Notiz: liegen beim Überfahren über dem rechten Rand der Zeile,
   mit einem Verlauf, damit sie nicht über dem Text stehen. Ohne Überfahren sind sie
   unsichtbar und nicht anklickbar, damit der Name darunter erreichbar bleibt – bis auf
   den Stift mit vorhandener Notiz. */
ul.people li .aktionen{position:absolute;right:2px;top:0;bottom:0;display:flex;align-items:center;padding-left:16px;pointer-events:none}
ul.people li .aktionen>*{opacity:0}
ul.people li:hover .aktionen,ul.people li .aktionen:focus-within{pointer-events:auto;background:linear-gradient(90deg,transparent,var(--hover) 16px)}
ul.people li.picked:hover .aktionen,ul.people li.picked .aktionen:focus-within{background:linear-gradient(90deg,transparent,var(--accent-soft) 16px)}
ul.people li:hover .aktionen>*,ul.people li .aktionen:focus-within>*,ul.people li .aktionen>.has{opacity:1;pointer-events:auto}
ul.people li.mitnotiz>button{padding-right:30px}
/* Tablet und Handy kennen kein Überfahren: Dort stehen Haken und Symbole dauerhaft in der
   Zeile, im Fluss statt darüber, und sind daumengerecht groß. */
@media (hover:none){
  ul.people li .tick,ul.people li .aktionen>*,ul.people li .notemark,button.fn.kompakt,button.bem.leer{opacity:1}
  ul.people li .aktionen,ul.people li:hover .aktionen,ul.people li.picked:hover .aktionen{position:static;padding-left:0;pointer-events:auto;flex:none;background:none}
  ul.people li.mitnotiz>button{padding-right:8px}
  ul.people li .tick{min-width:32px;min-height:40px;justify-content:center}
  ul.people li>button{min-height:40px;gap:6px}
  ul.people li .aktionen>*>button,ul.people li .aktionen button{min-width:32px;min-height:40px}
  /* Haken und drei Symbole brauchen hier dauerhaft 130px. In 300px blieben dem Namen
     60px; mit 380px Spalte (Tablet quer) passt er wieder in eine Zeile. */
  @media (min-width:1101px){.board-wrap{grid-template-columns:1fr 380px}}
  /* Auf dem Handy reicht auch das nicht: Dort rücken die Symbole unter den Namen. */
  ul.people{container-type:inline-size}
  @container (max-width:340px){
    ul.people li{flex-wrap:wrap;border-top:1px solid var(--line)}
    ul.people li>button{flex:1 1 0}
    ul.people li .aktionen,ul.people li:hover .aktionen,ul.people li.picked:hover .aktionen{flex:1 0 100%;justify-content:flex-end;margin-top:-6px}
    ul.people li .aktionen button{min-height:36px}
  }
}
ul.issues{max-height:40vh}

/* Interne Notizen: Stift am Namen, Aufklappfeld beim Überfahren */
.noteslot{display:inline-flex;align-items:center}
.notemark{background:none;border:0;padding:0 4px;font:inherit;font-size:12px;line-height:1;color:var(--line-strong);opacity:0}
.notemark.has{color:var(--accent);opacity:1}
ul.people li:hover .notemark,table.plan tr:hover .notemark,.notemark:focus-visible{opacity:1}
.notemark:hover{color:var(--accent)}
.notemark .cnt{font-size:10px;font-weight:600;margin-left:1px;vertical-align:super}
.notepop{position:fixed;z-index:50;width:290px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:0 10px 30px rgba(27,39,51,.18);padding:10px 12px;font-weight:400;white-space:normal}
.notepop b{font-size:13px}
.notepop p{margin:2px 0 8px;font-size:11px;line-height:1.35}
.notepop ul{list-style:none;margin:0 0 8px;padding:0;max-height:34vh;overflow:auto}
.notepop li{display:grid;grid-template-columns:1fr auto;gap:0 6px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.notepop li:first-child{border-top:0}
.notepop li .txt{grid-column:1;line-height:1.35}
.notepop li small{grid-column:1;color:var(--muted);font-size:11px}
.notepop li .del{grid-row:1/3;grid-column:2;align-self:start;background:none;border:0;padding:0 2px;color:var(--muted);font-size:13px;line-height:1}
.notepop li .del:not(:disabled):hover{color:var(--k)}
.notepop textarea{width:100%;border:1px solid var(--line-strong);border-radius:4px;padding:6px 8px;font:inherit;font-size:13px;resize:vertical}
.notepop .row{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.notepop.wide{width:320px}
.notepop.tag{width:268px}
/* Umschalter im Tagesmenü: dieser Tag oder gleich die ganze Woche. */
.seg{display:flex;gap:4px;margin:2px 0 8px}
.seg button{flex:1;background:var(--panel);border:1px solid var(--line-strong);border-radius:4px;padding:4px 6px;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button:hover{border-color:var(--accent)}
.seg button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.taggrid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.taggrid .chip{border:2px solid transparent;cursor:pointer;min-width:38px;height:28px;font-size:13px}
/* Im Tagesmenü steht die Zeit oben, der Name der Schicht klein darunter. */
.taggrid .chip.time{flex-direction:column;justify-content:center;height:auto;min-height:34px;padding:3px 7px;line-height:1.2}
.taggrid .chip.time small{font-weight:400;font-size:10px;opacity:.85;letter-spacing:0}
.taggrid .chip:not(:disabled):hover{border-color:var(--ink)}
.taggrid .chip.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel) inset}
.notepop label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.notepop select{display:block;width:100%;margin-top:2px;border:1px solid var(--line-strong);border-radius:4px;padding:5px 6px;font:inherit;font-size:13px;color:var(--ink);background:var(--panel)}
.notemark.plan{opacity:1;color:var(--muted);font-size:11px}
/* Offene Arbeitsplätze: je Bereich und Schicht ein Block, darin eine Zeile je Arbeitsplatz. */
.gaps{display:flex;flex-direction:column;gap:2px}
.gapgroup{border-top:1px solid var(--line)}
.gaphead{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;padding:6px 2px;font:inherit;font-size:13px;color:var(--ink);text-align:left}
.gaphead:hover{color:var(--accent)}
.gaphead .wo{font-weight:600}
.gaphead small{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.gaphead .chev{display:inline-block;color:var(--muted);font-size:11px;transition:transform .12s}
.gaphead .chev.open{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.gaphead .chev{transition:none}}
.gaps ul{list-style:none;margin:0;padding:0 0 6px 14px}
.gaps li{padding:3px 0;border-top:1px dotted var(--line)}
.gaps li:first-child{border-top:0}
.gaprow .nm{display:block;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gaprow .tage{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.gapday{background:var(--warn-soft);border:1px solid transparent;border-radius:4px;padding:1px 5px;font:inherit;font-size:11px;font-weight:600;color:var(--warn);cursor:pointer;line-height:1.4}
.gapday:not(:disabled):hover{border-color:var(--warn)}
.gapday sup{font-size:9px;margin-left:1px}
.gaps .suggest{margin-top:3px;gap:3px}
.gaps .sug{padding:1px 6px;font-size:11px;max-width:100%}
.gaps .sug small{font-size:10px;overflow:hidden;text-overflow:ellipsis}
/* Ziel eines Sprungs aus der Seitenspalte – kurz hervorgehoben. */
.cell.blink .chip,.cell.blink .empty,.cell.blink .elsewhere{outline:2px solid var(--accent);outline-offset:2px;animation:blinken 1s ease-in-out 2}
@keyframes blinken{0%,100%{background:transparent}50%{background:var(--accent-soft)}}
@media (prefers-reduced-motion:reduce){.cell.blink .chip,.cell.blink .empty,.cell.blink .elsewhere{animation:none}}
.suggest{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.suggest .sug{display:flex;align-items:baseline;gap:6px;background:var(--ok-soft);border:1px solid transparent;border-radius:4px;padding:2px 8px;font:inherit;font-size:12px;color:var(--ok);max-width:100%}
.suggest .sug:not(:disabled):hover{border-color:var(--ok)}
.suggest .sug .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .sug small{color:var(--muted);white-space:nowrap}

.aside details.unplanned{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;font-size:14px}
.aside details.unplanned summary{cursor:pointer}
.aside details.unplanned ul{max-height:30vh;margin-top:6px}
.aside details.unplanned li{padding:5px 0}
.chip.abs small{position:absolute;right:-4px;bottom:-5px;background:var(--ink);color:#fff;font-size:9px;line-height:1;padding:2px 3px;border-radius:3px}
/* „offen“ statt „–“: Der Strich las sich wie „hier ist nichts zu tun“, dabei ist
   genau das Gegenteil gemeint. Blass genug, dass besetzte Zellen weiter dominieren. */
.empty{display:inline-block;min-width:44px;padding:0 6px;height:24px;border-radius:5px;color:#C6CFD8;line-height:24px;font-size:11.5px}
/* Tag, an dem der Arbeitsplatz gar nicht gilt (Mo–Fr-Platz am Wochenende): ein Strich,
   kein „offen“ – sonst behauptet die Tafel Lücken, die es nicht gibt. */
.empty.leer{min-width:30px;font-size:13px}
.cell.rest .chip{box-shadow:0 0 0 2px var(--k)}
.cell.conflict .chip{box-shadow:0 0 0 2px var(--warn)}
tr.cov td{height:26px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
tr.cov td.name{padding-left:24px;font-weight:500}
tr.cov td.name i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
tr.cov td .v{display:inline-block;min-width:34px;padding:1px 4px;border-radius:4px}
tr.cov td .v.under{background:var(--bad-soft);color:var(--k);font-weight:600}
tr.cov td .v.quali{background:var(--warn-soft);color:var(--warn);font-weight:600}
tr.cov td .v.over{color:var(--muted)}
tr.cov.last td{border-bottom:0}

.aside{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;position:sticky;top:70px}
.aside h3{margin-bottom:10px}
/* Reiter statt drei gestapelter Blöcke. Der Zähler sitzt am Reiter, damit man auch
   im Personen-Reiter sieht, dass etwas zu klären ist. */
.reiter{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line)}
.reiter button{flex:1;border:0;background:none;padding:8px 6px;border-radius:8px 8px 0 0;font:inherit;font-size:13px;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.reiter button:hover{color:var(--ink);background:var(--hover)}
.reiter button.an{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
.reiter .zaehler{margin-left:5px;font-size:10px;padding:1px 6px;border-radius:8px;font-weight:700;vertical-align:1px}
.reiter .zaehler.rot{background:var(--k);color:#fff}
.reiter .zaehler.warn{background:var(--warn-soft);color:#9C4014}
.reiterinhalt{padding:12px 14px}
.gapkopf{margin-bottom:8px}
/* Legende und Hinweise gelten für alle Reiter und stehen deshalb darunter, brauchen
   aber dieselbe Polsterung wie der Reiterinhalt. */
.aside>.legend,.aside>.hint{padding-left:14px;padding-right:14px}
.aside>.hint:last-child{padding-bottom:14px}
/* Legende & Hilfe zugeklappt (Design V2): die Spalte klebt oben, und ausgeklappt war sie
   tausend Pixel hoch – ihr unteres Ende sah man erst am Seitenende. */
.aside>.legende{border-top:1px solid var(--line);padding:10px 14px;font-size:13px}
.aside>.legende summary{cursor:pointer;font-weight:600;font-size:12px;color:var(--muted);list-style-position:inside}
.aside>.legende summary:hover{color:var(--ink)}
.aside>.legende .legend{margin-top:10px;border-top:0;padding-top:0}
.aside>.legende .hint{margin-top:12px}
.aside ul{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto}
.aside li{padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.aside li:first-child{border-top:0;padding-top:0}
.aside li b{font-weight:600}
.aside li.under b,.aside li.rest b,.aside li.absence b{color:var(--k)} .aside li.quali b{color:var(--warn)}
.aside .ok{color:var(--ok);font-weight:500}
.legend{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink);margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.legend h4{margin:6px 0 2px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.legend span{display:flex;align-items:center;gap:8px}
.legend span small{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.legend .chip{min-width:36px;height:20px;font-size:11px;font-style:normal;flex:none}
.legend .chip.dot{min-width:16px;width:16px;height:16px;border-radius:4px}
.hint{font-size:13px;color:var(--muted);margin-top:10px}

/* ---------- Listen ---------- */
table.list{border-collapse:collapse;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px}
table.list th,table.list td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.list th{font-weight:500;color:var(--muted);font-size:13px;background:#FAFBFC}
table.list tr:last-child td{border-bottom:0}
table.list td .btn{margin-right:6px}
.actions-cell{white-space:nowrap}
/* Status eines Antrags als Pille – auf einen Blick erkennbar, auch am Rand einer Zeile. */
.status{display:inline-block;flex:none;padding:2px 9px;border-radius:10px;font-size:12px;font-weight:700;white-space:nowrap;background:#EEF1F4;color:var(--muted)}
.status.open{background:var(--warn-soft);color:#9C4014}
.status.approved{background:var(--ok-soft);color:var(--ok)}
.status.rejected{background:var(--bad-soft);color:var(--k)}
.type{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;background:var(--accent-soft);color:var(--accent)}
.type.T{background:var(--accent-soft);color:var(--accent)}

/* ---------- Anträge als Karten ----------
   Tabellenzeilen zwangen die Entscheidung in eine Spalte am rechten Rand, weit weg
   von dem, worüber entschieden wird. Auf der Karte steht der Konflikthinweis direkt
   neben „Genehmigen“. */
.antraege{display:flex;flex-direction:column;gap:10px;max-width:1000px}
.antrag{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.antrag .rund{width:38px;height:38px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.antrag .rund.tausch{background:#FDF4E3;color:#8A6210;font-size:15px}
.antrag .wer{flex:1 1 240px;min-width:0}
.antrag .name{font-weight:600;font-size:14px}
.antrag .art{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:700;margin-left:4px;vertical-align:1px}
.antrag .art.tausch{background:#FDF4E3;color:#8A6210}
.antrag .zeit{color:var(--muted);font-size:13px}
.antrag .meta{color:var(--faint);font-size:12px}
.antrag .hinweis{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.antrag .hinweis .status{font-size:12px}
.antrag .entscheiden{display:flex;gap:8px;margin-left:auto}
.antrag .fehlerzeile{flex-basis:100%;margin-top:4px}
/* Der Konflikthinweis ist die eigentliche Entscheidungsgrundlage – er steht neben den Knöpfen. */
.konflikt{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:3px 9px;font-weight:600;max-width:46ch}
.konflikt.ok{background:var(--ok-soft);color:var(--ok)}
.konflikt.warn{background:var(--warn-soft);color:#9C4014}
.btn.ablehnen{color:#B03A31}
.btn.ablehnen:hover{border-color:#B03A31}
.leerhinweis{color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}

/* ---------- Stammdaten-Import ---------- */
.ablauf{max-width:76ch;margin-bottom:16px}
.stark{color:var(--ink)}
/* Ablagefläche: ein label um ein verstecktes Dateifeld. Klicken geht ohne JavaScript,
   Ziehen-und-Ablegen legt app.js darüber. */
.ablage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;
  border:1.5px dashed var(--line-strong);background:#FBFCFD;border-radius:10px;padding:22px 16px;
  font-size:13px;color:var(--muted);cursor:pointer;text-align:center}
.ablage input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ablage svg{width:26px;height:26px}
.ablage b{color:var(--ink)}
.ablage:hover,.ablage.drueber{border-color:var(--accent);color:var(--accent);background:#F7FBFB}
.ablage.drueber{border-style:solid}
.ablage.gefuellt{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.ablage.gefuellt span{color:var(--accent);font-weight:600}
.card details{margin-top:12px;font-size:13px}
.card details summary{cursor:pointer;font-weight:600;color:var(--nav-ink)}
.card details p{margin-top:8px}
.linkbtn{font-size:13px;font-weight:600;text-decoration:none;align-self:center}
.ergebnis-ueber{margin:22px 0 10px}
/* Bilanz des Laufs: vier Zahlen, bevor die lange Zeilenliste kommt. */
.bilanz{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;max-width:640px;margin-bottom:12px}
.bilanz .zahl{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.bilanz .zahl b{display:block;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.bilanz .zahl span{font-size:12px;color:var(--muted)}
.bilanz .neu b{color:var(--ok)}
.bilanz .geaendert b{color:var(--accent)}
.bilanz .fehler b{color:var(--k)}
.sperre{background:var(--bad-soft);color:var(--k);border-radius:10px;padding:12px 14px;font-size:13px;max-width:76ch;margin-bottom:12px}
.freigabe{background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:12px 14px;font-size:13px;max-width:76ch;margin-bottom:12px}

/* ---------- Stammdaten-Import ---------- */
.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.import-grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.card h2{margin-bottom:6px}
.card p{margin-top:6px}
.card code{background:#F5F7F9;padding:1px 5px;border-radius:3px;font-size:12px}
.card label.file{display:block;margin:12px 0 6px}
.card label.check{display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0}
.card label.sheet{display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0;color:var(--muted)}
.card label.sheet input{flex:1;border:1px solid var(--line-strong);border-radius:var(--r);padding:5px 8px;font:inherit;font-size:13px;color:var(--ink)}
.imp{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.imp.neu{background:var(--ok-soft);color:var(--ok)} .imp.geändert{background:var(--warn-soft);color:var(--warn)} .imp.unverändert{color:var(--muted)} .imp.fehler{background:var(--bad-soft);color:var(--k)}

table.quali td.c{text-align:center;position:relative}
.q{display:inline-block;width:22px;height:22px;border-radius:50%;line-height:22px;text-align:center;font-size:13px;font-weight:600}
.q.yes{background:var(--ok-soft);color:var(--ok)}
.q.exp{background:var(--warn-soft);color:var(--warn)}
.q.no{color:var(--line-strong)}
.qbtn{background:none;border:0;padding:4px;display:inline-block}
.qbtn:disabled{cursor:default}
.exp-date{display:block;font-size:11px;color:var(--muted)}
.qform{position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:5;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);padding:6px;display:flex;gap:4px;box-shadow:0 8px 24px rgba(27,39,51,.15)}
.qform input{border:1px solid var(--line-strong);border-radius:4px;padding:3px 6px;font-size:13px}

table.rights td.c{text-align:center;font-size:16px}
table.rights td.c.yes{color:var(--ok)}
table.rights td.c.scope{color:var(--accent);font-size:13px;font-weight:500}
table.rights td.c.no{color:var(--line-strong)}
table.rights td.c.own{color:var(--muted);font-size:13px;font-weight:500}

/* Erste Schritte */
.steps{display:grid;gap:12px;max-width:760px}
.step{display:flex;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.step .num{flex:0 0 28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.step h2{font-size:15px;margin-bottom:4px}
.step p{font-size:14px;line-height:1.5}
.step p+p{margin-top:6px}
/* Abschlusskasten der Seite „Erste Schritte“ – Ton wie der Push-Kasten in Mein Plan. */
.hint.kasten{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft);border-radius:12px;padding:12px 16px;color:var(--ink);font-size:13px}
.hint.kasten span{color:var(--nav-ink)}
.helpbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r);padding:8px 14px;margin-bottom:12px;font-size:14px}
.helpbar .btn{margin-left:auto}

.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px;min-width:120px}
.kpi b{display:block;font-size:22px;line-height:1.1}
.kpi span{font-size:12px;color:var(--muted)}
.kpi.warn b{color:var(--warn)}
.kpi.ok b{color:var(--ok)}
.kpi.bad b{color:var(--k)}

/* Sollprofil-Ampel: erfüllt / mit Einschränkung / nicht erfüllt / kein Profil */
.ampel{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:baseline;background:var(--line-strong)}
.ampel.gruen{background:var(--ok)}
.ampel.gelb{background:var(--warn)}
.ampel.rot{background:var(--k)}
.ampel.kein{background:transparent;border:1px solid var(--line-strong)}
.gap{display:inline-block;background:#F3F5F7;border-radius:4px;padding:1px 6px;margin:0 4px 3px 0;font-size:12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.gap.fehlt,.gap.abgelaufen{background:var(--bad-soft);color:var(--k)}
.gap.stand{background:var(--warn-soft);color:var(--warn)}

.audit{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.audit li{display:grid;grid-template-columns:130px 150px 1fr;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:14px;background:var(--panel)}
.audit li:last-child{border-bottom:0}
.audit .t{color:var(--muted);font-variant-numeric:tabular-nums}
.pager{margin-top:12px;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center}

/* ---------- Mitarbeiter (mobil) ---------- */
.phone{max-width:420px;margin:0 auto}
.phone.wide{max-width:720px}
/* Am Desktop bleibt die Mitarbeiter-Ansicht dieselbe Seite, nutzt aber die Breite: zwei Spalten statt einer langen Rolle. */
@media (min-width:860px){
  .phone.me-page{max-width:980px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px;align-items:start}
  .me-page .me-hero{grid-column:1/-1}
  .me-page .me-gruss h1{font-size:24px}
  .me-page .me-side{margin-top:0}
  .me-page .me-side .actions{margin-top:0}
  .phone.wide{max-width:1100px}
}

/* Kopfzeile des Teamplans (Mein Plan hat seit V2 den farbigen Block darunter). */
.me-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;gap:10px}

/* Begrüßung und nächste Schicht als ein Block: farbiger Grund, weiße Karte ragt hinein.
   Die Karte ist das Erste, was zählt – wann muss ich wo sein. */
.me-hero{margin-bottom:18px}
.me-gruss{background:var(--accent);color:#fff;border-radius:12px 12px 0 0;padding:16px 18px 38px}
.me-gruss h1{font-size:22px;color:#fff}
.me-gruss p{font-size:13px;opacity:.85;margin-top:2px}
.naechste{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:-28px 12px 0;box-shadow:0 2px 10px rgba(23,36,47,.1)}
.naechste .lbl{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.naechste .zeile{display:flex;align-items:center;gap:12px;margin-top:6px}
.naechste .datum{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;flex:none;border-radius:12px;font-weight:700;line-height:1.1}
.naechste .datum .wt{font-size:11px}
.naechste .datum .tag{font-size:18px}
.naechste .was{font-size:18px;font-weight:600}
.naechste .wo{font-size:13px;color:var(--muted)}

.me-wochenkopf{display:flex;align-items:center;gap:8px;margin:0 2px 4px}
.me-wochenkopf h2{font-size:16px}
.me-wochenkopf .kw{margin-left:auto;display:inline-flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.me-wochenkopf .kw .pfeil{padding:6px 11px;color:var(--muted);text-decoration:none;font-size:14px;line-height:1}
.me-wochenkopf .kw .pfeil:hover{background:var(--hover);color:var(--ink)}
.me-stand{font-size:12px;color:var(--muted);margin:0 2px 8px}
.me-bemerkung{margin:0 0 10px;padding:8px 10px;border-left:3px solid var(--accent);background:var(--panel);border-radius:4px;font-size:14px}
.me-bemerkung b{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.me-ueber{font-size:16px;margin:18px 2px 0}

.week{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.week .d{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line)}
.week .d:last-child{border-bottom:0}
/* Heute bekommt einen Balken links – auffälliger als eine Tönung allein, und er bleibt beim Drucken. */
.week .d.today{background:#F0F8F8;box-shadow:inset 3px 0 0 var(--accent)}
.week .d.leer{background:#FBFCFD}
.week .d.leer .day,.week .d.leer .what{color:var(--faint)}
.week .d .day{width:60px;flex:none;font-weight:600}
.week .d .day small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.week .d.leer .day small{color:inherit}
.week .d .day small.feiertag{color:var(--warn);font-weight:600;font-size:11px;line-height:1.15;white-space:normal}
.week .d .what{flex:1;font-size:14px;min-width:0}
.week .d .what small{display:block;color:var(--muted);font-size:12px}
.week .d .what small.warn{color:var(--warn);font-weight:600}
.week .d .what small.tagnotiz{color:var(--ink)}
/* Der Chip trägt jetzt den Namen der Schichtart („Früh“), nicht mehr nur das Kürzel. */
.week .d .chip{min-width:52px;height:30px;padding:0 8px;border-radius:8px;font-size:12px;flex:none}
.week .d .btn{margin-left:auto;flex:none}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.actions .btn{min-height:48px;padding:13px;text-align:center;border-radius:12px;font-weight:600;font-size:14px}
.me-list{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:10px}
.me-list .i{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.me-list .i:last-child{border-bottom:0}
.me-list .i small{display:block;color:var(--muted);font-size:12px}
.me-push{background:var(--accent-soft);border-radius:12px;padding:14px;margin-top:16px;font-size:13px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.me-push span{color:var(--nav-ink)}
.me-push .btn{align-self:flex-start}
.me-push small{font-size:12px}
.tabbar{display:none}
.note{background:var(--panel);border:1px dashed var(--line-strong);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--muted);margin-top:18px}
.note .btn{margin-bottom:8px}

/* ---------- Dialoge / Toast / Modal ---------- */
dialog{border:0;border-radius:10px;padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(27,39,51,.25)}
dialog::backdrop{background:rgba(27,39,51,.35)}
dialog .dlg{padding:20px}
dialog h2{margin-bottom:8px}
dialog label,.dlg label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
dialog select,dialog input{width:100%;border:1px solid var(--line-strong);border-radius:var(--r);padding:8px 10px;background:var(--panel)}
dialog .row,.dlg .row{display:flex;gap:10px}
dialog .row>*{flex:1}
.foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.modal-backdrop{position:fixed;inset:0;background:rgba(27,39,51,.35);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}
.modal{background:var(--panel);border-radius:10px;padding:20px;max-width:440px;width:100%;box-shadow:0 20px 60px rgba(27,39,51,.25)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:50;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---------- Anmeldung / Konto (allauth) ---------- */
.auth-wrap{max-width:440px;margin:40px auto;padding:0 16px}
.auth{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 28px;max-width:560px;box-shadow:0 4px 20px rgba(23,36,47,.08)}
/* Marke über der Karte – die Anmeldeseite hat keinen Seitenkopf. */
.anmelde-marke{display:flex;align-items:center;gap:12px;justify-content:center;margin:0 0 20px}
.anmelde-marke svg{width:44px;height:44px}
.anmelde-marke b{font-size:19px}
.anmelde-marke span{display:block;color:var(--muted);font-size:13px;font-weight:400}
.btn.breit{width:100%;min-height:44px;justify-content:center;display:flex;align-items:center}
.anmelde-fuss{display:flex;align-items:flex-start;gap:8px;margin-top:18px;color:var(--muted);font-size:12px;line-height:1.45}
.anmelde-fuss svg{width:15px;height:15px;flex:none;margin-top:2px}
.auth-h1{margin-bottom:12px}
.auth .card{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.auth .card:first-of-type{border-top:0;margin-top:0;padding-top:0}
dialog input.filter,.dlg input.filter{margin-bottom:6px}
.dlg .help,dialog .help{display:block;font-size:12px;color:var(--muted);margin-top:4px;min-height:1em}

.field{margin:12px 0}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.field input:not([type=checkbox]),.field select,.field textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r);padding:9px 10px;background:var(--panel)}
.field .help{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.field .error,.field .errorlist{color:var(--k);font-size:13px;list-style:none;padding:0;margin:4px 0 0}
.auth .errorlist{color:var(--k);font-size:13px;list-style:none;padding:0;margin:4px 0}
.auth ul{padding-left:18px}
.auth .qr{display:block;max-width:220px;margin:10px 0;border:1px solid var(--line)}
.auth code,.auth pre{font-size:13px;background:#F5F7F9;padding:2px 6px;border-radius:4px}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  .top{padding:10px 14px;gap:10px}
  .brand span.site{display:none}
  /* Auf dem Handy bleibt nur der Kreis mit den Initialen – Name und Rolle stehen im Menü. */
  .usermenu .nam{display:none}
  nav.side{display:none}
  main{padding:16px 14px 90px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom));z-index:20}
  /* Vier Reiter auf 390px: „Qualifikationen“ passt nicht, deshalb Ellipse statt harter Schnitt. */
  .tabbar a{flex:1;min-width:0;background:none;border:0;font-size:11px;color:var(--muted);padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar a.active{color:var(--accent);font-weight:500}
  .tabbar a svg{width:22px;height:22px}
  .page-head h1{font-size:18px}
  .audit li{grid-template-columns:1fr;gap:2px}

  /* Mit dem Daumen treffbar. Am Schreibtisch darf eine Schaltfläche 27px hoch sein,
     auf dem Handy trifft man sie dann nicht – betrifft „Genehmigen“, „Ablehnen“,
     das Blättern in Mein Plan und die Haken in den Qualifikationen. Die Sichtprüfung
     in e2e/ meldet alles unter 40px. */
  .btn,.btn.sm{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .seg a{min-height:40px;display:inline-flex;align-items:center}
  select,input:not([type=checkbox]):not([type=radio]),.peoplesearch{min-height:40px}
  .qbtn{min-width:40px;min-height:40px}
  .area-toggle{min-height:40px}
  /* Wochenpfeile in Mein Plan: am Schreibtisch kompakt wie im Entwurf, hier daumengerecht. */
  .me-wochenkopf .kw .pfeil{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  /* Logo und Benutzerknopf ebenfalls; der Kopf wächst dadurch auf 61px – bewusst,
     statt die Trefferfläche mit negativen Rändern über den Rand zu schieben. */
  .brand,.usermenu{min-height:40px}
}