/* ============================================================================= VNR Group — Bluechip Trading KI — Funnel-CI-Kit · tokens.css (aus dem kanonischen Skelett) ----------------------------------------------------------------------------- KANONISCHES TOKEN-VOKABULAR — die Namen sind agenturweit IDENTISCH, nur die WERTE werden pro Kunde gefüllt. Rollen NIE umbenennen, KEINE Rolle löschen, KEINE Kunden-eigene Rolle erfinden (sonst driften die Kits — genau das soll dieses Skelett verhindern). Fehlt ein Wert im Marken-Material → aus Live-Scan ableiten oder mit Berni klären, NICHT raten. VNR ist ein Multi-Marken-Kunde (mehrere Produktmarken, je eigenes CI) — dieses Kit gilt NUR für die Produktmarke "Bluechip Trading KI", nicht für vnr-verlag als Ganzes. Ausnahme dokumentiert in MOG-Funnel-CI-Kit-Standard.md §1. Master in diesem Router-Repo unter assets/bluechip-trading-ki/. Funnel dieser Produktmarke tragen Kopien (funnel-deploy --kit-Gate). Standard: $HOME/repos/mog-lead-system/MOG-Funnel-CI-Kit-Standard.md Herkunft der Werte (Autoritäten): - Farben = offizielles Brand-Manual "BLU_Manual_2025_V01.1" (Januar 2025, Timo Fecher/Crossfeyer), Kapitel "Farbwelt" — Primär #1E4696, Sekundär #28AAAA, Zusatz #F000F0/#0A3264/#000000/#FFFFFF. Alle abgeleiteten Werte unten (Elevation-Stufen, Hover-Töne) sind reine HSL-Aufhellungen/-Abdunklungen dieser vier Manual-Farben, keine neu erfundenen Töne. - Fonts = Manual Kapitel "Typografie": Google Font "Raleway" — Bold/Versalien für Überschriften, Light für Fließtext. Self-hosted als woff2 (Google Fonts API gezogen, NICHT CDN-verlinkt — Consent-Pflicht). - Theme = Dark-first: das Manual selbst ist auf dunklem Navy-Verlauf gestaltet (jede Manual-Seite hat #0A3264-Hintergrund), Logo ist für dunklen Hintergrund ausgelegt (weißes "K"). Deshalb sind hier — anders als im light-first-Skelett- Kommentar beschrieben — --c-bg/--c-heading/--c-text bereits die DUNKLEN Standardwerte; die Gruppe "Text/Flächen auf Dunkel" (für Bänder in einer sonst hellen Seite) fällt in einem durchgehend dunklen Theme praktisch mit den Haupt-Text-Tokens zusammen und ist entsprechend nah an ihnen befüllt. - Kontrast-Gate (Schritt 10 im ci-kit-erstellen-Runbook): alle Text/Hintergrund- Paare unten wurden gegen WCAG AA (4,5:1) gerechnet, siehe Werte in den Kommentaren. --c-on-accent auf dem Teal-Akzent musste dafür dunkel statt weiß gesetzt werden (weiß auf #28AAAA liegt nur bei 2,83:1). - Stand: 2026-08-27 ============================================================================= */ /* ---- Webfonts — SELF-HOSTED (woff2 in ./fonts/). KEIN Google-Fonts-CDN (leakt IP vor Consent, Preflight-Blockliste). Raleway: Light (Fließtext) + Bold (Überschriften/Hervorhebungen) — die zwei Schnitte, die das Manual nennt. -------- */ @font-face{font-family:"Raleway";src:url("./fonts/raleway-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;} @font-face{font-family:"Raleway";src:url("./fonts/raleway-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Raleway";src:url("./fonts/raleway-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} :root{ /* ---- Farben — Basis / Flächen (dark-first) ------------------------------- Manual-Navy #0A3264 ist die "Zusatz"-Farbe, auf der jede Manual-Seite selbst aufgebaut ist — hier als --c-bg-surface (mittlere Elevation) verwendet; --c-bg (Seiten-Basis) ist eine reine HSL-Abdunklung desselben Tons (dunkler = mehr Tiefe, analog silberstern-Kit-Praxis), --c-bg-panel/--c-bg-tint sind Aufhellungen desselben Tons Richtung --c-primary. Keine neuen Farbwerte. --- */ --c-bg: #061c37; /* Seiten-Basis — Navy abgedunkelt (Kontrast-Basis, s. u.) */ --c-bg-surface: #0a3264; /* Manual-Navy pur — gehobene Sektion */ --c-bg-panel: #0e4487; /* Panel/Karte auf Surface — Navy Richtung Primär aufgehellt */ --c-bg-tint: #08264b; /* zarter Wechsel-Ton (Zebra-Sektionen) */ --c-white: #ffffff; /* ---- Farben — Marke (Struktur/Sekundär) ---------------------------------- */ --c-primary: #1e4696; /* Manual PRIMÄR — Struktur, sekundäre Buttons, Links */ --c-primary-dark: #16326c; /* dunkler: Headlines auf hell, Marken-Bänder */ --c-primary-light: #295ecb; /* heller: Icons, dezente Akzente */ --c-primary-soft: rgba(30,70,150,.16); /* Marken-Fläche (Hover, Badges) — auf Dunkel etwas kräftiger als 10% */ /* ---- Farben — CTA-Akzent (DISZIPLIN: nur primärer CTA + Selected) --------- Manual SEKUNDÄR (#28AAAA, Teal) ist hier bewusst der CTA-Akzent, nicht die Struktur-Farbe — Teal ist der einzige Ton im Manual, der auf dem dunklen Navy-Hintergrund als klarer Blickfang funktioniert (6,04:1 auf --c-bg). --- */ --c-accent: #28aaaa; /* Manual SEKUNDÄR — CTA-Akzent, Quiz-Selected, Fokus-Pop */ --c-accent-hover: #1f8585; /* Akzent dunkler (Hover/Active) */ --c-on-accent: #0a1a2e; /* Text AUF dem Akzent — dunkel, nicht weiß: weiß/Teal liegt nur bei 2,83:1, dunkel/Teal bei 6,18:1 (WCAG-AA-Pflicht) */ --c-accent-soft: rgba(40,170,170,.16); /* Akzent-Fläche (Highlight, Badge) */ --c-accent-glow: rgba(40,170,170,.42); /* Akzent-Schein (CTA-Schatten) */ /* ---- Text (dark-first: Standardtext ist hell, s. Theme-Hinweis oben) ------ Kontrast gegen --c-bg (#061c37): weiß 17,1:1 · muted 11,3:1 · subtle 6,7:1 — alle klar über WCAG-AA (4,5:1). subtle gegen --c-bg-surface: 4,95:1, ebenfalls AA. */ --c-heading: #ffffff; /* Headlines */ --c-text: #f2f2f2; /* Fließtext */ --c-text-muted: #c9d3e0; /* Sekundärtext, Captions */ --c-text-subtle: #93a3ba; /* sehr leise (Meta, Hinweise) */ /* ---- Border --------------------------------------------------------------- */ --c-border: rgba(255,255,255,.14); /* Standard-Rahmen (Karten, Inputs) */ --c-border-strong: rgba(255,255,255,.28); /* betonter Rahmen (Selected-Rand, Trenner) */ /* ---- Text/Flächen auf Dunkel (Marken-Bänder, Footer, Overlays) ------------ In diesem durchgehend dunklen Theme praktisch deckungsgleich mit den Haupt-Text-Tokens oben — kein zweites, helles Theme vorhanden (s. Theme-Hinweis). */ --c-on-dark-bg: #04162c; /* noch dunkleres Band (Footer) — Abdunklung von --c-bg */ --c-on-dark-heading: #ffffff; --c-on-dark-text: rgba(255,255,255,.92); --c-on-dark-muted: rgba(255,255,255,.68); --c-on-dark-border: rgba(255,255,255,.16); /* ---- Verläufe (Marke) — Hero/Bänder wärmer als flache Fläche -------------- */ --grad-brand: linear-gradient(155deg, var(--c-primary) 0%, var(--c-bg) 100%); /* ---- Funktionale States (nicht Marke, aber Pflicht für Formulare) --------- */ --c-focus: var(--c-accent); /* Fokus-Ring — Akzent, auf Dunkel besser sichtbar als Primär */ --c-error: #e0554a; --c-error-soft: rgba(224,85,74,.16); --c-success: #3fae82; --c-success-soft: rgba(63,174,130,.16); /* ---- Typografie — Familien (self-hosted) --------------------------------- */ --font-head: "Raleway","Segoe UI",system-ui,-apple-system,Arial,sans-serif; --font-body: "Raleway","Segoe UI",system-ui,-apple-system,Arial,sans-serif; --font-eyebrow: "Raleway","Segoe UI",system-ui,Arial,sans-serif; /* Bold, VERSALIEN — Manual: Kapitelüberschriften */ /* ---- Typografie — Gewichte ------------------------------------------------ Manual nennt nur zwei Schnitte: Light (Fließtext) und Bold (Überschriften). --fw-medium bleibt auf 400 (Regular), da kein Medium-Schnitt im Manual steht. */ --fw-light: 300; --fw-normal: 400; --fw-medium: 400; --fw-bold: 700; /* ---- Typografie — Scale (mobile→desktop via clamp; Verhältnis aus Manual- Beispiel 40pt/20pt/12pt ≈ 2:1:0.6 übernommen, absolute Werte an Web-Scale angepasst) - */ --fs-display: clamp(2.25rem, 6vw, 3.5rem); --fs-h1: clamp(1.875rem,5vw, 2.75rem); --fs-h2: clamp(1.5rem, 3.6vw, 2.125rem); --fs-h3: clamp(1.25rem, 2.6vw, 1.5rem); --fs-lead: clamp(1.0625rem,1.8vw,1.25rem); --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.875rem; /* 14px */ --fs-caption: 0.75rem; /* 12px */ --lh-tight: 1.14; --lh-head: 1.24; --lh-body: 1.6; --ls-tight: -.015em; --ls-eyebrow: .14em; /* ---- Spacing (8px-Scale — agenturweit gleich, NICHT pro Kunde ändern) ----- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --section-y: clamp(3rem, 7vw, 5.5rem); --gutter: clamp(1rem, 4vw, 1.5rem); --container: 1120px; --container-narrow: 720px; /* ---- Radius — Logo/Chip-Formsprache im Manual ist eckig/technisch (Chip- Rahmen um "K", scharfe Balken) — Radius entsprechend zurückhaltend gehalten. */ --r-xs: 4px; --r-input: 8px; --r-btn: 8px; /* CTA/Buttons */ --r-card: 12px; /* Karten, Quiz-Optionen, Panels */ --r-pill: 999px; /* Chips/Badges */ --r-round: 50%; /* ---- Schatten (dark-tauglich — dunklere, weichere Ausbreitung) ------------ */ --sh-xs: 0 1px 2px rgba(0,0,0,.24); --sh-card: 0 4px 16px rgba(0,0,0,.32); --sh-lift: 0 10px 30px rgba(0,0,0,.42); --sh-cta: 0 8px 24px var(--c-accent-glow); /* ---- Motion --------------------------------------------------------------- */ --dur: .18s; --ease: cubic-bezier(.2,.7,.2,1); /* ---- Layout-Konstanten ---------------------------------------------------- */ --tap-min: 48px; --z-header: 30; --z-sticky-cta: 40; --z-overlay: 60; --z-modal: 70; } /* ---- Reduced Motion respektieren ------------------------------------------- */ @media (prefers-reduced-motion: reduce){ /* Schaltet Bewegung wirklich ab statt sie nur zu daempfen: Das alte `--dur: .001s` griff NUR bei Transitions, die var(--dur) benutzen — fest notierte Dauern (.sticky-cta .3s, .quiz__bar .4s, .btn.is-loading .6s infinite, .live-dot 1.4s infinite) liefen trotz aktivierter Systemeinstellung weiter. Lastenheft #205. */ :root{ --dur: .001s; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ---- Basis-Defaults (jeder Funnel erbt) ----------------------------------- */ /* In @layer base: Tailwind (bei React/TanStack-Funneln) rendert seine Utilities in @layer utilities, die per Cascade-Layer-Spec IMMER gewinnt gegen unlayered CSS — unabhaengig von Spezifitaet. Laege dieser Block unlayered da (wie vor 2026-08-24), schlaegt er JEDE Tailwind-Hoehen-/Breiten-Utility auf img/svg/video, auch h-8/h-10 am Logo. Belegt an energy-for-people-tf002/vorfuehrung/quiz: Logo- mit className "h-8 md:h-10" rendert live bei 229px statt 40px Hoehe. Statische Funnel ohne Tailwind sind unberuehrt — dort gewinnt weiterhin die hoehere Spezifitaet von .site-header__logo img wie unten dokumentiert. */ @layer base { *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; height:100%; } body{ margin:0; background:var(--c-bg); color:var(--c-text); font-family:var(--font-body); font-weight:var(--fw-light); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* Sticky-Footer: min-height:100vh + flex-column + margin-top:auto auf dem Footer (letztes Kind) schiebt ihn ans Viewport-Ende, auch wenn der Seiteninhalt kuerzer als der Bildschirm ist -- sonst haengt der Footer bei kurzen Seiten irgendwo in der Bildschirmmitte statt ganz unten. Faellt bei langem Inhalt automatisch zurueck auf normales Scrollen. */ min-height:100vh; display:flex; flex-direction:column; } body > footer.site-footer{ margin-top:auto; } /* height:auto ist PFLICHT, nicht Kosmetik: Ohne sie deckelt max-width zwar die Breite, die Hoehe bleibt aber beim HTML-height-Attribut stehen — das Bild wird gestaucht, sobald der Platz schmaler ist als das width-Attribut (auf Mobil praktisch immer). Belegt am 2026-08-16 an dpengineering-tf001: ingenieur-foto.jpg (1799x1200, Attribute 480x320) lief auf 390px als 358x320 statt 358x239 — 25% Verzerrung im Gesicht eines Menschen. Bilder, die bewusst eine feste Hoehe brauchen, setzen sie per Klasse (.img-cover, .site-header__logo img) und schlagen diese Elementregel ohnehin. */ img,svg,video{ max-width:100%; height:auto; display:block; } a{ color:var(--c-accent); } :focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; } }