/* Richtung 3: Kräftig und seriös, angelehnt an Patheren (Dribbble). Heller Grund, große Anzeigeschrift, abgerundete
   Kacheln. Funnel Display für die großen Überschriften, Montserrat für Text, Zwischentitel und Knöpfe. Farben nur aus
   dem Evergreen-Designsystem. Grundlagen, Kopf, Knöpfe, Kacheln, Motivkacheln und Fuß.

   Fassung „Punktzeichen“: Illustration nach dem Prinzipien-Raster von Superside. Der Punkt ist das Grundelement:
   kleine Zeichen aus Punkten, mittig auf einer flachen Farbfläche mit viel Rand. Volle Punkte und Ringe in Deep
   Forest, dieselbe Strichstärke in jedem Motiv, in jedem Motiv genau ein grüner Punkt. Ringe stehen für offen oder
   noch nicht gewählt. Keine Linien zwischen den Punkten, keine Textur.

   Fassung 4: Fassung 3 nach der Critique vom 03.11.2026. Ruhigeres Register: kleine Radien, keine
   Pastellflächen, Zeichen nur an vier Stellen. Mobil ein Menü aus <details>, ohne JavaScript; Schalter und
   Fußlinks mit mindestens 2,75 rem Höhe. Die Route aus 3-kraeftig steht in abschnitte.css. */

:root {
	--wald: #112a28;
	--wald-80: #415553;
	--wald-40: #a0aaa9;
	--wald-20: #cfd4d4;
	--gruen: #8aa14a;
	--gruen-80: #a2b46e;
	--gruen-40: #d0d9b7;
	--gruen-20: #e8ecdc;
	--moss: #4c6639;
	--moss-20: #dbe0d7;
	--dusty-20: #dae4e9;
	--butter-20: #fcf2db;
	--butter-40: #f9e5b7;
	--weiss: #ffffff;
	--grund: #f6f7fb;
	--text: #4b5563;

	--schrift-gross: "Funnel Display", Arial, sans-serif;
	--gross-gewicht: 400;
	--gross-spur: -0.035em;
	--gross-zeile: 1;
	--schrift-text: "Montserrat", Arial, sans-serif;

	--rahmen: 84rem;
	--rand: clamp(1rem, 4vw, 3rem);
	--abstand: clamp(4.5rem, 8vw, 7rem);
	--ecke: 0.75rem;
	--ecke-motiv: 0.5rem;
	--ecke-knopf: 0.5rem;
	--luecke: clamp(0.75rem, 1.2vw, 1rem);

	--pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

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

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

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font-family: var(--schrift-text);
	font-size: 1.0625rem;
	line-height: 1.65;
}

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

h1,
h2 {
	margin: 0;
	color: var(--wald);
	font-family: var(--schrift-gross);
	font-weight: var(--gross-gewicht);
	letter-spacing: var(--gross-spur);
	line-height: var(--gross-zeile);
	text-wrap: balance;
}

h3 {
	margin: 0;
	color: var(--wald);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: balance;
}

.gross {
	font-size: clamp(2.5rem, 5.4vw, 4.75rem);
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: inherit;
}

a:focus-visible,
summary:focus-visible {
	outline: 0.1875rem solid var(--moss);
	outline-offset: 0.25rem;
}

.rahmen {
	width: 100%;
	max-width: var(--rahmen);
	margin-inline: auto;
	padding-inline: var(--rand);
}

.abschnitt {
	padding-block: var(--abstand);
}

.etikett {
	margin: 0;
	color: var(--moss);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.punkt {
	color: var(--gruen);
}

.quelle {
	font-size: 0.8125rem;
	white-space: nowrap;
}

.quelle::before {
	content: "Quelle: ";
}

/* Markiert Angaben, die noch geklärt werden müssen. Gehört nicht auf die echte Seite. */

.offen {
	padding: 0.125rem 0.5rem;
	border: 0.0625rem dashed currentColor;
	border-radius: 0.25rem;
	font-weight: 700;
	white-space: nowrap;
}

.unsichtbar {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Kopfzeile eines Abschnitts: große Überschrift links, kurzer Text oder Knopf rechts */

.kopfzeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	gap: 1.5rem 4rem;
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.kopfzeile > h2 {
	max-width: 52rem;
}

.kopfzeile--allein {
	grid-template-columns: 1fr;
}

.kopfzeile--allein > h2 {
	max-width: 70rem;
}

.kopfzeile__text {
	padding-bottom: 0.5rem;
	color: var(--wald-80);
	font-size: 1rem;
}

.kopfzeile .knopf {
	justify-self: end;
}

@media (max-width: 56rem) {
	.kopfzeile {
		grid-template-columns: 1fr;
	}

	.kopfzeile .knopf {
		justify-self: start;
	}
}

/* Knöpfe und Links */

.knopf {
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	padding: 1rem 1.5rem;
	border-radius: var(--ecke-knopf);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.knopf--gruen {
	background: var(--gruen);
	color: var(--wald);
}

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

.knopf--dunkel {
	background: var(--wald);
	color: var(--weiss);
}

.knopf--dunkel:hover {
	background: var(--wald-80);
}

/* Im Kopf trägt der Knopf ein Wort, das mobil wegfällt. Ohne Abstand im Knopf, das Wort bringt seinen eigenen mit. */

.kopf .knopf {
	gap: 0;
}

.nur-breit {
	margin-left: 0.28em;
}

.knopf--klein {
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	font-size: 0.9375rem;
}

.mit-pfeil::after {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	mask: var(--pfeil) center / contain no-repeat;
}

.mehr {
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	min-height: 2.75rem;
	color: var(--wald);
	font-weight: 600;
	text-decoration: none;
}

.mehr:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.125rem;
	text-underline-offset: 0.3em;
}

/* Kacheln: eine Form für Fotos, Flächen und Aussagen */

.kachel {
	overflow: hidden;
	border-radius: var(--ecke);
	background: var(--weiss);
}

.kachel--wald {
	background: var(--wald);
	color: var(--wald-20);
}

.kachel--gruen {
	background: var(--gruen);
	color: var(--wald);
}

.kachel--wald a:focus-visible,
.kachel--wald:focus-visible {
	outline-color: var(--gruen);
}

/* Motivkacheln: flache Fläche ohne Textur, darauf ein Zeichen aus Punkten. Die Fläche steht in --flaeche. */

.motiv {
	--flaeche: var(--dusty-20);
	--strich: var(--wald);
	--punkt: var(--wald);
	border-radius: var(--ecke-motiv);
	background: var(--flaeche);
}

.kachel.motiv {
	border-radius: var(--ecke);
}

.motiv--wald {
	--flaeche: var(--wald);
	--strich: var(--wald-40);
	--punkt: var(--grund);
	color: var(--wald-20);
}

.motiv__bild {
	display: block;
	width: 100%;
	height: 100%;
}

/* Bausteine der Zeichen. Die Strichstärke wächst mit dem Zeichen, wie bei einer gezeichneten Form. */

.voll {
	fill: var(--punkt, var(--wald));
}

.ring {
	fill: none;
	stroke: var(--strich, var(--wald));
	stroke-width: 2.5;
}

.ziel {
	fill: var(--gruen);
}

/* Kopf */

.kopf {
	position: relative;
	display: flex;
	gap: 2rem;
	align-items: center;
	width: 100%;
	max-width: var(--rahmen);
	margin-inline: auto;
	padding: 1.75rem var(--rand);
}

.kopf__logo {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
}

.kopf__logo img {
	width: 8.5rem;
}

.kopf__nav {
	display: flex;
	gap: 2.25rem;
	margin-inline: auto;
	font-size: 0.9375rem;
	font-weight: 500;
}

.kopf__nav a {
	color: var(--wald);
	text-decoration: none;
}

.kopf__nav a:hover {
	color: var(--moss);
}

/* Menü: nur mobil. Ein <details> mit eigenem Zeichen, die Liste klappt als Kachel unter dem Kopf auf. */

.menue {
	display: none;
}

.menue__knopf {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--ecke-knopf);
	background: var(--weiss);
	color: var(--wald);
	list-style: none;
	cursor: pointer;
}

.menue__knopf::-webkit-details-marker {
	display: none;
}

.menue__knopf:hover {
	background: var(--gruen-20);
}

/* Drei Striche, offen ein Kreuz. Gezeichnet, ohne Zeichen aus der Schrift. */

.menue__zeichen,
.menue__zeichen::before,
.menue__zeichen::after {
	display: block;
	width: 1.125rem;
	height: 0.125rem;
	border-radius: 0.0625rem;
	background: currentColor;
}

.menue__zeichen {
	position: relative;
}

.menue__zeichen::before,
.menue__zeichen::after {
	content: "";
	position: absolute;
	left: 0;
}

.menue__zeichen::before {
	top: -0.375rem;
}

.menue__zeichen::after {
	top: 0.375rem;
}

.menue[open] .menue__zeichen {
	background: transparent;
}

.menue[open] .menue__zeichen::before {
	top: 0;
	transform: rotate(45deg);
	background: var(--wald);
}

.menue[open] .menue__zeichen::after {
	top: 0;
	transform: rotate(-45deg);
	background: var(--wald);
}

.menue__liste {
	position: absolute;
	top: calc(100% - 0.75rem);
	right: var(--rand);
	left: var(--rand);
	z-index: 10;
	display: flex;
	flex-direction: column;
	padding: 0.75rem;
	border-radius: var(--ecke);
	background: var(--weiss);
	box-shadow: 0 1rem 2.5rem -1rem rgb(17 42 40 / 0.25);
}

.menue__liste a {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	padding-inline: 1rem;
	border-radius: var(--ecke-knopf);
	color: var(--wald);
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
}

.menue__liste a:hover {
	background: var(--grund);
}

@media (max-width: 56rem) {
	.kopf {
		gap: 0.75rem;
	}

	.kopf__nav {
		display: none;
	}

	.kopf .knopf {
		margin-left: auto;
	}

	.menue {
		display: block;
	}
}

@media (max-width: 30rem) {
	.kopf__logo img {
		width: 7rem;
	}

	.kopf .knopf {
		padding-inline: 0.875rem;
		font-size: 0.875rem;
	}

	.nur-breit {
		display: none;
	}
}

/* Fuß: dunkle Kachel mit Abstand zum Rand */

.fuss {
	padding: 0 var(--rand) var(--rand);
	font-size: 0.9375rem;
}

.fuss__block {
	max-width: calc(var(--rahmen) - 2 * var(--rand));
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem) 2rem;
}

.fuss__raster {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 3rem;
}

.fuss__logo {
	width: 9rem;
	margin-bottom: 1.25rem;
}

.fuss nav {
	display: flex;
	flex-direction: column;
}

.fuss .etikett {
	margin-bottom: 0.5rem;
	color: var(--gruen-40);
}

.fuss a {
	color: var(--wald-20);
	text-decoration: none;
}

.fuss nav a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
}

.fuss a:hover {
	color: var(--weiss);
}

.fuss__zeile a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.fuss__zeile {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 0.0625rem solid var(--wald-80);
	color: var(--wald-40);
	font-size: 0.875rem;
}

@media (max-width: 48rem) {
	.fuss__raster {
		grid-template-columns: 1fr 1fr;
	}

	.fuss__raster > div:first-child {
		grid-column: 1 / -1;
	}
}