/* ============================================================
   PLANBET — Deutschland (germanyplanbet.com)
   Dark lobby skin, emerald accent, three-panel shell
   ============================================================ */

/* ---------- 1. RESET & TOKENS ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class]{padding:0;list-style:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}:is(span,div):where(.go-link){color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

:root{
  --pb-bg:#313337;
  --pb-bg2:#35373a;
  --pb-top:#2e3033;
  --pb-nav:#393b3f;
  --pb-panel:#3a3c40;
  --pb-panel2:#3e4044;
  --pb-panel3:#424449;
  --pb-line:#44464b;
  --pb-line2:#4c4f54;
  --pb-tx:#e9f0f4;
  --pb-tx2:#a9b6c1;
  --pb-tx3:#77848f;
  --pb-acc:#04c490;
  --pb-acc2:#25e6ab;
  --pb-acc3:#02a077;
  --pb-accsoft:rgba(4,196,144,.14);
  --pb-live:#e5484d;
  --pb-gold:#f2b33d;
  --pb-blue:#3e8fd6;
  --pb-r:10px;
  --pb-r2:14px;
  --pb-sh:0 6px 22px rgba(0,0,0,.38);
  --pb-grad:linear-gradient(180deg,#0bd79e 0%,#04a97f 100%);
  --pb-font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

body{
  font-family:var(--pb-font);
  background:var(--pb-bg);
  color:var(--pb-tx);
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:rgba(4,196,144,.32);color:#fff}
:focus-visible{outline:2px solid var(--pb-acc2);outline-offset:2px}

.pb-sr{position:absolute;width:0;height:0;overflow:hidden}
.pb-ico{width:18px;height:18px;flex:none;fill:none}
.pb-hidden{display:none !important}

.pb-wrap{width:100%;max-width:1640px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}

/* ---------- 2. HEADER : TOP BAR ---------- */
.pb-head{position:sticky;top:0;z-index:60;background:var(--pb-top);box-shadow:0 1px 0 #27282b,0 6px 18px rgba(0,0,0,.35)}
.pb-top{display:flex;align-items:center;gap:14px;height:52px}
.pb-burger{display:none;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;color:var(--pb-tx);background:#393b40}
.pb-logo{display:flex;align-items:center;flex:none}
.pb-logo img{width:118px;height:auto}
.pb-leagues{display:flex;align-items:center;gap:9px;margin-left:4px}
.pb-lg{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:9px;font-weight:800;letter-spacing:-.4px;color:#fff;opacity:.92}
.pb-lg--ucl{background:radial-gradient(circle at 50% 40%,#1c3f9c,#0b1c48)}
.pb-lg--uel{background:radial-gradient(circle at 50% 40%,#f27021,#8c3606)}
.pb-lg--epl{background:radial-gradient(circle at 50% 40%,#3d195b,#1d0c2b)}
.pb-lg--laliga{background:radial-gradient(circle at 50% 40%,#e4002b,#6b0014)}
.pb-lg--seriea{background:radial-gradient(circle at 50% 40%,#0b6bb5,#03294a)}
.pb-lg--bundes{background:radial-gradient(circle at 50% 40%,#d20515,#5c0209)}
.pb-top__sp{flex:1 1 auto}
.pb-gift{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:8px;background:#36383c;border:1px solid var(--pb-line);font-size:12.5px;font-weight:700;color:var(--pb-tx)}
.pb-gift .pb-ico{width:15px;height:15px;color:var(--pb-acc)}
.pb-gear{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--pb-tx2)}
.pb-gear:hover{color:var(--pb-tx);background:#36383c}

/* buttons */
.pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 15px;border-radius:8px;font-size:12.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;transition:filter .15s,background .15s,transform .1s}
.pb-btn:active{transform:translateY(1px)}
/* Dunkler Text auf Grün — hell auf hell war nicht lesbar */
.pb-btn--reg{background:var(--pb-grad);color:#02150f;font-weight:800;text-shadow:none;box-shadow:0 2px 10px rgba(4,196,144,.28)}
.pb-btn--reg:hover{filter:brightness(1.09)}
.pb-btn--reg:visited,.pb-btn--reg:active,.pb-btn--reg span{color:#02150f}
.pb-btn--login{background:#3f4145;color:var(--pb-tx);border:1px solid var(--pb-line2)}
.pb-btn--login:hover{background:#44474c}
.pb-btn--ghost{background:transparent;color:var(--pb-acc2);border:1px solid rgba(4,196,144,.45)}
.pb-btn--ghost:hover{background:var(--pb-accsoft)}
.pb-btn--lg{height:44px;padding:0 26px;font-size:14px;border-radius:10px}
.pb-btn--wide{width:100%}
.pb-btn--sm{height:28px;padding:0 12px;font-size:11.5px}

/* ---------- 3. HEADER : NAV BAR ---------- */
.pb-nav{background:var(--pb-nav);border-top:1px solid #2e3033}
.pb-nav__in{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;overflow-x:auto;scrollbar-width:none}
.pb-nav__in::-webkit-scrollbar{display:none}
.pb-nav a,.pb-nav__item{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 22px;border-radius:9px;font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pb-tx2);white-space:nowrap;transition:color .18s,background .18s,transform .18s}.pb-nav :is(span,div):where(.go-link){display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 22px;border-radius:9px;font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pb-tx2);white-space:nowrap;transition:color .18s,background .18s,transform .18s}
.pb-nav a:hover,.pb-nav__item:hover{color:var(--pb-tx);background:#3f4145}.pb-nav :is(span,div):where(.go-link):hover{color:var(--pb-tx);background:#3f4145}
.pb-nav a.is-active{background:var(--pb-grad);color:#02150f;box-shadow:0 2px 10px rgba(4,196,144,.25)}.pb-nav :is(span,div):where(.go-link).is-active{background:var(--pb-grad);color:#02150f;box-shadow:0 2px 10px rgba(4,196,144,.25)}
.pb-nav a.is-active:hover{filter:brightness(1.07);background:var(--pb-grad);color:#02150f}.pb-nav :is(span,div):where(.go-link).is-active:hover{filter:brightness(1.07);background:var(--pb-grad);color:#02150f}
.pb-nav .pb-caret{width:9px;height:9px;opacity:.6;stroke:currentColor}
.pb-nav__game{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;margin-left:6px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--pb-tx);white-space:nowrap}
.pb-nav__game:hover{background:#3f4145}
.pb-nav__gimg{width:26px;height:20px;border-radius:4px;background:linear-gradient(120deg,#b9651e,#f0b64c 55%,#7b3a0d);flex:none}
.pb-nav__live{width:6px;height:6px;border-radius:50%;background:var(--pb-live);box-shadow:0 0 0 3px rgba(229,72,77,.22)}

/* mobile nav */
.pb-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.25s;z-index:78}
.pb-scrim.is-on{opacity:1;visibility:visible}
.pb-mnav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:86vw;background:var(--pb-bg2);border-right:1px solid var(--pb-line);z-index:80;transform:translateX(-102%);transition:transform .25s ease;padding:16px 14px;overflow-y:auto}
.pb-mnav.is-on{transform:none}
.pb-mnav__x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:8px;font-size:24px;line-height:1;color:var(--pb-tx2);background:#3a3c40}
.pb-mnav__logo{margin-bottom:18px}
.pb-mnav__logo img{width:110px}
.pb-mnav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--pb-tx2)}.pb-mnav :is(span,div):where(.go-link){display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--pb-tx2)}
.pb-mnav a:hover{background:#3d3f44;color:var(--pb-tx)}.pb-mnav :is(span,div):where(.go-link):hover{background:#3d3f44;color:var(--pb-tx)}
.pb-mnav a.is-active{background:var(--pb-accsoft);color:var(--pb-acc2)}.pb-mnav :is(span,div):where(.go-link).is-active{background:var(--pb-accsoft);color:var(--pb-acc2)}
.pb-mnav__cta{display:grid;gap:8px;margin-top:16px}
.pb-mnav__cta .pb-btn{height:40px}
/* .pb-mnav a setzt eine helle Schrift und schlaegt sonst .pb-btn--reg —
   deshalb hier ausdruecklich dunkel auf hellem Grund. */
.pb-mnav__cta a.pb-btn--reg{color:#02150f}.pb-mnav__cta :is(span,div):where(.go-link).pb-btn--reg{color:#02150f}
.pb-mnav__cta a.pb-btn--login{color:var(--pb-tx)}.pb-mnav__cta :is(span,div):where(.go-link).pb-btn--login{color:var(--pb-tx)}

/* ---------- 4. SHELL ---------- */
.pb-shell{display:grid;grid-template-columns:236px minmax(0,1fr) 300px;gap:14px;align-items:start;max-width:1640px;margin:14px auto 0;padding-left:16px;padding-right:16px}
.pb-shell--norail{grid-template-columns:236px minmax(0,1fr)}
.pb-shell--wide{grid-template-columns:minmax(0,1fr)}
/* Rails scrollen mit, wenn sie hoeher sind als der Viewport */
.pb-rail,.pb-rail--r{position:sticky;top:112px;display:grid;gap:12px;align-content:start;max-height:calc(100vh - 124px);overflow-y:auto;overscroll-behavior:contain;padding-right:5px;scrollbar-width:thin;scrollbar-color:var(--pb-line2) transparent}
.pb-rail::-webkit-scrollbar,.pb-rail--r::-webkit-scrollbar{width:7px}
.pb-rail::-webkit-scrollbar-track,.pb-rail--r::-webkit-scrollbar-track{background:transparent}
.pb-rail::-webkit-scrollbar-thumb,.pb-rail--r::-webkit-scrollbar-thumb{background:var(--pb-line2);border-radius:4px}
.pb-rail:hover::-webkit-scrollbar-thumb,.pb-rail--r:hover::-webkit-scrollbar-thumb{background:#575a60}
.pb-main{min-width:0;display:grid;gap:16px}
/* Grid-Items dürfen sonst nicht unter ihre Inhaltsbreite schrumpfen —
   ohne das zwingt eine breite Tabelle (min-width:520px) die ganze Seite ins Querscrollen. */
.pb-shell>*,.pb-main>*,.pb-rail>*,.pb-rail--r>*{min-width:0}
.pb-art,.pb-tw,.pb-mech{max-width:100%}

/* rail panels */
.pb-panel{background:var(--pb-panel);border:1px solid var(--pb-line);border-radius:var(--pb-r2);overflow:hidden}
/* Lange Ueberschriften wie SYSTEMVORAUSSETZUNGEN muessen umbrechen duerfen */
.pb-panel__h{display:flex;align-items:center;gap:8px;padding:11px 13px;font-size:11px;font-weight:800;letter-spacing:.55px;line-height:1.3;text-transform:uppercase;color:var(--pb-tx2);border-bottom:1px solid var(--pb-line);background:var(--pb-panel2);min-width:0;overflow-wrap:anywhere}
.pb-panel__h .pb-ico{width:15px;height:15px;color:var(--pb-acc)}
.pb-panel__h .pb-sp{margin-left:auto}
.pb-plist{padding:6px}
.pb-prow{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.3;color:var(--pb-tx2);transition:.15s;min-width:0;overflow-wrap:anywhere}
.pb-prow:hover{background:var(--pb-panel3);color:var(--pb-tx)}
.pb-prow.is-active{background:var(--pb-accsoft);color:var(--pb-acc2)}
.pb-prow .pb-ico{width:16px;height:16px;opacity:.85}
.pb-prow__n{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--pb-tx3);background:#36383c;border-radius:5px;padding:1px 6px}
.pb-prow--live .pb-prow__n{color:#ffd7d8;background:rgba(229,72,77,.2)}
.pb-side__note{padding:10px 13px 13px;font-size:12px;line-height:1.5;color:var(--pb-tx3);border-top:1px solid var(--pb-line);overflow-wrap:anywhere}
/* Schaltflaechen in der schmalen Spalte duerfen zweizeilig werden */
.pb-rail .pb-btn,.pb-rail--r .pb-btn{white-space:normal;height:auto;min-height:38px;padding:9px 12px;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.pb-rail .pb-btn--lg,.pb-rail--r .pb-btn--lg{min-height:44px}

/* ---------- 5. SECTION HEAD ---------- */
.pb-sec{display:grid;gap:10px}
.pb-sec__h{display:flex;align-items:center;gap:10px;min-height:26px}
.pb-sec__t{font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--pb-tx2)}
.pb-sec__sp{flex:1 1 auto}
.pb-sec__all{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:7px;background:var(--pb-panel2);border:1px solid var(--pb-line);font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--pb-tx2)}
.pb-sec__all:hover{color:var(--pb-acc2);border-color:rgba(4,196,144,.4)}
.pb-arrows{display:flex;gap:6px}
.pb-arrow{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:var(--pb-panel2);border:1px solid var(--pb-line);color:var(--pb-tx2)}
.pb-arrow:hover{color:var(--pb-tx);background:var(--pb-panel3)}
.pb-arrow .pb-ico{width:13px;height:13px}

/* ---------- 6. HERO SLIDER ---------- */
.pb-hero{position:relative;border-radius:var(--pb-r2);overflow:hidden;background:#2f3134;border:1px solid var(--pb-line)}
/* Der Rahmen folgt dem Seitenverhaeltnis der Banner (1600x440) — sonst schneidet
   object-fit:cover oben und unten ein Drittel des Motivs weg. */
/* Alle Slides liegen in derselben Rasterzelle: der Rahmen ist so hoch wie der
   hoechste Slide und waechst mit, wenn Titel oder Schaltflaeche mehr Platz brauchen.
   Die Motive sind freigestellt und werden eingepasst statt beschnitten. */
.pb-hero__track{position:relative;display:grid;min-height:clamp(250px,19vw,330px);background:radial-gradient(80% 150% at 76% 40%,rgba(4,196,144,.26),rgba(4,196,144,.05) 46%,transparent 72%),linear-gradient(112deg,#2d2e31 0%,#313336 46%,#123027 100%)}
.pb-hero__slide{grid-area:1/1;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .55s ease;min-width:0}
.pb-hero__slide.is-on{opacity:1;visibility:visible;z-index:2}
.pb-hero__art{position:absolute;inset:0;z-index:0;overflow:hidden}
.pb-hero__art img{width:100%;height:100%;object-fit:contain;object-position:right center;padding:14px 26px 14px 45%;transform:scale(1);transition:transform 8s ease-out}
.pb-hero__slide.is-on .pb-hero__art img{transform:scale(1.05)}
.pb-hero__slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(45,46,49,.92) 0%,rgba(45,46,49,.72) 34%,rgba(45,46,49,.18) 58%,transparent 78%)}
.pb-hero__body{position:relative;z-index:2;padding:34px 56px;max-width:min(620px,58%)}
.pb-hero__t{font-size:clamp(22px,2.6vw,34px);line-height:1.12;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.pb-hero__d{margin-top:9px;font-size:14px;color:var(--pb-tx2);max-width:430px}
.pb-hero__body .pb-btn{margin-top:16px}
.pb-hero__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:30px;height:44px;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.35);border-radius:8px;opacity:.75}
.pb-hero__nav:hover{opacity:1;background:rgba(0,0,0,.6)}
.pb-hero__nav--p{left:8px}
.pb-hero__nav--n{right:8px}
.pb-hero__dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:6px}
.pb-hero__dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}
.pb-hero__dot.is-on{background:var(--pb-acc);width:20px;border-radius:4px}

/* ---------- 7. CATEGORY TILES ---------- */
.pb-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pb-cat{position:relative;display:flex;align-items:center;gap:10px;min-height:66px;padding:12px 14px;border-radius:var(--pb-r2);background:linear-gradient(135deg,#3f4146,#393b3f);border:1px solid var(--pb-line);font-size:13px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--pb-tx);overflow:hidden;transition:.18s}
.pb-cat:hover{border-color:rgba(4,196,144,.5);transform:translateY(-2px)}
.pb-cat__ic{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.pb-cat__ic .pb-ico{width:24px;height:24px;color:var(--pb-acc2)}
.pb-cat--sport .pb-cat__ic{background:linear-gradient(135deg,#0e5d47,#04c490)}
.pb-cat--slots .pb-cat__ic{background:linear-gradient(135deg,#8a5a12,#f2b33d)}
.pb-cat--live .pb-cat__ic{background:linear-gradient(135deg,#7a1f28,#e5484d)}
.pb-cat--games .pb-cat__ic{background:linear-gradient(135deg,#1d3f7a,#3e8fd6)}
.pb-cat--esport .pb-cat__ic{background:linear-gradient(135deg,#4a1f7a,#9b5cd6)}
.pb-cat--sport .pb-cat__ic .pb-ico,.pb-cat--slots .pb-cat__ic .pb-ico,.pb-cat--live .pb-cat__ic .pb-ico,.pb-cat--games .pb-cat__ic .pb-ico,.pb-cat--esport .pb-cat__ic .pb-ico{color:#fff}

/* ---------- 8. TOP SPORTS CHIPS ---------- */
.pb-sports{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.pb-sport{display:grid;place-items:center;gap:6px;padding:12px 4px;border-radius:var(--pb-r);background:var(--pb-panel);border:1px solid var(--pb-line);font-size:11.5px;font-weight:700;color:var(--pb-tx2);text-align:center;transition:.15s}
.pb-sport:hover{background:var(--pb-panel3);color:var(--pb-tx);border-color:var(--pb-line2)}
.pb-sport .pb-ico{width:22px;height:22px;color:var(--pb-tx2)}
.pb-sport:hover .pb-ico{color:var(--pb-acc2)}

/* ---------- 9. TOP EVENTS ---------- */
.pb-events{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));gap:10px}
.pb-ev{display:grid;gap:9px;padding:12px;border-radius:var(--pb-r2);background:var(--pb-panel);border:1px solid var(--pb-line)}
.pb-ev__lg{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--pb-tx3);letter-spacing:.2px}
.pb-ev__lg .pb-dot{width:14px;height:14px;border-radius:4px;flex:none}
.pb-ev__tm{display:grid;gap:5px}
.pb-ev__t{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--pb-tx)}
.pb-ev__t i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--pb-line2);font-style:normal}
.pb-ev__meta{font-size:11px;color:var(--pb-tx3)}
.pb-ev__odds{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:5px}
.pb-odd{display:flex;align-items:center;justify-content:space-between;gap:4px;height:34px;padding:0 8px;border-radius:8px;background:var(--pb-panel3);border:1px solid transparent;font-size:12.5px;transition:.15s;cursor:pointer}
.pb-odd small{color:var(--pb-tx3);font-weight:700;font-size:11px}
.pb-odd b{font-weight:700;color:var(--pb-tx)}
.pb-odd:hover{background:#494b51;border-color:var(--pb-line2)}
.pb-odd.is-on{background:var(--pb-grad);border-color:transparent}
.pb-odd.is-on small,.pb-odd.is-on b{color:#02150f}
.pb-odd.is-up{animation:pbFlashUp .9s ease}
.pb-odd.is-down{animation:pbFlashDown .9s ease}
@keyframes pbFlashUp{0%,100%{box-shadow:none}25%{box-shadow:inset 0 0 0 2px var(--pb-acc)}}
@keyframes pbFlashDown{0%,100%{box-shadow:none}25%{box-shadow:inset 0 0 0 2px var(--pb-live)}}
.pb-odd--more{display:grid;place-items:center;min-width:40px;padding:0 5px;font-size:11px;font-weight:700;color:var(--pb-tx2);text-decoration:underline;cursor:default}

/* ---------- 10. BONUS CARDS ---------- */
.pb-bonuses{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pb-bon{position:relative;display:flex;flex-direction:column;border-radius:var(--pb-r2);overflow:hidden;background:var(--pb-panel);border:1px solid var(--pb-line);transition:.18s}
.pb-bon:hover{transform:translateY(-3px);border-color:rgba(4,196,144,.5);box-shadow:var(--pb-sh)}
.pb-bon__art{position:relative;aspect-ratio:16/10;background:radial-gradient(120% 100% at 70% 20%,#1c6b52,#0d2b23 60%,#2f3134)}
.pb-bon__art img{width:100%;height:100%;object-fit:cover}
.pb-bon__tag{position:absolute;top:9px;left:9px;z-index:2;padding:3px 8px;border-radius:6px;background:rgba(4,196,144,.92);color:#02150f;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.pb-bon__cap{padding:11px 12px;font-size:12.5px;font-weight:600;color:var(--pb-tx);border-top:1px solid var(--pb-line);background:var(--pb-panel2);flex:1}
.pb-bon__val{display:block;margin-top:4px;font-size:11.5px;color:var(--pb-acc2);font-weight:700}

/* ---------- 11. SLOT / GAME GRIDS ---------- */
/* Eine Reihe: auf dem Desktop stehen alle Kacheln nebeneinander,
   auf dem Handy wird die Reihe seitlich gewischt. */
.pb-games{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--pb-line2) transparent}
.pb-games::-webkit-scrollbar{height:7px}
.pb-games::-webkit-scrollbar-track{background:transparent}
.pb-games::-webkit-scrollbar-thumb{background:var(--pb-line2);border-radius:4px}
.pb-game{position:relative;border-radius:var(--pb-r);overflow:hidden;background:var(--pb-panel);border:1px solid var(--pb-line);transition:.18s;scroll-snap-align:start}
.pb-game:hover{transform:translateY(-3px);border-color:rgba(4,196,144,.55)}
.pb-game__art{position:relative;aspect-ratio:3/4;overflow:hidden;background:linear-gradient(150deg,#414348,#35373b)}
.pb-game__art img{width:100%;height:100%;object-fit:cover}
.pb-game__badge{position:absolute;top:6px;left:6px;z-index:2;padding:2px 6px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:var(--pb-live);color:#fff}
.pb-game__badge--promo{background:#c8317a}
.pb-game__badge--drops{background:var(--pb-blue)}
.pb-game__badge--hold{background:var(--pb-gold);color:#3a2704}
/* eine Zeile, damit in der Reihe alle Kacheln gleich hoch bleiben */
.pb-game__cap{display:block;padding:7px 8px;font-size:10.8px;line-height:1.4;font-weight:600;color:var(--pb-tx2);background:var(--pb-panel2);border-top:1px solid var(--pb-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-game__cap .pb-star{margin-left:auto;color:var(--pb-tx3)}
.pb-game__prov{font-size:10px;color:var(--pb-tx3);display:block}
/* RTP erscheint beim Darueberfahren */
.pb-game__rtp{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:linear-gradient(180deg,rgba(45,46,49,.55),rgba(45,46,49,.88));opacity:0;transition:opacity .22s ease;text-align:center;padding:6px}
.pb-game__rtp b{font-size:17px;font-weight:800;color:var(--pb-acc2);letter-spacing:-.3px;line-height:1.1}
.pb-game__rtp small{font-size:9px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#dfe9ef}
.pb-game__rtp i{font-size:9.5px;font-style:normal;color:var(--pb-tx3);line-height:1.25}
.pb-game:hover .pb-game__rtp,.pb-game:focus-visible .pb-game__rtp{opacity:1}

/* provider strip */
.pb-provs{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px}
.pb-prov{display:grid;place-items:center;gap:3px;height:64px;border-radius:var(--pb-r);background:var(--pb-panel);border:1px solid var(--pb-line);transition:.15s}
.pb-prov:hover{border-color:var(--pb-line2);background:var(--pb-panel2)}
.pb-prov__n{font-size:12px;font-weight:800;letter-spacing:.4px;color:var(--pb-tx)}
.pb-prov__k{font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--pb-tx3);font-weight:700}

/* live casino card */
.pb-lives{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pb-livec{position:relative;border-radius:var(--pb-r);overflow:hidden;background:var(--pb-panel);border:1px solid var(--pb-line);transition:.18s}
.pb-livec:hover{transform:translateY(-3px);border-color:rgba(4,196,144,.55)}
.pb-livec__art{position:relative;aspect-ratio:16/10;background:linear-gradient(150deg,#424549,#36383c)}
.pb-livec__art img{width:100%;height:100%;object-fit:cover}
.pb-livec__cap{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:11.5px;color:var(--pb-tx2);background:var(--pb-panel2);border-top:1px solid var(--pb-line)}
.pb-livec__lim{margin-left:auto;font-size:10.5px;color:var(--pb-tx3);white-space:nowrap}

/* fast games — light tiles, printed coefficient (house shelf) */
.pb-fasts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.pb-fast{position:relative;display:flex;flex-direction:column;border-radius:var(--pb-r);background:linear-gradient(160deg,#f4f7f8,#dfe6ea);border:1px solid #cfd8dd;color:#343639;transition:.18s;overflow:hidden;text-align:left}
.pb-fast:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.pb-fast__art{display:block;position:relative;aspect-ratio:4/3;background:#303235;overflow:hidden}
.pb-fast__art img{width:100%;height:100%;object-fit:cover;display:block}
.pb-fast__b{display:block;padding:9px 10px 10px}
.pb-fast__coef{position:absolute;top:7px;left:7px;z-index:2;padding:2px 7px;border-radius:5px;background:#1f4e8c;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.pb-fast__n{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.pb-fast__best{font-size:9.5px;font-weight:800;letter-spacing:.4px;color:#b8541b;text-transform:uppercase}
.pb-fast__kind{font-size:10.5px;color:#5c5f66;margin-top:2px}

/* Store-Schaltflaechen (App-Seite, Hauptspalte) */
.pb-stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:18px 0 22px}
.pb-store{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:12px;background:linear-gradient(160deg,#3f4146,#36383c);border:1px solid var(--pb-line2);transition:.18s}
.pb-store:hover{border-color:rgba(4,196,144,.55);transform:translateY(-2px);box-shadow:var(--pb-sh)}
.pb-store .pb-ico{width:28px;height:28px;flex:none;color:var(--pb-tx)}
.pb-store__k{display:block;font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--pb-tx3)}
.pb-store__n{display:block;font-size:14.5px;font-weight:800;color:var(--pb-tx);line-height:1.25}
.pb-store__s{display:block;font-size:11px;color:var(--pb-tx3);margin-top:2px}
.pb-fast--dark{background:linear-gradient(160deg,#43454a,#3a3c40);border-color:var(--pb-line);color:var(--pb-tx)}
.pb-fast--dark .pb-fast__kind{color:var(--pb-tx3)}

/* esports row */
.pb-esports{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.pb-esp{display:grid;gap:8px;padding:11px;border-radius:var(--pb-r2);background:linear-gradient(135deg,#3f4146,#37393c);border:1px solid var(--pb-line)}
.pb-esp__t{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--pb-tx3)}
.pb-esp__row{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.pb-esp__row span{margin-left:auto;font-size:11.5px;color:var(--pb-tx3)}
.pb-esp__odds{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:2px}

/* ---------- 12. ARTICLE ---------- */
.pb-art{background:var(--pb-panel);border:1px solid var(--pb-line);border-radius:var(--pb-r2);padding:26px 30px 32px}
.pb-crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--pb-tx3);margin-bottom:14px}
.pb-crumbs a:hover{color:var(--pb-acc2)}.pb-crumbs :is(span,div):where(.go-link):hover{color:var(--pb-acc2)}
.pb-crumbs i{opacity:.5;font-style:normal}
.pb-art h1{font-size:clamp(25px,3vw,36px);line-height:1.16;font-weight:800;letter-spacing:-.3px;margin-bottom:14px}
.pb-art h2{font-size:clamp(19px,2.1vw,25px);line-height:1.25;font-weight:800;margin:34px 0 12px;padding-left:14px;border-left:4px solid var(--pb-acc);letter-spacing:-.2px}
.pb-art h3{font-size:clamp(16px,1.7vw,19px);line-height:1.3;font-weight:700;margin:26px 0 9px;color:#fff}
.pb-art h4{font-size:15px;font-weight:700;margin:18px 0 7px;color:var(--pb-tx)}
.pb-art p{margin:0 0 13px;color:var(--pb-tx2);font-size:15px;line-height:1.72}
.pb-art p b,.pb-art li b{color:var(--pb-tx);font-weight:700}
.pb-art a.pb-il{color:var(--pb-acc2);text-decoration:underline;text-underline-offset:3px}.pb-art :is(span,div):where(.go-link).pb-il{color:var(--pb-acc2);text-decoration:underline;text-underline-offset:3px}
.pb-lead{font-size:16.5px !important;color:var(--pb-tx) !important;line-height:1.65 !important;padding:13px 16px;border-radius:10px;background:linear-gradient(90deg,rgba(4,196,144,.12),rgba(4,196,144,0));border-left:3px solid var(--pb-acc);margin-bottom:20px !important}
.pb-bul{display:grid;gap:9px;margin:0 0 16px;padding:0;list-style:none}
.pb-bul li{position:relative;padding-left:26px;color:var(--pb-tx2);font-size:14.6px;line-height:1.66}
.pb-bul li::before{content:"";position:absolute;left:6px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--pb-acc);transform:rotate(45deg)}
.pb-num{counter-reset:pbn;display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.pb-num li{position:relative;padding-left:38px;color:var(--pb-tx2);font-size:14.6px;line-height:1.66;counter-increment:pbn}
.pb-num li::before{content:counter(pbn);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:var(--pb-accsoft);border:1px solid rgba(4,196,144,.35);color:var(--pb-acc2);font-size:12px;font-weight:800}

/* tables */
.pb-tw{overflow-x:auto;margin:0 0 20px;border-radius:12px;border:1px solid var(--pb-line);background:var(--pb-bg2)}
.pb-tw table{min-width:520px;font-size:14px}
.pb-tw th{padding:12px 14px;text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--pb-tx2);background:var(--pb-panel2);border-bottom:1px solid var(--pb-line);white-space:nowrap}
.pb-tw td{padding:12px 14px;border-bottom:1px solid rgba(68,70,75,.7);color:var(--pb-tx2);vertical-align:top;line-height:1.55}
.pb-tw tr:last-child td{border-bottom:0}
.pb-tw tbody tr:hover td{background:rgba(4,196,144,.045)}
.pb-tw td:first-child{color:var(--pb-tx);font-weight:600}
.pb-tw--kv td:first-child{width:210px;white-space:nowrap}

/* callouts */
.pb-note{display:flex;gap:12px;padding:14px 16px;margin:0 0 18px;border-radius:12px;background:var(--pb-bg2);border:1px solid var(--pb-line);border-left:3px solid var(--pb-acc)}
.pb-note--warn{border-left-color:var(--pb-gold)}
.pb-note--stop{border-left-color:var(--pb-live)}
.pb-note .pb-ico{width:20px;height:20px;flex:none;margin-top:2px;color:var(--pb-acc)}
.pb-note--warn .pb-ico{color:var(--pb-gold)}
.pb-note--stop .pb-ico{color:var(--pb-live)}
.pb-note p{margin:0 !important;font-size:14px !important}
.pb-note p+p{margin-top:8px !important}

/* in-article promo banner */
.pb-abn{position:relative;display:flex;align-items:center;gap:18px;min-height:150px;margin:22px 0;padding:20px 24px;border-radius:var(--pb-r2);overflow:hidden;background:linear-gradient(100deg,#08201a 0%,#0b2c23 42%,#2d2f32 100%);border:1px solid rgba(4,196,144,.28)}
.pb-abn::before{content:"";position:absolute;right:-40px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(4,196,144,.28),transparent 65%)}
.pb-abn__b{position:relative;z-index:2;flex:1 1 auto}
.pb-abn__k{font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--pb-acc2)}
.pb-abn__t{font-size:clamp(19px,2.2vw,26px);font-weight:800;line-height:1.16;margin:5px 0 4px;color:#fff}
.pb-abn__d{font-size:13.5px;color:var(--pb-tx2);max-width:460px}
.pb-abn__b .pb-btn{margin-top:14px}
.pb-abn__art{position:relative;z-index:2;width:236px;flex:none;align-self:stretch;display:grid;place-items:center}
.pb-abn__art img{max-height:186px;max-width:100%;width:auto;object-fit:contain}

/* figure / screenshot frame */
.pb-fig{margin:0 0 20px;border-radius:12px;overflow:hidden;border:1px solid var(--pb-line);background:linear-gradient(140deg,#3b3d41,#343539)}
.pb-fig img{width:100%;height:auto;display:block}
.pb-fig figcaption{padding:9px 13px;font-size:12px;color:var(--pb-tx3);background:var(--pb-panel2);border-top:1px solid var(--pb-line)}

/* ---------- 13. MECHANICS (shared) ---------- */
.pb-mech{border-radius:var(--pb-r2);border:1px solid var(--pb-line);background:linear-gradient(160deg,#3b3d42,#36383c);overflow:hidden}
.pb-mech__h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--pb-line);background:rgba(4,196,144,.07)}
.pb-mech__ic{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--pb-accsoft);border:1px solid rgba(4,196,144,.3)}
.pb-mech__ic .pb-ico{width:18px;height:18px;color:var(--pb-acc2)}
.pb-mech__t{font-size:15px;font-weight:800;letter-spacing:.2px}
.pb-mech__s{font-size:12px;color:var(--pb-tx3);margin-top:1px}
.pb-mech__b{padding:18px}
.pb-mech__note{padding:11px 18px 15px;font-size:12px;line-height:1.55;color:var(--pb-tx3);border-top:1px solid var(--pb-line)}
.pb-field{display:grid;gap:6px;margin-bottom:14px}
.pb-field__l{font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--pb-tx3)}
.pb-inp{height:38px;padding:0 12px;border-radius:9px;background:#35363a;border:1px solid var(--pb-line);color:var(--pb-tx);font-size:14px;font-weight:600;width:100%}
.pb-inp:focus{border-color:var(--pb-acc);outline:none}
select.pb-inp{cursor:pointer}
.pb-range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:4px;background:#44464b;outline:none}
.pb-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--pb-acc);border:3px solid #313337;cursor:pointer;box-shadow:0 0 0 1px var(--pb-acc)}
.pb-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--pb-acc);border:3px solid #313337;cursor:pointer}
.pb-seg{display:inline-flex;padding:3px;gap:3px;border-radius:9px;background:#35363a;border:1px solid var(--pb-line)}
.pb-seg button{padding:6px 13px;border-radius:7px;font-size:12px;font-weight:700;color:var(--pb-tx3);transition:.15s}
.pb-seg button.is-on{background:var(--pb-grad);color:#02150f}
.pb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px}
.pb-kpi{padding:11px 12px;border-radius:10px;background:#35363a;border:1px solid var(--pb-line)}
.pb-kpi small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--pb-tx3);margin-bottom:4px}
.pb-kpi b{font-size:19px;font-weight:800;color:var(--pb-tx);letter-spacing:-.3px}
.pb-kpi.is-good b{color:var(--pb-acc2)}
.pb-kpi.is-bad b{color:#ff8a8d}
.pb-kpi.is-warn b{color:var(--pb-gold)}
.pb-verdict{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.6;background:rgba(4,196,144,.09);border:1px solid rgba(4,196,144,.28);color:var(--pb-tx)}
.pb-verdict.is-warn{background:rgba(242,179,61,.1);border-color:rgba(242,179,61,.3)}
.pb-verdict.is-bad{background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.3)}
.pb-bar{height:9px;border-radius:5px;background:#35363a;border:1px solid var(--pb-line);overflow:hidden}
.pb-bar__f{height:100%;background:var(--pb-grad);transition:width .35s ease}
.pb-bar__f--warn{background:linear-gradient(90deg,#f2b33d,#d98b12)}
.pb-bar__f--bad{background:linear-gradient(90deg,#e5484d,#a8262a)}

/* betslip mechanic */
.pb-slip__tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--pb-line)}
.pb-slip__tab{flex:1;height:30px;border-radius:7px;font-size:11.5px;font-weight:700;color:var(--pb-tx3);background:#35363a}
.pb-slip__tab.is-on{background:var(--pb-grad);color:#02150f}
.pb-slip__list{display:grid;gap:7px;padding:10px;max-height:250px;overflow-y:auto}
.pb-slip__pick{display:grid;gap:3px;padding:9px 10px;border-radius:9px;background:#35363a;border:1px solid var(--pb-line);position:relative}
.pb-slip__pick b{font-size:12.5px;color:var(--pb-tx)}
.pb-slip__pick small{font-size:11px;color:var(--pb-tx3)}
.pb-slip__pick i{position:absolute;right:8px;top:8px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--pb-acc2)}
.pb-slip__x{position:absolute;right:8px;bottom:7px;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;color:var(--pb-tx3);font-size:14px;line-height:1}
.pb-slip__x:hover{color:#ff8a8d;background:rgba(229,72,77,.12)}
.pb-slip__empty{display:grid;place-items:center;gap:8px;padding:26px 16px;text-align:center}
.pb-slip__empty .pb-ico{width:34px;height:34px;color:var(--pb-line2)}
.pb-slip__empty p{font-size:12.5px;color:var(--pb-tx3);margin:0}
.pb-slip__hd{padding:10px 12px 2px;margin:0;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--pb-tx3)}
.pb-slip__save{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--pb-tx3);padding:2px 0}
.pb-slip__save:hover{color:var(--pb-acc2)}
.pb-slip__save .pb-ico{width:14px;height:14px}
.pb-slip__foot{padding:10px;border-top:1px solid var(--pb-line);display:grid;gap:8px}

/* Registrierungsfeld in der rechten Spalte */
.pb-reg{overflow:hidden}
.pb-reg__b{padding:12px 13px 14px;display:grid;gap:9px}
.pb-reg__tabs{display:flex;gap:6px;margin-bottom:2px}
.pb-reg__tabs span{padding:6px 13px;border-radius:8px;font-size:12px;font-weight:700;color:var(--pb-tx3);background:#35363a;border:1px solid var(--pb-line)}
.pb-reg__tabs span.is-on{background:var(--pb-accsoft);border-color:rgba(4,196,144,.45);color:var(--pb-acc2)}
.pb-reg__f{display:grid;gap:4px}
.pb-reg__f>span:first-child{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--pb-tx3)}
.pb-reg__v{display:block;height:36px;line-height:34px;padding:0 12px;border-radius:9px;background:#35363a;border:1px solid var(--pb-line);font-size:13.5px;font-weight:600;color:var(--pb-tx)}
.pb-reg__v--dim{color:var(--pb-tx3);letter-spacing:2px}
.pb-reg__legal{font-size:10.5px;line-height:1.5;color:var(--pb-tx3);margin:0}
.pb-reg__promo{display:block;padding:11px 13px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#02150f;background:var(--pb-grad);border-top:1px solid var(--pb-line)}
.pb-reg__promo:hover{filter:brightness(1.08)}
.pb-slip__row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--pb-tx3)}
.pb-slip__row b{color:var(--pb-tx);font-size:14px}
.pb-slip__row b.is-acc{color:var(--pb-acc2)}

/* 8-second live drill */
.pb-drill{display:grid;gap:14px}
.pb-drill__screen{position:relative;padding:16px;border-radius:12px;background:#303235;border:1px solid var(--pb-line);overflow:hidden}
.pb-drill__top{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--pb-tx3);margin-bottom:10px}
.pb-drill__dot{width:7px;height:7px;border-radius:50%;background:var(--pb-live);animation:pbPulse 1.4s infinite}
@keyframes pbPulse{0%,100%{opacity:1}50%{opacity:.25}}
.pb-drill__clock{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--pb-tx)}
.pb-drill__score{font-size:22px;font-weight:800;text-align:center;letter-spacing:2px;margin:4px 0 12px}
.pb-drill__oddbtn{width:100%;height:56px;border-radius:11px;background:var(--pb-panel3);border:1px solid var(--pb-line2);display:flex;align-items:center;justify-content:center;gap:10px;font-size:22px;font-weight:800;color:var(--pb-tx);font-variant-numeric:tabular-nums;transition:.12s}
.pb-drill__oddbtn:hover{border-color:var(--pb-acc)}
.pb-drill__oddbtn.is-locked{opacity:.45;cursor:not-allowed;border-style:dashed}
.pb-drill__oddbtn small{font-size:11px;font-weight:700;color:var(--pb-tx3);text-transform:uppercase;letter-spacing:.8px}
.pb-drill__meter{height:5px;border-radius:3px;background:#3a3c40;overflow:hidden;margin-top:10px}
.pb-drill__meter i{display:block;height:100%;background:var(--pb-acc);width:100%;transition:width .1s linear}
.pb-drill__log{display:grid;gap:5px;max-height:120px;overflow-y:auto;font-size:12px;color:var(--pb-tx3)}
.pb-drill__log span{padding:5px 9px;border-radius:7px;background:#35363a;border:1px solid var(--pb-line)}
.pb-drill__log span.is-win{color:var(--pb-acc2);border-color:rgba(4,196,144,.3)}
.pb-drill__log span.is-lose{color:#ff8a8d;border-color:rgba(229,72,77,.3)}

/* coefficient shelf (casino) */
.pb-shelf{display:grid;gap:14px}
.pb-shelf__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px}
.pb-shelf__tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:98px;padding:9px;border-radius:10px;background:linear-gradient(160deg,#f4f7f8,#dfe6ea);color:#343639;border:1px solid #cfd8dd;text-align:left;transition:.15s}
.pb-shelf__tile:hover,.pb-shelf__tile.is-on{transform:translateY(-2px);box-shadow:0 0 0 2px var(--pb-acc)}
.pb-shelf__coef{position:absolute;top:7px;left:7px;padding:2px 6px;border-radius:5px;background:#1f4e8c;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.4px}
.pb-shelf__n{font-size:12px;font-weight:700}
.pb-shelf__k{font-size:10px;color:#5c5f66}
.pb-shelf__viz{display:grid;gap:10px;padding:14px;border-radius:11px;background:#303235;border:1px solid var(--pb-line)}
.pb-shelf__bars{display:flex;align-items:flex-end;gap:3px;height:96px}
.pb-shelf__bars i{flex:1;background:var(--pb-grad);border-radius:2px 2px 0 0;transition:height .4s ease;min-height:2px}
.pb-shelf__axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--pb-tx3)}

/* house-edge bars */
.pb-edge{display:grid;gap:10px}
.pb-edge__row{display:grid;grid-template-columns:190px minmax(0,1fr) 62px;gap:10px;align-items:center;font-size:13px}
.pb-edge__row span{color:var(--pb-tx2)}
.pb-edge__row b{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}

/* path chooser (app) */
.pb-paths{display:grid;gap:12px}
.pb-quest{display:grid;gap:8px}
.pb-quest__q{font-size:13.5px;font-weight:700;color:var(--pb-tx)}
.pb-opts{display:flex;flex-wrap:wrap;gap:8px}
.pb-opt{padding:8px 14px;border-radius:9px;background:#35363a;border:1px solid var(--pb-line);font-size:12.5px;font-weight:600;color:var(--pb-tx2);transition:.15s}
.pb-opt:hover{border-color:var(--pb-line2);color:var(--pb-tx)}
.pb-opt.is-on{background:var(--pb-accsoft);border-color:rgba(4,196,144,.5);color:var(--pb-acc2)}
.pb-result{display:grid;gap:10px;padding:15px;border-radius:11px;background:#303235;border:1px solid rgba(4,196,144,.3)}
.pb-result__t{font-size:17px;font-weight:800;color:var(--pb-acc2)}
.pb-result__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}

/* phone frame */
/* aspect-ratio haelt den Rahmen auch dann in Form, wenn das Bild (noch) fehlt */
.pb-phone{width:100%;max-width:250px;aspect-ratio:9/16;margin:0 auto;border-radius:26px;border:8px solid #3d3f43;background:linear-gradient(165deg,#393b3f,#2f3134);overflow:hidden;box-shadow:var(--pb-sh);position:relative}
.pb-phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:64px;height:5px;border-radius:3px;background:#44464b;z-index:3}
.pb-phone img{width:100%;height:100%;object-fit:cover;display:block}
.pb-phone__ph{aspect-ratio:9/17;display:grid;place-items:center;background:linear-gradient(165deg,#393b3f,#2f3134);color:var(--pb-tx3);font-size:12px;text-align:center;padding:20px}

/* ---------- 14. FAQ ---------- */
.pb-faq{display:grid;gap:9px;margin:0 0 8px}
.pb-q{border-radius:11px;background:var(--pb-bg2);border:1px solid var(--pb-line);overflow:hidden}
.pb-q__b{display:flex;align-items:flex-start;gap:12px;width:100%;padding:15px 17px;text-align:left;font-size:14.6px;font-weight:700;color:var(--pb-tx);line-height:1.45}
.pb-q__b:hover{background:rgba(4,196,144,.05)}
.pb-q__pl{margin-left:auto;flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--pb-panel3);color:var(--pb-acc2);font-size:15px;line-height:1;transition:transform .25s}
.pb-q.is-open .pb-q__pl{transform:rotate(45deg)}
.pb-q__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.pb-q.is-open .pb-q__a{grid-template-rows:1fr}
.pb-q__in{overflow:hidden}
.pb-q__in p{padding:0 17px 15px;margin:0;font-size:14.3px;color:var(--pb-tx2);line-height:1.68}

/* ---------- 15. REVIEWS ---------- */
.pb-score{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 18px;margin:0 0 16px;border-radius:12px;background:linear-gradient(100deg,rgba(4,196,144,.12),rgba(4,196,144,.02));border:1px solid rgba(4,196,144,.28)}
.pb-score__n{font-size:38px;font-weight:800;line-height:1;color:var(--pb-acc2);letter-spacing:-1px}
.pb-score__m{display:grid;gap:3px}
.pb-score__k{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--pb-tx3)}
.pb-score__st{font-size:16px;letter-spacing:2px;color:var(--pb-gold)}

/* Staffel des Willkommenspakets */
.pb-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:0 0 20px}
.pb-tier{display:flex;flex-direction:column;gap:7px;padding:15px 16px;border-radius:12px;background:linear-gradient(160deg,#3c3e42,#35373b);border:1px solid var(--pb-line);transition:.18s}
.pb-tier:hover{transform:translateY(-3px);border-color:rgba(4,196,144,.5);box-shadow:var(--pb-sh)}
.pb-tier__k{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--pb-tx3)}
.pb-tier__v{font-size:16px;font-weight:800;line-height:1.28;color:var(--pb-acc2);letter-spacing:-.2px}
.pb-tier__d{font-size:12.5px;color:var(--pb-tx2);line-height:1.5}
.pb-tier .pb-btn{margin-top:auto;align-self:flex-start}
.pb-tier--sport .pb-tier__v{color:var(--pb-gold)}
.pb-score__c{font-size:12.5px;color:var(--pb-tx3)}
.pb-revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:11px;margin:0 0 18px}
.pb-rev{display:grid;gap:8px;padding:15px 16px;border-radius:12px;background:var(--pb-bg2);border:1px solid var(--pb-line)}
.pb-rev__h{display:flex;align-items:center;gap:10px}
.pb-rev__av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;color:#02150f;background:var(--pb-grad)}
.pb-rev__av--b{background:linear-gradient(180deg,#5aa9e6,#2f6ea8);color:#04202e}
.pb-rev__av--g{background:linear-gradient(180deg,#f2c85c,#c4901c);color:#3a2704}
.pb-rev__av--p{background:linear-gradient(180deg,#b98ae0,#7d4fb0);color:#22103a}
.pb-rev__av--r{background:linear-gradient(180deg,#e88a8d,#b4474b);color:#3a1012}
.pb-rev__id{display:grid;gap:2px;min-width:0}
.pb-rev__n{display:block;font-size:13.5px;font-weight:700;color:var(--pb-tx);line-height:1.25}
.pb-rev__k{display:block;font-size:11.5px;color:var(--pb-tx3);line-height:1.3}
.pb-rev__st{margin-left:auto;font-size:13px;letter-spacing:1.5px;color:var(--pb-gold);white-space:nowrap}
.pb-rev__q{font-size:14px;line-height:1.65;color:var(--pb-tx2);margin:0}

/* author */
.pb-author{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;margin:18px 0;border-radius:12px;background:var(--pb-bg2);border:1px solid var(--pb-line)}
.pb-author__av{width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:800;color:#02150f;background:var(--pb-grad)}
.pb-author__n{font-size:14.5px;font-weight:800;color:var(--pb-tx)}
.pb-author__r{font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--pb-acc2);margin-bottom:5px}
.pb-author__t{font-size:13.5px;color:var(--pb-tx2);line-height:1.6;margin:0}
.pb-author__m{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 0}
.pb-author__m span{padding:3px 10px;border-radius:6px;background:var(--pb-panel2);border:1px solid var(--pb-line);font-size:11.5px;font-weight:700;color:var(--pb-tx3)}
.pb-author__m span:last-child{color:var(--pb-acc2);border-color:rgba(4,196,144,.35)}
.pb-foot__note{font-size:11.5px;line-height:1.65;color:var(--pb-tx3);margin:0 0 18px;padding:13px 16px;border-radius:10px;background:var(--pb-bg2);border:1px solid var(--pb-line)}

/* responsible gambling block */
.pb-rg{padding:18px 20px;border-radius:12px;background:linear-gradient(100deg,rgba(229,72,77,.09),rgba(229,72,77,.02));border:1px solid rgba(229,72,77,.24)}
.pb-rg h2{margin-top:0 !important;border-left-color:var(--pb-live) !important}
.pb-rg__tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:14px}
.pb-rg__tool{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:9px;background:var(--pb-bg2);border:1px solid var(--pb-line);font-size:12.5px;font-weight:600;color:var(--pb-tx2)}
.pb-rg__tool .pb-ico{width:16px;height:16px;color:var(--pb-live)}

/* ---------- 16. FOOTER ---------- */
.pb-foot{margin-top:26px;background:var(--pb-bg2);border-top:1px solid var(--pb-line)}
.pb-foot__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;padding:30px 0 24px}
.pb-fcol h3{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--pb-tx);margin-bottom:11px}
.pb-fcol a{display:block;font-size:12.5px;color:var(--pb-tx3);padding:4px 0;transition:.15s}.pb-fcol :is(span,div):where(.go-link){display:block;font-size:12.5px;color:var(--pb-tx3);padding:4px 0;transition:.15s}
.pb-fcol a:hover{color:var(--pb-acc2)}.pb-fcol :is(span,div):where(.go-link):hover{color:var(--pb-acc2)}
.pb-fcol a .pb-ico{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:6px}.pb-fcol :is(span,div):where(.go-link) .pb-ico{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:6px}
.pb-foot__aware{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 18px;border-radius:12px;background:var(--pb-panel);border:1px solid var(--pb-line);margin-bottom:18px}
.pb-aware{font-size:19px;font-weight:800;letter-spacing:-.4px;white-space:nowrap}
.pb-aware span{color:#f28f2b}
.pb-foot__aware p{font-size:12.5px;color:var(--pb-tx3);margin:0}
.pb-foot__bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 26px}
.pb-foot__copy{font-size:12px;color:var(--pb-tx3);flex:1 1 320px;line-height:1.6}
.pb-foot__age{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;border:2px solid var(--pb-live);color:#ff9497;font-size:13px;font-weight:800}
.pb-foot__mob{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 18px;border-radius:9px;background:var(--pb-panel2);border:1px solid var(--pb-line);font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--pb-tx2)}
.pb-foot__mob:hover{color:var(--pb-acc2);border-color:rgba(4,196,144,.4)}
.pb-foot__soc{display:flex;gap:8px}
.pb-foot__soc a{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--pb-panel);border:1px solid var(--pb-line);color:var(--pb-tx2)}.pb-foot__soc :is(span,div):where(.go-link){width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--pb-panel);border:1px solid var(--pb-line);color:var(--pb-tx2)}
.pb-foot__soc a:hover{color:var(--pb-acc2);border-color:rgba(4,196,144,.4)}.pb-foot__soc :is(span,div):where(.go-link):hover{color:var(--pb-acc2);border-color:rgba(4,196,144,.4)}
.pb-foot__pays{display:flex;flex-wrap:wrap;gap:6px}
.pb-pay{padding:4px 9px;border-radius:6px;background:var(--pb-panel);border:1px solid var(--pb-line);font-size:10.5px;font-weight:700;color:var(--pb-tx3)}

/* back to top */
.pb-up{position:fixed;right:18px;bottom:18px;z-index:55;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--pb-panel2);border:1px solid var(--pb-line2);color:var(--pb-tx);opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;box-shadow:var(--pb-sh)}
.pb-up.is-on{opacity:1;visibility:visible;transform:none}
.pb-up:hover{background:var(--pb-acc);color:#02150f;border-color:var(--pb-acc)}

/* toc */
.pb-toc{padding:14px 16px;margin:0 0 22px;border-radius:12px;background:var(--pb-bg2);border:1px solid var(--pb-line)}
.pb-toc__h{font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--pb-tx3);margin-bottom:9px}
.pb-toc ol{margin:0;padding:0;list-style:none;counter-reset:pbt;display:grid;gap:5px}
.pb-toc li{counter-increment:pbt}
.pb-toc a{display:flex;gap:9px;font-size:13.5px;color:var(--pb-tx2);padding:3px 0}.pb-toc :is(span,div):where(.go-link){display:flex;gap:9px;font-size:13.5px;color:var(--pb-tx2);padding:3px 0}
.pb-toc a::before{content:counter(pbt,decimal-leading-zero);color:var(--pb-acc);font-weight:800;font-size:12px;flex:none}.pb-toc :is(span,div):where(.go-link)::before{content:counter(pbt,decimal-leading-zero);color:var(--pb-acc);font-weight:800;font-size:12px;flex:none}
.pb-toc a:hover{color:var(--pb-acc2)}.pb-toc :is(span,div):where(.go-link):hover{color:var(--pb-acc2)}

/* ---------- 17. ANKER ---------- */
/* Die Kopfzeile klebt (52 + 48 px) — ohne scroll-margin landet jedes Sprungziel darunter. */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:112px}
@media (max-width:1024px){[id]{scroll-margin-top:64px}}

/* Rechtstexte: etwas engere Zeilen, damit die langen Listen ruhiger wirken */
.pb-legal .pb-bul li,.pb-legal .pb-num li{font-size:14.2px;line-height:1.62}
.pb-legal h2{margin-top:30px}

/* ---------- 17b. BEWEGUNG ----------
   Der versteckte Ausgangszustand haengt an .pb-js, das erst das Skript setzt.
   Ohne JavaScript bleibt also alles sichtbar — kein leeres Blatt. */
.pb-js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.22,.68,.35,1),transform .55s cubic-bezier(.22,.68,.35,1)}
.pb-js [data-reveal].is-in{opacity:1;transform:none}
.pb-js [data-reveal][data-reveal="left"]{transform:translateX(-18px)}
.pb-js [data-reveal][data-reveal="zoom"]{transform:scale(.965)}
.pb-js [data-reveal].is-in{transform:none}
/* Kacheln laufen leicht versetzt ein */
.pb-js [data-stagger]>*{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.pb-js [data-stagger].is-in>*{opacity:1;transform:none}
.pb-js [data-stagger].is-in>*:nth-child(1){transition-delay:.02s}
.pb-js [data-stagger].is-in>*:nth-child(2){transition-delay:.06s}
.pb-js [data-stagger].is-in>*:nth-child(3){transition-delay:.10s}
.pb-js [data-stagger].is-in>*:nth-child(4){transition-delay:.14s}
.pb-js [data-stagger].is-in>*:nth-child(5){transition-delay:.18s}
.pb-js [data-stagger].is-in>*:nth-child(6){transition-delay:.22s}
.pb-js [data-stagger].is-in>*:nth-child(7){transition-delay:.26s}
.pb-js [data-stagger].is-in>*:nth-child(8){transition-delay:.30s}
.pb-js [data-stagger].is-in>*:nth-child(n+9){transition-delay:.34s}

/* Lichtstreifen ueber der Hauptschaltflaeche */
.pb-btn--reg{position:relative;overflow:hidden}
.pb-btn--reg::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-18deg);animation:pbSheen 5.5s ease-in-out infinite}
@keyframes pbSheen{0%,62%{left:-60%}84%,100%{left:130%}}

/* Kopfzeile bekommt Tiefe, sobald gescrollt wird */
.pb-head{transition:box-shadow .25s ease,background .25s ease}
.pb-head.is-stuck{box-shadow:0 1px 0 #27282b,0 10px 30px rgba(0,0,0,.55)}

/* Feine Hebe-Effekte */
.pb-prow,.pb-store,.pb-bon,.pb-game,.pb-fast,.pb-livec,.pb-sport,.pb-cat{will-change:transform}
.pb-prow:hover{transform:translateX(3px)}
.pb-sec__all:hover,.pb-arrow:hover{transform:translateY(-1px)}
.pb-q__b:hover .pb-q__pl{background:var(--pb-acc);color:#02150f}
.pb-rev{transition:transform .2s ease,border-color .2s ease}
.pb-rev:hover{transform:translateY(-2px);border-color:var(--pb-line2)}
.pb-score__n{transition:transform .3s ease}
.pb-score:hover .pb-score__n{transform:scale(1.06)}
.pb-logo img{transition:transform .25s ease}
.pb-logo:hover img{transform:scale(1.04)}

/* Zaehler, die beim Einlaufen hochlaufen */
.pb-num-anim{font-variant-numeric:tabular-nums}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:1500px){
  .pb-shell{grid-template-columns:214px minmax(0,1fr) 280px}
  /* ohne diese Zeile erbt --norail die dritte Spalte von oben und laesst
     auf dem iPad rechts eine leere Bahn stehen */
  .pb-shell--norail{grid-template-columns:214px minmax(0,1fr)}
  .pb-shell--wide{grid-template-columns:minmax(0,1fr)}
  .pb-sports{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1240px){
  .pb-shell,.pb-shell--norail{grid-template-columns:minmax(0,1fr)}
  .pb-rail,.pb-rail--r{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid;max-height:none;overflow:visible;padding-right:0}
  .pb-cats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .pb-burger{display:flex}
  .pb-nav{display:none}
  .pb-leagues{display:none}
  .pb-rail,.pb-rail--r{display:none}
  .pb-art{padding:22px 20px 26px}
  .pb-abn{flex-direction:column;align-items:flex-start;text-align:left}
  .pb-abn__art{width:100%;max-height:160px}
  .pb-abn__art img{max-height:150px}
}
@media (max-width:760px){
  body{font-size:14.6px}
  .pb-wrap,.pb-shell{padding-left:12px;padding-right:12px}
  .pb-top{height:50px;gap:8px}
  .pb-logo img{width:100px}
  .pb-gift,.pb-gear{display:none}
  .pb-btn--login span{display:none}
  .pb-btn{padding:0 12px;font-size:11.5px}
  .pb-btn--login{padding:0 10px}
  .pb-cats{grid-template-columns:repeat(2,1fr)}
  .pb-sports{grid-template-columns:repeat(4,1fr)}
  .pb-hero__track{min-height:auto}
  .pb-hero__slide{display:none;flex-direction:column;align-items:stretch}
  .pb-hero__slide.is-on{display:flex}
  .pb-hero__art{position:relative;aspect-ratio:16/7}
  .pb-hero__art img{padding:10px;object-position:center;object-fit:contain}
  .pb-hero__slide::after{background:linear-gradient(180deg,rgba(45,46,49,.02) 40%,rgba(45,46,49,.55) 80%,rgba(45,46,49,.85) 100%)}
  .pb-hero__body{padding:16px 18px 24px;max-width:100%}
  .pb-hero__nav{display:none}
  .pb-art{padding:18px 15px 22px}
  .pb-art h1{font-size:24px}
  .pb-art h2{font-size:19px;margin-top:28px;padding-left:11px}
  .pb-foot__grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .pb-edge__row{grid-template-columns:120px minmax(0,1fr) 54px;font-size:12px}
  .pb-mech__b{padding:14px}
  .pb-games{grid-auto-columns:126px}
  .pb-tw table{font-size:13px}
  .pb-tw th,.pb-tw td{padding:10px}
}
@media (max-width:480px){
  .pb-sports{grid-template-columns:repeat(3,1fr)}
  .pb-cats{grid-template-columns:1fr 1fr}
  .pb-foot__grid{grid-template-columns:1fr}
  .pb-score__n{font-size:32px}
  .pb-kpis{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .pb-js [data-reveal],.pb-js [data-stagger]>*{opacity:1 !important;transform:none !important}
  .pb-btn--reg::after{display:none}
  .pb-hero__slide.is-on .pb-hero__art img{transform:none}
}

/* planbet-network:start */
/* =========================================================================
   PlanBet network - cross-domain country links in the footer.
   Neutral, currentColor-derived surface so the strip sits correctly on every
   fork's footer, light or dark. Flags come from the inline #f-xx sprite.
   ========================================================================= */
.pb-geo{margin-top:26px;padding-top:20px;border-top:1px solid rgba(127,127,127,.3);border-top:1px solid color-mix(in srgb,currentColor 24%,transparent)}
.pb-geo__defs{position:absolute;width:0;height:0;overflow:hidden}
.pb-geo__h{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;opacity:.9}
.pb-geo__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pb-geo__i{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;text-decoration:none;color:inherit;font-size:12.5px;font-weight:700;line-height:1.15;white-space:nowrap;background:rgba(127,127,127,.13);background:color-mix(in srgb,currentColor 11%,transparent);border:1px solid rgba(127,127,127,.28);border:1px solid color-mix(in srgb,currentColor 20%,transparent);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.pb-geo__i:hover{background:rgba(127,127,127,.24);background:color-mix(in srgb,currentColor 20%,transparent);transform:translateY(-1px)}
.pb-geo__i:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.pb-geo__f{width:18px;height:12px;flex:0 0 auto;border-radius:2px;box-shadow:0 0 0 1px rgba(127,127,127,.45)}
@media (max-width:640px){
  .pb-geo{margin-top:22px;padding-top:16px}
  .pb-geo__h{margin-bottom:11px}
  .pb-geo__list{gap:6px}
  .pb-geo__i{padding:6px 10px;gap:6px;font-size:11.5px}
  .pb-geo__f{width:16px;height:11px}
}
@media (prefers-reduced-motion:reduce){
  .pb-geo__i{transition:none}
  .pb-geo__i:hover{transform:none}
}
/* planbet-network:end */

/* multi1-loc:start */
/* The locale picker in the header. Skin-neutral on purpose: it derives its
   surfaces from the palette variables the shared stylesheet already defines,
   so it needs no per-fork colour of its own. */
.pb-loc{position:relative;flex:0 0 auto}
.pb-loc__btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:9px;background:var(--pb-panel2);border:1px solid var(--pb-line);color:var(--pb-tx);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.pb-loc__btn:hover{background:var(--pb-panel3);border-color:var(--pb-line2)}
.pb-loc__code{letter-spacing:.04em}
.pb-loc__defs{position:absolute;width:0;height:0;overflow:hidden}
.pb-loc__f{width:20px;height:13px;flex:0 0 auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35) inset}
.pb-loc__cav{width:12px;height:12px;transition:transform .16s ease}
.pb-loc.is-open .pb-loc__cav{transform:rotate(180deg)}
.pb-loc__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:none;width:min(560px,86vw);padding:10px;border-radius:var(--pb-r2);background:var(--pb-panel);border:1px solid var(--pb-line2);box-shadow:var(--pb-sh)}
.pb-loc.is-open .pb-loc__menu{display:block}
.pb-loc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px;max-height:min(60vh,420px);overflow:auto}
/* The menu scrolls, so it gets a scrollbar, and the platform default is a wide
   light track with stepper arrows sitting inside a dark panel. The rails in
   this build already style theirs; this matches them, and background-clip
   keeps the thumb slim without the track collapsing to a hairline. */
.pb-loc__grid{scrollbar-width:thin;scrollbar-color:var(--pb-line2) transparent}
.pb-loc__grid::-webkit-scrollbar{width:10px}
.pb-loc__grid::-webkit-scrollbar-track{background:transparent}
.pb-loc__grid::-webkit-scrollbar-button{display:none;height:0;width:0}
.pb-loc__grid::-webkit-scrollbar-thumb{background:var(--pb-line2);border:3px solid transparent;background-clip:content-box;border-radius:99px}
.pb-loc__grid::-webkit-scrollbar-thumb:hover{background:var(--pb-tx3);background-clip:content-box}
.pb-loc__i{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:8px;row-gap:1px;padding:7px 9px;border-radius:8px;text-decoration:none;color:var(--pb-tx);font-size:12.5px;font-weight:700;line-height:1.2}
.pb-loc__i .pb-loc__f{grid-row:1/3}
.pb-loc__i span{font-size:11px;font-weight:600;color:var(--pb-tx3)}
/* the endonym must outrank the rule above it, which matches every span here */
.pb-loc__i .pb-loc__n{font-size:12.5px;font-weight:700;color:inherit}
.pb-loc__i:hover{background:var(--pb-panel2)}
.pb-loc__i.is-on{background:var(--pb-accsoft);color:var(--pb-acc2)}
.pb-nav__top{display:none;align-items:center;gap:4px;margin-left:12px}
.pb-navlink{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:10px;text-decoration:none;color:var(--pb-tx2);font-size:14.5px;font-weight:700;white-space:nowrap}
.pb-navlink .pb-ico{width:19px;height:19px}
.pb-navlink:hover{color:var(--pb-tx);background:var(--pb-panel2)}
.pb-navlink.is-active{color:var(--pb-acc2);background:var(--pb-accsoft)}
/* ONE BREAKPOINT, 26 VOCABULARIES. The five nav labels are 542px wide in
   German and 661px in Hungarian, so the width at which the inline nav fits is
   a property of the language, not of the design. Measured across all 26: at
   1100px the row had ZERO slack in eight locales even before the labels grew,
   and hu/ro went over the edge outright. The handover to the burger therefore
   moved to 1240px -- and because 1280 is an ordinary laptop, the band below
   1400px keeps the nav a step smaller rather than handing those screens a
   burger they do not need. Above 1400 it is the full size. */
@media (min-width:1240px){.pb-nav__top{display:flex}}
@media (min-width:1240px) and (max-width:1399px){
  .pb-nav__top{gap:2px;margin-left:8px}
  .pb-navlink{gap:7px;padding:8px 11px;font-size:13.5px}
  .pb-navlink .pb-ico{width:18px;height:18px}
}
/* THE HEADER RUNS OUT OF ROOM ON A PHONE. With a burger, a logo, the locale
   picker and two calls to action in one flex row, the browser shrinks the
   flex items — and the one it shrinks is the primary button, which then eats
   its own label under overflow:hidden. The render probe measured 20px cut off
   "Registrieren", 23px off "Regisztráció" and 15px off the Hindi label at
   360px; nothing in the markup shows it.
   The primary CTA is pinned to its content, and the two things that can be
   understood without words give up theirs: the login button keeps its user
   icon, the locale picker its gear. Scoped to .pb-top so no other button in
   the build is affected. */
@media (max-width:900px){
  .pb-top .pb-btn{flex:0 0 auto;white-space:nowrap}
  .pb-top .pb-btn--login span{display:none}
}
@media (max-width:640px){
  .pb-loc__menu{width:min(420px,92vw)}
  .pb-loc__grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .pb-top .pb-loc__code{display:none}
}
/* PINNING THE CTA MOVED THE SURPLUS, IT DID NOT REMOVE IT: the label stopped
   being cut and the whole PAGE went 30px (de) / 32px (hu) wide instead, which
   is a horizontal scrollbar on every phone. At 360px the row has
   360 − 24 padding − 40 gaps = 296px for its items and was asking for 338
   (de) / 340 (hu); Greek fit only because "Εγγραφή" is 30px shorter than
   "Registrieren" — the same layout, passing by luck of vocabulary.
   So the 44px is taken back from spacing rather than from any label: the logo
   steps down, the gaps and the row padding tighten, and the buttons trade
   their generous side padding. Nothing is hidden that was not already hidden,
   and nothing is hidden that was not already hidden.
   The first pass of this block stopped the scrollbar but left zero slack, and
   the tell was the burger: it is the one item without flex:0 0 auto, so it
   silently gave up 6px (36 → 30) to pay for the German and Hungarian labels
   while the spacer read 0. A layout balancing on its own hamburger is one
   long word from breaking again, so the CTA also steps down a half point and
   the logo gives 6px more. Measured after: de 308px and hu 310px of a 310px
   budget with the burger back at its full 36. */
@media (max-width:480px){
  .pb-top{gap:6px;padding-left:10px;padding-right:10px}
  .pb-logo img{width:78px}
  .pb-top .pb-btn--reg{padding:0 10px;font-size:12px}
  .pb-top .pb-btn--login{padding:0 9px}
  .pb-loc__btn{padding:0 8px}
  .pb-burger{flex:0 0 auto}
}
/* At exactly 360px German and Hungarian still ask for 315px and 318px of a
   310px row, so they fit only because Chrome leaves the right padding out of
   scrollWidth: no scrollbar, but the login button ends 2px from the edge
   instead of 10. The last 18px comes from the locale picker's caret — it is
   the only purely decorative thing left in the row, and the control still
   reads as a control without it. Not the wordmark: shrinking that far would
   trade a real gutter for an unreadable logo. */
@media (max-width:400px){
  .pb-loc__cav{display:none}
}
/* THE CATEGORY CHIP CUT ITS OWN LABEL. .pb-cat is a flex row with
   overflow:hidden, and a flex item will not shrink below its longest word, so
   any label that does not fit was SLICED with nothing in the DOM to show for
   it. Measured across all 26 locales: "Tragamonedas" lost 40.3px at 360px and
   still 11.3px at 1260px in es/ar/cl, and gr, hu, no, de, at and ch each lost
   between 3.8 and 12.8px at 360 -- English never clipped, so the whole defect
   was invisible from the locale the layout was designed in.
   overflow-wrap:anywhere is the load-bearing line: unlike break-word it also
   lowers the item's MIN-CONTENT width, so the flex item can finally shrink and
   the text wraps instead of disappearing. hyphens:auto puts the break at a
   real syllable where the language has rules for it, and the narrow-viewport
   step-down means the break is rarely needed at all. */
.pb-cat{overflow-wrap:anywhere;hyphens:auto}
/* Wrapping alone left "TRAGAMONED / AS" split across two lines, which reads as
   a broken tile rather than a long word. Below 480px the chips are two to a
   row and the icon eats 44 of the ~163px on offer, so the icon moves ABOVE the
   label: the text then gets the chip's full width, "TRAGAMONEDAS" fits on one
   line, and the break above stays as the safety valve for a longer word in a
   language not yet measured. */
@media (max-width:480px){
  .pb-cat{flex-direction:column;align-items:flex-start;gap:9px;min-height:0;padding:12px;font-size:12px;letter-spacing:.4px}
  .pb-cat__ic{width:34px;height:34px}
  .pb-cat__ic .pb-ico{width:20px;height:20px}
}
/* THE DRAWER, AND THE GAP IT CLOSES. The shared script has always looked for
   .pb-mnav and [data-scrim]; the generator never wrote them, so the burger was
   a button that did nothing. Worse, the old centred nav strip disappeared at
   1024px while the inline nav only appears at 1100px, so 1025-1099px had no
   menu at all. The burger now takes over at exactly the width the inline nav
   gives up. */
@media (max-width:1239px){.pb-burger{display:flex}}
@media (min-width:1240px){.pb-scrim,.pb-mnav{display:none}}
.pb-scrim{position:fixed;inset:0;z-index:70;background:rgba(3,7,10,.62);opacity:0;visibility:hidden;transition:opacity .22s ease}
.pb-scrim.is-on{opacity:1;visibility:visible}
.pb-mnav{position:fixed;z-index:75;top:0;left:0;bottom:0;width:min(310px,86vw);display:flex;flex-direction:column;gap:2px;padding:14px;background:var(--pb-panel);border-right:1px solid var(--pb-line2);box-shadow:var(--pb-sh);transform:translateX(-102%);transition:transform .24s ease;overflow-y:auto;overscroll-behavior:contain}
.pb-mnav.is-on{transform:none}
.pb-mnav__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.pb-mnav__h img{width:104px;height:auto}
.pb-mnav__x{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:var(--pb-panel2);border:1px solid var(--pb-line);color:var(--pb-tx);cursor:pointer}
.pb-mnav__x:hover{background:var(--pb-panel3)}
.pb-mnav__l{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;text-decoration:none;color:var(--pb-tx2);font-size:14px;font-weight:700;line-height:1.25}
.pb-mnav__l .pb-ico{width:18px;height:18px;flex:0 0 auto}
.pb-mnav__l:hover{background:var(--pb-panel2);color:var(--pb-tx)}
.pb-mnav__l.is-active{background:var(--pb-accsoft);color:var(--pb-acc2)}
.pb-mnav__cta{margin-top:14px}
/* THE FOOTER. The reference's six equal columns assume six link lists; this
   build has a brand block and four, so the first track is wider and the rest
   share what is left. */
.pb-foot__grid--multi{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))}
.pb-fcol--brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pb-fcol__logo{width:118px;height:auto}
.pb-fcol__site{margin:0;font-size:12.5px;font-weight:700;color:var(--pb-tx3)}
.pb-foot__shield{width:38px;height:38px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:var(--pb-accsoft);color:var(--pb-acc2)}
.pb-foot__shield .pb-ico{width:20px;height:20px}
.pb-foot__age{font-size:14.5px;letter-spacing:.2px;line-height:1;white-space:nowrap;background:rgba(229,72,77,.08)}
.pb-foot__mob{cursor:pointer}
.pb-foot__mob .pb-ico{width:14px;height:14px}
@media (max-width:1024px){.pb-foot__grid--multi{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pb-foot__grid--multi{grid-template-columns:1fr}
  .pb-foot__aware{flex-direction:column;align-items:flex-start}
  .pb-foot__mob{margin-left:0!important}
}
/* multi1-loc:end */

/* ==========================================================================
   MULTI2 additions — appended to MULTI1's stylesheet at build time.
   MULTI1 is the source; everything above this line is its rules, re-grounded.
   ========================================================================== */

/* ---------- in-article banners ----------
   MULTI1 designed .pb-abn and eleven pieces of art for it and then used it on no page. These
   articles are a long run of prose, so the banners go inside .pb-art to break it up — bigger
   than the original spec, because in the article they are the thing the eye should stop on.
   The text nodes are divs, not paragraphs: .pb-art p would otherwise outrank .pb-abn__t.
   -------------------------------------------------------------------------- */
.pb-art .pb-abn{min-height:200px;padding:26px 30px;gap:26px;margin:26px 0}
.pb-art .pb-abn::before{width:340px;height:340px;right:-60px;top:-80px}
.pb-art .pb-abn__t{font-size:clamp(21px,2.5vw,30px);margin:7px 0 0;max-width:22ch}
.pb-art .pb-abn__art{width:300px}
.pb-art .pb-abn__art img{max-height:212px}
.pb-art .pb-abn .pb-btn{margin-top:18px}

/* ---------- in-article game strips ----------
   A row of the page's own tiles, dropped into the casino article beside the prose that describes
   them. .pb-games and .pb-fasts keep their own layout; this only gives them room inside the
   article and stops the fast tiles growing to full width when only six of them are shown.
   -------------------------------------------------------------------------- */
.pb-art .pb-strip{margin:24px 0 26px}
.pb-art .pb-strip .pb-games{grid-auto-columns:minmax(132px,1fr)}
.pb-art .pb-strip .pb-fasts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

/* ---------- relocated modules inside the article ----------
   The lists of sports, events, offers and games used to be stacked above the article, so the whole
   first screen was chrome. They now sit beside the prose that describes them.
   -------------------------------------------------------------------------- */
.pb-art .pb-inmod{margin:26px 0}
.pb-art .pb-inmod .pb-sec{display:block}
.pb-art .pb-inmod .pb-sec__t{font-size:15px;margin:0}
.pb-art .pb-inmod .pb-sec__h{margin-bottom:10px}
.pb-art .pb-inmod .pb-tiers + .pb-tiers{margin-top:12px}

/* ---------- rail: a collapsible table of contents, and the offer it advertises ----------
   Collapsed by default. On a tablet the open list plus the offer panel filled the first screen
   before a single line of the article appeared.
   -------------------------------------------------------------------------- */
.pb-panel--toc{display:block}
.pb-panel--toc > summary{cursor:pointer;list-style:none;border-bottom:0}
.pb-panel--toc > summary::-webkit-details-marker{display:none}
.pb-panel--toc > summary::marker{content:""}
.pb-panel--toc > summary:hover{background:var(--pb-panel3)}
.pb-panel--toc[open] > summary{border-bottom:1px solid var(--pb-line)}
.pb-panel--toc .pb-panel__cav{width:14px;height:14px;margin-left:auto;color:var(--pb-tx3);transition:transform .18s ease}
.pb-panel--toc[open] .pb-panel__cav{transform:rotate(180deg)}

/* the welcome offer lives in the slide-out menu now, under the register button */
.pb-mnav__offer{margin-top:16px;padding-top:15px;border-top:1px solid var(--pb-line)}
.pb-mnav__offer-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;color:var(--pb-tx3);margin:0 0 9px}
.pb-mnav__offer-h .pb-ico{width:15px;height:15px;flex:0 0 auto;color:var(--pb-acc)}
.pb-mnav__offer .pb-btn{height:40px}
.pb-mnav__offer a.pb-btn--reg{color:#02150f}.pb-mnav__offer :is(span,div):where(.go-link).pb-btn--reg{color:#02150f}
.pb-roff__k{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--pb-acc2);margin:0}
.pb-roff__t{font-size:14.5px;font-weight:800;line-height:1.25;color:var(--pb-tx);margin:5px 0 11px}

/* the rail stacks instead of sitting two panels wide, so the offer follows the contents */
@media (max-width:1240px){
  .pb-rail,.pb-rail--r{grid-template-columns:minmax(0,1fr)}
}

/* ---------- app download buttons ----------
   .pb-stores / .pb-store were designed in MULTI1 and never used. The app page now opens with them
   under the category nav and closes with an app banner that carries the same three buttons.
   -------------------------------------------------------------------------- */
.pb-apptop .pb-stores{margin:0}
.pb-store{text-decoration:none;min-width:0}
.pb-store > span{min-width:0}
.pb-store__n,.pb-store__s{overflow-wrap:anywhere}
.pb-store .pb-ico{color:var(--pb-acc2)}
.pb-art .pb-abn--app .pb-abn__t{max-width:28ch}
.pb-art .pb-abn--app .pb-stores{margin:18px 0 0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.pb-art .pb-abn--app .pb-store{background:rgba(0,0,0,.28)}
@media (max-width:760px){
  .pb-art .pb-abn--app .pb-stores{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the in-house game shelf scrolls in one row, like the slot shelf above it ---------- */
.pb-fasts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--pb-line2) transparent}
.pb-fasts::-webkit-scrollbar{height:7px}
.pb-fasts::-webkit-scrollbar-track{background:transparent}
.pb-fasts::-webkit-scrollbar-thumb{background:var(--pb-line2);border-radius:4px}
.pb-fast{scroll-snap-align:start}
.pb-art .pb-strip .pb-fasts{grid-auto-columns:minmax(150px,1fr)}

/* ---------- the language menu always fits the screen ----------
   It was anchored to the right of its button with a viewport-relative width, so on a phone it ran
   off the left edge and the first column lost its flags. Below the desktop layout it is pinned to
   the viewport instead, and the list scrolls inside whatever height is left.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .pb-loc__menu{position:fixed;left:10px;right:10px;top:58px;width:auto;max-width:none}
  .pb-loc__grid{max-height:calc(100vh - 92px);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:1024px) and (orientation:landscape){
  .pb-loc__menu{top:52px}
  .pb-loc__grid{max-height:calc(100vh - 78px)}
}

/* ---------- hidden referral links ----------
   Partner links are .go-link spans with the URL Base64-encoded in data-url (assets/js/go.js opens
   them on click). An <a href> gets the hand cursor from the browser; a span does not, so it is given
   here, at zero specificity like the browser's own rule, so any author rule still wins. Rules
   written for the tag `a` are twinned for these elements at build time (go-link.js).
   -------------------------------------------------------------------------- */
:where(.go-link){cursor:pointer}

@media (max-width:900px){
  .pb-art .pb-abn__t{max-width:none}
  .pb-art .pb-abn__art{width:230px}
  .pb-art .pb-abn__art img{max-height:170px}
}
@media (max-width:760px){
  .pb-art .pb-abn{min-height:0;padding:20px 20px 22px;gap:14px}
  .pb-art .pb-abn__t{font-size:21px}
  .pb-art .pb-abn__art{width:100%;max-height:170px}
  .pb-art .pb-abn__art img{max-height:160px}
}