/* ═══════════════════════════════════════════════════════════════
   WearSync — Produktseite
   Zwei vollwertige Darstellungen: hell (Standard) und dunkel —
   das System entscheidet, der Schalter in der Leiste übersteuert.
   Farbwelt der Galaxy Watch 7: Orange vom Zifferblatt, Grün für
   „verbunden", Uhr-Blau als technischer Akzent.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ── Farbsystem ─────────────────────────────────────────────── */

:root {
  /* Hell */
  --bg: #f6f6f4;
  --bg-2: #fdfdfc;
  --card: #ffffff;
  --card-2: #ffffff;
  --line: rgba(18, 20, 26, 0.1);
  --line-soft: rgba(18, 20, 26, 0.065);
  --text: #16181d;
  --muted: #555d6b;
  --faint: #878e9b;
  --orange: #e85c17;
  --orange-bright: #f96a28;
  --orange-soft: rgba(232, 92, 23, 0.1);
  --green: #1e9e4a;
  --blue: #146e9e;
  --nav-bg: rgba(246, 246, 244, 0.72);
  --nav-bg-solid: rgba(246, 246, 244, 0.96);
  --hero-glow-a: rgba(249, 106, 40, 0.16);
  --hero-glow-b: rgba(20, 110, 158, 0.08);
  --device-shadow: 0 34px 70px -24px rgba(24, 28, 38, 0.42), 0 10px 26px -12px rgba(24, 28, 38, 0.22);
  --watch-shadow: drop-shadow(0 30px 44px rgba(24, 28, 38, 0.38));
  --card-shadow: 0 1px 2px rgba(18, 20, 26, 0.04), 0 12px 32px -18px rgba(18, 20, 26, 0.14);
  --frame-a: #e8e9ea; --frame-b: #b9bcc0; --frame-c: #8f9398; --frame-d: #d6d8da;
  --glare-o: 0.28;
  --spot: rgba(232, 92, 23, 0.05);
  --pro-bg: radial-gradient(70% 55% at 22% 0%, rgba(249, 106, 40, 0.1), transparent 60%), linear-gradient(180deg, #fff7f2, #ffffff 55%);
  --pro-line: rgba(232, 92, 23, 0.22);
  --grid: rgba(18, 20, 26, 0.055);
  --font-display: "Bricolage", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --radius: 22px;
  --wrap: 1160px;
  color-scheme: light;
}

/* Dunkel — per System … */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08090b;
    --bg-2: #0d0d0f;
    --card: #111214;
    --card-2: #16171a;
    --line: rgba(255, 255, 255, 0.08);
    --line-soft: rgba(255, 255, 255, 0.05);
    --text: #f2f4f8;
    --muted: #9aa2af;
    --faint: #6b7280;
    --orange: #f0793f;
    --orange-bright: #f98d5c;
    --orange-soft: rgba(240, 121, 63, 0.1);
    --green: #34c759;
    --blue: #7fd4ff;
    --nav-bg: rgba(8, 9, 11, 0.62);
    --nav-bg-solid: rgba(8, 9, 11, 0.95);
    --hero-glow-a: rgba(240, 121, 63, 0.06);
    --hero-glow-b: rgba(127, 212, 255, 0.03);
    --device-shadow: 0 34px 74px -22px rgba(0, 0, 0, 0.85), 0 8px 26px -10px rgba(0, 0, 0, 0.6);
    --watch-shadow: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.65));
    --card-shadow: none;
    --frame-a: #4a4d53; --frame-b: #26282c; --frame-c: #101114; --frame-d: #35383d;
    --glare-o: 0.1;
    --spot: rgba(240, 121, 63, 0.035);
    --pro-bg: radial-gradient(70% 55% at 22% 0%, rgba(240, 121, 63, 0.08), transparent 60%), linear-gradient(180deg, #131110, #0c0c0e 55%);
    --pro-line: rgba(240, 121, 63, 0.14);
    --grid: rgba(255, 255, 255, 0.016);
    color-scheme: dark;
  }
}

/* … und per Schalter erzwungen. Gleiche Werte wie oben — bewusst doppelt,
   CSS kann einen Variablensatz nicht referenzieren. */
:root[data-theme="dark"] {
  --bg: #08090b;
  --bg-2: #0d0d0f;
  --card: #111214;
  --card-2: #16171a;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --text: #f2f4f8;
  --muted: #9aa2af;
  --faint: #6b7280;
  --orange: #f0793f;
  --orange-bright: #f98d5c;
  --orange-soft: rgba(240, 121, 63, 0.1);
  --green: #34c759;
  --blue: #7fd4ff;
  --nav-bg: rgba(8, 9, 11, 0.62);
  --nav-bg-solid: rgba(8, 9, 11, 0.95);
  --hero-glow-a: rgba(240, 121, 63, 0.06);
  --hero-glow-b: rgba(127, 212, 255, 0.03);
  --device-shadow: 0 34px 74px -22px rgba(0, 0, 0, 0.85), 0 8px 26px -10px rgba(0, 0, 0, 0.6);
  --watch-shadow: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.65));
  --card-shadow: none;
  --frame-a: #4a4d53; --frame-b: #26282c; --frame-c: #101114; --frame-d: #35383d;
  --glare-o: 0.1;
  --spot: rgba(240, 121, 63, 0.035);
  --pro-bg: radial-gradient(70% 55% at 22% 0%, rgba(240, 121, 63, 0.08), transparent 60%), linear-gradient(180deg, #131110, #0c0c0e 55%);
  --pro-line: rgba(240, 121, 63, 0.14);
  --grid: rgba(255, 255, 255, 0.016);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  transition: background 0.45s ease, color 0.45s ease;
}

/* ── Das Blatt, auf dem alles steht ─────────────────────────────
   Eine technische Zeichnung hat ein Raster und Randlinien. Genau das
   fehlte hier: Ohne Bezugsystem liest sich jede leere Fläche als Loch
   statt als Weißraum. Beides liegt fest hinter dem Inhalt, kostet kein
   Layout und fängt keine Klicks. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  /* Zur Mitte hin klar, zu den Rändern hin weg — sonst tapeziert es. */
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 78%);
}
/* Zwei senkrechte Randlinien auf der Breite der Inhaltsspalte. */
.sheet i {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-soft);
}
.sheet i:first-child { left: max(24px, calc(50% - var(--wrap) / 2)); }
.sheet i:last-child { right: max(24px, calc(50% - var(--wrap) / 2)); }
@media (max-width: 900px) { .sheet i { display: none; } }

/* Alles Sichtbare liegt über dem Blatt. */
.nav, main, .footer { position: relative; z-index: 1; }

/* `height: auto` ist hier nicht kosmetisch, sondern Pflicht: Die Bilder tragen
   `width`/`height`-Attribute (gut gegen Umbrüche beim Laden). Setzt CSS dann
   die Breite, bleibt die Höhe auf dem Attributwert stehen — ein 828 × 1799
   großes Bildschirmfoto wurde so 228 px breit und volle 1799 px hoch. Genau
   daran zerriss die Galerie. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }

::selection { background: rgba(249, 106, 40, 0.3); }

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

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

/* Der Sprung zwischen Aussage und Fließtext trägt die Hierarchie — eine
   flache Skala liest sich wie eine Vorlage, egal wie gut die Schrift ist. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 640;
  letter-spacing: -0.032em;
  line-height: 0.98;
  text-wrap: balance;
}

h1 { font-size: clamp(3rem, 7.6vw, 5.4rem); }
h1 em { font-style: normal; color: var(--orange); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }

h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.14rem;
  letter-spacing: -0.014em;
  line-height: 1.25;
}

/* Zahlen in Messwerten laufen tabellarisch — sonst zappelt der Puls. */
.hr-value, .steps-value, .island-batt { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 1rem;
  text-wrap: balance;
}
/* Die Akzentfarben stehen nur noch dort, wo sie etwas bedeuten — sonst wird
   aus einer Marke ein Farbkasten. */
.eyebrow-orange { color: var(--orange); }
.eyebrow-green { color: var(--green); }

/* ── Abschnittskopf: editoriale Marginalspalte ──────────────────
   Statt siebenmal derselben Folge aus Zeile, Überschrift und Absatz
   bekommt jeder Abschnitt eine laufende Nummer und ein Etikett in der
   Randspalte, die Aussage steht rechts daneben. Die Zählung erledigt CSS,
   damit sie beim Umsortieren nicht von Hand nachgeführt werden muss. */
main { counter-reset: sec; }

.section-head {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.6rem 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  column-gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: start;
  position: relative;
  counter-increment: sec;
}
/* Haarlinie über der ganzen Breite — die Kante, die einen Abschnitt beginnt. */
.section-head::before {
  content: "";
  position: absolute;
  inset: 0 24px auto;
  height: 1px;
  background: var(--line);
}
.section-head .eyebrow {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  padding-top: 0.55rem;
  line-height: 1.45;
}
.section-head .eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 0.55rem;
  font-variant-numeric: tabular-nums;
}
.section-head h2 { grid-column: 2; grid-row: 1; }
.section-head .section-sub { grid-column: 2; grid-row: 2; }

.section-sub {
  color: var(--muted);
  margin-top: 1rem;
  max-width: 32rem;
  font-size: 1.02rem;
}

@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; row-gap: 0; }
  .section-head .eyebrow { grid-row: 1; margin-bottom: 0.9rem; padding-top: 0; }
  .section-head .eyebrow::before { display: inline; font-size: inherit; margin-right: 0.6rem; }
  .section-head h2 { grid-column: 1; grid-row: 2; }
  .section-head .section-sub { grid-column: 1; grid-row: 3; }
}

.text-link { color: var(--orange); font-weight: 500; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Scroll-Reveals ─────────────────────────────────────────── */

/* CSS setzt nur den Ausgangszustand — bewegt wird mit Motion und Anime.js,
   die dafür Federn statt fester Kurven benutzen. Die Klasse `anim` kommt
   erst, wenn das Modul wirklich läuft: Bleibt es aus, ist nichts versteckt. */
html.anim .reveal { opacity: 0; }
html.anim .rise { opacity: 0; }
html.anim .device-in { opacity: 0; }
html.anim .link-waves { opacity: 0; }

/* Die zerlegte Überschrift. Anime.js v4 kennzeichnet die Teile über
   `data-word`/`data-char`, **nicht** über Klassen — und legt daneben eine
   unsichtbare Fassung des ganzen Satzes für Screenreader ab. Das `nowrap` auf
   den Wörtern ist die Rückversicherung gegen Umbrüche mitten im Wort. */
h1 .hl [data-word] { display: inline-block; white-space: nowrap; }
h1 .hl [data-char] { display: inline-block; will-change: transform, opacity, filter; }

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

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, background 0.4s;
}
/* Sobald gescrollt wird, deckt die Leiste richtig ab. Bei halbdurchsichtigem
   Grund schimmert der Inhalt darunter durch und jede Überschrift, die gerade
   vorbeizieht, sieht abgeschnitten und verschmiert aus — das liest sich als
   Darstellungsfehler, nicht als Glas. */
.nav.scrolled {
  border-color: var(--line);
  background: var(--nav-bg-solid);
}

/* Sprungmarken dürfen nicht unter der Leiste landen. */
main > section { scroll-margin-top: 84px; }

/* Lesefortschritt — die einzige Anzeige, die auf einer langen Seite wirklich
   etwas beantwortet: „wie viel kommt noch?" */
.nav-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-bright));
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity 0.4s;
}
.nav.scrolled .nav-progress { opacity: 1; }

.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.14rem;
  letter-spacing: -0.01em;
}
.brand img { border-radius: 22.37%; }

.nav-links { display: flex; gap: 1.35rem; margin-left: auto; }
.nav-links a {
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.25s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }
/* Der Abschnitt, in dem man gerade steht. */
.nav-links a.is-current { color: var(--text); }
.nav-links a.is-current::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 4px;
  background: var(--orange);
}

/* Schalter und Knopf bleiben zusammen — sonst steht der Schalter auf
   schmalen Fenstern, wo die Navigation entfällt, allein in der Mitte. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
  flex: 0 0 auto;
}
.nav-links ~ .nav-actions { margin-left: 0; }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.25s, border-color 0.25s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.4);
  flex: 0 0 auto;
}
.theme-toggle:hover { color: var(--text); border-color: var(--orange); transform: rotate(-14deg); }
.theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ic-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .ic-moon { display: block; }
}

.nav-cta {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  white-space: nowrap;
  transition: border-color 0.25s, background 0.25s;
}
.nav-cta:hover { border-color: var(--orange); background: var(--orange-soft); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
}

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

/* Der Hero füllt den Bildschirm und endet an der Instrumentenzeile — kein
   angeschnittener nächster Abschnitt, der die erste Wirkung zerteilt. */



h1 .hl { display: block; }

.lede {
  margin-top: 1.5rem;
  font-size: 1.13rem;
  color: var(--muted);
  max-width: 30rem;
  text-wrap: pretty;
}


.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.45rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: box-shadow 0.25s, background 0.25s, border-color 0.25s;
  will-change: transform;
}
/* Flach und satt statt Verlauf mit Glanzkante: Der Verlaufsknopf ist das
   erste, was an einer Vorlage auffällt. */
.btn-primary {
  background: var(--orange);
  color: #fff;
  cursor: default;
}
:root[data-theme="dark"] .btn-primary { color: #1a0a02; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: #1a0a02; }
}
.btn-ghost { border: 1px solid var(--line); color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--orange); }

/* ── Instrumentenzeile am Fuß des Heros ─────────────────────── */

.readout {
  max-width: var(--wrap);
  width: 100%;
  margin: clamp(2rem, 5vh, 3.6rem) auto 0;
  padding: 1rem 0 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 3vw, 2.4rem);
}
.readout dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--faint);
  margin-bottom: 0.3rem;
}
.readout dd {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.readout .live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent);
  animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 860px) {
  .readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bühne: iPhone + Wellen + Uhr */

/* Die Geräte messen sich an **ihrer Spalte**, nicht am Fenster. Mit
   `vw`-Maßen konnten sie zusammen breiter werden als der Platz, den sie
   haben — dann stand das iPhone halb außerhalb des Bildes. */

.link-waves {
  position: relative;
  width: 26px;
  height: 90px;
  flex: 0 0 auto;
  z-index: 3;
}
.link-waves svg {
  position: absolute;
  width: clamp(96px, 9vw, 128px);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -72%);
  overflow: visible;
}
.wave {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0.22;
  animation: wavePulse 2.6s infinite;
}
.wave.w2 { animation-delay: 0.35s; }
.wave.w3 { animation-delay: 0.7s; }
@keyframes wavePulse {
  0% { opacity: 0.2; }
  30% { opacity: 0.95; }
  70% { opacity: 0.2; }
  100% { opacity: 0.2; }
}
.packet { fill: var(--orange); opacity: 0.9; filter: drop-shadow(0 0 4px rgba(249, 106, 40, 0.9)); }

/* ── iPhone: Titanrahmen, Tasten, Insel, Glasreflex ─────────── */

.iphone {
  position: relative;
  width: min(232px, 24vw);
  flex: 0 0 auto;
  border-radius: 17.4% / 8.05%;
  padding: 1.1%;
  background: linear-gradient(145deg, var(--frame-a), var(--frame-b) 32%, var(--frame-c) 58%, var(--frame-d) 92%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    var(--device-shadow);
  z-index: 2;
  transform-style: preserve-3d;
}
/* Innenkante des Rahmens */
.iphone-frame {
  position: absolute;
  inset: 1.1%;
  border-radius: 16.6% / 7.6%;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.85), inset 0 0 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 3;
}
/* Tasten links (Lautstärke + Aktion) und rechts (Seitentaste) */
.iphone::before,
.iphone::after {
  content: "";
  position: absolute;
  width: 2.4%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--frame-b), var(--frame-d));
}
.iphone::before {
  left: -1.9%;
  top: 21%;
  height: 7.5%;
  box-shadow:
    0 calc(100% + 26%) 0 0 var(--frame-b),
    0 calc(200% + 62%) 0 0 var(--frame-b);
}
.iphone::after {
  right: -1.9%;
  top: 30%;
  height: 12%;
  background: linear-gradient(270deg, var(--frame-b), var(--frame-d));
}

.iphone-screen {
  position: relative;
  border-radius: 16% / 7.4%;
  overflow: hidden;
  background: #000;
  aspect-ratio: 1320 / 2868;
}
.iphone-screen video,
.iphone-screen img { width: 100%; height: 100%; object-fit: cover; }

/* Bei „Bewegung reduzieren" laufen die Videos nicht von selbst. Statt der
   Systemsteuerung — die quer über dem Bildschirm liegt und die Illusion des
   Geräts zerstört — erscheint dieser Knopf. */
.video-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
}
.video-play span {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Dynamic Island — liegt über der Statusleiste der Aufnahme */
.island {
  position: absolute;
  top: 2.2%;
  left: 50%;
  translate: -50%;
  width: 27%;
  height: 3.4%;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}
/* Glasreflex */
.glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, var(--glare-o)) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 88% 0;
  mix-blend-mode: screen;
  transition: background-position 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.tilt:hover .glare { background-position: 12% 0; }

.iphone-side { width: min(288px, 74vw); }

/* ── Galaxy Watch: Produktfoto + lebendes Display ───────────── */

.watch {
  position: relative;
  flex: 0 0 auto;
  filter: var(--watch-shadow);
}
.watch-hero { width: min(266px, 27vw); z-index: 2; translate: 0 7%; }
.watch-big { width: min(430px, 86vw); margin: 0 auto; }

/* Auftritt der großen Uhr: sanft von unten eingleiten.
   Hier stand eine 3D-Drehung (rotateY/rotateX aus der Schräge) — auf einem
   flachen Produktfoto wirkte sie wie ein misslungenes 3D-Modell und ist auf
   ausdrücklichen Wunsch raus. Die Uhr ist ein Foto, also bewegt sie sich wie
   eines: Weg und Deckkraft, sonst nichts. */
html.anim .watch-big {
  transform: translateY(46px) scale(0.985);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
}
html.anim .watch-big.in-view { transform: none; opacity: 1; }

.watch-body { width: 100%; user-select: none; -webkit-user-drag: none; }

/* Kreisrunder Ausschnitt überm Zifferblatt des Fotos — pixelkalibriert
   auf GalaxyWatch.png (581 × 960): Mitte 49.9 % / 49.4 %, Ø 85 %. */
.watch-screen {
  position: absolute;
  left: 49.9%;
  top: 49.4%;
  width: 85%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  container-type: size;
}

.watch-glass {
  position: absolute;
  left: 49.9%;
  top: 49.4%;
  width: 85%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 32% 20%, rgba(255, 255, 255, 0.1), transparent 62%),
    radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.5) 96%);
  box-shadow: inset 0 0 2cqw rgba(0, 0, 0, 0.8);
}

/* Szenenwechsel */
/* Szenenwechsel **ohne Überlappung**. Zwei übereinanderliegende Szenen, die
   gleichzeitig über eine halbe Sekunde ein- und ausblenden, zeigen in dieser
   Zeit beide Texte übereinander — auf dem Zifferblatt stand dann „09:41"
   mitten in „Mara". Deshalb: Die abgehende Szene geht zügig auf null, die
   ankommende startet erst danach. */
.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.24s ease, transform 0.4s ease;
  pointer-events: none;
}
.scene.is-on {
  opacity: 1;
  transform: none;
  transition: opacity 0.34s ease 0.24s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}

/* Zifferblatt */
.wface { text-align: center; line-height: 1.25; color: #fff; }
.wface-status {
  display: inline-flex;
  align-items: center;
  gap: 3.4cqw;
  font-size: 5.6cqw;
  color: #9aa5b1;
}
.wface-status .dot {
  width: 3.4cqw; height: 3.4cqw;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 8cqw 1cqw rgba(52, 199, 89, 0.55);
}
.wface-time {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 27cqw;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-top: 2cqw;
}
.wface-date { font-size: 6.4cqw; color: #9aa5b1; }
.wface-metrics {
  display: flex;
  justify-content: center;
  gap: 7cqw;
  margin-top: 6.5cqw;
  font-size: 6.2cqw;
  font-weight: 600;
}
.wface-metrics .m { display: inline-flex; align-items: center; gap: 2cqw; }
.wface-metrics svg { width: 6.6cqw; height: 6.6cqw; }
.wface-metrics b { font-weight: 600; font-variant-numeric: tabular-nums; }
.m.steps { color: #7ce0a9; }
.m.heart { color: #ff7b7b; }
.m.batt { color: #aab4bf; }

/* Mitteilung */
.wnotif { width: 78%; text-align: center; color: #fff; }
.wnotif-app {
  display: inline-flex;
  align-items: center;
  gap: 2.6cqw;
  font-size: 5.4cqw;
  color: #9aa5b1;
}
.wnotif-icon {
  display: grid;
  place-items: center;
  width: 9.5cqw; height: 9.5cqw;
  border-radius: 50%;
  background: linear-gradient(180deg, #63e07a, #23a83e);
  color: #fff;
}
.wnotif-icon svg { width: 5.8cqw; height: 5.8cqw; }
.wnotif-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5cqw;
  margin-top: 4.5cqw;
}
.wnotif-text { font-size: 7cqw; color: #d6dae1; margin-top: 1.5cqw; }
.wnotif-hint {
  margin-top: 6cqw;
  font-size: 4.8cqw;
  color: #6d7683;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.scene.is-on .wnotif { animation: notifIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1.15); }
@keyframes notifIn {
  from { opacity: 0; transform: translateY(16cqw) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* Anruf — Farben und Puls wie IncomingCallActivity.kt */
.scene-call { background: linear-gradient(180deg, #0b2718, #000 55%); }
.wcall { text-align: center; color: #fff; }
.wcall-avatar-wrap { position: relative; display: inline-grid; place-items: center; }
.wcall-ring {
  position: absolute;
  width: 24cqw; height: 24cqw;
  border-radius: 50%;
  border: 0.8cqw solid rgba(52, 199, 89, 0.85);
  animation: callRing 1.1s linear infinite;
}
@keyframes callRing {
  from { transform: scale(1); opacity: 0.5; }
  to { transform: scale(1.55); opacity: 0; }
}
.wcall-avatar {
  display: grid;
  place-items: center;
  width: 24cqw; height: 24cqw;
  border-radius: 50%;
  background: #17281f;
  color: #7ce0a9;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 11cqw;
}
.wcall-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9.6cqw;
  margin-top: 4cqw;
}
.wcall-kind { font-size: 5.6cqw; color: #9aa5b1; margin-top: 0.5cqw; }
.wcall-actions {
  display: flex;
  justify-content: center;
  gap: 12cqw;
  margin-top: 7cqw;
}
.wcall-btn {
  display: grid;
  place-items: center;
  width: 16cqw; height: 16cqw;
  border-radius: 50%;
  color: #fff;
}
.wcall-btn svg { width: 8cqw; height: 8cqw; }
.wcall-btn.accept { background: #34c759; animation: wiggle 1.6s ease-in-out infinite; }
.wcall-btn.decline { background: #ff3b30; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(-10deg); }
  24% { transform: rotate(8deg); }
  36% { transform: rotate(-6deg); }
  48% { transform: rotate(0); }
}

/* Musik — Cover-Schleier wie TrackColors.kt */
.wmusic { position: relative; width: 100%; height: 100%; display: grid; place-content: center; text-align: center; color: #fff; }
.wmusic-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 60% at 30% 18%, rgba(214, 93, 177, 0.5), transparent 65%),
    radial-gradient(70% 60% at 75% 80%, rgba(255, 122, 60, 0.42), transparent 60%),
    radial-gradient(90% 90% at 50% 50%, rgba(38, 12, 48, 0.7), #000 100%);
}
.wmusic > *:not(.wmusic-veil) { position: relative; }
.wmusic-title { font-family: var(--font-display); font-weight: 620; font-size: 8.8cqw; }
.wmusic-artist { font-size: 6cqw; color: rgba(255, 255, 255, 0.6); margin-top: 0.6cqw; }
.wmusic-bar {
  width: 56cqw;
  height: 1.6cqw;
  margin: 6.5cqw auto 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.wmusic-bar span {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: #fff;
  animation: musicBar 16s linear infinite;
}
@keyframes musicBar { from { width: 14%; } to { width: 92%; } }
.wmusic-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9cqw;
  margin-top: 6cqw;
  color: #fff;
}
.wmusic-controls svg { width: 8cqw; height: 8cqw; opacity: 0.85; }
.wmusic-controls .play { width: 11.5cqw; height: 11.5cqw; opacity: 1; }

/* Kamera-Sucher — CameraStream in Uhr-Fassung */
.wcam { position: absolute; inset: 0; }
.wcam-view {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #2b3f63 0%, #6a5a86 34%, #c97b52 52%, #e9a05e 60%, #23283a 61%, #171a26 100%);
}
.wcam-view::before {
  content: "";
  position: absolute;
  left: 30%; top: 44%;
  width: 13cqw; height: 13cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe9c4, #f7b95e 70%);
  box-shadow: 0 0 14cqw 4cqw rgba(247, 185, 94, 0.55);
}
.wcam-view::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(0, 0, 0, 0.45), transparent 50%),
    linear-gradient(175deg, transparent 46%, #10131d 47%, #0c0f17 100%);
}
.wcam-grid {
  position: absolute;
  inset: 12% 8%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px) 0 0 / 100% 33.4%,
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px) 0 0 / 33.4% 100%;
  mask: radial-gradient(circle, #000 62%, transparent 72%);
}
.wcam-top {
  position: absolute;
  top: 8%;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 3cqw;
}
.wcam-chip {
  font-size: 4.6cqw;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 99px;
  padding: 0.8cqw 3.2cqw;
  backdrop-filter: blur(2px);
}
.wcam-focus {
  position: absolute;
  left: 24%; top: 34%;
  width: 26cqw; height: 26cqw;
  border: 0.7cqw solid rgba(255, 214, 90, 0.95);
  border-radius: 3cqw;
  mask: conic-gradient(#000 0 12%, transparent 0 22%, #000 0 37%, transparent 0 47%, #000 0 62%, transparent 0 72%, #000 0 87%, transparent 0 97%, #000 0);
  animation: focusPulse 2.8s ease-in-out infinite;
}
@keyframes focusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.75; }
}
.wcam-shutter {
  position: absolute;
  left: 50%;
  bottom: 7%;
  translate: -50%;
  width: 15cqw; height: 15cqw;
  border-radius: 50%;
  border: 1cqw solid #fff;
  display: grid;
  place-items: center;
  background: none;
  cursor: default;
}
.wcam-shutter span {
  width: 10.5cqw; height: 10.5cqw;
  border-radius: 50%;
  background: #fff;
  animation: shutterPulse 2.8s ease-in-out infinite;
}
@keyframes shutterPulse {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(0.82); }
  16% { transform: scale(1); }
}

/* ── „Wie" ──────────────────────────────────────────────────── */

.how { padding: clamp(44px, 6vh, 72px) 24px; border-top: 1px solid var(--line-soft); }
.how-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
}
.how-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--orange);
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--pro-line);
  margin-bottom: 0.9rem;
}
.how-step h3 { margin-bottom: 0.45rem; }
.how-step p { color: var(--muted); font-size: 0.96rem; }

/* ── Bühne: Auf der Uhr ─────────────────────────────────────── */

.stage-section { padding: clamp(58px, 7.5vh, 96px) 0 clamp(36px, 5vh, 64px); }

.stage-grid {
  max-width: var(--wrap);
  margin: clamp(2rem, 5vh, 4rem) auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.stage-copy { display: flex; flex-direction: column; gap: 0.6rem; }

.scene-tab {
  position: relative;
  padding: 1.05rem 1.2rem;
  border-radius: 18px;
  border: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, opacity 0.35s;
  opacity: 0.55;
  overflow: hidden;
}
.scene-tab:hover { opacity: 0.85; }
.scene-tab.is-active {
  opacity: 1;
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}
.scene-tab h3 { margin-bottom: 0.3rem; }
.scene-tab p { color: var(--muted); font-size: 0.94rem; }

/* Laufbalken der aktiven Szene */
.tab-progress {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
}
.scene-tab.is-active .tab-progress { animation: tabRun var(--scene-ms, 5200ms) linear forwards; }
@keyframes tabRun { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.stage-watch { text-align: center; perspective: 1300px; }
.stage-note {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  color: var(--faint);
}

/* ── 3D-Bühne (WebGL) + Uhrenfamilie ────────────────────────── */

.hardware {
  padding: clamp(58px, 7.5vh, 96px) 24px clamp(44px, 6vh, 72px);
  border-top: 1px solid var(--line-soft);
}

.hw-stage-wrap { position: relative; margin-top: clamp(1.5rem, 3vh, 2.5rem); }
.hw-stage {
  position: relative;
  /* Nicht mehr 16:9 — ein hochformatiges Telefon in einem Breitbild lässt
     links und rechts zwangsläufig Leere. */
  aspect-ratio: 3 / 2;
  width: min(880px, 100%);
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.hw-stage::before {
  content: "";
  position: absolute;
  inset: 12% 6% 8%;
  background: radial-gradient(50% 50% at 50% 55%, var(--hero-glow-a), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}
/* Quelle der Bildschirmtextur: muss abspielen dürfen, also nicht
   display:none — Browser pausieren versteckte Videos. */
.stage-video-src {
  position: absolute;
  width: 2px; height: 2px;
  opacity: 0;
  pointer-events: none;
  left: -10px; top: -10px;
}

.hw-points {
  list-style: none;
  max-width: var(--wrap);
  margin: clamp(1.4rem, 3vh, 2.4rem) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 2rem;
}
.hw-points li {
  position: relative;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.93rem;
}
.hw-points b { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.25rem; }

/* Vier feste Spalten waren auf dem Handy 88 px breit — daran riss die ganze
   Seite waagerecht auf. `auto-fit` mit Mindestbreite bricht von selbst um. */
@media (max-width: 900px) {
  .hw-points { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
/* Absolut füllend: Three.js schreibt die Puffergröße in die width/height-
   Attribute des Canvas. Stünde es im Fluss, machte es aus der quadratischen
   Bühne einen Turm in Höhe des Pixelpuffers. */
.hw-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  /* Auf hellem Grund fehlt der Uhr sonst der Boden — der Schatten greift auf
     den Alphakanal des gerenderten Bildes zu, nicht auf ein Rechteck. */
  filter: drop-shadow(0 26px 30px rgba(20, 24, 32, 0.3));
}
:root[data-theme="dark"] .hw-stage canvas { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.6)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hw-stage canvas { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.6)); }
}
/* Höhe begrenzen, sonst zieht das hochformatige Foto die 16:9-Bühne auf. */
.hw-fallback {
  position: relative;
  width: auto;
  max-width: 34%;
  max-height: 84%;
  object-fit: contain;
}
.hw-stage.is-3d .hw-fallback { display: none; }

.hw-hint {
  text-align: center;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.hw-hint[hidden] { display: none; }

.family {
  max-width: var(--wrap);
  margin: clamp(3rem, 7vh, 5rem) auto 0;
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.family-lead { color: var(--muted); max-width: 40rem; margin: 0 auto; }
.family-lead b { color: var(--text); }
.family-strip {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 2.4vw, 2.2rem);
  margin: 2rem 0 1.4rem;
}
.family-strip li {
  width: auto;
  min-width: 62px;
  text-align: center;
  opacity: 0.55;
  filter: grayscale(0.55);
  transition: opacity 0.35s, filter 0.35s, transform 0.35s;
}
.family-strip li:hover { opacity: 1; filter: none; transform: translateY(-5px); }
.family-strip li.is-tested { opacity: 1; filter: none; }
.family-strip li.is-tested span { color: var(--orange); }
/* Über die **Höhe** vereinheitlicht, Breite frei: Die Ultra ist als einzige
   quer aufgenommen (520 × 377 statt hochkant). Zwingt man alle in dieselbe
   Zellenbreite, schrumpft sie auf zwei Drittel der Höhe der anderen und
   wirkt wie ein Fehler. */
.family-strip img {
  width: auto;
  height: clamp(74px, 8.5vw, 98px);
  object-fit: contain;
}
.family-strip span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.family-note { font-size: 0.84rem; color: var(--faint); max-width: 38rem; margin: 0 auto; }

/* ── Kostenlos-Grid ─────────────────────────────────────────── */

/* Sieben gleich große Karten in einem symmetrischen Raster sind der
   deutlichste Vorlagen-Verräter überhaupt. Stattdessen eine gesetzte Liste:
   Haarlinie, Marginalspalte mit Piktogramm, Aussage, Erklärung. Das liest
   sich wie ein Datenblatt eines Herstellers — und genau das ist gemeint. */
.free { padding: clamp(58px, 7.5vh, 96px) 24px; }
.free-grid {
  max-width: var(--wrap);
  margin: clamp(2.4rem, 5vh, 3.6rem) auto 0;
  border-bottom: 1px solid var(--line-soft);
}
/* Eine Spalte, drei Felder je Zeile: Piktogramm, Aussage, Erklärung. Alle
   Zeilen gleich gebaut — dadurch stehen Titel und Text über die ganze Liste
   auf derselben Kante. Ein zweispaltiges Raster ließ die Zeilen gegeneinander
   verrutschen, weil die Texte unterschiedlich hoch sind. */
.card {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 2.4rem);
  align-items: start;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line-soft);
  transition: border-color 0.4s;
}
.card:hover { border-color: color-mix(in srgb, var(--orange) 45%, transparent); }

.card-icon {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  color: var(--tint, var(--blue));
  background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint, var(--blue)) 34%, transparent);
  transition: background 0.4s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.4);
}
.card:hover .card-icon {
  background: color-mix(in srgb, var(--tint, var(--blue)) 13%, transparent);
  transform: scale(1.06);
}
.card-icon svg { width: 19px; height: 19px; }
.card h3 { align-self: center; padding-top: 0.15rem; }
.card p { color: var(--muted); font-size: 0.94rem; max-width: 34rem; padding-top: 0.2rem; }

@media (max-width: 860px) {
  .card { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: 0.4rem; }
  .card h3 { grid-column: 2; align-self: start; padding-top: 0.35rem; }
  .card p { grid-column: 2; padding-top: 0; }
}

/* ── Dynamic Island: die Live Activity zum Anfassen ─────────── */

/* In der gesetzten Liste sitzt die Insel unter ihrer Erklärung. */
.card-island .island { grid-column: 3; max-width: 300px; }
@media (max-width: 860px) { .card-island .island { grid-column: 2; } }
.island {
  position: relative;
  margin-top: 1.2rem;
  height: 104px;
  border-radius: 18px;
  background: linear-gradient(170deg, #23262d, #101216 70%);
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Angedeutete Statusleiste, damit die Insel als iPhone-Kopf lesbar wird. */
.island::before {
  content: "9:41";
  position: absolute;
  top: 9px; left: 16px;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
/* Feste Pixelmaße statt Prozent: Die Insel hat einen festen Inhalt (Bild,
   zwei Zeilen, Ring). Bei prozentualer Breite hing ihre Größe an der Spalte,
   und sobald die schmaler wurde, brach der Text aus dem schwarzen Feld aus. */
.island-shell {
  width: 126px;
  height: 30px;
  border-radius: 18px;
  background: #000;
  position: relative;
  display: grid;
  place-items: center;
  margin-top: -14px;
  overflow: hidden;
}
.island-compact {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
}
.island-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.9);
}
.island-expanded {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.85rem;
  opacity: 0;
  pointer-events: none;
  /* Der Inhalt hat die Maße der **geöffneten** Insel, auch solange sie noch
     geschlossen ist — sonst quetscht ihn die 126 px schmale Hülle zusammen
     und er springt beim Öffnen. */
  width: 268px;
}
.island-expanded img { flex: 0 0 auto; }
.island-text { flex: 1 1 auto; line-height: 1.3; min-width: 0; }
/* Beide Zeilen einzeilig: Umbrüche sprengen die feste Höhe der Insel. */
.island-text b,
.island-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.island-text b { font-size: 0.8rem; color: #fff; }
.island-text span { font-size: 0.68rem; color: rgba(255, 255, 255, 0.55); }
.island-ring {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#34c759 0 72%, rgba(255, 255, 255, 0.14) 0);
}
.island-ring i {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #16181d;
}
.island-hint {
  position: absolute;
  bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  transition: opacity 0.3s;
}
.island.is-open .island-hint { opacity: 0; }

/* ── Gesundheit ─────────────────────────────────────────────── */

.health { padding: clamp(40px, 5.5vh, 68px) 24px clamp(28px, 4vh, 48px); }

/* ── Gepinnte Folge ─────────────────────────────────────────────
   Das Gerät steht still, die Kapitel wandern daran vorbei. Der übliche
   Zickzack (Text links, Bild rechts, dann getauscht) ist das am häufigsten
   kopierte Landingpage-Muster überhaupt; hier trägt das Scrollen selbst die
   Erzählung. Ohne JavaScript und bei „Bewegung reduzieren" bleibt es eine
   schlichte Liste (siehe unten). */
.story {
  max-width: var(--wrap);
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.story-media {
  position: sticky;
  /* Bis ganz nach oben fahren, bevor die Seite weiterzieht — vorher blieb
     das Telefon 14 vh unter der Kante hängen. */
  top: 2vh;
  height: 96vh;
  display: grid;
  place-items: center;
}
/* Breite an die Fensterhöhe gekoppelt: Ein iPhone ist gut doppelt so hoch
   wie breit, bei 72vh Bühne passt es nur bis etwa 32vh Breite. Sonst ragt es
   auf flachen Fenstern oben und unten heraus. */
.story-media .iphone { width: min(300px, 38vh, 80%); }
.story-media .iphone-screen { position: relative; }

/* Gleiche Regel wie bei den Uhr-Szenen: erst raus, dann rein. Sonst sind
   zwei Aufnahmen gleichzeitig halb sichtbar und der Bildschirm matscht. */
.story-clip {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.26s ease;
}
.story-clip.is-on { opacity: 1; transition: opacity 0.36s ease 0.24s; }
/* Eine der Aufnahmen muss den Platz aufspannen, sonst hat der Bildschirm
   keine Höhe — die erste steht deshalb im Fluss. */
.story-clip[data-clip="0"] { position: relative; }

.story-steps { display: grid; }
.story-step {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
  opacity: 0.32;
  transition: opacity 0.5s ease;
}
.story-step.is-on { opacity: 1; }
.story-index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.story-step h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.9rem; }
.story-step p { color: var(--muted); margin-bottom: 0.8rem; max-width: 30rem; }
.story-step p strong { color: var(--text); }

/* Ohne JavaScript — und bei „Bewegung reduzieren" — ist es keine Folge,
   sondern eine Liste: Das Anheften eines Geräts über drei Bildschirmhöhen
   **ist** Bewegung, auch wenn nichts animiert wird. `is-plain` setzt das
   Modul, sobald es diesen Fall erkennt. */
html:not(.anim) .story-step,
.story.is-plain .story-step { opacity: 1; min-height: 0; padding: 2rem 0; }
html:not(.anim) .story-media,
.story.is-plain .story-media { position: static; height: auto; }
.story.is-plain .story-clip { position: absolute; }
.story.is-plain .story-clip[data-clip="0"] { position: relative; }

/* ── Beispieltag: Tagesringe und Stundenblöcke ──────────────────────────
   Farben kommen ausschließlich aus den Themenvariablen, damit der Block der
   hellen/dunklen Darstellung von selbst folgt. Die Endwerte stehen im Markup
   (siehe index.html), hier wird nichts versteckt: Ohne JavaScript steht das
   fertige Diagramm da, es animiert nur nicht. */
.daycard {
  max-width: var(--wrap);
  margin: clamp(2rem, 5vh, 3.5rem) auto 0;
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.daycard-top h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.5rem; }
.daycard-top p { color: var(--muted); max-width: 44rem; }
.daycard-top p strong { color: var(--text); }

.daycard-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 2.6rem);
  align-items: center;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}
.dayrings svg {
  display: block;
  width: clamp(150px, 20vw, 200px);
  height: auto;
  /* Wie bei Apple: Der Bogen beginnt oben, nicht rechts. */
  transform: rotate(-90deg);
  transform-origin: center;
  overflow: visible;
}
.ring-track circle {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 15;
}
.dayring {
  fill: none;
  stroke-width: 15;
  stroke-linecap: round;
}
.dayring.is-steps { stroke: var(--orange); }
.dayring.is-kcal  { stroke: var(--green); }
.dayring.is-dist  { stroke: var(--blue); }

.day-legend { list-style: none; display: grid; gap: clamp(0.7rem, 2vw, 1.1rem); }
.day-legend li {
  position: relative;
  padding-left: 1.1rem;
  border-left: 3px solid var(--line);
}
.day-legend li.is-steps { border-left-color: var(--orange); }
.day-legend li.is-kcal  { border-left-color: var(--green); }
.day-legend li.is-dist  { border-left-color: var(--blue); }
.daynum {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  line-height: 1.05;
  /* Ohne feste Ziffernbreite zappelt die Zahl beim Hochzählen. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.day-legend em { display: block; font-style: normal; color: var(--muted); font-size: 0.93rem; margin-top: 0.2rem; }

.hours { margin-top: clamp(1.4rem, 3.5vw, 2rem); }
.hours-svg { display: block; width: 100%; height: auto; }
.hourbar { fill: var(--orange); }
.hourbar.is-zero { fill: var(--line); }
.hourtick text {
  fill: var(--faint);
  font-size: 13px;
  font-family: var(--font-mono);
  text-anchor: middle;
}
.hours figcaption {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .daycard-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .day-legend { justify-items: center; }
  .day-legend li { border-left: 0; padding-left: 0; border-top: 3px solid var(--line); padding-top: 0.5rem; }
  .day-legend li.is-steps { border-top-color: var(--orange); }
  .day-legend li.is-kcal  { border-top-color: var(--green); }
  .day-legend li.is-dist  { border-top-color: var(--blue); }
}

.ticks { list-style: none; margin-top: 1.2rem; display: grid; gap: 0.55rem; }
.ticks li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.97rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.36em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 55%, transparent);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 4.2px; top: calc(0.36em + 3.6px);
  width: 6px; height: 3.6px;
  border-left: 1.6px solid var(--green);
  border-bottom: 1.6px solid var(--green);
  transform: rotate(-48deg);
}

/* ── App im Detail: Slider ──────────────────────────────────── */

.detail { padding: clamp(52px, 7vh, 88px) 0; }

.slider {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  --shot-inset: max(24px, calc((100% - var(--wrap)) / 2));
}

.shots {
  /* Die Galerie beginnt an derselben Kante wie die Überschrift und läuft nach
     rechts aus dem Bild. Zentriert man stattdessen das erste Bild, bleibt die
     ganze linke Hälfte leer — das sieht nach Fehler aus, nicht nach Absicht. */
  /* An die **Fensterhöhe** gebunden, nicht nur an die Breite: Ein iPhone ist
     gut doppelt so hoch wie breit. Der Wert ist bewusst großzügig — bei fünf
     Geräten nebeneinander war jedes einzelne zu klein, um die Oberfläche noch
     zu erkennen, und die Galerie zeigte alles auf einmal statt eines nach dem
     anderen. Jetzt stehen etwa drei im Bild, das mittlere gut lesbar. */
  --shot-w: min(320px, 34vh, 76vw);
  --shot-inset: max(24px, calc((100% - var(--wrap)) / 2));
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--shot-inset);
  padding: 2rem var(--shot-inset) 1rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.shots::-webkit-scrollbar { display: none; }
.shots.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.shots.is-grabbing .shot { pointer-events: none; }

.shot {
  flex: 0 0 auto;
  width: var(--shot-w);
  scroll-snap-align: start;
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.24, 1);
}
.shot:hover { transform: translateY(-6px); }

.shot-frame {
  border-radius: 15.5% / 7.2%;
  padding: 1.2%;
  background: linear-gradient(145deg, var(--frame-a), var(--frame-b) 35%, var(--frame-c) 60%, var(--frame-d) 92%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--device-shadow);
}
.shot-frame img {
  width: 100%;
  border-radius: 14.5% / 6.9%;
  border: 2px solid #000;
  background: #000;
}
.shot figcaption {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 0.4s;
  min-height: 2.8em;                  /* zweizeilige Bildunterschriften
                                         verschieben sonst die Punktleiste */
}
.shot.is-current figcaption { color: var(--text); }

.slider-nav { padding-inline: var(--shot-inset, 24px); justify-content: flex-start; }

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.slider-btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.slider-btn:hover { color: var(--text); border-color: var(--orange); background: var(--orange-soft); }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.slider-dots button.is-active { background: var(--orange); transform: scale(1.3); }

/* ── Pro ────────────────────────────────────────────────────── */

.pro { padding: clamp(58px, 7.5vh, 96px) 24px; }
.pro-card {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  border-radius: 30px;
  border: 1px solid var(--pro-line);
  background: var(--pro-bg);
  padding: clamp(2.2rem, 5vw, 4rem);
  overflow: clip;
}
.pro-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), var(--spot), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.pro-card:hover::after { opacity: 1; }
.pro-head h2 { margin-bottom: 0.9rem; }
.pro-sub { color: var(--muted); max-width: 30rem; }

.pro-list {
  list-style: none;
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0.9rem 2.4rem;
}
.pro-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--muted);
  font-size: 0.97rem;
}
.pro-list b { color: var(--text); font-weight: 600; }
.pro-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px color-mix(in srgb, var(--orange) 80%, transparent);
}
.pro-note {
  margin-top: 2rem;
  font-size: 0.84rem;
  color: var(--faint);
}

/* ── Klartext ───────────────────────────────────────────────── */

.honest { padding: clamp(52px, 7vh, 88px) 24px; }
.honest-grid {
  max-width: var(--wrap);
  margin: clamp(2rem, 4vh, 3rem) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2.6rem;
}
.honest-item {
  border-top: 1px solid var(--line);
  padding: 1.3rem 0 0.6rem;
}
.honest-item h3 { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--text); }
.honest-item h3::before {
  content: "✕";
  color: var(--faint);
  font-size: 0.85em;
  margin-right: 0.6rem;
}
.honest-item p { color: var(--muted); font-size: 0.93rem; }

/* ── Voraussetzungen + Datenschutz ──────────────────────────── */

.req { padding: clamp(30px, 4.5vh, 56px) 24px; }
.req-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1.2rem;
}
.req-col {
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--card);
  box-shadow: var(--card-shadow);
  padding: 2rem;
}
.req-note { margin-top: 1.3rem; color: var(--faint); font-size: 0.87rem; }
.req-privacy {
  background:
    radial-gradient(60% 60% at 85% 0%, color-mix(in srgb, var(--green) 10%, transparent), transparent 60%),
    var(--card);
}
.req-privacy h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.req-privacy p { color: var(--muted); margin-bottom: 1.1rem; }

/* ── FAQ ────────────────────────────────────────────────────── */

.faq { padding: clamp(52px, 7vh, 88px) 24px; }
.faq-list { max-width: 780px; margin: clamp(1.6rem, 3vh, 2.6rem) auto 0; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.4rem 1.15rem 0.2rem;
  font-weight: 600;
  font-size: 1.02rem;
  position: relative;
  transition: color 0.25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--faint);
  transition: rotate 0.3s, color 0.3s;
}
.faq details[open] summary::after { rotate: 45deg; color: var(--orange); }
.faq summary:hover { color: var(--orange); }
.faq details p {
  padding: 0 0.2rem 1.3rem;
  color: var(--muted);
  font-size: 0.96rem;
  max-width: 44rem;
}
.faq details a { color: var(--orange); }

/* Sanftes Aufklappen, wo der Browser es kann */
@supports (interpolate-size: allow-keywords) {
  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
  .faq { interpolate-size: allow-keywords; }
}

/* ── Abschluss ──────────────────────────────────────────────── */

.outro {
  padding: clamp(64px, 9vh, 112px) 24px;
  text-align: center;
  position: relative;
  overflow: clip;
}
.outro::before {
  content: "";
  position: absolute;
  inset: auto 0 -40%;
  height: 80%;
  background: radial-gradient(50% 60% at 50% 100%, var(--hero-glow-a), transparent 70%);
  pointer-events: none;
}
.outro-inner { position: relative; }

.outro-icon-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  margin-bottom: 1.6rem;
}
.outro-icon {
  position: relative;
  border-radius: 22.37%;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line);
  z-index: 1;
}
.outro .ring {
  position: absolute;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  opacity: 0;
}
.reveal.in .ring { animation: radar 3.2s ease-out infinite; }
.ring.r2 { animation-delay: 1.05s !important; }
.ring.r3 { animation-delay: 2.1s !important; }
@keyframes radar {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(3.1); opacity: 0; }
}

.outro p { color: var(--muted); margin-top: 1rem; }

.store-badges {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.35rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--card-shadow);
  text-align: left;
  line-height: 1.15;
  font-weight: 650;
  font-size: 1.02rem;
}
.store-badge small {
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

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

.footer { border-top: 1px solid var(--line-soft); padding: 3rem 24px 3.6rem; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 620;
}
.footer-brand img { border-radius: 22.37%; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin-top: 1.3rem;
}
.footer-links a { color: var(--muted); font-size: 0.9rem; transition: color 0.25s; }
.footer-links a:hover { color: var(--text); }
.footer-legal {
  margin-top: 1.6rem;
  font-size: 0.8rem;
  color: var(--faint);
  max-width: 46rem;
}

/* ── Scroll-Parallax im Hero (wo der Browser es kann) ───────── */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
  }
}
@keyframes floatUp { to { translate: 0 -34px; } }
@keyframes floatDown { to { translate: 0 calc(7% + 30px); } }

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

/* Die Navigationsleiste bekommt eher zu wenig Platz als die Abschnitte —
   deshalb zwei getrennte Stufen. */
@media (max-width: 1080px) {
  .nav-links { gap: 1.05rem; }
  .nav-links a { font-size: 0.87rem; }
}

@media (max-width: 980px) {
  .lede { margin-inline: auto; }
  .stage-grid { grid-template-columns: 1fr; }
  .stage-watch { order: -1; }
  .free-grid { grid-template-columns: 1fr 1fr; }
  /* Einspaltig bleibt das Gerät oben angeheftet und die Kapitel laufen
     darunter durch — sonst wäre es nach dem ersten Absatz aus dem Bild. */
  .story { grid-template-columns: 1fr; row-gap: 0; }
  .story-media {
    top: 6vh;
    height: auto;
    padding: 0.8rem 0 1.4rem;
    background: linear-gradient(to bottom, var(--bg) 78%, transparent);
    z-index: 2;
  }
  .story-media .iphone { width: min(180px, 46vw); }
  .story-step { min-height: 0; padding: 1.4rem 0 2rem; }
  .honest-grid { grid-template-columns: 1fr; }
  .req-grid { grid-template-columns: 1fr; }
  .hw-grid { grid-template-columns: 1fr; }
  .hw-stage-wrap { order: -1; }
  .hw-stage { width: min(440px, 84vw); }
  .watch-big { width: min(390px, 80vw); }
}

/* Drei Spalten brauchen ab hier mehr Platz, als vorhanden ist — die
   Wortumbrüche in „Uhr-App installieren" verraten es zuerst. */
@media (max-width: 760px) {
  .how-inner { grid-template-columns: 1fr; gap: 1.7rem; }
  .free-grid { grid-template-columns: 1fr; }
  .watch-big { width: min(340px, 78vw); }
  .hw-stage { width: min(380px, 82vw); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .link-waves { width: 4vw; }
  .link-waves svg { width: 17vw; }
  .stage-copy { gap: 0.3rem; }
  .scene-tab { padding: 0.85rem 1rem; }
  .shots { --shot-w: min(260px, 30vh, 78vw); }
  .family-strip { gap: 0.5rem 1rem; }
  .family-strip li { min-width: 52px; }
}

/* ── Prüfmodus (?flat=1): ohne bildschirmhöhen-abhängige Maße ── */

html.flat .story-media { position: static; height: auto; }
html.flat .story-step { min-height: 0; padding: 2rem 0; opacity: 1; }

/* ── Bewegung aus (?motion=off — für Tests und Screenshots) ── */

html.no-motion .rise,
html.no-motion .device-in,
html.no-motion .link-waves {
  opacity: 1; translate: 0 0; filter: none; animation: none;
}
html.no-motion .watch-big { transform: none !important; opacity: 1 !important; transition: none; }
html.no-motion .reveal { opacity: 1 !important; translate: 0 0 !important; transition: none; }

/* ── Bewegung reduzieren ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim .reveal,
  html.anim .rise, html.anim .device-in, html.anim .link-waves {
    opacity: 1; translate: 0 0; filter: none; animation: none;
  }
  html.anim .watch-big { transform: none; opacity: 1; transition: none; }
  .wave, .wcall-ring, .wcall-btn.accept, .wmusic-bar span,
  .scene.is-on .wnotif, .wcam-focus, .wcam-shutter span,
  .reveal.in .ring, .scene-tab.is-active .tab-progress { animation: none; }
  .wave { opacity: 0.4; }
  .tab-progress { display: none; }
  .packet { display: none; }
  .ring { display: none; }
  .scene { transition: none; }
  .shot { transition: none; transform: none; opacity: 1; }
  .card:hover { transform: none; }
  .card:hover .card-icon { transform: none; }
  .glare { transition: none; }
  body { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Kacheln: die App als Produkt
   Ersetzt den früheren Einrichtungs-Dreischritt. Maßstab ist die
   Apple-Produktseite: Bild trägt, Überschrift 2–4 Wörter, darunter ein
   Fragment. Deshalb steht das Bildschirmfoto oben und groß und der Text
   darunter klein — nicht umgekehrt.
   ═══════════════════════════════════════════════════════════════ */

.feats {
  padding: clamp(64px, 9vw, 132px) clamp(18px, 4vw, 34px);
  border-top: 1px solid var(--line-soft);
}

.feat-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--wrap);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

.feat {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: clamp(20px, 2.2vw, 30px);
  display: grid;
  /* Der Freiraum gehört **ans Ende**, nicht vor den Text. Stand die `1fr`-Zeile
     oben, schob sie die Überschrift in jeder Kachel unterschiedlich weit nach
     unten — je nachdem, ob das Fragment zwei oder drei Zeilen braucht. Die
     Überschriften standen dann sichtbar versetzt. So beginnt der Text überall
     direkt unter dem Bild, und der Rest bleibt unten. */
  grid-template-rows: auto auto 1fr;
  gap: 0;
  overflow: hidden;
}

/* Das Bildschirmfoto wird oben angeschnitten statt gestaucht: Ein Telefon in
   voller Höhe macht die Kachel doppelt so hoch wie ihr Text und reißt das
   Raster auseinander. Der Anschnitt liegt unten, weil die Aussage jeder
   Ansicht oben steht. */
.feat-shot {
  position: relative;
  aspect-ratio: 16 / 11;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
  display: grid;
  place-items: start center;
}
.feat-shot img {
  width: min(62%, 190px);
  height: auto;
  margin-top: 7%;
  border-radius: 12px;
  box-shadow: var(--device-shadow);
}

.feat h3 {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(1.12rem, 1.7vw, 1.34rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.45em;
}
.feat p {
  margin: 0;
  color: var(--muted);
  font-size: 0.965rem;
  line-height: 1.5;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat-shot { aspect-ratio: 16 / 9; }
}

/* ═══════════════════════════════════════════════════════════════
   Auftritt: Titel mittig, Gerät schwebt herauf
   ═══════════════════════════════════════════════════════════════ */

.stage {
  position: relative;
  min-height: 100svh;
  /* Weicher Übergang zum nächsten Abschnitt: Das Gerät läuft in einen
     Farbverlauf aus, statt an der Abschnittskante hart zu enden. */
  --stage-fade: 16svh;
  display: grid;
  /* Eine einzige Zelle: Text und Gerät liegen **übereinander**, nicht
     nebeneinander. Das Gerät ist Hintergrund, der Titel steht davor — genau
     das war die Vorgabe. Ein zweispaltiges Raster hätte beides klein gemacht. */
  grid-template-areas: "stage";
  place-items: center;
  overflow: clip;
  padding: clamp(96px, 12vh, 150px) 20px clamp(40px, 6vh, 80px);
}
.stage > * { grid-area: stage; }
.stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--stage-fade);
  background: linear-gradient(180deg, transparent, var(--bg));
  z-index: 2;
  pointer-events: none;
}

.stage-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  display: grid;
  justify-items: center;
  /* Der Titel sitzt oben, das Gerät schiebt sich darunter ins Bild. Stünde er
     mittig, verdeckte er genau die Bildschirmmitte. */
  align-self: start;
  pointer-events: none;
}
.stage-copy > * { pointer-events: auto; }

.stage h1 {
  font-size: clamp(3rem, 9.5vw, 7.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.stage h1 .hl { display: block; }

/* Die „leichte Kante" unter dem Titel: eine Haarlinie, die zur Mitte hin hell
   wird. Sie trennt Titel und Gerät, ohne einen Kasten zu zeichnen. */
.stage-edge {
  display: block;
  width: min(340px, 52vw);
  height: 1px;
  margin: clamp(1.1rem, 2.2vh, 1.8rem) 0 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.stage-device {
  position: relative;
  z-index: 1;
  width: min(100%, 1100px);
  height: min(92svh, 900px);
  align-self: end;
  /* Das Gerät ragt bewusst unten aus dem Bild: Es soll heraufgeschwebt
     wirken, nicht auf einem Sockel stehen. */
  translate: 0 12%;
}
.stage-device canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ── Dynamic Island: Live-Activity, die aus der Notch aufploppt ───
   Sie ist **nicht** da, solange die echte Notch des Videos zu sehen sein
   soll — erst beim Aufploppen erscheint sie, und zwar aus deren Mitte. Lage
   und Maße rechnet `site.js` aus der gemessenen Displaybreite; hier steht nur
   das Aussehen. `--ix`/`--iy` ist die **Mitte**, deshalb wird um beide Achsen
   zur Hälfte zurückgeschoben. */
.island-live {
  position: absolute;
  left: var(--ix, 50%);
  top: var(--iy, 0px);
  /* Waagerecht zentriert, senkrecht **an der Oberkante angesetzt**: `--iy` ist
     die Oberkante der Notch. */
  translate: -50% 0;
  z-index: 4;
  pointer-events: none;
  /* Aufploppen aus der oberen Mitte nach unten — die Richtung, in die iOS
     eine Live-Activity aufzieht. */
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.island-pill {
  display: flex;
  align-items: center;
  gap: calc(var(--iw, 300px) * 0.028);
  width: var(--iw, 300px);
  height: var(--ih, 68px);
  padding-inline: calc(var(--iw, 300px) * 0.022);
  border-radius: 999px;
  background: #000;
  color: #f4f6f9;
  /* Zwei Trennungen, weil zwei Untergründe: Auf dem hellen Bildschirm trägt
     der Schatten, auf dem dunklen verschwände die schwarze Pille sonst
     spurlos — dort zeichnet der feine helle Innenrand die Kante. */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.island-body {
  display: flex;
  align-items: center;
  gap: calc(var(--iw, 300px) * 0.028);
  width: 100%;
  height: 100%;
}
.island-avatar {
  width: calc(var(--ih, 68px) * 0.66);
  height: calc(var(--ih, 68px) * 0.66);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, #2f3b33, #101512 70%);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.island-avatar img { width: 74%; height: auto; }
.island-lines { display: grid; line-height: 1.18; flex: 1; min-width: 0; }
.island-lines small {
  font-size: calc(var(--ih, 68px) * 0.215);
  color: #99a1ab;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.island-lines b {
  font-size: calc(var(--ih, 68px) * 0.285);
  font-weight: 620;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.island-ok {
  width: calc(var(--ih, 68px) * 0.56);
  height: calc(var(--ih, 68px) * 0.56);
  border-radius: 50%;
  background: #30d158;
  color: #05300f;
  display: grid;
  place-items: center;
  flex: none;
}
.island-ok svg { width: 60%; height: 60%; }

@media (prefers-reduced-motion: reduce) {
  }
.no-motion 
@media (max-width: 720px) {
  .stage-device { height: min(70svh, 620px); translate: 0 16%; }
  .stage { padding-top: clamp(84px, 14vh, 120px); }
}

/* ═══════════════════════════════════════════════════════════════
   Kopfleiste als schwebende Kapsel
   Der frühere Balken lief über die volle Breite und trug acht Elemente.
   Eine Kapsel trägt weniger, steht über dem Inhalt statt davor und macht den
   Auftritt frei — der soll das Erste sein, was man sieht.
   ═══════════════════════════════════════════════════════════════ */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: clamp(10px, 1.6vh, 18px) clamp(12px, 3vw, 26px) 0;
  background: none;
  border: 0;
}
.nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  padding: 7px 7px 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 2px rgba(16, 18, 24, 0.04);
  transition: box-shadow 0.35s, border-color 0.35s, background 0.35s;
}
.nav.scrolled .nav-inner {
  border-color: var(--line);
  box-shadow: 0 10px 30px -14px rgba(16, 18, 24, 0.3);
}

.nav .brand { display: flex; align-items: center; gap: 0.55em; font-weight: 640; letter-spacing: -0.02em; }
.nav .brand img { border-radius: 7px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.8vw, 8px);
  margin-inline: auto;
}
.nav-links a {
  position: relative;
  padding: 0.42em 0.85em;
  border-radius: 999px;
  font-size: 0.925rem;
  color: var(--muted);
  transition: color 0.25s, background 0.25s;
}
.nav-links a:hover { color: var(--text); background: var(--line-soft); }
/* Der Bereich, in dem man gerade steht, wird gefüllt statt unterstrichen —
   auf einer Kapsel liest sich eine Unterstreichung wie ein Fehler. */
.nav-links a.is-current { color: var(--text); background: var(--line-soft); }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav .theme-toggle {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}
.nav .theme-toggle:hover { color: var(--text); background: var(--line-soft); }
.nav-cta {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 1.05em;
  border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em;
  transition: opacity 0.25s;
}
.nav-cta:hover { opacity: 0.85; }

/* Der Lesefortschritt läuft am oberen Fensterrand, nicht an der Kapsel:
   An einer gerundeten Kapsel säße ein gerader Balken schief. */
.nav-progress {
  position: fixed; inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-bright));
  transform: scaleX(0); transform-origin: 0 50%;
}

@media (max-width: 780px) {
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
}

/* ═══════════════════════════════════════════════════════════════
   Uhren: wischbarer Streifen
   ═══════════════════════════════════════════════════════════════ */

.watches { padding: clamp(64px, 9vw, 130px) 0; }
.watches .section-head { padding-inline: clamp(18px, 4vw, 34px); }

.watch-rail {
  margin-top: clamp(28px, 4vw, 52px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Die Ränder laufen aus, statt hart abzuschneiden — dadurch sieht man, dass
     es seitlich weitergeht, ohne dass ein Pfeil das behaupten muss. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.watch-rail::-webkit-scrollbar { display: none; }
.watch-rail:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 18px; }

.watch-track {
  list-style: none;
  margin: 0;
  padding: 0 max(calc((100vw - var(--wrap)) / 2), clamp(18px, 4vw, 34px));
  display: flex;
  gap: clamp(14px, 2vw, 26px);
}
.watch-track li {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(160px, 20vw, 216px);
  display: grid;
  justify-items: center;
  gap: 0.25em;
  padding: clamp(18px, 2vw, 26px) 14px clamp(16px, 2vw, 22px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.3s, transform 0.3s;
}
.watch-track li:hover { transform: translateY(-3px); border-color: var(--line); }
.watch-track img {
  width: clamp(88px, 11vw, 124px);
  height: auto;
  margin-bottom: 0.6em;
  filter: var(--watch-shadow);
}
.watch-track b { font-size: 0.98rem; font-weight: 620; letter-spacing: -0.015em; }
.watch-track span { font-size: 0.8rem; color: var(--faint); }

/* Die eine Uhr, auf der wirklich entwickelt wurde, ist markiert — das ist eine
   Aussage über Prüftiefe, nicht über Rangfolge. */
.watch-track li.is-tested { border-color: var(--pro-line); background: var(--pro-bg); }
.watch-track li.is-tested span { color: var(--orange); font-weight: 600; }

/* Modelle ohne eigenes Produktfoto: eine gezeichnete Uhr statt eines
   fremden Fotos — zwei Karten mit demselben Foto wären eine Falschaussage. */
.watch-glyph {
  width: clamp(72px, 9vw, 100px);
  aspect-ratio: 1;
  margin-bottom: 0.6em;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--text) 22%, transparent);
  position: relative;
  background:
    radial-gradient(60% 60% at 35% 30%, color-mix(in srgb, var(--text) 10%, transparent), transparent 70%),
    var(--bg-2);
}
.watch-glyph::before, .watch-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: 34%;
  height: 14%;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.watch-glyph::before { bottom: 99%; border-radius: 6px 6px 2px 2px; }
.watch-glyph::after { top: 99%; border-radius: 2px 2px 6px 6px; }

.watch-note {
  max-width: 46rem;
  margin: clamp(24px, 3vw, 40px) auto 0;
  padding-inline: clamp(18px, 4vw, 34px);
  text-align: center;
  color: var(--muted);
  text-wrap: pretty;
}
.watch-note b { color: var(--text); }

/* ── Tagesringe in den Apple-Fitness-Farben ───────────────────────
   Vorher liefen die drei Ringe in den Hausfarben der Seite (Orange, Grün,
   Blau der Marke). Diese Anzeige zitiert aber sichtbar die Aktivitätsringe
   von Apple — dann muss sie deren Farben tragen, sonst liest man die Form
   als Apple-Ring und die Farbe als etwas anderes.

   Die Zuordnung folgt Apple: Bewegen rot, Trainieren grün, Stehen blau. Hier
   heißen die Größen Schritte, Aktivkalorien und Distanz, die Reihenfolge von
   außen nach innen bleibt. Die Werte selbst ändern sich nicht — nur die Farbe. */
:root {
  --fit-move: #fa114f;    /* Bewegen  */
  --fit-exercise: #92e82a; /* Trainieren */
  --fit-stand: #1eeaef;   /* Stehen */
}
.dayring.is-steps { stroke: var(--fit-move); }
.dayring.is-kcal  { stroke: var(--fit-exercise); }
.dayring.is-dist  { stroke: var(--fit-stand); }
.day-legend li.is-steps { border-left-color: var(--fit-move); }
.day-legend li.is-kcal  { border-left-color: var(--fit-exercise); }
.day-legend li.is-dist  { border-left-color: var(--fit-stand); }
@media (max-width: 720px) {
  .day-legend li.is-steps { border-top-color: var(--fit-move); }
  .day-legend li.is-kcal  { border-top-color: var(--fit-exercise); }
  .day-legend li.is-dist  { border-top-color: var(--fit-stand); }
}

/* ── Gratis-Block: aufgewertet, Aufbau unverändert ────────────────
   Der Inhalt bleibt (er ist die stärkste Aussage der Seite), aber die Liste
   sah aus wie eine Tabelle: nackte Zeilen mit Haarlinie dazwischen. Sie
   bekommt jetzt eine eigene Fläche, ein farbiges Piktogramm-Feld und eine
   Zeile, die beim Überfahren anspringt — dieselbe Information, sichtbar mehr
   wert. */
.free {
  padding: clamp(72px, 9.5vw, 128px) clamp(18px, 4vw, 34px);
  position: relative;
}
/* Ein sehr weicher Schein hinter dem Abschnitt: Er hebt die Fläche vom Blatt
   ab, ohne einen Kasten zu zeichnen. */
.free::before {
  content: "";
  position: absolute;
  inset: 8% 0 12%;
  background: radial-gradient(58% 46% at 50% 40%, var(--spot), transparent 72%);
  pointer-events: none;
}
.free > * { position: relative; }

.free-grid {
  border-bottom: 0;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--line-soft);
  background: var(--card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  padding: 6px;
}
.free-grid .card {
  border-top: 0;
  border-radius: var(--radius);
  padding: clamp(1rem, 1.9vw, 1.5rem) clamp(0.9rem, 1.6vw, 1.4rem);
  align-items: center;
  transition: background 0.3s;
}
.free-grid .card + .card { box-shadow: inset 0 1px 0 var(--line-soft); }
.free-grid .card:hover { background: var(--bg-2); border-color: transparent; box-shadow: none; }
.free-grid .card:hover + .card { box-shadow: none; }

/* Das Piktogramm bekommt ein eigenes, in seiner Farbe getöntes Feld — vorher
   schwebte es farbig im Nichts und wirkte wie ein Aufzählungszeichen. */
.free-grid .card-icon {
  width: 2.35rem; height: 2.35rem;
  border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  color: var(--tint);
}
.free-grid .card:hover .card-icon { background: color-mix(in srgb, var(--tint) 22%, transparent); }
.free-grid .card h3 { align-self: center; padding-top: 0; font-weight: 620; }
.free-grid .card p { padding-top: 0; }

@media (max-width: 720px) {
  .free-grid .card { grid-template-columns: 2.35rem minmax(0, 1fr); row-gap: 0.35rem; }
  .free-grid .card p { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════
   Auftritt II: das Gerät ist riesig, sichtbar ist das obere Drittel
   Vorgabe des Auftraggebers: Titel mittig, darunter schwebt ein sehr großes
   iPhone von unten herein; im Sichtfeld bleibt nur sein oberer Teil mit der
   Island. Das Gerät ragt deshalb bewusst weit unter den Falz — die Bühne ist
   210svh hoch, der Abschnitt schneidet bei 100svh ab.
   ═══════════════════════════════════════════════════════════════ */

.stage { grid-template-rows: none; place-items: start center; }
.stage-copy { padding-top: clamp(1.5rem, 4svh, 3.5rem); }

.stage-device {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  /* `top` zählt ab der **Polsterkante** des Abschnitts, nicht ab dessen
     Oberkante — die Polsterung kommt also obendrauf.
     Der Wert ist überwiegend fest und nur leicht höhenabhängig: Die Größe der
     Überschrift hängt an der Fenster**breite**, ihre Unterkante liegt deshalb
     bei jeder Fensterhöhe an fast derselben Stelle. Ein rein in `svh`
     gerechneter Abstand schob das Gerät auf niedrigen Fenstern mitten in den
     Titel — gemessen 138 px Überlappung. */
  top: clamp(270px, calc(32svh + 14px), 390px);
  width: min(96vw, 1040px);
  /* **Die Form des Behälters ist die Form des Geräts — plus Rand.**
     Die Kamera passt das Modell auf 90 % der Behälterbreite ein und stellt es
     mittig hinein; seine Höhe ist damit `Breite × 1,856`. Genau dieses
     Seitenverhältnis stand hier, und deshalb berührte die Gehäuseoberkante
     die Zeile 0 des Bildes — das Telefon war oben **abgeschnitten**. Der
     Zuschlag auf 1,99 gibt ihm rund 7 % Luft, je zur Hälfte oben und unten;
     die obere ist die sichtbare. Dass es unten aus dem Bild läuft, bleibt
     gewollt. Wer den Zuschlag wieder herausnimmt, schneidet das Gerät ab. */
  aspect-ratio: 1 / 1.99;
  height: auto;
  align-self: unset;
}

/* Der Titel darf nie unter dem Gerät verschwinden: Er liegt oben, das Gerät
   beginnt unter der Kante — nicht mehr übereinander gestapelt wie zuvor. */
.stage-copy { position: relative; z-index: 3; }

/* Mobil: Das Gerät bleibt **innerhalb** des Fensters. 130vw ließ es seitlich
   herauslaufen — samt Dynamic Island, von der dann die Ränder fehlten. Da die
   Kamera das Modell jetzt auf die Behälterbreite einpasst, steuert die Breite
   hier alles. */
@media (max-width: 720px) {
  .stage-device { top: clamp(215px, calc(24svh + 31px), 305px); width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════
   Auf der Uhr: Scroll schaltet die Szenen
   ═══════════════════════════════════════════════════════════════ */

/* Die Spur gibt dem Abschnitt Scrollweg; die Uhr samt Text bleibt darin
   angeheftet. Höhe nur, wenn Skript und Bewegung erlaubt sind — ohne beides
   ist es ein normaler Abschnitt mit Textliste. */
html.anim:not(.no-motion) .uhr-flow { height: 340svh; }
@media (prefers-reduced-motion: reduce) { html.anim .uhr-flow { height: auto !important; } }

.uhr-pin { position: static; }
html.anim:not(.no-motion) .uhr-pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(70px, 9vh, 110px) clamp(18px, 4vw, 34px) 0;
}
@media (prefers-reduced-motion: reduce) {
  html.anim .uhr-pin { position: static !important; min-height: 0 !important; }
}

/* Die Schrittexte liegen übereinander; sichtbar ist der aktive. Ohne
   Animation (kein JS, RM, no-motion) stehen alle untereinander. */
html.anim:not(.no-motion) #uhrSteps { position: relative; min-height: 16em; }
html.anim:not(.no-motion) #uhrSteps .scene-tab {
  position: absolute;
  inset: auto 0;
  top: 50%;
  translate: 0 -50%;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
html.anim:not(.no-motion) #uhrSteps .scene-tab.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  html.anim #uhrSteps { min-height: 0 !important; }
  html.anim #uhrSteps .scene-tab { position: static !important; opacity: 1 !important; transform: none !important; translate: none !important; }
}

/* Die Schritte selbst: große Aussage, kurzer Satz — keine Knöpfe mehr. */
#uhrSteps .scene-tab {
  display: block;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.6rem 0;
}
#uhrSteps h3 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 0.55em;
}
#uhrSteps p { color: var(--muted); font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.55; max-width: 30rem; margin: 0; }
#uhrSteps em {
  font-style: normal; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--orange);
  border: 1px solid var(--pro-line); border-radius: 999px; padding: 0.15em 0.55em;
  margin-left: 0.4em; white-space: nowrap; vertical-align: 0.1em;
}

/* Fortschritt: fünf feine Striche unter dem Text. */
.uhr-progress {
  display: flex; gap: 6px;
  position: absolute; left: 0; bottom: 6%;
}
html.no-motion .uhr-progress, html:not(.anim) .uhr-progress { display: none; }
.uhr-progress i {
  width: 26px; height: 3px; border-radius: 2px;
  background: var(--line);
  transition: background 0.3s;
}
.uhr-progress i.is-on { background: var(--orange); }

@media (max-width: 860px) {
  html.anim:not(.no-motion) .uhr-pin { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  html.anim:not(.no-motion) #uhrSteps { order: 2; min-height: 12em; width: 100%; }
  html.anim:not(.no-motion) #uhrSteps .scene-tab { text-align: center; }
  html.anim:not(.no-motion) #uhrSteps p { margin-inline: auto; }
  html.anim:not(.no-motion) .uhr-pin .stage-watch .watch-big { width: min(300px, 62vw); }
  .uhr-progress { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Karten: Bildschirmfotos im Gerät statt nackt
   Ein schlanker CSS-iPhone-Rahmen (Gehäuse, Display-Radius, Island) um jedes
   Foto. Kein WebGL je Karte — sechs 3D-Kontexte wären Verschwendung, und in
   dieser Größe ist der Unterschied nicht sichtbar.
   ═══════════════════════════════════════════════════════════════ */

.feat-shot { background: none; }
.iphone-card { width: min(74%, 220px); margin: 5% auto 0; }
.iphone-card .iphone-screen img { display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════
   Durchblättern auf dem echten Gerät
   ═══════════════════════════════════════════════════════════════ */

.slider-stage {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  height: min(74svh, 720px);
}
.slider-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.slider.is-3d .shots { display: none; }
.slider-caption {
  text-align: center;
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0.4rem 0 0;
}
.slider-caption b { color: var(--text); font-weight: 620; }

/* ═══════════════════════════════════════════════════════════════
   Pro: eine Karte, die nach Kauf aussieht
   ═══════════════════════════════════════════════════════════════ */

.pro { padding: clamp(72px, 9.5vw, 140px) clamp(18px, 4vw, 34px); }
.pro-card {
  max-width: var(--wrap);
  margin: 0 auto;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--pro-line);
  background: var(--pro-bg);
  padding: clamp(28px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
}
.pro-head h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -0.03em; }
.pro-sub { color: var(--muted); margin-top: 1rem; max-width: 26rem; text-wrap: pretty; }

.pro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pro-list li {
  position: relative;
  padding: 0.72rem 0.9rem 0.72rem 2.7rem;
  border-radius: 14px;
  color: var(--muted);
  line-height: 1.45;
  transition: background 0.25s;
}
.pro-list li:hover { background: color-mix(in srgb, var(--orange) 7%, transparent); }
.pro-list b { color: var(--text); font-weight: 620; }
.pro-list li::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 0.92rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--orange);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6z"/></svg>') center/contain no-repeat;
}
.pro-cta { margin-top: 1.6rem; display: grid; gap: 0.7rem; justify-items: start; }
.pro-note { color: var(--faint); font-size: 0.88rem; margin: 0; }

@media (max-width: 860px) {
  .pro-card { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Leiste: schrumpft beim Scrollen flüssig zum Menü
   Oben ausgerollt (Marke, Ziele, Kauf), nach dem ersten Scrollen zieht sich
   die Kapsel wie Flüssigglas auf Marke + Menüknopf zusammen. Mobil ist sie
   immer im geschrumpften Zustand. Der Menüknopf öffnet die Ziele als Feld
   unter der Kapsel.
   ═══════════════════════════════════════════════════════════════ */

.nav-inner {
  /* Die Breite animiert über max-width — width:auto lässt sich nicht
     animieren, ein fester Verlauf schon. Die Feder liefert das „flüssige". */
  transition:
    max-width 0.65s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.35s, border-color 0.35s, background 0.35s;
}
.nav-menu {
  display: none;
  width: 34px; height: 34px;
  border: 0; border-radius: 999px;
  background: none;
  color: var(--text);
  cursor: pointer;
  place-items: center;
  align-content: center;
  gap: 5px;
  transition: background 0.25s;
}
.nav-menu:hover { background: var(--line-soft); }
.nav-menu span {
  display: block; width: 15px; height: 1.8px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.nav.menu-open .nav-menu span:first-child { transform: translateY(3.4px) rotate(45deg); }
.nav.menu-open .nav-menu span:last-child { transform: translateY(-3.4px) rotate(-45deg); }

/* Geschrumpfter Zustand: schmale Kapsel, Ziele und Kauf verschwinden weich. */
.nav.scrolled .nav-inner, .nav.compact .nav-inner { max-width: 320px; }
.nav.scrolled .nav-links, .nav.compact .nav-links,
.nav.scrolled .nav-cta, .nav.compact .nav-cta {
  /* Weiches Wegtauchen statt display:none — sonst springt die Breite. */
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  position: absolute;
  transition: opacity 0.3s, transform 0.3s;
}
.nav.scrolled .nav-menu, .nav.compact .nav-menu { display: grid; }
.nav.scrolled .nav-inner, .nav.compact .nav-inner { justify-content: space-between; }

/* Offenes Menü: die Ziele als Feld unter der Kapsel, gleiche Glasoptik. */
.nav-panel {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: calc(100% + 8px);
  width: min(320px, calc(100vw - 32px));
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--nav-bg-solid);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 18px 50px -18px rgba(16, 18, 24, 0.4);
  padding: 8px;
  display: grid;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: 50% 0;
  pointer-events: none;
  transition: opacity 0.28s, transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}
.nav.menu-open .nav-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-panel a {
  padding: 0.65em 0.9em;
  border-radius: 14px;
  color: var(--text);
  font-size: 0.98rem;
  transition: background 0.2s;
}
.nav-panel a:hover { background: var(--line-soft); }
.nav-panel .nav-cta-panel {
  margin-top: 4px;
  background: var(--text);
  color: var(--bg);
  text-align: center;
  font-weight: 600;
}
.nav-panel .nav-cta-panel:hover { opacity: 0.85; }

/* Mobil: immer die kompakte Kapsel. */
@media (max-width: 780px) {
  .nav-inner { max-width: 320px; }
  .nav .nav-links, .nav .nav-cta {
    opacity: 0; transform: scale(0.92); pointer-events: none; position: absolute;
  }
  .nav .nav-menu { display: grid; }
  .nav-inner { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-inner, .nav-panel, .nav-menu span { transition: none; }
}