/* Paket 67 (17.10.2026) — Feinschliff nach Aykuts Handy-Screenshots:
   1) Keine Vorzeilen („• FÜR WEN“, „• ALLES DRIN“, „IN 45 SEKUNDEN ERKLÄRT“) mehr – Abschnitte beginnen direkt mit der Überschrift.
   2) Die 3D-Kartenwand unter dem Hero wird zur ruhigen App-Bühne: drei echte App-Ansichten im Handy-Rahmen, zwei schwebende Glas-Karten.
   3) Der kleine „staunende“ Belegerl neben „So geht's?“ nur noch am Desktop (am Handy hing er abgeschnitten am Rand).
   4) Beta-50-Kennzeichen in Groß-/Kleinschreibung statt Versalien. */

/* ---------- 1) Vorzeilen weg, Abstände ---------- */
.eyebrow, .rl-kick { display: none !important; }
.fx-head > div > .sec-h { margin-top: 0; }
.b50 .tagline { text-transform: none; letter-spacing: 0; font: 600 .8rem/1 var(--body); padding: 7px 13px; background: #FFF1E3; color: #9A3412; }
.rl-copy h2 { margin-top: 0; }

/* ---------- 3) „So geht's?“-Figur ---------- */
@media (max-width: 819px) { .pz-how { display: none !important; } }

/* ---------- 2) App-Bühne ---------- */
.shw { position: relative; margin: clamp(30px, 5vw, 64px) auto 0; max-width: 1180px; padding: 0 var(--gutter); }
.shw-stage { position: relative; height: clamp(300px, 36vw, 470px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 2.2vw, 30px);
  padding-top: clamp(22px, 3vw, 44px); overflow: hidden; border-radius: 32px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%);
  perspective: 1400px; }
.shw-glow { position: absolute; left: 50%; top: 46%; width: min(760px, 86%); aspect-ratio: 2 / 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(37,99,235,.24), rgba(124,58,237,.14) 55%, transparent 100%); filter: blur(18px); }
.shw-ph { position: relative; flex: none; width: clamp(150px, 19vw, 236px); aspect-ratio: 390 / 844; margin: 0; border-radius: 14% / 6.5%; padding: 3.2%;
  background: linear-gradient(145deg, #2a3548, #0B1320 38%, #1b2536 70%, #3a4660);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 4px #0B1320, 0 2px 0 1px rgba(255,255,255,.05), 0 30px 60px -18px rgba(11,19,32,.45), 0 60px 120px -40px rgba(37,99,235,.35);
  transform-style: preserve-3d; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--sc, 1));
  transition: transform .9s var(--spring), opacity .7s var(--ease); }
.shw-ph::before { content: ""; position: absolute; right: -1.2%; top: 20%; width: 1.2%; height: 12%; border-radius: 0 4px 4px 0; background: #2a3548; }
.shw-ph.l { --rz: -6deg; --ry: 10deg; --sc: .92; --ty: 34px; z-index: 1; }
.shw-ph.r { --rz: 6deg; --ry: -10deg; --sc: .92; --ty: 34px; z-index: 1; }
.shw-ph.c { z-index: 2; }
.shw-scr { position: relative; width: 100%; height: 100%; border-radius: 11% / 5.2%; overflow: hidden; background: #F7F8FA; padding-top: 6.4%; }
.shw-scr img { display: block; width: 100%; height: auto; }
.shw-scr::after { content: ""; position: absolute; left: 50%; top: 1.9%; width: 26%; height: 3%; translate: -50%; border-radius: 999px; background: #0B1320; }
.shw-stage.is-tilting .shw-ph { transition: transform .12s linear; }

.shw-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -16px rgba(15,23,42,.32), 0 0 0 1px rgba(15,23,42,.06); color: var(--ink); font-size: .84rem; line-height: 1.2;
  animation: shw-float 6.5s ease-in-out infinite; }
.shw-chip b { display: block; font: 700 .9rem/1.2 var(--display); letter-spacing: -.01em; }
.shw-chip small { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.shw-chip .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #2563EB, #60A5FA); box-shadow: 0 8px 16px -8px rgba(37,99,235,.9); }
.shw-chip .ic svg { width: 18px; height: 18px; }
.shw-chip .ic.ok { background: linear-gradient(140deg, #059669, #34D399); box-shadow: 0 8px 16px -8px rgba(16,185,129,.9); }
.shw-chip .ic.ex { background: linear-gradient(140deg, #7C3AED, #A78BFA); box-shadow: 0 8px 16px -8px rgba(124,58,237,.9); }
.shw-chip.a { left: max(0px, calc(50% - 560px)); top: 14%; animation-delay: -2s; }
.shw-chip.b { right: max(0px, calc(50% - 560px)); top: 32%; animation-delay: -4.2s; }
.shw-chip.c { left: max(0px, calc(50% - 520px)); top: 54%; }
@keyframes shw-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.shw-note { margin: 10px 0 0; text-align: center; color: var(--dim); font-size: .78rem; }

/* Einblenden beim Scrollen (bl55.js setzt .in auf [data-rv]) – die Handys kommen von unten, die Karten etwas später */
.shw-ph[data-rv] { opacity: 0; transform: translate3d(var(--tx, 0), calc(var(--ty, 0px) + 40px), 0) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--sc, 1)); }
.shw-ph[data-rv].in { opacity: 1; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--sc, 1)); }
.shw-chip[data-rv] { transition-delay: calc(var(--rv, 0) * 90ms + 260ms); }

@media (max-width: 1040px) { .shw-chip.a, .shw-chip.c { left: 0; } .shw-chip.b { right: 0; } .shw-chip.c { top: auto; bottom: 34%; } }
@media (max-width: 760px) {
  .shw { padding: 0; margin-top: 26px; }
  .shw-stage { height: auto; display: flex; justify-content: flex-start; align-items: stretch; gap: 14px; padding: 18px var(--gutter) 0; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 0; perspective: none;
    -webkit-mask-image: none; mask-image: none; }
  .shw-stage::-webkit-scrollbar { display: none; }
  .shw-glow { display: none; }
  .shw-ph, .shw-ph.l, .shw-ph.r { --rz: 0deg; --ry: 0deg; --sc: 1; --ty: 0px; width: 62vw; max-width: 250px; height: auto; scroll-snap-align: center; transform: none; }
  .shw-ph:first-of-type { margin-left: calc((100vw - 62vw) / 2 - var(--gutter)); }
  .shw-ph:last-of-type { margin-right: calc((100vw - 62vw) / 2 - var(--gutter)); }
  .shw-ph[data-rv] { transform: translateY(30px); } .shw-ph[data-rv].in { transform: none; }
  .shw-chip { display: none; }
  .shw-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .shw-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(15,23,42,.18); transition: width .3s var(--ease), background .3s; }
  .shw-dots i.on { width: 18px; border-radius: 999px; background: var(--cobalt); }
}
@media (min-width: 761px) { .shw-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .shw-chip { animation: none; } .shw-ph { transition: none; } }

/* Dunkelmodus */
[data-theme=dark] .shw-ph { background: linear-gradient(145deg, #3a4660, #141c2b 40%, #232e42 70%, #56637d); }
[data-theme=dark] .shw-chip { background: rgba(23,30,46,.82); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); color: #fff; }
[data-theme=dark] .shw-chip small { color: #A9B6CC; }
[data-theme=dark] .b50 .tagline { background: #3A2A1C; color: #FDBA74; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .shw-ph { background: linear-gradient(145deg, #3a4660, #141c2b 40%, #232e42 70%, #56637d); }
  :root:not([data-theme=light]) .shw-chip { background: rgba(23,30,46,.82); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); color: #fff; }
  :root:not([data-theme=light]) .shw-chip small { color: #A9B6CC; }
  :root:not([data-theme=light]) .b50 .tagline { background: #3A2A1C; color: #FDBA74; }
}