/* ========================================================================== tokens.css – Design-Tokens KI-Wirkfaktor Einzige Quelle für Farben, Typografie, Abstände, Radien. Keine Hex-Werte außerhalb dieser Datei verwenden! ========================================================================== */ :root { /* Markenfarben (laut Briefing V0.2) */ --color-teal: #21bcb0; --color-orange: #e8632b; --color-gold: #d4a01a; --color-green: #0f7a73; /* Abgeleitete Flächen- und Textfarben */ --color-text: #1c1c1c; --color-text-invert: #ffffff; --color-text-muted: #555555; --color-bg: #ffffff; --color-bg-soft: #f4f4f2; --color-bg-card: #ececea; --color-border: #dcdcda; /* Statusfarben für Fokus/Interaktion */ --color-focus: var(--color-orange); /* Typografie: System-Font-Stack (kein externer Font, DSGVO-konform) */ --font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fluide Schriftgrößen */ --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-md: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); --fs-lg: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); --fs-xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.625rem); --fs-hero: clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem); --lh-tight: 1.2; --lh-base: 1.6; /* Abstände */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-section: clamp(3rem, 2rem + 5vw, 6rem); /* Layout */ --content-max: 72rem; --content-narrow: 46rem; /* Radien & Schatten */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-diamond: 18%; --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-lift: 0 14px 32px rgba(15, 122, 115, 0.18); /* Bewegung & Flächenverläufe (V2) */ --transition-fast: 0.18s ease; --transition-move: 0.4s cubic-bezier(0.2, 0.7, 0.3, 1); --gradient-hero: linear-gradient(160deg, #ffffff 0%, #e7f7f5 45%, #fdf1e9 100%); } /* ========================================================================== Kontrastreiches Thema (BFSG/BITV: umschaltbar + folgt OS-Einstellung) Aktivierung: (JS-Schalter) oder Systemeinstellung "erhöhter Kontrast" (Media Query unten, ohne JS). ========================================================================== */ .theme-contrast { --color-text: #000000; --color-text-invert: #ffffff; --color-text-muted: #000000; --color-bg: #ffffff; --color-bg-soft: #ffffff; --color-bg-card: #ffffff; --color-border: #000000; /* Markenfarben abgedunkelt: mind. 4,5:1 auf Weiß */ --color-teal: #0c6b64; --color-orange: #b3450f; --color-gold: #77590a; --color-green: #0a5b55; --color-focus: #000000; --shadow-card: none; --shadow-lift: none; --gradient-hero: none; /* Etwas größere Grundschrift für bessere Lesbarkeit */ font-size: 137.5%; } /* Ohne JS: Systemeinstellung übernehmen (identische Werte wie .theme-contrast). .theme-default = Nutzer hat den hohen Kontrast bewusst abgeschaltet. */ @media (prefers-contrast: more) { :root:not(.theme-default) { --color-text: #000000; --color-text-invert: #ffffff; --color-text-muted: #000000; --color-bg: #ffffff; --color-bg-soft: #ffffff; --color-bg-card: #ffffff; --color-border: #000000; --color-teal: #0c6b64; --color-orange: #b3450f; --color-gold: #77590a; --color-green: #0a5b55; --color-focus: #000000; --shadow-card: none; --shadow-lift: none; --gradient-hero: none; font-size: 137.5%; } }