/* Scrollwelt der Kampagnenseite BioBasic Bionix (S-039). Baut auf campaign-motion.css auf (FAQ, CTA, Buttons, Überschriften). */

.bx { --bx-bg: #0b1622; position: relative; background: var(--bx-bg); }
.bx::before, .bx::after { display: none; }

.bx-stage { position: fixed; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.9s ease; }
.bx-canvas { display: block; width: 100%; height: 100%; }
.bx.bx-ready .bx-stage { opacity: 1; }
.bx.bx-past .bx-stage { visibility: hidden; }
html:not(.bx-live) .bx-stage { display: none; }

/* Das Theme setzt overflow auf body und .site und macht sie so zu Scroll-Containern; position: sticky griffe dann nie */
html.bx-live body, html.bx-live .site { overflow: visible !important; }

.bx-story { position: relative; z-index: 1; }
.bx-after { position: relative; z-index: 2; background: #0c1216; }

.bx-ch { position: relative; height: calc(var(--w) * 100vh); height: calc(var(--w) * 100svh); }
.bx-ch__pin {
	--p: 0; --o: 1;
	position: sticky; top: 0;
	height: 100vh; height: 100svh;
	display: grid;
	padding: clamp(96px, 13vh, 130px) var(--og-pad) clamp(40px, 7vh, 72px);
	box-sizing: border-box;
	overflow: hidden;
}
.bx-ch__in {
	position: relative; z-index: 3;
	max-width: 620px;
	opacity: var(--o);
	transform: translateY(calc((0.5 - var(--p)) * 7vh));
	will-change: opacity, transform;
}
.bx-ch__still { display: none; }

/* Marke im Layout: Bio normal, Basic fett, Variante gesperrt */
.bx-brand { display: block; font-family: var(--og-display); font-weight: 400; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -0.01em; color: #fff; }
.bx-brand b { font-weight: 700; color: var(--og-teal); }
.bx-brand__var { margin-left: 0.5em; font-size: 0.56em; font-weight: 600; letter-spacing: 0.34em; text-transform: none; color: var(--og-teal); }

.bx-h1 { margin: 0 0 14px; }
.bx-h1__claim {
	display: block; margin-top: 12px;
	font-family: var(--og-display); font-weight: 700;
	font-size: clamp(32px, 6.2vw, 100px); line-height: 0.98; letter-spacing: -0.035em; color: #fff;
	overflow-wrap: break-word; text-wrap: balance;
}
html:not(.bx-live) .bx-place-hero .bx-ch__in { max-width: min(980px, 100%); }
/* Deutsche Übersetzung unter dem englischen Claim (S-039); im Live-Modus zeichnet sie die WebGL-Schrift */
.bx-h1__sub { display: block; margin-top: 10px; font-family: var(--og-display); font-weight: 400; font-size: clamp(20px, 2.6vw, 40px); line-height: 1.15; color: rgba(255, 255, 255, 0.86); }
html.bx-live .bx-place-hero .bx-h1__sub { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.bx-h2 {
	margin: 0 0 16px;
	font-family: var(--og-display); font-weight: 700;
	font-size: clamp(36px, 5.4vw, 84px); line-height: 1.02; letter-spacing: -0.03em; color: #fff;
}
.bx-lead { margin: 0; max-width: 34em; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.bx-caption { margin: 18px 0 0; max-width: 38em; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; color: rgba(255, 255, 255, 0.74); }
.bx-caption sup { color: var(--og-teal); }
.bx-foot { margin: 12px 0 0; max-width: 62em; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.56); }
.bx-scroll { margin: 34px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--og-teal); }

.bx-giant {
	position: absolute; left: var(--og-pad); top: 16vh; z-index: 1; margin: 0;
	font-family: var(--og-display); font-weight: 700;
	font-size: clamp(120px, 26vw, 420px); line-height: 0.9; letter-spacing: -0.05em; color: var(--og-teal);
}

/* Die große Schrift übernimmt im Live-Modus die WebGL-Ebene; der Text bleibt für Suche und Screenreader stehen */
html.bx-live [data-bx-webgl] { color: transparent; }
html.bx-live .bx-giant { opacity: 0; }

.bx-place-hero { align-items: end; }
.bx-place-left-low { align-items: end; }
.bx-place-left-top { align-items: start; }
.bx-place-top-col { align-items: start; }
.bx-place-top-col .bx-ch__in { margin-left: var(--col, 32%); max-width: min(560px, 44vw); }
.bx-place-top-col .bx-h2 { font-size: clamp(34px, 3.9vw, 62px); }

/* Klicks durchs Menü */
.bx-steps { list-style: none; margin: 22px 0 0; padding: 0; }
.bx-steps li { display: flex; gap: 14px; align-items: baseline; padding: 6px 0; color: rgba(255, 255, 255, 0.5); transition: color 0.25s ease; font-size: clamp(14px, 1.15vw, 17px); }
.bx-steps strong { min-width: 7.6em; font-weight: 600; }
.bx-steps li.is-on { color: #fff; }
.bx-steps li.is-on strong { color: var(--og-teal); }
.bx-apps__t { margin: 18px 0 0; font-family: var(--og-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; }
.bx-apps__t + .bx-apps { margin-top: 8px; }
.bx-apps { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.bx-apps li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 18px 7px 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; background: rgba(11, 22, 34, 0.55); color: #fff; }
.bx-apps svg { flex: none; width: 24px; height: 24px; fill: currentColor; }
.bx-apps span { font-size: 12px; line-height: 1.2; color: rgba(255, 255, 255, 0.78); }
.bx-apps strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; color: #fff; }

/* Feldvergleich in Diagrammen: liegt im normalen Lesefluss, nicht angeheftet */
.bx-ch--nachweis { height: auto; }
.bx-place-flow { position: relative; height: auto; display: block; overflow: visible; padding-top: clamp(96px, 13vh, 140px); padding-bottom: clamp(56px, 9vh, 96px); background: rgba(7, 18, 26, 0.92); }
.bx-place-flow .bx-ch__in { max-width: var(--og-max); margin: 0 auto; opacity: 1; transform: none; }
.bx-place-flow .bx-h2 { font-size: clamp(34px, 4.4vw, 68px); }
.bx-charts { display: grid; grid-template-columns: 1.75fr 1fr; gap: clamp(24px, 3.4vw, 44px); margin-top: clamp(28px, 4vh, 44px); }
.bx-fig { position: relative; margin: 0; min-width: 0; }
.bx-fig--w { grid-column: 1 / -1; }
.bx-fig figcaption strong { display: block; color: #fff; font-family: var(--og-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.25; }
.bx-fig figcaption span { display: block; margin-top: 3px; font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.bx-legend { list-style: none; display: flex; gap: 20px; margin: 10px 0 2px; padding: 0; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.bx-legend i { display: inline-block; width: 16px; height: 2px; margin-right: 7px; vertical-align: middle; }
.bx-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.bx-svg--m { display: none; }
.bx-grid, .bx-null { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.bx-null { stroke: rgba(255, 255, 255, 0.4); }
.bx-t { fill: rgba(255, 255, 255, 0.62); font-size: 12.5px; font-family: var(--og-body); }
.bx-t--gas { fill: #fff; font-size: 16px; font-weight: 600; }
.bx-t--wert { fill: #fff; font-size: 15px; font-weight: 600; }
.bx-t--mark { fill: #fff; font-size: 14px; font-weight: 600; }
.bx-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.bx-live .bx-fig:not(.is-in) .bx-line { stroke-dashoffset: 1; }
html.bx-live .bx-fig.is-in .bx-line { transition: stroke-dashoffset 1.7s ease-in-out; }
.bx-whisk { stroke-width: 2; stroke-linecap: round; }
.bx-dot { stroke: #07121a; stroke-width: 2; }
.bx-mark { stroke: rgba(255, 255, 255, 0.72); stroke-width: 1; }
.bx-cross { display: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.bx-tip { position: absolute; z-index: 4; min-width: 170px; padding: 8px 10px; border-radius: 8px; background: #16232e; color: #fff; font-size: 13px; line-height: 1.5; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.bx-tip strong { display: block; font-weight: 600; }
.bx-tip span { display: block; color: rgba(255, 255, 255, 0.8); }
.bx-tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.bx-table { margin-top: 18px; font-size: 14.5px; color: rgba(255, 255, 255, 0.76); }
.bx-table summary { cursor: pointer; color: var(--og-teal); }
.bx-table table { margin-top: 10px; border: 0; border-collapse: collapse; background: none; }
.bx-table caption { text-align: left; padding-bottom: 6px; }
.bx-table th, .bx-table td { padding: 5px 22px 5px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); background: none; text-align: left; font-weight: 400; letter-spacing: 0; text-transform: none; }
.bx-place-flow .bx-foot { margin-top: 18px; }
.bx-place-left-mid { align-items: center; }
.bx-place-bottom { align-items: end; }
.bx-place-bottom .bx-ch__in { max-width: var(--og-max); width: 100%; margin: 0 auto; }
.bx-place-split .bx-ch__in { display: flex; flex-direction: column; max-width: min(780px, 58vw); height: 100%; }
.bx-place-split .bx-stats { margin-top: auto; flex-wrap: nowrap; }
.bx-place-split .bx-h2 { font-size: clamp(34px, 4.4vw, 68px); margin: 0; }
.bx-place-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(180deg, rgba(11, 22, 34, 0), rgba(11, 22, 34, 0.9) 58%); opacity: var(--o); pointer-events: none; }
.bx-place-video { align-items: center; }
.bx-place-video .bx-ch__in { max-width: min(1040px, 70vw); width: 100%; }
.bx-place-hero .bx-ch__in, .bx-place-left-low .bx-ch__in, .bx-place-left-mid .bx-ch__in { justify-self: start; }

html.bx-live .bx-place-hero .bx-h1__claim { position: absolute; width: 1px; height: 1px; overflow: hidden; }

.bx-stats { display: flex; gap: clamp(22px, 3.4vw, 56px); margin: 22px 0 0; flex-wrap: wrap; }
.bx-stats dt { font-size: 18px; font-weight: 600; letter-spacing: 0.08em; color: var(--og-teal); }
.bx-stats dd { margin: 4px 0 0; color: #fff; white-space: nowrap; }
.bx-stats strong { font-family: var(--og-display); font-weight: 700; font-size: clamp(38px, 4.3vw, 66px); letter-spacing: -0.03em; }
.bx-stats span { font-size: clamp(14px, 1.2vw, 18px); color: rgba(255, 255, 255, 0.74); }

/* Gegenüberstellung BioBasic Bionix gegen Prozess-GC (S-039): Zeichen in den Farben der Scrollwelt, Quadrate gegen Block */
.bx-duel { margin: 22px 0 0; }
.bx-duel__k { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.bx-duel dl { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); margin: 0; }
.bx-duel dl > div { min-width: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
/* Das Theme setzt dt in Versalien; der Markenname bleibt in seiner Schreibweise */
.bx-duel dt { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; color: rgba(255, 255, 255, 0.82); }
.bx-duel dd { margin: 5px 0 0; font-family: var(--og-display); font-weight: 700; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.bx-duel__bx dd { color: var(--og-teal); }
.bx-duel i { flex: none; width: 26px; height: 10px; }
.bx-duel__bx i { background: repeating-linear-gradient(90deg, var(--og-teal) 0 4px, transparent 4px 6px) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(90deg, var(--og-teal) 0 4px, transparent 4px 6px) 0 6px / 100% 4px no-repeat; }
.bx-duel__gc i { background: #c4cfdb; border-radius: 1px; }

.bx-gases { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 44px); margin: 24px 0 0; padding: 0; }
.bx-gases li { border-top: 1px solid rgba(255, 255, 255, 0.28); padding-top: 12px; color: #fff; }
.bx-gases strong { display: block; font-family: var(--og-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -0.02em; color: var(--og-teal); }
.bx-gases span { display: block; margin-top: 4px; font-size: clamp(15px, 1.3vw, 19px); }
.bx-gases em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: rgba(255, 255, 255, 0.66); }

.bx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.bx-btn-line { border: 1.5px solid #203556; color: #203556 !important; background: transparent; }
.bx-btn-line:hover, .bx-btn-line:focus-visible { background: #203556; color: #fff !important; }

/* Letztes Kapitel steht im hellen Studio */
.bx-ch--ankunft .bx-h2 { color: #203556; }
.bx-ch--ankunft .bx-lead { color: rgba(32, 53, 86, 0.84); }
.bx-ch--ankunft .tory-og-btn--solid { background: #00737d; color: #fff !important; }

.bx-video { position: relative; aspect-ratio: 16 / 9; margin-top: 22px; background: #0c1216; border-radius: 12px; overflow: hidden; }
.bx-video video, .bx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bx-video__play { position: absolute; inset: 0; width: 100%; border: 0; background: #142141 center / cover no-repeat; color: #fff; font: 600 18px var(--og-body); cursor: pointer; }

.bx-index { z-index: 5; }
.bx-ch--ankunft ~ * .bx-index { color: #203556; }

/* Technik-Auszug */
.bx-specs { max-width: var(--og-max); margin: 0 auto; padding: clamp(72px, 11vh, 130px) var(--og-pad) clamp(40px, 6vh, 80px); }
.bx-specs__t { width: 100%; margin-top: 28px; border: 0; border-collapse: collapse; background: none; }
.bx-specs__t tr, .bx-specs__t tbody { border: 0; background: none; }
.bx-specs__t th, .bx-specs__t td { padding: 15px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); background: none; text-align: left; vertical-align: top; font-size: 16.5px; line-height: 1.45; letter-spacing: 0; text-transform: none; }
.bx-specs__t th { width: 34%; padding-right: 24px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.bx-specs__t td { color: #fff; }
.bx-specs__note { margin: 20px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.62); }
.bx-specs__note a { color: var(--og-teal); }

/* Ohne WebGL, ohne JS oder bei reduzierter Bewegung: normale Abfolge mit Standbild */
html:not(.bx-live) .bx-ch { height: auto; }
html:not(.bx-live) .bx-ch__pin { position: static; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 72px; padding-bottom: 72px; }
html:not(.bx-live) .bx-ch__in { opacity: 1; transform: none; }
html:not(.bx-live) .bx-giant { position: static; font-size: clamp(90px, 20vw, 260px); }
html:not(.bx-live) .bx-ch__still { display: block; width: 100%; max-width: 1040px; height: auto; border-radius: 12px; }

@media (max-width: 760px), (max-aspect-ratio: 82/100) {
	.bx-ch__pin { padding: 84px 20px 28px; }
	.bx-ch__in { max-width: none; }
	.bx-h2 { font-size: clamp(30px, 8.6vw, 44px); }
	.bx-lead { font-size: 16px; }
	.bx-place-split .bx-ch__in { max-width: none; height: auto; display: block; }
	.bx-place-split { align-items: end; }
	.bx-place-split .bx-h2 { margin-bottom: 8px; font-size: clamp(30px, 8.4vw, 42px); }
	.bx-charts { grid-template-columns: 1fr; }
	.bx-svg--d { display: none; }
	.bx-svg--m { display: block; }
	.bx-place-top-col, .bx-place-left-top { align-items: end; }
	.bx-place-top-col .bx-ch__in { margin-left: 0; max-width: none; }
	.bx-steps li { display: none; padding: 0; }
	.bx-steps li.is-on { display: flex; }
	.bx-steps strong { min-width: 0; }
	.bx-gases { grid-template-columns: repeat(2, 1fr); }
	.bx-gases strong { font-size: 30px; }
	.bx-place-split .bx-stats, .bx-stats { gap: 14px; flex-wrap: nowrap; justify-content: space-between; }
	.bx-stats strong { font-size: 27px; }
	.bx-stats span { font-size: 11px; }
	.bx-stats dd { white-space: normal; }
	.bx-duel { margin-top: 16px; }
	.bx-duel dd { font-size: 21px; }
	.bx-place-left-mid { align-items: end; }
	.bx-ch--ankunft .bx-ch__pin { align-items: start; }
	.bx-ch--ankunft .bx-h2 { font-size: clamp(28px, 7.8vw, 40px); }
	.bx-foot { font-size: 11.5px; }
	.bx-specs__t th, .bx-specs__t td { display: block; width: auto; padding: 4px 0; border: 0; }
	.bx-specs__t th { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
	.bx-index { display: none; }
	/* Text bleibt lesbar, wenn die Welle hinter ihm liegt */
	.bx-ch__pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(11, 22, 34, 0), rgba(11, 22, 34, 0.86) 60%); opacity: var(--o); pointer-events: none; }
	.bx-ch--ankunft .bx-ch__pin::after { display: none; }
	/* Bei den vier Gasen liegt der Text höher und die Bänder laufen durchs ganze Bild */
	.bx-ch--gase .bx-ch__pin::after { height: 66%; background: linear-gradient(180deg, rgba(11, 22, 34, 0), rgba(11, 22, 34, 0.92) 34%); }
	/* Beim Display liegt der Schriftzug des Gehäuses sonst hinter der Überschrift */
	.bx-ch--display .bx-ch__pin::after { height: 58%; background: linear-gradient(180deg, rgba(11, 22, 34, 0), rgba(11, 22, 34, 0.94) 40%); }
}

/* Lange Überschrift im ersten Kapitel: zwei Zeilen, damit der Text über dem Band bleibt */
@media (min-width: 761px) and (min-aspect-ratio: 82/100) {
	.bx-ch--abriss .bx-ch__in, .bx-ch--preis .bx-ch__in { max-width: min(740px, 50vw); }
	.bx-ch--abriss .bx-h2, .bx-ch--preis .bx-h2 { font-size: clamp(34px, 3.7vw, 54px); }
	.bx-ch--vorsprung .bx-h2 { font-size: clamp(28px, 2.7vw, 40px); }
	.bx-ch--display .bx-h2 { font-size: clamp(32px, 3.5vw, 50px); text-wrap: balance; }
}

@media (max-width: 760px), (max-aspect-ratio: 82/100) {
	.bx-ch--vorsprung .bx-h2,
	.bx-ch--display .bx-h2 { font-size: 28px; }
}

/* HubSpot auf der Scrollwelt (S-039): Die Pop-ups (Newsletter) legen sich sonst über die Seite, auf dem Telefon bildschirmfüllend.
   Diese Datei lädt nur auf der Kampagnenseite. Eingebettete Formulare und CTAs liegen nicht in diesen Ankern. */
#hs-web-interactives-top-anchor,
#hs-web-interactives-bottom-anchor { display: none !important; }
/* Sprechblase und automatische Öffnung des Chats nimmt hubspot.js zurück; bis dahin bleibt das Widget unsichtbar.
   Nicht visibility: hidden, damit hält HubSpot die Sprechblase an und öffnet erst nach der Freigabe. */
html.bx-chat-zu #hubspot-messages-iframe-container { opacity: 0; pointer-events: none; }

/* Fortschrittsbalken über dem Menü wie auf der Off-Gas-Seite (S-039); Bionix ohne Bernstein, Petrol nach Türkis */
.bx .tory-og-progress span { background: linear-gradient(90deg, var(--og-petrol), var(--og-teal)); }

/* Hinweis über „benchmark“ im Hero (S-039): main.js legt die Fläche über das Wort der WebGL-Schrift. Hover, Fokus oder Tippen zeigt,
   wer die Benchmark ist. Ohne WebGL steht der Hinweis als Zeile unter der Überschrift, für Screenreader immer. */
.bx-bench { display: none; position: fixed; z-index: 6; cursor: help; }
html.bx-live .bx-bench.is-on { display: block; }
.bx-bench::after { content: ""; position: absolute; left: 1%; right: 1%; bottom: -0.12em; border-bottom: 3px dotted rgba(0, 185, 188, 0.8); }
.bx-bench__tip {
	position: absolute; left: 0; top: calc(100% + 14px + var(--bx-unter, 0px));
	padding: 10px 18px; border-radius: 9999px; background: #fff; color: #203556;
	font: 600 17px/1.3 var(--og-body, Roboto, system-ui, sans-serif); white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none;
}
.bx-bench:hover .bx-bench__tip, .bx-bench.is-open .bx-bench__tip { opacity: 1; transform: none; }
html.bx-live .bx-bench-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bx-bench-hint { margin: 4px 0 14px; font-size: clamp(15px, 1.2vw, 18px); color: var(--og-teal); }
@media (max-width: 760px), (max-aspect-ratio: 82/100) {
	.bx-bench__tip { white-space: normal; width: max-content; max-width: 78vw; font-size: 15px; }
}