/* pegel.css · Seite „Der Pegel“: Die Schulden steigen Jahr für Jahr wie ein Wasserstand.
 * Die Bühne ist angeheftet; pegel.js setzt --h (Höhe des Wassers, 0 bis 1) und --v (Vorjahr).
 * Alles im Wasser steht ein zweites Mal in Weiß darin, deckungsgleich: über dem Wasser dunkel, darin hell.
 * Ohne JavaScript bleibt die Bühne weg, die Tabelle darunter trägt alle Werte. */

.pegel-kopf { padding: calc(var(--kopf-hoehe) + clamp(40px, 8svh, 96px)) 0 clamp(32px, 6svh, 64px); }
.pegel-kopf h1 { font-size: var(--t-riesig); max-width: 14ch; }
.pegel-kopf .unterzeile { margin-top: 20px; max-width: 40rem; font-size: var(--t-mittel); color: var(--text-2); line-height: 1.35; }
.pegel-kopf .kennzahlen { margin-top: clamp(24px, 4svh, 40px); }

.pegel { display: none; }
.js .pegel { display: block; position: relative; height: calc(32 * 55svh + 100svh); }
.pegel-buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--grund); --h: 0.2749; --v: 0; }
.pegel-trocken, .pegel-wasser { position: absolute; inset: 0; }

/* Das Wasser: eine volle Fläche, nach unten geschoben; der Inhalt darin wird gleich weit zurückgeschoben und steht still */
.pegel-wasser { overflow: hidden; background: var(--akzent); color: #fffdfa; transform: translateY(calc((1 - var(--h)) * 100%)); will-change: transform; }
.pegel-wasser-innen { position: absolute; inset: 0; transform: translateY(calc((var(--h) - 1) * 100%)); will-change: transform; }

/* Welle an der Oberfläche: Bögen aus Papierfarbe, die langsam seitwärts ziehen */
.pegel-welle { position: absolute; left: 0; top: -1px; width: calc(100% + 48px); height: 8px; z-index: 1;
  background: radial-gradient(14px 8px at 12px 0, var(--grund) 97%, transparent 100%) repeat-x; background-size: 24px 8px; }
@media (prefers-reduced-motion: no-preference) {
  .pegel-welle { animation: pegel-welle 2.4s linear infinite; }
}
@keyframes pegel-welle { to { transform: translateX(-24px); } }

/* Skala am rechten Rand: 100, 200, 300, 400 Milliarden; die Höhe setzt pegel.js als --b */
.pegel-skala { position: absolute; inset: 0; }
.p-marke, .p-vorjahr { position: absolute; left: 0; right: 0; bottom: calc(var(--b, 0) * 100%); border-top: 1px solid var(--linie-feld); }
.p-marke span, .p-vorjahr span { position: absolute; right: var(--kante); bottom: 4px; font-family: var(--schrift-display); font-weight: 700; font-size: 0.95rem; color: var(--text-2); }
.p-vorjahr { bottom: calc(var(--v) * 100%); border-top: 1.5px dashed var(--text); opacity: 0; transition: opacity 0.3s ease; }
.p-vorjahr span { right: auto; left: var(--kante); }
.pegel-buehne[data-vorjahr] .p-vorjahr { opacity: 1; }
.pegel-wasser .p-marke { border-top-color: rgb(255 253 250 / 0.45); }
.pegel-wasser .p-marke span, .pegel-wasser .p-vorjahr span { color: #fffdfa; }
.pegel-wasser .p-vorjahr { border-top-color: #fffdfa; }

/* Anzeige in der Mitte: Jahr riesig, darunter Stand, Veränderung und Anteil an der Wirtschaftsleistung */
.pegel-anzeige { position: absolute; left: var(--kante); right: var(--kante); top: calc(var(--kopf-hoehe) + 4svh); }
.pegel-anzeige :where(p) { margin: 0; }
.p-wann { font-weight: 600; font-size: var(--t-klein); color: var(--text-2); }
.p-jahr { font-family: var(--schrift-display); font-weight: 700; font-size: clamp(6rem, 3rem + 16vw, 17rem); line-height: 0.82; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.p-stand { margin-top: 14px; font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-gross); line-height: 1; color: var(--akzent); font-variant-numeric: tabular-nums; }
.p-plus { margin-top: 10px; font-size: var(--t-mittel); font-weight: 600; max-width: 30ch; }
.p-quote { margin-top: 6px; color: var(--text-2); }
.pegel-anzeige--innen .p-wann, .pegel-anzeige--innen .p-stand, .pegel-anzeige--innen .p-quote { color: #fffdfa; }

/* Tabelle: das laufende Jahr wird markiert, wenn man zurückkommt */
.pegel-tabelle td:nth-child(3) { color: var(--text-2); }
.pegel-schluss { background: var(--grund-2); }

@media (max-width: 639px) {
  .js .pegel { height: calc(32 * 45svh + 100svh); }
  .p-marke span, .p-vorjahr span { font-size: 0.8rem; }
  .p-plus { font-size: 1.1rem; }
}