/*
 * Seitenkopf der Unterseiten (Vorlagen „Seite“ und „Unterkunft“, Muster „Seitenkopf“) und Einleitung.
 *
 * Angelehnt an den Hero der Startseite: Bild vollflächig (78 svh, die Höhe ist reserviert, nichts
 * springt), ruhiger Ken-Burns-Zoom nur über transform, Dachzeile mit Linie, Display-Zeile im Muster
 * „Wort. Wort“, darunter die H1 mit Leistung und Ort. Ausgangszustände der Bewegung gelten nur mit
 * der Klasse ps-bw am <html> (JavaScript an, keine reduzierte Bewegung); das Bild ist immer sofort
 * sichtbar (LCP). Parallax beim Wegscrollen: CSS Scroll-driven Animations, sonst seite.js.
 */

/* ---------- Seitenkopf ---------- */
.ps-seitenkopf.wp-block-cover {
	position: relative;
	isolation: isolate;
	min-height: max(560px, 78svh);
	padding: calc(var(--header-h) + 40px) 0 clamp(72px, 11vh, 120px);
	background: var(--tanne-900);
	color: var(--schnee);
	align-items: flex-end;
	overflow: hidden;
	view-timeline: --ps-kopf block;
	view-timeline-inset: 0px; /* sonst zählt scroll-padding (Kopfhöhe) mit und der Text verblasst schon oben */
}
/* Ohne Beitragsbild und auf Funktionsseiten (Buchen, Anfrage, Rechtliches) niedriger */
.ps-seitenkopf.wp-block-cover:not(:has(> .wp-block-cover__image-background)),
body.ps-seite-funktion .ps-seitenkopf.wp-block-cover { min-height: max(420px, 52svh); }
body:not(.ps-kopf-transparent) .ps-seitenkopf.wp-block-cover { padding-top: 56px; }

.ps-seitenkopf > .wp-block-cover__image-background {
	position: absolute;
	inset: -16% 0 auto 0;
	width: 100%;
	height: 122%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center 45%;
	z-index: -1;
	scale: 1.04;
	transform-origin: 50% 40%;
}
.ps-bw .ps-seitenkopf > .wp-block-cover__image-background { animation: ps-ken 30s ease-in-out infinite alternate; will-change: scale, translate; }
@keyframes ps-ken { from { scale: 1.04; } to { scale: 1.13; } }

/* Abdunkelung (21.10.2026, Lesbarkeit): leichter Grundton oben (Kopf) und unten über das ganze Bild,
   dazu ein Textfeld genau hinter der Textspalte (::before des Inhalts, siehe unten). So bleibt das Foto
   rechts bzw. oben hell, die Schrift steht aber nie auf einer hellen Fotostelle. Farbton Tanne, kein Schwarz. */
.ps-seitenkopf > .wp-block-cover__background {
	opacity: 1 !important;
	z-index: 0;
	background: var(--scrim-kopf-oben), var(--scrim-kopf-unten) !important;
}
.ps-seitenkopf > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100% !important;
	max-width: var(--container);
	margin: 0 auto !important;
	padding: 0 var(--gutter);
	display: grid;
	gap: 18px;
	color: var(--schnee);
}
.ps-seitenkopf > .wp-block-cover__inner-container > * { margin: 0; }

/* Textfeld: Desktop ein Verlauf von links, hinter der Textspalte (bis ca. 680 px Textbreite) kräftig,
   danach über 360 px auslaufend; nach oben über 150 px weich ausgeblendet (Maske). Es wächst mit der
   Texthöhe mit (lange H1, Unterzeile, Italienisch) und bewegt sich beim Wegscrollen mit dem Text.
   Das Cover schneidet es am Bildrand ab (overflow: hidden). Ohne Beitragsbild entfällt es. */
.ps-seitenkopf > .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -150px;
	bottom: -400px;
	left: -50vw;
	right: -50vw;
	pointer-events: none;
	background: linear-gradient(90deg, var(--scrim-kopf-text) calc(50vw + var(--gutter) + 680px), rgba(16, 32, 25, 0) calc(50vw + var(--gutter) + 1040px));
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px);
	mask-image: linear-gradient(180deg, transparent 0, #000 150px);
}
.ps-seitenkopf:not(:has(> .wp-block-cover__image-background)) > .wp-block-cover__inner-container::before { display: none; }

/* Kleine Texte: helleres Gold bzw. Schnee, kräftigere Schnitte, dezenter Schatten nur als Absicherung */
.ps-seitenkopf .is-style-ps-dachzeile {
	color: var(--sonne-200);
	font-weight: 600;
	letter-spacing: .02em;
	text-shadow: var(--text-schatten);
}

/* Display-Zeile „Wort. Wort“: jede Zeile in einer Maske (span.ps-zeile > span), letzte kursiv */
.ps-seitenkopf__display {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-display-xl);
	line-height: .98;
	letter-spacing: var(--ls-display);
	color: var(--schnee);
}
.ps-seitenkopf__display em { font-style: italic; font-weight: 300; }
.ps-seitenkopf__display .ps-zeile { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.ps-seitenkopf__display .ps-zeile > span { display: inline-block; }

/* H1: groß ohne Display-Zeile; mit Display-Zeile als ruhige Zeile darunter (wie auf der Startseite) */
.ps-seitenkopf .ps-seitenkopf__titel.wp-block-post-title,
.ps-seitenkopf h1 {
	max-width: 22ch;
	color: var(--schnee);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-display-l);
	line-height: 1.05;
	letter-spacing: var(--ls-display);
	text-wrap: balance;
}
.ps-seitenkopf .ps-seitenkopf__display + :is(.ps-seitenkopf__titel, h1) {
	max-width: 34em;
	margin-top: 4px;
	font: 500 clamp(17px, 1.35vw, 19px)/1.45 var(--font-sans);
	letter-spacing: .02em;
	color: var(--schnee);
	text-shadow: var(--text-schatten);
	text-wrap: pretty;
}

/* Unterzeile (Feld „Unterzeile“, Block presslauer/unterzeile): ein Satz unter der H1, mit kurzer Linie */
.ps-seitenkopf .ps-seitenkopf__unterzeile {
	max-width: 46ch;
	margin-top: 6px;
	font: 400 clamp(17px, 1.3vw, 19px)/1.55 var(--font-sans);
	color: var(--schnee);
	text-shadow: var(--text-schatten);
	text-wrap: pretty;
}
.ps-seitenkopf .ps-seitenkopf__unterzeile::before {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	margin-bottom: 16px;
	background: var(--sonne-400);
	transform-origin: left center;
}

/* Scroll-Hinweis (seite.js, nur Desktop) */
.ps-seitenkopf__scroll {
	position: absolute;
	right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
	bottom: 34px;
	z-index: 2;
	display: none;
	align-items: center;
	gap: 12px;
	font: 600 11px/1 var(--font-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--schnee);
	text-shadow: var(--text-schatten);
}
.ps-seitenkopf__scroll > span { position: relative; width: 1px; height: 44px; overflow: hidden; background: rgba(252, 250, 245, .3); }
.ps-seitenkopf__scroll > span::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 18px;
	background: var(--sonne-400);
	animation: ps-hinweis 2.2s var(--ease-in-out) infinite;
}
@keyframes ps-hinweis { from { transform: translateY(-100%); } to { transform: translateY(220%); } }
@media (min-width: 900px) { .ps-seitenkopf__scroll { display: flex; } }

/* Einblenden beim Laden (nur ps-bw): Linie der Dachzeile zeichnet sich, Zeilen steigen aus der Maske */
.ps-bw .ps-seitenkopf .is-style-ps-dachzeile { animation: ps-kopf-auf 800ms var(--ease-out) 120ms both; }
.ps-bw .ps-seitenkopf .is-style-ps-dachzeile::before { transform-origin: left center; animation: ps-linie 900ms var(--ease-out) 220ms both; }
.ps-bw .ps-seitenkopf__display .ps-zeile > span { animation: ps-zeile 1100ms var(--ease-out) 260ms both; }
.ps-bw .ps-seitenkopf__display .ps-zeile:nth-child(2) > span { animation-delay: 400ms; }
.ps-bw .ps-seitenkopf__display .ps-zeile:nth-child(3) > span { animation-delay: 540ms; }
.ps-bw .ps-seitenkopf__display .ps-zeile:nth-child(n+4) > span { animation-delay: 680ms; }
.ps-bw .ps-seitenkopf :is(.ps-seitenkopf__titel, h1) { animation: ps-kopf-auf 900ms var(--ease-out) 420ms both; }
.ps-bw .ps-seitenkopf .ps-seitenkopf__display + :is(.ps-seitenkopf__titel, h1) { animation-delay: 720ms; }
.ps-bw .ps-seitenkopf .ps-seitenkopf__unterzeile { animation: ps-kopf-auf 900ms var(--ease-out) 640ms both; }
.ps-bw .ps-seitenkopf .ps-seitenkopf__display ~ .ps-seitenkopf__unterzeile { animation-delay: 940ms; }
.ps-bw .ps-seitenkopf .ps-seitenkopf__unterzeile::before { animation: ps-linie 900ms var(--ease-out) 1000ms both; }
.ps-bw .ps-seitenkopf__scroll { animation: ps-kopf-ein 700ms var(--ease-out) 1300ms both; }
@keyframes ps-kopf-auf { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes ps-kopf-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-zeile { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }
@keyframes ps-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Parallax beim Wegscrollen: Bild langsamer als die Seite, Text steigt aus (Scroll-driven Animations) */
@supports (animation-timeline: view()) {
	.ps-bw .ps-seitenkopf > .wp-block-cover__image-background {
		animation: ps-ken 30s ease-in-out infinite alternate, ps-kopf-bild linear both;
		animation-timeline: auto, --ps-kopf;
		animation-range: normal, exit 0% exit 100%;
	}
	.ps-bw .ps-seitenkopf > .wp-block-cover__inner-container {
		animation: ps-kopf-weg linear both;
		animation-timeline: --ps-kopf;
		animation-range: exit 0% exit 75%;
	}
}
@keyframes ps-kopf-bild { from { translate: 0 0; } to { translate: 0 20%; } }
@keyframes ps-kopf-weg { from { transform: none; opacity: 1; } to { transform: translate3d(0, 12vh, 0); opacity: 0; } }

/* Schmale Bildschirme: Text über die volle Breite, daher Textfeld als Verlauf von unten, der die ganze
   Texthöhe abdeckt (120 px weicher Übergang über der Dachzeile); das Foto bleibt oben hell. */
@media (max-width: 781px) {
	.ps-seitenkopf > .wp-block-cover__inner-container::before {
		top: -120px;
		background: linear-gradient(180deg, rgba(16, 32, 25, 0) 0, var(--scrim-kopf-text) 120px);
		-webkit-mask-image: none;
		mask-image: none;
	}
}
@media (max-width: 599px) {
	.ps-seitenkopf.wp-block-cover { min-height: max(480px, 72svh); padding-bottom: 48px; }
	.ps-seitenkopf > .wp-block-cover__inner-container { gap: 14px; }
	.ps-seitenkopf__display { font-size: clamp(46px, 13vw, 60px); }
	.ps-seitenkopf .ps-seitenkopf__display + :is(.ps-seitenkopf__titel, h1),
	.ps-seitenkopf .ps-seitenkopf__unterzeile,
	.ps-seitenkopf .is-style-ps-dachzeile { font-size: 16px; }
}

/* ---------- Einleitung (Textauszug in der Vorlage, Muster „Einleitung“) ----------
 * Lead mit großem, blassem Anfangsbuchstaben dahinter wie das „W“ der Startseite. data-initial
 * setzt seite.js aus dem ersten Buchstaben (rein dekorativ, nicht vorgelesen, ohne JS entfällt er). */
.ps-seite__einleitung.wp-block-group {
	padding: clamp(56px, 8vw, 112px) max(var(--gutter), calc((100% - var(--container)) / 2)) 0;
}
.ps-seite__einleitung:not(:has(*)) { display: none; }
.ps-seite__einleitung .wp-block-post-excerpt { max-width: 820px; margin: 0; }

.ps-einleitung { position: relative; isolation: isolate; }
.ps-einleitung :is(.wp-block-post-excerpt__excerpt, .ps-einleitung__lead) {
	position: relative;
	max-width: 820px;
	margin: 0;
	font: 400 clamp(19px, 1.75vw, 24px)/1.55 var(--font-sans);
	color: var(--text-body);
	text-wrap: pretty;
}
/* Großer blasser Anfangsbuchstabe hinter dem Lead, wie das „W“ der Startseite (data-initial: seite.js) */
.ps-einleitung [data-initial]::before {
	content: attr(data-initial);
	content: attr(data-initial) / "";
	position: absolute;
	z-index: -1;
	top: -.44em;
	left: -.07em;
	font: 300 clamp(180px, 22vw, 300px)/1 var(--font-display);
	color: var(--tanne-100);
	pointer-events: none;
	user-select: none;
}
@supports (animation-timeline: view()) {
	.ps-bw .ps-einleitung [data-initial]::before {
		animation: ps-initial-px linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}
}
@keyframes ps-initial-px { from { transform: translate3d(0, 40px, 0); } to { transform: translate3d(0, -40px, 0); } }