/* ============================================================ Klima in Euro — Design-Tokens Einzige Quelle für Farbe. Keine Hex-Werte im Markup. Aufbau: drei Farbaufgaben, die sich NIE überschneiden. 1 Messwert die amtliche Skala (--scale-*) 2 Wahrheitsstatus geprüft / behauptet (--proof-*, --claim-*) 3 Kapitel sieben Familien (--ch{0..6}-*) Alles andere ist Grund oder Tinte. ============================================================ */ :root { /* ---- Grund und Tinte · kapitelunabhängig ---- */ --paper: #F1F0EA; /* Seitengrund */ --surface: #FBFAF6; /* Platte, Belegzelle */ --surface-2: #E9E8E1; /* Wertzelle, offener Beleg */ --surface-3: #DCDBD2; /* Reglerschiene, inaktive Spur */ --ink: #1A1A18; /* Überschriften, Kernzahlen */ --ink-solid: var(--ink); /* feste Tinte — fuer Marken IN hellen Flaechen, auch wenn --ink in einer dunklen Box umgebogen ist */ --ink-2: #3A3B36; /* Fließtext, Kennzeilen */ --ink-3: #4B4C46; /* Beschriftungen, Sekundärtext — 7,5:1 auf --paper (AAA) */ --ink-4: #94958D; /* Ränder, offene Ringe — nie Text */ --hairline: rgba(26, 28, 26, .14); --hairline-2: rgba(26, 28, 26, .10); /* ---- 1 · Messwert: die amtliche Skala ---- Nur in Grafiken und an Messwerten. Die einzige gesättigte Wärme der Seite. Erscheint NUR auf hellem Grund. */ --scale-low: #FECC5C; --scale-mid: #FD8D3C; --scale-high: #BD0026; --scale-edge: rgba(26, 28, 26, .20); /* Innenkontur kleiner Farbfelder */ --scale-good: #2E7D4F; /* positiv laufende Messgroesse (Erneuerbaren-Anteil); NORDSTERN Kap. 7 */ /* ---- 2 · Wahrheitsstatus · kapitelunabhängig ---- Petrol heißt geprüft, Pflaume heißt Behauptung. Diese vier Werte ändern sich in keinem Kapitel. */ --proof: #14483F; --proof-bg: #E4EBE7; --proof-on: #E4EBE7; /* Text/Häkchen auf --proof */ --claim: #703A66; --claim-bg: #F8EFF6; --claim-on: #F8EFF6; /* „!“ auf --claim */ /* ---- 3 · Kapitel · je sechs Werte ---- deep Fläche der Kernzahl-Blöcke (Live-Block, Werkzeug, Rekordplatte) hi/lo Verlaufsenden über/unter deep (siehe --plate-* unten) glow Glühkante oben links accent Kennzeile, Kennbalken, Marken — auf hellem Grund on Text auf deep wm Randziffer (Wasserzeichen, >= 4,5:1 auf --paper, AAA gross) */ --ch0-deep: #1A4A3C; --ch0-hi: #225C4B; --ch0-lo: #163F33; --ch0-glow: rgba(178, 226, 205, .22); --ch0-accent: #1B5445; --ch0-on: #EAF3EC; --ch0-wm: #3E7461; --ch1-deep: #6E1B29; --ch1-hi: #82202F; --ch1-lo: #5E1622; --ch1-glow: rgba(250, 190, 205, .22); --ch1-accent: #7F2131; --ch1-on: #FBEBEE; --ch1-wm: #965465; --ch2-deep: #2E2C5E; --ch2-hi: #3A3873; --ch2-lo: #262450; --ch2-glow: rgba(196, 192, 236, .22); --ch2-accent: #444184; --ch2-on: #EEEDF8; --ch2-wm: #66639A; --ch3-deep: #3F4A56; --ch3-hi: #4C5966; --ch3-lo: #343E48; --ch3-glow: rgba(196, 212, 226, .20); --ch3-accent: #3F4A56; --ch3-on: #EFF3F7; --ch3-wm: #5F6B77; --ch4-deep: #2C5024; --ch4-hi: #37622D; --ch4-lo: #24421D; --ch4-glow: rgba(186, 226, 176, .22); --ch4-accent: #2D5526; --ch4-on: #EFF7EC; --ch4-wm: #457439; --ch5-deep: #184A64; --ch5-hi: #1E5B79; --ch5-lo: #143F55; --ch5-glow: rgba(176, 214, 236, .22); --ch5-accent: #195372; --ch5-on: #ECF5FB; --ch5-wm: #3F6F8F; --ch6-deep: #2A2519; --ch6-hi: #362F20; --ch6-lo: #201C13; --ch6-glow: rgba(232, 216, 172, .20); --ch6-accent: #574826; --ch6-on: #F5F1E6; --ch6-wm: #6F6549; /* ---- Aufhellungen INNERHALB eines dunklen Blocks ---- Felder in einer farbigen Box sind Durchscheiner, keine eigenen Farbflächen — dadurch gelten sie in jedem Kapitel. */ --on-well: rgba(0, 0, 0, .16); /* Feld im dunklen Block — abdunkelnd, damit Text im Feld AAA (>= 7:1) haelt */ --on-well-2: rgba(255, 255, 255, .16); /* Pille, aktiver Schalter */ --on-hairline: rgba(255, 255, 255, .20); --on-border: rgba(255, 255, 255, .12); /* ---- Maß und Raum ---- */ --radius: 6px; /* durchgehend, alle Platten und Felder */ --radius-pill: 999px; /* Marken, Stepper-Pillen, Schalter */ --gap-cell: 1.5px; /* Fuge in Zellenreihen */ --stage: 1248px; /* Bühnenbreite = Randziffer 210 + Fuge 56 + Lesespalte 730 + 2×24 Rand; vorher 1240 (Inhalt lag links in der Bühne) */ --stage-pad: 40px; --col-rail: 190px; /* Randspalte: nur die Ordnungsziffer */ --col-read: 950px; /* Lesespalte, max */ --gap-col: 72px; --gap-chapter: 64px; /* ---- Erhebung ---- */ --lift: 0 6px 22px rgba(26, 28, 26, .055); /* helle Platte */ --lift-deep: 0 16px 44px rgba(10, 36, 30, .30); /* dunkle Platte */ --lift-edge: 0 0 0 .75px var(--hairline); /* Kontur statt Fuge */ } /* ============================================================ PLATTENMATERIAL Jede Fläche, die eine Aussage trägt, ist eine Platte: derselbe Verlauf, dieselbe Glühkante oben links — nur die Tonwerte wechseln. Belege bleiben flach; sie sind Nachweis, nicht Aussage. Pro Platte drei Werte setzen: --p-hi, --p-base, --p-lo, --p-glow. ============================================================ */ .plate { background: var(--p-base); background-image: radial-gradient(130% 110% at 12% -10%, var(--p-glow) 0%, transparent 58%), linear-gradient(158deg, var(--p-hi) 0%, var(--p-base) 54%, var(--p-lo) 100%); border-radius: var(--radius); } /* Papier — Grafiken, Werkzeuge, Aufklapp-Rechnungen */ .plate--paper { --p-hi: #FFFFFF; --p-base: var(--surface); --p-lo: #F2F0E9; --p-glow: rgba(255, 255, 255, .95); border: 1px solid var(--hairline-2); box-shadow: var(--lift); } /* Wert — Vergleichszellen auf hellem Grund */ .plate--value { --p-hi: #F2F1EB; --p-base: var(--surface-2); --p-lo: #DEDDD4; --p-glow: rgba(255, 255, 255, .80); } /* Behauptung — kapitelunabhängig, mit Randbalken links */ .plate--claim { --p-hi: #FDF7FB; --p-base: var(--claim-bg); --p-lo: #EFDFEA; --p-glow: rgba(255, 255, 255, .85); border-left: 5px solid var(--claim); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--lift); } /* Kapitel — die Fläche der Kernzahl-Blöcke. Im Kapitel einmal --ch-* setzen (siehe .chapter unten). */ .plate--chapter { --p-hi: var(--ch-hi); --p-base: var(--ch-deep); --p-lo: var(--ch-lo); --p-glow: var(--ch-glow); color: var(--ch-on); box-shadow: var(--lift-deep); } /* Ein Kapitel setzt seine Familie EINMAL; alles darin erbt.
…
*/ .chapter[data-ch="0"] { --ch-deep: var(--ch0-deep); --ch-hi: var(--ch0-hi); --ch-lo: var(--ch0-lo); --ch-glow: var(--ch0-glow); --ch-accent: var(--ch0-accent); --ch-on: var(--ch0-on); --ch-wm: var(--ch0-wm); } .chapter[data-ch="1"] { --ch-deep: var(--ch1-deep); --ch-hi: var(--ch1-hi); --ch-lo: var(--ch1-lo); --ch-glow: var(--ch1-glow); --ch-accent: var(--ch1-accent); --ch-on: var(--ch1-on); --ch-wm: var(--ch1-wm); } .chapter[data-ch="2"] { --ch-deep: var(--ch2-deep); --ch-hi: var(--ch2-hi); --ch-lo: var(--ch2-lo); --ch-glow: var(--ch2-glow); --ch-accent: var(--ch2-accent); --ch-on: var(--ch2-on); --ch-wm: var(--ch2-wm); } .chapter[data-ch="3"] { --ch-deep: var(--ch3-deep); --ch-hi: var(--ch3-hi); --ch-lo: var(--ch3-lo); --ch-glow: var(--ch3-glow); --ch-accent: var(--ch3-accent); --ch-on: var(--ch3-on); --ch-wm: var(--ch3-wm); } .chapter[data-ch="4"] { --ch-deep: var(--ch4-deep); --ch-hi: var(--ch4-hi); --ch-lo: var(--ch4-lo); --ch-glow: var(--ch4-glow); --ch-accent: var(--ch4-accent); --ch-on: var(--ch4-on); --ch-wm: var(--ch4-wm); } .chapter[data-ch="5"] { --ch-deep: var(--ch5-deep); --ch-hi: var(--ch5-hi); --ch-lo: var(--ch5-lo); --ch-glow: var(--ch5-glow); --ch-accent: var(--ch5-accent); --ch-on: var(--ch5-on); --ch-wm: var(--ch5-wm); } .chapter[data-ch="6"] { --ch-deep: var(--ch6-deep); --ch-hi: var(--ch6-hi); --ch-lo: var(--ch6-lo); --ch-glow: var(--ch6-glow); --ch-accent: var(--ch6-accent); --ch-on: var(--ch6-on); --ch-wm: var(--ch6-wm); } /* ============================================================ TYPOGRAFIE-ROLLEN Drei Familien, drei Aufgaben — nie vermischt. ============================================================ */ :root { --font-head: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; } /* Kennzeile — Kapitel, Modul, Herkunft. Bricht NIE um. */ .kicker { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); } .plate--chapter .kicker { color: var(--ch-on); } /* Kernzahl — größtes Element im Modul */ .figure { font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1; color: var(--ink); } .plate--chapter .figure { color: var(--ch-on); } /* Beleg — Mono, immer flach, immer zuletzt */ .proof { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--proof); } /* ============================================================ ZUSTÄNDE Tastaturfokus folgt der Textfarbe, damit er auf hellem und dunklem Grund gleich funktioniert. ============================================================ */ :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } ::selection { background: var(--proof-bg); color: var(--ink); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }