/* Blackfire Bausteine, Textmodule
   Passen wir zu dir, Prozess-Zeitstrahl, Aussage die sich aufbaut.
   Eigener Praefix bft, damit sich nichts mit den Bildmodulen beisst. */

/* Elementor-Container stehen oft auf "mittig". Dann schrumpft jedes Widget
   auf die Breite seines Inhalts und die zwei Spalten fallen zusammen.
   Gleiche Regel wie bei den Bildmodulen, hier nur fuer die Textmodule. */
.elementor-widget-bfb_fit,
.elementor-widget-bfb_prozess,
.elementor-widget-bfb_satz{width:100%}
.elementor-widget-bfb_fit > .elementor-widget-container,
.elementor-widget-bfb_prozess > .elementor-widget-container,
.elementor-widget-bfb_satz > .elementor-widget-container{width:100%}

.bft{
	/* Die Website setzt Ueberschriften in Poppins und Fliesstext in
	   GeneralSans. Ohne diese Angabe erben unsere Bausteine ueberall
	   den Fliesstext und wirken daneben zu leicht. */
	--bft-display:"Poppins-ExtraBold",Poppins,sans-serif;
	--bft-rot:#FC5151;
	--bft-linie:rgba(255,255,255,.14);
	--bft-dim:rgba(255,255,255,.55);
	--bft-leise:rgba(255,255,255,.34);
	--bft-text:#fff;
	color:var(--bft-text);
}
.bft-leer{
	padding:26px;border:1px dashed rgba(255,255,255,.25);border-radius:8px;
	color:rgba(255,255,255,.55);font-size:14px;text-align:center;
}

/* ============================================ Passen wir zu dir ==== */
.bft-fit{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:start}
/* Gleiche Umbruchpunkte wie der Rest der Website: Tablet 1111, Handy 760. */
@media(max-width:1111px){.bft-fit{gap:40px}}
@media(max-width:900px){.bft-fit{grid-template-columns:1fr;gap:44px}}
@media(max-width:760px){.bft-fit{gap:32px}}

.bft-fit__buehne{
	position:relative;aspect-ratio:var(--bft-ratio,16/10);
	overflow:hidden;margin-bottom:30px;background:#0b0a0c;
	border-radius:var(--bft-radius,0);
}
.bft-fit__bild{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	opacity:0;transform:scale(1.04);
	transition:opacity .7s ease, transform 1.4s ease;
	filter:grayscale(.25);
}
.bft-fit__bild.ist-an{opacity:1;transform:none}
.bft-fit__schleier{
	position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(180deg,rgba(19,18,21,.15),rgba(19,18,21,.85));
}

.bft-fit__kopf{
	font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
	color:var(--bft-dim);padding-bottom:14px;
	border-bottom:1px solid var(--bft-linie);margin-bottom:4px;
}
.bft-fit__kopf--leise{color:var(--bft-leise)}

.bft-fit__liste{list-style:none;margin:0;padding:0}
.bft-fit__liste li{
	display:flex;gap:22px;align-items:baseline;padding:22px 0;
	border-bottom:1px solid var(--bft-linie);
}
/* Nur wenn es ueberhaupt Bilder gibt, ist die Zeile bedienbar. Sonst waere
   der Zeigefinger eine Luege. */
.bft-fit__liste--aktiv li{cursor:pointer;transition:border-color .3s}
.bft-fit__liste--aktiv li:hover,
.bft-fit__liste--aktiv li.ist-an{border-bottom-color:rgba(252,81,81,.55)}
.bft-fit__liste--aktiv li:focus-visible{
	outline:2px solid var(--bft-rot);outline-offset:4px;
}
/* Am Handy gibt es kein Ueberfahren. Dort sagt ein feiner Hinweis, dass
   man tippen kann. */
@media(max-width:760px){
	.bft-fit__liste--aktiv{position:relative}
	.bft-fit__liste--aktiv::before{
		content:"Zum Bildwechsel antippen";
		display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
		color:var(--bft-leise);padding-bottom:10px;
	}
}
.bft-fit__nr{
	font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.28);
	flex:none;width:22px;padding-top:6px;transition:color .3s;
}
.bft-fit__txt{font-size:clamp(18px,1.55vw,25px);line-height:1.35;color:#fff}
/* Interne Links aus dem Bestand muessen als Links erkennbar bleiben. */
.bft-fit__txt a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:var(--bft-rot);transition:color .25s}
.bft-fit__txt a:hover{color:var(--bft-rot)}
.bft-fit__liste li.ist-an .bft-fit__nr{color:var(--bft-rot)}

.bft-fit__liste--leise .bft-fit__txt{
	color:var(--bft-leise);font-size:clamp(16px,1.25vw,19px);
}
.bft-fit__liste--leise li{padding:17px 0}

/* Kompakt greift JE SPALTE, nicht ueber beide. Sonst zieht eine lange
   Abgrenzung rechts die starke linke Spalte unnoetig mit klein.
   Die Stufe ist bewusst mild, die linke Spalte soll gross bleiben. */
.bft-fit--kompakt-ja .bft-fit__liste:not(.bft-fit__liste--leise) .bft-fit__txt{
	font-size:clamp(17px,1.3vw,21px);line-height:1.45;
}
.bft-fit--kompakt-ja .bft-fit__liste:not(.bft-fit__liste--leise) li{padding:18px 0;align-items:flex-start}
.bft-fit--kompakt-nein .bft-fit__liste--leise .bft-fit__txt{font-size:clamp(14px,1vw,16px);line-height:1.55}
.bft-fit--kompakt-nein .bft-fit__liste--leise li{padding:14px 0;align-items:flex-start}
.bft-fit--kompakt-ja .bft-fit__nr,
.bft-fit--kompakt-nein .bft-fit__nr{padding-top:2px}

.bft-fit__schluss{
	margin-top:26px;color:var(--bft-dim);
	font-size:15px;line-height:1.65;max-width:34ch;
}

/* ================================================== Zeitstrahl ==== */
.bft-proz{position:relative;padding-left:46px}
.bft-proz::before{
	content:"";position:absolute;left:15px;top:8px;bottom:8px;
	width:2px;background:var(--bft-linie);
}
.bft-proz__fuell{
	position:absolute;left:15px;top:8px;width:2px;height:0;
	/* Die graue Linie laeuft von oben 8 bis unten 8. Ohne die Deckelung
	   schiesst die rote Fuellung 16 Pixel darueber hinaus. */
	max-height:calc(100% - 16px);
	background:linear-gradient(180deg,var(--bft-rot),rgba(252,81,81,.25));
	transition:height .1s linear;
}
.bft-proz__schritt{position:relative;padding:0 0 42px}
.bft-proz__schritt:last-child{padding-bottom:0}
.bft-proz__punkt{
	position:absolute;left:-38px;top:2px;width:14px;height:14px;border-radius:50%;
	background:var(--bft-bg,#131215);border:2px solid var(--bft-linie);
	transition:border-color .4s, background .4s, box-shadow .4s;
}
.bft-proz__schritt.ist-an .bft-proz__punkt{
	border-color:var(--bft-rot);background:var(--bft-rot);
	box-shadow:0 0 0 6px rgba(252,81,81,.14);
}
.bft-proz__nr{
	font-size:12px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--bft-leise);margin-bottom:6px;
}
.bft-proz__titel{font-family:var(--bft-display);font-weight:700;font-size:21px;margin:0 0 8px;color:#fff}
.bft-proz__text{margin:0;color:var(--bft-dim);font-size:15px;line-height:1.65;max-width:560px}
/* Bild je Schritt, damit der alte Zeitstrahl ohne Bildverlust ersetzt
   werden kann. Hoehe kommt aus dem Regler, Breite richtet sich danach. */
.bft-proz__bild{
	display:block;margin-top:14px;height:110px;width:auto;max-width:100%;
	object-fit:cover;border-radius:5px;
}

/* ============================================ Aussage, Scrolltext ==== */
/* Ohne eigene Schriftgroesse waere die Aussage so gross wie normaler Text
   und der Effekt liefe ins Leere. */
.bft-satz{
	margin:0;
	font-family:var(--bft-display);
	font-size:clamp(22px,2.6vw,40px);
	line-height:1.25;
	font-weight:700;
}
/* Notbremse fuer zu lange Texte: eine Stufe kleiner und eine begrenzte
   Zeilenlaenge, damit daraus kein Schriftgebirge wird. */
.bft-satz--lang{
	font-size:clamp(18px,1.5vw,25px);
	line-height:1.5;
	font-weight:500;
	/* Die Zeilenlaenge kommt aus PHP als Inline-Angabe. Hier waere sie
	   wirkungslos, weil Elementors Breiten-Regler schwerer wiegt. */
}
.bft-satz .bft-w{
	display:inline-block;
	opacity:var(--bft-grund,.25);
	transition:opacity .25s linear;
}

/* ==================================== Animationen abgeschaltet ==== */
@media (prefers-reduced-motion:reduce){
	.bft-fit__bild{transition:none}
	.bft-satz .bft-w{opacity:1!important}
	.bft-proz__fuell{transition:none}
}