/*
 * Content Blocks
 *
 * Keine Farbe, kein Radius und keine Groesse steht hier fest. Alles laeuft ueber
 * Variablen, die das Plugin pro Seite aus der Konfiguration setzt. Diese Datei
 * beschreibt nur die Anordnung.
 *
 * Die Fallback-Werte hinter jedem var() sind bewusst da: faellt die Konfiguration
 * aus, sieht der Baustein trotzdem wie ein Baustein aus und nicht wie roher Text.
 */

.cb-top,
.cb-tablewrap,
.cb-card,
.cb-note,
.cb-faq,
.cb-sum,
.cb-facts,
.cb-method,
.cb-usewrap,
.cb-typewrap,
.cb-brwrap,
.cb-byline {
  --cb-bd: var(--cb-border, #e3e8ee);
  --cb-ln: var(--cb-line, #b7c0c9);
  --cb-mu: var(--cb-muted, #5b6b7c);
  --cb-ac: var(--cb-accent, #0a7ea4);
  --cb-a2: var(--cb-accent-soft, #e8f4f8);
  --cb-ok: var(--cb-pos, #1a7f4f);
  --cb-no: var(--cb-neg, #b4451f);
  --cb-rd: var(--cb-radius, 14px);
  --cb-sf: var(--cb-surface, #fff);
  --cb-sf2: var(--cb-surface-alt, #f6f8fa);
  font-size: var(--cb-font-size, 17px);
  line-height: var(--cb-line-height, 1.65);
}

.cb-top *,
.cb-tablewrap *,
.cb-card *,
.cb-note *,
.cb-faq *,
.cb-sum *,
.cb-facts *,
.cb-method *,
.cb-usewrap *,
.cb-typewrap *,
.cb-brwrap *,
.cb-byline * {
  box-sizing: border-box;
}

/* --- Zeichnungen ---------------------------------------------------------- */

/*
 * Alle Formen sind Striche ohne Fuellung und uebernehmen die Textfarbe der Stelle,
 * an der sie stehen. Damit passt sich der Zeichensatz jeder Seite an, ohne dass es
 * eine zweite Fassung braucht.
 */

.cb-i {
  width: var(--cb-icon-size, 1.15em);
  height: var(--cb-icon-size, 1.15em);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

.cb-iw {
  display: inline-flex;
  color: var(--cb-accent, #0a7ea4);
}

/* --- Auswahl oben (Grid mit n Spalten) ------------------------------------ */

.cb-top {
  display: grid;
  grid-template-columns: repeat(var(--cb-top-cols, 3), 1fr);
  align-items: stretch;
  gap: 14px;
  margin: var(--cb-block-gap, 26px) 0;
}

.cb-t {
  border: 1px solid var(--cb-bd);
  border-radius: calc(var(--cb-rd) - 2px);
  padding: 16px;
  background: var(--cb-sf);
  display: flex;
  flex-direction: column;
}

.cb-t.is-lead {
  border: 2px solid var(--cb-ac);
}

.cb-t .cb-pill {
  align-self: flex-start;
  margin-bottom: 2px;
}

.cb-t .cb-name {
  font-weight: 700;
  margin: 8px 0;
  font-size: var(--cb-font-size, 17px);
  line-height: 1.3;
}

.cb-t .cb-name a {
  color: inherit;
  text-decoration: none;
}

.cb-t .cb-name a:hover {
  text-decoration: underline;
}

.cb-t .cb-img img {
  max-height: 150px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.cb-t .cb-why {
  font-size: 14px;
  color: var(--cb-mu);
  margin: 10px 0 14px;
  flex: 1;
}

.cb-t .cb-cta {
  margin-top: 4px;
}

/* --- Vergleichstabelle ---------------------------------------------------- */

/*
 * Die Rahmen werden hier ausdruecklich zurueckgesetzt. Fast jedes Theme bringt
 * eigene Regeln fuer Tabellen mit, oft mit Gitternetz. Die Selektoren sind darum
 * bewusst zwei Klassen tief, damit sie ohne !important gewinnen.
 */

.cb-tablewrap {
  overflow-x: auto;
  margin: var(--cb-block-gap, 26px) 0;
}

.cb-tablewrap table.cb-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0;
  min-width: var(--cb-table-min, 720px);
}

.cb-tablewrap table.cb-table th,
.cb-tablewrap table.cb-table td {
  border: 0;
  border-bottom: 1px solid var(--cb-ln);
  background: none;
}

/* Kopfzeile der Vergleichstabelle. Farbe und Hintergrund stehen als eigene
   Marken an, damit eine Seite den Kopf einfaerben kann, ohne dass die Schrift
   unlesbar wird. Beide sind mit !important gesetzt, weil viele Themes ihre
   Tabellenkopf-Farbe aus dem Customizer ebenfalls so ausliefern und der Kopf
   sonst dunkel auf dunkel steht. */
.cb-tablewrap table.cb-table th {
  background: var(--cb-table-head, var(--cb-sf2)) !important;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cb-table-head-text, var(--cb-mu)) !important;
  padding: 11px 12px;
  white-space: nowrap;
}

.cb-tablewrap table.cb-table td {
  padding: 13px 12px;
  vertical-align: middle;
  text-align: center;
  line-height: 1.4;
}

.cb-tablewrap table.cb-table th.cb-name,
.cb-tablewrap table.cb-table td.cb-name {
  min-width: 190px;
}

.cb-tablewrap table.cb-table td.cb-name {
  font-weight: 700;
  line-height: 1.3;
}

.cb-tablewrap table.cb-table td.cb-name a {
  color: inherit;
  text-decoration: none;
}

.cb-tablewrap table.cb-table td.cb-name a:hover {
  text-decoration: underline;
}

.cb-tablewrap table.cb-table td.cb-name small {
  display: block;
  font-weight: 400;
  color: var(--cb-mu);
  font-size: 13px;
  margin-top: 3px;
}

/* Die Schlusslinie unter der letzten Zeile schliesst die Tabelle sichtbar ab. */
.cb-tablewrap table.cb-table tbody tr:last-child th,
.cb-tablewrap table.cb-table tbody tr:last-child td {
  border-bottom: 1px solid var(--cb-ln);
}

/* --- Pille ---------------------------------------------------------------- */

.cb-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--cb-a2);
  color: var(--cb-ac);
  white-space: nowrap;
}

/* --- Wimpel --------------------------------------------------------------- */

/*
 * Die Auszeichnung ueber einem Produktkasten: "Bessere Alternative", "Macht es
 * besser", "Beste Alternative". Sie beantwortet die Frage, die der Leser an
 * dieser Stelle hat, naemlich warum dieser Kasten hier steht. Deshalb steht sie
 * darueber und nicht im Kasten, wo sie als Beiwerk gelesen wird.
 *
 * Kaufaufruf und Alternativenzeile sind Flex-Zeilen mit Umbruch. Eine volle
 * Breite macht daraus die erste Zeile fuer sich; der negative Abstand nimmt den
 * Zwischenraum wieder heraus, damit der Wimpel am Kasten klebt und nicht
 * daneben schwebt.
 */
.cb-flag {
  flex: 0 0 100%;
  margin-bottom: -8px;
  line-height: 1;
}

/* --- Karte ---------------------------------------------------------------- */

.cb-card {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  padding: 0;
  margin: var(--cb-block-gap, 26px) 0;
  background: var(--cb-sf);
  overflow: hidden;
}

.cb-card > .cb-head {
  display: flex;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 14px 20px;
  background: var(--cb-sf2);
  border-bottom: 1px solid var(--cb-bd);
  flex-wrap: wrap;
}

.cb-card .cb-rank {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--cb-ac);
  border-radius: 8px;
  padding: 4px 9px;
  line-height: 1.2;
  flex: 0 0 auto;
}

.cb-card .cb-title {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  flex: 1 1 auto;
  align-self: center;
}

.cb-card .cb-title a {
  color: inherit;
  text-decoration: none;
}

.cb-card .cb-title a:hover {
  text-decoration: underline;
}

.cb-card > .cb-head .cb-pill {
  flex: 0 0 auto;
  align-self: center;
}

.cb-card .cb-body {
  display: grid;
  grid-template-columns: var(--cb-media-width, 230px) 1fr;
  gap: 24px;
  padding: 20px;
}

.cb-card .cb-media img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.cb-card .cb-media .cb-cta {
  margin-top: 14px;
}

.cb-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*
 * Der Kauf-Knopf.
 *
 * Er ist absichtlich der auffaelligste Punkt eines Bausteins und haelt sich an
 * die Form, die die uebrigen Produktboxen dieser Seiten schon benutzen: volle
 * Breite, kraeftig gefuellt, fetter Text, weiches Eck. Ueber die Variablen
 * laesst sich das je Seite umstellen, ohne diese Datei anzufassen.
 *
 * Der Selektor greift auch das umgebende a, weil Themes Links im Fliesstext
 * unterstreichen und einfaerben; beides wuerde den Knopf zerlegen.
 */
.cb-cta > a,
.cb-cta > a:hover,
.cb-cta > a:focus {
  display: block;
  width: 100%;
  text-decoration: none;
  border: none;
  box-shadow: none;
}

.cb-btn {
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: none;
  border-radius: var(--cb-cta-radius, 0.5rem);
  background: var(--cb-cta, #e8870c);
  color: var(--cb-cta-text, #fff);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.cb-cta > a:hover .cb-btn,
.cb-cta > a:focus .cb-btn {
  opacity: 1;
}

/* Das Zeichen sitzt auf der Grundlinie der Schrift, nicht darueber. */
.cb-btn i {
  font-style: normal;
  margin-left: 0.35em;
}

/* Das eingebettete Markenzeichen nimmt die Farbe der Beschriftung an und
   richtet sich an der Schriftgroesse aus, damit es bei jeder Knopfgroesse
   passt. */
.cb-btn .cb-bi {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.4em;
  vertical-align: -0.15em;
  fill: currentColor;
  stroke: none;
}

/* --- Merkmalsliste -------------------------------------------------------- */

.cb-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 20px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cb-bd);
}

.cb-specs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--cb-bd);
  font-size: 14px;
  margin: 0;
}

.cb-specs .k {
  color: var(--cb-mu);
}

.cb-specs .v {
  font-weight: 600;
  text-align: right;
}

/* --- Eignungs-Hinweis ----------------------------------------------------- */

.cb-fit {
  background: var(--cb-a2);
  border-left: 3px solid var(--cb-ac);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  margin: 0 0 14px;
}

/* --- Pro und Contra ------------------------------------------------------- */

.cb-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}

.cb-pc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cb-pc li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 7px;
  font-size: 15px;
  line-height: 1.5;
}

.cb-pc li:before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.cb-pc .cb-pro li:before {
  content: var(--cb-pro-mark, "+");
  color: var(--cb-ok);
}

.cb-pc .cb-con li:before {
  content: var(--cb-con-mark, "-");
  color: var(--cb-no);
}

.cb-pc h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
  color: var(--cb-mu);
}

/* --- Hinweiskasten -------------------------------------------------------- */

.cb-note {
  background: var(--cb-note-bg, #fff8e6);
  border: 1px solid var(--cb-note-bd, #f0d68a);
  border-radius: calc(var(--cb-rd) - 4px);
  padding: 14px 18px;
  margin: var(--cb-block-gap, 26px) 0;
  font-size: 15px;
}

.cb-note > :first-child {
  margin-top: 0;
}

.cb-note > :last-child {
  margin-bottom: 0;
}

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

/*
 * Aussen der normale Blockabstand, untereinander der engere FAQ-Abstand. Die
 * Regel steht bewusst nicht auf :first-of-type: das zaehlt alle div-Geschwister
 * im Beitrag, und der erste div ist meist ein anderer Baustein. Die erste Frage
 * bekaeme dann gar keinen Abstand zu ihrer Ueberschrift.
 */
.cb-faq {
  margin: var(--cb-block-gap, 26px) 0;
}

.cb-faq .cb-q {
  margin: 0 0 6px;
  font-size: var(--cb-faq-size, 17px);
  font-weight: var(--cb-faq-weight, 600);
  line-height: 1.35;
}

.cb-faq p {
  margin: 0;
}

/*
 * Zwischen zwei Fragen genuegt weniger Luft als zum umgebenden Text. Weil
 * benachbarte Aussenabstaende zusammenfallen, wird der untere hier gleich mit
 * zurueckgenommen, sonst bliebe der groessere der beiden Werte stehen.
 */
.cb-faq + .cb-faq {
  margin-top: var(--cb-faq-gap, 20px);
}

.cb-faq:has(+ .cb-faq) {
  margin-bottom: var(--cb-faq-gap, 20px);
}

/*
 * Ueberschriften: die Regel steht bewusst nicht hier, sondern wird vom Plugin
 * erzeugt, und zwar nur fuer die Werte, die eine Seite tatsaechlich gesetzt hat.
 * Stuende sie hier mit var() und Fallback, wuerde der Fallback auch dann greifen,
 * wenn der Wert leer bleibt: wer nur den unteren Abstand setzen will, bekaeme den
 * oberen ungefragt mit dazu.
 */

/* --- Kurzfassung ---------------------------------------------------------- */

/*
 * Steht ganz oben im Beitrag und muss sich vom Fliesstext absetzen, ohne wie ein
 * Werbekasten auszusehen. Deshalb nur eine kraeftige Kante links statt Rahmen und
 * Farbflaeche.
 */

.cb-sum {
  border-left: 4px solid var(--cb-ac);
  background: var(--cb-sf2);
  border-radius: 0 var(--cb-rd) var(--cb-rd) 0;
  padding: 16px 20px;
  margin: var(--cb-block-gap, 26px) 0;
}

.cb-sum-h {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cb-ac);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cb-sum-t > :first-child {
  margin-top: 0;
}

.cb-sum-t > :last-child {
  margin-bottom: 0;
}

.cb-sum-l {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.cb-sum-l li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  margin: 0;
  font-size: 15px;
  border-top: 1px solid var(--cb-bd);
}

.cb-sum-l li:first-child {
  border-top: 0;
  padding-top: 0;
}

.cb-sum-l .k {
  color: var(--cb-mu);
  flex: 0 0 auto;
  min-width: 130px;
  font-weight: 600;
}

/*
 * Der Wert steht bewusst in normaler Staerke. Fett war hier beides, Bezeichnung
 * und Wert, und damit war nichts mehr hervorgehoben: eine Liste, in der jedes
 * Wort betont ist, liest sich wie ein Block. Die Bezeichnung links bleibt fett
 * und gedeckt, der Wert daneben normal und dunkel. Das ist der Unterschied, an
 * dem das Auge die Spalten trennt.
 *
 * Die Staerke wird ausgeschrieben statt weggelassen, weil manche Themes Listen
 * im Beitrag pauschal fetten.
 */
.cb-sum-l .v {
  font-weight: 400;
}

/*
 * Verweist der Punkt auf die zugehoerige Karte, traegt der Text die Akzentfarbe.
 * Unterstrichen wird erst beim Darueberfahren, damit die Liste als Uebersicht
 * lesbar bleibt und nicht als Linkwand.
 */
.cb-sum-l a {
  color: var(--cb-ac);
  text-decoration: none;
}

.cb-sum-l a:hover {
  text-decoration: underline;
}

/* --- Zahlen zur Recherche ------------------------------------------------- */

.cb-facts {
  display: grid;
  grid-template-columns: repeat(var(--cb-facts-cols, 3), 1fr);
  gap: 1px;
  background: var(--cb-bd);
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  overflow: hidden;
  margin: var(--cb-block-gap, 26px) 0;
}

/*
 * Die Trennlinien entstehen aus dem Abstand des Rasters, nicht aus Rahmen an den
 * Feldern. So bleibt genau eine Linie zwischen zwei Feldern, unabhaengig davon,
 * wie viele Zahlen der Beitrag angibt.
 */
.cb-fact {
  background: var(--cb-sf);
  padding: 16px 14px;
  text-align: center;
}

.cb-fact .n {
  display: block;
  font-size: var(--cb-fact-size, 30px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--cb-ac);
  font-variant-numeric: tabular-nums;
}

.cb-fact .t {
  display: block;
  font-size: 13px;
  color: var(--cb-mu);
  margin-top: 5px;
  line-height: 1.35;
}

/* --- Vorgehen ------------------------------------------------------------- */

.cb-method {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  padding: 16px 20px;
  margin: var(--cb-block-gap, 26px) 0;
  font-size: 15px;
}

.cb-mh {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--cb-ac);
}

.cb-method > p {
  margin: 0 0 8px;
}

.cb-method > p:last-child {
  margin-bottom: 0;
}

.cb-mlist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.cb-mlist li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 6px;
  line-height: 1.45;
}

.cb-mlist li:last-child {
  margin-bottom: 0;
}

.cb-mlist .cb-i {
  color: var(--cb-ok);
  margin-top: 0.15em;
}

/* --- Auswahl nach Anwendungsfall ------------------------------------------ */

.cb-usewrap,
.cb-typewrap,
.cb-brwrap {
  margin: var(--cb-block-gap, 26px) 0;
}

.cb-uh {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* Keine eigene Farbe: die Zeile uebernimmt die Textfarbe der Seite und steht
     damit so kraeftig da wie der uebrige Text, nicht wie eine Randnotiz. */
  color: inherit;
  margin-bottom: 10px;
}

.cb-use {
  display: grid;
  grid-template-columns: repeat(var(--cb-use-cols, 3), 1fr);
  gap: 12px;
}

.cb-case {
  border: 1px solid var(--cb-bd);
  border-radius: calc(var(--cb-rd) - 2px);
  padding: 14px 16px;
  background: var(--cb-sf);
  display: flex;
  flex-direction: column;
}

.cb-case-f {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--cb-mu);
  line-height: 1.3;
}

.cb-case-f .cb-i {
  color: var(--cb-ac);
}

.cb-case-p {
  font-weight: 700;
  margin-top: 6px;
  line-height: 1.3;
}

.cb-case-p a {
  color: var(--cb-ac);
  text-decoration: none;
}

.cb-case-p a:hover {
  text-decoration: underline;
}

.cb-case-n {
  font-size: 13px;
  color: var(--cb-mu);
  margin-top: 5px;
  line-height: 1.4;
}

/* --- Bauarten ------------------------------------------------------------- */

.cb-types {
  display: grid;
  grid-template-columns: repeat(var(--cb-types-cols, 2), 1fr);
  gap: 14px;
}

.cb-ty {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  padding: 16px 18px;
  background: var(--cb-sf);
  font-size: 15px;
}

.cb-ty-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

/*
 * Die Zeichnung sitzt in einem eigenen Feld, damit sie unabhaengig von der Laenge
 * des Namens immer gleich gross bleibt.
 */
.cb-ty-h .cb-i {
  width: 20px;
  height: 20px;
  color: var(--cb-ac);
  background: var(--cb-a2);
  border-radius: 7px;
  padding: 4px;
  box-sizing: content-box;
}

.cb-ty-n {
  font-weight: 700;
  line-height: 1.25;
}

.cb-ty-t p {
  margin: 0 0 8px;
}

.cb-ty-t > :last-child {
  margin-bottom: 0;
}

.cb-ty .cb-fit {
  margin: 10px 0 0;
  font-size: 14px;
}

.cb-ty-pro,
.cb-ty-con {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.cb-ty-pro li,
.cb-ty-con li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.45;
}

.cb-ty-pro .cb-i {
  color: var(--cb-ok);
  margin-top: 0.15em;
}

.cb-ty-con .cb-i {
  color: var(--cb-no);
  margin-top: 0.15em;
}

/* --- Marken --------------------------------------------------------------- */

/*
 * Aufgeklappt wird mit <details>, deshalb steht hier nichts, was einen Zustand
 * verwaltet: das Browserelement bringt ihn selbst mit. Die Regeln beschreiben nur
 * die beiden Zustaende.
 */

.cb-brands {
  display: grid;
  grid-template-columns: repeat(var(--cb-brands-cols, 1), 1fr);
  gap: 8px;
  align-content: start;
  /*
   * Ohne diese Zeile zieht ein aufgeklappter Eintrag seinen Nachbarn in der
   * gleichen Reihe auf dieselbe Hoehe und hinterlaesst dort eine leere Flaeche.
   * Jeder Eintrag soll nur so hoch sein, wie sein eigener Inhalt es verlangt.
   */
  align-items: start;
}

.cb-br {
  border: 1px solid var(--cb-bd);
  border-radius: calc(var(--cb-rd) - 2px);
  background: var(--cb-sf);
  overflow: hidden;
}

.cb-br[open] {
  background: var(--cb-sf2);
  border-color: var(--cb-ln);
}

.cb-br-s {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  line-height: 1.35;
}

/* Der eigene Pfeil der Browser faellt weg, das Zeichen rechts uebernimmt. */
.cb-br-s::-webkit-details-marker {
  display: none;
}

.cb-br-s::marker {
  content: "";
}

.cb-br-s:hover {
  background: var(--cb-sf2);
}

.cb-br-s > .cb-i {
  color: var(--cb-ac);
  flex: none;
}

.cb-br-n {
  font-weight: 700;
}

.cb-br-m {
  color: var(--cb-mu);
  font-size: 13px;
}

/*
 * Das Zeichen rechts ist ein Plus, das sich beim Aufklappen um 45 Grad in ein
 * Kreuz dreht. Ein Rahmen darum macht sichtbar, dass die Zeile etwas tut, ohne
 * dass dafuer ein Wort noetig waere, das uebersetzt werden muesste.
 */
.cb-br-x {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--cb-ln);
  border-radius: 50%;
  color: var(--cb-ac);
  transition: transform 0.15s ease;
}

.cb-br-x .cb-i {
  width: 15px;
  height: 15px;
}

.cb-br[open] .cb-br-x {
  transform: rotate(45deg);
}

.cb-br-t {
  padding: 0 14px 14px;
  font-size: 15px;
  line-height: 1.55;
}

.cb-br-t > :first-child {
  margin-top: 0;
}

.cb-br-t > :last-child {
  margin-bottom: 0;
}

/* --- Kopfzeile ------------------------------------------------------------ */

/*
 * Eine Zeile, drei Angaben, im Zweifel umbrechend. Sie steht ueber dem Beitrag und
 * darf deshalb optisch nicht mit den Bausteinen im Text konkurrieren: nur eine
 * Linie unten, kein Kasten.
 */

.cb-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-bottom: 10px;
  margin: 0 0 var(--cb-block-gap, 26px);
  border-bottom: 1px solid var(--cb-bd);
  font-size: 13px;
  color: var(--cb-mu);
  line-height: 1.4;
}

.cb-byline > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cb-byline .cb-i {
  color: var(--cb-ac);
}

/*
 * Die Kopfzeile ist eine Angabe, keine Aussage. Sie steht deshalb durchgehend im
 * normalen Schnitt: nichts darin soll um die Aufmerksamkeit konkurrieren, die
 * der Ueberschrift und dem ersten Absatz gehoert.
 */
.cb-byline .v {
  font-weight: 400;
  color: inherit;
}

.cb-byline .r:before {
  content: ", ";
}

.cb-byline .cb-dis {
  align-items: flex-start;
}

.cb-byline .cb-dis .cb-i {
  margin-top: 0.15em;
}

/* --- Einzelner Kasten im Ratgeber ----------------------------------------- */

/*
 * Derselbe Kasten wie eine Karte, nur ohne Platzziffer und schmaler: er steht
 * mitten in einem Fliesstext und soll ihn nicht unterbrechen, sondern beantworten.
 * Die Bildspalte ist deshalb kleiner als in der Bestenliste.
 */
.cb-pick {
  --cb-media-width: 170px;
}

.cb-pick > .cb-head {
  padding: 12px 18px;
}

.cb-pick .cb-title {
  font-size: 19px;
}

.cb-pick .cb-body {
  padding: 18px;
  gap: 20px;
}

.cb-pick .cb-info > p:first-child {
  margin-top: 0;
}

/*
 * Der Verweis auf die Liste. Kleiner als der Fliesstext und abgesetzt, damit er
 * als Herkunftsangabe gelesen wird und nicht als zweiter Kaufaufruf.
 */
.cb-pick .cb-more {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--cb-bd);
  font-size: 15px;
}

.cb-pick .cb-more a {
  color: var(--cb-ac);
}

/* --- Schmale Viewports ---------------------------------------------------- */

@media (max-width: 781px) {
  .cb-top {
    grid-template-columns: 1fr;
  }

  .cb-card .cb-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cb-specs {
    grid-template-columns: 1fr;
  }

  .cb-pc {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cb-use,
  .cb-types,
  .cb-brands {
    grid-template-columns: 1fr;
  }

  /* Die Einordnung rutscht unter den Namen, statt die Zeile zu sprengen. */
  .cb-br-s {
    flex-wrap: wrap;
  }

  .cb-br-m {
    order: 3;
    width: 100%;
  }

  /*
   * Die Zahlen bleiben nebeneinander, brechen aber auf zwei Spalten um. Drei
   * Zahlen nebeneinander auf einem Telefon werden unleserlich, untereinander
   * verlieren sie ihre Wirkung als Reihe.
   */
  .cb-facts {
    grid-template-columns: repeat(2, 1fr);
  }

  /*
   * Bei einer ungeraden Anzahl bleibt sonst rechts unten eine leere Zelle stehen,
   * die aussieht wie ein vergessener Wert. Die letzte Zahl nimmt dann beide
   * Spalten. Trifft zu, wenn das letzte Feld an ungerader Stelle steht.
   */
  .cb-fact:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cb-sum-l li {
    flex-direction: column;
    gap: 2px;
  }

  .cb-sum-l .k {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .cb-card > .cb-head {
    align-items: flex-start;
  }

  .cb-card > .cb-head .cb-rank,
  .cb-card > .cb-head .cb-pill {
    align-self: flex-start;
    margin-top: 2px;
  }
}

/* ==========================================================================
 * Einzeltest
 *
 * Dieselbe Sprache wie oben: Anordnung hier, Farben und Groessen als Variablen.
 * Die Bausteine dieses Abschnitts erben denselben Variablensatz wie die
 * Bestenlisten-Bausteine, damit ein Beitrag mit beiden nicht nach zwei
 * Baukaesten aussieht.
 * ========================================================================== */

.cb-verdict,
.cb-pcwrap,
.cb-scores,
.cb-specswrap,
.cb-fold,
.cb-ship,
.cb-bars,
.cb-ctabar,
.cb-altswrap,
.cb-qa,
.cb-voiceswrap {
  --cb-bd: var(--cb-border, #e3e8ee);
  --cb-ln: var(--cb-line, #b7c0c9);
  --cb-mu: var(--cb-muted, #5b6b7c);
  --cb-ac: var(--cb-accent, #0a7ea4);
  --cb-a2: var(--cb-accent-soft, #e8f4f8);
  --cb-ok: var(--cb-pos, #1a7f4f);
  --cb-no: var(--cb-neg, #b4451f);
  --cb-rd: var(--cb-radius, 14px);
  --cb-sf: var(--cb-surface, #fff);
  --cb-sf2: var(--cb-surface-alt, #f6f8fa);
  font-size: var(--cb-font-size, 17px);
  line-height: var(--cb-line-height, 1.65);
  margin: var(--cb-block-gap, 26px) 0;
  box-sizing: border-box;
}

.cb-verdict *,
.cb-pcwrap *,
.cb-scores *,
.cb-specswrap *,
.cb-fold *,
.cb-ship *,
.cb-bars *,
.cb-ctabar *,
.cb-altswrap *,
.cb-qa *,
.cb-voiceswrap * {
  box-sizing: inherit;
}

/* --- Urteilskasten -------------------------------------------------------- */

.cb-verdict {
  border: 2px solid var(--cb-ac);
  border-radius: var(--cb-rd);
  background: var(--cb-verdict-bg, #f2f8fb);
  overflow: hidden;
}

.cb-vh {
  background: var(--cb-ac);
  color: #fff;
  padding: 9px 20px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cb-vbody {
  display: grid;
  grid-template-columns: var(--cb-media-width, 230px) 1fr;
  gap: 24px;
  padding: 20px;
}

/*
 * Ohne Bild gibt es nichts, was die schmale Spalte fuellen wuerde. Dann nimmt
 * der Text die ganze Breite, statt neben einer Luecke zu stehen.
 */
.cb-vbody > .cb-vinfo:only-child {
  grid-column: 1 / -1;
}

.cb-verdict .cb-media img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.cb-verdict .cb-media .cb-cta {
  margin-top: 14px;
}

.cb-price {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 15px;
  color: var(--cb-mu);
}

/*
 * Die Note. Sie ist die groesste Zahl im Beitrag, weil sie die Frage beantwortet,
 * wegen der der Leser gekommen ist. Der Nenner bleibt klein: er ordnet nur ein.
 */
.cb-vscore {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cb-vnum {
  font-size: var(--cb-score-size, 44px);
  font-weight: 800;
  line-height: 1;
  color: var(--cb-ac);
}

.cb-vnum small {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--cb-mu);
}

.cb-vmeta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cb-vgrade {
  font-weight: 700;
  font-size: 18px;
}

.cb-vname {
  font-weight: 700;
  margin: 0 0 8px;
}

.cb-verdict .cb-pc {
  margin-top: 14px;
}

/*
 * Sterne. Zwei uebereinanderliegende Formen je Stern: die untere blass, die obere
 * beschnitten. Ein halber Stern entsteht damit ohne zweites Symbol und ohne Bild.
 */
.cb-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--cb-star, #e8a90c);
}

.cb-star {
  position: relative;
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
}

.cb-star .cb-i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

.cb-star .cb-i:first-child {
  opacity: 0.22;
}

.cb-star .cb-i:last-child {
  clip-path: inset(0 calc(100% - var(--cb-fill, 0%)) 0 0);
}

/* --- Vor und Nachteile als eigener Abschnitt ------------------------------ */

.cb-pcwrap {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  background: var(--cb-sf);
  padding: 20px;
}

.cb-pch {
  font-weight: 700;
  margin-bottom: 12px;
}

/*
 * Ueber die volle Breite bekommen die Punkte mehr Luft als in der Karte: hier
 * sind sie der Abschnitt, dort nur ein Detail.
 */
.cb-pc--wide {
  gap: 28px;
  margin-top: 0;
}

.cb-pc--wide li {
  font-size: 16px;
  margin-bottom: 10px;
}

.cb-pc--wide .cb-pro {
  border-left: 3px solid var(--cb-ok);
  padding-left: 16px;
}

.cb-pc--wide .cb-con {
  border-left: 3px solid var(--cb-no);
  padding-left: 16px;
}

/* --- Teilnoten ------------------------------------------------------------ */

.cb-scores {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  background: var(--cb-sf);
  overflow: hidden;
}

.cb-sh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--cb-sf2);
  border-bottom: 1px solid var(--cb-bd);
  font-weight: 700;
}

.cb-stotal {
  font-size: 26px;
  font-weight: 800;
  color: var(--cb-ac);
  line-height: 1;
}

.cb-stotal small {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--cb-mu);
}

.cb-srows {
  padding: 16px 20px;
}

.cb-score {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(90px, 2fr) auto;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
}

.cb-sfor {
  font-size: 15px;
}

.cb-sweight {
  color: var(--cb-mu);
  font-size: 13px;
  white-space: nowrap;
}

.cb-sbar {
  height: 9px;
  border-radius: 999px;
  background: var(--cb-score-track, #e7ecf1);
  position: relative;
  overflow: hidden;
}

.cb-sbar:after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--cb-fill, 0%);
  background: var(--cb-score-fill, #0a7ea4);
  border-radius: inherit;
}

.cb-sval {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.4em;
  text-align: right;
}

.cb-snote {
  font-size: 14px;
  color: var(--cb-mu);
  margin: -2px 0 8px;
}

/* --- Technische Daten ----------------------------------------------------- */

.cb-specswrap {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  background: var(--cb-sf);
  overflow: hidden;
}

.cb-sph {
  padding: 14px 20px;
  background: var(--cb-sf2);
  border-bottom: 1px solid var(--cb-bd);
  font-weight: 700;
}

.cb-specs2 {
  display: grid;
  grid-template-columns: repeat(var(--cb-specs-cols, 1), minmax(0, 1fr));
  gap: 0 28px;
  padding: 6px 20px 14px;
}

.cb-sp {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cb-bd);
  font-size: 15px;
}

.cb-sp:last-child {
  border-bottom: 0;
}

.cb-sp .k {
  color: var(--cb-mu);
}

.cb-sp .v {
  font-weight: 600;
  text-align: right;
}

/*
 * Das zugeklappte Datenblatt. Der Pfeil ist gedreht statt ausgetauscht, damit es
 * kein zweites Symbol braucht, und das Ganze kommt ohne Skript aus.
 */
.cb-fold {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  background: var(--cb-sf);
  overflow: hidden;
}

.cb-fold > summary {
  padding: 14px 20px;
  background: var(--cb-sf2);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cb-fold > summary::-webkit-details-marker {
  display: none;
}

.cb-fold > summary:before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--cb-ac);
  border-bottom: 2px solid var(--cb-ac);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}

.cb-fold[open] > summary:before {
  transform: rotate(45deg);
}

.cb-fold[open] > summary {
  border-bottom: 1px solid var(--cb-bd);
}

/* --- Lieferumfang --------------------------------------------------------- */

.cb-ship {
  border: 1px solid var(--cb-bd);
  border-left: 4px solid var(--cb-ac);
  border-radius: var(--cb-rd);
  background: var(--cb-sf);
  padding: 18px 20px;
}

.cb-shh {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--cb-ac);
}

.cb-shlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 20px;
}

.cb-shlist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  margin: 0;
}

.cb-shlist .cb-i {
  color: var(--cb-ok);
  margin-top: 0.25em;
}

.cb-shlist--neg .cb-i {
  color: var(--cb-no);
}

.cb-shmiss {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--cb-bd);
}

.cb-shmiss h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
  color: var(--cb-mu);
}

/* --- Messwerte ------------------------------------------------------------ */

.cb-bars {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  background: var(--cb-sf);
  padding: 18px 20px;
}

.cb-bh {
  font-weight: 700;
  margin-bottom: 12px;
}

.cb-bar {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(90px, 2.4fr) auto;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

.cb-bfor {
  font-size: 15px;
}

.cb-btrack {
  height: 20px;
  border-radius: 5px;
  background: var(--cb-score-track, #e7ecf1);
  overflow: hidden;
}

.cb-btrack > span {
  display: block;
  height: 100%;
  width: var(--cb-fill, 0%);
  background: var(--cb-bar-fill, #7ba7bd);
  border-radius: inherit;
}

/* Das eigene Geraet hebt sich ab, sonst muesste der Leser die Zeilen abzaehlen. */
.cb-bar--best .cb-btrack > span {
  background: var(--cb-bar-best, #1a7f4f);
}

.cb-bar--best .cb-bfor {
  font-weight: 700;
}

.cb-bval {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cb-bsub,
.cb-bnote {
  font-size: 14px;
  color: var(--cb-mu);
  margin: 0 0 6px;
}

/* --- Kaufaufruf im Fliesstext --------------------------------------------- */

/*
 * Nebeneinander gelegt statt in feste Spalten gesetzt. Ob ein Produktbild kommt,
 * entscheidet der Anbieter und nicht der Beitrag: bleibt es aus, ruecken die
 * uebrigen Teile zusammen, statt eine leere Spalte stehen zu lassen.
 */
.cb-ctabar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  background: var(--cb-sf2);
  padding: 16px 20px;
}

.cb-ctaimg {
  flex: 0 0 auto;
}

.cb-ctaimg img {
  width: 74px;
  height: auto;
  display: block;
}

/*
 * class="cb-gross" macht aus einem Kaufaufruf den einen, der herausstechen soll:
 * groesseres Bild, Akzentkante, mehr Luft. Gedacht fuer die Empfehlung ganz oben,
 * wenn das eigentliche Produkt des Beitrags nicht lieferbar ist. Genau ein Kasten
 * pro Beitrag, sonst hebt sich keiner mehr ab.
 */
.cb-ctabar.cb-gross {
  border-left: 3px solid var(--cb-ac);
  background: var(--cb-sf);
  padding: 22px 24px;
  gap: 24px;
}

.cb-ctabar.cb-gross .cb-ctaimg img {
  width: 150px;
}

/*
 * Im grossen Kasten ist der Wimpel gefuellt statt getoent. Der Kasten hat schon
 * eine Akzentkante; eine blasse Pille daneben verliert sich. Ohne gesetzte Werte
 * faellt er auf die Akzentfarbe und Weiss zurueck und passt damit zu jeder Seite
 * der Flotte. Gesetzt werden --cb-flag-bg und --cb-flag-text nur dort, wo der
 * Akzent fuer weisse Schrift zu hell ist.
 */
.cb-ctabar.cb-gross .cb-flag .cb-pill {
  background: var(--cb-flag-bg, var(--cb-ac));
  color: var(--cb-flag-text, #fff);
}

.cb-ctabar.cb-gross .cb-ctaname {
  font-size: 1.1em;
  margin-bottom: 4px;
}

.cb-ctatext {
  flex: 1 1 260px;
}

.cb-ctatext p {
  margin: 0;
  font-size: 15px;
}

.cb-ctaname {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.cb-ctabar .cb-price {
  text-align: left;
  margin-top: 4px;
}

.cb-ctabar > .cb-cta {
  flex: 0 0 auto;
  min-width: 180px;
}

/* --- Alternativen --------------------------------------------------------- */

.cb-ah,
.cb-vch {
  font-weight: 700;
  margin-bottom: 12px;
}

.cb-alts {
  display: grid;
  gap: 12px;
}

.cb-alt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  background: var(--cb-sf);
  padding: 14px 18px;
}

.cb-altimg {
  flex: 0 0 96px;
}

.cb-altimg img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/*
 * Der Anlass steht ueber dem Namen und nicht darunter. Wer hier liest, sucht
 * seinen Fall, nicht ein Modell.
 */
.cb-altwhen {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cb-ac);
  font-weight: 700;
  margin-bottom: 2px;
}

.cb-altname {
  display: block;
  font-weight: 700;
}

.cb-altinfo {
  flex: 1 1 260px;
}

.cb-altinfo p {
  margin: 4px 0 0;
  font-size: 15px;
}

.cb-altinfo .cb-price {
  text-align: left;
  margin-top: 4px;
}

.cb-alt > .cb-cta {
  flex: 0 0 auto;
  min-width: 170px;
}

/* --- Kurze Antworten ------------------------------------------------------ */

.cb-qa {
  border-left: 4px solid var(--cb-ac);
  background: var(--cb-a2);
  border-radius: 0 var(--cb-rd) var(--cb-rd) 0;
  padding: 16px 20px;
}

.cb-qah {
  font-weight: 700;
  margin-bottom: 8px;
}

.cb-qa dl {
  margin: 0;
}

.cb-qa dt {
  font-weight: 700;
  font-size: 15px;
  margin-top: 10px;
}

.cb-qa dt:first-child {
  margin-top: 0;
}

.cb-qa dd {
  margin: 2px 0 0;
  font-size: 15px;
}

/* --- Kaeuferstimmen ------------------------------------------------------- */

.cb-voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.cb-voice {
  border: 1px solid var(--cb-bd);
  border-radius: var(--cb-rd);
  background: var(--cb-sf);
  padding: 16px 18px;
  margin: 0;
}

.cb-voice blockquote {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  font-style: italic;
}

.cb-voice blockquote p {
  margin: 0 0 6px;
}

.cb-voice figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--cb-mu);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cb-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cb-ok);
  font-weight: 600;
}

/* --- Schmale Bildschirme -------------------------------------------------- */

@media (max-width: 781px) {
  .cb-vbody {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cb-pc--wide {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cb-specs2 {
    grid-template-columns: 1fr;
  }

  /*
   * Der Knopf nimmt die volle Breite, sobald er umbricht. Auf dem Telefon ist er
   * der Punkt, der getroffen werden muss.
   */
  .cb-ctabar > .cb-cta,
  .cb-alt > .cb-cta {
    flex: 1 1 100%;
  }
}

@media (max-width: 600px) {
  .cb-score,
  .cb-bar {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
  }

  /*
   * Der Balken nimmt auf dem Telefon eine eigene Zeile unter der Bezeichnung.
   * Nebeneinander bliebe von ihm zu wenig uebrig, um noch etwas zu zeigen.
   */
  .cb-sbar,
  .cb-btrack {
    grid-column: 1 / -1;
    order: 3;
  }

  .cb-ctabar,
  .cb-alt {
    flex-direction: column;
    text-align: center;
  }

  /*
   * Der Wimpel muss hier mit: in der Spalte meint eine Basis von 100 Prozent die
   * Hoehe, nicht die Breite, und der Wimpel wuerde den Kasten auseinanderziehen.
   */
  .cb-ctaimg,
  .cb-altimg,
  .cb-ctatext,
  .cb-altinfo,
  .cb-flag {
    flex: 0 0 auto;
    width: 100%;
  }

  .cb-ctaimg img,
  .cb-altimg img {
    margin: 0 auto;
  }

  /* Das grosse Bild darf auf dem Telefon nicht die halbe Hoehe fuellen. */
  .cb-ctabar.cb-gross .cb-ctaimg img {
    width: 120px;
  }

  .cb-altwhen,
  .cb-ctabar .cb-price,
  .cb-altinfo .cb-price {
    text-align: center;
  }
}