/* ============================================================================
   bbg-blog.css — Blog-Übersicht (News-Hub) des BongoBong-Shops.

   Vertrag: docs/design/zerstoerungsfreier-einbau.md
     · Namespace `bbg-` — JEDER Selektor hängt an einer .bbg-Klasse.
     · Kein :root, keine nackten Element-Selektoren, keine Bootstrap-Namen.
     · `--bb-*` wird ausschließlich GELESEN. Die drei Tint-Töne des Entwurfs
       (`--g-soft/--y-soft/--r-soft`) haben live KEIN Token; sie stehen darum
       als `--bbg-*` auf dem Namespace-Knoten `.bbg-blog` und existieren
       außerhalb davon nicht.
     · Lädt NUR auf der News-Übersicht (Include in Sweet/blog/bbg_overview.tpl).
     · Rollback = diese Datei löschen + die Include-Zeile entfernen.

   ⚠ Spezifität: sweet_crit.css gewinnt Linkfarben mit `.sweet a` (0-2-0).
   Alle Regeln, die eine Elementfarbe setzen, sind deshalb als
   `.bbg-blog .bbg-…` (0-2-1) geschrieben — ein Einzelklassen-Override bliebe
   wirkungslos (Befund bb-rasta.css Kap. 11.2, dieselbe Falle).

   ⚠ Query-String beim Deploy mitziehen (langer Cache) — s. EINBAUPLAN.

   Mobile-first: Basis = eine Spalte. Alle Breakpoints sind min-width.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0 · Namespace-Wurzel + lokale Ableitungen
   ------------------------------------------------------------------------ */
.bbg-blog {
  /* Aus der Marke abgeleitete Flächentöne. Werte 1:1 aus dem Entwurf; sie
     existieren live nicht als Token, deshalb hier lokal — NICHT in :root. */
  --bbg-g-soft: #e7f3ec;
  --bbg-g-soft-2: #cfe8da;
  --bbg-y-soft: #fdf3d8;
  --bbg-y-soft-2: #f5e2ae;
  --bbg-r-soft: #fbe9e6;
  --bbg-r-soft-2: #f2cdc5;
  /* Helles Grün für Text auf dunklem Grund (Produkt-Modul). */
  --bbg-on-dark-g: #9fd8b4;

  color: var(--bb-ink, #17150e);
  font-family: var(--bb-font-body, system-ui, sans-serif);
  line-height: 1.6;
}

/* Ein sichtbarer Fokus, aber nur innerhalb der Fläche. */
.bbg-blog .bbg-fokus:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--bb-g-action, #147a3b);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   1 · Sektionsrahmen und Sektionskopf
   ------------------------------------------------------------------------ */
.bbg-sektion {
  padding: clamp(26px, 4vw, 46px) 0;
}

.bbg-sekkopf {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 22px;
}
.bbg-sekkopf__titel {
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.1;
  margin: 0;
}
.bbg-sekkopf__meta {
  color: var(--bb-muted-text, #756f5f);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .06em;
  margin-left: auto;
  white-space: nowrap;
}
.bbg-blog .bbg-sekkopf__mehr {
  color: var(--bb-g-ink, #0f6b31);
  font-size: 14px;
  font-weight: 700;
  margin-left: auto;
  text-decoration: none;
  white-space: nowrap;
}
.bbg-blog .bbg-sekkopf__mehr:hover,
.bbg-blog .bbg-sekkopf__mehr:focus-visible {
  color: var(--bb-g-action, #147a3b);
  text-decoration: underline;
}

/* Kicker („Eyebrow") — der Markenstreifen als Vorspann. */
.bbg-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;
}
.bbg-kicker::before {
  background: var(--bb-stripe, linear-gradient(90deg, #178a41 0 33.34%, #eab00e 33.34% 66.67%, #d8402c 66.67% 100%));
  border-radius: 2px;
  content: "";
  height: 3px;
  width: 22px;
}

/* ---------------------------------------------------------------------------
   2 · Buttons und Pills (eigene Klassen — KEIN .btn-Override)
   ------------------------------------------------------------------------ */
.bbg-blog .bbg-btn {
  align-items: center;
  background: var(--bb-g-action, #147a3b);
  border: 0;
  border-radius: 99px;
  box-shadow: 0 6px 18px -8px rgba(20, 122, 59, .55);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  gap: 10px;
  line-height: 1.2;
  padding: 13px 26px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bbg-blog .bbg-btn:hover,
.bbg-blog .bbg-btn:focus-visible {
  box-shadow: 0 10px 24px -8px rgba(20, 122, 59, .6);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.bbg-blog .bbg-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--bb-ink, #17150e);
  box-shadow: none;
  color: var(--bb-ink, #17150e);
}
.bbg-blog .bbg-btn--ghost:hover,
.bbg-blog .bbg-btn--ghost:focus-visible {
  background: var(--bb-ink, #17150e);
  box-shadow: none;
  color: var(--bb-bg, #fdfcf7);
}

.bbg-pill {
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-radius: 99px;
  display: inline-block;
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 5px 12px;
  white-space: nowrap;
}
.bbg-pill--gruen {
  background: var(--bbg-g-soft);
  border-color: transparent;
  color: var(--bb-g-ink, #0f6b31);
}

/* ---------------------------------------------------------------------------
   3 · Hero — der Featured-Artikel
   ------------------------------------------------------------------------ */
.bbg-hero {
  padding: clamp(20px, 4vw, 40px) 0 clamp(18px, 3vw, 32px);
}
.bbg-hero__grid {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  grid-template-columns: 1fr;
}
.bbg-hero__titel {
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: clamp(30px, 5.4vw, 62px);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.04;
  margin: 14px 0 16px;
  text-wrap: balance;
}
.bbg-blog .bbg-hero__titel a {
  color: var(--bb-ink, #17150e);
  text-decoration: none;
}
.bbg-blog .bbg-hero__titel a:hover,
.bbg-blog .bbg-hero__titel a:focus-visible {
  color: var(--bb-g-action, #147a3b);
}
.bbg-hero__dek {
  color: var(--bb-muted-text, #756f5f);
  font-size: 17px;
  margin: 0 0 22px;
  max-width: 52ch;
}
.bbg-metazeile {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.bbg-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   4 · Hero-Visual — feste Reservierung, kein CLS.
   Zwei Zustände in EINEM Rahmen: echtes Bild (kNews 1–8) oder der
   CSS-Platzhalter. Der Rahmen ist in beiden Fällen identisch groß.
   ------------------------------------------------------------------------ */
.bbg-visual {
  align-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--bb-radius-lg, 26px);
  box-shadow: var(--bb-shadow, 0 1px 2px rgba(23, 21, 14, .05), 0 16px 40px -20px rgba(23, 21, 14, .28));
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.bbg-visual--bild {
  background: var(--bb-bg-2, #f5f2e7);
}
/* ⚠ Zweiklassig: `snippets/image.tpl` hängt `img-fluid` an (Bootstrap:
   `height: auto`), und Sweet gewinnt solche Regeln als `.sweet .img-fluid`
   (0-2-0). Ein einklassiger Selektor bliebe hier wirkungslos. */
.bbg-blog .bbg-visual--bild img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.bbg-visual--platzhalter {
  background: linear-gradient(160deg, #0e5c2c 0%, var(--bb-g, #178a41) 55%, #2aa45c 100%);
}
.bbg-visual--platzhalter::after {
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px);
  background-size: 22px 22px;
  content: "";
  inset: 0;
  position: absolute;
}
.bbg-visual__tag {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, .28);
  border-radius: 99px;
  color: rgba(255, 255, 255, .95);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
  left: 18px;
  letter-spacing: .1em;
  padding: 6px 12px;
  position: absolute;
  top: 18px;
  z-index: 2;
}

/* Das Glas: reine Dekoration, aria-hidden im Markup. */
.bbg-glas {
  background: linear-gradient(to top, rgba(255, 255, 255, .28) 0 36%, rgba(255, 255, 255, .06) 36%);
  border: 5px solid rgba(255, 255, 255, .85);
  border-bottom: 0;
  border-radius: 70px 70px 26px 26px / 110px 110px 26px 26px;
  bottom: -6px;
  height: 76%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 150px;
}
.bbg-glas::before {
  border: 5px solid rgba(255, 255, 255, .85);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  content: "";
  height: 52px;
  left: -5px;
  margin: 0 auto;
  position: absolute;
  right: -5px;
  top: -46px;
  width: 56px;
}
.bbg-glas__notch {
  background: rgba(255, 255, 255, .35);
  border-radius: 50%;
  height: 14px;
  left: -12px;
  position: absolute;
  top: 40%;
  width: 14px;
}
.bbg-glas__notch--rechts {
  left: auto;
  right: -12px;
  top: 48%;
}
.bbg-blase {
  animation: bbg-steigen 4.2s infinite ease-in;
  background: rgba(255, 255, 255, .5);
  border-radius: 50%;
  bottom: 8%;
  position: absolute;
}
.bbg-blase--1 { animation-delay: 0s;   height: 10px; left: 44%; width: 10px; }
.bbg-blase--2 { animation-delay: 1.1s; height: 7px;  left: 52%; width: 7px;  }
.bbg-blase--3 { animation-delay: 2.3s; height: 12px; left: 48%; width: 12px; }
.bbg-blase--4 { animation-delay: 3.1s; height: 6px;  left: 56%; width: 6px;  }

@keyframes bbg-steigen {
  0%   { opacity: 0;  transform: translateY(0) scale(1); }
  12%  { opacity: .9; }
  100% { opacity: 0;  transform: translateY(-210px) scale(1.35); }
}

/* ---------------------------------------------------------------------------
   5 · Themenwelten-Rail (die News-Kategorien)
   ------------------------------------------------------------------------ */
.bbg-themen {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.bbg-blog .bbg-thema {
  align-items: center;
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-radius: 99px;
  color: var(--bb-ink, #17150e);
  display: flex;
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 600;
  gap: 10px;
  padding: 11px 18px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.bbg-blog .bbg-thema:hover,
.bbg-blog .bbg-thema:focus-visible {
  border-color: var(--bb-g, #178a41);
  color: var(--bb-ink, #17150e);
  text-decoration: none;
  transform: translateY(-1px);
}
.bbg-blog .bbg-thema--aktiv {
  background: var(--bbg-g-soft);
  border-color: var(--bb-g, #178a41);
}
/* Punktfarbe kommt als Modifier aus dem Template (Smarty-Iteration), NICHT
   aus nth-child: ein Wrapper zwischen Liste und Karte würde nth-child am
   Ziel vorbeischießen (Befund [[selektor-am-wrapper-vorbei]]). */
.bbg-thema__punkt {
  background: var(--bb-g, #178a41);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}
.bbg-thema__punkt--gelb { background: var(--bb-y, #eab00e); }
.bbg-thema__punkt--rot  { background: var(--bb-r, #d8402c); }
.bbg-thema__n {
  color: var(--bb-muted-text, #756f5f);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
}

/* ---------------------------------------------------------------------------
   6 · Artikel-Grid
   ------------------------------------------------------------------------ */
.bbg-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
.bbg-karte {
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-radius: var(--bb-radius, 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bbg-karte:hover {
  box-shadow: var(--bb-shadow, 0 1px 2px rgba(23, 21, 14, .05), 0 16px 40px -20px rgba(23, 21, 14, .28));
  transform: translateY(-4px);
}
/* Feste 16:9-Reservierung — identisch für echtes Bild und Platzhalter,
   damit der Wechsel (B42) kein Layout verschiebt. */
/* ⚠ Der Kopf IST ein <a> (dekorativer Zweitlink auf denselben Beitrag).
   Ohne diese Zeile zeichnet der Browser die Standard-Linkunterstreichung
   unter das Initial — am 2026-08-20 in der Vorschau gesehen, nicht vermutet. */
.bbg-blog .bbg-karte__kopf,
.bbg-blog .bbg-karte__kopf:hover,
.bbg-blog .bbg-karte__kopf:focus-visible {
  color: inherit;
  text-decoration: none;
}
.bbg-karte__kopf {
  align-items: center;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.bbg-blog .bbg-karte__kopf img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.bbg-karte__kopf--gruen { background: linear-gradient(135deg, var(--bbg-g-soft), var(--bbg-g-soft-2)); }
.bbg-karte__kopf--gelb  { background: linear-gradient(135deg, var(--bbg-y-soft), var(--bbg-y-soft-2)); }
.bbg-karte__kopf--rot   { background: linear-gradient(135deg, var(--bbg-r-soft), var(--bbg-r-soft-2)); }
.bbg-karte__kopf--bild  { background: var(--bb-bg-2, #f5f2e7); }
.bbg-karte__init {
  color: rgba(23, 21, 14, .14);
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: 84px;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.bbg-karte__datum {
  color: var(--bb-muted-text, #756f5f);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  left: 14px;
  letter-spacing: .12em;
  position: absolute;
  top: 12px;
}
.bbg-karte__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
}
.bbg-karte__titel {
  font-family: inherit;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
.bbg-blog .bbg-karte__titel a {
  color: var(--bb-ink, #17150e);
  text-decoration: none;
}
.bbg-blog .bbg-karte__titel a:hover,
.bbg-blog .bbg-karte__titel a:focus-visible {
  color: var(--bb-g-action, #147a3b);
}
.bbg-karte__dek {
  color: var(--bb-muted-text, #756f5f);
  font-size: 14.5px;
  margin: 0;
}
.bbg-karte__fuss {
  color: var(--bb-muted-text, #756f5f);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
  gap: 6px;
  letter-spacing: .06em;
  margin-top: auto;
}

/* ---------------------------------------------------------------------------
   7 · Produkt-Modul — das dunkle Band im Grid
   ------------------------------------------------------------------------ */
.bbg-pm {
  background: var(--bb-ink, #17150e);
  border-radius: var(--bb-radius-lg, 26px);
  color: var(--bb-bg, #fdfcf7);
  grid-column: 1 / -1;
  overflow: hidden;
  padding: clamp(22px, 3.5vw, 36px);
  position: relative;
}
.bbg-pm::before {
  background: var(--bb-stripe, linear-gradient(90deg, #178a41 0 33.34%, #eab00e 33.34% 66.67%, #d8402c 66.67% 100%));
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.bbg-pm__kopf {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 20px;
}
.bbg-pm__titel {
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}
.bbg-pm__sub {
  color: var(--bb-y, #eab00e);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bbg-pm__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.bbg-blog .bbg-pk {
  background: rgba(253, 252, 247, .06);
  border: 1px solid rgba(253, 252, 247, .14);
  border-radius: var(--bb-radius, 16px);
  color: var(--bb-bg, #fdfcf7);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.bbg-blog .bbg-pk:hover,
.bbg-blog .bbg-pk:focus-visible {
  background: rgba(253, 252, 247, .11);
  color: var(--bb-bg, #fdfcf7);
  text-decoration: none;
  transform: translateY(-2px);
}
.bbg-pk__bild {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, rgba(23, 138, 65, .5), rgba(23, 138, 65, .12));
  border-radius: var(--bb-radius-sm, 9px);
  color: rgba(253, 252, 247, .25);
  display: flex;
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: 40px;
  justify-content: center;
  overflow: hidden;
}
.bbg-pk__bild img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.bbg-pk__bild--gelb { background: linear-gradient(150deg, rgba(234, 176, 14, .45), rgba(234, 176, 14, .1)); }
.bbg-pk__bild--rot  { background: linear-gradient(150deg, rgba(216, 64, 44, .4), rgba(216, 64, 44, .1)); }
.bbg-pk__name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.bbg-pk__preiszeile {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: auto;
}
.bbg-pk__preis {
  color: var(--bb-y, #eab00e);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 17px;
  font-weight: 700;
}
.bbg-pk__zum {
  color: var(--bbg-on-dark-g);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.bbg-blog .bbg-pk:hover .bbg-pk__zum { text-decoration: underline; }

.bbg-pm__kat {
  align-items: center;
  border: 1.5px dashed rgba(253, 252, 247, .3);
  border-radius: var(--bb-radius, 16px);
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
  gap: 10px 14px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 14px 18px;
}
.bbg-pm__kat-n {
  color: var(--bb-y, #eab00e);
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 12px;
}
.bbg-blog .bbg-pm__kat-link {
  color: var(--bbg-on-dark-g);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.bbg-blog .bbg-pm__kat-link:hover,
.bbg-blog .bbg-pm__kat-link:focus-visible {
  color: var(--bbg-on-dark-g);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   8 · Ratgeber-Band
   ------------------------------------------------------------------------ */
/* Im Entwurf lief dieses Band randlos über den Viewport, der Inhalt saß im
   `.wrap`. Innerhalb des JTL-{container} gäbe es dafür nur negative Ränder —
   und die sind die klassische Quelle für waagerechtes Überlaufen. Statt
   dessen bekommt das Band einen eigenen Innenabstand: es liest sich als
   abgesetzte Fläche, ohne die Seitenbreite anzufassen. */
.bbg-hubband {
  background: var(--bb-surface, #fff);
  border-bottom: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-top: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  margin-top: clamp(24px, 4vw, 44px);
  padding: clamp(26px, 4vw, 46px) clamp(14px, 3vw, 28px);
}
.bbg-hubgrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.bbg-blog .bbg-hub {
  background: var(--bb-bg, #fdfcf7);
  border: 1px solid var(--bb-line, rgba(23, 21, 14, .14));
  border-radius: var(--bb-radius-sm, 9px);
  color: var(--bb-ink, #17150e);
  display: block;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 14px;
  text-align: center;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.bbg-blog .bbg-hub:hover,
.bbg-blog .bbg-hub:focus-visible {
  background: var(--bbg-g-soft);
  border-color: var(--bb-g, #178a41);
  color: var(--bb-ink, #17150e);
  text-decoration: none;
}
.bbg-hub__sub {
  color: var(--bb-muted-text, #756f5f);
  display: block;
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  margin-top: 3px;
}

/* ---------------------------------------------------------------------------
   9 · Newsletter-Band („Bleib im Loop.")
   ------------------------------------------------------------------------ */
.bbg-loop {
  align-items: center;
  background: linear-gradient(135deg, var(--bbg-y-soft), #fff8e6);
  border: 1px solid rgba(234, 176, 14, .3);
  border-radius: var(--bb-radius-lg, 26px);
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  padding: clamp(26px, 4vw, 44px);
}
.bbg-loop__titel {
  font-family: var(--bb-font-disp, system-ui, sans-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 8px;
}
.bbg-loop__text {
  color: var(--bb-muted-text, #756f5f);
  margin: 0;
  max-width: 46ch;
}
.bbg-loop__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   10 · Breakpoints (min-width, mobile-first)
   ------------------------------------------------------------------------ */
@media (min-width: 576px) {
  .bbg-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .bbg-pm__grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

@media (min-width: 721px) {
  .bbg-loop { gap: 28px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .bbg-loop__aktion { justify-content: flex-end; }
}

@media (min-width: 861px) {
  .bbg-hero__grid {
    align-items: stretch;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .bbg-visual { aspect-ratio: auto; min-height: 340px; }
}

/* ---------------------------------------------------------------------------
   11 · Bewegungsreduktion — nur innerhalb der Fläche.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bbg-blase,
  .bbg-blog .bbg-btn,
  .bbg-blog .bbg-thema,
  .bbg-blog .bbg-pk,
  .bbg-blog .bbg-hub,
  .bbg-karte {
    animation: none !important;
    transition: none !important;
  }
}