/* ========================================================================== Design-Tokens — die einzige Quelle für Farben, Typografie und Abstände. Wer hier etwas ändert, ändert es auf der ganzen Seite. Direkte Farbwerte oder px-Angaben gehören in styles.css nur dort hin, wo sie einmalig sind. ========================================================================== */ :root { /* --- Markenfarben ------------------------------------------------------ Die drei Werte aus dem Corporate Design. Achtung beim Einsatz: Gelb hat auf Weiß nur 1.52:1 und Hellblau 3.01:1 — beide sind damit für Text unbrauchbar und tragen erst recht keine weiße Schrift. Sie sind Flächen- und Akzentfarben. Für Text und Bedienelemente steht darunter die abgedunkelte Reihe. */ --marke-gelb: #fecc00; --marke-hellblau: #009ee0; --marke-blau: #006ab3; /* Barrierefreie Abstufungen derselben Familie (Kontrast auf Weiß) */ --blau-50: #eff6ff; /* helle Fläche für Hinweise, kein Text darauf */ --blau-600: #005a96; /* 7.23:1 — Fließtext, Buttons, Links */ --blau-700: #004b7a; /* 9.18:1 — Hover */ --blau-800: #003f66; /* 11.04:1 — dunkle Flächen, Fußzeile */ /* --- Neutrale ----------------------------------------------------------- Kein reines Grau, sondern durchgehend leicht zum Markenblau gezogen. Ein neutrales Schiefergrau steht neben #006AB3 immer etwas fremd da; die gemeinsame Blaurichtung lässt Flächen, Text und Akzent wie eine Familie wirken, ohne dass es jemandem bewusst auffällt. Kontraste in Klammern jeweils gegen Weiss. */ --grau-0: #ffffff; --grau-50: #f4f7fb; --grau-100: #e9f0f7; --grau-200: #dbe4ee; --grau-300: #bfcede; --grau-500: #5c7186; /* 5.05:1 — leiser Text */ --grau-700: #2e4257; /* 10.33:1 — Fließtext */ --grau-900: #0d1b2a; /* 17.39:1 — Standard-Textfarbe */ /* --- Semantische Rollen ------------------------------------------------ */ --farbe-text: var(--grau-900); --farbe-text-leise: var(--grau-500); --farbe-text-invers: var(--grau-0); --farbe-grund: var(--grau-0); --farbe-flaeche: var(--grau-50); --farbe-flaeche-tief: var(--blau-800); --farbe-rand: var(--grau-200); /* EIN Blau für alles Aktive: Links, Auszeichnungen, Schaltflächen und Fußzeile teilen sich #003F66. Vorher trugen Schaltflächen das dunkle und alles Übrige ein helleres Blau -- nebeneinander sah das nach zwei Blautönen aus, die nicht ganz zueinander passen. Kontrast auf Weiß: 11.04:1. Beim Überfahren wird es heller statt dunkler, das ist die deutlichere Rückmeldung. */ --farbe-akzent: var(--blau-800); --farbe-akzent-hover: var(--blau-600); --farbe-knopf: var(--blau-800); --farbe-knopf-hover: #002d4a; --farbe-glanz: var(--marke-gelb); /* --- Typografie -------------------------------------------------------- Fluid: skaliert zwischen 360px und 1600px Viewport-Breite mit, darüber hält clamp() den Maximalwert. Die Zwischenwerte sind so gewählt, dass die Skala auf dem Handy nicht zusammenfällt und auf 27-Zoll-Schirmen nicht ins Plakative kippt. */ /* Die „Ersatz"-Einträge sind Arial mit angepassten Metriken (fonts.css): Sie halten die Zeilen an Ort und Stelle, bis die Inter geladen ist. */ --schrift-display: 'Inter Tight', 'Inter Tight Ersatz', 'Inter', system-ui, -apple-system, sans-serif; --schrift-text: 'Inter', 'Inter Ersatz', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Gewichte: eine Grotesk braucht für dieselbe Präsenz mehr Fett als eine Serif. Überschriften stehen auf 600, die Heldenzeile auf 700. */ --gewicht-kopf: 600; --gewicht-held: 700; --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.9375rem; /* 15px */ --text-md: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16→17 */ --text-lg: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem); /* 18→20 */ --text-xl: clamp(1.375rem, 1.28rem + 0.42vw, 1.625rem); /* 22→26 */ --text-2xl: clamp(1.75rem, 1.58rem + 0.75vw, 2.25rem); /* 28→36 */ --text-3xl: clamp(2.125rem, 1.83rem + 1.31vw, 3rem); /* 34→48 */ --text-4xl: clamp(2.5rem, 1.98rem + 2.32vw, 4rem); /* 40→64 */ --text-5xl: clamp(3rem, 2.11rem + 3.95vw, 5.625rem); /* 48→90 */ --zeilenhoehe-eng: 1.05; --zeilenhoehe-kopf: 1.15; --zeilenhoehe: 1.65; /* Grotesken laufen bei grossen Graden schnell zu weit; ein negatives Sperren holt die Buchstaben wieder zusammen. */ --laufweite-kopf: -0.022em; --laufweite-held: -0.035em; --laufweite-weit: 0.08em; /* --- Abstände (4px-Raster) --------------------------------------------- */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 0.75rem; --raum-4: 1rem; --raum-5: 1.5rem; --raum-6: 2rem; --raum-7: 2.5rem; --raum-8: 3rem; --raum-10: 4rem; --raum-12: 5rem; --raum-16: 6rem; --raum-20: 8rem; /* Vertikaler Rhythmus der Sektionen. Vorher bis 8.5rem oben und unten -- zwischen zwei Abschnitten ergab das über 270px Leerraum, was die Seite auseinanderzog und zu viel Scrollen erzwang. */ /* Abstand zwischen zwei Abschnitten -- doppelt so viel, wie hier steht, denn beide Seiten bringen ihn ein. 4.5rem ergaben 144px und standen überall dort zu breit, wo eine Rubrik auf einen einzelnen Verweis traf: Zwischen zwei dünnen Zeilen liest sich derselbe Abstand wie ein Loch. 3.5rem ergeben 112px und tragen auch die dichten Stellen. */ --sektion-y: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* --- Maße -------------------------------------------------------------- */ --breite-text: 68ch; /* Lesebreite für Fließtext */ --breite-inhalt: 1200px; /* Standardspalte */ --breite-weit: 1560px; /* breite Raster, Bildstrecken */ --rand-x: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem); /* --- Formen ------------------------------------------------------------ */ --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-rund: 999px; --schatten-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08); --schatten: 0 4px 6px -1px rgb(15 23 42 / 0.07), 0 2px 4px -2px rgb(15 23 42 / 0.06); --schatten-lg: 0 12px 20px -8px rgb(15 23 42 / 0.12), 0 4px 8px -4px rgb(15 23 42 / 0.06); --schatten-xl: 0 24px 48px -12px rgb(15 23 42 / 0.18); /* --- Bewegung ---------------------------------------------------------- Ein einziges Easing für alles: schnell heraus, sanft aus. Das hält die Seite ruhig. Jede Verwendung muss prefers-reduced-motion respektieren. */ --dauer-schnell: 150ms; --dauer: 300ms; --dauer-langsam: 700ms; --easing: cubic-bezier(0.16, 1, 0.3, 1); --easing-weich: cubic-bezier(0.4, 0, 0.2, 1); /* Schiesst am Ziel um rund 12 % vorbei und federt zurück. Bewusst zurückhaltend gewählt: Ein starker Ausschlag wirkt verspielt, ein schwacher lässt die Bewegung lebendig statt mechanisch enden. */ --easing-hupf: cubic-bezier(0.34, 1.45, 0.64, 1); } /* Auf sehr großen Schirmen den Grundwert leicht anheben, damit die Seite nicht verloren wirkt. Erst ab 1920px, darunter trägt clamp() allein. */ /* Auf grossen Schirmen wächst die Spalte mit, aber nur bis zu dem Punkt, an dem eine Textzeile noch bequem zu lesen ist. Ab da bleibt lieber Rand stehen, statt die Zeilen ins Endlose zu ziehen. */ @media (min-width: 1920px) { :root { --breite-inhalt: 1320px; --breite-weit: 1600px; } } @media (min-width: 2400px) { :root { --breite-inhalt: 1400px; --breite-weit: 1700px; } }