/*
 * Abschnitt: Kontakt
 *
 * Nachgebaut nach Arbors Kontaktseite: ein Bildschirm auf dunklem Grund, links
 * zur Hälfte ein Foto mit Riesenüberschrift und kurzem Absatz unten in der Ecke,
 * rechts das Formular. Alle Maße dort bei 2056 Fensterbreite gemessen und in
 * vw umgerechnet, damit sie mitwachsen:
 *
 *   Grund                      ganzer Bildschirm, 100 svh
 *   Foto links                 50 % der Breite, volle Höhe, beschnitten
 *   Riesenüberschrift          100 px = 4,86 vw, Light, Versalien, Zeilenhöhe 1,0
 *   Textblock links            96 px = 4,67 vw vom Rand, 100 px vom unteren Rand
 *   Textblock, Breite          560 px = 27,2 vw
 *   Formularspalte             beginnt bei 58,1 %, 584 px = 28,4 vw breit
 *   Reiter                     48 px hoch, Radius voll, Polster 24, Lücke 16
 *   Strich zwischen Reitern    16 px lang, 1 px hoch
 *   Reiter- und Feldschrift    14 px, Laufweite 0,02 em, Versalien
 *   Eingabe                    16 px, kein Kasten, 1 px Linie unten
 *   Feldraster                 zwei Spalten, 20 px Lücke, Zeilenabstand 110 px
 *   Kontrollkästchen           16 × 16, links aus der Spalte herausgerückt
 *   Absenden                   229 × 56, Radius voll, gefüllt
 *
 * **Zwei Stellen weichen bewusst ab, beide wegen der Lesbarkeit.**
 *
 * Erstens die Farbe des aktiven Reiters: In der Vorlage steht sandfarbene
 * Schrift auf grüner Füllung, nachgerechnet **2,80 zu 1** — unter der Schwelle
 * von 4,5 für kleine Schrift. Hier ist die Füllung Salbei und die Schrift
 * Hofgrün tief, das sind 8,48.
 *
 * Zweitens die Zeilenhöhe des Absatzes: dort 1,2, hier 1,4. Bei 1,2 stoßen im
 * Deutschen die Umlaute an die Zeile darüber — dieselbe Ausnahme wie bei den
 * mehrzeiligen Versalien.
 *
 * Kontraste auf Hofgrün tief, nachgerechnet: Kalkweiß 12,15 und Salbei 8,48
 * tragen auch 14 Pixel; Perlmausgrau mit 3,29 und Card Room Green mit 2,79
 * nicht. Die Feldbeschriftungen stehen deshalb in Salbei und die Eingaben in
 * Kalkweiß — der Wert heller als sein Etikett.
 */

.ld-kontakt {
	--ld-k-spalte: 28.4vw;
	--ld-k-rand: 4.67vw;
	--ld-k-zeile: 5.35vw;
	--ld-k-grad: clamp(0.62rem, 0.68vw, 0.82rem);

	position: relative;
	overflow: clip;
	padding: 0;
}

.ld-kontakt .ld-kontakt__buehne {
	position: relative;
	height: 100svh;
	margin: 0;
}

/* WordPress verteilt über blockGap Ränder an alle Kinder außer dem ersten. */
.ld-kontakt__buehne > *,
.ld-kontakt__einstieg > *,
.ld-kontakt__spalte > * {
	margin-block: 0;
}

/* --------------------------------------------------------------- Das Foto */

/*
 * Genau die halbe Breite und beschnitten — in der Vorlage ist die Aufnahme
 * darin rund ein Fünftel größer als ihr Ausschnitt.
 */
.ld-kontakt__bild {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 1;
	width: 50%;
	margin: 0;
	overflow: clip;
}

/*
 * Zwei Klassen im Selektor, sonst greift die Angabe nicht: WordPress gibt dem
 * Bild `width: auto` mit, und die Aufnahme stünde als schmaler Streifen darin.
 */
.ld-kontakt .ld-kontakt__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * **Der Ausschnitt ist gewählt, nicht mittig.** Die Aufnahme ist eine
	 * Straßenszene im Querformat; hier steht davon ein hochkantes Stück. Bei
	 * mittigem Ausschnitt läge die Figur genau unter der Überschrift. 44 zu 34
	 * Prozent rückt sie nach rechts und oben — die Überschrift steht damit auf
	 * ruhiger, bewegungsunscharfer Fläche.
	 *
	 * Wer das Bild tauscht, prüft diesen Wert mit: Er gehört zur Aufnahme und
	 * nicht zum Entwurf.
	 */
	object-position: 44% 34%;
	/*
	 * Ein Fünftel größer als sein Ausschnitt — daraus entsteht der Spielraum,
	 * in dem das Bild der Maus folgen kann, ohne dass an einer Kante der Grund
	 * durchscheint. Der Faktor ist in der Vorlage gemessen: `scale(1.2)`.
	 *
	 * `--ld-k-x` und `--ld-k-y` setzt das Skript; ohne Skript und ohne Maus
	 * bleiben sie null und das Bild steht einfach vergrößert und mittig.
	 */
	transform: translate3d(var(--ld-k-x, 0px), var(--ld-k-y, 0px), 0) scale(1.2);
	will-change: transform;
}

/*
 * Ein Schleier über der unteren Hälfte des Fotos. Die Überschrift steht sonst
 * je nach Aufnahme auf einer hellen Stelle und verschwindet — beim jetzigen
 * Platzhalter genau über einer beleuchteten Tischplatte. Er liegt auf dem Foto
 * und nicht als eigene Fläche darunter, damit er mit dem Bild beschnitten wird.
 *
 * Sobald das echte Rendering da ist und unten dunkel genug läuft, kann er
 * schwächer werden — weg sollte er nicht, sonst hängt die Lesbarkeit an der
 * Bildwahl des Kunden.
 */
.ld-kontakt__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--graphit) 82%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--graphit) 55%, transparent) 24%,
		transparent 58%
	);
	pointer-events: none;
}

/* ------------------------------------------- Überschrift und Absatz links */

.ld-kontakt__einstieg {
	position: absolute;
	z-index: 2;
	inset-inline-start: var(--ld-k-rand);
	inset-block-end: 4.86vw;
	width: 27.2vw;
	margin: 0;
}

.ld-kontakt__wort {
	margin: 0;
	font-size: clamp(2rem, 4.86vw, 6rem);
	/*
	 * Light — ein Aussagesatz in Displaygröße, kein Abschnitts-Riesenwort,
	 * wie in der Vorlage.
	 */
	font-weight: 300;
	line-height: 1;
	letter-spacing: var(--ld-light-lauf);
	text-transform: uppercase;
}

.ld-kontakt__absatz {
	margin-block-start: 1.9vw;
	font-size: clamp(0.7rem, 0.78vw, 0.95rem);
	line-height: 1.4;
}

/* ------------------------------------------------------ Die Formularspalte */

/*
 * **Die Spalte steht senkrecht mittig, nicht an einer festen Oberkante.**
 *
 * Vorgeschichte in zwei Schritten: Das neue Wohnungsfeld legt eine ganze
 * Rasterzeile dazu, damit klebte der Absenden-Knopf mit 35 Bildpunkten am
 * Seitenende. Die Spalte wanderte daraufhin nach oben — und stand dann oben.
 * Bei 1512 × 982 waren es 108 Bildpunkte über den Reitern gegen 155 unter dem
 * Knopf, bei 1920 × 1080 sogar 97 gegen 199.
 *
 * **Mittig gerechnet stimmt es von allein**, auf jeder Fenstergröße, und es
 * bleibt richtig, wenn das Formular noch einmal ein Feld dazubekommt. Eine
 * feste Oberkante müsste dann wieder nachgerechnet werden.
 *
 * **Zentriert wird über `transform`, nicht über einen negativen Rand** — die
 * Regel aus dem blockGap-Abschnitt: WordPress setzt am ersten Kind eines
 * Flow-Layouts `margin-block-start: 0` mit zwei Klassenstufen und sticht damit
 * jede einzelne eigene Klasse aus.
 *
 * **Die gemessenen Werte bleiben unangetastet:** der Zeilenabstand von 110
 * Bildpunkten im Feldraster und die 80 unter dem letzten Feld stehen so in der
 * Maßtabelle oben. Verschoben wurden nur die drei Maße, die nicht aus der
 * Vorlage stammen.
 */
.ld-kontakt__spalte {
	position: absolute;
	z-index: 2;
	inset-inline-start: 58.1%;
	inset-block-start: 50%;
	transform: translateY( -50% );

	/*
	 * **Beide Formulare liegen in derselben Rasterzelle.** Damit ist die
	 * Spalte immer so hoch wie das längere, und der Wechsel zwischen den
	 * Reitern verschiebt gar nichts.
	 *
	 * **Ohne das springt die Mitte.** Nachgemessen: Der Rückruf-Reiter hat vier
	 * Felder weniger, die Spalte wurde 128 Bildpunkte kürzer — zentriert rückte
	 * damit alles um **64 Bildpunkte** nach unten, und zwar samt der Reiter,
	 * die man gerade angeklickt hat. Bei fester Oberkante fiel das nicht auf;
	 * mit der Mitte fällt es sofort auf.
	 *
	 * Dieselbe Bauart wie das Faktenfeld der Ausstattungsliste und die Legende
	 * der Badvariationen, und dort steht auch die Begründung.
	 */
	display: grid;
	grid-template-columns: 1fr;
	width: var(--ld-k-spalte);
	margin: 0;
}


/* ------------------------------------------------- Kaufen oder mieten? */

/*
 * **Das Tor vor dem Formular — so wenig wie möglich.** Eine Frage, zwei
 * Knöpfe, und erst nach dem Klick ein Satz. Es liegt auf demselben
 * Rasterplatz wie die Reiter und das Formular; solange es offen ist, trägt
 * die Spalte `is-tor` und die beiden anderen treten ab.
 *
 * **Die Klasse und nicht `hidden`:** An den Formularen steht `display: grid`,
 * und eine Klasse sticht ein nacktes Attribut aus — dieselbe Browser-Vorgabe,
 * die auf der Wohnungsseite schon einmal die ausgeblendeten Raumzeilen
 * stehen ließ.
 *
 * **Die Maße rechnen in rem, nicht in vw.** Der Rest des Abschnitts hängt am
 * Fenster, weil er eine ganze Bildschirmhälfte füllt; dieses Tor ist dagegen
 * ein kleiner Block aus drei Zeilen, und seine Abstände sollen sich zur
 * Schrift verhalten und nicht zur Fensterbreite.
 */
.ld-kontakt__tor {
	grid-area: 1 / 1;
	/*
	 * **Mittig statt oben.** Oben steht sonst die Reiterzeile, und darunter
	 * folgt ein ganzes Formular; drei Zeilen an derselben Stelle wirken wie
	 * ein abgebrochener Anfang. In der Mitte der dunklen Hälfte ist es ein
	 * eigener, ruhiger Moment — und genau das soll es sein.
	 */
	align-self: center;
	max-width: 26rem;
}

.ld-kontakt__spalte.is-tor > .ld-kontakt__reiter,
.ld-kontakt__spalte.is-tor > .ld-kontakt__satz {
	display: none;
}

/*
 * Die Frage steht im Grad des Fließtextes und ohne Fettung: Sie ist eine
 * Frage, keine Überschrift. **Die englische Zeile steht in derselben Größe
 * und Farbe wie die deutsche** — seit dem 14.10.2026, vom Kunden so gewünscht.
 * Vorher war sie eine Spur kleiner und in Salbei; in der Absage darunter war
 * sie dagegen versehentlich größer als die deutsche.
 */
.ld-kontakt__tor-frage {
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.05rem, 1.25vw, 1.4rem);
	line-height: 1.4;
}

.ld-kontakt__tor-en {
	display: block;
	margin-block-start: 0.3em;
}

.ld-kontakt__tor-wahl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/*
 * **Derselbe Knopf wie die Reiter**, nur mit eigener Klasse: Die Reiter
 * hängen am Umschalten der beiden Formulare, und ein dritter Knopf in dieser
 * Liste liefe dort mit. Maße, Farbe und Takt sind von dort übernommen.
 */
.ld-kontakt__torknopf {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-height: 2.75rem;
	padding-inline: 1.35rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 45%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--sage);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ld-k-grad);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.4s ease;
}

.ld-kontakt__torknopf span {
	opacity: 0.6;
}

@media (hover: hover) {
	.ld-kontakt__torknopf:not(:disabled):hover {
		border-color: var(--wp--preset--color--sage);
		background: var(--wp--preset--color--sage);
		color: var(--wp--preset--color--graphit);
	}
}

/*
 * **Der abgelehnte Weg bleibt stehen und wird blass.** Vom Kunden so
 * gewünscht: Wer „mieten" gewählt hat, soll sehen, dass die Wahl
 * registriert ist — und dass nur noch ein Weg offen ist. Dieselbe Deckung
 * wie der stumme 3D-Reiter auf der Wohnungsseite.
 */
.ld-kontakt__torknopf:disabled {
	opacity: 0.38;
	cursor: default;
}

/*
 * Der Satz kommt unter die Knöpfe und blendet ein — er ist die Antwort auf
 * einen Klick, nicht Teil der Frage.
 */
.ld-kontakt__tor-absage {
	margin-block-start: 1.5rem;
	animation: ld-kontakt-absage 0.45s cubic-bezier(0.33, 0, 0.2, 1) both;
}

.ld-kontakt__tor-absage p {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.88rem, 0.95vw, 1.02rem);
	line-height: 1.5;
}

.ld-kontakt__tor-absage .ld-kontakt__tor-en {
	margin-block-start: 0.5em;
}

@keyframes ld-kontakt-absage {
	from {
		opacity: 0;
		transform: translateY(0.4rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ld-kontakt__reiter {
	grid-area: 1 / 1;
}

.ld-kontakt__satz {
	grid-area: 2 / 1;
	margin-block: 0;
}

/*
 * **Das abgetretene Formular verschwindet, ohne seinen Platz aufzugeben.**
 * `[hidden]` bedeutet `display: none`, und damit fiele es aus der Rasterzelle —
 * die Spalte wäre wieder unterschiedlich hoch. `visibility` nimmt es aus dem
 * Bild **und** aus der Tabreihenfolge, lässt es aber messen.
 *
 * Die eigene Angabe schlägt `[hidden]` mühelos: Klasse plus Attribut zählt mehr
 * als das nackte Attribut. Dieselbe Mechanik, an der auf der Wohnungsseite
 * einmal `display: flex` das `hidden` ausgestochen hat — hier ist sie erwünscht.
 */
.ld-kontakt__satz[hidden] {
	display: block;
	visibility: hidden;
}

/*
 * **Hier stand bis zum 15.09.2026 hundert Zeilen weiter unten ein zweites
 * `.ld-kontakt__satz[hidden]` mit `display: none`.** Gleiches Gewicht,
 * spätere Zeile — es hat die Regel hier ausgestochen, und zwar lautlos: Die
 * Regel stand da, sie war richtig, und sie verlor trotzdem. Das ist derselbe
 * Fehler wie bei den zwei Mobilblöcken in der Kopfzeile. **Zwei Regeln für
 * dieselbe Sache laufen immer auseinander.**
 */

/* ------------------------------------------------------------ Die Reiter */

.ld-kontakt__reiter {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 4.2vw;
	padding: 0;
	list-style: none;
}

/*
 * Der Haarstrich zwischen zwei Reitern. Er **füllt** die Lücke aus, statt zu
 * ihr hinzuzukommen: In der Vorlage stehen die Pillen 16 Bildpunkte
 * auseinander, und genau diese 16 nimmt der Strich ein.
 */
.ld-kontakt__reiter li + li::before {
	content: "";
	display: block;
	width: 0.78vw;
	height: 1px;
	background-color: color-mix(in srgb, var(--wp--preset--color--sage) 55%, transparent);
}

.ld-kontakt__reiter li {
	display: flex;
	align-items: center;
	margin: 0;
}

.ld-kontakt__knopf {
	box-sizing: border-box;
	height: 2.33vw;
	min-height: 2.4rem;
	padding-inline: 1.17vw;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 45%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--sage);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ld-k-grad);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	/*
	 * **Auch die Reiter rollen ab.** In der Vorlage nachgesehen: Ihre drei
	 * Reiter „Request", „Callback" und „Business" tragen dieselben Klassen wie
	 * der Knopf „Inquire" in der Kopfzeile — es ist dort ein einziges Bauteil,
	 * und ein Reiter ist nur eine Ausprägung davon. Der Takt ist deshalb auch
	 * hier 0,65 Sekunden mit der Kurve der Vorlage statt der eigenen 0,4.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-kontakt__knopf:hover,
.ld-kontakt__knopf:focus-visible {
	border-color: var(--wp--preset--color--sage);
}

/*
 * Der gewählte Reiter. Salbei gefüllt, Schrift in Hofgrün tief — 8,48 zu 1.
 * Die Vorlage füllt hier grün und schreibt sandfarben darauf; das sind 2,80
 * und damit zu wenig für 14 Pixel.
 */
.ld-kontakt__knopf.is-vorn {
	border-color: var(--wp--preset--color--sage);
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--graphit);
}

/* -------------------------------------------------------------- Die Felder */

.ld-kontakt__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0.97vw;
	/*
	 * 2,67 vw Lücke plus Beschriftung und Feld ergeben die 110 Bildpunkte
	 * Zeilenabstand der Vorlage.
	 */
	row-gap: 2.67vw;
}

.ld-kontakt__feld--breit {
	grid-column: 1 / -1;
}

.ld-kontakt__feld {
	display: block;
}

/*
 * Die Beschriftung steht über dem Feld, nicht darin. In der Vorlage ist sie
 * golden; wir haben keinen goldenen Ton, und Perlmausgrau trägt auf diesem
 * Grund nur 3,29. Salbei ist der ruhigste Wert, der 14 Pixel noch trägt.
 */
.ld-kontakt__label {
	display: block;
	margin-block-end: 0.39vw;
	color: var(--wp--preset--color--sage);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ld-k-grad);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * Kein Kasten, nur eine Linie unten — so macht es die Vorlage. Das nimmt dem
 * Formular das Amtliche.
 */
.ld-kontakt__eingabe {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0 0 0.2vw;
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.8rem, 0.78vw, 0.95rem);
	line-height: 1.6;
	transition: border-color 0.35s ease;
}

.ld-kontakt__eingabe:focus {
	outline: none;
	border-block-end-color: var(--wp--preset--color--sage);
}

.ld-kontakt__eingabe:focus-visible {
	border-block-end-color: var(--wp--preset--color--base);
}

textarea.ld-kontakt__eingabe {
	min-height: 4.4vw;
	resize: vertical;
}

/*
 * **Die Anrede** — vom Kunden verlangt (Feedback vom 23.10.2026), weil sie in
 * onOffice ein Auswahlfeld ist: Frau, Herr, Eheleute. Drei kleine Pillen statt
 * eines Auswahlmenüs: Man sieht alle Werte auf einmal, und es ist dasselbe
 * Bauteil wie die Reiter darüber, nur kleiner. Darunter liegen echte
 * Optionsfelder — ohne Skript benutzbar, `checkValidity()` prüft sie von allein.
 */
.ld-kontakt__anrede {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Eine `legend` bringt vom Browser ein seitliches Polster mit — sonst stünde
   „Anrede" eine Spur rechts der anderen Beschriftungen. */
.ld-kontakt__anrede legend {
	padding: 0;
}

.ld-kontakt__anrede-wahl {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.4rem, 0.52vw, 0.7rem);
}

.ld-kontakt__anrede-wahl label {
	position: relative;
	cursor: pointer;
}

.ld-kontakt__anrede-wahl input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ld-kontakt__anrede-wahl span {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2rem;
	padding: 0.25em 1em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 45%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--sage);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ld-k-grad);
	letter-spacing: 0.02em;
	transition:
		background-color 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-kontakt__anrede-wahl label:hover span,
.ld-kontakt__anrede-wahl input:focus-visible + span {
	border-color: var(--wp--preset--color--sage);
}

.ld-kontakt__anrede-wahl input:focus-visible + span {
	outline: 1px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* Gewählt wie der gewählte Reiter: Salbei gefüllt, Graphit darauf. */
.ld-kontakt__anrede-wahl input:checked + span {
	border-color: var(--wp--preset--color--sage);
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--graphit);
}

/* Vergessen: dieselbe Markierung wie beim Wohnungsfeld. */
.ld-kontakt__anrede.is-fehler .ld-kontakt__anrede-wahl span {
	border-color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------ Kontrollkästchen */

/*
 * Das Kästchen steht links aus der Spalte heraus, so wie in der Vorlage — die
 * Beschriftungen fluchten dadurch mit den Feldern darüber.
 */
.ld-kontakt__zustimmung {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.07vw;
	/* 80 Bildpunkte unter dem letzten Feld, wie in der Vorlage. */
	margin-block-start: 3.9vw;
	margin-inline-start: -1.85vw;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.7rem, 0.78vw, 0.95rem);
	line-height: 1.4;
	cursor: pointer;
}

.ld-kontakt__haken {
	flex: none;
	appearance: none;
	inline-size: 0.78vw;
	block-size: 0.78vw;
	min-inline-size: 0.9rem;
	min-block-size: 0.9rem;
	margin: 0.2em 0 0;
	border: 1px solid var(--wp--preset--color--sage);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.ld-kontakt__haken:checked {
	background: var(--wp--preset--color--sage);
}

.ld-kontakt__zustimmung a {
	color: inherit;
	text-underline-offset: 0.25em;
}

/* --------------------------------------------------------------- Absenden */

.ld-kontakt__absenden {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.78vw;
	box-sizing: border-box;
	height: 2.72vw;
	min-height: 2.8rem;

	/*
	 * **Näher am Datenschutz-Hinweis als am letzten Feld** — vom Kunden so
	 * gewünscht. Die 3,9 vw hier waren die Zahl von dort oben noch einmal
	 * benutzt, ohne eigene Messung dahinter; der Knopf gehört aber zum Haken
	 * darüber, nicht zum Formular davor.
	 */
	margin-block-start: 2.2vw;
	padding-inline: 1.17vw;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--graphit);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ld-k-grad);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	/*
	 * Der Abstand zwischen Beschriftung und Pfeil steht als Stellschraube da,
	 * weil beide beim Darüberfahren gemeinsam in einer Zeile abrollen — die
	 * Zeile holt sich den Wert von hier.
	 */
	--ld-schalter-luft: 0.78vw;
	/*
	 * 0,65 Sekunden mit der Kurve der Vorlage, eine Spur länger als das
	 * Abrollen der Beschriftung. Vorher standen hier 0,35 Sekunden mit `ease` —
	 * ein eigener Takt, den sonst nichts auf der Seite hatte.
	 */
	transition: background-color 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-kontakt__absenden:hover,
.ld-kontakt__absenden:focus-visible {
	background: var(--wp--preset--color--sage);
}

/*
 * **Der Pfeil sitzt in der Zeile, nicht am Knopf** — sonst bliebe er stehen,
 * während die Beschriftung unter ihm wegrollt. In der Vorlage steckt er
 * ebenfalls in beiden Zeilen und wandert mit.
 */
.ld-kontakt__absenden .ld-schalter__zeile::after,
.ld-kontakt__absenden:not(.is-bereit)::after {
	content: "";
	display: block;
	flex: none;
	width: 1.1vw;
	min-width: 0.9rem;
	aspect-ratio: 1;
	background-color: currentColor;
	mask: url("../../images/symbole/pfeil.svg") center / contain no-repeat;
}

/*
 * Der Hinweis, dass noch nichts verschickt wird. Er steht sichtbar da und
 * nicht in der Entwicklerkonsole: Sonst hält jemand — auch der Kunde beim
 * Ausprobieren — eine Anfrage für abgeschickt. Er verschwindet, sobald das
 * Formular an onOffice hängt.
 */
.ld-kontakt__hinweis {
	margin-block-start: 1.5vw;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.7rem, 0.78vw, 0.95rem);
	line-height: 1.4;
}

.ld-kontakt__hinweis[hidden] {
	display: none;
}

/*
 * Das Fangfeld des Spamschutzes (siehe `ld28_anfrage_spam()`). Nicht
 * `display: none` — manche Automaten lassen genau solche Felder aus. Es liegt
 * außerhalb des Bildes, absolut und damit ohne Platz im Raster.
 */
.ld-kontakt__falle {
	position: absolute;
	inset-inline-start: -100vw;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------- Schmale Geräte */

/*
 * Nebeneinander geht auf dem Handy nicht — das Formular bliebe eine Spalte von
 * Fingerbreite. Foto oben, darunter Überschrift, Absatz und Formular.
 */

/* ------------------------------------------------ Auswahl der Wohnungen */

/*
 * **Das Feld sieht aus wie jedes andere Feld** — Versalien-Marke in Salbei,
 * darunter dieselbe Haarlinie. Darin liegen aber Pillen statt Text, und
 * darunter klappt die Liste auf.
 *
 * **Das `select` bleibt im Formular und trägt die Auswahl**, es wird nur
 * unsichtbar. Ohne Skript fehlt `is-bereit`, dann steht es ganz gewöhnlich da
 * und ist benutzbar — derselbe Rückfall wie bei der Wohnungsliste.
 */
.ld-kontakt__feld--wahl {
	position: relative;
}

.ld-kontakt__feld--wahl.is-bereit .ld-kontakt__wahl {
	position: absolute;
	width: 1px;
	height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
}

.ld-kontakt__wahlfeld {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.1rem;
	padding: 0.25rem 1.4rem 0.3rem 0;
	border-block-end: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.8rem, 0.78vw, 0.95rem);
	cursor: pointer;
	transition: border-color 0.35s ease;
}

.ld-kontakt__wahlfeld:hover,
.ld-kontakt__wahlfeld:focus-visible,
.ld-kontakt__feld--wahl.is-offen .ld-kontakt__wahlfeld {
	border-color: var(--wp--preset--color--sage);
}

/* Der Platzhalter ist gedämpft, nicht grau — er soll nicht wie Text wirken. */
.ld-kontakt__leer {
	color: color-mix(in srgb, var(--wp--preset--color--sage) 55%, transparent);
}

.ld-kontakt__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * **Die Pille ist die des Reiters, eine Nummer kleiner.** Dieselbe Linie,
 * dieselbe Rundung, dieselbe Farbe — es ist dasselbe Bauteil in klein, und
 * genau deshalb sieht es nicht wie ein Fremdkörper aus.
 */
.ld-kontakt__pille {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.3rem 0.15rem 0.6rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 45%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--sage);
	font-size: calc(var(--ld-k-grad) * 0.95);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/*
 * **Das Kreuz ist aus zwei Strichen gezeichnet, nicht getippt.** Ein Zeichen
 * aus der Schrift säße je nach Schnitt anders und ließe sich nicht auf den
 * Strich der Pille abstimmen. Dieselbe Bauart wie das Menüzeichen oben.
 */
.ld-kontakt__weg {
	position: relative;
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.35s ease;
}

.ld-kontakt__weg::before,
.ld-kontakt__weg::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	width: 0.46rem;
	height: 1px;
	background: currentColor;
}

.ld-kontakt__weg::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.ld-kontakt__weg::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.ld-kontakt__weg:hover,
.ld-kontakt__weg:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--sage) 22%, transparent);
}

.ld-kontakt__pfeil {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0.75rem;
	width: 0.5rem;
	height: 0.5rem;
	border-inline-end: 1px solid var(--wp--preset--color--sage);
	border-block-end: 1px solid var(--wp--preset--color--sage);
	rotate: 45deg;
	transition: rotate 0.35s ease;
}

.ld-kontakt__feld--wahl.is-offen .ld-kontakt__pfeil {
	rotate: 225deg;
}

/*
 * **Die Liste liegt über dem Formular, nicht darin.** Schöbe sie die Felder
 * auseinander, spränge das ganze Formular bei jedem Öffnen — und der
 * Absenden-Knopf wanderte unter den Bildschirmrand.
 */
.ld-kontakt__liste {
	position: absolute;
	z-index: 5;
	inset-inline: 0;
	inset-block-start: 100%;
	max-height: 20rem;
	margin-block-start: 0.4rem;
	padding: 0.5rem 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 28%, transparent);
	border-radius: 0.6rem;
	background: color-mix(in srgb, var(--wp--preset--color--graphit) 94%, #000);
	box-shadow: 0 1.2rem 2.4rem color-mix(in srgb, #000 45%, transparent);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ld-kontakt__gruppe {
	margin: 0.7rem 0 0.25rem;
	padding-inline: 0.9rem;
	color: color-mix(in srgb, var(--wp--preset--color--sage) 60%, transparent);
	font-family: var(--wp--preset--font-family--body);
	font-size: calc(var(--ld-k-grad) * 0.92);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ld-kontakt__gruppe:first-child {
	margin-block-start: 0.2rem;
}

.ld-kontakt__zeile {
	position: relative;
	display: grid;
	gap: 0.1rem;
	padding: 0.42rem 0.9rem 0.42rem 2rem;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.75rem, 0.72vw, 0.9rem);
	line-height: 1.35;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Unten die Maße, gedämpft — sie tragen die Zeile nicht, sie ergänzen sie. */
.ld-kontakt__zeile-neben {
	color: color-mix(in srgb, var(--wp--preset--color--sage) 62%, transparent);
	font-size: 0.92em;
}

.ld-kontakt__zeile:hover,
.ld-kontakt__zeile:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--sage) 12%, transparent);
	outline: none;
}

/* Das Häkchen sitzt im Einzug und schiebt die Zeile deshalb nicht. */
.ld-kontakt__zeile::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.9rem;
	inset-block-start: 0.78em;
	width: 0.42rem;
	height: 0.42rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 50%, transparent);
	border-radius: 999px;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.ld-kontakt__zeile.is-gewaehlt {
	color: var(--wp--preset--color--sage);
}

.ld-kontakt__zeile.is-gewaehlt::before {
	border-color: var(--wp--preset--color--sage);
	background: var(--wp--preset--color--sage);
}

/*
 * „Sonstige" steht über den Häusern und wird durch eine Linie abgesetzt — es
 * ist keine Wohnung, sondern die Antwort „noch keine bestimmte".
 */
.ld-kontakt__zeile--sonstige {
	margin-block-end: 0.3rem;
	padding-block-end: 0.55rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 18%, transparent);
}

/*
 * **Das versteckte Pflichtfeld braucht eine sichtbare Markierung.** Sonst
 * stünde beim Absenden nur der allgemeine Hinweis unter dem Formular, und
 * niemand wüsste, welches Feld gemeint ist. Terrakotta-Rosé ist dafür erlaubt —
 * ein kleines Zeichen, keine Fläche.
 */
.ld-kontakt__feld--wahl.is-fehler .ld-kontakt__wahlfeld {
	border-color: var(--wp--preset--color--accent);
}

/*
 * ---------------------------------------------------- flache Fenster
 *
 * **Das Formular ist um eine Zeile gewachsen, und auf einem flachen Fenster
 * passt es dann nicht mehr.** Nachgemessen bei 1280 × 720: Ohne das
 * Wohnungsfeld blieben 80 Bildpunkte unter dem Absenden-Knopf, mit ihm ragte
 * er **9 Bildpunkte über die Abschnittskante** — der Knopf fiel aus dem Bild.
 *
 * **Maßgeblich ist das Seitenverhältnis, nicht die Höhe.** Der erste Anlauf
 * fragte nach `max-height: 820px` und ließ 1920 × 1080 unberührt — dabei ist
 * das mit 1,78 genauso flach wie 1280 × 720, nur größer. Die Abfrage greift
 * jetzt ab 1,65 und lässt 1440 × 900 (1,60) und 1512 × 982 (1,54) in Ruhe.
 *
 * **Und die Maße stehen hier in svh statt in vw.** Der Abstand ist das
 * Problem, das mit der *Höhe* entsteht; in vw gerechnet fiele die Korrektur
 * auf einem 1920 breiten Fenster viel zu stark aus.
 *
 * **Mit `min()` allein war es nicht zu lösen:** Ein Deckel, der bei
 * 1440 × 900 noch nicht greift, spart bei 1280 × 720 höchstens sieben Prozent
 * — die beiden unterscheiden sich im Verhältnis nur um ein Neuntel. Gebraucht
 * wurden neunzig Bildpunkte.
 *
 * **Hier weicht der gemessene Zeilenabstand von 110 Bildpunkten ab**, und das
 * ist die bewusste Abwägung: lieber ein engeres Raster als ein Knopf, den
 * niemand sieht. Auf Fenstern mit dem Verhältnis der Vorlage bleibt der Wert
 * unangetastet.
 */
/*
 * **Die Spalte gerät nie unter die Kopfzeilen-Pille** — seit dem 27.10.2026,
 * vom Kunden gemeldet. Mittig über `top: 50 %` und `translateY( -50 % )`
 * stand das Formular nach „Kaufen“ fast so hoch wie das Fenster, und seine
 * Oberkante rutschte auf flachen Fenstern hinter die Pille: nachgemessen bei
 * 1280 × 720 um 31 Bildpunkte, bei 1366 × 768 um 21, bei 1512 × 982 um 4.
 *
 * **Jetzt steht die Spalte im Fluss der Bühne**, und die Bühne zentriert sie
 * mit `safe center` zwischen einem oberen Polster (Pille plus zwei
 * Grundmaße) und einem unteren. Passt sie dazwischen, steht sie mittig wie
 * vorher; passt sie nicht, beginnt sie unter der Pille, und die Bühne wird um
 * den Rest länger — man scrollt ein wenig, statt dass oben die Reiter oder
 * unten der Knopf verdeckt werden. **Vom Kunden so gewählt.** Foto und
 * Überschrift links liegen absolut und wachsen mit.
 */
@media ( min-width: 782px ) {

	.ld-kontakt .ld-kontakt__buehne {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: safe center;
		height: auto;
		min-height: 100svh;
		padding-block: calc( var( --ld-pille-fuss ) + 2 * var( --ld-pille-e ) ) calc( 2.5 * var( --ld-pille-e ) );
	}

	.ld-kontakt__spalte {
		position: relative;
		inset: auto;
		transform: none;
		margin-inline-start: 58.1%;
	}
}

@media ( min-width: 782px ) and ( min-aspect-ratio: 1.65 ) {

	.ld-kontakt__reiter {
		margin-block-end: 5.2svh;
	}

	.ld-kontakt__raster {
		row-gap: 3.3svh;
	}

	.ld-kontakt__zustimmung {
		margin-block-start: 4.6svh;
	}

	.ld-kontakt__absenden {
		margin-block-start: 2.8svh;
	}
}

@media (max-width: 781px) {
	.ld-kontakt {
		--ld-k-spalte: 100%;
		--ld-k-zeile: 2rem;
		--ld-k-grad: 0.8rem;

		/*
		 * **Unter dem Absenden-Knopf war gar keine Luft.** Nachgemessen: Er
		 * endete auf 1174 von 1174 Bildpunkten, also genau auf der Kante — das
		 * Foto des nächsten Abschnitts begann unmittelbar darunter. Am
		 * Schreibtisch trägt die Bildschirmhöhe den Abstand, auf dem Telefon
		 * wächst der Abschnitt mit dem Formular und hatte deshalb keinen.
		 *
		 * Derselbe Betrag wie der seitliche Rand der Spalte — so steht der
		 * Knopf in derselben Luft wie alles andere.
		 */
		padding-block-end: 2.5rem;
	}

	/*
	 * **Die Zentrierung muss hier ausdrücklich zurückgenommen werden.** Am
	 * Schreibtisch liegt die Spalte absolut und wird über
	 * `translateY( -50% )` in die Bildschirmmitte gerückt. Auf dem Telefon
	 * steht sie im normalen Fluss — die Verschiebung blieb aber stehen und zog
	 * das Formular **297 Bildpunkte** nach oben, mitten über die Überschrift.
	 *
	 * **Eine Verschiebung, die an eine feste Lage gebunden ist, gehört dort
	 * abgeschaltet, wo die Lage nicht mehr gilt.** `position` wechselt in der
	 * Mobilfassung von allein, `transform` nicht.
	 */
	.ld-kontakt__spalte {
		inset-block-start: auto;
		transform: none;
	}

	/*
	 * Auf dem Telefon darf die Liste höher werden — sie hat die volle Breite
	 * und muss nicht neben anderen Feldern bestehen. Tippziele sind dort
	 * wichtiger als Kompaktheit.
	 */
	.ld-kontakt__liste {
		max-height: 60svh;
	}

	.ld-kontakt__zeile {
		padding-block: 0.7rem;
		font-size: 0.85rem;
	}

	/*
	 * **Auf dem Telefon wird die Pille so hoch, dass ihr ✕ ein echtes Tippziel
	 * ist.** 44 Bildpunkte braucht eine Fingerkuppe, und das ✕ ist der Weg,
	 * den der Kunde zum Herausnehmen vorgesehen hat.
	 *
	 * **Der Trick mit dem unsichtbaren Polster hilft hier nicht.** Beim
	 * Menü-Knopf liegt ringsum Platz; hier liegen die Pillen dicht
	 * nebeneinander, und vergrößerte Flächen griffen einander über — dann
	 * nähme ein Tipp die falsche Wohnung heraus. Also wird die Pille selbst
	 * größer. Sie wirkt dadurch kräftiger als am Schreibtisch; auf dem Telefon
	 * ist das richtig.
	 */
	.ld-kontakt__pillen {
		gap: 0.45rem;
	}

	.ld-kontakt__pille {
		padding-block: 0;
		padding-inline: 0.85rem 0.15rem;
		font-size: 0.85rem;
	}

	/*
	 * 2,75 rem sind genau die 44 Bildpunkte. Der Knopf gibt der Pille damit
	 * auch ihre Höhe — eine eigene Angabe dafür wäre eine zweite Zahl für
	 * dieselbe Sache.
	 */
	.ld-kontakt__weg {
		width: 2.75rem;
		height: 2.75rem;
	}

	.ld-kontakt .ld-kontakt__buehne {
		height: auto;
	}

	.ld-kontakt__bild {
		position: relative;
		width: 100%;
		height: 42svh;
	}

	.ld-kontakt__einstieg,
	.ld-kontakt__spalte {
		position: relative;
		inset: auto;
		width: auto;
		padding-inline: 1.5rem;
	}

	.ld-kontakt__einstieg {
		margin-block-start: 2.5rem;
	}

	.ld-kontakt__wort {
		font-size: clamp(2rem, 11vw, 3.4rem);
	}

	.ld-kontakt__spalte {
		margin-block: 2.5rem 4rem;
	}

	.ld-kontakt__reiter {
		gap: 0.75rem;
		margin-block-end: 2rem;
	}

	.ld-kontakt__reiter li + li::before {
		width: 0.75rem;
		margin-inline-end: 0.75rem;
	}

	.ld-kontakt__knopf {
		height: auto;
		padding: 0.7rem 1.1rem;
	}

	.ld-kontakt__raster {
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
	}

	.ld-kontakt__zustimmung {
		margin-inline-start: 0;
		gap: 0.75rem;
	}

	.ld-kontakt__absenden {
		height: auto;
		padding: 0.9rem 1.4rem;
	}

	/*
	 * **Das Tor darf hier die volle Breite nehmen.** Am Schreibtisch steht es
	 * in der schmalen Formularspalte und ist auf 34 vw gedeckelt; auf dem
	 * Telefon wären das 127 Bildpunkte, und die Frage bräche nach drei
	 * Wörtern um. Nachgemessen, bevor es geändert wurde.
	 */
	.ld-kontakt__tor {
		max-width: none;
	}

	.ld-kontakt__torknopf {
		padding-inline: 1.2rem;
	}

	/*
	 * **Auf dem Telefon wie Arbors Kontaktseite** — bei 375 nachgemessen
	 * (`/en/contact`). Das Foto bleibt oben stehen; Arbor zeigt dort keins,
	 * **vom Kunden so entschieden**.
	 *
	 * | Teil                  | Arbor 375                         | hier          |
	 * |-----------------------|-----------------------------------|---------------|
	 * | Seitenrand            | 23                                | 1,4375 rem    |
	 * | Überschrift           | 50, Zeilenhöhe 1                  | 3,125 rem     |
	 * | Absatz                | 15,4 / 1,2, 19 unter der Überschrift | 0,96 / 1,2 rem |
	 * | Absatz bis Reiter     | 58                                | 3,6 rem       |
	 * | Felder untereinander  | 86 je Feld, 46 Luft               | 2,75 rem Luft |
	 * | Absenden              | volle Breite, 46 hoch             | 100 %         |
	 */
	@media (max-width: 767px) {

		.ld-kontakt .ld-kontakt__einstieg,
		.ld-kontakt .ld-kontakt__spalte {
			padding-inline: 1.4375rem;
		}

		.ld-kontakt .ld-kontakt__wort {
			font-size: 3.125rem;
			line-height: 1;
		}

		.ld-kontakt .ld-kontakt__absatz {
			margin-block-start: 1.2rem;
			font-size: 0.96rem;
			line-height: 1.2;
		}

		.ld-kontakt .ld-kontakt__spalte {
			margin-block-start: 3.6rem;
		}

		.ld-kontakt .ld-kontakt__raster {
			row-gap: 2.75rem;
		}

		.ld-kontakt .ld-kontakt__absenden {
			width: 100%;
		}
	}

	/*
	 * **Niedrige Bildschirme** (Kunde, 30.10.2026, iPhone mit Safari): Bei
	 * 664 Bildpunkten Höhe begann „Kaufen / Mieten“ erst am unteren Rand.
	 * Das Foto oben wird niedriger, die Knöpfe stehen ganz im Bild. Ab 760
	 * Höhe greift nichts davon.
	 */
	@media (max-height: 760px) {
		.ld-kontakt__bild {
			height: 32svh;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ld-kontakt__knopf,
	.ld-kontakt__eingabe,
	.ld-kontakt__absenden,
	.ld-kontakt__haken {
		transition: none;
	}
}