/* ============================================================ thaeven-web — DESIGN-SYSTEM (Tokens + Basis-Primitives) ------------------------------------------------------------ Fortsetzung von Panel 2 ("thaeven-web") der Mutter thaeven.com. Stil-Welt: dark/platin, cinematic — JETZT mit Cyan-Akzent (wie THAEVEN KI-Assistent) + Dark/Light-Theme-System. Zwei Token-Sets: :root,[data-theme="dark"] = Default (Marken-Welt: dark + Cyan) [data-theme="light"] = überschreibt NUR Farb-/Glow-Tokens WICHTIG: Diese Datei enthält NUR Tokens + Basis-Primitives (Reset, .wrap, Typo-Skala, Button-System, .rv-Reveal-Utility). Akzent-Ableitungen IMMER aus --accent-rgb (eine Quelle), damit der Theme-Wechsel automatisch greift. ============================================================ */ :root, [data-theme="dark"]{ /* ============================================================ DARK-MODE (Default = Marken-Welt: dark/platin + Cyan-Akzent) ============================================================ */ /* ---- FLÄCHEN / TEXT (Ink-Grund, platin) ---- */ --bg: #08080A; /* Ink-Grund */ --bg-2: #0E0E12; /* erhöhte Fläche / Karte */ --ink: #F4F4F2; /* Text auf dunkel */ --muted: rgba(244,244,242,.46); /* sekundärer Text */ --line: rgba(244,244,242,.10); /* Hairlines / Rahmen */ /* ---- AKZENT (CYAN/TÜRKIS — Theos leuchtende Augen) ---- Dezent-edel, kein Neon: leuchtendes Cyan auf Ink. Die platin/weiße Grundstimmung bleibt; Cyan ist der Akzent (Eyebrows, Links, CTA-Glow, Highlights, aktive Nav). Alle Cyan-Tints leiten sich hieraus ab. */ --accent: #45D6E8; /* Marken-Cyan (Dark) */ --accent-2: #7FE6F2; /* helleres Cyan (Gradient-Top, Highlights) */ --accent-deep: #2BB6C8; /* tieferes Cyan (Gradient-Boden, Hover) */ --glow: rgba(69,214,232,.85); /* Cyan-Glow (Dots/Cores) */ --accent-rgb: 69,214,232; /* für rgba()-Ableitungen (eine Quelle) */ --ease: cubic-bezier(.7,0,.2,1); /* Signatur-Easing der Marke */ /* ---- ABGELEITETE SEMANTISCHE FARB-TOKENS ---- */ --bg-3: #131318; /* Karte „erhabener" (Preis-Karten) */ --ink-2: rgba(244,244,242,.72); /* Fließtext (zwischen ink & muted) */ --line-strong: rgba(244,244,242,.18); /* aktiver Rahmen / Fokus-Hairline */ /* Cyan-Tints (Flächen/Ränder) — aus --accent-rgb abgeleitet, eine Quelle */ --accent-soft: rgba(var(--accent-rgb), .12); /* Akzent-Fläche dezent (Badge/Toggle-Pill) */ --accent-line: rgba(var(--accent-rgb), .28); /* Akzent-Rahmen (Icon-Kachel, Status-Pill) */ --accent-line-2: rgba(var(--accent-rgb), .45); /* stärkerer Akzent-Rahmen (Hover/aktive Karte) */ --accent-hover: rgba(var(--accent-rgb), .08); /* Akzent-Fläche on hover (Ghost-Button) */ --accent-ink: #04181C; /* Text AUF Akzent-Flächen (dunkles Teal-Schwarz) */ /* Akzent-Verlauf für gefüllte Akzent-Flächen (Primary-Button, Badges, Preis-Zahl) — Cyan statt Weiß→Platin, damit die Seite Farbe bekommt. */ --accent-grad: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); --scrim: rgba(8,8,10,.72); /* Lese-Scrim über bewegtem Bild */ --gift-gold: #E7C994; /* warmer Platin-Stich NUR für „geschenkt"-Stempel (einziger warmer Akzent, sparsam, Verlustaversion) */ /* Demo-Media-Tint (Hero-Mauer/Galerie) — über Token, im Light dezenter graden */ --demo-tint: rgba(var(--accent-rgb), .10); /* Platin/Cyan-Overlay über Screenshots */ --demo-scrim-1:rgba(8,8,10,.10); /* Demo-Media Scrim oben */ --demo-scrim-2:rgba(8,8,10,.42); /* Demo-Media Scrim Boden */ --demo-vignette:rgba(8,8,10,.62); /* Demo-Media Vignette */ --demo-filter: saturate(.80) brightness(.90) contrast(1.03); /* Ruhe-Grade */ --demo-label-grad: linear-gradient(0deg, rgba(8,8,10,.86), rgba(8,8,10,.20) 70%, transparent); /* Logo-Filter: Dark = weißes Mark unverändert sichtbar. */ --logo-filter: none; --btn-ghost-bg: rgba(244,244,242,.03); /* Ghost-Button Grundfläche (neutral, dezent) */ --header-bg: rgba(8,8,10,.72); /* angedockter Header */ --header-bg-2: rgba(8,8,10,.92); /* mobiles Nav-Panel (deckender) */ --drop-bg: rgba(14,14,18,.94); /* Produkte-Dropdown-Panel */ --drop-bg-sub: rgba(8,8,10,.45); /* Dropdown-Accordion (Mobile) */ --card-translucent: rgba(14,14,18,.5); /* Roadmap-Karte (halbtransparent) */ --card-translucent-2: rgba(19,19,24,.7); /* Roadmap-Karte Hover */ --chip-bg: rgba(244,244,242,.02); /* Chip-Grundfläche */ /* Fehler/Danger (Formular) — auf Dunkel hell genug */ --danger: #E7A4A4; --danger-2: #F0C9C9; --danger-line: rgba(231,164,164,.5); --danger-soft: rgba(231,164,164,.06); /* Atmosphäre-Hintergrund des Body (radiale Glows) */ --body-grad-1: rgba(var(--accent-rgb), .055); --body-grad-2: rgba(150,180,205,.05); /* ---- EASING-KURVEN ---- */ --ease-brand: cubic-bezier(.7,0,.2,1); /* = Mutter --ease (Reveals, Slides) */ --ease-out: cubic-bezier(.16,1,.3,1); /* sanftes Auslaufen (Hover, kleine UI) */ --ease-spring: cubic-bezier(.34,1.56,.64,1);/* leichter Overshoot (Stempel/Pill „rastet ein") */ /* ---- TYPO ---- */ /* Font = System-UI-Stack wie Mutter (KEINE Google-Fonts laden → identisches Schriftgefühl wie thaeven.com, schnell, datenschutzfreundlich, kein Bodoni/Didone). Display = derselbe Stack, nur Gewicht/Tracking trägt die „Persönlichkeit": eng, schwer, negatives Tracking = teuer/cinematic. */ --font-sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace; /* Preise, %, Tab-Zahlen */ /* Fluide Type-Scale (clamp, mobil→3440 deckt). Display eng & schwer. */ --fs-display: clamp(2.6rem, 1.4rem + 5.4vw, 6.2rem); /* Hero-H1 */ --fs-h2: clamp(1.9rem, 1.2rem + 2.9vw, 3.4rem); /* Sektions-H2 */ --fs-h3: clamp(1.2rem, 1.0rem + 0.9vw, 1.6rem); /* Karten-Titel */ --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); /* Intro-/Sub-Text */ --fs-body: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);/* Fließtext */ --fs-small: clamp(0.84rem, 0.82rem + 0.1vw, 0.92rem);/* Microcopy */ --fs-eyebrow: clamp(0.7rem, 0.68rem + 0.1vw, 0.78rem); /* Kicker (gesperrt) */ --fs-price: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); /* große Preis-Zahl */ --lh-tight: 1.04; /* Display */ --lh-snug: 1.18; /* H2/H3 */ --lh-body: 1.62; /* Fließtext (luftig, Lesbarkeit) */ --track-tight:-0.02em;/* Display: enges, teures Tracking */ --track-wide: 0.34em; /* Eyebrow/Phase: gesperrt wie Mutter-Loader */ /* ---- SPACING-SCALE (8er-Basis, fluide Sektions-Schritte) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-section: clamp(4.5rem, 3rem + 6vw, 9rem); /* vertikaler Sektions-Rhythmus */ --gutter: clamp(1.25rem, 0.8rem + 2.4vw, 3rem); /* horizontaler Seitenrand */ /* ---- CONTAINER-STUFEN (Wide-Guard: koppeln, nicht strecken) ---- */ --wrap-narrow: 720px; /* Lese-Spalten (Problem-Text, Roadmap-Intro) */ --wrap: 1200px; /* Standard-Inhaltsbreite */ --wrap-wide: 1440px; /* Galerie / Preis-Grid */ --wrap-ultra: 1680px; /* eigene Stufe ab ~2560/3440 (kein 1440-Strecken) */ /* ---- RADIUS ---- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- SCHATTEN / GLOW-STUFEN ---- */ --sh-1: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35); --sh-2: 0 2px 0 rgba(255,255,255,.04), 0 18px 48px rgba(0,0,0,.5); --sh-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px rgba(0,0,0,.55); --glow-1: 0 0 18px rgba(var(--accent-rgb),.20); --glow-2: 0 0 0 1px rgba(var(--accent-rgb),.18), 0 0 34px rgba(var(--accent-rgb),.24); --glow-gift: 0 0 0 1px rgba(231,201,148,.30), 0 0 28px rgba(231,201,148,.20); /* ---- HEADER-HÖHE = schlanker dunkler Menü-/Blur-Balken (JS misst hdr.offsetHeight → top:var(--header-h) für Anker/Sticky). Horizontales Lockup (Symbol ~36px + Wortmarke) sitzt normal vertikal zentriert IM Balken — kein Überstand mehr nötig. ---- */ --header-h: 76px; --logo-mark-h: 38px; /* Höhe der Bildmarke (Säulen-Symbol) im Lockup */ --logo-wm-name-h: 17px; /* Höhe Wortmarke „THAEVEN" (echte Serifenschrift) */ --logo-wm-web-h: 9px; /* Höhe Wortmarke „" */ /* ---- MOTION-DAUERN ---- */ --d-fast: .28s; --d-mid: .5s; --d-slow: .8s; } /* ============================================================ LIGHT-MODE — überschreibt NUR die Farb-/Glow-Tokens. Spacing/Type/Radius/Motion bleiben (kommen aus :root). Helle, warm-neutrale Basis + Light-taugliche Cyan-Variante (tieferes Teal, damit es auf Hell lesbar & WCAG-tauglich ist). Glows/Schatten dezenter; Demo-Screenshots dezenter graden. ============================================================ */ [data-theme="light"]{ /* ---- FLÄCHEN / TEXT ---- */ --bg: #F4F5F7; /* warm-neutrale, helle Basis */ --bg-2: #FFFFFF; /* Panel/Karte (rein weiß) */ --bg-3: #FBFCFD; /* erhabene Karte (Preis/Input) */ --ink: #0E1116; /* Haupttext (dunkel) */ --muted: rgba(14,17,22,.52); /* sekundärer Text */ --ink-2: rgba(14,17,22,.74); /* Fließtext */ --line: rgba(14,17,22,.12); /* Hairlines / Rahmen */ --line-strong: rgba(14,17,22,.22); /* aktiver Rahmen / Fokus-Hairline */ /* ---- AKZENT (Light-Cyan: tieferes Teal für Kontrast auf Hell, WCAG-AA) ---- #0B7C8A trägt Text auf #F4F5F7 mit 4.5:1 (Normaltext) und Weiß-auf-Akzent mit 4.9:1 (Button) — beides AA. Ein lebendiges, edles Teal, kein Grau. */ --accent: #0B7C8A; /* lesbares Teal auf Hell (Text/Links/Eyebrow) */ --accent-2: #0E96A8; /* helleres Teal (Gradient-Top, dezente Highlights) */ --accent-deep: #086470; /* tieferes Teal (Gradient-Boden/Hover) */ --glow: rgba(11,124,138,.50); /* dezenterer Teal-Glow */ --accent-rgb: 11,124,138; /* Light-Teal rgb für Ableitungen */ /* Cyan-Tints — auf Hell etwas kräftiger nötig, damit sie sichtbar bleiben */ --accent-soft: rgba(var(--accent-rgb), .10); --accent-line: rgba(var(--accent-rgb), .30); --accent-line-2: rgba(var(--accent-rgb), .42); --accent-hover: rgba(var(--accent-rgb), .10); --accent-ink: #FFFFFF; /* Text AUF gefülltem Teal = weiß */ /* Button-Verlauf auf Hell: enger gehalten (Akzent → tiefer), damit Weiß über die GANZE Fläche ≥4.5:1 trägt (auch oben). */ --accent-grad: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); --scrim: rgba(244,245,247,.72); /* Demo-Media auf Hell: dezenter graden (nicht zu hart abdunkeln) — Screenshots dürfen hell & freundlich wirken, leichte Teal-Tönung. */ --demo-tint: rgba(var(--accent-rgb), .06); --demo-scrim-1:rgba(14,17,22,.02); --demo-scrim-2:rgba(14,17,22,.14); --demo-vignette:rgba(14,17,22,.16); --demo-filter: saturate(.94) brightness(1.0) contrast(1.0); --demo-label-grad: linear-gradient(0deg, rgba(14,17,22,.74), rgba(14,17,22,.16) 70%, transparent); /* Logo: weißes Mark → im Light dunkel einfärben (invert + leichte Tonkorrektur), Wortmarke bekommt --ink über die Komponente. */ --logo-filter: invert(1) brightness(.18) saturate(0); --btn-ghost-bg: rgba(14,17,22,.025); /* Ghost-Button Grundfläche auf Hell */ --header-bg: rgba(255,255,255,.78); /* angedockter Header auf Hell */ --header-bg-2: rgba(255,255,255,.94); /* mobiles Nav-Panel auf Hell */ --drop-bg: rgba(255,255,255,.96); /* Produkte-Dropdown auf Hell */ --drop-bg-sub: rgba(244,245,247,.7); /* Dropdown-Accordion (Mobile) */ --card-translucent: #FFFFFF; /* Roadmap-Karte (deckend weiß) */ --card-translucent-2: #FBFCFD; /* Roadmap-Karte Hover */ --chip-bg: rgba(14,17,22,.03); /* Chip-Grundfläche auf Hell */ /* Fehler/Danger — auf Hell dunkler/lesbar */ --danger: #B23B3B; --danger-2: #B23B3B; --danger-line: rgba(178,59,59,.45); --danger-soft: rgba(178,59,59,.06); /* ---- SCHATTEN / GLOW (im Light dezenter, nicht „leuchtend") ---- */ --sh-1: 0 1px 2px rgba(14,17,22,.05), 0 8px 22px rgba(14,17,22,.07); --sh-2: 0 2px 4px rgba(14,17,22,.06), 0 18px 44px rgba(14,17,22,.10); --sh-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 44px rgba(14,17,22,.08); --glow-1: 0 0 14px rgba(var(--accent-rgb), .14); --glow-2: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 6px 22px rgba(var(--accent-rgb), .16); --glow-gift: 0 0 0 1px rgba(176,135,70,.30), 0 6px 20px rgba(176,135,70,.16); --gift-gold: #9A7430; /* Gold auf Hell dunkler/lesbar */ --body-grad-1: rgba(var(--accent-rgb), .05); --body-grad-2: rgba(120,150,175,.05); } /* ============================================================ RESET / BASIS ============================================================ */ *{ box-sizing:border-box; margin:0; padding:0; } html{ /* Sticky/Smooth-Scroll-Schutz: clip (NICHT hidden), nur auf html. Kein overflow:hidden-Vorfahr — sonst klebt kein sticky. */ overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:auto; /* Smooth übernimmt Lenis; native Anker bleiben aus */ } body{ /* Atmosphäre wie Mutter, jetzt mit Cyan-Stich (Dark) bzw. dezent (Light) */ background: radial-gradient(60% 50% at 50% -2%, var(--body-grad-1), transparent 60%), radial-gradient(55% 60% at 82% 102%, var(--body-grad-2), transparent 70%), var(--bg); background-attachment: fixed; color:var(--ink); font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100%; transition: background-color var(--d-mid) var(--ease-out), color var(--d-mid) var(--ease-out); } img, svg, video, canvas{ display:block; max-width:100%; } /* replaced elements: explizit 100% (inset:0 streckt sie NICHT → Rand-Leak ≥3440) */ .media-cover{ width:100%; height:100%; object-fit:cover; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs); } /* ============================================================ LAYOUT-PRIMITIVES ============================================================ */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); } .wrap--narrow{ max-width:var(--wrap-narrow); } .wrap--wide{ max-width:var(--wrap-wide); } .wrap--ultra{ max-width:var(--wrap-ultra); } .section{ padding-block:var(--sp-section); position:relative; } /* Hairline-Trenner im Marken-Look */ .hairline{ border:0; height:1px; background:var(--line); } /* ============================================================ TYPO-SKALA (Primitives — keine globale h1/h2/h3-FARBE setzen! Hero-Text wird im Builder lokal erzwungen, damit keine Kaskade den Hero überschreibt — siehe second-brain global-heading-color.) ============================================================ */ .eyebrow{ font-size:var(--fs-eyebrow); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--accent); font-weight:600; /* Eyebrow-Sparsamkeit: nur 1× pro Sektion, nie dekorativ stapeln */ } .display{ font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--track-tight); font-weight:680; /* schwer = teuer/cinematic (System-Stack trägt das) */ text-wrap:balance; } .h2{ font-size:var(--fs-h2); line-height:var(--lh-snug); letter-spacing:-0.015em; font-weight:640; text-wrap:balance; } .h3{ font-size:var(--fs-h3); line-height:var(--lh-snug); letter-spacing:-0.01em; font-weight:600; } .lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); text-wrap:pretty; max-width:62ch; } .body{ font-size:var(--fs-body); color:var(--ink-2); } .muted{ color:var(--muted); } .small{ font-size:var(--fs-small); } .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.04em; } /* ============================================================ BUTTON-SYSTEM (Marken-Look: Pill, Hairline, Cyan-Glow on hover) .btn = sekundär (Ghost) · .btn--primary = gefüllt Akzent ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-size:var(--fs-small); letter-spacing:.06em; font-weight:600; padding:.95em 1.6em; border-radius:var(--r-pill); color:var(--ink); background:var(--btn-ghost-bg); border:1px solid var(--line); backdrop-filter:blur(6px); transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); will-change:transform; } .btn:hover{ background:var(--accent-hover); border-color:var(--accent-line-2); box-shadow:var(--glow-2); } .btn:active{ transform:translateY(1px); } .btn--primary{ color:var(--accent-ink); background:var(--accent-grad); border-color:transparent; box-shadow:var(--glow-1); } .btn--primary:hover{ background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent-deep) 100%); box-shadow:var(--glow-2); transform:translateY(-1px); } .btn--lg{ padding:1.1em 2em; font-size:var(--fs-body); } /* Pulsierender Akzent-Dot (wie Mutter „enter"-Button), für CTA-Hinweise */ .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--glow); animation:pulse 1.8s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(.8);} 50%{ opacity:1; transform:scale(1);} } /* ============================================================ REVEAL-UTILITY (.rv) — CSS + IntersectionObserver (robust, kein GSAP nötig) Builder vergibt .is-in via IO (once, threshold ~0.15). NICHT auf das LCP-Element (Hero-H1) anwenden — Hero revealt per eigener CSS-Keyframe, nie opacity:0-gegatet (sonst leerer Hero / kaputtes LCP). ============================================================ */ .rv{ opacity:0; transform:translateY(22px); transition: opacity var(--d-slow) var(--ease-brand), transform var(--d-slow) var(--ease-brand); will-change:opacity, transform; } .rv.is-in{ opacity:1; transform:none; } /* Gestaffelt (Listen/Karten): Builder setzt --rv-i je Kind */ .rv--stagger{ transition-delay: calc(var(--rv-i, 0) * 90ms); } /* Varianten */ .rv--left{ transform:translateX(-28px); } .rv--right{ transform:translateX(28px); } .rv--left.is-in, .rv--right.is-in{ transform:none; } .rv--scale{ transform:scale(.96); } .rv--scale.is-in{ transform:none; } /* Film-Grain-Hook (gegen glatten CGI-Look von KI-Bildern; optional pro Bildfläche) Builder kann .grain auf Medien-Container legen → ::after data-URI feTurbulence. */ .grain{ position:relative; isolation:isolate; } /* ============================================================ ACCESSIBILITY / MOTION ============================================================ */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; scroll-behavior:auto !important; } .rv{ opacity:1 !important; transform:none !important; } .dot{ animation:none !important; } } /* Touch/Mobile: maus-/canvas-/cursor-Effekte sind im Builder per @media (hover:none) bzw. (max-width:640px) AUS zu schalten (Performance). Hier nur der Grundsatz dokumentiert — die Effekt-Layer leben im Seiten-CSS. */