/* LightsOn — Landingpage
   Bewusst durchgehend dunkel wie die Stadt in der App (die Rechtstexte unter
   /legal/ haben ihre eigene Hell-Variante). Keine externen Ressourcen —
   die Datenschutzerklärung sagt zu, dass die Seite nichts einbettet. */

:root {
  --bg: #0c0e13;
  --bg-2: #11141c;
  --panel: #161a24;
  --panel-2: #1b2029;
  --line: #262c3a;
  --line-soft: #1f2532;
  --text: #c7cddb;
  --muted: #868ea1;
  --head: #ffffff;
  --accent: #ffc83c;
  --accent-soft: rgba(255, 200, 60, 0.14);
  --green: #4ade80;
  --red: #f0625f;
  --nav-h: 68px;
  --maxw: 1140px;
  --radius: 18px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  /* `clip` statt `hidden`: `overflow-x: hidden` macht den Body zum
     Scroll-Container. Ein `position: sticky`-Kind kann der Browser dann
     nicht mehr auf dem Compositor halten, sondern muss es bei jedem Frame
     im Hauptthread neu setzen — die Kopfleiste hinkt beim Scrollen sichtbar
     nach und wippt. `clip` schneidet nur ab, ohne Scroll-Container.
     (Der eigentliche Überstand ist ohnehin in .hero gekappt; das hier ist
     nur noch das Sicherheitsnetz.) */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Sprungmarke für Tastatur/Screenreader — ohne inline-Handler, damit die
   Content-Security-Policy keine Ausnahme dafür braucht. */
.skiplink { position: absolute; left: -9999px; top: 12px; z-index: 99; }
.skiplink:focus { left: 16px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; width: 100%; }
.center { text-align: center; }

/* ---------- Kopfzeile ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Bewusst OHNE `backdrop-filter`: der zwingt den Browser zu einer eigenen
   Compositing-Ebene, die er beim Scrollen laufend neu aus dem Hintergrund
   abtasten muss — auf dem Mac flackerte die Leiste dadurch beim ersten
   Scrollen sichtbar auf, egal ob der Filter erst dann entstand oder von
   Anfang an dalag. Ein fast deckender Hintergrund sieht auf dem dunklen
   Design praktisch gleich aus und animiert als reine Farbe völlig ruhig.
   Startwert mit Alpha 0 statt `transparent`, damit die Interpolation
   garantiert nicht über Schwarz läuft. */
/* Der Hintergrund liegt dauerhaft an — kein Umschalten beim Scrollen. Das
   war die Quelle allen Ärgers: Solange die Leiste oben durchsichtig war,
   sah man beim Scrollen die Oberkante des Heros als harte Kante durch sie
   hindurchwandern. Ein konstanter Balken kann das gar nicht erst zeigen,
   und die Leiste hebt sich auch ganz oben sichtbar vom Hero ab. */
.nav {
  background-color: rgba(12, 14, 19, 0.88);
  /* Haarlinie als inset-Schatten, NICHT als border: ein border zählt zur
     Höhe der Leiste, und der Hero müsste sie mit ausgleichen — sonst bleibt
     genau ein Pixel Seitenhintergrund als Kante stehen. */
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.nav .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 1.12rem;
  letter-spacing: -0.2px;
  color: var(--head);
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand b { color: var(--accent); font-weight: 750; }

.navlinks { display: flex; gap: 26px; font-size: 0.95rem; }
.navlinks a { color: var(--muted); position: relative; padding: 4px 0; transition: color 0.2s; }
.navlinks a:hover { color: var(--head); text-decoration: none; }
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.navlinks a:hover::after,
.navlinks a.active::after { transform: scaleX(1); }
/* `.active` setzt site.js für den Abschnitt, der gerade im oberen Drittel
   steht (IntersectionObserver, kein Scroll-Listener). */
.navlinks a.active { color: var(--head); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #17130a;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 9px 20px;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 22px -8px rgba(255, 200, 60, 0.7);
}
/* Hover-Effekte NUR für Geräte mit echtem Zeiger: iOS Safari löst :hover
   beim Antippen aus und lässt ihn kleben — Karten blieben nach dem Tipp
   umrandet, obwohl da nichts zu klicken ist. Fokus-Ringe (:focus-visible)
   und Druck-Feedback (:active) bleiben überall. */
@media (hover: hover) {
  .btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(255, 200, 60, 0.85); }
}
.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 600;
}
@media (hover: hover) {
  .btn.ghost:hover { border-color: var(--accent); color: var(--head); }
}
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
/* Ein Lichtstreifen läuft beim Hover einmal über die gelbe Fläche. Die
   Sprungmarke bleibt außen vor — sie ist absolut positioniert, und
   `position: relative` würde sie in den Fluss zurückholen. */
.btn:not(.skiplink) { position: relative; overflow: hidden; }
.btn:not(.skiplink):not(.ghost)::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) {
  .btn:not(.skiplink):not(.ghost):hover::after { animation: shine 0.7s ease-out; }
}
@keyframes shine {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(360%) skewX(-18deg); }
}

/* Sprachwahl */
.langpick { position: relative; }
.langpick summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.langpick summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .langpick summary:hover { color: var(--head); border-color: var(--accent); }
}
.langpick summary svg { width: 16px; height: 16px; flex: none; }
.langpick .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  min-width: 150px;
  box-shadow: var(--shadow);
}
.langpick .menu a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.94rem;
}
@media (hover: hover) {
  .langpick .menu a:hover { background: var(--panel-2); text-decoration: none; color: var(--head); }
}
.langpick .menu a[aria-current] { color: var(--accent); font-weight: 650; }
.langpick[open] .menu { animation: pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: top right; }
@keyframes pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Der Schein hinter dem Telefon ragt seitlich hinaus — hier kappen,
     sonst wächst die Dokumentbreite auf schmalen Displays. */
  overflow: hidden;
  /* Der Hero zieht sich unter die Kopfleiste. Ohne das beginnt er erst
     darunter, und beim Scrollen wandert seine Oberkante als harte Kante
     quer durch die halb durchsichtige Leiste: oben noch der glatte
     Seitenhintergrund, unten schon der Hero-Verlauf mit Sternen. Genau
     das sah aus wie eine halb gezeichnete Leiste. Jetzt liegt hinter der
     Leiste durchgehend derselbe Verlauf — es gibt keine Kante mehr. */
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + clamp(46px, 7vw, 86px)) 0 clamp(60px, 8vw, 104px);
}
/* `isolation: isolate` gibt Hero und Telefon-Umgebung einen eigenen
   Stacking-Kontext. Ohne den lösen sich die Pseudo-Elemente mit negativem
   z-index gegen den Wurzel-Kontext auf und stapeln nur zufällig richtig —
   optisch identisch, aber der Compositor bekommt eine saubere Kapselung
   statt einer Verschränkung aus negativem z-index, overflow-Clip und Maske.
   (Hinweis aus einer unabhängigen Zweitanalyse.) */
.hero, .hero-phone-wrap { isolation: isolate; }

.hero::before,
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -2; }
.hero::before {
  background:
    radial-gradient(120% 78% at 76% 12%, rgba(255, 200, 60, 0.20) 0%, rgba(255, 200, 60, 0) 58%),
    radial-gradient(90% 70% at 8% 0%, rgba(96, 116, 230, 0.22) 0%, rgba(96, 116, 230, 0) 60%),
    linear-gradient(180deg, #171b2b 0%, var(--bg) 76%);
}
.hero::after {
  background-image: url("stars.svg");
  background-size: 640px 640px;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  animation: twinkle 7s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.36; }
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

/* „Neu in 3.0" — ein Link auf die Innenansicht-Zeile im Spiel-Abschnitt.
   Bewusst klein: die Innenansicht ist ein Extra, nicht der Kern. */
.newpill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  font-size: 0.88rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  margin-bottom: 24px;
  transition: border-color 0.2s, background-color 0.2s;
}
.newpill:hover { text-decoration: none; }
@media (hover: hover) {
  .newpill:hover { border-color: rgba(255, 200, 60, 0.5); background: rgba(255, 200, 60, 0.06); }
  .newpill:hover svg { transform: translateX(3px); }
}
.newpill .tag {
  flex: none;
  background: var(--accent);
  color: #17130a;
  font-weight: 750;
  font-size: 0.74rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
}
.newpill .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newpill svg { width: 15px; height: 15px; flex: none; color: var(--accent); transition: transform 0.2s; }

/* Choreografie beim Laden — reines CSS, läuft also auch ohne JavaScript.
   Die Textspalte kommt in fünf Stufen hoch; der Screenshot startet
   abgedunkelt und leuchtet auf, im selben Moment geht das gelbe Wort in
   der Überschrift an (siehe `lights-on`/`word-on` unten). */
.hero .newpill, .hero h1, .hero .lead, .hero .storebadges, .hero .trustline {
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero h1 { animation-delay: 0.08s; }
.hero .lead { animation-delay: 0.16s; }
.hero .storebadges { animation-delay: 0.24s; }
.hero .trustline { animation-delay: 0.32s; }

h1 {
  color: var(--head);
  /* Deckel bewusst bei 3,15rem: bei 4rem passte „Deine Bewegung versorgt"
     nicht mehr in die Textspalte und `text-wrap: balance` ließ Zeilen mit
     zwei Wörtern stehen. */
  font-size: clamp(2.15rem, 6vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -1.6px;
  font-weight: 800;
  margin: 0 0 18px;
  text-wrap: balance;
}
h1 .glow {
  color: var(--accent);
  text-shadow: 0 0 34px rgba(255, 200, 60, 0.45);
  animation: word-on 1.2s 0.8s ease-out both;
}
/* Das Wort „geht an": erst grau, kurzer Überschwinger, dann der normale
   Schein. Sitzt zeitlich auf dem Aufleuchten des Screenshots. */
@keyframes word-on {
  from { color: #5f6472; text-shadow: 0 0 0 rgba(255, 200, 60, 0); }
  55%  { color: var(--accent); text-shadow: 0 0 48px rgba(255, 200, 60, 0.75); }
  to   { color: var(--accent); text-shadow: 0 0 34px rgba(255, 200, 60, 0.45); }
}

.lead {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  color: var(--text);
  margin: 0 0 28px;
  max-width: 34em;
}

.storebadges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.storebadges a { display: block; transition: transform 0.15s, filter 0.15s; }
@media (hover: hover) {
  .storebadges a:hover { transform: translateY(-2px); filter: brightness(1.12); }
}
/* Beide Badges auf gleiche Höhe; die Breite folgt dem jeweiligen
   Seitenverhältnis. KEINE zusätzliche Regel je Store — die schlüge sonst
   per Spezifität die Höhen aus den Media Queries. */
.storebadges img { height: 52px; width: auto; }

.trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.92rem;
}
.trustline span { display: inline-flex; align-items: center; gap: 7px; }
.trustline svg { width: 15px; height: 15px; flex: none; color: var(--green); }

/* Telefon */
.phone {
  position: relative;
  display: block;          /* auch als <a> — inline ergäbe einen Rahmenstummel */
  margin: 0 auto;
  width: 100%;
  max-width: 336px;
  border-radius: 42px;
  padding: 5px;
  background: linear-gradient(155deg, #3a4152 0%, #191d27 42%, #0f1219 100%);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.phone img { border-radius: 37px; width: 100%; height: auto; }
/* Zwei Animationen auf derselben Eigenschaft: `rise` bringt das Telefon
   herein (0,9 s), danach übernimmt `float` — später in der Liste gewinnt,
   und solange es noch nicht angelaufen ist, hält `both` den Endwert von
   `rise`. 9 s pro Zyklus, 7 px Hub: eher Atmen als Wippen. */
.hero .phone.front {
  animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both,
             float 9s 1.2s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
/* „Lights on": Die Stadt startet im Dunkeln und leuchtet auf. Die Decke
   liegt exakt auf dem Bildschirm (inset/radius wie das Bild). */
.hero .phone.front::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 37px;
  background: #06070b;
  pointer-events: none;
  animation: lights-on 1.5s 0.7s ease-out both;
}
@keyframes lights-on {
  from { opacity: 0.8; }
  to   { opacity: 0; }
}
.hero-phone-wrap { position: relative; }
.hero-phone-wrap::before {
  content: "";
  position: absolute;
  inset: 8% -14% -10%;
  background: radial-gradient(50% 46% at 50% 55%, rgba(255, 200, 60, 0.30), transparent 70%);
  filter: blur(26px);
  z-index: -1;
  animation: glow-in 1.6s 0.7s ease-out both,
             breathe 8s 2.3s ease-in-out infinite;
}
@keyframes glow-in {
  from { opacity: 0.25; transform: scale(0.88); }
  to   { opacity: 1; transform: none; }
}
@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.78; transform: scale(1.05); }
}

/* Schwebende Akku-Karte am Hero-Telefon */
.batterycard {
  position: absolute;
  left: -30px;
  /* 68 px über der Telefon-Unterkante; die Punkte darunter (26 + 8 px)
     liegen im Fluss und zählen zur Höhe der Umgebung. */
  bottom: 102px;
  /* Kein backdrop-filter: Die Karte liegt auf dem undurchsichtigen
     Screenshot, es gäbe also gar nichts zu verwischen — sie kostete nur
     eine weitere Compositing-Ebene ganz oben auf der Seite, die der Browser
     beim Scrollen neu abtasten muss. */
  background: rgba(20, 24, 33, 0.96);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px 15px;
  width: 194px;
  box-shadow: var(--shadow);
  /* Schwebt gegenphasig zum Telefon (Versatz über die Verzögerung). */
  animation: rise 0.9s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both,
             float-card 9s 5.7s ease-in-out infinite;
}
@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.batterycard .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; color: var(--muted); }
.batterycard .val { color: var(--head); font-weight: 700; font-size: 1.02rem; }
.batterycard .track { height: 8px; border-radius: 99px; background: #262c39; margin-top: 9px; overflow: hidden; }
/* Ruhezustand ist der volle Balken — ohne JavaScript steht er einfach auf
   94 %. site.js setzt ihn beim Laden auf 12 % zurück und lässt ihn EINMAL
   hochlaufen, sobald die Karte ins Bild kommt (keine Dauerschleife). */
.batterycard .fill {
  height: 100%;
  width: 94%;
  border-radius: 99px;
  background: linear-gradient(90deg, #35c26a, var(--green));
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.55);
  transition: width 2.4s cubic-bezier(0.3, 0.9, 0.35, 1);
  position: relative;
  overflow: hidden;
}
/* Ladeschimmer: ein heller Streifen zieht alle gut drei Sekunden über den
   Balken — nur transform, also ohne Neuzeichnen. */
.batterycard .fill::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-120%);
  animation: shimmer 3.4s 3.2s ease-in-out infinite;
}
@keyframes shimmer {
  0%        { transform: translateX(-120%); }
  45%, 100% { transform: translateX(320%); }
}
.batterycard .kcal { color: var(--green); font-weight: 650; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Abschnitte ---------- */
section { padding: clamp(46px, 6vw, 76px) 0; position: relative; }
/* Feine Trennlinie zwischen den Inhaltsabschnitten, zu den Rändern hin
   auslaufend. Hero, Datenschutz und CTA haben eigene Pseudo-Elemente. */
main > section + section:not(.privacy):not(.cta)::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - 44px, var(--maxw) - 44px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  pointer-events: none;
}
.section-head { max-width: 640px; margin: 0 0 clamp(34px, 4vw, 54px); }
.section-head.center { margin-left: auto; margin-right: auto; }
.kicker {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
h2 {
  color: var(--head);
  font-size: clamp(1.72rem, 3.9vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: -1px;
  font-weight: 780;
  margin: 0 0 14px;
  text-wrap: balance;
}
.section-head p { color: var(--muted); font-size: 1.04rem; margin: 0; }

/* ---------- So funktioniert's ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step {
  position: relative;
  background: linear-gradient(180deg, var(--panel) 0%, rgba(22, 26, 36, 0.55) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  counter-increment: step;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s;
}
@media (hover: hover) {
  .step:hover { transform: translateY(-3px); border-color: rgba(255, 200, 60, 0.3); }
}
/* „01 · 02 · 03" oben rechts — aus dem Zähler, nichts im HTML. */
.step::after {
  content: "0" counter(step);
  position: absolute;
  top: 24px; right: 22px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
/* Gestrichelter Verbinder zwischen den Karten (nur im Dreispalter). */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 48px; right: -19px;
  width: 18px;
  border-top: 1px dashed var(--line);
  pointer-events: none;
}
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--accent-soft);
  border: 1px solid rgba(255, 200, 60, 0.3);
  color: var(--accent);
  margin-bottom: 16px;
}
.step .num svg { width: 22px; height: 22px; }
.step h3 { color: var(--head); font-size: 1.16rem; margin: 0 0 7px; letter-spacing: -0.3px; }
.step p { margin: 0; color: var(--muted); font-size: 0.97rem; }

.blackout {
  margin-top: 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(90deg, rgba(240, 98, 95, 0.10), rgba(240, 98, 95, 0.02));
  border: 1px solid rgba(240, 98, 95, 0.28);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 20px 24px;
}
.blackout svg { width: 24px; height: 24px; color: var(--red); flex: none; margin-top: 3px; }
.blackout h3 { margin: 0 0 4px; color: var(--head); font-size: 1.08rem; }
.blackout p { margin: 0; color: var(--muted); font-size: 0.97rem; }

/* ---------- Galerie ----------
   Ein waagerechter Snap-Streifen auf allen Breiten — zwölf Bilder als Raster
   wären eine Wand. Ohne JavaScript scrollt er mit Trackpad/Wischen; site.js
   blendet zusätzlich die Pfeile ein. Der Streifen läuft bis an die
   Fensterkanten, die erste Karte fluchtet mit dem Inhalt. */
.gallery {
  --edge: max(22px, calc((100vw - var(--maxw)) / 2 + 22px));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 236px;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding: 6px var(--edge) 22px;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
/* Ohne das eigene margin:0 zieht der Browser-Standard für <figure>
   (1em 40px) je 40 px von der Spaltenbreite ab. */
.shot { scroll-snap-align: start; margin: 0; }
.shot .phone { max-width: 236px; border-radius: 31px; padding: 4px; }
.shot .phone img { border-radius: 27px; }
.shot figcaption { margin-top: 15px; font-size: 0.9rem; color: var(--muted); text-align: center; line-height: 1.5; }
.shot figcaption b { display: block; color: var(--head); font-weight: 650; font-size: 1rem; margin-bottom: 2px; }
.gallery-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.swipehint { color: var(--muted); font-size: 0.86rem; margin: 0; }
.gbtns { display: flex; gap: 10px; margin-left: auto; }
.gbtns[hidden] { display: none; }
.gbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, opacity 0.2s;
}
.gbtn svg { width: 20px; height: 20px; }
.gbtn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) {
  .gbtn:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
}
.js .gbtns:not([hidden]) ~ .swipehint, .gallery-ctrl:has(.gbtns:not([hidden])) .swipehint { visibility: hidden; }

/* ---------- Funktionen ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; }
.feature {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition: border-color 0.25s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s;
}
@media (hover: hover) {
  .feature:hover { border-color: rgba(255, 200, 60, 0.35); transform: translateY(-3px); background: var(--panel-2); }
}
/* Spotlight: ein weicher Schein folgt dem Zeiger über die Kachel. Die
   Position (--mx/--my) setzt site.js per pointermove; ohne JavaScript
   oder auf Touch-Geräten bleibt er einfach aus. */
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 200, 60, 0.13), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
@media (hover: hover) { .feature:hover::before { opacity: 1; } }
.feature > * { position: relative; }
.feature .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(255, 200, 60, 0.22);
  color: var(--accent);
  margin-bottom: 14px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}
.feature .ico svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .feature:hover .ico { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 20px -8px rgba(255, 200, 60, 0.6); }
}
.feature h3 { color: var(--head); font-size: 1.05rem; margin: 0 0 6px; letter-spacing: -0.2px; }
.feature p { margin: 0; color: var(--muted); font-size: 0.94rem; }

/* ---------- Datenschutz ---------- */
.privacy { position: relative; }
.privacy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 40%, rgba(255, 200, 60, 0.09), transparent 70%);
  pointer-events: none;
}
.privacy .wrap { position: relative; }
.privacybox {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(24, 29, 40, 0.9), rgba(15, 18, 25, 0.9));
  border-radius: 24px;
  padding: clamp(30px, 5vw, 52px);
  text-align: center;
}
.privacybox h2 { max-width: 20em; margin-inline: auto; }
.privacybox > p { color: var(--muted); max-width: 48em; margin: 0 auto 30px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 26px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 0.93rem;
  color: var(--text);
}
.chip svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.js .privacybox .chip {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .privacybox.in .chip { opacity: 1; transform: none; }
.js .privacybox.in .chip:nth-child(1) { transition-delay: 0.25s; }
.js .privacybox.in .chip:nth-child(2) { transition-delay: 0.33s; }
.js .privacybox.in .chip:nth-child(3) { transition-delay: 0.41s; }
.js .privacybox.in .chip:nth-child(4) { transition-delay: 0.49s; }
.js .privacybox.in .chip:nth-child(5) { transition-delay: 0.57s; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  color: var(--head);
  font-weight: 640;
  font-size: 1.06rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(225deg); }
@media (hover: hover) {
  .faq summary:hover { color: var(--accent); }
}
.faq .answer { color: var(--muted); padding: 0 40px 22px 0; margin: 0; font-size: 1rem; }
.faq details[open] .answer { animation: faq-in 0.35s ease both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
/* Weiches Auf- und Zuklappen der Höhe — Chrome/Edge ab 131; andere
   Browser klappen wie bisher hart, die Einblendung oben bleibt. */
@supports (interpolate-size: allow-keywords) {
  .faq details::details-content {
    interpolate-size: allow-keywords;
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- Schluss-CTA ---------- */
.cta { padding-bottom: clamp(64px, 9vw, 120px); }
.ctabox {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 200, 60, 0.26);
  border-radius: 26px;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(255, 200, 60, 0.18), transparent 62%),
    linear-gradient(180deg, #1a1f2b, #10131a);
  padding: clamp(34px, 5.5vw, 62px) clamp(22px, 5vw, 56px);
  text-align: center;
}
.ctabox { isolation: isolate; }
.ctabox::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: -38%;
  width: 72%;
  aspect-ratio: 1;
  margin-left: -36%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 60, 0.17), rgba(255, 200, 60, 0) 62%);
  animation: drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translateX(-16%) scale(1); }
  to   { transform: translateX(16%) scale(1.12); }
}
.ctabox h2 { margin-bottom: 12px; }
.ctabox p { color: var(--muted); max-width: 40em; margin: 0 auto 30px; }
.ctabox .storebadges { justify-content: center; }
.qr { display: flex; gap: 30px; justify-content: center; margin-top: 32px; }
.qr figure { margin: 0; }
.qr img { width: 108px; height: 108px; border-radius: 12px; background: #fff; padding: 8px; }
.qr figcaption { margin-top: 9px; font-size: 0.82rem; color: var(--muted); }

/* ---------- Fußzeile ---------- */
footer {
  border-top: 1px solid var(--line-soft);
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 0.92rem;
}
footer .cols {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 56px;
  justify-content: space-between;
  margin-bottom: 32px;
}
footer h4 { color: var(--head); font-size: 0.86rem; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 12px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer ul a { color: var(--muted); }
@media (hover: hover) {
  footer ul a:hover { color: var(--accent); }
}
footer .brand { margin: 0 0 12px; }
footer .legalline { border-top: 1px solid var(--line-soft); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }

/* ---------- Hero: wechselnder Bildschirm ----------
   Die Szenen liegen übereinander; die aktive (`.on`) blendet weich ein und
   zoomt dabei von 103,5 % auf 100 % — wie ein Bildschirm, der umschaltet.
   `clip-path` statt nur overflow: Safari ließe skalierte Kinder sonst über
   die runden Ecken hinausragen. Nur opacity/transform werden animiert. */
.phone .screens {
  position: relative;
  border-radius: 37px;
  overflow: hidden;
  clip-path: inset(0 round 37px);
  background: #0b0d14;
}
.phone .screens img { border-radius: 0; }
.phone .screens img + img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.js .phone .screens img {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .phone .screens img.on { opacity: 1; transform: none; }
/* Die abgelöste Szene bleibt kurz stehen und verblasst darunter. */
.js .phone .screens img.off { opacity: 0; transform: none; transition-delay: 0.25s; }

.herodots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
/* Ohne JS unsichtbar, aber mit Platz — die Akku-Karte rechnet damit. */
.herodots[hidden] { display: flex; visibility: hidden; }
.herodots button {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
}
/* Größere Trefferfläche, ohne die Punkte optisch zu vergrößern. */
.herodots button::before { content: ""; position: absolute; inset: -10px -4px; }
@media (hover: hover) {
  .herodots button:hover { background: rgba(255, 255, 255, 0.4); }
}
.herodots button.on { width: 30px; background: rgba(255, 255, 255, 0.16); }
/* Der aktive Punkt füllt sich über die Standzeit (--dwell setzt site.js). */
.herodots button.on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left;
  animation: dotfill var(--dwell, 5s) linear both;
}
.herodots.paused button.on::after { animation-play-state: paused; }
@keyframes dotfill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Das Spiel: Text/Bild-Zeilen ---------- */
.tour { display: grid; gap: clamp(48px, 6.5vw, 84px); }
.trow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
}
.trow.flip .copy { order: 2; }
.trow .copy { max-width: 470px; }
.trow.flip .copy { justify-self: end; }
.trow h3 {
  color: var(--head);
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.7px;
  font-weight: 760;
  margin: 0 0 14px;
  text-wrap: balance;
}
.trow .copy > p:not(.kicker) { color: var(--muted); margin: 0 0 20px; }
.trow .kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.newbadge {
  background: var(--accent-soft);
  border: 1px solid rgba(255, 200, 60, 0.35);
  color: var(--accent);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.7rem;
  letter-spacing: 0.6px;
}
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.points li { display: flex; gap: 11px; align-items: flex-start; color: var(--text); font-size: 0.97rem; line-height: 1.5; }
.points svg {
  flex: none;
  width: 20px; height: 20px;
  padding: 3px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.12);
  color: var(--green);
}

/* Telefone der Zeile: zwei überlappend, drei als Fächer. Der Schein
   dahinter nimmt die Stimmung des Bildes auf. */
.trow .media {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  min-height: 0;
  isolation: isolate;
}
.trow .media::before {
  content: "";
  position: absolute;
  inset: 12% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 200, 60, 0.16), transparent);
  filter: blur(30px);
  z-index: -1;
}
#activity .media::before { background: radial-gradient(closest-side, rgba(74, 222, 128, 0.15), transparent); }
#life .media::before { background: radial-gradient(closest-side, rgba(96, 116, 230, 0.24), transparent); }
.trow .media .phone { grid-area: 1 / 1; max-width: 250px; border-radius: 32px; padding: 4px; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.trow .media .phone img { border-radius: 28px; }
.media.n2 .p0 { transform: translateX(-27%); z-index: 1; }
.media.n2 .p1 { transform: translate(27%, 9%) scale(0.92); filter: brightness(0.85); }
.media.n3 .p0 { z-index: 1; }
.media.n3 .p1 { transform: translateX(-52%) scale(0.84) rotate(-4deg); filter: brightness(0.8); }
.media.n3 .p2 { transform: translateX(52%) scale(0.84) rotate(4deg); filter: brightness(0.8); }
@media (hover: hover) {
  .media.n2:hover .p0 { transform: translateX(-31%) rotate(-2deg); }
  .media.n2:hover .p1 { transform: translate(31%, 7%) scale(0.94) rotate(2deg); }
  .media.n3:hover .p1 { transform: translateX(-60%) scale(0.86) rotate(-6deg); }
  .media.n3:hover .p2 { transform: translateX(60%) scale(0.86) rotate(6deg); }
}

/* ---------- Monumente: freigestellte Karten ----------
   Fünf Karten, je ein Monument auf einem weichen Lichtkegel; die Stil-Chips
   blenden um (site.js). Desktop: eine Reihe mit fünf Spalten, schmal: ein
   Wisch-Streifen wie die Galerie. Die Bilder liegen übereinander — Wechsel
   nur über opacity/transform. */
.mons {
  --edge: max(22px, calc((100vw - var(--maxw)) / 2 + 22px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}
.mon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: 10px 12px 16px;
  background:
    radial-gradient(70% 38% at 50% 66%, rgba(255, 200, 60, 0.10), transparent 72%),
    linear-gradient(180deg, var(--panel) 0%, rgba(17, 20, 28, 0.9) 100%);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  .mon:hover { border-color: rgba(255, 200, 60, 0.3); transform: translateY(-3px); }
}
.mon-stage {
  position: relative;
  width: 100%;
  height: 190px;
  margin-bottom: 14px;
}
/* Bodenschatten unter dem Monument. */
.mon-stage::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: 14%;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  z-index: 0;
}
.mon-stage img {
  position: absolute;
  inset: 0 -6px;
  width: calc(100% + 12px);
  height: 100%;
  object-fit: contain;
  object-position: 50% 78%;
  z-index: 1;
}
.js .mon-stage img {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .mon-stage img.on { opacity: 1; transform: none; }
html:not(.js) .mon-stage img:not(.on) { display: none; }
.mon h3 { color: var(--head); font-size: 1rem; margin: 0 0 10px; letter-spacing: -0.2px; text-align: center; }
.mon-styles { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.mon-styles button {
  font: inherit;
  font-size: 0.76rem;
  line-height: 1;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
@media (hover: hover) {
  .mon-styles button:hover { color: var(--head); border-color: rgba(255, 200, 60, 0.45); }
}
.mon-styles button[aria-pressed="true"] {
  color: #17130a;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 650;
}
/* Ohne JS sind die Chips reine Beschriftung. */
html:not(.js) .mon-styles button { pointer-events: none; }
html:not(.js) .mon-styles button[aria-pressed="true"] { color: var(--text); background: rgba(255, 255, 255, 0.04); border-color: var(--line); font-weight: 400; }

@media (max-width: 1100px) {
  .mons {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 220px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    padding: 4px var(--edge) 18px;
    max-width: none;
    scrollbar-width: none;
  }
  .mons::-webkit-scrollbar { display: none; }
  .mon { scroll-snap-align: start; }
}

/* ---------- Neuigkeiten ---------- */
.updates {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 22px;
  align-items: start;
}
.latest {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 200, 60, 0.28);
  border-radius: 22px;
  padding: 28px 28px 30px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255, 200, 60, 0.13), transparent 70%),
    linear-gradient(180deg, var(--panel), rgba(22, 26, 36, 0.6));
}
.latest-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.bigver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 64px;
  padding: 0 10px;
  border-radius: 18px;
  background: var(--accent);
  color: #17130a;
  font-weight: 820;
  font-size: 1.5rem;
  letter-spacing: -0.8px;
  box-shadow: 0 10px 30px -10px rgba(255, 200, 60, 0.7);
}
.latest-head div b { display: block; color: var(--head); font-size: 1.12rem; }
.latest-head div span { color: var(--muted); font-size: 0.9rem; }
.notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.notes li { position: relative; padding-left: 20px; color: var(--text); font-size: 0.97rem; line-height: 1.6; }
.notes li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255, 200, 60, 0.6);
}
.older {
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--panel);
  padding: 22px 24px 10px;
}
.older h3 { color: var(--head); font-size: 0.86rem; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 6px; }
.older details { border-top: 1px solid var(--line-soft); }
.older details:first-of-type { border-top: 0; }
.older summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 26px 14px 0;
  position: relative;
}
.older summary::-webkit-details-marker { display: none; }
.older summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.older details[open] > summary::after { transform: translateY(-20%) rotate(225deg); }
.older .ver {
  color: var(--accent);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.older .when { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.older .first { color: var(--text); font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.older details[open] > summary .first { visibility: hidden; }
@media (hover: hover) {
  .older summary:hover .first { color: var(--head); }
}
.older .notes { padding: 0 4px 18px; gap: 9px; }
.older .notes li { font-size: 0.92rem; color: var(--muted); }
.older .notes li::before { background: var(--muted); box-shadow: none; }
.older details[open] > .notes { animation: faq-in 0.3s ease both; }
.older details.more { border-top: 1px solid var(--line-soft); }
.older details.more > summary {
  display: block;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 650;
  padding: 14px 0;
}
.older details.more > summary::after { display: none; }
.older details.more[open] > summary { display: none; }
.older details.more > div > details:first-child { border-top: 0; }

/* ---------- Scroll-Einblendung ----------
   Nur versteckt, wenn JavaScript wirklich läuft: das `js` am <html> setzt
   ein winziges Inline-Skript im <head>. Ohne JavaScript (oder wenn site.js
   nicht lädt) steht der ganze Inhalt sofort da — sonst wären Schritte,
   Funktionen, Datenschutz, FAQ und CTA schlicht unsichtbar. */
/* Als Animation mit `backwards` statt als Transition: Nach dem Ablauf gibt
   die Animation die Eigenschaften wieder frei, und die Hover-Effekte der
   Karten (transform) greifen ungestört. Eine Transition auf `transform`
   hätte per Spezifität jeden Hover-Lift überstimmt. Die Verzögerung je
   Karte setzt site.js als animation-delay. */
.js .reveal:not(.in) { opacity: 0; }
.js .reveal.in { animation: rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* Strichsymbole zeichnen sich ein, sobald ihre Karte im Bild ist. Nur
   SVGs mit der Klasse `draw` — build-web.py gibt deren Pfaden
   pathLength="1", damit 1 = ganze Länge gilt. Das Offset liegt knapp über
   1: bei genau 1 malen runde Linienenden noch einen Punkt an den Anfang. */
.js svg.draw :is(path, rect, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1.02;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.js .in svg.draw :is(path, rect, circle) { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .lightbox[open],
  .lightbox[open]::backdrop,
  .lightbox[open] .lb-fig img { animation: none; }
  .js .reveal:not(.in) { opacity: 1; }
  .js .reveal.in { animation: none; }
  .js svg.draw :is(path, rect, circle) { stroke-dashoffset: 0; transition: none; }
  .js .privacybox .chip { opacity: 1; transform: none; transition: none; }
  .hero .phone, .batterycard, .newpill svg,
  .hero .newpill, .hero h1, .hero .lead, .hero .storebadges, .hero .trustline,
  h1 .glow, .hero-phone-wrap::before, .hero::after,
  .batterycard .fill::after, .ctabox::before, .langpick[open] .menu,
  .faq details[open] .answer { animation: none; }
  .hero .phone.front::after { display: none; }
  .js .phone .screens img { transition: none; transform: none; }
  .js .mon-stage img { transition: none; transform: none; }
  .herodots button.on::after { animation: none; transform: none; }
  .trow .media .phone { transition: none; }
  .btn:not(.skiplink):not(.ghost):hover::after { animation: none; }
  .batterycard .fill { transition: none; width: 94%; }
  .feature::before, .lb-fig img { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .navlinks { display: none; }
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .storebadges, .trustline { justify-content: center; }
  .hero-phone-wrap { order: 2; margin-top: 8px; }
  .phone { max-width: 290px; }
  .batterycard { left: 0; right: 0; margin-inline: auto; bottom: 34px; }
  .herodots { margin-top: 48px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:not(:last-child)::before { display: none; }
  .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .trow, .trow.flip { grid-template-columns: 1fr; }
  .trow.flip .copy { order: 0; justify-self: start; }
  .trow .copy { max-width: 620px; }
  .updates { grid-template-columns: 1fr; }
  .section-head { margin-inline: auto; text-align: center; }
}

@media (max-width: 700px) {
  :root { --nav-h: 62px; }
  body { font-size: 16px; }
  .nav .wrap { gap: 12px; }
  .brand { font-size: 1.05rem; }
  /* Dichterer Hero, damit der Anfang des Screenshots noch auf den ersten
     Schirm kommt. Die Neu-Pill bleibt, aber kompakter. */
  .newpill { font-size: 0.8rem; margin-bottom: 18px; }
  .hero { padding-top: calc(var(--nav-h) + 30px); padding-bottom: 56px; }
  h1 { margin-bottom: 14px; }
  .lead { font-size: 0.97rem; line-height: 1.55; margin-bottom: 22px; }
  .trustline { font-size: 0.84rem; gap: 5px 14px; margin-top: 16px; }
  .hero-phone-wrap { margin-top: 0; }
  .steps { grid-template-columns: 1fr; }
  .trow .media .phone { max-width: 196px; }
  .media.n3 .phone { max-width: 168px; }
  .latest { padding: 22px 20px 24px; }
  .bigver { min-width: 54px; height: 54px; font-size: 1.25rem; }
  .older { padding: 18px 18px 6px; }
  .older summary { grid-template-columns: auto minmax(0, 1fr); }
  .older .first { grid-column: 1 / -1; }
  .gallery { grid-auto-columns: 200px; gap: 16px; }
  .shot .phone { max-width: 200px; }
  /* 44px: beide Badges passen damit auch in den schmalen CTA-Kasten. */
  .storebadges img { height: 44px; }
  .qr { display: none; }
  footer .cols { gap: 24px 34px; }
}

@media (max-width: 420px) {
  .langpick summary span { display: none; }
  .storebadges { gap: 10px; }
  .storebadges img { height: 42px; }
  .phone { max-width: 250px; }
  .batterycard { width: 172px; }
}

/* ---------- Lightbox ----------
   Der Rahmen in der Galerie ist ein <a> auf die große Fassung: ohne
   JavaScript öffnet der Klick schlicht das Bild, mit JS übernimmt der
   <dialog>. Er füllt den Viewport, damit ein Klick daneben schließt. */
.shotlink { display: block; cursor: zoom-in; }
.shotlink:hover { text-decoration: none; }
.shot .phone { transition: transform 0.2s, box-shadow 0.2s; }
.shot .shotlink:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 44px 90px -30px rgba(0, 0, 0, 0.95),
              0 0 0 1px rgba(255, 200, 60, 0.32) inset,
              0 0 44px -10px rgba(255, 200, 60, 0.35);
}
@media (hover: hover) {
  .shot .shotlink:hover {
    transform: translateY(-4px);
    box-shadow: 0 44px 90px -30px rgba(0, 0, 0, 0.95),
                0 0 0 1px rgba(255, 200, 60, 0.32) inset,
                0 0 44px -10px rgba(255, 200, 60, 0.35);
  }
}

.lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: transparent;
  overflow: hidden;
  color: var(--text);
  touch-action: pan-y;   /* waagerechtes Wischen bleibt für Vor/Zurück frei */
}
.lightbox::backdrop {
  background: rgba(6, 7, 11, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox:not([open]) { display: none; }
.lightbox[open],
.lightbox[open]::backdrop { animation: lb-in 0.22s ease-out; }
.lightbox[open] .lb-fig img { animation: lb-zoom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-zoom {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: none; }
}

.lb-count {
  position: absolute;
  top: 24px;
  left: 20px;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: 0.4px;
}

.lb-fig {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 58px 16px 26px;
  pointer-events: none;          /* Klick geht an den Dialog = schließen */
}
.lb-fig img {
  pointer-events: auto;
  cursor: zoom-out;
  max-height: calc(100dvh - 130px);
  max-width: min(100%, 460px);
  width: auto;
  border-radius: 22px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  transition: opacity 0.22s ease;
}
.lb-fig img.loading { opacity: 0; }
.lb-fig figcaption {
  pointer-events: auto;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
  max-width: 34em;
}

.lb-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(22, 26, 36, 0.9);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
@media (hover: hover) {
  .lb-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--panel-2); }
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

@media (max-width: 560px) {
  /* Hochkant-Screenshots begrenzt immer die Höhe — deshalb schmale Ränder
     und die Pfeile über den Bildkanten statt daneben. */
  .lb-btn { width: 40px; height: 40px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-fig { padding: 48px 12px 14px; gap: 10px; }
  .lb-fig img { max-height: calc(100dvh - 116px); max-width: 100%; }
  .lb-fig figcaption { font-size: 0.87rem; }
}