/* polls.karbach.digital — Relaunch "Institut" Design-Tokens als reines Vanilla-CSS. Drop-in für den bestehenden Static-/nginx-Stack: als VOR den seitenspezifischen Styles laden. Baut auf base.css auf, kann dessen Tokens schrittweise ersetzen. Herkunft der Werte: 1:1 aus den HTML-Prototypen des Design-Handoffs (docs/relaunch/, Claude Design 23.07.2026). Fix ggue. Handoff: --p-cd/csu -> --p-cducsu (Slash ist in Custom-Property-Namen unzulaessig). Institut-Look ist bewusst NUR HELL (Entscheidung Max 23.07.); die dunkle Buehne (--stage*) ist ein FORMAT fuer TV/Wahlabend/Erklaerer, kein Theme. */ :root{ /* — Flächen & Text (kühl, hell) — */ --ink:#0f1419; /* Haupttext, Headlines */ --ink-2:#39434e; /* Fließtext */ --ink-3:#5b6570; /* Sekundärtext, Sublabels */ --ink-4:#7b8794; /* Meta, Footer */ --ink-5:#98a2ab; /* schwächste Metazeile, Achsenzahlen */ --paper:#ffffff; /* Grundfläche */ --paper-2:#fafbfb; /* Hover-Fläche Listen */ --paper-3:#f5f7f8; /* Sektions-Band, Info-Box */ --line:#e3e6e8; /* Hairline / Trenner */ --line-2:#d3dade; /* Input-/Button-Rand */ --track:#f0f2f3; /* Balken-Hintergrund */ --band:#dde2e5; /* 95%-KI-Band im Balken */ /* — Akzent: genau ein Petrol — */ --accent:#0b5560; --accent-ink:#0a4a54; /* Hover auf Petrol-Flächen */ --accent-soft:#9cc2c9; /* Link-Unterstreichung auf Petrol */ /* — Dunkle Bühne (Wahlabend-Live, TV, Erklärer) — */ --stage:#0b1416; --stage-line:rgba(255,255,255,.10); --stage-track:rgba(255,255,255,.08); --stage-ink:#f5f7f8; --stage-ink-2:#9fb3b8; --accent-on-stage:#57b8c6; /* — Semantische Farben — */ --pos:#0f7b3c; /* positiv / Δ+ / Ja */ --neg:#c02632; /* negativ / Δ− / Nein / live */ --warn:#967027; /* Enthaltung / vorläufig */ /* — Parteifarben = Datenfarben (echt, NIE abgedunkelt). textOnFill(): Weiß auf Fläche, außer zu hellen (FDP/FW) → schwarzer Text. Schwarze Parteien (CDU/CSU) auf dunkler Bühne: helle Kontur statt Farbänderung (siehe --ring-on-stage). — */ --p-cdu:#1a1a1a; --p-csu:#1a1a1a; --p-cducsu:#1a1a1a; --p-spd:#e3000f; --p-gruene:#46962b; --p-afd:#009ee0; --p-fdp:#ffed00; --p-linke:#be3075; --p-fw:#ff8800; --p-bsw:#732049; --p-sonstige:#999999; --ring-on-stage:rgba(255,255,255,.55); /* Kontur für #1a1a1a auf --stage */ /* — Typografie — Sans DM Sans (UI/Fließtext), Display Newsreader (Headlines, Serif-Gravitas), Mono Space Mono (Zahlen, Labels, alles Datenhafte). Alle self-hosted. */ --font-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-display:'Newsreader',Georgia,'Times New Roman',serif; --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Consolas,monospace; /* Typo-Skala (px-Referenz aus den Prototypen) */ --fs-hero:3.2rem; /* H1 Seitenkopf, Newsreader 600, ls -.015em */ --fs-lede:1.22rem; /* Lede-Absatz */ --fs-h2:2.05rem; /* Sektions-Headline, Newsreader 600 (Lesbarkeits-Sweep 23.07.: 1.9 -> 2.05) */ --fs-h3:1.6rem; /* Spalten-Headline */ --fs-kicker:.78rem; /* Mono, uppercase, ls .16em, Petrol, 700 */ --fs-body:1rem; --fs-sm:.98rem; /* Sublines/Tabellen (Sweep: .88 -> .98) */ --fs-meta:.78rem; /* Mono Meta */ --fs-micro:.76rem; /* Mono Tabellenkopf/Quelle (Sweep: .68 -> .76) */ /* — Layout — */ --mw:1140px; /* Content-Container (Institut) */ --mw-read:720px; /* Lesebreite Legal/Finder */ --pad-x:2rem; --radius:6px; --radius-lg:10px; /* — Spring-/Motion-Presets (benannt, Federphysik als Sprache) — snappy = Hover-Lift, Pills, Toggle (leichter Overshoot) settle = Balken/Zähler-Einlauf (kräftiger Overshoot, „Nadel") enter = Scroll-Reveal / Szenenwechsel (weiches Abbremsen) draw = Linien-Einzeichnen (dash-offset) */ --spring-snappy:cubic-bezier(.34,1.3,.5,1); --spring-settle:cubic-bezier(.34,1.25,.4,1); --ease-enter:cubic-bezier(.2,.7,.2,1); --dur-lift:.18s; --dur-bar:.65s; --dur-reveal:.7s; --dur-draw:1.1s; /* — Elevation (weich, low-alpha; nur auf schwebende Flächen) — */ --e1:0 1px 2px rgba(14,26,31,.05),0 3px 10px rgba(14,26,31,.05); --e2:0 2px 6px rgba(14,26,31,.07),0 12px 30px rgba(14,26,31,.09); } @media (prefers-reduced-motion:reduce){ :root{ --dur-lift:.001ms; --dur-bar:.001ms; --dur-reveal:.001ms; --dur-draw:.001ms; } } /* — Wiederkehrende Muster (Referenz-Implementierung) — */ /* Kicker + Serif-Headline: das Sektions-Signal der ganzen Seite */ .rl-kicker{font-family:var(--font-mono);font-size:var(--fs-kicker);text-transform:uppercase; letter-spacing:.16em;color:var(--accent);font-weight:700} .rl-h1{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:600; letter-spacing:-.015em;line-height:1.05;color:var(--ink);text-wrap:balance;margin:0} .rl-h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600; letter-spacing:-.01em;line-height:1.1;color:var(--ink);margin:0} /* Ergebnis-Balken: Name · Balken · Prozent (Zahl NEBEN Balken, nie darin). Reihenfolge im Grid, tabellarische Ziffern, KI-Band grau hinter dem Median. */ .rl-bar-row{display:grid;grid-template-columns:64px 1fr 56px 104px;gap:1.1rem;align-items:center} .rl-bar{position:relative;height:12px} .rl-bar-track{position:absolute;inset:0;border-radius:1.5px;background:var(--track)} .rl-bar-band{position:absolute;top:0;bottom:0;background:var(--band);border-radius:1.5px} .rl-bar-fill{position:absolute;top:0;bottom:0;left:0;border-radius:1.5px; transition:width var(--dur-bar) var(--spring-settle)} .rl-bar-median{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)} .rl-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums} /* Karten-Hover: physischer Lift, kein Scale-Zoom */ .rl-lift{transition:transform var(--dur-lift) var(--spring-snappy),box-shadow var(--dur-lift) var(--ease-enter)} .rl-lift:hover{transform:translateY(-2px);box-shadow:var(--e2)}