/* ========================================================================== Design System — Dein Gesundheitsmanager Design Tokens v3.0 · „Lichtwechsel" Löst v2.0 (Warm Graphite, Dark-only) ab. WAS SICH GEGENÜBER v2 ÄNDERT 1. Die Seite steht auf hellem Grund. Die Höhle bleibt erhalten, aber als Kontext statt als Voreinstellung — für den Hero und für Fragmente, die aus dem Dunkel mitkommen. 2. Die semantische Ebene wird jetzt tatsächlich benutzt. In v2 war sie definiert, aber style.css griff zu 96 % direkt auf die Rohwerte zu (--bone-100 39×, --gold-400 66×, --text 2×). Ein Themewechsel war dadurch unmöglich. style.css v3 referenziert ausschließlich die semantische Ebene; die Rohpaletten sind nur noch deren Rohstoff. 3. Alle 20 undefinierten Tokens aus v2 sind aufgelöst — entweder auf ihr v3-Äquivalent gemappt oder ersatzlos entfernt. Liste am Dateiende. HERKUNFT DER HELLEN PALETTE Kein Wert ist entworfen. Alle stammen aus Frame 241 der Hero-Sequenz — dem Bild, in das der Nutzer am Ende der Scrollanimation tritt. Die Region ist bei jedem Wert benannt. Genau deshalb passt die helle Seite zum Hero: sie besteht aus seinen Farben. ========================================================================== */ /* ========================================================================== 1. ROHPALETTEN Nur Rohstoff. In style.css wird auf diese Namen NICHT mehr direkt zugegriffen — ausschließlich über die semantische Ebene in Abschnitt 2. ========================================================================== */ :root { /* --- Die Höhle: warmes Graphit ----------------------------------------- Unverändert aus v2. Trägt weiterhin den Hero und die Fragmente. Flächen werden zum Grund hin heller UND entsättigter, nie gesättigter. */ --ink-900: #050506; /* Höhlengrund, Hero */ --ink-800: #0E0D0C; /* erhöhte Fläche im Dunkeln */ --ink-700: #171512; /* Hover dunkler Flächen */ --ink-600: #2B2620; /* Rahmen im Dunkeln. Entsättigt, kein Blau. */ --bone-100: #F2EDE3; /* Cremeweiß. Text auf Dunkel, Creme-Karten. */ --bone-200: #C3BDB2; /* Sekundärtext auf Dunkel */ --bone-300: #8A8478; /* Tertiärtext auf Dunkel */ --bone-ink: #5A5449; /* Fließtext auf cremefarbener Fläche 6,43:1 */ /* --- Das Licht: gemessen aus Frame 241 ---------------------------------- */ --lift-100: #F1F1EB; /* Seitengrund oklch(95,6% .008 107) Aus dem Dunst über den Gipfeln (#DADAD4), aufgehellt. KEIN reines Weiß: #FFFFFF wäre kälter als jede Fläche im Bild und ließe den Hero wie einen Fremdkörper wirken. */ --lift-200: #E7E8E1; /* Karte, erhöhte Fläche */ --lift-300: #DDDFD7; /* Eingabefeld, vertiefte Fläche */ --lift-400: #CBCEC4; /* Dekorative Haarlinie — NUR dekorativ, 1,41:1 */ /* Auf Licht kehrt sich „Flächenkontrast statt Schatten" um: Karten stehen TIEFER als der Grund, nicht höher. Nach oben ist kein Weg mehr. */ --pine-900: #1B1F19; /* Überschriften. Aus den Kiefern im Vordergrund (#20241C) — ein Grün-Schwarz, kein Neutralgrau. 14,74:1 auf dem Seitengrund. */ --pine-700: #3C4239; /* Fließtext 9,12:1 */ --pine-500: #5A6055; /* Sekundärtext 5,73:1 und JEDE funktionale Linie — siehe Abschnitt 4. */ /* --- Signal 1: der Weg --------------------------------------------------- Der sonnenbeschienene Pfad im Geröll misst H44 / S40 %. Das Marken-Gold liegt bei H40 / S46 %. Dieselbe Farbe — die Signalfarbe der Marke ist im Bild bereits als begehbarer Weg vorhanden. Daraus die Regel, die das ganze System trägt: GOLD MARKIERT, WO ES WEITERGEHT. Primäre Handlungen, der nächste Schritt. Nichts Dekoratives. Auf hellem Grund ist das der Unterschied zwischen einer Wegmarkierung und billigem Gold. */ --gold-600: #A98A4E; /* gedrückt, auf Dunkel */ --gold-500: #C6A96B; /* PRIMÄR — Flächen, Buttons. In BEIDEN Themen. */ --gold-400: #E2CB96; /* Gold auf dunklem Grund: Text < 24px, Icons */ --path-700: #6B5A2E; /* Gold auf hellem Grund, texttauglich 5,92:1 */ --path-800: #55471F; /* gedrückt, auf Licht */ /* --- Signal 2: der See --------------------------------------------------- Gegenpol, sonst wird alles goldbraun und die Seite kippt ins Rustikale. H187 aus der Seefläche, im Bild bereits akzeptiert. Trägt Information — Fachliches, Zertifizierung, Schulkontext. NIE eine primäre Handlung, das bleibt dem Weg vorbehalten. */ --lake-400: #89AEB3; /* Fläche */ --lake-700: #3A6166; /* Text auf Licht 6,01:1 */ /* --- Glas ---------------------------------------------------------------- */ --glass-dark: rgba(14, 13, 12, 0.62); --glass-light: rgba(241, 241, 235, 0.72); } /* ========================================================================== 2. SEMANTISCHE EBENE — LICHT (Voreinstellung) style.css v3 referenziert ausschließlich diese Namen. Wer eine Farbe ändern will, ändert sie hier, nicht in style.css. ========================================================================== */ :root { --bg: var(--lift-100); --surface: var(--lift-200); --surface-hover: var(--lift-300); --border: var(--lift-400); /* dekorativ */ --border-strong: var(--pine-500); /* funktional — siehe Abschnitt 4 */ --text: var(--pine-900); --text-muted: var(--pine-700); --text-subtle: var(--pine-500); --text-on-bone: var(--bone-ink); /* Der Weg. --accent und --accent-strong sind FLÄCHEN und bleiben in beiden Themen echtes Gold; nur Text und Linien wechseln. */ --accent: var(--gold-500); --accent-strong: var(--gold-400); --accent-text: var(--path-700); --accent-line: var(--path-700); --accent-pressed: var(--path-800); --text-on-accent: var(--ink-900); /* dunkler Text auf Gold: 7,39:1 */ /* Der See */ --info: var(--lake-400); --info-text: var(--lake-700); --glass: var(--glass-light); /* Schleier über Bildern. Auf Licht fast durchsichtig — der Verlauf des Dunkelsystems (Gold nach Fast-Schwarz mit mix-blend-mode: overlay) lässt Motive auf hellem Grund absaufen. */ --media-veil: linear-gradient(180deg, rgba(198, 169, 107, 0.10) 0%, rgba(27, 31, 25, 0.10) 100%); --media-veil-blend: normal; --media-filter: saturate(0.94) contrast(1.01) brightness(1.04); } /* ========================================================================== 3. SEMANTISCHE EBENE — HÖHLE Kontextklasse, kein Media-Query. Gilt für: .hero-scroll-track — der Hero bleibt vollständig dunkel .fragment — Karten, die aus dem Dunkel mitkommen .card--ink — die dritte, feste Karten-Füllung neben Bone und Gold (style.css, „Drei Karten-Füllungen"). Anders als .fragment nicht erzählerisch/sparsam gemeint, sondern ein reguläres Bento-Füllmuster — darf öfter vorkommen, aber bewusst dosiert einsetzen Sparsam einsetzen: vier bis sechs Fragmente auf der ganzen Seite. Werden es mehr, verlieren sie ihre Wirkung und die Seite wirkt gescheckt. Für .card--ink gilt das nicht 1:1 — aber auch hier gilt: eine Ink-Karte pro Bento-Reihe, nicht mehr, sonst kippt dieselbe Reihe erneut ins Dunkle. ========================================================================== */ .fragment, .card--ink, .hero-scroll-track, .site-header.header--in-hero, .article-consultation-banner, .luxury-nav-overlay, .dgm-cookie-banner, .dgm-cookie-modal, .expertise-floating-quote-box, #booking-modal { --bg: var(--ink-900); --surface: var(--ink-800); --surface-hover: var(--ink-700); --border: var(--ink-600); --border-strong: var(--ink-600); --text: var(--bone-100); --text-muted: var(--bone-200); --text-subtle: var(--bone-300); --accent-text: var(--gold-400); --accent-line: var(--gold-400); --accent-pressed: var(--gold-600); --info-text: var(--lake-400); --glass: var(--glass-dark); --media-veil: linear-gradient(180deg, rgba(198, 169, 107, 0.14), rgba(5, 5, 6, 0.55)); --media-veil-blend: overlay; --media-filter: saturate(0.85) contrast(1.08); color: var(--text-muted); background-color: var(--bg); } /* ========================================================================== 4. TEXTSTUFEN — eine Einschränkung, die das System prägt Auf Dunkel trug v2 drei Textstufen: 17,5 / 10,9 / 5,5. Auf Licht geht das nicht auf. Selbst ein stark abgedunkeltes #6A7164 erreicht nur 3,57:1 und fällt durch. Die dritte Stufe existiert auf hellem Grund schlicht nicht. REGEL: Zwei Textstufen in Farbe, die dritte über GRÖSSE UND SCHNITT. Captions werden kleiner und versal — nicht heller. Das ist ohnehin die robustere Hierarchie; Kontrast allein ist die fragilste Art, sie zu bauen. REGEL FÜR LINIEN: --border ist dekorativ (1,41:1) und darf nur für optische Trennung benutzt werden. Jede funktionale Begrenzung — Eingabefeld, Auswahlzustand, Fokus — nimmt --border-strong. Dazwischen liegt kein Wert, der auf allen Gründen die geforderten 3:1 hält. ========================================================================== */ /* ========================================================================== 5. TYPOGRAFIE ========================================================================== */ :root { /* Selbst gehostet statt @import von Google Fonts und Fontshare. Grund: der @import in style.css v2 erzeugte eine Wasserfallkette (HTML → style.css → CDN) ohne preconnect, und die Auslieferung von Google Fonts über Googles CDN überträgt die IP jeder Besucherin an Google — bei einer deutschen Seite mit Cookie-Banner und Datenschutzerklärung ein Widerspruch (LG München I, 2022). Die @font-face-Deklarationen liegen in fonts.css. */ --font-display: "Prata", "Iowan Old Style", Georgia, serif; --font-ui: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif; --fs-display: clamp(3rem, 7.2vw, 7rem); /* Deckelte vorher schon ab ~1470px Breite bei 44px — auf breiten Desktops (1600px+) wirkte das neben dem großzügigen Weißraum klein. Höherer vw-Koeffizient + höherer Deckel: wächst länger mit. */ /* Handy kleiner (14. September 2026): vorher mind. 32px, lange Headlines liefen auf 375px über 3–5 Zeilen. Jetzt mind. 26px; Desktop bleibt bei rund 49px (1440px), dazwischen fließend. */ /* H2 bis 40 px (16.09.2026, vorher bis 56 px): Auf breiten Bildschirmen wirkten die Sektionskoepfe zu wuchtig, Verhaeltnis zum 16-px-Fliesstext lag ueber 3:1. Mobil unveraendert 26 px. Getestet in lab/ Modul 3. */ --fs-h2: clamp(1.625rem, 1rem + 1.6vw, 2.5rem); --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem); --fs-body: 1rem; --fs-small: 0.875rem; /* War 11px — auf breiten Screens kaum lesbar. 13px bleibt klar als kleines Kicker-Label erkennbar, konkurriert nicht mit der Überschrift. */ --fs-label: 0.8125rem; --lh-display: 0.94; /* Kern der Hero-Wirkung. Nicht anheben. */ --lh-heading: 1.08; --lh-body: 1.6; --tracking-display: 0.005em; /* Versalien brauchen leicht POSITIV, nie negativ — sonst verkleben sie. */ --tracking-label: 0.16em; --tracking-nav: 0.14em; --tracking-btn: 0.1em; --measure: 62ch; /* Prata gewinnt auf hellem Grund: Die Haarstriche der Didone werden auf dunklem Grund vom Lichtsaum angefressen, auf hellem stehen sie sauber. Die Displaygrößen bleiben deshalb unverändert. */ } /* ========================================================================== 6. RAUM ========================================================================== */ :root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --container: 1280px; /* Nur für Header + Hero-Zeilen (.header-inner, .hero-stage-row, .hero-stage-header-spacer, .hero-footrow): die vier bleiben bewusst auf der alten, breiteren Spur, damit Logo/Headline weiterhin exakt zueinander ausgerichtet sind UND die Headline ihren Abstand zur Höhlenöffnung im Hero-Bild behält. Alle Inhaltssektionen darunter (.container) laufen jetzt auf --container, näher an gängiger Praxis. */ --container-wide: 1560px; --gutter: 16px; --pad-inline: 24px; /* Sektionsabstände um rund ein Drittel verringert (14. September 2026): vorher 80 / 104 / 128px, zwischen zwei Sektionen also bis zu 256px Leerraum auf durchgehend hellem Grund. Zusammen mit der feinen Trennlinie (style.css, .section-block) reicht jetzt weniger. */ --section-y: 56px; --card-pad: 24px; } @media (min-width: 768px) { :root { --pad-inline: 40px; --section-y: 72px; --card-pad: 32px; } } @media (min-width: 1200px) { :root { --pad-inline: 56px; --section-y: 96px; } } /* ========================================================================== 7. FORM — Fase statt Radius Ecken sind rechtwinklig; die Kontur entsteht durch einen 45-Grad-Schnitt unten rechts. Eine Ecke, nicht vier — zwei Schnitte lesen sich technisch, einer editorial. Die Pfeil-Kreise bleiben rund: der eine weiche Punkt markiert Interaktion. Unverändert aus v2. Die Fase funktioniert auf hellem Grund sogar besser, weil die Schnittkante gegen einen Grund arbeitet statt gegen Schwärze. ========================================================================== */ :root { --r-lg: 0px; --r-md: 0px; --cut-lg: 32px; /* Schnitt an Karten */ --cut-sm: 11px; /* Schnitt an Buttons */ /* Füllebene bordered Karten: 1px Einrückung verschiebt eine 45-Grad- Diagonale um 1,41px senkrecht, nicht um 1px. Korrektur = 2 − √2. */ --cut-inset: 0.586px; } /* ========================================================================== 8. ELEVATION, BEWEGUNG, FOKUS ========================================================================== */ :root { /* Sparsam. Flächenkontrast statt Schatten. */ --shadow-overlay: 0 24px 64px -16px rgba(5, 5, 6, 0.28); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --t-fast: 180ms; --t-base: 260ms; --tr-smooth: var(--t-base) var(--ease-out); /* war in v2 undefiniert */ --focus-ring: 2px solid var(--accent-line); --focus-offset: 3px; } .fragment, .card--ink, .hero-scroll-track, .site-header.header--in-hero, .article-consultation-banner, .luxury-nav-overlay, .dgm-cookie-banner, .dgm-cookie-modal, #booking-modal { --shadow-overlay: 0 24px 64px -16px rgba(5, 5, 6, 0.72); } /* Navigationsoverlay, Cookie-Banner und Buchungsdialog bleiben dunkel — eigenständige Flächen, kein Bezug zum Seitengrund darunter. Die Kopfzeile ist seit dem Lichtwechsel differenziert: Nur solange sie über dem Hero schwebt (.header--in-hero) bleibt sie dunkel, weil eine helle Leiste über dem Höhlenbild dort ein Fremdkörper wäre. Sobald sie beim Upscroll über hellem Inhalt einblendet (.header--revealed ohne .header--in-hero) oder als feste Subpage-Leiste läuft, folgt sie der hellen Ebene — siehe .site-header.header--revealed und .site-header--subpage in style.css. */ /* ========================================================================== 9. HERO ========================================================================== */ :root { /* Geometrie der Scrollanimation. Wird von der Naht am Hero-Ausgang gebraucht (style.css, .hero-bottom-blend) und muss mit der Track-Höhe zusammenpassen. Nachgeführt (12. September 2026) auf den verkürzten Track: 400vh → 250vh, damit löst der Hero bei 150vh statt 300vh ab (Track minus 100vh Sticky-Viewport). Die Länge der Einblendung bleibt bewusst bei absoluten 36vh statt anteilig auf 18vh zu schrumpfen: Der Feather ist ein visueller Übergang über eine Scrollstrecke, keine Proportion der Klebephase. Bei gleicher Scrollgeschwindigkeit dauert er damit exakt so lange wie vorher und bleibt so weich, wie er am Gerät eingemessen wurde — er beginnt nur relativ früher (76 % statt 88 % der Klebephase). */ /* Track-Höhe selbst: .hero-scroll-track in style.css (250vh). */ --hero-exit-start: 114vh; /* 76 % der Klebephase */ --hero-exit-end: 150vh; /* Ablösepunkt */ } /* ========================================================================== 10. AUFGELÖSTE TOKENS AUS v2 Diese 20 Namen wurden in style.css v2 benutzt, waren aber nirgends definiert. Jede Verwendung war ein stiller Ausfall: die Deklaration wurde ungültig, die Eigenschaft erbte oder fiel auf ihren Initialwert zurück. Zwei davon waren sichtbar — die unsichtbare Ziffer im Schnellfinder (--ink-950) und die falsche Schrift im gesamten Quiz (--font-serif). In v3 sind sie aufgelöst. style.css v3 benutzt keinen dieser Namen mehr; die Liste steht nur zur Nachvollziehbarkeit. --ink-950 → --text-on-accent (Tippfehler für --ink-900) --font-serif → --font-display --font-sans → --font-ui --font-mono → entfernt (nirgends nötig) --gold-300 → --accent-text bzw. --accent-strong --gold-200 → entfernt --bone-50 → --bone-100 --sand-100 → --text --sand-200 → --text-muted --sand-300 → --text-subtle --lake-300 → --lake-400 --lake-600 → --lake-700 --pine-900 → jetzt definiert (Überschriftenfarbe) --c-ink-card → --surface --mask → entfernt (war ein Inline-Custom-Property der Partnerlogos) --radius-sm/md/lg/pill → entfernt (v3 nutzt die Fase, keinen Radius) --tr-smooth → jetzt definiert ========================================================================== */