/* Instagram-Feed: Widget "Instagram-Raster" (Raster, Mehr laden, Karte groß) */

.gf-insta--grid {
	--gf-grid-cols: 4;
	--gf-insta-gap: 16px;
}

.gf-insta--grid .gf-insta__head {
	margin-bottom: var(--gf-insta-head-gap);
}

.gf-insta__grid {
	display: grid;
	grid-template-columns: repeat(var(--gf-grid-cols), minmax(0, 1fr));
	gap: var(--gf-insta-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Die Karten bekommen ihre Breite im Raster, nicht über eine feste Kartenbreite. */
.gf-insta--grid .gf-insta__card {
	flex: none;
	width: auto;
	scroll-snap-align: none;
}

.gf-insta--grid .gf-insta__media {
	border-radius: var(--gf-insta-radius);
}

/* ---------- Fußzeile: Mehr laden ---------- */

.gf-insta__fuss {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 40px;
	text-align: center;
}

.gf-insta .gf-insta__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 32px;
	min-height: 48px;
	border: 1px solid #0A0F0D;
	border-radius: 100px;
	background-color: #FFFFFF;
	color: #0A0F0D;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.gf-insta .gf-insta__more:hover,
.gf-insta .gf-insta__more:focus {
	background-color: #0A0F0D;
	color: #FFFFFF;
	border-color: #0A0F0D;
	text-decoration: none;
}

.gf-insta__more:focus-visible {
	outline: 3px solid var(--gf-insta-focus);
	outline-offset: 3px;
}

.gf-insta__zaehler {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: #6C6F6E;
}

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

@media (max-width: 1024px) {
	.gf-insta--grid {
		--gf-grid-cols: 3;
	}
}

@media (max-width: 767px) {
	.gf-insta--grid {
		--gf-grid-cols: 2;
		--gf-insta-gap: 10px;
	}

	.gf-insta__fuss {
		margin-top: 28px;
	}
}

/* Auffälliger Knopf zum Instagram-Profil (Raster) */
.gf-insta .gf-insta__profile--gross {
	padding: 17px 34px;
	min-height: 56px;
	font-size: 18px;
	gap: 12px;
}

.gf-insta__profile--gross .gf-insta__profile-icon svg {
	display: block;
}

@media (max-width: 767px) {
	.gf-insta .gf-insta__profile--gross {
		padding: 15px 26px;
		min-height: 52px;
		font-size: 17px;
	}
}


/* ---------- 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 Runde 13: Hinweise auf Instagram in den Farben des App-Zeichens ---------- */

/* Der Verlauf steht in gf-insta-reels.css an :root. Diese Datei wird immer zusammen mit jener
   geladen (sie ist als abhängig angemeldet) und benutzt die Angaben mit. */

/* Ab 2.0.1 (18.09.2026): Das Instagram-Zeichen sitzt auf ALLEN Rasterkarten unten links, wie bei
   den Videokarten; unten rechts steht nur noch der Ton-Knopf der Videos. Bildkarten und Videos ohne
   Tonspur tragen unten rechts kein Zeichen mehr, das Zeichen oben rechts auf Bildkarten entfiel.
   Vorher standen auf Bildkarten zwei Instagram-Zeichen (oben rechts und unten rechts). */
.gf-insta.gf-insta--grid .gf-insta__ig {
	left: 8px;
	right: auto;
}

/* ---------- Ab 1.4.0: Karte groß im Raster ---------- */

/* Die Karte (li) hält ihren Platz und bestimmt die Höhe über ihr Seitenverhältnis. Die Bildfläche
   liegt absolut darin: Wächst sie, fließt das Raster nicht um. Ruhezustand wie bisher, 9:16. */
.gf-insta--grid .gf-insta__card {
	position: relative;
	aspect-ratio: 9 / 16;
}

.gf-insta--grid .gf-insta__media {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: left .4s cubic-bezier(.22, .61, .36, 1), top .4s cubic-bezier(.22, .61, .36, 1),
		width .4s cubic-bezier(.22, .61, .36, 1), height .4s cubic-bezier(.22, .61, .36, 1),
		border-radius .4s ease;
}

/* Standbild füllt die Fläche immer ganz aus. Eine Regel des Themes (img mit height auto, höheres
   Gewicht) ließ Bilder bisher in ihrem eigenen Seitenverhältnis stehen. Bei 9:16-Standbildern fiel
   das kaum auf, bei 3:4 am Handy und bei Bildbeiträgen bliebe unten eine leere Fläche. */
.gf-insta--grid .gf-insta__media .gf-insta__img {
	height: 100%;
}

/* Lage und Größe setzt das Skript als Angaben an der Karte (px, bezogen auf ihren Platz). */
.gf-insta--grid .gf-insta__card.is-gross {
	z-index: 5;
}

.gf-insta--grid .gf-insta__card.is-zurueck {
	z-index: 4;
}

.gf-insta--grid .gf-insta__card.is-gross .gf-insta__media,
.gf-insta--grid .gf-insta__card.is-zurueck .gf-insta__media {
	left: var(--gf-gross-x, 0px);
	top: var(--gf-gross-y, 0px);
	width: var(--gf-gross-b, 100%);
	height: var(--gf-gross-h, 100%);
}

/* Auf der großen Karte kein Abspiel- oder Pausenzeichen in der Mitte: Ein Klick dort macht die
   Karte wieder normal und hält das Video nicht an. */
.gf-insta.gf-insta--grid .gf-insta__card.is-gross .gf-insta__play .gf-insta__icon {
	opacity: 0;
}

/* Übrige Karten abgedunkelt, mit derselben Deckschicht wie die Nachbarn im Regal. Die Schicht
   liegt über Bild und Video, aber unter dem Fokusrahmen. */
.gf-insta--grid .gf-insta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: rgba(10, 15, 13, .45);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.gf-insta--grid.is-hervorhebung .gf-insta__card:not(.is-gross) .gf-insta__media::after {
	opacity: 1;
}

/* Auf den abgedunkelten Karten treten Instagram-Zeichen und Lautsprecher zurück. Ein Klick auf eine
   solche Karte macht sie groß. Mit der Tastatur bleiben beide erreichbar. */
.gf-insta--grid .gf-insta__ig,
.gf-insta.gf-insta--grid .gf-insta__sound {
	transition: background-color .2s ease, color .2s ease, opacity .3s ease;
}

.gf-insta.gf-insta--grid.is-hervorhebung .gf-insta__card:not(.is-gross):not(:focus-within) .gf-insta__ig,
.gf-insta.gf-insta--grid.is-hervorhebung .gf-insta__card:not(.is-gross):not(:focus-within) .gf-insta__sound {
	opacity: 0;
	pointer-events: none;
}

/* Neu rechnen bei anderer Fenstergröße: ohne Übergang. */
.gf-insta--grid.gf-insta--ohne-uebergang .gf-insta__media {
	transition: none;
}

/* ---------- Ab 1.5.0: Ladering und sauberer Ausweg ----------

   Solange nach einem Klick noch kein Bild kommt, dreht sich ein Ring in genau dem Zeichen, das die
   Karte im Ruhezustand ohnehin trägt (dunkler Kreis mit Weichzeichnung). Es kommt kein neues
   Bauteil dazu, nur der Inhalt des Kreises wechselt. Das Standbild bleibt dabei stehen. */

.gf-insta.gf-insta--grid .gf-insta__card.is-laedt .gf-insta__icon,
.gf-insta.gf-insta--grid .gf-insta__card.is-gross.is-laedt .gf-insta__play .gf-insta__icon {
	opacity: 1;
}

.gf-insta--grid .gf-insta__card.is-laedt .gf-insta__svg-play,
.gf-insta--grid .gf-insta__card.is-laedt .gf-insta__svg-pause {
	display: none;
}

.gf-insta--grid .gf-insta__card.is-laedt .gf-insta__icon::after {
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .34);
	border-top-color: #FFFFFF;
	animation: gf-insta-dreht .85s linear infinite;
}

@keyframes gf-insta-dreht {
	to {
		transform: rotate(360deg);
	}
}

/* Bei reduzierter Bewegung dreht nichts: Der Ring steht und zeigt den Zustand als Teilkreis. */
@media (prefers-reduced-motion: reduce) {
	.gf-insta--grid .gf-insta__card.is-laedt .gf-insta__icon::after {
		animation: none;
		border-top-color: rgba(255, 255, 255, .32);
		border-right-color: #FFFFFF;
	}
}

/* Nach der Frist bleibt das Standbild stehen, der Hinweis führt zum Beitrag. Er steht unter der
   Kartenmitte und damit neben den Knöpfen in den Ecken, nicht über ihnen. */
.gf-insta--grid .gf-insta__notiz {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50%;
	margin-top: 42px;
	z-index: 3;
	padding: 9px 14px;
	border-radius: 100px;
	background: rgba(10, 15, 13, .78);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	text-decoration: underline;
}

.gf-insta--grid a.gf-insta__notiz:hover,
.gf-insta--grid a.gf-insta__notiz:focus-visible {
	background: rgba(10, 15, 13, .9);
	color: #FFFFFF;
}

.gf-insta--grid .gf-insta__notiz:focus-visible {
	outline: 3px solid var(--gf-insta-focus);
	outline-offset: 2px;
}

/* ---------- Ab 1.4.0: Handy wie das Profil in der Instagram-App ---------- */

/* Drei Karten je Reihe im Format 3:4, dicht gesetzt. Spalten, Abstand und Eckenradius stehen hier
   direkt am Raster und an der Bildfläche: Die Handy-Werte aus dem Elementor-Widget (Spalten und
   Abstand) wirken dadurch am Handy nicht mehr. Radius 12 wie bei allen Karten der Website am Handy. */
@media (max-width: 767px) {
	.gf-insta--grid .gf-insta__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px;
	}

	.gf-insta--grid .gf-insta__card {
		aspect-ratio: 3 / 4;
	}

	.gf-insta--grid .gf-insta__media {
		border-radius: 12px;
	}

	/* Groß zeigt die Karte das Reel im vollen Hochformat mit dem Radius der großen Karten. */
	.gf-insta--grid .gf-insta__card.is-gross .gf-insta__media {
		border-radius: var(--gf-insta-radius);
	}

	/* Knöpfe auf den kleinen Karten: Kreis 28 px, Klickfläche 34 px, 3 px vom Rand. */
	.gf-insta.gf-insta--grid .gf-insta__card:not(.is-gross) .gf-insta__ig,
	.gf-insta.gf-insta--grid .gf-insta__card:not(.is-gross) .gf-insta__sound {
		width: 34px;
		height: 34px;
		padding: 3px;
		bottom: 3px;
	}

	.gf-insta.gf-insta--grid .gf-insta__card:not(.is-gross) .gf-insta__sound {
		right: 3px;
	}

	.gf-insta.gf-insta--grid .gf-insta__card:not(.is-gross) .gf-insta__ig {
		left: 3px;
		right: auto;
	}

	.gf-insta.gf-insta--grid .gf-insta__card:not(.is-gross) .gf-insta__ig svg,
	.gf-insta.gf-insta--grid .gf-insta__card:not(.is-gross) .gf-insta__sound svg {
		width: 16px;
		height: 16px;
	}

	.gf-insta.gf-insta--grid .gf-insta__card:not(.is-gross) .gf-insta__icon {
		width: 36px;
		height: 36px;
		margin: -18px 0 0 -18px;
	}

	.gf-insta.gf-insta--grid .gf-insta__card:not(.is-gross) .gf-insta__icon svg {
		width: 18px;
		height: 18px;
	}

	/* Hinweis in den kleineren Maßen des Handys. */
	.gf-insta--grid .gf-insta__notiz {
		left: 8px;
		right: 8px;
		margin-top: 36px;
		padding: 8px 12px;
		font-size: 13px;
	}
}