/* Bonusseiten im Bild der Reviews
 * ============================================================================
 *
 * Quelle fuer public/assets/css/ctc-bonusseite-<hash>.css. Eingehaengt von
 * scripts/bonusseiten-de/stil-einhaengen.mjs unmittelbar vor </head>, also
 * hinter allen Inline-Stilbloecken der Seite.
 *
 * WARUM ES DIESE DATEI GIBT
 *
 *   Die 53 Bonusseiten sind die einzigen Seiten des deutschen Bestands, die
 *   weder der gewoehnlichen Reviewfamilie (238 von 277 Seiten, Beispiel
 *   /de/casinos/dolly-casino) noch der DACH-Vorlage (10 Seiten) folgen. Sie
 *   bringen mit <style id="ctc-bb-design"> ein eigenes Formenvokabular mit:
 *   Verlaufsknoepfe in Blau nach Cyan, opake blaugraue Rahmen, blaustichige
 *   Graustufen, Ueberschriften mit Balken links. Gemessen am 25.09.2026 gegen
 *   die Vorschau: die Rahmenfarben beider Seiten ueberschneiden sich zu null,
 *   die Graustufen ebenfalls, und #00A1E3 kommt auf der Bonusseite 30-mal vor
 *   und im Review kein einziges Mal.
 *
 *   Diese Datei gleicht das an, ohne eine Zeile Markup anzufassen. Das ist
 *   Absicht: am Markup haengen der Bonusbetrag in sechs Quellen, die Anker des
 *   Inhaltsverzeichnisses, die Go-Links, das FAQ-JSON-LD und die Tag-Bilanz,
 *   die scripts/bonusseiten-de/pruefen.mjs gegen den Ausgangsstand vergleicht.
 *   Was nicht angefasst wird, kann nicht brechen.
 *
 * WIE SIE GEWINNT, OHNE MIT !important ZU ARBEITEN
 *
 *   Jeder Selektor traegt .ctc-bb-page davor (fuer die vier Fussbloecke
 *   .ctc-review-main, weil die ausserhalb liegen). Damit steht jede Regel
 *   genau eine Klasse ueber ihrem Vorbild in ctc-bb-design und gewinnt
 *   unabhaengig von der Reihenfolge im Kopf. Die einzige Ausnahme sind die
 *   Textfarben der Knoepfe: dort schreibt das Original selbst !important, also
 *   muss es hier auch stehen.
 *
 * DAS ZIELBILD, IN DREI SAETZEN
 *
 *   Weisse Karten mit 12 bis 18 Pixeln Radius und einem duennen Rahmen aus
 *   durchscheinendem Markenblau. Ein schmaler Akzentbalken, entweder als
 *   Verlauf #223AB1 nach #4CFDC8 ueber der Kartenoberkante oder als reiner
 *   Mintstreifen. Kennzahl in der Akzentschrift ueber einem kleinen grauen
 *   Etikett in Versalien, Flaechen ohne Verlauf, Knoepfe flach.
 */

/* ---------------------------------------------------------------- Tokens */

/* Vier Tokens erledigen 130 Fundstellen in ctc-bb-design auf einmal. --cy war
 * das Cyan der alten Verlaeufe und wird zum Mint der Akzentkanten; wo es als
 * Flaeche oder Verlauf diente, wird es unten gezielt ersetzt. */
.ctc-bb-page {
  --bl: #223AB1;
  --bl2: #2152BA;
  --cy: #4CFDC8;
  --mint: #4CFDC8;
  --soft: #f8f9fc;
  --soft2: #f8faff;
  --bd: rgba(34, 58, 177, .12);
  --bd-stark: rgba(34, 58, 177, .14);
  --grau: #374151;
  --grau-leise: #6b7280;
  --tinte: #111827;
  --akzentschrift: var(--ctc-font-accent, 'Poppins', 'Open Sans', sans-serif);
  color: var(--tinte);
}

/* ------------------------------------------------------------ Typografie */

/* Das Review setzt jede H2 auf 32px mit 48px Luft darueber und ohne
 * Auszeichnung. Die Bonusseite hatte zwei Systeme nebeneinander: 27px in den
 * Abschnitten und 37,9px in den vier Fussbloecken, weil die dort voellig
 * ungestylt sind. Beide werden zusammengefuehrt. */
.ctc-bb-page h2,
.ctc-bb-page .cb-sec > h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--bl);
  margin: 48px 0 20px;
  padding-left: 0;
  border-left: 0;
}

/* Der Abstand zwischen den Abschnitten haengt am Abschnitt, nicht an der
 * Ueberschrift. Sonst reisst er das Etikett von seiner H2 weg: das Etikett
 * gehoert zur Ueberschrift und steht sechs Pixel darueber, die Luft von 48
 * Pixeln davor. */
.ctc-bb-page .cb-sec + .cb-sec {
  margin-top: 48px;
}

/* Zwischen Etikett und Ueberschrift steht im Bestand ein leerer Absatz. Er
 * ist unsichtbar, traegt aber das Polster der Grundtypografie und schiebt die
 * beiden auseinander. Deshalb der Geschwisterselektor und nicht der direkte
 * Nachbar. */
.ctc-bb-page .cb-sec > .cb-eyebrow ~ h2 {
  margin-top: 6px;
}

.ctc-bb-page p:empty {
  display: none;
}

.ctc-bb-page h1,
.ctc-bb-page h1.cb-h1 {
  color: var(--bl);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 24px 0 14px;
}

.ctc-bb-page h3 {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--bl);
  margin: 10px 0;
}

/* Das kleine Etikett ueber den Abschnitten. Das Review kennt keine Zeile
 * ueber der H2, benutzt dieselbe Form aber an jeder Karte: elf Pixel,
 * Versalien, weit gesperrt, dahinter ein kurzer Mintstrich. */
.ctc-bb-page .cb-eyebrow,
.ctc-bb-page .cb-fs-h,
.ctc-bb-page .cb-toc strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--akzentschrift);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bl);
  margin-bottom: 8px;
}

.ctc-bb-page .cb-eyebrow::after,
.ctc-bb-page .cb-fs-h::after,
.ctc-bb-page .cb-toc strong::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mint);
}

/* ---------------------------------------------------------------- Karten */

/* Eine Kartenform fuer alles, was im Original eigene Rahmen, Radien und
 * Schatten hatte. Der Schatten ist der des Reviews: fast unsichtbar in der
 * Naehe, ein weiter blauer Hauch darunter. */
.ctc-bb-page .cb-toc,
.ctc-bb-page .cb-answer,
.ctc-bb-page .cb-facts-strip,
.ctc-bb-page .cb-wcard,
.ctc-bb-page .cb-calc,
.ctc-bb-page .cb-bcard,
.ctc-bb-page .cb-faqm-item,
.ctc-bb-page .cb-method,
.ctc-bb-page .cb-byline,
.ctc-bb-page .ctc-bb-final {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 24px rgba(34, 58, 177, .06);
}

/* Der Akzentbalken. Er ist das Wiedererkennungszeichen des Reviews und sitzt
 * dort an jeder tragenden Karte, als Verlauf ueber die ganze Oberkante. */
.ctc-bb-page .cb-facts-strip,
.ctc-bb-page .cb-calc,
.ctc-bb-page .ctc-bb-final,
.ctc-bb-page figure.wp-block-table {
  position: relative;
  overflow: hidden;
}

.ctc-bb-page .cb-facts-strip::before,
.ctc-bb-page .cb-calc::before,
.ctc-bb-page .ctc-bb-final::before,
.ctc-bb-page figure.wp-block-table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #223AB1 0%, #4CFDC8 100%);
}

.ctc-bb-page .cb-facts-strip,
.ctc-bb-page .cb-calc,
.ctc-bb-page .ctc-bb-final {
  padding-top: 26px;
}

/* Der Abschlusskasten hatte einen flaechigen Verlauf. Flaechen sind im
 * Vorbild immer einfarbig; die Aufmerksamkeit traegt der Balken oben. */
.ctc-bb-page .ctc-bb-final {
  background: #fff;
  border-radius: 18px;
}

/* Die Schnellantwort und der Redaktionskasten behalten ihre linke Kante, aber
 * in Mint statt Cyan, und bekommen den ruhigen Grund des Reviews. */
.ctc-bb-page .cb-answer,
.ctc-bb-page .cb-redbox {
  background: #f4f7ff;
  border: 1px solid rgba(34, 58, 177, .12);
  border-left: 3px solid var(--mint);
  border-radius: 12px;
  box-shadow: none;
}

/* Der Kasten um den Bonuscode trug einen zwei Pixel starken Cyanrahmen und
 * einen tiefen Schatten. Im Vorbild gibt es kein Bauteil, das so laut ist. */
.ctc-bb-page .cb-wcard {
  background: #fff;
  border: 1px solid var(--bd-stark);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 10px 30px rgba(34, 58, 177, .08);
}

/* ------------------------------------------------------------ Faktenkacheln */

/* Aus der Zeile "Auf einen Blick" wird das Kachelraster des Reviews: heller
 * Grund, Mintkante links, Etikett in Versalien ueber dem Wert. */
.ctc-bb-page .cb-fs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
}

.ctc-bb-page .cb-fs-cell {
  position: relative;
  background: #f8f9fc;
  border: 1px solid rgba(34, 58, 177, .10);
  border-radius: 10px;
  padding: 9px 14px 9px 16px;
  overflow: hidden;
}

.ctc-bb-page .cb-fs-cell::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--mint);
}

.ctc-bb-page .cb-fs-cell span {
  display: block;
  font-family: var(--akzentschrift);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bl);
  margin-bottom: 2px;
}

.ctc-bb-page .cb-fs-cell b {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--grau);
}

/* ---------------------------------------------------------------- Knoepfe */

/* Flach statt Verlauf, Pillenform, ruhiger. Die Textfarbe braucht !important,
 * weil das Original sie selbst so setzt. */
.ctc-bb-page .ctc-bb-btn {
  background: var(--bl);
  background-image: none;
  color: #fff !important;
  border: 1px solid var(--bl);
  border-radius: 9999px;
  padding: 12px 22px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease;
}

.ctc-bb-page .ctc-bb-btn:hover {
  background: var(--bl2);
  border-color: var(--bl2);
  filter: none;
  transform: none;
}

.ctc-bb-page .ctc-bb-btn.secondary {
  background: #fff;
  color: var(--bl) !important;
  border: 1px solid rgba(34, 58, 177, .22);
}

.ctc-bb-page .ctc-bb-btn.secondary:hover {
  background: #f4f7ff;
  border-color: var(--bl);
}

/* Der grosse Knopf am Code-Kasten bleibt gross, verliert aber den Verlauf. */
.ctc-bb-page .ctc-bb-btn.cb-btn-big {
  padding: 13px 26px;
  font-size: 16px;
  line-height: 1.2;
}

/* Die kleinen Chips an den Bonuskarten folgen dem Akzentknopf des Reviews:
 * Mintflaeche, blaue Schrift. */
.ctc-bb-page .cb-btn-sm {
  background: var(--mint);
  background-image: none;
  color: var(--bl) !important;
  border: 1px solid var(--mint);
  border-radius: 8px;
  box-shadow: none;
}

.ctc-bb-page .cb-btn-sm:hover {
  background: #3be0b3;
  border-color: #3be0b3;
}

/* --------------------------------------------------------------- Tabellen */

/* Die einzige Tabelle der Seite stand nackt da: durchsichtige Kopfzeile, kein
 * Zebra, keine Trennlinien. Das Review baut jede Tabelle als Karte. */
.ctc-bb-page figure.wp-block-table {
  background: #fff;
  border: 1px solid var(--bd-stark);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 8px 24px rgba(34, 58, 177, .06);
  margin: 28px 0;
  padding-top: 4px;
}

/* Der Rollkasten bringt aus der Grundtypografie einen Aussenabstand mit. Der
 * stand frueher zwischen zwei Absaetzen und faellt jetzt in die Karte: unter
 * der letzten Zeile blieb ein leerer weisser Streifen von rund 40 Pixeln. */
.ctc-bb-page figure.wp-block-table .ctc-table-scroll {
  margin: 0;
  /* Ausdruecklich, obwohl gemessen bereits auto: die Kernvorlage traegt zu
   * .ctc-table-scroll mehrere widerspruechliche Regeln, und das figure
   * darueber schneidet mit overflow:hidden ab. Bei 390 px ist die Tabelle je
   * nach Spaltenzahl 860 bis 1020 px breit und der Kasten 312 px; ohne diese
   * Zeile haenge das Rollen davon ab, welche Regel der Kernvorlage gerade
   * gewinnt. Gegenprobe vor der Aenderung: overflow-x war auto und der Kasten
   * liess sich rollen, auf rioace wie auf playfina. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ctc-bb-page figure.wp-block-table figcaption:empty {
  display: none;
}

.ctc-bb-page figure.wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
}

.ctc-bb-page figure.wp-block-table th {
  background: #f5f5f5;
  font-family: var(--akzentschrift);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bl);
  text-align: left;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(34, 58, 177, .10);
}

.ctc-bb-page figure.wp-block-table tbody tr:nth-child(odd) { background: #f6f7fd; }
.ctc-bb-page figure.wp-block-table tbody tr:nth-child(even) { background: #fff; }
.ctc-bb-page figure.wp-block-table tbody tr:hover { background: #eefdf8; }

.ctc-bb-page figure.wp-block-table td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(34, 58, 177, .08);
  font-size: 15px;
  line-height: 1.5;
  color: var(--grau);
  vertical-align: top;
}

.ctc-bb-page figure.wp-block-table td:first-child {
  font-family: var(--akzentschrift);
  font-weight: 700;
  color: var(--bl);
  background: rgba(34, 58, 177, .03);
}

.ctc-bb-page figure.wp-block-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------------- FAQ */

/* Die grosse Mintziffer vor jeder Frage, das Erkennungszeichen der FAQ im
 * Vorbild. Sie kommt aus einem Zaehler und nicht aus dem Markup.
 *
 * Eine fruehere Fassung dieser Datei faerbte dafuer .cb-faqm-qm mint und auf
 * 30 px, in der Annahme, dort stehe ein Fragezeichen. Nachgemessen ist
 * .cb-faqm-qm nur der Flex-Rahmen um das h3 und hat gar keinen eigenen
 * Textknoten: die Regel hatte null Wirkung. */
.ctc-bb-page .cb-faqm {
  counter-reset: cb-faq;
}

.ctc-bb-page .cb-faqm-item {
  counter-increment: cb-faq;
}

.ctc-bb-page .cb-faqm-q {
  align-items: baseline;
  gap: 14px;
}

.ctc-bb-page .cb-faqm-q::before {
  content: counter(cb-faq, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--akzentschrift);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--mint);
}

.ctc-bb-page .cb-faqm-qm {
  background: none;
  border: 0;
  box-shadow: none;
  width: auto;
  height: auto;
}

.ctc-bb-page .cb-faqm-item {
  border-radius: 12px;
  padding: 22px;
}

/* ------------------------------------------------- Der Bonuscode-Kasten */

/* Dunkelblaue Flaeche mit aquafarbener Schrift und gestricheltem Rand. Das
 * war das lauteste Fremdelement der Seite: das Vorbild kennt weder die
 * Flaeche #0f1b3d noch die Schriftfarbe #00FFFF. Es wird ein heller Kasten in
 * der Markenfarbe, wie die Kennzahlzellen des Reviews. */
.ctc-bb-page .cb-wcode,
.ctc-bb-page .cb-cta-code {
  background: #f4f7ff;
  color: var(--bl);
  border: 1px solid rgba(34, 58, 177, .14);
  border-radius: 12px;
}

.ctc-bb-page .cb-wcode-main,
.ctc-bb-page .cb-cta-code strong {
  font-family: var(--akzentschrift);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--bl);
}

.ctc-bb-page .cb-wcode small,
.ctc-bb-page .cb-cta-code small {
  color: var(--grau-leise);
}

/* Der Hinweis "kein Code noetig" trug denselben gestrichelten Rand. */
.ctc-bb-page .cb-nocode {
  background: #f8f9fc;
  border: 1px solid rgba(34, 58, 177, .12);
  color: var(--grau);
}

/* ------------------------------------------------------- Graustufen ziehen */

/* Die blaustichige Graufamilie der Bonusseite gegen die des Reviews tauschen.
 * Diese Farben stehen in ctc-bb-design als Literale, ein Token erreicht sie
 * nicht. */
.ctc-bb-page .cb-fine,
.ctc-bb-page .cb-wnote,
.ctc-bb-page .cb-sources,
.ctc-bb-page .cb-transp,
.ctc-bb-page .cb-byline-meta,
.ctc-bb-page .cb-method p,
.ctc-bb-page .cb-bcard-meta,
.ctc-bb-page .cb-redeem,
.ctc-bb-page .cb-verline,
.ctc-bb-page .cb-brand-ratings,
.ctc-bb-page .ctc-bb-crumb,
.ctc-bb-page .ctc-bb-rg {
  color: var(--grau-leise);
}

/* Der inaktive Reiter traegt im Vorbild #475569. */
.ctc-bb-page .cb-tab {
  color: #475569;
}

.ctc-bb-page .cb-bcard-brand {
  color: var(--tinte);
}

/* Die Barrierefreiheitsregel setzt ihre Farbe mit !important; um sie in
 * dieselbe Graufamilie zu holen, muss es hier ebenso stehen. Der Kontrast
 * bleibt dabei gleichwertig: #4b5563 auf Weiss ergibt 7,6:1 gegen 7,3:1. */
.ctc-bb-page .cb-gk {
  color: #4b5563 !important;
}

.ctc-bb-page .cb-intro,
.ctc-bb-page .cb-lead,
.ctc-bb-page p {
  color: #000;
}

.ctc-bb-page .cb-calc-out .k {
  font-family: var(--akzentschrift);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau-leise);
}

/* Die Kennzahl des Rechners ist im Review das lauteste Element der Karte. */
.ctc-bb-page .cb-calc-out .v {
  font-family: var(--akzentschrift);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--bl);
}

/* ===========================================================================
 * Die vier Fussbloecke
 *
 * Sie liegen ausserhalb von .ctc-bb-page und sind auf 42 der 53 Seiten
 * vollstaendig ungestylt: kein Hintergrund, kein Rahmen, kein Polster, die
 * Ueberschrift in Browser-Vorgabe. Das ist die groesste Bruchstelle der Seite
 * und zugleich die Stelle, an der nichts zu ueberschreiben ist.
 *
 * Das Vorbild gestaltet dieselben Bloecke, benutzt dort aber eine Fremdpalette
 * (#0a66c2 blau, #f59e0b gelb, #16a34a gruen) statt der Marke. Hier steht
 * bewusst die Markenpalette: gleiche Form, richtige Farbe.
 * ========================================================================= */

.ctc-review-main .ctc-cdh-keyfacts,
.ctc-review-main .ctc-cdh-method,
.ctc-review-main .ctc-cdh-verdict,
.ctc-review-main .ctc-cdh-authority {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0 24px;
}

/* Kein Akzentbalken an diesen vier: das Vorbild gestaltet sie schlicht, und
 * eine Bonusseite, die dort mehr Schmuck traegt als ihr Vorbild, faellt genau
 * so auf wie eine, die zu wenig hat. */

.ctc-review-main .ctc-cdh-keyfacts__h,
.ctc-review-main .ctc-cdh-method__h,
.ctc-review-main .ctc-cdh-verdict__h,
.ctc-review-main .ctc-cdh-authority__h {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #223AB1;
  margin: 0 0 16px;
}

.ctc-review-main .ctc-cdh-keyfacts__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 8px;
  margin: 0;
  font-size: 15px;
}

.ctc-review-main .ctc-cdh-keyfacts__dl dt {
  font-family: var(--ctc-font-accent, 'Poppins', 'Open Sans', sans-serif);
  font-weight: 700;
  color: #223AB1;
}

.ctc-review-main .ctc-cdh-keyfacts__dl dd {
  margin: 0;
  color: #374151;
}

.ctc-review-main .ctc-cdh-method__intro,
.ctc-review-main .ctc-cdh-verdict__body,
.ctc-review-main .ctc-cdh-authority__intro {
  font-size: 15px;
  line-height: 1.65;
  color: #374151;
  margin: 0 0 14px;
}

.ctc-review-main .ctc-cdh-method__steps {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: #374151;
}

.ctc-review-main .ctc-cdh-method__steps li::marker {
  color: #223AB1;
  font-weight: 700;
}

.ctc-review-main .ctc-cdh-authority__sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.ctc-review-main .ctc-cdh-authority__sec {
  background: #f8f9fc;
  border: 1px solid rgba(34, 58, 177, .10);
  border-radius: 10px;
  padding: 16px 18px;
}

.ctc-review-main .ctc-cdh-authority__sec-h {
  font-family: var(--ctc-font-accent, 'Poppins', 'Open Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #223AB1;
  margin: 0 0 10px;
}

.ctc-review-main .ctc-cdh-authority__list {
  margin: 0 0 0 12px;
  padding-left: 22px;
  list-style: disc outside;
  display: grid;
  gap: 12px;
}

.ctc-review-main .ctc-cdh-authority__list li::marker {
  color: rgba(34, 58, 177, .45);
}

.ctc-review-main .ctc-cdh-authority__list a {
  font-weight: 600;
  color: #223AB1;
}

.ctc-review-main .ctc-cdh-authority__host {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: #6b7280;
}

.ctc-review-main .ctc-cdh-authority__d {
  font-size: 13.5px;
  line-height: 1.5;
  color: #374151;
  margin-top: 2px;
}

/* Die Themenchips gibt es auf beiden Seiten, im Review als Pillenband in einer
 * eigenen Karte. Auf der Bonusseite fehlt ihnen der Rahmen. */
.ctc-review-main .ctc-related-hubs {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px 28px;
  margin: 48px 0 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ctc-review-main .ctc-related-hubs__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ctc-font-accent, 'Poppins', 'Open Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #223AB1;
  margin: 0 0 14px;
}

.ctc-review-main .ctc-related-hubs__title::before {
  content: "";
  display: block;
  width: 14px;
  height: 2px;
  background: #4CFDC8;
}

.ctc-review-main .ctc-related-hubs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ctc-review-main .ctc-related-hubs__list a {
  display: inline-block;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  color: #223AB1;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.ctc-review-main .ctc-related-hubs__list a:hover {
  background: #223AB1;
  color: #fff;
}

/* ------------------------------------------------------------ Schmale Fenster */

@media (max-width: 599px) {
  .ctc-bb-page .cb-fs-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ctc-bb-page figure.wp-block-table th,
  .ctc-bb-page figure.wp-block-table td {
    padding: 12px 14px;
    font-size: 14px;
  }

  .ctc-review-main .ctc-cdh-keyfacts__dl {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }

  .ctc-review-main .ctc-cdh-keyfacts__dl dd {
    margin-bottom: 8px;
  }

  .ctc-review-main .ctc-cdh-authority__list {
    margin-left: 0;
    padding-left: 18px;
  }

  .ctc-review-main .ctc-cdh-keyfacts,
  .ctc-review-main .ctc-cdh-method,
  .ctc-review-main .ctc-cdh-verdict,
  .ctc-review-main .ctc-cdh-authority,
  .ctc-review-main .ctc-related-hubs {
    padding: 20px 16px 18px;
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .ctc-bb-page .ctc-bb-btn,
  .ctc-review-main .ctc-related-hubs__list a {
    transition: none;
  }
}