/* Erzeugt aus assets/bsw-cms.css – nicht hier bearbeiten. */
/*!
 * BSW-CMS – Stylesheet für Bestenlisten-Beiträge
 * Alles ist unter .bsw-post (Beitrag) bzw. .bsw-hub (Übersichtsseite)
 * gescoped, damit nichts ins Shop-Layout ausblutet und umgekehrt das
 * Shop-CSS die Boxen nicht zerschießt.
 */

/* Beide teilen sich Farben, Abstände und Breite. */
.bsw-post,
.bsw-hub {
  /* --- Shop-CI: hier anpassen, wenn sich das Corporate Design ändert --- */
  --bsw-accent: #e3051b;        /* BogenSportWelt-Rot */
  --bsw-accent-dark: #b00414;   /* für Hover und Links: 7,4:1 auf Weiß */
  --bsw-accent-soft: #fdecee;   /* leichte Rottönung für Flächen */
  --bsw-gold: #b8860b;
  --bsw-gold-soft: #fdf6e3;

  --bsw-ink: #16191d;
  --bsw-ink-soft: #4a5058;
  --bsw-ink-mute: #767d87;
  --bsw-line: #e4e6e6;
  --bsw-line-strong: #c8cccc;
  --bsw-bg: #ffffff;
  --bsw-bg-soft: #f6f7f7;       /* Shop-Grau */
  --bsw-bg-tint: #eceeee;

  /* Semantische Farben bleiben eigenständig: Ein rotes Minus bei den
     Nachteilen muss sich vom Marken-Rot unterscheiden, sonst liest sich
     jeder Button wie eine Warnung. */
  --bsw-pro: #197a3d;
  --bsw-con: #a32d2d;

  /* Bewertungsskala: grün = stark, rot = schwach. Bewusst eigene Töne und
     nicht das Marken-Rot – sonst läse sich eine gute Wertung wie eine
     schlechte, nur weil die Marke rot ist. */
  --bsw-rating-good: #1e8e3e;
  --bsw-rating-ok:   #c9a227;
  --bsw-rating-weak: #dd7a1b;
  --bsw-rating-bad:  #c62828;
  --bsw-warn: #b45309;
  --bsw-info: #1d5fa8;

  --bsw-radius: 6px;
  --bsw-radius-sm: 4px;
  --bsw-gap: 1.5rem;
  --bsw-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  --bsw-shadow-lg: 0 4px 12px rgba(0, 0, 0, .16);

  /* Vertikaler Rhythmus. Der Grundsatz dahinter: eine Überschrift gehört
     zu dem, was ihr folgt, nicht zu dem, was über ihr steht. Der Abstand
     über einer Überschrift ist deshalb immer der größte, der darunter der
     kleinste. Vorher war beides derselbe Wert – dadurch stand jede
     Überschrift gleich weit von ihrem Abschnitt wie vom vorherigen. */
  --bsw-space-section: 3.25rem;   /* vor einer freistehenden Überschrift */
  --bsw-space-block: 2.25rem;     /* zwischen zwei Bausteinen */
  --bsw-space-flow: 2rem;         /* um einen freien Textabschnitt */
  --bsw-space-heading: 1rem;      /* Überschrift -> ihr Inhalt */
  --bsw-space-text: 1.35rem;      /* Absatz -> Absatz im Fließtext */
  --bsw-space-text-tight: 1rem;   /* dasselbe in Kästen (Fazit, FAQ, Box) */

  --bsw-font: inherit;
  /* Deckt sich mit der Inhaltsbreite des Shops, damit der Beitrag bündig
     unter Breadcrumb und Seitentitel steht statt eingerückt zu wirken. */
  --bsw-maxw: 1340px;

  box-sizing: border-box;
  max-width: var(--bsw-maxw);
  margin-inline: auto;
  font-family: var(--bsw-font);
  color: var(--bsw-ink);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

.bsw-post *,
.bsw-post *::before,
.bsw-post *::after { box-sizing: border-box; }

.bsw-post > * + * { margin-top: var(--bsw-space-block); }

/* Abschluss nach unten: Ohne das sitzt der letzte Baustein - meist die
   Autorenbox - direkt auf dem Footer des Shops. Bewusst padding statt
   margin, damit der Abstand nicht mit dem Aussenabstand des Shop-
   Containers zusammenfaellt und dadurch verschwindet. */
.bsw-post { padding-bottom: var(--bsw-space-section); }

.bsw-post img { max-width: 100%; height: auto; }

.bsw-post a { color: var(--bsw-accent-dark); }

/* Der Shop polstert jedes <section> in <main>: `main section { padding: 4rem 0 }`.
   Vier Bausteine rendern als <section> - Vergleichstabelle, Tabelle,
   Kaufberatung und FAQ. Im Shop lagen dadurch 64 px über und unter ihnen,
   zusätzlich zum Abstand zwischen den Bausteinen: zwischen zwei solchen
   Bausteinen summierte sich das auf 156 px. Lokal war davon nichts zu sehen,
   weil die Regel aus dem Shop-Stylesheet kommt.

   `main section` wiegt (0,0,2) und wird hier mit (0,1,1) überstimmt.
   Bausteine mit eigener Polsterung - das Fazit - behalten sie: deren Regel
   wiegt (0,2,0) und schlägt beide. */
.bsw-post section { padding-block: 0; }

/* Unterstreichung: der Shop setzt `a:not(.btn):link { text-decoration:
   underline }`. Dieser Selektor wiegt (0,2,1) und schlägt damit jede Regel
   aus nur zwei Klassen – ein `text-decoration: none` an `.bsw-post .bsw-cta`
   lief ins Leere, obwohl es dort seit jeher steht. Deshalb hier gebündelt
   und mit !important, wie schon bei der Schriftfarbe des Buttons.

   Betroffen sind nur Links, die als Fläche auftreten: Buttons, die
   Produktzeile der Vergleichstabelle, das Produktbild. Im Fließtext bleibt
   die Unterstreichung stehen – dort ist sie das einzige, woran ein Link
   erkennbar ist. */
.bsw-post a.bsw-cta,
.bsw-post a.bsw-ctable__product,
.bsw-post a.bsw-product__imglink,
.bsw-post .bsw-toc__item a { text-decoration: none !important; }

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

.bsw-post .bsw-h2,
.bsw-post .bsw-h3,
.bsw-post .bsw-h4 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--bsw-ink);
  margin: 0;
  scroll-margin-top: 5rem;
  text-wrap: balance;
}

.bsw-post .bsw-h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); letter-spacing: -.015em; }
.bsw-post .bsw-h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.45rem); }
.bsw-post .bsw-h4 { font-size: 1.05rem; }

/* Freistehende Überschriften: Luft davor, Nähe danach. Muss hinter dem
   `margin: 0` oben stehen – gleiche Spezifität, es entscheidet die
   Reihenfolge. Ohne diese Regeln bekäme eine Überschrift denselben
   Abstand nach oben wie nach unten und stünde damit optisch zwischen den
   Abschnitten statt am Anfang ihres eigenen. */
.bsw-post > .bsw-h2 { margin-top: var(--bsw-space-section); }
.bsw-post > .bsw-h3,
.bsw-post > .bsw-h4 { margin-top: 2.25rem; }
.bsw-post > .bsw-h2 + *,
.bsw-post > .bsw-h3 + *,
.bsw-post > .bsw-h4 + * { margin-top: var(--bsw-space-heading); }

/* Freier Textabschnitt: siehe --bsw-space-flow. Die Überschrift danach
   behält ihren vollen Abschnittsabstand, sonst ginge die Gliederung wieder
   verloren. */
.bsw-post > .bsw-rte { margin-top: var(--bsw-space-flow); }
.bsw-post > .bsw-rte + * { margin-top: var(--bsw-space-flow); }
.bsw-post > .bsw-rte + .bsw-h2 { margin-top: var(--bsw-space-section); }
.bsw-post > .bsw-rte + .bsw-h3,
.bsw-post > .bsw-rte + .bsw-h4 { margin-top: 2.25rem; }

.bsw-post .bsw-lead {
  font-size: 1.075rem;
  color: var(--bsw-ink-soft);
  margin: var(--bsw-space-heading) 0 0;
}

/* Fließtext läuft über die volle Inhaltsbreite – keine eigene Lesebreite,
   sonst stünde er schmaler als jede Box daneben und der Beitrag wirkte
   eingerückt. */
/* Erst alles auf null, dann der Abstand nur zwischen Geschwistern.
   Der Reset steht in `:where()`, weil er sonst spezifischer wäre als die
   Abstandsregel darunter und sie aufhöbe – genau daran lagen die Absätze
   ohne erkennbare Lücke. */
.bsw-post .bsw-rte :where(p, ul, ol, blockquote, figure, table) { margin: 0; }
.bsw-post .bsw-rte :where(ul, ol) { padding-left: 1.35rem; }
.bsw-post .bsw-rte > * + * { margin-top: var(--bsw-space-text); }
.bsw-post .bsw-rte li + li { margin-top: .4rem; }
.bsw-post .bsw-rte :where(h2) { font-size: 1.6rem; font-weight: 700; margin: 2rem 0 0; }
.bsw-post .bsw-rte :where(h3) { font-size: 1.25rem; font-weight: 700; margin: 1.6rem 0 0; }
.bsw-post .bsw-rte :where(h2, h3) + * { margin-top: var(--bsw-space-heading); }

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.bsw-post .bsw-hero { margin-top: 0; }

.bsw-post .bsw-hero__kicker {
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bsw-accent);
}

.bsw-post .bsw-hero__title {
  margin: 0;
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 2.85rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.bsw-post .bsw-hero__teaser {
  margin: .9rem 0 0;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  color: var(--bsw-ink-soft);
}

.bsw-post .bsw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 1.1rem 0 0;
  font-size: .875rem;
  color: var(--bsw-ink-mute);
}
.bsw-post .bsw-meta__sep { color: var(--bsw-line-strong); }

.bsw-post .bsw-hero__media { margin: 1.75rem 0 0; }

/* Aufmacher mit Bild: Text links, Bild rechts daneben. Der Aufmacher ohne
   Bild bleibt einspaltig, deshalb die eigene Klasse statt einer Regel auf
   .bsw-hero. */
.bsw-post .bsw-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  gap: 2.5rem;
  align-items: center;
}
.bsw-post .bsw-hero--split .bsw-hero__media { margin: 0; }
.bsw-post .bsw-hero__text > *:first-child { margin-top: 0; }

/* Nebeneinander lohnt sich erst ab einer gewissen Breite: darunter wird der
   Text sonst zur Spalte von wenigen Wörtern. */
@media (max-width: 820px) {
  /* Untereinander: Überschrift, Bild, dann Teaser und Autorenzeile. Unter
     einem langen Teaser käme das Bild erst nach dem ersten Wischen.

     H1 und Teaser stecken im selben Textblock. Der löst sich hier auf
     (display: contents), damit das Bild zwischen beide rücken kann – nur in
     der Anzeige. Im Quelltext bleibt die Reihenfolge H1, Teaser, Bild, und
     bereits eingefügte Snippets ziehen ohne neuen Export mit. */
  .bsw-post .bsw-hero--split { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .bsw-post .bsw-hero--split .bsw-hero__text { display: contents; }
  .bsw-post .bsw-hero--split .bsw-hero__media { order: 1; margin: 1.25rem 0 0; }
  .bsw-post .bsw-hero--split .bsw-hero__teaser,
  .bsw-post .bsw-hero--split .bsw-meta { order: 2; }
  /* Gleicher Abstand über und unter dem Bild. */
  .bsw-post .bsw-hero--split .bsw-hero__teaser { margin-top: 1.25rem; }
}
.bsw-post .bsw-hero__media img {
  width: 100%;
  border-radius: var(--bsw-radius);
  display: block;
}
.bsw-post figcaption {
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--bsw-ink-mute);
}

/* ------------------------------------------------------------------ *
 * Bild (einzeln, optional verlinkt)
 * ------------------------------------------------------------------ */

/* Nur seitlich und unten: Den Abstand nach oben setzt die Bausteinfolge
   (.bsw-post > * + *). Die Browser-Vorgabe für figure rückt sonst 40px ein. */
.bsw-post .bsw-image { margin-inline: auto; margin-bottom: 0; }
.bsw-post .bsw-image--medium { max-width: 40rem; }
.bsw-post .bsw-image--small { max-width: 24rem; }
.bsw-post .bsw-image picture { display: block; }
.bsw-post .bsw-image img { display: block; width: 100%; height: auto; border-radius: var(--bsw-radius); }
.bsw-post .bsw-image__link { display: block; border-radius: var(--bsw-radius); }
.bsw-post .bsw-image__link:focus-visible { outline: 2px solid var(--bsw-accent); outline-offset: 3px; }
.bsw-post .bsw-image figcaption { text-align: center; }

/* ------------------------------------------------------------------ *
 * Kurz zusammengefasst
 * ------------------------------------------------------------------ */

.bsw-post .bsw-summary {
  /* Grau mit rotem Balken statt roter Fläche: eine rot hinterlegte Box
     liest sich als Warnung, nicht als Zusammenfassung. */
  background: var(--bsw-bg-soft);
  border: 1px solid var(--bsw-line);
  border-left: 4px solid var(--bsw-accent);
  border-radius: var(--bsw-radius);
  padding: 1.35rem 1.5rem;
}

.bsw-post .bsw-summary__title {
  margin: 0 0 var(--bsw-space-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bsw-ink);
}

.bsw-post .bsw-summary__list { margin: 0; padding: 0; list-style: none; }
.bsw-post .bsw-summary__list li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0;
}
.bsw-post .bsw-summary__list li + li { margin-top: .55rem; }
.bsw-post .bsw-summary__list li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .58em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--bsw-accent);
}

/* ------------------------------------------------------------------ *
 * Inhaltsverzeichnis
 * ------------------------------------------------------------------ */

.bsw-post .bsw-toc {
  background: var(--bsw-bg-soft);
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius);
  padding: 1.25rem 1.5rem;
}

/* Die ganze Zeile ist der Schalter, nicht nur das Wort - auf dem Handy
   trifft man einen schmalen Text sonst schlecht. */
.bsw-post .bsw-toc__summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
}
.bsw-post .bsw-toc__summary::-webkit-details-marker { display: none; }
.bsw-post .bsw-toc__summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--bsw-ink-mute);
  border-bottom: 2px solid var(--bsw-ink-mute);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.bsw-post .bsw-toc__box[open] .bsw-toc__summary::after { transform: translateY(2px) rotate(-135deg); }
.bsw-post .bsw-toc__summary:focus-visible { outline: 2px solid var(--bsw-accent); outline-offset: 3px; }

.bsw-post .bsw-toc__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bsw-ink-soft);
}
/* Der Abstand gehört nur dazu, wenn auch etwas darunter steht. */
.bsw-post .bsw-toc__box[open] .bsw-toc__summary { margin-bottom: var(--bsw-space-heading); }

/* Bewusst einspaltig: zweispaltig lief die Leserichtung des Verzeichnisses
   der des Beitrags zuwider – Platz 4 stand neben Platz 1. */
.bsw-post .bsw-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nummerierung 1. / 1.1 / 1.1.1 über Zähler statt über die Listenmarken:
   Das Verzeichnis ist eine flache Liste, die Ebene steckt allein in der
   Klasse am Eintrag. Jede Ebene setzt die tieferen zurück, sonst liefe die
   Unternummer über den ganzen Beitrag weiter. */
.bsw-post .bsw-toc__list { counter-reset: bsw-toc2 bsw-toc3 bsw-toc4; }

.bsw-post .bsw-toc__item {
  display: flex;
  gap: .5rem;
  margin: 0 0 .4rem;
  font-size: .94rem;
}
.bsw-post .bsw-toc__item--l2 { counter-increment: bsw-toc2; counter-reset: bsw-toc3 bsw-toc4; }
.bsw-post .bsw-toc__item--l3 { counter-increment: bsw-toc3; counter-reset: bsw-toc4; padding-left: 1rem; }
.bsw-post .bsw-toc__item--l4 { counter-increment: bsw-toc4; padding-left: 2rem; font-size: .88rem; }

/* `flex: none` und die Mindestbreite halten die Nummer aus dem Textfluss:
   ein langer Eintrag bricht dadurch bündig unter sich selbst um, nicht
   unter die Nummer. */
.bsw-post .bsw-toc__item::before {
  flex: none;
  min-width: 1.5rem;
  color: var(--bsw-ink-mute);
  font-variant-numeric: tabular-nums;
}
.bsw-post .bsw-toc__item--l2::before { content: counter(bsw-toc2) "."; }
.bsw-post .bsw-toc__item--l3::before { content: counter(bsw-toc2) "." counter(bsw-toc3); min-width: 2.2rem; }
.bsw-post .bsw-toc__item--l4::before { content: counter(bsw-toc2) "." counter(bsw-toc3) "." counter(bsw-toc4); min-width: 3rem; }

.bsw-post .bsw-toc__item a {
  color: var(--bsw-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.bsw-post .bsw-toc__item a:hover,
.bsw-post .bsw-toc__item a:focus-visible {
  color: var(--bsw-accent-dark);
  border-bottom-color: currentColor;
}
.bsw-post .bsw-toc__item.is-active > a { color: var(--bsw-accent-dark); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * Produktbox
 * ------------------------------------------------------------------ */

.bsw-post .bsw-product {
  position: relative;
  background: var(--bsw-bg);
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius);
  padding: 1.75rem;
  box-shadow: var(--bsw-shadow);
  scroll-margin-top: 5rem;
}

.bsw-post .bsw-product--awarded {
  border-color: color-mix(in srgb, var(--bsw-gold) 45%, var(--bsw-line));
  box-shadow: var(--bsw-shadow-lg);
}

.bsw-post .bsw-product__rank {
  position: absolute;
  top: -.9rem;
  left: 1.5rem;
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .55rem;
  border-radius: 999px;
  background: var(--bsw-accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .25);
}
.bsw-post .bsw-product--awarded .bsw-product__rank {
  background: linear-gradient(145deg, #d9a441, var(--bsw-gold));
}

.bsw-post .bsw-product__head { margin: .5rem 0 1.5rem; }

.bsw-post .bsw-award {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--bsw-gold-soft);
  border: 1px solid color-mix(in srgb, var(--bsw-gold) 40%, transparent);
  color: #7a5a06;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bsw-post .bsw-award--value { background: #eef6f0; border-color: #bcdcc7; color: #14663a; }
.bsw-post .bsw-award--tip { background: #eaf2fb; border-color: #b7d0ec; color: #1d5fa8; }
.bsw-post .bsw-award--sm { font-size: .68rem; padding: .12rem .5rem; margin: 0; }

.bsw-post .bsw-product__title { margin: 0; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); font-weight: 700; letter-spacing: -.015em; }
.bsw-post .bsw-product__subtitle { margin: .35rem 0 0; color: var(--bsw-ink-mute); font-size: .95rem; }

.bsw-post .bsw-product__body {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(190px, 220px);
  gap: 1.75rem;
  align-items: start;
}

.bsw-post .bsw-product__media { margin: 0; }
.bsw-post .bsw-product__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bsw-bg-soft);
  border-radius: var(--bsw-radius-sm);
  padding: .75rem;
}
.bsw-post .bsw-product__imglink { display: block; }

/* Kurzfazit: im Editor ein eigenes Feld, im Beitrag war es bisher nur ein
   etwas hellerer Absatz und damit vom Testtext darunter nicht zu
   unterscheiden. Abgesetzte Fläche mit Akzentkante – dieselbe Sprache wie
   "Kurz zusammengefasst" weiter oben, nur eine Stufe kleiner. */
.bsw-post .bsw-product__lead {
  margin: 0 0 var(--bsw-space-text-tight);
  padding: .8rem 1.05rem;
  border-left: 3px solid var(--bsw-accent);
  border-radius: 0 var(--bsw-radius-sm) var(--bsw-radius-sm) 0;
  background: var(--bsw-bg-soft);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--bsw-ink);
}
.bsw-post .bsw-product__text :where(p, ul, ol) { margin: 0; }
.bsw-post .bsw-product__text > * + * { margin-top: var(--bsw-space-text-tight); }

/* Pro / Contra */

.bsw-post .bsw-procon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem 1.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bsw-line);
}

.bsw-post .bsw-procon__label {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bsw-post .bsw-procon__col--pro .bsw-procon__label { color: var(--bsw-pro); }
.bsw-post .bsw-procon__col--con .bsw-procon__label { color: var(--bsw-con); }

.bsw-post .bsw-procon__list { margin: 0; padding: 0; list-style: none; font-size: .94rem; }
.bsw-post .bsw-procon__list li { position: relative; padding-left: 1.5rem; }
.bsw-post .bsw-procon__list li + li { margin-top: .4rem; }
.bsw-post .bsw-procon__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  /* Schrift- und Zeilenhöhe werden geerbt, damit die Zeilenbox des Markers
     exakt der ersten Textzeile entspricht – unabhängig davon, wie groß die
     Liste später gesetzt wird. Größer wird das Zeichen über transform,
     was die Box unberührt lässt. */
  font-size: inherit;
  line-height: inherit;
  display: inline-block;
  transform: scale(1.25);
  transform-origin: center center;
  width: 1rem;
  text-align: center;
}
/* U+2212 statt eines Bindestrichs: das echte Minuszeichen sitzt auf derselben
   mathematischen Achse wie das Plus und damit optisch auf gleicher Höhe. */
.bsw-post .bsw-procon__col--pro li::before { content: "+"; color: var(--bsw-pro); }
.bsw-post .bsw-procon__col--con li::before { content: "−"; color: var(--bsw-con); }

/* Technische Daten */

.bsw-post .bsw-specs { margin-top: 1.25rem; }
.bsw-post .bsw-specs__toggle {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--bsw-accent-dark);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.bsw-post .bsw-specs__toggle::-webkit-details-marker { display: none; }
.bsw-post .bsw-specs__toggle::before {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.bsw-post .bsw-specs[open] .bsw-specs__toggle::before { transform: rotate(45deg); }

.bsw-post .bsw-specs__table {
  width: 100%;
  margin-top: .75rem;
  border-collapse: collapse;
  font-size: .9rem;
}
.bsw-post .bsw-specs__table th,
.bsw-post .bsw-specs__table td {
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--bsw-line);
  text-align: left;
  vertical-align: top;
}
.bsw-post .bsw-specs__table th { width: 42%; font-weight: 600; color: var(--bsw-ink-soft); }

/* Weitere Ausführungen (z. B. Cam-Systeme): Name, Preis, Link je Zeile */

.bsw-post .bsw-variants {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bsw-line);
}
.bsw-post .bsw-variants__title {
  margin: 0 0 .25rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bsw-ink-soft);
}
.bsw-post .bsw-variants__list { margin: 0; padding: 0; list-style: none; font-size: .94rem; }
.bsw-post .bsw-variants__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .2rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--bsw-line);
}
.bsw-post .bsw-variants__item:last-child { padding-bottom: 0; border-bottom: 0; }
.bsw-post .bsw-variants__name { display: flex; flex-direction: column; min-width: 0; }
.bsw-post .bsw-variants__label { font-weight: 700; }
.bsw-post .bsw-variants__note { font-size: .88rem; color: var(--bsw-ink-soft); }
.bsw-post .bsw-variants__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bsw-post .bsw-variants__link { font-weight: 600; white-space: nowrap; color: var(--bsw-accent-dark); }

/* Seitenspalte: Wertung + Preis */

.bsw-post .bsw-product__side {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.15rem;
  background: var(--bsw-bg-soft);
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius-sm);
}

.bsw-post .bsw-score { text-align: center; }
.bsw-post .bsw-score__ring {
  --bsw-score: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  margin: 0 auto;
  border-radius: 50%;
  background:
    conic-gradient(var(--bsw-rating, var(--bsw-accent)) calc(var(--bsw-score) * 1%), var(--bsw-line) 0);
}

/* Jede Stufe setzt nur diese eine Variable – Kreis, Zahl und Balken
   ziehen ihre Farbe daraus. */
.bsw-post .bsw-score--good,
.bsw-post .bsw-rating--good,
.bsw-post .bsw-scorechip--good { --bsw-rating: var(--bsw-rating-good); }
.bsw-post .bsw-score--ok,
.bsw-post .bsw-rating--ok,
.bsw-post .bsw-scorechip--ok { --bsw-rating: var(--bsw-rating-ok); }
.bsw-post .bsw-score--weak,
.bsw-post .bsw-rating--weak,
.bsw-post .bsw-scorechip--weak { --bsw-rating: var(--bsw-rating-weak); }
.bsw-post .bsw-score--bad,
.bsw-post .bsw-rating--bad,
.bsw-post .bsw-scorechip--bad { --bsw-rating: var(--bsw-rating-bad); }
.bsw-post .bsw-score__ring::after {
  content: "";
  position: absolute;
  inset: .45rem;
  border-radius: 50%;
  background: var(--bsw-bg-soft);
}
.bsw-post .bsw-score__value {
  position: relative;
  z-index: 1;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--bsw-rating, var(--bsw-accent-dark));
}
.bsw-post .bsw-score__label {
  display: block;
  margin-top: .45rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bsw-ink-mute);
}

.bsw-post .bsw-ratings { margin: 0; padding: 0; list-style: none; }
.bsw-post .bsw-rating {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem .5rem;
  font-size: .8rem;
}
.bsw-post .bsw-rating + .bsw-rating { margin-top: .55rem; }
.bsw-post .bsw-rating__label { color: var(--bsw-ink-soft); }
.bsw-post .bsw-rating__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.bsw-post .bsw-rating__bar {
  grid-column: 1 / -1;
  height: .38rem;
  border-radius: 999px;
  background: var(--bsw-line);
  overflow: hidden;
}
.bsw-post .bsw-rating__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--bsw-rating, var(--bsw-accent));
}

.bsw-post .bsw-offer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--bsw-line);
  text-align: center;
}
.bsw-post .bsw-product__side > .bsw-offer:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.bsw-post .bsw-price { line-height: 1.2; }
.bsw-post .bsw-price__list { display: block; font-size: .82rem; color: var(--bsw-ink-mute); }
.bsw-post .bsw-price__value { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }

.bsw-post .bsw-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .8rem;
  padding: .7rem 1.15rem;
  border-radius: var(--bsw-radius-sm);
  background: var(--bsw-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border: 0;
  transition: background .15s ease, transform .15s ease;
}
.bsw-post .bsw-cta:hover,
.bsw-post .bsw-cta:focus-visible { background: var(--bsw-accent-dark); color: #fff !important; transform: translateY(-1px); }
.bsw-post .bsw-cta--sm { width: auto; margin: 0; padding: .4rem .8rem; font-size: .82rem; white-space: nowrap; }

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

.bsw-post .bsw-ctable__scroll {
  overflow-x: auto;
  margin-top: var(--bsw-space-heading);
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius);
  -webkit-overflow-scrolling: touch;
}
.bsw-post .bsw-ctable__scroll:focus-visible { outline: 2px solid var(--bsw-accent); outline-offset: 2px; }

.bsw-post .bsw-ctable {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  background: var(--bsw-bg);
}

.bsw-post .bsw-ctable__th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .8rem .85rem;
  background: var(--bsw-bg-tint);
  border-bottom: 1px solid var(--bsw-line-strong);
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bsw-ink-soft);
  white-space: nowrap;
}
.bsw-post .bsw-ctable__th[data-bsw-sort] { cursor: pointer; user-select: none; }
.bsw-post .bsw-ctable__th[data-bsw-sort]::after {
  content: "";
  display: inline-block;
  margin-left: .35rem;
  border: .3rem solid transparent;
  border-top-color: var(--bsw-line-strong);
  translate: 0 .15rem;
}
.bsw-post .bsw-ctable__th.is-asc::after { border-top-color: transparent; border-bottom-color: var(--bsw-accent); translate: 0 -.15rem; }
.bsw-post .bsw-ctable__th.is-desc::after { border-top-color: var(--bsw-accent); }

.bsw-post .bsw-ctable__td {
  padding: .8rem .85rem;
  border-bottom: 1px solid var(--bsw-line);
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}
.bsw-post .bsw-ctable__row:last-child .bsw-ctable__td { border-bottom: 0; }
.bsw-post .bsw-ctable__row--awarded { background: color-mix(in srgb, var(--bsw-gold-soft) 60%, transparent); }
.bsw-post .bsw-ctable__row:hover { background: var(--bsw-bg-soft); }

.bsw-post .bsw-rankchip {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--bsw-accent);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.bsw-post .bsw-ctable__product {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
}
.bsw-post .bsw-ctable__img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  background: var(--bsw-bg-soft);
  border-radius: var(--bsw-radius-sm);
  flex: none;
}
.bsw-post .bsw-ctable__names { display: flex; flex-direction: column; gap: .12rem; align-items: flex-start; }
.bsw-post .bsw-ctable__brand { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bsw-ink-mute); }
.bsw-post .bsw-ctable__name { font-weight: 600; line-height: 1.3; }
.bsw-post .bsw-ctable__product:hover .bsw-ctable__name { color: var(--bsw-accent-dark); }

.bsw-post .bsw-ctable__td--price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bsw-post .bsw-scorechip {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--bsw-line);
  overflow: hidden;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
}
.bsw-post .bsw-scorechip__bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--bsw-rating, var(--bsw-accent)) 32%, transparent);
}
.bsw-post .bsw-scorechip__num { color: color-mix(in srgb, var(--bsw-rating, var(--bsw-ink)) 70%, #000); }
.bsw-post .bsw-scorechip__num { position: relative; z-index: 1; }

.bsw-post .bsw-ctable__note { margin: .6rem 0 0; font-size: .8rem; color: var(--bsw-ink-mute); }

/* ------------------------------------------------------------------ *
 * Callout, Zitat, Galerie, Video
 * ------------------------------------------------------------------ */

.bsw-post .bsw-callout {
  border-radius: var(--bsw-radius);
  border: 1px solid var(--bsw-line);
  border-left: 4px solid var(--bsw-info);
  background: var(--bsw-bg-soft);
  padding: 1.15rem 1.35rem;
}
.bsw-post .bsw-callout--info { border-left-color: var(--bsw-info); background: #f2f7fd; }
.bsw-post .bsw-callout--tip { border-left-color: var(--bsw-pro); background: #eef6f0; }
.bsw-post .bsw-callout--warning { border-left-color: var(--bsw-warn); background: #fdf6ec; }
.bsw-post .bsw-callout--expert { border-left-color: var(--bsw-accent); background: var(--bsw-accent-soft); }

.bsw-post .bsw-callout__title { margin: 0 0 .6rem; font-size: .95rem; font-weight: 700; }
.bsw-post .bsw-callout__body :where(p, ul, ol) { margin: 0; }
.bsw-post .bsw-callout__body > * + * { margin-top: var(--bsw-space-text-tight); }

/* margin-top bleibt der Grundregel überlassen: ein `margin: 0` hier wäre
   spezifischer und würde den Abstand zum Baustein darüber löschen. */
.bsw-post .bsw-quote { margin-block-end: 0; margin-inline: 0; padding-left: 1.35rem; border-left: 3px solid var(--bsw-accent); }
.bsw-post .bsw-quote blockquote { margin: 0; font-size: 1.15rem; font-style: italic; color: var(--bsw-ink); }
.bsw-post .bsw-quote blockquote p { margin: 0; }
.bsw-post .bsw-quote figcaption { margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--bsw-ink-soft); font-style: normal; }
.bsw-post .bsw-quote__role { display: block; font-weight: 400; color: var(--bsw-ink-mute); }

.bsw-post .bsw-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.bsw-post .bsw-gallery__item { margin: 0; }
/* Einheitliche Kachelhoehe: Ohne festes Seitenverhaeltnis bestimmt jedes
   Foto seine eigene Hoehe, und eine Reihe aus Quer-, Hoch- und
   freigestellten Produktbildern franst aus. Beschnitten wird nur die
   Kachel - in der Groszansicht erscheint das Bild wieder vollstaendig. */
.bsw-post .bsw-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--bsw-bg-soft);
  border-radius: var(--bsw-radius-sm);
  /* Dieselbe Abstufung wie bei den Produktboxen - die Kacheln sollen sich
     vom Weisz abheben, nicht auffallen. */
  box-shadow: var(--bsw-shadow);
  display: block;
}

.bsw-post .bsw-video { margin-block-end: 0; margin-inline: 0; }

/* ------------------------------------------------------------------ *
 * Groszansicht der Galerie
 *
 * Als einziges Stueck dieses Stylesheets nicht unter .bsw-post gescoped:
 * Das Overlay haengt am <body>, weil es ueber der ganzen Seite liegen muss
 * und innerhalb des Beitrags von jedem transform eines Shop-Containers
 * eingefangen werden koennte. Alle Klassen tragen das bsw-Praefix, eine
 * Kollision mit dem Shop ist damit ausgeschlossen.
 * ------------------------------------------------------------------ */

.bsw-post .bsw-gallery__zoom { cursor: zoom-in; }
.bsw-post .bsw-gallery__zoom:focus-visible { outline: 3px solid var(--bsw-accent); outline-offset: 3px; }

.bsw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 12, 15, .92);
  font-family: inherit;
}
.bsw-lightbox.is-open { display: flex; }
/* Hintergrund festhalten, solange die Groszansicht offen ist. */
.bsw-lightbox-offen { overflow: hidden; }

.bsw-lightbox__figure {
  margin: 0;
  max-width: min(100%, 1600px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.bsw-lightbox__img {
  max-width: 100%;
  /* Platz fuer Beschriftung und Zaehler lassen. */
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}
.bsw-lightbox__caption {
  margin: 0;
  max-width: 70ch;
  color: #e8eaed;
  font-size: .9rem;
  text-align: center;
}

.bsw-lightbox__close,
.bsw-lightbox__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.bsw-lightbox__close:hover,
.bsw-lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.bsw-lightbox__close:focus-visible,
.bsw-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.bsw-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.9rem;
}
.bsw-lightbox__count {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* Auf schmalen Schirmen sind Wischen und der Schlieszen-Knopf naeher als
   zwei Pfeile, die das Bild verdecken wuerden. */
@media (max-width: 600px) {
  .bsw-lightbox { padding: 1rem .5rem 3rem; }
  .bsw-lightbox__nav { position: absolute; bottom: 2.6rem; }
  .bsw-lightbox__nav--prev { left: 1rem; }
  .bsw-lightbox__nav--next { right: 1rem; }
  .bsw-lightbox__img { max-height: calc(100vh - 11rem); }
}

@media (prefers-reduced-motion: reduce) {
  .bsw-lightbox__close, .bsw-lightbox__nav { transition: none; }
}
.bsw-post .bsw-video__facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--bsw-radius);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  aspect-ratio: 16 / 9;
}
.bsw-post .bsw-video__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.bsw-post .bsw-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 4.5rem;
  height: 3.15rem;
  border-radius: .8rem;
  background: rgba(220, 40, 40, .92);
}
.bsw-post .bsw-video__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -40% -50%;
  border: .7rem solid transparent;
  border-left-color: #fff;
}
.bsw-post .bsw-video__facade:hover .bsw-video__play { background: rgb(220, 40, 40); }
.bsw-post .bsw-video__title {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  color: #fff;
  font-weight: 700;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.bsw-post .bsw-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--bsw-radius); display: block; }

/* ------------------------------------------------------------------ *
 * Kaufberatung, FAQ, Fazit, Autor, CTA
 * ------------------------------------------------------------------ */

.bsw-post .bsw-guide__scroll { overflow-x: auto; margin-top: var(--bsw-space-heading); border: 1px solid var(--bsw-line); border-radius: var(--bsw-radius); }
.bsw-post .bsw-guide__table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.bsw-post .bsw-guide__table thead th {
  padding: .8rem .95rem;
  background: var(--bsw-bg-tint);
  border-bottom: 1px solid var(--bsw-line-strong);
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bsw-ink-soft);
}
.bsw-post .bsw-guide__table tbody th,
.bsw-post .bsw-guide__table tbody td {
  padding: .8rem .95rem;
  border-bottom: 1px solid var(--bsw-line);
  text-align: left;
  vertical-align: top;
}
.bsw-post .bsw-guide__table tbody tr:last-child th,
.bsw-post .bsw-guide__table tbody tr:last-child td { border-bottom: 0; }
.bsw-post .bsw-guide__table tbody th { font-weight: 700; width: 34%; }

/* Freie Tabelle */

.bsw-post .bsw-table__scroll {
  overflow-x: auto;
  margin-top: var(--bsw-space-heading);
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius);
  -webkit-overflow-scrolling: touch;
}
.bsw-post .bsw-table__scroll:focus-visible { outline: 2px solid var(--bsw-accent); outline-offset: 2px; }

/* Ohne Überschrift über der Tabelle gäbe es nichts, wovon sie abrücken müsste. */
.bsw-post .bsw-ctable__scroll:first-child,
.bsw-post .bsw-guide__scroll:first-child,
.bsw-post .bsw-table__scroll:first-child { margin-top: 0; }

.bsw-post .bsw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  background: var(--bsw-bg);
}
.bsw-post .bsw-table thead th {
  padding: .8rem .95rem;
  background: var(--bsw-bg-tint);
  border-bottom: 1px solid var(--bsw-line-strong);
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bsw-ink-soft);
  white-space: nowrap;
}
.bsw-post .bsw-table tbody th,
.bsw-post .bsw-table tbody td {
  padding: .75rem .95rem;
  border-bottom: 1px solid var(--bsw-line);
  text-align: left;
  vertical-align: top;
}
.bsw-post .bsw-table tbody th { font-weight: 650; }
.bsw-post .bsw-table tbody tr:last-child th,
.bsw-post .bsw-table tbody tr:last-child td { border-bottom: 0; }

.bsw-post .bsw-tablewrap--zebra .bsw-table tbody tr:nth-child(even) { background: var(--bsw-bg-soft); }

.bsw-post .bsw-table__note { margin: .6rem 0 0; font-size: .8rem; color: var(--bsw-ink-mute); }

.bsw-post .bsw-faq__item {
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius-sm);
  margin-top: .6rem;
  background: var(--bsw-bg);
}
.bsw-post .bsw-faq__item:first-of-type { margin-top: var(--bsw-space-heading); }
.bsw-post .bsw-faq__q {
  position: relative;
  padding: .95rem 3rem .95rem 1.15rem;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.bsw-post .bsw-faq__q::-webkit-details-marker { display: none; }
.bsw-post .bsw-faq__q::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 1.35rem;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--bsw-ink-mute);
  border-bottom: 2px solid var(--bsw-ink-mute);
  rotate: 45deg;
  transition: rotate .15s ease;
}
.bsw-post .bsw-faq__item[open] .bsw-faq__q::after { rotate: -135deg; top: 1.55rem; }
.bsw-post .bsw-faq__item[open] .bsw-faq__q { color: var(--bsw-accent-dark); }
.bsw-post .bsw-faq__a { padding: 0 1.15rem 1.15rem; color: var(--bsw-ink-soft); }
.bsw-post .bsw-faq__a :where(p, ul, ol) { margin: 0; }
.bsw-post .bsw-faq__a > * + * { margin-top: var(--bsw-space-text-tight); }

.bsw-post .bsw-conclusion {
  background: var(--bsw-bg-soft);
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius);
  padding: 1.6rem 1.75rem;
}
.bsw-post .bsw-conclusion__body { margin-top: var(--bsw-space-heading); }
.bsw-post .bsw-conclusion__body :where(p, ul, ol) { margin: 0; }
.bsw-post .bsw-conclusion__body > * + * { margin-top: var(--bsw-space-text); }

.bsw-post .bsw-author {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius);
  background: var(--bsw-bg);
}
.bsw-post .bsw-author__avatar {
  width: 5rem; height: 5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bsw-accent-soft);
}
.bsw-post .bsw-author__avatar--initials {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--bsw-accent-dark);
}
.bsw-post .bsw-author__eyebrow {
  margin: 0 0 .2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bsw-ink-mute);
}
.bsw-post .bsw-author__name { margin: 0; font-size: 1.1rem; font-weight: 700; }
.bsw-post .bsw-author__role { margin: .1rem 0 0; font-size: .88rem; color: var(--bsw-accent-dark); font-weight: 600; }
.bsw-post .bsw-author__bio { margin: .6rem 0 0; font-size: .93rem; color: var(--bsw-ink-soft); }
.bsw-post .bsw-author__credentials { margin: .45rem 0 0; font-size: .82rem; color: var(--bsw-ink-mute); }
.bsw-post .bsw-author__links { display: flex; flex-wrap: wrap; gap: .75rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .85rem; }

.bsw-post .bsw-ctabox {
  text-align: center;
  padding: 1.75rem;
  border-radius: var(--bsw-radius);
  background: linear-gradient(135deg, var(--bsw-accent-dark), var(--bsw-accent));
  color: #fff;
}
.bsw-post .bsw-ctabox__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.bsw-post .bsw-ctabox__text { margin: .5rem 0 1.1rem; opacity: .92; }
.bsw-post .bsw-ctabox .bsw-cta { width: auto; background: #fff; color: var(--bsw-accent-dark) !important; }
.bsw-post .bsw-ctabox .bsw-cta:hover { background: #f0f0f0; color: var(--bsw-accent-dark) !important; }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .bsw-post .bsw-product__body { grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); }
  .bsw-post .bsw-product__side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .bsw-post .bsw-score { flex: none; }
  .bsw-post .bsw-ratings { flex: 1 1 14rem; }
  .bsw-post .bsw-offer { flex: 1 1 12rem; margin: 0; padding: 0; border: 0; text-align: left; }
  .bsw-post .bsw-cta { width: auto; }
}

@media (max-width: 600px) {
  /* Nur die Tokens nachziehen: die Überschriftenregeln oben sind
     spezifischer und ließen sich hier ohnehin nicht überschreiben. */
  .bsw-post {
    --bsw-gap: 1rem;
    --bsw-space-section: 2.5rem;
    --bsw-space-block: 1.8rem;
    --bsw-space-flow: 1.6rem;
    /* Auf dem Handy reicht der Shop-Container nicht bis an den Rand heran –
       ohne das hier stünde der Beitrag als einziger Teil der Seite bündig
       an der Bildschirmkante. */
    padding-inline: 1rem;
  }
  .bsw-post .bsw-product { padding: 1.15rem; }
  .bsw-post .bsw-product__body { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Ausführungen: Name über die ganze Breite, darunter Preis und Link */
  .bsw-post .bsw-variants__item { grid-template-columns: minmax(0, 1fr) auto; }
  .bsw-post .bsw-variants__name { grid-column: 1 / -1; }
  .bsw-post .bsw-product__media { max-width: 15rem; margin-inline: auto; }
  .bsw-post .bsw-product__side { flex-direction: column; align-items: stretch; text-align: center; }
  .bsw-post .bsw-offer { text-align: center; }
  .bsw-post .bsw-cta { width: 100%; }

  /* Vergleichstabelle wird zu Karten – Kopfzeilen kommen aus data-label */
  .bsw-post .bsw-ctable,
  .bsw-post .bsw-ctable tbody,
  .bsw-post .bsw-ctable__row { display: block; }
  .bsw-post .bsw-ctable thead { display: none; }
  .bsw-post .bsw-ctable__row {
    padding: .9rem;
    border-bottom: 1px solid var(--bsw-line);
  }
  .bsw-post .bsw-ctable__td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .35rem 0;
    border: 0;
  }
  .bsw-post .bsw-ctable__td::before {
    content: attr(data-label);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bsw-ink-mute);
  }
  .bsw-post .bsw-ctable__td--product { display: block; }
  .bsw-post .bsw-ctable__td--product::before { display: none; }
  .bsw-post .bsw-ctable__td--cta .bsw-cta { width: 100%; }

  /* Freie Tabelle wird zu Karten, sobald sie mehr als zwei Spalten hat */
  .bsw-post .bsw-table[data-bsw-cards] ,
  .bsw-post .bsw-table[data-bsw-cards] tbody,
  .bsw-post .bsw-table[data-bsw-cards] tr { display: block; }
  .bsw-post .bsw-table[data-bsw-cards] thead { display: none; }
  .bsw-post .bsw-table[data-bsw-cards] tr {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--bsw-line);
  }
  .bsw-post .bsw-table[data-bsw-cards] tbody th {
    display: block;
    padding: 0 0 .35rem;
    border: 0;
    font-size: 1rem;
  }
  .bsw-post .bsw-table[data-bsw-cards] tbody td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    border: 0;
  }
  .bsw-post .bsw-table[data-bsw-cards] tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex: none;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bsw-ink-mute);
  }

  .bsw-post .bsw-author { flex-direction: column; align-items: center; text-align: center; }
  .bsw-post .bsw-author__links { justify-content: center; }
}

/* ------------------------------------------------------------------ *
 * Freies HTML (Clerk-Slider u. ä.)
 * ------------------------------------------------------------------ */

/* Der eingebettete Code bringt sein eigenes Layout mit; hier nur der Abstand. */
.bsw-post .bsw-embed { min-height: 1px; }

/* Platzhalter in der Vorschau des Editors – im Shop steht der echte Code. */
.bsw-post .bsw-embed--placeholder {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.1rem 1.25rem;
  border: 2px dashed var(--bsw-line-strong);
  border-radius: var(--bsw-radius);
  background: var(--bsw-bg-soft);
  color: var(--bsw-ink-mute);
  font-size: .9rem;
  text-align: center;
}
.bsw-post .bsw-embed--placeholder strong { color: var(--bsw-ink-soft); }

/* ------------------------------------------------------------------ *
 * Übersichtsseite (Hub)
 * ------------------------------------------------------------------ */

.bsw-hub *,
.bsw-hub *::before,
.bsw-hub *::after { box-sizing: border-box; }

.bsw-hub { padding-bottom: 2.5rem; }

.bsw-hub .bsw-hub__head { margin-bottom: 1.5rem; }
.bsw-hub .bsw-hub__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--bsw-ink);
}
.bsw-hub .bsw-hub__intro { margin: 0; font-size: 1.08rem; color: var(--bsw-ink-soft); }

/* Werkzeuge: ohne Script versteckt (Attribut hidden), mit Script eine Zeile. */
.bsw-hub .bsw-hub__tools[hidden] { display: none; }
.bsw-hub .bsw-hub__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: 1.5rem;
  padding: .75rem;
  border-radius: var(--bsw-radius);
  background: var(--bsw-bg-soft);
}
.bsw-hub .bsw-hub__filters { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Bei nur einer Kategorie gibt es keine Filterknöpfe – dann auch keinen Platz dafür. */
.bsw-hub .bsw-hub__filters:empty { display: none; }
.bsw-hub .bsw-hub__filter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--bsw-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--bsw-ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bsw-hub .bsw-hub__filter:hover { border-color: var(--bsw-accent); }
.bsw-hub .bsw-hub__filter:focus-visible { outline: 2px solid var(--bsw-accent); outline-offset: 2px; }
.bsw-hub .bsw-hub__filter.is-active { background: var(--bsw-accent); border-color: var(--bsw-accent); color: #fff; }
.bsw-hub .bsw-hub__count {
  min-width: 1.4rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--bsw-bg-tint);
  color: var(--bsw-ink-soft);
  font-size: .75rem;
  text-align: center;
}
.bsw-hub .bsw-hub__filter.is-active .bsw-hub__count { background: rgba(255, 255, 255, .25); color: #fff; }

.bsw-hub .bsw-hub__search { flex: 1 1 16rem; max-width: 24rem; }
.bsw-hub .bsw-hub__searchlabel {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bsw-hub .bsw-hub__input {
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--bsw-line-strong);
  border-radius: var(--bsw-radius);
  background: #fff;
  font: inherit;
  font-size: .95rem;
  color: var(--bsw-ink);
}
.bsw-hub .bsw-hub__input:focus { outline: none; border-color: var(--bsw-accent); box-shadow: 0 0 0 3px var(--bsw-accent-soft); }

.bsw-hub .bsw-hub__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--bsw-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bsw-hub .bsw-hub__item[hidden] { display: none; }

.bsw-hub .bsw-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--bsw-line);
  border-radius: var(--bsw-radius);
  background: #fff;
  box-shadow: var(--bsw-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.bsw-hub .bsw-card:hover { box-shadow: var(--bsw-shadow-lg); transform: translateY(-2px); }
/* Alle Bilder im selben Format, egal wie das Original geschnitten ist –
   überstehende Teile werden abgeschnitten. overflow: hidden ist dabei
   nötig: Ohne gibt aspect-ratio einem hohen Bild nach und der Rahmen wächst
   mit (die Mindesthöhe eines Elements richtet sich sonst nach dem Inhalt). */
.bsw-hub .bsw-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: var(--bsw-bg-soft);
}
.bsw-hub .bsw-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.bsw-hub .bsw-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.2rem; }
.bsw-hub .bsw-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  margin: 0 0 .45rem;
  font-size: .8rem;
  color: var(--bsw-ink-mute);
}
.bsw-hub .bsw-card__cat {
  padding: .1rem .5rem;
  border-radius: var(--bsw-radius-sm);
  background: var(--bsw-accent-soft);
  color: var(--bsw-accent-dark);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bsw-hub .bsw-card__title { margin: 0 0 .5rem; font-size: 1.12rem; line-height: 1.3; font-weight: 700; }
.bsw-hub .bsw-card__title a { color: var(--bsw-ink); text-decoration: none; }
/* Die ganze Karte ist klickbar, der Link bleibt trotzdem ein echter Link im Titel. */
.bsw-hub .bsw-card { position: relative; }
.bsw-hub .bsw-card__title a::after { content: ""; position: absolute; inset: 0; }
.bsw-hub .bsw-card__title a:focus-visible { outline: none; }
.bsw-hub .bsw-card:focus-within { outline: 2px solid var(--bsw-accent); outline-offset: 2px; }
.bsw-hub .bsw-card:hover .bsw-card__title a { color: var(--bsw-accent-dark); }
.bsw-hub .bsw-card__teaser { margin: 0; color: var(--bsw-ink-soft); font-size: .95rem; line-height: 1.55; }
.bsw-hub .bsw-card__more { color: var(--bsw-accent-dark); font-weight: 600; white-space: nowrap; }
.bsw-hub .bsw-card:hover .bsw-card__more { text-decoration: underline; }

.bsw-hub .bsw-hub__empty { margin: 2rem 0; text-align: center; color: var(--bsw-ink-mute); }

@media (max-width: 600px) {
  /* Wie bei den Beiträgen: Auf dem Handy reicht der Shop-Container bis an
     die Bildschirmkante, der Abstand muss von hier kommen. */
  .bsw-hub { padding-inline: 1rem; }
  .bsw-hub .bsw-hub__tools { flex-direction: column; align-items: stretch; }
  /* flex: none statt der 16rem von oben – untereinander wären die 16rem
     sonst die Höhe des Suchfelds, nicht seine Breite. */
  .bsw-hub .bsw-hub__search { flex: none; max-width: none; }
  .bsw-hub .bsw-hub__list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Print & Motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .bsw-post *, .bsw-hub * { transition: none !important; animation: none !important; }
}

@media print {
  .bsw-post .bsw-cta,
  .bsw-post .bsw-toc,
  .bsw-post .bsw-video { display: none; }
  .bsw-post .bsw-product { break-inside: avoid; box-shadow: none; }
  .bsw-post .bsw-specs[open] .bsw-specs__table,
  .bsw-post .bsw-faq__item .bsw-faq__a { display: block !important; }
}