:root
{
	--alm: #ccd6a6;
	--alm-tief: #b6c288;
	--alm-linie: #a9b77a;
	--holz: #4a3524;
	--holz-tief: #31231a;
	--holz-hell: #8a6b4c;
	--firn: #f3f6ef;
	--loh: #9c4a18;
	--tinte: #26301c;
}

*
{
	box-sizing: border-box;
}

body
{
	margin: 0;
	background: var(--alm);
	color: var(--tinte);
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(1rem, .66rem + .44vw, 1.09rem);
	-webkit-text-size-adjust: 100%;
}

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

a
{
	color: var(--loh);
}

.bahn
{
	width: min(100% - 2.2rem, 68rem);
	margin-inline: auto;
}

/* ---- Typografie ----
   Eine Grotesk. Das Gliederungsmittel dieser Seite ist der Zeilenabstand,
   und zwar nicht innerhalb einer Doppelseite, sondern über die ganze Seite
   hinweg: Der Text beginnt eng und wird von Abschnitt zu Abschnitt weiter.
   Die Schriftgrade bleiben dabei unverändert. ---- */

h1, h2
{
	margin: 0;
	font-weight: 600;
	letter-spacing: -.018em;
	line-height: 1.1;
}

h1
{
	font-size: clamp(1.85rem, 1.1rem + 2.7vw, 3.15rem);
	max-width: 19ch;
}

h2
{
	font-size: clamp(1.28rem, 1.02rem + .95vw, 1.72rem);
	max-width: 22ch;
	margin-bottom: 1.05rem;
}

p
{
	margin: 0 0 1.05em;
	max-width: 39rem;
}

.marke
{
	display: block;
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--loh);
	margin-bottom: .85rem;
	line-height: 1.4;
}

figure
{
	margin: 0;
}

figcaption
{
	margin-top: .65rem;
	font-size: .8rem;
	line-height: 1.62;
	color: #55613f;
	max-width: 34rem;
}

/* ---- Die Luftstufen: Innenraum und Zeilenabstand wachsen nach unten ---- */

.stufe
{
	line-height: 1.5;
}

.stufe--1 { padding: clamp(1.8rem, 3.4vw, 2.6rem) 0; line-height: 1.5; }
.stufe--2 { padding: clamp(2.2rem, 4.2vw, 3.4rem) 0; line-height: 1.64; }
.stufe--3 { padding: clamp(2.8rem, 5.2vw, 4.4rem) 0; line-height: 1.78; }
.stufe--4 { padding: clamp(3.4rem, 6.4vw, 5.6rem) 0; line-height: 1.92; }

/* ---- Kopf ---- */

.kopf
{
	padding-top: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.46;
}

.kopf__lead
{
	margin-top: 1.3rem;
	max-width: 33rem;
	color: #3b4a2c;
}

.kopf__bild
{
	margin-top: clamp(1.6rem, 3.6vw, 2.8rem);
}

.kopf__bild img
{
	width: 100%;
}

/* ---- Abschnitt mit Bild ---- */

.paar
{
	display: grid;
	gap: clamp(1.4rem, 3.4vw, 2.8rem);
	align-items: start;
}

@media (min-width: 52rem)
{
	.paar
	{
		grid-template-columns: 1fr minmax(min(20rem, 100%), .8fr);
	}

	.paar__bild
	{
		position: sticky;
		top: 2rem;
	}
}

.paar > *
{
	min-width: 0;
}

.paar__bild img
{
	border-radius: 2px;
}

/* ---- Der Merksatz auf Holz: hier bekommt der Satz seine Luft ---- */

.holz
{
	background: var(--holz);
	color: #e7e2d5;
	padding: clamp(2.6rem, 5.4vw, 4.6rem) 0;
}

.holz .marke
{
	color: #c99a6a;
}

.merksatz
{
	font-size: clamp(1.25rem, .88rem + 1.5vw, 2.05rem);
	letter-spacing: -.014em;
	color: var(--firn);
	margin-top: 1.4rem;
}

.merksatz p
{
	margin: 0;
	max-width: 26ch;
	line-height: 1.95;
}

@media (min-width: 48rem)
{
	/* Der Platz für den geöffneten Satz steht von Anfang an bereit,
	   damit beim Aufatmen nichts darunter verrutscht. */
	.merksatz
	{
		display: flex;
		align-items: center;
		min-height: 6.1em;
	}
}

.js .merksatz p
{
	line-height: 1.06;
	transition: line-height 1.5s cubic-bezier(.28, .68, .24, 1);
}

.js .geatmet .merksatz p
{
	line-height: 1.95;
}

.holz__nach
{
	margin-top: clamp(1.6rem, 3vw, 2.4rem);
	color: #c3bcab;
	line-height: 1.86;
	max-width: 36rem;
}

/* ---- ZEUS-Abschnitt ---- */

.zeus
{
	background: var(--firn);
	padding: clamp(2.8rem, 5.6vw, 4.8rem) 0;
	line-height: 1.92;
}

/* Der Abschluss ist die weiteste Luftstufe der Seite — das Siegel steht rechts
   daneben und bekommt denselben Innenraum. Auf dem Firnweiß der Fläche wäre das
   schwarz gezeichnete Siegel zwar lesbar, aber ohne Halt; es sitzt deshalb auf
   einer Kachel im Almgrün der Seite, mit derselben Rundung wie die Bilder. */

.zeus__innen
{
	display: grid;
	gap: clamp(1.6rem, 3.6vw, 3rem);
	align-items: start;
}

@media (min-width: 52rem)
{
	.zeus__innen
	{
		grid-template-columns: 1fr minmax(min(15rem, 100%), .45fr);
	}
}

.zeus__innen > *
{
	min-width: 0;
}

.zeus__siegel
{
	max-width: 15rem;
	justify-self: start;
	line-height: 1.5;
}

.zeus__siegel a
{
	display: block;
}

.zeus__siegel img
{
	width: 100%;
	background: var(--alm);
	padding: 1rem;
	border-radius: 2px;
}

.knopf
{
	display: inline-block;
	margin-top: .5rem;
	padding: .82rem 1.8rem;
	background: var(--holz);
	color: var(--firn);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: .01em;
	border-radius: 2px;
}

.knopf:hover
{
	background: var(--loh);
}

/* ---- Querlinks: die Klammer ----
   Keine Marke, keine Linie, keine Fläche: jede Zeile steht in einem Paar
   eckiger Klammern. Die öffnende steht blass an der festen linken Kante,
   die schließende folgt dem letzten Wort und ist zunächst unsichtbar.
   Beim Überfahren schließt sich die Klammer in Loh um den Titel.
   Der Platz beider Klammern ist immer reserviert — der Text rückt nie. ---- */

.themen
{
	padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
	border-top: 2px solid var(--alm-linie);
	line-height: 1.5;
}

.themen:not(:has(a))
{
	display: none;
}

.themen h2
{
	max-width: none;
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--loh);
	margin-bottom: 1.5rem;
}

.klammern
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .35rem clamp(1.4rem, 3vw, 2.6rem);
}

@media (min-width: 46rem)
{
	.klammern
	{
		grid-template-columns: repeat(2, minmax(min(18rem, 100%), 1fr));
	}
}

.klammern li
{
	display: block;
	position: relative;
	min-width: 0;
	padding: .5rem 1rem .5rem 1.15rem;
	font-size: .93rem;
	line-height: 1.42;
	color: var(--tinte);
}

.klammern li[hidden]
{
	display: none;
}

/* Die öffnende Klammer sitzt fest an der linken Kante, absolut gesetzt,
   damit der Titel in allen Zuständen an derselben Stelle beginnt. */
.klammern li::before
{
	content: "[";
	position: absolute;
	left: 0;
	top: .5rem;
	color: var(--holz-hell);
	opacity: .5;
	transition: color .34s ease, opacity .34s ease;
}

/* Die schließende Klammer folgt dem letzten Wort und ist zunächst
   unsichtbar; ihr Platz steht über das rechte Innenmaß bereit. */
.klammern li::after
{
	content: "]";
	margin-left: .38em;
	color: var(--loh);
	opacity: 0;
	transition: opacity .34s ease;
}

.klammern li:hover::before,
.klammern li:focus-within::before
{
	color: var(--loh);
	opacity: 1;
}

.klammern li:hover::after,
.klammern li:focus-within::after
{
	opacity: 1;
}

.klammern a
{
	display: inline;
	color: inherit;
	text-decoration: none;
	transition: color .34s ease;
}

.klammern li:hover a,
.klammern a:focus-visible
{
	color: var(--holz-tief);
}

/* ---- Fuß: der Winkel — ein Rahmen, der nur oben und links läuft ---- */

.fuss
{
	padding: 0 0 clamp(2.6rem, 5vw, 4rem);
	font-size: .84rem;
	line-height: 1.78;
	color: #3f4b30;
}

.fuss__winkel
{
	border-top: 3px solid var(--holz);
	border-left: 3px solid var(--holz);
	padding: 1.5rem 0 .4rem 1.5rem;
	display: grid;
	gap: 1.1rem clamp(1.8rem, 4vw, 3.4rem);
}

@media (min-width: 44rem)
{
	.fuss__winkel
	{
		grid-template-columns: 1.15fr 1fr;
	}
}

.fuss__winkel > div
{
	min-width: 0;
}

.fuss b
{
	display: block;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--loh);
}

.fuss__spaeter
{
	margin-top: .9rem;
}

.fuss a
{
	color: var(--holz);
	text-decoration: none;
	border-bottom: 1px solid var(--alm-linie);
}

.fuss a:hover
{
	border-bottom-color: var(--loh);
}

@media (prefers-reduced-motion: reduce)
{
	.js .merksatz p
	{
		line-height: 1.95;
		transition: none;
	}

	.klammern li::before,
	.klammern li::after,
	.klammern a
	{
		transition: none;
	}
}

/* ---- Weitergeben ----
   Form: die Botschaft steht in einem Kasten aus Holz — derselbe Ton wie der
   Merksatz weiter oben —, die fünf Wege stehen frei darunter auf dem Almgrün,
   ohne Fläche, nur mit Symbol und Wort. Der Kasten trägt den Satz, die Wege
   gehören zur Seite. ---- */

.weiter
{
	padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(1.8rem, 3.4vw, 2.8rem);
	line-height: 1.6;
}

.weiter__kasten
{
	background: var(--holz);
	color: var(--firn);
	padding: clamp(1.3rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.3rem);
	border-radius: 2px;
}

.weiter__kasten p
{
	margin: 0;
	max-width: 44ch;
	font-size: 1.02em;
	line-height: 1.75;
}

.weiter__wege
{
	list-style: none;
	margin: clamp(1.1rem, 2.4vw, 1.7rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem clamp(1.3rem, 3vw, 2.4rem);
}

.weiter__wege a,
.weiter__wege button
{
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .2rem 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .92rem;
	color: var(--holz);
	text-decoration: none;
	border-bottom: 1px solid var(--alm-linie);
	cursor: pointer;
	transition: color .34s ease, border-color .34s ease;
}

.weiter__wege a:hover,
.weiter__wege button:hover
{
	color: var(--loh);
	border-bottom-color: var(--loh);
}

.weiter__wege svg
{
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.weiter__wege [hidden],
.weiter__wege li:has(> [hidden])
{
	display: none;
}

/* ---- Die mitlaufende Leiste: links, ohne Kasten, nur eine Spalte Symbole.
   Der Textblock ist 68rem breit; die Leiste erscheint deshalb erst, wenn
   links davon wirklich Platz frei ist. ---- */

.rand
{
	display: none;
}

@media (min-width: 84rem)
{
	.rand
	{
		display: grid;
		gap: 1.15rem;
		justify-items: center;
		position: fixed;
		left: clamp(1.2rem, 2.6vw, 2.6rem);
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
	}

	.rand a,
	.rand button
	{
		display: block;
		padding: 0;
		border: 0;
		background: none;
		color: var(--holz-hell);
		cursor: pointer;
		opacity: .78;
		transition: color .34s ease, opacity .34s ease;
	}

	.rand a:hover,
	.rand button:hover,
	.rand a:focus-visible,
	.rand button:focus-visible
	{
		color: var(--loh);
		opacity: 1;
	}

	.rand svg
	{
		width: 1.25rem;
		height: 1.25rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.rand [hidden]
	{
		display: none;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.weiter__wege a,
	.weiter__wege button,
	.rand a,
	.rand button
	{
		transition: none;
	}
}