/* ═══════════════════════════════════════════════════════════════════
   Celeris — Landing Page
   Die Farben sind die Dämmerungspalette der App (Celeris/Style/AppColors.swift).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Kanonische Dämmerungspalette — identisch zur App */
  --night:        #11141A;
  --astronomical: #222833;
  --nautical:     #323C4D;
  --civil:        #4B5973;
  --bluehour:     #4967B3;
  --goldenhour:   #E1B12C;
  --day:          #99B5E8;

  /* Akzente */
  --sun:          #FBC531;
  --moon:         #5EA8F5;
  --milkyway:     #7C6CE0;
  --opportunity:  #4FB286;

  --bg:        var(--night);
  --bg-alt:    #0C0F14;
  --surface:   rgba(255, 255, 255, 0.035);
  --line:      rgba(255, 255, 255, 0.10);
  --text:      #E8EDF5;
  --text-dim:  #97A3B6;

  --wrap: 1180px;
  --r: 16px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 .5em; font-weight: 640; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; color: var(--text-dim); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap.narrow { max-width: 760px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--day); color: #000; padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

.eyebrow {
  font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--moon); margin-bottom: .9em;
}

.note {
  font-size: .93rem;
  border-left: 2px solid var(--line);
  padding-left: 16px;
  color: var(--text-dim);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 8px 16px; font-size: .88rem; background: var(--surface); border-color: var(--line); }
.btn--sm:hover { border-color: rgba(255,255,255,.28); }

.btn--store { background: var(--text); color: #06080C; padding: 11px 24px; }
.btn--store:hover { background: #fff; }
.btn--store span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; font-size: 1.06rem; }
.btn--store small { font-size: .66rem; font-weight: 500; opacity: .7; letter-spacing: .04em; }

.btn--ghost { border-color: var(--line); color: var(--text); background: var(--surface); }

/* Apples App-Store-Badge. Er kommt fertig gestaltet: Farben, Proportionen und
   Schrift dürfen nach den Identity Guidelines nicht angefasst werden, deshalb
   bekommt er hier nur eine Breite, den geforderten Freiraum ringsum — mindestens
   ein Zehntel der Höhe — und dieselbe Bewegung wie die übrigen Knöpfe. */
.badge { display: inline-block; line-height: 0; padding: 6px; margin: -6px;
         transition: transform .18s ease; }
.badge:hover { transform: translateY(-1px); }
.badge img { width: 180px; height: auto; }
.btn--ghost:hover { border-color: rgba(255,255,255,.3); }

/* ── Navigation ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 12px max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  background: rgba(17, 20, 26, .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 650; letter-spacing: -.01em; text-decoration: none; font-size: 1.05rem;
}
.nav__brand img { border-radius: 8px; }
.nav__links { display: flex; flex-wrap: wrap; gap: 10px 20px; min-width: 0; margin-left: auto; font-size: .93rem; }
.nav__links a { color: var(--text-dim); text-decoration: none; transition: color .15s; }
.nav__links a:hover { color: var(--text); }
.nav__links a { white-space: nowrap; }
.nav a:focus-visible { outline: 2px solid var(--moon); outline-offset: 4px; border-radius: 3px; }
.nav__brand, .nav__lang, .nav > .btn { flex-shrink: 0; }
.guide-teaser ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; padding-left: 1.15em; margin: 24px 0 30px; }
.guide-teaser li { padding: 5px 0; }
@media (max-width: 600px) { .guide-teaser ul { grid-template-columns: 1fr; } }

/* Sprachumschalter. Die aktuelle Sprache bleibt sichtbar statt zu verschwinden —
   erst der Kontrast sagt, wo man gerade ist. */
.nav__lang { display: flex; align-items: center; gap: 7px; font-size: .8rem; letter-spacing: .05em; }
.nav__lang a { color: var(--text-dim); text-decoration: none; transition: color .15s; }
.nav__lang a:hover { color: var(--text); }
.nav__lang a[aria-current="true"] { color: var(--text); font-weight: 650; }
.nav__lang i { color: var(--text-dim); opacity: .45; font-style: normal; }

/* The same four global destinations remain visible without JavaScript. */
@media (max-width: 860px) {
  .nav { position: static; flex-wrap: wrap; gap: 8px 16px; }
  .nav__links {
    order: 1; flex: 1 0 100%; margin-left: 0; gap: 0 20px;
    padding-top: 6px; border-top: 1px solid var(--line);
  }
  .nav__links a { display: inline-flex; align-items: center; min-height: 44px; white-space: normal; }
  .nav__lang { margin-left: auto; }
}

.page-nav { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.page-nav__inner { display: flex; align-items: center; gap: 12px 24px; padding-block: 11px; }
.page-nav__label {
  flex: 0 0 auto; color: var(--text-dim); font-size: .72rem; font-weight: 650;
  letter-spacing: .11em; text-transform: uppercase;
}
.page-nav__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.page-nav a { color: var(--text-dim); font-size: .84rem; text-decoration: none; }
.page-nav a:hover { color: var(--text); }
.page-nav a:focus-visible { outline: 2px solid var(--moon); outline-offset: 4px; border-radius: 3px; }
@media (max-width: 480px) {
  .nav { padding-inline: 16px; column-gap: 12px; }
  .nav > .btn { padding-inline: 12px; }
  .page-nav__inner { align-items: flex-start; flex-direction: column; padding-block: 13px; }
  .page-nav__links { row-gap: 8px; }
}

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 0; }

.hero__photo {
  position: absolute; inset: 0;
  background: url('../img/photos/hero-milchstrasse.jpg') center / cover no-repeat;
  opacity: .72;
}
/* Oben hell genug, dass das Band der Milchstraße zu erkennen ist, nach unten
   hin dicht — dort steht der Fließtext. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 70% 10%, rgba(73,103,179,.22), transparent 60%),
    linear-gradient(180deg, rgba(17,20,26,.45) 0%, rgba(17,20,26,.80) 58%, var(--night) 100%);
}

.hero__inner {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 0 24px clamp(60px, 8vw, 110px);
}

.hero__icon {
  border-radius: 22px; margin-bottom: 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.hero .lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); max-width: 34em; color: #B9C4D4; }

.purchase-promise {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  max-width: 34em;
  margin-top: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(79, 178, 134, 0.5);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(79, 178, 134, 0.16), rgba(79, 178, 134, 0.06));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}
.purchase-promise__mark {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4FB286;
  color: #071710;
  font-size: 1.05rem;
  font-weight: 900;
}
.purchase-promise p { margin: 0; color: #DCE7E1; line-height: 1.45; }
.purchase-promise strong { color: #FFFFFF; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 22px; }
.hero__req { font-size: .85rem; color: var(--text-dim); margin: 0; }

.hero__shot { display: flex; justify-content: center; align-items: flex-start; }

/* Dämmerungsband — die sieben Phasen der App als Verlauf */
.twilight-band {
  position: relative;
  height: 5px;
  background: linear-gradient(90deg,
    var(--night) 0%, var(--astronomical) 9%, var(--nautical) 18%, var(--civil) 26%,
    var(--bluehour) 33%, var(--goldenhour) 40%, var(--day) 50%,
    var(--goldenhour) 60%, var(--bluehour) 67%, var(--civil) 74%,
    var(--nautical) 82%, var(--astronomical) 91%, var(--night) 100%);
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__shot { order: 2; }
}

/* ── Gerätebilder ──────────────────────────────────────────────── */
/* Kein gezeichneter Rahmen mehr: Telefon, Uhr und Mac stecken als Apples
   eigenes Produktbild schon in der PNG, samt durchsichtigem Rand ringsum
   (zusammengesetzt in tools/compose_bezels.py). Der Kasten drumherum trägt
   deshalb nur noch die Breite — Polsterung, Hintergrund, Radius und
   Schlagschatten säßen jetzt neben dem Gerät statt darum herum. */
.device { width: 100%; }
/* Ein `box-shadow` zeichnete das Rechteck des Kastens; `drop-shadow` folgt der
   Alpha-Kante und legt den Schatten um die Silhouette des Geräts. */
.device img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 28px 40px rgba(0,0,0,.6));
}
.device--phone { max-width: 290px; }
.device--hero { max-width: 320px; }
.device--sm { max-width: 210px; }
/* Dieselbe Spaltenbreite wie beim gezeichneten Gehäuse zuvor. Das Bild wird
   höher, weil das Armband oben und unten mit im Produktbild steckt — das ist
   so gewollt und kostet nur Höhe, keine Breite. */
.device--watch { width: calc(50% - 8px); max-width: 235px; }

/* `.desktop-preview` aus landmarks.css setzt `margin: 28px 0 0`, und
   landmarks.css wird nach style.css geladen: nur die doppelte Klasse
   überschreibt den Rand und zentriert das Gerät. `width: 100%` ist dabei
   Pflicht, nicht Kosmetik: automatische Seitenränder nehmen einem Grid-Element
   die Streckung, und dann bliebe als Breite die des Bildes übrig — die ist
   wegen `sizes="…800px"` genau 800 px, das Notebook bliebe also unter seinen
   920 px stehen. */
.desktop-preview.device--mac { width: 100%; max-width: 920px; margin: 28px auto 0; }
/* Zwei Fenster untereinander brauchen mehr Abstand voneinander als vom Text. */
.device--mac + .device--mac { margin-top: 48px; }
/* Die Mac-Bilder stehen in derselben `.split`-Zeile, in der sonst Text und
   Telefone nebeneinanderstehen. Für ein aufgeklapptes Notebook ist eine halbe
   Spalte zu schmal, deshalb bekommt eine Zeile mit Mac genau eine Spalte: die
   beiden Geräte stehen untereinander und dürfen 920 px breit werden, statt auf
   je 500 px zusammenzuschrumpfen. Der Zeilenabstand des Rasters fällt weg,
   sonst summierte er sich mit dem Abstand darüber. */
.split:has(.device--mac) { grid-template-columns: 1fr; row-gap: 0; }
/* landmarks.css gibt jedem `.desktop-preview img` Rahmen und Radius; hier zöge
   beides eine Linie quer durch die durchsichtige Umgebung des Notebooks. */
.desktop-preview.device--mac img { border: 0; border-radius: 0; }
/* Farbe und Größe der Bildunterschrift stehen schon in landmarks.css; hier
   fehlen nur die Mitte und der Abstand — wieder über die doppelte Klasse,
   weil landmarks.css später geladen wird. */
.desktop-preview.device--mac figcaption { margin-top: 16px; text-align: center; }

/* ── Zahlen ────────────────────────────────────────────────────── */
.stats { border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; padding-block: 44px;
}
.stat { text-align: center; }
.stat b {
  display: block; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 640;
  letter-spacing: -.03em; color: var(--text); line-height: 1.1;
}
.stat span { font-size: .87rem; color: var(--text-dim); }
@media (max-width: 700px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Sektionen ─────────────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section > .wrap > h2 { max-width: 20ch; }

/* ── Plan und Wirklichkeit ─────────────────────────────────────── */
.proof {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 55% at 16% 0%, rgba(73,103,179,.16), transparent 70%),
    radial-gradient(65% 55% at 100% 100%, rgba(124,108,224,.10), transparent 72%),
    var(--night);
  border-bottom: 1px solid var(--line);
}
.proof__header {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(280px, 1.2fr);
  gap: clamp(24px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 64px);
}
.proof__header h2 { max-width: 13ch; margin-bottom: 0; }
.proof__intro { max-width: 58ch; margin: 0; font-size: 1.02rem; }

.proof-grid {
  display: grid;
  gap: 24px;
}
.proof-card {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(250px, .58fr);
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.035);
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}
.proof-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 44px);
}
.proof-card__body .eyebrow { margin-bottom: .7em; }
.proof-card__body h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.proof-card__body p:not(.eyebrow) { margin-bottom: 18px; }
.proof-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.proof-card__meta span {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: .76rem;
}
.proof-card__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: clamp(16px, 2.5vw, 28px);
  background: rgba(7,9,13,.68);
  border-right: 1px solid var(--line);
}
.proof-shot { min-width: 0; margin: 0; }
.proof-shot figcaption {
  margin-bottom: 10px;
  color: var(--text-dim);
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.proof-shot:last-child figcaption { text-align: right; }
.proof-shot img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #080a0e;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.proof-card__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 27px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--moon);
  font-size: 1rem;
}

@media (max-width: 900px) {
  .proof-card { grid-template-columns: 1fr; }
  .proof-card__pair { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .proof__header { grid-template-columns: 1fr; align-items: start; }
  .proof-card__body { padding: 26px 22px; }
  .proof-card__pair { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 6px; padding: 14px; }
  .proof-card__arrow { width: 24px; height: 24px; font-size: .78rem; }
  .proof-shot figcaption { font-size: .62rem; }
  .proof-shot img { border-radius: 9px; }
}

/* ── Karten-Raster ─────────────────────────────────────────────── */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: 52px;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 26px 24px;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.card:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.055);
  transform: translateY(-2px);
}
.card__dot {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot); margin-bottom: 18px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent);
}
.card h3 { margin-bottom: .45em; }
.card p { margin: 0; font-size: .95rem; }

/* ── Split-Sektionen ───────────────────────────────────────────── */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
  padding-block: clamp(40px, 6vw, 76px);
}
.split + .split { border-top: 1px solid var(--line); }
.split--rev .split__text { order: 2; }
.split__text h2 { max-width: 16ch; }
.split__text p { max-width: 46ch; }

/* align-items: flex-start ist hier Pflicht, nicht Kosmetik: mit dem Default
   `stretch` zieht das versetzte zweite Telefon (margin-top) die Flex-Zeile
   höher, und der Kasten des ersten wächst mit, während das Bild darin seine
   Höhe behält — unten bliebe ein leerer Streifen. */
.split__media {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 20px; position: relative;
}
.device--offset { margin-top: 56px; }
.split__media--row { flex-wrap: wrap; gap: 16px; }
.split__media--row .device--phone { margin-top: 0; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__text { order: 0; }
  .device--offset { margin-top: 0; }
  .split__media { flex-wrap: wrap; }
}

/* ── Häkchenlisten ─────────────────────────────────────────────── */
.ticks { list-style: none; padding: 0; margin: 0 0 1.1em; }
.ticks li {
  position: relative; padding-left: 26px; margin-bottom: .55em;
  color: var(--text-dim); font-size: .95rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--opportunity);
}
.ticks--inline { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 8px; }

/* ── Foto-Galerie ──────────────────────────────────────────────── */
.gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin-top: 20px;
}
.gallery__item { margin: 0; }
/* Das Foto selbst steht inline im HTML (background-image), damit der Pfad
   relativ zum Dokument aufgelöst wird und nicht relativ zu dieser Datei. */
.gallery__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--astronomical);
  background-size: cover;
  background-position: center;
}
.gallery figcaption {
  margin-top: 12px; font-size: .87rem; color: var(--text-dim);
}

/* ── Breites Band mit Foto ─────────────────────────────────────── */
.band {
  position: relative; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--line);
  padding: clamp(36px, 5vw, 68px);
}
.band__photo {
  position: absolute; inset: 0;
  background: url('../img/photos/nacht-panorama.jpg') center / cover no-repeat;
}
/* Verlauf nach rechts hin offen, damit das Foto dort sichtbar bleibt und der
   Text links trotzdem auf ruhigem Grund steht. */
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,15,20,.95) 0%, rgba(12,15,20,.82) 46%, rgba(12,15,20,.12) 100%);
}
.band__text { position: relative; z-index: 1; max-width: 58ch; }
.band__text h2 { max-width: 18ch; }

/* Schmal gibt es kein Rechts mehr, das frei bleiben könnte — der Text steht
   dann über dem ganzen Foto und braucht durchgehend Deckung. */
@media (max-width: 760px) {
  .band::after {
    background: linear-gradient(180deg, rgba(12,15,20,.90) 0%, rgba(12,15,20,.86) 62%, rgba(12,15,20,.55) 100%);
  }
}

/* ── Widget-Aufnahme ───────────────────────────────────────────── */
/* Kein Telefonrahmen: das ist kein Bildschirm, sondern eine Karte, die auf
   einem fremden Homescreen sitzt. Die runden Ecken bringt die PNG selbst mit,
   damit hier nichts geklammert werden muss, was schon Alpha ist. */
.widget-shot {
  width: 100%; max-width: 420px;
  filter: drop-shadow(0 26px 54px rgba(0,0,0,.6));
}
.widget-shot img { display: block; width: 100%; height: auto; }

/* ── CTA ───────────────────────────────────────────────────────── */
.cta {
  position: relative; overflow: hidden;
  text-align: center;
  padding: clamp(72px, 10vw, 132px) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}
/* Foto und Verlauf wie im Hero, nur andersherum: oben die Kante zum vorigen
   Abschnitt, unten der Übergang in den Footer. */
.cta__photo {
  position: absolute; inset: 0;
  background: url('../img/photos/nacht-cta.jpg') center 35% / cover no-repeat;
  opacity: .45;
}
.cta__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(73,103,179,.22), transparent 62%),
    linear-gradient(180deg, var(--bg-alt) 0%, rgba(12,15,20,.72) 42%, rgba(12,15,20,.9) 100%);
}
.cta .wrap { position: relative; z-index: 1; }
.cta__icon {
  margin: 0 auto 26px; border-radius: 17px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta p { max-width: 42ch; margin-inline: auto; }
.cta .btn { margin-top: 12px; }
.cta .badge { margin-top: 12px; }
.cta__req { font-size: .85rem; color: var(--text-dim); margin: 18px 0 0; }
/* Der Absatz steht auf einem Foto unter einem Verlauf — ein Link darin braucht
   mehr als eine Farbe, um sich abzuheben. */
.cta p a { color: #fff; text-decoration: underline; text-underline-offset: 3px;
           text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,.5); }
.cta p a:hover { text-decoration-color: #fff; }

/* ── Dokumentseiten (Sternkatalog) ─────────────────────────────── */
.doc { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }
.doc__title { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: .4em; }
.doc .lede { font-size: 1.08rem; color: #B9C4D4; }

.doc h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin-top: 2.4em; padding-top: 1.6em;
  border-top: 1px solid var(--line);
}
.doc h3 { margin-top: 1.8em; font-size: 1.02rem; color: var(--text-dim); }
.doc a { color: var(--day); text-underline-offset: 3px; }
.doc a:hover { color: #fff; }

/* Buttons bringen ihre eigene Schriftfarbe mit, und die Regel für Textlinks
   darüber ist spezifischer als .btn--store — ohne diese Ausnahme stand das
   Linkblau auf dem hellen Knopf, und beim Überfahren Weiß auf Weiß. */
.doc a.btn--store,
.doc a.btn--store:hover { color: #06080C; }
.doc a.btn--ghost,
.doc a.btn--ghost:hover { color: var(--text); }

/* Die Sprungmarken dürfen nicht unter der klebenden Navigation landen. */
.doc :target { scroll-margin-top: 90px; }

.download {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  margin: 34px 0 8px; padding: 24px 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.download__meta { display: flex; flex-direction: column; gap: 3px; }
.download__meta b { font-size: 1.05rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.download__meta span { font-size: .87rem; color: var(--text-dim); }

.table-scroll { overflow-x: auto; margin: 18px 0 24px; }
.table {
  width: 100%; min-width: 460px;
  border-collapse: collapse; font-size: .92rem;
}
.table th, .table td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.table th {
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--moon); font-weight: 650;
}
.table td { color: var(--text-dim); }
.table td:first-child { color: var(--text); white-space: nowrap; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px;
}
.code {
  overflow-x: auto; margin: 4px 0 24px; padding: 18px 20px;
  background: #0A0D12; border: 1px solid var(--line); border-radius: var(--r);
  font-size: .85rem; line-height: 1.6;
}
.code code { background: none; border: 0; padding: 0; font-size: inherit; }

.callout {
  margin: 22px 0; padding: 20px 24px;
  border: 1px solid rgba(79,178,134,.35);
  background: rgba(79,178,134,.07);
  border-radius: var(--r);
}
.callout p { margin: 0; color: var(--text); font-size: .95rem; }

.lang { border-left: 2px solid var(--line); padding-left: 22px; }

/* ── Footer ────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 34px 0; font-size: .88rem; }
.footer__inner {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  align-items: center; justify-content: space-between;
}
.footer p { margin: 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer a { color: var(--text-dim); text-decoration: none; }
.footer a:hover { color: var(--text); }

/* Der Markenhinweis, den Apples Identity Guidelines für Material verlangen, das
   ihre Marken nennt. Volle Breite unter der Navigation, kleiner gesetzt — er
   gehört auf die Seite, aber nicht in den Vordergrund. */
.footer__marks {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: .76rem; line-height: 1.5;
  color: var(--text-dim); opacity: .7;
}

/* ── Einblenden beim Scrollen ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ── Googles Play-Badge ────────────────────────────────────────── */
/* Auch Googles Badge kommt fertig gestaltet und darf nicht verändert werden.
   Anders als Apples bringt es seinen Freiraum aber schon in der Grafik mit,
   und zwar je Sprache verschieden viel — deshalb bekommt es hier eine eigene
   Breite je Variante, damit am Ende beide Knöpfe gleich hoch aussehen. Die
   Badges richten sich an ihrer Mitte aus, weil die Grafiken unterschiedlich
   hoch sind. */
.badge--play img    { width: 231px; }   /* en_badge_web_generic: 41 px Rand ringsum */
.badge--play-de img { width: 202px; }   /* de_badge_web_generic: nur oben und unten Rand */
.badge { vertical-align: middle; }
.hero__actions { align-items: center; }