/* ========================================================================= COPYSTUDIO.MARKETING — global.css Design System: Dark Premium Editorial (per CI-Doc) Spec: docs/superpowers/specs/2026-04-27-copystudio-marketing-website-design.md ========================================================================= */ /* ------- Fonts (loaded via index.html Google Fonts ) ------- */ /* Poppins (display+body 400/500/600/700/800), Playfair Display Italic 700, Oswald 700/800 */ /* ------- Tokens ------- */ :root { /* === Backgrounds (Dark Premium per CI) === */ --bg-0: #000000; /* Page-Default, Hero, CTA-Final */ --bg-1: #08171F; /* Sektions-Wechsel, Cards, Panels */ --bg-2: #2F2F2F; /* UI-Elements, Trennlinien, Hovers */ /* Aliases for Marcel-inherited rules — semantic remap */ --paper: var(--bg-0); --paper-2: var(--bg-1); --paper-on-ink: #FFFFFF; --ink-deep: var(--bg-0); --line: rgba(255, 255, 255, 0.08); --line-dark: rgba(255, 255, 255, 0.14); /* === Text-Hierarchie (per CI exakt) === */ --ink: #FFFFFF; /* Headlines, primary */ --ink-body: #CCCCCC; /* Fließtext */ --ink-mute: #999999; /* Labels, Tags, Eyebrows */ --ink-deco: #555555; /* Slide-Nummern, dekorativ */ --mute: var(--ink-mute); /* Marcel alias */ --faint: var(--ink-deco); /* Marcel alias */ /* === Akzent (per CI) === */ --accent: #D95030; /* CTAs, Headlines-Akzent, Pfeile */ --accent-warm: #F08A58; /* NUR Logo-Gradient */ --accent-grad: linear-gradient(135deg, #D95030 0%, #F08A58 100%); --brand-red: var(--accent); /* Marcel alias */ --brand-red-hover: #BF4226; --accent-rgb: 217 80 48; --red-rgb: 217 80 48; /* Marcel alias */ --ink-rgb: 255 255 255; --green: #1F7A3A; --green-rgb: 31 122 58; /* === Gradienten === */ --grad-overlay-vertical: linear-gradient(to top, #000 0%, transparent 60%); --grad-overlay-side: linear-gradient(to right, #000 30%, transparent 80%); --grad-red-glow: radial-gradient(circle, rgba(217,80,48,0.3), transparent 60%); /* === Hairline + Glow === */ --hairline: 1px solid rgba(255, 255, 255, 0.08); --shadow-glow: 0 0 60px rgba(217, 80, 48, 0.18); /* === Typography === */ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Poppins', system-ui, sans-serif; --font-accent: 'Playfair Display', Georgia, serif; --font-display-cap: 'Oswald', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-display-xl: clamp(3.25rem, 5.5vw + 1rem, 6.25rem); --fs-display-l: clamp(2.25rem, 3.5vw + 0.5rem, 4rem); --fs-display-m: clamp(1.625rem, 2vw + 0.5rem, 2.5rem); --fs-heading: clamp(1.25rem, 1vw + 0.75rem, 1.5rem); --fs-body-l: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-pre: 0.75rem; --fs-proof: clamp(2.25rem, 3.5vw + 0.5rem, 4rem); --fs-numeral: clamp(4rem, 12vw, 9rem); /* "01." Editorial Section-Marker */ --fs-display: clamp(3rem, 10vw, 8rem); /* CTA-Final massive */ /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; --sp-40: 10rem; /* Section vertical rhythm — globaler Token, ~25% reduziert ggü. sp-32/sp-24 */ --section-py: 6rem; /* desktop: war 8rem (sp-32) */ --section-py-mobile: 4rem; /* mobile: war 6rem (sp-24) */ /* Radius */ --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 24px; /* Shadows */ --shadow-hair: 0 1px 0 rgba(var(--ink-rgb) / 0.06); --shadow-card: 0 1px 2px rgba(var(--ink-rgb) / 0.04), 0 8px 24px rgba(var(--ink-rgb) / 0.06); --shadow-lift: 0 2px 4px rgba(var(--ink-rgb) / 0.05), 0 16px 48px rgba(var(--ink-rgb) / 0.10); /* Container */ --container: 1280px; --container-narrow: 960px; --gutter: clamp(1.25rem, 4vw, 3rem); /* Easing — Emil Kowalski curves (stronger, crisper than defaults) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-quick: cubic-bezier(0.4, 0, 0.2, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); } /* ------- Reset & Base ------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; color: var(--ink); background: var(--paper); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--brand-red); color: #fff; } /* ------- Typography Utilities ------- */ .display { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.012em; } .display em { font-style: italic; color: var(--ink); } .pre { font-family: var(--font-body); font-size: var(--fs-pre); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mute); } .pre--red { color: var(--brand-red); } /* Pre-tagline as subtle pill — replaces the old leading hairline */ .pre { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.42em 0.95em; border: 1px solid rgba(var(--ink-rgb) / 0.12); border-radius: 999px; background: rgba(var(--ink-rgb) / 0.025); letter-spacing: 0.16em; } .pre::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .pre--red { background: rgba(var(--red-rgb) / 0.07); border-color: rgba(var(--red-rgb) / 0.28); } /* Dark sections invert the pill subtly */ .section--dark .pre, .disqualifier .pre { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); } .mute { color: var(--mute); } .faint { color: var(--faint); } .mono { font-family: var(--font-mono); font-weight: 500; } /* ------- Layout Primitives ------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-py); } @media (max-width: 768px) { .section { padding-block: var(--section-py-mobile); } } .section--dark { background: var(--ink-deep); color: var(--paper-on-ink); } .section--paper-2 { background: var(--paper-2); } /* ------- Buttons ------- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 14px 28px; border-radius: var(--r); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; cursor: pointer; border: 1px solid transparent; transition: transform 180ms var(--ease-quick), background 180ms var(--ease-quick), color 180ms var(--ease-quick), box-shadow 180ms var(--ease-quick); text-decoration: none; white-space: nowrap; } .btn--primary { background: var(--brand-red); color: #fff; } .btn--primary:hover { background: var(--brand-red-hover); transform: translateY(-1px); box-shadow: var(--shadow-lift); } .btn:active { transform: scale(0.97); transition-duration: 80ms; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-dark); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn--ghost-on-dark { background: transparent; color: var(--paper-on-ink); border-color: rgba(255, 255, 255, 0.25); } .btn--ghost-on-dark:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* ------- Navigation — floating glass pill ------- */ .nav { position: fixed; top: clamp(10px, 1.2vw, 18px); left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding-inline: clamp(12px, 3vw, 28px); pointer-events: none; /* only the pill itself takes clicks */ } .nav__pill { pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: clamp(4px, 0.5vw, 10px); padding: 6px 6px 6px 14px; background: rgba(250, 250, 247, 0.72); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border: 1px solid rgba(var(--ink-rgb) / 0.08); border-radius: 999px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 2px rgba(var(--ink-rgb) / 0.04), 0 10px 28px rgba(var(--ink-rgb) / 0.08); transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out), border-color 300ms var(--ease-out), background 300ms var(--ease-out); } .nav.is-scrolled .nav__pill { background: rgba(250, 250, 247, 0.88); border-color: rgba(var(--ink-rgb) / 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(var(--ink-rgb) / 0.06), 0 18px 44px rgba(var(--ink-rgb) / 0.12); } /* Brand — logo mark + wordmark */ .nav__brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background 220ms var(--ease-out); } .nav__brand:hover { background: rgba(var(--ink-rgb) / 0.04); } .nav__brand:active { transform: scale(0.97); } .nav__mark { display: inline-flex; width: 28px; height: 28px; color: var(--brand-red); flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(var(--red-rgb) / 0.25)); transition: transform 260ms var(--ease-out); } .nav__mark svg { width: 100%; height: 100%; } .nav__brand:hover .nav__mark { transform: rotate(-6deg); } .nav__brand-text { font-family: var(--font-display); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; color: var(--ink); } .nav__brand-text em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; } .nav__divider { width: 1px; height: 20px; background: rgba(var(--ink-rgb) / 0.12); margin-inline: 6px; } /* Nav links */ .nav__links { position: relative; display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; z-index: 1; } .nav__link { position: relative; display: inline-flex; align-items: center; padding: 8px 14px; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.005em; color: rgba(var(--ink-rgb) / 0.72); border-radius: 999px; transition: color 180ms var(--ease-out); text-decoration: none; white-space: nowrap; } .nav__link:hover { color: var(--ink); } .nav__link[aria-current="true"] { color: var(--brand-red); } /* Sliding indicator — travels behind the hovered link */ .nav__indicator { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--ind-w, 0); transform: translate3d(var(--ind-x, 0), 0, 0); background: rgba(var(--ink-rgb) / 0.06); border-radius: 999px; opacity: 0; transition: transform 300ms var(--ease-out), width 300ms var(--ease-out), opacity 200ms var(--ease-out); pointer-events: none; z-index: 0; will-change: transform, width; } .nav__links:hover + .nav__indicator, .nav__indicator.is-active { opacity: 1; } /* Primary CTA button inside the pill */ .nav__cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px 9px 18px; margin-left: 4px; background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.005em; border-radius: 999px; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 4px 10px rgba(var(--ink-rgb) / 0.22); transition: background 220ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 220ms var(--ease-out); } .nav__cta-btn:hover { background: var(--brand-red); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 18px rgba(var(--red-rgb) / 0.4); } .nav__cta-btn:active { transform: scale(0.97); } .nav__cta-btn svg { width: 14px; height: 14px; transition: transform 220ms var(--ease-out); } .nav__cta-btn:hover svg { transform: translateX(2px); } /* Mobile burger */ .nav__burger { display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; padding: 0; position: relative; border-radius: 999px; transition: background 180ms var(--ease-out); } .nav__burger:hover { background: rgba(var(--ink-rgb) / 0.05); } .nav__burger:active { transform: scale(0.92); } .nav__burger span { position: absolute; left: 50%; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; transform: translateX(-50%); transition: transform 240ms var(--ease-out), opacity 180ms var(--ease-out), top 240ms var(--ease-out); } .nav__burger span:nth-child(1) { top: 14px; } .nav__burger span:nth-child(2) { top: 19px; } .nav__burger span:nth-child(3) { top: 24px; } .nav__burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); } /* Mobile menu panel */ .nav__mobile { pointer-events: auto; position: absolute; top: calc(100% + 10px); left: 50%; width: min(92vw, 420px); transform: translateX(-50%) scale(0.96); transform-origin: top center; background: rgba(250, 250, 247, 0.96); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(var(--ink-rgb) / 0.1); border-radius: 22px; padding: 10px; opacity: 0; box-shadow: 0 20px 48px rgba(var(--ink-rgb) / 0.16); transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); } .nav__mobile[data-open="true"] { opacity: 1; transform: translateX(-50%) scale(1); } .nav__mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .nav__mobile a { display: block; padding: 12px 14px; font-size: 1rem; font-weight: 500; color: var(--ink); border-radius: 12px; text-decoration: none; transition: background 180ms var(--ease-out); } .nav__mobile a:hover { background: rgba(var(--ink-rgb) / 0.05); } .nav__mobile-cta { margin-top: 8px; justify-content: center; width: 100%; } /* Responsive — collapse the middle nav into a hamburger */ @media (max-width: 820px) { .nav__links, .nav__indicator, .nav__divider { display: none; } .nav__burger { display: inline-flex; } .nav__pill { padding: 6px 6px 6px 10px; gap: 4px; } .nav__brand-text { font-size: 0.9375rem; } } @media (max-width: 420px) { .nav__cta-btn { padding: 8px 12px; font-size: 0.75rem; } .nav__cta-btn svg { display: none; } } /* ------- Hero ------- */ .hero { position: relative; isolation: isolate; /* Room for floating nav (~76px) + breathing space to the pre-tagline */ padding-top: clamp(130px, 15vh, 180px); padding-bottom: var(--sp-12); overflow: hidden; } .hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-8); } .hero__pre { opacity: 0; transform: translateY(8px); } .hero__headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 4.6vw + 0.5rem, 5.25rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 1100px; margin: 0; color: var(--ink); text-wrap: balance; opacity: 0; transform: translateY(12px); } .hero__headline em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; color: var(--ink); position: relative; } .hero__headline em { text-decoration: underline; text-decoration-color: var(--brand-red); text-decoration-thickness: 3px; text-decoration-skip-ink: none; text-underline-offset: 0.12em; } .hero__headline em::after { content: none; } @keyframes heroUnderline { to { transform: scaleX(1); } } .hero__sub { font-size: var(--fs-body-l); line-height: 1.6; color: var(--mute); max-width: 980px; margin: 0; opacity: 0; transform: translateY(10px); } .hero__bullets { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-8); list-style: none; padding: 0; margin: var(--sp-2) 0 0; opacity: 0; transform: translateY(10px); } .hero__bullets li { display: inline-flex; align-items: flex-start; gap: 0.625rem; font-size: var(--fs-body-l); font-weight: 400; color: var(--mute); line-height: 1.6; } .hero__bullets li strong { color: inherit; font-weight: 600; } .hero__bullets svg { width: 18px; height: 18px; color: var(--brand-red); flex: 0 0 auto; margin-top: 0.3em; } .hero__cta { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(10px); } .hero__cta-secondary { gap: var(--sp-2); } .hero__cta-secondary svg { color: var(--brand-red); width: 14px; height: 14px; } .hero__cta-secondary:hover svg { color: #fff; } .hero__video-wrap { width: 100%; max-width: 980px; margin-top: var(--sp-8); /* Reserve space for the scroll-scaled video (1.28x, transform-origin top). This avoids margin/padding animation during scroll → no layout reflow. */ padding-bottom: clamp(40px, 7vw, 80px); opacity: 0; transform: translateY(20px); } .hero__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); /* GPU-accelerate the scroll-scale transform */ will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); cursor: pointer; border: 1px solid var(--line); } .hero__video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out); filter: brightness(0.72) saturate(0.92); } .hero__video:hover .hero__video-poster { transform: scale(1.02); filter: brightness(0.82) saturate(1); } /* iframe replaces everything once loaded */ .hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; z-index: 5; } .hero__video.is-playing .hero__video-poster, .hero__video.is-playing .hero__video-meta, .hero__video.is-playing .hero__video-overlay, .hero__video.is-playing .hero__video-progress { display: none; } .hero__video.is-playing { cursor: default; } /* CSS-only editorial placeholder while no poster image is available */ .hero__video-placeholder { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(232, 21, 28, 0.08) 0%, transparent 50%), linear-gradient(135deg, #0E0E12 0%, #1A1A20 40%, #0A0A0E 100%); transition: transform 600ms var(--ease-out); } .hero__video-placeholder::before, .hero__video-placeholder::after { content: ''; position: absolute; inset: 0; } .hero__video-placeholder::before { background-image: linear-gradient(to bottom, transparent 98%, rgba(255,255,255,0.02) 100%), repeating-linear-gradient(90deg, transparent 0 2px, rgba(255,255,255,0.015) 2px 3px); mix-blend-mode: screen; } .hero__video-placeholder::after { /* subtle film grain */ background-image: url("data:image/svg+xml;utf8,"); opacity: 0.08; mix-blend-mode: overlay; } .hero__video:hover .hero__video-placeholder { transform: scale(1.02); } .hero__video:hover .hero__video-poster { transform: scale(1.02); } .hero__video-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-8); background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.55) 100%); color: #fff; } /* Meta badges (top-left, top-right, bottom-right) */ .hero__video-meta { position: absolute; z-index: 2; font-size: 0.75rem; letter-spacing: 0.08em; font-weight: 500; color: rgba(255, 255, 255, 0.88); padding: 6px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; } .hero__video-meta--tl { top: 20px; left: 20px; } .hero__video-meta--tr { top: 20px; right: 20px; font-size: 0.6875rem; } .hero__video-meta--br { bottom: 28px; right: 20px; font-size: 0.75rem; } .hero__video-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 8px rgba(var(--red-rgb) / 0.6); flex-shrink: 0; } /* Play button with pulse ring */ .hero__play { width: 84px; height: 84px; border-radius: 50%; background: var(--brand-red); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(var(--red-rgb) / 0.45); transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); position: relative; z-index: 1; } .hero__play-pulse { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand-red); opacity: 0; animation: playPulse 2400ms var(--ease-out) infinite; pointer-events: none; } @keyframes playPulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } .hero__video:hover .hero__play { transform: scale(1.06); box-shadow: 0 12px 40px rgba(var(--red-rgb) / 0.6); } .hero__video:focus-visible .hero__play { outline: 2px solid #fff; outline-offset: 6px; } .hero__play svg { width: 28px; height: 28px; color: #fff; margin-left: 4px; } .hero__video:focus-visible { outline: none; } .hero__video-caption { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; opacity: 0.95; text-align: center; max-width: 46ch; line-height: 1.4; margin-top: var(--sp-2); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } /* Bottom progress line — subtle hint of video timeline */ .hero__video-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.1); z-index: 2; } .hero__video-progress-fill { width: 3%; height: 100%; background: var(--brand-red); box-shadow: 0 0 8px rgba(var(--red-rgb) / 0.6); transition: width 400ms var(--ease-out); } .hero__video:hover .hero__video-progress-fill { width: 4%; } /* Hint below the video card */ .hero__video-hint { margin: var(--sp-3) 0 0; font-size: 0.8125rem; letter-spacing: 0.01em; text-align: center; color: var(--mute); } .hero__video-hint .mono { font-size: 0.75rem; } /* ------- Hero section marker (monospace editorial label) ------- */ .hero__marker { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-6) auto 0; padding: 6px 12px; font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; } .hero__marker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 10px rgba(var(--red-rgb) / 0.6); animation: markerPulse 2.8s ease-in-out infinite; } @keyframes markerPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } } /* ------- Hero ambient background layers ------- */ .hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Grain texture — SVG noise via data URI, very subtle */ .hero__bg::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; opacity: 0.08; mix-blend-mode: multiply; } /* Hairline grid — subtle editorial structure */ .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(var(--ink-rgb) / 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--ink-rgb) / 0.035) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 85%); } /* Animated mesh — slowly shifting red-ink gradient blobs */ .hero__mesh { position: absolute; inset: -20%; background: radial-gradient(ellipse 40% 35% at 20% 30%, rgba(var(--red-rgb) / 0.08) 0%, transparent 60%), radial-gradient(ellipse 45% 40% at 80% 25%, rgba(var(--ink-rgb) / 0.04) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 50% 80%, rgba(var(--red-rgb) / 0.06) 0%, transparent 55%), radial-gradient(ellipse 35% 40% at 85% 70%, rgba(var(--ink-rgb) / 0.05) 0%, transparent 60%); filter: blur(40px); animation: heroMesh 38s ease-in-out infinite alternate; will-change: transform; } @keyframes heroMesh { 0% { transform: translate(0%, 0%) rotate(0deg) scale(1); } 50% { transform: translate(-3%, 2%) rotate(6deg) scale(1.08); } 100% { transform: translate(2%, -2%) rotate(-4deg) scale(1.04); } } /* Corner crop-marks — editorial, mouse-parallax */ .hero__crop { position: absolute; width: 28px; height: 28px; opacity: 0.22; transition: transform 220ms var(--ease-out); transform: translate(var(--px, 0), var(--py, 0)) scale(var(--sx, 1), var(--sy, 1)); } .hero__crop::before, .hero__crop::after { content: ""; position: absolute; background: var(--brand-red); } .hero__crop::before { width: 1px; height: 18px; top: 0; left: 0; } .hero__crop::after { width: 18px; height: 1px; top: 0; left: 0; } .hero__crop--tl { top: 28px; left: 28px; --sx: 1; --sy: 1; } .hero__crop--tr { top: 28px; right: 28px; --sx: -1; --sy: 1; } .hero__crop--bl { bottom: 28px; left: 28px; --sx: 1; --sy: -1; } .hero__crop--br { bottom: 28px; right: 28px; --sx: -1; --sy: -1; } /* Number ticker (renders as digit) */ .num-ticker { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .hero__mesh, .hero__marker-dot { animation: none !important; } .hero__crop { transform: translate(0,0) scale(var(--sx,1), var(--sy,1)) !important; } } @media (max-width: 640px) { .hero__grid { background-size: 48px 48px; } .hero__crop { width: 20px; height: 20px; } .hero__crop--tl { top: 16px; left: 16px; } .hero__crop--tr { top: 16px; right: 16px; } .hero__crop--bl { bottom: 16px; left: 16px; } .hero__crop--br { bottom: 16px; right: 16px; } } @media (max-width: 640px) { .hero__video-meta--tl, .hero__video-meta--tr { top: 12px; } .hero__video-meta--tl { left: 12px; } .hero__video-meta--tr { right: 12px; } .hero__video-meta--br { bottom: 18px; right: 12px; } .hero__play { width: 64px; height: 64px; } .hero__play svg { width: 22px; height: 22px; } .hero__video-caption { font-size: 0.8125rem; } } /* Staggered hero reveal — controlled via GSAP; fallback via animation-delay */ .hero__pre { animation: heroIn 700ms var(--ease-out) 100ms forwards; } .hero__headline { animation: heroIn 800ms var(--ease-out) 250ms forwards; } .hero__sub { animation: heroIn 700ms var(--ease-out) 450ms forwards; } .hero__bullets { animation: heroIn 700ms var(--ease-out) 600ms forwards; } .hero__cta { animation: heroIn 700ms var(--ease-out) 750ms forwards; } .hero__video-wrap { animation: heroIn 900ms var(--ease-out) 900ms forwards; } @keyframes heroIn { to { opacity: 1; transform: translateY(0); } } /* ------- Reveal Base (for non-hero sections, driven by GSAP) ------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } /* ------- Footer — seamless continuation of CTA section ------- */ .footer { background: var(--ink-deep); color: var(--paper-on-ink); padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(1.5rem, 2.5vw, 2rem); position: relative; overflow: hidden; margin-top: -1px; /* prevent sub-pixel line between cta + footer */ } /* Subtle grid pattern continuing from CTA — fades toward bottom */ .footer::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 90%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 90%); pointer-events: none; z-index: 0; } .footer > .container { position: relative; z-index: 1; } /* Top: Brand + Columns split */ .footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: clamp(2rem, 4vw, 4.5rem); padding-bottom: clamp(2rem, 3.5vw, 3rem); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer__brand { display: flex; flex-direction: column; gap: clamp(0.875rem, 1.5vw, 1.25rem); } .footer__logo { font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 25; font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.25rem); color: #FFFFFF; text-decoration: none; line-height: 1; letter-spacing: -0.02em; align-self: flex-start; transition: opacity 200ms var(--ease-quick); } .footer__logo:hover { opacity: 0.85; } .footer__logo em { font-style: italic; color: var(--brand-red); } .footer__tagline { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 243, 236, 0.5); line-height: 1.7; max-width: 38ch; margin: 0; } .footer__seo { font-size: 0.875rem; line-height: 1.65; color: rgba(245, 243, 236, 0.62); max-width: 46ch; margin: clamp(0.625rem, 1vw, 0.875rem) 0 0; } .footer__seo strong { color: rgba(245, 243, 236, 0.9); font-weight: 500; } /* Columns */ .footer__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); } .footer__col-heading { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-red); font-weight: 600; margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem); } .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6em; } .footer__col a { color: rgba(245, 243, 236, 0.72); text-decoration: none; font-size: 0.9375rem; line-height: 1.4; transition: color 200ms var(--ease-quick); display: inline-block; } .footer__col a:hover { color: var(--brand-red); } /* Bottom: copyright strip */ .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-top: clamp(1.5rem, 2.5vw, 2rem); flex-wrap: wrap; } .footer__bottom span, .footer__bottom a { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 243, 236, 0.42); } .footer__top-link { text-decoration: none; transition: color 200ms var(--ease-quick); } .footer__top-link:hover { color: var(--brand-red); } /* BlitzWebsite credit (Erstellt von [Logo]) — matches "© 2026 Marcel Davia Media" style */ .footer__bottom .footer__credit { display: inline-flex; align-items: center; gap: 0.55em; text-decoration: none; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 243, 236, 0.42); transition: color 220ms var(--ease-quick); } .footer__bottom .footer__credit-text { color: rgba(245, 243, 236, 0.42); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; } .footer__credit-logo { height: 16px; width: auto; display: block; /* Default: gleiche Opacity-Stufe wie der Text (0.42) */ filter: grayscale(1) brightness(2.4) opacity(0.42); transition: filter 260ms var(--ease-quick), transform 260ms var(--ease-quick); } .footer__credit:hover .footer__credit-logo { filter: none; transform: scale(1.03); } .footer__credit:hover .footer__credit-text { color: rgba(245, 243, 236, 0.95); } .footer__bottom .footer__credit:hover { color: rgba(245, 243, 236, 0.95); } @media (max-width: 720px) { .footer__top { grid-template-columns: 1fr; } .footer__columns { grid-template-columns: repeat(2, 1fr); } .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .footer__top-link { display: none; } } @media (max-width: 480px) { .footer__columns { grid-template-columns: 1fr; gap: var(--sp-6); } } /* ============================================================ SECTION HEADER (shared) ============================================================ */ .section__header { text-align: center; max-width: 1120px; margin: 0 auto var(--sp-16); } .section__header .section__headline { max-width: 30ch; margin-inline: auto; text-wrap: balance; } .section__header .section__sub { max-width: 62ch; margin-inline: auto; } .section__header .pre { justify-content: center; display: inline-flex; align-items: center; } .section__headline { font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-size: var(--fs-display-l); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: var(--sp-4) 0 var(--sp-5); } .section__headline em { font-style: italic; color: var(--ink); position: relative; } .section__headline em { text-decoration: underline; text-decoration-color: rgba(232, 21, 28, 0.9); text-decoration-thickness: 2.5px; text-decoration-skip-ink: none; text-underline-offset: 0.1em; } .section__headline em::after { content: none; } .section__sub { font-size: var(--fs-body-l); line-height: 1.6; color: var(--mute); max-width: 62ch; margin: 0 auto; } .section--dark .section__headline { color: var(--paper-on-ink); } .section--dark .section__sub { color: rgba(245, 243, 236, 0.72); } .section__cta { text-align: center; margin-top: var(--sp-16); } .section__cta-disqualifier, .hero__disqualifier { display: flex; align-items: center; gap: 0.55em; width: fit-content; margin: var(--sp-5) auto 0; padding: 0.55em 1.15em; border: 1px solid rgba(var(--ink-rgb) / 0.16); background: rgba(var(--ink-rgb) / 0.05); border-radius: 999px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: rgba(var(--ink-rgb) / 0.78); max-width: none; } .section__cta-disqualifier::before, .hero__disqualifier::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 0 4px rgba(var(--red-rgb) / 0.18); flex: 0 0 auto; } .hero__disqualifier { margin-left: auto; margin-right: auto; } .section--dark .section__cta-disqualifier { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: rgba(245, 243, 236, 0.78); } .hero__headline-sub { display: inline-block; font-size: 0.55em; color: rgba(var(--ink-rgb) / 0.6); font-style: italic; font-weight: 400; letter-spacing: -0.005em; margin-top: 0.2em; } /* Persona body (new from copy) */ .persona-copy__body { font-size: var(--fs-body-l); line-height: 1.6; color: var(--ink); margin: 0; } .persona-copy__body + .persona-copy__body { margin-top: var(--sp-3); } /* Disqualifier body (replaces list) */ .disqualifier__body p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 68ch; } /* Showreel: headline + Problem/Lösung/Ergebnis */ .showreel__headline { font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 50; font-weight: 500; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.018em; color: var(--brand-red); margin: 0; text-wrap: balance; } /* Editorial PSR — no cards, thin column dividers, typographic accent */ .showreel__psr { display: flex; flex-direction: column; gap: clamp(0.875rem, 1.5vw, 1.125rem); } .showreel__psr-item { display: flex; flex-direction: column; gap: 0.85em; padding: 0; background: transparent; border: 0; border-radius: 0; } .showreel__psr-label { display: inline-flex; align-items: baseline; gap: 0.65em; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--ink-rgb) / 0.55); font-weight: 600; position: relative; } .showreel__psr-label::before { content: attr(data-idx); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: -0.01em; text-transform: none; color: currentColor; opacity: 0.55; } .showreel__psr-label::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.18; margin-left: 0.5em; } .showreel__psr-item:nth-child(1) .showreel__psr-label { color: var(--brand-red); } .showreel__psr-item:nth-child(3) .showreel__psr-label { color: var(--green); } .showreel__psr-item p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink); } /* PSR vertical stack neben Video (right column, schmal) — back to old layout */ .showreel__psr { display: flex; flex-direction: column; gap: clamp(0.875rem, 1.4vw, 1.125rem); } .showreel__psr-item { padding: clamp(0.75rem, 1.2vw, 1rem) 0 clamp(0.75rem, 1.2vw, 1rem) clamp(0.75rem, 1.2vw, 1rem); border-left: 2px solid rgba(var(--ink-rgb) / 0.12); border-bottom: 0; border-right: 0; border-top: 0; background: transparent; border-radius: 0; } .showreel__psr-item:nth-child(1), .showreel__psr-item:nth-child(3) { padding-left: clamp(0.75rem, 1.2vw, 1rem); padding-right: 0; } .showreel__psr-item:nth-child(1) { border-left-color: var(--brand-red); } .showreel__psr-item:nth-child(2) { border-left-color: rgba(var(--ink-rgb) / 0.18); } .showreel__psr-item:nth-child(3) { border-left-color: var(--green); } .showreel__psr-item p { font-size: 0.9375rem; line-height: 1.55; } /* ============================================================ 02 · KENNZAHLEN ============================================================ */ .section--stats { padding-block: var(--sp-16); background: var(--ink); color: var(--paper-on-ink); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: relative; isolation: isolate; } .section--stats::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(ellipse at 20% 0%, rgba(var(--red-rgb) / 0.10), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(var(--red-rgb) / 0.06), transparent 55%); pointer-events: none; z-index: -1; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; } @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } } .stat { padding: var(--sp-8) var(--sp-6); text-align: center; position: relative; } .stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.10); } .stat__num { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-proof); line-height: 1; letter-spacing: -0.02em; color: var(--brand-red); margin-bottom: var(--sp-4); font-feature-settings: 'tnum' 1, 'lnum' 1; } .stat__label { font-size: var(--fs-body); line-height: 1.5; color: rgba(255, 255, 255, 0.86); } .stat__label .mute { font-size: 0.875rem; color: rgba(255, 255, 255, 0.54); } @media (max-width: 768px) { .stats { grid-template-columns: 1fr; } .stat + .stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); } } /* ============================================================ 03 · PROBLEME ============================================================ */ .problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } /* Card-Entry-Stagger: Blur-to-Sharp, scale-up, 140ms offset between cards */ .problems .problem-card.reveal { opacity: 0; transform: translateY(32px) scale(0.96); filter: blur(8px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 700ms var(--ease-out); will-change: transform, opacity, filter; } .problems .problem-card.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .problems .problem-card.reveal:nth-child(1) { transition-delay: 0ms; } .problems .problem-card.reveal:nth-child(2) { transition-delay: 140ms; } .problems .problem-card.reveal:nth-child(3) { transition-delay: 280ms; } @media (prefers-reduced-motion: reduce) { .problems .problem-card.reveal { filter: none !important; transform: none !important; transition-duration: 300ms !important; } } .problem-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 0; display: flex; flex-direction: column; transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out), border-color 420ms var(--ease-out); position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(var(--ink-rgb) / 0.03), 0 18px 40px rgba(var(--ink-rgb) / 0.06); } .problem-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-red); transform: scaleX(0); transform-origin: left center; transition: transform 620ms var(--ease-out); z-index: 3; } .problem-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 8px rgba(var(--ink-rgb) / 0.05), 0 32px 64px rgba(var(--ink-rgb) / 0.14); } .problem-card:hover::after { transform: scaleX(1); } /* ─────────────── Light Stage (top 60% of card) ─────────────── */ .problem-card__stage { position: relative; aspect-ratio: 1.35 / 1; background: radial-gradient(circle at 50% 0%, rgba(var(--red-rgb) / 0.05) 0%, transparent 60%), linear-gradient(180deg, #FDFCF8 0%, #F4F2EB 100%); border-bottom: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; } /* Hairline grid inside light stage */ .problem-card__stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(var(--ink-rgb) / 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--ink-rgb) / 0.04) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 90%); pointer-events: none; } .problem-card__num { position: absolute; top: 14px; left: 18px; font-family: var(--font-display); font-style: italic; font-size: 44px; line-height: 1; font-weight: 400; color: rgba(var(--ink-rgb) / 0.12); letter-spacing: -0.02em; font-variation-settings: 'opsz' 144, 'SOFT' 100; transition: color 420ms var(--ease-out), transform 420ms var(--ease-out), text-shadow 420ms var(--ease-out); z-index: 2; pointer-events: none; } .problem-card:hover .problem-card__num { color: rgba(var(--red-rgb) / 0.88); transform: translateY(-2px); text-shadow: 0 6px 18px rgba(var(--red-rgb) / 0.35); } .problem-card__tag { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.625rem; color: var(--mute); letter-spacing: 0.18em; text-transform: uppercase; z-index: 2; pointer-events: none; } .problem-card__tag::before { content: ""; width: 6px; height: 6px; background: var(--brand-red); border-radius: 50%; box-shadow: 0 0 10px rgba(var(--red-rgb) / 0.8); animation: tagPulse 2.2s ease-in-out infinite; } @keyframes tagPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } } .problem-card__stage .pa { position: relative; z-index: 1; width: 82%; height: 82%; overflow: visible; } /* ─────────────── Light Body (bottom of card) ─────────────── */ .problem-card__body { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); background: var(--paper); } .problem-card__meta { margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); } .problem-card__meta-dot { position: relative; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 0 3px rgba(var(--red-rgb) / 0.15); } .problem-card__meta-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--brand-red); opacity: 0; transform: scale(0.5); } .problem-card:hover .problem-card__meta-dot::after { animation: problemMetaRipple 1.6s ease-out infinite; } @keyframes problemMetaRipple { 0% { opacity: 0.8; transform: scale(0.5); } 100% { opacity: 0; transform: scale(3); } } /* ─────────────── Story-Bridge (between cards and CTA) ─────────────── */ .problems-bridge { margin: var(--sp-16) auto var(--sp-8); max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .problems-bridge__rule { width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, rgba(var(--ink-rgb) / 0.4), transparent); margin-bottom: var(--sp-3); } .problems-bridge__chapter { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); } .problems-bridge__chapter::before, .problems-bridge__chapter::after { content: ""; width: 28px; height: 1px; background: rgba(var(--ink-rgb) / 0.35); } .problems-bridge__lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.25rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 20ch; } .problems-bridge__lead em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; color: var(--brand-red); position: relative; } .problems-bridge__lead em::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0.05em; height: 2px; background: var(--brand-red); opacity: 0.55; transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease-out); } .problems-bridge.is-visible .problems-bridge__lead em::after { transform: scaleX(1); transition-delay: 400ms; } .problems-bridge__sub { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0; } .problems-bridge__arrow { display: inline-flex; margin-top: var(--sp-3); width: 28px; height: 28px; color: var(--brand-red); animation: bridgeArrow 2.2s ease-in-out infinite; } .problems-bridge__arrow svg { width: 100%; height: 100%; } @keyframes bridgeArrow { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(8px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .problems-bridge__arrow { animation: none; } } /* Hover — accelerate every animation inside the stage */ .problem-card:hover .pa1-dot { animation-duration: 3.5s; } .problem-card:hover .pa1-progress { animation-duration: 3.5s; } .problem-card:hover .pa1-scrubber { animation-duration: 3.5s; } .problem-card:hover .pa2-highlight { animation-duration: 2.8s; } .problem-card:hover .pa3-feed-scroll { animation-duration: 5s; } .problem-card:hover .pa3-heart--flash { animation-duration: 1.4s; } /* ========================================================== PA 1 — YT Retention Drop + Video-Player-Preview ========================================================== */ .pa1-chart-label { font-family: var(--font-mono); font-size: 6.5px; fill: var(--mute); letter-spacing: 0.16em; text-transform: uppercase; } .pa1-grid { stroke: rgba(var(--ink-rgb) / 0.08); stroke-width: 0.8; stroke-dasharray: 2 3; } .pa1-curve { fill: none; stroke: var(--brand-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(var(--red-rgb) / 0.35)); stroke-dasharray: 230; stroke-dashoffset: 230; animation: pa1Curve 5s var(--ease-out) infinite; } .pa1-curve-fill { opacity: 0; animation: pa1FillFade 5s var(--ease-out) infinite; } .pa1-dot { fill: var(--brand-red); filter: drop-shadow(0 0 4px rgba(var(--red-rgb) / 0.6)); animation: pa1Dot 5s var(--ease-out) infinite; } .pa1-dropout { fill: none; stroke: rgba(var(--ink-rgb) / 0.55); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .pa1-dropout--1 { animation: pa1Drop 5s ease-out infinite 0.6s; } .pa1-dropout--2 { animation: pa1Drop 5s ease-out infinite 1.4s; } .pa1-dropout--3 { animation: pa1Drop 5s ease-out infinite 2.3s; } .pa1-thumb { fill: #1a1a1d; } .pa1-thumb-face { fill: none; stroke: rgba(255,255,255,0.3); stroke-width: 1.4; stroke-linecap: round; } .pa1-play-bg { fill: var(--brand-red); filter: drop-shadow(0 2px 6px rgba(var(--red-rgb) / 0.5)); transform-origin: center; transform-box: fill-box; animation: pa1Play 2.4s ease-in-out infinite; } .pa1-play-icon { fill: #fff; pointer-events: none; } .pa1-track { fill: rgba(var(--ink-rgb) / 0.12); } .pa1-progress { fill: var(--brand-red); animation: pa1Progress 5s linear infinite; } .pa1-scrubber { fill: var(--brand-red); filter: drop-shadow(0 0 3px rgba(var(--red-rgb) / 0.6)); animation: pa1Scrub 5s linear infinite; } .pa1-time { font-family: var(--font-mono); font-size: 6.5px; fill: var(--mute); } .pa1-time--end { fill: rgba(var(--ink-rgb) / 0.5); } @keyframes pa1Curve { 0% { stroke-dashoffset: 230; } 55% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes pa1FillFade { 0%, 100% { opacity: 0; } 55%, 90% { opacity: 1; } } @keyframes pa1Dot { 0% { transform: translate(0, 2px); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(212px, 42px); opacity: 1; } } @keyframes pa1Drop { 0%, 100% { opacity: 0; transform: translateY(0); } 20% { opacity: 0.75; transform: translateY(-6px); } 60% { opacity: 0; transform: translateY(-16px); } } @keyframes pa1Play { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes pa1Progress { 0% { width: 0; } 100% { width: 128px; } } @keyframes pa1Scrub { 0% { transform: translateX(0); } 100% { transform: translateX(128px); } } /* ========================================================== PA 2 — Search + Channel Grid with wandering highlight ========================================================== */ .pa2-search-bg { fill: rgba(var(--ink-rgb) / 0.06); stroke: rgba(var(--ink-rgb) / 0.12); stroke-width: 1; } .pa2-search-icon { fill: none; stroke: var(--mute); stroke-width: 1.3; stroke-linecap: round; } .pa2-search-query { fill: var(--ink); opacity: 0.65; } .pa2-search-query-sub { fill: var(--mute); opacity: 0.55; } .pa2-caret { fill: var(--brand-red); animation: pa2Caret 1s step-end infinite; } .pa2-thumb rect:first-child { fill: #1d1d21; stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 1; } .pa2-thumb-play { fill: rgba(var(--red-rgb) / 0.9); } .pa2-thumb-play-icon { fill: #fff; } .pa2-thumb-title { fill: rgba(var(--ink-rgb) / 0.72); } .pa2-thumb-sub { fill: var(--mute); opacity: 0.6; } .pa2-highlight { fill: none; stroke: var(--brand-red); stroke-width: 2; rx: 6; filter: drop-shadow(0 2px 10px rgba(var(--red-rgb) / 0.35)); animation: pa2Highlight 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes pa2Caret { 50% { opacity: 0; } } @keyframes pa2Highlight { 0% { transform: translate(0, 0); opacity: 0.9; } 14% { transform: translate(0, 0); opacity: 0.9; } 18% { transform: translate(0, 0); opacity: 0; } 20% { transform: translate(70px, 0); opacity: 0.9; } 34% { transform: translate(70px, 0); opacity: 0.9; } 38% { transform: translate(70px, 0); opacity: 0; } 40% { transform: translate(140px, 0); opacity: 0.9; } 54% { transform: translate(140px, 0); opacity: 0.9; } 58% { transform: translate(140px, 0); opacity: 0; } 60% { transform: translate(0, 56px); opacity: 0.9; } 74% { transform: translate(0, 56px); opacity: 0.9; } 78% { transform: translate(0, 56px); opacity: 0; } 80% { transform: translate(70px, 56px); opacity: 0.9; } 96% { transform: translate(70px, 56px); opacity: 0.9; } 100% { transform: translate(70px, 56px); opacity: 0; } } /* ========================================================== PA 3 — Instagram-Feed-Scroll + empty engagement ========================================================== */ .pa3-phone-shell { fill: #1a1a1d; } .pa3-phone-screen { fill: #fff; stroke: rgba(var(--ink-rgb) / 0.06); stroke-width: 1; } .pa3-phone-notch { fill: #2a2a2e; } .pa3-feed-scroll { animation: pa3Scroll 8s linear infinite; } .pa3-avatar { fill: rgba(var(--ink-rgb) / 0.14); stroke: rgba(var(--ink-rgb) / 0.22); stroke-width: 1; } .pa3-line { fill: rgba(var(--ink-rgb) / 0.42); } .pa3-line--mute { fill: rgba(var(--ink-rgb) / 0.22); } .pa3-post-media { fill: rgba(var(--ink-rgb) / 0.08); stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 1; } .pa3-post-play { fill: rgba(var(--ink-rgb) / 0.5); } .pa3-post-play-icon { fill: #fff; } .pa3-heart { fill: none; stroke: rgba(var(--ink-rgb) / 0.45); stroke-width: 1; } .pa3-heart--flash { animation: pa3HeartFlash 3.6s ease-in-out infinite; } .pa3-num { font-family: var(--font-mono); font-size: 4.5px; fill: var(--mute); } .pa3-comment-dot { fill: rgba(var(--ink-rgb) / 0.3); } .pa3-side-label { font-family: var(--font-mono); font-size: 6px; fill: var(--mute); letter-spacing: 0.18em; text-transform: uppercase; } .pa3-side-label--mute { fill: rgba(var(--ink-rgb) / 0.4); } .pa3-side-num { font-family: var(--font-display); font-size: 14px; fill: var(--ink); font-weight: 500; } .pa3-side-num--flat { fill: var(--brand-red); } .pa3-side-num--mute { fill: rgba(var(--ink-rgb) / 0.3); } .pa3-like { fill: var(--brand-red); opacity: 0; filter: drop-shadow(0 0 3px rgba(var(--red-rgb) / 0.5)); will-change: transform, opacity; transform-box: fill-box; transform-origin: center; } .pa3-like--1 { animation: pa3Like 3.6s var(--ease-out) infinite 0.0s; } .pa3-like--2 { animation: pa3Like 3.6s var(--ease-out) infinite 1.2s; } .pa3-like--3 { animation: pa3Like 3.6s var(--ease-out) infinite 2.4s; } @keyframes pa3Scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-120px); } } @keyframes pa3HeartFlash { 0%, 100% { stroke: rgba(var(--ink-rgb) / 0.45); fill: transparent; } 20% { stroke: var(--brand-red); fill: var(--brand-red); } 22% { stroke: var(--brand-red); fill: var(--brand-red); transform: scale(1.25); } 35% { stroke: rgba(var(--ink-rgb) / 0.45); fill: transparent; transform: scale(1); } } @keyframes pa3Like { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 10% { opacity: 0.95; transform: translateY(-6px) scale(1.1); } 20% { transform: translateY(-10px) scale(1); } 70% { opacity: 0.5; transform: translateY(-48px) scale(1); } 100% { opacity: 0; transform: translateY(-70px) scale(0.85); } } @media (prefers-reduced-motion: reduce) { .pa1-curve, .pa1-curve-fill, .pa1-dot, .pa1-dropout, .pa1-play-bg, .pa1-progress, .pa1-scrubber, .pa2-caret, .pa2-highlight, .pa3-feed-scroll, .pa3-heart--flash, .pa3-like, .problem-card__tag::before, .pa1v2-heart, .pa1v2-strike, .pa1v2-check, .pa2v2-drehtag, .pa2v2-arc, .pa2v2-clock-h, .pa2v2-clock-m, .pa3v2-strike, .pa3v2-check, .pa3v2-card-row-check, .wyLib-spine, .wyLib-pill-dot, .wyLib-hour { animation: none !important; } .pa1-curve { stroke-dashoffset: 0; } } /* ========================================================== Bento Tile 01 — Vorgewärmte Traumkunden / Watch-History + Trust-Meter ========================================================== */ .wyTrust { width: 100%; height: auto; display: block; } .wyTrust-label { font-family: var(--font-mono); font-size: 8.5px; fill: var(--mute); letter-spacing: 0.22em; font-weight: 600; } .wyTrust-tile { fill: rgba(var(--ink-rgb) / 0.1); opacity: 0; animation: wyTrustWatch 600ms var(--ease-out) both; } .wyTrust-tile--watched, .wyTrust-tile { fill: var(--brand-red); } .wyTrust-tile { fill: rgba(var(--red-rgb) / 0.85); } @keyframes wyTrustWatch { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } /* Stagger for 50 tiles */ .wyTrust-tile { animation-delay: calc((var(--i, 0)) * 30ms); } .wyTrust-tile--1 { animation-delay: 0.00s; } .wyTrust-tile--2 { animation-delay: 0.03s; } .wyTrust-tile--3 { animation-delay: 0.06s; } .wyTrust-tile--4 { animation-delay: 0.09s; } .wyTrust-tile--5 { animation-delay: 0.12s; } .wyTrust-tile--6 { animation-delay: 0.15s; } .wyTrust-tile--7 { animation-delay: 0.18s; } .wyTrust-tile--8 { animation-delay: 0.21s; } .wyTrust-tile--9 { animation-delay: 0.24s; } .wyTrust-tile--10 { animation-delay: 0.27s; } .wyTrust-tile--11 { animation-delay: 0.30s; } .wyTrust-tile--12 { animation-delay: 0.33s; } .wyTrust-tile--13 { animation-delay: 0.36s; } .wyTrust-tile--14 { animation-delay: 0.39s; } .wyTrust-tile--15 { animation-delay: 0.42s; } .wyTrust-tile--16 { animation-delay: 0.45s; } .wyTrust-tile--17 { animation-delay: 0.48s; } .wyTrust-tile--18 { animation-delay: 0.51s; } .wyTrust-tile--19 { animation-delay: 0.54s; } .wyTrust-tile--20 { animation-delay: 0.57s; } .wyTrust-tile--21 { animation-delay: 0.60s; } .wyTrust-tile--22 { animation-delay: 0.63s; } .wyTrust-tile--23 { animation-delay: 0.66s; } .wyTrust-tile--24 { animation-delay: 0.69s; } .wyTrust-tile--25 { animation-delay: 0.72s; } .wyTrust-tile--26 { animation-delay: 0.75s; } .wyTrust-tile--27 { animation-delay: 0.78s; } .wyTrust-tile--28 { animation-delay: 0.81s; } .wyTrust-tile--29 { animation-delay: 0.84s; } .wyTrust-tile--30 { animation-delay: 0.87s; } .wyTrust-tile--31 { animation-delay: 0.90s; } .wyTrust-tile--32 { animation-delay: 0.93s; } .wyTrust-tile--33 { animation-delay: 0.96s; } .wyTrust-tile--34 { animation-delay: 0.99s; } .wyTrust-tile--35 { animation-delay: 1.02s; } .wyTrust-tile--36 { animation-delay: 1.05s; } .wyTrust-tile--37 { animation-delay: 1.08s; } .wyTrust-tile--38 { animation-delay: 1.11s; } .wyTrust-tile--39 { animation-delay: 1.14s; } .wyTrust-tile--40 { animation-delay: 1.17s; } .wyTrust-tile--41 { animation-delay: 1.20s; } .wyTrust-tile--42 { animation-delay: 1.23s; } .wyTrust-tile--43 { animation-delay: 1.26s; } .wyTrust-tile--44 { animation-delay: 1.29s; } .wyTrust-tile--45 { animation-delay: 1.32s; } .wyTrust-tile--46 { animation-delay: 1.35s; } .wyTrust-tile--47 { animation-delay: 1.38s; } .wyTrust-tile--48 { animation-delay: 1.41s; } .wyTrust-tile--49 { animation-delay: 1.44s; } .wyTrust-tile--50 { animation-delay: 1.47s; } .wyTrust-meter-label { font-family: var(--font-mono); font-size: 9px; fill: var(--mute); letter-spacing: 0.18em; font-weight: 600; } .wyTrust-meter-value { font-family: var(--font-display); font-size: 14px; fill: var(--brand-red); font-weight: 500; } .wyTrust-meter-track { fill: rgba(var(--ink-rgb) / 0.08); } .wyTrust-meter-fill { fill: var(--brand-red); filter: drop-shadow(0 0 6px rgba(var(--red-rgb) / 0.4)); animation: wyTrustFill 1.8s var(--ease-out) 0.6s both; } @keyframes wyTrustFill { from { width: 0; } to { width: 176px; } } .wyTrust-row-label { font-family: var(--font-mono); font-size: 8px; fill: var(--mute); letter-spacing: 0.16em; } .wyTrust-bar-old { fill: rgba(var(--ink-rgb) / 0.08); } .wyTrust-bar-new { fill: var(--green); filter: drop-shadow(0 0 4px rgba(var(--green-rgb) / 0.4)); } /* ========================================================== Bento Tile 03 — YouTube-Channel-Übersicht ========================================================== */ .wyChan { width: 100%; height: auto; display: block; } .wyChan-frame { fill: #fff; stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 0.6; } .wyChan-topbar-bg { fill: #f8f8f8; } .wyChan-yt-rect { fill: #FF0000; } .wyChan-yt-play { fill: #fff; } .wyChan-yt-text { font-family: var(--font-body); font-size: 5px; fill: var(--ink); font-weight: 600; } .wyChan-search { fill: rgba(var(--ink-rgb) / 0.04); stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 0.5; } .wyChan-search-ic { stroke: var(--mute); stroke-width: 0.5; fill: none; } .wyChan-banner { /* fill set inline to gradient */ } .wyChan-avatar-ring { fill: #fff; } .wyChan-avatar { fill: var(--brand-red); } .wyChan-avatar-init { font-family: var(--font-display); font-size: 12px; fill: #fff; font-weight: 500; font-style: italic; } .wyChan-name { font-family: var(--font-display); font-size: 8px; fill: var(--ink); font-weight: 500; } .wyChan-handle { font-family: var(--font-mono); font-size: 4.5px; fill: var(--mute); letter-spacing: 0.06em; } .wyChan-sub-bg { fill: var(--ink); } .wyChan-sub-text { font-family: var(--font-body); font-size: 4.5px; fill: #fff; font-weight: 600; letter-spacing: 0.16em; } .wyChan-tab { font-family: var(--font-body); font-size: 4.5px; fill: var(--mute); font-weight: 500; } .wyChan-tab--active { fill: var(--ink); font-weight: 600; } .wyChan-tab-underline { stroke: var(--ink); stroke-width: 1.2; } .wyChan-tab-divider { stroke: rgba(var(--ink-rgb) / 0.08); stroke-width: 0.5; } .wyChan-thumb rect:first-child { fill: #1a1a1d; stroke: rgba(var(--ink-rgb) / 0.05); stroke-width: 0.5; } .wyChan-thumb-play { fill: rgba(255, 0, 0, 0.92); } .wyChan-thumb-play-ic { fill: #fff; } .wyChan-thumb-time { fill: rgba(0, 0, 0, 0.7); } .wyChan-thumb-time-text { font-family: var(--font-mono); font-size: 4px; fill: #fff; font-weight: 600; } .wyChan-thumb-title { fill: rgba(var(--ink-rgb) / 0.78); } .wyChan-thumb-meta { fill: rgba(var(--ink-rgb) / 0.42); } .wyChan-thumb { opacity: 0; animation: wyChanFade 600ms var(--ease-out) both; } .wyChan-thumb--1 { animation-delay: 0.10s; } .wyChan-thumb--2 { animation-delay: 0.30s; } .wyChan-thumb--3 { animation-delay: 0.50s; } @keyframes wyChanFade { from { opacity: 0; } to { opacity: 1; } } .wyChan-live { fill: #FF0000; filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.7)); opacity: 0; animation: wyChanLivePulse 2s ease-in-out infinite 1.2s; } @keyframes wyChanLivePulse { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } } /* ========================================================== Bento Tile 04 — Differenzierung von der Konkurrenz ========================================================== */ .wyDiff { width: 100%; height: auto; display: block; } .wyDiff-hero-halo { fill: rgba(var(--red-rgb) / 0.08); filter: blur(2px); animation: wyDiffHalo 3.4s ease-in-out infinite; } @keyframes wyDiffHalo { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } } .wyDiff-hero { transform-box: fill-box; transform-origin: center; } .wyDiff-hero-card { fill: #fff; stroke: var(--brand-red); stroke-width: 1.2; filter: drop-shadow(0 6px 16px rgba(var(--red-rgb) / 0.35)); } .wyDiff-hero-avatar { fill: var(--brand-red); } .wyDiff-hero-body { fill: var(--brand-red); opacity: 0.85; } .wyDiff-hero-badge { fill: var(--green); filter: drop-shadow(0 0 4px rgba(var(--green-rgb) / 0.5)); } .wyDiff-hero-check { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .wyDiff-hero-label { font-family: var(--font-mono); font-size: 8.5px; fill: var(--brand-red); letter-spacing: 0.22em; font-weight: 700; } .wyDiff-arrow { fill: none; stroke: rgba(var(--ink-rgb) / 0.18); stroke-width: 1; stroke-dasharray: 2 3; } .wyDiff-vs { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: rgba(var(--ink-rgb) / 0.45); letter-spacing: -0.02em; } .wyDiff-comp rect:first-child { fill: rgba(var(--ink-rgb) / 0.06); stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 0.5; } .wyDiff-comp circle, .wyDiff-comp path { fill: rgba(var(--ink-rgb) / 0.32); } .wyDiff-comp-label { font-family: var(--font-mono); font-size: 8px; fill: rgba(var(--ink-rgb) / 0.42); letter-spacing: 0.22em; font-weight: 600; } /* ========================================================== Bento Tile 03 — (legacy) Library Stack — kept for backwards compat, not used ========================================================== */ .wyLib { width: 100%; height: auto; display: block; } /* ========================================================== Method Step 01 — Strategy Mindmap + Channel-Setup ========================================================== */ .ms-stage--strategy { padding: 18px; background: var(--paper); } .msStrat { width: 100%; height: auto; display: block; } .msStrat-header-bg { fill: var(--ink); } .msStrat-header-dot { fill: var(--brand-red); animation: msStratPulse 1.6s ease-in-out infinite; } @keyframes msStratPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .msStrat-header-text { font-family: var(--font-mono); font-size: 6.5px; fill: #fff; letter-spacing: 0.18em; font-weight: 600; } .msStrat-meta { font-family: var(--font-mono); font-size: 6px; fill: var(--mute); letter-spacing: 0.22em; font-weight: 600; } .msStrat-center-halo { fill: rgba(var(--red-rgb) / 0.1); filter: blur(2px); animation: msStratHalo 3s ease-in-out infinite; } @keyframes msStratHalo { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } } .msStrat-center { transform-box: fill-box; transform-origin: center; } .msStrat-center-bg { fill: var(--brand-red); filter: drop-shadow(0 6px 14px rgba(var(--red-rgb) / 0.4)); } .msStrat-center-eyebrow { font-family: var(--font-mono); font-size: 5.5px; fill: rgba(255,255,255,0.7); letter-spacing: 0.2em; font-weight: 600; } .msStrat-center-title { font-family: var(--font-display); font-size: 18px; fill: #fff; font-weight: 500; font-style: italic; } .msStrat-edge { stroke: rgba(var(--red-rgb) / 0.5); stroke-width: 1; stroke-dasharray: 3 4; fill: none; } .msStrat-edge--1 { animation: msStratDash 4s linear infinite 0s; } .msStrat-edge--2 { animation: msStratDash 4s linear infinite 0.6s; } .msStrat-edge--3 { animation: msStratDash 4s linear infinite 1.2s; } .msStrat-edge--4 { animation: msStratDash 4s linear infinite 1.8s; } .msStrat-edge--5 { animation: msStratDash 4s linear infinite 2.4s; } .msStrat-edge--6 { animation: msStratDash 4s linear infinite 3.0s; } @keyframes msStratDash { to { stroke-dashoffset: -28; } } .msStrat-node rect { fill: #fff; stroke: rgba(var(--ink-rgb) / 0.16); stroke-width: 1; filter: drop-shadow(0 4px 8px rgba(var(--ink-rgb) / 0.06)); } .msStrat-node text { font-family: var(--font-body); font-size: 8px; fill: var(--ink); font-weight: 500; } .msStrat-node { opacity: 0; animation: msStratFade 600ms var(--ease-out) both; } .msStrat-node--1 { animation-delay: 0.30s; } .msStrat-node--2 { animation-delay: 0.40s; } .msStrat-node--3 { animation-delay: 0.50s; } .msStrat-node--4 { animation-delay: 0.60s; } .msStrat-node--5 { animation-delay: 0.70s; } .msStrat-node--6 { animation-delay: 0.80s; } @keyframes msStratFade { from { opacity: 0; } to { opacity: 1; } } .msStrat-channel { opacity: 0; animation: msStratFade 800ms var(--ease-out) 1.0s both; } .msStrat-channel-bg { fill: #fff; stroke: rgba(var(--ink-rgb) / 0.08); stroke-width: 0.6; filter: drop-shadow(0 4px 12px rgba(var(--ink-rgb) / 0.06)); } .msStrat-channel-banner { fill: rgba(var(--red-rgb) / 0.5); } .msStrat-channel-avatar-ring { fill: #fff; } .msStrat-channel-avatar { fill: var(--brand-red); } .msStrat-channel-avatar-init { font-family: var(--font-display); font-size: 8px; fill: #fff; font-weight: 500; font-style: italic; } .msStrat-channel-name { font-family: var(--font-display); font-size: 8px; fill: var(--ink); font-weight: 500; } .msStrat-channel-handle { font-family: var(--font-mono); font-size: 4.5px; fill: var(--mute); letter-spacing: 0.06em; } .msStrat-set-pill rect { fill: rgba(var(--green-rgb) / 0.1); stroke: rgba(var(--green-rgb) / 0.3); stroke-width: 0.6; } .msStrat-set-pill text { font-family: var(--font-mono); font-size: 4.5px; fill: var(--green); letter-spacing: 0.16em; font-weight: 600; } .msStrat-set-check { fill: none; stroke: var(--green); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } .wyLib-shelf { } .wyLib-spine rect:first-child { fill: var(--ink); stroke: rgba(var(--ink-rgb) / 0.15); stroke-width: 0.5; } .wyLib-spine .wyLib-play { fill: var(--brand-red); filter: drop-shadow(0 0 4px rgba(var(--red-rgb) / 0.5)); } .wyLib-spine-label { font-family: var(--font-mono); font-size: 5px; fill: rgba(255,255,255,0.45); letter-spacing: 0.18em; text-transform: uppercase; } .wyLib-spine { opacity: 0; animation: wyLibFadeIn 700ms var(--ease-out) both; } .wyLib-spine--1 { animation-delay: 0.05s; } .wyLib-spine--2 { animation-delay: 0.13s; } .wyLib-spine--3 { animation-delay: 0.21s; } .wyLib-spine--4 { animation-delay: 0.29s; } .wyLib-spine--5 { animation-delay: 0.37s; } .wyLib-spine--6 { animation-delay: 0.45s; } .wyLib-spine--7 { animation-delay: 0.53s; } .wyLib-spine--8 { animation-delay: 0.61s; } .wyLib-spine--9 { animation-delay: 0.69s; } .wyLib-spine--10 { animation-delay: 0.77s; } @keyframes wyLibFadeIn { from { opacity: 0; } to { opacity: 1; } } .wyLib-pill-bg { fill: var(--ink); filter: drop-shadow(0 4px 10px rgba(var(--ink-rgb) / 0.18)); } .wyLib-pill-dot { fill: #2dd66e; filter: drop-shadow(0 0 4px rgba(45, 214, 110, 0.7)); animation: wyLibBlink 1.6s ease-in-out infinite; } @keyframes wyLibBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .wyLib-pill-text { font-family: var(--font-mono); font-size: 6.5px; fill: #fff; letter-spacing: 0.16em; font-weight: 600; } .wyLib-hours-label { font-family: var(--font-mono); font-size: 5.5px; fill: var(--mute); letter-spacing: 0.2em; text-transform: uppercase; } .wyLib-hour { fill: var(--brand-red); opacity: 0.45; animation: wyLibHourFlash 6s ease-in-out infinite; } .wyLib-hour:nth-child(2) { animation-delay: 0.15s; } .wyLib-hour:nth-child(3) { animation-delay: 0.30s; } .wyLib-hour:nth-child(4) { animation-delay: 0.45s; } .wyLib-hour:nth-child(5) { animation-delay: 0.60s; } .wyLib-hour:nth-child(6) { animation-delay: 0.75s; } .wyLib-hour:nth-child(7) { animation-delay: 0.90s; } .wyLib-hour:nth-child(8) { animation-delay: 1.05s; } .wyLib-hour:nth-child(9) { animation-delay: 1.20s; } .wyLib-hour:nth-child(10) { animation-delay: 1.35s; } .wyLib-hour:nth-child(11) { animation-delay: 1.50s; } .wyLib-hour:nth-child(12) { animation-delay: 1.65s; } .wyLib-hour:nth-child(13) { animation-delay: 1.80s; } .wyLib-hour:nth-child(14) { animation-delay: 1.95s; } .wyLib-hour:nth-child(15) { animation-delay: 2.10s; } .wyLib-hour:nth-child(16) { animation-delay: 2.25s; } .wyLib-hour:nth-child(17) { animation-delay: 2.40s; } .wyLib-hour:nth-child(18) { animation-delay: 2.55s; } .wyLib-hour:nth-child(19) { animation-delay: 2.70s; } .wyLib-hour:nth-child(20) { animation-delay: 2.85s; } .wyLib-hour:nth-child(21) { animation-delay: 3.00s; } .wyLib-hour:nth-child(22) { animation-delay: 3.15s; } .wyLib-hour:nth-child(23) { animation-delay: 3.30s; } .wyLib-hour:nth-child(24) { animation-delay: 3.45s; } @keyframes wyLibHourFlash { 0%, 100% { opacity: 0.45; } 10% { opacity: 1; } 30% { opacity: 0.55; } } /* ========================================================== PA 1 v2 — Reel ✕ vs. Fachvortrag ✓ ========================================================== */ .pa1v2-phone, .pa1v2-stage { fill: #1a1a1d; stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 0.6; } .pa1v2-screen { fill: #2a1f24; } .pa1v2-stage-screen { fill: #f5f4ef; stroke: rgba(var(--ink-rgb) / 0.08); stroke-width: 0.6; } .pa1v2-face { fill: #d6a98e; opacity: 0.85; } .pa1v2-face-smile { fill: none; stroke: #5a3a2a; stroke-width: 1.2; stroke-linecap: round; } .pa1v2-bar { fill: #fff; opacity: 0.95; } .pa1v2-bar--mute { opacity: 0.35; } .pa1v2-note { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; } .pa1v2-note-dot { fill: #fff; } .pa1v2-heart { fill: #ff5670; opacity: 0; transform-box: fill-box; transform-origin: center; } .pa1v2-heart--a { animation: pa1v2Heart 3.6s var(--ease-out) infinite 0s; } .pa1v2-heart--b { animation: pa1v2Heart 3.6s var(--ease-out) infinite 1.1s; } .pa1v2-heart--c { animation: pa1v2Heart 3.6s var(--ease-out) infinite 2.2s; } @keyframes pa1v2Heart { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 20% { opacity: 0.95; transform: translateY(-8px) scale(1.1); } 60% { opacity: 0.6; transform: translateY(-22px) scale(1); } 100% { opacity: 0; transform: translateY(-36px) scale(0.85); } } .pa1v2-strike-bg { fill: rgba(255, 86, 112, 0.95); } .pa1v2-strike-mark { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; fill: none; } .pa1v2-strike { transform-box: fill-box; transform-origin: center; animation: pa1v2Strike 4s var(--ease-out) infinite; } @keyframes pa1v2Strike { 0%, 60% { opacity: 0.92; transform: rotate(0deg); } 72% { opacity: 1; transform: rotate(-6deg); } 85% { opacity: 0.92; transform: rotate(0deg); } 100% { opacity: 0.92; } } .pa1v2-slide-line { fill: rgba(var(--ink-rgb) / 0.78); } .pa1v2-slide-line--mute { fill: rgba(var(--ink-rgb) / 0.32); } .pa1v2-slide-curve { fill: none; stroke: var(--brand-red); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .pa1v2-slide-axis { stroke: rgba(var(--ink-rgb) / 0.18); stroke-width: 0.5; } .pa1v2-speaker-head { fill: var(--ink); } .pa1v2-speaker-body { fill: var(--ink); } .pa1v2-lectern { fill: rgba(var(--ink-rgb) / 0.65); } .pa1v2-mic { fill: var(--brand-red); } .pa1v2-mic-stand { stroke: rgba(var(--ink-rgb) / 0.5); stroke-width: 0.8; stroke-linecap: round; } .pa1v2-check-bg { fill: var(--green); } .pa1v2-check-mark { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .pa1v2-check { transform-box: fill-box; transform-origin: center; animation: pa1v2Check 4s var(--ease-out) infinite; } @keyframes pa1v2Check { 0%, 30% { opacity: 0; transform: scale(0.5); } 45% { opacity: 1; transform: scale(1.18); } 60%, 100% { opacity: 1; transform: scale(1); } } .pa1v2-vs { font-family: var(--font-display); font-style: italic; font-size: 14px; fill: rgba(var(--ink-rgb) / 0.42); letter-spacing: -0.02em; } .pa1v2-side-label { font-family: var(--font-mono); font-size: 5.5px; letter-spacing: 0.18em; text-transform: uppercase; } .pa1v2-side-label--ig { fill: rgba(var(--ink-rgb) / 0.42); } .pa1v2-side-label--talk { fill: var(--brand-red); } /* ========================================================== PA 2 v2 — Calendar 5h alle 2 Monate ========================================================== */ .pa2v2-month { font-family: var(--font-mono); font-size: 7px; fill: var(--mute); letter-spacing: 0.2em; } .pa2v2-month--past { fill: rgba(var(--ink-rgb) / 0.32); } .pa2v2-dow text { font-family: var(--font-mono); font-size: 5.5px; fill: rgba(var(--ink-rgb) / 0.32); letter-spacing: 0.1em; } .pa2v2-days circle { fill: rgba(var(--ink-rgb) / 0.18); } .pa2v2-drehtag-bg { fill: var(--brand-red); filter: drop-shadow(0 0 6px rgba(var(--red-rgb) / 0.55)); transform-box: fill-box; transform-origin: center; animation: pa2v2Pulse 3s ease-in-out infinite; } .pa2v2-drehtag--next .pa2v2-drehtag-bg { animation-delay: 1.5s; } .pa2v2-drehtag-num { font-family: var(--font-display); font-size: 8px; fill: #fff; font-weight: 500; } @keyframes pa2v2Pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .pa2v2-arc { fill: none; stroke: var(--brand-red); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.5; stroke-dashoffset: 200; animation: pa2v2Arc 4s linear infinite; } @keyframes pa2v2Arc { to { stroke-dashoffset: 0; } } .pa2v2-arc-label { font-family: var(--font-mono); font-size: 5.5px; fill: var(--brand-red); letter-spacing: 0.2em; font-weight: 600; } .pa2v2-clockpill-bg { fill: var(--ink); filter: drop-shadow(0 4px 10px rgba(var(--ink-rgb) / 0.2)); } .pa2v2-clock-rim { fill: none; stroke: #fff; stroke-width: 1; } .pa2v2-clock-center { fill: #fff; } .pa2v2-clock-h { stroke: #fff; stroke-width: 1.2; stroke-linecap: round; transform-origin: 0 0; animation: pa2v2HourHand 6s linear infinite; } .pa2v2-clock-m { stroke: var(--brand-red); stroke-width: 1.2; stroke-linecap: round; transform-origin: 0 0; animation: pa2v2MinHand 1.5s linear infinite; } @keyframes pa2v2HourHand { to { transform: rotate(360deg); } } @keyframes pa2v2MinHand { to { transform: rotate(360deg); } } .pa2v2-clockpill-num { font-family: var(--font-display); font-size: 12px; fill: #fff; font-weight: 500; letter-spacing: -0.02em; } .pa2v2-clockpill-label { font-family: var(--font-mono); font-size: 5.5px; fill: rgba(255,255,255,0.6); letter-spacing: 0.2em; text-transform: uppercase; } /* ========================================================== PA 3 v2 — Insta-Card vs. YouTube-Card ========================================================== */ .pa3v2-card-bg { fill: #fff; stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 1; filter: drop-shadow(0 4px 14px rgba(var(--ink-rgb) / 0.06)); } .pa3v2-card-bg--yt { fill: rgba(var(--green-rgb) / 0.05); stroke: rgba(var(--green-rgb) / 0.22); } .pa3v2-card-pill { fill: rgba(var(--ink-rgb) / 0.08); } .pa3v2-card-pill--ig { fill: linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%); fill: #dc2743; } .pa3v2-card-pill--yt { fill: #FF0000; } .pa3v2-card-pill-text { font-family: var(--font-mono); font-size: 4.5px; fill: #fff; letter-spacing: 0.16em; font-weight: 600; } .pa3v2-card-num { font-family: var(--font-display); font-size: 22px; fill: rgba(var(--ink-rgb) / 0.7); font-weight: 500; letter-spacing: -0.02em; } .pa3v2-card-num--big { fill: var(--green); font-size: 24px; } .pa3v2-card-numlabel { font-family: var(--font-mono); font-size: 4.5px; fill: var(--mute); letter-spacing: 0.18em; text-transform: uppercase; } .pa3v2-card-divider { stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 0.8; } .pa3v2-card-row-label { font-family: var(--font-mono); font-size: 4.5px; fill: var(--mute); letter-spacing: 0.16em; text-transform: uppercase; } .pa3v2-card-row-zero { font-family: var(--font-display); font-size: 9px; fill: rgba(var(--ink-rgb) / 0.32); font-weight: 500; } .pa3v2-card-row-check { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pa3v2-strike-bg { fill: #dc2743; } .pa3v2-strike-mark { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; } .pa3v2-check-bg { fill: var(--green); } .pa3v2-check-mark { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pa3v2-strike, .pa3v2-check { transform-box: fill-box; transform-origin: center; } .pa3v2-check { animation: pa3v2CheckPulse 3.5s ease-in-out infinite; } @keyframes pa3v2CheckPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(var(--green-rgb) / 0.55)); } } .pa3v2-vs { font-family: var(--font-display); font-style: italic; font-size: 14px; fill: rgba(var(--ink-rgb) / 0.4); letter-spacing: -0.02em; } .problem-card__title { font-family: var(--font-display); font-variation-settings: 'opsz' 72, 'SOFT' 50; font-weight: 500; font-size: var(--fs-heading); line-height: 1.25; color: var(--ink); margin: 0; } .problem-card__text { font-size: var(--fs-body); line-height: 1.6; color: var(--mute); margin: 0; } @media (max-width: 960px) { .problems { grid-template-columns: 1fr; gap: var(--sp-4); } } /* ============================================================ 04 · WARUM YOUTUBE ANDERS — Uniform 2×2 Grid ============================================================ */ .bento-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-4); } .bento-tile--small, .bento-tile--large { grid-column: span 1; } @media (max-width: 720px) { .bento-why { grid-template-columns: 1fr; } } .bento-tile { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out), border-color 420ms var(--ease-out); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 4px rgba(var(--ink-rgb) / 0.03), 0 18px 40px rgba(var(--ink-rgb) / 0.06); } .bento-tile:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 8px rgba(var(--ink-rgb) / 0.05), 0 30px 56px rgba(var(--ink-rgb) / 0.13); } .bento-tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-red); transform: scaleX(0); transform-origin: left center; transition: transform 620ms var(--ease-out); z-index: 4; } .bento-tile:hover::after { transform: scaleX(1); } .bento-tile__header { position: absolute; top: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 3; pointer-events: none; } .bento-tile__num { font-family: var(--font-display); font-style: italic; font-size: 32px; font-weight: 400; line-height: 1; color: rgba(var(--ink-rgb) / 0.14); font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -0.02em; transition: color 420ms var(--ease-out), transform 420ms var(--ease-out); } .bento-tile:hover .bento-tile__num { color: rgba(var(--red-rgb) / 0.85); transform: translateY(-2px); } .bento-tile__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); } .bento-tile__tag::before { content: ""; width: 6px; height: 6px; background: var(--brand-red); border-radius: 50%; box-shadow: 0 0 10px rgba(var(--red-rgb) / 0.7); animation: tagPulse 2.4s ease-in-out infinite; } .bento-tile__stage { position: relative; padding: 76px 30px 28px; background: radial-gradient(ellipse at 50% 0%, rgba(var(--red-rgb) / 0.04), transparent 60%), linear-gradient(180deg, #FDFCF8 0%, #F4F2EB 100%); border-bottom: 1px solid var(--line); flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); overflow: hidden; isolation: isolate; /* SVG-Stages auf einheitliche Höhe begrenzen — Tile-2-Sichtbarkeit ist Referenz */ max-height: 340px; } /* Constrain bento SVGs to fit stage proportionally (Tile-2 width = reference) */ .bento-tile__stage > svg { width: 100%; height: auto; max-height: 240px; display: block; align-self: center; } /* Tile 01, 04: weiter Aspekt → Schrift bleibt lesbar */ .bento-tile__stage > svg.wyTrust { max-height: 240px; } .bento-tile__stage > svg.wyChan { max-height: 240px; } .bento-tile__stage > svg.wyDiff { max-height: 240px; } .bento-tile__stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(var(--ink-rgb) / 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--ink-rgb) / 0.035) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at 50% 55%, black 20%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse at 50% 55%, black 20%, transparent 90%); pointer-events: none; } .bento-tile__stat { position: relative; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); z-index: 2; } .bento-tile--hero .bento-tile__stat { justify-content: center; margin-top: var(--sp-2); } .bento-tile__stat-num { font-weight: 300; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-style: italic; display: inline-flex; align-items: baseline; } .bento-tile__stat-unit { font-family: var(--font-mono); font-style: normal; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); align-self: center; padding-bottom: 0.5em; } .bento-tile__stat--compact .bento-tile__stat-num { font-size: clamp(2.75rem, 5vw, 4.25rem); } .bento-tile__stat-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); text-align: center; } .bento-tile__body { padding: var(--sp-6) 28px var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--paper); min-height: 148px; } @media (max-width: 720px) { .bento-tile__body { min-height: 0; } } .bento-tile__title { font-family: var(--font-display); font-variation-settings: 'opsz' 72, 'SOFT' 50; font-weight: 500; font-size: var(--fs-heading); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0; } .bento-tile__text { font-size: 0.9375rem; line-height: 1.6; color: var(--mute); margin: 0; max-width: 52ch; } /* ===== TILE 01 — Search + Watchtime (HERO) ===== */ .wy1-search { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 8px rgba(var(--ink-rgb) / 0.04); max-width: 420px; margin: 0 auto; z-index: 2; overflow: hidden; } .wy1-search-icon { width: 16px; height: 16px; color: var(--mute); flex-shrink: 0; } .wy1-search-track { position: relative; height: 22px; overflow: hidden; flex: 1; display: flex; flex-direction: column; animation: wy1Rotate 15s steps(5) infinite; } .wy1-query { flex-shrink: 0; line-height: 22px; font-size: 0.875rem; color: var(--ink); } .wy1-caret { width: 1.5px; height: 16px; background: var(--brand-red); animation: wy1Caret 0.9s step-end infinite; flex-shrink: 0; } .wy1-player { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #0d0d10; border-radius: var(--r); max-width: 420px; margin: 0 auto; z-index: 2; box-shadow: 0 6px 18px rgba(var(--ink-rgb) / 0.18); } .wy1-play { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-red); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 12px rgba(var(--red-rgb) / 0.55); animation: wy1PlayPulse 2s ease-in-out infinite; } .wy1-play svg { width: 12px; height: 12px; margin-left: 2px; } .wy1-waveform { flex: 1; display: flex; align-items: center; gap: 2px; height: 22px; } .wy1-waveform span { flex: 1; background: rgba(255,255,255,0.4); border-radius: 1px; animation: wy1Wave 1.4s ease-in-out infinite; } .wy1-waveform span:nth-child(1) { height: 30%; animation-delay: 0.00s; } .wy1-waveform span:nth-child(2) { height: 60%; animation-delay: 0.05s; } .wy1-waveform span:nth-child(3) { height: 80%; animation-delay: 0.10s; } .wy1-waveform span:nth-child(4) { height: 50%; animation-delay: 0.15s; } .wy1-waveform span:nth-child(5) { height: 40%; animation-delay: 0.20s; } .wy1-waveform span:nth-child(6) { height: 70%; animation-delay: 0.25s; } .wy1-waveform span:nth-child(7) { height: 90%; animation-delay: 0.30s; } .wy1-waveform span:nth-child(8) { height: 55%; animation-delay: 0.35s; } .wy1-waveform span:nth-child(9) { height: 35%; animation-delay: 0.40s; } .wy1-waveform span:nth-child(10) { height: 65%; animation-delay: 0.45s; } .wy1-waveform span:nth-child(11) { height: 85%; animation-delay: 0.50s; background: var(--brand-red); } .wy1-waveform span:nth-child(12) { height: 75%; animation-delay: 0.55s; background: var(--brand-red); } .wy1-waveform span:nth-child(13) { height: 45%; animation-delay: 0.60s; } .wy1-waveform span:nth-child(14) { height: 30%; animation-delay: 0.65s; } .wy1-waveform span:nth-child(15) { height: 55%; animation-delay: 0.70s; } .wy1-waveform span:nth-child(16) { height: 70%; animation-delay: 0.75s; } .wy1-waveform span:nth-child(17) { height: 40%; animation-delay: 0.80s; } .wy1-waveform span:nth-child(18) { height: 60%; animation-delay: 0.85s; } .wy1-waveform span:nth-child(19) { height: 80%; animation-delay: 0.90s; } .wy1-waveform span:nth-child(20) { height: 35%; animation-delay: 0.95s; } .wy1-waveform span:nth-child(21) { height: 50%; animation-delay: 1.00s; } .wy1-waveform span:nth-child(22) { height: 65%; animation-delay: 1.05s; } .wy1-waveform span:nth-child(23) { height: 45%; animation-delay: 1.10s; } .wy1-waveform span:nth-child(24) { height: 30%; animation-delay: 1.15s; } .wy1-time { color: rgba(255,255,255,0.7); font-size: 0.75rem; white-space: nowrap; } @keyframes wy1Rotate { 0% { transform: translateY(0); } 20% { transform: translateY(-22px); } 40% { transform: translateY(-44px); } 60% { transform: translateY(-66px); } 80% { transform: translateY(-88px); } 100% { transform: translateY(-110px); } } @keyframes wy1Caret { 50% { opacity: 0; } } @keyframes wy1PlayPulse { 0%, 100% { box-shadow: 0 0 12px rgba(var(--red-rgb) / 0.55); } 50% { box-shadow: 0 0 20px rgba(var(--red-rgb) / 0.9); } } @keyframes wy1Wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } /* ===== TILE 02 — Chart (YT vs IG) ===== */ .wy2-chart { width: 100%; height: auto; max-width: 280px; margin: 0 auto; } .wy2-grid { stroke: rgba(var(--ink-rgb) / 0.08); stroke-width: 0.8; stroke-dasharray: 2 3; } .wy2-ig { fill: none; stroke: rgba(var(--ink-rgb) / 0.45); stroke-width: 1.5; stroke-dasharray: 3 3; stroke-linecap: round; stroke-dashoffset: 0; } .wy2-ig-fill { fill: rgba(var(--ink-rgb) / 0.05); } .wy2-yt { fill: none; stroke: var(--brand-red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(var(--red-rgb) / 0.25)); stroke-dasharray: 220; stroke-dashoffset: 220; animation: wy2YtDraw 4s var(--ease-out) infinite; } .wy2-yt-fill { opacity: 0; animation: wy2YtFill 4s var(--ease-out) infinite; } .wy2-yt-dot { fill: var(--brand-red); filter: drop-shadow(0 0 4px rgba(var(--red-rgb) / 0.7)); animation: wy2YtDot 4s var(--ease-out) infinite; } .wy2-label { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.1em; text-transform: uppercase; } .wy2-label--ig { fill: var(--mute); } .wy2-label--yt { fill: var(--brand-red); } .wy2-axis { font-family: var(--font-mono); font-size: 6.5px; fill: var(--mute); letter-spacing: 0.1em; } @keyframes wy2YtDraw { 0% { stroke-dashoffset: 220; } 55% { stroke-dashoffset: 0; } 95% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 220; opacity: 0; } } @keyframes wy2YtFill { 0%, 100% { opacity: 0; } 60%, 90% { opacity: 1; } } @keyframes wy2YtDot { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 55% { transform: translate(200px, -62px); opacity: 1; } 95% { transform: translate(200px, -62px); opacity: 1; } 100% { transform: translate(200px, -62px); opacity: 0; } } /* ===== TILE 03 — Donut (55-64 Zielgruppe) ===== */ .wy3-donut { width: 140px; height: 140px; margin: 0 auto; display: block; } .wy3-ring-bg { fill: none; stroke: rgba(var(--ink-rgb) / 0.1); stroke-width: 10; } .wy3-ring-fill { fill: none; stroke: var(--brand-red); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; stroke-dasharray: 34.7 100; stroke-dashoffset: 100; filter: drop-shadow(0 2px 6px rgba(var(--red-rgb) / 0.3)); animation: wy3Fill 3s var(--ease-out) infinite; } .wy3-age { font-family: var(--font-display); font-size: 22px; font-weight: 500; fill: var(--ink); font-variation-settings: 'opsz' 72, 'SOFT' 50; } .wy3-age-sub { font-family: var(--font-mono); font-size: 6.5px; letter-spacing: 0.2em; fill: var(--mute); } @keyframes wy3Fill { 0% { stroke-dashoffset: 100; } 55% { stroke-dashoffset: 65.3; } 95% { stroke-dashoffset: 65.3; } 100% { stroke-dashoffset: 100; } } /* ===== TILE 04 — WIDE Comparison ===== */ .bento-tile--wide .bento-tile__stage { padding: 74px 40px 32px; min-height: 230px; } .bento-tile__stage--compare { display: grid !important; grid-template-columns: auto auto 1fr; gap: var(--sp-6); align-items: center; } .wy4-col { display: flex; flex-direction: column; gap: 8px; } .wy4-col--no { max-width: 180px; } .wy4-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8125rem; font-weight: 500; color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(var(--red-rgb) / 0.5); text-decoration-thickness: 1.5px; white-space: nowrap; box-shadow: 0 1px 2px rgba(var(--ink-rgb) / 0.03); opacity: 0; animation: wy4PillIn 0.7s var(--ease-out) forwards; } .wy4-pill:nth-child(1) { animation-delay: 0.2s; } .wy4-pill:nth-child(2) { animation-delay: 0.35s; } .wy4-pill:nth-child(3) { animation-delay: 0.5s; } .wy4-pill svg { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; } .wy4-x { color: var(--brand-red); font-size: 0.75rem; margin-left: auto; } @keyframes wy4PillIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 0.7; transform: translateX(0); } } .wy4-arrow { color: var(--brand-red); opacity: 0.8; animation: wy4ArrowPulse 2.4s ease-in-out infinite; } .wy4-arrow svg { width: 42px; height: 24px; } @keyframes wy4ArrowPulse { 0%, 100% { transform: translateX(0); opacity: 0.6; } 50% { transform: translateX(5px); opacity: 1; } } .wy4-col--yes { flex: 1; } .wy4-hero { display: flex; align-items: center; gap: 18px; padding: 14px; background: #0d0d10; border-radius: var(--r-lg); box-shadow: 0 10px 30px rgba(var(--ink-rgb) / 0.25); } .wy4-hero-thumb { position: relative; width: 88px; height: 50px; background: linear-gradient(135deg, #2a2a2e, #0a0a0c); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .wy4-hero-thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), transparent 60%); } .wy4-hero-play { width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 0 6px rgba(var(--red-rgb) / 0.7)); position: relative; } .wy4-hero-rec { position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; background: var(--brand-red); border-radius: 50%; box-shadow: 0 0 8px rgba(var(--red-rgb) / 0.9); animation: wy4Rec 1.6s ease-in-out infinite; } .wy4-hero-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .wy4-hero-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.5); } .wy4-hero-title { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; color: #fff; line-height: 1.2; } .wy4-hero-bar { margin-top: 5px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.14); overflow: hidden; } .wy4-hero-bar span { display: block; height: 100%; width: 0; background: var(--brand-red); animation: wy4Bar 6s linear infinite; } @keyframes wy4Rec { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } @keyframes wy4Bar { 0% { width: 0; } 100% { width: 100%; } } .bento-tile__body--wide { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: end; padding: var(--sp-6) 40px; } .bento-tile__caption { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); white-space: nowrap; } /* ===== Stagger reveal ===== */ .bento-why .bento-tile.reveal { opacity: 0; transform: translateY(32px) scale(0.97); filter: blur(6px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), filter 650ms var(--ease-out); will-change: transform, opacity, filter; } .bento-why .bento-tile.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .bento-why .bento-tile:nth-child(1).reveal { transition-delay: 0ms; } .bento-why .bento-tile:nth-child(2).reveal { transition-delay: 120ms; } .bento-why .bento-tile:nth-child(3).reveal { transition-delay: 240ms; } .bento-why .bento-tile:nth-child(4).reveal { transition-delay: 360ms; } /* ===== Why-Bridge (identisch zur problems-bridge, nur neuer Name) ===== */ .why-bridge { margin: var(--sp-16) auto var(--sp-6); max-width: 680px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .why-bridge__rule { width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, rgba(var(--ink-rgb) / 0.4), transparent); margin-bottom: var(--sp-3); } .why-bridge__chapter { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); } .why-bridge__chapter::before, .why-bridge__chapter::after { content: ""; width: 28px; height: 1px; background: rgba(var(--ink-rgb) / 0.35); } .why-bridge__lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.25rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 22ch; } .why-bridge__lead em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; color: var(--brand-red); } .why-bridge__sub { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0; } .why-bridge__arrow { display: inline-flex; margin-top: var(--sp-3); width: 28px; height: 28px; color: var(--brand-red); animation: bridgeArrow 2.2s ease-in-out infinite; } .why-bridge__arrow svg { width: 100%; height: 100%; } /* Responsive: collapse Bento to a single column on mobile */ @media (max-width: 960px) { .bento-why { grid-template-columns: 1fr; } .bento-tile--wide { grid-column: 1; } .bento-tile__stage--compare { grid-template-columns: 1fr; gap: var(--sp-4); } .wy4-arrow { transform: rotate(90deg); } .bento-tile__body--wide { grid-template-columns: 1fr; gap: var(--sp-3); } } @media (prefers-reduced-motion: reduce) { .wy1-search-track, .wy1-caret, .wy1-play, .wy1-waveform span, .wy2-yt, .wy2-yt-fill, .wy2-yt-dot, .wy3-ring-fill, .wy4-pill, .wy4-arrow, .wy4-hero-rec, .wy4-hero-bar span, .bento-tile__tag::before, .why-bridge__arrow { animation: none !important; } .wy2-yt { stroke-dashoffset: 0; } } /* ============================================================ 05 · METHODE — Editorial Alternating Split-Layout ============================================================ */ .section--method .section__header { margin-bottom: var(--sp-16); } .section--method-pinned { padding-bottom: var(--sp-16); } .section__cta--method { margin-top: var(--sp-12); } .method-flow { display: flex; flex-direction: column; align-items: center; } /* ═══════ Step block ═══════ */ .method-step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-8), 4vw, var(--sp-16)); align-items: center; width: 100%; max-width: 1200px; } .method-step--right .method-step__content { order: 2; } .method-step--right .method-step__visual { order: 1; } .method-step__content { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 520px; } .method-step--right .method-step__content { margin-left: auto; } .method-step__chapter { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-red); font-weight: 500; } .method-step__chapter::before { content: none; } .method-step__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3vw + 1rem, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin: 0; font-variation-settings: 'opsz' 144, 'SOFT' 50; } .method-step__text { font-size: var(--fs-body-l); line-height: 1.55; color: var(--mute); margin: 0; max-width: 52ch; } .method-step__points { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); } .method-step__points li { display: flex; align-items: baseline; gap: 12px; font-size: 0.9375rem; color: var(--ink); line-height: 1.5; } .method-step__tick { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--red-rgb) / 0.1); position: relative; transform: translateY(3px); } .method-step__tick::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 4px; border-left: 1.5px solid var(--brand-red); border-bottom: 1.5px solid var(--brand-red); transform: translate(-50%, -60%) rotate(-45deg); } .method-step__metrics { display: flex; gap: var(--sp-6); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); } .method-metric { display: flex; flex-direction: column; gap: 4px; } .method-metric__value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; line-height: 1; color: var(--ink); font-variation-settings: 'opsz' 72, 'SOFT' 50; } .method-metric__label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } /* ═══════ Visual stage (per step) ═══════ */ .method-step__visual { position: relative; display: flex; align-items: center; justify-content: center; align-self: center; width: 100%; max-width: 580px; margin-inline: auto; } .method-step--right .method-step__visual { margin-right: auto; margin-left: 0; } .method-step--left .method-step__visual { margin-left: auto; margin-right: 0; } .ms-stage { position: relative; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(20px, 2.4vw, 28px); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 4px rgba(var(--ink-rgb) / 0.03), 0 20px 44px rgba(var(--ink-rgb) / 0.08); overflow: hidden; isolation: isolate; } .ms-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(var(--ink-rgb) / 0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--ink-rgb) / 0.025) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at 50% 50%, black 35%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 35%, transparent 95%); pointer-events: none; } /* ═══════ Step 01 — Calendar ═══════ */ .ms-stage--cal { display: flex; flex-direction: column; gap: 14px; } .ms-cal-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--mute); } .ms-cal-title { font-weight: 500; } .ms-cal-rec { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-red); font-weight: 500; } .ms-cal-rec span { width: 6px; height: 6px; background: var(--brand-red); border-radius: 50%; animation: msCalRec 1.6s ease-in-out infinite; } @keyframes msCalRec { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } .ms-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ms-cal-month-label { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; } .ms-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .ms-cal-grid > span { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.625rem; color: var(--mute); border-radius: 4px; transition: background 200ms var(--ease-out); } .ms-cal-grid > span:empty { color: transparent; } .ms-cal-dow { font-weight: 600; color: var(--faint) !important; font-size: 0.5625rem !important; } .ms-cal-day.is-drehtag { background: var(--brand-red); color: #fff !important; font-weight: 600; box-shadow: 0 0 0 3px rgba(var(--red-rgb) / 0.2); animation: msCalDreh 3s ease-in-out infinite; } @keyframes msCalDreh { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--red-rgb) / 0.2); } 50% { box-shadow: 0 0 0 6px rgba(var(--red-rgb) / 0.05); } } .ms-cal-output { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper-2); border-radius: var(--r); font-size: 0.6875rem; letter-spacing: 0.08em; } .ms-cal-output-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; } .ms-cal-output-dot { width: 6px; height: 6px; background: var(--brand-red); border-radius: 50%; } .ms-cal-output-arrow { color: var(--faint); } .ms-cal-output-item--result { color: var(--brand-red); } /* ═══════ Step 02 — Editor ═══════ */ .ms-stage--editor { display: flex; flex-direction: column; gap: 16px; } .ms-editor-header { display: flex; justify-content: space-between; align-items: center; } .ms-editor-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 999px; } .ms-editor-tab { padding: 6px 12px; border-radius: 999px; font-size: 0.625rem; letter-spacing: 0.16em; color: var(--mute); text-transform: uppercase; transition: all 220ms var(--ease-out); } .ms-editor-tab.is-active { background: var(--ink); color: #fff; } .ms-editor-dot { width: 8px; height: 8px; background: var(--brand-red); border-radius: 50%; animation: msCalRec 1.6s ease-in-out infinite; } .ms-editor-preview { display: flex; gap: 12px; align-items: center; } .ms-editor-preview-frame { position: relative; width: 120px; height: 68px; background: linear-gradient(135deg, #2a2a2e, #0a0a0c); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .ms-editor-preview-frame::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), transparent 60%); } .ms-editor-play { width: 28px; height: 28px; background: var(--brand-red); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; z-index: 1; box-shadow: 0 0 12px rgba(var(--red-rgb) / 0.6); } .ms-editor-play svg { width: 12px; height: 12px; margin-left: 2px; } .ms-editor-preview-meta { display: flex; flex-direction: column; gap: 6px; font-size: 0.625rem; letter-spacing: 0.14em; color: var(--mute); } .ms-editor-preview-meta span:first-child { color: var(--brand-red); font-weight: 500; } .ms-editor-preview-meta-time { font-size: 0.5625rem; } .ms-editor-timeline { position: relative; padding: 10px; background: var(--paper-2); border-radius: var(--r); } .ms-editor-track { position: relative; height: 14px; background: rgba(var(--ink-rgb) / 0.04); border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .ms-editor-clip { position: absolute; top: 2px; bottom: 2px; background: var(--ink); border-radius: 2px; opacity: 0.7; } .ms-editor-clip--hook { background: var(--brand-red); opacity: 1; } .ms-editor-clip--cta { background: var(--brand-red); opacity: 1; } .ms-editor-track--audio { height: 20px; background: transparent; display: flex; align-items: center; } .ms-editor-wave { width: 100%; height: 100%; display: flex; align-items: center; gap: 1.5px; } .ms-editor-wave span { flex: 1; background: rgba(var(--ink-rgb) / 0.3); border-radius: 1px; animation: msEditorWave 1.6s ease-in-out infinite; } .ms-editor-wave span:nth-child(3n) { animation-delay: 0.2s; } .ms-editor-wave span:nth-child(3n+1) { animation-delay: 0.1s; } .ms-editor-wave span:nth-child(4n) { animation-delay: 0.3s; } @keyframes msEditorWave { 0%, 100% { height: 20%; } 50% { height: 90%; } } .ms-editor-playhead { position: absolute; top: 6px; bottom: 26px; width: 1.5px; background: var(--brand-red); box-shadow: 0 0 6px rgba(var(--red-rgb) / 0.8); animation: msEditorPlayhead 5s linear infinite; } @keyframes msEditorPlayhead { 0% { left: 10px; } 100% { left: calc(100% - 10px); } } .ms-editor-ruler { display: flex; justify-content: space-between; font-size: 0.5rem; color: var(--faint); padding: 0 2px; } .ms-editor-thumbs { display: flex; flex-direction: column; gap: 8px; } .ms-editor-thumbs-label { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } .ms-editor-thumbs-row { display: flex; gap: 8px; } .ms-editor-thumb { flex: 1; aspect-ratio: 16/9; background: linear-gradient(135deg, #2a2a2e, #161618); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.35); font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; position: relative; transition: all 300ms var(--ease-out); border: 1.5px solid transparent; } .ms-editor-thumb.is-winner { border-color: var(--brand-red); color: #fff; box-shadow: 0 6px 16px rgba(var(--red-rgb) / 0.25); } .ms-editor-thumb-badge { position: absolute; top: -8px; right: -8px; padding: 2px 6px; background: var(--brand-red); color: #fff; font-family: var(--font-mono); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.1em; border-radius: 4px; box-shadow: 0 2px 6px rgba(var(--red-rgb) / 0.4); } /* ═══════ Step 03 — Dashboard ═══════ */ .ms-stage--dash { display: flex; flex-direction: column; gap: 14px; } .ms-dash-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--mute); } .ms-dash-live { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-red); font-weight: 600; letter-spacing: 0.22em; } .ms-dash-live span { width: 6px; height: 6px; background: var(--brand-red); border-radius: 50%; animation: msCalRec 1.6s ease-in-out infinite; } .ms-dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ms-dash-stat { padding: 14px; background: var(--paper-2); border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; position: relative; } .ms-dash-stat-label { font-size: 0.5625rem; letter-spacing: 0.16em; color: var(--mute); } .ms-dash-stat-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--ink); line-height: 1; font-variation-settings: 'opsz' 72, 'SOFT' 50; } .ms-dash-stat-delta { position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; color: var(--brand-red); letter-spacing: 0.1em; } .ms-dash-chart { padding: 14px 6px; background: var(--paper-2); border-radius: var(--r); } .ms-dash-chart svg { width: 100%; height: auto; display: block; } .ms-dash-grid { stroke: rgba(var(--ink-rgb) / 0.08); stroke-width: 0.8; stroke-dasharray: 2 3; } .ms-dash-line { fill: none; stroke: var(--brand-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(var(--red-rgb) / 0.3)); stroke-dasharray: 420; stroke-dashoffset: 420; animation: msDashDraw 4s var(--ease-out) infinite; } .ms-dash-fill { opacity: 0; animation: msDashFillFade 4s var(--ease-out) infinite; } .ms-dash-dot { fill: var(--brand-red); filter: drop-shadow(0 0 4px rgba(var(--red-rgb) / 0.8)); animation: msDashDot 4s var(--ease-out) infinite; } @keyframes msDashDraw { 0% { stroke-dashoffset: 420; } 55% { stroke-dashoffset: 0; } 95% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes msDashFillFade { 0%, 100% { opacity: 0; } 60%, 90% { opacity: 1; } } @keyframes msDashDot { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 55% { transform: translate(300px, -60px); opacity: 1; } 95% { transform: translate(300px, -60px); opacity: 1; } 100% { transform: translate(300px, -60px); opacity: 0; } } .ms-dash-schedule { padding: 10px 14px; background: var(--paper-2); border-radius: var(--r); display: flex; flex-direction: column; gap: 8px; } .ms-dash-schedule-label { font-size: 0.5625rem; letter-spacing: 0.18em; color: var(--mute); margin-bottom: 4px; } .ms-dash-schedule-row { display: flex; align-items: center; gap: 12px; font-size: 0.6875rem; } .ms-dash-schedule-day { width: 24px; font-family: var(--font-mono); font-weight: 700; color: var(--faint); letter-spacing: 0.1em; } .ms-dash-schedule-pill { padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; font-weight: 600; } .ms-dash-schedule-pill--long { background: rgba(var(--red-rgb) / 0.1); color: var(--brand-red); } .ms-dash-schedule-pill--short { background: rgba(var(--ink-rgb) / 0.08); color: var(--ink); } /* ═══════ Connector between steps ═══════ */ .method-connector { display: flex; align-items: center; gap: 16px; margin: var(--sp-12) 0; width: 100%; max-width: 640px; } .method-connector__line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(var(--ink-rgb) / 0.2), transparent); } .method-connector__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.22em; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(var(--ink-rgb) / 0.04), 0 6px 14px rgba(var(--ink-rgb) / 0.04); } .method-connector__dot { width: 6px; height: 6px; background: var(--brand-red); border-radius: 50%; box-shadow: 0 0 8px rgba(var(--red-rgb) / 0.6); animation: msCalRec 1.6s ease-in-out infinite; } /* ═══════ Method Bridge ═══════ */ .method-bridge { margin: var(--sp-16) auto 0; max-width: 680px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .method-bridge__rule { width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, rgba(var(--ink-rgb) / 0.4), transparent); margin-bottom: var(--sp-3); } .method-bridge__chapter { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); } .method-bridge__chapter::before, .method-bridge__chapter::after { content: ""; width: 28px; height: 1px; background: rgba(var(--ink-rgb) / 0.35); } .method-bridge__lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2.25rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 24ch; } .method-bridge__lead em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; color: var(--brand-red); } .method-bridge__sub { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0; } .method-bridge__arrow { display: inline-flex; margin-top: var(--sp-3); width: 28px; height: 28px; color: var(--brand-red); animation: bridgeArrow 2.2s ease-in-out infinite; } .method-bridge__arrow svg { width: 100%; height: 100%; } /* Stagger reveal */ .method-step.reveal { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 650ms var(--ease-out); } .method-step.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } /* Mobile — stack content above visual, full-width */ @media (max-width: 960px) { .method-step { grid-template-columns: 1fr; gap: var(--sp-8); } .method-step--right .method-step__content, .method-step--right .method-step__visual { order: unset; } .method-step__content { margin-left: 0; } .method-step__metrics { gap: var(--sp-4); } .method-metric__value { font-size: 1.375rem; } .method-connector { margin: var(--sp-8) 0; } } @media (prefers-reduced-motion: reduce) { .ms-cal-rec span, .ms-cal-day.is-drehtag, .ms-editor-dot, .ms-editor-wave span, .ms-editor-playhead, .ms-dash-live span, .ms-dash-line, .ms-dash-fill, .ms-dash-dot, .method-connector__dot, .method-bridge__arrow { animation: none !important; } .ms-dash-line { stroke-dashoffset: 0; } } /* ============================================================ 06 · FÜR WEN (Persona Tabs + Split Stage) ============================================================ */ #fuer-wen .section__header { text-align: center; margin-bottom: var(--sp-12); } #fuer-wen .section__header .section__sub { margin-inline: auto; max-width: 58ch; } .persona-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin: 0 auto var(--sp-8); max-width: 980px; } .persona-tab { appearance: none; background: transparent; border: 1px dashed rgb(var(--ink-rgb) / 0.22); color: var(--mute); font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.005em; padding: 0.6875rem 1.1875rem; border-radius: 999px; cursor: pointer; transition: color 220ms var(--ease-quick), border-color 220ms var(--ease-quick), background-color 220ms var(--ease-quick), transform 220ms var(--ease-quick); will-change: transform; } .persona-tab:hover { color: var(--ink); border-color: rgb(var(--ink-rgb) / 0.55); transform: translateY(-1px); } .persona-tab.is-active { background: rgb(var(--red-rgb) / 0.06); color: var(--brand-red); border: 1px solid var(--brand-red); transform: none; } .persona-tab:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 4px; } /* Stage — large paper-2 container */ .persona-stage { position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(2.25rem, 4vw, 4rem); overflow: hidden; } .persona-panel { display: none; } .persona-panel[hidden] { display: none; } .persona-panel.is-active { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; animation: personaFade 520ms var(--ease-out); } @keyframes personaFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Left column — headline + copy + CTA */ .persona-copy { display: flex; flex-direction: column; gap: var(--sp-6); } .persona-copy__eyebrow { display: inline-flex; align-items: center; gap: 0.5em; align-self: flex-start; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-red); padding: 0.4em 0.85em; border: 1px solid rgba(var(--red-rgb) / 0.32); background: rgba(var(--red-rgb) / 0.08); border-radius: 999px; margin: 0; } .persona-copy__eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 0 4px rgba(var(--red-rgb) / 0.18); } .persona-copy__headline { font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-size: clamp(2rem, 3.8vw, 3.25rem); letter-spacing: -0.025em; line-height: 1.04; margin: 0; color: var(--ink); } .persona-copy__headline > span { display: block; } .persona-copy__headline .is-mute { color: var(--mute); } .persona-copy__sub { font-size: var(--fs-body-l); line-height: 1.55; color: var(--ink); max-width: 46ch; margin: 0; opacity: 0.86; } .persona-copy__proof { padding: var(--sp-4) var(--sp-6); background: var(--paper); border-left: 2px solid var(--brand-red); border-radius: 0 var(--r) var(--r) 0; } .persona-copy__proof p { margin: 0; } .persona-copy__proof p + p { margin-top: var(--sp-2); font-family: var(--font-display); font-variation-settings: 'opsz' 72, 'SOFT' 50; font-style: italic; font-size: 1.0625rem; color: var(--ink); line-height: 1.45; } .persona-copy__cta { display: inline-flex; align-items: center; gap: 0.625rem; align-self: flex-start; background: var(--ink); color: var(--paper); padding: 0.8125rem 1.375rem; border-radius: 999px; font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; text-decoration: none; transition: background-color 220ms var(--ease-quick), transform 220ms var(--ease-quick), box-shadow 220ms var(--ease-quick); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .persona-copy__cta:hover { background: var(--brand-red); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgb(var(--red-rgb) / 0.5); } .persona-copy__cta svg { transition: transform 260ms var(--ease-out); } .persona-copy__cta:hover svg { transform: translateX(3px); } /* Checks list — inserted in left column between sub and proof */ .persona-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } .persona-check { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); letter-spacing: -0.003em; } .persona-check__icon { color: var(--brand-red); flex-shrink: 0; margin-top: 2px; } /* Right column — single large persona hero image */ .persona-visual { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); aspect-ratio: 4 / 5; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 60px -28px rgba(0,0,0,0.25); } .persona-visual::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.06); pointer-events: none; z-index: 2; } .persona-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease-out); } .persona-panel.is-active .persona-visual img { animation: personaImgIn 900ms var(--ease-out); } @keyframes personaImgIn { from { transform: scale(1.05); opacity: 0.85; } to { transform: scale(1); opacity: 1; } } /* Disqualifier — dark editorial block */ .disqualifier { max-width: 920px; margin: var(--sp-16) auto 0; padding: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem); background: var(--ink); color: var(--paper-on-ink); border-radius: var(--r-xl); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .disqualifier__head .pre { color: rgba(255, 255, 255, 0.5); margin: 0; } .disqualifier__title { font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.1; margin: var(--sp-3) 0 0; color: var(--paper-on-ink); } .disqualifier__title em { font-style: italic; color: var(--brand-red); } .disqualifier__list { list-style: none; padding: 0 0 0 var(--sp-8); margin: 0; display: grid; gap: var(--sp-3); border-left: 1px solid rgba(255, 255, 255, 0.14); } .disqualifier__list li { font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); position: relative; padding-left: var(--sp-6); } .disqualifier__list li::before { content: '×'; position: absolute; left: 0; top: -2px; color: var(--brand-red); font-weight: 600; font-size: 1.125rem; line-height: 1.5; } /* Responsive */ @media (max-width: 960px) { .persona-panel.is-active { grid-template-columns: 1fr; gap: var(--sp-8); } .persona-copy__headline { font-size: clamp(1.75rem, 5vw, 2.5rem); } } @media (max-width: 720px) { .persona-stage { padding: var(--sp-6); } .persona-tab { padding: 0.5625rem 1rem; font-size: 0.875rem; } .disqualifier { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6); } .disqualifier__list { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding: var(--sp-6) 0 0; } } @media (prefers-reduced-motion: reduce) { .persona-panel.is-active { animation: none; } .persona-card, .persona-card__thumb img, .persona-copy__cta, .persona-copy__cta svg, .persona-tab { transition: none; } } /* ============================================================ 07 · ÜBER MARCEL ============================================================ */ .about { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-16); align-items: start; } .about__visual { position: sticky; top: 120px; } .about__portrait { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: #0B0B0D; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.25); margin: 0; } .about__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease-out); } .about__portrait:hover img { transform: scale(1.02); } /* Bottom gradient + caption strip */ .about__portrait::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.65) 70%, rgba(0, 0, 0, 0.85) 100%); pointer-events: none; z-index: 1; } .about__portrait-meta { position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.18); } .about__portrait-caption { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; color: #fff; line-height: 1.2; letter-spacing: -0.01em; } .about__portrait-sub { font-size: 0.6875rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; } .about__portrait-corners { position: absolute; inset: 12px; pointer-events: none; z-index: 3; } .about__portrait-corners > span { position: absolute; width: 18px; height: 18px; border-color: rgba(255, 255, 255, 0.22); border-style: solid; border-width: 0; } .about__portrait-corners > span:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; } .about__portrait-corners > span:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; } .about__portrait-corners > span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; } .about__portrait-corners > span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; } .about__content .section__headline { text-align: left; margin-top: var(--sp-3); max-width: 22ch; } .about__content .pre { text-align: left; } .about__prose { margin: var(--sp-6) 0 var(--sp-8); max-width: 58ch; } .about__prose p { margin: 0 0 var(--sp-5); font-size: var(--fs-body-l); line-height: 1.65; color: var(--ink); } .about__prose p strong { font-weight: 600; color: var(--ink); } /* --- Stat-Row (new) --- */ .about__stats { list-style: none; padding: var(--sp-6) 0 0; margin: var(--sp-8) 0 var(--sp-4); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-5); border-top: 1px solid rgb(var(--ink-rgb) / 0.12); } .about__stat { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .about__stat-value { display: inline-flex; align-items: baseline; gap: 0.18em; font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-size: clamp(2.25rem, 3.2vw, 3.125rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .about__stat-number { font-variant-numeric: tabular-nums; transition: color 200ms var(--ease-quick); } .about__stat:hover .about__stat-number { color: var(--brand-red); } .about__stat-unit { font-family: var(--font-display); font-variation-settings: 'opsz' 72, 'SOFT' 50; font-style: italic; font-size: 0.44em; font-weight: 400; letter-spacing: -0.01em; color: var(--mute); } .about__stat-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); line-height: 1.45; max-width: 22ch; } /* --- Pull-Quote --- */ .about__quote { margin: var(--sp-8) 0; padding: var(--sp-4) 0 var(--sp-4) var(--sp-6); border-left: 2px solid var(--brand-red); } .about__quote p { margin: 0; font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-size: clamp(1.375rem, 1.8vw, 1.75rem); letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); } .about__quote em { font-style: italic; color: var(--brand-red); } /* --- Locations-Strip --- */ .about__locations { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-5); margin: 0 0 var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgb(var(--ink-rgb) / 0.1); } .about__locations-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } .about__locations-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); } .about__locations-list li { font-size: 0.8125rem; color: var(--ink); letter-spacing: 0.02em; position: relative; } .about__locations-list li + li::before { content: '·'; position: absolute; left: -0.85rem; top: 50%; transform: translateY(-50%); color: rgb(var(--ink-rgb) / 0.35); } .about__cta { align-self: flex-start; } /* --- Reveal stagger for stats --- */ .about__content.reveal .about__stat { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); } .about__content.reveal .about__stat:nth-child(1) { transition-delay: 120ms; } .about__content.reveal .about__stat:nth-child(2) { transition-delay: 200ms; } .about__content.reveal .about__stat:nth-child(3) { transition-delay: 280ms; } .about__content.reveal .about__stat:nth-child(4) { transition-delay: 360ms; } .about__content.reveal.active .about__stat, .about__content.reveal.is-visible .about__stat { opacity: 1; transform: none; } @media (max-width: 1200px) { .about__stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-5); } } @media (max-width: 960px) { .about { grid-template-columns: 1fr; gap: var(--sp-8); } .about__visual { position: static; } .about__portrait { max-width: 360px; margin: 0 auto; } .about__content .section__headline { max-width: none; } } @media (max-width: 520px) { .about__stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); } .about__stat-value { font-size: clamp(1.875rem, 8vw, 2.5rem); } .about__stat-label { font-size: 0.6875rem; line-height: 1.4; } .about__stat-label br { display: none; } } @media (prefers-reduced-motion: reduce) { .about__content.reveal .about__stat { opacity: 1; transform: none; transition: none; } } /* ============================================================ 08 · YOUTUBE-KANAL ============================================================ */ .channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); max-width: 1080px; margin-inline: auto; } .channel-card { display: flex; flex-direction: column; gap: var(--sp-4); text-decoration: none; color: inherit; transition: transform 220ms var(--ease-out); } .channel-card:hover { transform: translateY(-3px); } .channel-card:active { transform: translateY(-1px) scale(0.995); transition: transform 100ms var(--ease-out); } .channel-card:hover .channel-card__thumb { border-color: transparent; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22); } .channel-card:hover .channel-card__poster { transform: scale(1.035); filter: brightness(0.94); } .channel-card:focus-visible { outline: none; } .channel-card:focus-visible .channel-card__thumb { outline: 2px solid var(--brand-red); outline-offset: 3px; } .channel-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); transition: border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 28px -16px rgba(0,0,0,0.12); } .channel-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out), filter 400ms var(--ease-out); } .channel-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: 72px; height: 72px; border-radius: 50%; background: rgba(232, 21, 28, 0.96); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.1) inset; transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out); will-change: transform; } .channel-card__play svg { width: 26px; height: 26px; margin-left: 3px; } .channel-card:hover .channel-card__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(232, 21, 28, 1); } .channel-card:active .channel-card__play { transform: translate(-50%, -50%) scale(0.94); transition: transform 100ms var(--ease-out); } .channel-card__title { font-family: var(--font-display); font-variation-settings: 'opsz' 72, 'SOFT' 50; font-weight: 500; font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin: 0; } .channel-card__meta { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin: 0; } /* YouTube iframe mounts here after click */ .channel-card__thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 10; } .channel-card.is-playing .channel-card__poster, .channel-card.is-playing .channel-card__play, .channel-card.is-playing .tv-badge { opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease-out); } .channel-card.is-playing { transform: none !important; } .channel-card.is-playing:hover { transform: none !important; } .channel-card.is-playing:hover .channel-card__thumb { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22); } /* Stagger reveal (emil: 30-80ms between items) */ .channel-grid.reveal .channel-card { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); } .channel-grid.reveal .channel-card:nth-child(1) { transition-delay: 60ms; } .channel-grid.reveal .channel-card:nth-child(2) { transition-delay: 140ms; } .channel-grid.reveal.is-visible .channel-card, .channel-grid.reveal.active .channel-card { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .channel-grid { grid-template-columns: 1fr; } .channel-card__play { width: 62px; height: 62px; } } @media (prefers-reduced-motion: reduce) { .channel-grid.reveal .channel-card { opacity: 1; transform: none; transition: none; } .channel-card, .channel-card__poster, .channel-card__play { transition: none; } } /* ============================================================ 09 · TESTIMONIALS — Showreel Gallery (Hero + Thumb-Selector) ============================================================ */ #testimonials { background: var(--paper-2); /* harmonisiert mit globalem section-py — war 5-10rem clamp, jetzt im Section-Rhythm */ padding-block: clamp(4rem, 7.5vw, 7.5rem); overflow: hidden; } #testimonials .section__header { text-align: center; margin-bottom: clamp(3.5rem, 6vw, 5.5rem); } #testimonials .section__headline { font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-size: clamp(2.25rem, 5.5vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); max-width: 22ch; margin: 0 auto var(--sp-4); text-wrap: balance; } #testimonials .section__headline em { font-style: italic; color: var(--brand-red); } #testimonials .section__sub { max-width: 54ch; margin: 0 auto; color: var(--mute); font-size: 0.9375rem; } .showreel { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: clamp(1.25rem, 2vw, 1.75rem); max-width: 1240px; margin-inline: auto; align-items: stretch; /* Paper-Card wrap around everything */ background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.25rem, 2.5vw, 2.25rem); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 32px 64px -30px rgba(0, 0, 0, 0.18); } @media (max-width: 880px) { .showreel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; } } /* HERO STAGE — Video links, side-by-side mit Captions */ .showreel__stage { position: relative; grid-column: 1; grid-row: 1; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--ink); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 40px 80px -28px rgba(0, 0, 0, 0.32); align-self: start; } @media (max-width: 880px) { .showreel__stage { grid-column: 1; grid-row: auto; } } .showreel__slides { position: absolute; inset: 0; } .showreel__slide { position: absolute; inset: 0; cursor: pointer; opacity: 0; transform: scale(1.015); filter: blur(8px); transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-out), filter 520ms var(--ease-out); pointer-events: none; } .showreel__slide.is-active { opacity: 1; transform: scale(1); filter: blur(0); pointer-events: auto; z-index: 2; } .showreel__slide:hover .showreel__poster { transform: scale(1.03); filter: brightness(0.92); } .showreel__slide:active .showreel__play { transform: translate(-50%, -50%) scale(0.93); transition: transform 100ms var(--ease-out); } .showreel__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-out), filter 400ms var(--ease-out); } .showreel__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; background: rgba(232, 21, 28, 0.96); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; transition: transform 240ms var(--ease-out), background-color 220ms var(--ease-out); z-index: 3; will-change: transform; } .showreel__play svg { width: 32px; height: 32px; margin-left: 4px; } .showreel__slide:hover .showreel__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(232, 21, 28, 1); } /* Iframe takeover */ .showreel__slide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 10; } .showreel__slide.is-playing .showreel__poster, .showreel__slide.is-playing .showreel__play { opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out); } .showreel__slide.is-playing { cursor: default; } .showreel__slide.is-playing:hover .showreel__poster { transform: none; filter: none; } /* Corner brackets over stage */ .showreel__corners { position: absolute; inset: 14px; pointer-events: none; z-index: 4; } .showreel__corners > span { position: absolute; width: 22px; height: 22px; border-color: rgba(255, 255, 255, 0.26); border-style: solid; border-width: 0; } .showreel__corners > span:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; } .showreel__corners > span:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; } .showreel__corners > span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; } .showreel__corners > span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; } /* CAPTIONS — rechts, spans both rows (full height = Stage + Cite-Bar) */ .showreel__captions { position: relative; grid-column: 2; grid-row: 1 / span 2; min-height: 0; align-self: stretch; display: flex; flex-direction: column; } @media (max-width: 880px) { .showreel__captions { grid-column: 1; grid-row: auto; } } .showreel__caption { margin: 0; padding: 0; position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out); pointer-events: none; visibility: hidden; } .showreel__caption.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; position: relative; inset: auto; flex: 1; display: flex; flex-direction: column; } .showreel__caption > figcaption { display: flex; flex-direction: column; gap: clamp(1.25rem, 2vw, 1.75rem); height: 100%; } /* PSR streckt sich, items am unteren Ende der Spalte verteilt */ .showreel__caption .showreel__psr { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1rem, 1.6vw, 1.5rem); } /* CITE-BAR — links unter dem Video, crossfading mit aktiver Caption */ .showreel__cite-bar { position: relative; grid-column: 1; grid-row: 2; align-self: stretch; min-height: 0; } @media (max-width: 880px) { .showreel__cite-bar { grid-column: 1; grid-row: auto; } } .showreel__cite-card { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out); pointer-events: none; visibility: hidden; } .showreel__cite-card.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; position: relative; inset: auto; } .showreel__chapter { display: inline-flex; align-items: center; gap: 1em; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-red); margin: 0; font-weight: 500; } .showreel__chapter-idx { position: relative; } .showreel__chapter-idx::after { content: none; } .showreel__chapter-loc { color: rgb(var(--ink-rgb) / 0.45); } .showreel__chapter-tag { padding: 0.3em 0.85em; background: var(--brand-red); color: #fff; border-radius: 999px; letter-spacing: 0.14em; font-weight: 600; line-height: 1; } .showreel__quote { margin: 0; padding: 0; } .showreel__quote p { margin: 0; font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.22; color: var(--ink); max-width: 22ch; text-wrap: balance; } .showreel__quote em { color: var(--brand-red); font-style: italic; } .showreel__meta { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(1.1rem, 1.6vw, 1.5rem); padding-block: clamp(1.7rem, 2.4vw, 2.1rem); border-top: 1px solid rgb(var(--ink-rgb) / 0.12); border-bottom: 1px solid rgb(var(--ink-rgb) / 0.12); } .showreel__meta-row { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: clamp(1.5rem, 2.6vw, 2.25rem); row-gap: clamp(0.6rem, 1vw, 0.9rem); position: relative; } /* Cite (Name + Title) — inline pair, beide Texte inline auf der Meta-Row */ .showreel__cite { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35em 0.65em; } .showreel__cite strong { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink); letter-spacing: -0.005em; } .showreel__cite span { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mute); line-height: 1.5; } .showreel__stats { display: inline-flex; flex-wrap: wrap; gap: clamp(1rem, 1.8vw, 1.5rem); margin: 0; padding: 0; justify-content: center; align-items: baseline; } .showreel__stats > div { display: inline-flex; align-items: baseline; gap: 0.4em; } .showreel__stats dt { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--brand-red); line-height: 1.2; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; } .showreel__stats dd { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; color: var(--mute); line-height: 1.5; letter-spacing: 0; text-transform: none; } /* YouTube-Button: schwarzer Pill, YT-Logo + Handle in weiss */ .showreel__yt-link { display: inline-flex; align-self: center; width: fit-content; align-items: center; gap: 0.7em; padding: 0.65em 1.4em 0.65em 0.85em; background: var(--ink); color: #fff; border-radius: 999px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: background-color 220ms var(--ease-quick), transform 220ms var(--ease-quick), box-shadow 240ms var(--ease-quick), gap 220ms var(--ease-quick); box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 10px 24px -16px rgba(0,0,0,0.4); } .showreel__yt-link:hover { background: var(--brand-red); transform: translateY(-1px); gap: 0.95em; box-shadow: 0 2px 4px rgba(232,21,28,0.18), 0 18px 36px -14px rgba(232,21,28,0.55); } .showreel__yt-link:active { transform: translateY(0) scale(0.98); transition: transform 100ms var(--ease-out); } .showreel__yt-logo { width: 28px; height: 20px; display: block; flex: 0 0 auto; } .showreel__yt-handle { color: #fff; font-weight: 500; } .showreel__yt-arrow { color: rgba(255,255,255,0.7); transition: transform 240ms var(--ease-out), color 220ms var(--ease-quick); flex: 0 0 auto; } .showreel__yt-link:hover .showreel__yt-arrow { transform: translate(2px, -2px); color: #fff; } .showreel__link svg { transition: transform 260ms var(--ease-out); } .showreel__link:hover { border-color: var(--brand-red); color: var(--brand-red); background: rgb(var(--red-rgb) / 0.06); } .showreel__link:hover svg { transform: translate(2px, -2px); } .showreel__link:active { transform: scale(0.97); transition: transform 100ms var(--ease-out); } /* SELECTOR (full-width below stage + caption) — tight spacing inside card */ .showreel__selector { grid-column: 1 / -1; display: flex; flex-direction: column; gap: clamp(0.5rem, 1vw, 0.875rem); margin-top: 0; padding-top: clamp(1.25rem, 1.8vw, 1.6rem); border-top: 0; } /* Controls row — prev/next + label + counter */ .showreel__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .showreel__nav { appearance: none; background: transparent; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(var(--ink-rgb) / 0.18); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 200ms var(--ease-quick), color 200ms var(--ease-quick), background-color 200ms var(--ease-quick), transform 180ms var(--ease-quick); flex-shrink: 0; padding: 0; } .showreel__nav:hover { border-color: var(--brand-red); color: var(--brand-red); background: rgb(var(--red-rgb) / 0.06); } .showreel__nav:active { transform: scale(0.93); transition: transform 90ms var(--ease-out); } .showreel__nav:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; } .showreel__label { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0; text-align: center; } .showreel__label-hint { position: relative; } .showreel__label-hint::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--red-rgb) / 0.4), transparent); } .showreel__counter { display: inline-flex; align-items: baseline; gap: 0.12em; font-family: var(--font-mono); font-size: 0.9375rem; letter-spacing: -0.01em; } .showreel__counter-cur { color: var(--brand-red); font-weight: 600; font-variant-numeric: tabular-nums; } .showreel__counter-sep, .showreel__counter-total { color: rgb(var(--ink-rgb) / 0.35); } .showreel__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.625rem, 1.2vw, 1rem); } .showreel__thumb { appearance: none; background: var(--paper-2); border: 1px solid rgb(var(--ink-rgb) / 0.08); border-radius: var(--r-lg); padding: 0; display: grid; grid-template-columns: 140px 1fr; gap: clamp(0.625rem, 1.3vw, 1.125rem); align-items: center; text-align: left; cursor: pointer; overflow: hidden; position: relative; opacity: 0.62; transition: opacity 300ms var(--ease-quick), border-color 220ms var(--ease-quick), background-color 260ms var(--ease-quick), transform 220ms var(--ease-out), box-shadow 260ms var(--ease-out); } .showreel__thumb:hover { opacity: 1; border-color: rgb(var(--ink-rgb) / 0.3); transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.18); } .showreel__thumb:active { transform: translateY(-1px) scale(0.993); transition: transform 100ms var(--ease-out); } .showreel__thumb:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; } .showreel__thumb.is-active { opacity: 1; border-color: var(--brand-red); box-shadow: 0 16px 40px -14px rgb(var(--red-rgb) / 0.35); } .showreel__thumb.is-active .showreel__thumb-num { color: var(--brand-red); } .showreel__thumb-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); height: 100%; } .showreel__thumb-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out), filter 400ms var(--ease-out); } .showreel__thumb:hover .showreel__thumb-media img { transform: scale(1.06); filter: brightness(0.88); } /* NEU badge (on thumb 3) */ .showreel__thumb-badge { position: absolute; top: 8px; left: 8px; padding: 0.26em 0.6em; background: var(--brand-red); color: #fff; font-size: 0.5625rem; letter-spacing: 0.16em; font-weight: 600; border-radius: 999px; line-height: 1; z-index: 2; } /* Active "• AKTIV" indicator — shown on .is-active thumb */ .showreel__thumb-indicator { position: absolute; top: 8px; right: 8px; padding: 0.3em 0.7em 0.3em 0.55em; background: var(--brand-red); color: #fff; font-size: 0.5625rem; letter-spacing: 0.16em; font-weight: 600; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; gap: 0.5em; opacity: 0; transform: translateY(-4px) scale(0.95); pointer-events: none; transition: opacity 280ms var(--ease-out), transform 300ms var(--ease-out); z-index: 2; } .showreel__thumb-indicator-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.9); animation: aktivPulse 1400ms ease-in-out infinite; } @keyframes aktivPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } } .showreel__thumb.is-active .showreel__thumb-indicator { opacity: 1; transform: none; } /* Hover "Ansehen →" CTA — shown on non-active thumb hover */ .showreel__thumb-cta { position: absolute; bottom: 8px; right: 8px; padding: 0.38em 0.85em; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 0.5625rem; letter-spacing: 0.16em; font-weight: 600; border-radius: 999px; line-height: 1; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 240ms var(--ease-out), transform 280ms var(--ease-out); z-index: 2; } .showreel__thumb-cta::after { content: ' →'; margin-left: 0.15em; } .showreel__thumb:not(.is-active):hover .showreel__thumb-cta { opacity: 1; transform: none; } .showreel__thumb-body { display: flex; flex-direction: column; gap: 2px; padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.75rem, 1.5vw, 1rem) clamp(0.75rem, 1.3vw, 1rem) 0; } .showreel__thumb-num { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); font-weight: 500; margin-bottom: 4px; } .showreel__thumb-name { font-family: var(--font-display); font-variation-settings: 'opsz' 72, 'SOFT' 50; font-weight: 500; font-size: 1.0625rem; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; } .showreel__thumb-meta { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-top: 4px; } /* Progress bar under active thumb (auto-rotate timer) */ .showreel__thumb-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(var(--ink-rgb) / 0.08); overflow: hidden; z-index: 3; } .showreel__thumb-progress-fill { position: absolute; inset: 0; background: var(--brand-red); width: 0%; } .showreel__thumb.is-active .showreel__thumb-progress-fill { animation: showreelProgress 8s linear forwards; } @keyframes showreelProgress { 0% { width: 0%; } 100% { width: 100%; } } .showreel.is-paused .showreel__thumb.is-active .showreel__thumb-progress-fill { animation-play-state: paused; } /* Responsive */ @media (max-width: 960px) { .showreel { grid-template-columns: 1fr; } .showreel__stage { grid-row: auto; } .showreel__captions { min-height: auto; } .showreel__selector { grid-column: auto; } .showreel__thumbs { grid-template-columns: 1fr; } .showreel__play { width: 72px; height: 72px; } .showreel__play svg { width: 26px; height: 26px; } } @media (max-width: 560px) { .showreel__thumb { grid-template-columns: 100px 1fr; } .showreel__quote p { font-size: clamp(1.375rem, 6vw, 2rem); } .showreel__stats { gap: var(--sp-4); } .showreel__stats dt { font-size: 1.375rem; } } @media (prefers-reduced-motion: reduce) { .showreel__slide, .showreel__caption, .showreel__thumb, .showreel__thumb-media img, .showreel__play, .showreel__link { transition: none; } .showreel__slide { filter: none; transform: none; } } /* ============================================================ 10 · NATIVE YT-STUDIO-SCREENSHOTS ============================================================ */ .section--screenshots { background: var(--ink-deep); color: var(--paper-on-ink); position: relative; } .section--screenshots .section__headline { color: var(--paper-on-ink); } .section--screenshots .section__sub { color: rgba(245, 243, 236, 0.65); max-width: 58ch; } .section--screenshots .pre { color: var(--brand-red); } .screenshots { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--sp-5); row-gap: clamp(2.5rem, 4vw, 3.75rem); max-width: 1280px; margin-inline: auto; perspective: 1400px; perspective-origin: 50% 40%; } .screenshot { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .screenshot.is-hidden { display: none; } .screenshots.is-expanded .screenshot.is-hidden { display: flex; } /* Per-phone stagger on reveal — 0.1s cascade */ .screenshots > .screenshot.reveal { transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); } .screenshots > .screenshot.reveal:nth-child(1) { transition-delay: 0ms; } .screenshots > .screenshot.reveal:nth-child(2) { transition-delay: 90ms; } .screenshots > .screenshot.reveal:nth-child(3) { transition-delay: 180ms; } .screenshots > .screenshot.reveal:nth-child(4) { transition-delay: 270ms; } .screenshots > .screenshot.reveal:nth-child(5) { transition-delay: 360ms; } .screenshots > .screenshot.reveal:nth-child(6) { transition-delay: 450ms; } .screenshots > .screenshot.reveal:nth-child(7) { transition-delay: 540ms; } .screenshot__frame { width: 100%; aspect-ratio: 9 / 18; border-radius: 26px; padding: 8px; background: linear-gradient(180deg, #222228 0%, #111114 100%); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 48px rgba(0, 0, 0, 0.5); overflow: hidden; position: relative; transform-style: preserve-3d; transform: rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translateZ(0); transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out); will-change: transform; } .screenshot:hover .screenshot__frame { box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 21, 28, 0.18); transition: transform 120ms linear, box-shadow 400ms var(--ease-out); } .screenshot__frame::after { content: ''; position: absolute; inset: 0; border-radius: 26px; background: radial-gradient(circle at var(--shineX, 50%) var(--shineY, 20%), rgba(255, 255, 255, 0.12), transparent 55%); opacity: 0; transition: opacity 300ms var(--ease-out); pointer-events: none; mix-blend-mode: screen; z-index: 3; } .screenshot:hover .screenshot__frame::after { opacity: 1; } .screenshot__frame::before { /* iPhone notch removed — was clipping the top of YT-Studio screenshots */ display: none; } .screenshot__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; } .screenshot figcaption { font-size: 0.875rem; color: rgba(245, 243, 236, 0.78); line-height: 1.4; padding-top: var(--sp-1); } .screenshot figcaption strong { display: block; color: var(--paper-on-ink); font-family: var(--font-mono); font-size: 1rem; font-weight: 500; margin-bottom: 2px; letter-spacing: 0.02em; } .screenshots__toggle { text-align: center; margin-top: var(--sp-12); } .section--screenshots .btn--ghost { color: var(--paper-on-ink); border-color: rgba(255, 255, 255, 0.25); } .section--screenshots .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); color: var(--paper-on-ink); } .section--screenshots .btn--ghost svg { transition: transform 300ms var(--ease-out); } @media (max-width: 1080px) { .screenshots { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .screenshots { grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2vw, 1.25rem); } } /* unter 480px bleiben es ZWEI Thumbnails nebeneinander (User-Wunsch) */ @media (max-width: 480px) { .screenshots { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; max-width: 100%; } } /* ============================================================ 11 · FAQ — Editorial Split (sticky intro + typographic Q-list) ============================================================ */ #faq { padding-block: clamp(4rem, 7vw, 7rem); } .faq-editorial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(3rem, 7vw, 6.5rem); max-width: 1240px; margin-inline: auto; align-items: start; } /* LEFT — sticky intro + contact card */ .faq-editorial__intro { position: sticky; top: 120px; display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); } .faq-editorial__intro-top { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); } .faq-editorial__intro .pre { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.55em; width: fit-content; padding: 0.42em 0.95em; border: 1px solid rgba(var(--red-rgb) / 0.28); background: rgba(var(--red-rgb) / 0.07); border-radius: 999px; color: var(--brand-red); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; margin: 0; } .faq-editorial__intro .pre::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-red); flex: 0 0 auto; } .faq-editorial__headline { font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-size: clamp(2.25rem, 4.8vw, 3.75rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); margin: 0; max-width: 14ch; text-wrap: balance; } .faq-editorial__headline em { font-style: italic; color: var(--brand-red); } .faq-editorial__sub { font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); line-height: 1.6; color: rgb(var(--ink-rgb) / 0.62); max-width: 38ch; margin: 0; } /* Contact Card — editorial dark accent */ .faq-editorial__contact { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "meta arrow" "headline arrow" "sub arrow"; gap: 0.4em clamp(1rem, 2vw, 1.5rem); padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem); background: var(--ink); color: var(--paper-on-ink); border-radius: var(--r-lg); text-decoration: none; overflow: hidden; transition: transform 240ms var(--ease-out), box-shadow 280ms var(--ease-out); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 22px 48px -24px rgba(0, 0, 0, 0.32); } .faq-editorial__contact::before { content: ''; position: absolute; top: -35%; right: -35%; width: 65%; aspect-ratio: 1; background: radial-gradient(circle, rgba(232, 21, 28, 0.2) 0%, transparent 65%); pointer-events: none; opacity: 0.55; transition: opacity 360ms var(--ease-out); } .faq-editorial__contact:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 34px 64px -24px rgba(232, 21, 28, 0.3), 0 34px 64px -30px rgba(0, 0, 0, 0.4); } .faq-editorial__contact:hover::before { opacity: 1; } .faq-editorial__contact:active { transform: translateY(-1px) scale(0.997); transition: transform 100ms var(--ease-out); } .faq-editorial__contact-meta { grid-area: meta; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-red); font-weight: 600; position: relative; z-index: 1; } .faq-editorial__contact-headline { grid-area: headline; font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 25; font-weight: 500; font-style: italic; font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.18; color: #FFFFFF; max-width: 18ch; text-wrap: balance; margin-top: 0.25em; position: relative; z-index: 2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .faq-editorial__contact-sub { grid-area: sub; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 243, 236, 0.55); margin-top: 0.3em; position: relative; z-index: 1; } .faq-editorial__contact-arrow { grid-area: arrow; align-self: end; justify-self: end; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); box-shadow: 0 8px 20px rgba(232, 21, 28, 0.38); position: relative; z-index: 1; flex-shrink: 0; } .faq-editorial__contact:hover .faq-editorial__contact-arrow { transform: translate(2px, -2px); box-shadow: 0 14px 28px rgba(232, 21, 28, 0.5); } /* RIGHT — typographic Q-list (wrapped in paper card) */ .faq-editorial__list { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 0 clamp(1.5rem, 2.5vw, 2.25rem); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 28px 56px -30px rgba(0, 0, 0, 0.18); } .faq-q { position: relative; padding: 0; border-top: 1px solid rgb(var(--ink-rgb) / 0.22); } .faq-q:first-of-type { border-top: 0; } .faq-q__head { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 2vw, 1.75rem); align-items: start; padding: clamp(1.5rem, 2.5vw, 2rem) 0; transition: color 280ms var(--ease-quick); } .faq-q__head::-webkit-details-marker { display: none; } .faq-q__head::marker { display: none; } .faq-q__meta { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.4em; padding-top: 0.55em; min-width: clamp(4.5rem, 7vw, 6rem); } .faq-q__num { font-family: var(--font-mono); font-size: 0.75rem; color: rgb(var(--ink-rgb) / 0.42); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; transition: color 260ms var(--ease-out); } .faq-q__cat { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 500; transition: color 260ms var(--ease-out); } .faq-q[open] .faq-q__num, .faq-q[open] .faq-q__cat, .faq-q:hover .faq-q__cat { color: var(--brand-red); } .faq-q__label { font-family: var(--font-display); font-variation-settings: 'opsz' 144, 'SOFT' 100; font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.022em; color: var(--ink); transition: color 260ms var(--ease-quick); text-wrap: balance; } .faq-q:hover .faq-q__label { color: rgb(var(--ink-rgb) / 0.65); } .faq-q[open] .faq-q__label { font-style: italic; color: var(--ink); } .faq-q__plus { position: relative; width: 24px; height: 24px; margin-top: 0.6em; flex-shrink: 0; } .faq-q__plus span { position: absolute; background: var(--ink); transition: transform 340ms var(--ease-out), background-color 240ms var(--ease-quick); } .faq-q__plus span:first-child { left: 0; right: 0; top: 50%; height: 1.75px; margin-top: -0.875px; border-radius: 1px; } .faq-q__plus span:last-child { top: 0; bottom: 0; left: 50%; width: 1.75px; margin-left: -0.875px; border-radius: 1px; } .faq-q[open] .faq-q__plus span:first-child { transform: rotate(90deg); background: var(--brand-red); } .faq-q[open] .faq-q__plus span:last-child { transform: rotate(90deg); opacity: 0; background: var(--brand-red); } .faq-q:hover .faq-q__plus span { background: var(--brand-red); } /* Answer — smooth grid-rows expand */ .faq-q__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease-out); } .faq-q[open] .faq-q__body { grid-template-rows: 1fr; } .faq-q__body-inner { overflow: hidden; min-height: 0; } .faq-q__body-inner p { margin: 0; padding: 0 0 clamp(1.5rem, 2.5vw, 2rem) calc(clamp(4.5rem, 7vw, 6rem) + clamp(1rem, 2vw, 1.75rem)); font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.7; color: rgb(var(--ink-rgb) / 0.74); max-width: 58ch; font-style: normal; } /* Stagger reveal */ .faq-editorial__list.reveal .faq-q { opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); } .faq-editorial__list.reveal .faq-q:nth-child(1) { transition-delay: 0ms; } .faq-editorial__list.reveal .faq-q:nth-child(2) { transition-delay: 60ms; } .faq-editorial__list.reveal .faq-q:nth-child(3) { transition-delay: 120ms; } .faq-editorial__list.reveal .faq-q:nth-child(4) { transition-delay: 180ms; } .faq-editorial__list.reveal .faq-q:nth-child(5) { transition-delay: 240ms; } .faq-editorial__list.reveal .faq-q:nth-child(6) { transition-delay: 300ms; } .faq-editorial__list.reveal .faq-q:nth-child(7) { transition-delay: 360ms; } .faq-editorial__list.reveal .faq-q:nth-child(8) { transition-delay: 420ms; } .faq-editorial__list.reveal.is-visible .faq-q { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 960px) { .faq-editorial { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); } .faq-editorial__intro { position: static; } .faq-q__head { grid-template-columns: auto 1fr auto; gap: var(--sp-4); } .faq-q__meta { min-width: 3rem; } .faq-q__label { font-size: clamp(1.125rem, 4vw, 1.5rem); } .faq-q__body-inner p { padding-left: calc(3rem + var(--sp-4)); } } @media (max-width: 560px) { .faq-q__meta { flex-direction: row; align-items: center; gap: 0.6em; padding-top: 0.45em; } .faq-q__body-inner p { padding-left: 0; } .faq-editorial__contact { grid-template-columns: 1fr; grid-template-areas: "meta" "headline" "sub" "arrow"; justify-items: start; } .faq-editorial__contact-arrow { justify-self: start; margin-top: var(--sp-3); } } @media (prefers-reduced-motion: reduce) { .faq-q, .faq-q__body, .faq-q__plus span, .faq-editorial__contact, .faq-editorial__contact-arrow { transition: none; } } /* ============================================================ 12 · FINAL CTA — Paddy-Galloway cinematic ============================================================ */ .section--cta-final { background: var(--ink-deep); color: var(--paper-on-ink); padding-block: clamp(4.5rem, 9vw, 9rem); position: relative; overflow: hidden; } /* Subtle grid pattern */ .section--cta-final::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%); pointer-events: none; z-index: 0; } /* Red glow top-right */ .section--cta-final::after { content: ''; position: absolute; top: -25%; right: -15%; width: 55%; aspect-ratio: 1; background: radial-gradient(circle, rgba(232, 21, 28, 0.16) 0%, transparent 62%); pointer-events: none; z-index: 0; } .section--cta-final > .container { position: relative; z-index: 1; } .cta-final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.25rem, 2vw, 1.75rem); max-width: 1280px; margin-inline: auto; } .cta-final__eyebrow { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.5em 1.05em; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-red); font-weight: 600; background: rgba(232, 21, 28, 0.10); border: 1px solid rgba(232, 21, 28, 0.38); border-radius: 999px; margin: 0 0 var(--sp-2); } .cta-final__eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 0 4px rgba(232, 21, 28, 0.20); flex: 0 0 auto; } .cta-final__eyebrow::after { content: none; } .cta-final__headline { font-family: var(--font-display); font-weight: 400; /* Wider — runs in 2 lines on desktop */ font-size: clamp(2.5rem, 4.6vw + 0.5rem, 5rem); line-height: 1.06; letter-spacing: -0.022em; color: #FFFFFF; margin: 0; max-width: 1100px; text-wrap: balance; } .cta-final__highlight { color: var(--brand-red); position: relative; font-style: italic; padding: 0 0.04em; } .cta-final__highlight::after { content: ''; position: absolute; left: 0.02em; right: 0.02em; bottom: 0.04em; height: 0.09em; background: var(--brand-red); border-radius: 2px; box-shadow: 0 0 16px rgba(232, 21, 28, 0.5); } .cta-final__sub { font-size: clamp(1rem, 1.35vw, 1.1875rem); line-height: 1.6; color: rgba(245, 243, 236, 0.72); max-width: 64ch; margin: 0; } .cta-final__sub strong { color: var(--paper-on-ink); font-weight: 600; } .cta-final__button { display: inline-flex; align-items: center; gap: 0.65em; padding: 1.05em 2.4em; background: var(--brand-red); color: #FFFFFF; border-radius: var(--r-lg); font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.005em; text-decoration: none; box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset, 0 2px 4px rgba(0, 0, 0, 0.2), 0 16px 40px -12px rgba(232, 21, 28, 0.55); transition: transform 220ms var(--ease-out), background-color 200ms var(--ease-quick), box-shadow 260ms var(--ease-out); margin-top: clamp(0.75rem, 1.5vw, 1.25rem); position: relative; overflow: hidden; } .cta-final__button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%); pointer-events: none; } .cta-final__button:hover { transform: translateY(-2px); background: #C10F16; box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset, 0 2px 4px rgba(0, 0, 0, 0.25), 0 24px 56px -14px rgba(232, 21, 28, 0.7); } .cta-final__button:active { transform: translateY(-1px) scale(0.985); transition: transform 100ms var(--ease-out); } .cta-final__button svg { transition: transform 260ms var(--ease-out); position: relative; z-index: 1; } .cta-final__button span { position: relative; z-index: 1; } .cta-final__button:hover svg { transform: translateX(5px); } .cta-final__alt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 243, 236, 0.45); margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 0; } .cta-final__alt a { color: rgba(245, 243, 236, 0.75); text-decoration: none; border-bottom: 1px solid rgba(245, 243, 236, 0.28); padding-bottom: 2px; transition: color 200ms var(--ease-quick), border-color 200ms var(--ease-quick); margin-left: 0.35em; } .cta-final__alt a:hover { color: var(--brand-red); border-color: var(--brand-red); } /* Stagger reveal */ .cta-final.reveal > * { opacity: 0; transform: translateY(12px); transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out); } .cta-final.reveal > :nth-child(1) { transition-delay: 0ms; } .cta-final.reveal > :nth-child(2) { transition-delay: 100ms; } .cta-final.reveal > :nth-child(3) { transition-delay: 200ms; } .cta-final.reveal > :nth-child(4) { transition-delay: 300ms; } .cta-final.reveal > :nth-child(5) { transition-delay: 400ms; } .cta-final.reveal.is-visible > * { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 640px) { .cta-final__headline { font-size: clamp(1.5rem, 6vw, 2.25rem); } .cta-final__button { padding: 0.95em 1.75em; font-size: 1rem; } .cta-final__eyebrow::before, .cta-final__eyebrow::after { width: 18px; } } @media (prefers-reduced-motion: reduce) { .cta-final.reveal > *, .cta-final__button, .cta-final__button svg { transition: none; } } /* Cards container. Cards stacked in same grid cell, natural height. */ .method-flow--pin{ position: relative; display: grid; grid-template: auto / 1fr; align-items: start; justify-items: stretch; margin: 0; } .method-flow--pin .method-connector{ display: none; } /* Each card: same cell (stacked), natural height, JS drives transform per scroll-tick. No CSS transitions — transforms are written directly from the scroll-progress handler so motion is 1:1 with the user's scroll (the "sticky feel"). */ .method-step--pin{ grid-column: 1 / -1; grid-row: 1; align-self: start; /* natural height — not stretched */ width: 100%; padding: clamp(24px, 2.6vw, 40px); border: 1px solid rgba(0,0,0,0.08); border-radius: 24px; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 32px 64px -48px rgba(0,0,0,0.18); display: flex; align-items: center; transition: none; will-change: transform, opacity, filter; transform: translateY(0); opacity: 1; } /* Fallback (before JS runs, or on non-JS): cards 2+3 hidden until pin scrolls them in. Wrapped in min-width: 961px so the mobile-stack (no pin) shows all cards normally. */ @media (min-width: 961px) { .method-step--pin[data-step="2"], .method-step--pin[data-step="3"]{ transform: translateY(100vh); opacity: 0; } } /* ---- Tablet / mobile: no pin, no stacking, natural flow ---- */ @media (max-width: 960px){ .method-scroller{ height: auto; } .section--method-pinned{ position: relative; top: auto; height: auto; min-height: 0; overflow: visible; padding-block: clamp(48px, 10vh, 96px); } .section--method-pinned .section__header{ margin-bottom: var(--sp-12); } .method-flow--pin{ display: flex; flex-direction: column; gap: 24px; flex: none; } .method-step--pin{ position: relative; inset: auto; opacity: 1; transform: none; filter: none; visibility: visible; pointer-events: auto; padding: 24px; flex-direction: column; align-items: stretch; gap: var(--sp-6); } .method-step--pin .method-step__content, .method-step--pin .method-step__visual { width: 100%; max-width: 100%; margin: 0; } .method-step--pin .method-step__visual { order: 2; } .method-step--pin .method-step__content { order: 1; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero__headline em::after { transform: scaleX(1); animation: none; } .hero__pre, .hero__headline, .hero__sub, .hero__bullets, .hero__cta, .hero__video-wrap, .reveal { opacity: 1; transform: none; } /* Method v5 pin: plain flow, no pin, no stacking */ .method-scroller{ height: auto; } .section--method-pinned{ position: relative; top: auto; height: auto; min-height: 0; overflow: visible; } .method-flow--pin{ display: flex; flex-direction: column; gap: 24px; } .method-step--pin{ position: relative; inset: auto; opacity: 1; transform: none !important; filter: none !important; visibility: visible; pointer-events: auto; } } /* ============================================================ MOBILE-PASS v25 — Polish-Pass: Hero, Burger, Showreel, FAQ ============================================================ */ @media (max-width: 768px) { /* HERO — Eyebrow ("Done-for-you YouTube für Fachexperten") deutlich kleiner */ .hero__pre { font-size: 0.625rem; letter-spacing: 0.18em; line-height: 1.45; } /* HERO — Tagline kleiner, Headline ist die Hauptattraktion */ .hero__sub { font-size: clamp(0.9rem, 3.8vw, 1.0rem); line-height: 1.55; } /* HERO — Bullets gleiche Farbe + Größe wie Sub-Headline */ .hero__bullets li { font-size: clamp(0.9rem, 3.8vw, 1.0rem); line-height: 1.55; color: var(--mute); } /* HERO — Video-Hint auf Mobile komplett ausblenden (war "lost") */ .hero__video-hint { display: none; } /* HERO — Bullets zentriert (auch mehrzeilig clean), Checkmark vertikal aligned zur ersten Zeile */ .hero__bullets { flex-direction: column; align-items: center; justify-content: center; text-align: left; gap: 0.75rem; max-width: 360px; margin-inline: auto; } .hero__bullets li { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 0.625rem; width: 100%; max-width: 100%; } .hero__bullets li > span { min-width: 0; line-height: 1.5; } .hero__bullets svg { flex: 0 0 auto; margin-top: 0.25em; width: 17px; height: 17px; } /* HERO — padding-top kleiner */ .hero { padding-top: clamp(96px, 12vh, 130px); } /* HERO Video — kein scroll-scale auf mobile (JS deaktiviert), Padding unten kleiner */ .hero__video-wrap { padding-bottom: clamp(20px, 4vw, 36px); } /* HERO Video — Caption ("Instagram oder YouTube...") kleiner */ .hero__video-caption { font-size: clamp(0.75rem, 3.4vw, 0.875rem); line-height: 1.35; } /* HERO Video — Hint klar unter dem Video, eigener Block */ .hero__video-hint { margin-top: clamp(0.875rem, 2.5vw, 1.25rem); font-size: 0.75rem; line-height: 1.4; padding-inline: 0.5rem; } /* NAV-BURGER MENU — CTA in EINER Reihe, weiße Schrift, nicht abgeschnitten */ .nav__mobile a.nav__mobile-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: nowrap; white-space: nowrap; width: 100%; padding: 1.125rem 1rem; font-size: 0.9375rem; line-height: 1.2; color: #ffffff; min-height: 52px; } .nav__mobile a.nav__mobile-cta span { display: inline-block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #ffffff; line-height: 1.2; } .nav__mobile a.nav__mobile-cta svg { flex: 0 0 auto; width: 16px; height: 16px; color: #ffffff; } /* SHOWREEL Thumbs — 2-Spalten statt 1-Spalt-Stapel auf Mobile */ .showreel__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; } .showreel__thumb { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 0.5rem; gap: 0.5rem; } .showreel__thumb-media { aspect-ratio: 16 / 9; width: 100%; height: auto; } .showreel__thumb-media img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; } .showreel__thumb-body { padding: 0; gap: 0.25rem; } .showreel__thumb-name { font-size: 0.875rem; line-height: 1.25; } .showreel__thumb-meta { font-size: 0.6875rem; } .showreel__thumb-num { font-size: 0.6875rem; } /* 3. Thumb spannt beide Spalten */ .showreel__thumb:nth-child(3) { grid-column: 1 / -1; } /* FAQ — cleaner padding + smaller label/num auf Mobile */ .faq-q__head { padding: 1.125rem 0; gap: 0.75rem; } .faq-q__meta { gap: 0.5rem; } .faq-q__num { font-size: 0.75rem; } .faq-q__label { font-size: clamp(0.95rem, 4vw, 1.0625rem); line-height: 1.4; } .faq-q__plus { flex: 0 0 auto; width: 18px; height: 18px; } .faq-q__body-inner { padding-bottom: 1rem; font-size: 0.9375rem; line-height: 1.55; } } @media (max-width: 480px) { /* HERO Video Meta-Tags (TL/TR/BR) etwas kleiner */ .hero__video-meta { font-size: 0.625rem; padding: 0.25rem 0.5rem; } } /* ========================================================================= COPYSTUDIO.MARKETING — Brand Overrides (appended after Marcel boilerplate) ========================================================================= */ /* Reset body default to bg-0 explicitly (override Marcel's var(--paper) chain) */ body { background: var(--bg-0); color: var(--ink); } /* Display em (accent words) → Playfair italic Coral instead of Marcel's --ink */ .display em, .headline em, .section__headline em, .hero__headline em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } /* Universal accent-italic utility */ .accent-italic { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } /* Section-numeral (kemnitzer-Inspiration: massive editorial section markers) */ .section-numeral { position: absolute; top: clamp(2rem, 5vw, 4rem); left: clamp(1.5rem, 4vw, 3rem); font-family: var(--font-display); font-size: var(--fs-numeral); font-weight: 800; line-height: 0.85; color: var(--ink-deco); letter-spacing: -0.04em; pointer-events: none; user-select: none; z-index: 1; } @media (max-width: 768px) { .section-numeral { font-size: clamp(2.5rem, 12vw, 4rem); top: 1.5rem; left: 1rem; } } /* Section base — make all sections position: relative so section-numeral can absolute-position */ .section { position: relative; } /* Pre-pill on dark bg → semi-transparent white border + bg */ .pre { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: var(--ink-mute); } .pre--red { background: rgba(217, 80, 48, 0.08); border-color: rgba(217, 80, 48, 0.35); color: var(--accent); } /* Buttons — Marcel .btn already exists, override to match CopyStudio CTA spec */ .btn, .cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1.125rem 1.75rem; border-radius: 6px; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: all 320ms cubic-bezier(0.23, 1, 0.32, 1); border: 0; cursor: pointer; } .btn--primary, /* FINAL CHECK — all words in headlines must render white (no accent-coral italic words). Override any earlier em styling inside headlines. */ .section__headline em, .hero__headline em, .cta-final__headline em, .about-block__display em, .benefits-bento__headline em, .leist-tabs__headline em, .cs-test__header .section__headline em, .cs-faq__header .section__headline em, .faq-editorial__headline em { color: #FFFFFF !important; font-family: inherit !important; font-style: normal !important; text-decoration: none !important; background: none !important; -webkit-text-fill-color: #FFFFFF !important; } .cta--primary { position: relative; overflow: hidden; isolation: isolate; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; background: linear-gradient(180deg, #DC5836 0%, #C84522 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 0 0 1px rgba(255, 180, 150, 0.18) inset, 0 4px 14px rgba(217, 80, 48, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 240ms cubic-bezier(0.23, 1, 0.32, 1), filter 220ms cubic-bezier(0.23, 1, 0.32, 1); } .btn--primary::before, .cta--primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 70%); transform: translateX(-110%); transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; } .btn--primary:hover, .cta--primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 0 0 1px rgba(255, 180, 150, 0.28) inset, 0 8px 24px rgba(217, 80, 48, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3); } .btn--primary:hover::before, .cta--primary:hover::before { transform: translateX(110%); } .btn--primary:active, .cta--primary:active { transform: scale(0.98); transition-duration: 120ms; } .btn--ghost, .cta--ghost { background: transparent; color: var(--ink-body); border: 1px solid rgba(255, 255, 255, 0.15); } .btn--ghost:hover, .cta--ghost:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); } .cta--xl { padding: 1.5rem 2.5rem; font-size: 1rem; } /* Card backgrounds → bg-1 with hairline */ .card, .bento__box, .problem-card, .benefit-card, .how-step, .method-step { background: var(--bg-1); border-top: 1px solid rgba(255, 255, 255, 0.06); } /* Selection color */ ::selection { background: var(--accent); color: #fff; } /* ========================================================================= COPYSTUDIO — NAVBAR (cs-nav) ========================================================================= */ /* ------- CopyStudio Nav — Squared Editorial Bar (dark) ------- Differentiator vs. Marcel's full-round pill: - 14px corner radius (squared editorial silhouette, not pill) - left status-dot accent + monoscopic accent rule on left edge - underline-grow indicator on hover (no sliding behind-pill) - rectangular CTA (10px radius) with edge-glow, not full-round - subtle scan-line top hairline that lights up on scroll */ .cs-nav { position: fixed; top: clamp(12px, 1.4vw, 22px); left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding-inline: clamp(12px, 3vw, 32px); pointer-events: none; } .cs-nav__pill { pointer-events: auto; position: relative; display: flex; align-items: center; gap: clamp(6px, 0.6vw, 12px); /* Default = full content width (matches container exactly: 1280px on desktop). Scrolled state contracts smoothly to original compact pill width. */ width: 100%; max-width: var(--container, 1280px); padding: 8px 8px 8px 18px; background: rgba(8, 8, 8, 0.66); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(217, 80, 48, 0) inset, 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.6); transition: box-shadow 360ms cubic-bezier(0.23, 1, 0.32, 1), transform 360ms cubic-bezier(0.23, 1, 0.32, 1), border-color 360ms cubic-bezier(0.23, 1, 0.32, 1), background 360ms cubic-bezier(0.23, 1, 0.32, 1), max-width 360ms cubic-bezier(0.23, 1, 0.32, 1); } /* Editorial inner layout — Brand + Divider + Links flow tight from LEFT. CTA is pushed to the RIGHT edge of the pill via `margin-left: auto`. Burger sits last (mobile only). With 7 links the auto-gap to CTA is small. */ .cs-nav__pill .cs-nav__brand { flex-shrink: 0; } .cs-nav__pill .cs-nav__divider { flex-shrink: 0; } .cs-nav__pill .cs-nav__links { flex-shrink: 0; } .cs-nav__pill .cs-nav__cta { flex-shrink: 0; margin-left: auto; } .cs-nav__pill .cs-nav__burger { flex-shrink: 0; } /* When scrolled — pill contracts to exactly fit all content tight. With 7 links + brand + divider + CTA, ~1100px fits cleanly without overflow. */ .cs-nav.is-scrolled .cs-nav__pill { max-width: 1100px; } /* coral edge-rule on the left — small vertical accent strip, signature mark */ .cs-nav__pill::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 18px; background: var(--accent, #D95030); border-radius: 0 2px 2px 0; box-shadow: 0 0 12px rgba(217, 80, 48, 0.55); transition: height 320ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 320ms cubic-bezier(0.23, 1, 0.32, 1); } /* top scan-line — lights up when scrolled */ .cs-nav__pill::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 1.5px, rgba(255, 255, 255, 0) 100%); opacity: 0.5; transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav.is-scrolled .cs-nav__pill { background: rgba(6, 6, 6, 0.84); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(217, 80, 48, 0.10) inset, 0 2px 6px rgba(0, 0, 0, 0.55), 0 22px 64px rgba(0, 0, 0, 0.7); transform: translateY(-1px); } .cs-nav.is-scrolled .cs-nav__pill::before { height: 26px; box-shadow: 0 0 18px rgba(217, 80, 48, 0.85); } .cs-nav.is-scrolled .cs-nav__pill::after { opacity: 0.9; } /* Brand — real CopyStudio logo */ .cs-nav__brand { display: inline-flex; align-items: center; padding: 6px 14px 6px 14px; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav__brand:hover { background: rgba(255, 255, 255, 0.035); } .cs-nav__brand:active { transform: scale(0.97); } .cs-nav__logo-svg { display: block; height: 36px; width: auto; filter: drop-shadow(0 2px 10px rgba(217, 80, 48, 0.18)); transition: filter 280ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav__brand:hover .cs-nav__logo-svg { filter: drop-shadow(0 3px 16px rgba(217, 80, 48, 0.4)); } .cs-nav__divider { width: 1px; height: 22px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 100%); margin-inline: clamp(4px, 0.6vw, 10px); } /* Links — underline-grow indicator (NOT sliding pill) */ .cs-nav__links { position: relative; display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .cs-nav__link { position: relative; display: inline-flex; align-items: center; padding: 10px 14px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; color: rgba(255, 255, 255, 0.62); border-radius: 6px; text-decoration: none; white-space: nowrap; transition: color 220ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav__link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1.5px; background: var(--accent, #D95030); transform: scaleX(0); transform-origin: left center; border-radius: 2px; transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav__link:hover { color: #FFFFFF; } .cs-nav__link:hover::after { transform: scaleX(1); } .cs-nav__link[aria-current="true"] { color: #FFFFFF; } .cs-nav__link[aria-current="true"]::after { transform: scaleX(1); } /* sliding indicator no longer used — keep hidden so JS doesn't show stray pill */ .cs-nav__indicator { display: none !important; } /* Primary CTA — RECTANGULAR, not pill (Marcel uses pill) */ .cs-nav__cta { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px 11px 18px; margin-left: 6px; background: linear-gradient(180deg, #DC5836 0%, #C84522 100%); color: #FFFFFF !important; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.005em; border-radius: 8px; /* squared, not 999px */ text-decoration: none; white-space: nowrap; text-transform: none; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 0 0 1px rgba(255, 180, 150, 0.18) inset, 0 4px 14px rgba(217, 80, 48, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 240ms cubic-bezier(0.23, 1, 0.32, 1), filter 220ms cubic-bezier(0.23, 1, 0.32, 1); } /* sweep highlight — appears on hover, sweeps across */ .cs-nav__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 70%); transform: translateX(-110%); transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1); z-index: -1; } .cs-nav__cta:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 0 0 1px rgba(255, 180, 150, 0.28) inset, 0 8px 24px rgba(217, 80, 48, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3); } .cs-nav__cta:hover::before { transform: translateX(110%); } .cs-nav__cta:active { transform: scale(0.97); } .cs-nav__cta svg { width: 14px; height: 14px; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav__cta:hover svg { transform: translateX(2px); } /* Burger */ .cs-nav__burger { display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; padding: 0; position: relative; border-radius: 999px; transition: background 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav__burger:hover { background: rgba(255, 255, 255, 0.06); } .cs-nav__burger:active { transform: scale(0.92); } .cs-nav__burger span { position: absolute; left: 50%; width: 16px; height: 1.5px; background: rgba(255, 255, 255, 0.92); border-radius: 2px; transform: translateX(-50%); transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1), opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), top 240ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav__burger span:nth-child(1) { top: 14px; } .cs-nav__burger span:nth-child(2) { top: 19px; } .cs-nav__burger span:nth-child(3) { top: 24px; } .cs-nav__burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); } .cs-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .cs-nav__burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); } /* Mobile dropdown panel — anchored under the pill */ .cs-nav__mobile { pointer-events: auto; position: absolute; top: calc(100% + 10px); left: 50%; width: min(92vw, 420px); transform: translateX(-50%) scale(0.96); transform-origin: top center; background: rgba(10, 10, 10, 0.92); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; padding: 10px; opacity: 0; visibility: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 260ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 220ms; } .cs-nav__mobile.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); transition-delay: 0s; } .cs-nav__mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .cs-nav__mobile a { display: block; padding: 12px 14px; font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); border-radius: 12px; text-decoration: none; transition: background 180ms cubic-bezier(0.23, 1, 0.32, 1), color 180ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-nav__mobile a:hover { background: rgba(255, 255, 255, 0.05); color: #FFF; } .cs-nav__mobile-cta { margin-top: 8px; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 14px 18px !important; background: var(--accent, #D95030); color: #FFFFFF !important; border-radius: 999px; font-weight: 600; text-transform: none; } .cs-nav__mobile-cta svg { width: 16px; height: 16px; } /* Responsive — collapse middle nav into burger */ @media (max-width: 900px) { .cs-nav__links, .cs-nav__indicator, .cs-nav__divider, .cs-nav__cta { display: none; } .cs-nav__burger { display: inline-flex; margin-left: auto; } .cs-nav__pill { padding: 6px 6px 6px 8px; gap: 4px; } .cs-nav__logo-svg { height: 30px; } } /* ========================================================================= COPYSTUDIO — HERO ========================================================================= */ .section--hero { padding-top: clamp(8rem, 16vh, 12rem); padding-bottom: clamp(5rem, 10vw, 8rem); overflow: hidden; text-align: center; } .hero__inner { position: relative; z-index: 2; max-width: 920px; } .hero__pre { font-size: var(--fs-pre); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-mute); margin: 0 0 1.5rem; font-weight: 500; } .hero__headline { font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin: 0 auto 1rem; max-width: 22ch; } .hero__sub-line { font-size: var(--fs-small); color: var(--ink-mute); font-style: italic; margin: 0 0 1.75rem; } .hero__sub { font-size: var(--fs-body-l); line-height: 1.6; color: var(--ink-body); max-width: 60ch; margin: 0 auto 2.5rem; } .hero__bullets { list-style: none; padding: 0; margin: 0 auto 3rem; max-width: 600px; display: flex; flex-direction: column; gap: 0.875rem; } .hero__bullets li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; text-align: left; color: var(--ink-body); font-size: var(--fs-body); line-height: 1.55; } .hero__arrow { color: var(--accent); font-weight: 700; font-family: var(--font-mono); margin-top: 0.05em; } .hero__cta-row { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .hero__glow { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: min(900px, 90vw); height: 600px; background: var(--grad-red-glow); pointer-events: none; z-index: 1; opacity: 0.55; } @media (max-width: 768px) { .hero__pre { font-size: 0.625rem; letter-spacing: 0.18em; } .hero__sub-line { font-size: 0.75rem; } .hero__sub { font-size: clamp(0.95rem, 3.8vw, 1.0rem); line-height: 1.55; } .hero__bullets { max-width: 360px; } .hero__cta-row { flex-direction: column; } .hero__cta-row .cta { width: 100%; justify-content: center; } } /* ========================================================================= COPYSTUDIO — SECTION HEADERS (shared across sections 3-12) ========================================================================= */ .section__header { text-align: center; max-width: 880px; margin: 0 auto 4rem; position: relative; z-index: 2; } .section__pre { margin: 0 0 1.25rem; } .section__headline { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 auto 1.25rem; max-width: 24ch; } .section__sub { font-size: var(--fs-body-l); line-height: 1.6; color: var(--ink-body); max-width: 56ch; margin: 0 auto; } .section__cta-row { display: flex; justify-content: center; margin-top: 3rem; } .placeholder-note { text-align: center; padding: 2rem; background: var(--bg-1); border: 1px dashed rgba(255, 255, 255, 0.1); color: var(--ink-mute); font-family: var(--font-mono); font-size: 0.875rem; border-radius: 8px; } /* ========================================================================= COPYSTUDIO — LOGOS Section ========================================================================= */ /* SECTION 02 — Logo Marquee Continuous horizontal scroll. Track is duplicated (set 1 + set 2 clone) and translateX(-50%) over a fixed duration → seamless infinite loop. Edges fade to bg via mask-image. Logos are monochrome white at low opacity, full on hover. */ .section--logos { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: var(--hairline); border-bottom: var(--hairline); overflow: hidden; background: var(--bg-0); } .logos-marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } .logos-marquee__track { display: flex; flex-wrap: nowrap; width: max-content; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); animation: logos-marquee-scroll 38s linear infinite; will-change: transform; } .logos-marquee:hover .logos-marquee__track { animation-play-state: paused; } .logos-marquee__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: clamp(120px, 14vw, 200px); padding: 0 0.5rem; } .logos-marquee__item img { max-height: clamp(22px, 2.2vw, 30px); max-width: clamp(110px, 14vw, 170px); width: auto; height: auto; object-fit: contain; display: block; filter: brightness(0) invert(1) opacity(0.62); transition: filter 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .logos-marquee__item:hover img { filter: brightness(0) invert(1) opacity(1); transform: scale(1.04); } @keyframes logos-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (max-width: 768px) { .logos-marquee__track { gap: clamp(1.75rem, 6vw, 2.5rem); animation-duration: 28s; } .logos-marquee__item { min-width: 110px; } .logos-marquee__item img { max-height: 22px; max-width: 110px; } } @media (prefers-reduced-motion: reduce) { .logos-marquee__track { animation: none; } .logos-marquee { overflow-x: auto; scrollbar-width: none; } .logos-marquee::-webkit-scrollbar { display: none; } } /* ========================================================================= COPYSTUDIO — CTA-FINAL (Section 13) ========================================================================= */ .section--cta-final { position: relative; background: var(--bg-0); padding-block: clamp(6rem, 12vw, 9rem); overflow: hidden; text-align: center; } .cta-final__inner { position: relative; z-index: 2; } .cta-final__tagline { font-size: var(--fs-pre); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); margin: 0 0 2rem; font-weight: 500; } .cta-final__headline { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; color: rgba(255, 255, 255, 0.78); margin: 0 auto 2rem; max-width: 22ch; } .cta-final__headline strong { font-weight: 800; color: var(--ink); } .cta-final__sub { font-size: var(--fs-body-l); line-height: 1.6; color: var(--ink-body); max-width: 60ch; margin: 0 auto 3rem; font-weight: 400; } .cta-final__sub strong { font-weight: 700; color: var(--ink); } .cta-final__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1400px, 100vw); height: 800px; background: var(--grad-red-glow); opacity: 0.45; pointer-events: none; z-index: 1; } /* ========================================================================= COPYSTUDIO — FOOTER (cs-footer) ========================================================================= */ .cs-footer { position: relative; background: var(--bg-0); padding-block: 4rem 2rem; border-top: var(--hairline); overflow: hidden; } .cs-footer__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 4rem; padding-bottom: 3rem; border-bottom: var(--hairline); margin-bottom: 1.5rem; position: relative; z-index: 2; } .cs-footer__wordmark img { height: clamp(48px, 8vw, 72px); width: auto; display: block; } .cs-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .cs-footer__col h4 { font-size: var(--fs-pre); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-mute); margin: 0 0 1rem; font-weight: 500; } .cs-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .cs-footer__col a { color: var(--ink-body); text-decoration: none; font-size: 0.9375rem; transition: color 320ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-footer__col a:hover { color: var(--ink); } .cs-footer__bottom { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; gap: 1rem; flex-wrap: wrap; } .cs-footer__copyright, .cs-footer__credit, .cs-footer__credit a, .cs-footer__credit span { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); font-weight: 500; margin: 0; } .cs-footer__credit a { text-decoration: none; transition: color 320ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-footer__credit a:hover { color: var(--ink-mute); } .cs-footer__glow { position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); width: min(1200px, 100vw); height: 600px; background: var(--grad-red-glow); opacity: 0.35; pointer-events: none; z-index: 1; } @media (max-width: 768px) { .cs-footer__top { grid-template-columns: 1fr; gap: 2.5rem; } .cs-footer__cols { grid-template-columns: repeat(2, 1fr); } .cs-footer__bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================================= COPYSTUDIO — Critical Overrides (Phase 1 fixes after first screenshot) ========================================================================= */ /* Marcel hero__headline em had underline — CopyStudio uses pure italic Coral */ .hero__headline em, .section__headline em, .cta-final__headline em, .hero__headline .accent-italic, .section__headline .accent-italic, .cta-final__headline .accent-italic { text-decoration: none; text-decoration-color: transparent; } /* Old .logo-item rules kept as no-op (markup migrated to .logos-marquee__item). No styles needed here anymore — see SECTION 02 — Logo Marquee block above. */ /* ========================================================================= COPYSTUDIO — SECTION 03 PROBLEM (3 Editorial Cards mit SVG-Anims) ========================================================================= */ .problem__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 5rem; position: relative; z-index: 2; } .problem-card { padding: 2.5rem 2rem; background: var(--bg-1); border-top: 1px solid rgba(217, 80, 48, 0.35); display: flex; flex-direction: column; position: relative; transition: background 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .problem-card:hover { background: #0E2030; transform: translateY(-4px); } .problem-card__svg { width: 100%; aspect-ratio: 1 / 1; max-width: 180px; margin-bottom: 1.75rem; display: flex; align-items: center; justify-content: center; } .problem-card__svg svg { width: 100%; height: 100%; } .problem-card__q { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--accent); margin: 0 0 1rem; line-height: 1.3; } .problem-card__body { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-body); margin: 0; } .problem__pull-quote { text-align: center; max-width: 760px; margin: 0 auto 3rem; font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); line-height: 1.5; position: relative; z-index: 2; padding: 0 var(--container-px); } .problem__pull-quote em { /* Already covered by .accent-italic / hero__headline em rule, but explicit for clarity */ font-family: var(--font-accent); color: var(--accent); font-weight: 700; font-style: italic; } @media (max-width: 900px) { .problem__grid { grid-template-columns: 1fr; gap: 1rem; } .problem-card { padding: 2rem 1.5rem; } .problem-card__svg { max-width: 140px; margin-bottom: 1.25rem; } } /* ========================================================================= SVG-Anim Helpers — used by Section 03 Problem GSAP-triggered: ScrollTrigger on .problem-card .is-visible adds anim classes ========================================================================= */ /* Stagnation: line draws on, end-dot pulses */ @keyframes cs-anim-stag-line { to { stroke-dashoffset: 0; } } @keyframes cs-anim-stag-dot { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1.6); fill: rgba(217,80,48,0); } } .problem-card.is-visible .anim-stag-line { animation: cs-anim-stag-line 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .problem-card.is-visible .anim-stag-dot { animation: cs-anim-stag-dot 1.6s cubic-bezier(0.23, 1, 0.32, 1) 0.9s infinite; transform-origin: 180px 90px; } /* Vergleichbarkeit: bars rise + the standout bar pulses */ @keyframes cs-anim-verg-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes cs-anim-verg-arrow { 0%, 100% { opacity: 0; transform: translateY(-4px); } 50% { opacity: 1; transform: translateY(0); } } .anim-verg-bar { transform-origin: bottom; transform: scaleY(0); } .problem-card.is-visible .anim-verg-bar { animation: cs-anim-verg-bar 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .problem-card.is-visible .anim-verg-bar:nth-of-type(2) { animation-delay: 0.08s; } .problem-card.is-visible .anim-verg-bar:nth-of-type(3) { animation-delay: 0.16s; } .problem-card.is-visible .anim-verg-bar:nth-of-type(4) { animation-delay: 0.24s; } .problem-card.is-visible .anim-verg-bar:nth-of-type(5) { animation-delay: 0.32s; } .problem-card.is-visible .anim-verg-bar--hero { animation-delay: 0.45s; } .problem-card.is-visible .anim-verg-arrow { animation: cs-anim-verg-arrow 1.4s cubic-bezier(0.23, 1, 0.32, 1) 1s infinite; } /* Fragmentierung: pieces draw on with stagger, one stays Coral */ @keyframes cs-anim-frag-draw { from { stroke-dasharray: 200; stroke-dashoffset: 200; } to { stroke-dasharray: 200; stroke-dashoffset: 0; } } @keyframes cs-anim-frag-center { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.6); opacity: 1; } } .anim-frag-piece { stroke-dasharray: 200; stroke-dashoffset: 200; } .problem-card.is-visible .anim-frag-piece--1 { animation: cs-anim-frag-draw 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.1s forwards; } .problem-card.is-visible .anim-frag-piece--2 { animation: cs-anim-frag-draw 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.45s forwards; } .problem-card.is-visible .anim-frag-piece--3 { animation: cs-anim-frag-draw 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.85s forwards; } .problem-card.is-visible .anim-frag-center { animation: cs-anim-frag-center 2s cubic-bezier(0.23, 1, 0.32, 1) 1.4s infinite; transform-origin: 100px 100px; } @media (prefers-reduced-motion: reduce) { .anim-stag-line, .anim-frag-piece { stroke-dashoffset: 0; } .anim-verg-bar { transform: scaleY(1); } .problem-card * { animation: none !important; } } /* ========================================================================= COPYSTUDIO — SECTION 04 BENEFITS (6 cards 2-col Editorial Grid) ========================================================================= */ .benefits__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.06); margin-bottom: 4rem; border: var(--hairline); position: relative; z-index: 2; } .benefit-card { background: var(--bg-1); padding: 2.5rem 2rem; display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; transition: background 320ms cubic-bezier(0.23, 1, 0.32, 1); } .benefit-card:hover { background: #0E2030; } .benefit__num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--ink-deco); line-height: 1; letter-spacing: -0.04em; align-self: start; position: relative; top: -0.1em; } .benefit__body { display: flex; flex-direction: column; gap: 0.75rem; } .benefit__title { font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; } .benefit__body p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-body); } .benefit__body p em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } @media (max-width: 768px) { .benefits__grid { grid-template-columns: 1fr; } .benefit-card { padding: 2rem 1.5rem; gap: 1.25rem; } .benefit__num { font-size: 2rem; } } /* ========================================================================= COPYSTUDIO — SECTION 05 WHAT YOU GET (Bento 7-box) Asymmetric 4-col grid: 2 large (span-2), 4 normal, 1 full-width ========================================================================= */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(260px, auto); gap: 1px; background: rgba(255, 255, 255, 0.06); border: var(--hairline); margin-bottom: 4rem; position: relative; z-index: 2; } .bento__box { background: var(--bg-1); padding: 2.25rem 1.75rem; display: flex; flex-direction: column; transition: background 320ms cubic-bezier(0.23, 1, 0.32, 1); } .bento__box:hover { background: #0E2030; } .bento__box--lg { grid-column: span 2; } .bento__box--full { grid-column: 1 / -1; border-top: 1px solid rgba(217, 80, 48, 0.4); padding: 2.5rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; } .bento__box--full .bento__icon { width: 64px; height: 64px; margin-bottom: 0; } .bento__box--full .bento__title { font-size: clamp(1.4rem, 2.2vw, 1.75rem); } .bento__full-body { display: flex; flex-direction: column; gap: 0.75rem; } .bento__icon { width: 56px; height: 56px; color: #FFFFFF; margin-bottom: 1.5rem; transition: transform 480ms cubic-bezier(0.23, 1, 0.32, 1); } .bento__icon svg { width: 100%; height: 100%; display: block; } .bento__box:hover .bento__icon { transform: translateY(-4px) scale(1.05); } .bento__title { font-family: var(--font-display); font-size: clamp(1.05rem, 1.65vw, 1.25rem); font-weight: 700; color: var(--ink); margin: 0 0 0.75rem; line-height: 1.3; } .bento__body { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-body); margin: 0; } .bento__body em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } @media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__box--lg { grid-column: span 2; } .bento__box--full { grid-template-columns: 1fr; gap: 1rem; padding: 2rem; } } @media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bento__box--lg, .bento__box--full { grid-column: 1; } .bento__box { padding: 2rem 1.5rem; } } /* ========================================================================= COPYSTUDIO — SECTION 06 METHODE (3-Step-Pinned-Stack) GSAP ScrollTrigger pin+scrub on desktop, vertical stack on mobile ========================================================================= */ .method__pin-wrap { position: relative; margin-bottom: 4rem; position: relative; z-index: 2; } .method__stack { position: relative; display: grid; min-height: 540px; } .method-step { grid-column: 1; grid-row: 1; border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(217, 80, 48, 0.4); overflow: hidden; will-change: transform, opacity; } .method-step__inner { padding: 3rem 3.5rem; max-width: 920px; margin: 0 auto; } .method-step__chapter { font-family: var(--font-mono); font-size: var(--fs-pre); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); margin: 0 0 1rem; font-weight: 500; } .method-step__chapter::before { content: none; } .method-step__title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: var(--ink); margin: 0 0 0.5rem; line-height: 1.1; letter-spacing: -0.025em; } .method-step__time { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); font-size: var(--fs-body-l); margin: 0 0 1.5rem; } .method-step__body { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); margin: 0 0 1rem; } .method-step__body em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .method__pull-quote { text-align: center; max-width: 1180px; margin: 3.5rem auto 2.5rem; font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: clamp(1.375rem, 2.4vw, 2rem); color: var(--ink); line-height: 1.3; letter-spacing: -0.005em; position: relative; z-index: 2; padding: 0 var(--container-px); text-wrap: balance; } /* Desktop pin: cards 2+3 hidden initially, JS animates them in */ @media (min-width: 961px) { .method-step--pin[data-step="2"], .method-step--pin[data-step="3"] { transform: translate3d(0, 100vh, 0); opacity: 0; } } /* Mobile: stack vertically, cards visible */ @media (max-width: 960px) { .method__pin-wrap { min-height: auto; } .method__stack { display: flex; flex-direction: column; gap: 1.25rem; min-height: auto; } .method-step { grid-row: auto; grid-column: auto; transform: none !important; opacity: 1 !important; } .method-step__inner { padding: 2rem 1.5rem; } } /* ========================================================================= COPYSTUDIO — SECTION 07 BEFORE / AFTER (2-col table) ========================================================================= */ .ba__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 4rem; border: var(--hairline); position: relative; z-index: 2; } .ba__col { padding: 2.5rem 2rem; } .ba__col--bad { background: var(--bg-2); } .ba__col--good { background: var(--bg-1); border-left: 2px solid var(--accent); } .ba__col-title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 700; margin: 0 0 1.5rem; letter-spacing: -0.01em; } .ba__col--bad .ba__col-title { color: var(--ink-mute); } .ba__col--good .ba__col-title { color: var(--ink); } .ba__row { display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; padding: 1.125rem 0; border-top: var(--hairline); align-items: start; } .ba__row:first-of-type { border-top: none; padding-top: 0; } .ba__row p { margin: 0; font-size: var(--fs-body); line-height: 1.55; } .ba__row p em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .ba__col--bad .ba__row p { color: var(--ink-mute); } .ba__col--good .ba__row p { color: var(--ink-body); } .ba__icon { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; margin-top: 0.05em; } .ba__col--bad .ba__icon { color: rgba(255, 255, 255, 0.35); } .ba__col--good .ba__icon { color: var(--accent); } @media (max-width: 900px) { .ba__grid { grid-template-columns: 1fr; } .ba__col--good { border-left: none; border-top: 2px solid var(--accent); } } /* ========================================================================= COPYSTUDIO — SECTION 08 FOR WHO / NOT FOR WHO ========================================================================= */ .forwho__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3rem; position: relative; z-index: 2; } .forwho__col { padding: 2.5rem 2rem; background: var(--bg-1); border-top: 2px solid; } .forwho__col--yes { border-color: var(--accent); } .forwho__col--no { border-color: rgba(255, 255, 255, 0.18); } .forwho__col-title { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 700; color: var(--ink); margin: 0 0 1.75rem; line-height: 1.3; } .forwho__bullet { display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; padding: 0.875rem 0; border-top: var(--hairline); align-items: start; } .forwho__bullet:first-of-type { border-top: none; padding-top: 0; } .forwho__bullet-icon { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; margin-top: 0.1em; } .forwho__col--yes .forwho__bullet-icon { color: var(--accent); } .forwho__col--no .forwho__bullet-icon { color: var(--ink-mute); } .forwho__bullet p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-body); } .forwho__bullet p em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .forwho__disclaimer { background: var(--bg-1); border-left: 3px solid var(--accent); padding: 1.75rem 2rem; margin-bottom: 3rem; position: relative; z-index: 2; } .forwho__disclaimer p { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-body); } .forwho__disclaimer p em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } @media (max-width: 900px) { .forwho__grid { grid-template-columns: 1fr; } } /* ========================================================================= COPYSTUDIO — SECTION 09 TESTIMONIALS (Wistia-Facade Showreel) 3-component split: Stage (16:9) + Captions (PSR) + Cite-Bar ========================================================================= */ .showreel { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; gap: 0; margin-bottom: 3rem; border: var(--hairline); background: rgba(255, 255, 255, 0.06); position: relative; z-index: 2; } .showreel__stage { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; background: var(--bg-2); position: relative; overflow: hidden; } .showreel__captions { grid-column: 2; grid-row: 1 / span 2; background: var(--bg-1); padding: 2rem; align-self: stretch; } .showreel__cite-bar { grid-column: 1; grid-row: 2; background: var(--bg-1); padding: 1.25rem 1.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: var(--hairline); } .wistia-facade { position: relative; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; cursor: pointer; background: var(--bg-2); overflow: hidden; display: block; } .wistia-facade::before { content: ''; position: absolute; inset: 0; background: var(--grad-overlay-vertical); z-index: 2; pointer-events: none; opacity: 0.45; } .wistia-facade img { width: 100%; height: 100%; object-fit: cover; display: block; } .wistia-facade__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .wistia-facade:hover .wistia-facade__play { transform: translate(-50%, -50%) scale(1.08); } .wistia-facade__play svg { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5)); } .wistia-facade__label { position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 3; font-size: var(--fs-pre); text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.85); font-weight: 500; } .psr { display: flex; flex-direction: column; height: 100%; } .psr__chapter { font-family: var(--font-mono); font-size: var(--fs-pre); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); margin: 0 0 0.5rem; font-weight: 500; } .psr__title { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; color: var(--ink); margin: 0 0 1.5rem; } .psr__items { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; } .psr__item .psr__label { display: block; font-size: var(--fs-pre); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 0.5rem; font-weight: 600; } .psr__item p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-body); } .psr__item p em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .cite__name strong { color: var(--ink); display: block; font-size: var(--fs-body); font-weight: 600; } .cite__name span { color: var(--ink-mute); font-size: 0.8125rem; } .cite__logo { max-height: 32px; width: auto; filter: brightness(0) invert(1) opacity(0.7); } .testimonials__pull-quote { text-align: center; max-width: 880px; margin: 4rem auto 3rem; font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); line-height: 1.5; position: relative; z-index: 2; padding: 0 var(--container-px); } .testimonials__pull-quote em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .testimonials__pull-quote cite { display: block; margin-top: 1rem; font-size: 0.875rem; color: var(--ink-mute); font-style: normal; font-family: var(--font-display); letter-spacing: 0.04em; } @media (max-width: 900px) { .showreel { grid-template-columns: 1fr; } .showreel__stage, .showreel__captions, .showreel__cite-bar { grid-column: 1; } .showreel__captions { grid-row: 2; align-self: auto; } .showreel__cite-bar { grid-row: 3; } .wistia-facade__label { font-size: 0.6875rem; left: 1rem; bottom: 1rem; } } /* ========================================================================= COPYSTUDIO — SECTION 10 ABOUT US (Niki + Moritz, alt-split) ========================================================================= */ .about-block { display: grid; grid-template-columns: 0.85fr 1.2fr; gap: 4rem; align-items: stretch; padding: 2.5rem 0; position: relative; z-index: 2; } .about-block--reverse { grid-template-columns: 1.2fr 0.85fr; } .about-block--reverse .about-block__photo { order: 2; } .about-block__photo { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-1); height: 100%; min-height: 100%; align-self: stretch; } .about-block__photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center top; display: block; position: absolute; inset: 0; } .about-block__name { font-family: var(--font-accent); font-style: italic; color: var(--accent); font-size: var(--fs-body-l); margin: 0 0 0.5rem; font-weight: 700; } .about-block__display { font-family: var(--font-display); font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 800; color: var(--ink); margin: 0 0 2rem; line-height: 1.05; letter-spacing: -0.025em; } .about-block__display em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .about-block__text p { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); margin: 0 0 1rem; max-width: 56ch; } .about-block__claim em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .about__divider { border: 0; border-top: var(--hairline); margin: 0; } @media (max-width: 900px) { .about-block, .about-block--reverse { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0; } .about-block--reverse .about-block__photo { order: 0; } /* Bug-Fix: Photo-Container hat kein grid-stretch mehr (Single-Column), also kollabiert er auf 2px Höhe. Das absolute img drinnen wird 0×0. Lösung: aspect-ratio + auto-Höhe + min-height:0 auf den Container, img bleibt absolute und füllt den Container. */ .about-block__photo { aspect-ratio: 4 / 5; height: auto; min-height: 0; max-height: 560px; width: 100%; } .about-block__photo img { aspect-ratio: auto; max-height: none; object-position: top center; } } /* ========================================================================= COPYSTUDIO — SECTION 11 HOW IT WORKS (3-step row) ========================================================================= */ .how__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; position: relative; z-index: 2; } .how-step { padding: 2.5rem 2rem; background: var(--bg-1); border-top: 2px solid var(--accent); display: flex; flex-direction: column; transition: background 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .how-step:hover { background: #0E2030; transform: translateY(-4px); } .how-step__num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; color: var(--ink-deco); display: block; margin-bottom: 1rem; letter-spacing: -0.04em; line-height: 1; } .how-step__title { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; color: var(--ink); margin: 0 0 0.875rem; line-height: 1.25; } .how-step p { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-body); } @media (max-width: 900px) { .how__row { grid-template-columns: 1fr; gap: 1rem; } } /* ========================================================================= COPYSTUDIO — SECTION 12 FAQ (Editorial Split + native details accordion) ========================================================================= */ /* Override default centered section header for FAQ — uses split layout */ .section--faq .section__header { display: none; } .faq__split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; position: relative; z-index: 2; } .faq__intro { position: sticky; top: 100px; } .faq__intro-headline { font-family: var(--font-display); font-size: clamp(1.625rem, 3.4vw, 2.5rem); font-weight: 800; color: var(--ink); margin: 1rem 0 1rem; line-height: 1.15; letter-spacing: -0.02em; } .faq__intro-sub { font-size: var(--fs-body-l); line-height: 1.6; color: var(--ink-body); margin: 0; } .faq__intro-sub em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .faq__contact-card { margin-top: 2rem; padding: 1.75rem; background: var(--bg-1); border-top: 2px solid var(--accent); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .faq__contact-card p { margin: 0; color: var(--ink-body); font-size: var(--fs-body); } .faq__list { display: flex; flex-direction: column; } .faq-q { border-top: var(--hairline); } .faq-q:last-of-type { border-bottom: var(--hairline); } .faq-q__head { list-style: none; padding: 1.5rem 0; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: baseline; } .faq-q__head::-webkit-details-marker { display: none; } .faq-q__head::after { content: '+'; font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--ink-mute); transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1), color 320ms ease; align-self: center; } .faq-q[open] .faq-q__head::after { transform: rotate(45deg); color: var(--accent); } .faq-q__num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-mute); font-weight: 500; letter-spacing: 0.08em; } .faq-q__label { font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 600; color: var(--ink); line-height: 1.3; } .faq-q[open] .faq-q__label { color: var(--accent); } .faq-q__body { padding: 0 0 1.5rem 4rem; } .faq-q__body p { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-body); } .faq-q__body p em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } @media (max-width: 900px) { .faq__split { grid-template-columns: 1fr; gap: 2.5rem; } .faq__intro { position: static; } .faq-q__head { padding: 1.125rem 0; gap: 0.75rem; } .faq-q__label { font-size: clamp(0.95rem, 4vw, 1.0625rem); line-height: 1.4; } .faq-q__body { padding: 0 0 1.125rem 0; } } /* ========================================================================= COPYSTUDIO — POLISH PASS (emil-design-eng principles applied) Replaces flat bg-1 cards with editorial depth, varied per-section treatment ========================================================================= */ /* === Reusable card-depth tokens === */ :root { --card-bg: linear-gradient(140deg, #0A1A24 0%, #060F16 100%); --card-bg-hover: linear-gradient(140deg, #0F2433 0%, #081420 100%); --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 36px -20px rgba(0, 0, 0, 0.7); --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 60px -18px rgba(0, 0, 0, 0.8), 0 0 60px -20px rgba(217, 80, 48, 0.32); --card-border: rgba(255, 255, 255, 0.06); --card-border-hover: rgba(255, 255, 255, 0.12); --ease-emil: cubic-bezier(0.23, 1, 0.32, 1); } /* === HERO: compress padding so CTA fits in fold === */ .section--hero { padding-top: clamp(6.5rem, 13vh, 9rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); } .hero__sub { margin-bottom: 1.75rem; } .hero__bullets { margin-bottom: 2rem; gap: 0.75rem; } .hero__cta-row { margin-top: 0.5rem; } /* === Universal card-press feedback (emil) === */ .cta:active, .btn:active, .cs-nav__cta:active, .faq-q__head:active { transform: scale(0.97); transition: transform 100ms ease-out; } /* === SECTION 03 PROBLEM CARDS — editorial reframe === */ .problem-card { background: var(--card-bg); border: 1px solid var(--card-border); border-top: none; border-radius: 14px; box-shadow: var(--card-shadow); padding: 2.75rem 2.25rem 2.5rem; position: relative; overflow: hidden; transition: box-shadow 320ms var(--ease-emil), transform 320ms var(--ease-emil), border-color 320ms ease; } /* Top hairline accent + Coral marker on the left edge */ .problem-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(217, 80, 48, 0.55) 16%, rgba(217, 80, 48, 0.85) 50%, rgba(217, 80, 48, 0.55) 84%, transparent 100%); } .problem-card::after { content: ''; position: absolute; top: 0; left: 1.75rem; width: 2px; height: 64px; background: linear-gradient(to bottom, var(--accent) 0%, transparent 100%); } .problem-card:hover { background: var(--card-bg-hover); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); transform: translateY(-4px); } .problem-card__svg { margin-bottom: 2rem; filter: drop-shadow(0 6px 18px rgba(217, 80, 48, 0.18)); } .problem-card__q { font-size: clamp(1.25rem, 2.1vw, 1.5rem); margin-bottom: 1.25rem; letter-spacing: -0.005em; } /* === SECTION 04 BENEFITS — large background numerals === */ .benefits__grid { background: transparent; border: none; gap: 1rem; } .benefit-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 2.5rem 2.25rem; position: relative; overflow: hidden; transition: box-shadow 320ms var(--ease-emil), transform 320ms var(--ease-emil), border-color 320ms ease; } .benefit-card::before { content: attr(data-num); position: absolute; top: -2rem; right: -1rem; font-family: var(--font-display); font-size: clamp(8rem, 14vw, 12rem); font-weight: 800; color: rgba(217, 80, 48, 0.04); line-height: 1; letter-spacing: -0.06em; pointer-events: none; transition: color 480ms var(--ease-emil); } .benefit-card:hover { background: var(--card-bg-hover); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); transform: translateY(-4px); } .benefit-card:hover::before { color: rgba(217, 80, 48, 0.08); } .benefit__num { font-size: 1.5rem; color: var(--accent); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; top: 0; position: relative; z-index: 2; } .benefit__body { position: relative; z-index: 2; } .benefit__title { font-size: clamp(1.15rem, 1.85vw, 1.35rem); letter-spacing: -0.005em; } /* === SECTION 05 BENTO — varied treatment per box-size === */ .bento { background: transparent; border: none; gap: 1rem; } .bento__box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 2.25rem 2rem; position: relative; overflow: hidden; transition: box-shadow 320ms var(--ease-emil), transform 320ms var(--ease-emil), border-color 320ms ease; } .bento__box:hover { background: var(--card-bg-hover); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); transform: translateY(-4px); } /* Large boxes get a subtle Coral radial in upper-right */ .bento__box--lg::before { content: ''; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(217, 80, 48, 0.18) 0%, transparent 60%); pointer-events: none; transition: opacity 480ms var(--ease-emil); opacity: 0.7; } .bento__box--lg:hover::before { opacity: 1; } .bento__box--full { background: linear-gradient(120deg, #0F2433 0%, #081420 60%, #0E1A22 100%); padding: 3rem; border-top: 1px solid rgba(217, 80, 48, 0.4); position: relative; } .bento__box--full::after { content: ''; position: absolute; bottom: 0; right: 0; width: 50%; height: 1px; background: linear-gradient(to right, transparent, rgba(217, 80, 48, 0.6)); } .bento__icon { filter: drop-shadow(0 4px 12px rgba(217, 80, 48, 0.18)); } /* === SECTION 06 METHODE STEPS — premium glass === */ .method-step { background: linear-gradient(140deg, #0F2433 0%, #060F16 100%); border: 1px solid var(--card-border); border-top: none; border-radius: 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 32px 80px -24px rgba(0, 0, 0, 0.85); position: relative; } .method-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(217, 80, 48, 0.6) 50%, transparent); } .method-step::after { content: attr(data-step); position: absolute; top: 1.75rem; right: 2.5rem; font-family: var(--font-display); font-size: clamp(5rem, 9vw, 8rem); font-weight: 800; color: rgba(217, 80, 48, 0.06); line-height: 0.85; letter-spacing: -0.06em; pointer-events: none; } /* === SECTION 07 BEFORE/AFTER — distinct sides === */ .ba__grid { border: none; gap: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow); } .ba__col { padding: 2.75rem 2.25rem; } .ba__col--bad { background: linear-gradient(160deg, #1A1A1C 0%, #0E0E10 100%); position: relative; } .ba__col--bad::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 40%); pointer-events: none; } .ba__col--good { background: linear-gradient(160deg, #0F2433 0%, #060F16 100%); border-left: none; position: relative; } .ba__col--good::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%); } .ba__col--good::after { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 200px; background: radial-gradient(ellipse at top right, rgba(217, 80, 48, 0.12) 0%, transparent 70%); pointer-events: none; } .ba__col-title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); letter-spacing: -0.01em; position: relative; z-index: 2; } /* === SECTION 08 FOR-WHO COLUMNS === */ .forwho__grid { gap: 1.25rem; } .forwho__col { background: var(--card-bg); border: 1px solid var(--card-border); border-top: none; border-radius: 14px; box-shadow: var(--card-shadow); padding: 2.75rem 2.25rem; position: relative; overflow: hidden; } .forwho__col::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .forwho__col--yes::before { background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent) 70%, transparent); } .forwho__col--no::before { background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0.18) 70%, transparent); } .forwho__col--yes::after { content: ''; position: absolute; bottom: -120px; right: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(217, 80, 48, 0.1) 0%, transparent 60%); pointer-events: none; } .forwho__col-title { font-size: clamp(1.15rem, 2vw, 1.4rem); position: relative; z-index: 2; } .forwho__disclaimer { background: linear-gradient(120deg, #0F2433 0%, #081420 100%); border: 1px solid var(--card-border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 1.875rem 2.25rem; box-shadow: var(--card-shadow); } /* === SECTION 09 SHOWREEL polish === */ .showreel { background: transparent; border: 1px solid var(--card-border); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 32px 80px -24px rgba(0, 0, 0, 0.85); } .showreel__captions { background: linear-gradient(140deg, #0F2433 0%, #060F16 100%); position: relative; } .showreel__captions::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(217, 80, 48, 0.4) 50%, transparent); } .showreel__cite-bar { background: linear-gradient(140deg, #0F2433 0%, #060F16 100%); border-top: 1px solid var(--card-border); } /* === SECTION 10 ABOUT polish === */ .about-block__photo { border-radius: 16px; overflow: hidden; border: 1px solid var(--card-border); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(217, 80, 48, 0.08); position: relative; } .about-block__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 35%); pointer-events: none; } /* === SECTION 11 HOW STEPS === */ .how__row { gap: 1.25rem; } .how-step { background: var(--card-bg); border: 1px solid var(--card-border); border-top: none; border-radius: 14px; box-shadow: var(--card-shadow); padding: 2.75rem 2.25rem; position: relative; overflow: hidden; transition: box-shadow 320ms var(--ease-emil), transform 320ms var(--ease-emil), border-color 320ms ease; } .how-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--accent) 50%, transparent); } .how-step::after { content: attr(data-step); position: absolute; top: 1rem; right: 1.5rem; font-family: var(--font-display); font-size: clamp(4rem, 7vw, 6rem); font-weight: 800; color: rgba(217, 80, 48, 0.06); line-height: 0.85; letter-spacing: -0.06em; pointer-events: none; } .how-step:hover { background: var(--card-bg-hover); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); transform: translateY(-4px); } .how-step:hover::after { color: rgba(217, 80, 48, 0.12); } .how-step__num { font-family: var(--font-mono); font-size: 1.125rem; color: var(--accent); font-weight: 600; letter-spacing: 0.06em; margin-bottom: 1.5rem; position: relative; z-index: 2; } .how-step__title { font-size: clamp(1.15rem, 2vw, 1.4rem); position: relative; z-index: 2; } .how-step p { position: relative; z-index: 2; } /* === SECTION 12 FAQ contact-card === */ .faq__contact-card { background: linear-gradient(140deg, #0F2433 0%, #060F16 100%); border: 1px solid var(--card-border); border-top: 2px solid var(--accent); border-radius: 12px; box-shadow: var(--card-shadow); padding: 2rem; } .faq-q__head:hover .faq-q__label { color: rgba(255, 255, 255, 0.9); } /* === Universal :focus-visible (a11y) === */ .cta:focus-visible, .btn:focus-visible, .cs-nav__cta:focus-visible, .faq-q__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* === Touch device hover guard (emil) === */ @media (hover: none) { .problem-card:hover, .benefit-card:hover, .bento__box:hover, .how-step:hover { transform: none; } } /* === HERO compact pass (CTA must fit ≤900px viewport) === */ .section--hero { padding-top: clamp(5.5rem, 11vh, 7.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .hero__pre { margin-bottom: 1rem; } .hero__headline { font-size: clamp(2.25rem, 5.6vw, 4.5rem); margin-bottom: 0.75rem; max-width: 20ch; line-height: 1.06; } .hero__sub-line { margin-bottom: 1.25rem; } .hero__sub { font-size: clamp(0.95rem, 1.4vw, 1.0625rem); margin-bottom: 1.5rem; max-width: 56ch; } .hero__bullets { margin-bottom: 1.75rem; gap: 0.625rem; max-width: 560px; } .hero__bullets li { font-size: 0.9375rem; line-height: 1.5; } .hero__cta-row { margin-top: 0.25rem; gap: 1.25rem; } /* Even tighter on shorter viewports */ @media (max-height: 900px) and (min-width: 769px) { .section--hero { padding-top: 5.5rem; padding-bottom: 2.5rem; } .hero__headline { font-size: clamp(2rem, 4.8vw, 3.75rem); margin-bottom: 0.5rem; } .hero__sub { margin-bottom: 1rem; } .hero__bullets { margin-bottom: 1.25rem; gap: 0.5rem; } } /* Hero final-fit: shave 30-40px more so CTA fully visible at 900px */ @media (min-width: 769px) { .section--hero { padding-top: 5rem; padding-bottom: 2rem; } } /* Hero: shave margins between elements to fit CTA in 900px viewport */ @media (min-width: 769px) { .section--hero { padding-top: 4.5rem; padding-bottom: 1.5rem; } .hero__pre { margin-bottom: 0.75rem; } .hero__headline { margin-bottom: 0.5rem; } .hero__sub-line { margin-bottom: 0.875rem; } .hero__sub { margin-bottom: 1rem; max-width: 52ch; } .hero__bullets { margin-bottom: 1.25rem; gap: 0.5rem; } .hero__bullets li { line-height: 1.45; } } /* === Inline SVG logo sizing (since we replaced with inline ) === */ .cs-nav__logo svg { display: block; height: 30px; width: auto; max-width: 180px; } .cs-footer__wordmark svg { display: block; height: clamp(56px, 8vw, 80px); width: auto; } /* === Hero CTA: ensure always visible (don't depend on GSAP completing) === */ .hero__cta-row { opacity: 1; } /* ========================================================================= HERO REDESIGN v2 — wider container, less wrapping, more breathing Per user feedback: too much text density, content too narrow ========================================================================= */ .hero__inner { max-width: 1180px; /* was 920 → wider, matches section container vibe */ position: relative; z-index: 2; } .hero__headline { /* Slightly smaller font + much wider container = naturally wraps in 3 lines */ font-size: clamp(2.25rem, 4.8vw, 4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; max-width: 26ch; /* gives ~3 lines at 1180px width */ margin: 0 auto 1.25rem; } /* Hero sub-line removed from markup — just hide if it appears anywhere */ .hero__sub-line { display: none; } .hero__sub { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.55; color: var(--ink-body); max-width: 64ch; /* was 56ch → wider so 2 lines instead of 3 */ margin: 0 auto 2rem; } .hero__bullets { list-style: none; padding: 0; margin: 0 auto 2.25rem; max-width: 760px; /* wider so each bullet fits on 1 line at desktop */ display: flex; flex-direction: column; gap: 0.625rem; } .hero__bullets li { display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; align-items: baseline; text-align: left; color: var(--ink-body); font-size: 0.9375rem; line-height: 1.45; padding: 0.4rem 0.75rem; border-radius: 8px; transition: background 200ms var(--ease-emil); } .hero__bullets li:hover { background: rgba(255, 255, 255, 0.025); } .hero__arrow { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 1rem; } .hero__cta-row { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; } @media (max-width: 768px) { .hero__headline { font-size: clamp(1.875rem, 7vw, 2.5rem); max-width: 100%; } .hero__sub { font-size: 0.95rem; } .hero__bullets { max-width: 100%; } .hero__bullets li { font-size: 0.875rem; padding: 0.3rem 0.5rem; } .hero__cta-row { flex-direction: column; } .hero__cta-row .cta { width: 100%; justify-content: center; } } /* === HERO v3 — split deck-line + tighter headline that wraps cleanly === */ .hero__headline { font-size: clamp(2.25rem, 5vw, 4.25rem); max-width: 22ch; /* drives 2-3 line wrap with current copy */ margin: 0 auto 0.875rem; line-height: 1.05; letter-spacing: -0.028em; } .hero__deck { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--accent); margin: 0 auto 1.5rem; letter-spacing: -0.005em; line-height: 1.3; max-width: 60ch; } .hero__sub { font-size: clamp(0.9375rem, 1.25vw, 1.0625rem); line-height: 1.55; color: var(--ink-body); max-width: 56ch; margin: 0 auto 1.75rem; } @media (min-width: 769px) { .hero__sub { margin-bottom: 1.5rem; } } /* === HERO v4 — fix: no numeral, more breathing top+bottom, wider content === */ .section--hero { padding-top: clamp(8rem, 16vh, 11rem); /* mehr Space oben — Tagline nicht von Nav verdeckt */ padding-bottom: clamp(5rem, 10vw, 7rem); /* mehr Space unten */ } .section--hero .section-numeral { display: none; } /* 01 raus aus Hero */ .hero__inner { max-width: 1280px; /* fully width — match other sections */ } .hero__headline { font-size: clamp(2.5rem, 5.6vw, 5rem); max-width: 28ch; /* breiter — passt headline in 2-3 Zeilen */ margin: 0 auto 1rem; line-height: 1.04; } .hero__deck { font-style: italic; /* parenthetical — etwas leiser */ font-family: var(--font-accent); color: var(--ink-mute); /* Klammer = subtiler, nicht Coral */ font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); font-weight: 400; margin: 0 auto 2rem; letter-spacing: 0.005em; } .hero__sub { max-width: 64ch; margin: 0 auto 2.5rem; } .hero__bullets { max-width: 820px; margin: 0 auto 2.5rem; } /* ========================================================================= HERO v5 — SPLIT LAYOUT per wireframe (text left + photo right) Editorial premium feel, emil-polish principles ========================================================================= */ .section--hero { padding-top: clamp(7rem, 13vh, 10rem); padding-bottom: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; text-align: left; /* override center-align */ } .hero__split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; position: relative; z-index: 2; max-width: 1320px; } .hero__text { max-width: none; } .hero__pre { text-align: left; margin: 0 0 1.25rem; display: inline-flex; align-items: center; gap: 0.55em; padding: 0.42em 0.95em; border: 1px solid rgba(217, 80, 48, 0.32); border-radius: 999px; background: rgba(217, 80, 48, 0.06); color: var(--accent); font-size: 0.625rem; letter-spacing: 0.06em; font-weight: 600; text-transform: uppercase; white-space: nowrap; } .hero__pre::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } .hero__headline { font-family: var(--font-display); font-size: clamp(2rem, 3.9vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 0.75rem; max-width: 22ch; text-align: left; text-wrap: balance; } .hero__headline em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .hero__deck { position: relative; display: inline-block; font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); line-height: 1.25; color: #FFE6D9; margin: 0.25rem 0 1.5rem; padding: 0.45rem 0.9rem 0.45rem 1.1rem; text-align: left; letter-spacing: -0.005em; max-width: none; background: linear-gradient(90deg, rgba(217, 80, 48, 0.22) 0%, rgba(217, 80, 48, 0.10) 60%, rgba(217, 80, 48, 0) 100%); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; } .hero__deck::before { content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, transparent, var(--accent) 25%, var(--accent) 75%, transparent); filter: drop-shadow(0 0 8px rgba(217, 80, 48, 0.6)); } .hero__sub { font-size: clamp(0.95rem, 1.15vw, 1.0625rem); line-height: 1.55; color: var(--ink-body); max-width: 52ch; margin: 0 0 1.75rem; text-align: left; } .hero__bullets { list-style: none; padding: 0; margin: 0 0 2.25rem; max-width: none; display: flex; flex-direction: column; gap: 0.625rem; text-align: left; } .hero__bullets li { display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; align-items: baseline; color: var(--ink-body); font-size: 0.9375rem; line-height: 1.5; padding: 0.4rem 0; } .hero__bullets li:hover { background: transparent; } .hero__arrow { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 1rem; } .hero__cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-start; margin-top: 0.5rem; } /* === Hero MEDIA (right column) — emil-polish === */ .hero__media { position: relative; aspect-ratio: 4 / 5; max-height: 580px; width: 100%; } .hero__photo-frame { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 32px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(217, 80, 48, 0.1), 0 0 90px -20px rgba(217, 80, 48, 0.18); transform: translateZ(0); transition: transform 600ms var(--ease-emil), box-shadow 600ms var(--ease-emil); } .hero__photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transform: scale(1.02); transition: transform 800ms var(--ease-emil); } .hero__photo-frame:hover img { transform: scale(1.06); } .hero__photo-frame:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 100px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(217, 80, 48, 0.18), 0 0 120px -20px rgba(217, 80, 48, 0.28); } /* Subtle dark overlay bottom for tag legibility */ .hero__photo-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.4) 100%); pointer-events: none; } /* Inner Coral edge highlight on top-right corner */ .hero__photo-glow { position: absolute; top: -1px; right: -1px; width: 140px; height: 140px; background: radial-gradient(circle at top right, rgba(217, 80, 48, 0.5), transparent 60%); pointer-events: none; z-index: 2; opacity: 0.6; mix-blend-mode: screen; } /* Tag pill — bottom-left of photo */ .hero__photo-tag { position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.55rem 0.95rem; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.92); } .hero__photo-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(217, 80, 48, 0.18); animation: hero-tag-pulse 2s ease-in-out infinite; } @keyframes hero-tag-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(217, 80, 48, 0.18); } 50% { box-shadow: 0 0 0 7px rgba(217, 80, 48, 0.05); } } /* Background ambient glow */ .hero__bg-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1100px; height: 700px; background: var(--grad-red-glow); opacity: 0.45; pointer-events: none; z-index: 1; } @media (max-width: 960px) { .section--hero { padding-top: clamp(6rem, 11vh, 8rem); padding-bottom: clamp(4rem, 8vw, 5rem); } .hero__split { grid-template-columns: 1fr; gap: 2.5rem; } .hero__media { order: -1; max-height: 420px; aspect-ratio: 16 / 11; } .hero__photo-frame img { object-position: center 25%; } .hero__headline { font-size: clamp(1.875rem, 7vw, 2.5rem); } .hero__cta-row .cta { flex: 1; min-width: 0; justify-content: center; text-align: center; } } /* === HERO bullets — force-fix alignment (override all earlier centering rules) === */ .hero__bullets { list-style: none !important; padding: 0 !important; margin: 0 0 2.25rem !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.625rem !important; text-align: left !important; max-width: 100% !important; width: 100%; } .hero__bullets li { display: grid !important; grid-template-columns: auto 1fr !important; gap: 0.875rem !important; align-items: baseline !important; width: 100% !important; max-width: 56ch; text-align: left !important; margin: 0 !important; padding: 0.4rem 0; } /* ========================================================================= SECTION 02 — STORY SPLIT (Image-left + Content-right per wireframe) ========================================================================= */ .section--story { padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } .story__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; position: relative; z-index: 2; } .story__media { position: relative; } .story__photo-frame { position: relative; border-radius: 18px; overflow: hidden; background: var(--bg-1); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 32px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(217, 80, 48, 0.08), 0 0 90px -20px rgba(217, 80, 48, 0.18); aspect-ratio: 4 / 3; transition: transform 600ms var(--ease-emil), box-shadow 600ms var(--ease-emil); } .story__photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 800ms var(--ease-emil); } .story__photo-frame:hover img { transform: scale(1.04); } .story__photo-frame:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 100px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(217, 80, 48, 0.18), 0 0 120px -20px rgba(217, 80, 48, 0.32); } .story__media-tag { position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.55rem 0.95rem; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.92); } .story__media-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(217, 80, 48, 0.18); } .story__text { max-width: none; } .story__pre { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.42em 0.95em; border: 1px solid rgba(217, 80, 48, 0.32); border-radius: 999px; background: rgba(217, 80, 48, 0.06); color: var(--accent); font-size: 0.6875rem; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; margin: 0 0 1.25rem; } .story__pre::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .story__headline { font-family: var(--font-display); font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 1.25rem; max-width: 22ch; } .story__headline em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .story__sub { font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.6; color: var(--ink-body); margin: 0 0 2rem; max-width: 52ch; } .story__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .story__bullets li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.125rem 0; border-top: var(--hairline); font-size: var(--fs-body); line-height: 1.55; color: var(--ink-body); } .story__bullets li:last-child { border-bottom: var(--hairline); } .story__bullets strong { color: var(--ink); font-weight: 600; } .story__bullet-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(217, 80, 48, 0.12); border: 1px solid rgba(217, 80, 48, 0.32); color: var(--accent); flex: 0 0 28px; margin-top: 0.05em; } @media (max-width: 960px) { .story__split { grid-template-columns: 1fr; gap: 2.5rem; } .story__media { order: -1; } .story__photo-frame { aspect-ratio: 16 / 11; } .story__headline { font-size: clamp(1.625rem, 5.5vw, 2rem); max-width: 100%; } } /* ========================================================================= SECTION 03 — PROBLEM SPLIT (Image-left + Content-right per wireframe) ========================================================================= */ .section--problem-split { padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } .problem-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; position: relative; z-index: 2; } .problem-split__media { position: sticky; top: 100px; align-self: start; } .problem-split__photo-frame { position: relative; border-radius: 18px; overflow: hidden; background: var(--bg-1); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 32px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(217, 80, 48, 0.08), 0 0 90px -20px rgba(217, 80, 48, 0.18); aspect-ratio: 4 / 5; transition: transform 600ms var(--ease-emil), box-shadow 600ms var(--ease-emil); } .problem-split__photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 800ms var(--ease-emil); } .problem-split__photo-frame:hover img { transform: scale(1.04); } .problem-split__media-tag { position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.55rem 0.95rem; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.92); } .problem-split__media-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(217, 80, 48, 0.18); } .problem-split__text { max-width: none; } .problem-split__pre { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.42em 0.95em; border: 1px solid rgba(217, 80, 48, 0.32); border-radius: 999px; background: rgba(217, 80, 48, 0.06); color: var(--accent); font-size: 0.6875rem; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; margin: 0 0 1.25rem; } .problem-split__pre::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .problem-split__headline { font-family: var(--font-display); font-size: clamp(1.875rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 1.25rem; max-width: 22ch; } .problem-split__headline em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .problem-split__sub { font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.6; color: var(--ink-body); margin: 0 0 2rem; max-width: 56ch; } .problem-split__bullets { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0; } .problem-split__bullets li { display: grid; grid-template-columns: auto 1fr; gap: 1.125rem; align-items: start; padding: 1.25rem 0; border-top: var(--hairline); font-size: var(--fs-body); line-height: 1.55; color: var(--ink-body); } .problem-split__bullets li:last-child { border-bottom: var(--hairline); } .problem-split__bullets strong { display: block; color: var(--ink); font-weight: 700; font-size: 1.0625rem; font-family: var(--font-display); letter-spacing: -0.005em; margin-bottom: 0.3rem; } .problem-split__bullet-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(217, 80, 48, 0.12); border: 1px solid rgba(217, 80, 48, 0.32); color: var(--accent); flex: 0 0 32px; margin-top: 0.1em; } .problem-split__quote { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.45; color: var(--ink); margin: 0 0 2rem; padding: 1.5rem 0 1.5rem 1.5rem; border-left: 2px solid var(--accent); max-width: 56ch; } .problem-split__quote em { color: var(--accent); } .problem-split__cta { margin-top: 0.5rem; } @media (max-width: 960px) { .problem-split { grid-template-columns: 1fr; gap: 2.5rem; } .problem-split__media { position: static; order: -1; } .problem-split__photo-frame { aspect-ratio: 16 / 11; } .problem-split__headline { font-size: clamp(1.5rem, 5.5vw, 2rem); max-width: 100%; } } /* === Section 03 — fix sticky image (override align-items center from grid) === */ .problem-split { align-items: start !important; /* let media stick within its track */ } .problem-split__media { position: sticky; top: 110px; /* below sticky nav */ align-self: start; z-index: 2; } @media (max-width: 960px) { .problem-split__media { position: static !important; top: auto; } } /* === Section 03 — header on top, split below (sticky finally works) === */ .problem-split__header { text-align: center; max-width: 880px; margin: 0 auto 4rem; position: relative; z-index: 2; } .problem-split__header .problem-split__headline { margin: 0 auto 1.25rem; max-width: 28ch; } .problem-split__header .problem-split__sub { margin: 0 auto; max-width: 56ch; text-align: center; } /* Reset the in-text headline/sub since they moved to header */ .problem-split__text > .problem-split__headline, .problem-split__text > .problem-split__sub { display: none; } /* Grid with image-left (sticky) + text-right (longer content for sticky to work) */ .problem-split { display: grid; grid-template-columns: minmax(280px, 0.85fr) 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start !important; margin-bottom: 3rem; } .problem-split__media { position: sticky; top: 110px; align-self: start; } .problem-split__photo-frame { aspect-ratio: 4 / 5; } /* Quote + CTA centered below the split */ .section--problem-split .problem-split__quote { text-align: center; max-width: 760px; margin: 1rem auto 2rem; border-left: none; padding: 0 var(--container-px); position: relative; z-index: 2; } .section--problem-split .problem-split__cta { display: flex; justify-content: center; margin-top: 1.5rem; } @media (max-width: 960px) { .problem-split { grid-template-columns: 1fr; } .problem-split__media { position: static !important; top: auto; } .problem-split__photo-frame { aspect-ratio: 16 / 11; } .problem-split__header { margin-bottom: 2.5rem; } } /* === Section 03 — header headline full container width === */ .problem-split__header { max-width: none !important; margin-bottom: 4rem; } .problem-split__header .problem-split__headline { max-width: none !important; margin: 0 auto 1.25rem !important; width: 100%; } .problem-split__header .problem-split__sub { max-width: none !important; margin: 0 auto !important; width: 100%; } /* ========================================================================= SECTION 04 — BENEFITS BENTO (Editorial Light-on-Dark per wireframe + image#14 ref) Asymmetric 4-col bento, white cards on warm cream section bg, mockup graphics ========================================================================= */ .section--benefits-bento { /* Light section breaks the dark sequence — kemnitzer-style editorial alt */ background: #F5F2EB; color: #1A1A1C; padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } /* Sub-tone background to add subtle depth */ .section--benefits-bento::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(217, 80, 48, 0.06) 0%, transparent 50%); pointer-events: none; } .section--benefits-bento .container { position: relative; z-index: 2; } .benefits-bento__header { text-align: center; max-width: 1280px; margin: 0 auto 3.5rem; } .benefits-bento__pre { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.42em 0.95em; border: 1px solid rgba(217, 80, 48, 0.32); border-radius: 999px; background: rgba(217, 80, 48, 0.06); color: var(--accent); font-size: 0.6875rem; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; margin: 0 auto 1.5rem; } .benefits-bento__pre::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .benefits-bento__headline { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: #1A1A1C; margin: 0 auto 1.25rem; } .benefits-bento__headline em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .benefits-bento__sub { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.55; color: #555; margin: 0 auto; max-width: 56ch; } /* Asymmetric bento: 4-col x 3-row */ .benefits-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: 1rem; margin-bottom: 3rem; } .bb-card { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 18px; padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.18); transition: transform 480ms var(--ease-emil), box-shadow 480ms var(--ease-emil); } .bb-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 28px 60px -22px rgba(0, 0, 0, 0.28); } .bb-card__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #777; font-weight: 500; } .bb-card__art { flex: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #FAFAF7 0%, #F0EDE7 100%); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 12px; padding: 1.5rem; min-height: 180px; } .bb-card__art--small { min-height: 140px; } .bb-card__caption h3 { font-family: var(--font-display); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 700; color: #1A1A1C; margin: 0 0 0.5rem; line-height: 1.3; letter-spacing: -0.01em; } .bb-card__caption p { font-size: 0.9375rem; line-height: 1.55; color: #555; margin: 0; } .bb-card__caption p em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } /* === Asymmetric grid placement === */ .bb-card--a { grid-column: 1 / span 2; grid-row: 1 / span 2; } .bb-card--b { grid-column: 3 / span 1; grid-row: 1; } .bb-card--c { grid-column: 4 / span 1; grid-row: 1; } .bb-card--d { grid-column: 3 / span 2; grid-row: 2; } .bb-card--e { grid-column: 1 / span 2; grid-row: 3; } .bb-card--f { grid-column: 3 / span 2; grid-row: 3; } /* === MOCKUP A: Phone with notifications === */ .bb-phone { width: 100%; max-width: 240px; aspect-ratio: 9 / 18; background: #1A1A1C; border-radius: 28px; padding: 8px; position: relative; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4); } .bb-phone__notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 80px; height: 18px; background: #1A1A1C; border-radius: 0 0 12px 12px; z-index: 2; } .bb-phone__screen { background: #FFFFFF; border-radius: 22px; padding: 28px 14px 14px; height: 100%; display: flex; flex-direction: column; gap: 6px; } .bb-phone__time { font-size: 0.625rem; color: #999; text-align: center; font-weight: 600; } .bb-phone__hl { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: #1A1A1C; margin-bottom: 4px; line-height: 1.25; } .bb-notif { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 6px 8px; background: linear-gradient(180deg, #FAFAF7 0%, #F0EDE7 100%); border-radius: 8px; border: 1px solid rgba(217, 80, 48, 0.18); } .bb-notif__icon { color: var(--accent); font-size: 0.75rem; line-height: 1; } .bb-notif__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bb-notif__body strong { font-size: 0.625rem; color: #1A1A1C; font-weight: 700; } .bb-notif__body span { font-size: 0.5625rem; color: #888; } /* === MOCKUP B: Price-up panel === */ .bb-price { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .bb-price__label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: #888; } .bb-price__line { display: block; width: 60px; height: 2px; background: linear-gradient(to right, transparent, var(--accent)); } .bb-price__value { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 800; color: var(--accent); letter-spacing: -0.03em; } /* === MOCKUP C: Pre-Sold checkmark badge === */ .bb-badge { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; } .bb-badge span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: #1A1A1C; font-weight: 600; } /* === MOCKUP D: Dashboard metrics === */ .bb-dash { width: 100%; display: flex; flex-direction: column; gap: 0.875rem; } .bb-dash__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .bb-dash__metric { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; } .bb-dash__label { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: #999; font-weight: 600; } .bb-dash__num { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: #1A1A1C; line-height: 1; } .bb-dash__num--accent { color: var(--accent); } .bb-dash__chart { height: 22px; background: linear-gradient(to right, transparent, rgba(217, 80, 48, 0.15)); border-radius: 3px; margin-top: 0.25rem; position: relative; overflow: hidden; } .bb-dash__chart::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent 5%, var(--accent) 100%); clip-path: polygon(0% 80%, 25% 60%, 50% 70%, 75% 40%, 100% 30%, 100% 100%, 0% 100%); } .bb-dash__chart--alt::after { clip-path: polygon(0% 30%, 30% 50%, 60% 65%, 100% 70%, 100% 100%, 0% 100%); background: linear-gradient(to right, transparent 5%, #999 100%); } .bb-dash__chart--up::after { clip-path: polygon(0% 90%, 25% 75%, 50% 50%, 75% 30%, 100% 10%, 100% 100%, 0% 100%); } .bb-dash__bar { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 8px; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; position: relative; overflow: hidden; } .bb-dash__bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 78%; background: linear-gradient(90deg, rgba(217, 80, 48, 0.06), rgba(217, 80, 48, 0.18)); } .bb-dash__bar-label { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #1A1A1C; font-weight: 600; } /* === MOCKUP E: Letterhead document === */ .bb-letter { width: 100%; max-width: 360px; background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; padding: 1.25rem; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 0.875rem; } .bb-letter__head { border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: 0.625rem; } .bb-letter__brand { font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem; color: #1A1A1C; letter-spacing: -0.02em; } .bb-letter__brand em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); margin-left: 0.25em; } .bb-letter__lines { display: flex; flex-direction: column; gap: 0.4rem; } .bb-letter__lines span { display: block; height: 6px; background: linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04)); border-radius: 3px; } .bb-letter__highlight { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: 0.875rem; color: var(--accent); padding: 0.5rem 0.625rem; background: rgba(217, 80, 48, 0.08); border-left: 2px solid var(--accent); margin-top: 0.25rem; } /* === MOCKUP F: Loop/Renew icon === */ .bb-loop { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .bb-loop span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: #1A1A1C; font-weight: 600; } /* === CTA at bottom of bento === */ .benefits-bento__cta { display: flex; justify-content: center; margin-top: 2.5rem; } /* === Mobile collapse === */ @media (max-width: 960px) { .benefits-bento { grid-template-columns: 1fr; grid-template-rows: none; } .bb-card--a, .bb-card--b, .bb-card--c, .bb-card--d, .bb-card--e, .bb-card--f { grid-column: 1; grid-row: auto; } .bb-card { padding: 1.5rem; } } @media (min-width: 961px) and (max-width: 1100px) { .benefits-bento { grid-template-columns: repeat(2, 1fr); } .bb-card--a, .bb-card--b, .bb-card--c, .bb-card--d, .bb-card--e, .bb-card--f { grid-column: auto; grid-row: auto; } } /* ========================================================================= SECTION 04 — DARK MODE OVERRIDE (revert from cream → dark, richer mockups) ========================================================================= */ .section--benefits-bento { background: var(--bg-0); color: var(--ink); } .section--benefits-bento::before { background: radial-gradient(circle at 80% 20%, rgba(217, 80, 48, 0.12) 0%, transparent 60%); } .benefits-bento__headline { color: var(--ink); } .benefits-bento__sub { color: var(--ink-body); } /* Cards: dark gradient instead of white */ .bb-card { background: linear-gradient(140deg, #0E1E2A 0%, #08111A 100%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(217, 80, 48, 0.06); } .bb-card:hover { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 32px 80px -22px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(217, 80, 48, 0.16), 0 0 60px -20px rgba(217, 80, 48, 0.28); } .bb-card__num { color: rgba(255, 255, 255, 0.4); } .bb-card__art { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.04); } .bb-card__caption h3 { color: var(--ink); } .bb-card__caption p { color: var(--ink-body); } /* === Phone notification bg adapts to dark === */ .bb-phone__hl { color: #1A1A1C; } .bb-notif { background: linear-gradient(180deg, #FAFAF7 0%, #F0EDE7 100%); } .bb-notif__body strong { color: #1A1A1C; } /* === Pricing-card mockup (replaces +148%) === */ .bb-price-card { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; text-align: center; padding: 1.25rem 1rem; background: var(--bg-0); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 2px solid var(--accent); border-radius: 8px; width: 100%; max-width: 220px; position: relative; } .bb-price-card__pre { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .bb-price-card__strike { font-size: 0.875rem; color: var(--ink-mute); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); } .bb-price-card__main { font-family: var(--font-display); font-size: clamp(1.625rem, 2.6vw, 2rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .bb-price-card__main small { font-size: 0.625rem; font-weight: 500; color: var(--ink-mute); letter-spacing: 0.04em; margin-left: 0.2em; } .bb-price-card__hint { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 0.75rem; color: var(--accent); margin-top: 0.25rem; } /* === Chat-dialogue mockup === */ .bb-chat { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 240px; } .bb-chat__msg { padding: 0.625rem 0.875rem; border-radius: 14px; font-size: 0.8125rem; line-height: 1.35; font-weight: 500; max-width: 90%; } .bb-chat__msg--in { background: rgba(255, 255, 255, 0.08); color: var(--ink); align-self: flex-start; border-top-left-radius: 4px; } .bb-chat__msg--out { background: var(--accent); color: #fff; align-self: flex-end; border-top-right-radius: 4px; } .bb-chat__status { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-align: center; padding-top: 0.4rem; border-top: 1px dashed rgba(217, 80, 48, 0.3); margin-top: 0.4rem; font-weight: 600; } /* === Dashboard mockup (dark-mode) === */ .bb-dash__metric { background: var(--bg-0); border: 1px solid rgba(255, 255, 255, 0.06); } .bb-dash__label { color: rgba(255, 255, 255, 0.45); } .bb-dash__num { color: var(--ink); } .bb-dash__chart { background: linear-gradient(to right, transparent, rgba(217, 80, 48, 0.12)); } .bb-dash__chart--alt::after { background: linear-gradient(to right, transparent 5%, rgba(255, 255, 255, 0.4) 100%); } .bb-dash__bar { background: var(--bg-0); border: 1px solid rgba(255, 255, 255, 0.06); } .bb-dash__bar-label { color: var(--ink); } .bb-dash__bar-fill { background: linear-gradient(90deg, rgba(217, 80, 48, 0.08), rgba(217, 80, 48, 0.22)); } /* === Letterhead mockup (dark-mode) === */ .bb-letter { background: linear-gradient(180deg, #1A2332 0%, #0F1A24 100%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6); } .bb-letter__head { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .bb-letter__brand { color: var(--ink); } .bb-letter__lines span { background: linear-gradient(to right, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)); } .bb-letter__highlight { background: rgba(217, 80, 48, 0.14); } /* === Renew/Contract mockup === */ .bb-renew { position: relative; width: 100%; max-width: 220px; } .bb-renew__doc { background: linear-gradient(180deg, #1A2332 0%, #0F1A24 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6); } .bb-renew__head { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: 0.25rem; } .bb-renew__line { display: block; height: 6px; background: linear-gradient(to right, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)); border-radius: 3px; } .bb-renew__stamp { position: absolute; bottom: -10px; right: -10px; display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 0.95rem; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; border-radius: 999px; border: 2px solid var(--bg-0); box-shadow: 0 8px 20px -6px rgba(217, 80, 48, 0.6); transform: rotate(-6deg); } /* ========================================================================= SECTION 04 — BENEFITS BENTO V3 No more blue tint, no nested art-container, all SVG anims live + breathe ========================================================================= */ .section--benefits-bento { background: #0A0A0C; /* warm anthracite, no blue */ } .section--benefits-bento::before { background: radial-gradient(circle at 20% 30%, rgba(217, 80, 48, 0.10) 0%, transparent 50%), radial-gradient(circle at 80% 75%, rgba(217, 80, 48, 0.08) 0%, transparent 55%); } .bb-card { background: linear-gradient(155deg, #18181B 0%, #0E0E11 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px; padding: 0; /* drop padding — graphic + caption manage their own */ display: flex; flex-direction: column; overflow: hidden; position: relative; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -22px rgba(0, 0, 0, 0.85); transition: transform 480ms var(--ease-emil), box-shadow 480ms var(--ease-emil), border-color 480ms ease; } .bb-card:hover { border-color: rgba(217, 80, 48, 0.32); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 32px 80px -22px rgba(0, 0, 0, 0.9), 0 0 90px -20px rgba(217, 80, 48, 0.32); } .bb-card__num { position: absolute; top: 1.25rem; right: 1.5rem; z-index: 5; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); font-weight: 500; } /* Drop inner art-frame — graphic is the card */ .bb-card__art { background: transparent; border: none; padding: 2rem 1.75rem 1rem; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 220px; position: relative; overflow: hidden; } .bb-card__art--small { min-height: 160px; } .bb-card__caption { padding: 0 1.75rem 1.75rem; position: relative; z-index: 4; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1.5rem; margin-top: 0.5rem; } .bb-card__caption h3 { font-family: var(--font-display); font-size: clamp(1.0625rem, 1.55vw, 1.25rem); font-weight: 700; color: var(--ink); margin: 0 0 0.625rem; line-height: 1.3; letter-spacing: -0.01em; } .bb-card__caption p { font-size: 0.875rem; line-height: 1.55; color: var(--ink-body); margin: 0; } .bb-card__caption p em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } /* === SVG ANIM 01 — Funnel of incoming leads (LARGE) === */ .bb-svg-funnel { width: 100%; max-width: 320px; height: auto; aspect-ratio: 4/5; } .bb-svg-funnel .bb-fn-stage { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; } .bb-svg-funnel .bb-fn-label { font-family: var(--font-mono); font-size: 9px; fill: rgba(255, 255, 255, 0.5); letter-spacing: 1.4; text-transform: uppercase; font-weight: 600; } .bb-svg-funnel .bb-fn-num { font-family: 'Poppins', sans-serif; font-weight: 700; fill: #ffffff; } .bb-svg-funnel .bb-fn-num--accent { fill: #D95030; } .bb-svg-funnel .bb-fn-drop { opacity: 0; animation: bb-fn-drop 4s ease-in-out infinite; } .bb-svg-funnel .bb-fn-drop:nth-of-type(2) { animation-delay: 0.4s; } .bb-svg-funnel .bb-fn-drop:nth-of-type(3) { animation-delay: 0.8s; } .bb-svg-funnel .bb-fn-drop:nth-of-type(4) { animation-delay: 1.2s; } @keyframes bb-fn-drop { 0% { opacity: 0; transform: translateY(-12px); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(8px); } } .bb-svg-funnel .bb-fn-pulse { transform-origin: center; animation: bb-fn-pulse 3s ease-in-out infinite; } @keyframes bb-fn-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* === SVG ANIM 02 — Price counter ticks up === */ .bb-svg-price { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; } .bb-svg-price .bb-pr-strike { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; fill: rgba(255, 255, 255, 0.35); text-decoration: line-through; } .bb-svg-price .bb-pr-strike-line { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; } .bb-svg-price .bb-pr-arrow { stroke: #D95030; stroke-width: 2; fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; animation: bb-pr-arrow 4s ease-in-out infinite; } @keyframes bb-pr-arrow { 0% { stroke-dashoffset: 60; } 40% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } .bb-svg-price .bb-pr-main { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 32px; fill: #ffffff; } .bb-svg-price .bb-pr-small { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 10px; fill: rgba(255, 255, 255, 0.5); } .bb-svg-price .bb-pr-pulse { transform-origin: center; animation: bb-fn-pulse 2.5s ease-in-out infinite; } /* === SVG ANIM 03 — Pre-sold meeting (chat-bubbles converge) === */ .bb-svg-presold { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; } .bb-svg-presold .bb-ps-bubble { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; } .bb-svg-presold .bb-ps-bubble--accent { fill: rgba(217, 80, 48, 0.16); stroke: rgba(217, 80, 48, 0.5); } .bb-svg-presold .bb-ps-line { stroke: rgba(255, 255, 255, 0.6); stroke-width: 2; stroke-linecap: round; } .bb-svg-presold .bb-ps-line--accent { stroke: #D95030; } .bb-svg-presold .bb-ps-arrow-l { animation: bb-ps-converge-l 3s ease-in-out infinite; } .bb-svg-presold .bb-ps-arrow-r { animation: bb-ps-converge-r 3s ease-in-out infinite; } @keyframes bb-ps-converge-l { 0%, 100% { transform: translateX(-8px); opacity: 0.6; } 50% { transform: translateX(0); opacity: 1; } } @keyframes bb-ps-converge-r { 0%, 100% { transform: translateX(8px); opacity: 0.6; } 50% { transform: translateX(0); opacity: 1; } } .bb-svg-presold .bb-ps-check { stroke: #D95030; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bb-ps-check 3s ease-in-out infinite; } @keyframes bb-ps-check { 0%, 50% { stroke-dashoffset: 40; } 70%, 100% { stroke-dashoffset: 0; } } .bb-svg-presold .bb-ps-label { font-family: var(--font-mono); font-weight: 600; font-size: 8px; letter-spacing: 1.4; fill: rgba(255, 255, 255, 0.45); text-transform: uppercase; } /* === SVG ANIM 04 — Auto-running clock + tasks (WIDE) === */ .bb-svg-clock { width: 100%; max-width: 460px; height: auto; aspect-ratio: 16/8; } .bb-svg-clock .bb-ck-ring { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 2; } .bb-svg-clock .bb-ck-arc { fill: none; stroke: #D95030; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 220 220; stroke-dashoffset: 220; transform: rotate(-90deg); transform-origin: center; animation: bb-ck-fill 5s ease-in-out infinite; } @keyframes bb-ck-fill { 0%, 100% { stroke-dashoffset: 220; } 50% { stroke-dashoffset: 22; } } .bb-svg-clock .bb-ck-dot { fill: #D95030; animation: bb-ck-dot 5s ease-in-out infinite; transform-origin: 60px 60px; } @keyframes bb-ck-dot { 0% { transform: rotate(0deg) translateX(40px); } 100% { transform: rotate(360deg) translateX(40px); } } .bb-svg-clock .bb-ck-task { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; rx: 4; ry: 4; } .bb-svg-clock .bb-ck-task-fill { fill: rgba(217, 80, 48, 0.5); rx: 4; ry: 4; animation: bb-ck-fill-w 4s ease-in-out infinite; transform-origin: left; } .bb-svg-clock .bb-ck-task-fill:nth-of-type(2) { animation-delay: 0.5s; } .bb-svg-clock .bb-ck-task-fill:nth-of-type(3) { animation-delay: 1s; } @keyframes bb-ck-fill-w { 0%, 100% { transform: scaleX(0.1); } 50% { transform: scaleX(1); } } .bb-svg-clock .bb-ck-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; fill: rgba(255, 255, 255, 0.5); letter-spacing: 1.2; text-transform: uppercase; } .bb-svg-clock .bb-ck-time { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; fill: #ffffff; } /* === SVG ANIM 05 — Standout bar (WIDE) === */ .bb-svg-standout { width: 100%; max-width: 460px; height: auto; aspect-ratio: 16/8; } .bb-svg-standout .bb-so-bar { fill: rgba(255, 255, 255, 0.18); rx: 3; ry: 3; transform-origin: left center; animation: bb-so-pulse 4s ease-in-out infinite; } .bb-svg-standout .bb-so-bar:nth-of-type(2) { animation-delay: 0.15s; } .bb-svg-standout .bb-so-bar:nth-of-type(3) { animation-delay: 0.3s; } .bb-svg-standout .bb-so-bar:nth-of-type(4) { animation-delay: 0.45s; } .bb-svg-standout .bb-so-bar:nth-of-type(5) { animation-delay: 0.6s; } .bb-svg-standout .bb-so-bar--hero { fill: #D95030; animation: bb-so-grow 4s ease-in-out infinite; } @keyframes bb-so-pulse { 0%, 100% { transform: scaleX(0.5); opacity: 0.6; } 50% { transform: scaleX(0.7); opacity: 0.9; } } @keyframes bb-so-grow { 0%, 100% { transform: scaleX(0.5); } 50% { transform: scaleX(1); } } .bb-svg-standout .bb-so-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; fill: rgba(255, 255, 255, 0.5); letter-spacing: 1.2; text-transform: uppercase; } .bb-svg-standout .bb-so-tag { font-family: var(--font-accent); font-style: italic; font-weight: 700; font-size: 11px; fill: #D95030; } /* === SVG ANIM 06 — Infinity renew loop === */ .bb-svg-renew { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; } .bb-svg-renew .bb-rn-loop { fill: none; stroke: #D95030; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 280; stroke-dashoffset: 280; animation: bb-rn-draw 5s ease-in-out infinite; } @keyframes bb-rn-draw { 0% { stroke-dashoffset: 280; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -280; } } .bb-svg-renew .bb-rn-loop--bg { stroke: rgba(255, 255, 255, 0.12); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } .bb-svg-renew .bb-rn-pulse { fill: #D95030; animation: bb-rn-pulse 2.5s ease-in-out infinite; transform-origin: center; } @keyframes bb-rn-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } } .bb-svg-renew .bb-rn-label { font-family: var(--font-mono); font-weight: 600; font-size: 9px; letter-spacing: 1.4; fill: rgba(255, 255, 255, 0.5); text-transform: uppercase; } .bb-svg-renew .bb-rn-stamp { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; fill: #D95030; } /* === Bento V3a — fix Box A height + equalize card row alignment === */ /* Cap Box A funnel height — was too tall */ .bb-card--a .bb-svg-funnel { max-width: 280px; max-height: 360px; width: 100%; height: auto; } .bb-card--a .bb-card__art { padding: 1.5rem 1.5rem 1rem; min-height: 280px; } /* Bento grid: explicit row heights so all cards in a "visual row" align */ .benefits-bento { grid-template-rows: 320px 320px 320px; gap: 1rem; } /* Cards: ensure full-stretch in their grid-track, caption pinned bottom */ .bb-card { height: 100%; display: flex; flex-direction: column; } .bb-card__art { flex: 1 1 auto; min-height: 0; /* allow flex-shrink */ padding: 1.75rem 1.5rem 0.5rem; } .bb-card__caption { flex: 0 0 auto; padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 0; } /* Box A spans 2 rows — taller card needs more breathing in caption */ .bb-card--a .bb-card__caption { padding-top: 1.5rem; } /* Tighten caption typography for consistency */ .bb-card__caption h3 { font-size: clamp(1rem, 1.5vw, 1.1875rem); margin-bottom: 0.5rem; line-height: 1.25; } .bb-card__caption p { font-size: 0.875rem; line-height: 1.5; /* show full body — no clamp, copy must render verbatim */ display: block; overflow: visible; } /* Resize SVGs to fit cleanly in the new card heights */ .bb-svg-funnel { aspect-ratio: 4/4.5; max-height: 340px; } .bb-svg-price { aspect-ratio: 4/3; max-height: 160px; } .bb-svg-presold { aspect-ratio: 4/3.2; max-height: 170px; } .bb-svg-clock { aspect-ratio: 16/7; max-height: 200px; } .bb-svg-standout { aspect-ratio: 16/7; max-height: 200px; } .bb-svg-renew { aspect-ratio: 4/3.2; max-height: 170px; } @media (max-width: 1100px) { .benefits-bento { grid-template-rows: auto; } .bb-card__caption p { -webkit-line-clamp: unset; } } /* === Section 04 — match other sections (pure black bg) + keep colored ambient glows === */ .section--benefits-bento { background: var(--bg-0); /* #000000 — same as Hero, Problem, etc. */ } .section--benefits-bento::before { background: radial-gradient(ellipse at 15% 25%, rgba(217, 80, 48, 0.16) 0%, transparent 55%), radial-gradient(ellipse at 85% 70%, rgba(217, 80, 48, 0.13) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(240, 138, 88, 0.06) 0%, transparent 50%); z-index: 0; } /* === Section 04 — smooth glow fade so it doesn't hard-cut at section borders === */ .section--benefits-bento::before { background: radial-gradient(ellipse 800px 600px at 25% 50%, rgba(217, 80, 48, 0.16) 0%, transparent 70%), radial-gradient(ellipse 900px 700px at 80% 60%, rgba(217, 80, 48, 0.12) 0%, transparent 70%); /* Fade glow softly at top + bottom edges so it bleeds smoothly into neighbouring sections */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); } /* ========================================================================= SECTION 05 — LEISTUNGEN TABS (Stage left + Tab-list right) Per wireframe image #15 — premium dark, Coral active state, animated SVG ========================================================================= */ .section--leistungen-tabs { background: var(--bg-0); padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } .section--leistungen-tabs::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 900px 700px at 80% 30%, rgba(217, 80, 48, 0.16) 0%, transparent 70%), radial-gradient(ellipse 800px 600px at 20% 75%, rgba(217, 80, 48, 0.12) 0%, transparent 70%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); pointer-events: none; z-index: 0; } .section--leistungen-tabs .container { position: relative; z-index: 2; } .leist-tabs__header { text-align: center; margin: 0 auto 4rem; max-width: none; } .leist-tabs__pre { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.42em 0.95em; border: 1px solid rgba(217, 80, 48, 0.32); border-radius: 999px; background: rgba(217, 80, 48, 0.06); color: var(--accent); font-size: 0.6875rem; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; margin: 0 auto 1.5rem; } .leist-tabs__pre::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .leist-tabs__headline { font-family: var(--font-display); font-size: clamp(1.875rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); margin: 0 auto 1.25rem; } .leist-tabs__headline em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .leist-tabs__sub { font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.6; color: var(--ink-body); margin: 0 auto; max-width: 64ch; } /* === Tabs Layout === */ .leist-tabs { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 4vw, 4rem); align-items: stretch; margin-bottom: 3rem; min-height: 720px; } /* === Stage (left) === */ .leist-tabs__stage { position: sticky; top: 110px; align-self: start; border-radius: 18px; overflow: hidden; background: linear-gradient(155deg, #18181B 0%, #0E0E11 100%); border: 1px solid rgba(255, 255, 255, 0.08); aspect-ratio: 16 / 11; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 32px 80px -24px rgba(0, 0, 0, 0.85); } .leist-stage { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(0.98); transition: opacity 480ms var(--ease-emil), transform 600ms var(--ease-emil), visibility 0s linear 480ms; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .leist-stage[data-active] { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 480ms var(--ease-emil), transform 600ms var(--ease-emil), visibility 0s linear 0s; } .leist-stage svg { width: 100%; height: 100%; max-height: 100%; } .leist-stage__tag { position: absolute; bottom: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); font-weight: 600; } .leist-stage__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(217, 80, 48, 0.25); } /* === Stage Animations === */ @keyframes leist-cursor-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -4px); } } .leist-anim-cursor { animation: leist-cursor-bob 2.4s ease-in-out infinite; transform-origin: center; } .leist-anim-pulse { animation: leist-pulse 2.4s ease-in-out infinite; transform-origin: center; } @keyframes leist-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .leist-anim-pulse-ring { animation: leist-pulse-ring 2.4s ease-in-out infinite; } @keyframes leist-pulse-ring { 0%, 100% { filter: drop-shadow(0 0 0px rgba(217,80,48,0.6)); } 50% { filter: drop-shadow(0 0 14px rgba(217,80,48,0.6)); } } .leist-anim-progress { animation: leist-progress 4s ease-in-out infinite; } @keyframes leist-progress { 0% { stroke-dasharray: 0 400; } 60% { stroke-dasharray: 300 100; } 100% { stroke-dasharray: 300 100; } } .leist-anim-line { animation: leist-line-draw 1.2s ease-out forwards; transform-origin: left; } @keyframes leist-line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } .leist-anim-cta { animation: leist-cta-pulse 2.4s ease-in-out infinite; } @keyframes leist-cta-pulse { 0%, 100% { filter: drop-shadow(0 0 0px rgba(217,80,48,0.6)); } 50% { filter: drop-shadow(0 0 16px rgba(217,80,48,0.7)); } } .leist-anim-dash { animation: leist-dash-flow 1.2s linear infinite; } @keyframes leist-dash-flow { to { stroke-dashoffset: -14; } } /* === Tab list === */ .leist-tabs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); } .leist-tabs__list li { margin: 0; } .leist-tab { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; padding: 1.25rem 1.5rem; background: transparent; border: 0; border-left: 2px solid transparent; margin-left: -1px; text-align: left; cursor: pointer; color: var(--ink-mute); transition: color 320ms var(--ease-emil), border-color 320ms var(--ease-emil), background 320ms var(--ease-emil); font: inherit; } .leist-tab:hover { background: rgba(255, 255, 255, 0.025); color: var(--ink-body); } .leist-tab.is-active { border-left-color: var(--accent); color: var(--ink); background: linear-gradient(to right, rgba(217, 80, 48, 0.08), transparent 60%); } .leist-tab__num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-mute); padding-top: 0.15em; } .leist-tab.is-active .leist-tab__num { color: var(--accent); } .leist-tab__body { display: flex; flex-direction: column; gap: 0.4rem; } .leist-tab__title { font-family: var(--font-display); font-size: clamp(1.0625rem, 1.55vw, 1.25rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); transition: color 320ms ease; } .leist-tab:not(.is-active) .leist-tab__title { color: rgba(255, 255, 255, 0.55); } .leist-tab.is-active .leist-tab__title { color: var(--ink); } .leist-tab__desc { font-size: 0.875rem; line-height: 1.55; color: var(--ink-body); display: none; opacity: 0; transition: opacity 320ms ease; } .leist-tab__desc em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } .leist-tab.is-active .leist-tab__desc { display: block; opacity: 1; } .leist-tabs__cta { display: flex; justify-content: center; margin-top: 2.5rem; } @media (max-width: 960px) { .leist-tabs { grid-template-columns: 1fr; gap: 2rem; } .leist-tabs__stage { position: static; aspect-ratio: 16/11; } .leist-tabs__list { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); } .leist-tab { border-left: none; border-top: 2px solid transparent; margin-left: 0; margin-top: -1px; } .leist-tab.is-active { border-left-color: transparent; border-top-color: var(--accent); background: rgba(217,80,48,0.06); } } /* === Tab progress-bar (active-tab fill animates 0→100% over 6s) === */ .leist-tab__progress { display: none; position: relative; width: 100%; height: 2px; margin-top: 0.875rem; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; } .leist-tab.is-active .leist-tab__progress { display: block; } .leist-tab__progress-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: linear-gradient(to right, var(--accent), #F08A58); border-radius: 2px; animation: leist-progress-fill 6000ms linear forwards; } @keyframes leist-progress-fill { from { width: 0%; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .leist-tab__progress-fill { animation: none; width: 100%; } } /* === Section 05 v2 — Stage with art-top + text-bottom inside the card; tabs right = title only === */ /* Make stage card layout: art on top, text below */ .leist-tabs__stage { aspect-ratio: auto; min-height: 540px; display: block; position: sticky; top: 110px; } .leist-stage { display: grid; grid-template-rows: 1fr auto; padding: 0; align-items: stretch; justify-items: stretch; } .leist-stage[data-active] { display: grid; } .leist-stage:not([data-active]) { display: none; } .leist-stage__art { position: relative; padding: 1.75rem 1.5rem 1rem; display: flex; align-items: center; justify-content: center; min-height: 320px; } .leist-stage__art svg { width: 100%; height: 100%; max-height: 360px; } .leist-stage__text { padding: 1.25rem 1.75rem 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 0.625rem; } .leist-stage__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .leist-stage__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin: 0; } .leist-stage__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-body); margin: 0; } .leist-stage__desc em { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--accent); } /* Tab list right — titles only (descriptions removed from markup) */ .leist-tab__title { color: var(--ink) !important; } .leist-tab:not(.is-active) .leist-tab__title { color: rgba(255, 255, 255, 0.55) !important; } .leist-tab.is-active .leist-tab__title { color: var(--ink) !important; } /* === Section 05 — fix bottom padding cramping in stage text === */ .leist-stage { /* Don't fix card height — let content breathe */ min-height: 540px; height: auto; } .leist-tabs__stage { min-height: 0; align-self: start; } .leist-stage__text { padding: 1.5rem 2rem 2.25rem; /* was 1.75rem bottom → 2.25rem */ flex: 0 0 auto; } .leist-stage__art { min-height: 280px; padding: 2rem 1.75rem 1.25rem; } .leist-stage__desc { margin-bottom: 0.25rem; /* breathing space below last line */ } /* === Section 05 — stage card with reduced art height for compact section. Lower min-height (680) + tighter art keeps panel + stage shorter. */ .leist-tabs__stage { position: sticky; top: 110px; align-self: stretch; border-radius: 18px; overflow: hidden; background: linear-gradient(155deg, #18181B 0%, #0E0E11 100%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 32px 80px -24px rgba(0, 0, 0, 0.85); min-height: 720px; display: block; } .leist-stage { position: relative !important; /* override earlier absolute */ inset: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none; display: none; flex-direction: column; height: auto; width: 100%; } .leist-stage[data-active] { display: flex; height: 100%; min-height: 720px; } /* Art grows to fill any extra row space, but with a smaller max-height so the section stays compact. */ .leist-stage__art { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1.5rem 1rem; min-height: 200px; } .leist-stage__art svg { width: 100%; max-width: 380px; height: auto; max-height: 220px; } .leist-stage__text { flex: 0 0 auto; padding: 1.5rem 2rem 2.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 0.625rem; } /* ========================================================================= SECTION 01 — HERO REWRITE (full-bleed photo + L→R black gradient) Overrides earlier hero rules. Layout: text left half, photo full-bleed, gradient cuts from black on left to transparent on right so Niki shows. ========================================================================= */ .section--hero.hero--bleed { padding-top: clamp(6rem, 11vh, 8rem); padding-bottom: clamp(4rem, 7vw, 5.5rem); position: relative; overflow: hidden; text-align: left; min-height: clamp(620px, 75vh, 780px); background: #000000; } /* image lives ONLY in the right ~58% of the section. Left ~42% is solid black (text safe zone). Mask blends image's left edge into the black. */ .hero--bleed .hero__bg { position: absolute; top: 0 !important; bottom: 0 !important; right: 0 !important; left: 38% !important; width: auto !important; z-index: 0; pointer-events: none; overflow: hidden; background: #000000; } /* kill the older grain pseudo so the image stays clean */ .hero--bleed .hero__bg::before { display: none !important; content: none !important; } .hero--bleed .hero__bg::after { display: none !important; content: none !important; } .hero--bleed .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 28%; transform: none; /* hero-duo.jpg (1920×1080, 16:9). Image fills the right-58% bg region. object-position centers the duo (founders sit at source x 550-1500 of 1920, i.e. roughly 30-78% of source width). Mask fades the left edge into the black text area for a clean photo-on-black look. */ filter: contrast(1.05) saturate(0.96) brightness(1.0); -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 6%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 6%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 100%); } /* L→R black gradient — covers entire viewport width, smoother feather curve. Solid black through the full text column, long fade into the photo. */ .hero--bleed .hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* No overlay needed — the bg-image lives only in the right 58% of the section, left 42% is already solid black for text. Use a soft right-side vignette so founders blend with the dark studio backdrop. */ background: linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 72%, rgba(0,0,0,0.18) 100% ); } /* tiny bottom vignette so section→next blends without a seam */ .hero--bleed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000000 100%); } /* push red ambient glow to right side, blend with photo */ .hero--bleed .hero__bg-glow { position: absolute; top: 50%; left: auto; right: -12%; transform: translateY(-50%); width: clamp(720px, 70vw, 1080px); height: 720px; background: var(--grad-red-glow); opacity: 0.18; mix-blend-mode: screen; pointer-events: none; z-index: 2; } /* split grid → text occupies LEFT half, right half is photo "stage" */ .hero--bleed .hero__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; position: relative; z-index: 3; max-width: 1320px; min-height: clamp(520px, 70vh, 700px); } .hero--bleed .hero__text { max-width: 620px; } /* ensure text content sits crisp on top of gradient */ .hero--bleed .hero__pre, .hero--bleed .hero__headline, .hero--bleed .hero__deck, .hero--bleed .hero__sub, .hero--bleed .hero__bullets, .hero--bleed .hero__cta-row { position: relative; z-index: 4; } /* old right-column card markup is gone, but defend in case */ .hero--bleed .hero__media, .hero--bleed .hero__photo-frame, .hero--bleed .hero__photo-glow, .hero--bleed .hero__photo-tag { display: none !important; } /* Founder pill — floats bottom-right of section, on top of photo */ .hero__founder-tag { position: absolute; bottom: clamp(1.25rem, 2.5vw, 2.25rem); right: clamp(1.25rem, 3vw, 2.5rem); z-index: 5; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.55rem 0.95rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.92); pointer-events: auto; } .hero__founder-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(217, 80, 48, 0.18); animation: hero-tag-pulse 2s ease-in-out infinite; } /* === MOBILE — stronger overlay so text wins, image still subtly visible === */ @media (max-width: 960px) { .section--hero.hero--bleed { min-height: 640px; padding-top: clamp(6rem, 11vh, 8rem); padding-bottom: clamp(4rem, 8vw, 5rem); } .hero--bleed .hero__split { grid-template-columns: 1fr; min-height: auto; align-items: start; } .hero--bleed .hero__bg img { height: 105%; right: -8%; /* shift further off-screen on mobile */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,1) 60%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 30%, rgba(0,0,0,1) 60%); } /* mobile: heavier full-area dark overlay so text wins, photo subtly visible */ .hero--bleed .hero__overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 55%, rgba(0,0,0,0.62) 100%), linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%); } .hero--bleed .hero__bg-glow { opacity: 0.22; } .hero__founder-tag { bottom: 1rem; right: 1rem; font-size: 0.6875rem; padding: 0.45rem 0.8rem; } } @media (max-width: 560px) { .hero__founder-tag { display: none; } } /* ========================================================================= SECTION 03 — Problem Stories (IG-Story Carousel) 3 portrait 9:16 cards, full-bleed photo, story progress bars, question sticker overlay, answer text, IG-style footer. ========================================================================= */ .section--problem-stories { background: #000000; position: relative; padding-block: clamp(5rem, 9vw, 7rem); overflow: hidden; } .problem-stories__header { text-align: center; max-width: 1180px; /* full content width — match cs-stories */ margin: 0 auto clamp(2.5rem, 4vw, 4rem); padding-inline: clamp(0.5rem, 2vw, 1.5rem); } .problem-stories__header .section__pre { margin-bottom: 1.25rem; } .problem-stories__header .section__headline { font-size: clamp(1.875rem, 3.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.024em; max-width: none; /* full container width — 3-line fit */ width: 100%; margin-left: auto; margin-right: auto; text-wrap: balance; } .problem-stories__header .section__sub { max-width: 760px; margin-left: auto; margin-right: auto; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; } /* Stories grid */ .cs-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); max-width: 1180px; margin: 0 auto; } /* === Single Story Card === */ .cs-story { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #0a0a0a; isolation: isolate; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 32px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(217, 80, 48, 0) inset; transition: transform 380ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 380ms cubic-bezier(0.23, 1, 0.32, 1), border-color 380ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-story:hover { transform: translateY(-4px) scale(1.012); border-color: rgba(217, 80, 48, 0.32); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 40px 100px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(217, 80, 48, 0.18) inset, 0 0 80px -10px rgba(217, 80, 48, 0.32); } /* Background image */ .cs-story__bg { position: absolute; inset: 0; z-index: 0; } .cs-story__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1200ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-story:hover .cs-story__bg img { transform: scale(1.05); } /* Top + bottom shade for legibility */ .cs-story__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.32) 14%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.92) 100%); } /* Top progress bars (IG-Story signature) - .is-done: bar fully filled (slide already shown) - .is-active: bar with running fill animation (current slide) - default: empty bar (pending slide) */ .cs-story__progress { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 5; display: flex; gap: 4px; } .cs-story__bar { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.32); overflow: hidden; position: relative; } .cs-story__bar-fill { display: block; height: 100%; width: 0%; background: rgba(255, 255, 255, 0.96); border-radius: 2px; } .cs-story__bar.is-done .cs-story__bar-fill { width: 100%; animation: none; } .cs-story__bar.is-active .cs-story__bar-fill { animation: cs-story-progress var(--cs-slide-duration, 6s) linear forwards; } .cs-story__bar:not(.is-done):not(.is-active) .cs-story__bar-fill { width: 0%; animation: none; } @keyframes cs-story-progress { from { width: 0%; } to { width: 100%; } } /* Story header (avatar + author + more) */ .cs-story__head { position: absolute; top: 22px; left: 14px; right: 14px; z-index: 5; display: flex; align-items: center; gap: 10px; color: #FFFFFF; } .cs-story__avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1.5px solid rgba(255, 255, 255, 0.95); background: #FFFFFF; /* white bg matches the avatar logo asset */ display: flex; align-items: center; justify-content: center; } .cs-story__avatar img { width: 86%; height: 86%; object-fit: contain; /* show full horse logo, no crop */ object-position: center; } .cs-story__author-block { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .cs-story__author { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .cs-story__meta { font-size: 0.6875rem; font-weight: 400; line-height: 1.2; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .cs-story__more { font-size: 1.25rem; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.85); flex-shrink: 0; line-height: 0.5; padding-top: 4px; } /* === Slide system — internal slides per card === */ .cs-story__slide { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transform: scale(0.985); transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-story[data-current-slide="0"] .cs-story__slide[data-slide="0"], .cs-story[data-current-slide="1"] .cs-story__slide[data-slide="1"], .cs-story[data-current-slide="2"] .cs-story__slide[data-slide="2"] { opacity: 1; transform: scale(1); pointer-events: auto; } /* === IG Question Sticker — 1:1 official style === Two-tone: dark header bar with "Stell mir eine Frage" white centered, white body with the question in BLACK. No tilt. Single rounded box. */ .cs-story__sticker { position: absolute; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.28); transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1), top 320ms cubic-bezier(0.23, 1, 0.32, 1), left 320ms cubic-bezier(0.23, 1, 0.32, 1), right 320ms cubic-bezier(0.23, 1, 0.32, 1); background: #FFFFFF; /* fallback under transparent gaps */ } .cs-story__sticker--big { left: 16px; right: 16px; top: 72%; transform: translateY(-50%); } .cs-story__sticker--small { left: 18px; right: 18px; top: 86px; transform: scale(0.78); transform-origin: top left; } /* "Stell mir eine Frage" prompt bar — dark header */ .cs-story__sticker-prompt { display: block; background: #2C2C2E; /* IG dark gray */ color: #FFFFFF; font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; text-align: center; padding: 11px 16px 12px; text-transform: none; } /* Question body — white block, black centered text */ .cs-story__sticker-text { background: #FFFFFF; color: #0A0A0A; font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(1rem, 1.2vw, 1.1875rem); font-weight: 500; line-height: 1.28; letter-spacing: -0.01em; margin: 0; padding: 18px 16px 22px; text-align: center; } /* Asker chip lives below the sticker on slide 0 */ .cs-story__sticker-asker { display: none; /* hide — IG sticker doesn't show "asker" inside */ } /* === Answer card — bigger, bolder, crisp readable === */ .cs-story__answer-card { position: absolute; left: 14px; right: 14px; bottom: 60px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 18px 18px 20px; color: #FFFFFF; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); } .cs-story__answer-card--accent { border-color: rgba(217, 80, 48, 0.4); background: linear-gradient(150deg, rgba(0, 0, 0, 0.78) 0%, rgba(46, 14, 9, 0.72) 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 50px -10px rgba(217, 80, 48, 0.42); } .cs-story__answer-card p { margin: 0; font-size: 1rem; line-height: 1.45; color: #FFFFFF; letter-spacing: -0.005em; font-weight: 500; } .cs-story__answer-card strong { color: #FFFFFF; font-weight: 700; } .cs-story__answer-card em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: #FFB39A; } .cs-story__answer-punch { font-size: 1.0625rem !important; font-weight: 600 !important; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* IG-style footer (reply field + heart + send) */ .cs-story__footer { position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 4; display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.92); } .cs-story__reply-mock { flex: 1; font-size: 0.75rem; font-weight: 400; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(4px); } .cs-story__icon-mock { display: inline-flex; flex-shrink: 0; color: rgba(255, 255, 255, 0.92); } /* tap zones (for click-through navigation) */ .cs-story__zone { position: absolute; top: 50px; bottom: 50px; width: 35%; z-index: 6; background: transparent; border: 0; cursor: pointer; appearance: none; } .cs-story__zone--prev { left: 0; } .cs-story__zone--next { right: 0; } .cs-story__zone:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; } /* Active card — slight lift + accent ring so user knows it's the playing one */ .cs-story.is-active { z-index: 2; transform: translateY(-3px); border-color: rgba(217, 80, 48, 0.42); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 44px 100px -20px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(217, 80, 48, 0.32) inset, 0 0 70px -10px rgba(217, 80, 48, 0.42); } /* Quote — centered, symmetric, no left-bar (premium feel) */ .problem-stories__quote { margin: clamp(2.5rem, 4.5vw, 4rem) auto 0; max-width: 760px; padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem); border: 0; background: radial-gradient(ellipse at center, rgba(217, 80, 48, 0.07) 0%, rgba(217, 80, 48, 0) 72%); border-top: 1px solid rgba(217, 80, 48, 0.28); border-bottom: 1px solid rgba(217, 80, 48, 0.28); border-radius: 0; font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.6; color: rgba(255, 255, 255, 0.88); font-style: normal; text-align: center; text-wrap: balance; } .problem-stories__quote em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; color: var(--accent); font-weight: 600; } .problem-stories__cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; } /* Mobile: scroll-snap horizontal carousel */ @media (max-width: 860px) { .cs-stories { grid-template-columns: none; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-inline: 1.25rem; margin-inline: -1.25rem; scrollbar-width: none; } .cs-stories::-webkit-scrollbar { display: none; } .cs-story { flex: 0 0 78%; scroll-snap-align: center; aspect-ratio: 9 / 16; } } @media (max-width: 480px) { .cs-story { flex-basis: 86%; } .cs-story__answer-card { bottom: 56px; padding: 14px 14px 16px; } .cs-story__answer-card p { font-size: 0.9375rem; } .cs-story__answer-punch { font-size: 1rem !important; } } /* ========================================================================= SECTION 04 — BENEFITS · WIREFRAME REWRITE Single-column stacked wide cards with alternating art/content layout. Header full content width (3 lines max), 6 cards stacked, CTA bottom. ========================================================================= */ /* Header — full content width, 3-line max headline */ .benefits-bento__header { text-align: center; max-width: none !important; margin: 0 auto clamp(2.5rem, 4vw, 4rem) !important; padding-inline: clamp(0.5rem, 2vw, 1.5rem); } .benefits-bento__pre { margin-bottom: 1.25rem; } .benefits-bento__headline { font-size: clamp(1.875rem, 3.4vw, 3.25rem) !important; line-height: 1.08 !important; letter-spacing: -0.024em !important; max-width: 1200px !important; width: 100%; margin: 0 auto 1rem !important; text-align: center !important; text-wrap: balance; } .benefits-bento__sub { max-width: 780px !important; margin: 0 auto !important; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; text-align: center; } /* Single-column stacked cards — kill the bento grid */ .benefits-bento { display: flex !important; flex-direction: column !important; gap: clamp(1rem, 1.6vw, 1.5rem) !important; grid-template-columns: none !important; grid-template-rows: none !important; max-width: 1180px; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important; } /* Reset all bento grid placements */ .bb-card--a, .bb-card--b, .bb-card--c, .bb-card--d, .bb-card--e, .bb-card--f { grid-column: auto !important; grid-row: auto !important; } /* Each card = wide horizontal panel */ .bb-card { display: grid !important; grid-template-columns: 380px 1fr !important; gap: clamp(1.5rem, 3vw, 3rem) !important; align-items: center !important; padding: clamp(1.5rem, 2.5vw, 2.25rem) !important; flex-direction: row !important; border-radius: 20px !important; background: linear-gradient(135deg, #0B0B0B 0%, #050505 60%, #0E0E0E 100%) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -25px rgba(0, 0, 0, 0.92) !important; position: relative; isolation: isolate; min-height: 460px; will-change: transform; } /* Coral edge-rule on left — signature accent */ .bb-card::before { content: ''; position: absolute; top: 22px; bottom: 22px; left: 0; width: 3px; background: linear-gradient(180deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%); opacity: 0; transition: opacity 480ms cubic-bezier(0.23, 1, 0.32, 1); border-radius: 0 3px 3px 0; box-shadow: 0 0 12px rgba(217, 80, 48, 0.4); } .bb-card:hover::before { opacity: 1; } .bb-card:hover { transform: translateY(-3px) !important; border-color: rgba(217, 80, 48, 0.32) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 40px 90px -25px rgba(0, 0, 0, 0.95), 0 0 60px -10px rgba(217, 80, 48, 0.32) !important; } /* Alternate art ↔ content (zig-zag rhythm) */ .bb-card:nth-child(even) { grid-template-columns: 1fr 380px !important; } .bb-card:nth-child(even) .bb-card__art { order: 2; } .bb-card:nth-child(even) .bb-card__caption { order: 1; } .bb-card:nth-child(even)::before { left: auto; right: 0; border-radius: 3px 0 0 3px; } /* Number — large editorial in corner */ .bb-card__num { position: absolute; top: 18px; right: 22px; font-family: var(--font-mono, 'JetBrains Mono', monospace) !important; font-size: 0.75rem !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: rgba(255, 255, 255, 0.32) !important; font-weight: 500 !important; z-index: 2; } .bb-card:nth-child(even) .bb-card__num { right: auto; left: 22px; } /* Art panel — fixed width, aspect-controlled, accent-tinted bg */ .bb-card__art { width: 100% !important; aspect-ratio: 4 / 3; min-height: 0 !important; flex: none !important; padding: 1.25rem !important; background: linear-gradient(150deg, rgba(255, 255, 255, 0.04) 0%, rgba(217, 80, 48, 0.05) 60%, rgba(255, 255, 255, 0.01) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; } .bb-card__art--small { aspect-ratio: 4 / 3 !important; min-height: 0 !important; } .bb-card__art svg { width: 100%; height: 100%; } /* Caption — generous typography */ .bb-card__caption { display: flex; flex-direction: column; gap: 0.875rem; } .bb-card__caption h3 { font-family: var(--font-display, 'Poppins', system-ui, sans-serif) !important; font-size: clamp(1.25rem, 2vw, 1.625rem) !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: -0.018em !important; color: #FFFFFF !important; margin: 0 !important; max-width: 28ch; } .bb-card__caption p { font-size: clamp(0.9375rem, 1.05vw, 1rem) !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.78) !important; margin: 0 !important; max-width: 56ch; } .bb-card__caption p em { font-family: var(--font-accent, 'Playfair Display', serif) !important; font-style: italic !important; font-weight: 700 !important; color: var(--accent) !important; } /* CTA — accent button below cards */ .benefits-bento__cta { text-align: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* Mobile — stack art on top of content */ @media (max-width: 860px) { .bb-card, .bb-card:nth-child(even) { grid-template-columns: 1fr !important; gap: 1.25rem !important; padding: 1.5rem !important; } .bb-card:nth-child(even) .bb-card__art { order: 0; } .bb-card:nth-child(even) .bb-card__caption { order: 1; } .bb-card__art { aspect-ratio: 16 / 10 !important; } .bb-card__num { position: static; margin-bottom: 0.25rem; } .bb-card:nth-child(even) .bb-card__num { left: auto; } } /* === BENEFITS — Sticky-Stacking Cards (GSAP-driven) === Each card pins at PIN_OFFSET from viewport top; next card slides over. The .bb-card-stack wrapper holds the pins and scroll length. Z-index layering: later cards sit above earlier (so they cover when stacking). pin-spacer must be transparent so section bg flows through. */ .benefits-bento { position: relative; z-index: 1; } .bb-card { z-index: 10; } .bb-card:nth-child(1) { z-index: 11; } .bb-card:nth-child(2) { z-index: 12; } .bb-card:nth-child(3) { z-index: 13; } .bb-card:nth-child(4) { z-index: 14; } .bb-card:nth-child(5) { z-index: 15; } .bb-card:nth-child(6) { z-index: 16; } /* Pin-spacer fix — prevent stray bg color */ .benefits-bento .pin-spacer { background: transparent !important; } /* When pinned, give a subtle border accent so user sees "this is the active card" */ .bb-card.is-pinned-active { border-color: rgba(217, 80, 48, 0.28) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 36px 80px -25px rgba(0, 0, 0, 0.95), 0 0 60px -10px rgba(217, 80, 48, 0.25) !important; } .bb-card.is-pinned-active::before { opacity: 1 !important; } /* On mobile we DON'T pin — cards stack naturally vertically */ @media (max-width: 860px) { .bb-card { min-height: 0; } } /* === BENEFITS — STACKING GRID (Marcel-Davia Pattern) === All cards live in the SAME grid cell so they overlap. GSAP writes transform per frame to slide each card up into place. */ .benefits-bento { display: grid !important; grid-template: auto / 1fr !important; align-items: start !important; justify-items: stretch !important; /* DON'T pin position: GSAP needs to switch to fixed during pin */ flex-direction: unset !important; gap: 0 !important; margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important; max-width: 1180px; margin-left: auto !important; margin-right: auto !important; } .bb-card { grid-column: 1 / -1 !important; grid-row: 1 !important; align-self: start !important; width: 100% !important; /* keep dark gradient bg fully opaque so prior cards don't bleed through */ background: linear-gradient(135deg, #0B0B0B 0%, #050505 60%, #0E0E0E 100%) !important; transition: none !important; will-change: transform, opacity, filter !important; /* z-index now driven by data-step via JS */ } /* Pin-spacer must show pure black so section bg flows through cleanly */ .benefits-bento .pin-spacer { background: #000000 !important; } /* Initial visual state — only Card 1 shown, others hidden below until JS kicks in */ .bb-card[data-step="2"], .bb-card[data-step="3"], .bb-card[data-step="4"], .bb-card[data-step="5"], .bb-card[data-step="6"] { opacity: 0; transform: translate3d(0, 100vh, 0); } /* On mobile we kill the stacking — cards stack vertically with normal flow */ @media (max-width: 960px) { .benefits-bento { display: flex !important; flex-direction: column !important; gap: 1rem !important; } .bb-card { grid-row: auto !important; transform: none !important; opacity: 1 !important; filter: none !important; } .bb-card[data-step="2"], .bb-card[data-step="3"], .bb-card[data-step="4"], .bb-card[data-step="5"], .bb-card[data-step="6"] { transform: none; opacity: 1; } } /* ========================================================================= SECTION 04 — BENEFITS · RELUME-STYLE PURE CSS STICKY STACKING Each card is position:sticky at top: ~nav-offset, height: 78vh, margin-bottom: 4vh. Cards stack naturally because later DOM = higher z-index by default. No JS, no GSAP, no ScrollTrigger — works native in all browsers. These rules override all earlier grid-stack/multi-pin attempts. ========================================================================= */ .section--benefits-bento { overflow: visible !important; } .section--benefits-bento .container { overflow: visible !important; } .benefits-bento { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-items: stretch !important; gap: 0 !important; grid-template: none !important; grid-template-columns: none !important; grid-template-rows: none !important; position: relative !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important; /* CRITICAL: don't allow overflow clipping or sticky breaks */ overflow: visible !important; } .bb-card, .bb-card[data-step] { /* RESET all prior override attempts */ position: relative !important; grid-row: auto !important; grid-column: auto !important; align-self: auto !important; transform: none !important; opacity: 1 !important; filter: none !important; margin: 0 !important; z-index: auto !important; width: 100% !important; will-change: auto !important; } /* Mobile sticky-stacking — same Relume-Pattern wie Desktop, nur an Mobile-Nav und Viewport angepasst. Cards stapeln sich beim Scrollen aufeinander. Wichtig: alle Vorfahren von .bb-card (.section--benefits-bento, .container, .benefits-bento) sind weiter oben auf overflow:visible gesetzt — sticky würde sonst killen. */ @media (max-width: 960px) { .bb-card, .bb-card[data-step] { position: sticky !important; /* knapp unter der mobilen Navbar (~56-64px) */ top: 64px !important; /* Card füllt fast den ganzen mobilen Viewport, damit beim Scrollen die nächste Card sauber drüber gleitet */ min-height: clamp(420px, 78vh, 560px) !important; height: auto !important; /* Sichtbarer Abstand zwischen den Cards (sieht man nur kurz, da sich die nächste Card beim Scrollen direkt drüber legt — gibt aber visuelles Atmen) */ margin-bottom: 1.25rem !important; } .bb-card:last-child { margin-bottom: 0 !important; } /* Hover-translate killen → würde sticky-paint flackern */ .bb-card:hover { transform: none !important; } } @media (min-width: 961px) { .bb-card, .bb-card[data-step] { position: sticky !important; /* `top` is set in the later sticky-header block (single source of truth) — removing the duplicate here prevents browser scroll-paint jitter */ height: auto !important; min-height: clamp(360px, 46vh, 420px) !important; margin-bottom: 1.25rem !important; padding: 1.75rem !important; /* art + caption stretch to fill the card height instead of stacking at top */ grid-template-columns: minmax(420px, 44%) 1fr !important; align-items: stretch !important; } .bb-card:last-child { margin-bottom: 0 !important; } .bb-card:nth-child(even) { grid-template-columns: 1fr minmax(420px, 44%) !important; } /* Art panel — bigger, fills the full card height (no aspect-ratio cap) */ .bb-card__art { aspect-ratio: auto !important; max-height: none !important; min-height: 280px !important; height: 100% !important; padding: 1.5rem !important; } .bb-card__art svg { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; } /* Caption stretches & centers vertically next to the bigger art panel */ .bb-card__caption { align-self: center !important; gap: 0.875rem !important; padding-block: 0.5rem; } .bb-card__caption h3 { font-size: clamp(1.625rem, 2.4vw, 2.125rem) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; } .bb-card__caption p { font-size: clamp(0.9375rem, 1.1vw, 1.0625rem) !important; line-height: 1.6 !important; } /* hairline accent under each card title — adds editorial richness */ .bb-card__caption h3::after { content: ''; display: block; width: 36px; height: 2px; margin-top: 0.875rem; background: var(--accent); border-radius: 2px; } } /* Hover effect calmer for stickyly-pinned cards */ .bb-card:hover { transform: none !important; border-color: rgba(217, 80, 48, 0.32) !important; } /* ========================================================================= SECTION 05 — LEISTUNGEN BENTO (7-up Wireframe) Layout: ┌──────────┬────────┬────────┐ │ │ small1 │ small2 │ │ BIG ├────────┼────────┤ │ (01) │ small3 │ small4 │ ├──────────┴────┬───┴────────┤ │ wide1 (06) │ wide2 (07)│ └───────────────┴────────────┘ ========================================================================= */ .section--leistungen-bento { background: #000000; padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } .cs-bento__header { text-align: center; max-width: 1100px; margin: 0 auto clamp(2.5rem, 4vw, 4rem); padding-inline: clamp(0.5rem, 2vw, 1.5rem); } .cs-bento__header .section__pre { margin-bottom: 1.25rem; } .cs-bento__header .section__headline { font-size: clamp(1.875rem, 3.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.024em; text-wrap: balance; max-width: 1080px; margin: 0 auto 1rem; } .cs-bento__header .section__sub { max-width: 780px; margin: 0 auto; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; } /* Bento grid */ .cs-bento { max-width: 1180px; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); display: grid; gap: clamp(0.875rem, 1.4vw, 1.25rem); /* 12-col grid: gives Card 1 enough width that its long body wraps to a similar height as the 25% smalls beside it. Card 5 visibly wider than Card 4. Card 6+7 equal halves. Row 1: big(6) | small1(3) | small2(3) Row 2: small3(4) | small4(8 — wider) Row 3: wide1(6) | wide2(6) — equal halves */ grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "big big big big big small1 small1 small1 small1 small2 small2 small2" "small3 small3 small3 small3 small3 small3 small4 small4 small4 small4 small4 small4" "wide1 wide1 wide1 wide1 wide1 wide1 wide2 wide2 wide2 wide2 wide2 wide2"; } /* Art flex-grow: when a card's body is shorter than its row's max height, art container grows to fill — keeps cards visually tight (no empty gap below copy). SVG stays centered at its max-height. */ .cs-bento__card--small1 .cs-bento__art, .cs-bento__card--small2 .cs-bento__art, .cs-bento__card--small3 .cs-bento__art, .cs-bento__card--small4 .cs-bento__art, .cs-bento__card--wide1 .cs-bento__art, .cs-bento__card--wide2 .cs-bento__art, .cs-bento__card--big .cs-bento__art { flex: 1 1 auto !important; } /* Reset: ALL cards are vertical-stack (art on top, copy below) for a unified look. Override the previous wide-card grid/row hacks. */ .cs-bento__card--big, .cs-bento__card--small1, .cs-bento__card--small2, .cs-bento__card--small3, .cs-bento__card--small4, .cs-bento__card--wide1, .cs-bento__card--wide2 { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; max-height: none !important; } .cs-bento__card--wide1 .cs-bento__copy, .cs-bento__card--wide2 .cs-bento__copy { display: block !important; align-self: stretch !important; } .cs-bento__card--wide1 .cs-bento__num, .cs-bento__card--wide2 .cs-bento__num { position: static !important; top: auto !important; right: auto !important; margin-bottom: 0.875rem !important; } /* Art heights — uniform per card type so SVGs are always clearly visible and never collapse flat from long copy. */ /* All art blocks: identical fixed height across every card → copy starts at the same Y position. SVG fills container width (height auto), so it's as large as possible without distorting aspect. */ .cs-bento__card .cs-bento__art { flex: 0 0 auto !important; height: 260px !important; min-height: 260px !important; max-height: 260px !important; margin-bottom: 1rem !important; padding: 0.5rem !important; overflow: visible !important; } .cs-bento__card .cs-bento__art svg { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; display: block; } .cs-bento__card .cs-bento__copy { flex: 0 0 auto !important; } /* Bigger, more legible copy in small cards (2-5) */ .cs-bento__card--small1 .cs-bento__title, .cs-bento__card--small2 .cs-bento__title, .cs-bento__card--small3 .cs-bento__title, .cs-bento__card--small4 .cs-bento__title { font-size: clamp(1rem, 1.15vw, 1.125rem) !important; line-height: 1.25 !important; } .cs-bento__card--small1 .cs-bento__desc, .cs-bento__card--small2 .cs-bento__desc, .cs-bento__card--small3 .cs-bento__desc, .cs-bento__card--small4 .cs-bento__desc { font-size: 1rem !important; line-height: 1.55 !important; } .cs-bento__card--big { grid-area: big; } .cs-bento__card--small1 { grid-area: small1; } .cs-bento__card--small2 { grid-area: small2; } .cs-bento__card--small3 { grid-area: small3; } .cs-bento__card--small4 { grid-area: small4; } .cs-bento__card--wide1 { grid-area: wide1; } .cs-bento__card--wide2 { grid-area: wide2; } /* Card base */ .cs-bento__card { position: relative; display: flex; flex-direction: column; background: linear-gradient(135deg, #0B0B0B 0%, #050505 60%, #0E0E0E 100%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 1.5rem; overflow: hidden; isolation: isolate; transition: transform 380ms cubic-bezier(0.23, 1, 0.32, 1), border-color 380ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 380ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-bento__card:hover { transform: translateY(-3px); border-color: rgba(217, 80, 48, 0.32); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 60px -10px rgba(217, 80, 48, 0.32); } /* coral edge-rule */ .cs-bento__card::before { content: ''; position: absolute; top: 18px; bottom: 18px; left: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity 380ms cubic-bezier(0.23, 1, 0.32, 1); border-radius: 0 2px 2px 0; box-shadow: 0 0 10px rgba(217, 80, 48, 0.4); } .cs-bento__card:hover::before { opacity: 1; } .cs-bento__num { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 0.875rem; font-weight: 500; } .cs-bento__art { position: relative; background: linear-gradient(150deg, rgba(255, 255, 255, 0.04) 0%, rgba(217, 80, 48, 0.05) 60%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 1rem; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; margin-bottom: 1rem; } .cs-bento__art svg { width: 100%; height: 100%; max-height: 280px; } .cs-bento__art--mini { padding: 0.625rem; } .cs-bento__art--mini svg { max-height: 110px; } .cs-bento__copy { flex: 0 0 auto; } .cs-bento__title { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.012em; color: #FFFFFF; margin: 0 0 0.5rem; } .cs-bento__desc { font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.74); margin: 0; } .cs-bento__desc em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: var(--accent); } /* Big card — bigger title, more art space */ .cs-bento__card--big .cs-bento__title { font-size: clamp(1.375rem, 1.9vw, 1.75rem); } .cs-bento__card--big .cs-bento__desc { font-size: 0.9375rem; } .cs-bento__card--big .cs-bento__art { min-height: 280px; } /* Wide cards — horizontal layout (art-left, copy-right) */ .cs-bento__card--wide1, .cs-bento__card--wide2 { display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; align-items: stretch; } .cs-bento__card--wide1 .cs-bento__num, .cs-bento__card--wide2 .cs-bento__num { position: absolute; top: 1.25rem; right: 1.5rem; margin: 0; } .cs-bento__card--wide1 .cs-bento__art, .cs-bento__card--wide2 .cs-bento__art { margin-bottom: 0; min-height: 0; } .cs-bento__card--wide1 .cs-bento__copy, .cs-bento__card--wide2 .cs-bento__copy { display: flex; flex-direction: column; justify-content: center; } .cs-bento__card--wide1 .cs-bento__title, .cs-bento__card--wide2 .cs-bento__title { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); } /* Small cards — compact */ .cs-bento__card--small1 .cs-bento__art, .cs-bento__card--small2 .cs-bento__art, .cs-bento__card--small3 .cs-bento__art, .cs-bento__card--small4 .cs-bento__art { min-height: 0; flex: 1; } .cs-bento__card--small1 .cs-bento__title, .cs-bento__card--small2 .cs-bento__title, .cs-bento__card--small3 .cs-bento__title, .cs-bento__card--small4 .cs-bento__title { font-size: 0.9375rem; line-height: 1.25; } .cs-bento__card--small1 .cs-bento__desc, .cs-bento__card--small2 .cs-bento__desc, .cs-bento__card--small3 .cs-bento__desc, .cs-bento__card--small4 .cs-bento__desc { font-size: 0.8125rem; } .cs-bento__cta { text-align: center; margin-top: clamp(2rem, 3.5vw, 3rem); } /* Mobile — stack everything single-column */ @media (max-width: 860px) { .cs-bento { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: none; } .cs-bento__card, .cs-bento__card--big, .cs-bento__card--small1, .cs-bento__card--small2, .cs-bento__card--small3, .cs-bento__card--small4, .cs-bento__card--wide1, .cs-bento__card--wide2 { grid-area: auto; grid-template-columns: 1fr; } .cs-bento__card--wide1, .cs-bento__card--wide2 { display: flex; flex-direction: column; } .cs-bento__card--wide1 .cs-bento__num, .cs-bento__card--wide2 .cs-bento__num { position: static; margin-bottom: 0.875rem; } } /* Mobile sticky-stacking für Leistungen-Bento — gleiche Mechanik wie Section 04. ANCESTOR-FIX: .section--leistungen-bento hat overflow:hidden, was sticky in allen Descendants killt → muss auf mobile auf visible. */ @media (max-width: 860px) { .section--leistungen-bento, .section--leistungen-bento .container, .cs-bento { overflow: visible !important; } .cs-bento { /* Sichtbarer Atem zwischen Cards (sieht man nur kurz beim Scrollen, da nächste Card sich drüber legt) */ gap: 1.25rem !important; } .cs-bento__card, .cs-bento__card--big, .cs-bento__card--small1, .cs-bento__card--small2, .cs-bento__card--small3, .cs-bento__card--small4, .cs-bento__card--wide1, .cs-bento__card--wide2 { position: sticky !important; top: 64px !important; min-height: clamp(420px, 78vh, 560px) !important; height: auto !important; } /* Hover-translate killen → sticky-paint flackerfrei */ .cs-bento__card:hover { transform: none !important; } } /* ========================================================================= SECTION 06 — METHODE TABS (3-step variant of leist-tabs) Override: tabs distributed evenly over full stage height, stage shows first slide on page-load even before JS init kicks in. ========================================================================= */ /* Stage initial state — show first stage even before JS attaches */ .section--methode-tabs .leist-stage:first-child { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; } .section--methode-tabs .leist-stage[data-active]:first-child, .section--methode-tabs .leist-stage[data-active] { opacity: 1; visibility: visible; transform: scale(1); } /* Stage gets a tighter aspect ratio for 3-tab layout — no gap below tabs */ .section--methode-tabs .leist-tabs__stage { aspect-ratio: auto; min-height: 540px; } /* Tab list — distribute 3 tabs evenly over full stage height */ .section--methode-tabs .leist-tabs__list { justify-content: space-between; align-self: stretch; min-height: 560px; flex: 1 1 auto; } .section--methode-tabs .leist-tab { padding: 1.5rem 1.5rem; align-items: center; flex: 1; min-height: 0; } .section--methode-tabs .leist-tabs__list li { display: flex; flex: 1; } .section--methode-tabs .leist-tabs__list li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } @media (max-width: 860px) { .section--methode-tabs .leist-tabs__stage, .section--methode-tabs .leist-tabs__list { min-height: 0; } .section--methode-tabs .leist-tabs__stage { min-height: 420px; } } /* === METHODE TABS — Rich Tab Content (sub-text + time-pill + list head/foot) === */ .section--methode-tabs .leist-tabs__panel { display: flex; flex-direction: column; min-height: 720px; align-self: stretch; } .leist-tabs__list-head { padding: 0 0 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 0.5rem; } .leist-tabs__list-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 0.5rem; } .leist-tabs__list-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--accent); display: inline-block; } .leist-tabs__list-hint { margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); line-height: 1.4; } /* tabs body padding — more breathing room */ .section--methode-tabs .leist-tab { padding: 1.5rem 1.5rem 1.5rem 1.5rem !important; align-items: flex-start !important; } .section--methode-tabs .leist-tab__body { display: flex; flex-direction: column; gap: 0.4rem; } .section--methode-tabs .leist-tab__title { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); font-weight: 700; letter-spacing: -0.012em; line-height: 1.22; } .leist-tab__sub { display: block; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.55); letter-spacing: -0.005em; margin-top: 0.25rem; max-width: 38ch; } .section--methode-tabs .leist-tab.is-active .leist-tab__sub { color: rgba(255, 255, 255, 0.78); } .leist-tab__meta { display: flex; flex-direction: column; /* Time-Pill oben, Progress-Bar darunter */ align-items: flex-start; gap: 0.625rem; margin-top: 0.875rem; width: 100%; } .leist-tab__time { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: none; color: rgba(255, 255, 255, 0.42); padding: 0.3rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.02); flex-shrink: 0; } .leist-tab__time svg { color: var(--accent); } .section--methode-tabs .leist-tab.is-active .leist-tab__time { border-color: rgba(217, 80, 48, 0.3); color: rgba(255, 255, 255, 0.7); background: rgba(217, 80, 48, 0.06); } .section--methode-tabs .leist-tab__meta .leist-tab__progress { width: 100%; flex: 0 0 auto; } /* List footer — small status indicator */ .leist-tabs__list-foot { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem 0; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.6875rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.42); } .leist-tabs__list-foot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(217, 80, 48, 0.2); animation: cs-pulse-dot 2.4s ease-in-out infinite; flex-shrink: 0; } @keyframes cs-pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(217, 80, 48, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(217, 80, 48, 0.05); } } /* ========================================================================= SECTION 06 — METHODE · MOBILE REDESIGN (max-width: 860px) Problem: Tabs lagen UNTER der Stage → Tap-Tab → hochscrollen-Loop. Lösung: Tabs (kompakt) ÜBER die Stage. User sieht Tab + aktiven Card-Inhalt gleichzeitig. Tab-Switch ändert nur die Card direkt darunter — null Scroll. 3 horizontal verteilte Tab-Pills mit "01", Title und Zeitaufwand. ========================================================================= */ @media (max-width: 860px) { /* Tabs-Container in Flex-Column → ermöglicht order-Swap (Panel über Stage) */ .section--methode-tabs .leist-tabs { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 1rem !important; min-height: 0 !important; margin-bottom: clamp(2rem, 4vw, 3rem) !important; } /* DOM: stage zuerst, panel danach — auf Mobile umkehren via order */ .section--methode-tabs .leist-tabs__panel { order: 1 !important; min-height: 0 !important; /* Desktop hat 720px → killt die Kachel */ height: auto !important; } .section--methode-tabs .leist-tabs__stage { order: 2 !important; } /* Tabs-Header (Eyebrow + Hint) verstecken — auf Mobile zu viel Geräusch */ .section--methode-tabs .leist-tabs__list-head { display: none !important; } .section--methode-tabs .leist-tabs__list-foot { display: none !important; } /* Tab-Liste = horizontaler Pill-Row, scrollbar wenn nötig. Optisch wie iOS Highlights/Visual-Arts/Fashion: einzeilige Pills, kompakte Höhe, aktiver Pill solid Coral. Mask-Fade am rechten Rand signalisiert: "da ist noch mehr". */ .section--methode-tabs .leist-tabs__list { display: flex !important; flex-direction: row !important; /* Desktop hat column → killt Pill-Row */ flex-wrap: nowrap !important; gap: 0.5rem !important; border: 0 !important; padding: 0.25rem 1.5rem 0.25rem 0 !important; /* rechts Platz für Fade-Edge */ margin: 0 !important; list-style: none !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x proximity !important; scroll-padding-inline: 1rem !important; /* Fade-Mask rechts: sagt dem Auge "scroll hier weiter" */ -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15) 100%) !important; mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), rgba(0, 0, 0, 0.15) 100%) !important; } .section--methode-tabs .leist-tabs__list::-webkit-scrollbar { display: none !important; } .section--methode-tabs .leist-tabs__list li { margin: 0 !important; flex: 0 0 auto !important; scroll-snap-align: start !important; } /* Scroll-Hint: kreisrunder Coral-Button mit echtem Chevron-Icon, schwebt am rechten Rand der Tab-Row. Pulsiert sanft, blendet sich aus sobald User scrollt. */ .section--methode-tabs .leist-tabs__panel { position: relative !important; } .section--methode-tabs .leist-tabs__panel::after { content: '' !important; position: absolute !important; top: 50% !important; right: -2px !important; width: 28px !important; height: 28px !important; margin-top: -14px !important; border-radius: 999px !important; background: url("data:image/svg+xml;utf8,") center / 14px 14px no-repeat, linear-gradient(135deg, var(--accent) 0%, #F08A58 100%); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55), 0 6px 16px -4px rgba(217, 80, 48, 0.55); pointer-events: none !important; z-index: 3 !important; animation: methode-tab-arrow 1.6s ease-in-out infinite !important; /* Position auf Höhe der Tab-Pills (Liste hat padding-top 0.25rem) — nutzt 50% Mitte des Panels; Panel ist nur die Tab-Liste hoch (Heading aus). */ transform-origin: center; } /* Sobald die Liste manuell gescrollt wurde → Pfeil ausblenden */ .section--methode-tabs .leist-tabs__panel.is-tabs-scrolled::after { opacity: 0 !important; transform: scale(0.6) !important; transition: opacity 320ms ease-out, transform 320ms ease-out !important; } /* Pill-Tab — kompakt einzeilig: nur "01 Kickoff und Marktanalyse" */ .section--methode-tabs .leist-tab { display: inline-flex !important; align-items: center !important; flex-direction: row !important; gap: 0.45rem !important; width: auto !important; height: 38px !important; padding: 0 0.95rem !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-left: 1px solid rgba(255, 255, 255, 0.10) !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 999px !important; margin: 0 !important; text-align: left !important; white-space: nowrap !important; transition: background 220ms var(--ease-emil), border-color 220ms var(--ease-emil), color 220ms var(--ease-emil) !important; grid-template-columns: none !important; color: rgba(255, 255, 255, 0.7) !important; } .section--methode-tabs .leist-tab.is-active { background: var(--accent) !important; border-color: var(--accent) !important; border-top-color: var(--accent) !important; border-left-color: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 18px -6px rgba(217, 80, 48, 0.55) !important; } .section--methode-tabs .leist-tab__num { font-size: 0.6875rem !important; color: inherit !important; opacity: 0.7 !important; letter-spacing: 0.08em !important; margin: 0 !important; line-height: 1 !important; } .section--methode-tabs .leist-tab.is-active .leist-tab__num { color: #fff !important; opacity: 0.85 !important; } .section--methode-tabs .leist-tab__body { display: inline-flex !important; flex-direction: row !important; gap: 0 !important; width: auto !important; } .section--methode-tabs .leist-tab__title { font-size: 0.8125rem !important; line-height: 1 !important; font-weight: 600 !important; color: inherit !important; } .section--methode-tabs .leist-tab.is-active .leist-tab__title { color: #fff !important; } /* Pill ist NUR Title — Sub, Zeitaufwand, Meta, Progress alle weg. Zeitaufwand sitzt unter dem Eyebrow IN der Stage-Card. */ .section--methode-tabs .leist-tab__sub, .section--methode-tabs .leist-tab__meta, .section--methode-tabs .leist-tab__time, .section--methode-tabs .leist-tab__progress { display: none !important; } /* Stage = Single-Card mit Active-Step Content. Original Tab-Logik bleibt: nur [data-active] sichtbar. */ .section--methode-tabs .leist-tabs__stage { position: static !important; top: auto !important; aspect-ratio: auto !important; min-height: 0 !important; height: auto !important; align-self: stretch !important; background: linear-gradient(155deg, #18181B 0%, #0E0E11 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 32px 80px -24px rgba(0, 0, 0, 0.85) !important; overflow: hidden !important; display: block !important; padding: 0 !important; } .section--methode-tabs .leist-stage:not([data-active]) { display: none !important; } .section--methode-tabs .leist-stage[data-active] { display: flex !important; flex-direction: column !important; position: relative !important; inset: auto !important; grid-template-rows: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; } /* Art kompakt oben */ .section--methode-tabs .leist-stage__art { flex: 0 0 auto !important; min-height: 180px !important; height: 200px !important; max-height: 220px !important; padding: 1.25rem 1.25rem 0.5rem !important; } .section--methode-tabs .leist-stage__art svg { width: 100% !important; height: 100% !important; max-height: 100% !important; display: block; } .section--methode-tabs .leist-stage__text { padding: 1rem 1.5rem 1.75rem !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; gap: 0.5rem !important; flex: 1 1 auto !important; } .section--methode-tabs .leist-stage__num { color: var(--accent) !important; font-size: 0.6875rem !important; letter-spacing: 0.18em !important; } .section--methode-tabs .leist-stage__title { font-size: 1.25rem !important; line-height: 1.2 !important; } .section--methode-tabs .leist-stage__desc { font-size: 0.875rem !important; line-height: 1.55 !important; } } /* Outside @media: @keyframes für die Tab-Pfeil-Animation (Mobile-only-Hint). Keyframes müssen auf Top-Level liegen, damit die animation-property in der Media-Query sie referenzieren kann. */ @keyframes methode-tab-arrow { 0%, 100% { transform: translateX(0); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55), 0 6px 16px -4px rgba(217, 80, 48, 0.45); } 50% { transform: translateX(-5px); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55), 0 8px 22px -4px rgba(217, 80, 48, 0.7); } } /* ========================================================================= SECTION 07 — VERGLEICH · DARK CLEAN REWRITE No blue tint. Pure dark cards matching benefits/methode style. Full-width headline, 3-line max. Bigger icons in circular badges. ========================================================================= */ .section--vergleich { background: #000000; padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } .section--vergleich .section-numeral { display: none !important; } .ba__header { text-align: center; max-width: 1180px; margin: 0 auto clamp(2.5rem, 4vw, 4rem); padding-inline: clamp(0.5rem, 2vw, 1.5rem); } .ba__header .section__pre { margin-bottom: 1.25rem; } .ba__header .section__headline { font-size: clamp(1.875rem, 3.4vw, 3.25rem) !important; line-height: 1.08 !important; letter-spacing: -0.024em !important; max-width: 1180px !important; width: 100%; margin: 0 auto 1rem !important; text-align: center !important; text-wrap: balance; } .ba__header .section__sub { max-width: 780px !important; margin: 0 auto !important; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); text-align: center; } /* Grid — 2 cols, separated cards (not joined) */ .section--vergleich .ba__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(1rem, 2vw, 1.75rem) !important; max-width: 1180px; margin: 0 auto; border: none !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; } /* Cards — pure dark, no blue */ .section--vergleich .ba__col { background: linear-gradient(135deg, #0B0B0B 0%, #050505 60%, #0E0E0E 100%) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 18px !important; padding: clamp(1.75rem, 2.5vw, 2.5rem) !important; position: relative; overflow: hidden; isolation: isolate; transition: transform 380ms cubic-bezier(0.23, 1, 0.32, 1), border-color 380ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 380ms cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -25px rgba(0, 0, 0, 0.85); } .section--vergleich .ba__col::before, .section--vergleich .ba__col::after { content: none !important; } .section--vergleich .ba__col:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.14) !important; } /* Good col — accent ring + glow */ .section--vergleich .ba__col--good { border-color: rgba(217, 80, 48, 0.28) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(217, 80, 48, 0.1) inset, 0 30px 70px -25px rgba(0, 0, 0, 0.9), 0 0 60px -15px rgba(217, 80, 48, 0.22) !important; } .section--vergleich .ba__col--good:hover { border-color: rgba(217, 80, 48, 0.5) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(217, 80, 48, 0.18) inset, 0 36px 80px -25px rgba(0, 0, 0, 0.95), 0 0 80px -10px rgba(217, 80, 48, 0.4) !important; } /* Card header */ .ba__col-head { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ba__col-eyebrow { display: inline-block; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 0.5rem; font-weight: 600; } .ba__col-eyebrow--good { color: var(--accent); } .section--vergleich .ba__col-title { font-family: var(--font-display, 'Poppins', system-ui, sans-serif) !important; font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: -0.018em !important; margin: 0 !important; color: rgba(255, 255, 255, 0.86) !important; } .section--vergleich .ba__col--good .ba__col-title { color: #FFFFFF !important; } /* Rows */ .section--vergleich .ba__row { display: grid !important; grid-template-columns: auto 1fr !important; gap: 0.875rem !important; align-items: center !important; padding: 0.875rem 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } .section--vergleich .ba__row:first-of-type { border-top: none !important; padding-top: 0 !important; } .section--vergleich .ba__row p { margin: 0 !important; font-size: 0.9375rem !important; line-height: 1.5 !important; } .section--vergleich .ba__col--bad .ba__row p { color: rgba(255, 255, 255, 0.6) !important; } .section--vergleich .ba__col--good .ba__row p { color: rgba(255, 255, 255, 0.92) !important; } .section--vergleich .ba__row p em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 700; color: var(--accent); } /* Icon badges */ .section--vergleich .ba__icon { display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; font-size: 0 !important; } .ba__icon--bad { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.42); } .ba__icon--good { background: rgba(217, 80, 48, 0.16); border: 1px solid rgba(217, 80, 48, 0.45); color: var(--accent); } /* Mobile — single column */ @media (max-width: 860px) { .section--vergleich .ba__grid { grid-template-columns: 1fr !important; } } /* ========================================================================= SECTION 08 — PASSEND · STACKED YES/NO Cards (untereinander, nicht side-by-side) Oben: "Das bist du" mit accent-glow + coral icons. Drunter: "Das bist du nicht" muted/neutral. ========================================================================= */ .section--passend { background: #000000; padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } .section--passend .section-numeral { display: none !important; } .passend__header { text-align: center; max-width: 1180px; margin: 0 auto clamp(2.5rem, 4vw, 4rem); padding-inline: clamp(0.5rem, 2vw, 1.5rem); } .passend__header .section__pre { margin-bottom: 1.25rem; } .passend__header .section__headline { font-size: clamp(1.875rem, 3.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.024em; max-width: 1180px; margin: 0 auto 1rem; text-align: center; text-wrap: balance; } .passend__header .section__sub { max-width: 780px; margin: 0 auto; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); text-align: center; line-height: 1.55; } /* Stack — vertical column, max-width matches other dark sections */ .passend__stack { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(1.25rem, 2.4vw, 2rem); } .passend__card { position: relative; background: linear-gradient(135deg, #0B0B0B 0%, #050505 60%, #0E0E0E 100%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 22px; padding: clamp(1.75rem, 2.6vw, 2.75rem) clamp(1.75rem, 2.6vw, 3rem); isolation: isolate; overflow: hidden; transition: transform 380ms cubic-bezier(0.23, 1, 0.32, 1), border-color 380ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 380ms cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -25px rgba(0, 0, 0, 0.85); } .passend__card:hover { transform: translateY(-3px); } /* YES card — coral ring + glow + scroll-reveal emphasis */ .passend__card--yes { border-color: rgba(217, 80, 48, 0.32); padding: clamp(2.25rem, 3.4vw, 3.5rem) clamp(2.25rem, 3.4vw, 3.75rem); /* Initial state — slightly compressed. Reveals when scrolling into view via .is-revealed. Once revealed, STAYS revealed (no flicker). */ transform: scale(0.96); opacity: 0.86; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(217, 80, 48, 0.08) inset, 0 20px 50px -25px rgba(0, 0, 0, 0.85), 0 0 0 -10px rgba(217, 80, 48, 0); transition: transform 720ms cubic-bezier(0.23, 1, 0.32, 1), opacity 600ms cubic-bezier(0.23, 1, 0.32, 1), border-color 720ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 720ms cubic-bezier(0.23, 1, 0.32, 1); will-change: transform, opacity; } .passend__card--yes.is-revealed { transform: scale(1.02); opacity: 1; border-color: rgba(217, 80, 48, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(217, 80, 48, 0.22) inset, 0 38px 90px -25px rgba(0, 0, 0, 0.95), 0 0 110px -10px rgba(217, 80, 48, 0.5); } .passend__card--yes::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(217, 80, 48, 0.08) 0%, transparent 50%); pointer-events: none; z-index: 0; } .passend__card--yes:hover { border-color: rgba(217, 80, 48, 0.65) !important; } /* Bigger title + marker in YES card — emphasis */ .passend__card--yes .passend__card-title { font-size: clamp(1.5rem, 2.3vw, 2rem); } .passend__card--yes .passend__card-marker { width: 44px; height: 44px; } .passend__card--yes .passend__card-marker svg { width: 22px; height: 22px; } @media (prefers-reduced-motion: reduce) { .passend__card--yes { transform: scale(1); opacity: 1; } } /* NO card — muted / desaturated */ .passend__card--no { background: linear-gradient(135deg, #0A0A0A 0%, #040404 100%); border-color: rgba(255, 255, 255, 0.06); opacity: 0.92; } .passend__card--no:hover { border-color: rgba(255, 255, 255, 0.12); opacity: 1; } /* Divider between cards */ .passend__divider { display: flex; align-items: center; gap: 1.25rem; margin: clamp(1.75rem, 3vw, 2.5rem) auto; max-width: 720px; padding-inline: 1.5rem; } .passend__divider-rule { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.18), transparent); } .passend__divider-label { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.005em; white-space: nowrap; } /* Card head */ .passend__card-head { position: relative; z-index: 1; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .passend__card-eyebrow { display: inline-block; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; font-weight: 600; margin-bottom: 0.625rem; color: rgba(255, 255, 255, 0.42); } .passend__card--yes .passend__card-eyebrow { color: var(--accent); } .passend__card-title-row { display: flex; align-items: center; gap: 0.875rem; } .passend__card-marker { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .passend__card-marker--yes { background: var(--accent); color: #FFFFFF; box-shadow: 0 0 0 4px rgba(217, 80, 48, 0.18), 0 6px 14px rgba(217, 80, 48, 0.32); } .passend__card-marker--no { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.5); } .passend__card-title { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.018em; margin: 0; } .passend__card--yes .passend__card-title { color: #FFFFFF; } .passend__card--no .passend__card-title { color: rgba(255, 255, 255, 0.7); } /* List */ .passend__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .passend__list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); } .passend__list li:first-child { border-top: none; padding-top: 0; } .passend__list p { margin: 0; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; letter-spacing: -0.005em; } .passend__card--yes .passend__list p { color: rgba(255, 255, 255, 0.92); } .passend__card--no .passend__list p { color: rgba(255, 255, 255, 0.6); } .passend__list p strong { font-weight: 700; } .passend__card--yes .passend__list p strong { color: #FFFFFF; } .passend__list p em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: var(--accent); } /* Bullet icon badges */ .passend__bullet-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; } .passend__bullet-icon--yes { background: rgba(217, 80, 48, 0.16); border: 1px solid rgba(217, 80, 48, 0.5); color: var(--accent); } .passend__bullet-icon--no { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.4); } /* Disclaimer — editorial centered quote with accent hairlines */ .passend__disclaimer { max-width: 1040px; margin: clamp(2.5rem, 4.5vw, 4rem) auto 0; padding: 2.25rem 2.5rem; text-align: center; position: relative; } .passend__disclaimer::before, .passend__disclaimer::after { content: ''; display: block; width: 56px; height: 1px; margin: 0 auto; background: linear-gradient(to right, transparent, rgba(217, 80, 48, 0.55), transparent); } .passend__disclaimer::before { margin-bottom: 1.25rem; } .passend__disclaimer::after { margin-top: 1.25rem; } .passend__disclaimer p { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; color: rgba(255, 255, 255, 0.92); text-wrap: balance; font-style: italic; } .passend__disclaimer em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; color: var(--accent); font-weight: 600; } .passend__cta { margin-top: clamp(2rem, 3.5vw, 3rem); text-align: center; } /* Mobile */ @media (max-width: 760px) { .passend__divider { gap: 0.625rem; } .passend__divider-label { font-size: 0.8125rem; } } /* ========================================================================= SECTION 09 — TESTIMONIALS · Vertical-Tab Layout (Wireframe) Left: 3 vertical tabs (Problem / Lösung / Ergebnis). Right: stage = current panel-title + body + video below. Below the grid: centered editorial pull-quote + CTA. ========================================================================= */ .section--cs-test { background: #000000; padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } .section--cs-test .section-numeral { display: none !important; } .cs-test__header { text-align: center; max-width: 1180px; width: 100%; margin: 0 auto clamp(2.5rem, 4vw, 4rem); padding-inline: clamp(0.5rem, 2vw, 1.5rem); } .cs-test__header .section__pre { margin-bottom: 1.25rem; } .cs-test__header .section__headline { font-size: clamp(1.875rem, 2.85vw, 3rem) !important; line-height: 1.14 !important; letter-spacing: -0.022em !important; width: 100% !important; max-width: 1180px !important; margin: 0 auto 1rem !important; text-wrap: pretty !important; } .cs-test__header .section__sub { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; text-wrap: pretty; } /* Grid: tabs left + stage right */ .cs-test { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; } /* === LEFT — Vertical tabs === */ .cs-test__tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .cs-test__tabs li { margin: 0; } .cs-test__tab { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; align-items: start; width: 100%; padding: 1.25rem 1.25rem 1.25rem 1.5rem; background: linear-gradient(135deg, #0B0B0B 0%, #060606 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; text-align: left; cursor: pointer; font: inherit; color: rgba(255, 255, 255, 0.55); overflow: hidden; transition: color 320ms cubic-bezier(0.23, 1, 0.32, 1), border-color 320ms cubic-bezier(0.23, 1, 0.32, 1), background 320ms cubic-bezier(0.23, 1, 0.32, 1), transform 280ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-test__tab::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--accent); border-radius: 0 2px 2px 0; opacity: 0; transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 0 12px rgba(217, 80, 48, 0.5); } .cs-test__tab:hover { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.1); transform: translateX(2px); } .cs-test__tab.is-active { color: #FFFFFF; border-color: rgba(217, 80, 48, 0.42); background: linear-gradient(135deg, rgba(217, 80, 48, 0.08) 0%, #060606 60%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(217, 80, 48, 0.18) inset, 0 18px 40px -20px rgba(0, 0, 0, 0.85), 0 0 60px -10px rgba(217, 80, 48, 0.32); } .cs-test__tab.is-active::before { opacity: 1; } .cs-test__tab-num { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.32); padding-top: 2px; } .cs-test__tab.is-active .cs-test__tab-num { color: var(--accent); } .cs-test__tab-body { display: flex; flex-direction: column; gap: 0.25rem; } .cs-test__tab-label { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.012em; color: inherit; } .cs-test__tab-hint { font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.45); } .cs-test__tab.is-active .cs-test__tab-hint { color: rgba(255, 255, 255, 0.7); } /* tab progress bar */ .cs-test__tab-progress { grid-column: 1 / -1; margin-top: 0.875rem; height: 2px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; } .cs-test__tab-progress-fill { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 2px; } .cs-test__tab.is-active .cs-test__tab-progress-fill { animation: cs-test-progress 7s linear forwards; } @keyframes cs-test-progress { from { width: 0%; } to { width: 100%; } } /* === RIGHT — Stage === */ .cs-test__stage { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.75rem, 2.6vw, 2.5rem); background: linear-gradient(135deg, #0B0B0B 0%, #050505 60%, #0E0E0E 100%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 22px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -25px rgba(0, 0, 0, 0.85); position: relative; overflow: hidden; } .cs-test__stage-meta { display: flex; align-items: center; gap: 0.625rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; } .cs-test__stage-name { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: 0.9375rem; font-weight: 700; color: #FFFFFF; letter-spacing: -0.005em; } .cs-test__stage-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); } .cs-test__stage-role { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); flex: 1; min-width: 0; } .cs-test__stage-logo { height: 22px; width: auto; opacity: 0.7; filter: brightness(1.4) contrast(0.85); flex-shrink: 0; } /* Panels — only one visible at a time */ .cs-test__panels { position: relative; flex: 1; min-height: 200px; } .cs-test__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 380ms cubic-bezier(0.23, 1, 0.32, 1), transform 480ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 380ms; display: flex; flex-direction: column; gap: 0.875rem; } .cs-test__panel[data-active] { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .cs-test__panel-eyebrow { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0; } .cs-test__panel-title { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(1.375rem, 2.1vw, 1.75rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.018em; color: #FFFFFF; margin: 0; } .cs-test__panel-body { font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(255, 255, 255, 0.78); margin: 0; } .cs-test__panel-body strong { color: #FFFFFF; font-weight: 700; } .cs-test__panel-body em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: var(--accent); } /* Video tile inside stage */ .cs-test__video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #060606; border: 1px solid rgba(255, 255, 255, 0.06); } .cs-test__video .wistia-facade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; border: 0; cursor: pointer; padding: 0; overflow: hidden; } .cs-test__video .wistia-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85) saturate(0.95); transition: filter 480ms cubic-bezier(0.23, 1, 0.32, 1), transform 700ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-test__video .wistia-facade:hover img { filter: brightness(1) saturate(1); transform: scale(1.03); } .cs-test__video .wistia-facade__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6)); } .cs-test__video .wistia-facade__play svg { transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-test__video .wistia-facade:hover .wistia-facade__play svg { transform: scale(1.08); } .cs-test__video .wistia-facade__label { position: absolute; bottom: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.875rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.005em; } .cs-test__video-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(217, 80, 48, 0.18); animation: cs-pulse-dot 2.4s ease-in-out infinite; } /* === Pull-quote below the grid — centered editorial === */ .cs-test__quote { max-width: 880px; margin: clamp(2.5rem, 4.5vw, 4rem) auto 0; text-align: center; position: relative; } .cs-test__quote::before, .cs-test__quote::after { content: ''; display: block; width: 56px; height: 1px; margin: 0 auto; background: linear-gradient(to right, transparent, rgba(217, 80, 48, 0.55), transparent); } .cs-test__quote::before { margin-bottom: 1.5rem; } .cs-test__quote p { margin: 0 0 1.25rem; font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; font-size: clamp(1.125rem, 1.6vw, 1.4375rem); line-height: 1.45; color: rgba(255, 255, 255, 0.92); letter-spacing: -0.005em; text-wrap: balance; } .cs-test__quote em { font-style: italic; color: var(--accent); font-weight: 700; } .cs-test__quote-cite { font-style: normal; display: inline-flex; flex-direction: column; gap: 0.125rem; align-items: center; font-family: var(--font-display, 'Poppins', system-ui, sans-serif); } .cs-test__quote-cite strong { font-size: 0.9375rem; font-weight: 700; color: #FFFFFF; } .cs-test__quote-cite span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); } .cs-test__quote::after { margin-top: 1.25rem; } .cs-test__cta { text-align: center; margin-top: clamp(2rem, 3.5vw, 3rem); } /* Mobile — single column */ @media (max-width: 860px) { .cs-test { grid-template-columns: 1fr; } .cs-test__tabs { flex-direction: row; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.5rem; } .cs-test__tabs::-webkit-scrollbar { display: none; } .cs-test__tabs li { flex: 1 0 220px; } .cs-test__tab::before { top: 0; bottom: auto; left: 18px; right: 18px; width: auto; height: 2px; } } /* ========================================================================= SECTION 09 — TESTIMONIALS · DARK CLEAN (Emil-Polish Pass) - Force pure #000 section bg (override legacy --bg-1 blue tint) - Video becomes the hero element (16:9 prominent) - Title + body fade per active stage (smooth, restrained) - Tabs left tighter, cleaner micro-spacing ========================================================================= */ .section--testimonials, .section--cs-test { background: #000000 !important; } /* Tighten grid: tabs slimmer, stage gets the light */ .section--cs-test .cs-test { grid-template-columns: 240px 1fr; gap: clamp(1.25rem, 2.4vw, 2rem); } /* Tabs — calmer baseline, only active card "lights up" */ .section--cs-test .cs-test__tab { background: transparent; border: 1px solid rgba(255, 255, 255, 0.05); padding: 1.125rem 1.125rem 1.125rem 1.375rem; } .section--cs-test .cs-test__tab.is-active { background: linear-gradient(135deg, rgba(217, 80, 48, 0.06) 0%, rgba(0,0,0,0) 70%); border-color: rgba(217, 80, 48, 0.36); box-shadow: 0 0 0 1px rgba(217, 80, 48, 0.14) inset, 0 14px 36px -16px rgba(217, 80, 48, 0.28); } /* Stage — flatter card, no heavy shadow, just a clean dark surface */ .section--cs-test .cs-test__stage { background: linear-gradient(180deg, #0A0A0A 0%, #060606 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 22px; padding: clamp(1.75rem, 2.6vw, 2.5rem); gap: clamp(1.25rem, 2vw, 1.75rem); box-shadow: none; } /* Meta row — logo + name compact */ .section--cs-test .cs-test__stage-meta { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: nowrap; } .section--cs-test .cs-test__stage-logo { height: 32px; width: auto; opacity: 0.78; filter: brightness(1.2) contrast(0.9); flex-shrink: 0; } .cs-test__stage-name-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .section--cs-test .cs-test__stage-name { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: 1rem; font-weight: 700; color: #FFFFFF; letter-spacing: -0.005em; line-height: 1.2; } .section--cs-test .cs-test__stage-role { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); line-height: 1.3; } /* Eyebrow — editorial mono with hairline */ .section--cs-test .cs-test__panel-eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0; } .cs-test__panel-eyebrow-rule { width: 24px; height: 1px; background: var(--accent); } /* Panels — title fades per active stage. Min-height keeps layout stable */ .section--cs-test .cs-test__panels { position: relative; min-height: clamp(80px, 8vw, 110px); margin: 0; } .section--cs-test .cs-test__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 360ms cubic-bezier(0.23, 1, 0.32, 1), transform 480ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 360ms; display: flex; flex-direction: column; } .section--cs-test .cs-test__panel[data-active] { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .section--cs-test .cs-test__panel-title { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: #FFFFFF; margin: 0; text-wrap: balance; } /* Body bodies (separate stack below video) — fade per stage */ .cs-test__panel-bodies { position: relative; min-height: clamp(70px, 7vw, 90px); } .cs-test__panel-bodies .cs-test__panel-body { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 360ms cubic-bezier(0.23, 1, 0.32, 1), transform 480ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 360ms; margin: 0; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.6; color: rgba(255, 255, 255, 0.74); } .cs-test__panel-bodies .cs-test__panel-body[data-active] { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .cs-test__panel-bodies .cs-test__panel-body strong { color: #FFFFFF; font-weight: 700; } .cs-test__panel-bodies .cs-test__panel-body em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: var(--accent); } /* Video — full-width 16:9 hero with poster fallback */ .section--cs-test .cs-test__video { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(217, 80, 48, 0.08) 0%, transparent 60%), linear-gradient(135deg, #0E0E0E 0%, #050505 100%); border: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .section--cs-test .wistia-facade { position: absolute; inset: 0; width: 100%; height: 100%; } .section--cs-test .wistia-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78) saturate(0.95); transition: filter 480ms cubic-bezier(0.23, 1, 0.32, 1), transform 700ms cubic-bezier(0.23, 1, 0.32, 1); } .section--cs-test .wistia-facade:hover img { filter: brightness(0.95) saturate(1); transform: scale(1.03); } /* Pulsing play button */ .wistia-facade__play-pulse { position: absolute; width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(217, 80, 48, 0.5); animation: cs-play-pulse 2.4s ease-out infinite; pointer-events: none; } @keyframes cs-play-pulse { 0% { transform: scale(0.95); opacity: 0.85; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } /* Cleaner play button container */ .section--cs-test .wistia-facade__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6)); } /* ========================================================================= SECTION 09 — TESTIMONIALS · SINGLE CASE STUDY CARD One unified card. No tabs (only one customer). Inside: meta-header → title+lede → video → 3-col Problem/Lösung/Ergebnis. ========================================================================= */ /* Hide the old tab/stage layout completely */ .section--cs-test .cs-test, .section--cs-test .cs-test__tabs, .section--cs-test .cs-test__stage { display: none !important; } /* Single case-study card */ .cs-case { max-width: 1180px; margin: 0 auto; background: linear-gradient(180deg, #0A0A0A 0%, #060606 100%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; padding: clamp(1.75rem, 3vw, 3rem); display: flex; flex-direction: column; gap: clamp(1.5rem, 2.4vw, 2.25rem); position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.85); } /* subtle accent radial glow top-right */ .cs-case::before { content: ''; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(217, 80, 48, 0.10) 0%, transparent 60%); pointer-events: none; z-index: 0; } .cs-case > * { position: relative; z-index: 1; } /* Meta header */ .cs-case__meta { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; } /* Meta sits BELOW the video — name + role on the left, logo on the right sized to match the typographic block height (no oversized billboard). Desktop = zentriert, Mobile = linksbündig. */ .cs-case__meta--below { padding-bottom: 0; border-bottom: 0; padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: clamp(0.5rem, 1vw, 0.875rem); justify-content: center; text-align: center; gap: 1.5rem; } @media (max-width: 860px) { .cs-case__meta--below { justify-content: flex-start !important; text-align: left !important; } } .cs-case__meta--below .cs-case__meta-name { flex: 0 1 auto; min-width: 0; align-items: flex-start; } .cs-case__meta--below .cs-case__logo { height: clamp(28px, 2.8vw, 36px); opacity: 0.85; filter: brightness(1.1); } .cs-case__intro-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cs-case__logo { height: 36px; width: auto; opacity: 0.82; filter: brightness(1.2) contrast(0.9); flex-shrink: 0; } .cs-case__meta-name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; } .cs-case__name { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: 1.0625rem; font-weight: 700; color: #FFFFFF; letter-spacing: -0.005em; line-height: 1.2; } .cs-case__role { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); line-height: 1.3; } .cs-case__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem; background: rgba(217, 80, 48, 0.08); border: 1px solid rgba(217, 80, 48, 0.32); border-radius: 999px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 200, 173, 0.92); flex-shrink: 0; } .cs-case__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(217, 80, 48, 0.18); animation: cs-pulse-dot 2.4s ease-in-out infinite; } /* Intro: eyebrow + title + lede */ .cs-case__intro { display: flex; flex-direction: column; gap: 0.875rem; max-width: 1000px; } .cs-case__eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0; } .cs-case__eyebrow-rule { width: 28px; height: 1px; background: var(--accent); } .cs-case__title { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(1.5rem, 2.5vw, 2.125rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; color: #FFFFFF; margin: 0; text-wrap: balance; } .cs-case__title em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 700; color: var(--accent); } .cs-case__lede { font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 1.6; color: rgba(255, 255, 255, 0.74); margin: 0; max-width: 72ch; } /* Video — full-width 16:9 hero with poster fallback */ .cs-case__video { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(217, 80, 48, 0.10) 0%, transparent 60%), linear-gradient(135deg, #0E0E0E 0%, #050505 100%); border: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .cs-case__video .wistia-facade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; border: 0; cursor: pointer; padding: 0; overflow: hidden; } .cs-case__video .wistia-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78) saturate(0.95); transition: filter 480ms cubic-bezier(0.23, 1, 0.32, 1), transform 700ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-case__video .wistia-facade:hover img { filter: brightness(0.95) saturate(1); transform: scale(1.03); } .cs-case__video .wistia-facade__play { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3; filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.7)); } .cs-case__video .wistia-facade:hover .wistia-facade__play { transform: none !important; } .cs-case__video .wistia-facade__play svg { width: clamp(72px, 9vw, 104px) !important; height: clamp(72px, 9vw, 104px) !important; transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-case__video .wistia-facade:hover .wistia-facade__play svg { transform: scale(1.08); } .cs-case__video .wistia-facade__play-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(96px, 11vw, 128px); height: clamp(96px, 11vw, 128px); z-index: 2; } .cs-case__video .wistia-facade__label { position: absolute; bottom: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); } .cs-case__video-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(217, 80, 48, 0.18); animation: cs-pulse-dot 2.4s ease-in-out infinite; } /* Problem / Lösung / Ergebnis grid */ /* L-layout: Problem + Lösung stack vertically on the left (left col), Ergebnis spans both rows on the right. Ergebnis uses larger quote-style typography so its shorter body fills the tall right column visually. */ .cs-case__psr { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "problem ergebnis" "loesung ergebnis"; gap: clamp(0.875rem, 1.6vw, 1.25rem); padding-top: clamp(0.5rem, 1vw, 1rem); border-top: 1px solid rgba(255, 255, 255, 0.06); } .cs-case__psr-block { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 1.5rem 1.75rem 1.625rem; display: flex; flex-direction: column; gap: 0.75rem; } .cs-case__psr-block:nth-child(1) { grid-area: problem; } .cs-case__psr-block:nth-child(2) { grid-area: loesung; } .cs-case__psr-block:nth-child(3) { grid-area: ergebnis; /* fill the tall right column gracefully — center quote vertically */ justify-content: center; } /* Ergebnis card — designed as a poster quote so the shorter copy fills the tall right column gracefully. Big decorative ldquo, lead-in, large pull quote, signature byline. */ .cs-case__psr-block--quote { position: relative; padding: 2rem 2rem 1.75rem !important; overflow: hidden; align-items: center; text-align: center; gap: 1rem !important; } .cs-case__psr-block--quote .cs-case__psr-head { align-self: center; margin-bottom: 0.25rem; } .cs-case__quote-mark { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(120px, 14vw, 180px); line-height: 0.7; color: var(--accent); opacity: 0.55; display: block; margin: 0.25rem 0 -0.25rem; text-shadow: 0 0 40px rgba(217, 80, 48, 0.3); } .cs-case__quote-lead { font-size: clamp(0.9375rem, 1.05vw, 1.0625rem) !important; line-height: 1.55 !important; color: rgba(255, 255, 255, 0.7) !important; max-width: 36ch; margin: 0 auto !important; } .cs-case__quote-pull { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(1.375rem, 1.85vw, 1.625rem); line-height: 1.35; color: #FFFFFF; margin: 0.5rem auto 0.25rem; max-width: 32ch; letter-spacing: -0.005em; text-wrap: balance; } .cs-case__quote-byline { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } .cs-case__quote-rule { width: 28px; height: 1px; background: var(--accent); display: inline-block; opacity: 0.7; } .cs-case__quote-name { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } @media (max-width: 860px) { .cs-case__psr { grid-template-columns: 1fr; grid-template-areas: "problem" "loesung" "ergebnis"; } .cs-case__psr-block { padding: 1.5rem 1.5rem 1.625rem; } } .cs-case__psr-block--accent { background: linear-gradient(160deg, rgba(217, 80, 48, 0.10) 0%, rgba(217, 80, 48, 0.02) 100%); border-color: rgba(217, 80, 48, 0.32); box-shadow: 0 0 60px -15px rgba(217, 80, 48, 0.32); } .cs-case__psr-head { display: flex; align-items: baseline; gap: 0.625rem; } .cs-case__psr-num { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.36); } .cs-case__psr-block--accent .cs-case__psr-num { color: var(--accent); } .cs-case__psr-label { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; color: #FFFFFF; } .cs-case__psr-block p { margin: 0; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.78); } .cs-case__psr-block .cs-case__psr-head { padding-top: 0.125rem; } .cs-case__psr-label { font-size: 1.125rem; } .cs-case__psr-block strong { color: #FFFFFF; font-weight: 700; } .cs-case__psr-block em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: var(--accent); } /* Mobile — 3-col → single column stack */ @media (max-width: 860px) { .cs-case__psr { grid-template-columns: 1fr; } .cs-case__meta { gap: 0.75rem; } .cs-case__badge { font-size: 0.625rem; padding: 0.35rem 0.7rem; } } /* ========================================================================= SECTION 10 — ÜBER UNS (Geschäftsführung) · Polish - Hide the legacy "09." section-numeral - Add subtle accent radial-glow in the bg (matches other sections) ========================================================================= */ /* Section bg is a pair of radial-gradients ON the section itself. The fade radius (24-26%) is calibrated so each gradient reaches transparent WELL before the section's top/bottom edges → buffer of 30%+ pure black at the top + bottom seam, smooth into the adjacent #000 sections. No pseudo-elements with `filter: blur` (those clip at section overflow). */ .section--about { background: radial-gradient(circle at 88% 32%, rgba(217, 80, 48, 0.14) 0%, rgba(217, 80, 48, 0.07) 11%, rgba(217, 80, 48, 0.02) 18%, transparent 24%), radial-gradient(circle at 12% 68%, rgba(217, 80, 48, 0.10) 0%, rgba(217, 80, 48, 0.04) 13%, transparent 26%), #000000; position: relative; overflow: hidden; } .section--about .section-numeral { display: none !important; } .section--about::before, .section--about::after { content: none !important; } .section--about > .container { position: relative; z-index: 1; } /* ========================================================================= SECTION 11 — HOW IT WORKS · "So läuft es ab" · Editorial Flow 3 step-cards in horizontal flow with connecting line, custom SVG art, meta pills (time + signal), centered assurance below + CTA. ========================================================================= */ .section--how-flow { background: radial-gradient(circle at 12% 32%, rgba(217, 80, 48, 0.12) 0%, rgba(217, 80, 48, 0.04) 14%, transparent 26%), radial-gradient(circle at 88% 68%, rgba(217, 80, 48, 0.10) 0%, rgba(217, 80, 48, 0.04) 14%, transparent 26%), #000000; padding-block: clamp(5rem, 9vw, 7rem); position: relative; overflow: hidden; } .section--how-flow .section-numeral { display: none !important; } .how-flow__header { text-align: center; max-width: 1180px; margin: 0 auto clamp(3rem, 5vw, 4.5rem); padding-inline: clamp(0.5rem, 2vw, 1.5rem); } .how-flow__header .section__pre { margin-bottom: 1.25rem; } .how-flow__header .section__headline { font-size: clamp(1.875rem, 3.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.024em; max-width: 1100px; margin: 0 auto 1rem; text-wrap: balance; } .how-flow__header .section__sub { max-width: 760px; margin: 0 auto; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.55; } /* 3-step grid */ .how-flow { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); } .how-flow__step { position: relative; background: linear-gradient(180deg, #0A0A0A 0%, #060606 100%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 22px; padding: clamp(1.5rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: 1.125rem; transition: transform 380ms cubic-bezier(0.23, 1, 0.32, 1), border-color 380ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 380ms cubic-bezier(0.23, 1, 0.32, 1); isolation: isolate; overflow: hidden; } .how-flow__step::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(217, 80, 48, 0.06) 0%, transparent 50%); pointer-events: none; z-index: 0; } .how-flow__step:hover { transform: translateY(-4px); border-color: rgba(217, 80, 48, 0.32); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 70px -25px rgba(0, 0, 0, 0.9), 0 0 60px -10px rgba(217, 80, 48, 0.32); } .how-flow__step > * { position: relative; z-index: 1; } /* head: number + connector */ .how-flow__head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.25rem; } .how-flow__num { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; background: linear-gradient(135deg, var(--accent) 0%, #FFB39A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; flex-shrink: 0; } .how-flow__connector { flex: 1; height: 1px; background: linear-gradient(to right, rgba(217, 80, 48, 0.42) 0%, rgba(217, 80, 48, 0.12) 50%, transparent 100%); } .how-flow__step:last-child .how-flow__connector { background: linear-gradient(to right, rgba(217, 80, 48, 0.42) 0%, rgba(217, 80, 48, 0.10) 100%); } /* SVG art panel */ .how-flow__art { background: linear-gradient(150deg, rgba(255, 255, 255, 0.025) 0%, rgba(217, 80, 48, 0.04) 60%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 1rem; aspect-ratio: 16 / 11; display: flex; align-items: center; justify-content: center; overflow: hidden; } .how-flow__art svg { width: 100%; height: 100%; } .how-flow__title { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.014em; color: #FFFFFF; margin: 0; text-wrap: balance; } .how-flow__body { font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.74); margin: 0; } .how-flow__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.875rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .how-flow__meta-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; font-size: 0.6875rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.005em; } .how-flow__meta-pill svg { color: var(--accent); flex-shrink: 0; } .how-flow__meta-pill--accent { background: rgba(217, 80, 48, 0.10); border-color: rgba(217, 80, 48, 0.32); color: rgba(255, 200, 173, 0.92); font-weight: 600; } /* Assurance footer line */ .how-flow__assurance { max-width: 880px; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; padding: 1.25rem 1.75rem; display: flex; align-items: center; gap: 0.875rem; text-align: left; border-radius: 14px; background: rgba(217, 80, 48, 0.04); border: 1px solid rgba(217, 80, 48, 0.18); } .how-flow__assurance-icon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(217, 80, 48, 0.16); border: 1px solid rgba(217, 80, 48, 0.45); color: var(--accent); flex-shrink: 0; } .how-flow__assurance p { margin: 0; font-size: clamp(0.875rem, 1.05vw, 0.9375rem); line-height: 1.55; color: rgba(255, 255, 255, 0.82); } .how-flow__assurance em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: var(--accent); } .how-flow__cta { text-align: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* Mobile — stack */ @media (max-width: 860px) { .how-flow { grid-template-columns: 1fr; } .how-flow__assurance { flex-direction: column; align-items: flex-start; } } /* ========================================================================= SECTION 12 — FAQ · CLEAN ACCORDION Editorial centered header + 2-col responsive accordion grid + contact card. Dark cards, accent-glow on hover/open, smooth height-animation. ========================================================================= */ .section--faq-clean { background: radial-gradient(circle at 88% 28%, rgba(217, 80, 48, 0.10) 0%, rgba(217, 80, 48, 0.04) 14%, transparent 26%), radial-gradient(circle at 12% 72%, rgba(217, 80, 48, 0.08) 0%, transparent 26%), #000000; padding-block: clamp(5rem, 9vw, 7rem); position: relative; /* overflow: hidden; — REMOVED: this scoped sticky to the section and interfered with `position: sticky` on the FAQ header. Background radial-gradients don't need clipping. */ } .section--faq-clean .section-numeral { display: none !important; } /* Split layout: sticky header (tagline + headline) on the left, scrollable accordion list on the right. Header stays pinned while user clicks / scrolls through cards on the right. */ .cs-faq__split { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(320px, 1fr) 1.5fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .cs-faq__header { position: sticky; top: 110px; align-self: start; text-align: left; max-width: 100%; margin: 0; padding-inline: 0; } .cs-faq__header .section__pre { margin-bottom: 1.25rem; } .cs-faq__header .section__pre .pre { margin-left: 0; } .cs-faq__header .section__headline { font-size: clamp(1.625rem, 2.5vw, 2.5rem); line-height: 1.18; letter-spacing: -0.022em; max-width: 22ch; margin: 0; text-wrap: pretty; text-align: left; font-weight: 500; color: rgba(255, 255, 255, 0.78); } .cs-faq__header .section__headline strong { font-weight: 800; color: #FFFFFF; } /* Accordion list — single column on the right */ .cs-faq { max-width: 100%; margin: 0; display: flex; flex-direction: column; gap: clamp(0.625rem, 1.2vw, 0.875rem); } @media (max-width: 900px) { .cs-faq__split { grid-template-columns: 1fr; gap: 2rem; } .cs-faq__header { position: static; text-align: center; } .cs-faq__header .section__headline { text-align: center; max-width: 100%; margin: 0 auto; } } /* Accordion question card */ .cs-faq__q { background: linear-gradient(180deg, #0A0A0A 0%, #060606 100%); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; overflow: hidden; transition: border-color 320ms cubic-bezier(0.23, 1, 0.32, 1), background 320ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 320ms cubic-bezier(0.23, 1, 0.32, 1); height: fit-content; } .cs-faq__q:hover { border-color: rgba(255, 255, 255, 0.14); } .cs-faq__q[open] { border-color: rgba(217, 80, 48, 0.42); background: linear-gradient(180deg, rgba(217, 80, 48, 0.06) 0%, #050505 70%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(217, 80, 48, 0.16) inset, 0 24px 56px -22px rgba(217, 80, 48, 0.32); } /* hide native disclosure marker (Safari + Chrome) */ .cs-faq__q summary { list-style: none; } .cs-faq__q summary::-webkit-details-marker { display: none; } .cs-faq__q summary::marker { display: none; } .cs-faq__head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.875rem; align-items: center; padding: 1.25rem 1.375rem; cursor: pointer; user-select: none; } .cs-faq__num { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.32); padding-top: 1px; flex-shrink: 0; } .cs-faq__q[open] .cs-faq__num { color: var(--accent); } .cs-faq__label { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: clamp(0.9375rem, 1.05vw, 1rem); font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.86); letter-spacing: -0.008em; } .cs-faq__q[open] .cs-faq__label { color: #FFFFFF; } .cs-faq__icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); flex-shrink: 0; transition: transform 360ms cubic-bezier(0.23, 1, 0.32, 1), background 320ms cubic-bezier(0.23, 1, 0.32, 1), border-color 320ms cubic-bezier(0.23, 1, 0.32, 1), color 320ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-faq__q[open] .cs-faq__icon { background: var(--accent); border-color: var(--accent); color: #FFFFFF; transform: rotate(45deg); box-shadow: 0 4px 14px rgba(217, 80, 48, 0.42); } .cs-faq__q:hover .cs-faq__icon { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); } .cs-faq__body { padding: 0 1.375rem 1.375rem 3.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 1rem; margin-top: -1px; animation: cs-faq-fade 360ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-faq__body p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.74); } .cs-faq__body strong { color: #FFFFFF; font-weight: 700; } .cs-faq__body em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: var(--accent); } @keyframes cs-faq-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Contact card */ .cs-faq__contact { max-width: 720px; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; text-align: center; padding: clamp(1.5rem, 2.4vw, 2rem) 2rem; background: linear-gradient(135deg, rgba(217, 80, 48, 0.06) 0%, transparent 60%), linear-gradient(180deg, #0A0A0A 0%, #060606 100%); border: 1px solid rgba(217, 80, 48, 0.22); border-radius: 18px; position: relative; overflow: hidden; } .cs-faq__contact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(217, 80, 48, 0.10) 0%, transparent 50%); pointer-events: none; } .cs-faq__contact > * { position: relative; z-index: 1; } .cs-faq__contact-eyebrow { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 0.625rem; } .cs-faq__contact-text { margin: 0 0 1.25rem; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.5; color: rgba(255, 255, 255, 0.82); } .cs-faq__contact-link { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.25rem; background: rgba(217, 80, 48, 0.08); border: 1px solid rgba(217, 80, 48, 0.42); border-radius: 999px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.875rem; font-weight: 500; color: #FFB39A; text-decoration: none; letter-spacing: -0.005em; transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1), border-color 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-faq__contact-link:hover { background: rgba(217, 80, 48, 0.18); border-color: var(--accent); color: #FFFFFF; transform: translateY(-1px); } .cs-faq__contact-link svg { transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-faq__contact-link:hover svg { transform: translateX(3px); } /* Mobile — single column */ @media (max-width: 860px) { .cs-faq { grid-template-columns: 1fr; } .cs-faq__body { padding-left: 1.375rem; } } /* ========================================================================= SECTION 13 — CTA FINAL · CLEAN - Headline reduced so it fits in max 3 lines (consistent w/ other sections) - Standard primary button (not the oversized xl variant) - Safe accent radial glows (mid-section, no hard edge to footer) ========================================================================= */ .section--cta-final-clean { background: radial-gradient(circle at 18% 36%, rgba(217, 80, 48, 0.16) 0%, rgba(217, 80, 48, 0.06) 14%, transparent 26%), radial-gradient(circle at 82% 62%, rgba(217, 80, 48, 0.12) 0%, rgba(217, 80, 48, 0.04) 14%, transparent 26%), #000000 !important; padding-block: clamp(5rem, 9vw, 7rem) !important; position: relative; overflow: hidden; } .section--cta-final-clean::before, .section--cta-final-clean::after { content: none !important; } .section--cta-final-clean .section-numeral { display: none !important; } .section--cta-final-clean .cta-final__glow { display: none !important; } .section--cta-final-clean .cta-final__inner { max-width: 1100px; margin: 0 auto; text-align: center; position: relative; z-index: 1; padding-inline: clamp(0.5rem, 2vw, 1.5rem); display: flex; flex-direction: column; align-items: center; gap: 0; } .section--cta-final-clean .section__pre { margin: 0 0 1.5rem !important; } .section--cta-final-clean .cta-final__headline { font-family: var(--font-display, 'Poppins', system-ui, sans-serif) !important; font-size: clamp(1.875rem, 3.4vw, 3.25rem) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.024em !important; color: #FFFFFF !important; margin: 0 0 1.25rem !important; max-width: 1080px !important; text-wrap: balance; text-align: center; } .section--cta-final-clean .cta-final__headline em { font-family: var(--font-accent, 'Playfair Display', serif) !important; font-style: italic !important; font-weight: 700 !important; color: var(--accent) !important; } .section--cta-final-clean .cta-final__sub { margin: 0 0 2.25rem !important; max-width: 660px; font-size: clamp(0.9375rem, 1.15vw, 1.0625rem) !important; line-height: 1.55 !important; color: rgba(255, 255, 255, 0.74) !important; text-align: center; } .cta-final__cta-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .cta-final__alt-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); text-decoration: none; letter-spacing: -0.005em; transition: color 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1); } .cta-final__alt-link span { transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); } .cta-final__alt-link:hover { color: var(--accent); } .cta-final__alt-link:hover span { transform: translateX(3px); } /* ========================================================================= FOOTER · v2 PREMIUM - subtle hairline at top - brand block with logo + tagline + status dot - 3 column links with rich contact-list - massive editorial wordmark (decorative, fades at edges) - bottom bar with credit + arrow ========================================================================= */ .cs-footer--v2 { position: relative; background: #000000; padding-block: clamp(3rem, 5vw, 5rem) 0; overflow: hidden; } /* kill old glow if any */ .cs-footer--v2 .cs-footer__glow { display: none !important; } /* Top hairline with accent shimmer */ .cs-footer__hairline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.04) 20%, rgba(217, 80, 48, 0.5) 50%, rgba(255, 255, 255, 0.04) 80%, transparent 100%); } /* Top: brand block + 3 columns */ .cs-footer--v2 .cs-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-block: clamp(3rem, 5vw, 4rem); position: relative; z-index: 2; /* kill legacy border-bottom — editorial below has its own border-top */ border-bottom: none !important; margin-bottom: 0 !important; } /* Brand block */ .cs-footer__brand { display: flex; flex-direction: column; gap: 1.25rem; max-width: 360px; } .cs-footer__logo { display: inline-flex; width: fit-content; } .cs-footer__logo img { height: 56px; width: auto; display: block; filter: drop-shadow(0 2px 12px rgba(217, 80, 48, 0.18)); transition: filter 280ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-footer__logo:hover img { filter: drop-shadow(0 3px 16px rgba(217, 80, 48, 0.35)); } .cs-footer__tagline { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.55); letter-spacing: -0.005em; max-width: 32ch; } .cs-footer__tagline em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; font-weight: 600; color: var(--accent); } .cs-footer__location { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.875rem; background: rgba(217, 80, 48, 0.06); border: 1px solid rgba(217, 80, 48, 0.22); border-radius: 999px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 200, 173, 0.92); width: fit-content; } .cs-footer__loc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(217, 80, 48, 0.18); animation: cs-pulse-dot 2.4s ease-in-out infinite; } /* Columns */ .cs-footer--v2 .cs-footer__cols { display: contents; } .cs-footer--v2 .cs-footer__col h4, .cs-footer__col-head { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.5rem; } .cs-footer__col-head::before { content: ''; width: 18px; height: 1px; background: var(--accent); } .cs-footer--v2 .cs-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; } .cs-footer--v2 .cs-footer__col a { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1); display: inline-block; letter-spacing: -0.005em; } .cs-footer--v2 .cs-footer__col a:hover { color: #FFFFFF; transform: translateX(3px); } /* Contact list — richer with name + email stacked */ .cs-footer__contact-list a { display: flex !important; flex-direction: column; gap: 2px; padding: 0.5rem 0; } .cs-footer__person { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); font-size: 0.875rem; font-weight: 700; color: #FFFFFF; letter-spacing: -0.005em; } .cs-footer__email { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.005em; } .cs-footer__contact-list a:hover .cs-footer__email { color: var(--accent); } /* Massive editorial wordmark — constrained to container width so it lines up exactly with the dividers above + below. Centered between them. */ .cs-footer__editorial { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none; /* Same horizontal padding as .container so the text-edge aligns w/ the rules */ max-width: var(--container, 1240px); margin: 0 auto; padding: clamp(1.5rem, 2.6vw, 2.5rem) var(--gutter, 1.5rem); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .cs-footer__editorial-text { font-family: var(--font-display, 'Poppins', system-ui, sans-serif); /* Calibrated so text width matches container minus padding — same width as the divider lines drüber und drunter */ font-size: clamp(1.5rem, 7.4vw, 7rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.02) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; text-transform: none; display: block; text-align: center; } .cs-footer__editorial-text em { font-family: var(--font-accent, 'Playfair Display', serif); font-style: italic; background: linear-gradient(180deg, rgba(217, 80, 48, 0.32) 0%, rgba(217, 80, 48, 0.08) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Bottom bar — no border-top here since editorial above already has one */ .cs-footer--v2 .cs-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem; border-top: none; position: relative; z-index: 2; } .cs-footer--v2 .cs-footer__copyright, .cs-footer--v2 .cs-footer__credit { margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); font-family: var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: 0.005em; display: inline-flex; align-items: center; gap: 0.5rem; } .cs-footer--v2 .cs-footer__credit a { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: 0.3rem 0.625rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.025); transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1), border-color 220ms cubic-bezier(0.23, 1, 0.32, 1), color 220ms cubic-bezier(0.23, 1, 0.32, 1); } .cs-footer--v2 .cs-footer__credit a:hover { background: rgba(217, 80, 48, 0.08); border-color: rgba(217, 80, 48, 0.42); color: #FFB39A; } /* Mobile */ @media (max-width: 860px) { .cs-footer--v2 .cs-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } .cs-footer__brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .cs-footer--v2 .cs-footer__top { grid-template-columns: 1fr; } .cs-footer--v2 .cs-footer__bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================================= BENEFITS — Section header stays sticky above the stacking cards. Pure CSS — no JS. Works because header + .benefits-bento are siblings inside .container, both have overflow:visible, and they pin at different `top` values (header at nav-bottom, cards at header-bottom). ========================================================================= */ @media (min-width: 961px) { /* OPTION A — clean simple sticky-stack: - Header is NOT sticky. It's the first child of .benefits-bento and scrolls naturally up out of view at the start. - Cards are sticky at top:88 (just below nav) and stack on top of each other tight at the viewport top. - When the last card's natural-bottom reaches sticky-top, the whole block (last card + bento) un-stickys and scrolls out as one. No bg hacks, no z-index gymnastics, no overlay artifacts. */ .section--benefits-bento .benefits-bento__header { position: static !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important; z-index: auto; } .section--benefits-bento .benefits-bento__headline, .section--benefits-bento .benefits-bento__sub, .section--benefits-bento .benefits-bento__pre { text-shadow: none; } .bb-card, .bb-card[data-step] { top: clamp(82px, 9vh, 100px) !important; } } /* ========================================================================= PREMIUM SECTION DIVIDERS — gradient hairlines between sections. 1px bottom-line on each section with a coral hot-spot whose horizontal position rotates (center / left / right) for editorial rhythm. The CTA→Footer transition keeps its existing treatment. ========================================================================= */ .section--hero, .section--logos, .section--problem-stories, .section--benefits-bento, .section--leistungen-bento, .section--methode-tabs, .section--vergleich, .section--passend, .section--testimonials, .section--about, .section--how, .section--faq { position: relative; } .section--hero::after, .section--logos::after, .section--problem-stories::after, .section--benefits-bento::after, .section--leistungen-bento::after, .section--methode-tabs::after, .section--vergleich::after, .section--passend::after, .section--testimonials::after, .section--about::after, .section--how::after, .section--faq::after { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; height: 1px !important; pointer-events: none !important; z-index: 6 !important; opacity: 1 !important; transform: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } /* CENTER hot-spot */ .section--benefits-bento::after, .section--vergleich::after, .section--about::after { background: linear-gradient(90deg, rgba(217, 80, 48, 0) 0%, rgba(255, 255, 255, 0.04) 18%, rgba(217, 80, 48, 0.65) 50%, rgba(255, 255, 255, 0.04) 82%, rgba(217, 80, 48, 0) 100%) !important; } /* LEFT hot-spot (~22%) */ .section--leistungen-bento::after, .section--passend::after, .section--how::after { background: linear-gradient(90deg, rgba(217, 80, 48, 0.15) 0%, rgba(217, 80, 48, 0.65) 22%, rgba(255, 255, 255, 0.05) 55%, rgba(217, 80, 48, 0) 100%) !important; } /* NEUTRAL grey — Hero bottom (= top of Logos) + Logos bottom */ .section--hero::after, .section--logos::after { background: rgba(255, 255, 255, 0.08) !important; } /* RIGHT hot-spot (~78%) */ .section--problem-stories::after, .section--methode-tabs::after, .section--testimonials::after, .section--faq::after { background: linear-gradient(90deg, rgba(217, 80, 48, 0) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(217, 80, 48, 0.65) 78%, rgba(217, 80, 48, 0.15) 100%) !important; } /* ========================================================================= MOBILE OPTIMIZATIONS — sau geiles Mobile-Design ========================================================================= */ /* 1) Headline-Span hidden on mobile — for headlines too long on small screens */ @media (max-width: 768px) { .hl-mobile-hide { display: none !important; } } /* 2) Hero mobile — show duo founders properly via object-fit cover with face-focused object-position. Replaces the desktop translate-bleed setup which leaves only an arm visible on small screens. */ @media (max-width: 768px) { /* mobile: Foto sitzt jetzt UNTEN in der Section. Content (Tagline, Headline, Sub, Bullets, CTA) ist oben ABOVE THE FOLD. Foto fadet vom oberen Rand sanft aus dem Schwarz ins Bild rein. */ .hero--bleed .hero__bg { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; /* Bild-Bereich startet weit unten — die Köpfe der beiden landen UNTER dem CTA-Block, nicht dahinter. */ height: 360px !important; } /* Sanfter Fade IN ins Bild — kurzer Übergang oben, das Bild ist schon nach ~25% voll sichtbar (sonst sieht der above-the-fold Bereich nur schwarz aus). */ .hero--bleed .hero__bg img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; object-fit: cover !important; /* Bild nach oben verschieben → Köpfe der Founder werden sichtbar (Original hat sie im oberen Drittel). */ object-position: 50% 18% !important; transform: translateY(0) !important; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 10%, rgba(0,0,0,0.92) 22%, rgba(0,0,0,1) 32%, rgba(0,0,0,1) 100%) !important; mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 10%, rgba(0,0,0,0.92) 22%, rgba(0,0,0,1) 32%, rgba(0,0,0,1) 100%) !important; filter: contrast(1.06) saturate(0.96) brightness(0.98) !important; } /* Schmaler Top-Blend, damit die Bildoberkante weich ins Schwarz übergeht — aber nicht das halbe Bild abdeckt. */ .hero--bleed .hero__bg::after { content: '' !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important; height: 90px !important; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0) 100%) !important; pointer-events: none !important; z-index: 2 !important; } /* mobile: photo lives at BOTTOM of hero — overlay schwarz oben (hinter dem Text-Block) und transparent unten (damit das Foto sichtbar ist). */ .hero--bleed .hero__overlay { background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.96) 28%, rgba(0, 0, 0, 0.78) 48%, rgba(0, 0, 0, 0.30) 68%, rgba(0, 0, 0, 0.10) 86%, rgba(0, 0, 0, 0) 100%) !important; } .section--hero.hero--bleed { min-height: auto !important; max-height: none !important; /* Content (Tagline, Headline, Sub, Bullets, CTA) sitzt oben above-the-fold. Foto sitzt unten — padding-bottom reserviert den Bild-Bereich. Text hat Atem zur Navbar (5.5rem ≈ 88px). Knapp damit CTA über dem Fold bleibt. */ padding-top: 5rem !important; /* Bild-Reserve = Bild-Höhe (360) + sicherer Abstand zum CTA-Block, damit die Köpfe nicht in den CTA reinragen. */ padding-bottom: 380px !important; } /* Vertikale Abstände im Hero auf Mobile reduzieren — CTA muss above-the-fold */ .hero--bleed .hero__pre { margin-bottom: 0.4rem !important; } .hero--bleed .hero__headline { font-size: clamp(1.5rem, 7vw, 1.85rem) !important; line-height: 1.06 !important; margin-bottom: 0.4rem !important; } .hero--bleed .hero__deck { margin: 0.2rem auto 0.55rem !important; padding: 0.28rem 0.7rem !important; } .hero--bleed .hero__sub { font-size: 0.875rem !important; line-height: 1.45 !important; margin-bottom: 0.6rem !important; } /* Bullets bleiben sichtbar — Copy darf nicht entfernt werden. Knapp gehalten, damit CTA above-the-fold bleibt. */ .hero--bleed .hero__bullets { margin-bottom: 0.65rem !important; gap: 0.35rem !important; display: flex !important; flex-direction: column !important; } .hero--bleed .hero__bullets li { font-size: 0.78rem !important; line-height: 1.32 !important; gap: 0.45rem !important; } .hero--bleed .hero__bullets svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; } .hero--bleed .hero__cta-row { margin-top: 0.5rem !important; gap: 0.625rem !important; } .hero--bleed .hero__split { padding-top: 0 !important; } /* mobile: center-align all hero text except bullet list */ .hero--bleed .hero__text { text-align: center !important; align-items: center !important; } .hero--bleed .hero__headline, .hero--bleed .hero__deck, .hero--bleed .hero__sub { text-align: center !important; margin-left: auto !important; margin-right: auto !important; text-wrap: balance !important; } .hero--bleed .hero__deck { font-size: 0.95rem !important; line-height: 1.3 !important; max-width: 30ch !important; padding: 0.4rem 0.85rem !important; text-wrap: balance !important; } .hero--bleed .hero__cta-row { justify-content: center !important; text-align: center !important; } /* tagline mobile: drop pill chrome, just dot + uppercase text inline, centered, 2 clean lines via text-wrap balance */ .hero--bleed .hero__pre { display: inline-flex !important; align-items: flex-start !important; justify-content: center !important; gap: 0.5em !important; font-size: 0.6875rem !important; letter-spacing: 0.08em !important; line-height: 1.45 !important; text-align: center !important; text-wrap: balance; max-width: 32ch; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 auto 1rem !important; } .hero--bleed .hero__pre::before { margin-top: 0.55em; flex: 0 0 auto; width: 4px; height: 4px; } /* bullets stay left-aligned per request */ .hero--bleed .hero__bullets, .hero--bleed .hero__bullets li { text-align: left !important; } } /* ========================================================================= FINAL OVERRIDES — Tagline-Dots & Footer-Wordmark ========================================================================= */ /* Roten Dot in allen Tagline-Pills entfernen — wirkte zweizeilig oft krumm */ .pre::before, .hero__pre::before, .story__pre::before, .problem-split__pre::before, .benefits-bento__pre::before, .leist-tabs__pre::before, .faq-editorial__intro .pre::before, .hero--bleed .hero__pre::before, .section__pre::before { display: none !important; content: none !important; } /* Footer-Editorial-Wordmark "CopyStudio.Marketing" auf Mobile heller — Desktop bleibt subtil, aber 390px-Display soll's klar lesbar machen. */ @media (max-width: 768px) { .cs-footer__editorial-text { background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.14) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .cs-footer__editorial-text em { background: linear-gradient(180deg, rgba(217, 80, 48, 0.85) 0%, rgba(217, 80, 48, 0.42) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* CTA-Buttons: Text auf Mobile IMMER zentriert, auch bei Umbruch über mehrere Zeilen. */ .cta, .cta--primary, .cta--ghost, .cta--xl, .cta-final__button, .leist-tabs__cta .cta, .benefits-bento__cta .cta, .cs-bento__cta .cta { justify-content: center !important; text-align: center !important; } /* Mobile: Zeitaufwand-Pill direkt UNTER dem Eyebrow "Schritt XX · YY" in der Stage-Card. Via flex-order zwischen num und title gepackt. */ .section--methode-tabs .leist-stage__num { order: 0 !important; } .section--methode-tabs .leist-stage__time { order: 1 !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; align-self: flex-start !important; margin-top: 0.4rem !important; margin-bottom: 0.2rem !important; padding: 0.35rem 0.7rem !important; background: rgba(217, 80, 48, 0.10) !important; border: 1px solid rgba(217, 80, 48, 0.32) !important; border-radius: 999px !important; font-size: 0.6875rem !important; letter-spacing: 0.02em !important; color: var(--accent) !important; line-height: 1.25 !important; font-weight: 600 !important; } .section--methode-tabs .leist-stage__title { order: 2 !important; } .section--methode-tabs .leist-stage__desc { order: 3 !important; } .section--methode-tabs .leist-stage__time svg { flex: 0 0 auto !important; width: 12px !important; height: 12px !important; max-height: 12px !important; } } @media (min-width: 861px) { .section--methode-tabs .leist-stage__time { display: none !important; } } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 10000; padding: 0.6rem 1rem; background: var(--accent); color: #fff; border-radius: 6px; font-family: var(--font-mono); font-size: 0.75rem; text-decoration: none; transition: top 200ms ease-out; } .skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; } /* ========================================================================= LEGAL PAGES (Impressum / Datenschutz) — Editorial Long-Form Layout ========================================================================= */ .legal-page { background: #F7F4ED; color: #1A1A1C; min-height: 100vh; padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(3rem, 6vw, 5rem); } .legal-page__header { max-width: 820px; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); padding-inline: var(--gutter, 1.5rem); text-align: center; } .legal-page__eyebrow { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.42em 0.95em; border: 1px solid rgba(217, 80, 48, 0.32); background: rgba(217, 80, 48, 0.10); border-radius: 999px; color: #B83E1E; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1.25rem; } .legal-page__title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; margin: 0; color: #1A1A1C; } .legal-page__lead { margin: 1rem auto 0; font-size: clamp(0.95rem, 1.05vw, 1.0625rem); line-height: 1.65; color: rgba(26, 26, 28, 0.72); max-width: 60ch; } .legal-page__content { max-width: 820px; margin: 0 auto; padding-inline: var(--gutter, 1.5rem); font-size: 1rem; line-height: 1.75; color: rgba(26, 26, 28, 0.82); } .legal-page__content > * + * { margin-top: 1rem; } .legal-page__content h2 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; color: #1A1A1C; margin: clamp(2.5rem, 4vw, 3rem) 0 1rem; padding-top: clamp(2rem, 3vw, 2.5rem); border-top: 1px solid rgba(0, 0, 0, 0.10); } .legal-page__content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .legal-page__content h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: #1A1A1C; margin: 1.5rem 0 0.5rem; } .legal-page__content p { margin: 0; } .legal-page__content strong { color: #1A1A1C; font-weight: 700; } .legal-page__content a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .legal-page__content a:hover { color: #B83E1E; } .legal-page__content ul { margin: 0.75rem 0 0; padding-left: 1.25rem; list-style: none; } .legal-page__content ul li { position: relative; padding-left: 1rem; margin: 0.4rem 0; } .legal-page__content ul li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .legal-page__address { display: block; font-style: normal; margin: 0.5rem 0 0; line-height: 1.6; } .legal-page__back { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: 0.9rem 1.5rem; border-radius: 999px; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.12); color: #1A1A1C; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 240ms, border-color 240ms; } .legal-page__back:hover { background: rgba(217, 80, 48, 0.12); border-color: rgba(217, 80, 48, 0.5); color: #B83E1E; } /* ========================================================================= LIGHT-MODE — Alternierende Section-Backgrounds (NUR in dieser Variante) Black bleiben: hero, logos, benefits (Prinzip), methode, passend, ueber-uns, faq, footer White werden: probleme, leistungen, vergleich, testimonials, how, cta-final Cards INNERHALB der White-Sections behalten ihr dunkles Design für Kontrast — nur Section-Background + Section-Header-Text wird invertiert. ========================================================================= */ /* Section-Hintergründe: warmes Off-White für Editorial-Charakter */ .section--problem-stories, .section--leistungen-bento, .section--vergleich, .section--testimonials, .section--how, .section--cta-final { background: #F7F4ED !important; color: #1A1A1C; } /* Glow-::before drastisch dimmen — auf weißem BG ist Coral-Glow zu schwach */ .section--problem-stories::before, .section--leistungen-bento::before, .section--vergleich::before, .section--testimonials::before, .section--how::before, .section--cta-final::before { opacity: 0.45 !important; mix-blend-mode: multiply !important; } /* Section-Hairline-::after (Coral-Trennlinie unten): bleibt sichtbar, aber auf weiß zu hell — durch dunklere RGBA ersetzen */ .section--problem-stories::after, .section--leistungen-bento::after, .section--vergleich::after, .section--testimonials::after, .section--how::after, .section--cta-final::after { background: linear-gradient(90deg, rgba(217, 80, 48, 0) 0%, rgba(0, 0, 0, 0.08) 30%, rgba(217, 80, 48, 0.85) 50%, rgba(0, 0, 0, 0.08) 70%, rgba(217, 80, 48, 0) 100%) !important; } /* Section-Numeral (kleine "06.", "07." Zahl oben links): auf weißem BG dezenter */ .section--problem-stories .section-numeral, .section--leistungen-bento .section-numeral, .section--vergleich .section-numeral, .section--testimonials .section-numeral, .section--how .section-numeral, .section--cta-final .section-numeral { color: rgba(0, 0, 0, 0.08) !important; } /* ----- Section-Header-Text (Eyebrow + Headline + Sub) → DARK ----- */ /* Eyebrow-Pill: Coral-Akzent bleibt, BG/Border dunkler getönt damit auf cream sichtbar */ .section--problem-stories .pre--red, .section--leistungen-bento .pre--red, .section--vergleich .pre--red, .section--testimonials .pre--red, .section--how .pre--red, .section--cta-final .pre--red { background: rgba(217, 80, 48, 0.10) !important; border-color: rgba(217, 80, 48, 0.32) !important; color: #B83E1E !important; } /* Headlines + Sub-Headlines */ .section--problem-stories .section__headline, .section--leistungen-bento .section__headline, .section--vergleich .section__headline, .section--testimonials .section__headline, .section--how .section__headline, .section--cta-final .cta-final__headline { color: #1A1A1C !important; text-shadow: none !important; } .section--problem-stories .section__headline strong, .section--leistungen-bento .section__headline strong, .section--vergleich .section__headline strong, .section--testimonials .section__headline strong, .section--how .section__headline strong, .section--cta-final .cta-final__headline strong { color: #1A1A1C !important; -webkit-text-fill-color: #1A1A1C !important; } .section--problem-stories .section__sub, .section--leistungen-bento .section__sub, .section--vergleich .section__sub, .section--testimonials .section__sub, .section--how .section__sub, .section--cta-final .cta-final__sub { color: rgba(26, 26, 28, 0.72) !important; } .section--problem-stories .section__sub strong, .section--leistungen-bento .section__sub strong, .section--vergleich .section__sub strong, .section--testimonials .section__sub strong, .section--how .section__sub strong, .section--cta-final .cta-final__sub strong { color: #1A1A1C !important; } /* CTA-Final spezielle Sub-Texte (eyebrow ist hier .cta-final__eyebrow nicht __pre) */ .section--cta-final .cta-final__eyebrow { color: #B83E1E !important; } /* Method__pull-quote (Vergleich) und ähnliche italic Pull-Quotes auf hell */ .section--vergleich blockquote, .section--vergleich .method__pull-quote, .section--testimonials .cs-test__quote, .section--testimonials .cs-test__quote-cite, .section--testimonials .cs-test__quote-cite span, .section--testimonials blockquote { color: #1A1A1C !important; } .section--testimonials .cs-test__quote-cite strong { color: #1A1A1C !important; } /* ----- Spezial-Cases ----- */ /* CTA-Final: fast komplett text-only, kein Card. Background-Glow stark dimmen. */ .section--cta-final { background: #F7F4ED !important; } /* How-Section: how-flow__pre/post-Texte unter den Cards lesbar */ .section--how .how-flow__cta-row, .section--how .how-flow__post { color: rgba(26, 26, 28, 0.78) !important; } /* Vergleich: ba__intro Text falls hardcoded weiß */ .section--vergleich .ba__intro, .section--vergleich .ba__intro p { color: rgba(26, 26, 28, 0.72) !important; } /* Testimonials: cs-test outer header description / sub-elements */ .section--testimonials .cs-test__quote { color: #1A1A1C !important; } /* Stories-Section header: "Die Realität ..." Sub-Text */ .section--problem-stories .problem-stories__header p { color: rgba(26, 26, 28, 0.72); } .section--problem-stories .problem-stories__header p strong { color: #1A1A1C !important; } /* ========================================================================= LIGHT-MODE — Iteration 2: Light-Cards in White-Sections Cards (Leistungen, Vergleich, Testimonials, How) → cream/white BG, dunkler Text, SVG-Icons mit invert-hue-Filter zum Anpassen. ========================================================================= */ /* ------ "Stagnierende Umsätze" + andere headline em (italic) → dunkel ------ */ .section--problem-stories .section__headline em, .section--leistungen-bento .section__headline em, .section--vergleich .section__headline em, .section--testimonials .section__headline em, .section--how .section__headline em, .section--cta-final .cta-final__headline em { color: #1A1A1C !important; -webkit-text-fill-color: #1A1A1C !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; } /* ------ Probleme: Bottom-Quote "Als Experte bist du oftmals..." ------ */ .section--problem-stories .problem-stories__quote { color: #1A1A1C !important; } .section--problem-stories .problem-stories__quote em { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; } /* ========================================================================= LEISTUNGEN — cs-bento__card → light ========================================================================= */ .section--leistungen-bento .cs-bento__card { background: linear-gradient(155deg, #FFFFFF 0%, #FAF6EE 100%) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.18) !important; color: #1A1A1C !important; } .section--leistungen-bento .cs-bento__num { color: rgba(26, 26, 28, 0.45) !important; } .section--leistungen-bento .cs-bento__title { color: #1A1A1C !important; } .section--leistungen-bento .cs-bento__desc { color: rgba(26, 26, 28, 0.72) !important; } .section--leistungen-bento .cs-bento__desc strong { color: #1A1A1C !important; } .section--leistungen-bento .cs-bento__card .cs-bento__art { background: linear-gradient(180deg, #FAFAF7 0%, #F0EDE7 100%) !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; border-radius: 12px !important; } /* SVG-Inhalt invertieren — flippt weiß↔dunkel, Coral bleibt erhalten */ .section--leistungen-bento .cs-bento__card svg { filter: invert(1) hue-rotate(180deg); } /* ========================================================================= VERGLEICH — ba__col cards → light ========================================================================= */ .section--vergleich .ba__col { background: linear-gradient(155deg, #FFFFFF 0%, #FAF6EE 100%) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.18) !important; color: #1A1A1C !important; } .section--vergleich .ba__col--bad { background: linear-gradient(155deg, #F4EFE6 0%, #ECE5D7 100%) !important; border-color: rgba(0, 0, 0, 0.10) !important; } .section--vergleich .ba__col--good { background: linear-gradient(155deg, #FFF5EE 0%, #FFE9DC 100%) !important; border-color: rgba(217, 80, 48, 0.32) !important; } .section--vergleich .ba__col-title { color: #1A1A1C !important; } .section--vergleich .ba__col--bad .ba__col-title { color: rgba(26, 26, 28, 0.55) !important; } .section--vergleich .ba__col--good .ba__col-title { color: #1A1A1C !important; } .section--vergleich .ba__row p { color: rgba(26, 26, 28, 0.72) !important; } .section--vergleich .ba__col--bad .ba__row p { color: rgba(26, 26, 28, 0.55) !important; } .section--vergleich .ba__col--good .ba__row p { color: #1A1A1C !important; } .section--vergleich .ba__col--bad .ba__icon { color: rgba(26, 26, 28, 0.4) !important; } .section--vergleich .ba__col--good .ba__icon { color: var(--accent) !important; } .section--vergleich blockquote.method__pull-quote { color: #1A1A1C !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* ========================================================================= TESTIMONIALS — cs-case container card → light Wistia-Video-Thumb bleibt dunkel (Bild-Asset), Card-Chrome wird hell. ========================================================================= */ .section--testimonials .cs-case { background: linear-gradient(155deg, #FFFFFF 0%, #FAF6EE 100%) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 24px 60px -22px rgba(0, 0, 0, 0.20) !important; color: #1A1A1C !important; } .section--testimonials .cs-case * { color: inherit; } .section--testimonials .cs-case__name { color: #1A1A1C !important; } .section--testimonials .cs-case__role { color: rgba(26, 26, 28, 0.6) !important; } .section--testimonials .cs-case__meta--below { border-top-color: rgba(0, 0, 0, 0.08) !important; } .section--testimonials .cs-case__logo { filter: brightness(0.4) contrast(1.2) !important; /* dunkel auf hellem Card */ opacity: 0.9 !important; } .section--testimonials .cs-case__psr-block h3, .section--testimonials .cs-case__psr-block strong { color: #1A1A1C !important; } .section--testimonials .cs-case__psr-block p, .section--testimonials .cs-case__psr-block { color: rgba(26, 26, 28, 0.78) !important; } .section--testimonials .cs-case__quote-lead, .section--testimonials .cs-case__quote-name, .section--testimonials .cs-case__quote-cite, .section--testimonials .cs-case__quote-cite span { color: #1A1A1C !important; } .section--testimonials .cs-case__quote-lead strong { color: #1A1A1C !important; } .section--testimonials .cs-case__badge { background: rgba(217, 80, 48, 0.10) !important; border-color: rgba(217, 80, 48, 0.32) !important; color: #B83E1E !important; } /* Outer cs-test__quote (Pull-Quote unter der Card) auf weißem BG → dunkel. Wichtig: das

drinnen hat eigene Color-Regel mit höherer Specificity. */ .section--testimonials .cs-test__quote, .section--testimonials .cs-test__quote p { color: #1A1A1C !important; } .section--testimonials .cs-test__quote em, .section--testimonials .cs-test__quote p em { color: var(--accent) !important; } .section--testimonials .cs-test__quote-cite strong { color: #1A1A1C !important; } .section--testimonials .cs-test__quote-cite span { color: rgba(26, 26, 28, 0.6) !important; } /* ========================================================================= HOW — how-flow__step cards → light ========================================================================= */ .section--how .how-flow__step, .section--how .how-step { background: linear-gradient(155deg, #FFFFFF 0%, #FAF6EE 100%) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.18) !important; color: #1A1A1C !important; } .section--how .how-flow__step:hover, .section--how .how-step:hover { background: linear-gradient(155deg, #FAF8F2 0%, #F4EEE2 100%) !important; } .section--how .how-flow__step::after, .section--how .how-step::after { color: rgba(217, 80, 48, 0.10) !important; } .section--how .how-flow__num, .section--how .how-step__num { color: var(--accent) !important; } .section--how .how-flow__title, .section--how .how-step__title { color: #1A1A1C !important; } .section--how .how-flow__body, .section--how .how-flow__step p, .section--how .how-step p, .section--how .how-step__desc { color: rgba(26, 26, 28, 0.78) !important; } .section--how .how-flow__step strong, .section--how .how-step strong { color: #1A1A1C !important; } /* Connector-Hairline zwischen den Step-Header-Elementen auf hell */ .section--how .how-flow__connector { background: rgba(0, 0, 0, 0.10) !important; } /* SVG-Icons in How-Cards invertieren — flippt Weiß↔Schwarz, Coral bleibt */ .section--how .how-flow__art svg, .section--how .how-flow__step svg, .section--how .how-step svg { filter: invert(1) hue-rotate(180deg); }