/* ==========================================================
   Fahrradshop24 – neuer Footer, AUSSCHLIESSLICH auf der isolierten
   Blocksy-Header-/Footer-Vorschauseite geladen (siehe
   inc/footer-preview.php, is_page_template()-Check beim Enqueue).
   Alle Selektoren zusätzlich unter "#footer" (Blocksys eigener
   Wrapper um unseren Filter-Rückgabewert, siehe blocksy_html_tag()
   in wp-content/themes/blocksy/inc/integrations/theme-builders.php)
   – betrifft dadurch nie den bestehenden Ridez-Footer (der nutzt
   dieses Markup/diese Klassen nie) und nie den Header (komplett
   andere ID/Klassen).

   Design nach design-reference/index-mockup.html, finaler
   ".site-footer"-Block (Zeile ~2358-2397, überschreibt den früheren
   Entwurf ab Zeile ~809 – geprüft, der spätere Block gewinnt in der
   Kaskade). Gleicher dunkler Ton "#080a0b" wie die neue Mobile-
   Topbar (siehe blocksy-header-preview.css) – Header und Footer
   sollen wie derselbe Seitenrahmen wirken.
   ========================================================== */

#footer .fs24-footer {
	background: #080a0b;
	color: rgba(255, 255, 255, 0.6);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ==========================================================
   Container: identische Breiten-Formel wie der neue Header
   (siehe blocksy-header-preview.css, Abschnitt 0) und
   design-reference/index-mockup.html (".container") – dieselben
   Außenkanten wie Header und Homepage-Bild-/Content-Raster, keine
   feste Margin.
   ========================================================== */
#footer .fs24-footer-container {
	width: min(calc(100% - 52px), 1540px);
	max-width: min(calc(100% - 52px), 1540px);
	margin-left: auto;
	margin-right: auto;
	padding: 78px 0 34px;
}

@media (max-width: 1220px) {
	#footer .fs24-footer-container {
		width: min(calc(100% - 36px), 1540px);
		max-width: min(calc(100% - 36px), 1540px);
		padding-top: 62px;
	}
}

#footer .fs24-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 42px;
}

@media (max-width: 1220px) {
	#footer .fs24-footer-grid {
		grid-template-columns: 1.4fr repeat(2, 1fr);
		row-gap: 36px;
	}
}

/* Bewusste Abweichung vom Mockup-Wert "max-width:680px" für diesen
   Umbruch: die Aufgabe verlangt ausdrücklich einen sauberen,
   bewusst gestalteten 768px-Zustand statt zusammengequetschter
   Desktop-Spalten (siehe Auftrag §12) – bei 768px läge man mit dem
   Mockup-Originalwert noch in der 3-Spalten-Zwischenstufe oben, was
   dort spürbar eng wird. Ab hier bewusst derselbe 2-Spalten-Aufbau
   wie im Mockup für </680px, nur bei größerer Breite ausgelöst.

   Die vier Link-Spalten (.fs24-footer-col) bilden hier bewusst ein
   2×2-Raster: 2 Spalten × die 4 Spalten-Divs fallen automatisch in
   2 Zeilen (Shop/Service in Zeile 1, Hilfe/Rechtliches in Zeile 2),
   die Marke/Kontakt-Spalte bekommt die volle Breite darüber. Dieses
   2×2-Raster bleibt bis zur kleinsten unterstützten Breite (360px)
   bestehen (siehe Verfeinerung unten) statt auf eine 1-Spalten-Liste
   umzuschalten – gezielte Vorgabe, um den Footer auf Mobile deutlich
   zu verkürzen (siehe Auftrag §8/§9). */
@media (max-width: 900px) {
	#footer .fs24-footer-container {
		padding-top: 48px;
	}

	#footer .fs24-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px 20px;
	}

	#footer .fs24-footer-brand {
		grid-column: 1 / -1;
	}
}

/* Verfeinerung statt Spalten-Umschaltung für sehr schmale Breiten
   (360-430px, siehe Auftrag §9): zuerst Gap und Spaltenbreite
   optimiert, Schrift nur moderat reduziert – das 2×2-Raster bleibt
   dadurch bis 360px lesbar erhalten, ohne in eine 1-Spalten-Liste
   zurückzufallen. Lange Einträge (z. B. "Bestellung verfolgen",
   "Barrierefreiheit", die Überschrift "Service & Leasing") brechen
   dabei bewusst sauber auf zwei Zeilen um. */
@media (max-width: 430px) {
	#footer .fs24-footer-grid {
		gap: 26px 14px;
	}

	#footer .fs24-footer-col h4 {
		font-size: 0.72rem;
		letter-spacing: 0.09em;
		margin-bottom: 12px;
	}

	#footer .fs24-footer-col a {
		font-size: 0.82rem;
		padding: 4px 0;
	}
}

/* ==========================================================
   Marke/Logo-Spalte
   ========================================================== */
#footer .fs24-footer-brand {
	min-width: 0;
}

/* Kein weißes Logo-Panel mehr (Korrektur nach erster Fassung): Logo
   liegt jetzt direkt auf dem dunklen Footer-Hintergrund auf, exakt
   wie im Header (#header .site-logo-container, siehe
   blocksy-header-preview.css Abschnitt 3 – dort ebenfalls kein
   weißer Rahmen). Padding/Breite bleiben unverändert, damit sich
   die gerenderte Logo-Größe durch diese Korrektur nicht ändert. */
#footer .fs24-footer-logo-panel {
	display: inline-flex;
	width: min(100%, 220px);
	padding: 10px 14px;
}

#footer .fs24-footer-logo-panel img {
	display: block;
	width: 100%;
	height: auto;
}

#footer .fs24-footer-brand p {
	max-width: 370px;
	margin: 20px 0 16px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
}

#footer .fs24-footer-contact {
	display: grid;
	gap: 7px;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================
   Link-Spalten
   ========================================================== */
#footer .fs24-footer-col {
	min-width: 0;
}

#footer .fs24-footer-col h4 {
	margin: 0 0 16px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

#footer .fs24-footer-col a {
	display: block;
	padding: 5px 0;
	font-size: 0.87rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.58);
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

#footer .fs24-footer-col a:hover,
#footer .fs24-footer-col a:focus-visible {
	color: #ff8143;
	transform: translateX(3px);
}

#footer .fs24-footer-col a:focus-visible {
	outline: 2px solid #ff8143;
	outline-offset: 2px;
	border-radius: 3px;
}

/* ==========================================================
   Hilfe + Rechtliches, gemeinsamer Wrapper mit den Zahlungs-
   methoden-Kacheln darunter. "grid-column:span 2" belegt im
   äußeren ".fs24-footer-grid" bei jeder der drei oben definierten
   Breiten (Desktop 5-Spalten, ≤1220px 3-Spalten, ≤900px
   2-Spalten) exakt dieselben zwei Spuren, die Hilfe/Rechtliches
   vorher einzeln belegt haben – Brand-/Shop-/Service-Spalten
   bleiben davon unberührt. Der eigene 2-spaltige Sub-Grid für
   Hilfe/Rechtliches übernimmt den "column-gap" des äußeren
   Grids 1:1 (42px Desktop/≤1220px, 20px ≤900px – siehe dortige
   "gap"-Werte oben), damit der optische Abstand zwischen beiden
   Spalten identisch zu vorher bleibt.
   ========================================================== */
#footer .fs24-footer-help-legal {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 42px;
}

@media (max-width: 900px) {
	#footer .fs24-footer-help-legal {
		column-gap: 20px;
	}
}

/* ==========================================================
   Zahlungsmethoden-Kacheln (Auftrag "Zahlungsmethoden-Banner
   ersetzen") – lösen das frühere, als zu plakativ empfundene
   große Banner-Bild ab (siehe git-Historie: ".fs24-footer-
   payment-banner"/"fs24_footer_payment_banner()", vollständig
   entfernt). Ruhige, einzeln klickbare Kacheln statt einer
   Grafik; Struktur bewusst als lose "flex-wrap"-Reihe (statt
   fester Spaltenzahl), damit spätere weitere Zahlungsmethoden
   (siehe fs24_payment_methods() in inc/payment-info.php) sich
   einfach einreihen, ohne das Grid anzupassen. Gleicher Abstand
   zu den Links darüber wie zuvor das Banner (~28px).
   ========================================================== */
#footer .fs24-footer-payment-methods {
	grid-column: 1 / -1;
	margin-top: 28px;
}

#footer .fs24-footer-payment-methods h4 {
	margin: 0 0 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

#footer .fs24-payment-tile-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Einzelne Kachel: dezent, einfarbig, passend zum übrigen dunklen
   Footer-Ton – bewusst kein Weiß/Marken-Blau/-Pink (Auftrag
   §Gestaltung "nicht bunt oder poppig"). Hover-Verhalten entlehnt
   1:1 vom bestehenden "#footer .fs24-footer-col a:hover" (gleiche
   Akzentfarbe #ff8143), damit sich die Kacheln wie die übrigen
   klickbaren Footer-Elemente anfühlen. */
#footer .fs24-payment-tile {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px 11px 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.82);
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

#footer .fs24-payment-tile:hover,
#footer .fs24-payment-tile:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 129, 67, 0.45);
	color: #fff;
	transform: translateY(-2px);
}

#footer .fs24-payment-tile:focus-visible {
	outline: 2px solid #ff8143;
	outline-offset: 2px;
}

#footer .fs24-payment-tile-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.6);
	transition: background 0.2s ease, color 0.2s ease;
}

#footer .fs24-payment-tile-icon svg {
	width: 15px;
	height: 15px;
}

#footer .fs24-payment-tile:hover .fs24-payment-tile-icon {
	background: rgba(255, 129, 67, 0.16);
	color: #ff8143;
}

/* ".fs24-payment-mark" ist bewusst dieselbe Wortzeichen-Lösung wie
   für die Marken-Kacheln auf der Startseite (siehe frontend.css,
   ".logo-cube" etc.) – hier bewusst reduziert/einfarbig statt bunt
   (kein Marken-Blau/-Pink), siehe Dateikopf-Kommentar in
   inc/payment-info.php. Eine gemeinsame Basis-Regel reicht, da sich
   PayPal/Klarna nur im Namen, nicht in der Typografie unterscheiden
   sollen – zukünftige Methoden erben automatisch denselben Stil. */
#footer .fs24-payment-mark {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

@media (max-width: 430px) {
	#footer .fs24-payment-tile {
		padding: 9px 15px 9px 10px;
	}

	#footer .fs24-payment-mark {
		font-size: 0.82rem;
	}
}

/* ==========================================================
   Unterste Abschlusszeile
   ========================================================== */
#footer .fs24-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 20px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 0.8rem;
}

@media (max-width: 900px) {
	#footer .fs24-footer-bottom {
		margin-top: 36px;
		flex-direction: column;
		align-items: flex-start;
	}
}