/* Momentum Landingpage
   Farben und Typografie exakt aus der App (Sources/Momentum/Theme.swift),
   damit Website und Produkt identisch wirken. */

@font-face {
  font-family: "Raleway";
  src: url("fonts/raleway-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #050506;
  --card: #0E0E12;
  --card-2: #16161C;
  --accent: #CE1417;
  --gold: #F0A62B;
  --green: #3DBE6C;
  --text: #FFFFFF;
  --dim: rgba(255, 255, 255, .55);
  --faint: rgba(255, 255, 255, .40);
  --stroke: rgba(255, 255, 255, .08);
  --stroke-2: rgba(255, 255, 255, .14);
  --max: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Die feste Leiste darf den Kopf einer angesprungenen Sektion nicht abdecken. */
section[id] { scroll-margin-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 800; letter-spacing: -.02em; }
/* 88 statt 104: bei 104 px passte „Dein Tag hat" nicht mehr in die
   Hero-Spalte und „hat" stand als Waisenzeile allein (gemessen 28.08.). */
h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: .98; }
h2 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.04; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 720px; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}

/* ── Buttons ───────────────────────────────── */
.btn {
  display: inline-block; background: var(--accent); color: #fff;
  font-weight: 700; font-size: 16px; letter-spacing: .01em;
  padding: 15px 28px; border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  box-shadow: 0 0 0 rgba(206, 20, 23, 0);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(206, 20, 23, .38); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: 0 4px 16px rgba(206, 20, 23, .3); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Sichtbarer Fokus fuer alles, was per Tastatur erreichbar ist. */
.brand:focus-visible, .nav-links a:focus-visible, .foot a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 5px;
  border-radius: 6px; color: #fff;
}
.btn-small { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 18px 40px; font-size: 18px; }

/* ── Navigation ────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px max(24px, calc(50vw - var(--max) / 2));
  background: rgba(5, 5, 6, 0); border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
}
.nav.stuck {
  background: rgba(5, 5, 6, .9); border-bottom-color: var(--stroke);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; display: block;
  box-shadow: 0 0 18px rgba(206, 20, 23, .35);
}
.hero-logo {
  width: 82px; height: 82px; border-radius: 20px; display: block;
  margin-bottom: 22px;
  box-shadow: 0 10px 40px rgba(206, 20, 23, .3);
}
.brand-name { font-weight: 800; letter-spacing: .03em; font-size: 17px; }
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-size: 14px; color: var(--dim); font-weight: 600;
  transition: color .2s;
}
.nav-links a:hover { color: #fff; }

/* ── Hero ──────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: 1.12fr .88fr;
  align-items: center; gap: 48px;
  padding: 140px max(24px, calc(50vw - var(--max) / 2)) 110px;
}
/* Die Lichtwolke laeuft langsamer als die Seite. Traegt Tiefe, ohne dass
   irgendetwas Lesbares in Bewegung geraet. */
.hero-glow {
  position: absolute; left: -10%; top: 10%; width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px; pointer-events: none;
  background: radial-gradient(circle, rgba(206, 20, 23, .17), transparent 62%);
  filter: blur(30px);
  transform: translate3d(0, calc(var(--par, 0) * 1px), 0);
}
.hero-phone .phone { transform: translate3d(0, calc(var(--par, 0) * 1px), 0); }
.hero-inner { position: relative; z-index: 2; }
.hero h1 { margin: 18px 0 24px; }
.lede { color: var(--dim); font-size: clamp(17px, 1.5vw, 20px); max-width: 36ch; }
.hero-cta { display: flex; align-items: center; gap: 18px; margin-top: 38px; flex-wrap: wrap; }
.cta-note { font-size: 13px; color: var(--faint); letter-spacing: .04em; }

.scroll-hint {
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 36px; border: 1px solid var(--stroke-2); border-radius: 12px;
  transition: opacity .45s var(--ease);
}
/* Der Hinweis hat seine Arbeit getan, sobald jemand scrollt. */
body.gescrollt .scroll-hint { opacity: 0; }
.scroll-hint span {
  display: block; width: 3px; height: 7px; border-radius: 2px; background: var(--accent);
  margin: 7px auto 0; animation: hint 1.9s var(--ease) infinite;
}
@keyframes hint { 0%, 100% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; transform: translateY(9px); } }

/* ── Geraeterahmen ─────────────────────────────
   Der Rahmen ist gebaut, der INHALT ist immer eine echte Aufnahme aus
   dem iPhone-Simulator (site/screens/, 1206 x 2622 = 402 x 874 pt).
   Nichts an der App-Oberflaeche wird nachgezeichnet. Dynamic Island,
   Statusleiste und Tab-Leiste stecken im Screenshot selbst, deshalb hat
   der Rahmen davon nichts. */
.phone {
  position: relative; width: 296px; margin: 0 auto;
  border-radius: 50px; padding: 11px;
  background:
    linear-gradient(150deg, #4a4a50 0%, #2a2a30 14%, #16161a 30%,
                    #101014 52%, #1d1d22 72%, #3a3a42 88%, #202026 100%);
  box-shadow:
    0 50px 130px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 1px 1px rgba(255, 255, 255, .22),
    inset 0 -1px 1px rgba(255, 255, 255, .08);
}
/* Seitentasten. Je ein kleines Element, die weiteren Tasten entstehen als
   versetzte Schatten desselben Kaestchens. */
.phone::before {
  content: ""; position: absolute; left: -2px; top: 92px;
  width: 3px; height: 26px; border-radius: 2px; background: #34343c;
  box-shadow: 0 52px 0 #34343c, 0 96px 0 #34343c;
}
.phone::after {
  content: ""; position: absolute; right: -2px; top: 132px;
  width: 3px; height: 62px; border-radius: 2px; background: #34343c;
}
.phone-lg { width: 316px; }
.phone-screen {
  position: relative; background: var(--bg); border-radius: 40px;
  overflow: hidden; aspect-ratio: 402 / 874;
}
.phone-screen > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ── Punktering als Bildfolge ──────────────────
   18 Ausschnitte desselben Heute-Screens, Punktstand 0 bis 100. Beim
   Scrollen ist immer genau einer sichtbar, die uebrigen liegen
   deckungsgleich darunter. */
.ring-stack {
  position: relative; width: 300px; max-width: 100%;
  margin: 0 auto; aspect-ratio: 1;
}
/* HARTER SCHNITT, bewusst ohne Ueberblendung. Die Bilder sind deckend und
   tragen die Punktzahl an derselben Stelle: waehrend einer Blende laege
   „32" ueber „61", und genau das verbietet die Hausregel zur
   Textueberlagerung (Tim, 28.08.2026). Fluessig wirkt es trotzdem, weil
   die Sequenz eng gestuft ist. */
.ring-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
}
.ring-stack img.on { opacity: 1; }

/* ── Score-Story ───────────────────────────── */
.score-story { position: relative; }
.story-scrub { height: 340vh; }
.story-stage {
  position: sticky; top: 0; height: 100svh; display: flex; align-items: center;
  padding: 84px max(24px, calc(50vw - var(--max) / 2)) 40px;
  overflow: hidden;
}
.story-grid {
  width: 100%; display: grid; grid-template-columns: 1fr 320px;
  gap: 48px; align-items: center;
}
.story-left h2 { margin: 10px 0 12px; font-size: clamp(26px, 3.4vw, 44px); }
.story-sub { color: var(--dim); max-width: 44ch; font-size: 15px; }


/* Gedeckelt: ueber 640 px reisst die Zeile zwischen Bezeichnung und
   Punktzahl so weit auf, dass beide nicht mehr zusammengehoeren. */
.beats {
  list-style: none; margin: 24px 0 0; padding: 0; max-width: 640px;
  display: flex; flex-direction: column; gap: 7px;
}
.beat {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 15px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--stroke);
  opacity: .25; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              border-color .45s var(--ease), background .45s var(--ease);
}
.beat b { font-size: 14px; font-weight: 700; min-width: 0; }
.beat span { color: var(--faint); font-size: 13px; flex: 1; }
.beat em {
  font-style: normal; font-weight: 800; font-size: 14px;
  color: var(--faint); font-variant-numeric: tabular-nums;
  transition: color .45s var(--ease);
}
.beat.on { opacity: 1; transform: none; border-color: var(--stroke-2); background: var(--card-2); }
.beat.on em { color: var(--green); }

.ring-note {
  text-align: center; font-size: 13px; color: var(--dim);
  margin: 18px auto 0; max-width: 30ch; min-height: 40px;
}

/* ── Screens-Sektion: Anflug, Tab-Reise, Zoom in „Mehr" ──
   Der Ablauf haengt am Scrollfortschritt und wird in app.js gesetzt:
   --introX/--introO fuer den Auftakt, --phoneS/--phoneY fuer den Anflug,
   --zoom fuer die Schlussfahrt in den Mehr-Knopf. */
.screens { position: relative; }
.screens-scrub { height: 620vh; }
.screens-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 84px 24px 40px;
}

/* ── Getakteter Wechsel ─────────────────────────
   HAUSREGEL (Tim, 28.08.2026): Beim Scrollen darf nie Text ueber Text
   liegen. Alles, was hier absolut uebereinander sitzt, teilt sich deshalb
   eine Taktung: Abgehendes ist nach 220 ms weg, Ankommendes faengt erst
   nach 260 ms an. Zusammen mit der Regel in app.js (immer nur EIN Element
   traegt "on") kann sich nichts mehr ueberschneiden, auch nicht beim
   Zurueckscrollen und nicht bei einem schnellen Wisch. */
.screens-intro, .cap, .scr {
  opacity: 0;
  transition: opacity .22s var(--ease), transform .3s var(--ease);
}
.screens-intro.on, .cap.on, .scr.on {
  opacity: 1;
  transition: opacity .32s var(--ease) .26s, transform .46s var(--ease) .26s;
}

/* Auftakt, fliegt von rechts herein und beim Verlassen nach oben hinaus */
.screens-intro {
  position: absolute; left: max(24px, calc(50vw - var(--max) / 2));
  top: 50%; z-index: 3; max-width: 32ch;
  transform: translate(calc(var(--introX, 72) * 1px),
                       calc(-50% + var(--introY, 0) * 1px));
  will-change: transform, opacity;
}
.screens-intro h2 { margin-top: 12px; }

/* Telefon: fliegt heran, faehrt am Ende in den Mehr-Knopf hinein */
.screens-phone {
  position: relative; z-index: 2;
  transform:
    translate3d(calc(var(--phoneX, 132) * 1px), calc(var(--phoneY, 34) * 1px), 0)
    scale(var(--phoneS, .8));
  /* Anflug um die eigene Mitte, Schlussfahrt in den Mehr-Knopf unten
     rechts. app.js setzt --phoneO passend zum Abschnitt. */
  transform-origin: var(--phoneO, 50% 50%);
  will-change: transform;
}
.screens-phone .phone-lg { width: 292px; }
/* Niedrige Fenster: sonst reicht das Geraet ueber die Buehne hinaus und
   wird unten angeschnitten (Browserfenster mit viel Chrome). */
@media (min-width: 901px) and (max-height: 840px) {
  .screens-phone .phone-lg { width: 248px; }
  .screens-stage { padding-top: 70px; padding-bottom: 30px; }
}

/* Kurzerklaerungen, abwechselnd links und rechts vom Telefon */
.caps { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.cap { position: absolute; top: 50%; width: min(300px, 25vw); }
.cap.left  { left: max(24px, calc(50vw - var(--max) / 2)); transform: translate(-30px, -50%); }
.cap.right { right: max(24px, calc(50vw - var(--max) / 2)); transform: translate(30px, -50%); text-align: right; }
.cap.on { transform: translate(0, -50%); }
.cap b {
  display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.cap span { color: var(--dim); font-size: 15px; line-height: 1.55; }

/* Ein Tab = ein echter Screenshot, formatfuellend im Rahmen. Die
   Ein-/Ausblendung kommt aus der Taktungsregel weiter oben. */
.scr {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: translateY(14px) scale(.99);
  pointer-events: none;
}
.scr.on { transform: none; }

/* Mobiler Ersatz fuer die Tab-Reise: dieselben Aufnahmen untereinander,
   jede mit ihrer Erklaerung. Auf breiten Schirmen unsichtbar, dort laeuft
   die Choreografie. */
.screens-mobil { display: none; }

/* ── Prinzip ───────────────────────────────── */
.prinzip { padding: 150px 0 120px; }
.prinzip h2 { margin: 16px 0 60px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pcard {
  background: var(--card); border: 1px solid var(--stroke);
  border-radius: 20px; padding: 30px 26px;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.pcard:hover { transform: translateY(-4px); border-color: var(--stroke-2); }
.pnum {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em;
  color: var(--accent); margin-bottom: 16px;
}
.pcard h3 { margin-bottom: 10px; }
.pcard p { color: var(--dim); font-size: 15px; }

/* ── Privatsphäre ──────────────────────────── */
.privacy { padding: 110px 0; text-align: center; border-top: 1px solid var(--stroke); }
.privacy h2 { margin: 16px 0 22px; }
.privacy-text { color: var(--dim); font-size: 17px; }

/* ── Einschlag ─────────────────────────────────
   Der Blitz laedt sich beim Scrollen auf, schlaegt ein und laesst die
   Sektion rot nachgluehen. Gesteuert ueber --strike (0..1) aus app.js;
   Rot bleibt Glut und Akzent, keine gefuellte Flaeche. */
.strike { position: relative; }
.strike-scrub { height: 260vh; }
.strike-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 34px;
  padding: 90px max(24px, calc(50vw - var(--max) / 2)) 60px;
  text-align: center;
}
.strike-glow {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%)
    scale(calc(.6 + var(--strike, 0) * .9));
  width: 1100px; height: 1100px; max-width: 150vw; pointer-events: none;
  background: radial-gradient(circle,
    rgba(206, 20, 23, .42), rgba(206, 20, 23, .12) 38%, transparent 66%);
  opacity: var(--strike, 0); filter: blur(14px);
}
.strike-flash {
  position: absolute; inset: 0; pointer-events: none; background: #fff;
  opacity: 0;
}
.strike.hit .strike-flash { animation: flash .5s var(--ease) 1; }
@keyframes flash {
  0% { opacity: 0; } 8% { opacity: .82; } 22% { opacity: .12; }
  34% { opacity: .5; } 100% { opacity: 0; }
}

.bolt { width: clamp(90px, 11vw, 140px); height: auto; position: relative; z-index: 2; }
.bolt-path {
  fill: var(--accent);
  opacity: calc(.22 + var(--strike, 0) * .78);
  transform-origin: 50% 0%;
  transform: scaleY(calc(.86 + var(--strike, 0) * .14));
  filter: drop-shadow(0 0 calc(var(--strike, 0) * 46px) rgba(206, 20, 23, .95));
}

/* Breiter als vorher: mit 20ch brach die Zeile sechsmal um und stand als
   schmale Saeule in einem sehr breiten Bild (gemessen 28.08.). Jetzt traegt
   der Zeilenumbruch im Markup, die Ueberschrift steht in zwei Zeilen. */
.strike-copy { position: relative; z-index: 2; max-width: min(940px, 92vw); }
.strike-copy h2 { margin: 16px 0 0; max-width: none; }
.strike-sub {
  color: var(--dim); margin-top: 20px; max-width: 52ch;
  margin-left: auto; margin-right: auto;
  opacity: var(--strike, 0); transition: opacity .4s var(--ease);
}
.strike-copy .eyebrow, .strike-copy h2 {
  opacity: calc(.3 + var(--strike, 0) * .7);
}

/* ── CTA ───────────────────────────────────── */
.cta { position: relative; padding: 150px 0 160px; text-align: center; overflow: hidden; }
.cta-glow {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 900px; height: 900px; max-width: 130vw; pointer-events: none;
  background: radial-gradient(circle, rgba(206, 20, 23, .18), transparent 62%);
  filter: blur(20px);
}
.cta .wrap { position: relative; z-index: 2; }
.cta h2 { margin-bottom: 14px; }
.cta p { color: var(--dim); margin-bottom: 36px; }

/* ── Fuß ───────────────────────────────────── */
.foot {
  border-top: 1px solid var(--stroke); padding: 30px 24px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  max-width: var(--max); margin: 0 auto;
  font-size: 13px; color: var(--faint);
}
.foot nav { display: flex; gap: 22px; }
.foot a:hover { color: #fff; }

/* ── Reveal ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .09s; }
.d2 { transition-delay: .18s; }
.d3 { transition-delay: .27s; }

/* ── Schmale Schirme: Raster ─────────────────
   Nur Spaltenaufteilung. Was mit Bewegung zu tun hat, steht im Block
   darunter, damit reduzierte Bewegung nicht die Navigation mitnimmt. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 110px 24px 80px; text-align: left; }
  .hero-phone { margin-top: 44px; }
  .story-grid { grid-template-columns: 1fr; gap: 34px; }
  .cards3 { grid-template-columns: 1fr; }
  .prinzip { padding: 100px 0 84px; }
  .privacy { padding: 84px 0; }
  .cta { padding: 100px 0 110px; }
  .nav-links { display: none; }
  .screens-phone .phone-lg, .story-right .phone-lg { width: 268px; }
}


/* ── Statischer Aufbau ───────────────────────
   Gilt auf schmalen Schirmen UND bei reduzierter Bewegung. Die
   Sticky-Sektionen werden zu gewoehnlichen Abschnitten, die Scroll-Bahnen
   verschwinden, alle Zustaende stehen auf ihrem Endwert. Damit ist die
   Choreografie wirklich abschaltbar und nicht nur schneller. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .story-scrub, .screens-scrub, .strike-scrub { display: none; }
  .story-stage, .screens-stage, .strike-stage {
    position: relative; height: auto; overflow: visible;
  }
  .story-stage { padding: 90px 24px; }
  .screens-stage { padding: 90px 24px; flex-direction: column; gap: 36px; }
  .strike-stage { padding: 90px 24px; }
  .beat, .srow { opacity: 1; transform: none; }

  /* Der Ringstapel bleibt sichtbar (er zeigt den vollen Stand). Die
     Tab-Reise dagegen kann ohne Scroll-Choreografie nur EINEN der fuenf
     Screens zeigen – die anderen vier liegen deckungsgleich darunter und
     waeren unsichtbar. Deshalb tritt hier die Liste .screens-mobil an
     ihre Stelle: dieselben Aufnahmen, alle fuenf, untereinander. */
  .story-right { display: block; }
  .screens-phone { display: none; }
  /* width/align-self: ohne die beiden zieht sich die Liste auf die
     Eigenbreite der Aufnahmen (960 px) auf und steht bei 390 px Schirm
     zur Haelfte ausserhalb des Bildes (gemessen 28.08., l = -305). */
  .screens-mobil { display: flex; flex-direction: column; gap: 46px;
    list-style: none; margin: 0; padding: 0; order: 2;
    width: 100%; align-self: stretch; }
  .screens-intro { position: relative; left: auto; top: auto; transform: none; order: 1; max-width: 100%; }
  .caps { position: relative; inset: auto; order: 3; width: 100%; }
  .screens-intro, .screens-intro.on { opacity: 1; }
  .cap, .cap.left, .cap.right {
    position: relative; top: auto; left: auto; right: auto;
    transform: none; opacity: 1; width: 100%; text-align: left;
    margin-bottom: 22px;
  }
  .cap:last-child { margin-bottom: 0; }
  .cap b { font-size: 13px; }
  /* Die Kurzerklaerungen stehen in der Liste bei ihrem Bild, der alte
     Textblock ist dort doppelt. */
  .caps { display: none; }
  .screens-mobil li { display: flex; flex-direction: column; gap: 16px; }
  .screens-mobil img {
    display: block; width: 100%; max-width: 300px; height: auto;
    margin: 0 auto; border-radius: 26px; border: 1px solid var(--stroke);
  }
  .screens-mobil b {
    display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
  }
  .screens-mobil span { color: var(--dim); font-size: 15px; line-height: 1.55; }
  .strike-glow, .bolt-path, .strike-sub, .strike-copy .eyebrow, .strike-copy h2 { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* .scr bewusst NICHT auf 1: die fuenf Aufnahmen liegen uebereinander,
     sichtbar bleibt nur die mit .on. */
  .reveal, .beat, .srow, .screens-intro { opacity: 1 !important; transform: none !important; }
  .scr { transform: none !important; }
  .scroll-hint { display: none; }
}