/* Heliport — Design-System, eng an AusbildungsHub angelehnt (gleicher Aufbau).
   Token-System, Topbar + sektionierte Sidebar, Primitives 1:1 übernommen. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root, :root[data-theme="light"] {
  --bg-0:#f6f7f9; --bg-1:#ffffff; --bg-2:#fafbfc; --bg-3:#f0f2f5; --bg-hover:#e9ebef;
  --line:#e4e7ec; --line-strong:#d0d5dd; --line-accent:#f6c9a8;
  --fg-0:#1a1f2b; --fg-1:#475067; --fg-2:#6b7588; --fg-3:#9ba3b4;
  /* Akzent = Orange, wie AusbildungsHub */
  --accent:#ea580c; --accent-strong:#c2410c; --accent-dim:#fb923c;
  --accent-bg:rgba(234,88,12,0.10); --accent-bg-strong:rgba(234,88,12,0.18);
  --success:#2f9c5f; --success-bg:rgba(47,156,95,0.1);
  --warn:#b87a14; --warn-bg:rgba(184,122,20,0.1);
  --danger:#c4393e; --danger-bg:rgba(196,57,62,0.1);
  --info:#2563b8; --info-bg:rgba(37,99,184,0.1);
  --night:#4338ca; --night-bg:rgba(67,56,202,0.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05); --shadow-md:0 4px 16px rgba(15,23,42,0.08);
}
:root[data-theme="dark"] {
  --bg-0:#0e1116; --bg-1:#161b22; --bg-2:#1c222b; --bg-3:#232a35; --bg-hover:#2a3140;
  --line:#2a313c; --line-strong:#3a4150; --line-accent:#7c4a25;
  --fg-0:#e6e8eb; --fg-1:#b8bdc6; --fg-2:#8a90a0; --fg-3:#5d6472;
  --accent:#f97316; --accent-strong:#fb923c; --accent-dim:#c2410c;
  --accent-bg:rgba(249,115,22,0.14); --accent-bg-strong:rgba(249,115,22,0.24);
  --success:#4ec78a; --success-bg:rgba(78,199,138,0.12);
  --warn:#d4a050; --warn-bg:rgba(212,160,80,0.12);
  --danger:#e06868; --danger-bg:rgba(224,104,104,0.12);
  --info:#5b95d6; --info-bg:rgba(91,149,214,0.12);
  --night:#818cf8; --night-bg:rgba(129,140,248,0.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3); --shadow-md:0 4px 12px rgba(0,0,0,0.25);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg-0); color:var(--fg-0);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
button { font-family:inherit; cursor:pointer; }
input, select { font-family:inherit; }
.muted { color:var(--fg-2); }
.small { font-size:12.5px; }
.center { text-align:center; }
.mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.92em; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:5px; border:2px solid var(--bg-0); }

/* ============ APP-SHELL ============ */
.app { display:grid; grid-template-columns:248px 1fr; grid-template-rows:56px 1fr;
  grid-template-areas:"topbar topbar" "sidebar main"; min-height:100vh; background:var(--bg-0); }
.app[data-collapsed="true"] { grid-template-columns:0 1fr; }
.app[data-collapsed="true"] .sidebar { display:none; }

/* ============ TOPBAR ============ */
.topbar { grid-area:topbar; display:flex; align-items:center; gap:20px;
  background:var(--bg-1); border-bottom:1px solid var(--line); padding:0 20px;
  position:sticky; top:0; z-index:50; }
.topbar-toggle { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center;
  justify-content:center; border:0; background:transparent; color:var(--fg-2);
  border-radius:6px; transition:all .12s; }
.topbar-toggle:hover { background:var(--bg-3); color:var(--fg-0); }
.topbar-brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px;
  color:var(--fg-0); padding-right:20px; border-right:1px solid var(--line); height:100%; }
.topbar-brand:hover { text-decoration:none; }
.topbar-mark { width:28px; height:28px; background:var(--accent); border-radius:7px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.topbar-version { font-size:11px; color:var(--fg-3); font-weight:400; margin-left:4px; }
.topbar-status { flex:1; display:flex; align-items:center; gap:16px; color:var(--fg-2); font-size:13px; }
.topbar-status .dot { width:7px; height:7px; background:var(--success); border-radius:50%; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.user-chip { display:flex; align-items:center; gap:10px; padding:0 12px 0 4px; height:34px;
  border:1px solid var(--line); border-radius:7px; background:var(--bg-1); color:var(--fg-0); }
.user-chip:hover { border-color:var(--line-strong); text-decoration:none; }
.user-chip-avatar { width:26px; height:26px; background:var(--accent-bg-strong); color:var(--accent);
  border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:11px; }
.user-chip-name { color:var(--fg-0); font-size:13px; font-weight:500; }
.chip-form { display:inline-flex; }

/* ============ SIDEBAR ============ */
.sidebar { grid-area:sidebar; background:var(--bg-1); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden; padding:12px 0; }
.sidebar-section { padding:12px 20px 6px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--fg-3); }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; padding:0 10px; }
.sidebar-item { display:flex; align-items:center; gap:12px; padding:9px 12px; color:var(--fg-1);
  font-size:14px; font-weight:500; border-radius:7px; text-decoration:none; transition:all .1s; }
.sidebar-item:hover { background:var(--bg-3); color:var(--fg-0); text-decoration:none; }
.sidebar-item.active { background:var(--accent-bg); color:var(--accent); }
.sidebar-item-icon { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sidebar-item-label { flex:1; white-space:nowrap; overflow:hidden; }
.sidebar-item-badge { font-size:11px; font-weight:600; background:var(--warn); color:#fff;
  padding:1px 7px; border-radius:10px; min-width:20px; text-align:center; }
.sidebar-footer { margin-top:auto; padding:12px 20px; border-top:1px solid var(--line);
  font-size:12px; color:var(--fg-3); display:flex; justify-content:space-between; align-items:center; }
.sidebar-collapse-btn { width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; color:var(--fg-2); background:transparent; border:0; transition:all .12s; }
.sidebar-collapse-btn:hover { background:var(--bg-3); color:var(--fg-0); }

/* ============ MAIN + PAGE-HEADER ============ */
.main { grid-area:main; overflow:auto; background:var(--bg-0); }
.page-header { display:flex; align-items:center; justify-content:space-between;
  padding:24px 32px; background:var(--bg-0); flex-wrap:wrap; gap:12px;
  max-width:1180px; margin-inline:auto; }
.page-header-left { display:flex; flex-direction:column; gap:4px; }
.page-title { font-size:22px; font-weight:600; color:var(--fg-0); margin:0; letter-spacing:-.01em; }
.page-meta { font-size:13px; color:var(--fg-2); }
.page-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.page-content { padding:0 32px 60px; max-width:1180px; margin-inline:auto; }
.content { padding:24px 32px 60px; max-width:1180px; margin-inline:auto; }
/* Kompatibilität: alte .page-head/.sub/.head-row aus v0.x weiter unterstützt */
.page-head { display:flex; flex-direction:column; gap:4px; margin:0; }
.page-head h1, .page-title { font-size:22px; font-weight:600; margin:0; letter-spacing:-.01em; }
.page-head .sub { font-size:13px; color:var(--fg-2); }
.head-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* Responsive Shell */
@media (max-width:900px) and (min-width:641px) {
  .app { grid-template-columns:64px 1fr; }
  .app[data-collapsed="true"] { grid-template-columns:0 1fr; }
  .sidebar-section { height:8px; opacity:0; padding:0; }
  .sidebar-item { justify-content:center; padding:9px; }
  .sidebar-item-label, .sidebar-item-badge { display:none; }
  .sidebar-footer { justify-content:center; }
}
@media (max-width:640px) {
  .app { grid-template-columns:1fr; grid-template-rows:56px 1fr 58px; grid-template-areas:"topbar" "main" "sidebar"; }
  .topbar-toggle, .topbar-status, .topbar-version, .user-chip-name { display:none; }
  .topbar-brand { border-right:none; padding-right:8px; }
  .sidebar { flex-direction:row; overflow-x:auto; padding:0; border-right:none; border-top:1px solid var(--line); }
  .sidebar-section, .sidebar-footer { display:none; }
  .sidebar-nav { flex-direction:row; flex:1; padding:0; gap:0; }
  .sidebar-item { flex:1; flex-direction:column; gap:2px; font-size:10.5px; border-radius:0; min-width:64px; padding:8px 4px; }
  .sidebar-item.active { background:transparent; border-bottom:2px solid var(--accent); }
  .page-header, .page-content, .content { padding-left:16px; padding-right:16px; }
}

/* ============ AUTH (Login/Setup) ============ */
.auth-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--bg-1), var(--bg-0)); }
.auth-shell > * { width:100%; max-width:440px; }
.auth-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px;
  font-size:18px; font-weight:700; color:var(--fg-0); }

/* ============ TYPO ============ */
h1 { font-size:22px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em; }
h2 { font-size:14px; font-weight:600; margin:22px 0 10px; color:var(--fg-0); }

/* ============ PRIMITIVES: Buttons ============ */
button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 14px; border:1px solid var(--accent); background:var(--accent); color:#fff;
  font-size:13px; font-weight:500; border-radius:7px; height:36px; transition:all .12s; text-decoration:none; }
button:hover, .btn:hover { background:var(--accent-strong); border-color:var(--accent-strong); text-decoration:none; }
.btn.ghost, button.ghost { background:var(--bg-1); border-color:var(--line); color:var(--fg-0); }
.btn.ghost:hover, button.ghost:hover { background:var(--bg-3); border-color:var(--line-strong); }
.btn.danger, button.danger { background:transparent; border-color:var(--danger); color:var(--danger); }
.btn.danger:hover, button.danger:hover { background:var(--danger-bg); }
.btn-sm { height:30px; padding:6px 10px; font-size:12px; }
.linkbtn { background:none; border:0; color:var(--accent); padding:3px 4px; font-weight:500; font-size:13px; height:auto; }
.linkbtn:hover { background:none; text-decoration:underline; }
.icon-btn { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--bg-1); color:var(--fg-1); border-radius:7px; transition:all .12s; }
.icon-btn:hover { color:var(--fg-0); background:var(--bg-3); border-color:var(--line-strong); text-decoration:none; }
.block { width:100%; }
.inline { display:inline-flex; gap:6px; align-items:center; }
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px; }

/* ============ PRIMITIVES: Panel / Card ============ */
.card { background:var(--bg-1); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-sm); padding:20px; margin-bottom:18px; }
.card.narrow { max-width:440px; margin:0 auto; }
.panel { background:var(--bg-1); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-sm); }
.panel-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.panel-title { font-size:14px; font-weight:600; color:var(--fg-0); }
.panel-body { padding:20px; }

/* ============ Forms ============ */
label { display:block; margin:12px 0 0; font-size:12px; font-weight:500; color:var(--fg-1); }
input, select { display:block; width:100%; margin-top:6px; padding:9px 12px; background:var(--bg-1);
  color:var(--fg-0); border:1px solid var(--line-strong); border-radius:7px; font-size:14px; transition:all .12s; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
fieldset { border:1px solid var(--line); border-radius:8px; margin:14px 0; padding:6px 16px 16px; }
legend { color:var(--fg-3); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:0 6px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:620px){ .grid2 { grid-template-columns:1fr; } }
.hint { color:var(--fg-2); font-size:12px; margin-top:6px; }
.selfend { align-self:end; margin-top:12px; }

/* ============ Metric-Kacheln (= .stat) ============ */
.stats { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
@media (max-width:820px){ .stats { grid-template-columns:repeat(2,1fr); } }
.stat { padding:18px 20px; background:var(--bg-1); border:1px solid var(--line); border-radius:10px;
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-sm); }
.stat .num { font-size:30px; font-weight:600; color:var(--fg-0); line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat .lbl { font-size:12px; font-weight:500; color:var(--fg-2); order:-1; }
.stat.accent .num { color:var(--accent); }
.stat.night .num { color:var(--night); }

/* ============ Filter-Leiste ============ */
.filter { display:flex; gap:12px; align-items:end; flex-wrap:wrap; background:var(--bg-1);
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.filter label { margin:0; }
.filter input, .filter select { width:auto; margin-top:4px; }

/* ============ Tabellen ============ */
.tablecard { background:var(--bg-1); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
table.grid { width:100%; border-collapse:collapse; }
table.grid th, table.grid td { padding:11px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:13.5px; }
table.grid thead th { background:var(--bg-2); color:var(--fg-2); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
table.grid tbody tr:last-child td { border-bottom:0; }
table.grid tbody tr:hover { background:var(--bg-2); }
table.grid.small th, table.grid.small td { font-size:12px; padding:8px 10px; }
.row-storno td { opacity:.55; text-decoration:line-through; }
.row-superseded td { opacity:.6; }
.rowactions form { margin:2px 0; display:inline-flex; gap:4px; }
.rowactions input { display:inline-block; width:120px; margin:0; }

/* ============ Tags / Badges ============ */
.tag { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; background:var(--bg-3);
  font-size:11px; font-weight:500; color:var(--fg-1); border-radius:12px; white-space:nowrap; }
.tag.ok { background:var(--success-bg); color:var(--success); }
.tag.old { background:var(--bg-3); color:var(--fg-2); }
.tag.storno { background:var(--danger-bg); color:var(--danger); }
.tag.day { background:var(--warn-bg); color:var(--warn); }
.tag.night { background:var(--night-bg); color:var(--night); }
.tag.neutral { background:var(--bg-3); color:var(--fg-3); }

/* ============ Key/Value ============ */
.kv { display:grid; grid-template-columns:200px 1fr; gap:0; margin:4px 0; }
.kv dt { color:var(--fg-2); font-size:13px; padding:10px 0; border-bottom:1px solid var(--line); }
.kv dd { margin:0; padding:10px 0; border-bottom:1px solid var(--line); color:var(--fg-0); }

/* ============ Alerts ============ */
.alert { padding:11px 15px; border-radius:8px; margin:12px 0; font-size:13.5px; border:1px solid transparent; }
.alert.error, .alert.bad { background:var(--danger-bg); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 25%,transparent); }
.alert.ok { background:var(--success-bg); color:var(--success); border-color:color-mix(in srgb,var(--success) 25%,transparent); }
.alert.warn { background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 25%,transparent); }
.alert.info { background:var(--info-bg); color:var(--info); border-color:color-mix(in srgb,var(--info) 22%,transparent); }

/* ============ Integrität / 2FA / Sonne ============ */
.check { display:flex; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.check:last-child { border-bottom:0; }
.check.good { color:var(--success); }
.check.bad { color:var(--danger); }
.errlist { color:var(--danger); font-size:13px; }
.qrwrap { text-align:center; margin:16px 0; }
.qrwrap img { background:#fff; padding:10px; border-radius:8px; border:1px solid var(--line); }
.sunbox { display:flex; gap:22px; flex-wrap:wrap; background:var(--bg-2); border:1px solid var(--line);
  border-radius:8px; padding:14px 16px; margin:14px 0; }
.sunbox .si { font-size:13px; color:var(--fg-0); }
.sunbox .si b { display:block; color:var(--fg-2); font-weight:600; font-size:11px; }

/* ============ Verify-Badge ============ */
.verify-badge { display:inline-block; font-size:20px; font-weight:800; letter-spacing:.02em;
  padding:12px 22px; border-radius:10px; margin:6px 0 12px; }
.verify-badge.ok { background:var(--success-bg); color:var(--success); border:2px solid var(--success); }
.verify-badge.bad { background:var(--danger-bg); color:var(--danger); border:2px solid var(--danger); }
.verify-badge.neutral { background:var(--bg-3); color:var(--fg-2); border:2px solid var(--line-strong); }

/* ============ Codebox ============ */
.codebox { background:var(--bg-2); border:1px solid var(--line); border-radius:7px; padding:12px 14px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; overflow:auto; white-space:pre; color:var(--fg-0); margin:8px 0; }
code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; background:var(--bg-3); padding:1px 5px; border-radius:4px; }

/* ============ Print ============ */
.printpage { background:#fff; color:#111; padding:24px; }
.printpage .grid th { background:#f1f1f1; color:#333; }
.printpage .grid th, .printpage .grid td { border-color:#ccc; }
.print-head h1 { color:#111; }
@media print { a { color:#000; text-decoration:none; } .printpage { padding:0; } }