/*
 * Hero (core/cover .ps-hero): Vollbild, Ken-Burns, Nebel, Parallax (translate per JS),
 * H1 mit Unterzeile (<strong>), Sommer/Winter-Umschalter, Scroll-Hinweis.
 */

.ps-start .ps-hero {
	position: relative;
	min-height: max(620px, 100svh);
	padding: 0;
	overflow: hidden;
	background: var(--tanne-950);
	color: var(--schnee);
	align-items: flex-end;
}
.ps-start .ps-hero > .wp-block-cover__image-background,
.ps-start .ps-hero > .ps-hero__bild-winter {
	position: absolute;
	inset: -6% 0 -14% 0;
	width: 100%;
	height: 120%;
	max-width: none;
	object-fit: cover;
	object-position: center 40%;
	scale: 1.04;
	animation: ps-ken 32s ease-in-out infinite alternate;
	will-change: transform, translate;
	transition: opacity 1400ms var(--ease-out);
	z-index: 0;
}
.ps-start .ps-hero > .ps-hero__bild-winter { opacity: 0; }
html.ps-saison-winter .ps-start .ps-hero > .ps-hero__bild-winter { opacity: 1; }
html.ps-saison-winter .ps-start .ps-hero > .wp-block-cover__image-background { opacity: 0; }
/* Bis start.js nach dem Laden ps-saison-bereit setzt (und ohne JS), wird nur das Bild der Saison gerendert:
   Das andere (lazy) lädt erst danach und blendet beim Umschalten über (inc/saison.php). */
html:not(.ps-saison-bereit).ps-saison-winter .ps-start .ps-hero > .wp-block-cover__image-background,
html:not(.ps-saison-bereit):not(.ps-saison-winter) .ps-start .ps-hero > .ps-hero__bild-winter { display: none; }
@keyframes ps-ken { from { scale: 1.04; } to { scale: 1.14; } }

/* Nebelschwaden */
.ps-start .ps-hero::before,
.ps-start .ps-hero::after {
	content: "";
	position: absolute;
	left: -25%;
	right: -25%;
	height: 42%;
	z-index: 1;
	pointer-events: none;
	filter: blur(8px);
	background: radial-gradient(ellipse 45% 50% at 30% 50%, rgba(252, 250, 245, .16), transparent 70%), radial-gradient(ellipse 35% 45% at 75% 55%, rgba(252, 250, 245, .13), transparent 70%);
	animation: ps-nebel 46s ease-in-out infinite alternate;
}
.ps-start .ps-hero::before { top: 18%; }
.ps-start .ps-hero::after { top: 46%; opacity: .75; animation-duration: 60s; animation-delay: -20s; }
@keyframes ps-nebel { from { transform: translate3d(-7%, 0, 0); } to { transform: translate3d(7%, -3%, 0); } }

.ps-hero__schnee { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Abdunklung (21.10.2026, Lesbarkeit): leichter Grundton oben (Kopf) und unten über das ganze Bild,
   dazu ein Textfeld hinter der Textspalte (::before des Inhalts) wie im Seitenkopf der Unterseiten.
   Das Foto bleibt rechts bzw. oben hell; Farbton Tanne, kein Schwarz. Gilt für Sommer- und Winterbild. */
.ps-start .ps-hero > .wp-block-cover__background {
	opacity: 1 !important;
	background: var(--scrim-kopf-oben), var(--scrim-kopf-unten) !important;
	z-index: 1;
}
/* Textfeld: Desktop Verlauf von links (kräftig bis ca. 680 px Textbreite, dann 360 px auslaufend), nach
   oben über 150 px weich ausgeblendet; wächst mit der Texthöhe, bewegt sich mit dem Text (Parallax). */
.ps-start .ps-hero > .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);
}
@media (max-width: 781px) {
	.ps-start .ps-hero > .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;
	}
}

.ps-start .ps-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter) clamp(112px, 15vh, 168px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 24px;
	color: var(--schnee);
	will-change: transform, opacity;
}
.ps-start .wp-block-cover.ps-hero.has-custom-content-position > .wp-block-cover__inner-container { margin: 0 auto; width: 100%; }
/* Ortszeile (Versalien): helleres Gold, mind. 13 px, Schatten nur als Absicherung gegen helle Spitzen */
.ps-start .ps-hero .ps-hero__ort {
	color: var(--sonne-200);
	font-size: 13px;
	font-weight: 600;
	text-shadow: var(--text-schatten);
}

.ps-start .ps-hero__titel {
	margin: 0;
	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);
	text-wrap: initial;
}
.ps-start .ps-hero__titel em { font-style: italic; font-weight: 300; }
.ps-start .ps-hero__titel strong {
	display: block;
	max-width: 560px;
	margin-top: 22px;
	font: 500 clamp(17px, 1.3vw, 19px)/1.45 var(--font-sans);
	letter-spacing: .02em;
	color: var(--schnee);
	text-shadow: var(--text-schatten);
}
.ps-start .ps-hero__titel .ps-zeile { display: inline-block; }

.ps-start .ps-hero__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 28px;
}
.ps-start .ps-hero__lead {
	max-width: 520px;
	margin-right: auto;
	color: var(--schnee);
	text-shadow: var(--text-schatten);
}

/* Sommer/Winter-Umschalter: nur mit JavaScript sichtbar */
.ps-start .ps-saisonwahl { display: none; }
.ps-js .ps-start .ps-saisonwahl {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	padding: 4px;
	width: max-content;
	border-radius: var(--radius-pill);
	background: var(--fels-100);
}
.ps-start .ps-saisonwahl .wp-block-button__link {
	height: 36px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-muted);
	font: 600 13px/1 var(--font-sans);
	letter-spacing: .04em;
	text-transform: none;
	transition: all var(--dur-fast);
}
.ps-start .ps-saisonwahl .wp-block-button__link:hover { background: rgba(255, 255, 255, .6); color: var(--tanne-800); }
.ps-start .ps-saisonwahl .wp-block-button__link[aria-pressed="true"] { background: var(--weiss); color: var(--tanne-800); box-shadow: var(--shadow-xs); }

/* Winterbild-Block nur Quelle für das Hintergrundbild */
.ps-start .ps-hero .ps-hero__winterbild { display: none; }

/* Scroll-Hinweis (von start.js eingefügt) */
.ps-hero__scroll {
	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-hero__scroll > span { position: relative; width: 1px; height: 44px; overflow: hidden; background: rgba(252, 250, 245, .3); }
.ps-hero__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-hero__scroll { display: flex; } }

@media (max-width: 599px) {
	.ps-start .ps-hero > .wp-block-cover__inner-container { padding-bottom: 96px; gap: 18px; }
	.ps-start .ps-hero__titel strong { margin-top: 16px; font-size: 16px; }
	.ps-start .ps-hero .is-style-ps-einleitung { font-size: 17px; }
}