/* ==========================================================================
   PrüfMich — Website
   Farben und Typo spiegeln die App: src/theme/colors.ts + typography.ts.
   Dunkle Welt (#0B0616), weiche Farbwolken, Karten aus dunklem Glas.
   Motive: Marker-Strich (aus den echten Notizen), Papier, Mikrofon-Ring.
   ========================================================================== */

:root {
  --bg: #0b0616;
  --bg-deep: #070310;
  --ink: #08050f;

  --violet: #7c3aed;
  --blue: #2563eb;
  --pink: #db2777;
  --amber: #ffc24b;
  --primary: #8b5cff;

  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.68);
  --text-3: rgba(255, 255, 255, 0.42);
  --success: #3ddc97;
  --cream: #f4efe6;

  --glass: rgba(13, 8, 26, 0.62);
  --glass-strong: rgba(13, 8, 26, 0.82);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.26);

  --display: 'Manrope', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 34px;
  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Bezugsrahmen für den Himmel: ohne das rechnen dessen Prozentwerte gegen den
     Viewport statt gegen die Dokumenthöhe. */
  position: relative;
}

/* Feines Korn über allem — nimmt dem Verlauf das Digitale. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  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.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; color: var(--text-2); }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; margin: 0; }
h1 { font-size: clamp(36px, 4.7vw, 64px); line-height: 1.06; }
h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; }
h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
em { font-style: normal; color: var(--cream); }
p { margin: 0; }

/* Schwungline: eine dünne, leicht krumme Linie unter der Kernaussage —
   wie mit dem Stift nachgezogen, nicht wie ein Textmarker-Balken.
   Wird beim Reveal von links nach rechts gezeichnet. */
.mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C48 3.2 104 2.4 152 4.6c46 2.1 92 4.4 146 1.2' fill='none' stroke='%23FFC24B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.32em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.04em;
  transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.reveal.is-in .mark,
.is-in .mark { background-size: 100% 0.32em; }
.mark--slim { background-size: 0% 0.26em; }
.reveal.is-in .mark--slim,
.is-in .mark--slim { background-size: 100% 0.26em; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
}

.lede { font-size: clamp(17px, 1.35vw, 21px); color: var(--text-2); max-width: 46ch; }

/* ─────────────────── Fortschrittsbalken ─────────────────── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; }
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--violet), var(--pink) 60%, var(--amber));
  box-shadow: 0 0 12px rgba(139, 92, 255, 0.8);
}

/* ─────────────────── Farbwolken + Spotlight ───────────────────
   Der Himmel ist eine eigene Ebene, die langsamer läuft als der Inhalt: nicht
   `fixed` (dann klebt er am Bildschirm und nichts kann davor schweben), sondern
   absolut über das Dokument gespannt und in main.js gegengerechnet.

   Höhe = 34 % der Dokumenthöhe + 66 % eines Bildschirms. Der zweite Anteil
   entspricht exakt dem Gegenschub aus main.js. So endet die transformierte
   Ebene am Dokumentende und kann die Scrollhöhe nicht selbst verlängern. */
.blooms {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(34% + 66vh);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.bloom {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
/* Verteilt über die ganze Seite statt über einen Bildschirm — der Himmel zieht
   jetzt vorbei, also braucht er auch unten noch Lichtquellen. */
.bloom--violet { width: 60vw; height: 60vw; top: -8%;  left: -10vw; background: radial-gradient(circle, var(--violet) 0%, transparent 68%); animation: drift 34s ease-in-out infinite; }
.bloom--blue   { width: 52vw; height: 52vw; top: 12%;  right: -14vw; background: radial-gradient(circle, var(--blue) 0%, transparent 66%); opacity: 0.42; animation: drift 44s ease-in-out infinite reverse; }
.bloom--amber  { width: 26vw; height: 26vw; top: 26%;  right: 16%; background: radial-gradient(circle, var(--amber) 0%, transparent 62%); opacity: 0.22; animation: drift 30s ease-in-out infinite reverse; }
.bloom--pink   { width: 46vw; height: 46vw; top: 40%;  left: -8vw; background: radial-gradient(circle, var(--pink) 0%, transparent 66%); opacity: 0.4; animation: drift 38s ease-in-out infinite; }
.bloom--deep   { width: 58vw; height: 58vw; top: 58%;  right: -16vw; background: radial-gradient(circle, var(--violet) 0%, transparent 68%); opacity: 0.46; animation: drift 40s ease-in-out infinite; }
.bloom--dawn   { width: 54vw; height: 54vw; top: 78%;  left: -14vw; background: radial-gradient(circle, var(--blue) 0%, transparent 66%); opacity: 0.4; animation: drift 36s ease-in-out infinite reverse; }

/* Der Zeigerschein bleibt am Bildschirm — er gehört zur Maus, nicht zur Seite. */
.pointer-light { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.spotlight {
  position: absolute;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 255, 0.22), transparent 62%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.6s ease;
  translate: -50% -50%;
}
.spotlight.is-on { opacity: 1; }

@keyframes drift {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 6vw -4vh; scale: 1.12; }
}

.nav, main, .footer, .dock { position: relative; z-index: 2; }

/* ─────────────────── Tiefenebenen ───────────────────
   Drei Entfernungen, und zwar hörbar verschieden: Himmel 34 %, ferne
   Requisiten ~72 %, nahe ~92 %, Inhalt 100 % der Scrollgeschwindigkeit.
   Die Geschwindigkeit steht als `data-parallax` im HTML, hier kommt nur dazu,
   was Entfernung sonst noch macht — Schärfe und Kontrast nehmen ab.
   `--plane-blur` statt festem Wert im `filter`, damit der Reveal
   (`.reveal--prop`) am Ende nicht auf 0 scharfstellt und die Ebene einebnet. */
.plane-far { --plane-blur: 1.3px; opacity: 0.78; }
.plane-mid { --plane-blur: 0.35px; opacity: 0.93; }

/* ─────────────────── Navigation ─────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--pad);
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(8, 4, 18, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.nav__links { margin-left: auto; display: flex; gap: 26px; font-size: 15px; color: var(--text-2); }
.nav__links a { position: relative; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--amber);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.3s ease;
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { scale: 1 1; }

/* ─────────────────── Buttons ─────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  border: 1px solid transparent;
  box-shadow: 0 12px 34px rgba(139, 92, 255, 0.36);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(139, 92, 255, 0.46); background: #7343e8; }
.btn:active { transform: translateY(0); }
.btn--ghost { background: rgba(255, 255, 255, 0.06); border-color: var(--line-strong); box-shadow: none; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.btn--small { padding: 10px 18px; font-size: 15px; box-shadow: none; }
.btn--lg { padding: 19px 40px; font-size: 18px; }
.btn--block { width: 100%; }

/* ─────────────────── Requisiten: Licht statt Aufkleber ───────────────────
   Jedes freigestellte Objekt bekommt zwei Schichten:
   1. eine Lichtpfütze dahinter (::before) — bindet es an den Hintergrund,
   2. einen Saum in seiner eigenen Farbe (drop-shadow ohne Versatz) — hebt es ab.
   Die Pfütze bleibt unten und wird kleiner, während das Objekt steigt: daraus
   liest das Auge Höhe. Alles über CSS-Variablen, pro Objekt einstellbar:
   --glow (Farbe), --pool (Deckkraft der Pfütze), --rim (Radius des Saums),
   --bob (Takt, muss zur Schwebe-Animation des Bildes passen).

   Steht bewusst VOR den Abschnitten: die Requisiten-Regeln dort (Position,
   Größe, Drehung) müssen diese Grundlage schlagen können, nicht umgekehrt. */
.prop {
  position: relative;
  display: block;
  --glow: var(--primary);
  --pool: 0.45;
  --rim: 22px;
  --rim-a: 55%;
  --bob: 8s;
}
.prop::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 62%;
  width: 116%;
  aspect-ratio: 1.4;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 74%);
  opacity: var(--pool);
  filter: blur(26px);
  pointer-events: none;
  animation: pool var(--bob) ease-in-out infinite;
}
.prop > img {
  position: relative;
  width: 100%;
  filter:
    drop-shadow(0 0 var(--rim) color-mix(in srgb, var(--glow) var(--rim-a), transparent))
    drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55));
}
@keyframes pool {
  0%, 100% { scale: 1; }
  50% { scale: 0.88; }
}

/* ─────────────────── Hero ─────────────────── */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(30px, 6vh, 80px) var(--pad) clamp(50px, 10vh, 120px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
}
.hero__copy h1 { margin-bottom: 22px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 0; }

.hero__stage { position: relative; display: flex; justify-content: center; min-height: 540px; }
.hero__stage .phone { position: relative; z-index: 2; }
.hero__paper {
  position: absolute;
  z-index: 1;
  /* Unschärfe zuerst, damit der Schatten scharf bleibt und das Blatt nicht
     doppelt weichgezeichnet wirkt. */
  filter: blur(var(--plane-blur, 0px)) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
  will-change: transform;
}
.hero__paper--1 { width: 33%; top: 2%; left: -24%; rotate: -9deg; opacity: 0.8; }
.hero__paper--2 { width: 23%; bottom: 4%; left: -20%; rotate: 7deg; opacity: 0.36; }
.hero__miko {
  position: absolute;
  z-index: 3;
  width: 42%;
  right: -10%;
  bottom: 0;
  will-change: transform;
  --glow: var(--primary);
  --pool: 0.55;
  --rim: 30px;
  --bob: 7s;
}
.float { animation: bob var(--bob, 7s) ease-in-out infinite; }
@keyframes bob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -14px; rotate: -1.6deg; }
}

/* Sprechblasen im Hero */
.bubble {
  position: absolute;
  z-index: 4;
  max-width: 230px;
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
.bubble__who { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.bubble--q { top: 14%; right: -7%; border-color: rgba(139, 92, 255, 0.5); }
.bubble--q .bubble__who { color: var(--primary); }
.bubble--a { bottom: 10%; left: -16%; max-width: 250px; border-color: rgba(61, 220, 151, 0.4); color: var(--text-2); }
.bubble--a .bubble__who { color: var(--success); }

/* ─────────────────── Gerät ───────────────────
   Schmaler dunkler Rahmen, kein gemalter Notch: die Screenshots bringen die
   Dynamic Island selbst mit — zwei übereinander sahen billig aus. */
.phone {
  position: relative;
  width: min(280px, 100%);
  aspect-ratio: 1206 / 2622;
  padding: 6px;
  /* Prozentwerte skalieren beide Radien mit dem Gerät. Ein fester 42px-Radius
     wurde auf dem schmalen Mobile-Mockup zu groß und schnitt den Screenshot ab. */
  border-radius: 12.5% / 5.8%;
  background: #0e0a18;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.4);
  will-change: transform;
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 11.2% / 5.2%;
  overflow: hidden;
  background: var(--bg-deep);
  display: grid;
  place-items: center;
}
.phone__screen .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot-hint {
  display: none;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-3);
  padding: 0 18px;
}
.shot-hint b { display: block; color: var(--text-2); font-weight: 600; margin-top: 4px; }
.phone__screen.is-empty { border: 1px dashed rgba(255, 255, 255, 0.2); }
.phone__screen.is-empty .shot { display: none; }
.phone__screen.is-empty .shot-hint { display: block; }

/* ─────────────────── Fragenband ─────────────────── */
.asks { position: relative; padding: clamp(50px, 10vh, 110px) 0 clamp(30px, 6vh, 60px); }
.asks__head { max-width: var(--maxw); margin: 0 auto 40px; padding: 0 var(--pad); }
.asks__rails { display: grid; gap: 14px; }
.asks__rail {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.asks__track { display: flex; gap: 14px; width: max-content; animation: slide 58s linear infinite; }
.asks__track--rev { animation-direction: reverse; animation-duration: 72s; }
.asks__rail:hover .asks__track { animation-play-state: paused; }
.ask {
  flex: none;
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(12px);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.asks__rail--back .ask { color: var(--text-3); font-weight: 500; border-style: dashed; background: transparent; backdrop-filter: none; }

/* ─────────────────── Wahrheit ─────────────────── */
.truth {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(50px, 10vh, 130px) var(--pad);
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.truth__text h2 { margin-bottom: 20px; }
.truth__text > p { color: var(--text-2); max-width: 48ch; }
.truth__list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; }
.truth__list li {
  padding: 16px 20px;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  font-size: 15.5px;
  color: var(--text-2);
  transition: border-color 0.3s, translate 0.3s;
}
.truth__list li:hover { border-color: var(--line-strong); translate: 6px 0; }
.truth__list b { color: var(--text); font-weight: 600; }
.truth__photo { position: relative; margin: 0; will-change: transform; }
.truth__photo img {
  border-radius: var(--r-md);
  rotate: 2.5deg;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--line);
}
.truth__photo figcaption { margin-top: 26px; font-size: 14px; color: var(--text-3); text-align: center; }

/* ─────────────────── Kleine Clay-Objekte ───────────────────
   Verstreute Requisiten, keine Panels. Jedes Bild entfernt sich selbst,
   wenn die Datei fehlt (onerror im HTML) — die Seite bleibt dabei heil. */
.deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  --pool: 0.34;
  --rim: 16px;
  --bob: 9s;
}
.deco > img { animation: bob var(--bob) ease-in-out infinite; }
/* Jede Requisite leuchtet in ihrer eigenen Farbe — sonst wird der Saum Deko um der Deko willen. */
.deco--ask    { width: clamp(96px, 10vw, 170px);  top: 2%;   right: 7%;  --glow: var(--violet); }
.deco--marker { width: clamp(120px, 13vw, 210px); top: 4%;   right: 42%; rotate: -12deg; --glow: var(--amber); --pool: 0.28; }
.deco--dome   { width: clamp(110px, 12vw, 190px); top: -26%; right: -5%; --glow: var(--primary); }
.deco--coin   { width: clamp(52px, 5vw, 76px);    top: -26px; left: -22px; rotate: -14deg; --glow: var(--amber); --pool: 0.4; --bob: 7s; }
.deco--faq    { width: clamp(96px, 10vw, 160px);  top: -2%;  right: 1%;  --glow: var(--primary); --bob: 10s; }
.deco--stack  { width: clamp(110px, 11vw, 185px); top: 5%;   right: 8%;  rotate: 8deg; --glow: var(--blue); }
.deco--clock  { width: clamp(88px, 9vw, 145px);   top: 2%;   right: 12%; --glow: var(--violet); --bob: 11s; }

/* ─────────────────── Ablauf ─────────────────── */
.how { max-width: var(--maxw); margin: 0 auto; padding: clamp(50px, 10vh, 130px) var(--pad); }
.how__intro { margin-bottom: clamp(40px, 6vh, 70px); }

/* Das Telefon bleibt stehen, die Schritte laufen daran vorbei und tauschen den
   Screenshot. Der einzige Moment auf der Seite, an dem Scrollen etwas tut statt
   nur zu transportieren — deshalb bekommt jeder Schritt auch echte Scrollhöhe. */
.how__stage {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.how__phone {
  position: sticky;
  top: 16vh;
  display: grid;
  justify-items: center;
  gap: 22px;
}
.how__phone .phone { width: min(286px, 100%); }
.how__phone .phone__screen .shot {
  opacity: 0;
  scale: 1.04;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), scale 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.how__phone .phone__screen .shot.is-on { opacity: 1; scale: 1; }

/* Vier Striche unter dem Gerät: zeigen, wo man im Ablauf steht. */
.how__ticks { display: flex; gap: 8px; }
.how__ticks span {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.4s ease, width 0.4s ease;
}
.how__ticks span.is-on { width: 40px; background: var(--amber); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 28px); }
/* Scrollhöhe pro Schritt: darunter wechselt der Screenshot zu hektisch. */
.steps .step { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; }
/* Der aktive Schritt tritt hervor, die anderen treten zurück — sonst weiß man
   nicht, welcher Text zu welchem Bild gehört. */
.steps .step { opacity: 0.4; transition: opacity 0.45s ease, border-color 0.35s ease, translate 0.35s ease; }
.steps .step.is-current { opacity: 1; border-color: var(--accent-line); }

.step {
  position: relative;
  padding: clamp(46px, 4vw, 62px) clamp(26px, 2.8vw, 40px) clamp(28px, 3vw, 40px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 8% 0%, var(--accent-soft), transparent 58%),
    var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color 0.35s ease, translate 0.35s ease;
}
.step:hover { border-color: var(--accent-line); translate: 0 -4px; }
/* Jeder Schritt hat seine eigene Farbe — dieselben vier wie die Farbwolken der App. */
.step:nth-child(1) { --accent: var(--amber);   --accent-soft: rgba(255, 194, 75, 0.16); --accent-line: rgba(255, 194, 75, 0.45); }
.step:nth-child(2) { --accent: var(--primary); --accent-soft: rgba(139, 92, 255, 0.20); --accent-line: rgba(139, 92, 255, 0.5); }
.step:nth-child(3) { --accent: var(--pink);    --accent-soft: rgba(219, 39, 119, 0.18); --accent-line: rgba(219, 39, 119, 0.45); }
.step:nth-child(4) { --accent: var(--success); --accent-soft: rgba(61, 220, 151, 0.16); --accent-line: rgba(61, 220, 151, 0.45); }

/* Große Ziffer als Wasserzeichen. Muss `.step p` schlagen — die Ziffer ist selbst ein <p>. */
.step .step__num {
  position: absolute;
  top: clamp(18px, 1.5vw, 26px);
  right: clamp(20px, 2vw, 34px);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(64px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  opacity: 0.28;
  pointer-events: none;
}
/* Die Pfütze übernimmt hier die Akzentfarbe der Karte und steht still —
   auf einer Karte wirkt Schweben unruhig, das Licht reicht. */
.step .step__icon {
  width: clamp(100px, 9vw, 120px);
  height: clamp(100px, 9vw, 120px);
  margin: 0 0 14px;
  --glow: var(--accent);
  --pool: 0.38;
  --rim: 14px;
  /* Auf Karten reicht wenig Saum — Pink und Grün färben Miko sonst ein. */
  --rim-a: 32%;
}
.step .step__icon::before { animation: none; }
.step .step__icon > img {
  height: 100%;
  object-fit: contain;
  transition: scale 0.35s ease, rotate 0.35s ease;
}
.step:hover .step__icon > img { scale: 1.06; rotate: -3deg; }
.step h3 { margin-bottom: 10px; }
.step > p { color: var(--text-2); font-size: 16px; max-width: 40ch; }

/* ─────────────────── Stimme ─────────────────── */
.voice {
  margin: clamp(50px, 10vh, 130px) 0 0;
  padding: clamp(60px, 12vh, 140px) var(--pad);
  background: linear-gradient(180deg, transparent, var(--ink) 14%, var(--ink) 86%, transparent);
}
.voice__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

/* Der „Prüfungsraum" als Karte: still, dunkel, nur der Pegel lebt. */
.voice__demo {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px rgba(0, 0, 0, 0.5);
}
.wave { display: flex; align-items: flex-end; gap: 4px; height: 84px; margin-bottom: 26px; }
.wave span {
  flex: 1;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--primary), rgba(139, 92, 255, 0.25));
  height: 18%;
  animation: talk 1.6s ease-in-out infinite;
}
.wave span:nth-child(3n)   { animation-duration: 1.9s; }
.wave span:nth-child(4n)   { animation-duration: 1.3s; background: linear-gradient(180deg, var(--pink), rgba(219, 39, 119, 0.2)); }
.wave span:nth-child(5n)   { animation-duration: 2.2s; }
.wave span:nth-child(7n)   { animation-delay: -0.7s; }
.wave span:nth-child(11n)  { background: linear-gradient(180deg, var(--amber), rgba(255, 194, 75, 0.2)); }
.wave span:nth-child(2n)   { animation-delay: -0.4s; }
.wave span:nth-child(3n+1) { animation-delay: -1.1s; }
@keyframes talk {
  0%, 100% { height: 14%; }
  35% { height: 72%; }
  60% { height: 34%; }
  80% { height: 92%; }
}
.voice__label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.voice__transcript {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  min-height: 3.2em;
}
.caret { display: inline-block; width: 2px; height: 1.05em; translate: 0 2px; background: var(--amber); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.voice__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 18px; }
.chip { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; border: 1px solid; }
.chip--ok { color: var(--success); border-color: rgba(61, 220, 151, 0.4); background: rgba(61, 220, 151, 0.1); }
.chip--gap { color: var(--amber); border-color: rgba(255, 194, 75, 0.4); background: rgba(255, 194, 75, 0.1); }
.voice__foot { font-size: 13.5px; color: var(--text-3); }

.voice__copy { position: relative; }
.voice__copy h2 { margin-bottom: 20px; }
.voice__copy > p { color: var(--text-2); max-width: 52ch; }
.voice__list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.voice__list li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--text-2); }
.voice__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  rotate: -45deg;
}

/* ─────────────────── Fächer ─────────────────── */
.subjects { position: relative; padding: clamp(60px, 12vh, 140px) 0; }
.subjects__head { max-width: var(--maxw); margin: 0 auto 44px; padding: 0 var(--pad); }
.subjects__head p { color: var(--text-2); margin-top: 14px; }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 18px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { translate: -50% 0; } }
.tile { position: relative; margin: 0; width: clamp(180px, 20vw, 260px); aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04);
  transition: scale 0.6s ease, filter 0.6s ease;
}
.tile:hover img { scale: 1.06; }
.tile:hover img { filter: saturate(0.96) contrast(1.08); }
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(139, 92, 255, 0.06), transparent 48%),
    linear-gradient(180deg, transparent 52%, rgba(7, 3, 16, 0.38));
}
.tile figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  padding: 40px 18px 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  background: linear-gradient(180deg, transparent, rgba(7, 3, 16, 0.92));
}

/* ─────────────────── Nacht ─────────────────── */
.night {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 8vh, 90px) var(--pad);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
}
.night__miko {
  width: min(400px, 92%);
  margin: 0 auto;
  will-change: transform;
  --glow: var(--blue);
  --pool: 0.5;
  --rim: 34px;
  --bob: 9s;
}
.night__copy h2 { margin-bottom: 18px; }
.night__copy p { color: var(--text-2); max-width: 44ch; margin-bottom: 26px; }

/* ─────────────────── Galerie ─────────────────── */
.gallery { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 8vh, 90px) var(--pad); }
.gallery__head { margin-bottom: clamp(30px, 5vh, 54px); max-width: 60ch; }
.gallery__rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
/* Die Karte füllt die Spalte, das Gerät sitzt mittig darin — sonst bestimmt die
   Länge der Bildunterschrift die Gerätebreite und alle drei werden ungleich. */
.shot-card { width: 100%; margin: 0; display: grid; justify-items: center; gap: 20px; }
.shot-card .phone { width: min(272px, 100%); transition: translate 0.4s ease; }
.shot-card:hover .phone { translate: 0 -6px; }
.shot-card figcaption { font-size: 14.5px; color: var(--text-3); text-align: center; max-width: 26ch; }

/* ─────────────────── Preise ─────────────────── */
.pricing { max-width: var(--maxw); margin: 0 auto; padding: clamp(50px, 10vh, 130px) var(--pad); }
.pricing__head { margin-bottom: 50px; }
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.plan {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.plan--pro {
  background: linear-gradient(165deg, rgba(139, 92, 255, 0.22), var(--glass-strong) 55%);
  border-color: rgba(139, 92, 255, 0.42);
  box-shadow: 0 40px 90px rgba(124, 58, 237, 0.24);
}
.plan__badge {
  position: absolute;
  top: 22px; right: 22px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 194, 75, 0.16);
  border: 1px solid rgba(255, 194, 75, 0.4);
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.plan__price { font-family: var(--display); font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; margin-top: 16px; }
.plan__price span { font-family: var(--body); font-size: 17px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.plan__sub { color: var(--text-3); font-size: 14.5px; margin-top: 6px; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 30px; display: grid; gap: 13px; }
.plan li { position: relative; padding-left: 30px; color: var(--text-2); font-size: 15.5px; }
.plan li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  rotate: -45deg;
}
.plan__fine { margin-top: 16px; font-size: 13px; color: var(--text-3); text-align: center; }

/* ─────────────────── FAQ ─────────────────── */
.faq { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(40px, 8vh, 90px) var(--pad); }
.faq h2 { margin-bottom: 36px; }
.faq__list { display: grid; gap: 12px; }
.faq details {
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(14px);
  padding: 18px 22px;
}
.faq details[open] { border-color: var(--line-strong); }
.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--amber); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin-top: 14px; color: var(--text-2); font-size: 16px; }

/* ─────────────────── CTA + Footer ─────────────────── */
.cta {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(60px, 12vh, 140px) var(--pad);
  text-align: center;
}
.cta h2 { margin-bottom: 18px; }
.cta > p { color: var(--text-2); margin-bottom: 34px; }
.cta__miko {
  position: absolute;
  width: clamp(150px, 17vw, 250px);
  right: 4%;
  top: 0;
  will-change: transform;
  --glow: var(--violet);
  --pool: 0.46;
  --rim: 26px;
  --bob: 8s;
}
.cta__fine { margin-top: 20px; font-size: 13.5px; color: var(--text-3); }

.footer {
  border-top: 1px solid var(--line);
  padding: 34px var(--pad);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 14.5px;
  color: var(--text-3);
  background: rgba(7, 3, 16, 0.6);
}
.footer__brand { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-family: var(--display); font-weight: 700; }
.footer__links { margin-left: auto; display: flex; gap: 24px; }
.footer__links a:hover { color: var(--text); }

/* ─────────────────── Rechtliches ───────────────────
   Impressum und Datenschutz teilen sich diese Seite: gleiche Welt wie die
   Startseite, nur ruhiger — keine Requisiten, keine Laufbänder, nichts, was
   vom Lesen ablenkt. */
.legal {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(30px, 6vh, 70px) var(--pad) clamp(60px, 10vh, 120px);
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  font-size: 14px;
  color: var(--text-3);
  transition: color 0.2s ease;
}
.legal__back:hover { color: var(--text); }
/* „Datenschutzerklärung" ist ein 20-Zeichen-Wort: kleiner ansetzen als auf der
   Startseite und trennen lassen, sonst steht es auf dem Handy über dem Rand. */
.legal h1 {
  font-size: clamp(29px, 5vw, 52px);
  hyphens: auto;
  overflow-wrap: break-word;
  margin-bottom: 14px;
}
.legal__stand { font-size: 14px; color: var(--text-3); margin-bottom: 40px; }
.legal h2 {
  font-size: clamp(21px, 2.2vw, 27px);
  margin: 44px 0 16px;
}
.legal h3 {
  font-size: 17.5px;
  font-weight: 700;
  margin: 26px 0 10px;
  color: var(--text-2);
}
.legal p { color: var(--text-2); margin-bottom: 14px; }
.legal a:not(.btn):not(.legal__back):not(.nav__brand) {
  color: var(--text);
  border-bottom: 1px solid rgba(255, 194, 75, 0.5);
}
.legal a:not(.btn):not(.legal__back):not(.nav__brand):hover { border-bottom-color: var(--amber); }
.legal ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 12px; }
.legal ul li { position: relative; padding-left: 22px; color: var(--text-2); }
.legal ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.legal ul li b { color: var(--text); font-weight: 600; }

/* Anschrift und Kontakt: das Einzige, was auf diesen Seiten hervorsticht. */
.legal__card {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.legal__card p:last-child { margin-bottom: 0; }
.legal__label {
  display: block;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.legal__label:first-child { margin-top: 0; }
.legal__label + p { margin-top: 6px; color: var(--text); }

/* Hinweiskasten für die eine Sache, die man wirklich gelesen haben soll. */
.legal__note {
  margin: 24px 0;
  padding: 20px 24px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 194, 75, 0.34);
  background: rgba(255, 194, 75, 0.08);
}
.legal__note p { color: var(--text); }
.legal__note p:last-child { margin-bottom: 0; }

/* Mobile Leiste unten — nur auf kleinen Schirmen und erst nach dem Hero */
.dock {
  position: fixed;
  z-index: 55;
  left: 12px; right: 12px; bottom: 12px;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: rgba(11, 6, 22, 0.86);
  border: 1px solid rgba(139, 92, 255, 0.45);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  font-weight: 600;
  translate: 0 140%;
  transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.dock img { width: 34px; }
.dock.is-on { translate: 0 0; }

/* ─────────────────── Reveal ───────────────────
   Zwei Arten: Text rutscht herein, Bilder kommen in den Fokus.
   Der Unterschied ist Absicht — bei einem Objekt liest sich Schärfe als
   „ist jetzt da", bei einem Absatz nur als Unschärfe. */
.reveal { opacity: 0; translate: 0 26px; transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), translate 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-in { opacity: 1; translate: 0 0; }

.reveal--prop {
  translate: 0 0;
  scale: 0.94;
  filter: blur(12px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal--prop.is-in { scale: 1; filter: blur(var(--plane-blur, 0px)); }
/* Requisiten ohne Reveal brauchen die Ebenenunschärfe direkt. Nur `.prop`, damit
   die Regel den Papieren nicht ihren Schlagschatten wegnimmt. */
.prop.plane-far:not(.reveal--prop) { filter: blur(var(--plane-blur)); }

/* ─────────────────── Responsiv ─────────────────── */
@media (max-width: 1000px) {
  .deco--marker { top: -3%; right: 3%; }
  .hero { grid-template-columns: 1fr; }
  .hero__stage { min-height: 0; padding: 30px 0 10px; }
  .hero__stage .phone { width: 208px; }
  .hero__paper--1 { width: 30%; top: 6%; left: 0; }
  .hero__paper--2 { display: none; }
  .hero__miko { width: 34%; right: -2%; bottom: 2%; }
  .bubble { max-width: 42%; font-size: 13.5px; padding: 11px 14px; }
  .bubble--q { top: 2%; right: 0; }
  .bubble--a { bottom: 2%; left: 0; }
  .truth, .voice__inner, .night { grid-template-columns: 1fr; }
  /* Ein klebendes Telefon frisst auf dem Handy den halben Lesebereich, ein
     stehendes zeigt einen Screenshot, der nicht zum Text daneben gehört.
     Also fällt der Ablauf hier auf vier normale Karten zurück — die tragen
     ihr Objekt ohnehin selbst. */
  .how__stage { grid-template-columns: 1fr; }
  .how__phone { display: none; }
  .steps .step { min-height: 0; opacity: 1; }
  .truth__photo { max-width: 460px; }
  .night__miko { width: min(220px, 60%); }
  .gallery__rail { grid-template-columns: 1fr; gap: 34px; }
  .plans { grid-template-columns: 1fr; }
  .dock { display: flex; }
  .footer { padding-bottom: 90px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .deco--marker, .deco--stack, .deco--clock { display: none; }
  .deco--ask, .deco--dome, .deco--faq { width: 84px; }
  .nav__links { display: none; }
  .step .step__icon { width: 72px; height: 72px; margin-bottom: 12px; }
  .ask { padding: 13px 18px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__links { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; translate: 0 0; }
  /* Ohne Parallax bliebe von der hohen Wolkenebene nur der oberste Streifen
     sichtbar — dann steht die halbe Seite im Dunkeln. Also zurück auf eine
     Ebene, die am Bildschirm klebt, so wie ohne Tiefenstaffelung. */
  .blooms { position: fixed; height: 100vh; transform: none !important; }
  /* Licht und Saum bleiben — die sind statisch. Nur das Atmen fällt weg. */
  .reveal--prop { opacity: 1; scale: 1; filter: none; }
  .prop::before { animation: none; }
  .mark::before { scale: 1 1; }
}