/* ==========================================================
   Fahrradshop24 – globaler Newsletter-Prefooter.
   Sitzt strukturell zwischen Seiteninhalt und dem bestehenden
   schwarzen Footer (siehe inc/newsletter-prefooter.php – Hook
   "blocksy:footer:before", direkt vor Blocksys eigenem "#footer").
   Eigener, bewusst gegenüber dem Footer (#080a0b) abgesetzter
   dunkler Grafitton, kein Schwarz, keine Kartenoptik – die gesamte
   Zeile selbst ist die Fläche.
   ========================================================== */

.fs24-newsletter {
	background: #2d3133;
}

/* Identische Container-Breitenformel wie Header/Footer (siehe
   assets/css/blocksy-header-preview.css Abschnitt 0 und
   assets/css/blocksy-footer-preview.css) – gleiche Außenkanten. */
.fs24-newsletter-container {
	width: min(calc(100% - 52px), 1540px);
	max-width: min(calc(100% - 52px), 1540px);
	margin-left: auto;
	margin-right: auto;
	padding: 32px 0;
	box-sizing: border-box;
	min-height: 196px;
	display: flex;
	align-items: center;
	gap: 40px;
}

@media (max-width: 1220px) {
	.fs24-newsletter-container {
		width: min(calc(100% - 36px), 1540px);
		max-width: min(calc(100% - 36px), 1540px);
	}
}

.fs24-newsletter-text {
	flex: 0 0 45%;
	max-width: 45%;
	min-width: 0;
}

.fs24-newsletter-text h2 {
	margin: 0 0 10px;
	font-size: 1.375rem;
	line-height: 1.25;
	font-weight: 700;
	color: #fff;
}

.fs24-newsletter-text p {
	margin: 0;
	font-size: 0.975rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
}

.fs24-newsletter-form {
	flex: 1 1 55%;
	max-width: 55%;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Ancestor-Klasse mit im Selektor (statt nur ".fs24-newsletter-input"):
   Blocksys eigener Basis-Reset (main.min.css) setzt Formularfeldern
   per "input:is([type=email], ...)" bereits eine Höhe
   ("var(--theme-form-field-height, 40px)") mit Spezifität
   (0,1,1) – eine reine Klasse (0,1,0) verliert dagegen, wodurch das
   Feld zuvor auf 40px sprang, während der Button (kein Treffer in
   Blocksys Selektorliste) bei 52px blieb und beide dadurch nicht
   auf gemeinsamer Achse lagen. Mit Ancestor-Klasse (0,2,0) schlägt
   die eigene Regel Blocksys Reset zuverlässig, ohne "!important". */
.fs24-newsletter-form .fs24-newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 10px;
	background: #3a3f42;
	color: #fff;
	font-size: 0.975rem;
	font-family: inherit;
}

.fs24-newsletter-form .fs24-newsletter-input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.fs24-newsletter-form .fs24-newsletter-input:focus-visible {
	outline: 2px solid #ff8143;
	outline-offset: 2px;
	border-color: #ff8143;
}

.fs24-newsletter-submit {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 26px;
	border: none;
	border-radius: 10px;
	background: #1c1f21;
	color: #fff;
	font-size: 0.975rem;
	font-weight: 600;
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.fs24-newsletter-submit:hover {
	background: #101213;
}

.fs24-newsletter-submit:focus-visible {
	outline: 2px solid #ff8143;
	outline-offset: 2px;
}

/* ==========================================================
   Unterhalb von 900px (gleicher Umbruchpunkt wie der Footer-
   Grid-Umbau, siehe blocksy-footer-preview.css): Text und
   Formular untereinander statt nebeneinander.
   ========================================================== */
@media (max-width: 900px) {
	.fs24-newsletter-container {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 32px 0;
	}

	.fs24-newsletter-text,
	.fs24-newsletter-form {
		flex: 1 1 auto;
		max-width: 100%;
	}

	.fs24-newsletter-form {
		flex-direction: column;
	}

	.fs24-newsletter-submit {
		width: 100%;
	}
}

@media (max-width: 430px) {
	.fs24-newsletter-text h2 {
		font-size: 1.25rem;
	}
}