/* Artikel-Vorschaubilder in den Listen (Startseite, Kategorien, Themen).
   Barrierefrei: das Bild ist rein dekorativ (alt=""), liegt NEBEN dem Textblock
   (Titel-Link + Meta + Einleitung) und ist kein eigener Link, um doppelte
   Linktexte / verschachtelte Links zu vermeiden. Feste width/height im Markup
   (echte Ausgabemaße) verhindern Layout-Spruenge (CLS=0).

   Hinweis Spezifitaet: die Bild-Regeln nutzen bewusst ".artikel-item .artikel-thumb"
   (0,0,2,0), damit sie die responsive Bestandsregel "div.text img{width:80%}"
   (0,0,1,2) aus layout_css schlagen. */

.artikel-liste { width: 100%; }

.artikel-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0.6em 0;
}

.artikel-item .artikel-thumb {
  flex: 0 0 auto;
  width: var(--tn-w, 96px);
  height: auto;
  border-radius: var(--tn-radius, 4px);
  background: #eef1f4;
}

.artikel-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Bildposition rechts / oben (Standard: links) */
.pos-rechts .artikel-item { flex-direction: row-reverse; }
.pos-oben .artikel-item { flex-direction: column; align-items: flex-start; }

/* Kleine Displays: Vorschau etwas kompakter (~75 % der Anzeigebreite) */
@media (max-width: 480px) {
  .artikel-item .artikel-thumb { width: calc(var(--tn-w, 96px) * 0.75); }
}

/* Dunkelmodus-neutraler Platzhalterhintergrund */
@media (prefers-color-scheme: dark) {
  .artikel-item .artikel-thumb { background: #2a2f36; }
}