/* ========================================================================== tokens.css — die einzige Quelle für Farben, Schriftgrößen und Abstände. Aufbau in drei Schichten: primitiv → semantisch → Komponente. Nichts in den anderen Dateien setzt Farben oder Größen direkt. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Primitive — die rohen Werte. Werden ausserhalb dieser Datei nie direkt benutzt, sondern immer über die semantische Schicht darunter. -------------------------------------------------------------------------- */ :root { /* Markenfarben */ --c-lime: #6fdc3f; --c-mint: #12cb86; --c-deep: #0b7a50; /* abgedunkeltes Mint — 4,8:1 auf hellem Grund */ --c-mint-bright: #4fe3ab; /* aufgehelltes Mint für dunklen Grund */ /* Neutrale Töne, alle mit leichtem Grünstich damit sie zur Palette gehören */ --c-white: #ffffff; --c-grey-50: #f7f9f8; --c-grey-100: #eef2f0; --c-grey-200: #e2e8e4; --c-grey-500: #4a5751; --c-grey-400: #9daca5; /* nur auf der dunklen Bühne */ --c-ink-900: #0f1714; --c-ink-700: #26332c; /* nur auf der dunklen Bühne */ --c-ink-050: #eaf1ed; /* nur auf der dunklen Bühne */ /* Signalfarben ausserhalb der Marke */ --c-error: #b3261e; } /* -------------------------------------------------------------------------- 2 · Semantik — was die Farbe bedeutet, nicht wie sie aussieht. Der helle Auftritt ist der Standard. -------------------------------------------------------------------------- */ :root { /* Die Seite tritt bewusst nur hell auf. Ohne diese Angabe färbt der Browser native Bedienelemente — Auswahlfelder, Bildlaufleisten, Kalender — nach dem Systemdesign ein und sie stünden dunkel in einer hellen Seite. Firefox leitet das übrigens aus dem BROWSER-Design ab, nicht aus dem des Betriebssystems: mit dunklem Firefox-Theme sah die ganze Seite dunkel aus, obwohl das System hell war. */ color-scheme: light; --page: var(--c-grey-50); /* Seitengrund: das helle Grau */ --surface: var(--c-white); /* Karten und Blöcke: reines Weiß */ --surface-sunken: var(--c-grey-100); --border: var(--c-grey-200); --ink: var(--c-ink-900); --ink-soft: var(--c-grey-500); --accent: var(--c-lime); /* Flächen- und Signalfarbe */ --accent-2: var(--c-mint); --link: var(--c-deep); /* einziger Grün-Ton, der Text tragen darf */ --on-accent: var(--c-ink-900); /* Text auf Lime-Fläche */ --danger: var(--c-error); /* Die dunkle Bühne. Ein Gestaltungselement der hellen Seite, keine Umschaltung: ein einzelnes abgesetztes Band, auf dem Lime als Schrift lesbar ist (rund 10:1) — auf hellem Grund wären es 1,7:1. */ --stage: var(--c-ink-900); --stage-ink: var(--c-ink-050); --stage-ink-soft: var(--c-grey-400); --stage-border: var(--c-ink-700); --stage-accent: var(--c-lime); /* darf hier Text tragen, ≈10:1 */ --stage-link: var(--c-mint-bright); } /* Kein dunkler Auftritt. Entschieden am 2026-08-04: Für eine Firmenseite soll Jens bestimmen, welchen Eindruck ein Interessent bekommt — nicht dessen Browser-Design. Die dunkle Bühne bleibt davon unberührt; sie ist ein Gestaltungselement der hellen Seite, keine Umschaltung. */ /* -------------------------------------------------------------------------- 3 · Schrift -------------------------------------------------------------------------- */ :root { --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", monospace; /* Fließende Größenstufen. clamp() skaliert stufenlos zwischen 360 px und 1440 px Fensterbreite — keine Sprünge an Breakpoints. */ --text-xs: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem); --text-sm: clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem); --text-md: clamp(1rem, 0.96rem + 0.20vw, 1.12rem); --text-lg: clamp(1.15rem, 1.07rem + 0.38vw, 1.38rem); --text-xl: clamp(1.38rem, 1.22rem + 0.75vw, 1.85rem); --text-2xl: clamp(1.65rem, 1.36rem + 1.35vw, 2.5rem); --text-3xl: clamp(2rem, 1.5rem + 2.3vw, 3.4rem); --text-4xl: clamp(2.4rem, 1.6rem + 3.7vw, 4.5rem); --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.65; --tracking-tight: -0.02em; --tracking-wide: 0.06em; /* Zeilenlänge — Lesbarkeit hängt stärker daran als an der Schriftgröße. */ --measure: 62ch; --measure-narrow: 46ch; /* Feste Mindestbreite für Schaltflächen, deren Beschriftung sich zur Laufzeit ändert (z. B. der Absende-Knopf im Automatisierungs-Check je nach Vorbereitungsgrad) — ch statt rem, damit die Breite mit der jeweiligen clamp()-Schriftgröße der Schaltfläche mitskaliert und bei jeder Fensterbreite dieselbe Zeichenzahl abdeckt. 30ch fasst den längsten der vier Buttontexte („Sehr gut vorbereitet — anfragen", 31 Zeichen). */ --btn-fixed-min: 30ch; } /* -------------------------------------------------------------------------- 4 · Raum, Radien, Tiefe, Bewegung -------------------------------------------------------------------------- */ :root { --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem); --space-2xs: clamp(0.5rem, 0.47rem + 0.13vw, 0.6rem); --space-xs: clamp(0.75rem, 0.71rem + 0.19vw, 0.9rem); --space-sm: clamp(1rem, 0.94rem + 0.25vw, 1.2rem); --space-md: clamp(1.5rem, 1.41rem + 0.38vw, 1.8rem); --space-lg: clamp(2rem, 1.81rem + 0.81vw, 2.7rem); --space-xl: clamp(3rem, 2.62rem + 1.62vw, 4.4rem); --space-2xl: clamp(4rem, 3.25rem + 3.25vw, 6.8rem); --space-3xl: clamp(5.5rem, 4.19rem + 5.62vw, 10rem); --wrap: 72rem; /* Standardbreite des Inhaltsbereichs */ --wrap-narrow: 46rem; /* für reine Textseiten */ --gutter: clamp(1.15rem, 0.8rem + 1.6vw, 2.5rem); --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-pill: 999px; /* Zurückhaltend — die Tiefe entsteht über den Kontrast zwischen dem grauen Grund und den weißen Karten, nicht über Schlagschatten. */ --shadow-sm: 0 1px 2px rgb(15 23 20 / 0.05); --shadow-md: 0 2px 8px rgb(15 23 20 / 0.07); --shadow-lift: 0 8px 24px rgb(15 23 20 / 0.10); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur: 240ms; --dur-slow: 520ms; --focus-ring: 3px; }