/* ==========================================================================
   Slider-Modul (zmt-core): Bildwechsler, Hero, Karussell.
   Masse und Entscheide: docs/superpowers/specs/2026-10-08-zmt-slider-design.md
   ========================================================================== */

.zmt-slider {
	position: relative;
	overflow: hidden;
	--zmt-uebergang: 300ms;
}

.zmt-slider__buehne {
	position: relative;
	width: 100%;
	height: 100%;
	touch-action: pan-y; /* senkrecht scrollt der Browser, waagrecht wischt der Slider */
}

/* Überblenden: alle Slides übereinander, nur die aktive ist sichtbar.
   Ohne JavaScript bleibt die erste Slide (.is-aktiv) stehen. */
.zmt-slider .zmt-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--zmt-uebergang) ease, visibility 0s linear var(--zmt-uebergang);
}

.zmt-slider .zmt-slide.is-aktiv {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--zmt-uebergang) ease, visibility 0s;
}

/* Das Theme setzt img { height: auto }, hier füllt das Bild die Slide. */
.zmt-slider .zmt-slide__bild,
.zmt-slider .zmt-slide__video,
.zmt-slider .zmt-slide iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Das Video trägt .wp-block-cover__video-background, damit der MediaElement-Player des
   Themes es auslässt. Die Theme-Regel dazu (dentario/style.css) verschiebt um -50 %. */
.zmt-slider .zmt-slide__video {
	transform: none;
}

/* Nur für Screenreader und Suchmaschinen, z. B. „über Kontakt“ hinter „Mehr“. */
.zmt-slider .zmt-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Bildwechsler (Leistungsseiten) ---------- */
.zmt-slider--bildwechsler {
	aspect-ratio: 1240 / 550;
	margin: 0 0 1.5em;
}

/* ---------- YouTube-Vorschau: lädt YouTube erst beim Klick ---------- */
.zmt-slider .zmt-slide__play {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.zmt-slider .zmt-slide__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	transition: transform .16s ease;
}

.zmt-slider .zmt-slide__play:hover .zmt-slide__play-icon,
.zmt-slider .zmt-slide__play:focus-visible .zmt-slide__play-icon {
	transform: translate(-50%, -50%) scale(1.08);
}

.zmt-slider .zmt-slide__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
	.zmt-slider .zmt-slide,
	.zmt-slider .zmt-slide.is-aktiv,
	.zmt-slider .zmt-slide__play-icon {
		transition: none;
	}
}

/* ---------- Hero (Startseite), Masse 1:1 nach Revolution ----------
   Vier Stufen mit je eigenem Raster. --e ist ein Rasterpixel, alle Werte
   sind Rasterpixel mal --e und skalieren so wie bei Revolution linear mit
   der Breite. Container-Einheiten statt Viewport, damit die Scrollleiste
   die Stufen nicht verschiebt. Werte: Spezifikation Abschnitt 5. */
.zmt-slider--hero {
	container: zmt-hero / inline-size;
	width: 100%;
	/* Globale Hover-Regel des Child-Themes: Links im Hero bleiben weiss. */
	--zmt-hover: #fff;
}

/* L4, unter 480px: Raster 480 × 720. --uh ist die feste Höhe der Untertitel-Box,
   die Revolution je Stufe vorgibt (Messung live 08.10.2026, Werte in Rasterpixeln). */
.zmt-slider--hero .zmt-slider__buehne {
	--e: calc(100cqw / 480);
	--rand: 0px;
	--tl: 37;  --to: 449.2; --tb: 404; --tf: 40.6; --tz: 45.5; --tp1: 6.2; --tp3: 6.2;
	--ul: 37;  --uo: 560;   --ub: 390; --uf: 16;   --uz: 19.7; --up1: 7.4; --up2: 7.4; --up3: 7.4; --uh: 58;
	--bl: 37;  --bo: 630;   --bb: 155; --bh: 45.5; --bf: 14.8; --bp: 29.5;
	height: calc(720 * var(--e));
}

/* L3, 480 bis 777px: Raster 778 × 960, Boxen einzeln zentriert */
@container zmt-hero (min-width: 480px) {
	.zmt-slider--hero .zmt-slider__buehne {
		--e: calc(100cqw / 778);
		--tl: 89;    --to: 430.5; --tb: 600; --tf: 59.6; --tz: 70;   --tp1: 7.8; --tp3: 7.8;
		--ul: 164.5; --uo: 618.5; --ub: 449; --uf: 19.5; --uz: 24.6; --up1: 7.8; --up2: 7.8; --up3: 7.8; --uh: 84;
		--bl: 304;   --bo: 796.2; --bb: 170; --bh: 46.7; --bf: 19.5; --bp: 32.4;
		height: calc(960 * var(--e));
	}
}

/* L2, 778 bis 1023px: Raster 1024 × 768 */
@container zmt-hero (min-width: 778px) {
	.zmt-slider--hero .zmt-slider__buehne {
		--e: calc(100cqw / 1024);
		--tl: 40; --to: 243.5; --tb: 512; --tf: 48.7; --tz: 57.4; --tp1: 7.5;  --tp3: 7.5;
		--ul: 40; --uo: 397;   --ub: 438; --uf: 18.7; --uz: 23.7; --up1: 13.7; --up2: 7.5; --up3: 7.5; --uh: 82;
		--bl: 40; --bo: 497;   --bb: 115; --bh: 32.5; --bf: 12.5; --bp: 21.2;
		height: calc(768 * var(--e));
	}
}

/* L1, ab 1024px: Raster 1240 × 650, ab 1240px fest und zentriert */
@container zmt-hero (min-width: 1024px) {
	.zmt-slider--hero .zmt-slider__buehne {
		--e: min(calc(100cqw / 1240), 1px);
		--rand: max(0px, calc((100cqw - 1240px) / 2));
		--tl: 20; --to: 155; --tb: 620; --tf: 60; --tz: 70; --tp1: 10; --tp3: 10;
		--ul: 20; --uo: 340; --ub: 531; --uf: 24; --uz: 30; --up1: 17; --up2: 10; --up3: 10; --uh: 100;
		--bl: 20; --bo: 465; --bb: 140; --bh: 40; --bf: 15; --bp: 25;
		height: calc(650 * var(--e));
	}
}

/* Slide „Qualitätsorientierte Zahnmedizin“: bei Revolution in jeder Stufe eigene Lage.
   Je Stufe ein eigener Block, damit keine Werte in eine andere Stufe durchsickern. */
@container zmt-hero (max-width: 479px) {
	.zmt-slider--hero .zmt-slide--eingerueckt {
		--tl: 39.4; --to: 460.3; --tb: 400; --tp1: 4.9; --tp3: 4.9;
		--ul: 39.4; --uo: 567.4; --ub: 355; --uf: 17.2; --uz: 22.2; --uh: 64;
		--bl: 39.4; --bo: 643.7; --bh: 39.4;
	}
}

@container zmt-hero (min-width: 480px) and (max-width: 777px) {
	.zmt-slider--hero .zmt-slide--eingerueckt {
		--to: 565.3;
		--ul: 162.3; --uo: 753.4; --ub: 452.8; --uh: 79;
		--bo: 870.1;
	}
}

@container zmt-hero (min-width: 778px) and (max-width: 1023px) {
	.zmt-slider--hero .zmt-slide--eingerueckt {
		--to: 231;
		--ub: 425;
	}
}

@container zmt-hero (min-width: 1024px) {
	.zmt-slider--hero .zmt-slide--eingerueckt {
		--tl: 265; --to: 102;
		--ul: 265; --uo: 300; --ub: 515;
		--bl: 506; --bo: 425;
	}
}

/* Rückfall für Browser ohne Container-Abfragen (Safari unter 16, iOS 15): dort wäre --e
   ungültig und der Hero 0 px hoch. Gleiche Stufen über die Fensterbreite, der Hero ist
   immer fensterbreit. Die eingerückte Slide nutzt hier die Standardlage. */
@supports not (container-type: inline-size) {
	.zmt-slider--hero .zmt-slider__buehne {
		--e: calc(100vw / 480);
	}

	@media (min-width: 480px) {
		.zmt-slider--hero .zmt-slider__buehne {
			--e: calc(100vw / 778);
			--tl: 89;    --to: 430.5; --tb: 600; --tf: 59.6; --tz: 70;   --tp1: 7.8; --tp3: 7.8;
			--ul: 164.5; --uo: 618.5; --ub: 449; --uf: 19.5; --uz: 24.6; --up1: 7.8; --up2: 7.8; --up3: 7.8; --uh: 84;
			--bl: 304;   --bo: 796.2; --bb: 170; --bh: 46.7; --bf: 19.5; --bp: 32.4;
			height: calc(960 * var(--e));
		}
	}

	@media (min-width: 778px) {
		.zmt-slider--hero .zmt-slider__buehne {
			--e: calc(100vw / 1024);
			--tl: 40; --to: 243.5; --tb: 512; --tf: 48.7; --tz: 57.4; --tp1: 7.5;  --tp3: 7.5;
			--ul: 40; --uo: 397;   --ub: 438; --uf: 18.7; --uz: 23.7; --up1: 13.7; --up2: 7.5; --up3: 7.5; --uh: 82;
			--bl: 40; --bo: 497;   --bb: 115; --bh: 32.5; --bf: 12.5; --bp: 21.2;
			height: calc(768 * var(--e));
		}
	}

	@media (min-width: 1024px) {
		.zmt-slider--hero .zmt-slider__buehne {
			--e: min(calc(100vw / 1240), 1px);
			--rand: max(0px, calc((100vw - 1240px) / 2));
			--tl: 20; --to: 155; --tb: 620; --tf: 60; --tz: 70; --tp1: 10; --tp3: 10;
			--ul: 20; --uo: 340; --ub: 531; --uf: 24; --uz: 30; --up1: 17; --up2: 10; --up3: 10; --uh: 100;
			--bl: 20; --bo: 465; --bb: 140; --bh: 40; --bf: 15; --bp: 25;
			height: calc(650 * var(--e));
		}
	}
}

.zmt-slider.zmt-slider--hero .zmt-slide__titel,
.zmt-slider.zmt-slider--hero .zmt-slide__untertitel,
.zmt-slider.zmt-slider--hero .zmt-slide__button {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	margin: 0;
	color: #fff;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
}

.zmt-slider.zmt-slider--hero .zmt-slide__titel {
	top: calc(var(--to) * var(--e));
	left: calc(var(--rand) + var(--tl) * var(--e));
	width: calc(var(--tb) * var(--e));
	padding: calc(var(--tp1) * var(--e)) calc(var(--tp1) * var(--e)) calc(var(--tp1) * var(--e)) calc(var(--tp3) * var(--e));
	font-family: Exo, sans-serif;
	font-size: calc(var(--tf) * var(--e));
	font-weight: 700;
	line-height: calc(var(--tz) * var(--e));
	background-color: rgba(144, 27, 53, .8);
	border-radius: 3px;
	text-shadow: 3px 3px 0 rgba(101, 21, 39, .37);
}

.zmt-slider.zmt-slider--hero .zmt-slide__untertitel {
	top: calc(var(--uo) * var(--e));
	left: calc(var(--rand) + var(--ul) * var(--e));
	width: calc(var(--ub) * var(--e));
	min-height: calc(var(--uh) * var(--e));
	padding: calc(var(--up1) * var(--e)) calc(var(--up2) * var(--e)) calc(var(--up2) * var(--e)) calc(var(--up3) * var(--e));
	font-family: Poppins, sans-serif;
	font-size: calc(var(--uf) * var(--e));
	font-weight: 300;
	line-height: calc(var(--uz) * var(--e));
	background-color: rgba(175, 175, 175, .75);
	border-radius: 3px;
	text-shadow: 2px 2px 0 rgba(101, 21, 39, .37);
}

.zmt-slider.zmt-slider--hero .zmt-slide__button {
	top: calc(var(--bo) * var(--e));
	left: calc(var(--rand) + var(--bl) * var(--e));
	width: calc(var(--bb) * var(--e));
	height: calc(var(--bh) * var(--e));
	padding: 0 calc(var(--bp) * var(--e));
	font-family: Poppins, sans-serif;
	font-size: calc(var(--bf) * var(--e));
	font-weight: 500;
	line-height: calc(var(--bh) * var(--e));
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background-color: #901b35;
	border-radius: 5px;
	transition: background-color .3s ease;
}

.zmt-slider.zmt-slider--hero .zmt-slide__button:hover,
.zmt-slider.zmt-slider--hero .zmt-slide__button:focus-visible {
	color: #fff;
	background-color: #334454;
}

.zmt-slider.zmt-slider--hero .zmt-slide__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------- Pfeile (Hero und Bildwechsler mit Pfeilen) ----------
   40 × 40, halbtransparent schwarz, beim Überfahren schwarz, wie Revolution.
   Das Theme gestaltet <button> mit Bordeaux, Innenabstand und Hover-Farbe. */
.zmt-slider .zmt-slider__pfeil {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	padding: 0;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .3s ease;
}

.zmt-slider .zmt-slider__pfeil--zurueck { left: 0; }
.zmt-slider .zmt-slider__pfeil--weiter  { right: 0; }

.zmt-slider .zmt-slider__pfeil:hover,
.zmt-slider .zmt-slider__pfeil:focus-visible {
	color: #fff;
	background: #000;
}

.zmt-slider .zmt-slider__pfeil:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.zmt-slider .zmt-slider__pfeil svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Karussell (Startseite: Leistungs-Icons) ----------
   Wischbare Reihe mit Scroll-Snap, funktioniert auch ohne JavaScript.
   Sichtbar: 4 ab 1024 px, 3 ab 768 px, darunter 1 plus Anschnitt des nächsten.
   Pfeile ab 768 px seitlich auf Icon-Höhe, Punkte setzt das Skript. */
.zmt-slider--karussell {
	--k-anzahl: 1;
	--k-abstand: 16px;
	--k-pfeil: 48px;
	overflow: visible;
}

.zmt-karussell__buehne {
	position: relative;
}

/* Theme-Listenstile (Abstände, Aufzählungszeichen) zurücksetzen. */
.zmt-slider .zmt-karussell__liste {
	display: flex;
	gap: var(--k-abstand);
	margin: 0;
	padding: 12px 0 20px; /* Platz für Anheben und Schatten */
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.zmt-slider .zmt-karussell__liste::-webkit-scrollbar {
	display: none;
}

.zmt-slider .zmt-karussell__element {
	display: flex;
	flex: 0 0 78%;
	justify-content: center;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.zmt-slider .zmt-karussell__element::before {
	content: none;
}

.zmt-slider .zmt-karussell__link {
	display: block;
	width: 100%;
	max-width: 224px;
	border-radius: 50%;
	transition: transform .2s ease;
}

.zmt-slider--karussell .zmt-slide__bild {
	position: static;
	width: 100%;
	max-width: 224px;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	background: #fff;
	border: 1px solid #324353;
	border-radius: 50%;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.zmt-slider .zmt-karussell__link:hover,
.zmt-slider .zmt-karussell__link:focus-visible {
	transform: translateY(-4px);
}

.zmt-slider .zmt-karussell__link:hover .zmt-slide__bild,
.zmt-slider .zmt-karussell__link:focus-visible .zmt-slide__bild {
	border-color: #901b35;
	box-shadow: 0 10px 22px rgba(50, 67, 83, .18);
}

.zmt-slider .zmt-karussell__link:focus-visible {
	outline: 3px solid #901b35;
	outline-offset: 4px;
}

/* Pfeile: Bordeaux-Kreis 48 px, erst ab 768 px. */
.zmt-slider--karussell .zmt-slider__pfeil {
	display: none;
}

/* Punkte: Trefferfläche 24 px (WCAG 2.5.8), sichtbarer Punkt 10 px. */
.zmt-karussell__punkte {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

.zmt-karussell__punkte:empty {
	display: none;
}

.zmt-slider .zmt-karussell__punkt {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}

.zmt-slider .zmt-karussell__punkt::before {
	content: "";
	width: 10px;
	height: 10px;
	background: #c3c8cd;
	border-radius: 50%;
	transition: background-color .2s ease, transform .2s ease;
}

.zmt-slider .zmt-karussell__punkt:hover::before {
	background: #6e1428;
}

.zmt-slider .zmt-karussell__punkt[aria-current="true"]::before {
	background: #901b35;
	transform: scale(1.2);
}

.zmt-slider .zmt-karussell__punkt:focus-visible {
	outline: 2px solid #901b35;
	outline-offset: 0;
}

@media (min-width: 768px) {
	.zmt-slider--karussell {
		--k-anzahl: 3;
		--k-abstand: 24px;
	}

	.zmt-slider .zmt-karussell__element {
		flex-basis: calc((100% - (var(--k-anzahl) - 1) * var(--k-abstand)) / var(--k-anzahl));
	}

	/* Platz für die Pfeile links und rechts der Reihe. */
	.zmt-karussell__buehne:has(.zmt-slider__pfeil) .zmt-karussell__liste {
		margin: 0 calc(var(--k-pfeil) + 8px);
	}

	.zmt-slider--karussell .zmt-slider__pfeil {
		display: flex;
		width: var(--k-pfeil);
		height: var(--k-pfeil);
		margin-top: calc(var(--k-pfeil) / -2 - 4px); /* Icon-Mitte, Liste hat unten 8 px mehr Abstand */
		background: #901b35;
		border-radius: 50%;
	}

	.zmt-slider--karussell .zmt-slider__pfeil:hover,
	.zmt-slider--karussell .zmt-slider__pfeil:focus-visible {
		background: #6e1428;
	}

	.zmt-slider--karussell .zmt-slider__pfeil:focus-visible {
		outline: 3px solid #901b35;
		outline-offset: 2px;
	}

	.zmt-slider--karussell .zmt-slider__pfeil svg {
		width: 20px;
		height: 20px;
	}
}

@media (min-width: 1024px) {
	.zmt-slider--karussell {
		--k-anzahl: 4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zmt-slider .zmt-karussell__liste {
		scroll-behavior: auto;
	}

	.zmt-slider .zmt-karussell__link,
	.zmt-slider--karussell .zmt-slide__bild,
	.zmt-slider .zmt-karussell__punkt::before {
		transition: none;
	}
}