:root {
  color-scheme: dark;
  --orange: #f59b16;
  --orange-strong: #ef8500;
  --green: #32d787;
  --red: #ff453a;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --muted-2: #737378;
  --black: #000;
  --surface: #111113;
  --surface-2: #1c1c1e;
  --line: rgba(255,255,255,.11);
  --paper: #f2f0eb;
  --paper-2: #e8e5df;
  --paper-ink: #11110f;
  --paper-muted: #6f6c67;
  --max: 1180px;
  --radius: 30px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--black);
  color: var(--ink);
  /* Apple-Geraete bekommen SF Pro. Danach die jeweils beste Systemschrift der
     anderen Plattformen - erst am Ende Arial, das vorher fast immer griff. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Noto Sans",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
::selection { background: var(--orange); color: #111; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 999;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #000;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(160%) blur(24px);
}
.nav-shell {
  width: min(var(--max), calc(100% - 40px));
  height: 58px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.brand img { width: 27px; height: 27px; border-radius: 7px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(15px, 2.3vw, 30px);
  margin-left: auto;
  font-size: 13px;
  color: #d3d3d8;
}
.nav-links a { transition: color .18s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--orange); }
/* Sprachwahl: aktive Sprache links, die andere als Link daneben. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.lang-switch > * { padding: 3px 8px; border-radius: 999px; color: var(--muted-2); transition: background .2s ease, color .2s ease; }
.lang-switch [aria-current="true"] { background: rgba(255,255,255,.12); color: var(--ink); }
.lang-switch a:hover { background: rgba(245,155,22,.16); color: var(--orange); }
.nav-cta {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--orange);
  color: #111 !important;
  font-weight: 650;
}
.menu-button {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  color: var(--ink);
  cursor: pointer;
}
.menu-button span, .menu-button::before, .menu-button::after {
  content: "";
  display: block;
  width: 17px;
  height: 1.5px;
  margin: 4px auto;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.site-header[data-open="true"] .menu-button span { opacity: 0; }
.site-header[data-open="true"] .menu-button::before { transform: translateY(5.5px) rotate(45deg); }
.site-header[data-open="true"] .menu-button::after { transform: translateY(-5.5px) rotate(-45deg); }

.wrap {
  width: min(var(--max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}
.narrow {
  width: min(820px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}
.section { padding: clamp(84px, 10vw, 150px) 0; }
.section.compact { padding: clamp(58px, 7vw, 96px) 0; }
.section.light { background: var(--paper); color: var(--paper-ink); }
.section.soft { background: #09090a; }
.section-head { max-width: 780px; margin-bottom: clamp(42px, 6vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  margin: 0 0 14px;
  color: var(--orange);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.light .eyebrow { color: #c66c00; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin-top: 0; letter-spacing: -.035em; }
h1 { margin-bottom: 24px; font-size: clamp(46px, 7.3vw, 92px); line-height: .98; font-weight: 690; }
h2 { margin-bottom: 20px; font-size: clamp(34px, 5vw, 62px); line-height: 1.02; font-weight: 680; }
h3 { margin-bottom: 12px; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.12; font-weight: 650; }
.lede { margin: 0; color: var(--muted); font-size: clamp(19px, 2.1vw, 25px); line-height: 1.46; }
.light .lede { color: var(--paper-muted); }
.body-copy { color: var(--muted); font-size: 18px; line-height: 1.6; }
.light .body-copy { color: var(--paper-muted); }
.small-copy { color: var(--muted-2); font-size: 15px; line-height: 1.55; }

.hero {
  position: relative;
  min-height: min(900px, calc(100svh - 58px));
  overflow: hidden;
  background:
    radial-gradient(55% 65% at 85% 46%, rgba(245,155,22,.18), transparent 70%),
    linear-gradient(#000, #050505);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 200px;
  background: linear-gradient(transparent, #000);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .66fr);
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
  min-height: min(840px, calc(100svh - 58px));
  padding: 58px 0 44px;
}
.hero-copy { max-width: 760px; }
.hero .lede { max-width: 680px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.actions.centered { justify-content: center; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--orange);
  color: #111;
  font-weight: 650;
  transition: transform .18s ease, opacity .18s ease;
}
.button:hover { transform: translateY(-2px); opacity: .9; }
.button.secondary { background: transparent; color: var(--orange); border-color: rgba(245,155,22,.42); }
/* Unverändertes, von Apple bereitgestelltes App-Store-Badge. */
.app-badge {
  display: inline-block;
  width: auto;
  height: 52px;
  line-height: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.app-badge:hover { transform: translateY(-2px); opacity: .88; }
.app-badge:active { transform: translateY(0) scale(.98); }
.app-badge img { display: block; width: auto; height: 100%; }

.text-link { color: var(--orange); font-weight: 620; }
.text-link::after { content: "›"; margin-left: .3em; }
.hero-device {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1350 / 2760;
  margin-inline: auto;
  align-self: end;
  filter: drop-shadow(0 42px 64px rgba(0,0,0,.7));
}
.hero-device::before {
  content: "";
  position: absolute;
  inset: 15% -15% 2%;
  border-radius: 50%;
  background: rgba(245,155,22,.2);
  filter: blur(80px);
}
.iphone-device-shot {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 30px 0 0;
  padding: 0;
  color: #8e8e93;
  list-style: none;
  font-size: 13px;
}
.hero-facts li { display: flex; align-items: center; gap: 8px; }
/* Tabellenziffern, damit Messwerte nicht in der Breite springen. */
#faq-count { font-variant-numeric: tabular-nums; }
.hero-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

.mode-grid {
  display: grid;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.measurement-showcase { border-top: 1px solid var(--line); }
.mode-card {
  display: flex;
  min-height: 650px;
  padding: 34px 34px 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #202023, #0d0d0f);
  flex-direction: column;
}
.mode-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.mode-card h3 { min-height: 2.24em; }
.mode-card > p:not(.eyebrow) { min-height: 4.5em; }
.mode-access {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 14px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.mode-card .screen { width: min(100%, 285px); height: auto; aspect-ratio: 1350 / 2760; margin: 42px auto 0; object-fit: contain; filter: drop-shadow(0 22px 40px rgba(0,0,0,.55)); }

.analysis-showcase { overflow: hidden; }
.analysis-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px;
  border-radius: 999px;
  background: var(--paper-2);
  width: max-content;
  max-width: 100%;
}
.analysis-tabs button {
  min-height: 44px;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--paper-muted);
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.analysis-tabs button[aria-selected="true"] { background: #fff; color: var(--paper-ink); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.analysis-stage { border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 20px 70px rgba(52,45,33,.10); }
.analysis-panel { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); min-height: 620px; }
.analysis-panel[hidden] { display: none; }
.stage-copy { align-self: center; padding: clamp(34px,5vw,66px); }
.stage-copy h3 { max-width: 410px; font-size: clamp(32px,4vw,50px); }
.stage-copy > p:not(.eyebrow) { margin: 0 0 25px; color: var(--paper-muted); font-size: 18px; line-height: 1.6; }
.stage-access {
  display: block;
  width: max-content;
  margin: -8px 0 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245,155,22,.12);
  color: #b76400;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.stage-access-free { background: rgba(39,174,96,.11); color: #237a49; }
.stage-visual {
  min-width: 0;
  min-height: 620px;
  display: grid;
  place-items: center;
  padding: clamp(24px, 3vw, 42px);
  background: linear-gradient(145deg, #f3f0ea, #e9e5dd);
}
.stage-visual img {
  width: 100%;
  height: auto;
  max-height: 554px;
  border: 1px solid rgba(28,28,30,.08);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 18px 46px rgba(52,45,33,.12);
  object-fit: contain;
}
.stage-device-visual img {
  width: auto;
  max-width: 100%;
  max-height: 554px;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 18px 38px rgba(52,45,33,.22));
  box-shadow: none;
}

.watch-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(36px, 7vw, 100px); align-items: center; }
.watch-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1vw, 14px);
  padding: clamp(14px, 2vw, 22px) clamp(10px, 1.5vw, 18px);
  border-radius: 36px;
  background: #171719;
  box-shadow: 0 34px 80px rgba(0,0,0,.28);
}
.watch-device {
  position: relative;
  min-width: 0;
  aspect-ratio: 600 / 960;
  isolation: isolate;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.34));
}
.watch-device::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 23.229%;
  left: 14.833%;
  width: 70.334%;
  height: 53.542%;
  border-radius: 27% / 22%;
  background: #000;
}
.watch-device-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.watch-device-screen {
  position: absolute;
  z-index: 1;
  top: 25.122%;
  left: 17.5%;
  width: 65%;
  height: auto;
  aspect-ratio: 410 / 502;
  object-fit: cover;
}
.check-list { display: grid; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 12px; color: var(--muted); font-size: 17px; line-height: 1.45; }
.check-list li::before { content: "✓"; color: var(--green); font-weight: 800; }
.light .check-list li { color: var(--paper-muted); }
.light .check-list li::before { color: #17914f; }

.quality {
  padding: 24px;
  border-radius: 22px;
  background: var(--surface-2);
}
.quality-dot { width: 12px; height: 12px; margin-bottom: 22px; border-radius: 50%; background: var(--green); }
.quality:nth-child(2) .quality-dot { background: #ffd60a; }
.quality:nth-child(3) .quality-dot { background: #77777c; }
.quality strong { display: block; margin-bottom: 7px; }
.quality span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.trust-showcase { border-top: 1px solid var(--line); background: #050506; }
.trust-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(44px,8vw,110px); align-items: center; }
.trust-copy h2 { max-width: 650px; }
.quality-stack { display: grid; gap: 12px; }
.quality-stack .quality { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 24px 26px; }
.quality-stack .quality-dot { margin: 6px 0 0; }
.quality-stack .quality:nth-child(2) .quality-dot { background: #ffd60a; }
.quality-stack .quality:nth-child(3) .quality-dot { background: #77777c; }

/* Umfang: kostenlos gegenueber Vollversion. */
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
.plan {
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid rgba(17,17,15,.10);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 18px 60px rgba(52,45,33,.07);
}
.plan-featured { border-color: rgba(198,108,0,.34); background: linear-gradient(155deg, #fff8ee, #fff 58%); }
.plan-label {
  margin: 0 0 12px;
  color: var(--paper-muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.plan-featured .plan-label { color: #c66c00; }
.plan h3 { margin-bottom: 10px; font-size: clamp(24px, 2.4vw, 31px); }
.plan-lede { margin: 0 0 24px; color: var(--paper-muted); font-size: 17px; line-height: 1.55; }
.plan-note { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(17,17,15,.10); color: var(--paper-muted); font-size: 14px; line-height: 1.55; }
.plan-toggle { display: none; }
.plans-showcase .actions { margin-top: 38px; }

/* Screenshot-Story: die Schritte scrollen, das Geraet bleibt stehen. */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(30px, 5vw, 80px); align-items: start; }
.story-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 62vh;
  max-width: 460px;
  padding-block: 8px;
}
.js .story-step { opacity: .3; transition: opacity .45s ease; }
.js .story-step.is-active { opacity: 1; }
.story-index { margin: 0 0 14px; color: #c66c00; font-size: 13px; font-weight: 750; letter-spacing: .12em; }
.story-step h3 { margin-bottom: 12px; font-size: clamp(26px, 3vw, 38px); }
.story-step > p:not(.story-index) { margin: 0; color: var(--paper-muted); font-size: 18px; line-height: 1.6; }
.story-inline { display: none; }

.story-stage { position: sticky; top: 116px; display: grid; height: calc(100vh - 150px); place-items: center; }
.story-device {
  position: relative;
  width: min(100%, 310px, calc((100vh - 170px) * 1080 / 2208));
  aspect-ratio: 1080 / 2208;
}
.story-device img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 26px 54px rgba(52, 45, 33, .3));
  transition: opacity .35s ease;
}
.story-device img.is-active { opacity: 1; }
.circle-button {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
}
.circle-button:hover { background: #2c2c2e; }

.page-hero {
  padding: clamp(86px, 11vw, 150px) 0 clamp(58px, 8vw, 100px);
  background: radial-gradient(65% 90% at 80% 0, rgba(245,155,22,.13), transparent 70%);
}
.page-hero h1 { max-width: 980px; font-size: clamp(44px, 7vw, 82px); }
.page-hero .lede { max-width: 800px; }
.anchor-bar { position: sticky; top: 58px; z-index: 50; background: rgba(12,12,13,.88); border-block: 1px solid var(--line); backdrop-filter: blur(20px); }
.anchor-links { display: flex; gap: 26px; overflow-x: auto; padding: 15px 0; color: var(--muted); font-size: 13px; white-space: nowrap; scrollbar-width: none; }
.anchor-links::-webkit-scrollbar { display: none; }
.anchor-links a:hover { color: var(--orange); }

.feature-section { padding: clamp(74px, 9vw, 125px) 0; border-bottom: 1px solid var(--line); }
.feature-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(40px, 8vw, 110px); align-items: start; }
.feature-intro { position: sticky; top: 125px; }
.feature-list { display: grid; gap: 18px; }
.feature-item { padding: 28px; border-radius: 24px; background: var(--surface-2); }
.feature-item::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  border: 1px solid rgba(245,155,22,.24);
  border-radius: 11px;
  background-color: rgba(245,155,22,.08);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 21px 21px;
}
#beschleunigung .feature-item::before,
#acceleration .feature-item::before { background-image: url("assets/icon-speed.svg"); }
#trackday .feature-item::before { background-image: url("assets/icon-track.svg"); }
#auswerten .feature-item::before,
#analyse .feature-item::before { background-image: url("assets/icon-analysis.svg"); }
#watch .feature-item::before { background-image: url("assets/icon-watch.svg"); }
#daten .feature-item::before,
#data .feature-item::before { background-image: url("assets/icon-data.svg"); }
.feature-item h3 { font-size: 23px; }
.feature-toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}
.feature-item p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.feature-item .tag { display: inline-block; margin-top: 16px; color: var(--orange); font-size: 13px; font-weight: 700; }
.feature-item .tag + .tag { margin-left: 14px; }
.feature-item .method-link { text-decoration: underline; text-decoration-color: rgba(245,155,22,.35); text-underline-offset: 4px; }
.feature-item .method-link:hover { color: #ffb33f; text-decoration-color: currentColor; }
.media-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.media-pair img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 24px; background: var(--surface); object-fit: contain; }
.phone-pair {
  gap: clamp(24px, 3vw, 36px);
}
.phone-pair figure { margin: 0; min-width: 0; }
.phone-pair img {
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  padding: clamp(26px, 2.4vw, 34px) clamp(20px, 2vw, 28px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 30px;
  background: linear-gradient(145deg, #1b1b1e, #101012);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.28));
}
.phone-pair figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}
.analysis-device-grid { margin-top: 18px; }
.mobile-gallery-controls { display: none; }
.mobile-gallery-button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mobile-gallery-button:disabled { opacity: .3; cursor: default; }
.mobile-gallery-status { min-width: 128px; color: var(--muted); font-size: 13px; font-weight: 650; text-align: center; }
.mobile-gallery-status::after {
  content: attr(data-hint);
  display: block;
  margin-top: 3px;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-size: 10px;
  font-weight: 550;
  line-height: 1.2;
}
.media-pair img[src*="shots/device/"] {
  margin-inline: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.5));
}
.phone-tile {
  --phone-tile-pad-x: clamp(20px, 2vw, 28px);
  --phone-tile-pad-y: clamp(26px, 2.4vw, 34px);
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  padding: var(--phone-tile-pad-y) var(--phone-tile-pad-x);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 30px;
  background: linear-gradient(145deg, #1b1b1e, #101012);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.28));
}
.phone-pair .phone-tile img {
  position: absolute;
  inset: var(--phone-tile-pad-y) var(--phone-tile-pad-x);
  width: calc(100% - var(--phone-tile-pad-x) - var(--phone-tile-pad-x));
  height: calc(100% - var(--phone-tile-pad-y) - var(--phone-tile-pad-y));
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  aspect-ratio: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.5));
}

.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.summary-card { padding: 28px; border-radius: 24px; background: var(--surface-2); }
.summary-card strong { display: block; margin-bottom: 9px; font-size: 19px; }
.summary-card span { color: var(--muted); font-size: 15px; line-height: 1.5; }

.method-stack { display: grid; gap: 18px; }
.method {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  overflow: hidden;
  scroll-margin-top: 82px;
}
.method summary {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 92px;
  padding: 24px 30px;
  list-style: none;
  cursor: pointer;
}
.method summary::-webkit-details-marker { display: none; }
.method summary::after { content: "+"; margin-left: auto; color: var(--orange); font-size: 28px; font-weight: 300; }
.method[open] summary::after { content: "−"; }
.method-title { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.method-kicker { min-width: 68px; color: var(--orange); font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.method-content { padding: 0 30px 32px 118px; }
.method-content p, .method-content li { color: var(--muted); font-size: 17px; line-height: 1.65; }
.method-content h3 { margin-top: 34px; font-size: 22px; }
.formula { overflow-x: auto; margin: 24px 0; padding: 22px; border-radius: 18px; background: #050505; color: #e7e7eb; font: 16px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.science-shot { display: block; width: min(100%, 290px); height: auto; aspect-ratio: 1080 / 2208; margin: 32px auto 4px; object-fit: contain; filter: drop-shadow(0 20px 44px rgba(0,0,0,.55)); }
.method-note { padding: 18px 20px; border-left: 3px solid var(--orange); border-radius: 0 14px 14px 0; background: rgba(245,155,22,.08); }
.method:target { border-color: rgba(245,155,22,.6); box-shadow: 0 0 0 4px rgba(245,155,22,.09); }

.faq-tools { position: sticky; top: 58px; z-index: 40; padding: 18px 0; background: rgba(0,0,0,.85); border-block: 1px solid var(--line); backdrop-filter: blur(18px); }
.faq-search { width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); font-size: 16px; }
.faq-search::placeholder { color: #77777c; }
.faq-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; color: var(--muted-2); font-size: 12px; }
.faq-group { margin-bottom: 62px; }
.faq-group h2 { margin-bottom: 16px; color: var(--orange); font-size: 15px; letter-spacing: .09em; text-transform: uppercase; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; gap: 20px; padding: 22px 2px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 620; line-height: 1.35; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; color: var(--orange); font-size: 24px; font-weight: 300; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 42px 26px 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.faq-answer p { margin: 0 0 14px; }
[hidden] { display: none !important; }

.legal { display: grid; gap: 48px; }
.legal section { scroll-margin-top: 110px; }
.legal h2 { font-size: clamp(25px, 3vw, 34px); }
.legal h3 { margin: 30px 0 10px; font-size: clamp(19px, 2vw, 23px); }
.legal p, .legal li { color: var(--muted); font-size: 17px; line-height: 1.65; }
.legal ul { display: grid; gap: 10px; margin: 18px 0 0; padding-left: 22px; }
.legal-document > p { margin: 0; }
.legal-document .legal-section { padding-top: 2px; }
.legal-card { padding: 28px; border-radius: 24px; background: var(--surface-2); }
.privacy-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}
.privacy-switch a {
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.privacy-switch a:hover { border-color: rgba(245,155,22,.45); transform: translateY(-2px); }
.privacy-switch a[aria-current="page"] { border-color: rgba(245,155,22,.55); background: rgba(245,155,22,.10); }
.privacy-switch strong { color: var(--ink); font-size: 17px; }
.privacy-switch span { color: var(--muted-2); font-size: 14px; line-height: 1.4; }

.cta {
  padding: clamp(68px, 9vw, 116px) 0;
  text-align: center;
  background: radial-gradient(60% 100% at 50% 100%, rgba(245,155,22,.17), transparent 74%);
}
.cta h2 { max-width: 820px; margin-inline: auto; }
.cta .lede { max-width: 620px; margin-inline: auto; }
.cta .actions { justify-content: center; }
.final-cta { padding-block: clamp(92px,12vw,170px); }
.final-cta h2 { font-size: clamp(42px,6vw,76px); }

.site-footer { padding: 38px 0 46px; background: #09090a; border-top: 1px solid var(--line); color: var(--muted-2); }
.safety { margin: 0 0 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.55; }
.trademark-notice { max-width: 980px; margin: -8px 0 24px; font-size: 12px; line-height: 1.55; color: #77777d; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; font-size: 12px; }
.footer-row a:hover { color: var(--ink); }
.copyright { margin-left: auto; }

/* Bewegung -------------------------------------------------------------- */
/* Der Ausgangszustand gilt nur, wenn JavaScript laeuft - ohne JS bleibt
   alles sichtbar, statt unsichtbar haengen zu bleiben. */
.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .75s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform .75s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed,
.js [data-reveal-group].is-revealed > * { opacity: 1; transform: none; }
/* Gruppen laufen gestaffelt an. Der Container wird beobachtet, nicht das
   einzelne Kind - sonst blieben Karten in Querkarussells unsichtbar. */
.js [data-reveal-group] > :nth-child(2) { --reveal-delay: 90ms; }
.js [data-reveal-group] > :nth-child(3) { --reveal-delay: 180ms; }
.js [data-reveal-group] > :nth-child(n+4) { --reveal-delay: 270ms; }
.js .reveal-delay-1 { --reveal-delay: 90ms; }
.js .reveal-delay-2 { --reveal-delay: 180ms; }
.js .reveal-delay-3 { --reveal-delay: 270ms; }

@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes device-in {
  from { opacity: 0; transform: translate3d(0, 44px, 0) scale(.97); }
  to { opacity: 1; transform: none; }
}

.hero-copy > * { animation: rise-in .85s cubic-bezier(.22, .61, .36, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .07s; }
.hero-copy > :nth-child(3) { animation-delay: .14s; }
.hero-copy > :nth-child(4) { animation-delay: .21s; }
.hero-copy > :nth-child(5) { animation-delay: .28s; }
.hero-device { animation: device-in 1.1s cubic-bezier(.22, .61, .36, 1) .12s both; }
.analysis-panel { animation: rise-in .5s cubic-bezier(.22, .61, .36, 1) both; }

/* Kopfzeile bekommt erst nach dem Scrollen eine Kante. */
.site-header { transition: background .3s ease, border-color .3s ease; border-bottom-color: transparent; }
.site-header[data-scrolled="true"] { background: rgba(0,0,0,.82); border-bottom-color: rgba(255,255,255,.09); }

/* Karten reagieren auf den Zeiger. */
.mode-card, .feature-item, .quality, .watch-device {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
.mode-card:hover, .feature-item:hover, .quality:hover { transform: translateY(-4px); border-color: rgba(245,155,22,.35); }
.watch-device:hover { transform: translateY(-6px); }

/* Aufklapper und Links reagieren ebenfalls. */
.faq-item summary, .method summary { transition: color .2s ease, background .2s ease; }
.faq-item summary:hover, .method summary:hover { color: var(--orange); }
.faq-item summary::after, .method summary::after {
  display: inline-block;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1);
}
.faq-item[open] summary::after, .method[open] summary::after { transform: scale(1.25); }
.text-link { transition: color .2s ease; }
.text-link:hover { color: var(--orange-strong); }
.text-link::after { display: inline-block; transition: transform .2s cubic-bezier(.22, .61, .36, 1); }
.text-link:hover::after { transform: translateX(3px); }

/* Druck-Zustand: kurzes Nachgeben statt hartem Klick. */
.button:active, .circle-button:active, .nav-cta:active { transform: translateY(0) scale(.97); }
.mode-card:active, .feature-item:active, .quality:active { transform: translateY(-2px); }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr .55fr; }
  .mode-grid { grid-template-columns: 1fr 1fr; }
  .mode-card:last-child { grid-column: 1 / -1; }
  .watch-layout, .feature-layout { grid-template-columns: 1fr; }
  .analysis-panel { grid-template-columns: 1fr; }
  .stage-visual { min-height: 520px; }
  .trust-layout { grid-template-columns: 1fr; }
  .feature-intro { position: static; }
  .summary-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-shell { width: min(100% - 28px, var(--max)); }
  .menu-button { display: block; }
  .nav-links {
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: 12px 20px 22px;
    background: rgba(10,10,11,.97);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
  }
  .site-header[data-open="true"] .nav-links { transform: none; visibility: visible; }
  .nav-links a { padding: 14px 8px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav-links .nav-cta { margin-top: 12px; border-bottom: 0; text-align: center; }
  .wrap, .narrow { width: min(100% - 32px, var(--max)); }
  .section { padding: 64px 0; }
  .section.compact { padding: 52px 0; }
  .section-head { margin-bottom: 34px; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 10px; min-height: auto; padding: 72px 0 36px; text-align: center; }
  .hero-copy h1 { margin-bottom: 18px; font-size: clamp(42px, 13vw, 56px); }
  .hero .lede { font-size: 18px; }
  .hero .actions { margin-top: 24px; }
  .hero .actions { justify-content: center; }
  .hero-device { width: min(61vw, 242px); margin-top: 16px; }
  .hero-facts { justify-content: center; gap: 7px 16px; margin-top: 18px; }
  .mode-grid { grid-template-columns: 1fr; gap: 14px; overflow: visible; padding: 0; }
  .mode-card, .mode-card:last-child { grid-column: auto; min-height: 0; padding: 24px; }
  .mode-card h3 { min-height: 0; font-size: 24px; }
  .mode-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
  }
  .mode-card .eyebrow { grid-column: 1; grid-row: 1; }
  .mode-card h3 { grid-column: 1; grid-row: 2; }
  .mode-card p:not(.eyebrow) { grid-column: 1; grid-row: 3; }
  .mode-card .mode-access { grid-column: 1; grid-row: 4; align-self: start; }
  .mode-card > p:not(.eyebrow) { min-height: 0; }
  .mode-card .screen {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 112px;
    margin: 0;
    align-self: center;
  }
  .analysis-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; border-radius: 18px; }
  .analysis-tabs button { min-width: 0; padding: 9px 6px; font-size: 12px; line-height: 1.2; white-space: normal; }
  .summary-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .summary-card { padding: 20px 22px; border-radius: 20px; }
  .summary-card strong { margin-bottom: 6px; font-size: 18px; }
  .summary-card span { font-size: 15px; line-height: 1.45; }
  .analysis-panel { min-height: 0; }
  .stage-copy { padding: 32px 28px; }
  .stage-visual { min-height: 0; padding: 20px; }
  .stage-visual img { max-height: none; border-radius: 18px; }
  .stage-device-visual img { width: auto; max-height: min(480px, 58vh); border-radius: 0; }
  .watch-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; overflow: visible; }
  .story { grid-template-columns: 1fr; touch-action: pan-y pinch-zoom; }
  .story-stage { display: none; }
  .story-step { min-height: 0; max-width: none; padding-block: 0; }
  .js .story-step { display: none; opacity: 1; }
  .js .story-step.is-active { display: flex; opacity: 1; }
  .story-steps { display: block; }
  .story-inline { display: block; width: min(100%, 228px); height: auto; margin: 22px auto 0; aspect-ratio: 1080 / 2208; object-fit: contain; filter: drop-shadow(0 18px 38px rgba(52,45,33,.26)); user-select: none; -webkit-user-drag: none; }
  .mobile-gallery-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
  .story-mobile-controls { margin-top: 22px; }
  .anchor-bar { position: static; }
  .anchor-links { flex-wrap: wrap; gap: 8px; overflow: visible; padding-block: 12px; white-space: normal; }
  .anchor-links a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; }
  .method summary {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 22px 20px;
  }
  .method summary::after { margin-left: 0; }
  .method-kicker { min-width: 0; }
  .method-title { min-width: 0; }
  .method-content { padding: 0 22px 26px; }
  .media-pair, .plan-grid { grid-template-columns: 1fr; }
  .plan { padding: 26px 24px; }
  .plan-lede { margin-bottom: 18px; }
  .plan .check-list { margin-top: 20px; }
  .js .plan .check-list li:nth-child(n + 3) { display: none; }
  .js .plan.is-expanded .check-list li { display: flex; }
  .plan-toggle {
    margin-top: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a85d00;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .js .plan-toggle { display: inline-block; }
  .plan-toggle::after { content: " +"; }
  .plan.is-expanded .plan-toggle::after { content: " −"; }
  .plan-note { margin-top: 18px; padding-top: 16px; }
  .plans-showcase .actions { margin-top: 28px; }
  .feature-section { padding: 58px 0; }
  .feature-list { gap: 10px; }
  .feature-item { position: relative; min-height: 66px; padding: 0 18px 0 68px; border: 1px solid var(--line); border-radius: 20px; }
  .feature-item::before { position: absolute; top: 15px; left: 17px; width: 34px; height: 34px; margin: 0; }
  .feature-item h3 { margin: 0; font-size: 18px; line-height: 1.25; }
  .feature-toggle { position: relative; min-height: 64px; padding: 12px 34px 12px 0; cursor: pointer; }
  .feature-toggle::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    color: var(--orange);
    font-size: 24px;
    font-weight: 400;
    transform: translateY(-50%);
  }
  .feature-item.is-open .feature-toggle::after { content: "−"; }
  .js .feature-item-details { display: none; padding: 0 12px 18px 0; }
  .js .feature-item.is-open .feature-item-details { display: block; }
  .feature-item p { font-size: 15px; }
  .feature-item .tag { margin-top: 12px; }
  .feature-item .tag + .tag { display: block; margin-left: 0; }
  .phone-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; margin-top: 24px; }
  .phone-pair img { width: 100%; padding: 12px 9px; border-radius: 22px; }
  .phone-tile { --phone-tile-pad-x: 9px; --phone-tile-pad-y: 12px; border-radius: 22px; }
  .phone-pair .phone-tile img { padding: 0; border-radius: 0; }
  .phone-pair figcaption { margin-top: 10px; font-size: 13px; line-height: 1.3; }
  .privacy-switch { grid-template-columns: 1fr; margin-top: 28px; }
  .privacy-switch a { min-height: 0; padding: 17px 18px; border-radius: 18px; }
  .footer-row { align-items: flex-start; }
  .copyright { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal], .js [data-reveal].is-revealed,
  .js [data-reveal-group] > *, .js [data-reveal-group].is-revealed > * { opacity: 1; transform: none; }
  .iphone-device-shot { transform: none; }
  .mode-card:hover, .feature-item:hover, .quality:hover, .watch-device:hover { transform: none; }
  .story-device img { transform: none; }
}