:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-paper: #f4f4f5;
  --fg: #0a0a0a;
  --fg-soft: #3f3f46;
  --muted: #71717a;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --radius: 0px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --red: #dc2626;
  --green: #16a34a;
  --line-3: #18181b;
  --rail-w: 64px;
  --topbar-h: 56px;
  --statusbar-h: 30px;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--sans); background: var(--bg-paper); color: var(--fg);
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 480px; margin: 0 auto; padding: 64px 20px; }
.wrap-wide { max-width: 1040px; margin: 0 auto; padding: 32px 24px 64px; }
h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
p.sub { color: var(--muted); font-size: 13px; margin: 0 0 28px; }
.card { background: var(--bg); border: 1px solid var(--line); padding: 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; font-size: 14px; background: var(--bg); color: var(--fg);
}
.field textarea { resize: vertical; min-height: 72px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--fg); outline-offset: -1px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--bg-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-primary:hover { background: #262626; }
.btn-primary:disabled:hover { background: var(--fg); }
.btn-danger { color: var(--red); border-color: #fca5a5; }
.btn-danger:hover { background: #fef2f2; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.msg { padding: 10px 14px; font-size: 13px; margin-bottom: 16px; border: 1px solid; }
.msg-error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.msg-ok { background: #f0fdf4; border-color: #86efac; color: #14532d; }
a { color: var(--fg); }
.foot-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.logo-mark { width: 28px; height: 28px; background: var(--fg); display: inline-block; margin-bottom: 20px; }

/* Admin-Tabelle */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--line-strong); background: var(--bg-soft); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap; }
.badge-role { background: var(--bg-soft); color: var(--fg-soft); border: 1px solid var(--line); }
.badge-admin { background: var(--fg); color: var(--bg); }
.badge-inaktiv { background: #fef2f2; color: #991b1b; }
.badge-pending { background: #fffbeb; color: #92400e; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }

.kb-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex;
  align-items: center; justify-content: center; z-index: 1000; }
.kb-modal { background: var(--bg); border: 1px solid var(--line-strong); width: 420px; max-width: 92vw; }
.kb-modal-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.kb-modal-body { padding: 20px; }
.kb-modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* ── Stammdaten-Verwaltungsseiten (Adressen/Mitarbeiter/Objekte/Lieferanten) ── */
.page{max-width:1200px;margin:24px auto 80px;padding:0 16px;}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.page-head h2{font-size:20px;font-weight:700;margin:0;}
.page-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.search-input{flex:1;min-width:200px;max-width:320px;padding:7px 10px;border:1px solid var(--line-strong);font-size:13px;}
.chip{padding:4px 10px;border:1px solid var(--line);border-radius:20px;font-size:11px;cursor:pointer;background:var(--bg-soft);}
.chip.active{background:var(--fg);color:var(--bg);border-color:var(--fg);}
.chk-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;}
table.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{text-align:left;padding:8px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line-strong);white-space:nowrap;}
.data-table td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--bg-soft);}
.data-table tr.inaktiv td{opacity:.5;}
.kuerzel-badge{display:inline-block;font-family:monospace;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;background:#eef2ff;color:#4338ca;}
.section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 0 8px;}
.section-label:first-child{margin-top:0;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.toast{position:fixed;bottom:44px;right:24px;background:var(--fg);color:var(--bg);padding:9px 14px;font-size:13px;z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;}
.toast.show{opacity:1;}

/* ═══════════════════════════════════════════════════════════════════
   Side-Rail (Navigation) — portiert aus app_nexov4/shared/nav.js +
   shared/nexo.css (Komponente KBAppBar). Klassennamen/Optik 1:1
   übernommen; body-Padding ist auf body.has-rail gescopt statt global,
   weil admin.css auch von rail-losen Seiten (Login, Passwort
   vergessen/setzen, Einladung annehmen) genutzt wird — nav-rail.js
   setzt die Klasse selbst beim Mounten.
   ═══════════════════════════════════════════════════════════════════ */
body.has-rail { padding-left: var(--rail-w); padding-bottom: var(--statusbar-h); }

.kb-appbar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w);
  background: var(--fg); color: var(--bg);
  display: flex; flex-direction: column; z-index: 300;
  border-right: 1px solid var(--line-3); overflow: hidden;
}
.kb-appbar-top {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  height: auto; min-height: var(--topbar-h); border-bottom: 1px solid var(--line-3);
  flex-shrink: 0; overflow: visible;
}
.kb-home {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 14px auto;
  background: var(--bg); color: var(--fg); font-weight: 800; font-size: 0;
  letter-spacing: -0.04em; border: none; text-decoration: none; flex-shrink: 0; position: relative;
}
.kb-home:hover { background: var(--bg); color: var(--fg); }
.kb-home svg, .kb-home > * { display: none; }
.kb-home::after {
  content: 'N'; font-family: var(--sans); font-weight: 800; font-size: 14px;
  color: var(--fg); letter-spacing: -0.04em;
}
.kb-procnav {
  display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto;
  overflow-y: auto; overflow-x: hidden; padding: 8px 0; width: 100%;
}
.kb-procstep {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; height: auto; gap: 2px;
  border-left: 3px solid transparent; text-decoration: none; color: #a1a1aa;
  white-space: normal; text-align: center; transition: color .12s, background .12s, border-left-color .12s;
  padding: 6px 2px; width: 100%; flex-shrink: 0; overflow: hidden;
}
.kb-procstep:hover { color: var(--bg); background: #18181b; }
.kb-procstep-label {
  font-size: 9px; font-weight: 600; color: inherit; line-height: 1;
  max-width: 100%; letter-spacing: 0.02em; word-break: break-word; hyphens: auto;
}
.kb-procstep-active { color: var(--bg); background: #27272a; border-left-color: var(--red); }
.kb-procstep-active svg { color: var(--red); }
.kb-procstep-disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.kb-statusbar {
  position: fixed; bottom: 0; left: var(--rail-w); right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 20px; background: var(--bg); border-top: 1px solid var(--line-3);
  font-size: 11px; color: var(--muted); z-index: 200; min-height: var(--statusbar-h);
  font-family: var(--sans);
}
.kb-statusbar-folder {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono, monospace);
  font-size: 11px; color: var(--fg);
}
.kb-statusbar-right { display: flex; align-items: center; gap: 12px; }
.kb-statusbar-right a { color: var(--muted); font-size: 11px; }
.kb-statusbar-right a:hover { color: var(--fg); }