/* Finanz-Cockpit – Design-Token, Dunkelmodus, gemeinsame Bausteine.
 * Basis: BWA-Dashboard (LagerRent_BWA_Auswertung/frontend/shared/style.css),
 * neu: Dunkelpalette, Benutzerfarben, Cockpit-Kacheln, Ampeln.
 * Keine externen Schriften, keine Fremd-Server. */

:root {
  color-scheme: light dark;

  /* Flaechen */
  --bg: #fafbfc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Text */
  --text: #0f172a;
  --text-muted: #64748b;
  --text-soft: #94a3b8;

  /* Status */
  --pos: #059669;  --pos-bg: #ecfdf5;
  --neg: #dc2626;  --neg-bg: #fef2f2;
  --warn: #b45309; --warn-bg: #fffbeb;
  --info: #2563eb; --info-bg: #eff6ff;

  /* Ampeln */
  --ampel-rot: #dc2626;
  --ampel-gelb: #d97706;
  --ampel-gruen: #059669;
  --ampel-grau: #94a3b8;

  /* Marke (neutral = beide Firmen). LagerRent/MdL ueberschreiben unten. */
  --brand: #0f172a;
  --brand-2: #475569;
  --brand-soft: #e2e8f0;
  --btn-primary-bg: #0f172a;
  --btn-primary-fg: #ffffff;
  --focus-ring: rgba(37, 99, 235, .18);

  /* Benutzerfarben (Name -> Farbe). Werte fuer helle Flaechen. */
  --farbe-gelb: #ca8a04;
  --farbe-blau: #2563eb;
  --farbe-gruen: #16a34a;
  --farbe-violett: #7c3aed;
  --farbe-orange: #ea6a1e;
  --farbe-tuerkis: #0d9488;
  --farbe-rosa: #db2777;
  --farbe-grau: #64748b;

  /* Abstaende, Radien, Schatten */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .06);
}

body[data-company="lr"] {
  --brand: #0f172a;
  --brand-2: #ec7300;
  --brand-soft: #fde4cc;
  --focus-ring: rgba(236, 115, 0, .2);
}
body[data-company="mdl"] {
  --brand: #104d77;
  --brand-2: #1e40af;
  --brand-soft: #dbeafe;
  --btn-primary-bg: #104d77;
}

/* ---------- Dunkelmodus (Systemeinstellung) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #111a2b;
    --surface-2: #1a2537;
    --border: #243044;
    --border-strong: #334155;

    --text: #e5edf7;
    --text-muted: #9fb0c6;
    --text-soft: #6b7c93;

    --pos: #34d399;  --pos-bg: rgba(52, 211, 153, .12);
    --neg: #f87171;  --neg-bg: rgba(248, 113, 113, .12);
    --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .12);
    --info: #60a5fa; --info-bg: rgba(96, 165, 250, .12);

    --ampel-rot: #f87171;
    --ampel-gelb: #fbbf24;
    --ampel-gruen: #34d399;
    --ampel-grau: #64748b;

    --brand: #e5edf7;
    --brand-2: #9fb0c6;
    --brand-soft: #1f2b3f;
    --btn-primary-bg: #e5edf7;
    --btn-primary-fg: #0b1220;
    --focus-ring: rgba(96, 165, 250, .25);

    --farbe-gelb: #facc15;
    --farbe-blau: #60a5fa;
    --farbe-gruen: #4ade80;
    --farbe-violett: #a78bfa;
    --farbe-orange: #fb923c;
    --farbe-tuerkis: #2dd4bf;
    --farbe-rosa: #f472b6;
    --farbe-grau: #94a3b8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .35);
  }
  body[data-company="lr"] {
    --brand: #f1f5f9;
    --brand-2: #fb923c;
    --brand-soft: rgba(236, 115, 0, .18);
    --btn-primary-bg: #fb923c;
    --btn-primary-fg: #0b1220;
  }
  body[data-company="mdl"] {
    --brand: #dbeafe;
    --brand-2: #60a5fa;
    --brand-soft: rgba(37, 99, 235, .22);
    --btn-primary-bg: #60a5fa;
    --btn-primary-fg: #0b1220;
  }
}

/* ---------- Grundgeruest ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}
.num { font-variant-numeric: tabular-nums; }
a { color: var(--brand-2); }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }

/* ---------- Wortmarke ---------- */
.brand {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
  color: var(--brand); text-decoration: none; white-space: nowrap;
}
.brand__accent { color: var(--brand-2); }
.brand--lg { font-size: 28px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 9px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; text-decoration: none; min-height: 40px;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary:hover { filter: brightness(1.08); background: var(--btn-primary-bg); }
.btn--sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { color: var(--neg); border-color: var(--neg); }
.btn--danger:hover { background: var(--neg-bg); }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ---------- Kopfzeile + Navigation ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6); background: var(--surface);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.app-nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.app-nav a {
  padding: 6px 12px; border-radius: var(--r-sm); color: var(--text-muted);
  text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.app-nav a:hover { color: var(--text); background: var(--surface-2); }
.app-nav a.is-active { color: var(--brand-2); background: var(--brand-soft); }

.user-menu { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--text-muted); }
.nutzer-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.nutzer-chip:hover { background: var(--surface-2); }
.nutzer-punkt {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px;
  background: var(--nutzer-farbe, var(--farbe-grau));
}
.page--banner { padding-bottom: 0; }

/* Benutzerfarbe: data-farbe="gelb" setzt --nutzer-farbe */
[data-farbe="gelb"]    { --nutzer-farbe: var(--farbe-gelb); }
[data-farbe="blau"]    { --nutzer-farbe: var(--farbe-blau); }
[data-farbe="gruen"]   { --nutzer-farbe: var(--farbe-gruen); }
[data-farbe="violett"] { --nutzer-farbe: var(--farbe-violett); }
[data-farbe="orange"]  { --nutzer-farbe: var(--farbe-orange); }
[data-farbe="tuerkis"] { --nutzer-farbe: var(--farbe-tuerkis); }
[data-farbe="rosa"]    { --nutzer-farbe: var(--farbe-rosa); }
[data-farbe="grau"]    { --nutzer-farbe: var(--farbe-grau); }
/* schmaler Streifen links (Kommentare, Protokoll) */
.von-nutzer { border-left: 4px solid var(--nutzer-farbe, var(--farbe-grau)); }

/* ---------- Seiteninhalt ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: var(--sp-6); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.page-sub { color: var(--text-muted); font-size: 14px; margin: 2px 0 0; }
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 var(--sp-3); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--sp-4); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.card__title { font-size: 16px; font-weight: 700; }
.card__block + .card__block { margin-top: var(--sp-5); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.grid-1 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Firmen-Panel im Cockpit */
.firma-panel { border-top: 4px solid var(--panel-farbe, var(--brand-2)); }
.firma-panel[data-firma="lr"]  { --panel-farbe: #ec7300; }
.firma-panel[data-firma="mdl"] { --panel-farbe: #1e40af; }
@media (prefers-color-scheme: dark) {
  .firma-panel[data-firma="lr"]  { --panel-farbe: #fb923c; }
  .firma-panel[data-firma="mdl"] { --panel-farbe: #60a5fa; }
}
.firma-panel__name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.firma-panel__stand { color: var(--text-muted); font-size: 13px; }

/* Kennzahl-Kacheln */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.kpi { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-height: 92px; }
.kpi__titel { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi__wert { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi__wert--leer { color: var(--text-soft); font-weight: 600; }
.kpi__hinweis { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* Ampeln je Standort */
.ampel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.ampel {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font-size: 13px; min-height: 44px;
}
.ampel__punkt { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; background: var(--ampel-grau); }
.ampel[data-ampel="rot"] .ampel__punkt { background: var(--ampel-rot); }
.ampel[data-ampel="gelb"] .ampel__punkt { background: var(--ampel-gelb); }
.ampel[data-ampel="gruen"] .ampel__punkt { background: var(--ampel-gruen); }
.ampel[data-ampel="info"] .ampel__punkt { background: var(--info); }
.ampel a { color: inherit; text-decoration: none; }
.ampel a:hover { text-decoration: underline; }
.ampel__code { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 28px; }
.ampel__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Listen und Leerzustand */
.leer {
  padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  color: var(--text-muted); font-size: 14px; text-align: center; background: var(--surface);
}
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.liste li { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.zeile { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }

/* Callouts */
.callout { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid transparent; font-size: 14px; }
.callout--info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.callout--warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.callout--ok { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, transparent); }
.callout--error { background: var(--neg-bg); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.callout a { color: inherit; font-weight: 600; }
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-size: 13px; border: 1px solid transparent; }
.alert--error { background: var(--neg-bg); color: var(--neg); border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.alert--info  { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert--ok    { background: var(--pos-bg); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, transparent); }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.badge--brand { background: var(--brand-soft); color: var(--brand-2); }
.badge--ok { background: var(--pos-bg); color: var(--pos); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--neg { background: var(--neg-bg); color: var(--neg); }

/* ---------- Formulare ---------- */
.input, .select, .textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: 16px; font-family: inherit; min-height: 44px;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--focus-ring); }
.label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--sp-2); }
.feld { display: flex; flex-direction: column; margin-bottom: var(--sp-4); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 32px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand-2); margin: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.rechte-block { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-2); }
.rechte-block__unter { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding-left: 26px; }

/* ---------- Tabellen ---------- */
.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabelle td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }

/* ---------- Dialog ---------- */
dialog.dialog {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text);
  padding: var(--sp-5); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-shadow: var(--shadow-md);
}
dialog.dialog::backdrop { background: rgba(2, 6, 23, .55); }
.dialog__title { font-size: 18px; font-weight: 700; margin-bottom: var(--sp-4); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
.passwort-anzeige { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; letter-spacing: .04em; padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); text-align: center; user-select: all; }

/* ---------- Fusszeile ---------- */
.fuss { max-width: 1180px; margin: 0 auto; padding: var(--sp-4) var(--sp-6) var(--sp-8); color: var(--text-soft); font-size: 12.5px; text-align: center; }

/* ---------- Handy (< 700px) ----------
   Kopfzeile ist NICHT sticky (iOS-Safari zeigt sonst Darstellungsfehler). */
@media (max-width: 700px) {
  .page { padding: var(--sp-4) var(--sp-3); }
  .page-title { font-size: 21px; }
  .app-header { position: static; padding: 8px 12px 6px; gap: 6px 8px; }
  .brand { font-size: 16px; }
  .user-menu { order: 2; margin-left: auto; gap: 4px; }
  .user-menu .btn { padding: 5px 10px; font-size: 12px; min-height: 32px; }
  .nutzer-chip { padding: 4px 8px 4px 6px; font-size: 12px; }
  .nutzer-chip .nutzer-name { display: none; }
  .app-nav {
    order: 4; flex: 1 0 100%; margin: 4px -12px 0; padding: 6px 12px 0;
    border-top: 1px solid var(--border); flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav a { padding: 8px 10px; font-size: 13px; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi__wert { font-size: 22px; }
  .card { padding: var(--sp-4); border-radius: var(--r-md); }
  .tabelle { font-size: 13px; }
  .tabelle td, .tabelle th { padding: 8px 6px; }
}

/* ---------- Handy: Tabellen als Karten, Standortnamen umbrechen ---------- */
@media (max-width: 700px) {
  .ampel-grid { grid-template-columns: 1fr 1fr; }
  .ampel__name { white-space: normal; line-height: 1.25; }
  .tabelle--karten thead { display: none; }
  .tabelle--karten tbody, .tabelle--karten tr, .tabelle--karten td { display: block; width: 100%; }
  .tabelle--karten tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
  .tabelle--karten tr:last-child { border-bottom: 0; }
  .tabelle--karten td { padding: 3px 0; border-bottom: 0; }
  .tabelle--karten td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); margin: 6px 0 2px;
  }
}

/* ---------- Etappe 2: Eingang, Steuern & Fristen, Hinweise ---------- */
.segment { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.segment button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; min-height: 36px;
}
.segment button + button { border-left: 1px solid var(--border); }
.segment button.is-active { background: var(--brand-soft); color: var(--brand-2); }

.pruef-liste li.pruef { border-left: 4px solid var(--ampel-grau); }
.pruef[data-ampel="rot"] { border-left-color: var(--ampel-rot); }
.pruef[data-ampel="gelb"] { border-left-color: var(--ampel-gelb); }
.pruef[data-ampel="gruen"] { border-left-color: var(--ampel-gruen); }
.pruef[data-ampel="info"] { border-left-color: var(--info); }
.pruef__kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pruef[data-ampel="rot"] .ampel__punkt { background: var(--ampel-rot); }
.pruef[data-ampel="gelb"] .ampel__punkt { background: var(--ampel-gelb); }
.pruef[data-ampel="gruen"] .ampel__punkt { background: var(--ampel-gruen); }
.pruef[data-ampel="info"] .ampel__punkt { background: var(--info); }
.pruef__text { margin-top: 4px; font-size: 14px; }
.pruef__rechen { margin-top: 4px; font-size: 13px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pruef__quelle { margin-top: 4px; font-size: 12px; color: var(--text-soft); }

.termin { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; }
.termin__tag { text-align: center; border-radius: var(--r-sm); background: var(--surface-2); padding: 4px 0; }
.termin__nr { font-size: 20px; font-weight: 800; line-height: 1.1; }
.termin__wt { font-size: 11px; text-transform: uppercase; color: var(--text-muted); }
.termin[data-ampel="rot"] .termin__tag { background: var(--neg-bg); color: var(--neg); }
.termin[data-ampel="gelb"] .termin__tag { background: var(--warn-bg); color: var(--warn); }
.termin[data-ampel="grau"] { opacity: .65; }
.termin__titel { font-weight: 600; }
.termin__meta { font-size: 12.5px; color: var(--text-muted); }
.termin__notiz { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }
.termin__badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.termin__rechts { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.termin__betrag { font-size: 17px; font-weight: 800; white-space: nowrap; }
.monat-titel { margin-top: var(--sp-4); }
.monat-titel:first-child { margin-top: 0; }

.zahlen-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.zahlen-1 { grid-template-columns: minmax(0, 260px); }
.zahl { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.zahl__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.zahl__wert { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.zahl--neg .zahl__wert { color: var(--neg); }
.zahl--pos .zahl__wert { color: var(--pos); }

.zerlegung { display: flex; flex-direction: column; gap: var(--sp-3); }
.zerlegung__kopf { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.balken { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 4px 0; }
.balken__fuell { height: 100%; width: 0; background: var(--brand-2); border-radius: 999px; transition: width .4s ease; }
.zerlegung__werte { display: flex; gap: var(--sp-3); flex-wrap: wrap; color: var(--text-muted); }

.rechenweg { white-space: pre-wrap; font-size: 14px; line-height: 1.65; background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
details.aufklapp summary { cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 6px 0; }
details.aufklapp[open] summary { margin-bottom: var(--sp-2); }
.tabelle td.rechts, .tabelle th.rechts { text-align: right; }
.kernzahlen td:nth-child(2) { text-align: right; white-space: nowrap; }

@media (max-width: 700px) {
  .zahlen-3 { grid-template-columns: 1fr; }
  .zahl__wert { font-size: 21px; }
  .termin { grid-template-columns: 40px minmax(0, 1fr); }
  .termin__rechts { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; }
  .segment button { padding: 7px 10px; font-size: 12.5px; }
}