/* ============================================================
Page Type: Main
Top-Level-Seiten mit schmalem Bild-Banner oben, gefolgt
von frei komponierten Sections.
Aktivierung:
1. CSS einbinden:
2. Klassen setzen:
Struktur:
Grid-Struktur:
Spalten: Rand | Inhalt (2fr) | Lücke | Nav (1fr) | Rand
Zeilen: Navbar-Abstand | Freiraum | Eyebrow | h1 | Banner-Abstand | Bar
Das -Element überspannt alle Banner-Zeilen (1–5) in voller
Breite und liegt per z-index hinter allen anderen Grid-Items.
Kein Wrapper-Div nötig – alle Elemente sind direkte Grid-Kinder.
============================================================ */
/* ---- Grid-Container ---- */
.page-header {
display: grid;
grid-template-columns:
var(--page-margin-left) /* Rand links */
minmax(0, 800px) /* Inhalt: max. Lesemaß */
minmax(60px, 1fr) /* Lücke: flex, min. 60px */
230px /* Aside: fest */
var(--page-margin-right); /* Rand rechts */
grid-template-rows:
calc(var(--navbar-height, 72px) + var(--space-6)) /* Navbar-Abstand */
1fr /* Freiraum */
auto /* Eyebrow */
auto /* h1 */
var(--space-8) /* Banner-Abstand */
auto; /* Bar */
background-color: var(--color-paper);
}
/* ---- Bild (Hintergrund) ---- */
/* figure überspannt alle Banner-Zeilen, volle Breite, hinter dem Text */
.page-header > figure {
grid-row: 1 / 6;
grid-column: 1 / -1;
min-height: 30vw; /* Unterkante – wächst mit dem Text */
margin: 0;
position: relative;
z-index: 0;
}
/* img absolut positioniert – trägt nicht zur Figure-Höhe bei */
.page-header > figure img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Dunkler Overlay */
.page-header > figure::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
}
/* ---- Eyebrow (erster p) ---- */
.page-header > p:first-of-type {
grid-row: 3;
grid-column: 2;
margin: 0 0 var(--space-2) 0;
position: relative;
z-index: 1;
color: var(--color-paper);
font-size: var(--font-size-7);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-eyebrow);
text-transform: var(--text-transform-eyebrow);
}
/* ---- h1 ---- */
.page-header > h1 {
grid-row: 4;
grid-column: 2;
margin: 0;
max-width: 28ch;
position: relative;
z-index: 1;
color: var(--color-paper);
}
/* Marker-Text dunkel — Marker-Hintergrund ist weiss */
.page-header > p:first-of-type mark,
.page-header > h1 mark {
color: var(--color-ink);
}
/* ---- Bar: Subline (letzter p) + Nav ---- */
.page-header > p:last-of-type {
grid-row: 6;
grid-column: 2;
padding-block: var(--space-6);
margin: 0;
color: var(--color-ink);
font-size: var(--font-size-lead);
line-height: var(--line-height-lead);
}
.page-header > nav {
grid-row: 6;
grid-column: 4;
padding-block: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.page-header > nav a {
font-size: var(--font-size-5);
font-weight: var(--font-weight-semibold);
color: var(--color-ink);
text-decoration: underline;
text-underline-offset: 2px;
}
.page-header > nav a:hover {
color: var(--color-muted);
}
/* ---- Responsive ---- */
@media (max-width: 980px) {
.page-header {
grid-template-columns:
var(--page-margin-left)
1fr
var(--page-margin-right);
grid-template-rows:
calc(var(--navbar-height, 72px) + var(--space-6))
1fr
auto
auto
var(--space-8)
auto
auto; /* Nav rückt in eigene Zeile */
}
.page-header > figure { grid-column: 1 / -1; }
.page-header > p:first-of-type,
.page-header > h1 { grid-column: 2; }
.page-header > p:last-of-type {
grid-row: 6;
grid-column: 2;
padding-block-end: var(--space-3);
}
.page-header > nav {
grid-row: 7;
grid-column: 2;
padding-block-start: 0;
}
}
@media (max-width: 660px) {
.page-header {
grid-template-rows:
calc(var(--navbar-height, 72px) + var(--space-7))
1fr
auto
auto
var(--space-6)
auto
auto;
}
}
/* ---- Inhalt: Sections ---- */
/* p unmittelbar vor h2 = Eyebrow ohne Extra-Klasse */
.page-type-main section p:has(+ h2) {
margin-block: 0 var(--space-1);
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-main section p + h2 {
margin-block-start: 0;
}
