/* Ausgelagert aus index.php (ehemals Inline-<style>). */
/* ══════════════════════════════════════════════════════════════════════════
   STARTSEITE — seitenlokale Gestaltungsebene (`hp-*`).

   Bewusst ohne neue Tailwind-Utilities: css/app.css ist vorkompiliert
   (npm run build:css), eine beim Build unbekannte Klasse bliebe wirkungslos.
   Akzentfarben laufen über die Custom-Property --ac / --ac2, nie über
   zusammengesetzte Klassennamen. Muster wie pr-* (profile.php) und
   pf-* (provably-fair.php).
   ══════════════════════════════════════════════════════════════════════════ */

.hp{--gold:#f5c842;--gold-d:#d4af37;--gold-l:#ffe9a8;--ac:#f5c842;--ac2:#ffe9a8}
.hp-defs{position:absolute;width:0;height:0;overflow:hidden}
.hp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Raster & Rhythmus ─────────────────────────────────────────────────── */
.hp-wrap{max-width:80rem;margin-inline:auto;padding-inline:1rem;position:relative}
@media (min-width:640px){.hp-wrap{padding-inline:1.5rem}}
@media (min-width:1024px){.hp-wrap{padding-inline:2rem}}
.hp-wrap--narrow{max-width:64rem}
.hp-sec{position:relative;padding-block:4.5rem}
@media (min-width:768px){.hp-sec{padding-block:6rem}}
.hp-sec--tight{padding-block:3.5rem}
.hp-sec--band{background:linear-gradient(180deg,rgba(255,255,255,.016),transparent 60%),rgba(18,18,26,.42);
  border-block:1px solid rgba(255,255,255,.05)}
.hp-grid{display:grid;gap:1.25rem}
@media (min-width:640px){.hp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.hp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.hp-g3m{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Ambiente ──────────────────────────────────────────────────────────── */
.hp-amb{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hp-amb i{position:absolute;display:block;border-radius:9999px;filter:blur(140px)}
.hp-amb i:nth-child(1){top:-14rem;left:50%;transform:translateX(-50%);width:44rem;height:30rem;background:rgba(212,175,55,.09)}
.hp-amb i:nth-child(2){top:2rem;right:-10rem;width:26rem;height:26rem;background:rgba(139,92,246,.055)}
.hp-amb i:nth-child(3){bottom:-12rem;left:-10rem;width:26rem;height:26rem;background:rgba(56,189,248,.045)}
.hp-grain{position:absolute;inset:0;pointer-events:none;opacity:.018;
  background-image:radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1px);background-size:44px 44px}
.hp-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent)}

/* ── Typografie ────────────────────────────────────────────────────────── */
.hp-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.5);background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);border-radius:9999px;padding:.36rem .85rem}
.hp-eyebrow svg{width:.85rem;height:.85rem;color:var(--ac)}
.hp-h1{font-size:clamp(2.7rem,7.2vw,4.6rem);font-weight:900;letter-spacing:-.035em;line-height:1.03;color:#fff}
.hp-h2{font-size:clamp(1.85rem,4.2vw,2.85rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:#fff}
.hp-h3{font-size:1.0625rem;font-weight:800;letter-spacing:-.015em;color:#fff}
.hp-lead{font-size:1.0625rem;line-height:1.65;color:rgba(255,255,255,.58)}
@media (min-width:640px){.hp-lead{font-size:1.15rem}}
.hp-body{font-size:.86rem;line-height:1.65;color:rgba(255,255,255,.55)}
.hp-num{font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.03em;line-height:1}
.hp-shine{background:linear-gradient(96deg,#d4af37 0%,#f5c842 26%,#fff8dc 47%,#f5c842 68%,#d4af37 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hpShine 5.5s linear infinite}
.hp-gold{background:linear-gradient(180deg,#ffe9a8,#c8922c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-accent{background:linear-gradient(180deg,var(--ac2),var(--ac));-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-strong{color:var(--gold);font-weight:700}

/* ── Kopfzeile einer Sektion ───────────────────────────────────────────── */
.hp-head{text-align:center;max-width:44rem;margin-inline:auto;margin-bottom:3rem}
.hp-head .hp-lead{max-width:40rem;margin-inline:auto}
.hp-head .hp-h2{margin-top:1.15rem}
.hp-head p{margin-top:.9rem}

/* ── Karten ────────────────────────────────────────────────────────────── */
.hp-card{position:relative;min-width:0;border-radius:1.25rem;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%),#12121a;
  border:1px solid rgba(255,255,255,.075);
  box-shadow:0 26px 60px -38px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
.hp-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(125% 74% at 50% -18%,color-mix(in srgb,var(--ac) 11%,transparent),transparent 62%)}
.hp-card>*{position:relative;z-index:1}
.hp-hair{position:absolute;inset:0 0 auto 0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 65%,transparent),transparent)}
.hp-lift{transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .24s,box-shadow .24s}
.hp-lift:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac) 34%,transparent);
  box-shadow:0 32px 70px -34px rgba(0,0,0,1),0 0 0 1px color-mix(in srgb,var(--ac) 15%,transparent)}

/* ── Icon-Kacheln & Plaketten ──────────────────────────────────────────── */
.hp-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:2.75rem;height:2.75rem;border-radius:.85rem;color:var(--ac);
  background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 22%,transparent),color-mix(in srgb,var(--ac) 5%,transparent));
  border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px -16px var(--ac)}
.hp-ico svg{width:1.3rem;height:1.3rem}
.hp-ico--lg{width:3.6rem;height:3.6rem;border-radius:1.1rem}
.hp-ico--lg svg{width:1.75rem;height:1.75rem}
.hp-ico--sm{width:2.1rem;height:2.1rem;border-radius:.65rem}
.hp-ico--sm svg{width:1rem;height:1rem}
.hp-pill{display:inline-flex;align-items:center;gap:.42rem;font-size:.68rem;font-weight:700;letter-spacing:.03em;
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  padding:.32rem .7rem;border-radius:9999px;white-space:nowrap}
.hp-pill svg{width:.85rem;height:.85rem;flex:0 0 auto;color:rgba(255,255,255,.5)}
.hp-pill--ac{color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);
  border-color:color-mix(in srgb,var(--ac) 28%,transparent)}
.hp-pill--ac svg{color:var(--ac)}
.hp-pill--on{color:#6ee7b7;background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.28)}
.hp-pill--on svg{color:#6ee7b7}
.hp-dot{width:.5rem;height:.5rem;border-radius:9999px;background:#34d399;flex:0 0 auto;position:relative}
.hp-dot::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#34d399;
  animation:hpPing 2.1s cubic-bezier(0,0,.2,1) infinite}

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:800;font-size:.95rem;padding:.92rem 1.7rem;border-radius:.9rem;
  cursor:pointer;white-space:nowrap;border:1px solid transparent;
  transition:transform .13s ease,background .2s,border-color .2s,color .2s,box-shadow .2s}
.hp-btn:active{transform:scale(.975)}
.hp-btn svg{width:1.15rem;height:1.15rem;flex:0 0 auto}
.hp-btn--gold{color:#0a0a0f;font-weight:900;background:linear-gradient(180deg,#f7d766,#c39527);
  border-color:rgba(255,235,160,.35);
  box-shadow:0 16px 34px -16px rgba(212,175,55,.85),inset 0 1px 0 rgba(255,255,255,.45)}
.hp-btn--gold:hover{background:linear-gradient(180deg,#ffe58a,#d4af37);
  box-shadow:0 20px 42px -16px rgba(212,175,55,1),inset 0 1px 0 rgba(255,255,255,.5)}
.hp-btn--gold svg{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.hp-btn--gold:hover svg{transform:rotate(12deg) scale(1.06)}
.hp-btn--ghost{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.11);color:rgba(255,255,255,.72)}
.hp-btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(212,175,55,.34);color:#fff}
.hp-btn--sm{font-size:.8125rem;padding:.6rem 1.1rem;border-radius:.75rem}
.hp-btn--sm svg{width:1rem;height:1rem}
.hp-btn--block{width:100%}
.hp-ctas{display:flex;flex-wrap:wrap;gap:.85rem}
/* Auf schmalen Geräten sonst zwei unterschiedlich breite Knöpfe untereinander. */
@media (max-width:479px){.hp-ctas .hp-btn{width:100%}}

/* ── Auftritt ──────────────────────────────────────────────────────────── */
@keyframes hpIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hpPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes hpPing{0%{transform:scale(1);opacity:.6}75%,100%{transform:scale(2.4);opacity:0}}
@keyframes hpShine{0%{background-position:220% center}100%{background-position:-220% center}}
@keyframes hpGrow{from{width:0}to{width:var(--w)}}
.hp-in{animation:hpIn .62s cubic-bezier(.22,1,.36,1) both}
.hp-pop{animation:hpPop .5s cubic-bezier(.22,1,.36,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.16s}.d4{animation-delay:.22s}
.d5{animation-delay:.28s}.d6{animation-delay:.34s}.d7{animation-delay:.4s}.d8{animation-delay:.46s}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — Automat & Coins
   Ein 9-s-Takt trägt die ganze Maschine: Hebel ziehen → Walzen laufen →
   Walze 1/2/3 nacheinander stoppen → Gewinnphase → Ruhe. Alle Keyframes
   unten sind Prozentmarken DESSELBEN Takts, damit nichts auseinanderläuft.
   ══════════════════════════════════════════════════════════════════════════ */
.hp-hero{position:relative;overflow:hidden;padding-block:3rem 3.5rem}
@media (min-width:1024px){.hp-hero{padding-block:4rem 4.5rem}}
.hp-hero-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:1024px){.hp-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:4rem}}
.hp-hero-copy{text-align:center}
@media (min-width:1024px){.hp-hero-copy{text-align:left}}
.hp-hero-copy .hp-ctas,.hp-hero-copy .hp-trust{justify-content:center}
.hp-hero-copy .hp-lead{margin-inline:auto}
@media (min-width:1024px){.hp-hero-copy .hp-ctas,.hp-hero-copy .hp-trust{justify-content:flex-start}
  .hp-hero-copy .hp-lead{margin-inline:0}}
.hp-trust{display:flex;flex-wrap:wrap;gap:.5rem}

.hp-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:26rem}
.hp-stage-glow{position:absolute;width:26rem;height:26rem;border-radius:9999px;pointer-events:none;
  background:radial-gradient(circle,rgba(212,175,55,.17) 0%,rgba(212,175,55,.05) 42%,transparent 70%);
  animation:hpBreathe 5.5s ease-in-out infinite}
@keyframes hpBreathe{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}

.hp-machine{--cyc:9s;position:relative;z-index:2;width:min(25.5rem,90vw);height:auto;overflow:visible;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.65));animation:hpHover 7s ease-in-out infinite}
@keyframes hpHover{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-12px) rotate(-.5deg)}75%{transform:translateY(-5px) rotate(.35deg)}}

/* Walzen: Laufband, Ergebnis-Symbol, Stoppzeitpunkte je Walze */
@keyframes hpScroll{from{transform:translateY(0)}to{transform:translateY(-276px)}}
.hp-scroll{animation:hpScroll .42s linear infinite;filter:blur(1.15px)}
.hp-scroll--b{animation-duration:.48s}
.hp-scroll--c{animation-duration:.55s}

@keyframes hpStrip1{0%,3.5%{opacity:0}4.6%,21%{opacity:1}23%,100%{opacity:0}}
@keyframes hpStrip2{0%,3.5%{opacity:0}4.6%,28.5%{opacity:1}30.5%,100%{opacity:0}}
@keyframes hpStrip3{0%,3.5%{opacity:0}4.6%,36%{opacity:1}38%,100%{opacity:0}}
.hp-strip{animation:hpStrip1 var(--cyc) linear infinite}
.hp-strip--b{animation-name:hpStrip2}
.hp-strip--c{animation-name:hpStrip3}

@keyframes hpFace1{0%,3.5%{opacity:1;transform:translateY(0)}4.6%,21%{opacity:0;transform:translateY(-16px)}
  23%{opacity:1;transform:translateY(10px)}25.5%{transform:translateY(-4px)}28%,100%{opacity:1;transform:translateY(0)}}
@keyframes hpFace2{0%,3.5%{opacity:1;transform:translateY(0)}4.6%,28.5%{opacity:0;transform:translateY(-16px)}
  30.5%{opacity:1;transform:translateY(10px)}33%{transform:translateY(-4px)}35.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes hpFace3{0%,3.5%{opacity:1;transform:translateY(0)}4.6%,36%{opacity:0;transform:translateY(-16px)}
  38%{opacity:1;transform:translateY(10px)}40.5%{transform:translateY(-4px)}43%,100%{opacity:1;transform:translateY(0)}}
.hp-face{animation:hpFace1 var(--cyc) cubic-bezier(.2,.9,.3,1) infinite}
.hp-face--b{animation-name:hpFace2}
.hp-face--c{animation-name:hpFace3}

/* Gewinnphase: Linie, Rahmenleuchten, Anzeige */
@keyframes hpWin{0%,38.5%{opacity:0}42%{opacity:1}62%{opacity:1}66%,100%{opacity:0}}
@keyframes hpWinBeat{0%,38.5%{opacity:0}42%{opacity:.95}47%{opacity:.35}52%{opacity:1}57%{opacity:.4}62%{opacity:.9}66%,100%{opacity:0}}
.hp-win{animation:hpWin var(--cyc) ease-in-out infinite}
.hp-win-beat{animation:hpWinBeat var(--cyc) ease-in-out infinite}
@keyframes hpDispIdle{0%,39%{opacity:1}42%,63%{opacity:0}66%,100%{opacity:1}}
@keyframes hpDispWin{0%,39%{opacity:0}42%,63%{opacity:1}66%,100%{opacity:0}}
.hp-disp-idle{animation:hpDispIdle var(--cyc) steps(1,end) infinite}
.hp-disp-win{animation:hpDispWin var(--cyc) steps(1,end) infinite}

/* Hebel & Spin-Knopf */
@keyframes hpLever{0%,2.5%{transform:rotate(0)}7%{transform:rotate(32deg)}10%{transform:rotate(32deg)}
  16%{transform:rotate(-3deg)}19%,100%{transform:rotate(0)}}
.hp-lever{transform-box:view-box;transform-origin:321px 290px;animation:hpLever var(--cyc) cubic-bezier(.4,0,.3,1) infinite}
@keyframes hpBtn{0%,3%{transform:scale(1)}6.5%{transform:scale(.88)}12%{transform:scale(1)}100%{transform:scale(1)}}
.hp-spinbtn{transform-box:view-box;transform-origin:174px 371px;animation:hpBtn var(--cyc) ease-out infinite}

/* Laufende Lampen im Kranz */
@keyframes hpBulb{0%,100%{opacity:.22}50%{opacity:1}}
.hp-bulb{animation:hpBulb 1.5s ease-in-out infinite}

/* Münz-Fontäne aus dem Auswurf */
@keyframes hpFly1{0%,38.5%{opacity:0;transform:translate(0,0) scale(.3)}
  42%{opacity:1;transform:translate(-16px,-28px) scale(.85)}
  53%{opacity:1;transform:translate(-84px,-116px) scale(1.05)}
  63%{opacity:.8;transform:translate(-128px,-40px) scale(.95)}
  70%,100%{opacity:0;transform:translate(-144px,34px) scale(.8)}}
@keyframes hpFly2{0%,39.5%{opacity:0;transform:translate(0,0) scale(.3)}
  43%{opacity:1;transform:translate(4px,-34px) scale(.9)}
  55%{opacity:1;transform:translate(18px,-150px) scale(1.12)}
  65%{opacity:.8;transform:translate(34px,-52px) scale(1)}
  72%,100%{opacity:0;transform:translate(42px,38px) scale(.8)}}
@keyframes hpFly3{0%,40.5%{opacity:0;transform:translate(0,0) scale(.3)}
  44%{opacity:1;transform:translate(22px,-26px) scale(.8)}
  56%{opacity:1;transform:translate(96px,-112px) scale(1)}
  66%{opacity:.8;transform:translate(138px,-36px) scale(.9)}
  73%,100%{opacity:0;transform:translate(154px,40px) scale(.75)}}
@keyframes hpFly4{0%,41.5%{opacity:0;transform:translate(0,0) scale(.3)}
  45%{opacity:1;transform:translate(-8px,-24px) scale(.75)}
  57%{opacity:1;transform:translate(-44px,-96px) scale(.94)}
  67%{opacity:.75;transform:translate(-68px,-22px) scale(.85)}
  74%,100%{opacity:0;transform:translate(-78px,44px) scale(.72)}}
@keyframes hpFly5{0%,42.5%{opacity:0;transform:translate(0,0) scale(.3)}
  46%{opacity:1;transform:translate(14px,-30px) scale(.78)}
  58%{opacity:1;transform:translate(62px,-136px) scale(.96)}
  68%{opacity:.75;transform:translate(92px,-46px) scale(.88)}
  75%,100%{opacity:0;transform:translate(104px,36px) scale(.72)}}
.hp-fly{transform-box:fill-box;transform-origin:center;animation:hpFly1 var(--cyc) cubic-bezier(.3,.1,.5,1) infinite}
.hp-fly--2{animation-name:hpFly2}.hp-fly--3{animation-name:hpFly3}
.hp-fly--4{animation-name:hpFly4}.hp-fly--5{animation-name:hpFly5}

/* Schwebende Münzen rund um den Automaten */
.hp-coin{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.hp-coin svg{display:block;width:100%;height:100%}
@keyframes hpBobA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(6px,-22px,0)}}
@keyframes hpBobB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-8px,-15px,0)}}
@keyframes hpBobC{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4px,-27px,0)}}
@keyframes hpTumble{0%{transform:scaleX(1)}25%{transform:scaleX(.12)}50%{transform:scaleX(-1)}
  75%{transform:scaleX(.12)}100%{transform:scaleX(1)}}
.hp-coin--a{top:-.5rem;left:5%;width:3.4rem;height:3.4rem;animation:hpBobA 4.6s ease-in-out infinite}
.hp-coin--b{top:24%;right:-.75rem;width:2.6rem;height:2.6rem;animation:hpBobB 5.4s ease-in-out .7s infinite}
.hp-coin--c{bottom:14%;left:-.25rem;width:3rem;height:3rem;animation:hpBobC 4.1s ease-in-out 1.4s infinite}
.hp-coin--d{top:8%;right:12%;width:1.9rem;height:1.9rem;animation:hpBobB 6.2s ease-in-out 2.1s infinite}
.hp-tumble{animation:hpTumble 3.4s cubic-bezier(.42,0,.58,1) infinite;transform-origin:center}
.hp-tumble--a{animation-duration:3.4s}
.hp-tumble--b{animation-duration:4.3s;animation-delay:.5s}
.hp-tumble--c{animation-duration:3.8s;animation-delay:1.1s}
.hp-tumble--d{animation-duration:5s;animation-delay:1.8s}
@keyframes hpSheen{0%{transform:translateX(-46px)}55%,100%{transform:translateX(46px)}}
.hp-sheen{animation:hpSheen 3.2s cubic-bezier(.5,0,.5,1) infinite}

/* Funkeln im Bühnenraum */
@keyframes hpTwinkle{0%,100%{opacity:.08;transform:scale(.7)}50%{opacity:.9;transform:scale(1)}}
.hp-spark{position:absolute;border-radius:9999px;background:#ffe9a8;pointer-events:none;
  box-shadow:0 0 10px 1px rgba(245,200,66,.75);animation:hpTwinkle 3.6s ease-in-out infinite}

/* ── Kennzahlenband ────────────────────────────────────────────────────── */
.hp-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.hp-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hp-metric{position:relative;overflow:hidden;display:flex;align-items:center;gap:.9rem;
  padding:1.4rem 1.15rem;border-inline-start:1px solid rgba(255,255,255,.05)}
.hp-metric:first-child{border-inline-start:0}
@media (max-width:767px){.hp-metric:nth-child(odd){border-inline-start:0}
  .hp-metric:nth-child(n+3){border-block-start:1px solid rgba(255,255,255,.05)}}
.hp-metric::before{content:'';position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 45%,transparent),transparent);
  opacity:0;transition:opacity .25s}
.hp-metric:hover::before{opacity:1}
.hp-metric-v{font-size:1.45rem}
.hp-metric-l{font-size:.7rem;color:rgba(255,255,255,.45);margin-top:.2rem}
.hp-metric-spark{position:absolute;right:.4rem;bottom:.3rem;width:5rem;height:1.6rem;opacity:.28;pointer-events:none}
/* Auf schmalen Geräten läuft die Sparkline durch die Beschriftung — dort weg. */
@media (max-width:639px){.hp-metric-spark{display:none}}

/* ── Live-Laufband ─────────────────────────────────────────────────────── */
.hp-ticker{display:flex;align-items:stretch;overflow:hidden;user-select:none;
  background:rgba(10,10,15,.55);border-block:1px solid rgba(255,255,255,.05)}
.hp-ticker-badge{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;
  border-inline-end:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.hp-ticker-badge span{font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hp-ticker-mask{flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5rem,#000 calc(100% - 1.5rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 1.5rem,#000 calc(100% - 1.5rem),transparent)}
@media (min-width:640px){.hp-ticker-mask{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}}
@keyframes hpTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hp-ticker-track{display:flex;width:max-content;animation:hpTicker 46s linear infinite}
.hp-ticker:hover .hp-ticker-track{animation-play-state:paused}
.hp-tick{display:inline-flex;align-items:center;gap:.6rem;padding:.72rem 1.5rem;white-space:nowrap;font-size:.8125rem}
.hp-tick-ico{display:flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;border-radius:.5rem;
  background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.2);color:var(--gold);flex:0 0 auto}
.hp-tick-ico svg{width:.9rem;height:.9rem}
.hp-tick b{color:rgba(255,255,255,.85);font-weight:700}
.hp-tick em{font-style:normal;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
/* .34 lag bei 3,0:1 auf dem Casino-Schwarz und fiel im Lighthouse-Audit
   "color-contrast" durch (WCAG AA verlangt 4,5:1 für Fließtext). .55 erreicht
   rund 6:1 und bleibt optisch zurückhaltend. */
.hp-tick i{font-style:normal;color:rgba(255,255,255,.55);font-size:.72rem}
.hp-tick-mult{font-size:.68rem;font-weight:800;color:#6ee7b7;background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.26);border-radius:9999px;padding:.1rem .45rem;font-variant-numeric:tabular-nums}

/* ── Spielkarte ────────────────────────────────────────────────────────── */
.hp-game{display:flex;flex-direction:column;height:100%}
.hp-game-top{position:relative;overflow:hidden;padding:1.5rem 1.35rem 1.2rem;
  background:linear-gradient(165deg,color-mix(in srgb,var(--ac) 15%,transparent),transparent 62%)}
.hp-game-top::before{content:'';position:absolute;inset:-40% 40% 40% -30%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--ac) 16%,transparent),transparent 62%)}
.hp-game-mark{position:absolute;right:-1.4rem;top:-1.4rem;width:8.5rem;height:8.5rem;
  color:var(--ac);opacity:.11;pointer-events:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s}
.hp-lift:hover .hp-game-mark{transform:rotate(9deg) scale(1.08);opacity:.17}
.hp-game-head{position:relative;display:flex;align-items:flex-start;gap:.9rem}
.hp-game-name{font-size:1.15rem;font-weight:900;letter-spacing:-.02em;color:#fff;line-height:1.2}
.hp-game-tag{margin-top:.55rem;font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.55)}
.hp-game-body{display:flex;flex-direction:column;gap:1rem;padding:1.15rem 1.35rem 1.35rem;flex:1 1 auto}
.hp-game-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid rgba(255,255,255,.055);border-radius:.85rem;background:rgba(255,255,255,.018);overflow:hidden}
.hp-game-stat{padding:.65rem .35rem;text-align:center;border-inline-start:1px solid rgba(255,255,255,.05)}
.hp-game-stat:first-child{border-inline-start:0}
.hp-game-stat b{display:block;font-size:.9rem;font-weight:900;color:var(--ac);font-variant-numeric:tabular-nums}
.hp-game-stat>span{display:block;margin-top:.15rem;font-size:.58rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.34)}
.hp-vol{display:inline-flex;align-items:flex-end;gap:2.5px;height:.9rem;vertical-align:middle}
.hp-vol i{display:block;width:3px;border-radius:1px;background:rgba(255,255,255,.16)}
.hp-vol i:nth-child(1){height:.3rem}.hp-vol i:nth-child(2){height:.45rem}.hp-vol i:nth-child(3){height:.6rem}
.hp-vol i:nth-child(4){height:.75rem}.hp-vol i:nth-child(5){height:.9rem}
.hp-vol i.on{background:var(--ac);box-shadow:0 0 7px -1px var(--ac)}
.hp-feats{display:flex;flex-wrap:wrap;gap:.4rem}
.hp-game-cta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;
  padding-top:.95rem;border-top:1px solid rgba(255,255,255,.055);
  font-size:.85rem;font-weight:800;color:var(--ac)}
.hp-game-cta svg{width:1.05rem;height:1.05rem;transition:transform .2s}
.hp-lift:hover .hp-game-cta svg{transform:translateX(4px)}
.hp-ribbon{position:absolute;top:1.5rem;right:1.35rem;z-index:2}

/* Mini-Walzen in der Kartenkopfzeile */
.hp-mini{display:flex;gap:.35rem;margin-top:1.1rem;position:relative}
.hp-mini i{display:flex;align-items:center;justify-content:center;width:2.35rem;height:2.75rem;border-radius:.5rem;
  background:linear-gradient(180deg,#15151f,#0b0b12);border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -8px 14px -10px #000;color:var(--ac)}
.hp-mini i svg{width:1.15rem;height:1.15rem}
.hp-mini i:nth-child(2){color:var(--ac2)}
.hp-mini i:nth-child(3){opacity:.75}

/* ── Ablauf-Schritte ───────────────────────────────────────────────────── */
.hp-steps{position:relative}
.hp-step{position:relative;padding:1.75rem 1.5rem}
.hp-step-n{display:flex;align-items:center;gap:.75rem;margin-block:1.25rem .8rem}
.hp-step-n b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;font-weight:900;
  letter-spacing:.22em;color:var(--ac)}
.hp-step-n i{display:block;height:1px;flex:1 1 auto;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 28%,transparent),transparent)}
/* Verbinder liegen exakt in den beiden Rasterlücken — dort verdeckt sie keine
   Karte, und sie brauchen keinen z-index-Kampf mit den Karten darüber. */
.hp-connector{display:none}
@media (min-width:768px){
  .hp-steps .hp-grid{gap:2rem}
  .hp-connector{display:block;position:absolute;top:3.55rem;height:14px;width:2rem;z-index:2;
    pointer-events:none;overflow:visible}
  .hp-connector--a{left:calc(33.333% - 1.333rem)}
  .hp-connector--b{left:calc(66.667% - .667rem)}
}
@keyframes hpDash{to{stroke-dashoffset:-64}}
.hp-connector line{stroke:rgba(212,175,55,.45);stroke-width:2;stroke-dasharray:4 6;stroke-linecap:round;
  animation:hpDash 3.4s linear infinite}
.hp-connector path{stroke:rgba(212,175,55,.6);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── Vorteilszeile ─────────────────────────────────────────────────────── */
.hp-feature{position:relative;display:flex;align-items:flex-start;gap:1rem;padding:1.25rem}
.hp-feature::before{content:'';position:absolute;left:0;top:1.2rem;bottom:1.2rem;width:2px;border-radius:9999px;
  background:linear-gradient(180deg,transparent,var(--ac),transparent);opacity:0;transition:opacity .28s}
.hp-feature:hover::before{opacity:.85}

/* ── Vertrauens-Panel (Jackpot & Fairness) ─────────────────────────────── */
.hp-trustgrid{display:grid;gap:1.25rem}
@media (min-width:900px){.hp-trustgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.hp-panel{display:flex;flex-direction:column;gap:1.15rem;padding:1.75rem}
@media (min-width:640px){.hp-panel{padding:2.1rem}}
.hp-panel-art{display:flex;justify-content:center;padding-block:.35rem}
.hp-jack{font-size:clamp(2rem,5.5vw,2.9rem)}
.hp-kv{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.hp-kv div{min-width:0}
.hp-kv b{display:block;font-size:1.05rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.hp-kv span{display:block;font-size:.68rem;color:rgba(255,255,255,.4);margin-top:.1rem}
@keyframes hpOrbit{to{transform:rotate(360deg)}}
@keyframes hpOrbitRev{to{transform:rotate(-360deg)}}
.hp-rot{transform-box:view-box;transform-origin:center;animation:hpOrbit 34s linear infinite}
.hp-rot-rev{transform-box:view-box;transform-origin:center;animation:hpOrbitRev 24s linear infinite}
@keyframes hpDraw{to{stroke-dashoffset:0}}
.hp-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:hpDraw 2.4s cubic-bezier(.25,.9,.3,1) .3s forwards}
@keyframes hpRise{0%{transform:translateY(10px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(-56px);opacity:0}}
.hp-rise{transform-box:fill-box;animation:hpRise 3.6s ease-in-out infinite}
@keyframes hpPulseRing{0%{transform:scale(.72);opacity:.75}100%{transform:scale(1.35);opacity:0}}
.hp-ring{transform-box:fill-box;transform-origin:center;animation:hpPulseRing 3s cubic-bezier(.2,.7,.4,1) infinite}
@keyframes hpTick{0%,100%{opacity:.2}50%{opacity:1}}
.hp-tw{animation:hpTick 3.2s ease-in-out infinite}

/* ── Schlussaufruf ─────────────────────────────────────────────────────── */
.hp-cta{position:relative;overflow:hidden;text-align:center;padding:3rem 1.5rem}
@media (min-width:640px){.hp-cta{padding:3.75rem 3rem}}
.hp-cta .hp-ctas{justify-content:center}
.hp-mini-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;margin-top:2rem}
.hp-mini-trust span{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:rgba(255,255,255,.45)}
.hp-mini-trust svg{width:.85rem;height:.85rem;color:rgba(52,211,153,.8)}

/* ── Hinweis zum verantwortungsvollen Spielen ──────────────────────────── */
/* .42 lag bei 4,07:1 und fiel im Lighthouse-Audit color-contrast durch (AA
   verlangt 4,5:1). .55 erreicht rund 6:1; die Hinweiszeile bleibt dezent. */
.hp-rg{display:flex;align-items:flex-start;gap:.85rem;padding-block:1.35rem;
  font-size:.75rem;line-height:1.65;color:rgba(255,255,255,.55)}
.hp-rg svg{width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.1rem;color:rgba(255,255,255,.5)}
.hp-rg a{color:rgba(255,255,255,.68);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(255,255,255,.22)}
.hp-rg a:hover{color:var(--gold);text-decoration-color:rgba(212,175,55,.5)}
.hp-rg b{color:rgba(255,255,255,.72)}

/* ── Mobile-Leistungsprofil ──────────────────────────────────────────────
   Lighthouse Mobile (Moto-G-Klasse) maß 1,08 s Total Blocking Time; „Style &
   Layout" und „Other" machten zusammen über 4 s Main-Thread-Arbeit aus. Die
   Startseite animiert dauerhaft rund 40 Elemente gleichzeitig (Glanz, Funken,
   Münzen, Lampen, Ringe). Auf schmalen Viewports bleiben nur die Bewegungen,
   die die Mechanik erzählen, alle rein dekorativen stehen still. Die Optik
   ändert sich kaum, die Rechenlast deutlich.

   .hp-machine verliert dabei auch den drop-shadow: Ein Filter über einem
   Element, dessen Kinder weiter animieren, wird pro Frame neu gerastert. */
@media (max-width:767px){
  .hp-machine{animation:none;filter:none}
  .hp-scroll{filter:none}
  .hp-spark,.hp-bulb,.hp-coin,.hp-tumble,.hp-sheen,
  .hp-rot,.hp-rot-rev,.hp-rise,.hp-ring,.hp-tw,
  .hp-connector line{animation:none!important}
  /* Der H1-Verlauf wanderte per background-position (volles Text-Repaint pro
     Frame), der Punkte-Ping und die SVG-Glow-Filter kosteten Paint. Statisch
     bleibt die Optik erhalten. */
  .hp-shine,.hp-dot::after{animation:none!important}
  .hp-disp-win,.hp-win,.hp-win-beat,.hp-win-beat path{filter:none!important}
}

/* ── Rendering-Kosten unterhalb des Faltpunkts ───────────────────────────
   content-visibility:auto überspringt Layout und Paint der Sektionen,
   solange sie außerhalb des Viewports liegen. contain-intrinsic-size hält
   die Scrollhöhe vor dem ersten Rendern stabil (`auto` merkt sich danach
   die echte gemessene Höhe, deshalb springt die Scrollbar nicht). */
.hp-sec{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.hp-sec--band{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ── Reduzierte Bewegung ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hp-machine,.hp-scroll,.hp-strip,.hp-face,.hp-win,.hp-win-beat,.hp-disp-idle,.hp-disp-win,
  .hp-lever,.hp-spinbtn,.hp-bulb,.hp-fly,.hp-coin,.hp-tumble,.hp-sheen,.hp-spark,
  .hp-ticker-track,.hp-stage-glow,.hp-rot,.hp-rot-rev,.hp-rise,.hp-ring,.hp-tw,
  .hp-connector line,.hp-shine,.hp-dot::after,.hp-in,.hp-pop{animation:none!important}
  .hp-strip{opacity:0}
  .hp-face,.hp-disp-idle{opacity:1}
  .hp-disp-win,.hp-win,.hp-win-beat,.hp-fly{opacity:0}
  .hp-draw{stroke-dashoffset:0}
  .hp-in,.hp-pop{opacity:1;transform:none}
}