.fpg-gallery{
	--fpg-accent:#39FF68;
	--fpg-gap:12px;
	--fpg-cols-d:4;
	--fpg-cols-t:3;
	--fpg-cols-m:2;
	--fpg-height-d:180px;
	--fpg-height-t:170px;
	--fpg-height-m:150px;
	--fpg-max-width:1280px;
	--fpg-radius:8px;
	--fpg-fit:cover;
	width:100%;
	max-width:var(--fpg-max-width);
	margin-left:auto;
	margin-right:auto;
}
.fpg-grid{
	display:grid;
	grid-template-columns:repeat(var(--fpg-cols-d),minmax(0,1fr));
	gap:var(--fpg-gap);
}
.fpg-item{
	margin:0;
	min-width:0;
	overflow:hidden;
	border-width:1px;
	border-style:solid;
	border-color:#18342A;
	border-radius:var(--fpg-radius);
	background:#081014;
	transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.fpg-link{
	position:relative;
	display:block;
	width:100%;
	height:var(--fpg-height-d);
	padding:0;
	border:0;
	background:#081014;
	cursor:pointer;
	overflow:hidden;
	color:inherit;
}
.fpg-link img{
	display:block;
	width:100%;
	height:100%;
	object-fit:var(--fpg-fit);
	transition:transform .35s ease,filter .3s ease;
}
.fpg-hover-glow .fpg-item:hover{
	border-color:var(--fpg-accent);
	transform:translateY(-2px);
	box-shadow:0 0 20px color-mix(in srgb,var(--fpg-accent) 18%,transparent);
}
.fpg-hover-glow .fpg-item:hover img{
	transform:scale(1.035);
	filter:brightness(1.06);
}
.fpg-title{
	position:absolute;
	left:0;right:0;bottom:0;
	padding:28px 12px 10px;
	background:linear-gradient(transparent,rgba(0,0,0,.78));
	color:#fff;
	text-align:left;
	font-size:.85rem;
	font-weight:800;
}
.fpg-filterbar{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:16px;
}
.fpg-filter{
	padding:8px 12px;
	border-width:1px;
	border-style:solid;
	border-color:#18342A;
	border-radius:999px;
	background:#0D171B;
	color:#D4D8DC;
	cursor:pointer;
	font-weight:700;
}
.fpg-filter.is-active,.fpg-filter:hover{
	border-color:var(--fpg-accent);
	color:var(--fpg-accent);
}
.fpg-loadmore-wrap{
	display:flex;
	justify-content:center;
	margin-top:20px;
}
.fpg-loadmore{
	padding:10px 16px;
	border:1px solid var(--fpg-accent);
	border-radius:5px;
	background:transparent;
	color:#F7F7F7;
	font-weight:800;
	cursor:pointer;
	transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;
}
.fpg-loadmore:hover{
	transform:translateY(-1px);
	box-shadow:0 0 18px color-mix(in srgb,var(--fpg-accent) 14%,transparent);
}
.fpg-loadmore.is-loading{opacity:.55;pointer-events:none}
.fpg-loadmore-count{opacity:.7;font-weight:600}
.fpg-empty{
	padding:20px;border-width:1px;
	border-style:solid;
	border-color:#18342A;border-radius:8px;background:#0D171B;color:#D4D8DC;
}
.fpg-lb{
	position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(0,0,0,.92);
}
.fpg-lb.is-open{display:flex}
.fpg-lb-inner{position:relative;display:flex;flex-direction:column;align-items:center;max-width:min(1400px,96vw);max-height:94vh}
.fpg-lb-img{display:block;max-width:100%;max-height:82vh;object-fit:contain;border-radius:8px}
.fpg-lb-close,.fpg-lb-prev,.fpg-lb-next{position:fixed;z-index:2;border:1px solid #315043;background:rgba(6,16,8,.78);color:#fff;cursor:pointer}
.fpg-lb-close{
	top:18px;right:18px;width:44px;height:44px;border-radius:50%;
	padding:0!important;display:flex;align-items:center;justify-content:center;
	background:rgba(6,16,8,.88);border:1px solid rgba(57,255,104,.42);
	box-shadow:0 0 18px rgba(57,255,104,.12);
	transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease
}
.fpg-lb-close::before,.fpg-lb-close::after{
	content:"";position:absolute;width:18px;height:2px;border-radius:2px;background:#fff
}
.fpg-lb-close::before{transform:rotate(45deg)}
.fpg-lb-close::after{transform:rotate(-45deg)}
.fpg-lb-close:hover{
	transform:scale(1.06);border-color:var(--fpg-accent,#39FF68);
	background:rgba(8,25,13,.96);box-shadow:0 0 20px rgba(57,255,104,.22)
}
.fpg-lb-prev,.fpg-lb-next{top:50%;transform:translateY(-50%);width:44px;height:58px;border-radius:8px;font-size:26px}
.fpg-lb-prev{left:18px}.fpg-lb-next{right:18px}
.fpg-lb-caption{margin-top:12px;max-width:900px;text-align:center;color:#D4D8DC}
.fpg-lb-caption strong{display:block;color:#fff;margin-bottom:3px}
@media(max-width:1024px){
	.fpg-grid{grid-template-columns:repeat(var(--fpg-cols-t),minmax(0,1fr))}
	.fpg-link{height:var(--fpg-height-t)}
}
@media(max-width:767px){
	.fpg-grid{grid-template-columns:repeat(var(--fpg-cols-m),minmax(0,1fr))}
	.fpg-link{height:var(--fpg-height-m)}
	.fpg-lb{padding:14px}
	.fpg-lb-prev{left:8px}.fpg-lb-next{right:8px}.fpg-lb-close{top:8px;right:8px}
}


/* v1.3.1: Theme-/Elementor-Buttonstyles dürfen den Galerie-Rand nicht übermalen.
   Der sichtbare Rand gehört ausschließlich zu .fpg-item. */
.fpg-gallery .fpg-link,
.fpg-gallery button.fpg-link,
.elementor .fpg-gallery button.fpg-link {
	-webkit-appearance:none !important;
	appearance:none !important;
	border:none !important;
	border-width:0 !important;
	border-style:none !important;
	border-color:transparent !important;
	outline:none !important;
	box-shadow:none !important;
	text-shadow:none !important;
	border-radius:inherit;
	background:#081014;
	padding:0 !important;
	margin:0 !important;
	min-height:0 !important;
	line-height:0;
}

.fpg-gallery .fpg-link:hover,
.fpg-gallery .fpg-link:focus,
.fpg-gallery .fpg-link:active,
.elementor .fpg-gallery button.fpg-link:hover,
.elementor .fpg-gallery button.fpg-link:focus,
.elementor .fpg-gallery button.fpg-link:active {
	border:none !important;
	border-width:0 !important;
	border-color:transparent !important;
	outline:none !important;
	box-shadow:none !important;
	background:#081014;
}

/* Tastaturfokus bleibt sichtbar, ohne den konfigurierten Kartenrand zu ersetzen. */
.fpg-gallery .fpg-link:focus-visible {
	box-shadow:inset 0 0 0 2px var(--fpg-accent) !important;
}


/* v1.3.2: Bild-Anpassung zuverlässig gegen Theme-/Elementor-CSS durchsetzen */
.fpg-gallery .fpg-link img,
.elementor .fpg-gallery .fpg-link img {
	display:block !important;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	object-fit:var(--fpg-fit, cover) !important;
	object-position:50% 50% !important;
	margin:0 auto !important;
}

/* Bei Contain soll die freie Fläche sichtbar sein. */
.fpg-gallery .fpg-link {
	overflow:hidden !important;
}


/* v1.4.1 – Hochkant-/Contain-Bilder zuverlässig mittig ausrichten */
.fpg-gallery[style*="--fpg-fit:contain"] .fpg-link img,
.elementor .fpg-gallery[style*="--fpg-fit:contain"] .fpg-link img {
	object-fit:contain !important;
	object-position:50% 50% !important;
	margin-left:auto !important;
	margin-right:auto !important;
}


/* v1.4.2 – Galerie zentrieren */
.fpg-gallery-align-left .fpg-gallery{
	margin-left:0 !important;
	margin-right:auto !important;
}
.fpg-gallery-align-center .fpg-gallery{
	margin-left:auto !important;
	margin-right:auto !important;
}
.fpg-gallery-align-right .fpg-gallery{
	margin-left:auto !important;
	margin-right:0 !important;
}

/* Letzte unvollständige Reihe mittig ausrichten.
   Wir schalten dafür bei aktivierter Option auf flex-wrap um. */
.fpg-center-last-row-yes .fpg-grid{
	display:flex !important;
	flex-wrap:wrap;
	justify-content:center;
	align-items:stretch;
}

/* Desktop: Breite der Karten passend zur Elementor-Spaltenzahl ableiten.
   Standard 4 Spalten; responsive Regeln unten überschreiben. */
.fpg-center-last-row-yes .fpg-item{
	flex:0 1 calc((100% - 3 * 12px) / 4);
	min-width:0;
}

/* Wenn Elementor eigene Gap-Werte schreibt, bleiben die Karten optisch sauber;
   für typische Werte sind 4/3/2/1 Spalten optimiert. */
@media(max-width:1024px){
	.fpg-center-last-row-yes .fpg-item{
		flex-basis:calc((100% - 2 * 10px) / 3);
	}
}
@media(max-width:767px){
	.fpg-center-last-row-yes .fpg-item{
		flex-basis:calc((100% - 8px) / 2);
	}
}
@media(max-width:480px){
	.fpg-center-last-row-yes .fpg-item{
		flex-basis:100%;
	}
}


/* v1.4.3 – Bei "Contain" wird nicht nur der Bildinhalt,
   sondern das eigentliche <img>-Element mittig in der Kachel platziert. */
.fpg-fit-contain .fpg-link,
.elementor .fpg-fit-contain .fpg-link,
.fpg-gallery.fpg-fit-contain button.fpg-link {
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
}

.fpg-fit-contain .fpg-link img,
.elementor .fpg-fit-contain .fpg-link img,
.fpg-gallery.fpg-fit-contain button.fpg-link img {
	display:block !important;
	width:auto !important;
	height:auto !important;
	max-width:100% !important;
	max-height:100% !important;
	margin:auto !important;
	object-fit:contain !important;
	object-position:50% 50% !important;
	flex:0 0 auto !important;
}

/* Cover und Strecken bleiben bewusst flächig. */
.fpg-fit-cover .fpg-link img,
.fpg-fit-fill .fpg-link img {
	width:100% !important;
	height:100% !important;
	max-width:none !important;
}


/* v1.4.4 – tatsächlicher Fix für schmale/Hochkantbilder:
   Einige Themes setzen Buttons auf Inhaltsbreite. Dadurch war zwar das Bild
   innerhalb des Buttons zentriert, der Button selbst aber nur so breit wie
   das Bild und klebte links in der Kachel. */
.fpg-gallery.fpg-fit-contain .fpg-item{
	position:relative;
}

.fpg-gallery.fpg-fit-contain .fpg-link,
.fpg-gallery.fpg-fit-contain button.fpg-link,
.elementor .fpg-gallery.fpg-fit-contain .fpg-link,
.elementor .fpg-gallery.fpg-fit-contain button.fpg-link{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	width:100% !important;
	max-width:100% !important;
	min-width:100% !important;
	height:var(--fpg-height-d) !important;
	margin:0 !important;
	padding:0 !important;
	align-self:stretch !important;
	box-sizing:border-box !important;
}

.fpg-gallery.fpg-fit-contain .fpg-link img,
.fpg-gallery.fpg-fit-contain button.fpg-link img,
.elementor .fpg-gallery.fpg-fit-contain .fpg-link img,
.elementor .fpg-gallery.fpg-fit-contain button.fpg-link img{
	display:block !important;
	width:auto !important;
	height:auto !important;
	max-width:100% !important;
	max-height:100% !important;
	margin:auto !important;
	object-fit:contain !important;
	object-position:center center !important;
	flex:0 0 auto !important;
}

@media(max-width:1024px){
	.fpg-gallery.fpg-fit-contain .fpg-link,
	.fpg-gallery.fpg-fit-contain button.fpg-link,
	.elementor .fpg-gallery.fpg-fit-contain .fpg-link,
	.elementor .fpg-gallery.fpg-fit-contain button.fpg-link{
		height:var(--fpg-height-t) !important;
	}
}

@media(max-width:767px){
	.fpg-gallery.fpg-fit-contain .fpg-link,
	.fpg-gallery.fpg-fit-contain button.fpg-link,
	.elementor .fpg-gallery.fpg-fit-contain .fpg-link,
	.elementor .fpg-gallery.fpg-fit-contain button.fpg-link{
		height:var(--fpg-height-m) !important;
	}
}