/* =========================================================
   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.875rem;       /* Eyebrows über den Überschriften; 08.10.2026 „einen Tick größer“ (vorher 0.8rem) */
	--schrift-etikett: 0.8rem;        /* kleine Etiketten: Scroll down, Stationen der Kette, Index 01–03, Connected to */
	--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: 100px; /* Kundenwunsch 22.09.: höhere Kopfzeile, damit das 65-px-Logo Luft hat (vorher 76 px) */
	--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: 80px; }
}

/* ---------- 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;
}
/* 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, damit sie getrennt vom Inhalt ein- und ausblenden. */
.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)::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; }
@media (max-width: 782px) {
	.admin-bar .bc-kopf { top: 46px; }
}
/* 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 { opacity: 0; }
html:not(.js) .bc-kopf:not(.ist-gescrollt) .bc-kopf__fortschritt { opacity: .8; }   /* ohne JS ist die Kopfzeile immer gedeckt – die Linie läuft dann rein per CSS-Timeline (Spezifität über der :not(.ist-gescrollt)-Regel darüber) */
@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__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: 65px; }
/* Kundenwunsch 22.09.: Logo +70 % gegenüber dem Stand von 38 px (28 → 38 → 65 px). Die Wortmarke trägt ihren
   CI-Schutzraum in der SVG (24 von 120 Einheiten links) – herausgerechnet, damit das „b“ auf der Textkante von
   Kicker und H1 steht. */
.bc-kopf__logo .bc-logo__svg { margin-left: calc(-65px * 24 / 120); }
/* Telefon: 50 px Logo in der 80-px-Kopfzeile, Schutzraum ebenso herausgerechnet. */
@media (max-width: 599.98px) {
	.bc-kopf__logo .bc-logo__svg, .bc-fuss__logo .bc-logo__svg { height: 50px; margin-left: calc(-50px * 24 / 120); }
}
.bc-logo__text { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--weiss); }
/* Claim neben dem Logo (01.10.2026 „Rights-led growth.“, seit 05.10.2026 „Growth, executed.“). Feedback 05.10.:
   „Claim und Logo wirken visuell noch nicht perfekt abgestimmt“ – bis dahin stand der Claim mittig auf der ganzen
   Logobox (mit CI-Schutzraum und Unterlänge des „g“) und damit rund 13 px über der Schriftlinie der Wortmarke, die
   Hairline war kürzer als die Buchstaben. Jetzt ein Lockup aus den Maßen der SVG (viewBox 640 × 120): Grundlinie der
   Wortmarke bei 94/120 der Logohöhe, Oberlänge („b“, „l“) bei 24/120. Der Claim steht auf derselben Grundlinie, die
   Hairline reicht von der Oberlänge bis zur Grundlinie, Schrift im leichten Schnitt wie „consulting“.
   Telefon (unter 760 px): neben Logo und rundem CTA ist kein Platz – der Claim steht unter der Wortmarke, bündig mit
   dem „b“ (Kundenwunsch 05.10.: „Bekommen wir den Claim hier rein?“). */
.bc-kopf__marke {
	--logo: 65px;
	--claim: 1.5rem;
	--claim-unterlaenge: .17em;   /* Outfit: Abstand Grundlinie → Unterkante der Zeile bei line-height 1 (gemessen: 3,0 px bei 18 px) */
	display: flex;
	align-items: flex-end;
	min-width: 0;
}
.bc-kopf__tagline {
	display: none;
	position: relative;
	margin-left: calc(1.25rem - var(--logo) * .62);   /* rechts vom „g“ liegen in der SVG noch ≈ 0,62 × Logohöhe Leerraum */
	margin-bottom: calc(var(--logo) * 26 / 120 - var(--claim-unterlaenge));
	padding-left: 1.25rem;
	font-size: var(--claim);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .005em;
	color: rgba(255, 255, 255, .8);
	white-space: nowrap;
}
.bc-kopf__tagline::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: var(--claim-unterlaenge);
	height: calc(var(--logo) * 70 / 120);
	border-left: 1px solid var(--linie-stark);
}
@media (min-width: 760px) {
	.bc-kopf__tagline { display: block; }
}
@media (max-width: 759.98px) {
	.bc-kopf__marke { flex-direction: column; align-items: flex-start; }
	.bc-kopf__tagline {
		display: block;
		--claim: .8125rem;
		margin: calc(var(--logo) * -26 / 120 + .5rem) 0 0;
		padding: 0;
		letter-spacing: .01em;
		color: var(--text-2);
	}
	.bc-kopf__tagline::before { display: none; }
}
@media (max-width: 599.98px) {
	.bc-kopf__marke { --logo: 50px; }
}

/* CTA (seit 25.09.2026 das einzige Element neben dem Logo – die Navigation ist entfallen). Auf dem Hero der Startseite
   ausgeblendet, solange die Kopfzeile transparent ist: der Hero hat seinen eigenen Knopf, oben steht nur das Logo.
   Mit der gedeckten Kopfzeile (.ist-gescrollt aus theme.js) blendet er ein; ohne JS ist er immer da. visibility nimmt
   ihn im ausgeblendeten Zustand aus der Tab-Reihenfolge. */
.bc-kopf__cta { min-height: var(--ziel); padding-inline: 1.25rem; font-size: .95rem; transition: opacity 300ms ease, visibility 0s linear 0s, background-color var(--dauer) ease, border-color var(--dauer) ease, color var(--dauer) ease; }
.bc-kopf__cta .bc-icon--mail { display: none; width: 1.15em; height: 1.15em; }
html.js .bc-startseite .bc-kopf:not(.ist-gescrollt) .bc-kopf__cta { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
/* Feedback 08.10.2026 „Get in touch nicht mittig zum Logo“: die Logobox steht mittig, ihr optischer Schwerpunkt nicht –
   über die x-Höhe ragen nur „b“, „k“, „l“, „t“, darunter das „g“. Gemessen (Schwerpunkt der Tinte, 1440 px) liegt er bei
   69/120 der Logohöhe statt 60/120; der CTA rückt um 9/120 nach unten und reicht dann genau von der Oberlänge der
   Wortmarke bis zur Unterlänge des „g“. Nur neben dem Claim (ab 760 px, Logo dort immer 65 px); darunter steht der Claim
   unter dem Logo, die Marke ist eine höhere Box und der runde Knopf sitzt schon mittig. */
@media (min-width: 760px) {
	.bc-kopf__cta { position: relative; top: calc(65px * 9 / 120); }
}
/* Telefon: neben dem 50-px-Logo ist kein Platz für den Textknopf – runder 44-px-Knopf mit Brief-Symbol, der Text
   bleibt für Screenreader im Knopf. */
@media (max-width: 599.98px) {
	.bc-kopf__cta { width: var(--ziel); padding: 0; }
	.bc-kopf__cta .bc-icon--mail { display: block; }
	.bc-kopf__cta-text {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* =========================================================
   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; }

/* 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; }
/* Eine Zeile unter der H1 (seit 01.10.2026 „It’s rights-led and must strengthen the sport.“) – eine Zeile auf Desktop */
.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); }
/* „Scroll down“ (05.10.2026, Kunde: „damit für alle klar ist, dass es nach Landing weiter geht – auch mobil“): mittig
   im Band unter dem Horizont der Bühne (theme.js: Horizont bei 86 % der Hero-Höhe, Telefon 93 %) – so kreuzt ihn die
   Wachstumsbahn nie. Kleine Zeile im Kicker-Schnitt, darunter eine Hairline, an der ein Lichtpunkt nach unten läuft (das
   Motiv der Kette). Ein echter Anker auf den nächsten Abschnitt. */
.bc-hero__weiter {
	--weiter-linie: clamp(28px, 4.5svh, 44px);
	position: absolute;
	top: 86%;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: max-content;
	min-width: var(--ziel);
	margin-inline: auto;
	padding: 0 .5rem;
	font-size: var(--schrift-etikett);
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	color: var(--text-3);
	text-decoration: none;
	border-radius: 6px;
	animation: bc-hero-einblenden 900ms var(--reveal-kurve) 900ms both;
	transition: color var(--dauer) ease;
}
.bc-hero__weiter:hover, .bc-hero__weiter:focus-visible { color: var(--cyan); }
.bc-hero__weiter-linie { position: relative; flex: none; width: 9px; height: var(--weiter-linie); }
.bc-hero__weiter-linie::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom, var(--linie-daten), transparent);
}
.bc-hero__weiter-linie::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: radial-gradient(circle, #e9fffb 0 1.4px, rgba(30, 235, 209, .85) 2.2px, rgba(30, 235, 209, .2) 3.6px, transparent 4.5px);
	animation: bc-weiter 2400ms cubic-bezier(.45, 0, .55, 1) 1800ms infinite both;
}
@keyframes bc-weiter {
	0% { transform: translateY(-4px); opacity: 0; }
	15% { opacity: 1; }
	70% { opacity: 1; }
	100% { transform: translateY(calc(var(--weiter-linie) - 5px)); opacity: 0; }
}
/* Telefon: das Band unter dem Horizont ist schmal (7 % der Höhe, 40–60 px) – Zeile und eine kurze Linie */
@media (max-width: 759.98px) {
	.bc-hero__weiter { --weiter-linie: 14px; top: 93%; gap: .3rem; font-size: .72rem; }
}
/* 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 – Wachstumskurve mit dem hellen Kometen ----------
   Seit 25.09.2026 ohne Kennzahlen und Knoten (Kundenfeedback: „die Wachstumsstatistik kann raus“). Die Kurve hängt
   an der rechten Kante des Hero-Containers und ist unten am CTA ausgerichtet; sie ragt in das untere Polster des
   Heros, damit sie unter dem Text „ankommt“ statt neben ihm zu schweben. Position absolut, damit Kicker, H1, Sub und
   CTA exakt an ihrem Platz bleiben. „Minimal geschärft“: Linie Cyan .7 statt .55 und 1,5 statt 1,25, dazu eine
   breite, sehr blasse Lichtkante auf derselben Kurve – die Linie wirkt definierter, ohne dicker zu werden. */
.bc-hero--wachstum { overflow: hidden; }
/* Bühne des Heros (seit 28.09.2026): eine Leinwand über der ganzen Fläche, auf der theme.js das Signet „b“ (seit
   30.09.2026, vorher die Datensphäre) und die Wachstumsbahn zeichnet. Sie liegt über Raster und Glow, aber unter dem Text (.bc-container hat z-index 1). */
.bc-hero__buehne {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	animation: bc-hero-einblenden 1200ms var(--reveal-kurve) both;
	animation-delay: 380ms;
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .5) 30%, #000 58%);
	mask-image: linear-gradient(to right, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .5) 30%, #000 58%);
}
@media (max-width: 759.98px) {
	/* Telefon: das Signet steht rechts neben dem CTA (theme.js misst ihn); die Maske blendet nur den oberen Teil aus,
	   damit der Stamm auf Höhe des CTA schon voll steht. */
	.bc-hero__buehne {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .3) 30%, #000 52%);
		mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .3) 30%, #000 52%);
	}
}

/* =========================================================
   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__titel { max-width: 18ch; font-size: var(--schrift-h2-gross); }
/* Neufassung 25.09.2026 (craft.php): eine linke Achse – Konsens leise, Einleitung weiß, die Entscheidungen als
   Treppe nach rechts unten, die Folge in zwei Zeilen (die zweite leiser), dann zurück an der Achse die These groß in
   Cyan. Nur Typografie, Einzug und eine Hairline – keine Icons (Kundenwunsch). */
.bc-craft__text {
	--stufe-breite: clamp(1.1rem, 4.4vw, 4.25rem);   /* Einzug je Stufe: 1440 → 63 px, 390 → 18 px */
	max-width: 62rem;
	margin-top: clamp(3rem, 6vw, 5.5rem);
	font-size: var(--schrift-gross);
	line-height: 1.5;
	color: var(--text-2);
}
.bc-craft__konsens { max-width: 38ch; }
.bc-craft__darunter { max-width: 38ch; margin-top: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; color: var(--weiss); }

/* Treppe: jede Stufe um --stufe-breite weiter eingerückt; links ein Knoten (wie in der Kette), von ihm eine Diagonale
   zum Knoten der nächsten Stufe – gedehnt auf Stufenbreite × (Zeilenhöhe + Abstand), non-scaling-stroke hält 1 px.
   Die Linie steigt ab: Gegenstück zur steigenden Kurve im Hero. */
.bc-treppe {
	--stufe-abstand: clamp(1.1rem, 2vw, 1.6rem);
	--knoten-y: .62em;   /* Mitte der ersten Textzeile */
	display: grid;
	gap: var(--stufe-abstand);
	margin: clamp(2rem, 3.5vw, 3rem) 0 0;
	list-style: none;
	font-size: clamp(1.3rem, 2.3vw, 2.05rem);
	font-weight: 300;
	line-height: 1.24;
	letter-spacing: -0.01em;
	color: var(--weiss);
}
.bc-treppe__stufe {
	position: relative;
	margin-left: calc(var(--stufe) * var(--stufe-breite));
	padding-left: calc(var(--knoten) + clamp(.9rem, 1.4vw, 1.25rem));
	max-width: 30ch;
}
/* Knoten: 6 px Cyan mit Glow als radialer Verlauf (Kette-Spezifikation, kein Schatten) */
.bc-treppe__stufe::before, .bc-treppe__stufe::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.bc-treppe__stufe::before {
	left: 0;
	top: calc(var(--knoten-y) - var(--knoten) / 2);
	width: var(--knoten);
	height: var(--knoten);
	background: var(--cyan);
}
.bc-treppe__stufe::after {
	left: calc(var(--knoten) / 2 - 14px);
	top: calc(var(--knoten-y) - 14px);
	width: 28px;
	height: 28px;
	background: radial-gradient(circle, rgba(30, 235, 209, .38), rgba(30, 235, 209, .12) 45%, transparent 70%);
}
.bc-treppe__weg {
	position: absolute;
	left: calc(var(--knoten) / 2);
	top: var(--knoten-y);
	width: var(--stufe-breite);
	height: calc(100% + var(--stufe-abstand));
	overflow: visible;
	pointer-events: none;
	transform-origin: 0 0;
}
.bc-treppe__weg path { fill: none; stroke: var(--linie-wachstum); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Mit JS: die Stufe erscheint (theme.js staffelt gleichzeitig sichtbare Stufen), gleitet von links in ihren Einzug;
   die Linie zur nächsten Stufe zieht sich danach (scale von ihrem Knoten aus). */
html.js .bc-treppe__stufe[data-reveal] { transform: translate(-14px, 8px); }
html.js .bc-treppe__stufe[data-reveal].ist-sichtbar { transform: none; }
html.js .bc-treppe__weg { transform: scale(0); transition: transform 650ms var(--funke-kurve); transition-delay: calc(var(--reveal-delay, 0ms) + 320ms); }
html.js .bc-treppe__stufe.ist-sichtbar .bc-treppe__weg { transform: none; }

.bc-craft__folge { display: grid; gap: .15rem; max-width: 46ch; margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--weiss); }
.bc-craft__folge-zeile--leise { color: var(--text-3); }

/* These – seit 05.10.2026 ein eigener Moment (Kunde: „abgehobener … ein gewisser ‚Ah – das ist es‘-Moment“; die These
   „That’s growth, designed and executed.“ schließt die Brücke zum Claim „Growth, executed.“ in der Kopfzeile):
   zurück an der Achse, ohne Trennlinie, mit viel Luft und größer als jede Überschrift außer der H1. Mit JS steht sie
   zuerst blass auf der Fläche und zündet, wenn sie die Bildschirmmitte erreicht (theme.js setzt .ist-gezuendet): ein
   Lichtlauf geht Zeile für Zeile durch die Worte – vorn ein fast weißer Kopf, dahinter bleibt Cyan, wie der Komet im
   Hero das Signet zündet –, zuletzt leuchtet der Schlusspunkt als Knoten auf (Glow wie die Knoten der Treppe), ein
   weicher Kernschein blüht hinter der These auf, dann erscheint der Nachsatz. Ohne JS und bei reduzierter Bewegung
   steht alles fertig da. */
.bc-craft__schluss { position: relative; margin-top: clamp(5rem, 11vw, 10rem); padding-bottom: clamp(1rem, 2vw, 2rem); }
.bc-craft__schluss::before {
	content: '';
	position: absolute;
	left: -12%;
	top: -35%;
	z-index: -1;
	width: min(110%, 72rem);
	aspect-ratio: 2;
	background: radial-gradient(closest-side, rgba(30, 235, 209, .16), rgba(18, 137, 127, .07) 55%, transparent 78%);
	pointer-events: none;
}
.bc-craft__these {
	font-size: clamp(2.6rem, 6.4vw, 6rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--cyan);
}
/* Unterlängen: bei line-height 1 endet die Zeile 0,13em unter der Grundlinie, das „g“ von Outfit reicht 0,218em tiefer –
   die Textmaske (background-clip: text) malt nur im Kasten der Zeile, ohne Polster fehlte dem „g“ der Bogen
   (Rückmeldung 07.10.2026). Polster unten, gleich viel negativer Rand: Zeilenabstand bleibt. */
.bc-craft__these-zeile { display: block; padding-bottom: .2em; margin-bottom: -.2em; }
.bc-craft__punkt { position: relative; }
/* Knoten am Schlusspunkt: Glow wie an den Stufen der Treppe, nur größer */
.bc-craft__punkt::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: .06em;
	width: 1.1em;
	height: 1.1em;
	margin: 0 0 -.47em -.55em;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 235, 209, .55), rgba(30, 235, 209, .16) 40%, transparent 70%);
	pointer-events: none;
}
.bc-nobr { white-space: nowrap; }   /* Wörter mit Bindestrich brechen nie am Bindestrich (craft.php) */
.bc-craft__nachsatz { max-width: 40ch; margin-top: clamp(1.5rem, 2.6vw, 2.25rem); font-size: var(--schrift-gross); font-weight: 600; line-height: 1.45; color: var(--weiss); }
html.js .bc-craft__these[data-zuenden] .bc-craft__these-zeile {
	background-image: linear-gradient(100deg, var(--cyan) 0%, var(--cyan) 40%, #e9fffb 47%, rgba(255, 255, 255, .13) 55%, rgba(255, 255, 255, .13) 100%);
	background-size: 260% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: background-position 1150ms cubic-bezier(.45, 0, .25, 1) calc(150ms + var(--zeile, 0) * 750ms);
}
/* Der Punkt ist positioniert (Glow) – Chrome nimmt positionierte Kinder nicht in die Textmaske der Zeile auf, also
   färbt er sich selbst: blass wie die These, mit dem Knoten zuletzt in Cyan */
html.js .bc-craft__these[data-zuenden] .bc-craft__punkt { -webkit-text-fill-color: rgba(255, 255, 255, .13); transition: -webkit-text-fill-color 500ms ease 1650ms; }
html.js .bc-craft__these[data-zuenden] .bc-craft__punkt::after { opacity: 0; transform: scale(.4); transition: opacity 700ms ease 1750ms, transform 900ms cubic-bezier(.2, .9, .3, 1.4) 1750ms; }
html.js .bc-craft__schluss:has([data-zuenden])::before { opacity: 0; transition: opacity 1800ms ease 1200ms; }
html.js .bc-craft__schluss:has([data-zuenden]) .bc-craft__nachsatz { opacity: 0; transform: translateY(10px); transition: opacity 800ms var(--reveal-kurve) 2100ms, transform 800ms var(--reveal-kurve) 2100ms; }
html.js .bc-craft__these.ist-gezuendet .bc-craft__these-zeile { background-position: 0 0; }
html.js .bc-craft__these.ist-gezuendet .bc-craft__punkt { -webkit-text-fill-color: var(--cyan); }
html.js .bc-craft__these.ist-gezuendet .bc-craft__punkt::after { opacity: 1; transform: none; }
html.js .bc-craft__schluss:has(.ist-gezuendet)::before { opacity: 1; }
html.js .bc-craft__schluss:has(.ist-gezuendet) .bc-craft__nachsatz { opacity: 1; transform: none; }
@media (max-width: 599.98px) {
	.bc-treppe__stufe { max-width: none; }
}

.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__name + .bc-station__rolle { margin-top: .2rem; }   /* ohne die Zeile darunter (25.09.) gehören Name und Rolle zusammen */
/* Schlusssatz nach der Kette (25.09.2026): erster Satz weiß, der Rest leiser – eine Zeile Beleg, kein Absatz */
.bc-proof__schluss { max-width: 52ch; margin-top: clamp(2.5rem, 4.5vw, 4rem); font-size: var(--schrift-gross); line-height: 1.5; color: var(--text-2); }
.bc-proof__schluss strong { font-weight: 600; color: var(--weiss); }
.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-etikett);
	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 (05.10.2026, Kunde: „horizontal wie in der Desktop-Version“; bis dahin senkrecht): dieselbe waagerechte
   Linie, die Worte kleiner und enger, damit sechs nebeneinander passen. Unter 380 px reicht eine Spalte nicht für
   „Non-live“ – dort stehen die geraden Worte über der Linie, die ungeraden darunter (jedes hat dann zwei Spalten Platz). */
@media (max-width: 599.98px) {
	.bc-kette { margin-top: 2.75rem; }
	.bc-kette__station { padding-top: calc(var(--kette-knoten) + .75rem); padding-right: .2rem; font-size: .72rem; letter-spacing: .02em; white-space: nowrap; }
}
@media (max-width: 379.98px) {
	.bc-kette { margin-top: 4.25rem; }
	.bc-kette__station:nth-child(even) { padding-top: 0; transform: translateY(calc(-100% - .75rem)); }
	.bc-kette__station:nth-child(even)::before { top: auto; bottom: calc(-.75rem - var(--kette-knoten)); }
	.bc-kette__station:nth-child(even)::after { top: auto; bottom: calc(-.75rem - var(--kette-knoten) / 2 - 14px); }
}
/* ---------- Proof – Bildband (22.09.) ----------
   Leere Tribüne im Dämmerlicht (Navy-Duotone aus der Pipeline), volle Breite, Höhe clamp(220px, 30vw, 400px), oben und
   unten per Maske in die Fläche ausgeblendet; darüber das Raster des Hero (gleiches Muster, 72 px) und eine flache
   Kurve mit einem fernen Kometen (kurven.php „proof“). Stimmung, kein Hero: die Kette darüber und der Tisch darunter
   bleiben die Blickfänge. Das negative untere Polster zieht das Band in den Abschnittsabstand, damit unter dem
   ausgeblendeten Rand nicht noch einmal ein ganzer Abstand folgt. */
.bc-proof__band {
	position: relative;
	height: clamp(220px, 30vw, 400px);
	margin: calc(var(--abschnitt) * .6) 0 calc(var(--abschnitt) * -.45);
	overflow: hidden;
	isolation: isolate;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 36%, #000 64%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 36%, #000 64%, transparent);
}
/* Opazität .82: das Bild sinkt in die Fläche, statt als eigener Block zu stehen (die Fläche scheint durch) */
.bc-proof__band-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
	opacity: .82;
}
.bc-proof__band-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;
}
.bc-proof__band .bc-kurven__kurve { stroke: var(--cyan); opacity: .16; }
@media (max-width: 759.98px) {
	.bc-proof__band { height: 200px; margin-top: calc(var(--abschnitt) * .5); }
}

/* ---------- Proof – Variante mit Foto (01.10.2026, ?variante=b, proof.php) ----------
   Links Kopf, Stationen als Liste untereinander (Logo links in fester Spalte, Name und Rolle rechts – Hairlines wie die
   Prinzipien von „How I work“, das in dieser Variante entfällt), Kette und Schlusssatz; rechts das Foto (wie in „How I
   work“, 440 px). Unter 900 px eine Spalte, das Foto zuletzt; unter 760 px gelten die Telefonregeln der Stationen. */
/* Der Glow hinter dem Foto ragt auf dem Telefon über den Rand (wie in „How I work“) – nur waagerecht abschneiden,
   senkrecht muss das Bildband unten in den nächsten Abschnitt auslaufen dürfen. */
.bc-proof--foto { overflow-x: clip; }
.bc-proof__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: 0 clamp(3rem, 6vw, 6rem);
	align-items: end;
}
@media (max-width: 899.98px) {
	.bc-proof__raster { grid-template-columns: 1fr; }
}
@media (min-width: 760px) {
	.bc-proof--foto .bc-stationen { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--linie-stark); }
	.bc-proof--foto .bc-station {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		grid-template-rows: 1fr auto auto 1fr;   /* Name und Rolle als Paar mittig neben dem Logo */
		column-gap: clamp(1.5rem, 3vw, 2.5rem);
		min-height: 112px;
		padding: 1.25rem 0;
		border-top: 0;
		border-bottom: 1px solid var(--linie);
	}
	.bc-proof--foto .bc-station__logo { grid-row: 1 / -1; align-items: center; height: 72px; }
	.bc-proof--foto .bc-station__name { grid-row: 2; grid-column: 2; margin-top: 0; }
	.bc-proof--foto .bc-station__rolle { grid-row: 3; grid-column: 2; }
	.bc-proof--foto .bc-kette { margin-top: clamp(3rem, 5vw, 4.5rem); }
}

@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); }
}

/* =========================================================
   The system (25.09.2026, ersetzt „Who I work with“) – template-parts/abschnitte/clients.php
   Links die Karte, rechts (unter 960 px darunter) das Feld des aktiven Knotens; alle Felder liegen in einer
   Rasterzelle übereinander, der Rahmen hat also immer die Höhe des längsten Feldes – beim Wechsel springt nichts.
   Mit JavaScript ist die Karte ein Raum (.ist-raum, seit 29.09.2026, Vorlage des Kunden „The System v6“): Canvas-
   Ebenen hinter dem ganzen Abschnitt, Wege und Kugeln in einer SVG, die Knoten setzt theme.js in Pixeln. Ohne JS:
   SVG mit Kanten und HTML-Knoten an denselben Prozentpunkten (Kasten im Seitenverhältnis der viewBox), alle Felder
   untereinander, die Knoten sind Sprunglinks.
   ========================================================= */
.bc-system { overflow: hidden; isolation: isolate; }
.bc-system__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3rem);
	margin-top: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 960px) {
	.bc-system__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
}
.bc-system__karte { position: relative; aspect-ratio: 1000 / 700; }
.bc-system__netz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bc-system__netz--hoch { display: none; }
@media (max-width: 759.98px) {
	.bc-system__karte { aspect-ratio: 600 / 760; }
	.bc-system__netz--breit { display: none; }
	.bc-system__netz--hoch { display: block; }
}
/* Kanten (ohne JS): im Ruhezustand Hairline, die des aktiven Knotens in Cyan (Datenlinie) */
.bc-system__kante {
	fill: none;
	stroke: rgba(255, 255, 255, .22);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	transition: stroke var(--dauer) ease, stroke-width var(--dauer) ease;
}
.bc-system__kante.ist-aktiv { stroke: rgba(30, 235, 209, .85); stroke-width: 1.5; }
.bc-system__feldrand { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; transition: stroke var(--dauer) ease; }
.bc-system__netz.ist-zentrum .bc-system__feldrand { stroke: rgba(30, 235, 209, .6); }

/* Außenknoten: ein 44-px-Zielfeld mit dem Ring in der Mitte (liegt exakt auf dem Kantenpunkt) und die Beschriftung
   darunter bzw. darüber. translate schiebt das Element so, dass die Mitte des Zielfelds auf --x/--y liegt. */
.bc-system__knoten {
	position: absolute;
	z-index: 1;
	left: var(--x-b);
	top: var(--y-b);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--weiss);
	border-radius: 6px;
	transform: translate(-50%, -22px);
	-webkit-tap-highlight-color: transparent;
}
.bc-system__knoten--b-oben { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 22px)); }
@media (max-width: 759.98px) {
	.bc-system__knoten { left: var(--x-h); top: var(--y-h); }
	.bc-system__knoten--b-oben { flex-direction: column; transform: translate(-50%, -22px); }
	.bc-system__knoten--h-oben { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 22px)); }
}
.bc-system__knoten:hover { color: var(--weiss); }
.bc-system__knoten, .bc-system__zentrum { cursor: pointer; }   /* mit JS ohne href (Tabs) – der Zeiger bleibt eine Hand */
.bc-system__punkt { position: relative; display: grid; place-items: center; flex: none; width: var(--ziel); height: var(--ziel); }
.bc-system__punkt::before {
	content: '';
	position: relative;
	z-index: 1;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	/* Vorlage des Kunden: gefüllte, leuchtende Punkte – der frühere Ring wirkte zusammen mit den Kanten wie ein Sternbild. */
	border: 0;
	border-radius: 50%;
	background: rgba(30, 235, 209, .55);
	transition: background-color var(--dauer) ease, border-color var(--dauer) ease, transform var(--dauer) ease;
}
.bc-system__punkt::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 235, 209, .4), rgba(30, 235, 209, .12) 45%, transparent 70%);
	opacity: .5;
	transition: opacity var(--dauer) ease;
}
.bc-system__knoten:hover .bc-system__punkt::before { background: var(--cyan-hell); transform: scale(1.12); }
.bc-system__knoten.ist-nachbar .bc-system__punkt::after { opacity: .55; }
.bc-system__knoten.ist-aktiv .bc-system__punkt::before { background: var(--cyan); transform: scale(1.2); }
.bc-system__knoten.ist-aktiv .bc-system__punkt::after { opacity: 1; }
.bc-system__label { display: grid; gap: .1rem; width: max-content; max-width: 14.5rem; padding: 0 .25rem; }
.bc-system__titel { font-size: clamp(.95rem, 1.15vw, 1.08rem); font-weight: 600; line-height: 1.25; transition: color var(--dauer) ease; }
.bc-system__sub { font-size: .82rem; font-weight: 300; line-height: 1.3; color: var(--text-2); }
.bc-system__knoten.ist-aktiv .bc-system__titel, .bc-system__zentrum.ist-aktiv .bc-system__titel { color: var(--cyan); }
@media (max-width: 759.98px) {
	/* Telefon: nur die Titel – der Untertitel steht im Feld darunter */
	.bc-system__sub { display: none; }
	.bc-system__label { max-width: 7.5rem; }
	.bc-system__titel { font-size: .92rem; }
}

/* Zentrum (ohne JS): Lichtfeld (radialer Markenverlauf), gestrichelter Rand in der SVG, in der Mitte ein Punkt,
   darunter Name und Untertitel */
.bc-system__zentrum {
	position: absolute;
	left: var(--x-b);
	top: var(--y-b);
	width: var(--d-b);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	text-decoration: none;
	color: var(--weiss);
	-webkit-tap-highlight-color: transparent;
}
@media (max-width: 759.98px) {
	.bc-system__zentrum { left: var(--x-h); top: var(--y-h); width: var(--d-h); }
}
.bc-system__zentrum::before {
	content: '';
	position: absolute;
	inset: -14%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(18, 137, 127, .5), rgba(18, 137, 127, .16) 52%, transparent 72%);
	transition: opacity var(--dauer) ease;
	opacity: .85;
	pointer-events: none;
}
.bc-system__zentrum:hover::before, .bc-system__zentrum.ist-aktiv::before { opacity: 1; background: radial-gradient(circle, rgba(30, 235, 209, .34), rgba(18, 137, 127, .2) 52%, transparent 72%); }
.bc-system__zentrum:focus-visible { outline-offset: 6px; border-radius: 50%; }
.bc-system__zentrum-punkt { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--weiss); }
.bc-system__zentrum .bc-system__label { position: absolute; left: 50%; top: calc(50% + 16px); transform: translateX(-50%); text-align: center; }

.bc-system__hinweis { margin-top: 1rem; font-size: var(--schrift-klein); color: var(--text-3); }
@media (min-width: 760px) {
	.bc-system__hinweis { text-align: center; }
}

/* ---------- Raum (theme.js, .ist-raum) ----------
   Vorlage des Kunden „The System v6“: sieben Canvas-Ebenen hinter dem ganzen Abschnitt (40 px Überstand, damit die
   Unschärfe am Rand nicht abreißt), rechts ein Schleier unter dem Feld, darüber die SVG mit Wegen und Kugeln. Die
   Knoten-Links sitzen mit ihrem Zielfeld mittig auf dem projizierten Punkt, die Beschriftung daneben je nach Lage
   (data-lage, --abstand aus theme.js). Bis zum ersten Bild (.ist-bereit) sind die Knoten unsichtbar. Zweispaltig
   erst ab 1100 px wie in der Vorlage – darunter hätte der Raum neben dem Feld keinen Platz für die Beschriftungen. */
.bc-system > .bc-container { position: relative; z-index: 1; }
.bc-system__raum {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1200ms var(--reveal-kurve);
}
.bc-system__raum.ist-da { opacity: 1; }
.bc-system__raum canvas { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px); }
.bc-system__schleier { display: none; }
@media (min-width: 1100px) {
	.bc-system__schleier {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 42%;
		background: linear-gradient(90deg, rgba(6, 11, 30, 0) 0%, rgba(6, 11, 30, .74) 22%, rgba(6, 11, 30, .84) 100%);
	}
}
.bc-system.ist-raum .bc-abschnitt__kopf { text-shadow: 0 0 24px var(--nachtblau); }
.bc-system.ist-raum .bc-system__netz { display: none; }
.bc-system.ist-raum .bc-system__karte { aspect-ratio: auto; height: clamp(520px, 44vw, 640px); }
@media (max-width: 1099.98px) {
	.bc-system.ist-raum .bc-system__raster { grid-template-columns: minmax(0, 1fr); }
	.bc-system.ist-raum .bc-system__karte { height: 560px; }   /* v8: 560 statt 600 */
}
@media (max-width: 759.98px) {
	.bc-system.ist-raum .bc-system__karte { height: 350px; }
}
.bc-system.ist-raum .bc-system__buehne { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.bc-system.ist-gezogen .bc-system__buehne { cursor: grabbing; }
.bc-system__raumnetz { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.bc-system__raumnetz circle, .bc-system__raumnetz path { transition: opacity 320ms cubic-bezier(.65, 0, .35, 1); }
.bc-system__raumnetz .bc-system__weg { transition: opacity 360ms cubic-bezier(.65, 0, .35, 1); }
.bc-system.ist-raum:not(.ist-bereit) .bc-system__knoten, .bc-system.ist-raum:not(.ist-bereit) .bc-system__zentrum { visibility: hidden; }
.bc-system.ist-raum .bc-system__knoten { display: block; width: var(--ziel); height: var(--ziel); border-radius: 50%; transform: translate(-50%, -50%); }
.bc-system.ist-raum .bc-system__punkt, .bc-system.ist-raum .bc-system__zentrum::before, .bc-system.ist-raum .bc-system__zentrum-punkt { display: none; }
.bc-system.ist-raum .bc-system__label {
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: none;
	white-space: nowrap;
	text-shadow: 0 0 10px var(--nachtblau), 0 0 18px var(--nachtblau);
}
.bc-system.ist-raum .bc-system__titel { font-size: clamp(.94rem, 1.3vw, 1.125rem); }
.bc-system.ist-raum .bc-system__sub { font-size: clamp(.75rem, 1vw, .875rem); }
/* Lagen nach v8 (theme.js setzt data-lage): o = mittig darüber, ol/or = darüber, zur Außenseite (Kante 10 px neben dem
   Punkt), r/l = seitlich, u = darunter */
.bc-system.ist-raum [data-lage='o'] .bc-system__label { transform: translate(-50%, calc(-100% - var(--abstand))); }
.bc-system.ist-raum [data-lage='ol'] .bc-system__label { transform: translate(calc(-100% - 6px), calc(-100% - var(--abstand))); }
.bc-system.ist-raum [data-lage='or'] .bc-system__label { transform: translate(6px, calc(-100% - var(--abstand))); }
.bc-system.ist-raum [data-lage='r'] .bc-system__label { transform: translate(var(--abstand), -50%); text-align: left; }
.bc-system.ist-raum [data-lage='l'] .bc-system__label { transform: translate(calc(-100% - var(--abstand)), -50%); text-align: right; }
.bc-system.ist-raum [data-lage='u'] .bc-system__label { transform: translate(-50%, var(--abstand)); }
/* Nicht mit dem gewählten Knoten verbunden: Beschriftung tritt zurück (v8: 0,42 – hier 0,6 und der Untertitel heller,
   damit Titel und Untertitel über 4,5 : 1 bleiben; es sind bedienbare Tabs) */
.bc-system.ist-raum .bc-system__knoten .bc-system__label { transition: opacity 360ms cubic-bezier(.65, 0, .35, 1); }
.bc-system.ist-raum .bc-system__knoten:not(.ist-aktiv):not(.ist-nachbar):not(:hover):not(:focus-visible) .bc-system__label { opacity: .6; }
.bc-system.ist-raum .bc-system__knoten:not(.ist-aktiv):not(.ist-nachbar) .bc-system__sub { color: rgba(255, 255, 255, .8); }
.bc-system.ist-raum .bc-system__zentrum { aspect-ratio: auto; }
.bc-system.ist-raum .bc-system__zentrum .bc-system__label { transform: translate(-50%, var(--abstand)); }
.bc-system.ist-raum .bc-system__zentrum .bc-system__titel { font-size: clamp(1rem, 1.45vw, 1.25rem); }
@media (max-width: 759.98px) {
	.bc-system.ist-raum .bc-system__titel { font-size: .875rem; }
	.bc-system.ist-raum .bc-system__zentrum .bc-system__titel { font-size: .95rem; }
}
/* Zweispaltig ohne Linie über dem Feld (Vorlage); einspaltig liegt das Feld auf der Wolke: eigener dunkler Grund */
.bc-system.ist-raum .bc-system__felder { border-top: 0; }
@media (max-width: 1099.98px) {
	.bc-system.ist-raum .bc-system__felder { padding: clamp(1.5rem, 5vw, 2rem); border-radius: 20px; background: rgba(6, 11, 30, .8); }
}

/* Feld: Hairline-Rahmen wie vorher der „Tisch“; Titel, Untertitel, nummerierte Punkte (01 02 03 aus einem Zähler) */
.bc-system__felder {
	display: grid;
	/* Ohne Kasten (Vorlage des Kunden vom 28.09.): nur eine Hairline oben, der Rest ist Luft. */
	padding: clamp(1.5rem, 2.5vw, 2rem) 0 clamp(1.5rem, 2.5vw, 2rem);
	border-top: 1px solid rgba(30, 235, 209, .45);
}
/* Jedes Feld ist eine Spalte: Titel oben, „Connected to“ unten am Rahmen – kurze Felder wirken so gesetzt, nicht leer */
.bc-system__feld { display: flex; flex-direction: column; }
html.js .bc-system__feld { grid-area: 1 / 1; visibility: hidden; }
html.js .bc-system__feld.ist-aktiv { visibility: visible; }
html:not(.js) .bc-system__feld + .bc-system__feld { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.bc-system__feld { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.bc-system__feld-titel { font-size: var(--schrift-h3); }
.bc-system__feld-sub { margin-top: .35rem; color: var(--text-2); }
/* Leitzeile (05.10.2026, v8): fett und weiß zwischen Untertitel und den nummerierten Zeilen */
.bc-system__feld-lead { margin-top: 1.5rem; max-width: 30ch; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 600; line-height: 1.35; color: var(--weiss); text-wrap: pretty; }
.bc-system__feld-lead + .bc-system__punkte { margin-top: 2rem; }
.bc-system__punkte {
	margin-top: 1.75rem;
	padding-top: .25rem;
	border-top: 1px solid var(--linie);
	list-style: none;
	counter-reset: bc-punkt;
}
.bc-system__punkte li {
	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-system__punkte li + li { border-top: 1px solid var(--linie); }
/* Index „01 02 03“: nur visuell (alternativer Text leer) */
.bc-system__punkte li::before {
	counter-increment: bc-punkt;
	content: counter(bc-punkt, decimal-leading-zero) / '';
	font-size: var(--schrift-etikett);
	font-weight: 600;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
	color: var(--cyan);
}
.bc-system__verbunden { margin-top: auto; padding-top: 1.75rem; }
.bc-system__verbunden-label { font-size: var(--schrift-etikett); font-weight: 600; letter-spacing: .14em; color: var(--text-3); }
.bc-system__verbunden-liste { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; list-style: none; }
.bc-system__verbunden-liste .bc-chip { min-height: 1.9rem; padding: .15rem .8rem; font-size: .82rem; }
@media (max-width: 599.98px) {
	.bc-system__felder { padding: 1.5rem 1.25rem 1.6rem; }
	.bc-system__punkte { margin-top: 1.25rem; }
	.bc-system__punkte li { padding: .8rem 0; grid-template-columns: 2.2rem minmax(0, 1fr); }
}

/* =========================================================
   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 – seit 25.09.2026 kompakt (Kundenfeedback „wirkt aufgeblasen“): zwei Spalten ab 900 px – links Kopf,
   Satz, E-Mail, LinkedIn; rechts das Formular. Keine Bildtafel mehr, E-Mail in Lesegröße statt Display-Größe,
   H2 in normaler Abschnittsgröße. Die Kurven dahinter bleiben (Klammer zum Hero).
   ========================================================= */
.bc-contact { overflow: hidden; isolation: isolate; padding-bottom: calc(var(--abschnitt) * .8); }
.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); gap: 0; }
@media (min-width: 900px) {
	.bc-contact__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
}
.bc-contact__text { max-width: 34ch; margin-top: 1.25rem; font-size: var(--schrift-gross); color: var(--text-2); }
.bc-contact__wege { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: .35rem; justify-items: start; }
.bc-contact__mail {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	min-height: var(--ziel);
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	font-weight: 300;
	line-height: 1.2;
	color: var(--cyan);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.bc-contact__mail .bc-icon { width: 1em; height: 1em; }
.bc-contact__mail span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; 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); }
/* Das Formular steht rechts ohne eigene Trennlinie; auf schmalen Bildschirmen (untereinander) trennt die Hairline */
.bc-contact .bc-formular-block { max-width: 640px; margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 899.98px) {
	.bc-contact .bc-formular-block { margin-top: clamp(2.5rem, 7vw, 3.25rem); padding-top: clamp(1.75rem, 5vw, 2.25rem); border-top: 1px solid var(--linie); }
}

/* ---------- 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; }
/* scroll-margin-top 18 px: Ein Sprung auf #contact-form (PRG-Antwort, Admin-Link) wird berechnet, solange der Block
   [data-reveal] noch um 18 px nach unten verschoben ist – ohne Ausgleich läge der Anfang danach unter der Kopfzeile. */
.bc-formular { display: grid; gap: 1.5rem 2rem; margin-top: 1.5rem; scroll-margin-top: 18px; }
.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; }
}
/* Versand ohne Neuladen (theme.js): Während des Sendens ist der Knopf gesperrt und trägt den Text data-sendet, das
   Formular aria-busy. Nach dem Erfolg bleibt vom Formular nur die Meldung (role=status) und der Textknopf „Send another
   message“ (.bc-formular__nochmal, ein <button>, weil er die Seite nicht verlässt) – die Felder sind ausgeblendet, das
   Formular selbst bleibt im DOM. Eine per Skript eingesetzte Meldung blendet kurz ein (bei reduzierter Bewegung 1 ms
   über die globale Regel unten). */
.bc-formular.ist-sendend .bc-formular__knopf { opacity: .7; cursor: progress; }
.bc-formular.ist-sendend .bc-formular__knopf:hover { background: var(--cyan); border-color: var(--cyan); }
.bc-formular.ist-sendend .bc-formular__knopf .bc-icon--pfeil { transform: none; }
.bc-formular__status.ist-neu { animation: bc-status-einblenden 300ms var(--reveal-kurve) both; }
@keyframes bc-status-einblenden {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}
.bc-formular--gesendet > *:not(.bc-formular__status):not(.bc-formular__nochmal) { display: none; }
.bc-formular__nochmal {
	justify-self: start;
	min-height: var(--ziel);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-2);
	font-weight: 600;
	font-size: var(--schrift-klein);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
}
.bc-formular__nochmal:hover { color: var(--cyan); }

/* Contact Form 7 (seit 09.10.2026, inc/kontaktformular.php): dasselbe Markup wie oben in den Feldern; hier nur, was das
   Plugin dazugibt. Seine eigenen Stile sind abgeschaltet (wpcf7_load_css). */
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7-form-control-wrap { display: block; position: relative; }
.wpcf7-form .wpcf7-not-valid { border-bottom-color: var(--fehler-farbe); }
.wpcf7-not-valid-tip { display: block; margin-top: .35rem; font-size: .9rem; line-height: 1.4; color: var(--fehler-farbe); }
.wpcf7-form .wpcf7-response-output {
	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;
}
.wpcf7-form.init .wpcf7-response-output,
.wpcf7-form.resetting .wpcf7-response-output,
.wpcf7-form.submitting .wpcf7-response-output { display: none; }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { border-left-color: var(--fehler-farbe); }
.wpcf7-spinner { display: none; }
.wpcf7-form.submitting .bc-formular__knopf { opacity: .7; cursor: progress; }
.wpcf7-form.submitting .bc-formular__knopf .bc-icon--pfeil { transform: none; }

/* =========================================================
   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: 58px; margin-left: calc(-58px * 24 / 120); } /* Schutzraum der SVG herausgerechnet: Wortmarke bündig zur Textkante */ /* Kundenwunsch 22.09.: größer und farbig (bc_logo('dark')) */
.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; }
}

/* ---------- Schwebender „Nach oben“-Knopf (footer.php, theme.js .ist-sichtbar ab ~1,5 Bildschirmhöhen) ----------
   Runder 44-px-Knopf, Hairline auf Nachtblau-Fläche, rechts unten mit Safe-Area-Abstand. Unsichtbar (und nicht
   fokussierbar: visibility) bis er eingeblendet wird, ohne JavaScript nie – dann bleibt der Textlink im Fuß. z-index 40:
   unter Kopfzeile und Overlay-Menü (50) und Sprunglink (100), weit unter einem Borlabs-Dialog (dort fünfstellig) –
   bei offenem Menü zusätzlich ausgeblendet (theme.js setzt es ohnehin inert). Kein Schatten (CD). */
.bc-nach-oben {
	position: fixed;
	right: max(20px, calc(env(safe-area-inset-right, 0px) + 12px));
	bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ziel);
	height: var(--ziel);
	border: 1px solid var(--linie-stark);
	border-radius: 50%;
	background: var(--nachtblau-flaeche);
	color: var(--weiss);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--dauer) ease, transform var(--dauer) ease, visibility 0s linear var(--dauer), border-color var(--dauer) ease, background-color var(--dauer) ease;
}
.bc-nach-oben .bc-icon { width: 20px; height: 20px; }
html.js .bc-nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Die Fußzeile hält rechts die Spur des Knopfes frei (Band 20–64 px vom Rand), damit der Textlink „Back to top“ am
   Seitenende nie unter ihm liegt – nötig, solange der Containerrand schmaler als 72 px ist (unter 1248 px); ohne JS gibt
   es keinen Knopf und keine Lücke. */
@media (max-width: 1247.98px) {
	html.js .bc-fuss__zeile { padding-right: max(0px, calc(72px - var(--rand))); }
}
.bc-nach-oben:hover { border-color: var(--cyan); color: var(--cyan); background: var(--nachtblau); }
html.js .bc-nach-oben.ist-sichtbar:active { transform: translateY(1px); }

/* ---------- Einwilligungsbanner für Google Analytics (inc/einstellungen.php, assets/js/einwilligung.js) ----------
   Nicht modal: die Seite bleibt bedienbar, kein Abdunkeln. Telefon: Karte über die volle Breite am unteren Rand (über
   dem „Nach oben“-Knopf, z-index 60), ab 760 px links unten mit höchstens 36rem – der Knopf rechts und „Scroll down“
   in der Mitte des Hero bleiben frei (1440 × 900 gemessen).
   „Decline“ und „Accept“ sind derselbe Knopf (sekundär, gleiche Breite): Ablehnen so leicht wie Annehmen (§ 25 TDDDG).
   Fläche und Hairline wie die übrigen Karten, kein Schatten (CD). */
.bc-einwilligung {
	position: fixed;
	left: max(12px, env(safe-area-inset-left));
	right: max(12px, env(safe-area-inset-right));
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: 60;
	padding: 1.25rem;
	border: 1px solid var(--linie-stark);
	border-radius: 6px;
	background: var(--nachtblau-flaeche);
	font-size: var(--schrift-klein);
	line-height: 1.55;
	color: var(--text-2);
}
.bc-einwilligung[hidden] { display: none; }
.bc-einwilligung:focus { outline: none; }
.bc-einwilligung:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.bc-einwilligung__text { margin: 0; }
.bc-einwilligung__text a { color: var(--weiss); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: .2em; }
.bc-einwilligung__text a:hover { color: var(--cyan-hell); text-decoration-color: currentColor; }
.bc-einwilligung__knoepfe { display: flex; gap: .75rem; margin-top: 1rem; }
.bc-einwilligung__knoepfe .bc-knopf { flex: 1 1 0; padding-inline: 1rem; }
@media (min-width: 760px) {
	.bc-einwilligung {
		left: max(var(--rand), env(safe-area-inset-left));
		right: auto;
		bottom: max(24px, env(safe-area-inset-bottom));
		max-width: 36rem;
		padding: 1.5rem;
	}
	.bc-einwilligung__knoepfe .bc-knopf { flex: 0 0 9.5rem; }
}
/* „Cookie settings“ im Fuß braucht das Skript – ohne JavaScript entfällt der Listenpunkt (es gibt dann auch keine Analyse). */
html:not(.js) .bc-fuss__links li:has(> .bc-einwilligung-link) { display: 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; }
	/* Wachstumskurve, Kette, Craft-Treppe – Funken aus, Knoten und Linien im Endzustand, Fortschrittslinie ohne Übergang */
	.bc-hero__buehne { animation: none; opacity: 1; }
	.bc-kette__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 { opacity: 1; transition: none; }
	html.js .bc-treppe__stufe[data-reveal], html.js .bc-treppe__weg { transform: none; transition: none; }
	.bc-kopf__fortschritt { transition: none; }
	/* Formular-Meldung und „Nach oben“-Knopf: ohne Ein-/Ausblenden */
	.bc-formular__status.ist-neu { animation: none; }
	.bc-nach-oben { transition: none; transform: none; }
	/* These der Craft: ohne Lichtlauf, ohne Verzögerung (die Dauer allein kürzt das !important oben, die Delays nicht) */
	html.js .bc-craft__these .bc-craft__these-zeile, html.js .bc-craft__punkt, html.js .bc-craft__punkt::after, html.js .bc-craft__schluss::before, html.js .bc-craft__nachsatz { transition: none !important; }
	.bc-hero__weiter, .bc-hero__weiter-linie::after { animation: none !important; }
	}

/* =========================================================
   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-nach-oben, .bc-einwilligung { display: none !important; }
	/* Hero-Kurve, Funken, Glows und die Fortschrittslinie drucken nicht */
	.bc-hero__buehne, .bc-kette__funke, .bc-kopf__fortschritt { display: none !important; }
	/* Stockfoto (Proof-Band) ist Stimmung im Nachtblau – auf Papier nur eine dunkle Fläche */
	.bc-proof__band { display: none !important; }
	/* These: ohne Hintergrund wäre der per background-clip gefüllte Text auf Papier unsichtbar */
	html.js .bc-craft__these .bc-craft__these-zeile, html.js .bc-craft__punkt { background: none; -webkit-text-fill-color: currentColor; }
	.bc-craft__schluss::before, .bc-craft__punkt::after, .bc-hero__weiter { display: none !important; }
	/* System: auf Papier zählen die Felder – alle untereinander; die Karte bleibt als Übersicht, der Raum (Leuchten
	   auf Nachtblau) nicht */
	.bc-system__raum, .bc-system.ist-raum .bc-system__buehne { display: none !important; }
	html.js .bc-system__feld { grid-area: auto; visibility: visible; }
	.bc-system__feld + .bc-system__feld { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
	.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; }
}