/* ==================================================================
   SpineraX – Stylesheet
   ================================================================== */

:root{
  --bg:            #070a12;
  --bg-2:          #0a0e18;
  --panel:         rgba(255,255,255,.035);
  --panel-2:       rgba(255,255,255,.055);
  --line:          rgba(255,255,255,.09);
  --line-soft:     rgba(255,255,255,.06);

  --txt:           #eef2f8;
  --txt-dim:       #9aa5b8;
  --txt-mute:      #6d7789;

  --teal:          #5ef0d8;
  --teal-2:        #2ad3bb;
  --gold:          #ffc73a;
  --gold-2:        #ff9d1c;
  --violet:        #7b5cff;
  --green:         #16d97f;
  --red:           #ff4d6d;

  --r-xl:          26px;
  --r-lg:          20px;
  --r-md:          14px;
  --r-sm:          10px;

  --shadow:        0 30px 80px rgba(0,0,0,.55);
  --wrap:          1080px;
  --font:          "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* hidden muss gewinnen – sonst holen sich Regeln mit display:grid/flex/
   inline-block die Elemente zurück (Overlay, Ergebnisbox, Buttons). */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; }

a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:-.02em; }

img{ max-width:100%; display:block; }

::selection{ background:rgba(94,240,216,.28); color:#fff; }

/* ==================================================================
   ALTERSPRÜFUNG
   ================================================================== */

.agegate{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:24px 16px;
  overflow-y:auto;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(22,217,127,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 90%, rgba(123,92,255,.14), transparent 60%),
    #05070d;
  backdrop-filter:blur(6px);
}
.agegate.is-hidden{ display:none; }

.agegate__bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ag-chip{
  position:absolute; font-size:120px; line-height:1;
  color:rgba(255,255,255,.028);
  animation:agFloat 14s ease-in-out infinite;
}
.ag-chip--1{ top:8%;  left:8%;  }
.ag-chip--2{ top:70%; left:14%; animation-delay:-3s; font-size:90px; }
.ag-chip--3{ top:16%; right:10%; animation-delay:-6s; font-size:100px; color:rgba(255,199,58,.035); }
.ag-chip--4{ top:66%; right:8%;  animation-delay:-9s; font-size:110px; color:rgba(255,77,109,.035); }
@keyframes agFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-26px) rotate(8deg); }
}

.agegate__box{
  position:relative;
  width:min(680px,100%);
  padding:34px 34px 26px;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    #0b0f18;
  box-shadow:var(--shadow);
  animation:agIn .5s cubic-bezier(.2,.9,.3,1) both;
}
.agegate__box::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(94,240,216,.45), transparent 35%, transparent 65%, rgba(255,199,58,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
@keyframes agIn{
  from{ opacity:0; transform:translateY(22px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.agegate__box.is-shake{ animation:agShake .45s ease; }
@keyframes agShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-9px); } 40%{ transform:translateX(8px); }
  60%{ transform:translateX(-5px); } 80%{ transform:translateX(4px); }
}

.agegate__head{ display:flex; gap:18px; align-items:center; margin-bottom:22px; }

.agegate__logo{
  position:relative; flex:0 0 auto;
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #1b2233, #070a12 70%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 34px rgba(94,240,216,.18);
}
.agegate__logo-ring{
  position:absolute; inset:5px; border-radius:50%;
  border:1px dashed rgba(94,240,216,.35);
  animation:spin 16s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.agegate__logo-txt{
  position:relative; font-size:12px; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(92deg,var(--teal),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.agegate__kicker{
  display:block; font-size:11px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--teal);
  margin-bottom:8px;
}
.agegate__title{ font-size:clamp(23px,3.6vw,33px); font-weight:800; }

.agegate__panel{
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.022);
  padding:22px 24px;
}
.agegate__lead{ margin:0 0 14px; font-size:17px; color:#dbe2ee; }
.agegate__sub{ margin:0 0 14px; font-size:14.5px; color:var(--txt-dim); }
.agegate__note{ margin:0; font-size:14px; color:var(--teal); opacity:.9; }

.agegate__actions{ display:grid; gap:12px; margin:22px 0 20px; }

.btn{
  font-family:inherit; font-size:16px; font-weight:700;
  padding:16px 22px; border-radius:16px; cursor:pointer;
  border:1px solid transparent; width:100%;
  transition:transform .16s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.btn:active{ transform:translateY(1px) scale(.995); }

.btn--yes{
  background:linear-gradient(100deg,var(--teal),var(--teal-2));
  color:#04231f;
  box-shadow:0 12px 36px rgba(94,240,216,.24), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--yes:hover{ box-shadow:0 16px 46px rgba(94,240,216,.36); transform:translateY(-2px); }

.btn--no{
  background:rgba(255,255,255,.035);
  border-color:var(--line);
  color:var(--txt-dim);
}
.btn--no:hover{ background:rgba(255,77,109,.10); border-color:rgba(255,77,109,.4); color:#ffd3db; }

.btn--ghost{
  margin-top:22px; width:auto; padding:13px 26px;
  background:rgba(255,255,255,.04); border-color:var(--line); color:var(--txt);
}
.btn--ghost:hover{ background:rgba(255,255,255,.08); }

.agegate__info{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:18px 22px; background:rgba(255,255,255,.018);
}
.agegate__info h2{ font-size:14px; font-weight:700; margin-bottom:5px; }
.agegate__info p{ margin:0; font-size:13.5px; color:var(--txt-dim); }

.agegate__foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:18px; font-size:12.5px; color:var(--txt-mute);
}
.agegate__foot a{ color:var(--txt-mute); }
.agegate__foot a:hover{ color:var(--teal); }

/* Ablehnung */
.agegate__box--denied{ width:min(520px,100%); text-align:center; padding:44px 34px 36px; }
.denied__icon{ font-size:44px; display:block; margin-bottom:14px; }
.denied__title{ font-size:26px; font-weight:800; margin-bottom:12px; }
.denied__text{ color:var(--txt-dim); font-size:15px; margin:0 0 10px; }
.denied__text--small{ font-size:13.5px; color:var(--txt-mute); }

/* ==================================================================
   SEITE
   ================================================================== */

.site{
  opacity:0; visibility:hidden;
  transition:opacity .6s ease;
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column;
}
.site.is-visible{ opacity:1; visibility:visible; }

.bg-glow{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.glow{ position:absolute; border-radius:50%; filter:blur(130px); opacity:.5; }
.glow--green { width:720px; height:720px; left:-16%; top:2%;    background:rgba(22,217,127,.20); }
.glow--violet{ width:820px; height:820px; right:-14%; top:-8%;  background:rgba(123,92,255,.22); }
.glow--gold  { width:620px; height:620px; right:6%;  bottom:2%; background:rgba(255,157,28,.16); }

.wrap{ width:min(var(--wrap),calc(100% - 40px)); margin:0 auto; flex:1; }

/* --- Brand --- */
.brand{ display:flex; justify-content:center; padding:26px 20px 10px; }
.brand__mark{
  position:relative; width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 28%, #1a2131, #06090f 72%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 30px rgba(94,240,216,.14);
}
.brand__ring{
  position:absolute; inset:4px; border-radius:50%;
  border:1px dashed rgba(255,199,58,.30);
  animation:spin 22s linear infinite;
}
.brand__txt{
  position:relative; font-size:10.5px; font-weight:800;
  background:linear-gradient(92deg,var(--teal),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- Hero --- */
.hero{ padding:34px 0 30px; }
.hero__left{ min-width:0; }
.hero__title{
  font-size:clamp(26px,3.6vw,44px); font-weight:800; margin-bottom:24px;
  text-wrap:balance;              /* falls doch umgebrochen wird, gleichmäßig */
}
.grad{
  background:linear-gradient(96deg,var(--gold-2),var(--gold) 45%,var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Ticker */
/* Kopfzeile ganz oben: läuft über die volle Breite des Inhaltsbereichs,
   ohne Rundung und ohne seitlichen Abstand. */
.ticker{
  position:relative; overflow:hidden; width:100%;
  border-bottom:1px solid rgba(255,199,58,.22);
  background:linear-gradient(90deg,
    rgba(255,157,28,.10), rgba(255,199,58,.16) 50%, rgba(255,157,28,.10));
  padding:10px 0;
  -webkit-mask:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ticker__track{
  display:flex; align-items:center; gap:14px; width:max-content;
  animation:tick 26s linear infinite;
}
.ticker__track span{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#ffdf9a; white-space:nowrap;
}
.ticker__track i{ width:4px; height:4px; border-radius:50%; background:rgba(255,199,58,.5); }
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker:hover .ticker__track{ animation-play-state:paused; }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; max-width:660px; }
.stat{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); padding:14px 16px;
  transition:border-color .25s ease, transform .25s ease;
}
.stat:hover{ border-color:rgba(94,240,216,.35); transform:translateY(-3px); }
.stat strong{ display:block; font-size:22px; font-weight:800; }
.stat span{ font-size:12px; color:var(--txt-mute); }

/* Socials */
.socials{ display:flex; gap:11px; flex-wrap:wrap; }
.soc{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--panel);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.soc svg{ width:17px; height:17px; fill:none; stroke:var(--txt-dim); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.soc svg .fill{ fill:var(--txt-dim); stroke:none; }
.soc:hover{ transform:translateY(-3px); border-color:rgba(94,240,216,.45); background:rgba(94,240,216,.08); }
.soc:hover svg{ stroke:var(--teal); }
.soc:hover svg .fill{ fill:var(--teal); }

/* --- Sections --- */
.section{ padding:46px 0 10px; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.section__title{ font-size:clamp(20px,2.6vw,26px); font-weight:800; }
.section__hint{ font-size:12px; color:var(--txt-mute); }

/* --- Partner Cards --- */
.cards{ display:grid; gap:16px; }

.card{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:180px 1fr 200px;
  gap:22px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  padding:20px;
  opacity:0; transform:translateY(26px);
  transition:border-color .3s ease, transform .45s cubic-bezier(.2,.9,.3,1), opacity .45s ease, box-shadow .3s ease;
}
.card.is-in{ opacity:1; transform:none; }
.card:hover{ border-color:rgba(94,240,216,.30); box-shadow:0 24px 60px rgba(0,0,0,.45); }

/* farbiger Schein je Partner – Farben kommen aus den Partnerdaten */
.card::after{
  content:""; position:absolute; right:-10%; top:-60%;
  width:420px; height:420px; border-radius:50%;
  background:linear-gradient(130deg, var(--acc-from,#ff9d1c), var(--acc-to,#ffc73a));
  filter:blur(90px); opacity:.28; pointer-events:none; z-index:0;
}

/* Eck-Band */
.card__ribbon{
  position:absolute; left:-34px; top:-16px; z-index:2;
  width:104px; padding:22px 0 5px; text-align:center;
  transform:rotate(-45deg);
  background:linear-gradient(96deg,var(--gold-2),var(--gold));
  font-size:8.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#2a1a00;
}

.card__media{
  position:relative; z-index:1;
  aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line-soft);
  background:#05070d;
  display:grid; place-items:center;
}
/* Standard: Logo füllt den Rahmen und wird dabei beschnitten. */
.card__media img{ width:100%; height:100%; object-fit:cover; }
/* Alternative aus dem Admin: ganzes Logo sichtbar, mit etwas Luft am Rand. */
.card__media img.is-contain{ object-fit:contain; padding:10px; }
.card__logotext{
  font-size:20px; font-weight:900; letter-spacing:.02em; text-align:center; padding:0 10px;
  background:linear-gradient(96deg, var(--acc-from,#ff9d1c), var(--acc-to,#ffc73a));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.card__body{ position:relative; z-index:1; min-width:0; }

.card__top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px; }
.card__name{ font-size:19px; font-weight:800; }

.tag{
  font-size:9.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  padding:3.5px 8px; border-radius:6px; border:1px solid transparent;
}
.tag--live{ background:rgba(255,77,109,.14); color:#ff8ba1; border-color:rgba(255,77,109,.3); }
.tag--live::before{ content:"● "; }

.code{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; cursor:pointer;
  background:rgba(94,240,216,.10); color:var(--teal); border:1px solid rgba(94,240,216,.28);
  transition:background .2s ease, transform .18s ease;
}
.code:hover{ background:rgba(94,240,216,.2); transform:translateY(-1px); }
.code.is-copied{ background:rgba(22,217,127,.22); color:#9dffcf; border-color:rgba(22,217,127,.45); }

.card__bonus{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.card__amount{
  font-size:clamp(24px,3.2vw,32px); font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(96deg,var(--gold-2),var(--gold) 55%,#ffe9a8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.card__amount-suffix{ font-size:17px; font-weight:700; color:#e6ecf6; }

.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:var(--txt-dim);
  border:1px solid var(--line); border-radius:8px;
  background:rgba(255,255,255,.03); padding:5px 10px;
}

.card__meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.top-deal{
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px;
  background:rgba(255,199,58,.13); color:var(--gold); border:1px solid rgba(255,199,58,.3);
}
.stars{ font-size:11.5px; color:var(--gold); letter-spacing:.5px; }
.stars span{ color:rgba(255,255,255,.16); }

.card__hint{
  margin-top:12px; font-size:11.5px; color:#ffd88f;
  border:1px solid rgba(255,199,58,.20); border-radius:var(--r-sm);
  background:rgba(255,199,58,.06); padding:9px 12px;
}

.card__cta{
  position:relative; z-index:1;
  border-left:1px solid var(--line-soft);
  padding-left:22px; display:grid; gap:9px; justify-items:center;
}
.play{
  display:inline-block; width:100%; text-align:center;
  padding:13px 20px; border-radius:12px;
  font-size:14.5px; font-weight:800; color:#04231f;
  background:linear-gradient(100deg,var(--teal),var(--teal-2));
  box-shadow:0 10px 30px rgba(94,240,216,.20), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s ease, box-shadow .25s ease;
}
.play:hover{ transform:translateY(-2px); box-shadow:0 16px 42px rgba(94,240,216,.34); text-decoration:none; }
.details{
  display:inline-block; width:100%; text-align:center;
  padding:9px 16px; border-radius:10px; font-size:12.5px; font-weight:700;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--txt-dim);
}
.details:hover{ background:rgba(255,255,255,.09); color:var(--txt); text-decoration:none; }
.card__cta small{ font-size:10.5px; color:var(--txt-mute); text-align:center; }

/* --- Steps --- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.step{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); padding:18px 16px;
  transition:transform .25s ease, border-color .25s ease;
}
.step:hover{ transform:translateY(-4px); border-color:rgba(255,199,58,.3); }
.step__n{
  display:inline-block; font-size:11px; font-weight:900; letter-spacing:.1em;
  color:var(--gold); margin-bottom:8px;
}
.step h3{ font-size:15px; font-weight:700; margin-bottom:6px; }
.step p{ margin:0; font-size:13px; color:var(--txt-mute); line-height:1.5; }

/* --- Hinweis --- */
.notice{
  margin:48px 0 30px;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:rgba(255,255,255,.022); padding:22px 24px;
}
.notice__tag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--txt-mute); margin-bottom:11px;
}
.notice p{ margin:0 0 10px; font-size:12.5px; line-height:1.7; color:var(--txt-mute); }
.notice__resp{ margin-bottom:0 !important; color:var(--txt-dim) !important; }

/* --- Footer --- */
.footer{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:34px 20px 40px; font-size:12px; color:var(--txt-mute);
  border-top:1px solid var(--line-soft); margin-top:20px;
}
.footer__legal{
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
}
/* Social-Icons in der Fußzeile etwas größer und mittig */
.socials--foot{ justify-content:center; gap:12px; }
.socials--foot .soc{ width:42px; height:42px; }
.socials--foot .soc svg{ width:19px; height:19px; }
.footer a{ color:var(--txt-mute); }
.footer a:hover{ color:var(--teal); }
.footer__sep{ opacity:.5; }
.footer__18{
  border:1px solid rgba(255,77,109,.35); color:#ff8ba1;
  border-radius:999px; padding:1px 8px; font-weight:700; font-size:11px;
}

/* --- Toast --- */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:1200;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  padding:12px 20px; border-radius:12px;
  background:rgba(10,14,24,.95); border:1px solid rgba(94,240,216,.35);
  color:var(--teal); font-size:13.5px; font-weight:600;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  transition:opacity .28s ease, transform .28s ease;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width:960px){
  .hero{ padding-top:34px; }
  .card{ grid-template-columns:150px 1fr; }
  .card__cta{
    grid-column:1/-1; border-left:0; padding-left:0;
    padding-top:16px; border-top:1px solid var(--line-soft); justify-items:stretch;
  }
  .steps{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px){
  .wrap{ width:calc(100% - 32px); }
  .agegate{ padding:16px 12px; }
  .agegate__box{ padding:26px 20px 20px; border-radius:20px; }
  .agegate__head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .agegate__info{ grid-template-columns:1fr; gap:14px; }
  .card{ grid-template-columns:1fr; }
  .card__media{ aspect-ratio:16/7; }
  .card__ribbon{ display:none; }
  .stats{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .section{ padding-top:34px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .card{ opacity:1; transform:none; }
}

/* ==================================================================
   SEITENLEISTE + TWITCH-LOGIN
   ================================================================== */

:root{ --sb-w: 244px; }

.site{ position:relative; }
.site__main{ display:flex; flex-direction:column; flex:1; min-width:0; }

.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:var(--sb-w); z-index:60;
  display:flex; flex-direction:column; gap:18px;
  padding:22px 16px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), #080b13;
  overflow-y:auto;
}

.sidebar__brand{ display:flex; align-items:center; gap:11px; }
.sidebar__mark{
  position:relative; width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 28%, #1a2131, #06090f 72%);
  border:1px solid rgba(255,255,255,.10);
}
.sidebar__mark .brand__txt{ font-size:7.5px; }
.sidebar__name{
  font-size:16px; font-weight:800;
  background:linear-gradient(96deg,var(--gold-2),var(--gold) 45%,var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- Twitch-Panel --- */
.tw{
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  background:rgba(145,70,255,.07); padding:14px;
}
.tw__loading{ font-size:12px; color:var(--txt-mute); text-align:center; padding:6px 0; }

.tw__k{
  display:block; font-size:9.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#c4a7ff; margin-bottom:9px;
}
.tw__text{ margin:0 0 12px; font-size:12px; color:var(--txt-mute); line-height:1.5; }

.tw__btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  padding:11px 14px; border-radius:10px; border:1px solid transparent;
  background:linear-gradient(100deg,#9146ff,#7b32e0); color:#fff;
  box-shadow:0 8px 24px rgba(145,70,255,.28);
  transition:transform .16s ease, box-shadow .22s ease;
}
.tw__btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(145,70,255,.42); text-decoration:none; }
.tw__btn svg{ width:16px; height:16px; fill:currentColor; }

.tw__user{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.tw__avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  border:2px solid #9146ff; object-fit:cover; background:#12151f;
}
.tw__meta{ min-width:0; }
.tw__name{
  display:block; font-size:13.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tw__login{ display:block; font-size:11px; color:var(--txt-mute); }
.tw__out{
  width:100%; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:8px 12px; border-radius:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--txt-dim);
  transition:background .2s ease, color .2s ease;
}
.tw__out:hover{ background:rgba(255,77,109,.1); border-color:rgba(255,77,109,.35); color:#ffd3db; }

.tw__note{
  margin:0; font-size:11px; line-height:1.5; color:#ffd88f;
  border:1px solid rgba(255,199,58,.25); background:rgba(255,199,58,.07);
  border-radius:9px; padding:8px 10px;
}

/* --- Navigation --- */
.sbnav{ display:grid; gap:4px; }
.sbnav__a{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:600; color:var(--txt-dim);
  padding:9px 11px; border-radius:10px;
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.sbnav__a:hover{ background:rgba(255,255,255,.05); color:var(--txt); text-decoration:none; }
.sbnav__a.is-on{ background:rgba(94,240,216,.1); border-color:rgba(94,240,216,.3); color:var(--teal); }
.sbnav__i{ font-size:8px; opacity:.7; }

.sbsocial{ margin-top:auto; }
.sbsocial__k{
  display:block; font-size:9.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-mute); margin-bottom:9px;
}
.sbsocial__row{ display:flex; gap:8px; }

.sidebar__foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:11.5px; color:var(--txt-mute);
}
.sidebar__foot a{ color:var(--txt-mute); }
.sidebar__foot a:hover{ color:var(--teal); }
.sidebar__18{
  border:1px solid rgba(255,77,109,.35); color:#ff8ba1;
  border-radius:999px; padding:1px 8px; font-weight:700; font-size:10.5px;
}

/* --- Mobile-Schalter --- */
.sb-toggle{
  position:fixed; left:14px; top:52px; z-index:80;
  display:none; align-items:center; gap:8px;
  font-family:inherit; font-size:12px; font-weight:700; color:var(--txt);
  padding:9px 13px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line); background:rgba(10,14,24,.92);
  backdrop-filter:blur(8px);
}
.sb-toggle__b{ display:flex; flex-direction:column; gap:3px; flex:none; }
.sb-toggle__b span{ display:block; width:16px; height:2px; border-radius:2px; background:var(--teal); }
.sb-toggle em{ font-style:normal; margin-left:4px; }
.sb-backdrop{
  position:fixed; inset:0; z-index:55;
  background:rgba(4,6,11,.65); backdrop-filter:blur(2px);
}

@media (min-width:961px){
  .site__main{ margin-left:var(--sb-w); }
  .sb-backdrop{ display:none !important; }
}

@media (max-width:960px){
  .sb-toggle{ display:flex; }
  .sidebar{
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.9,.3,1);
    box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  .sidebar.is-open{ transform:none; }
  .brand{ padding-top:52px; }
}

/* Admin-Knopf in der Seitenleiste (nur für freigeschaltete Twitch-Konten) */
.tw__admin{
  display:block; width:100%; text-align:center;
  font-size:13px; font-weight:800; letter-spacing:.02em;
  padding:10px 14px; border-radius:10px; margin-bottom:8px;
  background:linear-gradient(100deg,var(--gold-2),var(--gold)); color:#2a1a00;
  box-shadow:0 8px 22px rgba(255,157,28,.24);
  transition:transform .16s ease, box-shadow .22s ease;
}
.tw__admin:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(255,157,28,.38); text-decoration:none; }

/* ==================================================================
   RUBBELLOSE
   ================================================================== */

.scr{ padding:52px 0 20px; }

.scr__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:30px;
}
.scr__kicker{
  display:block; font-size:11px; font-weight:800; letter-spacing:.26em;
  text-transform:uppercase; color:var(--teal); margin-bottom:9px;
}
.scr__title{
  font-size:clamp(28px,4vw,42px); font-weight:900; margin-bottom:12px;
  background:linear-gradient(96deg,var(--gold-2),var(--gold) 50%,var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.scr__sub{ margin:0; max-width:620px; font-size:14px; color:var(--txt-mute); line-height:1.6; }

.scr__points{
  border:1px solid rgba(255,199,58,.3); border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,199,58,.12), rgba(255,157,28,.04));
  padding:16px 26px; text-align:center; min-width:170px;
}
.scr__points-k{
  display:block; font-size:10px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt-mute); margin-bottom:4px;
}
.scr__points strong{
  font-size:32px; font-weight:900; color:var(--gold);
  font-variant-numeric:tabular-nums;
}

.scr__gate{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:rgba(145,70,255,.07); padding:34px 26px; text-align:center; margin-bottom:26px;
}
.scr__gate-i{ font-size:32px; display:block; margin-bottom:12px; }
.scr__gate h2{ font-size:19px; font-weight:800; margin-bottom:8px; }
.scr__gate p{ margin:0 auto 18px; font-size:14px; color:var(--txt-mute); max-width:420px; }
.scr__gate-btn{ display:inline-flex !important; width:auto !important; padding:12px 24px; }
.scr__err{ color:#ff8ba1; font-size:14px; }

/* --- Lose --- */
.tickets{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px; }

.ticket{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  padding:20px; display:flex; flex-direction:column; gap:10px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ticket::after{
  content:""; position:absolute; right:-30%; top:-70%;
  width:320px; height:320px; border-radius:50%;
  filter:blur(80px); opacity:.3; pointer-events:none;
}
.ticket--daily::after  { background:#16d97f; }
.ticket--weekly::after { background:#3c8cff; }
.ticket--monthly::after{ background:#ff9d1c; }
.ticket.is-free{ border-color:rgba(94,240,216,.35); }
.ticket.is-free:hover{ transform:translateY(-4px); box-shadow:0 24px 55px rgba(0,0,0,.45); }

.ticket__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; z-index:1; }
.ticket__badge{
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--txt-dim);
}
.ticket__live{
  font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green);
}
.ticket__live::before{ content:"\25CF\00a0"; }

.ticket__name{ font-size:17px; font-weight:800; position:relative; z-index:1; }
.ticket__max{ margin:0; font-size:13px; color:var(--txt-mute); position:relative; z-index:1; }
.ticket__max strong{ color:var(--gold); font-size:15px; }

.ticket__foot{ margin-top:auto; padding-top:8px; position:relative; z-index:1; }
.ticket__btn{
  width:100%; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
  padding:12px 18px; border-radius:11px; border:1px solid transparent;
  background:linear-gradient(100deg,var(--teal),var(--teal-2)); color:#04231f;
  box-shadow:0 10px 26px rgba(94,240,216,.22);
  transition:transform .16s ease, box-shadow .22s ease;
}
.ticket__btn:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(94,240,216,.36); }
.ticket__wait{ display:block; font-size:12.5px; color:var(--txt-mute); text-align:center; padding:12px 0; }

/* --- Verlauf & Bestenliste --- */
.scr__bottom{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.scr__box{
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:rgba(255,255,255,.022); padding:18px 20px;
}
.scr__box-k{
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-mute); margin-bottom:14px;
}

.hist, .board{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.hist__i{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  font-size:12.5px; color:var(--txt-dim);
  border-bottom:1px solid var(--line-soft); padding-bottom:8px;
}
.hist__i:last-child{ border-bottom:0; padding-bottom:0; }
.hist__d{ font-size:11px; color:var(--txt-mute); }
.hist__p{ font-weight:800; color:var(--txt-mute); font-variant-numeric:tabular-nums; }
.hist__p.is-win{ color:var(--green); }
.hist__leer, .board__leer{ font-size:12.5px; color:var(--txt-mute); }

.board__i{
  display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:center;
  font-size:12.5px; color:var(--txt-dim);
}
.board__n{ font-weight:800; color:var(--txt-mute); }
.board__i--top .board__n{ color:var(--gold); }
.board__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board__p{ font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }

/* ==================================================================
   RUBBEL-OVERLAY
   ================================================================== */

.rub{
  position:fixed; inset:0; z-index:1100;
  display:grid; place-items:center; padding:20px 16px; overflow-y:auto;
  background:rgba(4,6,11,.86); backdrop-filter:blur(6px);
}
.rub__box{
  position:relative; width:min(430px,100%);
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), #0b0f18;
  box-shadow:var(--shadow); padding:28px 26px 24px; text-align:center;
  animation:agIn .4s cubic-bezier(.2,.9,.3,1) both;
}
.rub__x{
  position:absolute; right:14px; top:12px;
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  color:var(--txt-dim); font-size:19px; line-height:1;
}
.rub__x:hover{ background:rgba(255,255,255,.1); color:var(--txt); }

.rub__kicker{
  display:block; font-size:10px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--teal); margin-bottom:7px;
}
.rub__title{ font-size:23px; font-weight:800; margin-bottom:7px; }
.rub__hint{ margin:0 0 18px; font-size:12.5px; color:var(--txt-mute); }

.rub__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px;
  padding:12px; border-radius:var(--r-md);
  background:radial-gradient(circle at 50% 0%, rgba(255,199,58,.10), transparent 70%), rgba(0,0,0,.3);
  border:1px solid var(--line-soft);
}

.rubcell{
  position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden;
  background:#141a26; border:1px solid var(--line-soft);
  display:grid; place-items:center; cursor:crosshair;
  touch-action:none; user-select:none;
}
.rubcell__s{ font-size:30px; line-height:1; }
.rubcell__c{
  position:absolute; inset:0; width:100%; height:100%;
  transition:opacity .3s ease;
}
.rubcell.is-open .rubcell__c{ opacity:0; pointer-events:none; }
.rubcell.is-open{ border-color:rgba(94,240,216,.3); }

.rub__result{
  margin-top:18px; padding:16px; border-radius:var(--r-md);
  border:1px solid var(--line);
  animation:agIn .35s ease both;
}
.rub__result.is-win{ border-color:rgba(22,217,127,.4); background:rgba(22,217,127,.08); }
.rub__result.is-loss{ background:rgba(255,255,255,.03); }
.rub__result-k{
  display:block; font-size:10px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--txt-mute); margin-bottom:5px;
}
.rub__result-p{ display:block; font-size:27px; font-weight:900; margin-bottom:5px; }
.rub__result.is-win .rub__result-p{ color:var(--green); }
.rub__result-t{ display:block; font-size:12px; color:var(--txt-mute); }

.rub__actions{ margin-top:18px; }
.rub__actions .abtn{
  display:inline-block; width:100%; font-family:inherit; font-size:13.5px; font-weight:700;
  padding:12px 18px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--txt);
}
.rub__actions .abtn:hover{ background:rgba(255,255,255,.1); }
.rub__actions .abtn--primary{
  background:linear-gradient(100deg,var(--teal),var(--teal-2));
  border-color:transparent; color:#04231f;
}

/* Punkte in der Seitenleiste */
.tw__pts{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px; padding:8px 11px; border-radius:9px;
  border:1px solid rgba(255,199,58,.25); background:rgba(255,199,58,.08);
  font-size:11.5px; color:var(--txt-mute);
}
.tw__pts strong{ font-size:14px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }

@media (max-width:900px){
  .tickets{ grid-template-columns:1fr; }
  .scr__bottom{ grid-template-columns:1fr; }
  .scr__points{ min-width:0; flex:1; }
}

/* ==================================================================
   SPIELE
   ================================================================== */

.gm{ padding:52px 0 20px; }
.gm__hint{ margin:0 0 14px; font-size:12.5px; color:var(--txt-mute); }

/* --- Auswahl --- */
.gm__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px; }

.gcard{
  position:relative; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  padding:20px 18px; display:flex; flex-direction:column; gap:8px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.gcard::after{
  content:""; position:absolute; right:-40%; top:-70%;
  width:280px; height:280px; border-radius:50%; filter:blur(75px); opacity:.28; pointer-events:none;
}
.gcard--keno::after     { background:#16d97f; }
.gcard--plinko::after   { background:#3c8cff; }
.gcard--blackjack::after{ background:#ff4d6d; }
.gcard--roulette::after { background:#ff9d1c; }
.gcard:hover{ transform:translateY(-4px); border-color:rgba(94,240,216,.35); box-shadow:0 22px 50px rgba(0,0,0,.45); }

.gcard__i{ font-size:28px; line-height:1; position:relative; z-index:1; }
.gcard__n{ font-size:18px; font-weight:800; position:relative; z-index:1; }
.gcard__t{ margin:0; font-size:12.5px; color:var(--txt-mute); line-height:1.5; position:relative; z-index:1; }
.gcard__rtp{ font-size:11px; color:var(--txt-mute); position:relative; z-index:1; }
.gcard__go{
  margin-top:auto; padding-top:10px; font-size:12.5px; font-weight:800;
  color:var(--teal); position:relative; z-index:1;
}
.gcard__go::after{ content:" →"; }

/* --- geöffnetes Spiel --- */
.gm__panel{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  padding:22px; margin-bottom:26px;
}
.gm__panel-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.gm__panel-title{ font-size:20px; font-weight:800; }
.gm__panel-rtp{ margin-left:auto; font-size:11px; color:var(--txt-mute); }
.gm__back{
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  padding:8px 14px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--txt-dim);
}
.gm__back:hover{ background:rgba(255,255,255,.1); color:var(--txt); }
.gm__hist{ margin-top:6px; }

/* --- Einsatzleiste --- */
.bet{
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line-soft); margin-top:18px; padding-top:18px;
}
.bet__f{ display:block; }
.bet__f span{
  display:block; font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-mute); margin-bottom:6px;
}
.bet__f input{
  width:130px; font-family:inherit; font-size:15px; font-weight:700; color:var(--txt);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px;
}
.bet__f input:focus{ outline:none; border-color:rgba(94,240,216,.5); }
.bet__q{ display:flex; gap:6px; }
.bet__q button{
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
  padding:10px 12px; border-radius:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--txt-dim);
}
.bet__q button:hover{ background:rgba(255,255,255,.09); color:var(--txt); }
.bet__go{
  margin-left:auto; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
  padding:12px 26px; border-radius:11px; border:1px solid transparent;
  background:linear-gradient(100deg,var(--teal),var(--teal-2)); color:#04231f;
  box-shadow:0 10px 26px rgba(94,240,216,.22);
  transition:transform .16s ease, box-shadow .22s ease;
}
.bet__go:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(94,240,216,.34); }
.bet__go:disabled{ opacity:.45; pointer-events:none; }

/* --- Ergebnis --- */
.gres{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-md);
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.gres.is-win{ border-color:rgba(22,217,127,.4); background:rgba(22,217,127,.08); }
.gres.is-part{ border-color:rgba(255,199,58,.35); background:rgba(255,199,58,.07); }
.gres__p{ font-size:21px; font-weight:900; }
.gres.is-win .gres__p{ color:var(--green); }
.gres.is-part .gres__p{ color:var(--gold); }
.gres.is-loss .gres__p{ color:var(--txt-dim); }
.gres__t{ font-size:12.5px; color:var(--txt-mute); }

/* --- Keno --- */
.kn__grid{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-bottom:12px; }
.kn{
  aspect-ratio:1; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  border-radius:8px; border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03); color:var(--txt-dim);
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.kn:hover{ background:rgba(255,255,255,.08); color:var(--txt); }
.kn.is-on{ background:rgba(94,240,216,.18); border-color:rgba(94,240,216,.5); color:var(--teal); }
.kn.is-draw{ background:rgba(255,255,255,.12); border-color:var(--line); color:var(--txt); }
.kn.is-hit{
  background:linear-gradient(140deg,var(--green),#0fae64); border-color:transparent; color:#04231f;
  transform:scale(1.06);
}
.kn__info{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; color:var(--txt-mute); }
.kn__clear{
  font-family:inherit; font-size:11.5px; cursor:pointer; color:var(--txt-mute);
  background:none; border:0; text-decoration:underline;
}
.kn__clear:hover{ color:var(--teal); }
.kn__pay{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  background:rgba(255,255,255,.02); padding:10px 12px;
}
.kn__pay-k{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-mute); margin-right:6px; }
.kn__pay-i{ font-size:11.5px; color:var(--txt-dim); background:rgba(255,255,255,.04); border-radius:6px; padding:3px 8px; }
.kn__pay-i b{ color:var(--gold); font-weight:700; }

/* --- Blackjack --- */
.bj__k b{ color:var(--gold); font-size:13px; letter-spacing:0; }

.bj__actions .abtn{
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  padding:11px 20px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--txt);
}
.bj__actions .abtn:hover{ background:rgba(255,255,255,.1); }
.bj__actions .abtn:disabled{ opacity:.4; pointer-events:none; }

/* --- Roulette --- */


.rl__n--red{ background:rgba(214,40,57,.75); }
.rl__n--black{ background:rgba(20,26,38,.9); border-color:var(--line); }
.rl__n--green{ background:rgba(22,217,127,.7); color:#04231f; }

@media (max-width:900px){
  .gm__grid{ grid-template-columns:repeat(2,1fr); }
  .kn__grid{ grid-template-columns:repeat(8,1fr); }
  .bet__go{ margin-left:0; width:100%; }
}
@media (max-width:560px){
  .gm__grid{ grid-template-columns:1fr; }
  .kn__grid{ grid-template-columns:repeat(5,1fr); }
  .pl__slots{ grid-template-columns:repeat(13,1fr); }
  .pl__slot{ font-size:7.5px; }
}

/* ==================================================================
   SPIELE – Animationen, Roulettetisch, Plinko-Brett, Karten
   ================================================================== */

/* Tonschalter */
.gm__sound{
  display:block; margin:8px auto 0; width:34px; height:30px;
  font-size:15px; line-height:1; cursor:pointer;
  border:1px solid var(--line); border-radius:9px;
  background:rgba(255,255,255,.05);
}
.gm__sound:hover{ background:rgba(255,255,255,.1); }
.gm__sound.is-off{ opacity:.45; }

/* Ergebnis-Einblendung */
.gres.is-pop{ animation:gresPop .42s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes gresPop{
  from{ opacity:0; transform:translateY(10px) scale(.96); }
  to  { opacity:1; transform:none; }
}

/* Keno: Treffer aufpoppen */
.kn.is-hit{ animation:knHit .4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes knHit{
  0%{ transform:scale(1); }
  55%{ transform:scale(1.28); }
  100%{ transform:scale(1.06); }
}
.kn.is-draw{ animation:knDraw .3s ease both; }
@keyframes knDraw{
  from{ transform:scale(.86); opacity:.5; }
  to  { transform:none; opacity:1; }
}

/* ==================================================================
   PLINKO
   ================================================================== */
.pl__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }

/* Risikoauswahl */
.pl__risk{ display:flex; gap:7px; }
.pl__risk button{
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  padding:9px 17px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--txt-dim);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .16s ease;
}
.pl__risk button:hover{ background:rgba(255,255,255,.09); color:var(--txt); transform:translateY(-1px); }
.pl__risk button.is-on{
  background:linear-gradient(100deg, rgba(94,240,216,.18), rgba(42,211,187,.12));
  border-color:rgba(94,240,216,.5); color:var(--teal);
  box-shadow:0 6px 18px rgba(94,240,216,.16);
}
.pl__balls{ display:block; }
.pl__balls span{
  display:block; font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-mute); margin-bottom:6px;
}
.pl__balls input{
  width:80px; font-family:inherit; font-size:15px; font-weight:700; color:var(--txt);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px;
}
.pl__balls input:focus{ outline:none; border-color:rgba(94,240,216,.5); }

.pl__wrap{
  display:flex; justify-content:center; margin-bottom:8px;
  border-radius:var(--r-md);
  background:radial-gradient(circle at 50% 0%, rgba(60,140,255,.12), transparent 68%);
}
.pl__cv{ display:block; }

/* minmax(0,1fr) ist wichtig: mit reinem 1fr werden Spalten mit längerer
   Beschriftung breiter und die Fächer stehen nicht mehr unter dem Brett. */
.pl__slots{ display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); gap:2px; max-width:460px; margin:0 auto; }
.pl__slot{
  font-size:9px; font-weight:800; text-align:center; padding:7px 0; border-radius:5px;
  overflow:hidden; white-space:nowrap;
  background:rgba(255,255,255,.05); color:var(--txt-dim);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.pl__slot.is-hot{ background:rgba(255,157,28,.18); color:var(--gold); }
.pl__slot.is-cold{ background:rgba(255,255,255,.03); color:var(--txt-mute); }
.pl__slot.is-land{
  background:var(--teal); color:#04231f;
  animation:plLand .55s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes plLand{
  0%{ transform:translateY(-6px) scale(1); }
  50%{ transform:translateY(0) scale(1.25); }
  100%{ transform:none; }
}
.pl__sum{ font-size:12px; color:var(--txt-mute); align-self:center; }

/* ==================================================================
   BLACKJACK – Kartenanimation
   ================================================================== */
.pk.is-deal{ animation:pkDeal .42s cubic-bezier(.2,.9,.3,1) both; }
@keyframes pkDeal{
  0%{ opacity:0; transform:translate(90px,-120px) rotate(22deg) scale(.85); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:none; }
}
.pk--back.is-deal{ animation:pkFlip .5s cubic-bezier(.3,.9,.3,1) both; }
@keyframes pkFlip{
  0%{ opacity:0; transform:translate(90px,-120px) rotateY(180deg) scale(.85); }
  100%{ opacity:1; transform:rotateY(0deg); }
}

/* ==================================================================
   ROULETTE – Tisch
   ================================================================== */
.rt__wheelbox{
  position:relative; overflow:hidden;
  height:62px; border-radius:var(--r-md); margin-bottom:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2));
  -webkit-mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.rt__strip{ display:flex; height:100%; align-items:center; will-change:transform; }
.rt__sn{
  flex:0 0 46px; width:46px; height:46px; margin:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:#fff;
  border-right:1px solid rgba(0,0,0,.35);
}
.rt__marker{
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:var(--gold); box-shadow:0 0 12px rgba(255,199,58,.9);
  transform:translateX(-50%);
}

/* Jetons */
.rt__chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.rt__chips-k{
  font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-mute); margin-right:2px;
}
.chip{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:800; color:#fff;
  border:2px dashed rgba(255,255,255,.5);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:transform .16s ease, box-shadow .2s ease;
}
.chip:hover{ transform:translateY(-3px); }
.chip.is-on{ transform:translateY(-4px) scale(1.08); box-shadow:0 0 0 2px var(--teal), 0 8px 20px rgba(0,0,0,.5); }
.chip--10{ background:linear-gradient(140deg,#4a5568,#2d3748); }
.chip--50{ background:linear-gradient(140deg,#3182ce,#1e4e8c); }
.chip--100{ background:linear-gradient(140deg,#16d97f,#0b8a4f); color:#04231f; }
.chip--500{ background:linear-gradient(140deg,#ff9d1c,#c26a00); color:#2a1a00; }
.chip--1000{ background:linear-gradient(140deg,#d62839,#8b1420); }

/* Tisch */
.rt{
  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-areas:"zero grid" "dozens dozens" "outside outside";
  gap:5px;
  padding:12px;
  border-radius:var(--r-md);
  border:1px solid rgba(22,217,127,.2);
  background:
    radial-gradient(circle at 50% 0%, rgba(22,217,127,.08), transparent 70%),
    linear-gradient(160deg, #0d2a1e, #08170f);
  margin-bottom:14px;
}
.rt__zero{ grid-area:zero; border-radius:7px 0 0 7px; }
.rt__grid{
  grid-area:grid;
  display:grid; grid-template-columns:repeat(12,1fr) 40px; gap:3px;
}
.rt__dozens{ grid-area:dozens; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:2px; }
.rt__outside{ grid-area:outside; display:grid; grid-template-columns:repeat(6,1fr); gap:3px; }

.rt__n, .rt__zero, .rt__col, .rt__out{
  position:relative;
  font-family:inherit; font-weight:700; cursor:pointer; color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:5px;
  transition:filter .15s ease, transform .15s ease;
}
.rt__n{ aspect-ratio:1; font-size:12px; }
.rt__zero{ font-size:15px; }
.rt__col, .rt__out{ font-size:11px; padding:9px 4px; background:rgba(255,255,255,.06); }
.rt__n--red{ background:linear-gradient(160deg,#d62839,#9c1c29); }
.rt__n--black{ background:linear-gradient(160deg,#1a202c,#0d1117); }
.rt__n--green{ background:linear-gradient(160deg,#16d97f,#0b8a4f); color:#04231f; }
.rt__out--red{ background:linear-gradient(160deg,#d62839,#9c1c29); }
.rt__out--black{ background:linear-gradient(160deg,#1a202c,#0d1117); }

.rt [data-type]:hover{ filter:brightness(1.35); transform:translateY(-1px); }
.rt [data-type].has-bet{ box-shadow:inset 0 0 0 2px var(--gold); }
.rt [data-type].is-hit{ animation:rtHit .6s ease 3; }
@keyframes rtHit{
  0%,100%{ box-shadow:inset 0 0 0 2px var(--gold); }
  50%{ box-shadow:inset 0 0 0 3px var(--teal), 0 0 18px rgba(94,240,216,.7); }
}

/* Jeton auf dem Feld */
.rt__chipmark{
  position:absolute; right:-4px; bottom:-4px; z-index:2;
  min-width:20px; height:20px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:800; color:#2a1a00;
  border-radius:50px; border:1px solid rgba(0,0,0,.4);
  background:linear-gradient(140deg,var(--gold),var(--gold-2));
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  animation:chipDrop .3s cubic-bezier(.2,1.4,.4,1) both;
  pointer-events:none;
}
@keyframes chipDrop{
  from{ opacity:0; transform:translateY(-14px) scale(.7); }
  to  { opacity:1; transform:none; }
}

.rt__bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rt__sum{ font-size:12.5px; color:var(--txt-mute); }
.rt__sum b{ font-size:16px; color:var(--gold); font-variant-numeric:tabular-nums; }
.rt__bar .abtn{
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  padding:9px 14px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--txt-dim);
}
.rt__bar .abtn:hover{ background:rgba(255,255,255,.1); color:var(--txt); }
.rt__bar .bet__go{ margin-left:auto; }

@media (max-width:760px){
  .rt{ grid-template-columns:36px 1fr; padding:8px; }
  .rt__grid{ grid-template-columns:repeat(12,1fr) 30px; gap:2px; }
  .rt__n{ font-size:9px; }
  .rt__outside{ grid-template-columns:repeat(3,1fr); }
  .rt__out, .rt__col{ font-size:9.5px; padding:7px 2px; }
  .rt__chipmark{ min-width:16px; height:16px; font-size:8px; }
  .chip{ width:38px; height:38px; font-size:10px; }
  .rt__bar .bet__go{ margin-left:0; width:100%; }
}

/* ==================================================================
   BLACKJACK – Tisch, Jetons, Spielkarten
   ================================================================== */

.bjt{
  position:relative; overflow:hidden;
  border-radius:22px; padding:20px 18px 16px;
  border:1px solid rgba(22,217,127,.22);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(22,217,127,.12), transparent 65%),
    linear-gradient(165deg, #0f3323, #08190f 70%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.35);
  margin-bottom:14px;
}
/* angedeutete Tischkante */
.bjt::before{
  content:""; position:absolute; left:-6%; right:-6%; top:-46%;
  height:150%; border-radius:50%;
  border:2px solid rgba(255,255,255,.06);
  pointer-events:none;
}

.bjt__shoe{
  position:absolute; right:14px; top:12px;
  display:flex; flex-direction:column; gap:2px;
  padding:6px 5px; border-radius:5px;
  background:linear-gradient(150deg,#2a3348,#161c28);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.bjt__shoe span{ display:block; width:22px; height:3px; border-radius:2px; background:rgba(255,255,255,.35); }

.bjt__k{
  display:block; font-size:9.5px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px;
}
.bjt__k b{ color:var(--gold); font-size:13px; letter-spacing:0; }

.bjt__dealer, .bjt__player{ position:relative; z-index:1; min-height:104px; }
.bj__cards{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; min-height:86px; }

.bjt__arc{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin:6px 0 10px; padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.bjt__rule{
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,199,58,.75);
}
.bjt__rule--small{ font-size:9.5px; letter-spacing:.1em; color:rgba(255,255,255,.32); font-weight:600; }

/* Setzfelder */
.bjt__spots{
  position:relative; z-index:1;
  display:flex; justify-content:center; align-items:flex-end; gap:14px;
  margin-top:12px; flex-wrap:wrap;
}
.spot{
  position:relative; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border-radius:50%; font-family:inherit; color:rgba(255,255,255,.62);
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.06), transparent 70%);
  transition:transform .16s ease, border-color .2s ease, color .2s ease;
}
.spot--main{ width:118px; height:118px; border:2px solid rgba(255,199,58,.45); }
.spot--side{ width:88px; height:88px; border:2px dashed rgba(255,255,255,.22); }
.spot:hover{ transform:translateY(-3px); border-color:var(--teal); color:#fff; }
.spot.has-bet{ border-style:solid; border-color:var(--gold); }
.spot__n{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.spot--main .spot__n{ font-size:11px; }
.spot__q{ font-size:9.5px; opacity:.65; }
.spot__chip{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  min-width:34px; height:34px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#2a1a00;
  border-radius:50px; border:2px dashed rgba(0,0,0,.35);
  background:linear-gradient(140deg,var(--gold),var(--gold-2));
  box-shadow:0 4px 12px rgba(0,0,0,.55);
}
.spot__chip:empty{ display:none; }
.spot.has-bet .spot__n, .spot.has-bet .spot__q{ opacity:.25; }

/* Jetonablage */
.bjt__rack{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;
}
.bjt__clear{
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
  padding:8px 13px; border-radius:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--txt-dim);
}
.bjt__clear:hover{ background:rgba(255,255,255,.1); color:var(--txt); }
.bjt__sum{ margin-left:auto; font-size:12.5px; color:var(--txt-mute); }
.bjt__sum b{ font-size:16px; color:var(--gold); font-variant-numeric:tabular-nums; }

.bet--bj{ border-top:0; margin-top:0; padding-top:0; }
.bet--bj .bet__go{ margin-left:0; width:100%; }

/* Nebenwetten-Ergebnis */
.bjside{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.bjside__i{
  font-size:11.5px; color:var(--txt-mute);
  border:1px solid var(--line); border-radius:9px;
  background:rgba(255,255,255,.03); padding:7px 11px;
}
.bjside__i b{ color:var(--txt-dim); }
.bjside__i.is-win{
  border-color:rgba(22,217,127,.45); background:rgba(22,217,127,.1); color:#9dffcf;
}
.bjside__i.is-win b{ color:var(--green); }

/* Auszahlungstafel */
.bjpay{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.bjpay__b{
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  background:rgba(255,255,255,.02); padding:12px 14px;
}
.bjpay__k{
  display:block; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-dim); margin-bottom:8px;
}
.bjpay__k small{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--txt-mute); }
.bjpay__r{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--txt-mute); padding:2px 0; }
.bjpay__r b{ font-weight:600; }
.bjpay__r i{ font-style:normal; color:var(--gold); font-weight:700; }
.bjpay__note{ grid-column:1/-1; margin:0; font-size:11px; color:var(--txt-mute); }

/* ---------- Spielkarten ---------- */
.pk{
  position:relative;
  width:62px; height:88px; border-radius:7px; flex:0 0 auto;
  background:linear-gradient(160deg,#ffffff,#eef1f6);
  color:#141a24;
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.14);
  display:block; transform-origin:50% 50%;
}
.pk--rot{ color:#d62839; }
.pk__e{
  position:absolute; font-style:normal; line-height:1;
  display:flex; flex-direction:column; align-items:center;
  font-size:14px; font-weight:800;
}
.pk__e b{ font-size:12px; font-weight:700; }
.pk__e--tl{ left:5px; top:5px; }
.pk__e--br{ right:5px; bottom:5px; transform:rotate(180deg); }
.pk__m{
  position:absolute; inset:0; font-style:normal;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; opacity:.9;
}
.pk--back{
  background:
    repeating-linear-gradient(45deg, #1b2233 0 5px, #2a3348 5px 10px);
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.14);
}
.pk--back::after{
  content:""; position:absolute; inset:6px; border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
}

@media (max-width:760px){
  .bjt{ padding:14px 12px; }
  .spot--main{ width:96px; height:96px; }
  .spot--side{ width:74px; height:74px; }
  .spot__n{ font-size:8.5px; }
  .spot__q{ font-size:8px; }
  .pk{ width:52px; height:74px; }
  .pk__m{ font-size:24px; }
  .bjpay{ grid-template-columns:1fr; }
  .bjt__sum{ margin-left:0; }
}

/* ---------- Blackjack: mehrere Hände nach dem Teilen ---------- */
.bjhands{
  position:relative; z-index:1;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  min-height:110px; margin-bottom:4px;
}
.bjhand{
  border:1px solid transparent; border-radius:12px;
  padding:8px 10px 6px; transition:border-color .2s ease, background .2s ease;
}
.bjhand.is-active{
  border-color:rgba(94,240,216,.55);
  background:rgba(94,240,216,.06);
  box-shadow:0 0 18px rgba(94,240,216,.14);
}
.bjhand.is-bust, .bjhand.is-lose{ opacity:.55; }
.bjhand.is-win, .bjhand.is-dealerbust, .bjhand.is-blackjack{
  border-color:rgba(22,217,127,.5); background:rgba(22,217,127,.08);
}
.bjhand.is-push{ border-color:rgba(255,199,58,.4); background:rgba(255,199,58,.06); }

.bjhand__k{
  display:flex; align-items:center; gap:6px;
  font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:7px;
}
.bjhand__k b{ margin-left:auto; color:var(--gold); font-size:13px; letter-spacing:0; }
.bjhand__res{
  display:block; margin-top:6px; font-size:10.5px; font-weight:700;
  color:var(--txt-dim); text-align:center;
}
.bjhand.is-win .bjhand__res, .bjhand.is-dealerbust .bjhand__res,
.bjhand.is-blackjack .bjhand__res{ color:var(--green); }

.abtn--split{
  border-color:rgba(255,199,58,.4) !important;
  background:rgba(255,199,58,.12) !important; color:var(--gold) !important;
}
.abtn--split:disabled{ opacity:.35; }

/* kleine Jetons */
.chip--1{ background:linear-gradient(140deg,#e8ecf3,#b9c2d0); color:#1a202c; }
.chip--5{ background:linear-gradient(140deg,#c0392b,#7b1e13); }

@media (max-width:760px){
  .bjhands{ gap:8px; }
  .bjhand{ padding:6px 6px 4px; }
  .chip{ width:34px; height:34px; font-size:9.5px; }
}

/* Eigenes Seitenlogo statt Ring + Schriftzug – auch in der Altersprüfung */
.brand__mark.has-logo, .sidebar__mark.has-logo, .agegate__logo.has-logo{
  overflow:hidden; background:#05070d;
}
.brand__img{ width:100%; height:100%; border-radius:50%; }

/* ==================================================================
   SHOP (Hauptseite)
   ================================================================== */

.shop{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }

.sitem{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sitem:hover{ transform:translateY(-4px); border-color:rgba(94,240,216,.32); box-shadow:0 22px 50px rgba(0,0,0,.45); }
.sitem.is-out{ opacity:.55; }

.sitem__media{
  position:relative; aspect-ratio:16/10;
  background:#05070d; border-bottom:1px solid var(--line-soft);
  display:grid; place-items:center; overflow:hidden;
}
.sitem__media img{ width:100%; height:100%; }
.sitem__ph{
  font-size:26px; font-weight:900; letter-spacing:.06em;
  background:linear-gradient(96deg,var(--gold-2),var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sitem__stock{
  position:absolute; right:8px; top:8px;
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 8px; border-radius:6px;
  background:rgba(10,14,24,.85); border:1px solid var(--line); color:var(--txt-dim);
}

.sitem__body{ padding:16px 16px 8px; flex:1; }
.sitem__n{ font-size:16px; font-weight:800; margin-bottom:6px; }
.sitem__d{ margin:0 0 8px; font-size:12.5px; color:var(--txt-mute); line-height:1.55; }
.sitem__limit{ font-size:11px; color:var(--txt-mute); }

.sitem__buy{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px 16px;
}
.sitem__price{
  display:flex; align-items:baseline; gap:5px;
  font-size:20px; font-weight:900; color:var(--gold); font-variant-numeric:tabular-nums;
}
.sitem__price small{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-mute); }
.sitem__btn{
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  padding:10px 18px; border-radius:11px; border:1px solid transparent;
  background:linear-gradient(100deg,var(--teal),var(--teal-2)); color:#04231f;
  box-shadow:0 8px 22px rgba(94,240,216,.2);
  transition:transform .16s ease, box-shadow .22s ease;
}
.sitem__btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 32px rgba(94,240,216,.34); }
.sitem__btn:disabled{
  background:rgba(255,255,255,.05); border-color:var(--line); color:var(--txt-mute);
  box-shadow:none; cursor:not-allowed;
}

.shop__orders{ margin-top:6px; }

@media (max-width:900px){ .shop{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .shop{ grid-template-columns:1fr; } }

/* ==================================================================
   LIVE-CHAT (rechte Spalte)
   ================================================================== */

:root{ --ch-w: 320px; }

.chat{
  position:fixed; right:0; top:0; bottom:0; width:var(--ch-w); z-index:58;
  display:flex; flex-direction:column;
  border-left:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), #080b13;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.2,.9,.3,1);
}
.chat.is-open{ transform:none; }

/* Kopf mit den beiden Reitern */
.chat__head{
  display:flex; align-items:center; gap:8px;
  padding:14px 12px 10px; border-bottom:1px solid var(--line-soft);
}
.chat__tabs{ display:flex; gap:6px; flex:1; min-width:0; }
.chat__tab{
  font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  letter-spacing:.04em; text-transform:uppercase;
  padding:8px 13px; border-radius:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--txt-dim);
  display:inline-flex; align-items:center; gap:6px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.chat__tab:hover{ background:rgba(255,255,255,.08); color:var(--txt); }
.chat__tab.is-on{ background:rgba(94,240,216,.12); border-color:rgba(94,240,216,.4); color:var(--teal); }

.chat__badge{
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:inline-grid; place-items:center;
  font-size:10.5px; font-weight:900; line-height:1;
  background:var(--gold); color:#2a1a00;
}

.chat__close{
  width:30px; height:30px; flex:0 0 auto; border-radius:8px; cursor:pointer;
  font-size:20px; line-height:1; font-family:inherit;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--txt-dim);
}
.chat__close:hover{ background:rgba(255,255,255,.09); color:var(--txt); }

.chat__state{
  margin:0; padding:8px 13px; font-size:11.5px; line-height:1.5;
  background:rgba(255,157,28,.1); color:var(--gold);
  border-bottom:1px solid rgba(255,157,28,.2);
}

/* --- Punkte-Rain (Kopf des Chats) --- */
/* Der Banner traegt seine Farbe als Variable – so muss nur eine
   Zeile je Zustand gesetzt werden, und Rand, Flaeche und Symbol
   ziehen mit. Gruen laeuft, Gelb steht an, Rot ist nichts geplant. */
.rain{
  --rain-ton:22,217,127;                 /* gruen: es laeuft einer */
  --rain-farbe:var(--green);
  border-bottom:1px solid rgba(var(--rain-ton),.34);
  background:linear-gradient(180deg, rgba(var(--rain-ton),.16), rgba(var(--rain-ton),.05));
}
.rain.is-wait{                           /* gelb: einer ist eingeplant */
  --rain-ton:255,199,58;
  --rain-farbe:var(--gold);
}
.rain.is-none{                           /* rot: gar keiner geplant */
  --rain-ton:255,77,109;
  --rain-farbe:var(--red);
}
.rain__row{ display:flex; align-items:center; gap:9px; padding:9px 12px; }
.rain__ico{ font-size:16px; line-height:1; color:var(--rain-farbe); flex:none; }
.rain__txt{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:1px; }
.rain__title{ font-size:12px; font-weight:800; letter-spacing:.2px; color:var(--txt); }
.rain__sub{
  font-size:11px; color:var(--txt-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rain__go{
  flex:none; font-family:inherit; font-size:11.5px; font-weight:800; cursor:pointer;
  padding:7px 13px; border-radius:9px; border:1px solid var(--teal-2);
  background:linear-gradient(180deg, var(--teal), var(--teal-2)); color:#04231e;
}
.rain__go:hover{ filter:brightness(1.08); }
.rain__go:disabled{
  cursor:default; filter:none; color:var(--teal);
  background:rgba(94,240,216,.12); border-color:rgba(94,240,216,.3);
}
.rain__bar{ height:2px; background:rgba(255,255,255,.07); }
.rain__bar i{
  display:block; height:100%; width:100%;
  background:var(--rain-farbe);
  transform-origin:left center;
}

/* Die beiden Bereiche fuellen den Rest */
.chat__pane{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* ---------- Wer ist online ---------- */
.chat__online{
  display:flex; align-items:center; gap:7px; width:100%;
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  letter-spacing:.03em; text-transform:uppercase;
  padding:9px 13px; border:0; border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.02); color:var(--txt-mute);
}
.chat__online:hover{ background:rgba(255,255,255,.05); color:var(--txt-dim); }
.chat__caret{ margin-left:auto; font-size:10px; }
.chat__pulse{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--green); box-shadow:0 0 0 0 rgba(22,217,127,.6);
  animation:chPulse 2.4s ease-out infinite;
}
@keyframes chPulse{
  0%  { box-shadow:0 0 0 0 rgba(22,217,127,.55); }
  70% { box-shadow:0 0 0 7px rgba(22,217,127,0); }
  100%{ box-shadow:0 0 0 0 rgba(22,217,127,0); }
}

.chat__users{
  list-style:none; margin:0; padding:8px 10px;
  max-height:150px; overflow-y:auto;
  border-bottom:1px solid var(--line-soft); background:rgba(0,0,0,.2);
  display:flex; flex-wrap:wrap; gap:5px;
}
.chat__user{
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  padding:5px 9px; border-radius:7px;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.05); color:var(--txt-dim);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat__user:hover:not(:disabled){ background:rgba(94,240,216,.12); border-color:rgba(94,240,216,.35); color:var(--teal); }
.chat__user.is-admin{ color:var(--gold); border-color:rgba(255,157,28,.28); }
.chat__user.is-me{ opacity:.6; cursor:default; }

/* ---------- Nachrichtenliste ---------- */
.chat__log{
  list-style:none; margin:0; padding:12px 12px 6px;
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:11px;
  overscroll-behavior:contain;
}

.cmsg{ display:flex; flex-direction:column; gap:3px; }
.cmsg__top{ display:flex; align-items:baseline; gap:6px; }
.cmsg__name{
  font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  padding:0; border:0; background:none; color:var(--teal);
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmsg__name:hover{ text-decoration:underline; }
.cmsg__name.is-admin{ color:var(--gold); }
.cmsg__tag{
  font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 5px; border-radius:4px;
  background:rgba(255,157,28,.16); color:var(--gold);
}
.cmsg__at{ font-size:10.5px; color:var(--txt-mute); margin-left:auto; flex:0 0 auto; }
.cmsg__del{
  font-family:inherit; font-size:14px; line-height:1; cursor:pointer;
  padding:0 3px; border:0; background:none; color:var(--txt-mute); flex:0 0 auto;
}
.cmsg__del:hover{ color:var(--red, #ff6b6b); }
.cmsg__txt{
  margin:0; font-size:13px; line-height:1.55; color:var(--txt-dim);
  word-break:break-word; overflow-wrap:anywhere; white-space:pre-wrap;
}
.cmsg.is-me .cmsg__txt{ color:var(--txt); }

.chat__empty{
  margin:0; padding:22px 16px; text-align:center;
  font-size:12.5px; line-height:1.6; color:var(--txt-mute);
}

/* ---------- Privatnachrichten ---------- */
.chat__dmlist{ flex:1; min-height:0; display:flex; flex-direction:column; }

.chat__search{ padding:10px 12px; border-bottom:1px solid var(--line-soft); }
.chat__search input{
  width:100%; font-family:inherit; font-size:12.5px;
  padding:9px 11px; border-radius:9px;
  border:1px solid var(--line); background:rgba(0,0,0,.28); color:var(--txt);
}
.chat__search input:focus{ outline:none; border-color:rgba(94,240,216,.45); }
.chat__search input::placeholder{ color:var(--txt-mute); }

.chat__threads{
  list-style:none; margin:0; padding:6px;
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:3px;
}
.cthread{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left;
  font-family:inherit; cursor:pointer;
  padding:9px 10px; border-radius:9px;
  border:1px solid transparent; background:none;
}
.cthread:hover{ background:rgba(255,255,255,.05); border-color:var(--line-soft); }
.cthread.is-new{ background:rgba(94,240,216,.07); border-color:rgba(94,240,216,.22); }
.cthread__top{ display:flex; align-items:center; gap:7px; }
.cthread__name{
  font-size:13px; font-weight:800; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cthread__at{ font-size:10.5px; color:var(--txt-mute); margin-left:auto; flex:0 0 auto; }
.cthread__on{
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green); margin-left:auto; flex:0 0 auto;
}
.cthread__n{
  margin-left:auto; flex:0 0 auto;
  min-width:17px; height:17px; padding:0 5px; border-radius:9px;
  display:inline-grid; place-items:center;
  font-size:10px; font-weight:900; background:var(--teal); color:#052a25;
}
.cthread__prev{
  font-size:11.5px; color:var(--txt-mute); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.chat__dmview{ flex:1; min-height:0; display:flex; flex-direction:column; }
.chat__dmhead{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.02);
}
.chat__back{
  width:28px; height:28px; flex:0 0 auto; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:15px; line-height:1;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--txt-dim);
}
.chat__back:hover{ background:rgba(255,255,255,.09); color:var(--txt); }
.chat__dmname{
  font-size:13.5px; font-weight:800; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.chat__log--dm{ gap:7px; }
.cdm{
  max-width:82%; align-self:flex-start;
  padding:8px 11px; border-radius:12px 12px 12px 3px;
  background:rgba(255,255,255,.06); border:1px solid var(--line-soft);
}
.cdm.is-me{
  align-self:flex-end; border-radius:12px 12px 3px 12px;
  background:rgba(94,240,216,.12); border-color:rgba(94,240,216,.26);
}
.cdm__txt{
  margin:0 0 2px; font-size:12.5px; line-height:1.55; color:var(--txt-dim);
  word-break:break-word; overflow-wrap:anywhere; white-space:pre-wrap;
}
.cdm.is-me .cdm__txt{ color:var(--txt); }
.cdm__at{ font-size:10px; color:var(--txt-mute); display:block; text-align:right; }

/* ---------- Eingabe ---------- */
.chat__form{
  display:flex; align-items:flex-end; gap:8px;
  padding:10px 12px; border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.24);
}
.chat__form textarea{
  flex:1; min-width:0; resize:none; overflow-y:auto;
  font-family:inherit; font-size:13px; line-height:1.5;
  padding:10px 12px; border-radius:10px; max-height:110px;
  border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--txt);
}
.chat__form textarea:focus{ outline:none; border-color:rgba(94,240,216,.45); }
.chat__form textarea::placeholder{ color:var(--txt-mute); }
.chat__send{
  width:38px; height:38px; flex:0 0 auto; border-radius:10px; cursor:pointer;
  font-size:15px; line-height:1; border:0;
  background:linear-gradient(100deg, var(--teal-2, #34d3bb), var(--teal)); color:#052a25;
  transition:transform .16s ease, box-shadow .22s ease;
}
.chat__send:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 10px 24px rgba(94,240,216,.3); }
.chat__send:disabled{ opacity:.5; cursor:default; }

.chat__gate{
  padding:14px 13px; border-top:1px solid var(--line-soft);
  background:rgba(0,0,0,.24); text-align:center;
}
.chat__gate p{ margin:0 0 9px; font-size:12px; color:var(--txt-mute); line-height:1.5; }
.chat__login{
  display:block; font-size:12.5px; font-weight:800;
  padding:9px 14px; border-radius:9px;
  background:#9146ff; color:#fff;
}
.chat__login:hover{ background:#7d33e8; text-decoration:none; }

.chat__note{
  margin:0; padding:8px 13px; font-size:11.5px; line-height:1.5;
  background:rgba(255,157,28,.1); color:var(--gold);
  border-top:1px solid rgba(255,157,28,.2);
}

/* ---------- Knopf zum Aufklappen ---------- */
.ch-toggle{
  position:fixed; right:14px; top:52px; z-index:59;
  display:flex; align-items:center; gap:7px;
  font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  padding:9px 14px; border-radius:11px;
  border:1px solid var(--line); color:var(--txt-dim);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), #0b0f18;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .16s ease, color .18s ease, border-color .18s ease;
}
.ch-toggle:hover{ transform:translateY(-1px); color:var(--txt); border-color:rgba(94,240,216,.35); }
.ch-toggle__i{ font-size:14px; line-height:1; }
.ch-toggle__dot{
  position:absolute; top:-4px; right:-4px;
  width:11px; height:11px; border-radius:50%;
  background:var(--gold); border:2px solid #0b0f18;
}

.ch-backdrop{
  position:fixed; inset:0; z-index:57;
  background:rgba(3,5,10,.66); backdrop-filter:blur(2px);
}

/* ---------- Platz schaffen ---------- */

/* Ab hier passt der Chat neben den Inhalt, statt darueber zu liegen. */
@media (min-width:1201px){
  .chat{ transform:none; }
  .chat:not(.is-open){ transform:translateX(100%); }
  body.chat-open .site__main{ margin-right:var(--ch-w); }
  body.chat-open .ch-toggle{ display:none; }
  .ch-backdrop{ display:none !important; }
}

@media (max-width:1200px){
  .chat{ box-shadow:0 0 60px rgba(0,0,0,.6); }
  body.chat-open{ overflow:hidden; }
}

@media (max-width:520px){
  :root{ --ch-w: 100%; }
  .ch-toggle__t{ display:none; }
  .ch-toggle{ padding:10px 12px; }
}

/* ==================================================================
   BONUSHUNT
   ================================================================== */

.bh__stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
  margin-bottom:22px;
}
.bh__stat{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); padding:14px 16px;
  display:flex; flex-direction:column; gap:5px;
}
.bh__stat span{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-mute);
}
.bh__stat strong{ font-size:21px; font-weight:900; color:var(--txt); }

.is-green{ color:var(--green) !important; }
.is-red{ color:var(--red) !important; }
.is-gold{ color:var(--gold) !important; }
.is-teal{ color:var(--teal) !important; }

/* ---------- Liste ---------- */
.bh__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }

.bhrow{
  display:grid; align-items:center; gap:16px; width:100%; text-align:left;
  grid-template-columns:88px minmax(0,1fr) 120px 140px 104px;
  font-family:inherit; cursor:pointer;
  padding:16px 18px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--panel);
  transition:transform .16s ease, border-color .2s ease, background .2s ease;
}
.bhrow:hover{
  transform:translateY(-2px); background:var(--panel-2);
  border-color:rgba(94,240,216,.3);
}
.bhrow.is-win{ border-left:3px solid var(--green); }
.bhrow.is-loss{ border-left:3px solid var(--red); }

.bhrow__date strong{ font-size:14px; font-weight:800; color:var(--txt); white-space:nowrap; }

.bhrow__mid{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bhrow__title{
  font-size:15.5px; font-weight:800; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bhrow__meta{ font-size:12px; color:var(--txt-mute); }

.bhrow__val, .bhrow__res{ display:flex; flex-direction:column; gap:3px; text-align:right; }
.bhrow__val span, .bhrow__res span{
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt-mute);
}
.bhrow__val strong{ font-size:15px; font-weight:800; color:var(--txt-dim); }
.bhrow__res strong{ font-size:17px; font-weight:900; color:var(--txt); }

.bhrow__st, .bh__status{
  justify-self:end;
  font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 11px; border-radius:20px; white-space:nowrap;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.05); color:var(--txt-mute);
}
.bhrow__st.is-open, .bh__status.is-open{
  background:rgba(255,157,28,.14); border-color:rgba(255,157,28,.35); color:var(--gold);
}
.bhrow__st.is-coll, .bh__status.is-coll{
  background:rgba(123,92,255,.14); border-color:rgba(123,92,255,.35); color:#a58cff;
}
.bhrow__st.is-done, .bh__status.is-done{
  background:rgba(94,240,216,.12); border-color:rgba(94,240,216,.35); color:var(--teal);
}

.bh__empty{
  margin:0; padding:40px 20px; text-align:center;
  font-size:14px; line-height:1.6; color:var(--txt-mute);
  border:1px dashed var(--line); border-radius:var(--r-md);
}

/* ---------- Einzelansicht ---------- */
.bh__back{
  font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer;
  padding:9px 15px; border-radius:9px; margin-bottom:18px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--txt-dim);
  transition:background .18s ease, color .18s ease;
}
.bh__back:hover{ background:rgba(255,255,255,.08); color:var(--txt); }

.bh__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  margin-bottom:20px; flex-wrap:wrap;
}
.bh__note{
  margin:8px 0 0; font-size:13.5px; line-height:1.6; color:var(--txt-mute);
  max-width:640px;
}

/* Fortschritt */
.bh__prog{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.bh__progbar{
  flex:1; height:8px; border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,.07); border:1px solid var(--line-soft);
}
.bh__progbar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--teal-2), var(--teal));
  transition:width .45s cubic-bezier(.2,.9,.3,1);
}
.bh__progtxt{
  font-size:11.5px; font-weight:700; color:var(--txt-mute); white-space:nowrap;
}

/* Kennzahlen */
.bh__kpis{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
  margin-bottom:18px;
}
.bh__kpi{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); padding:14px 16px;
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.bh__kpi--big{
  grid-column:span 2;
  background:linear-gradient(135deg, rgba(94,240,216,.07), rgba(255,255,255,.02));
  border-color:rgba(94,240,216,.22);
}
.bh__kpi-k{
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt-mute);
}
.bh__kpi-v{ font-size:22px; font-weight:900; color:var(--txt); line-height:1.15; }
.bh__kpi--big .bh__kpi-v{ font-size:30px; }
.bh__kpi-h{ font-size:11px; color:var(--txt-mute); min-height:14px; }

/* Bester Treffer */
.bh__best{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 18px; border-radius:var(--r-md); margin-bottom:18px;
  background:linear-gradient(100deg, rgba(255,199,58,.12), rgba(255,157,28,.05));
  border:1px solid rgba(255,199,58,.28);
}
.bh__best-k{
  font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold);
}
.bh__best-n{ font-size:15px; font-weight:800; color:var(--txt); }
.bh__best-x{ font-size:14px; font-weight:800; color:var(--gold); margin-left:auto; }

/* Tabelle */
.bh__tablebox{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); overflow-x:auto;
}
.bh__table{ width:100%; border-collapse:collapse; min-width:520px; }
.bh__table th{
  text-align:left; padding:12px 16px;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt-mute); border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.2);
}
.bh__table td{
  padding:13px 16px; border-bottom:1px solid var(--line-soft);
  font-size:13.5px; color:var(--txt-dim); vertical-align:middle;
}
.bh__table tr:last-child td{ border-bottom:0; }
.bh__table tr.is-wait td{ opacity:.5; }
.bh__table tr.is-best td{ background:rgba(255,199,58,.07); }

.bh__nr{ width:44px; color:var(--txt-mute) !important; font-variant-numeric:tabular-nums; }
.bh__num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bh__x{ font-weight:900; font-size:14.5px !important; color:var(--txt) !important; }
.bh__x.is-green{ color:var(--green) !important; }
.bh__x.is-red{ color:var(--red) !important; }

.bh__slot{ display:block; font-size:14px; font-weight:700; color:var(--txt); }
.bh__prov{ display:block; font-size:11.5px; color:var(--txt-mute); margin-top:2px; }

/* ---------- schmalere Schirme ---------- */
@media (max-width:900px){
  .bh__kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bh__stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bhrow{
    grid-template-columns:1fr auto; gap:10px 14px;
    grid-template-areas:
      "date  st"
      "mid   mid"
      "val   res";
  }
  .bhrow__date{ grid-area:date; }
  .bhrow__st{ grid-area:st; }
  .bhrow__mid{ grid-area:mid; }
  .bhrow__val{ grid-area:val; text-align:left; }
  .bhrow__res{ grid-area:res; }
}

@media (max-width:560px){
  .bh__kpis{ grid-template-columns:1fr; }
  .bh__kpi--big{ grid-column:span 1; }
  .bh__best-x{ margin-left:0; width:100%; }
}

/* ---------- Bonushunt: Slotbilder ---------- */

.bh__namecell{ display:flex; align-items:center; gap:12px; min-width:0; }

.bh__thumb{
  width:46px; height:46px; flex:0 0 auto; border-radius:9px; overflow:hidden;
  background:#05070d; border:1px solid var(--line-soft);
  display:grid; place-items:center;
}
.bh__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bh__thumb.is-empty{
  font-size:17px; font-weight:900; color:var(--txt-mute);
  background:linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

.bh__names{ min-width:0; display:flex; flex-direction:column; }

.bh__best-thumb{
  width:38px; height:38px; flex:0 0 auto; border-radius:8px; overflow:hidden;
  border:1px solid rgba(255,199,58,.35);
}
.bh__best-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:560px){
  .bh__thumb{ width:38px; height:38px; }
}

/* ==================================================================
   BONUSHUNT: WETTEN
   ================================================================== */

.bhbet{
  border:1px solid rgba(123,92,255,.28); border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(123,92,255,.09), rgba(255,255,255,.02));
  padding:18px; margin-bottom:18px;
}
.bhbet__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.bhbet__k{
  font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#a58cff;
}
.bhbet__state{
  font-size:10.5px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 11px; border-radius:20px; white-space:nowrap;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.05); color:var(--txt-mute);
}
.bhbet__state.is-open{ background:rgba(22,217,127,.14); border-color:rgba(22,217,127,.35); color:var(--green); }
.bhbet__state.is-shut{ background:rgba(255,157,28,.12); border-color:rgba(255,157,28,.32); color:var(--gold); }
.bhbet__state.is-done{ background:rgba(94,240,216,.12); border-color:rgba(94,240,216,.32); color:var(--teal); }

.bhbet__note{ margin:0 0 12px; font-size:14px; font-weight:700; color:var(--txt); }

.bhbet__opts{
  list-style:none; margin:0 0 14px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:9px;
}
.bhopt{
  display:flex; flex-direction:column; gap:4px; width:100%; text-align:left;
  font-family:inherit; cursor:pointer;
  padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.bhopt:hover:not(:disabled){ transform:translateY(-2px); border-color:rgba(123,92,255,.5); background:rgba(123,92,255,.1); }
.bhopt.is-on{ border-color:#a58cff; background:rgba(123,92,255,.18); box-shadow:0 0 0 1px rgba(165,140,255,.35); }
.bhopt:disabled{ cursor:default; opacity:.75; }
.bhopt.is-win{ border-color:rgba(22,217,127,.5); background:rgba(22,217,127,.12); opacity:1; }
.bhopt.is-lose{ opacity:.45; }
.bhopt__l{ font-size:14px; font-weight:800; color:var(--txt); }
.bhopt__q{ font-size:19px; font-weight:900; color:#a58cff; line-height:1.1; }
.bhopt__p{ font-size:11px; color:var(--txt-mute); }

.bhbet__bar{
  display:grid; align-items:end; gap:12px;
  grid-template-columns:minmax(0,1.3fr) 130px minmax(0,1fr) auto;
  padding:14px; border-radius:var(--r-sm);
  background:rgba(0,0,0,.28); border:1px solid var(--line-soft);
}
.bhbet__pick-k, .bhbet__stake span, .bhbet__win span{
  display:block; margin-bottom:4px;
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-mute);
}
.bhbet__pick-v{ font-size:14px; font-weight:800; color:var(--txt); }
.bhbet__stake input{
  width:100%; font-family:inherit; font-size:15px; font-weight:800; text-align:right;
  padding:10px 12px; border-radius:9px;
  border:1px solid var(--line); background:rgba(0,0,0,.35); color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.bhbet__stake input:focus{ outline:none; border-color:rgba(165,140,255,.6); }
.bhbet__win strong{ font-size:18px; font-weight:900; color:var(--green); }
.bhbet__go{
  font-family:inherit; font-size:14px; font-weight:900; cursor:pointer;
  padding:12px 26px; border-radius:10px; border:0;
  background:linear-gradient(100deg, #7b5cff, #a58cff); color:#fff;
  transition:transform .15s ease, box-shadow .22s ease;
}
.bhbet__go:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 32px rgba(123,92,255,.4); }
.bhbet__go:disabled{ opacity:.4; cursor:default; }

.bhbet__limits{ margin:9px 0 0; font-size:11.5px; color:var(--txt-mute); }

.bhbet__gate{ padding:14px; border-radius:var(--r-sm); background:rgba(0,0,0,.26); text-align:center; }
.bhbet__gate p{ margin:0 0 10px; font-size:13px; color:var(--txt-mute); }
.bhbet__login{
  display:inline-block; font-size:13px; font-weight:800;
  padding:10px 18px; border-radius:9px; background:#9146ff; color:#fff;
}
.bhbet__login:hover{ background:#7d33e8; text-decoration:none; }

.bhbet__msg{
  margin:11px 0 0; padding:9px 13px; border-radius:9px;
  font-size:12.5px; line-height:1.5;
  background:rgba(94,240,216,.1); border:1px solid rgba(94,240,216,.28); color:var(--teal);
}
.bhbet__msg.is-warn{ background:rgba(255,157,28,.1); border-color:rgba(255,157,28,.28); color:var(--gold); }

.bhbet__mine{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.bhbet__mine-k{
  display:block; margin-bottom:8px;
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-mute);
}
.bhbet__mine-l{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.bhmine{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:minmax(0,1.4fr) 130px minmax(0,1fr) 96px;
  padding:9px 12px; border-radius:9px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  font-size:12.5px;
}
.bhmine.is-gewonnen{ border-color:rgba(22,217,127,.32); background:rgba(22,217,127,.08); }
.bhmine.is-verloren{ opacity:.6; }
.bhmine.is-annulliert{ opacity:.7; }
.bhmine__l{ font-weight:700; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bhmine__m{ color:var(--txt-mute); font-variant-numeric:tabular-nums; }
.bhmine__r{ font-weight:800; color:var(--txt-dim); }
.bhmine.is-gewonnen .bhmine__r{ color:var(--green); }
.bhmine__s{
  justify-self:end; font-size:9.5px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; background:rgba(255,255,255,.06); color:var(--txt-mute);
}
.bhmine.is-gewonnen .bhmine__s{ background:rgba(22,217,127,.16); color:var(--green); }

@media (max-width:820px){
  .bhbet__bar{ grid-template-columns:1fr 1fr; }
  .bhbet__go{ grid-column:span 2; }
  .bhmine{ grid-template-columns:1fr 1fr; gap:5px 10px; }
  .bhmine__s{ justify-self:start; }
}

/* ==================================================================
   STATISCHER BETRIEB (Webspace ohne Node-Server)

   Was ohne API nicht funktionieren kann, wird ausgeblendet statt als
   leerer oder kaputter Bereich stehen zu bleiben.
   ================================================================== */
.sx-static .chat,
.sx-static .ch-toggle,
.sx-static .ch-backdrop{ display:none !important; }

.sx-static .sbnav__a[hidden]{ display:none !important; }

/* Der Chat nimmt sonst weiter Platz weg */
.sx-static body.chat-open .site__main{ margin-right:0 !important; }