/* WTS Werbebanner – Ausgabe auf der Seite
 * Alle Banner eines Platzes liegen übereinander in derselben Rasterzelle.
 * Die Box ist so hoch wie der höchste Banner; nichts wird beschnitten.
 *
 * Zustände eines Banners:
 *   (ohne Klasse)  wartet, unsichtbar, in der Startposition des Effekts
 *   .is-aktiv      sichtbar; bekommt er die Klasse, läuft der Übergang hinein
 *   .is-weg        der Banner, der gerade hinausgeht (bleibt bis zum Ende sichtbar)
 * Art des Wechsels über die Klasse wts-wb--wechsel-…, Dauer über --wts-wb-dauer. */

.wts-wb {
	--wts-wb-dauer: 0.8s;
	display: grid;
	width: 100%;
	max-width: var(--wts-wb-breite, 250px);
	margin-left: auto;
	margin-right: auto;
}

.wts-wb[hidden] {
	display: none;
}

.wts-wb__item {
	grid-area: 1 / 1;
	align-self: start;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
}

.wts-wb__item.is-weg {
	z-index: 1;
	visibility: visible;
}

.wts-wb__item.is-aktiv {
	z-index: 2;
	opacity: 1;
	visibility: visible;
}

.wts-wb.is-animiert .wts-wb__item {
	transition:
		opacity var(--wts-wb-dauer) ease,
		transform var(--wts-wb-dauer) ease-in-out,
		clip-path var(--wts-wb-dauer) ease-in-out,
		filter var(--wts-wb-dauer) ease,
		visibility 0s linear var(--wts-wb-dauer);
}

.wts-wb.is-animiert .wts-wb__item.is-aktiv {
	transition-delay: 0s, 0s, 0s, 0s, 0s;
}

/* ---------- Effekte ---------- */

/* Effekte, bei denen der Banner deckend bleibt und nur Lage oder Ausschnitt wechselt */
.wts-wb--wechsel-schieben .wts-wb__item,
.wts-wb--wechsel-schieben-rechts .wts-wb__item,
.wts-wb--wechsel-rollen .wts-wb__item,
.wts-wb--wechsel-rollen-runter .wts-wb__item,
.wts-wb--wechsel-aufdecken .wts-wb__item,
.wts-wb--wechsel-aufdecken-oben .wts-wb__item,
.wts-wb--wechsel-kreis .wts-wb__item,
.wts-wb--wechsel-umdrehen .wts-wb__item {
	opacity: 1;
}

.wts-wb--wechsel-schieben,
.wts-wb--wechsel-schieben-rechts,
.wts-wb--wechsel-rollen,
.wts-wb--wechsel-rollen-runter {
	overflow: hidden;
}

/* Schieben von rechts: neuer kommt von rechts, alter geht nach links */
.wts-wb--wechsel-schieben .wts-wb__item { transform: translateX(100%); }
.wts-wb--wechsel-schieben .wts-wb__item.is-weg { transform: translateX(-100%); }

/* Schieben von links */
.wts-wb--wechsel-schieben-rechts .wts-wb__item { transform: translateX(-100%); }
.wts-wb--wechsel-schieben-rechts .wts-wb__item.is-weg { transform: translateX(100%); }

/* Rollen von unten */
.wts-wb--wechsel-rollen .wts-wb__item { transform: translateY(100%); }
.wts-wb--wechsel-rollen .wts-wb__item.is-weg { transform: translateY(-100%); }

/* Rollen von oben */
.wts-wb--wechsel-rollen-runter .wts-wb__item { transform: translateY(-100%); }
.wts-wb--wechsel-rollen-runter .wts-wb__item.is-weg { transform: translateY(100%); }

/* Aufdecken: der neue Banner wird über dem alten freigelegt, das Bild bewegt sich nicht */
.wts-wb--wechsel-aufdecken .wts-wb__item { clip-path: inset(0 100% 0 0); }
.wts-wb--wechsel-aufdecken-oben .wts-wb__item { clip-path: inset(0 0 100% 0); }

.wts-wb--wechsel-aufdecken .wts-wb__item.is-weg,
.wts-wb--wechsel-aufdecken .wts-wb__item.is-aktiv,
.wts-wb--wechsel-aufdecken-oben .wts-wb__item.is-weg,
.wts-wb--wechsel-aufdecken-oben .wts-wb__item.is-aktiv {
	clip-path: inset(0 0 0 0);
}

/* Kreis aus der Mitte (75 % deckt auch schmale, hohe Banner ganz ab) */
.wts-wb--wechsel-kreis .wts-wb__item { clip-path: circle(0% at 50% 50%); }

.wts-wb--wechsel-kreis .wts-wb__item.is-weg,
.wts-wb--wechsel-kreis .wts-wb__item.is-aktiv {
	clip-path: circle(75% at 50% 50%);
}

/* Zoom: alter wird kleiner und blendet aus, neuer wächst auf volle Größe */
.wts-wb--wechsel-zoom .wts-wb__item,
.wts-wb--wechsel-zoom .wts-wb__item.is-weg {
	transform: scale(0.85);
}

/* Unschärfe: alter verschwimmt, neuer wird scharf */
.wts-wb--wechsel-unschaerfe .wts-wb__item,
.wts-wb--wechsel-unschaerfe .wts-wb__item.is-weg {
	filter: blur(12px);
}

/* Umdrehen wie eine Karte */
.wts-wb--wechsel-umdrehen {
	perspective: 1200px;
}

.wts-wb--wechsel-umdrehen .wts-wb__item {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: rotateY(180deg);
}

.wts-wb--wechsel-umdrehen .wts-wb__item.is-weg {
	transform: rotateY(-180deg);
}

/* Endzustand für alle Effekte mit Bewegung */
.wts-wb .wts-wb__item.is-aktiv {
	transform: none;
	filter: none;
}

/* Sofort: kein Übergang */
.wts-wb--wechsel-sofort.is-animiert .wts-wb__item {
	transition: none;
}

/* ---------- Bild ---------- */

.wts-wb__link {
	display: block;
	line-height: 0;
}

.wts-wb img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.wts-wb.is-animiert .wts-wb__item {
		transition: none;
	}
}

.wts-wb-fehler {
	padding: 0.5em;
	border: 1px dashed #c00;
	color: #c00;
	font-size: 14px;
}