/* ============================================================
   Blog-Übersicht: Kategorie-Filter
   Eigene Datei, damit style.css unangetastet bleibt.
   ============================================================ */

/* Die Chips sind jetzt Schalter: Grundoptik kommt aus style.css,
   hier nur der Button-Reset und der aktive Zustand */
.kategorie-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
}

.kategorie-chip.is-aktiv {
  background-color: var(--marke);
  color: var(--hell-1);
}

/* Ausgefilterte Karten wirklich ausblenden: das display:flex der Karte
   überstimmt sonst die [hidden]-Regel des Browsers */
.beitrag-karte[hidden] {
  display: none;
}

/* Hinweis, wenn eine Kategorie noch keine Beiträge hat */
.blog-filter-leer {
  margin-top: var(--space-24);
}

/* Autorenbilder auf den Blog-Seiten sind rund - bewusste Ausnahme vom
   Corner-Radius 0 des Design-Systems */
.beitrag-karte__avatar {
  border-radius: 50%;
}

/* Mobil zeigt die Mosaik-Kachel das Banner vollständig: 16:9 wie die
   Beitragsbilder statt 3:2. Nur unterhalb des Mosaik-Umbruchs, am Desktop
   bestimmt weiterhin die Rasterzeile die Kachelhöhe. */
@media (max-width: 47.9375rem) {
  .beitrag-kachel {
    aspect-ratio: 16 / 9;
  }
}