/* ============================================================================
   bb-sichtbarkeit.css — N69 Sichtbarkeits-Paket (2026-09-02).
   Beleg: outputs/bremsenbefund-2026-09-01/A-live-sicht.md — /ratgeber ist im
   Header 0x verlinkt, Karte nur auf 88/254 sichtbaren Kategorien, kein
   Einstiegstext ueber dem Grid, PDP ohne Ratgeber-Ausgang.

   Vertrag: docs/design/zerstoerungsfreier-einbau.md
     · Namespace `bb-` — JEDER Selektor haengt an einer bb-Klasse dieses Pakets
       (.bb-hdr-rg, .bb-rg-top, .bb-cat-intro, .bb-rg-pdp).
     · Kein :root, keine nackten Element-Selektoren, keine Bootstrap-Overrides.
     · `--bb-*` wird ausschliesslich GELESEN (Fallbacks 1:1 wie bbk-ratgeber.css).
     · Laedt GLOBAL ueber Sweet/layout/header.tpl (Block
       layout-header-head-resources) — der Header-Link rendert auf jeder Seite;
       PLP-/PDP-Bausteine lesen dasselbe Blatt.
     · Rollback = diese Datei loeschen + die eine <link>-Zeile im Header.

   ⚠ Spezifitaet: sweet_crit.css gewinnt Linkfarben mit `.sweet a` (0-2-0).
   Alle Regeln auf Links stehen deshalb zweiklassig (`.bb-rg-top .bb-rg-top__cta`)
   bzw. mit ID-Anker (`#jtl-nav-wrapper .bb-hdr-rg`) — bbk-ratgeber.css-Muster.

   Kapitel: 1 Header-Link · 2 Top-Karte PLP · 3 Kategorie-Intro · 4 PDP-Karte
   · 5 Blog-Byline
   ========================================================================= */

/* ---- 1 · Header-Link „Ratgeber" (nur Desktop-Leiste; mobil kommt der
        Zugang spaeter ueber den FlexNav-Drawer, kRule 23 = Daten) ---------- */
#jtl-nav-wrapper .bb-hdr-rg {
  align-items: center;
  align-self: center;
  border-bottom: 2px solid var(--bb-g-action, #147a3b);
  color: var(--bb-ink, #17150e);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-left: 26px;
  padding: 4px 2px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
#jtl-nav-wrapper .bb-hdr-rg:hover,
#jtl-nav-wrapper .bb-hdr-rg:focus-visible {
  border-bottom-color: var(--bb-g-ink, #0f6b31);
  color: var(--bb-g-ink, #0f6b31);
  text-decoration: none;
}
#jtl-nav-wrapper .bb-hdr-rg:focus-visible {
  outline: 2px solid var(--bb-g-action, #147a3b);
  outline-offset: 3px;
}

/* ---- 2 · Kompakte Ratgeber-Zeile UEBER der Produktliste (.bb-rg-top).
        Desktop: eine Zeile (~46 px), CTA rechts. Mobil: darf einmal
        umbrechen, mehr Flaeche nimmt sie nicht ein. ----------------------- */
.bb-rg-top {
  align-items: center;
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-left: 4px solid var(--bb-g-action, #147a3b);
  border-radius: 10px;
  color: var(--bb-ink, #17150e);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--bb-font-body, system-ui, sans-serif);
  gap: 4px 14px;
  margin: 0 0 14px;
  padding: 10px 16px;
}
.bb-rg-top__kicker {
  color: var(--bb-g-ink, #0f6b31);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bb-rg-top .bb-rg-top__cta {
  color: var(--bb-ink, #17150e);
  font-size: 15px;
  font-weight: 700;
  margin-left: auto;
  text-decoration: none;
}
.bb-rg-top .bb-rg-top__cta:hover,
.bb-rg-top .bb-rg-top__cta:focus-visible {
  color: var(--bb-g-ink, #0f6b31);
  text-decoration: underline;
}
@media (max-width: 575px) {
  .bb-rg-top .bb-rg-top__cta { margin-left: 0; }
}

/* ---- 3 · Einstiegsabsatz ueber dem Grid (.bb-cat-intro) — dezent,
        Lesebreite gedeckelt; der Volltext unten bleibt unveraendert. ------ */
.bb-cat-intro {
  color: var(--bb-muted-text, #756f5f);
  font-family: var(--bb-font-body, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  margin: 6px 0 18px;
  max-width: 76ch;
}

/* ---- 4 · PDP→Ratgeber-Karte (.bb-rg-pdp) — schlanke Schwester der
        .bbk-ratgeber (PLP-Fusskarte), unterhalb der Beschreibungstabs. ---- */
.bb-rg-pdp {
  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: 12px 24px;
  justify-content: space-between;
  margin: 26px 0;
  overflow: hidden;
  padding: 16px 20px;
  position: relative;
}
.bb-rg-pdp::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;
}
.bb-rg-pdp__kicker {
  color: var(--bb-g-ink, #0f6b31);
  display: block;
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bb-rg-pdp__titel {
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.15;
  margin: 4px 0 0;
}
.bb-rg-pdp__text {
  color: var(--bb-muted-text, #756f5f);
  font-size: 14px;
  margin: 4px 0 0;
  max-width: 60ch;
}
.bb-rg-pdp .bb-rg-pdp__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: 14px;
  font-weight: 700;
  gap: 10px;
  line-height: 1.2;
  padding: 10px 20px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bb-rg-pdp .bb-rg-pdp__cta:hover,
.bb-rg-pdp .bb-rg-pdp__cta:focus-visible {
  box-shadow: 0 10px 22px -8px rgba(20, 122, 59, .65);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.bb-rg-pdp .bb-rg-pdp__cta:focus-visible {
  outline: 2px solid var(--bb-g-action, #147a3b);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .bb-rg-pdp .bb-rg-pdp__cta { transition: none; }
}

/* ---- 5 · Blog-Byline (.bb-byline) — sichtbare Autorzeile „Von Philip
        Eckhardt · Datum" im Meta-Kopf der Blog-Detailseite
        (Sweet/blog/details.tpl, Block blog-details-include-author).
        Rendert nur, wenn tcontentauthor einen aktiven Autor liefert
        (fail-closed im Template). Byline-Paket Pkt 22, 2026-09-02. -------- */
.bb-byline {
  color: var(--bb-muted-text, #756f5f);
  font-family: var(--bb-font-body, system-ui, sans-serif);
  font-size: 14px;
}
.bb-byline .bb-byline__name {
  color: var(--bb-ink, #17150e);
  font-weight: 700;
}