:root{
  --bg:#f4f6f9; --surface:#ffffff; --ink:#1e2733; --muted:#6b7686;
  --line:#e2e7ef; --line-strong:#cdd5e0;
  --primary:#24557f; --primary-dark:#1b4163; --primary-soft:#eaf1f8;
  --ok:#216e4e; --ok-soft:#e7f4ee;
  --warn:#9a5b06; --warn-soft:#fbefdc;
  --danger:#b42318; --danger-soft:#fbe9e7;
  --radius:10px; --shadow:0 1px 2px rgba(20,30,45,.06),0 2px 8px rgba(20,30,45,.05);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.5}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 16px}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.45rem;letter-spacing:-.01em;margin:.6em 0 .5em}
h2{font-size:1.1rem;margin:1.4em 0 .5em}
small,.muted{color:var(--muted)}

/* Topbar */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-in{display:flex;align-items:center;gap:14px;min-height:56px;flex-wrap:wrap}
.brand{font-weight:700;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.mainnav{display:flex;gap:4px;flex:1}
.mainnav a{padding:8px 12px;border-radius:8px;color:var(--ink);font-weight:500}
.mainnav a:hover{background:var(--primary-soft);text-decoration:none}
.mainnav a.active{background:var(--primary-soft);color:var(--primary-dark)}
.userbox{display:flex;align-items:center;gap:12px;margin-left:auto}
.uname{color:var(--muted);font-size:.9rem}
.logout{font-size:.9rem}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);
  border-radius:8px;font-size:1.1rem;padding:4px 10px;cursor:pointer;margin-left:auto}

/* Layout helpers */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin:14px 0}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1;min-width:0}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.spacer{flex:1}
.foot{color:var(--muted);font-size:.82rem;padding:24px 16px 40px}

/* Buttons */
.btn{display:inline-block;background:var(--primary);color:#fff;border:1px solid var(--primary);
  padding:9px 16px;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;
  text-align:center}
.btn:hover{background:var(--primary-dark);border-color:var(--primary-dark);text-decoration:none}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn.secondary:hover{background:#f3f5f9}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btn.small{padding:5px 10px;font-size:.85rem}

/* Forms */
label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 4px}
label .opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;
  border-color:var(--primary)}
textarea{min-height:90px;resize:vertical}
.field-row{display:flex;gap:14px;flex-wrap:wrap}
.field-row>div{flex:1;min-width:180px}
.help{font-size:.82rem;color:var(--muted);margin-top:4px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:8px 16px 16px;margin:16px 0}
legend{font-weight:700;padding:0 6px;color:var(--primary-dark)}

/* Tables */
table{width:100%;border-collapse:collapse;background:var(--surface)}
.table-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#f7f9fc;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
tbody tr:hover{background:#f8fafc}
td.num{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Badges */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600;
  border:1px solid transparent;white-space:nowrap}
.badge.status{background:var(--primary-soft);color:var(--primary-dark);border-color:#d3e2f1}
.prio-normal{background:#eef1f5;color:#4a5667;border-color:#dde3ec}
.prio-dringend{background:var(--warn-soft);color:var(--warn);border-color:#f0d9ad}
.prio-notfall{background:var(--danger-soft);color:var(--danger);border-color:#f3c4bd}
.tag-overdue{background:var(--danger-soft);color:var(--danger);border-color:#f3c4bd}

/* Flash */
.flash{padding:11px 14px;border-radius:8px;margin:14px 0;border:1px solid}
.flash-ok{background:var(--ok-soft);color:var(--ok);border-color:#bfe3d0}
.flash-err{background:var(--danger-soft);color:var(--danger);border-color:#f3c4bd}
.flash-info{background:var(--primary-soft);color:var(--primary-dark);border-color:#d3e2f1}

/* History */
.hist{list-style:none;margin:0;padding:0}
.hist li{padding:10px 0;border-bottom:1px solid var(--line)}
.hist .meta{font-size:.8rem;color:var(--muted)}

/* Auth screens */
.auth{max-width:380px;margin:7vh auto}
.auth .card{padding:24px}

/* Subnav (Stammdaten-Reiter) */
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.subnav a{padding:7px 13px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink);font-size:.9rem}
.subnav a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.subnav a:hover{text-decoration:none}

/* Dashboard tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow)}
.tile .n{font-size:1.8rem;font-weight:700;line-height:1}
.tile .l{color:var(--muted);font-size:.85rem;margin-top:6px}
.tile:hover{border-color:var(--line-strong)}
.tile.alert .n{color:var(--danger)}

/* Mobile */
@media(max-width:760px){
  .nav-toggle{display:block}
  .mainnav,.userbox{display:none;width:100%}
  body.nav-open .mainnav{display:flex;flex-direction:column;gap:2px;order:3}
  body.nav-open .userbox{display:flex;order:4;margin:8px 0 4px}
  .responsive thead{display:none}
  .responsive,.responsive tbody,.responsive tr,.responsive td{display:block;width:100%}
  .responsive tr{border:1px solid var(--line);border-radius:var(--radius);margin:10px 0;
    background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
  .responsive td{border:none;border-bottom:1px solid var(--line);padding:9px 14px}
  .responsive td:last-child{border-bottom:none}
  .responsive td::before{content:attr(data-label);display:block;font-size:.72rem;
    text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:2px}
  .table-card{border:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}