/* Vereinsgalerie – alle Farben/Größen als CSS-Variablen (Vereinsgalerie › Design) */
.vg-galerie, .vg-fotos, .vg-lb, .vg-slider {
	--vg-schrift: inherit;
	/* Überschrift */
	--vg-u-farbe: #333333; --vg-u-groesse: 22px; --vg-u-bg: #dbe9df; --vg-u-rand: #c8dccd; --vg-u-radius: 4px; --vg-u-muster: none;
	--vg-u-ausrichtung: left; --vg-u-abstand: 14px; --vg-u-anzeige: block;
	/* Liste */
	--vg-l-bg: #f2f7f3; --vg-l-rand: #d3e2d7; --vg-l-rand-breite: 1px; --vg-l-radius: 6px; --vg-l-schatten: 0;
	--vg-l-innen: 24px; --vg-l-abstand: 20px; --vg-l-bildbreite: 310px; --vg-l-ausrichtung: left;
	--vg-l-titel-farbe: #c0392b; --vg-l-titel-stil: italic; --vg-l-titel-groesse: 20px; --vg-l-datum-farbe: #1f8a3c; --vg-l-datum-groesse: 16px;
	/* Raster */
	--vg-r-bg: #f2f7f3; --vg-r-rand: #d3e2d7; --vg-r-rand-breite: 1px; --vg-r-radius: 6px; --vg-r-schatten: 0;
	--vg-r-innen: 20px; --vg-r-abstand: 20px;
	/* Fotorahmen (Titelbild) */
	--vg-f-farbe: #ffffff; --vg-f-breite: 4px; --vg-f-radius: 0px; --vg-f-schatten: 6; --vg-f-format: 6 / 5; --vg-f-zoom: 1.04;
	/* Text im Bild */
	--vg-t-anzeige: block; --vg-t-deckkraft-start: 1; --vg-t-bg: #1e5631; --vg-t-bg-deckkraft: 75; --vg-t-farbe: #ffffff;
	--vg-t-groesse: 15px;
	/* Fotos eines Albums */
	--vg-a-abstand: 10px; --vg-a-breite: 3px; --vg-a-radius: 0px; --vg-a-format: 1 / 1;
	/* Lightbox */
	--vg-lb-bg: #0a0a0a; --vg-lb-deckkraft: 82; --vg-lb-farbe: #ffffff; --vg-lb-pfeil: 54px;
	--vg-lb-max-breite: 1000px; --vg-lb-max-hoehe: 75; --vg-lb-rahmen: 6px;
	/* Bildkarussell */
	--vg-k-hg: #dddddd; --vg-k-farbe: #ffffff; --vg-k-breite: 4px; --vg-k-radius: 0px; --vg-k-schatten: 6;
	--vg-k-schatten-farbe: #000000; --vg-k-schatten-deckkraft: 35; --vg-k-innen: 0px;
	box-sizing: border-box; font-family: var(--vg-schrift);
}
.vg-galerie *, .vg-fotos *, .vg-slider, .vg-slider * { box-sizing: border-box; }

.vg-galerie h2.vg-ueberschrift { display: var(--vg-u-anzeige); margin: 0 0 var(--vg-u-abstand); padding: 6px 10px; text-align: var(--vg-u-ausrichtung);
	font-weight: 400; font-size: var(--vg-u-groesse); line-height: 1.3; color: var(--vg-u-farbe); font-family: var(--vg-schrift);
	background-color: var(--vg-u-bg); background-image: var(--vg-u-muster); border: 1px solid var(--vg-u-rand); border-radius: var(--vg-u-radius); }

/* Titelbild mit Rahmen, Schatten und Text im Bild */
.vg-galerie a.vg-cover, .vg-cover { position: relative; display: block; overflow: hidden; border: var(--vg-f-breite) solid var(--vg-f-farbe);
	border-radius: var(--vg-f-radius); background: #ddd; aspect-ratio: var(--vg-f-format); text-decoration: none; cursor: zoom-in;
	box-shadow: 0 calc(var(--vg-f-schatten) * .2px) calc(var(--vg-f-schatten) * 1px) rgba(0, 0, 0, .35); }
.vg-cover img.vg-cover-bild { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; border-radius: 0; }
/* Ausschnitt des Titelbilds – gegen Theme-/Optimierungs-CSS abgesichert */
.vg-galerie .vg-cover img.vg-cover-bild, .elementor .vg-galerie .vg-cover img.vg-cover-bild { object-position: var(--vg-fokus, 50% 50%) !important; object-fit: cover !important; }
.vg-cover:hover img.vg-cover-bild, .vg-cover:focus img.vg-cover-bild { transform: scale(var(--vg-f-zoom)); }
.vg-cover-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; display: var(--vg-t-anzeige);
	background: color-mix(in srgb, var(--vg-t-bg) calc(var(--vg-t-bg-deckkraft) * 1%), transparent);
	color: var(--vg-t-farbe); text-align: center; font-size: var(--vg-t-groesse); line-height: 1.5;
	opacity: var(--vg-t-deckkraft-start); transition: opacity .25s ease; }
.vg-cover:hover .vg-cover-text, .vg-cover:focus .vg-cover-text { opacity: 1; }
.vg-cover-leer { display: flex; align-items: center; justify-content: center; color: #666; padding: 10px; text-align: center; }

/* Liste (wie „Fotos 2025/2026“) */
.vg-liste .vg-karte { display: grid; grid-template-columns: minmax(0, var(--vg-l-bildbreite)) minmax(0, 1fr); gap: 30px; align-items: center;
	background: var(--vg-l-bg); border: var(--vg-l-rand-breite) solid var(--vg-l-rand); border-radius: var(--vg-l-radius);
	box-shadow: 0 calc(var(--vg-l-schatten) * .17px) calc(var(--vg-l-schatten) * 1px) rgba(0, 0, 0, .25);
	padding: var(--vg-l-innen) calc(var(--vg-l-innen) * 1.18); margin: 0 0 var(--vg-l-abstand); }
.vg-liste .vg-karte-text { text-align: var(--vg-l-ausrichtung); }
.vg-liste .vg-karte-text h3 { margin: 0 0 6px; font-size: var(--vg-l-titel-groesse); font-weight: 400; line-height: 1.6;
	color: var(--vg-l-titel-farbe); font-style: var(--vg-l-titel-stil); font-family: var(--vg-schrift); }
.vg-liste .vg-datum { margin: 0; font-size: var(--vg-l-datum-groesse); color: var(--vg-l-datum-farbe); }
.vg-liste .vg-beschreibung { margin-top: 10px; font-size: calc(var(--vg-l-datum-groesse) - 2px); color: #222; }

/* Raster (Startseite) */
.vg-raster { display: grid; grid-template-columns: repeat(var(--vg-spalten, 2), minmax(0, 1fr)); gap: var(--vg-r-abstand); }
.vg-raster .vg-karte { background: var(--vg-r-bg); border: var(--vg-r-rand-breite) solid var(--vg-r-rand); border-radius: var(--vg-r-radius);
	padding: var(--vg-r-innen) calc(var(--vg-r-innen) * 1.8);
	box-shadow: 0 calc(var(--vg-r-schatten) * .17px) calc(var(--vg-r-schatten) * 1px) rgba(0, 0, 0, .25); }
.vg-raster h2.vg-ueberschrift { grid-column: 1 / -1; margin-bottom: 0; }

/* Fotos eines Albums */
.vg-fotos { display: grid; grid-template-columns: repeat(var(--vg-spalten, 4), minmax(0, 1fr)); gap: var(--vg-a-abstand); }
.vg-fotos a.vg-foto, .vg-foto { display: block; aspect-ratio: var(--vg-a-format); overflow: hidden; border: var(--vg-a-breite) solid var(--vg-f-farbe);
	border-radius: var(--vg-a-radius); cursor: zoom-in;
	box-shadow: 0 calc(var(--vg-f-schatten) * .15px) calc(var(--vg-f-schatten) * .7px) rgba(0, 0, 0, .3); }
.vg-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.vg-foto:hover img { transform: scale(var(--vg-f-zoom)); }
.vg-leer { color: #777; }

@media (max-width: 760px) {
	.vg-liste .vg-karte { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
	.vg-raster { grid-template-columns: repeat(min(var(--vg-spalten, 2), 2), minmax(0, 1fr)); gap: 12px; }
	.vg-raster .vg-karte { padding: 12px; }
	.vg-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 480px) {
	.vg-raster { grid-template-columns: 1fr; }
}

/* Lightbox */
.vg-lb { position: fixed; inset: 0; z-index: 999999; display: none; color: var(--vg-lb-farbe);
	background: color-mix(in srgb, var(--vg-lb-bg) calc(var(--vg-lb-deckkraft) * 1%), transparent);
	user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.vg-lb.vg-offen { display: block; }
.vg-lb-buehne { position: absolute; inset: 52px 60px 64px; display: flex; align-items: center; justify-content: center; }
.vg-lb-buehne img { max-width: min(100%, var(--vg-lb-max-breite)); max-height: min(100%, calc(var(--vg-lb-max-hoehe) * 1vh));
	object-fit: contain; box-shadow: 0 4px 30px rgba(0, 0, 0, .6); border: var(--vg-lb-rahmen) solid #fff; background: #fff; cursor: pointer;
	opacity: 0; transition: opacity .25s ease; }
.vg-lb-buehne img.vg-da { opacity: 1; }
.vg-lb-kopf { position: absolute; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center;
	justify-content: space-between; padding: 0 12px 0 18px; font-size: 15px; }
.vg-lb-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.vg-lb-fuss { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; font-size: 14px; padding: 0 16px; }
.vg-lb-zahl { opacity: .7; font-size: 13px; }
.vg-lb button { background: transparent; border: none; color: var(--vg-lb-farbe); cursor: pointer; padding: 0; line-height: 1;
	opacity: .8; transition: opacity .2s; font-family: Arial, sans-serif; }
.vg-lb button:hover, .vg-lb button:focus-visible { opacity: 1; }
.vg-lb-zu { font-size: 34px; width: 44px; height: 44px; }
.vg-lb-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 90px; font-size: var(--vg-lb-pfeil); }
.vg-lb-zurueck { left: 4px; }
.vg-lb-weiter { right: 4px; }
.vg-lb-laden { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px; border: 3px solid rgba(255,255,255,.25);
	border-top-color: #fff; border-radius: 50%; animation: vg-dreh 0.8s linear infinite; display: none; }
.vg-lb.vg-laedt .vg-lb-laden { display: block; }
@keyframes vg-dreh { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
	.vg-lb-buehne { inset: 52px 0 64px; }
	.vg-lb-pfeil { width: 44px; font-size: calc(var(--vg-lb-pfeil) * .75); background: rgba(0, 0, 0, .25); }
}
body.vg-lb-aktiv { overflow: hidden; }

/* Vorschau der Lightbox im Designer */
.vg-lb.vg-lb-muster { position: relative; inset: auto; display: block; height: 260px; z-index: 1; border-radius: 6px; overflow: hidden; }
.vg-lb.vg-lb-muster .vg-lb-buehne img { opacity: 1; }

/* Elementor und manche Themes setzen bei Links „box-shadow: none“ – hier bewusst stärker */
.elementor .vg-galerie a.vg-cover, .vg-galerie .vg-karte a.vg-cover {
	box-shadow: 0 calc(var(--vg-f-schatten) * .2px) calc(var(--vg-f-schatten) * 1px) rgba(0, 0, 0, .35);
	border: var(--vg-f-breite) solid var(--vg-f-farbe); }
.elementor .vg-fotos a.vg-foto, .vg-fotos a.vg-foto {
	box-shadow: 0 calc(var(--vg-f-schatten) * .15px) calc(var(--vg-f-schatten) * .7px) rgba(0, 0, 0, .3);
	border: var(--vg-a-breite) solid var(--vg-f-farbe); }

/* Bildkarussell / Laufband / Diashow */
.vg-slider { position: relative; --vg-s-hoehe: 240px; --vg-s-abstand: 12px; --vg-s-anzahl: 3; --vg-s-anpassen: cover; }
.vg-slider .vg-s-fenster { overflow: hidden; padding: max(10px, calc(var(--vg-k-schatten, 6) * 1px)) 0 max(14px, calc(var(--vg-k-schatten, 6) * 1.3px)); }
.vg-slider .vg-s-spur { display: flex; gap: var(--vg-s-abstand); will-change: transform; }
.vg-slider .vg-s-foto { position: relative; display: block; flex: 0 0 auto; min-width: 0; height: var(--vg-s-hoehe); overflow: hidden;
	background: var(--vg-k-hg, #ddd); text-decoration: none; cursor: zoom-in; }
.vg-slider span.vg-s-foto { cursor: default; }
.vg-slider .vg-s-foto img.vg-s-bild { display: block; height: 100%; width: auto; max-width: none; object-fit: cover; }
.vg-slider .vg-s-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 13px; text-align: center;
	color: var(--vg-t-farbe, #fff); background: color-mix(in srgb, var(--vg-t-bg, #1e5631) 75%, transparent); }
.vg-slider .vg-s-foto img.vg-s-bild { background: var(--vg-k-hg, #ddd); }
.vg-slider.vg-s-rahmen .vg-s-foto { padding: var(--vg-k-innen, 0px); background: var(--vg-k-farbe, #fff); }
.vg-slider.vg-s-rahmen .vg-s-text { left: var(--vg-k-innen, 0px); right: var(--vg-k-innen, 0px); bottom: var(--vg-k-innen, 0px); }
.vg-slider.vg-s-rahmen .vg-s-foto { border: var(--vg-k-breite, 4px) solid var(--vg-k-farbe, #fff); border-radius: var(--vg-k-radius, 0);
	box-shadow: 0 calc(var(--vg-k-schatten, 6) * .2px) calc(var(--vg-k-schatten, 6) * 1px) color-mix(in srgb, var(--vg-k-schatten-farbe, #000) calc(var(--vg-k-schatten-deckkraft, 35) * 1%), transparent); }
.elementor .vg-slider.vg-s-rahmen a.vg-s-foto { box-shadow: 0 calc(var(--vg-k-schatten, 6) * .2px) calc(var(--vg-k-schatten, 6) * 1px) color-mix(in srgb, var(--vg-k-schatten-farbe, #000) calc(var(--vg-k-schatten-deckkraft, 35) * 1%), transparent); }

/* Karussell: mehrere Fotos gleich breit nebeneinander */
.vg-karussell .vg-s-fenster { padding-left: 2px; padding-right: 2px; }
.vg-karussell .vg-s-foto { flex: 0 0 calc((100% - (var(--vg-s-anzahl) - 1) * var(--vg-s-abstand)) / var(--vg-s-anzahl)); }
.vg-karussell .vg-s-foto img.vg-s-bild { width: 100%; object-fit: var(--vg-s-anpassen); }
@media (max-width: 760px) { .vg-karussell { --vg-s-anzahl: 2 !important; } }
@media (max-width: 480px) { .vg-karussell { --vg-s-anzahl: 1 !important; } }

/* Laufband: fließend */
.vg-laufband .vg-s-spur.vg-s-laeuft { animation: vg-laufen var(--vg-s-dauer, 30s) linear infinite; }
.vg-laufband .vg-s-spur.vg-s-rueckwaerts { animation-direction: reverse; }
.vg-laufband.vg-s-pause:hover .vg-s-spur { animation-play-state: paused; }
@keyframes vg-laufen { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--vg-s-weg, 50%))); } }

/* Diashow: ein Foto, Überblendung */
.vg-diashow .vg-s-buehne { position: relative; height: var(--vg-s-hoehe); }
.vg-diashow .vg-s-foto { position: absolute; inset: 0; height: auto; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.vg-diashow .vg-s-foto.vg-s-aktiv { opacity: 1; pointer-events: auto; }
.vg-diashow .vg-s-foto img.vg-s-bild { width: 100%; height: 100%; object-fit: var(--vg-s-anpassen); background: var(--vg-k-hg, #ddd); }

/* Pfeile und Punkte (Karussell, Diashow) */
.vg-slider .vg-s-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px;
	border: none; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 28px; line-height: 38px;
	cursor: pointer; padding: 0; opacity: .85; transition: opacity .2s, background .2s; }
.vg-slider .vg-s-pfeil:hover, .vg-slider .vg-s-pfeil:focus-visible { opacity: 1; background: rgba(0, 0, 0, .7); }
.vg-slider .vg-s-zurueck { left: 8px; }
.vg-slider .vg-s-weiter { right: 8px; }
.vg-slider .vg-s-punkte { display: flex; justify-content: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.vg-slider .vg-s-punkte button { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
	background: #c8d3cb; }
.vg-slider .vg-s-punkte button.vg-s-aktiv { background: #1e8449; }
@media (prefers-reduced-motion: reduce) { .vg-laufband .vg-s-spur.vg-s-laeuft { animation: none; } }