/* ════════════════════════════════════════════════════════════════════
   TicketX — landing.css
   Marketing-Seite für Veranstalter.

   Baut ausschließlich auf den Marken-Tokens aus /public.css auf
   (--sand,--cream,--tan,--caramel,--cocoa,--ink*,--glass*,--ease).
   Hier stehen nur landingpage-eigene Bausteine.

   Gliederung
     00  Basis, Hintergrund, Rhythmus
     01  Produkt-UI-Baukasten  ← Nachbau echter Dashboard-Bausteine
     02  Hero
     03  Trust / Referenzen / Zahlen
     04  Problem → Lösung
     05  Whitelabel + Shop-Vorschau
     06  Wallet-Vergleich
     07  Mobile / iOS-App
     08  Automatisierung
     09  Funktionsraster
     10  Konditionen
     11  Final-CTA
     12  Motion-Utilities & Reduced Motion
   ════════════════════════════════════════════════════════════════════ */

/* ═══ 00 · Basis ═══════════════════════════════════════════════════ */

body { background:var(--cream); min-height:unset }

.lx-bg {
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(1100px 620px at 78% -8%,  rgba(220,175,134,.42), transparent 62%),
    radial-gradient(900px  560px at 4%  38%,  rgba(224,208,191,.5),  transparent 60%),
    radial-gradient(760px  520px at 60% 96%,  rgba(191,130,92,.16),  transparent 62%),
    linear-gradient(178deg,#fffaf0 0%,var(--cream) 22%,#faf0d8 58%,#f3e4c4 100%);
}
/* Feines Korn — nimmt den Verläufen das Digitale. */
.lx-grain {
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.75'/></svg>");
}
.lx-wrap { position:relative; z-index:3 }

.nav-inner { transform:translateY(-130%) }

/* Lesefortschritt */
.lx-progress {
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:9999;
  transform-origin:left; transform:scaleX(0); will-change:transform;
  background:linear-gradient(90deg,var(--tan),var(--caramel) 55%,var(--cocoa));
}

/* Rhythmus */
.lx-sec  { padding:132px 0; position:relative }
.lx-sec--tight { padding:92px 0 }
.lx-container { max-width:1180px; margin:0 auto; padding:0 40px }
@media(max-width:900px){ .lx-sec { padding:88px 0 } .lx-sec--tight { padding:64px 0 } }
@media(max-width:768px){ .lx-container { padding:0 22px } }

/* Trennlinie zwischen Sektionen — extrem zurückhaltend */
.lx-rule { height:1px; background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent) }

/* Sprungziele nicht unter die fixierte Nav-Insel schieben */
[id] { scroll-margin-top:96px }

.lx-head { max-width:680px; margin:0 auto 68px; text-align:center }
@media(max-width:900px){ .lx-head { margin-bottom:48px } }

.lx-kicker {
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Geist Mono",monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cocoa); margin-bottom:20px;
}
.lx-kicker::before { content:""; width:18px; height:1px; background:var(--caramel); flex-shrink:0 }

.lx-h2 { font-size:clamp(32px,4.6vw,54px); font-weight:500; letter-spacing:-.038em; line-height:1.05 }
.lx-h2 i { font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; letter-spacing:-.01em }
.lx-sub { font-size:16.5px; line-height:1.68; color:var(--ink-3); margin-top:20px; max-width:56ch }
.lx-head .lx-sub { margin-left:auto; margin-right:auto }

.lx-mag { display:inline-block; will-change:transform }

/* Marke für noch nicht verfügbare Funktionen — bewusst gedämpft statt in
   der Akzentfarbe, damit sie nicht wie ein Highlight wirkt. */
.lx-soon {
  display:inline-block; margin-left:7px; vertical-align:2px;
  font-family:"Geist Mono",monospace; font-size:8.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cocoa);
  background:rgba(167,108,78,.1); border:1px solid rgba(167,108,78,.2);
  padding:2px 7px; border-radius:99px; white-space:nowrap;
}

/* Karte — Grundform aller Flächen */
.lx-card {
  background:color-mix(in oklab,white 62%,transparent);
  backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-b); border-radius:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 24px 54px -28px rgba(90,55,30,.26);
}

/* ═══ 01 · Produkt-UI-Baukasten ════════════════════════════════════
   Nachbau der echten Dashboard-Bausteine (dashboard/dashboard.php →
   .ov-kpi-new, .ov-card-new, .ov-ev-row …). Bewusst als HTML statt als
   Screenshot: gestochen scharf, animierbar, in jeder Auflösung korrekt.
   ═══════════════════════════════════════════════════════════════════ */

/* Browser-Rahmen */
.ui-browser {
  border-radius:16px; overflow:hidden; position:relative; isolation:isolate;
  background:#fffdf7; border:1px solid rgba(167,108,78,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 60px 120px -46px rgba(90,55,30,.42),
             0 22px 50px -26px rgba(90,55,30,.2);
}
.ui-chrome {
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:linear-gradient(180deg,#faf2e4,#f4e9d6);
  border-bottom:1px solid rgba(167,108,78,.12);
}
.ui-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0 }
.ui-dot:nth-child(1){ background:#e5a09a } .ui-dot:nth-child(2){ background:#e3c68f } .ui-dot:nth-child(3){ background:#a9c79b }
.ui-url {
  flex:1; margin-left:10px; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.8); border:1px solid rgba(167,108,78,.1); border-radius:7px;
  padding:5px 12px; font-family:"Geist Mono",monospace; font-size:10.5px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ui-url svg { width:10px; height:10px; stroke:#7a9a6a; fill:none; stroke-width:2.2; flex-shrink:0 }

/* Dashboard-Korpus */
.ui-dash { display:grid; grid-template-columns:186px 1fr; background:#fffdf7; min-height:436px }
.ui-side {
  border-right:1px solid rgba(167,108,78,.1); padding:16px 12px;
  display:flex; flex-direction:column; gap:1px; background:linear-gradient(180deg,#fffdf8,#fdf6e9);
}
.ui-side-logo { display:flex; align-items:center; gap:7px; padding:4px 8px 16px }
.ui-side-logo img { height:15px; width:auto; display:block }
.ui-side-lbl {
  font-family:"Geist Mono",monospace; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4); padding:14px 10px 6px;
}
.ui-nav {
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px;
  font-size:11.5px; color:var(--ink-3); white-space:nowrap;
}
.ui-nav svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.7; flex-shrink:0 }
.ui-nav.on { background:rgba(191,130,92,.13); color:var(--cocoa); font-weight:500 }

.ui-main { padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; min-width:0 }
.ui-top { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:2px }
.ui-date {
  display:flex; align-items:center; gap:6px; font-family:"Geist Mono",monospace;
  font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); margin-bottom:5px;
}
.ui-date::before { content:""; width:5px; height:5px; border-radius:50%; background:#7a9a6a }
.ui-hello { font-size:20px; font-weight:500; letter-spacing:-.03em; line-height:1 }
.ui-seg { display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:rgba(42,31,23,.05); border:1px solid rgba(167,108,78,.1) }
.ui-seg span { padding:4px 9px; border-radius:999px; font-size:10px; color:var(--ink-3) }
.ui-seg span.on { background:#fff; color:var(--cocoa); font-weight:500; box-shadow:0 2px 6px -3px rgba(90,55,30,.25) }

/* KPI-Kacheln — 1:1 nach .ov-kpi-new */
.ui-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
.ui-kpi {
  position:relative; overflow:hidden; padding:12px 13px 13px; border-radius:13px;
  background:linear-gradient(180deg,#fffdf8,#fdf5e8); border:1px solid rgba(167,108,78,.11);
}
.ui-kpi-top { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:9px }
.ui-kpi-l { display:block; font-family:"Geist Mono",monospace; font-size:8px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ui-kpi-ic {
  width:19px; height:19px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(191,130,92,.14); color:var(--cocoa);
}
.ui-kpi-ic svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2 }
.ui-kpi-v { font-size:21px; font-weight:600; letter-spacing:-.035em; line-height:1; display:flex; align-items:baseline; gap:1px }
.ui-kpi-v .cur { font-size:13px; font-weight:500; color:var(--ink-3) }
.ui-kpi-d { margin-top:7px; font-size:9.5px; font-weight:500; color:#5d8452; display:flex; align-items:center; gap:3px }
.ui-kpi-d.flat { color:var(--ink-3); font-weight:400 }
.ui-kpi-spark { position:absolute; right:0; bottom:0; width:52px; height:20px; opacity:.55 }

/* Karten-Grundform im Dashboard */
.ui-row2 { display:grid; grid-template-columns:1.62fr 1fr; gap:10px }
.ui-card { background:#fffdf8; border:1px solid rgba(167,108,78,.11); border-radius:13px; padding:13px 14px; min-width:0 }
.ui-card-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px }
.ui-card-t { font-size:11.5px; font-weight:500; display:flex; align-items:center; gap:7px }
.ui-card-t small {
  font-family:"Geist Mono",monospace; font-size:7.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); background:rgba(167,108,78,.07); padding:2px 6px; border-radius:99px; font-weight:400;
}
.ui-card-more { font-size:9.5px; color:var(--ink-4); font-family:"Geist Mono",monospace; letter-spacing:.06em; text-transform:uppercase }

/* Umsatz-Chart */
.ui-chart { width:100%; height:118px; display:block; overflow:visible }
.ui-chart .grid { stroke:rgba(167,108,78,.1); stroke-dasharray:2 4 }
.ui-chart .line { fill:none; stroke:#A76C4E; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.ui-chart .area { fill:url(#lxArea) }
.ui-chart .xlab { font-family:"Geist Mono",monospace; font-size:7px; fill:var(--ink-4); letter-spacing:.06em }

/* Event-Zeilen */
.ui-ev { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid rgba(167,108,78,.08) }
.ui-ev:last-child { border-bottom:none }
.ui-ev-img {
  width:28px; height:28px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:600; color:rgba(255,255,255,.92); letter-spacing:.02em;
}
.ui-ev-in { flex:1; min-width:0; display:block }
.ui-ev-n { display:block; font-size:10.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ui-ev-m { display:flex; align-items:center; gap:5px; font-size:8.5px; color:var(--ink-4); margin-top:2px }
.ui-live { width:5px; height:5px; border-radius:50%; background:#7a9a6a; box-shadow:0 0 0 0 rgba(122,154,106,.6); animation:lxPulse 2.4s ease-out infinite }
@keyframes lxPulse { 0%{box-shadow:0 0 0 0 rgba(122,154,106,.5)} 70%,100%{box-shadow:0 0 0 6px rgba(122,154,106,0)} }
.ui-ev-r { text-align:right; flex-shrink:0 }
.ui-ev-bar { display:block; width:46px; height:3px; border-radius:99px; background:rgba(167,108,78,.14); overflow:hidden; margin:0 0 4px auto }
.ui-ev-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--tan),var(--caramel)) }
.ui-ev-n2 { display:block; font-size:9.5px; font-weight:600; color:var(--cocoa) }

/* Bestell-Tabelle */
.ui-table { width:100%; border-collapse:collapse }
.ui-table th {
  font-family:"Geist Mono",monospace; font-size:7.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-4); font-weight:400; text-align:left; padding:0 0 7px;
}
.ui-table td { padding:6px 0; font-size:10.5px; color:var(--ink-2); border-top:1px solid rgba(167,108,78,.08); white-space:nowrap }
.ui-table td:last-child, .ui-table th:last-child { text-align:right }
.ui-av {
  width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:600; color:#fff; margin-right:7px; vertical-align:middle;
}
.ui-pill {
  display:inline-flex; align-items:center; gap:4px; font-size:8.5px; font-weight:500;
  padding:2px 7px; border-radius:99px; background:rgba(122,154,106,.14); color:#4f7344;
}
.ui-pill::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor }
.ui-pill--new { background:rgba(191,130,92,.16); color:var(--cocoa) }

/* Schwebende, aus dem Dashboard herausgelöste Bausteine */
.ui-float {
  position:absolute; z-index:6; border-radius:15px; padding:13px 15px;
  background:color-mix(in oklab,white 84%,transparent);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 26px 52px -22px rgba(90,55,30,.42);
  will-change:transform;
}
.ui-float-l { display:block; font-family:"Geist Mono",monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4) }
.ui-float-v { display:block; font-size:20px; font-weight:600; letter-spacing:-.035em; margin-top:5px; line-height:1 }

/* Check-in-Bestätigung */
.ui-checkin { display:flex; align-items:center; gap:11px }
.ui-checkin > span:last-child { min-width:0 }
.ui-checkin-ic {
  width:34px; height:34px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#8fb37e,#5f8a4f); color:#fff;
  box-shadow:0 8px 18px -8px rgba(95,138,79,.75);
}
.ui-checkin-ic svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.ui-checkin-t { display:block; font-size:12.5px; font-weight:500; letter-spacing:-.01em }
.ui-checkin-s { display:block; font-size:10.5px; color:var(--ink-3); margin-top:2px }

/* ═══ 02 · Hero ════════════════════════════════════════════════════
   Die Hero-Sequenz ist an die Scrollposition gekoppelt: landing.js
   schreibt geeaste Phasenwerte in die Custom Properties unten, hier
   werden sie ausschließlich auf transform/opacity/filter angewendet.
   Damit läuft die Choreografie auf der GPU, ist exakt umkehrbar und
   braucht keine Animationsbibliothek.

   Ebenen (hinten → vorn):  .hero-depth · .hero-copy · .hero-stage
   ═══════════════════════════════════════════════════════════════════ */

.hero { position:relative }

/* Scrollstrecke: alles über 100vh ist der Weg durch die Sequenz. */
.hero-track { position:relative; height:380vh }
@media(max-width:900px){ .hero-track { height:320vh } }
.hero-frame {
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  padding-top:clamp(96px,13vh,150px);
  /* Fluchtpunkt etwas oberhalb der Mitte — die Bühne kippt dadurch nach
     hinten weg statt nach unten. */
  perspective:1800px; perspective-origin:50% 38%;
}

/* Hintergrundebene: bewegt sich gegenläufig und sehr wenig — das ist
   der Tiefeneindruck, nicht der Effekt selbst. */
.hero-depth {
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(680px 480px at 76% 12%, rgba(220,175,134,.5), transparent 64%),
    radial-gradient(560px 420px at 12% 78%, rgba(191,130,92,.2), transparent 62%);
  transform:translate3d(0, var(--depth-y, 0px), 0) scale(var(--depth-s, 1));
  opacity:var(--depth-o, 1);
}

.hero-copy {
  position:relative; z-index:2; width:100%;
  transform:translate3d(0, var(--copy-y, 0px), 0) scale(var(--copy-s, 1));
  opacity:var(--copy-o, 1);
  filter:blur(var(--copy-b, 0px));
}
.hero-in { max-width:1180px; margin:0 auto; padding:0 40px; text-align:center }

/* Der Auftritt beim Laden läuft über CSS-Keyframes und liegt bewusst auf
   den KINDERN der Scroll-Ebenen: eine laufende Keyframe-Animation gewinnt
   gegen Inline-Styles und würde die Scroll-Transforms sonst blockieren. */
@keyframes lxHeroIn { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
@keyframes lxStageIn { from { opacity:0; transform:translateY(44px) scale(.966) } to { opacity:1; transform:none } }
.hero-sub   { animation:lxHeroIn .8s var(--ease) .62s both }
.hero-btns  { animation:lxHeroIn .8s var(--ease) .74s both }
.hero-stage-inner { animation:lxStageIn 1.2s var(--ease) .46s both }

.hero-h1 {
  font-size:clamp(42px,7.4vw,90px); font-weight:500; letter-spacing:-.045em; line-height:.98;
  margin:0 auto; max-width:15ch;
}
.hero-h1 .row { display:block; overflow:hidden; padding-bottom:.06em }
.hero-h1 em {
  font-family:"Instrument Serif",serif; font-style:italic; font-weight:400;
  letter-spacing:-.015em; color:var(--cocoa); display:inline-block;
}
.hx-char { display:inline-block }

.hero-sub {
  font-size:clamp(16px,1.6vw,19px); line-height:1.62; color:var(--ink-3);
  max-width:56ch; margin:26px auto 0;
}
.hero-sub strong { color:var(--ink); font-weight:500 }

.hero-btns {
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top:34px;
}
/* Produkt-Bühne — vorderste Ebene, Ziel der Kamerafahrt. */
.hero-stage {
  position:relative; z-index:3; flex:1; min-height:0;
  width:100%; max-width:1180px; margin:clamp(38px,5.4vh,76px) auto 0; padding:0 40px;
  transform-origin:50% 0;
  transform:
    translate3d(var(--stage-x, 0px), var(--stage-y, 0px), 0)
    rotateX(var(--stage-rx, 0deg))
    scale(var(--stage-s, 1));
  opacity:var(--stage-o, 1);
}
.hero-stage-inner { position:relative; height:100%; transform-style:preserve-3d }

.hero-stage .ui-browser {
  transform-origin:50% 0;
  border-radius:var(--frame-r, 16px);
  /* Rahmen, Fläche und Schatten hängen an --shell und lösen sich in der
     Explosionsansicht auf — die Bausteine tragen dann ihre eigene Fläche. */
  background:rgba(255,253,247, var(--shell, 1));
  border-color:rgba(167,108,78, calc(.16 * var(--shell, 1)));
  box-shadow:
    0 1px 0 rgba(255,255,255, calc(.9 * var(--shell, 1))) inset,
    0 calc(60px * var(--frame-d, 1)) calc(120px * var(--frame-d, 1)) calc(-46px * var(--frame-d, 1)) rgba(90,55,30, calc(.42 * var(--shell, 1))),
    0 calc(22px * var(--frame-d, 1)) calc(50px * var(--frame-d, 1)) calc(-26px * var(--frame-d, 1)) rgba(90,55,30, calc(.2 * var(--shell, 1)));
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--mask-a, 84%),rgba(0,0,0,.4) var(--mask-b, 94%),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 var(--mask-a, 84%),rgba(0,0,0,.4) var(--mask-b, 94%),transparent 100%);
}
.hero-stage .ui-dash { background:rgba(255,253,247, var(--shell, 1)) }
/* Sobald die Teile ausschwärmen, darf nichts mehr clippen */
.hero-stage.hx-open .ui-browser, .hero-stage.hx-open .ui-scroller { overflow:visible }
.hero-stage.hx-open .ui-browser { -webkit-mask-image:none; mask-image:none }
/* Beim Heranfahren tritt die Rahmung zurück, der Inhalt übernimmt. */
.hero-stage .ui-chrome { opacity:var(--chrome-o, 1) }

/* ── Bausteine der Explosionsansicht ─────────────────────────────
   Jeder Baustein hat einen Ausschwärm-Vektor (--vx/--vy), eine Zielgröße
   (--vs) und hängt an „seiner" Funktionszeile (--h), die ihn kurz nach
   vorn holt. --e/--e2 kommen aus landing.js. */
.hero-stage :is(.ui-side, .ui-top, .ui-kpi, #hxCardChart, #hxCardEvents, #hxCardOrders) {
  transform:
    translate3d(calc(var(--vx, 0px) * var(--e2, 0) * var(--kx, 1)), calc(var(--vy, 0px) * var(--e2, 0) * var(--ky, 1)), 0)
    scale(calc(1 - (1 - var(--vs, 1)) * var(--e, 0) + .05 * var(--h, 0)));
  opacity:calc(1 - var(--dim, .5) * var(--e, 0) + var(--dim, .5) * var(--h, 0));
}
.hero-stage.hx-open :is(.ui-side, .ui-top, .ui-kpi, #hxCardChart, #hxCardEvents, #hxCardOrders) { will-change:transform, opacity }
.hero-stage .ui-side {
  --vx:-170px; --vy:14px; --vs:.88; --h:var(--h5, 0);
  border-radius:calc(14px * var(--e, 0));
  border-right-color:rgba(167,108,78, calc(.1 * var(--shell, 1)));
  box-shadow:0 24px 56px -26px rgba(90,55,30, calc(.38 * var(--e, 0)));
}
.hero-stage .ui-top { --vx:0px; --vy:-64px; --vs:.94; --dim:.85; --h:0 }
.hero-stage .ui-kpi { --vy:-72px; --vs:.94; --h:var(--h3, 0) }
.hero-stage .ui-kpi:nth-child(1) { --vx:-84px }
.hero-stage .ui-kpi:nth-child(2) { --vx:-30px }
.hero-stage .ui-kpi:nth-child(3) { --vx:30px }
.hero-stage .ui-kpi:nth-child(4) { --vx:84px }
.hero-stage #hxCardChart  { --vx:-116px; --vy:36px;  --vs:.9;  --h:var(--h3, 0) }
.hero-stage #hxCardEvents { --vx:156px;  --vy:-10px; --vs:.96; --h:var(--h1, 0) }
.hero-stage #hxCardOrders { --vx:0px;    --vy:116px; --vs:.9;  --h:var(--h2, 0) }
/* Zeile 5 hebt die passenden Menüpunkte hervor */
.hero-stage .ui-nav--hl { background:rgba(191,130,92, calc(.16 * var(--h5, 0))) }

/* ── Funktionszeilen: groß, mittig, über den schwebenden Teilen ── */
.hero-words {
  position:absolute; inset:0; z-index:5; pointer-events:none;
  display:grid; place-items:center; padding:0 24px;
}
.hero-words::before {
  content:""; grid-area:1/1; width:min(1160px, 100%); height:min(62vh, 560px); border-radius:50%;
  background:radial-gradient(closest-side, rgba(254,247,227,.94), rgba(254,247,227,.78) 46%, rgba(254,247,227,0));
  opacity:var(--wb, 0);
}
.hero-word {
  grid-area:1/1; text-align:center; max-width:1000px;
  opacity:var(--w, 0);
  transform:translate3d(0, calc(18px * (1 - var(--w, 0))), 0) scale(calc(.985 + .015 * var(--w, 0)));
}
#hxW1 { --w:var(--w1, 0) } #hxW2 { --w:var(--w2, 0) } #hxW3 { --w:var(--w3, 0) } #hxW4 { --w:var(--w4, 0) } #hxW5 { --w:var(--w5, 0) }
.hero-word-t {
  display:block; font-size:clamp(38px,5.9vw,76px); font-weight:500; letter-spacing:-.045em; line-height:1.02; color:var(--ink);
}
.hero-word-t em { font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; letter-spacing:-.015em; color:var(--cocoa) }
.hero-word-s {
  display:block; margin-top:18px; font-family:"Geist Mono",monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
@media(max-width:900px){
  /* Auf schmalen Screens liegen die Teile dichter hinter dem Text — stärker dimmen */
  .hero-stage :is(.ui-kpi, #hxCardChart, #hxCardEvents, #hxCardOrders) { --dim:.74 }
  .hero-words::before { background:radial-gradient(closest-side, rgba(254,247,227,.97), rgba(254,247,227,.86) 50%, rgba(254,247,227,0)) }
  .hero-word-t { font-size:clamp(30px,9.4vw,46px) }
  .hero-word-s { font-size:10px; letter-spacing:.12em; margin-top:14px }
  .hero-words::before { height:48vh }
}

.hero-float-rev { top:-5%;   right:-4%;  width:190px }
.hero-float-chk { bottom:7%;  left:-5%;  width:242px }
.ui-float {
  opacity:var(--float-o, 1);
  transform:translate3d(var(--float-x, 0px), var(--float-y, 0px), 0) scale(var(--float-s, 1));
}
.hero-float-rev { --float-x:calc(var(--float-d, 0px) *  1); --float-y:calc(var(--float-d, 0px) * -.55) }
.hero-float-chk {
  --float-x:calc(var(--float-d, 0px) * -1); --float-y:calc(var(--float-d, 0px) *  .45);
  opacity:var(--chk-o, 1);
  transform:translate3d(var(--float-x, 0px), var(--float-y, 0px), 0) scale(var(--chk-s, 1));
}
@media(max-width:1180px){ .hero-float-rev { right:0; width:168px } .hero-float-chk { left:0; width:212px } }
@media(max-width:880px){
  .hero-float-rev { display:none }
  .hero-float-chk { left:auto; right:10px; bottom:auto; top:6%; width:190px; opacity:var(--chk-o, 0) }
}

/* Auf schmalen Screens fällt die Seitenleiste weg und der Hauptbereich
   klappt auf eine Spalte um — lesbar statt zerquetscht oder weggescrollt.
   Die Seitenleiste ist dort ohnehin nur Dekoration. */
.ui-scroller { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.ui-scroller::-webkit-scrollbar { display:none }
@media(max-width:900px){
  .ui-dash { grid-template-columns:1fr; min-height:0 }
  .ui-side { display:none }
  .ui-main { padding:16px }
  .ui-kpis { grid-template-columns:1fr 1fr }
  .ui-row2 { grid-template-columns:1fr }
}
@media(max-width:560px){
  .ui-table th:nth-child(2), .ui-table td:nth-child(2) { display:none }
  .ui-hello { font-size:17px }
  .ui-seg { display:none }
}
/* Sehr schmale Geräte (iPhone SE & Co.): alles einspaltig, damit nichts
   die Seite breiter macht als das Fenster. */
@media(max-width:400px){
  .ui-kpis { grid-template-columns:1fr }
  .ui-kpi-v { font-size:19px }
}

/* ═══ 03 · Trust ═══════════════════════════════════════════════════ */

/* Rückt in den Ausklang der Hero-Sequenz hinein und wird von ihr
   eingeblendet (--next-*), statt erst nach dem Track aufzutauchen. */
.trust { padding:0; margin-top:72px; position:relative; z-index:4 }
/* Alles, was durch die Überlappung schon während der Sequenz im Bild
   wäre, hängt an derselben Einblendung — sonst lugt die Zahlenleiste
   unter der Bühne hervor, bevor die Kamerafahrt vorbei ist. */
.trust, .nums {
  opacity:var(--next-o, 1);
  transform:translate3d(0, var(--next-y, 0px), 0);
}
.trust-lead {
  text-align:center; font-family:"Geist Mono",monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); margin-bottom:34px;
}
/* Die Kundenlogos liegen als weiße Freisteller vor — deshalb dunkle
   Kacheln statt heller. Gibt dem Abschnitt zugleich einen klaren
   Kontrastpunkt unter dem warmen Hero. */
.trust-logos { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.trust-logo {
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding:22px 22px 20px; border-radius:18px; min-height:132px;
  background:linear-gradient(165deg,#2a1a0d,#150d06);
  border:1px solid rgba(254,247,227,.08);
  box-shadow:0 20px 44px -30px rgba(42,31,23,.7);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
a.trust-logo:hover {
  transform:translateY(-4px); border-color:rgba(220,175,134,.26);
  box-shadow:0 30px 56px -28px rgba(42,31,23,.75);
}
.trust-logo img { height:28px; width:auto; max-width:150px; object-fit:contain; object-position:left center; display:block }
.trust-logo-m { display:flex; flex-direction:column; gap:3px; margin-top:auto; min-width:0 }
.trust-logo-t { font-size:13px; font-weight:500; letter-spacing:-.01em; color:var(--cream) }
.trust-logo-s { font-size:11px; color:rgba(254,247,227,.4) }
@media(max-width:1000px){ .trust-logos { grid-template-columns:1fr 1fr } }
@media(max-width:480px){ .trust-logos { grid-template-columns:1fr } .trust-logo { min-height:0 } }

/* Zahlen-Band */
.nums { margin-top:-84vh; position:relative; z-index:4 }
.nums-head {
  max-width:840px; margin:0 auto; padding:0 24px 40px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.nums-band {
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.3);
}
.nums-grid { display:grid; grid-template-columns:repeat(4,1fr); max-width:1180px; margin:0 auto }
.nums-item { padding:42px 24px; text-align:center; border-right:1px solid var(--line) }
.nums-item:last-child { border-right:none }
.nums-v {
  font-size:clamp(30px,3.6vw,44px); font-weight:500; letter-spacing:-.042em; line-height:1;
  display:block; font-variant-numeric:tabular-nums;
}
.nums-l {
  display:block; margin-top:11px; font-family:"Geist Mono",monospace; font-size:10px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-4);
}
@media(max-width:820px){
  .nums-grid { grid-template-columns:repeat(2,1fr) }
  .nums-item { padding:30px 14px; border-bottom:1px solid var(--line) }
  .nums-item:nth-child(2n){ border-right:none }
  .nums-item:nth-last-child(-n+2){ border-bottom:none }
}

/* ═══ 04 · Problem → Lösung ════════════════════════════════════════ */

.prob-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px }
@media(max-width:900px){ .prob-grid { grid-template-columns:1fr } }
.prob {
  padding:28px 26px; border-radius:20px; border:1px solid var(--line);
  background:rgba(255,255,255,.34);
}
.prob-x, .prob-c {
  width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.prob-x { background:rgba(160,70,55,.1); color:#9c4436 }
.prob-c { background:rgba(122,154,106,.16); color:#4f7344 }
.prob-x svg, .prob-c svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.prob-t { font-size:15.5px; font-weight:500; letter-spacing:-.02em; margin-bottom:8px; line-height:1.3 }
.prob-p { font-size:14px; line-height:1.62; color:var(--ink-3) }
.prob-half + .prob-half { margin-top:24px; padding-top:24px; border-top:1px solid var(--line) }

/* ═══ 05 · Whitelabel + Shop-Vorschau ══════════════════════════════ */

/* Gegenstück zur Hero-Sequenz: der Shop setzt sich zusammen. Die Teile
   schweben verstreut und entsättigt, oben laufen die Zeilen, am Ende legt
   sich der Rahmen um den fertigen Shop (landing.js, initProductSequence). */
.lx-sec--wl { padding:0 }
.wl-track { position:relative; height:480vh }
.wl-frame {
  position:sticky; top:0; height:100vh; overflow:hidden;
  perspective:1800px; perspective-origin:50% 38%;
}

/* Überschrift oben — weicht wie im Hero in die Tiefe */
.wl-copy {
  position:absolute; left:0; right:0; top:calc(70px + 7vh); z-index:2; text-align:center;
  opacity:var(--wc-o, 1); transform:translate3d(0, var(--wc-y, 0px), 0); filter:blur(var(--wc-b, 0px));
}
.wl-copy .lx-container { max-width:900px; display:flex; flex-direction:column; align-items:center; gap:16px }
.wl-copy .lx-h2 { max-width:16ch }
.wl-copy .lx-h2 i { display:block }
.wl-copy .lx-sub { max-width:54ch; margin:0 }

/* Die Zeilen — Optik wie die Hero-Zeilen */
.wl-words {
  position:absolute; left:0; right:0; top:calc(70px + 6vh); z-index:5; pointer-events:none;
  display:grid; justify-items:center; padding:0 24px;
}
.wl-words::before {
  content:""; grid-area:1/1; width:min(1000px, 100%); height:220px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(254,247,227,.9), rgba(254,247,227,0)); opacity:var(--wb, 0);
}
.wl-word {
  grid-area:1/1; text-align:center; max-width:960px;
  opacity:var(--w, 0);
  transform:translate3d(0, calc(16px * (1 - var(--w, 0))), 0) scale(calc(.985 + .015 * var(--w, 0)));
}
#wlW1 { --w:var(--w1, 0) } #wlW2 { --w:var(--w2, 0) } #wlW3 { --w:var(--w3, 0) } #wlW4 { --w:var(--w4, 0) } #wlW5 { --w:var(--w5, 0) }
.wl-word-t { display:block; font-size:clamp(34px,5.6vw,72px); font-weight:500; letter-spacing:-.045em; line-height:1.02; color:var(--ink) }
.wl-word-t em { font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; letter-spacing:-.015em; color:var(--cocoa) }
.wl-word-s {
  display:block; margin-top:14px; font-family:"Geist Mono",monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.wl-caret { display:inline-block; width:1px; height:11px; margin-left:2px; vertical-align:-1px; background:var(--ink-3); opacity:var(--caret-t, 0) }

/* Bühne: unten im Bild, gekippt — richtet sich am Ende auf und kommt nach vorn */
.wl-stage {
  position:absolute; left:50%; top:30vh; width:min(760px, 92vw); margin-left:calc(min(760px, 92vw) / -2);
  transform-origin:50% 0; transform-style:preserve-3d; opacity:var(--stage-o, 1);
  transform:
    translate3d(0, var(--cam-y, 0px), 0)
    rotateX(var(--cam-rx, 0deg)) rotateY(var(--cam-ry, 0deg))
    scale(var(--cam-s, 1));
}
/* Rahmen und Fläche des Browsers hängen an --shell: erst am Ende sichtbar */
.wl-stage .ui-browser {
  overflow:visible;
  background:rgba(255,253,247, var(--shell, 1));
  border-color:rgba(167,108,78, calc(.16 * var(--shell, 1)));
  box-shadow:
    0 1px 0 rgba(255,255,255, calc(.9 * var(--shell, 1))) inset,
    0 calc(60px * var(--cam-d, 1)) calc(120px * var(--cam-d, 1)) calc(-46px * var(--cam-d, 1)) rgba(90,55,30, calc(.42 * var(--shell, 1))),
    0 calc(22px * var(--cam-d, 1)) calc(50px * var(--cam-d, 1)) calc(-26px * var(--cam-d, 1)) rgba(90,55,30, calc(.22 * var(--shell, 1)));
}
.wl-stage .ui-chrome { opacity:var(--shell, 1) }
/* Die dunkle Fläche des Shops entsteht erst mit den andockenden Teilen */
.wl-stage .shop { overflow:visible; border-radius:0 0 14px 14px; background:transparent }
.wl-stage .shop::before { content:""; position:absolute; inset:0; z-index:0; border-radius:0 0 14px 14px; background:var(--shop-bg); opacity:var(--shopbg, 1) }
.wl-stage .shop-body { position:relative; z-index:1 }

/* Teile: Ausschwärm-Vektor (--vx/--vy/--vr/--vs), Restweg --u aus landing.js,
   dazu ein leichtes Schweben (--dx/--dy) und Entsättigung (--g) vor „Farben" */
.wl-p {
  transform:
    translate3d(calc(var(--vx, 0px) * var(--u, 0) * var(--kx, 1) + var(--dx, 0px)), calc(var(--vy, 0px) * var(--u, 0) * var(--ky, 1) + var(--dy, 0px)), 0)
    rotate(calc(var(--vr, 0deg) * var(--u, 0)))
    scale(calc(1 - (1 - var(--vs, 1)) * var(--u, 0)));
  opacity:calc(1 - .5 * var(--u, 0));
  filter:grayscale(var(--g, 0)) blur(calc(1.6px * var(--u, 0)));
  box-shadow:0 34px 60px -24px rgba(40,25,10, calc(.5 * var(--u, 0)));
  position:relative; z-index:1;
}
#wlPNav  { --vx:-190px; --vy:-30px;  --vr:-6deg; --vs:.82; z-index:3; background:rgba(15,15,15, calc(.92 * var(--u, 0))); border-radius:10px }
#wlPHero { --vx:230px;  --vy:30px;   --vr:5deg;  --vs:.6 }
#wlPHead { --vx:-320px; --vy:70px;   --vr:-3deg; --vs:1; background:rgba(15,15,15, var(--u, 0)); border-radius:8px; padding:4px 8px; margin:-4px -8px 8px }
#wlPEv1  { --vx:-380px; --vy:-10px;  --vr:-8deg; --vs:.68 }
#wlPEv2  { --vx:380px;  --vy:20px;   --vr:7deg;  --vs:.68 }
#wlPFoot { --vx:150px;  --vy:-250px; --vr:2deg;  --vs:.8; background:rgba(15,15,15, calc(.9 * var(--u, 0))); border-radius:10px }
/* Eventseite und Google-Vorschau sind erst da, wenn sie andocken */
#wlPPage {
  --vx:360px; --vy:-60px; --vr:8deg; --vs:.7;
  opacity:calc((1 - var(--u, 0)) * var(--page-o, 1));
  transform:
    translate3d(calc(var(--vx) * var(--u, 0) * var(--kx, 1) + var(--page-x, 0px)), calc(var(--vy) * var(--u, 0) * var(--ky, 1)), 0)
    rotate(calc(var(--vr) * var(--u, 0)))
    scale(calc(1 - (1 - var(--vs)) * var(--u, 0)));
}
#wlPSeo  { --vx:-340px; --vy:-20px; --vr:-6deg; --vs:.8; opacity:calc(1 - var(--u, 0)) }

/* Farbtropfen — fliegen in Schritt 2 zum Tickets-Button */
.wl-chip {
  position:absolute; left:0; top:0; z-index:9; opacity:0; pointer-events:none; transform-origin:50% 50%;
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 8px; border-radius:999px;
  background:rgba(255,253,247,.97); border:1px solid var(--line); box-shadow:0 14px 34px -14px rgba(90,55,30,.45);
  font-family:"Geist Mono",monospace; font-size:10.5px; letter-spacing:.08em; color:var(--ink-2);
}
.wl-chip::before { content:""; width:13px; height:13px; border-radius:50%; background:var(--c, #999); border:1px solid rgba(0,0,0,.12) }

@media(max-width:1000px){
  .wl-track { height:400vh }
  .wl-copy { top:calc(70px + 4vh) }
  .wl-copy .lx-sub { display:none }
  .wl-copy .lx-h2 { font-size:clamp(26px,6.4vw,34px) }
  .wl-words { top:calc(70px + 4vh) }
  .wl-word-t { font-size:clamp(28px,8.6vw,40px) }
  .wl-word-s { font-size:9.5px; letter-spacing:.12em; margin-top:10px }
  .wl-stage { top:27vh; width:94vw; margin-left:-47vw }
  .wl-chip { font-size:9px; padding:5px 9px 5px 7px }
}

.shop {
  position:relative; overflow:hidden;
  --acc:      #d40000;   /* Primärfarbe   */
  --shop-bg:  #0f0f0f;   /* Hintergrund   */
  --shop-card:#000000;   /* Karten-Farbe  */
  --acc-text: #0f0f0f;   /* Text auf Akzentflächen */
  --shop-line:rgba(255,255,255,.08);
  background:var(--shop-bg); color:#f2f2f2;
}

.shop-nav {
  position:relative; z-index:3; display:flex; align-items:center; gap:16px;
  padding:13px 18px; margin-bottom:-54px;
}
.shop-brand { height:16px; width:auto; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)) }
.shop-links { display:flex; gap:14px; margin-left:auto }
.shop-links span { font-size:10px; color:rgba(242,242,242,.8); text-shadow:0 1px 3px rgba(0,0,0,.7) }
.shop-cta {
  padding:5px 13px; border-radius:999px; font-size:10px; font-weight:700;
  background:var(--acc); color:var(--acc-text);
}

/* Hero: Video im Hintergrund, darüber nur das Logo (Builder-Einstellung
   „Anzeige: Logo"). Ohne Video bleibt der Seitenhintergrund stehen. */
.shop-hero { position:relative; height:208px; overflow:hidden; background:var(--shop-bg) }
.shop-hero-v {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .7s var(--ease);
}
.shop-hero-v.on { opacity:var(--wl-hero, 1) }
.wl-live .shop-hero-v { transition:none }
.shop-hero::after {
  content:""; position:absolute; inset:0; opacity:var(--wl-hero, 1);
  background:linear-gradient(180deg,rgba(15,15,15,.62) 0%,rgba(15,15,15,.34) 42%,rgba(15,15,15,.92) 86%,var(--shop-bg) 100%);
}
.shop-hero-in {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; padding:34px 24px 0;
}
.shop-hero-logo {
  width:min(66%,286px); height:auto; display:block;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.85));
}
.shop-body { padding:20px 18px 22px }
.shop-sec-h { font-size:14px; font-weight:800; letter-spacing:-.01em; margin-bottom:12px }
.shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start }

.shop-ev { position:relative; display:block; border-radius:12px; overflow:hidden; background:var(--shop-card); border:1px solid var(--shop-line) }
/* height:auto ist Pflicht — die width/height-Attribute am <img> sind
   Präsentationsattribute und würden aspect-ratio sonst aushebeln. */
.shop-ev-img { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; border-bottom:1px solid var(--shop-line) }
.shop-ev-b { display:block; padding:11px 12px 13px }
.shop-ev-d { display:block; font-size:8.5px; font-weight:700; color:var(--acc); letter-spacing:.05em }
.shop-ev-t { display:block; font-size:12.5px; font-weight:700; margin-top:4px }
.shop-ev-l { display:block; font-size:9px; color:rgba(242,242,242,.45); margin-top:3px }
.shop-ev-c {
  display:block; font-size:9px; font-weight:700; color:var(--acc); text-align:center;
  margin-top:10px; padding-top:9px; border-top:1px solid var(--shop-line);
}
/* Ausverkauft/beendet — entspricht .event-card-cta-muted der echten Seite */
.shop-ev-c--muted { color:rgba(242,242,242,.42) }

.shop-foot {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px; border-top:1px solid rgba(255,255,255,.06);
  font-size:8.5px; color:rgba(242,242,242,.3);
}
.shop-foot img { height:9px; width:auto; display:block; opacity:.45 }

/* Eventseite — Aufbau wie site/index.php (.event-detail-*), verkleinert:
   Hero mit Artwork, Farb-Blobs und Verlauf, Meta-Pills, Titel, Ort; darunter
   Inhalt (Beschreibung, Lineup) neben der Seitenleiste (Infos, Tickets). */
.shop-page {
  position:absolute; inset:0; z-index:5; background:var(--shop-bg); color:#f2f2f2; overflow:hidden;
  border-radius:12px; box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.ed-hero { position:relative; height:196px; display:flex; align-items:flex-end; padding:0 18px 16px; overflow:hidden }
.ed-hero-bg { position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px); object-fit:cover; filter:blur(6px); opacity:.55 }
.ed-blob { position:absolute; border-radius:50%; background:var(--acc); filter:blur(30px); opacity:.55 }
.ed-blob:nth-child(2) { width:55%; height:70%; top:-15%; left:-10% }
.ed-blob:nth-child(3) { width:50%; height:60%; top:10%; right:-15%; opacity:.4 }
.ed-blob:nth-child(4) { width:45%; height:55%; bottom:-10%; left:20%; opacity:.35 }
.ed-hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--shop-bg) 0%, var(--shop-bg) 8%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.1) 100%);
}
.ed-hero-in { position:relative; z-index:1 }
.ed-meta { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px }
.ed-pill {
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px;
  font-size:8px; font-weight:500; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ed-pill svg, .ed-loc svg, .ed-h2 svg, .ed-h3 svg, .ed-row i svg { width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.ed-pill svg { opacity:.7 }
.ed-title { display:block; font-size:22px; font-weight:800; line-height:1.15; letter-spacing:-.02em; margin-bottom:5px }
.ed-loc { display:flex; align-items:center; gap:5px; font-size:9.5px; color:rgba(242,242,242,.6) }
.ed-wrap { display:grid; grid-template-columns:1fr 196px; gap:14px; padding:14px 18px 18px }
.ed-main { display:flex; flex-direction:column; gap:14px; min-width:0 }
.ed-h2 { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; margin-bottom:6px }
.ed-h2 svg, .ed-h3 svg { color:var(--acc) }
.ed-sec p { margin:0; font-size:8.5px; line-height:1.55; color:rgba(242,242,242,.7) }
.ed-lineup { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px }
.ed-lu { display:flex; gap:6px; align-items:center; padding:7px; border-radius:9px; background:var(--shop-card); border:1px solid var(--shop-line); min-width:0 }
.ed-lu i {
  flex-shrink:0; width:22px; height:22px; border-radius:50%; font-style:normal; font-size:8px; font-weight:700;
  display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--acc),#3a2418); color:#fff;
}
.ed-lu > span { min-width:0 }
.ed-lu b { display:block; font-size:8.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ed-lu small { display:block; font-size:7px; color:rgba(242,242,242,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ed-aside { display:flex; flex-direction:column; gap:10px; min-width:0 }
.ed-card { padding:11px 12px 12px; border-radius:11px; background:var(--shop-card); border:1px solid var(--shop-line) }
.ed-h3 { display:flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; margin-bottom:9px }
.ed-row { display:flex; align-items:center; gap:8px; margin-top:7px }
.ed-row i { flex-shrink:0; width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.06); color:var(--acc); display:flex; align-items:center; justify-content:center; font-style:normal }
.ed-row > span { min-width:0 }
.ed-row small { display:block; font-size:7px; color:rgba(242,242,242,.5) }
.ed-row b { display:block; font-size:8.5px; font-weight:600 }
.ed-tk { display:block; padding:8px 9px; border-radius:8px; background:rgba(255,255,255,.04); margin-top:6px }
.ed-tk-top { display:flex; justify-content:space-between; align-items:center; gap:8px }
.ed-tk-top b { display:block; font-size:9px; font-weight:600 }
.ed-tk-top small { display:block; font-size:7px; color:rgba(242,242,242,.5); margin-top:1px }
.ed-tk-top em { display:block; font-style:normal; font-size:7px; color:var(--acc); font-weight:500; margin-top:2px }
.ed-tk-so { font-size:7.5px; font-weight:600; color:rgba(242,242,242,.5); background:rgba(255,255,255,.06); padding:3px 7px; border-radius:20px; white-space:nowrap }
.ed-tk-p { font-size:11px; font-weight:700; color:var(--acc); white-space:nowrap }
.ed-tk-btn { display:block; margin-top:8px; padding:6px; border-radius:7px; text-align:center; font-size:8.5px; font-weight:600; background:var(--acc); color:var(--acc-text) }

/* Google-Vorschau (Schritt 5) — spiegelt den getippten Text */
.wl-float {
  position:absolute; z-index:6; border-radius:14px; padding:12px 14px;
  background:rgba(255,253,247,.97); border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 26px 52px -22px rgba(90,55,30,.42);
}
.wl-float--seo { left:-6%; bottom:9%; width:300px }
.wl-float-k { display:block; font-family:"Geist Mono",monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); margin-bottom:8px }
.seo-site { display:flex; align-items:center; gap:8px; font-size:10.5px; line-height:1.25; color:var(--ink-2) }
.seo-fav { flex-shrink:0; width:18px; height:18px; border-radius:50%; background:#0f0f0f; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700 }
.seo-url { font-size:9px; color:var(--ink-4) }
.seo-t { display:block; margin-top:6px; min-height:17px; font-size:13.5px; line-height:1.25; color:#1a0dab; letter-spacing:-.01em }
.seo-d { display:block; margin-top:3px; min-height:15px; font-size:10px; line-height:1.5; color:var(--ink-3) }
@media(max-width:1000px){
  .wl-float--seo { left:8px; bottom:8px; width:236px }
}

@media(max-width:560px){
  /* Ohne die Linkleiste braucht der CTA den Abstand selbst. Die beiden
     Eventkarten bleiben nebeneinander, damit die Vorschau in den Frame passt. */
  .shop-links { display:none }
  .shop-cta { margin-left:auto }
  .shop-hero { height:150px }
  .ed-hero { height:150px }
  .ed-wrap { grid-template-columns:1fr; gap:10px; padding:12px 14px 14px }
  .ed-lineup { grid-template-columns:1fr 1fr 1fr }
  .ed-main .ed-sec:first-child { display:none }
}

/* ═══ 06 · Wallet ══════════════════════════════════════════════════ */

.wal-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:940px; margin:0 auto }
@media(max-width:820px){ .wal-grid { grid-template-columns:1fr; gap:26px } }
.wal-col { padding:28px 26px 30px; border-radius:22px; text-align:center }
.wal-col--ext { background:rgba(42,31,23,.035); border:1px solid var(--line) }
.wal-col--tx {
  background:linear-gradient(165deg,rgba(255,255,255,.75),rgba(255,255,255,.42));
  border:1px solid var(--glass-b); box-shadow:0 30px 64px -34px rgba(90,55,30,.4);
}
.wal-tag {
  display:inline-flex; align-items:center; height:22px; font-family:"Geist Mono",monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-bottom:26px;
}
.wal-col--tx .wal-tag img { height:15px; width:auto; display:block }
.wal-stack { display:flex; justify-content:center; align-items:flex-end; gap:0; min-height:236px }
.wal-stack img {
  width:150px; height:auto; display:block; border-radius:9px;
  box-shadow:0 24px 46px -20px rgba(90,55,30,.42);
  transition:transform .55s var(--ease);
}
.wal-stack img:first-child { transform:rotate(-7deg) translateX(14px) }
.wal-stack img:last-child  { transform:rotate(6deg) translateX(-14px) }
.wal-col:hover .wal-stack img:first-child { transform:rotate(-10deg) translateX(4px) translateY(-6px) }
.wal-col:hover .wal-stack img:last-child  { transform:rotate(9deg)  translateX(-4px) translateY(-6px) }
.wal-cap { font-size:13.5px; line-height:1.6; color:var(--ink-3); margin-top:26px; max-width:34ch; margin-left:auto; margin-right:auto }
.wal-col--tx .wal-cap { color:var(--ink-2) }
/* Die beiden "Unterstützt"-Badges sind unterschiedlich proportioniert
   (3,22:1 gegenüber 3,62:1). Über die Höhe ausgerichtet wirken sie
   trotzdem gleichwertig; die width/height-Attribute im Markup halten
   den Platz vor dem Laden frei. */
.wal-badges { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:36px; flex-wrap:wrap }
.wal-badges img { height:42px; width:auto; display:block }
@media(max-width:480px){ .wal-badges img { height:36px } }
@media(max-width:520px){ .wal-stack img { width:118px } .wal-stack { min-height:190px } }

/* ═══ 07 · Mobile / iOS-App ════════════════════════════════════════ */

.mob-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:60px; align-items:center }
@media(max-width:1000px){ .mob-grid { grid-template-columns:1fr; gap:44px } }

.mob-shot { position:relative; display:flex; justify-content:center; align-items:center }
/* Der Screenshot ist hart freigestellt — praktisch ein Rechteck mit
   abgerundeten Ecken (gemessener Eckradius: 18,9 % der Bildbreite). Der
   Schatten kommt deshalb als box-shadow vom Wrapper statt als
   filter:drop-shadow vom Bild: ein Filter zwingt Chrome zu einem eigenen
   Compositing-Layer, der beim Nachladen und bei Layer-Wechseln sichtbar
   neu rastert — genau das ließ den Schatten "komisch laden". */
.mob-phone {
  position:relative; display:block; width:100%; max-width:310px; margin:0 auto;
  border-radius:18.9%/9.2%;
  box-shadow:0 26px 50px -14px rgba(90,55,30,.4), 0 8px 20px -10px rgba(90,55,30,.22);
}
.mob-shot img.real { position:relative; width:100%; height:auto; display:block }
.mob-widget { position:absolute; width:168px; z-index:4 }
.mob-widget--tl { top:-1%;  left:-8% }
.mob-widget--br { bottom:13%; right:-9% }
@media(max-width:1100px){ .mob-widget--tl { left:0 } .mob-widget--br { right:0 } }
@media(max-width:600px){ .mob-widget { display:none } }
.mw {
  border-radius:18px; padding:14px 15px;
  background:#fffcf4;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 24px 48px -22px rgba(90,55,30,.45);
}
.mw-hd { display:flex; align-items:center; gap:6px; font-family:"Geist Mono",monospace; font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-4) }
.mw-hd img { height:9px; width:auto; display:block }
.mw-v { display:block; font-size:22px; font-weight:600; letter-spacing:-.04em; margin-top:9px; font-variant-numeric:tabular-nums; line-height:1 }
.mw-l { display:block; font-size:10px; color:var(--ink-3); margin-top:4px }
.mw-bars { display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:11px }
.mw-bars i { flex:1; border-radius:2px 2px 0 0; background:linear-gradient(180deg,var(--tan),var(--caramel)); opacity:.75 }

.mob-caps { display:grid; grid-template-columns:1fr 1fr; gap:2px 26px; margin-top:32px }
@media(max-width:560px){ .mob-caps { grid-template-columns:1fr } }
.mob-cap { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--line) }
.mob-cap svg { width:15px; height:15px; margin-top:2px; flex-shrink:0; stroke:var(--caramel); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.mob-cap b { font-size:14px; font-weight:500; letter-spacing:-.015em; display:block }
/* Nur der Beschreibungstext direkt nach dem Titel — ein pauschales
   ".mob-cap span" würde auch Marken wie .lx-soon zu Blöcken machen. */
.mob-cap b + span { font-size:12.5px; color:var(--ink-3); display:block; margin-top:3px; line-height:1.5 }

.mob-store { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:34px }
.mob-badges { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
/* Beide Badges über die Höhe angleichen — die Seitenverhältnisse
   unterscheiden sich (3,0 zu 3,37). */
.mob-store img { height:44px; width:auto; display:block; transition:transform .35s var(--ease) }
.mob-store a:hover img { transform:translateY(-3px) }
.mob-badge-soon { opacity:.9 }
.mob-store-note { font-size:12.5px; color:var(--ink-4); max-width:34ch; line-height:1.5 }
@media(max-width:420px){ .mob-store img { height:38px } }

/* ═══ 08 · Automatisierung ═════════════════════════════════════════ */

.auto-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
@media(max-width:1000px){ .auto-grid { grid-template-columns:1fr 1fr } }
@media(max-width:600px){ .auto-grid { grid-template-columns:1fr } }
.auto {
  padding:26px 24px 28px; border-radius:20px; border:1px solid var(--line);
  background:rgba(255,255,255,.38);
  transition:transform .4s var(--ease), background .35s, box-shadow .4s var(--ease);
}
.auto:hover { transform:translateY(-4px); background:rgba(255,255,255,.62); box-shadow:0 26px 50px -30px rgba(90,55,30,.4) }
.auto-ic {
  width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  background:linear-gradient(160deg,rgba(220,175,134,.3),rgba(191,130,92,.18)); color:var(--cocoa);
}
.auto-ic svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.auto-t { font-size:15.5px; font-weight:500; letter-spacing:-.02em; margin-bottom:8px }
.auto-p { font-size:13.5px; line-height:1.62; color:var(--ink-3) }

/* ═══ 09 · Funktionsraster ═════════════════════════════════════════ */

.fx-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
@media(max-width:1080px){ .fx-grid { grid-template-columns:repeat(3,1fr) } }
@media(max-width:760px){ .fx-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:460px){ .fx-grid { grid-template-columns:1fr } }

.fx {
  position:relative; padding:22px 20px 24px; border-radius:16px; cursor:pointer; text-align:left; width:100%;
  background:rgba(255,255,255,.4); border:1px solid var(--line);
  transition:background .35s var(--ease), border-color .35s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.fx:hover, .fx.on {
  background:color-mix(in oklab,white 72%,transparent); border-color:var(--glass-b);
  transform:translateY(-3px); box-shadow:0 24px 46px -28px rgba(90,55,30,.4);
}
.fx:focus-visible { outline:2px solid var(--caramel); outline-offset:3px }
.fx-ic { display:block; width:28px; height:28px; color:var(--cocoa); margin-bottom:16px }
.fx-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.fx-t { display:block; font-size:14.5px; font-weight:500; letter-spacing:-.02em; line-height:1.3; padding-right:20px }
.fx-s { display:block; font-size:12.5px; line-height:1.55; color:var(--ink-4); margin-top:6px }
.fx-l {
  display:grid; grid-template-rows:0fr; opacity:0;
  font-size:13px; line-height:1.62; color:var(--ink-2);
  transition:grid-template-rows .45s var(--ease), opacity .3s var(--ease), margin-top .45s var(--ease);
  margin-top:0;
}
.fx-l > span { overflow:hidden }
.fx:hover .fx-l, .fx.on .fx-l { grid-template-rows:1fr; opacity:1; margin-top:12px }
.fx-plus {
  position:absolute; top:20px; right:18px; width:16px; height:16px; color:var(--ink-4);
  transition:transform .4s var(--ease), color .3s; opacity:.7;
}
.fx-plus svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round }
.fx:hover .fx-plus, .fx.on .fx-plus { transform:rotate(45deg); color:var(--cocoa); opacity:1 }

/* ═══ 10 · Konditionen ═════════════════════════════════════════════ */

.pri-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:20px; align-items:stretch }
@media(max-width:900px){ .pri-grid { grid-template-columns:1fr } }
.pri-main { padding:38px 36px 40px; border-radius:24px }

/* Die beiden Bestandteile der Gebühr gleichwertig nebeneinander */
.pri-price { display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap }
.pri-price-part { display:flex; flex-direction:column; gap:6px }
.pri-price-part b {
  font-size:clamp(38px,5.4vw,58px); font-weight:500; letter-spacing:-.045em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.pri-price-part span { font-size:13px; color:var(--ink-3) }
.pri-plus {
  font-size:30px; font-weight:300; color:var(--ink-4); line-height:1;
  margin-top:.12em; flex-shrink:0;
}
.pri-main-p { font-size:15.5px; line-height:1.68; color:var(--ink-3); margin-top:26px; max-width:46ch }
.pri-ul { list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:11px }
.pri-ul li { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-2); line-height:1.55 }
.pri-ul svg { width:15px; height:15px; margin-top:2px; flex-shrink:0; stroke:#5d8452; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }

.pri-side {
  padding:32px 30px 34px; border-radius:24px; color:var(--cream); display:flex; flex-direction:column;
  background:linear-gradient(165deg,#1e1309,#3a2417 60%,#5c3a26);
  box-shadow:0 34px 70px -36px rgba(42,31,23,.6);
}
.pri-side-t { font-size:21px; font-weight:500; letter-spacing:-.025em; margin-bottom:20px }

/* Eingabefeld des Rechenbeispiels */
.pri-field { display:block; margin-bottom:20px }
.pri-field > span {
  display:block; font-family:"Geist Mono",monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(254,247,227,.45); margin-bottom:8px;
}
.pri-input { position:relative; display:block }
.pri-input input {
  width:100%; padding:12px 34px 12px 15px; border-radius:12px; font-size:17px; font-weight:500;
  background:rgba(254,247,227,.07); border:1px solid rgba(254,247,227,.14); color:var(--cream);
  font-variant-numeric:tabular-nums; transition:border-color .25s, background .25s;
  -moz-appearance:textfield; appearance:textfield;
}
.pri-input input::-webkit-outer-spin-button,
.pri-input input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
.pri-input input:focus { outline:none; border-color:rgba(220,175,134,.55); background:rgba(254,247,227,.1) }
.pri-input i {
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:15px; color:rgba(254,247,227,.4); pointer-events:none;
}

.pri-calc { display:flex; flex-direction:column; gap:9px; flex:1 }
.pri-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:13.5px; color:rgba(254,247,227,.6) }
.pri-row i { font-style:normal; font-size:11px; color:rgba(254,247,227,.35); margin-left:4px; white-space:nowrap }
.pri-row b { font-weight:500; font-variant-numeric:tabular-nums; color:rgba(254,247,227,.85) }
.pri-row--sum {
  border-top:1px solid rgba(254,247,227,.14); padding-top:11px; margin-top:3px;
  font-size:14.5px; color:var(--cream);
}
.pri-row--sum b { font-size:17px; font-weight:600 }
.pri-row--you { color:var(--tan); font-size:14.5px }
.pri-row--you b { color:var(--tan); font-size:17px; font-weight:600 }
.pri-side .btn-cream { margin-top:26px; align-self:flex-start }
@media(max-width:560px){ .pri-main { padding:30px 24px 32px } .pri-side { padding:26px 22px 28px } }

/* ═══ 11 · Final-CTA ═══════════════════════════════════════════════ */

.fin {
  position:relative; overflow:hidden; padding:130px 24px 140px; text-align:center; color:var(--cream);
  background:linear-gradient(162deg,#1a1006 0%,#3d2716 48%,#7a5033 100%);
}
.fin::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(760px 460px at 50% 118%,rgba(224,208,191,.3),transparent 62%);
}
.fin-in { position:relative; z-index:2; max-width:760px; margin:0 auto }
.fin-h { font-size:clamp(38px,6.2vw,74px); font-weight:500; letter-spacing:-.045em; line-height:1.02 }
.fin-h i { font-family:"Instrument Serif",serif; font-style:italic; font-weight:400; color:var(--tan); display:block }
.fin-p { font-size:16.5px; line-height:1.65; color:rgba(254,247,227,.55); margin:26px auto 0; max-width:46ch }
.fin-btns { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:38px }
.btn-cream {
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
  font-size:14.5px; font-weight:500; background:var(--cream); color:var(--ink);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn-cream:hover { transform:translateY(-2px); box-shadow:0 20px 44px -14px rgba(0,0,0,.6) }
.btn-cream-ghost {
  display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px;
  font-size:14.5px; font-weight:500; color:rgba(254,247,227,.8);
  border:1px solid rgba(254,247,227,.22); transition:background .3s, color .3s, border-color .3s;
}
.btn-cream-ghost:hover { background:rgba(254,247,227,.08); color:var(--cream); border-color:rgba(254,247,227,.4) }
.fin-note { margin-top:26px; font-size:12.5px; color:rgba(254,247,227,.36) }
@media(max-width:768px){ .fin { padding:88px 22px 96px } }

.footer { margin-top:0 }

/* ═══ 12 · Motion-Utilities ════════════════════════════════════════ */

/* Wird von GSAP animiert; ohne JS sofort sichtbar (siehe Fallback im Skript). */
.rv { opacity:0; transform:translateY(26px) }

/* Reißleine aus dem Inline-Skript im <head>: falls die Animationsbibliothek
   nach vier Sekunden immer noch nicht läuft, wird alles sichtbar geschaltet. */
.lx-nomotion .rv,
.lx-nomotion #hxOrderNew,
.lx-nomotion .hx-char { opacity:1 !important; transform:none !important }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rv, .hero-sub, .hero-btns, .hero-stage { opacity:1 !important; transform:none !important }
  .lx-progress { display:none }
  .hero-track { height:auto }
  .hero-frame { position:static; height:auto; overflow:visible; perspective:none; padding-bottom:0 }
  .hero-stage { transform:none; opacity:1; flex:none }
  .hero-copy { transform:none; opacity:1; filter:none }
  .hero-depth { display:none }
  .nums { margin-top:0 }
  .trust, .nums { opacity:1; transform:none }
  .hero-words { display:none }
  .lx-sec--wl { padding:132px 0 }
  .wl-track { height:auto }
  .wl-frame { position:static; height:auto; overflow:visible; perspective:none }
  .wl-copy { position:static; opacity:1; transform:none; filter:none; margin-bottom:44px }
  .wl-words, .wl-chip, #wlPPage, #wlPSeo { display:none }
  .wl-stage { position:relative; left:auto; top:auto; margin:0 auto; transform:none; opacity:1 }
  .wl-stage .ui-browser { overflow:hidden }
  .wl-stage .shop { overflow:hidden }
  .wl-p { transform:none; opacity:1; filter:none }
  #wlPNav, #wlPHead, #wlPFoot { background:none }
  .wl-stage .shop::before { opacity:1 }
  .hero-stage :is(.ui-side, .ui-top, .ui-kpi, #hxCardChart, #hxCardEvents, #hxCardOrders) { transform:none; opacity:1 }
  .hero-stage .ui-nav--hl { background:none }
}