/* ============================================================
   Magazin — Übersicht, Kategorie-Ansicht, Artikelseite, Section
   Pages: #magazine (/{magazin}), #magazine-article (/{magazin}/{slug});
   Section: .magazine-latest (magazine_latest). MAGAZIN-PLAN.md P2.
   ============================================================ */

/* Karten-Raster: teilt sich die Deck-Mechanik (data-card-deck) mit Team/Referenzen. */
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--gap-block);
}

/* Karte: Fläche, Hover, .body, Titel, Teaser aus .card (components/ui.css) — hier nur das Titelbild-Format. */
.magazine-card .cover { aspect-ratio: 16 / 10; }

/* Meta-Zeile (Datum · Kategorie) — Karte und Artikelkopf. */
.magazine-card .meta, .magazine-article .meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.magazine-card .meta .category, .magazine-article .meta .category { font-weight: 600; }

/* Übersicht */
#magazine .magazine-index > header { margin-block-end: var(--gap-block); }
#magazine .magazine-subline { margin: 0; color: var(--color-text-muted); }
.magazine-categories {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-block-end: var(--gap-block);
}
.magazine-categories a {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
}
.magazine-categories a[aria-current="page"] { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.magazine-categories .count { opacity: .7; font-size: var(--text-sm); }
.magazine-empty { color: var(--color-text-muted); }
#magazine .pagination { margin-block-start: var(--gap-section); }

/* Artikelseite: lesbare Zeilenlänge, Cover volle Breite der Spalte. */
.magazine-article > header { margin-block-end: var(--gap-block); }
.magazine-article > header h1 { margin-block: var(--space-2) 0; }
.magazine-article .lead { font-size: var(--text-lg); color: var(--color-text-muted); }
.magazine-article .lead > :last-child { margin-block-end: 0; }
.magazine-article .cover { margin: 0 0 var(--gap-block); }
.magazine-article .cover img { width: 100%; height: auto; border-radius: var(--radius, 0.5rem); display: block; }
/* Keine Lesebreiten-Begrenzung: der Artikel laeuft wie jede Content-Seite volle Breite (Rueckmeldung 11.09.2026 —
   72ch wirkte neben Kopf und Kurztext in voller Breite wie ein Fehler). Eine Measure setzt bei Bedarf das Overlay-CSS. */
.magazine-article .magazine-body img { max-width: 100%; height: auto; }
.magazine-related { margin-block-start: var(--gap-section); }
.magazine-related h2 { margin-block-end: var(--gap-block); }
.magazine-back { margin-block-start: var(--gap-block); }

/* Section auf Startseite/CMS: Header wie die übrigen Sections, Link zur Übersicht darunter. */
.magazine-latest .magazine-more { margin-block-start: var(--gap-block); text-align: center; }

/* --- Regional-Info auf der Ortsseite (REGIOINFO-PLAN.md R3): Region-Zeile, Orte der Region,
       Immobilien im Ort (Karten-Grid), Karte. --- */
.magazine-article .regio-parent { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.magazine-article .regio-parent svg { vertical-align: -0.2em; }
.magazine-article .regio-children,
.magazine-article .regio-objects,
.magazine-article .regio-map { margin-block-start: var(--gap-section); }
.magazine-article .regio-children h2,
.magazine-article .regio-map h2 { margin-block-end: var(--gap-block); }
.magazine-article .regio-child-count { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.magazine-article .regio-objects .hint { margin-block-start: var(--space-3); }