*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#edf3f3;--panel:#fff;--panel2:#f4f8f8;--line:#dde8e8;--line2:#c6d7d7;--ink:#162336;--mut:#4e5f70;
--mut2:#8497a3;--neu:#4e818d;--bestand:#78b9dc;--attack:#6eb3b9;--storno:#eb5e5f;--cc:#b3cfd6;--gold:#4e818d;
--wirk:#b3a06e;--radius:14px}
table.mtx td,table.mtx th{font-size:12px;padding:4px 7px;white-space:nowrap}
table.mtx td.hi,table.mtx th.hi{background:rgba(179,160,110,.18)}
table.mtx td.fill{background:rgba(120,185,220,.14)}
table.mtx td.hi.fill{background:rgba(179,160,110,.34)}
table.mtx tr.blk td{background:var(--panel2);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
table.mtx tr.blk.neg td{color:var(--storno)}
table.mtx tr.sum td{background:#e9eff0;font-weight:700}
table.mtx tr.sum.neg td{color:var(--storno)}
table.mtx tr.grand td{background:var(--ink);color:#fff;font-weight:700}
table.mtx tr.grand td.hi{background:#2b3f57}
table.mtx td.ind{padding-left:26px;color:var(--mut)}
table.mtx tr.neg td{color:var(--storno)}

body{font-family:'Century Gothic','Questrial','URW Gothic','Avant Garde',sans-serif;background:var(--bg);
color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased;min-height:100vh;
background-image:radial-gradient(1100px 600px at 85% -12%,rgba(78,129,141,.1),transparent),
radial-gradient(900px 520px at -8% 108%,rgba(22,35,54,.05),transparent)}
::selection{background:var(--gold);color:#fff}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 34px;flex-wrap:wrap;
background:linear-gradient(180deg,#fff,var(--panel2));border-bottom:3px solid var(--gold)}
.eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--gold);font-weight:600}
h1{font-weight:800;font-size:30px;letter-spacing:-.01em;line-height:1.05;margin-top:6px}
h1 b{color:var(--gold);font-weight:700}
.meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px;color:var(--mut);text-align:right}
.stand{font-family:ui-monospace,monospace;color:var(--mut2)}
.filterbar{display:flex;align-items:center;gap:10px;padding:13px 34px;background:var(--panel);
border-bottom:1px solid var(--line);flex-wrap:wrap}
.flabel{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut2);font-weight:700}
select,button{font-family:inherit;font-size:13px;padding:7px 11px;border:1px solid var(--line2);border-radius:9px;
background:#fff;color:var(--ink)}
button{cursor:pointer;font-weight:600}button:hover{background:var(--panel2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tabs{display:flex;gap:3px;padding:0 34px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto}
.tab{padding:13px 14px;font-size:13px;font-weight:600;color:var(--mut);cursor:pointer;white-space:nowrap;
border-bottom:3px solid transparent;display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--ink)}.tab.on{color:var(--ink);border-bottom-color:var(--gold)}
.tab .dot{width:8px;height:8px;border-radius:50%}
main{padding:22px 34px 60px;max-width:1560px;margin:0 auto}
.view{display:none}.view.on{display:block}
.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:13px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px}
.kpi .l{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2);font-weight:700}
.kpi .v{font-size:25px;font-weight:800;letter-spacing:-.02em;margin:8px 0 3px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:11.5px;color:var(--mut);line-height:1.45}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
box-shadow:0 1px 3px rgba(22,35,54,.05);margin-bottom:16px}
.panel h3{font-size:14px;font-weight:700}
.ph-sub{font-size:11.5px;color:var(--mut2);margin:4px 0 14px;line-height:1.55}
.cw{position:relative;height:300px}.cw.sm{height:240px}.cw.lg{height:350px}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:11.5px;color:var(--mut);margin-top:11px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:8px 9px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top}
th.l,td.l{text-align:left}
thead th{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut2);font-weight:700;
border-bottom:1.5px solid var(--line2);position:sticky;top:0;background:var(--panel);z-index:1}
td{font-variant-numeric:tabular-nums}tbody tr:hover{background:var(--panel2)}
tr.sum td{font-weight:700;background:var(--panel2)}
tr.grand td{font-weight:800;background:#e6eff0;border-top:2px solid var(--gold)}
.neg{color:var(--storno)}.pos{color:#2f7d62}
.scroll{max-height:440px;overflow:auto;border-radius:10px}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:2px 7px;border-radius:20px;background:var(--panel2);border:1px solid var(--line2);color:var(--mut)}
.tag.ok{background:#eaf3f0;border-color:#bcd9cf;color:#2f6b56}
.tag.warn{background:#fdf3e7;border-color:#eed7b4;color:#8a5a1a}
.tag.bad{background:#fdecec;border-color:#f3c9c9;color:#a33}
.tag.od{background:#eaf1f3;border-color:#bcd3da;color:#3d6b78}
.goals{display:flex;flex-direction:column;gap:15px}
.gh{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;gap:12px}
.gh b{font-variant-numeric:tabular-nums;white-space:nowrap}
.gbar{height:9px;border-radius:5px;background:var(--line);overflow:hidden;display:flex}
.gbar span{display:block;height:100%}
.note{font-size:11.5px;color:var(--mut2);line-height:1.6;margin-top:11px}
.warnbox{background:#fdf7ec;border:1px solid #eed7b4;border-left:4px solid #d59b3c;border-radius:12px;
padding:14px 16px;margin-bottom:16px;font-size:12.5px;line-height:1.65;color:#6b4e1f}
.warnbox b{color:#4a3512}
footer{padding:18px 34px 40px;font-size:11px;color:var(--mut2);max-width:1560px;margin:0 auto;line-height:1.7}
@media(max-width:1100px){.g2{grid-template-columns:1fr}}
@media(max-width:768px){main,header,.filterbar,.tabs{padding-left:15px;padding-right:15px}h1{font-size:22px}
.meta{align-items:flex-start;text-align:left}}

/* ===== Neu: Header-Logo, Nutzer-Box, Sichtbarkeits-Klasse ===== */
.brand{display:flex;align-items:center;gap:18px}
.logo{height:44px;width:auto;display:block}
.hide{display:none!important}
.userbox{display:flex;gap:8px;align-items:center;margin-top:6px}
.userbox span{font-weight:600;color:var(--ink)}
.userbox button{padding:4px 10px;font-size:12px}

/* ===== Neu: Fehler-/Hinweisbanner (Chart.js-Fallback, Ladefehler) ===== */
.banner{background:#fdf7ec;border:1px solid #eed7b4;border-left:4px solid #d59b3c;border-radius:12px;
 padding:12px 16px;margin:14px 34px 0;font-size:12.5px;line-height:1.6;color:#6b4e1f}

/* ===== Neu: Modal (Passwort aendern) ===== */
.overlay{position:fixed;inset:0;background:rgba(22,35,54,.45);display:flex;align-items:center;
 justify-content:center;z-index:50}
.modal{background:#fff;border-radius:var(--radius);padding:24px 26px;width:340px;max-width:92vw;
 box-shadow:0 12px 40px rgba(22,35,54,.25)}
.modal h3{margin-bottom:14px}
.modal label{display:block;font-size:12px;color:var(--mut);margin:12px 0 5px}
.modal input{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--line2);border-radius:8px}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.modal .err{color:var(--storno);font-size:12px;margin-top:8px;min-height:1.4em}

/* ===== Neu: Login-Seite ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;
 width:360px;max-width:92vw;box-shadow:0 12px 40px rgba(22,35,54,.08);text-align:center}
.login-box .logo{height:52px;margin:0 auto 18px}
.login-box h1{font-size:20px;margin-bottom:4px}
.login-box .sub{font-size:12px;color:var(--mut2);margin-bottom:22px}
.login-field{text-align:left;margin-bottom:14px}
.login-field label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}
.login-field input{width:100%;font-size:14px;padding:9px 11px;border:1px solid var(--line2);border-radius:9px}
.login-box button{width:100%;padding:10px;font-size:14px;background:var(--gold);color:#fff;border:none;margin-top:6px}
.login-box button:hover{opacity:.92;background:var(--gold)}
.login-error{color:var(--storno);font-size:12.5px;margin-top:12px;min-height:1.4em}

/* ===== Neu: Nutzer-Management ===== */
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.form-row .field{display:flex;flex-direction:column;gap:5px}
.form-row .field label{font-size:11px;color:var(--mut2);text-transform:uppercase;letter-spacing:.06em}
.form-row input,.form-row select{font-size:13px;padding:7px 10px;border:1px solid var(--line2);border-radius:8px}
.otp{background:#eaf3f0;border:1px solid #bcd9cf;border-radius:10px;padding:12px 14px;margin:10px 0;
 font-family:ui-monospace,monospace;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.tag.admin{background:#eef5f6;border-color:var(--gold);color:var(--gold)}
.err-line{color:var(--storno);font-size:12.5px;margin:8px 0}