/*
 * Rechtstexte — Datenschutzerklärung und Impressum
 *
 * Nachgebaut nach Arbors Datenschutzseite. Aufbau: ein bildschirmfüllendes
 * dunkles Foto mit der Überschrift, darunter ein Rundzeichen als Hinweis zum
 * Weiterscrollen, dann der Text in einer mittigen Spalte, am Ende die Fußzeile.
 *
 * Maße dort bei 2056 Fensterbreite gemessen:
 *
 *   Seitenhöhe                 8723 px — der Text läuft über sieben Bildschirme
 *   Kopfbild                   Fensterhöhe plus 320 px, nach oben gerückt
 *   Überschrift                160 px = 7,78 vw, Regular, Versalien, Zeilenhöhe 1,0
 *   Überschrift, Ort           x = 152 px = 7,4 %, y = 200 px
 *   Rundzeichen                64 px, 1 px Linie, mittig, 80 px über der Kante
 *   Textspalte                 x = 444 px = 21,6 %, 1168 px = 56,8 vw — mittig
 *   Zwischenüberschrift        56 px, Light, Zeilenhöhe 1,1, Laufweite 0,02 em
 *   Kleine Überschrift         32 px, Light, Zeilenhöhe 1,1
 *   Fließtext                  16 px, Abstand 16 oben und 8 unten
 *   Listen                     16 px eingerückt
 *
 * **Zwei Stellen weichen bewusst ab, beide wegen der Lesbarkeit.**
 *
 * Erstens die Farbe: Bei Arbor stehen Überschriften **und** Fließtext in ihrem
 * Golden auf Sand — nachgerechnet **3,12 zu 1** und damit unter der Schwelle von
 * 4,5. Bei einem Text, den man tatsächlich lesen muss, geht das nicht. Hier
 * stehen die Überschriften in Card Room Green tief (4,97) und der Fließtext in
 * Hofgrün tief (10,98).
 *
 * Zweitens die Zeilenhöhe: dort 1,2, hier 1,55. Ein Rechtstext über sieben
 * Bildschirme braucht Luft, und im Deutschen stoßen bei 1,2 die Umlaute an die
 * Zeile darüber.
 */

.ld-rechtstext {
	--ld-r-spalte: 56.8vw;
	--ld-r-rand: 7.4%;
	--ld-r-grad: clamp(0.8rem, 0.78vw, 0.95rem);

	position: relative;
	padding: 0;
}

/* ------------------------------------------------------------- Das Kopfbild */

.ld-rechtstext__kopf {
	position: relative;
	height: 100svh;
	margin: 0;
	overflow: clip;
}

.ld-rechtstext__bild {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
}

/*
 * Zwei Klassen im Selektor, sonst greift die Angabe nicht: WordPress gibt dem
 * Bild `width: auto` mit.
 */
.ld-rechtstext .ld-rechtstext__bild img {
	display: block;
	width: 100%;
	/*
	 * **Keine Höhe hier.** Der Rahmen trägt `ld-nachlauf`; der Baustein in
	 * base.css macht das Bild um ein Wegmaß höher, damit es beim Scrollen
	 * zurückhängen kann. Stünde hier `height: 100%`, gewänne diese Zeile —
	 * sie kommt später im Ladeweg — und der Nachlauf wäre wirkungslos.
	 */
	object-fit: cover;
}

/*
 * Ein Schleier über dem Foto. Arbors Aufnahme ist von sich aus fast schwarz;
 * unsere ist es je nach Bild nicht, und die Überschrift soll nicht an der
 * Bildwahl des Kunden hängen.
 */
.ld-rechtstext__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 52%, transparent);
}

.ld-rechtstext__titel {
	position: absolute;
	z-index: 2;
	inset-inline-start: var(--ld-r-rand);
	inset-block-start: 16.6svh;
	width: 56.8vw;
	margin: 0;
	font-size: clamp(2.2rem, 7.78vw, 10rem);
	/* Eine große Überschrift, kein Aussagesatz — also Regular. */
	font-weight: 400;
	/* Mehrzeilig und deutsch: 1,12 statt 1,0, sonst stoßen die Umlaute an. */
	line-height: 1.12;
	letter-spacing: normal;
	text-transform: uppercase;
}

/*
 * Das Rundzeichen unten in der Mitte — der Hinweis, dass es weitergeht. In der
 * Vorlage 64 Bildpunkte, ein Haarstrich, ohne Füllung.
 */
.ld-rechtstext__weiter {
	position: absolute;
	z-index: 2;
	inset-inline-start: 50%;
	inset-block-end: 6.6svh;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.11vw;
	min-width: 3rem;
	aspect-ratio: 1;
	/* Mitte über transform, nicht über negative Ränder — siehe blockGap. */
	transform: translateX(-50%);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sage) 70%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--sage);
	pointer-events: none;
}

.ld-rechtstext__weiter::before {
	content: "";
	display: block;
	width: 40%;
	aspect-ratio: 1;
	background-color: currentColor;
	mask: url("../../images/symbole/pfeil.svg") center / contain no-repeat;
	transform: rotate(90deg);
}

/* --------------------------------------------------------------- Der Text */

.ld-rechtstext__text {
	position: relative;
	margin: 0;
	padding-block: 6.8vw 8vw;
	background-color: var(--wp--preset--color--surface);
}

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

/*
 * Die Spalte steht mittig und ist 56,8 vw breit — bei 2056 sind das die 1168
 * Bildpunkte der Vorlage. Für einen Rechtstext ist das breit; die Vorlage macht
 * es so, und bei 16 Bildpunkten Grad bleibt die Zeile knapp lesbar.
 */
.ld-rechtstext__spalte {
	width: var(--ld-r-spalte);
	margin-inline: auto;
}

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

.ld-rechtstext__spalte h2 {
	margin-block: 3.4vw 0.78vw;
	font-size: clamp(1.5rem, 2.72vw, 3.4rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: calc(0.02em + var(--ld-light-lauf));
}

.ld-rechtstext__spalte h2:first-child {
	margin-block-start: 0;
}

.ld-rechtstext__spalte h3 {
	margin-block: 2.2vw 0.6vw;
	font-size: clamp(1.05rem, 1.56vw, 1.9rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: var(--ld-light-lauf);
}

.ld-rechtstext__spalte p {
	margin-block: 0.78vw 0.39vw;
	font-size: var(--ld-r-grad);
	/* 1,55 statt der 1,2 der Vorlage — siehe oben. */
	line-height: 1.55;
}

.ld-rechtstext__spalte ul,
.ld-rechtstext__spalte ol {
	margin-block: 0.78vw;
	/* 16 Bildpunkte Einzug, wie in der Vorlage. */
	padding-inline-start: 0.78vw;
	font-size: var(--ld-r-grad);
	line-height: 1.55;
}

.ld-rechtstext__spalte li {
	margin-block: 0.2vw;
}

.ld-rechtstext__spalte a {
	color: var(--wp--preset--color--primary-deep);
	text-underline-offset: 0.25em;
}

/*
 * Der Stand des Textes ganz unten, abgesetzt durch eine Haarlinie.
 */
.ld-rechtstext__stand {
	margin-block-start: 4vw;
	padding-block-start: 1.5vw;
	border-block-start: 1px solid
		color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	font-size: var(--ld-r-grad);
	line-height: 1.55;
}

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

@media (max-width: 781px) {
	.ld-rechtstext {
		--ld-r-spalte: auto;
	}

	/*
	 * **Der Abstand rechnet vom Rundzeichen aus, nicht vom Rand.** Hier
	 * stand fest 6rem — das Zeichen darunter endet aber bei 6,6 svh plus
	 * seiner eigenen Höhe, und auf 812 Bildpunkten ragte die Überschrift
	 * damit 8 Bildpunkte hinein. Jetzt: Lage des Zeichens, seine Höhe
	 * (dieselbe Formel wie an `.ld-rechtstext__weiter`) und anderthalb rem
	 * Luft. Bei flacheren Telefonen wandert sie mit, statt aufzulaufen.
	 */
	.ld-rechtstext__titel {
		inset-inline: 1.5rem;
		inset-block-start: auto;
		inset-block-end: calc(6.6svh + max(3.11vw, 3rem) + 1.5rem);
		width: auto;
		font-size: clamp(2rem, 11vw, 3.4rem);
	}

	.ld-rechtstext__text {
		padding-block: 3rem 4rem;
	}

	.ld-rechtstext__spalte {
		width: auto;
		margin-inline: 1.5rem;
	}

	.ld-rechtstext__spalte h2 {
		margin-block: 2.5rem 0.75rem;
		font-size: clamp(1.4rem, 7vw, 2rem);
	}

	.ld-rechtstext__spalte h3 {
		margin-block: 1.75rem 0.5rem;
		font-size: clamp(1.05rem, 5vw, 1.3rem);
	}

	.ld-rechtstext__spalte p,
	.ld-rechtstext__spalte ul,
	.ld-rechtstext__spalte ol {
		margin-block: 0.75rem 0.5rem;
	}

	.ld-rechtstext__spalte ul,
	.ld-rechtstext__spalte ol {
		padding-inline-start: 1rem;
	}

	.ld-rechtstext__stand {
		margin-block-start: 2.5rem;
		padding-block-start: 1.25rem;
	}

	/*
	 * **Auf dem Telefon wie Arbors Datenschutzseite** — bei 375
	 * nachgemessen (`/en/privacy-policy`):
	 *
	 * | Teil                  | Arbor 375                          | hier            |
	 * |-----------------------|------------------------------------|-----------------|
	 * | Überschrift           | oben, 115 unter der Kante          | 7,2 rem         |
	 * | Seitenrand            | 23                                 | 1,4375 rem      |
	 * | Text, Polster oben    | 38                                 | 2,4 rem         |
	 * | Zwischenüberschrift   | 38,4, Light, 1,1, 61,5 Abstand     | 2,4 / 3,84 rem  |
	 * | Kleine Überschrift    | ebenfalls 38,4                     | **1,5 rem**     |
	 * | Fließtext             | 15,4, Zeilenhöhe 1,2, 15,4 Abstand | 0,96 rem, **1,4** |
	 *
	 * **Zwei Abweichungen, beide vom Kunden so entschieden:** Die kleinen
	 * Überschriften bleiben kleiner als die Zwischenüberschriften — gleich
	 * groß sähe man nicht mehr, was zu was gehört. Und die Zeilenhöhe ist 1,4
	 * statt Arbors 1,2: dazwischen und dem Schreibtisch (1,55), damit die
	 * Umlaute nicht anstoßen.
	 *
	 * Die Überschrift bleibt bei ihrem Grad (11 vw): „DATENSCHUTZ-“ füllt
	 * damit die Zeile, mit Arbors 46 Bildpunkten liefe es über den Rand.
	 */
	@media (max-width: 767px) {

		.ld-rechtstext .ld-rechtstext__titel {
			inset-inline: 1.4375rem;
			inset-block-start: 7.2rem;
			inset-block-end: auto;
		}

		.ld-rechtstext .ld-rechtstext__text {
			padding-block: 2.4rem 4rem;
		}

		.ld-rechtstext .ld-rechtstext__spalte {
			margin-inline: 1.4375rem;
		}

		/*
		 * **Der Ausschnitt rückt nach links, auf den Sessel** — nur auf der
		 * Datenschutzseite, die anderen beiden tragen ein anderes Bild.
		 * Mittig stand auf dem Telefon nur die rechte Kante des Sessels im
		 * Bild; vom Kunden so gewünscht. `privacy-policy` setzt WordPress
		 * selbst an die Seite, die als Datenschutzerklärung eingetragen ist.
		 */
		.privacy-policy .ld-rechtstext .ld-rechtstext__bild img {
			object-position: 30% 50%;
		}

		/*
		 * **Lange Wörter werden getrennt.** „Berufshaftpflichtversicherung“
		 * ist bei 38,4 Bildpunkten 446 breit und schob die Seite seitlich
		 * auf 469 auf. Die Sprache steht am Dokument (`de`), die Trennung
		 * ist also die deutsche.
		 */
		.ld-rechtstext .ld-rechtstext__spalte h2,
		.ld-rechtstext .ld-rechtstext__spalte h3 {
			-webkit-hyphens: auto;
			hyphens: auto;
		}

		.ld-rechtstext .ld-rechtstext__spalte h2 {
			margin-block: 3.84rem 0;
			font-size: 2.4rem;
			line-height: 1.1;
		}

		.ld-rechtstext .ld-rechtstext__spalte h2:first-child {
			margin-block-start: 0;
		}

		.ld-rechtstext .ld-rechtstext__spalte h3 {
			margin-block: 2.4rem 0;
			font-size: 1.5rem;
			line-height: 1.1;
		}

		.ld-rechtstext .ld-rechtstext__spalte p,
		.ld-rechtstext .ld-rechtstext__spalte ul,
		.ld-rechtstext .ld-rechtstext__spalte ol {
			margin-block: 0.96rem 0;
			font-size: 0.96rem;
			line-height: 1.4;
		}

		.ld-rechtstext .ld-rechtstext__stand {
			font-size: 0.96rem;
			line-height: 1.4;
		}

		/*
		 * **Größere Tippfläche für Verweise im Text**, ohne dass sich eine
		 * Zeile verschiebt — senkrechtes Polster an einem Verweis im
		 * Fließtext ändert den Zeilenabstand nicht. Nur 0,4 rem: Mehr
		 * griffe in die Zeilen darüber und darunter.
		 */
		.ld-rechtstext .ld-rechtstext__spalte a {
			padding-block: 0.4rem;
		}
	}
}