/* ========================================================================== tokens.css – Design-Tokens (Single Source of Truth) Farben, Schrift, Abstände, Radien, Schatten. Hier zentral anpassbar. ========================================================================== */ /* --- Selbst gehostete Schriften (DSGVO-konform, keine externen Aufrufe) --- */ @font-face { font-family: "Oswald"; font-style: normal; font-weight: 400 700; /* Variable Font: deckt 400–700 ab */ font-display: swap; src: url("../assets/fonts/oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/oswald-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 700; /* Variable Font: Light–Bold */ font-display: swap; src: url("../assets/fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Farben --------------------------------------------------------- */ --color-bg: #0a0e13; /* Seitenhintergrund (fast schwarz, blaustichig) */ --color-bg-alt: #0d121a; /* leicht abgesetzter Abschnitt */ --color-panel: #131a25; /* Karten / Panels */ --color-panel-2: #1a2433; /* erhöhte Karten / Hover */ --color-border: #243042; /* feine Linien / Rahmen */ --color-text: #e8eaed; /* Standardtext */ --color-text-muted: #9aa3ad; /* gedämpfter Text */ --color-text-dim: #6b7480; /* sehr zurückhaltend (Meta) */ --color-heading: #f4f6f8; /* Überschriften */ --color-accent: #d62b2b; /* Akzent-Rot */ --color-accent-hover: #e84444; /* Rot Hover */ --color-accent-dim: #7e1d1d; /* dunkles Rot */ --color-on-accent: #ffffff; /* Text auf Rot */ /* --- Schrift -------------------------------------------------------- */ /* ==================================================================== SCHRIFT-UMSCHALTUNG Aktiv: ROBOTO. Zum Zurückstellen auf das ursprüngliche Oswald/Inter einfach den ROBOTO-Block auskommentieren und den OSWALD-Block aktivieren. ==================================================================== */ /* -- Variante ROBOTO (aktiv) -- */ --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --fw-body: 300; /* Fließtext: Light (Versuch) – auf 400 für Regular */ --fw-nav: 300; /* Menü: Light */ --fw-medium: 500; /* Labels, Buttons: Medium */ --fw-heading: 300; /* Standard-Überschriften: Light */ --fw-heading-strong: 300; /* Starke Headlines (Hero): Light */ /* -- Variante OSWALD / INTER (Original – zum Zurückstellen aktivieren) -- --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fw-body: 400; --fw-nav: 500; --fw-medium: 500; --fw-heading: 700; --fw-heading-strong: 700; */ /* fluide Schriftgrößen: clamp(min, vw, max) */ --fs-300: 0.8125rem; /* 13px – Label/Meta */ --fs-400: 1rem; /* 16px – Body */ --fs-500: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem); --fs-600: clamp(1.25rem, 1vw + 1rem, 1.625rem); /* Sub-Headline */ --fs-700: clamp(1.6rem, 2.2vw + 1rem, 2.5rem); /* Section-Titel */ --fs-800: clamp(2.2rem, 4.5vw + 1rem, 4rem); /* Hero-Headline */ --fs-900: clamp(2.6rem, 6vw + 1rem, 5.25rem); /* XXL Hero */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-base: 1.65; /* --- Abstände (4-er Skala) ----------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem; /* Vertikaler Abstand zwischen Sektionen (fluide) */ --section-y: clamp(3rem, 7vw, 4.5rem); /* --- Layout -------------------------------------------------------- */ --container: 1200px; --container-narrow: 820px; --gutter: clamp(1rem, 4vw, 2.5rem); /* --- Radien & Schatten --------------------------------------------- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow: 0 12px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.6); --shadow-cover: 0 18px 45px rgba(0, 0, 0, 0.65); /* --- Sonstiges ----------------------------------------------------- */ --header-h: 72px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --transition: 200ms var(--ease); --focus-ring: 0 0 0 3px rgba(214, 43, 43, 0.55); }