/* VipSta Casino DE — Layout nach dem Original-Lobby-Screenshot */
*,*::before,*::after{box-sizing:border-box}
:root{
  --violet:#6c3ff5;--violet-d:#5528d8;--violet-l:#8b63ff;
  --lime:#cdf223;--lime-d:#b6da12;
  --ink:#1b1830;--ink-2:#4a4763;--ink-3:#7c7a92;
  --line:#e8e5f4;--card:#ffffff;--bg:#f7f6fc;--tile:linear-gradient(160deg,#dce9ff,#c9dcff);
  --ok:#15a06a;--bad:#e0425a;--warn:#f0a500;
  --shadow:0 10px 30px rgba(50,32,120,.08);
  --r:18px;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
img{max-width:100%;display:block;height:auto}
a{color:var(--violet-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.22;margin:0 0 .6rem;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.55rem,3.4vw,2.3rem)}
h2{font-size:clamp(1.25rem,2.4vw,1.65rem)}
h3{font-size:1.06rem}
p{margin:0 0 .9rem}
strong{font-weight:700}
svg{width:20px;height:20px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:0;cursor:pointer;font:inherit;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;padding:.7rem 1.25rem;border-radius:999px;text-decoration:none;
  font-size:.82rem;transition:transform .12s ease,filter .12s ease}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-violet{background:var(--violet);color:#fff}
.btn-outline{background:#fff;color:var(--violet-d);box-shadow:inset 0 0 0 2px var(--violet)}
.btn-lime{background:var(--lime);color:#171a05}
.btn-lg{padding:1rem 2rem;font-size:.95rem}
.btn-sm{padding:.55rem 1rem;font-size:.75rem}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:10px 20px;min-height:64px}
.burger{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);
  background:#fff;border-radius:12px;color:var(--ink);cursor:pointer;flex:0 0 auto}
.hdr-logo{flex:0 0 auto}
.hdr-logo img{width:86px;height:52px;object-fit:contain}
.search{flex:1 1 auto;display:flex;align-items:center;gap:.55rem;min-width:0;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.6rem 1rem;
  color:var(--ink-3);font-size:.9rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.search svg{flex:0 0 auto;color:var(--ink-3)}
.hdr-act{display:flex;gap:10px;flex:0 0 auto}

/* ---------- shell / sidebar ---------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);gap:0;align-items:start}
.side{position:sticky;top:64px;background:#fff;border-right:1px solid var(--line);
  padding:16px 12px 28px}
.side nav{display:grid;gap:2px}
.side nav a{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:14px;
  color:var(--ink);font-weight:700;font-size:.86rem;text-transform:uppercase;letter-spacing:.01em}
.side nav a:hover{background:#f2f0fb;text-decoration:none}
.side nav a.on{background:#f0eefa}
.side nav a i{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border-radius:50%;background:#eaf7ee;color:#2f7d54}
.side nav a:nth-child(3n) i{background:#efeaff;color:var(--violet-d)}
.side nav a:nth-child(3n+2) i{background:#e6f1ff;color:#2c62b8}
.side-sep{height:1px;background:var(--line);margin:12px 6px}
.main{min-width:0;padding:18px 20px 40px}

/* ---------- hero ---------- */
.hero{position:relative;border-radius:22px;overflow:hidden;
  background:linear-gradient(115deg,#6f45f0 0%,#8358ff 45%,#9c6bff 100%)}
.hero-stage{position:relative;aspect-ratio:1610/500;min-height:300px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);align-items:end}
.slide.on{opacity:1}
.slide-art{position:relative;height:100%}
.slide-art img{position:absolute;right:2%;bottom:0;height:100%;width:auto;max-width:none;
  object-fit:contain;object-position:bottom right}
.slide-box{align-self:center;justify-self:center;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);
  border-radius:20px;padding:26px 30px 30px;text-align:center;max-width:520px;margin:0 12px}
.slide-badge{display:inline-block;background:#fff;color:var(--ink);font-weight:800;
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem;
  border-radius:8px;margin:0 0 .9rem}
.slide-title{color:#fff;font-size:clamp(1.2rem,2.5vw,2rem);font-weight:800;margin:0 0 1.1rem;
  text-shadow:0 2px 10px rgba(30,10,80,.28)}
.hero-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border:0;border-radius:50%;background:rgba(255,255,255,.28);color:#fff;font-size:1.1rem;
  cursor:pointer;display:grid;place-items:center}
#hero-prev{left:12px}#hero-next{right:12px}
.hero-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;pointer-events:none;z-index:2}
.hero-dot{pointer-events:auto;width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.hero-dot.on{background:#fff}

/* ---------- section heads ---------- */
.sec-head{display:flex;align-items:center;gap:.6rem;margin:28px 0 14px}
.sec-head h2{margin:0;text-transform:uppercase;font-size:1.15rem;display:flex;align-items:center;gap:.5rem}
.sec-head h2 svg{color:var(--violet)}
.sec-head .all{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:.45rem .8rem;font-size:.72rem;font-weight:800;text-transform:uppercase;color:var(--ink-2)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tile{background:var(--tile);border-radius:16px;overflow:hidden;position:relative;
  aspect-ratio:3/4;display:grid;place-items:end center;box-shadow:var(--shadow)}
.tile img{width:100%;height:100%;object-fit:contain;object-position:bottom center;padding:6px}
.tile b{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(255,255,255,.86);
  border-radius:10px;font-size:.72rem;text-align:center;padding:.3rem;color:var(--ink)}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cat{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:center;gap:10px;padding:14px 0 14px 16px;
  box-shadow:var(--shadow)}
.cat h3{margin:0 0 .2rem;font-size:.95rem}
.cat p{margin:0;font-size:.8rem;color:var(--ink-2)}
.cat img{height:104px;width:96px;object-fit:contain;object-position:bottom right}

/* ---------- content ---------- */
.article{background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:clamp(18px,3vw,34px);margin-top:26px;box-shadow:var(--shadow);min-width:0}
.article section{padding-top:.6rem;margin-top:1.4rem;border-top:1px solid var(--line)}
.article section:first-of-type{border-top:0}
.lead{font-size:1.05rem;color:var(--ink)}
.score{display:flex;align-items:center;gap:16px;background:#f5f2ff;border:1px solid #e0d8ff;
  border-radius:16px;padding:14px 18px;margin:0 0 1.1rem}
.score b{font-size:2rem;line-height:1;color:var(--violet-d)}
.score span{font-size:.9rem;color:var(--ink-2)}
.author{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;align-items:start;
  background:#fbfaff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 0 1.2rem}
.author img{width:78px;height:78px;border-radius:50%;object-fit:cover}
.author p{margin:0 0 .3rem;font-size:.88rem;color:var(--ink-2)}
.author-n{font-weight:800;font-size:1rem!important;color:var(--ink)!important}
.author-r{color:var(--violet-d)!important;font-weight:700}
.toc{background:#fbfaff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:0 0 1.2rem}
.toc h2{font-size:.9rem;text-transform:uppercase;color:var(--ink-3);margin:0 0 .5rem}
.toc nav{display:flex;flex-wrap:wrap;gap:.4rem .8rem}
.toc nav a{font-size:.86rem}
.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:0 0 1.2rem}
.quick div{display:flex;justify-content:space-between;gap:12px;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.quick div span:first-child{color:var(--ink-3)}
.quick div span:last-child{font-weight:700;text-align:right}
.pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 1.4rem}
.pc>div{border-radius:16px;padding:14px 18px}
.pc .ok{background:#effaf3;border:1px solid #cdeedb}
.pc .no{background:#fdf1f3;border:1px solid #f6d6dc}
.pc h3{margin:0 0 .5rem}
.pc ul{margin:0;padding-left:1.1rem}
.pc li{margin:.3rem 0;font-size:.9rem}
.dtable{width:100%;border-collapse:collapse;margin:0 0 1.1rem;font-size:.88rem;min-width:320px}
.dtable th,.dtable td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
.dtable th{background:#f5f2ff;font-weight:800}
.dtable tr:nth-child(even) td{background:#fbfaff}
.tbl-scroll{overflow-x:auto;margin:0 0 1.1rem}
.note{border-radius:14px;padding:.9rem 1.1rem;margin:0 0 1.1rem;font-size:.92rem}
.note p:last-child{margin:0}
.note-info{background:#eef4ff;border:1px solid #cfdeff}
.note-warn{background:#fff6e8;border:1px solid #f6e0b8}
.note-tip{background:#effaf3;border:1px solid #cdeedb}
.steps{margin:0 0 1.1rem;padding-left:1.2rem}
.steps li{margin:.4rem 0}
.quote{margin:0 0 1.1rem;background:#fbfaff;border:1px solid var(--line);border-left:4px solid var(--violet);
  border-radius:12px;padding:.9rem 1.1rem;font-size:.92rem}
.quote footer{margin-top:.4rem;font-size:.8rem;color:var(--ink-3)}
figure.shot{margin:0 0 1.1rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
figure.shot figcaption{font-size:.8rem;color:var(--ink-3);padding:.6rem .8rem}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:1.4rem 0}
.team>div{background:#fbfaff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:.85rem}
.team p{margin:0 0 .3rem}
.team i{display:block;font-style:normal;color:var(--ink-3);font-size:.78rem}
.cta-box{background:linear-gradient(115deg,#6f45f0,#9c6bff);color:#fff;border-radius:20px;
  padding:24px;text-align:center;margin:1.6rem 0}
.cta-box h2{color:#fff;margin-bottom:.5rem}
.cta-box p{color:rgba(255,255,255,.9)}
.faq-i{border:1px solid var(--line);border-radius:14px;margin-bottom:.6rem;background:#fff;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;
  background:none;border:0;font:inherit;font-weight:700;text-align:left;padding:.85rem 1rem;cursor:pointer;color:var(--ink)}
.faq-a{display:none;padding:0 1rem .9rem;font-size:.92rem;color:var(--ink-2)}
.faq-i.open .faq-a{display:block}
.faq-i.open .chev{transform:rotate(180deg)}
.chev{transition:transform .15s ease;color:var(--violet)}
.disc{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3)}

/* ---------- footer ---------- */
.ftr{background:#fff;border-top:1px solid var(--line);margin-top:30px}
.ftr-in{max-width:1400px;margin:0 auto;padding:28px 20px 90px}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:22px}
.ftr-grid h3{font-size:.82rem;text-transform:uppercase;color:var(--ink-3)}
.ftr-grid a{display:block;font-size:.86rem;padding:.16rem 0;color:var(--ink-2)}
.ftr-grid img{width:86px;height:52px;object-fit:contain}
.ftr-b{border-top:1px solid var(--line);margin-top:20px;padding-top:14px;font-size:.78rem;color:var(--ink-3)}
.ftr-b p{margin:.2rem 0}

/* ---------- floats ---------- */
.mbar{display:none}
.to-top{position:fixed;right:16px;bottom:88px;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--violet);color:#fff;display:none;place-items:center;cursor:pointer;z-index:35;
  box-shadow:0 8px 20px rgba(80,40,200,.3)}
.to-top.on{display:grid}
.overlay{position:fixed;inset:0;background:rgba(20,12,50,.45);opacity:0;pointer-events:none;
  transition:opacity .2s ease;z-index:45}
.overlay.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);background:#fff;z-index:46;
  transform:translateX(-102%);transition:transform .22s ease;overflow-y:auto;padding:14px}
.drawer.on{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.drawer-top img{width:86px;height:52px;object-fit:contain}
.drawer-close{border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink-2)}
.drawer nav{display:grid;gap:2px}
.drawer nav a{display:flex;align-items:center;gap:.7rem;padding:.5rem .4rem;border-radius:12px;
  color:var(--ink);font-weight:700;font-size:.85rem;text-transform:uppercase}
.drawer nav a i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f0eefa;color:var(--violet-d)}
.drawer-act{display:grid;gap:8px;margin-top:14px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .search{display:none}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .main{padding:12px 12px 30px}
  .hero-stage{aspect-ratio:auto;min-height:0}
  .slide{position:static;display:none;grid-template-columns:minmax(0,1fr)}
  .slide.on{display:grid}
  .slide-art{height:200px;order:1}
  .slide-art img{position:static;height:200px;margin:0 auto;object-position:bottom center}
  .slide-box{order:2;margin:0 12px 26px;padding:18px 16px 22px}
  .hero-arrow{top:auto;bottom:8px;transform:none;width:34px;height:34px}
  #hero-prev{left:16px}#hero-next{right:16px}
  .hero-dots{bottom:18px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cats{grid-template-columns:minmax(0,1fr)}
  .quick,.pc{grid-template-columns:minmax(0,1fr)}
  .hdr{padding:8px 12px;gap:8px}
  .hdr-act .btn{padding:.5rem .7rem;font-size:.68rem}
  .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:38;background:#fff;
    border-top:1px solid var(--line);padding:8px 12px}
  .mbar .btn{flex:1 1 0;min-width:0}
  .ftr-grid{grid-template-columns:minmax(0,1fr)}
  .ftr-in{padding-bottom:96px}
  .to-top{bottom:74px}
}