@charset "UTF-8";
:root{font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif;font-size:100%;color:var(--text);background:var(--bg);font-synthesis:none;color-scheme:light dark;--green:#258976;--bg:#f5f7fb;--surface:#fff;--surface-2:#fafbfd;--surface-3:#f7f9fd;--surface-tint:#f1f5fb;--accent-soft:#edf2fc;--surface-press:#e8edf6;--line:#e7ebf2;--line-strong:#d5dce5;--control-border:#dce2ed;--control-border-strong:#73839c;--dot-neutral:#c7cedc;--text:#253349;--ink:#1e2b43;--text-2:#3b4962;--text-soft:#57647a;--muted:#4e5b6e;--muted-2:#5f6e83;--blue:#4668db;--blue-hover:#3656be;--blue-press:#2f4bb0;--accent-text:#3a56b8;--accent-light:#728bee;--accent-ring:#97aafd;--on-accent:#fff;--focus:#82a2ff;--focus-input:#6489f4;--focus-strong:#2853a0;--focus-on-dark:#bbcdff;--nav-bg:#192740;--nav-hero:#324e7a;--nav-hover:#253752;--nav-active:#314566;--nav-line:#40516c;--nav-text:#d8e1f1;--nav-muted:#bac8df;--nav-dim:#8b9bb6;--nav-avatar:#2e3f5e;--ok-bg:#eaf6ef;--ok-bg-strong:#d9eddf;--ok-fg:#1f6e58;--ok-line:#c8e8d7;--ok-dot:#6eae93;--warn-bg:#fff4df;--warn-bg-soft:#fff9ee;--warn-bg-strong:#ffe7be;--warn-fg:#7a5a12;--warn-fg-strong:#5d4720;--warn-line:#ebdcb7;--warn-dot:#986012;--err-bg:#fceeee;--err-fg:#9b3c33;--err-line:#f0d2cc;--leave-bg:#f4f1fc;--leave-fg:#775396;--leave-dot:#b098d0;--sick-bg:#fff6ef;--sick-fg:#8a5e3e;--sick-dot:#d6a37b}
*{box-sizing:border-box}body{margin:0;font-size:1rem;line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}button{color:inherit}p{line-height:1.6}h1,h2,h3,p{margin:0}h1{font-size:1.9375rem;letter-spacing:-1px;font-weight:650}h2{font-size:1.125rem;letter-spacing:-.3px;font-weight:650}small{font-size:0.875rem;color:var(--muted)}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}h1:focus{outline:none}.muted{color:var(--muted)}
.app-shell{display:flex;min-height:100vh}.sidebar{width:232px;flex-shrink:0;background:var(--nav-bg);color:var(--nav-text);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:30px 18px}.brand{display:flex;align-items:center;gap:11px;font-size:1.4375rem;color:var(--on-accent);font-weight:650;letter-spacing:-.7px;padding:0 10px}.brand-symbol{width:36px;height:37px;display:grid;place-items:center;background:var(--accent-light);color:var(--on-accent);border-radius:11px;font-size:1.875rem;font-weight:500;line-height:1}.brand-flex{display:block;font-size:0.875rem;letter-spacing:3px;color:var(--nav-dim);font-weight:500;margin-top:2px}.workspace-label{font-size:0.875rem;letter-spacing:1.7px;margin:47px 15px 17px;color:var(--nav-dim)}.sidebar nav{display:flex;flex-direction:column;gap:7px}.sidebar nav a{display:flex;align-items:center;gap:13px;border-radius:8px;padding:14px;font-weight:500;font-size:0.9375rem}.sidebar nav a>span:first-child{font-size:1.3125rem;line-height:18px;width:21px;text-align:center;font-weight:400}.sidebar nav a:hover{background:var(--nav-hover)}.sidebar nav a.active{background:var(--nav-active);color:var(--on-accent);box-shadow:inset 3px 0 var(--accent-ring)}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--nav-line);padding:24px 10px 0;position:relative}.sidebar-bottom strong{display:block;font-size:0.875rem;line-height:1.5;font-weight:500;padding-left:15px}.sidebar-bottom small{display:block;font-size:0.875rem;color:var(--nav-dim);margin:7px 0 0 15px}.workspace-dot{width:6px;height:6px;border-radius:50%;background:var(--ok-dot);position:absolute;top:29px}.main-shell{margin-left:232px;flex:1;min-width:0}.topbar{height:77px;display:flex;justify-content:space-between;align-items:center;padding:0 40px;border-bottom:1px solid var(--line);background:var(--surface);font-size:0.875rem;color:var(--muted)}.topbar strong{font-weight:500;color:var(--muted)}.breadcrumb{padding:0 16px;color:var(--muted-2)}.user-menu{display:flex;align-items:center;gap:12px}.avatar{background:var(--accent-soft);color:var(--accent-text);border-radius:50%;height:34px;width:34px;display:grid;place-items:center;font-size:0.875rem;font-weight:600}.user-name{color:var(--text-2)}.logout{border:0;background:transparent;font-size:0.875rem;color:var(--muted-2);padding:8px}.content{padding:34px 40px 20px;max-width:1600px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.eyebrow{font-size:0.875rem;letter-spacing:1.9px;color:var(--muted-2);font-weight:650;display:block;margin-bottom:10px}.page-heading p{margin-top:9px;color:var(--muted);font-size:0.9375rem}.heading-actions,.actions{display:flex;align-items:center;gap:9px}.button{border:1px solid transparent;border-radius:7px;min-height:39px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:0.875rem;font-weight:550;white-space:nowrap;transition:background .15s,box-shadow .15s}.primary{background:var(--blue);color:var(--on-accent);box-shadow:0 3px 5px #3f61ca12}.primary:hover{background:var(--blue-hover)}.secondary{background:var(--surface);border-color:var(--control-border);color:var(--muted)}.secondary:hover{background:var(--surface-tint)}.small{min-height:28px;padding:4px 10px;font-size:0.875rem}.full{width:100%}.text-button{border:0;background:transparent;padding:4px 0;min-height:28px;display:inline-flex;align-items:center;gap:4px;color:var(--accent-text);font-size:0.875rem;font-weight:550;text-align:left}.text-button:hover{text-decoration:underline}.demo-banner{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--control-border);background:var(--accent-soft);color:var(--text-2);font-size:0.875rem;border-radius:7px;margin-bottom:22px}.dot{width:5px;height:5px;background:var(--accent-light);border-radius:100%}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:26px}.stat{border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:158px;padding:18px 20px;box-shadow:0 2px 4px #20315302}.stat>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:0.875rem;color:var(--muted);gap:8px}.stat>strong{display:block;font-size:1.8125rem;letter-spacing:-.7px;font-weight:600;margin-top:8px;font-variant-numeric:tabular-nums}.stat>strong small{font-size:1rem;font-weight:400;letter-spacing:0}.stat p{font-size:0.875rem;margin-top:7px;line-height:1.5;color:var(--muted)}.positive{color:var(--ok-fg)}.progress-track{height:3px;border-radius:5px;background:var(--surface-press);margin-top:14px}.progress-track span{display:block;height:100%;background:var(--accent-light);border-radius:5px}.leave-stat .text-button{font-size:0.875rem;margin-top:7px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 3px 5px #18263c02;overflow:hidden}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:21px 23px}.month-controls{display:flex;align-items:center;gap:18px}.month-controls h2{text-transform:capitalize;font-size:1.125rem;min-width:165px}.month-controls>div{display:flex;gap:4px}.month-controls button{background:var(--surface);border:1px solid var(--line-strong);border-radius:5px;padding:2px 10px;min-width:29px;min-height:29px;font-size:1.25rem}.month-controls .today-button{font-size:0.875rem;padding:6px 12px;color:var(--muted-2)}.calendar-meta{font-size:0.875rem;color:var(--muted-2);display:flex;align-items:center;gap:8px}.small-dot{height:3px;width:3px;background:var(--dot-neutral);border-radius:50%}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}.weekday{padding:12px 17px;font-size:0.875rem;color:var(--muted-2);background:var(--surface-2);font-weight:550;border-bottom:1px solid var(--line)}.day{position:relative;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);min-height:100px;padding:13px 16px 12px;text-align:left;display:flex;flex-direction:column;transition:background .15s}.day:nth-child(7n){border-right:0}.day:hover{background:var(--accent-soft)}.day-top{display:flex;align-items:center;justify-content:space-between;gap:3px;min-height:21px}.day-number{font-size:0.875rem;color:var(--muted);font-weight:500}.day-top small{font-size:0.875rem;letter-spacing:1px;color:var(--accent-text);font-weight:650}.day-value{font-size:1rem;font-weight:550;color:var(--text-2);min-height:23px;margin-top:5px;font-variant-numeric:tabular-nums}.day-status{font-size:0.875rem;color:var(--muted-2);display:flex;align-items:center;gap:5px;margin-top:auto}.day-status>span{height:4px;width:4px;background:var(--dot-neutral);border-radius:50%}.work .day-status{color:var(--ok-fg)}.work .day-status>span{background:var(--ok-dot)}.leave{background:var(--leave-bg)}.leave .day-status,.leave .day-value{color:var(--leave-fg)}.leave .day-status>span{background:var(--leave-dot)}.sick{background:var(--sick-bg)}.sick .day-status{color:var(--sick-fg)}.sick .day-status>span{background:var(--sick-dot)}.off,.outside{background:var(--surface-2)}.off .day-status{color:var(--muted-2)}.holiday{background:var(--surface-tint)}.is-today{box-shadow:inset 0 0 0 1.5px var(--accent-ring);background:var(--accent-soft)}.is-today .day-number{background:var(--blue);color:var(--on-accent);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin:-2px 0}.warning-dot{background:var(--warn-bg);color:var(--warn-fg);font-size:0.875rem;display:grid;place-items:center;width:15px;height:15px;border-radius:50%}.calendar-footer{display:flex;justify-content:space-between;gap:10px;padding:16px 23px;font-size:0.875rem;color:var(--muted-2)}.legend{display:flex;gap:18px;flex-wrap:wrap}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:6px;height:6px;border-radius:2px;background:var(--dot-neutral)}.legend .work-dot{background:var(--ok-dot)}.legend .leave-dot{background:var(--leave-dot)}.legend .sick-dot{background:var(--sick-dot)}.section-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:27px 0 15px}.section-top h2{font-size:1rem}.section-top p{font-size:0.875rem;color:var(--muted);margin-top:5px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:0.875rem;text-align:left}th{background:var(--surface-2);color:var(--muted-2);font-weight:500;font-size:0.875rem;padding:14px 20px}td{padding:16px 20px;border-top:1px solid var(--line)}td strong{font-weight:500}.empty-state{text-align:center;color:var(--muted-2);padding:35px 20px}.status{display:inline-block;border-radius:5px;padding:5px 8px;font-size:0.875rem;background:var(--surface-press);color:var(--muted)}.status.pending{background:var(--warn-bg);color:var(--warn-fg)}.status.approved{background:var(--ok-bg);color:var(--ok-fg)}.status.rejected{background:var(--err-bg);color:var(--err-fg)}.notice{padding:13px 16px;border-radius:7px;margin-bottom:18px;font-size:0.875rem;line-height:1.6}.notice.success{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-fg)}.notice.error{background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-fg)}.loading{padding:60px;color:var(--muted);text-align:center}.statement-tools{background:var(--surface-3);border-top:1px solid var(--line);padding:18px 23px;display:flex;align-items:center;justify-content:space-between;gap:12px}.statement-tools strong{font-size:0.875rem}.statement-tools p{font-size:0.875rem;color:var(--muted);margin-top:4px}
dialog.modal::backdrop{background:#101b3766;backdrop-filter:blur(3px)}.modal{background:var(--surface);color:inherit;border:0;margin:auto;width:550px;max-width:calc(100vw - 40px);max-height:92vh;overflow-y:auto;border-radius:15px;padding:27px;box-shadow:0 20px 90px #0d1a3533}.modal>header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:23px}.modal .eyebrow{font-size:0.875rem;margin-bottom:7px}.modal h2{font-size:1.3125rem}.close-button{background:transparent;border:0;color:var(--muted);font-size:1.75rem;padding:0;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:8px;margin:-10px -10px 0 0;flex-shrink:0}.modal label,.login-card label{display:block;font-size:0.875rem;font-weight:550;margin-bottom:7px;color:var(--text-soft)}input:not([type=checkbox]),select{display:block;width:100%;min-height:41px;background:var(--surface);border:1px solid var(--control-border);border-radius:6px;color:var(--text-2);padding:9px 11px;font-size:0.875rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:18px 0}.checkbox-label{display:flex!important;align-items:center;gap:7px;font-size:0.875rem!important;font-weight:400!important;margin:12px 0!important}.checkbox-label input{accent-color:var(--blue);width:20px;height:20px}.form-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:20px 0;padding:15px 0}.section-top.compact{margin:0 0 14px}.compact strong{font-size:0.875rem;font-weight:550}.pause-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:0.875rem}.pause-row input[type=time]{width:105px;min-width:0}.form-section small{font-size:0.875rem}.help-text{font-size:0.875rem;color:var(--muted);margin:16px 0}.calculation{display:flex;align-items:center;justify-content:space-between;background:var(--surface-tint);border:1px solid var(--control-border);border-radius:8px;padding:17px;margin-top:20px;color:var(--accent-text);font-size:0.875rem}.calculation strong{font-size:1.3125rem;color:var(--accent-text);white-space:nowrap}.modal>footer{display:flex;justify-content:flex-end;gap:9px;margin-top:24px;border-top:1px solid var(--line);padding-top:20px}.warning-text{font-size:0.875rem;color:var(--warn-fg);margin-top:10px}details{margin-top:16px;font-size:0.875rem;color:var(--muted-2)}summary{cursor:pointer}.info-note{padding:15px;border-radius:8px;background:var(--surface-tint);font-size:0.875rem;line-height:1.7;color:var(--text-2);margin:24px 0}.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--surface)}.login-intro{background:radial-gradient(ellipse at bottom right,var(--nav-hero),var(--nav-bg) 75%);color:var(--on-accent);padding:50px 60px;display:flex;flex-direction:column;justify-content:space-between;min-height:650px}.login-intro .brand{padding:0}.login-intro h1{font-size:3.25rem;letter-spacing:-2px;line-height:1.15;font-weight:550;margin-bottom:24px}.login-intro .eyebrow{color:var(--nav-dim);margin-bottom:22px}.login-intro p{color:var(--nav-dim);font-size:1rem;line-height:1.8}.login-foot{font-size:0.875rem;color:var(--nav-dim)}.login-card{align-self:center;justify-self:center;padding:40px;width:min(100%,470px)}.login-card h2{font-size:1.5625rem;margin:20px 0 10px}.login-card>p{color:var(--muted);font-size:0.9375rem;margin-bottom:30px}.login-card select{margin-bottom:17px;font-size:0.875rem}.login-card .button{min-height:44px}.login-card small{font-size:0.875rem;line-height:1.7;display:block}.pill{display:inline-block;padding:6px 10px;border-radius:20px;background:var(--accent-soft);color:var(--accent-text);font-size:0.875rem}.login-card .info-note{font-size:0.875rem}.login-card label{font-size:0.875rem}#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--warn-bg);padding:15px;z-index:200;font-size:0.9375rem}#blazor-error-ui a{text-decoration:underline}
@media(min-width:1600px){.day{min-height:118px}.content{padding-top:42px}.stats{gap:24px}.stat{padding:22px}}
@media(max-width:1200px){.sidebar{width:205px}.main-shell{margin-left:205px}.content{padding:27px 25px}.topbar{padding:0 25px}.stats{gap:10px}.stat{padding:15px 13px}.stat>div:first-child{font-size:0.875rem}.calendar-meta{display:none}.day{padding:12px}.stat p{font-size:0.875rem}}
@media(max-width:950px){.sidebar{width:185px;padding:28px 10px}.sidebar .brand{font-size:1.25rem;gap:8px}.brand-symbol{width:30px;height:32px}.main-shell{margin-left:185px}.stats{grid-template-columns:repeat(2,1fr)}.page-heading{align-items:flex-start;flex-direction:column;gap:17px}.user-name,.topbar>span{display:none}.topbar{justify-content:flex-end;height:63px}.stat{min-height:148px}.stat>div:first-child{font-size:0.875rem}.stat p{font-size:0.875rem}.day{min-height:95px;padding:9px}.day-status{font-size:0.875rem}.calendar-footer>span{display:none}.day-top small{display:none}.login-intro{padding:40px 30px}.login-intro h1{font-size:2.5rem}.statement-tools{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.app-shell{display:block}.sidebar{position:static;width:100%;padding:16px 16px 0;display:block}.sidebar .brand{font-size:1.3125rem}.sidebar .brand-symbol{width:31px;height:32px}.workspace-label,.sidebar-bottom{display:none}.sidebar nav{flex-direction:row;gap:4px;margin-top:18px;overflow-x:auto}.sidebar nav a{flex-shrink:0;font-size:0.875rem;padding:11px 8px;border-radius:6px 6px 0 0;gap:5px}.sidebar nav a>span:first-child{font-size:1rem;width:15px}.sidebar nav a.active{box-shadow:inset 0 -2px var(--accent-ring)}.main-shell{margin-left:0}.topbar{height:53px;padding:0 18px}.topbar .user-name{display:block;font-size:0.875rem}.content{padding:23px 16px}.page-heading h1{font-size:1.6875rem}.page-heading p{font-size:0.875rem}.heading-actions{width:100%}.heading-actions .button{flex:1;font-size:0.875rem;padding:10px}.demo-banner{font-size:0.875rem;margin-bottom:16px}.stats{gap:10px;margin-bottom:18px}.stat{padding:13px;min-height:145px}.stat>strong{font-size:1.625rem}.stat>div:first-child{font-size:0.875rem}.stat p{font-size:0.875rem}.calendar-toolbar{padding:15px 12px}.month-controls{gap:8px;justify-content:space-between;width:100%}.month-controls h2{font-size:1rem;min-width:0;flex:1}.weekday{padding:10px 6px;font-size:0.875rem}.day{min-height:82px;padding:8px 5px}.day-number{font-size:0.875rem}.day-value{font-size:0.875rem;min-height:20px}.day-status{font-size:0.875rem;gap:3px;letter-spacing:-.1px}.day-status>span{width:3px;height:3px;flex-shrink:0}.is-today .day-number{width:20px;height:20px}.calendar-footer{padding:13px 10px}.legend{gap:10px;font-size:0.875rem}.section-top{align-items:flex-start}.section-top h2{font-size:1rem}.section-top p{font-size:0.875rem}.section-top .button{font-size:0.875rem;padding:8px}.table-wrap th,.table-wrap td{padding:12px;white-space:nowrap;font-size:0.875rem}.modal{max-width:calc(100vw - 20px)}.modal{padding:21px 17px}.modal h2{font-size:1.125rem}.pause-row{gap:5px}.pause-row input[type=time]{width:90px}.pause-row .checkbox-label{font-size:0.875rem!important}.login-shell{display:block}.login-intro{min-height:240px;padding:25px}.login-intro>div{margin-top:40px}.login-intro h1{font-size:2rem;letter-spacing:-1px;margin-bottom:0}.login-intro p,.login-foot{display:none}.login-intro .eyebrow{font-size:0.875rem;margin-bottom:12px}.login-card{padding:32px 24px;margin:auto}.login-card h2{font-size:1.375rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Keep the field focus indicator inside the field and labels clearly separated. */
input:not([type=checkbox]):focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-input);outline-offset:-2px;border-color:var(--focus-input)}
label:not(.checkbox-label){display:block;margin-bottom:8px}
.scope-add{display:flex;align-items:flex-end;gap:12px;margin:18px 0}.scope-add>div{flex:1;max-width:520px}.scope-add .button{min-height:41px}
.scope-table{width:100%}.scope-table th,.scope-table td{white-space:normal!important;vertical-align:top}.scope-table input[type=checkbox]{accent-color:var(--blue);width:20px;height:20px}.scope-table details{margin:0;font-size:0.875rem;color:var(--text-soft)}.scope-table summary{white-space:nowrap}.scope-table .checkbox-label{white-space:normal;min-width:190px}.scope-table td:first-child{min-width:170px}.scope-empty{padding:18px;background:var(--bg);color:var(--muted);border-radius:8px;font-size:0.875rem}.global-rights{border-top:1px solid var(--line);padding-top:18px;font-size:0.875rem;color:var(--text-soft)}.global-rights .permission-grid{margin-top:14px}
@media(max-width:650px){.scope-add{align-items:stretch;flex-direction:column}.scope-table th,.scope-table td{padding:10px}}
.user-blocks>fieldset{border:0;padding:0;margin:0;min-width:0}.user-blocks .user-editor{margin-bottom:20px}.user-blocks>.user-editor-actions,.user-blocks>fieldset>.user-editor-actions{margin:0 0 25px}.permission-matrix th:not(:first-child),.permission-matrix td:not(:first-child){text-align:center;width:18%}.permission-matrix th:first-child{width:46%}.permission-matrix .general-access{background:var(--surface-3)}.user-blocks .permission-toolbar{margin-top:0}.user-blocks .allocation-history{border-top:1px solid var(--line);padding-top:18px}.user-blocks .allocation-history h3{font-size:0.875rem;margin-bottom:12px}.user-blocks .allocation-history p{font-size:0.875rem;line-height:1.7}.permission-matrix input{cursor:pointer}
@media(max-width:650px){.permission-matrix{table-layout:fixed}.permission-matrix th,.permission-matrix td{min-width:0!important;padding:10px 5px;overflow-wrap:anywhere}.permission-matrix th:first-child,.permission-matrix td:first-child{width:34%}.permission-matrix th:not(:first-child),.permission-matrix td:not(:first-child){width:22%}}
.allocation-month{width:260px;max-width:100%}.brand-logo{display:block;width:42px;height:42px;object-fit:contain;flex-shrink:0}.cost-center-empty{margin:18px 0}.cost-center-empty strong{font-weight:600}@media(max-width:950px){.sidebar .brand-logo{width:34px;height:34px}}
.user-blocks>fieldset{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}.user-blocks .user-editor{margin-bottom:0;min-width:0}.user-blocks>fieldset>[aria-labelledby="user-block-person"],.user-blocks>fieldset>.user-editor-actions{grid-column:1/-1}.user-blocks .allocation-row{display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:end}.user-blocks .allocation-row>.text-button{grid-column:2;justify-self:end}.user-blocks .permission-matrix th,.user-blocks .permission-matrix td{padding:12px 10px}.user-blocks .permission-matrix td:first-child{min-width:130px}@media(min-width:1200px){.user-blocks>fieldset{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}}@media(max-width:650px){.user-blocks .permission-matrix th,.user-blocks .permission-matrix td{padding:10px 5px}}

/* Readable text sizes are retained at every viewport width. */
.calendar-panel { container-type: inline-size; }
.calendar-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.calendar-scroll:focus-visible { outline-offset: -3px; }
.calendar-grid { min-width: 56rem; }
.calendar-scroll-hint { display: none; padding: 12px 20px; font-size: .875rem; color: var(--muted); }
@container (max-width: 56rem) { .calendar-scroll-hint { display: block; } }
.calendar-toolbar, .calendar-footer { flex-wrap: wrap; gap: 16px; }
.calendar-toolbar .month-controls { flex-wrap: wrap; }
.calendar-grid .day { min-height: 126px; }
.calendar-grid .day-value { font-size: 1rem; margin-bottom: 12px; }
.day-status { line-height: 1.4; overflow-wrap: anywhere; }
.day-status > span { flex-shrink: 0; }
.weekday, th, .day-status, .off .day-status, .calendar-meta { color: var(--muted-2); }
.work .day-status { color: var(--ok-fg); }
.sick .day-status { color: var(--sick-fg); }
.leave .day-status { color: var(--leave-fg); }
.calendar-footer { color: var(--muted); }
.is-today .day-number { width: 28px; height: 28px; }
.section-top { flex-wrap: wrap; gap: 16px; }
.section-top h2 { font-size: 1.125rem; }
.stat { min-width: 0; }
.stat p, .stat > div:first-child > span:first-child { overflow-wrap: anywhere; }
.checkbox-label input { flex-shrink: 0; }
.permission-toolbar { flex-wrap: wrap; }
.sidebar nav a { line-height: 1.4; }
/* Eigene Reihe fuer die Arbeitszeitfelder: .form-row ist ein festes Zweispaltenraster und wird
   an vielen Stellen geteilt. Hier richtet sich die Spaltenzahl nach der Feldanzahl - beim
   Neuanlegen fehlt das Datumsfeld - und die Reihe stapelt ohne eigenen Bruchpunkt. */
.employment-fields .employment-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 18px 0; }
/* Befund B13 (18.09.2026): Die vier Beschriftungen sind unterschiedlich lang; "Vertraglich
   vereinbarte Wochenarbeitszeit in Stunden" bricht um und schob sein Eingabefeld eine Zeile
   tiefer als die anderen drei. Die Rasterzellen sind ohnehin gleich hoch (stretch), also
   traegt die Beschriftung die Hoehendifferenz: sie waechst, das Feld sitzt unten. Damit
   stehen die Felder auf einer Linie, ohne feste Hoehen und ohne Bruchpunkt. */
.employment-fields .employment-row > div { min-width: 0; display: flex; flex-direction: column; }
/* Rechts bleibt Platz fuer das "i" -- ohne ihn laeuft eine umbrechende Beschriftung unter das
   Zeichen, und es stand direkt auf dem letzten Buchstaben. */
.employment-fields .employment-row > div > label { flex: 1 0 auto; padding-right: 40px; }
@media (max-width: 650px) {
    .user-editor .form-row { grid-template-columns: minmax(0, 1fr); }
    /* "min-width: 38rem" stand hier seit d6b8eda und erzwang auf 390px Breite einen
       Ueberlauf der Rechtematrix -- der Browserlauf --editor-layout war deshalb belegt rot.
       Der spaeter ergaenzte 650px-Block weiter oben stellt die Matrix auf table-layout:fixed
       mit prozentualen Spalten; damit passt sie ohne Mindestbreite. Beides zusammen war ein
       Widerspruch, in dem die Mindestbreite gewann. */
    .heading-actions, .user-menu { flex-wrap: wrap; }
    .heading-actions .button { white-space: normal; }
    .topbar { height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
    .stat > strong { font-size: 1.5rem; }
    .stat > strong small { font-size: .875rem; }
    .pause-row { flex-wrap: wrap; }
}

/* Feiertagspflege (/feiertage) und das Nachtragen des Bundeslandes im Betreiberbereich (Befund B3). */
/* Die Seite nutzt die Kontokarte, braucht aber Platz fuer eine fuenfspaltige Tabelle; die 580px
   von .account-card gelten dafuer nicht. .account-card.wide ist nur im Betreiberbereich definiert. */
/* Befund B22 (18.09.2026): Seit die drei Seiten in der gemeinsamen Huelle stehen, zentriert
   ".account-shell" sie nicht mehr im Fenster -- die Karte steht links im Inhaltsbereich, wie auf
   der Hauptseite auch. Die Hilfe ist dazugekommen: mit den 580px von ".account-card" waeren ihre
   Tabellen unnoetig schmal, und sie soll neben den beiden anderen Seiten nicht anders aussehen. */
/* Vorschlag 9 (01.11.2026): Die drei Seiten stehen ohne Karte in derselben Huelle wie die Startseite; nur die Breite bleibt begrenzt. */
.content.holiday-shell, .content.leave-shell, .content.help-shell { max-width: 1100px; margin: 0; }
/* Ohne eigene Breite waere die Jahreswahl bildschirmbreit -- global gilt "select { width: 100% }". */
.holiday-shell .year-choice select, .leave-shell .year-choice select { max-width: 12rem; }
/* Fehlende gesetzliche Feiertage sind kein Eingabefehler, aber eine Luecke mit Folgen fuer Soll und
   Urlaubskonto. Dafuer ein eigener Warnton zwischen .notice.success (gruen) und .notice.error (rot). */
.notice.warning { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-fg); }
.notice.warning p { margin-top: 8px; }
.notice.warning ul, .info-note ul { margin: 10px 0 0 20px; padding: 0; }
.notice.warning .button { margin-top: 14px; }
/* Das Nachtragen des Bundeslandes steckt in der Tabellenzelle der Organisation, damit Auswahl und
   Zeile zusammenbleiben; das Auswahlfeld darf die Spalte dabei nicht auf Bildschirmbreite ziehen. */
.land-fix { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
/* Dreiteiliger Selektor, weil ".account-card label" in workflow.css gleich spezifisch ist und
   spaeter geladen wird -- die 18px Abstand von dort passen in einer Tabellenzelle nicht. */
.operator-shell .land-fix label { flex-basis: 100%; margin: 0 0 2px; font-size: .875rem; font-weight: 550; color: var(--text-soft); }
.land-fix select { width: auto; min-width: 12rem; }

/* Urlaubsverwaltung (/urlaub), Befund B9. Die Seite teilt Kontokarte, Jahreswahl, .notice.warning,
   .info-note, .status, .table-wrap und das Modal mit der Feiertagspflege -- die beiden Selektoren
   oben sind dafuer nur um .leave-shell erweitert. Neu ist allein das Folgende. */
/* Die Uebertragungsfrist ist EINE Angabe aus Tageszahl und Monat: zwei schmale Felder in einer
   Reihe mit der Schaltflaeche, damit sie nicht wie zwei getrennte Formulare wirken. */
.deadline-form { margin: 8px 0 4px; }
.deadline-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.deadline-form legend { padding: 0; font-size: .875rem; font-weight: 550; color: var(--text-soft); }
.deadline-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 10px; }
.deadline-row > div { flex: 0 0 auto; }
/* Zweiteilige Selektoren, weil "input:not([type=checkbox]), select { width: 100% }" hier und
   ".account-card input { width: 100% }" in der spaeter geladenen workflow.css sonst gewinnen und
   die beiden Felder auf Kartenbreite ziehen. Gleicher Grund wie bei .year-choice select. */
.leave-shell .deadline-row input { width: 5.5rem; }
.leave-shell .deadline-row select { width: 11rem; }
/* Dreiteiliger Selektor, weil ".account-card label" in workflow.css spaeter geladen wird -- die
   18px Abstand von dort passen in einer Feldreihe nicht. Wie bei .operator-shell .land-fix label. */
.leave-shell .deadline-row label { margin: 0 0 2px; font-size: .875rem; font-weight: 550; color: var(--text-soft); }
/* Zusatz unter dem Stand-Etikett der Uebertragszeile: was genau verfallen koennte, beziehungsweise
   dass nichts zu streichen ist. Eigene Zeile wie .user-self in der Nutzerverwaltung. */
.status-detail { display: block; margin-top: 6px; font-size: .875rem; color: var(--muted-2); }

/* Befund B18 (18.09.2026): Die Spaltennamen sollen beim Scrollen stehenbleiben -- gemeldet an den
   Monatsdetails der Auswertung, gilt aber fuer alle Tabellen in .table-wrap. Einmal hier statt
   siebzehnmal einzeln.

   Warum zusaetzlich eine Hoehengrenze und nicht nur "position: sticky": .table-wrap traegt
   "overflow-x: auto", und sobald eine Achse nicht "visible" ist, rechnet der Browser die andere
   auf "auto" -- die Huelle IST also bereits ein Scrollbereich. Eine klebende Kopfzeile richtet
   sich immer am naechsten Scrollbereich aus, nicht am Fenster; ohne eigene Hoehe scrollt die
   Huelle aber nie, und die Kopfzeile waere mit der Seite weggewandert. Erst die Hoehengrenze
   macht das Kleben sichtbar. Kurze Tabellen bleiben unberuehrt, weil die Grenze nur greift, wenn
   der Inhalt sie ueberschreitet.

   border-collapse:collapse laesst Rahmen nicht mit der klebenden Zelle mitwandern, deshalb die
   Trennkante als inset-Schatten statt als Unterlinie. Den eigenen Hintergrund hat th bereits;
   ohne ihn schiene der Inhalt durch. */
.table-wrap { max-height: min(70vh, 46rem); overflow: auto; }
.table-wrap thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px var(--line); }

/* Befund B17 (18.09.2026): Der Grund, warum nicht gespeichert werden kann, stand am Seitenanfang --
   wer weiter unten im Nutzerformular arbeitete, sah ihn nicht und hielt das Speichern fuer
   wirkungslos. Die Meldung steht jetzt am Anfang des Formulars und bleibt beim Scrollen oben
   stehen, solange das Formular im Bild ist. Kein "position: fixed", damit sie kein Feld verdeckt,
   wenn das Formular zugeklappt oder verlassen wird -- sie gehoert zum Formular, nicht zum Fenster.
   z-index ueber der klebenden Tabellenkopfzeile aus B18. */
.form-blocker { position: sticky; top: 0; z-index: 3; margin-bottom: 18px; box-shadow: 0 4px 10px #18263c14; }
/* Befund B16: "Gesamt: 120 %" stand als gewoehnlicher Fettdruck da, zwei Zeilen unter dem Satz,
   dass es 100 % sein muessen. Eine falsche Summe ist kein neutraler Zwischenstand. */
.allocation-total.off { color: var(--err-fg); }
/* Befund B12 (18.09.2026): Hinweis auf wartende Entscheidungen im Block "Informationen fuer dich".
   Gleiche Bauart wie .submission-reminder, nur im Gruen der Freigaben statt im Gelb der offenen
   eigenen Monate -- es ist eine fremde Aufgabe, keine eigene Mahnung.

   Zweiteilige Selektoren, weil .submission-reminder in der spaeter geladenen workflow.css steht:
   bei gleicher Spezifitaet gewaenne dort Gelb. Gleicher Grund wie bei .land-fix label weiter oben. */
.submission-reminder.decision-reminder { border-color: var(--ok-line); background: var(--ok-bg); }
.submission-reminder.decision-reminder strong { color: var(--ok-fg); }
.submission-reminder.decision-reminder p { color: var(--ok-fg); }
.submission-reminder.decision-reminder .reminder-icon { background: var(--ok-bg); color: var(--ok-fg); }

/* Befund B15 (18.09.2026), Entscheidung E1: Der Spaltenname "Gesundheitsdaten" bleibt und traegt
   die Erklaerung beim Darueberfahren. Das Zeichen macht sichtbar, dass es dort etwas zu lesen gibt
   -- ohne Marke findet eine Erklaerung beim Darueberfahren niemand, der nicht zufaellig hinfaehrt. */
.column-hint { cursor: help; }
.hint-mark { color: var(--muted-2); font-size: .8125rem; }

/* Befund B21 (18.09.2026), Entscheidung E2: Wahl des Bundeslandes auf der Feiertagsseite. Die Reihe
   selbst ist dieselbe wie im Betreiberbereich (.land-fix); nur die Beschriftung braucht hier
   denselben Zuschnitt, den dort ".operator-shell .land-fix label" gibt -- aus demselben Grund
   dreiteilig, weil ".account-card label" in der spaeter geladenen workflow.css sonst gewinnt. */
.land-change { margin: 4px 0 18px; }
.holiday-shell .land-fix label { flex-basis: 100%; margin: 0 0 2px; font-size: .875rem; font-weight: 550; color: var(--text-soft); }

/* Erklaerungen am Feld statt als Absatzblock darunter (18.09.2026): der Block nahm mehr Platz ein
   als die Felder selbst, und die Erklaerung stand weit weg von dem, was sie erklaert.

   Aufgeklappt wird ueber eine Schaltflaeche, nicht ueber <details> -- dieses Formular hat sich mit
   Befund B7 auf ausdrueckliche Schaltflaechen festgelegt, und ein Waechter haelt das fest.

   Das "i" sitzt oben rechts in der Zelle und ist aus dem Fluss genommen: zugeklappt kostet es keine
   Hoehe, und die Ausrichtung der Eingabefelder aus B13 bleibt unberuehrt. Der aufgeklappte Text
   schwebt ueber dem Inhalt darunter, statt die Reihe auseinanderzuschieben. */
/* Ohne diesen Bezugspunkt wuerden alle vier "i" auf denselben Punkt der Seite fallen und
   einander die Klicks abfangen. */
.employment-row > div { position: relative; }
.feld-hinweis { position: absolute; top: -4px; right: 0; }
.feld-hinweis-knopf { width: 24px; height: 24px; padding: 0; border: 1px solid var(--control-border-strong); border-radius: 50%;
    background: var(--surface-press); color: var(--text-2); font-size: .8125rem; font-weight: 650; font-style: normal;
    line-height: 1; cursor: help; }
.feld-hinweis-knopf:hover:not(:disabled), .feld-hinweis-knopf[aria-expanded="true"] { background: var(--line-strong); color: var(--text-2); }
.feld-hinweis-knopf:disabled { opacity: .5; }
.feld-hinweis-text { position: absolute; top: 26px; right: 0; z-index: 4; width: 22rem; max-width: 70vw;
    display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
    box-shadow: 0 6px 16px #18263c1f; color: var(--muted); line-height: 1.55; font-size: .875rem; font-weight: 400; }
@media (max-width: 650px) { .feld-hinweis-text { width: 16rem; } }

/* Menuesymbole als Vektorgrafik (18.09.2026). Die Breite der Spalte bleibt wie zuvor, damit die
   Beschriftungen an derselben Stelle stehen; nur der Inhalt ist jetzt eine Zeichnung statt eines
   Schriftzeichens. Deshalb greift ".sidebar nav a>span:first-child" mit seiner Schriftgroesse
   hier nicht mehr -- die Groesse steht an der Grafik selbst. */
.sidebar nav a > .nav-symbol { display: grid; place-items: center; width: 21px; flex-shrink: 0; }
.sidebar nav a > .nav-symbol svg { width: 18.5px; height: 18.5px; display: block; opacity: .85; }
.sidebar nav a.active > .nav-symbol svg, .sidebar nav a:hover > .nav-symbol svg { opacity: 1; }
@media (max-width: 650px) { .sidebar nav a > .nav-symbol { width: 15px; } .sidebar nav a > .nav-symbol svg { width: 16px; height: 16px; } }

/* Menuesymbole als Vektorgrafik (18.09.2026). Die Spaltenbreite bleibt wie zuvor, damit die
   Beschriftungen an derselben Stelle stehen; nur der Inhalt ist jetzt eine Zeichnung statt eines
   Schriftzeichens. Die Schriftgroesse aus ".sidebar nav a>span:first-child" greift dafuer nicht
   mehr -- die Groesse steht an der Grafik selbst. */
.sidebar nav a > .nav-symbol { display: grid; place-items: center; width: 21px; flex-shrink: 0; }
.sidebar nav a > .nav-symbol svg { width: 18.5px; height: 18.5px; display: block; opacity: .85; }
.sidebar nav a.active > .nav-symbol svg, .sidebar nav a:hover > .nav-symbol svg { opacity: 1; }
@media (max-width: 650px) { .sidebar nav a > .nav-symbol { width: 15px; } .sidebar nav a > .nav-symbol svg { width: 16px; height: 16px; } }

/* Passwortwechsel (18.09.2026): stand als erster Menuepunkt ganz oben -- die prominenteste Stelle
   der Anwendung fuer etwas, das man selten tut. Jetzt unter den Bereichen und leiser. */
.sidebar .nav-klein { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 9px 14px;
    border-radius: 8px; font-size: 0.875rem; color: var(--nav-dim); }
.sidebar .nav-klein:hover { background: var(--nav-hover); color: var(--nav-text); }
.sidebar .nav-klein > .nav-symbol { width: 17px; }
.sidebar .nav-klein > .nav-symbol svg { width: 15px; height: 15px; }
/* Das Fenster haengt an einem Sprungziel: ohne "#passwort-aendern" in der Adresse ist es nicht da.
   Kein Javascript -- die Leiste steht auch auf Seiten ohne Blazor-Kreis. */
/* Zweiteilig, weil ".modal-backdrop" in der spaeter geladenen workflow.css steht und bei gleicher
   Spezifitaet gewinnt. Ohne das lag das Fenster unsichtbar ueber der ganzen Seite und fing jeden
   Klick ab -- gemessen an zwei Browserlaeufen, die daraufhin gar nichts mehr bedienen konnten.
   Gleicher Grund wie bei ".submission-reminder.decision-reminder" weiter oben. */
.modal-backdrop.passwort-fenster { display: none; }
.modal-backdrop.passwort-fenster:target { display: flex; }
.passwort-fenster .modal footer { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }

/* Kontrast (Apple-Design-Review 01.11.2026, Vorschlaege 1a-1d, 8, 22): Alle Nebentexte liegen jetzt
   bei mindestens 4,5:1 (WCAG AA fuer Text bis 17 pt). Die neuen Werte stehen am jeweiligen Selektor;
   hier steht nur, was es vorher nicht gab. */
/* Vorschlag 22: Zerstoerende Textknoepfe ("Entfernen", "Uebertrag streichen") tragen ein gedaempftes
   Rot, damit sie sich von "Bearbeiten" unterscheiden. 6,8:1 auf Weiss. */
.text-button.danger { color: var(--err-fg); }

/* Zielgroessen und Druckzustand (Apple-Design-Review 01.11.2026, Block B: Vorschlaege 2a-2e, 26, 27).
   Desktop-Minimum 28 px, Telefon 44 px (accessibility.md, Mobility). Die Werte stehen am jeweiligen
   Selektor; hier nur, was es vorher nicht gab. */
.checkbox-label { min-height: 28px; }
/* Vorschlag 26: Jeder Knopf hat einen Druckzustand -- er senkt sich um 1 px und wird dunkler. Ueber Farben,
   nicht ueber filter/opacity: die Messsonde (browser-contrast.js) wertet gefilterte Flaechen als unbekannt. */
.button:active:not(:disabled) { transform: translateY(1px); }
.primary:active:not(:disabled) { background: var(--blue-press); }
.secondary:active:not(:disabled) { background: var(--surface-press); }
.text-button:active:not(:disabled) { color: var(--blue-press); }
/* Vorschlag 2d: Unter 650 px wachsen Monatspfeile, "Heute", "Abmelden" und Textknoepfe auf 44 px. */
@media (max-width: 650px) {
    .month-controls button { min-width: 44px; min-height: 44px; }
    .month-controls .today-button { min-height: 44px; padding: 8px 14px; }
    .logout { min-height: 44px; }
    .text-button, .button.small { min-height: 44px; }
}
/* Alleinstehende Textlinks der Kontoseiten ("Passwort vergessen?", "Zurueck zur Anmeldung") auf 28 px.
   Links im Fliesstext bleiben Text. */
.login-card > p > a, .account-card > p > a { display: inline-flex; align-items: center; min-height: 28px; }

/* Telefon (Apple-Design-Review 01.11.2026, Block E). Die Regeln stehen am Ende, damit sie die aelteren
   Mobilregeln weiter oben ueberstimmen. */
@media (max-width: 650px) {
    /* Vorschlag 7: Eine Leiste statt drei. Die Kopfzeile entfaellt, Konto und Abmelden stehen im Menue. */
    .topbar { display: none; }
    /* Vorschlag 6: Der Kalender ist eine Wochenliste -- ein Tag je Zeile, Wochenanfang mit Linie. */
    .calendar-grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    .calendar-grid .weekday, .calendar-grid .day.outside, .calendar-scroll-hint { display: none; }
    .calendar-grid .day { display: grid; grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px; border-right: 0; }
    .calendar-grid .day.week-start { border-top: 3px solid var(--line-strong); }
    .calendar-grid .day-top { display: flex; align-items: center; gap: 8px; min-height: 0; }
    .calendar-grid .day-weekday { display: inline; color: var(--muted); font-size: .875rem; } /* 4,5:1 auch auf getoenten Tagen im Hover */
    .calendar-grid .day-top small { display: none; }
    .calendar-grid .day-number { font-size: .9375rem; min-width: 22px; }
    .calendar-grid .is-today .day-number { width: 26px; height: 26px; margin: 0; }
    .calendar-grid .day-status { order: 2; margin: 0; font-size: .875rem; }
    .calendar-grid .day-value { order: 3; margin: 0; min-height: 0; text-align: right; font-size: .9375rem; }
    /* Vorschlag 15: Tabellen als Kartenliste; tables.js schreibt den Spaltennamen in data-label.
       Rechtematrix und Zugriffstabelle behalten ihren eigenen Zuschnitt. */
    .table-wrap { max-height: none; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) { display: block; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > thead { display: none; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody, .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr, .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td { display: block; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr { padding: 12px 16px; border-top: 1px solid var(--line); }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; padding: 3px 0 !important; border: 0; white-space: normal !important; font-size: .875rem; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td::before { content: attr(data-label); color: var(--muted-2); font-size: .8125rem; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td:first-child, .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td:first-child { margin-bottom: 4px; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td:first-child::before, .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td[data-label=""]::before { display: none; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td.empty-state { text-align: left; padding: 12px 0 !important; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > tbody > tr > td > .status { justify-self: start; }
    .table-wrap table:not(.permission-matrix):not(.scope-table) > caption { display: block; padding: 12px 16px; }
}
/* Vorschlag 23: Unter 420 px stehen die Kacheln untereinander; kein Wortbruch mehr. */
@media (max-width: 420px) {
    .stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .stat { min-height: 0; padding: 14px 16px; }
    .stat p, .stat > div:first-child > span:first-child { overflow-wrap: normal; }
}

/* Kleinteiliges (Apple-Design-Review 01.11.2026, Block F). */
/* Vorschlag 12a: Fliesstext hoechstens 70 Zeichen breit; Formulare und Tabellen bleiben so breit wie bisher. */
.page-heading p, .help-text, .info-note, .notice, .section-top p, .statement-tools p, .help-shell > p, .help-shell li, .leave-shell li, .holiday-shell li, .help-section p { max-width: 70ch; }
/* Vorschlag 13b/13c: Symbole in Knoepfen und Hinweisen -- gleiche Zeichnungen wie die Seitenleiste. */
.nav-symbol { display: inline-grid; place-items: center; }
.button .nav-symbol svg, .text-button .nav-symbol svg { width: 16px; height: 16px; display: block; }
.text-button .nav-symbol svg { width: 14px; height: 14px; }
.reminder-icon .nav-symbol svg { width: 20px; height: 20px; display: block; }
.archive-symbol .nav-symbol svg { width: 28px; height: 28px; display: block; }
.archive-empty-symbol { display: block; color: var(--accent-text); margin-bottom: 20px; }
.archive-empty-symbol .nav-symbol svg { width: 40px; height: 40px; display: block; }
.archive-empty h1 { font-size: 1.375rem; margin-bottom: 10px; }
/* Vorschlag 14: Zahlenspalten rechtsbuendig in Tabellenziffern, ohne Umbruch. */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Vorschlag 17: Ueberschrift und Klappsteuerung der Formularbloecke in einer Zeile. */
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.block-head h2 { margin: 0; }
.permission-toolbar { justify-content: flex-end; }
/* Vorschlag 29: Tastenkappe im Kalenderfuss. */
kbd { font: 600 .8125rem/1 "IBM Plex Sans", "Segoe UI", sans-serif; padding: 3px 6px; border: 1px solid var(--dot-neutral); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--text-2); }
/* Vorschlag 12b: Hilfe mit Sprungliste (help.js) und Klappen je Abschnitt. */
.help-toc { margin: 0 0 26px; padding: 14px 18px; background: var(--surface-tint); border-radius: 8px; columns: 2; column-gap: 24px; font-size: .875rem; line-height: 1.9; max-width: 70ch; }
.help-toc strong { display: block; column-span: all; margin-bottom: 6px; }
.help-toc a { display: block; color: var(--accent-text); min-height: 28px; }
.help-toc a:hover { text-decoration: underline; }
details.help-section { margin: 0; border-top: 1px solid var(--line); padding: 4px 0 8px; font-size: inherit; color: inherit; }
details.help-section > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; min-height: 44px; }
details.help-section > summary::-webkit-details-marker { display: none; }
details.help-section > summary > .nav-symbol { margin-top: 4px; flex-shrink: 0; transition: transform .15s; }
details.help-section > summary > .nav-symbol svg { width: 16px; height: 16px; }
details.help-section[open] > summary > .nav-symbol { transform: rotate(90deg); }
details.help-section > summary h2 { font-size: 1.0625rem; margin: 0; }
details.help-section > summary p { color: var(--muted); font-size: .875rem; margin-top: 2px; }
details.help-section > summary:hover h2 { text-decoration: underline; }
@media (max-width: 650px) {
    .help-toc { columns: 1; }
    td.num { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { details.help-section > summary > .nav-symbol { transition: none; } }
/* Platzhalter in Formularfeldern: gedaempfte Textfarbe statt Browser-Grau, damit auch die dunkle Darstellung 4,5:1 haelt. */
input::placeholder,textarea::placeholder{color:var(--muted-2)}

/* Vorschlag 5 (Apple-Design-Review 01.11.2026): Dunkle Darstellung folgt der Systemeinstellung. Alle Farben der
   Oberflaeche sind Token (oben in :root); hier stehen nur die abweichenden Werte. Kein Schalter in der App.
   Pruefung: audit.js im Scratchpad mit ColorScheme=Dark, 4,5:1 fuer Text, 3:1 fuer Raender und Fokusringe. */
@media (prefers-color-scheme: dark){:root{--bg:#0f1726;--surface:#182233;--surface-2:#1c2738;--surface-3:#202d40;--surface-tint:#223147;--accent-soft:#24344f;--surface-press:#2c3d58;--line:#2a364c;--line-strong:#36455e;--control-border:#415270;--control-border-strong:#7f90ab;--dot-neutral:#5d6d87;--text:#e3e9f4;--ink:#f1f4fa;--text-2:#cfd8e6;--text-soft:#b4c0d3;--muted:#a9b6ca;--muted-2:#9aa8bf;--blue-hover:#3d5fd1;--accent-text:#9db4ff;--accent-light:#7f98f0;--accent-ring:#5b74c7;--focus:#9db4ff;--focus-input:#9db4ff;--focus-strong:#9db4ff;--nav-bg:#0b1322;--nav-hero:#172a4a;--nav-hover:#172338;--nav-active:#223354;--nav-line:#2a3a55;--nav-muted:#a9b8d2;--nav-avatar:#263a5e;--ok-bg:#15302a;--ok-bg-strong:#1b3d34;--ok-fg:#7fd3b4;--ok-line:#2a5a4a;--ok-dot:#4fae8a;--warn-bg:#332913;--warn-bg-soft:#2c2412;--warn-bg-strong:#45361a;--warn-fg:#f0c46a;--warn-fg-strong:#f7d58e;--warn-line:#5a4a24;--warn-dot:#d9a441;--err-bg:#3a1f1d;--err-fg:#f09a8f;--err-line:#5c2f2a;--leave-bg:#2a2340;--leave-fg:#c9b1e6;--leave-dot:#9d82c4;--sick-bg:#352619;--sick-fg:#e0b48f;--sick-dot:#c58a5e}.brand-logo{filter:brightness(1.05)}.help-figure img,.legal-page img{background:#fff;border-radius:6px}}