/* =========================================================
   DYNA werbung+design – Arbeiten-Galerie (zu js/dyna-gallery.js)
   ========================================================= */

/* ---------- Desktop: Hintergrund-Ebenen in .main-bg ---------- */
.main-bg .dg-layer {
	position: absolute;
	inset: 0;
	background-attachment: fixed, fixed;
	background-position: top left, center center;
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.main-bg .dg-layer.on { opacity: 1; }

/* Grosse, schlanke Pfeile am linken und rechten Bildrand */
.dg-arrow {
	all: unset;
	position: fixed;
	top: 50%;
	z-index: 50;
	width: 64px;
	height: 120px;
	margin-top: -60px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
}
.dg-arrow.on {
	opacity: .75;
	visibility: visible;
	transition: opacity .4s ease, visibility 0s;
}
.dg-arrow.on:hover, .dg-arrow.on:focus-visible { opacity: 1; }
.dg-prev { left: 1.5vw; }
.dg-next { right: 1.5vw; }
.dg-arrow svg {
	width: 30px;
	height: 80px;
	overflow: visible;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, .35));
	transition: transform .25s ease;
}
.dg-arrow polyline {
	fill: none;
	stroke: #ffffff;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.dg-prev:hover svg { transform: translateX(-4px); }
.dg-next:hover svg { transform: translateX(4px); }
.dg-arrow:focus-visible { outline: 2px solid #ffffff; outline-offset: -6px; }

/* ---------- Mobile / Tablet: Wischstreifen ---------- */
.dg-strip, .dg-dots { display: none; }

@media screen and (max-width: 980px) {
	.dg-arrow { display: none; }

	.image.primary.dg-ready > img { display: none; }
	.image.primary.dg-ready .dg-strip {
		display: flex;
		gap: .6em;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.dg-strip::-webkit-scrollbar { display: none; }
	.dg-slide {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}
	.dg-slide img {
		display: block;
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		background: #eeeeee;
	}
	.image.primary.dg-ready .dg-dots {
		display: flex;
		justify-content: center;
		gap: .4em;
		margin-top: .8em;
	}
	.dg-dots i {
		width: .4em;
		height: .4em;
		border-radius: 50%;
		background: #cfd3d4;
		transition: background .25s, transform .25s;
	}
	.dg-dots i.on { background: var(--dm-accent, #1a9389); transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
	.main-bg .dg-layer, .dg-arrow, .dg-arrow svg { transition: none; }
}