/**
 * FluidGallery01 – style.css  v3.0
 *
 * Enthält:
 *  • Container, Canvas, Fallback-Bilder (Einweg-Hover)
 *  • Navigationspfeile, Dots, Autoplay-Fortschrittsbalken
 *  • Text-Overlay + Caption-Animationen (fade / slide / clip)
 *  • Lightbox-Overlay (Vollbild)
 *  • Lightbox-Hint-Icon
 *  • Responsive Breakpoints
 *  • prefers-reduced-motion
 *  • Gutenberg-Block-Editor-Preview
 */

/* ═══════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════ */
:root {
	--fg-ease:         cubic-bezier(0.77, 0, 0.175, 1);
	--fg-ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
	--fg-nav-bg:       rgba(0, 0, 0, 0.44);
	--fg-nav-hover:    rgba(0, 0, 0, 0.72);
	--fg-dot-off:      rgba(255, 255, 255, 0.35);
	--fg-dot-on:       rgba(255, 255, 255, 0.92);
	--fg-overlay-grad: linear-gradient(to top, rgba(0,0,0,.62) 0%, transparent 100%);
	--fg-pb-bg:        rgba(255,255,255,.18);
	--fg-pb-fill:      rgba(255,255,255,.85);
	--fg-spinner:      rgba(255,255,255,.88);
	--fg-lb-bg:        rgba(0,0,0,.92);
	--fg-caption-dur:  0.32s;
}

/* ═══════════════════════════════════════════════════════════════
   WRAPPER & CONTAINER
   ═══════════════════════════════════════════════════════════════ */
.fg-wrapper {
	display:  block;
	width:    100%;
	position: relative;
	outline:  none;
}

.fg-wrapper:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.55); border-radius: 4px; }

.fg-container {
	position:        relative;
	width:           100%;
	height:          500px;
	overflow:        hidden;
	background:      #0a0a14;
	cursor:          crosshair;
	will-change:     transform;
	transform:       translateZ(0);
	user-select:     none;
	-webkit-user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   CANVAS
   ═══════════════════════════════════════════════════════════════ */
.fg-canvas {
	display:  none;
	position: absolute;
	inset:    0;
	width:    100% !important;
	height:   100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   FALLBACK-BILDER – EINWEG-Hover
   Die .fg--hover-Klasse wird beim mouseenter gesetzt
   und NICHT beim mouseleave entfernt.
   ═══════════════════════════════════════════════════════════════ */
.fg-fallback-img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: opacity 0.65s var(--fg-ease);
	pointer-events: none;
}

.fg-fallback-img--a { opacity: 1; z-index: 1; }
.fg-fallback-img--b { opacity: 0; z-index: 2; }

.fg--fallback.fg--hover .fg-fallback-img--b { opacity: 1; }
.fg--fallback.fg--hover .fg-fallback-img--a { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATIONSPFEILE
   ═══════════════════════════════════════════════════════════════ */
.fg-nav {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         20;
	width:           46px;
	height:          46px;
	padding:         0;
	border:          none;
	border-radius:   50%;
	background:      var(--fg-nav-bg);
	color:           #fff;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background .2s, transform .2s, opacity .2s;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow:      0 2px 14px rgba(0,0,0,.38);
}
.fg-nav:hover   { background: var(--fg-nav-hover); transform: translateY(-50%) scale(1.12); }
.fg-nav:disabled{ opacity: .25; cursor: default; pointer-events: none; }
.fg-nav:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 2px; }
.fg-nav--prev   { left: 16px; }
.fg-nav--next   { right: 16px; }
.fg-nav svg     { width: 20px; height: 20px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   DOTS
   ═══════════════════════════════════════════════════════════════ */
.fg-dots {
	position:        absolute;
	bottom:          18px;
	left:            50%;
	transform:       translateX(-50%);
	display:         flex;
	gap:             8px;
	z-index:         20;
	padding:         6px 10px;
	border-radius:   20px;
	background:      rgba(0,0,0,.28);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.fg-dot {
	width:  8px; height: 8px; padding: 0; border: none; border-radius: 50%;
	background: var(--fg-dot-off); cursor: pointer;
	transition: background .25s, transform .25s; outline: none;
}
.fg-dot--active, .fg-dot:hover { background: var(--fg-dot-on); transform: scale(1.35); }
.fg-dot:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   TEXT-OVERLAY + CAPTION-ANIMATIONEN
   ═══════════════════════════════════════════════════════════════ */
.fg-text-overlay {
	position:       absolute;
	bottom:         0; left: 0; right: 0;
	padding:        52px 22px 52px;
	background:     var(--fg-overlay-gradient);
	z-index:        10;
	pointer-events: none;
}

.fg-slide-title {
	margin: 0 0 4px;
	color:  #fff;
	font-size:   clamp(.95rem, 1.5vw + .5rem, 1.3rem);
	font-weight: 600;
	letter-spacing: .01em;
	text-shadow: 0 1px 6px rgba(0,0,0,.55);
	line-height: 1.4;
}
.fg-slide-desc {
	margin: 0;
	color:  rgba(255,255,255,.78);
	font-size:  clamp(.78rem, 1vw + .4rem, .95rem);
	text-shadow: 0 1px 4px rgba(0,0,0,.45);
	line-height: 1.4;
}

/* ── Animation: Fade ────────────────────────────────────────── */
[data-caption-anim="fade"] .fg-slide-title,
[data-caption-anim="fade"] .fg-slide-desc {
	transition: opacity var(--fg-caption-dur) ease;
}
[data-caption-anim="fade"].fg-caption--leaving  { opacity: 0; }
[data-caption-anim="fade"].fg-caption--entering { opacity: 0; }

/* ── Animation: Slide-Up ────────────────────────────────────── */
[data-caption-anim="slide"] .fg-slide-title,
[data-caption-anim="slide"] .fg-slide-desc {
	transition: opacity var(--fg-caption-dur) var(--fg-ease-out),
	            transform var(--fg-caption-dur) var(--fg-ease-out);
}
[data-caption-anim="slide"].fg-caption--leaving  { opacity: 0; transform: translateY(12px); }
[data-caption-anim="slide"].fg-caption--entering { opacity: 0; transform: translateY(-10px); }

/* ── Animation: Clip-Path (Wischeffekt) ─────────────────────── */
[data-caption-anim="clip"] .fg-slide-title,
[data-caption-anim="clip"] .fg-slide-desc {
	transition: clip-path var(--fg-caption-dur) var(--fg-ease-out),
	            opacity  var(--fg-caption-dur) ease;
}
[data-caption-anim="clip"].fg-caption--leaving  {
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}
[data-caption-anim="clip"].fg-caption--entering {
	opacity: 0;
	clip-path: inset(0 0 0 100%);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX-HINWEIS (Icon rechts oben)
   ═══════════════════════════════════════════════════════════════ */
.fg-lightbox-hint {
	position:        absolute;
	top:             14px;
	right:           14px;
	z-index:         20;
	width:           32px;
	height:          32px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   50%;
	background:      rgba(0,0,0,.35);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity:         0;
	transition:      opacity .25s;
	pointer-events:  none;
}
.fg-container:hover .fg-lightbox-hint { opacity: 1; }
.fg-lightbox-hint svg { width: 14px; height: 14px; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX-OVERLAY
   ═══════════════════════════════════════════════════════════════ */
body.fg-lightbox-open { overflow: hidden; }

.fg-lightbox-overlay {
	position:        fixed;
	inset:           0;
	z-index:         99990;
	background:      var(--fg-lb-bg);
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	transition:      opacity .3s ease;
}
.fg-lightbox-overlay--visible { opacity: 1; }

.fg-lightbox-canvas {
	width:      min(90vw, 90vh * 1.78);   /* 16:9 Aspekt */
	height:     min(90vh, 90vw * 0.5625);
	border-radius: 6px;
	box-shadow: 0 20px 80px rgba(0,0,0,.85);
}

.fg-lightbox-close {
	position:   absolute;
	top:        20px;
	right:      20px;
	width:      40px;
	height:     40px;
	border:     none;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color:      #fff;
	font-size:  18px;
	cursor:     pointer;
	transition: background .2s;
	display:    flex;
	align-items:     center;
	justify-content: center;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.fg-lightbox-close:hover { background: rgba(255,255,255,.22); }
.fg-lightbox-close:focus-visible { outline: 2px solid rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════════════════════
   AUTOPLAY-FORTSCHRITTSBALKEN
   ═══════════════════════════════════════════════════════════════ */
.fg-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--fg-pb-bg); z-index: 25; }
.fg-progress-bar__fill { height: 100%; width: 0%; background: var(--fg-pb-fill); }

/* ═══════════════════════════════════════════════════════════════
   LADEINDIKATOR
   ═══════════════════════════════════════════════════════════════ */
.fg-loader {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.25); z-index: 30; transition: opacity .4s; pointer-events: none;
}
.fg-loader__spinner {
	display: block; width: 38px; height: 38px;
	border: 3px solid rgba(255,255,255,.18);
	border-top-color: var(--fg-spinner);
	border-radius: 50%;
	animation: fg-spin .85s linear infinite;
}
@keyframes fg-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   KURSOR-PULS
   ═══════════════════════════════════════════════════════════════ */
.fg-container::after {
	content: ''; position: absolute; bottom: 14px; right: 16px;
	width: 9px; height: 9px; border-radius: 50%;
	background: rgba(255,255,255,.48); opacity: 0;
	transition: opacity .3s; pointer-events: none; z-index: 5;
}
.fg-container:hover::after { opacity: 1; animation: fg-pulse 1.5s ease-in-out infinite; }
@keyframes fg-pulse { 0%,100%{transform:scale(1);opacity:.48;} 50%{transform:scale(1.9);opacity:.15;} }

/* ═══════════════════════════════════════════════════════════════
   ELEMENTOR EDITOR
   ═══════════════════════════════════════════════════════════════ */
.elementor-editor-active .fg-container::before {
	content:    '⬡ Fluid Gallery — Effekt im Frontend aktiv';
	position:   absolute; inset: 0;
	display:    flex; align-items: center; justify-content: center;
	font-family:system-ui, sans-serif; font-size: 13px;
	color:      rgba(255,255,255,.72); background: rgba(5,5,28,.52);
	letter-spacing: .04em; z-index: 50; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.fg-container  { height: 400px; }
	.fg-nav        { width: 40px; height: 40px; }
	.fg-nav svg    { width: 18px; height: 18px; }
}
@media (max-width: 767px) {
	.fg-container  { height: 280px; cursor: pointer; }
	.fg-nav        { width: 36px; height: 36px; }
	.fg-nav--prev  { left: 10px; }
	.fg-nav--next  { right: 10px; }
	.fg-nav svg    { width: 16px; height: 16px; }
	.fg-container::after { display: none; }
	.fg-text-overlay { padding: 36px 14px 44px; }
	.fg-dots { bottom: 14px; }
	/* Lightbox vollflächig auf Mobile */
	.fg-lightbox-canvas { width: 100vw; height: 56vw; border-radius: 0; }
}
@media (max-width: 480px) {
	.fg-container  { height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.fg-fallback-img, .fg-nav, .fg-dot,
	[data-caption-anim] .fg-slide-title,
	[data-caption-anim] .fg-slide-desc,
	.fg-lightbox-overlay { transition: none; }
	.fg-loader__spinner  { animation: none; border-color: var(--fg-spinner); }
	.fg-container::after { animation: none; opacity: 0; }
	.fg-progress-bar__fill { transition: none !important; }
}