/* ══════════════════════════════════════════════════════════════
   ARCO - Golf Swing Camera · Landingpage
   Gestaltung nach ARCO Brand Guidelines v1.1 (Juli 2026)

   Verbindliche Regeln, die dieses Stylesheet einhält:
   · Signal Green ist die einzige Markenfarbe, ≤ 5 % der Fläche.
   · Genau eine grüne Primäraktion pro Bildschirmausschnitt.
   · Keine Farbverläufe. Nirgends.
   · Keine Farben außerhalb der Palette.
   · Tabellenziffern für alle veränderlichen Zahlen.
   · Negatives Tracking erst ab 20 px aufwärts.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Signal */
  --signal:        #00E37A;
  --signal-press:  #00B863;
  --signal-tint:   rgba(0,227,122,.12);

  /* Neutrale Skala (Dark, Standard) */
  --ink:           #0A0B0D;
  --surface-1:     #141619;
  --surface-2:     #1E2126;
  --hairline:      #2A2E35;
  --text-1:        #F5F7FA;
  --text-2:        #A8B0BA;
  --text-3:        #6B7480;
  --white:         #FFFFFF;

  /* Semantisch */
  --record:        #FF453A;
  --warning:       #FFB020;

  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 48px);
  --sec-y: clamp(72px, 10vw, 132px);
  --r: 18px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text-1);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip statt hidden: kappt horizontalen Überhang, ohne einen Scroll-
     Kontext zu erzeugen - sonst bräche das sticky-Pinning der Scrub-
     Sektion (ein overflow-Scroll-Container fängt position:sticky ab). */
  overflow-x:clip;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:700; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
/* Beide tragen im Browser-Standard einen Seitenrand von 40 px. Hier sind
   sie Layout-Bausteine (Medienspalte, Zitat) und bringen ihre Abstände
   selbst mit - sonst ist die Spalte schmaler als das, was darin steht. */
figure,blockquote{ margin:0; }

.mono{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.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; top:0; z-index:200;
  background:var(--surface-2); color:var(--text-1);
  padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* Ankersprünge dürfen nicht unter der Navigation landen */
section[id]{ scroll-margin-top:84px; }

/* Optionaler Zeilenumbruch - nur dort, wo die Zeile auch Platz hat */
.obr{ display:inline; }

/* ─────────────────────────── Typografie ─────────────────────────── */

.display{
  font-size:clamp(46px, 9vw, 108px);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.035em;
}
.display .line{ display:block; }

/* Die Hero-Überschrift trägt den Kernsatz. Ein ganzer Satz braucht eine
   kleinere Stufe als ein Zuruf, sonst wird er zur Wand statt zur Aussage. */
.display-claim{
  font-size:clamp(38px, 6.4vw, 78px);
  line-height:1.02;
  letter-spacing:-.032em;
  max-width:16ch;
}

h2{
  font-size:clamp(32px, 5.2vw, 60px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.03em;
}
.h3-lg{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
}
h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }

.lead{
  font-size:clamp(19px, 2vw, 23px);
  line-height:1.5;
  color:var(--text-2);
  letter-spacing:-.012em;
  max-width:30ch;
}

.eyebrow{
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--text-3);
  display:flex; align-items:center; gap:10px;
}
.eyebrow .num{ color:var(--signal); }

.note{
  margin-top:40px;
  max-width:56ch;
  color:var(--text-3);
  font-size:15px;
}
.note-inline{
  margin-top:24px; padding-left:16px;
  border-left:1px solid var(--hairline);
  color:var(--text-3); font-size:15px;
}

/* ─────────────────────────── Navigation ─────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(10,11,13,0);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.nav.is-stuck{
  background:rgba(10,11,13,.78);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  border-bottom-color:var(--hairline);
}
.nav-inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:14px var(--gut);
  display:flex; align-items:center; gap:32px;
}

/* Lockup: Zeichen links, Wort rechts, Abstand = halbe Zeichenhöhe */
.lockup{ display:inline-flex; align-items:center; gap:.5em; font-size:19px; }
.lockup-mark{ width:1em; height:1em; color:var(--signal); flex:none; }
.lockup-word{
  font-size:1em; font-weight:800; letter-spacing:.06em;
  line-height:1; color:var(--text-1);
}

.nav-links{ display:flex; gap:28px; margin-left:auto; }
.nav-links a{
  font-size:14px; color:var(--text-2);
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--text-1); }

/* ─────────────────────── Sprachumschalter ───────────────────────
   Bewusst leise: zwei Textverweise, dazwischen eine Haarlinie. Kein
   Grün. Die eine grüne Primäraktion pro Bildschirmausschnitt sitzt
   woanders, hier wäre sie nur Dekoration. Die aktive Sprache steht
   in der hellen Textfarbe, das ist der einzige Unterschied. */

.lang{ display:flex; align-items:center; }
.lang a{
  display:inline-flex; align-items:center;
  min-height:38px; padding:0 12px;
  font-size:14px; color:var(--text-3);
  transition:color .2s ease;
}
.lang a:first-child{ padding-left:0; }
.lang a + a{ border-left:1px solid var(--hairline); }
.lang a:hover{ color:var(--text-1); }
.lang a[aria-current="page"]{ color:var(--text-1); }

/* Im Footer steht der Umschalter in einer Reihe mit den Rechtsverweisen,
   dort tragen die Sprachen ihren vollen Namen. */
.lang-foot a{ min-height:auto; color:var(--text-2); }

/* Sprach-Dropdown in der Navigationsleiste. Natives <details>, ohne
   JavaScript bedienbar. Die Schaltfläche zeigt die aktuelle Sprache,
   das Menü klappt die andere darunter aus. Bewusst leise gehalten. */
.langpick{ position:relative; }
.langpick > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  min-height:38px; padding:0 4px;
  font-size:13px; color:var(--text-1);
  transition:color .2s ease;
}
.langpick > summary::-webkit-details-marker{ display:none; }
.langpick > summary::after{
  content:""; width:5px; height:5px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-1px) rotate(45deg);
  transition:transform .2s ease;
}
.langpick[open] > summary,
.langpick > summary:hover{ color:var(--text-1); }
.langpick[open] > summary::after{ transform:translateY(1px) rotate(-135deg); }
.langpick-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:30;
  display:flex; flex-direction:column; min-width:130px;
  padding:6px;
  background:var(--surface-1); border:1px solid var(--hairline);
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.32);
}
.langpick-menu a{
  padding:8px 12px; border-radius:8px;
  font-size:14px; color:var(--text-2);
  transition:background .15s ease, color .15s ease;
}
.langpick-menu a:hover{ background:var(--surface-2); color:var(--text-1); }
.langpick-menu a[aria-current="page"]{ color:var(--text-1); }

/* ─────────────────────────── Buttons ─────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 26px;
  border-radius:999px;
  font-size:16px; font-weight:600; letter-spacing:-.01em;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  cursor:pointer;
}
.btn-primary{ background:var(--signal); color:var(--ink); }
.btn-primary:hover{ background:var(--signal-press); }
.btn-primary:active{ background:var(--signal-press); transform:scale(.98); }

.btn-ghost{
  border:1px solid var(--hairline);
  color:var(--text-1); background:transparent;
}
.btn-ghost:hover{ border-color:var(--text-3); }

.btn-sm{ min-height:38px; padding:0 18px; font-size:14px; }
.btn-block{ display:flex; width:100%; margin-top:26px; }

.btn-text{ padding:0; min-height:48px; color:var(--text-2); }
.btn-text:hover{ color:var(--text-1); }
.btn-text .chev{ transition:transform .2s ease; }
.btn-text:hover .chev{ transform:translateX(4px); }

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

.hero{
  position:relative;
  isolation:isolate;                 /* eigener Stapelkontext: Video bleibt hinter dem Inhalt */
  padding:clamp(124px, 17vh, 172px) 0 var(--sec-y);
}

/* Hintergrundvideo: füllt den Hero und liegt hinter allem im Hero.
   Weil die Navi separat und fixiert darüber schwebt, reicht das Bild
   sichtbar unter die Menüleiste. */
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden;
  background:var(--ink);             /* deckt ab, bevor das Video da ist */
}
.hero-bg-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Scrim für Lesbarkeit: dunkel dort, wo der Text steht (oben und links),
   nach unten/rechts klarer, damit das Video wirkt. Bleibt im Rahmen der
   Marke — kein Grün, keine bunten Verläufe, nur Ink in Stufen. */
.hero-bg-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.30) 55%, rgba(10,11,13,0) 100%),
    linear-gradient(180deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,.25) 38%, rgba(10,11,13,.78) 100%);
}

/* „Bewegung reduzieren": kein laufendes Video, nur das ruhige Poster. */
@media (prefers-reduced-motion: reduce){
  .hero-bg-media{ display:none; }
  .hero-bg{ background:var(--ink) url("assets/video/hero-poster.jpg") center/cover no-repeat; }
}

.hero-copy{ max-width:900px; }
.hero .eyebrow{ margin-bottom:22px; }
.hero .lead{ margin-top:28px; max-width:34ch; }

/* Über dem Video ist gedämpftes Grau schlecht lesbar. Im Hero läuft
   die sonst zurückhaltende Textfarbe deshalb auf Weiß — der grüne
   Akzentpunkt der Eyebrow bleibt, die Zahlen bleiben in der Monoschrift. */
.hero .eyebrow,
.hero .lead,
.hero .soon,
.hero .claims,
.hero .stage-cap{ color:var(--text-1); }

/* Über dem Video auch die neutralen Umrandungen auf Weiß: der Android-Hinweis
   im Hero und die „Jetzt vorbestellen"-Schaltfläche in der Navigation. */
.hero .soon,
.nav .btn-ghost{ border-color:var(--text-1); }
.nav .btn-ghost:hover{ border-color:var(--white); }

.hero-actions{
  margin-top:38px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
/* Über dem Video weiß statt gedämpft — Fließtext und die Zahl gleich hell. */
.hero-price{
  margin-top:22px; font-size:15px; color:var(--text-1);
}
.hero-price .mono{ color:var(--text-1); }

/* Bühne */
.hero-stage{ margin:clamp(56px,8vw,88px) 0 0; }
.stage-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface-1);
  border:1px solid var(--hairline);
}
.stage-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stage-cap{
  margin-top:16px; font-size:12px; letter-spacing:.01em;
  color:var(--text-3); text-align:center;
}

.stage-hud{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(14px,2vw,22px);
  pointer-events:none;
}
.hud-top{ display:flex; align-items:center; justify-content:space-between; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  height:32px; padding:0 14px;
  border-radius:999px;
  background:rgba(20,22,25,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--hairline);
  font-size:13px; font-weight:600; color:var(--text-1);
}
.pill .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--signal);
  animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.hud-meta{
  font-size:12px; color:var(--text-2);
  background:rgba(20,22,25,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--hairline);
  border-radius:999px; padding:6px 12px;
}

.hud-bottom{ display:flex; flex-direction:column; gap:10px; }
.strip{
  display:flex; gap:3px; height:34px;
  border-radius:6px; overflow:hidden;
}
.strip i{
  flex:1 1 0; background:rgba(245,247,250,.14);
  border-radius:2px;
  transition:background .12s linear;
}
.strip i.on{ background:var(--signal); }
.hud-read{
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--text-2);
}

/* Claims */
.claims{
  margin-top:clamp(48px,7vw,72px);
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px);
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.01em; color:var(--text-3);
}

/* ─────────────────────────── Sektionen ─────────────────────────── */

.sec{ padding:var(--sec-y) 0; }
.sec-head{ max-width:760px; }
.sec-head h2{ margin:22px 0 0; }
.sec-text{ margin-top:28px; display:grid; gap:18px; max-width:62ch; }
.sec-text p{ color:var(--text-2); font-size:clamp(17px,1.6vw,19px); }

/* Split */
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,7vw,96px); align-items:center;
}
.sec-split .split{ align-items:center; }
/* Nur im Über-Abschnitt: die Medienspalte ist so breit wie das Porträt
   darin (siehe .founder) und nicht ein Anteil der Zeile. Ein Bruchteil
   würde die Spalte mit dem Fenster mitwachsen lassen - und das Porträt
   mit ihr, bis es der Geschichte daneben die Schau stiehlt. */
.split-narrow{ grid-template-columns:auto minmax(0,1fr); }
.split-rev{ margin-top:clamp(72px,10vw,120px); }
.split-rev .split-media{ order:2; }
.split-copy p{ color:var(--text-2); margin-top:18px; max-width:46ch; }
.split-copy h2{ margin:22px 0 0; }
.split-copy .eyebrow + h2{ margin-top:22px; }

.ticks{ margin-top:30px; display:grid; gap:12px; }
.ticks li{
  position:relative; padding-left:26px;
  font-size:16px; color:var(--text-2);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--text-3);
}

/* ─────────────────────────── iPhone-Rahmen ───────────────────────────
   Ein Apple-Gerätebild (assets/scrub/iphone-frame.png, 1350×2760) liegt
   im DOM NACH dem Inhalt und deckt dessen Ecken ab. Der Inhalt sitzt
   exakt in der Aussparung; die Maße sind aus dem PNG gemessen und
   stehen hier als Prozentwerte: x=72 y=69 w=1206 h=2622, Eckradius 192px.
   Zusätzlich ist der Screen rund beschnitten, damit keine spitze Ecke
   durch die runde Aussparung schaut.

   Zwei Sektionen benutzen den Rahmen: 05 Ansehen (Inhalt ist ein
   <canvas>, das der Scroll-Scrub zeichnet) und 06 Automatik (Inhalt ist
   ein Bild, später eine Bildschirmaufnahme). Dem Rahmen ist gleich, was
   im Screen liegt - er füllt jedes Kind formatfüllend aus.

   Was hier hineinkommt, sind reine Bildschirmaufnahmen OHNE Geräterahmen.
   Aufnahmen, die den Rahmen schon im Bild tragen, laufen über .shot. */
.phone{
  position:relative;
  width:min(300px, 72vw);
  margin-inline:auto;
  -webkit-user-select:none; user-select:none;
}
.phone-bezel{
  position:relative; z-index:2;
  display:block; width:100%; height:auto;
  pointer-events:none;
}
.phone-screen{
  position:absolute; z-index:1;
  left:5.333%; top:2.5%;
  width:89.333%; height:95%;
  overflow:hidden;
  background:var(--ink);
  /* Eckradius exakt wie die Aussparung: 192px. Als getrennte h/v-
     Prozente (Breite bzw. Höhe des Screens), damit die Ecke bei jeder
     Größe kreisrund bleibt. */
  border-radius:15.92% / 7.32%;
}
/* Alles im Screen - Bild, Video, Canvas - füllt die Aussparung. */
.phone-screen > *{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Grüner Schimmer als Zeichen der Bereitschaft. drop-shadow statt
   box-shadow, damit der Schein der Silhouette des Rahmens folgt und
   nicht dem umschließenden Rechteck. */
.phone-glow{ filter:drop-shadow(0 0 44px rgba(0,227,122,.12)); }

/* ───────────────────── Scroll-Scrub (Bedienung) ─────────────────────
   Die Sektion ist absichtlich hoch (Scroll-Weg); der Inhalt pinnt in
   der Mitte, während der Fortschritt die Bildfolge abbildet. Kürzerer
   Weg + viele Bilder = dichtes, flottes Scrubbing. --scrub-travel ist
   der reine Zieh-Weg (ohne die 100vh, die das Pinnen selbst kostet). */
.sec-scrub{ padding:0; --scrub-travel:180vh; }
.scrub-track{
  position:relative;
  height:calc(100vh + var(--scrub-travel));
}
.scrub-pin{
  position:sticky; top:0;
  min-height:100vh;
  display:flex; align-items:center;
  padding-block:var(--sec-y);
}

/* Der Rahmen selbst steht als .phone weiter oben; hier liegt nur, was
   den Scrub ausmacht: Standbild unten, gezeichnete Bilder darüber. */
.scrub-poster{ z-index:1; }
.scrub-canvas{ z-index:2; }   /* deckt das Poster ab, sobald gezeichnet wird */

@media (prefers-reduced-motion: reduce){
  /* Kein Pinnen, kein Zieh-Weg: die Sektion verhält sich wie eine
     normale Split-Sektion, das Standbild bleibt stehen. */
  .sec-scrub{ padding:var(--sec-y) 0; --scrub-travel:0vh; }
  .scrub-track{ height:auto; }
  .scrub-pin{ position:static; min-height:0; padding-block:0; }
}

/* Einspaltig: Auf Mobil pinnt nicht mehr die ganze Split-Sektion, sondern
   nur das iPhone. Der Text steht normal darüber und scrollt vorbei; sobald
   das iPhone die Mitte erreicht, klebt es und der Schwung läuft. So ist das
   Gerät so groß wie die übrigen Screenshots (78vw) und mittig, ohne dass
   Text und Gerät um die 100vh konkurrieren. Den Text-Vorlauf rechnet das
   Skript aus der Fortschrittsformel heraus. dvh nimmt Rücksicht auf die
   ein-/ausblendende Browserleiste. */
@media (max-width: 1080px){
  .sec-scrub{ --scrub-travel:150vh; }
  /* Damit die sticky-Figur über den ganzen Zieh-Weg klebt, muss ihr
     Bezugsrahmen so hoch sein wie die Sektion: Pin und Wrap auf 100 %
     der Track-Höhe, und die Split als Block statt Grid (Text oben,
     iPhone darunter, das dann klebt). */
  .scrub-pin{ position:static; padding-block:0; min-height:0; height:100%; }
  .sec-scrub .split{ display:block; height:100%; }
  .sec-scrub .split-media{
    position:sticky; top:0;
    width:100%; height:100dvh; margin:0;
    display:flex; align-items:center; justify-content:center;
  }
}

/* Screenshots, die den Geraeterahmen schon im Bild tragen - kein zweiter Rahmen. */
.shot{
  display:block; margin-inline:auto;
  width:100%; height:auto;
}
.shot-phone{ max-width:min(300px, 78vw); }
.shot-phone-sm{ max-width:min(230px, 50vw); }
.shot-pad{ max-width:min(460px, 64vw); }
.shot-glow{ filter:drop-shadow(0 0 44px rgba(0,227,122,.10)); }

/* ─────────────────────────── Platzhalter ─────────────────────────── */

.ph{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-1);
  border:1px dashed var(--hairline);
  border-radius:var(--r);
  min-height:120px;
  overflow:hidden;
}
.ph::before{
  /* Raster als ruhige Fläche statt leerem Kasten - kein Farbverlauf */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(42,46,53,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42,46,53,.5) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.5;
}
.ph-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; padding:24px;
}
.ph-tag{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.01em; color:var(--text-3);
  border:1px solid var(--hairline); border-radius:999px; padding:4px 10px;
}
.ph-name{ font-family:var(--mono); font-size:13px; color:var(--text-2); }
.ph-note{ font-size:13px; color:var(--text-3); max-width:28ch; line-height:1.4; }
.ph-portrait{ aspect-ratio:4/5; }

/* ─────────────────────────── Codec-Vergleich ─────────────────────────── */

.codec{
  margin-top:clamp(48px,7vw,80px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px);
}
.codec-panel{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  padding:clamp(22px,3vw,32px);
}
.codec-panel.is-arco{ background:var(--surface-2); }
.codec-head{
  display:flex; flex-direction:column; gap:8px;
  min-height:52px;
}
.codec-state{
  font-family:var(--mono); font-size:12px; letter-spacing:.01em;
  color:var(--text-3);
}
.is-arco .codec-state{ color:var(--signal); }

.codec-view{
  margin:26px 0 22px;
  height:96px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  border:1px solid var(--hairline);
  border-radius:12px;
}
.codec-view .mono{
  font-size:clamp(34px,5vw,52px);
  color:var(--text-1);
  letter-spacing:-.02em;
}
.is-arco .codec-view .mono{ color:var(--signal); }

.codec-track{
  display:flex; gap:4px; height:44px;
  align-items:flex-end;
}
.codec-track .cell{
  flex:1 1 0; height:22px;
  border-radius:2px;
  background:rgba(245,247,250,.10);
  border:1px solid transparent;
  transition:background .1s linear, height .1s linear, border-color .1s linear;
}
.codec-track .cell.key{ height:34px; background:rgba(245,247,250,.32); }
/* Rechts ist jedes Bild ein Referenzbild - deshalb sehen alle Zellen aus wie
   die hellen Zellen links. Grün bleibt der Position vorbehalten. */
.is-arco .codec-track .cell{ height:34px; background:rgba(245,247,250,.32); }
.codec-track .cell.cur{ background:var(--text-1); height:44px; }
.is-arco .codec-track .cell.cur{ background:var(--signal); height:44px; }

.codec-foot{
  margin-top:22px; font-size:14px; color:var(--text-3); line-height:1.5;
  max-width:42ch;
}

/* ─────────────────────────── Karten ─────────────────────────── */

.cards{
  margin-top:clamp(48px,7vw,72px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px);
}
.card{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  padding:clamp(24px,3vw,32px);
}
.card h3{ margin-bottom:10px; }
.card p{ color:var(--text-2); font-size:15px; }
/* Schrittnummer im Ablauf „So funktioniert's". Leise, nicht grün: Signal
   Green bleibt der einen Primäraktion pro Bildschirm vorbehalten. */
.step{ color:var(--text-3); font-size:13px; letter-spacing:.04em; margin-bottom:10px; }
.card-vis{
  height:72px; margin-bottom:26px;
  display:flex; align-items:center; justify-content:flex-start;
  position:relative;
}

/* Sprachausgabe */
.wave{ display:flex; align-items:center; gap:5px; height:40px; }
.wave i{
  width:3px; height:10px; border-radius:2px; background:var(--text-3);
  animation:wave 1.5s ease-in-out infinite;
}
.wave i:nth-child(1){ animation-delay:0s }
.wave i:nth-child(2){ animation-delay:.12s }
.wave i:nth-child(3){ animation-delay:.24s; background:var(--signal) }
.wave i:nth-child(4){ animation-delay:.36s; background:var(--signal) }
.wave i:nth-child(5){ animation-delay:.48s; background:var(--signal) }
.wave i:nth-child(6){ animation-delay:.6s }
.wave i:nth-child(7){ animation-delay:.72s }
@keyframes wave{ 0%,100%{ height:8px } 50%{ height:34px } }

/* Signalton */
.vis-tone{ justify-content:flex-start; }
.vis-tone .ring{
  position:absolute; left:18px; top:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%;
  border:1px solid var(--signal);
  animation:ping 2.6s ease-out infinite;
}
.vis-tone .r2{ animation-delay:.55s }
.vis-tone .r3{ animation-delay:1.1s }
@keyframes ping{
  0%{ width:14px; height:14px; opacity:.9 }
  100%{ width:72px; height:72px; opacity:0 }
}

/* Bereitschaftslicht */
.lamp{
  width:26px; height:26px; border-radius:50%;
  background:var(--signal);
  animation:lamp 3s ease-in-out infinite;
}
@keyframes lamp{
  0%,100%{ opacity:.25; box-shadow:none }
  50%{ opacity:1; box-shadow:0 0 26px rgba(0,227,122,.45) }
}

@media (prefers-reduced-motion: reduce){
  .wave i,.vis-tone .ring,.lamp,.pill .dot{ animation:none !important; }
  .lamp{ opacity:1 }
}

/* ─────────────────────────── Companion ─────────────────────────── */

.companion-stage{ margin:clamp(48px,7vw,80px) 0 0; }
.companion-pair{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(16px,4vw,48px);
}
.link-viz{ display:flex; gap:7px; }
.link-viz i{
  width:6px; height:6px; border-radius:50%; background:var(--text-3);
  animation:travel 1.9s ease-in-out infinite;
}
.link-viz i:nth-child(2){ animation-delay:.2s }
.link-viz i:nth-child(3){ animation-delay:.4s }
@keyframes travel{
  0%,100%{ opacity:.2; background:var(--text-3) }
  50%{ opacity:1; background:var(--signal) }
}
@media (prefers-reduced-motion: reduce){ .link-viz i{ animation:none } }

/* ─────────────────────────── Preis ─────────────────────────── */

.tiers{
  margin-top:clamp(48px,7vw,72px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px);
  align-items:stretch;
}
.tier{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  padding:clamp(26px,3vw,34px);
  display:flex; flex-direction:column;
}
.tier-main{ background:var(--surface-2); border-color:var(--signal-tint); }
.tier-label{
  font-size:12px; letter-spacing:.01em; color:var(--text-3);
}
.tier-price{
  margin-top:18px;
  font-size:clamp(30px,3.6vw,40px); font-weight:700; letter-spacing:-.03em;
}
.tier-price span{ font-weight:500; color:var(--text-2); }
.tier-sub{ margin-top:14px; color:var(--text-2); font-size:15px; flex:1; }

.compare{ margin-top:clamp(56px,8vw,96px); }
.compare .h3-lg{ margin-bottom:28px; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ptable{
  width:100%; min-width:620px;
  border-collapse:collapse; text-align:left;
}
.ptable th,.ptable td{
  padding:16px 18px;
  border-bottom:1px solid var(--hairline);
  font-size:15px; font-weight:400; color:var(--text-2);
  vertical-align:middle;
}
.ptable thead th{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.01em; color:var(--text-3);
  border-bottom-color:var(--hairline);
}
.ptable tbody th{ color:var(--text-1); font-weight:600; }
.ptable tr.is-arco th,.ptable tr.is-arco td{ color:var(--text-1); }
.ptable tr.is-arco{ background:var(--signal-tint); }
.ptable tr.is-arco th{ position:relative; }
.table-note{
  margin-top:20px; font-size:13px; color:var(--text-3); max-width:70ch; line-height:1.55;
}
.scroll-hint{
  display:none; margin-top:14px;
  font-size:12px; letter-spacing:.01em; color:var(--text-3);
}

.pledge{
  margin-top:clamp(48px,7vw,80px);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  padding:clamp(28px,4vw,44px);
  background:var(--surface-1);
}
.pledge-lead{
  font-size:clamp(20px,2.4vw,26px); font-weight:600;
  letter-spacing:-.02em; line-height:1.3; max-width:26ch;
}
.pledge-list{ margin-top:26px; display:grid; gap:12px; max-width:64ch; }
.pledge-list li{
  position:relative; padding-left:24px; color:var(--text-2); font-size:16px;
}
.pledge-list li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:10px; height:1px; background:var(--text-3);
}

/* ─────────────────────────── Gründer ─────────────────────────── */

.story p{
  font-size:clamp(19px,2.1vw,24px);
  line-height:1.45; letter-spacing:-.015em;
  color:var(--text-1);
  margin-top:22px; max-width:34ch;
}
.story{ margin:26px 0 0; padding:0; }
.signature{
  margin-top:36px;
  display:flex; align-items:center; gap:18px;
}
.signature-name{ font-weight:600; font-size:16px; }
.signature-name span{
  display:block; font-weight:400; color:var(--text-3); font-size:14px; margin-top:4px;
}
/* Das Porträt gehört zur Geschichte daneben, es ist nicht das Thema.
   Über die volle Spaltenbreite wird es aber genau das: hochkant im Format
   4:5 reicht es dann über die ganze Höhe des Textblocks, und einspaltig
   nimmt es fast die gesamte Bildschirmbreite ein. Deshalb dieselbe
   Bauform wie bei .phone und .shot - eine feste Obergrenze, ein Anteil
   der Fensterbreite als zweite Schranke fürs Telefon, und mittig gesetzt,
   sobald die Spalte breiter ist als das Bild (einspaltig ab 1080px). */
.founder{ width:min(300px, 62vw); margin-inline:auto; }

.portrait{
  width:100%;
  /* height:auto ist nötig: die width/height-Attribute im HTML verhindern
     sonst, dass aspect-ratio greift, und das Bild bliebe in Originalhöhe. */
  height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:50% 30%;
  border-radius:var(--r);
}

/* ─────────────────────────── Grenzen ─────────────────────────── */

.nots{
  margin-top:clamp(40px,6vw,64px);
  display:flex; flex-wrap:wrap; gap:10px;
}
/* Der Kernsatz als Schlusszeile. Groß genug, um die Aufzählung darüber
   zusammenzufassen, aber kleiner als eine Abschnittsüberschrift, damit er
   die Gliederung nicht durcheinanderbringt. */
.tagline{
  margin-top:clamp(44px,6vw,68px);
  font-size:clamp(24px,3.4vw,38px);
  font-weight:700; line-height:1.15; letter-spacing:-.025em;
  max-width:22ch;
}

.nots li{
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:9px 18px;
  font-size:15px; color:var(--text-3);
}

/* ─────────────────────────── Stimmen ─────────────────────────── */

.testimonials{
  margin-top:clamp(48px,7vw,72px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px);
}
.testimonial{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--r);
  padding:clamp(24px,3vw,32px);
  display:flex; flex-direction:column; gap:20px;
}
.testimonial-head{ display:flex; align-items:center; gap:12px; }
.testimonial-avatar{
  width:44px; height:44px; flex:none;
  border-radius:50%;
  background:var(--surface-2);
  border:1px dashed var(--hairline);
}
.testimonial-name{ font-weight:600; font-size:15px; color:var(--text-1); }
.testimonial-name span{
  display:block; font-weight:400; color:var(--text-3); font-size:13px; margin-top:2px;
}
.testimonial-quote p{ color:var(--text-2); font-size:15px; line-height:1.6; }

/* ─────────────────────────── Fragen ─────────────────────────── */

.faq{
  margin-top:clamp(40px,6vw,64px);
  border-top:1px solid var(--hairline);
}
.faq-item{ border-bottom:1px solid var(--hairline); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 0;
  font-size:17px; font-weight:600; color:var(--text-1);
  cursor:pointer; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ position:relative; width:16px; height:16px; flex:none; }
.faq-icon::before,
.faq-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--text-3);
  transition:transform .25s ease, opacity .25s ease;
}
.faq-icon::before{ width:14px; height:1.5px; transform:translate(-50%,-50%); }
.faq-icon::after{ width:1.5px; height:14px; transform:translate(-50%,-50%); }
.faq-item[open] .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-answer{ padding:0 40px 24px 0; max-width:62ch; }
.faq-answer p{ color:var(--text-2); font-size:15px; line-height:1.6; }

/* ─────────────────────────── Schluss ─────────────────────────── */

.closer{
  padding:clamp(88px,12vw,148px) 0;
  text-align:center;
}
.closer-mark{
  width:56px; height:56px; color:var(--signal); margin:0 auto 40px;
}
.closer .lead{ margin:26px auto 0; max-width:44ch; }
.closer .btn{ margin-top:40px; }

/* ─────────────────────────── Footer ─────────────────────────── */

.foot{ padding:8px 0 32px; }
.foot-inner{
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start;
}
.foot .lockup{ font-size:17px; }
.foot-line{ margin-top:14px; color:var(--text-3); font-size:14px; }
.foot-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.foot-nav a{ font-size:14px; color:var(--text-2); }
.foot-nav a:hover{ color:var(--text-1); }
.foot-legal{
  grid-column:1 / -1; margin-top:18px;
  font-size:13px; color:var(--text-3);
}

/* ─────────────────────────── Akzentpunkt ───────────────────────────
   Der grüne Punkt steht nur auf der ersten und der letzten Überschrift.
   Das ist Absicht: die Guidelines reservieren Signal Green für Aktion
   und aktiven Zustand. Zwei Punkte lesen sich als Signatur, zehn als
   Dekoration, und dann trägt die einzige grüne Schaltfläche weniger.

   Soll er überall stehen, im HTML die Punkte der übrigen Überschriften
   ebenfalls in <span class="accent-dot">.</span> setzen.
   Soll er ganz weg, hier auf `color:inherit` stellen.               */

.accent-dot{ color:var(--signal); }

/* ─────────────────────────── App-Store-Badge ───────────────────────────
   Apples Marketing-Richtlinien: das Badge wird nicht verändert, nicht
   eingefärbt, nicht gedreht und nicht beschnitten. Mindesthöhe im Web
   40 px, freier Raum ringsum mindestens ein Viertel der Badge-Höhe.
   Deshalb feste Höhe und ein Abstand, der nie unter 12 px fällt.
   https://developer.apple.com/app-store/marketing/guidelines/          */

.badge{
  display:inline-block;
  border-radius:8px;
  transition:opacity .2s ease;
}
.badge:hover{ opacity:.85; }
.badge img{ height:48px; width:auto; }

/* Hinweis auf Android, bewusst neutral: keine zweite Primäraktion */
.soon{
  display:inline-flex; align-items:center;
  height:32px; padding:0 14px;
  border:1px solid var(--hairline); border-radius:999px;
  font-family:var(--mono); font-size:12px; color:var(--text-3);
  white-space:nowrap;
}

/* ─────────────────────────── Kleine Verweise ─────────────────────────── */

.icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  color:var(--text-3);
  transition:color .2s ease, background .2s ease;
}
.icon-link svg{ width:19px; height:19px; }
.icon-link:hover{ color:var(--text-1); background:var(--surface-1); }

.inline-link{
  color:var(--text-1);
  border-bottom:1px solid var(--hairline);
  transition:border-color .2s ease;
}
.inline-link:hover{ border-bottom-color:var(--text-3); }

.btn-icon{ width:18px; height:18px; }

/* ─────────────────────────── Instagram ─────────────────────────── */

.insta-grid{
  margin-top:clamp(40px,6vw,64px);
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
}
.insta-grid[hidden]{ display:none; }
.insta-tile{ display:block; }
.insta-tile .ph{
  aspect-ratio:1/1; min-height:0;
  border-radius:12px;
  transition:border-color .2s ease;
}
.insta-tile:hover .ph{ border-color:var(--text-3); }
.insta-tile .ph-inner{ padding:10px; }
.insta-follow{ margin-top:32px; }

/* ─────────────────────────── Testphase ─────────────────────────── */

.tier-trial{ background:var(--surface-2); border-color:var(--signal-tint); }

/* ─────────────────────────── Schluss und Footer ─────────────────────────── */

.closer-actions{
  margin-top:44px;
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap;
}
.foot-right{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
/* Der Tippbereich ist größer als das Zeichen, deshalb links zurückziehen,
   damit das Symbol mit dem Text darüber auf einer Kante steht. */
.foot-social{ display:flex; gap:4px; margin-left:-10px; }

/* ─────────────────────────── Rechtliche Seiten ─────────────────────────── */

.legal{ padding:clamp(140px,20vh,200px) 0 clamp(96px,12vw,160px); }
.legal-inner{ max-width:70ch; }
.legal h1{
  font-size:clamp(34px,5vw,56px); font-weight:700;
  line-height:1.05; letter-spacing:-.03em; margin:22px 0 0;
}
.legal h2{
  font-size:clamp(20px,2.2vw,24px); font-weight:600;
  letter-spacing:-.015em; margin:48px 0 0;
}
.legal p{ margin-top:16px; color:var(--text-2); }
.legal-list{
  margin-top:16px; padding-left:1.2em;
  list-style:disc; color:var(--text-2);
}
.legal-list li{ margin-top:6px; }
.legal-stand{ margin-top:48px; color:var(--text-3); font-size:14px; }
.legal .placeholder-note{
  margin-top:40px;
  border:1px dashed var(--hairline); border-radius:var(--r);
  padding:clamp(22px,3vw,32px);
  color:var(--text-3); font-size:15px;
}
.legal-back{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:56px; color:var(--text-2); font-size:15px;
}
.legal-back:hover{ color:var(--text-1); }

/* ─────────────────────────── Scroll-Reveal ─────────────────────────── */

.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ─────────────────────────── Responsive ─────────────────────────── */

@media (max-width: 1080px){
  .obr{ display:none; }
  .split{ grid-template-columns:minmax(0,1fr); gap:48px; }
  .split-narrow{ grid-template-columns:minmax(0,1fr); }
  .split-rev{ margin-top:clamp(56px,9vw,88px); }
  .split-rev .split-media{ order:0; }
  .split-copy p, .lead, .story p{ max-width:60ch; }
  /* Einspaltig nimmt die Medienspalte die volle Breite; was darin liegt,
     zentriert sich selbst (margin-inline:auto bei .shot und .phone). Mit
     justify-self:start schrumpfte die Spalte auf die Bildbreite, und
     Gerät wie Screenshot klebten am linken Rand. */
  .split-media{ justify-self:stretch; }
  /* Gleiche Größe wie die gerahmten Screenshots (.shot-phone). */
  .phone{ width:min(300px, 78vw); }
}

@media (max-width: 940px){
  .nav-links{ display:none; }
  /* Ohne die Verweise fehlt der Abstandhalter. Den übernimmt jetzt der
     Sprachumschalter, er steht als erstes Element rechts vom Zeichen. */
  .nav-inner .langpick{ margin-left:auto; }
  .insta-grid{ grid-template-columns:repeat(3,1fr); }
  .codec{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .tiers{ grid-template-columns:1fr; }
  .testimonials{ grid-template-columns:1fr; }
  .sec-split .split .split-media{ order:0; }
}

@media (max-width: 620px){
  body{ font-size:16px; }
  .hero{ padding-top:120px; }
  .companion-pair{ flex-direction:column; }
  .link-viz{ flex-direction:column; }
  .foot-inner{ grid-template-columns:1fr; }
  .hero-actions{ gap:18px; }
  .hero-actions .btn-primary,
  .closer .btn{ width:100%; }
  .shot-pad{ max-width:min(440px, 88vw); }
  .shot-phone-sm{ max-width:min(260px, 62vw); }
  .nots li{ font-size:14px; padding:8px 14px; }
  /* Die 16:9-Bühne ist auf dem Telefon flach - Platzhaltertext kürzen,
     damit er nicht in die Anzeige darunter läuft. */
  .stage-frame .ph-note{ display:none; }
  .stage-frame .ph-inner{ gap:6px; padding-bottom:44px; }
  .strip{ height:22px; }
  .claims{ gap:14px 24px; }
  .scroll-hint{ display:block; }
  .insta-grid{ grid-template-columns:repeat(2,1fr); }
  .badge img{ height:44px; }
  .hero-actions{ gap:16px; }
  .closer-actions{ gap:14px; }
  .foot-right{ align-items:flex-start; flex-direction:column; gap:10px; }
}