/*
 * Rhythm Orbits — "Void"-Fassung der Startseite.
 *
 * Uebernimmt das System der Referenz (schwarze Buehne, monolithische Schrift,
 * keine Karten, keine Rahmen, ein einziger gesaettigter Akzent) und setzt darin
 * die *gemessene* Palette des Spiels ein statt des fremden Violetts: fuehrender
 * Ton ueber alle 34 Parallaxebenen ist Cyan mit 19,8 Prozent (raw/palette.json),
 * Ember steht an der Stelle des Bernstein-Funkens. Ein fremder Markenton haette
 * die Seite von jedem Screenshot des Spiels weggezogen.
 *
 * Scope: alles unter .void — die bestehende Startseite bleibt unberuehrt.
 */

.void {
  /* Farben */
  --v-void: #000000;
  --v-bone: #ffffff;
  --v-ash: #9a9a9a;
  --v-mist: #bdbdbd;
  --v-iris: #3ec3f0;   /* Akzent: gefuellte Pille, Markenzeichen, aktive Zustaende */
  --v-spark: #ffb829;  /* Funke: Kleinlabels, Betonung, Zaehler */
  --v-deep: #6b3cff;   /* dritter Ton, nur in Partikeln */
  --v-ink: #04070c;    /* Schrift auf der Akzentflaeche */

  /* Schrift */
  --v-font: InterVar, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --v-display: clamp(50px, 8.4vw, 113px);
  --v-h-lg: clamp(38px, 5.6vw, 78px);
  --v-h: clamp(30px, 3.4vw, 48px);
  --v-h-sm: clamp(26px, 2.9vw, 42px);
  --v-h-xs: clamp(21px, 1.9vw, 27px);
  --v-body: clamp(16.5px, 1.15vw, 18px);

  /* Raster */
  --v-wrap: 1280px;
  --v-gap: clamp(60px, 9vw, 120px);
  --v-r: 24px;

  background: var(--v-void);
  color: var(--v-bone);
  font-family: var(--v-font);
  font-size: var(--v-body);
  font-weight: 200;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on;
  /* `clip`, nicht `hidden`: ein Vorfahr mit overflow:hidden wird selbst zum
     Scrollcontainer und setzt damit jedes `position: sticky` darin ausser
     Kraft — die Szenen standen dadurch nicht, sie liefen einfach durch. */
  overflow-x: clip;
}

/* `.void` ist der Body selbst — und `.void *` trifft nur Nachfahren. Der
   Browser-Standardrand von 8px blieb dadurch stehen: die Seite sass in einem
   hellen Rahmen aus Schirmfarbe, den man auf Schwarz gerade so nicht sieht.
   Ein Ruecksetzer muss das Element treffen, auf dem er sitzt. */
.void, .void * { margin: 0; padding: 0; box-sizing: border-box; }
.void img, .void video, .void canvas, .void svg { display: block; max-width: 100%; }
.void img[width][height] { height: auto; }
.void a { color: inherit; text-decoration: none; }
.void button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.void ul, .void ol { list-style: none; }
.void ::selection { background: color-mix(in srgb, var(--v-iris) 34%, transparent); }
.void :focus-visible { outline: 2px solid var(--v-iris); outline-offset: 4px; border-radius: 4px; }
.void .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html:has(.void) { scroll-behavior: smooth; scroll-padding-top: 96px; background: #000; }

.v-wrap { width: 100%; max-width: var(--v-wrap); margin-inline: auto; padding-inline: clamp(20px, 4.6vw, 48px); }
.v-wrap--narrow { max-width: 860px; }

/* ── Schrift ─────────────────────────────────────────────────────────────
   Hierarchie kommt aus Groesse und Laufweite, nicht aus Fettung: jede
   Ueberschrift steht auf 400, genau wie der Fliesstext. */

.v-display, .v-h1, .v-h2, .v-h3 {
  font-weight: 400; line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance;
}
.v-display { font-size: var(--v-display); line-height: 0.98; }
.v-h1 { font-size: var(--v-h-lg); }
.v-h2 { font-size: var(--v-h); }
.v-h3 { font-size: var(--v-h-xs); letter-spacing: -0.02em; line-height: 1.15; }

.v-label {
  font-size: 14px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.025em; text-transform: uppercase; color: var(--v-spark);
}
.v-lead { font-size: var(--v-body); font-weight: 200; color: var(--v-bone); max-width: 36ch; }
.v-body { font-size: var(--v-body); font-weight: 200; color: var(--v-mist); max-width: 44ch; }
.v-cap { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--v-ash); letter-spacing: 0.02em; }
.v-em { color: var(--v-spark); font-style: normal; }
.v-tint { color: var(--v-iris); }

/* ── Knoepfe ─────────────────────────────────────────────────────────────
   Genau eine gefuellte Pille pro Ansicht. Alles andere ist blanker Text. */

.v-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  background: var(--v-iris); color: var(--v-ink);
  font-size: 14px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase;
  transition: filter 0.2s, transform 0.2s;
}
.v-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.v-btn:disabled { opacity: 0.5; }
/*
 * Der Play-Knopf ist der Handlungsaufruf der Seite und darf groesser stehen als
 * ein Navigationsknopf — er ersetzt seit dem Livegang den Anmeldekasten, der
 * vorher an derselben Stelle sass und deutlich mehr Flaeche hatte.
 */
.v-btn--play { padding: 17px 34px; font-size: 15px; }
.v-btn--ghost {
  background: none; color: var(--v-bone);
  padding-inline: 0; text-decoration: underline; text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, var(--v-bone) 34%, transparent);
}
.v-btn--ghost:hover { filter: none; transform: none; text-decoration-color: var(--v-bone); }
.v-link { color: var(--v-ash); transition: color 0.2s; }
.v-link:hover { color: var(--v-bone); }

/* ── Kopfzeile ───────────────────────────────────────────────────────── */

.v-nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  transition: background 0.3s, backdrop-filter 0.3s;
}
.v-nav.is-stuck { background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(14px); }
.v-nav__in {
  display: flex; align-items: center; gap: 30px;
  max-width: var(--v-wrap); margin-inline: auto;
  padding: 18px clamp(20px, 4.6vw, 48px);
}
.v-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.v-brand__mark { width: 30px; height: 30px; border-radius: 8px; }
.v-brand__txt { font-size: 15px; font-weight: 400; letter-spacing: -0.02em; }
.v-nav__links { display: flex; gap: 30px; }
.v-nav__links a {
  font-size: 14px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase;
  color: var(--v-ash); transition: color 0.2s;
}
.v-nav__links a:hover { color: var(--v-bone); }
.v-nav__end { display: flex; align-items: center; gap: 18px; }
.v-lang { font-size: 14px; font-weight: 600; letter-spacing: 0.025em; color: var(--v-ash); }
.v-lang:hover { color: var(--v-bone); }
.v-burger { display: none; width: 34px; height: 34px; place-items: center; }
.v-burger span { display: block; width: 20px; height: 1.5px; background: var(--v-bone); transition: transform 0.25s; }
.v-burger span + span { margin-top: 5px; }
.v-nav.is-open .v-burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
.v-nav.is-open .v-burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.v-nav__mobile { display: none; flex-direction: column; gap: 6px; padding: 6px clamp(20px, 4.6vw, 48px) 30px; }
.v-nav__mobile a { padding: 10px 0; font-size: 21px; font-weight: 400; letter-spacing: -0.02em; }

@media (max-width: 940px) {
  .v-nav__links { display: none; }
  .v-burger { display: grid; }
  .v-nav.is-open { background: rgba(0, 0, 0, 0.96); backdrop-filter: blur(14px); }
  .v-nav__mobile:not([hidden]) { display: flex; }
}
@media (max-width: 460px) { .v-nav__end .v-btn { display: none; } }

/* ── Buehne ──────────────────────────────────────────────────────────── */

.v-main { padding-top: 96px; }
.v-sec { padding-block: var(--v-gap); }
.v-sec--tight { padding-block: calc(var(--v-gap) * 0.62); }

/* Zweispaltig, im Wechsel: Text links / Bild rechts, dann umgekehrt. */
.v-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 96px); align-items: center;
}
.v-split--rev > :first-child { order: 2; }
.v-split__copy > * + * { margin-top: 24px; }
.v-split__copy .v-label + * { margin-top: 18px; }
@media (max-width: 900px) {
  .v-split { grid-template-columns: 1fr; }
  .v-split--rev > :first-child { order: 0; }
}

/* ── Bühne ──────────────────────────────────────────────────────────────
   Ein fixes Canvas hinter der ganzen Seite. Der Scroll fliegt die Kamera
   hindurch (public/js/void.js); die Abschnitte darueber sind transparent. */

/* Der Nebel liegt ganz unten, das Partikelfeld darueber, der Inhalt darauf. */
.v-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* Der Nebel gehoert in die Bildhaelfte, in der die Wolke fliegt. Ueber die
     ganze Flaeche gelegt war er kein Hintergrund mehr, sondern ein Bild — und
     die Schlagzeile stand nicht mehr auf Schwarz, sondern auf Tuerkis. */
  -webkit-mask-image: radial-gradient(128% 104% at 70% 36%, #000 0%, #000 26%, transparent 76%);
  mask-image: radial-gradient(128% 104% at 70% 36%, #000 0%, #000 26%, transparent 76%);
}
.v-sky img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.8s linear;
  transform: scale(1.12) translate3d(0, var(--sky-y, 0), 0);
  will-change: opacity, transform;
}
.v-field { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.v-field__canvas { width: 100%; height: 100%; }
.v-field__spectacle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: screen;
}
/* Ohne Skript bleibt die Seite schwarz statt weiss. */
.void { background: var(--v-void); }
/* Nur die beiden, die wirklich `relative` brauchen. Die Kopfzeile stand hier
   mit drin und verlor damit ihr `position: fixed` aus derselben Datei — gleiche
   Spezifitaet, spaetere Regel gewinnt. Sie scrollte weg, obwohl vierzig Zeilen
   weiter oben `fixed` steht. */
.v-main, .v-foot { position: relative; z-index: 2; }
.v-nav { z-index: 60; }

/* Szenen: hohe Abschnitte, deren Inhalt stehen bleibt, waehrend die Kamera
   weiterfliegt — dasselbe Mittel wie in der Vorlage (`section--tall`). */
.v-scene { position: relative; }
.v-scene--tall { min-height: 165vh; }
.v-hold {
  position: sticky; top: 0; min-height: 100svh;
  display: grid; align-content: center; padding-block: 96px 60px;
}
@media (max-width: 900px) {
  .v-scene--tall { min-height: auto; }
  .v-hold { position: static; min-height: 0; padding-block: var(--v-gap) 0; }
}

/* Eine Ausnahme: der Abschnitt, in dem sich der Schriftzug bildet, bleibt auf
   jeder Breite hoch und klebend. Ohne ihn laeuft auf dem Telefon Inhalt an
   Inhalt, und der Name stuende hinter dem Demo-Telefon statt auf der Buehne. */
.v-scene--stage { min-height: 190vh; }
.v-scene--stage .v-hold {
  position: sticky; top: 0; min-height: 100svh;
  align-content: center; padding-block: 96px 60px;
}

/* Ein Abschnitt, der die Buehne verdunkelt, damit lange Texte lesbar bleiben.
   Kein Kasten, kein Rahmen — nur ein weicher Schleier ueber dem Flug. */
.v-veil::before {
  content: ''; position: absolute; inset: -10vh 0; z-index: -1;
  background: radial-gradient(120% 60% at 50% 50%, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  pointer-events: none;
}
/* Der Schleier wird ueber z-index hinter den Inhalt gelegt, nicht dadurch,
   dass der Inhalt `position: relative` bekommt: jene Regel hatte dieselbe
   Spezifitaet wie `.v-hold` und stand spaeter — sie machte aus jedem
   klebenden Abschnitt einen mitlaufenden. */

/* ── Hero ────────────────────────────────────────────────────────────── */

.v-hero { position: relative; min-height: 100svh; display: grid; align-content: center; padding-block: clamp(36px, 6vw, 84px) var(--v-gap); }
.v-hero__in { position: relative; z-index: 2; }
.v-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.v-hero__copy > * + * { margin-top: 24px; }
.v-hero__copy { min-width: 0; }
.v-hero__title { max-width: 11ch; }
.v-hero__cta { display: flex; align-items: flex-start; gap: 18px 30px; flex-wrap: wrap; }
.v-hero__cta .notify { flex: 1 1 360px; }
.void .v-hero__cta .notify__form {
  flex-wrap: nowrap; gap: 4px; padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(12px);
}
.void .v-hero__cta .notify__input { flex: 1 1 0; width: 0; padding: 11px 14px; border-bottom: 0; }
.void .v-hero__cta .notify__input:focus { box-shadow: inset 0 0 0 1px var(--v-iris); border-radius: 999px; }
.void .v-hero__cta .notify__send { flex: none; min-height: 44px; }
.v-hero__cta .v-store { margin-top: 8px; }
.v-hero__note { font-size: 12px; color: var(--v-ash); max-width: 46ch; }
.v-facts { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 36px; }
.v-facts li { font-size: 12px; letter-spacing: 0.025em; text-transform: uppercase; font-weight: 600; color: var(--v-ash); }
.v-scrollcue {
  position: absolute; left: 50%; bottom: 30px; translate: -50% 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v-ash);
  display: grid; justify-items: center; gap: 12px;
  transition: opacity 0.4s ease;
}
.v-scrollcue i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--v-iris), transparent); animation: vCue 2.4s ease-in-out infinite; }
@keyframes vCue { 0%, 100% { opacity: 0.25; transform: scaleY(0.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 900px) {
  .v-hero__grid { grid-template-columns: 1fr; }
  .v-hero__title { max-width: none; }
  .v-hero__cta { display: grid; gap: 20px; }
  .v-hero__cta .notify { width: 100%; max-width: none; }
  .v-hero__cta .v-store { margin-top: 0; }
  .v-scrollcue { display: none; }
}
@media (max-width: 520px) {
  .void .v-hero__cta .notify__send { padding-inline: 18px; font-size: 12.5px; }
}

/* ── Zahlenreihe: nur Typografie, keine Kacheln ──────────────────────── */

.v-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.v-counts b { display: block; font-size: var(--v-h-sm); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.v-counts span { display: block; margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--v-ash); }
@media (max-width: 720px) { .v-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Bilder: nur Radius, nie Rahmen oder Schatten ────────────────────── */

.v-media { border-radius: var(--v-r); overflow: hidden; background: #000; }
.v-media video, .v-media img { width: 100%; height: auto; }
.v-media--tall { max-width: 300px; margin-inline: auto; }
.v-figure figcaption { margin-top: 18px; }

.v-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; }
.v-duo > :last-child { margin-top: 36px; }

/* ── Schrittliste / Merkmale: blanke Textbloecke ─────────────────────── */

.v-steps { display: grid; gap: 30px; }
.v-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; }
.v-steps .v-n { font-size: 12px; font-weight: 600; letter-spacing: 0.025em; color: var(--v-spark); padding-top: 6px; }
.v-steps p { margin-top: 6px; color: var(--v-mist); font-weight: 200; }

.v-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px clamp(30px, 5vw, 96px); }
.v-list li > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.025em; color: var(--v-spark); margin-bottom: 12px; }
.v-list p { margin-top: 12px; color: var(--v-mist); font-weight: 200; }
@media (max-width: 760px) { .v-list { grid-template-columns: 1fr; gap: 36px; } }

/* ── Weltenband ──────────────────────────────────────────────────────── */

.v-rail { margin-top: 60px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.v-rail::-webkit-scrollbar { display: none; }
.v-rail.is-drag { cursor: grabbing; }
.v-rail__track {
  display: flex; gap: 24px;
  padding-inline: max(calc((100vw - var(--v-wrap)) / 2 + clamp(20px, 4.6vw, 48px)), clamp(20px, 4.6vw, 48px));
  padding-bottom: 12px;
}
.v-world { flex: 0 0 min(74vw, 420px); scroll-snap-align: start; }
.v-world img { width: 100%; height: auto; border-radius: var(--v-r); }
.v-world__n { display: block; margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.025em; color: var(--v-iris); }
.v-world h3 { margin-top: 6px; }
.v-world p { margin-top: 6px; color: var(--v-mist); font-weight: 200; font-size: 15px; }

/* ── Galerie ─────────────────────────────────────────────────────────── */

.v-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.v-gallery button { display: block; width: 100%; text-align: left; }
.v-gallery img { width: 100%; height: auto; border-radius: var(--v-r); transition: opacity 0.25s; }
.v-gallery button:hover img { opacity: 0.72; }
.v-gallery .v-cap { display: block; margin-top: 12px; }
@media (max-width: 900px) { .v-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .v-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }

/* ── FAQ: Haarlinien statt Karten ────────────────────────────────────── */

.v-faq details { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.v-faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.v-faq summary {
  display: flex; align-items: baseline; gap: 24px; justify-content: space-between;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(19px, 1.9vw, 24px); font-weight: 400; letter-spacing: -0.02em;
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; color: var(--v-iris); font-weight: 200; font-size: 24px; line-height: 1; }
.v-faq details[open] summary::after { content: "–"; }
.v-faq__a { padding-bottom: 24px; color: var(--v-mist); font-weight: 200; max-width: 62ch; }

/* ── Anmeldung ───────────────────────────────────────────────────────── */

.void .notify { max-width: 480px; }
.void .notify__form { display: flex; gap: 12px; flex-wrap: wrap; }
.void .notify__input {
  flex: 1 1 200px; min-width: 0; padding: 13px 0;
  background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--v-bone); font: inherit; font-size: 15px; font-weight: 200;
}
.void .notify__input::placeholder { color: var(--v-ash); }
.void .notify__input:focus { outline: 0; border-bottom-color: var(--v-iris); }
.void .notify__send {
  padding: 13px 24px; border-radius: 999px; background: var(--v-iris); color: var(--v-ink);
  font-size: 14px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase;
}
.void .notify__msg { margin-top: 12px; font-size: 14px; color: var(--v-ash); min-height: 1.4em; }
.void .notify__msg.is-ok { color: var(--v-iris); }
.void .notify__msg.is-err { color: var(--v-spark); }
.void .notify__fine { margin-top: 12px; font-size: 12px; color: var(--v-ash); }

/* ── Store-Platzhalter: bleibt Platzhalter, nur ohne Kasten ──────────── */

.v-store { display: inline-flex; align-items: center; gap: 12px; color: var(--v-bone); }
.v-store svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.v-store b { font-size: 14px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; }
.v-store small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.025em; color: var(--v-spark); }

/* ── Fusszeile ───────────────────────────────────────────────────────── */

.v-foot { padding-block: var(--v-gap) 60px; }
.v-foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 36px; }
.v-foot__grid p { margin-top: 18px; color: var(--v-ash); font-size: 15px; max-width: 34ch; }
.v-foot__col h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--v-ash); margin-bottom: 18px; }
.v-foot__col a { display: block; padding: 5px 0; font-size: 15px; font-weight: 200; }
.v-foot__col a:hover { color: var(--v-iris); }
.v-foot__bar {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px; color: var(--v-ash);
}
@media (max-width: 760px) { .v-foot__grid { grid-template-columns: 1fr; } }

/* ── Leuchtkasten ────────────────────────────────────────────────────── */

.void .lightbox {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 36px; background: rgba(0, 0, 0, 0.94);
}
.void .lightbox[hidden] { display: none; }
.void .lightbox img { max-height: 82vh; width: auto; border-radius: var(--v-r); }
.void .lightbox figcaption { margin-top: 18px; text-align: center; font-size: 12px; color: var(--v-ash); }
.void .lightbox__close { position: absolute; top: 24px; right: 24px; font-size: 30px; font-weight: 200; }

/* ── Demo-Telefon: dieselbe Mechanik, ohne Chrom ─────────────────────── */

.void .hero-demo { width: min(100%, 330px); justify-self: end; }
.void .demo-phone {
  padding: 0; border: 0; border-radius: 34px; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.void .demo-phone::before { content: none; }
.void .demo-phone__screen { border-radius: 34px; background: #000; }
.void .demo-phone__speaker { display: none; }
.void .demo-meta { font-family: var(--v-font); font-size: 12px; font-weight: 600; letter-spacing: 0.025em; color: var(--v-ash); }
.void .demo-meta i { background: var(--v-iris); box-shadow: none; }
.void .demo-launch-panel { background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.84)); padding: 30px 18px 24px; }
.void .demo-launch {
  border: 0; border-radius: 999px; background: var(--v-iris); box-shadow: none; min-height: 52px; gap: 2px;
}
.void .demo-launch strong { font-family: var(--v-font); font-size: 14px; font-weight: 600; letter-spacing: 0.025em; color: var(--v-ink); }
.void .demo-launch small { font-family: var(--v-font); font-size: 12px; font-weight: 400; color: rgba(4, 7, 12, 0.66); }
.void .demo-launch__orbit { border-color: rgba(255, 255, 255, 0.28); }
.void .demo-launch__orbit::after { border-color: rgba(255, 255, 255, 0.16); }
.void .demo-launch__orbit i:first-child { color: var(--v-iris); background: var(--v-iris); box-shadow: none; }
.void .demo-launch__orbit i:last-child { color: var(--v-spark); background: var(--v-spark); box-shadow: none; }
.void .demo-level {
  border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: var(--v-mist);
}
.void .demo-level span { font-family: var(--v-font); font-size: 11px; font-weight: 600; letter-spacing: 0.025em; }
.void .demo-level small { font-family: var(--v-font); font-size: 9px; font-weight: 400; color: var(--v-ash); }
.void .demo-level.is-selected { background: var(--v-iris); color: var(--v-ink); }
.void .demo-level.is-selected small { color: rgba(4, 7, 12, 0.66); }
.void .demo-close { background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.24); }

/* ── Einblenden ──────────────────────────────────────────────────────── */

.void .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.7, 0.28, 1);
  transition-delay: var(--d, 0ms);
}
.void .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .void .reveal { opacity: 1; transform: none; transition: none; }
  html:has(.void) { scroll-behavior: auto; }
}

/* ── Zeilenweise Enthüllung ──────────────────────────────────────────────
   Schlagzeilen kommen zeilenweise unter einer Kante hervor, nicht als Block.
   Das ist die Bewegung, die grosse Typografie ueberhaupt erst traegt. */

.v-lines { display: block; }
.v-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.v-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s cubic-bezier(0.16, 0.9, 0.24, 1);
  transition-delay: var(--ld, 0ms);
}
.reveal.is-in .v-line > span, .is-in .v-line > span { transform: none; }

/* Der Weltenlauf: bodenlanges Band, das mit dem Scroll seitlich zieht. */
.v-drift { overflow: hidden; }
.v-drift__track {
  display: flex; gap: 24px; width: max-content; will-change: transform;
  transition: transform 0.75s cubic-bezier(0.16, 0.9, 0.24, 1);
}
.v-drift__track img { width: min(60vw, 460px); height: auto; border-radius: var(--v-r); }

@media (prefers-reduced-motion: reduce) {
  .v-line > span { transform: none; transition: none; }
  .v-scrollcue i { animation: none; }
}

/* ── Korn ────────────────────────────────────────────────────────────────
   Die Vorlage legt ein feines Rauschen ueber die ganze Seite. Es kostet die
   Flaechen ihre digitale Glaette — ohne das wirkt reines Schwarz flach. */
.v-grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── Auftakt ─────────────────────────────────────────────────────────────
   Ein kurzer schwarzer Vorhang, der erst weicht, wenn Schrift und Buehne
   stehen. Ohne ihn sieht man beim Laden erst die Rohschrift springen. */
.v-boot {
  position: fixed; inset: 0; z-index: 90; background: #000;
  transition: opacity 0.8s ease 0.15s, visibility 0s linear 0.95s;
}
.v-boot.is-done { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .v-boot { display: none; }
  .v-grain { opacity: 0.3; }
}

/* Im Abschluss steht die Anmeldung mittig — dort ist sie das einzige Element
   der Ansicht, und ein linksbuendiges Feld unter einer zentrierten Zeile
   liest sich als Versehen. */
#cta .notify { margin-inline: auto; }
#cta .notify__form { justify-content: center; }
#cta .notify__msg, #cta .notify__fine { text-align: center; }

/* Der Abschluss: der Ring steht ueber der Bildmitte und traegt das Zeichen,
   der Text sitzt darunter. Mittig gesetzt lag die Schlagzeile quer im Ring. */
#cta .v-hold { align-content: end; padding-block: 96px 60px; }

/* ── Kanäle ──────────────────────────────────────────────────────────────
   Blanke Leuchtzeichen ohne Pille darunter — dieselbe Haltung wie im Rest
   der Seite: der Umriss traegt, nicht ein Kasten dahinter. */
.v-social { display: flex; gap: 18px; margin-top: 24px; }
.v-social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; color: var(--v-ash);
  transition: color 0.2s, transform 0.2s, background 0.2s;
}
.v-social svg { width: 20px; height: 20px; }
.v-social a:hover { color: var(--v-ink); background: var(--v-iris); transform: translateY(-2px); }

/* ── Ein Rahmen für alle ─────────────────────────────────────────────────
   Auf der Seite standen vier verschiedene Fassungen nebeneinander: das
   Demo-Telefon mit Rand und Lautsprecher, die Videoplaetze als nackte
   abgerundete Kaesten, die Galerie als blanke Bilder. Alle zeigen dasselbe —
   einen Handybildschirm — und bekommen deshalb dieselbe Fassung.

   Gebaut aus gestapelten Schatten statt aus Rahmen und Innenabstand: so
   liegt der Koerper *ausserhalb* der Flaeche, das Bild bleibt randlos, und
   der Schein nach aussen ist Teil derselben Angabe. */

.void {
  --v-frame-radius: 30px;
  --v-frame:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 7px #05080e,
    0 0 0 8px rgba(255, 255, 255, 0.07),
    0 0 34px -4px rgba(62, 195, 240, 0.4),
    0 0 72px -12px rgba(62, 195, 240, 0.28),
    0 26px 60px -24px rgba(0, 0, 0, 0.95);
  --v-frame-hover:
    0 0 0 1px rgba(255, 255, 255, 0.26),
    0 0 0 7px #05080e,
    0 0 0 8px rgba(255, 255, 255, 0.12),
    0 0 44px -2px rgba(62, 195, 240, 0.62),
    0 0 96px -10px rgba(62, 195, 240, 0.4),
    0 26px 60px -24px rgba(0, 0, 0, 0.95);
}

.v-media,
.v-gallery img,
.void .demo-phone {
  border-radius: var(--v-frame-radius);
  box-shadow: var(--v-frame);
  transition: box-shadow 0.35s var(--ease, ease), transform 0.35s ease;
}
.v-gallery button:hover img,
.v-media:hover { box-shadow: var(--v-frame-hover); }
.v-gallery button:hover img { opacity: 1; transform: translateY(-3px); }

/* Das Demo-Telefon hatte den Rahmen als echten Rand plus Innenabstand; beides
   entfaellt, sonst sitzt der Koerper doppelt. */
.void .demo-phone { padding: 0; border: 0; background: #000; }
.void .demo-phone__screen { border-radius: var(--v-frame-radius); }

/* Genug Luft, damit der Schein nicht an der Nachbarspalte abgeschnitten wird. */
.v-gallery { gap: 30px; }
.v-duo { gap: 24px; }
@media (max-width: 620px) { .v-gallery { gap: 22px; } }

/* Der Rahmen traegt jetzt acht Punkte Koerper nach aussen; die Beschriftung
   darueber sass mit zwoelf Punkten Abstand halb darunter. */
.void .demo-meta { margin: 0 4px 20px; }

/* Sprungmarke: auf der ausgelieferten Seite muss die Tastatur den Flug
   ueberspringen koennen. Sichtbar erst beim Fokus. */
.v-skip {
  position: absolute; left: 50%; top: -120px; translate: -50% 0; z-index: 100;
  background: var(--v-iris); color: var(--v-ink);
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.025em;
  transition: top 0.2s;
}
.v-skip:focus { top: 0; }