/* ============================================================ SITEBASE — Tech-Noir Direction Style entry: tokens → reset → layout → components → motion ============================================================ */ /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* ---------------------------------------------------------------- 01 · DESIGN TOKENS (tech-noir, dark-only) ---------------------------------------------------------------- */ :root { --bg: #000000; --surface: #060608; --text: #FFFFFF; --text-muted: rgba(255, 255, 255, 0.72); /* 12.9:1 ✅ */ --text-faint: rgba(255, 255, 255, 0.48); /* 8.7:1 ✅ */ --text-ghost: rgba(255, 255, 255, 0.18); /* code-glyph atmosphere */ --line: rgba(255, 255, 255, 0.92); --line-faint: rgba(255, 255, 255, 0.04); /* grid overlay */ /* Signature-Akzent: Champagner-Gold — die EINZIGE Akzentfarbe. 9.3:1 auf Schwarz (WCAG AA auch fuer Normaltext). Liest sich fuer lokale Betriebe als "etabliert/hochwertig" statt "Krypto/SaaS". */ --accent: #C9A86B; --accent-bright: #DDBE85; /* Hover/Active-Aufhellung */ --accent-soft: rgba(201, 168, 107, 0.55); --accent-glow: rgba(201, 168, 107, 0.16); /* EINE Glas-Sprache fuer Nav, Sticky-CTA, Modal, Mobile-Menue */ --glass-bg: rgba(8, 8, 11, 0.78); --glass-blur: blur(20px) saturate(160%); --glass-border: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.10); --border-hover: rgba(255, 255, 255, 0.40); --font-anchor: 'Fraunces', 'Source Serif Pro', Georgia, serif; --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --t-display: clamp(3rem, 1rem + 5.8vw, 8.5rem); --t-feature: clamp(2rem, 0.8rem + 2.2vw, 3.6rem); /* was up to 6rem — cut to 3.6 */ --t-title-lg: clamp(1.7rem, 1.1rem + 1.8vw, 2.8rem); /* Panel-/Feature-Titel */ --t-title: clamp(1.32rem, 1.02rem + 1vw, 1.9rem); /* mittlere Headline-Stufe (Karten/Demo/Modal) */ --t-label: 0.72rem; --t-body: clamp(0.95rem, 0.88rem + 0.35vw, 1.08rem); --space-section: clamp(3rem, 2.4rem + 3vw, 6rem); /* was up to 9rem — cut to 6 */ --space-section-tight: clamp(2.4rem, 1.8rem + 2vw, 4.5rem); --easing-out: cubic-bezier(0.22, 1, 0.36, 1); --easing-in: cubic-bezier(0.36, 0, 0.78, 0); --easing-inout: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 180ms; --d-normal: 320ms; --d-slow: 640ms; } /* ---------------------------------------------------------------- 02 · FONT FACES — self-hosted (DSGVO + Performance) Variable fonts: one woff2 per family covers all weights. Files: /public/fonts/ — see scripts/download-fonts.ps1 to fetch. ---------------------------------------------------------------- */ /* Fraunces — anchor serif, variable opsz 9..144, weight 300..700, italic too */ @font-face { font-family: 'Fraunces'; src: url('/public/fonts/Fraunces.woff2') format('woff2-variations'), url('/public/fonts/Fraunces.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; font-variation-settings: "opsz" 36, "SOFT" 50; } @font-face { font-family: 'Fraunces'; src: url('/public/fonts/Fraunces-Italic.woff2') format('woff2-variations'), url('/public/fonts/Fraunces-Italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; } /* Inter Tight — display sans, variable weight 200..800 */ @font-face { font-family: 'Inter Tight'; src: url('/public/fonts/InterTight.woff2') format('woff2-variations'), url('/public/fonts/InterTight.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } /* JetBrains Mono — variable weight 200..800 */ @font-face { font-family: 'JetBrains Mono'; src: url('/public/fonts/JetBrainsMono.woff2') format('woff2-variations'), url('/public/fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } /* ---------------------------------------------------------------- 03 · RESET (minimal) ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: auto; /* Lenis handles smooth scroll */ /* Root horizontal-scroll guard: the decorative hero atom rings bleed a few px past a narrow viewport. body already clips, but the scrollingElement is ; clip (not hidden) stops the bleed without creating a scroll container or breaking position:sticky / Lenis. */ overflow-x: clip; } /* Skip-Link — accessible-pattern: in Tab-Flow but visually transformed off-screen. `transform: translateY(-200%)` keeps it focusable; `top: -100px` would make some browsers skip it entirely. */ .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 10000; background: var(--text); color: var(--bg); padding: 0.85rem 1.2rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; text-decoration: none; /* Bulletproof-Hide: 0-Footprint statt transform:translateY(-200%). Letzteres lugte auf Mobile oben in den Viewport, weil Lenis den Scroll-Root transformiert und position:fixed dadurch bricht. Ein geclipptes 1px-Element kann nicht durchlugen, egal was der Scroll- Container macht — erst bei :focus wird es real sichtbar. */ width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link:focus, .skip-link:focus-visible { width: auto; height: auto; padding: 0.85rem 1.2rem; overflow: visible; clip: auto; clip-path: none; outline: 2px solid var(--accent); outline-offset: 3px; } body { background: var(--bg); color: var(--text); font-family: var(--font-display); font-size: var(--t-body); min-height: 100vh; overflow-x: clip; } img, video, svg, canvas { display: block; max-width: 100%; } button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } input, select, textarea { background: transparent; border: none; color: inherit; font: inherit; } ::selection { background: var(--accent); color: #000; } /* ---------------------------------------------------------------- 04 · TYPOGRAPHY UTILS ---------------------------------------------------------------- */ .t-display { font-family: var(--font-anchor); font-size: var(--t-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 50; /* Fraunces: high optical-size for display */ letter-spacing: -0.015em; line-height: 0.98; font-variant-ligatures: discretionary-ligatures; text-wrap: balance; } .t-feature { font-family: var(--font-anchor); font-size: var(--t-feature); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: -0.012em; line-height: 1.0; font-variant-ligatures: discretionary-ligatures; } .t-label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; line-height: 1.5; } .t-body { font-family: var(--font-display); font-size: var(--t-body); color: var(--text-muted); line-height: 1.65; max-width: 58ch; text-wrap: pretty; } /* ---------------------------------------------------------------- 04b · FOKUS — flaechige Tastatur-Fokus-States (WCAG 2.4.7) :where() = 0 Spezifitaet: komponenten-eigene Fokus-Styles gewinnen, aber KEIN interaktives Element bleibt mehr ohne sichtbaren Fokus. ---------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } :where(input, textarea):focus-visible { outline-offset: 1px; } /* ---------------------------------------------------------------- 05 · LAYOUT — main content scroll container ---------------------------------------------------------------- */ main { position: relative; z-index: 1; } section { position: relative; padding-block: var(--space-section); padding-inline: clamp(1.5rem, 4vw, 5vw); } .anchor-only { display: block; height: 0; } /* ---------------------------------------------------------------- 06 · LOADER — ENTFERNT (Phase 2, Etappe 1). Der opake Vollbild-Loader verdeckte den per Critical-CSS bereits fertig gerenderten Hero >1s lang für JEDEN Besucher und war damit das echte FCP/LCP-Gate. Die Entrance übernimmt der Hero selbst (GSAP-Reveal + data-boot-Pre-State, siehe Block 10 · HERO). ---------------------------------------------------------------- */ /* Custom cursor removed — native cursor stays visible */ #cursor { display: none !important; } /* ---------------------------------------------------------------- 08 · NAV ---------------------------------------------------------------- */ #nav { position: fixed; top: 0; inset-inline: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: 1.1rem clamp(1.5rem, 4vw, 3rem); z-index: 100; opacity: 0; /* JS fades in after hero */ transition: background var(--d-slow) ease, backdrop-filter var(--d-slow) ease, border-color var(--d-slow) ease, opacity var(--d-slow) ease; border-bottom: 1px solid transparent; } #nav.nav--ready { opacity: 1; } #nav.nav--scrolled { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom-color: var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } @supports not (backdrop-filter: blur(1px)) { #nav.nav--scrolled { background: rgba(0, 0, 0, 0.94); } } .brand { display: inline-flex; align-items: center; gap: 0.32em; font-family: var(--font-display); font-size: 1.18rem; letter-spacing: -0.015em; line-height: 1; } .brand-strong { font-weight: 700; } .brand-light { font-weight: 350; opacity: 0.82; } /* a touch heavier for legibility on dark */ .logo-atom { fill: none; stroke: currentColor; stroke-width: 1; transform: translateY(-1px); color: var(--text); animation: atom-spin 60s linear infinite; transform-origin: 50% 50%; } @keyframes atom-spin { to { transform: translateY(-1px) rotate(360deg); } } .nav-links { display: flex; justify-self: center; gap: clamp(1.5rem, 3vw, 3rem); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; } .nav-links a { position: relative; color: var(--text-muted); padding: 0.35rem 0; transition: color var(--d-fast) var(--easing-out); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right var(--d-normal) var(--easing-out); } .nav-links a:hover, .nav-links a:focus-visible { color: var(--text); } .nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; } .nav-right { display: flex; align-items: center; gap: 1.2rem; } /* ── Mobile-Menu-Toggle — sichtbar nur ≤1024px (dort sind .nav-links weg) ── */ .menu-toggle { display: none; align-items: center; gap: 0.55em; min-height: 44px; padding: 0.5rem 0.85rem; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); transition: color var(--d-fast) var(--easing-out), border-color var(--d-fast) var(--easing-out); } .menu-toggle:hover { color: var(--text); border-color: var(--border-hover); } .menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; } .menu-toggle-bars span { display: block; width: 15px; height: 1.5px; background: currentColor; } @media (max-width: 1024px) { .menu-toggle { display: inline-flex; } } /* [CRITICAL:END] */ /* ── Mobile Menu — Off-canvas , rechts, Glas-Panel ── */ .mobile-menu { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 88vw); height: 100vh; height: 100dvh; max-height: none; max-width: none; border: none; border-left: 1px solid var(--border); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text); padding: calc(1.1rem + env(safe-area-inset-top, 0px)) clamp(1.4rem, 6vw, 2.2rem) calc(1.6rem + env(safe-area-inset-bottom, 0px)); flex-direction: column; gap: 2.5rem; } @supports not (backdrop-filter: blur(1px)) { .mobile-menu { background: rgba(4, 4, 6, 0.97); } } .mobile-menu[open] { display: flex; } .mobile-menu::backdrop { background: rgba(0, 0, 0, 0.55); } @media (prefers-reduced-motion: no-preference) { .mobile-menu[open] { animation: mobile-menu-in 360ms var(--easing-out); } } html[data-force-motion] .mobile-menu[open] { animation: mobile-menu-in 360ms var(--easing-out); } @keyframes mobile-menu-in { from { transform: translateX(48px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; } .mobile-menu-close { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; transition: color var(--d-fast) var(--easing-out), border-color var(--d-fast) var(--easing-out); } .mobile-menu-close:hover { color: var(--text); border-color: var(--border-hover); } .mobile-menu-nav { flex: 1; } .mobile-menu-nav ul { display: flex; flex-direction: column; } .mobile-menu-nav a { display: flex; align-items: baseline; gap: 0.9rem; min-height: 44px; padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--border); font-family: var(--font-anchor); font-variation-settings: "opsz" 96, "SOFT" 50; font-size: clamp(1.45rem, 5.5vw, 1.8rem); letter-spacing: -0.01em; color: var(--text); transition: color var(--d-fast) var(--easing-out), padding-left var(--d-normal) var(--easing-out); } .mobile-menu-nav a:hover { padding-left: 0.6rem; } .mobile-menu-nav .mm-idx { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; color: var(--text-faint); } .mobile-menu-foot { display: flex; flex-direction: column; gap: 1rem; } .mobile-menu-cta { width: 100%; } /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* ---------------------------------------------------------------- 09 · CTAs (outlined, glow-outline hover, arrow translateX) ---------------------------------------------------------------- */ .cta { position: relative; display: inline-flex; align-items: center; gap: 0.65em; padding: 0.95rem 1.5rem; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--border-hover); color: var(--text); background: transparent; overflow: hidden; transition: box-shadow var(--d-fast) var(--easing-out), border-color var(--d-fast) var(--easing-out), background var(--d-normal) var(--easing-out), transform var(--d-fast) var(--easing-out); } .cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); transform: translateX(-110%); transition: transform 0.7s var(--easing-out); pointer-events: none; } .cta:hover::before, .cta:focus-visible::before { transform: translateX(110%); } .cta-arrow { transition: transform var(--d-normal) var(--easing-out); margin-left: 0.1em; } .cta:hover .cta-arrow, .cta:focus-visible .cta-arrow { transform: translateX(4px); } .cta-bracket { color: var(--text-faint); font-weight: 400; transition: color var(--d-fast) var(--easing-out); } .cta:hover .cta-bracket, .cta:focus-visible .cta-bracket { color: var(--text); } .cta:hover, .cta:focus-visible { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 32px 4px rgba(255, 255, 255, 0.10); border-color: var(--text); outline: none; } .cta:active { transform: scale(0.985); } .cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .cta--ghost { border-color: var(--border); color: var(--text-muted); } .cta--ghost:hover, .cta--ghost:focus-visible { color: var(--text); border-color: var(--border-hover); } .cta--xl { padding: 1.25rem 2.2rem; font-size: 0.86rem; } .nav-cta { padding: 0.65rem 1.2rem; font-size: 0.7rem; } /* ---------------------------------------------------------------- 10 · HERO — Split 42fr / 58fr + Status-Row + Atmosphere ---------------------------------------------------------------- */ #hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; /* Fallback für Browser ohne dvh */ min-height: 100dvh; /* iOS-Safari: dynamische Toolbar berücksichtigt */ padding-inline: 0; padding-block: 0; overflow: hidden; position: relative; } /* Status row — fills dead space top-of-hero with credibility content */ .hero-status { grid-column: 1 / -1; display: grid; grid-template-columns: 42fr 58fr; align-items: center; padding: clamp(4.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3rem) 0; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); z-index: 3; position: relative; } .hero-status-left { display: inline-flex; align-items: center; gap: 0.7em; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); /* Signature-Gold = live */ box-shadow: 0 0 0 3px rgba(201, 168, 107, 0.18), 0 0 14px rgba(201, 168, 107, 0.55); animation: status-pulse 2.4s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(201, 168, 107, 0.18), 0 0 14px rgba(201, 168, 107, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(201, 168, 107, 0.08), 0 0 22px rgba(201, 168, 107, 0.85); } } .status-text { color: var(--text-muted); } .hero-status-right { display: inline-flex; justify-content: flex-end; align-items: center; gap: 0.7em; flex-wrap: wrap; } .status-meta-key { color: var(--text-ghost); } .status-meta-val { color: var(--text-muted); } .status-meta-sep { color: var(--text-ghost); padding: 0 0.4em; } .hero-text { display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(1.5rem, 5vw, 6vw); background: transparent; position: relative; z-index: 2; gap: clamp(1.4rem, 3vh, 2.4rem); } .hero-pill { display: inline-flex; align-items: center; gap: 0.7em; margin-bottom: 0; padding: 0.4em 0.9em; border: 1px solid var(--border); align-self: flex-start; background: rgba(255,255,255,0.02); } .hero-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .hero-h1-line { display: block; letter-spacing: -0.015em; position: relative; padding-block: 0.04em; /* breathing room so descenders + ascenders don't crowd */ } /* ── Entrance-Pre-State (ersetzt den entfernten Loader) ────────── Ein Inline-Head-Skript setzt html[data-boot="motion"] NUR bei voller Motion (kein reduced-motion, oder ?motion=1). Der erste gemalte Frame zeigt dann exakt den Startzustand der GSAP-Entrance — kein "sichtbar → weg → einblenden"-Flash. Ohne JS / mit reduced-motion existiert das Attribut nie → alles sofort sichtbar. Safety: Falls GSAP nie übernimmt, erzwingen die Keyframes nach 2.4s den Endzustand (CSS-Animation schlägt Inline-Style während sie füllt — der Endzustand ist identisch mit GSAPs Ziel, also konfliktfrei). */ html[data-boot="motion"] .hero-h1-line { transform: translateY(22px); animation: entrance-safety-y 0.01ms linear 2.4s forwards; } html[data-boot="motion"] .hero-subhead, html[data-boot="motion"] .hero-ctas .cta { opacity: 0; animation: entrance-safety-fade 0.01ms linear 2.4s forwards; } @keyframes entrance-safety-y { to { transform: translateY(0); } } @keyframes entrance-safety-fade { to { opacity: 1; } } /* Zeile 2 = Signature: Fraunces-Italic in Gold ("die wirkt." / "In fuenf Tagen."). Matcht das OG-Bild — EIN konsistenter Marken-Moment. */ .hero-h1-line + .hero-h1-line { color: var(--accent); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; } .t-feature em, .t-display em { font-style: normal; } .headline-italic, .t-feature em.headline-italic, .t-display em.headline-italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; } .hero-caret { display: inline-block; width: 0.06em; height: 0.78em; background: var(--text); margin-left: 0.05em; vertical-align: -0.06em; animation: caret-blink 1.05s steps(2) infinite; } @keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hero-subhead { margin: 0; max-width: 40ch; color: var(--text-muted); font-family: var(--font-anchor); font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.6rem); font-variation-settings: "opsz" 36, "SOFT" 50; letter-spacing: 0; line-height: 1.5; } .subhead-line { display: inline-flex; align-items: baseline; gap: 0.45em; white-space: nowrap; } .subhead-old { color: var(--text-faint); } .subhead-strike { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-faint); /* faded — past, irrelevant */ text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 90, 90, 0.8); } .subhead-sep { font-family: var(--font-mono); color: var(--text-ghost); font-size: 0.9em; } .subhead-now { color: var(--text); font-weight: 500; } .subhead-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; } .subhead-meta { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); padding-top: 0.4rem; } .hero-ctas { display: flex; gap: 0.8rem; margin-top: 0; flex-wrap: wrap; } .hero-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(1rem, 3vh, 2rem); padding-top: 1.2rem; border-top: 1px solid var(--border); max-width: 36rem; } .hero-meta-row { display: flex; flex-direction: column; gap: 0.25em; } .hero-meta-row dt { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-ghost); } .hero-meta-row dd { font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; color: var(--text); letter-spacing: 0; line-height: 1.4; } /* HERO VISUAL */ .hero-visual { position: relative; will-change: transform; } /* Warmes Ambient-Licht hinter dem Atom — Tiefe statt flacher Schwaerze */ .hero-visual::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(60vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 42%, rgba(201, 168, 107, 0.10) 0%, rgba(201, 168, 107, 0.04) 32%, transparent 62%); filter: blur(30px); pointer-events: none; z-index: 0; } .sticky-visual { position: sticky; top: 0; height: 100vh; background: transparent; /* let stars show through */ overflow: hidden; } #hero-canvas { width: 100%; height: 100%; background: transparent; position: relative; z-index: 2; } /* ──────────────────────────────────────────────────────────────── 3D Atom — real perspective rotation 3 rings rotated in different planes, parent tumbles for life. ──────────────────────────────────────────────────────────────── */ .atom-3d { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1700px; perspective-origin: 50% 50%; z-index: 2; cursor: grab; /* signals interactivity for the mouse-tilt */ } /* Tilt-Ebene: bekommt vom JS rotateX/rotateY (Maus-Parallax) als Inline- Transform. Liegt ZWISCHEN dem perspective-Container (.atom-3d) und der Keyframe-Rotation (.atom-3d-inner), damit Tilt + Spin sich addieren statt sich gegenseitig zu überschreiben (Etappe-0-Bugfix). */ .atom-tilt { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; } .atom-3d-inner { position: relative; width: min(62%, 520px); aspect-ratio: 1; transform-style: preserve-3d; animation: atom-spin 14s linear infinite; will-change: transform; } /* Constant X-tilt (gives the 3D depth) + Y-axis spin (the visible motion). Single linear keyframe = constant angular velocity = clearly rotating. */ @keyframes atom-spin { from { transform: rotateX(18deg) rotateY(0deg); } to { transform: rotateX(18deg) rotateY(360deg); } } .atom-3d-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.95); box-sizing: border-box; transform-style: preserve-3d; backface-visibility: visible; /* warmer Licht-Schimmer statt rein weissem Glow */ box-shadow: 0 0 14px rgba(201, 168, 107, 0.14), inset 0 0 12px rgba(255, 255, 255, 0.06); } /* Classic Bohr-atom silhouette: three rings tilted into the same plane but rotated 60° apart in the picture-plane via rotateZ. As the parent spins around Y, each ring traces a different perspective ellipse. */ .atom-3d-ring[data-ring="1"] { transform: rotateZ(0deg) rotateX(72deg); } .atom-3d-ring[data-ring="2"] { transform: rotateZ(45deg) rotateX(72deg); } .atom-3d-ring[data-ring="3"] { transform: rotateZ(90deg) rotateX(72deg); } .atom-3d-ring[data-ring="4"] { transform: rotateZ(135deg) rotateX(72deg); /* DER Gold-Ring — eine Umlaufbahn traegt die Signature-Farbe (wie im OG-Bild) */ border-color: rgba(201, 168, 107, 0.85); border-width: 1px; box-shadow: 0 0 18px rgba(201, 168, 107, 0.25), inset 0 0 14px rgba(201, 168, 107, 0.12); } /* Center core — anchor for the eye, brighter than before */ .atom-3d-core { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--accent-bright); border-radius: 50%; box-shadow: 0 0 12px rgba(221, 190, 133, 0.95), 0 0 32px rgba(201, 168, 107, 0.55), 0 0 70px rgba(201, 168, 107, 0.28); animation: atom-core-pulse 3.6s ease-in-out infinite; } @keyframes atom-core-pulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.35); opacity: 1; } } /* ──────────────────────────────────────────────────────────────── Service nodes overlay — beschriftete Punkte am Atom Sit on top of the 3D atom, do not rotate with it. Positioned via --nx / --ny (% offsets from center). ──────────────────────────────────────────────────────────────── */ .atom-nodes { position: absolute; top: 50%; left: 50%; width: min(72%, 600px); /* slightly bigger than the atom inner so nodes sit just outside the rings */ aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; } .atom-node { position: absolute; /* parent-relative offsets via top/left + translateZ for actual 3D depth */ top: calc(50% + var(--ny)); left: calc(50% + var(--nx)); transform: translate3d(-50%, -50%, var(--nz, 0px)); pointer-events: auto; animation: node-fade-in 1.2s ease-out both; animation-delay: 1.4s; } .atom-node-btn { position: relative; display: flex; align-items: center; gap: 0.65rem; background: transparent; border: none; padding: 0.3rem 0.4rem; cursor: pointer; color: inherit; font: inherit; border-radius: 4px; transition: background var(--d-fast) var(--easing-out); } /* Unsichtbare Hit-Area-Erweiterung auf min. 44×44px (Touch-Target, WCAG 2.5.8) */ .atom-node-btn::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 44px); height: max(100%, 44px); } .atom-node[data-anchor="tl"] .atom-node-btn, .atom-node[data-anchor="bl"] .atom-node-btn { flex-direction: row-reverse; } .atom-node-btn:hover, .atom-node-btn:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; } .atom-node-btn:hover .atom-node-dot { transform: scale(1.6); background: var(--accent-bright); box-shadow: 0 0 14px rgba(221, 190, 133, 1), 0 0 36px rgba(201, 168, 107, 0.6); } .atom-node-btn:hover .atom-node-label { color: rgba(255, 255, 255, 1); letter-spacing: 0.28em; } .atom-node-btn:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.55); outline-offset: 4px; } .atom-node-dot { transition: transform var(--d-fast) var(--easing-out), box-shadow var(--d-fast) var(--easing-out); } .atom-node-label { transition: color var(--d-fast) var(--easing-out), letter-spacing var(--d-fast) var(--easing-out); } @keyframes node-fade-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .atom-node-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 24px rgba(255, 255, 255, 0.35); flex-shrink: 0; animation: node-dot-pulse 4s ease-in-out infinite; } .atom-node:nth-child(2) .atom-node-dot { animation-delay: 0.8s; } .atom-node:nth-child(3) .atom-node-dot { animation-delay: 1.6s; } .atom-node:nth-child(4) .atom-node-dot { animation-delay: 2.4s; } .atom-node:nth-child(5) .atom-node-dot { animation-delay: 3.2s; } @keyframes node-dot-pulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.3); opacity: 1; } } .atom-node-line { width: 28px; height: 1px; background: linear-gradient(to right, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)); } .atom-node-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); white-space: nowrap; text-shadow: 0 0 12px rgba(0, 0, 0, 0.6); /* readable over orbit lines */ } /* Anchor variants — flip line/label to the LEFT side for left-positioned nodes */ .atom-node[data-anchor="tl"], .atom-node[data-anchor="bl"] { flex-direction: row-reverse; } .atom-node[data-anchor="tl"] .atom-node-line, .atom-node[data-anchor="bl"] .atom-node-line { background: linear-gradient(to left, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)); } /* On mobile/narrow: hide labels to avoid clutter */ @media (max-width: 768px) { .atom-node-line { width: 16px; } .atom-node-label { font-size: 0.58rem; letter-spacing: 0.18em; } } @media (max-width: 480px) { .atom-node-line, .atom-node-label { display: none; } .atom-node-dot { width: 6px; height: 6px; } /* Dots rein dekorativ: waren sonst 19x16 klickbare Mini-Buttons ohne sichtbares Label = kaputte Tap-Targets (§16.2). Nav + CTAs navigieren. */ .atom-node-btn { pointer-events: none; } } @media (prefers-reduced-motion: reduce) { /* Slow rotation still — full motion-stop hides the 3D effect entirely. !important required because the global reduced-motion wildcard above forces all animation-duration to 0.01ms with !important. html:not([data-force-motion]) = QA-Hook ?motion=1 (siehe js/motion.js). */ html:not([data-force-motion]) .atom-3d-inner { animation: atom-spin 60s linear infinite !important; } html:not([data-force-motion]) .atom-3d-core { animation: none; } /* Nodes sofort sichtbar: das Wildcard kuerzt nur duration, NICHT die 1.4s animation-delay des node-fade-in -> Navigation waere 1.4s unsichtbar. */ html:not([data-force-motion]) .atom-node { animation-delay: 0s !important; } } /* Bottom vignette removed — was hiding stars */ /* Atom glow + coords removed for clean editorial look */ .visual-glow, .visual-coords, .visual-caption { display: none; } /* [CRITICAL:END] */ /* ──────────────────────────────────────────────────────────────── HERO WebGL (Etappe 2) — Gold-Partikel-Atom (js/hero-webgl.js). Canvas liegt IM .atom-3d-Container unter den DOM-Nodes (z 4). .webgl-on = atomischer Crossfade: CSS-Atom raus, Canvas rein. Bewusst NICHT im Critical-CSS: der Swap passiert erst im Idle, wenn style.css längst geladen ist. ──────────────────────────────────────────────────────────────── */ .hero-canvas3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; transition: opacity 900ms var(--easing-out); pointer-events: none; } .atom-3d.webgl-on .hero-canvas3d { opacity: 1; } /* CSS-Atom sanft ausblenden, nach dem Fade aus dem Renderpfad nehmen */ .atom-3d .atom-tilt { transition: opacity 900ms var(--easing-out), visibility 0s 900ms; } .atom-3d.webgl-on .atom-tilt { opacity: 0; visibility: hidden; } /* Coordinates frame — tech-blueprint detail */ .visual-coords { position: absolute; inset: clamp(1.5rem, 3vw, 3rem); pointer-events: none; z-index: 2; } .coord-line { position: absolute; background: var(--line-faint); } .coord-x { top: 0; left: 50%; width: 1px; height: 24px; } .coord-y { left: 0; top: 50%; height: 1px; width: 24px; } .coord-label { position: absolute; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-ghost); } .coord-label-tl { top: 0; left: 0; } .coord-label-tr { top: 0; right: 0; } .coord-label-bl { bottom: 0; left: 0; } .coord-label-br { bottom: 0; right: 0; } .visual-caption { position: absolute; bottom: clamp(1.5rem, 3vw, 3rem); left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); z-index: 4; white-space: nowrap; display: inline-flex; gap: 0.7em; align-items: center; } .visual-caption::before { content: ''; width: 6px; height: 6px; border: 1px solid var(--text-faint); display: inline-block; } /* Floating code-glyph layer — INSTANTLY visible (no JS gate) */ .glyph-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1; /* Layout-Isolation wie .binary-stars — dekorative Text-Spans. */ contain: strict; } .glyph { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); font-family: var(--font-mono); font-size: clamp(0.62rem, 0.55rem + 0.32vw, 0.78rem); letter-spacing: 0.18em; color: var(--text-ghost); white-space: nowrap; will-change: transform; user-select: none; } /* Glyphs at the far right edge should anchor to their right side so they don't overflow the viewport */ .glyph[style*="--x:97%"] { transform: translateX(-100%); } .glyph[style*="--x:96%"] { transform: translateX(-100%); } .glyph[style*="--x:95%"] { transform: translateX(-100%); } .glyph--num { color: rgba(255, 255, 255, 0.32); letter-spacing: 0.28em; font-variant-numeric: tabular-nums; font-weight: 400; } .glyph--tag { color: rgba(255, 255, 255, 0.22); font-weight: 400; } .glyph--tag::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 0.6em; background: currentColor; vertical-align: middle; opacity: 0.5; } /* atmospheric body overlays removed — keep dark surface clean */ /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* ---------------------------------------------------------------- Binary star field — 0/1 glyphs as parallax background 3 depth layers via class size + opacity differentiation ---------------------------------------------------------------- */ .binary-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* Layout-Isolation: 154 Text-Glyphen dürfen NIE ein Dokument-Layout anstoßen (dekorativ, aria-hidden). strict = size+layout+paint. */ contain: strict; } /* Parallax-Ebene: EIN transform-Tween pro Layer (statt 154 Einzel-Tweens). will-change nur hier — 3 Compositor-Layer statt 154. */ .bin-layer { position: absolute; inset: 0; will-change: transform; } .bin-star { position: absolute; font-family: var(--font-mono); font-feature-settings: "tnum"; user-select: none; white-space: nowrap; transform-origin: 50% 50%; } /* Twinkle als CSS-Animation (Compositor-faehig, null JS pro Frame). Dauer/Tiefe/Phase pro Stern via Inline-Custom-Properties. */ .bin-star--twinkle { animation: bin-twinkle var(--tw-dur, 8s) ease-in-out var(--tw-delay, 0s) infinite alternate; } @keyframes bin-twinkle { to { opacity: var(--tw-dim, 0.35); } } /* Far layer — small, faint, sits "behind" everything */ .bin-star--far { font-size: 9px; color: rgba(255, 255, 255, 0.06); font-weight: 300; } /* Mid layer */ .bin-star--mid { font-size: 11px; color: rgba(255, 255, 255, 0.11); font-weight: 400; } /* Near layer — larger, brighter, NO text-shadow (keeps it leise) */ .bin-star--near { font-size: 14px; color: rgba(255, 255, 255, 0.18); font-weight: 400; } /* Hide stars on small mobile (performance + visual restraint) */ @media (max-width: 640px) { .binary-stars { display: none; } } main, #nav, #footer, .modal { position: relative; z-index: 2; } /* ── Render-Lazy für Below-fold-Sektionen ──────────────────────── content-visibility:auto = Layout/Paint/Style erst in Viewport-Nähe. Gemessen: das Erst-Layout UND das Font-Swap-Relayout des GESAMTEN Dokuments kosteten je ~150ms real (~600ms unter Lighthouse-4x-CPU) — überwiegend Text-Umbruch (text-wrap balance/pretty) von Inhalten, die beim Boot gar nicht sichtbar sind. contain-intrinsic-size = real gemessene Desktop-Höhen (Scrollbar-Stabilität + Anker-Treffsicherheit). Hero bewusst NICHT lazy (er ist der erste Viewport). */ #pricing { content-visibility: auto; contain-intrinsic-size: auto 1005px; } #why { content-visibility: auto; contain-intrinsic-size: auto 710px; } #stats { content-visibility: auto; contain-intrinsic-size: auto 405px; } #services { content-visibility: auto; contain-intrinsic-size: auto 747px; } #process { content-visibility: auto; contain-intrinsic-size: auto 943px; } #configurator { content-visibility: auto; contain-intrinsic-size: auto 716px; } #integrations { content-visibility: auto; contain-intrinsic-size: auto 670px; } #faq { content-visibility: auto; contain-intrinsic-size: auto 1524px; } #final-cta { content-visibility: auto; contain-intrinsic-size: auto 812px; } #footer { content-visibility: auto; contain-intrinsic-size: auto 256px; } /* [CRITICAL:END] */ /* Scroll cue — bottom of hero, mono-counter style */ .scroll-cue { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); color: var(--text-faint); z-index: 5; animation: bounce-soft 2.4s ease-in-out infinite; } @keyframes bounce-soft { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ---------------------------------------------------------------- 11 · PRICING — Zoom-Hero-Moment with comparison panel ---------------------------------------------------------------- */ #pricing { display: grid; place-items: center; text-align: center; padding-block: clamp(4rem, 3rem + 4vw, 7rem); /* was up to 12rem — content-driven */ } .pricing-grid-bg { display: none; } .pricing-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(1.8rem, 3.5vh, 3rem); max-width: 56rem; } .pricing-eyebrow { font-family: var(--font-anchor); font-size: clamp(1rem, 0.88rem + 0.4vw, 1.3rem); font-variation-settings: "opsz" 36; color: var(--text-muted); letter-spacing: 0; line-height: 1.4; margin: 0; font-style: italic; } .pricing-number { font-family: var(--font-mono); font-size: clamp(4.5rem, 11vw, 10rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; align-items: flex-start; gap: 0.12em; } .pricing-currency { font-size: 0.42em; font-weight: 400; color: var(--accent); letter-spacing: 0; } .pricing-amount { display: inline-block; } /* Comparison panel — glass-card depth (Tip 4) */ .pricing-compare { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.4rem, 2.2vw, 2.2rem) clamp(2rem, 4vw, 3.5rem); max-width: 56rem; width: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 50%, rgba(255,255,255,0.03) 100%); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 24px 60px rgba(0, 0, 0, 0.4); } /* Corner ticks — editorial frame detail (visual rhyming with coord-labels) */ .pricing-compare::before, .pricing-compare::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--text-faint); } .pricing-compare::before { top: -6px; left: -6px; border-right: none; border-bottom: none; } .pricing-compare::after { bottom: -6px; right: -6px; border-left: none; border-top: none; } .pricing-compare-row { display: flex; flex-direction: column; gap: 0.5em; text-align: left; } .pricing-compare-row--now { text-align: right; } .pcr-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); } .pcr-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.6rem); font-weight: 500; color: var(--text); display: flex; flex-direction: column; gap: 0.15em; } .pcr-strike { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 90, 90, 0.7); color: var(--text-muted); } .pcr-meta { font-size: 0.55em; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); text-decoration: none; } .pricing-compare-divider { width: 1px; height: 60%; background: var(--border); } .pricing-tagline { font-family: var(--font-anchor); font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.7rem); font-variation-settings: "opsz" 48, "SOFT" 50; color: var(--text-muted); line-height: 1.5; letter-spacing: 0; max-width: 38ch; } .pricing-fineprint { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); margin-top: 0.5rem; } /* What's-included list */ .pricing-included { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.6rem 2.2rem; margin-top: 1rem; max-width: 56rem; text-align: left; } .pricing-included li { display: flex; align-items: baseline; gap: 0.7em; font-family: var(--font-display); font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.08rem); color: var(--text-muted); letter-spacing: -0.005em; line-height: 1.55; } .pi-check { font-family: var(--font-mono); color: var(--text); font-size: 0.85em; font-weight: 600; flex-shrink: 0; } /* Agency anchor — editorial, not table */ .pricing-anchor { font-family: var(--font-anchor); font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem); font-variation-settings: "opsz" 24; font-style: italic; color: var(--text-faint); max-width: 52ch; line-height: 1.65; letter-spacing: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .anchor-strike { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 90, 90, 0.65); } /* ---------------------------------------------------------------- Section component pattern (LEGO block — repeated across all sections) structure: [atom-bullet] EYEBROW / HEADLINE 2 lines (second italic) Italic body sentence (optional) ---------------------------------------------------------------- */ .section-head { display: flex; flex-direction: column; gap: clamp(0.8rem, 1.6vw, 1.4rem); /* was up to 2rem */ margin-bottom: clamp(1.6rem, 3vw, 2.6rem); /* was up to 4rem — saves ~25% vertical */ max-width: 60rem; } /* Inline section-head — kompakte horizontale Zeile statt vertikalem Block. Verwendet für #why, #process, #principles, #faq — ersetzt den großen Block aus Eyebrow + 2-line Headline + Body durch eine einzige Zeile, damit beim Scrollen nichts mehr lange durchs Viewport wandert. */ .section-head-inline { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem); flex-wrap: wrap; margin-bottom: clamp(1.4rem, 2.4vw, 2rem); max-width: 96rem; padding-bottom: clamp(0.9rem, 1.4vw, 1.2rem); border-bottom: 1px solid var(--border); } .section-head-inline .section-eyebrow { flex-shrink: 0; } .section-head-rule { flex: 1 1 auto; min-width: 1rem; height: 1px; background: linear-gradient(90deg, var(--border-hover) 0%, transparent 100%); } .section-head-h { font-family: var(--font-anchor); font-variation-settings: "opsz" 96, "SOFT" 50; font-weight: 400; font-size: var(--t-title); text-wrap: balance; line-height: 1.18; letter-spacing: -0.01em; color: var(--text); margin: 0; flex: 0 1 auto; text-align: right; } .section-head-h em { font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 70; } @media (max-width: 720px) { .section-head-inline { gap: 0.6rem; } .section-head-rule { display: none; } .section-head-h { font-size: 1.1rem; text-align: left; flex: 1 0 100%; margin-top: 0.4rem; } } .section-eyebrow { display: inline-flex; align-items: center; gap: 0.7em; color: var(--text-faint); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; } .section-num { font-family: var(--font-mono); color: var(--text-muted); font-weight: 500; } .section-sep { color: var(--text-ghost); padding: 0 0.2em; } .section-body { font-family: var(--font-anchor); font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.5rem); font-variation-settings: "opsz" 36, "SOFT" 50; color: var(--text-muted); max-width: 44ch; letter-spacing: 0; line-height: 1.55; } /* Reusable mini-atom — visual rhyming bullet for eyebrows */ .atom-bullet { display: inline-block; width: 1em; height: 1em; position: relative; vertical-align: -0.18em; animation: atom-bullet-spin 22s linear infinite; } .atom-bullet::before, .atom-bullet::after, .atom-bullet > i { content: ''; position: absolute; inset: 35% 0; border: 1px solid currentColor; border-radius: 50%; opacity: 0.7; } .atom-bullet::after { transform: rotate(60deg); } .atom-bullet > i { transform: rotate(120deg); } @keyframes atom-bullet-spin { to { transform: rotate(360deg); } } /* Big atom watermark — used as section backdrop for pricing + final-cta */ .atom-watermark { position: absolute; inset: 50% auto auto 50%; width: min(85vw, 1000px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; opacity: 0.30; animation: atom-watermark-spin 80s linear infinite; } .atom-watermark::before, .atom-watermark::after, .atom-watermark > i { content: ''; position: absolute; inset: 36% 0; border: 1px solid var(--text); border-radius: 50%; } .atom-watermark::after { transform: rotate(60deg); } .atom-watermark > i { transform: rotate(120deg); } @keyframes atom-watermark-spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------- 12 · SERVICES — Editorial 2-column (no table layout) ---------------------------------------------------------------- */ .services-grid { display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 5vw, 5rem); max-width: 88rem; margin: 0 auto; } @media (min-width: 900px) { .services-grid { /* LEFT: compact pick list (1fr) · RIGHT: big demo stage (1.7fr) */ grid-template-columns: 1fr 1.7fr; gap: clamp(3rem, 5vw, 5rem); align-items: stretch; } /* swap order so the markup-first stage moves to the right */ .services-grid > .services-stage { order: 2; position: sticky; top: clamp(5rem, 8vh, 7rem); } .services-grid > .services-secondary { order: 1; } } .services-primary { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); } .services-primary h2 { letter-spacing: -0.025em; } .services-primary-body { font-family: var(--font-anchor); font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem); font-variation-settings: "opsz" 36, "SOFT" 50; color: var(--text-muted); max-width: 38ch; line-height: 1.55; letter-spacing: 0; } .services-secondary { display: flex; flex-direction: column; gap: clamp(2rem, 3vw, 2.5rem); padding-top: 0.5rem; } .services-group { display: flex; flex-direction: column; gap: 0.6rem; } .services-aside-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); display: block; margin-bottom: 0.3rem; } .services-partner-note { font-family: var(--font-anchor); font-size: 0.92rem; color: var(--text-faint); max-width: 30ch; line-height: 1.4; margin-top: 0.5rem; } .services-addons { display: flex; flex-direction: column; gap: 0.4rem; } .services-addons li { display: flex; flex-direction: column; gap: 0.2em; padding: 0.8rem 0; border-bottom: 1px solid var(--border); transition: padding-left var(--d-normal) var(--easing-out); } .services-addons li:hover { padding-left: 0.4rem; } .services-addons li:last-child { border-bottom: none; } .addon-name { font-family: var(--font-display); font-size: clamp(1rem, 0.88rem + 0.35vw, 1.18rem); font-weight: 500; color: var(--text); letter-spacing: -0.005em; line-height: 1.4; } .addon-desc { font-family: var(--font-display); font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; letter-spacing: 0; } /* Legacy services rules removed — they collided with the new .services-grid (1fr 1.7fr) by turning #services itself into a 44/56 grid. The new section is a normal block; .services-grid handles layout. */ #services { display: block; } .services-list { display: flex; flex-direction: column; position: relative; } .services-list::before, .services-list::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--border); } .services-list::before { top: 0; } .services-list::after { bottom: 0; } .service { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.5rem; padding: 1.5rem clamp(0.5rem, 1vw, 1rem); border-bottom: 1px solid var(--border); align-items: center; transition: padding-left var(--d-normal) var(--easing-out); } .service::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, 0.025); transition: width var(--d-normal) var(--easing-out); pointer-events: none; } .service:hover::before, .service:focus-within::before { width: 100%; } .service:hover { padding-left: clamp(1rem, 1.5vw, 1.5rem); } .service-num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; color: var(--text-faint); position: relative; z-index: 1; } .service-name { font-family: var(--font-display); font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; color: var(--text); position: relative; z-index: 1; } .service-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.82rem; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 0.1em; } .service-price-currency { font-size: 0.85em; opacity: 0.8; } .service-price-amount { font-weight: 500; } .service-arrow { font-family: var(--font-mono); font-size: 1rem; color: var(--text-ghost); position: relative; z-index: 1; transform: translate(-6px, 0); opacity: 0; transition: transform var(--d-normal) var(--easing-out), opacity var(--d-fast) var(--easing-out), color var(--d-fast) var(--easing-out); } .service:hover .service-arrow { transform: translate(0, 0); opacity: 1; color: var(--text); } .service--primary .service-name { font-weight: 600; } .service--primary .service-price { color: var(--text); font-size: 0.94rem; font-weight: 500; letter-spacing: 0.04em; } /* ---------------------------------------------------------------- 13 · INTEGRATIONS — Editorial statement (no grid) ---------------------------------------------------------------- */ .integrations-inner { max-width: 64rem; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); } .integrations-body { font-family: var(--font-anchor); font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.55rem); font-variation-settings: "opsz" 36, "SOFT" 50; color: var(--text-muted); max-width: 46ch; line-height: 1.55; letter-spacing: 0; } .integrations-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.4rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(2rem, 3vw, 2.5rem); border-top: 1px solid var(--border); } .ints-group { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.3rem 1.1rem; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 70%); transition: background var(--d-normal) var(--easing-out), border-color var(--d-normal) var(--easing-out); } .ints-group::before { content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 1px; background: var(--text); } .ints-group:hover { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(125,211,252,0.015) 100%); border-color: var(--border-hover); } .ints-cat { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-faint); } .ints-group ul { display: flex; flex-wrap: wrap; gap: 0.45rem 0.4rem; padding: 0; list-style: none; } .ints-group li { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.4em 0.7em; color: var(--text-muted); border: 1px solid var(--border); background: rgba(255,255,255,0.02); cursor: default; transition: color var(--d-fast) var(--easing-out), border-color var(--d-fast) var(--easing-out), background var(--d-fast) var(--easing-out), transform var(--d-fast) var(--easing-out); } .ints-group li:hover { color: var(--text); border-color: var(--border-hover); background: rgba(255,255,255,0.05); transform: translateY(-1px); } /* Old grid classes left dormant */ #integrations { text-align: left; } #integrations > .t-label { margin-bottom: 1rem; } #integrations > .t-feature { margin-bottom: clamp(3rem, 6vw, 6rem); } .integrations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem); } .integration-group { display: flex; flex-direction: column; gap: 1.2rem; } .integration-group .t-label { color: var(--text-faint); } .logo-wall { display: flex; flex-direction: column; gap: 0.6rem; } .logo-wall li { font-family: var(--font-display); font-size: clamp(0.98rem, 0.88rem + 0.3vw, 1.15rem); color: var(--text-muted); letter-spacing: 0; line-height: 1.55; transition: color var(--d-fast) var(--easing-out); } .logo-wall li:hover { color: var(--text); } /* ---------------------------------------------------------------- 14 · PROCESS — Editorial 5-day flow (no accordion) ---------------------------------------------------------------- */ .process-intro { max-width: 88rem; margin: 0 auto clamp(3rem, 6vw, 6rem); } .process-flow { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); max-width: 88rem; margin: 0 auto; } @media (min-width: 768px) { .process-flow { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .process-flow { grid-template-columns: repeat(5, 1fr); } } .process-day { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 1.2rem; border-top: 1px solid var(--border); } .day-num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.28em; color: var(--text-faint); } .day-title { font-family: var(--font-anchor); font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2.4rem); font-variation-settings: "opsz" 72; font-weight: 400; color: var(--text); letter-spacing: -0.01em; line-height: 1.1; } .day-body { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; letter-spacing: 0; max-width: 28ch; } /* Old accordion classes left dormant */ #process > .t-label { margin-bottom: 1rem; } #process > .t-feature { margin-bottom: clamp(3rem, 5vw, 5rem); } .process-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .process-step { border-bottom: 1px solid var(--border); } .process-toggle { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; padding: 1.6rem 0; text-align: left; font-family: var(--font-display); letter-spacing: -0.01em; transition: padding var(--d-fast) var(--easing-out); } .process-toggle:hover { padding-inline: 0.5rem; } .step-num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--text-faint); } .step-name { font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; color: var(--text); } .step-plus { font-family: var(--font-mono); font-size: 1.2rem; color: var(--text-faint); transition: transform var(--d-normal) var(--easing-out), color var(--d-fast) var(--easing-out); } .process-toggle[aria-expanded="true"] .step-plus { transform: rotate(45deg); color: var(--text); } .process-panel { overflow: hidden; padding-bottom: 2rem; padding-left: 5.5rem; max-width: 56ch; } .process-panel[hidden] { display: none; } /* ---------------------------------------------------------------- 15 · FAQ — Akkordeon (independent, multiple can open) ---------------------------------------------------------------- */ #faq > .t-label { margin-bottom: 1rem; } #faq > .t-feature { margin-bottom: clamp(3rem, 5vw, 5rem); } .faq-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--border); max-width: 72ch; } .faq-item { border-bottom: 1px solid var(--border); } .faq-toggle { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 1.6rem 0; text-align: left; font-family: var(--font-display); letter-spacing: -0.01em; transition: padding var(--d-fast) var(--easing-out); } .faq-toggle:hover { padding-inline: 0.4rem; } .faq-toggle:hover .faq-plus { color: var(--accent); } .faq-toggle:active { transform: scale(0.995); } .faq-q { font-family: var(--font-display); font-size: clamp(1.08rem, 0.9rem + 0.55vw, 1.38rem); font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.35; } .faq-plus { font-family: var(--font-mono); font-size: 1.2rem; color: var(--text-faint); transition: transform var(--d-normal) var(--easing-out), color var(--d-fast) var(--easing-out); } .faq-toggle[aria-expanded="true"] .faq-plus { transform: rotate(45deg); color: var(--accent); } .faq-panel { padding-bottom: 2rem; padding-right: 2rem; display: grid; gap: 1rem; } .faq-panel[hidden] { display: none; } .faq-panel p { color: var(--text-muted); line-height: 1.7; font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.05rem); max-width: 64ch; letter-spacing: 0; } .faq-panel ul { display: grid; gap: 0.6rem; padding-left: 1.2rem; list-style: disc; color: var(--text-muted); line-height: 1.6; font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.05rem); } .faq-panel ul li::marker { color: var(--text-faint); } .faq-panel strong { color: var(--text); font-weight: 600; } /* ---------------------------------------------------------------- 16 · FINAL CTA — big closer with trust-row ---------------------------------------------------------------- */ #final-cta { min-height: 90vh; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; } .final-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 70%), linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 96px 96px, linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 96px 96px; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%); pointer-events: none; z-index: 0; } .final-cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(1.2rem, 2.5vh, 2rem); max-width: 60rem; } .final-cta-eyebrow { color: var(--text-faint); } .final-cta-headline { max-width: 14ch; letter-spacing: -0.02em; line-height: 1.02; } .final-cta-body { font-family: var(--font-anchor); font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.6rem); font-variation-settings: "opsz" 48, "SOFT" 50; color: var(--text-muted); max-width: 42ch; text-align: center; margin-bottom: 0.5rem; letter-spacing: 0; line-height: 1.5; } .final-cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .final-cta-trust { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(1.5rem, 3vh, 2.5rem); padding-top: clamp(1.5rem, 3vh, 2rem); border-top: 1px solid var(--border); } .final-cta-trust li { display: flex; flex-direction: column; gap: 0.3em; } .trust-key { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-ghost); } .trust-val { font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; color: var(--text); letter-spacing: 0; line-height: 1.4; } @media (max-width: 640px) { .final-cta-trust { grid-template-columns: 1fr; } .final-cta-actions { flex-direction: column; align-items: stretch; width: 100%; } } /* ---------------------------------------------------------------- 17 · FOOTER ---------------------------------------------------------------- */ #footer { padding: var(--space-section-tight) clamp(1.5rem, 4vw, 5vw) clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--border); position: relative; } #footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent 0%, var(--border-hover) 20%, var(--border-hover) 80%, transparent 100%); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); } .footer-brand .brand--footer { font-size: 1.4rem; } .footer-tagline { font-family: var(--font-anchor); font-variation-settings: "opsz" 36; font-style: italic; color: var(--text-muted); margin-top: 1rem; max-width: 34ch; font-size: 1.05rem; letter-spacing: 0; line-height: 1.55; } .footer-col h4 { margin-bottom: 1rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; } .footer-col a { font-family: var(--font-display); color: var(--text-muted); font-size: 0.95rem; letter-spacing: 0; line-height: 1.5; transition: color var(--d-fast) var(--easing-out); } .footer-col a:hover { color: var(--text); } .footer-meta { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; } .sound-toggle { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; gap: 0.5em; align-items: center; transition: color var(--d-fast) var(--easing-out); } .sound-toggle:hover { color: var(--text); } .sound-toggle[data-state="on"] { color: var(--text); } .footer-copy { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-top: auto; } /* ---------------------------------------------------------------- 18 · MODAL (booking) ---------------------------------------------------------------- */ .modal { position: fixed; inset: 0; margin: auto; width: min(640px, calc(100% - 3rem)); max-height: calc(100vh - 3rem); max-height: calc(100dvh - 1.5rem); /* dvh: iOS Safari toolbar no longer hides the submit button (vh line is the fallback) */ background: var(--surface); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 90px -30px rgba(0, 0, 0, 0.85); color: var(--text); padding: clamp(2rem, 4vw, 3.5rem); z-index: 200; overflow-y: auto; } .modal::backdrop { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal[open] { animation: modal-in 320ms var(--easing-out); } @keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .modal-close { position: absolute; top: 1rem; right: 1.2rem; font-size: 1.6rem; color: var(--text-faint); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: color var(--d-fast) var(--easing-out), background var(--d-fast) var(--easing-out); } .modal-close:hover { color: var(--text); background: var(--border); } .modal-stage { position: relative; overflow: hidden; } .modal-view { display: flex; flex-direction: column; gap: 1.5rem; } .modal-headline { margin-bottom: 0.4rem; } .modal-subline { color: var(--text-muted); } .modal-switch-link { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); align-self: flex-start; transition: color var(--d-fast) var(--easing-out); } .modal-switch-link:hover { color: var(--text); } .modal-back { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); align-self: flex-start; margin-bottom: 0.5rem; transition: color var(--d-fast) var(--easing-out); } .modal-back:hover { color: var(--text); } /* ====== BOOKING WIDGET — Day → Slot → Details flow ====== */ .modal--booking { width: min(840px, calc(100% - 3rem)); padding: clamp(2rem, 3.5vw, 3rem); } /* Modal mobile pass: the desktop padding (2rem) eats too much of a ~327px modal, pushing the step-indicator row past the content box (~13px internal scroll). Trim padding, let tabs wrap, add iOS safe-area at the bottom. */ @media (max-width: 600px) { .modal, .modal--booking { padding: 1.5rem 1.15rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); } .booking-tabs { flex-wrap: wrap; gap: 0.25rem 1.25rem; } .booking-tab { font-size: 0.62rem; } .bw-steps__label { font-size: 0.6rem; } } .booking-head { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.5rem; } .booking-head-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(201, 168, 107, 0.16); } .booking-head-meta { color: var(--text-ghost); } /* Tabs */ .booking-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } .booking-tab { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); padding: 0.9rem 0; margin-right: 1.5rem; position: relative; background: none; border: none; cursor: pointer; transition: color var(--d-fast) var(--easing-out); } .booking-tab::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: transparent; transition: background var(--d-fast) var(--easing-out); } .booking-tab--active { color: var(--text); } .booking-tab--active::after { background: var(--accent); } .booking-tab:hover { color: var(--text-muted); } /* Step indicator */ .bw-steps { display: flex; align-items: center; gap: 0; margin-bottom: clamp(1.5rem, 3vw, 2rem); } .bw-steps__item { display: inline-flex; align-items: center; gap: 0.5em; color: var(--text-ghost); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; } .bw-steps__item + .bw-steps__item::before { content: ''; width: clamp(1.5rem, 3vw, 2.5rem); height: 1px; background: var(--border); margin: 0 0.7em; } .bw-steps__dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-ghost); } .bw-steps__item--active .bw-steps__dot { border-color: var(--text); color: var(--text); } .bw-steps__item--active { color: var(--text); } .bw-steps__item--done .bw-steps__dot { background: var(--text); color: var(--bg); border-color: var(--text); } .bw-steps__item--done { color: var(--text-muted); } .bw-steps__num { font-size: 0.62rem; } /* Step container */ .bw-step { display: flex; flex-direction: column; gap: 1.4rem; } .bw-step[hidden] { display: none; } .booking-panel[hidden] { display: none; } .bw-step__head { display: flex; flex-direction: column; gap: 0.5rem; } .bw-step__title { font-family: var(--font-anchor); font-size: var(--t-title); font-variation-settings: "opsz" 72; font-weight: 400; color: var(--text); letter-spacing: -0.005em; line-height: 1.2; } .bw-step__hint { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-muted); line-height: 1.55; letter-spacing: 0; } /* Back button */ .bw-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 0.3rem 0; transition: color var(--d-fast) var(--easing-out); } .bw-back:hover { color: var(--text); } .bw-back__arrow { font-size: 1.1em; } /* Calendar */ .bw-calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 0.6rem; } .bw-day { display: flex; flex-direction: column; align-items: center; gap: 0.15em; padding: 1rem 0.5rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-family: var(--font-display); transition: border-color var(--d-fast) var(--easing-out), background var(--d-fast) var(--easing-out), transform var(--d-fast) var(--easing-out); } .bw-day:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.04); } .bw-day--active { border-color: var(--text); background: var(--text); color: var(--bg); } .bw-day--disabled, .bw-day:disabled { opacity: 0.32; cursor: not-allowed; pointer-events: none; } .bw-slots__empty { grid-column: 1 / -1; margin: 0; padding: 1rem 0.5rem; font-size: 0.9rem; color: var(--text-faint); } .bw-day__weekday { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); } .bw-day--active .bw-day__weekday { color: rgba(0,0,0,0.6); } .bw-day__date { font-family: var(--font-anchor); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; } .bw-day__month { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); } .bw-day--active .bw-day__month { color: rgba(0,0,0,0.6); } /* Slots */ .bw-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; } .bw-slot { display: flex; flex-direction: column; gap: 0.2em; padding: 0.9rem 1rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: left; font-family: var(--font-mono); transition: border-color var(--d-fast) var(--easing-out), background var(--d-fast) var(--easing-out); } .bw-slot:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.04); } .bw-slot--active { border-color: var(--text); background: var(--text); color: var(--bg); } .bw-slot__time { font-variant-numeric: tabular-nums; font-size: 1rem; letter-spacing: 0.04em; } .bw-slot__local { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } .bw-slot--active .bw-slot__local { color: rgba(0,0,0,0.6); } .bw-continue { align-self: flex-start; margin-top: 0.5rem; } .bw-continue:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } /* Summary line (above details form) */ .bw-summary { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.6rem 0.9rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); letter-spacing: 0.04em; align-self: flex-start; } .bw-summary__icon { font-size: 1em; opacity: 0.7; } /* Form */ .bw-form { display: flex; flex-direction: column; gap: 1rem; } .bw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 600px) { .bw-form-row { grid-template-columns: 1fr; } } .bw-field { display: flex; flex-direction: column; gap: 0.35em; } .bw-field > span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); } .bw-field input, .bw-field textarea { padding: 0.85rem 1rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border); color: var(--text); font-family: var(--font-display); font-size: 1rem; letter-spacing: 0; line-height: 1.5; resize: vertical; transition: border-color var(--d-fast) var(--easing-out); } .bw-field input:focus, .bw-field textarea:focus { outline: none; border-color: var(--text); } .bw-channels { border: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .bw-channels legend { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); padding: 0; } .bw-channels-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .bw-channel { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7rem 1rem; border: 1px solid var(--border); background: rgba(255,255,255,0.02); cursor: pointer; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0; color: var(--text-muted); transition: border-color var(--d-fast) var(--easing-out), color var(--d-fast) var(--easing-out); } .bw-channel:has(input:checked) { border-color: var(--text); color: var(--text); } .bw-channel input { accent-color: var(--text); } .bw-fineprint { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); line-height: 1.6; } /* Result region */ .bw-result:empty { display: none; } .bw-result { margin-top: 1.5rem; } .bw-result__card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--border); background: rgba(255,255,255,0.02); } .bw-result__card--success { border-color: rgba(102,226,123,0.45); } .bw-result__card--error { border-color: rgba(255,90,90,0.55); } .bw-result__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .bw-result__icon--success { background: rgba(102,226,123,0.16); color: #66E27B; } .bw-result__icon--error { background: rgba(255,90,90,0.16); color: #FF5A5A; font-weight: 600; } .bw-result__text { flex: 1; display: flex; flex-direction: column; gap: 0.3em; } .bw-result__title { font-family: var(--font-anchor); font-size: 1.05rem; color: var(--text); } .bw-result__body { font-family: var(--font-display); font-size: 0.92rem; color: var(--text-muted); } .bw-result__reset { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); background: none; border: none; cursor: pointer; margin-top: 0.3rem; text-align: left; transition: color var(--d-fast) var(--easing-out); } .bw-result__reset:hover { color: var(--text); } /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* ---------------------------------------------------------------- 20 · RESPONSIVE — mobile-optimized ---------------------------------------------------------------- */ @media (max-width: 1024px) { #hero { grid-template-columns: 100%; grid-template-rows: 1fr auto; min-height: auto; } .hero-text { padding: clamp(7rem, 14vh, 9rem) clamp(1.5rem, 5vw, 5vw) clamp(2rem, 5vh, 3rem); justify-content: flex-start; } .hero-visual { order: 2; height: 44vh; height: 44dvh; min-height: 320px; max-height: 520px; } .sticky-visual { position: relative; height: 100%; } .nav-links { display: none; } } @media (max-width: 768px) { /* Touch-target minimums */ .cta { min-height: 48px; justify-content: center; padding: 1rem 1.5rem; } .cta--xl { min-height: 56px; } .nav-cta { min-height: 44px; padding: 0.7rem 1rem; font-size: 0.65rem; } /* Hero CTAs stack full-width */ .hero-ctas { flex-direction: column; align-items: stretch; gap: 0.6rem; } /* Headline: smaller, slightly looser line-height for mobile readability */ .t-display { font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1.02; letter-spacing: -0.01em; } .t-feature { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; letter-spacing: -0.008em; } .hero-subhead { font-size: clamp(1.05rem, 4vw, 1.25rem); line-height: 1.5; } /* Atom smaller, centered */ .hero-visual { height: 42vh; height: 42dvh; min-height: 280px; } #hero-canvas { width: 100%; height: 100%; } /* Pricing number not over-sized */ .pricing-number { font-size: clamp(3.8rem, 16vw, 6rem); line-height: 1; } .pricing-currency { font-size: 0.38em; } /* #pricing uses place-items:center → .pricing-inner is shrink-to-content. On mobile its content (auto-fit list grid + the no-wrap .pricing-live pill) expands to ~850px and overflows the viewport horizontally. Force the inner to fill its column and let the credibility pill wrap. */ .pricing-inner { width: 100%; min-width: 0; } .pricing-live { flex-wrap: wrap; justify-content: center; max-width: 100%; } /* align-items:center on the flex column sizes children to max-content; the auto-fit list grid expands to 3 columns (~850px). Cap to parent + 1 column. */ .pricing-included { max-width: 100%; grid-template-columns: 1fr; } /* Sections more padding-top so fixed nav doesn't overlap */ section { padding-top: clamp(5rem, 12vw, 7rem); padding-bottom: clamp(4rem, 10vw, 6rem); } #hero { padding-top: 0; } #services { grid-template-columns: 1fr; } .services-grid { gap: 2.5rem; } .services-primary-body, .integrations-body, .section-body, .pricing-tagline { max-width: none; /* let mobile body text use the full content width */ } .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer-brand { grid-column: 1 / -1; } .hero-meta { grid-template-columns: 1fr; gap: 0.75rem; } /* Atom watermark sized down on mobile */ .atom-watermark { width: 95vw; opacity: 0.22; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .brand { font-size: 1rem; } /* Nav-Platz @≤480: Lang-Toggle raus aus der Top-Bar (bleibt im Menü + Footer), sonst überläuft die Zeile bei 360px (Menu-Button wird abgeschnitten). */ .nav-cta { font-size: 0.6rem; padding: 0.65rem 0.85rem; } .menu-toggle { padding: 0.5rem 0.65rem; } #nav { padding: 0.85rem 1rem; gap: 0.6rem; } .hero-text { padding-top: 6rem; } .t-display { font-size: clamp(2.2rem, 12vw, 3.2rem); } } /* ---------------------------------------------------------------- 21 · REDUCED MOTION ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* html:not([data-force-motion]) gated: der QA-Hook ?motion=1 (js/motion.js) erlaubt Volle-Motion-Abnahme auf Hosts mit OS-erzwungenem reduced-motion. Ohne den Hook gilt alles hier unverändert. */ html:not([data-force-motion]) *, html:not([data-force-motion]) *::before, html:not([data-force-motion]) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Glyph layer + visual atmosphere stays — purely atmospheric, no motion */ html:not([data-force-motion]) .scroll-cue { display: none; } html:not([data-force-motion]) #cursor { display: none; } html:not([data-force-motion]) body { cursor: auto; } html:not([data-force-motion]) .hero-text { opacity: 1 !important; } html:not([data-force-motion]) .hero-status { opacity: 1 !important; } html:not([data-force-motion]) .hero-caret { animation: none !important; opacity: 1 !important; } html:not([data-force-motion]) .status-dot { animation: none !important; } html:not([data-force-motion]) .visual-glow { animation: none !important; opacity: 0.85 !important; } html:not([data-force-motion]) .logo-atom { animation: none !important; } } /* [CRITICAL:END] */ /* ---------------------------------------------------------------- 23 · UTILITIES ---------------------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ════════════════════════════════════════════════════════════════ ═══ 24 · POLISH LAYER — Hingucker-Upgrade ═══ ═══ Adds atmosphere, drama, density. No layout breakers. ═══ ════════════════════════════════════════════════════════════════ */ /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* — 24·1 ATMOSPHERE: film grain + page vignette — */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; } body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8999; background: radial-gradient(ellipse 120% 80% at 50% 50%, transparent 0%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); } /* — 24·2 HERO VISUAL: spotlight + bigger atom + overlays — */ .sticky-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(125, 211, 252, 0.06) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 60%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.025) 0%, transparent 70%); z-index: 1; pointer-events: none; } .sticky-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 88px 88px, linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 88px 88px; mask-image: radial-gradient(ellipse 60% 60% at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, black 30%, transparent 75%); z-index: 1; pointer-events: none; opacity: 0.55; } /* Atom: deutlich größer und mit Aura */ .atom-3d-inner { width: min(78%, 720px) !important; } .atom-3d::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(85%, 780px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(201, 168, 107, 0.09) 18%, transparent 55%); filter: blur(20px); z-index: 1; pointer-events: none; animation: aura-breathe 7.5s ease-in-out infinite; } @keyframes aura-breathe { 0%, 100% { opacity: 0.62; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } } .atom-3d-ring { border-color: rgba(255, 255, 255, 0.92); border-width: 1.2px; box-shadow: 0 0 18px rgba(255, 255, 255, 0.18), inset 0 0 18px rgba(125, 211, 252, 0.08); } .atom-3d-core { width: 10px !important; height: 10px !important; margin: -5px 0 0 -5px !important; box-shadow: 0 0 14px rgba(255, 255, 255, 1), 0 0 36px rgba(125, 211, 252, 0.55), 0 0 80px rgba(125, 211, 252, 0.20) !important; } /* [CRITICAL:END] */ /* Hero-Visual Overlay-Telemetry — corner counters + spec marks */ .hero-visual-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 6; font-family: var(--font-mono); color: var(--text-faint); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; } .hero-visual-overlay > * { position: absolute; } .hvo-top-left { top: clamp(1.5rem, 3vw, 2.5rem); left: clamp(1.5rem, 3vw, 2.5rem); display: flex; align-items: center; gap: 0.55em; } .hvo-top-left::before { content: ''; width: 6px; height: 6px; background: #66E27B; border-radius: 50%; box-shadow: 0 0 8px rgba(102, 226, 123, 0.8); animation: status-pulse 2.4s ease-in-out infinite; } .hvo-top-right { top: clamp(1.5rem, 3vw, 2.5rem); right: clamp(1.5rem, 3vw, 2.5rem); text-align: right; display: flex; flex-direction: column; gap: 0.3em; } .hvo-top-right .hvo-row { display: inline-flex; gap: 0.5em; align-items: center; justify-content: flex-end; } .hvo-top-right .hvo-k { color: var(--text-ghost); } .hvo-top-right .hvo-v { color: var(--text); font-weight: 500; } .hvo-bot-left { bottom: clamp(1.5rem, 3vw, 2.5rem); left: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 0.5em; max-width: 22ch; } .hvo-bot-left .hvo-tick { display: inline-flex; gap: 0.65em; align-items: center; font-size: 0.6rem; letter-spacing: 0.22em; color: var(--text-muted); } .hvo-bot-left .hvo-tick::before { content: ''; width: 14px; height: 1px; background: var(--text-faint); flex-shrink: 0; } .hvo-bot-right { bottom: clamp(1.5rem, 3vw, 2.5rem); right: clamp(1.5rem, 3vw, 2.5rem); color: var(--text); font-size: 0.92rem; letter-spacing: 0.2em; font-weight: 500; display: inline-flex; gap: 0.4em; align-items: baseline; } .hvo-bot-right .hvo-sep { color: var(--text-ghost); } .hvo-bot-right .hvo-total { color: var(--text-faint); font-size: 0.78rem; } /* corner marks (tech-blueprint feel) */ .hero-visual-overlay::before, .hero-visual-overlay::after { content: ''; position: absolute; width: 18px; height: 18px; } .hero-visual-overlay::before { top: clamp(1rem, 2.2vw, 1.6rem); left: clamp(1rem, 2.2vw, 1.6rem); border-top: 1px solid var(--border-hover); border-left: 1px solid var(--border-hover); } .hero-visual-overlay::after { bottom: clamp(1rem, 2.2vw, 1.6rem); right: clamp(1rem, 2.2vw, 1.6rem); border-bottom: 1px solid var(--border-hover); border-right: 1px solid var(--border-hover); } /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* Node-Labels mit Plate-Hintergrund (besser lesbar über Aura) */ .atom-node-label { padding: 0.22em 0.5em; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid var(--border); font-size: 0.6rem !important; letter-spacing: 0.26em !important; } /* [CRITICAL:END] */ /* Tablet — slim down overlay, hide tick marks + secondary rows */ @media (max-width: 1100px) { .hvo-bot-left { display: none; } .hvo-top-right .hvo-row:nth-child(2) { display: none; } } /* Hide overlay on narrow viewports — keeps focus on atom */ @media (max-width: 768px) { .hero-visual-overlay { display: none; } } /* — 24·3 PRICING DRAMA: spotlight, live-pill, bigger watermark — */ #pricing { position: relative; isolation: isolate; } #pricing::before { content: ''; position: absolute; left: 50%; top: 38%; width: min(80vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 50%, rgba(201, 168, 107, 0.12) 0%, rgba(255, 255, 255, 0.05) 18%, transparent 55%); filter: blur(40px); pointer-events: none; z-index: 0; animation: aura-breathe 9s ease-in-out infinite; } #pricing .pricing-inner { position: relative; z-index: 2; } /* Live-Slots Pill — knappheit + glaubwürdigkeit */ .pricing-live { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.5em 1em; border: 1px solid var(--border-hover); background: rgba(255, 255, 255, 0.04); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); position: relative; z-index: 2; } .pricing-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(201, 168, 107, 0.18), 0 0 14px rgba(201, 168, 107, 0.7); animation: status-pulse 2.4s ease-in-out infinite; } .pricing-live strong { color: var(--text); font-weight: 500; letter-spacing: 0.2em; } /* Pricing number — slightly more dramatic + glow */ .pricing-number { text-shadow: 0 0 60px rgba(201, 168, 107, 0.22), 0 0 30px rgba(255, 255, 255, 0.08); position: relative; } /* render number larger and a touch tighter */ .pricing-amount { font-size: clamp(5.5rem, 13vw, 13rem); } .pricing-currency { font-size: 0.36em !important; color: var(--text); } /* Watermark larger and slow rotate */ #pricing .atom-watermark { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; opacity: 0.07; pointer-events: none; } #pricing .atom-watermark i { display: block; width: min(74vw, 820px); aspect-ratio: 1; background-image: radial-gradient(circle, transparent 49.4%, rgba(255,255,255,0.55) 49.6%, rgba(255,255,255,0.55) 50.0%, transparent 50.2%); background-size: 100% 32%, 100% 32%, 100% 32%; background-repeat: no-repeat; background-position: 50% 50%; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; animation: atom-spin-slow 90s linear infinite; position: relative; } #pricing .atom-watermark i::before, #pricing .atom-watermark i::after { content: ''; position: absolute; inset: 8% 0; border: 1px solid rgba(255,255,255,0.32); border-radius: 50%; } #pricing .atom-watermark i::before { transform: rotate(60deg); } #pricing .atom-watermark i::after { transform: rotate(120deg); } @keyframes atom-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Anchor sentence — visually stronger card */ .pricing-anchor { position: relative; padding: 1.4rem 1.6rem !important; background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%); border: 1px solid var(--border) !important; border-radius: 0; font-style: italic; } .pricing-anchor::before { content: 'Marktvergleich'; position: absolute; top: -0.55em; left: 1rem; padding: 0 0.6em; background: var(--bg); font-family: var(--font-mono); font-style: normal; font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); } /* — 24·4 STATS BAR (NEW SECTION) — */ #stats { position: relative; padding-block: clamp(4rem, 8vw, 7rem) !important; padding-inline: clamp(1.5rem, 4vw, 5vw); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.012) 0%, transparent 60%); } #stats::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--line-faint) 1px, transparent 1px) 0 0 / 14% 100%; pointer-events: none; opacity: 0.6; } .stats-inner { position: relative; z-index: 1; max-width: 90rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem); align-items: end; } .stat-cell { display: flex; flex-direction: column; gap: 0.6rem; } .stat-cell .stat-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(2.6rem, 1.3rem + 4vw, 6rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.02em; color: var(--text); display: inline-flex; align-items: baseline; gap: 0.05em; } .stat-cell .stat-num small { font-size: 0.34em; font-weight: 400; color: var(--text-muted); letter-spacing: 0.04em; } .stat-cell .stat-key { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); } .stat-cell .stat-cap { font-family: var(--font-anchor); font-style: italic; font-variation-settings: "opsz" 36, "SOFT" 50; font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem); color: var(--text-muted); line-height: 1.45; margin-top: 0.4rem; } .stat-cell .stat-bar { width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent-soft), var(--border) 70%); margin-top: 0.6rem; position: relative; overflow: hidden; } .stat-cell .stat-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--text), transparent); transform: translateX(-100%); animation: stat-shimmer 3.6s ease-in-out infinite; } .stat-cell:nth-child(2) .stat-bar::after { animation-delay: 0.4s; } .stat-cell:nth-child(3) .stat-bar::after { animation-delay: 0.8s; } .stat-cell:nth-child(4) .stat-bar::after { animation-delay: 1.2s; } @keyframes stat-shimmer { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } @media (max-width: 768px) { .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.4rem; } #stats::before { background-size: 25% 100%; } } /* — 24·6 SECTION EYEBROW — number plate look — */ .section-eyebrow { display: inline-flex !important; align-items: center; gap: 0.9em; } .section-eyebrow .section-num { display: inline-flex; align-items: center; padding: 0.32em 0.6em; border: 1px solid var(--border-hover); background: rgba(255, 255, 255, 0.04); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.24em; color: var(--text); } .section-eyebrow .section-sep { display: inline-block; width: 24px; height: 1px; background: var(--text-faint); } /* — 24·7 SERVICES SECTION — primary card frame — */ .services-primary { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%); } .services-primary::before { content: '01'; position: absolute; top: -0.2em; right: clamp(1rem, 2vw, 2rem); font-family: var(--font-mono); font-size: clamp(4rem, 8vw, 7rem); color: rgba(255,255,255,0.04); font-weight: 500; letter-spacing: -0.04em; pointer-events: none; } /* — 24·8 FINAL CTA — dramatic background — */ #final-cta { position: relative; isolation: isolate; } #final-cta .final-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(201, 168, 107, 0.10) 0%, rgba(255, 255, 255, 0.04) 18%, transparent 60%); z-index: 0; pointer-events: none; animation: aura-breathe 11s ease-in-out infinite; } #final-cta .final-cta-inner { position: relative; z-index: 2; } #final-cta .atom-watermark { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; opacity: 0.05; pointer-events: none; } #final-cta .atom-watermark i { width: min(70vw, 900px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; position: relative; animation: atom-spin-slow 120s linear infinite; } #final-cta .atom-watermark i::before, #final-cta .atom-watermark i::after { content: ''; position: absolute; inset: 8% 0; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%; } #final-cta .atom-watermark i::before { transform: rotate(60deg); } #final-cta .atom-watermark i::after { transform: rotate(120deg); } .final-cta-trust { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; margin-top: clamp(2.5rem, 4vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--border); max-width: 48rem; width: 100%; } .final-cta-trust li { display: flex; flex-direction: column; gap: 0.25rem; text-align: center; } .final-cta-trust .trust-key { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-faint); } .final-cta-trust .trust-val { font-family: var(--font-display); font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.18rem); font-weight: 500; color: var(--text); letter-spacing: -0.005em; } /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* — 24·9 Primary CTA: SOLID white fill — maximaler Kontrast für Conversion-Visibility — */ .cta--primary { background: var(--text); color: var(--bg); border-color: var(--text); } .cta--primary:hover, .cta--primary:focus-visible { background: rgba(255, 255, 255, 0.92); color: var(--bg); border-color: var(--text); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 44px 8px rgba(255, 255, 255, 0.16); } .cta--primary .cta-bracket { color: rgba(0, 0, 0, 0.55); } .cta--primary:hover .cta-bracket, .cta--primary:focus-visible .cta-bracket { color: var(--bg); } /* Sheen would be invisible on white — disable inner gradient overlay */ .cta--primary::before { display: none; } /* [CRITICAL:END] */ /* — 24·10 Section transition: connector dot + faint divider — */ section + section { position: relative; } section + section::before { content: ''; position: absolute; top: -1px; left: 50%; width: 8px; height: 8px; border: 1px solid var(--border-hover); background: var(--bg); border-radius: 50%; transform: translate(-50%, -50%); z-index: 5; } /* nicht für Hero unmittelbar nach
, nicht für stats double-rule */ #hero + section::before, #stats + section::before { display: none; } /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* — 24·11 reduced-motion safety — */ @media (prefers-reduced-motion: reduce) { html:not([data-force-motion]) .atom-3d::before, html:not([data-force-motion]) #pricing::before, html:not([data-force-motion]) #final-cta .final-cta-bg { animation: none !important; } } /* [CRITICAL:END] */ /* ════════════════════════════════════════════════════════════════ ═══ 25 · POST-VETES STRUCTURE — Why/Process/Principles ═══ ════════════════════════════════════════════════════════════════ */ /* — 25·1 WHY — asymmetrisches Bento Grid — */ #why { position: relative; } /* ============================================================ Garantieschein (Warranty Plate) — replaces the why-bento. Static = fully readable (etched). Pointer-etch is a JS enhancement. ============================================================ */ .why-plate-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); max-width: 90rem; margin: 0 auto; align-items: stretch; } .why-plate { position: relative; display: flex; flex-direction: column; gap: clamp(1.3rem, 2.2vw, 2rem); padding: clamp(1.8rem, 3vw, 3rem); background: var(--surface); border: 1px solid var(--border); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); /* faint engraving guideline ruling */ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px); background-size: 100% 2.4rem; background-position: 0 5rem; overflow: hidden; } .why-plate-id { align-self: flex-start; color: var(--text-faint); } .why-plate-quote { margin: 0; display: flex; gap: 0.6rem; } .why-plate-quote .why-quote-mark { font-family: var(--font-anchor); font-size: 2.2rem; line-height: 0.8; color: var(--text-faint); } .why-plate-quote p { margin: 0; font-family: var(--font-anchor); font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 70; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); line-height: 1.2; letter-spacing: -0.012em; color: var(--text); max-width: 26ch; } .why-etch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; } .why-etch-line { display: grid; grid-template-columns: 2.2em 1fr; gap: 0.9em; align-items: baseline; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); } .why-etch-line:last-child { border-bottom: none; padding-bottom: 0; } .why-etch-idx { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--accent-soft); } .why-etch-text { font-family: var(--font-display); font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem); line-height: 1.5; color: var(--text-muted); } .why-plate-cite { margin: 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); line-height: 1.6; } .why-sats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.8rem, 1.4vw, 1.2rem); } .why-sat { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.2rem, 2vw, 1.6rem); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.012); transition: border-color var(--d-normal) var(--easing-out), background var(--d-normal) var(--easing-out); } .why-sat:hover { border-color: var(--border-hover); background: rgba(255, 255, 255, 0.03); } .why-sat-idx { color: var(--text-faint); } .why-sat-h { margin: 0; font-family: var(--font-anchor); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); font-variation-settings: "opsz" 48, "SOFT" 60; line-height: 1.2; color: var(--text); } @media (max-width: 860px) { .why-plate-grid { grid-template-columns: 1fr; } .why-sats { flex-direction: row; flex-wrap: wrap; } .why-sat { flex: 1 1 200px; } } @media (max-width: 560px) { /* Option B: kompakte 3er-Chip-Reihe statt 3 hoher Leer-Kaesten. Vorher liess flex-direction:column die geerbte flex-basis:200px als HOEHE wirken -> 3x 200px-Boxen mit je einem Wort = Leerraum/billig. display:grid macht die flex-basis irrelevant -> Zellen schmiegen sich an den Inhalt, 3 nebeneinander, gleiche Hoehe. */ .why-sats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .why-sat { padding: 0.8rem 0.6rem; gap: 0.3rem; min-width: 0; } .why-sat-idx { font-size: 0.6rem; } .why-sat-h { font-size: 0.9rem; line-height: 1.15; letter-spacing: -0.01em; } } /* — 25·2 PROCESS — Tab navigation + panels — */ #process { position: relative; isolation: isolate; } #process::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(60vw, 700px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 50%, rgba(125,211,252,0.05) 0%, transparent 60%); filter: blur(36px); pointer-events: none; z-index: 0; opacity: 0.7; } .process-stage { position: relative; z-index: 1; max-width: 84rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); isolation: isolate; } /* Atom-Watermark behind process tabs — rotates 72° on tab change */ .process-watermark { position: absolute; top: 50%; right: -8%; width: clamp(280px, 30vw, 480px); aspect-ratio: 1; transform: translateY(-50%) rotate(0deg); color: var(--text); opacity: 0.06; pointer-events: none; z-index: 0; transition: opacity var(--d-slow) var(--easing-out); will-change: transform, opacity; } .process-watermark svg { width: 100%; height: 100%; } .process-stage:hover .process-watermark { opacity: 0.09; } @media (max-width: 768px) { .process-watermark { right: -30%; width: 60vw; opacity: 0.04; } } .process-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; } /* Active-indicator bar across the bottom */ .process-tabs::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 20%; height: 1px; background: var(--text); transition: transform 0.5s var(--easing-out); } .process-tabs[data-active="2"]::after { transform: translateX(100%); } .process-tabs[data-active="3"]::after { transform: translateX(200%); } .process-tabs[data-active="4"]::after { transform: translateX(300%); } .process-tabs[data-active="5"]::after { transform: translateX(400%); } .process-tab { appearance: none; background: transparent; border: none; border-right: 1px solid var(--border); padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.8rem); display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; text-align: left; cursor: pointer; color: var(--text-faint); transition: color var(--d-fast) var(--easing-out), background var(--d-fast) var(--easing-out); font-family: inherit; } .process-tab:last-child { border-right: none; } .process-tab:hover { color: var(--text-muted); background: rgba(255,255,255,0.015); } .process-tab[aria-selected="true"] { color: var(--text); background: rgba(255,255,255,0.025); box-shadow: inset 0 2px 0 var(--accent); } .process-tab:active { transform: scale(0.995); } .process-tab-num { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.26em; color: var(--text-ghost); } .process-tab[aria-selected="true"] .process-tab-num { color: var(--accent); } .process-tab-day { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: inherit; } .process-tab-name { font-family: var(--font-anchor); font-variation-settings: "opsz" 48, "SOFT" 50; font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem); font-weight: 400; letter-spacing: -0.01em; color: inherit; } .process-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; } .process-panels { position: relative; padding: clamp(2rem, 3vw, 3rem) 0; } .process-panel { display: none; max-width: 64rem; flex-direction: column; gap: 1.4rem; } .process-panel--active { display: flex; } .process-panel-tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-hover); background: rgba(255,255,255,0.025); padding: 0.4em 0.85em; align-self: flex-start; } .process-panel-h { font-family: var(--font-anchor); font-variation-settings: "opsz" 120, "SOFT" 50; font-size: var(--t-title-lg); text-wrap: balance; font-weight: 400; letter-spacing: -0.015em; line-height: 1.1; color: var(--text); max-width: 28ch; } .process-panel-p { font-family: var(--font-display); font-size: clamp(1rem, 0.92rem + 0.35vw, 1.18rem); line-height: 1.65; color: var(--text-muted); letter-spacing: -0.003em; max-width: 60ch; } .process-panel-list { display: grid; grid-template-columns: 1fr; gap: 0.7rem; padding: 0; margin: 0.4rem 0 0; list-style: none; } .process-panel-list li { display: flex; align-items: baseline; gap: 0.8em; font-family: var(--font-display); font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.05rem); color: var(--text-muted); line-height: 1.55; padding-left: 0; } .process-panel-list li::before { content: ''; width: 18px; height: 1px; background: var(--text-faint); flex-shrink: 0; margin-top: 0.55em; } @media (max-width: 860px) { .process-tabs { grid-template-columns: repeat(5, 1fr); } .process-tab { padding: 1rem 0.5rem; } .process-tab-name { font-size: 0.84rem; } .process-tab-day { display: none; } } /* Below 600px: switch from horizontal 5-tab strip to vertical stack — 5 tabs side-by-side at ~70px width is unreadable on phones. */ @media (max-width: 600px) { .process-tabs { grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: 4px; } .process-tabs::after { display: none; } /* active-bar replaced by left-border */ .process-tab { border-right: none; border-bottom: 1px solid var(--border); padding: 0.95rem 1rem; gap: 0.7rem; flex-direction: row; align-items: center; text-align: left; border-left: 3px solid transparent; transition: border-left-color var(--d-fast) var(--easing-out), background var(--d-fast) var(--easing-out); } .process-tab:last-child { border-bottom: none; } .process-tab[aria-selected="true"] { border-left-color: var(--accent); background: rgba(255, 255, 255, 0.04); box-shadow: none; } .process-tab-num { font-size: 0.62rem; min-width: 1.6rem; } .process-tab-day { display: none; } .process-tab-name { font-size: 0.92rem; } } /* — 25·3 PRINCIPLES — numbered editorial list — */ #principles { position: relative; } .principles-list { list-style: none; padding: 0; margin: 0 auto; max-width: 76rem; display: flex; flex-direction: column; } .principle-item { display: grid; grid-template-columns: clamp(80px, 12vw, 160px) 1fr; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(2rem, 3vw, 2.6rem) 0; border-bottom: 1px solid var(--border); align-items: start; } .principle-item:last-child { border-bottom: none; } .principle-num { font-family: var(--font-mono); font-size: clamp(2.4rem, 1.4rem + 2.5vw, 4.5rem); font-weight: 500; letter-spacing: -0.04em; color: rgba(255,255,255,0.18); line-height: 0.9; font-variant-numeric: tabular-nums; display: block; } .principle-body { display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; } .principle-h { font-family: var(--font-anchor); font-variation-settings: "opsz" 96, "SOFT" 50; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); font-weight: 400; letter-spacing: -0.012em; line-height: 1.15; color: var(--text); max-width: 28ch; } .principle-p { font-family: var(--font-display); font-size: clamp(0.96rem, 0.88rem + 0.3vw, 1.1rem); line-height: 1.65; color: var(--text-muted); letter-spacing: -0.003em; max-width: 52ch; } @media (max-width: 640px) { .principle-item { grid-template-columns: 1fr; gap: 0.4rem; } .principle-num { font-size: 2.2rem; } } /* ════════════════════════════════════════════════════════════════ ═══ 26 · SERVICE-ADDON DEMOS — click-to-reveal mini UIs ═══ ═══ Akkordeon innerhalb jeder Gruppe (nur 1 offen). ═══ ════════════════════════════════════════════════════════════════ */ .services-addons, .services-addons--partner { /* Hide legacy rules */ display: none !important; } /* ── Stage (LEFT) — sticky big panel — ───────────────────────── */ .services-stage { /* sticky NUR im 2-Spalten-Desktop-Layout (>=900px, siehe unten) — sonst klebt die 24rem-Demo-Box auf Mobile bei top:80px fest und zieht beim Scrollen mit / verdeckt die folgenden Sektionen. */ position: static; align-self: start; min-height: 24rem; display: grid; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 80%), radial-gradient(circle at 88% 12%, rgba(125,211,252,0.045) 0%, transparent 55%); isolation: isolate; overflow: hidden; padding: clamp(1.6rem, 2.6vw, 2.4rem); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 36px 80px -40px rgba(0,0,0,0.7); } .services-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 40px 40px; mask-image: radial-gradient(ellipse at center, black 35%, transparent 90%); pointer-events: none; opacity: 0.5; z-index: 0; } [data-stage-panel] { grid-area: 1 / 1; position: relative; z-index: 1; opacity: 1; transform: translateY(0); transition: opacity 220ms var(--easing-out), transform 240ms var(--easing-out); } [data-stage-panel].is-leaving { opacity: 0; transform: translateY(8px); } [data-stage-panel].is-entering { opacity: 0; transform: translateY(-8px); } [data-stage-panel][hidden] { display: none; } /* Default panel — services-primary moved here */ .services-default { display: flex; flex-direction: column; gap: clamp(1.2rem, 2vw, 1.8rem); justify-content: center; min-height: 22rem; } .services-stage-h { font-family: var(--font-anchor); font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.8rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--text); margin: 0; } .services-stage-h em { font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 70; } .services-stage-body { font-family: var(--font-anchor); font-style: italic; font-variation-settings: "opsz" 36, "SOFT" 50; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); line-height: 1.55; color: var(--text-muted); max-width: 42ch; margin: 0; } .services-stage-hint { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 0.6em; margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--border); max-width: 100%; } .services-stage-hint > span[aria-hidden] { color: var(--text); font-size: 1rem; } /* Demo slots — inner heading + demo body */ .services-demo-slot { display: flex; flex-direction: column; gap: 1.4rem; min-height: 22rem; } /* Mobile (<900px, einspaltig): die 22-24rem-Hoehen sind Desktop-Spalten-Match. Einspaltig erzeugen sie unter dem kurzen Demo-Inhalt eine riesige Leer-Box, die billig/unfertig wirkt. Box an den Inhalt schmiegen (kein Void mehr). */ @media (max-width: 899.98px) { /* Stabiler Boden, damit der Typewriter die Box nicht staendig wachsen/ schrumpfen laesst (Jitter -> wirkt billig). Aber deutlich unter der 24rem-Desktop-Spalten-Match-Hoehe -> kein riesiger Void mehr. */ .services-stage { min-height: 18rem; } .services-default, .services-demo-slot { min-height: 0; } } .services-demo-head { display: flex; flex-direction: column; gap: 0.7rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .services-demo-title { font-family: var(--font-anchor); font-variation-settings: "opsz" 96, "SOFT" 50; font-size: var(--t-title); font-weight: 400; letter-spacing: -0.012em; line-height: 1.1; color: var(--text); margin: 0; } .demo-chip { display: inline-block; align-self: flex-start; padding: 0.32em 0.7em; border: 1px solid var(--border-hover); background: rgba(255,255,255,0.04); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-faint); } /* ── Picks (RIGHT) — compact button list — ───────────────────── */ .addon-pick { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: start; gap: 0.4rem 0.9rem; padding: 0.95rem 0.6rem 0.95rem 0.2rem; background: transparent; border: none; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background 200ms var(--easing-out), padding-left 200ms var(--easing-out); width: 100%; } .addon-pick:hover { background: rgba(255,255,255,0.03); padding-left: 0.55rem; } .addon-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; } .addon-pick[aria-pressed="true"] { background: rgba(255,255,255,0.06); padding-left: 0.55rem; } .addon-pick[aria-pressed="true"] .addon-pick-num { color: var(--accent); } .addon-pick[aria-pressed="true"] .addon-pick-arrow { color: var(--accent); transform: translateX(2px); } .addon-pick:active { transform: scale(0.995); } .addon-pick-num { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em; color: var(--text-faint); padding-top: 0.25rem; transition: color 200ms var(--easing-out); } .addon-pick-meta { display: flex; flex-direction: column; gap: 0.2em; } .addon-pick-arrow { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); align-self: center; transition: color 200ms var(--easing-out), transform 200ms var(--easing-out); } /* ── Demo 1: Typewriter (Texterstellung) ── */ .demo-writing { display: flex; flex-direction: column; gap: 0.6rem; } .demo-writing-eyebrow { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); } .demo-writing-h { font-family: var(--font-anchor); font-variation-settings: "opsz" 96, "SOFT" 50; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 400; letter-spacing: -0.012em; line-height: 1.1; color: var(--text); margin: 0; min-height: 2.2em; } .demo-writing-cursor { display: inline-block; width: 0.06em; height: 0.8em; background: var(--text); margin-left: 0.06em; vertical-align: -0.06em; animation: caret-blink 1.05s steps(2) infinite; } .demo-writing-sub { font-family: var(--font-anchor); font-style: italic; font-variation-settings: "opsz" 36, "SOFT" 50; font-size: 1rem; color: var(--text-muted); line-height: 1.5; margin: 0; min-height: 1.5em; } /* ── Demo 2: Lang Toggle (Mehrsprachigkeit) ── */ .demo-lang-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .demo-lang-toolbar .demo-chip { margin-bottom: 0; } .demo-lang-switch { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 0.9em; border: 1px solid var(--border); } .demo-lang-opt { background: transparent; border: none; padding: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--text-faint); cursor: pointer; transition: color 200ms var(--easing-out); } .demo-lang-opt[aria-pressed="true"] { color: var(--text); } .demo-lang-sep { color: var(--text-ghost); } .demo-lang-stage { min-height: 6rem; } .demo-lang-h { font-family: var(--font-anchor); font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1; color: var(--text); margin: 0 0 0.6rem; transition: opacity 260ms var(--easing-out), transform 260ms var(--easing-out); } .demo-lang-sub { font-family: var(--font-anchor); font-style: italic; font-size: 1rem; color: var(--text-muted); line-height: 1.5; margin: 0; transition: opacity 260ms var(--easing-out) 60ms; } .demo-lang-stage.is-switching .demo-lang-h, .demo-lang-stage.is-switching .demo-lang-sub { opacity: 0; transform: translateY(-4px); } /* ── Demo 3: Booking ── */ .demo-booking { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; } .demo-booking-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-family: var(--font-mono); } .demo-booking-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border: 1px solid var(--border); background: rgba(255,255,255,0.02); cursor: pointer; transition: background 180ms var(--easing-out), border-color 180ms var(--easing-out), color 180ms var(--easing-out); color: var(--text-muted); } .demo-booking-day--header { background: transparent; border: none; color: var(--text-ghost); font-size: 0.55rem; letter-spacing: 0.18em; cursor: default; } .demo-booking-day:hover:not(.demo-booking-day--header):not(.demo-booking-day--off) { border-color: var(--border-hover); color: var(--text); } .demo-booking-day--off { opacity: 0.25; cursor: not-allowed; } .demo-booking-day--active { background: var(--text); color: var(--bg); border-color: var(--text); } .demo-booking-slots-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-faint); display: block; margin-bottom: 0.6rem; } .demo-booking-slots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .demo-booking-slot { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.55em 0.4em; border: 1px solid var(--border); background: rgba(255,255,255,0.02); text-align: center; cursor: pointer; color: var(--text-muted); transition: background 180ms var(--easing-out), border-color 180ms var(--easing-out), color 180ms var(--easing-out); } .demo-booking-slot:hover { border-color: var(--border-hover); color: var(--text); } .demo-booking-confirm { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border: 1px solid rgba(102,226,123,0.4); background: rgba(102,226,123,0.06); margin-top: 0.6rem; animation: demo-fade-in 320ms var(--easing-out); } .demo-booking-check { width: 28px; height: 28px; border-radius: 50%; background: rgba(102,226,123,0.18); color: #66E27B; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .demo-booking-confirm strong { display: block; color: var(--text); font-weight: 500; font-size: 0.95rem; } .demo-booking-confirm small { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-muted); } @keyframes demo-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Demo 4: Data Flow (CRM) ── */ .demo-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2rem; } .demo-flow-node { padding: 0.9rem 1rem; border: 1px solid var(--border); background: rgba(255,255,255,0.025); } .demo-flow-title { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-faint); display: block; margin-bottom: 0.6rem; } .demo-flow-fields { display: flex; flex-direction: column; gap: 0.35rem; } .demo-flow-fields span { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.8rem; color: var(--text-muted); } .demo-flow-fields i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; } .demo-flow-arrow { position: relative; width: 80px; height: 18px; display: flex; align-items: center; justify-content: space-around; overflow: hidden; } .demo-flow-arrow::before { content: ''; position: absolute; inset: calc(50% - 0.5px) 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--text-faint) 50%, transparent 100%); } .demo-flow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); box-shadow: 0 0 8px rgba(125,211,252,0.6); opacity: 0; } .addon-card[data-open="true"] .demo-flow-dot { animation: demo-flow-travel 1.6s linear infinite; } .addon-card[data-open="true"] .demo-flow-dot:nth-child(2) { animation-delay: 0.55s; } .addon-card[data-open="true"] .demo-flow-dot:nth-child(3) { animation-delay: 1.1s; } @keyframes demo-flow-travel { 0% { opacity: 0; transform: translateX(-30px); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(30px); } } .demo-flow-status { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); } .demo-flow-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(102,226,123,0.18); color: #66E27B; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; } /* ── Demo 5: Workflow (Prozessautomatisierung) ── */ .demo-workflow { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .demo-wf-step { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: 0.8rem 1rem; padding: 0.85rem 1rem; border: 1px solid var(--border); background: rgba(255,255,255,0.02); transition: border-color 280ms var(--easing-out), background 280ms var(--easing-out); position: relative; } .demo-wf-step::before { content: ''; position: absolute; left: calc(2.4rem - 0.5px + 0.4rem); top: 100%; width: 1px; height: 0.55rem; background: var(--border); } .demo-wf-step:last-child::before { display: none; } .demo-wf-num { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.22em; color: var(--text-faint); } .demo-wf-name { font-family: var(--font-display); font-weight: 500; color: var(--text); letter-spacing: -0.005em; } .demo-wf-desc { font-family: var(--font-display); font-size: 0.85rem; color: var(--text-muted); grid-column: 2 / 3; align-self: start; margin-top: -0.2rem; } .demo-wf-status { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--text-faint); grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; white-space: nowrap; } .demo-wf-step[data-state="running"] { border-color: var(--border-hover); background: rgba(125,211,252,0.04); } .demo-wf-step[data-state="running"] .demo-wf-status { color: var(--accent); } .demo-wf-step[data-state="done"] { border-color: rgba(102,226,123,0.35); background: rgba(102,226,123,0.04); } .demo-wf-step[data-state="done"] .demo-wf-status { color: #66E27B; } /* ── Demo 6: Chat (AI-Agenten) ── */ .demo-chat { display: flex; flex-direction: column; gap: 0.55rem; min-height: 9rem; } .demo-chat-bubble { max-width: 80%; padding: 0.65rem 0.9rem; font-family: var(--font-display); font-size: 0.92rem; line-height: 1.4; border: 1px solid var(--border); animation: demo-fade-in 320ms var(--easing-out); } .demo-chat-bubble--user { align-self: flex-end; background: rgba(255,255,255,0.05); color: var(--text); } .demo-chat-bubble--bot { align-self: flex-start; background: rgba(125,211,252,0.04); color: var(--text-muted); border-color: rgba(125,211,252,0.18); } .demo-chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 0.65rem 0.9rem; border: 1px solid var(--border); align-self: flex-start; animation: demo-fade-in 320ms var(--easing-out); } .demo-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: demo-chat-pulse 1.2s ease-in-out infinite; } .demo-chat-typing span:nth-child(2) { animation-delay: 0.2s; } .demo-chat-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes demo-chat-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } } /* ── Demo 7: Voice (Audio Waveform) ── */ .demo-voice { display: flex; flex-direction: column; gap: 1rem; } .demo-voice-status { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--text-muted); } .demo-voice-dot { width: 7px; height: 7px; border-radius: 50%; background: #66E27B; box-shadow: 0 0 0 3px rgba(102,226,123,0.18), 0 0 12px rgba(102,226,123,0.7); animation: status-pulse 2.4s ease-in-out infinite; } .demo-voice-time { font-variant-numeric: tabular-nums; color: var(--text); margin-left: auto; } .demo-voice-waveform { display: flex; align-items: center; gap: 4px; height: 56px; } .demo-voice-waveform span { flex: 1; background: linear-gradient(180deg, var(--text) 0%, rgba(125,211,252,0.55) 100%); border-radius: 2px; height: 18%; } .addon-card[data-demo="voice"][data-open="true"] .demo-voice-waveform span { animation: demo-voice-bar 1.1s ease-in-out infinite; } @keyframes demo-voice-bar { 0%, 100% { height: 14%; opacity: 0.5; } 50% { height: 88%; opacity: 1; } } /* phase-offset each bar so it ripples */ .demo-voice-waveform span:nth-child(1) { animation-delay: 0.00s; } .demo-voice-waveform span:nth-child(2) { animation-delay: 0.05s; } .demo-voice-waveform span:nth-child(3) { animation-delay: 0.10s; } .demo-voice-waveform span:nth-child(4) { animation-delay: 0.15s; } .demo-voice-waveform span:nth-child(5) { animation-delay: 0.20s; } .demo-voice-waveform span:nth-child(6) { animation-delay: 0.25s; } .demo-voice-waveform span:nth-child(7) { animation-delay: 0.30s; } .demo-voice-waveform span:nth-child(8) { animation-delay: 0.35s; } .demo-voice-waveform span:nth-child(9) { animation-delay: 0.40s; } .demo-voice-waveform span:nth-child(10) { animation-delay: 0.45s; } .demo-voice-waveform span:nth-child(11) { animation-delay: 0.50s; } .demo-voice-waveform span:nth-child(12) { animation-delay: 0.55s; } .demo-voice-waveform span:nth-child(13) { animation-delay: 0.60s; } .demo-voice-waveform span:nth-child(14) { animation-delay: 0.65s; } .demo-voice-waveform span:nth-child(15) { animation-delay: 0.70s; } .demo-voice-waveform span:nth-child(16) { animation-delay: 0.75s; } .demo-voice-waveform span:nth-child(17) { animation-delay: 0.80s; } .demo-voice-waveform span:nth-child(18) { animation-delay: 0.85s; } .demo-voice-waveform span:nth-child(19) { animation-delay: 0.90s; } .demo-voice-waveform span:nth-child(20) { animation-delay: 0.95s; } .demo-voice-transcript { font-family: var(--font-anchor); font-style: italic; font-size: 0.95rem; color: var(--text-muted); line-height: 1.4; margin: 0; } /* Responsive — squeeze grids on small screens */ @media (max-width: 640px) { .demo-booking { grid-template-columns: 1fr; } .demo-flow { grid-template-columns: 1fr; gap: 0.6rem; } .demo-flow-arrow { width: 100%; height: 24px; transform: rotate(90deg); } } @media (prefers-reduced-motion: reduce) { html:not([data-force-motion]) .addon-card[data-open="true"] .demo-flow-dot, html:not([data-force-motion]) .addon-card[data-demo="voice"][data-open="true"] .demo-voice-waveform span, html:not([data-force-motion]) .demo-chat-typing span { animation: none !important; } html:not([data-force-motion]) .demo-voice-waveform span { height: 50%; } } /* — 25·CFG CONFIGURATOR — interactive live mock — */ /* Section-head is integrated into the left controls column, not stacked above. Keeps preview in view immediately. */ #configurator { position: relative; isolation: isolate; padding-block: clamp(3rem, 2rem + 4vw, 6rem); } .cfg-stage { display: grid; grid-template-columns: minmax(300px, 36%) 1fr; gap: clamp(2rem, 4vw, 4rem); max-width: 90rem; margin: 0 auto; align-items: start; } .cfg-controls { display: flex; flex-direction: column; gap: 1.6rem; } .cfg-head { display: flex; flex-direction: column; gap: 0.9rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border); margin-bottom: 0.4rem; } .cfg-eyebrow-lbl { display: inline-flex; align-items: center; gap: 0.9em; } .cfg-h-section { font-family: var(--font-anchor); font-variation-settings: "opsz" 96, "SOFT" 50; font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--text); margin: 0; max-width: 18ch; } .cfg-h-section em { font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 70; } .cfg-fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; } .cfg-legend { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); padding: 0; } .cfg-options { display: flex; flex-direction: column; gap: 0.5rem; } .cfg-opt { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--text-muted); text-align: left; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: -0.005em; cursor: pointer; transition: background var(--d-fast) var(--easing-out), border-color var(--d-fast) var(--easing-out), color var(--d-fast) var(--easing-out); } .cfg-opt:hover { background: rgba(255,255,255,0.045); color: var(--text); border-color: var(--border-hover); } .cfg-opt[aria-pressed="true"] { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); } .cfg-opt:active { transform: scale(0.99); } .cfg-opt-num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--text-faint); } .cfg-opt[aria-pressed="true"] .cfg-opt-num { color: var(--accent); } .cfg-opt-label { font-weight: 400; } .cfg-note { font-family: var(--font-anchor); font-style: italic; font-variation-settings: "opsz" 24, "SOFT" 50; font-size: 0.85rem; line-height: 1.5; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 1.2rem; max-width: 36ch; } /* ────────────────────────────────────────────────────────── Preview — 3D-perspective Card mit pro-Branche eigener Direction Layers (von hinten nach vorne): 1. cfg-layer--bg — solid bg per industry 2. cfg-pattern — texture overlay 3. cfg-glow — radial accent glow 4. cfg-browser — Chrome-style frame 5. cfg-mock — content (hero-visual, badge, text, CTAs, stats) 6. cfg-glass — top glass reflection (subtle) ────────────────────────────────────────────────────────── */ .cfg-perspective { position: relative; perspective: 1600px; perspective-origin: 50% 50%; } .cfg-preview { position: relative; aspect-ratio: 16 / 11; border: 1px solid var(--cfg-border, var(--border)); display: grid; grid-template-rows: auto 1fr; overflow: hidden; transform-style: preserve-3d; transition: transform 360ms var(--easing-out), border-color var(--d-slow) var(--easing-out); will-change: transform; background: var(--cfg-bg, var(--bg)); box-shadow: 0 60px 120px -40px rgba(0,0,0,0.9), 0 24px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04); } .cfg-layer--bg { position: absolute; inset: 0; z-index: 0; background: var(--cfg-bg-gradient, transparent); transition: background var(--d-slow) var(--easing-out); } .cfg-glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.025) 100%); mix-blend-mode: overlay; } .cfg-browser { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); } .cfg-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); } .cfg-dot:nth-child(1) { background: rgba(255,95,86,0.65); } .cfg-dot:nth-child(2) { background: rgba(255,189,46,0.65); } .cfg-dot:nth-child(3) { background: rgba(40,200,64,0.65); } .cfg-url { margin-left: 0.8rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--text-faint); } .cfg-mock { position: relative; z-index: 2; padding: clamp(1.5rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 2.8rem) clamp(1.2rem, 2vw, 2rem); display: flex; flex-direction: column; gap: 0.7rem; justify-content: flex-end; } .cfg-mock-eyebrow { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cfg-eyebrow, var(--text-faint)); } .cfg-mock-h { font-family: var(--cfg-font-h, var(--font-anchor)); font-variation-settings: var(--cfg-font-h-vars, "opsz" 120, "SOFT" 50); font-size: clamp(2rem, 1rem + 3vw, 3.6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; color: var(--cfg-h, var(--text)); margin: 0; } .cfg-mock-h em { font-style: italic; font-variation-settings: var(--cfg-font-h-em-vars, "opsz" 96, "SOFT" 70); } .cfg-mock-sub { font-family: var(--cfg-font-sub, var(--font-anchor)); font-style: italic; font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.18rem); line-height: 1.45; color: var(--cfg-sub, var(--text-muted)); max-width: 38ch; margin: 0 0 0.6rem; } .cfg-mock-cta-row { display: inline-flex; gap: 0.55rem; flex-wrap: wrap; } .cfg-mock-cta { display: inline-block; padding: 0.55rem 0.95rem; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; line-height: 1; border: 1px solid var(--cfg-border, var(--border-hover)); color: var(--cfg-cta-c, var(--text)); } .cfg-mock-cta--solid { background: var(--cfg-cta-bg, rgba(255,255,255,0.08)); } .cfg-mock-cta--ghost { background: transparent; color: var(--cfg-sub, var(--text-muted)); border-color: var(--cfg-border, var(--border)); } .cfg-mock-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 0.4rem 2rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--cfg-border, var(--border)); } .cfg-mock-stats > span { display: flex; flex-direction: column; gap: 0.15rem; } .cfg-mock-stats b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 500; color: var(--cfg-h, var(--text)); letter-spacing: -0.01em; } .cfg-mock-stats small { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cfg-eyebrow, var(--text-ghost)); } /* Background layers — grid + glow */ .cfg-pattern { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.6; background: var(--cfg-pattern, none); transition: background var(--d-slow) var(--easing-out), opacity var(--d-slow) var(--easing-out); } .cfg-grid { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 48px 48px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%); opacity: 0.55; pointer-events: none; } .cfg-glow { position: absolute; inset: 0; z-index: 2; background: var(--cfg-glow, radial-gradient(circle at 70% 30%, rgba(220,160,130,0.16) 0%, transparent 55%)); pointer-events: none; transition: background var(--d-slow) var(--easing-out); transition: background var(--d-slow) var(--easing-out); } /* ── Direction themes (applied via data-direction on .cfg-preview) ── */ /* ──────────────────────────────────────────────────────────── FLOATING HERO-VISUAL — per-industry SVG decoration top-right ────────────────────────────────────────────────────────────*/ .cfg-hero-visual { position: absolute; top: 14%; right: 6%; width: 22%; max-width: 130px; aspect-ratio: 1; z-index: 3; pointer-events: none; transform: translateZ(40px); /* float forward in 3D space */ } .cfg-hv-shape { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cfg-accent, var(--text-faint)); opacity: 0; transition: opacity var(--d-slow) var(--easing-out); filter: drop-shadow(0 0 12px var(--cfg-accent-glow, transparent)); } /* Show only the shape matching active industry */ .cfg-preview[data-industry="restaurant"] .cfg-hv-shape--restaurant, .cfg-preview[data-industry="beauty"] .cfg-hv-shape--beauty, .cfg-preview[data-industry="craft"] .cfg-hv-shape--craft, .cfg-preview[data-industry="medical"] .cfg-hv-shape--medical { opacity: 1; animation: cfg-hv-float 6s ease-in-out infinite; } @keyframes cfg-hv-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -6px, 0) rotate(1deg); } } /* ──────────────────────────────────────────────────────────── FLOATING BADGE — pulsing status pill, upper-left content area ────────────────────────────────────────────────────────────*/ .cfg-badge { position: absolute; top: clamp(1.2rem, 2vw, 1.8rem); left: clamp(1.5rem, 3vw, 2.8rem); z-index: 3; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.85rem; border: 1px solid var(--cfg-accent, rgba(255,255,255,0.25)); border-radius: 999px; background: var(--cfg-badge-bg, rgba(0,0,0,0.4)); backdrop-filter: blur(6px); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cfg-accent, var(--text)); transform: translateZ(50px); transition: color var(--d-slow) var(--easing-out), background var(--d-slow) var(--easing-out), border-color var(--d-slow) var(--easing-out); } .cfg-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cfg-accent, var(--text)); box-shadow: 0 0 0 3px var(--cfg-badge-dot-ring, rgba(255,255,255,0.12)); animation: cfg-badge-pulse 2.4s ease-in-out infinite; } @keyframes cfg-badge-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } } /* ──────────────────────────────────────────────────────────── BROWSER FRAME — verstärkt mit Lock-Indicator ────────────────────────────────────────────────────────────*/ .cfg-browser-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cfg-fg-faint, rgba(255,255,255,0.35)); } .cfg-browser-lock { font-size: 0.7rem; filter: grayscale(0.4); } /* ════════════════════════════════════════════════════════════ ═══ BRANCHEN-PRESETS — pro Industry komplett anderer Look ════════════════════════════════════════════════════════════ */ /* 01 · RESTAURANT — Warm Editorial, deep cocoa + gold accent */ .cfg-preview[data-industry="restaurant"] { --cfg-bg: #1a0f08; --cfg-fg: #f5ecd9; --cfg-fg-faint: rgba(245,236,217,0.5); --cfg-accent: #C9A86B; --cfg-accent-glow: rgba(201,168,107,0.25); --cfg-border: rgba(201,168,107,0.22); --cfg-badge-bg: rgba(26,15,8,0.85); --cfg-badge-dot-ring: rgba(201,168,107,0.2); --cfg-eyebrow: rgba(201,168,107,0.85); --cfg-h: #f5ecd9; --cfg-sub: rgba(245,236,217,0.78); --cfg-cta-bg: rgba(201,168,107,0.22); --cfg-cta-c: #f5ecd9; --cfg-bg-gradient: radial-gradient(ellipse 100% 70% at 50% 110%, rgba(201,168,107,0.16) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 10% 0%, rgba(180,120,80,0.12) 0%, transparent 55%); --cfg-pattern: radial-gradient(circle at 25% 35%, rgba(245,236,217,0.04) 1px, transparent 1.5px) 0 0 / 32px 32px, radial-gradient(circle at 75% 65%, rgba(245,236,217,0.025) 1px, transparent 1.5px) 0 0 / 32px 32px; --cfg-glow: radial-gradient(circle at 80% 25%, rgba(201,168,107,0.22) 0%, transparent 50%); } .cfg-preview[data-industry="restaurant"] .cfg-mock-h { font-family: var(--font-anchor); font-variation-settings: "opsz" 144, "SOFT" 65; } .cfg-preview[data-industry="restaurant"] .cfg-mock-h em { font-style: italic; color: var(--cfg-accent); } /* 02 · BEAUTY — Luxury Copper, deep slate + warm metallic */ .cfg-preview[data-industry="beauty"] { --cfg-bg: #14181d; --cfg-fg: #f8f5f0; --cfg-fg-faint: rgba(248,245,240,0.5); --cfg-accent: #B97352; --cfg-accent-glow: rgba(185,115,82,0.3); --cfg-border: rgba(185,115,82,0.25); --cfg-badge-bg: rgba(20,24,29,0.85); --cfg-badge-dot-ring: rgba(185,115,82,0.2); --cfg-eyebrow: rgba(185,115,82,0.85); --cfg-h: #f8f5f0; --cfg-sub: rgba(248,245,240,0.78); --cfg-cta-bg: rgba(185,115,82,0.18); --cfg-cta-c: #f8f5f0; --cfg-bg-gradient: radial-gradient(ellipse 80% 60% at 75% 110%, rgba(185,115,82,0.22) 0%, transparent 55%), linear-gradient(135deg, rgba(20,24,29,0) 0%, rgba(185,115,82,0.05) 100%); --cfg-pattern: repeating-linear-gradient(135deg, rgba(185,115,82,0.025) 0px, rgba(185,115,82,0.025) 1px, transparent 1px, transparent 8px); --cfg-glow: radial-gradient(ellipse 60% 40% at 30% 30%, rgba(185,115,82,0.3) 0%, transparent 60%); } .cfg-preview[data-industry="beauty"] .cfg-mock-h { font-family: var(--font-anchor); font-variation-settings: "opsz" 120, "SOFT" 80; letter-spacing: -0.03em; } .cfg-preview[data-industry="beauty"] .cfg-mock-h em { font-style: italic; color: var(--cfg-accent); } /* 03 · CRAFT — Industrial Blueprint, gunmetal + steel-blue */ .cfg-preview[data-industry="craft"] { --cfg-bg: #1a1d20; --cfg-fg: #e8eaed; --cfg-fg-faint: rgba(232,234,237,0.5); --cfg-accent: #5a7b8c; --cfg-accent-glow: rgba(90,123,140,0.25); --cfg-border: rgba(232,234,237,0.18); --cfg-badge-bg: rgba(26,29,32,0.9); --cfg-badge-dot-ring: rgba(90,123,140,0.25); --cfg-eyebrow: rgba(232,234,237,0.55); --cfg-h: #e8eaed; --cfg-sub: rgba(232,234,237,0.72); --cfg-cta-bg: rgba(90,123,140,0.18); --cfg-cta-c: #e8eaed; --cfg-bg-gradient: linear-gradient(180deg, rgba(90,123,140,0.04) 0%, transparent 60%); --cfg-pattern: linear-gradient(to right, rgba(232,234,237,0.04) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(to bottom, rgba(232,234,237,0.04) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(to right, rgba(232,234,237,0.08) 1px, transparent 1px) 0 0 / 96px 96px, linear-gradient(to bottom, rgba(232,234,237,0.08) 1px, transparent 1px) 0 0 / 96px 96px; --cfg-glow: radial-gradient(circle at 50% 90%, rgba(90,123,140,0.18) 0%, transparent 55%); } .cfg-preview[data-industry="craft"] .cfg-mock-h { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.015em; font-size: clamp(1.6rem, 0.8rem + 2.4vw, 2.8rem); text-transform: uppercase; } .cfg-preview[data-industry="craft"] .cfg-mock-h em { font-style: normal; font-weight: 300; color: var(--cfg-accent); } .cfg-preview[data-industry="craft"] .cfg-mock-eyebrow { color: var(--cfg-accent); } /* 04 · MEDICAL — Clean Light, warm white + sage accent — INVERT! */ .cfg-preview[data-industry="medical"] { --cfg-bg: #f4f3ee; --cfg-fg: #1c2a25; --cfg-fg-faint: rgba(28,42,37,0.5); --cfg-accent: #3F6B54; /* darkened sage: 5.49:1 on #f4f3ee (was #6E9B7D = 2.84:1, WCAG-AA fail) */ --cfg-accent-glow: rgba(110,155,125,0.2); --cfg-border: rgba(28,42,37,0.12); --cfg-badge-bg: rgba(255,255,255,0.85); --cfg-badge-dot-ring: rgba(110,155,125,0.2); --cfg-eyebrow: rgba(28,42,37,0.6); --cfg-h: #1c2a25; --cfg-sub: rgba(28,42,37,0.72); --cfg-cta-bg: rgba(110,155,125,0.16); --cfg-cta-c: #1c2a25; --cfg-bg-gradient: radial-gradient(ellipse 80% 60% at 90% 100%, rgba(110,155,125,0.18) 0%, transparent 55%); --cfg-pattern: linear-gradient(to bottom, rgba(28,42,37,0.04) 1px, transparent 1px) 0 0 / 100% 64px; --cfg-glow: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(255,255,255,0.5) 0%, transparent 60%); } .cfg-preview[data-industry="medical"] .cfg-browser { background: rgba(255,255,255,0.6); border-bottom-color: rgba(28,42,37,0.12); } .cfg-preview[data-industry="medical"] .cfg-url { color: rgba(28,42,37,0.5); } .cfg-preview[data-industry="medical"] .cfg-mock-h { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; } .cfg-preview[data-industry="medical"] .cfg-mock-h em { font-style: italic; color: var(--cfg-accent); } .cfg-preview[data-industry="medical"] .cfg-glass { background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(28,42,37,0.04) 100%); mix-blend-mode: normal; } .cfg-preview[data-industry="medical"] .cfg-mock-cta--ghost { border-color: var(--cfg-border); } @media (max-width: 900px) { .cfg-stage { grid-template-columns: 1fr; gap: 2rem; } .cfg-preview { aspect-ratio: 4 / 3; } } /* — 25·4 FINAL CTA SUBSTEXT — trust line beneath CTA-body — */ .final-cta-substext { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); margin-top: 1rem; max-width: 100%; text-align: center; } @media (max-width: 640px) { .final-cta-substext { font-size: 0.58rem; letter-spacing: 0.22em; } } /* — 25·5 Section-divider override now that we have 9 sections — ensure connector-dots still center correctly with mixed widths. */ /* [CRITICAL:START — auch inline im #critical-css, synchron halten: node scripts/build-critical-css.mjs] */ /* ════════════════════════════════════════════════════════════════ ═══ 26 · STICKY BOTTOM CTA — sales-bar shown after hero ═══ ════════════════════════════════════════════════════════════════ */ #sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; transform: translateY(100%); transition: transform 0.45s var(--easing-out); pointer-events: none; will-change: transform; } #sticky-cta.is-visible { transform: translateY(0); pointer-events: auto; } .sticky-cta-inner { margin: 0 auto; max-width: 1280px; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; padding: 0.85rem 1.6rem; padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .sticky-cta-meta { display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); min-width: 0; } .sticky-cta-price { font-weight: 600; color: var(--text); font-size: 0.96rem; letter-spacing: 0.02em; } .sticky-cta-sep { color: var(--text-ghost); } .sticky-cta-prom { color: var(--text-muted); white-space: nowrap; } .sticky-cta-btn { padding: 0.78rem 1.35rem; font-size: 0.72rem; } @media (max-width: 640px) { .sticky-cta-inner { padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px)); gap: 0.7rem; } .sticky-cta-meta { font-size: 0.66rem; gap: 0.4rem; } .sticky-cta-price { font-size: 0.82rem; } .sticky-cta-prom { display: none; } .sticky-cta-btn { padding: 0.7rem 1rem; font-size: 0.62rem; } } @media (prefers-reduced-motion: reduce) { html:not([data-force-motion]) #sticky-cta { transition: none; } } /* [CRITICAL:END] */ /* ════════════════════════════════════════════════════════════════ ═══ 27 · WOW-MOMENTE (Phase 2, Etappe 3) ═══ ═══ 1) Pricing-Ignite 2) Configurator-Sheen 3) Horizont ═══ ════════════════════════════════════════════════════════════════ */ /* — 27·1 PRICING-IGNITE — Gold-Licht-Moment, wenn die €1.000 fertig hochgezählt hat (einmal pro Session, JS: ignitePricing in app.js). Der Preis IST der Verkaufsmoment. reduced-motion: JS-Pfad läuft dort nie; Wildcard killt zusätzlich jede Animation. — */ /* Licht-Sweep über die Ziffern */ .pricing-number::after { content: ''; position: absolute; inset: -8% -14%; background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 214, 0.20) 50%, transparent 62%); transform: translateX(-130%) skewX(-12deg); opacity: 0; pointer-events: none; } .pricing-number.pricing-ignite::after { animation: pricing-sweep 1050ms var(--easing-out) 80ms; } @keyframes pricing-sweep { 0% { opacity: 0; transform: translateX(-130%) skewX(-12deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateX(130%) skewX(-12deg); } } /* Gold-Glow-Puls auf der Zahl selbst */ .pricing-ignite .pricing-amount, .pricing-ignite .pricing-currency { animation: pricing-glow-pulse 1150ms var(--easing-out); } @keyframes pricing-glow-pulse { 0% { text-shadow: 0 0 0 rgba(201, 168, 107, 0); } 32% { text-shadow: 0 0 26px rgba(221, 190, 133, 0.55), 0 0 90px rgba(201, 168, 107, 0.32); } 100% { text-shadow: 0 0 0 rgba(201, 168, 107, 0); } } /* Funken-Burst: kleine Gold-Partikel fliegen radial aus der Zahl */ .pricing-burst { position: absolute; inset: 0; pointer-events: none; } .pricing-burst i { position: absolute; left: 50%; top: 55%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 10px rgba(221, 190, 133, 0.9), 0 0 22px rgba(201, 168, 107, 0.5); opacity: 0; animation: pricing-spark var(--pd, 900ms) cubic-bezier(0.16, 0.8, 0.3, 1) forwards; } @keyframes pricing-spark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(var(--ps, 1)); } } /* — 27·2 CONFIGURATOR-SHEEN — Lichtreflex folgt dem Cursor auf der 3D-Karte (JS setzt --shx/--shy/--sheen-o im Tilt-Loop). Macht das Karten-Glas „greifbar". Gates: tilt-Pfad bailt bei hover:none + reduced-motion → Sheen existiert dort nie. — */ .cfg-glass::after { content: ''; position: absolute; inset: 0; opacity: var(--sheen-o, 0); background: radial-gradient(440px circle at var(--shx, 50%) var(--shy, 50%), rgba(255, 240, 214, 0.17) 0%, rgba(201, 168, 107, 0.07) 34%, transparent 62%); transition: opacity 600ms var(--easing-out); pointer-events: none; } /* — 27·3 GOLD-HORIZONT — feine Lichtlinie als Übergang in die Pricing-Sektion: führt das Auge vom Hero zum Verkaufsmoment. Statisch (keine Motion) → reduced-motion-neutral. — */ #pricing::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(72vw, 880px); height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 168, 107, 0.55) 28%, rgba(255, 233, 196, 0.85) 50%, rgba(201, 168, 107, 0.55) 72%, transparent); box-shadow: 0 0 22px 2px rgba(201, 168, 107, 0.30), 0 0 80px 12px rgba(201, 168, 107, 0.10); pointer-events: none; }