/* Jana Bäumler – Psychotherapie */

/*
 * Hanken Grotesk (SIL Open Font License 1.1, siehe ../fonts/OFL.txt), lokal gehostet.
 * Kräftig und eng gesetzt erinnert sie an Coolvetica, deren Lizenz keine Webnutzung erlaubt.
 * Variable Schrift, Strichstärke 400–700, Zeichensatz Latin.
 */
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/*
	 * Farben: RAL 6010 Grasgrün als Grundfarbe (#4e6e39, Bildschirmwert laut ral-farben.de).
	 * Alle übrigen Töne teilen seinen Farbton; die Zwischenstufen (800, 600, 400, 300, 250)
	 * sind die Lagen der Landschaften (siehe landschaft.js). Kontraste ≥ 4,5 : 1 sind nachgerechnet,
	 * bis auf Weiß auf der Sekundärfarbe im Knopf (4,43 : 1).
	 */
	--ral-6010: #4e6e39;
	--green-950: #161e10;
	--green-900: #24321b;
	--green-800: #2c451a;
	--green-700: #3b552b;
	--green-600: #3e5d2a;
	--green-400: #6b8c57;
	--green-300: #8ba979;
	--green-250: #afc6a2;
	--green-200: #dfe9d8;
	--violett: #8865c8;
	--sekundaer: var(--violett);
	--stone-100: #f2f5ef;
	--stone-200: #e2e6e0;
	--stone-300: #cbd1c7;

	/*
	 * Filmkorn in Zeitlupe (korn.js): Jede grüne Fläche bekommt beim Laden eine Kachel in ihrer eigenen
	 * Farbe (--korn-kachel am Element). Stärke (Faktor) und Periode (ein Bild blendet ein und wieder aus)
	 * sind hier und in korn.js gleich; die Werkbank stellt beide im lokalen Entwurf ein.
	 */
	--korn-staerke: 0.7;
	--korn-periode: 1.6s;

	/* Text in dunklem Grün statt Schwarz: 10,8 : 1 auf Stein */
	--color-bg: var(--stone-200);
	--color-text: var(--green-900);
	--color-accent: var(--green-700);
	--color-line: color-mix(in srgb, currentColor 22%, transparent);

	/* Schrift: Hanken Grotesk für alles – Fließtext normal (400), Überschriften kräftig (700) */
	--font-sans: "Hanken Grotesk", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	/* Die drei Schriftgrößen, dazu die der Kopfzeile */
	--size-display: clamp(2.75rem, 1.5rem + 5vw, 6.5rem);
	--size-text: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--size-small: 0.9375rem;
	--size-kopf: var(--size-text); /* Kopfzeile, und im selben Format die Zeilen im Einstieg */

	/* Abstände */
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--space-s: 1rem;
	--space-m: clamp(1.5rem, 3vw, 2.5rem);
	--space-l: clamp(3rem, 6vw, 6rem);
	--space-xl: clamp(5rem, 12vw, 11rem);

	--measure: 36rem;
	/* Höhe der Kopfzeile: zweizeilig auf schmalen Bildschirmen, sonst einzeilig */
	--header-height: 8rem;

	color-scheme: light;
}

@media (min-width: 48rem) {
	:root {
		--header-height: 4.5rem;
	}
}

/* Grundlagen
-------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--size-text);
	font-weight: 400;
	line-height: 1.6;
	font-kerning: normal;
}

img {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

/* kräftig und eng, im Sinne von Coolvetica */
h1,
h2 {
	font-size: var(--size-display);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

h3 {
	font-size: var(--size-text);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

::selection {
	background: var(--green-200);
	color: var(--green-950);
}

.skip-link {
	position: absolute;
	top: 0;
	left: var(--gutter);
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--green-900);
	color: var(--stone-100);
	font-size: var(--size-small);
	transform: translateY(-120%);
}

.skip-link:focus {
	transform: none;
}

/* kleine Zeile in Kapitälchen-Manier: Beschriftungen im Kontakt */
.label {
	font-size: var(--size-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Fließtext aus dem Panel */
.prose > * + * {
	margin-top: 1em;
}

.prose ul {
	padding-left: 1.2em;
}

/* Zitat; die Zeile direkt danach gilt als Quellenangabe */
.prose blockquote {
	margin: 1.5em 0 0;
	padding-left: 1em;
	border-left: 2px solid var(--color-accent);
}

.prose blockquote + p {
	margin-top: 0.5em;
	padding-left: calc(1em + 2px);
	color: var(--color-accent);
}

.prose h2,
.prose h3 {
	margin-top: var(--space-m);
	font-size: var(--size-text);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

/* Kennzeichnung fehlender Angaben im Entwurf */
.platzhalter {
	padding: 0 0.2em;
	border-radius: 2px;
	background: #e6d98c;
	color: var(--green-950);
}

/* Kopfzeile und Navigation
-------------------------------------------------- */

/*
 * Ohne eigenen Grund. Die Schrift richtet sich nach dem, was gerade hinter ihr liegt – hell auf
 * dunklem Grün, dunkel auf Stein und hellem Grün (data-grund, main.js) –, und was unter die Kopfzeile
 * scrollt, läuft verschwommen weiter (.schleier).
 */
.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding: 1.25rem var(--gutter);
	color: var(--stone-100);
	font-size: var(--size-kopf);
	font-weight: 500;
	line-height: 1.4;
	text-rendering: geometricPrecision;
	view-transition-name: site-header;
}

.site-title,
.site-nav a {
	transition: color 0.3s;
}

.site-header [data-grund="hell"] {
	color: var(--green-900);
}

/* bleibt ab mittlerer Breite stehen – nur mit JavaScript, weil erst das Skript die Schrift nachführt */
@media (min-width: 48rem) and (scripting: enabled) {
	html {
		scroll-padding-top: var(--header-height);
	}

	.site-header {
		position: fixed;
	}
}

/*
 * Überschriften, die das Abschnittsende hinausschiebt, blenden an der Kante aus: main.js setzt --maske auf die Höhe
 * der Kante (ab Oberkante des Elements) und --weich auf die Strecke darunter, auf der es wieder voll sichtbar wird.
 */
@media (scripting: enabled) {
	.unter-kopf {
		-webkit-mask-image: linear-gradient(to bottom, transparent var(--maske), #000 calc(var(--maske) + var(--weich)));
		mask-image: linear-gradient(to bottom, transparent var(--maske), #000 calc(var(--maske) + var(--weich)));
	}
}

/*
 * Der Schleier: Nichts verschwindet. Text, Knöpfe, Karte, Konturlinien und Foto laufen unter der Kopfzeile und unter
 * stehenden Überschriften weiter, nur so verschwommen, dass sie nicht stören. Vier Lagen wachsender Unschärfe liegen
 * übereinander, jede reicht vom oberen Rand bis ein Stück unter die Kante (--kante, main.js).
 * Das Element darf dafür keine Maske tragen: Ohne deckenden Grund legte sich die Unschärfe nur über den scharfen Inhalt.
 * Der Schleier darf auch nicht über seine Fläche hinausragen, wo dahinter nur der helle Seitengrund liegt: Der bliebe
 * als heller Rand in der Unschärfe stehen. Bei Text gibt es seitlich Luft, Szenen und Foto füllen genau ihre Fläche.
 */
.schleier {
	display: none;
}

.verschwimmt > .schleier {
	position: fixed;
	top: var(--oben);
	left: calc(var(--links) - 1.75rem);
	z-index: 1;
	display: block;
	width: calc(var(--breite) + 3.5rem);
	height: var(--hoehe);
	pointer-events: none;
}

[data-scene].verschwimmt > .schleier,
.portrait-band.verschwimmt > .schleier {
	left: 0;
	width: 100%;
}

.zitat.verschwimmt > .schleier {
	z-index: 3; /* über dem Text */
}

.schleier span {
	position: absolute;
	inset: 0;
	opacity: var(--schleier, 1);
}

.schleier span:nth-child(1) {
	-webkit-backdrop-filter: blur(0.5px);
	backdrop-filter: blur(0.5px);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--kante) + 3.5rem), transparent calc(var(--kante) + 5.5rem));
	mask-image: linear-gradient(to bottom, #000 calc(var(--kante) + 3.5rem), transparent calc(var(--kante) + 5.5rem));
}

.schleier span:nth-child(2) {
	-webkit-backdrop-filter: blur(1.2px);
	backdrop-filter: blur(1.2px);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--kante) + 2.2rem), transparent calc(var(--kante) + 4.4rem));
	mask-image: linear-gradient(to bottom, #000 calc(var(--kante) + 2.2rem), transparent calc(var(--kante) + 4.4rem));
}

.schleier span:nth-child(3) {
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--kante) + 1.1rem), transparent calc(var(--kante) + 3rem));
	mask-image: linear-gradient(to bottom, #000 calc(var(--kante) + 1.1rem), transparent calc(var(--kante) + 3rem));
}

.schleier span:nth-child(4) {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	-webkit-mask-image: linear-gradient(to bottom, #000 var(--kante), transparent calc(var(--kante) + 2.2rem));
	mask-image: linear-gradient(to bottom, #000 var(--kante), transparent calc(var(--kante) + 2.2rem));
}

.site-title {
	display: inline-block;
	margin-block: -0.5rem;
	padding-block: 0.5rem;
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

/*
 * Auf der Startseite gibt es den Namen nur einmal: oben steht er im Einstieg, läuft beim Scrollen mit seinem
 * Hügel nach oben und landet genau hier (landschaft.js, steer, setzt die beiden Klassen). Erst dann erscheint
 * dieser Link. Auf schmalen Bildschirmen bleibt die Kopfzeile nicht stehen, es gibt nichts zum Landen: Dort
 * reicht der Name im Einstieg.
 */
html.marke-unterwegs .site-title {
	opacity: 0;
	pointer-events: none;
}

html.marke-unterwegs .site-title:focus-visible {
	opacity: 1;
}

html.marke-gelandet .wortmarke {
	opacity: 0;
}

@media (max-width: 47.99rem) {
	html:has(.wortmarke) .site-title {
		visibility: hidden;
	}
}

@media (max-width: 31.25rem) {
	html:has(.wortmarke) .site-title {
		display: none;
	}
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	padding: 0;
	list-style: none;
}

/* Tippfläche größer als die Schrift, ohne die Zeilenhöhe zu verändern */
.site-nav a {
	display: inline-block;
	margin-block: -0.5rem;
	padding-block: 0.5rem;
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.site-title:hover,
.site-nav a:hover,
.site-nav a[aria-current] {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
}

/*
 * Schmale Bildschirme: Navigation immer in einer Zeile. Die Schriftgröße folgt der
 * Breite der Kopfzeile (bewusste Ausnahme von den drei Grundgrößen, siehe CLAUDE.md).
 */
@media (max-width: 31.25rem) {
	:root {
		/* Wortbreiten (18,1em) + 4 Abstände (2em) + Reserve für andere Geräte */
		--size-kopf: min(var(--size-text), calc((100vw - 2 * var(--gutter)) / 20.75));
	}

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

	.site-nav ul {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0 0.5em;
	}
}

/* Landschaften (siehe landschaft.js)
-------------------------------------------------- */

/*
 * Jede Szene liegt zwischen zwei Abschnitten: ihr Grund hat die Farbe des Abschnitts darüber,
 * ihre vorderste Lage die des Abschnitts darunter. So wird die Grenze zur Kante einer Lage
 * statt zum Rahmen eines Bildes.
 */
.scene {
	position: relative;
	overflow: clip;
	overflow-anchor: none; /* die Leinwände entstehen per Skript und dürfen die Scrollstelle nicht verschieben */
}

/* eine Leinwand hinter dem Inhalt der Szene, im Einstieg eine zweite davor (siehe landschaft.js) */
.scene__leinwand {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.scene__leinwand--vorn {
	z-index: 3;
}

/* ohne JavaScript: zwei ruhige Flächen mit gerader Kante */
.scene:not(.is-ready) {
	background: linear-gradient(var(--scene-from, var(--stone-200)) var(--scene-kante, 60%), var(--scene-to, var(--stone-200)) var(--scene-kante, 60%));
}

.scene[data-scene="linien"] {
	--scene-to: var(--ral-6010);

	height: clamp(24rem, 70svh, 46rem);
}

/* läuft unter den Ablauf: der Abschnitt beginnt, bevor die Linien verschwunden sind */
.scene[data-scene="linien-aus"] {
	height: clamp(26rem, 74svh, 48rem);
	margin-bottom: clamp(-20rem, -30svh, -10rem);
}

.scene[data-scene="huegel"] {
	--scene-to: var(--ral-6010);

	height: clamp(18rem, 56svh, 38rem);
}

/* In die Konturlinien lässt sich greifen (landschaft.js, tug) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (hover: hover) {
	html:not(.ohne-bewegung) .scene[data-scene^="linien"] {
		cursor: grab;
	}

	html:not(.ohne-bewegung) .scene.zieht {
		cursor: grabbing;
	}
}

/*
 * Zitat: oben Hügel in Grasgrün und Violett, unten geht die Fläche in die Konturlinien über: Die oberste Linie
 * des folgenden Bands ist ihre Unterkante (landschaft.js, Szene „zitat“ und roof).
 */
.zitat {
	--scene-from: var(--sekundaer);
	--scene-to: var(--sekundaer);

	display: grid;
	align-content: end;
	min-height: clamp(18rem, 44svh, 26rem);
	margin: 0;
	padding: var(--space-l) var(--gutter) 0;
	color: #fff;
}

.zitat blockquote,
.zitat figcaption {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 84rem;
	margin: 0 auto;
}

/* große, ruhige Serife; das Anführungszeichen als Zeichen, nicht als Teil des Satzes */
.zitat blockquote {
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	font-size: clamp(1.625rem, 1rem + 2.4vw, 3rem);
	font-style: italic;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.zitat blockquote p {
	max-width: 16em;
}

.zitat blockquote::before {
	content: "“";
	content: "“" / ""; /* Zierzeichen: wird nicht mit vorgelesen */
	display: block;
	height: 0.42em;
	margin-left: -0.04em;
	color: var(--green-250);
	font-size: 2.2em;
	font-style: normal;
	line-height: 0.9;
}

.zitat figcaption {
	margin-top: var(--space-s);
	font-size: var(--size-kopf);
	font-weight: 500;
}

/* Einstieg
-------------------------------------------------- */

.hero {
	--scene-from: var(--green-950);
	--scene-to: var(--green-700);
	--scene-kante: 66%; /* ohne Skript: unter den Zeilen, nicht durch sie hindurch */

	display: grid;
	align-content: center;
	min-height: max(36rem, 100svh);
	padding: calc(var(--header-height) + var(--space-m)) var(--gutter) max(36svh, 11rem);
	background: var(--green-950);
	color: var(--stone-100);
}

/* trägt die Wortmarke zwischen den Leinwänden (landschaft.js, Teil „text“) */
.hero__content {
	position: relative;
	z-index: 2;
}

/* derselbe Name wie in der Kopfzeile, im selben Format und in derselben Größe, senkrecht darunter */
.wortmarke {
	font-size: var(--size-kopf);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-rendering: geometricPrecision;
}

/*
 * Über- und Unterzeile im Format der Kopfzeile, rechtsbündig, ein Stück unter dem Namen. Sie liegen wie die Wortmarke
 * zwischen den Leinwänden, also hinter dem Hang direkt hinter dem violetten Hügel, und laufen langsamer als er: Beim Scrollen
 * schiebt er sich vor sie und verdeckt sie (landschaft.js, Teil „zeilen“). Die zweite Angabe bei top hält in niedrigen
 * Fenstern Abstand zur Kante des Hangs, die bei rund 62 % der Höhe liegt: Im Startbild steht die Schrift frei.
 */
.hero__zeilen {
	position: absolute;
	top: min(48% + 2.8 * var(--size-kopf), 62% - 3.4 * var(--size-kopf));
	inset-inline: var(--gutter);
	z-index: 2;
	font-size: var(--size-kopf);
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
	text-rendering: geometricPrecision;
}

/* Abschnitte
-------------------------------------------------- */

.section {
	position: relative;
	z-index: 1;
	padding: var(--space-xl) var(--gutter);
}

/* Abschnitte in RAL 6010, mit Korn */
.section--brand {
	--color-bg: var(--ral-6010);
	--color-text: var(--stone-100);
	--color-accent: var(--green-200);

	background: var(--color-bg);
	color: var(--color-text);
}

/*
 * Filmkorn in Zeitlupe auf grünen Flächen (Klasse „korn“, siehe korn.js): drei Bilder der Rausch-Kachel
 * blenden nacheinander weich ein und aus, zusammen immer gleich stark; ein Bild, das gerade unsichtbar
 * ist, springt an eine neue Stelle. Ohne Bewegung stehen alle drei still mit je einem Drittel.
 */
.korn {
	position: relative;
	isolation: isolate;
	overflow-anchor: none; /* die Lagen entstehen per Skript und dürfen die Scrollstelle beim Neuladen nicht verschieben */
}

.korn__lage {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--korn-kachel, none);
	opacity: calc(var(--korn-staerke) / 3);
	pointer-events: none;
}

.korn__lage:nth-child(2) {
	background-position: 97px 171px;
}

.korn__lage:nth-child(3) {
	background-position: 203px 38px;
}

@media (prefers-reduced-motion: no-preference) {
	.korn__lage {
		opacity: 0;
		animation:
			korn-blenden var(--korn-periode) cubic-bezier(0.37, 0, 0.63, 1) infinite,
			korn-springen-1 calc(var(--korn-periode) * 5) step-end infinite;
	}

	.korn__lage:nth-child(2) {
		animation-name: korn-blenden, korn-springen-2;
		animation-delay: calc(var(--korn-periode) / -3);
	}

	.korn__lage:nth-child(3) {
		animation-name: korn-blenden, korn-springen-3;
		animation-delay: calc(var(--korn-periode) / -1.5);
	}

	.ohne-bewegung .korn__lage {
		opacity: calc(var(--korn-staerke) / 3);
		animation: none;
	}
}

/* ein Kosinus-Bogen: 0 → zwei Drittel → 0 */
@keyframes korn-blenden {
	0%,
	100% {
		opacity: 0;
	}

	50% {
		opacity: calc(var(--korn-staerke) * 2 / 3);
	}
}

/* neue Stellen, jeweils genau dann, wenn das Bild unsichtbar ist */
@keyframes korn-springen-1 {
	0% { background-position: 0 0; }
	20% { background-position: 173px 61px; }
	40% { background-position: 38px 209px; }
	60% { background-position: 224px 142px; }
	80% { background-position: 97px 17px; }
}

@keyframes korn-springen-2 {
	0% { background-position: 151px 233px; }
	20% { background-position: 12px 118px; }
	40% { background-position: 203px 84px; }
	60% { background-position: 66px 171px; }
	80% { background-position: 130px 246px; }
}

@keyframes korn-springen-3 {
	0% { background-position: 89px 40px; }
	20% { background-position: 240px 190px; }
	40% { background-position: 30px 140px; }
	60% { background-position: 180px 10px; }
	80% { background-position: 110px 100px; }
}

.section__inner {
	display: grid;
	gap: var(--space-m) var(--space-l);
	max-width: 84rem;
	margin-inline: auto;
}

/* per Tastatur angesteuert: unterhalb des Schleiers landen, nicht verschwommen darin */
.section__body :is(a, button, input, textarea, select, summary) {
	scroll-margin-top: 10rem;
}

.section__body {
	display: grid;
	gap: var(--space-l);
	max-width: var(--measure);
}

.section__body h3 {
	margin-bottom: var(--space-s);
}

/*
 * Die Abschnittsüberschrift bleibt beim Scrollen stehen, solange ihr Abschnitt sichtbar ist.
 * Einspaltig bekommt sie die Abschnittsfarbe als Hintergrund, damit der Text darunter verschwindet.
 */
.section__title {
	position: sticky;
	top: 0;
	z-index: 10;
	align-self: start;
	margin: -0.75rem calc(var(--gutter) * -1);
	padding: 0.75rem var(--gutter);
	background: var(--color-bg);
}

/* weicher Übergang, statt den darunter durchlaufenden Text hart abzuschneiden */
.section__title::after {
	content: "";
	position: absolute;
	inset: 100% 0 auto;
	height: 1.5rem;
	background: linear-gradient(var(--color-bg), transparent);
	pointer-events: none;
}

@media (min-width: 64rem) {
	.section__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.section__title {
		top: var(--space-m);
		margin: 0;
		padding: 0;
		background: none;
	}

	.section__title::after {
		content: none;
	}
}

/*
 * Mit JavaScript braucht die stehende Überschrift keinen Grund: Fließtext, der unter sie läuft, verschwimmt
 * (main.js, .schleier). So deckt sie auch nichts ab – etwa die Linien, über denen der Ablauf beginnt.
 */
@media (scripting: enabled) {
	.section__title {
		margin: 0;
		padding: 0;
		background: none;
	}

	.section__title::after {
		content: none;
	}
}

@media (min-width: 48rem) and (scripting: enabled) {
	.section__title {
		top: var(--header-height);
	}
}

@media (min-width: 64rem) and (scripting: enabled) {
	.section__title {
		top: calc(var(--header-height) + var(--space-m));
	}
}

.button {
	justify-self: start;
	display: inline-block;
	padding: 0.85rem 1.6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--size-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.button:hover {
	background: var(--color-text);
	color: var(--color-bg);
}

/* die wichtigste Handlung der Seite: in der Sekundärfarbe gefüllt */
.button--primary {
	border-color: var(--sekundaer);
	background: var(--sekundaer);
	color: #fff;
}

.button--primary:hover {
	border-color: color-mix(in srgb, var(--sekundaer) 80%, var(--green-950));
	background: color-mix(in srgb, var(--sekundaer) 80%, var(--green-950));
	color: #fff;
}

.button--primary:focus-visible {
	outline-color: var(--green-900);
}

/* Listen mit feinen Trennlinien */
.list ul {
	padding: 0;
	list-style: none;
}

.list li {
	padding-block: 0.75rem;
	border-top: 1px solid var(--color-line);
}

.list li:last-child {
	border-bottom: 1px solid var(--color-line);
}

.list li p {
	margin: 0;
}

/*
 * Porträt in voller Breite, harter Schnitt nach dem Grasgrün. Das Foto im Querformat
 * muss noch gemacht werden; bis dahin steht das Hochformat als Ausschnitt da.
 */
.portrait-band {
	position: relative;
}

.portrait-band img {
	width: 100%;
	height: clamp(24rem, 72svh, 48rem);
	object-fit: cover;
	object-position: 50% 46%;
}

.portrait-band figcaption {
	position: absolute;
	right: var(--gutter);
	bottom: var(--space-s);
	font-size: var(--size-small);
}

/* Ablauf */
.steps {
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0.5rem var(--space-s);
	padding-block: var(--space-m);
	border-top: 1px solid var(--color-line);
}

.steps li:last-child {
	border-bottom: 1px solid var(--color-line);
}

.steps li::before {
	content: counter(step, decimal-leading-zero);
	grid-row: span 2;
	padding-top: 0.15em;
	color: var(--color-accent);
	font-size: var(--size-small);
}

.steps h3 {
	margin: 0;
}

/* Kosten und Kontakt */
.costs > div,
.contact dl > div {
	display: grid;
	gap: 0.25rem;
	padding-block: var(--space-s);
	border-top: 1px solid var(--color-line);
}

.costs > div:last-child,
.contact dl > div:last-child {
	border-bottom: 1px solid var(--color-line);
}

.costs dt {
	font-weight: 700;
}

.contact {
	font-style: normal;
}

.contact dt {
	color: var(--color-accent);
}

.note {
	font-size: var(--size-small);
}

/* Karte (Zwei-Klick-Lösung, siehe snippets/map.php) */
.map {
	--color-bg: var(--green-900);
	--color-text: var(--stone-100);

	background: var(--color-bg);
	color: var(--color-text);
}

.map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}

/* wächst mit dem Text, damit auf schmalen Bildschirmen nichts überläuft */
.map__consent {
	display: grid;
	align-content: center;
	gap: var(--space-s);
	min-height: 18rem;
	padding: var(--space-m);
	font-size: var(--size-small);
}

.map__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

button.button {
	font-family: inherit;
	background: transparent;
	color: inherit;
	line-height: inherit;
	cursor: pointer;
}

/* sonst überschreibt display: inline-block das hidden-Attribut */
.button[hidden] {
	display: none;
}

/* Unterseiten (Impressum, Datenschutz, Fehler)
-------------------------------------------------- */

.scene[data-scene="auftakt"] {
	--scene-from: var(--green-900);
	--scene-to: var(--ral-6010);

	height: clamp(17rem, 46svh, 28rem);
	background: var(--green-900);
}

.page {
	display: grid;
	gap: var(--space-l);
	max-width: 84rem;
	margin-inline: auto;
	padding: var(--space-l) var(--gutter) var(--space-xl);
}

.page .prose {
	max-width: var(--measure);
}

/* Fußzeile
-------------------------------------------------- */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: var(--space-m) var(--gutter);
	background: var(--green-950);
	color: var(--stone-300);
	font-size: var(--size-small);
}

.site-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding: 0;
	list-style: none;
}

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

@media (prefers-reduced-motion: no-preference) {
	html.geladen {
		scroll-behavior: smooth;
	}

	/* weiche Seitenwechsel ohne JavaScript, wo der Browser es unterstützt */
	@view-transition {
		navigation: auto;
	}
}

/* Druck: Die Kopfzeile bleibt oben, Wortmarke und Zeilen stehen unabhängig von der Scrollstelle an ihrem Platz */
@media print {
	.site-header {
		position: static;
	}

	.wortmarke {
		opacity: 1 !important;
	}

	.wortmarke,
	.hero__zeilen {
		transform: none !important;
	}

	.hero__zeilen {
		position: static !important;
		margin-top: var(--space-s) !important;
	}

	/* stehende Überschriften und Schleier gehören zur Scrollstelle, nicht aufs Papier */
	.section__title {
		position: static;
	}

	.schleier {
		display: none !important;
	}

	.unter-kopf {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}

	/* Browser lassen Flächen beim Drucken meist weg: Das Zitat behält seine, die grünen Abschnitte werden dunkel auf Weiß */
	.zitat {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.section--brand {
		--color-text: var(--green-950);
		--color-accent: var(--green-800);

		background: none;
	}

	.button--primary {
		border-color: currentColor;
		background: none;
		color: var(--green-950);
	}
}