/* ========================================================================== UDO KERZINGER · MARKENSYSTEM brand-tokens.css — die verbindliche Quelle für alle drei Welten Diese Datei ist das Original. Kopien in anderen Projekten werden über tools/sync-tokens.mjs abgeglichen und dürfen dort nicht bearbeitet werden. Gilt für: · udokerzinger.de Dachmarke · my-mind-revolution.de Coaching · journey-of-money.de Finanzbildung (Einbindung, kein Umbau) · money-plan.de Vermögensverwaltung — UNVERÄNDERT, nur abgebildet Die Grundregel des Systems: Gemeinsame DNA in Typografie, Raum, Rhythmus und Bewegung. Eigene Farbe und eigene Emotion je Welt. ========================================================================== */ :root { /* ====================================================================== 1 · SHARED BRAND — die neutrale Ebene der Dachmarke Warm, hochwertig, menschlich, ruhig. Sie gibt den drei Produktfarben Raum, statt selbst eine vierte Farbe zu behaupten. --brand-dark ist bewusst ein entsättigtes Charcoal-Navy. Es liegt in derselben Familie wie Money Plans #143142, ohne dessen Farbe zu übernehmen: Money Plan soll im System heimisch wirken, aber die Dachmarke darf nicht wie ein viertes Produkt aussehen. ====================================================================== */ --brand-cream: #f5f1ea; /* Grundfläche der Dachmarke */ --brand-cream-soft: #efe9df; /* abgesetzte Fläche */ --brand-sand: #e4dac8; /* Soft Sand — Kanten, ruhige Flächen */ --brand-sand-deep: #d6c9b1; --brand-white: #fdfbf7; /* Warm White */ --brand-pure: #ffffff; --brand-dark: #17212b; /* Dark Charcoal-Navy — Fließtext */ --brand-dark-deep: #0e1620; /* tiefste Fläche, Fuß */ --brand-muted: #687078; /* Sekundärtext · 5.1:1 auf Cream */ --brand-muted-soft: #8b9198; /* nur Nichtinhaltliches: Linien, Marken */ --brand-on-dark: #f3efe8; --brand-on-dark-muted: #b3b9bf; /* 6.0:1 auf --brand-dark-deep */ --brand-line: rgba(23, 33, 43, .11); --brand-line-strong: rgba(23, 33, 43, .22); --brand-line-dark: rgba(255, 255, 255, .16); --brand-focus: #17212b; --brand-error: #a8382f; --brand-success: #2f6b4f; /* ====================================================================== 2 · MY MIND REVOLUTION — Mensch · Inneres · Wärme · Entwicklung Warm Sage, Sand, warmes Creme, dezentes Terracotta, dunkles Anthrazit. Kein Wellness-Rosa, keine Esoterik, kein Klinikweiß. Terracotta ist der Akzent, nicht die Fläche. Sage trägt die Ruhe. ====================================================================== */ --mind-primary: #a65c3d; /* Terracotta — Akzent, Flächen, Marke */ --mind-primary-ink: #82452c; /* dieselbe Farbe für Text · 6.4:1 */ --mind-secondary: #8c9b84; /* Warm Sage */ --mind-secondary-ink:#5e6b57; /* Sage textfähig · 5.2:1 */ --mind-soft: #d9c3a5; /* Sand */ --mind-cream: #f6f0e8; /* Grundfläche der Mind-Welt */ --mind-cream-soft: #efe6d9; --mind-dark: #2a2420; /* warmes Anthrazit — dunkle Flächen */ --mind-deep: #6b3d27; /* tiefes Terracotta — Verlaufstiefe */ --mind-wash: rgba(166, 92, 61, .09); --mind-on: #fdf9f4; /* Text auf gefüllter Mind-Fläche */ /* ====================================================================== 3 · JOURNEY OF MONEY — Entdecken · Entscheidung · Bewegung Navy, Teal, Gold, Cream. Darf aktiver und spielerischer wirken als My Mind Revolution. Journeys Navy ist absichtlich teal-lastiger als Money Plans #143142. Beide Welten liegen im kühlen Bereich; unterscheidbar bleiben sie durch Journeys Gold, das Money Plan nicht führt. ====================================================================== */ --journey-primary: #17646b; /* Teal */ --journey-primary-ink: #0f4c52; /* Teal textfähig · 7.0:1 */ --journey-secondary: #b58b32; /* warmes Gold */ --journey-gold: #b58b32; --journey-gold-ink: #8a6820; /* Gold textfähig · 4.8:1 */ --journey-dark: #10303a; /* Navy mit Teal-Neigung */ --journey-cream: #eff2f0; --journey-wash: rgba(23, 100, 107, .09); --journey-on: #f4faf9; /* ====================================================================== 4 · MONEY PLAN — Klarheit · Sicherheit · Struktur · Vermögen ACHTUNG: Diese Werte sind nicht entworfen, sondern am 08.08.2026 aus den CSS-Custom-Properties der Live-Seite money-plan.de ausgelesen. Sie werden nicht verändert und nicht „harmonisiert". Herkunft je Wert: --money-primary ← --color-main-blue #4174A0 --money-secondary ← --color-main-light-blue #7CA8D0 --money-dark ← --color-main-dark-blue #143142 --money-grey ← --color-grey-background #E5E5E5 --money-positive ← --color-positive #3C9600 --money-negative ← --color-negative #CE2727 --money-radius ← --border-radius .5em --money-shadow ← --box-shadow --money-ink ist kein neuer Farbwert, sondern --money-dark in Textrolle: --money-primary erreicht auf Cream nur 4.3:1 und ist damit für Fließtext zu schwach. ====================================================================== */ --money-primary: #4174a0; --money-secondary: #7ca8d0; --money-accent: #7ca8d0; --money-dark: #143142; --money-ink: #143142; /* Textrolle · 12.9:1 auf Cream */ --money-grey: #e5e5e5; --money-white: #ffffff; /* Money Plan steht auf Weiß, nicht Cream */ --money-positive: #3c9600; --money-negative: #ce2727; --money-wash: rgba(65, 116, 160, .10); --money-on: #f4f8fb; --money-radius: .5em; --money-shadow: 5px 3px 22px -3px rgba(0, 0, 0, .34); --money-shadow-tint: rgba(25, 59, 81, .34); /* Abgeleitete helle Fläche für die Dachmarke. KEIN Money-Plan-Wert — money-plan.de selbst steht auf reinem Weiß und bleibt so. */ --money-tint: #eef2f6; /* ====================================================================== 5 · TYPOGRAFIE Zwei Familien, mehr nicht. Beide selbst gehostet — kein Google-CDN, keine IP-Übertragung an Dritte. Inter Navigation, Fließtext, alles Funktionale. Source Serif 4 große Headlines und einzelne emotionale Aussagen. Money Plan nutzt Reddit Sans Condensed. Das bleibt dort so. Die Schriftfamilie ist bewusst NICHT das verbindende Element zwischen den Welten — das sind Raum, Rhythmus und Bewegung. ====================================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; /* Fluide Skala. Untergrenze = 375px, Obergrenze = ab ca. 1500px. Vorgabe: Desktop-Hero 72–110px, Mobil 42–58px. */ --fs-display: clamp(2.625rem, 1.05rem + 6.6vw, 6.875rem); /* 42 → 110 */ --fs-answer: clamp(2.5rem, 1.15rem + 5.7vw, 5.75rem); /* 40 → 92 */ --fs-h1: clamp(2.375rem, 1.4rem + 4.1vw, 4.5rem); /* 38 → 72 */ --fs-h2: clamp(1.875rem, 1.35rem + 2.3vw, 3rem); /* 30 → 48 */ --fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); /* 22 → 28 */ --fs-h4: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem); /* 18 → 21 */ --fs-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); /* 19 → 24 */ --fs-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); /* 17 → 19 */ --fs-small: .9375rem; --fs-micro: .8125rem; --fs-eyebrow: .75rem; --lh-display: 1.02; --lh-head: 1.1; --lh-snug: 1.32; --lh-body: 1.66; --ls-display: -.03em; --ls-head: -.02em; --ls-eyebrow: .16em; /* ====================================================================== 6 · RAUM Großzügiger Negativraum ist das wichtigste gemeinsame Gestaltungsmittel. Er verbindet die Welten stärker als jede Farbe. ====================================================================== */ --sp-3xs: .25rem; --sp-2xs: .5rem; --sp-xs: .75rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2rem; --sp-xl: 3rem; --sp-2xl: 4.5rem; --sp-3xl: 7rem; --section-y: clamp(5rem, 2.4rem + 9vw, 11rem); --section-y-s: clamp(3.5rem, 2rem + 5vw, 6.5rem); /* ====================================================================== 7 · RASTER UND MASSE ====================================================================== */ --w-full: 100%; --w-wide: 84rem; /* 1344 — Vollbreite mit Rand */ --w-page: 70rem; /* 1120 — Standardinhalt */ --w-text: 44rem; /* 704 — Lesetext, 62–68 Zeichen */ --w-narrow: 34rem; /* 544 — Formulare, Hinweise */ --gutter: clamp(1.25rem, .5rem + 3vw, 3rem); --grid-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); /* ====================================================================== 8 · FORM Money Plan rundet mit .5em. Das System bleibt in derselben Größenordnung zurückhaltend, damit kein Bruch entsteht — Pillen nur für Buttons. ====================================================================== */ --r-sm: 4px; --r-md: 8px; /* ≈ .5em bei 16px — dieselbe Sprache wie Money Plan */ --r-lg: 18px; --r-pill: 999px; --shadow-soft: 0 1px 2px rgba(23, 33, 43, .04), 0 10px 30px rgba(23, 33, 43, .06); --shadow-lift: 0 2px 6px rgba(23, 33, 43, .05), 0 22px 60px rgba(23, 33, 43, .12); /* ====================================================================== 9 · BEWEGUNG Eine gemeinsame Animationssprache: ruhig, organisch, fließend. Keine Bounces, keine Gaming-Hover, keine hektischen Zooms. 200–350 ms normale UI-Interaktion 800–1200 ms Weltwechsel und große Übergänge ====================================================================== */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --ease-line: cubic-bezier(.65, 0, .35, 1); --t-fast: 180ms; --t-base: 320ms; /* UI-Standard */ --t-slow: 620ms; --t-reveal: 900ms; /* Einblendung beim Scrollen */ --t-world: 1000ms; /* Weltwechsel */ --t-draw: 1150ms; /* Linienzeichnung, Kreisaufbau */ } /* ========================================================================== 10 · WELTEN-GELTUNGSBEREICHE Ein Element mit [data-world="mind"] oder [data-world-scope="mind"] färbt sich und alles darunter um. Komponenten lesen nur --accent* und müssen nie wissen, in welcher Welt sie stehen. Das ist der Mechanismus, der „drei Räume in derselben Welt" technisch möglich macht: eine Komponente, drei Stimmungen, kein Duplikat. --seg-1/2/3 sind die drei Verlaufsstufen des Drei-Welten-Rades, hell nach dunkel. Sie stehen getrennt von --accent*, weil --accent-strong eine Textrolle mit Kontrastpflicht hat und deshalb nicht frei nach Bildwirkung gewählt werden darf. Für Money Plan sind --seg-1/2/3 exakt die drei Blautöne der Live-Seite: das Segment IST die Money-Plan-Palette, nicht ihre Nachempfindung. */ :root[data-world='mind'], [data-world-scope='mind'] { --accent: var(--mind-primary); --accent-strong: var(--mind-primary-ink); --accent-second: var(--mind-secondary); --accent-third: var(--mind-deep); --accent-soft: var(--mind-soft); --accent-wash: var(--mind-wash); --accent-on: var(--mind-on); --world-deep: var(--mind-dark); --world-tint: var(--mind-cream); --seg-1: #c07a53; --seg-2: var(--mind-primary); --seg-3: var(--mind-deep); } :root[data-world='journey'], [data-world-scope='journey'] { --accent: var(--journey-primary); --accent-strong: var(--journey-primary-ink); --accent-second: var(--journey-gold); --accent-third: var(--journey-dark); --accent-soft: var(--journey-cream); --accent-wash: var(--journey-wash); --accent-on: var(--journey-on); --world-deep: var(--journey-dark); --world-tint: var(--journey-cream); --seg-1: #2c8188; --seg-2: var(--journey-primary); --seg-3: var(--journey-dark); } :root[data-world='money'], [data-world-scope='money'] { --accent: var(--money-primary); --accent-strong: var(--money-ink); --accent-second: var(--money-secondary); --accent-third: var(--money-dark); --accent-soft: var(--money-grey); --accent-wash: var(--money-wash); --accent-on: var(--money-on); --world-deep: var(--money-dark); --world-tint: var(--money-tint); --seg-1: var(--money-secondary); /* #7CA8D0 */ --seg-2: var(--money-primary); /* #4174A0 */ --seg-3: var(--money-dark); /* #143142 */ }