/* nrOffice – Design-Tokens, Reset, Grundlayout. Kein Framework, kein Build. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --radius: 12px;
  --radius-sm: 8px;
  --schnell: 120ms;
  --kopfhoehe: 52px;
  --statushoehe: 30px;
  --spalten: 104px;
  --zeilenhoehe: 26px;
  --kopfspalten: 44px;
  --schrift: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'Cascadia Mono', Consolas, 'SF Mono', monospace;
}

:root[data-theme='dunkel'] {
  --bg: #0b0b12;
  --bg2: #12121c;
  --bg3: #1a1a28;
  --bg4: #222233;
  --fg: #e9e9f0;
  --fg2: #9a9aad;
  --fg3: #6f6f88;
  --border: #232331;
  --border-hell: #34344a;
  --haupt: #22d3ee;
  --haupt-fg: #06212a;
  --akzent: #ffb64d;
  --ok: #4ade80;
  --warn: #fbbf24;
  --fehler: #f87171;
  --schatten: 0 10px 30px rgba(0, 0, 0, .45);
  --papier: #14141f;
  --auswahl: rgba(34, 211, 238, .16);
  --gitter: #1c1c2b;
}

:root[data-theme='hell'] {
  --bg: #f4f5fa;
  --bg2: #ffffff;
  --bg3: #eef0f7;
  --bg4: #e2e5f0;
  --fg: #14141d;
  --fg2: #55566b;
  --fg3: #82849b;
  --border: #dfe1ec;
  --border-hell: #c6c9dc;
  --haupt: #0891b2;
  --haupt-fg: #ffffff;
  --akzent: #b45309;
  --ok: #15803d;
  --warn: #a16207;
  --fehler: #c02626;
  --schatten: 0 10px 28px rgba(20, 20, 40, .12);
  --papier: #ffffff;
  --auswahl: rgba(8, 145, 178, .14);
  --gitter: #e8eaf3;
}

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid var(--haupt); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--auswahl); }

/* Rollbalken dezent halten */
* { scrollbar-width: thin; scrollbar-color: var(--border-hell) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-hell); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--fg3); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

[hidden] { display: none !important; }
.spacer { flex: 1; }

/* ── Standardknöpfe ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg2); color: var(--fg);
  font-size: 13px; white-space: nowrap;
  transition: background var(--schnell), border-color var(--schnell), color var(--schnell);
}
.btn:hover { background: var(--bg3); border-color: var(--border-hell); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.haupt { background: var(--haupt); color: var(--haupt-fg); border-color: transparent; font-weight: 600; }
.btn.haupt:hover { filter: brightness(1.08); background: var(--haupt); }
.btn.nur-symbol { padding: 6px 8px; }
.btn.aktiv { background: var(--auswahl); border-color: var(--haupt); color: var(--haupt); }
.btn-gefaehr:hover { border-color: var(--fehler); color: var(--fehler); }

/* ── Formularfelder ─────────────────────────────────────────────────────── */
.feld {
  width: 100%; padding: 7px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
}
.feld:focus { border-color: var(--haupt); outline: none; }

@media print {
  body { overflow: visible; background: #fff; color: #000; }
  .top, .side, .status, .toasts, .nur-druck-weg { display: none !important; }
  .layout { display: block !important; height: auto !important; }
  #main { padding: 0 !important; height: auto !important; overflow: visible !important; }
}