/* ============================================================================
   fang.fish — Startseite, Bild- und Bewegungsebene
   Ergaenzt fang.css, ersetzt es nicht. Wird ausschliesslich von / geladen,
   die Unterseiten bleiben damit unberuehrt.

   Reihenfolge im <head>: fang.css zuerst, diese Datei danach.
   ========================================================================= */

/* --- Schriften noch einmal, relativ adressiert ---------------------------
   fang.css laedt die Ubuntu ueber `/fonts/…`, also ab Domainwurzel. Liegt die
   Seite in einem Unterordner — auf einem Testserver etwa —, laeuft jeder
   dieser Pfade ins Leere und die Seite faellt auf die Systemschrift zurueck.
   Dieselben Schnitte hier noch einmal, relativ zu dieser Datei: `../fonts/`
   trifft sowohl in der Wurzel als auch im Unterordner. Spaeter deklariert,
   also gewinnt diese Fassung — wo die absolute laedt, ist sie identisch.    */
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 300; font-display: swap;
             src: url(../fonts/ubuntu-300-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: italic; font-weight: 300; font-display: swap;
             src: url(../fonts/ubuntu-300italic-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: swap;
             src: url(../fonts/ubuntu-400-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: italic; font-weight: 400; font-display: swap;
             src: url(../fonts/ubuntu-400italic-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: swap;
             src: url(../fonts/ubuntu-500-latin.woff2) format("woff2"); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap;
             src: url(../fonts/ubuntu-700-latin.woff2) format("woff2"); }

:root {
  --amber:  #E9A23B;            /* mittlerer Score, wie in der App */
  --shadow: 0 30px 60px -20px rgba(0,0,0,.65);
  --phone-r: 2.2rem;            /* Eckenradius der Geraeterahmen */
}

/* Die Startseite traegt ganzflaechige Bilder — der Hintergrund darunter ist
   dieselbe Tiefe wie der Seitenfuss, sonst blitzt beim Laden Weiss durch. */
body { background: var(--dark); }

/* Abschnitte, die bis an den Rand gehen, duerfen das Innenpolster der
   .section nicht erben. */
.bleed { padding-inline: 0; }

/* ============================== HERO ===================================== */
.hx {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hx__media { position: absolute; inset: -8% 0 0; z-index: 0; will-change: transform; }
.hx__media img { width: 100%; height: 116%; object-fit: cover; object-position: 60% 42%; }

/* Zwei Schleier: einer von unten fuer den Uebergang in die Seite, einer von
   links, damit die Schrift auf dem hellen Wasser ueberhaupt traegt. */
.hx__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,    var(--dark) 2%, rgba(1,20,34,.55) 32%, rgba(1,20,34,0) 62%),
    linear-gradient(to right,  rgba(1,20,34,.92) 0%, rgba(1,20,34,.62) 38%, rgba(1,20,34,.08) 72%),
    linear-gradient(to bottom, rgba(1,20,34,.75) 0%, rgba(1,20,34,0) 28%);
}

.hx__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 9rem 1.5rem 7rem;
  display: grid; gap: 3rem; align-items: center;
}
.hx__copy { max-width: 36rem; }
.hx__copy .pill { margin-bottom: 1.75rem; }
.hx h1 {
  font-size: clamp(2.75rem, 9vw, 4rem);
  line-height: .98; letter-spacing: -.02em; margin-bottom: 1.5rem;
  text-shadow: 0 2px 30px rgba(1,20,34,.5);
}
.hx__sub {
  color: #BFD6E0; font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
  font-weight: 300; line-height: 1.6; margin-bottom: 2.25rem; max-width: 30rem;
}
.hx__sub strong { color: #fff; font-weight: 500; }
.hx .stores { justify-content: flex-start; }
.hx__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-top: 1.5rem; color: var(--muted); font-size: .8125rem;
}
.hx__meta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.25); }

/* --- Das Geraet im Hero ------------------------------------------------- */
/* Eigene Breite statt Schrumpfen auf den Inhalt: sonst ist das Bild bis zum Laden
   0 breit und 0 hoch, und der zentrierte Hero springt danach (Desktop-CLS 0,23). */
.hx__phone { display: none; justify-self: end; width: min(100%, 310px); }

/* Rahmen fuer jeden Screenshot auf der Seite. Kein Bild, nur Rand und
   Schatten — damit bleibt der Screenshot austauschbar. */
.phone {
  position: relative; width: 100%; max-width: 310px;
  border-radius: var(--phone-r);
  border: 1px solid rgba(255,255,255,.14);
  background: #0B1B26;
  padding: 6px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,.4);
}
.phone img { width: 100%; height: auto; border-radius: calc(var(--phone-r) - 7px); display: block; }
/* Lichtkante oben links, damit das Geraet nicht wie ein flacher Kasten wirkt */
.phone::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--phone-r);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%);
  pointer-events: none;
}

/* --- Hinweis zum Weiterscrollen ----------------------------------------- */
.hx__cue {
  position: absolute; z-index: 3; left: 50%; bottom: 1.75rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em;
}
.hx__cue span { display: block; width: 1px; height: 2.25rem;
  background: linear-gradient(to bottom, rgba(93,184,122,.9), transparent);
  animation: cue 2.2s infinite; }
@keyframes cue { 0% { opacity: 0; transform: scaleY(.3); transform-origin: top; }
                 40% { opacity: 1; transform: scaleY(1); transform-origin: top; }
                 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } }

/* ==================== TIEFENKARTE: der Wisch ============================= */
/* Ruhezustand (ohne Skript oder mit reduzierter Bewegung, also ohne `.jsh`): die
   ausgewertete Karte steht fertig da, Satz und Erklaerung sind sichtbar. Erst `.jsh`
   macht daraus den Wisch ueber drei Bildschirmhoehen. */
.tz__track { position: relative; }
.tz__stage { position: relative; height: 72vh; overflow: hidden; background: var(--dark); }
.jsh .tz__track { height: 300vh; }
.jsh .tz__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.tz__stage img { position: absolute; inset: 0; width: 100%; height: 100%;
                 object-fit: cover; object-position: 55% 55%; }
/* Die ausgewertete Fassung liegt oben und wird von links aufgezogen. */
.tz__sharp { position: absolute; inset: 0; }
.jsh .tz__sharp { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); will-change: clip-path; }
/* Die Kante selbst: schmaler Lichtstrich an der Wischposition. */
.tz__edge {
  position: absolute; top: 0; bottom: 0; left: var(--p, 0%); width: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent) 18%, var(--accent) 82%, transparent);
  box-shadow: 0 0 24px 2px rgba(93,184,122,.55);
  opacity: var(--pe, 0);   /* blendet am Anfang auf und am Ende wieder weg */
  z-index: 1; display: none;
}
.jsh .tz__edge { display: block; }
.tz__edge::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid rgba(93,184,122,.5); background: rgba(1,20,34,.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* Oben kraeftig, damit die Schrift traegt; in der Mitte offen, weil dort die
   Tiefenlinien liegen; unten wieder zu, fuer den Uebergang in die Seite. */
.tz__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(1,20,34,.92) 0%, rgba(1,20,34,.72) 26%,
                              rgba(1,20,34,.28) 44%, rgba(1,20,34,.12) 60%,
                              rgba(1,20,34,.3) 84%, var(--dark) 99%); }

/* Der Text sitzt oben, die Befunde unten — so ueberlagert sich nichts. */
.tz__words {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  text-align: center; padding: 16vh 1.5rem 0; gap: .35rem;
  text-shadow: 0 2px 24px rgba(1,20,34,.7);
}
/* Zwei Zeilen einer Aussage: die erste steht von Anfang an da und tritt
   zurueck, die zweite kommt mit dem Wisch herein. */
.tz__l, .tz__r { font-size: clamp(1.625rem, 5.6vw, 3.25rem); font-weight: 700; line-height: 1.06; }
.tz__l { color: #90A9B5; display: none; }
.tz__note { margin-top: 1.5rem; color: #BFD6E0; font-size: 1rem; line-height: 1.65;
            font-weight: 300; max-width: 34rem; }
.jsh .tz__l { display: block; opacity: calc(1 - var(--pn, 0) * .62); }
.jsh .tz__r { opacity: var(--pn, 0); transform: translateY(calc((1 - var(--pn, 0)) * 16px)); }
.jsh .tz__note { opacity: var(--pn, 0); }

/* ================= ABLAUF: Geraet bleibt stehen, Text laeuft ============= */
.pz { position: relative; }
.pz__grid { display: grid; gap: 2.5rem; align-items: start; }
.pz__stage { display: none; }
.pz__steps { display: flex; flex-direction: column; gap: 2rem; }

.pz__step {
  position: relative;
  border: 1px solid var(--line); border-radius: 1.5rem;
  background: rgba(19,55,71,.14); padding: 2rem;
  transition: border-color .45s, background-color .45s;
}
.pz__step .pill--tight { margin-bottom: 1.25rem; }
.pz__step h3 { font-size: clamp(1.5rem, 4.5vw, 2rem); line-height: 1.1; margin-bottom: .875rem; }
.pz__step p  { color: var(--muted); font-size: 1.0625rem; line-height: 1.7; }
.pz__step .phone { max-width: 260px; margin: 1.75rem auto 0; }
.pz__step.is-on { border-color: rgba(93,184,122,.35); background: rgba(19,55,71,.3); }

/* Die vier Aufnahmen liegen uebereinander, nur eine ist sichtbar.
   Die erste steht im Fluss und gibt dem Rahmen seine Hoehe. */
.pz__stage .phone img { transition: opacity .45s ease; }
.pz__stage .phone img:not(:first-of-type) {
  /* Ein <img> spannt nicht zwischen left und right: Breite ausdruecklich, gleich dem ersten Bild. */
  position: absolute; top: 6px; left: 6px; width: calc(100% - 12px); height: auto; opacity: 0;
}

/* ===================== KARTENBAND MIT TIEFENWIRKUNG ====================== */
.mz { position: relative; overflow: hidden; padding-block: 7rem; isolation: isolate; }
.mz__bg { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.mz__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.mz__veil { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, var(--dark), rgba(1,20,34,.55) 28%,
                              rgba(1,20,34,.75) 70%, var(--dark)); }
.mz__inner { position: relative; z-index: 2; }

.mz__pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mz__pins b {
  position: absolute; left: var(--x); top: var(--y);
  width: 1.5rem; height: 1.5rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--amber); box-shadow: 0 8px 18px rgba(0,0,0,.45);
  transition: transform .6s var(--ease-pop), opacity .4s ease;
  transition-delay: var(--d, 0ms);
}
.mz__pins b::after { content: ""; position: absolute; inset: .4rem;
                     border-radius: 50%; background: rgba(1,20,34,.55); }
.jsh .mz__pins b { transform: rotate(-45deg) translateY(-26px) scale(.4); opacity: 0; }
.jsh .mz__pins.is-on b { transform: rotate(-45deg) translateY(0) scale(1); opacity: 1; }

/* ======================= SCREENSHOT-GEGENUEBER ========================== */
.sx { display: grid; gap: 2.5rem; align-items: center; }
.sx__media { display: flex; justify-content: center; }
.sx__media .phone { max-width: 300px; }
.sx h2 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; margin-bottom: 1.25rem; }
.sx > div > p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; }

/* Kleine Kennzahl-Zeile unter einem Screenshot */
.kpis { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.kpi { display: inline-flex; align-items: baseline; gap: .4rem;
       background: var(--surface); border: 1px solid var(--line);
       border-radius: 9999px; padding: .4rem .85rem; font-size: .8125rem; color: var(--muted); }
.kpi b { color: var(--text); font-size: .9375rem; }

/* Verweise im Fließtext: fang.css setzt `a { color: inherit }`, damit waeren
   sie von normalem Text nicht zu unterscheiden. */
.head p a, .faq__body p a {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .2s;
}
.head p a:hover, .faq__body p a:hover { color: var(--text); }

/* =========================== GERAETE-REIHE ============================== */
.strip { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; }
.strip .phone { max-width: 230px; flex: 0 1 230px; }
.strip .phone:nth-child(1) { transform: rotate(-5deg) translateY(1.5rem); z-index: 1; }
.strip .phone:nth-child(2) { z-index: 3; }
.strip .phone:nth-child(3) { transform: rotate(5deg) translateY(1.5rem); z-index: 1; }

/* ============================ Bewegungsebene ============================= */
/* Ruhezustand ist sichtbar. Erst wenn das Skript laeuft, wird versteckt. */
.jsh .r-up   { opacity: 0; transform: translateY(42px); }
.jsh .r-fade { opacity: 0; }
.jsh .r-left { opacity: 0; transform: translateX(-28px); }
.jsh .r-pop  { opacity: 0; transform: scale(.92); }
.jsh .is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms);
}
.jsh .r-pop.is-in { transition-timing-function: var(--ease-pop); }
/* Die Schrittkarten behalten ihren Wechsel der Hervorhebung auch nach dem Einblenden. */
.jsh .pz__step.is-in {
  transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms),
              border-color .45s, background-color .45s;
}

@media (prefers-reduced-motion: reduce) {
  .jsh .r-up, .jsh .r-fade, .jsh .r-left, .jsh .r-pop {
    opacity: 1; transform: none; transition: none; }
  .hx__media, .mz__bg { transform: none !important; }
  .hx__cue span { display: none; }
}

/* ================================ Breiten ================================ */
@media (min-width: 700px) {
  .strip .phone { flex-basis: 200px; }
}
@media (min-width: 900px) {
  .hx__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
               padding: 8rem 1.5rem 6rem; gap: 2rem; }
  .hx__phone { display: block; }
  .hx h1 { font-size: clamp(3.25rem, 5.6vw, 4.75rem); }

  .pz__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 4rem; }
  .pz__stage { display: flex; position: sticky; top: 14vh; justify-content: center; }
  .pz__stage .phone { max-width: 300px; }
  /* Die Karte bleibt eng am Text. Den Weg, den das stehende Geraet zum
     Wechseln braucht, gibt der Abstand ZWISCHEN den Karten her — nicht
     Leerraum innerhalb. */
  .pz__steps { gap: clamp(7rem, 20vh, 13rem); }
  .pz__step { padding: 2.5rem; }
  .pz__step .phone { display: none; }

  .sx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .sx--flip .sx__media { order: 2; }
  .strip .phone { flex-basis: 250px; max-width: 250px; }
}
@media (min-width: 1100px) {
  .hx__phone { width: min(100%, 340px); }
  .hx__phone .phone { max-width: 340px; }
}

/* Die Geraetereihe kippt auf kleinen Schirmen in eine Spalte. */
@media (max-width: 699px) {
  .strip { flex-direction: column; align-items: center; gap: 2rem; }
  .strip .phone { transform: none !important; max-width: 260px; }
  .jsh .tz__track { height: 230vh; }     /* kuerzerer Weg auf kleinen Schirmen */
  .tz__words { padding: 13vh 1.25rem 0; }
  .mz { padding-block: 4.5rem; }
}

/* Reduzierte Bewegung, auch wenn sie erst bei offener Seite eingeschaltet wird:
   `.jsh` steht dann schon, also stellt dieser Block (am Dateiende, damit er die
   Breitenregeln oben schlaegt) den Ruhezustand von Tiefenkarte und Nadeln her. */
@media (prefers-reduced-motion: reduce) {
  .jsh .tz__track { height: auto; }
  .jsh .tz__stage { position: relative; height: 72vh; }
  .jsh .tz__sharp { clip-path: none; }
  .jsh .tz__edge, .jsh .tz__l { display: none; }
  .jsh .tz__r, .jsh .tz__note { opacity: 1; transform: none; }
  .jsh .mz__pins b { opacity: 1; transform: rotate(-45deg); transition: none; }
}