/* ============================================================
Page Type: Post
Zentriertes, einspaltiges Leserlayout fuer kurze
redaktionelle Beitraege (Posts, Meinungsstuecke).
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-article: beide Page Types
akzeptieren dieselbe HTML-Struktur. Wechselt man den
Page Type, aendert sich das Layout – nicht das Markup.
============================================================ */
/* ---- Layout ---- */
/* Aussenabstand der Seite */
.page-type-post main {
padding-block: var(--space-9) var(--space-13);
padding-inline: var(--page-margin-left) var(--page-margin-right);
}
/* Artikel: drei Spalten, Inhalt in der Mittelspalte zentriert.
Breite begrenzt auf 1.5x Lesemass, dann per auto-Margin mittig. */
.page-type-post main > article {
display: grid;
grid-template-columns: 1fr min(var(--measure-reading), 100%) 1fr;
max-width: calc(var(--measure-reading) * 1.5);
margin-inline: auto;
}
/* Alle direkten Kinder in die Mittelspalte */
.page-type-post main > article > * {
grid-column: 2;
}
/* Titel und Bilder brechen ueber die volle Breite aus */
.page-type-post main > article > h1,
.page-type-post main > article > figure {
grid-column: 1 / -1;
}
/* Tablet: Artikel-Grid kollabiert auf eine Spalte,
Ausbrueche fallen weg. */
@media (max-width: 980px) {
.page-type-post main > article {
grid-template-columns: 1fr;
}
.page-type-post main > article > * {
grid-column: 1;
}
}
/* Mobil: weniger Abstand oben */
@media (max-width: 660px) {
.page-type-post main {
padding-top: var(--space-8);
}
}
/* ---- Aside: Inhaltsverzeichnis ---- */
/* In diesem Page Type ausgeblendet – der kompakte Post-Stil
braucht keine Navigation. Die Styles bleiben erhalten, damit
dieselbe HTML-Struktur wie bei page-type-article funktioniert. */
.page-type-post main > aside {
display: none;
}
.page-type-post main > aside nav {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.page-type-post main > aside nav strong {
display: block;
margin-bottom: var(--space-1);
color: var(--color-ink);
font-size: var(--font-size-2);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-3);
}
.page-type-post main > aside nav a {
color: var(--color-muted);
font-size: var(--font-size-2);
line-height: var(--line-height-3);
text-decoration: none;
}
.page-type-post main > aside nav a:hover {
color: var(--color-ink);
}
/* ---- Titel ---- */
/* h1 bricht ueber die volle Breite aus (siehe Layout)
und wird zentriert gesetzt. */
.page-type-post article > h1 {
text-align: center;
}
/* ---- Eyebrow ---- */
/* Contextual Styling: p unmittelbar vor h1 wird automatisch
als Eyebrow behandelt – ohne Klasse im Markup. */
.page-type-post 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);
text-align: center;
}
/* ---- Lead ---- */
/* Contextual Styling: erster p nach h1 wird automatisch
als Lead behandelt – ohne Klasse im Markup. */
.page-type-post 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);
text-align: center;
}
/* ---- Autorenzeile ---- */
/* Basis-Styling kommt aus typography.css (address-Absatzformat).
Override: zentriert – passend zum zentrierten Post-Layout. */
.page-type-post article > address {
text-align: center;
}
/* ---- Hauptbild ---- */
.page-type-post article > figure {
margin: 0 0 var(--space-8);
}
.page-type-post article > figure img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}