/* News: Teaser-Karten und Artikelansicht. */
.news-bereich {
    margin-top: var(--abstand-xl);
}

.news-raster {
    display: grid;
    gap: var(--abstand-m);
    margin-bottom: var(--abstand-l);
}

.news-karte {
    background: var(--farbe-weiss);
    border-left: 4px solid var(--farbe-gruen);
    border-radius: var(--radius);
    padding: var(--abstand-m) var(--abstand-l);
}

.news-karte p:last-child {
    margin-bottom: 0;
}

.news-karte__titel {
    font-size: var(--schriftgroesse-gross);
    margin-bottom: var(--abstand-s);
}

.news-karte__titel a {
    text-decoration: none;
}

.news-karte__titel a:hover {
    text-decoration: underline;
}

.news-karte__untertitel,
.news-artikel__untertitel {
    color: var(--farbe-text-leise);
    font-weight: 600;
}

.news-meta {
    color: var(--farbe-text-leise);
    font-size: calc(0.9 * var(--schriftgroesse-basis));
    margin-bottom: var(--abstand-xs);
}

.news-artikel {
    background: var(--farbe-weiss);
    border-radius: var(--radius);
    padding: var(--abstand-l);
    max-width: 48rem;
}

/* Inhalt stammt aus dem alten System: Bilder und alte Ausrichtungs-Attribute bändigen. */
.news-inhalt {
    overflow-wrap: anywhere;
    margin-bottom: var(--abstand-l);
}

.news-inhalt img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--abstand-m) auto;
    border: 0;
    border-radius: var(--radius);
    float: none;
}

.news-inhalt [align] {
    text-align: left;
}

.news-inhalt p[align="center"] {
    text-align: center;
}

/* Alle Karten so hoch wie die höchste (gleich hohe Zeilen) */
.news-raster--gleich-hoch {
    grid-auto-rows: 1fr;
}

@media (min-width: 48em) {
    .news-raster {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }

    .news-artikel {
        padding: var(--abstand-xl);
    }
}

/* Jahresleiste im News-Archiv: unter den Artikeln, gleich große Knöpfe in gleich vollen Zeilen.
   Die Spaltenzahl setzt das Template (--jahre-je-zeile: zwei Zeilen, --jahre-je-zeile-schmal: vier Zeilen auf dem Handy). */
.jahresleiste {
    margin-top: var(--abstand-xl);
}

.jahresleiste__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--jahre-je-zeile-schmal, 5), 1fr);
    gap: var(--abstand-s);
}

.jahresleiste__jahr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: var(--abstand-s) var(--abstand-xs);
    border: 2px solid var(--farbe-gruen-dunkel);
    border-radius: var(--radius);
    background: var(--farbe-weiss);
    font-weight: 600;
    text-decoration: none;
}

.jahresleiste__jahr:hover {
    background: var(--farbe-gruen-hell);
}

.jahresleiste__jahr[aria-current="page"] {
    background: var(--farbe-gruen-dunkel);
    color: var(--farbe-weiss);
}

@media (min-width: 40em) {
    .jahresleiste__liste {
        grid-template-columns: repeat(var(--jahre-je-zeile, 10), 1fr);
    }
}