/* ============================================================================ Designtokens — die unterste Ebene. Wird von JEDER Seite als ERSTES Stylesheet geladen, vor portal.css/viewer.css/votes.css. Aufbau in drei Schichten (DESIGN.md im Projektwurzelverzeichnis erklärt das Warum ausführlich): 1. Primitive — Rohwerte: Markenfarben, Abstände, Radien, Kurven. 2. Semantisch — Rollen: --surface, --ink, --line-strong. NUR diese werden in den Seiten-Stylesheets benutzt. 3. Komponente — steht in den jeweiligen Seiten-Stylesheets. ── Zum Dunkelmodus ────────────────────────────────────────────────────────── Jede farbige Rolle steht ZWEIMAL: --surface: #ffffff; <- Rückfallwert --surface: light-dark(#ffffff, #171a24); <- moderne Browser Das ist Absicht und kein Versehen. Browser, die `light-dark()` nicht kennen, verwerfen die zweite Zeile beim Parsen und behalten den Hellwert — die Seite ist dort einfarbig hell, aber nie unformatiert. Browser, die es kennen, überschreiben mit dem Paar und schalten dann über `color-scheme` um. Damit braucht es weder eine verdoppelte @media-Regel noch einen Build-Schritt. Umgeschaltet wird über `color-scheme` (siehe unten): Systemeinstellung ist die Vorgabe, `data-theme` am überschreibt sie. Gesetzt wird das Attribut von static/theme.js, noch bevor der Körper gezeichnet wird. ============================================================================ */ :root { /* ── Schicht 1: Primitive ──────────────────────────────────────────────── Markenfarben von „Check Some Votes". Unverändert gegenüber dem Altbestand — verbessert wurde nicht die Farbe, sondern ihr Einsatz. */ --brand-orange: #ffa600; --brand-orange-deep: #e69500; --brand-blue: #163980; --brand-blue-deep: #0e2560; /* Dunkelmodus-Zwilling von --brand-blue. Nötig, weil #163980 auf dunklem Grund nur 1,69:1 erreicht und dort als Vordergrund unlesbar ist. Gleiche Farbfamilie, angehobene Helligkeit → 8,44:1. */ --brand-blue-lifted: #8fb0f0; /* Abstimmungsfarben. Gehören der Datenebene und werden nirgendwo sonst eingesetzt. */ --vote-for: #7ab800; --vote-against: #d0006f; --vote-abstain: #00c1f0; --vote-absent: #b6b6b6; /* ── Schicht 2: semantische Farbrollen ─────────────────────────────────── Ab hier gilt: Seiten-Stylesheets benutzen NUR diese Namen, nie die Primitiven direkt. Sonst lässt sich der Dunkelmodus nicht an einer Stelle steuern. */ /* Flächen. Hell: helle Karte auf kühl abgesenktem Grund. Dunkel: hellere Karte auf dunklerem Grund — dieselbe Logik, gespiegelt. */ --surface: #ffffff; --surface: light-dark(#ffffff, #171a24); --surface-sunken: #f4f6fa; --surface-sunken: light-dark(#f4f6fa, #12141c); /* Leicht abgesetzte Fläche INNERHALB einer Karte (Zebra, Balkenhintergrund). Ersetzt die verbotene Karte-in-Karte. */ --surface-inset: #eef1f7; --surface-inset: light-dark(#eef1f7, #1e2230); /* Tinte. Kein reines Schwarz — blaustichiges Fast-Schwarz. */ --ink: #1a1a2e; --ink: light-dark(#1a1a2e, #e8ebf2); --ink-2: #444444; --ink-2: light-dark(#444444, #c4cad8); /* Löst das alte #888 ab (3,54:1, unter AA). Neu: 5,92:1 auf Weiß, 5,47:1 auf --surface-sunken; im Dunkelmodus 7,25:1. */ --ink-3: #5c6478; --ink-3: light-dark(#5c6478, #9aa3b5); /* Linien. --line ist AUSSCHLIESSLICH Dekoration (1,23:1 — als alleinige Begrenzung eines Bedienelements verboten). Alles, was ein Eingabefeld, einen Knopf oder einen Chip abgrenzt, nimmt --line-strong (3,72:1 hell, 3,67:1 dunkel) und erfüllt damit WCAG 1.4.11 Nicht-Text-Kontrast. */ --line: #e4e8f0; --line: light-dark(#e4e8f0, #2a2f3d); --line-strong: #7b8598; --line-strong: light-dark(#7b8598, #6b7488); /* Handlungsfarbe und ihr Gegenstück. Auf Orange steht IMMER dunkle Tinte: weiß erreicht 1,96:1, #1a1a2e erreicht 8,69:1. Deshalb ist --on-accent ein fester dunkler Wert und kippt NICHT mit dem Theme. */ --accent: #ffa600; --accent-hover: #e69500; --on-accent: #1a1a2e; /* Strukturfarbe. Trägt Struktur, nie Handlung. */ --structure: #163980; --structure: light-dark(#163980, #8fb0f0); --structure-hover: #0e2560; --structure-hover: light-dark(#0e2560, #b3c8f5); /* Textfarbe auf gefüllter Struktur-Fläche (aktiver Chip, aktive Seitenzahl). Hell: weiß auf dunklem Blau. Dunkel: dunkle Tinte auf hellem Blau. */ --on-structure: #ffffff; --on-structure: light-dark(#ffffff, #12141c); /* Kopfzeile. Im Hellmodus die orange Markenleiste wie bisher, im Dunkelmodus eine dunkle Leiste — der Logo-PNG hat seinen orangen Grund EINGEBRANNT und wird dort zur eigenen Platte (siehe .hh-logo img). Eine über die volle Breite leuchtende orange Leiste vor dunkler Seite wäre nachts blendend. Die Schrift ist im Hellmodus dunkel, nicht weiß: weiß auf #ffa600 erreicht 1,96:1. Das Logo macht es mit seiner blauen Wortmarke selbst vor. */ --header-bg: #ffa600; --header-bg: light-dark(#ffa600, #171a24); --header-ink: #1a1a2e; --header-ink: light-dark(#1a1a2e, #e8ebf2); /* Trennlinien INNERHALB der Kopfzeile (Switcher-Abgrenzung, Feldränder). Auf Orange braucht es dunkle Transparenz, auf Dunkel helle. */ --header-line: rgb(26 26 46 / 0.30); --header-line: light-dark(rgb(26 26 46 / 0.30), rgb(232 235 242 / 0.28)); --header-hover: rgb(26 26 46 / 0.10); --header-hover: light-dark(rgb(26 26 46 / 0.10), rgb(232 235 242 / 0.10)); /* Hero-Panel. Bleibt in BEIDEN Themes das gefüllte Parlamentsblau — weiße Schrift darauf erreicht 10,88:1, und im Dunkelmodus liest sich das tiefe Blau als Panel auf fast schwarzem Grund. Deshalb keine light-dark()-Paare. */ --hero-bg: #163980; --hero-ink: #ffffff; --hero-ink-2: rgb(255 255 255 / 0.82); /* Das ♥ in der Fußzeile. Das Ablehnungs-Magenta erreicht auf dunklem Grund nur 3,42:1 — aufgehellt sind es 7,63:1. Gleiche Farbfamilie. */ --heart: #d0006f; --heart: light-dark(#d0006f, #ff7ab8); /* Fundstellenmarkierung. Hell 14,0:1, dunkel 5,35:1. */ --mark-bg: #ffe7ad; --mark-bg: light-dark(#ffe7ad, #7a5a00); --mark-ink: #1a1a2e; --mark-ink: light-dark(#1a1a2e, #e8ebf2); /* Fokusring. Muss auf JEDEM Untergrund sichtbar sein, auch auf der orangen Kopfzeile — deshalb Struktur-Blau im Hellmodus und aufgehelltes Blau im Dunkelmodus, nie die Akzentfarbe selbst. */ --focus-ring: #163980; --focus-ring: light-dark(#163980, #b3c8f5); /* ── Schatten ──────────────────────────────────────────────────────────── Das System ist flach. Eine Fläche, die nichts tut, wirft keinen Schatten. Diese drei sind Antworten auf Zustand, kein Ruhezustand. Blaustichig statt neutralschwarz, damit sie zur Neutralfamilie gehören. */ --shadow-hover: 0 4px 16px rgb(22 57 128 / 0.14); --shadow-hover: light-dark(0 4px 16px rgb(22 57 128 / 0.14), 0 4px 16px rgb(0 0 0 / 0.45)); --shadow-sticky: 0 2px 8px rgb(22 57 128 / 0.10); --shadow-sticky: light-dark(0 2px 8px rgb(22 57 128 / 0.10), 0 2px 8px rgb(0 0 0 / 0.4)); --shadow-overlay: 0 12px 40px rgb(10 14 30 / 0.28); /* ── Typografie ────────────────────────────────────────────────────────── EINE Familie für alles. Eine zweite ist verboten — der Registerwechsel zwischen Oberfläche und Redetext läuft über Größe, Laufweite und Zeilen- abstand (siehe --text-read / --leading-read), nicht über einen Schriftwechsel. */ --font-ui: 'Montserrat', system-ui, -apple-system, sans-serif; /* Größenskala. Zwischenwerte wie 13.5px/11.5px/10.5px sind verboten — der Altbestand kannte über zwanzig Größen und damit keine Hierarchie. */ --text-2xs: 0.6875rem; /* 11px — Versalbeschriftung */ --text-xs: 0.75rem; /* 12px — Metazeilen */ --text-sm: 0.8125rem; /* 13px — dichte Bedienelemente */ --text-base: 0.875rem; /* 14px — Oberflächen-Fließtext */ --text-md: 0.9375rem; /* 15px — Titel, Knöpfe */ /* Redetext. 15px statt der früheren 13px: Montserrat ist geometrisch und breit, unter 15px ermüdet ein langer Wortlaut. Nach oben begrenzt die Laufweite — bei 17px wäre eine 70ch-Zeile über 900px breit. */ --text-read: 0.9375rem; /* 15px */ --text-xl: 1.25rem; /* 20px — Kartenüberschrift */ --text-2xl: 1.5rem; /* 24px — Kennzahl */ --text-display: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-black: 800; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-read: 1.7; --tracking-display: -0.02em; --tracking-label: 0.08em; /* ── Abstände ───────────────────────────────────────────────────────────── */ --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ── Radien ─────────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* ── Bewegung ───────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; /* ── Ebenen ───────────────────────────────────────────────────────────── Semantische Skala statt geratener 999er. */ --z-dropdown: 100; --z-sticky: 200; --z-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ── Maße ───────────────────────────────────────────────────────────────── */ --shell-max: 1100px; --measure-ui: 70ch; /* Oberflächen-Fließtext */ /* Der Redetext läuft über die volle Kartenbreite und hat deshalb KEIN Zeilenmaß mehr. Der Token bleibt für Oberflächentexte erhalten. */ /* Vorgabe: der Systemeinstellung folgen. */ color-scheme: light dark; } /* Vom Umschalter gesetzt (static/theme.js). Überschreibt die Systemeinstellung in BEIDE Richtungen — wer im dunklen System hell lesen will, bekommt hell. */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* ============================================================================ Grundlagen ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: var(--leading-normal); background: var(--surface-sunken); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } /* Überschriften umbrechen ausgewogen statt mit einem Wort in der letzten Zeile. */ h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } mark { background: var(--mark-bg); color: var(--mark-ink); padding: 0 1px; border-radius: 2px; } /* ── Fokus ────────────────────────────────────────────────────────────────── Der Ring wird nie entfernt, auch nicht „aus optischen Gründen". Vorher hatte dieses Projekt NULL Fokusstile — Tastaturbedienung war blind. */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } /* Kein doppelter Ring bei Mauseingabe, aber :focus-visible bleibt unberührt. */ :focus:not(:focus-visible) { outline: none; } /* ── Hilfsklassen ───────────────────────────────────────────────────────── */ /* Nur für Screenreader. Kein display:none — das entfernt den Text auch dort. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sprungmarke: erste fokussierbare Stelle jeder Seite. Liegt außerhalb des Sichtbereichs, bis sie Fokus bekommt. */ .skip-link { position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: var(--z-toast); transform: translateY(-200%); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-size: var(--text-md); font-weight: var(--weight-bold); box-shadow: var(--shadow-overlay); transition: transform var(--dur-base) var(--ease); } .skip-link:focus { transform: translateY(0); } /* ── Reduzierte Bewegung ──────────────────────────────────────────────────── Nicht optional. Vorher respektierte nur der Hero-Zähler diese Einstellung; Karten-Hover, Aufklappen und Sanftscrollen taten es nicht. */ @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; } /* Verschiebungen ganz abschalten — eine auf 0,01ms verkürzte Bewegung ist immer noch eine Bewegung. */ .pcard:hover, .hh-card:hover, .vcard:hover { transform: none !important; } } /* ── Druck ────────────────────────────────────────────────────────────────── Ein Redearchiv wird gedruckt und als PDF abgelegt. Vorher gab es dafür keine einzige Regel: Kopfzeile, Filter und Seitenzahlen landeten mit auf dem Papier, der Volltext brach mitten im Satz um. */ @media print { :root { color-scheme: light; } body { background: #fff; color: #000; font-size: 11pt; } .hh-header, .skip-link, .hh-search-row, .hh-chips, .hh-pager, .hh-modes, .theme-toggle, .hh-toolbar, .eu-hint, .hh-expand { display: none !important; } .hh-card, .pcard, .vcard, .hh-stat { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; } /* Beim Drucken immer den Volltext zeigen, nie das gekürzte Snippet. */ .hh-card .hh-full { display: block !important; } .hh-card .hh-snippet { display: none !important; } /* Zielangabe hinter externen Links, damit die Quelle auf Papier nachweisbar bleibt. */ a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; } }