/* ========================================================================== apollo consulting — Design-Tokens (eine Datei, keine @import-Kette) ZWEI QUELLEN, klare Rangordnung: 1. CI (Wahrheit fuer Farbwerte): material/ci-visuell_apollo-consulting.md ← 2201_AC_CD-Manual.pdf 2. Design-Vorlage (Wahrheit fuer die ANWENDUNG der Farben, Typo-Skala, Spacing, Radien, Schatten, Motion): material/design-vorlage/design_handoff_hero/reference/tokens/*.css Abgleich am 09.08.2026: Die 6 CI-Farbwerte sind in beiden Quellen ZEICHENGLEICH — kein Konflikt. Die Vorlage ergaenzt nur dort, wo die CI schweigt (Tints, Neutrale, dunkle Flaechen, Skalen). Uebernommen wird deshalb das Token-Schema der Vorlage; die CI-Werte stehen zusaetzlich als --ci-* Herkunftsebene, damit jederzeit nachweisbar ist, was Original ist. Aufbau: --ci-* Original-CI-Werte. UNANTASTBAR. --ac-* Design-System-Rampe (CI-Werte + abgeleitete Stufen) semantisch --text-*, --surface-*, --border-* — DIESE benutzen, nicht die Rampe Layout --section-* / --measure — aus dem SEOGEO-Layout-Standard portiert KONTRAST-BELEGE (gerechnet, WCAG 2.1 — nicht geschaetzt): #333333 Headline auf Weiss ......... 12,63:1 ✓ #706f6f Fliesstext auf Weiss ........ 5,01:1 ✓ #706f6f Fliesstext auf #f8f8f7 ...... 4,71:1 ✓ #00699d Link auf Weiss .............. 5,99:1 ✓ #3e5698 Link-Hover auf Weiss ........ 7,02:1 ✓ #8f8e8e Muted auf Weiss ............. 3,27:1 ✗ nur grosse Schrift #686868 Muted-AA auf Weiss .......... 5,57:1 ✓ #686868 Muted-AA auf #dceef0 ........ 4,65:1 ✓ schlechteste helle Flaeche #686868 Muted-AA auf #14161a ........ 3,31:1 ✗ dunkel: --text-on-dark-muted #706f6f Fliesstext auf #dceef0 ...... 4,18:1 ✗ dort --text-primary-tint #696868 Fliesstext-Tint auf #dceef0 . 4,64:1 ✓ #1a919a Teal auf Weiss .............. 3,78:1 ✗ nur grosse Schrift/Icons Weiss auf #14161a ................... 18,11:1 ✓ dunkle Sektionen Weiss auf #23262b ................... 15,18:1 ✓ Panel auf Dunkel Weiss auf #00699d ................... 5,99:1 ✓ primaerer Button Weiss auf #3e5698 ................... 7,02:1 ✓ Button-Alternative Weiss auf #74b959 ................... 2,38:1 ✗ NIE weisser Text auf Gruen #14161a auf #74b959 ................. 7,61:1 ✓ so wird Gruen zum Button #14161a auf #dedc00 ................. 12,37:1 ✓ #dedc00 auf #14161a ................. 12,37:1 ✓ Kicker im dunklen Hero ========================================================================== */ :root { /* ── 1 · CI-Originalwerte (CD-Manual 2022) — UNANTASTBAR ───────────────── */ --ci-grau: #706f6f; /* Schrift-Grau, 70 % Schwarz */ --ci-blau: #3e5698; /* Figur Dunkelblau */ --ci-tuerkis-dunkel: #00699d; /* Figur Tuerkis dunkel */ --ci-tuerkis-hell: #1a919a; /* Figur Tuerkis hell */ --ci-gruen: #74b959; /* Figur Gruen mittel */ --ci-gelbgruen: #dedc00; /* Figur Gruen hell */ /* ── 2 · Marken-Rampe (Blau → Gruen, Reihenfolge ist die CI-Aussage) ───── */ --ac-cobalt: var(--ci-blau); --ac-petrol: var(--ci-tuerkis-dunkel); --ac-teal: var(--ci-tuerkis-hell); --ac-green: var(--ci-gruen); --ac-lime: var(--ci-gelbgruen); /* Tints/Shades — ABGELEITET (Design-Vorlage), keine CI-Werte */ --ac-cobalt-700: #2f4276; --ac-cobalt-300: #8a99c4; --ac-cobalt-100: #e2e6f1; --ac-petrol-700: #004f77; --ac-teal-100: #dceef0; --ac-green-700: #4f8a39; --ac-green-100: #e6f3de; --ac-lime-700: #a9a800; --ac-lime-100: #f7f6cc; /* ── 3 · Neutrale — verankert am CI-Grau, Rest ABGELEITET ─────────────── */ --ac-ink: #333333; --ac-gray: var(--ci-grau); --ac-gray-500: #8f8e8e; --ac-gray-400: #b3b2b2; --ac-gray-300: #d4d3d3; --ac-gray-200: #e6e5e5; --ac-gray-100: #f2f1f1; --ac-gray-50: #f8f8f7; --ac-white: #ffffff; --ac-black: #14161a; /* Signatur-Dunkel der Website (Design-Vorlage) */ --ac-black-800: #23262b; /* angehobene Flaechen auf Dunkel */ /* ── 4 · Signatur-Verlauf — NUR Akzent, NIE vollflaechig ──────────────── */ /* Erlaubt: 4-px-Hairline, Icon-Fuellung, Button-Kreis, Unterstreichung. Verboten: Sektions-Hintergrund. (Design-Vorlage, „Der Gradient ist Akzent") */ --ac-gradient: linear-gradient(90deg, var(--ac-cobalt) 0%, var(--ac-petrol) 28%, var(--ac-teal) 50%, var(--ac-green) 75%, var(--ac-lime) 100%); --ac-gradient-diag: linear-gradient(120deg, var(--ac-cobalt) 0%, var(--ac-teal) 45%, var(--ac-green) 72%, var(--ac-lime) 100%); /* ── 5 · Semantische Rollen — IM CODE NUR DIESE BENUTZEN ──────────────── */ --color-brand: var(--ac-petrol); --color-brand-strong: var(--ac-cobalt); --color-accent: var(--ac-green); --color-accent-hi: var(--ac-lime); --text-primary: var(--ac-gray); /* 5,01:1 */ --text-heading: var(--ac-ink); /* 12,63:1 */ --text-muted: var(--ac-gray-500); /* 3,27:1 — NUR ab 24 px bzw. 18,7 px fett */ /* ABGELEITET. Der Name verspricht AA — bis 22.08.2026 hielt der Wert (#767676) das aber NUR auf reinem Weiss. Auf jeder getoenten Flaeche fiel er darunter und riss damit auf drei Seiten 14 Stellen unter das Soll: auf --surface-subtle #f8f8f7 .... 4,27:1 ✗ auf --surface-tint #dceef0 .... 3,79:1 ✗ Ein Token, dessen Name eine Kontraststufe behauptet, muss sie ueberall halten, wo er benutzt werden darf — sonst ist der Name eine Falle. #686868 haelt AA auf ALLEN hellen Flaechen der Site (gemessen, nicht geschaetzt): Weiss #ffffff .... 5,57:1 ✓ subtle #eceae7 .... 4,64:1 ✓ (bis 22.08.2026 #f8f8f7: 5,24:1) gray100 #f2f1f1 .... 4,94:1 ✓ tint #dceef0 .... 4,65:1 ✓ AUF DUNKLEM GRUND GILT ER NICHT und wird dort nicht dunkler, sondern falsch (auf #14161a nur 3,31:1). Dafuer gibt es --text-on-dark-muted; style.css kippt die Rolle in dunklen Bausteinen automatisch um. */ --text-muted-aa: #686868; /* Das CI-Grau traegt auf getoenter Flaeche nur 4,18:1 (auf Weiss 5,01:1). Der CI-Wert selbst bleibt unangetastet — auf --surface-tint uebernimmt diese eine Stufe dunklere Ableitung: 4,64:1 auf #dceef0, 5,55:1 auf Weiss. */ --text-primary-tint: #696868; --text-inverse: var(--ac-white); --text-on-brand: var(--ac-white); --text-link: var(--ac-petrol); /* 5,99:1 */ --text-link-hover: var(--ac-cobalt); /* 7,02:1 */ --surface-page: var(--ac-white); /* Getoente Flaeche. Bis 22.08.2026 --ac-gray-50 (#f8f8f7) — bei 98 % Helligkeit war der Ton neben Weiss nicht zu unterscheiden, die Seiten wirkten dadurch fast durchgehend weiss (Befund Adrian). #eceae7 hat 92 % und traegt als eigener Ton. Gemessene Kontraste darauf: --text-heading #333333 .... 10,52:1 ✓ --text-muted-aa #686868 .... 4,64:1 ✓ --text-primary-tint #696868 .... 4,63:1 ✓ --text-link #00699d .... 4,99:1 ✓ --text-primary #706f6f .... 4,17:1 ✗ <- CI-Grau traegt hier NICHT style.css kippt --text-primary auf getoenten Flaechen deshalb automatisch auf --text-primary-tint, wie es das bei --text-muted-aa auf dunklem Grund schon tut. */ --surface-subtle: #eceae7; --surface-card: var(--ac-white); --surface-dark: var(--ac-black); --surface-dark-raised: var(--ac-black-800); --surface-brand: var(--ac-cobalt); --surface-tint: var(--ac-teal-100); --text-on-dark: rgba(255,255,255,.95); --text-on-dark-muted: rgba(255,255,255,.66); --border-on-dark: rgba(255,255,255,.16); --border-subtle: var(--ac-gray-200); --border-default: var(--ac-gray-300); --border-strong: var(--ac-gray-400); /* Status — aus der Marken-Rampe gezogen, damit Semantik on-brand bleibt */ --color-success: var(--ac-green); --color-info: var(--ac-petrol); --color-warning: #e8a400; --color-danger: #c8442e; --focus-ring: var(--ac-teal); /* ── 6 · Buttons — Farbe folgt dem HINTERGRUND, nicht dem Inhalt ───────── */ /* Regel gilt site-weit ohne Ausnahme. Der Signal-Knopf traegt NIE weisse Schrift — auf Gelb waeren das 1,46:1, auf Gruen 2,38:1. Signalfarbe ist seit 05.09.2026 das CI-Gelbgruen, nicht mehr das CI-Gruen (Kundenregel UE-03: „Uns gefaellt das Gruen nicht wirklich, wir verwenden diese Logo-Farbe in der Praxis nie"). */ --btn-primary-bg: var(--ac-petrol); /* auf hellem Grund */ --btn-primary-text: var(--ac-white); /* 5,99:1 */ --btn-primary-bg-hover: var(--ac-petrol-700); --btn-accent-bg: var(--ac-lime); /* Signal-Button, #dedc00 */ --btn-accent-text: var(--ac-black); /* 12,37:1 — NIE Weiss */ --btn-accent-bg-hover: var(--ac-lime-700); /* #a9a800, 7,2:1 mit dunkler Schrift */ --btn-ghost-border: rgba(255,255,255,.24); /* auf dunklem Grund */ --btn-ghost-bg-hover: rgba(255,255,255,.08); /* ── 7 · Typografie ───────────────────────────────────────────────────── */ /* Hausschrift laut CD-Manual: Fira Sans Extra Condensed → Display/H1. Condensed traegt Subheads/Nav/UI-Labels, die regulaere Fira Sans den Fliesstext (Extra Condensed ist ueber lange Absaetze mobil schwer lesbar). Bestaetigt durch die Design-Vorlage. Alle drei self-hosted (css/fonts.css). */ --font-display: 'Fira Sans Extra Condensed', 'Fira Sans', system-ui, sans-serif; --font-heading: 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif; --font-body: 'Fira Sans', system-ui, -apple-system, sans-serif; /* Vorlagen-Skala als Basis, fluid gemacht — die Vorlage nennt Desktop-Werte, die Website braucht mobile Stufen. Obergrenze = Vorlagenwert. */ --fs-display-xl: clamp(2.75rem, 7.5vw, 6.75rem); /* Hero-H1, bis 108 px */ --fs-display: clamp(2.25rem, 5vw, 3.5rem); /* bis 56 px */ --fs-h1: clamp(2rem, 4vw, 2.625rem); /* bis 42 px */ --fs-h2: clamp(1.5rem, 3vw, 2rem); /* bis 32 px */ --fs-h3: clamp(1.25rem, 2vw, 1.5rem); /* bis 24 px */ --fs-h4: 1.25rem; /* 20 px */ --fs-body-lg: 1.1875rem; /* 19 px */ --fs-body: 1rem; /* 16 px — Mobil-Minimum */ /* 21.08.2026: 14 -> 15 px. 14 px war auf dem Handy die haeufigste Ursache fuer zu kleinen Text (CTA-Zusaetze, Namen unter Zitaten, Tabellen). 15 px bleibt sichtbar unter dem 16-px-Fliesstext, die Hierarchie stimmt also weiter — liest sich aber auf einem Telefon deutlich besser. 34 Verwendungen, alle geprueft: kein Layout bricht. */ --fs-body-sm: 0.9375rem; --fs-caption: 0.78125rem; --fs-overline: 0.75rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-heading: 1.15; --lh-body: 1.6; --lh-relaxed: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --ls-display: -0.01em; --ls-tight: -0.005em; --ls-normal: 0em; --ls-overline: 0.14em; /* ── 8 · Spacing, Container, Radien (8-px-Rhythmus) ───────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container-sm: 640px; --container-md: 880px; --container-lg: 1120px; --container-xl: 1280px; --max-width: var(--container-xl); --gutter: 24px; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Karten hoechstens bis hier — Marke ist rechtwinklig */ --radius-xl: 24px; --radius-pill: 999px; /* nur Buttons und Badges */ /* ── 9 · Layout-Rhythmus (aus dem SEOGEO-Layout-Standard portiert) ─────── */ /* Genau EIN Sektionsrhythmus site-weit. Gleichfarbige Naehte kollabieren auf --section-pad-seam, sonst addieren sich die Paddings zu leeren Baendern. */ /* Enger gestellt am 23.08.2026 (Adrian: die Seite sei total langgezogen). Vorher clamp(2.5rem, 5vw, 6rem) — bei 1440 px waren das 72 px oben und unten je Sektion, bei 1920 px sogar 96. Jetzt 57 bzw. 72 px. Die Untergrenze fuers Handy bleibt fast gleich (40 -> 36 px): dort ist die Seite ohnehin lang, und Luft ist dort Lesbarkeit statt Leere. */ --section-pad: clamp(2.25rem, 4vw, 4.5rem); /* Obergrenze 72 px */ --section-pad-seam: calc(var(--section-pad) * .5); --measure: 72ch; /* ── 10 · Schatten & Bewegung ─────────────────────────────────────────── */ /* Weich, kuehl getoent (Markenblau) — nie harte schwarze Drop-Shadows. */ /* Zweistufige Schatten mit Lichtkante (22.08.2026). Vorher eine einzelne weiche Ebene — Karten lagen flach auf der Flaeche. Jetzt: Lichtkante oben (die Kante, an der Licht auf ein Material trifft), harter Nahschatten (haelt das Element am Grund), weicher Fernschatten (gibt Raum). Dosierung bewusst zurueckhaltend: das Ziel ist Materialitaet, nicht Vitrine. */ --shadow-xs: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(37,54,90,.06); --shadow-sm: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(37,54,90,.06), 0 4px 12px rgba(37,54,90,.08); --shadow-md: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(37,54,90,.07), 0 10px 24px rgba(37,54,90,.11); --shadow-lg: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(37,54,90,.08), 0 20px 46px rgba(37,54,90,.16); /* Gegenstueck fuer Bausteine auf dunklem Grund: dort ist die Lichtkante weiss mit wenig Deckkraft, der Schatten dafuer tiefer. */ --shadow-sm-dark: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px rgba(0,0,0,.28); --shadow-md-dark: 0 1px 0 rgba(255,255,255,.11) inset, 0 12px 28px rgba(0,0,0,.34); --shadow-focus: 0 0 0 3px rgba(26,145,154,.35); --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }