/* ============================================================
   BLOG-ÜBERSICHT (Welt «Wissen») — nur Seitenspezifisches
   ============================================================
   Die Seite lebt von den gemeinsamen .v4-page-Komponenten aus
   style-v4.css. Hier stehen nur die Artikelzeilen (Bild links,
   Inhalt rechts), die Mono-Meta-Zeile und Kontextabstaende.
   ============================================================ */

/* ---- Artikelliste: gestapelte Zeilenkarten ---- */
.v4-blog .v4-blog-liste {
  display: grid;
  gap: var(--v4-space-3);
  max-width: 960px;
}

/* Eine Zeilenkarte: Rand vor Schatten, Hover wie .v4-karte */
.v4-blog .v4-blog-eintrag {
  background: var(--v4-bg-page);
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-card);
  overflow: hidden;
  transition: border-color var(--v4-transition),
              transform var(--v4-transition),
              box-shadow var(--v4-transition);
}
.v4-blog .v4-blog-eintrag:hover {
  border-color: var(--v4-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 23, 38, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .v4-blog .v4-blog-eintrag:hover { transform: none; }
}

/* Mit Vorschaubild: Bild links, Inhalt rechts */
.v4-blog .v4-blog-eintrag.hat-bild {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}
.v4-blog .v4-blog-bild { display: block; }
.v4-blog .v4-blog-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v4-blog .v4-blog-text { padding: var(--v4-space-3); }

/* Meta-Zeile: Datum · Kategorie · Lesezeit in Mono (Hinweis-Aesthetik) */
.v4-blog .v4-blog-meta {
  font-family: var(--v4-font-mono);
  font-size: 13px;
  color: var(--v4-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v4-space-1);
  margin: 0 0 var(--v4-space-1);
}
.v4-blog .v4-blog-punkt { color: var(--v4-border); }

/* Titel als ruhiger Link, blau erst beim Hover */
.v4-blog .v4-blog-text h3 { font-size: 19px; }
.v4-blog .v4-blog-text h3 a {
  color: var(--v4-text-heading);
  text-decoration: none;
  transition: color var(--v4-transition);
}
.v4-blog .v4-blog-text h3 a:hover { color: var(--v4-blue); }

.v4-blog .v4-blog-teaser {
  color: var(--v4-text-secondary);
  font-size: 15.5px;
  margin-bottom: var(--v4-space-2);
}

/* ---- Responsive: unter 900px stapelt das Bild ueber den Text ---- */
@media (max-width: 900px) {
  .v4-blog .v4-blog-eintrag.hat-bild { grid-template-columns: 1fr; }
  .v4-blog .v4-blog-bild img { aspect-ratio: 600 / 315; height: auto; }
}