/*
 * Ergänzungen zum Entwurf: main.css stammt unverändert aus der Referenz und wird nicht angefasst.
 * Hier steht nur, was der Entwurf nicht kennt, weil die Inhalte nach ihm entstanden sind.
 */

:root {
	/* Breite der weichen Übergänge zwischen Szene und Abschnitt */
	--naht: 1.25rem;
}

/* Pfeil im Einstieg: leuchtet langsam auf, führt zu „Willkommen“. Sprung und Zentrieren siehe inhalt.js */
.hero__pfeil {
	position: absolute;
	bottom: 0.5rem;
	left: 50%;
	z-index: 4; /* über der vorderen Leinwand */
	display: block;
	padding: 0.75rem;
	color: var(--green-900);
	transform: translateX(-50%);
}

.hero__pfeil svg {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
}

@media (prefers-reduced-motion: no-preference) {
	html:not(.ohne-bewegung) .hero__pfeil {
		animation: pfeil-leuchten 3.2s ease-in-out infinite;
	}

	html:not(.ohne-bewegung) .hero__pfeil:is(:hover, :focus-visible) {
		opacity: 1;
		animation: none;
	}
}

@keyframes pfeil-leuchten {
	0%,
	100% {
		opacity: 0.35;
		filter: none;
	}

	50% {
		opacity: 1;
		filter: drop-shadow(0 0 0.4rem #fff);
	}
}

@media print {
	.hero__pfeil {
		display: none;
	}
}

/* Die Punkte über dem Ü ragen über die enge Zeile hinaus: So liegen sie im Element und werden nicht abgeschnitten */
@media (scripting: enabled) {
	.section__title {
		margin-top: -0.15em;
		padding-top: 0.15em;
	}
}

/*
 * Kopfzeile auf schmalen Bildschirmen: fixiert und zweizeilig. Oben der Name, in dem die Wortmarke beim Scrollen
 * landet, darunter die Navigation, darunter die stehende Überschrift des Abschnitts. Das Skript richtet sich nach
 * position: fixed, Landung, Schrift nach dem Hintergrund und Schleier laufen dadurch wie auf großen Bildschirmen.
 * Nur mit JavaScript, wie im Entwurf, weil erst das Skript die Schrift nachführt.
 */
@media (max-width: 47.99rem) and (scripting: enabled) {
	:root {
		--header-height: calc(3rem + 2.8 * var(--size-kopf));
	}

	html {
		scroll-padding-top: var(--header-height);
	}

	.site-header {
		position: fixed;
	}

	html:has(.wortmarke) .site-title {
		display: inline-block;
		visibility: visible;
	}

	.site-nav {
		flex-basis: 100%;
	}

	.section__title {
		top: var(--header-height);
	}
}

/*
 * Grenzen zwischen Szene und Abschnitt. Die Leinwand füllt ihre Fläche bei krummer Skalierung nicht ganz: Ihre Randzeile
 * wird halb durchsichtig. Darum liegt hinter ihr oben und unten die Farbe, die dort auch zu sehen sein soll, sonst
 * stünde ein heller oder dunkler Strich zwischen den Flächen.
 */
.scene.is-ready {
	background: linear-gradient(var(--naht-oben, var(--stone-200)) 50%, var(--naht-unten, var(--stone-200)) 50%);
}

.scene.hero {
	--naht-oben: var(--green-950);
}

.scene[data-scene="auftakt"] {
	--naht-oben: var(--green-900);
}

.scene[data-scene="linien"],
.scene[data-scene="huegel"] {
	--naht-unten: var(--ral-6010);
}

/*
 * Firefox zeichnet das Korn auf großen Leinwänden etwas dunkler als auf den Flächen, je Leinwand verschieden (gemessen bis
 * 2 von 255). An einer geraden Kante wäre das zu sehen. Darum laufen Szene und grüner Abschnitt weich ineinander,
 * das Korn des Abschnitts mit ihnen. Die Überblendung reicht ein Stück in den Abschnitt hinein, damit seine Oberkante bei
 * krummer Skalierung nicht halb durchlässig frei liegt.
 */
.scene + .section--brand::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--naht)) 0 auto;
	z-index: -1;
	height: calc(var(--naht) + 3px);
	background: linear-gradient(transparent, var(--color-bg) var(--naht));
	pointer-events: none;
}

.scene + .section--brand > .korn__lage {
	top: calc(-1 * var(--naht));
	-webkit-mask-image: linear-gradient(transparent, #000 var(--naht));
	mask-image: linear-gradient(transparent, #000 var(--naht));
}

/*
 * Korn an den Grenzen angleichen: Bei 100 % Skalierung zeichnet die Leinwand es weicher
 * als die Flächen mit der Klasse „korn“ (gemessen 1,4 gegen 2,0). Ab 125 % sind beide von selbst gleich.
 */
@media (max-resolution: 1dppx) {
	.korn {
		--korn-staerke: 0.5;
	}
}

/* Krisenhinweis: eigene Fläche in dunklem Grün mit Filmkorn, bleibt auch im Druck erhalten */
.notice {
	--color-bg: var(--green-900);
	--color-text: var(--stone-100);

	padding: var(--space-m);
	background: var(--color-bg);
	color: var(--color-text);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/*
 * Das Zitat steht in „Willkommen“. Die Szene bleibt ohne Text als schmale, ruhige Kante:
 * Grasgrün und Violett laufen wie im Entwurf ohne Naht in die Konturlinien. Beide Leinwände
 * überlappen sich, die Linien blenden darüber ein, damit im Violett keine Kante steht.
 */
.scene[data-scene="zitat"] {
	--scene-from: var(--sekundaer);
	--scene-to: var(--sekundaer);
	--naht-unten: var(--sekundaer);

	height: calc(7rem + var(--naht));
}

.scene[data-scene="linien-aus"] {
	--naht-oben: transparent;

	margin-top: calc(-1 * var(--naht));
}

.scene[data-scene="linien-aus"] .scene__leinwand {
	-webkit-mask-image: linear-gradient(transparent, #000 var(--naht));
	mask-image: linear-gradient(transparent, #000 var(--naht));
}

/*
 * Porträt vorläufig im Hochformat: ganz zu sehen und mittig, die Seiten füllt die Landschaft in den Farben
 * des Einstiegs (Szene „auftakt“). Das Bild hat feste Maße, damit beim Laden nichts springt.
 * Kommt ein Foto im Querformat in voller Breite, entfallen dieser Block und die Szene in templates/home.php.
 */
.portrait-band {
	display: grid;
	justify-items: center;
}

.portrait-band .scene {
	position: absolute;
	inset: 0;
	z-index: 0;
	height: auto;
}

.portrait-band img {
	position: relative;
	width: auto;
	height: min(clamp(24rem, 72svh, 48rem), 125vw);
}

/*
 * Ausbildung: fette Jahreszahl als eigene Spalte, umbrechender Text bleibt eingerückt.
 * Der Panel-Editor kann Listenzeilen in <p> verpacken; display: contents gleicht das aus.
 */
.list--years li:has(> strong:first-child, > p > strong:first-child) {
	display: grid;
	grid-template-columns: 3.25em minmax(0, 1fr);
}

.list--years li > p {
	display: contents;
}

/* Sprungziel aus dem Text von „Therapie“: bleibt unterhalb der stehenden Überschrift */
#paartherapie {
	scroll-margin-top: 6rem;
}

/* Kosten zum Aufklappen: eigener Pfeil neben dem Titel statt des Browser-Pfeils in der Zeile, damit ein Umbruch eingerückt bleibt */
.costs summary {
	position: relative;
	padding-left: 1.4em;
	list-style: none;
	cursor: pointer;
}

.costs summary::-webkit-details-marker {
	display: none;
}

.costs summary::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.7em;
	height: 0.7em;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.costs details[open] > summary::before {
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.costs summary h3 {
	display: inline;
}