/*
 * Presslauer 2026, Startseiten-Abschnitte (nur auf Seiten mit diesen Abschnitten geladen).
 * Übernommen aus presslauer-child/assets/start/basis.css (identische Gestaltung).
 * Basis der Startseite 2026: Seitengrund, Typografie, Block-Stile (Dachzeile, Einleitung,
 * Display, Buttons), Abschnittsraster, Reveal-Zustände, Sommer/Winter-Sichtbarkeit.
 * Keine Abhängigkeit von Klassen des Parent-Themes; alles hängt an ps-* bzw. is-style-ps-*.
 */

/* ---------- Seite ---------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body.ps-start-seite {
	margin: 0;
	background: var(--schnee);
	color: var(--text-body);
	font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
.ps-start-seite *, .ps-start-seite *::before, .ps-start-seite *::after { box-sizing: border-box; }
.ps-start-seite img { max-width: 100%; height: auto; display: block; }
.ps-start-seite svg.ps-i { flex: none; display: inline-block; vertical-align: middle; }
.ps-start-seite ::selection { background: var(--sonne-200); color: var(--fels-950); }
.ps-start-seite :focus-visible { outline: 2px solid var(--sonne-500); outline-offset: 2px; }
.ps-start { display: block; position: relative; }


/* ---------- Typografie im Inhalt ---------- */
.ps-start :where(p, h1, h2, h3, h4, ul, ol, figure, blockquote, details) { margin: 0; }
.ps-start :where(h1, h2, h3, h4) {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--text-strong);
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}
.ps-start h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.ps-start h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.ps-start p { text-wrap: pretty; }
.ps-start a { color: var(--text-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
.ps-start a:hover { color: var(--sonne-700); }
.ps-start strong { font-weight: 600; }

/* Dachzeile (Eyebrow) mit Linie */
.ps-start .is-style-ps-dachzeile,
.ps-start-seite .ps-eyebrow-text {
	display: flex;
	align-items: center;
	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 .is-style-ps-dachzeile::before {
	content: "";
	flex: none;
	width: 28px;
	height: 1px;
	background: currentColor;
}

/* Einleitung (Lead) */
.ps-start .is-style-ps-einleitung {
	font: 400 var(--fs-lead)/1.5 var(--font-sans);
	color: var(--text-muted);
}

/* Display-Überschrift */
.ps-start .is-style-ps-display {
	font-weight: 300;
	font-size: var(--fs-display-l);
	line-height: 1;
	letter-spacing: var(--ls-display);
}

/* Auf dunklem Grund */
.ps-start :is(.wp-block-cover, .ps-tag, .ps-abschluss) .is-style-ps-dachzeile { color: var(--sonne-300); }
.ps-start :is(.wp-block-cover, .ps-abschluss) :is(h1, h2, h3) { color: var(--schnee); }
.ps-start :is(.wp-block-cover, .ps-abschluss) .is-style-ps-einleitung { color: var(--tanne-100); }

/* ---------- Abschnittsraster ---------- */
/* Block-Theme: Abschnitte der Inhaltsspalte ohne Block-Abstand (wie im klassischen Theme) */
.ps-start > .wp-block-post-content > *, .ps-start.wp-block-post-content > * { margin-block: 0; }
.ps-start :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }
.ps-start :is(.ps-abschnitt, .ps-merkmale, .ps-abschluss, .ps-faq) {
	padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
}
.ps-start .ps-abschnitt { padding-block: var(--section-y); position: relative; }

/* Großes Initial hinter der Überschrift (W, B), Parallax über --ps-px */
.ps-start :is(.ps-initial-w, .ps-initial-b) { position: relative; }
.ps-start :is(.ps-initial-w, .ps-initial-b)::before {
	position: absolute;
	top: -0.42em;
	left: -0.06em;
	z-index: 0;
	font: 300 clamp(180px, 22vw, 300px)/1 var(--font-display);
	color: var(--tanne-100);
	pointer-events: none;
	user-select: none;
	transform: translate3d(0, var(--ps-px, 0px), 0);
	will-change: transform;
}
.ps-start .ps-initial-w::before { content: "W"; content: "W" / ""; }
.ps-start .ps-initial-b::before { content: "B"; content: "B" / ""; top: -0.45em; }
.ps-start :is(.ps-initial-w, .ps-initial-b) > * { position: relative; z-index: 1; }

/* ---------- Buttons (Block-Stile is-style-ps-*) ---------- */
.ps-start .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ps-start .wp-block-button { margin: 0; }
.ps-start .wp-block-button__link,
.ps-start-seite .ps-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 24px;
	border: 1.5px solid transparent;
	border-radius: var(--radius-control);
	background: var(--tanne-600);
	color: var(--schnee);
	font: 600 13px/1 var(--font-sans);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast);
}
.ps-start .wp-block-button__link:hover,
.ps-start-seite .ps-knopf:hover { background: var(--tanne-800); color: var(--schnee); }
.ps-start .wp-block-button__link:active,
.ps-start-seite .ps-knopf:active { transform: translateY(1px); }

/* Lange Button-Texte auf schmalen Bildschirmen umbrechen statt seitlich überstehen (wie basis.css des Themes) */
@media (max-width: 599px) {
	.ps-start .wp-block-button__link { white-space: normal; height: auto; min-height: 48px; padding-block: 12px; line-height: 1.35; text-align: center; }
}

.ps-start .is-style-ps-akzent .wp-block-button__link,
.ps-start-seite .ps-knopf--akzent { background: var(--sonne-500); color: var(--fels-950); }
.ps-start .is-style-ps-akzent .wp-block-button__link:hover,
.ps-start-seite .ps-knopf--akzent:hover { background: var(--sonne-400); color: var(--fels-950); }

.ps-start .is-style-ps-primaer .wp-block-button__link { background: var(--tanne-600); color: var(--schnee); }

.ps-start .is-style-ps-umriss .wp-block-button__link { background: transparent; color: var(--tanne-700); border-color: var(--tanne-600); }
.ps-start .is-style-ps-umriss .wp-block-button__link:hover { background: var(--tanne-50); color: var(--tanne-800); border-color: var(--tanne-800); }

.ps-start .is-style-ps-hell .wp-block-button__link,
.ps-start-seite .ps-knopf--hell { background: transparent; color: var(--schnee); border-color: rgba(252, 250, 245, .8); }
.ps-start .is-style-ps-hell .wp-block-button__link:hover,
.ps-start-seite .ps-knopf--hell:hover { background: rgba(252, 250, 245, .14); border-color: var(--schnee); color: var(--schnee); }

.ps-start .is-style-ps-textlink .wp-block-button__link {
	height: auto;
	padding: 6px 0;
	background: transparent;
	color: var(--tanne-700);
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	font-size: 12px;
}
.ps-start .is-style-ps-textlink .wp-block-button__link:hover { background: transparent; color: var(--sonne-700); }

.ps-start .ps-gross .wp-block-button__link,
.ps-start-seite .ps-knopf--gross { height: 56px; padding: 0 32px; font-size: 14px; }
.ps-start-seite .ps-knopf--klein { height: 36px; padding: 0 16px; font-size: 12px; }

.ps-start-seite .ps-pfeil-icon { transition: transform var(--dur-base) var(--ease-out); }
.ps-start .wp-block-button__link:hover .ps-pfeil-icon { transform: translateX(3px); }

/* ---------- Reveal (nur mit JS und ohne reduzierte Bewegung, siehe start.js) ---------- */
.ps-js .ps-rv {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 900ms var(--ease-out) var(--ps-d, 0ms), transform 900ms var(--ease-out) var(--ps-d, 0ms);
}
.ps-js .ps-rv.ist-sichtbar { opacity: 1; transform: none; }

/* ---------- Sommer/Winter: nur mit JS wird eine Saison ausgeblendet ---------- */
/* Nur mit Bewegung: bei reduzierter Bewegung bleiben beide Varianten sichtbar (alle Inhalte lesbar). */
html.ps-saison-filter.ps-saison-winter .ps-start .ps-nur-sommer,
html.ps-saison-filter.ps-saison-sommer .ps-start .ps-nur-winter { display: none; }

/* ---------- Reduzierte Bewegung: alles ruhig ---------- */
@media (prefers-reduced-motion: reduce) {
	.ps-start-seite *, .ps-start-seite *::before, .ps-start-seite *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.ps-js .ps-rv { opacity: 1; transform: none; }
}