/* ── Hero der Startseite ──────────────────────────────────────
   Am Original vermessen (1440x900 UND 1920x1080), daraus die
   dahinterliegende Regel abgeleitet statt Pixelwerte kopiert:

     · Die Wortmarke endet bei zwei Dritteln der Fensterhoehe.
     · Der Claim beginnt exakt an der Falz (100vh).
     · Die Schriftgrade sind FEST, nicht mitskalierend — 35 / 68.4 /
       28.5px sind bei beiden Fenstergroessen identisch. Sie werden
       hier nur nach unten begrenzt, damit auf schmalen Geraeten
       nichts anstoesst.

   Daraus ergibt sich die Hero-Hoehe von selbst; eine gesetzte
   Gesamthoehe (vorher 134vh) braucht es nicht.                  */

.pg-hero {
	/* Zeilenboxen und Abstaende des oberen Blocks — sie bestimmen,
	   wie weit oben der Block beginnen muss, damit seine Unterkante
	   auf der Zielmarke landet. */
	--pg-eyebrow-zeile:   27px;
	--pg-eyebrow-abstand: 40px;
	--pg-marke-zeile:     68px;
	--pg-marke-unten:     calc(200vh / 3); /* exakt zwei Drittel, nicht 66.67 */
	--pg-falz:            100vh;    /* dort beginnt der Claim */

	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 0;
	padding-top: calc(
		var(--pg-marke-unten)
		- var(--pg-eyebrow-zeile)
		- var(--pg-eyebrow-abstand)
		- var(--pg-marke-zeile)
	);
	padding-bottom: 0;
}

/* Startseite: Header ist oben ausgeblendet und fliegt beim Scrollen
   von oben ein (dann sticky). JS schaltet .is-visible ab einer
   Scroll-Schwelle. Reduzierte Bewegung: Header bleibt sichtbar. */
.pg-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	transform: translateY(-100%);
	transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-header.is-visible {
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.pg-header {
		position: sticky;
		transform: none;
		transition: none;
	}
}

/* Der Header ist auf der Startseite fixed, liegt also ausserhalb des
   Flusses. Ohne diese Regel schiebt der Block-Gap von <main> alles um
   24px nach unten. */
main {
	margin-block-start: 0;
}

/* Eyebrow „DAS IST" — 35px, Zeilenbox 27px (also enger als der
   geerbte Durchschuss), keine Sperrung. */
.pg-hero .pg-eyebrow {
	font-size: min(2.1875rem, 6.5vw);
	letter-spacing: normal;
	line-height: .771;   /* 27px auf 35px */
	margin: 0 0 var(--pg-eyebrow-abstand);
}

/* Wortmarke — 68.4px, Sperrung 0.2em, versal. Der Abstand nach unten
   traegt den Claim genau auf die Falz. */
.pg-wordmark {
	position: relative;
	font-family: var(--wp--preset--font-family--acanthus);
	/* Nach unten begrenzt auf 35px — so gross setzt das Original die
	   Wortmarke auch auf dem Handy. */
	font-size: clamp(2.1875rem, 6.7vw, 4.275rem);
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	margin: 0 0 calc(var(--pg-falz) - var(--pg-marke-unten));
	font-weight: 400;
}

.pg-wordmark span {
	display: inline-block;
	will-change: transform;
	transform: translate(var(--pg-x, 0em), var(--pg-y, 0em));
}

/* Weisser Kreis hinterm P — am ersten Buchstaben verankert, wandert
   mit der Animation mit. isolation:isolate haelt ihn ueber dem
   Sektions-Hintergrund (sonst schluckt ihn z-index:-1). */
.pg-wordmark span:first-child {
	position: relative;
	isolation: isolate;
}
.pg-wordmark span:first-child::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 1.61em;   /* Original: 110px auf 68.4px Schriftgrad */
	height: 1.61em;
	border-radius: 50%;
	background: var(--wp--preset--color--weiss);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Claim — 28.5px kursiv, Durchschuss 1.3. Das Original setzt feste
   Zeilenumbrueche statt einer max-width, damit der Umbruch bei jeder
   Breite gleich aussieht. */
.pg-hero .pg-claim {
	margin: 0;
	font-family: var(--wp--preset--font-family--acanthus);
	font-style: italic;
	font-size: min(1.78125rem, 5vw);
	line-height: 1.3;
}

/* Trennstrich — 160px hoch, 2px breit, 35px unter dem Claim */
.pg-hero .pg-vline {
	width: 2px;
	height: min(160px, 18vh);
	margin: 35px 0 0;
}

/* Kleine Screens: der Zwei-Drittel-Ansatz ergibt hier zu viel
   Leerraum, deshalb rueckt der Block nach oben und die Falz-Bindung
   des Claims entfaellt. */
@media (max-width: 640px) {
	.pg-hero {
		--pg-marke-unten: 45vh;
		--pg-falz: 72vh;
	}
	/* Bei 35px passt „PILZGARTEN" mit 0.2em Sperrung nicht mehr in
	   eine Zeile — das Original gibt hier auf 0.1em nach und erlaubt
	   den Umbruch. */
	.pg-wordmark { letter-spacing: .1em; white-space: normal; }
	.pg-hero .pg-claim { padding-inline: 1.25rem; }
	.pg-hero .pg-vline { height: 5rem; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.pg-wordmark span { transform: none !important; }
}