/*
 * Galerie — Auftakt
 * =================
 *
 * **Dasselbe Bauteil trägt auch den Auftakt von „Über uns"** (seit dem
 * 14.10.2026, `patterns/ueber-auftakt.php`, Modifier `ld-gauftakt--ueber`) —
 * dort mit anderem Bild und anderen Texten. Wer hier etwas ändert, sieht beide
 * Seiten an.
 *
 * Ein Bildschirm über der Galerie auf /galerie/, nachgebaut nach dem Auftakt
 * von belgradearbor.rs/en/about-the-investor (`#Hero`). Am 14.10.2026 dort
 * gemessen und aus dem Code gelesen; alle Maße in Arbors Grundmaß
 * `--ld-pille-e` (bei 1512 12,55 px, bei 2056 16 px).
 *
 * | | 1512 / 2056 (Grundmaße) | 375 |
 * |---|---|---|
 * | Abschnitt | genau ein Bildschirm | ebenso |
 * | Bild | oben −20, Höhe 100 % + 20, `cover` | oben −2,5 rem, Ausschnitt 70 % 50 % |
 * | Bild beim Scrollen | rutscht 20 nach unten, „Anfang oben → Ende oben", `power1.inOut` | ebenso |
 * | Inhaltsbreite | 109,5, mittig (69 bzw. 152 px Rand) | 1,5 rem Rand |
 * | senkrecht | mittig zwischen 12,5 oben und 5 unten | oben 7,5 rem, Abstand 5 rem |
 * | Riesenwort | 10, Regular, Versalien, Zeilenhöhe 1, drei Viertel der Breite | 2,7 rem |
 * | Abstand darunter | 3,75 | 0 |
 * | Textblock | 9,1 eingerückt, 27,4 breit | volle Breite |
 * | Kennzeile | 1,25, Zeilenhöhe 1, Abstand 1,25, Akzentfarbe | 1,25 rem |
 * | Absatz | 1, Zeilenhöhe 1,2, fast weiß | 1 rem |
 * | Knopf | gefüllt (Sand, dunkle Schrift), 2,5 Abstand | volle Breite |
 * | Scroll-Hinweis | Kreis 4, Haarlinie, 5 über dem unteren Rand | 3,75 rem |
 *
 * **Bewegung aus ihrem Code:** Riesenwort und Kennzeile Buchstabe für
 * Buchstabe, 2 Grundmaße von unten, 0,9 s, 25 ms Versatz, `power3.out`, 0,5 s
 * Verzug; der Absatz Wort für Wort, 1 Grundmaß, 0,9 s, 60 ms, ohne Verzug. Der
 * Pfeil im Kreis pulsiert endlos: 0,8 s von oben ein, 0,8 s nach unten aus.
 *
 * **Farben übersetzt:** Arbors Sand für das Riesenwort ist bei uns Terrakotta
 * hell — genau dafür ist der Ton angelegt (Terrakotta-Rosé auf die Helligkeit
 * von Arbors Sandgold). Ihr Gelb der Kennzeile ist bei uns Salbei: Signalgelb
 * bleibt dem Abschnitt „Architektur" vorbehalten.
 *
 * **Bei uns liegt eine Vignette links**, bei Arbor nicht: Ihr Foto ist dunkel
 * und unscharf, unseres ist ein helles Rendering mit viel Himmel. Gemessen im
 * Fünf-Prozent-Quantil, an der Tinte jeder Zeile (Schreibtisch 1280, 1512,
 * 2056 / Telefon 375, 430):
 *
 * | | Schreibtisch | Telefon |
 * |---|---|---|
 * | Riesenwort, Zeile 1 | 4,75 – 4,80 | 4,46 – 4,54 |
 * | Riesenwort, Zeile 2 | 3,60 – 3,97 | 4,39 – 4,44 |
 * | Kennzeile | 4,99 – 5,06 | 4,42 – 4,49 |
 * | Absatz | 6,91 – 6,93 | 6,48 – 6,78 |
 *
 * Ohne die Verdichtung nach rechts stand die zweite Zeile bei 1,4: „…GEN"
 * läuft über das helle Sofa.
 */

.ld-gauftakt {
	--ld-ga-e: var( --ld-pille-e );
	position: relative;
	box-sizing: border-box;
	min-height: 100svh;
	overflow: clip;
	background-color: var( --wp--preset--color--contrast );
	/* blockGap: Die Kinder liegen absolut oder sind das einzige im Fluss. */
	margin-block: 0;
}

.ld-gauftakt > * {
	margin-block: 0;
}

/* ------------------------------------------------------------- Das Bild */

.ld-gauftakt__bild {
	position: absolute;
	z-index: 0;
	inset-inline: 0;
	inset-block-start: calc( -20 * var( --ld-ga-e ) );
	height: calc( 100% + 20 * var( --ld-ga-e ) );
	margin: 0;
	translate: 0 calc( var( --ld-ga-p, 0 ) * 20 * var( --ld-ga-e ) );
}

.ld-gauftakt__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * **Die Vignette.** Links, wo der Text steht, dicht; nach rechts frei, damit
 * der Blick über die Dächer bleibt. Sie liegt am Abschnitt, nicht am Bild —
 * sie soll nicht mitrutschen.
 */
.ld-gauftakt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			color-mix( in srgb, var( --wp--preset--color--contrast ) 82%, transparent ) 0%,
			color-mix( in srgb, var( --wp--preset--color--contrast ) 76%, transparent ) 45%,
			color-mix( in srgb, var( --wp--preset--color--contrast ) 68%, transparent ) 70%,
			color-mix( in srgb, var( --wp--preset--color--contrast ) 30%, transparent ) 88%,
			transparent 100%
		);
}

/* ------------------------------------------------------------ Der Inhalt */

.ld-gauftakt__inhalt {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	width: min( 100% - 2 * 1.5rem, 109.5 * var( --ld-ga-e ) );
	margin-inline: auto;
	padding-block: calc( 12.5 * var( --ld-ga-e ) ) calc( 5 * var( --ld-ga-e ) );
}

.ld-gauftakt__titel {
	/* Zwei Zeilen, gebrochen im Text; „DIE WOHNUNGEN" braucht mehr als ihre drei Viertel. */
	width: 100%;
	margin: 0 0 calc( 3.75 * var( --ld-ga-e ) );
	font-size: calc( 10 * var( --ld-ga-e ) );
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	--ld-steig-weg: calc( 2 * var( --ld-ga-e ) );
	--ld-steig-dauer: 0.9s;
	--ld-steig-takt: 0.025;
	--ld-steig-verzug: 0.5s;
}

.ld-gauftakt__text {
	width: calc( 27.4 * var( --ld-ga-e ) );
	margin-inline-start: calc( 9.1 * var( --ld-ga-e ) );
}

.ld-gauftakt__text > * {
	margin-block: 0;
}

.ld-gauftakt__kicker {
	margin-block-end: calc( 1.25 * var( --ld-ga-e ) );
	font-size: calc( 1.25 * var( --ld-ga-e ) );
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	--ld-steig-weg: calc( 2 * var( --ld-ga-e ) );
	--ld-steig-dauer: 0.9s;
	--ld-steig-takt: 0.025;
	--ld-steig-verzug: 0.5s;
}

.ld-gauftakt__absatz {
	font-size: var( --ld-ga-e );
	line-height: 1.2;
	--ld-steig-weg: var( --ld-ga-e );
	--ld-steig-dauer: 0.9s;
	--ld-steig-takt: 0.06;
}

/*
 * **Der Knopf ist gefüllt** — Arbors „darkFill": Sand mit dunkler Schrift,
 * bei uns Terrakotta hell und Hofgrün tief (7,3 zu 1). Beim Darüberfahren
 * wird er heller, die Zeile rollt wie bei jedem Knopf der Seite.
 */
.ld-gauftakt__knopf {
	margin-block-start: calc( 2.5 * var( --ld-ga-e ) );
	--ld-schalter-farbe: var( --wp--preset--color--contrast );
}

.ld-gauftakt__knopf :is( a, button ) {
	border-color: var( --wp--preset--color--terrakotta-hell );
	background-color: var( --wp--preset--color--terrakotta-hell );
	color: var( --wp--preset--color--contrast );
}

.ld-gauftakt__knopf :is( a, button ):hover,
.ld-gauftakt__knopf :is( a, button ):focus-visible {
	background-color: var( --wp--preset--color--base );
}

/*
 * Das Zeichen steht hier unmittelbar und nicht über `--ld-schalter-bild`: Eine
 * Adresse in einer eigenen Eigenschaft löst der Browser gegen das Stylesheet
 * auf, das sie **benutzt** — das ist `base.css`, eine Ordnerstufe höher, und
 * der Pfeil fehlte.
 */
.ld-gauftakt__knopf .ld-schalter__zeile::after {
	content: "";
	-webkit-mask: url( "../../images/symbole/pfeil.svg" ) center / contain no-repeat;
	mask: url( "../../images/symbole/pfeil.svg" ) center / contain no-repeat;
}

/* ------------------------------------------------------ Der Scroll-Hinweis */

.ld-gauftakt__weiter {
	position: absolute;
	z-index: 2;
	inset-block-end: calc( 5 * var( --ld-ga-e ) );
	inset-inline-start: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc( 4 * var( --ld-ga-e ) );
	aspect-ratio: 1;
	border: 1px solid var( --wp--preset--color--terrakotta-hell );
	border-radius: 999px;
	transform: translateX( -50% );
	pointer-events: none;
}

.ld-gauftakt__pfeil {
	display: block;
	/* Das Zeichen zeigt nach rechts und wird nach unten gedreht. */
	width: calc( 1.5 * var( --ld-ga-e ) );
	height: calc( 1.5 * var( --ld-ga-e ) );
	background-color: var( --wp--preset--color--terrakotta-hell );
	mask: url( "../../images/symbole/pfeil.svg" ) center / contain no-repeat;
	rotate: 90deg;
	animation: ld-gauftakt-puls 1.6s cubic-bezier( 0.45, 0, 0.55, 1 ) infinite;
}

@keyframes ld-gauftakt-puls {
	0% {
		translate: 0 calc( -0.5 * var( --ld-ga-e ) );
		opacity: 0;
	}

	50% {
		translate: 0 0;
		opacity: 1;
	}

	100% {
		translate: 0 calc( 0.5 * var( --ld-ga-e ) );
		opacity: 0;
	}
}

/* ------------------------------------------------------------ Ohne Bewegung */

@media ( prefers-reduced-motion: reduce ) {

	.ld-gauftakt__bild {
		translate: none;
	}

	.ld-gauftakt__pfeil {
		animation: none;
	}
}

/* ==========================================================================
   Schmale Geräte — dieser Block steht bewusst am Ende der Datei
   ========================================================================== */

@media ( max-width: 767px ) {

	.ld-gauftakt__bild {
		inset-block-start: -2.5rem;
	}

	.ld-gauftakt__bild img {
		object-position: 70% 50%;
	}

	/* Oben steht der Text, die Vignette wandert mit: von oben nach unten. */
	.ld-gauftakt::before {
		background: linear-gradient(
			180deg,
			color-mix( in srgb, var( --wp--preset--color--contrast ) 82%, transparent ) 0%,
			color-mix( in srgb, var( --wp--preset--color--contrast ) 76%, transparent ) 60%,
			color-mix( in srgb, var( --wp--preset--color--contrast ) 34%, transparent ) 82%,
			color-mix( in srgb, var( --wp--preset--color--contrast ) 45%, transparent ) 100%
		);
	}

	.ld-gauftakt__inhalt {
		justify-content: flex-start;
		gap: 5rem;
		width: calc( 100% - 3rem );
		padding-block: 7.5rem 10rem;
	}

	.ld-gauftakt__titel {
		width: 100%;
		margin-block-end: 0;
		/*
		 * Arbors 2,7 rem, aber höchstens so groß, dass „DIE WOHNUNGEN" (8,34
		 * Schriftgrade, zerlegt ohne Unterschneidung etwas mehr) auf eine Zeile passt —
		 * sonst drei Zeilen statt ihrer zwei.
		 */
		font-size: min( 2.7rem, ( 100vw - 3rem ) / 8.9 );
	}

	.ld-gauftakt__text {
		width: 100%;
		margin-inline-start: 0;
	}

	.ld-gauftakt__kicker {
		font-size: 1.25rem;
		margin-block-end: 1.25rem;
	}

	.ld-gauftakt__absatz {
		font-size: 1rem;
	}

	.ld-gauftakt__knopf,
	.ld-gauftakt__knopf :is( a, button ) {
		width: 100%;
	}

	.ld-gauftakt__weiter {
		inset-block-end: 3.75rem;
		width: 4rem;
	}

	.ld-gauftakt__pfeil {
		width: 1.5rem;
		height: 1.5rem;
	}
}