:root {
  --schwarz: #000;
  --text: #fff;
  --leise: rgba(255, 255, 255, .62);
  --rot: #ff3b30;
  --rot-tief: #a80f0a;
  /* Aus den echten Postings gemessen (EP1/EP16): Gelb ist die zweite
     Leitfarbe, nicht nur ein Akzent. */
  --gelb: #ffd400;
  --gelb-tief: #ffb300;
  --punch: cubic-bezier(.2, 1.7, .35, 1);   /* Punch-In der Videos */
  --hart: cubic-bezier(.7, 0, .3, 1);       /* Hard-Cut-Gefuehl */
  --silber: #d9dde1;
  --rand: rgba(255, 255, 255, .10);
  --display: "Anton SC", "Arial Black", sans-serif;
  --body: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --luft: clamp(1.2rem, 4vw, 4.5rem);
  --maxw: 1280px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--schwarz); color: var(--text);
  font-family: var(--body); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
img, svg, video, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }

/* ===================== LIQUID GLASS ===================== */
.liquid-glass {
  background: rgba(255, 255, 255, .012);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .10);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass-strong {
  position: relative; overflow: hidden; border: none;
  background: rgba(255, 255, 255, .012);
  backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
  box-shadow: 4px 4px 4px rgba(0,0,0,.05), inset 0 1px 1px rgba(255,255,255,.15);
}
.liquid-glass-strong::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.2) 80%, rgba(255,255,255,.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ===================== BLUR-TEXT ===================== */
/* Sichtbar ist Standard: ohne JS steht der Text scharf da. Erst wenn JS die
   Wörter aufteilt, bekommen sie den Startzustand — kein blindes Verstecken. */
.blur-text { display: flex; flex-wrap: wrap; row-gap: .08em; }
.blur-text .wort-huelle {
  display: inline-block; overflow: hidden;
  margin-right: .26em; vertical-align: top;
  padding-bottom: .06em; /* Unterlaengen nicht abschneiden */
}
.blur-text .wort {
  display: inline-block;
  transform: translateY(118%) rotate(5deg);
  transform-origin: 0 100%;
}
.blur-text.an .wort {
  transform: none;
  transition: transform .85s var(--ease);
  transition-delay: var(--verz, 0ms);
}

/* ===================== NAVIGATION ===================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1rem;
  padding: 14px var(--luft);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease);
}
.nav.fest { padding-top: 8px; padding-bottom: 8px; }
.nav-seite { display: none; align-items: center; gap: 1.6rem; font-size: .84rem; font-weight: 500; letter-spacing: .04em; }
.nav-links-seite { justify-content: flex-start; }
.nav-rechts-seite { justify-content: flex-end; }
.nav-seite a { color: rgba(255,255,255,.85); transition: color .25s; }
.nav-seite a:hover { color: var(--rot); }
.nav-seite .nav-cta { background: #fff; color: #000; padding: 8px 16px; border-radius: 999px; font-weight: 600; }
.nav-seite .nav-cta:hover { background: var(--rot); color: #fff; }
@media (min-width: 901px) { .nav-seite { display: flex; } .nav-burger { display: none; } }
@media (max-width: 900px) { .nav { grid-template-columns: 1fr auto; } .nav-logo { justify-self: start; } .nav-burger { justify-self: end; } }
.nav.fest { background: rgba(0,0,0,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-logo { display: flex; align-items: center; gap: 11px; justify-self: center; }
.nav-mark { height: 30px; width: auto; }
.nav-wort { height: 14px; width: auto; }

.nav-pille {
  display: none; align-items: center; gap: 4px;
  padding: 6px 6px 6px 14px; border-radius: 999px;
}
.nav-pille a { padding: 8px 14px; font-size: .86rem; font-weight: 500; color: rgba(255,255,255,.88); border-radius: 999px; transition: color .2s, background .2s; }
.nav-pille a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-cta { background: #fff; color: #000 !important; font-weight: 600; }
.nav-cta:hover { background: #eee !important; color: #000 !important; }

.nav-burger { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.burger-zu { display: none; }
.nav-burger[aria-expanded="true"] .burger-auf { display: none; }
.nav-burger[aria-expanded="true"] .burger-zu { display: block; }

.mobil-menue {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  background: rgba(0,0,0,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.mobil-menue.ist-offen { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.mobil-menue a {
  font-family: var(--display); font-size: clamp(1.8rem, 8vw, 2.6rem);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mobil-menue.ist-offen a { opacity: 1; transform: none; transition-delay: var(--verz, 0ms); }
.mobil-cta { background: #fff; color: #000; padding: .5rem 1.6rem; border-radius: 999px; font-size: 1.1rem !important; font-family: var(--body) !important; font-weight: 600; }

/* ===================== HERO ===================== */
.hero {
  position: relative; min-height: 100svh;
  overflow: hidden;
}
.buehne { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.72) 100%);
}
.hero-inhalt { position: relative; z-index: 3; max-width: 780px; width: 100%; }

.hero-badge {
  display: inline-block; border-radius: 999px; padding: 7px 16px;
  font-size: .78rem; letter-spacing: .04em; color: rgba(255,255,255,.9);
  margin-bottom: 1.6rem;
}
.hero-titel {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: .94; letter-spacing: -.02em;
  margin-bottom: 1.4rem;
}
.hero-sub { max-width: 46ch; font-size: clamp(.95rem, 1.3vw, 1.08rem); font-weight: 300; line-height: 1.62; color: var(--leise); }

.hero-tasten { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2rem; }
.taste-primaer {
  display: inline-flex; align-items: center; gap: .55rem;
  border-radius: 999px; padding: .8rem 1.5rem;
  font-size: .92rem; font-weight: 600; color: #fff;
  transition: transform .25s var(--ease);
}
.taste-primaer:hover { transform: translateY(-2px); }
.taste-sekundaer { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: rgba(255,255,255,.85); transition: color .2s; }
.taste-sekundaer:hover { color: #fff; }

.szenen { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.6rem; }
.szene {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: .45rem; border-bottom: 1.5px solid transparent;
  color: rgba(255,255,255,.45); transition: color .3s, border-color .3s;
}
.szene:hover { color: rgba(255,255,255,.8); }
.szene.ist-aktiv { color: #fff; border-bottom-color: var(--rot); }

.hero-fuss {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin-top: auto; padding: 3rem 0 2rem;
  font-size: .76rem; color: rgba(255,255,255,.5); letter-spacing: .02em;
}
.hero-fuss span + span::before { content: "—"; margin-right: 1.6rem; opacity: .45; }

/* ---- Mascot: einziges Charakter-Vorkommen. Body starr, nur Kopf folgt. ---- */
.mascot {
  position: absolute; z-index: 3; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: clamp(260px, 33vw, 620px); aspect-ratio: 859 / 1464;
  pointer-events: none; perspective: 900px;
}
.mascot-glow {
  position: absolute; inset: -8% -22% -4%; z-index: 0;
  background: radial-gradient(ellipse at 50% 58%, rgba(255,59,48,.26) 0%, transparent 68%);
  filter: blur(34px);
}
.mascot-body, .mascot-head { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }
.mascot-body img, .mascot-head img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.mascot-body { clip-path: inset(40% 0 0 0); transform: none; }
.mascot-head { clip-path: inset(0 0 56% 0); transform-origin: 49% 42%; will-change: transform; backface-visibility: hidden; }

/* ===================== ABSCHNITTE ===================== */
.kicker { font-size: .8rem; letter-spacing: .12em; color: rgba(255,255,255,.55); margin-bottom: 1.2rem; }

.formate { padding: 12vh var(--luft); max-width: var(--maxw); margin: 0 auto; }
.formate-titel { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: .96; letter-spacing: -.02em; margin-bottom: 3.4rem; }
.formate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.karte {
  border-radius: 1.25rem; padding: 1.6rem; min-height: 340px;
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease);
}
.karte:hover { transform: translateY(-6px); }
.karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: auto; }
.karte-icon { width: 44px; height: 44px; border-radius: .75rem; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; max-width: 64%; }
.tags span { border-radius: 999px; padding: .22rem .6rem; font-size: .66rem; color: rgba(255,255,255,.85); white-space: nowrap; }
.karte h3 { font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.01em; margin-top: 1.6rem; }
.karte p { margin-top: .7rem; font-size: .86rem; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.72); }

.manifest {
  min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--luft); perspective: 600px;
  background: radial-gradient(ellipse at 50% 50%, rgba(168,15,10,.12) 0%, transparent 62%);
}
.manifest-innen { max-width: 900px; text-align: center; transform-origin: center; will-change: transform, opacity; }
.manifest-innen .kicker { text-align: center; }
.manifest-gross { font-family: var(--display); font-size: clamp(2.2rem, 6.6vw, 5rem); line-height: 1.02; letter-spacing: -.02em; justify-content: center; }
.manifest-sub { margin: 1.6rem auto 0; max-width: 46ch; font-size: clamp(.9rem, 1.3vw, 1.05rem); font-weight: 300; line-height: 1.6; color: var(--leise); }

/* Scroll-Einblendung — sichtbar ist Standard, .anim aktiviert das Verstecken */
.rv { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.anim .rv { opacity: 0; transform: translateY(22px); }
.rv.an { opacity: 1; transform: none; }

/* ===================== FOOTER ===================== */
.fuss { position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fuss-innen { position: relative; z-index: 2; text-align: center; padding: 4rem var(--luft); }
.fuss-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 1.2rem; }
.fuss-mark { height: 58px; width: auto; }
.fuss-wort { height: 22px; width: auto; }
.fuss-tag { letter-spacing: .3em; font-size: .78rem; color: var(--leise); margin-bottom: 2rem; }
.fuss-cta { display: inline-block; border-radius: 999px; padding: .7rem 1.6rem; font-size: .85rem; }
.fuss-copy { margin-top: 2.4rem; font-size: .72rem; color: rgba(255,255,255,.35); max-width: 44ch; margin-left: auto; margin-right: auto; line-height: 1.5; }


/* ===================== RESPONSIV ===================== */
@media (min-width: 901px) {
  .nav-pille { display: flex; }
  .nav-burger { display: none; }
}
@media (max-width: 1100px) {
  .formate-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero { justify-content: flex-end; padding-top: 6rem; }
  .hero-inhalt { max-width: 100%; }
  .mascot {
    position: relative; right: auto; bottom: auto;
    width: clamp(190px, 56vw, 320px); margin: 2.4rem auto 0;
  }
  .hero-fuss { padding-top: 1.6rem; gap: .8rem; font-size: .7rem; }
  .hero-fuss span + span::before { margin-right: .8rem; }
}
@media (max-width: 620px) {
  .formate-grid { grid-template-columns: 1fr; }
  .karte { min-height: 0; }
  .hero-fuss span:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .blur-text .wort { filter: none !important; opacity: 1 !important; transform: none !important; }
  .anim .rv, .rv { opacity: 1 !important; transform: none !important; }
  .mascot-head { transform: none !important; }
}

/* ===================== UNTERSEITEN ===================== */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: #000; padding: .7rem 1.2rem; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip:focus { left: 0; }

.fortschritt {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 70;
  background: linear-gradient(90deg, var(--rot-tief), var(--rot));
}

.unter-hero {
  position: relative; min-height: 56svh; display: flex; align-items: flex-end;
  padding: 8rem var(--luft) 3.4rem; overflow: hidden;
}
.unter-hero-inhalt { position: relative; z-index: 3; max-width: 760px; }
.unter-titel { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -.02em; margin: .6rem 0 1rem; }
.unter-sub { max-width: 46ch; font-size: clamp(.95rem, 1.3vw, 1.08rem); font-weight: 300; line-height: 1.62; color: var(--leise); }

.unter-inhalt { max-width: 820px; margin: 0 auto; padding: 5rem var(--luft) 7rem; }
.block { margin-bottom: 3.4rem; }
.block h2 { font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -.01em; margin-bottom: 1rem; }
.block p { font-size: .96rem; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.75); margin-bottom: .9rem; }
.block a { color: var(--rot); text-decoration: underline; text-underline-offset: 3px; }
.platzhalter-hinweis {
  border: 1px solid rgba(255,59,48,.35); background: rgba(255,59,48,.06);
  border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 3rem;
  font-size: .88rem; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.82);
}
.fuss-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 2.2rem; font-size: .8rem; }
.fuss-links a { color: rgba(255,255,255,.6); transition: color .2s; }
.fuss-links a:hover { color: #fff; }

/* Karten sind jetzt Links */
a.karte { text-decoration: none; color: inherit; }
a.karte::after {
  content: "→"; position: absolute; right: 1.5rem; bottom: 1.4rem;
  font-size: 1.1rem; color: var(--rot);
  opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
a.karte:hover::after, a.karte:focus-visible::after { opacity: 1; transform: none; }

/* Laufband zwischen den Abschnitten */
.laufband { overflow: hidden; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); padding: 1.1rem 0; }
.laufband-spur { display: flex; gap: 3rem; width: max-content; animation: laufen 34s linear infinite; }
.laufband {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
.laufband span {
  font-family: var(--body); font-size: .82rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.38); white-space: nowrap;
}
.laufband span::after { content: "•"; margin-left: 3rem; color: var(--gelb); }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none !important; }
}

/* ===================== FEINSCHLIFF-MOTION ===================== */
/* Mascot-Auftritt: gleitet beim Laden herein (reine CSS-Animation, laeuft
   auch ohne JS; reduced-motion-Block oben schaltet alle Animationen ab) */
@keyframes mascotAuftritt {
  from { opacity: 0; transform: translateX(-50%) translateY(46px); filter: blur(10px); }
  to   { opacity: 1; transform: translateX(-50%); filter: none; }
}
.hero .mascot { animation: mascotAuftritt 1.1s var(--ease) .25s backwards; }

/* Roter Glow atmet langsam hinter der Figur */
@keyframes glutPuls {
  0%, 100% { opacity: .78; transform: scale(.985); }
  50%      { opacity: 1;   transform: scale(1.03); }
}
.mascot-glow { animation: glutPuls 5.5s ease-in-out infinite; }

/* Karten-Tilt reagiert schnell — ueberschreibt die traege .rv-Transition,
   sobald die Karte eingeblendet ist */
.karte.an { transition: transform .35s var(--ease), opacity .7s var(--ease); }

/* Hero-Inhalt bekommt beim Scrollen ein transform per JS — will-change hilft */
.hero-inhalt { will-change: transform, opacity; }

/* ===================== CHARAKTER-MOTION (2. Ausbaustufe) ===================== */
/* Riesige Outline-Wortmarke hinter dem Hero — parallaxt langsam zur Maus */
.wasserzeichen {
  position: absolute; left: 50%; top: 44%; z-index: 2;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: clamp(8rem, 23vw, 24rem);
  line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07);
  pointer-events: none; user-select: none; will-change: transform;
}

/* Szenen-Untertext: wechselt mit dem Umschalter */
.szenen-text {
  margin-top: 1rem; max-width: 52ch;
  font-size: .84rem; font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,.5);
  transition: opacity .35s var(--ease);
}
.szenen-text.wechselt { opacity: 0; }

/* Custom-Cursor: Punkt sofort, Ring folgt mit Verzoegerung, waechst ueber
   Interaktivem. Nur bei feinem Zeiger, nativer Cursor bleibt sichtbar. */
.cursor-punkt, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 300;
  border-radius: 50%; pointer-events: none;
  mix-blend-mode: difference; display: none;
}
.cursor-punkt { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(255,255,255,.75);
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s;
}
.cursor-ring.aktiv {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-color: var(--rot); mix-blend-mode: normal;
}
@media (hover: hover) and (pointer: fine) {
  .cursor-punkt, .cursor-ring { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-punkt, .cursor-ring, .wasserzeichen { display: none !important; }
}

/* ===================== POSTER-HERO ===================== */
.hero-badge { position: absolute; top: 6.2rem; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; }

/* Riesen-Slogan hinter der Figur; mittlere Zeile nur Kontur */
.hero-slogan {
  position: absolute; left: 50%; top: 42%; z-index: 2;
  transform: translate(-50%, -50%);
  display: block; text-align: center; white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(2.6rem, 8.4vw, 7.6rem);
  line-height: .92; letter-spacing: -.02em; color: #fff;
  margin: 0; pointer-events: none; user-select: none;
}
/* einzeilig: der Slogan ist BREITER als die Figur und ragt beidseitig heraus */
.hero-slogan .wort-huelle { display: inline-block; margin-right: .32em; }
.hero-slogan .wort-huelle:nth-child(2) .wort { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.55); }
.hero-slogan .wort-huelle:nth-child(3) .wort { color: var(--rot); }

.hero-ecke { position: absolute; bottom: 2.4rem; z-index: 4; }
.hero-ecke-links { left: var(--luft); max-width: 34ch; }
.hero-ecke-links .hero-sub { font-size: .92rem; }
.hero-ecke-links .hero-tasten { margin-top: 1.3rem; }
.hero-ecke-rechts { right: var(--luft); text-align: right; }
.hero-ecke-rechts .szenen { margin-top: 0; flex-direction: column; align-items: flex-end; gap: .7rem; }
.hero-ecke-rechts .szenen-text { max-width: 30ch; margin-top: 1rem; margin-left: auto; }

@media (max-width: 900px) {
  .hero-badge { top: 5.4rem; white-space: normal; text-align: center; width: max-content; max-width: 86vw; }
  .hero-slogan { position: relative; left: auto; top: auto; transform: none; padding-top: 9rem; white-space: normal; }
  .hero-slogan .wort-huelle { display: block; margin-right: 0; }
  .hero-slogan .wort-huelle { text-align: center; }
  .mascot { position: relative; left: auto; transform: none; margin: -1rem auto 0; }
  .hero .mascot { animation: none; }
  .hero-ecke { position: relative; bottom: auto; left: auto; right: auto; padding: 0 var(--luft); }
  .hero-ecke-links { max-width: none; margin-top: 1.6rem; }
  .hero-ecke-rechts { text-align: left; margin: 1.8rem 0 2.4rem; }
  .hero-ecke-rechts .szenen { flex-direction: row; align-items: flex-start; }
  .hero-ecke-rechts .szenen-text { margin-left: 0; }
}

/* ============ RANKING-LISTE (Look der echten Movetiq-Postings) ============
   Gemessen an Movetiq_Fails_EP1/EP16: Nummer + Label + Emoji, weisse Fuellung
   mit schwarzem Outline dahinter (paint-order), nur die 1 gelb. */
.rang-kopf {
  background: #000; padding: .9rem 1.2rem; margin-bottom: 2.6rem;
  border: 2px solid #000; text-align: center;
}
.rang-z1, .rang-z2 {
  font-family: var(--display); line-height: 1.06;
  font-size: clamp(1.5rem, 4.4vw, 3.1rem); letter-spacing: .01em;
}
.rang-z1 { color: #fff; }
.rang-z2 { color: var(--gelb); }

/* Breite begrenzt: in den Postings ist die Liste ein kompakter Block, kein
   ueber die ganze Seite gezogenes Raster. */
.zeilen { display: flex; flex-direction: column; gap: .1rem; max-width: 900px; }
.zeile {
  display: grid; grid-template-columns: 3.4rem 1fr auto 2rem;
  align-items: center; gap: 1rem;
  padding: 1.15rem .6rem; text-decoration: none; color: inherit;
  transform-origin: left center;
  transition: transform .11s var(--punch), background .18s var(--hart);
}
/* Pop-In: das Label poppt rein und bleibt — kein Fade, wie in den Videos */
/* Hier bewusst KEIN transform im Ruhezustand: eine Regel wie .zeile.rv.an
   waere mit drei Klassen spezifischer als .zeile:hover und wuerde den
   Punch-In totlegen (gemessen: transform blieb "none" trotz Mauszeiger).
   Der Startwert kommt allein aus der Animation (fill-mode backwards), damit
   die Zeile ohne JS normal gross und sichtbar bleibt. */
.zeile.rv { opacity: 1; }
.zeile.rv.an { animation: poppRein .34s var(--punch) backwards; animation-delay: var(--verz, 0ms); }
@keyframes poppRein {
  0%   { transform: scale(.72); }
  62%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.z-nr, .z-name {
  font-family: var(--display); color: #fff;
  -webkit-text-stroke: 7px #000; paint-order: stroke fill;
}
.z-nr   { font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1; }
.z-name { font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1; letter-spacing: -.005em; }
/* num_color: one_yellow — genau wie im Video ist nur Platz 1 gelb */
.zeile:first-child .z-nr, .zeile:first-child .z-name { color: var(--gelb); }
.z-emoji { font-size: 1.35em; line-height: 1; margin-left: .45rem; }

.z-info { font-size: .8rem; font-weight: 400; color: rgba(255,255,255,.72); text-align: right; }
.z-pfeil { font-size: 1.5rem; color: var(--gelb); opacity: 0; transform: translateX(-8px); transition: opacity .18s var(--hart), transform .18s var(--hart); }

/* Punch-In 8 % — der Zoom-Snap, der in den Videos auf jeden Aufprall geht */
.zeile:hover, .zeile:focus-visible {
  transform: scale(1.08);
  background: linear-gradient(90deg, rgba(255,212,0,.13), transparent 72%);
}
.zeile:hover .z-pfeil, .zeile:focus-visible .z-pfeil { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .zeile { grid-template-columns: 2.6rem 1fr 1.6rem; }
  .z-info { display: none; }
  .z-nr, .z-name { -webkit-text-stroke-width: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .zeile.rv, .zeile.rv.an { animation: none; transform: none; }
  .zeile:hover, .zeile:focus-visible { transform: none; }
}

/* ===================== MANIFEST: VOLLROT-BRUCH ===================== */
.manifest {
  background: linear-gradient(160deg, var(--rot-tief) 0%, var(--rot) 120%);
  padding-top: 15vh; padding-bottom: 15vh;
}
/* Wie in den Postings: die Aussage kippt in der letzten Zeile auf Gelb.
   Schwarze Kontur dahinter, damit Gelb auf Rot nicht ausfranst. */
.manifest-gross .wort-huelle:last-child .wort {
  color: var(--gelb);
  -webkit-text-stroke: 6px #2a0603; paint-order: stroke fill;
}
.manifest .kicker { color: rgba(0,0,0,.72); }
.manifest-gross { color: #0a0202; }
.manifest-sub { color: rgba(0,0,0,.82); font-weight: 500; }

/* ============ FOLIEN-SLIDER (Nachbau Cinematic_Landing_Page) ============ */
/* Wrapper: 100vh + 2 Uebergaenge x 150vh (Referenzwert SCROLL_PER_SLIDE_VH) */
.folien-rahmen { height: calc(100vh + 300vh); }
.folien-buehne { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
.folie { position: absolute; inset: 0; overflow: hidden; }
.folie-1 { z-index: 1; background: #000; }
/* Folie 2/3 initial per Ellipse zu — nur wenn Motion erlaubt ist */
@media (prefers-reduced-motion: no-preference) {
  .folie-2, .folie-3 { clip-path: ellipse(0% 0% at 50% 88%); will-change: clip-path; }
}
.folie-2 { z-index: 2; background: linear-gradient(155deg, var(--rot-tief) 0%, var(--rot) 52%, var(--gelb-tief) 100%); }
.folie-3 { z-index: 3; background: radial-gradient(ellipse at 50% 30%, #1c0605 0%, #000 70%); }
@media (prefers-reduced-motion: reduce) {
  .folien-rahmen { height: auto; }
  .folien-buehne { position: relative; height: auto; }
  .folie { position: relative; min-height: 100vh; }
}

/* Whip-Pan (Videos: whip 0.12) — nur der Textblock wird geschmiert,
   nicht die ganze Flaeche: sonst faellt die Bildrate und das
   Kopf-Tracking der Figur weicht messbar ab. */
.folie-innen { filter: url(#whip); will-change: filter;
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--luft); }
.folie-sub { max-width: 52ch; margin-top: 1.4rem; font-size: clamp(.92rem, 1.3vw, 1.05rem); font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.72); }
.folie-sub.dunkel { color: rgba(0,0,0,.66); font-weight: 400; }
.kicker.dunkel { color: rgba(0,0,0,.55); }
.folie-tasten { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; justify-content: center; }
.folie-taste {
  display: inline-block; padding: .85rem 1.7rem; border-radius: 999px;
  border: 1.5px solid currentColor; font-size: .9rem; font-weight: 600;
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.folie-taste:hover { transform: translateY(-2px); }
.folie-2 .folie-taste { color: #0a0202; }
.folie-2 .folie-taste:hover { background: #0a0202; color: #fff; }
.folie-3 .folie-taste { color: #fff; }
.folie-3 .folie-taste:hover { background: #fff; color: #000; }
.folie-3 .folie-taste.ist-rot { background: var(--rot); border-color: var(--rot); }
.folie-3 .folie-taste.ist-rot:hover { background: #fff; border-color: #fff; color: #000; }

/* Folien-Titel: Referenz-H1 — riesig, eine Zeile, unten anliegend auf Folie 1 */
.folie-titel {
  font-family: var(--display);
  font-size: clamp(2.6rem, 9.4vw, 9rem);
  line-height: 1; letter-spacing: -.04em; white-space: nowrap;
  color: #fff; margin: 0;
  -webkit-text-stroke: 9px #000; paint-order: stroke fill;
}
.folie-titel.dunkel { color: var(--gelb); -webkit-text-stroke-color: #1a0400; }
.folie-titel.rotlinie { color: #fff; text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: .06em; text-underline-offset: .12em; }
.folie-1 .folie-titel {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  z-index: 4; /* VOR der Figur — Referenzlayout, loest die Fragment-Kritik */
  text-shadow: 0 6px 40px rgba(0,0,0,.55);
}

@media (max-width: 700px) {
  /* Der Titel stand auf nowrap: bei 390 px lief "STREAM. WATCH. ENJOY."
     seitlich aus dem Bild und wurde von overflow:hidden abgeschnitten.
     Der Overflow-Messwert bleibt dabei false — der Fehler war nur im
     Screenshot zu sehen. Auf schmalen Schirmen darf der Titel umbrechen. */
  .folie-titel {
    white-space: normal; text-align: center;
    font-size: clamp(1.9rem, 10.5vw, 3.4rem);
    line-height: .98; letter-spacing: -.02em;
    -webkit-text-stroke-width: 5px;
  }
  .folie-1 .folie-titel { bottom: 6vh; width: 92vw; }
  /* Figur klebte unter der Navigation (margin-top -1rem) und darunter stand
     ein leeres Drittel. Groesser und tiefer gesetzt. */
  /* 5.6rem, nicht weniger: die Navigation ist hier 72 px hoch, bei 3.4rem
     ragte die Figur noch 18 px darunter (gemessen). */
  .folie-1 .mascot { width: clamp(240px, 76vw, 340px); margin-top: 5.6rem; }
}

/* Buchstaben-Reveal (Referenz: y40 -> 0, 0.8s, 30ms Stagger) */
.char-text .zeichen {
  display: inline-block;
  opacity: 0; transform: translateY(40px);
}
.char-text.an .zeichen {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--verz, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .char-text .zeichen { opacity: 1 !important; transform: none !important; }
}

.scroll-hinweis {
  position: absolute; right: var(--luft); bottom: 1.6rem; z-index: 5;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5); display: flex; align-items: center; gap: .5rem;
}
.pfeil-ab { display: inline-block; animation: abNicken 1.6s ease-in-out infinite; }
@keyframes abNicken { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Manifest: Scrub-Reveal (Woerter 0.1 -> 1 + blur, Container-Rotation 3deg -> 0) */
.manifest-innen { transform-origin: 0 50%; }
.manifest .wort { opacity: .1; filter: blur(4px); transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .manifest .wort { opacity: 1 !important; filter: none !important; }
}