/* ============================================================================
   Affiliato Glass-Kit CSS — gebündelt: 1) tb-glass-table (Basis-Komponente),
   2) tb-rm-Baukasten inkl. Farbschema .tb-rm--foxiz (Theme-Akzent).
   Lädt im Front-End UND im Block-Editor (enqueue_block_assets).
   ============================================================================ */

/* ==========================================================================
   techboys.de — Glass Table Component
   Glassmorphism-Tabelle für Episodenguides, Vergleiche, Spec-Sheets.
   Nutzt die bestehenden --techboys-cyan / --glass-* Variablen.

   Anwendung: Gutenberg-Tabelle + Klasse "tb-glass-table"
   (Block > Erweitert > Zusätzliche CSS-Klasse(n))

   Einfügen in: Design > Customizer > Zusätzliches CSS
   ========================================================================== */


/* ── DARK MODE (Default auf techboys.de) ────────────────────────────── */

.tb-glass-table table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(22, 28, 42, 0.7) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(102, 252, 241, 0.18) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  width: 100% !important;
}

/* ── Kopfzeile ───────────────────────────────────────────────────────── */

.tb-glass-table thead tr {
  background: linear-gradient(
    135deg,
    rgba(102, 252, 241, 0.15) 0%,
    rgba(102, 252, 241, 0.06) 100%
  ) !important;
}

.tb-glass-table thead th {
  color: #66fcf1 !important;
  font-family: var(--btn-family, 'Reddit Sans', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(102, 252, 241, 0.2) !important;
  border-right: none !important;
  border-left: none !important;
  background: transparent !important;
  white-space: nowrap !important;
}

/* ── Zellen ──────────────────────────────────────────────────────────── */

.tb-glass-table tbody td {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(102, 252, 241, 0.07) !important;
  border-right: none !important;
  border-left: none !important;
  background: transparent !important;
  transition: background 0.2s ease !important;
}

/* Episoden-Nummern: leichter Cyan-Ton */
.tb-glass-table tbody td:first-child {
  color: rgba(102, 252, 241, 0.7) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* Letzte Zeile: kein Bottom-Border */
.tb-glass-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ── Striped Rows (is-style-stripes) ─────────────────────────────────── */

.tb-glass-table.is-style-stripes tbody tr:nth-child(odd) td,
.tb-glass-table tbody tr:nth-child(odd) td {
  background: rgba(102, 252, 241, 0.03) !important;
}

/* ── Hover ────────────────────────────────────────────────────────────── */

.tb-glass-table tbody tr:hover td {
  background: rgba(102, 252, 241, 0.08) !important;
}

/* ── Checkmarks: Grün statt default ──────────────────────────────────── */
/* Die ✓ in der Disney+ Spalte sollen leuchten */
.tb-glass-table tbody td:last-child {
  white-space: nowrap !important;
}


/* ── LIGHT MODE ──────────────────────────────────────────────────────── */

html:not([data-theme='dark']) .tb-glass-table table {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(67, 56, 202, 0.12) !important;
  box-shadow:
    0 4px 24px rgba(67, 56, 202, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

html:not([data-theme='dark']) .tb-glass-table thead tr {
  background: linear-gradient(
    135deg,
    rgba(67, 56, 202, 0.1) 0%,
    rgba(67, 56, 202, 0.04) 100%
  ) !important;
}

html:not([data-theme='dark']) .tb-glass-table thead th {
  color: #4338ca !important;
  border-bottom: 1px solid rgba(67, 56, 202, 0.15) !important;
}

html:not([data-theme='dark']) .tb-glass-table tbody td {
  color: rgba(30, 30, 60, 0.88) !important;
  border-bottom: 1px solid rgba(67, 56, 202, 0.06) !important;
}

html:not([data-theme='dark']) .tb-glass-table tbody td:first-child {
  color: rgba(67, 56, 202, 0.65) !important;
}

html:not([data-theme='dark']) .tb-glass-table.is-style-stripes tbody tr:nth-child(odd) td,
html:not([data-theme='dark']) .tb-glass-table tbody tr:nth-child(odd) td {
  background: rgba(67, 56, 202, 0.03) !important;
}

html:not([data-theme='dark']) .tb-glass-table tbody tr:hover td {
  background: rgba(67, 56, 202, 0.06) !important;
}


/* ── RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .tb-glass-table table {
    font-size: 13px !important;
  }

  .tb-glass-table thead th,
  .tb-glass-table tbody td {
    padding: 10px 10px !important;
  }

  .tb-glass-table thead th {
    font-size: 10px !important;
  }

  /* DE-Titel Spalte auf Mobile ausblenden wenn zu eng */
  .tb-glass-table thead th:nth-child(3),
  .tb-glass-table tbody td:nth-child(3) {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .tb-glass-table table {
    border-radius: 10px !important;
  }

  .tb-glass-table thead th,
  .tb-glass-table tbody td {
    padding: 8px 8px !important;
    font-size: 12px !important;
  }
}


/* ============================================================================
   techboys.de — RockMow / Mähroboter-Cluster Review-Baukasten (Glassmorphism)
   Baut auf der bestehenden DNA auf: Cluster-Palette Waldgrün #1a6b3a (Garten)
   + Tiefblau #1a4d8f (Tech/LiDAR), Glass-Karten, 'Reddit Sans', Light+Dark.
   Reuse: .tb-glass-table (Tabellen), .tb-btn-premium / .lasso-money bleiben global.

   Einfügen in: Foxiz → Theme Options → Custom CSS  (oder Customizer → Zusätzliches CSS)
   Nutzung im Artikel: je Modul ein "Custom-HTML"-Block mit der jeweiligen .tb-rm-*-Klasse.
   Alles namespaced (.tb-rm-*) → keine Kollision mit Foxiz.
   ============================================================================ */

:root {
  --rm-green:      #1a6b3a;   /* Garten / RockMow / Kamera */
  --rm-green-soft: #2e9e4f;
  --rm-mint:       #c5ebd0;
  --rm-blue:       #1a4d8f;   /* Tech / Navimow / LiDAR */
  --rm-blue-soft:  #3b7dd8;
  --rm-pro:        #2e9e4f;
  --rm-con:        #e23b54;
  --rm-ink:        #1f2a23;
  --rm-ink-soft:   #44544a;
  --rm-glass:      rgba(255,255,255,0.78);
  --rm-glass-brd:  rgba(26,107,58,0.16);
  --rm-blur:       blur(10px) saturate(160%);
  --rm-radius:     18px;
  --rm-radius-sm:  12px;
  --rm-font:       'Reddit Sans', system-ui, sans-serif;
}
[data-theme="dark"] {
  --rm-mint:      rgba(134,239,172,0.16);
  --rm-ink:       #e6efe9;
  --rm-ink-soft:  rgba(230,239,233,0.82);
  --rm-glass:     rgba(20,28,24,0.80);
  --rm-glass-brd: rgba(255,255,255,0.10);
}

[class^="tb-rm-"], [class*=" tb-rm-"] { font-family: var(--rm-font); box-sizing: border-box; }
[class^="tb-rm-"] *, [class*=" tb-rm-"] * { box-sizing: border-box; }

/* ── Gemeinsame Glass-Karte ─────────────────────────────────────────────── */
.tb-rm-verdict, .tb-rm-card, .tb-rm-duell, .tb-rm-callout,
.tb-rm-fuerwen-col, .tb-rm-methodik, .tb-rm-moments {
  background: var(--rm-glass) !important;
  -webkit-backdrop-filter: var(--rm-blur);
  backdrop-filter: var(--rm-blur);
  border: 1px solid var(--rm-glass-brd);
  border-top: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--rm-radius);
  box-shadow: 0 8px 30px rgba(26,107,58,0.10);
  color: var(--rm-ink);
}
[data-theme="dark"] .tb-rm-verdict, [data-theme="dark"] .tb-rm-card,
[data-theme="dark"] .tb-rm-duell, [data-theme="dark"] .tb-rm-callout,
[data-theme="dark"] .tb-rm-fuerwen-col, [data-theme="dark"] .tb-rm-methodik,
[data-theme="dark"] .tb-rm-moments {
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 34px rgba(0,0,0,0.40);
}

.tb-rm-badge {
  display:inline-block; padding:.32rem .85rem; border-radius:50px;
  background:var(--rm-mint); color:var(--rm-green);
  font-size:.68rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
}
[data-theme="dark"] .tb-rm-badge { color:#86efac; border:1px solid rgba(134,239,172,0.4); }

/* ════ 1. VERDICT — „Auf einen Blick" + Score ═══════════════════════════ */
.tb-rm-verdict { padding:1.6rem 1.7rem; margin:2rem 0; }
.tb-rm-verdict-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.tb-rm-verdict-head h3 { margin:.5rem 0 0; font-size:1.45rem; font-weight:800; color:var(--rm-ink); line-height:1.15; }
.tb-rm-score {
  flex-shrink:0; display:flex; align-items:baseline; gap:2px;
  background:linear-gradient(135deg,var(--rm-green),var(--rm-blue));
  color:#fff; padding:.55rem .9rem; border-radius:14px;
  box-shadow:0 6px 18px rgba(26,107,58,0.30);
}
.tb-rm-score-num { font-size:1.7rem; font-weight:800; line-height:1; }
.tb-rm-score-max { font-size:.85rem; font-weight:700; opacity:.85; }
.tb-rm-verdict-meta {
  margin:.9rem 0 1.1rem; font-size:.9rem; font-weight:600; color:var(--rm-ink-soft);
  border-left:3px solid var(--rm-green); padding-left:.7rem;
}
.tb-rm-verdict-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.tb-rm-verdict-cols ul { list-style:none; margin:0; padding:0; }
.tb-rm-verdict-cols li { font-size:.92rem; line-height:1.45; padding:.28rem 0 .28rem 1.6rem; position:relative; color:var(--rm-ink); }
.tb-rm-pro li::before { content:"✓"; position:absolute; left:0; color:var(--rm-pro); font-weight:800; }
.tb-rm-con li::before { content:"✕"; position:absolute; left:0; color:var(--rm-con); font-weight:800; }
.tb-rm-verdict-for { margin:1.1rem 0 1.1rem; font-size:.95rem; line-height:1.55; color:var(--rm-ink); }
.tb-rm-verdict-for strong { color:var(--rm-green); }
[data-theme="dark"] .tb-rm-verdict-for strong { color:#86efac; }
.tb-rm-cta {
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--rm-green); color:#fff !important; font-weight:800; letter-spacing:.5px;
  padding:.8rem 1.6rem; border-radius:50px; transition:all .3s ease;
  box-shadow:0 8px 22px rgba(26,107,58,0.30);
}
.tb-rm-cta:hover { transform:translateY(-2px); background:var(--rm-blue); box-shadow:0 12px 26px rgba(26,77,143,0.35); }

/* ════ 2. PRO / CONTRA — zwei Glass-Karten ═════════════════════════════ */
.tb-rm-procon { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:2rem 0; }
.tb-rm-card { padding:1.4rem 1.5rem; }
.tb-rm-card h4 { margin:0 0 .9rem; font-size:1.08rem; font-weight:800; display:flex; align-items:center; gap:.5rem; }
.tb-rm-card-pro h4 { color:var(--rm-pro); }
.tb-rm-card-con h4 { color:var(--rm-con); }
.tb-rm-card ul { list-style:none; margin:0; padding:0; }
.tb-rm-card li { font-size:.93rem; line-height:1.5; padding:.4rem 0 .4rem 1.7rem; position:relative; color:var(--rm-ink); border-top:1px solid var(--rm-glass-brd); }
.tb-rm-card li:first-child { border-top:none; }
.tb-rm-card-pro li::before { content:"✓"; position:absolute; left:0; top:.4rem; color:var(--rm-pro); font-weight:800; }
.tb-rm-card-con li::before { content:"✕"; position:absolute; left:0; top:.4rem; color:var(--rm-con); font-weight:800; }

/* ════ 3. A/B-DUELL — RockMow (grün) vs Navimow (blau) ═════════════════ */
.tb-rm-duell { padding:1.5rem 1.6rem; margin:2.2rem 0; }
.tb-rm-duell-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.8rem; margin-bottom:1.3rem; }
.tb-rm-duell-side { text-align:center; }
.tb-rm-duell-side span { display:block; font-weight:800; font-size:1rem; }
.tb-rm-duell-side small { font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; opacity:.8; }
.tb-rm-duell-side.rm span, .tb-rm-duell-side.rm small { color:var(--rm-green); }
.tb-rm-duell-side.nav span, .tb-rm-duell-side.nav small { color:var(--rm-blue); }
[data-theme="dark"] .tb-rm-duell-side.rm span, [data-theme="dark"] .tb-rm-duell-side.rm small { color:#86efac; }
[data-theme="dark"] .tb-rm-duell-side.nav span, [data-theme="dark"] .tb-rm-duell-side.nav small { color:var(--rm-blue-soft); }
.tb-rm-duell-vs { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--rm-mint); color:var(--rm-green); font-weight:800; font-size:.78rem; text-transform:uppercase; }
.tb-rm-duell-row { padding:.7rem 0; border-top:1px solid var(--rm-glass-brd); }
.tb-rm-duell-metric { font-size:.85rem; font-weight:700; color:var(--rm-ink-soft); margin-bottom:.45rem; }
.tb-rm-duell-bars { display:grid; gap:.4rem; }
.tb-rm-bar { position:relative; height:26px; border-radius:7px; background:rgba(0,0,0,0.05);
  display:flex; align-items:center; overflow:hidden; }
[data-theme="dark"] .tb-rm-bar { background:rgba(255,255,255,0.06); }
.tb-rm-bar::before { content:""; position:absolute; left:0; top:0; height:100%; width:var(--v,50%); border-radius:7px; opacity:.9; }
.tb-rm-bar.rm::before  { background:linear-gradient(90deg,var(--rm-green),var(--rm-green-soft)); }
.tb-rm-bar.nav::before { background:linear-gradient(90deg,var(--rm-blue),var(--rm-blue-soft)); }
.tb-rm-bar span { position:relative; z-index:1; padding:0 .6rem; font-size:.8rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.tb-rm-bar.win::after { content:"Sieger"; margin-left:auto; position:relative; z-index:1; padding:0 .6rem; font-size:.64rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#fff; opacity:.85; }
.tb-rm-duell-verdict { margin:1.1rem 0 0; font-size:.92rem; line-height:1.55; color:var(--rm-ink); border-top:1px solid var(--rm-glass-brd); padding-top:.9rem; }
.tb-rm-duell-verdict strong { color:var(--rm-green); }
[data-theme="dark"] .tb-rm-duell-verdict strong { color:#86efac; }

/* ════ 4. CALLOUTS — Kurz erklärt / Praxis-Tipp / Messwert / Achtung ═══ */
.tb-rm-callout { display:flex; gap:.9rem; align-items:center; padding:1.15rem 1.2rem; margin:1.5rem 0;
  border-left:4px solid var(--rm-green); }
.tb-rm-callout-label { flex-shrink:0; font-size:.64rem; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:7px; background:var(--rm-mint); color:var(--rm-green); white-space:nowrap; }
[data-theme="dark"] .tb-rm-callout-label { color:#86efac; }
.tb-rm-callout-body { font-size:.93rem; line-height:1.55; color:var(--rm-ink); }
.tb-rm-callout-body strong { color:var(--rm-ink); }
.tb-rm-callout--tip     { border-left-color:var(--rm-green); }
.tb-rm-callout--info    { border-left-color:var(--rm-blue); }
.tb-rm-callout--info    .tb-rm-callout-label { background:rgba(26,77,143,0.12); color:var(--rm-blue); }
[data-theme="dark"] .tb-rm-callout--info .tb-rm-callout-label { color:var(--rm-blue-soft); }
.tb-rm-callout--measure { border-left-color:#0d8f8a; }
.tb-rm-callout--measure .tb-rm-callout-label { background:rgba(13,143,138,0.12); color:#0d8f8a; }
.tb-rm-callout--warn    { border-left-color:#e2a13b; }
.tb-rm-callout--warn    .tb-rm-callout-label { background:rgba(226,161,59,0.14); color:#b9791a; }
/* Neue Varianten: techboys-Lila + Glass Glow (bestehende 4 bleiben unberührt) */
.tb-rm-callout--lila    { border-left-color:#4338ca; }
.tb-rm-callout--lila    .tb-rm-callout-label { background:rgba(67,56,202,0.12); color:#4338ca; }
[data-theme="dark"] .tb-rm-callout--lila { border-left-color:#818cf8; }
[data-theme="dark"] .tb-rm--foxiz.tb-rm-callout--lila .tb-rm-callout-label { background:rgba(129,140,248,0.20); color:#a5b4fc; }
.tb-rm-callout--glow {
  border-left-color:#6366f1;
  background:linear-gradient(135deg, rgba(99,102,241,0.10), rgba(6,182,212,0.07)) !important;
  box-shadow:0 0 0 1px rgba(99,102,241,0.25), 0 10px 38px rgba(99,102,241,0.30) !important;
}
.tb-rm-callout--glow .tb-rm-callout-label {
  background:linear-gradient(135deg,#6366f1,#06b6d4); color:#fff;
}
[data-theme="dark"] .tb-rm-callout--glow {
  border-left-color:#818cf8;
  background:linear-gradient(135deg, rgba(99,102,241,0.20), rgba(6,182,212,0.12)) !important;
  box-shadow:0 0 0 1px rgba(129,140,248,0.35), 0 10px 44px rgba(99,102,241,0.45) !important;
}
[data-theme="dark"] .tb-rm--foxiz.tb-rm-callout--glow .tb-rm-callout-label {
  background:linear-gradient(135deg,#818cf8,#22d3ee); color:#0d1117;
}

/* ════ 5. FÜR WEN / NICHT ══════════════════════════════════════════════ */
.tb-rm-fuerwen { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:2rem 0; }
.tb-rm-fuerwen-col { padding:1.4rem 1.5rem; }
.tb-rm-fuerwen-col h4 { margin:0 0 .8rem; font-size:1.05rem; font-weight:800; }
.tb-rm-fuerwen-yes h4 { color:var(--rm-green); }
.tb-rm-fuerwen-no  h4 { color:var(--rm-con); }
.tb-rm-fuerwen-col ul { list-style:none; margin:0; padding:0; }
.tb-rm-fuerwen-col li { font-size:.92rem; line-height:1.5; padding:.35rem 0 .35rem 1.6rem; position:relative; color:var(--rm-ink); }
.tb-rm-fuerwen-yes li::before { content:"→"; position:absolute; left:0; color:var(--rm-green); font-weight:800; }
.tb-rm-fuerwen-no  li::before { content:"—"; position:absolute; left:0; color:var(--rm-con); font-weight:800; }

/* ════ 6. METHODIK — „So habe ich getestet" (Trust) ═══════════════════ */
.tb-rm-methodik { padding:1.4rem 1.6rem; margin:2rem 0; }
.tb-rm-methodik h4 { margin:0 0 1rem; font-size:1.05rem; font-weight:800; color:var(--rm-ink); display:flex; align-items:center; gap:.5rem; }
.tb-rm-methodik h4::before { content:""; width:22px; height:22px; border-radius:6px; background:var(--rm-mint); flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(26,107,58,0.25); }
.tb-rm-methodik-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.tb-rm-methodik-grid > div { display:flex; flex-direction:column; gap:.2rem; }
.tb-rm-methodik-grid .n { font-size:1.15rem; font-weight:800; color:var(--rm-green); line-height:1.1; }
[data-theme="dark"] .tb-rm-methodik-grid .n { color:#86efac; }
.tb-rm-methodik-grid .l { font-size:.78rem; color:var(--rm-ink-soft); line-height:1.35; }

/* ════ 7. TABELLE — Cluster-Variante (Grün/Blau statt Indigo) ═════════
   Nutzung: Gutenberg-Tabelle mit BEIDEN Klassen: "tb-glass-table tb-rm-table"
   Überschreibt die globale Indigo-Tabelle auf die Mähroboter-Cluster-Optik. */
.tb-glass-table.tb-rm-table table {
  background: var(--rm-glass) !important;
  -webkit-backdrop-filter: var(--rm-blur) !important;
  backdrop-filter: var(--rm-blur) !important;
  border: 1px solid var(--rm-glass-brd) !important;
  border-radius: var(--rm-radius) !important;
  box-shadow: 0 8px 30px rgba(26,107,58,0.10) !important;
}
.tb-glass-table.tb-rm-table thead tr {
  background: linear-gradient(135deg, rgba(26,107,58,0.12) 0%, rgba(26,77,143,0.06) 100%) !important;
}
.tb-glass-table.tb-rm-table thead th {
  color: var(--rm-green) !important;
  border-bottom: 1px solid rgba(26,107,58,0.18) !important;
}
.tb-glass-table.tb-rm-table tbody td {
  color: var(--rm-ink) !important;
  border-bottom: 1px solid rgba(26,107,58,0.08) !important;
}
.tb-glass-table.tb-rm-table tbody td:first-child {
  color: var(--rm-green) !important;
  font-weight: 700 !important;
}
.tb-glass-table.tb-rm-table tbody tr:nth-child(odd) td {
  background: rgba(26,107,58,0.035) !important;
}
.tb-glass-table.tb-rm-table tbody tr:hover td {
  background: rgba(26,107,58,0.08) !important;
}
/* Highlight-Zeile (z. B. das Testgerät) — Klasse "is-rm" auf <tr> */
.tb-glass-table.tb-rm-table tbody tr.is-rm td {
  background: rgba(26,107,58,0.12) !important;
  box-shadow: inset 3px 0 0 var(--rm-green) !important;
}
.tb-glass-table.tb-rm-table tbody tr.is-rm td:first-child { color: var(--rm-green) !important; font-weight:800 !important; }

[data-theme="dark"] .tb-glass-table.tb-rm-table table {
  background: rgba(20,28,24,0.72) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,0.40) !important;
}
[data-theme="dark"] .tb-glass-table.tb-rm-table thead tr {
  background: linear-gradient(135deg, rgba(134,239,172,0.14) 0%, rgba(59,125,216,0.08) 100%) !important;
}
[data-theme="dark"] .tb-glass-table.tb-rm-table thead th { color:#86efac !important; border-bottom:1px solid rgba(134,239,172,0.22) !important; }
[data-theme="dark"] .tb-glass-table.tb-rm-table tbody td { color:rgba(230,239,233,0.9) !important; border-bottom:1px solid rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .tb-glass-table.tb-rm-table tbody td:first-child { color:#86efac !important; }
[data-theme="dark"] .tb-glass-table.tb-rm-table tbody tr:nth-child(odd) td { background:rgba(134,239,172,0.04) !important; }
[data-theme="dark"] .tb-glass-table.tb-rm-table tbody tr:hover td { background:rgba(134,239,172,0.09) !important; }
[data-theme="dark"] .tb-glass-table.tb-rm-table tbody tr.is-rm td { background:rgba(134,239,172,0.12) !important; box-shadow:inset 3px 0 0 #86efac !important; }

/* ════ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width:680px) {
  .tb-rm-procon, .tb-rm-verdict-cols, .tb-rm-fuerwen { grid-template-columns:1fr; }
  .tb-rm-methodik-grid { grid-template-columns:1fr 1fr; }
  .tb-rm-verdict-head { flex-direction:row; }
  .tb-rm-verdict-head h3 { font-size:1.25rem; }
  .tb-rm-duell-head { grid-template-columns:1fr auto 1fr; }
}

/* ════ FARBSCHEMA „Standard/Foxiz" — Klasse .tb-rm--foxiz ════════════════
   Neue Blöcke folgen damit dem Theme: Indigo (hell) / Cyan (dunkel).
   OHNE die Klasse (Alt-Inhalte, Roh-HTML in Artikeln) bleibt die
   Garten-Palette (Waldgrün/Tiefblau) unverändert erhalten. */
.tb-rm--foxiz {
  --rm-green:      var(--tb-accent-light, #4338ca);
  --rm-green-soft: #6366f1;
  --rm-blue:       #0e7490;
  --rm-blue-soft:  #0891b2;
  --rm-mint:       rgba(67, 56, 202, 0.12);
  --rm-glass-brd:  rgba(67, 56, 202, 0.16);
}
[data-theme="dark"] .tb-rm--foxiz {
  --rm-green:      var(--tb-cyan, #66fcf1);
  --rm-green-soft: #99fdf6;
  --rm-blue:       #93c5fd;
  --rm-blue-soft:  #bfdbfe;
  --rm-mint:       rgba(102, 252, 241, 0.13);
  --rm-glass-brd:  rgba(255, 255, 255, 0.10);
}
/* Dark-Mode-Highlights, die im Basis-Kit hart auf Mintgrün stehen → Cyan */
[data-theme="dark"] .tb-rm--foxiz .tb-rm-badge,
[data-theme="dark"] .tb-rm--foxiz.tb-rm-callout .tb-rm-callout-label,
[data-theme="dark"] .tb-rm--foxiz .tb-rm-verdict-for strong,
[data-theme="dark"] .tb-rm--foxiz .tb-rm-duell-verdict strong,
[data-theme="dark"] .tb-rm--foxiz .tb-rm-methodik-grid .n,
[data-theme="dark"] .tb-rm--foxiz .tb-rm-duell-side.rm span,
[data-theme="dark"] .tb-rm--foxiz .tb-rm-duell-side.rm small {
  color: var(--tb-cyan, #66fcf1);
}
[data-theme="dark"] .tb-rm--foxiz .tb-rm-badge { border-color: rgba(102, 252, 241, 0.4); }
/* Score-Plakette, CTA & Balken-Labels: auf Cyan-Flächen dunkle Schrift */
[data-theme="dark"] .tb-rm--foxiz .tb-rm-score { color: var(--tb-darker-bg, #0d1117); }
[data-theme="dark"] .tb-rm--foxiz .tb-rm-cta { color: var(--tb-darker-bg, #0d1117) !important; }
[data-theme="dark"] .tb-rm--foxiz .tb-rm-bar span,
[data-theme="dark"] .tb-rm--foxiz .tb-rm-bar.win::after { color: var(--tb-darker-bg, #0d1117); text-shadow: none; }
/* Info-Callout-Label (hart verdrahtetes Blau) aufs Schema heben */
.tb-rm--foxiz.tb-rm-callout--info .tb-rm-callout-label { background: rgba(8, 145, 178, 0.12); color: #0e7490; }
[data-theme="dark"] .tb-rm--foxiz.tb-rm-callout--info .tb-rm-callout-label { color: #67e8f9; }
/* Methodik-Icon-Kachel */
.tb-rm--foxiz .tb-rm-methodik h4::before { box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.25); }
[data-theme="dark"] .tb-rm--foxiz .tb-rm-methodik h4::before { box-shadow: inset 0 0 0 1px rgba(102, 252, 241, 0.3); }

/* ════ 8. KEY MOMENTS — „Auf einen Blick" als nummerierte Sprungliste ════
   Block: tb-rm/moments (Container) + tb-rm/moment (Eintrag).
   Jeder Eintrag verlinkt optional per Anker (#id) auf eine H2 im Artikel.
   Nummern-Kreise laufen über CSS-Counter — nichts von Hand nummerieren. */
.tb-rm-moments { padding:1.6rem 1.7rem; margin:2rem 0; }
.tb-rm-moments-title {
  margin:.5rem 0 .6rem; font-size:1.45rem; font-weight:800;
  color:var(--rm-ink); line-height:1.15;
}
.tb-rm-moments-list { counter-reset:tbrm-m; display:flex; flex-direction:column; }
.tb-rm-moment {
  counter-increment:tbrm-m; display:flex; align-items:flex-start; gap:1rem;
  padding:.95rem 1rem; margin:0; border-radius:var(--rm-radius-sm);
  border-top:1px solid var(--rm-glass-brd);
  text-decoration:none !important; color:inherit;
  transition:background .25s ease;
}
.tb-rm-moments-list > .tb-rm-moment:first-child,
.tb-rm-moments-list > div:first-child .tb-rm-moment { border-top:none; }
a.tb-rm-moment:hover { background:var(--rm-mint); }
.tb-rm-moment-num {
  flex-shrink:0; width:28px; height:28px; margin-top:2px; border-radius:50%;
  background:var(--rm-green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:800;
}
.tb-rm-moment-num::before { content:counter(tbrm-m); }
.tb-rm-moment-body { display:block; min-width:0; flex-grow:1; }
.tb-rm-moment-title { display:block; font-size:1.02rem; font-weight:800; color:var(--rm-ink); line-height:1.3; }
.tb-rm-moment-desc { display:block; margin-top:.25rem; font-size:.9rem; line-height:1.5; color:var(--rm-ink-soft); }
.tb-rm-moment-arrow {
  flex-shrink:0; align-self:center; color:var(--rm-green); font-weight:800;
  opacity:0; transform:translateX(-4px); transition:all .25s ease;
}
a.tb-rm-moment:hover .tb-rm-moment-arrow { opacity:1; transform:none; }
[data-theme="dark"] .tb-rm--foxiz .tb-rm-moment-num { color:var(--tb-darker-bg, #0d1117); }
[data-theme="dark"] .tb-rm-moments:not(.tb-rm--foxiz) .tb-rm-moment-num { background:var(--rm-green-soft); }
@media (max-width:680px) {
  .tb-rm-moments { padding:1.2rem 1rem; }
  .tb-rm-moment { gap:.8rem; padding:.85rem .6rem; }
  .tb-rm-moment-arrow { display:none; }
}

/* ════ 9. READ ALSO — Foxiz-Related-Box (inline, [ruby_related]) ═════════
   KEIN Ruby-Template nötig: styled die Theme-Markup der Inline-Related-Box
   (Theme Options → Single Post → Verwandte innere Inhalte). Greift nur bei
   width="wide" (Inline-Box im Content) — Sidebar-Widgets bleiben unberührt.
   Empfohlener Shortcode:
   [ruby_related heading="Lies auch" total="2" layout="2" where="all" order="rand" style="default" width="wide"] */
.s-ct .related-sec.is-width-wide,
.entry-content .related-sec.is-width-wide {
  background: var(--rm-glass) !important;
  -webkit-backdrop-filter: var(--rm-blur);
  backdrop-filter: var(--rm-blur);
  border: 1px solid rgba(67, 56, 202, 0.18) !important;
  border-radius: var(--rm-radius) !important;
  box-shadow: 0 8px 30px rgba(67, 56, 202, 0.08) !important;
  padding: 1.5rem 1.7rem !important;
  margin: 2rem 0 !important;
}
[data-theme="dark"] .s-ct .related-sec.is-width-wide,
[data-theme="dark"] .entry-content .related-sec.is-width-wide {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.40) !important;
}
/* Heading „Lies auch" — ruhig, ohne Foxiz-Deko-Balken */
.related-sec.is-width-wide .block-h,
.related-sec.is-width-wide .heading-title {
  margin-bottom: 1rem !important;
}
/* Beitrag: Bild links (Foxiz-Default ist rechts bei diesem Layout) */
.related-sec.is-width-wide .p-wrap.p-list-small-2 { flex-direction: row !important; }
.related-sec.is-width-wide .p-list-small-2 .feat-holder {
  margin-right: var(--featured-spacing, 15px) !important;
  margin-left: 0 !important;
  width: 84px !important;
}
.related-sec.is-width-wide .p-list-small-2 .p-featured,
.related-sec.is-width-wide .p-list-small-2 .feat-holder img {
  border-radius: 10px !important;
  overflow: hidden;
}
.related-sec.is-width-wide .p-wrap.p-list-small-2 {
  align-items: center !important;
  padding: .65rem 0;
}
.related-2.is-width-wide .p-wrap.p-list-small-2:not(:last-child) {
  border-bottom: 1px solid var(--rm-glass-brd);
  margin-bottom: 0 !important;
  padding-bottom: .85rem;
}
.related-sec.is-width-wide .p-list-small-2 .entry-title { font-weight: 800 !important; }
.related-sec.is-width-wide .p-list-small-2 .p-meta { opacity: .75; font-size: .82rem; }

/* ════ AI-ZUSAMMENFASSUNG „Auf einen Blick" (tb-rm/summary) ═════════════
   Großer Karten-Look mit nummerierten Kreis-Badges (wie Key Moments).
   Markup bleibt <li><strong>Lead-in:</strong> Beschreibung</li>:
   das <strong> wird zur Titelzeile, der Resttext zur Beschreibung darunter.
   Badge läuft per CSS-Counter — nichts von Hand nummerieren. */
.tb-rm-summary { padding:1.7rem 1.8rem 1.5rem; margin:2rem 0; border-radius:20px;
  background:linear-gradient(135deg, rgba(99,102,241,.07), rgba(6,182,212,.05));
  border:1px solid rgba(99,102,241,.18);
  box-shadow:0 8px 30px rgba(67,56,202,.08); }
.tb-rm-summary-label { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:#4338ca; margin-bottom:1.1rem;
  padding:.34rem .72rem; border-radius:99px; background:rgba(99,102,241,.12); }
.tb-rm-summary-list { list-style:none !important; margin:0 !important; padding:0 !important;
  counter-reset:tbrm-s; }
.tb-rm-summary-list li { counter-increment:tbrm-s; list-style:none !important; position:relative;
  padding:1rem 0 1rem 3rem; margin:0; min-height:28px; line-height:1.5; font-size:.95rem;
  color:var(--rm-ink-soft); border-top:1px solid var(--rm-glass-brd); }
.tb-rm-summary-list > li:first-child { border-top:none; }
.tb-rm-summary-list li::marker { content:"" !important; }
.tb-rm-summary-list li::before { content:counter(tbrm-s); position:absolute; left:0; top:1rem;
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#06b6d4); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:800; }
.tb-rm-summary-list li strong { display:block; font-weight:800; color:var(--rm-ink);
  line-height:1.3; margin-bottom:.12rem; }
[data-theme="dark"] .tb-rm-summary { background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(6,182,212,.10));
  border-color:rgba(102,252,241,.22); box-shadow:0 10px 34px rgba(0,0,0,.40); }
[data-theme="dark"] .tb-rm-summary-label { color:#66fcf1; background:rgba(102,252,241,.12); }
@media (max-width:680px) {
  .tb-rm-summary { padding:1.3rem 1.2rem 1.1rem; }
  .tb-rm-summary-list li { padding-left:2.7rem; }
}

/* ════ AI QUOTE PULLER (tb-rm/quote) ════════════════════════════════════ */
.tb-rm-pullquote { margin:2rem 0; padding:0; position:relative; }
.tb-rm-pullquote-text { margin:0; padding:1.3rem 1.6rem 1.3rem 2.1rem; font-size:1.25rem; line-height:1.55;
  font-weight:600; border:0; position:relative; border-radius:16px;
  background:linear-gradient(135deg, rgba(99,102,241,.07), rgba(6,182,212,.06)); }
.tb-rm-pullquote-text::before { content:""; position:absolute; left:0; top:10%; bottom:10%; width:5px;
  border-radius:99px; background:linear-gradient(180deg,#6366f1,#06b6d4); }
.tb-rm-pullquote-text::after { content:"\201D"; position:absolute; right:1rem; top:.2rem; font-size:3.2rem;
  font-weight:800; line-height:1; opacity:.13; }
.tb-rm-pullquote-cite { margin:.55rem 0 0 2.1rem; font-size:.8rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#6b7280; }
[data-theme="dark"] .tb-rm-pullquote-text { background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(6,182,212,.10)); }
[data-theme="dark"] .tb-rm-pullquote-text::before { background:linear-gradient(180deg,#818cf8,#66fcf1); }

/* ════ AI PARAGRAPH HIGHLIGHTS (Klasse tb-rm-highlight) ═════════════════ */
p.tb-rm-highlight { padding:.85rem 1.1rem; border-radius:12px; position:relative;
  background:linear-gradient(135deg, rgba(99,102,241,.07), rgba(6,182,212,.06));
  box-shadow:inset 3px 0 0 0 #6366f1; }
[data-theme="dark"] p.tb-rm-highlight { background:linear-gradient(135deg, rgba(99,102,241,.15), rgba(6,182,212,.09));
  box-shadow:inset 3px 0 0 0 #66fcf1; }