/*
 * GORILLA GARAGE — FOOTER
 *
 * Vertikale Hierarchie:
 *   ┌─ Top-Edge Hairline (Rot→Gold)
 *   │  INFO          — Kontakt | Werkstatt | News (3-col ≥768px, Stack mobil)
 *   │  BRAND-CLOSER  — Reviews-Pill direkt über großem Slogan-Logo (Brand-Anker)
 *   │  TRUST         — Castrol-Badge + Socials (zentriert)
 *   ├─ Hairline-Trenner
 *   │  BOTTOM        — Copyright + Legal-Menü
 *   └─
 *
 * Logo-Asset-Hack:
 *   Das Slogan-PNG ist ein quadratisches 1500×1500-Asset mit dem Wordmark+Claim
 *   nur in der mittleren Höhen-Zone. Wir setzen am Logo-Container ein striktes
 *   aspect-ratio 4:1 und am <img> object-fit:cover — das clippt die oberen+unteren
 *   transparenten Asset-Bereiche visuell weg, ohne die Datei anzufassen.
 *
 * Header-Bezüge:
 *   - Top-Edge Rot→Gold-Hairline + Bottom-Hairline (spiegelt Review-Card-Edges)
 *   - Inline-SVG-Socials identisch zu template-parts/header/topbar.php
 */

.site-footer {
	background-color: var(--gg-black);
	color: var(--color-text-on-dark);
}

.gg-footer {
	position: relative;
	overflow: hidden;
	padding-block: var(--section-padding-block);
	background:
		linear-gradient(
			180deg,
			#0a0a0c 0%,
			#0e0e10 55%,
			#070708 100%
		);
}

/* Top-Edge: Rot→Gold-Hairline mit weichem Halo. */
.gg-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(200, 16, 46, 0.65) 25%,
		rgba(201, 162, 76, 0.5) 60%,
		transparent 100%
	);
	box-shadow: 0 0 24px rgba(200, 16, 46, 0.35);
	pointer-events: none;
	z-index: 2;
}

/* Ambient: dezenter radialer Goldschimmer direkt unter dem Wordmark — sitzt
 * hinter dem Brand-Closer (Reviews + Logo) und lässt den Brand-Anker leicht
 * „aus dem Schwarz herausleuchten". Hotspot bei 55% Höhe sitzt knapp unter
 * dem GORILLA-GARAGE-Wordmark im Brand-Closer. */
.gg-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		50% 38% at 50% 58%,
		rgba(201, 162, 76, 0.12) 0%,
		rgba(200, 16, 46, 0.05) 35%,
		transparent 70%
	);
}

/* Crest-Wasserzeichen — großer Gorilla-Garage-Crest rechts unten, der
 * wie ein Lichtschemen aus dem Schwarz „herausglimmt".
 *   - mix-blend-mode: screen lässt nur die helleren Pixel durch
 *     (dunkler Bereich verschwindet, Crest bleibt als Glow-Silhouette)
 *   - leichter brightness-Push + warmer Gold-Drop-Shadow wirken wie
 *     Werkstatt-Streiflicht
 *   - sitzt unter dem Inner-Content (z-index 0), Footer hat overflow:hidden,
 *     darf also über die Kante hinauslaufen */
.gg-footer__mascot {
	position: absolute;
	right: 12%;
	bottom: 18%;
	width: clamp(20rem, 42vw, 38rem);
	height: auto;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	opacity: 0.07;
	mix-blend-mode: screen;
	filter:
		brightness(1.15)
		drop-shadow(0 0 80px rgba(201, 162, 76, 0.22));
	z-index: 0;
}

@media (max-width: 768px) {
	.gg-footer__mascot {
		right: 8%;
		bottom: 20%;
		width: 18rem;
		opacity: 0.06;
	}
}

/* Reifenprofil-Pattern (sehr dezent). */
.gg-footer__pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.015;
	background-image:
		repeating-linear-gradient(
			135deg,
			var(--gg-white) 0,
			var(--gg-white) 2px,
			transparent 2px,
			transparent 10px
		),
		repeating-linear-gradient(
			45deg,
			var(--gg-white) 0,
			var(--gg-white) 2px,
			transparent 2px,
			transparent 10px
		);
}

.gg-footer__inner {
	position: relative;
	z-index: var(--z-base);
}

/* ════════════════════════════════════════════════════════════
 * 2. BRAND-CLOSER — Reviews-Pill direkt über großem Slogan-Logo
 *
 * Sitzt zwischen Info-Trio und Trust-Strip — das Logo ist der visuelle
 * Anker, die Reviews-Pill genau darüber wie im ursprünglichen Brief gefordert.
 * ════════════════════════════════════════════════════════════ */

.gg-footer__brand-closer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	padding-block: var(--space-12);
	text-align: center;
}

/* Logo-Container — strikte aspect-ratio croppt die transparenten oberen+unteren
 * Bereiche des quadratischen 1500×1500 Slogan-Assets visuell weg. */
.gg-footer__logo {
	display: block;
	width: 100%;
	max-width: clamp(280px, 34vw, 460px);
	aspect-ratio: 4 / 1;
	margin: 0 auto;
	color: var(--gg-white);
	text-decoration: none;
}

/* Falls doch ein Custom-Logo rendert: dessen <a class="custom-logo-link"> auf
 * block + 100% strecken, damit das innere <img> die Box füllt. */
.gg-footer__logo .custom-logo-link {
	display: block;
	width: 100%;
	height: 100%;
}

.gg-footer__logo img,
.gg-footer__logo .custom-logo,
.gg-footer__logo .gg-brand-logo {
	display: block;
	width: 100%;
	height: 100%;
	/* cover skaliert das Bild auf volle Box-Breite und beschneidet überstehende
	 * Höhe — bei einem quadratischen Asset wird so nur die mittlere Höhen-Zone
	 * sichtbar, in der das Wordmark+Claim sitzt. */
	object-fit: cover;
	object-position: center center;
}

/* Reviews-Pill — Box-Card im premium-3D-Look, zentriert direkt unter Logo. */
.gg-footer__reviews {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-top-color: rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-pill, 999px);
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.04) 0%,
			rgba(255, 255, 255, 0) 60%
		),
		linear-gradient(
			160deg,
			#1f1f22 0%,
			#141417 60%,
			#0e0e10 100%
		);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 -1px 0 rgba(0, 0, 0, 0.5) inset,
		0 10px 22px -8px rgba(0, 0, 0, 0.65),
		0 3px 8px -3px rgba(0, 0, 0, 0.5);
	color: var(--color-text-on-dark);
	text-decoration: none;
	transition:
		transform var(--dur-base) var(--ease-emphasis),
		border-color var(--dur-base) var(--ease-emphasis),
		box-shadow var(--dur-base) var(--ease-emphasis);
	will-change: transform;
}

.gg-footer__reviews-mark {
	display: inline-flex;
	flex-shrink: 0;
}

.gg-footer__reviews-mark svg {
	width: 22px;
	height: 22px;
	display: block;
}

.gg-footer__reviews-body {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}

.gg-footer__reviews-stars {
	color: var(--gg-gold);
	font-size: var(--fs-sm);
	letter-spacing: 0.15em;
	line-height: 1;
	white-space: nowrap;
}

.gg-footer__reviews-meta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted-on-dark);
	white-space: nowrap;
}

.gg-footer__reviews-rating {
	font-weight: var(--fw-bold);
	color: var(--gg-white);
}

.gg-footer__reviews-sep {
	color: var(--color-text-muted-on-dark);
}

.gg-footer__reviews:hover,
.gg-footer__reviews:focus-visible {
	transform: var(--hover-lift-card);
	border-color: var(--hover-border-card-dark);
	border-top-color: var(--hover-border-card-dark-top);
	box-shadow: var(--hover-shadow-card-dark);
	text-decoration: none;
}

/* Mobile: Reviews-Pill darf in 2 Zeilen umbrechen, falls Viewport sehr eng. */
@media (max-width: 380px) {
	.gg-footer__reviews-body {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-1);
	}
}

/* ════════════════════════════════════════════════════════════
 * 1. INFO-QUARTETT — Adresse | Direktkontakt | Werkstatt-Menü
 *    (Öffnungszeiten als eigener Full-Width-Strip darunter)
 *
 * Direktkontakt-Spalte ist absichtlich breiter (1.4fr), damit die große
 * Telefonnummer atmen kann. Sie ist der primäre Konversions-Anker im Footer.
 * ════════════════════════════════════════════════════════════ */

.gg-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	padding-bottom: var(--space-8);
}

/* Tablet: Adresse | Direktkontakt teilen sich Zeile 1, die Sitemap laeuft als
 * volle Breite darunter. Vorher spannte Direktkontakt ueber beide Spalten —
 * dadurch standen Adresse, Kontakt und Menue faktisch alle in der linken
 * Haelfte untereinander und die rechte Haelfte blieb leer. */
@media (min-width: 640px) {
	.gg-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8) var(--space-10);
	}

	.gg-footer__col--menu {
		grid-column: 1 / -1;
	}
}


/* Desktop: 3 Spalten — Direktkontakt bleibt breit genug für die Telefon-Pill,
 * die Werkstatt-Sitemap bekommt aber den größten Track: ihre Labels sind
 * nowrap (geerbt von .gg-nav__link) und brauchen zwei volle Textbreiten,
 * sonst schneidet die zweite Sitemap-Spalte rechts an. */
@media (min-width: 1024px) {
	.gg-footer__grid {
		grid-template-columns: 1fr 1.2fr 1.3fr;
		gap: var(--space-10);
		align-items: start;
	}

	.gg-footer__col--menu {
		grid-column: auto;
	}
}

.gg-footer__col {
	min-width: 0;
}

/* ── Spalten-Headings ──────────────────────────────────────── */

.gg-footer__heading {
	position: relative;
	font-family: var(--font-headline);
	font-size: var(--fs-base);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-text-muted-on-dark);
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-3);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.gg-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--gg-red) 0%,
		var(--gg-red-bright) 100%
	);
	box-shadow: 0 0 10px rgba(200, 16, 46, 0.55);
	border-radius: 1px;
}

.gg-footer__heading--center {
	text-align: center;
}

.gg-footer__heading--center::after {
	left: 50%;
	transform: translateX(-50%);
}

/* ── Adresse — groß lesbar, mit „Route planen"-Inline-Link ── */

.gg-footer__address {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	font-style: normal;
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	color: var(--gg-white);
	margin: 0 0 var(--space-4);
}

/* Footer-CTA — nutzt die globale .btn-Chevron-Komponente. Kein eigener Button-Style,
 * nur ein Margin-Hook, falls wir den Abstand zur Adresse separat regeln wollen. */
.gg-footer__cta {
	margin-top: var(--space-1);
}

/* Adresse + CTA — genau zwei Zustaende, je an einen Layout-Modus gekoppelt,
 * damit sich das Verhalten beim Aufziehen des Fensters nicht mehrfach dreht:
 *
 *   einspaltiger Footer (< 640px):  CTA RECHTS NEBEN der Adresse
 *   mehrspaltiger Footer (>= 640):  CTA darunter, linksbuendig (Ursprungs-Look)
 *
 * In den mehrspaltigen Modi ist die Spalte je nach Track nur 280–400px breit —
 * dort passt das Paar nicht nebeneinander, und ein „passt mal, passt mal
 * nicht"-Verhalten waere genau der Zickzack, den wir vermeiden wollen. */
@media (max-width: 639px) {
	.gg-footer__col--address {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		align-content: flex-start;
		column-gap: var(--space-3);
		row-gap: var(--space-4);
	}

	.gg-footer__col--address .gg-footer__heading {
		flex: 1 0 100%;
		margin-bottom: 0;
	}

	/* Kein Grow: sonst frisst die Adresse den freien Platz und der Button klebt
	 * am Text statt an der Spaltenkante. Kein Shrink: sonst bricht lieber die
	 * Adresse um, als dass der Button ausweicht. */
	.gg-footer__col--address .gg-footer__address {
		flex: 0 0 auto;
		max-width: 100%;
		margin-bottom: 0;
	}

	/* margin-left: auto haelt den Button auch dann rechts, wenn er auf sehr
	 * schmalen Screens doch in die zweite Zeile rutscht. */
	.gg-footer__col--address .gg-footer__cta {
		flex: 0 0 auto;
		margin-top: 0;
		margin-left: auto;
	}
}

/* Kleine Phones (360/375px): Adresse plus CTA in Standardbreite brauchen
 * ~346px, die Spalte hat dort nur 328–343px. Der Button wird deshalb etwas
 * kompakter — die Adresse bleibt bewusst in fs-lg, sie ist die Kerninfo.
 * Damit haelt das Paar bis ~330px eine Zeile, darunter greift der
 * margin-left:auto-Fallback. */
@media (max-width: 400px) {
	.gg-footer__col--address .gg-footer__cta {
		font-size: var(--fs-xs);
		padding-inline: var(--space-3);
	}
}

/* ── Direktkontakt — DIE prominenten Touchpoints ──────────── */

.gg-footer__col--reach {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.gg-footer__phone {
	align-self: flex-start;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.gg-footer__phone {
		align-self: stretch;
	}
}

.gg-footer__email {
	display: inline-block;
	width: max-content;
	max-width: 100%;
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	color: var(--color-text-on-dark);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-standard);
	overflow-wrap: anywhere;
}

.gg-footer__email:hover,
.gg-footer__email:focus-visible {
	color: var(--gg-white);
}

/* ── Werkstatt-Menü — 2-Spalten-Sitemap ────────────────────── */

/* auto-fit statt `columns: 2`: die Links erben white-space: nowrap, ein zu
 * schmaler Track schneidet lange Labels („Liebhaberservice") deshalb rechts ab
 * statt umzubrechen. Das minmax-Minimum deckt das längste Label ab — reicht die
 * Spaltenbreite nicht für zwei Tracks, klappt die Sitemap auf eine Spalte. */
.gg-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--space-2) var(--space-6);
	align-content: start;
}

/* 640–1023px laeuft die Sitemap ueber die volle Breite (siehe Grid-Block oben).
 * Dort auf genau 2 Tracks festnageln, damit die Link-Spalten unter Adresse und
 * Direktkontakt einrasten — sonst springt auto-fit auf drei bis vier schmale
 * Tracks. Muss NACH der Basisregel stehen, sonst gewinnt auto-fit. */
@media (min-width: 640px) and (max-width: 1023px) {
	.gg-footer__menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gg-footer__menu li {
	min-width: 0;
}

/* Das horizontale .gg-nav__link-Padding wird im Footer zurückgenommen: es
 * kostet Trackbreite und würde die Sitemap gegen das Spalten-Heading
 * einrücken. Die rote Chevron-Blade steht über ihr eigenes ::before-Offset
 * ohnehin links und rechts über den Text hinaus. */
.gg-footer__menu a {
	display: inline-block;
	max-width: 100%;
	padding-block: var(--space-1);
	padding-inline: 0;
	color: var(--color-text-on-dark);
	text-decoration: none;
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	transition: color var(--dur-fast) var(--ease-standard);
}

/* Footer-Menü-Links erben über den nav.php-Filter die .gg-nav__link-Klasse
 * inkl. der roten ::before-Chevron-Blade, die auf :hover (und permanent
 * auf der aktiven Seite) hinter dem Text einrastet. Der Hover-Text MUSS
 * deshalb auf Weiß gehen — sonst rot-auf-rot, Text verschwindet auf der
 * Klinge. Gleiches Verhalten wie .gg-nav__link:hover im Header. */
.gg-footer__menu a:hover,
.gg-footer__menu a:focus-visible {
	color: var(--gg-white);
}

/* ════════════════════════════════════════════════════════════
 * 1b. STATUS + WOCHEN-STRIP
 *
 * Oben: Live-Öffnungs-Indikator (wie Topbar, nur größer) — 14px Dot,
 *       fs-lg→fs-xl Text, mit Halo, pulsiert sanft wenn offen.
 * Unten: Voller 7-Tage-Strip — slim, flach, Hairlines statt Boxen,
 *        heutiger Tag mit roter Top-Marke gehighlighted.
 * ════════════════════════════════════════════════════════════ */

.gg-footer__status-strip {
	margin-top: var(--space-4);
	padding-block: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	text-align: center;
}

.gg-footer__status {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-headline);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--gg-white);
	line-height: 1.2;
}

/* ── 7-Tage-Strip — slim, flach, sitzt unter dem Status ──── */

.gg-footer__hours {
	margin: var(--space-5) 0 0;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0;
}

/* Der volle 7-Tage-Strip braucht ~665px reine Inhaltsbreite (Uhrzeit ist
 * nowrap, ~95px pro Zelle). Erst ab ~720px Viewport ist die da — darunter
 * bleibt es beim Umbruch-Raster, sonst schiebt der Strip die Seite auf. */
@media (max-width: 719px) {
	.gg-footer__hours {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: var(--space-2);
	}
}

/* Unter 480px sprengten vier Tracks den Viewport: die Uhrzeit ist nowrap und
 * baut ~95px breit, vier Zellen brauchten also ~380px — auf einem 375er
 * Screen lief der Strip damit rechts aus dem Bild (horizontaler Overflow der
 * ganzen Seite). Drei Tracks passen bis 320px runter. */
@media (max-width: 479px) {
	.gg-footer__hours {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gg-footer__hours-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-1) var(--space-2);
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.gg-footer__hours-cell:first-child {
	border-left: none;
}

@media (max-width: 719px) {
	.gg-footer__hours-cell:nth-child(4n+1) {
		border-left: none;
	}
}

/* Trennlinien folgen dem 3er-Raster: Zelle 4 bekommt ihre Linie zurueck,
 * dafuer starten 4, 7 ... ohne. */
@media (max-width: 479px) {
	.gg-footer__hours-cell:nth-child(4n+1):not(:first-child) {
		border-left: 1px solid rgba(255, 255, 255, 0.06);
	}

	.gg-footer__hours-cell:nth-child(3n+1) {
		border-left: none;
	}
}

/* Today-Marker — schmale rote Linie oben, „Sie sind hier"-Indikator. */
.gg-footer__hours-cell--today::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--gg-red) 0%,
		var(--gg-red-bright) 100%
	);
	box-shadow: 0 0 10px rgba(200, 16, 46, 0.55);
	border-radius: 1px;
}

.gg-footer__hours-day {
	font-family: var(--font-headline);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-text-muted-on-dark);
	line-height: 1;
}

.gg-footer__hours-cell--today .gg-footer__hours-day {
	color: var(--gg-white);
}

.gg-footer__hours-cell--closed .gg-footer__hours-day {
	color: var(--color-text-muted-on-dark);
	opacity: 0.7;
}

.gg-footer__hours-time {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--color-text-on-dark);
	line-height: 1.3;
	white-space: nowrap;
}

.gg-footer__hours-cell--today .gg-footer__hours-time {
	color: var(--gg-white);
}

.gg-footer__hours-cell--closed .gg-footer__hours-time {
	color: var(--color-text-muted-on-dark);
	font-style: italic;
}

.gg-footer__status-dot {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: var(--radius-pill);
	flex-shrink: 0;
	position: relative;
}

.gg-footer__status-dot--open {
	background-color: var(--color-status-open);
	box-shadow:
		0 0 0 5px var(--color-status-open-glow),
		0 0 18px 2px var(--color-status-open-glow);
	animation: gg-footer-status-pulse 2.4s ease-in-out infinite;
}

.gg-footer__status-dot--closed {
	background-color: var(--color-status-closed);
	box-shadow: 0 0 0 4px rgba(138, 138, 138, 0.18);
}

@keyframes gg-footer-status-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-footer__status-dot--open {
		animation: none;
	}
}

/* ════════════════════════════════════════════════════════════
 * NEWS-PILL — kompakte Inline-Pill in der Bottom-Bar
 *
 * Sitzt zwischen Copyright (links) und Legal-Menü (rechts).
 * Einzeilig: Label · Titel · Datum · Pfeil. Titel kürzt mit Ellipsis.
 * ════════════════════════════════════════════════════════════ */

.gg-footer__news-card {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	max-width: 100%;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.025);
	color: var(--color-text-on-dark);
	text-decoration: none;
	font-size: var(--fs-xs);
	line-height: 1;
	transition:
		border-color var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard);
}

.gg-footer__news-card:hover,
.gg-footer__news-card:focus-visible {
	border-color: var(--hover-border-card-dark);
	background: rgba(255, 255, 255, 0.05);
}

.gg-footer__news-card-label {
	flex-shrink: 0;
	font-family: var(--font-headline);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--gg-red-bright);
	line-height: 1;
}

.gg-footer__news-card-title {
	min-width: 0;
	max-width: 28ch;
	font-family: var(--font-headline);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--gg-white);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gg-footer__news-card-date {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-muted-on-dark);
	line-height: 1;
}

.gg-footer__news-card-arrow {
	flex-shrink: 0;
	font-size: var(--fs-base);
	color: var(--color-text-muted-on-dark);
	transition:
		transform var(--dur-fast) var(--ease-standard),
		color var(--dur-fast) var(--ease-standard);
}

.gg-footer__news-card:hover .gg-footer__news-card-arrow,
.gg-footer__news-card:focus-visible .gg-footer__news-card-arrow {
	transform: var(--hover-nudge-arrow);
	color: var(--gg-white);
}

/* ════════════════════════════════════════════════════════════
 * 3. TRUST-STRIP — Castrol-Badge + Socials, zentriert
 * ════════════════════════════════════════════════════════════ */

.gg-footer__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-6) var(--space-8);
	padding-block: var(--space-10);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gg-footer__badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	background-color: var(--gg-white);
	opacity: 0.92;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 -1px 0 rgba(0, 0, 0, 0.15) inset,
		0 8px 18px -6px rgba(0, 0, 0, 0.6),
		0 3px 6px -2px rgba(0, 0, 0, 0.45);
	transition:
		opacity var(--dur-base) var(--ease-emphasis),
		transform var(--dur-base) var(--ease-emphasis),
		box-shadow var(--dur-base) var(--ease-emphasis);
	will-change: transform;
}

.gg-footer__badge:hover {
	opacity: 1;
	transform: var(--hover-lift-btn);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 1) inset,
		0 -1px 0 rgba(0, 0, 0, 0.18) inset,
		0 14px 26px -8px rgba(0, 0, 0, 0.7),
		0 5px 10px -3px rgba(0, 0, 0, 0.5);
}

.gg-footer__badge-img {
	display: block;
	width: clamp(108px, 11vw, 140px);
	height: auto;
}

/* Socials — gleiches Lockup wie in der Topbar (Inline-SVGs, gleiche Tonalität). */
.gg-footer__socials {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gg-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--gg-white);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition:
		color var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard),
		transform var(--dur-fast) var(--ease-standard);
}

.gg-footer__social-icon {
	display: block;
	width: 20px;
	height: 20px;
	color: currentColor;
}

.gg-footer__social:hover,
.gg-footer__social:focus-visible {
	color: var(--color-accent);
	background-color: rgba(255, 255, 255, 0.06);
	transform: var(--hover-lift-btn);
}

/* ════════════════════════════════════════════════════════════
 * 4. BOTTOM-BAR — Copyright + Legal
 * ════════════════════════════════════════════════════════════ */

.gg-footer__bottom {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding-top: var(--space-8);
	margin-top: 0;
}

.gg-footer__bottom::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.08) 20%,
		rgba(200, 16, 46, 0.55) 50%,
		rgba(255, 255, 255, 0.08) 80%,
		transparent 100%
	);
	box-shadow: 0 0 16px rgba(200, 16, 46, 0.3);
}

@media (min-width: 768px) {
	.gg-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.gg-footer__copyright {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-muted-on-dark);
	letter-spacing: var(--ls-wide);
}

.gg-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	font-size: var(--fs-xs);
}

.gg-footer__legal li {
	position: relative;
}

.gg-footer__legal li + li::before {
	content: "·";
	position: absolute;
	left: calc(var(--space-5) * -0.5);
	transform: translateX(-50%);
	color: var(--color-text-muted-on-dark);
}

.gg-footer__legal a {
	color: var(--color-text-muted-on-dark);
	text-decoration: none;
	letter-spacing: var(--ls-wide);
	transition: color var(--dur-fast) var(--ease-standard);
}

.gg-footer__legal a:hover,
.gg-footer__legal a:focus-visible {
	color: var(--gg-white);
}

/* ════════════════════════════════════════════════════════════
 * Reduced Motion
 * ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.gg-footer__reviews,
	.gg-footer__reviews:hover,
	.gg-footer__reviews:focus-visible,
	.gg-footer__badge,
	.gg-footer__badge:hover,
	.gg-footer__social,
	.gg-footer__social:hover {
		transform: none;
		transition: none;
	}
}