/* Unterseite „Digitale Stempelkarte“ – baut auf style.css auf.
   Das auffällige Element ist ein Handy aus HTML und CSS mit einer Stempelkarte, die sich beim Scrollen füllt. */

:root {
  --karte: #1d1d1f;
  --karte-text: #ffffff;
  --karte-text-2: rgba(255, 255, 255, .62);
  --karte-feld: rgba(255, 255, 255, .22);
}

/* Start ------------------------------------------------------------ */
.sk-held { text-align: left; padding-top: clamp(48px, 7vw, 96px); }
.sk-held-innen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sk-eroeffnung { font-size: var(--t-klein); font-weight: 600; color: var(--bernstein-tinte); letter-spacing: 0; }
.sk-held h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); letter-spacing: -0.03em; line-height: 1.02; margin-top: 14px; max-width: 14ch; }
.sk-held .vorspann { max-width: 44ch; margin: 28px 0 0; }
.sk-held .knopfreihe { justify-content: flex-start; margin-top: 36px; }
.sk-held .held-notiz { margin-top: 24px; }
.sk-held-geraet { margin: 0; justify-self: center; text-align: center; }
.sk-held-geraet figcaption { margin-top: 22px; font-size: var(--t-klein); color: var(--tinte-2); max-width: 32ch; margin-inline: auto; }
.sk-held::after { margin-top: clamp(56px, 7vw, 96px); }

/* Handy aus CSS ---------------------------------------------------- */
.handy-modell {
  width: 300px; max-width: 100%; aspect-ratio: 9 / 18.6;
  background: #1d1d1f; border-radius: 46px; padding: 11px;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .55), inset 0 0 0 1px #3a3a3c;
  position: relative; margin-inline: auto;
}
.handy-modell::before {
  content: ""; position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  width: 84px; height: 24px; background: #1d1d1f; border-radius: 999px; z-index: 3;
}
.handy-schirm {
  position: relative; height: 100%; overflow: hidden; border-radius: 36px;
  background: linear-gradient(180deg, #f7f7f9, #ececf0);
  padding: 72px 14px 0;
}
.handy-zeit { position: absolute; left: 0; right: 0; top: 0; height: 60px; display: flex; align-items: center; padding: 0 30px; }
.handy-zeit span { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--tinte); }
.handy-zeit::after {
  content: ""; margin-left: auto; width: 22px; height: 11px; border-radius: 3px;
  border: 1.5px solid var(--tinte); background: linear-gradient(90deg, var(--tinte) 0 72%, transparent 72%);
  background-clip: content-box; padding: 1.5px;
}

.wallet-karte {
  background: var(--karte); color: var(--karte-text); border-radius: 18px;
  padding: 18px 18px 16px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5);
  text-align: left;
}
.wk-kopf { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.wk-zeichen {
  grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--bernstein); color: var(--karte); font-weight: 700; font-size: 1rem;
}
.wk-absender { font-weight: 600; font-size: 0.9375rem; line-height: 1.2; }
.wk-art { font-size: 0.6875rem; color: var(--karte-text-2); }
.wk-felder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.wk-felder span {
  aspect-ratio: 1; border-radius: 50%; position: relative;
  box-shadow: inset 0 0 0 2px var(--karte-feld);
  transition: background-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.wk-felder span::after {
  content: ""; position: absolute; left: 50%; top: 46%; width: 36%; height: 20%;
  border-left: 2.5px solid var(--karte); border-bottom: 2.5px solid var(--karte);
  transform: translate(-50%, -50%) rotate(-45deg) scale(0); transition: transform .3s ease .1s;
}
.wk-felder span.voll { background: var(--bernstein); box-shadow: inset 0 0 0 2px var(--bernstein); }
.wk-felder span.voll::after { transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
.wk-stand { margin-top: 18px; font-size: 0.8125rem; font-weight: 600; }
.wk-belohnung { font-size: 0.75rem; color: var(--karte-text-2); margin-top: 2px; }
.wk-code {
  margin: 16px auto 0; width: 92px; height: 92px; border-radius: 8px; background: #fff; padding: 8px;
  background-image:
    linear-gradient(90deg, var(--karte) 2px, transparent 2px),
    linear-gradient(var(--karte) 2px, transparent 2px);
  background-size: 7px 7px; background-clip: content-box; opacity: .9;
}
.wk-voll {
  position: absolute; left: 14px; right: 14px; bottom: 22px;
  background: var(--bernstein); color: var(--karte); border-radius: 16px; padding: 12px 14px;
  display: grid; gap: 2px; font-size: 0.8125rem; line-height: 1.3;
  opacity: 0; transform: translateY(24px); transition: opacity .4s ease, transform .4s ease;
}
.wk-voll strong { font-size: 0.9375rem; }
.wk-voll.sichtbar { opacity: 1; transform: none; }

/* So einfach geht's ------------------------------------------------ */
.sk-ablauf-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.sk-schritte { counter-reset: schritt; }
.sk-schritte li {
  counter-increment: schritt; min-height: 52vh;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-content: center;
  padding: 24px 0; border-top: 1px solid var(--linie);
}
.sk-schritte li:first-child { border-top: 0; }
.sk-schritte li::before {
  content: counter(schritt); grid-row: 1 / span 2;
  font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--bernstein);
}
.sk-schritte h3 { grid-column: 2; font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.sk-schritte p { grid-column: 2; margin-top: 10px; color: var(--tinte-2); max-width: 40ch; font-size: 1.125rem; }
.sk-buehne { position: sticky; top: calc(var(--kopf-hoehe) + 40px); display: grid; place-items: center; min-height: calc(100vh - var(--kopf-hoehe) - 80px); }

/* Nachrichten ------------------------------------------------------ */
.sk-beispiele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.sk-beispiel h3 { font-size: var(--t-h3); margin-top: 24px; }
.sk-beispiel p { margin-top: 10px; color: var(--tinte-2); max-width: 44ch; }
.sperrbild {
  position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 3; max-height: 340px;
  background: radial-gradient(120% 90% at 20% 10%, #4b4b52, #1d1d1f 60%, #0f0f10);
  color: #fff; padding: 22px 24px; display: grid; align-content: end;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.sk-beispiel .sperrbild-tag { margin: 0; font-size: 0.9375rem; color: rgba(255, 255, 255, .7); }
.sk-beispiel .sperrbild-zeit { color: #fff; font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: 2px; }
.mitteilung {
  position: absolute; left: 16px; right: 16px; top: 16px;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
  background: rgba(255, 255, 255, .92); color: var(--tinte); border-radius: 20px; padding: 12px 14px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transform: translateY(-160%); opacity: 0;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}
.sperrbild.sichtbar .mitteilung { transform: none; opacity: 1; }
.mitteilung-zeichen {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: var(--karte); color: var(--bernstein); font-weight: 700;
}
.mitteilung-text { font-size: 0.875rem; line-height: 1.35; }
.mitteilung-von { display: block; font-weight: 600; }
.mitteilung-wann { font-size: 0.75rem; color: var(--tinte-2); padding-top: 2px; }
.sk-randnotiz { margin-top: clamp(32px, 4vw, 48px); color: var(--tinte-2); max-width: 60ch; }

/* Passt für -------------------------------------------------------- */
.sk-passt { padding-block: clamp(56px, 7vw, 96px); }
.sk-branchen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vw, 40px); }
.sk-branchen li { background: var(--weiss); border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 1rem; }

/* Was Sie bekommen ------------------------------------------------- */
.sk-leistung-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); }
.sk-leistung-kopf { position: sticky; top: calc(var(--kopf-hoehe) + 48px); align-self: start; }
.sk-brauchen { margin-top: 28px; padding: 18px 20px; background: var(--grau); border-radius: 16px; max-width: 40ch; }
.sk-liste li { padding: 22px 0 22px 36px; border-top: 1px solid var(--linie); position: relative; font-size: 1.125rem; }
.sk-liste li:last-child { border-bottom: 1px solid var(--linie); }
.sk-liste li::before {
  content: ""; position: absolute; left: 2px; top: 32px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--bernstein-tinte); border-bottom: 2.5px solid var(--bernstein-tinte); transform: rotate(-45deg);
}

/* Fair ------------------------------------------------------------- */
.sk-fair { padding-block: clamp(56px, 7vw, 96px); }
.sk-fair-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.sk-fair .vorspann { color: var(--tinte); max-width: 46ch; }

/* Preis ------------------------------------------------------------ */
.sk-einrichtung { margin-top: clamp(40px, 5vw, 64px); padding: 20px 24px; background: var(--grau); border-radius: 16px; max-width: 760px; }
.pakete-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-top: 16px; }
.sk-preis .paket { box-shadow: inset 0 0 0 1px var(--linie); }
.sk-preis .paket-betont { box-shadow: inset 0 0 0 2px var(--tinte); }
.sk-rechnung {
  margin-top: clamp(32px, 4vw, 48px); max-width: 760px;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3;
  padding-left: 20px; border-left: 4px solid var(--bernstein);
}

/* Buchen ----------------------------------------------------------- */
.sk-buchen-knoepfe { margin-top: clamp(32px, 4vw, 48px); }
.knopf-hell { background: var(--weiss); color: var(--tinte); }
.knopf-hell:hover { background: #e8e8ed; }
.knopf-rahmen { background: transparent; color: var(--dunkel-text); box-shadow: inset 0 0 0 1.5px var(--dunkel-text); }
.knopf-rahmen:hover { background: #1d1d1f; }
.kontakt-notiz a { color: var(--dunkel-text); text-decoration-color: var(--bernstein); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Kleine Bildschirme ----------------------------------------------- */
@media (max-width: 960px) {
  .sk-held-innen { grid-template-columns: 1fr; }
  .sk-held { text-align: center; }
  .sk-held h1 { margin-inline: auto; }
  .sk-held .vorspann { margin-inline: auto; }
  .sk-held .knopfreihe { justify-content: center; }
  .handy-modell { width: 260px; }
  .sk-ablauf-innen { grid-template-columns: 1fr; }
  .sk-buehne { display: none; }
  .sk-schritte li { min-height: 0; padding: 32px 0; align-content: start; }
  .sk-beispiele { grid-template-columns: 1fr; }
  .sperrbild { aspect-ratio: 16 / 10; }
  .sk-leistung-innen { grid-template-columns: 1fr; }
  .sk-leistung-kopf { position: static; }
  .sk-fair-innen { grid-template-columns: 1fr; }
  .pakete-zwei { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .sk-held .knopfreihe { max-width: 360px; margin-inline: auto; }
  .handy-modell { width: 240px; border-radius: 40px; padding: 9px; }
  .handy-modell::before { width: 72px; height: 20px; top: 18px; }
  .handy-schirm { border-radius: 32px; padding: 64px 12px 0; }
  .sk-schritte li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .sk-schritte li::before { font-size: 1.625rem; }
  .sperrbild { padding: 18px 20px; border-radius: 22px; aspect-ratio: 4 / 3; }
  .mitteilung { left: 10px; right: 10px; top: 10px; padding: 10px 12px; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; }
  .mitteilung-zeichen { width: 32px; height: 32px; }
  .mitteilung-text { font-size: 0.8125rem; }
  .sk-rechnung { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-felder span, .wk-felder span::after, .wk-voll, .mitteilung { transition: none; }
  .sperrbild .mitteilung { transform: none; opacity: 1; }
}