/* ---------------------------------------------------------------------------
   Reiter "Aktuelles": Uebersicht (Teaser-Karten) und einzelner Artikel.

   Nur auf diesen beiden Seiten geladen (siehe kopf_zusatz in den Vorlagen) -
   keine unnoetige CSS-Last auf der Startseite. Nutzt ausschliesslich die
   Tokens aus tokens.css, dieselben wie im Rest der Webseite.
--------------------------------------------------------------------------- */

.aktuelles-uebersicht,
.artikelseite {
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding: var(--sektionsabstand-klein) var(--seitenrand) var(--sektionsabstand);
}

.aktuelles-uebersicht__kopf {
  margin-bottom: var(--abstand-2xl);
}

.aktuelles-uebersicht__titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-titel-2);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
}

.aktuelles-uebersicht__leer {
  color: var(--text-gedaempft);
}

/* --- Teaser-Karten --- */
.artikelkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--abstand-l);
}

.artikelkarte__verweis {
  display: block;
  color: inherit;
  text-decoration: none;
}

.artikelkarte__bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--grund-abgesetzt);
}

.artikelkarte__text {
  padding-top: var(--abstand-s);
}

.artikelkarte__datum {
  display: block;
  margin-bottom: var(--abstand-3xs);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

.artikelkarte__titel {
  margin: 0 0 var(--abstand-2xs);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  font-weight: var(--staerke-normal);
  line-height: var(--zeilenhoehe-titel);
}

.artikelkarte__verweis:hover .artikelkarte__titel,
.artikelkarte__verweis:focus-visible .artikelkarte__titel {
  color: var(--akzent-primaer);
}

.artikelkarte__teaser {
  margin: 0;
  color: var(--text-gedaempft);
  line-height: var(--zeilenhoehe-fliesstext);
}

/* --- Einzelner Artikel --- */
.artikelseite {
  max-width: var(--breite-lesetext);
}

.artikeltext__zurueck {
  font-size: var(--groesse-klein);
  color: var(--text-gedaempft);
}

.artikeltext__datum {
  display: block;
  margin: var(--abstand-m) 0 var(--abstand-2xs);
  font-size: var(--groesse-label);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

.artikeltext__titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-titel-3);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
  hyphens: auto;
  overflow-wrap: break-word;
}

.artikeltext__lead {
  margin: var(--abstand-s) 0 0;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-fliesstext);
  color: var(--text-gedaempft);
}

/* Titelbild immer im Querformat, damit auch ein Hochformat-Foto auf dem
   Smartphone nicht den ganzen Bildschirm fuellt. */
.artikeltext__titelbild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: var(--abstand-l) 0;
  background-color: var(--grund-abgesetzt);
}

/* Fliesstext aus dem sanitierten Editor-HTML: enge Whitelist an Tags
   (siehe aktuelles.py in Mahadevi/App), deshalb reichen wenige Regeln. */
.artikeltext__inhalt {
  font-size: var(--groesse-fliesstext);
  line-height: var(--zeilenhoehe-fliesstext);
  overflow-wrap: break-word;
}

/* Umflossene Bilder duerfen nicht aus dem Artikel herausragen */
.artikeltext__inhalt::after {
  content: "";
  display: block;
  clear: both;
}

.artikeltext__inhalt p {
  margin: 0 0 var(--abstand-s);
}

.artikeltext__inhalt h2,
.artikeltext__inhalt h3,
.artikeltext__inhalt blockquote {
  clear: both;
}

.artikeltext__inhalt h2 {
  margin: var(--abstand-xl) 0 var(--abstand-s);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-titel-4);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
}

.artikeltext__inhalt h3 {
  margin: var(--abstand-l) 0 var(--abstand-xs);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  font-weight: var(--staerke-normal);
}

/* flow-root: Aufzaehlungspunkte laufen nicht in ein links umflossenes Bild */
.artikeltext__inhalt ul,
.artikeltext__inhalt ol {
  display: flow-root;
  margin: 0 0 var(--abstand-s);
  padding-left: var(--abstand-m);
}

.artikeltext__inhalt li {
  margin-bottom: var(--abstand-3xs);
}

.artikeltext__inhalt blockquote {
  margin: var(--abstand-l) 0;
  padding-left: var(--abstand-s);
  border-left: var(--rahmen-stark) solid var(--akzent-sekundaer);
  color: var(--text-gedaempft);
  font-style: italic;
}

.artikeltext__inhalt img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--abstand-l) 0;
}

/* Bilder mit Bildunterschrift aus dem Editor. Position: bild-breit (Standard),
   bild-links, bild-rechts - neben dem Text erst ab Tablet-Breite, auf dem
   Smartphone immer in ganzer Breite. */
.artikeltext__inhalt figure {
  margin: var(--abstand-l) 0;
}

.artikeltext__inhalt figure img {
  margin: 0;
}

.artikeltext__inhalt figcaption {
  margin-top: var(--abstand-2xs);
  font-size: var(--groesse-klein);
  line-height: var(--zeilenhoehe-fliesstext);
  color: var(--text-gedaempft);
}

@media (min-width: 48rem) {
  .artikeltext__inhalt .bild-links,
  .artikeltext__inhalt .bild-rechts {
    width: 45%;
    margin-top: var(--abstand-3xs);
    margin-bottom: var(--abstand-s);
  }

  .artikeltext__inhalt .bild-links {
    float: left;
    margin-right: var(--abstand-l);
  }

  .artikeltext__inhalt .bild-rechts {
    float: right;
    margin-left: var(--abstand-l);
  }
}

.artikeltext__inhalt a {
  color: var(--akzent-primaer);
}