/* ==========================================================================
   Screenpunks – Entwurf B „Scrollen = Play“
   Farben nach „Hypershare Kombi v2“: Pink #E0137A · Lila #8E3FB0 · Blau #3A6FB5
   Dunkel #0A0A0F / Fläche #18181F / Text #F2F2F7 · Hell (Creme) #F4F2EE / Text #16151A
   Schrift: Montserrat Variable (100–900) – Thin-Italic gegen Black als Stilmittel
   ========================================================================== */

/*FONTFACE*/
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-variable-latin.woff2") format("woff2"), url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-variable-italic-latin.woff2") format("woff2"), url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }
/*/FONTFACE*/

@property --bg { syntax: "<color>"; inherits: true; initial-value: #0A0A0F; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #F2F2F7; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #A3A3B5; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #2A2A33; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --pink: #E0137A; --pink-deep: #D4106F; --lila: #8E3FB0; --blau: #3A6FB5; --tief: #0A0A0F; --surface: #18181F; --creme: #F4F2EE; --weiss: #FFFFFF;
  --pink-text: #FF5CC0; --grad: linear-gradient(100deg, #D4106F 0%, #8E3FB0 55%, #3A6FB5 100%);
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 72rem; /* Inhaltsbreite – Logos, Filmrolle und Stimmen dürfen weiterhin die volle Breite nutzen */
  --inset: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  --bar: 3.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { overflow-x: clip; font-size: clamp(100%, 0.25vw + 0.775rem, 120%); scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; padding-bottom: var(--bar);
  background: var(--bg); color: var(--fg);
  font: 400 1.0625rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: --bg .8s var(--ease), --fg .8s var(--ease), --muted .8s var(--ease), --line .8s var(--ease);
}
body[data-theme="light"], .timeline__peek-frame[data-theme="light"] { --bg: #F4F2EE; --fg: #16151A; --muted: #55514A; --line: #E7E3DC; --pink-text: #C2106A; }
body[data-theme="pink"], .timeline__peek-frame[data-theme="pink"] { --bg: #D4106F; --fg: #FFFFFF; --muted: #FBD9EA; --line: #F27BB8; --pink-text: #FFFFFF; }

img, video, svg, canvas { display: block; max-width: 100%; }
p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; }
address { font-style: normal; }
a { color: inherit; text-decoration-thickness: .1em; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--pink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 300; padding: .75rem 1rem; background: var(--pink); color: #FFFFFF; font-weight: 800; border-radius: 99rem; text-decoration: none; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typografie ---------- */
.display, .mega { font-weight: 900; text-transform: uppercase; line-height: .88; letter-spacing: -.04em; text-wrap: balance; }
.display { font-size: clamp(2.5rem, 1rem + 4vw, 5.25rem); }
.mega { font-size: clamp(3.4rem, 1rem + 8vw, 9rem); line-height: .82; letter-spacing: -.05em; }
.thin { display: block; margin-bottom: .18em; font-weight: 200; font-style: italic; font-size: .52em; line-height: 1; letter-spacing: -.02em; text-transform: none; }
.mega .thin { font-size: .36em; margin-bottom: .1em; }
.lead { font-size: clamp(1.125rem, 1rem + .55vw, 1.4rem); line-height: 1.5; font-weight: 500; }
.eyebrow-h { margin-bottom: 1.5rem; font-size: 1.125rem; font-weight: 800; color: var(--pink-text); }
.todo { font-style: italic; opacity: .7; }

/* Überschriften fahren beim Eintritt einmal hoch */
/* Der Clip liegt auf einem inneren Wrapper – am beobachteten Element selbst würde er den IntersectionObserver blind machen */
.js .rise > .rise__in { display: block; clip-path: inset(0 0 100% 0); transform: translateY(.35em); transition: clip-path .9s var(--ease), transform .9s var(--ease); }
.js .rise.in > .rise__in { clip-path: inset(-10% -5% -10% -5%); transform: none; }
.js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .85em 1.45em; border: 2px solid transparent; border-radius: 99rem;
  background-origin: border-box; background-clip: border-box; /* Verlauf bis unter den transparenten Rand, sonst wiederholt er sich an den Kanten */
  font: 800 .9375rem/1.1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  transform: translate(var(--tx, 0), var(--ty, 0));
}
.btn > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .6em; }
.btn::before { /* Füllung breitet sich von der Cursorposition aus */
  content: ""; position: absolute; z-index: 0; left: var(--mx, 50%); top: var(--my, 50%);
  width: 0; height: 0; border-radius: 50%; background: var(--fill, #F2F2F7);
  transform: translate(-50%, -50%); transition: width .45s var(--ease), height .45s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { width: 32em; height: 32em; }
.btn--xl { padding: 1.1em 1.9em; font-size: 1.0625rem; }
.btn--pink { background: var(--grad) border-box; color: #FFFFFF; --fill: #FFFFFF; }
.btn--pink:hover, .btn--pink:focus-visible { color: #16151A; }
.btn--dark { background: #16151A; color: #F2F2F7; --fill: #FFFFFF; }
.btn--dark:hover, .btn--dark:focus-visible { color: #16151A; }
.btn--line { border-color: currentColor; background: transparent; color: inherit; --fill: var(--fg); }
.btn--line:hover, .btn--line:focus-visible { color: var(--bg); border-color: var(--fg); }
body[data-theme="pink"] .top .btn--pink { background: #16151A; color: #F2F2F7; }
body[data-theme="pink"] .top .btn--pink:hover { color: #16151A; }

.round { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 2px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.round:hover { background: var(--pink); border-color: var(--pink); color: #FFFFFF; transform: scale(1.06); }
.round--lg { width: 4.5rem; height: 4.5rem; }

.chip { padding: .8em 1.4em; border: 2px solid currentColor; border-radius: 99rem; background: transparent; font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.35rem); cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--ease); }
.chip:hover { transform: translateY(-2px) rotate(-1deg); }
.chip[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- Klebeband (Marken-Geste aus dem Original) ---------- */
.tape { display: block; width: fit-content; transform: rotate(-2.5deg); transform-origin: left center; }
.tape__ink { background: var(--pink); color: #fff; padding: .06em .34em .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ==========================================================================
   Ebenen hinter/über dem Inhalt
   ========================================================================== */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop > * { position: absolute; inset: -12%; will-change: transform; }
.backdrop__glow { opacity: var(--glow, 1); transition: opacity 1s var(--ease);
  background: radial-gradient(52% 44% at 80% 10%, rgba(142, 63, 176, .55), transparent 70%),
              radial-gradient(44% 40% at 6% 2%, rgba(224, 19, 122, .42), transparent 70%),
              radial-gradient(40% 36% at 90% 88%, rgba(58, 111, 181, .3), transparent 70%);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
.backdrop__beam { opacity: var(--glow, 1); transition: opacity 1s var(--ease); inset: -40% -20%;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .045) 50%, transparent 62%);
  transform: translate3d(calc(var(--px, 0px) * 2), calc(var(--py, 0px) * 1.6), 0); }
.backdrop__grid { opacity: .55; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.6px); background-size: 2.75rem 2.75rem; background-position: var(--gx, 0px) var(--gy, 0px);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 15%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 15%, transparent 100%); }
body[data-theme="light"] .backdrop__glow { opacity: calc(var(--glow, 1) * .24); }
body[data-theme="light"] .backdrop__beam { opacity: 0; }
body[data-theme="light"] .backdrop__grid { background-image: radial-gradient(rgba(22, 21, 26, .2) 1px, transparent 1.6px); }
body[data-theme="pink"] .backdrop__glow, body[data-theme="pink"] .backdrop__beam { opacity: 0; }
body[data-theme="pink"] .backdrop__grid { background-image: radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1.6px); }
.grain { position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) { .grain { animation: grain .9s steps(6) infinite; } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, 2%); } 100% { transform: translate(0, 0); } }

.cursor { position: fixed; left: 0; top: 0; z-index: 200; display: none; place-items: center; width: 0; height: 0; margin: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s, opacity .3s; }
.cursor__label { font-size: .75rem; font-weight: 900; letter-spacing: .04em; color: #fff; opacity: 0; transition: opacity .2s; }
.has-cursor .cursor { display: grid; opacity: 1; }
.cursor.is-play, .cursor.is-scrub, .cursor.is-drag { width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; background: var(--pink); }
.cursor.is-play .cursor__label, .cursor.is-scrub .cursor__label, .cursor.is-drag .cursor__label { opacity: 1; }
.has-cursor [data-cursor="play"], .has-cursor [data-cursor="play"] *, .has-cursor .sticker { cursor: none; }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
/* Inhalte, die unter der Kopfzeile durchlaufen, blenden in die jeweilige Abschnittsfarbe aus */
.top::before { content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; background: linear-gradient(var(--bg) 35%, transparent); opacity: var(--topfade, 0); transition: opacity .4s; pointer-events: none; }
.top { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--gutter); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: grid; font-weight: 900; font-style: italic; font-size: 1.2rem; line-height: .86; letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; color: var(--fg); transform: skewX(-6deg); }
.top__nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); }
.top__link { font-weight: 700; font-size: .9375rem; text-decoration: none; color: var(--fg); }
.top__link:hover { text-decoration: underline; text-decoration-color: var(--pink); }
@media (max-width: 30em) { .top .btn { padding: .7em 1.1em; font-size: .875rem; } }

/* ==========================================================================
   1 · Hero mit Monitor, der sich zum Vollbild-Showreel öffnet
   ========================================================================== */
.hero { position: relative; height: 200svh; }
.hero__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* Set-Foto in Schwarz-Weiß, stark gedämpft, mit Punktraster und Verlauf in den Seitenhintergrund */
.hero__bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .26; filter: grayscale(1) contrast(.9); }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 15, .5), rgba(10, 10, 15, .2) 40%, rgba(10, 10, 15, .75) 80%, var(--tief) 100%),
              radial-gradient(rgba(10, 10, 15, .9) 1px, transparent 1.7px) 0 0 / 1.25rem 1.25rem; }
.hero__copy { position: absolute; z-index: 3; left: var(--inset); right: var(--inset); bottom: calc(var(--bar) + clamp(1.5rem, 5vh, 4.5rem)); opacity: calc(1 - var(--fade, 0)); transform: translateY(calc(var(--fade, 0) * -8vh)); }
.hero.is-past .hero__copy { visibility: hidden; }
.hero__copy { pointer-events: none; } .hero__actions > * { pointer-events: auto; } /* Headline darf Klicks auf den Monitor nicht abfangen */
.hero__title { font-size: clamp(3rem, 8.4vw, 10rem); font-weight: 900; line-height: .84; letter-spacing: -.045em; text-transform: uppercase; }
.kinetic { display: block; width: fit-content; white-space: nowrap; }
.ch { display: inline-block; font-weight: var(--w, 900); will-change: font-weight; }
.hero .tape { margin-top: .32em; font-size: clamp(1.15rem, .3em, 4.2rem); font-weight: 800; line-height: 1.55; letter-spacing: -.015em; text-transform: none; }
.hero__sub { max-width: 34rem; margin: clamp(1.25rem, 3vh, 2.5rem) 0 0; font-size: clamp(1.0625rem, .95rem + .6vw, 1.4rem); font-weight: 500; line-height: 1.45; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.25rem, 3vh, 2rem); }

.monitor {
  position: absolute; z-index: 2; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08);
  --w0: min(38vw, 42rem); --l0: calc(100vw - var(--inset) - var(--w0)); --t0: 15svh; --r0: 4deg; --e: 0;
  left: calc(var(--l0) * (1 - var(--e))); top: calc(var(--t0) * (1 - var(--e)));
  width: calc(var(--w0) + (100vw - var(--w0)) * var(--e));
  height: calc(var(--w0) * .5625 + (100svh - var(--w0) * .5625) * var(--e));
  border-radius: calc(1.1rem * (1 - var(--e)));
  transform: rotate(calc(var(--r0) * (1 - var(--e))));
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .6);
  background: #0A0A0F;
}
.monitor__screen { position: absolute; inset: 0; }
.monitor__screen > video { width: 100%; height: 100%; object-fit: cover; }
.footage { background:
    radial-gradient(38% 55% at 28% 38%, rgba(224, 19, 122, .95), transparent 62%),
    radial-gradient(45% 60% at 78% 68%, rgba(58, 111, 181, .9), transparent 60%),
    conic-gradient(from var(--ang) at 55% 45%, #1a0b20, #8E3FB0, #0A0A0F 40%, #3b1140, #3A6FB5 78%, #1a0b20); }
@media (prefers-reduced-motion: no-preference) { .footage { animation: footage 16s linear infinite; } }
@keyframes footage { to { --ang: 360deg; } }

.hud { position: absolute; inset: 0; opacity: max(0, calc(1 - var(--e) * 2)); font-size: clamp(.625rem, .5rem + .35vw, .8125rem); font-weight: 700; letter-spacing: .08em; color: #fff; }
.hud__rec { position: absolute; left: 1.1em; top: 1em; display: flex; align-items: center; gap: .5em; }
.hud__rec i { width: .8em; height: .8em; border-radius: 50%; background: #ff2d2d; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.hud__tc { position: absolute; right: 1.1em; top: 1em; font-variant-numeric: tabular-nums; }
.hud__info { position: absolute; right: 1.1em; bottom: 1em; opacity: .85; }
@media (max-width: 52em) { .hud__info { display: none; } }
.hud__corner { position: absolute; width: 1.6em; height: 1.6em; border: 2px solid rgba(255, 255, 255, .85); }
.hud__corner--tl { left: 14%; top: 20%; border-right: 0; border-bottom: 0; } .hud__corner--tr { right: 14%; top: 20%; border-left: 0; border-bottom: 0; }
.hud__corner--bl { left: 14%; bottom: 20%; border-right: 0; border-top: 0; } .hud__corner--br { right: 14%; bottom: 20%; border-left: 0; border-top: 0; }
.hud__cross { position: absolute; left: 50%; top: 50%; width: 1.4em; height: 1.4em; margin: -.7em 0 0 -.7em; background: linear-gradient(#fff, #fff) 50% 50% / 100% 2px no-repeat, linear-gradient(#fff, #fff) 50% 50% / 2px 100% no-repeat; opacity: .8; }

.monitor__sound { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: center; gap: .6em; padding: .9em; border: 0; border-radius: 99rem; background: rgba(10, 10, 15, .55); color: #fff; font-weight: 900; font-size: clamp(1rem, .9rem + .5vw, 1.35rem); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(calc(.75 + var(--e, 0) * .35)); transition: background-color .25s, box-shadow .25s; }
.monitor__sound:hover { background: var(--pink); box-shadow: 0 0 0 2px var(--pink); }
.monitor__sound[aria-pressed="true"] { background: var(--pink); box-shadow: 0 0 0 2px var(--pink); }
.monitor__sound span { display: block; overflow: hidden; white-space: nowrap; max-width: calc(clamp(0, (var(--e, 0) - .7) * 4, 1) * 8em); padding-right: calc(clamp(0, (var(--e, 0) - .7) * 4, 1) * .4em); opacity: clamp(0, calc((var(--e, 0) - .8) * 6), 1); }
.monitor__sound-on, .monitor__sound[aria-pressed="true"] .monitor__sound-off { display: none; } .monitor__sound[aria-pressed="true"] .monitor__sound-on { display: block; }
@media (prefers-reduced-motion: no-preference) { .monitor__sound[aria-pressed="false"] { animation: pulse 2.4s ease-in-out infinite; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.monitor__sound[hidden] { display: none; }
.monitor[data-sound="off"] { cursor: default; }
.monitor__note { position: absolute; left: 1.1em; top: 3.2em; z-index: 2; margin: 0; padding: .4em .8em; border-radius: 99rem; background: rgba(0, 0, 0, .6); color: #fff; font-size: .75rem; font-weight: 700; }

.hero__hint { position: absolute; z-index: 3; right: var(--inset); bottom: calc(var(--bar) + 1.5rem); display: flex; align-items: center; gap: .8rem; margin: 0; font-size: .8125rem; font-weight: 800; letter-spacing: .04em; opacity: calc(.85 - var(--fade, 0) * 2); }
.hero__hint i { width: 3.5rem; height: 2px; background: linear-gradient(90deg, var(--pink), transparent); transform-origin: left; animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

@media (max-width: 52em) {
  .monitor { --w0: calc(100vw - 2 * var(--gutter)); --l0: var(--gutter); --t0: 5.25rem; --r0: -2deg; }
  .hero__hint { display: none; }
  .hero__actions .btn { flex: 1 1 auto; }
}
@media (max-width: 52em) and (max-height: 42em) { .hero__sub { display: none; } }

/* Seitenaufbau: einmalige Choreografie */
@media (prefers-reduced-motion: no-preference) {
  .js .kinetic { animation: in-up .9s var(--ease) both; } .js .kinetic:nth-child(2) { animation-delay: .12s; }
  .js .hero .tape { animation: slap .55s cubic-bezier(.2, 1.5, .4, 1) .75s both; }
  .js .hero__sub, .js .hero__actions { animation: in-fade .7s ease 1.05s both; }
  .js .monitor { animation: monitor-in 1.1s var(--ease) .25s both; }
}
@keyframes in-up { from { opacity: 0; transform: translateY(.5em) skewY(4deg); } to { opacity: 1; transform: none; } }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slap { from { opacity: 0; transform: rotate(-10deg) scale(1.3); } to { opacity: 1; transform: rotate(-2.5deg) scale(1); } }
@keyframes monitor-in { from { opacity: 0; translate: 12vw -6vh; rotate: 14deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* Ohne Szenen-Logik (kein JS / reduzierte Bewegung): ruhiges, statisches Layout */
html:not(.js) .hero, .reduce .hero { height: auto; }
html:not(.js) .hero__sticky, .reduce .hero__sticky { position: relative; height: auto; min-height: 100svh; }

/* ---------- Kundenlogos ---------- */
.logos { position: relative; z-index: 4; overflow: hidden; padding-block: 1.6rem; border-block: 1px solid var(--line); background: var(--bg); }
.logos__track { display: flex; width: max-content; }
.logos__list { display: flex; align-items: center; flex-shrink: 0; gap: clamp(2.5rem, 5vw, 5.5rem); padding-right: clamp(2.5rem, 5vw, 5.5rem); }
.logos__list img { height: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); width: auto; max-width: none; opacity: .72; transition: opacity .3s; }
.logos:hover .logos__list img { opacity: .95; }
@media (prefers-reduced-motion: no-preference) { .logos__track.is-ready { animation: marquee var(--marquee-duration, 40s) linear infinite; } .logos:hover .logos__track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(var(--marquee-shift, -50%)); } }

/* ==========================================================================
   2 · Warum – Text wird beim Scrollen „eingeblendet“
   ========================================================================== */
.manifest { margin-top: clamp(3.5rem, 7vw, 7rem); /* Luft unter dem Logo-Band; Höhe (Pin-Strecke) setzt main.js: Inhalt + 100vh */ }
.manifest__sticky { position: sticky; top: var(--pin-top, 0px); will-change: transform; padding-block: 1rem; }
.manifest__title { margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.loud { display: inline-block; margin-right: .22em; padding: 0 .1em; background: var(--pink); color: #fff; transform: rotate(-2deg); }
.rise.in .loud { animation: jolt .7s cubic-bezier(.3, 1.6, .5, 1) .5s both; }
@keyframes jolt { 0% { transform: rotate(-2deg) scale(1); } 20% { transform: rotate(2deg) scale(1.12) translateY(-.04em); } 40% { transform: rotate(-3deg) scale(1.08); } 60% { transform: rotate(1.5deg) scale(1.04); } 100% { transform: rotate(-2deg) scale(1); } }
.reduce .rise.in .loud { animation: none; }
.manifest__text { max-width: 24em; margin: 0; font-size: clamp(1.35rem, .85rem + 1.7vw, 2.6rem); font-weight: 800; line-height: 1.16; letter-spacing: -.025em; }
.js .manifest .w { opacity: .13; transition: opacity .25s linear; }
.js .manifest .w.on { opacity: 1; }
html:not(.js) .manifest, .reduce .manifest { height: auto; margin-bottom: 0 !important; }
html:not(.js) .manifest__sticky, .reduce .manifest__sticky { transform: none !important; top: auto; padding-block: clamp(4rem, 8vw, 8rem); }
.reduce .manifest .w { opacity: 1 !important; }

.needs { padding-block: clamp(3rem, 8vw, 8rem) clamp(5rem, 10vw, 10rem); }
.needs .display { margin-bottom: clamp(2rem, 4vw, 4rem); }
.needs__stack { display: grid; gap: 1.5rem; }
.need { position: sticky; top: calc(5.5rem + var(--i, 0) * 1.4rem); min-height: min(48svh, 25rem); border-radius: clamp(1.25rem, 2.5vw, 2.25rem); transform: rotate(var(--rot, 0deg)); perspective: 1600px; cursor: pointer; outline-offset: 6px; }
.need:nth-child(1) { --i: 0; --rot: -1.2deg; } .need:nth-child(2) { --i: 1; --rot: 1deg; } .need:nth-child(3) { --i: 2; --rot: -.6deg; }
.need__inner { position: relative; min-height: inherit; border-radius: inherit; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.need.is-flipped .need__inner { transform: rotateY(180deg); }
.need__face { min-height: inherit; padding: clamp(1.5rem, 3.5vw, 3.25rem); border-radius: inherit; box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, .35); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.need__front { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 1rem 2rem; align-items: start; align-content: start; }
.need__back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; transform: rotateY(180deg); }
.need--pink .need__face { background: var(--pink); color: #fff; } .need--lila .need__face { background: var(--lila); color: #fff; } .need--blau .need__face { background: var(--blau); color: #fff; }
.need__back-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: .6em; }
.need__back-text { max-width: 38rem; margin: 0; font-size: clamp(1rem, .95rem + .4vw, 1.25rem); line-height: 1.5; }
.need__hint { position: absolute; right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.25rem, 3vw, 2.5rem); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; transition: background-color .25s, transform .3s var(--ease); }
.need:hover .need__hint { background: rgba(255, 255, 255, .18); transform: rotate(90deg); }
.need__title { grid-column: 1; font-size: clamp(2rem, 1rem + 3.4vw, 4.5rem); font-weight: 900; line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.need__front p { grid-column: 1; align-self: end; max-width: 32rem; margin: 0; padding-right: 3.5rem; font-size: clamp(1.125rem, 1rem + .5vw, 1.4rem); font-weight: 600; line-height: 1.35; } /* Desktop: unten in der Karte, mit Abstand zum Plus */
.need__art { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: clamp(5rem, 10vw, 9rem); }
.need__art svg { width: 100%; height: auto; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .heart { transform-origin: 60px 60px; animation: beat 1.1s ease-in-out infinite; }
  .orbit { transform-origin: 60px 60px; animation: spin 3.2s linear infinite; }
  .hand--m { transform-origin: 60px 60px; animation: spin 2.4s linear infinite; } .hand--h { transform-origin: 60px 60px; animation: spin 28.8s linear infinite; }
}
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
.needs__out { max-width: 46rem; margin-top: clamp(3rem, 6vw, 6rem); font-size: clamp(1.25rem, 1rem + .9vw, 1.85rem); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
@media (max-width: 40em) { .need__front { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } .need__art { grid-column: 1; grid-row: auto; } .need__front p { align-self: start; padding-right: 3.25rem; } /* Text direkt unter die Überschrift, Platz für das Plus rechts unten */ }

/* ==========================================================================
   3 · Dein Ziel
   ========================================================================== */
.goals { padding-block: clamp(4rem, 7vw, 7.5rem); }
.goals__tabs { display: flex; flex-wrap: wrap; gap: .75rem; margin: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 5rem); }
.goal { display: grid; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.goal[hidden] { display: none; }
.js .goal { animation: goal-in .6s var(--ease) both; }
@keyframes goal-in { from { opacity: 0; transform: translateY(1.5rem); } }
.goal__big { margin-bottom: 1.2em; font-size: clamp(2rem, 1rem + 2.6vw, 3.75rem); font-weight: 900; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.goal__stat { margin: 0; font-size: clamp(5rem, 2rem + 7vw, 9rem); font-weight: 900; line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.goal__unit { margin-left: .04em; font-size: .45em; letter-spacing: 0; color: var(--pink-text); }
.goal__stat-text { margin: 1.2rem 0 2rem; max-width: 30rem; color: var(--muted); }
.goal__stat-text strong { display: block; color: var(--fg); font-size: 1.3rem; font-weight: 800; }
.goal__stat-text small { display: block; margin-top: .6em; font-size: .8125rem; }
.goal__films li { border-top: 1px solid var(--line); } .goal__films li:last-child { border-bottom: 1px solid var(--line); }
.goal__films button { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 0; border: 0; background: none; text-align: left; font-weight: 700; cursor: pointer; transition: padding .3s var(--ease), color .3s; }
.goal__films button::before { content: ""; flex-shrink: 0; width: 0; height: 0; border-style: solid; border-width: .45em 0 .45em .75em; border-color: transparent transparent transparent var(--pink); }
.goal__films button:hover { padding-left: .75rem; }
@media (min-width: 60em) { .goal { grid-template-columns: 7fr 5fr; } }

/* ==========================================================================
   4 · Arbeiten – Filmrolle
   ========================================================================== */
.reel { position: relative; padding-block: clamp(4rem, 8vw, 8rem); }
.reel__head { margin-bottom: clamp(1.5rem, 3vh, 3rem); }
.reel__head p { max-width: 40rem; margin-top: 1.2rem; color: var(--muted); }
.reel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reel__viewport::-webkit-scrollbar { display: none; }
.reel__track { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); width: max-content; padding-inline: var(--inset); }
.film { flex-shrink: 0; width: min(82vw, 64rem); scroll-snap-align: center; perspective: 1100px; }
.film__open { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: clamp(1rem, 1.6vw, 1.6rem); background: #0e0e0e; color: #F2F2F7; text-align: left; cursor: pointer; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease); }
.film__open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .88), rgba(10, 10, 10, .15) 48%, transparent 65%), radial-gradient(40rem 40rem at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .13), transparent 60%); }
.film__meta { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(1.1rem, 2.4vw, 2.75rem); }
.film__client { display: block; font-size: clamp(1.35rem, .8rem + 1.9vw, 3rem); font-weight: 900; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.film__kind { display: block; margin-top: .6em; font-size: clamp(.875rem, .8rem + .3vw, 1.125rem); font-weight: 600; color: #dcdcdc; }
.film__award { position: absolute; z-index: 1; left: 1.1rem; top: 1.2rem; padding: .35em .7em; background: var(--pink); color: #fff; font-size: .8125rem; font-weight: 900; transform: rotate(-2.5deg); }
.poster { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.poster > picture, .poster > img, .poster > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .poster img { width: 100%; height: 100%; object-fit: cover; }
.poster b { position: relative; }
.poster b { font-size: clamp(7rem, 22vw, 18rem); font-weight: 900; line-height: 1; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .45); mix-blend-mode: overlay; transition: transform .6s var(--ease); }
.film__open:hover .poster b { transform: scale(1.08) rotate(-3deg); }
.poster--1 { background: radial-gradient(60% 80% at 80% 20%, #E0137A, transparent 60%), linear-gradient(135deg, #2a0f26, #0A0A0F 70%); }
.poster--2 { background: radial-gradient(55% 75% at 20% 80%, #3A6FB5, transparent 62%), radial-gradient(40% 60% at 85% 15%, #E0137A, transparent 60%), #17131c; }
.poster--3 { background: conic-gradient(from 200deg at 70% 60%, #0A0A0F, #8E3FB0, #E0137A, #0A0A0F 60%); }
.poster--4 { background: radial-gradient(70% 90% at 50% 110%, #8E3FB0, transparent 60%), linear-gradient(200deg, #10202f, #0A0A0F 65%); }
.poster--5 { background: radial-gradient(45% 70% at 15% 20%, #E0137A, transparent 60%), radial-gradient(50% 70% at 90% 85%, #8E3FB0, transparent 60%), #151515; }
.poster--6 { background: conic-gradient(from 40deg at 30% 40%, #0A0A0F, #3A6FB5, #8E3FB0, #0A0A0F 55%); }
.film--cta { width: min(70vw, 34rem); }
.film__next { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1.5rem; height: 100%; min-height: 16rem; padding: clamp(1.25rem, 2.4vw, 2.75rem); border-radius: clamp(1rem, 1.6vw, 1.6rem); background: var(--pink); color: #fff; text-decoration: none; }
.film__next-num { font-size: 1rem; font-weight: 900; }
.film__next-text { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); font-weight: 900; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }

/* Angepinnt: vertikales Scrollen spult die Rolle horizontal */
.reel--pinned { padding-block: 0; margin-top: clamp(3rem, 5vw, 6rem); } /* Luft über „Mehr Punk geht nicht“ wie über dem Ziel-Wähler */
.reel--pinned .reel__sticky { position: sticky; top: var(--pin-top, 0px); padding: 1rem 0 1.5rem; overflow: hidden; } /* Höhe des Abschnitts (Inhalt + Überhang) setzt main.js */
.reel--pinned .reel__viewport { overflow: visible; }
.reel--pinned .reel__track { transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.reel--pinned .film { width: min(60vw, 56rem, calc((100svh - 17rem) * 1.7778)); }
.reel--pinned .film--cta { width: min(40vw, 30rem); }

/* ---------- Film-Dialog ---------- */
.player { width: min(100% - 1.5rem, 82rem); max-width: none; max-height: calc(100dvh - 1.5rem); padding: 0; border: 0; border-radius: 1.5rem; overflow: auto; background: #18181F; color: #F2F2F7; }
.player::backdrop { background: rgba(10, 10, 15, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.player[open] { animation: player-in .45s var(--ease); }
.player.no-anim[open] { animation: none; }
@keyframes player-in { from { opacity: 0; transform: translateY(2rem) scale(.96); } }
.player__stage { position: relative; aspect-ratio: 16 / 9; width: 100%; max-height: 66dvh; background: #000; overflow: hidden; }
.player__stage > video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player__stage .poster b { -webkit-text-stroke-color: rgba(246, 246, 246, .4); }
.player__note { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0; padding: .4em .8em; border-radius: 99rem; background: rgba(0, 0, 0, .65); font-size: .8125rem; font-weight: 700; }
.player__close { position: absolute; right: 1rem; top: 1rem; z-index: 3; background: rgba(12, 12, 12, .7); border-color: rgba(246, 246, 246, .4); color: #F2F2F7; }
.player__text { padding: clamp(1.5rem, 3.5vw, 3.5rem); }
.player__kind { margin-bottom: .5rem; font-weight: 700; color: var(--pink-text); }
.player__title { margin-bottom: .6em; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); font-weight: 900; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.player__story { max-width: 48rem; margin-bottom: 2rem; color: #C9C9D6; }
.player__story .film__hook { font-size: 1.1875rem; font-weight: 700; line-height: 1.45; color: #F2F2F7; }

/* ==========================================================================
   Award
   ========================================================================== */
.award { padding-block: clamp(6rem, 10.5vw, 11.25rem) clamp(4rem, 7vw, 7.5rem); overflow: hidden; }
.award__grid { display: grid; gap: 3rem; align-items: center; }
.award__lead { margin: 1.5rem 0 1rem; font-size: clamp(1.35rem, 1rem + 1vw, 2rem); font-weight: 900; letter-spacing: -.02em; }
.award__grid p { max-width: 36rem; }
.award .btn { margin-top: 1.25rem; }
.badge { justify-self: center; width: clamp(12rem, 22vw, 20rem); color: #FFFFFF; }
.badge svg { width: 100%; height: auto; overflow: visible; }
.badge text { font: 900 15.5px var(--font); letter-spacing: .12em; fill: currentColor; }
.badge__spin { transform-origin: 100px 100px; }
@media (prefers-reduced-motion: no-preference) { .badge__spin { animation: spin 18s linear infinite; } }
@media (min-width: 56em) { .award__grid { grid-template-columns: 1fr auto; } }

/* ==========================================================================
   5 · Stimmen
   ========================================================================== */
.voices { padding-block: clamp(4rem, 7vw, 7.5rem); }
.voices__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 4rem); }
.voices__nav { display: flex; gap: .6rem; }
.voices__rail { display: flex; gap: clamp(1rem, 2vw, 2rem); overflow-x: auto; padding: .5rem var(--inset) 1.5rem; scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset); scrollbar-width: none; }
.voices__rail::-webkit-scrollbar { display: none; }
.voice { --fg: #16151A; --muted: #55514A; --pink-text: #C2106A; flex-shrink: 0; display: flex; flex-direction: column; width: min(86vw, 40rem); padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid rgba(255, 255, 255, .6); border-radius: 1.75rem; background: rgba(255, 255, 255, .92); color: #16151A; box-shadow: 0 1.5rem 3rem rgba(10, 10, 15, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scroll-snap-align: start; }
.voice blockquote { position: relative; margin: 0 0 2rem; padding-top: 4rem; }
.voice blockquote::before { content: "\201C"; position: absolute; left: -.04em; top: 0; font-size: 7rem; font-weight: 900; line-height: .8; color: var(--pink-text); }
.voice blockquote p { font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.voice__by { margin-top: auto; color: var(--muted); } .voice__by strong { display: block; color: var(--fg); font-weight: 800; }

/* ==========================================================================
   6 · Über uns
   ========================================================================== */
.about { padding-block: clamp(4rem, 7vw, 7.5rem); }
.about__title { margin-bottom: clamp(2rem, 5vw, 5rem); hyphens: manual; }
.about__grid { display: grid; gap: clamp(2.5rem, 5vw, 6rem); margin-bottom: clamp(4rem, 8vw, 8rem); }
.about__text { max-width: 44rem; }
.about__text a { text-decoration-color: var(--pink); text-decoration-thickness: .14em; }
.stickers { position: relative; height: clamp(15rem, 26vw, 22rem); border-radius: 1.5rem; }
.stickers__photo { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; background: #18181F; } .stickers__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 60em) { .stickers { height: auto; aspect-ratio: 4 / 3; } }
/* Startpositionen auf schmalen Bildschirmen innerhalb des Fotos halten (Desktop-Werte stehen im HTML) */
@media (max-width: 60em) { .sticker--pink { --x: 2% !important; --y: -8% !important; } .sticker--dark { --x: 28% !important; --y: 78% !important; } .sticker--blau { --x: 2% !important; --y: 90% !important; } }
.sticker { position: absolute; left: var(--x); top: var(--y); padding: .7em 1.2em; border-radius: 99rem; font-size: clamp(1rem, .9rem + .6vw, 1.5rem); font-weight: 900; line-height: 1.05; white-space: nowrap; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .22); transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition: box-shadow .25s, scale .25s var(--ease); }
.sticker:hover { scale: 1.05; } .sticker.is-held { cursor: grabbing; scale: 1.12; box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, .35); z-index: 5; }
.sticker--pink { background: var(--pink); color: #fff; } .sticker--dark { background: #16151A; color: #F2F2F7; } .sticker--blau { background: var(--blau); color: #fff; } .sticker--lila { background: var(--lila); color: #fff; }
.sticker--round { display: grid; place-items: center; width: 6.5em; height: 6.5em; padding: 0; border-radius: 50%; text-align: center; font-size: clamp(.875rem, .8rem + .4vw, 1.125rem); }
@media (min-width: 60em) { .about__grid { grid-template-columns: 5fr 7fr; } .about__left { position: sticky; top: 6rem; align-self: start; } }

.strengths__title { margin-bottom: 1.5rem; font-size: 1.125rem; font-weight: 800; color: var(--pink-text); }
.strengths { counter-reset: s; border-bottom: 1px solid var(--line); }
.strengths li { counter-increment: s; display: grid; gap: .4rem 2rem; align-items: baseline; padding: clamp(1.1rem, 2.2vw, 2.1rem) 0; border-top: 1px solid var(--line); transition: padding .4s var(--ease), color .3s; }
.strengths li::before { content: "0" counter(s); font-weight: 800; font-size: .875rem; color: var(--muted); }
.strengths__name { font-size: clamp(1.6rem, .9rem + 2.4vw, 3.4rem); font-weight: 900; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.strengths__text { max-width: 30rem; color: var(--muted); }
@media (hover: hover) { .strengths li:hover { padding-left: 1.5rem; } .strengths li:hover .strengths__name { color: var(--pink-text); } }
@media (min-width: 60em) { .strengths li { grid-template-columns: 3rem 1.25fr 1fr; } }
.about__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.about__cta p { max-width: 34rem; margin: 0; font-size: 1.125rem; }

/* ==========================================================================
   7 · Ablauf als Schnitt-Timeline
   ========================================================================== */
.flow { padding-block: clamp(4rem, 7vw, 7.5rem); }
.flow .display { margin-bottom: clamp(2rem, 5vh, 4rem); }
.flow__deck { position: relative; padding: 1rem 0 1.25rem; border-block: 1px solid var(--line); }
.flow__ruler { display: flex; justify-content: space-between; margin-bottom: .75rem; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--muted); }
.flow__track { display: grid; grid-template-columns: 1.1fr 1fr 1.5fr 1.2fr; gap: .35rem; }
.clip { display: flex; align-items: center; min-width: 0; height: clamp(3.25rem, 8vh, 5rem); padding: 0 1rem; overflow: hidden; border: 0; border-radius: .6rem; font-family: inherit; text-align: left; cursor: pointer; font-size: clamp(.75rem, .6rem + .6vw, 1.125rem); font-weight: 900; white-space: nowrap; text-overflow: ellipsis; color: #fff; opacity: .35; transition: opacity .4s, transform .4s var(--ease); }
.clip.is-active { opacity: 1; transform: translateY(-4px); }
.clip:hover { opacity: .75; } .clip.is-active:hover { opacity: 1; }
.flow:not(.flow--pinned) .flow__step:not(.is-active) { display: none; }
.flow:not(.flow--pinned) .clip { opacity: .35; } .flow:not(.flow--pinned) .clip.is-active { opacity: 1; }
.clip--blau { background: var(--blau); } .clip--pink { background: var(--pink); } .clip--lila { background: var(--lila); } .clip--weiss { background: var(--creme); color: #16151A; }
.flow__track--audio { margin-top: .35rem; grid-template-columns: 2.1fr 1.5fr 1.2fr; }
.flow__track--audio span { height: 1.6rem; border-radius: .4rem; background: repeating-linear-gradient(90deg, rgba(246, 246, 246, .32) 0 2px, transparent 2px 5px), rgba(246, 246, 246, .07); -webkit-mask-image: linear-gradient(#000, #000); mask-image: radial-gradient(100% 140% at 50% 50%, #000 40%, transparent 100%); }
.flow__playhead { position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px; background: var(--pink); box-shadow: 0 0 1.2rem rgba(224, 19, 122, .9); }
.flow__playhead i { position: absolute; left: 50%; top: -2px; width: 0; height: 0; margin-left: -.55rem; border: .55rem solid transparent; border-top: .8rem solid var(--pink); border-bottom: 0; }
.flow__steps { display: grid; gap: 2rem; margin-top: clamp(2rem, 5vh, 4rem); counter-reset: f; }
.flow__step { counter-increment: f; }
.flow__step h3 { margin-bottom: .4em; font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem); font-weight: 900; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.flow__step h3::before { content: counter(f) " / 4"; display: block; margin-bottom: .8em; font-size: .875rem; font-weight: 800; letter-spacing: .04em; color: var(--pink-text); }
.flow__step p { max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); color: var(--muted); }
.flow--pinned { padding-block: 0; } /* Höhe (Inhalt + Pin-Strecke) setzt main.js */
.flow--pinned .flow__sticky { position: sticky; top: var(--pin-top, 0px); }
.flow--pinned .flow__steps { display: grid; gap: 0; }
.flow--pinned .flow__step { grid-area: 1 / 1; opacity: 0; transform: translateY(2rem); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.flow--pinned .flow__step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.flow:not(.flow--pinned) .flow__playhead { display: none; }
html:not(.js) .flow__step { display: block !important; }

/* ==========================================================================
   8 · Team
   ========================================================================== */
.team { padding-block: clamp(6rem, 10.5vw, 11.25rem) clamp(4rem, 7vw, 7.5rem); }
.team__head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.team__head p { max-width: 38rem; color: var(--muted); font-size: 1.125rem; }
.crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(1rem, 2vw, 2rem); justify-content: center; }
.crew > [hidden] { display: none; }
.member { min-width: 0; outline-offset: 6px; overflow-wrap: break-word; hyphens: auto; }
.member--cta .btn { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 30em) { .member--cta { aspect-ratio: auto; } .member--cta .btn { padding-inline: 1em; font-size: .8125rem; } }
.member__pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 1.1rem; overflow: hidden; border-radius: 1.25rem; transition: transform .5s var(--ease), border-radius .5s var(--ease); }
.member__pic > picture, .member__pic > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .member__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.member__pic b { font-size: clamp(3rem, 5vw, 5rem); font-weight: 100; font-style: italic; letter-spacing: -.04em; color: rgba(246, 246, 246, .85); }
.member:hover .member__pic, .member:focus-visible .member__pic { transform: rotate(-2.5deg) scale(1.03); border-radius: 2.25rem; }

.member__pic--1 { background: linear-gradient(160deg, #E0137A, #3a1236 70%); } .member__pic--2 { background: linear-gradient(200deg, #3A6FB5, #15202e 70%); } .member__pic--3 { background: linear-gradient(140deg, #8E3FB0, #211329 70%); } .member__pic--4 { background: linear-gradient(210deg, #E0137A, #8E3FB0 60%, #1d1220); }
.member__pic--5 { background: linear-gradient(150deg, #2A2A2A, #3A6FB5 140%); } .member__pic--6 { background: linear-gradient(190deg, #8E3FB0, #3A6FB5 80%, #0A0A0F 130%); } .member__pic--7 { background: repeating-linear-gradient(135deg, #2A2A2A 0 14px, #1f1f1f 14px 28px); }
.member h3 { font-size: 1.25rem; font-weight: 900; letter-spacing: -.01em; }
.member__role { margin: .15em 0 .7em; font-weight: 700; font-size: .9375rem; color: var(--pink-text); }
.member__bio { font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.member--cta { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1.5rem; align-self: start; aspect-ratio: 4 / 5; padding: clamp(1.1rem, 2vw, 2rem); border-radius: 1.25rem; background: var(--pink); color: #fff; }
.member--cta p { font-size: clamp(1.2rem, .8rem + 1.4vw, 2rem); font-weight: 900; line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
@media (min-width: 48em) { .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72em) { .crew { grid-template-columns: repeat(3, minmax(0, 20rem)); gap: 3rem clamp(1.5rem, 3vw, 2.5rem); } .team__head { grid-template-columns: 1fr 1fr; align-items: end; } }

/* ==========================================================================
   9 · FAQ
   ========================================================================== */
.faq { padding-block: clamp(4rem, 7vw, 7.5rem); }
.faq__grid { display: grid; gap: clamp(2rem, 5vw, 6rem); }
.faq__head p { max-width: 24rem; margin-top: 1.5rem; color: var(--muted); } .faq__head a { color: var(--fg); font-weight: 800; white-space: nowrap; }
.faq__list { interpolate-size: allow-keywords; }
.faq details { border-top: 2px solid var(--fg); } .faq details:last-child { border-bottom: 2px solid var(--fg); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; list-style: none; font-size: clamp(1.125rem, 1rem + .7vw, 1.75rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; transition: padding .35s var(--ease), color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex-shrink: 0; color: var(--pink-text); transition: transform .4s var(--ease); }
.faq details[open] summary svg { transform: rotate(135deg); }
@media (hover: hover) { .faq summary:hover { padding-left: 1rem; } }
.faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq__a { max-width: 46rem; padding-bottom: 1.75rem; color: var(--muted); }
@media (min-width: 60em) { .faq__grid { grid-template-columns: 4fr 8fr; } .faq__head { position: sticky; top: 6rem; align-self: start; } }

/* ==========================================================================
   10 · Kontakt
   ========================================================================== */
.contact { padding-block: clamp(4rem, 7vw, 7.5rem) clamp(4rem, 7vw, 7rem); }
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
.contact .mega { margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.contact__pitch > p { max-width: 38rem; }
.direct { margin-top: 3rem; }
.direct__title { margin-bottom: 1rem; font-weight: 800; color: var(--pink-text); }
.direct__big { display: flex; align-items: center; gap: .8rem; width: fit-content; margin-bottom: .6rem; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.25rem); font-weight: 900; letter-spacing: -.025em; text-decoration: none; }
.direct__big svg { color: var(--pink-text); } .direct__big:hover { text-decoration: underline; text-decoration-color: var(--pink); }
.direct address { display: flex; gap: .8rem; margin: 1.2rem 0; color: var(--muted); } .direct address svg { color: var(--pink-text); flex-shrink: 0; margin-top: .15rem; }
.social { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.social a { display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid currentColor; border-radius: 50%; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.social a:hover { background: var(--pink); border-color: var(--pink); color: #fff; transform: rotate(-8deg) scale(1.08); }
.direct__note { max-width: 32rem; font-size: .8125rem; line-height: 1.55; color: var(--muted); }

.brief { position: relative; padding: clamp(1.5rem, 3.5vw, 3.25rem); border: 1px solid rgba(255, 255, 255, .1); border-radius: clamp(1.5rem, 2.5vw, 2.25rem); background: rgba(24, 24, 31, .92); box-shadow: 0 2rem 5rem rgba(10, 10, 15, .25); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); color: #F2F2F7; }
.brief__bar { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr; gap: .3rem; margin-bottom: 2rem; }
.brief__bar span { height: .55rem; border-radius: .2rem; background: rgba(246, 246, 246, .16); transition: background-color .4s; }
.brief__bar span.is-on { background: var(--pink); }
html:not(.js) .brief__bar { display: none; }
.brief fieldset { margin: 0 0 1.75rem; padding: 0; border: 0; min-width: 0; }
.js .brief__step { display: none; } .js .brief__step.is-current { display: block; animation: goal-in .5s var(--ease) both; }
.brief legend { padding: 0; margin-bottom: 1.5rem; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); font-weight: 900; line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.brief__count { display: block; margin-bottom: .9em; font-size: .875rem; font-weight: 800; letter-spacing: .04em; color: var(--pink-text); }
.brief__chips { display: flex; flex-wrap: wrap; gap: .7rem; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: block; padding: .95em 1.4em; border: 2px solid rgba(246, 246, 246, .5); border-radius: 99rem; font-weight: 800; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.pick span:hover { transform: translateY(-2px) rotate(-1deg); border-color: #F2F2F7; }
.pick input:checked + span { background: var(--pink); border-color: var(--pink); color: #fff; }
.pick input:focus-visible + span { outline: 3px solid var(--blau); outline-offset: 3px; }
.brief textarea, .brief input[type="text"], .brief input[type="email"] { width: 100%; padding: 1em 1.1em; border: 2px solid rgba(246, 246, 246, .28); border-radius: 1rem; background: rgba(246, 246, 246, .06); color: #F2F2F7; font: 500 1.0625rem/1.45 var(--font); transition: border-color .25s, background-color .25s; }
.brief textarea { min-height: 10rem; resize: vertical; }
.brief textarea::placeholder { color: rgba(246, 246, 246, .5); }
.brief textarea:focus-visible, .brief input:focus-visible { outline: 0; border-color: var(--pink); background: rgba(246, 246, 246, .1); }
.brief [aria-invalid="true"] { border-color: #FF9AD8; }
.brief__fields { display: grid; gap: 0 1rem; } @media (min-width: 40em) { .brief__fields { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 1.1rem; } .field label { display: block; margin-bottom: .45rem; font-size: .875rem; font-weight: 700; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field__error { margin: .45rem 0 0; font-size: .875rem; font-weight: 700; color: #FF9AD8; }
.check { display: flex; align-items: flex-start; gap: .75rem; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.check input { flex-shrink: 0; width: 1.3rem; height: 1.3rem; margin: .12rem 0 0; accent-color: var(--pink); }
.check a { text-decoration-color: var(--pink); }
.brief__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
html:not(.js) .brief__nav [data-brief="next"] { display: none; } html:not(.js) .brief__nav [data-brief="send"] { display: inline-flex !important; }
.brief__status { margin: 1.5rem 0 0; padding: 1.1rem 1.25rem; border-radius: 1rem; background: rgba(224, 19, 122, .16); font-weight: 700; }
.brief.is-done > :not(.brief__status) { display: none; }
.brief.is-done .brief__status { margin: 0; padding: 0; background: none; font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem); font-weight: 900; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; hyphens: auto; }
@media (min-width: 64em) { .contact__grid { grid-template-columns: 1fr 1fr; } .brief { position: sticky; top: 6rem; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { position: relative; padding-top: clamp(3rem, 6vw, 6rem); overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); background: #08080C; color: #F2F2F7; }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.footer__motto { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); font-weight: 200; font-style: italic; line-height: 1.15; }
.footer__links { display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-weight: 800; } .footer__links a { text-decoration: none; } .footer__links a:hover { text-decoration: underline; text-decoration-color: var(--pink); }
.footer__word { margin: clamp(2rem, 5vw, 5rem) 0 0; line-height: .74; text-align: center; white-space: nowrap; }
.footer__word span { display: inline-block; font-size: var(--fit, 12vw); font-weight: 900; letter-spacing: -.055em; text-transform: uppercase; background: linear-gradient(90deg, #E0137A, #8E3FB0 55%, #3A6FB5) var(--gpos, 0%) 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position .6s var(--ease); }
.footer__copy { padding-block: 1.5rem; font-size: .8125rem; color: #8C8C9E; }

/* ==========================================================================
   Timeline-Leiste: Fortschritt, Navigation und Scrubbing in einem
   ========================================================================== */
.timeline { position: fixed; inset: auto 0 0 0; z-index: 110; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(.6rem, 1.5vw, 1.5rem); height: var(--bar); transition: height .3s var(--ease); padding: 0 clamp(.75rem, 2vw, 1.5rem); background: rgba(10, 10, 15, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .1); color: #F2F2F7; }
html:not(.js) .timeline { display: none; }
.timeline__tc { margin: 0; font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.timeline__tc::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em; border-radius: 50%; background: var(--pink); vertical-align: .05em; }
.timeline__track { position: relative; height: 1.75rem; cursor: ew-resize; touch-action: none; transition: height .3s var(--ease); }
@media (hover: hover) { .timeline:hover { height: calc(var(--bar) + 1.5rem); } .timeline:hover .timeline__track { height: 2.9rem; } .timeline:hover .tclip span { font-size: .875rem; } .timeline:hover .timeline__tc { font-size: .9375rem; } }
.timeline__clips { position: absolute; inset: 0; }
.tclip { position: absolute; top: 0; bottom: 0; container-type: inline-size; padding: 0 1px; border: 0; background: none; cursor: pointer; }
.tclip span { display: flex; align-items: center; height: 100%; padding: 0 .6em; overflow: hidden; border-radius: .3rem; background: rgba(246, 246, 246, .13); font-size: .6875rem; transition: font-size .3s var(--ease), background-color .25s, color .25s; font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: rgba(246, 246, 246, .75); transition: background-color .25s, color .25s; }
.tclip:hover span { background: rgba(246, 246, 246, .28); color: #fff; }
.tclip.is-active span { background: var(--pink); color: #fff; }
/* Vorschau-Kachel über der Leiste: verkleinerte Live-Kopie des Abschnitts */
.timeline__peek { position: absolute; left: var(--x, 50%); bottom: calc(100% + .9rem); z-index: 1; width: var(--pw, 16rem); transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .2s; }
.timeline__peek.is-on { opacity: 1; }
.timeline__peek-frame { position: relative; width: var(--pw, 16rem); height: var(--ph, 10rem); overflow: hidden; border-radius: .6rem; background: var(--bg); color: var(--fg); box-shadow: 0 0 0 2px #fff, 0 1rem 3rem rgba(0, 0, 0, .6); }
.timeline__peek-frame > * { position: absolute; left: 0; top: 0; display: grid; align-content: center; width: var(--vw, 100vw); min-height: var(--vh, 100vh); transform: scale(var(--s, .2)); transform-origin: 0 0; background: var(--bg); color: var(--fg); } /* kurze Abschnitte mittig, lange von oben */
.timeline__peek-frame[data-theme="dark"] { --bg: #0A0A0F; --fg: #F2F2F7; --muted: #A3A3B5; --line: #2A2A33; --pink-text: #FF5CC0; }
.timeline__peek-frame .reveal, .timeline__peek-frame .rise > .rise__in { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.timeline__peek-frame .manifest .w { opacity: 1 !important; }
.timeline__peek-frame .hero__copy { visibility: visible !important; }
.timeline__peek-frame * { animation: none !important; transition: none !important; }
.timeline__peek-frame .timeline, .timeline__peek-frame .cursor { display: none !important; }
.timeline__peek-grid { display: grid; align-content: center; gap: 3vw; min-height: var(--vh, 100vh); padding: 4vw var(--inset); }
.timeline__peek-grid .display { margin: 0; }
.timeline__peek-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; }
.timeline__peek-cells .film, .timeline__peek-cells .voice { width: auto; max-width: none; perspective: none; }
.timeline__peek-cells .voice { padding: 2vw; } .timeline__peek-cells .voice blockquote { padding-top: 3.5rem; margin-bottom: 1.2rem; } .timeline__peek-cells .voice blockquote::before { font-size: 5rem; }
.timeline__peek-cells .voice blockquote p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.9rem; line-height: 1.25; } .timeline__peek-cells .voice__by { font-size: 1.5rem; line-height: 1.3; }
.timeline__peek-label { display: block; margin-top: .45rem; text-align: center; font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
@media (hover: none) { .timeline__peek { display: none; } }
.timeline__head { position: absolute; top: -.45rem; bottom: -.45rem; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.timeline__head::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -.35rem; border: .35rem solid transparent; border-top: .5rem solid #fff; border-bottom: 0; }
/* Schmale Fenster: erst fällt der Timecode weg, dann (per JS, wenn die Wörter nicht passen) die Beschriftung – es bleiben Blöcke. Auf Handys gibt es keine Leiste. */
@media (max-width: 64em) { .timeline { grid-template-columns: 1fr; } .timeline__tc { display: none; } }
.timeline--blocks .tclip span { color: transparent !important; }
.timeline--tight:hover .tclip span { font-size: .6875rem; }
@media (max-width: 40em) { :root { --bar: 0px; } .timeline { display: none; } }


/* ==========================================================================
   Unterseiten (Impressum, Datenschutz, AGB)
   ========================================================================== */
.legal { padding: clamp(7rem, 14vh, 10rem) 0 clamp(4rem, 8vw, 6rem); }
.legal .display { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.legal__body { max-width: 46rem; }
.legal__body h2 { margin: 2.2em 0 .6em; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; }
.legal__body h3 { margin: 1.6em 0 .5em; font-size: 1.0625rem; font-weight: 800; }
.legal__body p { margin-bottom: .9em; }
.legal__body ul { margin: 0 0 1em 1.2em; list-style: disc; }
.legal__body li { margin-bottom: .3em; }
.legal__body a { text-decoration-color: var(--pink-text); overflow-wrap: anywhere; }
.legal__body .todo { padding: .2em .4em; border-radius: .3em; background: rgba(224, 19, 122, .12); font-style: normal; opacity: 1; }
body.is-sub { padding-bottom: 0; }