/*
 * archive.css — die News-Liste (Arbeitsschritt 10).
 *
 * Gemessen am Bestand: migration/bestand/seiten/news-media_news-events.html (Abruf
 * 2026-08-25) und die Regeln zu `.news-list-view` in assets/merged.css.
 *
 * Warum das hier steht und nicht in einem Divi-Preset: das Archiv ist ein
 * Theme-Builder-Template mit eigenem HTML (template-parts/archive.php). Dort gibt es kein
 * Divi-Modul, das ein Preset tragen könnte — dieselbe Lage wie bei Kopf, Fuß und Beitrag,
 * ausführlich begründet in sections.css und in E1 des Plans.
 *
 * Das Kopfband steht nicht hier, sondern als `.wi-hero` in sections.css: Beitrag, Archiv und
 * 404-Seite tragen dasselbe Band.
 *
 * Die Breakpoints stehen als Zahl in den @media-Regeln, nicht als Token: CSS löst Custom
 * Properties in Medienabfragen nicht auf, der Verweis wäre wirkungslos und niemand merkte es.
 */

/* ------------------------------------------------------------------ *
 * Der Listenbereich
 * ------------------------------------------------------------------ */

/*
 * Grauer Grund, weiße Kacheln darauf. Der Bestand setzt den Grauwert als Inline-Stil an der
 * Sektion (`background-color:#e3e3e3`) — hier kommt er über `.wi-section--muted` aus der
 * Palette (`#e2e2e2`). Der Unterschied von einem Punkt je Kanal ist der Rest einer
 * redaktionell gesetzten Farbe; übernommen wird der Palettenwert, sonst stünde eine zweite
 * Grauabstufung im Projekt, die niemand pflegt.
 */
.wi-archive {
  padding-block: var(--wi-archive-padding-block);
}

.wi-archive .wi-archive__title {
  margin-top: 0;
  margin-bottom: var(--wi-archive-title-space);
}

.wi-archive__empty {
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * Kopfzeile und Filterleiste (E13)
 * ------------------------------------------------------------------ */

/*
 * Überschrift links, Filterleiste rechts, beide auf einer Zeile. Bricht die Leiste um, rutscht
 * sie unter die Überschrift — dafür braucht es keine eigene Schwelle, `flex-wrap` erledigt es
 * an der Breite, an der es tatsächlich eng wird. Eine Medienabfrage stünde an einem geratenen
 * Punkt und ginge bei jeder längeren Kategoriebezeichnung daneben.
 */
.wi-archive__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--wi-head-gap);
}

/*
 * Der Bestand zieht seine Reiterleiste mit `margin-top: -10px` neben die Überschriftenzeile;
 * der untere Wert (30px) trägt erst, wenn sie umgebrochen ist — steht sie in der Zeile,
 * bestimmt der größere Abstand der Überschrift die Höhe.
 */
.wi-archive__filters {
  margin: var(--wi-filter-lift) 0 var(--wi-filter-space) auto;
}

/*
 * Der Selektor trägt `.wi-archive` mit — dieselbe Divi-Regel wie bei der Blätterung:
 *
 *   #left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul
 *   { list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px }
 *
 * Sie ist um eine Stufe spezifischer als eine einzelne Klasse. Es ist das vierte Auftreten
 * derselben Vorgabe (Kopf, Fuß, Blätterung, hier).
 */
.wi-archive .wi-archive__filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: var(--wi-filter-gap);
  row-gap: var(--wi-filter-gap-wrap);
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.wi-archive .wi-archive__filter-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Dieselbe Form wie die Blätterung: 2px-Rahmen, eckig, Versalien. Beide sind der Button des
 * Bestands, und beide sagen dasselbe — wo man gerade steht.
 */
.wi-filter {
  display: inline-block;
  padding: var(--wi-filter-padding);
  font-size: var(--wi-filter-size);
  font-weight: var(--wi-font-weight-semibold);
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wi-color-ink);
  background-color: transparent;
  border: var(--wi-border-width-button) solid var(--wi-color-ink);
  border-radius: var(--wi-radius);
}

/*
 * Der aktive Filter ist invertiert — weiß auf `#707070`, 5,2 : 1. Der Bestand färbt seinen
 * aktiven Reiter `#f2a030` auf Weiß mit weißem Rahmen: Kontrast 2,0 : 1 und damit die
 * schlechtest lesbare Stelle der Seite. Übernommen wird stattdessen die Invertierung, die der
 * Bestand an seinem eigenen Button verwendet (E13) — dieselbe, die die aktuelle Seitenzahl
 * trägt.
 */
.wi-filter:hover,
.wi-filter:focus,
.wi-filter--current {
  color: var(--wi-color-surface);
  background-color: var(--wi-color-ink);
  text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Das Raster
 * ------------------------------------------------------------------ */

/*
 * Drei Kacheln je Reihe. Der Bestand baut sie mit Flexbox aus `flex: 0 0 33.33%`, 15px
 * Polster je Seite und einem negativen Rand am Behälter, der die äußeren Polster wieder
 * aufhebt — zusammen eine Rinne von 30px. Ein Grid mit `gap` kommt zum selben Ergebnis, ohne
 * den Rand-Trick, und hält die Kacheln einer Reihe zusätzlich auf gleicher Höhe.
 */
.wi-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wi-card-gap);
}

/* ------------------------------------------------------------------ *
 * Die Kachel
 * ------------------------------------------------------------------ */

.wi-card {
  /* Bezugsrahmen für die Klickfläche des Titel-Links (unten). */
  position: relative;
  display: flex;
  flex-direction: column;
}

/*
 * Der Bildbereich. `aspect-ratio` ist die eine bewusste Abweichung vom Bestand (E12): dort
 * steht `width:100%; height:auto`, jedes Bild behält seine eigene Höhe, und die Textblöcke
 * einer Reihe beginnen deshalb auf verschiedenen Höhen. Das ist keine Gestaltung, sondern
 * eine Folge ungeschnittener Ausgabe.
 *
 * Der dunkle Grund liegt darunter, damit eine Kachel ohne Beitragsbild dieselbe Fläche
 * einnimmt statt in sich zusammenzufallen.
 */
.wi-card__media {
  position: relative;
  aspect-ratio: var(--wi-card-ratio);
  overflow: hidden;
  background-color: var(--wi-color-ink);
}

.wi-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Das Label sitzt in der oberen linken Ecke des Bildes, bündig mit dessen Kante — gemessen:
 * `position:absolute; left:0; top:0`.
 *
 * `.wi-label--card` ist die zweite Fassung des Labels aus sections.css: kleiner (14px statt
 * 16px), leichter (500 statt 700), in Versalien und im helleren Orange. Der Bestand führt
 * beide Fassungen nebeneinander — die Listenfassung hier, die Detailfassung am Beitrag.
 */
.wi-label--card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-size: var(--wi-card-label-size);
  line-height: normal;
  font-weight: var(--wi-card-label-weight);
  text-transform: uppercase;
  padding: var(--wi-card-label-padding);
  background-color: var(--wi-color-accent-hover);
}

/*
 * Mehr als eine Kategorie (E14). Sichtbar bleibt die erste, dahinter die Zahl aller; die
 * übrigen liegen als eigene Zeilen darunter und sind zugeklappt, bis die Kachel angesteuert
 * wird.
 *
 * Ausgelöst wird das an `.wi-card` und nicht am Label: über dem Label liegt die Klickfläche
 * des Titel-Links (`.wi-card__title a::after`, z-index 2), das Label ist für den Zeiger gar
 * nicht erreichbar — und das soll es bleiben, sonst risse es ein Loch in die Klickfläche.
 * `:focus-within` nimmt die Tastatur mit: der Titel-Link liegt in der Kachel.
 *
 * **Jede Zeile trägt ihren eigenen Grund, die Hülle ist durchsichtig.** Das ist keine
 * Geschmacksfrage: die Hülle steht absolut und nimmt damit die Breite ihres breitesten Kindes
 * an — auch die eines zugeklappten. Mit dem Grund an der Hülle war das orange Feld auf
 * `/category/rri/` so breit wie das verborgene „LIFE project" und damit sichtbar breiter als
 * das „RRI (2)" darin. Im Bild aufgefallen, nicht im Quelltext.
 */
.wi-label--multi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--wi-card-label-more-space);
  padding: 0;
  background-color: transparent;
}

.wi-label--multi > span {
  display: block;
  padding: var(--wi-card-label-padding);
  background-color: var(--wi-color-accent-hover);
}

/*
 * `max-height` statt `display`, weil sich nur ein Wert überblenden lässt; die Obergrenze steht
 * als Token. Das senkrechte Polster fährt mit — es zählt nicht zur `max-height` und stünde
 * sonst als orange Kante unter dem Label.
 */
.wi-label--multi .wi-label__more {
  max-height: 0;
  padding-block: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 200ms ease,
    padding-block 200ms ease,
    opacity 200ms ease;
}

.wi-card:hover .wi-label--multi .wi-label__more,
.wi-card:focus-within .wi-label--multi .wi-label__more {
  max-height: var(--wi-card-label-more-max);
  padding-block: var(--wi-card-label-padding-top) var(--wi-card-label-padding-bottom);
  opacity: 1;
}

/* Wer Bewegung abbestellt hat, bekommt denselben Zustand ohne Blende — dieselbe Regel wie
 * bei der Schaltfläche „Nach oben" (E11). */
@media (prefers-reduced-motion: reduce) {
  .wi-label--multi .wi-label__more {
    transition: none;
  }
}

/* Weißer Grund unter dem Bild — der Bestand setzt ihn an `.text`, damit die Kachel sich vom
 * grauen Sektionsgrund abhebt. */
.wi-card__body {
  flex: 1 1 auto;
  background-color: var(--wi-color-surface);
  padding: var(--wi-card-body-padding);
}

.wi-card__date {
  display: block;
  font-size: var(--wi-card-date-size);
  line-height: var(--wi-card-date-line-height);
  font-weight: var(--wi-font-weight-regular);
  color: var(--wi-color-ink);
}

/*
 * Der Titel ist im Bestand ein h3 mit `margin:0; padding:0`. Hier ist es ein h2 — in der
 * Liste ist es die zweite Ebene unter der Seitenüberschrift, und eine übersprungene Ebene
 * ist für Vorlesesoftware eine Lücke. Die Größe kommt aus dem Bestand, nicht aus der Ebene.
 *
 * Zwei Klassen im Selektor, damit die Regel `.wi-section--light h2` aus sections.css
 * (Klasse plus Element) nicht gewinnt — dieselbe Falle wie bei der H1 des Beitrags.
 */
.wi-card .wi-card__title {
  margin: 0;
  padding: 0;
  font-size: var(--wi-card-title-size);
  line-height: var(--wi-card-title-line-height);
  font-weight: var(--wi-font-weight-medium);
  text-transform: none;
}

.wi-card__title a {
  color: var(--wi-color-accent-hover);
  text-decoration: none;
}

.wi-card__title a:hover,
.wi-card__title a:focus {
  color: var(--wi-color-accent);
  text-decoration: underline;
}

/*
 * Die ganze Kachel ist klickbar, aber nur der Titel ist der Link. Der Bestand legt je ein
 * <a> um Bild und Titel; für Vorlesesoftware ist das derselbe Weg zweimal. Diese Fläche
 * erledigt dasselbe mit einem Link.
 *
 * Sie liegt über dem Label (z-index 1) — das Label ist keine Schaltfläche, es soll nichts
 * abfangen.
 */
.wi-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ------------------------------------------------------------------ *
 * Blätterung
 * ------------------------------------------------------------------ */

/*
 * Der Bestand gestaltet die Blätterung nicht: sie steht dort im Bootstrap-Grundzustand, blau
 * auf weiß mit gerundeten Ecken (`#428bca`, `border-radius:4px`) — die einzige Stelle der
 * Seite, an der Bootstrap-Blau sichtbar wird. Das ist eine Altlast und kein Markenmerkmal
 * (E12). Übernommen wird stattdessen die Form des Bestands-Buttons: 2px-Rahmen, eckig,
 * Versalien, Hover invertiert.
 */
.wi-pagination {
  margin-top: var(--wi-pagination-space);
}

.wi-pagination__status {
  margin: 0 0 var(--wi-pagination-status-space) 0;
  font-size: var(--wi-card-date-size);
  color: var(--wi-color-ink);
}

/*
 * Der Selektor trägt `.wi-archive` mit, obwohl `.wi-pagination__list` allein eindeutig wäre.
 * Grund ist eine Divi-Regel, die in jedem Theme-Builder-Layout greift:
 *
 *   #left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul
 *   { list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px }
 *
 * Sie ist um eine Stufe spezifischer als eine einzelne Klasse. Dieselbe Stelle wie im Kopf
 * (header.css) und im Fuß (footer.css); hier ist sie an einem Punkt links vor der ersten
 * Seitenzahl und einem weiteren vor „Next" sichtbar geworden — die übrigen lagen hinter den
 * Kästen der Nachbarn.
 */
.wi-archive .wi-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wi-pagination-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.wi-archive .wi-pagination__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Der Selektor fasst beides: <a> für erreichbare Seiten, <span> für die aktuelle und für die
 * Auslassungspunkte. Beide sollen dieselbe Fläche einnehmen, sonst springt die Reihe. */
.wi-pagination__item .page-numbers {
  display: inline-block;
  min-width: var(--wi-pagination-min-width);
  padding: var(--wi-pagination-padding);
  font-size: var(--wi-pagination-size);
  font-weight: var(--wi-font-weight-semibold);
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wi-color-ink);
  background-color: transparent;
  border: var(--wi-border-width-button) solid var(--wi-color-ink);
  border-radius: var(--wi-radius);
}

.wi-pagination__item a.page-numbers:hover,
.wi-pagination__item a.page-numbers:focus,
.wi-pagination__item .page-numbers.current {
  color: var(--wi-color-surface);
  background-color: var(--wi-color-ink);
  text-decoration: none;
}

/* Die Auslassungspunkte sind keine Schaltfläche und bekommen deshalb keinen Rahmen. */
.wi-pagination__item .page-numbers.dots {
  border-color: transparent;
  min-width: 0;
}

/* ------------------------------------------------------------------ *
 * Breiten
 * ------------------------------------------------------------------ */

/* 1600px: der Bestand nimmt den Kacheltitel von 22px auf 18px zurück. */
@media only screen and (max-width: 1600px) {
  .wi-card .wi-card__title {
    font-size: var(--wi-card-title-size-medium);
    line-height: var(--wi-card-title-line-height-medium);
  }
}

/* 1100px: der zweite Rückgang des Kacheltitels, dazu die halbierten Polster des Bereichs —
 * derselbe Wert und dieselbe Stelle wie beim Beitrag. */
@media only screen and (max-width: 1100px) {
  .wi-archive {
    padding-block: var(--wi-archive-padding-block-narrow);
  }

  .wi-card .wi-card__title {
    font-size: var(--wi-card-title-size-narrow);
    line-height: var(--wi-card-title-line-height-narrow);
  }
}

/*
 * 991px: die Überschrift geht zurück. Größe und Zeilenhöhe stehen seit E11 in base.css am
 * Typselektor — also wieder in EINER Regel für alle Vorlagen, so wie der Bestand es führt
 * (`… section h1, … section h2 { font-size:30px; line-height:35px; margin-bottom:20px }`).
 * Hier bleibt nur der Abstand, weil die Überschrift oben ihren eigenen trägt.
 */
@media only screen and (max-width: 991px) {
  .wi-archive .wi-archive__title {
    margin-bottom: var(--wi-space-heading-narrow);
  }
}

/*
 * 768px: einspaltig. Der Bestand geht hier direkt von drei Spalten auf eine und begrenzt die
 * Kachel dabei auf 350px, mittig gesetzt — ohne Zwischenstufe mit zwei Spalten. Übernommen
 * wie gemessen; ob eine zweispaltige Stufe dazwischen gehört, ist eine Frage des
 * Sichtvergleichs und steht in Schritt 12.
 */
@media only screen and (max-width: 768px) {
  .wi-archive__grid {
    grid-template-columns: 1fr;
    justify-content: center;
    gap: var(--wi-card-gap-narrow);
  }

  .wi-card {
    width: 100%;
    max-width: var(--wi-card-max-width);
    margin-inline: auto;
  }
}