/* Skizzen der Illustrationsstile je Richtung. Farben aus dem Evergreen-Designsystem, Schriften wie in den Mockups. */

:root {
	--wald: #112a28;
	--wald-80: #415553;
	--wald-60: #707f7e;
	--wald-40: #a0aaa9;
	--wald-20: #cfd4d4;
	--gruen: #8aa14a;
	--gruen-20: #e8ecdc;
	--moss: #4c6639;
	--dusty: #497692;
	--dusty-80: #6c91a8;
	--weiss: #ffffff;
	--hell: #f6f7fb;
	--linie: #e5e7eb;
	--text: #4b5563;
	--moss-20: #dbe0d7;
	--moss-60: #94a288;
	--dusty-20: #dae4e9;
	--butter-20: #fcf2db;
	--butter-40: #f9e5b7;

	--rahmen: 72rem;
	--rand: clamp(1.25rem, 4vw, 2.5rem);

	--verlauf:
		radial-gradient(60% 75% at 80% 15%, rgba(73, 118, 146, 0.8) 0%, rgba(73, 118, 146, 0) 70%),
		radial-gradient(45% 60% at 100% 90%, rgba(108, 145, 168, 0.5) 0%, rgba(108, 145, 168, 0) 70%),
		radial-gradient(45% 55% at 12% 100%, rgba(76, 102, 57, 0.55) 0%, rgba(76, 102, 57, 0) 70%),
		#112a28;
	--papier: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
	--koernung: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
}

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

body {
	margin: 0;
	background: var(--hell);
	color: var(--wald-80);
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
}

a {
	color: var(--wald);
	text-decoration-color: var(--gruen);
	text-underline-offset: 0.2em;
}

a:focus-visible {
	outline: 0.125rem solid var(--gruen);
	outline-offset: 0.25rem;
}

.unsichtbar {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Kopf und Einleitung */

.kopf,
.einstieg,
.richtung__innen {
	max-width: var(--rahmen);
	margin-inline: auto;
	padding-inline: var(--rand);
}

.kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 2rem;
}

.kopf img {
	width: 8rem;
	height: auto;
}

.kopf p {
	margin: 0;
	font-size: 0.875rem;
}

.einstieg {
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
}

.einstieg h1 {
	max-width: 44rem;
	margin: 0;
	color: var(--wald);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
}

.einstieg p {
	max-width: 44rem;
	margin: 1.5rem 0 0;
}

/* Gemeinsamer Aufbau je Richtung */

.richtung {
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	border-top: 0.0625rem solid var(--linie);
}

.richtung__kopf {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 0.25rem 1.5rem;
	align-items: baseline;
	max-width: 52rem;
}

.richtung__nummer {
	grid-row: span 2;
	color: var(--moss);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}

.richtung__kopf h2 {
	margin: 0;
	color: var(--wald);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.richtung__kopf p {
	margin: 0;
}

.skizzen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
	gap: 2.5rem 2rem;
	margin: 3rem 0 0;
}

.skizze {
	display: grid;
	gap: 1.25rem;
	align-content: start;
	min-width: 0;
	margin: 0;
}

.skizze--breit {
	grid-column: 1 / -1;
}

.skizze__flaeche {
	position: relative;
	overflow: hidden;
}

.skizze__flaeche svg,
.skizze__flaeche > img {
	display: block;
	width: 100%;
	height: auto;
}

.skizze__paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1rem;
}

.skizze figcaption {
	display: grid;
	gap: 0.5rem;
	max-width: 40rem;
}

.skizze h3 {
	margin: 0;
	color: var(--wald);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.skizze figcaption p {
	margin: 0;
	font-size: 1rem;
}

.skizze .vorbild {
	font-size: 0.9375rem;
}

.passt-nicht {
	max-width: 44rem;
	margin: 3rem 0 0;
	padding-top: 1.25rem;
	border-top: 0.0625rem solid var(--linie);
	font-size: 0.9375rem;
}

.passt-nicht strong {
	color: var(--wald);
}

/* Gemeinsame Bausteine der Zeichnungen */

.raster line {
	stroke: var(--linie);
	stroke-width: 1;
}

.route-linie {
	fill: none;
	stroke: var(--wald-60);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.route-linie--alternativ {
	stroke: var(--wald-40);
	stroke-dasharray: 4 5;
}

.knoten {
	fill: var(--weiss);
	stroke: var(--wald-60);
	stroke-width: 1.5;
}

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

/* Richtung 1: Klar und nüchtern */

.richtung--1 .skizze__flaeche {
	border: 0.0625rem solid var(--linie);
	border-radius: 0.25rem;
	background: var(--weiss);
}

.richtung--1 .skizze__flaeche--dunkel {
	border-color: var(--wald);
	background: var(--wald);
	color: var(--wald-20);
}

.richtung--1 .skizze__flaeche--dunkel .raster line {
	stroke: var(--wald-80);
}

.richtung--1 .skizze__flaeche--dunkel .route-linie {
	stroke: var(--wald-20);
}

.richtung--1 .skizze__flaeche--dunkel .route-linie--alternativ {
	stroke: var(--wald-60);
}

.richtung--1 .skizze__flaeche--dunkel .knoten {
	fill: var(--wald);
	stroke: var(--wald-20);
}

.richtung--1 .skizze__flaeche--dunkel .beschriftung {
	fill: var(--wald-20);
}

.richtung--1 .beschriftung {
	fill: var(--wald-80);
	font-family: "Hanken Grotesk", Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
}

.richtung--1 .beschriftung tspan {
	fill: var(--wald);
	font-weight: 600;
}

.richtung--1 .skizze__flaeche--dunkel .beschriftung tspan {
	fill: var(--weiss);
}

.richtung--1 .punktraster {
	padding: clamp(1rem, 3vw, 2rem);
}

/* Richtung 2: Viel Weißraum */

.richtung--2 {
	font-family: "Schibsted Grotesk", Arial, sans-serif;
}

.richtung--2 .skizze__flaeche {
	background: var(--weiss);
}

.richtung--2 .symbole {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: 2rem 1rem;
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	list-style: none;
}

.richtung--2 .symbole li {
	display: grid;
	gap: 0.875rem;
	justify-items: start;
	padding-top: 1rem;
	border-top: 0.0625rem solid var(--linie);
}

.richtung--2 .symbole svg {
	width: 3.5rem;
	height: 3.5rem;
}

.symbol {
	fill: none;
	stroke: var(--wald);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.symbol .ziel {
	stroke: none;
}

.symbol .punkt {
	fill: var(--weiss);
}

.symbol .gestrichelt {
	stroke: var(--wald-40);
	stroke-dasharray: 2 3;
}

.mono {
	color: var(--wald-80);
	font-family: "Red Hat Mono", "Courier New", monospace;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.messung .ring {
	fill: none;
	stroke: var(--wald-20);
	stroke-width: 1;
	stroke-dasharray: 2 4;
}

.messung .achse {
	stroke: var(--wald-20);
	stroke-width: 1;
}

.messung .flaeche {
	fill: var(--gruen);
	fill-opacity: 0.16;
	stroke: var(--moss);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.messung .wert {
	fill: var(--weiss);
	stroke: var(--moss);
	stroke-width: 1.5;
}

.messung .foto {
	filter: grayscale(1);
}

.messung .foto-ring {
	fill: none;
	stroke: var(--weiss);
	stroke-width: 6;
}

.messung text {
	fill: var(--wald-80);
	font-family: "Red Hat Mono", "Courier New", monospace;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.messung .wertname {
	fill: var(--wald-80);
	letter-spacing: 0.02em;
	text-transform: none;
}

.richtung--2 .verlauf {
	background: var(--verlauf);
	color: var(--weiss);
}

.verlauf::after {
	position: absolute;
	inset: 0;
	background-image: var(--koernung);
	content: "";
	mix-blend-mode: soft-light;
	opacity: 0.35;
	pointer-events: none;
}

.verlauf .route-linie {
	stroke: var(--weiss);
	stroke-opacity: 0.55;
}

.verlauf .knoten {
	fill: none;
	stroke: var(--weiss);
	stroke-opacity: 0.8;
}

.verlauf text {
	fill: var(--weiss);
	font-family: "Red Hat Mono", "Courier New", monospace;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Richtung 3: Kräftig und seriös */

.richtung--3 {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 1rem;
}

.richtung--3 .richtung__kopf h2 {
	font-family: "Funnel Display", Arial, sans-serif;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1;
}

.richtung--3 .skizze__flaeche {
	border-radius: clamp(1.25rem, 2vw, 2rem);
	background: var(--weiss);
}

.richtung--3 .skizze__flaeche--dunkel {
	background: var(--wald);
	color: var(--wald-20);
}

.band {
	fill: none;
	stroke: var(--wald);
	stroke-width: 32;
	stroke-linecap: butt;
	stroke-linejoin: round;
}

.band-halt {
	fill: var(--weiss);
}

.skizze__flaeche--dunkel .band {
	stroke: var(--wald-80);
}

.skizze__flaeche--dunkel .band-halt {
	fill: var(--wald-20);
}

.buendel {
	fill: none;
	stroke: var(--wald);
	stroke-width: 2;
	stroke-linejoin: miter;
}

.konstruktion .form {
	fill: none;
	stroke: var(--wald-20);
	stroke-opacity: 0.7;
	stroke-width: 1;
}

.konstruktion .hilfslinie {
	stroke: var(--wald-60);
	stroke-width: 1;
	stroke-dasharray: 3 5;
}

.konstruktion .anker {
	fill: var(--wald);
	stroke: var(--wald-20);
	stroke-width: 1;
}

.konstruktion .weg {
	stroke: var(--weiss);
	stroke-width: 2;
}

.konstruktion .knoten {
	fill: var(--wald);
	stroke: var(--weiss);
	stroke-width: 2;
}

.konstruktion text {
	fill: var(--wald-20);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.duoton {
	background: var(--wald);
}

.duoton img {
	display: block;
	width: 100%;
	height: auto;
	filter: url("#duoton");
}

.duoton::after {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(17, 42, 40, 0.55) 0.07rem, rgba(17, 42, 40, 0) 0.1rem);
	background-size: 0.3125rem 0.3125rem;
	content: "";
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Quer zu allen Richtungen: Collage-Kacheln nach Anthropic */

.richtung__nummer--punkt {
	align-self: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--gruen);
}

.collage {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 5vw, 5rem);
	padding: clamp(1rem, 3vw, 2rem) clamp(0rem, 5vw, 5rem) clamp(2rem, 5vw, 4rem);
}

.kachel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	max-width: 100%;
	background: var(--butter-20);
}

.kachel:nth-child(3n + 2) {
	translate: 0 clamp(1rem, 4vw, 3rem);
}

.kachel:nth-child(3n) {
	justify-self: end;
	width: 80%;
}

.kachel::after {
	position: absolute;
	inset: 0;
	background-image: var(--papier);
	content: "";
	mix-blend-mode: multiply;
	opacity: 0.45;
	pointer-events: none;
}

.kachel svg {
	display: block;
	width: 100%;
	height: 100%;
}

.kachel--butter {
	background: var(--butter-40);
}

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

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

.kachel--wald::after {
	background-image: var(--koernung);
	mix-blend-mode: soft-light;
	opacity: 0.4;
}

.gitter line {
	stroke: var(--wald);
	stroke-opacity: 0.55;
	stroke-width: 0.75;
}

.kompass circle,
.kompass line,
.kompass polygon {
	fill: none;
	stroke: var(--wald);
	stroke-width: 0.75;
}

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

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

.kachel--foto {
	background: var(--moss-20);
}

.kachel--foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 48% 50%;
	filter: grayscale(1) contrast(1.35);
	scale: 2.2;
	transform-origin: 50% 76%;
	mix-blend-mode: multiply;
}

.kachel--foto::after {
	background-image: radial-gradient(circle, rgba(17, 42, 40, 0.5) 0.06rem, rgba(17, 42, 40, 0) 0.09rem);
	background-size: 0.25rem 0.25rem;
	opacity: 1;
}

.muster rect {
	fill: var(--moss-60);
}

.flaeche-moss {
	fill: var(--moss);
}

.tusche {
	fill: none;
	stroke: var(--wald);
	stroke-width: 2.5;
	stroke-linecap: round;
	filter: url("#tusche");
}

.faden {
	stroke: var(--wald);
	stroke-width: 0.75;
}

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

.punktreihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: clamp(1rem, 3vw, 2rem);
}

.punktkachel {
	aspect-ratio: 1;
	max-width: 100%;
	padding: clamp(1rem, 3vw, 2rem);
	background: var(--moss-20);
}

.punktkachel--butter {
	background: var(--butter-40);
}

.punktkachel--dusty {
	background: var(--dusty-20);
}

.punktkachel img {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 40rem) {
	.richtung__kopf {
		grid-template-columns: 2.5rem 1fr;
	}

	.richtung__nummer {
		font-size: 2rem;
	}

	.collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kachel:nth-child(n) {
		justify-self: stretch;
		width: 100%;
		translate: none;
	}
}