/* ══════════════════════════════════════════════════════════════════
GENERIERT — nicht von Hand editieren. Neu bauen mit:
node tools/build-css.mjs
Quell-Wahrheit bleiben die Einzeldateien (Liste im -
Kommentar von index.html). @layer-Reihenfolge wird beibehalten.
Quellen: 26 Dateien.
══════════════════════════════════════════════════════════════════ */
/* ═══ css/variables.css ═══ */
/* CivicNova Variable System — Translation-Layer (seit 2026-06-30)
Source-of-Truth: E:\Claude\Design Systems\CivicLab\tokens\ (via Junction css/tokens/)
Diese Datei mapped --cl-*-Tokens (Design-System) auf semantic Aliase (--color-*)
damit bestehender CSS-Code unverändert funktioniert. */
/* Layer-Order (Welle 4.3 + Followup 2026-07-01):
Declaration MUST happen before any component CSS registers its own layer,
otherwise browser locks the first-seen layer as position 1 (wahlprogramme
loads SubSektionHeader.css BEFORE base.css → without this declaration here,
`components` gets registered before `base` and beats the universal reset,
which stripped .topic-tabs padding to 0 (rendered 27px instead of ~44px). */
@layer reset, tokens, base, components, pages, utilities;
/* ↳ inlined @import: css/tokens/colors.css → @layer tokens */
@layer tokens {
/* ============================================================
COLORS — CivicLab
Gedämpfte Plakat-Palette, dark-first. Lila lebt als dunkle
Aubergine-Basis, Grün als ruhiges Salbei, Creme als Papier.
Grelles Gelb existiert NUR als seltenes Live-/Aktuell-Signal.
============================================================ */
:root {
/* --- base ramp --- */
--cl-ink: #171019; /* primary background, dark-first */
--cl-surface: #221A2B; /* cards, sections */
--cl-surface-2: #2A2236; /* hairlines, subtle fills */
--cl-border: #3A2E47; /* default border on dark */
/* --- brand hues --- */
--cl-aubergine: #574A7C; /* structure / depth — NEVER an accent fill */
--cl-sage: #8E9A6C; /* LANE NEUTRAL · Aufklärung · Beleg */
--cl-olive: #6E7A4E; /* sage-deep · borders · graphics */
--cl-terracotta: #C66B45; /* LANE MEINUNG · Einordnung */
--cl-cream: #F1E8CE; /* paper · primary text on dark (kanonisch, DESIGN §2 — v2-Drift-Fix) */
--cl-signal: #E0A93B; /* live / aktuell ONLY — never a surface */
/* --- light-mode ink variants (v2 · Ä1 — WCAG ≥4,5:1 auf Creme, verifiziert) --- */
--cl-sage-ink: #5A6540; /* 5,10:1 */
--cl-terracotta-ink: #9C4F2E; /* 4,81:1 */
--cl-olive-ink: #55603A; /* 5,50:1 */
--cl-signal-ink: #7A5A12; /* 5,21:1 */
/* warm meinung surface (terracotta-tinted dark) */
--cl-meinung-bg: #2A1D18;
--cl-neutral-bg: #1C2417; /* sage-tinted dark for neutral CTA */
/* --- text --- */
--cl-text: var(--cl-cream);
--cl-text-muted: #B6ABC4;
--cl-text-faint: #9A8FAB;
--cl-text-on-light: #2C2238;
/* --- semantic aliases --- */
--cl-bg: var(--cl-ink);
--cl-bg-elevated: var(--cl-surface);
--cl-lane-neutral: var(--cl-sage);
--cl-lane-meinung: var(--cl-terracotta);
--cl-accent: var(--cl-sage);
--cl-link: var(--cl-sage);
--cl-focus-ring: var(--cl-sage);
}
/* Light mode — Phase-1 warmth for long explainers.
Creme paper, aubergine ink, sage-INK leads text accents (v2 · Ä1).
v2: `.light-mode` ergänzt — der Selektor, den die App tatsächlich toggelt
(store.js) — damit ist der kanonische Light-Block kein toter Code mehr. */
:root[data-theme="light"],
:root.light-mode,
.light-mode,
.cl-light {
--cl-ink: #F1E8CE;
--cl-surface: #FBF6E6;
--cl-surface-2: #ECE3CC;
--cl-border: #DAD0B4;
--cl-cream: #2C2238; /* "cream" alias now = ink-on-paper */
--cl-text: #2C2238;
--cl-text-muted: #5A5364;
--cl-text-faint: #7A7384;
--cl-meinung-bg: #F3E6DC;
--cl-neutral-bg: #E9EBDB;
/* v2 · Ä1: Lane-/Akzentfarben als TEXT im Light nur in der -ink-Variante */
--cl-lane-neutral: var(--cl-sage-ink);
--cl-lane-meinung: var(--cl-terracotta-ink);
--cl-accent: var(--cl-sage-ink);
--cl-link: var(--cl-sage-ink);
--cl-focus-ring: var(--cl-sage-ink);
--cl-signal-text: var(--cl-signal-ink);
}
/* Signal als Text: dark = Original, light = -ink (immer via diesem Alias nutzen) */
:root { --cl-signal-text: var(--cl-signal); }
}
/* ↳ inlined @import: css/tokens/typography.css → @layer tokens */
@layer tokens {
/* ============================================================
TYPOGRAPHY — Archivo (Display/Text) + Newsreader (Meinung/Zitat, serif) + Space Mono (Belege/Labels).
Three voices: DISPLAY (statement), TEXT (body), MONO (belege/labels).
Meinung kippt in italic; Bericht bleibt aufrecht.
============================================================ */
:root {
--cl-font-display: "Archivo", system-ui, sans-serif;
--cl-font-text: "Archivo", system-ui, sans-serif;
--cl-font-serif: "Newsreader", Georgia, serif;
--cl-font-mono: "Space Mono", ui-monospace, monospace;
/* weights */
--cl-fw-regular: 400;
--cl-fw-medium: 500;
--cl-fw-bold: 700;
/* type scale (px) — v2 · Ä2: Meta-Ebene ≥14px (Zielgruppe 60+),
h2 bleibt echte Display-Größe (Sektionstitel SIND h2, nie h1→h3) */
--cl-fs-hero: 72px;
--cl-fs-h1: 38px;
--cl-fs-h2: 30px;
--cl-fs-h3: 23px;
--cl-fs-lead: 18px;
--cl-fs-body: 16px;
--cl-fs-small: 14px;
--cl-fs-mono: 14px;
--cl-fs-kicker: 14px;
/* line-height */
--cl-lh-tight: 0.95;
--cl-lh-snug: 1.12;
--cl-lh-body: 1.55;
/* tracking */
--cl-ls-display: -0.01em;
--cl-ls-kicker: 0.14em;
--cl-ls-label: 0.12em;
--cl-ls-name: 0.13em;
/* semantic */
--cl-kicker-transform: uppercase;
}
}
/* ↳ inlined @import: css/tokens/spacing.css → @layer tokens */
@layer tokens {
/* ============================================================
SPACING & RADIUS — tight, kantig. Radius stays 0–2px.
============================================================ */
:root {
--cl-space-1: 4px;
--cl-space-2: 8px;
--cl-space-3: 12px;
--cl-space-4: 16px;
--cl-space-5: 22px;
--cl-space-6: 30px;
--cl-space-7: 46px;
--cl-space-8: 64px;
--cl-pad-card: 24px;
--cl-pad-section: 46px;
/* radius — deliberately near-zero; CivicLab is blueprint-square */
--cl-radius-0: 0px;
--cl-radius-1: 2px; /* default for chips, buttons, cards */
--cl-radius-pill: 999px; /* only for status dots, never buttons */
/* borders */
--cl-border-w: 1px;
--cl-lane-bar: 5px; /* top bar thickness on lane cards */
/* layout */
--cl-maxw-content: 720px;
--cl-maxw-page: 1180px;
}
}
/* ↳ inlined @import: css/tokens/effects.css → @layer tokens */
@layer tokens {
/* ============================================================
EFFECTS — focus, halftone, blueprint texture. Minimal shadow.
CivicLab uses borders + flat fills, not drop shadows.
============================================================ */
:root {
/* focus ring — visible, sage, offset (a11y requirement) */
--cl-focus: 2px solid var(--cl-focus-ring);
--cl-focus-offset: 2px;
/* the one allowed elevation — used very sparingly */
--cl-shadow-card: 0 1px 3px rgba(0,0,0,.35);
/* meinung emphasis glow (subtle terracotta halo) */
--cl-ring-meinung: 0 0 0 3px rgba(198,107,69,.12);
--cl-ring-neutral: 0 0 0 3px rgba(142,154,108,.10);
/* signature foto textures — apply over imagery */
--cl-halftone-lines: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.30) 2px 3px);
--cl-halftone-dots: radial-gradient(rgba(44,34,56,.55) 1px, transparent 1.6px);
--cl-transition: .15s ease; /* legacy — neue Nutzung: Motion-Tokens unten */
/* --- motion tokens (v2 · Ä3) — NUR diese verwenden, keine Freihand-Dauern.
Reduced-Motion ist die Baseline; Motion ist additiv. --- */
--cl-motion-fast: 150ms; /* hover, focus, kleine Zustandswechsel */
--cl-motion-base: 300ms; /* karten, akkordeons, übergänge (default) */
--cl-motion-slow: 500ms; /* seiten-transitions, reveals */
--cl-ease-out: cubic-bezier(.2, .8, .2, 1);
--cl-ease-in-out: cubic-bezier(.45, 0, .25, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--cl-motion-fast: 0.01ms;
--cl-motion-base: 0.01ms;
--cl-motion-slow: 0.01ms;
}
}
}
/* ↳ inlined @import: css/tokens/fonts.css → @layer tokens */
@layer tokens {
/* Webfonts — Archivo (Display/Text) + Newsreader (Meinung/Zitat, serif) + Space Mono (Labels/Belege).
Schrift-Entscheid 2026 (DESIGN.md Sektion 3): ersetzt das frühere Ubuntu.
KEIN Font-Load hier mehr (DSGVO-01/FONT-02, 2026-07-04):
Die @font-face-Regeln liegen self-hosted in assets/fonts/fonts-local.css
und werden als EINZIGER Font-Load-Weg per in index.html eingebunden
(display=swap, lokale woff2 — kein Google-Fonts-CDN mehr).
Diese Datei bleibt nur als Layer-Platzhalter (via @import layer(tokens) in
variables.css) bestehen, damit die Kaskaden-/Layer-Struktur unverändert ist.
NICHT wieder einen Google-Fonts-CDN-@import einsetzen — das war der
DSGVO-Blocker. */
}
:root {
/* ─── Brand Aliase (alte --color-* zeigen auf neue --cl-*) ─── */
--color-primary: var(--cl-sage); /* ERKL-02/DESIGN: Akzent = Salbei; Signal NUR live/heute (6,21:1 auf Ink) */
--color-secondary: var(--cl-sage);
--color-accent: var(--cl-aubergine);
/* ─── Backgrounds ─── */
--color-bg-primary: var(--cl-ink);
--color-bg-secondary: var(--cl-surface);
--color-bg-tertiary: var(--cl-surface-2);
--color-bg-card: var(--cl-surface);
--color-bg-navbar: rgba(23, 16, 25, 0.92);
/* ─── Borders ─── */
--color-border-subtle: var(--cl-aubergine);
--color-border-focus: var(--cl-sage);
/* ─── Text ─── */
--color-text-primary: var(--cl-cream);
--color-text-muted: var(--cl-text-muted);
--color-text-body: var(--cl-cream);
--color-text-light: var(--cl-cream); /* v2: kein hartes #FFFFFF — Marke nutzt Creme auf Dunkel */
--color-text-link: var(--cl-sage);
--color-text-link-hover: var(--cl-signal);
/* ─── Status (CivicNova-spezifisch, nicht im Design-System) ─── */
--color-status-draft: #8B8690;
--color-status-submitted: #3182CE;
--color-status-committee: #D69E2E;
--color-status-plenum: #14B8A6;
--color-status-approved: #1BBE6F;
--color-status-rejected: #E53E3E;
/* ─── Lane-/Strang-Farben (Aliase auf Design-System) ─── */
--ink: var(--cl-ink);
--surface: var(--cl-surface);
--aubergine: var(--cl-aubergine);
--sage: var(--cl-sage);
--olive: var(--cl-olive);
--terracotta: var(--cl-terracotta);
--cream: var(--cl-cream);
--signal: var(--cl-signal);
/* Teal (CivicNova-spezifisch, nicht im Design-System).
--stadt-blue/--landkreis-green wurden 2026-07-04 entfernt (DESIGN v2 §2 Ä6):
Level-Badges laufen jetzt über Violett-Outline (Stadt) / Olive-Outline (Landkreis),
Lane-Farben bleiben den Lanes vorbehalten. */
--teal: #7AA5A6;
/* ─── Typography (Aliase) ─── */
--font-primary: var(--cl-font-display, 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
--font-mono: var(--cl-font-mono, 'Space Mono', 'Courier New', monospace);
--font-size-h1: 64px;
--font-size-h2: clamp(24px, 3vw, 32px); /* v2 · Ä2/DS-04: Sektionstitel SIND h2 (nie 16px-Sonderfall) */
--font-size-body: 18px;
--font-size-h1-mobile: 40px;
--font-size-h2-large: 32px;
--font-size-h3: 20px;
--font-size-small: 14px;
--font-size-tiny: 12px;
--lh-h1: 1.1;
--lh-h2: 1.3;
--lh-body: 1.6;
/* ─── Spacing (Aliase) ─── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
/* ─── Components — kantig ─── */
--input-bg: #171020;
--input-text: #ECE8F0;
--input-border-radius: 0px;
/* Primär-CTA = Terrakotta-Fläche + Ink-Text (DESIGN v2 §2 Ä14).
--btn-primary-text ist bewusst der feste dunkle Ink #171019 (nicht var(--cl-ink),
das im Light-Mode zu Creme kippt) — nur so hält die Terrakotta-Fläche in BEIDEN
Modi 4,97:1 (ink auf terracotta). Signal bleibt Live-Punkten vorbehalten. */
--btn-primary-bg: var(--cl-terracotta);
--btn-primary-text: #171019;
--btn-primary-radius: 0px;
--btn-secondary-bg: transparent;
--btn-secondary-text: var(--cl-cream);
--btn-secondary-border: var(--cl-sage);
--btn-secondary-radius: 0px;
/* ─── Shadows ─── */
--shadow-none: none;
--shadow-sm: 0 0 0 1px rgba(142, 154, 108, 0.18);
--shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 14px 40px -8px rgba(0, 0, 0, 0.7);
--shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
/* ─── Transitions — v2 · DS-09: bauen auf die Motion-Tokens (effects.css) auf.
Freihand-Dauern sind abgeschafft; jeder var(--transition-*)-Consumer bekommt
damit automatisch die kanonische Dauer + Easing UND das Reduced-Motion-Verhalten
(Motion-Tokens fallen unter prefers-reduced-motion auf 0.01ms). ─── */
--transition-fast: var(--cl-motion-fast) var(--cl-ease-out);
--transition-normal: var(--cl-motion-base) var(--cl-ease-out);
--transition-slow: var(--cl-motion-slow) var(--cl-ease-out);
/* ─── Layout ─── */
--nav-height: 80px;
--max-width-content: 1280px;
}
/* Light-Mode — dünner Kompat-Layer (v2 · DS-01/DS-02):
Wo der kanonische Light-Block in tokens/colors.css den Wert schon liefert
(--cl-ink/-surface/-surface-2 flippen dort), wird hier NICHT mehr doppelt
definiert. Nur echte Semantik-Umlenkungen bleiben. Salbei/Signal, die im
Light als Text/Akzent erscheinen, laufen auf die WCAG-verifizierten -ink-Töne. */
.light-mode {
--color-primary: var(--cl-sage-ink); /* DS-01: Salbei-als-Text 5,10:1 statt Salbei 2,46:1 */
--color-secondary: var(--cl-sage-ink); /* DS-02: Akzent-Balken sichtbar (Signal war fast unsichtbar auf Creme) */
--color-accent: var(--cl-aubergine);
--color-bg-navbar: rgba(241, 232, 206, 0.92);
--color-border-subtle: rgba(87, 74, 124, 0.25);
--color-border-focus: var(--cl-aubergine);
--color-text-primary: var(--cl-aubergine);
--color-text-muted: #5C5464;
--color-text-body: #2D2734;
--color-text-light: var(--cl-cream);
--color-text-link: var(--cl-aubergine);
--color-text-link-hover: var(--cl-olive-ink); /* DS-02: Olive-als-Text 5,50:1 statt Olive 3,77:1 */
--input-bg: var(--cl-surface); /* MS-06: kein hartes #FFFFFF — Creme-Papier #FBF6E6 */
--input-text: #2D2734;
/* --btn-primary-* NICHT überschrieben: Terrakotta-Fläche + fester Ink-Text gelten
modus-unabhängig (siehe :root). */
--btn-secondary-bg: transparent;
--btn-secondary-text: var(--cl-aubergine);
--btn-secondary-border: var(--cl-aubergine);
--shadow-sm: 0 1px 3px rgba(87, 74, 124, 0.10);
--shadow-md: 0 4px 20px -2px rgba(87, 74, 124, 0.14);
--shadow-lg: 0 10px 30px -5px rgba(87, 74, 124, 0.18);
--shadow-glass: 0 8px 32px 0 rgba(87, 74, 124, 0.10);
}
/* ═══ css/base.css ═══ */
@layer reset, tokens, base, components, pages, utilities;
/* CSS Base Styles & Reset */
@layer base {
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ── A11Y: Skip-Link ────────────────────────────────────────────── */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--signal);
color: var(--ink);
padding: var(--space-3) var(--space-4);
font-family: var(--font-mono);
font-weight: 700;
z-index: 9999;
text-decoration: none;
}
.skip-link:focus {
left: var(--space-4);
top: var(--space-4);
outline: 2px solid var(--sage);
outline-offset: 2px;
}
/* ── A11Y: Sichtbarer Focus auf allen interaktiven Elementen ───── */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 2px;
}
.light-mode :focus-visible {
outline-color: var(--aubergine);
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-text-size-adjust: 100%;
/* v2 · ERKL-08/NEWS-08: klippt die horizontale ICB-Overflow, die das
off-canvas (translateX(100%)) Mobile-Menü sonst erzeugt. `clip` (nicht
hidden) ist position:sticky-sicher und zwingt overflow-y nicht auf auto —
body{overflow-x:hidden} allein fängt fixed-Descendants NICHT. */
overflow-x: clip;
}
body {
font-family: var(--font-primary);
font-size: var(--font-size-body);
line-height: var(--lh-body);
background-color: var(--color-bg-primary);
color: var(--color-text-body);
transition: background-color var(--transition-normal), color var(--transition-normal);
overflow-x: hidden;
}
/* Headings */
h1 {
font-family: var(--font-primary);
font-size: var(--font-size-h1);
line-height: var(--lh-h1);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--space-4);
letter-spacing: -0.02em;
}
/* v2 · DS-04: Sektionstitel SIND h2 (Archivo 800, kantig getrackt) — die alte
uppercase-16px-muted-Sonderbehandlung ist abgeschafft (heilte den heading-order-
Systemfehler: nie mehr h1 → h3-Sprung). Markup nutzt . */
h2 {
font-family: var(--font-primary);
font-size: var(--font-size-h2);
line-height: var(--lh-h2);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-primary);
margin-bottom: var(--space-3);
}
/* .section-title bleibt als Klasse erhalten: erbt die h2-Optik und ergänzt die
dekorative Akzent-Kante darunter (Sektions-Label mit Unterstrich). */
.section-title {
color: var(--color-primary);
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background-color: var(--color-secondary);
}
/* v2 · ERKL-02: h3 läuft auf Text-/Creme-Farbe, NICHT auf Signal — Signal (Amber)
bleibt echten Live-/„heute"-Elementen vorbehalten (dot-signal, HEUTE-Marker). */
h3 {
font-size: var(--font-size-h3);
color: var(--color-text-primary);
margin-bottom: var(--space-3);
font-weight: 500;
}
/* Paragraphs & Text */
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
/* Links */
a {
color: var(--color-text-link);
text-decoration: none;
font-weight: 500;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-text-link-hover);
}
/* Lists */
ul, ol {
list-style: none;
}
/* Images & Media */
img, svg {
display: block;
max-width: 100%;
height: auto;
}
/* Selection */
::selection {
background-color: var(--color-primary);
color: var(--ink);
}
/* Custom Scrollbar for Modern Aesthetics */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--color-border-subtle);
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-primary);
}
/* Utilities */
.container {
width: 100%;
max-width: var(--max-width-content);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-6);
padding-right: var(--space-6);
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-muted { color: var(--color-text-muted); }
/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: var(--font-size-h1-mobile);
}
body {
font-size: 16px;
}
}
} /* end @layer base */
/* ═══ css/layout.css ═══ */
/* Main Application Layout Styles */
@layer base {
#app-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#app-mount {
flex-grow: 1;
display: flex;
flex-direction: column;
/* v2 · CLS-Fix: robuste Inhalts-Reserve, damit der Footer beim Route-Wechsel
(kurz leerer Mount / View-Transition) nicht nach oben springt und zurück. */
min-height: 100vh;
min-height: 100svh; /* CLS-Fix: Footer startet unter dem Fold, springt nicht mehr (Audit CLS-Root-Cause) */
}
/* Sticky Header & Navbar */
#site-header {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
background-color: var(--color-bg-navbar);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border-subtle);
z-index: 100;
transition: background-color var(--transition-normal), border-color var(--transition-normal);
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.brand-logo-link {
display: flex;
align-items: center;
height: 100%;
}
.brand-logo-svg {
height: 38px;
width: auto;
transition: transform var(--transition-fast);
}
.brand-logo-svg:hover {
transform: scale(1.03);
}
/* Navigation Links */
.nav-menu {
display: flex;
align-items: center;
gap: var(--space-6);
}
.nav-briefing-btn {
white-space: nowrap;
margin-left: var(--space-1);
}
.nav-link {
color: var(--color-text-body);
font-weight: 500;
font-size: 16px;
padding: 0 var(--space-2); /* v2 · DS-11: horizontales Padding fürs Hit-Target */
min-height: 44px; /* Hit-Target ≥ 44px */
display: inline-flex;
align-items: center;
position: relative;
transition: color var(--transition-fast);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-secondary);
transition: width var(--transition-fast);
}
.nav-link:hover {
color: var(--color-primary);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-link.active {
color: var(--color-primary);
}
/* Right Header actions (Theme switcher & CTA) */
.header-actions {
display: flex;
align-items: center;
gap: var(--space-4);
}
/* Theme Switcher Toggle Button */
.theme-toggle-btn {
background: transparent;
border: 1px solid var(--color-border-subtle);
border-radius: 50%;
width: 44px; /* v2 · DS-11: Hit-Target 44×44 */
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-text-body);
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle-btn:hover {
background-color: var(--color-bg-secondary);
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
background: transparent;
border: none;
cursor: pointer;
padding: var(--space-2);
z-index: 102;
}
.mobile-menu-btn span {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-primary);
margin-bottom: 5px;
transition: transform var(--transition-normal), opacity var(--transition-normal);
}
.mobile-menu-btn span:last-child {
margin-bottom: 0;
}
/* Footer styling — surface statt signal (kein Amber-Block) */
#site-footer {
background-color: var(--surface);
color: var(--cream);
padding-top: var(--space-12);
padding-bottom: var(--space-6);
border-top: 5px solid var(--sage);
}
.footer-untertitel {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-text-muted);
margin-top: var(--space-2);
letter-spacing: 0.08em;
}
.footer-ki-hinweis {
font-family: var(--font-mono);
font-size: 12px;
color: var(--sage);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px dashed var(--aubergine);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr;
gap: var(--space-8);
margin-bottom: var(--space-12);
}
.footer-col-logo {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.footer-logo-img {
height: 48px;
width: auto;
align-self: flex-start;
filter: brightness(0) invert(1);
}
.footer-title {
font-family: var(--font-mono);
font-size: 13px;
color: var(--sage);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-bottom: var(--space-4);
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer-links a {
color: rgba(236, 227, 204, 0.8);
font-size: 15px;
transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.footer-links a:hover {
color: var(--signal);
padding-left: var(--space-1);
}
.footer-newsletter-text {
color: var(--color-text-muted);
font-size: 15px;
margin-bottom: var(--space-3);
}
.footer-newsletter-form {
display: flex;
gap: var(--space-2);
}
.footer-newsletter-form input {
flex-grow: 1;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--aubergine);
padding-top: var(--space-6);
font-size: var(--font-size-small);
color: rgba(236, 227, 204, 0.55);
font-family: var(--font-mono);
}
.footer-socials {
display: flex;
gap: var(--space-4);
}
.footer-social-link {
color: var(--cream);
font-size: 20px;
transition: color var(--transition-fast), transform var(--transition-fast);
}
.footer-social-link:hover {
color: var(--color-secondary);
transform: translateY(-2px);
}
/* Loader styling */
.loader-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
width: 100%;
}
.loader {
width: 48px;
height: 48px;
border: 4px solid var(--color-border-subtle);
border-bottom-color: var(--color-primary);
border-radius: 50%;
display: inline-block;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive Breakpoints */
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: block;
}
/* Hamburger toggle transforms */
.mobile-menu-btn.active span:first-child {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:last-child {
transform: translateY(-7px) rotate(-45deg);
}
/* v2 · ERKL-08/NEWS-08: Off-Canvas via transform statt right:-100% —
kein Dokument-Overflow mehr. visibility hält das geschlossene Menü aus
dem Tab-Fokus. */
.nav-menu {
position: fixed;
top: var(--nav-height);
right: 0;
width: 80%;
max-width: 320px;
height: calc(100vh - var(--nav-height));
background-color: var(--color-bg-primary);
border-left: 1px solid var(--color-border-subtle);
flex-direction: column;
align-items: flex-start;
padding: var(--space-8) var(--space-6);
gap: var(--space-4);
z-index: 101;
transform: translateX(100%);
visibility: hidden;
transition: transform var(--transition-normal),
visibility 0s linear var(--cl-motion-base);
box-shadow: var(--shadow-lg);
}
.nav-menu.active {
transform: translateX(0);
visibility: visible;
transition: transform var(--transition-normal), visibility 0s;
}
/* Backdrop/Scrim hinter dem offenen Menü — reine CSS-Lösung via :has() am
(nicht transformierten) Header, damit position:fixed viewport-relativ bleibt.
z-index -1 im Header-Stacking-Context: unter dem Panel (101) + Hamburger (102),
über dem Seiteninhalt. pointer-events:none = rein visuell (kein Klick-Trap);
Schließen läuft über den Hamburger. */
#site-header::after {
content: "";
position: fixed;
inset: var(--nav-height) 0 0 0;
background: rgba(23, 16, 25, 0.55);
z-index: -1;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--transition-normal),
visibility 0s linear var(--cl-motion-base);
}
#site-header:has(.nav-menu.active)::after {
opacity: 1;
visibility: visible;
transition: opacity var(--transition-normal);
}
.nav-link {
width: 100%;
font-size: 18px;
padding: var(--space-3) 0;
}
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.footer-bottom {
flex-direction: column;
gap: var(--space-4);
text-align: center;
}
}
/* CivicNova Wortmarke — Gitter-Glyph + CIVICNOVA + Mono-Untertitel */
.brand-logo-link {
gap: var(--space-3);
}
.brand-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--sage);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--sage);
background:
linear-gradient(var(--aubergine) 1px, transparent 1px) 0 0 / 8px 8px,
linear-gradient(90deg, var(--aubergine) 1px, transparent 1px) 0 0 / 8px 8px,
var(--ink);
letter-spacing: 0;
flex-shrink: 0;
}
.brand-logo-video {
width: 32px;
height: 32px;
border: 1px solid var(--sage);
object-fit: cover;
flex-shrink: 0;
border-radius: 0;
}
.brand-wordmark-block {
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-wordmark {
font-weight: 700;
font-size: 20px;
letter-spacing: 0.04em;
color: var(--cream);
}
.brand-untertitel {
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-text-muted);
letter-spacing: 0.05em;
margin-top: 2px;
}
.brand-wordmark-accent {
/* Backward-compat: bleibt für eventuelle alte Referenzen */
color: var(--sage);
}
/* Strang-D Nav-Link (Meinung) bekommt eigene Färbung */
.nav-link--meinung {
font-style: italic;
}
.nav-link--meinung::after {
background-color: var(--terracotta);
}
.nav-link--meinung:hover,
.nav-link--meinung.active {
color: var(--terracotta);
}
/* Strang-B Nav-Link (Anleitungen) nutzt jetzt default sage-Hover — keine eigene Klasse */
@media (max-width: 768px) {
.brand-untertitel { display: none; }
.brand-wordmark { font-size: 18px; }
.brand-glyph, .brand-logo-video { width: 28px; height: 28px; }
}
.light-mode .brand-wordmark { color: var(--aubergine); }
.light-mode .brand-glyph { color: var(--aubergine); border-color: var(--aubergine); }
} /* end @layer base */
/* ═══ css/animations.css ═══ */
/* ── View Transitions API ─ Cross-Route Page-Transitions (Chrome 111+, Safari 18+, FF 128+) ──
Router ruft document.startViewTransition() bei Hash-Wechsel. Browser interpoliert
automatisch zwischen old-snapshot und new-snapshot. Named Elements (z.B. hero-map)
bleiben über Routen-Wechsel persistent. */
@layer base {
::view-transition-old(root) {
animation: vt-page-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
animation: vt-page-in 320ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes vt-page-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-10px); }
}
@keyframes vt-page-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Persistent Hero-Map über Routen-Wechsel — Map bleibt während des Transitions stehen,
Content drumherum wechselt. Wirkung: CivicNova fühlt sich wie eine App an, nicht
wie 9 separate Seiten. */
.hero-map-canvas {
view-transition-name: hero-map;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
/* ── Shared-Element-Morph: Tile → stueck-Detail-Header (Animation 03) ────────
Quelle/Ziel teilen sich view-transition-name "stueck-hero" (Tile via JS vor
der Navigation, stueck-Header statisch). Browser interpoliert Bounds + Größe.
Custom Easing für smooth deceleration (kein Spring). reduced-motion ist über
den ::view-transition-group(*)-Block oben (Z. 29-35) schon deaktiviert. */
/* Dauern = Motion-Tokens (DESIGN §2, keine Freihand-Dauern). Der Morph läuft auf
--cl-motion-slow (Reveal), der alte Snapshot fadet auf --cl-motion-base aus. */
::view-transition-group(stueck-hero) {
animation-duration: var(--cl-motion-slow);
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(stueck-hero) {
animation: vt-morph-fade-out var(--cl-motion-base) ease-out forwards;
}
::view-transition-new(stueck-hero) {
animation: vt-morph-fade-in var(--cl-motion-slow) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes vt-morph-fade-out { to { opacity: 0; } }
@keyframes vt-morph-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Modern Transitions and Micro-Animations */
/* ── A11Y: prefers-reduced-motion ───────────────────────────────────
Springt sofort auf Endzustand, deaktiviert Pulse-/Float-/Gradient-Animationen. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.anim-fade-in,
.anim-slide-up,
.anim-slide-up-delay-1,
.anim-slide-up-delay-2,
.page-view {
opacity: 1 !important;
transform: none !important;
}
.dot-signal,
.anim-pulse-yellow,
.anim-float,
.animated-gradient-bg {
animation: none !important;
}
}
/* Page View Transition Animations */
.page-view {
animation: pageFadeIn var(--transition-normal) forwards;
}
@keyframes pageFadeIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Micro-interaction Keyframes */
@keyframes pulseSecondary {
0% {
box-shadow: 0 0 0 0 rgba(253, 194, 32, 0.4);
}
70% {
box-shadow: 0 0 0 8px rgba(253, 194, 32, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(253, 194, 32, 0);
}
}
@keyframes floatElement {
0% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0px); }
}
@keyframes drawBorder {
to { width: 100%; }
}
/* Application Animation Utilities */
.anim-fade-in {
opacity: 0;
animation: fadeIn var(--transition-slow) forwards;
}
.anim-slide-up {
opacity: 0;
transform: translateY(24px);
animation: slideUp var(--transition-slow) forwards;
}
.anim-slide-up-delay-1 {
opacity: 0;
transform: translateY(24px);
animation: slideUp var(--transition-slow) 0.15s forwards;
}
.anim-slide-up-delay-2 {
opacity: 0;
transform: translateY(24px);
animation: slideUp var(--transition-slow) 0.3s forwards;
}
.anim-float {
animation: floatElement 4s ease-in-out infinite;
}
.anim-pulse-yellow {
animation: pulseSecondary 2s infinite;
}
/* Animation Keyframes */
@keyframes fadeIn {
to { opacity: 1; }
}
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hover Micro-interactions */
.interactive-hover-grow {
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.interactive-hover-grow:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
/* ── @starting-style: deklarative Entry-Animations für Drawer + Modal-Inhalte ──
Browser kennt den Initial-State, animiert beim Erscheinen. Kein JS-Trick mit
add-Class+removeClass mehr nötig. Browser-Support: Chrome 117+, Safari 17.5+, FF 129+. */
@supports (transition-behavior: allow-discrete) {
.strang-drawer.open {
opacity: 1;
transform: translateY(0);
transition:
opacity var(--cl-motion-base) var(--cl-ease-out),
transform var(--cl-motion-base) var(--cl-ease-out);
@starting-style {
opacity: 0;
transform: translateY(16px);
}
}
/* Toast-Notification (Map-Erkunden-Button) bekommt sanften Auftritt */
.map-erkunden-toast {
opacity: 1;
transform: translateY(0);
transition:
opacity var(--cl-motion-base) var(--cl-ease-out),
transform var(--cl-motion-base) var(--cl-ease-out);
@starting-style {
opacity: 0;
transform: translateY(20px);
}
}
}
/* Diagonal stripe gradient animation background */
.animated-gradient-bg {
background: linear-gradient(-45deg, #502379, #6a349c, #1BBE6F, #502379);
background-size: 400% 400%;
animation: gradientMove 15s ease infinite;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
} /* end @layer base */
/* ═══ css/components/buttons.css ═══ */
@layer components {
/* Buttons — CivicNova. Keine hartkodierten Farben mehr; alles via Tokens. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--space-3) var(--space-6);
border: 2px solid transparent;
cursor: pointer;
transition: background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
text-decoration: none;
outline: none;
}
.btn:active {
transform: scale(0.98);
}
/* ── Primary — Terrakotta-Fläche + Ink-Text (v2 · Ä14/HOME-03/MS-02) ───────
Die dokumentierte „Funke"-Rolle (Links, Calls). Signal (Amber) ist KEINE
Fläche mehr — nur noch Live-Punkte. Werte kommen aus variables.css
(--btn-primary-bg = Terrakotta, --btn-primary-text = fester Ink #171019,
modus-unabhängig für 4,97:1). */
.btn-primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
border-radius: var(--btn-primary-radius);
border-color: var(--btn-primary-bg);
}
.btn-primary:hover {
/* Leicht abgedunkelte Terrakotta via color-mix — bleibt in der Familie */
background-color: color-mix(in srgb, var(--btn-primary-bg) 88%, #000);
border-color: color-mix(in srgb, var(--btn-primary-bg) 88%, #000);
box-shadow: 0 4px 12px rgba(198, 107, 69, 0.22);
color: var(--btn-primary-text);
}
.btn-primary:focus-visible {
box-shadow: 0 0 0 3px rgba(142, 154, 108, 0.45); /* sage focus */
}
/* ── Secondary — Sage-Outline ──────────────────────────────────── */
.btn-secondary {
background-color: transparent;
color: var(--cream);
border-radius: var(--btn-secondary-radius);
border-color: var(--sage);
}
.btn-secondary:hover {
background-color: var(--sage);
color: var(--ink);
border-color: var(--sage);
box-shadow: 0 4px 12px rgba(142, 154, 108, 0.20);
}
.btn-secondary:focus-visible {
box-shadow: 0 0 0 3px rgba(142, 154, 108, 0.30);
}
/* ── Accent — Aubergine (selten, für Struktur-CTAs) ───────────── */
.btn-accent {
background-color: var(--aubergine);
color: var(--cream);
border-radius: 0;
border-color: var(--aubergine);
}
.btn-accent:hover {
/* Dunklere Aubergine — bleibt in der Familie, kein Volt-Knall-Lila */
background-color: #3F345A;
border-color: #3F345A;
box-shadow: 0 4px 12px rgba(87, 74, 124, 0.25);
}
.btn-accent:focus-visible {
box-shadow: 0 0 0 3px rgba(87, 74, 124, 0.35);
}
/* ── Outline — dezent, sage-Border ─────────────────────────────── */
.btn-outline {
background-color: transparent;
color: var(--cream);
border-color: var(--aubergine);
border-radius: 0;
}
.btn-outline:hover {
background-color: var(--surface);
border-color: var(--sage);
color: var(--sage);
}
.btn-outline:focus-visible {
box-shadow: 0 0 0 3px rgba(142, 154, 108, 0.30);
}
/* ── Größen-Varianten ──────────────────────────────────────────── */
.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: 18px;
}
.btn-sm {
padding: var(--space-2) var(--space-4);
font-size: 14px;
}
/* ── Disabled ──────────────────────────────────────────────────── */
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* ── Light-Mode ───────────────────────────────────────────────── */
/* .btn-primary braucht keinen Light-Override mehr: Terrakotta-Fläche +
fester Ink-Text gelten modus-unabhängig (siehe variables.css). */
.light-mode .btn-secondary {
color: var(--aubergine);
border-color: var(--aubergine);
}
.light-mode .btn-secondary:hover {
background-color: var(--aubergine);
color: var(--cream);
border-color: var(--aubergine);
}
.light-mode .btn-outline {
color: var(--aubergine);
border-color: var(--aubergine);
}
.light-mode .btn-outline:hover {
background-color: rgba(87, 74, 124, 0.08);
color: var(--aubergine);
}
} /* end @layer components */
/* ═══ css/components/inputs.css ═══ */
@layer components {
/* Inputs and Form Control Styles */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.form-label {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Base input element */
.form-input,
.form-textarea,
.form-select {
width: 100%;
font-family: var(--font-primary);
font-size: 16px;
padding: var(--space-3) var(--space-4);
background-color: var(--input-bg);
color: var(--input-text);
border: 1px solid var(--color-border-subtle);
border-radius: var(--input-border-radius); /* 0px */
outline: none;
box-shadow: var(--shadow-none); /* shadow: none */
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Hover State */
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
border-color: var(--color-primary);
}
/* Focus State */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
border-color: var(--color-border-focus);
background-color: var(--input-bg);
box-shadow: 0 0 0 3px rgba(80, 35, 121, 0.15); /* Light focus glow, keeping input border radius 0 */
}
/* Textarea specific sizing */
.form-textarea {
resize: vertical;
min-height: 120px;
}
/* Error validation states */
.form-group.has-error .form-input,
.form-group.has-error .form-textarea {
border-color: var(--color-status-rejected);
}
.form-group.has-error .form-label {
color: var(--color-status-rejected);
}
.form-error-msg {
font-size: var(--font-size-small);
color: var(--color-status-rejected);
margin-top: var(--space-1);
font-weight: 500;
}
/* Checkbox & Radio layouts */
.form-check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-4);
cursor: pointer;
}
.form-check-input {
margin-top: 5px;
width: 18px;
height: 18px;
border: 1px solid var(--color-border-subtle);
border-radius: 0px; /* Force 0px for checklist checkbox as well */
accent-color: var(--color-primary);
cursor: pointer;
}
.form-check-label {
font-size: var(--font-size-small);
color: var(--color-text-body);
user-select: none;
}
} /* end @layer components */
/* ═══ css/components/cards.css ═══ */
@layer components {
/* Card Components & Grids */
.grid-cols-1 {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
.grid-cols-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
}
.grid-cols-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
/* Base Card structure */
.card {
background-color: var(--color-bg-card);
border: 1px solid var(--color-border-subtle);
border-radius: 2px;
padding: var(--space-6);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal),
box-shadow var(--transition-normal),
border-color var(--transition-normal);
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: var(--color-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-normal);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.card:hover::before {
transform: scaleX(1);
}
/* Glassmorphic Panel Variant */
.card-glass {
background: rgba(241, 232, 206, 0.03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(241, 232, 206, 0.1);
color: var(--color-text-light);
box-shadow: var(--shadow-glass);
}
/* Councilor (Fraktion) profile Card */
.profile-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
overflow: hidden;
}
.profile-card-image-wrapper {
position: relative;
width: 100%;
height: 320px;
background-color: var(--color-bg-tertiary);
overflow: hidden;
}
/* If no photo is loaded, show a styled fallback silhouette */
.profile-card-fallback-avatar {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-primary), var(--color-bg-tertiary));
color: rgba(241, 232, 206, 0.6);
}
.profile-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.profile-card:hover .profile-card-img {
transform: scale(1.05);
}
.profile-card-content {
padding: var(--space-6);
flex-grow: 1;
display: flex;
flex-direction: column;
}
.profile-card-role {
font-size: var(--font-size-small);
text-transform: uppercase;
font-weight: 700;
color: var(--color-accent);
margin-bottom: var(--space-1);
letter-spacing: 0.05em;
}
.profile-card-name {
font-size: var(--font-size-h3);
color: var(--color-primary);
font-weight: 700;
margin-bottom: var(--space-2);
}
.profile-card-committees {
font-size: 14px;
color: var(--color-text-muted);
margin-bottom: var(--space-4);
flex-grow: 1;
}
.profile-card-contact {
display: flex;
gap: var(--space-3);
border-top: 1px solid var(--color-border-subtle);
padding-top: var(--space-4);
margin-top: auto;
}
.profile-contact-link {
color: var(--color-text-muted);
font-size: 14px;
display: flex;
align-items: center;
gap: var(--space-1);
}
.profile-contact-link:hover {
color: var(--color-primary);
}
/* Badge component */
.badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-tiny);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 2px;
}
.badge-yellow {
background-color: rgba(253, 194, 32, 0.15);
color: #b78703;
}
.badge-purple {
background-color: rgba(80, 35, 121, 0.1);
color: var(--color-primary);
}
.badge-green {
background-color: rgba(27, 190, 111, 0.1);
color: #12804b;
}
/* Responsiveness */
@media (max-width: 992px) {
.grid-cols-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.grid-cols-2, .grid-cols-3 {
grid-template-columns: 1fr;
}
}
} /* end @layer components */
/* ═══ css/components/modal.css ═══ */
@layer components {
/* Modal Dialogue Component Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(26, 10, 42, 0.6); /* Translucent Volt Dark */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-container {
background-color: var(--color-bg-primary);
border: 1px solid var(--color-border-subtle);
border-top: 6px solid var(--color-primary);
border-radius: 2px;
width: 90%;
max-width: 750px;
max-height: 85vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
transform: translateY(24px) scale(0.98);
transition: transform var(--transition-normal);
}
.modal-overlay.active .modal-container {
transform: translateY(0) scale(1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-6);
border-bottom: 1px solid var(--color-border-subtle);
}
.modal-title {
font-size: var(--font-size-h3);
font-weight: 700;
color: var(--color-primary);
}
.modal-close-btn {
background: transparent;
border: none;
cursor: pointer;
font-size: 24px;
color: var(--color-text-muted);
transition: color var(--transition-fast);
padding: var(--space-1);
display: flex;
align-items: center;
justify-content: center;
}
.modal-close-btn:hover {
color: var(--color-primary);
}
.modal-body {
padding: var(--space-6);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-border-subtle);
background-color: var(--color-bg-secondary);
}
/* Modal sizing variations */
.modal-lg {
max-width: 950px;
}
.modal-sm {
max-width: 450px;
}
} /* end @layer components */
/* ═══ css/components/lanes.css ═══ */
@layer components {
/* Lane-System — Aufklärung (neutral) vs. Einordnung (meinung)
Drei gleichzeitige Hebel: Farbe + Typo + Label.
Hard rule: meinung in <2s erkennbar.
v2 · Ä1: Farbige Kanten + Lane-Labels laufen über die flippenden Tokens
--cl-lane-neutral / --cl-lane-meinung. Im Dark sind das exakt Salbei/Terrakotta
(0 Änderung), im Light die WCAG-verifizierten -ink-Töne — damit ist der 5px-Balken
und das Mono-Label auf Creme sichtbar statt zu verschwinden. */
/* ── Lane neutral (Strang A / B / C — Bericht) ──────────────────── */
[data-lane="neutral"] {
border-left: 5px solid var(--cl-lane-neutral);
padding-left: var(--space-6);
background: transparent;
}
[data-lane="neutral"] .lane-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--cl-lane-neutral);
text-transform: uppercase;
display: inline-block;
margin-bottom: var(--space-3);
}
/* ── Lane Meinung (Strang D — Einordnung) ──────────────────────── */
[data-lane="meinung"] {
border: 2px solid var(--cl-lane-meinung);
border-top: 5px solid var(--cl-lane-meinung);
padding: var(--space-6);
background: rgba(198, 107, 69, 0.05);
}
[data-lane="meinung"] .lane-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--cl-lane-meinung);
background: rgba(198, 107, 69, 0.10);
padding: var(--space-2) var(--space-4);
display: inline-block;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
[data-lane="meinung"] h1,
[data-lane="meinung"] h2,
[data-lane="meinung"] h3 {
font-style: italic;
color: var(--cream);
}
[data-lane="meinung"] .author-signature {
display: flex;
gap: var(--space-3);
align-items: center;
color: var(--aubergine);
font-size: var(--font-size-small);
font-family: var(--font-mono);
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid rgba(198, 107, 69, 0.25);
}
[data-lane="meinung"] .author-signature::before {
content: "";
width: 12px;
height: 12px;
background: var(--aubergine);
border-radius: 50%;
display: inline-block;
}
/* Hinweis: Strang B (Anleitungen) nutzt data-lane="neutral" (sage-Ton) —
eigene Lane "anleitung" wurde 2026-06-22 entfernt (Slava-Iteration:
4 Stränge mit klarer Sage/Terrakotta-Logik). */
/* ── Lane-Banner (zusätzlich über Meinung-Stücken) ─────────────── */
.lane-banner {
background: var(--terracotta);
color: #171019; /* fester Ink — Terrakotta-Fläche bleibt lesbar in beiden Modi (var(--ink) kippt im Light zu Creme) */
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: var(--space-2) var(--space-4);
margin-bottom: 0;
border-bottom: 4px solid var(--terracotta);
}
.lane-banner::before {
content: "● ";
}
/* ── Mobile: sticky Band oben + 4 px Fußleiste in Lane-Farbe ────── */
@media (max-width: 768px) {
[data-lane="neutral"] {
border-bottom: 4px solid var(--cl-lane-neutral);
}
[data-lane="meinung"] {
border-bottom: 4px solid var(--cl-lane-meinung); /* v2 · MS-01: -style/-color komplettiert */
padding: var(--space-4);
}
[data-lane="meinung"] .lane-label {
position: sticky;
top: var(--nav-height);
z-index: 5;
width: 100%;
margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
border-bottom: 4px solid var(--cl-lane-meinung);
}
}
/* ── Light-Mode Anpassungen ────────────────────────────────────── */
.light-mode [data-lane="meinung"] {
background: rgba(198, 107, 69, 0.08);
}
.light-mode [data-lane="meinung"] h1,
.light-mode [data-lane="meinung"] h2,
.light-mode [data-lane="meinung"] h3 {
color: var(--aubergine);
}
} /* end @layer components */
/* ═══ shared/components/Belege.css ═══ */
@layer components {
/* ──────────────────────────────────────────────────────────────────────
Belege — Beleg-Badge + Q¹-Marke + Quellen-Card + Quellenverzeichnis
Migriert nach shared/ in Task 2.3 (Shared-Architecture-Refactor 2026-06-30).
Quelle: civiclab/css/components/belege.css (Hauptseite, einzige Variante).
Token-only — alle Farb-Aliase als var(--cl-*) referenziert.
Drei Patterns: Badge (Stück-Anfang) · Inline-Marke (Hover-Card) · Verzeichnis (Stück-Ende).
────────────────────────────────────────────────────────────────────── */
/* ── Stück-Anfang: Belegt-Badge ────────────────────────────────── */
.beleg-badge {
font-family: var(--cl-font-mono, 'Space Mono', 'Courier New', monospace);
font-size: 12px;
color: var(--cl-sage);
border: 1px solid var(--cl-sage);
padding: var(--space-1) var(--space-3);
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(142, 154, 108, 0.06); /* sage @6 % — kein Token-Pendant */
}
.beleg-badge::before {
content: "◆ ";
}
/* ── Inline-Marke (Q¹, Q², …) ─────────────────────────────────── */
.beleg-marke {
font-family: var(--cl-font-mono, 'Space Mono', 'Courier New', monospace);
font-size: 0.75em;
vertical-align: super;
color: var(--cl-signal);
cursor: pointer;
background: rgba(224, 169, 59, 0.12); /* signal @12 % — kein Token-Pendant */
padding: 1px 5px;
margin: 0 1px;
text-decoration: none;
border: 0;
font-weight: 700;
transition: background var(--transition-fast);
}
.beleg-marke:hover,
.beleg-marke:focus-visible {
background: var(--cl-signal);
color: var(--cl-ink);
outline: 2px solid var(--cl-sage);
outline-offset: 2px;
}
/* ── Quellen-Card (Hover/Tap) ─────────────────────────────────── */
.quellen-card {
position: absolute;
background: var(--cl-surface);
border: 1px solid var(--cl-sage);
border-left: 3px solid var(--cl-sage);
padding: var(--space-4);
max-width: 360px;
box-shadow: var(--shadow-md);
z-index: 100;
font-family: var(--cl-font-display, 'Archivo', sans-serif);
font-size: 14px;
color: var(--cl-cream);
}
.quellen-card .titel {
font-weight: 700;
color: var(--cl-cream);
margin-bottom: var(--space-1);
}
.quellen-card .meta {
color: var(--cl-text-muted);
font-size: 13px;
font-family: var(--cl-font-mono, 'Space Mono', 'Courier New', monospace);
margin-bottom: var(--space-3);
}
.quellen-card .link {
color: var(--cl-sage);
font-family: var(--cl-font-mono, 'Space Mono', 'Courier New', monospace);
font-size: 13px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.quellen-card .link:hover {
color: var(--cl-signal);
}
.quellen-card-id {
font-family: var(--cl-font-mono, 'Space Mono', 'Courier New', monospace);
font-size: 11px;
color: var(--cl-sage);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-2);
}
/* ── Quellen-Popover v2 (Popover API +