/**
 * m4_video – Variante "ari_video"
 *
 * Entwurf: Knoten 15:158 (Startseite). Rahmen 1514 x 673 im normalen
 * Container, Eckradius 5px. Ueber dem Standbild liegen dieselben drei Ebenen
 * wie bei Hero und Footer — Schleier, Korn, roter Schein —, darauf ein
 * Play-Knopf aus Milchglas.
 *
 * Diese Datei heisst bewusst NICHT m4_video.css: der Parent laedt seine
 * eigene Modul-CSS nur, wenn im Child keine gleichnamige Datei liegt. Unter
 * abweichendem Namen ergaenzt sie den Parent, statt ihn zu ersetzen.
 */

/* --- Rahmen ----------------------------------------------------------- */

/* Die Sektion darunter ("ari_ueberuns") zieht ihre helle Flaeche 124px unter
   das Video. Ohne z-index laege sie darueber, weil spaetere Geschwister
   spaeter gezeichnet werden. */
.m4_video.ari_video {
	position: relative;
	z-index: 1;
}

/* Der Parent setzt eine feste Pixelhoehe (700px) und staffelt sie ueber neun
   Breakpoints bis 250px herunter. Hier zaehlt stattdessen das Seitenverhaeltnis
   des Entwurfs — dann stimmt die Proportion in jeder Breite. Die drei Klassen
   im Selektor schlagen die Parent-Regeln ueberall, auch in deren Media
   Queries. */
.m4_video.ari_video .m4_video_height_setter {
	height: auto;
	aspect-ratio: 1514 / 673;
	border-radius: 5px;
	overflow: hidden;
}

/* --- Ebenen ueber dem Standbild --------------------------------------- */

/* Sie liegen im Overlay, nicht ueber dem Video-Container: so verschwinden
   sie beim Abspielen zusammen mit dem Standbild, statt ueber dem laufenden
   Video stehen zu bleiben. */
.m4_video.ari_video .m4_overlay {
	/* Eigener Stapelkontext, damit die Mischmodi der Ebenen nicht ueber das
	   Overlay hinaus mit dem Video darunter rechnen. */
	isolation: isolate;
}

.m4_video.ari_video .m4_overlay_content {
	position: relative;
}

/* Schleier */
.m4_video.ari_video .m4_overlay_content::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(27, 27, 26, .5);
}

/* Korn — dieselbe Kachel wie in Hero und Footer */
.m4_video.ari_video .m4_overlay_content::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url(../../../img/korn.png) 0 0 / 200px 200px repeat;
	mix-blend-mode: soft-light;
	opacity: .1;
}

/* Roter Schein */
.m4_video.ari_video .m4_overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: url(../../../img/schein.jpg) center / cover no-repeat;
	mix-blend-mode: screen;
	opacity: .55;
	pointer-events: none;
}

/* --- Play-Knopf ------------------------------------------------------- */

/* Der Knopf des Parents ist ein schwarzer 60px-Ring — der Entwurf zeigt eine
   Milchglas-Scheibe. Das SVG des Parents wird ausgeblendet und der Container
   selbst uebernimmt die Form; das Dreieck kommt als Maske. Gleiches Vorgehen
   wie beim Pfeil in den Schaltflaechen. */
.m4_video.ari_video .m4_play_button_container {
	z-index: 2;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .2);
	border: 1px solid rgba(255, 255, 255, .1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* Der Parent startet bei .5 und blendet beim Ueberfahren auf 1 — im
	   Entwurf steht der Knopf voll da. */
	opacity: 1;
	transition: background-color .3s;
}

.m4_video.ari_video .m4_overlay:hover .m4_play_button_container,
.m4_video.ari_video .m4_overlay:focus-visible .m4_play_button_container {
	opacity: 1;
	background-color: rgba(255, 255, 255, .3);
}

.m4_video.ari_video .m4_play_button_container svg {
	display: none;
}

/* Das Dreieck stammt aus dem Entwurf und ist im 100er-Raster des Kreises
   angelegt — dadurch sitzt es ohne Nachjustieren auf der optischen Mitte,
   die etwas rechts der geometrischen liegt. */
.m4_video.ari_video .m4_play_button_container::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFFFFF;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M63.5 47.4019C65.5 48.5566 65.5 51.4434 63.5 52.5981L45.5 62.9904C43.5 64.1451 41 62.7017 41 60.3923L41 39.6077C41 37.2983 43.5 35.8549 45.5 37.0096L63.5 47.4019Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M63.5 47.4019C65.5 48.5566 65.5 51.4434 63.5 52.5981L45.5 62.9904C43.5 64.1451 41 62.7017 41 60.3923L41 39.6077C41 37.2983 43.5 35.8549 45.5 37.0096L63.5 47.4019Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.m4_video.ari_video .m4_overlay:focus-visible {
	outline: 2px solid var(--primarbutton_background_color);
	outline-offset: 4px;
}

/* --- Kleinere Stufen -------------------------------------------------- */

@media screen and (max-width: 991px) {
	.m4_video.ari_video .m4_play_button_container {
		width: 72px;
		height: 72px;
	}
}

@media screen and (max-width: 575px) {
	.m4_video.ari_video .m4_play_button_container {
		width: 56px;
		height: 56px;
	}
}