/* ============================================================================
   bbr-ratgeber-hub.css — Ratgeber-Struktur (2026-10-05): Brotkrume und
   Hub-Blöcke auf den Ratgeber-Hubs, Ratgeber-Baustein unter Blogartikeln.

   Vertrag (docs/design/zerstoerungsfreier-einbau.md, wie bbk-ratgeber.css):
     · Namespace `bbr-` — jeder Selektor hängt an einer .bbr-Klasse.
     · Kein :root, keine nackten Element-Selektoren, keine Bootstrap-Namen.
     · `--bb-*` wird ausschließlich GELESEN (Fallbacks wie bbk-ratgeber.css).
     · Lädt NUR auf Hub-Seiten (layout/index.tpl, Brotkrume) und unter
       Blogartikeln (snippets/bb_ratgeber_blog_baustein.tpl).
   ⚠ `.sweet a` (0-2-0) gewinnt Linkfarben — Linkregeln deshalb zweiklassig.
   Mobile-first: Basis = schmal, ab 721 px breiter.
   ========================================================================= */

.bbr-krume {
  color: var(--bb-muted-text, #756f5f);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.bbr-krume a,
.bbr-krume .bbr-krume__link {
  align-items: center;
  color: var(--bb-g-ink, #0f6b31);
  display: inline-flex;
  font-weight: 700;
  min-height: 44px;
}

.bbr-hub {
  display: grid;
  gap: 18px;
  margin: 36px 0 12px;
}

.bbr-hub .bbr-block {
  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));
  overflow: hidden;
  padding: 20px 18px 18px;
  position: relative;
}

.bbr-hub .bbr-block::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;
}

.bbr-hub .bbr-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: 0 0 14px;
}

.bbr-kats,
.bbr-produkte,
.bbr-liste,
.bbr-nachbarn {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bbr-kats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bbr-kats .bbr-kat {
  align-items: baseline;
  background: var(--bb-bg-2, #f5f2e7);
  border: 1px solid var(--bb-line-2, rgba(23, 21, 14, .07));
  border-radius: 99px;
  color: var(--bb-ink, #17150e);
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
}

.bbr-kats .bbr-kat:hover,
.bbr-kats .bbr-kat:focus-visible {
  border-color: var(--bb-g-action, #147a3b);
  color: var(--bb-g-ink, #0f6b31);
}

.bbr-kat__n {
  color: var(--bb-muted-text, #756f5f);
  font-size: 13px;
  font-weight: 400;
}

.bbr-produkte {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.bbr-produkte .bbr-pk {
  border: 1px solid var(--bb-line-2, rgba(23, 21, 14, .07));
  border-radius: var(--bb-radius-sm, 9px);
  color: var(--bb-ink, #17150e);
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 10px;
  text-decoration: none;
}

.bbr-produkte .bbr-pk:hover,
.bbr-produkte .bbr-pk:focus-visible {
  border-color: var(--bb-g-action, #147a3b);
}

.bbr-pk__bild {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--bb-bg, #fdfcf7);
  border-radius: 6px;
  display: flex;
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: 28px;
  justify-content: center;
  overflow: hidden;
}

.bbr-pk__bild img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.bbr-pk__name {
  font-size: 14px;
  line-height: 1.3;
}

.bbr-pk__preis {
  font-weight: 700;
  margin-top: auto;
}

.bbr-liste {
  display: grid;
  gap: 4px;
}

.bbr-liste a,
.bbr-hub .bbr-mehr {
  color: var(--bb-g-ink, #0f6b31);
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  min-height: 44px;
  padding: 6px 0;
  text-decoration: underline;
}

.bbr-nachbarn {
  display: grid;
  gap: 8px;
}

.bbr-nachbarn a {
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-radius: var(--bb-radius-sm, 9px);
  color: var(--bb-ink, #17150e);
  display: flex;
  flex-direction: column;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 14px;
  text-decoration: none;
}

.bbr-nachbarn a:hover,
.bbr-nachbarn a:focus-visible {
  border-color: var(--bb-g-action, #147a3b);
  color: var(--bb-g-ink, #0f6b31);
}

.bbr-nachbar__welt {
  color: var(--bb-muted-text, #756f5f);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bbr-zurueck {
  margin: 0;
}

.bbr-zurueck a,
.bbr-baustein .bbr-baustein__alle {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

.bbr-zurueck a {
  color: var(--bb-g-ink, #0f6b31);
  font-weight: 700;
  padding: 10px 0;
}

/* Baustein unter Blogartikeln */
.bbr-baustein {
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-radius: var(--bb-radius, 16px);
  margin: 28px auto;
  max-width: 760px;
  overflow: hidden;
  padding: 20px 18px;
  position: relative;
}

.bbr-baustein::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;
}

.bbr-baustein__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;
}

.bbr-baustein__titel {
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.2;
  margin: 6px 0 12px;
}

.bbr-baustein__links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.bbr-baustein .bbr-baustein__cta {
  align-items: center;
  background: var(--bb-g-action, #147a3b);
  border-radius: 99px;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 20px;
  text-decoration: none;
}

.bbr-baustein .bbr-baustein__cta:hover,
.bbr-baustein .bbr-baustein__cta:focus-visible {
  background: var(--bb-g-ink, #0f6b31);
  color: #fff;
}

.bbr-baustein .bbr-baustein__alle {
  color: var(--bb-g-ink, #0f6b31);
  font-weight: 700;
  text-decoration: underline;
}

@media (min-width: 721px) {
  .bbr-hub .bbr-block {
    padding: 24px 24px 22px;
  }

  .bbr-produkte {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bbr-nachbarn {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Pillar /ratgeber: alle Hubs nach Themenwelt */
.bbr-welten {
  display: grid;
  gap: 14px;
  margin: 24px 0 32px;
}

.bbr-welt {
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-radius: var(--bb-radius, 16px);
  padding: 16px 18px;
}

.bbr-welt .bbr-welt__titel {
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.bbr-welt__hubs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bbr-welt__hubs a {
  align-items: center;
  color: var(--bb-g-ink, #0f6b31);
  display: inline-flex;
  font-weight: 700;
  min-height: 44px;
  text-decoration: underline;
}

@media (min-width: 721px) {
  .bbr-welten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}