/* ═══════════════════════════════════════════════════════════════════════════
   DIE STEMPELKARTE — Vorführung im Abschnitt #stempelkarte
   ───────────────────────────────────────────────────────────────────────────
   Ein iPhone steht auf der Bühne und spielt in vier Kapiteln vor, was die
   Karte bringt: scannen, in Wallet legen, stempeln, Belohnung.

   WARUM EIGENE DATEI: `stil.css` trägt die ganze Seite. Diese Vorführung ist
   ein abgeschlossenes Stück mit vielen eigenen Namen — die gehören nicht
   dazwischen. Alle Farben kommen aus den Namen der Seite, es wird KEINE neue
   Farbe erfunden.

   Die Kartenfarben sind die Fassung „Champagner" der Stempelkarte. Sie ist
   genau auf diese Website abgestimmt — dieselben Werte, nur hier direkt
   eingesetzt, damit die Website nicht von einer zweiten CSS-Datei abhängt.
   ═══════════════════════════════════════════════════════════════════════════ */

.sk {
  --karte-1: #FFFDF9;
  --karte-2: #F5F0E7;
  --karte-3: #EDE5D8;
  --schirm:  #0B0906;          /* der Bildschirm ist dunkler als der Abschnitt */
  --stempel-tinte: #46370F;
  --karte-gold: #63501F;       /* Gold als SCHRIFT auf dem Karton, gemessen */
  --wallet-blau: #2E7CF6;      /* Apples eigenes Blau für den Wallet-Knopf */
  overflow: hidden;            /* fallende Blätter dürfen die Seite nicht breiter machen */
}

.sk-bau {
  display: grid;
  grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 62rem) {
  .sk-bau { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; justify-items: center; }
  .sk-text { max-width: 40rem; }
}

/* ══ Das Gerät ════════════════════════════════════════════════════════════ */

.sk-geraet {
  position: relative;
  width: min(17.5rem, 74vw);
  aspect-ratio: 9 / 19.5;
  border-radius: 2.6rem;
  padding: .5rem;
  background: linear-gradient(150deg, #47413A, #191512 40%, #3A342D);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .1) inset,
    0 2.2rem 4.5rem rgba(0, 0, 0, .55),
    0 .4rem 1.2rem rgba(0, 0, 0, .4);
}

/* Der Steg oben. Kein Nachbau der Dynamic Island bis auf den Pixel — nur
   so viel, dass das Auge „iPhone" liest. */
.sk-steg {
  position: absolute; z-index: 4;
  top: 1.05rem; left: 50%; transform: translateX(-50%);
  width: 5.2rem; height: 1.55rem;
  border-radius: 999px;
  background: #060504;
}

.sk-schirm {
  position: relative;
  height: 100%;
  border-radius: 2.15rem;
  overflow: hidden;
  background: var(--schirm);
  color: var(--creme);
  font-family: var(--grotesk);
  isolation: isolate;
}

/* ══ Die Leiste von iOS ═══════════════════════════════════════════════════
   Sie ist der stärkste Hinweis darauf, dass hier ein iPhone steht — stärker
   als die Rundungen. Die Uhrzeit ist 9:41, wie auf allen Bildern von Apple. */

.sk-statusleiste {
  position: absolute; z-index: 5;
  inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.55rem 0;
  color: var(--creme);
  pointer-events: none;
}
.sk-uhr {
  font: 600 .74rem/1 var(--grotesk);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  padding-left: .3rem;
}
.sk-symbole { display: flex; align-items: center; gap: .3rem; }

/* ══ Wallet: die Leiste über der geöffneten Karte ═════════════════════════ */

.sk-navleiste {
  position: absolute; z-index: 2;
  inset: 2.9rem 1.1rem auto;
  display: flex; align-items: center; justify-content: space-between;
}
.sk-fertig {
  font: 400 .78rem/1 var(--grotesk);
  color: var(--wallet-blau);
}
.sk-mehr {
  display: flex; align-items: center; gap: .15rem;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  justify-content: center;
  background: rgba(252, 250, 246, .16);
}
.sk-mehr i {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--creme);
}

/* ══ Die Codefläche unter der Karte ═══════════════════════════════════════
   Wallet legt den Code immer auf hellen Grund und dreht die Helligkeit hoch —
   sonst liest ihn kein Scanner. Genau das zeigt die Vorführung. */

.sk-codeflaeche {
  flex: 1 1 auto;
  align-content: center;
  margin-top: .8rem;
  padding: 1rem .8rem 1.1rem;
  border-radius: .8rem;
  background: #fff;
  display: grid; justify-items: center; gap: .45rem;
  box-shadow: 0 0 2.5rem rgba(255, 255, 255, .16);
}
.sk-codeflaeche img { width: 62%; height: auto; }
.sk-codeflaeche p {
  margin: 0;
  font: 500 .58rem/1.2 var(--grotesk);
  color: #6B6156;
}

/* ══ Die Szenen ═══════════════════════════════════════════════════════════
   Alle liegen übereinander. Sichtbar ist die mit [data-an]. `visibility`
   statt `display`, damit der Übergang laufen kann — und damit Vorleser die
   ruhenden Szenen trotzdem überspringen. */

.sk-szene {
  position: absolute; inset: 0;
  display: grid;
  padding: 3.1rem 1.1rem 1.6rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(.97);
  transition: opacity .55s var(--weich), transform .7s var(--auf),
              visibility 0s linear .7s;
}
.sk-szene[data-an] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* ── Kapitel 1: der Aufsteller wird gescannt ─────────────────────────────── */

.sk-sucher {
  align-content: center; justify-items: center;
  padding-top: 3.4rem;
  gap: 1.1rem;
  background:
    radial-gradient(120% 80% at 50% 38%, #241E17 0%, #100C09 70%);
}
.sk-aufsteller {
  position: relative;
  width: 74%;
  padding: 1rem .8rem 1.15rem;
  border-radius: .5rem .5rem .2rem .2rem;
  background: linear-gradient(170deg, var(--karte-1), var(--karte-3));
  color: var(--espresso);
  text-align: center;
  box-shadow: 0 1.4rem 2.6rem rgba(0, 0, 0, .5);
}
.sk-aufsteller .sk-marke { color: var(--gold-text); }
/* height:auto ist hier Pflicht, nicht Kosmetik: im HTML steht height="120"
   am Bild. Ohne diese Zeile bleibt die Höhe bei 120 px, während die Breite
   auf 62 % schrumpft — gemessen 89x120 statt quadratisch. Ein gestauchter
   QR-Code ist kein QR-Code mehr, den lesen viele Handykameras nicht. */
.sk-aufsteller img, .sk-aufsteller svg {
  width: 62%; height: auto; aspect-ratio: 1;
  margin: .55rem auto .5rem;
}
.sk-aufsteller-zeile {
  font: 500 .58rem/1.35 var(--grotesk);
  color: var(--tinte-leise);
}

/* Die vier Ecken des Kamerasuchers. */
.sk-ecken {
  position: absolute; inset: 22% 12% 26%;
  pointer-events: none;
}
.sk-ecken i {
  position: absolute; width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--gold);
  opacity: .85;
}
.sk-ecken i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; border-radius: .4rem 0 0 0; }
.sk-ecken i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; border-radius: 0 .4rem 0 0; }
.sk-ecken i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 .4rem; }
.sk-ecken i:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-radius: 0 0 .4rem 0; }

.sk-szene[data-an] .sk-ecken i { animation: sk-fassen .9s var(--auf) both; }
@keyframes sk-fassen {
  from { opacity: 0; transform: scale(1.7); }
  to   { opacity: .85; transform: none; }
}

/* Der Streifen, den die Kamera über den Code zieht. */
.sk-strahl {
  position: absolute; left: 12%; right: 12%; top: 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 1.2rem var(--gold);
  opacity: 0;
}
.sk-szene[data-an] .sk-strahl { animation: sk-strahl 2.1s 1.1s var(--weich) 2; }
@keyframes sk-strahl {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(11.6rem); }
}

.sk-meldung {
  position: absolute; inset: auto 1.1rem 1.6rem;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem;
  border-radius: .9rem;
  background: rgba(252, 250, 246, .1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(252, 250, 246, .16);
  font: 500 .68rem/1.3 var(--grotesk);
  opacity: 0;
}
.sk-szene[data-an] .sk-meldung { animation: sk-melden .6s 3.1s var(--auf) forwards; }
@keyframes sk-melden {
  from { opacity: 0; transform: translateY(.8rem); }
  to   { opacity: 1; transform: none; }
}
.sk-meldung b { display: block; font-weight: 600; }
.sk-meldung small { color: rgba(252, 250, 246, .68); font-size: .62rem; }
.sk-meldung .sk-icon {
  flex: 0 0 auto;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: .5rem;
  background: var(--gold);
  color: var(--espresso);
}

/* ── Kapitel 2: die Karte legt sich in Wallet ────────────────────────────── */

.sk-wallet { align-content: start; gap: .6rem; padding-top: 3.6rem; }
.sk-wallet-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 .3rem .4rem;
  font: 600 1.05rem/1 var(--grotesk);
  letter-spacing: -.01em;
}
.sk-wallet-kopf span { font: 400 .62rem/1 var(--grotesk); color: rgba(252,250,246,.5); }

.sk-stapel { position: relative; padding-top: 5rem; }
.sk-fremd {
  position: absolute; left: 0; right: 0;
  height: 3.6rem;
  border-radius: .8rem;
  box-shadow: 0 -.15rem .5rem rgba(0, 0, 0, .35);
}
.sk-fremd:nth-child(1) { top: 0;      background: linear-gradient(135deg, #3D4E63, #22303F); }
.sk-fremd:nth-child(2) { top: 2.5rem; background: linear-gradient(135deg, #5C4638, #33251C); }

/* Unsere Karte kommt von unten und legt sich als dritte oben auf den Stapel. */
.sk-eingang { position: relative; }
.sk-szene[data-an] .sk-eingang { animation: sk-einlegen 1.3s .5s var(--auf) both; }
@keyframes sk-einlegen {
  from { transform: translateY(9rem) scale(.92); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sk-wallet-fuss {
  margin-top: .9rem;
  display: flex; align-items: center; gap: .5rem;
  font: 400 .62rem/1.4 var(--grotesk);
  color: rgba(252, 250, 246, .62);
  opacity: 0;
}
.sk-szene[data-an] .sk-wallet-fuss { animation: sk-melden .6s 1.9s var(--auf) forwards; }

/* ── Kapitel 3 und 4: die Karte füllt sich ───────────────────────────────── */

.sk-voll {
  display: flex;
  flex-direction: column;
  padding-top: 5.2rem;      /* unter der Navigationsleiste von Wallet */
}

/* ══ Die Karte selbst ═════════════════════════════════════════════════════ */

.sk-karte {
  position: relative;
  border-radius: .95rem;
  overflow: hidden;
  background: linear-gradient(163deg, var(--karte-1), var(--karte-2) 52%, var(--karte-3));
  color: var(--espresso);
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .45);
}
.sk-karte-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .7rem .8rem .55rem;
}
.sk-marke {
  font: 400 .48rem/1.5 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--karte-gold);
}
.sk-marke b {
  display: block;
  font: 300 .95rem/1 var(--serif);
  letter-spacing: .06em;
  color: var(--espresso);
}
.sk-karte-zahl {
  text-align: right;
  font: 400 .5rem/1.3 var(--mono);
  letter-spacing: .1em;
  color: var(--tinte-leise);
  text-transform: uppercase;
}
.sk-karte-zahl b {
  display: block;
  font: 300 1.5rem/1 var(--serif);
  color: var(--espresso);
  font-variant-numeric: tabular-nums;
}

/* Der Streifen mit den Stempeln — in Wallet heißt das „strip image". */
.sk-streifen {
  padding: .55rem .6rem .7rem;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--gold) 15%, transparent),
              color-mix(in srgb, var(--gold) 6%, transparent));
  border-block: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.sk-raster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .34rem;
}
.sk-feld {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px dashed var(--linie-stark);
  background: color-mix(in srgb, var(--creme) 55%, transparent);
  transition: border-color .4s var(--weich), background .4s var(--weich),
              box-shadow .4s var(--weich);
}
.sk-feld img {
  width: 84%; height: 84%;
  object-fit: contain;
  opacity: .46;
  filter: grayscale(.68) contrast(.88);
  transition: opacity .5s var(--weich), filter .5s var(--weich),
              transform .6s var(--auf);
}
.sk-feld[data-voll] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--gold) 62%, transparent);
  background: var(--karte-1);
  box-shadow: 0 .1rem .35rem rgba(70, 55, 15, .16);
}
.sk-feld[data-voll] img { opacity: 1; filter: none; }

/* Der Augenblick, in dem der Stempel kommt. */
.sk-feld[data-frisch] img { animation: sk-aufgehen .85s var(--auf); }
@keyframes sk-aufgehen {
  0%   { transform: scale(.3) rotate(-22deg); opacity: 0; }
  55%  { transform: scale(1.16) rotate(4deg); opacity: 1; }
  100% { transform: none; }
}
.sk-feld[data-frisch]::after {
  content: ""; position: absolute; inset: -.15rem;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: sk-ring .85s var(--auf) forwards;
}
@keyframes sk-ring {
  from { opacity: .9; transform: scale(.55); }
  to   { opacity: 0; transform: scale(1.75); }
}

/* Die Felder, an denen es etwas gibt. Ein Kranz, kein zweiter Rand. */
.sk-feld[data-lohn]::before {
  content: ""; position: absolute; inset: -.19rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold-text) 55%, transparent);
}

.sk-karte-fuss {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: end;
  padding: .6rem .8rem .75rem;
}
.sk-feldchen {
  font: 400 .46rem/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.sk-feldchen b {
  display: block;
  font: 500 .68rem/1.25 var(--grotesk);
  letter-spacing: 0;
  text-transform: none;
  color: var(--espresso);
}
.sk-rechts { text-align: right; }

.sk-strichcode {
  width: 3.1rem; height: 3.1rem;
  border-radius: .3rem;
  background: var(--creme);
  padding: .18rem;
  display: grid; place-items: center;
}
.sk-strichcode svg, .sk-strichcode img { width: 100%; height: 100%; }

/* Das Band, das bei einer Belohnung über die Karte fährt. */
.sk-band {
  margin: 0;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--espresso);
  color: var(--creme);
  font: 600 .7rem/1.2 var(--grotesk);
  text-align: center;
  max-height: 0;
  padding: 0 .7rem;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s var(--auf), padding .5s var(--auf),
              opacity .35s var(--weich);
}
.sk-band[data-an] {
  max-height: 3rem;
  padding: .55rem .7rem;
  opacity: 1;
}
.sk-band s { text-decoration: line-through; opacity: .55; font-weight: 400; }
.sk-band em { font-style: normal; color: var(--gold-hell); }

/* ══ Fallende Blütenblätter ═══════════════════════════════════════════════
   Bleiben INNERHALB des Bildschirms — es ist eine Vorführung, kein Stempel.
   Auf der echten Karte fallen sie über die ganze Fläche. */

.sk-regen {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.sk-blatt {
  position: absolute; top: -12%;
  width: var(--gross); height: calc(var(--gross) * .72);
  border-radius: 100% 0 100% 0;
  background: linear-gradient(140deg, var(--hell), var(--satt));
  /* Der äußere Schein hebt das Blatt vom dunklen Schirm ab; die innere Kante
     gibt ihm den Saum, den ein echtes Blütenblatt zum Rand hin hat. */
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--saum) 45%, transparent) inset,
              0 0 .5rem color-mix(in srgb, var(--hell) 35%, transparent);
  opacity: 0;
  animation: sk-fallen var(--dauer) var(--verzug) cubic-bezier(.35, .1, .55, 1) forwards;
}
@keyframes sk-fallen {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  10%  { opacity: .95; }
  85%  { opacity: .95; }
  100% { opacity: 0; transform: translate3d(var(--drift), var(--fall, 100vh), 0) rotate(var(--dreh)); }
}

/* ══ Kapitelleiste — dieselbe Sprache wie am Held-Film ════════════════════ */

.sk-kapitel {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .1rem 1.5rem;
}
@media (max-width: 52rem) {
  .sk-kapitel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.2rem; }
}
@media (max-width: 30rem) {
  .sk-kapitel { grid-template-columns: minmax(0, 1fr); }
}
.sk-kapitel-knopf {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: .7rem .7rem;
  align-items: baseline;
  align-content: start;
  padding: .9rem .1rem .2rem;
  background: none; border: 0;
  color: color-mix(in srgb, var(--creme) 52%, transparent);
  font: 500 .88rem/1.3 var(--grotesk);
  text-align: left;
  cursor: pointer;
  transition: color .3s var(--weich);
}
.sk-kapitel-knopf:hover { color: var(--creme); }
.sk-kapitel-knopf[aria-current="true"] { color: var(--creme); }
/* Nummer und Text stehen ausdrücklich in Zeile 2. Ohne das setzt Grid die
   Nummer in Zeile 1 — genau dorthin, wo schon der Balken liegt, und beide
   überlappen sich. */
.sk-kapitel-nr, .sk-kapitel-text { grid-row: 2; }

.sk-kapitel-nr {
  font: 400 .62rem/1 var(--mono);
  letter-spacing: .1em;
  color: var(--gold-hell);
}
.sk-kapitel-text small {
  display: block;
  font: 400 .76rem/1.45 var(--grotesk);
  color: color-mix(in srgb, var(--creme) 58%, transparent);
  margin-top: .1rem;
}
.sk-kapitel-balken {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: .35rem;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--creme) 14%, transparent);
  overflow: hidden;
}
.sk-kapitel-balken i {
  display: block; height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
.sk-kapitel-knopf[aria-current="true"] .sk-kapitel-balken i {
  transform: scaleX(var(--fortschritt, 0));
}
.sk-kapitel-knopf[data-vorbei="1"] .sk-kapitel-balken i {
  transform: scaleX(1);
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ══ Der Text daneben ═════════════════════════════════════════════════════ */

.sk-punkte {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.sk-punkte li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
}
.sk-punkte svg {
  width: 1.35rem; height: 1.35rem;
  flex: 0 0 auto;
  margin-top: .18rem;
  color: var(--gold);
}
.sk-punkte b { display: block; font-weight: 600; }
.sk-punkte span { color: color-mix(in srgb, var(--creme) 68%, transparent); }

/* Die Rechnung. Zahlen sind das stärkste Argument — sie bekommen Platz. */
.sk-rechnung {
  margin-top: 2.2rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--creme) 16%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--creme) 5%, transparent);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1.1rem 1.5rem;
}
.sk-posten small {
  display: block;
  font: 400 .6rem/1.4 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-hell);
  margin-bottom: .3rem;
}
.sk-posten b {
  font: 300 clamp(1.5rem, 2.4vw, 2rem)/1 var(--serif);
  font-variant-numeric: tabular-nums;
}
.sk-posten i {
  display: block;
  font: 400 .74rem/1.4 var(--grotesk);
  font-style: normal;
  color: color-mix(in srgb, var(--creme) 58%, transparent);
  margin-top: .25rem;
}
.sk-posten-stark b { color: var(--gold-hell); }

.sk-knoepfe {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: 2rem;
}

/* Auf Nacht ist --tinte (#2B2621) unsichtbar. Der schlichte Knopf bekommt
   dieselbe Behandlung wie im Held-Film: helle Schrift, heller Rand. */
.sk .knopf:not(.knopf-wallet):not(.knopf-gold) {
  --k-schrift: var(--creme);
  --k-rand: color-mix(in srgb, var(--creme) 45%, transparent);
}
.sk .knopf:not(.knopf-wallet):not(.knopf-gold)::before { background: var(--creme); }
.sk .knopf:not(.knopf-wallet):not(.knopf-gold):hover {
  color: var(--espresso); border-color: var(--creme);
}

/* Der Wallet-Knopf trägt Apples Optik: schwarz, weiße Schrift, das Zeichen
   davor. Er sieht bewusst anders aus als die Knöpfe der Seite — genau daran
   erkennen iPhone-Nutzer, was passiert, wenn sie ihn drücken. */
.knopf-wallet {
  --k-grund: #000;
  --k-schrift: #fff;
  --k-rand: #000;
  gap: .5rem;
  font-weight: 600;
}
.knopf-wallet::before { background: #23201C; }
.knopf-wallet:hover { color: #fff; border-color: #23201C; }
.knopf-wallet svg { width: 1.35rem; height: 1.35rem; }

.sk-fussnote {
  margin-top: 1.3rem;
  font: 400 .78rem/1.55 var(--grotesk);
  color: color-mix(in srgb, var(--creme) 52%, transparent);
}
.sk-fussnote a { color: var(--gold-hell); }

/* ══ Wer wenig Bewegung will, bekommt keine ═══════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sk-szene, .sk-szene * { animation: none !important; transition: none !important; }
  .sk-blatt { display: none; }
  .sk-eingang { transform: none; opacity: 1; }
  .sk-meldung, .sk-wallet-fuss { opacity: 1; }
}

/* ══ Der mitlaufende Zähler unter dem Gerät ═══════════════════════════════
   Die stärkste Übersetzung von „was bringt das": eine Zahl, die wächst,
   während die Karte sich füllt. */

.sk-zaehler {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin: 1.3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--creme) 14%, transparent);
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--creme) 55%, transparent);
}
.sk-zaehler b {
  font: 300 1.75rem/1 var(--serif);
  letter-spacing: 0;
  color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
}

/* Der Kopf dieses Abschnitts trägt nur die Überschrift — der Fließtext steht
   rechts neben dem Gerät, sonst bleibt dort oben eine leere Fläche. */
.sk-kopf { grid-template-columns: minmax(0, 1fr); }
.sk-text > .lead { margin-bottom: 0; }