/* =========================================================
   Theme Beck Consulting – Boutique Sports Consultancy
   Tokens (doku/ARCHITEKTUR.md, Abschnitt 1), Basis, Kopf, Fuß, Abschnitte der Startseite,
   Seiten (Imprint/Privacy/404), Wartungsseite, Druck.
   Alle Kontraste auf Nachtblau sind gemessen (Weiß 17,9:1, --text-2 9,8:1, --text-3 6,1:1, Cyan 12,3:1).
   ========================================================= */

/* ---------- Schriften (Outfit lokal, drei Schnitte, kein Subset) ---------- */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/outfit-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/outfit-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/outfit-700.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
	/* Farben (Namen verbindlich) */
	--nachtblau: #0a1230;
	--nachtblau-flaeche: #0f1a40;
	--nachtblau-tief: #070d24;
	--cyan: #1eebd1;
	--cyan-hell: #6fe9da;           /* Hover-Stufe – die Farbe von „consulting“ im Logo */
	--teal: #12897f;                /* nur Verlauf und Glow, nie Text auf Nachtblau (4,3:1) */
	--schiefer: #54607a;            /* nur auf Weiß (Druck, Admin) */
	--weiss: #ffffff;
	--text-2: rgba(255, 255, 255, .72);
	--text-3: rgba(255, 255, 255, .55);
	--linie: rgba(255, 255, 255, .12);
	--linie-stark: rgba(255, 255, 255, .22);
	--linie-cyan: rgba(30, 235, 209, .28);
	/* Knoten, Linien, Funken (R3, gemeinsame Spezifikation – Belege belege/prototyp/r3-INTEGRATION-BRIEF.md §2):
	   Datenlinien tragen Bedeutung (Kette, Verbinder zum Signet) und müssen ≥ 3:1 erreichen – .36 ist 3,29:1 auf
	   Nachtblau, 3,1:1 auf der Fläche; nicht senken. Die Wachstumslinie (Hero-Kurve, Miniatur in der Shift-Kachel)
	   ist Cyan bei .55. Funken starten 400 ms nach .ist-sichtbar, wenn der 700-ms-Reveal die Zeile abgestellt hat. */
	--linie-daten: rgba(255, 255, 255, .36);
	--linie-wachstum: rgba(30, 235, 209, .55);
	--knoten: 6px;
	--funke-dauer: 1200ms;
	--funke-verzug: 400ms;
	--funke-kurve: cubic-bezier(.4, 0, .3, 1);
	--fehler-farbe: #ff7a7a;          /* Formularfehler: 7,3:1 auf Nachtblau (gemessen), Rot ohne Signalgrün-Kontrast zum Cyan */
	--verlauf: linear-gradient(135deg, #0a1230 0%, #12897f 55%, #1eebd1 100%);

	/* Schrift */
	--schrift: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--schrift-h1: clamp(2.5rem, 6.5vw, 5.25rem);
	--schrift-h2-gross: clamp(2.25rem, 5.2vw, 4.25rem);
	--schrift-h2: clamp(1.9rem, 3.6vw, 3rem);
	--schrift-h3: clamp(1.2rem, 1.5vw, 1.45rem);
	--schrift-fliess: clamp(1.05rem, 1.15vw, 1.25rem);
	--schrift-gross: clamp(1.2rem, 1.5vw, 1.5rem);
	--schrift-klein: 0.92rem;
	--schrift-kicker: 0.8rem;
	--schrift-zahl: clamp(2.4rem, 4.5vw, 4rem);
	--schrift-mail: clamp(1.4rem, 3vw, 2.4rem);

	/* Raster */
	--container: 1200px;
	--rand: clamp(20px, 4vw, 48px);
	--abschnitt: clamp(88px, 12vw, 168px);
	--kopf-hoehe: 76px;
	--ziel: 44px;

	/* Bewegung */
	--dauer: 200ms;
	--reveal-kurve: cubic-bezier(.2, .7, .2, 1);
}
/* Unter 340 px passt „marco@beckconsulting.eu“ in 1.4rem nicht mehr neben das Icon (3 px zu breit) – sonst bräche das „u“ um */
@media (max-width: 339.98px) {
	:root { --schrift-mail: 1.3rem; }
}
/* Telefon (< 600 px): 88 px Abschnittsabstand oben und unten ließen die Seite als Folge leerer Strecken wirken
   (7250 px bei 390 px Breite); 68 px halten den Atem, ohne dass die kurzen Blöcke sich verlieren. Die Kopfzeile
   fällt auf 64 px – 76 px trugen über einem 28-px-Logo nur Luft. Telefon quer (≤ 520 px hoch) bekommt dieselbe
   Kopfzeile, sonst bliebe vom Bildschirm nichts übrig. */
@media (max-width: 599.98px), (max-width: 959.98px) and (max-height: 520px) {
	:root { --abschnitt: 68px; --kopf-hoehe: 64px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kopf-hoehe) + 8px);
	background: var(--nachtblau);
	color-scheme: dark;
}
html.bc-menue-offen, html.bc-menue-offen body { overflow: hidden; }
/* manipulation = Tippen, Scrollen und Pinch-Zoom bleiben, nur der Doppeltipp-Zoom (und die damit verbundene
   Tipp-Verzögerung älterer WebKit-Versionen) entfällt. Kein user-scalable=no – Zoomen bleibt möglich. Die Eigenschaft
   vererbt nicht, deshalb zusätzlich auf den interaktiven Elementen. */
html, a, button, input, select, textarea, label, summary { touch-action: manipulation; }
body {
	margin: 0;
	font-family: var(--schrift);
	font-size: var(--schrift-fliess);
	font-weight: 300;
	line-height: 1.6;
	color: var(--weiss);
	background: var(--nachtblau);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--weiss); text-wrap: balance; }
h1, h2 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: var(--schrift-h1); }
h2 { font-size: var(--schrift-h2); }
h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
h3 { font-size: var(--schrift-h3); }
h4 { font-size: var(--schrift-fliess); }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
em { font-style: italic; }
a {
	color: var(--cyan);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dauer) ease;
}
a:hover { color: var(--cyan-hell); }
button { font: inherit; color: inherit; }
::selection { background: rgba(30, 235, 209, .3); color: var(--weiss); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
/* Sprunglink-Ziel: <main tabindex="-1"> nimmt den Fokus (die Tab-Reihenfolge geht dort weiter), ein Ring um den ganzen Inhalt wäre nur Rauschen */
main:focus-visible { outline: none; }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Raster-Hilfen ---------- */
.bc-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--rand);
	/* viewport-fit=cover (header.php) lässt die Seite quer unter die Notch laufen; der Inhalt bleibt dank
	   Safe-Area-Rand lesbar. env() ist überall sonst 0 – die Zeile davor ist der Fallback für alte Browser. */
	padding-inline: max(var(--rand), env(safe-area-inset-left)) max(var(--rand), env(safe-area-inset-right));
}
.bc-abschnitt { position: relative; padding-block: var(--abschnitt); }
.bc-kicker {
	margin: 0 0 1.25rem;
	font-size: var(--schrift-kicker);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--cyan);
}
/* Kicker mit Strich davor: verankert die Abschnitte optisch an der linken Kante */
.bc-kicker::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 1px;
	margin-right: .85rem;
	vertical-align: .32em;
	background: var(--cyan);
}
.bc-abschnitt__kopf h2 { max-width: 20ch; }   /* ch bezieht sich auf die Schriftgröße der Überschrift selbst */
/* Lesespalte (Imprint, Privacy, 404): der Container bleibt so breit wie überall, damit die linke Kante mit Kopfzeile,
   Fuß und den Abschnitten der Startseite fluchtet; nur der Inhalt wird auf ein Lesemaß begrenzt. Outfit ist schmal
   (1ch ≈ 0,66em), 58ch ergeben ≈ 640 px ≈ 72–75 Zeichen je Zeile. */
.bc-lesespalte { max-width: var(--container); }
.bc-lesespalte > * { max-width: 58ch; }
.bc-icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Buttons ---------- */
.bc-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: var(--ziel);
	padding: 0 1.6rem;
	border: 1px solid var(--cyan);
	border-radius: 999px;
	background: var(--cyan);
	color: var(--nachtblau);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dauer) ease, border-color var(--dauer) ease, color var(--dauer) ease, transform var(--dauer) ease;
}
.bc-knopf:hover { background: var(--cyan-hell); border-color: var(--cyan-hell); color: var(--nachtblau); }
.bc-knopf:active { transform: translateY(1px); }
.bc-knopf .bc-icon { width: 1.1em; height: 1.1em; transition: transform var(--dauer) ease; }
.bc-knopf:hover .bc-icon--pfeil { transform: translateX(3px); }
.bc-knopf--sekundaer {
	background: transparent;
	border-color: rgba(30, 235, 209, .55);
	color: var(--cyan);
}
.bc-knopf--sekundaer:hover { background: rgba(30, 235, 209, .1); border-color: var(--cyan); color: var(--cyan); }

/* ---------- Sprunglink ---------- */
.bc-sprunglink {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	padding: .7rem 1.1rem;
	border-radius: 999px;
	background: var(--cyan);
	color: var(--nachtblau);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--dauer) ease;
}
.bc-sprunglink:focus-visible { transform: none; outline-offset: 2px; }

/* =========================================================
   Kopfzeile
   ========================================================= */
.bc-kopf {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	height: var(--kopf-hoehe);
}
/* Hintergrund und Blur liegen auf einem Pseudo-Element: backdrop-filter auf der Kopfzeile selbst machte sie
   zum Bezugsrahmen für das fixierte Overlay-Menü, das dann auf 76 px Höhe beschnitten wurde. */
.bc-kopf::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(10, 18, 48, .92);
	border-bottom: 1px solid var(--linie);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background-color 300ms ease, border-color 300ms ease;
}
/* Über dem Hero der Startseite transparent, bis gescrollt wird (theme.js setzt .ist-gescrollt ab 40 px). */
.bc-startseite .bc-kopf:not(.ist-gescrollt):not(.ist-offen)::before {
	background: transparent;
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
/* Angemeldet: unter der WordPress-Adminleiste (32 px, mobil 46 px) */
.admin-bar .bc-kopf { top: 32px; }
.admin-bar .bc-nav { top: calc(32px + var(--kopf-hoehe)); }
@media (max-width: 782px) {
	.admin-bar .bc-kopf { top: 46px; }
	.admin-bar .bc-nav { top: calc(46px + var(--kopf-hoehe)); }
}
.bc-kopf.ist-offen::before { background: var(--nachtblau); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Scroll-Fortschritt (R3): eine 1-px-Cyan-Linie auf der unteren Hairline der Kopfzeile, wächst von 0 auf 100 % Breite mit
   dem Scrollfortschritt. Erst CSS-Scroll-Timeline (ohne JS-Arbeit), sonst schreibt theme.js --bc-fortschritt (0–1).
   Über dem transparenten Hero-Kopf wäre die 1-%-Linie ein Fremdkörper – sie erscheint mit der Hairline (.ist-gescrollt).
   Keine Bewegung im vestibulären Sinn: bleibt bei reduced motion, dort ohne Übergang. */
.bc-kopf__fortschritt {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
	height: 1px;
	background: var(--cyan);
	opacity: .8;
	transform: scaleX(var(--bc-fortschritt, 0));
	transform-origin: left center;
	pointer-events: none;
	transition: opacity 300ms ease;
}
.bc-kopf:not(.ist-gescrollt) .bc-kopf__fortschritt, .bc-kopf.ist-offen .bc-kopf__fortschritt { opacity: 0; }
html:not(.js) .bc-kopf__fortschritt { opacity: .8; }   /* ohne JS ist die Kopfzeile immer gedeckt – die Linie läuft dann rein per CSS-Timeline */
@supports (animation-timeline: scroll()) {
	.bc-kopf__fortschritt {
		transform: scaleX(0);
		animation: bc-fortschritt linear both;
		animation-timeline: scroll(root block);
	}
	@keyframes bc-fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
/* Ohne JavaScript kommt .ist-gescrollt nie – die Kopfzeile bleibt dann immer gedeckt, sonst stünde sie beim Scrollen
   transparent über dem Inhalt. */
html:not(.js) .bc-startseite .bc-kopf::before { background: rgba(10, 18, 48, .92); border-bottom-color: var(--linie); }
.bc-kopf__innen {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: 100%;
}
.bc-kopf__marke {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--ziel);
	position: relative;
	z-index: 2;
}
.bc-kopf__logo {
	display: flex;
	align-items: center;
	min-height: var(--ziel);
	text-decoration: none;
	color: var(--weiss);
	border-radius: 4px;
}
.bc-logo__svg { width: auto; height: 28px; }
/* Telefon: 26 px Logo in der 64-px-Kopfzeile. Die Wortmarke trägt ihren CI-Schutzraum in der SVG (24 von 120
   Einheiten links) – bei 20 px Seitenrand stünde das „b“ sonst 5 px rechts der Textkante von H1 und Kicker. */
@media (max-width: 599.98px) {
	.bc-kopf__logo .bc-logo__svg, .bc-fuss__logo .bc-logo__svg { height: 26px; margin-left: calc(-26px * 24 / 120); }
}
.bc-logo__text { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--weiss); }
/* Tagline neben dem Logo, durch eine Hairline getrennt – nur auf dem Hero und nur mit Platz */
.bc-kopf__tagline {
	display: none;
	padding-left: 1rem;
	border-left: 1px solid var(--linie-stark);
	font-size: var(--schrift-klein);
	font-weight: 300;
	color: var(--text-2);
	white-space: nowrap;
	line-height: 1.3;
	transition: opacity 300ms ease;
}
.bc-kopf.ist-gescrollt .bc-kopf__tagline { opacity: 0; }

.bc-nav { display: flex; align-items: center; gap: 2rem; }
.bc-nav__liste { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 1.9rem); list-style: none; }
.bc-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--ziel);
	font-size: .95rem;
	font-weight: 600;
	color: var(--text-2);
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	border-radius: 4px;
}
/* Unterstrich als Hairline, die beim Hover von links wächst */
.bc-nav__link::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 8px;
	height: 1px;
	background: var(--cyan);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dauer) ease;
}
.bc-nav__link:hover { color: var(--weiss); }
.bc-nav__link:hover::after { transform: scaleX(1); }
.bc-nav__cta { min-height: var(--ziel); padding-inline: 1.25rem; font-size: .95rem; }

.bc-kopf__menue {
	display: none;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-width: var(--ziel);
	min-height: var(--ziel);
	margin-right: -.5rem;
	padding: 0 .5rem;
	border: 0;
	background: transparent;
	color: var(--weiss);
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	position: relative;
	z-index: 2;
	border-radius: 999px;
}
.bc-kopf__menue .bc-icon--schliessen, .bc-kopf__menue__text--zu { display: none; }
.bc-kopf.ist-offen .bc-kopf__menue .bc-icon--schliessen, .bc-kopf.ist-offen .bc-kopf__menue__text--zu { display: block; }
.bc-kopf.ist-offen .bc-kopf__menue .bc-icon--menue, .bc-kopf.ist-offen .bc-kopf__menue__text--auf { display: none; }

/* Tagline „Rights-led growth.“ genau einmal auf dem ersten Bildschirm: ab 1200 px neben dem Logo, darunter als
   eigene ruhige Zeile unter dem Hero-Kicker – bündig mit der Textkante von H1 und Kicker-Strich. Eingerückt hinter
   den 22-px-Strich las sie sich auf dem Telefon wie eine verrutschte Zeile. */
.bc-kicker__tagline {
	display: block;
	margin-top: .55rem;
	font-size: var(--schrift-klein);
	font-weight: 300;
	letter-spacing: 0;
	color: var(--text-2);
}
@media (min-width: 1200px) {
	.bc-kopf__tagline { display: block; }
	.bc-kicker__tagline { display: none; }
}
@media (max-width: 959.98px) {
	.bc-kopf__menue { display: inline-flex; }
	/* Overlay-Menü: volle Fläche Nachtblau unter der Kopfzeile, Einträge groß, CTA darunter.
	   Vertikal mittig über auto-Margins statt justify-content:center – so bleibt auf niedrigen Viewports (Telefon
	   quer, 640×360) der erste Eintrag unter der Kopfzeile und scrollbar, statt oben unerreichbar abgeschnitten zu sein. */
	.bc-nav {
		position: fixed;
		inset: 0;
		z-index: 0;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 2.25rem;
		padding: calc(var(--kopf-hoehe) + 8px) max(var(--rand), env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left));
		background: var(--nachtblau);
		overflow-y: auto;
	}
	.bc-kopf.ist-offen .bc-nav { display: flex; }
	.bc-nav__liste { flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; margin-top: auto; }
	.bc-nav__cta { margin-bottom: auto; }
	/* Kontaktzeile am unteren Rand des Menüs: die E-Mail ist das eigentliche Ziel der Seite und füllt den Leerraum
	   unter dem Menü mit dem, was ein Besucher dort sucht. Nur im Overlay (Desktop und ohne JS: display none). */
	.bc-nav__kontakt {
		display: grid;
		gap: .15rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--linie);
		width: 100%;
		font-size: var(--schrift-klein);
		color: var(--text-3);
	}
	.bc-nav__kontakt a {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		min-height: var(--ziel);
		justify-self: start;
		font-size: 1.05rem;
		font-weight: 300;
		color: var(--cyan);
		text-decoration: none;
		overflow-wrap: anywhere;
	}
	.bc-nav__kontakt a:hover { color: var(--cyan-hell); }
	.bc-nav__kontakt .bc-icon { width: 1.1em; height: 1.1em; }
	.bc-nav__link {
		font-size: clamp(1.7rem, 6vw, 2.25rem);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--weiss);
		min-height: 3.1rem;
	}
	/* Hairline-Markierung im Seitenrand statt Nummern – die Einträge bleiben bündig mit dem Logo */
	.bc-nav__link::before {
		content: '';
		position: absolute;
		right: 100%;
		margin-right: .5rem;
		top: 50%;
		width: 0;
		height: 1px;
		background: var(--cyan);
		transition: width var(--dauer) ease;
	}
	.bc-nav__link::after { display: none; }
	.bc-nav__link:hover::before, .bc-nav__link:focus-visible::before { width: 14px; }
	.bc-nav__cta { min-height: var(--ziel); font-size: 1rem; }
	html.js .bc-kopf.ist-offen .bc-nav__liste li {
		animation: bc-menue-eintrag 500ms var(--reveal-kurve) both;
		animation-delay: calc(40ms * var(--i, 0));
	}
	@keyframes bc-menue-eintrag {
		from { opacity: 0; transform: translateY(12px); }
		to { opacity: 1; transform: none; }
	}
	/* Telefon quer (≤ 520 px hoch): sechs Einträge in einer Spalte passten nicht auf den Bildschirm – zwei Spalten,
	   eine Stufe kleiner, CTA und Kontakt bleiben ohne Scrollen erreichbar. */
	@media (max-height: 520px) {
		.bc-nav { gap: 1.25rem; }
		.bc-nav__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin-top: 0; }
		.bc-nav__link { font-size: 1.5rem; min-height: 2.6rem; }
		.bc-nav__cta { margin-bottom: 0; }
		.bc-nav__kontakt { padding-top: .75rem; }
		.bc-nav__kontakt a { min-height: 2.25rem; }
	}
	/* Ohne JavaScript kann der Burger nichts öffnen: Kopfzeile wird zweizeilig, die Navigation eine horizontal
	   scrollbare Zeile kleiner Links – alle Anker bleiben erreichbar. Der CTA entfällt, „Contact“ steht in der Liste. */
	html:not(.js) .bc-kopf { height: auto; }
	html:not(.js) .bc-kopf__innen { flex-wrap: wrap; height: auto; }
	html:not(.js) .bc-kopf__menue { display: none; }
	html:not(.js) .bc-nav {
		position: static;
		z-index: 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		padding: 0 0 .25rem;
		background: transparent;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	html:not(.js) .bc-nav__liste { flex-direction: row; align-items: center; gap: 1.25rem; width: auto; }
	html:not(.js) .bc-nav__link { font-size: .95rem; white-space: nowrap; min-height: var(--ziel); }
	html:not(.js) .bc-nav__cta, html:not(.js) .bc-nav__kontakt { display: none; }
}
@media (min-width: 960px) {
	.bc-nav__kontakt { display: none; }
}

/* =========================================================
   Effekte: Raster, Trajektorien, Kometen (Hero und Wartungsseite), Kurven in Craft und Contact
   ========================================================= */
.bc-effekte {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	contain: paint;
}
/* Sehr feines Gitter, 72-px-Zellen, nach unten und links ausgeblendet */
.bc-effekte__raster {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center top;
	-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
/* Markenverlauf als weicher Glow oben rechts – nie hinter Text (der Inhalt steht links) */
.bc-effekte__glow {
	position: absolute;
	top: -35%;
	right: -20%;
	width: min(90vw, 1100px);
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(18, 137, 127, .38), rgba(18, 137, 127, .1) 45%, transparent 70%);
	opacity: .9;
}
/* Trajektorien (template-parts/kurven.php): ein Kasten je Variante, die SVG füllt ihn und schneidet per
   preserveAspectRatio den passenden Ausschnitt. contain: paint hält die Kometen-Repaints im Kasten. */
.bc-kurven {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	contain: paint;
}
.bc-kurven__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.bc-kurven__kurve {
	fill: none;
	stroke: var(--linie-cyan);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: .9;
}
.bc-kurven__kurve--fern { opacity: .45; }
/* Komet: eine Gruppe (Kern, Glow, Schweif) läuft per CSS-Motion-Path in SVG-Einheiten ihre Kurve entlang – der Pfad
   kommt als --bc-pfad aus kurven.php (dieselbe Zeichenkette wie das d der Kurve), Dauer und Versatz ebenso. So bleibt
   er bei jeder Skalierung der viewBox exakt auf der Linie; offset-rotate: auto richtet den Schweif an der Tangente
   aus. Der Glow ist ein radialer Verlauf, kein Filter. Ohne Motion-Path-Unterstützung bleibt der Komet unsichtbar. */
.bc-kurven__komet { display: none; }
@supports (offset-path: path('M0 0 L10 10')) {
	.bc-kurven__komet {
		display: block;
		offset-path: var(--bc-pfad);
		offset-rotate: auto;
		offset-distance: 0%;
		opacity: 0;
		animation: bc-komet var(--bc-dauer, 9s) cubic-bezier(.45, .05, .55, .95) var(--bc-versatz, 0s) infinite;
	}
}
@keyframes bc-komet {
	0% { offset-distance: 0%; opacity: 0; }
	8% { opacity: 1; }
	88% { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}
.bc-kurven__kern { fill: #e9fffb; }
.bc-kurven__schweif { opacity: .9; }
/* Zweiter Komet im Hero: kleiner, blasser, andere Kurve und Periode (13 s gegen 9 s) – der Himmel lebt, ohne dass
   zwei gleich helle Punkte um Aufmerksamkeit konkurrieren. */
.bc-kurven__komet--2 .bc-kurven__kern, .bc-kurven__komet--fern .bc-kurven__kern { fill: #cdfaf3; }
.bc-kurven__komet--2 .bc-kurven__schweif, .bc-kurven__komet--fern .bc-kurven__schweif { opacity: .55; }
.bc-kurven__komet--2 .bc-kurven__glow, .bc-kurven__komet--fern .bc-kurven__glow { opacity: .7; }

/* Craft: ein flacher Streifen (420 px) am oberen Rand der Fläche, rechts verankert (xMaxYMin slice) – auf Telefonen
   bleibt nur die rechte, höchste Strecke der Kurve im Bild, immer über dem Kicker (Abstand ≥ 68 px). Links auf 40 %
   ausgeblendet, damit die Kurve aus dem Glow kommt und nicht als Linie über der Überschrift beginnt. Stroke in vollem
   Cyan bei .18 – die Fläche ist heller als Nachtblau, die Hairline-Farbe verschwände darauf. Lesbar als Textur. */
.bc-kurven--craft {
	inset: 0 0 auto 0;
	height: 420px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
	mask-image: linear-gradient(to right, transparent, #000 40%);
}
.bc-kurven--craft .bc-kurven__kurve { stroke: var(--cyan); opacity: .18; }
.bc-kurven--craft .bc-kurven__komet .bc-kurven__glow { opacity: .55; }
.bc-kurven--craft .bc-kurven__komet .bc-kurven__kern { fill: #b9f5ec; opacity: .8; }
.bc-kurven--craft .bc-kurven__schweif { opacity: .5; }

/* Contact: dieselben Kurven wie im Hero als Klammer der Seite, unten verankert (xMidYMax slice) und ab 55 % Höhe
   ausgeblendet, damit sie vor dem Fuß aufhören. Höhe höchstens Breite × 900/1440: ist der Abschnitt schmaler als
   sein Ausschnitt hoch (Telefon), zeigt der Kasten die viewBox unverzerrt und ungeschnitten am unteren Rand – die
   Kurven bleiben unter E-Mail und LinkedIn statt hinter ihnen. Effektive Deckung der Kurven .25 / .11 (Stroke .28). */
.bc-kurven--contact {
	inset: auto 0 0 0;
	height: min(100%, calc(100vw * 900 / 1440));
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.bc-kurven--contact .bc-kurven__kurve--fern { opacity: .4; }
/* Telefon: der Kasten (Breite × 900/1440) reicht bis knapp unter die LinkedIn-Zeile – oben zusätzlich ausblenden,
   damit die höchste Strecke der Kurven neben dem Link nur noch ein Hauch ist. */
@media (max-width: 759.98px) {
	.bc-kurven--contact {
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent 100%);
	}
}
.bc-kurven--contact .bc-kurven__komet .bc-kurven__glow { opacity: .7; }
.bc-kurven--contact .bc-kurven__komet .bc-kurven__kern { fill: #cdfaf3; }
.bc-kurven--contact .bc-kurven__schweif { opacity: .6; }

/* Funke: wenn ein Abschnittskopf erscheint (.ist-sichtbar aus theme.js), läuft einmal ein kleiner Lichtpunkt den
   Kicker-Strich entlang; bei den Trennlinien von Proof und How I work dasselbe über die ganze Breite.
   Technik: ein Pseudo-Element in Strichbreite mit hellem Kopf am rechten Ende wächst per scaleX von links – der Kopf
   wandert, der Schweif dehnt sich, am Ende blendet alles aus. Nur transform und opacity, keine Layoutänderung. Der
   Strich (::before) bleibt wie er ist; das ::after liegt bei .86em − 2px, also mittig auf seiner Zeile (gemessen). */
.bc-kicker { position: relative; }
.bc-kicker::after {
	content: '';
	position: absolute;
	left: 0;
	top: calc(.86em - 2px);
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(30, 235, 209, 0), rgba(30, 235, 209, .7) 55%, #fff);
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
	pointer-events: none;
}
@keyframes bc-funke {
	0% { transform: scaleX(0); opacity: 0; }
	12% { opacity: 1; }
	65% { opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}
/* Der Hero hat kein data-reveal – dort läuft der Funke nach dem Einblenden des Kickers (CSS-Animation, ohne JS). */
.bc-hero .bc-kicker::after { animation: bc-funke 800ms cubic-bezier(.2, .7, .2, 1) 650ms both; }
html.js .ist-sichtbar .bc-kicker::after { animation: bc-funke 800ms cubic-bezier(.2, .7, .2, 1) 350ms both; }
/* Trennlinien: das Pseudo-Element liegt auf der Hairline des Rasters (absolut, also keine Rasterzelle) und startet mit
   der ersten Zeile, die erscheint (:has – ältere Browser lassen den Funken einfach weg). */
.bc-prinzipien, .bc-proof .bc-container { position: relative; }
.bc-prinzipien::after, .bc-proof .bc-container::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(30, 235, 209, 0) 0, rgba(30, 235, 209, 0) calc(100% - 180px), rgba(30, 235, 209, .55) calc(100% - 40px), rgba(233, 255, 251, .95));
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
	pointer-events: none;
}
/* Die Proof-Trennlinie ist das ::before im Container (im Fluss, unter dessen padding-top) – der Funke bekommt dieselbe
   Höhe und dieselben Seitenränder wie der Container. */
.bc-proof .bc-container::after {
	top: calc(var(--abschnitt) * .55);
	left: var(--rand);
	right: var(--rand);
	left: max(var(--rand), env(safe-area-inset-left));
	right: max(var(--rand), env(safe-area-inset-right));
}
html.js .bc-prinzipien:has(> .ist-sichtbar)::after,
html.js .bc-proof .bc-container:has(> .ist-sichtbar)::after { animation: bc-funke 900ms cubic-bezier(.2, .7, .2, 1) 200ms both; }

/* =========================================================
   Hero
   ========================================================= */
.bc-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(100svh, 900px);
	padding-top: calc(var(--kopf-hoehe) + var(--abschnitt) * .5);
	padding-bottom: calc(var(--abschnitt) * .75);
	isolation: isolate;
}
.bc-hero .bc-container { position: relative; z-index: 1; }
/* Telefon: Inhalt oben mit bewusstem Versatz statt vertikal mittig – mittig lag die H1 unter 250 px leerem Raster
   in der Bildschirmmitte. Jetzt steht sie im oberen Drittel, Kurven und Komet bekommen die untere Hälfte. */
@media (max-width: 759.98px) {
	.bc-hero {
		align-items: flex-start;
		padding-top: calc(var(--kopf-hoehe) + clamp(2.5rem, 9svh, 4.5rem));
		padding-bottom: clamp(5rem, 22svh, 11rem);
	}
	.bc-hero__aktion { gap: .85rem 1.5rem; }
	/* Der schmale Ausschnitt (xMidYMid slice) zeigt die Mitte der viewBox – dort läuft die steile zweite Kurve
	   (M-60 700 …) mitten durch Sub-Text und CTA. Auf Telefonen bleibt sie ein Hauch in Rasterstärke (effektiv .06);
	   auf ihr läuft kein Komet, die drei anderen Kurven bleiben in der unteren Hälfte. Nur im Hero – auf der
	   Wartungsseite steht der Text mittig und kürzer. */
	.bc-hero .bc-kurven--hero .bc-kurven__kurve:nth-of-type(2), .bc-hero .bc-kurven--hero-wachstum .bc-kurven__kurve:nth-of-type(2) { opacity: .2; }
}
.bc-hero__titel { max-width: 18ch; }
.bc-hero__sub {
	max-width: 44ch;
	margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
	font-size: var(--schrift-gross);
	line-height: 1.5;
	color: var(--text-2);
}
.bc-hero__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3.25rem); }
.bc-hero__weiter {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: var(--ziel);
	font-size: .95rem;
	font-weight: 600;
	color: var(--text-2);
	text-decoration: none;
}
.bc-hero__weiter:hover { color: var(--weiss); }
.bc-hero__weiter .bc-icon { width: 1.1em; height: 1.1em; transform: rotate(90deg); transition: transform var(--dauer) ease; }
.bc-hero__weiter:hover .bc-icon { transform: rotate(90deg) translateX(3px); }
/* Einblenden des Heros rein per CSS (kein data-reveal): die H1 ist das LCP-Element und soll mit dem Stylesheet
   erscheinen, nicht erst, wenn theme.js gelaufen ist. Staffelung wie beim Scroll-Einblenden über --reveal-delay. */
.bc-hero .bc-kicker, .bc-hero__titel, .bc-hero__sub, .bc-hero__aktion {
	animation: bc-hero-einblenden 700ms var(--reveal-kurve) both;
	animation-delay: var(--reveal-delay, 0ms);
}
@keyframes bc-hero-einblenden {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Hero – Wachstumsbild (R3): eine Linie, zwei Knoten, der helle Komet ----------
   Das Bild hängt an der rechten Kante des Hero-Containers und ist unten am CTA ausgerichtet; es ragt in das
   untere Polster des Heros, damit die Kurve unter dem Text „ankommt“ statt neben ihm zu schweben. Position
   absolut, damit Kicker, H1, Sub und CTA exakt an ihrem Platz bleiben. Knoten/Glow/Linie nach der gemeinsamen
   Spezifikation (Tokens); kein Pulsen – zu wenig sichtbar, um Bewegung zu rechtfertigen. */
.bc-hero--wachstum { overflow: hidden; }   /* die Kurve läuft über den Rand hinaus – sonst horizontales Scrollen auf Telefonen */
.bc-hero__wachstum {
	display: none;
	position: absolute;
	right: max(var(--rand), env(safe-area-inset-right));
	bottom: calc(var(--abschnitt) * -0.7);
	width: 45%;
	max-width: 560px;
	margin: 0;
	pointer-events: none;
	animation: bc-hero-einblenden 900ms var(--reveal-kurve) both;
	animation-delay: 420ms;
}
.bc-hero__wachstum svg { width: 100%; height: auto; overflow: visible; }
@media (min-width: 1024px) {
	.bc-hero__wachstum { display: block; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.bc-hero__wachstum { width: 42%; }   /* 44ch Sub-Zeile und Bild berühren sich bei 1024 sonst */
}
/* Tablet (760–1023): unter dem Text, rechtsbündig, kleiner */
@media (min-width: 760px) and (max-width: 1023.98px) {
	.bc-hero__wachstum {
		display: block;
		position: static;
		width: min(100%, 520px);
		margin-top: clamp(2.5rem, 5vw, 3.5rem);
		margin-left: auto;
	}
}
/* Telefon: kompakt unter dem CTA (≈ 200 px hoch). Beschriftung und Knoten werden im viewBox-Maßstab größer
   (≈ 12–14 px real); das untere Polster des Heros schrumpft, weil das Bild die Bühne füllt, die vorher den Kurven
   gehörte. Die Maske blendet die Kurvenverlängerung kurz über dem 2033-Knoten aus, damit sie nicht an den Sub-Text
   („more upside“) heranläuft. */
@media (max-width: 759.98px) {
	.bc-hero--wachstum { padding-bottom: clamp(3rem, 8svh, 5rem); }
	.bc-hero__wachstum {
		display: block;
		position: static;
		width: 100%;
		max-width: 340px;
		margin-top: clamp(2rem, 7vw, 2.75rem);
		-webkit-mask-image: linear-gradient(to top, #000 68%, transparent 96%);
		mask-image: linear-gradient(to top, #000 68%, transparent 96%);
	}
	.bc-wachstum__text { font-size: 21px; }
	.bc-wachstum__knoten-kern { r: 4; }
	.bc-wachstum__knoten-glow { r: 20; }
}
.bc-wachstum__kurve {
	fill: none;
	stroke: url(#bc-wachstum-linie);   /* = var(--linie-wachstum) als Verlauf: Cyan .55, an beiden Enden ausgeblendet */
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}
.bc-wachstum__knoten-kern { fill: var(--cyan); }                 /* statischer Knoten: Cyan – bewegtes Licht ist #e9fffb */
.bc-wachstum__knoten-glow { fill: url(#bc-wachstum-glow); opacity: 1; }   /* radialer Verlauf, kein Filter */
.bc-wachstum__text {
	font-family: var(--schrift);
	font-size: 16px;                  /* viewBox-Einheiten: 15,3 px bei 1440, 13 px bei 1024 */
	font-weight: 600;
	letter-spacing: .01em;
	fill: var(--weiss);
	font-variant-numeric: tabular-nums;
}
.bc-wachstum__text--wert { fill: var(--cyan); }
.bc-wachstum__text--jahr { fill: var(--text-2); font-weight: 300; }

/* =========================================================
   The shift – Kennzahlen
   ========================================================= */
.bc-zahlen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto auto;
	gap: 0 clamp(2rem, 4vw, 4rem);
	margin-top: clamp(3rem, 6vw, 5.5rem);
	list-style: none;
}
/* Jede Kennzahl spannt die drei Zeilen des Rasters (Weg / Wert / Label) als Subgrid auf: so stehen die großen Zahlen
   in allen Spalten auf einer Grundlinie, auch wenn nur die erste einen Ausgangswert darüber trägt, und die Labels
   beginnen auf einer Höhe – die Reihe liest sich als eine Zeile Evidenz. */
.bc-zahl {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	align-content: start;
	padding: 1.75rem 0 2rem;
	border-top: 1px solid var(--linie-stark);
	border-bottom: 1px solid var(--linie);
	transition: border-color var(--dauer) ease;
}
.bc-zahl:hover { border-top-color: rgba(30, 235, 209, .55); }
.bc-zahl__wert {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .35em;
	font-size: var(--schrift-zahl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--cyan);
	font-variant-numeric: tabular-nums;
}
.bc-zahl__wert .bc-icon { width: .55em; height: .55em; align-self: center; color: var(--text-2); stroke-width: 1.75; }
.bc-zahl__weg { grid-row: 1; }
.bc-zahl__wert { grid-row: 2; }
.bc-zahl__label { grid-row: 3; }
/* Bereich „$174bn → $260bn“ (R3, Variante A3): Ausgangswert und Zeitachse als eine ruhige Zeile über der großen
   Zielzahl – Startjahr, „$174bn“ Light, dann eine 64 px lange, leicht ansteigende Wachstumslinie (Miniatur der
   Hero-Kurve) mit Cyan-Knoten am Ende; ein Funke läuft einmal beim Erscheinen. Jahr und Wert gehören zusammen (.6rem). */
.bc-zahl__weg {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 1.6rem;
	margin-bottom: .55rem;
	font-size: var(--schrift-klein);
	font-weight: 300;
	color: var(--text-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bc-zahl__weg + .bc-zahl__wert { margin-top: 0; }   /* p + p { margin-top: 1em } würde 64 px Luft einziehen */
.bc-zahl__weg-von { color: var(--weiss); font-weight: 300; font-size: 1.05rem; }
.bc-zahl__weg-jahr { color: var(--text-3); }
.bc-zahl__weg-linie { width: 64px; height: 12px; overflow: visible; flex: none; }
.bc-zahl__weg-strich { fill: none; stroke: var(--linie-wachstum); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bc-zahl__weg-ende { fill: var(--cyan); }
/* Funke auf der Miniatur (Weg < 100 px: ohne Schweif), 900 ms; nur mit JS und Motion-Path, sonst unsichtbar */
.bc-zahl__weg-funke { display: none; }
@supports (offset-path: path('M0 0 L10 10')) {
	.bc-zahl__weg-funke {
		display: block;
		offset-path: path('M0 11 L64 1');
		offset-distance: 0%;
		opacity: 0;
	}
	html.js .ist-sichtbar .bc-zahl__weg-funke { animation: bc-weg-funke 900ms var(--funke-kurve) var(--funke-verzug) 1 both; }
}
@keyframes bc-weg-funke {
	0% { offset-distance: 0%; opacity: 0; }
	10% { opacity: 1; }
	85% { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}
/* Werte ohne Ziffern („Younger generations“) fallen eine Stufe kleiner aus, damit die Reihe nicht kippt */
.bc-zahl__wert--text { font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.15; padding-top: .3em; }
.bc-zahl__label { max-width: 26ch; margin-top: 1rem; color: var(--text-2); line-height: 1.5; }
.bc-zahlen__quelle { margin-top: 1.5rem; font-size: var(--schrift-klein); color: var(--text-3); }
@media (max-width: 759.98px) {
	.bc-zahlen { grid-template-columns: 1fr; grid-template-rows: none; margin-top: clamp(2.5rem, 8vw, 3.5rem); }
	/* Als Liste untereinander tragen die Hairlines den Rhythmus – die Polster dürfen enger sein als in der Reihe */
	.bc-zahl { display: block; grid-row: auto; border-bottom: 0; padding: 1.4rem 0 1.75rem; }
	.bc-zahl:last-child { border-bottom: 1px solid var(--linie); }
	.bc-zahl__weg { margin-bottom: .35rem; }
	.bc-zahl__label { margin-top: .7rem; }
	.bc-zahlen__quelle { margin-top: 1.25rem; }
}

/* =========================================================
   The craft + Proof – eine gemeinsame Fläche
   ========================================================= */
.bc-abschnitt--flaeche { background: var(--nachtblau-flaeche); }
.bc-craft {
	padding-bottom: calc(var(--abschnitt) * .8);
	isolation: isolate;
	overflow: hidden;
}
/* Verlaufs-Glow oben rechts (Teal → transparent), Opazität .35 – nur Fläche, kein Text darunter */
.bc-craft::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -15%;
	width: min(80vw, 1000px);
	aspect-ratio: 1;
	background: radial-gradient(closest-side, #12897f, rgba(18, 137, 127, .35) 40%, transparent 72%);
	opacity: .35;
	pointer-events: none;
	z-index: -1;
}
.bc-craft .bc-container { position: relative; z-index: 1; }
.bc-craft .bc-kurven { z-index: 0; }
.bc-craft__titel { max-width: 18ch; font-size: var(--schrift-h2-gross); }
.bc-craft__text {
	display: grid;
	gap: clamp(2rem, 3.5vw, 3rem);
	max-width: 40ch;
	margin-top: clamp(3rem, 7vw, 6.5rem);
	font-size: var(--schrift-gross);
	line-height: 1.55;
	color: var(--text-2);
}
.bc-craft__text p + p { margin-top: 0; }
.bc-craft__these {
	padding-left: 1.25rem;
	border-left: 2px solid var(--cyan);
	font-weight: 600;
	color: var(--weiss);
}
@media (min-width: 960px) {
	/* Die Absätze rücken in die rechte Hälfte: links bleibt Luft unter der Überschrift (≥ 60 % Fläche frei) */
	.bc-craft__text { margin-left: 50%; }
}

.bc-proof { padding-top: 0; }
/* Die Hairline mit Kicker darüber trennt Behauptung und Beweis, ohne die Fläche zu brechen */
.bc-proof .bc-container { padding-top: calc(var(--abschnitt) * .55); }
.bc-proof .bc-container::before {
	content: '';
	display: block;
	height: 1px;
	background: var(--linie);
	margin-bottom: calc(var(--abschnitt) * .55);
}
.bc-stationen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem clamp(2rem, 4vw, 4rem);
	margin-top: clamp(3rem, 5vw, 4.5rem);
	list-style: none;
}
.bc-station {
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie-stark);
	transition: border-color var(--dauer) ease;
}
.bc-station:hover { border-top-color: rgba(30, 235, 209, .55); }
/* Logos stehen auf einer gemeinsamen Grundlinie (flex-end), damit der Abstand zum Namen in jeder Spalte gleich ist.
   Die Höhen gleichen die gefühlte Masse an: das quadratische Bundesliga-Lockup braucht 72 px, sonst bleibt die
   Wortmarke darunter unlesbar (Kapitälchenhöhe ≈ 8 px); LiveNow ist ein fetter Block, Sportradar eine leichte Zeile.
   werkzeuge/bilder.py exportiert die PNGs in genau diesen Höhen (1x) und doppelt (@2x). */
.bc-station__logo { display: flex; align-items: flex-end; height: 72px; }
.bc-partner { width: auto; height: 36px; max-width: 100%; object-fit: contain; object-position: left bottom; opacity: .92; }
.bc-partner--bundesliga { height: 72px; }
.bc-partner--livenow { height: 40px; }
.bc-partner--sportradar { height: 32px; }
.bc-station__logo-text { font-weight: 600; font-size: 1.3rem; color: var(--weiss); }
.bc-station__name { margin-top: 1.5rem; font-weight: 600; color: var(--weiss); }
.bc-station__rolle { font-size: var(--schrift-klein); color: var(--text-2); }
.bc-station__text { margin-top: .85rem; max-width: 30ch; color: var(--text-2); line-height: 1.5; }
.bc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.1rem;
	padding: .2rem .95rem;
	border: 1px solid rgba(255, 255, 255, .36);   /* nicht --linie-stark: ein Chip-Rahmen soll ≥ 3:1 erreichen */
	border-radius: 999px;
	font-size: var(--schrift-klein);
	font-weight: 600;
	color: var(--text-2);
}
/* ---------- Proof – Wertschöpfungskette (R3, ersetzt die Schlagwort-Zeile) ----------
   Knoten auf einer Datenlinie (--linie-daten, ≥ 3:1 auf der Fläche), am offenen Ende per Maske ausgeblendet – die
   Kette geht weiter. Beim Erscheinen läuft einmal ein Funke linear die Linie entlang (left/top statt transform, weil
   die Linienlänge fluid ist – ein Element, ≈ 1 s, toleriert) und schaltet die Knoten synchron (Verzögerung je <li>
   aus proof.php). Ohne JS: Knoten cyan, Linie fertig, kein Funke. */
.bc-kette {
	--kette-knoten: var(--knoten);
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	margin-top: clamp(3.5rem, 6vw, 5.5rem);
	list-style: none;
}
.bc-kette::before {
	content: '';
	position: absolute;
	left: calc(var(--kette-knoten) / 2);
	right: 0;
	top: calc(var(--kette-knoten) / 2);
	height: 1px;
	background: var(--linie-daten);
	-webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
}
.bc-kette__station {
	position: relative;
	padding-top: calc(var(--kette-knoten) + .9rem);
	padding-right: .5rem;
	font-size: var(--schrift-kicker);
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--text-2);
	line-height: 1.3;
}
/* Knoten: 6 px Cyan, Glow als radialer Verlauf (28 px), kein Schatten */
.bc-kette__station::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: var(--kette-knoten);
	height: var(--kette-knoten);
	border-radius: 50%;
	box-sizing: border-box;
	border: 1px solid var(--cyan);
	background-color: var(--cyan);
	transition: border-color 300ms ease, background-color 300ms ease;
}
.bc-kette__station::after {
	content: '';
	position: absolute;
	left: calc(var(--kette-knoten) / 2 - 14px);
	top: calc(var(--kette-knoten) / 2 - 14px);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 235, 209, .38), rgba(30, 235, 209, .12) 45%, transparent 70%);
	opacity: 1;
	transition: opacity 400ms ease;
	pointer-events: none;
}
/* Funke: Kopf (#e9fffb, bewegtes Licht) mit Glow und 56-px-Schweif nach links; nur mit JS, wenn die Kette erscheint */
.bc-kette__funke {
	display: none;
	position: absolute;
	top: calc(var(--kette-knoten) / 2);
	left: calc(var(--kette-knoten) / 2);
	width: 0;
	height: 0;
	pointer-events: none;
}
.bc-kette__funke::before {
	content: '';
	position: absolute;
	right: 0;
	top: -.5px;
	width: 56px;
	height: 1px;
	background: linear-gradient(90deg, rgba(30, 235, 209, 0), rgba(30, 235, 209, .9));
}
.bc-kette__funke::after {
	content: '';
	position: absolute;
	left: -9px;
	top: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle, #e9fffb 0 1.6px, rgba(30, 235, 209, .85) 2.5px, rgba(30, 235, 209, .25) 6px, transparent 9px);
}
/* Mit JS: Knoten warten als Ringe in Linienfarbe auf der Fläche, der Funke schaltet sie (300 ms) */
html.js .bc-kette__station::before { background-color: var(--nachtblau-flaeche); border-color: var(--linie-daten); }
html.js .bc-kette__station::after { opacity: 0; }
html.js .bc-kette.ist-sichtbar .bc-kette__station::before { background-color: var(--cyan); border-color: var(--cyan); transition-delay: var(--kette-delay, 0ms); }
html.js .bc-kette.ist-sichtbar .bc-kette__station::after { opacity: 1; transition-delay: var(--kette-delay, 0ms); }
html.js .bc-kette.ist-sichtbar .bc-kette__funke { display: block; animation: bc-kette-funke var(--funke-dauer) linear var(--funke-verzug) 1 both; }
@keyframes bc-kette-funke {
	0% { left: calc(var(--kette-knoten) / 2); opacity: 0; }
	6% { opacity: 1; }
	86% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}
/* Telefon: senkrechte Achse, Stationen rechts daneben – sechs Wörter passen nicht nebeneinander */
@media (max-width: 599.98px) {
	.bc-kette { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2.5rem; }
	.bc-kette::before {
		right: auto;
		bottom: 0;
		width: 1px;
		height: auto;
		-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	}
	.bc-kette__station { padding-top: 0; padding-left: calc(var(--kette-knoten) + 1rem); line-height: 1.2; min-height: var(--kette-knoten); }
	.bc-kette__station::before { top: calc(.6em - var(--kette-knoten) / 2); }
	.bc-kette__station::after { top: calc(.6em - 14px); }
	.bc-kette__funke::before { right: auto; left: -.5px; top: auto; bottom: 0; width: 1px; height: 48px; background: linear-gradient(180deg, rgba(30, 235, 209, 0), rgba(30, 235, 209, .9)); }
	@keyframes bc-kette-funke {
		0% { left: calc(var(--kette-knoten) / 2); top: 0; opacity: 0; }
		6% { opacity: 1; }
		86% { opacity: 1; }
		100% { left: calc(var(--kette-knoten) / 2); top: 100%; opacity: 0; }
	}
}
@media (max-width: 759.98px) {
	/* Als Liste untereinander: dichter, Name und Rolle in einer Zeile, damit drei Stationen nicht drei Bildschirme füllen */
	.bc-stationen { grid-template-columns: 1fr; gap: 1.75rem; margin-top: clamp(2.5rem, 8vw, 3.5rem); }
	.bc-station { padding-top: 1.25rem; }
	.bc-station__logo { height: auto; margin-bottom: 1rem; }
	.bc-partner--bundesliga { height: 56px; }
	/* Name und Rolle als eine Zeile („Bundesliga · Premium rights holder“): inline gesetzte <p> fließen zusammen,
	   der Abstand zum Logo liegt deshalb am Logo-Kasten, nicht am Namen */
	.bc-station__name, .bc-station__rolle { display: inline; margin-top: 0; font-size: var(--schrift-fliess); }
	.bc-station__name + .bc-station__rolle::before { content: '·' / ''; margin: 0 .5rem; color: var(--text-3); }
	.bc-station__text { margin-top: .5rem; max-width: none; }
}

/* =========================================================
   Who I work with – „Two sides of the same table“ (R3)
   Zwei hairline-gerahmte Felder links und rechts, dazwischen auf der Mittellinie das Signet als Knoten. Beim Erscheinen
   läuft von jeder Seite einmal ein Funke zum Knoten, danach leuchtet der Knoten sanft (Glow = radialer Verlauf).
   Rahmen bewusst in --linie (.12) statt --linie-stark: als Kante, an der die Verbindungslinien (--linie-daten, .36)
   ansetzen – nicht als Karte. Ohne JS: Linien + Knoten mit Glow, fertig. Reduced motion: dito, Funken aus.
   ========================================================= */
.bc-tisch {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(140px, 15vw, 200px) minmax(0, 1fr);
	align-items: stretch;
	margin-top: clamp(3rem, 6vw, 5.5rem);
}
.bc-tisch__seite {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 2.75rem);
	border: 1px solid var(--linie);
	transition: border-color var(--dauer) ease;
}
.bc-tisch__seite:hover { border-color: rgba(30, 235, 209, .3); }
.bc-tisch__sub { margin-top: .35rem; color: var(--text-2); }
.bc-tisch__punkte {
	margin-top: 2rem;
	padding-top: .25rem;
	border-top: 1px solid var(--linie);
	list-style: none;
	counter-reset: bc-punkt;
}
.bc-tisch__punkte li {
	position: relative;
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr);
	align-items: baseline;
	padding: .9rem 0;
	color: var(--text-2);
	line-height: 1.45;
}
.bc-tisch__punkte li + li { border-top: 1px solid var(--linie); }
/* Index „01 02 03“ statt Strich: Ziffern in Tabellenbreite, Laufweite wie der Kicker; nur visuell (alternativer Text leer) */
.bc-tisch__punkte li::before {
	counter-increment: bc-punkt;
	content: counter(bc-punkt, decimal-leading-zero) / '';
	font-size: var(--schrift-kicker);
	font-weight: 600;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
	color: var(--cyan);
}
/* Mitte: Linie – Knoten – Linie */
.bc-tisch__mitte {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 120px;
}
.bc-tisch__linie { position: relative; height: 1px; background: var(--linie-daten); }
.bc-tisch__knoten { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.bc-tisch__signet { width: 40px; height: 40px; position: relative; z-index: 1; }
/* Glow hinter dem Signet: radialer Markenverlauf, kein Schatten */
.bc-tisch__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 120px;
	height: 120px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 235, 209, .26), rgba(18, 137, 127, .14) 38%, transparent 68%);
	pointer-events: none;
	transition: opacity 600ms ease;
}
/* Funke auf jeder Linie: Kopf (#e9fffb) mit Glow und 56-px-Schweif, läuft zum Knoten (left/top – Linienlänge fluid) */
.bc-tisch__funke { display: none; position: absolute; top: .5px; width: 0; height: 0; pointer-events: none; }
.bc-tisch__funke::after {
	content: '';
	position: absolute;
	left: -9px;
	top: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle, #e9fffb 0 1.6px, rgba(30, 235, 209, .85) 2.5px, rgba(30, 235, 209, .25) 6px, transparent 9px);
}
.bc-tisch__funke::before { content: ''; position: absolute; top: -.5px; width: 56px; height: 1px; }
.bc-tisch__linie--links .bc-tisch__funke::before { right: 0; background: linear-gradient(90deg, rgba(30, 235, 209, 0), rgba(30, 235, 209, .9)); }
.bc-tisch__linie--rechts .bc-tisch__funke::before { left: 0; background: linear-gradient(270deg, rgba(30, 235, 209, 0), rgba(30, 235, 209, .9)); }
/* Mit JS: Glow wartet, Funken laufen 400 ms nach dem Erscheinen los (900 ms), der Glow kommt, wenn sie ankommen */
html.js .bc-tisch__glow { opacity: 0; }
html.js .bc-tisch__mitte.ist-sichtbar .bc-tisch__glow { opacity: 1; transition-delay: 1150ms; }
html.js .bc-tisch__mitte.ist-sichtbar .bc-tisch__funke { display: block; animation: 900ms var(--funke-kurve) var(--funke-verzug) 1 both; }
html.js .bc-tisch__mitte.ist-sichtbar .bc-tisch__linie--links .bc-tisch__funke { animation-name: bc-tisch-funke-links; }
html.js .bc-tisch__mitte.ist-sichtbar .bc-tisch__linie--rechts .bc-tisch__funke { animation-name: bc-tisch-funke-rechts; }
@keyframes bc-tisch-funke-links {
	0% { left: 0; opacity: 0; }
	12% { opacity: 1; }
	82% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}
@keyframes bc-tisch-funke-rechts {
	0% { left: 100%; opacity: 0; }
	12% { opacity: 1; }
	82% { opacity: 1; }
	100% { left: 0; opacity: 0; }
}
/* Tablet und Telefon: Felder untereinander, die Mitte wird zur senkrechten Achse, Funken laufen von oben und unten */
@media (max-width: 959.98px) {
	.bc-tisch { grid-template-columns: 1fr; margin-top: clamp(2.5rem, 8vw, 3.5rem); }
	.bc-tisch__mitte { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; justify-items: center; min-height: 168px; }
	.bc-tisch__linie { width: 1px; height: auto; align-self: stretch; }
	.bc-tisch__funke { top: auto; left: .5px; }
	.bc-tisch__funke::before { width: 1px; height: 56px; top: auto; left: -.5px; }
	.bc-tisch__linie--links .bc-tisch__funke::before { right: auto; bottom: 0; background: linear-gradient(180deg, rgba(30, 235, 209, 0), rgba(30, 235, 209, .9)); }
	.bc-tisch__linie--rechts .bc-tisch__funke::before { left: -.5px; top: 0; background: linear-gradient(0deg, rgba(30, 235, 209, 0), rgba(30, 235, 209, .9)); }
	@keyframes bc-tisch-funke-links {
		0% { top: 0; opacity: 0; }
		12% { opacity: 1; }
		82% { opacity: 1; }
		100% { top: 100%; opacity: 0; }
	}
	@keyframes bc-tisch-funke-rechts {
		0% { top: 100%; opacity: 0; }
		12% { opacity: 1; }
		82% { opacity: 1; }
		100% { top: 0; opacity: 0; }
	}
}
@media (max-width: 599.98px) {
	.bc-tisch__seite { padding: 1.5rem 1.25rem 1.6rem; }
	.bc-tisch__punkte { margin-top: 1.5rem; }
	.bc-tisch__punkte li { padding: .8rem 0; grid-template-columns: 2.2rem minmax(0, 1fr); }
	.bc-tisch__mitte { min-height: 140px; }
}

/* =========================================================
   How I work – Prinzipien und Foto
   ========================================================= */
.bc-approach { overflow: hidden; }
.bc-approach__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	gap: 0 clamp(3rem, 6vw, 6rem);
	align-items: start;
}
.bc-prinzipien { list-style: none; border-top: 1px solid var(--linie-stark); margin-top: clamp(3rem, 6vw, 5rem); }
.bc-prinzip { padding: 1.75rem 0; border-bottom: 1px solid var(--linie); }
.bc-prinzip__text { margin-top: .5rem; max-width: 36ch; color: var(--text-2); line-height: 1.5; }
.bc-portrait { position: relative; margin: 0; max-width: 480px; width: 100%; }
/* Weicher Verlaufs-Glow hinter dem Freisteller; die Person selbst bleibt unbearbeitet */
.bc-portrait::before {
	content: '';
	position: absolute;
	inset: 8% -20% 10% -20%;
	background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(18, 137, 127, .55), rgba(18, 137, 127, .15) 50%, transparent 75%);
	pointer-events: none;
	z-index: 0;
}
.bc-portrait__bild {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	/* Unterkante und die beiden Seiten des Freistellers sind harte Schnitte (die Ellbogen liegen am Bildrand) –
	   ausblenden statt zeigen: vertikaler und horizontaler Verlauf werden geschnitten (intersect / source-in) */
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .55) 80%, transparent 96%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .55) 80%, transparent 96%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-composite: intersect;
}
.bc-portrait__text {
	position: relative;
	z-index: 1;
	margin-top: -1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
}
.bc-portrait__name { display: block; font-weight: 600; color: var(--weiss); }
.bc-portrait__rolle { display: block; font-size: var(--schrift-klein); color: var(--text-2); }
@media (min-width: 900px) {
	/* Das Foto steht rechts neben Überschrift und Prinzipien über die volle Höhe, Bildunterschrift unten.
	   Zeile 2 nimmt die Überhöhe des Fotos auf (1fr) – sonst rutschte sie in Zeile 1 und riss H2 und Liste auseinander. */
	.bc-approach__raster { grid-template-rows: auto 1fr; }
	.bc-portrait { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
@media (max-width: 899.98px) {
	.bc-approach__raster { grid-template-columns: 1fr; }
	.bc-portrait { max-width: 400px; margin-top: 3rem; }
	.bc-prinzipien { margin-top: clamp(2.5rem, 8vw, 3.5rem); }
	.bc-prinzip { padding: 1.5rem 0; }
}
@media (max-width: 759.98px) {
	/* Telefon: der Freisteller in voller Spaltenbreite wirkte wie ein Passbild-Block. 78 % Breite, an die rechte Kante
	   gerückt, Bildunterschrift bleibt an der linken Textkante – die Hairline darunter läuft über die ganze Spalte. */
	.bc-portrait { max-width: none; margin-top: 2.5rem; }
	.bc-portrait__bild { width: 78%; margin-left: auto; }
	.bc-portrait::before { inset: 8% -12% 10% 12%; }
	.bc-portrait__text { margin-top: -1rem; }
}

/* =========================================================
   Contact (R3): Text links, stehender Freisteller rechts, Formular unter den Wegen
   ========================================================= */
.bc-contact { overflow: hidden; isolation: isolate; }
.bc-contact .bc-container { position: relative; z-index: 1; }
.bc-contact .bc-kurven { z-index: 0; }
.bc-contact__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 0 clamp(3rem, 6vw, 6rem);
	align-items: start;
}
/* Der Textblock ist unten ausgerichtet: „Let’s talk.“ auf Brusthöhe, die E-Mail auf Höhe der Hände; er behält seinen
   Abstand zum Fuß, die Figur nicht (sie läuft in die Fußlinie) */
.bc-contact__inhalt { align-self: end; padding-bottom: calc(var(--abschnitt) * .7); }
.bc-contact__titel { font-size: var(--schrift-h2-gross); max-width: 18ch; }
.bc-contact__text { max-width: 40ch; margin-top: 1.5rem; font-size: var(--schrift-gross); color: var(--text-2); }
.bc-contact__wege { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; gap: 1.25rem; justify-items: start; }
.bc-contact__mail {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: var(--ziel);
	font-size: var(--schrift-mail);
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--cyan);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.bc-contact__mail .bc-icon { width: .9em; height: .9em; }
.bc-contact__mail span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(30, 235, 209, .45); transition: text-decoration-color var(--dauer) ease; }
.bc-contact__mail:hover span { text-decoration-color: currentColor; }
.bc-contact__linkedin {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: var(--ziel);
	font-weight: 600;
	color: var(--text-2);
	text-decoration: none;
}
.bc-contact__linkedin:hover { color: var(--weiss); }
.bc-contact__linkedin .bc-icon--linkedin { width: 1.15em; height: 1.15em; fill: currentColor; stroke: none; }
.bc-contact__linkedin .bc-icon--extern { width: .9em; height: .9em; color: var(--text-3); }

/* Freisteller (stehend, Dreiviertelfigur) – bewusst anders als das Halbfigur-Foto in How I work: kleiner (≤ 360 px),
   ganze Figur bis zum Oberschenkel, unten weich in Nachtblau ausgeblendet, ruhigerer Glow (.32 statt .55). Die
   Ellbogen liegen am Bildrand, deshalb auch seitlich ein kurzer Verlauf. Der Kopf darf in den oberen Abstand ragen,
   wenn die Textspalte kürzer ist als die Figur. */
.bc-contact__portrait { position: relative; align-self: end; width: 100%; max-width: 360px; margin: calc(var(--abschnitt) * -.3) 0 0; justify-self: end; }
.bc-contact__portrait::before {
	content: '';
	position: absolute;
	inset: 6% -30% 12% -30%;
	background: radial-gradient(ellipse 55% 48% at 50% 38%, rgba(18, 137, 127, .32), rgba(18, 137, 127, .1) 50%, transparent 74%);
	pointer-events: none;
	z-index: 0;
}
.bc-contact__bildkasten {
	position: relative;
	z-index: 1;
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, .5) 86%, transparent 99%), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, #000 70%, rgba(0, 0, 0, .5) 86%, transparent 99%), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-composite: intersect;
}
.bc-contact__bild { width: 100%; height: auto; }
.bc-contact__person { position: relative; z-index: 1; margin-top: -.75rem; padding: 0 0 2rem; font-size: var(--schrift-klein); line-height: 1.5; }
.bc-contact__name { font-weight: 600; color: var(--weiss); }
.bc-contact__rolle { color: var(--text-2); }
.bc-contact__name + .bc-contact__rolle::before { content: '·' / ''; margin: 0 .5rem; color: var(--text-3); }
@media (min-width: 760px) {
	/* Mit Figur endet der Abschnitt ohne eigenen Abstand: das Bild läuft bis zur Hairline des Fußes, der Text behält seinen */
	.bc-contact--portrait { padding-bottom: 0; }
}
@media (max-width: 959.98px) and (min-width: 760px) {
	.bc-contact__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
}
@media (max-width: 759.98px) {
	.bc-contact__raster { grid-template-columns: 1fr; }
	.bc-contact__inhalt { padding-bottom: 0; }
	.bc-contact__wege { margin-top: 2.25rem; gap: .75rem; }
	/* Telefon: Foto unter den Wegen (und dem Formular), höchstens 65 % breit an der rechten Kante, Bildunterschrift
	   rechtsbündig unter dem Bild – an der linken Textkante löste sie sich vom Bild */
	.bc-contact__portrait { max-width: none; margin-top: 3rem; justify-self: stretch; }
	.bc-contact__bildkasten { width: min(65%, 260px); margin-left: auto; }
	.bc-contact__portrait::before { inset: 6% -12% 12% 25%; }
	.bc-contact__person { margin-top: -1rem; padding-bottom: 0; text-align: right; }
}

/* ---------- Kontaktformular (Markup template-parts/kontaktformular.php, Logik inc/kontaktformular.php) ----------
   Hairline-Felder statt Kästen: Label klein SemiBold, Eingabe Light auf einer Datenlinie (--linie-daten, ≥ 3:1 –
   die Linie ist die einzige Kennzeichnung des Feldes), Fokus wie überall (2 px Cyan, Versatz 3 px), Fehler in
   --fehler-farbe mit Meldung am Feld. Name und E-Mail ab 600 px nebeneinander. */
.bc-formular-block {
	max-width: 560px;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--linie);
}
.bc-formular__titel { font-size: var(--schrift-h3); max-width: 24ch; }
.bc-formular { display: grid; gap: 1.5rem 2rem; margin-top: 1.5rem; }
.bc-formular__feld { display: grid; gap: .35rem; min-width: 0; }
.bc-formular__label { font-size: var(--schrift-klein); font-weight: 600; color: var(--text-2); }
.bc-formular__eingabe {
	width: 100%;
	min-height: 48px;
	padding: 1rem 0 .4rem;   /* der Text sitzt nah an der Linie, nicht mittig im 48-px-Feld */
	border: 0;
	border-bottom: 1px solid var(--linie-daten);
	border-radius: 0;
	background: transparent;
	color: var(--weiss);
	font-family: var(--schrift);
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.5;
	transition: border-color var(--dauer) ease;
	-webkit-appearance: none;
	appearance: none;
}
.bc-formular__eingabe::placeholder { color: var(--text-3); opacity: 1; }
.bc-formular__eingabe:hover { border-bottom-color: rgba(255, 255, 255, .5); }
.bc-formular__eingabe:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; border-bottom-color: var(--cyan); }
/* Browser-Autofill färbt die Fläche – auf Nachtblau bleibt sie dunkel, die Schrift weiß */
.bc-formular__eingabe:-webkit-autofill { -webkit-text-fill-color: var(--weiss); -webkit-box-shadow: 0 0 0 1000px var(--nachtblau) inset; caret-color: var(--weiss); }
textarea.bc-formular__eingabe { height: auto; min-height: 0; resize: vertical; }
.bc-formular__fehler { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--fehler-farbe); }
.bc-formular__fehler:empty { display: none; }
.bc-formular__feld--fehler .bc-formular__eingabe { border-bottom-color: var(--fehler-farbe); }
.bc-formular__feld--fehler .bc-formular__label { color: var(--weiss); }
.bc-formular__status {
	margin: 0;
	padding: .85rem 1.1rem;
	border-left: 1px solid var(--cyan);
	background: rgba(255, 255, 255, .03);
	color: var(--weiss);
	line-height: 1.5;
}
.bc-formular__status--fehler { border-left-color: var(--fehler-farbe); }
.bc-formular__status:focus-visible { outline-offset: 4px; }
/* Honigtopf: aus dem Sichtbaren geschoben, nicht display:none (Bots füllen sonst nichts aus) */
.bc-formular__falle { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bc-formular__hinweis { margin: 0; font-size: var(--schrift-klein); color: var(--text-3); max-width: 48ch; }
.bc-formular__hinweis a { color: var(--text-2); }
.bc-formular__hinweis a:hover { color: var(--cyan); }
.bc-formular__knopf { justify-self: start; }
@media (min-width: 600px) {
	.bc-formular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bc-formular > * { grid-column: 1 / -1; }
	/* Name und E-Mail nebeneinander (die ersten beiden Felder), Nachricht darunter über die ganze Breite */
	.bc-formular__feld:nth-of-type(1), .bc-formular__feld:nth-of-type(2) { grid-column: auto; }
	.bc-formular__feld:has(textarea) { grid-column: 1 / -1; }
}

/* =========================================================
   Fuß
   ========================================================= */
.bc-fuss {
	background: var(--nachtblau-tief);
	border-top: 1px solid var(--linie);
	padding: clamp(3rem, 6vw, 5rem) 0 2rem;
	font-size: var(--schrift-klein);
	color: var(--text-2);
}
.bc-fuss__raster {
	display: grid;
	grid-template-columns: 1.2fr 1.4fr .8fr;
	gap: 3rem clamp(2rem, 4vw, 4rem);
}
.bc-fuss__logo { display: inline-flex; align-items: center; min-height: var(--ziel); text-decoration: none; }
.bc-fuss__logo .bc-logo__svg { height: 26px; }
.bc-fuss__tagline { margin-top: .75rem; color: var(--text-2); }
.bc-fuss__essay { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--weiss); font-weight: 600; text-decoration: none; }
.bc-fuss__essay[href]:hover { color: var(--cyan-hell); }
.bc-fuss__essay .bc-chip { min-height: 1.6rem; padding: 0 .65rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--text-3); }
.bc-fuss__also { margin-top: 1rem; max-width: 38ch; color: var(--text-3); }
.bc-fuss__links { list-style: none; display: grid; gap: 0; }
.bc-fuss__links a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: var(--ziel);
	color: var(--text-2);
	text-decoration: none;
}
.bc-fuss__links a:hover { color: var(--weiss); }
.bc-fuss__links .bc-icon { width: .85em; height: .85em; color: var(--text-3); }
.bc-fuss__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie);
	color: var(--text-3);
}
.bc-fuss__zeile p { display: flex; flex-wrap: wrap; gap: .5rem 0; }
/* Der Trennpunkt hängt am folgenden Teil, damit er beim Umbruch nie allein am Zeilenende bleibt */
.bc-fuss__teil + .bc-fuss__teil::before { content: '·' / ''; margin: 0 .6rem; }
.bc-fuss__oben {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: var(--ziel);
	font-weight: 600;
	color: var(--text-2);
	text-decoration: none;
}
.bc-fuss__oben:hover { color: var(--weiss); }
.bc-fuss__oben .bc-icon { width: 1em; height: 1em; transition: transform var(--dauer) ease; }
.bc-fuss__oben:hover .bc-icon { transform: translateY(-2px); }
@media (max-width: 759.98px) {
	.bc-fuss { padding-top: clamp(2.5rem, 8vw, 3.5rem); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
	/* Telefon: drei Gruppen statt einer langen Spalte – Marke, Essay-Hinweis, dann die vier Links als eine Zeile
	   (je 44 px Ziel), darunter Firma · Holding · Jahr neben „Back to top“. */
	.bc-fuss__raster { grid-template-columns: 1fr; gap: 1.75rem; }
	.bc-fuss__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
	/* „Back to top“ rutscht unter die Firmenzeilen (350 px reichen nicht für beides nebeneinander) – der Zeilenabstand
	   bleibt knapp, damit es als Teil derselben Gruppe liest */
	.bc-fuss__zeile { margin-top: 2rem; padding-top: 1.25rem; gap: .25rem 2rem; }
	/* Schmal: jeder Teil in eigener Zeile, ohne Trennpunkte – ein umgebrochenes „·“ stünde sonst allein am Zeilenanfang */
	.bc-fuss__zeile p { display: grid; gap: .15rem; }
	.bc-fuss__teil + .bc-fuss__teil::before { content: none; }
}

/* =========================================================
   Seiten (Imprint, Privacy) und 404
   ========================================================= */
.bc-seite { padding: calc(var(--kopf-hoehe) + clamp(56px, 8vw, 112px)) 0 var(--abschnitt); }
.bc-seite__kopf { padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--linie); }
.bc-seite__titel { font-size: var(--schrift-h2-gross); max-width: 18ch; }
.bc-prosa { color: var(--text-2); }
.bc-prosa h2, .bc-prosa h3, .bc-prosa h4 { color: var(--weiss); margin-top: 2.5em; margin-bottom: .6em; }
.bc-prosa h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.bc-prosa h3 { font-size: var(--schrift-h3); }
.bc-prosa h2:first-child, .bc-prosa h3:first-child { margin-top: 0; }
.bc-prosa p { margin: 0 0 1.1em; }
.bc-prosa ul, .bc-prosa ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.bc-prosa li { margin-bottom: .4em; }
.bc-prosa li::marker { color: var(--cyan); }
.bc-prosa strong { color: var(--weiss); }
.bc-prosa address { font-style: normal; margin: 0 0 1.1em; }
.bc-prosa table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--schrift-klein); }
.bc-prosa th, .bc-prosa td { padding: .6em .75em .6em 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.bc-prosa th { color: var(--weiss); font-weight: 600; }
.bc-prosa a { overflow-wrap: anywhere; }
.bc-404 { min-height: 70vh; }
.bc-404__text { max-width: 44ch; margin: 1.5rem 0 2.5rem; font-size: var(--schrift-gross); color: var(--text-2); }

/* =========================================================
   Wartungsseite (eigenständiges Dokument, gleiche Effekte wie der Hero)
   ========================================================= */
.bc-wartung {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: var(--abschnitt) 0;
	isolation: isolate;
}
.bc-wartung .bc-container { position: relative; z-index: 1; }
.bc-wartung__logo { width: 168px; }
.bc-wartung__logo .bc-logo__svg { width: 100%; height: auto; }
.bc-wartung__titel { margin-top: clamp(2.5rem, 6vw, 4.5rem); max-width: 14ch; }
.bc-wartung__text { max-width: 40ch; margin-top: 1.5rem; font-size: var(--schrift-gross); color: var(--text-2); }
.bc-wartung__mail { display: inline-flex; align-items: center; gap: .5em; min-height: var(--ziel); margin-top: 2.5rem; font-size: var(--schrift-mail); font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.bc-wartung__mail .bc-icon { width: .9em; height: .9em; }
.bc-wartung__mail span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(30, 235, 209, .45); }
.bc-wartung__mail:hover span { text-decoration-color: currentColor; }
.bc-wartung__fuss { display: flex; flex-wrap: wrap; gap: .5rem 0; margin-top: clamp(3rem, 8vw, 6rem); font-size: var(--schrift-klein); color: var(--text-3); }
.bc-wartung__teil + .bc-wartung__teil::before { content: '·' / ''; margin: 0 .6rem; }
.bc-wartung__fuss a { display: inline-block; padding: .35rem 0; margin: -.35rem 0; color: var(--text-2); text-decoration: none; }
.bc-wartung__fuss a:hover { color: var(--weiss); }
@media (max-width: 759.98px) {
	/* Schmal wie im Seitenfuß: je Teil eine Zeile, ohne Trennpunkte */
	.bc-wartung__fuss { display: grid; gap: .25rem; }
	.bc-wartung__teil + .bc-wartung__teil::before { content: none; }
}

/* =========================================================
   Einblenden beim Scrollen – nur mit JavaScript vorbereitet
   ========================================================= */
html.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms var(--reveal-kurve), transform 700ms var(--reveal-kurve);
	transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }

/* =========================================================
   Weniger Bewegung
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
	html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.bc-hero .bc-kicker, .bc-hero__titel, .bc-hero__sub, .bc-hero__aktion { animation: none; }
	.bc-kurven__komet { display: none !important; }
	.bc-kicker::after, .bc-prinzipien::after, .bc-proof .bc-container::after { animation: none !important; }
	.bc-nav__link::after, .bc-nav__link::before { transition: none; }
	/* R3: Wachstumsbild, Weg-Zeile, Kette, Tisch – Funken aus, Knoten im Endzustand (cyan, Glow an), Fortschrittslinie ohne Übergang */
	.bc-hero__wachstum { animation: none; }
	.bc-zahl__weg-funke, .bc-kette__funke, .bc-tisch__funke { display: none !important; animation: none !important; }
	html.js .bc-kette__station::before { background-color: var(--cyan); border-color: var(--cyan); transition: none; }
	html.js .bc-kette__station::after, html.js .bc-tisch__glow { opacity: 1; transition: none; }
	.bc-kopf__fortschritt { transition: none; }
}

/* =========================================================
   Druck: weiß, dunkle Schrift, ohne Effekte und Navigation
   ========================================================= */
@media print {
	:root { --weiss: #0a1230; --text-2: #2b3450; --text-3: #54607a; --linie: #c9ced9; --linie-stark: #9aa3b5; --cyan: #0b6f66; --cyan-hell: #0b6f66; }
	html, body, .bc-abschnitt--flaeche, .bc-fuss { background: #fff !important; color: #0a1230; }
	.bc-kopf, .bc-effekte, .bc-kurven, .bc-craft::before, .bc-portrait::before, .bc-sprunglink, .bc-hero__aktion, .bc-fuss__oben, .bc-kopf__menue { display: none !important; }
	/* R3: Hero-Bild, Funken, Glows und die Fortschrittslinie drucken nicht; die Kachel druckt „2025 $174bn“ + „$260bn“ */
	.bc-hero__wachstum, .bc-zahl__weg-funke, .bc-kette__funke, .bc-tisch__funke, .bc-tisch__glow, .bc-contact__portrait::before, .bc-kopf__fortschritt { display: none !important; }
	.bc-contact__bildkasten { -webkit-mask-image: none; mask-image: none; }
	.bc-hero { min-height: 0; padding-top: 2rem; }
	.bc-abschnitt { padding-block: 2.5rem; }
	html.js [data-reveal] { opacity: 1; transform: none; }
	.bc-hero .bc-kicker, .bc-hero__titel, .bc-hero__sub, .bc-hero__aktion { animation: none; }
	.bc-knopf { background: none; border: 1px solid #0a1230; color: #0a1230; }
	.bc-partner { filter: invert(1) brightness(.2); }
	a { color: #0b6f66; }
	.bc-logo__svg path[fill='#fff'], .bc-logo__svg path[fill='#FFF'], .bc-logo__svg path[fill='#ffffff'] { fill: #0a1230; }
	.bc-portrait__bild { -webkit-mask-image: none; mask-image: none; }
}