/* ═══════════════════════════════════════════════════════════════════════
   JMC Zeiterfassung · Design-System (2026-09-14)
   Eine Quelle für Farben, Typografie, Buttons, Tabellen und Shell.
   Reihenfolge: Tokens → Basis → Icons → Buttons → Eingaben → Tabellen →
   Pills/Notizen → Karten/KPIs → Shell (Header, Navigation, Main) →
   Ansichten → Dialoge → Anmeldung → Responsive → Druck/RTL/Motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
 --canvas:#f3f6f9;--surface:#fff;--ink:#1c2733;--muted:#5d6b7c;--line:#d9e1ea;--line2:#eef2f6;
 --navy:#17304f;--blue:#1f5fbf;--orange:#de5c1a;--orange-h:#c44f13;
 --ok:#178a4e;--okbg:#e8f5ec;--bad:#c62828;--badbg:#fdecec;--warn:#b8760c;--warnbg:#fff5e0;
 --r:14px;--r2:8px;--rpill:99px;
 --sh:0 1px 2px rgba(23,48,79,.04),0 8px 24px -16px rgba(23,48,79,.18);
 --ctl-border:#c8d2dc;--hover:#f0f4f8;--rowhover:#eef3fb;--thbg:#f7f9fb;
 /* Aliase für ältere Inline-Styles in index.html */
 --bg:var(--canvas);--card:var(--surface);--txt:var(--ink);--dim:var(--muted);--dim2:#7a8797;
 --navy2:#21416a;--blue-h:#174d9c;--ring:0 0 0 3px rgba(31,95,191,.22)
}

/* ── 2. Basis ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Manrope",-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",Arial,sans-serif;
 background:var(--canvas);color:var(--ink);font-size:15px;line-height:1.5;
 -webkit-font-smoothing:antialiased;font-feature-settings:"cv11" 1}
html[lang="ar"] body{font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif}
::selection{background:rgba(31,95,191,.18)}
[hidden]{display:none!important} /* unvermeidbar: überschreibt display:flex von Klassen */
a{color:var(--blue)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3{color:var(--navy);text-wrap:balance}
h2{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.35;margin-bottom:14px}
h3{font-size:15px;font-weight:800;line-height:1.4;margin:18px 0 8px}
.dim{color:var(--muted)}
.pos{color:var(--ok);font-weight:700}.neg{color:var(--bad);font-weight:700}
.num{font-variant-numeric:tabular-nums}
.skip-link{position:fixed;top:10px;inset-inline-start:10px;z-index:100;padding:12px 18px;background:var(--navy);color:#fff;border-radius:var(--r2);transform:translateY(-160%);font-weight:700}
.skip-link:focus{transform:none}body:not(.signed-in) .skip-link{display:none}
a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ── 3. Icons (Sprite in index.html) ───────────────────────────────────── */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn .ic{margin-inline-start:-2px}
.btn.sm .ic{width:16px;height:16px}

/* ── 4. Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
 border:1.5px solid var(--ctl-border);border-radius:var(--r2);background:var(--surface);color:var(--navy);
 font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none;
 transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--hover);border-color:var(--navy)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.orange:hover{background:var(--orange-h);border-color:var(--orange-h)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--line2);color:var(--navy);border-color:transparent}
.btn.danger{background:var(--badbg);border-color:#f1d4d1;color:var(--bad)}
.btn.danger:hover{background:#f9dcdc;border-color:#e6b8b5}
.btn.sm{min-height:38px;padding:0 12px;font-size:13px}
.btn.big{min-height:52px;padding:0 28px;font-size:16px}
.linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 6px;border:0;background:transparent;
 color:var(--blue);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:6px}
.linkbtn:hover{color:var(--blue-h)}
.linkbtn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;flex:none;
 border:1.5px solid var(--ctl-border);border-radius:7px;background:var(--surface);color:var(--navy);cursor:pointer;transition:background .15s,border-color .15s}
.iconbtn:hover{background:var(--hover);border-color:var(--navy)}
.iconbtn.danger{color:var(--bad)}.iconbtn.danger:hover{background:var(--badbg);border-color:#e6b8b5}
.iconbtn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.iconbtn .ic{width:16px;height:16px}
.fbtns{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.fbtns button{min-height:40px;border:1.5px solid var(--ctl-border);background:var(--surface);color:var(--muted);font-weight:700;font-size:13px;padding:0 14px;border-radius:var(--rpill);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.fbtns button:hover{border-color:var(--navy);color:var(--navy)}
.fbtns button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.fbtns button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ── 5. Eingaben & Formulare ───────────────────────────────────────────── */
input,select,textarea{border:1.5px solid var(--ctl-border);border-radius:var(--r2);background:var(--surface);color:var(--ink);
 min-height:44px;font-size:15px;line-height:1.4;padding:8px 12px;max-width:100%;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:#a9b7c6}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
input::placeholder,textarea::placeholder{color:#7a8797;opacity:1}
input[type=checkbox]{min-height:0;width:22px;height:22px;accent-color:var(--blue);flex-shrink:0;margin:0;cursor:pointer}
input[type=file]{min-height:0}
select{padding-inline-end:32px;appearance:none;-webkit-appearance:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
[dir=rtl] select{background-position:left 10px center;padding-inline-end:12px;padding-inline-start:32px}
label{font-size:13px;font-weight:600;color:var(--ink)}
.bad,[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(198,40,40,.14)}
.form{display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px;margin:12px 0}
.form label{display:flex;flex-direction:column;gap:6px;flex:1 1 150px;min-width:0}
.form label input,.form label select{width:100%}
.form button{align-self:flex-end}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:100%}
.search{width:240px;max-width:100%}
.formsec{padding:24px 26px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.eyb{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--navy);line-height:1.4;margin-bottom:16px}
.step-number{display:none}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
.fgrid label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink);min-width:0}
.fgrid label>span:first-child{min-height:17px}
.fgrid label.req>span:first-child::after{content:" *";color:var(--bad);font-weight:800}
.fgrid input,.fgrid select{width:100%;min-width:0;min-height:46px;font-size:15px}
#mUserWrap{grid-column:span 2}.fgrid .note-field{grid-column:1/-1}
.formsec .note{margin:0 0 16px;max-width:65ch}
.saverow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 26px;background:#f8fafc}
.saverow .btn.big{min-width:180px}.saverow .note{max-width:55ch;margin:0}
.filebtn{position:relative;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.filebtn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filebtn .btn{cursor:pointer}
.filebtn .filename{font-size:13px;color:var(--muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filebtn:focus-within .btn{outline:3px solid var(--blue);outline-offset:2px}
progress{display:block;width:100%;height:5px;border:0;border-radius:10px;overflow:hidden;accent-color:var(--blue)}
progress::-webkit-progress-bar{background:#d9dfe7}progress::-webkit-progress-value{background:var(--blue)}progress::-moz-progress-bar{background:var(--blue)}

/* ── 6. Tabellen ───────────────────────────────────────────────────────── */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th{position:sticky;top:0;z-index:2;background:var(--thbg);color:var(--muted);font-size:12px;font-weight:700;text-align:start;
 text-transform:none;letter-spacing:0;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;line-height:1.4}
td{padding:13px 14px;font-size:14px;border-bottom:1px solid var(--line2);vertical-align:middle;line-height:1.5}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
td.id{font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}
tr.click td{transition:background .12s,box-shadow .12s}
tr.click:hover td{background:var(--rowhover)}
tr.click:hover td:first-child{box-shadow:inset 3px 0 var(--blue)}
[dir=rtl] tr.click:hover td:first-child{box-shadow:inset -3px 0 var(--blue)}
tr.click:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
td.chev{width:40px;text-align:end;color:var(--blue);font-weight:800;font-size:20px;line-height:1;transition:transform .15s}
tr.click:hover td.chev{transform:translateX(3px)}
[dir=rtl] tr.click:hover td.chev{transform:translateX(-3px)}
tr.sumrow td{border-top:2px solid var(--line);font-weight:800;background:#fafbfd}
tr.we td{color:#8391a2}
tr.today td:first-child{font-weight:800;color:var(--blue)}
.subname{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;line-height:1.4}
.anw-table td{vertical-align:middle}
.sig-thumb{height:36px;width:auto;max-width:140px;background:#fff;border:1px solid var(--line);border-radius:6px;display:block}
/* Scrollbox: Listen scrollen intern, so bleiben die Kopfzeilen kleben */
#hrTable>div,#lohnTable,#userTable,#gehaltTable,#dokAll,#monTable,#todayList,#anwTable,#beschwList,#tourTable{max-width:100%;overflow:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#bdc6d3 transparent}
#lohnTable table,#gehaltTable table,#userTable table,#dokAll table{min-width:680px}
#hrTable>div>table{min-width:720px}
#hrTable.show-accounting>div>table{min-width:1400px}
#hrTable:not(.show-accounting) [data-col=acct]{display:none}
#hrTable>div>table tr>:nth-child(2){min-width:175px;position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 var(--line)}
#hrTable>div>table tr:first-child>:nth-child(2){z-index:3;background:var(--thbg)}
#hrTable>div>table tr.click:hover>:nth-child(2){background:var(--rowhover)}
/* leere Zustände (Text kommt aus JS) */
#todayList>.dim,#monTable>.dim,#lohnTable>.dim,#hrTable>.dim,#gehaltTable>.dim,#beschwList>.dim,#dokAll>.dim,#anwTable>.dim{
 display:block;text-align:center;padding:30px 16px;border:1.5px dashed var(--line);border-radius:var(--r2);font-size:14px;color:var(--muted)}
.filter-empty{padding:28px;text-align:center;color:var(--muted);background:#f6f8fb;border:1px dashed var(--line);border-radius:var(--r2);margin-bottom:16px}
.list-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.list-tools input{flex:1 1 200px;max-width:380px}
.list-count{font-size:12px;color:var(--muted);margin-inline-start:auto;white-space:nowrap}

/* ── 7. Pills, Chips, Notizen ──────────────────────────────────────────── */
.stat{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--rpill);font-size:12px;font-weight:700;line-height:1;white-space:nowrap;background:var(--line2);color:var(--muted)}
.stat.offen{background:var(--warnbg);color:var(--warn)}
.stat.erledigt{background:var(--okbg);color:var(--ok)}
.stat.neu{background:#e7effc;color:var(--blue)}
.stat.aus{background:var(--badbg);color:var(--bad)}
.stat.grau{background:var(--line2);color:var(--muted)}
.chip{display:inline-flex;align-items:center;min-height:22px;font-size:11px;font-weight:800;padding:0 9px;border-radius:var(--rpill);margin-inline-start:6px;background:var(--line2);color:var(--muted)}
.chip.open{background:var(--orange);color:#fff}
.badge{display:inline-flex;align-items:center;min-height:22px;font-size:11px;padding:0 9px;border-radius:var(--rpill);font-weight:800;letter-spacing:0;text-transform:none;white-space:nowrap}
.badge.admin{background:#fdeee5;color:var(--orange-h)}
.badge.worker{background:var(--line2);color:var(--muted)}
.note{font-size:13px;line-height:1.6;color:var(--muted);margin-top:8px;max-width:85ch}
.note a{color:var(--blue);font-weight:700}
.note.pos{color:var(--ok)}.note.neg{color:var(--bad)}
.note.warn{color:var(--warn);border-inline-start:3px solid var(--warn);padding-inline-start:10px}

/* ── 8. Karten & Kennzahlen ────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:20px;box-shadow:var(--sh);min-width:0;scroll-margin-top:72px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;min-width:0}
.kpi .lbl{font-size:12px;color:var(--muted);font-weight:700}
.kpi .val{font-size:clamp(22px,2vw,30px);font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.2;margin-top:4px;overflow-wrap:anywhere}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:4px}
.kpi .val.pos{color:var(--ok)}.kpi .val.neg{color:var(--bad)}

/* ── 9. Shell: Demobar, Sync, Header ───────────────────────────────────── */
#demobar{display:none;position:relative;z-index:45;background:#e9eef4;color:#475b70;font-size:12px;font-weight:600;padding:6px 16px;border-bottom:1px solid var(--line);text-align:start} /* JS setzt display:block */
.demobar-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
#demobar label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
#demoRole{min-height:32px;font-size:12px;padding-block:2px;padding-inline:8px 28px}
#syncBanner{font-family:inherit}
#hdr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:80px;padding:14px 28px;background:var(--surface);color:var(--navy);border-bottom:1px solid var(--line)}
#hdr .logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
#hdr .logo::before{content:"";width:6px;height:26px;border-radius:2px;background:var(--orange)}
#hdr .logo span{color:var(--navy);font-weight:600}
#hdr .sub{font-size:12px;color:var(--muted);padding-inline-start:16px;margin-top:2px;font-weight:500}
#hdr .who{margin-inline-start:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
#hdr .who select{min-height:40px;font-size:13px;padding-block:4px}
#hdr .who .btn{min-height:40px}
#whoName{font-weight:700;color:var(--ink)}
.connection{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
#syncdot{width:8px;height:8px;border-radius:50%;background:#9db0c4;display:inline-block;flex-shrink:0}
#syncdot.ok{background:var(--ok)}#syncdot.err{background:var(--bad)}

/* ── 10. Navigation (Seitenleiste / Drawer / Bottom-Bar) ───────────────── */
body.signed-in{display:grid;grid-template-columns:232px minmax(0,1fr);align-items:start}
#hdr,#syncBanner,#demobar{grid-column:1/-1}
#app{grid-column:2}#tabs{grid-column:1}
#tabs{position:sticky;top:0;width:232px;min-height:calc(100dvh - 80px);display:flex;flex-direction:column;gap:22px;
 padding:24px 16px 20px;background:var(--surface);border-inline-end:1px solid var(--line)}
.nav-brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--muted);margin:0 10px 2px}
.nav-brand>span{font-size:15px;background:var(--navy);padding:7px 9px;color:#fff;border-radius:6px;letter-spacing:-.04em}
.nav-group{display:flex;flex-direction:column;gap:4px}
.nav-label{padding:0 12px 6px;font-size:11px;font-weight:700;color:var(--muted)}
#tabs button{display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:10px 12px;border:0;border-radius:var(--r2);
 background:transparent;color:var(--muted);font-size:14px;font-weight:600;text-align:start;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
#tabs button svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tabs button:hover{background:var(--hover);color:var(--navy)}
#tabs button.on{background:#e7effc;color:var(--navy);font-weight:800;box-shadow:inset 3px 0 var(--navy)}
[dir=rtl] #tabs button.on{box-shadow:inset -3px 0 var(--navy)}
#tabs button:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.nav-bottom{font-size:11px;color:var(--muted);padding:20px 12px 0;border-top:1px solid var(--line);margin-top:auto;line-height:1.5}
.nav-bottom small{display:block;margin-top:2px;font-size:11px;color:#7a8797}
.mobile-navigation,#menuBackdrop{display:none}
body[data-workspace-role=tablet] #tabs,body[data-workspace-role=tablet] .mobile-navigation{display:none}
body[data-workspace-role=tablet]{grid-template-columns:1fr}
body[data-workspace-role=tablet] #app{grid-column:1;max-width:1100px;margin:auto}

/* ── 11. Main & Seitenkopf ─────────────────────────────────────────────── */
main{width:100%;max-width:1700px;min-width:0;margin:0;padding:32px clamp(22px,3vw,48px) 64px;outline:none}
.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 28px}
.workspace-heading .overline{display:none}
.overline{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.workspace-heading h1{font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.03em;margin:0 0 6px;outline:none}
.workspace-heading h1:focus-visible{outline:none}
.workspace-heading p:last-child{font-size:14px;line-height:1.6;color:var(--muted);max-width:66ch}
.workspace-date{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;color:var(--ink);
 border:1px solid var(--line);background:var(--surface);border-radius:var(--r2);padding:8px 12px}
.date-dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ── 12. Ansicht: Tagesbericht ─────────────────────────────────────────── */
.entry-jumps{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.entry-jumps button{display:flex;align-items:center;gap:9px;min-height:44px;border:1.5px solid var(--ctl-border);background:var(--surface);padding:0 14px;border-radius:var(--r2);cursor:pointer;color:var(--navy);font-size:13px;font-weight:700}
.entry-jumps button>span:first-child{width:24px;height:24px;display:grid;place-items:center;background:var(--line2);color:var(--muted);border-radius:50%;font-size:11px}
.entry-jumps button:hover{border-color:var(--navy);background:var(--hover)}
.entry-jumps button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.entry-layout{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:22px;align-items:start}
.entry-form{min-width:0;padding:0;overflow:hidden}
.entry-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--line)}
.entry-heading h2{margin:0}
.required-note{font-size:12px;color:var(--muted);white-space:nowrap}
.entry-notice{margin:16px 26px;padding:14px;border-radius:var(--r2);background:var(--badbg);color:#a12828;font-size:13px;line-height:1.6}
.entry-notice.success{background:var(--okbg);color:#17663c}
.entry-summary{position:sticky;top:24px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:10px;padding:24px}
.entry-summary>.overline{letter-spacing:0;text-transform:none;font-size:11px}
.entry-summary h2{font-size:20px;margin:6px 0 20px}
.entry-summary dl>div{border-top:1px solid var(--line2);padding:14px 0}
.entry-summary dt{font-size:12px;color:var(--muted)}
.entry-summary dd{font-size:28px;letter-spacing:-.03em;line-height:1.25;font-weight:800;margin-top:4px;color:var(--navy);font-variant-numeric:tabular-nums}
.entry-summary .note{margin-top:12px}
.entry-progress{padding-top:8px;font-size:11px;color:var(--muted);font-weight:700}
.entry-progress progress{margin-top:8px}
.summary-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:14px 0 0;margin-top:16px;border:0;border-top:1px solid var(--line2);background:transparent;color:var(--blue);font-size:13px;font-weight:700;cursor:pointer;border-radius:0}
.summary-link span:last-child{font-size:18px}
.summary-link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.recent-card{padding:24px}.recent-card h2{padding:0}.recent-card #todayList>.dim{margin:0}

/* ── 13. Ansicht: Lohn / HR / Soll-Ist ─────────────────────────────────── */
.lohnhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lohnhead h2{margin:0;font-size:21px}
.lohnhead .pnr{font-size:12px;font-weight:800;color:var(--navy);background:var(--line2);padding:4px 10px;border-radius:var(--rpill)}
.lohnhead .tour{font-size:12px;font-weight:800;color:#fff;background:var(--navy);padding:4px 10px;border-radius:var(--rpill)}
.lohnhead .actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.staff-list-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.staff-list-heading h2{margin:0 0 4px}.staff-list-heading p{font-size:13px;color:var(--muted)}
.detail-toggle{display:flex;align-items:center;gap:10px;font-size:13px;min-height:44px;cursor:pointer;font-weight:600}
.staff-add{position:relative;font-size:13px}
.staff-add summary{display:flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ctl-border);border-radius:var(--r2);cursor:pointer;list-style:none;font-weight:700;color:var(--navy);background:var(--surface);white-space:nowrap}
.staff-add summary::-webkit-details-marker{display:none}
.staff-add summary:hover{background:var(--hover);border-color:var(--navy)}
.staff-add summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.staff-add summary::after{content:"＋";margin-inline-start:12px;font-size:16px}.staff-add[open] summary::after{content:"−"}
.staff-add>div{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:10;width:300px;max-width:calc(100vw - 64px);padding:18px;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 35px rgba(23,48,79,.14);background:var(--surface);display:grid;gap:10px}
.soll-box{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--r2);border:1px solid var(--line);margin-top:4px;line-height:1.5}
.soll-box.pos{background:var(--okbg);border-color:#bfe8cb}
.soll-box.neg{background:var(--warnbg);border-color:#f2dcae}
.soll-box .btn{white-space:nowrap}

/* ── 14. Ansicht: Anwesenheit (Depot-Tablet) ───────────────────────────── */
.depot-switch{display:flex;gap:6px;background:var(--line2);padding:5px;border-radius:10px;margin-bottom:28px}
.depot-btn{flex:1;min-height:56px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:17px;font-weight:800;cursor:pointer;transition:background .15s,color .15s}
.depot-btn:hover{color:var(--navy)}
.depot-btn.on{background:var(--navy);color:#fff}
.depot-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.anw-grid{grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:16px}
.anw-grid select,.anw-grid input{font-size:17px;min-height:56px}
.signature-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.signature-heading span{font-size:12px;color:var(--muted)}
.sigwrap{margin:26px 0}.sigwrap .eyb{margin-bottom:12px}.sigwrap .row{margin-top:10px}
.sigpad{display:block;width:100%;max-width:100%;height:210px;background:#fbfcfe;border:2px dashed #c3cfdc;border-radius:10px;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;margin-bottom:8px}
.sigpad:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
#anwSave{width:100%;font-size:17px;min-height:56px}
#anwNotice{font-size:14px;max-width:65ch}

/* ── 15. Dialoge & Hinweise ────────────────────────────────────────────── */
.workspace-notice{position:fixed;bottom:24px;inset-inline-end:24px;z-index:100;max-width:min(520px,calc(100vw - 32px));display:flex;align-items:flex-start;gap:18px;
 background:var(--navy);color:#fff;border-radius:10px;padding:18px 20px;box-shadow:0 8px 30px rgba(23,48,79,.25);font-size:14px;white-space:pre-line}
.workspace-notice button{flex-shrink:0;border:0;background:transparent;color:#fff;min-width:44px;min-height:44px;margin:-10px -10px -10px 0;cursor:pointer;font-size:18px;border-radius:var(--r2)}
.workspace-notice button:focus-visible{outline:3px solid #fff;outline-offset:-4px}
dialog.workspace-dialog,#advanceDialog{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 40px);overflow:auto;width:min(520px,calc(100vw - 32px));padding:30px;
 border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:0 24px 70px rgba(16,34,56,.25)}
dialog::backdrop{background:rgba(19,37,61,.4);backdrop-filter:blur(3px)}
#workspaceDialogLabel{display:block;white-space:pre-line;font-size:14px;line-height:1.7;margin:0 0 12px;font-weight:500}
#workspaceDialogInput{display:block;width:100%;font-size:16px;min-height:48px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}
#advanceDialog{width:min(680px,calc(100vw - 32px))}#advanceDialog h2{font-size:22px;margin:0}
#advanceDialog label{display:flex;flex-direction:column;gap:8px}
#advanceDialog select,#advanceDialog input{width:100%;min-width:0;min-height:48px;font-size:16px}
#advanceDialog .fgrid{grid-template-columns:1fr 1fr;margin:22px 0}
#advanceError{color:var(--bad);font-weight:600}#advanceError:empty{display:none}
#advancePreview{font-weight:700;padding:16px;background:var(--line2);border-radius:10px;margin-bottom:12px}#advancePreview:empty{display:none}

/* ── 16. Anmeldung ─────────────────────────────────────────────────────── */
#gate{position:relative;min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0;background:var(--canvas);overflow:auto}
.gate-story{align-self:stretch;min-height:100dvh;padding:56px clamp(30px,6vw,100px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:#e8eff5;color:var(--navy);border-inline-end:1px solid var(--line);overflow:hidden}
.gate-brand{display:flex;align-items:center;gap:16px;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.7}
.brand-mark{display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;border-radius:9px;width:58px;height:50px;font-size:21px;letter-spacing:-.07em}
.gate-brand small{font-weight:500;letter-spacing:0;color:var(--muted)}
.gate-story h1{font-size:clamp(46px,5vw,76px);max-width:9ch;font-weight:800;line-height:1.07;letter-spacing:-.05em;margin:18px 0 22px;white-space:pre-line}
.gate-story>div>p:last-child{font-size:17px;line-height:1.65;max-width:34ch;color:var(--muted)}
.gate-route{color:var(--blue);max-width:430px}.gate-route svg{width:100%;max-height:130px}.gate-route circle{fill:#e8eff5;stroke:currentColor;stroke-width:2}
#gate .gate-foot{font-size:11px;color:var(--muted);margin:0}
#gate .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:36px;max-width:440px;width:calc(100% - 48px);margin:40px auto;text-align:start;box-shadow:var(--sh)}
#gate .box h2{font-size:28px;line-height:1.2;letter-spacing:-.035em;margin:26px 0 10px}
#gate .box>p{font-size:14px;color:var(--muted);margin-bottom:24px}
.gate-form-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
#langselGate{font-size:13px;min-height:40px;padding-block:4px;background:var(--surface)}
#gate .localform{display:flex;flex-direction:column;gap:7px}
#gate .localform label{font-size:13px;color:var(--muted);font-weight:700;margin-top:8px}
#gate .localform input{width:100%;min-height:48px;font-size:16px}
#gate .localform .btn{margin-top:12px}
#gate .localform .btn,#gate #loginBtn{min-height:48px;font-size:15px;width:100%}
#gate .divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:600;margin:22px 0 10px}
#gate .divider::before,#gate .divider::after{content:"";flex:1;height:1px;background:var(--line)}
#gate .note{font-size:12px;line-height:1.7}
#gatemsg:empty{display:none}

/* ── 17. Responsive ────────────────────────────────────────────────────── */
@media(min-width:1500px){#view-anwesenheit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}.anw-grid{grid-template-columns:1fr 1fr}.anw-grid label:last-child{grid-column:1/-1}}
@media(min-width:1700px){main{margin-inline-end:auto}}
@media(min-width:761px){
 /* Desktop: Listen als Scrollbox, Kopfzeilen bleiben sichtbar */
 #hrTable>div,#lohnTable,#userTable,#gehaltTable,#dokAll,#monTable,#todayList{max-height:max(420px,calc(100dvh - 220px))}
 body:has(#demobar[style*="block"]) #tabs{min-height:calc(100dvh - 124px)} /* Seitenleiste: Demobar (44px) sichtbar */
}
@media(max-width:1180px){
 body.signed-in{grid-template-columns:208px minmax(0,1fr)}#tabs{width:208px;padding-inline:12px}
 main{padding:28px 24px 50px}#hdr .who{gap:8px}.workspace-date{display:none}
 .entry-layout{grid-template-columns:1fr}.entry-summary{position:static}
 .entry-summary dl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.entry-summary dl>div{padding:12px 0}.entry-summary>.note{max-width:none}
 .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 body.signed-in{display:block}
 /* Kompakter Kopf (~100px): Logo-Zeile + Konto-Zeile */
 #hdr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"logo logo logo logo lang" "dot name role pw out";align-items:center;gap:6px 8px;min-height:0;padding:8px 16px}
 #hdr>div:first-child{grid-area:logo;min-width:0}
 #hdr .logo{font-size:18px}#hdr .logo::before{height:20px}
 #hdr .sub,#syncLabel{display:none}
 #hdr .who{display:contents}
 #langsel{grid-area:lang;min-height:40px;font-size:13px;padding:2px 28px 2px 10px;max-width:140px}
 .connection{grid-area:dot}
 #whoName{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
 #whoRole{grid-area:role}
 #hdr #pwBtn{grid-area:pw;width:40px;padding:0;justify-content:center;border-color:var(--ctl-border)}
 #pwBtn .btn-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 #logoutBtn{grid-area:out}
 #hdr .who .btn{min-height:40px;padding:0 12px;font-size:13px}
 #hdr .who .btn .ic{width:16px;height:16px;margin:0}
 /* Drawer-Navigation (Verwaltung) */
 body.signed-in .mobile-navigation{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:45;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 16px}
 #mobileMenu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--ctl-border);border-radius:var(--r2);background:var(--surface);color:var(--navy);font-size:14px;font-weight:700;cursor:pointer}
 #mobileMenu:hover{background:var(--hover);border-color:var(--navy)}
 #mobileMenu:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
 #mobileCurrent{margin-inline-start:auto;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--rpill);background:#e7effc;color:var(--navy);font-size:13px;font-weight:700;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis}
 body.signed-in #tabs{display:none;position:fixed;inset-block:0;inset-inline-start:0;width:min(300px,86vw);height:100dvh;overflow-y:auto;padding:24px 18px;z-index:80;min-height:0;box-shadow:12px 0 40px rgba(23,48,79,.18);border:0}
 body.menu-open #tabs{display:flex}
 body.menu-open #menuBackdrop{display:block;position:fixed;inset:0;width:100%;height:100dvh;background:rgba(16,34,56,.45);border:0;z-index:75}
 #tabs button{font-size:15px;min-height:50px}
 /* Bottom-Tab-Bar (Mitarbeiter / Depot-Tablet), rein aus #tabs gebaut */
 body[data-workspace-role=worker] .mobile-navigation,body[data-workspace-role=tablet] .mobile-navigation{display:none}
 body[data-workspace-role=worker] #tabs,body[data-workspace-role=tablet] #tabs{display:flex;flex-direction:row;align-items:stretch;gap:0;position:fixed;top:auto;bottom:0;inset-inline:0;width:100%;min-height:0;height:calc(56px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);z-index:60;border:0;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(23,48,79,.08)}
 body[data-workspace-role=worker] #tabs .nav-brand,body[data-workspace-role=worker] #tabs .nav-label,body[data-workspace-role=worker] #tabs .nav-bottom,
 body[data-workspace-role=tablet] #tabs .nav-brand,body[data-workspace-role=tablet] #tabs .nav-label,body[data-workspace-role=tablet] #tabs .nav-bottom{display:none}
 body[data-workspace-role=worker] #tabs .nav-group,body[data-workspace-role=tablet] #tabs .nav-group{display:contents}
 body[data-workspace-role=worker] #tabs button,body[data-workspace-role=tablet] #tabs button{flex:1 1 0;width:auto;min-width:0;flex-direction:column;justify-content:center;gap:4px;min-height:56px;padding:6px 4px;border-radius:0;font-size:11px;font-weight:700;color:var(--muted);text-align:center}
 body[data-workspace-role=worker] #tabs button svg,body[data-workspace-role=tablet] #tabs button svg{width:22px;height:22px}
 body[data-workspace-role=worker] #tabs button.on,body[data-workspace-role=tablet] #tabs button.on{background:transparent;color:var(--blue);box-shadow:inset 0 3px var(--blue)}
 body[data-workspace-role=worker] #tabs button:focus-visible,body[data-workspace-role=tablet] #tabs button:focus-visible{outline-offset:-3px}
 body[data-workspace-role=worker] main,body[data-workspace-role=tablet] main{padding-bottom:96px}
 body[data-workspace-role=worker] .workspace-notice,body[data-workspace-role=tablet] .workspace-notice{bottom:calc(72px + env(safe-area-inset-bottom))}
 /* Inhalt */
 main{padding:20px 16px 44px}
 .workspace-heading{margin-bottom:20px}.workspace-heading h1{font-size:26px;margin-bottom:6px}.workspace-heading p:last-child{font-size:13px}
 .card{padding:18px 16px;border-radius:12px}.card>.row>.row{width:100%}.card>.row>.row input.search{flex:1;width:100%;min-width:150px}.card>.row>.row select{max-width:100%}
 .btn{min-height:48px}.btn.sm{min-height:40px}.iconbtn{width:40px;height:40px}
 input,select,textarea{min-height:48px;font-size:16px} /* 16px verhindert iOS-Zoom */
 .form{gap:14px}.form label{flex-basis:calc(50% - 14px)}
 .search{width:100%}
 .list-tools{gap:8px}.list-tools input{max-width:none}.list-count{font-size:11px}
 th,td{padding:12px}
 .entry-form{padding:0}.entry-heading,.formsec,.saverow{padding:20px 16px}.fgrid{gap:16px 12px}.entry-heading h2{font-size:17px}.required-note{font-size:11px}
 .entry-summary{padding:20px}.entry-summary dl{gap:12px}.entry-summary dd{font-size:24px}
 .entry-jumps{gap:6px}.entry-jumps button{flex:1;padding:0 8px;gap:6px;font-size:12px;justify-content:center}.entry-jumps button>span:first-child{width:20px;height:20px;flex-shrink:0}
 .saverow{gap:14px}.saverow .btn.big{width:100%}.formsec{scroll-margin-top:78px}.entry-notice{margin:16px}
 .staff-list-heading{align-items:flex-start;gap:12px}.staff-add>div{inset-inline-start:0;inset-inline-end:auto}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:14px 16px}
 .lohnhead h2{font-size:18px}.lohnhead .actions{margin-inline-start:0;width:100%}
 .anw-grid{grid-template-columns:1fr}.anw-grid label:last-child{grid-column:auto}.sigpad{height:200px}.depot-btn{min-height:54px;font-size:16px}
 #gate{display:block}.gate-story{min-height:0;padding:28px 24px;gap:22px;border:0;border-bottom:1px solid var(--line)}.gate-story h1{font-size:38px;max-width:none;margin:0 0 12px;white-space:normal}.gate-story>div>p:last-child{font-size:14px;max-width:none}.gate-brand{font-size:10px}.gate-route,.gate-foot,.gate-story .overline{display:none}
 #gate .box{width:calc(100% - 32px);padding:24px;margin:24px auto 40px;max-width:440px}#gate .box h2{font-size:26px;margin-top:22px}
 #advanceDialog,.workspace-dialog{padding:24px}#advanceDialog .fgrid{grid-template-columns:1fr}.workspace-notice{bottom:16px;inset-inline-end:16px;font-size:13px}
 #demobar{padding:6px 12px;font-size:11px}#demobar label{font-size:11px}
 /* Karten statt Zeilen (generisches Muster für Listen auf dem Telefon) */
 table.cards-phone,table.cards-phone tbody,table.cards-phone tr,table.cards-phone td{display:block}
 table.cards-phone{min-width:0}
 table.cards-phone thead{display:none}
 table.cards-phone tr{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:10px;background:var(--surface)}
 table.cards-phone td{border:0;padding:4px 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;text-align:start;white-space:normal}
 table.cards-phone td[data-lbl]::before{content:attr(data-lbl);color:var(--muted);font-size:12px;font-weight:600;flex:none}
 table.cards-phone td.card-title{display:block;font-size:16px;font-weight:800;color:var(--navy);padding-bottom:6px;border-bottom:1px solid var(--line2);margin-bottom:6px}
 table.cards-phone td.card-hide,table.cards-phone td.chev{display:none}
 table.cards-phone td.card-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:8px}
 table.cards-phone tr.click{min-height:48px}
 table.cards-phone tr.click:hover{background:var(--rowhover);border-color:#c9d8ef}
 table.cards-phone tr.click:hover td{background:transparent;box-shadow:none}
 table.cards-phone tr.click:active{background:#e3ecfa}
 table.cards-phone tr.sumrow{background:#fafbfd;border-color:var(--line)}table.cards-phone tr.sumrow td{border-top:0}
}
@media(max-width:430px){.entry-jumps button{padding:0 6px}.entry-jumps button>span:first-child{display:none}}
@media(max-width:380px){.fgrid{grid-template-columns:1fr}#mUserWrap{grid-column:auto}.form label{flex-basis:100%}.entry-summary dl{grid-template-columns:1fr}.entry-summary dl>div{display:flex;justify-content:space-between;align-items:center}.kpis{grid-template-columns:1fr}}

/* ── 18. RTL, Motion, Druck ────────────────────────────────────────────── */
html[lang="ar"] .entry-summary dt,html[lang="ar"] .entry-progress,html[lang="ar"] .required-note{font-size:12px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
 body{background:#fff;display:block}body.signed-in{display:block}
 #hdr,#tabs,#demobar,#syncBanner,.mobile-navigation,#menuBackdrop,.skip-link,#gate,.workspace-heading,.entry-summary,.entry-jumps,.list-tools,.staff-list-heading,.workspace-notice,.nav-bottom,dialog,.actions,.search,button,#lohnKpis,.anw-card,.depot-switch{display:none!important}
 main{max-width:none;margin:0;padding:0}
 .card,.kpi{box-shadow:none;border-color:#ccc}.card{border:0;padding:0}.kpi{break-inside:avoid}
 .entry-layout{display:block}#view-anwesenheit{display:block}
 th{position:static}
 #hrTable>div,#lohnTable,#userTable,#gehaltTable,#dokAll,#monTable,#todayList{max-height:none;overflow:visible}
 #hrTable:not(.show-accounting)>div>table tr>*{display:table-cell!important}#hrTable>div>table tr>:nth-child(2){position:static}#hrTable>div>table{min-width:0}
 .sig-thumb{height:30px}
}

/* ==== worker-flow (agent B) ==== */
/* Login-Gate: Fahrer-Formular zuerst, Passwort-Auge, Fehlerbox unter dem Knopf */
#gate .localform{gap:8px}
#gate .localform label{margin-top:6px}
#gate .pw-wrap{position:relative}
#gate .pw-wrap input{padding-inline-end:52px}
#gate #pwToggle{position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--dim);cursor:pointer;padding:0}
#gate #pwToggle.on{color:var(--blue);border-color:var(--blue)}
#gate #pwToggle .ic{width:18px;height:18px}
#gate .localform .btn.orange{margin-top:6px}
#gate #gatemsg{margin:0}
#gate #gatemsg:not(:empty){margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--badbg);color:#a12828;font-weight:600}
#gate #loginBtn{background:#fff;color:var(--navy);border:1px solid var(--line)}
#gate #loginBtn:hover{background:#f0f4f8}
#gate .divider{margin:22px 0 12px}
/* Tagesbericht: Checkbox „nicht getankt“, Inline-Fehler, Fortschritt in der Speichern-Leiste */
.fgrid label.check{display:flex;flex-direction:row;align-items:center;gap:10px;grid-column:1/-1;min-height:0;cursor:pointer;font-size:14px;color:var(--txt)}
.fgrid label.check input{width:22px;height:22px;min-height:0;padding:0;margin:0;accent-color:var(--orange);flex:0 0 auto}
.fgrid input:disabled{background:#f3f5f8;color:var(--dim2)}
.formsec .pause-note{margin:14px 0 0}
.fgrid label[data-error]{color:var(--bad)}
.fgrid label[data-error]::after{content:attr(data-error);font-size:12px;font-weight:600;color:var(--bad);line-height:1.4}
.saverow{flex-wrap:wrap}
.saverow .entry-progress{flex:1 1 100%;display:flex;align-items:center;gap:12px;padding:0;margin:0 0 6px;font-size:11px;color:var(--dim);font-weight:700}
.saverow .entry-progress progress{flex:1;margin:0;height:4px}
.saverow .entry-progress span{white-space:nowrap}
.card-tour,.lbl-phone{display:none}
#view-erfassen .ic,#view-beschw .ic{width:16px;height:16px;flex:0 0 auto}
#todayList .btn.sm,#beschwList .btn.sm{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
/* Meine Dokumente: eine Zeile = ein Tipp-Ziel */
.doc-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.doc-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:0;border-bottom:1px solid var(--line2);background:#fff;color:var(--txt);font:inherit;font-size:14px;text-align:start;cursor:pointer}
.doc-row:last-child{border-bottom:0}
.doc-row:hover{background:#f3f7fd}
.doc-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.doc-row .doc-badge{background:#eef2f8;color:var(--navy);flex:0 0 auto}
.doc-row .doc-month{color:var(--dim);white-space:nowrap;flex:0 0 auto}
.doc-row .doc-month:empty{display:none}
.doc-row .doc-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.doc-row .doc-open{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:13px;white-space:nowrap;margin-inline-start:auto}
.doc-row .doc-open .ic{width:16px;height:16px}
/* Beschwerden */
#view-beschw .form>button{min-height:48px}
@media(max-width:760px){
 .entry-jumps{display:none}
 .entry-layout{display:flex;flex-direction:column}
 .entry-form{overflow:visible}
 .entry-summary{position:static;order:0;margin:0;padding:12px 18px;border:0;border-top:1px solid var(--line);border-radius:0;background:#f8fafc}
 .entry-summary h2,.entry-summary>.overline,.entry-summary>.note,.entry-summary .summary-link{display:none}
 .entry-summary dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
 .entry-summary dl>div{border:0;padding:0;display:block;min-width:0}
 .entry-summary dt{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .entry-summary dd{font-size:18px;margin-top:2px;white-space:nowrap}
 .saverow{position:sticky;bottom:0;z-index:30;background:#fff;padding:12px 16px;box-shadow:0 -8px 20px -12px rgba(11,31,58,.35);border-top:1px solid var(--line);border-radius:0 0 10px 10px;gap:0}
 .saverow .btn.big{width:100%;min-height:52px;font-size:16px}
 .saverow .entry-progress{margin:0 0 8px}
 .card-tour{display:inline;font-weight:500;color:var(--dim)}
 .lbl-phone{display:inline}
 #view-beschw .form>button{width:100%}
 #gate .box{margin:12px auto 32px;padding:20px}#gate .box h2{margin:18px 0 8px;font-size:24px}
}
@media(max-width:420px){
 #dailyForm .fgrid{grid-template-columns:1fr 1fr}
 #dailyForm .fgrid>label{grid-column:1/-1}
 #dailyForm .fgrid>label.tw{grid-column:auto}
}
/* ==== /worker-flow ==== */

/* ==== admin-org (agent D) ==== */
/* Benutzer: Personenliste links, Personen-Panel rechts (≥1180px) bzw. darunter */
#view-benutzer .sr,#view-dokumente .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.people-col{min-width:0}
#userTable table{min-width:0;width:100%}
.people-table th,.people-table td{padding:11px 9px}
.people-table td.card-title b{white-space:nowrap}
.people-table .stat{white-space:nowrap}
.people-table td.login-cell .stat{display:inline-block;margin-top:4px}
.login-cell .ic{vertical-align:-3px;color:var(--dim);margin-inline-end:4px}
.login-id{font-variant-numeric:tabular-nums;white-space:nowrap}
.people-table .subname{display:block}
.people-table tr.on td{background:#fff5ee}
.people-table tr.on td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
.people-table td.card-actions{white-space:nowrap;text-align:end}
.stat.role{background:#eef2f8;color:var(--navy)}
#view-benutzer .staff-add{margin-bottom:16px}
#view-benutzer .staff-add summary{gap:8px;background:white;border-radius:var(--r);padding:14px 20px;min-height:52px;font-size:14px}
#view-benutzer .staff-add summary::after{content:none}
#view-benutzer .staff-add .sum-chev{margin-inline-start:auto;transition:transform .15s}
#view-benutzer .staff-add[open] summary{border-radius:var(--r) var(--r) 0 0}
#view-benutzer .staff-add[open] .sum-chev{transform:rotate(180deg)}
#view-benutzer .staff-add>div{position:static;width:auto;max-width:none;padding:4px 20px 20px;box-shadow:none;border-radius:0 0 var(--r) var(--r);border-top:0;display:block}
#view-benutzer .staff-add .form{margin:14px 0}
#view-benutzer .staff-add .note{margin-top:4px}
.tour-form label{flex:0 1 200px}
.tour-chips{display:flex;flex-wrap:wrap;gap:8px}
.tour-chip{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 6px 0 12px;border:1px solid var(--line);border-radius:8px;background:#f6f8fb;font-weight:700;font-variant-numeric:tabular-nums}
.tour-chip .iconbtn{width:28px;height:28px;min-height:0;min-width:0;color:var(--dim)}
.tour-chip .iconbtn:hover{color:var(--bad)}
.person-panel{padding:0;overflow:hidden}
.person-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 22px 12px}
.person-head h2{margin:0 0 6px;font-size:20px}
.person-id{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--txt)}
.person-id .ic{color:var(--dim)}
.person-hr{margin:0 22px 10px}
.person-facts{margin:0;padding:0 22px}
.person-facts>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line2)}
.person-facts dt{font-size:12px;font-weight:650;color:var(--dim)}
.person-facts dd{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;font-size:13.5px}
.person-facts select{min-height:40px;padding:6px 10px;font-size:13px;max-width:100%}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-block;padding:3px 9px;border-radius:99px;background:#eef2f8;color:var(--navy);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.person-facts .check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;cursor:pointer}
.person-actions{display:flex;flex-wrap:wrap;gap:10px;padding:14px 22px 20px;border-top:1px solid var(--line2)}
.person-panel .doc-panel{border-top:1px solid var(--line);background:#fbfcfe}
.person-panel .doc-panel .formsec{padding:16px 22px}
.person-panel .doc-list{padding:16px 22px 22px}
@media(min-width:1180px){
 #view-benutzer.person-open{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
 #view-benutzer.person-open .person-panel{position:sticky;top:24px;max-height:calc(100dvh - 48px);overflow-y:auto}
}
@media(min-width:1180px) and (max-width:1600px){
 #view-benutzer.person-open .people-table tr>:nth-child(3),#view-benutzer.person-open .people-table tr>:nth-child(4),#view-benutzer.person-open .doc-word{display:none}
 #view-benutzer.person-open .people-table th,#view-benutzer.person-open .people-table td{padding:10px 7px}
}
@media(max-width:480px){.person-facts>div{grid-template-columns:1fr;gap:4px}.person-head{flex-direction:column}}
/* Dokumente: Formular zuerst, drei nummerierte Schritte, Ablagezone */
.doc-card h2{margin-bottom:6px}
.doc-intro{margin:0 0 14px}
.doc-person{margin:0}
.doc-person label{flex:0 1 380px}
.doc-steps .formsec{padding:22px 0;border-bottom:1px solid var(--line)}
.doc-steps .eyb{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:14px}
.doc-steps .step-number{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;flex-shrink:0;letter-spacing:0}
.doc-steps .form{margin:0}
.doc-steps .form label{flex:0 1 260px}
.doc-steps .note{margin:12px 0 0}
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:120px;padding:20px;border:2px dashed #b9c6d6;border-radius:12px;background:#f8fafc;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--blue);background:#eef4fd}
.dropzone:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.dz-idle{display:flex;flex-direction:column;align-items:center;gap:6px}
.dz-idle .ic{width:28px;height:28px;color:var(--blue)}
.dz-main{font-weight:700;font-size:15px;color:var(--txt)}
.dz-sub{font-size:12px;color:var(--dim)}
.dz-file{display:none;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--ok);word-break:break-all}
.dz-file .ic{width:20px;height:20px;color:var(--ok)}
.dz-other{display:none}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0}
#userTable .btn,#userTable .btn>*{white-space:nowrap}#userTable .btn{flex-wrap:nowrap}
.dropzone.has-file{border:2px solid var(--ok);background:var(--okbg)}
.dropzone.has-file .dz-idle{display:none}
.dropzone.has-file .dz-file{display:inline-flex}
.dropzone.has-file .dz-other{display:inline-flex;margin-top:4px}
.doc-step-3 .btn.big{width:100%}
.doc-steps.off{opacity:.55;pointer-events:none}
.doc-steps.off .step-number{background:#cbd5e1}
.doc-steps.off .dropzone{cursor:default}
.note.doc-ok{padding:14px 16px;background:var(--okbg);border:1px solid #bfe8cb;border-radius:9px;color:var(--ok);font-weight:600;max-width:none;display:flex;gap:8px;align-items:flex-start}
.note.doc-ok .ic{flex-shrink:0;width:18px;height:18px;margin-top:2px}
.doc-list{padding-top:22px}
.doc-list h3{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:15px}
.doc-list h3 .ic{color:var(--dim)}
.doc-name{word-break:break-word}
.doc-table td.card-actions{white-space:nowrap}
.doc-all td.card-title .linkbtn{font-weight:700}
.tablewrap{max-width:100%;overflow-x:auto}
#dokAll table{min-width:0}
tr.new td{background:#fdf1e6!important;transition:background .6s}
/* Anwesenheit: Fingerbedienung (Tablet 1280×800), Kacheln, Unterschrift, Bestätigung */
.anw-grid{align-items:start}
.anw-pick{display:flex;flex-direction:column;gap:10px;min-width:0}
.anw-lbl{font-size:13px;font-weight:600}
.anw-driver-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:min(48vh,440px);overflow-y:auto;padding:2px;scrollbar-gutter:stable}
.anw-tile{min-height:64px;padding:8px 12px;font:inherit;font-size:18px;font-weight:700;line-height:1.2;border:2px solid var(--line);border-radius:10px;background:white;color:var(--txt);cursor:pointer;text-align:center;touch-action:manipulation;transition:border-color .12s,background .12s}
.anw-tile:hover{border-color:#9fb3cc}
.anw-tile.on{background:var(--navy);border-color:var(--navy);color:white}
.anw-tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.anw-kfz-strip{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:minmax(140px,max-content);gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.anw-kfz-strip .anw-tile{scroll-snap-align:start;white-space:nowrap;font-variant-numeric:tabular-nums}
.anw-grid .anw-fallback{font-size:12px;color:var(--dim);font-weight:600}
.anw-grid .anw-fallback select{min-height:44px;font-size:15px}
.anw-km-hint{display:block;font-size:12px;font-weight:500;color:var(--dim);min-height:1.4em}
.sigframe{position:relative}
.sigframe .sigpad{border:3px solid #c3cfdc;background:#fff;height:220px;margin:0}
.sig-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:22px;font-weight:700;color:#c3cfdc;letter-spacing:.02em}
.sigframe.signed .sig-watermark{display:none}
.sig-actions{justify-content:space-between;margin-top:10px}
#anwNotice{margin:0}
#anwNotice.warn{color:var(--bad)}
#anwNotice:empty{display:none}
.anw-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:320px;padding:32px;border-radius:12px;background:var(--okbg);border:2px solid #9fdcb3;color:var(--ok);text-align:center}
.anw-done[hidden]{display:none}
.anw-done>.ic{width:48px;height:48px}
.anw-done-title{font-size:26px;font-weight:800}
.anw-done-text{font-size:18px;font-weight:600;color:var(--txt);margin-bottom:8px}
#anwTable .iconbtn:hover{color:var(--bad)}
@media(min-width:1000px){
 .anw-grid{grid-template-columns:1.4fr 1fr .8fr}
 .anw-grid>label:last-child{grid-column:auto}
 .sigframe .sigpad{height:clamp(200px,32vh,300px)}
 #anwSave{position:sticky;bottom:12px;z-index:5;box-shadow:0 8px 24px -8px rgba(11,31,58,.4)}
}
body[data-workspace-role=tablet] .workspace-heading{display:none}
body[data-workspace-role=tablet] .card{padding:16px 18px;margin-bottom:14px}
body[data-workspace-role=tablet] .depot-switch{margin-bottom:16px}
body[data-workspace-role=tablet] #view-anwesenheit .list-tools,body[data-workspace-role=tablet] #view-anwesenheit .filter-empty,body[data-workspace-role=tablet] #anwKfzBtn{display:none!important}
@media print{.anw-done,.dropzone,.doc-step-3{display:none!important}}
/* ==== /admin-org ==== */

/* ==== hr (agent C) ==== */
/* Übersicht */
#hrTable:not(.show-accounting) [data-col=acct]{display:none}
.hr-scroll{overflow-x:auto;max-width:100%;scrollbar-width:thin}
@media(min-width:641px){
 #hrTable .hr-scroll table{min-width:900px}
 #hrTable.show-accounting .hr-scroll table{min-width:1320px}
 #hrTable .hr-scroll tr>:first-child{position:sticky;left:0;z-index:1;background:#fff;min-width:170px;box-shadow:1px 0 var(--line)}
 #hrTable .hr-scroll thead th:first-child{background:#f3f6f9}
 #hrTable .hr-scroll tr.click:hover>:first-child{background:#fff5ee}
}
#hrTable td .subname{display:block}
#hrTable td small{font-size:10px;font-weight:600}
#hrTable td.chev,#hrTable th.chev{width:28px;text-align:end;padding-inline:6px}
#hrTable td.chev .ic{color:var(--dim2)}
.hr-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hr-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hr-month{display:inline-flex;align-items:center;gap:4px}
.hr-month b{min-width:150px;text-align:center;font-size:15px;color:var(--navy)}
.hr-month .btn.sm{min-width:40px;padding-inline:8px}
.ic.flip{transform:scaleX(-1)}
.hr-unlinked{margin-top:18px;font-size:13px}
.hr-unlinked>summary{cursor:pointer;font-weight:700;color:var(--navy);min-height:44px;display:flex;align-items:center}
.hr-unlinked .note{margin:0 0 10px}
.hr-unlinked-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.hr-unlinked-list span{background:#f1f3f6;border-radius:99px;padding:4px 10px;font-size:12px;color:var(--dim)}
/* Akte */
#hrDetail .filebtn{position:relative}                     /* versteckter Datei-Input darf die Seite nicht verbreitern */
.hr-akte-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.hr-akte-id{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.hr-akte-id h2{margin:0;font-size:22px}
.hr-akte-id .subname{display:inline;margin:0;font-size:13px}
.hr-akte-meta{margin:0 0 18px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.hr-akte-meta select{min-height:38px;padding:6px 10px;font-size:13px;max-width:100%}
.hr-soll{border-inline-start-color:var(--navy);scroll-margin-top:16px}
.hr-tiles{margin-bottom:14px}
.hr-tiles .kpi.diff .val{font-size:34px}
.hr-tiles .kpi.k-pos .val{color:var(--ok)}
.hr-tiles .kpi.k-neg .val{color:var(--bad)}
.soll-box{align-items:center}
.soll-box.done{background:#e6f6ec;border-color:#bfe8cb}
.soll-main{flex:1 1 320px;min-width:0;display:grid;gap:8px}
.soll-big{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--navy);display:flex;align-items:center;gap:8px}
.soll-box.neg .soll-big{color:var(--bad)}.soll-box.pos .soll-big,.soll-box.done .soll-big{color:var(--ok)}
.soll-sub{font-size:13px;color:var(--txt);display:flex;flex-wrap:wrap;align-items:center;gap:0 5px}
.soll-sub .ic{color:var(--ok)}
.azk-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:#e4e9f0;max-width:420px}
.azk-bar .seg.booked{background:var(--ok)}.azk-bar .seg.open{background:var(--orange)}
.daychips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.daychip{border:1px solid #f6d3b8;background:#fff;color:#a8302e;border-radius:99px;padding:4px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;min-height:0}
.daychip:hover{background:#fdeceb}
.soll-alt{display:grid;gap:6px;justify-items:start;font-size:13px}
.soll-nope{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--bad)}
.hr-soll>.note{margin-top:10px}
.hr-actions{display:grid;gap:10px;margin:14px 0 18px}
.hr-actions-main,.hr-actions-more{display:flex;flex-wrap:wrap;gap:8px}
.hr-range{border-inline-start-color:var(--orange)}
.hr-lohn .fgrid label{min-width:0}
.hr-lohn .fgrid label>span:first-child{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.hr-lohn .fgrid label.full{grid-column:1/-1}
.hr-lohn input[readonly]{background:#f3f5f8;color:var(--dim)}
.hr-lohn .linkbtn{font-size:12px;margin-top:4px;align-self:start}
.hr-details{margin-top:16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.hr-details>summary{cursor:pointer;font-weight:700;color:var(--navy);padding:14px 16px;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.hr-details>summary::-webkit-details-marker{display:none}
.hr-details>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(-45deg);transition:transform .15s;flex-shrink:0;margin-inline-end:4px}
.hr-details[open]>summary::before{transform:rotate(45deg)}
.hr-details>:not(summary){padding:0 16px 16px}
.hr-details .hr-hist tr.today td{background:#eef2f8}
#hrDayDetails tr.flash td{background:#fff2e6}
@media(max-width:640px){
 .hr-akte-id h2{font-size:19px}
 .hr-month b{min-width:0;flex:1}
 .hr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hr-tiles .kpi.diff .val{font-size:26px}
 .soll-box{flex-direction:column;align-items:stretch}
 .soll-box .soll-main,.soll-box .soll-alt{flex:0 0 auto}
 .azk-bar{max-width:none}
 .soll-box .btn{white-space:normal}
 .hr-actions-main .btn{flex:1 1 45%}
 .hr-details .hr-hist [data-col=x]{display:none}
 .hr-details .hr-hist th,.hr-details .hr-hist td{padding:10px 8px}
 .hr-details>:not(summary){padding:0 10px 12px}
}
@media print{#hrTable:not(.show-accounting) [data-col=acct]{display:table-cell}.hr-details{border:0}.hr-details>summary::before{display:none}.hr-details>:not(summary){padding:0}}
/* ==== /hr ==== */

/* ==== payroll (agent E) ==== */
/* Toolbar: Monatswahl links, Aktionen rechts — eine gefüllte (orange) Aktion je Ansicht */
.pay-toolbar{padding:16px 20px}
.pay-toolbar .note{margin-top:12px}
.pay-toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pay-actions{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.pay-actions .btn,.pay-export,.lohnhead .actions .btn{display:inline-flex;align-items:center;gap:8px}
/* Monatswahl: segmentierte Gruppe ‹ Monat › + Heute */
.monthnav{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;max-width:100%}
.monthnav>button.btn{border:0!important;border-radius:0!important;box-shadow:none!important;min-height:44px;height:44px;background:#fff;color:var(--txt);transform:none!important}
.monthnav>button.btn:hover{background:#f0f4f8}
.monthnav>button.btn:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.monthnav .mn-prev,.monthnav .mn-next{width:44px;padding:0;display:grid;place-items:center}
.monthnav .mn-prev .ic{transform:rotate(180deg)}
.monthnav .ic{width:18px;height:18px}
.monthnav .mn-lbl{display:flex;align-items:center;justify-content:center;min-width:150px;padding:0 12px;font-size:15px;font-weight:700;border-inline:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.monthnav .mn-today{padding:0 12px;font-size:12px;font-weight:700;color:var(--dim);border-inline-start:1px solid var(--line)!important}
.monthnav .mn-today:hover{color:var(--txt)}
/* KPIs: fünf Kacheln in der Lohn-Übersicht, Unterzeile, klickbare Kachel = Filter */
.kpis.kpis-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi .sub{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.4;font-variant-numeric:tabular-nums}
.kpi .sub .pos,.kpi .sub .neg{font-weight:700}
.kpi .val .of{font-size:16px;color:var(--dim);font-weight:600;letter-spacing:0}
.kpi.click{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.kpi.click:hover{border-color:var(--navy)}
.kpi.click[aria-pressed=true]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.kpi.click:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Filter-Chips + Suchzeile über der Lohn-Tabelle */
#lohnFilter{margin-bottom:12px}
#lohnFilter:empty{display:none}
.fbtns button .n{opacity:.7;font-weight:600;margin-inline-start:4px;font-variant-numeric:tabular-nums}
.lohn-tools{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.lohn-tools .searchbox{position:relative;display:block;flex:1 1 200px;max-width:360px;min-width:0}
.lohn-tools .searchbox .ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim2);pointer-events:none}
.lohn-tools .searchbox input{width:100%;min-width:0;padding-inline-start:36px;border-radius:7px;background:#f9fbfd}
.lohn-tools .list-count{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.lohn-more{margin-top:12px;font-size:13px;color:var(--dim)}
/* Tabellen: Zahlen rechts, Kennungen tabellarisch, Zeile öffnet Tagesprotokoll */
.tablewrap{overflow-x:auto;max-width:100%}
#lohnTable th.num,#lohnTable td.num,#gehaltTable th.num,#gehaltTable td.num,#monTable th.num,#monTable td.num,#lohnDriver th.num,#lohnDriver td.num{text-align:end}
#lohnTable td.id,#gehaltTable td.id,#monTable td.id,#lohnDriver td.id{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dim)}
#lohnTable td.chev{width:36px;padding-inline:8px}
#lohnTable td.chev .ic{width:18px;height:18px;color:var(--dim2);vertical-align:middle}
#lohnTable td.num .src{font-size:11px;font-weight:600;margin-inline-start:4px}
#lohnTable td.num small{font-size:11px;font-weight:600}
#lohnTable .card-title .stat{margin-inline-start:6px;vertical-align:1px;white-space:nowrap}
.subname.phone{display:none}
#lohnTable tr.sumrow td,#gehaltTable tr.sumrow td,#lohnDriver tr.sumrow td{border-top:2px solid var(--line);font-weight:800;background:#fafbfd}
#lohnTable table th,#gehaltTable table th,#monTable table th,#lohnDriver table th{position:sticky;top:0;z-index:1}
#lohnDriver .lohnhead .stat{white-space:nowrap}
#lohnDriver .daytable tr.we td{background:#f7f9fc;color:#9aa7b8}
#lohnDriver .daytable tr.today td:first-child{font-weight:800;color:var(--blue)}
#lohnDriver .daytable td.day{color:var(--txt)}
#lohnDriver .daytable tr.we td.day{color:#9aa7b8}
/* Wochenende mit Einträgen (Samstag gearbeitet): Zeile bleibt getönt, Zahlen bleiben lesbar */
#lohnDriver .daytable tr.we:not(.empty) td,#monTable table.mondetail tr.we td{color:var(--txt)}
#lohnDriver .daytable tr.we:not(.empty) td.id,#monTable table.mondetail tr.we td.id,#lohnDriver .daytable tr.we:not(.empty) td.dim,#monTable table.mondetail tr.we td.dim{color:var(--dim)}
#lohnDriver .daytable tr.we:not(.empty) td.day,#monTable table.mondetail tr.we td.card-title{color:var(--txt)}
#lohnDriver .daytable td.notiz,#monTable td.notiz{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lohnDriver .note.warn{display:flex;gap:8px;align-items:flex-start}
#lohnDriver .note.warn .ic{flex-shrink:0;width:18px;height:18px}
/* Gehalt: Geldfelder mit €-Suffix im Rahmen, Warnzeile = 3px roter Balken links */
.money{position:relative;display:inline-block;width:120px;vertical-align:middle}
.money input{width:100%;min-height:40px;padding:6px 26px 6px 10px;text-align:end;font-variant-numeric:tabular-nums;font-size:14px;-moz-appearance:textfield;appearance:textfield}
.money input::-webkit-outer-spin-button,.money input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.money i{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13px;color:var(--dim);pointer-events:none}
#gehaltTable tr.warn>td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
#gehaltTable td.diff{font-variant-numeric:tabular-nums;white-space:nowrap}
#gehaltTable td.diff .ok{display:inline-flex;align-items:center;gap:4px}
#gehaltTable td.diff .ok .ic{width:16px;height:16px}
/* Monat (Mitarbeiter + Admin) */
#monTable .mon-h2{margin:0 0 14px}
#monTable table.mondetail tr.we td{background:#f7f9fc}
#monTable td.card-actions{text-align:end;width:52px}
#monTable td.von{font-size:11px}
#monTable .btn.danger.sm{min-height:36px;padding:6px 10px}
#monTable .btn.danger.sm .ic{width:16px;height:16px;vertical-align:middle}
@media(max-width:1100px){.kpis.kpis-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 .kpis.kpis-5{grid-template-columns:repeat(2,minmax(0,1fr))}
 #lohnTable table,#gehaltTable table,#monTable table,#lohnDriver table{min-width:0}
 .pay-toolbar{padding:14px}
 .pay-toolbar-row{gap:10px}
 .monthnav{width:100%}
 .monthnav .mn-lbl{flex:1;min-width:0;font-size:14px}
 .pay-actions{width:100%;margin:0}
 .pay-actions .btn{flex:1;justify-content:center}
 #view-monat .pay-export{width:100%;justify-content:center}
 #view-monat #monUser{width:100%}
 .lohn-tools{flex-wrap:wrap}
 .lohn-tools .searchbox{max-width:none;flex-basis:100%}
 .lohn-tools .list-count{margin-inline-start:0}
 .lohnhead .actions{width:100%;margin:0}
 .lohnhead .actions .btn{flex:1;justify-content:center}
 .subname.desk{display:none}
 .subname.phone{display:block}
 /* Karten statt Tabellenzeilen */
 #lohnTable table.cards-phone,#gehaltTable table.cards-phone,#monTable table.cards-phone,#lohnDriver table.cards-phone,
 #lohnTable table.cards-phone tbody,#gehaltTable table.cards-phone tbody,#monTable table.cards-phone tbody,#lohnDriver table.cards-phone tbody{display:block;width:100%}
 #lohnTable table.cards-phone tr,#gehaltTable table.cards-phone tr,#monTable table.cards-phone tr,#lohnDriver table.cards-phone tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff}
 #lohnTable table.cards-phone tr:has(th),#gehaltTable table.cards-phone tr:has(th),#monTable table.cards-phone tr:has(th),#lohnDriver table.cards-phone tr:has(th){display:none}
 #lohnTable table.cards-phone td,#gehaltTable table.cards-phone td,#monTable table.cards-phone td,#lohnDriver table.cards-phone td{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex:1 1 calc(50% - 7px);min-width:0;border:0;padding:0;font-size:13px;text-align:end;white-space:normal}
 #lohnTable table.cards-phone td[data-lbl]::before,#gehaltTable table.cards-phone td[data-lbl]::before,#monTable table.cards-phone td[data-lbl]::before,#lohnDriver table.cards-phone td[data-lbl]::before{content:attr(data-lbl);color:var(--dim);font-size:12px;font-weight:600;text-align:start;flex-shrink:0}
 #lohnTable table.cards-phone td:empty,#gehaltTable table.cards-phone td:empty,#monTable table.cards-phone td:empty,#lohnDriver table.cards-phone td:empty,
 #lohnTable table.cards-phone td.card-hide,#gehaltTable table.cards-phone td.card-hide,#monTable table.cards-phone td.card-hide,#lohnDriver table.cards-phone td.card-hide,
 #lohnTable table.cards-phone td.chev{display:none}
 #lohnTable table.cards-phone td.card-title,#gehaltTable table.cards-phone td.card-title,#monTable table.cards-phone td.card-title,#lohnDriver table.cards-phone td.card-title{display:block;flex:1 1 55%;font-size:15px;text-align:start;color:var(--txt);white-space:normal}
 #lohnTable table.cards-phone td.card-big,#gehaltTable table.cards-phone td.card-big,#monTable table.cards-phone td.card-big,#lohnDriver table.cards-phone td.card-big{display:block;flex:0 0 auto;margin-inline-start:auto;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
 /* Kopfzeile der Karte: Titel links, große Stundenzahl rechts — Rest darunter */
 #lohnTable table.cards-phone td.card-title,#gehaltTable table.cards-phone td.card-title,#monTable table.cards-phone td.card-title,#lohnDriver table.cards-phone td.card-title{order:-2}
 #lohnTable table.cards-phone td.card-big,#monTable table.cards-phone td.card-big,#lohnDriver table.cards-phone td.card-big{order:-1;align-self:flex-start}
 #lohnTable table.cards-phone td.card-big::before,#gehaltTable table.cards-phone td.card-big::before,#monTable table.cards-phone td.card-big::before,#lohnDriver table.cards-phone td.card-big::before{display:block;font-size:11px;text-align:end;font-weight:600;margin-bottom:2px}
 #lohnTable table.cards-phone td[colspan],#gehaltTable table.cards-phone td[colspan],#monTable table.cards-phone td[colspan],#lohnDriver table.cards-phone td[colspan],
 #lohnTable table.cards-phone td.notiz,#monTable table.cards-phone td.notiz,#lohnDriver table.cards-phone td.notiz,#monTable table.cards-phone td.card-actions{flex-basis:100%}
 #lohnTable table.cards-phone td.notiz:empty,#monTable table.cards-phone td.notiz:empty,#lohnDriver table.cards-phone td.notiz:empty{display:none}
 #lohnTable table.cards-phone tr.sumrow,#gehaltTable table.cards-phone tr.sumrow,#lohnDriver table.cards-phone tr.sumrow{background:#fafbfd;border-color:#cbd5e3}
 #lohnTable table.cards-phone tr.sumrow td,#gehaltTable table.cards-phone tr.sumrow td,#lohnDriver table.cards-phone tr.sumrow td{border-top:0}
 #lohnTable table.cards-phone tr.click:focus-visible{outline:2px solid var(--blue);outline-offset:0}
 #lohnTable .card-title .stat{display:inline-block;margin:4px 6px 0 0}
 /* Gehalt-Karte: Name, drei Geldfelder untereinander, Differenz */
 #gehaltTable table.cards-phone td{flex-basis:100%;align-items:center}
 #gehaltTable table.cards-phone tr.warn{border-inline-start:3px solid var(--bad)}
 #gehaltTable tr.warn>td:first-child{box-shadow:none}
 #gehaltTable .money{width:150px;max-width:60%}
 /* Tagesprotokoll-Karten: leere Tage als schmale Zeile */
 #lohnDriver table.cards-phone tr.empty{padding:6px 14px;margin-bottom:4px;background:transparent;border-color:transparent;gap:10px}
 #lohnDriver table.cards-phone tr.empty td.card-title{flex:0 0 auto;font-size:13px}
 #lohnDriver table.cards-phone tr.empty td[colspan]{flex:1 1 auto;text-align:start}
 #lohnDriver table.cards-phone tr.we{background:#f7f9fc}
 #lohnDriver table.cards-phone tr.we td,#lohnDriver .daytable tr.we td.day{background:transparent}
 #lohnDriver table.cards-phone tr.today,#monTable table.cards-phone tr.today{border-color:var(--blue)}
 #monTable table.cards-phone tr.we{background:#f7f9fc}
 #monTable table.cards-phone tr.we td{background:transparent}
 #monTable table.cards-phone td.card-actions{width:auto;justify-content:flex-end;flex-basis:100%}
}
@media print{.monthnav .mn-today,.lohn-tools,#lohnFilter,.lohn-more,.pay-actions{display:none!important}}
/* ==== /payroll ==== */

/* ==== merge fix: sticky save bar clears the worker bottom tab bar ==== */
@media(max-width:760px){
 body[data-workspace-role=worker] .saverow,body[data-workspace-role=tablet] .saverow{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 body[data-workspace-role=worker] .entry-layout{padding-bottom:8px}
}