/* Instagram-Feed: Widget "Instagram-Reels" (Endlos-Regal mit Hochformat-Karten) */

.gf-insta {
	--gf-insta-card-w: 280px;
	--gf-insta-gap: 16px;
	--gf-insta-radius: 14px;
	--gf-insta-focus: #B6B519;
	--gf-insta-head-gap: 44px;
	--gf-insta-head-align: center;
	--gf-insta-head-text: center;
	position: relative;
	color: #0A0F0D;
	/* Der Browser darf beim Anhängen neuer Karten nicht nachscrollen. */
	overflow-anchor: none;
}

/* ---------- Kopfbereich ---------- */

.gf-insta__head {
	display: flex;
	flex-direction: column;
	align-items: var(--gf-insta-head-align);
	text-align: var(--gf-insta-head-text);
	gap: 16px;
	margin: 0 0 var(--gf-insta-head-gap);
}

.gf-insta__kicker {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	color: #6C6F6E;
}

.gf-insta__title {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(36px, 4.4vw, 64px);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: #0A0F0D;
}

.gf-insta__accent {
	font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.04em;
}

.gf-insta__sub {
	margin: 0;
	max-width: 620px;
	font-size: 18px;
	line-height: 1.5;
	color: #0A0F0D;
}

.gf-insta__profile {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 14px 24px;
	border-radius: 999px;
	background-color: #0A0F0D;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.gf-insta__profile:hover,
.gf-insta__profile:focus-visible {
	background-color: #B6B519;
	color: #0A0F0D;
}

.gf-insta__profile-icon {
	display: inline-flex;
}

/* ---------- Regal ---------- */

.gf-insta__stage {
	position: relative;
}

.gf-insta__track {
	position: relative;
	display: flex;
	gap: var(--gf-insta-gap);
	margin: 0;
	padding: 4px 4px 16px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(10, 15, 13, .25) transparent;
}

.gf-insta__track::-webkit-scrollbar {
	height: 6px;
}

.gf-insta__track::-webkit-scrollbar-thumb {
	background: rgba(10, 15, 13, .22);
	border-radius: 99px;
}

/* Endlos-Regal aktiv: keine Bildlaufleiste, die Kopien wären sonst als Sprung sichtbar. */
.gf-insta.is-endless .gf-insta__track {
	scrollbar-width: none;
}

.gf-insta.is-endless .gf-insta__track::-webkit-scrollbar {
	display: none;
}

.gf-insta__card {
	flex: 0 0 var(--gf-insta-card-w);
	width: var(--gf-insta-card-w);
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

/* Wenige Karten: zentriert (automatische Ränder greifen nur, wenn Platz übrig ist). */
.gf-insta--few-center.is-fit .gf-insta__card:first-child,
.gf-insta--few-center:not([data-gf-insta-ready]) .gf-insta__card:first-child {
	margin-left: auto;
}

.gf-insta--few-center.is-fit .gf-insta__card:last-child,
.gf-insta--few-center:not([data-gf-insta-ready]) .gf-insta__card:last-child {
	margin-right: auto;
}

.gf-insta__media {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: var(--gf-insta-radius);
	overflow: hidden;
	background: #E4E3DC;
}

.gf-insta .gf-insta__play {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: none;
}

/* Das Theme färbt Schaltflächen bei Hover und Fokus ein. Für Karten und Pfeile wird das zurückgesetzt. */
.gf-insta .gf-insta__play:hover,
.gf-insta .gf-insta__play:focus {
	background: transparent;
	color: inherit;
	border: 0;
	text-decoration: none;
}

.gf-insta__img,
.gf-insta__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.gf-insta__img {
	transition: transform .5s ease, opacity .2s ease;
}

.gf-insta__video {
	opacity: 0;
	background: #000;
}

.gf-insta__card.is-started .gf-insta__video {
	opacity: 1;
}

.gf-insta__card.is-started .gf-insta__img {
	opacity: 0;
}

.gf-insta__play:hover .gf-insta__img {
	transform: scale(1.03);
}

/* Abspielzeichen in der Kartenmitte */
.gf-insta__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(10, 15, 13, .55);
	color: #FFFFFF;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.gf-insta__svg-play {
	margin-left: 3px;
}

.gf-insta__svg-pause {
	display: none;
}

.gf-insta__card.is-playing .gf-insta__svg-play {
	display: none;
}

.gf-insta__card.is-playing .gf-insta__svg-pause {
	display: block;
}

.gf-insta__card.is-playing .gf-insta__icon {
	opacity: 0;
}

.gf-insta__card.is-playing .gf-insta__play:hover .gf-insta__icon,
.gf-insta__card.is-playing .gf-insta__play:focus-visible .gf-insta__icon {
	opacity: 1;
}

.gf-insta__play:hover .gf-insta__icon {
	transform: scale(1.06);
}

/* Instagram-Zeichen unten rechts (Link auf den Beitrag). Klickfläche 44 px, sichtbarer Kreis 40 px. */
.gf-insta__ig {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(10, 15, 13, .78);
	background-clip: content-box;
	color: #FFFFFF;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

/* Das Zeichen bleibt weiss, auch wenn das Theme Links einfaerbt. */
.gf-insta .gf-insta__ig,
.gf-insta .gf-insta__ig:link,
.gf-insta .gf-insta__ig:visited {
	color: #FFFFFF;
}

.gf-insta .gf-insta__ig svg path {
	fill: #FFFFFF;
}

.gf-insta a.gf-insta__ig:hover,
.gf-insta a.gf-insta__ig:focus-visible {
	background-color: #FFFFFF;
	color: #0A0F0D;
}

.gf-insta a.gf-insta__ig:hover svg path,
.gf-insta a.gf-insta__ig:focus-visible svg path {
	fill: #0A0F0D;
}

.gf-insta__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 56px 60px 14px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	pointer-events: none;
	transition: opacity .2s ease;
}

.gf-insta__card.is-started .gf-insta__caption {
	opacity: 0;
}

/* ---------- Pfeile ---------- */

/* Pillenform mit feinem Rand wie bei den übrigen Slidern der Website. */
.gf-insta .gf-insta__arrow {
	position: absolute;
	top: calc(50% - 8px);
	z-index: 3;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #CECFCF;
	border-radius: 50%;
	background-color: var(--gf-insta-arrow-bg, #FFFFFF);
	color: var(--gf-insta-arrow-color, #0A0F0D);
	box-shadow: 0 4px 14px rgba(10, 15, 13, .12);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease, border-color .2s ease;
}

.gf-insta .gf-insta__arrow:hover,
.gf-insta .gf-insta__arrow:focus {
	background-color: var(--gf-insta-arrow-bg, #FFFFFF);
	color: var(--gf-insta-arrow-color, #0A0F0D);
	text-decoration: none;
}

.gf-insta .gf-insta__arrow:hover {
	border-color: #0A0F0D;
}

.gf-insta__arrow--prev {
	left: 14px;
}

.gf-insta__arrow--next {
	right: 14px;
}

.gf-insta__arrow[disabled] {
	opacity: .35;
	cursor: default;
	transform: translateY(-50%);
}

/* Ohne Skript tun die Pfeile nichts, deshalb erst sichtbar, wenn das Regal bereit ist. */
.gf-insta:not([data-gf-insta-ready]) .gf-insta__arrow,
.gf-insta.is-fit .gf-insta__arrow {
	display: none;
}

/* Auf Touch-Geräten wird gewischt. */
@media (hover: none), (pointer: coarse) {
	.gf-insta__arrow {
		display: none !important;
	}
}

/* ---------- Fokus ---------- */

.gf-insta__play:focus {
	outline: none;
}

/* Der Fokusrahmen liegt als eigene Ebene über Bild und Video, sonst würde er verdeckt. */
.gf-insta__play::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
}

.gf-insta__play:focus-visible {
	outline: none;
}

.gf-insta__play:focus-visible::after {
	box-shadow: inset 0 0 0 4px var(--gf-insta-focus), inset 0 0 0 6px #0A0F0D;
}

.gf-insta__ig:focus-visible,
.gf-insta__arrow:focus-visible,
.gf-insta__profile:focus-visible {
	outline: 3px solid var(--gf-insta-focus);
	outline-offset: 3px;
}

.gf-insta__ig:focus-visible {
	outline-offset: -1px;
	box-shadow: 0 0 0 2px #0A0F0D;
}

/* Dunkler Ring zwischen Pfeil und Fokusrahmen, damit der Fokus auch auf hellem Grund deutlich ist. */
.gf-insta .gf-insta__arrow:focus-visible {
	box-shadow: 0 0 0 3px #0A0F0D;
}

/* Hinweis im Editor */
.gf-insta-hinweis {
	margin: 0 0 12px;
	padding: 12px 16px;
	border: 1px dashed #9D9F9E;
	border-radius: 8px;
	background: #FFFFFF;
	color: #0A0F0D;
	font-size: 14px;
	line-height: 1.4;
}

/* ---------- Größen ---------- */

@media (max-width: 1024px) {
	.gf-insta {
		--gf-insta-card-w: 240px;
	}
}

@media (max-width: 767px) {
	.gf-insta {
		--gf-insta-card-w: min(72vw, 300px);
		--gf-insta-gap: 12px;
		--gf-insta-head-gap: 28px;
	}

	.gf-insta__sub {
		font-size: 16px;
	}

	.gf-insta__icon {
		width: 56px;
		height: 56px;
		margin: -28px 0 0 -28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gf-insta *,
	.gf-insta *::before,
	.gf-insta *::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.gf-insta__play:hover .gf-insta__img {
		transform: none;
	}
}

/* ---------- Ton-Knopf und Wiedergabe ohne Ton (ab 1.1.0) ---------- */

.gf-insta .gf-insta__sound {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 3;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 15, 13, .55);
	background-clip: content-box;
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.gf-insta .gf-insta__sound:hover,
.gf-insta .gf-insta__sound:focus {
	background-color: rgba(10, 15, 13, .55);
	color: #FFFFFF;
	text-decoration: none;
}

.gf-insta .gf-insta__sound:hover {
	background-color: #FFFFFF;
	color: #0A0F0D;
}

.gf-insta__sound:focus-visible {
	outline: 3px solid var(--gf-insta-focus);
	outline-offset: -1px;
	box-shadow: 0 0 0 2px #0A0F0D;
}

.gf-insta__svg-loud {
	display: none;
}

.gf-insta__card.is-sound .gf-insta__svg-loud {
	display: block;
}

.gf-insta__card.is-sound .gf-insta__svg-mute {
	display: none;
}

.gf-insta__card.is-sound .gf-insta__sound {
	background-color: #B6B519;
	color: #0A0F0D;
}

/* Bei Karten mit Ton-Knopf sitzt das Instagram-Zeichen links unten. */
.gf-insta__card--video .gf-insta__ig {
	right: auto;
	left: 8px;
}

/* Läuft das Video von selbst, ist kein Abspielzeichen nötig. */
.gf-insta__card--auto .gf-insta__icon {
	opacity: 0;
}

.gf-insta__card--auto .gf-insta__play:hover .gf-insta__icon,
.gf-insta__card--auto .gf-insta__play:focus-visible .gf-insta__icon {
	opacity: 0;
}


/* ---------- Handle unter dem Profil-Knopf ---------- */
.gf-insta__handle {
	display: inline-block;
	margin-top: 12px;
	color: #6C6F6E;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	text-decoration: none;
}

a.gf-insta__handle:hover,
a.gf-insta__handle:focus-visible {
	color: #0A0F0D;
	text-decoration: underline;
}

/* ---------- Ab 1.1.6: Rahmen und Karte mit Ton ---------- */

/* Feiner grauer Rahmen um jede Karte (Regal und Raster). border-box: Außenmaß bleibt gleich. */
.gf-insta__media {
	box-sizing: border-box;
	border: 1px solid #CECFCF;
}

/* Wachstum der Karte mit Ton: 1,18 (bis Runde 10: 1,08). Unter 768 px 1,14, dort sind es nur
   32 px bis zum Instagram-Knopf unter dem Regal. */
.gf-insta--slider {
	--gf-insta-grow: 1.18;
	--gf-insta-schub: 0px;
}

/* Platz für die wachsende Karte: oben und unten mehr Innenabstand im Regal, per Gegenrand
   ausgeglichen. Das Regal steht dadurch genau so hoch und an derselben Stelle wie vorher
   (4 px oben, 16 px unten). Bei 280 x 498 px ragt die Karte um 44,8 px nach oben und unten. */
.gf-insta--slider .gf-insta__stage {
	display: flow-root;
}

.gf-insta--slider .gf-insta__track {
	padding-top: 48px;
	padding-bottom: 48px;
	margin-top: -44px;
	margin-bottom: -32px;
}

@media (max-width: 767px) {
	.gf-insta--slider {
		--gf-insta-grow: 1.14;
	}

	.gf-insta--slider .gf-insta__track {
		padding-top: 40px;
		padding-bottom: 40px;
		margin-top: -36px;
		margin-bottom: -24px;
	}
}

/* Nur transform: nichts im Layout ändert sich, die Nachbarn gleiten zur Seite.
   Verschoben und vergrößert wird die Bildfläche in der Karte, nicht die Karte (li) selbst: Die
   Karte ist der Rastpunkt des Regals, und der Browser berechnet Rastpunkte aus der verschobenen
   Box. Bis Runde 10 lag transform auf der Karte, beim Zurückgleiten rastete das Regal der
   Karte hinterher (25 px nach Pfeil bei Ton an, 1 px Hin und Her bei Ton von A nach B). */
.gf-insta--slider .gf-insta__media {
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.gf-insta--slider.is-tonfokus .gf-insta__card .gf-insta__media {
	transform: translate3d(calc(var(--gf-insta-schub) * -1), 0, 0);
}

.gf-insta--slider.is-tonfokus .gf-insta__card.is-sound ~ .gf-insta__card .gf-insta__media {
	transform: translate3d(var(--gf-insta-schub), 0, 0);
}

/* Nur Größe und Ebene. Den Rastpunkt in der Mitte trägt allein gf-insta__card--mitte; Ton an/aus
   ändert so kein Einrasten (bis Runde 10 hier zusätzlich scroll-snap-align center und das lockere
   Einrasten is-tonweich, beides löste beim Umschalten ein Nachrasten des Browsers aus). */
.gf-insta--slider.is-tonfokus .gf-insta__card.is-sound {
	position: relative;
	z-index: 1;
}

.gf-insta--slider.is-tonfokus .gf-insta__card.is-sound .gf-insta__media {
	transform: scale(var(--gf-insta-grow));
}

/* Die Karte, die in der Mitte steht (mit Ton oder nach Ton aus), rastet dort ein. Das Skript
   setzt die Klasse erst, wenn das Einrasten ausgeschaltet ist, und nimmt sie weg, sobald das
   Regal nach eigenem Wischen woanders zur Ruhe kommt. */
.gf-insta--slider .gf-insta__card.gf-insta__card--mitte {
	scroll-snap-align: center;
}

/* Videos ohne Tonspur (Liste tonspur.json oder Prüfung im Browser): kein Ton-Knopf, das
   Instagram-Zeichen steht wieder rechts wie bei Bildern. */
.gf-insta .gf-insta__card--stumm .gf-insta__sound {
	display: none;
}

.gf-insta .gf-insta__card--stumm .gf-insta__ig {
	left: auto;
	right: 8px;
}

.gf-insta--slider .gf-insta__card--stumm.gf-insta__card--auto .gf-insta__play {
	cursor: default;
}

/* ---------- Ab Runde 12: Regal am Handy mit großer Mitte ---------- */

/* Bis 767 px stand bisher eine Karte am linken Rand und rechts schaute ein Stück der nächsten
   heraus. Jetzt steht die Karte in der Mitte, links und rechts bleibt je ein Stück der Nachbarn
   stehen (Vorbild: Slider im Kopfbereich der Pool-Seite). Alle Regeln stehen bewusst am Ende der
   Datei: sie sollen die älteren Angaben weiter oben überschreiben.

   Die Kartenbreite steht hier direkt an der Karte und nicht in --gf-insta-card-w. Grund: die
   Kartenbreite aus dem Elementor-Feld liegt als eigene Angabe am Widget und gilt sonst auch am
   Handy. Für Tablet und Desktop bleibt das Feld unverändert maßgeblich. */

@media (max-width: 767px) {
	.gf-insta--slider {
		/* Breite der Karte: 62 % der Fensterbreite, höchstens 280 px. Daraus bleiben je Seite
		   rund 9 bis 11 % der Fensterbreite für den angeschnittenen Nachbarn. Die Obergrenze von
		   280 px hält den Freiraum über und unter dem Regal ein, auch wenn die Karte mit Ton
		   wächst (bei 280 px ragt sie 44,8 px nach oben und unten, Freiraum sind 48 px). */
		--gf-insta-karte-handy: min(62vw, 280px);
		/* Nachbarn etwas kleiner und mit dunkler Deckschicht. */
		--gf-insta-neben: .92;
		--gf-insta-deck: .45;
		/* Karte mit Ton, wie am Desktop. */
		--gf-insta-grow: 1.18;
	}

	.gf-insta--slider .gf-insta__card {
		flex-basis: var(--gf-insta-karte-handy);
		width: var(--gf-insta-karte-handy);
		/* Jede Karte rastet mittig ein, nicht mehr am linken Rand. */
		scroll-snap-align: center;
	}

	/* Enger Abstand, damit von den Nachbarn genug übrig bleibt. Oben und unten derselbe Freiraum
	   wie am Desktop: das Regal steht genau so hoch wie vorher (4 px oben, 16 px unten), die
	   wachsende Karte mit Ton wird aber nicht mehr beschnitten. */
	.gf-insta--slider .gf-insta__track {
		gap: 10px;
		padding-top: 48px;
		padding-bottom: 48px;
		margin-top: -44px;
		margin-bottom: -32px;
	}

	/* Welche Karte gerade in der Mitte steht, setzt das Skript als gf-insta__card--gross, und am
	   Regal selbst gf-insta--mittefuehrung. Das ist reine Optik. Der Rastpunkt in der Mitte heißt
	   weiterhin gf-insta__card--mitte und gehört zur Ton-Steuerung.
	   Beide Klassen fehlen, solange es nichts zu wischen gibt (wenige Karten, is-fit) und bevor
	   das Skript läuft. Dann bleiben alle Karten groß und hell wie bisher. */
	.gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card {
		--gf-insta-stufe: var(--gf-insta-neben);
	}

	.gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card--gross {
		position: relative;
		z-index: 2;
		--gf-insta-stufe: 1;
	}

	.gf-insta--slider.is-tonfokus .gf-insta__card.is-sound {
		--gf-insta-stufe: var(--gf-insta-grow);
	}

	/* Eine Angabe für alle Zustände. Die Auswahl wiederholt die Regeln für den seitlichen Schub
	   weiter oben und ersetzt sie damit: am Handy rücken die Nachbarn nicht zur Seite, die große
	   Karte darf sie überdecken. */
	.gf-insta--slider .gf-insta__media,
	.gf-insta--slider.is-tonfokus .gf-insta__card .gf-insta__media,
	.gf-insta--slider.is-tonfokus .gf-insta__card.is-sound .gf-insta__media,
	.gf-insta--slider.is-tonfokus .gf-insta__card.is-sound ~ .gf-insta__card .gf-insta__media {
		transform: scale(var(--gf-insta-stufe, 1));
		transition: transform .3s cubic-bezier(.22, .61, .36, 1);
	}

	/* Dunkle Deckschicht auf den Nachbarn, damit die Mitte führt. Sie liegt unter dem
	   Instagram-Zeichen und dem Ton-Knopf, deren Kontrast bleibt unverändert. */
	.gf-insta--slider .gf-insta__media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: inherit;
		background: rgba(10, 15, 13, var(--gf-insta-deck));
		opacity: 0;
		transition: opacity .3s ease;
		pointer-events: none;
	}

	.gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card:not(.gf-insta__card--gross) .gf-insta__media::after {
		opacity: 1;
	}

	/* Auf den angeschnittenen Nachbarn sind Ton-Knopf und Instagram-Zeichen nicht zu gebrauchen:
	   Ein Fingertipp dort soll die Karte in die Mitte holen und nicht Instagram öffnen. Auf der
	   Karte in der Mitte und bei Tastaturbedienung bleiben beide wie gehabt. */
	.gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card:not(.gf-insta__card--gross):not(:focus-within) .gf-insta__ig,
	.gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card:not(.gf-insta__card--gross):not(:focus-within) .gf-insta__sound {
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease;
	}

	/* Springt das Regal am Endlos-Umbruch um einen Kartensatz weiter, wechselt die Karte in der
	   Mitte auf ihre Kopie. Dieser Wechsel darf nicht nachwachsen, sonst zuckt die Mitte. */
	.gf-insta--slider.gf-insta--ohne-uebergang .gf-insta__media,
	.gf-insta--slider.gf-insta--ohne-uebergang .gf-insta__card .gf-insta__media,
	.gf-insta--slider.gf-insta--ohne-uebergang .gf-insta__card .gf-insta__media::after,
	.gf-insta--slider.gf-insta--ohne-uebergang.is-tonfokus .gf-insta__card .gf-insta__media {
		transition: none;
	}
}

/* Pfeile am Handy: auf Touch-Geräten bleiben sie ausgeblendet, dort wird gewischt (Regel weiter
   oben). Wo mit Maus gezeigt wird, stehen sie jetzt als Paar mittig unter dem Regal statt über
   der Bildmitte des laufenden Videos. */
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
	.gf-insta--slider .gf-insta__stage {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.gf-insta--slider .gf-insta__track {
		order: 0;
		flex: 0 0 100%;
		width: 100%;
	}

	.gf-insta--slider .gf-insta__arrow--prev {
		order: 1;
	}

	.gf-insta--slider .gf-insta__arrow--next {
		order: 2;
	}

	.gf-insta .gf-insta__arrow,
	.gf-insta .gf-insta__arrow[disabled] {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		margin-top: 20px;
		transform: none;
	}
}

/* ---------- Ab Runde 12: Darstellung "Bühne" für jede Breite ---------- */

/* Trägt das Elementor-Widget die CSS-Klasse gf-insta-buehne (Erweitert > CSS-Klassen), steht das
   Regal bei JEDER Breite so da, wie es bisher nur am Handy stand: eine große Karte in der Mitte,
   links und rechts je ein angeschnittener Nachbar, beide kleiner und abgedunkelt, Pfeile als Paar
   unter der Bühne. Ohne die Klasse ändert sich nichts, die laufende Leiste bleibt, wie sie ist.

   Die Klasse liegt am Wrapper .elementor-widget, also über dem Regal. Die Auswahl greift deshalb
   schon vor dem Skript: Kartenbreite und Höhe stehen von der ersten Zeichnung an fest, beim Laden
   rückt nichts nach.

   Die Größen richten sich nach der Breite des Regals, nicht nach der Fensterbreite: Die Karte ist
   ein Anteil der Regalbreite, der Freiraum über und unter dem Regal ist derselbe Anteil noch
   einmal umgerechnet (Karte 9:16, Wachstum 1,18 bei Ton an). So passt die wachsende Karte in jeder
   Spaltenbreite hinein, ohne oben oder unten abgeschnitten zu werden. */

.gf-insta-buehne .gf-insta--slider {
	/* Breite der Karte in der Mitte, gemessen an der Breite des Regals. */
	--gf-insta-karte-buehne: 54%;
	/* Freiraum über und unter dem Regal: Kartenhöhe mal 0,09 (die Hälfte des Wachstums 1,18),
	   ausgedrückt als Anteil derselben Breite: 0,54 * 16 / 9 * 0,09 = 8,6 Prozent, aufgerundet.
	   Derselbe Wert hält auch die Pfeile unter dem Regal frei, damit die wachsende Karte sie
	   nicht überdeckt. */
	--gf-insta-luft-buehne: 8.7%;
	--gf-insta-abstand-buehne: 24px;
	/* Nachbarn etwas kleiner und mit dunkler Deckschicht, wie am Handy. */
	--gf-insta-neben: .92;
	--gf-insta-deck: .45;
	--gf-insta-grow: 1.18;
}

/* Die Breite steht direkt an der Karte und nicht in --gf-insta-card-w: Das Feld Kartenbreite des
   Widgets setzt --gf-insta-card-w und würde sonst gewinnen. */
.gf-insta-buehne .gf-insta--slider .gf-insta__card {
	flex-basis: var(--gf-insta-karte-buehne);
	width: var(--gf-insta-karte-buehne);
	scroll-snap-align: center;
}

.gf-insta-buehne .gf-insta--slider .gf-insta__track {
	gap: var(--gf-insta-abstand-buehne);
	padding-top: calc(var(--gf-insta-luft-buehne) + 4px);
	padding-bottom: calc(var(--gf-insta-luft-buehne) + 4px);
	margin-top: calc(0px - var(--gf-insta-luft-buehne));
	margin-bottom: calc(0px - var(--gf-insta-luft-buehne));
}

/* Welche Karte in der Mitte steht, trägt gf-insta__card--gross (setzt das Skript). Solange es
   nichts zu blättern gibt, fehlt die Führung und alle Karten bleiben groß und hell. */
.gf-insta-buehne .gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card {
	--gf-insta-stufe: var(--gf-insta-neben);
}

.gf-insta-buehne .gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card--gross {
	position: relative;
	z-index: 2;
	--gf-insta-stufe: 1;
}

.gf-insta-buehne .gf-insta--slider.is-tonfokus .gf-insta__card.is-sound {
	--gf-insta-stufe: var(--gf-insta-grow);
}

/* Eine Angabe für alle Zustände. Die Auswahl wiederholt die Regeln für den seitlichen Schub weiter
   oben und ersetzt sie damit: In der Bühne rücken die Nachbarn nicht zur Seite, die große Karte
   darf sie überdecken. */
.gf-insta-buehne .gf-insta--slider .gf-insta__media,
.gf-insta-buehne .gf-insta--slider.is-tonfokus .gf-insta__card .gf-insta__media,
.gf-insta-buehne .gf-insta--slider.is-tonfokus .gf-insta__card.is-sound .gf-insta__media,
.gf-insta-buehne .gf-insta--slider.is-tonfokus .gf-insta__card.is-sound ~ .gf-insta__card .gf-insta__media {
	transform: scale(var(--gf-insta-stufe, 1));
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* Dunkle Deckschicht auf den Nachbarn, damit die Mitte führt. Sie liegt unter dem Instagram-Zeichen
   und dem Ton-Knopf, deren Kontrast bleibt unverändert. */
.gf-insta-buehne .gf-insta--slider .gf-insta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: rgba(10, 15, 13, var(--gf-insta-deck));
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.gf-insta-buehne .gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card:not(.gf-insta__card--gross) .gf-insta__media::after {
	opacity: 1;
}

/* Auf den angeschnittenen Nachbarn sind Ton-Knopf und Instagram-Zeichen nicht zu gebrauchen: Ein
   Klick dort soll die Karte in die Mitte holen und nicht Instagram öffnen. Auf der Karte in der
   Mitte und bei Tastaturbedienung bleiben beide wie gehabt. */
.gf-insta-buehne .gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card:not(.gf-insta__card--gross):not(:focus-within) .gf-insta__ig,
.gf-insta-buehne .gf-insta--slider.gf-insta--mittefuehrung .gf-insta__card:not(.gf-insta__card--gross):not(:focus-within) .gf-insta__sound {
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

/* Springt das Regal am Endlos-Umbruch um einen Kartensatz weiter, wechselt die Karte in der Mitte
   auf ihre Kopie. Dieser Wechsel darf nicht nachwachsen, sonst zuckt die Mitte. */
.gf-insta-buehne .gf-insta--slider.gf-insta--ohne-uebergang .gf-insta__media,
.gf-insta-buehne .gf-insta--slider.gf-insta--ohne-uebergang .gf-insta__card .gf-insta__media,
.gf-insta-buehne .gf-insta--slider.gf-insta--ohne-uebergang .gf-insta__card .gf-insta__media::after,
.gf-insta-buehne .gf-insta--slider.gf-insta--ohne-uebergang.is-tonfokus .gf-insta__card .gf-insta__media {
	transition: none;
}

/* Pfeile: In der Bühne stehen sie als Paar mittig unter dem Regal und sind auf jedem Gerät zu
   sehen, auch dort, wo gewischt wird. Sie verdecken damit kein Video. */
.gf-insta-buehne .gf-insta--slider .gf-insta__stage {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.gf-insta-buehne .gf-insta--slider .gf-insta__track {
	order: 0;
	flex: 0 0 100%;
	width: 100%;
}

.gf-insta-buehne .gf-insta--slider .gf-insta__arrow--prev {
	order: 1;
}

.gf-insta-buehne .gf-insta--slider .gf-insta__arrow--next {
	order: 2;
}

.gf-insta-buehne .gf-insta .gf-insta__arrow,
.gf-insta-buehne .gf-insta .gf-insta__arrow[disabled] {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	/* So weit nach unten, dass die Karte mit Ton (1,18) knapp darüber endet. */
	margin-top: calc(var(--gf-insta-luft-buehne) - 12px);
	transform: none;
	display: flex !important;
}

/* Vor dem Start des Skripts und wenn es nichts zu blättern gibt, bleiben die Pfeile stehen, aber
   unsichtbar: Der Platz ist von Anfang an belegt, beim Laden rückt nichts nach. */
.gf-insta-buehne .gf-insta:not([data-gf-insta-ready]) .gf-insta__arrow,
.gf-insta-buehne .gf-insta.is-fit .gf-insta__arrow {
	visibility: hidden;
}

/* Am Handy ist das Regal so breit wie die Seite. Dort darf die Karte einen größeren Anteil
   einnehmen, sonst wirkt sie verloren. Freiraum entsprechend: 0,62 * 16 / 9 * 0,09 = 9,9 Prozent. */
@media (max-width: 767px) {
	.gf-insta-buehne .gf-insta--slider {
		--gf-insta-karte-buehne: 62%;
		/* 0,62 * 16 / 9 * 0,09 = 9,9 Prozent. */
		--gf-insta-luft-buehne: 10%;
		--gf-insta-abstand-buehne: 12px;
	}
}

/* ---------- Ab Runde 13: Hinweise auf Instagram in den Farben des App-Zeichens ---------- */

/* Kundenwunsch: Die Hinweise auf Instagram sollen nicht mehr schwarz-weiß sein, sondern die
   Farben tragen, die das Zeichen der App selbst hat. Der Verlauf steht als eine Angabe an der
   Wurzel, damit Knopf und Karten-Zeichen ihn gemeinsam benutzen (bis 1.3.1 auch die Großansicht,
   die am Seitenkörper hing; deshalb :root und nicht .gf-insta).

   --gf-ig-deck legt eine dunkle Schicht über den Verlauf. Ohne sie steht die weiße Schrift im
   orangen Teil des Verlaufs auf zu hellem Grund.

   --gf-ig-grund ist der Rückfall als einfarbige Fläche: Elementor hält Hintergrundbilder in
   Containern zurück, solange sie weit außerhalb des Bildschirms liegen. Ohne diese Farbe wäre
   der Knopf in dieser kurzen Zeitspanne durchsichtig. Die Farbe ist der mittlere Ton des Verlaufs
   mit derselben dunklen Schicht. */
:root {
	--gf-ig-verlauf: linear-gradient(45deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
	--gf-ig-deck: rgba(10, 15, 13, .26);
	--gf-ig-deck-tief: rgba(10, 15, 13, .38);
	--gf-ig-flaeche: linear-gradient(var(--gf-ig-deck), var(--gf-ig-deck)), var(--gf-ig-verlauf);
	--gf-ig-flaeche-tief: linear-gradient(var(--gf-ig-deck-tief), var(--gf-ig-deck-tief)), var(--gf-ig-verlauf);
	--gf-ig-grund: #A41F5B;
	--gf-ig-grund-tief: #891A4C;
}

/* Knopf zum Profil. Größe, Radius, Innenabstand und Schrift bleiben, nur die Farbe wechselt.
   Die vier Farbfelder des Widgets (Hintergrund und Text, je auch bei Hover) schreibt Elementor mit
   höherem Gewicht in die CSS-Datei der jeweiligen Seite, deshalb steht hier important. Die Farbe
   dieses Knopfes ist damit fest und lässt sich im Baukasten nicht mehr umstellen. */
.gf-insta .gf-insta__profile,
.gf-insta .gf-insta__profile:link,
.gf-insta .gf-insta__profile:visited {
	background-color: var(--gf-ig-grund) !important;
	background-image: var(--gf-ig-flaeche) !important;
	color: #FFFFFF !important;
}

.gf-insta .gf-insta__profile:hover,
.gf-insta .gf-insta__profile:focus,
.gf-insta .gf-insta__profile:focus-visible {
	background-color: var(--gf-ig-grund-tief) !important;
	background-image: var(--gf-ig-flaeche-tief) !important;
	color: #FFFFFF !important;
}

.gf-insta .gf-insta__profile svg path {
	fill: currentColor;
}

/* Zeichen auf den Karten (Verweis und reine Zierde). Der sichtbare Kreis bleibt 40 px, der
   Innenabstand von 2 px schneidet die Fläche wie bisher zu (background-clip). Beim Zeigen
   ändert sich nichts mehr, der frühere Wechsel auf Weiß entfällt. */
.gf-insta .gf-insta__ig,
.gf-insta .gf-insta__ig:link,
.gf-insta .gf-insta__ig:visited,
.gf-insta a.gf-insta__ig:hover,
.gf-insta a.gf-insta__ig:focus,
.gf-insta a.gf-insta__ig:focus-visible {
	background-color: var(--gf-ig-grund);
	background-image: var(--gf-ig-flaeche);
	background-clip: content-box;
	color: #FFFFFF;
}

.gf-insta .gf-insta__ig svg path,
.gf-insta a.gf-insta__ig:hover svg path,
.gf-insta a.gf-insta__ig:focus-visible svg path {
	fill: #FFFFFF;
}