:root{
  --bg:#eef1f4; --surface:#fff; --ink:#1b2430; --muted:#5d6b7a; --line:#d5dbe2;
  --brand:#1f4e79; --brand-ink:#fff; --brand-soft:#e1ebf4;
  --ok:#2f7d4f; --warn:#b4541a; --info:#3b6ea5; --neutral:#6b5b8a;
  --danger:#b3261e; --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #f2b705;outline-offset:2px}
header{background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;flex-wrap:wrap}
header h1{font-size:1.05rem;margin:0 1rem 0 0;font-weight:650}
nav{display:flex;gap:.25rem;flex:1}
nav button{background:transparent;border:0;color:#cfdeec;padding:.5rem .9rem;border-radius:8px}
nav button[aria-current=page]{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.who{font-size:.9rem;color:#cfdeec;display:flex;gap:.75rem;align-items:center}
.who button{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:8px;padding:.3rem .7rem}
main{max-width:1100px;margin:0 auto;padding:1.25rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
h2{font-size:1.25rem;margin:0 0 1rem}
h3{font-size:1.05rem;margin:1.5rem 0 .5rem}
.crumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;min-height:2.2rem}
.crumb{background:var(--brand-soft);border:0;border-radius:999px;padding:.3rem .8rem;font-size:.9rem;color:var(--brand)}
.crumb:hover{background:#cfe0ef}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem}
.choice{background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);padding:1.1rem .75rem;font-size:1.1rem;font-weight:550;min-height:4.2rem}
.choice:hover{border-color:var(--brand);background:#f6f9fc}
.choice.big{min-height:6rem;font-size:1.3rem}
.choice.o-Löst{border-color:var(--ok)} .choice.o-Eskalerat{border-color:var(--warn)}
.choice.o-Kontakt{border-color:var(--info)} .choice.o-VB{border-color:var(--neutral)}
.choice.o-Löst:hover{background:#eaf5ee} .choice.o-Eskalerat:hover{background:#fbefe6}
.choice.o-Kontakt:hover{background:#e9f0f8} .choice.o-VB:hover{background:#f0ecf6}
.bar{display:flex;gap:.75rem;align-items:center;margin-top:1.25rem;flex-wrap:wrap;color:var(--muted)}
.btn{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:.55rem 1rem;font-weight:600}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.btn:disabled{opacity:.5;cursor:default}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:10px;max-width:90vw}
.toast.err{background:var(--danger)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.seg button{border:0;background:transparent;padding:.5rem 1rem}
.seg button{cursor:pointer}
.seg button:hover{background:#eef2f6}
.seg button[aria-pressed=true]{background:var(--brand);color:#fff;font-weight:700;box-shadow:inset 0 -3px 0 rgba(255,255,255,.55)}
.seg button[aria-pressed=true]::before{content:'\2713\00a0'}
.tools{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.range{font-weight:600}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin-bottom:1.25rem}
.stat{border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .9rem;background:#fafbfc}
.stat b{display:block;font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:.88rem}
.stat.total{background:var(--brand);border-color:var(--brand);color:#fff}
.stat.total span{color:#cfdeec}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:.45rem .6rem;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-size:.88rem;color:var(--muted);font-weight:600}
tr.div td{background:#f1f5f9;font-weight:650}
tr.unit td:first-child{padding-left:1.6rem}
tr.grand td{font-weight:700;border-top:2px solid var(--ink)}
.empty{padding:2rem;text-align:center;color:var(--muted)}
form.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;align-items:end}
label{display:grid;gap:.25rem;font-size:.9rem;color:var(--muted)}
input,select{border:1px solid var(--line);border-radius:8px;padding:.5rem .65rem;background:#fff;color:var(--ink)}
.login{max-width:380px;margin:12vh auto}
.login form{display:grid;gap:1rem}
.err{color:var(--danger);min-height:1.3em;margin:0}
.off{opacity:.55}
@media (max-width:600px){main{padding:.75rem}.panel{padding:1rem}}
@media (prefers-reduced-motion:no-preference){.toast{animation:in .15s ease-out}@keyframes in{from{opacity:0;transform:translate(-50%,8px)}}}

.hint{color:var(--muted);margin:0 0 1rem}
label.inline{display:inline-flex;gap:.5rem;align-items:center}
.adjust{border-top:8px solid var(--chcolor)}
.adjust.ch-phone{--chcolor:#1f6f4a}
.adjust.ch-email{--chcolor:#7a3fa0}
.chbanner{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;background:var(--chcolor);color:#fff;border-radius:8px;padding:.7rem 1.1rem;margin-bottom:1rem}
.chbanner b{font-size:1.8rem;letter-spacing:.06em}
.chbanner span{font-size:1.05rem;text-transform:capitalize;opacity:.95}
.adjust thead th:first-child{color:var(--chcolor);font-weight:700}
.adjust .seg button[aria-pressed=true]{background:var(--chcolor)}
input.cnt{width:5.2rem;text-align:right;padding:.3rem .45rem;font-variant-numeric:tabular-nums}
input.cnt.saving{border-color:#c9a227;background:#fff8e1}
input.cnt.saved{border-color:var(--ok);background:#eaf5ee}
input.cnt.bad{border-color:var(--danger);background:#fdeceb}
tr.edit td{background:#f1f5f9}
.adjinfo{font-weight:600;color:var(--ink)}

.choice.chsel{border-width:3px;font-weight:700}
.choice.chsel.ch-phone{border-color:#1f6f4a;color:#1f6f4a} .choice.chsel.ch-phone:hover{background:#e6f3ec}
.choice.chsel.ch-email{border-color:#7a3fa0;color:#7a3fa0} .choice.chsel.ch-email:hover{background:#f1e9f6}
.adjust .choice:not(.o-Löst):not(.o-Eskalerat):not(.o-Kontakt):not(.o-VB){border-color:var(--chcolor)}
.adjust .crumb{border-color:var(--chcolor);color:var(--chcolor)}

main.wide{max-width:min(1680px,97vw)}
table.users td:last-child{white-space:normal;min-width:15rem}
table.users td:last-child .btn{margin:.1rem 0}

.pwform{display:grid;gap:1rem;max-width:380px}
header .who .namelink{background:transparent;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
header .who .namelink[aria-current=page]{font-weight:700}

.recent{margin-top:1.75rem;border-top:1px solid var(--line);padding-top:1rem}
.recent h3{margin:0 0 .6rem}
.recentlist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.recentlist li{display:flex;align-items:center;gap:.75rem;border:1px solid var(--line);border-left:6px solid var(--chcolor,var(--line));border-radius:8px;padding:.4rem .7rem;background:#fafbfc}
.recentlist li.ch-phone{--chcolor:#1f6f4a}
.recentlist li.ch-email{--chcolor:#7a3fa0}
.recentlist .when{font-variant-numeric:tabular-nums;color:var(--muted);min-width:4.5rem}
.recentlist .what{flex:1}
.recentlist .btn{padding:.3rem .8rem}
.recentlist .out{font-weight:700}
.recentlist .actions{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.recentlist .sure{font-weight:600}
@media (max-width:600px){.recentlist li{flex-wrap:wrap}.recentlist .actions{width:100%;justify-content:flex-start}}