/* ============================================================================= Tischlerei Haas — Funnel-CI-Kit · tokens.css (aus dem kanonischen Skelett) ----------------------------------------------------------------------------- KANONISCHES TOKEN-VOKABULAR — die Namen sind agenturweit IDENTISCH, nur die WERTE sind pro Kunde gefüllt. Rollen NIE umbenennen, KEINE Rolle löschen, KEINE Kunden-eigene Rolle erfinden. Master im tischlerei-haas-router-Repo. Funnel tragen Kopien (funnel-deploy --kit-Gate). Standard: $HOME/repos/mog-lead-system/MOG-Funnel-CI-Kit-Standard.md Herkunft der Werte (Autoritäten): - Farben = Live-Scan tischlereihaas.at (Navy #0b121e 11×, Lime #b9d346 37×) + Designguide.pdf (Stammdaten) + /CI/ (T_HASS_COLORS) - Fonts = DIN 2014 (Hausschrift), self-hosted woff2 in ./fonts/ (aus Kunden-Bestand) - Charakter: kantig/präzise (gefräster Korpus) → Radius ~0, sparsame Schatten, KEINE Gradients - Stand: 2026-07-25 ============================================================================= */ /* ---- Webfonts — SELF-HOSTED (woff2 in ./fonts/). KEIN Google-Fonts-CDN. -------- */ @font-face{font-family:"DIN 2014";src:url("./fonts/din-2014-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"DIN 2014";src:url("./fonts/din-2014-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"DIN 2014";src:url("./fonts/din-2014-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:"DIN 2014";src:url("./fonts/din-2014-black.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;} :root{ /* ============================================================================ Palette: Haas Navy #0b121e (Primär/dunkel) · Haas Lime #b9d346 (CTA-Akzent) · Weiß. Lime ist Akzent, NICHT Flächenfarbe (Designguide). Keine Gradients, keine pastellige Aufweichung der Lime. Light-first (Website = weiße Flächen, Navy als Headline-/Dunkelsektion, Logo native auf Navy-Feld). ========================================================================== */ /* ---- Farben — Basis / Flächen -------------------------------------------- */ --c-bg: #ffffff; /* Seiten-Basis (weiß) */ --c-bg-surface: #f4f6f7; /* gehobene Sektion (zart kühl, kein Beige) */ --c-bg-panel: #eaeef1; /* Panel/Karte auf Surface */ --c-bg-tint: #fafbfc; /* zarter Wechsel-Ton (Zebra-Sektionen) */ --c-white: #ffffff; /* ---- Farben — Marke (Struktur/Sekundär) = Haas Navy ---------------------- */ --c-primary: #0b121e; /* Navy: Struktur, Headline-Flächen, sekundäre Buttons, Links */ --c-primary-dark: #070d16; /* dunkler: dunkelste Sektion / Topbar / Footer */ --c-primary-light: #2a3a4d; /* heller Slate: Icons, dezente Akzente auf Hell */ --c-primary-soft: rgba(11,18,30,.06); /* Navy-Fläche 6% (Hover, Badges) */ /* ---- Farben — CTA-Akzent (DISZIPLIN: nur primärer CTA + Selected) = Haas Lime */ --c-accent: #b9d346; /* Lime — primärer CTA, Quiz-Selected, Highlight */ --c-accent-hover: #a3bd30; /* Lime dunkler (Hover/Active) */ --c-on-accent: #0b121e; /* Navy AUF Lime (max. Kontrast, Lime ist hell) */ --c-accent-soft: rgba(185,211,70,.16); /* Lime-Fläche (Highlight, Badge) */ --c-accent-glow: rgba(11,18,30,.16); /* CTA-Schatten NEUTRAL navy (keine farbigen Schatten — Designguide) */ /* ---- Text auf Hell -------------------------------------------------------- */ --c-heading: #0b121e; /* Headlines = Navy */ --c-text: #22303d; /* Fließtext (Navy-Slate) */ --c-text-muted: #5b6b79; /* Sekundärtext, Captions */ --c-text-subtle: #8695a2; /* sehr leise (Meta, Hinweise) */ /* ---- Border --------------------------------------------------------------- */ --c-border: #dfe4e8; /* Standard-Rahmen (Karten, Inputs) */ --c-border-strong: #c3ccd3; /* betonter Rahmen (Selected-Rand, Trenner) */ /* ---- Text/Flächen auf Dunkel (Navy-Bänder, Footer, Overlays) -------------- */ --c-on-dark-bg: #0b121e; --c-on-dark-heading: #ffffff; --c-on-dark-text: rgba(255,255,255,.90); --c-on-dark-muted: rgba(255,255,255,.64); --c-on-dark-border: rgba(255,255,255,.14); /* ---- Verläufe (Marke) — Designguide: KEINE Gradients → flach Navy halten --- */ --grad-brand: linear-gradient(0deg, var(--c-primary) 0%, var(--c-primary) 100%); /* ---- Funktionale States (nicht Marke, aber Pflicht für Formulare) --------- */ --c-focus: var(--c-primary); /* Fokus-Ring = Navy */ --c-error: #c0392b; --c-error-soft: rgba(192,57,43,.10); --c-success: #2e7d5b; --c-success-soft: rgba(46,125,91,.10); /* ---- Typografie — Familien (self-hosted DIN 2014) ------------------------ */ --font-head: "DIN 2014","DIN Pro","DIN","Helvetica Neue",Arial,sans-serif; --font-body: "DIN 2014","DIN Pro","DIN","Helvetica Neue",Arial,sans-serif; --font-eyebrow: "DIN 2014","DIN Pro","DIN","Helvetica Neue",Arial,sans-serif; /* 500/700, VERSALIEN */ /* ---- Typografie — Gewichte (DIN: 400/500/700/800; kein echtes 300) -------- */ --fw-light: 400; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* ---- Typografie — Scale (mobile→desktop via clamp) ------------------------ */ --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: .16em; /* DIN-Versalien mit moderater Laufweite */ /* ---- 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 (Marken-Charakter: kantig/präzise — Designguide 0–4px) -------- */ --r-xs: 2px; --r-input: 0px; --r-btn: 0px; /* CTA/Buttons: gerade Kanten (Tischler-Charakter) */ --r-card: 2px; /* Karten, Quiz-Optionen, Panels: nahezu kantig */ --r-pill: 999px; /* Chips/Badges/Zähler bleiben rund (Affordanz) */ --r-round: 50%; /* ---- Schatten (Designguide: sehr sparsam, weich, KEINE farbigen/Glow) ----- */ --sh-xs: 0 1px 2px rgba(11,18,30,.05); --sh-card: 0 2px 8px rgba(11,18,30,.08); --sh-lift: 0 6px 20px rgba(11,18,30,.12); --sh-cta: 0 4px 14px rgba(11,18,30,.16); /* neutral navy, kein Lime-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. Belegt an energy-for-people-tf002: 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 Komponentenklassen. Lastenheft #341. */ @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-normal); 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; } img,svg,video{ max-width:100%; height:auto; display:block; } a{ color:var(--c-primary); } :focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; } }