/* Betbox — shared box-minimal identity. Electric blue on light grey, rounded "box" cards. */
:root{
  --ink:#262626;
  --blue:#2000f0;
  --blue-dark:#1600b8;
  --bg:#e3e3e3;
  --panel:#ffffff;
  --surface:#e2e2e2;
  --line:#b5b5b5;
  --navy:#000a2a;
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;
  --maxw:1180px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;min-width:0;}
html{overflow-x:clip;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;}
button{font-family:inherit;}
.bb-wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.bb-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ===== Header ===== */
.bb-header{
  position:sticky;top:0;z-index:40;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.bb-header__inner{
  max-width:var(--maxw);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:24px;
}
.bb-logo{display:inline-flex;align-items:center;flex-shrink:0;}
.bb-logo-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);border-radius:var(--r-sm);
  padding:9px 14px;line-height:0;
}
.bb-logo-chip img{height:20px;width:auto;display:block;}
.bb-logo-mark{display:none;}
.bb-nav{display:flex;align-items:center;gap:22px;flex:1;}
.bb-nav__link{
  font-weight:600;font-size:15px;color:var(--ink);
  padding:6px 2px;border-bottom:2px solid transparent;
}
.bb-nav__link:hover,.bb-nav__link.is-active{color:var(--blue);border-bottom-color:var(--blue);}
.bb-header__cta{margin-left:auto;flex-shrink:0;}
.bb-burger{
  display:none;margin-left:auto;flex-shrink:0;
  width:42px;height:42px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);
  align-items:center;justify-content:center;cursor:pointer;
}
.bb-burger__bars{position:relative;width:18px;height:2px;background:var(--ink);}
.bb-burger__bars::before,.bb-burger__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .2s ease;
}
.bb-burger__bars::before{top:-6px;}
.bb-burger__bars::after{top:6px;}
.bb-mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100vh;
  background:var(--panel);z-index:60;
  transform:translateX(100%);transition:transform .25s ease;
  display:none;flex-direction:column;padding:20px;overflow-y:auto;
  border-left:1px solid var(--line);
}
/* display:none by default so the off-canvas panel never contributes to
   document.documentElement.scrollWidth while closed; JS flips .is-visible
   to display:flex a frame before animating .is-open in, and removes it
   again after the close transition finishes. */
.bb-mobile-nav.is-visible{display:flex;}
.bb-mobile-nav.is-open{transform:translateX(0);}
.bb-mobile-nav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.bb-mobile-nav__close{
  width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel);font-size:20px;line-height:1;cursor:pointer;
}
.bb-mobile-nav__link{
  display:block;padding:13px 4px;font-weight:600;font-size:16px;
  border-bottom:1px solid var(--surface);
}
.bb-mobile-nav__cta{margin-top:18px;}
.bb-scrim{
  position:fixed;inset:0;background:rgba(10,10,20,.45);z-index:55;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.bb-scrim.is-open{opacity:1;pointer-events:auto;}

/* ===== Buttons ===== */
.bb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-weight:700;font-size:15px;
  padding:12px 24px;border-radius:999px;white-space:nowrap;
  transition:background .15s ease;
}
.bb-btn:hover{background:var(--blue-dark);}
.bb-btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.bb-btn--ghost:hover{border-color:var(--blue);color:var(--blue);background:transparent;}
.bb-btn--block{width:100%;}

/* ===== Generic box card ===== */
.bb-box{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
}
.bb-eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue);margin:0 0 10px;
}
.bb-lead{margin:0;color:var(--ink);}

/* ===== Breadcrumbs ===== */
.bb-crumbs{padding:16px 0 0;}
.bb-crumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:#5c5c5c;}
.bb-crumbs__list li::after{content:"/";margin-left:6px;color:var(--line);}
.bb-crumbs__list li:last-child::after{content:"";}
.bb-crumbs__list a:hover{color:var(--blue);}
.bb-crumbs__list li[aria-current] span{color:var(--ink);font-weight:600;}

/* ===== Article / SEO block ===== */
.bb-article{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px clamp(18px,4vw,48px);margin:28px auto 56px;max-width:840px;
}
.bb-article h1{font-size:clamp(26px,4vw,36px);line-height:1.2;font-weight:800;margin:0 0 18px;}
.bb-article h2{font-size:clamp(20px,3vw,25px);font-weight:800;margin:34px 0 12px;}
.bb-article h3{
  font-size:17px;font-weight:700;margin:22px 0 0;padding:14px 30px 14px 0;
  border-top:1px solid var(--surface);cursor:pointer;position:relative;
}
.bb-article h2 + h3{border-top:none;margin-top:14px;}
.bb-article h3::after{
  content:"+";position:absolute;right:2px;top:12px;font-size:20px;font-weight:700;color:var(--blue);
}
.bb-article h3[aria-expanded="true"]::after{content:"–";}
.bb-article h3 + p{margin-top:8px;}
.bb-article p{margin:0 0 16px;color:var(--ink);}
.bb-article a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.bb-article table{
  width:100%;border-collapse:collapse;table-layout:fixed;margin:18px 0 22px;
  font-size:15px;overflow-wrap:anywhere;
}
.bb-article table td{
  border:1px solid var(--surface);padding:10px 12px;vertical-align:top;
  font-variant-numeric:tabular-nums;
}
.bb-article table tr td:first-child{font-weight:700;width:38%;background:var(--surface);}
.bb-faq-collapsed{
  display:grid;grid-template-rows:0fr;overflow:hidden;margin:0!important;opacity:0;transition:grid-template-rows .2s ease,opacity .2s ease;
}
.bb-faq-collapsed > *{overflow:hidden;}
.bb-faq-open{
  display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .2s ease,opacity .2s ease;
}
@media (max-width:560px){
  .bb-article table{font-size:12.5px;}
  .bb-article table td{padding:7px 8px;}
}

/* ===== Page intro band (subpages) ===== */
.bb-page-band{padding:26px 0 6px;}
.bb-page-band__title{font-size:clamp(22px,4vw,30px);font-weight:800;margin:6px 0 8px;}
.bb-page-band__desc{max-width:640px;color:#4b4b4b;margin:0;}

/* ===== Footer ===== */
.bb-footer{background:var(--navy);color:#e9e9f2;margin-top:40px;}
.bb-footer a:hover{color:#fff;}
.bb-footer__inner{max-width:var(--maxw);margin:0 auto;padding:40px 20px 26px;}
.bb-footer__grid{display:grid;gap:28px;grid-template-columns:1fr;}
@media (max-width:700px){
  /* grid tracks default to a min sizing of "auto" (= content's min-content),
     which a plain Nfr column does not shrink below even with min-width:0 on
     the children — collapse to one column below the header breakpoint so a
     4-column footer never forces the page wider than 360px. */
  .bb-footer__grid{grid-template-columns:1fr!important;}
}
.bb-footer__col-title{font-weight:700;color:#fff;margin:0 0 12px;font-size:14px;text-transform:uppercase;letter-spacing:.03em;}
.bb-footer__col a{display:block;padding:4px 0;color:#b9bad0;font-size:14px;}
.bb-footer__legal{
  border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:20px;
  font-size:12.5px;color:#9698b3;line-height:1.7;
}
.bb-footer__legal strong{color:#c9cae0;}

/* ===== 404 ===== */
.bb-404{
  min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 20px;gap:16px;
}
.bb-404__code{font-size:clamp(48px,10vw,88px);font-weight:800;color:var(--blue);margin:0;}
.bb-404__text{font-size:18px;margin:0;max-width:420px;}

/* ===== Responsive header collapse ===== */
@media (max-width:860px){
  .bb-nav,.bb-header__cta{display:none;}
  .bb-burger{display:inline-flex;}
}
@media (min-width:861px){
  .bb-mobile-nav,.bb-scrim{display:none;}
}


/* ===== Variant: bonus-fokus (betboxcasino.com.de) — CSS-decor hero, comparison table, badge cards ===== */
.bb-hero{padding:42px 0 8px;}
.bb-hero__grid{display:grid;grid-template-columns:1fr .8fr;gap:34px;align-items:center;}
.bb-hero__title{font-size:clamp(26px,4.4vw,40px);font-weight:800;line-height:1.15;margin:0 0 14px;}
.bb-hero__sub{color:#4b4b4b;font-size:16px;max-width:480px;margin:0 0 22px;}
.bb-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;}
.bb-hero__decor{position:relative;width:100%;aspect-ratio:1/1;max-width:340px;margin:0 auto;}
.bb-hero__decor span{
  position:absolute;border-radius:var(--r-lg);
}
.bb-hero__decor .d1{inset:8% 20% 30% 0;background:var(--surface);border:1px solid var(--line);}
.bb-hero__decor .d2{inset:22% 0 8% 26%;background:var(--navy);}
.bb-hero__decor .d3{
  inset:0 8% 46% 34%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.bb-hero__decor .d3::before{
  content:"?";color:#fff;font-weight:800;font-size:clamp(30px,6vw,44px);
}
.bb-hero__decor .d4{inset:52% 30% 0 4%;background:#fff;border:1px solid var(--line);}

.bb-compare{padding:38px 0 6px;}
.bb-compare__table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;table-layout:fixed;}
.bb-compare__table caption{text-align:left;padding:18px 20px 6px;font-weight:700;font-size:15px;caption-side:top;}
.bb-compare__table td{padding:12px 16px;border-top:1px solid var(--surface);font-size:14.5px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.bb-compare__table tr td:first-child{font-weight:700;width:44%;color:#333;}
.bb-compare__table tr td:last-child{color:#555;}

.bb-teasers{padding:38px 0 10px;}
.bb-teasers__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.bb-teaser{padding:22px 18px;position:relative;padding-top:38px;}
.bb-teaser__badge{
  position:absolute;top:-14px;left:18px;width:34px;height:34px;border-radius:var(--r-sm);
  background:var(--blue);color:#fff;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.bb-teaser__title{font-weight:700;font-size:15.5px;margin:0 0 6px;}
.bb-teaser__desc{font-size:13.5px;color:#555;margin:0 0 10px;}
.bb-teaser__link{font-weight:700;font-size:13.5px;color:var(--blue);}

@media (max-width:960px){
  .bb-hero__grid{grid-template-columns:1fr;}
  .bb-hero__decor{order:-1;max-width:220px;}
  .bb-teasers__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .bb-compare__table{table-layout:fixed;font-size:12.5px;}
  .bb-compare__table td{padding:9px 10px;}
}
@media (max-width:520px){
  .bb-teasers__grid{grid-template-columns:1fr;}
}