@charset "UTF-8";

/* Diashow (FUF 10/2026), ersetzt jssor und 01-css/horizontal-slider.css.
   Gleiche Groesse wie bisher: der Rahmen #slider-container haelt das Seitenverhaeltnis der Fotos
   (aspect-ratio, gesetzt von landing/ladezeit.py). Die Fotos blenden ineinander und fahren langsam heran.
   Bedienung nur ueber drei Knoepfe (Pause, zurueck, weiter), gebaut von Scripts/diashow.js; keine Anzeige,
   wo die Diashow gerade steht (Paul 02.10.). Die Knoepfe stehen buendig mit der rechten Kante des Inhalts. */

.ds {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background-color: #1d2c11;
	-webkit-user-select: none;
	user-select: none;
	/* rechte Kante des Inhalts: Texte und Kacheln haben 3 % Rand zum Fenster */
	--ds-rand: 3%;
	--ds-unten: 20px;
	--ds-knopf: 40px;
	--ds-abstand: 8px;
}

/* Im Inhalt der Leistungsseiten ist die Diashow so breit wie der Inhalt: Knoepfe auf Hoehe des Textes darin */
.lp-medien .ds { --ds-rand: 30px; --ds-unten: 18px; }

.ds-bilder {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	touch-action: pan-y;
}

.ds-bild {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
}

.ds-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
}

/* Ohne Skript bleibt das erste Bild stehen */
.ds:not(.ds-an) .ds-bild ~ .ds-bild { display: none; }

/* Blende: 0,9 s; dabei fahren die Fotos langsam heran, zurueckgesetzt erst nach dem Ausblenden */
.ds-an .ds-bild {
	opacity: 0;
	transition: opacity 0.9s ease;
}

.ds-an .ds-bild.ist-aktiv { opacity: 1; }

.ds-an .ds-bild img {
	transform: scale(1.001);
	transition: transform 0s linear 1s;
}

.ds-an .ds-bild.ist-aktiv img {
	transform: scale(1.07);
	transition: transform calc(var(--ds-zeit, 6s) + 1.5s) linear;
}

/* ---------- Knoepfe ---------- */

.ds-knopf {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	z-index: 5;
	bottom: var(--ds-unten);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--ds-knopf);
	height: var(--ds-knopf);
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 50%;
	background-color: rgba(16,24,10,0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ds-knopf svg { width: 50%; height: 50%; }
.ds-knopf:hover { background-color: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.65); }
.ds-knopf:focus-visible { outline: 2px solid #8aed00; outline-offset: 2px; }

.ds-weiter { right: var(--ds-rand); }
.ds-zurueck { right: calc(var(--ds-rand) + var(--ds-knopf) + var(--ds-abstand)); }
.ds-pause { right: calc(var(--ds-rand) + 2 * (var(--ds-knopf) + var(--ds-abstand))); }

/* Unsichtbare Uhr: ihr Ende schaltet das naechste Bild */
.ds-uhr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.ds-uhr.ist-laufend { animation: ds-uhr var(--ds-zeit, 6s) linear forwards; }

@keyframes ds-uhr {
	from { transform: translateX(0); }
	to { transform: translateX(1px); }
}

/* Angehalten: Maus oder Tastatur in der Diashow, Pause-Knopf, oder nicht im Bild */
.ds.ist-pausiert .ds-uhr,
.ds.ist-angehalten .ds-uhr,
.ds.ist-weg .ds-uhr { animation-play-state: paused; }

/* ---------- Handy: kleinere Knoepfe, dazu Wischen ---------- */

@media only screen and (max-width:767px) {
	.ds { --ds-unten: 8px; --ds-knopf: 30px; --ds-abstand: 6px; }
	.lp-medien .ds { --ds-rand: 10px; --ds-unten: 8px; }
}

/* Weniger Bewegung gewuenscht: kein Heranfahren, keine Blende, kein Selbstlauf (diashow.js) */
@media (prefers-reduced-motion: reduce) {
	.ds-an .ds-bild { transition: none; }
	.ds-an .ds-bild img,
	.ds-an .ds-bild.ist-aktiv img { transform: none; transition: none; }
}