/* =========================================================================
MARCEL DAVIA MEDIA — styles.css
Design System: siehe DESIGN.md
========================================================================= */
/* ------- Fonts ------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');
/* ------- Tokens ------- */
:root {
/* Colors */
--brand-red: #E8151C;
--brand-red-hover: #C10F16;
--ink: #0B0B0D;
--ink-deep: #060607;
--paper: #FAFAF7;
--paper-2: #F2F1EC;
--paper-on-ink: #F5F3EC;
--mute: #6B6B70;
--faint: #9A9A9F;
--line: #E5E4DE;
--line-dark: #1A1A1C;
--red-rgb: 232 21 28;
--ink-rgb: 11 11 13;
--green: #1F7A3A;
--green-rgb: 31 122 58;
/* Typography */
--font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
--font-body: 'Inter', -apple-system, system-ui, 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);
/* 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;
color: var(--brand-red);
}
.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; }
}