/* ============================================================
Page Type: Archive
Listenansicht redaktioneller Beitraege (Magazin-Index).
Aktivierung:
1. CSS einbinden:
2. Klasse setzen:
Struktur:
Seiten-Titel mit Eyebrow und Beschreibung
Liste der Beitraege als Artikel-Karten
Designprinzip: Contextual Styling
Das Markup bleibt reines, semantisches HTML – keine
Dekorator-Klassen fuer Absatzformate. Eyebrow-Styles
werden ueber strukturelle Selektoren vergeben.
Utility-Klassen stehen als bewusste Ausnahme bereit,
sind aber nicht der Standard.
============================================================ */
/* ---- Layout ---- */
/* Seite auf Lesemass begrenzt, mittig ausgerichtet */
.page-type-archive main {
max-width: calc(var(--measure-reading) + var(--page-margin-left) + var(--page-margin-right));
padding-block: var(--space-9) var(--space-13);
padding-inline: var(--page-margin-left) var(--page-margin-right);
}
/* Mobil: Karten-Grid wird einspalt, Karten-Padding reduziert */
@media (max-width: 660px) {
.page-type-archive main > ul article a {
grid-template-columns: 1fr;
grid-template-areas:
"meta"
"date"
"title"
"teaser";
padding-block: var(--space-6);
}
.page-type-archive main > ul article h2 {
font-size: var(--font-size-7);
line-height: var(--line-height-5);
}
}
/* ---- Seiten-Header ---- */
.page-type-archive main > header {
margin-bottom: var(--space-8);
}
/* Contextual Styling: p unmittelbar vor h1 wird automatisch
als Eyebrow behandelt – ohne Klasse im Markup. */
.page-type-archive main > header > p:first-child:has(+ h1) {
margin: 0 0 var(--margin-bottom-eyebrow);
color: var(--color-eyebrow);
font-size: var(--font-size-eyebrow);
font-weight: var(--font-weight-eyebrow);
line-height: var(--line-height-eyebrow);
text-transform: var(--text-transform-eyebrow);
letter-spacing: var(--letter-spacing-eyebrow);
}
/* Kurze Beschreibung nach dem Seiten-Titel.
Kein Lead – bewusst kleiner und gedaempfter. */
.page-type-archive main > header h1 + p {
margin-top: var(--space-3);
color: var(--color-muted);
font-size: var(--font-size-5);
line-height: var(--line-height-5);
}
/* ---- Artikel-Liste ---- */
.page-type-archive main > ul {
list-style: none;
margin: 0;
padding: 0;
}
.page-type-archive main > ul > li {
border-top: 1px solid var(--color-line);
}
.page-type-archive main > ul > li:last-child {
border-bottom: 1px solid var(--color-line);
}
/* Artikel-Karte: 2-spaltiges Grid (Meta | Datum) mit Titel
und Teaser darunter ueber die volle Breite */
.page-type-archive main > ul article a {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"meta date"
"title title"
"teaser teaser";
gap: 0 var(--space-4);
padding-block: var(--space-7);
color: inherit;
text-decoration: none;
}
.page-type-archive main > ul article a:hover h2 {
color: var(--color-muted);
}
/* Metazeile: Format · Thema – als Eyebrow gestylt */
.page-type-archive main > ul article header {
display: contents;
}
.page-type-archive main > ul article header p {
grid-area: meta;
margin: 0 0 var(--margin-bottom-eyebrow);
color: var(--color-eyebrow);
font-size: var(--font-size-eyebrow);
font-weight: var(--font-weight-eyebrow);
line-height: var(--line-height-eyebrow);
text-transform: var(--text-transform-eyebrow);
letter-spacing: var(--letter-spacing-eyebrow);
}
.page-type-archive main > ul article header time {
grid-area: date;
color: var(--color-muted);
font-size: var(--font-size-1);
line-height: var(--line-height-3);
white-space: nowrap;
}
.page-type-archive main > ul article h2 {
grid-area: title;
margin: 0 0 var(--space-3);
font-size: var(--font-size-9);
line-height: var(--line-height-6);
transition: color 0.15s ease;
}
.page-type-archive main > ul article > a > p {
grid-area: teaser;
margin: 0;
color: var(--color-muted);
font-size: var(--font-size-4);
line-height: var(--line-height-5);
}