/* Blackfire Scroll-Collage 1.2
   Bilderring um einen zentrierten Text.
   Scroll-Effekt, Maus-Effekt, Schweben. Ohne Fremdbibliothek. */

.bfsc{
	/* Farben */
	--bfsc-bg:#131215;
	--bfsc-accent:#FC5151;
	--bfsc-text:#ffffff;

	/* Anordnung
	   ACHTUNG: Kachelbreite MUSS in Prozent stehen, nicht in vw.
	   Der Ringradius rechnet in Prozent der Containerbreite. Stand die Kachel
	   in vw, also in Fensterbreite, fielen beide Masse in einem schmalen
	   Container auseinander und die Kacheln landeten mitten auf der
	   Ueberschrift. Auf 8247 war der Container 667px breit bei 1280px Fenster,
	   die Kacheln damit fast doppelt so gross wie vorgesehen.
	   Gemessen und korrigiert am 02.09.2026. Beide Masse jetzt in Prozent. */
	--bfsc-rx:41%;          /* Abstand vom Text, waagerecht */
	--bfsc-ry:35%;          /* Abstand vom Text, senkrecht */
	--bfsc-tile:13%;        /* Grundbreite einer Kachel, Prozent des Containers */
	--bfsc-radius:20px;
	--bfsc-min-h:100vh;

	/* Text. Die Deckelung auf 42% haelt den Ring frei, auch wenn die Collage
	   in einem schmalen Container steht. */
	--bfsc-text-w:min(620px,42%);
	--bfsc-scrim:0.85;

	/* Bilder */
	--bfsc-gray:0;
	--bfsc-border:0px;
	--bfsc-border-color:rgba(255,255,255,.14);

	/* Maus */
	--bfsc-hover-blur:6px;
	--bfsc-hover-dim:0.65;
	--bfsc-focus-blur:8px;
	--bfsc-shadow:0 1.4vw 3.2vw rgba(0,0,0,.55);

	/* Schweben */
	--bfsc-float:10px;

	position:relative;
	min-height:var(--bfsc-min-h);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:10vh 5vw;
	background:var(--bfsc-bg);
	color:var(--bfsc-text);
}

/* Bilder duerfen ueber den Rand hinausragen, statt beschnitten zu werden */
.bfsc--nocrop{overflow:visible}

/* Die Collage ist ein Vollbild-Baustein und braucht die ganze Breite ihres
   Abschnitts. Steht der Abschnitt auf "Elemente mittig ausrichten", also
   `align-items:center`, bekommen seine Kinder in einer Spalten-Anordnung nur
   ihre Inhaltsbreite statt der vollen. Auf 8247 war die Collage dadurch auf
   einem 1920px-Monitor nur 1150px breit statt 1905, die Kacheln wirkten
   verloren. `align-self:stretch` hebt das auf, ohne den Abschnitt zu aendern.
   Gemessen und behoben am 03.09.2026.
   Die Regel steht hier und nicht in bf-bausteine.css, weil jene Datei nur
   geladen wird, wenn zusaetzlich ein bfb_-Baustein auf der Seite steht. */
.elementor-widget-bf_scroll_collage{width:100%;align-self:stretch}
.elementor-widget-bf_scroll_collage > .elementor-widget-container{width:100%}

/* ---------- Text in der Mitte ---------- */
.bfsc__text{
	position:relative;
	z-index:50;
	width:100%;
	max-width:var(--bfsc-text-w);
	text-align:center;
	pointer-events:none;
}
/* weicher Schleier, damit der Text auch vor einem Bild lesbar bleibt */
.bfsc__text::before{
	content:"";
	position:absolute;
	inset:-70% -35%;
	z-index:-1;
	background:radial-gradient(ellipse at center, var(--bfsc-bg) 0%, var(--bfsc-bg) 38%, transparent 72%);
	opacity:var(--bfsc-scrim);
	pointer-events:none;
}
.bfsc__headline{
	font-family:"Poppins-ExtraBold",Poppins,sans-serif;
	text-transform:uppercase;
	line-height:.95;
	font-size:clamp(36px,6.4vw,92px);
	font-weight:800;
	letter-spacing:.005em;
	margin:0 0 .35em;
	color:inherit;
}
.bfsc__headline .bfsc__accent{color:var(--bfsc-accent)}
.bfsc__para{
	font-size:clamp(15px,1.3vw,20px);
	line-height:1.65;
	margin:0;
	color:inherit;
}
.bfsc__para .bfsc__w{
	display:inline-block;
	opacity:.25;
	transition:opacity .25s linear;
}
.bfsc--nowords .bfsc__para .bfsc__w{opacity:1}

.bfsc__btn{
	display:inline-block;
	margin-top:1.6em;
	padding:.85em 2em;
	border-radius:999px;
	background:var(--bfsc-accent);
	color:#fff;
	font-weight:600;
	font-size:clamp(14px,1.05vw,17px);
	text-decoration:none;
	pointer-events:auto;
	transition:transform .25s ease, filter .25s ease;
}
.bfsc__btn:hover{transform:translateY(-2px);filter:brightness(1.1)}

/* ---------- Kacheln, gleichmaessig auf einem Ring ---------- */
.bfsc__tile{
	--a-x:0;   /* Kosinus des Winkels */
	--a-y:0;   /* Sinus des Winkels */
	--rr:1;    /* Streuung des Radius */
	--sz:1;    /* Streuung der Groesse */
	--ox:0%;   /* freier Versatz, damit kein exakter Kreis entsteht */
	--oy:0%;
	--fx:0px;  /* Korrektur, damit keine Kachel ueber den Rand ragt */
	--fy:0px;
	--z:1;     /* Stapelreihenfolge, groessere Bilder liegen vorn */

	position:absolute;
	z-index:var(--z);
	box-sizing:border-box;
	width:calc(var(--bfsc-tile) * var(--sz));
	left:calc(50% + var(--bfsc-rx) * var(--a-x) * var(--rr) + var(--ox) + var(--fx));
	top:calc(50% + var(--bfsc-ry) * var(--a-y) * var(--rr) + var(--oy) + var(--fy));
	translate:-50% -50%;
	border:var(--bfsc-border) solid var(--bfsc-border-color);
	border-radius:var(--bfsc-radius);
	will-change:transform,filter,opacity;
}
.bfsc__inner{
	display:block;
	border-radius:inherit;
	overflow:hidden;
	line-height:0;
	transform-origin:center center;
	transition:transform .38s cubic-bezier(.2,.7,.3,1),
	           filter .38s ease,
	           opacity .38s ease,
	           box-shadow .38s ease;
}
.bfsc__tile img{
	display:block;
	width:100%;
	height:auto;
	filter:grayscale(var(--bfsc-gray));
	transition:filter .38s ease;
}
.bfsc__tile a{display:block;line-height:0}

/* einheitliches Seitenverhaeltnis, falls gewuenscht */
.bfsc--ratio .bfsc__inner{aspect-ratio:var(--bfsc-ratio,3/2)}
.bfsc--ratio .bfsc__tile img,
.bfsc--ratio .bfsc__tile a{height:100%}
.bfsc--ratio .bfsc__tile img{object-fit:cover}

/* Startzustand nur setzen, wenn das Skript wirklich laeuft */
.bfsc.is-live .bfsc__tile{opacity:0}

/* ---------- sanftes Schweben ---------- */
@keyframes bfscFloat{
	from{translate:0 0}
	to{translate:0 calc(var(--bfsc-float) * -1)}
}
.bfsc--float .bfsc__inner{
	animation:bfscFloat var(--fd,9s) ease-in-out var(--fdel,0s) infinite alternate;
}

/* ---------- Maus-Effekt ---------- */
@media (hover:hover) and (pointer:fine){

	.bfsc--hover .bfsc__tile{cursor:pointer}

	/* die Kachel unter der Maus kommt nach vorn */
	.bfsc--hover .bfsc__tile.is-hot{z-index:40}
	.bfsc--hover .bfsc__tile.is-hot .bfsc__inner{
		box-shadow:var(--bfsc-shadow);
		animation-play-state:paused;
	}
	.bfsc--hover .bfsc__tile.is-hot img{filter:grayscale(0)}

	/* alle anderen treten zurueck */
	.bfsc--hover.is-hovering .bfsc__tile:not(.is-hot) .bfsc__inner{
		filter:blur(var(--bfsc-hover-blur));
		opacity:var(--bfsc-hover-dim);
	}

	/* Fokus-Modus: alles unscharf, nur unter der Maus scharf */
	.bfsc--focus .bfsc__tile .bfsc__inner{filter:blur(var(--bfsc-focus-blur))}
	.bfsc--focus .bfsc__tile.is-hot .bfsc__inner{filter:none}
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
	.bfsc{
		--bfsc-rx:43%;
		--bfsc-ry:37%;
		--bfsc-tile:15%;
		--bfsc-radius:16px;
		--bfsc-text-w:min(520px,46%);
		padding:10vh 4vw;
	}
}

/* ---------- Handy ---------- */
@media (max-width:767px){
	.bfsc{
		--bfsc-rx:42%;
		--bfsc-ry:36%;
		--bfsc-tile:16%;
		--bfsc-radius:12px;
		--bfsc-text-w:min(620px,50%);
		--bfsc-scrim:1;
		padding:12vh 4vw;
	}
	.bfsc__text::before{inset:-60% -40%}
}

/* ---------- Im Elementor-Editor immer der Endzustand ---------- */
.bfsc--static .bfsc__tile{opacity:1!important;filter:none!important;transform:none!important}
.bfsc--static .bfsc__inner{animation:none!important}
.bfsc--static .bfsc__para .bfsc__w{opacity:1!important}

/* ---------- Animationen abgeschaltet ---------- */
@media (prefers-reduced-motion:reduce){
	.bfsc.is-live .bfsc__tile{opacity:1!important;filter:none!important;transform:none!important}
	.bfsc__para .bfsc__w{opacity:1!important}
	.bfsc__inner{transition:none;animation:none!important}
}