/* ==========================================================================
   EllPreX – Website
   Farben aus dem Logo: Navy als dunkle Fläche, Pink (das X) nur für Aktionen
   und einzelne Knoten, Eisblau und Lavendel für Linien.
   Formzitate aus dem Logo: die 45°-Fase (Knöpfe, Fotos, Formular) und die
   Leiterbahnen mit Endpunkt (Abschnittsübergänge, Listen, Schritte).
   Keine Fremdressourcen, keine Schatten, keine Verläufe.
   ========================================================================== */

/* ---------- Schriften (OFL, selbst gehostet, nur Latin) ---------- */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url("../fonts/archivo-latin-wdth.woff2") format("woff2-variations"),
		url("../fonts/archivo-latin-wdth.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/plex-sans-latin-400.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url("../fonts/plex-sans-latin-600.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("../fonts/plex-mono-latin-400.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
	/* dunkel: Navy aus dem Logo */
	--navy: #0f1244;
	--navy-2: #171a57;
	--navy-3: #1f2368;
	--hell: #e9edf5; /* 15:1 auf --navy */
	--hell-2: #aeb3d6; /* 8,4:1 auf --navy */
	--linie-d: rgba(128, 132, 192, 0.36);
	/* hell: kühles Papier wie die helle Logofassung */
	--papier: #f2f2f6;
	--weiss: #ffffff;
	--tinte: #0f1244; /* 16:1 auf --papier */
	--tinte-2: #474c6b; /* 7,4:1 auf --papier */
	--link-h: #b01248; /* 6,1:1 auf --papier */
	--linie-h: #d5d6e2;
	--platz-h: #e5e6ee;
	/* Aktion: das Pink des X */
	--aktion: #f2336f;
	--aktion-hell: #ff5c8d;
	--aktion-text: #0f1244; /* 4,7:1 auf --aktion */
	--fokus-d: #9fb6ff;
	--fokus-h: #1b2070;
	--daten: #c0dce8; /* Eisblau der Wortmarke */
	--bahn: #8084c0; /* Lavendel der Leiterbahnen */

	--kopf: "Archivo", "Segoe UI", Arial, sans-serif;
	--text: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

	--breite: 1240px;
	--rand: 16px;
	--spalt: 32px;
}
@media (min-width: 720px) {
	:root {
		--rand: 32px;
	}
}

/* ---------- Grundlagen ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 90px;
}
body {
	margin: 0;
	background: var(--papier);
	color: var(--tinte);
	font-family: var(--text);
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-x: hidden;
}
img,
svg {
	max-width: 100%;
	display: block;
}
p {
	margin: 0 0 1em;
}
ul,
ol {
	margin: 0;
	padding: 0;
}
h1,
h2,
h3 {
	margin: 0;
	color: inherit;
	font-family: var(--kopf);
	font-stretch: 100%;
	font-weight: 640;
	letter-spacing: -0.012em;
}
h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.7rem);
	line-height: 1.08;
	max-width: 21ch;
}
h2 {
	font-size: clamp(1.55rem, 2.7vw, 2.3rem);
	line-height: 1.15;
	max-width: 30ch;
}
h3 {
	font-size: 1.22rem;
	line-height: 1.3;
}
a {
	color: var(--link-h);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
a:hover {
	color: var(--tinte);
}
:focus-visible {
	outline: 2px solid var(--fokus-h);
	outline-offset: 3px;
}
.dunkel {
	background: var(--navy);
	color: var(--hell);
}
.dunkel a {
	color: var(--hell);
}
.dunkel a:hover {
	color: var(--aktion);
}
.dunkel :focus-visible {
	outline-color: var(--fokus-d);
}
.dunkel-2 {
	background: var(--navy-2);
	color: var(--hell);
}
.weiss {
	background: var(--weiss);
}
.leise {
	color: var(--tinte-2);
}
.dunkel .leise,
.dunkel-2 .leise {
	color: var(--hell-2);
}
.klein {
	font-size: 0.92rem;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip {
	position: absolute;
	left: var(--rand);
	top: -60px;
	background: var(--aktion);
	color: var(--aktion-text);
	padding: 10px 14px;
	font-weight: 600;
	z-index: 50;
}
.skip:focus {
	top: 8px;
}
.wert {
	font-family: var(--mono);
	font-size: 0.93em;
}

/* ---------- Raster ---------- */
.wrap {
	width: 100%;
	max-width: var(--breite);
	margin: 0 auto;
	padding: 0 var(--rand);
}
.zwei {
	display: grid;
	gap: 40px var(--spalt);
}
@media (min-width: 900px) {
	.zwei {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	.zwei.text-bild {
		grid-template-columns: 5fr 6fr;
		align-items: center;
	}
	.zwei.bild-text {
		grid-template-columns: 6fr 5fr;
		align-items: center;
	}
	.zwei.schmal-breit {
		grid-template-columns: 4fr 7fr;
	}
	.zwei.breit-schmal {
		grid-template-columns: 7fr 4fr;
	}
	.zwei.mitte {
		align-items: center;
	}
}
.abschnitt {
	padding: clamp(56px, 8vw, 104px) 0;
}
.abschnitt.eng {
	padding: clamp(40px, 5vw, 64px) 0;
}
.abschnitt + .abschnitt.papier-fort {
	padding-top: 0;
}
.kopfzeile {
	margin-bottom: clamp(28px, 4vw, 48px);
}
.kopfzeile p {
	margin-top: 16px;
	max-width: 62ch;
}
.text {
	max-width: 66ch;
}
.lead {
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	max-width: 60ch;
}

/* ---------- Knöpfe ---------- */
.knopf {
	--f: 10px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 12px 22px;
	background: var(--aktion);
	color: var(--aktion-text) !important;
	font-family: var(--text);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	clip-path: polygon(var(--f) 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%, 0 100%, 0 var(--f));
}
.knopf:hover {
	background: var(--aktion-hell);
}
.knopf:focus-visible {
	clip-path: none;
}
.knopf svg,
.verweis svg {
	width: 16px;
	height: 16px;
	flex: none;
}
.verweis {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 600;
}
.cta {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.cta-zeile {
	font-size: 0.88rem;
	color: var(--tinte-2);
}
.dunkel .cta-zeile,
.dunkel-2 .cta-zeile {
	color: var(--hell-2);
}
.aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-top: 28px;
}

/* ---------- Bildplätze und Fotos ---------- */
.bildplatz {
	margin: 0;
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--platz-h);
	border: 1px dashed #a6a8bc;
	overflow: hidden;
}
.dunkel .bildplatz,
.dunkel-2 .bildplatz {
	background: var(--navy-3);
	border-color: rgba(128, 132, 192, 0.6);
}
.bildplatz figcaption {
	padding: 20px;
	max-width: 44ch;
	text-align: center;
	color: var(--tinte-2);
	font-size: 0.92rem;
	line-height: 1.45;
}
.dunkel .bildplatz figcaption,
.dunkel-2 .bildplatz figcaption {
	color: var(--hell-2);
}
.bildplatz-titel {
	display: block;
	font-weight: 600;
}
.bildplatz-meta {
	display: block;
	margin-top: 6px;
	font-size: 0.82rem;
	opacity: 0.85;
}
.bildplatz.mit-foto,
.foto-fase {
	--f: 22px;
	border: 0;
	background: none;
	clip-path: polygon(var(--f) 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%, 0 100%, 0 var(--f));
}
.bildplatz.mit-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bildzeile {
	margin-top: 10px;
	font-size: 0.88rem;
}

/* ---------- Kopf ---------- */
.oben {
	background: var(--navy);
	color: var(--hell-2);
	font-size: 0.86rem;
	border-bottom: 1px solid var(--linie-d);
}
.oben .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 4px 24px;
	min-height: 36px;
}
.oben a {
	color: var(--hell);
	text-decoration: none;
}
.oben a:hover {
	color: var(--aktion);
}
.oben .rechts {
	display: flex;
	gap: 20px;
}
.oben .ort {
	display: none;
}
@media (min-width: 720px) {
	.oben .ort {
		display: inline;
	}
}
.kopf {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--navy);
	color: var(--hell);
	border-bottom: 1px solid var(--linie-d);
}
.kopf .wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 72px;
}
.marke {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
	color: var(--hell) !important;
	text-decoration: none;
}
.marke img {
	width: auto;
	height: 60px;
}
.marke span {
	font-family: var(--kopf);
	font-weight: 650;
	font-size: 1.12rem;
	letter-spacing: -0.005em;
	white-space: nowrap;
}
.nav {
	display: none;
}
.nav > ul {
	display: flex;
	list-style: none;
	gap: 2px;
}
.nav a {
	display: block;
	padding: 10px 12px;
	color: var(--hell);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.97rem;
}
.nav a:hover {
	color: var(--aktion);
}
.nav a[aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--aktion);
}
.nav .hat-unter {
	position: relative;
}
.nav .unter {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 280px;
	list-style: none;
	padding: 8px 0;
	background: var(--navy-2);
	border: 1px solid var(--linie-d);
}
.nav .hat-unter:hover .unter,
.nav .hat-unter:focus-within .unter {
	display: block;
}
.nav .unter a {
	padding: 10px 18px;
	font-weight: 400;
}
.kopf .knopf {
	display: none;
}
@media (min-width: 1100px) {
	.nav {
		display: block;
	}
	.kopf .knopf {
		display: inline-flex;
	}
	.menue-mobil {
		display: none;
	}
}
.menue-mobil summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 104px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--linie-d);
	font-weight: 600;
	font-size: 0.95rem;
}
.menue-mobil summary::-webkit-details-marker {
	display: none;
}
.menue-mobil summary .striche {
	position: relative;
	width: 18px;
	height: 12px;
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}
.menue-mobil[open] summary .striche {
	border-top: 0;
	border-bottom: 0;
}
.menue-mobil[open] summary .striche::before,
.menue-mobil[open] summary .striche::after {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 18px;
	height: 2px;
	background: currentColor;
	transform: rotate(45deg);
}
.menue-mobil[open] summary .striche::after {
	transform: rotate(-45deg);
}
.menue-mobil .panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	padding: 8px var(--rand) 24px;
	background: var(--navy);
	border-bottom: 1px solid var(--linie-d);
}
.menue-mobil ul {
	list-style: none;
}
.menue-mobil li a {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--linie-d);
	color: var(--hell);
	text-decoration: none;
	font-weight: 600;
}
.menue-mobil li.unter a {
	padding-left: 18px;
	font-weight: 400;
}
.menue-mobil .knopf {
	display: inline-flex;
	margin-top: 20px;
}

/* ---------- Seitenköpfe (je Seite eigener Aufbau) ---------- */
.pfad {
	font-size: 0.9rem;
	margin-bottom: 20px;
}
.pfad ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: 4px 8px;
}
.pfad li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--hell-2);
}
.pfad a {
	color: var(--hell-2);
}
.seitenkopf {
	padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 72px);
}
.seitenkopf .lead {
	margin-top: 24px;
	color: var(--hell);
}
.seitenkopf .zusatz {
	margin-top: 18px;
	color: var(--hell-2);
}
.seitenkopf.mit-bild {
	padding-bottom: 0;
}
.seitenkopf .breitbild {
	margin-top: clamp(32px, 5vw, 56px);
}
.start-kopf .zwei {
	align-items: end;
}
.start-kopf .bildplatz {
	max-height: 640px;
}
.logo-gross {
	width: min(420px, 100%);
	height: auto;
	margin: 0 auto;
}

/* Startseite: breitere Textspalte, Hero gestrafft (1280×720: Knopf und
   Faktenband über der Falz) */
.nowrap {
	white-space: nowrap;
}
.start-kopf {
	padding: clamp(32px, 4vw, 44px) 0;
}
.start-kopf h1 {
	font-size: clamp(2rem, 3.9vw, 3.2rem);
	max-width: 17ch;
}
.start-kopf .lead {
	margin-top: 18px;
}
.start-kopf .aktionen {
	margin-top: 22px;
}
@media (min-width: 900px) {
	.start-raster {
		grid-template-columns: 7fr 5fr;
		align-items: center;
	}
}

/* Faktenband: eine Aussage groß, Einzelheiten als Liste daneben */
.faktenband {
	padding: 28px 0;
}
.faktenband-raster {
	display: grid;
	gap: 20px var(--spalt);
}
@media (min-width: 900px) {
	.faktenband-raster {
		grid-template-columns: 5fr 7fr;
		align-items: center;
	}
}
.faktenband .gross {
	font-family: var(--kopf);
	font-weight: 600;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	line-height: 1.3;
	margin: 0 0 6px;
}
.faktenband .leise {
	margin: 0;
}
.faktenliste {
	margin: 0;
	font-size: 0.95rem;
}
.faktenliste > div {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 12px;
	padding: 5px 0;
	border-top: 1px solid var(--linie-d);
}
.faktenliste > div:first-child {
	border-top: 0;
}
.faktenliste dt {
	font-weight: 600;
	color: var(--hell);
}
.faktenliste dd {
	margin: 0;
	color: var(--hell-2);
}

/* Vorher/Nachher (Business Apps) */
.vorher-nachher {
	display: grid;
	border: 1px solid var(--linie-h);
	background: var(--weiss);
}
@media (min-width: 720px) {
	.vorher-nachher {
		grid-template-columns: 1fr 1fr;
	}
	.vorher-nachher > div + div {
		border-left: 1px solid var(--linie-h);
	}
}
.vorher-nachher > div {
	padding: clamp(20px, 3vw, 32px);
}
.vorher-nachher > div + div {
	border-top: 1px solid var(--linie-h);
}
@media (min-width: 720px) {
	.vorher-nachher > div + div {
		border-top: 0;
	}
}
.vorher-nachher h3 {
	margin-bottom: 8px;
}
.vorher-nachher p {
	margin: 0;
	color: var(--tinte-2);
}

/* ---------- Bausteine ---------- */
.fakten {
	display: grid;
	gap: 24px var(--spalt);
}
@media (min-width: 720px) {
	.fakten {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1100px) {
	.fakten {
		grid-template-columns: repeat(4, 1fr);
	}
	.fakten > div + div {
		border-left: 1px solid var(--linie-d);
		padding-left: var(--spalt);
	}
}
@media (min-width: 1100px) {
	.fakten.drei {
		grid-template-columns: repeat(3, 1fr);
	}
}
.fakten h3 {
	font-size: 1.08rem;
	margin-bottom: 6px;
}
.fakten p {
	margin: 0;
	color: var(--hell-2);
	font-size: 0.95rem;
}

.liste {
	list-style: none;
}
.liste li {
	position: relative;
	padding: 10px 0 10px 30px;
	border-bottom: 1px solid var(--linie-h);
}
/* Listenpunkt: kurze Leiterbahn mit Endpunkt */
.liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.2em;
	width: 13px;
	height: 1.5px;
	background: var(--bahn);
}
.liste li::after {
	content: "";
	position: absolute;
	left: 12px;
	top: calc(1.2em - 2.25px);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aktion);
}
.dunkel .liste li,
.dunkel-2 .liste li {
	border-color: var(--linie-d);
}
.liste.ohne-linie li {
	border: 0;
	padding-top: 4px;
	padding-bottom: 4px;
}
.fazit {
	margin-top: 28px;
	font-family: var(--kopf);
	font-weight: 600;
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	line-height: 1.35;
	max-width: 46ch;
}

/* Leistungsbereiche als Bild-Text-Zeilen */
.bereich {
	padding: clamp(40px, 6vw, 72px) 0;
	border-top: 1px solid var(--linie-h);
}
.bereich:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.bereich h3 {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	margin-bottom: 14px;
}
@media (min-width: 900px) {
	.bereich:nth-of-type(even) .bildseite {
		order: 2;
	}
}

/* Punkte in zwei Spalten mit fetten Titeln */
.punkte {
	display: grid;
	gap: 28px var(--spalt);
}
@media (min-width: 720px) {
	.punkte {
		grid-template-columns: 1fr 1fr;
	}
}
.punkte h3 {
	margin-bottom: 8px;
}
.punkte p {
	margin: 0;
	color: var(--tinte-2);
}
.dunkel .punkte p,
.dunkel-2 .punkte p {
	color: var(--hell-2);
}

/* Schritte waagrecht (Startseite, On-Prem) */
.schritte {
	list-style: none;
	counter-reset: schritt;
	display: grid;
	gap: 28px var(--spalt);
}
@media (min-width: 900px) {
	.schritte {
		grid-template-columns: repeat(var(--n, 4), 1fr);
	}
}
.schritte li {
	counter-increment: schritt;
	position: relative;
	padding-top: 22px;
	border-top: 1.5px solid var(--bahn);
}
/* Knoten auf der Bahn, der erste in Pink */
.schritte li::after {
	content: "";
	position: absolute;
	left: 0;
	top: -5.5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bahn);
}
.schritte li:first-child::after {
	background: var(--aktion);
}
@media (min-width: 900px) {
	/* Bahn läuft ohne Lücke über alle Spalten */
	.schritte {
		column-gap: 0;
	}
	.schritte li {
		padding-right: var(--spalt);
	}
}
.schritte li::before {
	content: counter(schritt) ".";
	display: block;
	font-family: var(--kopf);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--link-h);
	margin-bottom: 6px;
}
.schritte h3 {
	margin-bottom: 6px;
}
.schritte p {
	margin: 0;
	color: var(--tinte-2);
}

/* Zeitleiste senkrecht (Business Apps) */
.zeitleiste {
	list-style: none;
	counter-reset: phase;
	position: relative;
	max-width: 760px;
}
.zeitleiste li {
	counter-increment: phase;
	position: relative;
	padding: 0 0 36px 64px;
}
.zeitleiste li::before {
	content: counter(phase);
	position: absolute;
	left: 0;
	top: -4px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--navy);
	color: var(--hell);
	font-family: var(--kopf);
	font-weight: 650;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.zeitleiste li::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 44px;
	bottom: 4px;
	width: 2px;
	background: var(--linie-h);
}
.zeitleiste li:last-child::after {
	display: none;
}
.zeitleiste h3 {
	margin-bottom: 6px;
}
.zeitleiste p {
	margin: 0;
	color: var(--tinte-2);
}

/* Tabellen (Datenblatt Cloud, Preise, Prioritäten, Projekte) */
.tabelle {
	width: 100%;
	border-collapse: collapse;
	background: var(--weiss);
	border: 1px solid var(--linie-h);
}
.tabelle caption {
	text-align: left;
	padding: 0 0 12px;
	font-weight: 600;
}
.tabelle th,
.tabelle td {
	text-align: left;
	vertical-align: top;
	padding: 16px 20px;
	border-bottom: 1px solid var(--linie-h);
}
.tabelle thead th {
	background: var(--navy);
	color: var(--hell);
	font-weight: 600;
	font-size: 0.92rem;
}
.tabelle tbody th {
	width: 30%;
	font-weight: 600;
}
.tabelle tr.gruppe th {
	background: var(--papier);
	font-family: var(--kopf);
	font-size: 1.05rem;
	padding-top: 20px;
}
@media (max-width: 719px) {
	.tabelle,
	.tabelle tbody,
	.tabelle tr,
	.tabelle th,
	.tabelle td {
		display: block;
		width: 100%;
	}
	.tabelle thead {
		display: none;
	}
	.tabelle tbody th {
		width: 100%;
		padding-bottom: 4px;
		border-bottom: 0;
	}
	.tabelle td {
		padding-top: 4px;
	}
}

/* Referenzen */
.partner {
	display: grid;
	gap: 28px;
	align-items: start;
	padding: clamp(28px, 4vw, 48px) 0;
	border-top: 1px solid var(--linie-h);
}
@media (min-width: 900px) {
	.partner {
		grid-template-columns: 3fr 8fr;
		gap: var(--spalt);
	}
}
.partner h3 {
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}
.partner .rolle {
	color: var(--tinte-2);
	margin: 4px 0 16px;
}
.stichworte {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.stichworte li {
	font-size: 0.86rem;
	padding: 3px 10px;
	background: var(--platz-h);
}
.projekt {
	padding: clamp(36px, 5vw, 64px) 0;
	border-top: 1px solid var(--linie-h);
}
.projekt dl {
	margin: 20px 0 0;
}
.projekt dt {
	font-weight: 600;
	margin-top: 14px;
}
.projekt dd {
	margin: 2px 0 0;
	color: var(--tinte-2);
}

/* Person */
.portraet {
	--f: 26px;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--platz-h);
	clip-path: polygon(var(--f) 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%, 0 100%, 0 var(--f));
}
/* Zwei Ansprechpartner nebeneinander (Startseite) */
.personen {
	display: grid;
	gap: 36px var(--spalt);
}
@media (min-width: 900px) {
	.personen {
		grid-template-columns: 1fr 1fr;
	}
}
.person {
	display: grid;
	grid-template-columns: minmax(110px, 200px) 1fr;
	gap: 20px 24px;
	align-items: start;
}
.person h3 {
	margin-bottom: 8px;
}
.person p {
	color: var(--tinte-2);
	margin-bottom: 0.6em;
}
.person .portraet {
	--f: 18px;
}
.bildplatz.portraet-platz figcaption {
	padding: 12px;
	font-size: 0.82rem;
}
.portraet-zeile {
	margin-top: 12px;
	font-size: 0.92rem;
}

/* FAQ */
.faq details {
	border-bottom: 1px solid var(--linie-h);
}
.faq details:first-child {
	border-top: 1px solid var(--linie-h);
}
.faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	font-family: var(--kopf);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.35;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--text);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--link-h);
}
.faq details[open] summary::after {
	content: "\2013";
}
.faq .antwort {
	padding: 0 40px 22px 0;
	color: var(--tinte-2);
	max-width: 72ch;
}

/* Abschlussband */
.abschluss {
	padding: clamp(56px, 7vw, 88px) 0;
}
.abschluss .zwei {
	align-items: end;
}
.abschluss p {
	color: var(--hell-2);
	margin-top: 16px;
	max-width: 56ch;
}

/* Kontakt: Formular */
.formular {
	--f: 18px;
	background: var(--weiss);
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--linie-h);
}
.formular fieldset {
	border: 0;
	margin: 0 0 8px;
	padding: 0;
	min-width: 0;
}
.formular legend {
	font-family: var(--kopf);
	font-weight: 650;
	font-size: 1.15rem;
	margin-bottom: 14px;
	padding: 0;
}
.feldreihe {
	display: grid;
	gap: 0 20px;
}
@media (min-width: 640px) {
	.feldreihe {
		grid-template-columns: 1fr 1fr;
	}
}
.feld {
	margin-bottom: 18px;
}
.feld label,
.feld .label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 6px;
}
.feld .pflicht {
	color: var(--link-h);
}
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	font: inherit;
	color: var(--tinte);
	background: var(--weiss);
	border: 1px solid #8b8fa0; /* 3,4:1 zu Weiß (Nicht-Text-Kontrast) */
	border-radius: 0;
}
.feld textarea {
	min-height: 104px;
	resize: vertical;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
	outline: 2px solid var(--fokus-h);
	outline-offset: 1px;
	border-color: var(--fokus-h);
}
.feld [aria-invalid="true"] {
	border-color: #b3261e;
}
.feld .fehler {
	display: block;
	margin-top: 4px;
	color: #b3261e; /* 5,8:1 auf Weiß */
	font-size: 0.9rem;
}
.auswahl {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.auswahl label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	margin: 0;
	min-height: 32px;
}
.auswahl input {
	width: 18px;
	height: 18px;
	accent-color: var(--fokus-h);
}
.honig {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.formular .hinweis {
	font-size: 0.9rem;
	color: var(--tinte-2);
	margin: 8px 0 20px;
}
.meldung {
	padding: 16px 18px;
	margin-bottom: 20px;
	border-left: 4px solid;
}
.meldung.fehler {
	background: #fbeceb;
	border-color: #b3261e;
	color: #5c130f;
}
.meldung.erfolg {
	background: #eaf4ec;
	border-color: #1e6b34;
	color: #0f3a1c;
}
.meldung[hidden] {
	display: none;
}
.formular [disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* Zeichnungen (Rack, Schema, Höhenlinien) */
.zeichnung {
	width: 100%;
	height: auto;
	font-family: var(--mono);
}
.zeichnung .hl {
	fill: none;
	stroke: var(--daten);
	stroke-opacity: 0.3;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.zeichnung .hl-index {
	stroke-opacity: 0.62;
}
.zeichnung .st {
	fill: none;
	stroke: var(--daten);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}
.zeichnung .st-fein {
	fill: none;
	stroke: var(--hell-2);
	stroke-opacity: 0.55;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.zeichnung .st-akzent {
	fill: none;
	stroke: var(--aktion);
	stroke-width: 1.75;
	vector-effect: non-scaling-stroke;
}
.zeichnung .gestrichelt {
	stroke-dasharray: 4 4;
}
.zeichnung .fl {
	fill: var(--navy-2);
}
.zeichnung .fl-2 {
	fill: var(--navy-3);
}
.zeichnung .pkt {
	fill: var(--daten);
}
.zeichnung .pkt-akzent {
	fill: var(--aktion);
}
.zeichnung text {
	font-size: 11px;
	fill: var(--hell-2);
	letter-spacing: 0.04em;
}
.zeichnung .t-hell {
	fill: var(--hell);
}
.zeichnung .t-akzent {
	fill: var(--aktion);
}
.zeichnung text.halo {
	paint-order: stroke;
	stroke: var(--navy);
	stroke-width: 4px;
	stroke-linejoin: round;
}
.zeichnungsrahmen {
	background: var(--navy);
	padding: clamp(12px, 2vw, 24px);
}

/* Rechtliches */
.recht h2 {
	font-size: 1.35rem;
	margin: 36px 0 10px;
}
.recht address {
	font-style: normal;
}
.recht address p {
	margin: 0;
}

/* ---------- Fuß ---------- */
.fuss {
	background: var(--navy);
	color: var(--hell-2);
	padding: 64px 0 28px;
	font-size: 0.95rem;
}
.fuss a {
	color: var(--hell);
	text-decoration: none;
}
.fuss a:hover {
	color: var(--aktion);
	text-decoration: underline;
}
.fuss .spalten {
	display: grid;
	gap: 32px;
}
@media (min-width: 720px) {
	.fuss .spalten {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1100px) {
	.fuss .spalten {
		grid-template-columns: 2fr 1.4fr 1fr 1fr;
	}
}
.fuss h2 {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--hell);
	margin-bottom: 12px;
	letter-spacing: 0;
}
.fuss ul {
	list-style: none;
}
.fuss li {
	padding: 4px 0;
}
.fuss address {
	font-style: normal;
	margin-top: 12px;
}
.fuss address p {
	margin: 0;
}
.fuss .marke {
	margin-bottom: 18px;
}
.fuss .marke img {
	width: min(300px, 100%);
	height: auto;
}
.fuss .unterzeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--linie-d);
	font-size: 0.88rem;
}
.fuss .unterzeile ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}
.fuss mark.ph {
	border-color: var(--aktion);
	color: #ffd0de;
}

/* ---------- Leiterbahnen (Formzitat aus dem Logo) ----------
   Dunkle Flächen bekommen an ihrer Kante eine Bahn mit drei Abzweigen und
   Endpunkten; Seitenköpfe zusätzlich Bahnen, die vom rechten Rand einlaufen.
   Die Dateien tragen eine Versionsnummer im Namen (Assets sind ein Jahr
   gecacht): bei Änderung -v2 anlegen und hier umstellen. */
.seitenkopf,
.faktenband,
.dunkel.abschnitt,
.dunkel-2.abschnitt,
.abschluss {
	position: relative;
}
.seitenkopf {
	overflow: hidden;
}
.seitenkopf > .wrap,
.faktenband > .wrap,
.dunkel.abschnitt > .wrap,
.dunkel-2.abschnitt > .wrap,
.abschluss > .wrap {
	position: relative;
	z-index: 1;
}
/* untere Kante: Abzweige rechts */
.seitenkopf:not(.mit-bild):not(.start-kopf)::after,
.faktenband::after,
.dunkel.abschnitt::after,
.dunkel-2.abschnitt::after,
/* obere Kante: gespiegelt, Abzweige links */
.dunkel.abschnitt::before,
.dunkel-2.abschnitt::before,
.abschluss::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	background:
		url("../images/bahn-trenner-v1.svg") right bottom / auto 56px no-repeat,
		linear-gradient(rgba(128, 132, 192, 0.38), rgba(128, 132, 192, 0.38)) left bottom 21px / 100% 1.5px no-repeat;
	pointer-events: none;
}
.dunkel.abschnitt::before,
.dunkel-2.abschnitt::before,
.abschluss::before {
	top: 0;
	bottom: auto;
	transform: scale(-1, -1);
}
.seitenkopf:not(.mit-bild):not(.start-kopf) {
	padding-bottom: calc(clamp(40px, 6vw, 72px) + 40px);
}
.faktenband {
	padding-bottom: 80px;
}
.dunkel.abschnitt,
.dunkel-2.abschnitt {
	padding-top: calc(clamp(56px, 8vw, 104px) + 32px);
	padding-bottom: calc(clamp(56px, 8vw, 104px) + 32px);
}
.abschluss {
	padding-top: calc(clamp(56px, 7vw, 88px) + 32px);
}
/* Seitenkopf: Bahnen laufen vom rechten Rand ein (nur wo Platz ist) */
@media (min-width: 1100px) {
	.seitenkopf::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: min(36vw, 520px);
		aspect-ratio: 520 / 320;
		background: url("../images/bahn-kopf-v1.svg") right top / contain no-repeat;
		opacity: 0.55;
		pointer-events: none;
	}
}
/* Start und Über uns zeigen das große Logo mit eigenen Bahnen: dort keine zweiten */
.seite-start .seitenkopf::before,
.seite-ueber-uns .seitenkopf::before {
	display: none;
}
/* Startseite: großes Logo im Hero. logo.js lässt es beim Scrollen in das
   Kompaktlogo der Kopfzeile übergehen; ohne Skript bleiben beide stehen. */
.start-kopf {
	overflow: visible;
}
.hero-logo img {
	width: min(340px, 82%);
	height: auto;
	margin: 0 0 4px -4px;
}
@media (min-width: 900px) {
	.start-kopf {
		padding: clamp(40px, 5vw, 64px) 0;
	}
	.start-kopf .start-raster {
		grid-template-columns: 5fr 6fr;
		align-items: center;
	}
	.hero-logo img {
		width: min(520px, 100%);
		margin: 0;
	}
}
.logo-flug #hero-logo {
	visibility: hidden;
}
.logo-flieger {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 30;
	transform-origin: 0 0;
	height: auto;
	max-width: none;
	pointer-events: none;
	will-change: transform, opacity;
}
.fuss {
	border-top: 1.5px solid rgba(128, 132, 192, 0.38);
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}
@media print {
	.kopf,
	.oben,
	.fuss,
	.abschluss {
		display: none;
	}
}