/* Beitragsuebersicht -- Entwurf A, gewaehlt vom Auftraggeber am 2026-09-14.
 *
 * Liegt NUR auf den beiden Uebersichtsseiten (/de/neues, /en/what-s-new),
 * eingebunden von scripts/build.py. Die Einzelseiten eines Beitrags brauchen
 * nichts davon.
 *
 * DIE FORM IST UEBERNOMMEN, NICHT ERFUNDEN: Es ist die Zeilenliste, die im
 * Stilblatt der Seite schon steht -- .messedaten, .presseartikel, .newsletter.
 * Duenne Trennlinie, Abstand 25 px, Hover in Whitesmoke. Der Klassenname
 * .presseartikel lag seit dem Crawl ungenutzt im CSS und war fuer genau diese
 * Sorte Liste gedacht. Die Farben stammen aus dem Bestand: #cd1619 die
 * Hausfarbe der Ueberschriften, #b3b3b3 die Linien, #3c3c3b und #5a5a59 die
 * beiden Grautoene des Fliesstexts.
 *
 * Gemessen am Entwurf: ein Eintrag 191 px hoch, 3 von 5 ohne Scrollen
 * sichtbar, 5 je Bildschirmhoehe.
 */

/* ---- Angabenzeile und Anriss ------------------------------------------ */

.blog-meta {
  color: #5a5a59;
  font-size: 0.9em;
  margin: 0 0 0.5em;
}

/* Der Trenner zwischen Datum und Kategorie. Er steht nur da, wenn BEIDE
   Angaben vorhanden sind -- die Entscheidung faellt beim Erzeugen
   (pflege/src/erzeugen.ts, blogTeaser), nicht hier. */
.blog-meta span {
  color: #b3b3b3;
  margin: 0 0.35em;
}

/* Zwei Zeilen, dann Schluss. Der Auftraggeber wollte "zwei Zeilen Anriss";
   `line-clamp` haelt das ein, ohne dass der Text serverseitig auf eine
   Zeichenzahl gekuerzt werden muesste -- die haengt sonst von der
   Fensterbreite ab und stimmt nie.

   Die -webkit-Schreibweise steht mit dabei: Sie ist bis heute die einzige,
   die alle Browser kennen. Faellt sie irgendwann weg, greift die
   standardisierte darunter. */
.blog-anriss {
  margin: 0;
  color: #3c3c3b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Die Liste -------------------------------------------------------- */

.blogliste {
  margin: 0;
  padding: 0;
}

.blogliste li {
  padding: 25px 0;
  border-top: thin solid #b3b3b3;
  transition: all 0.5s ease;
}

.blogliste li:last-child {
  border-bottom: thin solid #b3b3b3;
}

.blogliste li:hover {
  background: whitesmoke;
}

/* Die GANZE Zeile ist der Verweis, nicht nur die Ueberschrift. Das war einer
   der vier Maengel an der alten Seite: Bild und Text wirkten wie zwei
   getrennte Bausteine. */
.blogliste li > a {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  text-decoration: none;
  color: inherit;
}

/* Wer mit der Tastatur navigiert, muss sehen, wo er steht. Ohne diese Regel
   liegt der Fokusrahmen des Browsers um einen Kasten, der die halbe Zeile
   breit ist, und verschwindet optisch im Hover-Grau. */
.blogliste li > a:focus-visible {
  outline: 2px solid #cd1619;
  outline-offset: 3px;
}

.blogliste .blog-bild {
  flex: 0 0 220px;
  width: 220px;
  height: 140px;
  overflow: hidden;
  background: #f4f4f4;
}

.blogliste .blog-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* `min-width: 0` ist nicht schmueckend: Ohne sie weigert sich ein
   Flex-Element, unter seinen Inhalt zu schrumpfen -- ein langer Titel ohne
   Leerzeichen schoebe dann das Bild aus der Zeile. */
.blogliste .blog-text {
  flex: 1 1 auto;
  min-width: 0;
}

.blogliste h3 {
  color: #cd1619;
  font-size: 1.25em;
  margin: 0 0 0.35em;
}

.blogliste li:hover h3 {
  text-decoration: underline;
}

/* ---- Schmale Geraete -------------------------------------------------- */

@media (max-width: 767px) {
  .blogliste li > a {
    flex-direction: column;
    gap: 15px;
  }

  .blogliste .blog-bild {
    flex: none;
    width: 100%;
    height: 180px;
  }
}

/* ---- Wer Bewegung abgestellt hat, bekommt keine ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .blogliste li {
    transition: none;
  }
}