/* CartCraft Instagram: Widget "Instagram-Slider" (Karussell mit versetzten Hochformat-Karten)
 *
 * Herkunft: die Regeln stammen unverändert aus dem Sektions-CSS des bisherigen HTML-Widgets
 * (Startseite GartenFit, Block r13-s3). Entfernt wurde nur das vorangestellte "selector " des
 * Elementor-Sektions-CSS. Damit liegt jede Regel eine Spezifitätsstufe tiefer als vorher, und
 * Seiten-CSS der Form "selector .gf-ir..." sowie die Elementor-Einstellungen ({{WRAPPER}} .gf-ir)
 * überschreiben sie weiterhin. Wo die Vorlage schon .gf-ir voranstellte, bleibt das stehen:
 * dort wird die Stufe gegen Theme-Vorgaben gebraucht (Hello färbt button:hover rosa, Elementor
 * setzt img{max-width:100%}). Es wird NICHT zusätzlich auf .elementor-widget-gf-insta-slider
 * hochgestuft, weil das mit Seiten-CSS gleichziehen und es je nach Ladereihenfolge aushebeln
 * würde.
 *
 * Die Vorgabewerte der Variablen stehen auf .gf-ir selbst, nicht auf einem Vorfahren.
 */

.gf-ir {
	--gfir-c: clamp(250px, 22.25vw, 320px);
	--gfir-h: calc(var(--gfir-c) * 16 / 9);
	--gfir-schritt: calc(var(--gfir-c) * .84 + 16px);
	--gfir-blende: 5%;
	--gfir-radius: 24px;
	--gfir-akzent: #B6B519;
	--gfir-knopf-bg: #FFFFFF;
	--gfir-knopf-farbe: #0A0F0D;
	--gfir-balken: #FFFFFF;
	--gfir-kopf-deckkraft: .30;
	--gf-ig-verlauf: linear-gradient(rgba(10,15,13,.26),rgba(10,15,13,.26)),linear-gradient(45deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
	position: relative;
	width: 100%;
	container-type: inline-size;
	outline: none;
}

.gf-ir:focus-visible {
	border-radius: var(--gfir-radius);
}

.gf-ir:focus-visible,
.gf-ir-karte:focus-visible,
.gf-ir .gf-ir-knopf:focus-visible,
.gf-ir .gf-ir-ton:focus-visible {
	outline: 3px solid var(--gfir-akzent);
	outline-offset: 3px;
}

/* ---------- Bühne und Reihe ---------- */

.gf-ir-buehne {
	position: relative;
	height: calc(var(--gfir-h) + 16px);
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-mask-image: linear-gradient(90deg,transparent 0,#000 var(--gfir-blende),#000 calc(100% - var(--gfir-blende)),transparent 100%);
	mask-image: linear-gradient(90deg,transparent 0,#000 var(--gfir-blende),#000 calc(100% - var(--gfir-blende)),transparent 100%);
}

.gf-ir-reihe {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gf-ir-pos {
	position: absolute;
	top: 8px;
	left: 50%;
	width: var(--gfir-c);
	height: var(--gfir-h);
	margin: 0 0 0 calc(var(--gfir-c) / -2);
	padding: 0;
	list-style: none;
	opacity: 0;
	transform: translate3d(calc(var(--k,0) * var(--gfir-schritt)),0,0) scale(.5);
	transition: transform .62s cubic-bezier(.22,.61,.36,1), opacity .62s ease;
	pointer-events: none;
}

.gf-ir-pos::before,
.gf-ir-pos::marker {
	content: none;
}

.gf-ir-pos.is-mitte {
	opacity: 1;
	transform: translate3d(0,0,0) scale(1);
	z-index: 2;
	pointer-events: auto;
}

.gf-ir-pos.is-nah {
	opacity: 1;
	transform: translate3d(calc(var(--k,0) * var(--gfir-schritt)),0,0) scale(.68);
	z-index: 1;
	pointer-events: auto;
}

/* ---------- Karte ---------- */

.gf-ir-karte {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--gfir-radius);
	text-decoration: none;
	box-shadow: none;
}

.gf-ir-medien {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid #CECFCF;
	border-radius: var(--gfir-radius);
	background: #E7E7E7;
	isolation: isolate;
}

.gf-ir-medien::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(247,246,242,.44);
	opacity: 1;
	transition: opacity .62s ease;
	pointer-events: none;
}

.gf-ir-pos.is-mitte .gf-ir-medien::after {
	opacity: 0;
}

.gf-ir-pos.is-nah:hover .gf-ir-medien::after {
	opacity: .4;
}

/* .gf-ir vorangestellt: schlägt Elementor-Vorgaben für img und video. */
.gf-ir .gf-ir-bild,
.gf-ir .gf-ir-video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
}

.gf-ir .gf-ir-video {
	opacity: 0;
	transition: opacity .35s ease;
}

.gf-ir-pos.is-an .gf-ir-video {
	opacity: 1;
}

.gf-ir-marke {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--gf-ig-verlauf);
	color: #FFFFFF;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.gf-ir-marke svg {
	display: block;
}

/* ---------- Ton-Knopf ---------- */

/* .gf-ir vorangestellt: das Theme färbt button:hover sonst rosa und setzt eigene Raender. */
.gf-ir .gf-ir-ton {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 4;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 44px;
	margin: 0;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(10,15,13,.62);
	color: #FFFFFF;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.gf-ir-pos.is-mitte .gf-ir-ton {
	display: flex;
}

.gf-ir-pos.is-stumm .gf-ir-ton {
	display: none;
}

.gf-ir .gf-ir-ton:focus,
.gf-ir .gf-ir-ton:active {
	background: rgba(10,15,13,.62);
	color: #FFFFFF;
}

.gf-ir .gf-ir-ton:hover {
	background: #FFFFFF;
	color: #0A0F0D;
}

.gf-ir-pos.is-laut .gf-ir-ton,
.gf-ir-pos.is-laut .gf-ir-ton:focus,
.gf-ir-pos.is-laut .gf-ir-ton:active,
.gf-ir-pos.is-laut .gf-ir-ton:hover {
	background: var(--gfir-akzent);
	color: #0A0F0D;
}

.gf-ir .gf-ir-ton svg {
	display: block;
}

.gf-ir .gf-ir-ton .gf-ir-i-laut {
	display: none;
}

.gf-ir-pos.is-laut .gf-ir-ton .gf-ir-i-laut {
	display: block;
}

.gf-ir-pos.is-laut .gf-ir-ton .gf-ir-i-stumm {
	display: none;
}

/* ---------- Ruhende Kopffläche des Mittelplatzes ----------
   Sie liegt unter den Karten und wird nur während der Wechsel-Animation sichtbar: dann stehen
   die Fortschrittsbalken weiter an derselben Stelle auf dunklem Grund, während die Karten
   darunter weiterziehen. Im Ruhezustand deckt die Mittelkarte sie vollständig ab. */

.gf-ir-kopf {
	position: absolute;
	top: 9px;
	left: calc(50% - var(--gfir-c) / 2 + 1px);
	z-index: 0;
	box-sizing: border-box;
	width: calc(var(--gfir-c) - 2px);
	height: calc(var(--gfir-h) * .16);
	border-radius: calc(var(--gfir-radius) - 1px) calc(var(--gfir-radius) - 1px) 0 0;
	opacity: 0;
	background: linear-gradient(180deg,rgba(10,15,13,var(--gfir-kopf-deckkraft)) 0%,rgba(10,15,13,calc(var(--gfir-kopf-deckkraft) * .4667)) 50%,rgba(10,15,13,0) 100%);
	pointer-events: none;
}

.gf-ir[data-gfir] .gf-ir-kopf {
	opacity: 1;
}

/* ---------- Fortschrittsbalken ---------- */

.gf-ir-fortschritt {
	position: absolute;
	top: 18px;
	left: calc(50% - var(--gfir-c) / 2 + 12px);
	z-index: 4;
	display: flex;
	gap: 4px;
	width: calc(var(--gfir-c) - 24px);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.gf-ir.is-gestartet .gf-ir-fortschritt {
	opacity: 1;
}

.gf-ir-fortschritt span {
	flex: 1 1 0;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255,255,255,.42);
	box-shadow: 0 0 0 1px rgba(10,15,13,.14), 0 1px 4px rgba(10,15,13,.28);
}

.gf-ir-fortschritt i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gfir-balken);
	transform: scaleX(0);
	transform-origin: left center;
}

.gf-ir.is-statisch .gf-ir-fortschritt {
	opacity: 0;
}

/* ---------- Steuerung ---------- */

.gf-ir-steuerung {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

/* .gf-ir vorangestellt: siehe Ton-Knopf (Theme-Vorgaben für button). */
.gf-ir .gf-ir-knopf {
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	min-width: 48px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #CECFCF;
	border-radius: 50%;
	background: var(--gfir-knopf-bg);
	color: var(--gfir-knopf-farbe);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease;
}

.gf-ir .gf-ir-knopf:focus,
.gf-ir .gf-ir-knopf:active {
	background: var(--gfir-knopf-bg);
	border-color: #CECFCF;
	color: var(--gfir-knopf-farbe);
}

.gf-ir .gf-ir-knopf:hover {
	background: var(--gfir-akzent);
	border-color: var(--gfir-akzent);
	color: #0A0F0D;
}

.gf-ir .gf-ir-knopf svg {
	display: block;
}

.gf-ir .gf-ir-pause .gf-ir-i-play {
	display: none;
}

.gf-ir.is-pausiert .gf-ir-pause .gf-ir-i-play {
	display: block;
}

.gf-ir.is-pausiert .gf-ir-pause .gf-ir-i-pause {
	display: none;
}

/* ---------- Nur für Vorleseprogramme ---------- */

.gf-ir-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Schmale Fenster ----------
   Die Vorlage setzt diese beiden Werte im Sektions-CSS. Sie stehen hier als Vorgabe des Widgets;
   Seiten-CSS und die Elementor-Einstellung "Kartenbreite" überschreiben sie weiterhin. */

@media (max-width: 1024px) {
	.gf-ir {
		--gfir-c: 250px;
		--gfir-blende: 4%;
	}
}

@supports (width: 1cqw) {
	@media (max-width: 1024px) {
		.gf-ir {
			--gfir-c: 61cqw;
		}
	}
}

@media (max-width: 767px) {
	.gf-ir-marke {
		width: 32px;
		height: 32px;
	}

	.gf-ir-marke svg {
		width: 16px;
		height: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gf-ir-pos,
	.gf-ir-medien::after,
	.gf-ir .gf-ir-video {
		transition: none;
	}
}