/*
 * Gewinnspiel-Preise [koenig_gewinne] (inc/gewinne-shortcode.php).
 * Figma 1778:16046 "Landingpage – Gewinnspiel", Abschnitt "Die Gewinne".
 *
 * Kein eigener Rand, keine Höchstbreite – die Sektion füllt ihren
 * Elementor-Container (dort Boxed). Bei 1390px Inhalt:
 *   3 Spalten à 451px, 20px Abstand, Bild 451 × 351.
 *
 *   FILTER (H5)  16px  Pillen  36px  Goldlinie  50px  Karten
 *   Karte: Bild · 20px · Goldlinie · 12px · Label · 7px · Titel H4
 *   Zeilenabstand 60px.
 * Farben/Schriften über die CSS-Variablen aus inc/global-style-bridge.php.
 */

.kg {
	--kg-blau: var(--color-blue, #232c3c);
	--kg-gold: var(--color-gold, #907947);
	--kg-hell: var(--color-surface-alt, #efefef);
	--kg-weiss: var(--color-surface, #fff);
	--kg-heading: var(--font-heading, 'Nunito Sans', sans-serif);
	--kg-body: var(--font-body, 'Mada', sans-serif);
	width: 100%;
	color: var(--kg-blau);
	font-family: var(--kg-body);
}

.kg *,
.kg *::before,
.kg *::after {
	box-sizing: border-box;
}

.kg [hidden] {
	display: none !important;
}

/* H5: Mada Regular 18 (Handy 16), Versalien, 4 % Laufweite. */
.kg .kg-h5 {
	margin: 0;
	font-family: var(--kg-body) !important;
	font-size: clamp(16px, 15.30px + 0.179vw, 18px) !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--kg-blau) !important;
}

/* Filter ------------------------------------------------------------ */
.kg .kg-filter {
	margin-bottom: clamp(32px, 3.3vw, 50px);
}

.kg .kg-filter__titel {
	margin: 0 0 16px;
}

.kg .kg-filter__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

/* Pille (Figma "CTA – sekundär"): h 50, px 30, Radius 25, 1px Blau,
   Mada Regular 16/1.6. passiv weiß (Hover Hellgrau), aktiv blau gefüllt.
   !important, weil Elementor-Kit/Hello und links.css Links stylen. */
.kg .kg-pille,
.kg .kg-pille:visited,
.kg .kg-pille:hover,
.kg .kg-pille:focus {
	display: inline-flex !important;
	align-items: center;
	height: 50px;
	margin: 0;
	padding: 10px 30px !important;
	border: 1px solid var(--kg-blau) !important;
	border-radius: 25px !important;
	background: var(--kg-weiss) !important;
	font-family: var(--kg-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	background-image: none !important;
	white-space: nowrap;
	color: var(--kg-blau) !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kg .kg-pille::after,
.kg .kg-pille::before {
	display: none !important; /* Unterstreich-Animation aus links.css */
}

.kg .kg-pille:hover {
	background: var(--kg-hell) !important;
}

.kg .kg-pille.is-aktiv,
.kg .kg-pille.is-aktiv:hover,
.kg .kg-pille.is-aktiv:focus {
	background: var(--kg-blau) !important;
	color: var(--kg-weiss) !important;
	cursor: default;
}

.kg .kg-pille:focus-visible {
	outline: 2px solid var(--kg-blau) !important;
	outline-offset: 3px !important;
}

.kg .kg-filter__linie {
	height: 0;
	margin-top: 36px;
	border-top: 1px solid var(--kg-gold);
}

/* Raster ------------------------------------------------------------ */
.kg .kg-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.kg .kg-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.kg .kg-raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 60px;
	}
}

/* Karte ------------------------------------------------------------- */
.kg .kg-karte {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kg .kg-karte::before,
.kg .kg-karte::marker {
	content: none;
}

.kg .kg-karte__bild {
	aspect-ratio: 451 / 351;
	overflow: hidden;
	background: #d9d9d9;
}

.kg .kg-karte__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.kg .kg-karte__linie {
	height: 0;
	margin-top: 20px;
	border-top: 1px solid var(--kg-gold);
}

/* Label: Mada Regular 16/1.6, Versalien, Blau. */
.kg .kg-karte__label {
	margin: 12px 0 0 !important;
	padding: 0;
	font-family: var(--kg-body) !important;
	font-size: clamp(14px, 13.30px + 0.179vw, 16px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: var(--kg-blau) !important;
}

/* Titel: H4 Nunito Sans Light 26 (Handy 20), Versalien, Blau. */
.kg .kg-karte__titel {
	margin: 7px 0 0 !important;
	padding: 0;
	font-family: var(--kg-heading) !important;
	font-size: clamp(20px, 17.89px + 0.536vw, 26px) !important;
	font-weight: 300 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: var(--kg-blau) !important;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.kg .kg-karte__linie + .kg-karte__titel {
	margin-top: 12px !important; /* ohne Kategorie */
}

/* Leerzustand */
.kg .kg-leer {
	margin: 0;
	font-family: var(--kg-body);
	font-size: clamp(16px, 15.30px + 0.179vw, 18px);
	font-weight: 300;
	line-height: 1.6;
	color: var(--kg-blau);
}

@media (prefers-reduced-motion: reduce) {
	.kg .kg-pille {
		transition: none !important;
	}
}