/* Staketo – Startseite (index.html, en/, nl/). Stil F „Pur“ wie die App: Papier, Tinte, ein Gold-Akzent, flache Flächen,
   keine Schatten. Schrift Outfit (SIL OFL 1.1, schrift/OFL.txt) liegt hier, nichts kommt von anderswo. */

@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/schrift/outfit-200.woff2) format("woff2");
}
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/schrift/outfit-400.woff2) format("woff2");
}
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/schrift/outfit-500.woff2) format("woff2");
}

:root {
  --paper: #f4f3ee;
  --ink: #131313;
  --gold: #e2b33c;
  --gold-dark: #b98a26;
  /* Grau für Text: 5,9 : 1 auf Papier (das Grau der App, #8b8a85, reicht nur für große Schrift) */
  --mute: #5e5d58;
  --line: #e2e0d8;
  --card: #ffffff;
  --gutter: 20px;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    400 17px / 1.55 Outfit,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
/* <picture> (AVIF mit WebP als Rückfall) bildet keinen eigenen Kasten: Gestaltung und Maße gehören dem <img> darin */
picture {
  display: contents;
}
a {
  color: var(--ink);
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: var(--ink);
}
:focus {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Kopf: Logo und Sprachen */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 6px;
}
.brand {
  height: 28px;
  width: auto;
  flex: none;
}
.lang {
  display: flex;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 22px;
  color: var(--mute);
  text-decoration: none;
}
.lang a:hover {
  color: var(--ink);
}
.lang a[aria-current="page"] {
  color: var(--ink);
  background: rgba(19, 19, 19, 0.07);
}

/* Versal-Zeile mit goldenem Punkt (wie .cap in der App) */
.cap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.cap::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

h1,
h2,
h3 {
  font-weight: 500;
  margin: 0;
}
h1 {
  font-size: clamp(42px, 12vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-top: 16px;
}
h2 {
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin-top: 14px;
}
h3 {
  font-size: 19px;
  line-height: 1.3;
  margin-top: 30px;
}
/* große, leichte Zahl über der Überschrift (wie „16 / 24“ in der App) */
.kpi {
  display: block;
  font-weight: 200;
  font-size: clamp(96px, 27vw, 148px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  margin: 10px 0 12px -0.06em;
}
.kpi small {
  font-size: 0.42em;
  letter-spacing: -0.02em;
  margin-left: 0.08em;
}
p {
  margin: 14px 0 0;
}
.lead {
  font-size: 19px;
  line-height: 1.5;
  max-width: 34em;
}
.fine {
  font-size: 15px;
  line-height: 1.5;
  color: var(--mute);
}

/* Store-Badges: die offiziellen Dateien von Apple und Google (stores/), unverändert und gleich hoch, Apple zuerst.
   Leitfäden: Apple mindestens 40 px hoch, Google mindestens 28 px und nie kleiner als Apple; Freiraum je ein Viertel
   der Höhe – hier 0,3 × Höhe zwischen den Badges und mindestens so viel zum Text darüber und darunter. Kein
   Hover-Effekt und keine Einblend-Bewegung: Apple verbietet, das Badge zu verändern oder zu animieren. */
.stores {
  --store-h: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--store-h) * 0.3);
  margin-top: 30px;
}
.store {
  display: block;
  flex: none;
  border-radius: calc(var(--store-h) * 0.22);
}
.store img {
  height: var(--store-h);
  width: auto;
}
.store:focus-visible {
  border-radius: calc(var(--store-h) * 0.22);
}

/* Telefon: flacher Rahmen in Tinte, Bildschirm mit den Ecken des iPhones (13,8 % der Breite) */
.phone {
  --w: 240px;
  --b: calc(var(--w) * 0.034);
  width: var(--w);
  flex: none;
  padding: var(--b);
  background: var(--ink);
  border-radius: calc((var(--w) - 2 * var(--b)) * 0.138 + var(--b));
}
.phone > img,
.phone > video {
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  background: #dcdbd4;
  border-radius: calc((var(--w) - 2 * var(--b)) * 0.138);
}

/* Erster Abschnitt */
.hero {
  display: grid;
  gap: 44px;
  padding-top: 34px;
  padding-bottom: 72px;
}
.hero .fine {
  margin-top: 16px;
}
.player {
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.player .phone {
  --w: min(272px, 72vw);
}
/* Anhalten/Abspielen (erscheint nur mit JavaScript): unter dem Telefon, rechts */
.pause {
  margin-top: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pause[hidden] {
  display: none;
}
.pause:hover {
  background: #ffffff;
}
.pause svg {
  width: 16px;
  height: 16px;
}
.pause .play {
  display: none;
}
.pause.is-paused .play {
  display: block;
}
.pause.is-paused .stop {
  display: none;
}

/* Abschnitte: Text und Bilder nebeneinander (am Telefon untereinander) */
.sec {
  border-top: 1px solid var(--line);
  padding: 64px 0 72px;
}
.row {
  display: grid;
  gap: 44px;
  align-items: center;
}
.text {
  max-width: 36em;
}
.shots {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.shots .phone {
  --w: min(232px, 62vw);
}
.shots.two .phone {
  --w: min(212px, calc((100vw - 2 * var(--gutter) - 14px) / 2));
}

/* Liste der Handgriffe */
.steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.1em 1fr;
  column-gap: 8px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.4;
}
.steps li:last-child {
  border-bottom: 1px solid var(--line);
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.steps b {
  font-weight: 500;
  font-size: 17px;
}
.steps span {
  color: var(--mute);
}

/* Medaillen: Punkte wie in der App */
.medals {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.medals li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.medals li:last-child {
  border-bottom: 1px solid var(--line);
}
.medals b {
  font-weight: 500;
}
.medals span {
  color: var(--mute);
}
.dots {
  display: inline-flex;
  gap: 5px;
  transform: translateY(1px);
}
.dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.dots i.on {
  background: var(--ink);
}
.dots.gold i {
  border-color: var(--gold-dark);
  background: var(--gold);
}

/* Straßen als Farbflächen (Grundfarben aus game-core, weiße Schrift wie auf der Karte) */
.streets {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.streets li {
  background: var(--c);
  color: #ffffff;
  border-radius: 16px;
  padding: 16px 16px 15px;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.streets .name {
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
}
.streets .theme {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 3px;
}
.streets .count {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

/* Aufzählung mit goldenem Punkt */
.dotlist {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.dotlist li {
  position: relative;
  padding: 9px 0 9px 22px;
  line-height: 1.45;
}
.dotlist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.dotlist b {
  font-weight: 500;
}

/* Bedingungen des Rabattcodes: ruhige weiße Fläche wie die Code-Karte der App */
.terms {
  background: var(--card);
  border-radius: 16px;
  padding: 6px 18px;
  margin-top: 24px;
}
.terms dl {
  margin: 0;
}
.terms div {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.terms div:first-child {
  border-top: 0;
}
.terms dt {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.terms dd {
  margin: 0;
}

/* Fair: vier Zusagen */
.facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.facts li {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
}
.facts li::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  margin-bottom: 14px;
}

/* Zum Schluss */
.end {
  border-top: 1px solid var(--line);
  padding: 64px 0 76px;
  text-align: left;
}

/* Fuß */
.foot {
  border-top: 1px solid var(--line);
  padding: 26px 0 40px;
  font-size: 14px;
  color: var(--mute);
}
.foot p {
  margin: 0;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 12px;
}
.foot a {
  color: var(--mute);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}
.foot a:hover {
  color: var(--ink);
}
.foot .note {
  margin-top: 12px;
  font-size: 13px;
}

@media (min-width: 760px) {
  :root {
    --gutter: 32px;
  }
  .brand {
    height: 32px;
  }
  .top {
    padding-top: 28px;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 56px;
    padding-top: 48px;
    padding-bottom: 96px;
  }
  .player .phone {
    --w: 300px;
  }
  .sec {
    padding: 96px 0;
  }
  .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
  .row.flip .text {
    order: 2;
  }
  .shots .phone {
    --w: 260px;
  }
  .shots.two .phone {
    --w: 220px;
  }
  .lead {
    font-size: 21px;
  }
  .stores {
    --store-h: 52px;
  }
  .end {
    padding: 96px 0 104px;
  }
}

@media (min-width: 1100px) {
  .hero {
    gap: 96px;
  }
  .player .phone {
    --w: 320px;
  }
  .row {
    gap: 88px;
  }
  .shots {
    gap: 22px;
  }
  .shots.two .phone {
    --w: 240px;
  }
}

/* ——— Rabatt zuerst (DE seit 28.10.2026; en/ und nl/ nutzen bis zu ihrer Umstellung noch .hero oben) ———
   Die Grafiken (grafik/, aus Grafiken/ per web/werkzeuge/grafiken.py) sind freigestellt: gewöhnliche Bilder mit
   Transparenz, die auf jedem Grund und in jedem Moment des Einblendens stimmen. */
:root {
  --green: #5b6329;
}

/* Erste Sicht: Rabatt-Schild als Überschrift, Badges; rechts (am Telefon darunter) das Hauptmotiv mit den Münzen. Dahinter,
   auch hinter dem Kopf, leises Knitterpapier (im Papierton gebacken); die Abschnitte darunter decken es mit glattem
   Papier ab. */
body.papier {
  background: var(--paper) url(/grafik/papier.webp) center top / max(100%, 1100px) auto no-repeat;
  background-image: image-set(url(/grafik/papier.webp) 1x, url(/grafik/papier@2x.webp) 2x);
}
.papier .sec,
.papier .end,
.papier .foot {
  background-color: var(--paper);
}
.papier .green {
  background-color: var(--green);
}
.offer {
  padding: 12px 0 64px;
  overflow-x: clip; /* Münzen dürfen über das Motiv hinaus fliegen, aber nie seitlich aus der Seite */
}
.offer-in {
  display: grid;
  gap: 28px;
}
.offer h1 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0;
}
.rabatt {
  width: min(100% + 12px, 520px);
  height: auto;
  margin: 12px auto 0;
}
/* Der Schriftzug im Schild ist mittig gesetzt – alles darunter folgt ihm, damit das Auge nicht springt */
.offer-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.offer .lead {
  margin-top: 14px;
  text-wrap: balance;
}
.offer .get {
  display: flex;
  justify-content: center;
}
.offer .fine {
  margin-top: 18px;
  text-wrap: balance;
}

/* Badges nebeneinander, gleich hoch */
.get {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.offer .get {
  align-items: center;
}
.get .stores {
  margin-top: 0;
}

/* QR-Code als Aufkleber auf dem Motiv (und auf dem Münzhaufen am Schluss): im Stil der Grafiken – cremefarben, dunkler
   Strich, schraffierter Schatten, leicht schief. Nur am Computer (mit Maus); er wandert beim Scrollen kaum mit. */
.qr-sticker {
  display: none;
  position: absolute;
  z-index: 2;
  margin: 0;
  left: var(--x);
  top: var(--y);
  isolation: isolate;
  rotate: -5deg;
  translate: 0 calc((var(--p) - 0.5) * -60px);
}
.qr-sticker .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 10px 7px;
  border: 2px solid #3a2f1c;
  border-radius: 16px;
  background: #fdf6e6;
}
.qr-sticker::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px -7px -7px 7px;
  border-radius: 16px;
  background: repeating-linear-gradient(-45deg, rgba(58, 47, 28, 0.35) 0 1.5px, transparent 1.5px 6px);
}
.qr-sticker {
  width: max-content; /* nie vom Rand des Bildes zusammengedrückt */
}
.qr-sticker img {
  width: 112px;
  height: 112px;
  max-width: none;
}
.qr-sticker .scan {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: #3a2f1c;
}
.offer-art .qr-sticker {
  --x: -12%;
  --y: 78%;
}
.end-art .qr-sticker {
  --x: 74%;
  --y: 66%;
  rotate: 6deg;
}

/* Das Motiv und vier Münzen rundherum. Parallax: --p läuft von 0 (Motiv kommt unten herein) bis 1 (oben hinaus), in
   der Mitte 0,5 = genau die gezeichnete Lage. Jede Münze wandert und dreht sich darüber verschieden weit, das Motiv
   kaum – so entsteht Tiefe. Getrieben von einer Scroll-Animation (CSS, ohne Hauptthread) oder, wo es die nicht gibt,
   vom Skript am Seitenende. „Bewegung reduzieren“: alles steht. */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
.offer-art {
  position: relative;
  width: min(62vw, 290px);
  margin: 24px auto 0;
}
.motiv {
  display: block;
  width: 100%;
  height: auto;
  translate: 0 calc((var(--p) - 0.5) * -30px);
}
.coin {
  position: absolute;
  height: auto;
  width: var(--w);
  left: var(--x);
  top: var(--y);
  translate: 0 calc((var(--p) - 0.5) * var(--dy));
  rotate: calc(var(--r) + (var(--p) - 0.5) * var(--dr));
  filter: drop-shadow(0 6px 10px rgba(19, 19, 19, 0.16));
}
.offer-art .c20 {
  --w: 37%;
  --x: -26%;
  --y: -1%;
  --r: -12deg;
  --dy: -260px;
  --dr: 50deg;
}
.offer-art .c15 {
  --w: 25%;
  --x: 86%;
  --y: 35%;
  --r: 14deg;
  --dy: -150px;
  --dr: -36deg;
}
.offer-art .c10 {
  --w: 28%;
  --x: -21%;
  --y: 56%;
  --r: 8deg;
  --dy: -340px;
  --dr: 70deg;
}
.offer-art .c5 {
  --w: 21%;
  --x: 81%;
  --y: 79%;
  --r: -18deg;
  --dy: -110px;
  --dr: -28deg;
}
@keyframes parallax {
  from {
    --p: 0;
  }
  to {
    --p: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .offer-art,
    .end-art {
      animation: parallax linear both;
      animation-timeline: view();
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-art,
  .end-art {
    --p: 0.5 !important;
  }
}

/* Überschriften als Sticker (Bild mit Alt-Text in h2/h3); der helle Rand der Bilder rückt sie leicht nach links aus */
.sticker-h {
  line-height: 0;
  margin-top: 10px;
}
.sticker-h img {
  width: min(100% + 12px, 460px);
  height: auto;
  margin-left: -10px;
}
.sticker-h img.band {
  width: min(100% + 16px, 420px);
  margin-left: -14px;
}
h3.sticker-h {
  margin-top: 56px;
}
h3.sticker-h img.band {
  width: min(100% + 16px, 340px);
}

/* So funktioniert’s: drei Karten (am Telefon untereinander, Bild links), darunter Staffel und Bedingungen */
.how {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.how li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
/* Karte: Bild ohne Beschriftung, die Beschriftung als Text darüber – an der Stelle und in der Größe des Originals
   (Outfit, 12 % der Kartenbreite; Containereinheiten, damit sie mit der Karte wächst) */
.how .card {
  position: relative;
  display: block;
  container-type: inline-size;
}
.how .card img {
  width: 100%;
  height: auto;
}
.card-label {
  position: absolute;
  left: 11%;
  top: 31.8%;
  font-size: 12cqw;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #ffffff;
}
.how p {
  margin: 0;
}
/* Staffel: vier Stufen, jede Straße eine höher, die Münze obenauf; die letzte (alle vier, 20 %) in Gold. Darunter die
   Bedingungen als ruhiges Raster (statt einer langen Karte) */
.reward {
  margin-top: 64px;
}
.reward > h3 {
  margin-top: 0;
}
.reward > p {
  max-width: 36em;
  margin-top: 8px;
}
.stairs {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}
.stairs li {
  --h: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.stairs li:nth-child(2) {
  --h: 92px;
}
.stairs li:nth-child(3) {
  --h: 120px;
}
.stairs li:nth-child(4) {
  --h: 148px;
}
.stairs img {
  width: min(88%, var(--s, 120px));
  height: auto;
}
.stairs li:nth-child(1) img {
  --s: 92px;
}
.stairs li:nth-child(2) img {
  --s: 104px;
}
.stairs li:nth-child(3) img {
  --s: 100px;
}
.stairs li:nth-child(4) img {
  --s: 140px;
}
/* Die Stufen in den Farben ihrer Münze, gezeichnet wie die Sticker: dunkler Strich, schraffierte Kante rechts,
   schraffierter Schatten daneben */
.stairs li {
  --ink-line: #3a2f1c;
  --hatch: repeating-linear-gradient(-45deg, rgba(58, 47, 28, 0.32) 0 1.5px, transparent 1.5px 6px);
}
.stairs .kupfer {
  --c: #cf946d;
}
.stairs .silber {
  --c: #c9cac8;
}
.stairs .gold {
  --c: #e1b35a;
}
.stairs .max {
  --c: #5e693e;
}
/* Die Stufe hält ihren Platz (feste Höhe, nichts verschiebt sich); sichtbar ist ::before – Farbe, schraffierte Kante,
   dunkler Strich oben und seitlich. So kann sie beim Hereinscrollen wirklich wachsen (Höhe 0 → voll, der obere Strich
   ist von Anfang an da), und die Beschriftung fährt auf ihrer Oberkante mit. */
.stairs .step {
  --pt: 12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 8px);
  height: var(--h);
  margin-right: 8px;
  padding-top: var(--pt);
  border-radius: 14px 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(19, 19, 19, 0.72);
  text-align: center;
}
.stairs .step::before {
  content: "";
  box-sizing: border-box; /* der obere Strich zählt zur Höhe – sonst ragt er 2 px über die Stufe und wird abgeschnitten */
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  border: 2px solid var(--ink-line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background:
    var(--hatch) right top / 14px 100% no-repeat,
    var(--c);
}
/* Schatten: die Stufe um 10 px nach rechts und 8 px nach unten versetzt, nur Schraffur. Er hängt am Listenpunkt, nicht an
   der Stufe – die ist eine eigene Ebene (isolation, overflow), ein Schatten darin läge über ihrer Fläche. */
.stairs li::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -2px;
  bottom: 0;
  width: calc(100% - 8px);
  height: calc(var(--h) - 8px);
  border-radius: 14px 14px 0 0;
  background: var(--hatch);
}
.stairs li {
  position: relative;
  isolation: isolate;
}
.stairs b {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.stairs .max .step {
  color: rgba(255, 255, 255, 0.86);
}
.stairs .max b {
  color: var(--gold);
}

/* Treppe beim Hereinscrollen: Stufe für Stufe wächst von unten (der obere Strich ist sofort da), dann fällt ihre Münze
   darauf und federt nach. Die Klassen setzt das Skript (.anim nur, wenn die Treppe noch unter dem Bildschirm liegt und
   „Bewegung reduzieren“ aus ist; .is-play, sobald sie zur Hälfte zu sehen ist). Ohne Skript steht alles. */
@media (prefers-reduced-motion: no-preference) {
  .stairs.anim img {
    opacity: 0;
  }
  .stairs.anim .step::before,
  .stairs.anim li::after {
    height: 0;
  }
  .stairs.anim .step {
    padding-top: var(--h);
  }
  .stairs.anim.is-play .step::before {
    animation: wachsen 0.6s cubic-bezier(0.2, 0.85, 0.3, 1) calc(var(--i) * 0.22s) both;
  }
  .stairs.anim.is-play li::after {
    animation: wachsen-schatten 0.6s cubic-bezier(0.2, 0.85, 0.3, 1) calc(var(--i) * 0.22s) both;
  }
  .stairs.anim.is-play .step {
    animation: mitfahren 0.6s cubic-bezier(0.2, 0.85, 0.3, 1) calc(var(--i) * 0.22s) both;
  }
  .stairs.anim.is-play img {
    animation: muenze 0.9s linear calc(var(--i) * 0.22s + 0.45s) both;
  }
  .stairs li:nth-child(1) {
    --i: 0;
  }
  .stairs li:nth-child(2) {
    --i: 1;
  }
  .stairs li:nth-child(3) {
    --i: 2;
  }
  .stairs li:nth-child(4) {
    --i: 3;
  }
}
/* Höhe 0 (border-box: nur der obere Strich) bis voll; die Beschriftung von unten mit der Oberkante herauf */
@keyframes wachsen {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@keyframes wachsen-schatten {
  from {
    height: 0;
  }
  to {
    height: calc(var(--h) - 8px);
  }
}
@keyframes mitfahren {
  from {
    padding-top: var(--h);
  }
  to {
    padding-top: var(--pt);
  }
}
/* Fall mit Schwerkraft (beschleunigt), Aufprall, zwei kleiner werdende Sprünge */
@keyframes muenze {
  0% {
    opacity: 0;
    transform: translateY(-140px);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  12% {
    opacity: 1;
  }
  42% {
    transform: translateY(0) scale(1.04, 0.94);
    animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
  }
  60% {
    transform: translateY(-26px) scale(1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  76% {
    transform: translateY(0) scale(1.02, 0.97);
    animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
  }
  88% {
    transform: translateY(-7px) scale(1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.stairs img {
  transform-origin: 50% 100%;
}

.conds-box {
  margin-top: 48px;
  scroll-margin-top: 24px;
}
.conds-box h3 {
  margin-top: 0;
}
.conds {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  column-gap: 32px;
}
.conds div {
  padding: 12px 0 14px;
  border-top: 1px solid var(--line);
}
.conds dt {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.conds dd {
  margin: 4px 0 0;
  line-height: 1.4;
}

/* Grüner Abschnitt: echter Zaunbau, das Video und die elf Handgriffe – weiße Schrift auf Grün (6,4 : 1) */
.green {
  background: var(--green);
  color: #ffffff;
  border-top: 0;
}
.green + .sec {
  border-top: 0;
}
.green .cap {
  color: rgba(255, 255, 255, 0.82);
}
.green a {
  color: #ffffff;
}
.green .steps li {
  border-color: rgba(255, 255, 255, 0.2);
}
.green .steps li::before,
.green .steps span {
  color: rgba(255, 255, 255, 0.78);
}
.green .pause {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.green .pause:hover {
  background: rgba(255, 255, 255, 0.12);
}
.green .player .phone {
  --w: min(260px, 66vw);
}

/* Zum Schluss: noch einmal Sticker und Badges, daneben ein Münzhaufen (mit derselben Parallaxe) */
.end {
  overflow-x: clip;
}
.end-in {
  display: grid;
  gap: 24px;
  align-items: center;
}
.end .lead {
  margin-top: 12px;
}
.end-art {
  position: relative;
  width: min(70vw, 300px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.end-art .c20 {
  --w: 54%;
  --x: 6%;
  --y: 36%;
  --r: -8deg;
  --dy: -90px;
  --dr: 20deg;
}
.end-art .c15 {
  --w: 34%;
  --x: 58%;
  --y: 8%;
  --r: 12deg;
  --dy: -170px;
  --dr: -30deg;
}
.end-art .c10 {
  --w: 38%;
  --x: 56%;
  --y: 52%;
  --r: -4deg;
  --dy: -60px;
  --dr: 16deg;
}
.end-art .c5 {
  --w: 28%;
  --x: 10%;
  --y: 4%;
  --r: 16deg;
  --dy: -220px;
  --dr: -40deg;
}

@media (min-width: 760px) {
  .offer {
    padding: 28px 0 96px;
  }
  .offer-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    align-items: center;
    gap: 64px;
  }
  .rabatt {
    width: 480px;
  }
  .offer-art {
    width: min(100%, 400px);
    margin-top: 0;
  }
  .how {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  .how li {
    grid-template-columns: none;
    align-content: start;
    justify-items: start;
    gap: 14px;
  }
  .how .card {
    width: min(100%, 250px);
  }
  .stairs {
    gap: 16px;
  }
  .stairs li {
    --h: 80px;
  }
  .stairs li:nth-child(2) {
    --h: 124px;
  }
  .stairs li:nth-child(3) {
    --h: 168px;
  }
  .stairs li:nth-child(4) {
    --h: 212px;
  }
  .stairs li:nth-child(1) img {
    --s: 118px;
  }
  .stairs li:nth-child(2) img {
    --s: 136px;
  }
  .stairs li:nth-child(3) img {
    --s: 128px;
  }
  .stairs li:nth-child(4) img {
    --s: 184px;
  }
  .conds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stairs b {
    font-size: 24px;
  }
  .stairs .step {
    --pt: 16px;
    font-size: 14px;
  }
  .green .player .phone {
    --w: 280px;
  }
  .green .steps {
    columns: 2;
    column-gap: 48px;
  }
  .green .steps li {
    break-inside: avoid;
  }
  .end-in {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 56px;
  }
  .end-art {
    width: 340px;
  }
}

@media (min-width: 1000px) and (hover: hover) {
  .qr-sticker {
    display: block;
  }
}

@media (min-width: 1100px) {
  .green .steps {
    columns: 3;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  /* Einblenden beim Herunterscrollen: Die Klasse .rv setzt erst das Skript am Ende der Seite, und nur, wenn es
     IntersectionObserver gibt und „Bewegung reduzieren“ aus ist. Ohne JavaScript bleibt alles sichtbar. Der Kopf mit
     dem Video und die Store-Badges bewegen sich nie. */
  .rv {
    opacity: 0;
    transform: translateY(26px);
  }
  .phone.rv {
    transform: translateY(44px);
  }
  /* der Übergang gehört nur zum Hereinkommen – das Verstecken unterhalb des Bildschirms geschieht ohne Bewegung */
  .rv.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rv-delay, 0ms),
      transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rv-delay, 0ms);
  }
  /* schon vorbeigescrollt (z. B. nach dem Neuladen weiter unten): sofort da, ohne Bewegung */
  .rv.is-now {
    transition: none;
  }
}

@media print {
  .rv {
    opacity: 1 !important;
    transform: none !important;
  }
}