/* Blackfire Bausteine 1.0
   Galerie, Vorher/Nachher, Bildband, Video im Rahmen
   plus die Verhaltens-Klassen bf-scrolltext und bf-aufdecken.
   Keine Fremdbibliothek. */

.bfb{
	--bfb-rot:#FC5151;
	--bfb-radius:10px;
	--bfb-gray:0;
	--bfb-zoom:1.05;
	--bfb-ratio:3/2;
}
.bfb-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;
}

/* ================================================ Volle Breite ====
   Elementor-Container stehen oft auf "mittig". Dann schrumpft jedes Widget
   auf die Breite seines Inhalts. Fuer unsere Bausteine ist das falsch, und
   bei der Galerie waere der Inhalt sogar null breit, weil ihre Huelle eine
   Container-Abfrage ist und ihre Breite deshalb nicht vom Inhalt kommt.  */
.elementor-widget-bfb_galerie,
.elementor-widget-bfb_vergleich,
.elementor-widget-bfb_bildband,
.elementor-widget-bfb_rahmen,
.elementor-widget-bf_scroll_collage{width:100%}
.elementor-widget-bfb_galerie > .elementor-widget-container,
.elementor-widget-bfb_vergleich > .elementor-widget-container,
.elementor-widget-bfb_bildband > .elementor-widget-container,
.elementor-widget-bfb_rahmen > .elementor-widget-container,
.elementor-widget-bf_scroll_collage > .elementor-widget-container{width:100%}

/* ==================================================== Galerie ====
   Die Zeilenhoehe wird EXAKT gerechnet, nicht aus dem Bild abgeleitet.
   Dadurch bleiben alle Zeilen gleich hoch, egal ob eine Kachel zwei
   Spalten breit ist und egal ob ein Bild hoch oder quer liegt.
   100cqw ist die Breite der Huelle, deshalb die Huelle drumherum.        */
.bfb-gal-huelle{container-type:inline-size;width:100%}
.bfb-gal{
	--bfb-spalten:4;
	--bfb-gap:14px;
	--bfb-rz:1.5;          /* Seitenverhaeltnis als Zahl, aus PHP */
	display:grid;
	grid-template-columns:repeat(var(--bfb-spalten),1fr);
	/* max() ist die Notbremse: sollte die Container-Abfrage einmal null
	   liefern, faellt die Galerie nicht unsichtbar in sich zusammen. */
	grid-auto-rows:max(60px, calc((100cqw - (var(--bfb-spalten) - 1) * var(--bfb-gap)) / var(--bfb-spalten) / var(--bfb-rz)));
	gap:var(--bfb-gap);
}
/* Notnagel fuer Browser ohne Container-Abfragen */
@supports not (container-type:inline-size){
	.bfb-gal{grid-auto-rows:auto}
	.bfb-gal .bfb-kachel img{height:auto;aspect-ratio:var(--bfb-ratio,3/2)}
	.bfb-gal--bleed .bfb-kachel--gross img{height:100%;aspect-ratio:auto}
}
.bfb-kachel{
	margin:0;overflow:hidden;border-radius:var(--bfb-radius);line-height:0;
	background:rgba(255,255,255,.03);
	/* Ohne min-*:0 sprengt ein grosses Bild seine Rasterzelle. */
	min-width:0;min-height:0;
}
.bfb-kachel > a{display:block;line-height:0;width:100%;height:100%}
.bfb-kachel img{
	width:100%;height:100%;display:block;object-fit:cover;
	filter:grayscale(var(--bfb-gray));
	transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .45s ease;
}
/* Original je Bild: dann richtet sich die Zeile nach dem Bild */
.bfb-gal--eigen{grid-auto-rows:auto}
.bfb-gal--eigen .bfb-kachel img{height:auto;aspect-ratio:auto}

@media (hover:hover) and (pointer:fine){
	.bfb-kachel:hover img{transform:scale(var(--bfb-zoom));filter:grayscale(0)}
}

/* Bleed: erstes Bild gross ueber zwei Spalten und zwei Zeilen. */
.bfb-gal--bleed .bfb-kachel--gross{grid-column:span 2;grid-row:span 2}

/* Versetzt: Spalten mit eigener Hoehe, per column-count */
.bfb-gal--versetzt{display:block;column-count:var(--bfb-spalten);column-gap:var(--bfb-gap)}
.bfb-gal--versetzt .bfb-kachel{break-inside:avoid;margin-bottom:var(--bfb-gap)}
.bfb-gal--versetzt .bfb-kachel img{aspect-ratio:auto;height:auto}

/* Nacheinander einblenden */
.bfb-stufen .bfb-kachel{
	opacity:0;transform:translateY(26px);
	transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
	transition-delay:calc(var(--i,0) * 70ms);
}
.bfb-stufen.ist-da .bfb-kachel{opacity:1;transform:none}

/* ============================================= Vorher/Nachher ==== */
.bfb-vn{
	--bfb-griff:#FC5151;
	--pos:50%;
	position:relative;overflow:hidden;
	border-radius:var(--bfb-radius);
	aspect-ratio:var(--bfb-ratio,16/9);
	user-select:none;touch-action:none;cursor:ew-resize;
	background:#0b0a0c;
}
.bfb-vn--y{cursor:ns-resize}
/* Ohne pointer-events:none startet der Browser beim Ziehen sein eigenes
   Bild-Ziehen und der Schieber haengt. Die Zeiger-Ereignisse braucht
   ohnehin nur die Huelle. */
.bfb-vn img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
	pointer-events:none;-webkit-user-drag:none;user-select:none;
}
.bfb-vn__vorher{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.bfb-vn--y .bfb-vn__vorher{clip-path:inset(0 0 calc(100% - var(--pos)) 0)}

.bfb-vn__linie{
	position:absolute;z-index:3;background:rgba(255,255,255,.85);
	top:0;bottom:0;left:var(--pos);width:1px;
}
.bfb-vn--y .bfb-vn__linie{left:0;right:0;top:var(--pos);bottom:auto;width:auto;height:1px}
.bfb-vn__marke{
	position:absolute;top:50%;left:50%;translate:-50% -50%;
	width:3px;height:56px;background:var(--bfb-griff);
}
.bfb-vn--y .bfb-vn__marke{width:56px;height:3px}

.bfb-vn__label{
	position:absolute;bottom:18px;z-index:4;
	font-size:11px;letter-spacing:.2em;text-transform:uppercase;
	color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.9);
	pointer-events:none;
}
.bfb-vn__label--links{left:20px}
.bfb-vn__label--rechts{right:20px;color:rgba(255,255,255,.55)}
.bfb-vn--y .bfb-vn__label--links{bottom:auto;top:18px;left:20px}
.bfb-vn--y .bfb-vn__label--rechts{bottom:18px;right:auto;left:20px}
.bfb-vn:focus-visible{outline:2px solid var(--bfb-griff);outline-offset:3px}

/* ==================================================== Bildband ==== */
.bfb-band{
	--bfb-hoehe:300px;
	--bfb-lueck:14px;
	--bfb-dauer:40s;
	overflow:hidden;position:relative;
}
.bfb-band--kanten{
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
	        mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.bfb-band__spur{
	display:flex;gap:var(--bfb-lueck);width:max-content;
	animation:bfb-lauf var(--bfb-dauer) linear infinite;
}
.bfb-band--rechts .bfb-band__spur{animation-direction:reverse}
.bfb-band--still .bfb-band__spur{animation:none}
.bfb-band__bild{height:var(--bfb-hoehe);flex:none;border-radius:var(--bfb-radius);overflow:hidden;line-height:0}
.bfb-band__bild img{
	height:100%;width:auto;display:block;
	filter:grayscale(var(--bfb-gray));transition:filter .4s ease;
}
@keyframes bfb-lauf{
	from{transform:translate3d(0,0,0)}
	to{transform:translate3d(calc(-50% - var(--bfb-lueck) / 2),0,0)}
}
@media (hover:hover) and (pointer:fine){
	.bfb-band--halt:hover .bfb-band__spur{animation-play-state:paused}
	.bfb-band__bild:hover img{filter:grayscale(0)}
}

/* ============================================ Video im Rahmen ==== */
.bfb-rahmen-huelle{display:flex;justify-content:center;width:100%}
.bfb-rahmen{
	--bfb-sl:28%;
	--bfb-so:26%;
	--bfb-sb:42%;
	--bfb-sh:58%;
	--bfb-dreh:0deg;
	--bfb-nx:0deg;
	--bfb-ny:0deg;
	--bfb-linien:.16;
	--bfb-glimmen:.1;
	--bfb-knopf:#FC5151;
	position:relative;width:100%;line-height:0;
}
.bfb-rahmen__bild{
	position:relative;width:100%;display:block;z-index:2;pointer-events:none;
}
/* Ohne Rahmen: nur die Bildschirmflaeche, ideal ueber die ganze Seitenbreite */
.bfb-rahmen--ohne{aspect-ratio:var(--bfb-ratio,16/9)}
.bfb-rahmen--ohne .bfb-rahmen__schirm{
	left:0;top:0;right:auto;width:100%;height:100%;transform:none;
	border-radius:var(--bfb-radius,0);
}
/* Das ganze Element neigen, Rahmen und Video kippen dabei gemeinsam */
.bfb-rahmen{rotate:var(--bfb-kippen,0deg)}
.bfb-rahmen--spiegel .bfb-rahmen__bild{transform:scaleX(-1)}

.bfb-rahmen__schirm{
	position:absolute;z-index:1;overflow:hidden;background:#000;
	left:var(--bfb-sl);
	top:var(--bfb-so);
	width:var(--bfb-sb);
	height:var(--bfb-sh);
	transform:rotate(var(--bfb-dreh)) skew(var(--bfb-nx),var(--bfb-ny));
	transform-origin:center center;
}
/* Beim Spiegeln wandert die Flaeche auf die andere Seite */
.bfb-rahmen--spiegel .bfb-rahmen__schirm{
	left:auto;
	right:var(--bfb-sl);
}
/* Video vor dem Rahmen, fuer Bilder ohne ausgeschnittenen Bildschirm */
.bfb-rahmen--davor .bfb-rahmen__schirm{z-index:3}

.bfb-rahmen__schirm > .bfb-rahmen__start{
	position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
/* Der Player behaelt sein 16:9 und wird bildfuellend beschnitten.
   Ohne das wird die Bedienleiste in die Flaeche gequetscht. */
.bfb-rahmen__schirm > .bfb-video{
	position:absolute;top:50%;left:50%;
	border:0;display:block;background:#000;
	translate:-50% -50%;
	scale:var(--bfb-vzoom,1);
}
.bfb-rahmen--cover .bfb-rahmen__schirm > .bfb-video{
	width:auto;height:auto;min-width:100%;min-height:100%;aspect-ratio:16/9;
}
.bfb-rahmen--contain .bfb-rahmen__schirm > .bfb-video{
	width:100%;height:100%;
}
.bfb-rahmen--cover   .bfb-rahmen__schirm img,
.bfb-rahmen--cover   .bfb-rahmen__schirm video{object-fit:cover}
.bfb-rahmen--contain .bfb-rahmen__schirm img,
.bfb-rahmen--contain .bfb-rahmen__schirm video{object-fit:contain}
.bfb-rahmen__schirm img,
.bfb-rahmen__schirm video{width:100%;height:100%;display:block}

.bfb-rahmen__start{
	padding:0;margin:0;background:#000;cursor:pointer;
	position:absolute;inset:0;
}
.bfb-rahmen__pfeil{
	position:absolute;top:50%;left:50%;translate:-50% -50%;
	width:clamp(38px,14%,74px);aspect-ratio:1;border-radius:50%;
	background:var(--bfb-knopf);
	transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.bfb-rahmen__pfeil::before{
	content:"";position:absolute;top:50%;left:54%;translate:-50% -50%;
	border-style:solid;border-width:.42em 0 .42em .68em;
	border-color:transparent transparent transparent #fff;
	font-size:clamp(14px,4.4vw,26px);
}
.bfb-rahmen__start:hover .bfb-rahmen__pfeil{transform:scale(1.1)}

.bfb-rahmen__linien,
.bfb-rahmen__glas{position:absolute;inset:0;pointer-events:none}
.bfb-rahmen__linien{
	opacity:var(--bfb-linien);
	background:repeating-linear-gradient(180deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px);
}
.bfb-rahmen__glas{
	background:radial-gradient(ellipse at 42% 38%,rgba(255,255,255,var(--bfb-glimmen)),transparent 62%);
	box-shadow:inset 0 0 40px 14px rgba(0,0,0,.55);
}
.bfb-rahmen__leer{
	position:absolute;inset:0;display:grid;place-items:center;
	color:rgba(255,255,255,.5);font-size:13px;line-height:1.4;text-align:center;padding:10px;
}
/* Hilfsrand, nur im Editor */
.bfb-rahmen--hilfe .bfb-rahmen__schirm{outline:2px dashed var(--bfb-rot);outline-offset:-2px}
.bfb-rahmen--hilfe .bfb-rahmen__bild{opacity:.82}

/* ======================================= Verhaltens-Klassen ==== */

/* bf-scrolltext: Woerter hellen beim Scrollen nacheinander auf */
.bf-scrolltext .bfb-w{
	display:inline-block;opacity:.25;transition:opacity .25s linear;
}

/* bf-aufdecken: Element faehrt beim Scrollen sanft herein */
.bf-aufdecken{
	opacity:0;transform:translateY(28px);
	transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.bf-aufdecken.ist-da{opacity:1;transform:none}
/* Kinder nacheinander, wenn die Klasse auf einem Container liegt */
.bf-aufdecken--stufen > *{
	opacity:0;transform:translateY(28px);
	transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.bf-aufdecken--stufen.ist-da > *{opacity:1;transform:none}
.bf-aufdecken--stufen.ist-da > *:nth-child(2){transition-delay:.09s}
.bf-aufdecken--stufen.ist-da > *:nth-child(3){transition-delay:.18s}
.bf-aufdecken--stufen.ist-da > *:nth-child(4){transition-delay:.27s}
.bf-aufdecken--stufen.ist-da > *:nth-child(5){transition-delay:.36s}
.bf-aufdecken--stufen.ist-da > *:nth-child(6){transition-delay:.45s}
.bf-aufdecken--stufen.ist-da > *:nth-child(n+7){transition-delay:.54s}

/* ============================ Animationen abgeschaltet ==== */
@media (prefers-reduced-motion:reduce){
	.bfb-band__spur{animation:none}
	.bfb-stufen .bfb-kachel,
	.bf-aufdecken,
	.bf-aufdecken--stufen > *{opacity:1!important;transform:none!important;transition:none}
	.bf-scrolltext .bfb-w{opacity:1!important}
	.bfb-kachel img{transition:none}
}