/* ============================================================================
   bbk-ratgeber.css — F1-Pilot: Kategorie→Ratgeber-Karte auf Kategorieseiten.

   Vertrag: docs/design/zerstoerungsfreier-einbau.md
     · Namespace `bbk-` — JEDER Selektor hängt an einer .bbk-Klasse.
     · Kein :root, keine nackten Element-Selektoren, keine Bootstrap-Namen.
     · `--bb-*` wird ausschließlich GELESEN (Fallbacks 1:1 wie bbg-blog.css).
     · Lädt NUR, wenn die Karte rendert (Include-Link in
       Sweet/snippets/bbk_ratgeber_karte.tpl, Pilot-Gate davor).
     · Rollback = diese Datei löschen + die eine Include-Zeile in
       Sweet/productlist/footer.tpl entfernen.

   ⚠ Spezifität: sweet_crit.css gewinnt Linkfarben mit `.sweet a` (0-2-0).
   Alle Regeln auf dem Link (CTA) stehen deshalb als
   `.bbk-ratgeber .bbk-ratgeber__cta` (0-2-0 an einem späteren Stylesheet
   bzw. mit :hover 0-3-0) — dieselbe Zweiklassen-Falle wie bbg-blog.css.

   Mobile-first: Basis = gestapelt, ab 721 px eine Zeile.
   ========================================================================= */

.bbk-ratgeber {
  align-items: center;
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-radius: var(--bb-radius, 16px);
  box-shadow: var(--bb-shadow, 0 1px 2px rgba(23, 21, 14, .05));
  color: var(--bb-ink, #17150e);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--bb-font-body, system-ui, sans-serif);
  gap: 14px 24px;
  justify-content: space-between;
  margin: 28px 0;
  overflow: hidden;
  padding: 20px 22px;
  position: relative;
}

/* Der Markenstreifen als obere Kante — dieselbe Form wie .bbg-pm::before. */
.bbk-ratgeber::before {
  background: var(--bb-stripe, linear-gradient(90deg, #178a41 0 33.34%, #eab00e 33.34% 66.67%, #d8402c 66.67% 100%));
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.bbk-ratgeber__kicker {
  align-items: center;
  color: var(--bb-g-ink, #0f6b31);
  display: inline-flex;
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  gap: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.bbk-ratgeber__titel {
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  line-height: 1.15;
  margin: 6px 0 0;
}

.bbk-ratgeber__sub {
  color: var(--bb-muted-text, #756f5f);
  font-size: 14px;
  margin: 4px 0 0;
}

/* CTA — eigene Klasse, KEIN .btn-Override. Zweiklassig gegen `.sweet a`. */
.bbk-ratgeber .bbk-ratgeber__cta {
  align-items: center;
  background: var(--bb-g-action, #147a3b);
  border-radius: 99px;
  box-shadow: 0 6px 18px -8px rgba(20, 122, 59, .55);
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  gap: 10px;
  line-height: 1.2;
  padding: 12px 24px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bbk-ratgeber .bbk-ratgeber__cta:hover,
.bbk-ratgeber .bbk-ratgeber__cta:focus-visible {
  box-shadow: 0 10px 22px -8px rgba(20, 122, 59, .65);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.bbk-ratgeber .bbk-ratgeber__cta:focus-visible {
  outline: 2px solid var(--bb-g-action, #147a3b);
  outline-offset: 3px;
}