/* ============================================================
   THEME — DE Casino Affiliate · mobile-first, no framework, no JS-deps
   Requires tokens.css loaded first (or concatenated in front).
   Breakpoints: 768px (md), 1024px (lg)
   ============================================================ */

/* ---------- 0. Fonts (self-hosted, see README · DSGVO) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-wght.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin-wght.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  padding-top: var(--header-h);           /* fixed header offset */
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: var(--lh-tight); margin: 0 0 var(--s-3); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); font-weight: 800; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s-4); }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-sm); }
button { font: inherit; color: inherit; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }
small, .muted { color: var(--c-text-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }
}

/* ---------- 2. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-6); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.section__head h2 { margin: 0; }
.section__more { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .section { padding-block: var(--s-12); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* content + sidebar (review, evergreen) */
.layout { display: grid; gap: var(--s-8); }
.layout > * { min-width: 0; }
@media (min-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .layout__side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* ---------- 3. Header (fixed) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.logo { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-lg); letter-spacing: -.01em; line-height: 1; color: var(--c-text); display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.logo:hover { text-decoration: none; color: var(--c-text); }
.logo__mark { width: 36px; height: 36px; flex: 0 0 auto; }
.logo__btc { color: var(--c-gold); }
.logo__eu { margin-left: .35em; padding: .18em .5em; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-text-on-accent); font-size: .55em; letter-spacing: .08em; }
@media (min-width: 1024px) { .logo { font-size: var(--fs-xl); } .logo__mark { width: 40px; height: 40px; } }
.nav-toggle {
  width: 44px; height: 44px; margin-right: -8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.nav { display: none; }
.nav.is-open {
  display: block; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
  background: var(--c-surface); overflow-y: auto; padding: var(--s-4) var(--gutter) var(--s-8);
}
.nav__list, .site-header .wp-block-navigation__container { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); }
.nav__link, .site-header .wp-block-navigation-item__content {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-3);
  border-radius: var(--r-sm); color: var(--c-text); font-weight: 600; font-family: var(--f-display); font-size: var(--fs-md);
}
.nav__link:hover, .site-header .wp-block-navigation-item__content:hover { background: var(--c-surface-2); text-decoration: none; color: var(--c-text); }
.nav__link[aria-current="page"], .site-header .current-menu-item > .wp-block-navigation-item__content { color: var(--c-accent); }
.nav__cta { margin-top: var(--s-4); }
/* Desktop: two fixed rows — logo row (logo + CTA) on top, full-width menu bar below. */
@media (min-width: 1024px) {
  .site-header::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
    top: var(--header-h-lg); background: var(--c-surface-2); border-top: 1px solid var(--c-border);
  }
  .site-header__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--header-h-lg) var(--nav-bar-h);
    grid-template-areas: "logo cta" "menu menu";
    /* row-gap 0: the base gap would push the menu row 16px below the bar background. */
    align-items: center; gap: 0 var(--s-4);
  }
  .site-header__inner > .logo { grid-area: logo; justify-self: start; }
  .nav-toggle { display: none; }
  .nav, .nav.is-open { display: contents; }
  /* The list fills the whole menu-bar row; items and labels are centred inside it. */
  .nav__list, .site-header .wp-block-navigation__container { grid-area: menu; align-self: stretch; height: var(--nav-bar-h); flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--s-1); }
  .site-header .wp-block-navigation__container > li { height: 100%; display: flex; align-items: center; }
  .nav__link, .site-header .wp-block-navigation-item__content { min-height: 40px; font-size: var(--fs-sm); line-height: 1.2; align-items: center; }
  .site-header .wp-block-navigation__container > li > .wp-block-navigation-item__content:hover { background: var(--c-border); }
  .nav__cta { grid-area: cta; margin: 0; }
}

/* ---------- 4. Buttons / Badges / Rating ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-sm);
  cursor: pointer; text-decoration: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--c-accent); color: var(--c-text-on-accent); }
.btn--primary:hover { background: var(--c-accent-hover); color: var(--c-text-on-accent); }
.btn--secondary { background: transparent; color: var(--c-text); border-color: var(--c-border-strong); }
.btn--secondary:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn--ghost { background: transparent; color: var(--c-accent); padding-inline: var(--s-3); }
.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding-inline: var(--s-4); font-size: var(--fs-xs); }
.btn--lg { min-height: 52px; padding-inline: var(--s-8); font-size: var(--fs-md); }

.badge {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .2em .6em; border-radius: var(--r-pill);
  font-family: var(--f-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--c-surface-2); color: var(--c-text-muted);
}
.badge--accent { background: var(--c-accent-soft); color: var(--c-accent); }
.badge--gold { background: var(--c-gold-soft); color: var(--c-gold); }
.badge--live { background: rgba(255,107,107,.16); color: var(--c-danger); }
.badge--outline { background: transparent; border: 1px solid var(--c-border-strong); }

.rating { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.rating__stars { display: inline-flex; gap: 1px; color: var(--c-gold); }
.rating__stars svg { width: 16px; height: 16px; fill: currentColor; }
.rating__stars svg.is-empty { fill: var(--c-surface-2); stroke: var(--c-gold); stroke-width: 1; }
.rating__value { font-family: var(--f-display); font-weight: 700; color: var(--c-text); }
.rating__count { color: var(--c-text-muted); }
.score { display: inline-flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-md); background: var(--c-gold-soft); color: var(--c-gold); font-family: var(--f-display); font-weight: 800; line-height: 1; }
.score__num { font-size: var(--fs-xl); }
.score__of { font-size: var(--fs-xs); font-weight: 600; opacity: .8; }

.chips { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4);
  border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); background: transparent;
  color: var(--c-text); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.chip[aria-pressed="true"], .chip.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text-on-accent); }

.breadcrumbs { font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: var(--s-4); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--s-1); }
.breadcrumbs a { color: var(--c-text-muted); }

/* ---------- 5. Hero ---------- */
.hero { padding-block: var(--s-8) var(--s-6); }
.hero__kicker { color: var(--c-accent); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-3); }
.hero__lead { color: var(--c-text-muted); font-size: var(--fs-lg); max-width: 60ch; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
@media (min-width: 768px) {
  .hero { padding-block: var(--s-12) var(--s-8); }
  .hero h1 { font-size: var(--fs-4xl); max-width: 22ch; }
}

/* ---------- 6. Casino card (list + top-3) ---------- */
.casino-card {
  position: relative;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-4);
  display: grid; gap: var(--s-3);
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "logo head"
    "bonus bonus"
    "feat feat"
    "cta cta";
}
.casino-card--top { border-color: rgba(43,198,157,.45); box-shadow: 0 0 0 1px rgba(43,198,157,.25) inset; }
.casino-card__rank { position: absolute; top: -10px; left: var(--s-4); }
.casino-card__logo { grid-area: logo; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--c-text-muted); overflow: hidden; }
.casino-card__head { grid-area: head; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.casino-card__name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); margin: 0; }
.casino-card__name a { color: var(--c-text); }
.casino-card__bonus { grid-area: bonus; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-surface-2); }
.casino-card__bonus-label { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.casino-card__bonus-value { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-lg); }
.casino-card__features { grid-area: feat; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.casino-card__features li { display: flex; gap: var(--s-2); align-items: flex-start; }
.casino-card__features svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: .2em; stroke: var(--c-accent); }
.casino-card__cta { grid-area: cta; display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); }
.casino-card__terms { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; }
@media (min-width: 768px) {
  .casino-card {
    grid-template-columns: 72px minmax(0, 1fr) 220px 200px;
    grid-template-areas:
      "logo head bonus cta"
      "logo feat bonus cta";
    align-items: center; padding: var(--s-5);
  }
  .casino-card__logo { width: 72px; height: 72px; }
  .casino-card__cta { grid-template-columns: 1fr; }
}

/* ---------- 7. Comparison table (desktop only) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.table th { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); background: var(--c-surface); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }

/* ---------- 8. News ---------- */
.news-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.news-card__media { aspect-ratio: 3 / 2; border-radius: var(--r-md); background: var(--c-surface-2); overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__meta { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: var(--s-1); }
.news-card__title { font-size: var(--fs-md); margin: 0; }
.news-card__title a { color: var(--c-text); }
.news-card--featured { grid-template-columns: 1fr; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.news-card--featured .news-card__media { border-radius: 0; aspect-ratio: 16 / 9; }
.news-card--featured .news-card__body { padding: var(--s-4); }
.news-card--featured .news-card__title { font-size: var(--fs-xl); }
.news-card--featured .news-card__excerpt { color: var(--c-text-muted); margin: var(--s-2) 0 0; }
.news-list { display: grid; gap: var(--s-5); }
.news-list > * + * { padding-top: var(--s-5); border-top: 1px solid var(--c-border); }
@media (min-width: 768px) {
  .news-card { grid-template-columns: 160px minmax(0, 1fr); }
  .news-card--featured { grid-template-columns: 1fr; }
  .news-card--featured .news-card__body { padding: var(--s-6); }
}

/* ---------- 9. Article prose (review, news, evergreen) ---------- */
.article { max-width: 72ch; }
.article h2 { margin-top: var(--s-10); scroll-margin-top: calc(var(--header-h) + 1rem); }
.article h3 { margin-top: var(--s-6); }
.article p, .article li { font-size: var(--fs-md); }
.article img { border-radius: var(--r-md); margin-block: var(--s-6); }
.article blockquote { margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); border-left: 3px solid var(--c-accent); background: var(--c-surface); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--c-text-muted); }
.article table { display: block; overflow-x: auto; max-width: 100%; }
.article table td, .article table th { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); text-align: left; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--s-6); }
.article-meta__author { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-text); font-weight: 600; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-surface-2); flex: 0 0 auto; }
@media (min-width: 768px) { .article p, .article li { font-size: var(--fs-lg); } }

/* TOC */
.toc { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-4); }
.toc summary { cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-sm); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font-size: var(--fs-lg); color: var(--c-text-muted); }
.toc[open] summary::after { content: "–"; }
.toc ol { margin: var(--s-3) 0 0; padding-left: 1.25rem; font-size: var(--fs-sm); display: grid; gap: var(--s-2); }
.toc a { color: var(--c-text-muted); }
.toc a:hover { color: var(--c-accent); }

/* Pros / Cons */
.pros-cons { display: grid; gap: var(--s-4); }
.pros-cons__col { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-4); }
.pros-cons__col h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s-3); }
.pros-cons__col--pro h3 { color: var(--c-accent); }
.pros-cons__col--con h3 { color: var(--c-danger); }
.pros-cons__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.pros-cons__col li { display: flex; gap: var(--s-2); }
.pros-cons__col li::before { content: "✓"; font-weight: 700; color: var(--c-accent); }
.pros-cons__col--con li::before { content: "✕"; color: var(--c-danger); }
@media (min-width: 768px) { .pros-cons { grid-template-columns: 1fr 1fr; } }

/* Facts table / key-value */
.facts { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.facts__row { display: grid; grid-template-columns: 40% 60%; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.facts__row:last-child { border-bottom: 0; }
.facts__key { color: var(--c-text-muted); }
.facts__val { font-weight: 600; }

/* FAQ */
.faq { display: grid; gap: var(--s-2); }
.faq__item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.faq__item summary { cursor: pointer; padding: var(--s-4); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-md); list-style: none; display: flex; justify-content: space-between; gap: var(--s-3); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--c-text-muted); flex: 0 0 auto; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { padding: 0 var(--s-4) var(--s-4); margin: 0; color: var(--c-text-muted); }

/* Author / E-E-A-T */
.author-box { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-top: var(--s-10); }
.author-box .avatar { width: 56px; height: 56px; }
.author-box__name { font-family: var(--f-display); font-weight: 700; margin: 0; }
.author-box__role { font-size: var(--fs-xs); color: var(--c-text-muted); }
.author-box p { font-size: var(--fs-sm); color: var(--c-text-muted); margin: var(--s-2) 0 0; }
/* Author archive: profile header + latest items. */
.author-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.author-hero .author-hero__avatar { width: 72px; height: 72px; }
.author-hero__name { margin: 0; }
.author-hero .hero__meta { margin-top: var(--s-2); }
.author-hero__bio { color: var(--c-text-muted); max-width: 70ch; margin-top: var(--s-5); }
.author-hero__bio p { margin: 0 0 var(--s-3); }
.author-hero__team { margin: 0; font-weight: 600; }
.author-latest__list { list-style: none; margin: 0; padding: 0; }
.author-latest__media { display: flex; align-items: center; justify-content: center; background: var(--c-surface); }
.author-latest__media img { object-fit: contain; padding: var(--s-2); }
@media (min-width: 768px) {
  .author-hero { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-6); }
  .author-hero .author-hero__avatar { width: 96px; height: 96px; }
}

/* Verdict / CTA box (review) */
.verdict { background: var(--c-surface); border: 1px solid rgba(43,198,157,.45); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-4); }
.verdict__head { display: flex; gap: var(--s-4); align-items: center; }
.verdict__bonus { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-xl); }

/* Sidebar card (sticky, desktop) */
.side-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-4); }
.side-card__logo { width: 100%; aspect-ratio: 3 / 1; border-radius: var(--r-md); background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; color: var(--c-text-muted); font-size: var(--fs-xs); }

/* ---------- 10. Sticky mobile CTA (review + list) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: var(--sticky-cta-h);
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--gutter);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta__text { min-width: 0; flex: 1; font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.3; }
.sticky-cta__text strong { display: block; color: var(--c-text); font-family: var(--f-display); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-sticky-cta { padding-bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .sticky-cta { display: none; } .has-sticky-cta { padding-bottom: 0; } }

/* ---------- 11. Trust / legal block ---------- */
.trust { display: grid; gap: var(--s-4); }
.trust__item { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-text-muted); }
.trust__item svg { flex: 0 0 24px; width: 24px; height: 24px; stroke: var(--c-accent); }
.trust__item strong { display: block; color: var(--c-text); font-family: var(--f-display); }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ad-note { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ---------- 12. Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-8); }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); color: var(--c-text); font-weight: 600; font-size: var(--fs-sm); padding: 0 var(--s-3); }
.pagination [aria-current="page"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text-on-accent); }

/* ---------- 13. Footer ---------- */
.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-border); margin-top: var(--s-12); padding-block: var(--s-8) var(--s-6); font-size: var(--fs-sm); color: var(--c-text-muted); }
.site-footer__grid { display: grid; gap: var(--s-6); }
.site-footer h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--c-text); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--c-text-muted); }
.site-footer a:hover { color: var(--c-accent); }
.legal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-top: var(--s-6); }
.age-badge { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c-text); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-xs); color: var(--c-text); }
.legal-bar p { margin: 0; font-size: var(--fs-xs); flex: 1 1 240px; }
.site-footer__bottom { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; font-size: var(--fs-xs); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ---------- 14. WordPress / Gutenberg mapping (block theme) ---------- */
/* Only the <nav> wrapper: core also copies the className onto the inner <ul>, which must stay a flex list. */
.site-header nav.wp-block-navigation { display: contents; }
.wp-block-group.container { padding-inline: var(--gutter); }
.wp-block-post-title a { color: var(--c-text); }
.wp-block-post-featured-image img { border-radius: var(--r-md); }
.wp-block-query-pagination { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-8); }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); color: var(--c-text); font-weight: 600; font-size: var(--fs-sm); padding: 0 var(--s-3); }
.wp-block-query-pagination .current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text-on-accent); }
.wp-block-details { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-4); }
.wp-block-details summary { cursor: pointer; font-family: var(--f-display); font-weight: 700; }
.wp-block-table table { width: 100%; }
.wp-block-table td, .wp-block-table th { border: 0; border-bottom: 1px solid var(--c-border); padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); text-align: left; }
.wp-block-separator { border: 0; border-top: 1px solid var(--c-border); }
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.entry-content > * + * { margin-top: 0; }

/* ---------- 15. Site integration (dynamic blocks, core block markup) ---------- */
/* Category list rendered as chips (home.html: core/categories with className "chips"). */
.wp-block-categories.chips { list-style: none; margin: 0 0 var(--s-6); padding: 0 0 var(--s-2); }
.wp-block-categories.chips li a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); color: var(--c-text); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.wp-block-categories.chips li a:hover { background: var(--c-surface-2); text-decoration: none; }
.wp-block-categories.chips .current-cat a { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text-on-accent); }
.chips { margin-bottom: var(--s-4); }
/* Query Loop wrappers keep the list/grid rhythm of the static templates. */
.wp-block-query.grid > .wp-block-post-template, .casino-ranking > .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.casino-ranking > .wp-block-post-template > li { margin-top: var(--s-2); }
.news-list > .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.news-list > .wp-block-post-template > li + li { padding-top: var(--s-5); border-top: 1px solid var(--c-border); }
.news-featured > .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.news-card__meta .wp-block-post-terms a { color: var(--c-text-muted); }
.news-card .wp-block-post-featured-image { margin: 0; }
.news-card .wp-block-post-excerpt__excerpt { margin: 0; }
.wp-block-columns.grid { display: grid; }
.wp-block-columns.grid > .wp-block-column { min-width: 0; }
/* Sidebar alternatives list. */
.layout__side { display: grid; gap: var(--s-4); align-content: start; }
.side-card__name { font-family: var(--f-display); font-weight: 700; margin-top: var(--s-1); }
.side-card__name a { color: var(--c-text); }
.side-card__logo img { width: auto; max-height: 100%; }
.side-card__title { font-size: var(--fs-md); margin: 0; }
.side-card__alts { list-style: none; margin: 0; padding: 0; display: grid; }
.side-card__alts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding-block: var(--s-3); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); }
.side-card__alts li:first-child { border-top: 0; padding-top: 0; }
/* Single news post: category as badge, featured image spacing. */
.article > .wp-block-post-terms.badge a { color: inherit; }
.article > .wp-block-post-featured-image { margin: 0 0 var(--s-6); }
.casino-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.wp-block-post-content > .verdict { margin-block: var(--s-6); }
.wp-block-post-content > .wp-block-table { margin: 0 0 var(--s-6); }
.wp-block-post-content .facts { margin-bottom: var(--s-6); }
.wp-block-post-content .pros-cons { margin-bottom: var(--s-6); }
.notice-box { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-danger); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-6); font-size: var(--fs-sm); color: var(--c-text-muted); }
.notice-box strong { color: var(--c-text); }
.notice-box p { margin: 0; font-size: inherit !important; }
/* News index (home.html): one inherited loop; the first post of page 1 is shown as the featured card. */
.news-archive .news-card__excerpt { display: none; }
.news-archive > .wp-block-post-template > li:first-child { padding-top: 0; border-top: 0; }
.news-archive > .wp-block-post-template > li:first-child .news-card { grid-template-columns: 1fr; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.news-archive > .wp-block-post-template > li:first-child .news-card__media { border-radius: 0; aspect-ratio: 16 / 9; }
.news-archive > .wp-block-post-template > li:first-child .news-card__body { padding: var(--s-4); }
.news-archive > .wp-block-post-template > li:first-child .news-card__title { font-size: var(--fs-xl); }
.news-archive > .wp-block-post-template > li:first-child .news-card__excerpt { display: block; color: var(--c-text-muted); margin: var(--s-2) 0 0; }
.news-archive .news-card__media { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
  .news-archive > .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); align-items: start; }
  .news-archive > .wp-block-post-template > li:first-child { grid-row: span 9; }
  .news-archive > .wp-block-post-template > li:nth-child(2) { padding-top: 0; border-top: 0; }
  .news-archive > .wp-block-post-template > li:first-child .news-card__body { padding: var(--s-6); }
}

/* ---------- 16. Landing pages (imported content) ---------- */
/* Header dropdowns (core navigation-submenu, CSS only: hover / focus-within, no icon button). */
.site-header .wp-block-navigation__submenu-container { list-style: none; margin: 0; padding: 0 0 var(--s-2) var(--s-4); }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-height: 40px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); }
@media (min-width: 1024px) {
  .site-header .has-child { position: relative; }
  .site-header .has-child > .wp-block-navigation__submenu-container {
    display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 240px;
    padding: var(--s-2); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-card);
  }
  .site-header .has-child:hover > .wp-block-navigation__submenu-container,
  .site-header .has-child:focus-within > .wp-block-navigation__submenu-container { display: grid; }
  .site-header .nav__item--wide > .wp-block-navigation__submenu-container { grid-template-columns: repeat(3, minmax(170px, 1fr)); min-width: 560px; }
  /* "Alle Krypto Casinos" (static, last) spans the row under the top casinos. */
  .site-header .nav__item--wide > .wp-block-navigation__submenu-container > li:last-child { grid-column: 1 / -1; border-top: 1px solid var(--c-border); margin-top: var(--s-1); padding-top: var(--s-1); }
  .site-header .nav__item--wide > .wp-block-navigation__submenu-container > li:last-child > .wp-block-navigation-item__content { color: var(--c-accent); }
  .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: nowrap; color: var(--c-text); }
}
/* Byline under the H1: "Autor: Name · Rolle · Zuletzt aktualisiert: … · Zusatz". */
.byline { margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.byline a { font-weight: 600; }
/* Outgoing CTA from the content + mandatory terms line. */
.cta-row { display: grid; justify-items: start; gap: var(--s-2); margin: var(--s-5) 0 var(--s-6); }
.cta-row .casino-card__terms { margin: 0; }
.wp-block-post-content .pros-cons--single { grid-template-columns: 1fr; }
.wp-block-post-content .faq { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.wp-block-post-content .wp-block-table { overflow-x: auto; }
.wp-block-table td a.btn { white-space: nowrap; }

/* ---------- 17. Casino ranking entry (btccasinoeu/casino-review) ----------
   Ranked rows in articles: numbered rank rail + logo tile (table-style lists),
   verbal score badge, check/cross lists and a bonus + CTA side panel (rating portals). */
.wp-block-post-content .casino-review + .casino-review { margin-top: var(--s-4); }
.casino-review {
  position: relative; margin: 0 0 var(--s-4);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4) var(--s-4);
  display: grid; gap: var(--s-3) var(--s-4);
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "logo head" "side side" "pc pc";
}
.casino-review--top { border-color: rgba(227,182,92,.55); box-shadow: 0 0 0 1px rgba(227,182,92,.25) inset, var(--shadow-card); }
.casino-review__rank {
  position: absolute; top: -12px; left: var(--s-4);
  min-width: 28px; height: 28px; padding: 0 var(--s-2); border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sm); color: var(--c-text);
}
.casino-review--top .casino-review__rank { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-text-on-accent); }
.casino-review__ribbon {
  position: absolute; top: -12px; right: var(--s-4);
  padding: .3em .8em; border-radius: var(--r-pill); background: var(--c-gold); color: var(--c-text-on-accent);
  font-family: var(--f-display); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.casino-review__logo {
  grid-area: logo; width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--c-surface-2);
}
.casino-review__logo:hover { text-decoration: none; }
.casino-review__logo img { width: 100%; height: 100%; object-fit: contain; }
.casino-review__monogram {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--hue) 55% 42%), hsl(calc(var(--hue) + 40) 60% 28%));
  color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: .02em;
}
.casino-review__head { grid-area: head; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.wp-block-post-content .casino-review__name, .casino-review__name { margin: 0; font-size: var(--fs-lg); line-height: 1.2; }
.casino-review__name a { color: var(--c-text); }
.casino-review__score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.casino-review__score .rating__stars svg { width: 14px; height: 14px; }
.casino-review__band { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); }
.score-pill {
  display: inline-flex; align-items: baseline; gap: 1px; padding: .2em .55em; border-radius: var(--r-sm);
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-md); line-height: 1.2; color: var(--c-text-on-accent);
}
.score-pill__of { font-size: .7em; font-weight: 700; opacity: .75; }
.score-pill--excellent { background: var(--c-accent); }
.score-pill--very-good { background: #7FD8A6; }
.score-pill--good { background: var(--c-gold); }
.score-pill--fair { background: var(--c-surface-2); color: var(--c-text); }
.casino-review__facts { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.casino-review__facts:empty { display: none; }
.casino-review__pc { grid-area: pc; display: grid; gap: var(--s-2); align-content: start; }
.casino-review__pc ul, .wp-block-post-content .casino-review__pc ul { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: var(--s-1); font-size: var(--fs-sm); }
.casino-review__pc li, .article .casino-review__pc li { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.casino-review__pros li::before { content: "✓"; flex: 0 0 auto; font-weight: 800; color: var(--c-accent); }
.casino-review__cons li::before { content: "✕"; flex: 0 0 auto; font-weight: 800; color: var(--c-danger); }
.casino-review__pc.casino-review__pc--single { grid-template-columns: 1fr; }
.casino-review__more { font-size: var(--fs-sm); }
.casino-review__more > summary { cursor: pointer; width: fit-content; color: var(--c-accent); font-weight: 700; list-style: none; }
.casino-review__more > summary::-webkit-details-marker { display: none; }
.casino-review__more[open] > summary { margin-bottom: var(--s-1); }
.casino-review__more[open] { display: grid; gap: var(--s-1); }
.casino-review__side { grid-area: side; display: grid; gap: var(--s-2); align-content: start; }
.casino-review__bonus {
  display: grid; gap: 2px; padding: var(--s-3); border-radius: var(--r-md);
  background: var(--c-gold-soft); border: 1px dashed rgba(227,182,92,.45);
}
.casino-review__bonus-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold); }
.casino-review__bonus-value { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-lg); line-height: 1.25; color: var(--c-text); }
.casino-review__bonus-extra { font-size: var(--fs-sm); color: var(--c-text-muted); }
.casino-review__cta { display: grid; gap: var(--s-2); justify-items: center; }
.casino-review__review-link { font-size: var(--fs-sm); font-weight: 700; }
.casino-review .casino-card__terms, .article .casino-review .casino-card__terms { text-align: center; font-size: var(--fs-xs); margin: 0; }
/* Layout follows the article column width (72ch + sidebar), not the viewport. */
.article { container: article / inline-size; }
@container article (min-width: 520px) {
  .casino-review {
    padding: var(--s-5) var(--s-5) var(--s-5) 0;
    grid-template-columns: 48px 72px minmax(0, 1fr);
    grid-template-areas: "rank logo head" "rank pc pc" "rank side side";
    column-gap: var(--s-4);
  }
  .casino-review--unranked { padding-left: var(--s-5); grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "logo head" "pc pc" "side side"; }
  .casino-review__rank {
    grid-area: rank; position: static; align-self: stretch; height: auto; margin: calc(var(--s-5) * -1) 0;
    border: 0; border-right: 1px solid var(--c-border); border-radius: var(--r-lg) 0 0 var(--r-lg);
    font-size: var(--fs-xl); background: var(--c-surface-2);
  }
  .casino-review--top .casino-review__rank { border-right-color: var(--c-gold); }
  .casino-review__ribbon { left: calc(48px + var(--s-4)); right: auto; }
  .casino-review__logo { width: 72px; height: 72px; }
  .casino-review__pc { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .casino-review__more { grid-column: 1 / -1; }
  .casino-review__more[open] { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .casino-review__more[open] > summary { grid-column: 1 / -1; }
  .casino-review__side { grid-template-columns: minmax(0, 1fr) 190px; align-items: center; padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
  .casino-review__side .casino-card__terms { grid-column: 1 / -1; }
}
@container article (min-width: 860px) {
  .casino-review { grid-template-columns: 56px 88px minmax(0, 1fr) 220px; grid-template-areas: "rank logo head side" "rank logo pc side"; grid-template-rows: auto 1fr; column-gap: var(--s-5); }
  .casino-review--unranked { grid-template-columns: 88px minmax(0, 1fr) 220px; grid-template-areas: "logo head side" "logo pc side"; }
  .casino-review__rank { font-size: var(--fs-2xl); }
  .casino-review__ribbon { left: calc(56px + var(--s-5)); }
  .casino-review__logo { width: 88px; height: 88px; }
  .casino-review__pc { grid-template-columns: 1fr; }
  .casino-review__more[open] { grid-template-columns: 1fr; }
  .casino-review__side { grid-template-columns: 1fr; padding: 0 0 0 var(--s-5); border-top: 0; border-left: 1px solid var(--c-border); align-content: center; }
}

/* Casino comparison tables in content: auto column widths, casino column on one line. */
.wp-block-table table:has(td:first-child > a[href*="/krypto-casinos/"]) { table-layout: auto; }
.wp-block-table table:has(td:first-child > a[href*="/krypto-casinos/"]) :is(th, td):first-child { white-space: nowrap; }
/* Core sets word-break: break-word on fixed-layout tables, which splits headers mid-word; hyphenate instead (lang="de"). */
.wp-block-table table:has(td:first-child > a[href*="/krypto-casinos/"]) :is(th, td) { word-break: normal; overflow-wrap: normal; hyphens: auto; }

/* Casino screenshots: list preview (casino-review side column, core lightbox) and review figures. */
.casino-review__shot { margin: 0; max-width: 280px; }
.casino-review .casino-review__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; margin: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); }
@container article (min-width: 520px) { .casino-review__side .casino-review__shot { grid-column: 1 / -1; } }
@container article (min-width: 860px) { .casino-review__shot { max-width: none; } }
.casino-shot { margin-block: var(--s-6); }
.article .casino-shot img { margin: 0; border: 1px solid var(--c-border); }
.casino-shot figcaption { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
.casino-shot--mobile { max-width: 300px; margin-inline: auto; }
/* Core screen-reader text (used by the image lightbox live region and other core blocks). */
.screen-reader-text:not(:focus) { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
/* global-styles is dequeued, so give the core lightbox the preset colours it references. */
.wp-lightbox-overlay { --wp--preset--color--bg: var(--c-bg); --wp--preset--color--text: var(--c-text); }

/* Bildnachweise ([btcc_bildnachweise] shortcode, btccasinoeu-core) */
.btcc-credits { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .75rem; }
.btcc-credit { display: flex; gap: 1rem; align-items: center; padding: .75rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--c-text-muted); overflow-wrap: anywhere; }
.btcc-credit img { flex: 0 0 auto; width: 96px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.btcc-credit strong { color: var(--c-text); font-family: var(--f-display); }

/* ---------- 17. QA fixes 2026-10-13 ---------- */
/* Mobile menu: parent link + disclosure button on one row, submenu (accordion) below. */
.nav__sub-toggle { display: none; }
@media (max-width: 1023.98px) {
  .site-header .has-child { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; }
  .site-header .has-child > .wp-block-navigation__submenu-container { grid-column: 1 / -1; display: none; }
  .site-header .has-child.is-sub-open > .wp-block-navigation__submenu-container {
    display: flex; position: static; visibility: visible; opacity: 1; width: auto; height: auto; overflow: visible;
    background: transparent; border: 0;
  }
  .nav__sub-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    padding: 0; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--c-text-muted); cursor: pointer;
  }
  .nav__sub-toggle:hover { background: var(--c-surface-2); color: var(--c-text); }
  .nav__sub-toggle svg { transition: transform .15s ease; }
  .is-sub-open > .nav__sub-toggle svg { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .nav__sub-toggle svg { transition: none; } }

/* Front page: "So finden wir…" and the FAQ side by side on wide screens instead of one narrow column. */
.split { display: grid; gap: var(--s-8); }
.split > .article { max-width: none; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); align-items: start; }
}

/* ---------- 18. QA/UX fixes 2026-10-13 (2nd round) ---------- */
/* Long CTA labels in content ("Jetzt X besuchen und Bonus sichern") must wrap: with the global
   nowrap they were wider than a phone screen, widened the whole page and pushed the menu
   toggle off-screen. Table cell buttons keep nowrap (more specific rule in section 16). */
.article .btn { white-space: normal; max-width: 100%; text-align: center; padding-block: var(--s-2); }

/* Content tables on small screens: keep columns readable and scroll the table instead of
   squeezing every cell into hyphenated one-word lines; scroll shadows hint at more columns. */
@media (max-width: 767.98px) {
  .wp-block-post-content .wp-block-table {
    background:
      linear-gradient(to right, var(--c-bg) 30%, transparent) left / 24px 100% no-repeat local,
      linear-gradient(to left, var(--c-bg) 30%, transparent) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.55), transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.55), transparent) right / 12px 100% no-repeat scroll;
  }
  .wp-block-post-content .wp-block-table table:has(tr > :nth-child(4)) { min-width: 640px; }
  .wp-block-post-content .wp-block-table table:has(tr > :nth-child(4)) :is(th, td) { hyphens: manual; }
}

/* Templates without a hero (archives, search, plain pages): space between header and title. */
#main > .container:first-child:not(.hero) { padding-top: var(--s-8); }
.search-header { margin-bottom: var(--s-6); }
.search-header .wp-block-search { max-width: 560px; margin-top: var(--s-4); }
.wp-block-search__inside-wrapper { gap: var(--s-2); }
.wp-block-search__input {
  min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); font: inherit;
}
.wp-block-search__input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.wp-block-search__button {
  min-height: 44px; margin: 0; padding: 0 var(--s-5); border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--c-accent); color: var(--c-text-on-accent); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-sm);
}
.wp-block-search__button:hover { background: var(--c-accent-hover); }

/* Review hero: a long H1 squeezed the 72px logo tile into a sliver on phones. */
.verdict__head > .casino-card__logo { flex-shrink: 0; }
.verdict__head > div:last-child { min-width: 0; }

/* Footer links: at least 24px tap height (WCAG 2.5.8). */
.site-footer ul a { display: inline-block; padding-block: 3px; }

/* Internal "Comment mode" tool: keep it clear of the mobile sticky CTA and the footer's last line. */
@media (max-width: 1023.98px) {
  body:has(.sticky-cta) .sf-toggle { bottom: calc(var(--sticky-cta-h) + 16px); }
}
body:has(.sf-toggle) .site-footer { padding-bottom: 80px; }