/* ============================================================
Page Type: Article
Zweispaltiges Leserlayout fuer lange redaktionelle Artikel
mit Inhaltsverzeichnis (Essays, Analysen, Berichte).
Aktivierung:
1. CSS einbinden:
2. Klasse setzen:
Struktur:
Designprinzip: Contextual Styling
Das Markup bleibt reines, semantisches HTML – keine
Dekorator-Klassen fuer Absatzformate. Der Page Type
weiss, was ein p vor h1 bedeutet (Eyebrow) und was
das erste p nach h1 ist (Lead), und stylt beides
automatisch ueber strukturelle Selektoren.
Utility-Klassen (.text-lead, .text-eyebrow) stehen
als bewusste Ausnahme bereit, sind aber nicht der Standard.
Kompatibel mit page-type-post: beide Page Types
akzeptieren dieselbe HTML-Struktur. Wechselt man den
Page Type, aendert sich das Layout – nicht das Markup.
============================================================ */
/* ---- Layout ---- */
/* Zwei Spalten: Inhaltsverzeichnis (230px) | Artikel (Rest) */
.page-type-article main {
display: grid;
grid-template-columns: 230px 1fr;
grid-template-areas: "meta article";
gap: clamp(var(--space-6), 4vw, var(--space-9));
align-items: start;
padding-block: var(--space-9) var(--space-13);
padding-inline: var(--page-margin-left) var(--page-margin-right);
}
/* Aside klebt am oberen Rand sobald man scrollt.
top = 2x padding-block der Header-Nav + Schriftgroesse der Nav-Links + Abstand */
.page-type-article main > aside {
grid-area: meta;
position: sticky;
top: calc(2 * var(--space-4) + var(--font-size-8) + var(--space-4));
}
/* Artikel: asymmetrisches inneres Grid.
Inhalt landet in der Mittelspalte (Lesemass).
Links schmaler Einzug (0.4fr), rechts mehr Luft (1fr) –
damit der Text optisch nicht mittig wirkt, sondern
leicht nach links verschoben zum Inhaltsverzeichnis hin. */
.page-type-article main > article {
grid-area: article;
display: grid;
grid-template-columns: 0.4fr minmax(0, var(--measure-reading)) 1fr;
}
/* Alle direkten Kinder in die Mittelspalte */
.page-type-article main > article > * {
grid-column: 2;
}
/* Bilder brechen ueber die volle Artikelbreite aus */
.page-type-article main > article > figure {
grid-column: 1 / -1;
}
/* Tablet: Grid kollabiert auf eine Spalte.
Inhaltsverzeichnis verschwindet (kein Platz) – es wird
nicht unter den Artikel verschoben wie bei page-type-default. */
@media (max-width: 980px) {
.page-type-article main {
grid-template-columns: 1fr;
grid-template-areas: "article";
}
.page-type-article main > aside {
display: none;
}
.page-type-article main > article {
grid-template-columns: 1fr;
}
.page-type-article main > article > *,
.page-type-article main > article > figure {
grid-column: 1;
}
}
/* Mobil: weniger Abstand oben */
@media (max-width: 660px) {
.page-type-article main {
padding-top: var(--space-8);
}
}
/* ---- Inhaltsverzeichnis ---- */
.page-type-article main > aside nav {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.page-type-article main > aside nav strong {
display: block;
margin-bottom: var(--space-1);
color: var(--color-ink);
font-size: var(--font-size-3);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-3);
}
.page-type-article main > aside nav a {
color: var(--color-muted);
font-size: var(--font-size-2);
line-height: var(--line-height-3);
}
.page-type-article main > aside nav a:hover {
color: var(--color-ink);
}
/* ---- Eyebrow ---- */
/* Contextual Styling: p unmittelbar vor h1 wird automatisch
als Eyebrow behandelt – ohne Klasse im Markup. */
.page-type-article article > p: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);
}
/* ---- Lead ---- */
/* Contextual Styling: erster p nach h1 wird automatisch
als Lead behandelt – ohne Klasse im Markup. */
.page-type-article article h1 + p {
margin-bottom: var(--margin-bottom-lead);
color: var(--color-lead);
font-size: var(--font-size-lead);
line-height: var(--line-height-lead);
}
/* ---- Autorenzeile ---- */
/* Basis-Styling kommt aus typography.css (address-Absatzformat).
Kein Override noetig – Standard-Ausrichtung links passt hier. */
/* ---- Hauptbild ---- */
.page-type-article article > figure {
margin: 0 0 var(--space-8);
}
.page-type-article article > figure img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}