/* bba-artikel.css — Module der Blogartikel-Veredelung (N44-②).
   Vertrag: docs/design/zerstoerungsfreier-einbau.md — Namespace bba-,
   nur Token-READS (--bb-*), keine nackten Element-Selektoren, laedt NUR auf
   News-Detailseiten (Include in Sweet/blog/details.tpl).
   Rollback = diese Datei loeschen + die eine Include-Zeile entfernen. */

/* ---------- Seiten-Index („Auf dieser Seite") ---------- */
.bba-index {
  margin: 1.25rem 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, #e5e5e5);
  border-radius: var(--bb-radius, 8px);
}
.bba-index__label {
  display: block;
  font-family: var(--bb-font-mono, monospace);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bb-muted-text, #6b6b6b);
  margin-bottom: .5rem;
}
.bba-index__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
}
.bba-index__liste a {
  color: var(--bb-ink, #111);
  text-decoration: none;
  border-bottom: 2px solid var(--bb-y, #f5c518);
  font-size: .95rem;
}
.bba-index__liste a:hover { color: var(--bb-g-action, #1a7a3a); }

/* ---------- Produktkarten (v1: bewusst ohne Preis) ---------- */
.bba-produkte {
  display: grid;
  /* auto-fill + Kappe 280px: eine einzelne Karte wird nicht randbreit
     (Befund Bau-Agent Artikel 3, 2026-08-20). */
  grid-template-columns: repeat(auto-fill, minmax(200px, 280px));
  justify-content: flex-start;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.bba-karte {
  display: flex;
  flex-direction: column;
  background: var(--bb-surface, #fff);
  border: 1px solid var(--bb-line, #e5e5e5);
  border-radius: var(--bb-radius, 8px);
  overflow: hidden;
  text-decoration: none;
  color: var(--bb-ink, #111);
  box-shadow: var(--bb-shadow, 0 1px 3px rgba(0,0,0,.08));
  transition: transform .12s ease, box-shadow .12s ease;
}
.bba-karte:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  color: var(--bb-ink, #111);
  text-decoration: none;
}
.bba-karte__bild {
  /* 1:1 per Owner-Entscheid 2026-08-25: an 74 Bildern gemessen sind 19/20
     Grinder-Fotos QUERformat (3:4-Median-Fuellung nur 55 %); 1:1 traegt beide
     Orientierungen (Median 61 %). Feste Reservierung bleibt: kein CLS. */
  aspect-ratio: 1 / 1;
  background: var(--bb-bg-2, #f5f5f2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bba-karte__bild img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bba-karte__name {
  padding: .75rem .9rem .25rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
}
.bba-karte__cta {
  padding: 0 .9rem .8rem;
  margin-top: auto;
  font-family: var(--bb-font-mono, monospace);
  font-size: .8rem;
  color: var(--bb-g-action, #1a7a3a);
}

/* ---------- Kategoriekarte (Artikelende) ---------- */
.bba-kategoriekarte {
  display: block;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--bb-ink, #111);
  color: var(--bb-bg, #fff);
  border-radius: var(--bb-radius-lg, 12px);
  text-decoration: none;
  border-left: 6px solid var(--bb-y, #f5c518);
}
.bba-kategoriekarte:hover { color: var(--bb-bg, #fff); text-decoration: none; filter: brightness(1.08); }
.bba-kategoriekarte__label {
  display: block;
  font-family: var(--bb-font-mono, monospace);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: .25rem;
}
.bba-kategoriekarte__titel {
  font-family: var(--bb-font-disp, inherit);
  font-size: 1.35rem;
  line-height: 1.2;
}
.bba-kategoriekarte__zusatz { display: block; margin-top: .3rem; font-size: .9rem; opacity: .85; }

/* ---------- Artikelbild (16:9, reserviert) ---------- */
.bba-figur {
  margin: 1.5rem 0;
}
.bba-figur__rahmen {
  aspect-ratio: 16 / 9;              /* feste Reservierung: kein CLS */
  background: var(--bb-bg-2, #f5f5f2);
  border-radius: var(--bb-radius, 8px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bba-figur__rahmen img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bba-figur figcaption {
  font-size: .8rem;
  color: var(--bb-muted-text, #6b6b6b);
  margin-top: .4rem;
}

/* ---------- Weiterlesen (Hub + Schwesterartikel) ---------- */
.bba-verwandt {
  margin: 2rem 0 1rem;
  padding: 1rem 1.25rem;
  background: var(--bb-bg-2, #f5f5f2);
  border-radius: var(--bb-radius, 8px);
}
.bba-verwandt__label {
  display: block;
  font-family: var(--bb-font-mono, monospace);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bb-muted-text, #6b6b6b);
  margin-bottom: .5rem;
}
.bba-verwandt__liste { list-style: none; margin: 0; padding: 0; }
.bba-verwandt__liste li { margin: .3rem 0; }
.bba-verwandt__liste a {
  color: var(--bb-ink, #111);
  text-decoration: none;
  border-bottom: 2px solid var(--bb-g, #2e9e4f);
}
.bba-verwandt__liste a:hover { color: var(--bb-g-action, #1a7a3a); }

/* ---------- Vergleichstabelle ---------- */
.bba-tabelle { overflow-x: auto; margin: 1.5rem 0; }
.bba-tabelle table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bba-tabelle th, .bba-tabelle td {
  padding: .55rem .7rem;
  border: 1px solid var(--bb-line, #e5e5e5);
  text-align: left;
  vertical-align: top;
}
.bba-tabelle th {
  background: var(--bb-bg-2, #f5f5f2);
  font-family: var(--bb-font-mono, monospace);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}