/* ==========================================================================
AVECTRA DESIGN-TOKENS · tokens.css
==========================================================================
Die visuelle Grundlage aller Avectra-Produktseiten (Avectra ist eine Marke
der Kuventa GmbH). Diese Datei definiert Custom Properties und die beiden
@font-face-Deklarationen — keine Komponenten. Komponenten liegen in base.css.
HERKUNFT: Dieses Design hat Dennis am 2026-07-14 als verbindliche Vorgabe
geliefert (Referenz: design-system/avectra-design-system.html). Die Werte
hier sind daraus extrahiert; einzelne Farbtöne wurden minimal nachjustiert,
damit alle Textpaare WCAG 2.1 AA erfüllen (Nachweis am Dateiende).
BENUTZUNG (immer in dieser Reihenfolge einbinden):
Dazu gehört der Ordner fonts/ (Kopie aus design-system/fonts/) — die
Schriften werden selbst gehostet, NIEMALS von Google Fonts o. ä. geladen.
REGELN FÜR BENEDICT (hart):
- Farben NIEMALS als Hex-Werte in Seiten-CSS schreiben. Immer var(--…).
- Keine neuen Farben erfinden. Die Palette ist absichtlich klein.
- Kein externes CDN (Fonts, Icons, Scripts). Alles ist self-contained.
- Alle Text-Farbpaare unten sind WCAG-AA-geprüft (≥ 4.5:1). Wer Paare neu
kombiniert, muss den Kontrast selbst prüfen — im Zweifel: Tinte auf Fläche.
DESIGNIDEE:
Modern, klar, freundlich-präzise: Space Grotesk für Headlines und die
lowercase-Wortmarke „avectra", IBM Plex Sans für Text und UI. Petrol-Teal
(#0FB5AA) als Markenfarbe, tiefes Petrol-Ink (#0C2427) für dunkle
Hero-/CTA-Sektionen und den Footer, 12-px-Radien für Buttons und Felder,
weiche gestaffelte Schatten, Pillen nur für Badges.
========================================================================== */
/* --------------------------------------------------------------------------
0) SCHRIFTEN (self-hosted, variable Fonts, Subset Latin)
Quelle: aus Dennis' Original-Bundle extrahiert (ursprünglich Google Fonts).
Lizenz: SIL Open Font License 1.1 — siehe fonts/OFL-LIZENZ.txt.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
}
/* --------------------------------------------------------------------------
1) HELLES THEMA (Standard)
-------------------------------------------------------------------------- */
:root {
color-scheme: light dark;
/* ---- Farbe: Flächen -------------------------------------------------- */
--farbe-grund: #FFFFFF; /* Seitenhintergrund */
--farbe-flaeche: #FFFFFF; /* Karten, Formulare */
--farbe-flaeche-sanft: #F7F9FA; /* abgesetzte Bänder (Slate 50) */
--farbe-flaeche-tief: #EEF2F3; /* Sekundär-Button, Code (Slate 100) */
--farbe-akzent-wash: #ECFDFB; /* helle Petrol-Fläche (Badges, Hinweise) */
--farbe-wash-rand: #CDF7F1; /* Rand auf Akzent-Wash-Flächen */
/* ---- Farbe: Text ------------------------------------------------------ */
--farbe-tinte: #0F2226; /* Fließtext & Überschriften (Slate 900) */
--farbe-tinte-sanft: #65757B; /* Sekundärtext (AA-justiert von #697A80) */
--farbe-invers: #FFFFFF; /* Text auf Akzent-Buttons */
/* ---- Farbe: Akzent (Petrol-Teal, interaktiv) ---------------------------
Die Marken-Basis #0FB5AA trägt keinen Text (zu hell für AA). Für Links
und Buttons gilt das dunklere, AA-feste Petrol. */
--farbe-akzent: #0D8079; /* Links, Primär-Button (AA-justiert von #0C9089) */
--farbe-akzent-stark: #0E726D; /* Hover/Active, Text auf Wash (Teal 700) */
/* ---- Farbe: Marke (NUR dekorativ — nie für Text!) ---------------------- */
--farbe-marke: #0FB5AA; /* Logo, Punkte, Diagramm-Akzente (Teal 500) */
--farbe-marke-hell: #5FE0D4; /* Highlights auf dunklen Flächen (Teal 300) */
--farbe-akzent-deko: #FF6B4A; /* Koralle: seltene Deko-Glows, nie Text/Buttons */
/* ---- Farbe: dunkle Sektionen (Hero-Panel, CTA, Footer) ------------------
Theme-unabhängig: dunkle Sektionen bleiben in beiden Themes dunkel. */
--farbe-dunkel: #0C2427; /* Ink */
--farbe-dunkel-tief: #0F2E30; /* Ink 2 (Verlaufspartner) */
--farbe-dunkel-text: #FFFFFF;
--farbe-dunkel-text-sanft: rgba(255, 255, 255, 0.78);
--farbe-dunkel-linie: rgba(255, 255, 255, 0.16);
--farbe-dunkel-glas: rgba(255, 255, 255, 0.09);
--farbe-dunkel-akzent: #5FE0D4; /* Text-Highlight auf Ink (10.1:1) */
--farbe-dunkel-akzent-hell:#9CEEE4; /* Badges auf Ink (12.2:1) */
/* ---- Verläufe (die einzigen erlaubten — nur über diese Tokens) --------- */
--verlauf-dunkel: radial-gradient(120% 120% at 85% 0%, var(--farbe-dunkel-tief), var(--farbe-dunkel) 60%);
--verlauf-cta: radial-gradient(120% 140% at 15% 0%, #0E726D, var(--farbe-dunkel) 72%); /* Start AA-justiert von #0C9089 */
--verlauf-logo: linear-gradient(135deg, #22C9BC, #0C9089);
--schein-marke: radial-gradient(50% 60% at 92% 8%, rgba(15, 181, 170, 0.34), transparent 70%);
--schein-deko: radial-gradient(circle, rgba(255, 107, 74, 0.22), transparent 70%);
/* ---- Farbe: Linien & Ränder ------------------------------------------- */
--farbe-linie: #E2E8EA; /* dekorative Haarlinien, Kartenränder (NICHT für Text!) */
--farbe-rand-feld: #7E939B; /* Ränder von Eingabefeldern (3.2:1, WCAG-Pflicht ≥3:1) */
/* ---- Farbe: Status ------------------------------------------------------ */
--farbe-erfolg: #12873D; /* AA-justiert von #16A34A */
--farbe-warnung: #B45309; /* Warntext (das dekorative Amber #F59E0B trägt keinen Text) */
--farbe-fehler: #D61944; /* AA-justiert von #E11D48 */
/* ---- Typografie -------------------------------------------------------- */
/* Self-hosted (siehe oben). Fallback-Stacks sind Pflicht. */
--schrift-display: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
--schrift-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--schrift-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
/* Typo-Skala (fluid; Referenzwerte aus Dennis' Vorgabe) */
--text-xs: 0.8125rem; /* 13px – Badges, Kennungen, Fußnoten */
--text-s: 0.9375rem; /* 15px – Buttons, Labels, Meta, Nav */
--text-m: 1rem; /* 16px – Fließtext (Minimum!) */
--text-l: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); /* 17–19px – Lead-Absätze */
--text-xl: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem); /* 19–22px – H3/Kartentitel */
--text-2xl: clamp(1.75rem, 1.4rem + 1.7vw, 2.375rem); /* 28–38px – H2/Abschnitte */
--text-3xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem); /* 40–68px – H1/Hero */
/* Schriftschnitte & Laufweiten */
--gewicht-text: 400;
--gewicht-mittel: 600; /* Buttons, Labels, Nav */
--gewicht-display: 700; /* Headlines & Wortmarke */
--laufweite-display: -0.03em; /* Headlines eng gesetzt */
--laufweite-versal: 0.14em; /* Kennungen/Eyebrows in Versalien */
/* Zeilenhöhen */
--zeile-eng: 1.05; /* Überschriften */
--zeile-text: 1.6; /* Fließtext */
/* ---- Raum (4-px-Raster — KEINE freien Pixelwerte in Seiten-CSS) -------- */
--raum-1: 0.25rem; /* 4px */
--raum-2: 0.5rem; /* 8px */
--raum-3: 0.75rem; /* 12px */
--raum-4: 1rem; /* 16px */
--raum-5: 1.5rem; /* 24px */
--raum-6: 2rem; /* 32px */
--raum-7: 3rem; /* 48px */
--raum-8: 4rem; /* 64px */
--raum-9: 6rem; /* 96px – Rhythmus zwischen Seiten-Abschnitten */
/* ---- Layout ------------------------------------------------------------ */
--breite-inhalt: 75rem; /* max. Inhaltsbreite (1200px) */
--breite-text: 42rem; /* max. Breite für Fließtext-Spalten */
/* ---- Radien (12px ist der Arbeitsradius; Pillen NUR für Badges) --------- */
--radius-s: 8px; /* Logo-Kachel, kleine Buttons */
--radius-m: 12px; /* Buttons, Eingabefelder, kleine Karten */
--radius-l: 18px; /* Karten, Panels */
--radius-xl: 26px; /* Bildflächen */
--radius-2xl: 34px; /* Hero-/CTA-Panels */
--radius-voll: 999px; /* Badges, Punkte */
/* ---- Erhebung (weiche, gestaffelte Schatten — sparsam einsetzen) ------- */
--schatten-s: 0 1px 2px rgba(12, 36, 39, 0.06), 0 1px 3px rgba(12, 36, 39, 0.08);
--schatten-m: 0 6px 16px -4px rgba(12, 36, 39, 0.10), 0 2px 6px -2px rgba(12, 36, 39, 0.06);
--schatten-l: 0 22px 48px -14px rgba(12, 36, 39, 0.20), 0 8px 16px -8px rgba(12, 36, 39, 0.10);
--schatten-xl: 0 44px 90px -28px rgba(12, 36, 39, 0.32);
--schatten-cta: 0 10px 26px -8px rgba(15, 181, 170, 0.6); /* Glow unter Primär-CTAs auf dunklem Grund */
/* ---- Bewegung (ruhig, funktional) -------------------------------------- */
--dauer-kurz: 140ms;
--dauer-mittel: 240ms;
--kurve-standard: cubic-bezier(0.2, 0, 0, 1);
/* ---- Fokus (Tastatur) --------------------------------------------------- */
--fokus-ring: 0 0 0 2px var(--farbe-grund), 0 0 0 4px var(--farbe-akzent);
}
/* --------------------------------------------------------------------------
2) DUNKLES THEMA
Aktiv über Systemeinstellung (prefers-color-scheme) ODER erzwungen per
. Beide Wege setzen identische Werte — die Werte
unten müssen deshalb an BEIDEN Stellen gleich gepflegt werden.
Die dunklen Sektions-Tokens (--farbe-dunkel-*) bleiben unverändert.
Alle Paare erneut AA-geprüft.
-------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--farbe-grund: #0C2427;
--farbe-flaeche: #123136;
--farbe-flaeche-sanft: #0F2B2F;
--farbe-flaeche-tief: #16383E;
--farbe-akzent-wash: #123F3D;
--farbe-wash-rand: #1C5450;
--farbe-tinte: #F0F6F6;
--farbe-tinte-sanft: #9FB4B9;
--farbe-invers: #0C2427; /* dunkle Tinte auf hellem Akzent-Button */
--farbe-akzent: #22C9BC;
--farbe-akzent-stark: #5FE0D4;
--farbe-linie: #1E3E44;
--farbe-rand-feld: #6E848B;
--farbe-erfolg: #55D889;
--farbe-warnung: #F0B45C;
--farbe-fehler: #F286A0;
--schatten-s: 0 1px 2px rgba(0, 0, 0, 0.35);
--schatten-m: 0 6px 16px -4px rgba(0, 0, 0, 0.45);
--schatten-l: 0 22px 48px -14px rgba(0, 0, 0, 0.55);
--schatten-xl: 0 44px 90px -28px rgba(0, 0, 0, 0.65);
--fokus-ring: 0 0 0 2px var(--farbe-grund), 0 0 0 4px var(--farbe-akzent);
}
}
/* Erzwungenes Dunkel-Thema per Attribut (gewinnt über Systemeinstellung) */
:root[data-theme="dark"] {
--farbe-grund: #0C2427;
--farbe-flaeche: #123136;
--farbe-flaeche-sanft: #0F2B2F;
--farbe-flaeche-tief: #16383E;
--farbe-akzent-wash: #123F3D;
--farbe-wash-rand: #1C5450;
--farbe-tinte: #F0F6F6;
--farbe-tinte-sanft: #9FB4B9;
--farbe-invers: #0C2427;
--farbe-akzent: #22C9BC;
--farbe-akzent-stark: #5FE0D4;
--farbe-linie: #1E3E44;
--farbe-rand-feld: #6E848B;
--farbe-erfolg: #55D889;
--farbe-warnung: #F0B45C;
--farbe-fehler: #F286A0;
--schatten-s: 0 1px 2px rgba(0, 0, 0, 0.35);
--schatten-m: 0 6px 16px -4px rgba(0, 0, 0, 0.45);
--schatten-l: 0 22px 48px -14px rgba(0, 0, 0, 0.55);
--schatten-xl: 0 44px 90px -28px rgba(0, 0, 0, 0.65);
--fokus-ring: 0 0 0 2px var(--farbe-grund), 0 0 0 4px var(--farbe-akzent);
}
/* ==========================================================================
KONTRAST-NACHWEIS (WCAG 2.1 AA, programmatisch geprüft am 2026-07-14)
Hell: Tinte/Grund 16.4 · Tinte-sanft/Grund 4.8 · Akzent/Grund 4.8
Invers/Akzent 4.8 · Akzent-stark/Wash 5.5 · Rand-Feld/Grund 3.2 (UI ≥3) ✓
Erfolg 4.6 · Warnung 5.0 · Fehler 5.1 (je /Grund) ✓
Dunkel: Tinte/Grund 14.8 · Tinte-sanft/Flaeche 6.4 · Akzent/Flaeche 6.7
Invers/Akzent 7.8 · Rand-Feld/Flaeche 3.5 (UI ≥3) ✓
Dunkle Sektionen: Weiß/Dunkel 16.2 · Text-sanft/Dunkel 10.3 · Fußtext 9.0
Dunkel-Akzent/Dunkel 10.1 · Dunkel-Akzent-hell/Dunkel 12.2 ✓
AA-Justierungen ggü. Dennis' Rohwerten (minimal nachgedunkelt):
Akzent #0C9089→#0D8079 · Tinte-sanft #697A80→#65757B ·
Erfolg #16A34A→#12873D · Fehler #E11D48→#D61944 · CTA-Verlaufsstart
#0C9089→#0E726D. Die Marken-Basis #0FB5AA bleibt exakt erhalten,
ist aber ausschließlich dekorativ (Logo, Punkte, Glows).
--farbe-linie ist NUR dekorativ — nie für Text oder als einziger Rand
eines Bedienelements (dafür gibt es --farbe-rand-feld).
========================================================================== */