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

/* Das Formular ist seit der Brevo-Anbindung (2026-09-06) nicht mehr
   selbst die Eingabezeile: Es trägt jetzt zusätzlich Statusbereich und
   Datenschutzhinweis. Die frühere Zeilen-Anordnung (Feld neben Knopf)
   ist deshalb eine Ebene tiefer in ".fs24-newsletter-row" gewandert –
   Breitenverhältnis, Höhe und Abstand der Zeile selbst bleiben
   unverändert. */
.fs24-newsletter-form {
	flex: 1 1 55%;
	max-width: 55%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fs24-newsletter-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

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

/* Seit 2026-09-04 ein Primärbutton im Markenorange statt der
   nahezu schwarzen Fläche: dieselben Token --accent/--accent-dark und
   dieselbe Schriftgröße/-stärke wie ".btn-primary" auf der Startseite.

   Die Höhe bleibt bewusst bei 52px und wird NICHT auf die 46px der
   ".btn"-Basis gezogen: Der Knopf steht neben dem Eingabefeld, das
   ebenfalls 52px hoch ist (siehe die Regel oben samt Erklärung zu
   Blocksys Formularfeld-Reset). Eine gemeinsame Achse mit dem Feld
   wiegt hier schwerer als eine gemeinsame Höhe mit Buttons auf
   anderen Seiten. */
.fs24-newsletter-submit {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 26px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--fs24-btn-radius, 10px);
	background: var(--accent, #d24614);
	color: #fff;
	font-size: 0.96rem;
	font-weight: 720;
	font-family: inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.fs24-newsletter-submit:hover {
	background: var(--accent-dark, #b93800);
}

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

/* ==========================================================
   Statusbereich und Datenschutzhinweis (seit der Brevo-Anbindung).
   Beides gehört zum ruhigen Teil des Blocks: kleiner als die
   Eingabezeile, geringerer Kontrast, keine Kästen, keine Farbflächen.
   ========================================================== */

/* Der Statusbereich steht wegen "aria-live" immer im Markup, auch
   ohne Inhalt. Solange er leer ist, darf er keine Höhe und keinen
   Abstand erzeugen – sonst rutschte der Datenschutzhinweis von
   Anfang an nach unten. */
.fs24-newsletter-status:empty {
	display: none;
}

.fs24-newsletter-status {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

/* Zustände werden NICHT allein über die Farbe unterschieden: Jede
   Meldung trägt zusätzlich ein eigenes Zeichen. Das Zeichen ist per
   aria-hidden von Screenreadern ausgenommen (der Text selbst sagt
   bereits, worum es geht) und hilft bei Farbfehlsichtigkeit sowie in
   Schwarzweiß-Darstellung. */
.fs24-newsletter-status-mark {
	flex: 0 0 auto;
	font-weight: 700;
	line-height: 1.5;
}

.fs24-newsletter-status.is-success {
	color: #7ddca0;
}

.fs24-newsletter-status.is-success .fs24-newsletter-status-mark::before {
	content: "\2713"; /* Haken */
}

.fs24-newsletter-status.is-error {
	color: #ff9d86;
}

.fs24-newsletter-status.is-error .fs24-newsletter-status-mark::before {
	content: "\2715"; /* Kreuz */
}

.fs24-newsletter-status.is-notice {
	color: rgba(255, 255, 255, 0.85);
}

.fs24-newsletter-status.is-notice .fs24-newsletter-status-mark::before {
	content: "\2139"; /* Informationszeichen */
}

.fs24-newsletter-privacy {
	margin: 0;
	max-width: 64ch;
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

/* Eigener Selektor mit Elternklasse: Ein globales "a { color: inherit }"
   würde eine reine Elementregel sonst schlagen – dieselbe Falle wie
   bei den Primärbuttons dokumentiert. */
.fs24-newsletter-privacy a {
	color: rgba(255, 255, 255, 0.88);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fs24-newsletter-privacy a:hover {
	color: #fff;
}

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

/* Ladezustand. Der Knopf ist währenddessen "disabled" – das ist die
   eigentliche Sperre gegen mehrfaches Absenden; die Optik macht sie
   nur sichtbar. */
.fs24-newsletter-form.is-sending .fs24-newsletter-submit,
.fs24-newsletter-submit:disabled {
	opacity: 0.72;
	cursor: progress;
}

.fs24-newsletter-form.is-sending .fs24-newsletter-input {
	opacity: 0.8;
}

/* Honeypot. Das Feld trägt dieselben Werte bereits inline im Markup,
   damit es auch ohne diese Datei unsichtbar bleibt; hier stehen sie
   nur, damit die Regel auffindbar ist. */
.fs24-newsletter-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================
   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-row {
		flex-direction: column;
		align-items: stretch;
	}

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

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