/* Bankobet — bankobet1.de — Übersicht + Sportwetten
   Handschrift-CSS, kein Framework. Präfix: bk- */

:root{
  --bk-bg:#1c1c1c;
  --bk-bg-soft:#212121;
  --bk-panel:#242424;
  --bk-panel-2:#2a2a2a;
  --bk-line:#424242;
  --bk-red:#ff5454;
  --bk-red-deep:#d63f3f;
  --bk-ink:#e2e2e2;
  --bk-ink-dim:#a8a8a8;
  --bk-purple:#c7a2e5;
  --bk-white:#ffffff;
  --bk-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bk-radius:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bk-bg);color:var(--bk-ink);font-family:var(--bk-font);line-height:1.55;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{tabular-nums:1}
.bk-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.bk-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Header ===== */
.bk-header{position:sticky;top:0;z-index:40;background:#181818;border-bottom:1px solid var(--bk-line)}
.bk-header__bar{max-width:1180px;margin:0 auto;padding:0 20px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.bk-logo{font-weight:800;font-size:22px;letter-spacing:.2px;color:var(--bk-white);display:flex;align-items:baseline;gap:2px;flex-shrink:0}
.bk-logo span{color:var(--bk-red)}
.bk-nav-desktop{display:flex;align-items:center;gap:28px;flex:1;justify-content:center}
.bk-nav-desktop a{font-size:14.5px;color:var(--bk-ink);opacity:.88;padding:6px 2px;border-bottom:2px solid transparent}
.bk-nav-desktop a:hover,.bk-nav-desktop a[aria-current="page"]{opacity:1;border-color:var(--bk-red)}
.bk-header__cta{flex-shrink:0}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 22px;font-weight:700;font-size:14.5px;white-space:nowrap;transition:transform .12s ease}
.bk-btn--primary{background:var(--bk-red);color:#1c1010}
.bk-btn--primary:hover{background:var(--bk-red-deep);transform:translateY(-1px)}
.bk-btn--ghost{background:transparent;border:1px solid var(--bk-line);color:var(--bk-ink)}
.bk-btn--ghost:hover{border-color:var(--bk-purple);color:var(--bk-purple)}
.bk-btn--block{width:100%}

.bk-burger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center;flex-shrink:0}
.bk-burger span{display:block;width:22px;height:2px;background:var(--bk-white);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.bk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.bk-mobile-nav{position:fixed;inset:68px 0 0 0;background:#151515;z-index:39;padding:28px 20px;display:none;overflow-y:auto}
.bk-mobile-nav.is-open{display:block}
.bk-mobile-nav a{display:block;padding:14px 4px;font-size:17px;border-bottom:1px solid var(--bk-line);color:var(--bk-ink)}
.bk-mobile-nav .bk-btn{margin-top:22px}

@media (max-width:860px){
  .bk-nav-desktop,.bk-header__cta{display:none}
  .bk-burger{display:flex}
}

/* ===== Hero (split, image right, text panel left) ===== */
.bk-hero{position:relative;background:var(--bk-bg)}
.bk-hero__media{position:relative;width:100%;aspect-ratio:1165/310;overflow:hidden;background:#0f0f0f}
.bk-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.bk-hero__panel{position:relative;z-index:2;margin:-64px 0 0 0;padding:0 20px 28px}
.bk-hero__box{max-width:640px;background:rgba(18,18,18,.94);border:1px solid var(--bk-line);border-radius:var(--bk-radius);padding:24px 26px;backdrop-filter:blur(2px)}
.bk-hero__kicker{margin:0 0 8px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bk-purple);font-weight:700}
.bk-hero__title{margin:0 0 10px;font-size:26px;line-height:1.25;font-weight:800;color:var(--bk-white)}
.bk-hero__lead{margin:0 0 18px;color:var(--bk-ink-dim);font-size:15px}
.bk-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

@media (min-width:640px){
  .bk-hero__media{aspect-ratio:1165/280}
  .bk-hero__title{font-size:32px}
}
@media (min-width:900px){
  .bk-hero{display:block}
  .bk-hero__media{aspect-ratio:1165/260}
  .bk-hero__panel{margin-top:-190px;padding-bottom:40px}
  .bk-hero__box{padding:32px 36px}
  .bk-hero__title{font-size:38px}
}

/* ===== Quick facts strip ===== */
.bk-facts{border-bottom:1px solid var(--bk-line);background:var(--bk-bg-soft)}
.bk-facts__row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bk-line)}
.bk-facts__item{background:var(--bk-bg-soft);padding:16px 18px;text-align:center}
.bk-facts__num{display:block;font-size:19px;font-weight:800;color:var(--bk-red)}
.bk-facts__label{display:block;font-size:12.5px;color:var(--bk-ink-dim);margin-top:2px}
@media (min-width:700px){.bk-facts__row{grid-template-columns:repeat(4,1fr)}}

/* ===== Sport odds board ===== */
.bk-board{padding:44px 0 8px}
.bk-board__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.bk-board__title{margin:0;font-size:20px;font-weight:800;color:var(--bk-white)}
.bk-board__sub{margin:0;color:var(--bk-ink-dim);font-size:13.5px}
.bk-league{margin-bottom:22px;border:1px solid var(--bk-line);border-radius:var(--bk-radius);overflow:hidden}
.bk-league__head{padding:10px 16px;background:var(--bk-panel-2);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--bk-purple)}
.bk-fixture{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:14px 16px;border-top:1px solid var(--bk-line)}
.bk-fixture__teams{font-size:14.5px;color:var(--bk-ink);min-width:0}
.bk-fixture__teams span{display:block;font-weight:600}
.bk-fixture__odds{display:flex;gap:8px;flex-shrink:0}
.bk-odd{min-width:52px;text-align:center;background:var(--bk-panel);border:1px solid var(--bk-line);border-radius:6px;padding:7px 6px}
.bk-odd small{display:block;font-size:10px;color:var(--bk-ink-dim);text-transform:uppercase}
.bk-odd strong{display:block;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:14.5px;color:var(--bk-white)}
.bk-board__note{font-size:12.5px;color:var(--bk-ink-dim);margin-top:6px}

/* ===== Promo stripe ===== */
.bk-promo{padding:36px 0}
.bk-promo__card{position:relative;border-radius:16px;overflow:hidden;background:var(--bk-red);display:grid;gap:0}
.bk-promo__img{width:100%;height:auto;aspect-ratio:430/215;object-fit:cover;opacity:.92}
.bk-promo__body{padding:22px 22px 26px;background:linear-gradient(180deg,rgba(28,10,10,.0),rgba(15,6,6,.55))}
.bk-promo__eyebrow{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#1c1010}
.bk-promo__title{margin:0 0 10px;font-size:20px;font-weight:800;color:#1c1010}
.bk-promo__text{margin:0 0 16px;color:#3a1414;font-size:14px;max-width:44ch}
@media (min-width:720px){
  .bk-promo__card{grid-template-columns:1.1fr 1fr;align-items:stretch}
  .bk-promo__img{height:100%;aspect-ratio:auto}
  .bk-promo__body{display:flex;flex-direction:column;justify-content:center;background:none}
}

/* ===== Payment strip ===== */
.bk-pay{padding:8px 0 40px}
.bk-pay__label{font-size:12.5px;color:var(--bk-ink-dim);margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em}
.bk-pay__row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.bk-pay__chip{display:flex;align-items:center;gap:8px;background:var(--bk-panel);border:1px solid var(--bk-line);border-radius:8px;padding:9px 14px}
.bk-pay__chip img{height:18px;width:auto}
.bk-pay__chip span{font-size:13px;color:var(--bk-ink-dim)}

/* ===== Link cards (interne Navigation) ===== */
.bk-links{padding:36px 0}
.bk-links__grid{display:grid;gap:14px;grid-template-columns:1fr}
.bk-linkcard{display:block;background:var(--bk-panel);border:1px solid var(--bk-line);border-radius:var(--bk-radius);padding:18px 20px;transition:border-color .15s ease}
.bk-linkcard:hover{border-color:var(--bk-red)}
.bk-linkcard__title{margin:0 0 6px;font-weight:800;font-size:15.5px;color:var(--bk-white)}
.bk-linkcard__text{margin:0;font-size:13.5px;color:var(--bk-ink-dim)}
@media (min-width:700px){.bk-links__grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Trust badge ===== */
.bk-trust{padding:8px 0 40px}
.bk-trust__box{display:flex;align-items:center;gap:16px;background:var(--bk-panel-2);border:1px solid var(--bk-line);border-radius:var(--bk-radius);padding:18px 20px}
.bk-trust__badge{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--bk-purple),#6d4f8c);display:flex;align-items:center;justify-content:center;font-weight:800;color:#1c1010;font-size:12px}
.bk-trust__title{margin:0 0 4px;font-weight:800;font-size:14.5px;color:var(--bk-white)}
.bk-trust__text{margin:0;font-size:13px;color:var(--bk-ink-dim)}

/* ===== Article / SEO-Block ===== */
.bk-article{padding:8px 0 8px}
.bk-article__inner{max-width:760px}
.bk-article h1{font-size:28px;line-height:1.28;font-weight:800;color:var(--bk-white);margin:0 0 18px}
.bk-article h2{font-size:20px;font-weight:800;color:var(--bk-white);margin:34px 0 12px}
.bk-article h3{font-size:16px;font-weight:800;color:var(--bk-white);margin:0}
.bk-article p{margin:0 0 14px;font-size:15px;color:var(--bk-ink)}
.bk-article a{color:var(--bk-red);text-decoration:underline;text-underline-offset:2px}
.bk-article table{width:100%;border-collapse:collapse;table-layout:fixed;margin:10px 0 20px;border:1px solid var(--bk-line);border-radius:8px;overflow:hidden}
.bk-article td{padding:11px 14px;border-top:1px solid var(--bk-line);font-size:14px;overflow-wrap:anywhere;vertical-align:top}
.bk-article td:first-child{color:var(--bk-ink-dim);width:42%;background:var(--bk-panel)}
@media (max-width:560px){
  .bk-article table{font-size:12.5px}
  .bk-article td{padding:8px 10px}
}

/* ===== FAQ Akkordeon (im Artikel) ===== */
.bk-faq-item{border-bottom:1px solid var(--bk-line)}
.bk-faq-item:first-of-type{border-top:1px solid var(--bk-line)}
.bk-faq-item h3{margin:0}
.bk-faq-q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 2px;font-size:16px;font-weight:800;color:var(--bk-white)}
.bk-faq-q::after{content:"+";flex-shrink:0;font-size:20px;color:var(--bk-red);transition:transform .2s ease}
.bk-faq-item.is-open .bk-faq-q::after{transform:rotate(45deg)}
.bk-faq-a{max-height:0;overflow:hidden;transition:max-height .22s ease}
.bk-faq-item.is-open .bk-faq-a{max-height:260px}
.bk-faq-a p{padding-bottom:16px;margin:0;color:var(--bk-ink-dim)}

/* ===== Breadcrumbs ===== */
.bk-crumbs{padding:16px 0 0}
.bk-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--bk-ink-dim);list-style:none;margin:0;padding:0}
.bk-crumbs li{display:flex;align-items:center;gap:6px}
.bk-crumbs li+li::before{content:"/";color:var(--bk-line)}
.bk-crumbs a{color:var(--bk-ink-dim)}
.bk-crumbs a:hover{color:var(--bk-red)}
.bk-crumbs [aria-current="page"]{color:var(--bk-ink)}

/* ===== Page title band (interne Seiten) ===== */
.bk-pagehead{padding:14px 0 26px}
.bk-pagehead__kicker{margin:14px 0 6px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bk-purple);font-weight:700}
.bk-pagehead__lead{margin:6px 0 0;color:var(--bk-ink-dim);font-size:14.5px;max-width:62ch}

/* ===== Footer ===== */
.bk-footer{border-top:1px solid var(--bk-line);background:#161616;margin-top:56px}
.bk-footer__top{padding:36px 0 20px;display:grid;gap:26px;grid-template-columns:1fr}
.bk-footer__brand{font-weight:800;font-size:19px;color:var(--bk-white)}
.bk-footer__brand span{color:var(--bk-red)}
.bk-footer__tag{font-size:13px;color:var(--bk-ink-dim);margin-top:8px;max-width:44ch}
.bk-footer__cols{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
.bk-footer__col p{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--bk-ink-dim)}
.bk-footer__col a{display:block;font-size:14px;padding:5px 0;color:var(--bk-ink)}
.bk-footer__col a:hover{color:var(--bk-red)}
.bk-footer__legal{border-top:1px solid var(--bk-line);padding:20px 0 32px}
.bk-footer__responsible{font-size:12.5px;color:var(--bk-ink-dim);margin:0 0 10px;line-height:1.6}
.bk-footer__responsible strong{color:var(--bk-ink)}
.bk-footer__copy{font-size:12px;color:#7d7d7d;margin:0}
@media (min-width:760px){
  .bk-footer__top{grid-template-columns:1.2fr 1fr}
}

/* ===== 404 ===== */
.bk-404{padding:90px 0 100px;text-align:center}
.bk-404__code{font-size:64px;font-weight:800;color:var(--bk-red);margin:0}
.bk-404__title{font-size:20px;font-weight:800;color:var(--bk-white);margin:10px 0 10px}
.bk-404__text{color:var(--bk-ink-dim);margin:0 0 24px}

/* fix: мобильный воздух */
.bk-wrap.bk-pagehead{padding-left:20px;padding-right:20px}
.bk-wrap.bk-crumbs{padding-left:20px;padding-right:20px}

/* fix2: боковой воздух для комбинированных wrap */
div.bk-wrap,section.bk-wrap,article.bk-wrap,nav.bk-wrap{padding-left:20px;padding-right:20px}