/* flexx finanz — ein Stylesheet, zwei Seitentypen.
   body.t-app  = Werkzeugseiten (Start, Rechner)      · Variante B
   body.t-doc  = Inhaltsseiten  (Jahrgang, Ratgeber)  · Variante C           */

:root{
  --brand:#004890; --brand-2:#2f86c9; --mag:#D6006E;
  /* Geometrie der zweispaltigen Dokumentseite. Steht hier, weil ausser .cols
     auch .autor und .ways danach ausgerichtet werden. */
  --side:330px; --gap-col:50px;
  /* --ink-3 lag bei #7d8891 und damit auf 3,6:1 gegen Weiss — unter den 4,5:1, die WCAG AA
     fuer Fliesstext verlangt. Betroffen war genau das Kleingedruckte: Quellenangaben,
     Rechenwege, Tabellenkoepfe, Stand-Datum. Auf einem YMYL-Thema ist der Beleg keine
     Nebensache, und die Zielgruppe ist 40 bis 70. Jetzt 5,05:1. */
  --ink:#101619; --ink-2:#48545d; --ink-3:#667079;
  --bg:#f7f9fb; --card:#fff; --line:rgba(16,22,25,.10); --line-2:rgba(16,22,25,.055);
  --glass:rgba(255,255,255,.64); --glass-2:rgba(255,255,255,.80); --edge:rgba(255,255,255,.9);
  --ok:#28a25b;
  --r:14px; --r-lg:24px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
body.t-doc{ --bg:#fbfaf8; --line:#e6e3dd; --line-2:#f0eeea; --ink:#14181b; --r:10px; --r-lg:12px; }

*{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);
  font-size:17px;line-height:1.6;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
body.t-doc{font-size:16.5px;line-height:1.62;letter-spacing:0}
img{max-width:100%;display:block}
a{color:var(--brand)}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopf ---------- */
.top{position:sticky;top:0;z-index:60;background:var(--glass);
  backdrop-filter:saturate(190%) blur(22px);-webkit-backdrop-filter:saturate(190%) blur(22px);
  border-bottom:1px solid var(--line)}
.top-in{max-width:1120px;margin:0 auto;padding:0 26px;height:56px;display:flex;align-items:center;gap:28px}
.logo{font-weight:600;font-size:19px;letter-spacing:-.032em;color:var(--brand);
  text-decoration:none;white-space:nowrap;display:flex;align-items:center}
.logo span{color:var(--ink);font-weight:400}
/* Das Logo kommt als Inline-SVG ohne feste Maße — die Hoehe setzt der Header, die Breite
   folgt dem Seitenverhaeltnis. Ohne diese Regel dehnt es sich auf die volle Zeilenbreite. */
.logo svg{height:21px;width:auto;display:block}
.top nav{display:flex;gap:22px;font-size:14.5px}
.top nav a{color:var(--ink-2);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.live{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:100px;padding:5px 12px;background:var(--glass-2);
  white-space:nowrap}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block;flex:none}

/* ---------- Reiter (Jahrgänge) ---------- */
.tabs{background:var(--card);border-bottom:1px solid var(--line)}
.tabs-in{max-width:1120px;margin:0 auto;padding:0 26px;display:flex;overflow-x:auto}
.tabs a{padding:12px 16px;font-size:14.5px;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--brand);font-weight:560}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:100px;
  padding:13px 24px;font-size:15.5px;font-weight:530;text-decoration:none;
  border:1px solid transparent;transition:.15s;cursor:pointer;font-family:inherit}
body.t-doc .btn{border-radius:8px}
.btn-p{background:var(--brand);color:#fff;box-shadow:0 8px 22px -12px rgba(0,72,144,.8)}
.btn-p:hover{background:#003a75}
.btn-s{background:var(--glass-2);color:var(--ink);border-color:var(--line)}
.btn-s:hover{background:#fff;border-color:var(--ink-3)}
.btn.sm{padding:8px 16px;font-size:13.5px}
.btn.full{width:100%}

/* ---------- Bühne (t-app) ---------- */
.stage{position:relative;overflow:hidden}
.stage>.stage-bg{position:absolute;inset:0;z-index:0}
.stage-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) brightness(1.02)}
.stage-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(1100px 620px at 78% 4%, rgba(47,134,201,.30), transparent 62%),
  linear-gradient(100deg, rgba(247,249,251,.95) 0%, rgba(247,249,251,.86) 44%, rgba(247,249,251,.60) 74%),
  linear-gradient(180deg, rgba(247,249,251,.35) 0%, rgba(247,249,251,.55) 60%, var(--bg) 96%)}
.stage>*:not(.stage-bg){position:relative;z-index:1}

.hero{display:grid;grid-template-columns:1fr 460px;gap:52px;align-items:center;padding:72px 0 84px}
.hero-solo{display:block;padding:64px 0 40px;max-width:760px}
.eyebrow{display:inline-block;font-size:13px;font-weight:590;color:var(--brand);
  background:var(--glass-2);border:1px solid var(--edge);border-radius:100px;padding:6px 14px;margin:0 0 20px}
h1{font-size:clamp(34px,4.6vw,54px);line-height:1.06;letter-spacing:-.035em;font-weight:640;margin:0 0 18px}
body.t-doc h1{font-size:clamp(32px,4.4vw,50px);line-height:1.1;letter-spacing:-.033em;max-width:17ch}
.lead{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0 0 28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.proof{display:flex;gap:24px;margin-top:28px;font-size:13.5px;color:var(--ink-2);flex-wrap:wrap}
.proof span{display:inline-flex;align-items:center;gap:8px}
.proof svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}

/* ---------- Rechner ---------- */
.tool{background:var(--glass);backdrop-filter:saturate(190%) blur(30px);
  -webkit-backdrop-filter:saturate(190%) blur(30px);border:1px solid var(--edge);
  border-radius:var(--r-lg);padding:26px;
  box-shadow:0 40px 90px -42px rgba(16,22,25,.5), inset 0 1px 0 rgba(255,255,255,.7)}
body.t-doc .tool{background:var(--card);backdrop-filter:none;border-color:var(--line);box-shadow:none}
.tool-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;gap:12px}
.tool-head h2{font-size:17px;font-weight:590;margin:0;letter-spacing:-.02em}
.tool-head small{font-size:12.5px;color:var(--ink-3)}
.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;
  color:var(--ink-2);margin-bottom:7px;gap:10px}
.field output{font-size:15.5px;color:var(--ink);font-weight:590;font-variant-numeric:tabular-nums}
/* Das Element ist 44 Pixel hoch, damit es sich mit dem Finger treffen lässt — sichtbar bleibt
   die 4 Pixel dünne Schiene, gezeichnet als Verlauf in der Mitte. Vorher war das Eingabefeld
   selbst nur 4 Pixel hoch: auf dem Bildschirm hübsch, auf dem Handy nicht zu bedienen. Die
   Rechner sind das Leitwerkzeug dieser Seite, und die Zielgruppe ist 40 bis 70. */
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:44px;
  background:linear-gradient(rgba(16,22,25,.14),rgba(16,22,25,.14)) center/100% 4px no-repeat;
  border-radius:4px;outline:none;margin:0;cursor:pointer;touch-action:pan-y}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:1px solid rgba(16,22,25,.08);box-shadow:0 2px 8px rgba(16,22,25,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;
  border:1px solid rgba(16,22,25,.12);box-shadow:0 2px 8px rgba(16,22,25,.25);cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:4px}

.out{background:rgba(255,255,255,.74);border:1px solid var(--edge);border-radius:var(--r);
  padding:20px;margin-top:20px}
body.t-doc .out{background:var(--bg);border-color:var(--line)}
.out .label{font-size:14px;color:var(--ink-2);margin:0}
.rate{font-size:42px;font-weight:630;letter-spacing:-.04em;line-height:1.05;
  font-variant-numeric:tabular-nums;margin:4px 0 2px}
.delta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:560;color:var(--mag);
  background:rgba(214,0,110,.07);border-radius:100px;padding:4px 12px;margin-top:6px}
.kv{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding:9px 0;
  border-top:1px solid var(--line-2)}
.kv:first-of-type{margin-top:14px}
.kv span{color:var(--ink-2)}
.kv b{font-weight:560;font-variant-numeric:tabular-nums;white-space:nowrap}
.warn{background:rgba(214,0,110,.06);border:1px solid rgba(214,0,110,.18);border-radius:var(--r);
  padding:13px 15px;font-size:14px;margin-top:14px;color:var(--ink)}
.warn b{font-weight:590}
.disc{font-size:12px;color:var(--ink-3);line-height:1.5;margin:14px 0 0}
details.plan{margin-top:16px}
details.plan summary{cursor:pointer;font-size:14.5px;color:var(--brand);padding:6px 0}
.plan-scroll{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);margin-top:8px}

/* ---------- Abschnitte ---------- */
section{padding:76px 0}
body.t-doc section{padding:0}
.sec-head{max-width:700px;margin:0 0 32px}
h2{font-size:clamp(25px,3.1vw,34px);line-height:1.18;letter-spacing:-.03em;font-weight:620;margin:0 0 12px}
body.t-doc h2{font-size:26px;line-height:1.2;letter-spacing:-.028em}
h3{font-size:18px;font-weight:590;margin:30px 0 8px;letter-spacing:-.018em}
.sec-head p{margin:0;color:var(--ink-2);font-size:17.5px}
p{margin:0 0 16px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.card h3{margin:12px 0 8px;font-size:18px}
.card p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
.card svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- Panels und Tabellen ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  box-shadow:0 20px 50px -38px rgba(16,22,25,.35)}
body.t-doc .panel{box-shadow:none;padding:0;overflow:hidden}
/* max-width ist hier nicht kosmetisch: Ohne sie dehnt eine 520 Pixel breite Tabelle auf einem
   375-Pixel-Schirm ihre Grid-Spalte auf, statt im Container zu scrollen — und schiebt die ganze
   Seite waagerecht. Dazu gehoert min-width:0 auf den Grid-Kindern, weil deren Vorgabewert auto
   das Schrumpfen verhindert. */
.table-scroll{overflow-x:auto;max-width:100%}
.cols>*,.wrap>*{min-width:0}
table{width:100%;border-collapse:collapse;min-width:520px}
caption{text-align:left;padding:16px 18px 6px;font-size:14.5px;font-weight:560}
th,td{padding:11px 16px;text-align:right;font-size:15px;border-top:1px solid var(--line-2)}
th:first-child,td:first-child{text-align:left}
thead th{font-size:12.5px;color:var(--ink-3);font-weight:520;letter-spacing:.03em;
  text-transform:uppercase;border-top:0;padding-top:14px}
tbody td{font-variant-numeric:tabular-nums}
tbody td:first-child{font-weight:530}
td.hi{color:var(--mag);font-weight:600;background:rgba(214,0,110,.035)}
.src{font-size:12.5px;color:var(--ink-3);margin:14px 0 0;line-height:1.5}
/* Kleingedrucktes gehoert zu dem, was darueber steht — in der Regel eine Tabelle ueber die
   volle Kastenbreite. Die 66ch aus ".body p" sind das Lesemass fuer Fliesstext; hier liessen
   sie das repraesentative Beispiel 170 px vor der Tabellenkante enden, als waere es
   abgeschnitten. Kein Blocksatz: ohne Silbentrennung reisst deutscher Blocksatz bei
   12,5 px Loecher in die Zeilen, und "Kapitaldienstfaehigkeit" passt in keine Luecke. */
.src,.body p.src{max-width:none}
body.t-doc .src{margin:12px 0 28px}

/* ---------- Dokumentlayout ---------- */
.head{padding:52px 0 30px;border-bottom:1px solid var(--line)}
.kicker{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);
  font-weight:600;margin:0 0 14px}
.answer{font-size:19.5px;line-height:1.5;color:var(--ink);max-width:64ch;margin:0 0 20px;
  padding-left:18px;border-left:3px solid var(--brand)}
.meta{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.meta b{font-weight:530;color:var(--ink-2)}
.band{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.band div{padding:20px 22px 22px;border-left:1px solid var(--line-2)}
.band div:first-child{border-left:0;padding-left:0}
.band b{display:block;font-size:29px;font-weight:620;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.band small{display:block;font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.4}
/* Eine Textbreite fuer die ganze Seite. Vorher hatte dieselbe Seite drei:
   Artikelspalte 688, Autorenbox und Wege 1068, Kopf 1120. Beim Scrollen sprang
   der Text also zweimal nach aussen — das liest sich wie zwei Layouts uebereinander
   und ist der Hauptgrund fuer den Baukasten-Eindruck. Seitenspalte und Spalt sind
   jetzt Variablen, damit die Rechnung an einer Stelle steht. */
.cols{display:grid;grid-template-columns:1fr var(--side);gap:var(--gap-col);padding:46px 0}
/* Einruecken NUR dort, wo es die Randspalte wirklich gibt. Ohne die Bedingung zog die
   Rechnung auch auf Seiten ohne .cols eine Spalte ab, die dort gar nicht steht: auf den
   fuenf Rechnerseiten, der Startseite, /lexikon/ und /ueber-steffen-batat/ schrumpfte die
   Weiche von 708 auf 328 px — acht von 51 Seiten. Faellt :has() aus, gilt die volle
   Breite; das ist die harmlose Richtung. */
.wrap:has(> .cols)>.autor,.wrap:has(> .cols)>.ways{
  max-width:calc(100% - var(--side) - var(--gap-col))}
/* Die Randspalte war 496 px hoch neben 2.782 px Artikel — darunter stand ein
   Drittel der Seite als leere Flaeche. Sticky laesst sie mitlaufen, statt ein
   Loch zu hinterlassen. align-self:start ist Pflicht, sonst streckt das Grid
   sie auf volle Hoehe und sticky greift nie. */
.cols>*:last-child{position:sticky;top:76px;align-self:start}
/* Abschnittsgrenze: vorher lag zwischen einem Panel und der naechsten Ueberschrift
   0 px, waehrend Ueberschrift zu Absatz 12 px hat. Der groesste Abstand der Seite
   lag also dort, wo inhaltlich am wenigsten getrennt wird — und der kleinste an
   der Stelle, die ein neues Thema anfaengt. */
.body>h2{margin-top:52px}
.body>h2:first-child{margin-top:0}
.body p{max-width:66ch;color:var(--ink-2)}
.body p strong{color:var(--ink);font-weight:560}
.body ul{max-width:66ch;color:var(--ink-2);padding-left:22px}
.body li{margin-bottom:7px}
a.lex{border-bottom:1px dotted var(--brand-2);text-decoration:none}
a.lex:hover{border-bottom-style:solid}
aside{position:sticky;top:80px;align-self:start}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.box h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  margin:0 0 12px;font-weight:600}
.box .rate{font-size:32px}
.box .sub{font-size:13.5px;color:var(--ink-3);margin:0 0 14px}
.linklist{font-size:14.5px}
.linklist a{display:block;padding:7px 0;border-top:1px solid var(--line-2);
  color:var(--ink-2);text-decoration:none}
.linklist a:first-of-type{border-top:0}
.linklist a:hover{color:var(--brand)}
figure{margin:30px 0}
figure img{border-radius:var(--r);border:1px solid var(--line);aspect-ratio:16/7;object-fit:cover;width:100%}
figcaption{font-size:12.5px;color:var(--ink-3);margin-top:9px;line-height:1.5}

/* ---------- Weiche ---------- */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.way{border-radius:var(--r-lg);padding:30px 28px}
.way-a{background:linear-gradient(160deg,#004890,#00366d);color:#fff;
  box-shadow:0 24px 60px -38px rgba(0,72,144,.9)}
.way-b{background:var(--card);border:1px solid var(--line)}
.way h3{font-size:21px;font-weight:610;letter-spacing:-.025em;margin:0 0 10px}
.way p{margin:0;font-size:15.5px;line-height:1.55}
.way-a p{color:rgba(255,255,255,.84)}
.way-b p{color:var(--ink-2)}
.way ul{list-style:none;padding:0;margin:16px 0 0;font-size:14px}
.way li{padding:7px 0;border-top:1px solid rgba(255,255,255,.16)}
.way-b li{border-color:var(--line-2);color:var(--ink-2)}
.way-a li{color:rgba(255,255,255,.9)}
.way .btn{margin-top:18px}
.way-a .btn{background:#fff;color:var(--brand)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;padding:16px 0;font-size:17px;font-weight:560;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--ink-3);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{max-width:70ch;color:var(--ink-2);padding-bottom:8px}

/* ---------- Autorenbox ---------- */
.autor{display:flex;gap:20px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:34px 0}
.autor .ini{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;flex:none}
.autor h4{margin:0 0 4px;font-size:16.5px;font-weight:590}
.autor p{margin:0;font-size:14.5px;color:var(--ink-2);max-width:62ch}

/* ---------- Lexikon ---------- */
.lex-tools{display:grid;gap:14px;margin:26px 0 22px}
.lex-search{width:100%;font:inherit;font-size:17px;padding:14px 18px;border-radius:100px;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
.lex-search:focus{outline:2px solid var(--brand);outline-offset:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-size:13.5px;padding:7px 14px;border-radius:100px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);cursor:pointer}
.chip.on{background:var(--brand);color:#fff;border-color:transparent}
.terms{display:grid;gap:14px}
.term{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.term[hidden]{display:none}
.term h3{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.term .kat{font-size:12.5px;color:var(--ink-3);margin:0 0 10px}
.term .kurz{margin:0 0 10px;font-size:16px}
.term .lang{margin:0;font-size:15px;color:var(--ink-2)}
.term .bsp{margin:12px 0 0;font-size:14.5px;color:var(--ink-2);padding-left:14px;
  border-left:2px solid var(--line)}
.term .rel{margin:12px 0 0;font-size:13.5px;color:var(--ink-3)}
.term .rel a{color:var(--brand);text-decoration:none;border-bottom:1px dotted}

/* ---------- Fuß ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 70px;font-size:13.5px;color:var(--ink-3);margin-top:60px}
/* Raster statt flex: Als flex-Container schrumpfen die vier Spalten auf ihre Textbreite und
   draengen sich links zusammen — bei 1280 px endeten sie nach 695 von 1068 Pixeln, rechts
   blieben 373 Pixel leer. auto-fit verteilt sie ueber die volle Breite und bricht von selbst
   um, unabhaengig davon, wie viele Spalten der Fuss gerade hat. */
footer .fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:32px 44px;margin-bottom:28px}
footer h4{font-size:13px;color:var(--ink);margin:0 0 10px;font-weight:590}
/* display:block NUR in den Spalten. Vorher galt die Regel fuer jeden Link im Fuss und riss
   damit auch die Links im Rechtstext aus dem Fliesstext: „abrufbar unter" stand allein,
   „vermittlerregister.info" auf der naechsten Zeile, und die Trennpunkte landeten am
   Zeilenanfang. */
footer .fcols a{display:block;padding:3px 0}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--brand)}
/* Der Rechtstext hatte die Klasse gar nicht (sie stand nur hier im CSS) und stattdessen ein
   inline gesetztes max-width:80ch. Beides falsch: die Links darin waren dadurch nicht
   unterstrichen und von Fettschrift nicht zu unterscheiden — bei "vermittlerregister.info"
   und "Erstinformation" ist das der Unterschied zwischen Beleg und Behauptung. Und der Absatz
   endete 414 px vor der Fusskante, waehrend die Spalten darueber durchliefen. */
footer .fuss-recht{margin:0;max-width:none}
footer .fuss-recht a{text-decoration:underline;text-underline-offset:2px}
.todo{background:#fff8e6;border:1px solid #e8d9a8;border-radius:8px;padding:12px 15px;
  font-size:13px;color:#6b5720;margin:14px 0}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:32px;padding:44px 0 56px}
  .cols{grid-template-columns:1fr;gap:30px;padding:32px 0}
  /* Einspaltig faellt die Rechnung weg — sonst blieben Autorenbox und Wege
     um die Breite einer Randspalte eingerueckt, die es gar nicht mehr gibt. */
  .wrap:has(> .cols)>.autor,.wrap:has(> .cols)>.ways{max-width:none}
  .cols>*:last-child{position:static}
  .body>h2{margin-top:40px}
  aside{position:static}
  /* Die Navigation verschwand hier bisher ersatzlos — auf dem Handy waren die vier Bereiche
     nur über den Fuß erreichbar, also erst nach der ganzen Seite. Statt eines Burger-Menüs mit
     JavaScript rutscht sie in eine zweite, waagerecht scrollbare Zeile: dasselbe Muster wie die
     Jahrgangsleiste, ohne Skript und ohne verstecktes Overlay. */
  .top-in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:0;row-gap:6px}
  .top nav{order:3;flex-basis:100%;gap:20px;overflow-x:auto;padding:8px 0 10px;
    margin:0 -26px;padding-left:26px;padding-right:26px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{white-space:nowrap}
  .top .right{margin-left:auto}
  .band{grid-template-columns:repeat(2,1fr)}
  .band div:nth-child(3){border-left:0;padding-left:0}
  .band div:nth-child(n+3){border-top:1px solid var(--line-2)}
  .grid3,.ways{grid-template-columns:1fr}
  section{padding:52px 0}
  .panel{padding:20px}
  .autor{flex-direction:column;gap:14px}
}

/* Zinsverlauf von starpool — Box vor und nach dem Klick.
   Der Schnipsel des Portals setzt auf dem Handy 100vh und erst ab 400px 70vh; die kleinsten
   Geraete bekaemen also die hoechste Box. Hier umgekehrt, mit Ober- und Untergrenze. */
.sp-zinschart{position:relative;width:100%;height:60vh;min-height:420px;max-height:640px;padding:0}
@media (min-width:992px){.sp-zinschart{height:auto;padding-bottom:66%;max-height:none;min-height:500px}}
.sp-zinschart iframe{position:absolute;inset:0;width:100%;height:100%;border:0;overflow:hidden;border-radius:var(--r)}

/* ---------- Erklaerstrecke im Praesentationsstil ----------
   Ohne .erk-aktiv ist alles sichtbar: eine nummerierte Liste, vollstaendig lesbar,
   vollstaendig indexierbar. Die Klasse setzt erst erklaerung.js — deshalb steht hier
   nichts, was Inhalt vor dem Skript versteckt. */
.erk{padding:0;overflow:hidden}
.erk-kopf{padding:30px 30px 4px}
.erk-titel{font-size:24px;font-weight:620;letter-spacing:-.025em;margin:6px 0 6px}
.erk-unter{color:var(--ink-3);font-size:15px;margin:0}
.erk-liste{list-style:none;margin:0;padding:0}
.erk-s{padding:26px 30px 30px;border-top:1px solid var(--line-2)}
.erk-nr{font-size:12.5px;letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums;
  font-weight:600}
.erk-nr span{color:var(--line);font-weight:520}
.erk-fig{width:80px;height:68px;display:block;margin:14px 0 4px;color:var(--ink-3)}
.erk-s h3{font-size:20px;line-height:1.35;font-weight:590;letter-spacing:-.02em;margin:8px 0 10px;
  max-width:34ch}
.erk-s p{color:var(--ink-2);margin:0;max-width:62ch;font-size:15.5px}
.erk-ende{background:rgba(0,72,144,.028)}
.erk-ende h3{font-size:19px}
/* Handlungsaufforderung am Ende der Strecke. Sie steht in derselben Rasterzelle wie alle
   Schritte, macht die Box also ueber alle Schritte um ihre Hoehe groesser statt sie beim
   letzten springen zu lassen — das ist gewollt. */
.erk-cta{margin:20px 0 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.erk-cta .btn{text-decoration:none}
.erk-cta-alt{font-size:15px;font-weight:540;color:var(--brand);text-underline-offset:3px}
@media(max-width:520px){.erk-cta{gap:14px}.erk-cta .btn{width:100%}}

/* Praesentationsmodus. min-height haelt die Hoehe stabil, sonst springt die Seite
   bei jedem Schritt — auf einem Schirm mit 900 px Hoehe ist das der Unterschied
   zwischen Blaettern und Verlieren des Lesepunkts. */
/* Alle Stationen in EINER Rasterzelle: Die Zeilenhoehe richtet sich nach der laengsten,
   und die Box behaelt sie ueber alle Schritte. Vorher schwankte sie um bis zu 140 px —
   auf einem 900-px-Schirm reicht das, um beim Klicken den Lesepunkt zu verlieren. */
.erk-aktiv .erk-liste{display:grid}
.erk-aktiv .erk-s{grid-area:1 / 1;border-top:0}
/* visibility statt display: haelt den Platz und nimmt das Element trotzdem aus dem
   Baum fuer Screenreader. */
.erk-aus{visibility:hidden;pointer-events:none}
.erk-steuer{display:flex;align-items:center;gap:16px;padding:14px 30px 18px;
  border-top:1px solid var(--line-2);background:var(--bg)}
.erk-steuer button{font:inherit;font-size:14.5px;font-weight:540;cursor:pointer;
  border-radius:var(--r);padding:9px 18px;border:1px solid var(--line);background:var(--card);
  color:var(--ink)}
.erk-steuer .erk-vor{background:var(--brand);border-color:var(--brand);color:#fff}
.erk-steuer button:disabled{opacity:.4;cursor:default}
.erk-steuer button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.erk-punkte{display:flex;gap:7px;margin:0 auto}
.erk-punkt{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--line);
  cursor:pointer}
.erk-punkt[aria-selected="true"]{background:var(--brand)}
@media(max-width:980px){
  .erk-kopf,.erk-s,.erk-ende{padding-left:20px;padding-right:20px}
  .erk-steuer{padding-left:20px;padding-right:20px;gap:10px}
  .erk-titel{font-size:21px}
  .erk-s h3{font-size:18px}
}

/* ---------- Bühnenbild: die eigene Zinsreihe als Hintergrund ----------
   Der Verlauf in .stage-bg::after ist für ein Foto gebaut und würde eine feine Linie
   auslöschen. Für die gezeichnete Fassung deshalb ein eigener, leichterer Schleier —
   gerade so viel, dass der Fließtext auf AA bleibt. */
/* Die Buehne ist so hoch wie ihr Inhalt — bei zwei Spalten mit Rechner sind das 1.655 px.
   Ueber diese Hoehe gestreckt lag die Kurve fast vollstaendig unter der Bildkante; sichtbar
   war nur ein Hauch Magenta am rechten Rand. Das Bild gehoert in den ersten Bildschirm,
   nicht hinter den Rechner. */
.stage-zins{height:min(700px,100%);bottom:auto}
.stage-zins svg{width:100%;height:100%;display:block}
.stage-zins::after{background:
  radial-gradient(900px 520px at 82% 8%, rgba(47,134,201,.10), transparent 64%),
  linear-gradient(100deg, rgba(247,249,251,.96) 0%, rgba(247,249,251,.80) 40%, rgba(247,249,251,.48) 74%),
  linear-gradient(180deg, rgba(247,249,251,.30) 0%, rgba(247,249,251,.50) 62%, var(--bg) 97%)}
.bb-raster line{stroke:var(--ink);stroke-width:1;opacity:.055}
.bb-flaeche{fill:var(--brand);opacity:.075}
.bb-linie{fill:none;stroke:var(--brand);stroke-width:3.5;stroke-linejoin:round;
  stroke-linecap:round;opacity:.42}
/* Gestrichelt = wir haben für 2022–2025 keine Werte. Die Lücke ist die Aussage. */
.bb-luecke{fill:none;stroke:var(--brand);stroke-width:3;stroke-dasharray:2 11;
  stroke-linecap:round;opacity:.42}
.bb-heute{fill:none;stroke:var(--mag);stroke-width:3.5;stroke-linecap:round;opacity:.55}
@media(max-width:980px){
  /* Auf dem Handy liegt der Text über der steilsten Stelle — dort mehr Schleier. */
  .stage-zins::after{background:
    linear-gradient(180deg, rgba(247,249,251,.72) 0%, rgba(247,249,251,.80) 60%, var(--bg) 96%)}
}