/* IBM Plex — lokal eingebunden, kein externer Aufruf.
   Sans ist ein Variable Font: eine Datei trägt alle Gewichte. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   finanzierungsrechner.online — Design-System
   Theme: Präzisionsinstrument bei Tageslicht
   Alle Farbwerte OKLCH, Kontraste rechnerisch WCAG-2.2-AA-geprüft.
   ========================================================================== */

/* --- Tokens: Light (Standard) ------------------------------------------- */
:root {
  --bg:            oklch(1 0 0);
  --surface:       oklch(0.978 0.003 215);
  --panel:         oklch(0.958 0.006 215);
  --panel-2:       oklch(0.938 0.008 215);
  --border:        oklch(0.905 0.008 215);
  --border-input:  oklch(0.66 0.014 220);
  --ink:           oklch(0.235 0.020 225);
  --ink-2:         oklch(0.445 0.018 220);
  --primary:       oklch(0.455 0.080 218);
  --primary-hover: oklch(0.385 0.084 218);
  --primary-wash:  oklch(0.955 0.018 215);
  --accent:        oklch(0.545 0.118 74);
  --accent-bright: oklch(0.68 0.125 76);
  --accent-wash:   oklch(0.965 0.022 80);
  --pos:           oklch(0.48 0.105 155);
  --neg:           oklch(0.52 0.150 28);

  --shadow-sm: 0 1px 2px oklch(0.235 0.02 225 / 0.06);
  --shadow-md: 0 2px 4px oklch(0.235 0.02 225 / 0.05), 0 8px 20px oklch(0.235 0.02 225 / 0.06);

  /* Typografie */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;

  /* Abstände (4px-Raster) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --radius:    6px;
  --radius-lg: 10px;

  /* z-index-Skala, benannt */
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-backdrop: 30;
  --z-modal:    40;
  --z-toast:    50;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  180ms;
}

/* --- Tokens: Dark -------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            oklch(0.165 0.014 228);
    --surface:       oklch(0.205 0.016 228);
    --panel:         oklch(0.245 0.018 228);
    --panel-2:       oklch(0.285 0.018 228);
    --border:        oklch(0.315 0.018 228);
    --border-input:  oklch(0.50 0.016 228);
    --ink:           oklch(0.955 0.006 220);
    --ink-2:         oklch(0.735 0.014 220);
    --primary:       oklch(0.72 0.085 215);
    --primary-hover: oklch(0.80 0.080 215);
    --primary-wash:  oklch(0.275 0.030 218);
    --accent:        oklch(0.775 0.115 78);
    --accent-bright: oklch(0.80 0.120 78);
    --accent-wash:   oklch(0.285 0.035 78);
    --pos:           oklch(0.78 0.130 158);
    --neg:           oklch(0.72 0.140 30);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
    --shadow-md: 0 2px 4px oklch(0 0 0 / 0.3), 0 8px 20px oklch(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  --bg:            oklch(0.165 0.014 228);
  --surface:       oklch(0.205 0.016 228);
  --panel:         oklch(0.245 0.018 228);
  --panel-2:       oklch(0.285 0.018 228);
  --border:        oklch(0.315 0.018 228);
  --border-input:  oklch(0.50 0.016 228);
  --ink:           oklch(0.955 0.006 220);
  --ink-2:         oklch(0.735 0.014 220);
  --primary:       oklch(0.72 0.085 215);
  --primary-hover: oklch(0.80 0.080 215);
  --primary-wash:  oklch(0.275 0.030 218);
  --accent:        oklch(0.775 0.115 78);
  --accent-bright: oklch(0.80 0.120 78);
  --accent-wash:   oklch(0.285 0.035 78);
  --pos:           oklch(0.78 0.130 158);
  --neg:           oklch(0.72 0.140 30);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 2px 4px oklch(0 0 0 / 0.3), 0 8px 20px oklch(0 0 0 / 0.4);
}

/* --- Reset / Basis ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
/* Deutsche Komposita ("Anschlussfinanzierungsrechner") sprengen sonst schmale
   Viewports. hyphens greift dank lang="de" auf dem <html>-Element. */
h1, h2, h3, h4 {
  margin: 0; font-weight: 600; line-height: 1.25; text-wrap: balance;
  letter-spacing: -0.015em; overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
p  { margin: 0 0 var(--s-4); }
a  { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

/* Fokus: auf jedem interaktiven Element sichtbar */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--s-5); }
.prose { max-width: 68ch; }
.prose p, .prose li { text-wrap: pretty; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Kopfzeile ----------------------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.site-head__inner { display: flex; align-items: center; gap: var(--s-5); height: 60px; }
.logo {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--t-md); color: var(--ink);
  text-decoration: none; letter-spacing: -0.02em; white-space: nowrap;
}
.logo:hover { color: var(--ink); }
.logo__mark { flex-shrink: 0; }
.logo__tld { color: var(--ink-2); font-weight: 400; }
.nav { display: flex; gap: var(--s-1); margin-left: auto; align-items: center; }
.nav a {
  padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  color: var(--ink-2); text-decoration: none; font-size: var(--t-base); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--panel); }
.theme-toggle {
  background: none; border: 1px solid var(--border); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: var(--radius); cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-toggle:hover { border-color: var(--border-input); color: var(--ink); }
@media (max-width: 860px) { .nav a { display: none; } .nav a.nav--keep { display: block; } }

/* --- Brotkrumen ---------------------------------------------------------- */
.crumbs { font-size: var(--t-sm); color: var(--ink-2); padding: var(--s-4) 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.crumbs li::after { content: "›"; margin-left: var(--s-2); color: var(--border-input); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--ink-2); }

/* --- Seitenkopf ---------------------------------------------------------- */
.page-head { padding: var(--s-5) 0 var(--s-6); }
.page-head p.lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 62ch; margin-top: var(--s-3); }
.page-head .updated { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
/* Mobil kommt der Nutzer mit einer Rechenfrage — der Rechner muss früher stehen. */
@media (max-width: 700px) {
  .page-head { padding: var(--s-3) 0 var(--s-4); }
  .page-head p.lede { font-size: var(--t-md); margin-top: var(--s-2); }
  .page-head .updated { margin-top: var(--s-3); font-size: var(--t-xs); gap: var(--s-1) var(--s-2); }
  h1 { font-size: 1.875rem; }
  .calc { margin-top: var(--s-4) !important; }
}
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-input); flex-shrink: 0; }

/* ==========================================================================
   Rechner
   ========================================================================== */
.calc {
  display: grid; gap: var(--s-6);
  grid-template-columns: 380px minmax(0, 1fr);
  align-items: start;
  margin-bottom: var(--s-8);
}
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; gap: var(--s-5); } }
/* Grid-Items schrumpfen sonst nicht unter ihre Inhaltsbreite (min-width: auto)
   und breite Tabellen sprengen dann den Viewport statt im Container zu scrollen. */
.calc > *, .result > * { min-width: 0; }

/* --- Eingaben ------------------------------------------------------------ */
.calc__inputs {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s-5);
  position: sticky; top: 76px;
}
@media (max-width: 960px) { .calc__inputs { position: static; } }
.calc__inputs h2 { font-size: var(--t-md); margin-bottom: var(--s-5); letter-spacing: 0; }

.field { margin-bottom: var(--s-5); }
.field:last-of-type { margin-bottom: 0; }
.field__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); margin-bottom: var(--s-2);
}
.field__hint {
  font-size: var(--t-xs); color: var(--ink-2); font-weight: 400;
  border: 0; background: none; padding: 0; cursor: help;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.input-row { display: flex; align-items: stretch; }
.input-wrap { position: relative; flex: 1; }
.input-wrap input {
  width: 100%; font-family: var(--font-mono); font-size: var(--t-md); font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: var(--s-3) 40px var(--s-3) var(--s-3);
  border: 1px solid var(--border-input); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -moz-appearance: textfield;
}
.input-wrap input::-webkit-outer-spin-button,
.input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-wrap input:hover { border-color: var(--ink-2); }
.input-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); outline: none; }
.input-wrap input[aria-invalid="true"] { border-color: var(--neg); }
.input-wrap__unit {
  position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-2); pointer-events: none;
}
.field__error { font-size: var(--t-xs); color: var(--neg); margin-top: var(--s-2); min-height: 0; }

/* Schieberegler, gekoppelt an das Zahlenfeld */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 20px;
  background: transparent; cursor: pointer; margin: var(--s-2) 0 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--primary) var(--pct, 50%), var(--border) var(--pct, 50%));
}
input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--border); }
input[type="range"]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--primary); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--primary); margin-top: -6.5px;
  transition: transform var(--dur) var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--primary);
  background: var(--bg);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--primary-wash); }

.field__scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); margin-top: var(--s-1);
}

/* Umschalter Tilgung / Rate */
.segmented {
  display: flex; gap: 2px; padding: 2px; background: var(--panel-2);
  border-radius: var(--radius); margin-bottom: var(--s-3);
}
.segmented button {
  flex: 1; padding: var(--s-2); border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2);
  border-radius: 4px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); }

.calc__reset {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
}
.btn-text {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--primary);
  font-family: inherit; font-size: var(--t-sm); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
}
.btn-text:hover { color: var(--primary-hover); }

/* --- Ergebnis ------------------------------------------------------------ */
.result { display: grid; gap: var(--s-4); }

.result__primary {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s-5); background: var(--bg); box-shadow: var(--shadow-md);
}
.result__label { font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; }
.result__value {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05;
  letter-spacing: -0.03em; color: var(--ink);
  margin: var(--s-2) 0 var(--s-3); display: block;
}
.result__value .cur { color: var(--ink-2); font-size: 0.55em; margin-left: 0.15em; }
.result__formula {
  font-size: var(--t-sm); color: var(--ink-2); border-top: 1px solid var(--border);
  padding-top: var(--s-3); margin: 0;
}
.result__formula .mono { color: var(--ink); }

/* Kennzahlen — bewusst als dichte Definitionsliste, nicht als Kartenraster */
/* Flex statt Grid: umgebrochene Zeilen füllen sich aus, es bleiben keine
   leeren Rasterzellen mit halben Rändern stehen. Der 1px-Gap auf dem
   Rahmen-Hintergrund erzeugt die Trennlinien. */
.figures {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.figures > div {
  flex: 1 1 170px; padding: var(--s-4); background: var(--bg);
}
.figures dt { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s-1); }
.figures dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-xl);
  font-weight: 500; letter-spacing: -0.02em;
}
.figures dd small { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 400; color: var(--ink-2); display: block; margin-top: 2px; letter-spacing: 0; }
.figures dd.is-neg { color: var(--neg); }
.figures dd.is-pos { color: var(--pos); }

/* --- Diagramm ------------------------------------------------------------ */
.chart-block {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s-5); background: var(--bg);
}
.chart-block h3 { font-size: var(--t-md); margin-bottom: var(--s-1); letter-spacing: 0; }
.chart-block .chart-sub { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s-4); }
/* overflow: hidden ist die Voreinstellung für SVG und hier auch die richtige:
   nichts wird bewusst außerhalb der viewBox gezeichnet. Mit overflow: visible
   konnte ein fehlerhaft skalierter Balken über die halbe Seite laufen. */
.chart { width: 100%; height: auto; display: block; overflow: hidden; }
.chart text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); font-size: var(--t-sm); }
.legend span { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-2); }
.legend i { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; border: 1px solid oklch(0.235 0.02 225 / 0.15); }

/* --- Tilgungsplan -------------------------------------------------------- */
.plan { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.plan__head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.plan__head h3 { font-size: var(--t-md); letter-spacing: 0; }
.plan__scroll { max-height: 420px; overflow: auto; overscroll-behavior-x: contain; }
table.plan__table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.plan__table th, table.plan__table td { padding: var(--s-3) var(--s-4); text-align: right; white-space: nowrap; }
table.plan__table th:first-child, table.plan__table td:first-child { text-align: left; }
table.plan__table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--panel);
  font-weight: 500; color: var(--ink-2); font-size: var(--t-xs);
  border-bottom: 1px solid var(--border); text-transform: none;
}
table.plan__table tbody td { font-family: var(--font-mono); border-bottom: 1px solid var(--border); }
table.plan__table tbody tr:last-child td { border-bottom: 0; }
table.plan__table tbody tr:hover td { background: var(--surface); }
table.plan__table tbody tr.is-fixed-end td { border-bottom: 2px solid var(--accent-bright); }
.td-zins { color: var(--neg); }
.td-tilg { color: var(--pos); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius); cursor: pointer;
  font-family: inherit; font-size: var(--t-base); font-weight: 500;
  border: 1px solid var(--border-input); background: var(--bg); color: var(--ink);
  text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--panel); border-color: var(--ink-2); color: var(--ink); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--bg); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--bg); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn--accent:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--bg); }
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn--accent { color: oklch(0.165 0.014 228); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary,
  :root:not([data-theme="light"]) .btn--accent { color: oklch(0.165 0.014 228); }
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Annahmen ------------------------------------------------------------ */
.assumptions {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 0;
}
.assumptions summary {
  padding: var(--s-4) var(--s-5); cursor: pointer; font-weight: 500; font-size: var(--t-base);
  list-style: none; display: flex; align-items: center; gap: var(--s-2);
}
.assumptions summary::-webkit-details-marker { display: none; }
.assumptions summary::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(-45deg); transition: transform var(--dur) var(--ease);
}
.assumptions[open] summary::before { transform: rotate(45deg); }
.assumptions__body { padding: 0 var(--s-5) var(--s-5); font-size: var(--t-base); color: var(--ink-2); }
.assumptions__body ul { margin: 0; padding-left: var(--s-5); }
.assumptions__body li { margin-bottom: var(--s-2); }

/* ==========================================================================
   Monetarisierung — immer NACH dem Ergebnis
   ========================================================================== */
.offer {
  border: 1px solid var(--border); border-top: 1px solid var(--accent-bright);
  border-radius: var(--radius-lg); background: var(--bg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.offer__head { padding: var(--s-5) var(--s-5) var(--s-3); }
.offer__head h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.offer__head p { font-size: var(--t-base); color: var(--ink-2); margin: 0; max-width: 60ch; }
.offer__list { list-style: none; margin: 0; padding: 0; }
.offer__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--s-4);
  align-items: center; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border);
}
.offer__bank { font-weight: 500; }
.offer__bank small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-2); }
.offer__num { font-family: var(--font-mono); font-size: var(--t-md); font-weight: 500; text-align: right; }
.offer__num small { display: block; font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-2); font-weight: 400; }
@media (max-width: 700px) {
  .offer__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); }
  .offer__row .btn { grid-column: 1 / -1; }
}
.offer__foot {
  padding: var(--s-3) var(--s-5); background: var(--surface);
  border-top: 1px solid var(--border); font-size: var(--t-xs); color: var(--ink-2);
}

/* Lead-Block: bewusst ruhig, keine Sperre vor dem Ergebnis */
.lead {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s-5); background: var(--panel);
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-5); align-items: center;
}
@media (max-width: 700px) { .lead { grid-template-columns: minmax(0, 1fr); } }
.lead h3 { font-size: var(--t-md); margin-bottom: var(--s-2); letter-spacing: 0; }
.lead p { font-size: var(--t-base); color: var(--ink-2); margin: 0; max-width: 56ch; }

/* ==========================================================================
   Redaktioneller Teil
   ========================================================================== */
.content { padding-block: var(--s-8); border-top: 1px solid var(--border); }
.content h2 { margin-bottom: var(--s-4); }
.content h3 { margin: var(--s-6) 0 var(--s-3); }
.content ul, .content ol { padding-left: var(--s-5); margin-bottom: var(--s-4); }
.content li { margin-bottom: var(--s-2); }

.formula {
  font-family: var(--font-mono); font-size: var(--t-md); background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); margin: var(--s-4) 0; overflow-x: auto;
  color: var(--ink);
}
.formula .var { color: var(--primary); }

table.data { width: 100%; border-collapse: collapse; font-size: var(--t-base); margin: var(--s-4) 0; }
table.data th, table.data td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border); }
table.data thead th { background: var(--panel); font-weight: 500; font-size: var(--t-sm); color: var(--ink-2); }
table.data td.num { font-family: var(--font-mono); text-align: right; }
.table-scroll { overflow-x: auto; }

.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  padding: var(--s-4) 0; cursor: pointer; font-weight: 500; font-size: var(--t-md);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq__a { padding-bottom: var(--s-4); color: var(--ink-2); max-width: 68ch; }

/* --- Silo-Verlinkung: dichte Liste, kein Kartenraster -------------------- */
.silo { padding-block: var(--s-7); border-top: 1px solid var(--border); }
.silo h2 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.silo > p { color: var(--ink-2); margin-bottom: var(--s-5); }
.silo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-6); }
.silo__group h3 { font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; margin-bottom: var(--s-3); letter-spacing: 0; }
.silo__list { list-style: none; margin: 0; padding: 0; }
.silo__list li { border-top: 1px solid var(--border); }
.silo__list li:last-child { border-bottom: 1px solid var(--border); }
.silo__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-1); text-decoration: none; color: var(--ink);
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.silo__list a:hover { background: var(--surface); padding-left: var(--s-3); color: var(--primary); }
.silo__list a[aria-current="page"] { color: var(--ink-2); pointer-events: none; }
.silo__list .vol { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }

/* --- Fußzeile ------------------------------------------------------------ */
.site-foot { border-top: 1px solid var(--border); background: var(--surface); padding-block: var(--s-7) var(--s-6); margin-top: var(--s-8); }
.site-foot__grid { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-bottom: var(--s-6); }
@media (max-width: 800px) { .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .site-foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }
.site-foot h3 { font-size: var(--t-sm); margin-bottom: var(--s-3); }
.site-foot ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-base); }
.site-foot li { margin-bottom: var(--s-2); }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--primary); text-decoration: underline; }
.site-foot__legal {
  border-top: 1px solid var(--border); padding-top: var(--s-4);
  font-size: var(--t-xs); color: var(--ink-2); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
.site-foot__about { font-size: var(--t-base); color: var(--ink-2); max-width: 46ch; }

/* --- Vertrauensleiste ---------------------------------------------------- */
.trust {
  display: flex; flex-wrap: wrap; gap: var(--s-5); padding: var(--s-4) 0;
  font-size: var(--t-sm); color: var(--ink-2); border-block: 1px solid var(--border);
}
@media (max-width: 700px) {
  .trust { gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; font-size: var(--t-xs); }
  .trust svg { width: 13px; height: 13px; }
}
.trust span { display: flex; align-items: center; gap: var(--s-2); }
.trust svg { flex-shrink: 0; color: var(--pos); }

/* --- Mobile Ergebnisleiste ---------------------------------------------- */
.sticky-result {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: var(--bg); border-top: 1px solid var(--border);
  padding: var(--s-3) var(--s-5); display: none;
  justify-content: space-between; align-items: center; gap: var(--s-4);
  box-shadow: 0 -2px 12px oklch(0.235 0.02 225 / 0.08);
}
.sticky-result .lbl { font-size: var(--t-xs); color: var(--ink-2); }
.sticky-result .val { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 500; }
@media (max-width: 960px) { .sticky-result.is-visible { display: flex; } }

/* --- Reduzierte Bewegung ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Ergänzungen für die generische Rechner-Engine (fr-ui.js)
   ========================================================================== */

/* Auswahlfeld */
.field__select {
  width: 100%; font-family: var(--font-sans); font-size: var(--t-md);
  padding: var(--s-3); border: 1px solid var(--border-input); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__select:hover { border-color: var(--ink-2); }
.field__select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-wash); outline: none; }

/* Feldhinweis */
.field__note { font-size: var(--t-xs); color: var(--ink-2); margin: var(--s-2) 0 0; line-height: 1.5; }

.calc__hint { font-size: var(--t-xs); color: var(--ink-2); }

.calc__error {
  padding: var(--s-5); border: 1px solid var(--neg); border-radius: var(--radius-lg);
  background: var(--neg-wash, var(--panel)); color: var(--ink); margin: 0;
}

/* Warnhinweis im Ergebnis */
.result__warn {
  margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4);
  background: var(--accent-wash); border-radius: var(--radius);
  font-size: var(--t-sm); color: var(--ink); line-height: 1.55;
}

/* Markierte Tabellenzeile (z. B. Ende der Zinsbindung) */
table.plan__table tbody tr.is-marked td { border-bottom: 2px solid var(--accent-bright); }

/* Legendensymbole */
.legend i.i-hatch {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, var(--bg) 2px, var(--bg) 3px);
}
.legend i.i-line { height: 3px; border-radius: 2px; background: var(--accent-bright); border: 0; }

/* Farbtoken, die die Engine zusätzlich nutzt */
:root { --neg-wash: oklch(0.965 0.02 28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --neg-wash: oklch(0.27 0.04 28); } }
:root[data-theme="dark"] { --neg-wash: oklch(0.27 0.04 28); }

/* Beim Umschalten des Rechenwegs ausgeblendete Felder */
.field[hidden] { display: none; }

/* ==========================================================================
   Startseite
   ========================================================================== */
/* ==========================================================================
   Startseite
   ========================================================================== */

/* --- Kopfbereich: Instrumententafel -------------------------------------- */
/* Das feine Raster zitiert das Millimeterpapier, auf dem solche Kurven früher
   gezeichnet wurden. Es läuft nach unten aus, damit es Grund bleibt und nicht
   Muster wird. Reine CSS-Verläufe: kein Bild, keine zusätzliche Anfrage. */
.hero {
  position: relative;
  padding: var(--s-8) 0 var(--s-6);
  display: grid; gap: var(--s-6);
}
.hero::before {
  content: ""; position: absolute; z-index: 0;
  inset-block: 0; inset-inline: calc(var(--s-5) * -1);
  background-image:
    repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 100%);
  background-size: 28px 28px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 90% at 22% 15%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 22% 15%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
/* hyphens: manual — die globale Regel für Komposita darf hier nicht greifen:
   "Finanzie-rungsrechner" zerlegt das Hauptkeyword der Seite. Die Schriftgröße
   ist stattdessen so gewählt, dass das Wort in jeder Spaltenbreite ganz passt. */
.hero h1 { font-size: clamp(1.6875rem, 4.2vw, 2.75rem); max-width: 20ch; hyphens: manual; }
/* Notventil für sehr schmale Geräte: unterhalb 300px passt das Wort nicht mehr. */
@media (max-width: 300px) { .hero h1 { hyphens: auto; } }
.hero p.lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 58ch; margin: var(--s-4) 0 0; }

@media (min-width: 1000px) {
  .hero__text { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: end; }
  .hero__text .lede { margin-top: 0; padding-bottom: 0.35rem; }
}

/* Kennleiste: vier Angaben, die für den Nutzer sofort entscheidbar machen,
   worauf er sich einlässt. Bewusst klein und in einer Zeile — große Zahlen
   wären Angeberei, hier geht es um Auskunft. */
.kennleiste {
  list-style: none; margin: 0; padding: var(--s-4) 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  font-size: var(--t-sm); color: var(--ink-2);
}
.kennleiste li { display: flex; align-items: baseline; gap: var(--s-2); }
.kennleiste__wert { color: var(--ink); font-weight: 500; font-size: var(--t-base); }

@media (max-width: 700px) {
  .hero { padding: var(--s-5) 0 var(--s-5); }
  .hero p.lede { font-size: var(--t-md); }
  .kennleiste { gap: var(--s-2) var(--s-5); }
}

.startrechner { margin-bottom: var(--s-8); }

/* --- Abschnittskopf ------------------------------------------------------ */
.abschnittskopf { margin-bottom: var(--s-6); }
.abschnittskopf h2 { margin-bottom: var(--s-2); }
.abschnittskopf p { color: var(--ink-2); max-width: 64ch; margin: 0; }

.bereiche { margin-bottom: var(--s-8); }

/* --- Silo-Karten --------------------------------------------------------- */
/* align-items: start — sonst strecken sich die Karten auf die Höhe der
   höchsten in ihrer Zeile und erzeugen große Leerflächen. */
.silos { display: grid; gap: var(--s-5); align-items: start; }
.silos--haupt   { grid-template-columns: repeat(auto-fit, minmax(min(410px, 100%), 1fr)); }
/* Drei Spalten fest: bei automatischer Aufteilung entstehen aus fünf Karten
   vier plus eine, und die letzte steht allein neben einer leeren Reihe. */
.silos--weitere { grid-template-columns: 1fr; margin-top: var(--s-5); }
@media (min-width: 620px)  { .silos--weitere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .silos--weitere { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.silo-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.silo-card:hover, .silo-card:focus-within {
  border-color: var(--border-input);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Die Kennkurve: aus der Formel des Bereichs gerechnet, siehe inc/kurven.php. */
.silo-card__kurve {
  height: 78px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.silo-card--gross .silo-card__kurve { height: 116px; }
.kurve { display: block; width: 100%; height: 100%; }
.kurve__flaeche { fill: var(--primary-wash); }
.kurve__linie   { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kurve__null    { stroke: var(--border-input); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

.silo-card__head { padding: var(--s-4) var(--s-5) var(--s-3); }
.silo-card__head h3 { font-size: var(--t-md); letter-spacing: 0; }
.silo-card--gross .silo-card__head { padding: var(--s-5) var(--s-5) var(--s-4); }
.silo-card--gross .silo-card__head h3 { font-size: var(--t-lg); }
.silo-card__head h3 a { text-decoration: none; color: inherit; }
.silo-card__head h3 a:hover { color: var(--primary); }
.silo-card__text { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.silo-card__zahl {
  margin: var(--s-3) 0 0; font-size: var(--t-xs); color: var(--ink-2);
  text-transform: none; letter-spacing: 0.01em;
}
.silo-card__zahl .mono { color: var(--ink); font-weight: 500; font-size: var(--t-sm); }

.silo-card__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.silo-card__liste li + li { border-top: 1px solid var(--border); }
.silo-card__liste a, .silo-card__more a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); text-decoration: none; color: var(--ink); font-size: var(--t-base);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.silo-card__liste a:hover { background: var(--surface); color: var(--primary); }
.silo-card__liste .arrow, .silo-card__more .arrow {
  color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-xs);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.silo-card__liste a:hover .arrow, .silo-card__more a:hover .arrow {
  transform: translateX(3px); color: var(--primary);
}
.silo-card__more { margin-top: auto; border-top: 1px solid var(--border); background: var(--surface); }
.silo-card__more a { font-size: var(--t-sm); font-weight: 500; color: var(--primary); }
.silo-card__more a:hover { background: var(--panel); }

/* Die Kurve wischt beim Erscheinen von links herein. Bewusst eine Blende und
   kein stroke-dashoffset: die Kurve wird über preserveAspectRatio="none"
   ungleichmäßig gestreckt, und in Verbindung mit vector-effect stimmt die
   berechnete Pfadlänge dann nicht mehr — die Linie bliebe unvollständig.
   Voreinstellung ist die fertige, sichtbare Kurve: erst wenn das Skript
   js-kurve setzt, wird überhaupt etwas verdeckt. Ohne JavaScript oder bei
   reduzierter Bewegung ist alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .js-kurve .silo-card .kurve { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease); }
  .js-kurve .silo-card:not(.is-sichtbar) .kurve { clip-path: inset(0 100% 0 0); }
  /* Karten einer Reihe wischen leicht versetzt, sonst wirkt es mechanisch. */
  .js-kurve .silo-card:nth-child(2) .kurve { transition-delay: 90ms; }
  .js-kurve .silo-card:nth-child(3) .kurve { transition-delay: 180ms; }
  .js-kurve .silo-card:nth-child(4) .kurve { transition-delay: 270ms; }
  .js-kurve .silo-card:nth-child(5) .kurve { transition-delay: 360ms; }
}

/* --- Wegweiser: Frage statt Fachbegriff ---------------------------------- */
.wegweiser { padding-block: var(--s-8); border-top: 1px solid var(--border); }
.wegweiser__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 var(--s-7);
  border-bottom: 1px solid var(--border);
}
/* Rahmen oben an jedem Eintrag, unten einmal an der Liste: so stimmen die
   Linien unabhängig davon, in wie viele Spalten das Raster gerade bricht. */
.wegweiser__liste li { border-top: 1px solid var(--border); }
.wegweiser__liste a {
  display: block; padding: var(--s-3) var(--s-2);
  text-decoration: none; transition: background var(--dur) var(--ease);
}
.wegweiser__liste a:hover { background: var(--surface); }
.wegweiser__frage { display: block; color: var(--ink); }
.wegweiser__ziel {
  display: flex; align-items: baseline; gap: var(--s-2); margin-top: 2px;
  color: var(--primary); font-size: var(--t-sm); font-weight: 500;
}
.wegweiser__ziel .arrow {
  font-family: var(--font-mono); font-size: var(--t-xs);
  transition: transform var(--dur) var(--ease);
}
.wegweiser__liste a:hover .wegweiser__ziel { text-decoration: underline; text-underline-offset: 2px; }
.wegweiser__liste a:hover .arrow { transform: translateX(3px); }

/* --- Leseteil mit klebender Randspalte ----------------------------------- */
.lesebereich { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) {
  .lesebereich { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
  .lesebereich__rand { position: sticky; top: calc(60px + var(--s-5)); }
}
.randbox {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--s-5);
  font-size: var(--t-sm); color: var(--ink-2);
}
.randbox__titel { font-size: var(--t-sm); color: var(--ink); margin-bottom: var(--s-2); letter-spacing: 0; }
.randbox p { margin: 0 0 var(--s-3); }
.randbox p:last-child { margin-bottom: 0; }
.randbox__hinweis { padding-top: var(--s-3); border-top: 1px solid var(--border); }

/* --- Prinzipien: Haarlinienraster ---------------------------------------- */
/* Das Raster entsteht aus 1px Lücke auf dunklerem Grund. Damit liegen die
   Trennlinien exakt, auch wenn die Felder unterschiedlich hoch sind. */
.prinzipien {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.prinzip { background: var(--bg); padding: var(--s-5) var(--s-5) var(--s-6); }
.prinzip h3 { font-size: var(--t-md); letter-spacing: 0; margin: 0 0 var(--s-2); }
.prinzip p { color: var(--ink-2); margin: 0; }
/* Zwei mal zwei, nicht drei plus eins: vier Felder in drei Spalten lassen
   ein leeres Feld stehen, das wie ein Fehler aussieht. */
@media (min-width: 720px) { .prinzipien { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Datengrundlage ------------------------------------------------------ */
.quellen__tabelle { margin: 0; }
.quellen__tabelle th[scope="row"] { font-weight: 500; color: var(--ink); }
.quellen__tabelle td { color: var(--ink-2); }
.quellen__tabelle td.mono { font-size: var(--t-sm); white-space: nowrap; }
.quellen .table-scroll {
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto;
}
.quellen__tabelle tbody tr:last-child th, .quellen__tabelle tbody tr:last-child td { border-bottom: 0; }
.quellen__fuss { margin: var(--s-5) 0 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 72ch; }

/* Sprunglink */
.skip-link:focus {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: var(--z-toast);
  width: auto; height: auto; clip: auto; margin: 0;
  padding: var(--s-3) var(--s-4); background: var(--bg); color: var(--ink);
  border: 2px solid var(--primary); border-radius: var(--radius);
}

/* ==========================================================================
   Platz für den Rechner reservieren, bis er im Browser aufgebaut ist.
   Verhindert den Layoutsprung (CLS). Die Werte kommen aus inc/rechner.php.
   ========================================================================== */
/* Die Reserve bleibt auch nach dem Aufbau als Untergrenze bestehen. Wird sie
   entfernt, wirkt jede Abweichung der tatsächlichen Höhe (etwa durch anderen
   Zeilenumbruch bei schmaleren Viewports) als Layoutsprung. Ist der Inhalt
   größer als die Reserve, wächst der Container ohnehin darüber hinaus. */
/* Kein display hier setzen: .calc ist ein Grid, und der Attributselektor hat
   die höhere Spezifität — display:block würde das zweispaltige Layout aufheben. */
.calc[data-rechner] { min-height: var(--h-desk, 1000px); }
@media (max-width: 960px) {
  .calc[data-rechner] { min-height: var(--h-tab, var(--h-mob, 2000px)); }
}
@media (max-width: 640px) {
  .calc[data-rechner] { min-height: var(--h-mob, 2000px); }
}

/* ==========================================================================
   Redaktionshinweis (E-E-A-T)
   ========================================================================== */
.autorbox {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--s-5);
  margin: var(--s-7) 0 0;
}
.autorbox__mark {
  width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--border); color: var(--ink);
}
.autorbox__name { font-weight: 600; margin: 0 0 var(--s-3); font-size: var(--t-base); }
.autorbox__name span { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--ink-2); }
.autorbox__text { font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 var(--s-2); max-width: 68ch; }
.autorbox__text:last-child { margin-bottom: 0; }