/* Dynamo Service: Farben und Chrom aus dem Logo, Energie-Wellen aus dem Banner, dazu eine FiveM-Nachtstadt.
   Aufbau: Logo und Wellen, Flug durch die Stadt mit Beispielansichten, Shop als Spieler-Inventar. */
:root {
  color-scheme: dark;
  --void: #03060f;
  --night: #071024;
  --panel: #0b1a38;
  --panel-up: #11264f;
  --line: #1f3f7a;
  --volt: #0a7bff;
  --cyan: #19b8ff;
  --ice: #cfeaff;
  --chrome: #e8eef5;
  --steel: #9fb2ca;
  --danger: #ff9b84;
  --amber: #ffc65c;
  --display: "Archivo", "Arial Black", "DejaVu Sans", sans-serif;
  --body: "Barlow", "Segoe UI", "Trebuchet MS", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 66px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body { margin: 0; color: var(--chrome); font: 400 17px/1.55 var(--body); overflow-x: clip; background: radial-gradient(80vw 80vh at 70% 30%, #0b2a66 0%, var(--night) 45%, var(--void) 100%) fixed var(--void); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h2 {
  font: 900 clamp(2rem, 4.6vw, 4.2rem)/1.02 var(--display); font-stretch: 125%; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word;
  background: linear-gradient(180deg, #fff 18%, #b9c8da 48%, #f5f9fd 56%, #8ea6c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
h3 { font: 800 1.2rem/1.15 var(--display); font-stretch: 125%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }

#scene, #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#scene { z-index: 1; }
#fx { z-index: 60; }
body.standing #scene { z-index: 41; visibility: visible !important; }

.btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 30px;
  border-radius: 999px; font: 800 .95rem/1.1 var(--display); font-stretch: 125%; text-decoration: none; text-align: center; color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .75), inset 0 -2px 3px rgba(255, 255, 255, .22), inset 0 0 22px rgba(160, 225, 255, .28), 0 12px 32px rgba(2, 30, 90, .55);
  transition: transform .45s cubic-bezier(.2, 1.9, .35, 1), box-shadow .25s, opacity .2s;
}
.btn > span { position: relative; z-index: 2; }
/* Flüssiger Lichtfleck unter dem Mauszeiger */
.btn::before { content: ""; position: absolute; z-index: 1; left: var(--mx, 50%); top: var(--my, 50%); width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 46% 54% 42% 58%; background: radial-gradient(circle, rgba(170, 235, 255, .85), rgba(25, 184, 255, .35) 48%, rgba(25, 184, 255, 0) 70%); transform: scale(0); transition: transform .5s cubic-bezier(.2, 1.3, .35, 1); pointer-events: none; }
.btn:hover::before { transform: scale(1); }
/* Glanz oben auf dem Tropfen */
.btn::after { content: ""; position: absolute; z-index: 1; left: 9%; right: 9%; top: 3px; height: 42%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn:hover { transform: scale(1.04, .97); }
.btn:active { transform: scale(.94, 1.06); }
.btn-volt { background: linear-gradient(180deg, rgba(25, 184, 255, .85), rgba(10, 123, 255, .9) 60%, rgba(6, 80, 200, .95)); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .75), inset 0 -3px 6px rgba(150, 225, 255, .5), 0 0 34px rgba(10, 123, 255, .6), 0 12px 32px rgba(2, 30, 90, .55); }
.btn-glass { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05)); }
.btn:disabled { background: rgba(255, 255, 255, .06); color: var(--steel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); cursor: not-allowed; transform: none; }
.btn:disabled::before { display: none; }
.btn-wide { width: 100%; }

.nav { position: fixed; z-index: 30; inset: 0 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: 26px; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); background: linear-gradient(rgba(3, 6, 15, .92), rgba(3, 6, 15, 0)); }
.nav { transition: background .25s; }
.nav.solid { background: rgba(3, 6, 15, .94); box-shadow: 0 1px 0 var(--line); }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 .92rem/1 var(--display); font-stretch: 125%; text-transform: uppercase; flex: none; }
.nav-logo img { width: 38px; height: auto; display: block; filter: drop-shadow(0 0 8px rgba(25, 184, 255, .7)); }
.nav-links { display: flex; gap: 22px; }
.nav-links a { text-decoration: none; font-weight: 600; color: var(--steel); padding: 6px 0; }
.nav-links a:hover { color: #fff; }
.nav-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.seg { position: relative; display: flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); }
.seg button { position: relative; z-index: 1; padding: 5px 13px; font-weight: 700; font-size: .85rem; color: var(--ice); border-radius: 999px; }
.seg button[aria-pressed="true"] { color: #fff; }
.seg-blob { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 999px; background: linear-gradient(180deg, var(--cyan), var(--volt)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 0 14px rgba(25, 184, 255, .7); transition: transform .5s cubic-bezier(.3, 1.6, .4, 1), width .3s; }
.nav-cart { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
#nav-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: linear-gradient(180deg, var(--cyan), var(--volt)); color: #fff; font-size: .85rem; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 20px) max(var(--gutter), env(safe-area-inset-right, 0px)) 110px max(var(--gutter), env(safe-area-inset-left, 0px)); }
.hero::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(3, 6, 15, .72), rgba(3, 6, 15, .25) 42%, rgba(3, 6, 15, 0) 58%); pointer-events: none; }
.hero-body { position: relative; z-index: 3; width: min(62vw, 900px); display: grid; gap: 22px; }
.hero-word { line-height: 0; }
.hero-word img { width: 100%; height: auto; display: block; filter: drop-shadow(0 5px 0 #052777) drop-shadow(0 9px 0 #021243) drop-shadow(0 0 22px rgba(25, 184, 255, .75)); }
.hero-lead { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.35; font-weight: 500; max-width: 34rem; text-shadow: 0 1px 12px var(--void); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ice); font-weight: 600; font-size: .98rem; text-shadow: 0 1px 10px var(--void); }
.hero-facts li { position: relative; padding-left: 16px; }
.hero-facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--cyan); transform: rotate(45deg); }

.slides { position: relative; height: 520vh; z-index: 2; }
.slides-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.slides-pin::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 6, 15, .82) 0%, rgba(3, 6, 15, .4) 40%, rgba(3, 6, 15, 0) 62%); pointer-events: none; }
.slides-track { position: relative; display: flex; height: 100%; width: 500%; will-change: transform; }
.slide { width: 20%; height: 100%; padding: calc(var(--nav-h) + 16px) var(--gutter) 64px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 64px); align-items: center; perspective: 1400px; }
.slide-box { display: grid; gap: 16px; min-width: 0; }
.slide h2 { font-size: clamp(2rem, 4.2vw, 4rem); }
.slide-text { font-size: 1.15rem; max-width: 32rem; }
.slide ul.points { display: grid; gap: 4px; }
.slide ul.points li { padding-left: 16px; position: relative; }
.slide ul.points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--cyan); transform: rotate(45deg); }
.slide-price { font: 900 1.5rem/1 var(--display); font-stretch: 125%; color: var(--cyan); text-shadow: 0 0 18px rgba(25, 184, 255, .6); }
.slide-status { justify-self: start; border-radius: 999px; padding: 7px 18px; font: 800 .95rem/1.2 var(--display); font-stretch: 125%; text-transform: uppercase; color: #171002; background: repeating-linear-gradient(-45deg, #ffc65c 0 12px, #f0ad2e 12px 24px); }
.visual { min-width: 0; transform: rotateY(-14deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .25s ease-out; position: relative; }
.visual-note { position: absolute; right: 0; bottom: -28px; font-size: .85rem; color: var(--steel); }
.slides-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 26px; height: 3px; background: rgba(159, 178, 202, .25); }
.slides-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--volt), var(--cyan)); box-shadow: 0 0 12px var(--cyan); transform-origin: left; transform: scaleX(0); }

/* Beispielansichten */
.v-game { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: end; font-family: var(--body); }
.v-menu { background: rgba(5, 12, 28, .9); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); }
.v-menu header { background: linear-gradient(90deg, var(--volt), var(--cyan)); padding: 10px 14px; font: 800 1rem/1.1 var(--display); font-stretch: 125%; text-transform: uppercase; }
.v-menu li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; font-weight: 500; }
.v-menu li.on { background: rgba(25, 184, 255, .22); box-shadow: inset 3px 0 0 var(--cyan); font-weight: 700; }
.v-menu li span:last-child { color: var(--steel); }
.v-hud { display: grid; gap: 8px; }
.v-speed { justify-self: end; text-align: right; font: 900 3.4rem/.9 var(--display); font-stretch: 125%; text-shadow: 0 0 22px var(--cyan); font-variant-numeric: tabular-nums; }
.v-speed small { display: block; font: 600 .85rem var(--body); color: var(--ice); }
.v-bar { height: 10px; background: rgba(5, 12, 28, .85); }
.v-bar i { display: block; height: 100%; background: var(--c, var(--cyan)); box-shadow: 0 0 10px var(--c, var(--cyan)); }
.v-browser { background: var(--void); box-shadow: 0 24px 70px rgba(0, 0, 0, .65), 0 0 0 1px var(--line); }
.v-bar-top { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--panel); font-size: .85rem; color: var(--steel); }
.v-bar-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.v-bar-top span { margin-left: 8px; background: var(--void); padding: 2px 12px; flex: 1; min-width: 0; }
.v-site { padding: 26px 22px; display: grid; gap: 10px; background: radial-gradient(90% 120% at 80% 0%, #0d3a8c, var(--void)); min-height: 250px; align-content: end; }
.v-site b { font: 900 clamp(1.5rem, 3vw, 2.5rem)/1 var(--display); font-stretch: 125%; text-transform: uppercase; }
.v-site em { font-style: normal; color: var(--ice); }
.v-site u { text-decoration: none; justify-self: start; background: var(--volt); padding: 8px 16px; font-weight: 700; }
.v-discord { background: #313338; padding: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .65); font-family: var(--body); font-size: .98rem; color: #dbdee1; }
.v-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 700; color: #fff; }
.v-author img { width: 34px; height: 34px; border-radius: 50%; background: var(--void); object-fit: contain; padding: 3px; }
.v-author small { background: #5865f2; color: #fff; font-size: .68rem; padding: 1px 5px; border-radius: 3px; }
.v-embed { background: #2b2d31; box-shadow: inset 4px 0 0 var(--volt); padding: 12px 14px 12px 18px; display: grid; gap: 8px; border-radius: 4px; }
.v-embed b { color: #fff; }
.v-embed ul { display: grid; gap: 2px; }
.v-row { display: flex; gap: 28px; }
.v-row strong { display: block; color: #fff; font-size: .86rem; }
.v-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.v-btns span { background: #248046; color: #fff; padding: 5px 12px; border-radius: 4px; font-weight: 600; font-size: .9rem; }
.v-btns span:first-child { background: #5865f2; }
.v-btns span:nth-child(2) { background: #da373c; }
.v-banner img { width: 100%; height: auto; display: block; box-shadow: 0 24px 70px rgba(0, 0, 0, .65), 0 0 40px rgba(10, 123, 255, .5); }

.shop { position: relative; z-index: 2; overflow: clip; background: linear-gradient(180deg, rgba(3, 6, 15, 0) 0, rgba(3, 6, 15, .62) 260px, rgba(3, 6, 15, .62) 100%); padding: 120px max(var(--gutter), env(safe-area-inset-right, 0px)) 88px max(var(--gutter), env(safe-area-inset-left, 0px)); }
.shop-ghost { position: absolute; top: 34px; left: -1vw; font: 900 21vw/1 var(--display); font-stretch: 125%; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(25, 184, 255, .16); pointer-events: none; user-select: none; }
.shop-head { position: relative; max-width: 50rem; display: grid; gap: 14px; margin-bottom: 56px; }
.shop-head > p { font-size: 1.15rem; color: var(--ice); }
.shop-head > p.link-note { color: var(--cyan); font-weight: 600; }
.shop-head > p.link-note.warn { color: var(--danger); }
.shop-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.board-wrap { min-width: 0; }
.board { display: grid; gap: 44px; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 26px; }
.pack { position: relative; overflow: hidden; display: grid; gap: 3px; text-align: left; padding: 16px 20px; border-radius: 30px; background: linear-gradient(170deg, rgba(25, 184, 255, .24), rgba(10, 123, 255, .08)); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .5), 0 14px 30px rgba(2, 20, 70, .4); transition: transform .45s cubic-bezier(.2, 1.7, .35, 1), box-shadow .2s; }
.pack:hover { transform: scale(1.025, .985); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .7), 0 0 26px rgba(25, 184, 255, .55); }
.pack:active { transform: scale(.97, 1.03); }
.pack strong { font: 800 1.02rem/1.15 var(--display); font-stretch: 125%; }
.pack small { font-size: .94rem; line-height: 1.25; color: var(--ice); }
.pack em { font-style: normal; font-weight: 700; color: #fff; margin-top: 5px; }
.pack[aria-pressed="true"] { background: linear-gradient(170deg, #15a8ff, #0a65e0); }
.tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 34px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 320px; }
.field { display: block; min-width: 0; }
.field input, .field select { width: 100%; min-height: 50px; padding: 0 20px; border: 0; border-radius: 999px; color: #fff; font: inherit; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1.5px 3px rgba(0, 10, 40, .55), inset 0 -1px 1px rgba(255, 255, 255, .25); }
.field input::placeholder { color: #c3d3e6; }
.field select option { color: #06122b; }
.search { flex: 2 1 190px; }
.sort { flex: 1 1 170px; }
.no-results { color: var(--ice); font-size: 1.1rem; padding: 24px 0; }
.status-box { display: grid; gap: 12px; width: min(560px, 100%); }
.status-form, .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.status-form .field, .coupon .field { flex: 1 1 170px; }
.coupon-out { font-weight: 600; color: var(--cyan); }
.coupon-out.bad { color: var(--danger); }
.faq { position: relative; z-index: 2; background: rgba(3, 6, 15, .76); padding: 88px max(var(--gutter), env(safe-area-inset-right, 0px)) 88px max(var(--gutter), env(safe-area-inset-left, 0px)); display: grid; gap: 30px; }
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq details { border-radius: 28px; background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .32); padding: 4px 24px; transition: background .25s; }
.faq details[open] { background: rgba(25, 184, 255, .16); }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--cyan); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 16px; color: var(--ice); }
#bgv { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#bgv-tint { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(3, 12, 48, .28), rgba(3, 10, 40, 0) 30%, rgba(3, 10, 40, 0) 65%, rgba(3, 6, 15, .5)); }
.tabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 5px; border-radius: 30px; background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .4), 0 14px 34px rgba(2, 20, 70, .45); }
.tab { position: relative; z-index: 1; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .96rem; color: var(--ice); white-space: nowrap; transition: color .2s; }
.tab[aria-pressed="true"] { color: #fff; }
.tab-blob { position: absolute; left: 0; top: 5px; height: 40px; border-radius: 999px; background: linear-gradient(180deg, var(--cyan), var(--volt)); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .75), 0 0 20px rgba(25, 184, 255, .7); transition: transform .55s cubic-bezier(.3, 1.6, .4, 1), width .35s; }
.rail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 10px; }
.rail-head h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 900; }
.rail-head p { color: var(--ice); font-size: .98rem; }
.rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.slot { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 58px; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; border-radius: 34px; text-align: left; transition: transform .45s cubic-bezier(.2, 1.7, .35, 1), box-shadow .25s, background .25s; }
.slot::before { content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 50%); width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 47% 53% 44% 56%; background: radial-gradient(circle, rgba(25, 184, 255, .3), rgba(25, 184, 255, 0) 66%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.slot:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .32), inset 0 -1px 2px rgba(255, 255, 255, .08); transform: scale(1.012); }
.slot:hover::before { opacity: 1; }
.slot:active { transform: scale(.985, 1.015); }
.slot-fill { position: absolute; z-index: -1; inset: -14px; pointer-events: none; }
.slot-fill.moving { filter: url(#liquid); }
.slot-fill i { position: absolute; inset: 0; display: block; background: linear-gradient(100deg, #15a8ff, #0a7bff 45%, #0a5fd8); clip-path: circle(0 at calc(var(--fx, 80%) + 14px) calc(var(--fy, 50%) + 14px)); transition: clip-path .7s cubic-bezier(.3, .8, .3, 1); }
.slot[aria-checked="true"] .slot-fill i { clip-path: circle(135% at calc(var(--fx, 80%) + 14px) calc(var(--fy, 50%) + 14px)); }
.slot[aria-checked="true"] { box-shadow: inset 0 2px 2px rgba(255, 255, 255, .7), inset 0 -4px 10px rgba(150, 225, 255, .45), 0 0 30px rgba(10, 123, 255, .65), 0 12px 28px rgba(2, 30, 90, .5); }
.slot-ico { display: block; line-height: 0; }
.slot-ico.has-img img { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 14px rgba(25, 184, 255, .4); }
.new-badge { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font: 800 .7rem/1.5 var(--body); vertical-align: 2px; color: #fff; background: linear-gradient(90deg, var(--volt), var(--cyan)); box-shadow: 0 0 12px rgba(25, 184, 255, .7); }
.slot svg { width: 32px; height: 32px; fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(25, 184, 255, .75)); transition: stroke .3s; }
.slot[aria-checked="true"] svg { stroke: #fff; filter: none; }
.slot-main { display: grid; gap: 1px; min-width: 0; }
.slot strong { font: 800 1.05rem/1.2 var(--display); font-stretch: 125%; overflow-wrap: break-word; }
.slot small { font-size: .98rem; line-height: 1.3; color: #c3d3e6; display: block; text-shadow: 0 1px 6px var(--void); transition: color .3s; }
.slot[aria-checked="true"] small { color: #e6f4ff; text-shadow: none; }
.price { font: 800 1rem/1 var(--display); font-stretch: 125%; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price.soon { color: var(--amber); }
.slot[aria-checked="true"] .price.soon { color: #fff; }
/* Flüssiger Schalter: der Tropfen dehnt sich beim Wechsel */
.toggle { position: relative; display: block; width: 58px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1.5px 2px rgba(0, 10, 40, .55), inset 0 -1px 1px rgba(255, 255, 255, .25); transition: background .3s; }
.toggle i { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 999px; background: radial-gradient(circle at 35% 28%, #fff, #d7ecff 45%, #8fc4f2); box-shadow: 0 3px 8px rgba(0, 15, 50, .55), inset 0 -2px 3px rgba(60, 120, 200, .35); transition: left .5s cubic-bezier(.3, 1.6, .4, 1), width .18s ease-out; }
.slot:hover .toggle i { width: 31px; }
.slot:active .toggle i { width: 37px; }
.slot[aria-checked="true"] .toggle { background: rgba(255, 255, 255, .34); }
.slot[aria-checked="true"] .toggle i { left: 29px; }
.slot[aria-checked="true"]:hover .toggle i { left: 24px; }
.slot.wip { grid-column: 1 / -1; }

.meter { position: sticky; top: calc(var(--nav-h) + 16px); padding: 20px; border-radius: 38px; display: grid; gap: 12px; background: linear-gradient(170deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .45), inset 0 -1px 2px rgba(255, 255, 255, .1), 0 22px 54px rgba(2, 20, 70, .55); }
.meter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meter-head h3 { font-size: 1.1rem; }
#meter-count { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, var(--cyan), var(--volt)); font-weight: 700; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 0 14px rgba(25, 184, 255, .6); }
.meter-empty { color: var(--ice); padding: 10px 0; }
.cart-list { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.cart-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; align-items: center; gap: 8px; padding: 7px 6px 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .97rem; }
.cart-list li span:nth-child(2) { color: var(--cyan); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; color: var(--ice); background: rgba(255, 255, 255, .08); transition: background .2s, transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.rm:hover { background: #d94c4c; color: #fff; transform: scale(1.14); }
.tier { display: grid; gap: 6px; }
.tier-bar { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 3px rgba(0, 10, 40, .7); overflow: hidden; }
.tier-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #6fdcff, var(--volt)); box-shadow: 0 0 12px var(--cyan); transition: width .7s cubic-bezier(.3, 1.5, .4, 1); }
.tier p { font-size: .92rem; color: var(--ice); min-height: 1em; }
.meter-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 900 1.4rem/1.1 var(--display); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.meter-total span { font-size: .98rem; color: var(--ice); }
.link-btn { color: var(--ice); font-weight: 600; font-size: .94rem; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.link-btn:disabled { opacity: .4; cursor: not-allowed; }
.meter-discount { color: var(--cyan); font-weight: 600; font-size: .97rem; }
.mobile-bar { position: fixed; z-index: 28; inset: auto 0 0; display: none; align-items: center; justify-content: space-between; gap: 12px; border-radius: 26px 26px 0 0; background: rgba(8, 20, 48, .72); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .3); font: 900 1.15rem/1 var(--display); font-stretch: 125%; }

/* Ablauf als Route mit Wegpunkten */
.process { position: relative; z-index: 2; background: rgba(3, 6, 15, .72); padding: 88px max(var(--gutter), env(safe-area-inset-right, 0px)) 88px max(var(--gutter), env(safe-area-inset-left, 0px)); display: grid; gap: 40px; justify-items: start; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: s; width: 100%; }
.steps li { counter-increment: s; display: grid; gap: 8px; align-content: start; position: relative; padding-top: 72px; min-width: 0; }
.steps li::before { content: counter(s); position: absolute; top: 0; left: 0; width: 50px; height: 50px; display: grid; place-items: center; background: linear-gradient(180deg, var(--cyan), var(--volt)); color: #fff; font: 900 1.3rem/1 var(--display); z-index: 1; border-radius: 50%; box-shadow: 0 0 18px rgba(25, 184, 255, .7); }
.steps li::after { content: ""; position: absolute; top: 23px; left: 50px; right: -28px; height: 4px; background: repeating-linear-gradient(90deg, var(--cyan) 0 14px, transparent 14px 24px); }
.steps li:last-child::after { display: none; }
.steps p { color: var(--ice); }

.foot { position: relative; z-index: 2; background: var(--void); color: var(--steel); padding: 44px max(var(--gutter), env(safe-area-inset-right, 0px)) 44px max(var(--gutter), env(safe-area-inset-left, 0px)); display: grid; gap: 18px; font-size: .94rem; }
.foot img { width: min(280px, 70vw); height: auto; display: block; filter: drop-shadow(0 2px 0 #052777) drop-shadow(0 0 10px rgba(25, 184, 255, .6)); }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

.stand { display: contents; }
.stand-back { position: fixed; z-index: 40; inset: 0; background: radial-gradient(70vw 80vh at 70% 50%, rgba(11, 47, 115, .35), rgba(3, 6, 15, .8)); }
.stand-panel { position: fixed; z-index: 42; left: 0; top: 0; bottom: 0; width: min(480px, 100%); background: linear-gradient(170deg, rgba(20, 44, 92, .72), rgba(3, 6, 15, .82)); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); box-shadow: inset -1.5px 0 1px rgba(255, 255, 255, .28), 18px 0 50px rgba(0, 10, 40, .5); border-radius: 0 38px 38px 0; padding: 28px max(24px, env(safe-area-inset-left, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; display: grid; align-content: start; gap: 14px; }
.stand-close { justify-self: end; color: var(--steel); font-weight: 600; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; }
#stand-order, #stand-done { display: grid; gap: 14px; }
.stand-panel h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.stand-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font: 900 1.45rem/1.1 var(--display); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.stand-from { color: var(--steel); font-size: .97rem; }
.stand label { font-weight: 600; }
.stand textarea { width: 100%; background: rgba(255, 255, 255, .07); color: var(--chrome); border: 0; box-shadow: inset 0 1.5px 3px rgba(0, 10, 40, .55), inset 0 -1px 1px rgba(255, 255, 255, .2); padding: 13px 18px; font: inherit; resize: vertical; border-radius: 24px; }
.stand textarea::placeholder { color: var(--steel); }
.stand-error { color: var(--danger); font-weight: 600; }
.hold { position: relative; isolation: isolate; overflow: hidden; min-height: 76px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(255, 255, 255, .15), 0 14px 34px rgba(2, 30, 90, .55); font: 800 .98rem/1.15 var(--display); font-stretch: 125%; padding: 10px 22px; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .4s cubic-bezier(.2, 1.8, .35, 1); }
.hold:active { transform: scale(.97, 1.03); }
/* Flüssigkeit steigt mit zwei drehenden Wellen im Knopf */
.hold-fill { --p: 0; position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; }
.hold-fill i { position: absolute; left: 50%; width: 900px; height: 900px; margin-left: -450px; top: calc(100% - var(--p) * 150% + 26px); border-radius: 43%; background: linear-gradient(180deg, #19a4ff, #0a6cf0 70px); animation: spin 2.6s linear infinite; }
.hold-fill i + i { border-radius: 39%; opacity: .5; margin-top: -6px; background: #19b8ff; animation-duration: 3.8s; }
@keyframes spin { to { transform: rotate(360deg); } }
.hold-label { position: relative; color: #fff; text-shadow: 0 1px 3px #01102e, 0 0 12px #01102e; }
.hold.busy { cursor: progress; opacity: .7; }
.code-plate { border-radius: 30px; background: linear-gradient(180deg, #fff, #c2d0de 48%, #e9eff5 54%, #9db0c8); color: #06122b; font: 900 clamp(1.5rem, 5vw, 2.2rem)/1 var(--display); font-stretch: 125%; padding: 18px; text-align: center; overflow-wrap: anywhere; box-shadow: 0 0 30px rgba(25, 184, 255, .6); }
.code-plate.stamp { animation: stamp .36s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes stamp { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.done-steps { counter-reset: d; display: grid; gap: 6px; color: var(--steel); }
.done-steps li { counter-increment: d; padding-left: 26px; position: relative; }
.done-steps li::before { content: counter(d) "."; position: absolute; left: 0; font-weight: 700; color: var(--cyan); }
.flash { position: fixed; inset: 0; z-index: 70; background: #bfe6ff; pointer-events: none; animation: flash .55s ease-out forwards; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }

.slides.static { height: auto; }
.slides.static .slides-pin { position: static; height: auto; overflow: visible; }
.slides.static .slides-pin::before, .slides.static .slides-progress { display: none; }
.slides.static .slides-track { display: block; width: 100%; height: auto; transform: none !important; }
.slides.static .slide { width: 100%; height: auto; padding-block: 56px; }

@media (max-width: 1320px) {
  .rail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .meter { display: none; }
  .mobile-bar:not([hidden]) { display: flex; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(2)::after { display: none; }
  .shop { padding-bottom: 110px; }
  .slide { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px; }
  .visual { transform: rotateX(4deg); max-width: 620px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { gap: 8px; }
  .nav-links, .nav-logo span, #nav-count { display: none; }
  .nav-tools { gap: 6px; }
  .nav-cart { font-size: .92rem; }
  .hero { align-items: flex-end; padding-top: 16svh; padding-bottom: 28px; }
  .hero::before { background: linear-gradient(0deg, rgba(3, 6, 15, .92) 30%, rgba(3, 6, 15, 0) 62%); }
  .hero-body { width: 100%; gap: 16px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { flex: 1 1 100%; min-height: 46px; }
  .hero-facts { display: grid; gap: 2px; font-size: .94rem; }
  .slides-pin::before { background: linear-gradient(0deg, rgba(3, 6, 15, .9), rgba(3, 6, 15, .5)); }
  .slide { padding: calc(var(--nav-h) + 4px) 16px 48px; gap: 14px; align-content: start; }
  .slide h2 { font-size: clamp(1.45rem, 7vw, 2rem); }
  .slide-text { font-size: 1rem; line-height: 1.35; }
  .slide ul.points { display: none; }
  .slide-price { font-size: 1.15rem; }
  .v-game { grid-template-columns: minmax(0, 1fr); }
  .v-hud { display: none; }
  .v-menu li:nth-child(n+4) { display: none; }
  .v-site { min-height: 120px; padding: 16px; }
  .v-discord { padding: 10px; font-size: .88rem; }
  .v-btns { display: none; }
  .visual-note { position: static; display: block; margin-top: 6px; text-align: right; }
  .slot { grid-template-columns: 28px minmax(0, 1fr) 58px; gap: 4px 12px; padding: 13px 14px; border-radius: 28px; }
  .slot:hover { transform: none; }
  .slot svg { width: 26px; height: 26px; }
  .slot-ico { grid-row: 1 / 3; }
  .slot-main { grid-column: 2; }
  .price { grid-column: 2; grid-row: 2; font-size: .94rem; margin-top: 3px; }
  .toggle { grid-column: 3; grid-row: 1 / 3; }
  .slot strong { font-size: .98rem; }
  .slot small { font-size: .94rem; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; border-radius: 26px; }
  .tab { padding: 9px 13px; font-size: .92rem; }
  .shop-ghost { font-size: 26vw; top: 50px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li::after { display: none; }
  .stand-panel { width: 100%; top: 28svh; padding-top: 10px; border-radius: 30px 30px 0 0; box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .28); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}