Warning: Permanently added '[bets-de.sub.plus]:5577' (ED25519) to the list of known hosts.
/* ============================================================
   wette22-modern.css — visual modernization overlay v1.2
   Loads LAST via output-buffer-injected <link> before </body>.
   Reverts cleanly by removing the mu-plugin file.
   ============================================================ */

:root {
  --brand-red: #d11f43;
  --brand-red-dark: #a8152f;
  --brand-red-soft: #fde7ec;
  --brand-teal: #079eb1;
  --brand-teal-dark: #057180;
  --brand-teal-soft: #def6f9;
  --ink-900: #111827;
  --ink-700: #1f2937;
  --ink-500: #4b5563;
  --ink-300: #9ca3af;
  --line: #e5e7eb;
  --bg: #f6f7f9;
  --card: #ffffff;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-1: 0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --shadow-2: 0 4px 12px rgba(17,24,39,.07), 0 2px 4px rgba(17,24,39,.04);
  --shadow-3: 0 10px 25px rgba(17,24,39,.10);
}

/* ============================================================
   1. Typography baseline
   The theme uses em units relative to body 12px. We bump body
   to 16px but explicitly resize ALL em-using elements below.
   ============================================================ */
html { font-size: 16px; }
body {
  background: var(--bg) !important;
  color: var(--ink-700) !important;
  font-family: "Inter","Roboto","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body p, body li, body td, body th, body input, body button, body select, body textarea {
  font-family: inherit;
  line-height: inherit;
}
h1,h2,h3,h4,h5,h6 {
  font-family: "Fjalla One","Roboto Condensed","Inter",sans-serif !important;
  color: var(--ink-900) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  padding: 0 !important;          /* override theme's padding:10px 0 */
}
h1 { font-size: 1.9rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.2rem !important; }
h4 { font-size: 1.05rem !important; }
p { margin: 0 0 1em; }
a { color: var(--brand-teal); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-red); text-decoration: underline; }

/* ============================================================
   2. Layout container
   ============================================================ */
#wrapper, #header, #menu, #footer, #mobmenu {
  max-width: 1180px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}
#wrapper { padding-top: 24px !important; padding-bottom: 32px !important; }

/* ============================================================
   3. Top mobile bar (search + menu trigger)
   ============================================================ */
/* Dark top bar now carries the brand (left) + search (right) in one slim
   strip, so the separate white brand strip below can be removed. */
#mobmenu_wrapper { background: var(--ink-900) !important; padding: 0 !important; }
#mobmenu {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 7px 20px !important;
  min-height: 46px;
  display: flex !important;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}
/* Brand mark on the left of the dark bar — clickable link to homepage */
#mobmenu .brand-link {
  display: inline-flex;
  align-items: center;
  font-family: "Inter","Roboto",sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: 0.01em;
  padding-left: 34px;
  margin-right: auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='12' fill='%23d11f43'/><text x='32' y='46' font-family='Arial Black,sans-serif' font-weight='900' font-size='44' fill='white' text-anchor='middle'>B</text></svg>");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: left center;
  text-decoration: none !important;
  transition: opacity .15s;
}
#mobmenu .brand-link:hover,
#mobmenu .brand-link:focus { opacity: .85; color: #fff !important; text-decoration: none !important; }
#mobmenu .searchform { float: none !important; margin: 0 !important; }
#mobmenu .searchform .s {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  padding: 0 14px !important;
  height: 32px !important;
  font-size: 14px !important;
}
#mobmenu .searchform .s::placeholder { color: #cbd5e1; }
#mobmenu .searchform .ss { border-radius: var(--radius-sm) !important; margin-left: 4px !important; height: 32px !important; }

/* ============================================================
   4. Header — slim brand strip; lets the hero headline (above the
   table on homepage) dominate without visual competition.
   ============================================================ */
/* The separate white brand strip is merged into the dark bar above —
   hide it to remove one of the stacked header bars. */
#header_wrapper { display: none !important; }

/* ============================================================
   5. Main menu (red bar)
   ============================================================ */
#menu_wrapper {
  background: var(--brand-red) !important;
  box-shadow: var(--shadow-1);
}
#menu ul li a, #menu ul li a:visited {
  font-family: "Roboto Condensed","Inter",sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem !important;
  padding: 11px 16px !important;
  transition: background .15s;
}
#menu ul li:hover, #menu ul li.current-menu-item {
  background: var(--brand-red-dark) !important;
}
#menu li li { background: var(--ink-900) !important; }
#menu li li:hover { background: var(--brand-teal) !important; }
#menu li li a {
  padding: 10px 16px !important;
  text-transform: none;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}

/* ============================================================
   6. Welcomebox (hero text panel)
   ============================================================ */
.welcomebox_wrapper { margin-top: 18px !important; }
.welcomebox {
  background: var(--card) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1);
  padding: 28px 36px !important;
  margin: 0 auto 18px !important;
  max-width: 1180px !important;
  width: auto !important;
  color: var(--ink-700) !important;
  line-height: 1.75 !important;
  font-size: 15px !important;
  /* Split into 2 magazine columns ONLY when the welcomebox is pure prose.
     If it contains a <ul> or other interrupting elements, single-column. */
  column-count: 2;
  column-gap: 40px;
  column-rule: none;
}
/* Single-column when the welcomebox has any list inside — multi-column
   makes embedded bullet lists break the reading flow. */
.welcomebox:has(ul),
.welcomebox:has(ol),
.welcomebox:has(table) {
  column-count: 1 !important;
  column-rule: none !important;
  max-width: 880px !important;       /* narrower text column for readability */
}
.welcomebox:has(ul) p,
.welcomebox:has(ol) p {
  margin: 0 0 1.1em;
}
/* Inline lists — clean indented bullets, no callout box. Split into 2
   columns so short items fill the width instead of stacking on the left. */
.welcomebox ul, .welcomebox ol {
  margin: 1.1em 0 1.5em !important;
  padding: 0 0 0 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  list-style: none !important;
  column-span: all;
  column-count: 2;
  column-gap: 40px;
}
.welcomebox ul li, .welcomebox ol li {
  position: relative;
  padding: 7px 0 7px 8px !important;
  margin: 0 !important;
  list-style: none !important;
  list-style-image: none !important;
  line-height: 1.5;
  background-image: none !important;
  break-inside: avoid;            /* don't split an item across columns */
}
/* Short lists (<=4 items) stay single column; long ones use 2 cols.
   Fallback: if a list is short it still reads fine in 2 cols. */
@media (max-width: 680px) {
  .welcomebox ul, .welcomebox ol { column-count: 1; }
}
.welcomebox ul li::marker, .welcomebox ol li::marker { content: "" !important; }
.welcomebox ul li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 11px;
  width: 6px;
  height: 6px;
  background: var(--brand-red);
  border-radius: 50%;
}
/* Belt-and-braces: blank out the theme's list-style image on welcomebox lists */
.welcomebox ul, .welcomebox ul li,
.welcomebox ol, .welcomebox ol li {
  background-image: none !important;
  list-style-image: none !important;
  list-style-type: none !important;
}
.welcomebox ol { counter-reset: stepcount; }
.welcomebox ol li { counter-increment: stepcount; }
.welcomebox ol li::before {
  content: counter(stepcount);
  position: absolute;
  left: -28px;
  top: 4px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 50%;
  text-align: center;
}
/* But keep heading full-width across the columns */
.welcomebox h2.header,
.welcomebox .header,
.welcomebox h1, .welcomebox h2, .welcomebox h3, .welcomebox h4 {
  column-span: all;
}
/* Sub-headings inside the welcomebox body (h2/h3/h4 that aren't the main
   .header) need clear space above and below so they don't crowd the text. */
.welcomebox h2:not(.header),
.welcomebox h3:not(.header),
.welcomebox h4:not(.header) {
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  color: var(--ink-900) !important;
  line-height: 1.3 !important;
  margin: 1.6em 0 0.7em !important;
  padding: 0 !important;
}
.welcomebox h2:not(.header) { font-size: 1.3rem !important; }
.welcomebox h3:not(.header) { font-size: 1.15rem !important; }
.welcomebox h4:not(.header) { font-size: 1.05rem !important; color: var(--brand-red) !important; }
/* paragraph right after a sub-heading: ensure the gap is honored */
.welcomebox h2 + p, .welcomebox h3 + p, .welcomebox h4 + p { margin-top: 0 !important; }
/* Bold highlights inside the welcomebox — just darker + heavier, no overlay */
.welcomebox b, .welcomebox strong {
  color: var(--ink-900);
  font-weight: 700;
  background: transparent;
  padding: 0;
}
.welcomebox > * + ul,
.welcomebox > * + p { margin-top: 1em; }
.welcomebox ul {
  padding: 0 0 0 1.2em !important;
  margin: 0.5em 0 1em !important;
}
.welcomebox ul li {
  list-style: disc !important;
  padding: 0 0 4px !important;
  margin-left: 0;
}
.welcomebox .header,
.welcomebox h2.header {
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1.6rem !important;
  color: var(--ink-900) !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  /* block so the body text after it starts on a new line */
  display: block !important;
  text-transform: none !important;
}
/* underline only spans the text width, via the inner span */
.welcomebox .header span {
  background: transparent !important;
  padding: 0 0 10px !important;
  color: inherit !important;
  display: inline-block;
  border-bottom: 3px solid var(--brand-red);
}
.welcomebox a, .welcomebox a:visited { color: var(--brand-teal) !important; text-decoration: none; }
.welcomebox a:hover { color: var(--brand-red) !important; text-decoration: underline; }

/* ============================================================
   7a. Remove dark band behind top promo card + comparison table.
   Theme wraps box25+box75 in #black_wrapper > #black with dark bg.
   Just strip the bg — keep the theme's float layout intact.
   ============================================================ */
#black_wrapper {
  background: transparent !important;
  padding: 18px 0 0 !important;
  position: relative;
}
/* tighten the breadcrumb + its surrounding space so section 1 and the
   article body sit closer together */
#crumbs { margin: 4px auto 6px !important; }
#wrapper #container { padding-top: 0 !important; }
#wrapper { padding-top: 0 !important; margin-top: 0 !important; }
/* Inject a hero headline + subtitle ABOVE the comparison table on the
   HOMEPAGE (detected by .table-header inside this wrapper). Single
   pages have a real H1 in here so we don't inject anything. */
body:has(#black_wrapper .table-header) #black_wrapper::before {
  content: "Sportwetten Vergleich 2026";
  display: block;
  font-family: "Fjalla One","Roboto Condensed",sans-serif;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink-900);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  max-width: 1180px;
  margin: 28px auto 0;
  /* short centered red accent bar beneath the title */
  padding: 0 20px 24px;
  background: linear-gradient(var(--brand-red), var(--brand-red)) no-repeat center bottom;
  background-size: 90px 5px;
}
body:has(#black_wrapper .table-header) #black_wrapper::after {
  content: "Die besten deutschen Wettanbieter, exklusive Boni und tagesaktuelle Quoten — alles auf einen Blick.";
  display: block;
  font-family: "Inter","Roboto",sans-serif;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-500);
  text-align: center;
  max-width: 720px;
  margin: 18px auto 28px;
  padding: 0 20px;
  font-weight: 400;
}
@media (max-width: 768px) {
  body:has(#black_wrapper .table-header) #black_wrapper::before { font-size: 1.9rem; margin-top: 16px; background-size: 70px 4px; padding-bottom: 18px; }
  body:has(#black_wrapper .table-header) #black_wrapper::after  { font-size: 0.95rem; margin-bottom: 18px; }
}
#black {
  background: transparent !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}
/* keep theme floats; just add a touch of right padding on the promo card
   so it doesn't kiss the comparison table */
#black > .box25 { padding-right: 12px !important; }

/* HOMEPAGE: responsible-gambling notice below the promo card. Float layout
   kept (flex/grid on #black break the table). The notice fills the gap the
   shorter promo column would otherwise leave beside the taller table. */
body:has(#black_wrapper .table-header) #black > .box25::after {
  content: "18+ · Glücksspiel kann süchtig machen · Hilfe: BZgA 0800 1 37 27 00";
  display: block;
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: "Inter","Roboto",sans-serif;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-500);
  text-align: center;
  box-shadow: var(--shadow-1);
}

/* ============================================================
   7. Sidebar / main split
   ============================================================ */
.box25, .box75 { padding: 0 8px !important; }
.box25 .widget {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
}
.box25 h3, .box25 .widget-title {
  font-size: 1rem !important;
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
  border-bottom: 2px solid var(--brand-red);
  color: var(--ink-900) !important;
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   8. PROMO CARD (.tablebox) — left column featured bookmaker
   Original: dark <.content> absolute-positioned at bottom over
   the bookmaker logo. We turn it into a light card with image
   on top and content below.
   ============================================================ */
.tablebox {
  background: var(--card) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
  padding: 0 !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 0 !important;
}
/* kill the intro contentbox's bottom margin so section 1 sits tight to
   the breadcrumb/article below it */
#black_wrapper .contentbox,
#black .box75 .contentbox { margin: 0 !important; }
.tablebox::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-teal));
  z-index: 3;
}
.tablebox > a:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 18px 14px;
  text-align: center;
  background: #fff;
  min-height: 150px;
}
/* Promo-card banner logo only (.tblimg). Larger box than the small widget
   logos (.secimg), but still uniform across review pages via object-fit. */
.tablebox img.tblimg {
  float: none !important;
  width: 100% !important;
  max-width: 250px !important;
  height: 104px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}
.tablebox .content {
  position: static !important;
  width: 100% !important;
  background: #f8fafc !important;
  opacity: 1 !important;
  padding: 14px 16px 16px !important;
  text-align: center;
  border-top: 1px solid var(--line);
}
.tablebox .title {
  margin: 0 0 6px !important;
  color: var(--ink-900) !important;
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1.05rem !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.tablebox .title a, .tablebox .title a:visited {
  color: var(--ink-900) !important;
}
.tablebox .bonus {
  margin: 6px 0 14px !important;
  color: var(--brand-red) !important;
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tablebox .btndiv {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tablebox .btndiv a { width: 100%; box-sizing: border-box; }

/* ============================================================
   9. BUTTONS — .cssbutton and .cssbutton.cssbutton2
   .cssbutton  = primary red CTA
   .cssbutton2 = teal secondary
   Theme had font-size:1.333em which against 16px body = 21px (overflow)
   ============================================================ */
a.cssbutton,
.btndiv a.cssbutton,
p.form-submit input#submit,
.table a.cssbutton {
  display: inline-block;
  background: var(--brand-red) !important;
  color: #fff !important;
  font-family: "Roboto Condensed","Inter",sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 0 10px !important;
  height: 36px !important;
  line-height: 36px !important;
  border-radius: var(--radius-sm) !important;
  border: 0 !important;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background .15s, transform .1s, box-shadow .15s;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  width: 100%;
  max-width: 200px;
  box-sizing: border-box;
}
a.cssbutton:hover,
.btndiv a.cssbutton:hover,
.table a.cssbutton:hover,
p.form-submit input#submit:hover {
  background: var(--brand-red-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  text-decoration: none !important;
}
a.cssbutton:active { transform: translateY(0); box-shadow: var(--shadow-1); }

/* Standalone CTA buttons in article content (e.g. "Hole dir den … Bonus")
   live inside a .txtcenter wrapper and must size to their text. The narrow
   comparison-table buttons are NEVER in .txtcenter, so scoping to it avoids
   touching them (the homepage table sits inside #black_wrapper). */
.txtcenter > a.cssbutton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 46px !important;
  line-height: 1.2 !important;
  padding: 12px 32px !important;
  font-size: 0.95rem !important;
  text-align: center !important;
}

/* .cssbutton2 = teal variant */
a.cssbutton.cssbutton2,
.btndiv a.cssbutton.cssbutton2,
.table a.cssbutton.cssbutton2 {
  background: var(--brand-teal) !important;
  color: #fff !important;
}
a.cssbutton.cssbutton2:hover,
.btndiv a.cssbutton.cssbutton2:hover,
.table a.cssbutton.cssbutton2:hover {
  background: var(--brand-teal-dark) !important;
  color: #fff !important;
}

/* Inside the table's narrow 12% columns, buttons need to shrink AND wrap.
   On single pages the table sits in the 68%-wide #content area, so column
   widths drop and "TESTBERICHT" / "Jetzt Wetten" would otherwise clip. */
.table a.cssbutton {
  font-size: 0.7rem !important;
  padding: 6px 4px !important;
  height: auto !important;
  min-height: 32px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  width: 100%;
  max-width: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal !important;
  overflow: visible !important;
  word-break: keep-all;
  box-sizing: border-box;
}

/* ============================================================
   10. COMPARISON TABLE
   ============================================================ */
.table {
  background: var(--card) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin-bottom: 24px !important;
}
/* Clean section title — subordinate to the hero but still solid/dark.
   No bullet, no heavy underline (that competed with the hero accent). */
.table .table-title {
  background: transparent !important;
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-transform: none;
  letter-spacing: 0 !important;
  color: var(--ink-900) !important;
  padding: 18px 20px 14px !important;
  margin: 0 !important;
}
.table .table-title span {
  display: inline;
  padding: 0 !important;
  border: 0 !important;
}
.table .table-title span::before { content: none !important; }
.table .table-header {
  background: var(--ink-900) !important;
  color: #fff !important;
  padding: 10px 0 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 !important;
}
.table .table-header .row {
  color: #fff !important;
  padding: 6px 6px !important;
  line-height: 1.2 !important;
  background: transparent !important;
  border: 0 !important;
}
.table .table-content,
.table .table-content-alt {
  background: var(--card) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  transition: background .15s;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.table .table-content:hover,
.table .table-content-alt:hover { background: #fafbfc !important; }
.table .table-content-alt { background: #fcfcfd !important; }
.table .table-content:last-of-type,
.table .table-content-alt:last-of-type { border-bottom: none !important; }
.table .row {
  padding: 6px 6px !important;
  box-sizing: border-box;
  line-height: 1.3;
}
/* Flex-center the rank number + name cells so their glyphs sit on the
   same vertical line despite different fonts/sizes. */
.table .table-content .row1,
.table .table-content-alt .row1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--brand-red) !important;
}
.table .table-content .row2,
.table .table-content-alt .row2 {
  display: flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
.row2 a, .row2 a:visited {
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  font-size: 0.95rem !important;
}
.row2 a:hover { color: var(--brand-red) !important; }
/* .bonus1 / .bonus2 are paired pills (red % + teal €) in the table.
   Theme has float:left width:50% bg:red / bg:teal — keep that, polish edges. */
.table .bonus1, .table .bonus2 {
  height: 44px !important;
  line-height: 44px !important;
  color: #fff !important;
  text-align: center;
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  float: left;
  width: 50%;
  box-sizing: border-box;
}
.table .bonus1 {
  background: var(--brand-red) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
.table .bonus2 {
  background: var(--brand-teal) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
/* Promo card uses the SAME class names but different context — there
   .bonus is a single big number, not paired pills. */
.tablebox .bonus {
  /* (already styled above in section 8) */
}
.rankbar {
  background: var(--line) !important;
  border-radius: 999px !important;
  height: 8px !important;
  margin: 0 8px !important;
  overflow: hidden;
  position: relative;
}
.rankbar span {
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-red)) !important;
  height: 100% !important;
  border-radius: 999px !important;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

/* ============================================================
   11. Section content cards (posts grid)
   Theme uses float:left; width:33.33% with no gap + empty .cf
   clearfix divs between rows. Convert to CSS grid for gaps and
   equal-height cards.
   ============================================================ */
/* Flexbox 3-col grid using negative-margin technique for perfect
   column alignment across all rows. clear:both pushes contentbox
   below the floating .box25/.box75 above. */
div.contentbox {
  display: flex !important;
  flex-wrap: wrap;
  margin: 18px -9px !important;     /* negative side margin to absorb card margins */
  align-items: stretch;
  clear: both !important;
  width: auto !important;
}
/* Clear the float context for the .box25 / .box75 pair so anything
   after them starts on a new line. */
.box25, .box75 { margin-bottom: 0 !important; }
/* hide the empty <div class="cf"></div> spacers the theme inserts.
   In grid these would otherwise occupy cells and break the layout. */
div.contentbox > div.cf:not(.sectionbox3),
div.contentbox > div.cf:empty { display: none !important; }

.sectionbox3,
div.contentbox .sectionbox3 {
  float: none !important;
  /* Each card = 1/3 of container minus 18px (9px margin × 2) */
  width: calc(33.333% - 18px) !important;
  flex: 0 0 calc(33.333% - 18px) !important;
  min-width: 0 !important;
  max-width: calc(33.333% - 18px) !important;
  margin: 9px !important;
  /* Fixed min-height so ALL cards across ALL rows are the same size. */
  min-height: 360px !important;
  align-self: stretch !important;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 14px !important;
  display: flex !important;
  flex-direction: column;
  text-align: left !important;
  transition: box-shadow .15s, transform .15s;
  box-sizing: border-box;
}
div.contentbox .sectionbox3:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* Theme had image floated with opacity:0.1 as a background. Reset that. */
.sectionbox3 .secimg,
div.contentbox .sectionbox3 .secimg,
div.contentbox .sectionbox3 img.secimg {
  float: none !important;
  width: 100% !important;
  height: 160px !important;
  object-fit: cover;
  opacity: 1 !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 12px !important;
  border: 0 !important;
  display: block;
}

/* PLACEHOLDER REPLACEMENT
   112 of 154 posts have no featured image. The theme falls back to
   themes/wette22/images/pic.jpg (393x295) and BFI_Thumb caches it as
   /wp-content/uploads/bfi_thumb/pic-*.jpg at 250x250 — upscaled by
   our display, ends up blurry and identical on every card. Hide that
   placeholder and replace with rotating brand-color gradient + icon. */
div.contentbox .sectionbox3 img.secimg[src*="/bfi_thumb/pic-"] {
  display: none !important;
}
/* When the image link is empty (placeholder hidden), the <a> wrapping
   the image renders as the card cover. Style it as a gradient panel. */
div.contentbox .sectionbox3 > a:first-of-type {
  display: block;
  height: 160px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-teal) 100%);
  box-shadow: 0 1px 2px rgba(17,24,39,0.08) inset;
}
/* If a real image is inside this <a>, let it fill normally (image
   covers the gradient). Only show the gradient when the img is hidden. */
div.contentbox .sectionbox3 > a:first-of-type:has(img.secimg:not([src*="/bfi_thumb/pic-"])) {
  background: transparent;
  height: auto;
  box-shadow: none;
}
div.contentbox .sectionbox3 > a:first-of-type img.secimg {
  position: relative; z-index: 2;
}
/* Soccer ball watermark inside the gradient cover */
div.contentbox .sectionbox3 > a:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12) 0, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0, transparent 50%);
  pointer-events: none;
  z-index: 1;
}
div.contentbox .sectionbox3 > a:first-of-type::before {
  content: "⚽";
  position: absolute;
  font-size: 76px;
  line-height: 1;
  opacity: 0.95;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45));
}
/* Hide watermarks on cards that have a real image */
div.contentbox .sectionbox3:has(img.secimg:not([src*="/bfi_thumb/pic-"])) > a:first-of-type::before,
div.contentbox .sectionbox3:has(img.secimg:not([src*="/bfi_thumb/pic-"])) > a:first-of-type::after {
  display: none;
}
/* Rotate gradient colors so cards don't all look identical */
div.contentbox .sectionbox3:nth-child(3n+1) > a:first-of-type {
  background: linear-gradient(135deg, #d11f43 0%, #079eb1 100%);
}
div.contentbox .sectionbox3:nth-child(3n+2) > a:first-of-type {
  background: linear-gradient(135deg, #1f2937 0%, #d11f43 100%);
}
div.contentbox .sectionbox3:nth-child(3n+3) > a:first-of-type {
  background: linear-gradient(135deg, #079eb1 0%, #1f2937 100%);
}
/* Alternate icon for variety */
div.contentbox .sectionbox3:nth-child(3n+2) > a:first-of-type::before { content: "🎯"; }
div.contentbox .sectionbox3:nth-child(3n+3) > a:first-of-type::before { content: "🏆"; }

/* Theme positioned .content absolutely with margin-left:-100%. Reset. */
.sectionbox3 .content,
div.contentbox .sectionbox3 .content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ink-700) !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  flex: 1;            /* allow grow so footer button aligns to bottom */
}

.sectionbox3 .title,
div.contentbox .sectionbox3 .title {
  font-size: 1rem !important;
  font-family: "Inter","Roboto",sans-serif !important;
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
  padding: 0 !important;
  text-transform: none !important;
}
.sectionbox3 .title a, .sectionbox3 .title a:visited,
div.contentbox .sectionbox3 .title a {
  color: var(--ink-900) !important;
}
.sectionbox3 .title a:hover { color: var(--brand-red) !important; }

.sectionbox3 p {
  font-size: 0.875rem !important;
  color: var(--ink-500) !important;
  line-height: 1.55 !important;
  margin: 0 0 12px !important;
  flex: 1;            /* push readmore to bottom */
}

.sectionbox3 .readmore,
div.contentbox .sectionbox3 a.readmore {
  display: inline-block;
  align-self: flex-start;
  background: transparent;
  color: var(--brand-teal) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  padding: 7px 14px !important;
  border: 1px solid var(--brand-teal) !important;
  border-radius: var(--radius-sm) !important;
  transition: all .15s;
  margin-top: auto;   /* stick to bottom of card */
}
.sectionbox3 .readmore:hover,
div.contentbox .sectionbox3 a.readmore:hover {
  background: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
  color: #fff !important;
}

/* ============================================================
   12. Content (single posts / pages)
   ============================================================ */
.entry-content, .post-content, .single .content, .page .content, .post .content {
  font-size: 1rem;
  line-height: 1.75;
}
.entry-content h2, .post-content h2, .single h2 { margin-top: 1.8em !important; }
.entry-content h3, .post-content h3, .single h3 { margin-top: 1.5em !important; }
.entry-content blockquote {
  border-left: 4px solid var(--brand-red);
  padding: 0.6em 1em;
  margin: 1.5em 0;
  background: var(--brand-red-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-700);
  font-style: italic;
}
.entry-content img, .post-content img { border-radius: var(--radius-sm); border: 0 !important; }

/* ============================================================
   13. Footer
   ============================================================ */
/* Full-width footer band — stretches edge-to-edge, inner content centered */
#footer {
  background: var(--ink-900) !important;
  color: #cbd5e1 !important;
  border-radius: 0 !important;
  margin: 40px 0 0 !important;
  padding: 34px 20px !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* center the footer's inner blocks at the same max-width as the content */
#footer .menu-footer-menu-container,
#footer .copywrite,
#footer .socialholder {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#footer .menu, #footer ul#menu-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  padding: 0 !important;
  margin: 0 0 12px !important;
  list-style: none !important;
}
#footer li, #footer ul.menu li {
  list-style: none !important;
  margin: 0 !important;
  /* space on both sides so text doesn't touch the separator line */
  padding: 0 20px !important;
  border-right: 1px solid rgba(255,255,255,0.22) !important;
}
#footer li:first-child, #footer ul.menu li.first-menu-item {
  padding-left: 0 !important;
}
#footer li:last-child, #footer ul.menu li.last-menu-item {
  border-right: 0 !important;
  padding-right: 0 !important;
}
#footer a, #footer a:visited {
  color: #e5e7eb !important;
  font-weight: 500;
  text-decoration: none;
}
#footer a:hover { color: var(--brand-red) !important; }
#footer .copywrite {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 14px !important;
  font-size: 0.85rem;
  color: var(--ink-300) !important;
}
#footer .socialholder { margin-top: 10px; }
#footer .socialicon {
  width: 28px; height: 28px;
  margin-right: 6px;
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity .15s;
  border: 0 !important;
}
#footer .socialicon:hover { opacity: 1; }

/* ============================================================
   14. Pagination
   ============================================================ */
.wp-pagenavi { float: none !important; display: flex; gap: 4px; justify-content: center; margin: 24px 0 !important; }
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
  display: inline-block;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-700) !important;
  font-weight: 500 !important;
}
.wp-pagenavi b, .wp-pagenavi span.current {
  background: var(--brand-red) !important;
  color: #fff !important;
  border-color: var(--brand-red) !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
}
.wp-pagenavi a:hover { border-color: var(--brand-red) !important; color: var(--brand-red) !important; background: #fff !important; }

/* ============================================================
   15. Forms (Contact Form 7)
   ============================================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  display: block;
  width: 100%;
  max-width: 480px;
  padding: 10px 14px !important;
  font-size: 1rem !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--card) !important;
  margin-top: 6px;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit !important;
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
  outline: none;
  border-color: var(--brand-teal) !important;
  box-shadow: 0 0 0 3px rgba(7,158,177,.15) !important;
}
.wpcf7 label { display: block; font-weight: 600; margin-top: 14px; color: var(--ink-700); }
.wpcf7 p.form-submit input[type="submit"],
.wpcf7 input.wpcf7-submit,
.wpcf7 input[type="submit"] {
  display: inline-block;
  background: var(--brand-red) !important;
  background-image: linear-gradient(180deg, var(--brand-red) 0%, var(--brand-red-dark) 100%) !important;
  color: #fff !important;
  padding: 0 36px !important;
  min-width: 180px;
  height: 52px !important;
  line-height: 52px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-family: "Roboto Condensed","Inter",sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(209,31,67,0.25), 0 1px 2px rgba(0,0,0,0.05);
  transition: transform .12s ease, box-shadow .15s ease, background .15s;
  margin-top: 8px;
  -webkit-appearance: none;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 input.wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(209,31,67,0.35), 0 2px 4px rgba(0,0,0,0.05);
  color: #fff !important;
}
.wpcf7 input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(209,31,67,0.25);
}
/* Tag a small arrow inside the wrapping <p> via ::after — visual cue */
.wpcf7 p:has(> input.wpcf7-submit) {
  position: relative;
  display: inline-block;
}
.wpcf7 p:has(> input.wpcf7-submit)::after {
  content: "→";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.2rem;
  pointer-events: none;
  font-weight: 400;
  margin-top: 4px;  /* compensate margin-top:8px on input */
}

/* ============================================================
   16. Theme em-using bits that broke from body-size bump
   Restore reasonable sizes for everything that used relative units.
   ============================================================ */
.searchform .s { font-size: 14px !important; }
#crumbs { font-size: 0.85rem !important; padding: 8px 12px !important; border-radius: var(--radius-sm); background: var(--card) !important; border: 1px solid var(--line); color: var(--ink-500) !important; }
#crumbs a, #crumbs a:hover { color: var(--brand-teal) !important; }

/* ============================================================
   17. Mobile (<=768px)
   ============================================================ */
@media (max-width: 768px) {
  #wrapper, #header, #menu, #footer, #mobmenu, .welcomebox { max-width: 100% !important; }
  #wrapper { padding: 12px !important; }
  .welcomebox {
    padding: 18px 16px !important;
    font-size: 14px !important;
    column-count: 1 !important;
    column-rule: none !important;
  }
  .welcomebox .header, .welcomebox h2.header { font-size: 1.25rem !important; }
  .box25, .box75 { padding: 0 !important; }
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.25rem !important; }
  .table .table-header { display: none !important; }
  .table .table-content, .table .table-content-alt {
    flex-direction: column;
    align-items: stretch;
    padding: 14px !important;
  }
  .table .row { width: 100% !important; text-align: left !important; }
  .row1 { font-size: 1.05rem !important; }
  .bonus1 { font-size: 1rem !important; }
  .table a.cssbutton { font-size: 0.8rem !important; height: 38px !important; line-height: 38px !important; }
  /* Post grid: 1 col on phones, 2 cols on small tablets */
  div.contentbox { grid-template-columns: 1fr !important; gap: 12px !important; }
  #mobmenu a.mobmenubtn {
    background: var(--brand-red) !important;
    border-radius: var(--radius-sm);
    margin-right: 6px;
  }
}

/* ============================================================
   18a. LOWER WIDGET AREA POLISH
   Three widget columns: Wettbonus (50%) + Strategien (25%) +
   Varianten/Zahlungsanbieter (25%). Theme has inconsistent header
   markup (.contentbox .header vs .sidebox .title) and repeats the
   same placeholder image inside each widget. Normalize everything.
   ============================================================ */

/* Make .box50 and .box25 (widget columns) into matching white cards */
.box50, .box25 {
  background: var(--card) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1);
  padding: 20px !important;
  margin: 0 !important;
  box-sizing: border-box;
}
/* Layout: 50/25/25 flex row with gap */
.box50 ~ .box25 ~ .box25,
.box50 + .box25,
.box50 {
  /* fall back to theme floats; we'll grid wrap them via a parent rule */
}

/* Lower widget area: only kicks in on the HOMEPAGE, detected by the
   presence of a direct .box50 child of #container. Single pages have
   #content + .sidebar instead, and must keep theme floats. */
#wrapper #container:has(> .box50) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  align-items: stretch;
  clear: both;
}
#wrapper #container:has(> .box50) > .cf:empty { display: none !important; }
#wrapper #container:has(> .box50) > .box50,
#wrapper #container:has(> .box50) > .box25 {
  flex: 1 1 30% !important;
  width: 30% !important;
  max-width: calc(33.333% - 12px) !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#wrapper #container:has(> .box50) > section,
#wrapper #container:has(> .box50) > div:not(.box50):not(.box25):not(.cf) {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
}
/* Top sidebar (.box25 next to .box75) stays at original 25% width */
.box75 + .box25, .box25:only-of-type {
  width: 25% !important;
  margin: 0 !important;
  float: left !important;
}
/* Mobile collapse */
@media (max-width: 900px) {
  #wrapper #container > .box50,
  #wrapper #container > .box25 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* When .box25 is alone next to .box75 (the top sidebar), use 25% */
.box75 + .box25, .box25:only-of-type {
  width: 25% !important;
  margin: 0 !important;
}
/* Mobile collapse */
@media (max-width: 900px) {
  .box50, .box25 { width: 100% !important; margin: 0 0 18px 0 !important; float: none !important; }
}

/* Uniform widget header (both .contentbox > .header and .sidebox > .title) */
.box50 .contentbox > .header,
.box50 .contentbox > h2.header,
.box25 .sidebox > .title,
.box25 .sidebox > h2.title {
  display: block !important;
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1.1rem !important;
  color: var(--ink-900) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  margin: 0 0 18px !important;
  padding: 0 0 10px !important;
  border-bottom: 3px solid var(--brand-red) !important;
  background: transparent !important;
  width: auto !important;
  float: none !important;
}
.box50 .contentbox > .header span,
.box25 .sidebox > .title span {
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Inner .contentbox / .sidebox cleanup: undo the theme card styling
   so each widget's inner items stack neatly inside the parent box */
.box50 .contentbox,
.box25 .sidebox {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;        /* NOT grid/flex — items stack */
  clear: none !important;
  width: auto !important;
}

/* Inside-widget item style — uniform list-ish cards with alternating tints.
   The final selector catches Zahlungsanbieter items that also carry the
   theme's .sectionbox3 class (float:left; width:33.33%) which otherwise
   squeezes them into a narrow column and wraps the title mid-word. */
.box50 .contentbox > .sectionbox,
.box50 .contentbox > article.sectionbox,
.box25 .sidebox > .sectionbox,
.box25 .sidebox > .sectionbox2,
.box25 .sidebox > article,
.box25 .sidebox > article.sectionbox3,
.box25 .sidebox > .sectionbox3 {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  padding: 12px 14px !important;
  margin: 0 0 6px !important;
  border-radius: var(--radius-sm) !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  text-align: left !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, transform .15s;
  cursor: pointer;
}
/* Title in sidebar items must be allowed to fill remaining width and wrap
   at word boundaries (not be crushed to ~60px by theme float widths). */
.box25 .sidebox > article > .title,
.box25 .sidebox > .sectionbox2 > .title,
.box25 .sidebox > .sectionbox3 > .title {
  flex: 1 1 auto !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}
/* Reset the theme's .sidebox .sectionbox3 img float/width quirks */
.box25 .sidebox > .sectionbox3 img.secimg,
.box25 .sidebox > article.sectionbox3 img.secimg {
  float: none !important;
  width: 100% !important;
}
/* Alternating row tint for visual rhythm */
.box50 .contentbox > article:nth-of-type(odd),
.box25 .sidebox > article:nth-of-type(odd) {
  background: #f8fafc !important;
}
/* Hover state — pops out with red accent */
.box50 .contentbox > .sectionbox:hover,
.box50 .contentbox > article.sectionbox:hover,
.box25 .sidebox > .sectionbox:hover,
.box25 .sidebox > .sectionbox2:hover,
.box25 .sidebox > article:hover {
  background: var(--brand-red-soft) !important;
  border-left-color: var(--brand-red) !important;
  transform: translateX(2px);
}

/* Item logo — transparent, centered, no box. mix-blend-mode:multiply on
   the image (below) drops the baked-in white background into the card. */
.box25 .sidebox > .sectionbox > a:first-of-type,
.box25 .sidebox > .sectionbox2 > a:first-of-type {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
}
/* Wettbonus items — larger centered logo, no box */
.box50 .contentbox > .sectionbox > a:first-of-type {
  flex: 0 0 96px;
  width: 96px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
}
.box50 .contentbox > .sectionbox > a:first-of-type img,
.box25 .sidebox > .sectionbox > a:first-of-type img,
.box25 .sidebox > .sectionbox2 > a:first-of-type img {
  /* contain = whole logo centered; multiply blend drops the baked-in
     white background so the logo sits directly on the card. */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
  float: none !important;
  margin: 0 auto !important;
  border: 0 !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Hide placeholder/repeating images (pic-* and strategie-*) — they're
   not real content, just decorative duplicates. */
.box25 .sidebox img[src*="/bfi_thumb/pic-"],
.box25 .sidebox img[src*="/bfi_thumb/strategie-"] {
  display: none !important;
}
/* When the image is hidden, collapse the image link's container */
.box25 .sidebox > .sectionbox > a:first-of-type:not(:has(img:not([src*="/bfi_thumb/pic-"]):not([src*="/bfi_thumb/strategie-"]))),
.box25 .sidebox > .sectionbox2 > a:first-of-type:not(:has(img:not([src*="/bfi_thumb/pic-"]):not([src*="/bfi_thumb/strategie-"]))) {
  display: none !important;
}

/* Item content/title/excerpt — uniform */
.box50 .contentbox > .sectionbox > .content,
.box25 .sidebox > .sectionbox .content {
  flex: 1;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ink-700) !important;
  text-align: left !important;
  min-width: 0;
}

/* For Strategien/Varianten items where title + p are direct siblings of <a>
   (no .content wrapper) — wrap them visually in a flex column on the right
   of the logo. Use flex-grow on the right children so they stack vertically. */
.box25 .sidebox > .sectionbox > h3.title,
.box25 .sidebox > .sectionbox2 > h3.title,
.box25 .sidebox > article > h3.title {
  flex: 1 1 100%;
  width: auto !important;
  max-width: 100%;
  margin: 0 0 3px !important;
}
.box25 .sidebox > .sectionbox > p,
.box25 .sidebox > .sectionbox2 > p,
.box25 .sidebox > article > p {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 !important;
}
/* In narrow columns the items collapse into a single column visually */
.box25 .sidebox > .sectionbox,
.box25 .sidebox > .sectionbox2,
.box25 .sidebox > article {
  flex-wrap: wrap;
}
.box50 .contentbox > .sectionbox > .content .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-red);
  color: #fff !important;
  font-family: "Inter","Roboto",sans-serif !important;
  font-size: 0.8rem;
  font-weight: 800;
  width: 24px;
  height: 24px;
  line-height: 1;
  border-radius: 50%;
  margin-right: 8px;
  flex: 0 0 24px;
  box-sizing: border-box;
}
.box50 .contentbox > .sectionbox .title {
  font-family: "Inter","Roboto",sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  color: var(--ink-900) !important;
  flex: 1;
  float: none !important;
  width: auto !important;
  text-transform: none !important;
}
/* Narrow-column items: smaller title so German doesn't wrap to 4 lines */
.box25 .sidebox > .sectionbox > .title,
.box25 .sidebox > .sectionbox2 > .title,
.box25 .sidebox > article > h3.title {
  font-family: "Inter","Roboto",sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  color: var(--ink-900) !important;
  float: none !important;
  text-transform: none !important;
}
.box50 .contentbox .title a,
.box25 .sidebox .title a {
  color: var(--ink-900) !important;
  text-decoration: none !important;
}
.box50 .contentbox .title a:hover,
.box25 .sidebox .title a:hover { color: var(--brand-red) !important; }

/* Item paragraph — 2-line clamp for tidy list */
.box50 .contentbox > .sectionbox p,
.box25 .sidebox > .sectionbox p,
.box25 .sidebox > .sectionbox2 p {
  font-size: 0.85rem !important;
  color: var(--ink-500) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.box50 .contentbox > .sectionbox p a.readmore,
.box25 .sidebox p a.readmore {
  display: none !important;     /* hide inline "weiterlesen »" — title is already a link */
}

/* Zahlungsanbieter items (.sectionbox22): payment logos. Force a clean,
   CONSISTENT horizontal layout (logo left, name right) regardless of the
   alternating .sectionbox3 class that otherwise stacks them differently. */
.box25 .sidebox > article.sectionbox22 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
}
.box25 .sidebox > article.sectionbox22 > a:first-of-type {
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  order: 0 !important;
}
.box25 .sidebox > article.sectionbox22 > a:first-of-type img.secimg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
}
.box25 .sidebox > article.sectionbox22 > .title {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  text-align: left !important;
  align-self: center;
}

/* Hide the cf clearfix divs that the theme adds between items */
.box50 div.contentbox > div.cf:empty,
.box25 .sidebox > div.cf:empty { display: none !important; }

/* ============================================================
   17a. SINGLE-PAGE LAYOUT
   Theme intent: #content floats left ~70%, .sidebar floats right ~30%.
   The single-page article body uses <section class="contentbox"> inside
   #content; sidebar widgets use <section class="sidebox"> inside .sidebar.
   ============================================================ */
/* Wrap-up: page-level constraints */
body.single, body.page, body.archive, body.category, body.search {
  /* nothing special — let theme floats work */
}
/* Main content column */
#content {
  float: left !important;
  width: 68% !important;
  max-width: none !important;
  margin: 4px 0 32px !important;
  padding: 0 20px 0 0 !important;
  box-sizing: border-box;
}
#content section.contentbox {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 26px 32px !important;
  margin: 0 0 18px !important;
  max-width: none !important;
  display: block !important;
  width: auto !important;
}
/* Sidebar column */
.sidebar {
  float: right !important;
  width: 32% !important;
  margin: 18px 0 32px !important;
  padding: 0 0 0 8px !important;
  box-sizing: border-box;
}
.sidebar section.sidebox {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 20px !important;
  margin: 0 0 16px !important;
  box-sizing: border-box;
}
.sidebar section.sidebox > h2.title,
.sidebar section.sidebox > .title {
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1rem !important;
  color: var(--ink-900) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 14px !important;
  padding: 0 0 8px !important;
  border-bottom: 2px solid var(--brand-red);
  display: block;
  background: transparent !important;
  text-align: left !important;
  float: none !important;
  width: auto !important;
}
.sidebar section.sidebox p {
  margin: 0 0 0.6em !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--ink-700) !important;
}
.sidebar section.sidebox p:last-child { margin-bottom: 0 !important; }
.sidebar section.sidebox a {
  color: var(--brand-teal) !important;
  text-decoration: none !important;
}
.sidebar section.sidebox a:hover {
  color: var(--brand-red) !important;
  text-decoration: underline !important;
}
.sidebar section.sidebox strong { color: var(--ink-900); font-weight: 700; }
/* Vorteile/Nachteile lists in sidebar */
.sidebar section.sidebox ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.sidebar section.sidebox ul li {
  position: relative;
  padding: 6px 0 6px 26px !important;
  margin: 0 !important;
  font-size: 0.92rem !important;
  list-style: none !important;
  list-style-image: none !important;
  background-image: none !important;
  border-bottom: 1px dashed var(--line);
  line-height: 1.4;
  color: var(--ink-700);
}
.sidebar section.sidebox ul li:last-child { border-bottom: 0; }
.sidebar section.sidebox ul li.pro::before {
  content: "✓";
  position: absolute;
  left: 4px; top: 6px;
  color: #0fb364;
  font-weight: 800;
}
.sidebar section.sidebox ul li.con::before {
  content: "✕";
  position: absolute;
  left: 4px; top: 6px;
  color: var(--brand-red);
  font-weight: 800;
}
.sidebar section.sidebox ul li:not(.pro):not(.con)::before {
  content: "";
  position: absolute;
  left: 10px; top: 14px;
  width: 6px; height: 6px;
  background: var(--brand-red);
  border-radius: 50%;
}

/* Sidebar BANNERBOX (clickable image promo)
   - No "ANZEIGE" label
   - Bold red brand frame
   - Full-bleed image (no padding around it)
   - Solid red "Jetzt besuchen" CTA bar inside the link */
.sidebar .bannerbox {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 0 !important;
  margin: 0 0 18px !important;
  text-align: center !important;
  overflow: hidden;
  position: relative;
  border: 3px solid var(--brand-red);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.sidebar .bannerbox::before { display: none !important; }
.sidebar .bannerbox::after { display: none !important; }
.sidebar .bannerbox a {
  display: block !important;
  overflow: hidden;
  position: relative;
  line-height: 0;
  color: #fff !important;
  text-decoration: none !important;
}
.sidebar .bannerbox img {
  float: none !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: transform .3s ease;
}
.sidebar .bannerbox a::after {
  content: "Jetzt besuchen →";
  display: block;
  background: var(--brand-red);
  color: #fff !important;
  font-family: "Roboto Condensed","Inter",sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  text-align: center;
  line-height: 1.2;
  transition: background .2s;
}
.sidebar .bannerbox:hover { box-shadow: 0 14px 30px rgba(209,31,67,0.18); transform: translateY(-3px); }
.sidebar .bannerbox:hover img { transform: scale(1.04); }
.sidebar .bannerbox:hover a::after { background: var(--brand-red-dark); }
/* Wrap container — ensure floats are cleared at page end */
#wrapper { overflow: hidden; }
/* Responsive collapse */
@media (max-width: 900px) {
  #content, .sidebar {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
  }
}
#content section.contentbox > h2.header,
#content section.contentbox > h1.header {
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1.35rem !important;
  color: var(--ink-900) !important;
  margin: 0 0 14px !important;
  padding: 0 0 8px !important;
  border-bottom: 3px solid var(--brand-red);
  display: inline-block;
  background: transparent !important;
  text-transform: none !important;
}
#content section.contentbox > h1 + p,
#content section.contentbox > h2 + p,
#content section.contentbox > h3 + p { margin-top: 0 !important; }
#content section.contentbox h2,
#content section.contentbox h3 {
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  color: var(--ink-900) !important;
  margin: 1.5em 0 0.5em !important;
  padding: 0 !important;
  line-height: 1.25;
}
#content section.contentbox h2 { font-size: 1.25rem !important; }
#content section.contentbox h3 {
  font-size: 1.05rem !important;
  color: var(--brand-red) !important;
}
#content section.contentbox h4 { font-size: 0.98rem !important; margin: 1.2em 0 0.4em !important; }
#content section.contentbox p {
  margin: 0 0 0.9em !important;
  line-height: 1.65 !important;
  font-size: 0.92rem !important;
  color: var(--ink-700) !important;
}
#content section.contentbox ul li,
#content section.contentbox ol li { font-size: 0.92rem !important; }
#content section.contentbox b,
#content section.contentbox strong {
  color: var(--ink-900);
  font-weight: 700;
}
#content section.contentbox em { color: var(--ink-700); }

/* Article images */
#content section.contentbox .image-resized {
  margin: 1.5em 0 1.8em;
  text-align: center;
}
#content section.contentbox .image-resized img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-1);
}
#content section.contentbox img.alignleft {
  float: left;
  margin: 4px 18px 8px 0 !important;
  border: 0 !important;
  border-radius: var(--radius-sm);
}
#content section.contentbox img.alignright {
  float: right;
  margin: 4px 0 8px 18px !important;
  border: 0 !important;
  border-radius: var(--radius-sm);
}

/* Article lists — same red-dot style as welcomebox lists */
#content section.contentbox ul,
#content section.contentbox ol {
  margin: 1em 0 1.4em !important;
  padding: 0 0 0 24px !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
  list-style-image: none !important;
}
#content section.contentbox ul li,
#content section.contentbox ol li {
  position: relative;
  padding: 5px 0 5px 8px !important;
  margin: 0 !important;
  list-style: none !important;
  list-style-image: none !important;
  background-image: none !important;
  line-height: 1.55;
  color: var(--ink-700);
}
#content section.contentbox ul li::marker,
#content section.contentbox ol li::marker { content: "" !important; }
#content section.contentbox ul li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 14px;
  width: 6px;
  height: 6px;
  background: var(--brand-red);
  border-radius: 50%;
}
#content section.contentbox ol {
  counter-reset: stepcount;
  padding-left: 36px !important;
}
#content section.contentbox ol li { counter-increment: stepcount; }
#content section.contentbox ol li::before {
  content: counter(stepcount);
  position: absolute;
  left: -28px;
  top: 5px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 50%;
  text-align: center;
}

/* Article links */
#content section.contentbox a:not(.cssbutton):not(.btn) {
  color: var(--brand-teal);
  text-decoration: underline;
  text-decoration-color: rgba(7,158,177,0.35);
  text-underline-offset: 3px;
}
#content section.contentbox a:not(.cssbutton):not(.btn):hover {
  color: var(--brand-red);
  text-decoration-color: var(--brand-red);
}

/* ============================================================
   17d. Replace the text-as-image impressum.jpg with a real contact card
   The page has <img src=".../impressum.jpg"> that's actually a pixelated
   screenshot of the company address + email. Bad for SEO/a11y. Hide it
   and render a clean CSS card with the same info.
   ============================================================ */
#content p:has(> img[src*="impressum.jpg"]),
#content p:has(> img[src*="impressum-"]) {
  position: relative;
  background: var(--bg);
  border-left: 4px solid var(--brand-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px !important;
  margin: 1em 0 1.5em !important;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-700);
  font-family: "Inter","Roboto",sans-serif;
}
#content p:has(> img[src*="impressum"]) > img { display: none !important; }
#content p:has(> img[src*="impressum"])::before {
  content: "Bets Gaming Consulting Corp\A 50th Street\A Global Plaza Tower, 19th Floor, Suite H\A Panama City";
  white-space: pre-line;
  display: block;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 14px;
}
#content p:has(> img[src*="impressum"])::after {
  content: "Kontakt:  kontakt@bets.de";
  display: block;
  color: var(--brand-red);
  font-weight: 700;
  font-size: 1.05rem;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

/* ============================================================
   17e. CATEGORY / ARCHIVE LISTING ITEMS (#content section.contentbox .sectionbox)
   The theme overlaps a 75%-wide .content (white bg, brown text) over a
   50%-wide image using margin-left:-25%, which renders as dark text over
   the photo = unreadable. Rebuild each item as a clean horizontal card.
   ============================================================ */
#content section.contentbox article.sectionbox,
#content section.contentbox > .sectionbox {
  display: flex !important;
  align-items: flex-start;
  gap: 16px !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 14px !important;
  margin: 0 0 14px !important;
  box-shadow: var(--shadow-1);
  transition: box-shadow .15s, transform .15s;
  overflow: hidden;
}
#content section.contentbox article.sectionbox:hover {
  box-shadow: var(--shadow-2); transform: translateY(-2px);
}
#content section.contentbox article.sectionbox > a:first-of-type {
  flex: 0 0 150px;
  width: 150px;
  height: 100px;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  margin: 0 !important;
}
/* Use `contain` (not cover): BFI_Thumb caches all thumbnails in a 250×250
   square, so a 150×100 viewport with cover crops wide logos (Ukash, Sofort)
   at the sides. `contain` shows the full image with letterboxing — works
   for both wide logos and tall photos. */
#content section.contentbox article.sectionbox img.secimg {
  float: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 6px;
  box-sizing: border-box;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block !important;
}
#content section.contentbox article.sectionbox .content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ink-700) !important;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
/* Hide the position badge on category/archive listings — these are
   chronological tips, not a ranking, so 1·2·3 is misleading. */
#content section.contentbox article.sectionbox .content .count {
  display: none !important;
}
#content section.contentbox article.sectionbox .title,
#content section.contentbox article.sectionbox h3.title {
  font-size: 1rem !important;
  font-family: "Inter","Roboto",sans-serif !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}
#content section.contentbox article.sectionbox .title a,
#content section.contentbox article.sectionbox .title a:visited {
  color: var(--ink-900) !important;
  text-decoration: none !important;
}
#content section.contentbox article.sectionbox .title a:hover { color: var(--brand-red) !important; }
#content section.contentbox article.sectionbox p {
  font-size: 0.88rem !important;
  color: var(--ink-500) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
#content section.contentbox article.sectionbox .readmore,
#content section.contentbox article.sectionbox a.readmore {
  color: var(--brand-teal) !important;
  font-weight: 700;
  text-decoration: none !important;
}
#content section.contentbox article.sectionbox .readmore:hover { color: var(--brand-red) !important; }
/* Mobile: stack image on top */
@media (max-width: 600px) {
  #content section.contentbox article.sectionbox { flex-direction: column; }
  #content section.contentbox article.sectionbox > a:first-of-type { flex: none; width: 100%; height: 160px; }
}

/* ============================================================
   17c. TABLE OF CONTENTS (Table of Contents Plus plugin)
   The plugin renders <div id="toc_container"> with <p.toc_title>
   "Contents" and a nested <ul.toc_list>. Default styling is ugly.
   ============================================================ */
#toc_container {
  background: #f6f7f9 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 18px 22px !important;
  margin: 18px 0 24px !important;
  font-size: 0.95rem;
  width: auto !important;
  display: block !important;
  max-width: 100%;
  box-shadow: var(--shadow-1);
}
#toc_container .toc_title {
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1rem !important;
  color: var(--ink-900) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
  border-bottom: 2px solid var(--brand-red);
  text-align: left !important;
  font-weight: 700;
  background: transparent !important;
}
#toc_container .toc_title::before {
  content: "📑 ";
  margin-right: 4px;
}
#toc_container .toc_toggle { display: none !important; }
#toc_container ul.toc_list,
#toc_container ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#toc_container ul li {
  position: relative;
  margin: 0 !important;
  padding: 4px 0 4px 0 !important;
  list-style: none !important;
  list-style-image: none !important;
  background: transparent !important;
  background-image: none !important;
  line-height: 1.4;
  border: 0 !important;
}
#toc_container ul li::before { content: none !important; }
#toc_container ul ul { padding: 4px 0 4px 18px !important; }
#toc_container ul ul ul { padding-left: 18px !important; }
#toc_container ul li a {
  color: var(--ink-700) !important;
  text-decoration: none !important;
  display: inline-block;
  padding: 2px 0;
  transition: color .15s;
}
#toc_container ul li a:hover {
  color: var(--brand-red) !important;
  text-decoration: underline !important;
}
#toc_container .toc_number {
  display: inline-block;
  min-width: 28px;
  font-weight: 700;
  color: var(--brand-red);
  font-family: "Fjalla One",sans-serif;
  margin-right: 6px;
}
#toc_container .toc_depth_2 { color: var(--brand-teal); }
#toc_container .toc_depth_3 { color: var(--ink-500); font-weight: 600; }

/* ============================================================
   17b. Override inline white text where we've removed the dark bg.
   Single-page hero (inside #black_wrapper) and article content
   (#content) had inline style="color:#FFF" on titles/paragraphs,
   left over from when the page bg was dark. Force them dark now.
   ============================================================ */
#black_wrapper [style*="color:#FFF"],
#black_wrapper [style*="color:#fff"],
#black_wrapper [style*="color: #FFF"],
#black_wrapper [style*="color: #fff"],
#black_wrapper [style*="color:white"],
#content [style*="color:#FFF"],
#content [style*="color:#fff"],
#content [style*="color: #FFF"],
#content [style*="color: #fff"],
#content [style*="color:white"],
#content [style*="color: white"] {
  color: var(--ink-900) !important;
}
#black_wrapper [style*="color:#FFF"] *,
#black_wrapper [style*="color:#fff"] *,
#content [style*="color:#FFF"] *,
#content [style*="color:#fff"] *,
#content [style*="color:white"] * {
  color: inherit !important;
}
/* The single-page hero H1 + intro inside #black_wrapper: style as a
   proper hero title now that it's on a light background. */
#black_wrapper h1.header {
  font-family: "Fjalla One","Roboto Condensed",sans-serif !important;
  font-size: 1.7rem !important;
  color: var(--ink-900) !important;
  margin: 0 0 12px !important;
  padding: 0 0 10px !important;
  border-bottom: 3px solid var(--brand-red);
  display: inline-block;
}
#black_wrapper h1.header span { color: inherit !important; }
#black_wrapper .contentbox p {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: var(--ink-700) !important;
}

/* ============================================================
   17z. HOMEPAGE REORDER — show the comparison table in the ATF
   Scoped via :has() so it only applies when #black_wrapper actually
   contains a comparison table (homepage), not on single pages.
   ============================================================ */
body:has(#black_wrapper .table-header) {
  display: flex !important;
  flex-direction: column !important;
}
/* Default all body direct children to a low order so the menu/header
   stay on top, then push welcomebox down past black_wrapper. */
body:has(#black_wrapper .table-header) > * { order: 0; }
body:has(#black_wrapper .table-header) > #mobmenu_wrapper { order: 1 !important; }
body:has(#black_wrapper .table-header) > #header_wrapper  { order: 2 !important; }
body:has(#black_wrapper .table-header) > #menu_wrapper    { order: 3 !important; }
body:has(#black_wrapper .table-header) > #black_wrapper   { order: 4 !important; }
body:has(#black_wrapper .table-header) > .welcomebox_wrapper { order: 5 !important; }
body:has(#black_wrapper .table-header) > #wrapper         { order: 6 !important; }
body:has(#black_wrapper .table-header) > #footer          { order: 7 !important; }

/* ============================================================
   17y. YOUTUBE CTA CARD (.yt-cta)
   Used in posts where the original YouTube embed was region/age
   blocked. Renders the thumbnail with a play-button overlay; clicking
   opens the video on YouTube directly.
   ============================================================ */
.yt-cta-wrap {
  margin: 1.5em 0;
  max-width: 560px;
}
a.yt-cta {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
  background: var(--ink-900);
  line-height: 0;
}
a.yt-cta img {
  display: block;
  width: 100%;
  height: auto;
  border: 0 !important;
  border-radius: 0 !important;
  transition: transform .35s ease, opacity .2s;
  opacity: 0.92;
}
a.yt-cta .yt-cta-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  background: rgba(209,31,67,0.92);
  color: #fff;
  border-radius: 50%;
  font-size: 32px;
  line-height: 88px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform .2s ease, background .2s;
  z-index: 2;
  padding-left: 6px;     /* visually center the triangle */
  box-sizing: border-box;
}
a.yt-cta .yt-cta-label {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.78);
  color: #fff;
  font-family: "Roboto Condensed","Inter",sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 2;
  line-height: 1;
}
a.yt-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
a.yt-cta:hover img { opacity: 1; transform: scale(1.04); }
a.yt-cta:hover .yt-cta-play { background: var(--brand-red); transform: translate(-50%, -50%) scale(1.08); }

/* ============================================================
   18. Misc polish
   ============================================================ */
::selection { background: var(--brand-red); color: #fff; }
hr { border: none; border-top: 1px solid var(--line); margin: 1.5em 0; }
img { max-width: 100%; height: auto; }
.cf::after { content: ""; display: table; clear: both; }
img.alignleft, img.alignright { border: 0 !important; border-radius: var(--radius-sm); }