.gib-dg {
	--gib-dg-gap: 10px;
	--gib-dg-accent: var(--e-global-color-primary, #b4171d);
	--gib-dg-dark: var(--e-global-color-secondary, #1e323b);
	--gib-dg-placeholder: #f3f3f3;
	width: 100%;
}

/*
 * Elementor-Container mit "align-items: flex-start" machen das Widget nur so breit wie
 * seinen Inhalt. Firefox (ab ~159) rechnet die Lazy-Load-Bilder dabei nicht mit ein,
 * dann schrumpft die Galerie auf die Breite der Button-Leiste. Daher Widget auf volle Breite.
 */
.elementor-widget:has(.gib-dg) {
	width: 100%;
}

.gib-dg__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 24px;
}

.gib-dg__count {
	margin: 0;
	color: var(--gib-dg-dark);
	font-size: 16px;
	line-height: 1.4;
}

/* Wie die Elementor-Buttons der Seite (z. B. "Zu unseren Jobangeboten" auf der Startseite). */
.gib-dg .gib-dg__all {
	display: inline-block;
	margin: 0;
	padding: 10px 20px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: var(--gib-dg-accent);
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 25px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s;
}

.gib-dg .gib-dg__all:hover,
.gib-dg .gib-dg__all:focus-visible {
	background: var(--gib-dg-dark);
	color: #fff;
}

.gib-dg .gib-dg__all:focus-visible,
.gib-dg .gib-dg__dl:focus-visible,
.gib-dg .gib-dg__open:focus-visible {
	outline: 3px solid var(--gib-dg-dark);
	outline-offset: 3px;
}

.gib-dg .gib-dg__all[aria-busy="true"] {
	cursor: progress;
}

.gib-dg__icon {
	flex: none;
	display: block;
}

.gib-dg__grid {
	display: grid;
	grid-template-columns: repeat(var(--gib-dg-cols, 4), minmax(0, 1fr));
	gap: var(--gib-dg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gib-dg__item {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--gib-dg-placeholder);
}

.gib-dg__open {
	display: block;
	width: 100%;
	height: 100%;
}

.gib-dg .gib-dg__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.gib-dg__open:hover .gib-dg__img {
	transform: scale(1.03);
}

/* Download-Button pro Bild: im Stil der Buttons der Seite (rot, abgerundet, weißer Rand). */
.gib-dg .gib-dg__dl {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: var(--gib-dg-accent);
	color: #fff;
	line-height: 0;
	transition: opacity 0.2s ease, background-color 0.3s;
}

.gib-dg .gib-dg__dl:hover,
.gib-dg .gib-dg__dl:focus-visible {
	background: var(--gib-dg-dark);
	color: #fff;
}

/* Mit Maus erst beim Überfahren einblenden, auf Touch-Geräten immer sichtbar. */
@media (hover: hover) and (pointer: fine) {
	.gib-dg .gib-dg__dl {
		opacity: 0;
	}

	.gib-dg__item:hover .gib-dg__dl,
	.gib-dg .gib-dg__dl:focus-visible {
		opacity: 1;
	}
}

@media (max-width: 1024px) {
	.gib-dg__grid {
		grid-template-columns: repeat(var(--gib-dg-cols-t, 3), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.gib-dg {
		--gib-dg-gap: 6px;
	}

	.gib-dg__grid {
		grid-template-columns: repeat(var(--gib-dg-cols-m, 2), minmax(0, 1fr));
	}

	.gib-dg .gib-dg__all {
		padding: 8px 16px;
		font-size: 16px;
		line-height: 20px;
	}

	.gib-dg .gib-dg__dl {
		right: 6px;
		bottom: 6px;
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gib-dg .gib-dg__img,
	.gib-dg .gib-dg__dl,
	.gib-dg .gib-dg__all {
		transition: none;
	}

	.gib-dg__open:hover .gib-dg__img {
		transform: none;
	}
}