/* ==========================================================
   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 Zahlungsarten-
   Banner darunter (Auftrag "Zahlungsarten-Banner im Footer
   einbauen"). "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;
	}
}

/* Auftrag §5: ca. 24-32px Abstand zu den letzten Links darüber. */
#footer .fs24-footer-payment-banner {
	grid-column: 1 / -1;
	margin-top: 28px;
}

/* Auftrag §4: Desktop ca. 360-480px, height:auto, object-fit:contain,
   keine Verzerrung, kein zusätzlicher Rahmen/Schatten/weißer Kasten –
   das Bild selbst (ggf. mit eigenem weißen Hintergrund) läuft direkt
   auf dem dunklen Footer. "width:100%" mit "max-width" statt fester
   Breite, damit es bei knapperem Wrapper (siehe ≤1220px-Zwischenstufe)
   proportional mitschrumpft statt zu überlaufen. */
#footer .fs24-footer-payment-banner img {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	object-fit: contain;
}

/* Auftrag §6: Mobile mittig, volle verfügbare Breite (der Wrapper
   nimmt hier ohnehin die komplette Grid-Breite ein, siehe
   "grid-column:span 2" oben + äußeres 2-Spalten-Grid ≤900px), mit
   moderater Obergrenze, damit es auf breiteren Tablet-Zwischenbreiten
   (z. B. 768px) nicht unproportional groß wird. */
@media (max-width: 900px) {
	#footer .fs24-footer-payment-banner img {
		max-width: 360px;
		margin: 0 auto;
	}
}

/* ==========================================================
   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;
	}
}