/* ==========================================================================
   WF-Medical GmbH — Seite „Aktuelles“ (seit 18.10.2026)
   Wird NUR von aktuelles.html, en/aktuelles.html und es/aktuelles.html
   geladen. Bewusst eine eigene Datei: style.css und die Versionsnummer ?v=
   der übrigen Seiten bleiben dadurch unberührt.
   Die Beiträge selbst schreibt der Aktuelles-Editor (Ordner neben Webseite).
   Nach einer Änderung hier die Zahl in ?v= in den drei aktuelles.html erhöhen.
   ========================================================================== */

.news-wrap { width: min(100% - 2.5rem, 1020px); }

.news-post {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.4rem, .8rem + 2.4vw, 3rem);
  align-items: start;
  padding-block: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px; /* Sprung per #beitrag-… landet nicht unter dem Kopf */
}
.news-post:first-child { border-top: 0; padding-top: 0; }
.news-post:last-child { padding-bottom: 0; }
.news-post--ohne-bild { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }

.news-bild { margin: 0; }
.news-bild img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--mist);
}

.news-datum {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan-deep);
  margin: 0 0 .8rem;
}
.news-datum::before {
  content: ""; width: 22px; height: 2px; background: var(--cyan); border-radius: 2px;
}

.news-post h2 {
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  margin-bottom: .9rem;
}

/* Lange Adressen und Hashtag-Ketten aus LinkedIn duerfen umbrechen,
   sonst laufen sie auf dem Handy seitlich aus dem Bild */
.news-text { overflow-wrap: anywhere; }
.news-text p { margin-bottom: 1em; }

.news-linkedin {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.2rem;
  font-weight: 620; font-size: .95rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid rgba(20, 195, 236, .55);
}
.news-linkedin:hover { border-bottom-color: var(--cyan); }
.news-linkedin svg { width: 16px; height: 16px; flex: none; }

.news-leer {
  color: var(--muted);
  text-align: center;
  padding-block: 1.5rem;
  margin: 0;
}

@media (max-width: 760px) {
  .news-post { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .news-post { break-inside: avoid; }
}