/* Design-Tokens — extrahiert per getComputedStyle() aus dem gerenderten Original (https://www.spekter.de/, Playwright/Chromium, Viewport 1440x900). Herleitung/Begründung siehe docs/DECISIONS.md. */ :root { /* Helles Design, fest. Verhindert die automatische Browser-Eindunkelung im Dark-Mode des Betriebssystems - spekter.de ist wie das Original hell. */ color-scheme: light; /* ---- Farben (gemessen) ---- */ --color-bg: #ffffff; --color-surface: #f2f2f2; /* rgb(242,242,242) — Footer-/Section-Flächen */ --color-border: #eaeaea; /* rgb(234,234,234) */ /* Überschriftenfarbe. Nachgemessen auf /unternehmen/, /impressum/ und /starkregen-news/: das Original setzt für h1/h2/h3 durchgängig rgb(51,51,51). Der bisherige Wert #111111 stammte aus einer Stichprobe und war sichtbar zu dunkel. #333 erreicht auf Weiß 12,6:1 und ist damit unverändert weit über WCAG AA. */ --color-text: #333333; /* rgb(51,51,51) — Überschriften auf hellem Grund */ /* Original-Messwert #818181 (rgb(129,129,129), sitewide Fliesstext-Grau). Die fruehere AA-Nachdunkelung auf #767676 war eine bewusste Abweichung - auf expliziten Kundenwunsch ("1:1") 2026-07-28 auf den Originalwert zurueckgestellt (#818181 = ~3,9:1 auf Weiss, verfehlt WCAG-AA 4,5:1 knapp; Abwaegung dokumentiert in docs/DECISIONS.md + Vergleichslauf- README Lauf 5). */ --color-text-muted: #818181; --color-text-subtle: #333333; /* rgb(51,51,51) — Footer-Links */ /* Original: sehr helles Grau #c9c9c9 (Footer-Spaltentitel u.a.). Die fruehere AA-Nachdunkelung auf #6e6e6e war eine bewusste Abweichung - auf expliziten Kundenwunsch ("1:1") 2026-07-28 auf den Originalwert zurueckgestellt (s. docs/DECISIONS.md + Vergleichslauf-README Lauf 5). */ --color-text-faint: #c9c9c9; --color-on-dark: #ffffff; /* Text auf Hero/dunklem Grund */ --color-brand-blue: #009bd9; /* rgb(0,155,217) — "STARKREGEN ews", nur fuer Flaechen/Logos */ /* Textvariante des Marken-Blaus: das reine #009bd9 besteht als Text- oder Hintergrundfarbe fuer weissen Text keinen AA-Kontrasttest (~3.1:1). #006688 erreicht ~6.4:1 bei nahezu gleichem Blauton, s. DECISIONS.md. */ --color-brand-blue-text: #006688; --color-brand-pink: #e20074; /* rgb(226,0,116) — "STARKREGEN fas" / Telekom-Magenta */ --color-accent-teal: #37a58c; /* rgb(55,165,140) */ --color-navy: #002e6b; /* rgb(0,46,107) */ --color-link: #0000ee; /* rgb(0,0,238) — Button-/Link-Akzent */ --overlay-hero-dark: rgba(0, 0, 0, 0.69); --overlay-card: rgba(17, 17, 17, 0.55); --overlay-hairline: rgba(0, 0, 0, 0.09); /* ---- Typo ---- */ --font-heading: "Poppins", "Poppins Placeholder", sans-serif; /* Fliesstext ist im Original Poppins, NICHT Inter: Font-Zensus ueber die Live-Seiten (Vergleichslauf 2026-07-24, font-census.mjs) zaehlt auf der Startseite 442x "Poppins 400 @15px" und 0x Inter im Fliesstext; auch kontakt/gk/forschung/referenzen/veranstaltungen: alle Absaetze Poppins 400. Inter kommt im Original nur punktuell vor (Partnerbar-Label "Inter-Bold", gk-Hero-Untertitel Inter 500) - dafuer bleibt --font-accent auf Inter. */ --font-body: "Poppins", "Poppins Placeholder", sans-serif; --font-accent: "Inter", "Inter Placeholder", sans-serif; /* ---- Typo-Skala ---- Vollstaendiger Abgleich (Lauf 4, docs/qa/typo-audit.md): jede Groessen- stufe wurde per getComputedStyle auf der jeweils passenden Original-Seite nachgemessen, nicht mehr von einer Stichprobe hochgerechnet. Das Original hat GENAU diese sieben Stufen - insbesondere: 51/700/1.2 Hero-H1, ausschliesslich Startseite 32/700/1.2 Seitentitel aller Innenseiten mit Hero (fas, ews, unternehmen, allianzen, veranstaltungen, forschung, referenzen) 29/700/1.2 Sektionsueberschrift; auf den Textseiten (Impressum, Datenschutz, Kontakt, Blogpost, Stellenanzeige) zugleich der Seitentitel 24/700/1.2 Karten-/Untersektionstitel + Hero-Eyebrow 18/700/1.2 kleiner Sektionskopf (selten, z.B. ews) 15/… /1.5 Fliesstext UND Label/Betonung - Unterschied nur ueber font-weight (400 vs 700). Buttons, Links, Footer, Daten, Tabs: alle 15px. 12/400/1.5 Bildunterschrift, Jahreszahl, Kategorie Regel dahinter: alles >= 18px hat line-height 1.2, alles <= 15px hat 1.5. Ein 14px-Tier gibt es im Original NIRGENDS - das bisherige --fs-small:14px war ein systematischer Uebertragungsfehler, der Footer, Buttons, Tabs, Datumsangaben und Kartentexte sitework ~1px zu klein gerendert hat. */ --fs-hero: 51px; /* nur Startseiten-Hero */ --lh-hero: 1.2; --fs-h1: 32px; /* Seitentitel Innenseiten */ --lh-h1: 1.2; --fs-h2: 29px; /* Sektionsueberschrift */ --lh-h2: 1.2; --fs-card: 24px; /* Karten-/Untersektionstitel */ --lh-card: 1.2; --fs-eyebrow: var(--fs-card); /* Hero-Eyebrow, gleiche Stufe wie Kartentitel */ --lh-eyebrow: var(--lh-card); --fs-sub: 18px; /* kleiner Sektionskopf */ --lh-sub: 1.2; --fs-h3: 15px; /* Label-/Betonungsstufe (Team-, Job-, Rechtstitel) */ --lh-h3: 1.5; --fs-body: 15px; --lh-body: 1.5; /* Alias auf --fs-body: das Original kennt keine eigene 14px-Stufe. Der Token bleibt erhalten, damit "kleiner Sekundaertext" im CSS benannt bleibt - seine Groesse ist aber per Definition die des Fliesstextes. */ --fs-small: var(--fs-body); --lh-small: var(--lh-body); --fs-micro: 12px; --lh-micro: 1.5; /* Einzige Stelle, an der das Original wirklich 14px verwendet: die gefuellten Akzent-Buttons - und dort in Inter, nicht Poppins (14/700/16.8 nachgemessen). Deshalb ein eigener Token statt einer allgemeinen "small"-Stufe, s. .btn--accent in base.css. */ --fs-cta: 14px; --lh-cta: 1.2; /* Das Original nutzt ausschliesslich 400 und 700 - es gibt kein 600. Die selbst gehosteten Poppins-Dateien liefern ohnehin nur diese beiden Schnitte, ein deklariertes 600 waehlte still den 700er-Schnitt aus. --fw-semibold wurde deshalb entfernt; jede fruehere Verwendung ist gegen den gemessenen Original-Wert auf 400 oder 700 gesetzt worden. */ --fw-regular: 400; --fw-bold: 700; /* ---- Abstände (systematisiert auf 8px-Basis, s. DECISIONS.md) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Radien / Rahmen ---- */ --radius-sm: 6px; --radius-md: 9px; --radius-lg: 16px; /* ---- Layout ---- */ --container-max: 1200px; --container-pad: var(--space-5); /* ---- Breakpoints (aus @media-Regeln des Originals; als Referenzwerte, Media Queries selbst muessen die px-Literale verwenden) ---- */ --bp-desktop: 1200px; --bp-tablet: 810px; --bp-mobile: 480px; --bp-mobile-xs: 320px; /* ---- Uebergaenge ---- Am Original nachgemessen (Lauf 4): es gibt dort auf KEINEM interaktiven Element eine transition - die einzige Deklaration ueberhaupt ist `fill .1s cubic-bezier(.4,0,1,1)` auf 7 SVG-Pfaden. Es gibt also keinen Original-Wert, gegen den sich Dauer/Kurve abgleichen liessen: alle Uebergaenge im Nachbau gehoeren zu den bewusst ergaenzten Hover-Zustaenden (Lauf 3, s. docs/DECISIONS.md) und sind damit unsere eigene Wahl. Hier zentralisiert, damit sie ueberall identisch sind statt 7x einzeln literal im CSS zu stehen. Kollabiert via prefers-reduced-motion. */ --duration-fast: .15s; --duration-nav: .2s; /* Mobil-Navigation, laengerer Weg */ --duration-hover: .22s; /* Mikrointeraktionen (Karten-/Button-Anhebung) */ --ease: ease; /* Weiche Ausklang-Kurve (easeOutExpo-artig), wie Framers "appear"/whileHover. Wird sowohl fuer die Einblend-Sequenz (reveal.js) als auch fuer die Hover-Anhebungen genutzt, damit alles aus einer Bewegungssprache spricht. */ --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* ---- Bewegung: Einblend-Sequenz (reveal.js) ---- Am Live-Original nachempfunden (Framer-"appear"): eine ZUEGIGE Eingangs- sequenz beim Laden mit kurzer, weicher Aufwaertsbewegung und feiner Staffelung - nicht das langsame, weite Hochgleiten von vorher. */ --reveal-duration: .5s; --reveal-shift: 14px; /* ---- Schatten ---- */ --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.12); /* Weiche Anhebe-Schatten fuer Hover (Karten/Buttons). */ --shadow-lift: 0 10px 24px rgba(0, 0, 0, 0.10); --shadow-lift-dark: 0 18px 40px rgba(0, 0, 0, 0.28); } /* ---- Responsive Typo-Skala ---- Am Original an den Umbruchpunkten nachgemessen (1440/1000/810/809/768/390px, /opt/tooling/m2.mjs). Das Original schaltet die Skala genau zweimal: >= 810px : Hero 51, Sektion 29, Karte 24 < 810px : Hero 34, Sektion 23, Karte 18 1000px : Sektion und Karte fallen bereits auf 23 zusammen Seitentitel (32), Fliesstext (15) und Micro (12) bleiben auf ALLEN Breiten unveraendert - das Original skaliert sie nicht. Die bisherige Regel (--fs-h1: 34px / --fs-h2: 24px erst ab 480px) traf damit weder den Umbruchpunkt noch die Werte. */ @media (max-width: 1199px) { :root { --fs-h2: 23px; --fs-card: 23px; } } @media (max-width: 809px) { :root { --fs-hero: 34px; --fs-card: 18px; } } /* KEIN Dark-Mode. spekter.de ist ein helles Design und bleibt hell - unabhaengig vom Betriebssystem/Browser des Besuchers. Zuvor stand hier ein @media(prefers-color-scheme: dark)-Block, der die gesamte Seite auf ~#111 eindunkelte, sobald der Nutzer im Dark-Mode war (Hintergrund fast schwarz). Das Original macht das NICHT. `color-scheme: light` (oben im :root) sorgt zusaetzlich dafuer, dass Formularfelder, Scrollbalken etc. nicht vom Browser automatisch invertiert werden. */