/* ============================================================
Page Type: Default
Zweispaltiges redaktionelles Layout fuer eigenstaendige
Inhaltsseiten (z.B. Ueber uns).
Aktivierung:
1. CSS einbinden:
2. Klasse setzen:
Struktur:
Hauptinhalt (Eyebrow, h1, Lead, Fliesstext)
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.
============================================================ */
/* ---- Layout ---- */
/* Drei Spalten: Artikel | Luecke | Sidebar
Spalte 1: Artikel, begrenzt auf 80ch Lesebreite
Spalte 2: flexibler Puffer zwischen Artikel und Sidebar,
mindestens so breit wie der Seitenrand
Spalte 3: Sidebar, fest 230px */
.page-type-default main {
padding-block: var(--space-10) var(--space-12);
padding-inline: var(--page-margin-left) var(--page-margin-right);
display: grid;
grid-template-columns: minmax(0, 80ch) minmax(var(--page-margin-left), 1fr) 230px;
align-items: start;
}
.page-type-default main > article { grid-column: 1; }
.page-type-default main > aside { grid-column: 3; }
.page-type-default main > aside {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Tablet: Grid kollabiert auf eine Spalte.
Sidebar rutscht unter den Artikel – sie bleibt sichtbar. */
@media (max-width: 980px) {
.page-type-default main {
grid-template-columns: 1fr;
}
.page-type-default main > article,
.page-type-default main > aside {
grid-column: 1;
}
}
/* ---- Aside: Inhalt ---- */
/* Sidebar fuer redaktionelle Metainfos: Kontakt, Links,
Fakten. Struktur im HTML: strong als Label, p/a als Wert. */
.page-type-default main > aside 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-4);
}
.page-type-default main > aside p,
.page-type-default main > aside a {
font-size: var(--font-size-2);
line-height: var(--line-height-3);
color: var(--color-muted);
}
.page-type-default main > aside a:hover {
color: var(--color-ink);
}
/* ---- Eyebrow ---- */
/* Contextual Styling: p unmittelbar vor h1 wird automatisch
als Eyebrow behandelt – ohne Klasse im Markup. */
.page-type-default main > 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-default main > 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);
}