/* ============================================================================ AKTIV DAHOAM — Design-System (Design-Tokens) Mobiler ambulanter Pflegedienst · München-Großhadern · „...anstatt ins Pflegeheim“ ---------------------------------------------------------------------------- Marken-Gefühl: dahoam · warm · verlässlich · bodenständig-bayerisch · nah Marken-Anker: · Geranien-Rot #C24A3E — bayerische Balkonwärme; echot zugleich die ROTE Figur im echten Logo → Primär-Akzent/CTA · Honig-Eiche #7A5A3C — warmes Holz, „daheim“; Struktur/Headlines/dunkle Bühne · Wiesen-Salbei #7E9A6E — gedämpftes Wiesengrün; Sekundär/Ruhe/Badges · Home-Cream #F7F1E6 — warmer Wohnraum-Grund (KEIN klinisches Kalt-Weiß) · Warmes Ink #2A211A — Text (kein reines Schwarz) BEWUSST GEGEN `pflegedienst-metz` (gleiche Branche, Alt-System): metz = kühles Sky-Blue #0369a1 / Leaf-Green, Lexend/Source Sans 3. aktiv-dahoam = WARM (Geranie/Eiche/Salbei), Bitter/Work Sans → Gegenpol Klinik-Kälte. Signature ist ein physischer Karten-Stapel-Deck, keine Value-Cards + 3-Schritt-Timeline. REGELN (siehe second-brain/index.md): - Merksatz 17: Akzentfarben NUR als var(); Text auf Akzent = --on-*. - Merksatz 18: alle calc()/clamp()/min()/max() haben Leerzeichen um + und −. - Merksatz 20: Bitter & Work Sans SELF-HOSTED (WOFF2, @font-face) — NIE googleapis.com. Der Builder bindet nur lokale /assets/fonts/*.woff2. - Keine globale h1/h2/h3-Farbe im Builder (Hero-Text separat erzwingen). ============================================================================ */ :root { /* --------------------------------------------------------------------------- 1 · MARKENFARBEN --------------------------------------------------------------------------- */ /* GERANIEN-ROT — PRIMÄR-AKZENT / CTA (Referenz #C24A3E = RGB 194/74/62) Warm-terrakotta-rot der bayerischen Balkon-Geranie; klar KEIN Blau (metz), KEIN Amarena-Kirsche (galleria), KEIN Ziegel-Rot-nur-funktional (bei-antonio). */ --geranium-900: #6E241B; /* tiefste Röte — kleine Text-Akzente auf hell */ --geranium-800: #872C21; /* dunkle Fläche / Pressed-State */ --geranium-700: #9A3428; /* LINK-Farbe auf Cream (AA ≥ 6:1) / CTA-Hover-Rand */ --geranium-600: #C24A3E; /* PRIMÄR-CTA-Fläche (on = --on-geranium) — Brand-Signal */ --geranium-500: #D15E51; /* helle Betonung, aktive Nav-Unterstriche */ --geranium-400: #E08477; /* weiche Röte / Hover-Glint */ --geranium-200: #F1CBC4; /* zarte Wäsche / Chip-Rand */ --geranium-100: #FAE6E1; /* Chip-/Badge-BG rosé-rot */ /* HONIG-EICHE — Struktur / Headlines / dunkle Bühne (#7A5A3C = RGB 122/90/60) */ --oak-900: #33261A; /* dunkle Bühne (Footer / Kontakt-Direkt-Block), on = Cream */ --oak-800: #452F1F; /* tiefe Holz-Fläche */ --oak-700: #5E4429; /* starke Headlines auf hell */ --oak-600: #7A5A3C; /* Honig-Eiche-Basis (on = --on-oak) */ --oak-500: #927046; /* sekundäre Holz-Betonung */ --oak-400: #B08E63; /* warme Zierlinie / dekorativer Rahmen */ --oak-300: #CBB08A; /* Hairline warm, Karten-Kante */ --oak-200: #E4D6BF; /* warmer Sand — tiefere Karten / Rahmen */ --oak-100: #F1E8D6; /* Sand-Hauch-Fläche */ /* WIESEN-SALBEI — Sekundär / Ruhe / Vertrauens-Badges (#7E9A6E) */ --sage-800: #3E4F32; /* tiefes Moos — Text-Akzent auf hell */ --sage-700: #566B45; --sage-600: #6B855A; /* Salbei-Fläche kräftig (on = --on-sage) */ --sage-500: #7E9A6E; /* Wiesen-Salbei-Basis */ --sage-400: #9DB48F; /* dekorative Linie / Icon-Ton */ --sage-300: #BDCEB2; /* weiche Fläche */ --sage-200: #DBE5D3; /* helle Sektions-BG-Wäsche */ --sage-100: #EDF2E8; /* zartester Salbei-Hauch / Chip-BG */ /* HOME-NEUTRALS (Basis / Wohnraum-Grund — warm, nie kalt-weiß) */ --cream-050: #FDF9F1; /* hellster Ton — Karten / Foto-Rahmen / Glanz */ --cream-100: #F7F1E6; /* HOME-CREAM — HAUPT-Seitengrund */ --cream-200: #EFE6D5; /* alternierende Sektion */ --cream-300: #E4D7C1; /* warme Hairline / Rahmen-Schatten-Kante */ --paper-000: #FFFFFF; /* reines Weiß — nur Foto-Passepartout / Logo-Chip */ /* INK (Text) — warmes fast-Schwarz mit Eichen-Unterton, KEIN reines #000 */ --ink-900: #2A211A; /* starke Headlines / dunkler Fließtext */ --ink-700: #463A2E; /* Standard-Fließtext */ --ink-500: #6E6152; /* Sekundärtext / Captions */ --ink-400: #948673; /* dezente Meta / Platzhalter */ --ink-line: #DCD1BE; /* neutrale warme Hairline auf hell */ /* FUNKTIONS-FARBEN (nur semantisch, mit Icon/Text — nie Farbe allein) */ --ok: var(--sage-700); --alert: #B4472F; /* Fehler/Ruhetag — abgesetzt vom Marken-Geranium */ /* --------------------------------------------------------------------------- 2 · SEMANTISCHE ZUWEISUNGEN (der Builder nutzt NUR diese) --------------------------------------------------------------------------- */ --bg-page: var(--cream-100); /* Haupt-Hintergrund */ --bg-alt: var(--cream-200); /* alternierende Sektion */ --bg-sage-wash: var(--sage-100); /* salbei-getönter Sektions-BG (Ruhe/So-arbeiten) */ --bg-deep: var(--oak-900); /* dunkle Honig-Eiche-Bühne (Kontakt-Direkt/Footer) */ --bg-card: var(--cream-050); /* Standard-Karte */ --bg-card-warm: var(--oak-100); /* tiefere/warme Karte */ --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-meta: var(--ink-400); --brand-primary: var(--geranium-600); /* CTA / Aktiv / Marken-Signal */ --brand-secondary:var(--sage-500); /* Ruhe-Sekundär / Badges */ --brand-wood: var(--oak-600); /* Struktur / warme Headlines */ /* Text-auf-Akzentfläche (Merksatz 17 — nie hart #fff/#000 hardcoden) */ --on-geranium: #FDF6F1; /* helles Cream auf Geranien-CTA (AA 4.6:1) */ --on-sage: #22301A; /* DUNKLES Ink auf Salbei-Fläche (AA 4.8:1) */ --on-oak: var(--cream-050); /* Cream auf Honig-Eiche (AA 5.5:1) */ --on-deep: var(--cream-100); /* Cream auf dunkler Eichen-Bühne */ /* Links / Fokus / State (Links = geranium-700 für AA auf Cream) */ --link: var(--geranium-700); --link-hover: var(--geranium-800); --focus-ring: var(--geranium-600); --focus-ring-deep:var(--oak-300); /* --------------------------------------------------------------------------- 3 · MARKEN-LEITMOTIVE (als BG/Deko — an ELEMENT koppeln, nie an vw; Merksatz 1) --------------------------------------------------------------------------- */ /* „Dahoam“-Fensterlicht: warmer Morgen-Lichtschein, Hero-Grund hinter dem Stapel. Zwei weiche Radialen (Geranie warm + Eichen-Honig) auf Cream — NICHT hart. */ --wash-dahoam: radial-gradient(58% 70% at 78% 18%, rgba(224, 132, 119, 0.28), transparent 68%), radial-gradient(64% 80% at 20% 82%, rgba(176, 142, 99, 0.22), transparent 72%), radial-gradient(46% 60% at 50% 40%, rgba(157, 180, 143, 0.14), transparent 78%); /* Tageszeit-Tönung je Deck-Karte (Signature „Der Tag dahoam“) */ --tint-frueh: linear-gradient(160deg, rgba(237, 242, 232, 0.9), rgba(253, 249, 241, 0.75)); /* Salbei-Morgen */ --tint-mittag: linear-gradient(160deg, rgba(241, 232, 214, 0.92), rgba(253, 249, 241, 0.78)); /* Honig-Mittag */ --tint-abend: linear-gradient(160deg, rgba(241, 203, 196, 0.9), rgba(244, 224, 214, 0.78)); /* Geranien-Abend */ --tint-nacht: linear-gradient(160deg, rgba(69, 47, 31, 0.96), rgba(51, 38, 26, 0.98)); /* Eichen-Nacht (dunkel) */ /* weicher Papier-/Leinen-Grain gegen glatten KI-Look (feTurbulence im Builder) */ --grain-opacity: 0.045; /* --------------------------------------------------------------------------- 4 · TYPOGRAFIE Pairing (voller DE-Umlaut/ß-Support, SELF-HOSTED WOFF2 — Merksatz 20): Headline: "Bitter" — warme, humane Slab-Serife mit runden Serifen und ruhiger Statur → „bodenständig, verlässlich, dahoam“ ohne Klinik-Kälte, ohne fragilen Didone-Haarstrich (Merksatz 6). Gegencheck Ledger: kein Rokkitt/Fraunces/Spectral/Newsreader/ Playfair/Cinzel/Anton/Cormorant/Lexend/Zilla-Duplikat. Body/UI: "Work Sans" — humanistische Groteske, hohe x-Höhe, klare Ziffern (Telefonnummer/NAP für ältere Leser gut lesbar). Kein Source Sans 3 (metz) → bewusst anderes System. --------------------------------------------------------------------------- */ --font-display: "Bitter", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --fw-body: 400; /* Work Sans Regular — Fließtext */ --fw-medium: 500; /* Work Sans Medium — Labels / Buttons / Nav */ --fw-semibold: 600; /* Work Sans SemiBold — starke UI-Betonung */ --fw-display: 500; /* Bitter Medium — Sektions-Headlines */ --fw-display-b: 700; /* Bitter Bold — H1 / große Zahlen */ /* Fluid Type Scale — großzügig (ältere Zielgruppe: hoher Kontrast, min 16px). ACHTUNG: alle +/− mit Leerzeichen (Merksatz 18). Hero-H1 „Dahoam bleiben – anstatt ins Pflegeheim.“ = langer 2-Zeiler → vw bewusst gedeckelt, damit das längste Wort nicht überläuft (Merksatz 117). */ --fs-hero: clamp(2.4rem, 1.75rem + 3.1vw, 4.4rem); /* H1 Hero */ --fs-h1: clamp(2.1rem, 1.6rem + 2.5vw, 3.6rem); /* Karriere-H1 / Seiten-H1 */ --fs-h2: clamp(1.85rem, 1.45rem + 1.9vw, 2.9rem); /* Sektions-Headline */ --fs-h3: clamp(1.4rem, 1.2rem + 1vw, 1.95rem); /* Karten-/Deck-Titel */ --fs-h4: clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem); /* Kategorie-/Item-Titel */ --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); /* Intro-Lead */ --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* Fließtext (17→19px) */ --fs-small: clamp(0.9rem, 0.87rem + 0.12vw, 0.98rem); /* Meta / Captions */ --fs-eyebrow:clamp(0.74rem, 0.72rem + 0.1vw, 0.84rem); /* Eyebrow (Caps) */ --fs-badge: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem); /* „Tag und Nacht“-Badge */ --lh-tight: 1.08; /* große Headlines */ --lh-snug: 1.2; /* H2/H3 */ --lh-normal: 1.65; /* Fließtext (großzügig für ältere Leser) */ --lh-relaxed: 1.8; /* lange Absätze */ --ls-hero: -0.015em; --ls-tight: -0.008em; --ls-normal: 0em; --ls-eyebrow: 0.2em; /* Eyebrow gesperrt (Caps) — SPARSAM einsetzen */ --ls-caps: 0.06em; /* --------------------------------------------------------------------------- 5 · SPACING-SCALE (8px-Basis, fluid für Sektionsränder) --------------------------------------------------------------------------- */ --sp-3xs: 0.25rem; /* 4px */ --sp-2xs: 0.5rem; /* 8px */ --sp-xs: 0.75rem; /* 12px */ --sp-sm: 1rem; /* 16px */ --sp-md: 1.5rem; /* 24px */ --sp-lg: 2rem; /* 32px */ --sp-xl: 3rem; /* 48px */ --sp-2xl: 4rem; /* 64px */ --sp-3xl: 6rem; /* 96px */ --sp-4xl: 8rem; /* 128px */ /* fluide Sektions-Polsterung (Leerzeichen um + Pflicht — Merksatz 18) */ --section-py: clamp(3.5rem, 2.4rem + 5vw, 8rem); --section-py-tight: clamp(2.5rem, 1.9rem + 3vw, 4.5rem); --gutter: clamp(1.25rem, 0.85rem + 2vw, 3rem); /* seitlicher Rand */ --stack: clamp(1rem, 0.85rem + 0.7vw, 1.6rem); /* Standard-Vertikalabstand */ /* --------------------------------------------------------------------------- 6 · CONTAINER / LAYOUT Wide-Stufe gegen „leer auf 3440“ (Merksatz 1): Content gebunden, breite Effektflächen (Deck-Bühne) gedeckelt, Header an --content-wide gebunden. --------------------------------------------------------------------------- */ --content-max: 1200px; /* Standard-Lesebreite */ --content-narrow: 720px; /* Fließtext-Spalte (So-arbeiten / Ausbildung) */ --content-wide: 1400px; /* Team-Galerie / breite Grids */ --stage-max: 1560px; /* Hero-Karten-Bühne / Deck-Bühne (gedeckelt!) */ /* --------------------------------------------------------------------------- 7 · RADIUS (weich, warm — „daheim“, keine harten Klinik-Kanten) --------------------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 36px; /* Deck-Karten / Hero-Foto-Karte */ --r-pill: 999px; /* Badges, Chips, CTAs */ /* --------------------------------------------------------------------------- 8 · SCHATTEN (weich, warm getönt — kein hart-grauer Material-Schatten) Tönung ins Warme (Eichen-/Cream-Umgebung) → wirkt „gecraftet“, nicht kühl. --------------------------------------------------------------------------- */ --sh-xs: 0 1px 2px rgba(42, 33, 26, 0.05); --sh-sm: 0 2px 8px rgba(42, 33, 26, 0.06), 0 1px 2px rgba(42, 33, 26, 0.05); --sh-md: 0 8px 24px rgba(42, 33, 26, 0.08), 0 2px 6px rgba(42, 33, 26, 0.05); --sh-lg: 0 18px 46px rgba(42, 33, 26, 0.12), 0 6px 14px rgba(42, 33, 26, 0.06); --sh-xl: 0 30px 74px rgba(51, 38, 26, 0.18), 0 10px 24px rgba(42, 33, 26, 0.09); /* Deck-Karte: physischer „aufliegender Stapel“-Schatten (weich + warm + tief) */ --sh-deck: 0 -2px 0 rgba(255, 255, 255, 0.5) inset, 0 24px 54px rgba(51, 38, 26, 0.16), 0 6px 16px rgba(42, 33, 26, 0.10); --sh-card-hover: 0 26px 60px rgba(51, 38, 26, 0.20), 0 8px 18px rgba(42, 33, 26, 0.10); /* Fokus-Glow (Geranien-Rot) */ --sh-focus: 0 0 0 3px rgba(194, 74, 62, 0.32); /* --------------------------------------------------------------------------- 9 · HAIRLINES / BORDERS --------------------------------------------------------------------------- */ --border-hair: 1px solid var(--ink-line); --border-warm: 1px solid var(--cream-300); --border-oak: 1px solid var(--oak-300); --border-sage: 1px solid var(--sage-300); --border-focus: 2px solid var(--geranium-600); /* --------------------------------------------------------------------------- 10 · EASING-KURVEN (weich, menschlich — nichts linear/mechanisch) --------------------------------------------------------------------------- */ --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* Standard-Reveal */ --ease-in-out-soft: cubic-bezier(0.65, 0.05, 0.36, 1); --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* betonter Eintritt */ --ease-settle: cubic-bezier(0.34, 1.2, 0.5, 1); /* Karte „legt sich ab“ (leichter Overshoot) */ --ease-press: cubic-bezier(0.4, 0, 0.6, 1); /* Button-Press */ --dur-fast: 180ms; --dur-base: 300ms; --dur-slow: 520ms; --dur-reveal: 680ms; /* --------------------------------------------------------------------------- 11 · Z-INDEX-SKALA --------------------------------------------------------------------------- */ --z-base: 0; --z-deck: 5; /* Karten-Stapel-Ebenen (Builder ergänzt +nth) */ --z-sticky: 50; /* mobile Sticky-Anruf-Leiste */ --z-header: 100; --z-overlay: 200; --z-modal: 300; /* Team-Lightbox (optional) */ /* --------------------------------------------------------------------------- 12 · EFFEKT-VARIABLEN (vom Builder/JS beschrieben) Signature „Der Tag dahoam“ = CSS position:sticky Deck (KEIN gsap-Pin). --------------------------------------------------------------------------- */ --header-h: 72px; /* per JS mit realer Höhe überschrieben (inkl. scrolled) */ --deck-card-top: calc(var(--header-h) + clamp(0.75rem, 3vw, 2.25rem)); /* Sticky-Andockpunkt */ --deck-peek: 16px; /* sichtbarer Kanten-Peek pro gestapelter Karte */ --deck-scale-step: 0.028; /* wie stark eine untenliegende Karte zurücktritt */ --parallax-hero: 0.12; /* Hero: EINE ruhige Grund-Ebene (Fensterlicht-Wash) */ --callbar-h: 0px; /* per JS = Höhe der mobilen Anruf-Leiste (Content-Offset) */ } /* =========================================================================== DUNKLE HONIG-EICHEN-BÜHNE — Token-Overrides für --bg-deep-Flächen (Kontakt-Direktblock, Nacht-Deck-Karte, Footer, Karriere-Abschluss-CTA) Merksatz 17: auf dunkler Fläche nie hart #fff — Cream-Tokens statt dessen. =========================================================================== */ [data-surface="deep"] { --text-strong: var(--cream-050); --text-body: #EADFCB; --text-muted: #C4B49A; --text-meta: #A6947A; --link: var(--oak-300); --link-hover: var(--geranium-400); --focus-ring: var(--oak-300); --border-hair: 1px solid rgba(255, 255, 255, 0.14); --ink-line: rgba(255, 255, 255, 0.14); /* CTA bleibt Geranien-Rot — kontrastiert stark auf dunkler Eiche */ --on-geranium: #FDF6F1; } /* =========================================================================== SALBEI-RUHE-BÜHNE — sanfte getönte Sektion (So arbeiten wir / Ruhe-Bänder) =========================================================================== */ [data-surface="sage"] { --bg-page: var(--sage-100); --border-hair: 1px solid var(--sage-300); } /* =========================================================================== REDUCED MOTION — globale Effekt-Dämpfung Hinweis: Der Signature-Deck ist LAYOUT-basiert (position:sticky), nicht motion-getrieben → er bleibt auch bei reduced-motion voll erlebbar. Nur Reveals/Parallax/Micro-Interactions werden hier ruhiggestellt. =========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --parallax-hero: 0; } }