/* Project Nika — Landing-Page (Briefing E, Fassung 3).
 *
 * Palette aus der App (app/artifacts/mobile/constants/colors.ts). Kein zweites
 * Design-System, kein Tailwind, keine Komponentenbibliothek, kein Bau-Schritt.
 * Schriften liegen lokal in fonts/ — die Seite lädt von keinem fremden Host.
 *
 * Disziplin, die die Referenz trägt und die hier gilt:
 *   · genau sechs Textgrößen auf der ganzen Seite (--t-*)
 *   · Rahmen sind weiße Deckkraft, keine eigene Rahmenfarbe
 *   · der Akzent kommt selten vor: Knopf, Marke, Cursor — sonst nichts
 *
 * Ebenen:
 *   .bgfx (fixed, z 0)  → Linienfeld + drei Verdunklungen
 *   header/main/footer  → z 1, alles Lesbare liegt darüber
 */

/* ── Schriften ───────────────────────────────────────────────────────────── */
/* Variable Schnitte, auf Latin beschränkt (Inter 48 KB, JetBrains Mono 31 KB).
   Lizenz je Datei daneben: fonts/OFL-*.txt, beide SIL OFL 1.1. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-latin-var.woff2") format("woff2");
}

:root {
  /* Farben */
  --bg: #0d0f11;
  --bg-raise: #17191c;
  --card: #1b1e22;
  --fg: #eaeae4;
  /* `--fg-dim` trägt nur den gedämpften Teil der 76-px-Überschrift — großer
     Text, 3:1 reicht. `--fg-faint` trägt kleine Sachen (11–15 px: Marken,
     Pfade, Bildunterschriften, Fußtext) und muss deshalb HELLER sein, nicht
     dunkler: bei 0,32 waren es gemessene 2,57:1 gegen den Grund, verlangt sind
     4,5:1 (Runde 13). */
  --fg-dim: rgba(234, 234, 228, 0.5);
  --fg-muted: #9aa1a9;
  --fg-faint: rgba(234, 234, 228, 0.56);
  /* Ruhige Inhaltsfläche ÜBER dem Linienfeld (Runde V1→V2): satt genug, dass
     die Textur nicht durch den Inhalt läuft — sie lebt zwischen den Flächen. */
  --surface: rgba(19, 22, 26, 0.72);
  --accent: #7fcde6;
  --accent-fg: #10161a;
  /* Rahmen als weiße Deckkraft — sitzt auf jedem Untergrund richtig. */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Maße */
  --radius: 10px;
  --radius-lg: 18px;
  --wrap: 1152px;
  --wrap-wide: 1280px;
  --wrap-head: 768px;
  --pad-x: 24px;

  /* Genau sechs Textgrößen. Mehr kommt nicht dazu. */
  --t-hero: clamp(40px, 6vw, 76px);
  --t-h2: clamp(29px, 3.1vw, 44px);
  --t-lede: clamp(16px, 1.2vw, 17px);
  --t-body: 15px;
  --t-small: 13px;
  --t-mark: 11px;

  /* Genau ZWEI Laufweiten in der Mono, und die Regel ist die Schriftlage:
     Versalien brauchen Luft, Groß-/Kleinschreibung nicht. Vorher standen hier
     sechs Werte (0,06 · 0,10 · 0,12 · 0,14 · 0,16 · 0,18 em) ohne erkennbare
     Regel — GAP_TO_VERTUS §7. */
  --track-caps: 0.16em;
  --track-mixed: 0.08em;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

h1,
h2 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 20;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-decoration: none;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
  padding-left: max(var(--pad-x), env(safe-area-inset-left));
  padding-right: max(var(--pad-x), env(safe-area-inset-right));
}

/* ── Hintergrund: Linienfeld ─────────────────────────────────────────────── */
/* Textur statt Objekten. Der Effekt darf dem Text nie in die Quere kommen:
   oben und unten je 140 px Verlauf zur Hintergrundfarbe, darüber eine Vignette
   zum Rand hin. Wer den Effekt sofort bemerkt, sieht ihn zu stark. */

.bgfx {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Fällt das Canvas aus (kein WebGL, Datei blockiert), bleibt eine statische
     Textur derselben Machart übrig — nie eine tote Fläche.
     ⚠ Sie war RÜCKFALL gedacht und lief trotzdem immer mit: alle Motive
     zeichnen mit Alpha, also schienen diese Diagonalen durch jedes davon
     durch. Joel am 5.8.: „da sind auch so Querstreifen im Hintergrund, durch
     alle durch." Deshalb die Regel unten — liegt ein Canvas drin, ist der
     Rückfall aus. Ohne `:has()`-Unterstützung bleibt es beim alten Verhalten,
     das ist kein Bruch, nur der bisherige Stand. */
  background-image: repeating-linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 255, 255, 0) 26px
    ),
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(127, 205, 230, 0.05), transparent 70%);
}

/* Der Rückfall ist ein Rückfall. Läuft das Canvas, hat er nichts zu suchen. */
.bgfx:has(canvas) {
  background-image: none;
}

.bgfx canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.bgfx-top,
.bgfx-bottom,
.bgfx-vignette {
  position: absolute;
  pointer-events: none;
}

.bgfx-top {
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  background: linear-gradient(to bottom, var(--bg), rgba(13, 15, 17, 0));
}

.bgfx-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to top, var(--bg), rgba(13, 15, 17, 0));
}

/* KEINE radiale Vignette von der Mitte nach außen — das war der Fehler in
   Runde 2. Bei terax steht der Text mittig und die freien Flächen liegen außen;
   bei uns ist es umgekehrt (Text links/mittig, Luft rechts und an den Rändern).
   Eine Mittenvignette löscht also genau die Stellen, an denen die Textur
   arbeiten soll. Stattdessen: seitliche Abdunklung. */
.bgfx-vignette {
  inset: 0;
  opacity: 1;
  background: linear-gradient(
      to right,
      var(--bg) 0%,
      rgba(13, 15, 17, 0) 24%,
      rgba(13, 15, 17, 0) 88%,
      var(--bg) 100%
    ),
    radial-gradient(ellipse 120% 70% at 50% 50%, rgba(13, 15, 17, 0) 55%, var(--bg) 100%);
}

/* ── Kopfleiste ──────────────────────────────────────────────────────────── */
/* Ab ~12 px Scrollstand zieht sich die Leiste zusammen und der innere Container
   wird zur schwebenden Pille. */

.topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  padding: 16px max(var(--pad-x), env(safe-area-inset-left)) 10px
    max(var(--pad-x), env(safe-area-inset-right));
  transition: padding 300ms ease;
}

.topbar-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  transition: background 300ms ease, border-color 300ms ease, padding 300ms ease,
    box-shadow 300ms ease;
}

.topbar.is-scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
}

.topbar.is-scrolled .topbar-inner {
  border-color: var(--line);
  background: rgba(19, 21, 24, 0.72);
  box-shadow: 0 12px 40px -18px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  min-width: 0;
}

.mark-logo {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex: none;
}

/* Der drehende Stein tritt an die Stelle des Zeichens (mark-gem.js). Gleiche
   Maße, damit die Kopfleiste beim Austausch nicht springt. */
.mark-gem {
  width: 22px;
  height: 22px;
  flex: none;
  overflow: visible;
}

/* Das Zeichen zeichnet sich beim Laden selbst — ein Strich, von oben nach
   unten, danach Ruhe. Kein Dauerloop.
   Bewusst dieselben Werte wie in der App (`components/DrawnNikaMark.tsx`):
   Pfadlänge 1140 viewBox-Einheiten (drei Strecken, ≈1102, aufgerundet damit
   bei vollem Versatz kein Stummel stehen bleibt), 1500 ms,
   cubic-bezier(.65,0,.35,1). Web und App sollen dieselbe Marke zeigen, nicht
   zwei Auslegungen davon. */
.topbar .mark-logo path {
  stroke-dasharray: 1140;
  stroke-dashoffset: 1140;
  animation: mark-draw 1500ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes mark-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* „Bewegung reduzieren": das Zeichen steht sofort fertig da. */
@media (prefers-reduced-motion: reduce) {
  .topbar .mark-logo path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Wortmarke wie der Splash der App: Versalien, weiter Zeichenabstand. */
.brand-name {
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
}

.topnav {
  display: none;
  gap: 26px;
  font-size: var(--t-body);
}

.topnav a {
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.topnav a:hover {
  color: var(--fg);
}

@media (min-width: 940px) {
  .topnav {
    display: flex;
  }
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--track-caps);
}

.lang-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 2px 1px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--fg-faint);
  cursor: pointer;
}

.lang-btn[aria-pressed="true"] {
  color: var(--fg);
}

.lang-sep {
  color: var(--fg-faint);
}

.signin {
  font-size: var(--t-body);
  color: var(--fg-muted);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}

.signin:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
/* Ein Knopf-Typ, eine Höhe, `rounded-full` — wie in der Referenz. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--t-body);
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, filter 160ms ease, border-color 160ms ease,
    background 160ms ease;
}

/* Die einzige gefüllte Fläche in Akzentfarbe auf der ganzen Seite. */
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}

.btn-primary:hover {
  filter: brightness(1.07);
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--fg);
  background: rgba(255, 255, 255, 0.02);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible,
.brand:focus-visible,
.signin:focus-visible,
.lang-btn:focus-visible,
.topnav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

main,
.foot {
  position: relative;
  z-index: 1;
}

.hero {
  position: relative;
  /* Der Kristall ragt absichtlich über den rechten Rand hinaus — ohne diese
     Zeile verbreitert er das Dokument (gemessen: 1526 px bei 1440 px Fenster)
     und die Seite scrollt waagerecht. */
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 92vh;
  min-height: 92svh;
  padding: 132px 0 clamp(72px, 10vw, 132px);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* Ein weicher Schein dahinter — der trägt den Eindruck, nicht die Linien. */
@media (max-width: 900px) {
  }

/* Mono-Marke über der Überschrift — dieselbe Machart wie die Abschnittsmarken. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 26px;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.dot-live {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}

.hero-title {
  font-size: var(--t-hero);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 15ch;
  /* Der lebende Hintergrund schiebt helle Baender durch die Ueberschrift; an
     diesen Stellen faellt der Kontrast unter 3:1 (gemessen, Idee 7). Ein
     weiches dunkles Halo direkt an den Buchstaben repariert genau die Flaeche,
     auf die es ankommt — im Gegensatz zu einer Abdunklung des ganzen Heros,
     die den Hintergrund ueberall totschlagen wuerde. Zwei Radien: der weite
     traegt, der enge zieht die Kante nach. */
  text-shadow:
    0 0 9px rgba(13, 15, 17, 0.95),
    0 0 22px rgba(13, 15, 17, 0.9),
    0 0 44px rgba(13, 15, 17, 0.75);
}

.h-fixed {
  color: var(--fg-dim);
  display: block;
}

/* Der Platz für das längste Wort wird reserviert — sonst springt die Zeile bei
   jedem Wortwechsel. Der Geist ist unsichtbar, misst aber. */
.tw {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.tw-ghost {
  visibility: hidden;
}

.tw-live {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: var(--fg);
  /* Nur der Farbwechsel wird weich, nicht die Schrift selbst — das Wort
     schreibt sich Zeichen fuer Zeichen, der Ton faellt darueber. */
  transition: color 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Drei Vergleiche in Weiss, dann der Zustand in der Markenfarbe. „free." ist
   das Kernwort des Golden Circle — es ist die einzige Stelle, an der der
   Akzent im groessten Text der Seite steht. main.js setzt die Klasse; im HTML
   steht sie fest, damit sie auch ohne JS und bei `prefers-reduced-motion`
   greift (dort steht „free." ohnehin still da). */
.tw-live.is-core {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .tw-live {
    transition: none;
  }
}

.tw-caret {
  display: inline-block;
  width: 2px;
  height: 0.84em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: var(--accent);
  animation: caret-blink 1.05s steps(1, end) infinite;
}

@keyframes caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.lede {
  margin: 28px 0 0;
  max-width: 54ch;
  font-size: var(--t-lede);
  line-height: 1.65;
  color: var(--fg-muted);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* ── Abschnitte ──────────────────────────────────────────────────────────── */

.sec {
  padding: clamp(88px, 11vw, 160px) 0;
}

.sec + .sec {
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.head {
  max-width: var(--wrap-head);
}

.head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Mono-Marke mit Nummer: das sichtbare Rückgrat der Seite. */
.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: var(--t-mark);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.head-center .mark {
  justify-content: center;
}

.mark-no {
  color: var(--fg-faint);
}

.mark-rule {
  width: 32px;
  height: 1px;
  background: var(--line-strong);
  flex: none;
}

.sec-h {
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

.head-center .sec-h {
  margin-inline: auto;
  max-width: 20ch;
}

/* Der Akzent als Wort in der Ueberschrift — bei vertus der staerkste
   Markenmoment und dort ausschliesslich in der ZWEITEN Haelfte der Zeile
   (ANALYSIS_VERTUS §3). Bei uns kam Eisblau bisher nur als Flaeche vor:
   Knopf, Punkte, Marke. Farbe an einem Wort ist Bedeutung, Farbe auf einem
   Knopf ist Bedienung — wir hatten nur Bedienung.
   #7fcde6 auf #0d0f11 misst 10,77:1. */
.hi {
  font-style: normal;
  color: var(--accent);
}

.sec-p {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: var(--t-lede);
  line-height: 1.7;
  color: var(--fg-muted);
}

.sec-p-center {
  margin-inline: auto;
  text-align: center;
}

/* Zweispaltige Reihe: Text schmal, Fläche breit — und die Seiten wechseln. */
.grid {
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 900px) {
  .grid {
    max-width: var(--wrap-wide);
    grid-template-columns: 4fr 7fr;
    gap: 72px;
  }
}

/* ── Der Fensterrahmen ───────────────────────────────────────────────────── */
/* Das Muster, das die Referenz trägt: Rahmen, Titelleiste mit drei grauen
   Punkten und mono Pfad, darunter der Inhalt. Der Inhalt ist hier ausdrücklich
   eine gezeichnete Fläche — kein erfundener Screenshot. */

.win {
  position: relative;
  margin: 0;
}

/* Hover hebt das Fenster minimal an — am Wrapper, nicht am Rahmen: dessen
   transform gehört dem scrollgekoppelten Kipp-Effekt (main.js). */
@media (hover: hover) {
  .win {
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .win:hover {
    transform: translateY(-3px);
  }

  .win-glow {
    opacity: 0.8;
    transition: opacity 500ms ease;
  }

  .win:hover .win-glow {
    opacity: 1;
  }
}

/* ── Die Reihe der Produktbilder ─────────────────────────────────────────── */
/* GAP_TO_VERTUS §2: die Screens sassen als schmale Beilage neben dem Text
   (gemessen 738 px in der 7fr-Spalte, der Trading-Screen 1104 px). vertus gibt
   ihnen einen eigenen Abschnitt: eine waagerecht ziehbare Reihe, die letzte
   sichtbare Karte am Rand angeschnitten, kein Pfeil und kein „mehr →".
   Die Reihe tritt aus dem .wrap heraus bis an beide Fensterränder; der Einzug
   links haelt sie trotzdem auf der Textkante. */

.shots {
  margin-top: clamp(56px, 7vw, 88px);
}

.shots-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Links auf der Textkante von .wrap (dessen Inhalt beginnt bei
     (100% - --wrap)/2 + --pad-x), rechts genauso — sonst kann die letzte
     Karte nicht vollstaendig hereingezogen werden.
     `scroll-padding` MUSS dasselbe Mass tragen: ohne das zieht
     `scroll-snap-align: start` die erste Karte an den Fensterrand und der
     Einzug ist beim ersten Schnappen weg (gemessen: Karte bei x=0 statt 168). */
  --shots-inset: max(var(--pad-x), calc((100% - var(--wrap)) / 2 + var(--pad-x)));
  padding: 6px var(--shots-inset) 22px;
  scroll-padding-inline: var(--shots-inset);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.shots-row::-webkit-scrollbar {
  height: 6px;
}
.shots-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.shots-row::-webkit-scrollbar-track {
  background: transparent;
}

/* Ohne Fokusring waere die Reihe nur mit der Maus erreichbar. */
.shots-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: var(--radius);
}

.shot-card {
  flex: 0 0 auto;
  /* 1440 -> 662 px: eine ganze Karte plus eine deutlich angeschnittene.
     390 -> 328 px: die naechste lugt mit ~22 px herein. */
  width: clamp(288px, 46vw, 680px);
  scroll-snap-align: start;
}

.shots-cap {
  margin-top: 4px;
}

@media (hover: hover) {
  /* Das Anheben beim Ueberfahren gehoert hier nicht hin: in einer ziehbaren
     Reihe liest es als Verrutschen. */
  .shot-card:hover {
    transform: none;
  }
}

.win-glow {
  position: absolute;
  inset: -48px -40px -20px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.win-frame {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(22, 25, 29, 0.88);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(16, 19, 22, 0.94);
}

/* Grau, nicht bunt — die Referenz macht das absichtlich so. */
.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  flex: none;
}

.win-path {
  margin-left: 12px;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--track-mixed);
  color: var(--fg-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Aufnahme sitzt randlos unter der Fensterleiste — kein Innenabstand, sonst
   liest sie als Bild IN einem Fenster statt als das Fenster selbst. Breite und
   Höhe stehen am `<img>`, damit beim Nachladen nichts springt. */
picture {
  display: block;
}

.win-shot {
  display: block;
  width: 100%;
  height: auto;
  border-top: 1px solid var(--line);
}

.win-cap {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ── 01 · Der Pfad ───────────────────────────────────────────────────────── */

/* Zweigeteilt (Runde V1→V2): links der Pfad senkrecht wie ein Rack, rechts die
   Strike-Liste — beide Hälften gleich schwer, keine tote Fläche. Vorher lag
   alles in der oberen linken Ecke einer fast leeren, durchsichtigen Karte. */
.path {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(24px, 3vw, 40px);
}

@media (min-width: 720px) {
  .path {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .path-half + .path-half {
    border-left: 1px solid var(--line);
    padding-left: clamp(28px, 4vw, 56px);
  }

  .path-half:first-child {
    padding-right: clamp(28px, 4vw, 56px);
  }
}

.path-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg);
}

.path-line li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  padding: 12px 0;
}

/* Der Verbindungsstrich läuft senkrecht von Node zu Node. */
.path-line li + li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -11px;
  width: 1px;
  height: 22px;
  background: linear-gradient(
    to bottom,
    rgba(127, 205, 230, 0.5),
    rgba(127, 205, 230, 0.18)
  );
}

.node {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(127, 205, 230, 0.1);
  flex: none;
}

.path-not {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.strike {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  font-size: var(--t-body);
  color: var(--fg-faint);
}

/* Zeilen-Rhythmus wie die Pfad-Knoten links — die Hälften enden auf einer
   Höhe. */
.strike li {
  padding: 10px 0;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.22);
}

@media (min-width: 720px) {
  /* Die Spaltentrennlinie übernimmt; eine zweite Haarlinie daneben war Lärm. */
  .strike {
    border-left: 0;
    padding-left: 0;
  }
}

/* ── 00 · Die drei Tatsachen ─────────────────────────────────────────────── */

.facts {
  list-style: none;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding: 0;
  max-width: var(--wrap-head);
  display: flex;
  flex-direction: column;
}

.facts li {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.facts li:last-child {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 720px) {
  .facts li {
    grid-template-columns: 15rem 1fr;
    gap: 28px;
    align-items: baseline;
  }
}

.fact-k {
  font-size: var(--t-body);
  font-weight: 550;
  color: var(--fg);
}

.fact-v {
  font-size: var(--t-body);
  color: var(--fg-muted);
}

/* ── 04 · Wohin es geht ──────────────────────────────────────────────────── */

.sec-next {
  position: relative;
}

/* Ein weicher weißer Lichtkegel hinter dem Statement — Tiefe ohne Objekt,
   dieselbe Machart wie das Abschluss-Licht der Referenz (Runde V2→V3). */
.sec-next::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  background: radial-gradient(
    ellipse 55% 45% at 50% 42%,
    rgba(255, 255, 255, 0.05),
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
}

.sec-next .wrap {
  position: relative;
  max-width: 940px;
}

.statement {
  margin: clamp(36px, 4vw, 52px) 0 0;
  font-size: var(--t-h2);
  line-height: 1.24;
  letter-spacing: -0.026em;
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
  color: var(--fg);
}

.statement-tail {
  margin: 26px 0 0;
  text-align: center;
  font-size: var(--t-h2);
  line-height: 1.24;
  letter-spacing: -0.026em;
  font-weight: 500;
  color: var(--fg-dim);
}

.statement-tail em {
  font-style: normal;
  color: var(--accent);
}

.invite {
  margin-top: clamp(40px, 5vw, 60px);
  max-width: 56ch;
}

/* ── 05 · Kontakt ────────────────────────────────────────────────────────── */

.sec-cta {
  padding-bottom: clamp(96px, 12vw, 176px);
}

/* Runde 14: der Kasten war 1104 × 370 px bei ~180 px Inhalt — er las als leerer
   Raum. Schmaler und enger, dann liest er als Karte. */
.cta-box {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: radial-gradient(
      ellipse 80% 120% at 50% 0%,
      rgba(127, 205, 230, 0.055),
      transparent 68%
    ),
    var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  overflow: hidden;
}

.cta-box .mark {
  justify-content: center;
}

.cta-box .sec-h {
  margin-inline: auto;
}

.cta-box .sec-p {
  margin-inline: auto;
  text-align: center;
}

.cta-box .btn {
  margin-top: 34px;
}

/* ── Fuß ─────────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding: clamp(40px, 5vw, 56px) 0 0;
  background: rgba(255, 255, 255, 0.012);
}

.foot-grid {
  display: grid;
  gap: 36px;
}

@media (min-width: 720px) {
  .foot-grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
  }
}

.foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.foot-col a {
  font-size: var(--t-body);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.foot-col a:hover {
  color: var(--fg);
}

.foot-col a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.foot-head {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.foot-col-brand {
  gap: 14px;
}

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-muted);
}

.foot-brand .mark-logo {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.foot-brand .brand-name {
  font-size: var(--t-mark);
}

.foot-note {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-faint);
  max-width: 34ch;
}

.foot-lang {
  margin-top: 8px;
}

.foot-base {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.foot-base p {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--track-mixed);
  color: var(--fg-faint);
}

/* Der Vorbehalt steht rechts vom Zeichen, gleiche Stufe, keine eigene Farbe —
   er soll gelesen werden können, ohne den Fuss zu einem Beipackzettel zu
   machen. `--fg-faint` misst gegen den Grund 4,6:1 (Runde 13). */
.foot-fineprint {
  max-width: 64ch;
  letter-spacing: var(--track-mixed);
  text-align: right;
}

@media (max-width: 720px) {
  .foot-fineprint {
    text-align: left;
  }
}

/* ── Telefon ─────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root {
    --pad-x: 20px;
  }

  .hero {
    min-height: 88svh;
    padding-top: 116px;
  }

  .hero-title {
    max-width: none;
  }

  .signin {
    padding: 5px 10px;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .win-glow {
    inset: -24px -16px -12px;
  }

}

@media (max-width: 480px) {
  /* Die Pille muss einzeilig bleiben — zweizeilig wird sie bildschirmbreit und
     sieht nach Textblock aus statt nach Marke (Runde 12). */
  .eyebrow {
    font-size: 10px;
    letter-spacing: var(--track-caps);
    padding: 5px 12px 5px 10px;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  /* Die einzige Ausnahme, und sie ist eine Ansage statt eines Einzelfalls:
     unter 400 px passt die Augenbraue („EIN SERVER · EIN NUTZER · AUF
     EINLADUNG", 38 Zeichen) sonst nicht in die Zeile. Vorher stand dieselbe
     Korrektur zweimal einzeln bei .eyebrow und .brand-name — und griff im
     Deutschen trotzdem zu spaet: bei 320 px war die Augenbraue schon vor
     dieser Runde abgeschnitten (gemessen 330 px in 320 px Fenster). */
  :root {
    --track-caps: 0.1em;
  }

  .brand-name {
    font-size: 11px;
  }
  .topbar-right {
    gap: 8px;
  }
  /* Nur die Leiste — im Fuß bleibt der Umschalter, sonst hätte das Telefon
     gar keinen (Fund der V2-Aufnahme). */
  .topbar .lang {
    display: none;
  }
}

/* ── Bewegung aus ────────────────────────────────────────────────────────── */
/* `prefers-reduced-motion` schaltet alles ab: Hintergrund (bg-flow.js baut dann gar
   kein Canvas), Schreibmaschine, Kipp-Effekt, Einblenden, Kristall. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .topbar,
  .topbar-inner,
  .signin,
  .topnav a,
  .win,
  .win-glow,
  .foot-col a {
    transition: none;
  }

  .win:hover {
    transform: none;
  }
  .tw-caret {
    animation: none;
    opacity: 0;
  }
  }