:root{color-scheme:light;--bg:#f4f6fb;--card:#fff;--text:#0f172a;--muted:#64748b;--line:#e4e8f0;--accent:#3060c8;--accent2:#6aae3c;--soft:rgba(48,96,200,.09);--soft2:rgba(106,174,60,.12);--danger:#dc2626;--ok:#15803d;--warn:#b45309;--hover:#eef2f8;--input:#f8fafc;--hdr:rgba(255,255,255,.82);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 28px rgba(15,23,42,.06);--shadow-lg:0 2px 4px rgba(15,23,42,.05),0 18px 40px rgba(15,23,42,.12);--r:18px;--rs:10px;--on-accent:#fff;--side:var(--card);--navActive:var(--soft);
  --band:linear-gradient(120deg,#2b56b8 0%,#3f78dc 45%,#5aa3d6 70%,#76b844 100%);--rh:rgba(255,255,255,.8);--rl:rgba(15,23,42,.06)}
:root[data-mode=dark]{color-scheme:dark;--on-accent:#0b1512;--bg:#0c1016;--card:#151b24;--text:#e7edf5;--muted:#8d9aac;--line:#232c39;--accent:#7ea4ff;--accent2:#8fd16a;--soft:rgba(126,164,255,.14);--soft2:rgba(143,209,106,.14);--danger:#f87171;--ok:#4ade80;--warn:#fbbf24;--hover:#1c2430;--input:#10151d;--hdr:rgba(21,27,36,.82);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.25);--shadow-lg:0 2px 4px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.45);
  --band:linear-gradient(120deg,#1e3a8a 0%,#2f5fc4 50%,#3d7a3a 100%);--rh:rgba(255,255,255,.04);--rl:rgba(0,0,0,.38)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.55 "Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--text);min-height:100vh;
  background:radial-gradient(1200px 780px at 78% -12%,var(--glow1,transparent),transparent 68%),radial-gradient(900px 820px at 8% 112%,var(--glow2,transparent),transparent 70%),
  linear-gradient(165deg,var(--bgTop,var(--bg)) 0%,var(--bg) 45%,var(--bgBottom,var(--bg)) 100%);background-color:var(--bg);background-attachment:fixed}
::selection{background:var(--soft)}
/* Kopfzeile */
header{position:sticky;top:0;z-index:20;background:var(--hdr);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.bar{padding:10px 24px;display:flex;align-items:center;gap:14px}
.logo{height:36px;width:auto;display:block;flex:none}
:root[data-mode=dark] .logoL,:root:not([data-mode=dark]) .logoD{display:none}
header h1{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav{padding:0 18px 8px;display:flex;align-items:center;gap:8px}
.navMain{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
.navMain::-webkit-scrollbar{display:none}
.navSide{display:flex;gap:4px;flex:none;padding:2px 2px 2px 10px;border-left:1px solid var(--line)}
nav button{background:transparent;color:var(--muted);border:0;border-radius:999px;margin:0;padding:7px 14px;box-shadow:none;white-space:nowrap;font-weight:550;font-size:14.5px;flex:none;transition:background .15s,color .15s}
nav button:hover{color:var(--text);background:var(--hover);filter:none}
nav button.active{color:var(--accent);background:var(--soft)}
nav .caret{margin-left:5px;font-size:10px;opacity:.8}
nav .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--danger);margin-left:6px;vertical-align:middle;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
main{max-width:1120px;margin:28px 0 48px;padding:0 18px}
/* Karten & Grundelemente */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}
.cardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.cardHead h2{margin:0}
/* Aufklappbare Kacheln (Einstellungen) */
.card .cardFoldBtn{display:flex;align-items:center;gap:10px;flex:1;min-width:0;margin:-6px;padding:6px;border-radius:var(--rs);background:transparent;color:var(--text);box-shadow:none;text-align:left}
.card .cardFoldBtn:hover{background:var(--hover);filter:none}
.card .cardFoldBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cardFoldBtn[aria-expanded=true] .foldChev{transform:rotate(90deg)}
.cardFold.closed>:not(.cardHead),.cardFold.closed .cardHead>:not(.cardFoldBtn){display:none}
.cardFold.closed .cardHead{margin-bottom:0}
.login{max-width:420px;margin:56px auto;padding:28px}
.login h2{font-size:22px;margin-bottom:6px}
h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 12px}
h3.yearHead{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px;display:flex;align-items:center;gap:10px}
h3.yearHead::after{content:"";flex:1;height:1px;background:var(--line)}
h3.yearHead:first-child{margin-top:0}
p{margin:0 0 8px}
label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin:12px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--rs);background:var(--input);color:var(--text);font:inherit;transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--soft);background:var(--card)}
input:disabled,select:disabled{opacity:.55}
textarea{resize:vertical;min-height:70px}
input[type=file]{padding:8px;background:var(--card);border-style:dashed}
input[type=file]::file-selector-button{border:0;border-radius:8px;background:var(--soft);color:var(--accent);font:inherit;font-weight:600;padding:7px 12px;margin-right:12px;cursor:pointer}
button,a.btn{padding:9px 16px;border:0;border-radius:var(--rs);background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;cursor:pointer;margin-top:14px;text-decoration:none;display:inline-block;box-shadow:0 1px 2px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.15);transition:filter .15s,transform .05s,background .15s}
button:hover,a.btn:hover{filter:brightness(1.07)}
button:active,a.btn:active{transform:translateY(1px)}
a.btn{margin:0}
button:disabled{opacity:.5;cursor:default;filter:none}
button.ghost,a.btn.ghost{background:var(--card);color:var(--accent);border:1px solid var(--line);margin:0;box-shadow:none}
button.ghost:hover,a.btn.ghost:hover{background:var(--soft);filter:none}
button.danger,button.small{background:transparent;color:var(--danger);border:1px solid var(--line);margin:0;padding:5px 11px;font-size:13px;box-shadow:none;font-weight:550}
button.small{color:var(--accent)}
button.danger:hover{background:rgba(220,38,38,.08);filter:none}button.small:hover{background:var(--soft);filter:none}
.row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}.row button{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.grid .full{grid-column:1/-1}
.req{color:var(--danger)}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover td{background:var(--hover)}
td.acts{white-space:nowrap}.acts>*+*{margin-left:6px}
.msg{padding:10px 14px;border-radius:var(--rs);margin-top:14px;font-size:14px}
.msg:empty{display:none}
.err{background:rgba(220,38,38,.09);color:var(--danger)}.ok{background:rgba(21,128,61,.09);color:var(--ok)}
.muted{color:var(--muted)}.small{font-size:13px}.hidden{display:none!important}
a{color:var(--accent)}
.tag{display:inline-block;font-size:12px;line-height:20px;padding:0 8px;border-radius:999px;background:var(--hover);color:var(--muted);white-space:nowrap;font-weight:500}
.tag.new{background:var(--soft);color:var(--accent);font-weight:700}
.badge{display:inline-block;min-width:19px;padding:0 6px;border-radius:999px;background:var(--danger);color:#fff;font-size:11px;line-height:19px;text-align:center;margin-left:6px;font-weight:700}
.chip{display:inline-block;padding:3px 11px;border-radius:999px;font-size:13px;font-weight:650;white-space:nowrap}
.chip.open{background:rgba(217,119,6,.14);color:var(--warn)}.chip.done{background:rgba(21,128,61,.12);color:var(--ok)}.chip.none{background:var(--hover);color:var(--muted)}
.person{display:flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}
.banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(100deg,rgba(217,119,6,.1),var(--card) 60%);border-color:rgba(217,119,6,.3)}
.banner p{margin:2px 0 0}.banner button{margin:0}
/* Profilbild / Initialen */
.av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;object-fit:cover}
.av.sm{width:22px;height:22px;font-size:10px}
.av.lg{width:44px;height:44px;font-size:16px}
.av.xl{width:120px;height:120px;font-size:40px;border:5px solid var(--card);box-shadow:var(--shadow-lg)}
/* Profilkarte auf der Startseite */
.profile{padding:0;overflow:hidden}
.pBand{height:110px;background:var(--band);position:relative}
.pBand::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 160px at 85% 120%,rgba(255,255,255,.25),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px)}
.pRow{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;padding:0 26px 24px}
.pAv{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:-62px;position:relative;z-index:1}
.pData{flex:1;min-width:240px;padding-top:16px}.pData h2{font-size:22px;margin-bottom:16px}
dl.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0}
dl.facts>div{background:var(--input);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
dl.facts dt{font-size:12px;color:var(--muted);margin:0 0 2px;font-weight:500}dl.facts dd{margin:0;font-weight:650}
/* Dokument-Kacheln */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:16px}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s,transform .18s}
.tile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.tile.unseen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.tileMain{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.tileMain:focus-visible{outline:3px solid var(--soft);outline-offset:-3px}
.thumb{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,var(--hover),var(--input));display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.tile:hover .thumb img{transform:scale(1.04)}
.tTags{position:absolute;top:9px;left:9px;display:flex;gap:4px;flex-wrap:wrap}
.tTags .tag{background:var(--card);box-shadow:0 1px 4px rgba(15,23,42,.18)}
.tTags .tag.new{background:var(--accent);color:var(--on-accent)}
.tBody{padding:11px 13px 4px;display:flex;flex-direction:column;gap:3px}
.tBody .person{font-size:12px;color:var(--muted)}
.tTitle{font-weight:650;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.tMeta{font-size:12px;color:var(--muted)}
.tActs{display:flex;justify-content:flex-end;gap:5px;padding:4px 9px 9px}
.ib{background:transparent;border:1px solid var(--line);color:var(--muted);margin:0;padding:0;border-radius:9px;display:inline-grid;place-items:center;width:32px;height:32px;box-shadow:none}
.ib svg{width:16px;height:16px}.ib:hover{color:var(--accent);border-color:var(--accent);background:var(--soft);filter:none}.ib.del:hover{color:var(--danger);border-color:var(--danger);background:rgba(220,38,38,.08)}
.ficon{display:grid;place-items:center;width:100%;height:100%}
.ficon svg{width:34%;max-width:64px;height:auto;filter:drop-shadow(0 4px 8px rgba(15,23,42,.1))}
.ficon .pg{fill:hsl(var(--h),70%,98%);stroke:hsl(var(--h),50%,58%);stroke-width:1.4}
.ficon .fold{fill:hsl(var(--h),60%,86%)}.ficon .lb{fill:hsl(var(--h),58%,48%)}
.ficon text{fill:#fff;font:700 8px system-ui,sans-serif}
.ficon .ln{stroke:hsl(var(--h),45%,82%);stroke-width:2;stroke-linecap:round}
:root[data-mode=dark] .ficon .pg{fill:hsl(var(--h),25%,20%);stroke:hsl(var(--h),50%,62%)}:root[data-mode=dark] .ficon .fold{fill:hsl(var(--h),30%,34%)}:root[data-mode=dark] .ficon .ln{stroke:hsl(var(--h),25%,36%)}
.empty{padding:34px 0;text-align:center}
.empty::before{content:"";display:block;width:46px;height:46px;margin:0 auto 10px;border-radius:14px;background:var(--soft)}
/* Benutzermenü oben rechts */
.um{position:relative;flex:none;margin-left:auto}
.umBtn{display:flex;align-items:center;gap:9px;background:var(--card);color:var(--text);border:1px solid var(--line);margin:0;padding:4px 12px 4px 4px;border-radius:999px;max-width:260px;font-weight:600;box-shadow:var(--shadow)}
.umBtn:hover{background:var(--hover);filter:none}
.umBtn.busy{opacity:.6}
.umName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caret{font-size:10px;color:var(--muted)}
.drop{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:30;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.drop .info{display:flex;align-items:center;gap:11px;padding:8px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:13px}
.drop .info strong{display:block;font-size:14px}
.drop button{display:block;width:100%;text-align:left;background:transparent;color:var(--text);margin:0;padding:9px 11px;border-radius:9px;box-shadow:none;font-weight:500}
.drop button:hover{background:var(--hover);filter:none}
.drop button.cur{background:var(--soft);color:var(--accent);font-weight:650}
.drop button.out{color:var(--danger)}
.drop .info .avBtn{position:relative;display:block;width:auto;flex:none;padding:0;border-radius:50%;background:transparent;cursor:pointer}
.drop .info .avBtn:hover{background:transparent}
.drop .info .avBtn::after{content:"";position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;border:2px solid var(--card);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/11px no-repeat;opacity:.9}
.drop .info .avBtn:hover .av{filter:brightness(.88)}
.drop .info .avBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drop hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.navDrop{position:fixed;right:auto;min-width:240px;max-height:70vh;overflow-y:auto;z-index:40}
.dropHead{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 11px 6px}
.dropYear{padding:6px 4px 4px}
.dropYear>button.yr{font-weight:700;padding:6px 8px}
.monthGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:2px 4px 4px}
.monthGrid button{text-align:center;padding:7px 4px;font-size:13px;border:1px solid var(--line);border-radius:8px}
.monthGrid button:hover{border-color:var(--accent)}
.dropEmpty{padding:8px 11px 10px;font-size:13px;color:var(--muted)}
/* Arbeitszeiten */
.monthBar{display:flex;align-items:center;gap:8px}
.monthBar .ml{font-size:19px;font-weight:700;letter-spacing:-.01em;min-width:160px;text-align:center}
.mb{margin:0;background:var(--card);border:1px solid var(--line);color:var(--text);width:36px;height:36px;padding:0;border-radius:10px;font-size:18px;line-height:1;box-shadow:none}
.mb:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--soft);filter:none}
.sumGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin-top:16px}
.sumBox{background:var(--input);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.sumBox .k{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}.sumBox .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sumBox.neg .v{color:var(--danger)}.sumBox.pos .v{color:var(--ok)}
.saveState{font-size:13px}
.tsRow{display:grid;grid-template-columns:96px 150px 112px 112px 92px 56px minmax(120px,1fr);gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);border-radius:8px}
.tsRow.head{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding-top:0;border-radius:0}
.tsRow.we{background:var(--input)}
.tsRow.hol{background:var(--soft)}
.tsRow.missing .d span{color:var(--danger)}
.tsRow input,.tsRow select{padding:7px 9px;font-size:14px}
.tsRow .d{font-variant-numeric:tabular-nums;font-weight:600}
.tsRow .d small{display:block;color:var(--accent);font-size:11px;line-height:1.2;font-weight:500}
.tsRow .h{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.tsRow .c{margin:0;display:block;color:inherit;font-size:inherit;font-weight:inherit}
.tsRow .cl{display:none}
@media (max-width:860px){
  .tsRow{grid-template-columns:1fr 1fr 1fr;gap:6px 8px;padding:12px 8px}
  .tsRow.head{display:none}
  .tsRow .d{grid-column:1/3}.tsRow .h{grid-column:3;grid-row:1}
  .tsRow .n{grid-column:1/-1}
  .tsRow .cl{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
}
.empTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.emp{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--card);transition:box-shadow .18s,border-color .18s}
.emp:hover{box-shadow:var(--shadow-lg)}
.emp.unseen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.empHead{display:flex;gap:11px;align-items:center;min-width:0}.empHead strong{display:block}
.emp .row{margin-top:auto}
.formActions{position:sticky;bottom:12px;box-shadow:var(--shadow-lg);display:flex;gap:8px;align-items:center;flex-wrap:wrap}.formActions button{margin:0}.formActions .msg{margin:0;flex:1}
.toolbar{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}.toolbar .grow{flex:1;min-width:240px}.toolbar label{margin-top:0}

/* Admin-Menü zweizeilig */
nav.admin{gap:2px}
nav.admin .navSide{flex-basis:100%;border-left:0;padding-left:2px;overflow-x:auto;scrollbar-width:none}
nav.admin .navMain{flex-basis:100%}
.navLbl{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);align-self:center;padding:0 8px 0 6px;min-width:96px;flex:none}
/* Listen (Anträge, Krankmeldungen) */
.li{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--card);transition:box-shadow .18s}
.li:hover{box-shadow:var(--shadow)}
.li.unseen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.liMain{flex:1;min-width:240px;display:flex;flex-direction:column;gap:4px}
.liTitle{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px}
.liSide{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.liSide .row{justify-content:flex-end}
.li .tiles.mini{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:8px;max-width:600px}
.li .tiles.mini .tTitle{font-size:12.5px}
a.btn.sm,button.sm{padding:6px 12px;font-size:13px}
button.okb{background:var(--ok);margin:0}
.chip.rej{background:rgba(220,38,38,.1);color:var(--danger)}
.tag.warn{background:rgba(217,119,6,.14);color:var(--warn);font-weight:600}
.banner.info{background:linear-gradient(100deg,var(--soft),var(--card) 60%);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.sumBox.big .v{font-size:22px}.sumBox.warnv .v{color:var(--warn)}
strong.neg{color:var(--danger)}
.check{display:flex;align-items:center;font-size:14px;color:var(--text);margin-top:12px;cursor:pointer}
.check input[type=checkbox]{width:18px;height:18px;flex:none;margin:0 10px 0 0;padding:0;accent-color:var(--accent);box-shadow:none}
.preview{margin-top:12px;padding:10px 14px;border-radius:var(--rs);background:var(--input);border:1px solid var(--line);font-size:14px}
.preview:empty{display:none}.preview .bad,.preview.bad{color:var(--danger)}.preview .good{color:var(--ok)}
/* Krankheitskalender */
.sk{display:inline-block;width:14px;height:14px;border-radius:5px;vertical-align:middle;flex:none}
.k0{background:#ef4444}.k1{background:#f59e0b}.k2{background:#8b5cf6}.k3{background:#7f1d1d}
table.matrix{border-collapse:separate;border-spacing:0;width:auto;min-width:100%}
table.matrix th,table.matrix td{padding:0;text-align:center;min-width:23px;height:34px;font-size:12px;border-bottom:1px solid var(--line)}
table.matrix th{text-transform:none;letter-spacing:0;font-weight:600;line-height:1.1}
table.matrix th .dn{display:block;font-size:9.5px;color:var(--muted);font-weight:500}
table.matrix .nm{position:sticky;left:0;background:var(--card);text-align:left;padding:0 10px 0 4px;min-width:150px;z-index:1}
table.matrix a{color:inherit;text-decoration:none}table.matrix a:hover{color:var(--accent)}
table.matrix .we{background:var(--input)}table.matrix .hol{background:var(--soft)}
table.matrix .sk{width:17px;height:17px;border-radius:5px}
table.matrix .sumc{padding:0 7px;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
table.matrix tbody tr:hover td{background:var(--hover)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:13px}
.legend>span{display:flex;align-items:center;gap:6px}
/* Personalakte: Monatskacheln */
.monthTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mt{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;background:var(--input)}
.mt a.btn{align-self:flex-start;margin-top:6px}

/* Admin-Seiten */
.pageTitle{margin:4px 0 22px}.pageTitle h1{font-size:30px;font-weight:800;letter-spacing:-.025em;margin:0 0 4px}.pageTitle p{margin:0}
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.dashTile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:18px;margin:0;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.dashTile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);filter:none}
.dashTile{gap:6px!important;padding:20px 22px!important}.dashTile strong{order:-1;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.dashTile .dn{font-size:48px;font-weight:300;letter-spacing:-.03em;line-height:1.05;color:var(--text)}
.dashTile.hot{border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}.dashTile.hot .dn{color:var(--danger)}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chipBtn{margin:0;background:var(--input);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:550;box-shadow:none}
.chipBtn:hover{color:var(--text);filter:none}.chipBtn.on{background:var(--soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:0 20px}
.meter{height:8px;border-radius:99px;background:var(--hover);overflow:hidden;min-width:80px}
.meter>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.meter>span.k0{background:#ef4444}.meter>span.k1{background:#f59e0b}.meter>span.k2{background:#8b5cf6}.meter>span.k3{background:#7f1d1d}
td.barCell{min-width:110px}
tr.sumRow td{font-weight:700;background:var(--input)}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-items:end;height:180px;padding-top:8px}
.barCol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.mbar{width:100%;max-width:38px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent2)));border-radius:7px 7px 3px 3px;min-height:0}
.bv{font-size:11px;font-weight:700;color:var(--text);min-height:14px}.bl{font-size:11px;color:var(--muted)}
.kinds{display:flex;flex-direction:column;gap:10px}
.kRow{display:grid;grid-template-columns:16px 1fr 120px 60px;gap:10px;align-items:center;font-size:14px}.kRow strong{text-align:right;font-variant-numeric:tabular-nums}
.li.dim{opacity:.6}
button.small.dim{opacity:.5}
a.btn.pri{background:var(--accent);color:var(--on-accent)}

/* Schnellzugriff oben rechts */
.quickAct{display:flex;gap:8px;margin-left:auto;flex-wrap:nowrap}
.quickAct:empty{display:none}
.quickAct:not(:empty)+.um{margin-left:10px}
.qa{display:flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border-radius:999px;background:linear-gradient(100deg,rgba(217,119,6,.14),rgba(217,119,6,.06));color:var(--warn);border:1px solid rgba(217,119,6,.35);font-weight:650;font-size:13.5px;box-shadow:none;white-space:nowrap}
.qa:hover{filter:none;background:rgba(217,119,6,.2)}
.qd{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px rgba(217,119,6,.2);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(217,119,6,.05)}}
.drop button.subItem{padding-left:24px;color:var(--muted);font-size:13.5px}
.yrLbl{font-size:12px;font-weight:700;color:var(--muted);padding:4px 8px 2px}
button.mt.mtb{text-align:left;color:var(--text);margin:0;box-shadow:none;align-items:flex-start;cursor:pointer}
button.mt.mtb:hover{border-color:var(--accent);filter:none}
dl.facts>div.wide{grid-column:1/-1}
/* Menü-Icons, Uhr, Zeilen der Seitenleiste */
nav button .ni{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;margin-right:8px;vertical-align:-5px}
nav button .ni svg{width:18px;height:18px}
.clock,.tmLbl,.sbRow{display:none}
.topAct{display:flex;align-items:center;gap:10px;flex:none}
.topAct .um{margin-left:0}
@media (min-width:900px){
  body{padding-left:248px}
  header{position:fixed;top:0;left:0;bottom:0;width:248px;display:flex;flex-direction:column;background:var(--side);border-bottom:0;border-right:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;z-index:25}
  .bar{display:contents}
  .logo{order:1;align-self:center;margin:26px auto 0;height:46px}
  header h1{order:2;flex:none;align-self:stretch;margin:12px 16px 0;font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--muted);white-space:normal}
  .clock{order:3;display:block;align-self:stretch;margin:14px 16px 18px;font-size:38px;font-weight:800;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums;text-align:center}
  .clock .sec{font:inherit;color:inherit}
  .clock small{display:block;font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:6px}
  nav{order:4;flex:1 1 auto;min-height:0;overflow-y:auto;display:block;padding:4px 0 12px;scrollbar-width:thin}
  nav .navMain{flex-direction:column;gap:1px;overflow:visible;padding:0}
  nav button{width:100%;display:flex;align-items:center;border-radius:0;padding:12px 20px;text-align:left;white-space:normal;line-height:1.3;font-size:14px;font-weight:600;color:var(--text);opacity:.82}
  nav button:hover{background:var(--hover);opacity:1}
  nav button.active{background:var(--navActive);color:var(--text);opacity:1;box-shadow:inset 3px 0 0 var(--accent)}
  nav button.active .ni{color:var(--accent)}
  nav .caret{margin-left:auto;padding-left:8px}
  nav .badge{margin-left:8px}
  .quickAct{order:5;flex-direction:column;align-items:stretch;margin:0!important;padding:10px 14px 4px;gap:6px}
  .qa{justify-content:flex-start;border-radius:12px}
  .topAct{position:fixed;top:16px;right:24px;z-index:30;display:flex;align-items:center;gap:8px;padding:5px;border-radius:999px;background:var(--hdr);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
  .topAct .tmBtn{box-shadow:none}
  .topAct .um{margin:0!important}
  .topAct .umBtn{padding:2px;gap:0;box-shadow:none;border-radius:50%}
  .topAct .umBtn .av{width:34px;height:34px;font-size:13px}
  .topAct .umName,.topAct .umBtn .caret{display:none}
  header .sbRow{order:7;display:flex;align-items:center;gap:12px;width:auto;margin:6px 14px 14px;padding:12px 6px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;color:var(--text);font-weight:600;font-size:14px;opacity:.82}
  header .sbRow:hover{background:transparent;opacity:1;filter:none}
  header .sbRow svg{width:18px;height:18px;flex:none}
  header .sbRow.hidden{display:none}
  header #sbSettings:not(.hidden)+#sbOut{border-top:0;margin-top:0;padding-top:6px}
  header #sbSettings{margin-bottom:0}
  header #sbUpload{margin-bottom:0}
  header #sbUpload:not(.hidden)+#sbSettings,header #sbUpload:not(.hidden)+#sbSettings.hidden+#sbOut{border-top:0;margin-top:0;padding-top:6px}
  header .sbRow.active{opacity:1;color:var(--accent)}
  main{padding-top:14px!important}
  main{max-width:1320px;margin:40px 0 56px;padding:0 34px}
}
/* Baum-Navigation in der Seitenleiste (wie VISION): Pfeil rechts, Unterpunkte mit Symbol und abgerundeten Verbindungslinien, beliebig tief */
@media (min-width:900px){
  nav .chev{display:inline-grid;place-items:center;margin-left:auto;padding-left:8px;color:var(--muted);transition:transform .18s,color .18s}
  nav .chev svg{width:15px;height:15px}
  nav .treeHead[aria-expanded=true]>.chev{transform:rotate(90deg)}
  nav .treeHead.onPath,nav .treeHead.onPath>.ni,nav .treeHead.onPath>.chev{color:var(--accent)}
  nav .treeHead.onPath{opacity:1}
  nav .tree{--treeLine:color-mix(in srgb,var(--muted) 45%,transparent);position:relative;margin:2px 8px 4px 29px}
  nav .tree>*{position:relative}
  /* Bogen von der Linie zum Eintrag */
  nav .tree>*::before{content:"";position:absolute;left:0;top:0;width:11px;height:19px;border-left:1.5px solid var(--treeLine);border-bottom:1.5px solid var(--treeLine);border-bottom-left-radius:8px;pointer-events:none}
  /* Linie weiter zum nächsten Eintrag */
  nav .tree>:not(:last-child)::after{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px solid var(--treeLine);pointer-events:none}
  nav .tree button{padding:9px 10px 9px 20px;margin:0 0 0 0;border-radius:8px;font-size:14px;font-weight:600;line-height:1.3;opacity:.82;box-shadow:none}
  nav .tree>button,nav .tree>.treeGrp>button{width:100%;padding-left:18px}
  nav .tree .treeGrp>.tree{margin-left:27px;margin-right:0}   /* Linie unter dem Symbol der Ebene darüber */
  nav .tree button .ni{margin-right:10px;color:var(--muted)}
  nav .tree button .nl{flex:1 1 auto;min-width:0;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}   /* lange Wörter trennen (deutsch, sonst an ­) */
  /* ab der zweiten Unterebene enger, damit Namen wie „Arbeitsvertrag“ in eine Zeile passen */
  nav .tree .treeGrp>.tree{margin-left:24px}
  nav .tree .tree{margin-right:2px}
  nav .tree .tree>button,nav .tree .tree>.treeGrp>button{padding-left:12px;padding-right:4px;font-size:13px}
  nav .tree .tree .navCount{margin-left:6px;padding:0 6px}
  nav .tree .tree button .ni{margin-right:8px}
  nav .tree button:hover{opacity:1}
  nav .tree button.cur{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);opacity:1}
  nav .tree button.cur .ni{color:var(--accent)}
  nav .tree .badge{margin-left:auto}
}
/* Farbschema-Umschalter */
.tm{position:relative;flex:none}
.tmBtn{margin:0;padding:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--accent);border:1px solid var(--line);box-shadow:var(--shadow)}
.tmBtn:hover{background:var(--hover);filter:none}.tmBtn svg{width:19px;height:19px}
.drop button.tmItem{display:flex;align-items:center;gap:10px}
.sw{display:inline-flex;flex:none;width:36px;height:20px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}.sw i{flex:1}
.tmItem .chk{margin-left:auto;font-weight:700}
@media (max-width:760px){.qa .qt{display:none}.qa{padding:9px}.quickAct{gap:6px}}
@media (max-width:700px){nav{flex-wrap:wrap;gap:4px}.navMain{flex-basis:100%}.navSide{flex-basis:100%;padding-left:2px;border-left:0;border-top:1px solid var(--line);padding-top:6px;overflow-x:auto;scrollbar-width:none}}
@media (max-width:560px){.umName,.caret{display:none}.umBtn{padding:3px}header h1{font-size:17px}.bar{padding:8px 14px}nav{padding:0 8px 6px}main{margin-top:16px}.card{padding:16px}.tiles{grid-template-columns:repeat(2,1fr);gap:10px}.pRow{padding:0 16px 18px}.pData{padding-top:4px}}
@media (max-width:400px){header h1{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Einstellungen */
.setGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 16px}
.setHint{font-size:13px;color:var(--muted);margin-top:6px}
.pwState{font-size:12px;font-weight:600;color:var(--ok);margin-left:6px}
.srcNote{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--rs);background:var(--soft);font-size:14px;margin-bottom:6px}
.check.inline{margin-top:0}

/* Versionshinweis unten rechts (nur Administratoren) */
.verInfo{position:fixed;right:14px;bottom:10px;z-index:15;font-size:11.5px;line-height:1;color:var(--muted);background:var(--hdr);border:1px solid var(--line);border-radius:999px;padding:6px 10px;opacity:.75;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:default;font-variant-numeric:tabular-nums}
.verInfo:hover{opacity:1}
@media print{.verInfo{display:none}}

/* Farbschema-Auswahl (Fenster mit Karten) */
.tmModal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.45);padding:16px;animation:fade .12s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.tmBox{width:min(560px,100%);max-height:min(720px,calc(100vh - 32px));display:flex;flex-direction:column;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:20px 12px 10px 20px}
.tmBox h2{margin:0;font-size:18px}
.tmBox .tmSub{color:var(--muted);font-size:13px;margin:4px 0 14px}
.tmList{overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 8px 2px 2px;scrollbar-width:thin}
.tmCard{margin:0;text-align:left;border-radius:12px;padding:14px 14px 12px;border:1px solid;box-shadow:none;font-weight:600;font-size:14px;cursor:pointer;display:flex;flex-direction:column;gap:12px;transition:transform .12s,box-shadow .12s}
.tmCard:hover{transform:translateY(-1px);filter:none}
.tmCard.cur{box-shadow:0 0 0 2px var(--cardAccent)}
.tmSw{display:flex;gap:6px}
.tmSw i{width:22px;height:22px;border-radius:5px;display:block;border:1px solid rgba(127,127,127,.25)}
.idleModal{z-index:80}
.idleNote{margin:0 0 14px}
.tmFoot{display:flex;justify-content:flex-end;padding:10px 8px 2px}
.tmFoot button{margin:0;background:transparent;color:var(--muted);box-shadow:none;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:8px 10px}
.tmFoot button:hover{color:var(--text);filter:none;background:var(--hover)}
@media (max-width:420px){.tmList{grid-template-columns:1fr}}
/* Meldungsfenster (Rückfragen, Hinweise, Eingaben) – gleicher Stil wie die Farbschema-Auswahl */
.dlgModal{z-index:70}
.dlgBox{width:min(480px,100%);padding:22px 14px 10px 22px;animation:dlgIn .16s ease-out}
@keyframes dlgIn{from{transform:translateY(6px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.dlgHead{display:flex;gap:14px;align-items:flex-start;padding-right:8px}
.dlgMain{min-width:0;flex:1}
.dlgMain h2{margin:2px 0 0;font-size:18px;line-height:1.3}
.dlgText{color:var(--muted);font-size:14px;line-height:1.55;margin:6px 0 0;white-space:pre-line;overflow-wrap:anywhere}
.dlgIc{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.dlgIc svg{width:22px;height:22px}
.dlgIc.k-danger,.dlgIc.k-error{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.dlgIc.k-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.dlgInput{margin:16px 8px 0 54px}
.dlgInput label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.dlgInRow{display:flex;gap:8px}.dlgInRow input{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.dlgInRow button{margin:0;flex:none}
.dlgErr{color:var(--danger);font-size:13px;margin-top:6px}
.dlgFoot{gap:4px;padding-top:16px}
.dlgFoot .dlgOk{color:var(--accent)}
.dlgFoot .dlgAlt{color:var(--danger);margin-right:auto}
.dlgFoot .dlgAlt:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.dlgFoot .dlgOk.k-danger,.dlgFoot .dlgOk.k-error{color:var(--danger)}
.dlgFoot .dlgOk:hover{color:var(--accent);background:var(--soft)}
.dlgFoot .dlgOk.k-danger:hover,.dlgFoot .dlgOk.k-error:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.dlgFoot button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:480px){.dlgInput{margin-left:0}}


/* Profilbild im Stammdaten-Formular */
.picRow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:6px 0 4px}
.picRow .av.xl{width:96px;height:96px;font-size:32px;border-width:3px}
.picActs{display:flex;flex-direction:column;gap:2px}
.picActs .row button{margin:0}

/* Arbeitstage-Auswahl (Minijob) */
.wdays{display:flex;flex-wrap:wrap;gap:6px}
.wday{display:inline-flex;align-items:center;gap:6px;margin:0;padding:8px 11px;border:1px solid var(--line);border-radius:var(--rs);background:var(--input);color:var(--text);font-size:14px;cursor:pointer}
.wday input{width:auto;margin:0}
.wday:has(input:checked){border-color:var(--accent);background:var(--soft)}

/* Ladekosten: Ladevorgänge und Nachweisbilder */
.chH{margin:22px 0 10px;font-size:15px}
.lsRow{display:grid;grid-template-columns:30px minmax(128px,1fr) 96px minmax(128px,1fr) 96px 100px 84px 34px;gap:6px;align-items:center;margin-bottom:6px}
.lsRow input{margin:0;min-width:0;width:100%;box-sizing:border-box}
.lsC{min-width:0}
.lsHead{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.lsHead .r{text-align:right}
.lsNr{font-weight:600;color:var(--muted);text-align:right;padding-right:4px}
.lsCost{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.lsL{display:none}
.lsDel{width:34px;height:34px;padding:0;margin:0;font-size:18px;line-height:1}
.chThumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chThumbs img{width:44px;height:58px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.chPics{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:6px 0 10px}
.chPic{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--input)}
.chPic img{width:100%;height:100%;object-fit:cover;display:block}
.chPicN{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:1px 7px;border-radius:9px}
.chPicDel{position:absolute;top:5px;right:5px;width:26px;height:26px;padding:0;margin:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:0;font-size:16px;line-height:1}
@media (max-width:760px){
  .lsHead{display:none}
  .lsRow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:relative;padding:10px 10px 8px;border:1px solid var(--line);border-radius:12px;background:var(--input);margin-bottom:10px;gap:8px}
  .lsNr{grid-column:1/-1;text-align:left;padding:0}
  .lsNr::before{content:'Ladevorgang '}
  .lsL{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
  .lsRow input{background:var(--card)}
  .lsCost{align-self:end;padding-bottom:10px}
  .lsCost::before{content:'Kosten ';font-weight:400;color:var(--muted);font-size:12px}
  .lsDel{position:absolute;top:6px;right:6px;width:30px;height:30px}
}

/* News */
.newsCard.unread{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.newsHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.newsHead h2{margin:2px 0 2px}
.newsKicker{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.newsBody{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.newsReads{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:grid;gap:8px}
.newsReadRow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* Dokumentbetrachter (PDFs und Bilder innerhalb der Seite) – Stil wie Farbschema-Auswahl und Meldungsfenster */
body.dvOpen{overflow:hidden}
.dvModal{z-index:65;padding:24px}
.dvBox{width:min(1080px,100%);height:min(100%,calc(100vh - 48px));display:flex;flex-direction:column;background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:dlgIn .16s ease-out}
.dvBar{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line)}
.dvIc{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.dvIc svg{width:20px;height:20px}
.dvHead{flex:1;min-width:0;display:flex;flex-direction:column}
.dvTitle{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dvInfo{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dvZoomBox{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:10px;background:var(--input)}
.dvZoom{min-width:52px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.dvBtn{margin:0;width:34px;height:34px;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text);box-shadow:none;cursor:pointer}
.dvBtn:hover{background:var(--hover);filter:none}
.dvBtn svg{width:18px;height:18px}
.dvX{width:38px;height:38px;color:var(--muted)}
.dvX:hover{color:var(--text)}
a.btn.dvDl{margin:0;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;font-size:14px;white-space:nowrap}
.dvDl svg{width:17px;height:17px}
.dvBody{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:24px;
  background:color-mix(in srgb,var(--text) 6%,var(--bg));outline:none;scrollbar-width:thin}
.dvPage{flex:none;margin:0 auto;background:#fff;border-radius:4px;box-shadow:0 2px 14px rgba(0,0,0,.22)}
.dvPage canvas{display:block;width:100%;height:100%;border-radius:4px}
.dvImg{max-width:100%;height:auto;margin:auto;border-radius:6px;box-shadow:0 2px 14px rgba(0,0,0,.22);background:#fff}
.dvWait{margin:auto;color:var(--muted);text-align:center}
@media (max-width:760px){.dvModal{padding:0}.dvBox{height:100%;border-radius:0;border:0}.dvZoomBox{display:none}.dvBody{padding:12px}a.btn.dvDl{padding:9px 10px}a.btn.dvDl{font-size:0;gap:0}}

/* Unterschrift (Benutzermenü und Mitarbeiterstammdaten) */
.sigEd{display:flex;flex-direction:column;gap:8px;min-width:0}
.sigPrev{width:300px;max-width:100%;height:100px;border:1px dashed var(--line);border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden;position:relative}
.sigPrev img{max-width:92%;max-height:84px;display:block}
.sigPrev.drawing{border-style:solid;border-color:var(--accent);height:150px;width:420px}
.sigEmpty{color:#64748b;font-size:13px}
.sigPad{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.sigActs,.sigDrawActs{margin-top:0}
.sigActs button,.sigDrawActs button{margin:0}
.sigMsg{min-height:1em}
.sigRow{align-items:flex-start;padding-top:10px;border-top:1px solid var(--line);margin-top:12px}
.sigInfo{max-width:360px;padding-top:4px}
.sigBox{width:min(520px,100%)}
.sigWrap{margin:16px 8px 0 54px}
@media (max-width:560px){.sigWrap{margin-left:0}.sigPrev.drawing{width:100%}}

/* Filter-Leiste (Krankmeldungen Übersicht) */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--input)}
.seg button{margin:0;border:0;border-radius:7px;background:transparent;color:var(--muted);box-shadow:none;font-size:13px;font-weight:600;padding:6px 11px}
.seg button:hover{background:var(--hover);color:var(--text);filter:none}
.seg button.on{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}
.li.sick.dim{opacity:.6}

/* Auswertungen (Ladekosten- und Personalkostenanalyse) */
.anaBars{height:200px}
.anaBars .barCol.fut .mbar{opacity:.35}
.anaBars .barCol.fut .bv,.anaBars .barCol.fut .bl{opacity:.6}
.anaBars .bv{white-space:nowrap;font-size:10.5px}
table.anaTable{font-variant-numeric:tabular-nums}
table.anaTable th,table.anaTable td{white-space:nowrap}
table.anaTable td.num,table.anaTable th.num,table.anaBase td.num,table.anaBase th.num{text-align:right}
table.anaTable td.zero{color:var(--muted)}
table.anaTable .fut{opacity:.55}
table.anaTable td.tot{font-weight:700}
table.anaTable tfoot td{border-top:2px solid var(--line)}
table.anaTable td:first-child,table.anaTable th:first-child{position:sticky;left:0;background:var(--card);z-index:1}
table.anaTable tfoot td:first-child{background:var(--input)}

/* Ausklappbare Bereiche (Personalakte) */
.fold{margin-top:16px;border-top:1px solid var(--line);padding-top:6px}
.foldBtn{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:10px 6px;border:0;border-radius:10px;background:transparent;color:var(--text);box-shadow:none;font-weight:650;font-size:15px;text-align:left;cursor:pointer}
.foldBtn:hover{background:var(--hover);filter:none}
.foldChev{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--soft);color:var(--accent);font-size:18px;line-height:1;transition:transform .15s}
.fold.open .foldChev,.foldBtn[aria-expanded=true] .foldChev{transform:rotate(90deg)}
.foldCount{font-size:12px;font-weight:700;color:var(--muted);background:var(--input);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.foldHint{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--accent)}
.foldBody{padding-top:8px}

/* Gestapelte Balken: Aufteilung der Personalkosten (Farben aus geprüfter Palette, hell/dunkel getrennt) */
:root{--ana1:#2a78d6;--ana2:#eb6834;--ana3:#1baf7a;--ana4:#eda100}
:root[data-mode=dark]{--ana1:#3987e5;--ana2:#d95926;--ana3:#199e70;--ana4:#c98500}
.s1{background:var(--ana1)}.s2{background:var(--ana2)}.s3{background:var(--ana3)}.s4{background:var(--ana4)}
.stackLeg{display:flex;flex-wrap:wrap;gap:8px 20px;margin:2px 0 14px;font-size:13px;color:var(--muted)}
.stackLegItem{display:flex;align-items:center;gap:7px}
.stackLegItem strong{color:var(--text);font-variant-numeric:tabular-nums;font-weight:650}
.stackSw{width:12px;height:12px;border-radius:3px;flex:none}
.stackBars .stack{width:100%;max-width:38px;display:flex;flex-direction:column-reverse;border-radius:7px 7px 3px 3px;overflow:hidden;min-height:0}
.stackBars .stack .stk{min-height:0;flex-basis:0}
.stackBars .stack .stk+.stk{border-bottom:2px solid var(--card)}
.stackBars .barCol.fut .stack{opacity:.4}

/* Anmeldung mit zweitem Faktor, Benutzerverwaltung (3.0) */
.login.wide{max-width:520px}
input.codeIn{font:600 22px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.3em;text-align:center;max-width:240px}
.steps{margin:4px 0 8px;padding-left:20px;color:var(--muted);font-size:14px}.steps li{margin:4px 0}
.qrBox{display:inline-block;background:#fff;border-radius:12px;padding:10px;margin:6px 0 4px;border:1px solid var(--line)}
.qrBox img{display:block;width:200px;height:200px;image-rendering:pixelated}
code.secretKey,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;overflow-wrap:anywhere}
code.secretKey{background:var(--input);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--text)}
.rcGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:14px}
.rcGrid code{font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;background:var(--input);border:1px solid var(--line);border-radius:8px;padding:9px 10px;text-align:center}
.linkRow{margin-top:12px}
button.mt0{margin:0}
.secHead{margin-top:22px}
.setupBox{margin-top:6px}
.tag.role-admin{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger);font-weight:600}
.tag.role-hr{background:var(--soft);color:var(--accent);font-weight:600}
.tag.role-guest{background:transparent;border:1px dashed var(--line)}
.srcNote.okNote{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);font-weight:600}
.srcNote.warnNote{background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn);font-weight:600}
.chips.roleChips{margin-top:16px}
/* Seitenkopf über dem Inhalt: Titel, Begrüßung, angemeldete Benutzer, Farbschema und Profil */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--hdr);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.tbLeft{min-width:0}
.topbar h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.topbar p{margin:4px 0 0;font-size:13.5px}
.tbRight{display:flex;align-items:center;gap:10px;margin-left:auto}
.topbar .topAct{position:static;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.onlinePill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:var(--navActive);color:var(--text);font-weight:700;font-size:14px;white-space:nowrap;cursor:default}
.onlinePill svg{width:17px;height:17px;color:var(--accent);flex:none}
.pageLead{margin:0 0 20px}
@media (min-width:900px){
  .topbar{position:sticky;top:0;z-index:20;padding:20px 34px;min-height:96px}
  .topbar h1{font-size:30px}
  main{margin-top:26px!important}
  header .clock{font-size:30px}
}

/* Personalakte – Personal */
tr.clickRow{cursor:pointer}
tr.clickRow:hover td{background:var(--hover)}
td.num,th.num{text-align:right;white-space:nowrap}
.staffForm .card .cardHead{margin-bottom:6px}
.staffForm .row .grow.tr{flex:1;text-align:right}
.accState{align-items:center;gap:10px;margin:0 0 4px}
input.calc{background:transparent;border-style:dashed;color:var(--muted);cursor:default}
input.calc:focus{box-shadow:none;border-color:var(--line)}
.setTabs{margin-bottom:18px}
.navDrop button{display:flex;align-items:center}
.navDrop .ni{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;margin-right:10px;color:var(--muted)}
.navDrop .ni svg{width:17px;height:17px}
.navDrop button.cur .ni{color:var(--accent)}
/* Online-Anzeige (Benutzerverwaltung) */
.onl{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.onl::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.onl.on{color:var(--text);font-weight:600;cursor:default}
.onl.on::before{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.onl.off{color:var(--muted)}
.onl.off::before{background:transparent;border:1.5px solid var(--line)}

/* Dokumente einlesen */
.dropZone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin:0 0 14px;padding:34px 16px;border:2px dashed color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:var(--r);background:color-mix(in srgb,var(--soft) 40%,transparent);text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.dropZone:hover,.dropZone.over{background:var(--soft);border-color:var(--accent)}
.dropZone strong{font-size:16px}
.dropZone.compact{padding:16px}
.upList{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.upRow{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--rs);background:var(--input)}
.upRow.bad{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.upName{flex:1;min-width:0;overflow-wrap:anywhere}
.upIc{display:inline-grid;place-items:center;width:34px;height:28px;flex:none;border-radius:6px;background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger);font-size:10.5px;font-weight:800;letter-spacing:.04em}
.upBar{display:block;width:140px;height:8px;border-radius:99px;background:var(--line);overflow:hidden;flex:none}
.upFill{display:block;height:100%;background:var(--accent);transition:width .2s}
.upErr{color:var(--danger);max-width:320px;text-align:right}
.dlgForm{margin-top:10px;min-width:min(420px,70vw)}

/* Dokument zuordnen: links Auswahl, rechts Vorschau */
.assignGrid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:20px;align-items:start}
.assignGrid>.card{margin-bottom:0}
.assignForm{position:sticky;top:120px}
.assignForm label:first-of-type{margin-top:4px}
select.pickList{padding:6px;height:auto;margin-top:8px}
select.pickList option{padding:6px 8px;border-radius:6px}
.typeHead{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.typeHead button{margin:0 0 6px}
.newType{margin-top:8px}
.newType .row{flex-wrap:nowrap}
.newType input{flex:1;min-width:0}
.docFacts{margin:12px 0 4px;line-height:1.6}
.previewCard{padding:16px}
.pdfFrame{display:block;width:100%;height:calc(100vh - 230px);min-height:520px;border:1px solid var(--line);border-radius:var(--rs);background:#525659}
@media (max-width:1000px){.assignGrid{grid-template-columns:1fr}.assignForm{position:static}.pdfFrame{height:75vh}}
/* Anzahl hinter Menüeinträgen (z. B. Dokumente je Typ) */
.navCount{flex:none;margin-left:8px;padding:0 7px;border-radius:99px;background:var(--hover);color:var(--muted);font-size:11.5px;font-weight:700;line-height:18px}
nav .tree button.cur .navCount{background:var(--soft);color:var(--accent)}
.navDrop .navCount{margin-left:12px}

/* Personalakte: rechts die Dokumente als Kacheln je Dokumententyp */
.staffGrid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:20px;align-items:start}
.staffSide{position:sticky;top:120px}
.staffSide .card{margin-bottom:0}
.docTiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.docTile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:104px;margin:0;padding:12px 12px 11px;border:1px solid var(--line);border-radius:14px;background:var(--input);color:var(--text);box-shadow:none;text-align:left;font-weight:600;transition:border-color .15s,background .15s,transform .15s}
.docTile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));filter:none;transform:translateY(-2px)}
.docTile.on{border-color:var(--accent);background:var(--soft);box-shadow:0 0 0 1px var(--accent)}
.docTileIc{display:grid;place-items:center;width:32px;height:32px;margin-bottom:4px;border-radius:9px;background:var(--soft);color:var(--accent)}
.docTileIc svg{width:18px;height:18px}
.docTile.on .docTileIc{background:var(--accent);color:var(--on-accent)}
.docTileName{font-size:13.5px;line-height:1.25;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;max-width:100%}
.docTileCount{margin-top:auto;font-size:12px;font-weight:500;color:var(--muted)}
.docList{margin-top:4px}
.docList .secHead{margin-top:16px}
.docItem{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--rs);cursor:pointer;flex-wrap:wrap}
.docItem:hover{background:var(--hover)}
.docItemMain{flex:1;min-width:0}
.docItemTitle{font-weight:600;overflow-wrap:anywhere}
.docItemActs{display:flex;gap:4px;width:100%;padding-left:44px}
.docItemActs button{padding:3px 9px;font-size:12px}
@media (max-width:1200px){.staffGrid{grid-template-columns:1fr}.staffSide{position:static;order:-1}.docTiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.staffForm .subLabel{margin:14px 0 0;font-size:12.5px;font-weight:650;color:var(--muted)}
.staffForm .card .secHead:first-of-type{margin-top:4px}
/* Vorschaufenster für Dokumente */
.pvModal{z-index:65}
.pvBox{width:min(1100px,100%);height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:dlgIn .16s ease-out}
.pvHead{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line)}
.pvTitle{flex:1;min-width:0}
.pvName{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvClose{margin:0;width:36px;height:36px;padding:0;border-radius:50%;background:transparent;color:var(--muted);box-shadow:none;font-size:16px}
.pvClose:hover{background:var(--hover);color:var(--text);filter:none}
.pvFrame{flex:1;width:100%;border:0;background:#525659}
.docTiles>p,.docTiles>.msg{grid-column:1/-1;margin:0}
/* Dokument-Kachel mit Vorschau der ersten Seite im Hintergrund */
.docTile{position:relative;overflow:hidden;isolation:isolate}
.docThumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:-2;opacity:0;transition:opacity .25s,transform .3s}
.docTile.hasThumb .docThumb{opacity:.9}
.docTile.hasThumb::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 0%,transparent 30%,color-mix(in srgb,var(--input) 88%,transparent) 62%,var(--input) 100%)}
.docTile.hasThumb.on::after{background:linear-gradient(180deg,transparent 0%,transparent 30%,color-mix(in srgb,var(--card) 88%,transparent) 62%,var(--card) 100%)}
.docTile.hasThumb:hover .docThumb{transform:scale(1.04)}
/* mit Vorschau: Name und Anzahl unten auf dem Verlauf, Symbol oben links auf der Seite */
.docTile.hasThumb{min-height:156px;justify-content:flex-end;gap:2px}
.docTile.hasThumb .docTileIc{position:absolute;top:9px;left:9px;margin:0;width:28px;height:28px;background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.docTile.hasThumb.on .docTileIc{background:var(--accent)}
.docTile.hasThumb .docTileCount{margin-top:0}
/* Zuordnungsvorschlag */
.sugg{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12.5px;font-weight:600;background:var(--hover);color:var(--muted);white-space:nowrap;max-width:380px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.sugg.sure{background:var(--soft);color:var(--accent)}
.upOk{gap:8px;flex-wrap:nowrap}
.assignForm .srcNote{margin:0 0 10px;font-size:12.5px}
/* Abrechnungszeitraum und ausgelesener Text (Dokument zuordnen) */
.periodRow .row{flex-wrap:nowrap}
.periodRow select{flex:1}
.periodRow .pyIn{width:96px;flex:none}
details.textInfo{margin:8px 0 4px;font-size:12.5px}
details.textInfo summary{cursor:pointer;color:var(--muted);font-weight:600}
details.textInfo pre{max-height:320px;overflow:auto;margin:8px 0 0;padding:10px;border:1px solid var(--line);border-radius:var(--rs);background:var(--input);font-size:11px;line-height:1.35;white-space:pre}
.sickRow{display:grid;grid-template-columns:1fr;gap:0}
.sickRow label{margin-top:10px}
.setHint.warnText{color:var(--warn);font-weight:600}
.sugg.pending{background:transparent;border:1px dashed var(--line);color:var(--muted);font-weight:500}
/* Krankheitstage in den Personaldaten */
.sickGrid{display:grid;grid-template-columns:repeat(3,minmax(0,160px));gap:12px;margin-top:4px}
.sickStat{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--input)}
.sickNum{font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
/* Seitenberechtigungen */
.permTable td,.permTable th{vertical-align:middle}
.permTable .permCell{text-align:center;width:150px}
.permTable .permCell input{width:18px;height:18px;accent-color:var(--accent)}
.permTable tr.permGroup td{padding-top:16px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.permTable .permPage{font-weight:600}
.permTable .permChild{padding-left:34px;position:relative}
.permTree{position:absolute;left:16px;top:0;height:50%;width:11px;border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);border-bottom-left-radius:7px}
.permTable td.permWeak{opacity:.4}
.permUser{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.permUser>div:first-child{min-width:220px}
.permUser .row{flex:1;gap:6px}
.permUserGrid{display:grid;grid-template-columns:1fr;gap:6px;max-width:620px}
.permUserGrid .permGroup{margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.permUserRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.permUserRow.child{padding-left:22px}
.permUserRow select{width:230px;flex:none}
.permAdmin .permUserGrid{opacity:.45}
.adminOnly{display:none}.permAdmin .adminOnly{display:block}
/* mehrere Rollen */
.roleChecks{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 0 2px}
td.roleTags .tag{margin:1px 4px 1px 0}
/* eigene Personalakte (nur lesen) */
.staffForm.readOnly input:disabled,.staffForm.readOnly select:disabled,.staffForm.readOnly textarea:disabled{opacity:1;color:var(--text);background:var(--input);cursor:default;-webkit-text-fill-color:var(--text)}
/* Dokumentenverwaltung: Übersicht mit Suche */
.ovFilters{display:grid;grid-template-columns:1.8fr 1.1fr 1.3fr 1.3fr .9fr 1fr .9fr;gap:0 12px}
@media (max-width:1300px){.ovFilters{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.ovFilters{grid-template-columns:1fr 1fr}}
td.nowrap{white-space:nowrap}

/* Zeiterfassung */
.monthNav{display:flex;align-items:center;gap:10px}
.monthNav strong{font-size:17px;min-width:150px;text-align:center}
.monthNav button{padding:5px 12px;font-size:16px}
.tsTable td{padding-top:4px;padding-bottom:4px;vertical-align:middle}
.tsTable input{padding:6px 8px;font-size:13.5px}
.tsTable input[type=time]{width:112px}
.tsTable .brIn{width:80px}
.tsTable tr.offDay td{background:color-mix(in srgb,var(--hover) 70%,transparent)}
.tsTable tr.offDay td:first-child,.tsTable tr.offDay td:nth-child(2){color:var(--muted)}
.tsTable tr.hasTime td:first-child{font-weight:600}
.tsTable input:disabled{opacity:1;-webkit-text-fill-color:var(--text);background:transparent;border-color:transparent}
.tsState{width:22px;text-align:center;font-weight:700}
.tsState.ok{color:var(--ok,#22c55e)}.tsState.err{color:var(--danger)}
.tsSum{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:14px 0 4px;font-size:15px}
.tsSum .warnText{color:var(--warn)}

/* Urlaub */
.vacGrid{grid-template-columns:repeat(4,minmax(0,160px))}
.sickStat.neg .sickNum{color:var(--danger)}
.vacForm{display:grid;grid-template-columns:180px 180px 1fr 140px;gap:0 14px;align-items:end}
@media (max-width:900px){.vacForm{grid-template-columns:1fr 1fr}.vacGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vacDays{padding:10px 0;font-size:17px}
.warnText{color:var(--warn)}
button.small.okText{color:var(--ok);font-weight:700}
/* Urlaub in der Personalakte */
.vacGrid5{grid-template-columns:repeat(5,minmax(0,140px))}
@media (max-width:1100px){.vacGrid5{grid-template-columns:repeat(3,minmax(0,1fr))}}
table.vacMini{margin-top:12px;max-width:760px}
table.vacMini td,table.vacMini th{padding-top:6px;padding-bottom:6px}
table.vacMini tr.vacPast td:first-child{color:var(--muted)}
/* einklappbare Listen in der Personalakte */
.sickStats .fold,.staffForm .fold{max-width:860px}
.staffForm .fold .foldBtn:hover{background:var(--hover)}
/* Zeiterfassung: Monatsstand */
.chip.missing{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.tsProgress{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:2px 0 14px}
.tsProgress span{display:block;height:100%;background:var(--accent);border-radius:99px}
/* Urlaub: Jahresplaner */
.calLegend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.calLegend span{display:inline-flex;align-items:center;gap:6px}
.calLegend i{display:inline-block;width:16px;height:10px;border-radius:3px}
.vb.taken{background:#22c55e}.vb.planned{background:var(--accent)}
.vb.req{background:repeating-linear-gradient(135deg,#f59e0b 0 4px,color-mix(in srgb,#f59e0b 45%,transparent) 4px 8px)}
.vb.off{background:color-mix(in srgb,#ef4444 30%,transparent)}.vb.today{width:2px!important;height:14px!important;background:#ef4444}
.yearPlanner{position:relative;overflow-x:auto}
.ypRow{display:grid;grid-template-columns:190px minmax(640px,1fr) 150px;align-items:center;min-height:42px}
.ypHead{min-height:26px;position:sticky;top:0}
.ypName{display:flex;flex-direction:column;justify-content:center;padding-right:12px;min-width:0}
.ypName strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ypTrack{position:relative;height:100%}
.ypHead .ypTrack{height:26px}
.ypMonth{position:absolute;top:0;height:26px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;border-left:1px solid var(--line)}
.ypMonth:first-child{border-left:0}
.ypStat{padding-left:14px;font-size:13px;white-space:nowrap}
.ypHead .ypStat{font-size:11px;color:var(--muted);font-weight:700}
.ypBody{position:relative}
.ypBgWrap{position:absolute;inset:0;display:grid;grid-template-columns:190px minmax(640px,1fr) 150px;pointer-events:none}
.ypBg{grid-column:2;position:relative}
.ypOff{position:absolute;top:0;bottom:0;background:color-mix(in srgb,#ef4444 14%,transparent)}
.ypMonthLine{position:absolute;top:0;bottom:0;border-left:1px solid var(--line)}
.ypToday{position:absolute;top:-26px;bottom:0;border-left:2px solid #ef4444;opacity:.85}
.ypRows{position:relative}
.ypRows .ypRow{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.ypRows .ypRow:hover{background:color-mix(in srgb,var(--hover) 60%,transparent)}
.ypBar{position:absolute;top:50%;height:24px;margin-top:-12px;border-radius:5px;font-size:10.5px;text-align:center;font-weight:700;line-height:22px;color:#0b1f17;
  padding:0 5px;overflow:hidden;white-space:nowrap;text-overflow:clip;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25);min-width:3px}
.ypBar.taken{background:#22c55e}
.ypBar.planned{background:var(--accent)}
.ypBar.req{background:repeating-linear-gradient(135deg,#f59e0b 0 5px,#fbbf24 5px 10px);color:#3a2300}
.ypBar:hover{filter:brightness(1.1);z-index:2}
.holNav{margin:18px 0 6px}.holNav strong{min-width:300px}
/* Seiten mit voller Breite (z. B. Urlaubs-Jahreskalender) */
main.wide{max-width:none}

/* Unterschrift und Krankmeldung */
.sigBox{margin-top:10px}
canvas.sigPad{display:block;width:100%;max-width:560px;aspect-ratio:3/1;border:1px solid var(--line);border-radius:var(--rs);background:#fff;touch-action:none;cursor:crosshair}
.sigShow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 6px}
.sigShow img{height:70px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}
.kindPick{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.kindPick .check{margin-top:6px;font-weight:600}
.kindPick input[type=radio]{width:18px;height:18px;margin:0 10px 0 0;accent-color:var(--accent);flex:none}
.auBox{margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--rs);background:color-mix(in srgb,var(--soft) 35%,transparent)}
.attPrev{display:flex;align-items:flex-end;gap:12px;margin-top:8px}
.attPrev img{max-height:220px;max-width:100%;border:1px solid var(--line);border-radius:8px}

/* Personalakte kompakt: engere Abstände zwischen den Datenfeldern */
.staffForm label{margin:7px 0 3px;font-size:12.5px}
.staffForm input,.staffForm select,.staffForm textarea{padding:6px 10px}
.staffForm .check{margin-top:8px}
.staffForm .card .secHead{margin-top:14px}
.staffForm .subLabel{margin-top:10px}
.staffForm .setHint{margin-top:2px}
/* Hinweise rechts in der Zeile der Beschriftung statt unter dem Feld – sonst wird die ganze Zeile höher */
.staffForm div:has(> label):has(> .setHint){position:relative}
.staffForm div:has(> label):has(> .setHint) > label{padding-right:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staffForm div:has(> label):has(> .setHint) > .setHint{position:absolute;right:0;top:8px;max-width:46%;margin:0;font-size:11.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Untermenü mit Personalnummer über dem Namen */
.nl .nsub{display:block;font-size:11px;font-weight:500;opacity:.65;letter-spacing:.02em;line-height:1.2}

/* Verlauf */
#actBtn.on{background:var(--soft)}
.actFilter{display:grid;grid-template-columns:150px 150px 190px 230px 170px 1fr;gap:0 14px;align-items:end}
@media (max-width:900px){.actFilter{grid-template-columns:1fr 1fr}}
.actTable td{vertical-align:top;padding-top:7px;padding-bottom:7px}
.actTable .actWhat{word-break:break-word;max-width:520px}
.actTable tr.act-bad .actSt,.actTable tr.act-bad .actWhat>span{color:var(--bad,#dc2626);font-weight:600}
.actTable tr.act-warn .actSt{color:var(--warn);font-weight:600}
.actTable tr.act-ok .actSt{color:var(--ok)}
.actTable tr.act-ev .actWhat>span{color:var(--accent)}
.actTable tr.act-sys .actWhat>span{font-style:italic}
/* Benutzerverwaltung: Zugriffsgeräte */
.clientList .client+.client{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.clientList .cDev{font-weight:600}

/* Kostenerstattung */
.expForm{display:grid;grid-template-columns:2fr 1fr 170px 140px;gap:0 14px;align-items:end}
@media (max-width:900px){.expForm{grid-template-columns:1fr 1fr}}
.rcptList{display:flex;flex-direction:column;gap:6px;margin:4px 0 6px}
.rcpt{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--rs);background:var(--input)}
.rcpt .rcptName{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcpt.err{border-color:color-mix(in srgb,var(--warn) 60%,var(--line))}.rcpt.err .muted{color:var(--warn)}
.chip.bad{background:rgba(220,38,38,.13);color:#dc2626}
/* Testbenutzer */
.testUser{display:flex;flex-wrap:wrap;gap:12px 36px;margin:4px 0 8px}
.tag.testTag{margin-left:8px;background:rgba(217,119,6,.15);color:var(--warn);font-size:11px}

/* Echtheitsprüfung (QR-Code) */
.verifyCard{max-width:760px}
.verifyHead{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:var(--rs);margin-bottom:14px}
.verifyHead h2{margin:0 0 4px}.verifyHead p{margin:0}
.verifyHead.ok{background:rgba(21,128,61,.12)}.verifyHead.ok .verifyIc{background:var(--ok)}
.verifyHead.bad{background:rgba(220,38,38,.12)}.verifyHead.bad .verifyIc{background:#dc2626}
.verifyIc{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;font-weight:700}
.verifyRows{display:grid;grid-template-columns:1fr;gap:8px;margin:6px 0 14px}
.verifyRows>div{display:grid;grid-template-columns:160px 1fr;gap:12px}
.verifyMatch{margin-top:10px;padding:10px 12px;border-radius:var(--rs);font-weight:600}
.verifyMatch.ok{background:rgba(21,128,61,.12);color:var(--ok)}.verifyMatch.bad{background:rgba(220,38,38,.12);color:#dc2626}
.verifyLink{margin:14px 0 0;text-align:center;font-size:13.5px}.verifyLink a{color:var(--accent)}
.verifyInput{font:600 16px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}
.verifyAgain{margin-top:8px}
/* Kamera-Scanner (Echtheitsprüfung) */
.scanBox{margin-top:10px}
.scanFrame{position:relative;border-radius:var(--rs);overflow:hidden;background:#000;aspect-ratio:4/3;max-height:40vh;margin:0 auto}
.dlgBox:has(.scanBox){max-height:calc(100vh - 24px);overflow-y:auto}
.scanVideo{display:block;width:100%;height:100%;object-fit:contain;transform:none}
button.scanShot{min-width:160px;font-size:16px}
.scanResult{margin-top:10px;border-radius:var(--rs)}
.scanResult.ok,.scanResult.bad{padding:12px 14px}
.scanResult.ok{background:rgba(21,128,61,.14)}.scanResult.bad{background:rgba(220,38,38,.14)}
.scanVerdict{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.scanVerdict strong{font-size:22px}
.scanResult.ok .verifyIc{background:var(--ok)}.scanResult.bad .verifyIc{background:#dc2626}
.scanResult.ok .scanVerdict strong{color:var(--ok)}.scanResult.bad .scanVerdict strong{color:#dc2626}
/* Ergebnisfenster der Kamera-Prüfung */
.verdictBig{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--rs);margin:6px 0 12px}
.verdictBig strong{font-size:28px}
.verdictBig.ok{background:rgba(21,128,61,.14)}.verdictBig.ok strong{color:var(--ok)}.verdictBig.ok .verifyIc{background:var(--ok)}
.verdictBig.bad{background:rgba(220,38,38,.14)}.verdictBig.bad strong{color:#dc2626}.verdictBig.bad .verifyIc{background:#dc2626}
.verdictBig + .verifyRows>div{grid-template-columns:130px 1fr}
/* Übersicht aller Dokumente: Kachel passt sich der Breite der Tabellenspalten an */
.card.fitCard{width:max-content;min-width:100%;max-width:100%;box-sizing:border-box}
.card.fitCard .ovFilters{max-width:1240px}
.card.fitCard td.nowrap,.card.fitCard th{white-space:nowrap}
/* lange Dateinamen und Vorschläge umbrechen, damit „Zuordnen“/„Löschen“ rechts sichtbar bleiben */
.card.fitCard td:first-child{width:340px;min-width:300px;max-width:340px;overflow-wrap:anywhere;word-break:break-word}
.card.fitCard td:has(> .sugg){min-width:190px}
.card.fitCard .sugg{white-space:normal;display:inline-block;max-width:230px;overflow-wrap:break-word}
/* Knopfspalte bleibt rechts am Kachelrand stehen, auch wenn die Tabelle seitlich scrollt */
.card.fitCard td.acts{white-space:nowrap;position:sticky;right:0;background:var(--card);box-shadow:-10px 0 10px -8px rgba(0,0,0,.35)}
.card.fitCard tr.clickRow:hover td.acts{background:var(--hover)}
.card.fitCard td:first-child .person{white-space:normal;overflow-wrap:anywhere;word-break:break-word;align-items:flex-start}
.card.fitCard td:first-child .person .upIc{flex:none}
.testCode .check.inline{margin-top:4px}

/* KFZ-Ladekostenerstattung */
.chHead,.chHead2{display:grid;grid-template-columns:1.2fr .8fr 1.6fr 1.2fr;gap:0 14px;align-items:end}
@media (max-width:900px){.chHead,.chHead2{grid-template-columns:1fr 1fr}}
.chTable td{padding:4px 6px;vertical-align:middle}
.chTable input{padding:6px 8px;min-width:0}
.chTable input[type=date]{width:150px}.chTable input[type=time]{width:110px}.chTable input[inputmode=decimal]{width:100px;text-align:right}
.chSum{margin:10px 0 4px;font-size:15px}

/* Reporting: Lohnkosten pro Monat */
.repMonth{font-size:17px;min-width:150px;text-align:center}
.monthNav input[type=month]{width:170px;margin-left:10px}
.card.repCard{width:max-content;min-width:100%;max-width:100%;box-sizing:border-box}
.repTable td{vertical-align:top}
.repTable td:nth-child(2){min-width:170px}
.repTable .repNote{color:var(--accent);margin-top:2px;max-width:240px}
.repTable td.strong{font-weight:700}
.repTable tr.repSum td{font-weight:700;border-top:2px solid var(--line);background:color-mix(in srgb,var(--soft) 40%,transparent)}
.repTable th,.repTable td{padding:8px 7px}
.repTable th{text-transform:none;letter-spacing:0;font-size:12px;white-space:nowrap}
.repTable td{font-size:13.5px}
.repTable tr.repGroup th{font-size:11px;color:var(--muted);border-bottom:0;padding-bottom:0;text-align:left}
.repTable .repSlip{background:color-mix(in srgb,var(--soft) 30%,transparent)}
.slipTable td{padding:6px 8px;vertical-align:top}.slipTable .slipSrc{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;max-width:380px}
.dlgBox:has(.slipTable){max-width:860px;width:min(860px,calc(100vw - 24px))}
/* Hochrechnung */
.repTable td.planVal{font-style:italic;color:#3b82f6}
.yrTable td.yrCell{text-align:right;white-space:nowrap;padding:6px 6px}
.yrTable .yrCost{font-weight:600}.yrTable .yrSub{font-size:11px;color:var(--muted)}
.yrTable td.plan .yrCost{color:#3b82f6;font-style:italic}.yrTable td.missing .yrCost{color:var(--warn);font-style:italic}
.yrTable td.yrSum{background:color-mix(in srgb,var(--soft) 40%,transparent)}
.yrTable th.planHead{color:#3b82f6}
.yrLegend{display:flex;gap:18px;font-size:12px;margin:0 0 8px}.yrLegend .plan{color:#3b82f6;font-style:italic}.yrLegend .missing{color:var(--warn);font-style:italic}
.svTable{margin-top:12px}
/* Steuern und SV im Jahr: Gruppenkopf mittig über seinem AN/AG-Paar, Trennlinie vor jeder Gruppe */
.svYear{width:100%;table-layout:fixed}
.svYear col.cName{width:16%}
.svYear td:first-child{overflow:hidden;text-overflow:ellipsis}
.svYear th,.svYear td{padding-left:6px;padding-right:10px}
/* Arbeitnehmeranteile gelb, Arbeitgeberanteile blau (Steuern/SV im Jahr und im Detailfenster) */
:root{--svAn:#a16207;--svAg:#1d4ed8}
:root[data-mode=dark]{--svAn:#facc15;--svAg:#60a5fa}
table :is(th,td).svAn{color:var(--svAn)}
table :is(th,td).svAg{color:var(--svAg)}
.repTable tr.repSum td.svAn,.repTable tr.repSum td.svAg{font-weight:700}
.svYear td:nth-child(2){min-width:0}
.svYear th,.svYear td{text-align:right}
.svYear th:first-child,.svYear td:first-child{text-align:left}
.svYear tr.repGroup th.grp{text-align:center;border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding-bottom:4px}
.svYear tr:not(.repGroup)>:is(:nth-child(2),:nth-child(6),:nth-child(8),:nth-child(10),:nth-child(12)){border-left:1px solid var(--line)}
/* Meldungsfenster mit viel Inhalt: Inhalt scrollt, Knöpfe bleiben sichtbar */
.dlgBox .dlgHead{min-height:0;overflow-y:auto}

/* Reporting Personalbuchhaltung */
.bookEmp{display:grid;grid-template-columns:230px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.bookEmp:last-child{border-bottom:0}
.bookEvents{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.bookEv{display:flex;gap:8px;align-items:baseline}
.bookKind{font-size:11px;padding:2px 8px;min-width:92px;text-align:center;background:var(--hover);color:var(--muted)}
.bookKind.k-krankheit{background:rgba(220,38,38,.1);color:var(--danger)}
.bookKind.k-änderung,.bookKind.k-eintritt,.bookKind.k-austritt{background:var(--soft);color:var(--accent)}
.bookKind.k-sonderzahlung,.bookKind.k-erstattung,.bookKind.k-sachbezug{background:var(--soft2);color:var(--ok)}
.bookKind.k-arbeitszeit,.bookKind.k-urlaub{background:var(--hover);color:var(--text)}
.bookTable td:nth-child(2){min-width:150px}
.bookH{font-size:14px;margin:14px 0 6px}
.bookWarn{padding:5px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.bookWarn.hard span{color:var(--warn)}
.bookRates{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px 18px;margin-bottom:12px}
.bookRate{display:flex;flex-direction:column;gap:4px;font-size:13px}
.bookRate input{max-width:140px}
.bookRate.chk{flex-direction:row;align-items:center;gap:8px}
.bookRate.chk input{max-width:none;width:auto}
.bookKassen input{max-width:120px}
@media (max-width:700px){.bookEmp{grid-template-columns:1fr}}
.plzPick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.plzPick button{margin:0}
.bookHistHead{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin:14px 0 4px}
.bookHistHead:first-child{margin-top:0}
.bookTable td.bookDiff{font-weight:600}
.kidsBox{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.kidRow{display:grid;grid-template-columns:minmax(160px,1fr) 180px auto auto;gap:10px;align-items:end}
.kidRow .muted{padding-bottom:10px}
@media (max-width:640px){.kidRow{grid-template-columns:1fr 1fr}}
.datevTable{max-width:720px}
.datevTable input{max-width:140px}
.datevPreview{display:flex;flex-direction:column;gap:4px;margin:6px 0 4px;font-size:13.5px}
.datevLine.warn{color:var(--warn)}