/*
 * „Ein Tag. Am Berg“ (.ps-tag): Scroll-Geschichte mit Sticky-Bühne, Sonnenbogen und großer Uhrzeit.
 * Grundzustand (ohne JavaScript, reduzierte Bewegung): Einleitung und vier Stationen untereinander,
 * jede Station mit Bild und Karte. start.js baut daraus die Bühne (Klasse .ist-buehne).
 */

.ps-start .ps-tag { position: relative; background: var(--tanne-950); color: var(--schnee); }
.ps-start .ps-tag__schritt { position: relative; margin: 0; }
.ps-start .ps-tag__bild { margin: 0; }
.ps-start .ps-tag__bild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Einleitung ---------- */
.ps-start .ps-tag__intro {
	min-height: 86vh;
	display: flex;
	align-items: flex-end;
	padding: calc(var(--header-h) + 48px) max(var(--gutter), calc((100% - var(--container)) / 2)) 12vh;
	overflow: hidden;
}
.ps-start .ps-tag__intro > .ps-tag__bild { position: absolute; inset: 0; }
.ps-start .ps-tag__intro::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--scrim-bottom), rgba(20, 38, 30, .42);
	pointer-events: none;
}
.ps-start .ps-tag__intro-text { position: relative; z-index: 1; display: grid; gap: 22px; width: 100%; }
.ps-start .ps-tag__intro-text h2 { color: var(--schnee); text-shadow: 0 2px 24px rgba(20, 38, 30, .45); }
.ps-start .ps-tag__intro-text .is-style-ps-einleitung { max-width: 480px; color: var(--tanne-100); }

/* Stationsübersicht und Hinweis (von start.js erzeugt) */
.ps-tag__uebersicht {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1px;
	max-width: 640px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	background: rgba(252, 250, 245, .18);
	border-radius: var(--radius-card);
	overflow: hidden;
}
.ps-tag__uebersicht li {
	display: grid;
	gap: 10px;
	padding: 16px 18px;
	background: rgba(20, 38, 30, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ps-tag__uebersicht svg { width: 22px; height: 22px; color: var(--sonne-400); }
.ps-tag__uebersicht .ps-tag__u-zeit { font: 600 12px/1 var(--font-sans); letter-spacing: .12em; color: var(--sonne-300); }
.ps-tag__uebersicht .ps-tag__u-titel { font: 400 19px/1.2 var(--font-display); color: var(--schnee); }
.ps-tag__hinweis {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
	font: 600 12px/1 var(--font-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--schnee);
}
.ps-tag__hinweis > span { position: relative; display: block; width: 1px; height: 40px; overflow: hidden; background: rgba(252, 250, 245, .35); }
.ps-tag__hinweis > span::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: var(--sonne-400); animation: ps-hinweis 2.2s var(--ease-in-out) infinite; }

/* ---------- Stationen im Grundzustand ---------- */
.ps-start .ps-station {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2)) clamp(48px, 6vw, 88px);
}
.ps-start .ps-station > .ps-tag__bild { grid-column: 1 / -1; aspect-ratio: 21 / 9; max-height: 70vh; overflow: hidden; border-radius: var(--radius-image); }
.ps-start .ps-station > .ps-tag__bild + .ps-tag__bild { margin-top: 12px; }
.ps-start .ps-station > .ps-station__karte { grid-column: 1 / -1; position: relative; z-index: 1; margin: -72px 0 0 clamp(16px, 4vw, 56px); max-width: 560px; }

/* ---------- Karte ---------- */
.ps-start .ps-station__karte {
	display: grid;
	gap: 16px;
	align-content: start;
	background: var(--weiss);
	color: var(--text-body);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-lg);
	padding: clamp(28px, 4vw, 44px);
}
.ps-start .ps-station__karte > .wp-block-group { display: grid; gap: 16px; }
.ps-start .ps-station__karte > .wp-block-group + .wp-block-group { padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.ps-start .ps-station__zeit {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font: 600 var(--fs-eyebrow)/1.2 var(--font-sans);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent);
}
.ps-start .ps-station__nr { color: var(--text-subtle); white-space: nowrap; }
.ps-start .ps-station__karte h3 { font: 400 var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.ps-start .ps-station__info { font: 400 var(--fs-small)/1.6 var(--font-sans); color: var(--text-muted); }

/* Mit JavaScript gewählte Saison: nur eine Variante in der Karte, kein Trennstrich */
html.ps-saison-filter .ps-start .ps-station__karte > .wp-block-group + .wp-block-group { padding-top: 0; border-top: 0; }

/* ---------- Bühne (start.js, nur mit Bewegung) ---------- */
.ps-start .ps-tag.ist-buehne .ps-tag__buehne {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	z-index: 0;
}
.ps-tag__ebene {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 1s var(--ease-out), transform 2.4s var(--ease-out);
}
.ps-tag__ebene.ist-aktiv { opacity: 1; transform: scale(1); }
.ps-tag__ebene > figure, .ps-tag__ebene img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.ps-tag__scrim { position: absolute; inset: 0; background: var(--scrim-bottom), var(--scrim-top); pointer-events: none; }
.ps-tag__dimmer { position: absolute; inset: 0; background: var(--tanne-950); opacity: .42; transition: opacity 1s var(--ease-out); pointer-events: none; }
.ps-tag.ist-station .ps-tag__dimmer { opacity: .1; }

.ps-tag__bogen {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	top: calc(var(--header-h) + 36px);
	height: clamp(80px, 15vh, 150px);
	pointer-events: none;
	opacity: 0;
	transform: translate3d(0, -12px, 0);
	transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.ps-tag.ist-station .ps-tag__bogen { opacity: 1; transform: none; }
.ps-tag__bogen svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ps-tag__punkt {
	position: absolute;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%);
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--schnee);
	background: rgba(20, 38, 30, .5);
	transition: background var(--dur-base);
}
.ps-tag__punkt.ist-erreicht { background: var(--sonne-400); }
.ps-tag__punkt span {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font: 600 12px/1 var(--font-sans);
	letter-spacing: .12em;
	color: var(--schnee);
	text-shadow: 0 1px 10px rgba(20, 38, 30, .7);
	transition: color var(--dur-base);
}
.ps-tag__punkt.ist-aktiv span { color: var(--sonne-300); }
.ps-tag__sonne {
	position: absolute;
	left: 4%;
	top: 95%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: var(--radius-pill);
	background: var(--sonne-400);
	box-shadow: 0 0 0 7px rgba(219, 181, 116, .28), 0 0 36px 10px rgba(219, 181, 116, .55);
}

.ps-tag__grosszeit {
	position: absolute;
	right: var(--gutter);
	bottom: 9vh;
	display: none;
	justify-items: end;
	color: var(--schnee);
	text-shadow: 0 2px 24px rgba(20, 38, 30, .55);
	pointer-events: none;
}
.ps-tag__grosszeit > div {
	grid-area: 1 / 1;
	display: grid;
	justify-items: end;
	gap: 6px;
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
}
.ps-tag__grosszeit > div.ist-vorbei { transform: translate3d(0, -24px, 0); }
.ps-tag__grosszeit > div.ist-aktiv { opacity: 1; transform: none; }
.ps-tag__grosszeit b { font: 300 clamp(96px, 12vw, 184px)/.9 var(--font-display); letter-spacing: var(--ls-display); }
.ps-tag__grosszeit i { font: 600 var(--fs-eyebrow)/1.2 var(--font-sans); font-style: normal; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--sonne-300); }
@media (min-width: 900px) { .ps-tag__grosszeit { display: grid; } }

.ps-start .ps-tag.ist-buehne .ps-tag__schritte { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; }
.ps-start .ps-tag.ist-buehne .ps-tag__intro { min-height: 110vh; padding-top: 0; padding-bottom: 12vh; background: none; }
.ps-start .ps-tag.ist-buehne .ps-tag__intro::after { display: none; }
.ps-start .ps-tag.ist-buehne .ps-station {
	display: flex;
	align-items: center;
	min-height: 120vh;
	padding: 0 calc(max(0px, (100% - var(--container)) / 2) + var(--gutter));
}
.ps-start .ps-tag.ist-buehne .ps-station > .ps-station__karte { margin: 0; max-width: 528px; width: 100%; }
.ps-start .ps-tag.ist-buehne .ps-station:last-child { min-height: 110vh; align-items: flex-end; padding-bottom: 12vh; }

@media (max-width: 599px) {
	.ps-start .ps-station > .ps-tag__bild { aspect-ratio: 4 / 3; }
	.ps-start .ps-station > .ps-station__karte { margin: -48px 12px 0; }
	.ps-start .ps-station__karte h3 { font-size: 28px; }
	.ps-tag__punkt span { font-size: 10px; letter-spacing: .06em; }
}